#ttt-titlebar{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}#ttt-titlebar h1{margin:0;font-size:1.5rem}.ttt-turn-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md, 10px);font-size:1rem;font-weight:500;align-self:flex-start}.ttt-turn-pill.turn-x{border-color:var(--ttt-x, #2d6cdf);color:var(--ttt-x, #2d6cdf)}.ttt-turn-pill.turn-o{border-color:var(--ttt-o, #c2185b);color:var(--ttt-o, #c2185b)}.ttt-turn-pill.review{border-color:var(--color-amber, #f59e0b);color:var(--color-amber-dark, #d97706);background:#fffbeb}.mini-mark{position:relative;display:inline-block;width:18px;height:18px}.mini-mark.mini-x:before,.mini-mark.mini-x:after{content:"";position:absolute;top:50%;left:50%;width:90%;height:14%;background:var(--ttt-x, #2d6cdf);border-radius:2px;transform-origin:center}.mini-mark.mini-x:before{transform:translate(-50%,-50%) rotate(45deg)}.mini-mark.mini-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.mini-mark.mini-o:before{content:"";position:absolute;top:50%;left:50%;width:80%;height:80%;border:2.5px solid var(--ttt-o, #c2185b);border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box}.ttt-board-wrap{display:flex;justify-content:center;padding:12px 0 24px}.ttt-board{--ttt-cell: 110px;--ttt-gap: 8px;display:grid;grid-template-columns:repeat(3,var(--ttt-cell));grid-template-rows:repeat(3,var(--ttt-cell));gap:var(--ttt-gap);padding:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;box-shadow:0 4px 12px #0000001a,0 2px 4px #0000000f;position:relative}@media(max-width:480px){.ttt-board{--ttt-cell: 80px}}.ttt-cell{width:var(--ttt-cell);height:var(--ttt-cell);background:var(--color-surface-alt, #f8fafc);border:1px solid var(--color-border);border-radius:6px;position:relative;cursor:pointer;transition:background .15s,transform .1s}.ttt-cell:hover:not(.has-mark):not([aria-disabled=true]){background:#fffbeb}.ttt-cell:focus-visible{outline:2px solid var(--color-focus, #3b82f6);outline-offset:2px}.ttt-cell.has-mark{cursor:default}.ttt-cell[aria-disabled=true]{cursor:not-allowed}.ttt-cell.cell-x:before,.ttt-cell.cell-x:after{content:"";position:absolute;top:50%;left:50%;width:70%;height:14%;background:linear-gradient(180deg,var(--ttt-x-light, #5b8eea),var(--ttt-x, #2d6cdf));border-radius:6px;box-shadow:0 2px 4px #00000026;transform-origin:center}.ttt-cell.cell-x:before{transform:translate(-50%,-50%) rotate(45deg)}.ttt-cell.cell-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.ttt-cell.cell-o:before{content:"";position:absolute;top:50%;left:50%;width:70%;height:70%;border:13px solid var(--ttt-o, #c2185b);border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;box-shadow:0 2px 4px #00000026}@media(max-width:480px){.ttt-cell.cell-o:before{border-width:9px}}.ttt-cell.win-cell{background:#fef3c7;border-color:var(--color-amber, #f59e0b)}html.theme-dark .ttt-cell.win-cell,html[data-theme=dark] .ttt-cell.win-cell{background:#f59e0b33}.ttt-board-layer{position:relative;display:inline-block}.ttt-winning-line{position:absolute;inset:16px;pointer-events:none;overflow:visible;z-index:10}.ttt-winning-line .ttt-line-bar{position:absolute;background:var(--color-amber, #f59e0b);border-radius:5px;box-shadow:0 2px 6px #0006;height:10px;transform-origin:50% 50%}@media(max-width:480px){.ttt-winning-line .ttt-line-bar{height:8px;border-radius:4px}}.ttt-winning-line.dir-row-top .ttt-line-bar{top:16.67%;left:2%;width:96%;transform:translateY(-50%)}.ttt-winning-line.dir-row-mid .ttt-line-bar{top:50%;left:2%;width:96%;transform:translateY(-50%)}.ttt-winning-line.dir-row-bot .ttt-line-bar{top:83.33%;left:2%;width:96%;transform:translateY(-50%)}.ttt-winning-line.dir-col-left .ttt-line-bar{top:2%;left:16.67%;height:96%;width:10px;transform:translate(-50%);border-radius:5px}.ttt-winning-line.dir-col-mid .ttt-line-bar{top:2%;left:50%;height:96%;width:10px;transform:translate(-50%);border-radius:5px}.ttt-winning-line.dir-col-right .ttt-line-bar{top:2%;left:83.33%;height:96%;width:10px;transform:translate(-50%);border-radius:5px}.ttt-winning-line.dir-diag-main .ttt-line-bar{top:50%;left:50%;width:136%;transform:translate(-50%,-50%) rotate(45deg)}.ttt-winning-line.dir-diag-anti .ttt-line-bar{top:50%;left:50%;width:136%;transform:translate(-50%,-50%) rotate(-45deg)}@media(max-width:480px){.ttt-winning-line.dir-col-left .ttt-line-bar,.ttt-winning-line.dir-col-mid .ttt-line-bar,.ttt-winning-line.dir-col-right .ttt-line-bar{width:8px;border-radius:4px}}.ttt-winning-line .ttt-line-bar{clip-path:inset(0 100% 0 0);animation:ttt-line-draw .45s ease-out .05s forwards}@keyframes ttt-line-draw{to{clip-path:inset(0 0 0 0)}}@keyframes ttt-draw-stroke{to{stroke-dashoffset:0}}@media(prefers-reduced-motion:reduce){.ttt-winning-line .ttt-line-bar{animation:none;clip-path:inset(0 0 0 0)}}.overlay{position:fixed;inset:0;background:#0f11178c;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1000}.overlay.hidden{display:none}.overlay-card{background:var(--color-surface);border-radius:14px;padding:28px 32px;box-shadow:0 10px 30px #0003;max-width:440px;width:calc(100% - 32px);text-align:center}.overlay-card .trophy{font-size:3rem;line-height:1;margin-bottom:4px}.overlay-card h2{margin:0 0 10px;font-size:1.5rem}.overlay-card .outcome-sub{color:var(--color-text-muted);font-size:.95rem;margin:0 0 18px}.overlay-stats{background:#f59e0b1f;border:1px solid rgba(245,158,11,.38);border-radius:6px;padding:12px 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;text-align:left;margin:0 0 18px;font-size:.95rem}.overlay-stats dt{color:var(--color-text-muted);font-weight:500;margin:0}.overlay-stats dd{margin:0;font-weight:600;font-family:ui-monospace,monospace;text-align:right}.overlay-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.overlay-btn-close{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted)}.ttt-stats-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:16px}.ttt-stats-table th{font-weight:600;color:var(--color-text-muted);text-align:left;padding:6px 10px 6px 0;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border)}.ttt-stats-table td{padding:8px 10px 8px 0;border-bottom:1px solid var(--color-border);font-variant-numeric:tabular-nums}.ttt-stats-table td.mode-cell{font-weight:600;white-space:nowrap}.stats-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.ttt-stats-heading{margin:4px 0 8px;font-size:.95rem;font-weight:700;color:var(--color-text)}.ttt-stats-heading+.ttt-stats-scroll{margin-bottom:18px}.ttt-stats-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:480px){.ttt-stats-table{font-size:.8rem}.ttt-stats-table th{font-size:.68rem;letter-spacing:.02em;padding:5px 6px 5px 0}.ttt-stats-table td{padding:7px 6px 7px 0}}.ttt-cpu-first{cursor:pointer;gap:6px}.ttt-cpu-first input{width:16px;height:16px;cursor:pointer;accent-color:var(--ttt-x, #2d6cdf)}.ttt-cpu-first.hidden{display:none}:root{--ttt-x: #2d6cdf;--ttt-x-light: #5b8eea;--ttt-o: #c2185b;--ttt-o-light: #d34d83}html.theme-dark,html[data-theme=dark]{--ttt-x: #6ea6ff;--ttt-x-light: #98c0ff;--ttt-o: #ff5e9b;--ttt-o-light: #ff8ab8}