.caro{grid-template-columns:minmax(0,1fr);gap:16px;max-width:1200px;margin:0 auto;padding:6px 8px 0;display:grid}.caro__play{flex-direction:column;align-items:center;gap:8px;min-width:0;display:flex}.caro__side{flex-direction:column;gap:16px;min-width:0;padding:0 8px;display:flex}.caro-mark{fill:none;stroke-width:3px;stroke-linecap:round}.caro-mark--x{stroke:var(--x)}.caro-mark--o{stroke:var(--o)}.board-frame{width:100%;max-width:min(100%,100dvh - 16px);margin:0 auto}.board{--size:15;grid-template-columns:repeat(var(--size), minmax(0, 1fr));grid-template-rows:repeat(var(--size), minmax(0, 1fr));aspect-ratio:1;outline:2px solid var(--ink);outline-offset:-2px;background-color:var(--paper);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:100%;display:grid;position:relative}.cell{appearance:none;border:0;border-inline-end:1px solid var(--board-line);border-bottom:1px solid var(--board-line);width:100%;min-width:0;height:100%;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:0;margin:0;padding:0;display:block;position:relative}.cell.col-mark{border-inline-end-color:var(--board-line-strong)}.cell.row-mark{border-bottom-color:var(--board-line-strong)}.cell:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;z-index:2}.cell svg{fill:none;stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;width:84%;height:84%;position:absolute;inset:8%}.cell[data-mark=X] svg{stroke:var(--x)}.cell[data-mark=O] svg{stroke:var(--o)}.cell.is-new path{stroke-dasharray:1;stroke-dashoffset:1px;animation:.18s ease-out forwards draw}.cell.is-new path+path{animation-delay:90ms}@keyframes draw{to{stroke-dashoffset:0}}.cell.is-last{background:var(--marker);box-shadow:inset 0 0 0 2px #cfa800}.cell.is-win{background:var(--marker-win);box-shadow:none}.cell--ghost svg{opacity:.6}@media (hover:hover) and (pointer:fine){.board[data-turn=X]:not(.is-locked) .cell:not([data-mark]):hover{background:no-repeat center / 84% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4fd8' stroke-opacity='.4' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5.5 6.2C9.5 10 14 14.3 18.6 18.2M18.2 5.6C14 9.6 9.6 14.2 5.6 18.6'/%3E%3C/svg%3E"), var(--paper-shade)}.board[data-turn=O]:not(.is-locked) .cell:not([data-mark]):hover{background:no-repeat center / 84% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d3263f' stroke-opacity='.4' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 4.6C7.4 4.4 4.6 8 4.8 12.3c.2 4.3 3.5 7 7.4 6.9 4.2-.1 7-3.4 6.9-7.4-.1-4-3.1-7.1-7.7-6.8'/%3E%3C/svg%3E"), var(--paper-shade)}}.cell.is-aim-line{background:#ffe45c66}.cell.is-aim{background:var(--marker);box-shadow:inset 0 0 0 2px var(--ink);z-index:1}.board.is-locked .cell{cursor:default}.win-lines{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0}.win-lines line{stroke:var(--ink);stroke-width:.1px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:.42s ease-out .12s forwards draw}.toggle{margin-top:14px}@media (min-width:900px),(min-width:640px) and (max-height:500px){.caro{padding:16px var(--gutter) 0;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:20px}.caro__side{padding:0}}@media (min-width:900px) and (min-height:501px){.board-frame{max-width:min(100%,max(330px,100dvh - 336px))}}