:root,[data-bs-theme=dark]{--bs-font-sans-serif:'VT323',monospace;--bs-body-bg:#1b1d1e;--bs-body-color:#dddccf;--bs-border-color:#454a42;--bs-border-radius:2px;--bs-border-radius-sm:1px;--bs-border-radius-lg:3px;--bs-primary:#bdcf98;--bs-primary-rgb:189,207,152;--bs-secondary-color:#979e8e;--green:#bdcf98;--coral:#df9d8b;--yellow:#deca88;--edge:#454a42}
body,button,input,textarea,select{ text-transform:uppercase; }
input::placeholder,textarea::placeholder{ text-transform:uppercase; }
.hp-hearts{display:inline-flex;align-items:center;gap:4px;min-height:16px}
#self-hp{color:var(--green)}
#rival-hp{color:var(--coral);justify-content:flex-end;align-self:stretch}
.hp-hearts .hp-heart{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;flex-shrink:0}
.hp-hearts .hp-heart.is-filled{fill:currentColor;stroke:currentColor}
.tools{min-width:0}
.tools .icon-btn{flex-shrink:0}
#profile{min-width:0;flex-shrink:1}
@media(max-width:360px){.game-tabs img{display:none}}
#profile:disabled{opacity:1;color:#bec8ac;border-color:transparent}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid var(--edge);background:#20261c;margin-bottom:16px}
.auth-tabs button{font:19px 'VT323',monospace;min-height:34px;background:transparent;color:#98a98b;border:1px solid transparent;padding:4px 8px}
.auth-tabs button.selected{background:#3a472e;border-color:#63774b;color:#d4e5bb}
.auth-tabs button:disabled{opacity:.6;cursor:wait}
#username-field{margin-bottom:10px}
.auth-note{display:block;color:#9baa88;font-size:15px;margin:12px 0}
.auth-submit{width:100%;margin-top:2px}
#auth-error{color:var(--coral);font-size:17px;margin:13px 0 0;line-height:1.3}
#auth-error:empty{display:none}
#login-code{text-align:center;font-size:32px;line-height:1.2;font-variant-numeric:tabular-nums}
.code-actions{display:flex;align-items:center;gap:8px;margin-top:13px}
.code-actions>.play-btn{flex:1}
.code-actions>.icon-btn{height:38px;width:36px;border-color:var(--edge)}
.code-actions>.icon-btn:disabled{opacity:.35}
*{box-sizing:border-box;letter-spacing:0}body{margin:0;font:20px/1.3 'VT323',monospace;background:var(--bs-body-bg);color:var(--bs-body-color)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button,input{font:inherit}button svg,svg{width:17px;height:17px;flex-shrink:0}.btn{--bs-btn-font-size:20px;--bs-btn-border-radius:2px;--bs-btn-focus-shadow-rgb:189,207,152;line-height:1;box-shadow:none}.btn-primary{--bs-btn-color:#283125;--bs-btn-bg:#bdcf98;--bs-btn-border-color:#cddbab;--bs-btn-hover-color:#20291d;--bs-btn-hover-bg:#d0dfae;--bs-btn-hover-border-color:#dbe5bd;--bs-btn-active-bg:#a7bc80;--bs-btn-active-color:#20291d;--bs-btn-active-border-color:#91a96a;--bs-btn-disabled-bg:#667351;--bs-btn-disabled-border-color:#667351;--bs-btn-disabled-color:#283125}.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #d3e2ac;outline-offset:3px}.form-control{font:22px 'VT323',monospace;--bs-body-bg:#1c2119;background:#1c2119;border-color:#637058;color:#dce7cb;border-radius:2px;padding:8px 11px}.form-control:focus{background:#1c2119;color:#e3edcc;border-color:#b4c797;box-shadow:0 0 0 2px #bdcf9820}.form-control::placeholder{color:#7f8e71}
header{max-width:1120px;padding:27px 28px 22px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:8px;align-items:center;font-size:30px;color:#dcdfd0}.brand img{width:16px;height:21px;filter:saturate(.5)}.tools{display:flex;align-items:center;gap:12px}#connection{width:5px;height:5px;background:var(--yellow)}#connection.connected{background:var(--green)}#connection.offline{background:var(--coral)}#profile{font-size:19px;color:#bec8ac;padding:7px 9px;border:1px solid var(--edge);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;padding:0;border:1px solid transparent;color:#99a28f;background:transparent}.icon-btn:hover{color:#e1e6d3;background:#30362b;border-color:#59634d}main{max-width:1120px;margin:0 auto 50px;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px}.game-widget{min-width:0}.game-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border:1px solid var(--edge);background:#262a25;padding:4px;margin-bottom:12px}.game-tabs button{font:20px 'VT323',monospace;border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:9px;min-height:43px;padding:7px;color:#9da892;background:transparent;white-space:nowrap;border-radius:1px}.game-tabs button.selected{background:#39432f;border-color:#687650;color:#d8e6bf}.game-tabs button[data-game=ttt].selected{background:#45363b;border-color:#7b5969;color:#e5bacb}.game-tabs button[data-game=rain].selected{background:#46412f;border-color:#847449;color:var(--yellow)}.game-tabs img{width:23px;height:24px;object-fit:contain;image-rendering:pixelated}.game-panel{background:#262b24;border:1px solid #56604b;box-shadow:3px 3px 0 #11150f}.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:center;gap:12px;min-height:75px;padding:16px 19px}.player{display:flex;flex-direction:column;min-width:0;color:var(--green);font-size:19px}.player span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player small{font-size:15px;line-height:1;color:var(--coral)}.player small:empty{display:none}.rival{text-align:right;color:var(--coral)}.scores{display:flex;align-items:center;justify-content:center;gap:17px;font-size:42px;line-height:1;font-variant-numeric:tabular-nums}.scores span:first-child{color:var(--green)}.scores span:last-child{color:var(--coral)}.scores span:nth-child(2){font-size:25px;color:#758168}#court-wrap{aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 12px;border:1px solid #536044;background:#111b14}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:ns-resize;outline-offset:-3px}#court-wrap[data-kind=rain] canvas{cursor:ew-resize}#court-wrap:fullscreen{margin:0;width:100vw;height:100dvh;background:#111b14;display:grid;place-items:center}#court-wrap:fullscreen canvas{height:auto;max-height:100dvh;max-width:177.77dvh;aspect-ratio:16/9}.game-toolbar{display:flex;align-items:center;justify-content:space-between;padding:3px 9px 3px 15px;min-height:34px;font-size:16px;color:#8f9b80}.game-toolbar>div{display:flex;gap:2px}.game-toolbar .icon-btn{width:26px;height:26px}.game-toolbar svg{width:13px;height:13px}#match-controls{display:flex;align-items:center;gap:8px;padding-top:14px}.play-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:7px 20px;box-shadow:0 2px 0 #67774d}#play{flex:1}#match-controls>.icon-btn{height:38px;width:40px;border-color:var(--edge);background:#2b3226}#room-controls{display:flex;gap:10px;align-items:center;padding-top:12px;min-height:53px}#room-code{font:21px 'VT323',monospace;color:var(--yellow);letter-spacing:2px}#room-state{font-size:17px;color:#91a17b;margin-right:auto}#room-controls .icon-btn{border-color:var(--edge)}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#111b14ba;pointer-events:none;z-index:2;text-align:center;padding:15px}#overlay strong{font-size:34px;font-weight:400;color:#d9e7c2}#overlay small{font-size:19px;color:#a6b690}#overlay.countdown{background:transparent}#overlay.countdown strong{font-size:60px}#overlay.compact{top:auto;bottom:2%;padding:0;background:transparent}#overlay.compact strong{font-size:17px}#overlay.compact small{display:none}#overlay.result strong{color:var(--yellow)}#board{position:absolute;left:29%;top:10%;width:42%;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px}#board button{font:52px/1 'VT323',monospace;color:var(--green);border:1px solid #58724b;background:#22301e;padding:0;min-width:0;min-height:0}#board button[data-symbol=O]{color:var(--coral)}#board button:not(:disabled):hover{background:#3a4b2c}#board button.winning{background:#41432a;border-color:var(--yellow)}aside{border:1px solid var(--edge);background:#252a24;align-self:start;padding:16px 16px 0;min-width:0}.leader-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--edge)}.leader-heading h1{font-size:22px;font-weight:400;margin:0}.leader-heading svg{color:var(--yellow);width:15px;height:15px}#leaders{list-style:none;padding:0;margin:0}.leader-row{display:grid;grid-template-columns:17px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:45px;border-bottom:1px solid #3b4633;font-size:18px}.leader-rank{color:#81916f;font-size:15px}.leader-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leader-points{color:#cad9b5}.leader-row:first-child .leader-points{color:var(--yellow)}.leader-row.is-you .leader-name{color:var(--green)}#empty{font-size:18px;color:#859573;text-align:center;padding:44px 0;margin:0}.standing{display:flex;align-items:center;gap:10px;margin:0 -16px;padding:11px 16px;background:#303a29;border-top:1px solid #536143;font-size:18px}.standing span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.standing strong{margin-left:auto;font-weight:400;color:var(--green);white-space:nowrap}.standing small{font-size:15px;color:#8e9f79;white-space:nowrap}
dialog{max-width:calc(100% - 32px);width:340px;padding:21px;border:1px solid #6c7d57;background:#292f24;color:#dce6ca;box-shadow:5px 5px 0 #0005;font-size:20px}dialog::backdrop{background:#0b0f0bdb}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.dialog-heading h2{font-size:27px;font-weight:400;margin:0}.dialog-heading .icon-btn{height:26px;width:26px}#profile-form>small{font-size:15px;color:#9baa88;display:block;margin:10px 0}#profile-form>.play-btn{width:100%;margin-top:4px}#profile-error{font-size:17px;color:var(--coral);margin:7px 0}#profile-error:empty{display:none}#join-form{display:flex;gap:10px}#join-form input{text-transform:uppercase;min-width:0}#join-form>.play-btn{padding:0 14px}#rules-content{color:#bdcbaa;font-size:20px;line-height:1.4}#rules-content p:last-child{margin:0}#leave-dialog>p{color:#b4c39f}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:30;background:#35432a;border:1px solid #8da46c;box-shadow:3px 3px 0 #1118;padding:10px 16px;max-width:calc(100% - 28px);width:max-content;font-size:19px;color:#deebc9;text-align:center}
@media(max-width:850px){main{grid-template-columns:minmax(0,1fr) 210px;gap:18px}.game-tabs button{font-size:18px;gap:7px}.game-tabs img{width:21px;height:22px}.scoreboard{padding:15px;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)}.scores{font-size:38px;gap:13px}.player{font-size:17px}.leader-heading h1{font-size:20px}.leader-row{font-size:16px;gap:6px}}
@media(max-width:680px){header{padding:22px 19px 19px;max-width:610px}main{grid-template-columns:1fr;padding:0 19px;gap:24px;max-width:610px}.game-tabs button{font-size:21px;gap:10px;min-height:44px}.game-tabs img{width:23px;height:24px}.scoreboard{padding:16px 18px;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)}.player{font-size:20px}.scores{font-size:44px;gap:17px}aside{padding:16px 18px 0}.leader-heading h1{font-size:23px}.leader-row{font-size:20px;min-height:46px}.standing{margin:0 -18px;padding:12px 18px}#empty{padding:29px 0}#board button{font-size:52px}}
@media(max-width:400px){header{padding:19px 15px 17px}main{padding:0 15px;gap:22px}.tools{gap:9px}#profile{max-width:125px;font-size:18px}.game-tabs button{font-size:18px;padding:8px 4px;gap:6px;min-height:40px}.game-tabs img{width:20px;height:22px}.scoreboard{padding:14px 12px;gap:8px;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);min-height:67px}.player{font-size:18px}.scores{font-size:39px;gap:12px}#court-wrap{margin:0 9px}.game-toolbar{font-size:15px;padding-left:12px}#overlay strong{font-size:29px}#overlay small{font-size:16px}#overlay.compact strong{font-size:14px}#board{gap:4px}#board button{font-size:39px}#room-controls{gap:8px}#room-code{font-size:19px}#room-state{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}