/* The Quarter — retro CRT design system (from the homepage design handoff).
   Pixel headings (Press Start 2P), terminal body (VT323), neon on near-black. */

:root {
  --bg: #07070f; --panel: #0b0b18; --panel2: #0d0d1f;
  --line: #1c1c33; --line2: #12122a;
  --text: #d8d8e8; --body: #a8a8c4; --dim: #6a6a8a; --faint: #4a4a66; --ghost: #33334d;
  --green: #3dff7a; --amber: #ffb300; --pink: #ff3d9e; --cyan: #29d9ff; --red: #ff3d3d;
  --pixel: 'Press Start 2P', monospace;
  --term: 'VT323', monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: var(--term);
  font-size: 21px; line-height: 1.45; min-height: 100vh; overflow-x: hidden;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--amber); }
::selection { background: var(--pink); color: var(--bg); }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes flicker { 0%, 100% { opacity: 0.13; } 92% { opacity: 0.13; } 93% { opacity: 0.22; }
                     94% { opacity: 0.10; } 96% { opacity: 0.18; } }
@keyframes glowpulse { 0%, 100% { box-shadow: 0 0 24px rgba(255,179,0,0.5); }
                       50% { box-shadow: 0 0 8px rgba(255,179,0,0.2); } }

/* CRT overlays */
.scanlines { position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
              rgba(0,0,0,0.55) 2px, rgba(0,0,0,0.55) 3px);
  opacity: 0.13; animation: flicker 6s linear infinite; }
.vignette { position: fixed; inset: 0; z-index: 91; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%); }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 32px; border-bottom: 3px solid var(--line); position: relative; z-index: 10;
  flex-wrap: wrap; }
.nav .brand { display: flex; align-items: center; gap: 14px; color: var(--green); }
.nav .brand span { font-family: var(--pixel); font-size: 13px;
  text-shadow: 0 0 12px rgba(61,255,122,0.6); }
.nav .links { display: flex; align-items: center; gap: 28px; font-size: 21px; flex-wrap: wrap; }
.nav .links a { color: var(--text); }
.nav .links a:hover, .nav .links a.here { color: var(--amber); }
.insert-coin { font-family: var(--pixel); font-size: 10px; color: var(--amber);
  animation: blink 1.2s step-end infinite; }

/* Layout */
.max { max-width: 1160px; margin: 0 auto; }
.section { position: relative; z-index: 5; padding: 88px 32px; }
.section.band { background: var(--panel); border-top: 3px solid var(--line);
  border-bottom: 3px solid var(--line); }

/* Type */
.pixel { font-family: var(--pixel); }
h1.pixel-title { font-family: var(--pixel); font-size: 64px; line-height: 1.2;
  color: #f2f2ff; text-shadow: 4px 4px 0 var(--pink), -4px -4px 0 var(--cyan),
  0 0 40px rgba(61,255,122,0.35); }
h2.px { font-family: var(--pixel); font-size: 30px; line-height: 1.5; color: #f2f2ff; }
.kicker { font-size: 21px; letter-spacing: 3px; }
.kicker.pink { color: var(--pink); } .kicker.cyan { color: var(--cyan); }
.kicker.dim { color: var(--dim); }
.badge { display: inline-block; border: 2px solid var(--amber); color: var(--amber);
  font-size: 20px; letter-spacing: 3px; padding: 4px 16px; }
.lede { font-size: 24px; line-height: 1.45; color: var(--body); }
.hint { color: var(--dim); }

/* Buttons */
.btn { display: inline-block; font-family: var(--pixel); font-size: 13px;
  padding: 18px 28px; background: var(--green); color: var(--bg);
  border: 4px solid var(--green); box-shadow: 6px 6px 0 #14662f; }
.btn:hover { background: var(--amber); border-color: var(--amber);
  box-shadow: 6px 6px 0 #6b4a00; color: var(--bg); }
.btn.ghost { background: transparent; color: var(--green); }
.btn.ghost:hover { background: transparent; color: var(--amber); }
.press-start { font-family: var(--pixel); font-size: 11px; color: var(--faint);
  animation: blink 1.6s step-end infinite; }

/* Panels & cards */
.panel { border: 3px solid var(--line); background: var(--panel); }
.panel.deep { background: var(--bg); }
.feature { border: 3px solid var(--line); padding: 18px 20px; }
.feature .fh { font-family: var(--pixel); font-size: 11px; color: var(--green);
  margin-bottom: 10px; }
.feature div:last-child { font-size: 21px; line-height: 1.35; color: var(--body); }
a.entry-card { display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  border: 3px solid var(--line); background: var(--panel); padding: 28px; color: inherit; }
a.entry-card:hover { border-color: var(--green); color: inherit; }
.chip { border: 2px solid var(--line); padding: 6px 14px; color: var(--dim); font-size: 20px; }
.chip.star { border-color: var(--amber); color: var(--amber); }

/* Live world */
.live-dot { width: 12px; height: 12px; background: var(--red); display: inline-block;
  animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 0 12px var(--red); }
.frontier-num { font-family: var(--pixel); font-size: 88px; color: var(--amber);
  text-shadow: 0 0 32px rgba(255,179,0,0.5); line-height: 1; }
.seg-track { display: flex; gap: 4px; border: 3px solid var(--line); padding: 6px;
  background: var(--bg); }
.seg { flex: 1; height: 30px; background: var(--line2); }
.seg.on { background: var(--green); box-shadow: 0 0 8px rgba(61,255,122,0.4); }
.seg.edge { background: var(--amber); box-shadow: 0 0 14px rgba(255,179,0,0.8); }
.stat-num { font-family: var(--pixel); font-size: 30px; color: var(--green); }
.stat-label { font-size: 21px; color: var(--dim); }

/* Ledger */
.ledger { display: flex; flex-direction: column; gap: 14px; }
.ledger .entry { display: flex; gap: 12px; font-size: 21px; line-height: 1.35;
  border-left: 3px solid var(--line); padding-left: 12px; }
.ledger .entry .t { color: var(--faint); white-space: nowrap; }
.ledger .entry .x { color: var(--body); }
.ledger .entry.notable { border-left-color: var(--cyan); }
.ledger .entry.proclamation { border-left-color: var(--red); }
.ledger .entry.proclamation .x { color: #ffb9a8; }
.shot img { max-width: 100%; border: 3px solid var(--line); margin-top: 8px; }

/* Ticker */
.ticker-band { border-top: 3px solid var(--line); overflow: hidden; background: var(--bg);
  padding: 10px 0; white-space: nowrap; }
.ticker-run { display: inline-flex; gap: 64px; animation: ticker 36s linear infinite;
  font-size: 21px; color: var(--dim); padding-right: 64px; }

/* Understair cutaway */
.cutaway { border: 3px solid var(--line); background: var(--panel); }
.skyline { position: relative; height: 110px; background: var(--panel2);
  border-bottom: 4px solid #2a1a3e; display: flex; align-items: flex-end; gap: 6px;
  padding: 0 18px; overflow: hidden; }
.sky-sign { position: absolute; top: 10px; font-family: var(--pixel); font-size: 7px;
  color: var(--amber); background: var(--bg); border: 2px solid var(--amber);
  padding: 4px 5px; animation: glowpulse 2.4s ease-in-out infinite; }
.lv-row { display: flex; align-items: center; gap: 14px; padding: 11px 18px;
  border-bottom: 2px solid var(--line2); background: var(--panel2); }
.lv-row .n { font-family: var(--pixel); font-size: 10px; width: 62px; color: #2e7a4a; }
.lv-row .nm { font-size: 21px; flex: 1; color: #557a66; }
.lv-row .tg { font-size: 18px; letter-spacing: 1px; color: #2e7a4a; }
.lv-row.frontier { background: #1a1405; }
.lv-row.frontier .n, .lv-row.frontier .tg { color: var(--amber); }
.lv-row.frontier .nm { color: #ffd873; }
.lv-row.unlit { background: #08080f; }
.lv-row.unlit .n, .lv-row.unlit .nm, .lv-row.unlit .tg { color: var(--ghost); }
.unlit-tail { padding: 20px 18px 26px; text-align: center; color: var(--ghost);
  font-size: 20px; letter-spacing: 6px;
  background: linear-gradient(180deg, #0a0a16, #07070f); }

/* Tone box */
.tone-box { display: flex; align-items: center; gap: 18px; border: 3px solid var(--line);
  background: var(--panel); padding: 16px 20px; font-size: 21px; line-height: 1.4;
  color: var(--dim); }
.tone-box b { color: var(--text); font-weight: normal; }

/* Prose (devlog posts) */
.prose { max-width: 760px; margin: 0 auto; font-size: 23px; line-height: 1.5;
  color: var(--body); }
.prose p { margin-bottom: 1.1em; }
.prose ul { margin: 0 0 1.1em 1.4em; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--amber); font-weight: normal; }
.prose em { color: var(--green); font-style: normal; }
.prose h2 { font-family: var(--pixel); font-size: 16px; color: var(--green);
  margin: 2em 0 .8em; line-height: 1.6; }
blockquote { border-left: 3px solid var(--pink); padding: .6em 1em; margin: 1.4em 0;
  background: var(--panel); color: #ffd9c9; }

footer.site { position: relative; z-index: 5; border-top: 3px solid var(--line);
  padding: 36px 32px; display: flex; align-items: center; justify-content: center;
  gap: 18px; font-size: 20px; color: var(--dim); flex-wrap: wrap; text-align: center; }
footer.site .sep { color: var(--ghost); }
.game-over { font-family: var(--pixel); font-size: 9px; color: var(--faint);
  animation: blink 1.6s step-end infinite; }

/* Responsive */
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.grid-cutaway { display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: start; }
.grid-visit { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: center; }
.grid-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 960px) {
  .grid-2, .grid-cutaway, .grid-visit { grid-template-columns: 1fr; gap: 40px; }
  h1.pixel-title { font-size: clamp(34px, 9vw, 64px); }
  .frontier-num { font-size: clamp(48px, 12vw, 88px); }
  h2.px { font-size: clamp(20px, 5vw, 30px); }
  .section { padding: 56px 20px; }
  .nav { padding: 14px 20px; }
  a.entry-card { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .grid-features { grid-template-columns: 1fr; }
  .nav .links { gap: 16px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .scanlines, .insert-coin, .press-start, .live-dot, .game-over, .sky-sign { animation: none; }
  .ticker-run { animation: none; }
  html { scroll-behavior: auto; }
}