/* A soft, calm room for two real players. */
.game-stage .ttt-player{display:flex;flex-direction:column;height:100%;min-height:0;border:0;border-radius:0;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 4% 12%,#fae5eb 0,transparent 48%),radial-gradient(ellipse at 95% 95%,#e2f0e9 0,transparent 48%),#f8f8f3;color:#354a4c;font-family:inherit}
.ttt-player *{box-sizing:border-box}.ttt-player [hidden]{display:none!important}.ttt-player button,.ttt-player input{font-family:inherit}.ttt-player button:focus-visible,.ttt-player input:focus-visible{outline:3px solid #599d93;outline-offset:3px}.ttt-player button:disabled{cursor:default}.ttt-player button{touch-action:manipulation}
.ttt-top{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:9px 21px;border-bottom:1px solid #dfe6e0;background:#ffffff77;gap:15px;flex-shrink:0}.ttt-brand{display:flex;gap:10px;align-items:center;min-width:0}.ttt-brand strong{font-size:13px;font-weight:800;letter-spacing:-.3px}.ttt-logo{display:flex;gap:5px;align-items:center;flex-shrink:0}.ttt-logo .ttt-mark{width:17px;height:17px}.ttt-logo .ttt-mark-o{border-width:3px}.ttt-logo .ttt-mark-x:before,.ttt-logo .ttt-mark-x:after{height:3px}.ttt-mode-tag{max-width:40%;font-size:9px;color:#71807a;text-align:end;line-height:1.4}
.ttt-content{flex:1;min-height:0;display:flex;padding:24px 28px}.ttt-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1.1fr);width:min(900px,100%);margin:auto;gap:35px;align-items:center}.ttt-welcome{text-align:center}.ttt-welcome h2{font-size:clamp(17px,2vw,27px);line-height:1.25;letter-spacing:-.7px;font-weight:800;max-width:290px;margin:15px auto 0;color:#354a4c}.ttt-sample{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(190px,100%);aspect-ratio:1;margin:auto;transform:rotate(-5deg);padding:12px;background:#ffffff8f;border:1px solid #e1e6dd;border-radius:22px;box-shadow:0 12px 32px #5977690a}.ttt-sample>span{display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f7f5ef;border:1px solid #e9e6df}.ttt-sample .ttt-mark{width:27px;height:27px}.ttt-sample .ttt-mark-o{border-width:5px}.ttt-sample .ttt-mark-x:before,.ttt-sample .ttt-mark-x:after{height:5px}
.ttt-modes{display:flex;flex-direction:column;gap:10px;min-width:0}.ttt-mode{display:flex;align-items:center;gap:14px;min-height:64px;width:100%;padding:14px 17px;border:1px solid #e5cbd4;border-radius:13px;background:#f7e8ed;color:#5d444d;text-align:start;transition:transform .15s,background .15s,border-color .15s}.ttt-mode strong{font-size:12px;font-weight:800;line-height:1.4}.ttt-mode:hover:not(:disabled){transform:translateY(-2px);background:#f3dfe7;border-color:#d9b7c4}.ttt-mode-random{background:#e5efea;border-color:#c9dcd2;color:#385d53}.ttt-mode-random:hover:not(:disabled){background:#daeae1;border-color:#b1cebf}.ttt-choice-icon{display:grid;place-items:center;font-size:23px;width:32px;height:32px;border-radius:9px;background:#ffffff70;flex-shrink:0}.ttt-mode-local{display:block;min-height:58px;background:#ffffff77;border-color:#dce3dc;color:#52615a;padding:11px 17px}.ttt-mode-local:hover:not(:disabled){background:#fff;border-color:#bacfc1}.ttt-mode-local strong{font-size:10px}.ttt-mode-local small{display:block;font-size:9px;line-height:1.5;margin-top:3px;color:#839086}.ttt-mode:disabled{opacity:.5}
.ttt-join{display:flex;gap:7px;margin-top:2px}.ttt-join input{display:block;width:100%;min-width:0;border:1px solid #d9e2da;border-radius:8px;min-height:34px;background:#ffffffa8;padding:8px 10px;font-size:10px;color:#41574a;outline-offset:2px}.ttt-join-button{flex-shrink:0;font-size:9px!important;padding-inline:10px!important}
.ttt-match{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(185px,.8fr);gap:30px;align-items:stretch;width:min(920px,100%);height:100%;min-height:0;margin:auto}.ttt-board-area{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.ttt-board{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:9px;max-width:100%;max-height:100%;padding:12px;border:1px solid #d8e5db;background:#ffffff99;border-radius:22px;box-shadow:0 14px 45px #7e9d850e;flex-shrink:0;direction:ltr}.ttt-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-height:0}.ttt-cell-wrap{min-width:0;min-height:0}.ttt-square{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16%;border:1px solid #e0e6dc;border-radius:13px;background:#f5f5ee;box-shadow:0 2px 0 #e5e9dd;color:#456d62;transition:background .14s,border-color .14s,transform .14s;position:relative}.ttt-square.is-last-turn:hover:not(:disabled){background:#eaf2e9;border-color:#a8c6b3;transform:translateY(-1px)}.ttt-square:disabled{opacity:1}.ttt-square.is-winning{background:#e0eee2;border-color:#9dc4a8;box-shadow:0 2px 0 #c5dfcc}.ttt-mark{display:block;width:100%;height:100%;position:relative;flex-shrink:0}.ttt-mark-x:before,.ttt-mark-x:after{content:'';display:block;width:100%;height:clamp(4px,1vw,8px);border-radius:20px;position:absolute;left:0;top:50%;background:#6a9d92;transform:translateY(-50%) rotate(45deg)}.ttt-mark-x:after{transform:translateY(-50%) rotate(-45deg)}.ttt-mark-o{border:clamp(4px,1vw,8px) solid #cf94a7;border-radius:50%}
.ttt-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:5px 0}.ttt-players{display:flex;align-items:center;gap:12px;margin-bottom:13px;direction:ltr}.ttt-players>i{font-style:normal;color:#a2afa6;font-weight:800}.ttt-player-chip{display:grid;place-items:center;width:32px;height:32px;border:1px solid #dee5dc;background:#ffffff8a;border-radius:10px;font-size:16px;font-weight:800;color:#a6b0a8}.ttt-player-chip.ttt-x.is-active{background:#dcece4;color:#4f8879;border-color:#a9cabc}.ttt-player-chip.ttt-o.is-active{background:#f4e3ea;color:#ad6e83;border-color:#dfb5c5}.ttt-status{font-size:clamp(18px,2vw,30px);line-height:1.2;font-weight:800;letter-spacing:-.8px;margin:0;color:#3b5248}.ttt-you{font-size:11px;font-weight:650;margin:9px 0 0;color:#586f60;line-height:1.5}.ttt-detail{font-size:10px;line-height:1.6;color:#725e53;margin:12px 0 0;max-width:250px}.ttt-countdown{font-size:11px;color:#556a5b;font-variant-numeric:tabular-nums;line-height:1.4;margin:10px 0 0}.ttt-match-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.ttt-button{min-height:34px;border-radius:8px;padding:8px 13px;font-size:10px;font-weight:800;border:1px solid #ccdacf;background:#edf3ec;color:#5c7864;line-height:1.3}.ttt-button:hover:not(:disabled){background:#e2eddf;border-color:#aec7b3}.ttt-primary{background:#e0ece2;color:#4b7458;border-color:#b7d0bd}.ttt-secondary{background:#ffffff6b;color:#8a938b;border-color:#dce3da}.ttt-button:disabled{opacity:.55}.ttt-invite{width:100%;margin-top:16px}.ttt-invite label{display:block;font-size:10px;font-weight:600;color:#586f60;line-height:1.5}.ttt-invite input{display:block;width:100%;min-width:0;margin-top:7px;padding:8px 9px;border:1px solid #d6e1d5;border-radius:7px;background:#fff9;font-size:9px;color:#506858;direction:ltr;line-height:1.5}.ttt-copy{margin-top:8px;max-width:100%}
.ttt-network{display:flex;align-items:center;justify-content:center;gap:12px;min-height:30px;padding:7px 15px;background:#ffffff77;border-top:1px solid #e0e7df;flex-shrink:0;font-size:10px;color:#967361;line-height:1.4;text-align:center}.ttt-retry{font-size:10px;font-weight:800;text-decoration:underline;color:#627c6b;flex-shrink:0}.ttt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1021px) and (max-height:780px){.ttt-top{min-height:39px;padding-block:5px}.ttt-content{padding:16px 22px}.ttt-home{gap:24px}.ttt-sample{width:155px;padding:10px}.ttt-welcome h2{font-size:20px;margin-top:12px}.ttt-mode{min-height:53px;padding:10px 14px}.ttt-choice-icon{height:28px;width:28px;font-size:20px}.ttt-mode-local{min-height:45px;padding-block:8px}.ttt-mode-local small{font-size:8px}.ttt-modes{gap:8px}.ttt-match{gap:23px}.ttt-players{margin-bottom:8px}.ttt-status{font-size:23px}.ttt-match-actions{margin-top:14px}.ttt-board{padding:10px;gap:8px;border-radius:17px}.ttt-row{gap:8px}.ttt-square{border-radius:11px}}
@media(max-width:1020px){.game-stage.builtin-stage:has(.ttt-player){aspect-ratio:auto;height:auto;display:block}.game-stage .ttt-player{height:550px;max-height:none}.ttt-content{padding:18px}.ttt-home{grid-template-columns:1fr;width:min(430px,100%);gap:19px}.ttt-welcome{display:flex;align-items:center;gap:20px;text-align:start}.ttt-sample{width:118px;margin:0;flex-shrink:0;gap:5px;padding:8px;border-radius:16px}.ttt-sample>span{border-radius:7px}.ttt-sample .ttt-mark{width:18px;height:18px}.ttt-sample .ttt-mark-o{border-width:4px}.ttt-sample .ttt-mark-x:before,.ttt-sample .ttt-mark-x:after{height:4px}.ttt-welcome h2{font-size:23px;max-width:180px;margin:0}.ttt-mode{min-height:56px}.ttt-mode-local{min-height:51px}.ttt-match{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:16px}.ttt-side{align-items:center;text-align:center}.ttt-players{margin-bottom:7px;gap:10px}.ttt-player-chip{width:27px;height:27px;border-radius:8px;font-size:14px}.ttt-status{font-size:22px}.ttt-you{font-size:10px;margin-top:5px}.ttt-detail{font-size:9px;margin-top:7px;max-width:300px}.ttt-countdown{font-size:10px;margin-top:6px}.ttt-match-actions{margin-top:10px;justify-content:center}.ttt-invite{max-width:300px;margin-top:9px}.ttt-invite label{font-size:9px}.ttt-invite input{margin-top:5px;font-size:16px;padding:6px 8px}.ttt-copy{margin-top:6px}.ttt-button{min-height:33px}.ttt-join input{font-size:16px}.ttt-join-button{font-size:10px!important}}
@media(max-width:600px){.game-stage .ttt-player{height:550px}.ttt-top{padding:8px 12px;min-height:43px;gap:10px}.ttt-brand strong{font-size:11px}.ttt-brand{gap:7px}.ttt-logo{gap:4px}.ttt-logo .ttt-mark{height:14px;width:14px}.ttt-mode-tag{font-size:7px;max-width:35%}.ttt-content{padding:15px 12px}.ttt-home{gap:17px}.ttt-welcome{gap:16px}.ttt-sample{width:94px;padding:7px;gap:4px}.ttt-sample .ttt-mark{width:15px;height:15px}.ttt-sample .ttt-mark-o{border-width:3px}.ttt-sample .ttt-mark-x:before,.ttt-sample .ttt-mark-x:after{height:3px}.ttt-welcome h2{font-size:21px;max-width:160px}.ttt-mode strong{font-size:11px}.ttt-mode-local strong{font-size:10px}.ttt-mode-local small{font-size:8px}.ttt-choice-icon{width:29px;height:29px;font-size:20px}.ttt-modes{gap:9px}.ttt-match{gap:13px}.ttt-board{padding:9px;gap:8px;border-radius:18px}.ttt-row{gap:8px}.ttt-square{border-radius:12px}.ttt-match-actions{gap:7px}.ttt-status{font-size:21px}.ttt-network{font-size:9px;gap:8px;padding-inline:10px}.ttt-retry{font-size:9px}.ttt-join-button{padding-inline:8px!important;font-size:9px!important}.ttt-network{flex-wrap:wrap}}
@media(max-width:359px){.game-stage .ttt-player{height:550px}.ttt-welcome h2{font-size:19px}.ttt-sample{width:82px}.ttt-content{padding-inline:10px}.ttt-mode{padding-inline:12px;gap:11px}.ttt-mode strong{font-size:10px}.ttt-mode-local strong{font-size:9px}.ttt-join{gap:5px}.ttt-join-button{max-width:80px}.ttt-invite input{font-size:16px}.ttt-status{font-size:20px}}
.game-stage:fullscreen .ttt-player{height:min(100%,1080px);width:min(100%,1920px)}
@media(prefers-reduced-motion:reduce){.ttt-player button{transition:none!important}.ttt-mode:hover:not(:disabled),.ttt-square.is-last-turn:hover:not(:disabled){transform:none}}