@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap";:root{color:#f8f7ff;font-synthesis:none;text-rendering:optimizelegibility;--bg:#0c0b19;--panel:#151328;--panel2:#1c1933;--purple:#7657ff;--purple2:#9c87ff;--mint:#17d7c0;--pink:#ff5f8f;--yellow:#ffbd3d;--text:#f8f7ff;--muted:#aaa5c0;--line:#ffffff17;background:#0c0b19;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.ambient{pointer-events:none;filter:blur(90px);opacity:.24;border-radius:50%;position:fixed}.ambient-one{background:var(--purple);width:430px;height:430px;top:-120px;right:-100px}.ambient-two{background:var(--mint);width:360px;height:360px;bottom:-100px;left:-140px}.home-shell{min-height:100vh;padding:0 5vw;position:relative;overflow:hidden}.topbar{justify-content:space-between;align-items:center;max-width:1240px;height:90px;margin:auto;display:flex}.brand{letter-spacing:-.04em;align-items:center;gap:.65rem;font-family:Manrope,sans-serif;font-size:1.2rem;display:flex}.brand-mark{background:linear-gradient(145deg,var(--purple),#4b35bb);border-radius:13px;place-items:center;width:40px;height:40px;display:grid;transform:rotate(-7deg);box-shadow:0 9px 26px #7657ff52}.live-pill{border:1px solid var(--line);color:var(--muted);letter-spacing:.08em;background:#ffffff08;border-radius:999px;align-items:center;gap:.55rem;padding:.55rem .82rem;font-size:.72rem;font-weight:800;display:flex}.live-pill i{background:var(--mint);border-radius:50%;width:7px;height:7px;animation:1.8s infinite pulse;box-shadow:0 0 0 5px #17d7c01a}.home-grid{grid-template-columns:1.05fr .72fr;align-items:center;gap:clamp(3rem,8vw,7rem);max-width:1170px;margin:clamp(2rem,7vh,5.5rem) auto 3rem;display:grid}.intro{max-width:610px}.eyebrow{color:var(--mint);letter-spacing:.13em;align-items:center;gap:.5rem;margin-bottom:1.4rem;font-size:.78rem;font-weight:800;display:flex}.intro h1{letter-spacing:-.075em;margin:0;font-family:Manrope,sans-serif;font-size:clamp(3.5rem,7vw,6.5rem);line-height:.9}.intro h1 span{color:#0000;background:linear-gradient(100deg,var(--purple2),var(--mint));-webkit-background-clip:text;background-clip:text}.intro>p{max-width:550px;color:var(--muted);margin:1.8rem 0 2rem;font-size:1.04rem;line-height:1.75}.stat-row{color:#85809a;gap:1.8rem;font-size:.74rem;display:flex}.stat-row span{align-items:baseline;gap:.35rem;display:flex}.stat-row b{color:var(--text);font-family:Manrope;font-size:1.25rem}.setup-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:linear-gradient(150deg,#fff1,#ffffff06);border-radius:25px;padding:1.55rem;position:relative;box-shadow:0 30px 80px #00000061}.setup-card:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(140deg,#9c87ff73,#0000 40%,#17d7c040);padding:1px;position:absolute;inset:-1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)}.card-title{justify-content:space-between;align-items:end;margin-bottom:1.3rem;display:flex}.card-title span{font-family:Manrope;font-size:1.15rem;font-weight:800}.card-title small{color:var(--muted);font-size:.68rem}.setup-card label{color:var(--muted);flex-direction:column;gap:.5rem;font-size:.72rem;font-weight:700;display:flex}.setup-card input{border:1px solid var(--line);width:100%;color:var(--text);background:#0f0d1e;border-radius:12px;outline:none;padding:.82rem .9rem;transition:all .2s}.setup-card input:focus,.guess-box input:focus{border-color:#7657ffbf;box-shadow:0 0 0 3px #7657ff1f}.segmented,.option-row{gap:.45rem;display:grid}.segmented{grid-template-columns:1fr 1fr;margin:1rem 0}.segmented button,.option-row button{border:1px solid var(--line);color:var(--muted);background:#111022;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:.68rem;font-size:.77rem;font-weight:700;display:flex}.segmented button.active,.option-row button.active{color:#dcd5ff;background:#7657ff26;border-color:#7657ffb3}.option-block{margin:.9rem 0}.option-block>span{color:var(--muted);margin-bottom:.45rem;font-size:.69rem;font-weight:700;display:block}.option-row{grid-template-columns:repeat(3,1fr)}.option-row button{padding:.55rem .3rem;font-size:.68rem}.primary-button{background:linear-gradient(120deg,var(--purple),#8e70ff);color:#fff;border:0;border-radius:12px;justify-content:center;align-items:center;gap:.6rem;width:100%;margin-top:1rem;padding:.86rem 1rem;font-weight:800;display:flex;box-shadow:0 12px 30px #7657ff3d}.divider{color:#716d85;align-items:center;gap:.7rem;margin:1rem 0;font-size:.64rem;display:flex}.divider:before,.divider:after{content:"";background:var(--line);flex:1;height:1px}.join-row{grid-template-columns:1fr auto;gap:.55rem;display:grid}.join-row input{text-align:center;letter-spacing:.16em;font-weight:800}.join-row button{border:1px solid var(--line);color:#fff;background:#22203a;border-radius:11px;align-items:center;gap:.35rem;padding:0 1rem;font-size:.75rem;font-weight:800;display:flex}.error-box{color:#ff9bb9;background:#ff5f8f1f;border-radius:10px;align-items:center;gap:.5rem;margin-top:.8rem;padding:.68rem .8rem;font-size:.72rem;display:flex}.home-shell footer{text-align:center;color:#625e73;padding:1.5rem;font-size:.67rem}.game-shell{background:radial-gradient(circle at 50% -40%,#7657ff38,transparent 47%),var(--bg);flex-direction:column;height:100vh;display:flex;overflow:hidden}.game-header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;background:#0c0b19d9;flex:none;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 1.25rem;display:grid}.room-code{text-align:center}.room-code small{color:#77728d;letter-spacing:.12em;margin-bottom:.1rem;font-size:.55rem;font-weight:800;display:block}.room-code button{color:#fff;letter-spacing:.16em;background:0 0;border:0;align-items:center;gap:.4rem;font-family:Manrope;font-size:1rem;font-weight:800;display:flex}.header-actions{justify-self:end;align-items:center;gap:.65rem;display:flex}.round-label{color:var(--muted);letter-spacing:.08em;font-size:.65rem;font-weight:800}.icon-button{border:1px solid var(--line);background:var(--panel);width:38px;height:38px;color:var(--muted);border-radius:11px;place-items:center;display:grid}.icon-button svg{width:18px}.game-layout{flex:1;grid-template-columns:230px minmax(420px,1fr) 280px;gap:12px;min-height:0;padding:12px;display:grid}.players-panel,.chat-panel,.board-column{border:1px solid var(--line);background:#151328d1;border-radius:17px;min-height:0;position:relative;overflow:hidden}.players-panel,.chat-panel{flex-direction:column;display:flex}.panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:53px;padding:0 1rem;font-size:.83rem;font-weight:800;display:flex}.panel-head small{color:#77728e;font-size:.62rem}.team-score{border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.team-score span{color:var(--muted);justify-content:center;align-items:center;gap:.35rem;padding:.7rem .3rem;font-size:.64rem;display:flex}.team-score span+span{border-left:1px solid var(--line)}.team-score i{border-radius:50%;width:7px;height:7px}.team-score .team-a{background:var(--purple2)}.team-score .team-b{background:var(--mint)}.team-score b{color:#fff;margin-left:.15rem}.player-list{padding:.45rem;overflow:auto}.player-item{color:var(--muted);border-radius:11px;align-items:center;gap:.55rem;padding:.55rem .5rem;font-size:.72rem;display:flex;position:relative}.player-item.drawing{color:#fff;background:#7657ff1c}.player-item.offline{opacity:.42}.avatar{color:#fff;border-radius:10px;flex:none;place-items:center;width:32px;height:32px;font-weight:800;display:grid}.avatar.team-a{background:linear-gradient(145deg,#7962eb,#4a339e)}.avatar.team-b{background:linear-gradient(145deg,#1cbcae,#116f70)}.player-name{white-space:nowrap;text-overflow:ellipsis;flex:1;align-items:center;gap:.3rem;min-width:0;display:flex;overflow:hidden}.player-name small{color:#918ca3;background:#ffffff14;border-radius:4px;padding:.15rem .3rem;font-size:.5rem}.drawing-icon{color:var(--purple2);animation:1.6s ease-in-out infinite wiggle}.check-icon{color:var(--mint)}.leader-dot{background:var(--yellow);border-radius:50%;width:5px;height:5px;position:absolute;top:5px;left:3px}.team-switch{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:.35rem;margin-top:auto;padding:.8rem;display:grid}.team-switch span{color:#77728c;grid-column:1/-1;font-size:.6rem}.team-switch button{border:1px solid var(--line);color:#8d899c;background:#100f20;border-radius:8px;padding:.45rem;font-size:.65rem;font-weight:800}.team-switch button.active.a{border-color:var(--purple);color:#d7d0ff}.team-switch button.active.b{border-color:var(--mint);color:#a3fff4}.board-column{background:#111020;flex-direction:column;padding:10px;display:flex}.round-banner{flex:none;justify-content:space-between;align-items:center;height:58px;padding:0 .85rem 0 1rem;display:flex}.round-banner small{color:#7e798f;letter-spacing:.12em;margin-bottom:.18rem;font-size:.53rem;font-weight:800;display:block}.round-banner strong{font-family:Manrope;font-size:.95rem}.round-banner.danger strong{color:#ff9dbb}.timer{color:var(--mint);align-items:baseline;gap:.25rem;display:flex}.timer svg{align-self:center;margin-right:.2rem}.timer b{font-family:Manrope;font-size:1.35rem}.timer small{color:inherit;font-size:.6rem}.round-banner.danger .timer{color:var(--pink);animation:.8s infinite timerPulse}.board-wrap{background:#fff;border-radius:13px;flex:1;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.board-wrap canvas{touch-action:none;width:100%;height:100%;display:block}.board-wrap canvas.drawable{cursor:crosshair}.toolbar{z-index:3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#141226f0;border-radius:14px;align-items:center;gap:.45rem;padding:.45rem;display:flex;position:absolute;bottom:13px;left:50%;transform:translate(-50%);box-shadow:0 10px 35px #00000047}.colors,.sizes{align-items:center;gap:.3rem;display:flex}.colors button{border:2px solid #0000;border-radius:8px;width:25px;height:25px}.colors button.selected{border-color:#fff;transform:translateY(-2px)}.tool-divider{background:var(--line);width:1px;height:26px;margin:0 .1rem}.sizes button{background:0 0;border:0;border-radius:8px;place-items:center;width:29px;height:29px;display:grid}.sizes button i{background:#cbc7dc;border-radius:50%;min-width:4px;max-width:16px;min-height:4px;max-height:16px;display:block}.sizes button.selected{background:#7657ff40}.tool-button{color:#aaa5bb;background:0 0;border:0;border-radius:8px;align-items:center;gap:.3rem;padding:.45rem .55rem;font-size:.62rem;font-weight:700;display:flex}.tool-button.selected{color:#fff;background:#7657ff40}.tool-button.clear{color:#ff88ac}.lobby-overlay,.finish-overlay{z-index:4;color:#17152b;text-align:center;background:#fffffff5;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:68px 10px 10px}.lobby-art{color:#fff;background:linear-gradient(145deg,var(--purple),#9d82ff);border-radius:23px;place-items:center;width:72px;height:72px;display:grid;transform:rotate(-6deg);box-shadow:0 18px 40px #7657ff52}.lobby-overlay h2,.finish-overlay h2{margin:1rem 0 .4rem;font-family:Manrope;font-size:1.75rem}.lobby-overlay p,.finish-overlay p{color:#77718d;max-width:390px;font-size:.82rem;line-height:1.65}.lobby-settings{gap:.45rem;margin:.7rem 0;display:flex}.lobby-settings span{color:#665f7b;background:#eeebf8;border-radius:999px;padding:.4rem .65rem;font-size:.62rem;font-weight:800}.lobby-overlay .primary-button,.finish-overlay .primary-button{max-width:230px}.waiting{color:#776f8c;align-items:center;gap:.5rem;margin-top:1rem;font-size:.72rem;font-weight:700;display:flex}.waiting i{background:var(--purple);border-radius:50%;width:8px;height:8px;animation:1.5s infinite pulse}.finish-overlay svg{color:var(--purple)}.finish-overlay>span{color:#77718d;font-size:.7rem}.feed{flex:1;padding:.75rem;overflow:auto}.feed-info{color:#8eaaa8;background:#17d7c00f;border:1px solid #17d7c026;border-radius:10px;margin-bottom:.65rem;padding:.75rem;font-size:.66rem;line-height:1.55}.feed-item{color:#aca7bd;background:#ffffff09;border-radius:9px;margin:.32rem 0;padding:.55rem .65rem;font-size:.7rem;line-height:1.35}.feed-item.correct{color:#76f0e1;background:#17d7c01c}.feed-item.info{color:#a99bfa}.guess-box{border-top:1px solid var(--line);grid-template-columns:1fr auto;gap:.4rem;padding:.7rem;display:grid}.guess-box input{border:1px solid var(--line);color:#fff;background:#0f0e1e;border-radius:10px;outline:none;min-width:0;padding:.72rem;font-size:.72rem}.guess-box button{background:var(--purple);color:#fff;border:0;border-radius:10px;place-items:center;width:39px;display:grid}.loading{height:100vh;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;display:flex}.spinner{border:3px solid #ffffff1a;border-top-color:var(--purple);border-radius:50%;width:30px;height:30px;animation:.8s linear infinite spin}.confetti{pointer-events:none;z-index:100;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:9px;height:15px;animation:1.65s cubic-bezier(.2,.7,.35,1) both fall;position:absolute;top:-20px}@keyframes pulse{50%{opacity:.4;transform:scale(.82)}}@keyframes wiggle{50%{transform:rotate(-18deg)}}@keyframes timerPulse{50%{transform:scale(1.07)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(600deg)}}@media (width<=1000px){.game-layout{grid-template-columns:190px minmax(390px,1fr)}.chat-panel{z-index:8;width:280px;height:340px;position:fixed;bottom:12px;right:12px;box-shadow:0 20px 60px #00000073}.home-grid{gap:3rem}}@media (width<=760px){.home-shell{padding:0 20px}.topbar{height:74px}.home-grid{grid-template-columns:1fr;margin:2.5rem auto}.intro h1{font-size:clamp(3.3rem,16vw,5.2rem)}.intro>p{font-size:.92rem}.stat-row{flex-wrap:wrap;gap:1rem}.setup-card{padding:1.15rem}.game-shell{height:auto;min-height:100dvh;overflow:auto}.game-header{height:64px;padding:0 .8rem;position:sticky;top:0}.game-header .brand b{display:none}.game-header .brand-mark{width:36px;height:36px}.round-label{display:none}.game-layout{flex-direction:column;padding:8px;display:flex}.players-panel{order:2;min-height:110px}.player-list{display:flex;overflow-x:auto}.player-item{min-width:150px}.team-score,.team-switch{display:none}.board-column{order:1;height:62dvh;min-height:430px}.chat-panel{order:3;width:auto;height:280px;position:static}.toolbar{justify-content:flex-start;max-width:calc(100% - 16px);overflow-x:auto}.tool-button span{display:none}.colors button{width:23px;height:23px}.lobby-overlay,.finish-overlay{inset:68px 10px 10px}.panel-head{height:45px}.home-shell footer{padding-bottom:2rem}}@media (width<=420px){.intro h1{font-size:3.5rem}.stat-row span:last-child{display:none}.option-row button{font-size:.61rem}.game-header{grid-template-columns:1fr auto 1fr}.room-code small{display:none}.room-code button{font-size:.78rem}.board-column{height:58dvh;min-height:400px}.toolbar{bottom:8px}.colors{gap:.18rem}.colors button{width:20px;height:20px}.sizes button{width:25px}.tool-divider{display:none}}.leave-button{color:#ff91b2;background:#ff5f8f14;border:1px solid #ff5f8f3d;border-radius:11px;align-items:center;gap:.4rem;height:38px;padding:0 .72rem;font-size:.65rem;font-weight:800;display:flex}.leave-button:hover{background:#ff5f8f29}@media (width<=420px){.leave-button{justify-content:center;width:38px;padding:0}.leave-button span{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}