.ttt{position:absolute;inset:0;container-type:size;overflow:hidden;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 0%,rgb(255 85 116 / .14),transparent 70%),radial-gradient(60% 60% at 100% 100%,rgb(22 184 232 / .1),transparent 70%);--x: #FF5574;--o: #16B8E8;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}[data-theme=light] .ttt{--x: #E23A5B;--o: #0A9BCB}.ttt-screen{width:100%;height:100%;display:grid;place-items:center;padding:clamp(10px,3cqmin,28px);animation:ttt-in .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto}@keyframes ttt-in{0%{opacity:0;transform:scale(.97)}}.ttt-menu{width:min(100%,640px);display:grid;gap:clamp(10px,2.4cqh,18px)}.ttt-logo{display:flex;align-items:center;justify-content:center;gap:12px}.ttt-logo svg{width:clamp(36px,8cqmin,56px);height:auto}.ttt-logo h2{font-size:clamp(22px,6cqmin,40px);font-weight:900;letter-spacing:-.03em}.ttt-nick{display:flex;align-items:center;gap:10px;justify-content:center}.ttt-nick label{font-size:13px;color:var(--muted);font-weight:600}.ttt-nick input{width:180px;padding:8px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);text-align:center;font-weight:600}.ttt-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2cqmin,14px)}.ttt-mode{display:grid;gap:8px;align-content:start;text-align:left;padding:clamp(12px,2.6cqmin,18px);border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);transition:transform .2s,border-color .2s,background-color .2s}button.ttt-mode:hover,.ttt-mode:focus-within{border-color:var(--line-strong);transform:translateY(-2px)}.ttt-mode h3{font-size:clamp(15px,3.4cqmin,18px);display:flex;align-items:center;gap:8px}.ttt-mode p{font-size:13px;color:var(--muted);line-height:1.35}.ttt-mode .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none}.ttt-pills{display:flex;gap:6px;flex-wrap:wrap}.ttt-pill{padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;font-weight:700;font-size:13px;color:var(--text);transition:all .15s}.ttt-pill:hover{background:var(--text);color:var(--bg)}.ttt-pill.primary{background:var(--yellow);color:#171b58;border-color:transparent}.ttt-join{display:flex;gap:6px}.ttt-join input{width:100%;min-width:0;padding:7px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--text);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:13px}@container (max-width: 420px){.ttt-modes{grid-template-columns:1fr}.ttt-mode p{display:none}}@container (max-width: 480px) and (max-aspect-ratio: 5/4){.ttt-player{padding:8px 10px;gap:6px}.ttt-player>svg{display:none}.ttt-player .who small{color:currentColor;font-weight:700}.ttt-player b{font-size:22px}.ttt-draws{padding:4px 2px}}@container (max-height: 420px){.ttt-mode p{display:none}.ttt-logo h2{font-size:22px}}.ttt-wait{display:grid;gap:16px;justify-items:center;text-align:center;max-width:420px}.ttt-wait h3{font-size:clamp(18px,4cqmin,24px)}.ttt-code{font-size:clamp(34px,10cqmin,56px);font-weight:900;letter-spacing:.18em;padding:6px 18px;border-radius:16px;background:var(--surface);border:2px dashed var(--line-strong);font-variant-numeric:tabular-nums}.ttt-spinner{display:flex;gap:10px}.ttt-spinner i{width:14px;height:14px;border-radius:50%;background:var(--yellow);animation:ttt-hop 1s infinite ease-in-out}.ttt-spinner i:nth-child(2){background:var(--cyan);animation-delay:.12s}.ttt-spinner i:nth-child(3){background:var(--green);animation-delay:.24s}.ttt-spinner i:nth-child(4){background:var(--pink);animation-delay:.36s}@keyframes ttt-hop{40%{transform:translateY(-12px)}}.ttt-play{width:100%;height:100%;display:grid;gap:clamp(8px,2cqh,16px);grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;--board: min(94cqw, 100cqh - 200px, 560px)}.ttt-score{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;width:min(100%,560px)}.ttt-player{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--surface);border:2px solid transparent;transition:border-color .25s,transform .25s;min-width:0}.ttt-player.right{flex-direction:row-reverse;text-align:right}.ttt-player.active{border-color:currentColor;transform:translateY(-2px)}.ttt-player.px{color:var(--x)}.ttt-player.po{color:var(--o)}.ttt-player .who{color:var(--text);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ttt-player .who small{display:block;font-weight:500;font-size:11px;color:var(--muted)}.ttt-player b{font-size:26px;font-weight:900;color:var(--text);margin-left:auto;font-variant-numeric:tabular-nums}.ttt-player.right b{margin-left:0;margin-right:auto}.ttt-player svg{width:22px;height:22px;flex:none}.ttt-draws{display:grid;place-items:center;padding:4px 10px;color:var(--muted);font-size:11px;text-align:center}.ttt-draws b{font-size:20px;color:var(--text)}.ttt-board-wrap{position:relative;width:var(--board);aspect-ratio:1}.ttt-board{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);gap:clamp(6px,1.6cqmin,12px)}.ttt-cell{position:relative;border:0;border-radius:clamp(10px,3cqmin,22px);background:var(--surface);box-shadow:inset 0 -4px #0000002e;display:grid;place-items:center;padding:18%;transition:background-color .15s,transform .1s}.ttt-cell:not(:disabled):hover{background:var(--surface-2)}.ttt-cell:not(:disabled):active{transform:scale(.96)}.ttt-cell:disabled{cursor:default}.ttt-cell .ghost{opacity:0;transition:opacity .15s}.ttt-cell:not(:disabled):hover .ghost{opacity:.22}.ttt-cell svg{width:100%;height:100%;overflow:visible}.ttt-cell.last{box-shadow:inset 0 -4px #0000002e,0 0 0 3px var(--line-strong)}.mark{fill:none;stroke-linecap:round;stroke-width:14}.mark-x{stroke:var(--x)}.mark-o{stroke:var(--o)}.mark.draw path,.mark.draw circle{stroke-dasharray:300;stroke-dashoffset:300;animation:ttt-draw .35s cubic-bezier(.4,0,.2,1) forwards}.mark.draw path+path{animation-delay:.12s}@keyframes ttt-draw{to{stroke-dashoffset:0}}.ttt-cell.win{animation:ttt-win .6s cubic-bezier(.2,.8,.2,1) .2s both}@keyframes ttt-win{50%{transform:scale(1.08)}}.ttt-line{position:absolute;inset:0;pointer-events:none;overflow:visible}.ttt-line line{stroke:var(--text);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;animation:ttt-draw .45s ease-out .25s forwards;opacity:.9}.ttt-foot{display:grid;gap:10px;justify-items:center}.ttt-status{font-weight:800;font-size:clamp(16px,3.6cqmin,22px);text-align:center;min-height:1.4em}.ttt-status.win{color:var(--green)}.ttt-status.lose{color:var(--pink)}.ttt-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.ttt-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-weight:700;font-size:14px}.ttt-btn:hover{background:var(--surface-2)}.ttt-btn.primary{background:var(--yellow);color:#171b58;border-color:transparent;box-shadow:0 4px 0 -1px #c98f00}.ttt-btn.icon{padding:9px 10px}@container (min-aspect-ratio: 5/4){.ttt-play{grid-template-columns:auto minmax(200px,300px);grid-template-rows:1fr auto 1fr;column-gap:clamp(16px,5cqw,48px);justify-content:center;--board: min(100cqh - 32px, 58cqw, 620px)}.ttt-board-wrap{grid-column:1;grid-row:1 / -1}.ttt-score{grid-column:2;grid-row:1;align-self:end;grid-template-columns:1fr;width:100%}.ttt-player.right{flex-direction:row;text-align:left}.ttt-player.right b{margin-left:auto;margin-right:0}.ttt-draws{grid-auto-flow:column;gap:6px;justify-content:start;padding:0 12px}.ttt-foot{grid-column:2;grid-row:2 / 4;align-self:start;justify-items:start;width:100%;padding-left:4px}.ttt-status{text-align:left}.ttt-actions{justify-content:flex-start}}@container (min-aspect-ratio: 5/4) and (max-height: 330px){.ttt-player{padding:4px 10px}.ttt-player b{font-size:20px}.ttt-player .who small{display:none}}.ttt-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.ttt-confetti i{position:absolute;top:40%;left:50%;width:9px;height:14px;border-radius:2px}.ttt button{touch-action:manipulation}