:root{--cell: 72px;--bg: #1b1c2b;--grid: #2a2c44;--grid-line: #3a3d5e;--move: #3b82f644;--atk: #ef444455;--cap: #f59e0b66;--txt: #e8e8f0;--accent: #f59e0b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased}#app{max-width:920px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:auto 280px;gap:20px;align-items:start}h1{grid-column:1 / -1;margin:0 0 4px;font-size:22px;letter-spacing:1px}h1 small{color:#8a8db0;font-weight:400;font-size:13px}.board{display:grid;gap:2px;background:var(--grid-line);padding:2px;border-radius:8px;width:max-content;-webkit-user-select:none;user-select:none}.cell{width:var(--cell);height:var(--cell);background:var(--grid);display:flex;align-items:center;justify-content:center;position:relative;cursor:default;transition:background .08s}.cell.move{background:color-mix(in srgb,var(--grid),var(--move) 100%);cursor:pointer}.cell.atk{background:color-mix(in srgb,var(--grid),var(--atk) 100%);cursor:crosshair}.cell.cap{background:color-mix(in srgb,var(--grid),var(--cap) 100%);cursor:pointer}.cell.sel{outline:2px solid var(--accent);outline-offset:-2px}.unit{font-size:34px;line-height:1;filter:drop-shadow(0 2px 2px #0008);pointer-events:none}.unit.foe{transform:scaleX(-1)}.unit.done{opacity:.45}.unit.clickable{pointer-events:auto;cursor:pointer}.hpbar{position:absolute;bottom:4px;left:6px;right:6px;height:5px;background:#0006;border-radius:3px;overflow:hidden}.hpbar>span{display:block;height:100%;background:#46d369;transition:width .2s}.hpbar.low>span{background:#f59e0b}.hpbar.crit>span{background:#ef4444}.type-dot{position:absolute;top:4px;right:4px;font-size:11px}aside{display:flex;flex-direction:column;gap:14px}.panel{background:#23253c;border:1px solid var(--grid-line);border-radius:8px;padding:12px}.panel h2{margin:0 0 8px;font-size:13px;color:#8a8db0;text-transform:uppercase;letter-spacing:1px}.stat{display:flex;justify-content:space-between;font-size:13px;margin:3px 0}.stat b{color:var(--accent)}button{width:100%;padding:9px;margin:4px 0;background:#34375a;color:var(--txt);border:1px solid var(--grid-line);border-radius:6px;font-family:inherit;font-size:13px;cursor:pointer;transition:background .1s}button:hover:not(:disabled){background:#41456e}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#1b1c2b;font-weight:700;border-color:var(--accent)}button.cap{background:#f59e0b33;border-color:var(--accent)}#log{height:150px;overflow-y:auto;font-size:12px;line-height:1.5;display:flex;flex-direction:column-reverse}#log div{padding:1px 0;border-bottom:1px solid #2a2c4477}#log .good{color:#46d369}#log .bad{color:#ef4444}#log .cap{color:var(--accent)}.banner{grid-column:1 / -1;text-align:center;font-size:20px;padding:18px;border-radius:8px;background:#23253c}.banner.win{color:#46d369}.banner.lose{color:#ef4444}.cell.verb{background:color-mix(in srgb,var(--grid),#a855f766 100%);cursor:pointer}.ghost{position:absolute;font-size:26px;opacity:.3;filter:grayscale(1);pointer-events:none}.danger{position:absolute;top:2px;left:2px;font-size:11px;font-weight:700;color:#fff;background:#ef4444cc;border-radius:4px;padding:0 3px;pointer-events:none;box-shadow:inset 0 0 0 9999px #ef444422}.cell:has(.danger){box-shadow:inset 0 0 0 2px #ef444466}.mark{position:absolute;top:2px;left:2px;font-size:12px}.intent{position:absolute;bottom:12px;right:2px;font-size:10px;font-weight:700;color:#fecaca}.hpbar{position:relative}.hpbar>.thr{position:absolute;top:-1px;width:2px;height:7px;background:#f59e0b;transform:translate(-1px)}.hpbar.capturable{box-shadow:0 0 6px 1px var(--accent)}.hpbar.capturable>span{background:var(--accent)}.hint{font-size:11px;color:#b9bce0;margin:6px 0 0;line-height:1.4}.legend{font-size:11px;color:#aeb1d6}.legend div{padding:2px 0}.legend b{color:var(--txt)}