/**
 * Pixel Forge — Shared Design Tokens & Components
 * Linked by login.html, create-character.html, and supplemented by style.css
 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* =====================================================================
   DESIGN TOKENS
   ===================================================================== */
:root {
  /* Colours */
  --pf-bg:          #0d0d1a;
  --pf-bg-deep:     #07070f;
  --pf-bg-panel:    #111128;
  --pf-bg-input:    #08081a;

  --pf-cyan:        #4cc9f0;
  --pf-pink:        #ff6b6b;
  --pf-green:       #39ff14;
  --pf-gold:        #ffd700;
  --pf-purple:      #b44fff;
  --pf-red:         #e94560;

  --pf-text:        #e0e0e0;
  --pf-muted:       #888;
  --pf-dim:         #444;

  /* HP colours (shared with game HUD) */
  --hp-high:        #00ff00;
  --hp-mid:         #ffff00;
  --hp-low:         #ff0000;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;

  /* Font sizes — floor at 10px so Safari's minimum-font-size
     enforcement never causes unexpected layout reflow */
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-base: 12px;
  --fs-md:  12px;
  --fs-lg:  16px;
  --fs-xl:  24px;
}

/* =====================================================================
   RESET
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =====================================================================
   TYPOGRAPHY BASE
   ===================================================================== */

/* Prevent Safari/iOS from auto-scaling text on orientation change or
   viewport resize. This must sit on html, not body, to take effect. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Press Start 2P', monospace;
  color: var(--pf-text);
  -webkit-font-smoothing: none; /* Keep pixel-sharp */
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid transparent;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  text-decoration: none;
  line-height: 1;
  text-align: center;
}
.pf-btn:hover:not(:disabled) { transform: translateY(-2px); }
.pf-btn:active:not(:disabled) { transform: translateY(0); }
.pf-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* Primary — green "play now" */
.pf-btn-play {
  background: linear-gradient(135deg, #39ff14 0%, #1a8000 100%);
  border-color: #39ff14;
  color: #000;
  font-size: var(--fs-md);
  box-shadow: 0 0 12px rgba(57,255,20,0.35);
}
.pf-btn-play:hover:not(:disabled) {
  background: linear-gradient(135deg, #5fff35 0%, #28b000 100%);
  box-shadow: 0 0 22px rgba(57,255,20,0.55);
}

/* Create / forge — purple */
.pf-btn-create {
  background: linear-gradient(135deg, #b44fff 0%, #5500cc 100%);
  border-color: var(--pf-purple);
  color: #fff;
  font-size: var(--fs-md);
  box-shadow: 0 0 12px rgba(180,79,255,0.35);
}
.pf-btn-create:hover:not(:disabled) {
  background: linear-gradient(135deg, #c870ff 0%, #6600ee 100%);
  box-shadow: 0 0 22px rgba(180,79,255,0.55);
}

/* Secondary — cyan outline */
.pf-btn-secondary {
  background: rgba(76,201,240,0.08);
  border-color: var(--pf-cyan);
  color: var(--pf-cyan);
}
.pf-btn-secondary:hover:not(:disabled) {
  background: rgba(76,201,240,0.18);
}

/* Google */
.pf-btn-google {
  background: #fff;
  border-color: #ccc;
  color: #333;
  font-size: var(--fs-sm);
}
.pf-btn-google:hover:not(:disabled) { background: #f0f0f0; }

/* =====================================================================
   FORM ELEMENTS
   ===================================================================== */
.pf-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--pf-muted);
  margin-bottom: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pf-input {
  width: 100%;
  padding: 12px;
  background: var(--pf-bg-input);
  border: 2px solid var(--pf-cyan);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
}
.pf-input:focus {
  border-color: var(--pf-pink);
  box-shadow: 0 0 8px rgba(255,107,107,0.3);
}
.pf-input::placeholder { color: var(--pf-dim); }

.pf-form-group { margin-bottom: 18px; }

/* =====================================================================
   ALERTS / MESSAGES
   ===================================================================== */
.pf-alert {
  padding: 10px 12px;
  font-size: var(--fs-sm);
  text-align: center;
  display: none;
  margin-bottom: 16px;
  border: 1px solid transparent;
  line-height: 1.8;
}
.pf-alert.error {
  background: rgba(255,107,107,0.12);
  border-color: var(--pf-pink);
  color: var(--pf-pink);
  display: block;
}
.pf-alert.success {
  background: rgba(76,201,240,0.12);
  border-color: var(--pf-cyan);
  color: var(--pf-cyan);
  display: block;
}

/* =====================================================================
   DIVIDER
   ===================================================================== */
.pf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: var(--fs-xs);
  color: var(--pf-dim);
}
.pf-divider::before, .pf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #252535;
}

/* =====================================================================
   LOADING SPINNER
   ===================================================================== */
.pf-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: pf-spin 0.8s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   RESPONSIVE — Mobile helpers
   ===================================================================== */

/* Prevent iOS Safari from auto-zooming on input focus (requires 16px min) */
@media (max-width: 768px) {
  .pf-input {
    font-size: 16px;
  }

  /* Minimum 44px tap target height for all buttons */
  .pf-btn {
    min-height: 44px;
  }
}

/* =====================================================================
   AGENT CONTROL BADGE  (used in game HUD)
   ===================================================================== */
.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  border: 2px solid;
  letter-spacing: 1px;
  transition: all 0.4s ease;
  white-space: nowrap;
}
.agent-badge.active {
  border-color: var(--pf-green);
  color: var(--pf-green);
  background: rgba(57,255,20,0.07);
  box-shadow: 0 0 10px rgba(57,255,20,0.25);
}
.agent-badge.idle {
  border-color: #3a3a4a;
  color: #555;
  background: transparent;
  box-shadow: none;
}
.agent-badge .badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.agent-badge.active .badge-dot {
  animation: pf-blink 1.2s ease-in-out infinite;
}
@keyframes pf-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}