:root{
  --glass: rgba(20, 16, 62, .34);
  --glass-strong: rgba(20, 16, 62, .7);
  --line: rgba(170, 190, 255, .24);
  --txt: #eef2ff; --dim: #a9b4e8; --accent: #7ff3ff; --warm: #ffb347; --good: #7dffb0;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ margin:0; width:100%; height:100%; height:100dvh; overflow:hidden; overscroll-behavior:none; }   /* dvh tracks the mobile browser bars */
:root{ --sa-t:env(safe-area-inset-top, 0px); --sa-r:env(safe-area-inset-right, 0px); --sa-b:env(safe-area-inset-bottom, 0px); --sa-l:env(safe-area-inset-left, 0px); }
body{ background: radial-gradient(ellipse at 50% 40%, #1d1656 0%, #0d0a2c 55%, #05040f 100%);
  font-family:'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--txt); user-select:none; -webkit-user-select:none; }
canvas#scene{ display:block; touch-action:none; }
svg.ico{ width:1.15em; height:1.15em; vertical-align:-0.2em; flex:none; }
button{ font-family:inherit; color:var(--txt); cursor:pointer; border:none; background:none; }

#hud{ position:fixed; inset:0; pointer-events:none; transition:opacity .6s; }
#hud.off{ opacity:0; }
#hud button, #hud a, #hud .joy, #hud .pop{ pointer-events:auto; }
.glass{ background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.pop{ background:var(--glass-strong); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:opacity .25s, transform .25s; }
.pop.hidden{ display:none !important; }   /* beats id rules like #ready{display:flex} */
.pop{ animation: popin .22s ease-out; }
@keyframes popin{ from{ opacity:0; transform:translateY(-6px) scale(.97);} }

/* ---------- tiny chips ---------- */
.chip{ height:30px; padding:0 11px; border-radius:15px; font-size:12px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.chip small{ color:var(--dim); font-size:10px; }
.chip .sep{ width:1px; height:14px; background:var(--line); }

#tl{ position:absolute; top:calc(10px + var(--sa-t)); left:calc(10px + var(--sa-l)); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
#statPanel{ padding:10px 12px; min-width:190px; font-size:12px; }
.kv{ display:flex; justify-content:space-between; gap:14px; padding:2px 0; color:var(--dim); }
.kv b{ color:var(--txt); font-weight:500; }

#tc{ position:absolute; top:calc(10px + var(--sa-t)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
#destRow{ display:flex; gap:6px; }
#tName{ font-weight:600; }
#tDist{ color:var(--accent); font-size:11px; }
#autoBtn{ border-color:rgba(127,243,255,.45); }
#autoBtn.on{ background:linear-gradient(135deg,#3fd8ff,#8f6bff); box-shadow:0 0 14px rgba(127,243,255,.5); }
#destList{ width:250px; max-height:min(60vh,420px); overflow:auto; padding:6px; }
#destList button{ width:100%; display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:10px; font-size:13px; text-align:left; }
#destList button:hover, #destList button.sel{ background:rgba(127,243,255,.14); }
#destList i{ width:10px; height:10px; border-radius:50%; flex:none; }
#destList em{ font-style:normal; color:var(--dim); font-size:11px; margin-left:auto; }
#destList .tag{ font-size:10px; }
#infoChip{ border-color:rgba(125,255,176,.5); }
#card{ width:min(290px, calc(100vw - 20px)); padding:12px 14px; }
#card h3{ margin:0; font-size:19px; font-weight:600; display:flex; align-items:center; gap:8px; }
#card .type{ font-size:10px; letter-spacing:1.5px; color:var(--accent); margin:2px 0 8px; text-transform:uppercase; }
#card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:12px; }
#card dt{ color:var(--dim); } #card dd{ margin:0; text-align:right; }
#card p{ font-size:12px; line-height:1.45; margin:8px 0 0; color:#dfe5ff; }
.badge{ font-size:9px; padding:2px 6px; border-radius:7px; background:rgba(125,255,176,.2); color:var(--good); letter-spacing:1px; }

#tr{ position:absolute; top:calc(10px + var(--sa-t)); right:calc(10px + var(--sa-r)); display:flex; gap:8px; align-items:flex-start; }
#rail{ display:flex; flex-direction:column; gap:6px; }
#rail button, #rail a{ width:34px; height:34px; border-radius:11px; font-size:15px; }
#rail a{ display:flex; align-items:center; justify-content:center; color:var(--txt); text-decoration:none; }
#rail button.on{ border-color:rgba(127,243,255,.6); box-shadow:0 0 10px rgba(127,243,255,.3); }
#mapPop{ padding:6px; border-radius:50%; position:relative; }
#map{ width:170px; height:170px; border-radius:50%; display:block; }
#mapPop span{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:1.5px; color:var(--dim); background:var(--glass-strong); padding:1px 6px; border-radius:6px; white-space:nowrap; }

#toasts{ position:absolute; top:calc(84px + var(--sa-t)); transition:top .25s; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; }
.toast{ padding:6px 13px; border-radius:12px; font-size:12px; background:var(--glass-strong); border:1px solid var(--line); backdrop-filter:blur(10px);
  animation: tin .3s ease-out, tout .5s ease-in 2.6s forwards; white-space:nowrap; }
.toast.welcome{ font-size:18px; font-weight:500; padding:10px 20px; border-radius:16px; }
@media (max-width:520px){ .toast.welcome{ font-size:15px; white-space:normal; text-align:center; max-width:calc(100vw - 32px); } }
.toast.good{ border-color:rgba(125,255,176,.6); } .toast.warn{ border-color:rgba(255,90,106,.7); }
@keyframes tin{ from{ opacity:0; transform:translateY(-8px);} } @keyframes tout{ to{ opacity:0; transform:translateY(-6px);} }

#ready{ width:min(240px, calc(100vw - 32px)); padding:7px; display:flex; flex-direction:column; gap:5px; }
#ready button{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border-radius:10px; font-size:13px; text-align:left;
  background:rgba(255,255,255,.07); border:1px solid var(--line); }
#ready button:hover{ background:rgba(127,243,255,.16); border-color:rgba(127,243,255,.5); }
#rTravel{ background:linear-gradient(135deg,rgba(63,216,255,.35),rgba(143,107,255,.35)) !important; border-color:rgba(127,243,255,.55) !important; }
#ready .soon{ color:var(--dim); }
#ready small{ margin-left:4px; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:2px 6px; border-radius:7px; background:rgba(255,179,71,.2); color:var(--warm); }
#ready .rHead{ display:flex; align-items:center; justify-content:space-between; padding:0 1px 0 4px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); }
#ready .rHead button{ width:22px; height:22px; padding:0; justify-content:center; border-radius:7px; font-size:11px; }
#rDest{ margin-left:auto; padding:2px 8px; border-radius:9px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); font-weight:600; white-space:nowrap; }
#rDest:hover{ background:rgba(255,255,255,.26); }
#rDest svg{ opacity:.8; margin-left:2px; }
.rNote{ font-size:11px; line-height:1.4; color:var(--dim); padding:2px 4px; }
.rNote.hidden{ display:none; }

/* ---------- controls ---------- */
.bottom{ position:absolute; left:calc(12px + var(--sa-l)); right:calc(12px + var(--sa-r)); bottom:calc(14px + var(--sa-b)); display:flex; justify-content:space-between; align-items:flex-end; gap:8px; flex-direction:row-reverse; }   /* fly stick on the right, speed controls on the left */
.flycol > .cluster, .rightcol .cluster{ flex-direction:row-reverse; }   /* mirror inner order so the big controls stay at the screen edges */
.cluster{ display:flex; align-items:flex-end; gap:10px; }
.joy{ position:relative; width:116px; height:116px; border-radius:50%; touch-action:none; opacity:.62; transition:opacity .2s;
  background:radial-gradient(circle, rgba(127,243,255,.08) 0%, rgba(20,16,62,.32) 70%); border:1.5px solid var(--line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.joy:hover, .joy.active{ opacity:1; }
.joy.active{ border-color:rgba(127,243,255,.7); }
.joy .knob{ position:absolute; left:50%; top:50%; width:44px; height:44px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%, #fff, #c9d3ff 40%, #7470e6); box-shadow:0 0 16px rgba(127,243,255,.5); }
.joy .arr{ position:absolute; font-size:12px; line-height:0; color:rgba(220,230,255,.6); }
.joy .u{ top:6px; left:50%; transform:translateX(-50%);} .joy .d{ bottom:6px; left:50%; transform:translateX(-50%);}
.joy .l{ left:7px; top:50%; transform:translateY(-50%);} .joy .r{ right:7px; top:50%; transform:translateY(-50%);}
.joy.hand .knob{ width:38px; height:38px; background:radial-gradient(circle at 35% 30%, #fff, #ffd9b0 40%, #ff8a5c); box-shadow:0 0 14px rgba(255,170,90,.5); }
.joy.hand{ width:100px; height:100px; opacity:.85; }
.vstack{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.sq{ width:40px; height:40px; border-radius:13px; font-size:15px; touch-action:none; opacity:.8; }
.sq.on, .sq:active{ background:rgba(127,243,255,.3); border-color:rgba(127,243,255,.7); opacity:1; }
.warp{ width:64px; height:64px; border-radius:50%; font-weight:700; letter-spacing:1px; font-size:11px; touch-action:none;
  background:radial-gradient(circle at 35% 30%, rgba(160,250,255,.45), rgba(60,90,255,.3) 60%, rgba(20,16,62,.45));
  border:1.5px solid rgba(127,243,255,.55); box-shadow:0 0 16px rgba(127,243,255,.3); }
.warp.on{ box-shadow:0 0 34px rgba(127,243,255,.9); transform:scale(.95); }
.brake{ width:52px; height:32px; border-radius:11px; font-size:10px; font-weight:600; letter-spacing:1px; touch-action:none; background:rgba(255,90,106,.16); border:1px solid rgba(255,90,106,.5); }
.brake.on{ background:rgba(255,90,106,.5); }
#landBtn{ height:38px; padding:0 14px; border-radius:19px; font-weight:600; font-size:12px; letter-spacing:.5px;
  background:linear-gradient(135deg,#ffb347,#ff6a88); box-shadow:0 0 18px rgba(255,160,90,.5); display:none; }
#landBtn.show{ display:inline-flex; align-items:center; gap:6px; animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 30px rgba(255,160,90,.85); } }
.rightcol{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
#handsPanel{ padding:8px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.gest{ display:flex; gap:4px; }
.gest button{ width:32px; height:32px; border-radius:10px; font-size:15px; background:rgba(255,255,255,.06); }
.gest button.on{ background:rgba(255,179,71,.3); box-shadow:0 0 10px rgba(255,179,71,.4); }
.seg{ display:flex; background:rgba(255,255,255,.06); border-radius:10px; padding:2px; }
.seg button{ font-size:11px; padding:4px 10px; border-radius:8px; color:var(--dim); }
.seg button.on{ background:rgba(255,179,71,.32); color:var(--txt); }
.hhead{ width:100%; display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:1.5px; color:var(--dim); }
.hhead span{ margin-right:auto; }
.hhead button{ width:24px; height:24px; border-radius:8px; background:rgba(255,255,255,.08); font-size:13px; line-height:1; }
.hhead button:active{ background:rgba(255,255,255,.2); }
#handsPanel.mini{ padding:6px 8px; gap:5px; }
#handsPanel.mini .seg, #handsPanel.mini .joy{ display:none; }
.gest.hidden{ display:none; }
#gestBtn.on{ background:rgba(255,179,71,.3); }
#spdCtl{ pointer-events:auto; touch-action:none; width:64px; padding:7px 4px 8px; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align: center;}
#spdCtl .spdHead{ font-size:8px; letter-spacing:1.2px; color:var(--dim); }
#spdMode{ font-size:9px; letter-spacing:1.5px; font-weight:600; color:var(--accent); }
#spdMode.auto{ color:var(--warm); }
#spdTrack{ position:relative; width:8px; height:104px; margin:6px 0; border-radius:4px; background:rgba(255,255,255,.12); cursor:ns-resize; }
#spdTrack::before{ content:''; position:absolute; inset:-10px -22px; }   /* bigger touch target */
#spdFill{ position:absolute; left:0; right:0; bottom:0; border-radius:4px; background:linear-gradient(to top,#3fd8ff,#8f6bff,#ff6ad5); }
#spdThumb{ position:absolute; left:50%; width:20px; height:20px; border-radius:50%; transform:translate(-50%,50%);
  background:radial-gradient(circle at 35% 30%, #fff, #c9d3ff 45%, #7470e6); box-shadow:0 0 10px rgba(127,243,255,.6); }
#spdVal{ font-size:11px; font-weight:600; white-space:nowrap; }
#nextBtn{ display:flex; align-items:center; justify-content:center; color:var(--accent); border-color:rgba(127,243,255,.55) !important; box-shadow:0 0 10px rgba(127,243,255,.3); }
#nextBtn svg{ width:20px; height:20px; }
#nextBtn.hidden{ display:none; }
#fsBtn{ display:flex; align-items:center; justify-content:center; }
#fsBtn.hidden{ display:none; }
#handsBtn{ width:40px; height:40px; border-radius:13px; font-size:18px; }
#handsBtn.on{ border-color:rgba(255,179,71,.7); }

/* ---------- labels ---------- */
#labels{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.lbl{ position:absolute; left:0; top:0; white-space:nowrap; font-size:10px; color:#dfe6ff; display:flex; align-items:center; gap:4px;
  text-shadow:0 1px 3px rgba(0,0,0,.8); pointer-events:auto; cursor:pointer; opacity:.85; }
.lbl i{ width:6px; height:6px; border-radius:50%; display:inline-block; box-shadow:0 0 6px currentColor; }
.lbl em{ font-style:normal; color:var(--accent); }
.lbl.sel{ font-size:11px; opacity:1; color:#fff; }
.lbl.sel i{ width:8px; height:8px; outline:1.5px solid var(--accent); outline-offset:2px; }
.lbl .ck{ display:none; color:var(--good); } .lbl.done .ck{ display:inline-flex; }
#tArrow{ position:fixed; left:0; top:0; width:30px; height:30px; display:none; pointer-events:none; filter:drop-shadow(0 0 6px rgba(127,243,255,.8)); }

/* ---------- intro ---------- */
#intro{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(5,4,20,.35); transition:opacity .5s; z-index:5; }
#intro.hide{ opacity:0; pointer-events:none; }
#intro .box{ max-width:560px; width:100%; padding:22px; max-height:92vh; overflow:auto; border-radius:18px; }
#intro h1{ margin:0; font-size:38px; line-height:1; letter-spacing:2px; background:linear-gradient(90deg,#7ff3ff,#b69cff 50%,#ff9ad5); -webkit-background-clip:text; background-clip:text; color:transparent; }
#intro .sub{ color:var(--dim); margin:8px 0 12px; font-size:13.5px; line-height:1.45; }
.legend{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; font-size:12px; }
.legend h4{ margin:4px 0 2px; font-size:10.5px; letter-spacing:2px; color:var(--accent); font-weight:500; }
.legend div{ display:flex; justify-content:space-between; gap:8px; color:#dbe2ff; }
kbd{ font-family:inherit; font-size:10.5px; padding:0 5px; border-radius:5px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.launch{ margin-top:14px; width:100%; height:48px; border-radius:15px; font-size:16px; font-weight:600; letter-spacing:2px;
  background:linear-gradient(135deg,#3fd8ff,#8f6bff 60%,#ff6ad5); box-shadow:0 0 26px rgba(127,243,255,.4); }

/* ---------- start screen: brand, 5 s loader (astronaut orbiting the %), Let's start ---------- */
#gate{ position:fixed; inset:0; z-index:50; display:flex; color:#eef2ff; transition:opacity .6s ease, transform .6s ease; }
#gate.out{ opacity:0; transform:scale(1.04); pointer-events:none; }
#gate.gone{ display:none; }
.gSky{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(120% 85% at 50% 0%, #1b1452 0%, #0a0822 55%, #05040f 100%); }
.gSky i{ position:absolute; display:block; }
.aur{ border-radius:50%; mix-blend-mode:screen; animation:aurDrift 16s ease-in-out infinite alternate; }
.aur.a1{ width:75vmax; height:75vmax; top:-32vmax; left:-24vmax; background:radial-gradient(circle, rgba(124,58,237,.7), transparent 62%); }
.aur.a2{ width:70vmax; height:70vmax; bottom:-34vmax; right:-22vmax; background:radial-gradient(circle, rgba(34,211,238,.5), transparent 62%); animation-delay:-5s; }
.aur.a3{ width:52vmax; height:52vmax; top:28%; left:52%; background:radial-gradient(circle, rgba(236,72,153,.38), transparent 62%); animation-delay:-10s; animation-duration:20s; }
@keyframes aurDrift{ to{ transform:translate(6vmax,4vmax) scale(1.12); } }
.stars{ inset:0; background-repeat:repeat; }
.stars.s1{ background-size:230px 230px; background-image:
  radial-gradient(1.3px 1.3px at 24px 38px,#fff 50%,transparent 51%), radial-gradient(1px 1px at 120px 90px,#c7d2fe 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 190px 170px,#fff 50%,transparent 51%), radial-gradient(1px 1px at 70px 200px,#a5f3fc 50%,transparent 51%); }
.stars.s2{ background-size:370px 370px; animation:twinkle 3.6s ease-in-out infinite alternate; background-image:
  radial-gradient(1.8px 1.8px at 60px 120px,#fff 50%,transparent 51%), radial-gradient(1.2px 1.2px at 300px 60px,#f9a8d4 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 230px 300px,#fff 50%,transparent 51%); }
@keyframes twinkle{ to{ opacity:.25; } }

.gHome{ position:absolute; z-index:3; top:max(14px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; color:#eef2ff; text-decoration:none; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  transition:background .2s, transform .2s; }
.gHome svg{ width:20px; height:20px; }
.gHome:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
.gHome:focus-visible{ outline:2px solid #a5f3fc; outline-offset:3px; }
.gWrap{ position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3vh,28px);
  padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y:auto; text-align:center; }
.gHead{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.gLogo{ width:clamp(44px,7vh,60px); height:auto; filter:drop-shadow(0 0 16px rgba(167,139,250,.55)); animation:gFloat 4s ease-in-out infinite; }
@keyframes gFloat{ 50%{ transform:translateY(-5px) rotate(-4deg); } }
.gTitle{ margin:0; font-family:'Orbitron', 'Fredoka', sans-serif; font-weight:900; font-size:clamp(30px, 8.5vw, 66px); line-height:1.05; letter-spacing:.04em; text-transform:uppercase;
  background:linear-gradient(90deg,#a5f3fc,#818cf8 30%,#c084fc 55%,#f472b6 80%,#a5f3fc); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gShine 7s linear infinite; filter:drop-shadow(0 4px 22px rgba(129,140,248,.35)); }
.gTitle span{ display:inline-block; }
@keyframes gShine{ to{ background-position:-200% 0; } }
.gDesc{ margin:0; max-width:500px; font-size:clamp(13.5px, 3.6vw, 16px); line-height:1.55; color:#b8c0ec; }

.gStage{ display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2.2vh,18px); }
.gRotate{ display:none; margin:0; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:13px; color:#c7d2fe;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.gRotate svg{ width:16px; height:16px; color:#67e8f9; animation:tilt 2.4s ease-in-out infinite; }
@keyframes tilt{ 0%,20%{ transform:rotate(0deg); } 50%,75%{ transform:rotate(-90deg); } 100%{ transform:rotate(0deg); } }
@media (pointer:coarse) and (orientation:portrait){ .gRotate{ display:inline-flex; } }

/* the 3D loader: the game's own rocket and astronaut orbit a glowing core (three.js, ui/startScreen.js) */
.gOrbit{ --ow:min(86vw, 380px, 46vh); position:relative; width:var(--ow); height:calc(var(--ow) * .62); }
.gOrbit canvas{ position:absolute; left:-15%; top:-30%; width:130%; height:160%; display:block; opacity:0; transition:opacity .9s ease; }
.gOrbit canvas.on{ opacity:1; }
/* the % before the 3D scene is ready. Until the game code runs it is a CSS rolling counter (transform-only, so it keeps
   going while the page is busy loading); then ui/startScreen.js shows the live number (.js), and later the scene draws it. */
.pctHtml{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:baseline; pointer-events:none; transition:opacity .7s ease;
  font-family:'Orbitron', sans-serif; font-size:calc(var(--ow) * .1); line-height:1; }
.pctHtml.off{ opacity:0; }
.pctHtml b{ font-weight:900; color:#fff; text-shadow:0 0 14px rgba(165,243,252,.9); font-variant-numeric:tabular-nums; }
.pctHtml small{ font-weight:700; font-size:.45em; margin-left:2px; color:#e9d5ff; }
.pctHtml .roll{ display:flex; animation:pShift .5s steps(1, end) forwards; }
.pctHtml .dg{ display:block; width:.74em; height:1em; overflow:hidden; }
.pctHtml .dg i{ display:block; font-style:normal; will-change:transform; }
.pctHtml .dg b{ display:block; height:1em; text-align:center; }
.pctHtml .dg.o i{ animation:pOnes .5s steps(10, end) 9 forwards; }   /* 1% every 50 ms, up to 90% */
.pctHtml .dg.t i{ animation:pTens 4.5s steps(9, end) forwards; }
.pctHtml .num{ display:none; }
.pctHtml.js .roll{ display:none; } .pctHtml.js .num{ display:inline; }
@keyframes pOnes{ to{ transform:translateY(-10em); } }
@keyframes pTens{ to{ transform:translateY(-9em); } }
@keyframes pShift{ from{ transform:translateX(-.37em); } to{ transform:none; } }   /* centred while the tens digit is still blank */
.gOrbit .halo{ position:absolute; left:50%; top:50%; width:calc(var(--ow) * .62); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,.45), rgba(99,102,241,.18) 45%, transparent 70%); }
.gOrbit.done .halo{ animation:haloPulse 1.8s ease-in-out infinite; }
@keyframes haloPulse{ 50%{ transform:translate(-50%,-50%) scale(1.15); opacity:.8; } }

.gLoad{ margin:0; font-size:clamp(13px,3.4vw,15px); letter-spacing:.4px; font-weight:500;
  background:linear-gradient(90deg,#8b93c9 0%,#8b93c9 35%,#fff 50%,#8b93c9 65%,#8b93c9 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gSweep 2.2s linear infinite; }
@keyframes gSweep{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }
#gStart{ position:relative; overflow:hidden; height:50px; padding:0 30px; border-radius:25px; display:inline-flex; align-items:center; gap:10px;
  font-size:16px; font-weight:600; letter-spacing:.6px; color:#fff; background:linear-gradient(135deg,#22d3ee,#6366f1 50%,#d946ef);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px -6px rgba(99,102,241,.7), 0 0 26px rgba(217,70,239,.35);
  animation:gIn .5s cubic-bezier(.2,.9,.3,1.3) both; transition:transform .15s ease, box-shadow .15s ease; }
#gStart svg{ width:18px; height:18px; }
#gStart::after{ content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); animation:gGlint 2.8s ease-in-out 1s infinite; }
#gStart:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 14px 34px -6px rgba(99,102,241,.85), 0 0 34px rgba(217,70,239,.5); }
#gStart:active{ transform:translateY(0) scale(.97); }
#gStart:focus-visible{ outline:2px solid #a5f3fc; outline-offset:3px; }
#gStart.hidden, .gLoad.hidden{ display:none; }
/* fullscreen popup: shown when the loader completes (if fullscreen is available and off), before Let's start */
.gFs{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(5,4,15,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:gFsIn .3s ease both; }
.gFs.hidden{ display:none; }
@keyframes gFsIn{ from{ opacity:0; } }
.gFsCard{ width:min(340px, 100%); display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 22px 20px; border-radius:22px; text-align:center;
  background:rgba(20,16,58,.78); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px -20px rgba(99,102,241,.55); animation:gIn .4s cubic-bezier(.2,.9,.3,1.3) both; }
.gFsIcon{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff;
  background:linear-gradient(135deg,#22d3ee,#6366f1 50%,#d946ef); box-shadow:0 10px 24px -8px rgba(99,102,241,.8); }
.gFsCard h2{ margin:4px 0 0; font-family:'Orbitron', 'Fredoka', sans-serif; font-weight:900; font-size:20px; letter-spacing:.03em; }
.gFsCard p{ margin:0; color:#b8c0ec; font-size:14.5px; }
.gFsBtns{ display:flex; flex-direction:column; gap:8px; width:100%; margin-top:8px; }
.gFsBtns button{ height:46px; border-radius:23px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:15px; font-weight:600; color:#fff; cursor:pointer; transition:transform .15s ease; }
.gFsBtns button svg{ width:17px; height:17px; }
#gFsGo{ background:linear-gradient(135deg,#22d3ee,#6366f1 50%,#d946ef); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 26px -8px rgba(99,102,241,.75); }
#gFsGo:disabled{ opacity:.7; }
.gFsBtns .ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.gFsBtns button:active{ transform:scale(.97); }
.gFsBtns button:focus-visible{ outline:2px solid #a5f3fc; outline-offset:3px; }
@media (orientation:landscape) and (max-height:540px){ .gFsCard{ padding:18px 20px 16px; gap:8px; } .gFsBtns{ flex-direction:row; } .gFsBtns button{ flex:1; } }
@keyframes gIn{ from{ opacity:0; transform:translateY(8px) scale(.9); } }
@keyframes gGlint{ 0%{ left:-60%; } 45%,100%{ left:130%; } }

/* phones held sideways: brand on the left, loader on the right */
@media (orientation:landscape) and (max-height:540px){
  .gWrap{ flex-direction:row; gap:6vw; }
  .gHead{ align-items:flex-start; text-align:left; max-width:44vw; }
  .gTitle{ font-size:clamp(26px, 5.4vw, 46px); }
  .gDesc{ font-size:13.5px; }
  .gOrbit{ --ow:min(40vw, calc((100vh - 150px) / .62), 360px); }
}
@media (prefers-reduced-motion:reduce){ .aur, .stars.s2, .gTitle, .gLogo, .gLoad, #gStart::after{ animation:none; } }

/* short screens (phones in landscape): compact tool rail, and keep the fly stick out of the rail's column */
@media (max-height:520px){
  #rail{ gap:4px; }
  #rail button, #rail a{ width:28px; height:28px; border-radius:9px; font-size:12px; }
  #nextBtn svg{ width:16px; height:16px; }
  .bottom{ right:calc(48px + var(--sa-r)); }   /* rail: 10px inset + 28px wide + 10px gap */
}

@media (max-width:520px){
  #tc{ top:calc(48px + var(--sa-t)); } #toasts{ top:calc(122px + var(--sa-t)); }
  .joy{ width:104px; height:104px; } .joy .knob{ width:40px; height:40px; } #recenterBtn{ width:104px; }
  .legend{ grid-template-columns:1fr; } #intro h1{ font-size:30px; }
  #map{ width:130px; height:130px; }
}

/* ---------- re-center button (count badge) and fixed speed cap ---------- */
.flycol{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }   /* fly stick + climb/dive, Re-center underneath */
#recenterBtn{ position:relative; width:116px; height:32px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--accent); border-color:rgba(127,243,255,.45); touch-action:manipulation; }
#recenterBtn svg{ width:15px; height:15px; }
#recenterBtn:active:not(:disabled){ background:rgba(127,243,255,.25); }
#recenterBtn .cnt{ position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; background:var(--accent); color:#0d0a2c; box-shadow:0 0 8px rgba(127,243,255,.6); }
#recenterBtn:disabled{ opacity:.35; cursor:default; }
#recenterBtn:disabled .cnt{ background:var(--dim); box-shadow:none; }
#spdCtl.locked{ cursor:default; }
#spdCtl.locked #spdTrack{ cursor:default; }
#spdCtl.locked #spdThumb{ background:radial-gradient(circle at 35% 30%, #fff, #ffd9b0 45%, #ffb347); box-shadow:0 0 10px rgba(255,179,71,.6); }
#spdCtl.locked #spdMode{ color:var(--warm); }

/* ---------- multiplayer: room panel, roster, race HUD ---------- */
.chip.hidden{ display:none; }
#roomChip{ border-color:rgba(127,243,255,.45); }
#mpPanel, #raceResults{ width:min(270px, calc(100vw - 32px)); padding:9px; display:flex; flex-direction:column; gap:7px; font-size:13px; }
#mpPanel .rHead, #raceResults .rHead{ display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:1.5px; color:var(--dim); padding-left:2px; }
#mpPanel .rHead button, #raceResults .rHead button{ width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
#mpJoin, #mpRoom{ display:flex; flex-direction:column; gap:7px; }
#mpJoin.hidden, #mpRoom.hidden, #mpHost.hidden{ display:none; }
#mpJoin label{ font-size:11px; color:var(--dim); padding-left:2px; }
#mpPanel input, #mpPanel select{ font:inherit; color:var(--txt); background:rgba(255,255,255,.08); border:1px solid var(--line); border-radius:10px; padding:8px 10px; outline:none; min-width:0; }
#mpPanel input:focus, #mpPanel select:focus{ border-color:rgba(127,243,255,.6); }
#mpPanel select option{ color:#111; }
#mpCode{ flex:1; text-transform:uppercase; letter-spacing:3px; font-weight:600; text-align:center; }
#mpPanel button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:10px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid var(--line); }
#mpPanel button:disabled{ opacity:.45; cursor:default; }
#mpPanel .mpPrimary{ background:linear-gradient(135deg,#3fd8ff,#8f6bff); border-color:transparent; box-shadow:0 0 12px rgba(127,243,255,.35); }
.mpRow{ display:flex; gap:6px; }
.mpRow select{ flex:1; }
.mpOr{ text-align:center; font-size:11px; color:var(--dim); }
.mpErr{ min-height:0; font-size:12px; color:#ff8a96; }
.mpErr:empty, .mpHint:empty{ display:none; }
.mpHint{ font-size:11.5px; line-height:1.4; color:var(--dim); padding:0 2px; }
.mpCodeRow{ display:flex; align-items:center; justify-content:space-between; }
.mpCodeRow b{ font-size:17px; letter-spacing:3px; color:var(--accent); }
#mpRoster{ display:flex; flex-direction:column; gap:3px; }
.mpPlayer{ display:flex; align-items:center; gap:7px; padding:5px 6px; border-radius:9px; background:rgba(255,255,255,.05); }
.mpPlayer i{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 6px currentColor; flex:none; }
.mpPlayer .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpPlayer .crown{ color:var(--warm); width:14px; height:14px; }
.mpPlayer em{ margin-left:auto; font-style:normal; font-size:11px; color:var(--dim); white-space:nowrap; }
.mpPlayer.away{ opacity:.5; }
#mpPanel .mpLeave{ background:rgba(255,90,106,.12); border-color:rgba(255,90,106,.4); font-weight:500; }
#raceChip{ border-color:rgba(255,179,71,.55); font-size:12px; }
#raceChip b{ color:var(--warm); }
/* SOS: a racer out of re-centers asks friends for a nav fix */
#recenterBtn.sos{ border-color:rgba(255,90,106,.7); color:#ffd0d5; animation:sosPulse 1.4s ease-in-out infinite; }
#recenterBtn.sos:disabled{ opacity:.6; animation:none; }
#sosPrompt{ border-color:rgba(255,90,106,.7); font-size:12px; cursor:pointer; color:inherit; font-family:inherit; animation:sosPulse 1.4s ease-in-out infinite; }
#sosPrompt b{ margin-left:4px; padding:1px 8px; border-radius:9px; background:#ff5a6a; color:#fff; }
#sosPrompt svg{ width:14px; height:14px; color:#ff5a6a; }
.lbl.plbl.sos{ color:#ff8a96; animation:sosBlink 0.9s steps(2) infinite; }
.parrow.sos{ animation:sosBlink 0.9s steps(2) infinite; }
@keyframes sosPulse{ 50%{ box-shadow:0 0 18px rgba(255,90,106,.75); } }
@keyframes sosBlink{ 50%{ opacity:.35; } }
#rrList{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; }
#rrList li{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:9px; background:rgba(255,255,255,.05); }
#rrList li.me{ background:rgba(127,243,255,.14); }
#rrList li b{ width:30px; color:var(--warm); }
#rrList li i{ width:10px; height:10px; border-radius:50%; flex:none; }
#rrList li em{ margin-left:auto; font-style:normal; font-variant-numeric:tabular-nums; }
#raceCount{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); font-size:clamp(56px, 14vw, 120px); font-weight:700; letter-spacing:2px; pointer-events:none;
  background:linear-gradient(90deg,#7ff3ff,#b69cff 50%,#ff9ad5); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px rgba(127,243,255,.5)); }
#raceCount.hidden{ display:none; }
#raceCount.pop{ animation:countPop 1s ease-out; }
@keyframes countPop{ from{ transform:translate(-50%,-50%) scale(1.6); opacity:0; } 25%{ opacity:1; } to{ transform:translate(-50%,-50%) scale(1); opacity:.9; } }
/* friends: name tags and off-screen arrows */
.lbl.plbl{ pointer-events:none; font-size:11px; font-weight:600; opacity:1; }
.lbl.plbl.away{ opacity:.45; }
.parrow{ position:fixed; left:0; top:0; width:26px; height:26px; display:none; pointer-events:none; filter:drop-shadow(0 0 6px currentColor); }
.parrow svg{ width:26px; height:26px; display:block; }
.parrow span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#0d0a2c; }

/* ---------- phones / low-power (html.low-power set by core/perf.js): no live blur behind panels ---------- */
:root.low-power{ --glass: rgba(20, 16, 62, .58); --glass-strong: rgba(18, 14, 54, .88); }
.low-power .glass, .low-power .pop, .low-power .toast, .low-power .joy{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.low-power #recenterBtn.sos, .low-power #sosPrompt{ animation:sosBlink 1.4s steps(2) infinite; }
.low-power .aur{ animation:none; mix-blend-mode:normal; } .low-power .gFs{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(5,4,15,.75); } .low-power .gTitle{ filter:none; }
.low-power .joy{ background:radial-gradient(circle, rgba(127,243,255,.1) 0%, rgba(20,16,62,.5) 70%); }