:root{--navy:#0a0f1d;--line:rgba(229,184,75,.3);--gold:#e5b84b;--gold-l:#fff1c1;--text:#f5ecd7;--muted:#b9b09c;--hp:#d2424f;--violet:#a78bfa;--serif:Georgia,"Times New Roman",serif;--display:"Cinzel",Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 0%,#2a1a12 0%,#141018 45%,var(--navy) 80%);color:var(--text);font-family:var(--serif);overscroll-behavior:none}
body{min-height:100dvh;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button{font:inherit;cursor:pointer;color:inherit}
[hidden]{display:none!important}
.back{color:var(--gold);text-decoration:none;font-size:14px}
.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:12px 0 6px}
.lead{color:var(--muted);line-height:1.5;margin:0 0 14px}
.lead b{color:var(--gold-l)}
.fine{color:var(--muted);font-size:13px;margin:10px 0 0;text-align:center}
.label{font-family:var(--display);color:var(--gold-l);margin:4px 0 8px;font-size:15px}
.primary{width:100%;padding:14px;border:0;border-radius:12px;background:linear-gradient(180deg,#f0c75e,#c99528);color:#1a1205;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(229,184,75,.3)}
.primary:active{transform:scale(.98)}
.primary:disabled{opacity:.5}
.ghost{padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--gold-l);font-size:14px;text-decoration:none;text-align:center}
.ghost:disabled{opacity:.45}
.ghost.wide{display:block;width:100%;margin-top:10px}

.screen{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.card{width:100%;max-width:470px;background:linear-gradient(180deg,#2a1d1a,#121022);border:1px solid var(--line);border-radius:22px;padding:24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 90px rgba(229,184,75,.1)}
.card h1{font-family:var(--display);font-size:31px;line-height:1.15;margin:0 0 10px;color:var(--gold-l)}
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.starter{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;border:1px solid var(--line);background:#16121f;font-size:13px;text-align:center;line-height:1.25}
.starter small{color:var(--muted);font-size:11px}
.starter canvas{width:44px;height:44px}
.starter[aria-checked="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 16px rgba(229,184,75,.3);background:#2a2010}

.game{position:fixed;inset:0;overflow:hidden;touch-action:none}
#arena{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 0;pointer-events:none}
.hud-left{flex:1;max-width:220px}
.hp{position:relative;height:20px;border-radius:10px;background:rgba(10,8,16,.75);border:1px solid rgba(255,255,255,.15);overflow:hidden}
.hp i{position:absolute;inset:0;right:auto;width:100%;background:linear-gradient(180deg,#ff7480,var(--hp));transition:width .15s}
.hp span{position:relative;display:block;text-align:center;font-size:12px;line-height:20px;font-weight:700;text-shadow:0 1px 2px #000}
.xpbar{height:6px;margin-top:5px;border-radius:6px;background:rgba(10,8,16,.75);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),#e0d4ff)}
.coins{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:16px;color:var(--gold-l);text-shadow:0 1px 3px #000}
.coins.big{font-size:20px;margin:0}
.spark{width:14px;height:14px;background:linear-gradient(135deg,#fff1c1,#e5b84b 55%,#9a6b12);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 8px rgba(229,184,75,.8)}
.hud-center{text-align:center;flex:1;text-shadow:0 2px 6px #000}
.hud-center p{margin:0;font-family:var(--display);font-size:14px;color:var(--gold-l)}
.hud-center b{font-family:var(--display);font-size:30px;color:#fff}
.round{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(10,8,16,.75);color:var(--gold);font-weight:700}
.banner{position:absolute;left:0;right:0;top:32%;text-align:center;font-family:var(--display);font-size:30px;color:var(--gold-l);text-shadow:0 0 18px rgba(229,184,75,.7),0 2px 8px #000;pointer-events:none;opacity:0;transition:opacity .4s;margin:0;padding:0 16px}
.banner.show{opacity:1}

.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(6,5,12,.72);backdrop-filter:blur(3px);overflow-y:auto}
.panel{width:100%;max-width:420px;background:linear-gradient(180deg,#2a1d1a,#121022);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);margin:auto}
.panel.wide{max-width:640px}
.panel h2{font-family:var(--display);color:var(--gold-l);margin:0 0 12px;font-size:22px}
.choices{display:grid;gap:10px}
.choice{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#17131f;min-height:58px}
.choice:not(:disabled):active{transform:scale(.99)}
.choice b{color:var(--gold-l);font-size:15px}
.choice small{color:var(--muted);font-size:13px;line-height:1.35}
.choice .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.choice .cost{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--gold);font-weight:700}
.choice.sold{opacity:.35}
.choice:disabled{cursor:default}
.choice.poor .cost{color:#ff9aa2}
.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:6px}
.shop-head h2{margin-bottom:6px}
.shop-foot{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:12px}
.kit{margin-top:12px;color:var(--muted);font-size:13px}
.kit summary{cursor:pointer;color:var(--gold-l)}
.kit ul,#pause-kit ul{margin:8px 0;padding-left:18px;line-height:1.5}
#pause-kit{font-size:13px;color:var(--muted);margin-bottom:12px}
@media (max-width:420px){.shop-grid{grid-template-columns:1fr}.choice{min-height:0;padding:10px 12px}.hud-center b{font-size:26px}}