/* ============================================================
   BITCOIN WAR v3 — THE ETERNAL THEATER
   Cinematic top-down surface. Off-system by explicit grant;
   fonts self-hosted (no CDNs), attribution kept.
   Palette: void night · bone · gold flare · cobalt vs ember.
   ============================================================ */

@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400;
  src: url('../assets/fonts/Marcellus-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  src: url('../assets/fonts/IBMPlexMono-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  src: url('../assets/fonts/IBMPlexMono-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400;
  src: url('../assets/fonts/Fraunces-400i.woff2') format('woff2'); font-display: swap; }

:root {
  --void: #07080F;
  --ground: #0A0C16;
  --panel: rgba(13, 15, 26, 0.72);
  --bone: #E9E6DA;
  --muted: #8B8FA3;
  --faint: #5A5E72;
  --hair: #232739;
  --gold: #E3C77E;
  --blue: #6FB4FF;
  --blue-bright: #BFE3FF;
  --red: #FF7A5C;
  --red-deep: #E8503A;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Marcellus', 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--void); }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--display);
  min-height: 100vh;
}
.u-tnum { font-variant-numeric: tabular-nums; }

/* ================= THE STAGE ================= */
.stage {
  position: relative;
  height: max(560px, calc(100vh - 48px));
  overflow: hidden;
  background: var(--ground);
}
#battlefield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* cinema: vignette + letterbox breath */
.stage-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,8,15,0.85) 0%, rgba(7,8,15,0) 12%),
    linear-gradient(0deg, rgba(7,8,15,0.9) 0%, rgba(7,8,15,0) 16%),
    radial-gradient(120% 90% at 50% 45%, rgba(7,8,15,0) 55%, rgba(7,8,15,0.55) 100%);
}

/* ---------- HUD ---------- */
.hud {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  pointer-events: none;
  z-index: 3;
}
.hud-top { top: 0; }
.hud-bottom { bottom: 0; flex-direction: column; align-items: stretch; gap: 8px; }

.hud-cluster {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
}
.hud-right { align-items: flex-end; }

.live-marker {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gold); text-transform: uppercase;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: live-blink 1.8s steps(2, start) infinite;
}
.live-marker.down { color: var(--faint); }
.live-marker.down .live-dot { animation: none; background: var(--faint); box-shadow: none; }
@keyframes live-blink { 50% { opacity: .2; } }

/* the price — deliberately small; the battle owns the frame */
.price-line { color: var(--muted); }
.price { font-weight: 500; color: var(--bone); transition: color 400ms ease; }
.price.up { color: var(--blue); }
.price.down { color: var(--red); }
.pair { font-size: 10px; color: var(--faint); }

.back-link {
  pointer-events: auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 4px 0;
  transition: color 180ms ease;
}
.back-link:hover { color: var(--gold); }
.footer-back { min-height: 44px; display: inline-flex; align-items: center; }

.hud-title { text-align: center; pointer-events: none; }
.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 2.4vw, 26px);
  letter-spacing: .5em;
  text-indent: .5em;   /* balance the tracking */
  color: var(--bone);
  text-shadow: 0 0 24px rgba(227,199,126,0.25);
}
.wordmark em {
  font-style: normal;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(227,199,126,0.55);
}
.tagline {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .42em; text-indent: .42em;
  color: var(--faint);
}

.defcon-chip { color: var(--muted); text-transform: uppercase; }
.defcon-chip b { color: var(--gold); font-weight: 500; }

/* the director's slate — which camera is live */
.cam-tag {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--faint); text-transform: uppercase;
  font-size: 9px; letter-spacing: .18em;
}
.cam-tag .rec-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red-deep);
  box-shadow: 0 0 6px var(--red-deep);
  animation: live-blink 1.2s steps(2, start) infinite;
}
.cam-tag.cut { animation: cam-cut 420ms ease; }
@keyframes cam-cut { 0% { color: var(--gold); } 100% { color: var(--faint); } }
@media (prefers-reduced-motion: reduce) { .cam-tag { display: none; } }

.hud-buttons { display: flex; gap: 6px; }
.sound-toggle {
  pointer-events: auto;
  appearance: none; background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: color 180ms ease, border-color 180ms ease;
}
.sound-toggle:hover { color: var(--bone); border-color: var(--faint); }
.sound-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* ---------- bottom chips + ticker ---------- */
.chips {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  pointer-events: auto;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--hair);
  padding: 7px 12px 8px;
  backdrop-filter: blur(2px);
}
.chip label {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--faint);
}
.chip b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--bone); }
.chip i { font-style: normal; }
.chip .blue, .rules .blue { color: var(--blue); }
.chip .red, .rules .red { color: var(--red); }
.chip .vs { color: var(--faint); }

.ticker {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--hair);
  padding-top: 8px;
  overflow: hidden; white-space: nowrap;
}
.ticker-label {
  color: var(--gold); font-size: 9px; letter-spacing: .3em;
  flex: 0 0 auto;
}
.ticker-text { text-overflow: ellipsis; overflow: hidden; letter-spacing: .04em; }
.ticker-text.flash { animation: ticker-in 500ms ease; }
@keyframes ticker-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* faction banners on the field edges */
.faction {
  position: absolute; top: 50%; z-index: 2;
  font-family: var(--mono); font-size: 9px; letter-spacing: .34em;
  color: var(--faint);
  pointer-events: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.faction-blue { left: 10px; color: rgba(111,180,255,0.55); transform: translateY(-50%) rotate(180deg); }
.faction-red { right: 10px; color: rgba(255,122,92,0.55); transform: translateY(-50%); }

/* ---------- armistice ---------- */
.armistice {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  background: rgba(232,80,58,0.92);
  color: var(--void);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  padding: 10px 18px;
  max-width: min(92vw, 640px);
  text-align: center;
}

/* ================= BELOW THE FOLD ================= */
.below {
  max-width: 1100px; margin: 0 auto;
  padding: 56px 18px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
}
.below h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.warlog {
  list-style: none; padding: 0;
  max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--hair);
}
.warlog li {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.warlog li time { color: var(--faint); margin-right: 10px; }
.warlog li.blue { color: var(--blue); }
.warlog li.red { color: var(--red); }
.warlog li.whale { color: var(--gold); }
.warlog li.casualty { color: var(--faint); }
.warlog li.casualty::before { content: "✕ "; }

.rules { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.rules li {
  font-family: var(--display);
  font-size: 14.5px; line-height: 1.65;
  color: var(--muted);
  padding: 12px 2px;
  border-bottom: 1px solid var(--hair);
}
.rules b { font-weight: 400; color: var(--bone); }
.rules .u-tnum { font-family: var(--mono); font-size: .88em; color: var(--bone); }
.stats-wide { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.stats-wide .chip { background: transparent; }

/* ---------- footer ---------- */
.colophon {
  max-width: 1100px; margin: 0 auto;
  padding: 8px 18px 36px;
  border-top: 1px solid var(--hair);
}
.legal {
  display: flex; flex-wrap: wrap;
  column-gap: 22px; row-gap: 2px;
  justify-content: center;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 6px;
}
.legal a {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color 180ms ease;
}
.legal a:hover { color: var(--gold); }
.colophon-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}
.field-note { font-family: var(--mono); font-size: 9px; letter-spacing: .24em; color: var(--faint); }
/* the house signature (Law VII). Class name deliberately project-specific:
   generic names like "attribution" get hidden by adblock cosmetic filters. */
.war-sig {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  min-height: 44px;
}
.war-sig::before { content: ""; width: 7px; height: 7px; background: var(--gold); }
.war-sig b { color: var(--bone); font-weight: 500; }
.war-sig:hover, .war-sig:hover b { color: var(--gold); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
  .below { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .stage { height: max(520px, calc(100svh - 32px)); }
  .hud { padding: 10px 12px; }
  .hud-top { flex-wrap: wrap; }
  .hud-title { order: -1; width: 100%; margin-bottom: 4px; }
  .wordmark { font-size: 15px; }
  .faction { display: none; }
  .chips { gap: 6px; }
  .chip { padding: 6px 10px 7px; }
  .chip b { font-size: 12px; }
  .armistice { top: 92px; }
}

/* ================= v6: fronts, forecast, allegiance, charts,
                    chronicle, medals, photo mode ================= */
.fronts { display: flex; gap: 2px; pointer-events: auto; }
.fronts a {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: var(--faint); text-decoration: none;
  padding: 3px 7px; border: 1px solid transparent;
}
.fronts a:hover { color: var(--bone); }
.fronts a.active { color: var(--gold); border-color: var(--hair); }

.forecast { font-size: 11px !important; }
.forecast .up { color: var(--blue); }
.forecast .down { color: var(--red); }

.allegiance {
  margin-top: 20px; padding: 14px 2px;
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.allegiance-ask { font-family: var(--display); font-size: 14px; color: var(--muted); }
.allegiance button {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--hair);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  min-height: 44px; padding: 0 16px;
  transition: border-color 180ms ease, background 180ms ease;
}
.allegiance button.blue { color: var(--blue); }
.allegiance button.red { color: var(--red); }
.allegiance button:hover { border-color: var(--faint); }
.allegiance button.chosen { border-color: currentColor; background: rgba(233,230,218,0.04); }
.allegiance.decided button:not(.chosen) { opacity: 0.3; }
#sideChip b.blue { color: var(--blue); }
#sideChip b.red { color: var(--red); }

.observatory, .chronicle-sec, .medals-sec { grid-column: 1 / -1; }
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.charts figure { margin: 0; border-top: 1px solid var(--hair); padding-top: 8px; }
.charts figcaption {
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.charts canvas { width: 100%; height: 70px; display: block; }
@media (max-width: 780px) { .charts { grid-template-columns: 1fr; } }

.chronicle { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.chronicle li {
  font-family: var(--display); font-size: 14.5px; line-height: 1.7;
  color: var(--muted); padding: 12px 2px;
  border-bottom: 1px solid var(--hair);
  max-width: 900px;
}
.chronicle li time {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--gold); margin-right: 12px;
}
.chronicle .chron-wait { color: var(--faint); font-style: italic; }

.medals { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--hair); padding-top: 16px; }
.medals li {
  border: 1px solid var(--hair);
  padding: 10px 14px; min-width: 150px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--faint);
}
.medals li b { display: block; font-size: 11px; letter-spacing: .2em; color: var(--faint); font-weight: 500; margin-bottom: 3px; }
.medals li.earned { border-color: rgba(227,199,126,0.5); }
.medals li.earned b { color: var(--gold); }
.medals li.earned b::before { content: "★ "; }
.medals li.earned { color: var(--muted); }

.medal-toast {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  z-index: 8;
  background: var(--panel); border: 1px solid rgba(227,199,126,0.6);
  color: var(--gold);
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
  padding: 12px 22px;
  animation: hint-fade 5s ease forwards;
  pointer-events: none;
}

body.photo #battlefield { cursor: grab; }
body.photo.grabbing #battlefield { cursor: grabbing; }

/* v8: spectator play */
.mini-btn {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--hair);
  font-size: 11px; line-height: 1;
  min-width: 30px; min-height: 30px;
  padding: 0 6px; margin-right: 4px;
  transition: border-color 180ms ease;
}
.mini-btn.blue { color: var(--blue); }
.mini-btn.red { color: var(--red); }
.mini-btn:hover { border-color: var(--faint); }
.mini-btn:disabled { opacity: 0.3; cursor: default; }
.predict-chip b { display: inline-flex; align-items: center; }
#predState { font-size: 11px; margin-left: 4px; }
#predState.blue { color: var(--blue); }
#predState.red { color: var(--red); }
#heroChip b { color: var(--gold); }

.flares { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; pointer-events: auto; }
.flares button {
  appearance: none; background: transparent; border: 1px solid transparent;
  font-size: 13px; cursor: pointer; padding: 2px 5px;
  min-width: 30px; min-height: 30px;
  filter: grayscale(0.6); transition: filter 180ms ease, border-color 180ms ease;
}
.flares button:hover { filter: none; border-color: var(--hair); }

.morale-line {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--faint); padding: 8px 2px 0;
}
.morale-line .blue { color: var(--blue); }
.morale-line .red { color: var(--red); }

.doctrine, .daybet {
  padding: 12px 2px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.doctrine button, .daybet button {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--hair); color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  min-height: 44px; padding: 0 14px;
}
.doctrine button:hover, .daybet button:hover { color: var(--bone); border-color: var(--faint); }
.doctrine-state { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--gold); }
.daybet select {
  background: var(--panel); color: var(--bone);
  border: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11px;
  min-height: 44px; padding: 0 10px;
}

/* whale leaderboard */
.whales-sec { grid-column: 1 / -1; }
.whaleboard { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.whaleboard li {
  display: flex; gap: 16px; align-items: baseline;
  font-family: var(--mono); font-size: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--hair);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.whaleboard li .rank { color: var(--gold); width: 22px; }
.whaleboard li .qty { color: var(--bone); font-weight: 500; width: 120px; }
.whaleboard li .side-b { color: var(--blue); }
.whaleboard li .side-r { color: var(--red); }
.whaleboard li time { margin-left: auto; color: var(--faint); }

/* the cold open */
.intro {
  position: fixed; inset: 0; z-index: 60;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: intro-out 1.2s ease 7.6s forwards;
}
.intro .card {
  position: absolute; width: 100%; text-align: center;
  font-family: var(--mono); font-size: clamp(11px, 1.6vw, 15px);
  letter-spacing: .5em; text-indent: .5em; color: var(--muted);
  opacity: 0;
}
.intro .card:nth-child(1) { animation: intro-card 2.1s ease 0.4s forwards; }
.intro .card:nth-child(2) { animation: intro-card 2.1s ease 2.3s forwards; }
.intro .card:nth-child(3) { animation: intro-card 2.1s ease 4.2s forwards; }
.intro .title {
  position: absolute; width: 100%; text-align: center;
  font-family: var(--display); font-size: clamp(34px, 6vw, 72px);
  letter-spacing: .42em; text-indent: .42em; color: var(--bone);
  text-shadow: 0 0 60px rgba(227,199,126,0.4);
  opacity: 0;
  animation: intro-title 2.4s ease 6.1s forwards;
}
.intro .title em { font-style: normal; color: var(--gold); }
.intro .skip {
  position: absolute; bottom: 26px; width: 100%; text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .3em;
  color: var(--faint);
}
@keyframes intro-card { 0% { opacity: 0; transform: translateY(6px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes intro-title { 0% { opacity: 0; letter-spacing: .6em; } 60%, 100% { opacity: 1; letter-spacing: .42em; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* ================= CINEMATIC MODE (F) ================= */
body.cinema .hud-left, body.cinema .hud-bottom, body.cinema .defcon-chip,
body.cinema .hud-buttons, body.cinema .faction, body.cinema .below,
body.cinema .colophon { display: none !important; }
body.cinema .hud-title { opacity: 0.35; }
body.cinema .stage { height: 100vh; }
body.cinema .stage::before, body.cinema .stage::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7vh;
  background: #000; z-index: 5; pointer-events: none;
}
body.cinema .stage::before { top: 0; }
body.cinema .stage::after { bottom: 0; }
body.cinema .cam-tag { position: absolute; top: 8.5vh; right: 18px; z-index: 6; }
.film-hint {
  position: fixed; bottom: 9vh; left: 50%; transform: translateX(-50%);
  z-index: 7;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  color: var(--faint);
  animation: hint-fade 4s ease forwards;
  pointer-events: none;
}
@keyframes hint-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ================= EMBED MODE (?embed=1) ================= */
body.embed .hud-left .back-link, body.embed .hud-bottom .chips,
body.embed .defcon-chip, body.embed .hud-buttons, body.embed .faction,
body.embed .below, body.embed .colophon { display: none !important; }
body.embed .stage { height: 100vh; }
body.embed .wordmark { font-size: 14px; }
body.embed .tagline { display: none; }
.embed-link {
  position: absolute; right: 12px; bottom: 10px; z-index: 6;
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--gold); text-decoration: none;
  background: var(--panel); border: 1px solid var(--hair);
  padding: 6px 10px;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}