:root{--bg:#0f1420;--panel:#1a2234;--ink:#e8ecf5;--dim:#8a96b0;--gold:#f5c542;--red:#ef4444}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(circle at 50% 0,#1d2740,var(--bg));color:var(--ink);font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;padding:6px}
h1{margin:.2em 0;letter-spacing:.04em}
button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:.6em 1.2em;background:var(--gold);color:#222;font-weight:700}
button:disabled{opacity:.4;cursor:default}
button.secondary{background:#2c3856;color:var(--ink)}
input{font:inherit;padding:.6em;border-radius:8px;border:1px solid #33415f;background:#0c111c;color:var(--ink);text-transform:uppercase;width:7em;text-align:center}
#app{width:100%;display:flex;justify-content:center}
.center{max-width:520px;margin:4vh auto;text-align:center;padding:1em}
.row{display:flex;gap:.6em;justify-content:center;margin:1em 0}
.dim{color:var(--dim)}
.picker{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:1em 0}
.picker button{background:var(--panel);color:var(--ink);padding:10px;border:2px solid #33415f}
.picker svg{width:70px;height:70px;display:block;margin:auto}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#7f1d1d;padding:.6em 1em;border-radius:8px;z-index:99}

/* ---- board: a square sized to the viewport; everything inside scales with cqw ---- */
.board{position:relative;width:min(100vw - 12px,100vh - 12px,100dvh - 12px);aspect-ratio:1;container-type:size;background:#121a2b;border-radius:2.5cqw;border:2px solid #25324f}
.cell{position:absolute;width:11.11%;height:11.11%;padding:.3cqw}
.cell>div{width:100%;height:100%;border-radius:1.4cqw;font-size:1.9cqw;color:#0008;font-weight:700;padding:.5cqw .8cqw;position:relative}
.s1>div{background:#7ec8a0}.s2>div{background:#e6b86a}.s3>div{background:#9aa9f0}
.cell.chest>div{background:var(--gold);box-shadow:0 0 10px #f5c54288}
.cell.chest>div::after{content:"🧰";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4.5cqw}
.start{position:absolute;left:0;top:77.7%;width:11.11%;height:11.11%;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:1.8cqw;letter-spacing:.1em}
.final{position:absolute;left:6%;top:36%;width:76%;height:28%;border-radius:50%;background:radial-gradient(circle,#5a1020,#2a0a14 70%);border:.5cqw dashed var(--red);display:flex;justify-content:center;padding-top:1.5cqw;color:#ff8a8a;font-weight:800;letter-spacing:.2em;font-size:2.2cqw}
.token{position:absolute;width:8.5%;height:8.5%;z-index:5;pointer-events:none;filter:drop-shadow(0 3px 3px #0008)}
.token svg{width:100%;height:100%;transform-origin:50% 100%}
.token.active{animation:bob .8s infinite alternate}
.token.hurt{animation:shake .4s}
@keyframes bob{to{transform:translateY(-6px)}}
@keyframes shake{25%{transform:translateX(-8px) rotate(-6deg)}75%{transform:translateX(8px) rotate(6deg)}}
.missile{position:absolute;width:3%;height:1.6%;background:linear-gradient(90deg,#ff7a00,#ffe066);border-radius:4px;z-index:9;box-shadow:0 0 10px #ff9b3d;transition:left .5s ease-in,top .5s ease-in}

/* ---- HUD in the middle of the board ---- */
.hud{position:absolute;left:1.5%;width:85.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;z-index:6}
.hud.top{top:11.8%;height:23.5%}
.hud.bottom{top:65%;height:23%}
.banner{font-weight:800;font-size:3.8cqw;color:var(--gold);white-space:nowrap}
.pcards{display:flex;gap:1.5cqw;width:100%}
.pcard{flex:1;min-width:0;background:var(--panel);border-radius:1.6cqw;padding:1cqw 1.4cqw;border:.4cqw solid transparent;display:grid;grid-template-columns:7.5cqw 1fr;column-gap:1.2cqw;align-items:center;font-size:2.5cqw;line-height:1.25}
.pcard.turn{border-color:var(--gold)}
.pcard .sp{grid-row:span 2;width:7.5cqw;height:7.5cqw}
.pcard .sp svg{width:100%;height:100%}
.pcard .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .st{color:var(--dim);white-space:nowrap}
.hearts{font-size:2.4cqw;white-space:nowrap;grid-column:1/-1;margin-top:.4cqw}
.controls{display:flex;gap:2cqw;align-items:center}
.controls button{font-size:3.4cqw;padding:0 3cqw;height:9.5cqw;border-radius:2cqw}
.die{width:11cqw;height:11cqw;border-radius:2cqw;background:#fff;color:#111;font-size:6cqw;font-weight:800;display:flex;align-items:center;justify-content:center}
.die.rolling{animation:shake .3s infinite}
.last{font-size:2.5cqw;color:var(--dim);text-align:center;max-width:100%;height:6cqw;overflow:hidden;line-height:1.2}

/* ---- effects ---- */
.puff{position:absolute;width:5cqw;height:2cqw;margin:-1cqw 0 0 -2.5cqw;border-radius:50%;background:#ffffffaa;z-index:4;pointer-events:none;animation:puff .45s ease-out forwards}
@keyframes puff{to{transform:scale(2.6,1.8);opacity:0}}
.float{position:absolute;z-index:12;pointer-events:none;font-weight:800;font-size:4cqw;color:#fff;text-shadow:0 0 6px #000,0 0 3px #000;white-space:nowrap;animation:float 1.1s ease-out forwards}
@keyframes float{from{transform:translateY(0) scale(.6);opacity:0}15%{transform:translateY(-2cqw) scale(1.2);opacity:1}to{transform:translateY(-9cqw) scale(1);opacity:0}}
.board.shake{animation:bshake .4s}
@keyframes bshake{20%{transform:translate(-1.2cqw,.4cqw)}40%{transform:translate(1.2cqw,-.4cqw)}60%{transform:translate(-.8cqw,0)}80%{transform:translate(.8cqw,0)}}
.die.rolling{animation:tumble .25s linear infinite}
@keyframes tumble{to{transform:rotate(360deg)}}
.token.active svg{animation:none}

/* ---- hearts / damage ---- */
.h{display:inline-block}
.h.lost{animation:lost .45s ease-out}
@keyframes lost{0%{transform:scale(2.4);filter:drop-shadow(0 0 6px #f00)}100%{transform:scale(1)}}
.pcard.hit{animation:cardhit .45s}
@keyframes cardhit{0%,100%{background:var(--panel)}30%{background:#7f1d1d;transform:scale(1.04)}}
.board.shake-sm{animation:bshake-sm .3s}
@keyframes bshake-sm{25%{transform:translate(-.5cqw,0)}75%{transform:translate(.5cqw,0)}}
.token.dead{filter:grayscale(1) drop-shadow(0 3px 3px #0008);opacity:.7}
.token.dead svg{transform:rotate(90deg)}

/* ---- game over ---- */
.over{position:absolute;inset:0;z-index:30;border-radius:2.2cqw;background:radial-gradient(circle,#000c,#000e);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;animation:overin .6s ease-out;overflow:hidden;text-align:center}
@keyframes overin{from{opacity:0;transform:scale(1.15)}}
.otitle{font-size:11cqw;font-weight:900;letter-spacing:.04em;color:var(--gold);text-shadow:0 0 3cqw #f5c54299;animation:pulse 1s ease-in-out infinite alternate}
.over.lose .otitle{color:#f87171;text-shadow:0 0 3cqw #ef444499}
@keyframes pulse{to{transform:scale(1.07)}}
.owin{width:20cqw;height:20cqw;animation:bounce .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 3cqw #f5c542)}
.owin svg{width:100%;height:100%}
@keyframes bounce{to{transform:translateY(-3cqw) rotate(4deg)}}
.oname{font-size:4.6cqw;font-weight:800}
.finals{display:flex;flex-direction:column;gap:1cqw;width:80%}
.frow{display:flex;align-items:center;gap:2cqw;background:#ffffff14;border-radius:2cqw;padding:1cqw 2cqw;font-size:2.8cqw;text-align:left;border:.4cqw solid transparent}
.frow.w{border-color:var(--gold);background:#f5c54222}
.frow.l{opacity:.85}
.frow .sp{width:8cqw;height:8cqw;flex:none}
.frow .sp svg{width:100%;height:100%}
.frow.l .sp{filter:grayscale(1)}
.frow .fn{flex:1}
.frow .fl{text-align:right}
.frow .fl b{font-size:6cqw;line-height:1}
.over .row{margin:.5cqw 0 0}
.over button{font-size:3.2cqw}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-4cqw;width:1.6cqw;height:2.4cqw;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110cqw) rotate(720deg)}}