:root{
    --cyan:#6fe9ff;
    --hull:#ff5470;
    --fuel:#4dffa6;
    --o2:#59a7ff;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{
    width:100%;height:100%;overflow:hidden;background:#000;
  }
  body{
    font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    color:#dff3ff;
    -webkit-font-smoothing:antialiased;
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #stage{
    position:relative;
    overflow:hidden;
    background:#04060c;
    box-shadow:0 0 60px rgba(0,0,0,0.9);
    contain:layout style paint;
  }

  #hybridWorld{
    position:absolute;inset:0;
    display:block;
    pointer-events:none;
    z-index:0;
  }
  #game{
    position:absolute;inset:0;
    display:block;
    cursor:crosshair;
    z-index:1;
  }

  #hud{
    position:absolute;inset:0;
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    pointer-events:none;
    z-index:5;
    transition:opacity .4s ease;
  }
  .panel{
    background:rgba(10,22,38,0.34);
    border:1px solid rgba(111,233,255,0.20);
    border-radius:9px;
    padding:7px 9px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 0 18px rgba(0,0,0,0.4), inset 0 0 14px rgba(60,150,220,0.05);
  }
  .hud-left{display:flex;flex-direction:column;gap:8px;}
  #hud .status-panel{width:168px;}
  .stat + .stat{margin-top:6px;}
  .row{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:8.5px;letter-spacing:1.5px;font-weight:600;
    margin-bottom:3px;color:#9fd7ee;
  }
  .val{font-variant-numeric:tabular-nums;color:#e6f8ff;font-size:9px;}
  .bar{
    height:5px;border-radius:3px;
    background:rgba(255,255,255,0.08);
    overflow:hidden;
    box-shadow:inset 0 0 5px rgba(0,0,0,0.6);
  }
  .fill{
    height:100%;width:100%;border-radius:3px;
    transition:width .14s linear;
  }
  .f-hull{background:linear-gradient(90deg,#8f1f38,var(--hull));box-shadow:0 0 7px rgba(255,84,112,0.6);}
  .f-fuel{background:linear-gradient(90deg,#157f52,var(--fuel));box-shadow:0 0 7px rgba(77,255,166,0.55);}
  .f-o2{background:linear-gradient(90deg,#1b4f9c,var(--o2));box-shadow:0 0 7px rgba(89,167,255,0.55);}

  .boost-panel{width:168px;padding:7px 9px;}
  .boost-row{margin-bottom:3px;}
  .boost-state{font-size:8px;letter-spacing:1.2px;color:#a9d6ee;}
  .boost-bar{
    height:5px;border-radius:3px;background:#5d6670;overflow:hidden;
    box-shadow:inset 0 0 5px rgba(0,0,0,0.55);
  }
  #boostFill{
    height:100%;width:100%;border-radius:3px;background:#b7bec5;
    box-shadow:0 0 5px rgba(210,220,230,0.28);transition:width .14s linear;
  }
  .boost-active #boostFill{background:#d3d9df;box-shadow:0 0 8px rgba(111,233,255,0.55);}

  .low{animation:pulseLow .8s infinite alternate;}
  @keyframes pulseLow{from{opacity:1;}to{opacity:.35;}}

  .dist{
    text-align:right;
    min-width:118px;
  }
  .dist .lbl{
    font-size:8.5px;letter-spacing:1.6px;font-weight:600;color:#9fd7ee;
  }
  .distnum{
    font-size:21px;font-weight:700;
    letter-spacing:1px;
    color:#eafaff;
    text-shadow:0 0 12px rgba(111,233,255,0.5);
    font-variant-numeric:tabular-nums;
    line-height:1.1;
  }
  .distnum small{font-size:9.5px;letter-spacing:1.6px;color:#7fb9d6;margin-left:4px;font-weight:600;}

  .speed-block{
    margin-top:8px;
    padding-top:7px;
    border-top:1px solid rgba(111,233,255,0.14);
  }
  .speed-block .lbl{margin-bottom:4px;display:block;}

  .speed-row{
    display:flex;justify-content:flex-end;align-items:baseline;
    gap:5px;
  }
  .speed-row + .speed-row{margin-top:1px;}

  .speed-num{
    font-size:14px;font-weight:700;line-height:1.05;
    color:#eafaff;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 9px rgba(111,233,255,0.45);
  }
  .speed-unit{
    font-size:8px;letter-spacing:1.4px;font-weight:600;color:#7fb9d6;
    min-width:26px;text-align:left;
  }
  .speed-row.mph .speed-num{
    font-size:10.5px;
    color:#a9d6ee;
    text-shadow:0 0 8px rgba(111,233,255,0.22);
  }
  .speed-row.mph .speed-unit{min-width:26px;}

  #fpsPanel{
    position:absolute;
    bottom:10px;right:12px;
    z-index:5;
    width:96px;
    padding:6px 8px;
    border-radius:8px;
    background:rgba(10,22,38,0.38);
    border:1px solid rgba(111,233,255,0.20);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    pointer-events:none;
    box-shadow:0 0 16px rgba(0,0,0,0.35);
    transition:opacity .4s ease;
  }
  #fpsPanel .fps-row{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:8px;letter-spacing:1.5px;font-weight:700;
    color:#9fd7ee;margin-bottom:3px;
  }
  #fpsVal{
    font-size:9.5px;color:#e6f8ff;font-variant-numeric:tabular-nums;
  }
  #fpsBar{
    height:4px;border-radius:3px;
    background:rgba(255,255,255,0.08);
    overflow:hidden;
    box-shadow:inset 0 0 4px rgba(0,0,0,0.6);
  }
  #fpsFill{
    height:100%;width:100%;border-radius:3px;
    background:#4dffa6;
    box-shadow:0 0 6px rgba(77,255,166,0.65);
    transition:width .18s linear, background .3s, box-shadow .3s;
  }

  #zoomBadge{
    position:absolute;
    bottom:50px;right:12px;
    z-index:5;
    padding:3px 9px;
    border-radius:6px;
    background:rgba(10,22,38,0.6);
    border:1px solid rgba(111,233,255,0.30);
    color:#c8ecff;
    font-size:9.5px;letter-spacing:1.5px;font-weight:700;
    font-variant-numeric:tabular-nums;
    opacity:0;transition:opacity .3s ease;
    pointer-events:none;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    box-shadow:0 0 10px rgba(0,0,0,0.35);
  }
  #zoomBadge.show{opacity:1;}

  #hint{
    position:absolute;
    bottom:12px;left:50%;transform:translateX(-50%);
    font-size:9.5px;letter-spacing:2px;
    color:rgba(150,210,240,0.6);
    pointer-events:none;
    z-index:5;
    animation:fadeHint 11s forwards;
    white-space:nowrap;
    transition:opacity .4s ease;
  }
  @keyframes fadeHint{
    0%{opacity:0;}
    10%{opacity:1;}
    76%{opacity:1;}
    100%{opacity:0;}
  }

  #flash{
    position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,40,70,0) 35%, rgba(255,40,70,0.6) 100%);
    will-change:opacity;
  }

  #stage.in-lobby #hud,
  #stage.in-lobby #fpsPanel,
  #stage.in-lobby #zoomBadge,
  #stage.in-lobby #hint{ opacity:0; pointer-events:none; }

  .btn-primary, #restartBtn, #menuBtn{
    position:relative;
    cursor:pointer;
    font-family:inherit;
    font-weight:700;
    letter-spacing:0.5em;
    border:none;
    border-radius:10px;
    transition:transform .18s cubic-bezier(.2,.9,.3,1.4),
               box-shadow .18s ease,
               filter .18s ease;
    animation:btnIdle 3.4s ease-in-out infinite;
    will-change:transform, box-shadow;
  }
  @keyframes btnIdle{
    0%,100%{
      box-shadow:
        0 0 30px rgba(111,233,255,0.55),
        0 0 60px rgba(111,233,255,0.25),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    }
    50%{
      box-shadow:
        0 0 42px rgba(111,233,255,0.85),
        0 0 80px rgba(111,233,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    }
  }
  .btn-primary:hover, #restartBtn:hover, #menuBtn:hover{
    transform:translateY(-2px) scale(1.02);
    filter:brightness(1.06);
  }
  .btn-primary:active, #restartBtn:active, #menuBtn:active{
    transform:translateY(0) scale(0.985);
    filter:brightness(0.97);
  }

  .btn-primary{
    font-size:clamp(13px,1.7vmin,17px);
    padding:clamp(14px,2.1vmin,20px) clamp(48px,7vmin,76px) clamp(14px,2.1vmin,20px) calc(clamp(48px,7vmin,76px) + 0.5em);
    color:#04121a;
    background:linear-gradient(180deg, #b8f5ff 0%, #5fd9f0 55%, #2bb6d6 100%);
  }

  #restartBtn, #menuBtn{
    font-size:12px;
    padding:12px 32px 12px calc(32px + 0.5em);
  }
  #restartBtn{
    color:#04121a;
    background:linear-gradient(180deg, #b8f5ff 0%, #5fd9f0 55%, #2bb6d6 100%);
  }
  #menuBtn{
    color:#c8ecff;
    background:rgba(16,30,50,0.85);
    border:1px solid rgba(111,233,255,0.35);
  }

  #lobby{
    position:absolute;inset:0;
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 50% 55%, rgba(20,50,80,0.30) 0%, rgba(4,8,16,0.55) 45%, rgba(2,4,10,0.88) 100%);
    opacity:1;
    transition:opacity .55s ease;
    text-align:center;
  }
  #lobby.hidden{opacity:0; pointer-events:none;}

  .lobby-inner{
    position:relative;
    padding:clamp(20px,4vmin,50px) clamp(26px,5vmin,70px);
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .lobby-title{
    font-size:clamp(40px,7.6vmin,86px);
    font-weight:700;
    letter-spacing:0.16em;
    line-height:1;
    color:#eafaff;
    padding-left:0.16em;
    text-shadow:
      0 0 20px rgba(111,233,255,0.55),
      0 0 60px rgba(111,233,255,0.25),
      0 0 120px rgba(60,140,220,0.20);
    background:linear-gradient(180deg, #ffffff 0%, #d3f3ff 40%, #7fd4ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    position:relative;
  }

  .title-rule{
    display:flex;
    align-items:center;
    gap:14px;
    margin:clamp(12px,2vmin,22px) 0 clamp(10px,1.6vmin,18px) 0;
    width:min(78%, 460px);
    opacity:0.85;
  }
  .title-rule .line{
    flex:1;height:1px;
    background:linear-gradient(90deg, transparent, rgba(111,233,255,0.55), transparent);
  }
  .title-rule .dot{
    width:5px;height:5px;border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px rgba(111,233,255,0.9), 0 0 20px rgba(111,233,255,0.5);
    animation:dotPulse 2.4s ease-in-out infinite;
    will-change:transform, opacity;
  }
  @keyframes dotPulse{
    0%,100%{ opacity:0.6; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.25); }
  }

  .tagline{
    font-size:clamp(10px,1.35vmin,14px);
    letter-spacing:0.42em;
    color:#a9d6ee;
    font-weight:600;
    padding-left:0.42em;
    margin-bottom:clamp(28px,5vmin,54px);
    text-transform:uppercase;
  }

  .lobby-status{
    position:absolute;
    top:14px;left:14px;
    z-index:31;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .hiscore-panel{
    padding:7px 12px;
    border-radius:8px;
    background:rgba(10,22,38,0.5);
    border:1px solid rgba(111,233,255,0.25);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#eafaff;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 10px rgba(111,233,255,0.4);
    pointer-events:none;
  }


  .loading-status{
    margin-top:7px;
    color:#6f9db5;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.5px;
    font-variant-numeric:tabular-nums;
    opacity:0;
    transform:translateY(12px) scale(0.98);
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.2), color .45s ease;
    pointer-events:none;
  }
  .loading-status.show{
    opacity:1;
    transform:translateY(0) scale(1);
    color:#6fe9ff;
    text-shadow:0 0 9px rgba(111,233,255,0.48);
  }
  .loading-status #loadingPct{
    display:inline-block;
    min-width:32px;
    text-align:right;
    color:#dff8ff;
  }

  .game-version{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:31;
    color:#6f9db5;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.5px;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
    user-select:none;
  }

  .btn-ghost{
    margin-top:16px;
    font-size:11px;
    letter-spacing:0.5em;
    padding:11px 30px 11px calc(30px + 0.5em);
    cursor:pointer;
    font-family:inherit;
    font-weight:700;
    color:#c8ecff;
    background:rgba(16,30,50,0.85);
    border:1px solid rgba(111,233,255,0.35);
    border-radius:10px;
    transition:transform .18s ease, filter .18s ease;
  }
  .btn-ghost:hover{ transform:translateY(-1px); filter:brightness(1.2); }
  .btn-ghost:active{ transform:translateY(0) scale(0.98); }

  #settingsPanel{
    position:absolute;inset:0;z-index:35;
    display:flex;align-items:center;justify-content:center;
    background:rgba(3,7,14,0.66);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  #settingsPanel.show{opacity:1;pointer-events:auto;}

  .set-box{
    width:min(78%, 380px);
    padding:28px 34px;
    border:1px solid rgba(111,233,255,0.3);
    border-radius:14px;
    background:rgba(12,18,32,0.88);
    box-shadow:0 0 50px rgba(111,233,255,0.12), inset 0 0 30px rgba(60,150,220,0.05);
    text-align:center;
  }
  .set-box h2{
    font-size:15px;letter-spacing:6px;font-weight:700;color:#eafaff;
    text-shadow:0 0 18px rgba(111,233,255,0.5);
    margin-bottom:22px;
  }
  .set-row{margin-bottom:20px;text-align:left;}
  .set-toggle-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:88px;
    margin-bottom:0;
    padding:16px 0 17px;
    border-top:1px solid rgba(111,233,255,0.12);
  }
  .set-row label{
    display:block;
    font-size:9px;letter-spacing:2.2px;font-weight:700;color:#9fd7ee;
    margin-bottom:8px;
  }
  .set-toggle-row label{
    margin-bottom:6px;
    font-size:13px;
    letter-spacing:2.4px;
    color:#a7dced;
  }
  .set-row input[type=range]{
    width:100%;
    accent-color:#6fe9ff;
    cursor:pointer;
  }
  .set-val{
    display:block;
    margin-top:4px;
    font-size:9.5px;letter-spacing:1.5px;color:#7fb9d6;
    font-variant-numeric:tabular-nums;
    text-align:right;
  }
  .set-hint{
    display:block;
    margin-top:0;
    font-size:9px;letter-spacing:1.45px;color:#557e96;
  }

  .set-texture-row{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    min-height:88px;
    margin-bottom:0;
    padding:16px 0 17px;
    border-top:1px solid rgba(111,233,255,0.12);
  }
  .texture-lod-control{
    width:156px;
    flex:0 0 156px;
  }
  .texture-lod-control input[type=range]{
    width:100%;
    margin:0;
  }
  .texture-lod-scale{
    display:flex;justify-content:space-between;
    margin-top:4px;
    color:#557e96;
    font-size:7px;letter-spacing:1px;font-weight:700;
  }
  .texture-lod-control .set-val{
    margin-top:5px;
    color:#6fe9ff;
  }

  .set-toggle{
    width:96px;
    height:40px;
    padding:0;
    border:1px solid rgba(111,233,255,0.42);
    border-radius:9px;
    background:linear-gradient(180deg,rgba(37,91,116,0.62),rgba(21,57,78,0.70));
    color:#6fe9ff;
    font:700 13px/1 "Segoe UI","Helvetica Neue",Arial,sans-serif;
    letter-spacing:3px;
    cursor:pointer;
    box-shadow:inset 0 0 14px rgba(111,233,255,0.10),0 0 10px rgba(111,233,255,0.04);
    transition:transform .18s ease,filter .18s ease,background .18s ease,color .18s ease;
  }
  .set-toggle:hover{transform:translateY(-1px);filter:brightness(1.2);}
  .set-toggle:active{transform:translateY(0) scale(0.98);}
  .set-toggle.off{
    border-color:rgba(159,215,238,0.22);
    background:rgba(35,43,54,0.62);
    color:#718493;
    box-shadow:none;
  }
  .set-box .btn-ghost{margin-top:4px;}

  .new-best{
    display:none;
    font-size:10px;letter-spacing:3px;font-weight:700;
    color:#4dffa6;
    text-shadow:0 0 14px rgba(77,255,166,0.8);
    margin:-12px 0 16px 0;
    animation:dotPulse 1.2s ease-in-out infinite;
  }
  .new-best.show{display:block;}

  #gameover{
    position:absolute;inset:0;z-index:20;
    display:flex;align-items:center;justify-content:center;
    background:rgba(3,7,14,0.72);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    opacity:0;pointer-events:none;
    transition:opacity .45s ease;
  }
  #gameover.show{opacity:1;pointer-events:auto;}
  .gameover-stack{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .restart-loading-status{
    margin-top:10px;
    opacity:0;
    transform:translateY(12px) scale(0.98);
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.2);
  }
  #gameover.show .restart-loading-status.show{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  #pauseMenu{
    position:absolute;inset:0;z-index:25;
    display:flex;align-items:center;justify-content:center;
    background:rgba(3,7,14,0.72);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  #pauseMenu.show{opacity:1;pointer-events:auto;}
  .pause-box{
    width:min(90vw, 480px);
    text-align:center;
    padding:38px clamp(18px, 5vw, 50px);
    display:flex;
    flex-direction:column;
    align-items:center;
    border:1px solid rgba(111,233,255,0.35);
    border-radius:16px;
    background:rgba(12,18,32,0.82);
    box-shadow:0 0 60px rgba(111,233,255,0.16), inset 0 0 40px rgba(60,150,220,0.05);
    transform:translateY(12px) scale(0.98);
    transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  }
  #pauseMenu.show .pause-box{transform:translateY(0) scale(1);}
  .pause-box h2{
    font-size:28px;letter-spacing:8px;font-weight:700;
    color:#eafaff;
    text-shadow:0 0 26px rgba(111,233,255,0.65);
    margin-bottom:8px;
    text-align:center;
    padding-left:8px;
  }
  .pause-box .sub{
    font-size:10.5px;letter-spacing:3px;color:#8fb6cc;margin-bottom:26px;
    text-align:center;
    padding-left:3px;
  }
  .pause-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:min(100%, 440px);
    margin:0 auto;
  }
  .pause-actions button{justify-self:center;}
  .pause-actions .btn-ghost{margin-top:0;}
  #pauseResume, #pauseSettings, #pauseMenuBtn{font-size:11px;padding:12px 28px 12px calc(28px + 0.5em);}
  #pauseResume{color:#04121a;background:linear-gradient(180deg, #b8f5ff 0%, #5fd9f0 55%, #2bb6d6 100%);}

  .go-box{
    text-align:center;
    padding:38px 50px;
    border:1px solid rgba(255,84,112,0.35);
    border-radius:16px;
    background:rgba(12,18,32,0.72);
    box-shadow:0 0 60px rgba(255,60,100,0.16), inset 0 0 40px rgba(255,60,100,0.05);
    transform:translateY(12px) scale(0.98);
    transition:transform .45s cubic-bezier(.2,.9,.3,1.2);
  }
  #gameover.show .go-box{transform:translateY(0) scale(1);}

  .go-box h1{
    font-size:32px;letter-spacing:8px;font-weight:700;
    color:#ff5f7d;
    text-shadow:0 0 26px rgba(255,84,112,0.7);
    margin-bottom:7px;
  }
  .go-box .sub{
    font-size:10.5px;letter-spacing:3px;color:#8fb6cc;margin-bottom:22px;
  }
  .go-stats{
    display:flex;gap:30px;justify-content:center;margin-bottom:26px;
  }
  .go-stat .k{
    font-size:9px;letter-spacing:2.2px;color:#7fb9d6;margin-bottom:4px;
  }
  .go-stat .v{
    font-size:21px;font-weight:700;color:#eafaff;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 14px rgba(111,233,255,0.5);
  }
  .go-actions{
    display:flex;
    gap:14px;
    justify-content:center;
  }