*{box-sizing:border-box}:root{--pink:#ff62b3;--blue:#60ddff;--ink:#fff7ee;--muted:#9e91a4;--line:#ffffff18}body{margin:0;min-height:100vh;background:radial-gradient(circle at 70% 40%,#ff62b31b,transparent 35%),#0b0710;color:var(--ink);font-family:Manrope,system-ui,sans-serif}.eyebrow,nav,.status,.room-note,.share-panel{font-family:DM Mono,monospace}nav{height:82px;width:min(1120px,calc(100% - 30px));margin:auto;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.13em;color:var(--muted)}nav a{color:inherit;text-decoration:none}nav b{color:var(--ink);font-family:Manrope}nav i{color:#ffd36a}main{width:min(1030px,calc(100% - 30px));min-height:calc(100vh - 82px);margin:auto;display:grid;grid-template-columns:310px minmax(340px,590px);gap:85px;align-items:center}.eyebrow{color:var(--pink);font-size:10px;letter-spacing:.18em}.copy h1{font-size:64px;line-height:.84;letter-spacing:-.075em;margin:20px 0}.copy h1 span{color:transparent;-webkit-text-stroke:1px #ff62b388}.copy>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.8}.share-row button{border:0;border-radius:99px;background:var(--ink);color:#120b14;padding:14px 20px;font:500 10px DM Mono;letter-spacing:.1em;cursor:pointer}.table{padding:15px;border:1px solid var(--line);border-radius:30px;background:#ffffff07;box-shadow:0 35px 100px #0008}.status{min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 7px 0 10px;font-size:10px;letter-spacing:.11em;color:var(--muted)}.status button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:99px;padding:7px 10px;font:9px DM Mono;cursor:pointer}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cell{aspect-ratio:1;border:1px solid var(--line);border-radius:18px;background:#0d0912;color:var(--ink);font:800 clamp(72px,12vw,132px)/1 Manrope,'Arial Rounded MT Bold','Apple Symbols',sans-serif;cursor:default;transition:.25s}.cell.can-play{cursor:pointer}.cell.can-play:hover{border-color:var(--pink);transform:scale(.98)}.cell.x{color:var(--pink);text-shadow:0 0 28px #ff62b366}.cell.o{color:var(--blue);text-shadow:0 0 28px #60ddff66}.room-note{text-align:center;color:#665d6b;font-size:9px;letter-spacing:.08em;margin:16px 0 2px}.share-panel{margin-top:28px}.share-panel label{display:block;color:var(--pink);font-size:9px;letter-spacing:.1em;margin-bottom:9px}.share-row{display:flex}.share-row input{min-width:0;flex:1;border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;background:#07050a;color:var(--muted);padding:12px;font:9px DM Mono}.share-row button{border-radius:0 10px 10px 0;padding:12px}.share-panel p{color:#776c7c;font-size:9px;line-height:1.6}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#fff;color:#120b14;border-radius:99px;padding:11px 16px;font:10px DM Mono;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){main{grid-template-columns:1fr;gap:30px;padding:45px 0}.copy{text-align:center}.copy h1{font-size:48px}.copy>p{max-width:500px;margin-left:auto;margin-right:auto}.actions{align-items:center}.share-panel{text-align:left}.table{width:min(590px,100%);margin:auto}nav span{display:none}}
.magic-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.magic-bg i{position:absolute;width:42vw;aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.14;animation:drift 14s ease-in-out infinite alternate}.magic-bg i:nth-child(1){background:var(--pink);left:-12%;top:-20%}.magic-bg i:nth-child(2){background:var(--blue);right:-14%;bottom:-25%;animation-delay:-5s}.magic-bg i:nth-child(3){width:24vw;background:#ffd36a;left:43%;top:32%;animation-delay:-9s}.magic-bg span{position:absolute;color:#ffffff12;font-size:clamp(22px,4vw,58px);animation:floatRune 9s ease-in-out infinite}.magic-bg span:nth-of-type(1){left:8%;top:68%}.magic-bg span:nth-of-type(2){right:10%;top:18%;animation-delay:-3s}.magic-bg span:nth-of-type(3){left:48%;top:8%;animation-delay:-6s}@keyframes drift{to{transform:translate(8vw,6vh) scale(1.16)}}@keyframes floatRune{50%{transform:translateY(-24px) rotate(18deg);opacity:.55}}.cell{position:relative;overflow:hidden}.cell:before{content:"";position:absolute;inset:50%;border-radius:50%;background:currentColor;opacity:0;filter:blur(15px);transition:.4s}.cell.just-cast{animation:castMark .42s cubic-bezier(.2,1.6,.4,1)}.cell.winning{border-color:currentColor;animation:winnerPulse .9s ease-in-out infinite alternate}.cell.winning:before{inset:18%;opacity:.12}@keyframes castMark{from{transform:scale(.55) rotate(-16deg);opacity:.2}to{transform:scale(1);opacity:1}}@keyframes winnerPulse{to{transform:scale(.96);box-shadow:0 0 38px currentColor}}.spark{position:fixed;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:20;animation:sparkOut 1s ease-out forwards}@keyframes sparkOut{to{transform:translate(var(--dx),var(--dy)) scale(0) rotate(var(--spin));opacity:0}}.table{position:relative}.table:before{content:"";position:absolute;inset:-1px;border-radius:30px;padding:1px;background:linear-gradient(120deg,#ff62b355,transparent 35%,#60ddff55);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;pointer-events:none}
.recent>label{display:block;margin-bottom:9px;color:var(--pink);font:9px DM Mono;letter-spacing:.1em}.recent{width:100%;margin-top:10px;padding-top:20px;border-top:1px solid var(--line)}#recentList{display:grid;gap:7px}.recent-game{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;color:var(--ink);text-decoration:none;background:#ffffff05;transition:.2s}.recent-game:hover{border-color:#ff62b355;transform:translateX(3px)}.recent-game b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10px DM Mono}.recent-game span{flex:0 0 auto;color:#716777;font:8px DM Mono;letter-spacing:.08em}
.cell.x{font-size:clamp(78px,13vw,142px);letter-spacing:-.08em}.cell.o{font-size:clamp(72px,12vw,132px)}@media(max-width:420px){.cell.x{font-size:clamp(72px,23vw,104px)}.cell.o{font-size:clamp(68px,21vw,98px)}}
:root{--mark-stroke:clamp(11px,1.65vw,15px)}.cell.x,.cell.o{font-size:0;letter-spacing:0}.mark{position:absolute;inset:17%;display:block;pointer-events:none}.mark.x{inset:12%}.mark.x:before,.mark.x:after{content:"";position:absolute;left:50%;top:0;width:var(--mark-stroke);height:100%;border-radius:99px;background:var(--pink);box-shadow:0 0 18px #ff62b399;transform:translateX(-50%) rotate(45deg)}.mark.x:after{transform:translateX(-50%) rotate(-45deg)}.mark.o{border:var(--mark-stroke) solid var(--blue);border-radius:50%;box-shadow:0 0 18px #60ddff88,inset 0 0 16px #60ddff44}@media(max-width:420px){:root{--mark-stroke:clamp(10px,3vw,12px)}.mark{inset:18%}.mark.x{inset:13%}}

/* Compact game-first layout and dialogs */
main{width:min(650px,calc(100% - 30px));min-height:calc(100vh - 82px);margin:auto;padding:42px 0 60px;display:block}.copy{text-align:center;margin-bottom:28px}.copy h1{font-size:clamp(42px,8vw,64px);line-height:.9;margin:16px 0}.copy>p:not(.eyebrow){margin:0}.status>div{display:flex;align-items:center;gap:5px}.dialog-close{position:absolute;right:15px;top:15px;border:0;background:none;color:var(--muted);font-size:24px;cursor:pointer}.dialog-card .recent{margin-top:8px}.dialog-card .share-panel{margin-top:10px}@media(max-width:600px){nav{height:62px}main{min-height:calc(100vh - 62px);padding:28px 0 40px}.copy{margin-bottom:20px}.copy h1{font-size:44px}.copy .eyebrow{display:none}.copy>p:not(.eyebrow){font-size:12px}.dialog-card{padding:26px 20px}.cell{border-radius:14px}}

/* Readable supporting type */
nav{font-size:12px}.eyebrow{font-size:12px}.copy>p:not(.eyebrow){font-size:15px}.status{font-size:12px;letter-spacing:.09em}.status button{font-size:11px}.primary,.secondary,.share-row button{font-size:12px}.recent>label,.share-panel label{font-size:11px}.share-row input{font-size:11px}.share-panel p{font-size:11px}.recent-game b{font-size:12px}.recent-game span{font-size:10px}.toast{font-size:12px}@media(max-width:600px){.copy>p:not(.eyebrow){font-size:14px}.status{font-size:11px}}

.copy .eyebrow{font-size:14px}.status{font-size:14px}.status button{font-size:13px;padding:9px 12px}@media(max-width:600px){.copy .eyebrow{font-size:13px}.status{font-size:13px}.status button{font-size:12px}}

nav{font-size:14px;letter-spacing:.1em}@media(max-width:600px){nav{font-size:13px}}

.editable-room-name{cursor:pointer;transition:color .2s}.editable-room-name:hover,.editable-room-name:focus{color:var(--pink);outline:none}.editable-room-name:after{content:" ✎";font-size:.85em;color:var(--pink)}



#expiry{display:block;color:var(--pink);font:500 10px/1.2 DM Mono,monospace;letter-spacing:.08em;white-space:nowrap;margin-right:5px}
.share-code{display:block;margin:14px 0 16px;color:var(--ink);font:600 14px DM Mono;letter-spacing:.12em}.share-actions{display:grid;gap:10px}.share-actions button{width:100%;border:0;border-radius:99px;background:var(--ink);color:#120b14;padding:13px 16px;font:500 10px DM Mono;letter-spacing:.08em;cursor:pointer}
#status[data-result="win"],#status[data-result="lose"],#status[data-result="draw"]{font-weight:700;letter-spacing:.12em}#status[data-result="win"]{color:#ffd36a;text-shadow:0 0 18px #ffd36a66}#status[data-result="lose"]{color:#ff9eae;text-shadow:0 0 14px #ff627744}#status[data-result="draw"]{color:#cdbfff;text-shadow:-4px 0 12px #ff62b344,4px 0 12px #60ddff44}