:root{
    --cyan:#66f4ff;
    --amber:#ffc46b;
    --orange:#ff8a4c;
    --red:#ff4d61;
    --ink:#05060b;
    --panel:linear-gradient(160deg, rgba(18,27,40,.86), rgba(7,11,18,.72));
    --line:rgba(160,220,255,.16);
    --font:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;width:100%;height:100%;background:#04050a;overflow:hidden;}
  body{
    font-family:var(--font);
    color:#eaf6ff;
    user-select:none;-webkit-user-select:none;
    touch-action:none;
  }
  #page{
    position:fixed;inset:0;
    overflow:hidden;
    background:
      radial-gradient(90vh 60vw at 50% -10%, rgba(94,58,160,.20), transparent 60%),
      radial-gradient(70vw 50vh at 85% 100%, rgba(255,88,42,.10), transparent 60%),
      radial-gradient(60vw 50vh at 8% 82%, rgba(46,158,190,.08), transparent 60%),
      #04050a;
  }
  #page:before{
    content:"";position:absolute;inset:-20%;
    background:
      repeating-linear-gradient(104deg, rgba(255,255,255,.018) 0 1px, transparent 1px 160px);
    pointer-events:none;
  }
  #stage{
    position:absolute;left:50%;top:50%;
    width:540px;height:960px;
    background:#05060b;
    overflow:hidden;
    transform:translate(-50%,-50%) scale(1);
    transform-origin:center center;
    box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 0 1px rgba(150,220,255,.08), 0 0 90px rgba(80,180,255,.07);
    border-radius:26px;
    isolation:isolate;
  }
  @media (max-width:620px),(max-height:700px){
    #stage{border-radius:0;box-shadow:none;}
  }
  canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;}
  .grade,.vignette,.grain{position:absolute;inset:0;pointer-events:none;}
  .grade{
    background:
      linear-gradient(180deg, rgba(10,20,44,.20), transparent 24%, transparent 72%, rgba(4,8,16,.42)),
      radial-gradient(120% 60% at 50% 105%, rgba(255,92,40,.10), transparent 60%);
    mix-blend-mode:soft-light;
    z-index:2;
  }
  .vignette{
    z-index:3;
    background:radial-gradient(120% 90% at 50% 44%, transparent 55%, rgba(0,0,0,.55) 100%);
  }
  .grain{
    z-index:4;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  }

  /* ---------- HUD ---------- */
  .hud{position:absolute;inset:0;z-index:10;pointer-events:none;}
  .panel{
    position:absolute;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .panel:after{
    content:"";position:absolute;left:10px;right:10px;top:0;height:1px;
    background:linear-gradient(90deg, transparent, rgba(180,240,255,.45), transparent);
  }
  .scorePanel{left:14px;top:14px;width:190px;height:88px;padding:10px 13px 8px;}
  .micro{
    font-size:11.5px;letter-spacing:.14em;font-weight:700;color:#94c9dd;
    text-transform:uppercase;white-space:nowrap;
  }
  .scoreValue{
    font-size:35px;line-height:1.02;font-weight:900;letter-spacing:-.015em;
    font-variant-numeric:tabular-nums;color:#f3fbff;
    text-shadow:0 0 18px rgba(100,230,255,.30);
    margin-top:1px;
  }
  .bestRow{
    font-size:10.5px;color:#82a4b5;letter-spacing:.08em;margin-top:1px;
    display:flex;gap:5px;align-items:center;
  }
  .bestRow b{color:#a9d9e8;font-weight:800;font-variant-numeric:tabular-nums;}
  .comboPanel{right:14px;top:14px;width:160px;height:88px;padding:9px 13px 8px;text-align:right;}
  .comboValue{
    font-size:33px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;
    color:#617787;margin-top:2px;transition:color .2s, text-shadow .2s;
    display:flex;align-items:baseline;justify-content:flex-end;gap:3px;
  }
  .comboValue em{font-style:normal;font-size:17px;opacity:.7;font-weight:800;}
  .comboPanel.hot .comboValue{color:var(--amber);text-shadow:0 0 18px rgba(255,180,80,.55);}
  .comboPanel.hot .comboValue em{opacity:1;}
  .comboPanel.hot{border-color:rgba(255,190,110,.30);}
  .comboPanel.pop{animation:comboPop .3s ease;}
  @keyframes comboPop{0%{transform:scale(1)}38%{transform:scale(1.055)}100%{transform:scale(1)}}
  .comboTrack{height:4px;border-radius:2px;background:rgba(255,255,255,.10);margin-top:7px;overflow:hidden;}
  .comboTrack i{
    display:block;height:100%;width:100%;transform-origin:right center;
    background:linear-gradient(90deg,#ff7c3d,#ffd27a);
    border-radius:2px;box-shadow:0 0 10px rgba(255,160,70,.7);
  }
  .energyPanel{
    position:absolute;
    left:14px;top:112px;width:226px;
    background:linear-gradient(160deg, rgba(12,22,32,.80), rgba(6,10,16,.62));
    border:1px solid rgba(110,220,255,.13);
    border-radius:12px;padding:8px 11px 10px;
    box-shadow:0 8px 26px rgba(0,0,0,.30);
  }
  .energyMeta{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.12em;color:#81aec2;font-weight:700;}
  .energyMeta svg{width:13px;height:13px;filter:drop-shadow(0 0 5px rgba(100,240,255,.6));}
  .energyMeta b{margin-left:auto;color:#d9fbff;font-size:13px;font-variant-numeric:tabular-nums;}
  .energyTrack{position:relative;height:11px;margin-top:7px;border-radius:2px;background:rgba(3,8,14,.9);overflow:hidden;border:1px solid rgba(120,220,255,.12);}
  #energyFill{
    position:absolute;inset:0 auto 0 0;width:100%;
    background:linear-gradient(90deg,#1cc5d8,#59f4ff 55%,#adfdff);
    box-shadow:0 0 12px rgba(90,240,255,.7);
    transition:background .25s;
  }
  .energySeg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9.4%, rgba(3,10,16,.72) 9.4% 10%);}
  .energyPanel.low{border-color:rgba(255,90,90,.35);animation:lowPulse 1s ease-in-out infinite;}
  .energyPanel.low #energyFill{background:linear-gradient(90deg,#ff3a4e,#ff8a5c);box-shadow:0 0 14px rgba(255,70,80,.8);}
  @keyframes lowPulse{0%,100%{box-shadow:0 0 0 rgba(255,60,70,0)}50%{box-shadow:0 0 24px rgba(255,60,70,.35)}}
  .energyPanel.charged{border-color:rgba(140,255,230,.7);animation:chargePulse .6s ease;}
  .energyPanel.charged #energyFill{filter:brightness(1.35);}
  @keyframes chargePulse{
    0%{box-shadow:0 0 0 rgba(100,255,220,0)}
    36%{box-shadow:0 0 30px rgba(100,255,220,.55), inset 0 0 20px rgba(100,255,220,.2)}
    100%{box-shadow:0 0 0 rgba(100,255,220,0)}
  }
  .speedo{
    position:absolute;right:14px;top:112px;width:142px;text-align:right;
    padding:8px 11px;border-radius:11px;
    background:linear-gradient(160deg, rgba(12,22,32,.72), rgba(6,10,16,.5));
    border:1px solid rgba(110,220,255,.10);
    font-variant-numeric:tabular-nums;
  }
  .speedo b{font-size:21px;font-weight:900;color:#cdf8ff;letter-spacing:-.02em;text-shadow:0 0 12px rgba(80,230,255,.35);}
  .speedo span{font-size:9.5px;color:#628695;margin-left:3px;letter-spacing:.1em;}
  .speedo .spdBar{height:2px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:4px;overflow:hidden;}
  .speedo .spdBar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#3bdcf2,#a7fbff);box-shadow:0 0 8px rgba(70,230,255,.7);transition:width .2s;}

  .topTools{
    position:absolute;left:50%;top:16px;transform:translateX(-50%);
    display:flex;gap:8px;z-index:30;
  }
  .iconBtn{
    width:46px;height:46px;border-radius:14px;
    display:grid;place-items:center;
    background:linear-gradient(160deg,rgba(20,32,46,.88),rgba(7,12,19,.78));
    border:1px solid rgba(150,220,255,.18);
    color:#a9d8e8;cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.3);
    transition:transform .12s, color .2s, border-color .2s;
  }
  .iconBtn svg{width:20px;height:20px;}
  .iconBtn:active{transform:scale(.92);}
  .iconBtn.off{color:#53636e;border-color:rgba(150,220,255,.08);}
  #pauseBtn{display:none;}
  #stage[data-mode="playing"] #pauseBtn,
  #stage[data-mode="dying"] #pauseBtn,
  #stage[data-mode="paused"] #pauseBtn{display:grid;}

  /* ---------- controls ---------- */
  .controls{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity .35s;}
  #stage[data-mode="playing"] .controls,#stage[data-mode="dying"] .controls{opacity:1;}
    .pad{
    position:absolute;
    width:82px;height:82px;border-radius:25px;
    background:linear-gradient(165deg, rgba(24,38,54,.82), rgba(7,13,21,.86));
    border:1px solid rgba(150,225,255,.22);
    color:#c7f6ff;display:grid;place-items:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.4), 0 0 24px rgba(60,190,230,.06);
    pointer-events:auto;cursor:pointer;
    transition:transform .08s, background .12s, border-color .12s, box-shadow .12s;
    touch-action:none;
  }
  .pad svg{width:32px;height:32px;filter:drop-shadow(0 0 6px rgba(100,240,255,.35));}
  .pad:active,.pad.down{
    transform:translateY(2px) scale(.97);
    border-color:rgba(120,245,255,.65);
    background:linear-gradient(165deg, rgba(42,80,104,.85), rgba(10,22,34,.9));
    box-shadow:inset 0 0 22px rgba(70,230,255,.22), 0 0 28px rgba(60,220,255,.22);
  }
  .padLeft{left:20px;bottom:28px;}
  .padRight{right:22px;bottom:28px;}
  .actionBtn{
    position:absolute;right:22px;bottom:124px;
    width:124px;height:124px;border-radius:50%;
    background:
      radial-gradient(circle at 50% 30%, rgba(46,142,170,.60), rgba(8,24,36,.95) 68%),
      linear-gradient(180deg, rgba(18,44,60,.9), rgba(4,10,16,.98));
    border:2px solid rgba(110,240,255,.55);
    color:#e2feff;pointer-events:auto;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    box-shadow:
      0 0 0 7px rgba(70,220,255,.055),
      0 0 34px rgba(50,220,255,.30),
      inset 0 0 28px rgba(90,240,255,.20),
      0 14px 30px rgba(0,0,0,.45);
    transition:background .2s, border-color .2s, box-shadow .2s, transform .08s;
    overflow:visible;touch-action:none;
  }
  .actionBtn:before{
    content:"";position:absolute;inset:-9px;border-radius:50%;
    border:1px dashed rgba(120,245,255,.36);
    animation:spin 9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .actionBtn:active{transform:scale(.95);}
  .actionBtn .aIcon{width:34px;height:34px;display:block;filter:drop-shadow(0 0 8px rgba(120,250,255,.5));}
  .actionBtn .aIcon.bomb{display:none;}
  .actionBtn .aLabel{font-size:20px;font-weight:900;letter-spacing:.08em;line-height:1.05;text-shadow:0 0 14px rgba(100,245,255,.5);}
  .actionBtn .aSub{font-size:9.5px;letter-spacing:.2em;color:#7fb4c8;font-weight:700;}
  .actionBtn.air{
    background:
      radial-gradient(circle at 50% 30%, rgba(255,148,64,.62), rgba(38,16,10,.96) 68%),
      linear-gradient(180deg, rgba(62,28,16,.92), rgba(14,6,4,.98));
    border-color:rgba(255,190,110,.72);
    box-shadow:
      0 0 0 7px rgba(255,150,70,.07),
      0 0 40px rgba(255,130,50,.38),
      inset 0 0 28px rgba(255,160,80,.28),
      0 14px 30px rgba(0,0,0,.45);
  }
  .actionBtn.air:before{border-color:rgba(255,190,120,.5);animation-duration:3.6s;}
  .actionBtn.air .aLabel{color:#fff1dc;text-shadow:0 0 16px rgba(255,150,60,.7);}
  .actionBtn.air .aSub{color:#c08d6b;}
  .actionBtn.air .jump{display:none;}
  .actionBtn.air .aIcon.bomb{display:block;}
  .actionBtn.locked{animation:lockedPulse .72s ease-in-out infinite;}
  @keyframes lockedPulse{
    0%,100%{box-shadow:0 0 0 7px rgba(255,150,70,.07),0 0 36px rgba(255,130,50,.32),inset 0 0 26px rgba(255,160,80,.24),0 14px 30px rgba(0,0,0,.45);}
    50%{box-shadow:0 0 0 12px rgba(255,150,70,.12),0 0 60px rgba(255,130,50,.62),inset 0 0 34px rgba(255,180,100,.4),0 14px 30px rgba(0,0,0,.45);}
  }
  .actionBtn.cooling{filter:saturate(.55) brightness(.82);}
  .actionBtn.noEnergy{border-color:rgba(255,90,100,.5);}

  /* ---------- overlays ---------- */
  .overlay{
    position:absolute;inset:0;z-index:20;
    display:flex;align-items:center;justify-content:center;
    padding:40px 26px 30px;
    background:
      radial-gradient(86% 52% at 50% 54%, rgba(2,4,10,.58) 0%, rgba(3,5,11,.36) 46%, transparent 74%),
      radial-gradient(90% 55% at 50% 24%, rgba(30,24,60,.34), transparent 70%),
      linear-gradient(180deg, rgba(3,5,11,.36) 0%, rgba(3,5,11,.60) 44%, rgba(2,4,9,.78) 100%);
    opacity:0;pointer-events:none;transition:opacity .4s ease;
  }
  .overlay.show{opacity:1;pointer-events:auto;}
  #startOverlay{
    background:
      radial-gradient(86% 52% at 50% 54%, rgba(2,4,10,.56) 0%, rgba(3,5,11,.34) 46%, transparent 74%),
      radial-gradient(90% 55% at 50% 24%, rgba(30,24,60,.30), transparent 70%),
      linear-gradient(180deg, rgba(3,5,11,.30) 0%, rgba(3,5,11,.52) 44%, rgba(2,4,9,.68) 100%);
  }
  .overlayInner{width:100%;max-width:432px;position:relative;z-index:2;}
  .menuBest{
    position:absolute;top:22px;right:22px;z-index:3;
    display:flex;align-items:center;gap:7px;
    padding:7px 11px;border-radius:12px;
    background:rgba(6,12,20,.52);
    border:1px solid rgba(150,220,255,.16);
    font-size:10px;font-weight:800;letter-spacing:.12em;color:#7fa6b8;
    backdrop-filter:none;
  }
  .menuBest b{font-size:13px;letter-spacing:0;color:#d9fbff;font-variant-numeric:tabular-nums;}
  .menuBest:before{content:"";width:4px;height:4px;border-radius:50%;background:#66f4ff;box-shadow:0 0 8px #66f4ff;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:10.5px;letter-spacing:.22em;color:#84c6dd;font-weight:800;
    text-transform:uppercase;margin-bottom:12px;
  }
  .eyebrow:before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,#63e6ff);}
  .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:#ff8a4c;box-shadow:0 0 10px #ff8a4c;}
  .gameTitle{
    font-size:66px;line-height:.84;font-weight:900;letter-spacing:-.045em;
    background:linear-gradient(180deg,#ffffff 8%,#bff5ff 42%,#68c8e6 72%,#2a7fa5 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 24px rgba(70,210,255,.22)) drop-shadow(0 3px 0 rgba(0,0,0,.35));
    margin:0 0 8px;
  }
  .gameTitle span{display:block;font-size:23px;letter-spacing:.20em;color:#ffb072;-webkit-text-fill-color:#ffb072;margin-top:12px;font-weight:800;filter:drop-shadow(0 0 16px rgba(255,120,50,.35));}
  .tagline{font-size:12.5px;line-height:1.7;color:#a8c6d6;max-width:370px;margin:4px 0 20px;font-weight:500;text-wrap:pretty;}
  .threatRow{display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap;}
  .threatChip{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11px;font-weight:700;letter-spacing:.04em;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);
    padding:7px 11px;border-radius:20px;color:#cfe4ee;
  }
  .threatChip i{width:5px;height:5px;border-radius:50%;display:block;}
  .threatChip.b i{background:#ffc76b;box-shadow:0 0 8px #ffc76b;}
  .threatChip.d i{background:#ff9a62;box-shadow:0 0 8px #ff9a62;}
  .threatChip.f i{background:#ff4d61;box-shadow:0 0 8px #ff4d61;}
  .threatChip.br i{background:#ff74ad;box-shadow:0 0 8px #ff74ad;}
  .howGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;}
  .howCard{
    border:1px solid rgba(150,220,255,.12);
    background:linear-gradient(160deg, rgba(20,32,47,.66), rgba(6,11,18,.44));
    border-radius:13px;padding:11px 12px;
    min-height:72px;
  }
  .howCard .hk{
    display:flex;gap:4px;margin-bottom:6px;
  }
  .howCard .key{
    display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;
    border-radius:5px;background:rgba(200,245,255,.10);
    border:1px solid rgba(180,235,255,.25);border-bottom-width:2px;
    font-size:10px;font-weight:800;color:#dffaff;
  }
  .howCard p{margin:0;font-size:11.5px;line-height:1.5;color:#aecbd9;}
  .howCard p b{color:#e4fbff;font-weight:800;}
  .howCard.wide{grid-column:1 / -1;min-height:60px;}
  .primaryBtn{
    width:100%;height:64px;border-radius:17px;border:0;cursor:pointer;
    background:linear-gradient(180deg,#8cf7ff,#38c6e2 52%,#1597bb);
    color:#02222c;font-family:var(--font);
    font-size:18.5px;font-weight:900;letter-spacing:.12em;
    box-shadow:0 0 0 1px rgba(190,255,255,.5), 0 10px 34px rgba(40,200,230,.28), inset 0 1px 0 rgba(255,255,255,.7);
    position:relative;overflow:hidden;
    transition:transform .1s, filter .15s;
  }
  .primaryBtn:after{
    content:"";position:absolute;top:0;left:-40%;width:28%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-22deg);animation:sheen 3.4s ease-in-out infinite;
  }
  @keyframes sheen{0%,62%{left:-45%}88%,100%{left:130%}}
  .primaryBtn:active{transform:scale(.985);filter:brightness(1.05);}
  .footNote{margin-top:13px;text-align:center;font-size:10px;letter-spacing:.10em;color:#587383;}
  .footNote b{color:#98d8e8;font-weight:700;}

  /* game over */
  #overOverlay .gameTitle{font-size:52px;letter-spacing:-.03em;}
  .overCry{
    font-size:12px;letter-spacing:.18em;color:#ff9b8f;font-weight:800;margin:2px 0 18px;
  }
  .statGrid{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;
  }
  .statBox{
    border:1px solid rgba(160,220,255,.12);
    background:linear-gradient(160deg, rgba(20,32,46,.72), rgba(6,11,18,.5));
    border-radius:13px;padding:11px 12px;
  }
  .statBox span{display:block;font-size:10px;letter-spacing:.12em;color:#7095a7;font-weight:700;}
  .statBox b{display:block;font-size:27px;line-height:1.2;font-weight:900;color:#e9fcff;font-variant-numeric:tabular-nums;margin-top:3px;}
  .statBox b small{font-size:10px;color:#6f93a4;font-weight:700;letter-spacing:0;}
  .statBox.hl b{color:var(--amber);text-shadow:0 0 16px rgba(255,190,110,.35);}
  .newBest{display:none;font-size:11px;color:#ffd58c;font-weight:800;letter-spacing:.14em;margin:-6px 0 14px;}
  .newBest.show{display:block;animation:blink 1s ease-in-out infinite;}
  @keyframes blink{50%{opacity:.45}}
  .ghostBtn{
    width:100%;height:48px;margin-top:8px;border-radius:13px;cursor:pointer;
    background:rgba(255,255,255,.03);border:1px solid rgba(160,220,255,.16);
    color:#a9ccdc;font-family:var(--font);font-size:12px;font-weight:800;letter-spacing:.16em;
  }
  .ghostBtn:active{background:rgba(255,255,255,.07);}

  /* pause */
  .pauseCard{
    width:100%;max-width:330px;text-align:center;
    border:1px solid rgba(150,220,255,.16);
    background:linear-gradient(165deg, rgba(20,32,47,.92), rgba(5,9,15,.96));
    border-radius:20px;padding:26px 22px 20px;
    box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .pauseCard h2{font-size:27px;letter-spacing:.18em;margin:0 0 6px;font-weight:900;color:#defaff;}
  .pauseCard p{font-size:12px;color:#7194a5;margin:0 0 20px;letter-spacing:.08em;}
  .overlay .hudMini{display:flex;gap:16px;justify-content:center;margin-bottom:20px;}
  .hudMini div{font-size:10px;color:#6f91a2;letter-spacing:.1em;}
  .hudMini b{display:block;font-size:20px;color:#d8f9ff;margin-top:2px;font-variant-numeric:tabular-nums;}

  .toast{
    position:absolute;left:50%;top:170px;transform:translate(-50%,-6px);
    z-index:18;pointer-events:none;
    padding:7px 15px;border-radius:20px;
    background:rgba(8,16,24,.82);border:1px solid rgba(255,180,100,.28);
    color:#ffdba6;font-size:11px;font-weight:800;letter-spacing:.1em;
    opacity:0;transition:.25s;white-space:nowrap;
  }
  .toast.show{opacity:1;transform:translate(-50%,0);}

  .rotateHint{display:none;}
  @media (max-height:520px) and (orientation:landscape){
    .rotateHint{
      display:flex;position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
      z-index:99;font-size:10px;color:#7d9dad;letter-spacing:.14em;
      background:rgba(8,14,22,.8);border:1px solid rgba(120,200,230,.16);
      padding:7px 14px;border-radius:20px;
    }
  }

  /* ---------- mode visibility ---------- */
  .hud,.speedo,.energyPanel{opacity:0;transition:opacity .35s ease;}
  #stage[data-mode="playing"] .hud,
  #stage[data-mode="dying"] .hud,
  #stage[data-mode="paused"] .hud{opacity:1;}
  #stage[data-mode="playing"] .energyPanel,
  #stage[data-mode="dying"] .energyPanel,
  #stage[data-mode="paused"] .energyPanel,
  #stage[data-mode="playing"] .speedo,
  #stage[data-mode="dying"] .speedo{opacity:1;}
  #stage[data-mode="attract"] .scorePanel,
  #stage[data-mode="attract"] .comboPanel,
  #stage[data-mode="over"] .scorePanel,
  #stage[data-mode="over"] .comboPanel,
  #stage[data-mode="over"] .energyPanel,
  #stage[data-mode="over"] .speedo{opacity:0;}
  #stage[data-mode="attract"] .controls{opacity:0!important;}
  #stage[data-mode="over"] .controls{opacity:0!important;}

  @media (max-width:420px){
    .hud{font-size:11px;}
  }