*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;height:100vh;touch-action:manipulation;background:#0a0a0a;flex-direction:column;align-items:center;height:100dvh;padding:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:flex;overflow:hidden}h1{letter-spacing:6px;flex-shrink:0;margin-bottom:8px;font-size:clamp(20px,5vh,32px);font-weight:300}.status-row{flex-shrink:0;justify-content:center;align-items:center;gap:12px;min-height:44px;margin-bottom:8px;display:flex}#status{color:#a0a0a0;text-align:center;font-size:13px}#status.win{color:#10b981}#status.lose{color:#ef4444}.toolbar{display:contents}.controls{flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:8px;margin-bottom:12px;display:flex}.controls button{min-height:44px}.node-count{letter-spacing:1px;text-transform:uppercase;color:#a0a0a0;align-items:center;gap:8px;font-size:11px;font-weight:500;display:inline-flex}.node-count input{color:#fff;text-align:center;font-variant-numeric:tabular-nums;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;width:4.5em;min-height:44px;padding:0 8px;font-size:14px}button{color:#a0a0a0;letter-spacing:1px;text-transform:uppercase;cursor:pointer;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;padding:8px 14px;font-size:11px;font-weight:500}button:hover:not(:disabled){color:#fff;background:#252525}button:disabled{opacity:.4;cursor:default}.setup{align-items:center}.toggle{border:1px solid #2a2a2a;border-radius:4px;display:inline-flex;overflow:hidden}.toggle button{border:0;border-radius:0;min-width:44px;min-height:44px}.toggle button+button{border-left:1px solid #2a2a2a}.toggle button[aria-pressed=true]{color:#fff;background:#2a2a2a}#turn{letter-spacing:1px;text-transform:uppercase;color:#a0a0a0;align-items:center;gap:8px;min-height:44px;padding:0 12px;font-size:11px;font-weight:500;display:inline-flex}.swatch{background:#60a5fa;border-radius:50%;flex:none;width:12px;height:12px}[data-player=ai] .swatch{background:#ef4444}.play-area{flex-direction:column;flex-grow:1;gap:8px;width:100%;min-height:0;display:flex}.canvas-container{flex-grow:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative;container-type:size}#history{flex-direction:column;flex-shrink:0;gap:8px;width:100%;height:160px;padding-bottom:8px;display:flex}#history[hidden]{visibility:hidden}.history-nav{flex-shrink:0;gap:8px;display:flex}.history-nav button{flex:1 1 0;min-height:44px}#moveList{flex-direction:column;gap:4px;min-height:0;list-style:none;display:flex;overflow-y:auto}#moveList button{text-align:left;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;align-items:center;gap:8px;width:100%;min-height:44px;font-size:13px;display:flex}#moveList button[aria-current]{color:#fff;background:#252525;border-color:#3b82f6}#shareUrl{color:#fff;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;width:100%;min-height:44px;padding:8px;font-size:12px}@media (min-width:1024px){.toolbar{flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:8px 16px;margin-bottom:12px;display:flex}.toolbar .controls{align-items:stretch;margin-bottom:0}.play-area{flex-direction:row;justify-content:center;gap:20px;container-type:size}.canvas-container{flex:none;width:min(100cqh,100cqw - 260px)}#history{width:240px;height:100%;padding-bottom:0}}#board{touch-action:none;outline:1px solid #2a2a2a;flex:none;position:relative;overflow:clip}#board:focus-visible{outline-color:#60a5fa}#canvas{touch-action:none;background:#1a1a1a;width:min(100cqw,100cqh);height:min(100cqw,100cqh);display:block}#nodeTargets{pointer-events:none;position:absolute;inset:0}#nodeTargets button{background:0 0;border:0;border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;position:absolute}#nodeTargets button:focus{outline:none}#canvas.pan,#canvas.grab{cursor:grab}#canvas.grabbing{cursor:grabbing}#cancelBtn{flex-shrink:0;min-width:44px;min-height:44px}.modal{z-index:1000;background:#000000e6;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal.visible{display:flex}.modal-content{text-align:center;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;width:90%;max-width:400px;padding:40px 20px}.modal-content h2{letter-spacing:4px;margin-bottom:20px}.modal-content p{color:#a0a0a0;margin-bottom:30px}.modal-actions{justify-content:center;gap:12px;display:flex}