:root{
  --ink:#2a1a0d;
  --gold:#f0b429;
  --gold-d:#c98610;
  --cream:#fff6e2;
  --red:#e8503a;
  --green:#3fbf6a;
  --blue:#2f80ed;
  --shadow:0 6px 0 rgba(0,0,0,.28);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#1a1410}
body{user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:fixed;inset:0}
canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;color:var(--cream)}
.hud-top{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:14px}
.chip{
  background:rgba(32,20,10,.72);border:3px solid rgba(255,255,255,.14);
  border-radius:16px;padding:6px 16px;min-width:104px;text-align:center;
  box-shadow:var(--shadow);backdrop-filter:blur(4px);
}
.chip .lbl{display:block;font-size:11px;letter-spacing:.14em;opacity:.65}
.chip span:last-child{font-size:26px;font-weight:800;line-height:1.05;display:block}
.chip.combo span:last-child{color:var(--gold)}

.hud-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 14px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bars{display:flex;flex-direction:column;gap:6px;width:min(460px,92vw)}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em}
.bar-row .side{width:74px;opacity:.7}
.bar-row .state{width:104px;font-weight:800;font-size:12px}
.bar{position:relative;flex:1;height:16px;border-radius:10px;background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.14);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:8px;background:var(--gold);transition:width .08s linear}
.bar b.perfect{position:absolute;top:-2px;bottom:-2px;left:58%;width:20%;background:rgba(255,255,255,.18);
  border-left:2px solid rgba(255,255,255,.55);border-right:2px solid rgba(255,255,255,.55)}

.power-wrap{width:min(320px,80vw);text-align:center;font-size:11px;letter-spacing:.14em;opacity:0;transition:opacity .12s}
.power-wrap.on{opacity:.95}
.power{height:14px;border-radius:9px;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.16);overflow:hidden;margin-top:4px}
.power i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red))}

.hint{background:rgba(32,20,10,.72);border-radius:12px;padding:6px 14px;font-size:14px;font-weight:700;
  border:2px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}

#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  font-size:44px;font-weight:900;text-shadow:0 4px 0 rgba(0,0,0,.35);letter-spacing:.02em}
#toast.show{animation:pop .9s ease-out}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  70%{opacity:1;transform:translate(-50%,-90%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-140%) scale(.95)}
}

.touch-ui{position:absolute;right:14px;bottom:110px;display:none;flex-direction:column;gap:10px;pointer-events:auto}
.touch-ui button{
  width:110px;padding:14px 0;border:none;border-radius:16px;font-weight:900;font-size:15px;
  background:var(--gold);color:var(--ink);box-shadow:var(--shadow);
}
@media (hover:none) and (pointer:coarse){ .touch-ui{display:flex} }

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,rgba(60,35,15,.55),rgba(10,7,4,.92));z-index:5}
.panel{
  width:min(560px,92vw);background:linear-gradient(180deg,#3a2614,#241708);
  border:5px solid var(--gold);border-radius:28px;padding:28px 30px 26px;text-align:center;
  color:var(--cream);box-shadow:0 14px 0 rgba(0,0,0,.35),0 0 0 6px rgba(0,0,0,.25)
}
.panel h1{font-size:38px;line-height:1.05;letter-spacing:.01em;text-shadow:0 4px 0 rgba(0,0,0,.35)}
.panel h1 em{color:var(--gold);font-style:normal}
.tag{margin-top:12px;font-size:15px;opacity:.85;line-height:1.5}
.tag.small{font-size:12px;margin-top:10px;opacity:.6}
.keys{list-style:none;margin:18px auto 4px;max-width:420px;text-align:left;font-size:14px;line-height:2}
.keys em{opacity:.7;font-style:normal}
kbd{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.22);border-bottom-width:4px;
  border-radius:8px;padding:1px 9px;font-size:12px;font-weight:800;letter-spacing:.06em;margin-right:8px}
button.big{
  margin-top:20px;padding:14px 46px;border:none;border-radius:18px;cursor:pointer;
  font-size:22px;font-weight:900;letter-spacing:.06em;color:#3a2000;
  background:linear-gradient(180deg,#ffd061,var(--gold));box-shadow:0 6px 0 var(--gold-d);
  transition:transform .06s,box-shadow .06s;pointer-events:auto
}
button.big:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--gold-d)}
button.big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-d)}
.best{margin-top:14px;font-size:13px;opacity:.7}
.final{margin-top:16px;font-size:30px;font-weight:900;color:var(--gold)}