*{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{min-height:100%;background:#1a1714;color:#e8e2d9;font-family:system-ui,sans-serif;display:flex;justify-content:center;-webkit-tap-highlight-color:transparent}#app{width:min(100vw,60vh);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);display:flex;flex-direction:column;gap:12px}.status{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:18px}.board{display:grid;width:100%;aspect-ratio:1;-webkit-user-select:none;user-select:none}.cell{position:relative;border:0;padding:0;font:inherit;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.cell.light{background:#b8a488}.cell.dark{background:#7a5f43}.cell.selected{outline:3px solid #f2c14e;outline-offset:-3px;z-index:1}.cell.target-move:after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:#f2c14ed9}.cell.target-attack{outline:3px solid #d64541;outline-offset:-3px;z-index:1}.cell.eligible{outline:3px dashed #f2c14e;outline-offset:-3px;z-index:1}.piece{font-size:min(9vw,5.4vh);line-height:1}.piece.player{color:#f5f1e8;text-shadow:0 1px 2px rgba(0,0,0,.6)}.piece.enemy{color:#262019;text-shadow:0 1px 1px rgba(255,255,255,.25)}.hp{position:absolute;right:4%;bottom:2%;font-size:min(3.4vw,2vh);font-weight:700;color:#fff;background:#333;border-radius:999px;min-width:1.5em;text-align:center;padding:1px 2px}.footer{display:flex;justify-content:center;padding-bottom:12px}.btn{min-height:44px;min-width:44px;padding:0 24px;font:inherit;font-size:16px;color:#e8e2d9;background:#33291f;border:1px solid #55452f;border-radius:8px;cursor:pointer}.footer{gap:12px}.log{margin:0 12px 16px;border:1px solid #55452f;border-radius:8px;padding:8px 12px}.log summary{min-height:44px;display:flex;align-items:center;cursor:pointer}.log pre{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:40vh;overflow-y:auto;color:#c9c0b2}.promotion{display:flex;justify-content:center;gap:12px}.btn.promo{font-size:28px;line-height:1;padding:0 16px;color:#f5f1e8}.cards{display:flex;flex-direction:column;gap:12px;padding:0 12px}.card{min-height:44px;padding:12px 16px;text-align:left;font:inherit;color:#e8e2d9;background:#33291f;border:1px solid #55452f;border-radius:8px;cursor:pointer}.card-body{display:flex;flex-direction:column;gap:6px}.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.card-name{font-weight:700;font-size:17px}.card-rarity{font-size:13px}.rarity-common{color:#9b9184}.rarity-rare{color:#7fb0d8}.rarity-legendary{color:#f2c14e}.card-text{font-size:14px;line-height:1.4}.card-attach{font-size:13px;color:#c9c0b2}