:root{color-scheme:dark;font-family:Georgia,'Times New Roman',serif;color:#f0eadb;background:#0b0d10}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 32% 12%,#242629 0,#111316 45%,#090b0d 100%)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f3d69c;outline-offset:3px}.shell{max-width:1230px;padding:34px clamp(16px,4vw,60px);margin:auto}.eyebrow{font:700 12px/1.5 Arial,sans-serif;letter-spacing:.25em;color:#be9b66}.eyebrow span{padding:0 10px;color:#918473}header{padding:0 0 28px;border-bottom:1px solid #77634b55}h1{font-weight:normal;font-size:clamp(40px,5.2vw,76px);letter-spacing:.02em;margin:9px 0 4px}.subtitle{color:#bcb4a6;font-size:18px;margin:0}main{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:42px;padding-top:30px}.game{min-width:0}.topline{display:flex;justify-content:space-between;gap:12px;color:#ccbea3;font:14px Arial,sans-serif;letter-spacing:.02em}.board-wrap{padding:28px 14px 14px;display:grid;place-items:center;perspective:1050px}.board-tilt{width:min(100%,570px);aspect-ratio:1;position:relative;transform:rotateX(12deg);box-shadow:0 35px 45px #000a,0 0 0 7px #38302b,0 0 0 9px #947748;transition:box-shadow .3s}#scene{display:block;width:100%;height:100%;background:#111519}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.cell{border:0;background:transparent;color:#efdfba;font-size:clamp(46px,9vw,120px);line-height:1;text-shadow:0 3px 15px #c4a77777;touch-action:manipulation}.cell:disabled{cursor:default}.cell:focus-visible{outline:3px solid #fff4d0;outline-offset:-6px}.fallback #scene{display:none}.fallback .board-tilt{background:radial-gradient(circle at 30% 25%,#34343b,#10151a 65%)}.fallback .cell{border:1px solid #a78a5f88}.status{text-align:center;min-height:30px;margin:17px 0;color:#dfc18c;font-size:21px}.scores{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #80705566;background:#1a1c2099;text-align:center}.scores>div{padding:12px;border-right:1px solid #80705566}.scores>div:last-child{border:0}.scores span{display:block;font:11px Arial,sans-serif;letter-spacing:.18em;color:#c9b797}.scores strong{font-size:29px;font-weight:normal}.panel{padding:25px;background:linear-gradient(130deg,#25272bbe,#111317de);border:1px solid #84735b66;box-shadow:0 18px 60px #0007;align-self:start}.panel .eyebrow{margin:0 0 24px}.panel label{display:block;margin:18px 0 8px;color:#d5c9b7;font:14px Arial,sans-serif}.panel select,.panel input,.panel button{width:100%;min-height:45px;border:1px solid #9a806199;background:#181a1e;color:#f4ead8;padding:9px 12px;border-radius:3px}.panel button:hover{border-color:#e0ba77;background:#343029}.panel button:disabled{opacity:.5;cursor:default}.panel .primary{margin-top:20px;background:#8a7048;color:#15120e;font-weight:bold}.panel hr{border:0;border-top:1px solid #88745b66;margin:25px 0}.panel .hint{font:14px/1.55 Arial,sans-serif;color:#c9c1b5}.join{display:flex;gap:8px}.join input{min-width:0}.join button{width:85px;flex:none}.invite{color:#f0d49c;font:16px/1.4 Arial,sans-serif;overflow-wrap:anywhere}footer{font:11px Arial,sans-serif;color:#93836a;letter-spacing:.24em;text-align:center;margin:35px 0}@media(max-width:720px){.shell{padding:21px 17px}main{display:flex;flex-direction:column;gap:25px}.board-wrap{padding:25px 6px 14px}.panel{width:100%}.topline{font-size:12px}.cell{font-size:clamp(42px,14vw,100px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.boot-warning[hidden]{display:none}.boot-warning{padding:16px;margin-bottom:20px;border:1px solid #c7a36b;background:#301f1a;color:#fff3d8;font:16px/1.5 Arial,sans-serif}.boot-warning button{color:#fff3d8;background:none;border:0;text-decoration:underline;padding:0}.cell[data-last-move="true"]:not([data-winning="true"]){box-shadow:inset 0 0 0 2px #bc945680}.cell[data-winning="true"]{box-shadow:inset 0 0 0 4px #dfb879;background:#a588342e;animation:win-mark .65s ease-out}@keyframes win-mark{from{box-shadow:inset 0 0 0 0 #dfb879}to{box-shadow:inset 0 0 0 4px #dfb879}}.fallback .cell[data-symbol="X"]{color:#f4eddc;text-shadow:0 2px 3px #000}.fallback .cell[data-symbol="O"]{color:#17191c;-webkit-text-stroke:3px #e4b968;text-shadow:0 0 2px #f1cd87,0 2px 7px #f1cd87}.fallback .cell[data-symbol="O"]::first-letter{color:#15171b}@media(prefers-reduced-motion:reduce){.cell[data-winning="true"]{animation:none}}