/* THE BATTLE FOR BLOCKSPACE — dark CRT-war aesthetic. Committed single dark look (a war terminal). Palette per SPEC. All motion is gated behind .reduced-motion (set on by main.js) so the shake/ scanline/flash effects can be disabled for prefers-reduced-motion. */ :root { --bg: #0b0e14; --bg-2: #11151f; --bg-3: #171c28; --line: #263042; --orange: #ff6b35; --magenta: #ff3df5; --gold: #f7b32b; --steel: #9fb4c7; --ink: #e6edf3; --ink-dim: #8595a8; --green: #3ddc84; --red: #ff4d4d; --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Consolas", "DejaVu Sans Mono", monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Subtle CRT scanline wash over the whole page. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.14) 3px ); mix-blend-mode: multiply; opacity: 0.5; } body.reduced-motion::after { display: none; } a { color: var(--gold); } a:hover { color: var(--orange); } h1, h2, h3 { margin: 0; letter-spacing: 0.04em; } /* ---------- header ---------- */ .site-header { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titles controls" "status status"; gap: 6px 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); } .header-titles { grid-area: titles; min-width: 0; } .site-title { font-size: clamp(20px, 3.6vw, 34px); text-transform: uppercase; color: var(--ink); text-shadow: 0 0 8px rgba(255, 107, 53, 0.55), 0 0 2px rgba(255, 61, 245, 0.4); } .subtitle { margin: 4px 0 0; color: var(--magenta); font-size: 13px; min-height: 1.4em; } .header-controls { grid-area: controls; display: flex; align-items: center; gap: 12px; } .status-line { grid-area: status; margin: 0; color: var(--ink-dim); font-size: 12px; } .live-badge { font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 3px; border: 1px solid currentColor; white-space: nowrap; } .live-badge.is-live { color: var(--green); } .live-badge.is-live { animation: pulse 2s ease-in-out infinite; } .live-badge.is-degraded { color: var(--gold); } .live-badge.is-down { color: var(--red); } body.reduced-motion .live-badge { animation: none !important; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ---------- buttons ---------- */ .btn-ghost, .btn-link, .btn-close { font-family: var(--mono); cursor: pointer; background: transparent; color: var(--steel); border: 1px solid var(--line); border-radius: 3px; padding: 5px 10px; font-size: 12px; } .btn-ghost:hover, .btn-close:hover { color: var(--ink); border-color: var(--steel); } .btn-link { border: none; color: var(--gold); text-decoration: underline; padding: 0; } .btn-close { font-size: 15px; line-height: 1; padding: 4px 8px; } /* ---------- doomsday clock ---------- */ .doomsday { padding: 10px 20px; background: var(--bg-3); border-bottom: 1px solid var(--line); } .doomsday-lines { display: flex; flex-direction: column; gap: 2px; } .dc-primary { margin: 0; color: var(--orange); font-weight: 700; font-size: 14px; text-transform: uppercase; } .dc-secondary { margin: 0; color: var(--ink-dim); font-size: 12px; } .dc-signaling { margin: 2px 0 0; color: var(--steel); font-size: 12px; } .doomsday-bar { margin-top: 8px; height: 6px; background: #0a0d13; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .doomsday-bar-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--orange)); transition: width 0.6s ease; } body.reduced-motion .doomsday-bar-fill { transition: none; } /* ---------- scoreboard ---------- */ .scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px 20px; } .tile { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-left-width: 3px; border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tile-num { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; word-break: break-word; } .tile-label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.03em; } .tile-label em { color: var(--steel); font-style: normal; } .tile-spam { border-left-color: var(--magenta); } .tile-spam .tile-num { color: var(--magenta); } .tile-infil { border-left-color: var(--steel); } .tile-infil .tile-num { color: var(--steel); } .tile-observed { border-left-color: var(--orange); } .tile-observed .tile-num { color: var(--orange); } .tile-pure { border-left-color: var(--gold); } .tile-pure .tile-num { color: var(--gold); } .tile-gag { border-left-color: var(--red); } .tile-gag .tile-num { color: var(--red); } /* Per-tile "?" help affordance: pure-CSS tooltip via attr(data-tip), no JS. Keyboard/tap accessible because it's a real