:root{
  --ember:#ff7a1a;
  --ember-hot:#ffc247;
  --blood:#c41a1a;
  --ink:#08060a;
  --ink2:#120b10;
  --ash:#6b5f63;
  --txt:#f2e6dc;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#000;}
body{
  font-family:"Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}
#app{position:fixed;inset:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;background:#07050a}

/* ---------- atmosphere ---------- */
#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%);
  mix-blend-mode:multiply;
}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%, rgba(255,180,90,.35), rgba(200,40,20,.25) 60%, rgba(0,0,0,0) 100%);}

.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}
.hud-left{position:absolute;top:18px;left:20px;width:min(320px,42vw)}
.hud-right{position:absolute;top:18px;right:20px;text-align:right}
.hud-bottom{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center}

.bar{position:relative;height:20px;border-radius:11px;background:rgba(10,6,8,.72);
  border:1px solid rgba(255,150,70,.28);overflow:hidden;
  box-shadow:0 0 18px rgba(255,90,20,.16), inset 0 0 12px rgba(0,0,0,.7);}
.bar.aura{height:7px;margin-top:6px;border-radius:5px}
.bar-fill{position:absolute;inset:0;width:100%;transform-origin:left;
  background:linear-gradient(90deg,#ff3b0f,#ff9a1f 65%,#ffd97a);
  box-shadow:0 0 14px rgba(255,120,30,.75);transition:transform .12s linear}
.bar-ghost{position:absolute;inset:0;width:100%;transform-origin:left;background:rgba(255,90,60,.45);transition:transform .55s .2s ease-out}
.bar.aura .bar-fill{background:linear-gradient(90deg,#5ad7ff,#9ef0ff);box-shadow:0 0 12px rgba(90,215,255,.6)}
.bar-label{position:absolute;right:9px;top:0;line-height:20px;font-size:12px;font-weight:700;
  text-shadow:0 1px 3px #000;letter-spacing:.4px}

.stats{display:flex;gap:8px;margin-top:10px}
.chip{font-size:11px;letter-spacing:1.4px;color:#cbb7ad;background:rgba(12,7,9,.66);
  border:1px solid rgba(255,140,60,.18);padding:4px 9px;border-radius:999px;backdrop-filter:blur(3px)}
.chip b{color:#ffd9a8;font-size:13px;letter-spacing:.5px}
.chip.best b{color:#ff8a4a}

#comboWrap{margin-bottom:10px}
#comboX{font-size:34px;font-weight:900;line-height:1;color:#ffd166;
  text-shadow:0 0 18px rgba(255,140,30,.9),0 2px 0 #6b1d05;letter-spacing:-1px;
  transform-origin:right center;transition:transform .08s ease-out}
.combo-bar{width:132px;height:4px;margin:5px 0 0 auto;background:rgba(255,255,255,.13);border-radius:3px;overflow:hidden}
.combo-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a1f,#ffe08a);
  box-shadow:0 0 10px rgba(255,140,40,.9);transform-origin:right}
.wave-info{font-size:12px;letter-spacing:1.6px;color:#ffb066;text-shadow:0 0 12px rgba(255,110,20,.5)}
.wave-info.calm{color:#9fd8a0;text-shadow:0 0 12px rgba(90,220,120,.4)}
.threat{font-size:11px;letter-spacing:1.4px;color:#8c7a74;margin-top:4px;height:13px}

.abilities{display:flex;gap:10px}
.ab{position:relative;width:74px;height:56px;border-radius:10px;
  background:linear-gradient(180deg,rgba(30,16,12,.82),rgba(12,7,9,.86));
  border:1px solid rgba(255,140,60,.24);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,180,120,.12), 0 6px 20px rgba(0,0,0,.5)}
.ab-key{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:9.5px;letter-spacing:1.2px;color:#ffcf9a;opacity:.85}
.ab-name{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.9px;color:#b9a49a}
.ab-cd{position:absolute;left:0;right:0;bottom:0;height:100%;background:rgba(4,2,3,.72);
  transform-origin:bottom;transform:scaleY(0);pointer-events:none}
.ab-cd i{position:absolute;inset:0;border-top:2px solid rgba(255,90,30,.5)}
.ab.ready{border-color:rgba(255,150,60,.6);box-shadow:0 0 18px rgba(255,110,30,.28), inset 0 1px 0 rgba(255,200,150,.2)}
.ab.ready .ab-name{color:#ffd8a6}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%, rgba(60,14,4,.42), rgba(3,2,4,.9) 70%);
  backdrop-filter:blur(3px);z-index:5}
.panel{width:min(620px,90vw);text-align:center;padding:34px 30px 28px;border-radius:20px;
  background:linear-gradient(180deg,rgba(28,14,12,.9),rgba(10,6,9,.94));
  border:1px solid rgba(255,140,60,.26);
  box-shadow:0 30px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,190,140,.14)}
.panel.small{width:min(360px,86vw);padding:28px}
.title{font-size:clamp(44px,9vw,86px);line-height:.92;font-weight:900;letter-spacing:-2px;margin-bottom:6px}
.title .t1{color:#ffd07a;text-shadow:0 0 30px rgba(255,120,20,.7)}
.title .t2{color:#ff3d10;text-shadow:0 0 40px rgba(255,40,0,.8);margin-left:.12em}
.tag{color:#c6ada2;font-size:14px;letter-spacing:.4px;margin-bottom:22px}
h2{font-size:clamp(26px,5vw,40px);font-weight:900;letter-spacing:-.5px;margin-bottom:8px}
h2.dead{color:#ff5530;text-shadow:0 0 34px rgba(255,60,10,.7)}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:0 0 24px}
.ctrl{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);text-align:left}
.ctrl b{font-size:10.5px;letter-spacing:1px;color:#ffcf8f;background:rgba(255,120,30,.12);
  border:1px solid rgba(255,140,60,.28);border-radius:5px;padding:3px 6px;white-space:nowrap}
.ctrl span{font-size:11.5px;color:#b6a29a}
.btn{pointer-events:auto;cursor:pointer;font-family:inherit;font-weight:800;letter-spacing:2px;
  color:#2a0d00;background:linear-gradient(180deg,#ffce6a,#ff7a18);
  border:none;border-radius:12px;padding:13px 26px;font-size:14px;
  box-shadow:0 10px 30px rgba(255,90,20,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .1s ease, box-shadow .1s ease, filter .1s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,90,20,.5), inset 0 1px 0 rgba(255,255,255,.6);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.big{font-size:17px;padding:16px 40px;width:min(360px,100%)}
.btn.ghost{background:transparent;color:#b09a90;border:1px solid rgba(255,255,255,.16);box-shadow:none;margin-top:10px}
.btn.ghost:hover{color:#ffb27a;border-color:rgba(255,140,60,.5)}
.hint{margin-top:14px;font-size:11.5px;color:#8b7a74;letter-spacing:.6px}
.finalStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 24px}
.finalStats div{padding:12px 6px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.finalStats b{display:block;font-size:24px;color:#ffd07a;letter-spacing:-.5px}
.finalStats span{font-size:9.5px;letter-spacing:1.3px;color:#9c8981}
.newbest{color:#8bff9e;font-weight:800;letter-spacing:3px;font-size:13px;margin-bottom:16px;
  text-shadow:0 0 20px rgba(90,255,140,.6);animation:pulse .7s infinite alternate}
@keyframes pulse{to{opacity:.45}}

/* ---------- misc ---------- */
#soundToggle{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;
  color:#ffcf8f;background:rgba(18,10,12,.8);border:1px solid rgba(255,140,60,.24);
  transition:transform .1s, opacity .2s}
#soundToggle:hover{transform:translateX(-50%) scale(1.08)}
#soundToggle.off{opacity:.35;text-decoration:line-through}

#touch{position:absolute;inset:0;z-index:4;pointer-events:none}
#stick{position:absolute;left:26px;bottom:26px;width:124px;height:124px;border-radius:50%;
  background:rgba(20,12,14,.42);border:1px solid rgba(255,140,60,.22);pointer-events:auto}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffb765,#ff5a15);box-shadow:0 0 24px rgba(255,90,20,.6)}
#tbtns{position:absolute;right:22px;bottom:30px;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.tb{width:76px;height:60px;border-radius:14px;font-family:inherit;font-weight:800;font-size:12px;letter-spacing:1px;
  color:#2a0d00;background:linear-gradient(180deg,#ffce6a,#ff7a18);border:none;
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45)}
.tb:active{transform:scale(.94);filter:brightness(1.15)}