:root{
    --neon-cyan:#22e6ff;
    --neon-magenta:#ff2d9b;
    --neon-yellow:#ffe14d;
    --neon-green:#3dff9e;
    --bg-0:#05060f;
    --bg-1:#0a0e24;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{
    height:100%;
    background:radial-gradient(ellipse at 50% -10%, #12163a 0%, var(--bg-1) 40%, var(--bg-0) 100%);
    overflow:hidden;
    font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
    color:#eaf6ff;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:none;
  }
  #wrap{
    position:fixed;inset:0;
    display:flex;align-items:center;justify-content:center;
  }
  #stage{
    position:relative;
    width:min(100vw, calc(100vh * 0.5625));
    height:min(100vh, calc(100vw / 0.5625));
    box-shadow:0 0 60px rgba(34,230,255,.15), inset 0 0 120px rgba(0,0,0,.6);
    overflow:hidden;
    background:linear-gradient(180deg,#04061a 0%,#080b28 60%,#04030f 100%);
  }
  canvas{display:block;width:100%;height:100%}

  /* ===== HUD ===== */
  #hud{
    position:absolute;inset:0;pointer-events:none;
    padding:14px 16px;
    display:flex;flex-direction:column;justify-content:space-between;
    font-weight:700;letter-spacing:.5px;
  }
  .hud-row{display:flex;justify-content:space-between;align-items:flex-start}
  .hud-block{display:flex;flex-direction:column;gap:6px}
  .label{font-size:10px;opacity:.6;letter-spacing:2px}
  .value{font-size:22px;text-shadow:0 0 10px currentColor;line-height:1}
  #score{color:var(--neon-cyan)}
  #wave{color:var(--neon-yellow)}
  #targetScore{color:var(--neon-magenta);font-size:14px}
  .bars{display:flex;flex-direction:column;gap:5px;margin-top:2px}
  .bar-wrap{width:120px}
  .bar-label{font-size:9px;opacity:.7;letter-spacing:1px;margin-bottom:2px}
  .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
  .bar > i{display:block;height:100%;width:100%;transform-origin:left;transition:transform .12s ease}
  #hpBar > i{background:linear-gradient(90deg,#ff5a7a,#ff2d9b);box-shadow:0 0 10px #ff2d9b}
  #chargeBar > i{background:linear-gradient(90deg,#3dff9e,#22e6ff);box-shadow:0 0 10px #22e6ff}
  #comboWrap{text-align:right}
  #combo{font-size:30px;color:var(--neon-green);text-shadow:0 0 14px var(--neon-green);line-height:1}
  #comboLabel{font-size:10px;opacity:.6;letter-spacing:2px}
  #travel{font-size:11px;color:#b9d7ff;letter-spacing:1px;margin-top:3px}
  #feverText{font-size:12px;color:#fff;font-weight:900;letter-spacing:2px;text-shadow:0 0 8px #ff2d9b;opacity:0;transition:opacity .2s}
  #feverText.on{opacity:1;animation:feverHue .7s linear infinite}
  @keyframes feverHue{0%{color:#ff5bba}33%{color:#ffe14d}66%{color:#5dffff}100%{color:#ff5bba}}

  /* ===== Overlays ===== */
  .overlay{
    position:absolute;inset:0;pointer-events:auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:18px;padding:24px;
    background:radial-gradient(ellipse at center, rgba(5,6,15,.55), rgba(5,6,15,.92));
    backdrop-filter:blur(2px);
    z-index:10;
  }
  .title{
    font-size:clamp(34px,9vw,64px);
    font-weight:900;letter-spacing:4px;line-height:.95;
    background:linear-gradient(180deg,#c8fbff,#22e6ff 45%,#ff2d9b);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 18px rgba(34,230,255,.5));
    animation:flick 4s infinite;
  }
  @keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.4}99%{opacity:.85}}
  .subtitle{font-size:13px;letter-spacing:6px;color:var(--neon-yellow);opacity:.85;margin-top:-6px}
  .desc{font-size:13px;line-height:1.9;opacity:.85;max-width:340px}
  .desc b{color:var(--neon-cyan)}
  .btn{
    pointer-events:auto;cursor:pointer;
    font-weight:800;font-size:16px;letter-spacing:3px;
    padding:14px 40px;border:2px solid var(--neon-cyan);border-radius:40px;
    color:#eafcff;background:rgba(34,230,255,.08);
    box-shadow:0 0 20px rgba(34,230,255,.35), inset 0 0 20px rgba(34,230,255,.15);
    transition:transform .1s, box-shadow .2s;
  }
  .btn:hover{transform:scale(1.05);box-shadow:0 0 34px rgba(34,230,255,.6), inset 0 0 24px rgba(34,230,255,.25)}
  .btn:active{transform:scale(.97)}
  .btn.magenta{border-color:var(--neon-magenta);box-shadow:0 0 20px rgba(255,45,155,.4), inset 0 0 20px rgba(255,45,155,.15)}
  .keys{font-size:11px;opacity:.6;letter-spacing:2px;line-height:2}
  .keys kbd{background:rgba(255,255,255,.12);border-radius:4px;padding:2px 7px;margin:0 2px;font-family:inherit}
  .hidden{display:none!important}
  #finalScore{font-size:46px;color:var(--neon-cyan);text-shadow:0 0 18px var(--neon-cyan);font-weight:900}
  #gameOverTitle{font-size:clamp(30px,8vw,52px);font-weight:900;letter-spacing:3px;color:var(--neon-magenta);text-shadow:0 0 20px var(--neon-magenta)}
  .stat-line{font-size:13px;opacity:.8;letter-spacing:2px}
  .stat-line span{color:var(--neon-yellow)}
  #audioState{position:absolute;right:12px;bottom:12px;z-index:12;padding:7px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(5,6,15,.62);color:#dffaff;font-size:10px;letter-spacing:1px;cursor:pointer}
  #clearTitle{font-size:clamp(28px,7vw,48px);font-weight:900;letter-spacing:3px;color:#ffe14d;text-shadow:0 0 22px #ffe14d}
  #clearScore{font-size:clamp(38px,10vw,62px);font-weight:900;color:#fff;text-shadow:0 0 20px #22e6ff,0 0 42px #ff2d9b}
  #clearProof{max-width:360px;padding:14px 16px;border:2px solid #ffe14d;border-radius:14px;background:rgba(255,225,77,.1);color:#fff;font-size:13px;line-height:1.8;box-shadow:0 0 28px rgba(255,225,77,.3)}
  #clearScreen{overflow-y:auto;justify-content:flex-start;padding-top:42px;padding-bottom:42px;background:radial-gradient(circle at 50% 25%,rgba(255,225,77,.23),rgba(5,6,15,.9) 58%)}
  #clearScreen > *:not(#victoryFx){position:relative;z-index:2;flex-shrink:0}
  #clearScreen.celebrating #clearTitle{animation:victoryTitle .85s cubic-bezier(.17,1.6,.3,1) both,victoryGlow 1.1s ease-in-out infinite alternate .85s}
  #victoryFx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  #victoryFx::before{content:"";position:absolute;left:50%;top:28%;width:760px;height:760px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,225,77,.18) 0 8deg,transparent 8deg 18deg);animation:victoryRays 12s linear infinite}
  .victory-piece{position:absolute;top:-35px;left:var(--x);width:10px;height:20px;border-radius:2px;background:var(--color);box-shadow:0 0 10px var(--color);animation:victoryFall var(--duration) var(--delay) linear infinite;transform:rotate(var(--turn))}
  #hallForm{width:min(100%,370px);display:grid;gap:10px;padding:16px;border:1px solid rgba(34,230,255,.45);border-radius:15px;background:rgba(3,8,24,.78);text-align:left;box-shadow:0 0 30px rgba(34,230,255,.12)}
  #hallForm > label:first-child{font-size:13px;font-weight:800;color:#ffe14d;letter-spacing:.04em}
  #hallName{width:100%;padding:13px 14px;border:2px solid rgba(34,230,255,.65);border-radius:10px;outline:none;background:#fff;color:#10152b;font:700 16px/1.2 inherit;user-select:text;touch-action:auto}
  #hallName:focus{border-color:#ffe14d;box-shadow:0 0 18px rgba(255,225,77,.38)}
  #hallPrivacy{font-size:11px;line-height:1.65;color:#dceaff}
  .hall-confirm{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.55;color:#fff;cursor:pointer}
  .hall-confirm input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:#3dff9e}
  #hallError{min-height:1.4em;color:#ff8da3;font-size:12px;font-weight:800;text-align:center}
  #hallSubmit{width:100%;font-size:14px;padding:12px 20px}
  #hallSuccess{width:min(100%,370px);padding:19px 17px;border:2px solid #ffe14d;border-radius:16px;background:rgba(255,225,77,.12);box-shadow:0 0 38px rgba(255,225,77,.3);line-height:1.75}
  #hallSuccess p{font-size:12px}
  #hallSavedName{display:block;margin:8px 0 12px;color:#fff;font-size:clamp(25px,7vw,38px);text-shadow:0 0 16px #22e6ff;overflow-wrap:anywhere}
  .hall-crown{font-size:48px;animation:crownBounce 1.1s ease-in-out infinite}
  @keyframes victoryTitle{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}65%{opacity:1;transform:scale(.88) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes victoryGlow{to{text-shadow:0 0 18px #ffe14d,0 0 46px #ff2d9b,0 0 70px #22e6ff}}
  @keyframes victoryRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes victoryFall{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--drift),1050px,0) rotate(900deg);opacity:.9}}
  @keyframes crownBounce{50%{transform:translateY(-7px) rotate(5deg)}}

  /* wave banner */
  #waveBanner{
    position:absolute;top:38%;left:0;right:0;text-align:center;
    pointer-events:none;z-index:6;opacity:0;
  }
  #waveBanner .wb-main{font-size:clamp(24px,7vw,44px);font-weight:900;letter-spacing:5px;color:#fff;text-shadow:0 0 20px var(--neon-magenta)}
  #waveBanner .wb-sub{font-size:14px;letter-spacing:6px;color:var(--neon-yellow);margin-top:4px}
  .wb-show{animation:wbShow 2.4s ease forwards}
  @keyframes wbShow{
    0%{opacity:0;transform:translateY(20px) scale(.9)}
    15%{opacity:1;transform:translateY(0) scale(1)}
    80%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(-14px) scale(1.02)}
  }

  /* mobile controls hint */
  #touchHint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:11px;opacity:.4;letter-spacing:2px;pointer-events:none}
  @media(hover:hover){#touchHint{display:none}}