/* Sullivania Speedway (Neo, 2026-11-04): the toy car's own page. Flat UI only; every real-looking thing is Firefly art or his photo. */
@font-face{font-family:AlmB;src:url(fonts/Almendra-Bold.woff2) format("woff2");font-display:swap}
@font-face{font-family:Alegreya;src:url(fonts/alegreya-sans-normal-400.woff2);font-display:swap}
:root{--ink:#e3ebe6;--dim:#93a198;--seep:#2bee74;--gold:#d9b45a;--line:rgba(201,208,203,.18)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#050806;color:var(--ink);font:16px/1.4 Alegreya,system-ui,sans-serif;overflow:hidden}
.sbar{height:56px;display:flex;align-items:center;gap:16px;padding:0 16px;background:linear-gradient(#0b120e,#060a08);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 #000 inset,0 8px 18px rgba(0,0,0,.7);position:relative;z-index:5}
.sbar h1{font:400 24px/1 AlmB,serif;margin:0 8px 0 0;color:#d9e6dc;white-space:nowrap}
.back{padding:5px 13px;border-radius:14px;border:1px solid rgba(201,208,203,.5);color:#e6eeea;text-decoration:none;font-size:15px;white-space:nowrap}.back:hover{border-color:#e4e9e5}
.modes{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.modes button{all:unset;cursor:pointer;padding:6px 14px;color:var(--dim)}.modes button.on{background:rgba(43,238,116,.14);color:#dfffe9}
.tool{all:unset;cursor:pointer;padding:5px 12px;border-radius:6px;border:1px solid var(--line);color:var(--ink);font-size:15px;white-space:nowrap}.tool:hover{border-color:rgba(201,208,203,.5)}
#reset{margin-left:auto}
.hud{height:64px;display:flex;align-items:center;gap:26px;padding:0 18px;border-bottom:1px solid #000;background:#070b09}
.hgrp{display:flex;align-items:center;gap:9px}.hgrp[hidden]{display:none}.lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.lvl b{font-size:22px;min-width:1.2em;text-align:center}.arr{all:unset;cursor:pointer;font-size:22px;padding:0 6px;color:var(--ink)}.arr:hover{color:var(--seep)}
.stars{color:var(--gold);letter-spacing:2px;min-width:4.2em}
.notch{display:flex;gap:4px}.notch button{all:unset;cursor:pointer;width:30px;height:30px;border-radius:5px;display:grid;place-items:center;border:1px solid var(--line);color:var(--dim);font-size:14px}
.notch button.on{border-color:var(--seep);color:#dfffe9;box-shadow:0 0 10px rgba(43,238,116,.35)}
.gauge{position:relative;width:260px;height:18px;border-radius:9px;border:1px solid var(--line);overflow:hidden;background:#020403}
.gauge i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#2bee74 0,#2bee74 20.8%,#e8c24a 20.8%,#e8c24a 50%,#ff5a3c 50%);transition:width .06s}
.gauge span{position:absolute;top:0;font-size:11px;line-height:16px;color:rgba(255,255,255,.55);pointer-events:none}.gauge .z1{left:6px}.gauge .z2{left:22.5%}.gauge .z3{left:52%}
.gauge::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20.6%,#000 20.6%,#000 21%,transparent 21%,transparent 49.8%,#000 49.8%,#000 50.2%,transparent 50.2%)}
.score b{font-size:22px}
.stypick{display:flex;gap:6px}.stypick button{all:unset;cursor:pointer;width:48px;height:30px;border-radius:4px;background:center/cover #020403;box-shadow:0 0 0 1px #000;filter:brightness(.6)}.stypick button.on{filter:none;outline:2px solid var(--seep);outline-offset:1px}
.track{position:relative;height:calc(100vh - 120px);min-height:420px;overflow:hidden;background:#0a100c;touch-action:none;user-select:none}
.bg{position:absolute;left:0;top:0;right:0;height:100%;background:url(art/stadium-pano.webp?v=2) no-repeat 0 100%/auto 100%;pointer-events:none}
.world{position:absolute;left:0;top:0;height:100%;will-change:transform}.world>*{position:absolute}
.ground{position:absolute;left:0;right:0;bottom:0;background:url(art/arena-dirt.webp?v=1) repeat;box-shadow:0 -1px 0 rgba(0,0,0,.6)}
.banner{position:absolute;left:50%;top:18%;transform:translateX(-50%);padding:12px 26px;border-radius:10px;background:rgba(4,8,6,.88);border:1px solid var(--line);font:400 30px/1.15 AlmB,serif;text-align:center;z-index:20;pointer-events:none}
.banner small{display:block;font:16px Alegreya,sans-serif;color:var(--dim);margin-top:4px}.banner[hidden]{display:none}
.tip{position:absolute;left:18px;top:12px;margin:0;padding:6px 12px;border-radius:8px;background:rgba(4,8,6,.75);color:var(--ink);font-size:15px;z-index:20;pointer-events:none;transition:opacity .6s}.tip.gone{opacity:0}
/* the car (same parts as the masthead's) */
.car{z-index:8;cursor:grab;touch-action:none;will-change:transform;filter:drop-shadow(0 2px 2px rgba(0,0,0,.75))}.car.drag{cursor:grabbing}.car>img{position:absolute;pointer-events:none;user-select:none}.car>.cb{left:0;top:0;width:100%;height:auto}
/* ramps: same parts as the masthead's */
.rkit{z-index:6;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));left:0;top:0;width:100%;height:100%}.rkit>*{position:absolute}.rstk{background-repeat:no-repeat,repeat-y}.rdeck{background-position:center;background-repeat:no-repeat}
.rfill{background-repeat:repeat}.rplw{left:0;top:0;width:100%;overflow:hidden;pointer-events:none}.rplw>.rpl{position:absolute;display:block}
.hits{z-index:7;left:0;top:0;overflow:visible;pointer-events:none}.hits polygon,.hits .hh{pointer-events:none;fill:transparent}.free .hits polygon,.free .hits .hh{pointer-events:all;cursor:grab}
.hits .sel{stroke:var(--seep);stroke-width:1.5;stroke-dasharray:5 4}
/* hoops: Firefly's stunt hoops (SP2); back behind the car, near half in front; a glow says cleared or clipped */
.hoop{z-index:5;pointer-events:none}.hoop.front{z-index:9}.hoop>img{display:block;width:100%;height:100%}.hpost{z-index:4;background-repeat:repeat-y;pointer-events:none}
.hoop.ok{filter:drop-shadow(0 0 6px rgba(43,238,116,.9))}.hoop.hit{filter:drop-shadow(0 0 6px rgba(255,77,58,.9))}
/* fire: five frames of the same hoop crossfading, each lit for a moment in turn */
.hoop>img.ff{position:absolute;left:0;top:0;animation:flick .55s linear infinite;opacity:0}.hoop>img.ff:first-child{animation:none;opacity:.6}
@keyframes flick{0%{opacity:0}12%{opacity:1}30%{opacity:.9}45%{opacity:0}100%{opacity:0}}
/* the stadium jump sits under the floodlights, so it's lit brighter than the arena floor behind it (dark dirt on dark dirt vanished) */
.rkit.lit{filter:brightness(1.55) contrast(1.08) drop-shadow(0 2px 2px rgba(0,0,0,.7))}
/* HUD contrast (Neo 11/4: "there needs to be contrast here"): brighter labels, buttons with real edges, a lit selected click, a visible gauge */
.hud{background:#0e1612;border-bottom:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lab{color:#c9d4cd;font-size:13px}
.arr{color:#f2f7f4}.lvl b,.score b{color:#ffffff}.stars{color:#e8c45a}
.notch button{background:#18221c;border-color:rgba(214,224,218,.5);color:#f2f7f4;font-size:15px}
.notch button:hover{border-color:#e6eeea;background:#1f2b24}
.notch button.on{background:rgba(43,238,116,.28);border-color:#2bee74;color:#ffffff;box-shadow:0 0 10px rgba(43,238,116,.45)}
.gauge{background:#1c2620;border-color:rgba(214,224,218,.5)}.gauge span{color:#eef4f0;text-shadow:0 1px 1px #000}
.modes button{color:#c9d4cd}.modes button.on{color:#ffffff;background:rgba(43,238,116,.24)}
.tool{border-color:rgba(214,224,218,.45);color:#f2f7f4;background:#16201a}.tool:hover{border-color:#e6eeea}
.pcar{position:absolute;z-index:6;pointer-events:none;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
/* the car picker: same thumbnails as the masthead's 01 flyout */
.carpick{display:flex;gap:6px;margin-left:auto}.carpick button{all:unset;cursor:pointer;width:64px;height:40px;border-radius:5px;background:center/cover #020403;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(214,224,218,.35);filter:brightness(.6)}
.carpick button:hover{filter:brightness(.85)}.carpick button.on{filter:none;outline:2px solid #2bee74;outline-offset:1px}
.carpick+#reset{margin-left:0}
.hz .hits polygon.fixed{pointer-events:all;cursor:grab}.hz.tilting,.hz.tilting .hits polygon.fixed{cursor:grabbing}   /* Neo 11/4: drag the hoops ramp to set 1-5 */
/* high scores (Neo 11/4), same look as the Slingshot's board */
#reset{margin-left:0}#hsbtn{margin-left:12px}   /* the car picker already pushes right */
.banner .hsl{font:16px Alegreya,sans-serif;color:var(--ink);margin:10px 0 0}.banner .hsl b{color:var(--gold);font-size:20px}.banner .hsl a{color:var(--seep)}
.banner .hsl input{font:16px Alegreya,sans-serif;width:11em;margin-left:6px;padding:4px 8px;border-radius:6px;border:1px solid rgba(201,208,203,.4);background:#020403;color:var(--ink)}
.hs{position:absolute;inset:0;z-index:30;background:rgba(2,4,3,.6);display:grid;place-items:start center;padding-top:6vh}.hs[hidden]{display:none}
.hsbox{position:relative;width:min(480px,92vw);padding:20px 24px 16px;border-radius:12px;background:rgba(6,10,8,.96);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.7)}
.hsbox h2{font:400 28px/1.1 AlmB,serif;margin:0;color:#e6eee9}.hsbox .sub{margin:4px 0 12px;color:var(--dim);font-size:15px}
.hsbox .x{all:unset;cursor:pointer;position:absolute;right:14px;top:10px;font-size:26px;line-height:1;color:var(--dim)}.hsbox .x:hover{color:var(--ink)}
.hsbox .tabs{display:flex;gap:4px;margin-bottom:12px}.hsbox .tabs button{all:unset;cursor:pointer;padding:5px 11px;border-radius:6px;border:1px solid var(--line);color:var(--dim);font-size:15px}
.hsbox .tabs button.on{border-color:var(--seep);color:#dfffe9;background:rgba(43,238,116,.1)}
.hsbox .rows{list-style:none;margin:0;padding:0}.hsbox .rows li{display:grid;grid-template-columns:2em 1fr auto 5.5em;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px solid rgba(201,208,203,.08);font-size:17px}
.hsbox .rows li b{color:var(--gold);text-align:right}.hsbox .rows li.me{background:rgba(217,180,90,.1);border-radius:6px}.hsbox .rows .st{color:var(--gold);font-size:14px}.hsbox .rows .st i{font-style:normal;color:rgba(217,180,90,.35)}
.hsbox .rows .sc{text-align:right;font-variant-numeric:tabular-nums}.hsbox .none{color:var(--dim);margin:14px 0}
.hsbox .foot{margin:12px 0 0;font-size:13px;color:var(--dim)}.hsbox .foot a{color:var(--seep)}
.hsbox .namer{margin:12px 0 0;font-size:15px}.hsbox .namer input{font:16px Alegreya,sans-serif;width:10em;margin-left:6px;padding:4px 8px;border-radius:6px;border:1px solid rgba(201,208,203,.4);background:#020403;color:var(--ink)}
.hstoast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:8px;background:rgba(4,8,6,.9);border:1px solid var(--line);font-size:16px;z-index:25;white-space:nowrap}.hstoast[hidden]{display:none}.hstoast b{color:var(--gold)}.hstoast a{color:var(--seep)}
.car>img.cfire{z-index:2;filter:drop-shadow(0 0 6px rgba(255,140,40,.6))}.car>img[hidden]{display:none}   /* Neo 11/5: the car on fire */
.bm,.pc{position:absolute;left:0;top:0;z-index:9;pointer-events:none;user-select:none}.bm[hidden]{display:none}.pc{z-index:8;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}