:root{--bg:#030b16;--p:#071a2b;--line:#164765;--c:#25d1ff;--m:#ff3b98;--text:#edf9ff;--muted:#8ca3b5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0,#07345b,transparent 38%),radial-gradient(circle at 90% 90%,#3b1235,transparent 35%),var(--bg);color:var(--text);font:15px Inter,system-ui,sans-serif}button,input{font:inherit}.shell{width:min(1160px,calc(100% - 28px));margin:18px auto;border:1px solid #1a547a;border-radius:22px;background:#04111ef5;padding:28px;box-shadow:0 30px 80px #000a}.shell>header{display:flex;justify-content:space-between;align-items:center}.shell h1{font-size:clamp(32px,5vw,58px);margin:0;letter-spacing:.05em;text-shadow:0 0 20px #25d1ff55}.shell header p{color:var(--c);letter-spacing:.55em}.shell header p b{color:var(--m)}header aside,.versus>div{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:10px 14px;border-radius:14px;background:var(--p)}header aside i,.versus i{width:48px;height:48px;border:2px solid var(--c);border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900}header aside small,.versus small{display:block;color:var(--c);margin-top:5px}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:28px 0 18px}.actions button{min-height:95px;background:linear-gradient(135deg,#08243a,#071420);border:1px solid #1686b1;color:var(--c);border-radius:13px;font-size:35px;display:flex;align-items:center;gap:15px;padding:18px;cursor:pointer}.actions button:nth-child(2){border-color:#9d2b68;color:var(--m)}.actions button span{text-align:left;color:#fff;font-size:18px;font-weight:800}.actions small{display:block;color:var(--muted);font-size:12px;margin-top:7px}.rooms{border:1px solid var(--line);border-radius:14px;overflow:hidden}.room-head{display:flex;align-items:center;gap:14px;padding:15px 18px}.room-head h2{margin:0 auto 0 0}.room-head span{border:1px solid var(--line);padding:8px;border-radius:7px;color:#a9bdcb}.tabs{padding:13px 23px;border-bottom:1px solid var(--line);color:var(--c)}.list{padding:8px}.list article{display:grid;grid-template-columns:50px 1fr 160px 60px 90px;align-items:center;gap:10px;background:var(--p);border:1px solid #123a55;border-radius:9px;padding:11px;margin:7px}.list article>i{font-size:25px;color:var(--c)}.list article small{display:block;color:var(--c);margin-top:5px}.list article>span{color:#b8ddea}.list article>button,.bottom button{background:#08769d;border:1px solid var(--c);color:#fff;padding:11px;border-radius:7px;cursor:pointer}.empty{height:260px;display:grid;place-content:center;text-align:center;color:var(--muted);gap:8px}.empty b{font-size:21px;color:#fff}footer{padding-top:18px;color:var(--muted)}footer span{float:right}.game-top{display:flex;justify-content:space-between;color:var(--c)}.game-top button{background:var(--p);border:1px solid var(--line);color:#fff;padding:9px;border-radius:8px}.versus{margin:14px 0;display:grid;grid-template-columns:1fr 240px 1fr;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 25px}.versus>div:last-child{justify-self:end}.versus>strong{display:flex;justify-content:center;align-items:center;gap:25px;font-size:38px;color:var(--c)}.versus>strong>span{font-size:14px;color:var(--muted);text-align:center}.versus>strong small{display:block;color:#fff;font-size:10px}.play{display:grid;grid-template-columns:minmax(300px,610px) 250px;justify-content:center;gap:22px;position:relative}.board{aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:7px;border:2px solid #14719e;border-radius:20px}.board button{background:#071b2c;border:1px solid #286184;color:#fff;font-size:clamp(60px,9vw,110px);border-radius:5px;cursor:pointer}.board .x{color:var(--c);text-shadow:0 0 20px var(--c)}.board .o{color:var(--m);text-shadow:0 0 20px var(--m)}.board .win{background:#0d3c50}.result{position:absolute;left:26%;top:46%;transform:translate(-50%,-50%);background:#04111ef2;border:2px solid var(--c);padding:15px 25px;border-radius:10px;font-weight:900;font-size:24px}.play aside>div{border:1px solid var(--line);background:var(--p);border-radius:10px;padding:14px;margin-bottom:11px}.turn{color:var(--c);font-weight:800}.turn>b{font-size:45px;display:block;text-align:center}.code{text-align:center;color:var(--muted)}.code b{display:block;color:#fff;font-size:23px;letter-spacing:.2em}.react button{background:#0b2a40;border:1px solid var(--line);padding:6px;margin:8px 2px 0;border-radius:5px}.chat label{display:flex;margin-top:12px}.chat input{min-width:0;width:100%;background:#06121f;border:1px solid var(--line);color:#fff;padding:9px}.chat button{background:none;border:1px solid var(--line);color:var(--c)}.bottom{display:flex;justify-content:center;gap:15px;margin-top:18px}.bottom button{min-width:180px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%);background:#0d3545;border:1px solid #4ce4bd;padding:12px 20px;border-radius:9px;z-index:20}@media(max-width:780px){.shell{width:100%;margin:0;border-radius:0;min-height:100vh;padding:16px}.actions{grid-template-columns:1fr}.actions button{min-height:72px}.room-head span{font-size:0}.room-head span b{font-size:12px}.list article{grid-template-columns:35px 1fr 45px 65px}.list article>span{display:none}.play{grid-template-columns:1fr}.play aside{display:grid;grid-template-columns:1fr 1fr}.chat{display:none}.versus{grid-template-columns:1fr 110px 1fr;padding:9px}.versus i{width:40px;height:40px}.versus>strong{font-size:25px;gap:7px}.result{left:50%;top:35%}.shell>header aside span{display:none}.shell h1{font-size:30px}.shell header p{font-size:10px}.board button{font-size:19vw}}.messages{height:112px;overflow-y:auto;margin-top:9px;padding:7px;background:#04111d;border:1px solid #102f46;border-radius:6px}.messages p{margin:0 0 6px;font-size:12px;line-height:1.35;color:#c7d6df;overflow-wrap:anywhere}.messages p b{color:var(--c)}.messages .chat-empty{color:var(--muted);font-style:italic}.chat label{margin-top:9px}@media(max-width:780px){.play aside .chat{display:block;grid-column:1/-1}.messages{height:90px}}#chat-notification{position:fixed;left:50%;top:50%;z-index:1150;width:min(420px,calc(100% - 32px));transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;border:1px solid #25d1ff;border-radius:16px;background:linear-gradient(145deg,#09233a,#170c24);color:#eef8ff;padding:20px 22px;text-align:left;box-shadow:0 24px 80px #000d,0 0 30px #25d1ff45;transition:opacity .2s ease,transform .2s ease}#chat-notification.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}#chat-notification small,#chat-notification strong,#chat-notification span{display:block}#chat-notification small{color:#25d1ff;font-size:12px;text-transform:uppercase;letter-spacing:.06em}#chat-notification strong{margin-top:8px;font-size:18px;line-height:1.4;overflow-wrap:anywhere}#chat-notification span{margin-top:10px;color:#91a9ba;font-size:11px}html,body,#app{width:100%;max-width:100%;overflow-x:hidden}.shell,.game,.game-top,.versus,.play,.play>section,.board{min-width:0;max-width:100%}@media(max-width:780px){.shell{width:100%;max-width:100%;padding:14px;overflow-x:hidden}.game-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;width:100%}.game-top>button{grid-column:1;grid-row:1;justify-self:start;white-space:nowrap}.game-top>span{grid-column:2;grid-row:1;justify-self:end;min-width:0;font-size:11px;white-space:nowrap}.game-top>b{grid-column:1 / -1;grid-row:2;justify-self:center;text-align:center;font-size:13px;margin-top:4px}.versus{display:grid;grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);gap:4px;width:100%;padding:8px 5px;overflow:hidden}.versus>div,.versus>div:last-child{width:100%;min-width:0;max-width:100%;padding:7px 5px;gap:5px;justify-self:stretch;overflow:hidden}.versus>div:last-child{justify-content:flex-end}.versus>div>b{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.versus>div>b small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.versus i{width:36px;height:36px;min-width:36px;flex:0 0 36px;font-size:13px}.versus>strong{min-width:0;gap:4px;font-size:23px;white-space:nowrap}.versus>strong>span{min-width:0;font-size:9px}.versus>strong small{font-size:7px}.play{width:100%;grid-template-columns:minmax(0,1fr)}.play>section,.board{width:100%}.board{padding:5px;gap:5px}.board button{min-width:0}}@media(max-width:390px){.shell{padding-left:10px;padding-right:10px}.versus{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)}.versus i{width:32px;height:32px;min-width:32px;flex-basis:32px}.versus>strong{font-size:20px}}#pwa-install-button{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:1000;border:1px solid #48e1ff;border-radius:999px;background:linear-gradient(135deg,#087ca5,#b52572);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 35px #000b,0 0 22px #24cfff45;cursor:pointer;font:inherit}#pwa-install-button[hidden]{display:none}#pwa-ios-guide{position:fixed;inset:0;z-index:1100;background:#010711d9;display:grid;place-items:center;padding:20px;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#pwa-ios-guide[hidden]{display:none}#pwa-ios-guide>div{position:relative;width:min(390px,100%);border:1px solid #1d6388;border-radius:18px;background:#071a2b;color:#eef8ff;padding:28px;box-shadow:0 30px 80px #000}#pwa-guide-close{position:absolute;right:12px;top:8px;border:0;background:none;color:#9db2c1;font-size:28px}#pwa-guide-done{width:100%;border:1px solid #24cfff;border-radius:8px;background:#08769d;color:#fff;padding:12px}@media(max-width:520px){#pwa-install-button{left:50%;right:auto;transform:translate(-50%);white-space:nowrap}}.account-button,.leaderboard-button{border:1px solid #166386;background:#041b2b;color:#eefaff;border-radius:12px;cursor:pointer;font:700 13px inherit;padding:9px 12px}.account-button{position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:40;box-shadow:0 0 22px #00c8ff20}.account-button strong{color:#21d5ff}.leaderboard-button{margin-left:auto}.auth-modal{position:fixed;inset:0;z-index:1000;background:#010812dd;display:grid;place-items:center;padding:18px}.auth-card{width:min(430px,100%);max-height:90dvh;overflow:auto;background:linear-gradient(145deg,#061b2b,#03111e);border:1px solid #126083;border-radius:20px;padding:22px;box-shadow:0 24px 80px #000b}.auth-card h2{margin:0 0 6px;color:#f7fbff}.auth-card p{color:#88a9bb}.auth-close{float:right;border:0;background:transparent;color:#a8c8d8;font-size:25px;cursor:pointer}.auth-tabs{display:flex;gap:8px;margin:18px 0}.auth-tabs button{flex:1;padding:10px;border:1px solid #155774;background:#061725;color:#9bc;border-radius:10px}.auth-tabs button.active{color:#fff;border-color:#f22d91}.auth-form{display:grid;gap:12px}.auth-form label{display:grid;gap:6px;color:#a9c8d7;font-size:13px}.auth-form input{box-sizing:border-box;width:100%;padding:13px;border:1px solid #185a78;border-radius:10px;background:#020d17;color:#fff;font-size:16px}.auth-primary{padding:13px;border:0;border-radius:11px;background:linear-gradient(90deg,#08bce8,#ee2d91);color:#fff;font-weight:900;cursor:pointer}.auth-error{min-height:18px;color:#ff6d9f}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.profile-stats div{background:#03101c;border:1px solid #124b67;border-radius:12px;padding:12px;text-align:center}.profile-stats b{display:block;color:#27d6ff;font-size:22px}.leaderboard-list{display:grid;gap:7px;margin-top:15px}.leaderboard-row{display:grid;grid-template-columns:38px 1fr 70px 62px;gap:8px;align-items:center;padding:11px;border-bottom:1px solid #12394e;color:#dcedf5}.leaderboard-row.me{background:#0c3347;border-radius:10px}.leaderboard-row b:last-child{color:#27d6ff;text-align:right}.auth-note{font-size:12px;color:#789aaa}.ranked-locked{margin-top:12px;padding:11px;border:1px solid #795421;background:#251b0d;color:#ffd37a;border-radius:10px}@media(max-width:600px){.account-button{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));padding:8px 10px}.leaderboard-button{font-size:0}.leaderboard-button:after{content:"🏆";font-size:18px}.auth-card{padding:18px}.leaderboard-row{grid-template-columns:30px 1fr 58px 48px;font-size:13px}}