/* ============================================================
   FTR MEMES — Flying Tesla Roadster Memes
   Theme: dark navy showroom, silver/chrome lettering, red
   taillight accent, circuit-board linework (matches the banner
   and logo artwork). Colours and fonts live in :root.
   ============================================================ */
:root{
  --bg:#0c0f15; --bg2:#10131a; --panel:#151922; --panel2:#1b2029; --floor:#262a33;
  --ink:#f2f4f7; --muted:#9aa3b2; --dim:#5f6774;
  --silver:#d4d8df; --silver-hi:#ffffff; --silver-dim:#7f8793;
  --red:#ff2a2a; --red-hi:#ff6b6b; --red-glow:rgba(255,42,42,.55);
  --green:#4ade80; --cyan:#9fdcff;
  --line:rgba(255,255,255,.14); --outline:#06080c;
  --chrome:linear-gradient(180deg,#ffffff 0%,#eef0f3 36%,#a3aab4 50%,#f3f5f8 60%,#c3c8d0 100%);
  --display:'Lilita One',system-ui,sans-serif;
  --body:'Barlow Condensed',system-ui,sans-serif;
  --pixel:'Press Start 2P',monospace;
  --mono:'Share Tech Mono',ui-monospace,monospace;
  --pad:clamp(20px,6vw,80px);
  --circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M10 40h60l20 20h50'/%3E%3Ccircle cx='10' cy='40' r='3'/%3E%3Ccircle cx='140' cy='60' r='3'/%3E%3Cpath d='M160 120v40h-40l-20 20H40'/%3E%3Crect x='156' y='110' width='8' height='8'/%3E%3Ccircle cx='40' cy='180' r='3'/%3E%3Cpath d='M190 10v70'/%3E%3Crect x='186' y='80' width='8' height='8'/%3E%3Cpath d='M70 130h30v-30h30'/%3E%3Ccircle cx='130' cy='100' r='3'/%3E%3Cpath d='M20 90v50'/%3E%3Crect x='16' y='140' width='8' height='8'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:500;font-size:18px;line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.gated{overflow:hidden}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto}
.wrap.narrow{max-width:760px}

/* ---------- showroom backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 45% at 50% 105%,rgba(120,126,140,.28),transparent 70%),
    linear-gradient(180deg,#0c0f15 0%,#0e1118 55%,#171b23 100%)}
.backdrop::after{content:'';position:absolute;inset:0;background:var(--circuit) 0 0/220px 220px;opacity:.06;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
main,.hero,.footer,.ticker,.race{position:relative;z-index:1}

/* ---------- type ---------- */
.chrome,.title{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.22)) drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);margin:0 0 10px}
.eyebrow.red{color:var(--red)}
.title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0 0 .35em;font-size:clamp(40px,7vw,88px)}
.lead{font-size:clamp(18px,2vw,22px);color:#d3d7de;max-width:760px;margin:0 0 36px}
.lead.upper{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.more{display:inline-block;margin-top:28px;font-family:var(--pixel);font-size:10px;color:var(--silver);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.more:hover{color:var(--red);border-color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--pixel);font-size:10px;letter-spacing:.04em;line-height:1;padding:14px 20px;border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;background:rgba(12,15,21,.7);cursor:pointer;transition:.2s;text-transform:uppercase;box-shadow:0 0 0 1px var(--outline)}
.btn:hover{border-color:#fff;background:#fff;color:#0c0f15;transform:translateY(-2px)}
.btn-gold{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 0 1px var(--outline),0 0 18px var(--red-glow)}
.btn-gold:hover{background:var(--red-hi);border-color:var(--red-hi);color:#fff}
.btn-dark{background:#0c0f15;color:#fff;border-color:#0c0f15}
.btn-dark:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-sm{padding:10px 14px;font-size:9px}

/* ---------- taillight bar (the car's full-width light) ---------- */
.taillight{height:4px;width:min(100%,900px);margin:10px auto 28px;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--red) 12%,#ff6a6a 50%,var(--red) 88%,transparent);
  box-shadow:0 0 18px 4px rgba(255,42,42,.45),0 0 60px 12px rgba(255,42,42,.18);animation:tailPulse 3.2s ease-in-out infinite}
@keyframes tailPulse{50%{box-shadow:0 0 26px 6px rgba(255,42,42,.6),0 0 80px 16px rgba(255,42,42,.25)}}

/* ---------- press start gate ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 55% at 50% 62%,#1b1f28,#0b0e14 72%);transition:opacity .9s ease,visibility .9s}
.gate::before{content:'';position:absolute;inset:0;background:var(--circuit) 0 0/220px 220px;opacity:.07;pointer-events:none}
.gate.out{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{position:relative;text-align:center;padding:20px}
.gate-logo{display:flex;flex-direction:column;align-items:center;line-height:1}
.gate-logo img{display:block;width:min(62vw,340px);height:auto;margin:0 auto -6%;
  -webkit-mask-image:radial-gradient(62% 62% at 50% 52%,#000 50%,transparent 100%);mask-image:radial-gradient(62% 62% at 50% 52%,#000 50%,transparent 100%)}
.gate-word{font-family:var(--display);font-size:clamp(46px,9vw,100px);letter-spacing:.01em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.3)) drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.gate-sub{font-family:var(--pixel);font-size:clamp(8px,1.2vw,11px);color:var(--muted);letter-spacing:.2em;margin:18px 0 36px}
.press-start{font-family:var(--pixel);font-size:clamp(14px,2.4vw,24px);letter-spacing:.12em;color:var(--red);background:none;border:0;cursor:pointer;animation:blink 1.1s steps(2) infinite;text-shadow:0 0 18px var(--red-glow)}
.press-start:hover{animation:none;color:#fff}
.sound-toggle{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--pixel);font-size:9px;color:var(--muted);background:none;border:0;cursor:pointer;letter-spacing:.1em}
.sound-toggle:hover{color:#fff}
/* only the backdrop shows behind the gate; the page fades in once you press start */
.hero,.ticker,main,.footer{transition:opacity .9s ease}
body.gated .hero,body.gated .ticker,body.gated main,body.gated .footer{opacity:0}

/* ---------- fixed HUD ---------- */
.fade-top,.fade-bottom{position:fixed;left:0;right:0;height:8vh;z-index:30;pointer-events:none}
.fade-top{top:0;background:linear-gradient(#0c0f15,transparent)}
.fade-bottom{bottom:0;background:linear-gradient(transparent,#0c0f15)}
.hud{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px clamp(14px,3vw,28px);pointer-events:none;transition:opacity .6s}
.hud>*{pointer-events:auto}
body.gated .hud{opacity:0}
.hud-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hud-pill{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;color:var(--silver);border:1px solid rgba(212,216,223,.45);background:rgba(12,15,21,.75);backdrop-filter:blur(8px);padding:10px 13px;text-decoration:none;cursor:pointer;transition:.2s;line-height:1;white-space:nowrap;box-shadow:0 0 0 1px var(--outline)}
.hud-pill:hover{background:var(--red);border-color:var(--red);color:#fff}
.hud-pill .ca-label{color:var(--red);margin-right:8px}
.hud-pill:hover .ca-label{color:#fff}

/* ---------- flying roadster cameo ---------- */
.cameo{position:fixed;z-index:2;right:-300px;bottom:-120px;width:240px;pointer-events:none;opacity:0;filter:drop-shadow(0 0 18px rgba(255,90,60,.5))}
.cameo.fly{animation:fly 12s linear forwards}
.cameo .flame{transform-origin:206px 42px;animation:flame .1s infinite alternate}
@keyframes fly{0%{opacity:0;transform:translate(0,0) rotate(-24deg)}6%{opacity:1}94%{opacity:1}100%{opacity:0;transform:translate(-135vw,-95vh) rotate(-24deg)}}
@keyframes flame{from{transform:scaleX(.9)}to{transform:scaleX(1.3)}}

/* ---------- flight deck (the phone) ---------- */
.deck{position:fixed;right:16px;bottom:-14px;z-index:50;width:212px;transform:rotate(-7deg);transform-origin:100% 100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 24px 40px rgba(0,0,0,.8))}
body.gated .deck{transform:translateY(140%) rotate(-7deg)}
.deck-shell{background:linear-gradient(180deg,#1b2029,#0c0f15);border:2px solid #2b313c;border-radius:20px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px var(--outline)}
.deck-top{display:flex;align-items:center;gap:6px;font-family:var(--pixel);font-size:7px;color:var(--silver);padding:4px 2px 8px;cursor:pointer;user-select:none;white-space:nowrap}
.deck-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.2s infinite}
.deck-time{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted)}
.deck-call{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1/1.05;background:#0a0d13}
.deck-call img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.deck-callee{position:absolute;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(transparent,rgba(6,8,12,.94));font-family:var(--pixel);font-size:7px;line-height:1.7}
.deck-callee b{display:block;color:var(--silver);font-size:9px}
.deck-callee span{color:var(--red-hi);animation:blink 1.2s steps(2) infinite}
.deck.answered .deck-callee span,.deck.declined .deck-callee span{animation:none;color:var(--green)}
.deck-btns{display:flex;justify-content:center;gap:14px;padding:10px 0 6px}
.deck-btns button{width:34px;height:34px;border-radius:50%;border:0;color:#fff;font-size:15px;cursor:pointer;display:grid;place-items:center}
.deck-accept{background:#1fbf4a;box-shadow:0 0 14px rgba(31,191,74,.6);animation:ring 1.2s infinite}
.deck-decline{background:#e12b2b;box-shadow:0 0 14px rgba(225,43,43,.5)}
.deck.answered .deck-accept,.deck.declined .deck-accept{animation:none;opacity:.35;pointer-events:none}
.deck-tele{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:0;padding:8px 2px 2px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px}
.deck-tele dt{color:var(--dim);font-size:9px;letter-spacing:.15em}
.deck-tele dd{margin:0;color:var(--silver)}
.deck.min .deck-call,.deck.min .deck-btns,.deck.min .deck-tele{display:none}
.deck.min{bottom:-4px}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px var(--pad) 90px;overflow:hidden}
.hero-floor{position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(110,116,130,.22) 60%,rgba(130,136,150,.45))}
.hero-floor::after{content:'';position:absolute;inset:0;background:var(--circuit) 0 0/220px 220px;opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
.hero-inner{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto}
.hero-eyebrow{font-family:var(--pixel);font-size:clamp(9px,1.3vw,13px);color:var(--silver);letter-spacing:.15em;margin:0 0 8px}
.hero-title{margin:0;line-height:0}
.hero-banner{display:block;width:100%;height:auto;margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#000 68%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#000 68%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
body.started .hero-banner{animation:knockIn 1.1s .15s cubic-bezier(.2,.8,.2,1) both}
body.started .taillight{animation:knockIn .9s .4s cubic-bezier(.2,.8,.2,1) both,tailPulse 3.2s 1.3s ease-in-out infinite}
.hero-tag{font-size:clamp(18px,2.2vw,26px);color:#d3d7de;max-width:640px;margin:0 auto 28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--pixel);font-size:9px;color:var(--muted);text-decoration:none;animation:bob 1.6s ease-in-out infinite;z-index:1;white-space:nowrap}
@keyframes bob{50%{transform:translate(-50%,6px)}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-top:2px solid var(--red);border-bottom:2px solid var(--red);background:rgba(8,10,15,.9);font-family:var(--pixel);font-size:10px;color:var(--silver);padding:12px 0;box-shadow:0 0 24px rgba(255,42,42,.25)}
.ticker-track{display:flex;width:max-content;animation:ticker 45s linear infinite;white-space:nowrap}
.ticker-track span{padding:0 24px}
.ticker-track span::after{content:'✦';margin-left:48px;color:var(--red)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- generic section + cel-shaded card ---------- */
.section{position:relative;padding:clamp(72px,10vw,120px) var(--pad);background:rgba(12,15,21,.55)}
.card{border:1px solid rgba(255,255,255,.18);background:var(--panel);box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.35)}

/* ---------- live from orbit ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:28px 0}
.stat{border:1px solid rgba(255,255,255,.16);background:var(--panel);padding:18px 16px;box-shadow:0 0 0 1px var(--outline),6px 6px 0 rgba(0,0,0,.35)}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,34px);letter-spacing:.02em;min-height:1.2em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b.sync{font-family:var(--pixel);font-size:10px;background:none;-webkit-text-fill-color:var(--red-hi);color:var(--red-hi);animation:pulse 1.4s ease-in-out infinite;padding-top:.5em}
.stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted)}
.stats-note{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--dim);margin:-16px 0 24px;text-transform:uppercase}
.stats-note:empty{display:none}
.tabs{display:flex;gap:8px;margin:0 0 18px}
.tab{font-family:var(--pixel);font-size:9px;color:var(--muted);background:none;border:1px solid var(--line);padding:10px 14px;cursor:pointer;letter-spacing:.05em;transition:.2s}
.tab:hover{color:#fff}
.tab.is-on{color:#fff;background:var(--red);border-color:var(--red);box-shadow:0 0 14px var(--red-glow)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{display:block;position:relative;border:1px solid rgba(255,255,255,.18);background:var(--panel);color:#fff;text-decoration:none;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.35)}
.post:hover{transform:translate(-2px,-4px);border-color:var(--red);box-shadow:0 0 0 1px var(--outline),10px 12px 0 rgba(0,0,0,.4),0 0 24px rgba(255,42,42,.25)}
.post-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0d13;border-bottom:2px solid var(--red)}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.post:hover img{transform:scale(1.05)}
.post-badge{position:absolute;top:10px;left:10px;font-family:var(--pixel);font-size:8px;background:var(--red);color:#fff;padding:6px 8px;box-shadow:0 0 0 1px var(--outline)}
.post-badge.photo{background:#2b6cff}
.post-badge.gif{background:#8b3dff}
.post-badge.none{background:var(--silver);color:#0c0f15}
.post-views{position:absolute;top:10px;right:10px;font-family:var(--pixel);font-size:8px;background:rgba(12,15,21,.85);color:var(--silver);padding:6px 8px;border:1px solid rgba(212,216,223,.4)}
.post-noimg{display:flex;align-items:center;justify-content:center;height:100%;padding:22px 26px;text-align:center;font-family:var(--display);font-size:clamp(16px,1.6vw,21px);line-height:1.3;color:#fff;background:radial-gradient(80% 80% at 50% 100%,rgba(255,42,42,.16),transparent 70%),var(--panel)}
.post-body{padding:14px 16px 16px}
.post-author{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.03em;min-width:0}
.post-author img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#222;flex:none;border:1px solid rgba(255,255,255,.3)}
.post-author b{color:var(--silver);font-weight:400;flex:none}
.post-author span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-body p{margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;gap:16px;font-family:var(--mono);font-size:12px;color:var(--silver);letter-spacing:.05em}
.post-meta span:last-child{margin-left:auto;color:var(--dim)}
.posts-foot{text-align:center;margin-top:24px}
.posts-empty{grid-column:1/-1;text-align:center;font-family:var(--pixel);font-size:10px;color:var(--red-hi);animation:pulse 1.4s infinite;padding:40px 0}

/* ---------- lineup ---------- */
.lineup{position:relative;display:grid;grid-template-columns:64px 1fr;gap:0 10px;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.35);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 44px),linear-gradient(180deg,#1b2029,#0e1118 70%,#262a33);padding:36px 20px 0;overflow:hidden}
.lineup::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,rgba(255,42,42,.14),transparent 70%);pointer-events:none}
.marks{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;height:300px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.slot{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.slot-rank{font-family:var(--pixel);font-size:8px;color:var(--muted);letter-spacing:.05em}
.slot-rank b{display:block;color:var(--silver);font-size:14px;margin-top:6px}
.slot .stars{color:var(--red);letter-spacing:.2em;font-size:12px}
.astro{width:110px;height:220px;color:rgba(255,255,255,.5);transition:color .3s}
.slot.is-top .astro{width:130px;height:260px;color:var(--silver)}
.slot:hover .astro{color:var(--red-hi)}
.slot-name{font-family:var(--pixel);font-size:9px;color:#fff;background:rgba(12,15,21,.8);border:1px solid var(--line);padding:8px 10px}
.slot-handle{font-family:var(--mono);color:var(--dim);padding-bottom:20px}

/* ---------- exchange ---------- */
.exchange{background:linear-gradient(180deg,rgba(10,13,19,.8),rgba(10,13,19,.95))}
.ex-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.ex-title{font-size:clamp(44px,6vw,76px);letter-spacing:.02em}
.ex-title sup{font-size:.3em;vertical-align:top}
.ex-sub{font-family:var(--pixel);font-size:10px;color:var(--red-hi);margin:6px 0 0}
.ex-panel{border:1px solid rgba(255,255,255,.2);background:#0f1219;box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.35);overflow-x:auto}
.ex-panel-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--silver);padding:14px 18px;border-bottom:2px solid var(--red);background:linear-gradient(90deg,rgba(255,42,42,.14),transparent)}
.ex-table{width:100%;border-collapse:collapse;font-size:17px}
.ex-table th{text-align:left;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--muted);padding:12px 18px;border-bottom:1px solid var(--line)}
.ex-table td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.ex-table tbody tr:hover td{background:rgba(255,255,255,.03)}
.ex-rank{font-family:var(--pixel);font-size:9px;color:var(--red-hi);margin-right:14px}
.ex-name{font-weight:700;font-size:20px;margin-right:10px}
.ex-sym{font-family:var(--mono);color:var(--muted);font-size:13px}
.up{color:var(--green)} .down{color:var(--red)}
.ex-trade{font-family:var(--pixel);font-size:9px;color:#0c0f15;background:var(--silver);padding:8px 12px;text-decoration:none;white-space:nowrap}
.ex-trade:hover{background:#fff}
.ex-empty td{text-align:center;color:var(--red-hi);font-family:var(--pixel);font-size:10px;animation:pulse 1.4s infinite;padding:40px}

/* ---------- launch race ---------- */
.race{border-top:2px solid var(--red);border-bottom:2px solid var(--red);background:linear-gradient(90deg,rgba(255,42,42,.16),rgba(8,10,15,.9) 60%);padding:36px var(--pad);box-shadow:0 0 30px rgba(255,42,42,.15)}
.race-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.race-title{font-family:var(--display);font-weight:400;font-size:clamp(17px,2vw,25px);line-height:1.3;margin:0;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.live{display:inline-block;margin-left:12px;color:var(--red);animation:blink 1s steps(2) infinite}
.race-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.race-meta b{color:#fff}
.bar{height:14px;border:1px solid rgba(255,255,255,.3);background:rgba(6,8,12,.7);padding:2px}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--red),#ff8a8a);box-shadow:0 0 14px rgba(255,42,42,.6);transition:width 1.2s ease}
.race-pct{font-family:var(--pixel);font-size:12px;color:var(--silver);margin:10px 0 16px}
.race-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- billboard ---------- */
.ad{padding-top:40px;padding-bottom:40px}
.ad-label{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim);margin:0 0 8px;text-align:right}
.billboard{position:relative;aspect-ratio:21/8;min-height:260px;background:#000 url(img/side.jpg) center/cover;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 0 8px var(--panel),0 0 0 9px rgba(255,255,255,.12),10px 18px 0 rgba(0,0,0,.4),0 40px 80px rgba(0,0,0,.7);overflow:hidden}
.billboard::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,12,.88),rgba(6,8,12,.25) 55%,transparent)}
.billboard-text{position:absolute;left:clamp(18px,4vw,48px);bottom:clamp(18px,4vw,40px);z-index:1}
.billboard-text h3{font-family:var(--display);font-weight:400;font-size:clamp(36px,6vw,80px);margin:0;line-height:.95;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,255,255,.3)) drop-shadow(0 3px 0 rgba(0,0,0,.6))}
.billboard-text p:last-child{font-family:var(--pixel);font-size:clamp(9px,1.2vw,13px);color:#fff;margin:14px 0 0}
.billboard-logo{position:absolute;right:clamp(18px,4vw,48px);top:clamp(18px,4vw,40px);width:clamp(140px,22vw,320px);z-index:1;opacity:.92;filter:grayscale(1) brightness(1.3)}

/* ---------- rewards ---------- */
.rewards{overflow:hidden}
.rewards-bg{position:absolute;inset:0;background:url(img/gravity.jpg) center/cover;opacity:.2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.reward-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reward{position:relative;border:2px solid var(--reward-c,#444);background:rgba(15,18,25,.92);padding:22px 18px 20px;text-align:center;box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.4),inset 0 0 40px rgba(0,0,0,.6);transition:transform .25s}
.reward:hover{transform:translate(-2px,-4px)}
.reward.gold{--reward-c:#e8b23a}.reward.silver{--reward-c:#d4d8df}.reward.bronze{--reward-c:#b97845}.reward.merch{--reward-c:#6b7280}
.reward-rank{font-family:var(--pixel);font-size:16px;color:var(--reward-c);margin-bottom:12px}
.reward-icon{font-size:64px;line-height:1;margin:10px 0 14px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.8))}
.reward-name{font-family:var(--display);text-transform:uppercase;font-size:19px;letter-spacing:.02em;margin-bottom:16px;min-height:2.4em;display:flex;align-items:center;justify-content:center}

/* ---------- wanted posters ---------- */
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px}
.poster{background:#e9e1cb;color:#1b1610;padding:18px 18px 16px;text-align:center;border:6px double #5a4a2e;box-shadow:0 0 0 2px var(--outline),10px 14px 0 rgba(0,0,0,.4);transform:rotate(-1deg);transition:transform .25s}
.poster:nth-child(2){transform:rotate(1.2deg)} .poster:nth-child(3){transform:rotate(-.6deg)}
.poster:hover{transform:rotate(0) scale(1.02)}
.poster-head{font-family:var(--display);font-size:clamp(30px,4vw,46px);letter-spacing:.12em;border-bottom:2px solid #5a4a2e;margin-bottom:12px}
.poster-img{aspect-ratio:1/1;background:#d6c9a6;border:2px solid #5a4a2e;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:72px;color:#a08d64;overflow:hidden}
.poster-img img{width:100%;height:100%;object-fit:cover;filter:sepia(.6) contrast(1.1)}
.poster-name{font-family:var(--pixel);font-size:11px;margin:14px 0 6px}
.poster-reward{font-family:var(--mono);font-size:13px;letter-spacing:.1em}
.poster-foot{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#5a4a2e;margin-top:10px;border-top:1px dashed #5a4a2e;padding-top:8px}

/* ---------- bounty board ---------- */
.bounty{overflow:hidden;background:rgba(10,13,19,.6)}
.bounty-bg{position:absolute;inset:0;background:url(img/taillight.jpg) center/cover;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.bounty-grid{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
.bounty-copy p{font-size:19px;color:#dfe3ea}
.bounty-list{list-style:none;margin:20px 0;padding:0;border:1px solid rgba(255,255,255,.18);background:rgba(10,13,19,.8);box-shadow:0 0 0 1px var(--outline),6px 6px 0 rgba(0,0,0,.35)}
.bounty-list li{display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center}
.bounty-list li:last-child{border-bottom:0}
.b-handle{font-family:var(--pixel);font-size:10px;color:#fff}
.b-sector{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--silver)}
.b-amt{font-family:var(--display);font-size:20px;color:var(--red-hi)}
.rules{font-size:15px;color:var(--muted)}
.starchart{border:1px solid rgba(255,255,255,.22);background:radial-gradient(circle at 50% 50%,#161a23,#07090d);box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.35),inset 0 0 60px rgba(255,255,255,.04);padding:10px}
.starchart svg{width:100%;height:auto;display:block;font-family:var(--mono)}
.sc-grid{stroke:rgba(255,255,255,.12);stroke-width:1}
.sc-line{stroke:rgba(255,255,255,.4);stroke-width:1.2}
.sc-star{fill:#fff}
.sc-label{fill:var(--silver);font-size:11px;letter-spacing:.2em}
.sc-compass{fill:#fff;font-size:11px}
.pin text{fill:#fff;font-family:var(--pixel);font-size:8px}
.pin-dot{fill:var(--red)}
.pin-ring{fill:none;stroke:var(--red);stroke-width:1.5;animation:ping 1.6s ease-out infinite;transform-origin:center;transform-box:fill-box}
.pin.open .pin-dot{fill:var(--silver)} .pin.open .pin-ring{stroke:var(--silver);animation:none;stroke-dasharray:3 3}
.pin.open text{fill:var(--silver)}
@keyframes ping{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* ---------- mission ---------- */
.mission{overflow:hidden}
.mission-bg{position:absolute;inset:0;background:url(img/end.jpg) center/cover;opacity:.24;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.step{position:relative;background:#e6e9ee;color:#0c0f15;padding:28px 26px 26px;border:2px solid var(--outline);box-shadow:10px 10px 0 var(--outline),0 30px 60px rgba(0,0,0,.5)}
.step-num{font-family:var(--pixel);font-size:12px;color:#6b7280;margin-bottom:10px}
.step-check{position:absolute;top:22px;right:22px;width:28px;height:28px;border:2px solid #0c0f15;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700}
.step h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.8vw,34px);letter-spacing:.01em;margin:0 0 10px;color:#0c0f15}
.step p{margin:0 0 18px;color:#2b313c;font-size:17px}
.tip{font-family:var(--pixel);font-size:9px;color:#fff;background:var(--red);padding:10px 12px;display:inline-block;box-shadow:0 0 0 1px var(--outline)}
.ca-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ca-chip{font-family:var(--pixel);font-size:9px;background:#0c0f15;color:var(--red-hi);padding:8px 10px}
.ca-copy{font-family:var(--mono);font-size:14px;background:#fff;border:1px dashed #0c0f15;padding:8px 12px;cursor:pointer;color:#0c0f15}
.ca-copy:hover{background:#ffe3e3}
.disclaimer{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:28px;text-align:center}

/* ---------- submit ---------- */
.idea-form{display:grid;gap:16px;border:1px solid rgba(255,255,255,.18);background:rgba(15,18,25,.9);padding:28px;box-shadow:0 0 0 1px var(--outline),8px 8px 0 rgba(0,0,0,.35)}
.idea-form label{display:grid;gap:8px}
.idea-form label span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.idea-form input,.idea-form textarea{width:100%;background:#07090d;border:1px solid rgba(255,255,255,.25);color:#fff;font:inherit;font-size:18px;padding:12px 14px;resize:vertical}
.idea-form input:focus,.idea-form textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(255,42,42,.22)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.charcount{font-family:var(--mono);font-size:12px;color:var(--dim)}
.form-btns{display:flex;gap:10px;flex-wrap:wrap}
.small{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center;margin-top:18px}

/* ---------- footer ---------- */
.footer{overflow:hidden;padding:60px var(--pad) 40px;border-top:2px solid var(--red);background:linear-gradient(180deg,#0c0f15,#1a1e26);box-shadow:0 -10px 40px rgba(255,42,42,.12)}
.footer-logo{display:block;width:min(50vw,260px);height:auto;margin:0 auto -2%;
  -webkit-mask-image:radial-gradient(62% 62% at 50% 52%,#000 50%,transparent 100%);mask-image:radial-gradient(62% 62% at 50% 52%,#000 50%,transparent 100%)}
.footer-big{font-family:var(--display);font-size:clamp(44px,11.5vw,190px);line-height:.85;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);text-align:center;user-select:none;white-space:nowrap}
.footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--muted);margin-top:30px}
.footer-row nav{display:flex;gap:20px}
.footer-row a{color:var(--silver);text-decoration:none}
.footer-row a:hover{color:var(--red-hi)}
.footer-disc{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;margin-top:24px}

/* ---------- reveal + keyframes ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{50%{opacity:.45}}
@keyframes ring{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes knockIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .reward-grid{grid-template-columns:repeat(2,1fr)}
  .race-inner,.bounty-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .posters{grid-template-columns:1fr;max-width:420px}
  .steps{grid-template-columns:1fr}
}
@media(max-width:700px){
  .deck{width:150px;right:10px}
  .deck-tele{display:none}
  .hud-pill{padding:9px 10px;font-size:8px}
}
@media(max-width:640px){
  .posts{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .lineup{grid-template-columns:1fr;padding:28px 12px 0}
  .marks{display:none}
  .slots{grid-template-columns:1fr;gap:28px}
  .astro,.slot.is-top .astro{width:100px;height:200px}
  .ex-table th:nth-child(3),.ex-table td:nth-child(3){display:none}
  .ex-name{display:block;margin:4px 0}
  .billboard{aspect-ratio:4/3}
  .billboard-logo{width:140px}
  .hero{padding-top:90px}
  .hero-banner{-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 75%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}