:root{
  --bg:#0d0a18; --panel:rgba(14,12,26,.78); --stroke:rgba(140,110,255,.55);
  --text:#f0eeff; --sub:#b4b0d4; --hp:#5ae678; --hplow:#ff5060; --en:#50d2ff;
  --combo:#ffd246; --boss:#ff46aa; --shield:#78f0ff; --reward:#ffeb5a;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:#9fdcff}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid #241d3d;flex-wrap:wrap}
.brand{font-weight:900;font-size:20px;color:#fff;text-decoration:none}.brand span{color:#ff46aa}
.site-head nav a{margin-left:14px;font-size:14px;text-decoration:none;color:var(--sub)}
main{max-width:1200px;margin:0 auto;padding:12px 16px 40px}
.page-title{font-size:clamp(18px,3vw,28px);margin:8px 0 12px}.page-title small{font-size:.55em;color:var(--sub);font-weight:500;margin-left:6px}
.hint{color:var(--sub);font-size:13px;text-align:center;margin:8px 0 24px}

/* ===== game frame ===== */
#game-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:82vh;margin:0 auto;background:#000;border-radius:14px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;container-type:inline-size}
#game-wrap:fullscreen{max-height:none;border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
#game-wrap:-webkit-full-screen{max-height:none;border-radius:0;width:100vw;height:100vh}
#game{display:block;width:100%;height:100%}
.hidden{display:none!important}

/* ===== HUD ===== */
#hud{position:absolute;inset:0;pointer-events:none;font-size:clamp(9px,1.25cqw,15px)}
.panel{position:absolute;background:var(--panel);border:1.5px solid var(--stroke);border-radius:10px;padding:.6em .8em}
.stats{left:1%;top:2%;width:24em}
.hud-title{color:var(--en);font-weight:900;font-size:.85em;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-level{color:var(--sub);font-size:.8em;margin-bottom:.4em}
.bar{position:relative;height:1.35em;background:#1e1c2e;border-radius:6px;overflow:hidden;margin-top:.35em}
.bar .fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:6px;transition:width .08s}
.fill.hp{background:var(--hp)}.fill.en{background:var(--en)}.fill.bo{background:var(--boss)}
.bar span{position:relative;z-index:1;font-size:.8em;font-weight:700;padding-left:.6em;line-height:1.7em;text-shadow:0 1px 2px #000}
.combo-row{display:flex;align-items:center;gap:.6em;height:1.6em;margin-top:.35em}
#comboText{color:var(--combo);font-weight:900;font-size:1.05em;white-space:nowrap}
.combo-bar{flex:1;height:.45em;background:#2d2814;border-radius:3px;overflow:hidden;visibility:hidden}
#comboFill{height:100%;background:var(--combo);width:0}
.objective{left:50%;top:2%;transform:translateX(-50%);width:34em;text-align:center}
#objText{font-weight:800;font-size:1.05em}#objSub{color:var(--combo);font-size:.9em;margin-top:.15em;min-height:1.1em}
.bosspanel{left:50%;top:15%;transform:translateX(-50%);width:38em;border-color:var(--boss)}
.boss-name{color:var(--boss);font-weight:900}
.bar.boss{height:1.1em}
.boss-shield{text-align:center;font-size:.85em;margin-top:.3em;color:var(--shield);font-weight:700}
#abilities{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);display:flex;gap:.6em}
.slot{position:relative;width:4.6em;height:4.6em;background:var(--panel);border:2px solid #5ad2ff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.slot b{font-size:1.9em;line-height:1;color:#5ad2ff}.slot i{font-style:normal;font-size:.62em;color:var(--sub);margin-top:.3em}
#slotDash{border-color:#ffeb5a}#slotDash b{color:#ffeb5a}
.slot.soon{border-color:#555;opacity:.6}
.slot .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.6)}
.slot .lock{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-size:1.2em;font-weight:900}
.slot.locked .lock,.slot.soon .lock{display:flex}.slot.soon .lock{font-size:.75em}
#banner{position:absolute;left:0;right:0;top:30%;text-align:center;opacity:0;transition:opacity .3s}
#banner.show{opacity:1}
#banner .t{font-size:2.6em;font-weight:900;text-shadow:0 3px 8px #000,0 0 18px rgba(255,70,170,.6)}
#banner .s{font-size:1.25em;margin-top:.2em;text-shadow:0 2px 6px #000}
#toasts{position:absolute;right:1%;top:2%;display:flex;flex-direction:column;align-items:flex-end;gap:.4em;max-width:26em}
.toast{background:var(--panel);border-radius:8px;padding:.45em .8em;font-size:.9em;transition:opacity .4s}
#crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 6px #5ad2ff}
#crosshair::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#fff;border-radius:50%}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,30,60,.75));opacity:0;transition:opacity .45s}
#dmgLayer{position:absolute;inset:0;overflow:hidden}
.dmg{position:absolute;font-weight:900;color:#fff58c;text-shadow:0 2px 3px #000;font-size:1.3em;transform:translate(-50%,-50%);white-space:nowrap}
.hud-buttons{position:absolute;right:1%;bottom:2.5%;display:flex;gap:.4em;pointer-events:auto}
.hud-buttons button{width:2.6em;height:2.6em;border-radius:8px;border:1px solid var(--stroke);background:var(--panel);color:#fff;font-size:1.1em;cursor:pointer}

/* ===== touch ===== */
#touch{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:4%;bottom:8%;width:28cqh;height:28cqh;min-width:110px;min-height:110px;max-width:170px;max-height:170px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.25);pointer-events:auto}
#knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:rgba(255,255,255,.35)}
.tbtn{position:absolute;pointer-events:auto;border-radius:50%;border:2px solid rgba(255,255,255,.4);color:#fff;font-weight:900;font-size:14px;background:rgba(90,210,255,.25)}
#tZap{right:5%;bottom:12%;width:84px;height:84px;background:rgba(90,210,255,.35)}
#tJump{right:calc(5% + 92px);bottom:6%;width:62px;height:62px}
#tDash{right:4%;bottom:calc(12% + 92px);width:62px;height:62px;background:rgba(255,235,90,.3)}

/* ===== overlay ===== */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(40,20,80,.55),rgba(5,3,12,.92));z-index:5}
.card{max-width:640px;width:92%;text-align:center;padding:20px}
.logo{font-size:clamp(24px,5cqw,48px);font-weight:900;background:linear-gradient(90deg,#5ad2ff,#ff46aa,#ffd246);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:var(--sub);margin:6px 0 18px}
button.big{font-size:clamp(16px,2.4cqw,22px);font-weight:900;padding:.7em 2.2em;border-radius:999px;border:0;color:#120c22;background:linear-gradient(90deg,#5ad2ff,#ff46aa);cursor:pointer;box-shadow:0 0 24px rgba(255,70,170,.5)}
.controls{margin-top:18px;font-size:clamp(11px,1.5cqw,14px);color:var(--sub);display:grid;gap:6px;text-align:left}
.controls b{color:#fff;margin-right:6px}
.card h2{margin:0 0 10px;font-size:clamp(22px,4cqw,40px)}
.card p{color:var(--sub)}

/* ===== content ===== */
.content{max-width:820px;margin:28px auto;line-height:1.75;color:#dcd8f0}
.content h2{color:#fff;border-left:4px solid #ff46aa;padding-left:10px}
.content h3{margin-bottom:4px;color:#fff}
.site-foot{text-align:center;color:var(--sub);font-size:13px;padding:20px;border-top:1px solid #241d3d}
@media (max-width:700px){ .site-head nav a{margin-left:8px} #game-wrap{border-radius:8px} }

.menu-audio{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.menu-audio button{cursor:pointer;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:clamp(12px,1.6cqw,14px)}
.menu-audio button.off{opacity:.55;text-decoration:line-through}
.hud-buttons button.off{opacity:.5}