/* ============================================================================
 *  coldforge.css — the locked CRT "Coldforge Access Terminal" design system.
 *
 *  Source of truth for the auth portal (landing/login/redeem/admin, Waves
 *  P1/P3) AND the player terminal frame (P2/P4). Lifted verbatim from the
 *  approved design mockup (docs/Coldforge Terminal.html → docs/portal-mockup.html)
 *  so the shipped pages match it pixel-for-pixel.
 *
 *  Fonts: 'Press Start 2P' (pixel — headings, buttons) + 'VT323' (terminal —
 *  body, inputs). Load once per page:
 *    <link rel="preconnect" href="https://fonts.googleapis.com">
 *    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
 *  (Self-host the two woff2 under portal/public/fonts/ before a real event to
 *   avoid the third-party dependency — same files the mockup bundled.)
 * ========================================================================== */

:root {
  --cf-phos:  #d6d6d6;   /* phosphor text */
  --cf-dim:   #7a7a7a;   /* dim label / secondary */
  --cf-amber: #ffffff;   /* highlight ("operator" callouts) */
  --cf-warn:  #f2f2f2;   /* error text (glows white-hot) */
  --cf-page:  #07090a;   /* page behind the bezel */
  --cf-bezel-1: #1b1e21;
  --cf-bezel-2: #0e1012;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--cf-page); }

/* ---- layout: page → bezel → screen ---------------------------------------- */
.cf-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 34px 16px;
  font-family: 'VT323', monospace;
}

.cf-bezel {
  width: 760px; max-width: 100%;
  padding: 20px;
  background: linear-gradient(var(--cf-bezel-1), var(--cf-bezel-2));
  border-radius: 28px;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.07),
              inset 0 -6px 14px rgba(0,0,0,.7),
              0 36px 70px rgba(0,0,0,.55);
}
/* the terminal screen wants a wider bezel */
.cf-bezel--wide { width: 1100px; }

.cf-screen {
  position: relative; overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 30%, #161616 0%, #0b0b0b 55%, #040404 100%);
  border: 2px solid #2a2a2a;
  padding: 38px 44px 34px;
  min-height: 560px;
  animation: cf-flicker 7s linear infinite;
}

/* ---- CRT overlays (purely decorative; pointer-events:none) ----------------- */
.cf-scanlines, .cf-sweep, .cf-vignette { position: absolute; pointer-events: none; }
.cf-scanlines {
  /* Subtle CRT scanlines: a thin dark line every 4px, kept light so glowing
   * text stays solid and legible (the original mockup's denser .5/.5 striping
   * was too aggressive over body copy). */
  inset: 0; z-index: 6; opacity: .35;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 3px, rgba(0,0,0,.35) 3px, rgba(0,0,0,.35) 4px);
}
.cf-sweep {
  left: 0; right: 0; top: 0; height: 150px; z-index: 7;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.04), rgba(255,255,255,0));
  animation: cf-sweep 7s linear infinite;
}
.cf-vignette { inset: 0; z-index: 8; border-radius: 16px; box-shadow: inset 0 0 150px 30px rgba(0,0,0,.85); }
.cf-content  { position: relative; z-index: 4; }

/* ---- header / title / tagline --------------------------------------------- */
.cf-head {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--cf-dim); font-size: 18px; letter-spacing: .5px;
  border-bottom: 2px dashed #2f2f2f; padding-bottom: 12px; margin-bottom: 26px;
}
.cf-title {
  margin: 0 0 6px; font-family: 'Press Start 2P', monospace;
  font-size: 30px; letter-spacing: 2px; line-height: 1.15; color: var(--cf-phos);
  text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255,255,255,.3);
}
.cf-tagline { margin: 0 0 26px; font-size: 24px; color: var(--cf-phos); text-shadow: 0 0 6px currentColor; }
.cf-tagline .cf-amber { color: var(--cf-amber); }
.cf-prompt { font-size: 23px; color: var(--cf-phos); text-shadow: 0 0 7px currentColor; margin-bottom: 22px; line-height: 1.3; }

/* ---- form controls -------------------------------------------------------- */
.cf-field { display: block; margin-bottom: 18px; }
.cf-field > .cf-label { font-size: 20px; color: var(--cf-dim); margin-bottom: 6px; letter-spacing: .5px; }

.cf-in {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 2px solid var(--cf-dim); color: var(--cf-phos);
  font-family: 'VT323', monospace; font-size: 26px; letter-spacing: 1px;
  padding: 9px 12px; outline: none;
  caret-color: var(--cf-phos); text-shadow: 0 0 6px currentColor;
}
.cf-in:focus { border-color: var(--cf-phos); box-shadow: 0 0 12px rgba(255,255,255,.18), inset 0 0 12px rgba(255,255,255,.06); }
.cf-in::placeholder { color: var(--cf-dim); opacity: .7; }

.cf-btn {
  cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 13px; line-height: 1.5;
  padding: 14px 16px; background: rgba(255,255,255,.04);
  border: 2px solid var(--cf-phos); color: var(--cf-phos); text-shadow: 0 0 7px currentColor;
  transition: background .12s, box-shadow .12s, transform .05s; text-align: center;
}
.cf-btn:hover  { background: rgba(255,255,255,.12); box-shadow: 0 0 16px rgba(255,255,255,.2); }
.cf-btn:active { transform: translateY(1px); }
.cf-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-btn .cf-sub { font-family: 'VT323', monospace; font-size: 18px; color: var(--cf-dim); margin-top: 10px; line-height: 1.2; }

.cf-ghost {
  cursor: pointer; font-family: 'VT323', monospace; font-size: 22px;
  color: var(--cf-dim); background: none; border: none; padding: 4px;
  text-decoration: underline; text-underline-offset: 3px;
}
.cf-ghost:hover { color: var(--cf-phos); text-shadow: 0 0 7px currentColor; }

.cf-error { margin-top: 16px; color: var(--cf-warn); font-size: 21px; letter-spacing: .5px; text-shadow: 0 0 8px rgba(255,255,255,.5); }
.cf-ok    { color: var(--cf-phos); font-size: 23px; text-shadow: 0 0 7px currentColor; line-height: 1.4; }

/* blinking block cursor for "CF>_" prompts */
.cf-cursor { display: inline-block; width: .6em; height: 1em; background: var(--cf-phos);
  margin-left: 2px; vertical-align: -2px; animation: cf-blink 1s steps(1) infinite; box-shadow: 0 0 8px currentColor; }

/* ---- admin console: a denser variant of the same screen ------------------- */
.cf-table { width: 100%; border-collapse: collapse; font-family: 'VT323', monospace; font-size: 20px; color: var(--cf-phos); }
.cf-table th { text-align: left; color: var(--cf-dim); font-size: 16px; letter-spacing: .5px;
  border-bottom: 2px dashed #2f2f2f; padding: 8px 10px; text-transform: uppercase; }
.cf-table td { border-bottom: 1px solid #1c1c1c; padding: 8px 10px; text-shadow: 0 0 5px currentColor; }
.cf-tag { font-family: 'VT323', monospace; font-size: 16px; padding: 1px 8px; border: 1px solid var(--cf-dim); color: var(--cf-dim); }
.cf-tag--ok   { color: var(--cf-phos); border-color: var(--cf-phos); }
.cf-tag--off  { color: #c98; border-color: #c98; }

/* ---- the live player terminal, wrapped in the same CRT screen -------------- */
/* P2/P4: ttyd renders inside .cf-term (an <iframe> or the xterm host). The frame,
 * scanlines, and vignette match the portal; xterm's own theme is set to the
 * phosphor palette below (pass via ttyd --client-option, or a custom ttyd index). */
/* Flex column with a DEFINITE height: the status bar is a fixed 34px row and the
 * ttyd <iframe> takes the rest (flex:1). This avoids sizing the iframe by
 * percentage/inset — a replaced element sized only by top/bottom/left/right falls
 * back to its intrinsic 300x150, and height:100% can't resolve against a
 * min-height parent (both produced a stunted terminal). Flex gives it a concrete
 * full size at load, which is also what ttyd fits xterm to. */
.cf-screen--term { padding: 0; height: 82vh; min-height: 560px; display: flex; flex-direction: column; }
.cf-termbar {
  flex: 0 0 34px; z-index: 9;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--cf-dim); font-size: 16px; letter-spacing: .5px; padding: 0 14px;
  background: #060606; border-bottom: 1px solid rgba(214,214,214,.14);
}
/* Token-budget readout in the middle of the status bar (BRIEF: usage lives in the
 * status bar). Amber past 75%, red past 90% — matches the proxy's budget nudges. */
.cf-usage { color: var(--cf-dim); white-space: nowrap; }
.cf-usage--warn { color: #d8b24a; text-shadow: 0 0 6px rgba(216,178,74,.5); }
.cf-usage--crit { color: #e0635a; text-shadow: 0 0 6px rgba(224,99,90,.5); }
/* Below the bar; fills the remaining height and full width. */
.cf-term { flex: 1 1 auto; width: 100%; z-index: 4; border: 0; background: #040404; }

/* ---- single-terminal lock screen ------------------------------------------ */
/* One live terminal per operator: a second window gets this CRT lock overlay
 * instead of its own shell. Sits above the iframe (z:4) but below the decorative
 * scanline/sweep/vignette (z:6-8) so the phosphor glow still rides over it. */
.cf-lock {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(120% 120% at 50% 30%, #0d0d0d 0%, #070707 60%, #020202 100%);
}
.cf-lock[hidden] { display: none; }
.cf-lock-inner { max-width: 600px; padding: 0 28px; }
.cf-lock-icon {
  font-family: 'Press Start 2P', monospace; font-size: 34px; color: var(--cf-warn);
  text-shadow: 0 0 18px rgba(255,255,255,.5); margin-bottom: 20px;
}
.cf-lock-title {
  font-family: 'Press Start 2P', monospace; font-size: 24px; letter-spacing: 2px; color: var(--cf-phos);
  text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255,255,255,.3); margin-bottom: 18px;
}
.cf-lock-msg { font-size: 22px; color: var(--cf-phos); text-shadow: 0 0 6px currentColor; line-height: 1.4; margin-bottom: 26px; }
.cf-lock-wait { margin-top: 24px; font-size: 20px; color: var(--cf-dim); }

/* ---- mobile gate ----------------------------------------------------------
 * Coldforge's CRT layout is built for a real screen, not a pocket rectangle.
 * Rather than reflow the bezel down to phone widths we hard-gate it: a fixed,
 * full-viewport overlay that only appears under a narrow/coarse viewport and
 * has NO dismiss path — there is deliberately no "continue anyway" button, so
 * the operator cannot proceed. Pure CSS (a media query toggles display) so it
 * holds even with JavaScript disabled and can't be clicked past. Lives at the
 * top z-index, above every CRT overlay. */
.cf-mobile {
  display: none;                       /* shown only by the media query below */
  position: fixed; inset: 0; z-index: 999;
  align-items: center; justify-content: center; text-align: center;
  padding: 28px 22px;
  font-family: 'VT323', monospace;
  background: radial-gradient(120% 120% at 50% 30%, #0d0d0d 0%, #070707 60%, #020202 100%);
}
.cf-mobile-inner { max-width: 520px; }
.cf-mobile-icon {
  font-family: 'Press Start 2P', monospace; font-size: 30px; color: var(--cf-warn);
  text-shadow: 0 0 18px rgba(255,255,255,.5); margin-bottom: 22px; line-height: 1.3;
}
.cf-mobile-title {
  font-family: 'Press Start 2P', monospace; font-size: 18px; letter-spacing: 2px; color: var(--cf-phos);
  text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255,255,255,.3); margin-bottom: 20px; line-height: 1.4;
}
.cf-mobile-msg { font-size: 22px; color: var(--cf-phos); text-shadow: 0 0 6px currentColor; line-height: 1.45; margin-bottom: 18px; }
.cf-mobile-msg .cf-amber { color: var(--cf-amber); }
.cf-mobile-foot { font-size: 19px; color: var(--cf-dim); letter-spacing: .5px; }

/* A phone or a screen too narrow for the 760px bezel: raise the wall. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  .cf-mobile { display: flex; }
}

@keyframes cf-blink   { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes cf-flicker { 0%,100% { opacity: 1 } 47% { opacity: .985 } 48% { opacity: .93 } 49% { opacity: .985 } 71% { opacity: .96 } 72% { opacity: 1 } }
@keyframes cf-sweep   { 0% { transform: translateY(-160px) } 100% { transform: translateY(820px) } }
@keyframes cf-pwr     { 0% { opacity: 0; transform: scaleY(.004) } 10% { opacity: 1; transform: scaleY(.01) } 40% { transform: scaleY(1) } 100% { opacity: 1; transform: scaleY(1) } }

@media (prefers-reduced-motion: reduce) {
  .cf-screen, .cf-sweep, .cf-cursor { animation: none; }
}