/* GamePilot site. Dark, like a control room; the wordmark is Monoton in the Lantern orange. */
:root {
  --bg:#12141f; --panel:#1a1d2b; --panel2:#20243a; --rule:#2c3148; --text:#e9eaf0; --muted:#9aa1b6;
  --accent:#f2a262; --accent-ink:#17131a; --ok:#6fcf97; --led:#ffbd1a; --red:#e5484d; --blue:#3b82f6;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.55 -apple-system, "Segoe UI", Inter, Roboto, sans-serif; }
a { color:var(--accent); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

header.top { display:flex; justify-content:space-between; align-items:center; padding:18px 0; gap:12px; }
.logo { font-family:"Monoton", sans-serif; font-size:1.55rem; letter-spacing:.06em; color:var(--accent); text-decoration:none;
  text-shadow:0 0 12px rgba(242,162,98,.5), 0 0 28px rgba(242,162,98,.22); white-space:nowrap; }
header.top nav a { margin-left:20px; color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem; }
header.top nav a:hover { color:var(--accent); }

.hero { padding:56px 0 28px; text-align:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-weight:700; color:var(--accent); margin:0 0 14px; }
h1 { font-size:clamp(2.1rem, 5.2vw, 3.4rem); line-height:1.08; margin:0 auto 18px; max-width:860px; letter-spacing:-.02em; }
.hero p.lede { font-size:1.2rem; color:var(--muted); max-width:680px; margin:0 auto 28px; }
.btn { display:inline-block; padding:13px 24px; border-radius:8px; font-weight:700; text-decoration:none; margin:6px; }
.btn.primary { background:var(--accent); color:var(--accent-ink); }
.btn.secondary { border:1px solid var(--rule); color:var(--text); background:var(--panel); }
.sub { color:var(--muted); font-size:.92rem; margin-top:10px; }

h2 { font-size:clamp(1.5rem, 3vw, 2rem); letter-spacing:-.01em; margin:0 0 10px; }
section { padding:56px 0 0; }
section > .intro { color:var(--muted); max-width:700px; margin:0 0 26px; }
.center { text-align:center; }
.center .intro { margin-left:auto; margin-right:auto; }

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:20px; }
.card h3 { margin:0 0 6px; font-size:1.08rem; }
.card p { margin:0; color:var(--muted); font-size:.97rem; }
.card .k { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.split.flip > :first-child { order:2; }
@media (max-width:820px) { .split { grid-template-columns:1fr; } .split.flip > :first-child { order:0; } }
ul.tick { list-style:none; padding:0; margin:14px 0 0; }
ul.tick li { padding-left:1.6em; position:relative; margin:.5em 0; color:var(--muted); }
ul.tick li b { color:var(--text); }
ul.tick li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; }

.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.chip { border:1px solid var(--rule); background:var(--panel); border-radius:999px; padding:6px 14px; font-size:.9rem; color:var(--muted); }

table.compare { width:100%; border-collapse:collapse; font-size:.95rem; }
table.compare th, table.compare td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
table.compare th { color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
table.compare td:first-child { color:var(--muted); width:28%; }
table.compare .us { color:var(--text); font-weight:600; }
.tablewrap { overflow-x:auto; border:1px solid var(--rule); border-radius:8px; background:var(--panel); }

.cta { margin:64px 0 0; padding:40px 24px; text-align:center; background:linear-gradient(180deg, var(--panel2), var(--panel)); border:1px solid var(--rule); border-radius:8px; }
.cta p { color:var(--muted); max-width:560px; margin:0 auto 18px; }

details { border-bottom:1px solid var(--rule); padding:14px 0; }
details summary { cursor:pointer; font-weight:600; }
details p, details ol { color:var(--muted); margin:.6em 0 0; }
.prose { max-width:760px; }
.prose h2 { margin-top:1.6em; font-size:1.3rem; }
.prose p, .prose li { color:var(--muted); }
code { background:var(--panel2); border:1px solid var(--rule); border-radius:4px; padding:1px 6px; font-size:.88em; }

footer { border-top:1px solid var(--rule); margin-top:64px; padding:26px 0 60px; color:var(--muted); font-size:.92rem; text-align:center; }
footer a { color:var(--muted); margin:0 8px; display:inline-block; }

/* ---- Illustrations drawn in CSS (not screenshots) ---- */
.mock { background:#0b0d15; border:1px solid var(--rule); border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(242,162,98,.08); overflow:hidden; }
.mock .bar { display:flex; align-items:center; gap:6px; padding:8px 10px; background:#181b28; border-bottom:1px solid var(--rule); font-size:.68rem; color:var(--muted); letter-spacing:.06em; }
.mock .bar i { width:9px; height:9px; border-radius:50%; background:#3a3f56; display:inline-block; }
.mock .bar span { margin-left:8px; }
.mock .bar em { margin-left:auto; font-style:normal; color:var(--accent); }

/* Control room */
.room { display:grid; grid-template-columns:22% 1fr 22%; gap:1px; background:var(--rule); }
.room .dock { background:#141724; padding:8px; display:flex; flex-direction:column; gap:8px; }
.pnl { background:#1b1f30; border:1px solid var(--rule); border-radius:5px; padding:7px; }
.pnl h4 { margin:0 0 6px; font-size:.56rem; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.keys { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.keys b { display:block; text-align:center; font-size:.6rem; padding:6px 2px; border-radius:4px; background:#2a2f47; color:#dfe2ee; font-weight:700; white-space:nowrap; overflow:hidden; }
.keys b.o { background:var(--accent); color:var(--accent-ink); }
.keys b.r { background:var(--red); color:#fff; }
.keys b.b { background:var(--blue); color:#fff; }
.keys b.g { background:#1f8a4c; color:#fff; }
.bigclock { font:800 1.5rem/1 ui-monospace, Menlo, monospace; color:var(--led); text-align:center; padding:4px 0 6px; }
.venue { position:relative; background:linear-gradient(180deg, #0c0f1a 0 30%, #1b2233 30% 52%, #232a3d 52% 64%, #1f6b33 64% 100%); aspect-ratio:16/10; }
.venue::after { content:""; position:absolute; left:0; right:0; top:64%; bottom:0;
  background:repeating-linear-gradient(90deg, transparent 0 8.2%, rgba(255,255,255,.35) 8.2% 8.5%); }
.scr { position:absolute; background:#05060a; border:1px solid rgba(255,255,255,.4); overflow:hidden; z-index:1; }
.scr small { position:absolute; left:3px; top:-15px; font-size:.5rem; color:#cfd3e0; background:rgba(0,0,0,.7); padding:1px 5px; border-radius:8px; white-space:nowrap; }
.scr.main { left:27%; top:9%; width:46%; height:34%; overflow:visible; }
.scr.ez1 { left:3%; top:20%; width:14%; height:15%; overflow:visible; }
.scr.ez2 { right:3%; top:20%; width:14%; height:15%; overflow:visible; }
.scr.rib { left:0; right:0; top:55%; height:3.2%; border-left:0; border-right:0; }
.scr.rib div { white-space:nowrap; font:800 .5rem/1.5 -apple-system, sans-serif; color:var(--led); letter-spacing:.12em; animation:crawl 16s linear infinite; }
@keyframes crawl { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .scr.rib div { animation:none; } }
.spon { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font:800 .55rem/1.1 -apple-system, sans-serif; color:#fff; text-align:center; background:linear-gradient(135deg, #1d4ed8, #0ea5e9); overflow:hidden; }
.spon.two { background:linear-gradient(135deg, #b91c1c, #f97316); }

/* Scoreboard */
.board { width:100%; height:100%; background:#07080d; display:grid; grid-template-columns:1fr auto 1fr; gap:4%; align-items:center; padding:5% 6%; overflow:hidden; }
.board .team { text-align:center; }
.board .team span { display:block; font:800 .62em/1.2 -apple-system, sans-serif; letter-spacing:.06em; padding:3px 0; border-radius:3px; color:#fff; }
.board .team b { display:block; font:800 2.6em/1.05 ui-monospace, Menlo, monospace; color:var(--led); }
.board .mid { text-align:center; }
.board .mid i { display:block; font:700 .55em/1 -apple-system, sans-serif; color:#c9cddb; font-style:normal; letter-spacing:.1em; }
.board .mid b { display:block; font:800 1.5em/1.2 ui-monospace, Menlo, monospace; color:#fff; }
.board.lg { font-size:clamp(11px, 2.2vw, 22px); aspect-ratio:16/9; border-radius:6px; }
.scr.main .board { font-size:clamp(5px, 1.05vw, 11px); }

/* Celebration and overlay examples */
.burst { aspect-ratio:16/9; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; position:relative;
  background:radial-gradient(circle at 50% 50%, #c1272d 0, #5b0f14 70%, #2a070a 100%); }
.burst::before { content:""; position:absolute; inset:-60%; background:repeating-conic-gradient(rgba(255,255,255,.07) 0 8deg, transparent 8deg 30deg); animation:spin 40s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .burst::before { animation:none; } }
.burst b { position:relative; font:900 clamp(1.8rem, 5vw, 3.2rem)/1 "Arial Narrow", "Helvetica Neue", sans-serif; color:#fff; letter-spacing:.02em; text-shadow:0 4px 14px rgba(0,0,0,.6); }
.burst span { position:relative; margin-top:10px; font:800 1rem/1 -apple-system, sans-serif; color:var(--led); letter-spacing:.1em; }
.call { margin-top:12px; display:flex; align-items:center; gap:14px; background:#1d4ed8; border-top:3px solid rgba(255,255,255,.85); border-radius:0 0 6px 6px; padding:10px 16px; color:#fff; font-weight:800; }
.call .n { font:800 1.5rem/1 ui-monospace, Menlo, monospace; }
.call .d { margin-left:auto; color:var(--led); white-space:nowrap; }
.note { font-size:.82rem; color:var(--muted); margin-top:10px; }

@media (max-width:560px) {
  header.top { flex-direction:column; gap:8px; padding:14px 0 6px; }
  header.top nav a { margin:0 8px; font-size:.88rem; }
  .logo { font-size:1.3rem; }
  .room { grid-template-columns:1fr; }
  .room .dock { display:none; }
}
footer p a { margin:0; }