:root { --gold:#ffc83d; --ink:#0b0720; }
* { box-sizing:border-box; margin:0; }
html, body { height:100%; background:radial-gradient(ellipse at 50% 0%, #2a1660, var(--ink) 70%); color:#fff; font-family:Fredoka, sans-serif; overflow:hidden; }
body { touch-action:none; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; }
.top { display:flex; align-items:center; gap:10px; padding:8px 12px; }
.back { cursor:pointer; font-size:17px; width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; text-decoration:none; color:#fff; background:rgba(0,0,0,.4); border:2px solid rgba(255,255,255,.3); }
.hud { flex:1; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:flex-end; }
.hud small { display:block; font-weight:700; font-size:11px; letter-spacing:.08em; color:#d8d0ff; }
.hud b { font:400 clamp(16px, 2.6vw, 24px) "Lilita One", sans-serif; color:var(--gold); text-shadow:0 2px 0 #6b3d00; }
.stats { display:flex; gap:8px; font-style:normal; font-size:clamp(14px, 2.2vw, 18px); } .stats i { font-style:normal; background:rgba(0,0,0,.35); padding:2px 8px; border-radius:999px; }
.stage-wrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:4px 8px 8px; }
canvas { max-width:100%; max-height:100%; border-radius:16px; box-shadow:0 0 0 3px rgba(255,200,61,.5), 0 18px 40px rgba(0,0,0,.5); image-rendering:auto; }
.pad { display:none; justify-content:space-between; align-items:center; padding:6px 18px 16px; }
@media (pointer:coarse) { .pad { display:flex; } }
.dpad { position:relative; width:150px; height:150px; }
.dpad button, .bombbtn, .actbtn { position:absolute; width:52px; height:52px; border-radius:14px; border:2px solid rgba(255,255,255,.35); background:rgba(20,12,56,.8); color:#fff; font-size:22px; touch-action:none; }
.dpad .u { left:49px; top:0; } .dpad .d { left:49px; bottom:0; } .dpad .l { left:0; top:49px; } .dpad .r { right:0; top:49px; }
.bombbtn { position:static; width:86px; height:86px; border-radius:50%; font-size:36px; background:radial-gradient(circle at 35% 30%, #ffd34d, #ff7a2f); border-color:#fff3; }
.dpad button.on, .bombbtn.on { background:var(--gold); color:#3a2400; }
.overlay { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:16px;
  background:rgba(8,4,26,.82); backdrop-filter:blur(3px); }
.overlay[hidden] { display:none; }
.ov-logo { width:min(520px, 92vw); height:auto; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.overlay h1 { font:400 clamp(30px, 6vw, 52px) "Lilita One", sans-serif; color:var(--gold); text-shadow:0 4px 0 #7a4b00; }
.overlay p { max-width:560px; color:#e3dcff; } .overlay .keys { font-weight:700; color:#7dff9a; }
.btn { font:400 24px "Lilita One", sans-serif; padding:12px 40px; border-radius:999px; border:none; cursor:pointer; color:#3a2400;
  background:linear-gradient(#ffe27a, var(--gold)); box-shadow:0 5px 0 #b8770a; }
.langs { display:flex; gap:6px; } .langs button { font:600 13px Fredoka, sans-serif; padding:5px 10px; border-radius:999px; cursor:pointer; color:#fff; background:rgba(0,0,0,.3); border:2px solid rgba(255,255,255,.35); }
.langs button[aria-pressed="true"] { background:var(--gold); color:#2a1700; border-color:var(--gold); }
.btns { display:flex; align-items:flex-end; gap:12px; }
.actbtn { position:static; width:58px; height:58px; border-radius:50%; font-size:26px; background:radial-gradient(circle at 35% 30%, #c7a6ff, #6a3cff); }
.actbtn.on { background:var(--gold); }
.overlay .note { font-weight:700; color:#ffe9a8; background:rgba(0,0,0,.35); padding:8px 14px; border-radius:12px; }