/* THE COSMIC RACE on the glass (game/race-hud.js). The HUD contract every mode's DOM HUD keeps (ctf.css):
   fixed over the game, never takes a click, its readouts zoomed by --ui-scale-hud and laid out by container
   queries so a 250% HUD on a small window still fits. Orbitron for numerals, Rajdhani for words. */
#raceHud{position:fixed;inset:0;z-index:35;pointer-events:none;color:#eef6ff;font-family:'Rajdhani',sans-serif;font-weight:600;text-shadow:0 2px 3px #000;contain:layout style;
 --race-cyan:#66e6ff;--race-gold:#ffc440;--race-red:#ff4a5e;--race-green:#5dff9a;--race-panel:rgba(6,12,20,.78)}
#raceHud[hidden],#raceHud [hidden]{display:none!important}
#raceHud *{box-sizing:border-box}
.race-ui{position:absolute;inset:0;zoom:var(--ui-scale-hud,1);container:race-ui / size;
 --safe-top:calc(env(safe-area-inset-top,0px) / var(--ui-scale-hud,1));--safe-left:calc(env(safe-area-inset-left,0px) / var(--ui-scale-hud,1));--safe-right:calc(env(safe-area-inset-right,0px) / var(--ui-scale-hud,1))}

/* place: the number a racer looks for first */
.race-place{position:absolute;left:max(22px,var(--safe-left));bottom:150px;display:flex;align-items:flex-start;gap:2px;font-family:'Orbitron',sans-serif;font-weight:900;line-height:.9;color:#fff;
 filter:drop-shadow(0 0 14px rgba(102,230,255,.45))}
/* ⚠ AN ITALIC GLYPH LEANS OUT OF ITS OWN BOX, and a gradient clipped to the text is only painted inside that box: the top
   right of the number was sliced off exactly where the ST / ND / RD begins (the owner, 2026-09-19). The box is widened
   by the slant (padding) and the layout given the same amount back (margin), so nothing moves and nothing is cut. */
.race-place b{font-size:92px;font-style:italic;letter-spacing:-.04em;padding:0 .2em 0 .06em;margin:0 -.1em 0 -.06em;background:linear-gradient(180deg,#fff 20%,var(--race-cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.race-place sup{font-size:30px;font-style:italic;margin:8px 0 0 4px;color:var(--race-cyan);position:relative}
.race-place small{align-self:flex-end;margin:0 0 10px 6px;font-size:18px;font-weight:700;color:#9fb4c8}
#raceHud[data-place=podium] .race-place b{background:linear-gradient(180deg,#fff 15%,var(--race-gold) 100%);-webkit-background-clip:text;background-clip:text}
#raceHud[data-place=podium] .race-place sup{color:var(--race-gold)}
#raceHud[data-place=podium] .race-place{filter:drop-shadow(0 0 16px rgba(255,196,64,.5))}

/* lap, clock, sector */
.race-lap{position:absolute;right:max(20px,var(--safe-right));top:max(18px,var(--safe-top));text-align:right;padding:9px 16px 9px 22px;background:linear-gradient(270deg,var(--race-panel),rgba(6,12,20,0));border-right:3px solid var(--race-cyan);min-width:210px}
.race-lap-n{font-family:'Orbitron',sans-serif;font-weight:800;font-size:22px;letter-spacing:.06em}
.race-clock{font-family:'Orbitron',sans-serif;font-weight:600;font-size:26px;font-variant-numeric:tabular-nums;color:#fff;margin-top:2px}
.race-best{font-size:14px;letter-spacing:.08em;color:#9fb4c8;font-variant-numeric:tabular-nums;min-height:17px}
.race-sector{font-size:13px;letter-spacing:.22em;color:var(--race-cyan);margin-top:2px;min-height:16px}

/* the slot */
.race-slot{position:absolute;left:50%;top:max(16px,var(--safe-top));transform:translateX(-50%);width:96px;height:96px;display:grid;place-items:center;--item:#5b6b7c;
 background:radial-gradient(circle at 50% 40%,rgba(20,32,48,.92),rgba(4,8,14,.92));border:3px solid var(--item);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
 box-shadow:inset 0 0 22px color-mix(in srgb,var(--item) 35%,transparent)}
.race-slot svg{width:58px;height:58px;fill:none;stroke:var(--item);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--item))}
.race-slot[data-state=empty] svg{opacity:0}
.race-slot[data-state=empty]{opacity:.55}
.race-slot[data-state=rolling]{animation:race-roll .14s linear infinite}
.race-slot[data-state=ready]{animation:race-ready .5s ease-out 1}
.race-slot-name{position:absolute;left:50%;top:102px;transform:translateX(-50%);white-space:nowrap;font-size:15px;letter-spacing:.16em;color:var(--item)}
.race-slot-key{position:absolute;right:-34px;top:34px;min-width:26px;padding:1px 6px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;text-align:center;color:#cfe3f5;border:1px solid #6d8196;border-radius:4px;background:rgba(6,12,20,.8)}
.race-slot[data-state=empty] .race-slot-key{display:none}
.race-slot-full{position:absolute;left:50%;top:126px;transform:translateX(-50%);white-space:nowrap;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;color:#ffb347;text-shadow:0 0 8px rgba(255,150,40,.7),0 1px 2px #000;opacity:0;pointer-events:none}
.race-slot-full.on{animation:race-slot-full .95s ease-out 1}
@keyframes race-slot-full{0%{opacity:0;transform:translateX(-50%) scale(1.25)}12%{opacity:1;transform:translateX(-50%) scale(1)}70%{opacity:1}100%{opacity:0}}
.race-slot-pips{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:5px}
.race-slot-pips i{width:9px;height:9px;border-radius:50%;background:var(--item);box-shadow:0 0 6px var(--item)}
@keyframes race-roll{50%{filter:brightness(1.5)}}
@keyframes race-ready{0%{transform:translateX(-50%) scale(1.28);filter:brightness(2)}100%{transform:translateX(-50%) scale(1)}}

/* the corner that is coming: the planet's horizon is close, so the road's next move is said out loud */
.race-turn{position:absolute;left:50%;top:150px;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-weight:900;font-size:44px;letter-spacing:-.08em;color:var(--race-gold);filter:drop-shadow(0 0 10px rgba(255,196,64,.6));animation:race-turn .5s ease-in-out infinite alternate}
.race-turn[data-hard='1']{color:var(--race-red);filter:drop-shadow(0 0 12px rgba(255,74,94,.7));font-size:54px}
.race-turn[data-dir=left]{--nudge:-7px}.race-turn[data-dir=right]{--nudge:7px}
@keyframes race-turn{from{transform:translateX(-50%)}to{transform:translateX(calc(-50% + var(--nudge,0px)))}}

/* running order */
.race-order{position:absolute;left:max(18px,var(--safe-left));top:max(86px,calc(var(--safe-top) + 70px));margin:0;padding:0;list-style:none;width:214px;display:flex;flex-direction:column;gap:3px}
.race-order li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;padding:2px 9px 2px 5px;font-size:15px;line-height:1.25;background:linear-gradient(90deg,var(--race-panel),rgba(6,12,20,.2));border-left:3px solid #4b6076}
.race-order li b{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;text-align:center;color:#9fb4c8}
.race-order li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.03em}
.race-order li em{font-style:normal;font-size:12px;color:#9fb4c8;font-variant-numeric:tabular-nums}
.race-order li[data-me='1']{border-left-color:var(--race-green);background:linear-gradient(90deg,rgba(40,120,80,.55),rgba(6,12,20,.2))}
.race-order li[data-me='1'] b,.race-order li[data-me='1'] span{color:#d9ffe8}
.race-order li[data-fin='1']{border-left-color:var(--race-gold)}
.race-order li:nth-child(-n+3) b{color:var(--race-gold)}

/* speed and the drift's charge */
.race-gauge{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:baseline;gap:7px;padding:4px 20px 8px;background:linear-gradient(180deg,rgba(6,12,20,0),var(--race-panel));border-bottom:3px solid var(--race-cyan);min-width:230px;justify-content:center}
.race-gauge b{font-family:'Orbitron',sans-serif;font-weight:800;font-style:italic;font-size:40px;font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:right}
.race-gauge small{font-size:13px;letter-spacing:.18em;color:#9fb4c8}
#raceHud[data-boost='1'] .race-gauge{border-bottom-color:var(--race-gold)}
#raceHud[data-boost='1'] .race-gauge b{color:var(--race-gold);text-shadow:0 0 14px rgba(255,196,64,.8)}
.race-charge{position:absolute;left:14px;right:14px;bottom:-12px;height:7px;display:flex;gap:4px;opacity:.25;transition:opacity .15s}
.race-charge[data-on='1']{opacity:1}
.race-charge i{flex:1;background:rgba(255,255,255,.14);position:relative;overflow:hidden;transform:skewX(-24deg)}
.race-charge i::after{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--fill,0));background:var(--race-cyan)}
.race-charge i:nth-child(2)::after{background:var(--race-gold)}.race-charge i:nth-child(3)::after{background:#f45cff}
.race-charge i[data-lit='1']{box-shadow:0 0 10px currentColor}

/* the minimap */
.race-map{position:absolute;right:max(18px,var(--safe-right));top:150px;width:220px;height:150px;background:rgba(6,12,20,.42);border:1px solid rgba(120,170,210,.35);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

/* the lights */
.race-lights{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;gap:18px;padding:12px 20px;background:rgba(4,8,14,.85);border:2px solid #2b3a4a;border-radius:14px}
.race-lights i{width:46px;height:46px;border-radius:50%;background:#2a0b10;box-shadow:inset 0 0 10px #000}
.race-lights i[data-on='1']{background:radial-gradient(circle at 40% 35%,#ffb0b8,var(--race-red) 55%,#7a0f1c);box-shadow:0 0 26px var(--race-red)}
.race-lights[data-go='1'] i{background:radial-gradient(circle at 40% 35%,#d8ffe6,var(--race-green) 55%,#0c6b35);box-shadow:0 0 30px var(--race-green)}
.race-hint{position:absolute;left:50%;top:calc(24% + 96px);transform:translateX(-50%);padding:5px 16px;font-size:16px;letter-spacing:.12em;white-space:nowrap;color:#cfe3f5;background:var(--race-panel);border-left:3px solid var(--race-cyan);border-right:3px solid var(--race-cyan)}

/* which ship is mine: over it on the grid and for the first seconds of the race */
.race-you{position:absolute;left:0;top:0;padding:1px 8px 2px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;color:#04120a;background:var(--race-green);clip-path:polygon(0 0,100% 0,100% 72%,58% 72%,50% 100%,42% 72%,0 72%);padding-bottom:9px;will-change:transform}
/* the words a race shouts */
.race-word{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-weight:900;font-style:italic;font-size:92px;letter-spacing:.02em;white-space:nowrap;color:#fff;animation:race-word .5s cubic-bezier(.2,1.6,.4,1) 1;filter:drop-shadow(0 0 22px rgba(102,230,255,.75))}
.race-word[data-tone=go]{color:var(--race-green);filter:drop-shadow(0 0 26px rgba(93,255,154,.8))}
.race-word[data-tone=final]{color:var(--race-gold);filter:drop-shadow(0 0 26px rgba(255,196,64,.8))}
.race-word[data-tone=bad]{color:var(--race-red);filter:drop-shadow(0 0 26px rgba(255,74,94,.8))}
.race-word[data-tone=flag]{color:#fff;font-size:76px}
@keyframes race-word{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.race-sub{position:absolute;left:50%;top:calc(36% + 70px);transform:translateX(-50%);padding:4px 18px;font-size:22px;letter-spacing:.14em;white-space:nowrap;background:var(--race-panel);border-left:3px solid var(--race-cyan);border-right:3px solid var(--race-cyan)}
.race-sub[data-tone=bad]{border-color:var(--race-red);color:#ffd0d6}.race-sub[data-tone=good]{border-color:var(--race-green);color:#d9ffe8}.race-sub[data-tone=gold]{border-color:var(--race-gold);color:#ffeec4}
.race-warn{position:absolute;left:50%;top:58%;transform:translateX(-50%);padding:6px 24px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:26px;letter-spacing:.14em;white-space:nowrap;color:#fff;background:rgba(150,10,28,.82);border:2px solid var(--race-red);animation:race-warn .38s steps(2) infinite}
.race-warn[data-tone=lock]{background:rgba(120,20,120,.8);border-color:#f45cff}
@keyframes race-warn{50%{opacity:.45}}
.race-feed{position:absolute;right:max(18px,var(--safe-right));top:312px;width:260px;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.race-feed-row{padding:2px 10px;font-size:14px;letter-spacing:.05em;background:var(--race-panel);border-right:3px solid var(--race-cyan);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:race-feed .25s ease-out 1}
.race-feed-row[data-tone=bad]{border-right-color:var(--race-red)}.race-feed-row[data-tone=gold]{border-right-color:var(--race-gold)}
@keyframes race-feed{from{transform:translateX(30px);opacity:0}}

/* a small window, or a big HUD scale: the order and the map give way first, then everything shrinks */
@container race-ui (max-width:1100px){.race-order{width:170px}.race-order li{font-size:13px}.race-map{width:170px;height:116px}.race-feed{top:276px;width:210px}.race-place b{font-size:70px}.race-word{font-size:64px}}
@container race-ui (max-width:820px){.race-order li:nth-child(n+5){display:none}.race-map{display:none}.race-feed{top:150px}.race-lap{min-width:0}.race-lap-n{font-size:17px}.race-clock{font-size:20px}.race-slot{width:76px;height:76px}.race-slot svg{width:44px;height:44px}.race-slot-name{top:80px;font-size:12px}.race-turn{top:120px;font-size:34px}.race-word{font-size:46px}.race-warn{font-size:18px}}
@container race-ui (max-height:560px){.race-order li:nth-child(n+4){display:none}.race-place{bottom:96px}.race-place b{font-size:56px}.race-map{top:110px;height:100px;width:150px}.race-feed{display:none}.race-gauge b{font-size:28px}.race-lights i{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.race-slot[data-state=rolling],.race-turn,.race-warn,.race-word{animation:none}}