:root{--ttt-paper: #fffdf3;--ttt-paper-edge: #ded8c5;--ttt-rule: rgba(89, 154, 205, .2);--ttt-margin: rgba(216, 92, 103, .28);--ttt-pencil: #424750;--ttt-pencil-soft: rgba(66, 71, 80, .1);--ttt-win: rgba(246, 184, 70, .32);--ttt-success-text: #197344;--ttt-error-text: #b42335}[data-theme=dark]{--ttt-paper: #242521;--ttt-paper-edge: #3c3c35;--ttt-rule: rgba(93, 154, 192, .18);--ttt-margin: rgba(205, 98, 106, .23);--ttt-pencil: #e2dfd4;--ttt-pencil-soft: rgba(226, 223, 212, .1);--ttt-win: rgba(218, 159, 52, .25);--ttt-success-text: #67d69f;--ttt-error-text: #ff858f}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.ttt-page{width:100%;max-width:1020px;min-height:calc(100vh - var(--header-height));min-height:calc(100svh - var(--header-height));margin:0 auto;padding:42px 24px 64px;display:flex;flex-direction:column;flex:1}.ttt-intro{margin-bottom:26px}.ttt-layout{display:grid;grid-template-columns:minmax(350px,570px) minmax(240px,285px);align-items:start;justify-content:center;gap:34px}.ttt-layout.single{grid-template-columns:minmax(0,570px)}.ttt-paper{position:relative;min-width:0;padding:28px 36px 38px 72px;overflow:hidden;border:1px solid var(--ttt-paper-edge);border-radius:4px 9px 7px 5px;color:var(--ttt-pencil);background:linear-gradient(90deg,transparent 0,transparent 48px,var(--ttt-margin) 49px,var(--ttt-margin) 51px,transparent 52px),repeating-linear-gradient(180deg,transparent 0,transparent 31px,var(--ttt-rule) 31px,var(--ttt-rule) 32px),var(--ttt-paper);box-shadow:0 18px 42px #2823161f,0 2px 4px #2823161a;transform:rotate(-.18deg)}[data-theme=dark] .ttt-paper{box-shadow:0 18px 44px #0000004d,0 2px 5px #00000040}.ttt-paper:after{position:absolute;right:-16px;bottom:-15px;width:92px;height:52px;border-radius:50%;background:radial-gradient(ellipse,var(--ttt-pencil-soft),transparent 68%);content:"";transform:rotate(-12deg);pointer-events:none}.ttt-holes{position:absolute;top:0;bottom:0;left:16px;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}.ttt-holes i{width:13px;height:13px;display:block;border:1px solid var(--ttt-paper-edge);border-radius:50%;background:var(--bg);box-shadow:inset 1px 1px 2px #00000029}.ttt-identities{min-height:34px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--ttt-pencil)}.ttt-identity{display:inline-flex;align-items:baseline;gap:6px;font-size:12px}.ttt-identity strong{font-family:Comic Sans MS,Bradley Hand,cursive;font-size:22px;font-weight:700;line-height:1;transform:rotate(3deg)}.ttt-identity.mine strong{transform:rotate(-4deg)}.ttt-pencil-dash{width:22px;height:2px;border-radius:999px;background:var(--ttt-pencil);opacity:.32;transform:rotate(-4deg)}.ttt-board{position:relative;width:min(100%,430px);aspect-ratio:1;margin:0 auto;isolation:isolate}.ttt-grid-lines,.ttt-win-line,.ttt-cells{position:absolute;inset:0;width:100%;height:100%}.ttt-grid-lines{z-index:1;overflow:visible;fill:none;stroke:var(--ttt-pencil);stroke-width:3.2;stroke-linecap:round;opacity:.74;filter:drop-shadow(.6px .7px 0 var(--ttt-pencil-soft));pointer-events:none}.ttt-grid-lines path{stroke-dasharray:1;stroke-dashoffset:1;animation:ttt-grid-draw .43s ease-out forwards}.ttt-grid-lines path:nth-child(2){animation-delay:80ms}.ttt-grid-lines path:nth-child(3){animation-delay:.15s}.ttt-grid-lines path:nth-child(4){animation-delay:.22s}.ttt-cells{z-index:2;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.ttt-row{display:contents}.ttt-cell{position:relative;min-width:0;min-height:0;padding:10%;display:grid;place-items:center;border:0;border-radius:15%;color:var(--ttt-pencil);background:transparent;cursor:default;-webkit-tap-highlight-color:transparent}.ttt-board.can-play .ttt-cell[aria-disabled=false]{cursor:crosshair}.ttt-board.can-play .ttt-cell[aria-disabled=false]:hover{background:var(--ttt-pencil-soft)}.ttt-cell:focus-visible{z-index:5;outline:2px dashed var(--accent);outline-offset:-7px}.ttt-cell.winner{background:repeating-linear-gradient(-12deg,transparent 0,transparent 7px,var(--ttt-win) 8px,var(--ttt-win) 11px);box-shadow:inset 0 0 0 2px var(--ttt-win)}.ttt-mark{width:82%;height:82%;overflow:visible;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(.7px .9px 0 var(--ttt-pencil-soft));transform:rotate(var(--ttt-mark-rotate, 0deg));pointer-events:none}.ttt-mark path{vector-effect:non-scaling-stroke}.ttt-mark.drawing path{stroke-dasharray:1;stroke-dashoffset:1;animation:ttt-pencil-draw .33s cubic-bezier(.3,.7,.45,1) forwards}.ttt-mark-x.drawing path:nth-child(2){animation-delay:.19s}.ttt-mark-o.drawing path{animation-duration:.44s}.ttt-win-line{z-index:4;overflow:visible;fill:none;stroke:#d08b2f;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 1px 0 rgba(90,53,15,.2));pointer-events:none}[data-theme=dark] .ttt-win-line{stroke:#e9b85c}.ttt-win-line path{stroke-dasharray:1;stroke-dashoffset:1;animation:ttt-win-draw .46s ease-out .12s forwards}.ttt-match-card{padding:22px;display:flex;flex-direction:column;align-items:stretch;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:0 9px 28px #1b1f270f}.ttt-match-card h2{margin:0 0 16px;font-size:18px;line-height:1.2;letter-spacing:-.02em}.ttt-match-card.over h2,.ttt-match-card.waiting h2{display:none}.ttt-match-card .friend-box{margin:0 0 16px}.ttt-match-card .cancel-btn{margin-top:0}.status-bar[data-status="games.tictactoe.status.won"]{color:var(--ttt-success-text)}.status-bar[data-status="games.tictactoe.status.lost"],.status-bar[data-status="games.tictactoe.error.invalidMove"]{color:var(--ttt-error-text)}@keyframes ttt-pencil-draw{0%{stroke-dashoffset:1;opacity:.55}to{stroke-dashoffset:0;opacity:1}}@keyframes ttt-grid-draw{0%{stroke-dashoffset:1;opacity:.25}to{stroke-dashoffset:0;opacity:1}}@keyframes ttt-win-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@media(max-width:860px){.ttt-layout{grid-template-columns:minmax(0,590px);gap:24px}.ttt-match-card{width:min(100%,430px);justify-self:center}}@media(max-width:560px){.ttt-page{padding:28px 12px 48px}.ttt-intro{margin-bottom:20px}.ttt-paper{padding:21px 18px 27px 45px}.ttt-paper{background:linear-gradient(90deg,transparent 0,transparent 30px,var(--ttt-margin) 31px,var(--ttt-margin) 33px,transparent 34px),repeating-linear-gradient(180deg,transparent 0,transparent 27px,var(--ttt-rule) 27px,var(--ttt-rule) 28px),var(--ttt-paper)}.ttt-holes{left:9px}.ttt-holes i{width:10px;height:10px}.ttt-identities{margin-bottom:7px;gap:9px}.ttt-identity{gap:4px;font-size:11px}.ttt-identity strong{font-size:19px}.ttt-match-card{padding:18px}.ttt-match-card .tab{font-size:11px}}@media(prefers-reduced-motion:reduce){.ttt-grid-lines path,.ttt-mark.drawing path,.ttt-win-line path{animation:none;stroke-dashoffset:0}}@media(forced-colors:active){.ttt-paper{border:1px solid CanvasText;background:Canvas}.ttt-grid-lines,.ttt-mark,.ttt-win-line{color:CanvasText;stroke:CanvasText;filter:none}.ttt-cell.winner{outline:3px double Highlight;background:Canvas}}.ttt-layout,.ttt-layout.single{position:relative;margin-bottom:auto;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0}.ttt-paper{width:100%;padding:28px 36px 38px 72px;border:2px solid var(--border);border-radius:16px;box-shadow:0 2px 8px #0000000a;transform:none;transition:border-color .22s ease,box-shadow .22s ease}[data-theme=dark] .ttt-paper{box-shadow:0 2px 10px #00000029}.ttt-board{width:min(100%,430px)}.ttt-cell{min-width:44px;min-height:44px;border-radius:10px;transition:background-color .18s ease,box-shadow .18s ease}.ttt-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}.ttt-cell.winner{box-shadow:inset 0 0 0 2px var(--accent)}.ttt-match-card{position:absolute;left:50%;top:50%;z-index:6;width:min(100%,430px);padding:22px;justify-self:center;border:2px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 0 40px #00000038;backdrop-filter:blur(8px);transform:translate(-50%,-50%)}.ttt-match-card h2{margin-bottom:18px;color:var(--text);font-size:20px;font-weight:800;text-align:center}.ttt-match-card .opp-tabs{margin-bottom:16px}@media(hover:hover){.ttt-board.can-play .ttt-cell[aria-disabled=false]:hover{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}}@media(max-width:560px){.ttt-page{padding:10px 15px 36px}.ttt-intro{margin-bottom:20px}.ttt-paper{padding:21px 18px 27px 45px}.ttt-match-card{padding:18px}}@media(max-width:374px){.ttt-paper{padding-right:12px;padding-left:39px}.ttt-holes{left:8px}}