:root{--bg:#16111f;--fg:#f4ecff;--muted:#c9bddf;--accent:#ffcf4a;--on-accent:#1a1020;--hero:#3d9bff;--enemy:#ff4d4d;--heal:#6fdc8c;--overlay:#0a0610cc;--stone:#2c2342;--stone-lo:#1d1630;--edge:#07050c;--trim:#b8923f;--trim-hi:#ffdd7a;--bevel-hi:#ffffff29;--bevel-lo:#00000080;--well:#110c1b;--gold-btn:linear-gradient(#ffd75e, #e2a62b);--gold-trim:#7a5513;--r:3px;--frame:inset 0 0 0 2px var(--trim), inset 4px 4px 0 0 var(--bevel-hi), inset -4px -4px 0 0 var(--bevel-lo), 0 3px 0 var(--edge);--frame-pressed:inset 0 0 0 2px var(--trim), inset 4px 4px 0 0 var(--bevel-lo), inset -4px -4px 0 0 var(--bevel-hi);--glow:0 0 0 2px var(--trim-hi), 0 0 14px #ffcf4a8c;--mark-move:#3d9bff;--mark-range:#ff6a3c;--mark-blocked:#6b3a8c;--mark-threat:#ff2d55;--tap:48px;--gap:8px;--font:"Alegreya Sans", system-ui, sans-serif;--font-px:"Tiny5", var(--font);--fs-sm:14px;--fs:16px;--fs-lg:20px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);font:var(--fs)/1.3 var(--font);font-variant-ligatures:none;margin:0}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overflow:hidden}#app{position:fixed;inset:0}.board{width:100%;height:100%;image-rendering:pixelated;display:block;position:absolute;inset:0}.gi{fill:currentColor;flex:none;width:1.4em;height:1.4em}.card,.chip,.dialog{border:2px solid var(--edge);border-radius:var(--r);background:linear-gradient(var(--stone), var(--stone-lo));box-shadow:var(--frame)}button{font:700 var(--fs-sm)/1.1 var(--font);color:var(--fg);min-height:var(--tap);min-width:var(--tap);border-radius:var(--r);border:2px solid var(--edge);background:linear-gradient(var(--stone), var(--stone-lo));box-shadow:var(--frame);cursor:pointer;touch-action:manipulation;justify-content:center;align-items:center;gap:6px;display:inline-flex}@media (hover:hover){button:not(:disabled):hover{filter:brightness(1.18)}}button:not(:disabled):active{box-shadow:var(--frame-pressed);transform:translateY(2px)}button:disabled{filter:grayscale(.85)brightness(.65);cursor:default}button:focus-visible{outline:3px solid var(--trim-hi);outline-offset:3px}button[aria-pressed=true]{box-shadow:var(--frame), var(--glow)}button.primary{background:var(--gold-btn);color:var(--on-accent);font:400 var(--fs-lg)/1 var(--font-px);box-shadow:inset 0 0 0 2px var(--gold-trim), inset 4px 4px 0 0 #ffffff59, inset -4px -4px 0 0 #00000040, 0 3px 0 var(--edge);flex:1}button.primary:not(:disabled):active{box-shadow:inset 0 0 0 2px var(--gold-trim), inset 4px 4px 0 0 #00000040, inset -4px -4px 0 0 #ffffff59}button.secondary{padding:0 14px}button.icon{font-size:var(--fs-lg);padding:0}.hud{pointer-events:none;padding:max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right)) max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left));flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.hud>*>*,.cam>*{pointer-events:auto}.cam{pointer-events:none}.top{gap:var(--gap);align-items:flex-start;display:flex}.queue{scrollbar-width:none;flex:1;gap:3px;margin:0;padding:0 0 4px;list-style:none;display:flex;overflow-x:auto}.chip{width:36px;height:var(--tap);font:400 var(--fs-sm)/1 var(--font-px);box-shadow:inset 0 0 0 2px var(--side), inset 4px 4px 0 0 var(--bevel-hi), inset -4px -4px 0 0 var(--bevel-lo), 0 3px 0 var(--edge);flex-direction:column;flex:none;justify-content:center;align-items:center;gap:3px;display:flex}.chip.hero{--side:var(--hero)}.chip.enemy{--side:var(--enemy)}.chip.now{width:44px;box-shadow:inset 0 0 0 2px var(--side), inset 4px 4px 0 0 var(--bevel-hi), inset -4px -4px 0 0 var(--bevel-lo), var(--glow)}.chip-hp{background:#000;width:26px;height:4px;overflow:hidden}.chip-hp i{height:100%;display:block}.chip.hero .chip-hp i{background:var(--hero)}.chip.enemy .chip-hp i{background:var(--enemy)}.menu-btn{flex:none}.bottom{gap:var(--gap);flex-direction:column;display:flex}.card{min-height:112px;padding:10px 14px}.card strong{font:400 var(--fs-lg)/1.2 var(--font-px)}.card p{color:var(--muted);margin:2px 0 0}.bar{gap:var(--gap);justify-content:center;display:flex}.slot{flex-direction:column;flex:1;gap:3px;max-width:76px;min-height:72px;padding:6px 3px;font-size:13px;line-height:1.1;position:relative}.slot .gi{background:var(--well);width:30px;height:30px;padding:4px;box-shadow:inset 2px 2px #000000b3,inset -2px -2px #ffffff14}.slot[aria-pressed=true] .gi{color:var(--trim-hi)}.slot span{-webkit-line-clamp:2;text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;-webkit-box-orient:vertical;max-width:100%;display:-webkit-box;overflow:hidden}.actions{gap:var(--gap);display:flex}.actions .wait{max-width:120px;line-height:1.1}.actions .wait.armed{box-shadow:var(--frame), var(--glow)}.cam{gap:var(--gap);justify-content:flex-end;display:flex}.undo span{font-weight:700}.floats{pointer-events:none;position:absolute;inset:0;overflow:hidden}.float{font:400 22px/1 var(--font-px);text-shadow:0 2px #000,2px 0 #000,-2px 0 #000,0 -2px #000;animation:1.1s ease-out forwards rise;position:absolute;transform:translate(-50%,-50%)}.float.dmg{color:#ffd0c4}.float.miss{color:var(--muted)}.float.heal{color:var(--heal)}@keyframes rise{to{opacity:0;transform:translate(-50%,-150%)}}@media (prefers-reduced-motion:reduce){.float{animation-duration:1.6s;animation-timing-function:step-end}}.overlay{background:var(--overlay);z-index:10;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{width:min(460px,100%);max-height:90dvh;padding:14px 18px 18px;overflow:auto}.dialog-head{justify-content:space-between;align-items:center;gap:var(--gap);display:flex}.dialog h2,.dialog h3{font-family:var(--font-px);margin:0}.dialog h2{font-size:24px}.dialog h3{font-size:var(--fs);color:var(--trim-hi);margin:16px 0 8px}.dialog p{color:var(--muted)}.dialog .primary{width:100%}.legend{gap:6px;margin:0 0 8px;padding:0;list-style:none;display:grid}.legend li{align-items:center;gap:8px;display:flex}.sw{border:1px solid var(--fg);flex:none;width:20px;height:20px}.sw.move{background:var(--mark-move)}.sw.range{background:var(--mark-range)}.sw.blocked{background:var(--mark-blocked)}.sw.threat{background:var(--mark-threat)}.menu-actions{gap:var(--gap);flex-wrap:wrap;margin-top:16px;display:flex}.menu-actions button{flex:1}.choice{margin:0 0 10px}.choice-label{font-size:var(--fs-sm);color:var(--muted);margin-bottom:4px;display:block}.choice-row{flex-wrap:wrap;gap:6px;display:flex}.choice-row button{flex:1;min-width:64px}.hint{display:none}.kbd .hint{color:var(--muted);border:1px solid var(--muted);border-radius:2px;padding:2px 4px;font:700 11px/1 system-ui,sans-serif;display:inline-block}.kbd .primary .hint{color:var(--on-accent);border-color:var(--on-accent)}.kbd .slot .hint{position:absolute;top:3px;right:4px}.keys{font-size:var(--fs-sm);grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;display:grid}.keys dt{white-space:nowrap;font-weight:800}.keys dd{color:var(--muted);margin:0}@media (width>=700px){.bottom{align-self:center;width:560px}}@media (width>=1100px){.top{justify-content:center}.queue{flex:none}.menu-btn{top:max(var(--gap), env(safe-area-inset-top));right:max(var(--gap), env(safe-area-inset-right));position:absolute}.bottom{gap:var(--gap);grid-template-columns:300px auto;grid-template-areas:".cam""card bar""card actions";width:auto;display:grid}.cam{grid-area:cam}.card{grid-area:card;min-height:0}.bar{grid-area:bar;justify-content:flex-start}.slot{flex:none;width:76px}.actions{grid-area:actions;justify-content:flex-end}.actions .primary{flex:none;padding:0 28px}}