*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:#fff9ec;color:#2a1f00;font-family:system-ui,sans-serif;display:flex;flex-direction:column;height:100svh;overflow:hidden}#top{padding:6px 8px;display:flex;gap:8px;align-items:center;flex:0 0 auto;flex-wrap:wrap}#st{font-size:clamp(12px,2.5vw,14px);font-weight:600}#board-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px}#board{display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);border:2px solid #2A1F00;background:#2a1f00;touch-action:manipulation}.sq{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;overflow:hidden}.l{background:#f5e7c6}.d{background:#b8813a}.hl{outline:3px solid #3fb984;outline-offset:-3px}.last{box-shadow:inset 0 0 0 3px #3fb98480}.atk{background:radial-gradient(circle,rgba(63,185,132,.45) 30%,transparent 70%)}.pc{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:grab}.pc svg{width:92%;height:92%;pointer-events:none;max-width:100%;max-height:100%}.coord{position:absolute;font-size:clamp(7px,1.6vmin,12px);font-weight:700;line-height:1;pointer-events:none;opacity:.75}.coord.file{bottom:1px;right:2px}.coord.rank{top:1px;left:2px}.sq.l .coord{color:#b8813a}.sq.d .coord{color:#f5e7c6}#info{flex:0 0 auto;padding:4px 8px;font-size:clamp(12px,2.5vw,14px)}#hist{flex:0 0 auto;padding:4px 8px;max-height:18svh;overflow:auto;background:#f5f1e3;border-radius:8px;font-size:clamp(12px,2.5vw,14px)}input,button{background:#182433;border:1px solid #3a4d63;color:#fff;padding:6px 8px;border-radius:8px;font-size:14px}.hidden{display:none}