@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/*
 * BLACKOUT — the terminal theme (GDD §2.1).
 * The one reference: the ship terminals of Aliens (1986). Cassette futurism —
 * a black CRT, bluish-green phosphor type, chunky monospace, everything rendered
 * as procedure and readout. Type is the art: no illustration, no chrome.
 *
 * The ENTIRE theme is scoped under `.blackout` so the platform catalog, lobby
 * chrome, and other games keep their own look. This establishes the pattern
 * that a game may own its full visual identity.
 *
 * Color is semantic, never decorative: phosphor = the network / neutral info;
 * amber = threat + warnings; red (alarm) appears at most twice a game so it
 * lands like a klaxon. Meters and outcomes are ALWAYS labeled in text — color
 * alone never carries meaning (accessibility).
 */

/* ---- full-screen breakout ------------------------------------------------
 * Blackout owns the ENTIRE viewport (its cinematic theme is a deliberate
 * divergence, GDD §2.1). Neutralize the platform's storybook chrome — the
 * cream page, the centered+padded column, the floating 🌈/⭐ doodles — so the
 * terminal runs edge to edge. Scoped via :has() so no other game is touched;
 * when no .blackout is on the page these rules simply don't match. */
html:has(.blackout),
body:has(.blackout) { background: #04100d; }

.board:has(.blackout),
.phone:has(.blackout) {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  justify-content: flex-start;
  background: #04100d;
}
.board:has(.blackout)::before,
.board:has(.blackout)::after { content: none; display: none; }

.blackout.bk-board,
.blackout.bk-phone {
  flex: 1 1 auto;
  width: 100%;
  align-self: stretch;
  min-height: 100dvh;
}

.blackout {
  --bk-screen:   #04100d;  /* near-black with a green cast — never pure #000 */
  --bk-screen-2: #072019;
  --bk-phosphor: #6ff7d8;  /* primary bluish-green: all text, meters, chrome */
  --bk-dim:      #2e7a6b;  /* secondary text, borders, inactive states */
  --bk-amber:    #ffb347;  /* Threat meter, warnings, UNVERIFIED stamps */
  --bk-alarm:    #ff4a3d;  /* reserved: Final Protocol and a stolen win only */

  /* Kept deliberately small. A phosphor glow at reading size just reads as
     blur, so it lives ONLY on large display type (see .bk-glow-target below) —
     body, instructions, inputs, and buttons stay crisp. */
  --bk-glow: 0 0 3px rgba(111, 247, 216, 0.28);
  --bk-font: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  background: radial-gradient(120% 90% at 50% 0%, var(--bk-screen-2), var(--bk-screen) 70%);
  color: var(--bk-phosphor);
  font-family: var(--bk-font);
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

/* Subtle glow on big display type only — everything else renders sharp. */
.bk-title, .bk-op-title, .bk-classified__msg, .bk-count,
.bk-secret, .bk-reveal__secret, .bk-outcome, .bk-end-headline,
.bk-big, .bk-transmitted__stamp {
  text-shadow: var(--bk-glow);
}
.bk-meter--integrity .bk-meter__blocks { text-shadow: var(--bk-glow); }

.blackout *,
.blackout *::before,
.blackout *::after { box-sizing: border-box; }

/* Subtle CRT scanline overlay + vignette. One decorative layer, ignorable. */
.bk-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  box-shadow: inset 0 0 180px 40px rgba(0, 0, 0, 0.55);
}
.blackout > *:not(.bk-scanlines) { position: relative; z-index: 1; }

/* ---- board (TV) --------------------------------------------------------- */

.bk-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
}

.bk-title {
  margin: 0.4rem 0 0;
  font-size: clamp(3rem, 12vw, 9rem);
  letter-spacing: 0.18em;
  font-weight: 400;
}
.bk-cursor { animation: bk-blink 1s steps(1) infinite; }
@keyframes bk-blink { 50% { opacity: 0; } }

.bk-tagline {
  color: var(--bk-dim);
  letter-spacing: 0.5em;
  font-size: clamp(0.8rem, 2vw, 1.3rem);
}

.bk-boot { color: var(--bk-dim); font-size: clamp(0.7rem, 1.6vw, 1rem); line-height: 1.8; opacity: 0.6; }
.bk-ok { color: var(--bk-phosphor); }

/* Boot/lobby join layout */
.bk-lobby {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 4rem);
  justify-content: center;
  align-items: flex-start;
  margin-top: 1rem;
  width: 100%;
  max-width: 1100px;
}
.bk-join { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.bk-join__qr {
  width: clamp(150px, 22vw, 240px);
  padding: 12px;
  background: var(--bk-phosphor);
  border-radius: 4px;
}
.bk-join__qr svg { display: block; width: 100%; height: auto; }
.bk-join__code {
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.3em;
  border: 2px solid var(--bk-dim);
  padding: 0.2em 0.4em;
}
.bk-join__url { color: var(--bk-dim); font-size: 0.85rem; }

.bk-roster-wrap { text-align: left; min-width: min(340px, 90vw); }
.bk-section-label {
  color: var(--bk-dim);
  letter-spacing: 0.25em;
  border-bottom: 1px solid var(--bk-dim);
  padding-bottom: 0.3rem;
  margin-bottom: 0.8rem;
}
.bk-roster { list-style: none; margin: 0; padding: 0; }
.bk-roster li { display: flex; align-items: center; gap: 0.7rem; padding: 0.32rem 0; }
.bk-roster__no { color: var(--bk-dim); font-size: 0.8rem; }
.bk-roster__name { font-size: clamp(1rem, 2.4vw, 1.4rem); }
.bk-badge {
  margin-left: auto;
  font-size: 0.7rem;
  border: 1px solid var(--bk-dim);
  padding: 0.1em 0.5em;
  color: var(--bk-dim);
}
.bk-dim { color: var(--bk-dim); }
.bk-hint { margin-top: 1.2rem; color: var(--bk-phosphor); line-height: 1.7; }
.bk-warn { display: block; color: var(--bk-amber); margin-top: 0.4rem; letter-spacing: 0.15em; }

/* ---- HUD + meters ------------------------------------------------------- */

.bk-hud {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.bk-hud__op { color: var(--bk-dim); letter-spacing: 0.25em; font-size: clamp(0.75rem, 1.8vw, 1rem); }

.bk-meters { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 1100px; }
.bk-meter__label { color: var(--bk-dim); font-size: clamp(0.7rem, 1.6vw, 0.95rem); letter-spacing: 0.22em; }
.bk-meter__row { display: flex; align-items: center; justify-content: center; gap: 0.8rem; }
.bk-meter__blocks {
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  letter-spacing: 0.1em;
  line-height: 1;
}
.bk-meter__count { color: var(--bk-dim); font-size: clamp(0.9rem, 2vw, 1.2rem); }
.bk-meter--integrity .bk-meter__blocks { color: var(--bk-phosphor); }
.bk-meter--threat .bk-meter__blocks,
.bk-meter--threat .bk-meter__label { color: var(--bk-amber); }
.bk-meter--threat .bk-meter__blocks { text-shadow: 0 0 3px rgba(255, 179, 71, 0.3); }

/* ---- operation screens -------------------------------------------------- */

.bk-op-kicker { color: var(--bk-dim); letter-spacing: 0.3em; font-size: clamp(0.8rem, 2vw, 1.1rem); }
.bk-op-title {
  margin: 0.2rem 0;
  font-size: clamp(1.8rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.12em;
}
.bk-lead { color: var(--bk-phosphor); letter-spacing: 0.2em; }
.bk-category {
  color: var(--bk-amber);
  border: 1px solid var(--bk-amber);
  padding: 0.3em 0.8em;
  letter-spacing: 0.2em;
}
.bk-brief-text, .bk-await { max-width: 40ch; line-height: 1.7; color: var(--bk-phosphor); }
.bk-await { color: var(--bk-dim); letter-spacing: 0.15em; margin-top: 0.5rem; }

/* Classified window */
.bk-board--classified, .bk-phone--classified { justify-content: center; }
.bk-classified { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 3rem 1rem; }
.bk-classified__stamp { color: var(--bk-amber); letter-spacing: 0.35em; font-size: clamp(1rem, 3vw, 1.8rem); }
.bk-classified__msg { font-size: clamp(1.8rem, 7vw, 4.5rem); letter-spacing: 0.15em; }
.bk-classified__sub { color: var(--bk-dim); }
.bk-count { font-size: clamp(4rem, 18vw, 12rem); line-height: 1; }
.bk-count--small { font-size: clamp(1.4rem, 4vw, 2.4rem); color: var(--bk-dim); }
.is-expiring .bk-count, .bk-count.is-expiring { color: var(--bk-amber); }

/* Progress readout */
.bk-progress { letter-spacing: 0.25em; font-size: clamp(1rem, 3vw, 1.6rem); }
.bk-progress__n { color: var(--bk-amber); }

/* Clue walls */
.bk-cluewall { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; max-width: 1000px; margin: 0.6rem 0; }
.bk-cluewall--attributed { flex-direction: column; align-items: stretch; }
.bk-clue { border: 1px solid var(--bk-dim); padding: 0.5em 0.9em; letter-spacing: 0.08em; }
.bk-cluewall--attributed .bk-clue { display: flex; justify-content: space-between; gap: 1.5rem; font-size: clamp(1rem, 2.6vw, 1.5rem); }
.bk-clue__who { color: var(--bk-dim); }
.bk-clue__text { color: var(--bk-phosphor); }
.bk-clue--anon { font-size: clamp(1.1rem, 3vw, 1.8rem); }
.bk-clue__idx { color: var(--bk-amber); margin-right: 0.4em; }

/* Code Phrase reconstruction quiz (TV, read-only — the accused taps on their phone) */
.bk-quiz { display: flex; flex-direction: column; gap: 0.7rem; max-width: 640px; margin: 0.6rem 0; }
.bk-quiz__opt { display: flex; align-items: baseline; gap: 1rem; border: 1px solid var(--bk-dim);
  padding: 0.5em 0.9em; letter-spacing: 0.08em; font-size: clamp(1.1rem, 3vw, 1.9rem); }
.bk-quiz__key { color: var(--bk-amber); }
.bk-quiz__text { color: var(--bk-phosphor); }

/* Reveal */
.bk-reveal { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bk-reveal__label { color: var(--bk-dim); letter-spacing: 0.3em; }
.bk-reveal__secret { font-size: clamp(2rem, 7vw, 4.5rem); letter-spacing: 0.15em; }
.bk-decrypt { color: var(--bk-dim); letter-spacing: 0.35em; font-size: clamp(0.9rem, 2.5vw, 1.4rem); }
.bk-reveal__verdict { max-width: 40ch; line-height: 1.7; }
.bk-reveal__note { color: var(--bk-amber); letter-spacing: 0.15em; }
.bk-outcome { font-size: clamp(1.5rem, 5vw, 3rem); letter-spacing: 0.15em; padding: 0.2em 0.6em; }
.bk-outcome--secured { color: var(--bk-phosphor); border: 2px solid var(--bk-phosphor); }
.bk-outcome--compromised { color: var(--bk-amber); border: 2px solid var(--bk-amber); text-shadow: 0 0 3px rgba(255, 179, 71, 0.3); }

/* End / recap */
.bk-board--finished { gap: 1.1rem; }
.bk-end-headline { font-size: clamp(2rem, 7vw, 4.5rem); letter-spacing: 0.12em; }
.bk-end-sub { color: var(--bk-dim); letter-spacing: 0.35em; }
.bk-recap { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 640px; text-align: left; }
.bk-recap li { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0; border-bottom: 1px dashed rgba(46, 122, 107, 0.4); }
.bk-recap__role { margin-left: auto; letter-spacing: 0.15em; font-size: 0.85rem; padding: 0.1em 0.6em; border: 1px solid var(--bk-dim); color: var(--bk-dim); }
.bk-recap__role--infiltrator { color: var(--bk-amber); border-color: var(--bk-amber); }
.bk-recap__role--controller { color: var(--bk-phosphor); border-color: var(--bk-phosphor); }

/* Alarm state — red, reserved */
.bk-board--alarm, .bk-phone--alarm { --bk-phosphor: var(--bk-alarm); }
.bk-alarm-text { color: var(--bk-alarm); text-shadow: 0 0 4px rgba(255, 74, 61, 0.35); }

/* ---- phone (field terminal) --------------------------------------------- */

.bk-phone {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
}
/* Pure flavor chrome — recede it so gameplay text carries the eye. */
.bk-term-head {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(46, 122, 107, 0.35);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--bk-dim);
  opacity: 0.65;
}
/* except when it's carrying live gameplay info (the classified countdown). */
.bk-term-head--alert { color: var(--bk-amber); border-color: var(--bk-amber); opacity: 1; }
.bk-term-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1.2rem;
  text-align: center;
}
.bk-you { letter-spacing: 0.2em; font-size: 1.3rem; }
.bk-big { font-size: clamp(2rem, 12vw, 3.2rem); letter-spacing: 0.15em; margin: 0.5rem 0; }

.bk-role-pill {
  letter-spacing: 0.25em;
  border: 2px solid var(--bk-dim);
  padding: 0.3em 1em;
  color: var(--bk-phosphor);
}
.bk-role-pill--infiltrator { color: var(--bk-amber); border-color: var(--bk-amber); }
.bk-role-pill--controller { color: var(--bk-phosphor); border-color: var(--bk-phosphor); }
.bk-dossier { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(46,122,107,0.4); width: 100%; }

.bk-secret-label { color: var(--bk-dim); letter-spacing: 0.25em; font-size: 0.8rem; }
.bk-secret { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: 0.1em; }
.bk-secret--sm { font-size: clamp(1.1rem, 5vw, 1.6rem); }
.bk-secret--void { color: var(--bk-dim); font-size: clamp(1.2rem, 6vw, 1.8rem); }
.bk-classified-body { justify-content: flex-start; }

/* Three visually distinct roles, so no one has to guess what's tappable:
 *   INSTRUCTION — dim, sentence-case help text. No border, no tracking.
 *   INPUT       — a recessed well (inset shadow, dashed rule, a label above).
 *   BUTTON      — raised, filled, bracketed, with a press animation.
 */
.bk-instruction {
  color: var(--bk-dim);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  max-width: 34ch;
  margin: 0 auto;
}

.bk-form { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; max-width: 360px; }
.bk-field-label {
  align-self: flex-start;
  color: var(--bk-phosphor);
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.bk-field {
  width: 100%;
  background: #03120e;
  border: 1px dashed var(--bk-dim);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
  color: var(--bk-phosphor);
  font-family: var(--bk-font);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  padding: 0.7em 0.8em;
  text-align: left;
  caret-color: var(--bk-phosphor);
}
.bk-field::placeholder { color: var(--bk-dim); letter-spacing: 0.05em; }
.bk-field:focus {
  outline: none;
  border-style: solid;
  border-color: var(--bk-phosphor);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--bk-phosphor);
}

.bk-btn {
  width: 100%;
  max-width: 360px;
  margin-top: 0.35rem;
  background: rgba(111, 247, 216, 0.16);
  border: 2px solid var(--bk-phosphor);
  color: var(--bk-phosphor);
  font-family: var(--bk-font);
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  padding: 0.85em 1em;
  cursor: pointer;
  transition: background 80ms linear, transform 40ms linear;
}
.bk-btn:hover { background: rgba(111, 247, 216, 0.28); }
.bk-btn:active { transform: translateY(1px); background: rgba(111, 247, 216, 0.36); }
.bk-btn.is-disabled, .bk-btn:disabled { background: transparent; color: var(--bk-dim); border-color: var(--bk-dim); cursor: not-allowed; }
.bk-btn--host { border-color: var(--bk-amber); color: var(--bk-amber); background: rgba(255, 179, 71, 0.14); margin-top: 1.5rem; }
.bk-btn--host:hover { background: rgba(255, 179, 71, 0.26); }
.bk-btn--choice { text-align: left; background: rgba(111, 247, 216, 0.08); }
.bk-btn--choice::before { content: "▸ "; color: var(--bk-phosphor); }
.bk-btn--choice:hover { background: rgba(111, 247, 216, 0.2); }
.bk-btn--choice.is-picked { background: rgba(111, 247, 216, 0.3); border-style: solid; }
/* Sabotage — amber, so PROCEED vs SABOTAGE never gets misread. */
.bk-btn--danger { border-color: var(--bk-amber); color: var(--bk-amber); background: rgba(255, 179, 71, 0.14); }
.bk-btn--danger:hover { background: rgba(255, 179, 71, 0.28); }

/* Extraction team chips (the public deployed team) */
.bk-team-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.3rem 0; }
.bk-team-chip { border: 1px solid var(--bk-phosphor); padding: 0.3em 0.8em; letter-spacing: 0.1em; }
.bk-team-chips--large .bk-team-chip { font-size: clamp(1.1rem, 3vw, 1.6rem); padding: 0.4em 1em; }
.bk-team-panel { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }

/* Fragment Protocol reveal readout */
.bk-fragment-lines { display: flex; flex-direction: column; gap: 0.5rem; letter-spacing: 0.12em; font-size: clamp(0.85rem, 2vw, 1.15rem); }

/* Intercept-sweep distribution ("4 · 2 · 1 · 0 · 0 · 0") */
.bk-distribution { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.bk-dist-cell {
  min-width: 2.2em;
  border: 1px solid var(--bk-dim);
  padding: 0.3em 0.4em;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  text-align: center;
}
.bk-dist-cell:first-child { border-color: var(--bk-amber); color: var(--bk-amber); }

/* Static-sweep UNVERIFIED stamp */
.bk-unverified {
  color: var(--bk-amber);
  border: 2px solid var(--bk-amber);
  padding: 0.2em 0.7em;
  letter-spacing: 0.3em;
}

/* Recap commendations */
.bk-recap--commend .bk-commend-badge {
  color: var(--bk-amber);
  letter-spacing: 0.18em;
  border: 1px solid var(--bk-amber);
  padding: 0.1em 0.6em;
  font-size: 0.8rem;
  min-width: 8.5em;
}

/* button_to wraps each button in a form; kill default margins + let them stack */
.bk-choicelist { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; max-width: 360px; }
.bk-choicelist form, .bk-form { margin: 0; }
.bk-choicelist form { width: 100%; }

.bk-transmitted { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding-top: 1.5rem; }
.bk-transmitted__stamp { font-size: clamp(1.4rem, 8vw, 2.2rem); letter-spacing: 0.2em; }
.bk-progress-mini { color: var(--bk-dim); letter-spacing: 0.2em; }
.bk-progress-mini strong { color: var(--bk-amber); }
.bk-error { color: var(--bk-amber); letter-spacing: 0.1em; }

.center { text-align: center; }

/* Outcome text coloring (phone big states) */
.bk-outcome--secured { color: var(--bk-phosphor); }
.bk-outcome--compromised { color: var(--bk-amber); }

/* The synchronized "secure your terminals" jolt (Classified Window) */
.classified-flash { animation: bk-flash 0.6s ease-out; }
@keyframes bk-flash {
  0% { background: var(--bk-phosphor); }
  100% { background: transparent; }
}

/* ---- accessibility: honor reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bk-cursor { animation: none; }
  .classified-flash { animation: none; }
  .bk-scanlines { display: none; }
  .blackout, .blackout * { text-shadow: none !important; }
}