:root{--bg:#090b14;--panel:#111522;--line:#242b3e;--text:#f5f6fc;--muted:#9299ad;--purple:#a879f5;--font:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden}.ambient{position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(110px);opacity:.13;pointer-events:none;z-index:-1}.ambient-one{background:#8050ed;top:-260px;left:-180px}.ambient-two{background:#267be9;right:-300px;top:240px}.topbar{height:78px;max-width:1200px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.055)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:700 23px var(--display);letter-spacing:-1.2px}.brand-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#aa7af8,#7353e8);display:grid;place-items:center;color:#fff;font-size:21px;box-shadow:0 5px 22px #8857ed44}.brand-dot{color:#a879f5}.top-actions{display:flex;align-items:center;gap:13px}.online-pill{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#b5a2f5;background:#a879f51a;border:1px solid #a879f533;padding:8px 12px;border-radius:30px}.online-pill i,.footer-status i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#64d99b;margin-right:7px;box-shadow:0 0 10px #64d99b88}.icon-btn,.avatar{border:1px solid var(--line);background:#151a29;color:#bfc5d5;width:36px;height:36px;border-radius:12px;cursor:pointer}.avatar{background:#2b2345;color:#d5c1ff;font-weight:800}.shell{max-width:1080px;margin:0 auto;padding:55px 28px 24px}.hero{text-align:center}.eyebrow,.panel-kicker{font-size:10px;letter-spacing:2px;font-weight:800;color:#ad91f4}.spark{font-size:14px;margin-right:5px}.hero h1{font:700 clamp(44px,7vw,76px)/.99 var(--display);letter-spacing:-4px;margin:20px 0 15px}.hero h1 span{background:linear-gradient(90deg,#b38aff,#729cf8);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{color:#9ca3b8;line-height:1.7;font-size:14px;margin:0}.hero-stats{display:flex;justify-content:center;gap:30px;margin:25px 0 40px}.hero-stats div{display:flex;align-items:center;gap:8px;color:#858da3;font-size:11px}.hero-stats strong{color:#b69afa;font-size:15px}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;max-width:800px;margin:auto}.panel{background:linear-gradient(145deg,#141929,#101522);border:1px solid #252c40;border-radius:20px;padding:26px;box-shadow:0 18px 60px #0002}.panel-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;margin-bottom:20px}.panel-icon.purple{background:#a879f51b;color:#b999ff}.panel-icon.blue{background:#5b9cf61c;color:#77b3ff}.panel h2{font:700 23px var(--display);letter-spacing:-.7px;margin:7px 0}.panel p{font-size:12px;color:#9299ad;line-height:1.6;margin:0 0 22px}.field-label{display:block;font-size:9px;letter-spacing:1.4px;font-weight:800;color:#777f95;margin:16px 0 8px}.text-input{width:100%;height:43px;border:1px solid #2a3145;background:#0c101b;color:#f3f4fb;border-radius:10px;padding:0 13px;font:500 12px var(--font);outline:none;transition:.2s}.text-input:focus{border-color:#9270e8;box-shadow:0 0 0 3px #9873ed1c}.text-input::placeholder{color:#626b81}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary-btn,.secondary-btn{width:100%;height:46px;border:0;border-radius:11px;margin-top:20px;background:linear-gradient(100deg,#9565ed,#6e76ee);color:white;font:700 12px var(--font);cursor:pointer;box-shadow:0 8px 25px #835ce83a;transition:transform .2s,filter .2s}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.primary-btn span,.secondary-btn span{float:right;font-size:17px;margin-right:4px;margin-top:-3px}.secondary-btn{background:linear-gradient(100deg,#3989e9,#5b72e9);box-shadow:0 8px 25px #3989e933}.secure-note{font-size:10px;color:#707a91;text-align:center;margin-top:15px}.secure-note span{color:#a78af2;margin-right:5px}.code-input{text-transform:uppercase;letter-spacing:4px;font-weight:800}.bottom-row{max-width:800px;margin:18px auto 0;display:flex;align-items:center;gap:15px}.how-card{display:flex;align-items:center;gap:13px;background:#111624;border:1px solid #242b3e;border-radius:14px;padding:14px 16px;flex:1}.mini-icon{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;background:#a879f51c;color:#b99aff;border-radius:10px}.how-card strong,.how-card span{display:block}.how-card strong{font-size:11px}.how-card span{font-size:10px;color:#8992a8;margin-top:4px}.how-card button{border:0;background:none;color:#b69afa;font:700 10px var(--font);white-space:nowrap;cursor:pointer}.version-tag{font-size:9px;letter-spacing:1px;color:#70798e;white-space:nowrap}.version-tag b{color:#b79afa;margin-left:4px}footer{max-width:800px;margin:40px auto 0;border-top:1px solid #202638;padding-top:18px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#687187}footer b{color:#f16b91;margin-left:4px}.footer-status{color:#7f8a9e}.modal-backdrop{position:fixed;inset:0;background:#050711c9;backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;z-index:20}.hidden{display:none!important}.modal{width:min(430px,100%);background:#141a2a;border:1px solid #333b55;border-radius:22px;padding:32px;text-align:center;position:relative;box-shadow:0 25px 100px #0009}.modal-close{position:absolute;right:17px;top:13px;border:0;background:none;color:#8992a7;font-size:25px;cursor:pointer}.modal-icon{font-size:34px;color:#b99aff;margin-bottom:15px}.modal h2{font:700 25px var(--display);margin:8px 0}.modal p{font-size:12px;color:#9aa2b5;line-height:1.6}.room-code-box{display:flex;align-items:center;justify-content:space-between;background:#0b101c;border:1px dashed #64518f;padding:13px;border-radius:12px;margin:20px 0}.room-code-box span{font-size:9px;color:#8790a6;letter-spacing:1px}.room-code-box strong{font:700 19px var(--display);letter-spacing:3px;color:#c6aaff}.room-code-box button{border:0;border-radius:7px;background:#a879f522;color:#c3a8ff;padding:7px 9px;font-size:10px;cursor:pointer}.modal-actions{margin-top:12px}.modal-actions .primary-btn{margin-top:8px}.ghost-btn{background:none;border:0;color:#9099ad;margin-top:13px;font:600 11px var(--font);cursor:pointer}.game-view{min-height:100vh;background:#0a0d17;padding:0 24px 25px}.game-top{max-width:1320px;margin:auto;height:75px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252c40}.game-brand{border:0;background:none;cursor:pointer}.round-label{font-size:10px;letter-spacing:1px;color:#8f98ac}.round-label b{color:#c2a6ff;margin-left:5px}.timer{background:#191e30;border:1px solid #333a53;padding:9px 15px;border-radius:11px;color:#f0e9ff}.timer span{color:#b696ff;margin-right:6px}.timer b{font:700 18px var(--display)}.timer small{font-size:8px;color:#8e97ab;margin-left:4px}.leave-btn{border:1px solid #3a3048;background:#211a2c;color:#d8b7e8;border-radius:9px;padding:9px 13px;font-size:10px;cursor:pointer}.game-layout{max-width:1320px;margin:22px auto;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:17px}.canvas-panel,.side-panel>div{background:#141a29;border:1px solid #293148;border-radius:16px;overflow:hidden}.canvas-heading{padding:15px 18px;display:flex;justify-content:space-between;align-items:center}.canvas-heading b,.canvas-heading small{display:block}.canvas-heading b{font-size:10px;letter-spacing:1px}.canvas-heading small{font-size:10px;color:#9da5b8;margin-top:5px}.canvas-actions{display:flex;gap:7px}.canvas-actions button{width:31px;height:30px;border:1px solid #303950;border-radius:8px;background:#1b2233;color:#b8c1d5;cursor:pointer}.canvas-wrap{position:relative;margin:0 14px;background:#f8f8fb;border-radius:10px;overflow:hidden;aspect-ratio:1000/620}#drawingCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.canvas-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#111827bb;backdrop-filter:blur(5px)}.word-choices{display:grid;gap:9px;width:min(260px,80%);text-align:center}.word-choices span{font-size:10px;letter-spacing:1.5px;color:#fff;margin-bottom:5px}.word-choices button{border:1px solid #ffffff33;border-radius:10px;padding:13px;background:#ffffff18;color:#fff;font:700 13px var(--font);cursor:pointer}.word-choices button:hover{background:#a879f555}.toolbar{display:flex;align-items:center;gap:17px;padding:13px 16px}.tool-group{display:flex;gap:6px}.tool{width:32px;height:31px;border:1px solid #303950;background:#1a2030;color:#aab2c4;border-radius:8px;cursor:pointer}.tool.active{border-color:#a879f5;color:#c7aaff;background:#a879f51c}.swatches{display:flex;gap:7px;flex:1;flex-wrap:wrap}.swatch{width:20px;height:20px;border-radius:50%;background:var(--swatch);border:2px solid #ffffff22;cursor:pointer}.swatch.active{outline:2px solid #bda1ff;outline-offset:2px}.size-control{display:flex;align-items:center;gap:8px;font-size:8px;color:#8c96aa;letter-spacing:1px}.size-control input{width:75px;accent-color:#a879f5}.demo-warning{text-align:center;color:#b6a0e8;background:#a879f511;border-top:1px solid #a879f522;padding:9px;font-size:9px;letter-spacing:.2px}.side-panel{display:flex;flex-direction:column;gap:14px}.players-card{padding:16px}.side-title{font-size:10px;font-weight:800;letter-spacing:1px;color:#c6cce0;display:flex;justify-content:space-between}.side-title>span{color:#aa8bf5}.player-row{display:flex;align-items:center;gap:9px;margin-top:17px}.player-avatar{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#443064;color:#e1ceff;font-weight:800;font-size:11px}.player-name{font-size:11px;flex:1}.player-score{font-size:9px;color:#a9b0c2}.chat-card{padding:16px;display:flex;flex-direction:column;flex:1;min-height:390px}.chat-live{font-size:8px;color:#6ed69e!important;letter-spacing:.5px}.chat-messages{flex:1;overflow-y:auto;padding:15px 0;display:flex;flex-direction:column;gap:10px}.system-message{font-size:10px;color:#8d97ac;background:#1d2435;padding:9px;border-radius:8px;line-height:1.5}.guess-line{font-size:10px;color:#c4cadd;line-height:1.4;overflow-wrap:anywhere}.guess-line b{color:#b79aff}.correct-line{color:#69d8a0;background:#19352d;padding:8px;border-radius:8px;font-size:10px}.guess-form{display:flex;gap:7px;border-top:1px solid #2b3349;padding-top:12px}.guess-form input{min-width:0;flex:1;background:#0c111d;border:1px solid #303950;border-radius:9px;padding:0 10px;color:#fff;font-size:10px;outline:none}.guess-form button{width:34px;border:0;border-radius:9px;background:#8761df;color:white;cursor:pointer}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#252c40;border:1px solid #454e68;color:#f3f4fa;border-radius:10px;padding:11px 16px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:720px){.topbar{padding:0 18px}.shell{padding:42px 16px 20px}.hero h1{letter-spacing:-2.5px}.hero-stats{gap:13px;flex-wrap:wrap;margin-bottom:28px}.hero-stats div{font-size:9px}.lobby-grid{grid-template-columns:1fr}.panel{padding:22px}.bottom-row{align-items:stretch;flex-direction:column}.how-card{flex-wrap:wrap}.how-card button{margin-left:auto}.version-tag{text-align:right}footer{font-size:7px;gap:8px}.game-view{padding:0 10px 15px}.game-top{height:65px}.game-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr}.chat-card{min-height:240px}.canvas-heading{padding:12px}.toolbar{gap:10px;padding:11px}.swatches{gap:6px}.swatch{width:17px;height:17px}.size-control input{width:55px}}@media(max-width:380px){.online-pill{display:none}.hero-stats{gap:9px}.hero-stats div{font-size:8px}.panel{padding:19px}.toolbar{flex-wrap:wrap}.swatches{order:3;flex-basis:100%}.game-brand{font-size:18px}.leave-btn{padding:8px;font-size:9px}}
.room-share{display:flex;align-items:center;gap:8px;color:#aeb4ca;font-size:11px;font-weight:700;letter-spacing:.08em}
.room-share b{color:#fff;font-size:14px;letter-spacing:.16em}
.room-share button{border:1px solid #34384d;background:#171a2a;color:#dfe3f5;border-radius:8px;padding:7px 10px;font-size:11px;cursor:pointer}
.start-game-btn{padding:10px 15px;font-size:12px;white-space:nowrap}
#playerList{display:flex;flex-direction:column;gap:8px}
@media(max-width:760px){.room-share{order:3;width:100%;justify-content:center}.game-top{flex-wrap:wrap}.start-game-btn{margin-left:auto}}