: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}}