@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Teko:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background:#131318;justify-content:center;align-items:center;height:100vh;font-family:Nunito,Segoe UI,system-ui,sans-serif;display:flex;overflow:hidden}canvas#game,canvas#three-overlay{image-rendering:auto}.hidden{display:none!important}:root{--bg:#131318;--bg-surface:#1a1a22;--bg-deep:#0f0f14;--primary:#ff8906;--primary-glow:#ff890659;--secondary:#ff6b8a;--secondary-glow:#ff6b8a40;--accent:#56d4a5;--accent-glow:#56d4a540;--info:#c4b5fd;--info-glow:#c4b5fd40;--text:#fffffe;--text-body:#e8e0f5;--text-muted:#bfaed8;--surface:#ffffff14;--surface-hover:#ffffff24;--stroke:#ffffff1a;--radius:4px;--radius-md:8px;--radius-lg:12px;--max-w:460px;--font-display:"Teko", sans-serif;--font-ui:"Rajdhani", sans-serif;--font-body:"Nunito", "Segoe UI", system-ui, sans-serif}#splash-screen,#color-select,#room-lobby{z-index:100;width:100%;height:100%;color:var(--text);-webkit-overflow-scrolling:touch;flex-direction:column;align-items:center;display:flex;position:absolute;top:0;left:0;overflow:hidden auto}#color-select,#room-lobby{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") 0 0/200px 200px,linear-gradient(#1a1a22 0%,#141418 40%,#0f0f14 100%) 0 0/100% 100%}#splash-screen{background:var(--bg-home) center/cover no-repeat;justify-content:flex-end;align-items:flex-start;padding:0 clamp(32px,4vw,80px) clamp(32px,4vh,72px)}#color-select,#room-lobby{justify-content:flex-start;padding:48px 24px 40px}#color-select:before,#room-lobby:before{content:"";pointer-events:none;filter:blur(180px);opacity:.08;background:#ff8906;border-radius:50%;width:500px;height:500px;position:absolute;top:-120px;right:-120px}#color-select:after,#room-lobby:after{content:"";pointer-events:none;background:radial-gradient(#0000 40%,#00000059 100%);position:absolute;inset:0}.splash-title{text-align:left;z-index:1;margin-bottom:clamp(24px,3vh,48px);position:relative}.splash-title .title{font-family:var(--font-display);color:var(--text);letter-spacing:clamp(4px,.5vw,12px);text-transform:uppercase;text-shadow:0 2px 20px #0000004d,0 0 60px #ff890633;font-size:clamp(60px,7vw,130px);font-weight:700;line-height:1}.splash-title .title span{color:var(--primary)}.splash-title .subtitle{font-family:var(--font-ui);color:#ffffff80;letter-spacing:clamp(6px,.8vw,14px);text-transform:uppercase;margin-top:clamp(4px,.5vh,10px);font-size:clamp(11px,1.1vw,18px);font-weight:600}.splash-menu{z-index:1;flex-direction:column;gap:clamp(8px,1vh,16px);width:clamp(320px,30vw,500px);display:flex;position:relative}.screen-header{align-items:center;gap:clamp(10px,1vw,20px);width:100%;max-width:clamp(360px,32vw,600px);margin-bottom:clamp(6px,.6vh,14px);display:flex}.screen-header h2{font-family:var(--font-display);color:var(--text);letter-spacing:1px;text-transform:uppercase;margin:0;font-size:clamp(28px,2.5vw,48px);font-weight:700}.screen-header .btn-header-back{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);color:#ffffffb3;font-family:var(--font-ui);letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08061099;border:1px solid #ffffff14;flex-shrink:0;align-items:center;gap:clamp(6px,.5vw,10px);padding:clamp(8px,.8vw,14px) clamp(14px,1.2vw,24px);font-size:clamp(12px,1vw,18px);font-weight:600;transition:all .2s;display:flex;position:relative;overflow:hidden}.screen-header .btn-header-back:before{content:"";background:var(--primary);opacity:0;height:2px;transition:opacity .2s;position:absolute;bottom:0;left:0;right:0}.screen-header .btn-header-back:hover{color:#fff;background:#ffffff14;border-color:#ffffff2e;transform:translate(-4px)}.screen-header .btn-header-back:hover:before{opacity:1}.screen-subtitle{font-family:var(--font-ui);color:var(--text-muted);width:100%;max-width:clamp(360px,32vw,600px);margin-bottom:clamp(20px,2.5vh,40px);font-size:clamp(12px,1vw,18px);font-weight:600}#color-select h2,#room-lobby h2{font-family:var(--font-display);color:var(--text);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;font-size:24px;font-weight:700}.btn,.mode-buttons>button,.btn-gold,.btn-blue,.btn-red,.btn-green,.btn-orange,.btn-purple,.btn-primary,.btn-secondary,.btn-outline{font-family:var(--font-display);cursor:pointer;color:#fff;letter-spacing:2px;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border:none;justify-content:center;align-items:center;gap:8px;padding:12px 32px;font-size:16px;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .2s,opacity .15s;display:inline-flex;position:relative}.mode-buttons>button{width:100%}.btn:hover,.mode-buttons>button:hover,.btn-gold:hover,.btn-blue:hover,.btn-red:hover,.btn-green:hover,.btn-orange:hover,.btn-purple:hover,.btn-primary:hover,.btn-secondary:hover{transform:scale(1.03)}.btn:active,.mode-buttons>button:active,.btn-gold:active,.btn-blue:active,.btn-red:active,.btn-green:active,.btn-orange:active,.btn-purple:active,.btn-primary:active,.btn-secondary:active{transform:scale(.97)}.btn-primary,.btn-gold,.btn-start{color:#1a1018;box-shadow:0 4px 20px var(--primary-glow);background:linear-gradient(135deg,#ffb347 0%,#ff8906 100%)}.btn-primary:hover,.btn-gold:hover{box-shadow:0 8px 28px var(--primary-glow)}.btn-secondary,.btn-red{background:linear-gradient(135deg, #ff6b8a 0%, var(--secondary) 100%);box-shadow:0 4px 20px var(--secondary-glow)}.btn-secondary:hover,.btn-red:hover{box-shadow:0 8px 28px var(--secondary-glow)}.btn-green{background:linear-gradient(135deg, #56d4a5 0%, var(--accent) 100%);color:#0a1a14;box-shadow:0 4px 20px var(--accent-glow)}.btn-green:hover{box-shadow:0 8px 28px var(--accent-glow)}.btn-purple,.btn-blue{box-shadow:0 4px 16px var(--info-glow);background:linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%)}.btn-purple:hover,.btn-blue:hover{box-shadow:0 8px 28px var(--info-glow)}.btn-orange{color:#1a1018;background:linear-gradient(135deg,#fdba74 0%,#f97316 100%);box-shadow:0 4px 20px #f9731640}.btn-orange:hover{box-shadow:0 8px 28px #f9731659}.btn-outline,.btn-back{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);cursor:pointer;color:var(--text-body);font-size:14px;font-weight:600;font-family:var(--font-display);text-transform:uppercase;letter-spacing:1px;background:#ffffff0f;border:1.5px solid #ffffff1f;padding:10px 24px}.btn-outline:hover,.btn-back:hover{color:var(--text);background:var(--surface);border-color:#fff3}.btn-start{font-family:var(--font-display);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);cursor:pointer;letter-spacing:2px;text-transform:uppercase;border:none;padding:14px 48px;font-size:16px;font-weight:600;transition:transform .15s,box-shadow .2s}.btn-start:hover{box-shadow:0 8px 28px var(--primary-glow);transform:scale(1.03)}.btn-start:active{transform:scale(.97)}.mode-card-list{flex-direction:column;gap:clamp(8px,.8vh,16px);width:100%;max-width:clamp(360px,32vw,600px);display:flex}.mode-card{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);cursor:pointer;text-align:left;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08061099;border:1px solid #ffffff14;align-items:center;gap:clamp(12px,1.2vw,24px);width:100%;padding:clamp(14px,1.4vw,24px) clamp(16px,1.6vw,28px);transition:all .2s;display:flex;position:relative;overflow:hidden}.mode-card:before{content:"";background:var(--card-accent,var(--text-muted));height:2px;position:absolute;bottom:0;left:0;right:0}.mode-card:hover{background:#ffffff14;border-color:#ffffff2e;transform:translate(4px)}.mode-card:active{transform:translateY(0)scale(.98)}.mode-card-icon{clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);width:clamp(40px,3.5vw,64px);height:clamp(40px,3.5vw,64px);color:var(--text);background:#ffffff0f;flex-shrink:0;justify-content:center;align-items:center;font-size:clamp(18px,1.6vw,30px);display:flex}.mode-card-info{flex:1;min-width:0}.mode-card-title{font-family:var(--font-display);color:var(--text);text-transform:uppercase;letter-spacing:1px;font-size:clamp(18px,1.5vw,28px);font-weight:600;line-height:1.1}.mode-card-desc{font-family:var(--font-ui);color:#ffffff80;margin-top:2px;font-size:clamp(11px,.9vw,16px);font-weight:500;line-height:1.3}.mode-card-arrow{color:#fff6;flex-shrink:0;font-size:clamp(14px,1.3vw,24px);transition:transform .2s}.mode-card:hover .mode-card-arrow{color:#ffffffb3;transform:translate(4px)}.mode-card.accent-pink:before{background:var(--secondary)}.mode-card.accent-green:before{background:var(--accent)}.mode-card.accent-purple:before{background:var(--info)}.mode-card.accent-orange:before{background:#f97316}.mode-card.accent-primary:before{background:var(--primary)}.section-label{font-family:var(--font-ui);color:#fff6;letter-spacing:clamp(3px,.4vw,8px);text-transform:uppercase;width:100%;padding:0 0 clamp(6px,.6vh,12px);font-size:clamp(10px,.9vw,16px);font-weight:700}.mode-select-screen{box-sizing:border-box;background:var(--bg-home) center/cover no-repeat;z-index:1;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:0 clamp(32px,4vw,80px) clamp(32px,4vh,72px);display:flex;position:absolute;top:0;left:0}.mode-select-back{z-index:2;position:absolute;top:clamp(16px,2vh,32px);left:clamp(16px,2vw,32px)}.mode-select-back .btn-header-back,.options-screen .mode-select-back .btn-header-back{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);color:#ffffffb3;font-family:var(--font-ui);letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08061099;border:1px solid #ffffff14;align-items:center;gap:clamp(6px,.5vw,10px);padding:clamp(8px,.8vw,14px) clamp(14px,1.2vw,24px);font-size:clamp(12px,1vw,18px);font-weight:600;transition:all .2s;display:flex;position:relative;overflow:hidden}.mode-select-back .btn-header-back:before,.options-screen .mode-select-back .btn-header-back:before{content:"";background:var(--primary);opacity:0;height:2px;transition:opacity .2s;position:absolute;bottom:0;left:0;right:0}.mode-select-back .btn-header-back:hover,.options-screen .mode-select-back .btn-header-back:hover{color:#fff;background:#ffffff14;border-color:#ffffff2e;transform:translate(-4px)}.mode-select-back .btn-header-back:hover:before,.options-screen .mode-select-back .btn-header-back:hover:before{opacity:1}.mode-select-grid{justify-content:space-between;align-items:flex-end;width:100%;display:flex}.mode-select-grid--center{justify-content:center}.mode-select-col{flex-direction:column;flex-shrink:0;width:clamp(280px,28vw,480px);display:flex}.mode-select-col .mode-card-list,.mode-select-col .section-label{max-width:none}.surface-card{border-radius:var(--radius-md);width:100%;max-width:var(--max-w);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08061080;border:1px solid #ffffff14;margin-bottom:10px;padding:clamp(14px,1.2vw,24px) clamp(16px,1.4vw,28px)}.unified-card{width:100%;max-width:var(--max-w)}.unified-section{border-bottom:1px solid var(--stroke);padding:12px 0}.unified-section:first-child{padding-top:0}.unified-section:last-child{border-bottom:none;padding-bottom:0}.unified-section-label{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:clamp(6px,.6vh,14px);font-size:clamp(10px,.75vw,14px);font-weight:700}.cust-screen{flex-direction:column;width:100%;height:100%;padding:0;display:flex}#color-select:has(.cust-screen){justify-content:stretch;align-items:stretch;padding:0}.cust-header{flex-shrink:0;align-items:center;gap:clamp(12px,1.2vw,22px);padding:clamp(12px,1.5vh,24px) clamp(24px,3vw,56px);display:flex}.cust-header .btn-header-back{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);color:#ffffffb3;font-family:var(--font-ui);letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08061099;border:1px solid #ffffff14;flex-shrink:0;align-items:center;gap:clamp(6px,.5vw,10px);padding:clamp(8px,.8vw,14px) clamp(14px,1.2vw,24px);font-size:clamp(12px,1vw,18px);font-weight:600;transition:all .2s;display:flex;position:relative;overflow:hidden}.cust-header .btn-header-back:before{content:"";background:var(--primary);opacity:0;height:2px;transition:opacity .2s;position:absolute;bottom:0;left:0;right:0}.cust-header .btn-header-back:hover{color:#fff;background:#ffffff14;border-color:#ffffff2e;transform:translate(-4px)}.cust-header .btn-header-back:hover:before{opacity:1}.cust-title{flex-direction:column;flex:1;display:flex}.cust-mode-label{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;font-size:clamp(9px,.7vw,14px);font-weight:700}.cust-mode-name{font-family:var(--font-display);color:var(--text);letter-spacing:2px;text-transform:uppercase;font-size:clamp(28px,2.5vw,48px);font-weight:700;line-height:1}.cust-play-btn{font-family:var(--font-display);letter-spacing:3px;text-transform:uppercase;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);flex-shrink:0;padding:clamp(10px,1vh,16px) clamp(28px,3vw,56px);font-size:clamp(16px,1.3vw,24px);font-weight:600}.cust-center{flex:1;justify-content:center;align-items:center;min-height:0;padding:0 clamp(16px,2vw,40px);display:flex}.cust-blobs-zone{justify-content:center;align-items:flex-start;gap:0;display:flex}.cust-player{flex-direction:column;align-items:center;gap:clamp(4px,.5vh,10px);display:flex}.cust-nametag{flex-direction:column;align-items:center;display:flex;position:relative}.cust-nametag-input{border:none;border-top:2.5px solid var(--tag-color,#e74c3c);color:#fff;font-family:var(--font-ui);text-align:center;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 100%,0% 100%);background:#080610b3;outline:none;min-width:clamp(100px,10vw,200px);padding:clamp(5px,.5vh,10px) clamp(14px,1.2vw,28px);font-size:clamp(13px,1.1vw,20px);font-weight:600;transition:border-color .15s,background .15s}.cust-nametag-input::placeholder{color:#fff6;font-weight:500}.cust-nametag-input:focus{border-top-color:var(--primary);background:#0000008c}.cust-nametag-arrow{border-left:5px solid #0000;border-right:5px solid #0000;border-top:6px solid var(--tag-color,#e74c3c);width:0;height:0;margin-top:-1px}.cust-blob-col{flex-shrink:0}.cust-blob-col canvas{width:clamp(140px,min(14vw,28vh),400px);height:clamp(165px,min(16.5vw,33vh),470px);display:block}.cust-colors-col{flex-wrap:wrap;justify-content:center;gap:clamp(4px,.5vw,10px);display:flex}.cust-colors-col.two-rows{flex-direction:column;align-items:center;gap:clamp(3px,.3vh,6px)}.cust-colors-row{justify-content:center;gap:clamp(3px,.4vw,8px);display:flex}.cust-swatch{cursor:pointer;border:2.5px solid #0000;border-radius:50%;width:clamp(24px,2vw,46px);height:clamp(24px,2vw,46px);transition:transform .12s,border-color .12s,box-shadow .12s}.cust-swatch:hover{transform:scale(1.15)}.cust-swatch.selected{border-color:#fff;box-shadow:0 0 10px #ffffff4d}.cust-controls-row{justify-content:center;align-items:center;gap:clamp(6px,.6vw,12px);margin-top:clamp(6px,.5vh,10px);display:flex}.lobby-my-controls{justify-content:center;margin:10px 0 6px;display:flex}.cust-input-mode{gap:clamp(4px,.4vw,8px);display:flex}.cust-mode-btn{cursor:pointer;background:#28263cb3;border:1.5px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;width:clamp(38px,3vw,52px);height:clamp(30px,2.4vw,40px);padding:0;transition:all .15s;display:flex}.cust-mode-btn:hover{background:#3c385ae6;border-color:#ffffff40}.cust-mode-btn.active{background:rgba(var(--primary-rgb,230, 126, 34), .25);border-color:var(--primary,#e67e22);box-shadow:0 0 8px rgba(var(--primary-rgb,230, 126, 34), .3)}.cust-mode-icon{font-size:clamp(14px,1.2vw,20px);line-height:1}.cust-controls-block{flex-direction:column;align-items:center;gap:4px;margin-top:clamp(10px,1.2vh,20px);display:flex}.cust-edit-link{color:#fff6;cursor:pointer;letter-spacing:.3px;font-size:clamp(10px,.85vw,13px);text-decoration:none;transition:color .15s}.cust-edit-link:hover{color:#ffffffbf;text-decoration:underline}.cpop-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;animation:.15s cpop-fade-in;display:flex;position:fixed;inset:0}@keyframes cpop-fade-in{0%{opacity:0}to{opacity:1}}.cpop-panel{background:linear-gradient(#1e1c32fa 0%,#121020fc 100%);border:1.5px solid #ffffff1f;border-radius:12px;min-width:260px;max-width:90vw;padding:clamp(16px,2vw,28px);box-shadow:0 12px 40px #0009}.cpop-title{font-family:var(--font-ui);color:#ffffffd9;text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:clamp(10px,1vh,18px);font-size:clamp(13px,1.1vw,18px);font-weight:700}.cpop-keys{flex-wrap:wrap;margin-top:0}.cpop-row{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;gap:12px;padding:clamp(5px,.5vh,10px) 0;display:flex}.cpop-row:last-of-type{border-bottom:none}.cpop-action{font-family:var(--font-ui);color:#fff9;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(11px,.9vw,14px);font-weight:600}.cpop-gp-key{font-family:var(--font-ui);color:#fffc;background:#3c385099;border-radius:4px;padding:3px 8px;font-size:clamp(11px,.9vw,14px);font-weight:500}.cpop-select{font-family:var(--font-ui);color:#fff;cursor:pointer;background:#28263ccc;border:1px solid #ffffff26;border-radius:5px;padding:4px 8px;font-size:clamp(11px,.9vw,14px)}.cpop-close{font-family:var(--font-ui);color:#ffffffb3;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:6px;margin:clamp(12px,1.2vh,20px) auto 0;padding:6px 24px;font-size:clamp(12px,1vw,15px);font-weight:600;transition:all .15s;display:block}.cpop-close:hover{color:#fff;background:#ffffff26}.kb-strip{justify-content:center;align-items:flex-start;gap:clamp(6px,.6vw,12px);margin-top:clamp(8px,.8vh,14px);display:flex}.kb-group{flex-direction:column;flex:none;align-items:center;gap:3px;display:flex}.kb-action{font-family:var(--font-ui);color:#ffffff73;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;font-size:clamp(9px,.7vw,12px);font-weight:600;line-height:1}.kb-key{aspect-ratio:1;cursor:pointer;width:clamp(42px,3.4vw,60px);font-family:var(--font-ui);background:linear-gradient(#3c3850e6 0%,#1e1c2df2 100%);border:1.5px solid #ffffff1f;border-bottom:3px solid #00000080;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:all .12s;display:flex;position:relative;box-shadow:0 2px #00000073,0 4px 8px #0000004d,inset 0 1px #ffffff14}.kb-key:hover{border-color:var(--primary);background:linear-gradient(#50486ef2 0%,#2d2841fa 100%);transform:translateY(-1px);box-shadow:0 3px #00000080,0 6px 14px #00000059,inset 0 1px #ffffff1f,0 0 12px #ff890626}.kb-key:active{border-bottom-width:1.5px;transform:translateY(2px);box-shadow:0 0 #00000080,0 1px 4px #0000004d,inset 0 2px 4px #0003}.kb-listening{animation:.8s infinite pulse;border-color:var(--secondary)!important;background:linear-gradient(#ff6b8a33 0%,#b4325040 100%)!important;box-shadow:0 2px #b4325080,0 4px 12px #ff6b8a40,inset 0 1px #ffffff14!important}.kb-listening .kb-cap{color:var(--secondary)}.kb-cap{color:#ffffffe0;letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;text-align:center;max-width:calc(100% - 6px);font-size:clamp(10px,.85vw,14px);font-weight:700;line-height:1;overflow:hidden}.map-random-info{font-family:var(--font-display);color:var(--text-muted);text-align:center;letter-spacing:2px;text-transform:uppercase;padding:clamp(8px,1vh,16px) 0;font-size:clamp(16px,1.3vw,24px)}.cust-blobs-zone.multi-blob{gap:clamp(24px,4vw,80px)}.cust-blobs-zone.multi-blob .cust-swatch{width:clamp(18px,1.5vw,34px);height:clamp(18px,1.5vw,34px)}.cust-blobs-zone.single-blob .cust-blob-col canvas{width:clamp(180px,min(18vw,36vh),520px);height:clamp(215px,min(21vw,42vh),610px)}.cust-blobs-zone.single-blob .cust-swatch{width:clamp(28px,2.5vw,56px);height:clamp(28px,2.5vw,56px)}.cust-bottom{border-top:2px solid var(--primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#08061080;flex-direction:column;flex-shrink:0;justify-content:center;align-self:center;align-items:center;gap:8px;width:clamp(520px,52vw,980px);padding:clamp(10px,1.2vh,18px) clamp(12px,1vw,24px) clamp(12px,1.4vh,20px);display:flex}.cust-speed-bar{align-items:center;gap:12px;padding:4px 0;display:flex}.cust-speed-label{font-family:var(--font-ui);color:#ffffff59;text-transform:uppercase;letter-spacing:2px;font-size:clamp(10px,.8vw,13px);font-weight:700}.cust-speed-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;width:clamp(100px,12vw,200px);height:4px}.cust-speed-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 0 8px #ff89064d}.cust-speed-slider::-moz-range-thumb{background:var(--primary);border:none;border-radius:50%;width:16px;height:16px}.cust-speed-value{font-family:var(--font-display);color:var(--primary);letter-spacing:1px;min-width:40px;font-size:clamp(14px,1.2vw,20px);font-weight:700}.map-strip{align-items:center;gap:clamp(6px,.6vw,14px);width:clamp(460px,48vw,900px);display:flex}.map-strip-arrow{clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);width:clamp(30px,2.5vw,46px);height:clamp(30px,2.5vw,46px);color:var(--primary);cursor:pointer;z-index:2;background:#ffffff0f;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;font-size:clamp(20px,2vw,38px);line-height:1;transition:all .15s;display:flex}.map-strip-arrow:hover{background:var(--primary);color:#1a1018;transform:scale(1.1)}.map-strip-viewport{flex:1;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 12% 88%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 12% 88%,#0000 100%)}.map-strip-track{will-change:transform;gap:clamp(6px,.6vw,12px);padding:clamp(4px,.4vh,8px) 0;transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex}.map-strip-item{border-radius:var(--radius);cursor:pointer;border:2.5px solid #ffffff1a;flex-shrink:0;width:clamp(70px,7vw,140px);height:clamp(50px,5vw,100px);transition:border-color .25s,transform .25s,box-shadow .25s,opacity .25s;position:relative;overflow:hidden}.map-strip-item img{object-fit:cover;width:100%;height:100%;display:block}.map-strip-item:hover{border-color:#ffffff4d}.map-strip-item.active{border-color:var(--primary);box-shadow:0 0 14px var(--primary-glow), inset 0 0 0 1px var(--primary);z-index:1;transform:scale(1.08)}.map-strip-label{font-family:var(--font-ui);color:#fff;text-align:center;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(#0000,#000000b3);padding:clamp(8px,.8vw,16px) 2px clamp(2px,.2vh,4px);font-size:clamp(8px,.65vw,13px);font-weight:600;position:absolute;bottom:0;left:0;right:0}.map-strip-random{background:var(--bg-deep);flex-direction:column;justify-content:center;align-items:center;display:flex}.map-strip-dice{font-size:clamp(18px,1.8vw,36px);line-height:1}.cust-header-actions{flex-shrink:0;align-items:center;gap:clamp(8px,.8vw,16px);display:flex}.room-join-wrap{position:relative}.room-join-popup{border:1.5px solid var(--primary);border-radius:var(--radius-md);opacity:0;pointer-events:none;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080610f2;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:100%;right:0;transform:translateY(-4px);box-shadow:0 8px 24px #0006}.room-join-popup.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.room-join-popup .room-code-field{width:100px;padding:6px 10px;font-size:16px}.room-join-popup .room-join-go{min-width:auto;padding:6px 14px;font-size:13px}.waiting-text-inline{font-family:var(--font-ui);color:var(--text-muted);font-size:clamp(11px,.9vw,15px);font-weight:600}.waiting-text-inline:after{content:"";animation:1.5s steps(3,end) infinite dots}.room-code-display{font-family:var(--font-display);letter-spacing:6px;color:var(--primary);font-size:clamp(20px,1.8vw,34px);font-weight:700}@media (width<=700px){.cust-header{padding:12px 16px}.cust-center{padding:0 12px}.cust-blob-col canvas{width:120px;height:140px}.cust-blobs-zone.single-blob .cust-blob-col canvas{width:160px;height:190px}.cust-swatch{width:20px;height:20px}.cust-nametag-input{min-width:90px;font-size:12px}.cust-play-btn{padding:8px 16px;font-size:13px}.map-strip-item{width:64px;height:44px}.cust-bottom-extra,.room-actions{flex-direction:column}}.color-picker-row{justify-content:center;align-items:center;gap:14px;display:flex}.blob-preview-sm{flex-shrink:0;width:110px;height:128px}.blob-preview-sm canvas{width:110px;height:128px}.compact-grid{grid-template-columns:repeat(5,1fr);justify-content:center;gap:4px}.color-swatch.mini{aspect-ratio:1;width:100%;height:auto}.options-screen{z-index:1;background:radial-gradient(at 30% 10%,#ff89060d 0%,#0000 50%),radial-gradient(at 70% 90%,#643cb40a 0%,#0000 50%),linear-gradient(#18181f 0%,#111116 50%,#0c0c10 100%);flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.opt-header{background:#00000040;border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:16px;padding:clamp(12px,1.5vh,20px) clamp(16px,2vw,32px);display:flex}.opt-back-btn{font-family:var(--font-ui);color:#ffffff80;cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:#ffffff0d;border:1px solid #ffffff14;border-radius:6px;padding:6px 14px;font-size:clamp(12px,.9vw,15px);font-weight:700;transition:all .15s}.opt-back-btn:hover{color:#fff;background:#ffffff1a;border-color:#fff3}.opt-title{font-family:var(--font-display);color:#fff;letter-spacing:3px;text-transform:uppercase;font-size:clamp(22px,2.2vw,36px);font-weight:700}.opt-layout{flex:1;min-height:0;display:flex;overflow:hidden}.opt-tabs{background:#0003;border-right:1px solid #ffffff0f;flex-direction:column;flex-shrink:0;width:clamp(140px,14vw,200px);padding:clamp(12px,1.5vh,20px) 0;display:flex}.opt-tab{font-family:var(--font-ui);color:#fff6;cursor:pointer;text-align:left;background:0 0;border:none;border-left:3px solid #0000;align-items:center;gap:10px;padding:clamp(10px,1.2vh,16px) clamp(14px,1.5vw,24px);font-size:clamp(12px,.95vw,16px);font-weight:600;transition:all .15s;display:flex;position:relative}.opt-tab:hover{color:#ffffffb3;background:#ffffff08}.opt-tab.active{color:var(--primary);border-left-color:var(--primary);background:#ff89060f}.opt-tab-icon{text-align:center;width:24px;font-size:clamp(16px,1.3vw,22px)}.opt-tab-label{text-transform:uppercase;letter-spacing:1px}.opt-content{flex:1;min-height:0;padding:clamp(20px,2.5vh,36px) clamp(24px,3vw,48px);overflow-y:auto}.opt-content::-webkit-scrollbar{width:4px}.opt-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.opt-section{margin-bottom:clamp(20px,2.5vh,32px)}.opt-section-title{font-family:var(--font-ui);color:#ffffff4d;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid #ffffff0d;margin-bottom:clamp(8px,1vh,14px);padding-bottom:6px;font-size:clamp(11px,.85vw,14px);font-weight:700}.opt-section-footer{border-top:1px solid #ffffff0d;margin-top:clamp(16px,2vh,28px);padding-top:clamp(12px,1.5vh,20px)}.opt-control-row{margin-top:4px}.opt-select{color:#fff;font-size:clamp(13px,1vw,16px);font-family:var(--font-ui);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:6px;outline:none;min-width:160px;padding:8px 14px;font-weight:600;transition:border-color .2s,background .2s}.opt-select:hover,.opt-select:focus{background:#ffffff1a;border-color:#ffffff4d}.opt-select option{color:#fff;background:#1a1a2e}.opt-text-input{box-sizing:border-box;width:100%;max-width:320px;color:var(--text);font-family:var(--font-ui);background:#ffffff0a;border:1.5px solid #ffffff14;border-radius:6px;padding:10px 16px;font-size:clamp(14px,1.1vw,18px);font-weight:600;transition:border-color .15s,box-shadow .15s,background .15s}.opt-text-input::placeholder{color:#ffffff40;font-weight:500}.opt-text-input:focus{border-color:var(--primary);background:#ff89060a;outline:none;box-shadow:0 0 20px #ff890614}.opt-keybind-grid{margin-top:4px}.opt-toggle-row{border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:center;padding:clamp(10px,1.2vh,16px) 0;display:flex}.opt-toggle-info{flex:1}.opt-toggle-label{font-family:var(--font-ui);color:#ffffffd9;font-size:clamp(13px,1vw,17px);font-weight:700}.opt-toggle-desc{font-family:var(--font-ui);color:#ffffff4d;margin-top:2px;font-size:clamp(11px,.8vw,13px);font-weight:500}.opt-switch{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.opt-switch input{opacity:0;width:0;height:0}.opt-switch-slider{cursor:pointer;background:#ffffff1a;border-radius:24px;transition:background .25s;position:absolute;inset:0}.opt-switch-slider:before{content:"";background:#fff9;border-radius:50%;width:18px;height:18px;transition:transform .25s,background .25s;position:absolute;bottom:3px;left:3px}.opt-switch input:checked+.opt-switch-slider{background:var(--primary)}.opt-switch input:checked+.opt-switch-slider:before{background:#fff;transform:translate(20px)}.opt-slider-row{align-items:center;gap:clamp(12px,1vw,20px);margin-top:8px;display:flex}.opt-slider-track{flex:1;max-width:320px}.opt-slider{appearance:none;cursor:pointer;background:#ffffff14;border-radius:3px;outline:none;width:100%;height:6px}.opt-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:box-shadow .15s;box-shadow:0 0 10px #ff890666}.opt-slider::-webkit-slider-thumb:hover{box-shadow:0 0 16px #ff890699}.opt-slider::-moz-range-thumb{background:var(--primary);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px}.opt-slider-value{font-family:var(--font-display);color:var(--primary);text-align:center;letter-spacing:1px;min-width:56px;font-size:clamp(18px,1.6vw,28px);font-weight:700}.opt-slider-labels{max-width:320px;font-family:var(--font-ui);color:#ffffff26;justify-content:space-between;margin-top:4px;font-size:10px;font-weight:600;display:flex}.gp-status{font-family:var(--font-ui);font-size:clamp(11px,.85vw,14px)}.gp-ok{color:#2ecc71;font-weight:600}.gp-none{color:var(--text-muted)}.opt-reset-btn{font-family:var(--font-ui);color:#fff6;cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;padding:8px 20px;font-size:clamp(11px,.85vw,14px);font-weight:600;transition:all .15s}.opt-reset-btn:hover{border-color:var(--secondary);color:var(--secondary);background:#ff6b8a14}.opt-mode-selector{flex-direction:column;gap:8px;display:flex}.opt-mode-card{cursor:pointer;background:#ffffff08;border:2px solid #ffffff0f;border-radius:8px;align-items:center;gap:14px;padding:14px 18px;transition:all .2s;display:flex}.opt-mode-card:hover{background:#ffffff0f;border-color:#ffffff1f}.opt-mode-card.active{border-color:var(--primary);background:#ff890614;box-shadow:0 0 20px #ff890614}.opt-mode-card input[type=radio]{display:none}.opt-mode-icon{text-align:center;flex-shrink:0;width:36px;font-size:24px}.opt-mode-info{flex:1}.opt-mode-label{font-family:var(--font-ui);color:#ffffffd9;font-size:clamp(14px,1.1vw,18px);font-weight:700}.opt-mode-card.active .opt-mode-label{color:var(--primary)}.opt-mode-desc{font-family:var(--font-ui);color:#ffffff4d;margin-top:2px;font-size:clamp(11px,.8vw,13px);font-weight:500}.opt-mouse-info{padding:8px 0}.opt-mouse-hint{font-family:var(--font-ui);color:#ffffff80;font-size:clamp(12px,.9vw,15px);font-weight:500;line-height:1.6}.opt-gamepad-info{padding:8px 0}.opt-gamepad-map{margin-top:12px}.opt-gp-row{border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.opt-gp-key{font-family:var(--font-ui);color:#ffffffb3;background:#ffffff0f;border-radius:4px;padding:4px 10px;font-size:clamp(12px,.9vw,15px);font-weight:700}.opt-gp-action{font-family:var(--font-ui);color:#fff6;text-transform:uppercase;letter-spacing:1px;font-size:clamp(12px,.9vw,14px);font-weight:500}@media (width<=600px){.opt-layout{flex-direction:column}.opt-tabs{border-bottom:1px solid #ffffff0f;border-right:none;flex-direction:row;width:100%;padding:0;overflow-x:auto}.opt-tab{border-bottom:3px solid #0000;border-left:none;flex:1;justify-content:center;padding:10px 8px}.opt-tab.active{border-left-color:#0000;border-bottom-color:var(--primary)}.opt-tab-label{font-size:11px}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.pause-menu{z-index:300;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pause-menu.hidden{display:none}.pause-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0812bf;position:absolute;inset:0}.pause-panel{z-index:1;background:linear-gradient(135deg,#1e1c28f2,#14121efa);border:1px solid #ffffff14;border-radius:8px;flex-direction:column;align-items:center;gap:clamp(12px,1.5vh,24px);padding:clamp(28px,3vh,48px) clamp(40px,4vw,80px);animation:.25s ease-out pauseIn;display:flex;position:relative;box-shadow:0 8px 40px #0009}@keyframes pauseIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.pause-title{font-family:var(--font-display);color:#fff;letter-spacing:6px;text-transform:uppercase;font-size:clamp(36px,4vw,64px);font-weight:700}.pause-buttons{flex-direction:column;gap:clamp(6px,.8vh,12px);width:100%;min-width:clamp(200px,20vw,320px);display:flex}.pause-btn{font-family:var(--font-ui);letter-spacing:1px;text-transform:uppercase;color:#ffffffd9;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:4px;padding:clamp(10px,1.2vh,18px) clamp(20px,2vw,36px);font-size:clamp(14px,1.2vw,20px);font-weight:600;transition:background .15s,color .15s,border-color .15s}.pause-btn:hover{color:#fff;background:#ffffff1f;border-color:#fff3}.pause-btn--quit{color:#e74c3cd9;border-color:#e74c3c33}.pause-btn--quit:hover{color:#e74c3c;background:#e74c3c1f;border-color:#e74c3c59}.pause-options-container{width:100%;max-height:60vh;overflow-y:auto}.pause-options-container.hidden{display:none}.pause-opt-section{flex-direction:column;gap:8px;padding:clamp(8px,1vh,16px) 0;display:flex}.pause-opt-row{align-items:center;gap:10px;display:flex}.pause-opt-label{font-family:var(--font-ui);color:#ffffff80;text-align:right;flex-shrink:0;width:clamp(60px,6vw,100px);font-size:clamp(12px,1vw,16px);font-weight:600}.pause-opt-keys{flex:1;gap:clamp(4px,.4vw,8px);display:flex}.pause-opt-back-btn{font-family:var(--font-ui);color:#fff9;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:4px;margin-top:8px;padding:8px 16px;font-size:clamp(12px,1vw,16px);font-weight:600;transition:background .15s}.pause-opt-back-btn:hover{background:#ffffff0f}.pause-swatch-row{flex-wrap:wrap;flex:1;align-items:center;gap:4px;display:flex}.pause-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;width:clamp(22px,1.8vw,32px);transition:all .15s;box-shadow:0 1px 4px #0000004d}.pause-swatch:hover{border-color:#ffffff80;transform:scale(1.2)}.pause-swatch.selected{box-shadow:0 0 0 2px var(--primary), 0 2px 8px #ff890666;border-color:#fff;transform:scale(1.15)}.win-actions{z-index:200;gap:clamp(10px,1vw,20px);animation:.5s ease-out both winActionsIn;display:flex;position:fixed;bottom:clamp(28px,4vh,56px);left:50%;transform:translate(-50%)}.win-actions.hidden{display:none}@keyframes winActionsIn{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.win-replay-btn{letter-spacing:2px;padding:clamp(10px,1vh,16px) clamp(28px,2.5vw,48px)!important;font-size:clamp(14px,1.2vw,20px)!important}.win-menu-btn{letter-spacing:1px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffb3!important;background:#08061099!important;border-color:#fff3!important;padding:clamp(8px,.8vh,14px) clamp(20px,1.8vw,36px)!important;font-size:clamp(12px,1vw,16px)!important}.rematch-status{z-index:201;font-family:var(--font-ui);color:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);text-align:center;background:#080610b3;border:1px solid #ffffff1a;padding:clamp(8px,.7vh,14px) clamp(16px,1.4vw,28px);font-size:clamp(13px,1vw,17px);font-weight:600;position:fixed;bottom:clamp(95px,12vh,145px);left:50%;transform:translate(-50%)}.rematch-status.hidden{display:none}.rematch-timer{color:var(--primary);font-weight:700}.rematch-accept-btns{justify-content:center;gap:10px;margin-top:8px;display:flex}.rematch-accept-btns button{font-family:var(--font-display);letter-spacing:1px;text-transform:uppercase;cursor:pointer;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);border:none;padding:8px 20px;font-size:14px;font-weight:600;transition:transform .15s}.rematch-accept-btns button:hover{transform:scale(1.04)}.rematch-accept-btn{background:var(--primary);color:#1a1018}.rematch-decline-btn{color:#fff9;background:#ffffff14}.nick-input{border-radius:var(--radius);color:var(--text);font-family:var(--font-ui);text-align:center;background:#ffffff0f;border:1.5px solid #ffffff14;width:220px;padding:10px 14px;font-size:14px;font-weight:600;transition:border-color .15s,box-shadow .15s}.nick-input::placeholder{color:var(--text-muted);font-weight:600}.nick-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 16px #ff89061a}.color-players{flex-wrap:wrap;justify-content:center;gap:48px;margin-bottom:28px;display:flex}.color-section{text-align:center;flex:1;min-width:200px}.color-section h3{font-family:var(--font-ui);color:var(--text-body);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;font-size:12px;font-weight:700}.input-hint{color:var(--text-muted);letter-spacing:.3px;border-radius:var(--radius);background:#ffffff08;margin-bottom:8px;padding:3px 10px;font-size:10px;font-weight:600;display:inline-block}.blob-preview-container{background:radial-gradient(circle,#ffffff05 0%,#0000 70%);border-radius:50%;width:120px;height:120px;margin:0 auto 12px}.color-grid{grid-template-columns:repeat(5,40px);justify-content:center;gap:8px;display:grid}.color-swatch{cursor:pointer;border:2.5px solid #ffffff0d;border-radius:50%;width:40px;height:40px;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,box-shadow .15s}.color-swatch:hover{border-color:#ffffff40;transform:scale(1.18)}.color-swatch.selected{border-color:#fff;transform:scale(1.12);box-shadow:0 0 16px #ffffff26}.color-actions{justify-content:center;align-items:center;gap:14px;margin-top:16px;display:flex}#status-bar{pointer-events:none;color:var(--primary);border-radius:var(--radius);z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;font-weight:700;font-family:var(--font-ui);background:#0a0a14eb;border:1px solid #ffffff0a;padding:8px 24px;display:none;position:absolute;top:16px;left:50%;transform:translate(-50%)}.room-actions-card{text-align:center}.room-join-row{justify-content:center;align-items:center;gap:8px;display:flex}#room-code-input{border-radius:var(--radius);background:var(--surface);color:var(--text);text-align:center;width:150px;font-size:22px;font-family:var(--font-display);letter-spacing:5px;text-transform:uppercase;border:1.5px solid #ffffff0f;padding:12px 16px;font-weight:700;transition:border-color .15s,box-shadow .15s}#room-code-input::placeholder{color:var(--text-muted);letter-spacing:1px;font-size:13px}#room-code-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 16px #ff89061a}#room-status{text-align:center;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-width:260px;padding:20px 32px}#room-status .room-hint{color:var(--text-muted);margin-top:6px;font-size:11px;font-weight:600}@keyframes dots{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}#room-status .waiting-text{color:var(--text-body);font-size:14px;font-weight:600}#room-status .waiting-text:after{content:"";animation:1.5s steps(3,end) infinite dots}.queue-status-box{text-align:center;color:var(--text-body);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--stroke);max-width:var(--max-w);width:100%;margin-top:24px;padding:20px 32px;font-size:15px;font-weight:600}.lobby-2v2-setup{width:100%;max-width:var(--max-w);flex-direction:column;align-items:center;gap:0;margin-bottom:20px;display:flex}.room-code-field{border-radius:var(--radius);color:var(--text);font-family:var(--font-display);text-align:center;letter-spacing:4px;text-transform:uppercase;background:#ffffff0f;border:1.5px solid #ffffff14;width:110px;padding:8px 12px;font-size:20px;font-weight:600}.room-code-field::placeholder{color:var(--text-muted);letter-spacing:1px;font-size:13px}.room-code-field:focus{border-color:var(--primary);outline:none;box-shadow:0 0 16px #ff89061a}.room-choice-grid{flex-direction:column;align-items:center;gap:14px;max-width:440px;margin:0 auto;padding:60px 0 20px;display:flex}.room-choice-card{max-width:420px}.room-join-default{align-items:center;gap:12px;width:100%;display:flex}.room-join-default.hidden{display:none}.room-join-input{justify-content:center;align-items:center;width:100%;animation:.2s fadeIn;display:flex}.room-join-input.hidden{display:none}.room-join-field-wrap{align-items:center;width:100%;max-width:260px;display:flex;position:relative}.room-code-field-inline{letter-spacing:6px;width:100%;padding:10px 48px 10px 16px;font-size:clamp(20px,2vw,28px)}.room-join-go-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;transition:background .15s,transform .12s;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.room-join-go-btn:hover{background:#e08a00;transform:translateY(-50%)scale(1.08)}.mode-select-title-inline{flex-direction:column;gap:2px;margin-left:16px;display:flex}.mode-select-title-inline .cust-mode-label{text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);font-size:10px}.mode-select-title-inline .cust-mode-name{font-family:var(--font-display);color:var(--text);font-size:18px;font-weight:700}.mode-select-back{align-items:center;display:flex}.lobby-2v2-room{text-align:center;width:100%;max-width:520px}.room-code-banner{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--stroke);flex-direction:column;align-items:center;gap:2px;margin-bottom:20px;padding:12px 24px;display:flex}.room-code-label{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;font-size:9px;font-weight:700}.room-code-value{font-family:var(--font-display);letter-spacing:8px;color:var(--primary);font-size:36px;font-weight:700;line-height:1.2}.lobby-teams-grid{justify-content:center;align-items:stretch;gap:12px;margin-bottom:16px;display:flex}.lobby-vs{color:#ffffff1f;letter-spacing:2px;font-size:18px;font-weight:900;font-family:var(--font-display);align-items:center;padding:0 2px;display:flex}.lobby-team-card{background:var(--surface);border-radius:var(--radius-md);border:1.5px solid var(--stroke);flex:1;min-width:180px;max-width:220px;padding:14px 18px;transition:border-color .15s,box-shadow .15s}.lobby-team-card.my-team{border-color:var(--primary);box-shadow:0 0 16px #ff89061a}.team-header{border-bottom:1px solid var(--stroke);justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;display:flex}.team-header h3{text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:700;font-family:var(--font-display);margin:0}.team-red .team-header h3{color:var(--secondary)}.team-blue .team-header h3{color:var(--info)}.team-player-count{color:var(--text-muted);border-radius:var(--radius);font-size:11px;font-weight:700;font-family:var(--font-ui);background:#ffffff0a;padding:2px 7px}.lobby-player{border-radius:var(--radius);background:#ffffff08;margin:5px 0;padding:8px 12px;transition:background .15s}.lobby-player.is-me{background:#ff89060f;border:1px solid #ff890626}.lobby-player.empty{background:#ffffff04;border:1px dashed #ffffff0d}.lobby-player-name{color:var(--text-body);font-size:13px;font-weight:600;font-family:var(--font-ui);justify-content:center;align-items:center;gap:5px;display:flex}.lobby-player.is-me .lobby-player-name{color:var(--primary);font-weight:700}.empty-slot-text{color:var(--text-muted);font-size:12px;font-style:italic}.host-badge{letter-spacing:1px;background:linear-gradient(135deg, #ffb347, var(--primary));color:#1a1018;clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 100%,0 100%);font-size:8px;font-weight:700;font-family:var(--font-display);text-transform:uppercase;padding:1px 5px}.you-tag{color:var(--primary);opacity:.6;font-size:9px;font-weight:700;font-family:var(--font-ui)}.btn-join-team{border-radius:var(--radius);width:100%;color:var(--primary);cursor:pointer;font-size:11px;font-weight:700;font-family:var(--font-ui);background:0 0;border:1px dashed #ff89064d;margin-top:8px;padding:6px;transition:all .15s}.btn-join-team:hover{border-color:var(--primary);background:#ff890614}.lobby-bottom{flex-direction:column;align-items:center;gap:10px;display:flex}.lobby-status-text{color:var(--text-muted);font-size:13px;font-weight:600;font-family:var(--font-ui)}.lobby-status-text .player-counter{color:var(--primary);font-weight:700}.lobby-status-text.warn{color:var(--secondary)}.lobby-status-text.ready{color:var(--accent)}.btn-launch{min-width:180px}.btn-launch.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.team-toast{color:#e74c3c;opacity:0;text-align:center;min-height:18px;margin-top:8px;font-size:12px;transition:opacity .15s}.team-toast.show{opacity:1}.lobby-screen{position:relative}.lobby-connecting{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:1px;justify-content:center;align-items:center;gap:8px;padding:60px 20px;font-size:16px;font-weight:600;display:flex}.lobby-code{font-family:var(--font-display);letter-spacing:6px;color:var(--primary);border-radius:var(--radius);background:#ff890614;border:1px solid #ff890633;padding:4px 16px;font-size:clamp(18px,1.6vw,28px);font-weight:700}.lobby-empty-blob{flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:clamp(165px,min(16.5vw,33vh),470px);display:flex}.lobby-empty-waiting-text{color:var(--text-muted);letter-spacing:.02em;opacity:.8;font-size:13px;font-weight:500}.lobby-waiting-dots{align-items:center;gap:4px;margin-left:4px;display:inline-flex}.lobby-waiting-dots span{background:var(--text-muted);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite lobbyDotBounce;display:inline-block}.lobby-waiting-dots span:nth-child(2){animation-delay:.15s}.lobby-waiting-dots span:nth-child(3){animation-delay:.3s}.lobby-waiting-dots.big span{background:var(--primary);opacity:.5;width:14px;height:14px}@keyframes lobbyDotBounce{0%,80%,to{opacity:.4;transform:translateY(0)}40%{opacity:1;transform:translateY(-10px)}}.lobby-actions{flex-direction:column;flex-shrink:0;align-items:center;gap:10px;padding:clamp(10px,1.2vh,18px) clamp(12px,1vw,24px);display:flex}.lobby-ready-btn{min-width:180px;padding:clamp(10px,1vh,16px) clamp(28px,3vw,56px);font-size:clamp(14px,1.2vw,20px)}.lobby-ready-btn.ready{color:#1a1018;background:var(--accent)!important;border-color:var(--accent)!important}.lobby-ready-btn:disabled{opacity:.6;cursor:not-allowed}.ready-text{color:var(--accent);font-weight:700}.lobby-map-readonly{justify-content:center;align-items:center;gap:10px;display:flex}.lobby-map-thumb{border-radius:var(--radius);border:1px solid var(--stroke);width:clamp(50px,5vw,80px);height:auto}.lobby-map-label{font-family:var(--font-ui);color:var(--text-body);letter-spacing:1px;font-size:clamp(13px,1.1vw,18px);font-weight:600}.lobby-map-strip{justify-content:center;align-items:center;gap:12px;display:flex}.lobby-map-current{align-items:center;gap:10px;display:flex}.lobby-2v2-grid{justify-content:center;align-items:stretch;gap:clamp(16px,2vw,40px);width:100%;display:flex}.lobby-team-side{flex-direction:column;flex:1;gap:8px;max-width:280px;display:flex}.lobby-team-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);text-align:center;font-size:14px;font-weight:700}.lobby-team-slots{flex-direction:column;gap:12px;display:flex}.lobby-vs-divider{font-family:var(--font-display);color:#ffffff1a;letter-spacing:2px;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:24px;font-weight:900;display:flex}.lobby-vs-text{display:block}.lobby-team-switch-btn{border-radius:var(--radius);color:var(--primary);cursor:pointer;background:0 0;border:1.5px solid #ff89064d;padding:8px 16px;font-size:22px;transition:all .15s}.lobby-team-switch-btn:hover{border-color:var(--primary);background:#ff89061f;transform:scale(1.1)}.lobby-2v2-slot{border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--stroke);flex-direction:column;align-items:center;gap:6px;padding:12px;transition:border-color .15s;display:flex}.lobby-2v2-slot.is-me{border-color:var(--primary);box-shadow:0 0 12px #ff890614}.lobby-2v2-slot.empty{background:#ffffff05;border-style:dashed;justify-content:center;min-height:100px}.lobby-2v2-name{font-family:var(--font-ui);color:var(--text-body);font-size:13px;font-weight:600}.lobby-2v2-name-input{font-family:var(--font-ui);color:var(--text-body);border:1px solid var(--stroke);border-radius:var(--radius);text-align:center;background:#ffffff0d;outline:none;width:100%;padding:4px 8px;font-size:13px;font-weight:600;transition:border-color .15s}.lobby-2v2-name-input:focus{border-color:var(--primary)}.lobby-2v2-empty-label{color:var(--text-muted);font-size:11px;font-style:italic}.lobby-2v2-player-info{align-items:center;gap:6px;width:100%;display:flex}.lobby-ready-led{background:#ffffff26;border:1px solid #ffffff1a;border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:background .2s,box-shadow .2s}.lobby-ready-led.ready{background:#4ade80;border-color:#22c55e;box-shadow:0 0 6px #4ade8080}.lobby-team-colors{flex-direction:column;justify-content:center;gap:3px;margin-top:8px;display:flex}.lobby-team-colors .cust-colors-row{justify-content:center;gap:3px;display:flex}.lobby-team-colors .cust-swatch{width:18px;height:18px}.cust-swatch.readonly{cursor:default;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.2s ease-out fadeIn}@media (width<=640px){:root{--max-w:100%}#color-select,#room-lobby{padding:32px 16px}.splash-title .title{letter-spacing:1px;font-size:36px}.splash-title .subtitle{letter-spacing:4px;font-size:10px}.splash-title{margin-bottom:36px}.mode-buttons>button{padding:12px 24px;font-size:14px}.color-players{gap:24px}.color-section{min-width:160px}.blob-preview-container{width:100px;height:100px}.color-grid{grid-template-columns:repeat(5,36px);gap:6px}.color-swatch{width:36px;height:36px}.lobby-teams-grid{flex-direction:column;align-items:center}.lobby-team-card{width:100%;min-width:0;max-width:100%}.lobby-vs{padding:4px 0;font-size:14px}.room-code-value{letter-spacing:6px;font-size:28px}.screen-header h2{font-size:20px}}@media (width<=400px){.color-players{flex-direction:column;gap:20px}.room-join-row{flex-direction:column}#room-code-input{width:100%}}.status-error{color:#e74c3c;font-weight:600}.status-error-sm{color:#e74c3c;font-size:13px;font-weight:600}.status-success{color:#2ecc71}.status-muted{color:#667}.status-info{color:#aab}.status-highlight{color:gold;font-weight:700}.status-center{text-align:center;padding:8px}.status-center-lg{text-align:center;padding:20px}