@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#171922;background:#171922;font-synthesis:none;--ink:#171922;--purple:#7854e8;--lime:#d5f76e;--paper:#f7f7f2;--muted:#666971}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:5px}button:disabled{cursor:default}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site{max-width:1440px;min-height:100svh;margin:auto;background:var(--paper);padding:0 6.5%;border-top:8px solid var(--lime)}header{height:113px;border-bottom:1px solid #d9d9d5;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;letter-spacing:-1px}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:53px;height:39px;background:var(--ink);color:var(--lime);border-radius:8px;font-size:30px;letter-spacing:-3px;padding-right:3px}.brand-dot{color:var(--purple)}.header-note{font-size:14px;color:var(--muted)}
.game-layout{max-width:1030px;margin:65px auto 47px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.intro{padding-bottom:30px}.eyebrow{font-size:13px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:23px;height:3px;background:var(--purple)}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,4.6vw,65px);font-weight:700;letter-spacing:-3.2px;line-height:1.09;margin:24px 0 18px}h1 span{color:var(--purple)}.intro-copy{font-size:17px;color:var(--muted);line-height:1.5;margin:0}.setup{margin-top:46px}.setup h2{font-size:14px;font-weight:700;margin:0 0 13px}.mode-switch{display:flex;background:#e9e9e5;border-radius:12px;padding:5px;gap:5px}.mode{border:0;flex:1;border-radius:8px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;color:#60626a;font-size:14px;font-weight:700;background:transparent;transition:background .15s,color .15s}.mode:hover{color:var(--ink)}.mode.active{background:var(--ink);color:white;box-shadow:0 2px 4px #0002}.mode-hint{font-size:14px;line-height:1.6;color:var(--muted);min-height:45px;margin:14px 0 20px}.new-round{width:100%;height:57px;border:2px solid var(--ink);border-radius:12px;background:var(--lime);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}.new-round:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.new-round:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.keyboard-note{font-size:13px;color:var(--muted);margin:18px 0 0}
.play-area{width:100%;max-width:480px}.board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:21px}.turn-state{display:flex;align-items:center;gap:13px}.turn-mark{width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#e9e0ff;color:var(--purple);font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:500;line-height:1}.turn-mark.o{color:#aa4b18;background:#ffe8db;font-size:38px}.turn-mark.finished{background:var(--lime);color:var(--ink);font-size:25px}.turn-state h2{font-size:18px;font-weight:700;letter-spacing:-.4px;margin:0 0 4px}.turn-state p{font-size:13px;color:var(--muted);margin:0;line-height:1.4}.round-label{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;white-space:nowrap;color:var(--muted)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--ink);padding:12px;border:2px solid var(--ink);border-radius:23px;box-shadow:0 8px 0 #d6d6d1}.cell{aspect-ratio:1;border:0;border-radius:11px;background:white;position:relative;display:grid;place-items:center;transition:background .16s,transform .16s;min-width:0}.cell:not(:disabled):hover{background:#eeebff}.cell:focus-visible{outline:3px solid var(--lime);outline-offset:-6px}.cell.x{color:var(--purple);background:#f0ebff}.cell.o{color:#c85e28;background:#fff0e7}.cell.winning{background:var(--lime);color:var(--ink)}.cell.drawn{background:#ededeb}.symbol{display:block;width:53%;height:53%;position:relative;animation:pop .2s ease-out}.x .symbol:before,.x .symbol:after{content:'';position:absolute;top:43%;left:-7%;width:114%;height:15%;border-radius:6px;background:currentColor;transform:rotate(45deg)}.x .symbol:after{transform:rotate(-45deg)}.o .symbol{border:10px solid currentColor;border-width:clamp(7px,.9vw,11px);border-radius:50%}.winning .symbol{animation:win .45s ease-out}.scoreboard{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:24px}.score-card{background:#ebe5fa;border:1px solid #ddd5ef;min-height:91px;border-radius:12px;text-align:center;padding:13px 4px 11px}.score-card:last-child{background:#f7e8df;border-color:#eed6c9}.draw-card{background:#ededE8;border-color:#deded8}.score-name{display:flex;justify-content:center;align-items:center;gap:5px;font-size:14px;font-weight:600;color:#5c586b;line-height:1.3}.mini-x{font-size:23px;line-height:.7;color:var(--purple)}.mini-o{font-size:23px;line-height:.7;color:#c85e28}.score-card strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:30px;line-height:1.2;margin-top:8px;font-weight:600}.reset-score{display:block;margin:17px auto 0;padding:7px 10px;border:0;background:transparent;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:4px}.reset-score:hover{color:var(--ink)}footer{border-top:1px solid #d9d9d5;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:500;letter-spacing:1px;color:var(--muted)}.footer-marks{font-size:25px;color:var(--purple);letter-spacing:0}
@keyframes pop{from{transform:scale(.55);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes win{50%{transform:scale(1.12)}}
@media(min-width:1500px){.site{border-left:1px solid #333;border-right:1px solid #333}.game-layout{margin-top:80px;margin-bottom:65px}}@media(max-width:1000px){.site{padding:0 5%}.game-layout{gap:40px;margin-top:50px}h1{letter-spacing:-2px}.mode{gap:6px}.mode svg{width:18px}}@media(max-width:720px){.site{padding:0 6%;border-top-width:6px}header{height:78px}.brand{font-size:22px}.brand-mark{width:43px;height:34px;font-size:26px}.header-note{font-size:12px}.game-layout{display:flex;flex-direction:column;gap:30px;margin:30px auto;max-width:430px}.intro{width:100%;padding:0}.eyebrow{font-size:12px}h1{font-size:38px;letter-spacing:-1.9px;margin:13px 0 9px}h1 br{display:none}.intro-copy{font-size:16px}.setup{margin-top:22px}.setup h2{margin-bottom:9px}.mode{min-height:43px}.mode-hint{min-height:0;margin:12px 0 0;font-size:14px}.new-round{margin-top:18px;height:49px}.keyboard-note{display:none}.board-top{margin-bottom:15px}.turn-state h2{font-size:17px}.board{gap:8px;padding:10px;border-radius:19px}.cell{border-radius:8px}.scoreboard{margin-top:22px}.score-card{min-height:79px;padding-top:11px}.score-card strong{font-size:26px}.reset-score{margin-top:10px}footer{min-height:64px;font-size:12px;letter-spacing:0;flex-wrap:wrap}.footer-marks{font-size:20px}}@media(max-width:380px){.site{padding:0 4%}.header-note{display:none}h1{font-size:34px}.mode{font-size:14px}.turn-state{gap:9px}.turn-state p{font-size:12px}.score-name{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:720px){.game-layout{display:grid;grid-template-columns:1fr;margin:24px auto;gap:20px}.intro{display:contents}.intro .eyebrow,.intro h1,.intro .intro-copy,.keyboard-note{display:none}.setup{grid-row:1;margin:0}.play-area{grid-row:2}.new-round{grid-row:3;margin:0}.mode-hint{font-size:14px;margin-top:10px}.board-top{margin-bottom:14px}.scoreboard{margin-top:20px}.reset-score{margin-top:8px}footer{justify-content:center;padding:14px 0}.footer-marks{display:none}}
[hidden]{display:none!important}.mode{font-size:14px;gap:7px}.mode-switch{gap:3px}.mode svg{width:18px}.online-panel{margin:20px 0}.create-room{width:100%;min-height:48px;background:var(--purple);border:2px solid var(--purple);color:white;border-radius:10px;font-weight:700}.create-room:hover{background:#6140ce}.or-divider{text-align:center;color:var(--muted);font-size:13px;margin:14px 0}.join-form{display:flex;gap:8px}.join-form input{min-width:0;width:100%;border:1px solid #b8bac1;border-radius:9px;padding:13px 12px;font:inherit;font-size:14px;text-transform:uppercase;background:white;letter-spacing:1px}.join-form input::placeholder{text-transform:none;letter-spacing:0}.join-form button,.copy-link{border:0;border-radius:9px;background:var(--ink);color:white;font-weight:600;padding:12px 20px;font-size:14px}.room-info{background:#eeebf8;border:1px solid #d9d1f0;border-radius:13px;padding:16px}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-heading span{font-size:12px;color:#615771;letter-spacing:1px}.room-heading strong{font-family:'Space Grotesk',sans-serif;font-size:23px;letter-spacing:2px;color:#5532b0}.room-info input{width:100%;margin:12px 0;border:1px solid #d7d1e4;border-radius:7px;font:inherit;font-size:12px;padding:10px;background:white;color:#646071}.room-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.copy-link{padding:10px 12px}.leave-room{padding:10px 0;background:transparent;color:#615771;border:0;font-size:14px;text-decoration:underline;text-underline-offset:3px}.room-help{font-size:13px;color:#615771;line-height:1.5;margin:14px 0 0}.network-note{font-size:14px;line-height:1.6;color:#595264;margin:12px 0 0;overflow-wrap:anywhere}.network-note:empty{display:none}.new-round:disabled{background:#e4e4de;color:#686971;box-shadow:none;transform:none;border-color:#d4d4ce}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.setup{margin-top:28px}.intro{padding-bottom:0}.game-layout{margin-top:45px}
@media(max-width:720px){.online-panel{grid-row:2;margin:0}.play-area{grid-row:3}.new-round{grid-row:4}.setup{margin:0}.mode{padding:10px 6px;font-size:14px;gap:4px}.mode svg{display:none}.game-layout{margin-top:24px;gap:18px}.mode-hint{margin:9px 0 0}.room-heading strong{font-size:21px}.room-help{margin-top:9px}.room-info{padding:14px}.network-note{font-size:14px}}

.room-actions{margin-top:13px}@media(max-width:720px){.online-panel.connected-room{grid-row:5}.new-round{grid-row:4}}