/* =========================================================================
   Pedal Rush 3D - stylesheet
   All UI artwork is pure CSS + inline SVG: no icon fonts, no image sprites,
   no third-party libraries.
   ========================================================================= */
:root{
    --logo:url("../assets/img/logo.webp");
    --ink:#ffffff;
    --dim:rgba(255,255,255,.68);
    --line:rgba(255,255,255,.16);
    --glass:rgba(14,16,20,.52);
    --glass2:rgba(14,16,20,.78);
    --accent:#5E9FE8;
    --accent2:#72BC8F;
    --warn:#DE9255;
    --bad:#E97366;
    --gold:#EAC26B;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b0d10;color:var(--ink);font-family:var(--sans);}
  #app{position:fixed;inset:0;overflow:hidden}
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  #fx{pointer-events:none}
  .layer{position:absolute;inset:0;pointer-events:none}

  /* ---------- HUD ---------- */
  #hud{opacity:0;transition:opacity .45s ease}
  #hud.on{opacity:1}
  .panel{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:12px;
    backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
  }
  #topLeft{position:absolute;top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));display:flex;gap:10px;align-items:stretch}
  .posBox{padding:8px 14px 10px;display:flex;align-items:baseline;gap:4px;min-width:96px}
  .posBox b{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.02em}
  .posBox i{font-style:normal;font-size:13px;opacity:.7;font-weight:600}
  .posBox span{margin-left:auto;font-size:11px;opacity:.55;letter-spacing:.12em;text-transform:uppercase;align-self:flex-end;padding-bottom:3px}
  .lapBox{padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:104px}
  .lapBox .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .lapBox .v{font-size:18px;font-weight:650;letter-spacing:-.01em}
  .lapBox .v small{font-size:12px;opacity:.6;font-weight:500}

  #topRight{position:absolute;top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));display:flex;gap:8px;pointer-events:auto}
  .iconBtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--glass);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .12s ease,background .2s ease}
  .iconBtn:hover{background:rgba(30,34,42,.75)}
  .iconBtn:active{transform:scale(.94)}
  .iconBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  #timeBox{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:7px 16px;text-align:center}
  #timeBox .t{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.01em}
  #timeBox .d{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:1px}
  #sectionTag{position:absolute;top:calc(74px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);
    background:rgba(10,12,16,.42);border:1px solid var(--line);border-radius:999px;padding:4px 14px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s ease}
  #sectionTag.on{opacity:1}

  /* progress rail */
  #progWrap{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));width:min(420px,52vw);}
  #progRail{height:4px;border-radius:99px;background:rgba(255,255,255,.18);position:relative;overflow:visible}
  #progFill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),#a9d3ff);width:0%}
  .cp{position:absolute;top:-3px;width:2px;height:10px;border-radius:2px;background:rgba(255,255,255,.4)}
  .cp.hit{background:var(--accent2)}
  #progDot{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(94,159,232,.45),0 2px 6px rgba(0,0,0,.5);margin-left:-6px}
  #progLbl{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}

  /* speed + stamina */
  #speedBox{position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));text-align:right}
  #speedVal{font-size:60px;font-weight:700;line-height:.86;letter-spacing:-.045em;font-variant-numeric:tabular-nums;text-shadow:0 3px 18px rgba(0,0,0,.45)}
  #speedUnit{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:5px}
  #staminaWrap{margin-top:12px;width:172px;margin-left:auto}
  #staminaTop{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
  #staminaRail{height:7px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
  #staminaFill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#72BC8F,#c8f0d8);transition:background .25s ease}
  #staminaFill.low{background:linear-gradient(90deg,#E97366,#f0a79d)}
  #staminaFill.boost{background:linear-gradient(90deg,#EAC26B,#fff0c8)}
  #staminaFill.energy{background:linear-gradient(90deg,#46E0FF,#d8fbff)}
  #puRow{display:flex;gap:6px;margin-top:7px;justify-content:flex-end;min-height:20px;pointer-events:none}
  .puChip{display:none;font:800 10px/1 ui-sans-serif,system-ui;letter-spacing:.09em;padding:5px 9px;border-radius:99px;
    text-transform:uppercase;align-items:center;gap:5px;
    background:rgba(255,178,63,.20);border:1px solid rgba(255,178,63,.62);color:#ffd9a0;
    box-shadow:0 0 14px rgba(255,178,63,.28)}
  .puChip b{font-weight:900;font-variant-numeric:tabular-nums}
  .puChip.on{display:inline-flex}
  .puChip.e{background:rgba(70,224,255,.16);border-color:rgba(70,224,255,.58);color:#cdf6ff;
    box-shadow:0 0 14px rgba(70,224,255,.24)}

  /* mini standings */
  #standings{position:absolute;left:calc(16px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));padding:10px 12px;min-width:172px;display:flex;flex-direction:column;gap:6px}
  .srow{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1}
  .srow .n{width:14px;color:var(--dim);font-variant-numeric:tabular-nums}
  .srow .sw{width:8px;height:8px;border-radius:2px;flex:none}
  .srow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
  .srow .gp{font-variant-numeric:tabular-nums;font-size:11px;color:var(--dim)}
  .srow.me{font-weight:700}
  .srow.me .nm,.srow.me .gp{opacity:1;color:#fff}

  /* countdown + banners */
  #countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
  #cdNum{font-size:clamp(90px,17vw,190px);font-weight:800;letter-spacing:-.05em;opacity:0;transform:scale(1.5);
    text-shadow:0 10px 60px rgba(0,0,0,.55);color:#fff}
  #cdNum.pop{animation:cdpop .82s cubic-bezier(.2,.9,.25,1) forwards}
  @keyframes cdpop{0%{opacity:0;transform:scale(1.7)}18%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.16)}}
  #banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-size:clamp(26px,5vw,46px);font-weight:750;letter-spacing:-.02em;opacity:0;text-shadow:0 6px 34px rgba(0,0,0,.6)}
  #banner.show{animation:bshow 1.5s ease forwards}
  @keyframes bshow{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}16%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.02)}}
  #toast{position:absolute;left:50%;top:calc(50% + 90px);transform:translateX(-50%);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
    padding:6px 16px;border-radius:999px;background:rgba(10,12,16,.55);border:1px solid var(--line);opacity:0;backdrop-filter:blur(10px)}
  #toast.show{animation:tshow 1.5s ease forwards}
  @keyframes tshow{0%{opacity:0;transform:translate(-50%,8px)}20%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}

  /* ---------- Screens ---------- */
  .screen{position:absolute;inset:0;display:none;place-items:center;pointer-events:auto;
    background:radial-gradient(120% 100% at 50% 0%,rgba(8,10,14,.35),rgba(6,8,11,.9));
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:24px}
  .screen.on{display:grid;animation:fade .45s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .card{width:min(560px,94vw);border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(24,27,33,.92),rgba(14,16,20,.94));
    padding:30px 30px 26px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
  .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
  h1{margin:0;font-size:clamp(32px,5.4vw,46px);letter-spacing:-.03em;font-weight:750;line-height:1.02}
  h1 span{color:var(--dim);font-weight:350}
  .sub{margin:12px 0 0;color:var(--dim);font-size:15px;line-height:1.55;max-width:44ch}
  .btnRow{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
  button.btn{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;padding:13px 22px;border-radius:11px;
    border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;min-height:44px;transition:transform .12s,background .2s,border-color .2s}
  button.btn:hover{background:rgba(255,255,255,.12)}
  button.btn:active{transform:scale(.97)}
  button.btn.primary{background:linear-gradient(180deg,#68a9ee,#3b7fd0);border-color:rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(45,110,190,.35)}
  button.btn.primary:hover{background:linear-gradient(180deg,#7ab6f4,#4a8cd8)}
  button.btn:focus-visible{outline:2px solid #9ecbff;outline-offset:2px}
  .metaGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px}
  .metaGrid div{background:rgba(16,18,23,.96);padding:13px 14px}
  .metaGrid .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .metaGrid .v{font-size:20px;font-weight:680;margin-top:5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .keys em{font-style:normal;font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px}
  kbd{font-family:var(--sans);font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line);
    border-bottom-width:2px;border-radius:6px;padding:3px 7px;min-width:24px;text-align:center;display:inline-block}
  .resultList{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .resultList .r{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;background:rgba(16,18,23,.96);border-top:1px solid var(--line)}
  .resultList .r:first-child{border-top:none}
  .resultList .r.me{background:rgba(94,159,232,.14)}
  .resultList .r .p{width:22px;color:var(--dim);font-variant-numeric:tabular-nums}
  .resultList .r .sw{width:9px;height:9px;border-radius:2px}
  .resultList .r .nm{flex:1}
  .resultList .r .tm{font-variant-numeric:tabular-nums;color:var(--dim)}
  .rewards{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
  .chip{font-size:11px;letter-spacing:.06em;padding:6px 11px;border-radius:999px;border:1px solid rgba(234,194,107,.4);background:rgba(234,194,107,.12);color:var(--gold)}
  .chip.blue{border-color:rgba(94,159,232,.4);background:rgba(94,159,232,.13);color:#a8cdf5}
  /* ---------- 3D start screen ---------- */
  #screenStart{overflow:hidden;background:
    radial-gradient(90% 60% at 50% 112%,rgba(94,159,232,.28),transparent 70%),
    radial-gradient(120% 90% at 50% -6%,rgba(46,92,152,.55),rgba(7,9,13,.93) 62%),
    linear-gradient(180deg,#0a0e14,#05070a)}
  /* animated arena floor + light sweep behind the panel */
  #screenStart::before{content:'';position:absolute;left:-20%;right:-20%;bottom:-14%;height:62%;
    background:repeating-linear-gradient(90deg,rgba(120,180,255,.16) 0 2px,transparent 2px 64px),
      repeating-linear-gradient(0deg,rgba(120,180,255,.13) 0 2px,transparent 2px 52px);
    transform:perspective(520px) rotateX(74deg);transform-origin:50% 100%;
    mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 78%);
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 78%);
    animation:gridRun 6s linear infinite;pointer-events:none}
  @keyframes gridRun{to{background-position:0 52px,0 52px}}
  #screenStart::after{content:'';position:absolute;inset:-30% -10%;pointer-events:none;
    background:conic-gradient(from 0deg at 50% 42%,transparent 0deg,rgba(120,180,255,.10) 18deg,transparent 40deg,transparent 180deg,rgba(234,194,107,.08) 200deg,transparent 226deg);
    animation:sweep 14s linear infinite}
  @keyframes sweep{to{transform:rotate(360deg)}}
  #screenStart .card{position:relative;z-index:2;width:min(720px,94vw);text-align:center;perspective:1200px;
    padding:34px 30px 30px;border-radius:22px;
    border:1px solid rgba(150,190,240,.22);
    background:linear-gradient(180deg,rgba(26,34,48,.82),rgba(11,15,22,.90));
    box-shadow:0 30px 80px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.16) inset,
      0 0 60px rgba(60,120,200,.18);
    backdrop-filter:blur(14px) saturate(1.1)}
  /* gold top rail */
  #screenStart .card>.rail{position:absolute;top:-1px;left:12%;right:12%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(234,194,107,.95),rgba(160,205,255,.95),transparent)}
  .badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;margin-bottom:14px;
    font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#f0dcae;
    border:1px solid rgba(234,194,107,.42);background:linear-gradient(180deg,rgba(234,194,107,.18),rgba(234,194,107,.06));
    box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25)}
  .badge i{width:5px;height:5px;border-radius:50%;background:#eac26b;box-shadow:0 0 8px #eac26b;animation:pulseDot 1.8s ease-in-out infinite}
  @keyframes pulseDot{50%{opacity:.35}}
  .footHint{margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(210,225,245,.42)}
  .logo3d{width:122px;height:122px;margin:0 auto 4px;transform-style:preserve-3d;
    animation:logoSpin 9s ease-in-out infinite;filter:drop-shadow(0 16px 28px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(94,159,232,.5))}
  @keyframes logoSpin{0%{transform:rotateY(-16deg) rotateX(10deg)}50%{transform:rotateY(16deg) rotateX(4deg)}100%{transform:rotateY(-16deg) rotateX(10deg)}}
  .logo3d svg{width:100%;height:100%;display:block}
  .logo3d .spin{transform-origin:50% 50%;animation:wheelRoll 3.4s linear infinite}
  @keyframes wheelRoll{to{transform:rotate(360deg)}}
  .title3d{transform-style:preserve-3d;transform:rotateX(16deg);margin:2px 0 4px}
  .title3d .line{font-weight:900;letter-spacing:-.02em;line-height:.92;text-transform:uppercase;
    background:linear-gradient(180deg,#ffffff 4%,#cfe4ff 38%,#7fb0ee 62%,#2f6fbd 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 0 rgba(20,36,60,.9)) drop-shadow(0 5px 0 rgba(12,22,38,.75)) drop-shadow(0 12px 20px rgba(0,0,0,.7))}
  .title3d .l1{font-size:clamp(38px,8vw,76px);text-shadow:0 0 38px rgba(120,180,255,.35)}
  .title3d .l2{font-size:clamp(27px,5.6vw,52px);letter-spacing:.02em;
    background:linear-gradient(180deg,#ffe9bf 6%,#eac26b 44%,#b07f31 100%);
    -webkit-background-clip:text;background-clip:text}
  .title3d .rule{height:2px;width:62%;margin:12px auto 0;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(94,159,232,.9),rgba(234,194,107,.9),transparent)}
  #screenStart .eyebrow{color:#9dc4f2}
  #screenStart .sub{max-width:520px;margin-left:auto;margin-right:auto}
  #screenStart .diffRow,#screenStart .keys{justify-content:center}
  #screenStart .btnRow{justify-content:center}
  /* extruded 3D buttons */
  #screenStart button.btn,#screenStart .diffRow button{transform-style:preserve-3d;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
  #screenStart button.btn.primary{position:relative;overflow:hidden;font-size:17px;padding:18px 46px;border-radius:16px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;
    color:#06131f;text-shadow:0 1px 0 rgba(255,255,255,.45);
    background:linear-gradient(180deg,#d8ecff 0%,#8cc2f8 22%,#4a8cd8 62%,#2b62a6 100%);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 7px 0 #1e4b80,0 12px 0 #133257,0 22px 40px rgba(20,60,110,.6),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 8px rgba(0,30,70,.35)}
  #screenStart button.btn.primary::after{content:'';position:absolute;top:0;bottom:0;width:42%;left:-60%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    animation:shine 3.6s ease-in-out infinite}
  @keyframes shine{0%{left:-60%}55%{left:130%}100%{left:130%}}
  #screenStart button.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #1e4b80,0 13px 0 #163a63,0 26px 40px rgba(20,60,110,.6),inset 0 1px 0 rgba(255,255,255,.55)}
  #screenStart button.btn.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #1e4b80,0 3px 0 #163a63,0 8px 16px rgba(20,60,110,.5),inset 0 1px 0 rgba(255,255,255,.35)}
  #screenStart .diffRow{gap:12px;margin-top:22px}
  #screenStart .diffRow button{border-radius:14px;font-weight:700;padding:13px 8px;
    display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
    box-shadow:0 4px 0 rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18)}
  #screenStart .diffRow button:hover{transform:translateY(-1px)}
  #screenStart .diffRow button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.3)}
  #screenStart .diffRow button b{font-size:13px;letter-spacing:.06em;text-transform:uppercase}
  #screenStart .diffRow button s{text-decoration:none;font-size:10px;letter-spacing:.12em;opacity:.65}
  #screenStart .diffRow button.sel{background:linear-gradient(180deg,#9ec8f5,#3f7fc8);color:#fff;border-color:rgba(255,255,255,.45);
    box-shadow:0 5px 0 #1f4a7c,0 11px 22px rgba(30,80,140,.55),inset 0 2px 0 rgba(255,255,255,.6)}
  #screenStart .diffRow button.sel s{opacity:.85}
  .diffRow{display:flex;gap:8px;margin-top:18px}
  .diffRow button{flex:1;padding:11px 8px;font-size:12.5px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--dim);cursor:pointer;font-family:var(--sans);min-height:44px}
  .diffRow button.sel{background:rgba(94,159,232,.16);border-color:rgba(94,159,232,.5);color:#fff;font-weight:650}

  /* ---------- touch controls ---------- */
  #touch{position:absolute;inset:0;display:none}
  #touch.on{display:block}
  .tpad{position:absolute;bottom:calc(92px + env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;
    border:1px solid rgba(255,255,255,.26);background:rgba(12,14,18,.44);backdrop-filter:blur(10px);pointer-events:auto;
    display:grid;place-items:center;align-content:center;gap:1px;color:#fff;touch-action:none;user-select:none;
    box-shadow:0 4px 0 rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .07s ease,background .12s ease}
  .tpad.act{background:rgba(94,159,232,.5);border-color:rgba(255,255,255,.62);transform:translateY(3px);
    box-shadow:0 1px 0 rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
  .tpad svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .tcap{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.78;font-weight:700}
  #tLeft{left:calc(16px + env(safe-area-inset-left))}
  #tRight{left:calc(112px + env(safe-area-inset-left))}
  #tBrake{right:calc(112px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom))}
  #tGas{right:calc(16px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));background:rgba(94,159,232,.34)}
  #tBoost{right:calc(16px + env(safe-area-inset-right));bottom:calc(188px + env(safe-area-inset-bottom));width:70px;height:70px;background:rgba(234,194,107,.24);border-color:rgba(234,194,107,.5)}
  @media (max-width:400px){
    .tpad{width:74px;height:74px}
    #tRight{left:calc(98px + env(safe-area-inset-left))}
    #tBrake{right:calc(98px + env(safe-area-inset-right))}
  }
  .tlabel{position:absolute;bottom:6px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

  /* ---------- compact / mobile layout ---------- */
  .metaGrid .k{white-space:nowrap}
  @media (max-width:820px), (max-height:520px){
    #topLeft{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));gap:7px}
    .posBox{padding:6px 10px 7px;min-width:74px}
    .posBox b{font-size:25px}
    .posBox span{display:none}
    .lapBox{padding:7px 10px;min-width:66px}
    .lapBox .v{font-size:15px}
    #topRight{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));gap:6px}
    .iconBtn{width:38px;height:38px;border-radius:10px}
    #timeBox{top:calc(62px + env(safe-area-inset-top));padding:5px 12px}
    #timeBox .t{font-size:15px}
    #timeBox .d{font-size:9px}
    #sectionTag{top:calc(112px + env(safe-area-inset-top));font-size:10px;padding:3px 11px}
    #speedVal{font-size:40px}
    #speedUnit{font-size:9px;margin-top:3px}
    #staminaWrap{width:118px;margin-top:8px}
    #standings{padding:7px 9px;min-width:132px;gap:4px;bottom:calc(56px + env(safe-area-inset-bottom))}
    .srow{font-size:10.5px}
    .srow .gp{font-size:9.5px}
    #progWrap{width:min(300px,64vw);bottom:calc(12px + env(safe-area-inset-bottom))}
    #progLbl{font-size:9px;margin-bottom:5px}
    #speedBox{bottom:calc(12px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right))}
  }
  @media (max-width:560px){
    #standings .srow:nth-child(n+5){display:none}
    #progWrap{display:none}
    #standings{bottom:calc(190px + env(safe-area-inset-bottom))}
    #speedBox{bottom:calc(262px + env(safe-area-inset-bottom))}
    #speedVal{font-size:34px}
  }
  /* ==========================================================
     PREMIUM 3D TEXT + BUTTONS (global)
     ========================================================== */
  /* extruded metal-gradient headline text */
  .t3d{
    background:linear-gradient(180deg,#ffffff 5%,#e2eeff 32%,#a6c9f4 57%,#3d7ec9 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    font-weight:900;letter-spacing:-.02em;
    filter:drop-shadow(0 2px 0 rgba(9,18,32,.95)) drop-shadow(0 4px 0 rgba(9,18,32,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.6));
  }
  .t3d.gold{background:linear-gradient(180deg,#fff6e2 5%,#ffe4a8 34%,#e8b95c 60%,#a9741f 100%)}
  /* carved / extruded numerals + labels across every screen */
  .posBox b,#speedVal,#cdNum,#banner,#timeBox .t,.lapBox .v,.metaGrid .v,
  .diffRow button b,#toast,.srow .nm,#progPct{
    text-shadow:0 1px 0 rgba(255,255,255,.30),0 2px 0 rgba(7,13,22,.85),0 3px 0 rgba(7,13,22,.5),0 6px 14px rgba(0,0,0,.55);
  }
  #sectionTag,.eyebrow,.footHint,.keys em{text-shadow:0 1px 0 rgba(0,0,0,.6)}
  #cdNum{-webkit-text-stroke:1px rgba(10,18,30,.35)}

  /* --- buttons: bevelled, extruded, springy --- */
  button.btn{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.055) 52%,rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 4px 0 rgba(6,10,18,.78),0 9px 18px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.3);
    text-shadow:0 1px 0 rgba(0,0,0,.5);
    transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,background .2s ease;
  }
  button.btn:hover{transform:translateY(-2px);filter:brightness(1.08);
    box-shadow:0 6px 0 rgba(6,10,18,.78),0 14px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.45)}
  button.btn:active{transform:translateY(3px);
    box-shadow:0 1px 0 rgba(6,10,18,.78),0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28)}
  button.btn.primary{
    background:linear-gradient(180deg,#9ecdff 0%,#4f90dd 48%,#2f6cb4 100%);
    border-color:rgba(255,255,255,.42);
    box-shadow:0 5px 0 #1d4a7f,0 10px 0 rgba(11,28,50,.55),0 20px 34px rgba(18,58,110,.55),
      inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(8,26,50,.45);
  }
  button.btn.primary:hover{background:linear-gradient(180deg,#b3d9ff 0%,#5d9ce8 48%,#3878c2 100%)}

  .iconBtn{
    background:linear-gradient(180deg,rgba(42,50,64,.85),rgba(16,20,28,.85));
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 3px 0 rgba(5,9,16,.8),0 8px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.32);
  }
  .iconBtn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(5,9,16,.8),0 12px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4)}
  .iconBtn:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 rgba(5,9,16,.8),0 4px 8px rgba(0,0,0,.4)}
  .tpad{box-shadow:0 4px 0 rgba(5,9,16,.6),0 10px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3) !important}
  .tpad:active{transform:translateY(3px)}

  /* ==========================================================
     START SCREEN: logo + play button only
     ========================================================== */
  #screenStart .card{padding:22px 34px 26px;width:min(840px,95vw)}
  .logoBig{
    width:min(660px,78vw);aspect-ratio:1.4905;margin:0 auto;
    background:var(--logo) center/contain no-repeat;
    filter:drop-shadow(0 22px 34px rgba(0,0,0,.72)) drop-shadow(0 0 46px rgba(70,140,225,.45));
    animation:logoFloat 5.5s ease-in-out infinite;transform-origin:50% 60%;
  }
  @keyframes logoFloat{
    0%{transform:perspective(1200px) rotateX(7deg) rotateY(-5deg) translateY(0) scale(1)}
    50%{transform:perspective(1200px) rotateX(3deg) rotateY(5deg) translateY(-10px) scale(1.015)}
    100%{transform:perspective(1200px) rotateX(7deg) rotateY(-5deg) translateY(0) scale(1)}
  }
  #screenStart .btnRow{margin-top:14px}
  /* gold PLAY button, tuned to the logo's colour scheme */
  #screenStart .btnRow button.btn.primary.big{
    font-size:21px;padding:22px 74px;letter-spacing:.2em;color:#33200a;
    text-shadow:0 1px 0 rgba(255,255,255,.55);
    background:linear-gradient(180deg,#fff3d2 0%,#ffdc8d 24%,#f7b53a 62%,#dd8b18 100%);
    border:1px solid rgba(255,245,215,.8);
    box-shadow:0 8px 0 #a25d10,0 14px 0 rgba(58,29,4,.6),0 28px 44px rgba(120,70,10,.5),
      inset 0 2px 0 rgba(255,255,255,.85),inset 0 -3px 8px rgba(120,60,0,.35);
  }
  #screenStart .btnRow button.btn.primary.big:hover{transform:translateY(-3px);filter:brightness(1.05);
    box-shadow:0 11px 0 #a25d10,0 18px 0 rgba(58,29,4,.6),0 34px 52px rgba(120,70,10,.55),inset 0 2px 0 rgba(255,255,255,.9)}
  #screenStart .btnRow button.btn.primary.big:active{transform:translateY(6px);
    box-shadow:0 2px 0 #a25d10,0 5px 0 rgba(58,29,4,.6),0 10px 18px rgba(120,70,10,.45),inset 0 2px 0 rgba(255,255,255,.6)}
  #screenStart .footHint{margin-top:16px}

  /* ==========================================================
     SELECTION SCREEN: live gameplay demo behind a bottom panel
     ========================================================== */
  #screenSelect{
    place-items:end center;padding:0 18px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(5,8,12,.72) 0%,rgba(5,8,12,.10) 18%,
      rgba(5,8,12,0) 34%,rgba(5,8,12,.55) 62%,rgba(4,6,10,.92) 100%);
    backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;
  }
  #screenSelect .card{
    position:relative;z-index:2;width:min(940px,97vw);text-align:center;
    padding:16px 22px 18px;border-radius:20px;
    border:1px solid rgba(150,190,240,.26);
    background:linear-gradient(180deg,rgba(20,27,40,.80),rgba(8,11,17,.92));
    box-shadow:0 24px 60px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12);
  }
  #screenSelect .card>.rail{position:absolute;top:-1px;left:14%;right:14%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(234,194,107,.95),rgba(160,205,255,.95),transparent)}
  .logoMini{width:min(260px,46vw);aspect-ratio:1.4905;margin:0 auto 2px;
    background:var(--logo) center/contain no-repeat;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
  #screenSelect .eyebrow{color:#a8cbf5;margin-bottom:8px}
  #screenSelect .diffRow{justify-content:center;gap:12px;margin-top:6px}
  #screenSelect .diffRow button{
    flex:1;max-width:230px;border-radius:14px;font-weight:700;padding:12px 8px;min-height:56px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#dbe8fa;border:1px solid rgba(255,255,255,.2);
    background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04));
    box-shadow:0 4px 0 rgba(6,10,18,.75),0 9px 16px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.32);
    transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  }
  #screenSelect .diffRow button:hover{transform:translateY(-2px);filter:brightness(1.1)}
  #screenSelect .diffRow button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(6,10,18,.75),0 4px 8px rgba(0,0,0,.4)}
  #screenSelect .diffRow button b{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
  #screenSelect .diffRow button s{text-decoration:none;font-size:10px;letter-spacing:.1em;opacity:.7}
  #screenSelect .diffRow button.sel{
    color:#fff;border-color:rgba(255,255,255,.5);
    background:linear-gradient(180deg,#a9d2f8,#4a8ad6 52%,#2f6cb4);
    box-shadow:0 5px 0 #1d4a7f,0 12px 22px rgba(18,58,110,.5),inset 0 1px 0 rgba(255,255,255,.6)}
  #screenSelect .diffRow button.sel s{opacity:.9}
  #screenSelect .keys{justify-content:center;margin-top:12px}
  #screenSelect .btnRow{justify-content:center;margin-top:14px}
  #screenSelect button.btn.primary{font-size:16px;padding:16px 42px;border-radius:15px;
    text-transform:uppercase;letter-spacing:.14em;font-weight:800}
  /* live demo badge */
  #demoTag{position:absolute;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
    z-index:3;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
    font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#f3e6c6;
    border:1px solid rgba(234,194,107,.45);background:linear-gradient(180deg,rgba(20,26,38,.8),rgba(8,11,17,.8));
    box-shadow:0 4px 0 rgba(5,9,16,.6),0 10px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter:blur(10px);text-shadow:0 1px 0 rgba(0,0,0,.6)}
  #demoTag i{width:6px;height:6px;border-radius:50%;background:#e8646a;box-shadow:0 0 9px #e8646a;
    animation:pulseDot 1.6s ease-in-out infinite}
  @media (max-width:720px){
    .logoMini{width:min(200px,42vw)}
    #screenSelect .keys{display:none}
    #screenSelect .card{padding:14px 14px 16px}
    #screenSelect .diffRow button{min-height:50px}
  }

  /* ---------- final UI pass: crisp icon buttons, key hints, panels ---------- */
  .iconBtn svg{width:20px;height:20px;stroke-width:1.8;overflow:visible}
  .iconBtn .sndOff{display:none}
  .iconBtn.muted .sndOn{display:none}
  .iconBtn.muted .sndOff{display:inline}
  .iconBtn.muted{color:#9aa6b5}
  .keys kbd{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;
    border-radius:7px;border:1px solid rgba(255,255,255,.20);
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    box-shadow:0 2px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28);
    font:700 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;color:#eaf1fb}
  .keys .kico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;display:block}
  button.btn,.iconBtn,.tpad,.diffRow button{-webkit-tap-highlight-color:transparent}
  button.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

  /* ================= button system (final) =================
     One consistent, self-contained button language: primary (blue),
     accent (gold, used for PLAY), secondary (graphite) and icon buttons.
     All artwork is CSS + inline SVG, so there are no external icon fonts. */
  button.btn{position:relative;border-radius:14px;font-weight:800;letter-spacing:.045em;
    border:1px solid rgba(255,255,255,.16);color:#f2f7ff;cursor:pointer;
    padding:13px 26px;font-size:14px;text-transform:uppercase;
    background:linear-gradient(180deg,#39414f 0%,#252c38 52%,#1a202a 100%);
    box-shadow:0 6px 0 #0d1118,0 14px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .09s ease,box-shadow .09s ease,filter .15s ease}
  button.btn:hover{filter:brightness(1.08);transform:translateY(-2px);
    box-shadow:0 8px 0 #0d1118,0 18px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.26)}
  button.btn:active{transform:translateY(3px);
    box-shadow:0 2px 0 #0d1118,0 6px 12px rgba(0,0,0,.45),inset 0 2px 5px rgba(0,0,0,.35)}
  button.btn:focus-visible{outline:2px solid #9ecbff;outline-offset:3px}
  #screenStart button.btn.primary,
  #screenSelect button.btn.primary,
  button.btn.primary{border-color:rgba(190,224,255,.42);color:#f7fbff;
    background:linear-gradient(180deg,#8fc8ff 0%,#4a93ea 46%,#2568c4 100%);
    box-shadow:0 7px 0 #16457f,0 16px 30px rgba(20,70,140,.45),inset 0 1px 0 rgba(255,255,255,.55)}
  #screenStart button.btn.primary:hover,#screenSelect button.btn.primary:hover,button.btn.primary:hover{
    box-shadow:0 9px 0 #16457f,0 20px 34px rgba(20,70,140,.5),inset 0 1px 0 rgba(255,255,255,.6)}
  #screenStart button.btn.primary:active,#screenSelect button.btn.primary:active,button.btn.primary:active{
    box-shadow:0 2px 0 #16457f,0 8px 14px rgba(20,70,140,.4),inset 0 2px 6px rgba(0,0,0,.3)}
  button.btn.big{padding:17px 46px;font-size:17px;border-radius:16px;letter-spacing:.10em}
  /* PLAY: gold accent taken straight from the logo */
  #screenStart .btnRow button.btn.primary.big,button.btn.accent{
    color:#33200a;border-color:rgba(255,236,190,.7);
    background:linear-gradient(180deg,#fff3d2 0%,#ffdc8d 42%,#f7b53a 74%,#dd8b18 100%);
    box-shadow:0 8px 0 #a25d10,0 18px 32px rgba(190,120,20,.42),inset 0 1px 0 rgba(255,255,255,.85);
    text-shadow:0 1px 0 rgba(255,255,255,.55)}
  #screenStart .btnRow button.btn.primary.big:hover,button.btn.accent:hover{
    box-shadow:0 10px 0 #a25d10,0 22px 38px rgba(190,120,20,.5),inset 0 1px 0 rgba(255,255,255,.9)}
  #screenStart .btnRow button.btn.primary.big:active,button.btn.accent:active{
    box-shadow:0 2px 0 #a25d10,0 8px 16px rgba(190,120,20,.4),inset 0 2px 6px rgba(120,70,10,.35)}
  /* difficulty cards */
  #screenSelect .diffRow button,#screenStart .diffRow button{border-radius:14px;padding:12px 18px;cursor:pointer;
    border:1px solid rgba(255,255,255,.14);color:#dfe8f4;
    background:linear-gradient(180deg,#333b48 0%,#222935 55%,#181d26 100%);
    box-shadow:0 5px 0 #0c1017,0 12px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .09s ease,box-shadow .09s ease,filter .15s ease}
  #screenSelect .diffRow button:hover,#screenStart .diffRow button:hover{transform:translateY(-2px);filter:brightness(1.08)}
  #screenSelect .diffRow button.sel,#screenStart .diffRow button.sel{
    color:#f8fbff;border-color:rgba(190,224,255,.46);
    background:linear-gradient(180deg,#8fc8ff 0%,#4a93ea 48%,#2568c4 100%);
    box-shadow:0 6px 0 #16457f,0 14px 26px rgba(20,70,140,.45),inset 0 1px 0 rgba(255,255,255,.5)}
  #screenSelect .diffRow button.sel b,#screenStart .diffRow button.sel b{color:#fff}
  #screenSelect .diffRow button.sel s,#screenStart .diffRow button.sel s{color:rgba(255,255,255,.85)}
  /* icon buttons (pause / restart / sound) */
  .iconBtn{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;cursor:pointer;
    border:1px solid rgba(255,255,255,.16);color:#e8f0fb;
    background:linear-gradient(180deg,#39414f 0%,#242b36 55%,#1a202a 100%);
    box-shadow:0 5px 0 #0b0f16,0 12px 20px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .09s ease,box-shadow .09s ease,filter .15s ease}
  .iconBtn:hover{transform:translateY(-2px);filter:brightness(1.1)}
  .iconBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0b0f16,0 4px 10px rgba(0,0,0,.4),inset 0 2px 5px rgba(0,0,0,.3)}
  .iconBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;overflow:visible;display:block}