.ttt{max-width:1240px;margin:auto;padding:28px 30px 0}.tt-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.tt-top>span,.eyebrow,.tt-bottom,.tt-arena-head,.tt-arena-foot,.tt-match-meta{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em}.ttt button,dialog button{color:var(--text);background:transparent;border:1px solid var(--border);border-radius:8px;padding:10px 14px;transition:background .2s,transform .2s}.ttt button:hover{background:#24252d}.ttt button:active{transform:scale(.97)}.tt-heading{display:flex;align-items:center;justify-content:space-between;padding:38px 0 34px}.eyebrow{color:#ff655d;margin-bottom:15px}.tt-heading h1{font-size:clamp(42px,5vw,66px);letter-spacing:-.06em}.tt-heading em{font-style:normal;color:var(--accent)}.tt-heading p:last-child{color:var(--muted);margin-top:14px;font-size:14px}.tt-stamp{font-family:'Space Grotesk',sans-serif;font-size:64px;color:#ff4a41;text-shadow:0 0 26px #ff3b3033}.tt-stamp span{font-size:14px;color:var(--muted);vertical-align:middle;margin:0 16px}.tt-layout{display:grid;grid-template-columns:1fr 1.55fr .92fr;gap:30px;padding-bottom:45px}.tt-side,.tt-stats{padding-top:22px}.ttt h2{font-size:22px;letter-spacing:-.04em}.tt-side>p:not(.eyebrow),.tt-stats>p:not(.eyebrow){color:var(--muted);font-size:12px;margin-top:14px;line-height:1.8}.tt-modes{display:grid;gap:10px;margin:30px 0 24px}.tt-modes button{text-align:left;font-size:12px;padding:15px 12px}.tt-modes button span{float:right}.tt-modes button.selected{border-color:#ff3b3066;background:#ff3b3010}.tt-side label{display:block;font:10px 'IBM Plex Mono',monospace;color:var(--muted);letter-spacing:.1em;margin-bottom:10px}.tt-side select{width:100%;background:#15171d;color:var(--text);border:1px solid var(--border);padding:13px 9px;border-radius:8px;font-size:12px}.tt-side select:disabled{opacity:.45}.ttt .tt-text{padding:12px 0;border:0;color:var(--muted);font-size:11px}.tt-tip{border-top:1px solid var(--border);margin-top:24px;padding-top:22px}.tt-tip b{font:9px 'IBM Plex Mono',monospace;letter-spacing:.1em}.tt-tip p{color:var(--muted);font-size:11px;margin-top:10px}.tt-arena{position:relative;border:1px solid #303139;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,#ff3b3009,transparent 65%),#111318;overflow:hidden;min-width:0}.tt-arena-head,.tt-arena-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;color:var(--muted);letter-spacing:.08em}.tt-arena-head{border-bottom:1px solid #ffffff08}.tt-arena-head button{font-size:10px;padding:5px 9px}.tt-arena-foot{border-top:1px solid #ffffff08;font-size:8px;gap:7px}.tt-arena-foot>span:last-child{margin-left:auto}.tt-live{color:#90c99d}#welcome{text-align:center;padding:20px 25px 35px}#welcome h2{font-size:28px}#welcome p{font-size:12px;color:var(--muted);margin:12px 0 24px}#welcome small{display:block;font-size:10px;color:var(--muted);margin-top:15px}.tt-art{height:210px;display:flex;justify-content:center;align-items:center;gap:28px;perspective:500px}.tt-art i,.tt-art b{font:110px 'Space Grotesk',sans-serif;font-style:normal;animation:float 4s ease-in-out infinite;color:#ff4b43;text-shadow:0 0 35px #ff3b3066;transform:rotate(-10deg)}.tt-art b{color:white;animation-delay:-2s;text-shadow:0 0 30px #ffffff44}.ttt .tt-primary{background:var(--accent);border-color:var(--accent);color:white;font-weight:600}.ttt .tt-primary:hover{background:#df2e26}#play{width:80%;display:inline-flex;justify-content:space-between;padding:14px 20px}#match{padding:18px 28px 22px}.tt-players{display:flex;justify-content:space-between;align-items:center;gap:12px}.tt-players>div{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid transparent;border-radius:8px;flex:1}.tt-players>div.active{border-color:#ff3b3060;background:#ff3b3008}.tt-players b{font-size:25px;color:var(--accent)}#po b{color:white}.tt-players span{font-size:8px;color:var(--muted);letter-spacing:.05em}.tt-players strong{font-size:18px;margin-left:auto}.tt-versus{font-size:9px}#status{text-align:center;font-size:12px;min-height:22px;margin:16px 0;color:#d9dbe1}.tt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:320px;margin:auto}.tt-board button{aspect-ratio:1;padding:0;background:linear-gradient(145deg,#202128,#16181e);border:1px solid #34353d;border-radius:13px;color:#ff5149;font:clamp(36px,4vw,57px) 'Space Grotesk',sans-serif;text-shadow:0 0 20px #ff3b3040}.tt-board button.is-o{color:#fff;text-shadow:0 0 18px #ffffff44}.tt-board button:disabled{cursor:default}.tt-board button.winning{background:#ff3b3024;border-color:#ff5c52;animation:winning .7s ease both}.tt-match-meta{display:flex;justify-content:space-between;font-size:8px;color:var(--muted);margin:14px 0 18px}.tt-actions{display:flex;gap:10px}.tt-actions button{flex:1;font-size:11px}.tt-stat-main{margin-top:22px;padding-bottom:15px;border-bottom:1px solid var(--border)}.tt-stat-main>strong{display:block;font:64px 'Space Grotesk',sans-serif;letter-spacing:-.07em}.tt-stat-main strong span{font-size:25px;color:var(--muted);margin-left:5px}.tt-stat-main>span{color:var(--muted);font:9px 'IBM Plex Mono',monospace;letter-spacing:.1em}.tt-stat-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #ffffff08;font-size:11px;color:var(--muted);gap:8px}.tt-stat-row b{color:white;white-space:nowrap}.tt-history{margin-top:24px}.tt-history ol{list-style:none;color:var(--muted);font-size:10px}.tt-history li{padding:6px 0;border-bottom:1px solid #ffffff06}.ttt .tt-storage{font-size:9px!important}.tt-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:20px 0;color:var(--faint);font-size:9px}.tt-bottom b{color:var(--muted);font-weight:500}dialog{margin:auto;max-width:480px;width:calc(100% - 32px);padding:30px;background:#17191f;color:#eee;border:1px solid #41434c;border-radius:16px}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog h2{margin:15px 0 25px}dialog ol{padding-left:20px;font-size:14px;line-height:1.8}dialog p:last-child{font-size:12px;color:#b1b5c0;margin-top:20px}#close-help{float:right;font-size:20px}[hidden]{display:none!important}@keyframes float{50%{transform:translateY(-12px) rotate(6deg)}}@keyframes winning{50%{box-shadow:0 0 20px #ff3b3055;transform:scale(1.04)}}@media(max-width:1000px){.tt-layout{grid-template-columns:1fr 1.5fr}.tt-stats{grid-column:1/-1;display:block}.tt-history{max-width:500px}.tt-stat-main{float:left;width:25%;margin:0 30px 15px 0}.tt-stamp{font-size:48px}}@media(max-width:600px){.ttt{padding:20px 18px 0}.tt-top>span,.tt-stamp{display:none}.tt-heading{padding:30px 0}.tt-layout{display:flex;flex-direction:column;gap:24px}.tt-side{padding:0}.tt-side>h2,.tt-side>p,.tt-tip{display:none}.tt-modes{margin:0 0 16px;grid-template-columns:1fr 1fr;gap:8px}.tt-modes button{font-size:10px;padding:13px 8px}.tt-modes button span{display:none}.tt-side label{font-size:9px}.tt-side .tt-text{float:right}.tt-arena{width:100%}.tt-board button{font-size:48px}.tt-stats{padding-bottom:15px}.tt-bottom{font-size:8px;gap:20px}.tt-stat-main{width:30%}}@media(prefers-reduced-motion:reduce){.ttt *{animation:none!important;transition:none!important}}

.tt-board{position:relative}.tt-win-line{position:absolute;pointer-events:none;z-index:2;height:4px;background:#ff6a60;box-shadow:0 0 16px #ff3b30;transform-origin:left center;animation:line-in .5s ease both}@keyframes line-in{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}

/* Compact game workspace: setup, board and record share one visual rhythm. */
.ttt{max-width:1200px;padding-top:22px;padding-bottom:32px}.tt-heading{padding:24px 0 28px}.tt-heading h1{font-size:clamp(38px,4vw,54px);letter-spacing:-.035em}.tt-heading p:last-child{margin-top:8px}.tt-stamp{font-size:46px}.tt-layout{grid-template-columns:250px minmax(320px,1fr) 230px;gap:28px;padding-bottom:0;align-items:start}.tt-side,.tt-stats{padding-top:20px}.ttt h2{font-size:19px;letter-spacing:-.025em}.tt-modes{margin:22px 0}.tt-modes button{min-height:50px}.tt-side select{min-height:46px}.tt-arena{border-radius:16px;box-shadow:0 18px 48px -32px #000}.tt-arena-head{padding:14px 20px}.tt-art{height:160px}.tt-art i,.tt-art b{font-size:98px}.tt-stamp{color:#fff}.tt-stamp:first-letter{color:#ff4b43}#welcome{padding:12px 24px 28px}#welcome h2{font-size:25px}#welcome p{margin:10px 0 20px}#play{min-height:48px;width:100%}.tt-arena-foot{padding:13px 20px}.tt-stat-main{margin-top:18px;padding-bottom:16px}.tt-stat-main>strong{font-size:48px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.tt-stat-row{padding:12px 0}.tt-stat-row b{font-variant-numeric:tabular-nums}.tt-history{margin-top:22px}.tt-history .eyebrow{color:#b5bac5;font:12px 'Inter',sans-serif;letter-spacing:0;margin-bottom:10px}.tt-history li{font-size:11px}.tt-top>span{font-size:10px}.ttt .tt-text{font-size:12px;color:#afb5c0}.tt-storage{color:#afb5c0!important}.ttt button:disabled{opacity:.7}.tt-board button:disabled{opacity:1}.ttt button:focus-visible,.ttt select:focus-visible{outline:2px solid #ff655d;outline-offset:4px}.tt-players span{font-size:10px}.tt-board{max-width:300px}.tt-board button{font-size:52px}#match{padding:16px 24px 20px}#sound{min-width:110px;min-height:44px}#sound[aria-pressed=true]{color:#ff8c84;border-color:#ff655d66;background:#ff3b300b}
@media(min-width:1001px){.tt-stat-main{float:none;width:auto}.tt-history{max-width:none}}
@media(min-width:601px) and (max-width:1000px){.tt-layout{grid-template-columns:230px minmax(300px,1fr);gap:24px}.tt-stats{grid-column:1/-1;border-top:1px solid var(--border);padding-top:24px}.tt-stat-main{width:25%;margin-top:12px}.tt-history{margin-left:calc(25% + 30px)}}
@media(max-width:600px){.ttt{padding:16px}.tt-heading{padding:22px 0}.tt-heading p:last-child{font-size:12px}.tt-layout{gap:20px}.tt-side h2{display:none}.tt-modes{margin:0 0 16px}.tt-modes button{font-size:11px;min-height:48px}.tt-side .tt-text{float:none;padding-bottom:0}.tt-art{height:125px}.tt-art i,.tt-art b{font-size:80px}#welcome{padding-bottom:24px}#welcome h2{font-size:23px}.tt-stats{border-top:1px solid var(--border);padding-top:24px}.tt-stat-main{float:none;width:auto;margin:16px 0 8px;display:flex;align-items:baseline;gap:16px}.tt-stat-main>strong{font-size:40px}.tt-stats .tt-history{clear:both;margin-top:20px}.tt-arena-head{font-size:9px}.tt-board{max-width:290px}#match{padding:14px 18px 20px}.tt-arena-foot{font-size:9px}.tt-side label{font-size:10px}}