:root { --bg:#14111f; --panel:#1f1a2e; --line:#3a3350; --fg:#fff; --muted:#b4adc6; --go:#ffd60a; --hot:#ff2e6a; color-scheme:dark; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
[hidden] { display:none !important; }
html[data-mode="public"] .creator-only { display:none !important; }
html[data-mode="creator"] .public-only { display:none !important; }
.top { display:flex; align-items:center; gap:12px; padding:14px 16px; max-width:560px; margin:0 auto; }
.logo { color:#fff; text-decoration:none; font:900 24px "Arial Black",Impact,system-ui,sans-serif; letter-spacing:-.5px; }
.logo b { color:var(--go); }
.pill { background:var(--hot); padding:2px 10px; border-radius:99px; font-size:13px; font-weight:800; }
main { max-width:560px; margin:0 auto; padding:0 16px 40px; }
.panel { margin-bottom:18px; }
h1 { font:900 clamp(30px,8vw,42px)/1.08 "Arial Black",Impact,system-ui,sans-serif; margin:6px 0 10px; letter-spacing:-1px; }
h2 { font-size:24px; font-weight:900; margin:26px 0 10px; }
h3 { font-size:16px; font-weight:800; margin:18px 0 8px; color:var(--muted); }
.lead { color:var(--muted); margin:0 0 18px; }
.small { color:var(--muted); font-size:14px; }
.error { color:#ff8496; font-weight:700; min-height:1em; }
.btn { display:block; width:100%; padding:13px 14px; border-radius:14px; border:2px solid var(--line); background:transparent; color:#fff; font:800 16px system-ui,sans-serif; cursor:pointer; text-align:center; text-decoration:none; }
.btn:focus-visible,.tab:focus-visible,.choice:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--go); outline-offset:2px; }
.btn-go { background:var(--go); border-color:var(--go); color:#111; }
.btn-go:hover { background:#ffe34d; }
.btn-big { padding:18px; font-size:20px; margin-top:12px; }
.btn-ghost:hover { border-color:#fff; }
.btn:disabled { opacity:.5; cursor:wait; }
.tabs { display:flex; gap:6px; margin:14px 0 12px; background:var(--panel); padding:5px; border-radius:14px; }
.tab { flex:1; padding:10px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:800 15px system-ui,sans-serif; cursor:pointer; }
.tab.on { background:#fff; color:#111; }
.racers { display:grid; gap:10px; margin-bottom:10px; }
.racer { display:grid; grid-template-columns:1fr auto; gap:8px; background:var(--panel); padding:10px; border-radius:14px; }
.racer input[type=text],.racer select,.creator-export select { width:100%; min-width:0; padding:11px; border-radius:10px; border:2px solid var(--line); background:#14111f; color:#fff; font:600 16px system-ui,sans-serif; }
.racer .row { grid-column:1 / -1; display:grid; grid-template-columns:1fr 48px 48px; gap:8px; }
.racer.team .row { grid-template-columns:1fr 48px 48px; }
.racer.team .shape { visibility:hidden; height:0; padding:0; border:0; }
.racer.team .row::before { content:"Kit colours"; color:var(--muted); align-self:center; font-size:14px; }
input[type=color] { width:48px; height:46px; padding:3px; border-radius:10px; border:2px solid var(--line); background:#14111f; cursor:pointer; }
.remove { width:44px; border:2px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; }
.stage { display:flex; flex-direction:column; gap:10px; }
.screen { position:relative; aspect-ratio:9/16; width:100%; max-width:min(100%, 62vh); margin:0 auto; background:#000; border-radius:18px; overflow:hidden; }
.screen canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#fff; font-weight:700; text-align:center; padding:20px; z-index:2; }
.spinner { width:42px; height:42px; border:5px solid #443c5f; border-top-color:var(--go); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.controls { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.controls .btn { padding:11px 4px; font-size:14px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.creator-export { display:grid; gap:10px; }
.creator-export label { font-size:14px; color:var(--muted); display:grid; gap:4px; }
html[data-mode="creator"] #downloadBtn { display:none; }
.info ol { padding-left:22px; color:var(--muted); }
.info li { margin-bottom:8px; }
details { background:var(--panel); padding:12px 14px; border-radius:12px; margin-bottom:8px; }
summary { font-weight:800; cursor:pointer; }
details p { color:var(--muted); margin:8px 0 2px; }
.foot { max-width:560px; margin:0 auto; padding:0 16px 34px; display:flex; gap:16px; }
.foot a { color:var(--muted); font-size:14px; }
.sheet { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.72); display:flex; align-items:flex-end; justify-content:center; }
.sheet-box { position:relative; background:var(--panel); width:100%; max-width:560px; max-height:92vh; overflow:auto; padding:18px 16px calc(24px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
.sheet-box h2 { margin:2px 44px 10px 0; }
.close { position:absolute; right:10px; top:10px; width:42px; height:42px; background:transparent; border:0; color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.choice { display:flex; flex-direction:column; gap:2px; align-items:center; padding:16px 10px; border-radius:14px; border:2px solid var(--line); background:#14111f; color:#fff; cursor:pointer; font:600 15px system-ui,sans-serif; }
.choice b { font-size:22px; font-weight:900; }
.choice span { color:var(--muted); font-size:14px; }
.choice:hover { border-color:var(--go); }
.choice.wide { width:100%; border-color:var(--go); }
.ad-slot { min-height:160px; border-radius:14px; background:#14111f; display:grid; place-items:center; color:var(--muted); text-align:center; padding:14px; overflow:hidden; }
.count { text-align:center; font-size:46px; font-weight:900; margin:12px 0 0; color:var(--go); }
.bar { height:14px; background:#14111f; border-radius:9px; overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--go); }
#whopCheckout { min-height:300px; }
@media (min-width:600px) { .sheet { align-items:center; } .sheet-box { border-radius:22px; } }