:root{--bg: #080a0c;--panel: rgba(17, 21, 24, .96);--panel-strong: #111518;--panel-border: #30383e;--text: #f2f5f7;--muted: #92a0a8;--accent: #33b5e5;--accent-2: #f4c542;--success: #3ddc84;--danger: #ff5c6c;font-family:Inter,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}.app{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.game-viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.game-viewport canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.overlay--center{display:flex;align-items:center;justify-content:center}.overlay--dim{background:#030308b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay>*{pointer-events:auto}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:24px;z-index:5}.hud-left{position:absolute;top:24px;left:24px;display:flex;flex-direction:column;gap:12px}.hud-left--versus{top:10px;flex-direction:row;align-items:flex-start;gap:18px}.hud-left--versus .stat{min-width:0}.hud-left--versus .stat-value{font-size:18px}.stat{min-width:120px}.stat-label{font-size:11px;letter-spacing:0;color:var(--muted)}.stat-value{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.stat-value--big{font-size:34px}.hud-tools{position:absolute;top:24px;right:24px;display:flex;gap:8px}.hud-btn{pointer-events:auto;background:var(--panel);color:var(--muted);border:1px solid var(--panel-border);border-radius:8px;cursor:pointer;font-size:13px;width:38px;height:38px;padding:0;display:grid;place-items:center}.hud-btn:hover{color:var(--text);border-color:var(--accent)}.hud-btn[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.training-pill{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:20;display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1px solid var(--panel-border);border-radius:999px;background:#111518e6;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.2px;white-space:nowrap}.training-card{width:min(430px,calc(100vw - 32px))}.training-list{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px}.training-option{justify-content:flex-start;text-align:left;padding:12px 16px}.training-option-text{display:flex;flex-direction:column;gap:2px;min-width:0}.training-option-text strong{font-size:15px}.training-option-text small{color:var(--muted);font-size:12px;font-weight:500}.training-option--dificil:hover{border-color:var(--accent-2)}.training-option--insano:hover{border-color:var(--danger)}.training-note{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0 0 14px;color:var(--muted);font-size:12px}.auth-offline{margin-top:18px;padding-top:16px;border-top:1px solid var(--panel-border);display:flex;flex-direction:column;align-items:stretch;gap:8px}.auth-offline small{color:var(--muted);font-size:11px}.btn--ghost{background:transparent;color:var(--muted)}.btn--ghost:hover{color:var(--text)}.battle-result{margin:18px 0 4px;border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);padding:10px 0}.battle-result-head,.battle-result-row{display:grid;grid-template-columns:1fr 70px 46px 80px;align-items:center;gap:8px;padding:5px 6px;text-align:right}.battle-result-head{color:var(--muted);font-size:10px;letter-spacing:0}.battle-result-head span:first-child,.battle-result-name{text-align:left}.battle-result-head span{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}.battle-result-row{font-variant-numeric:tabular-nums;font-size:14px}.battle-result-row strong{font-size:16px}.battle-result-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.battle-result-row--win{background:#3ddc841a;box-shadow:inset 3px 0 var(--success);border-radius:4px}.menu-card,.settings-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:32px 40px;box-shadow:0 24px 60px #00000080;text-align:center;min-width:340px}.title{font-size:40px;font-weight:800;margin:0;letter-spacing:0}.title-accent{color:var(--accent)}.subtitle{color:var(--muted);margin:6px 0 24px;font-size:14px}.menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}.btn{background:#1a1a2c;color:var(--text);border:1px solid var(--panel-border);border-radius:6px;padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .08s ease,border-color .15s ease,background .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:9px}.btn:hover{border-color:var(--accent);transform:translateY(-1px)}.btn--primary{background:var(--accent);border-color:var(--accent);color:#041014}.btn--ranked{border-color:#a77c18;color:var(--accent-2)}.btn:disabled{cursor:not-allowed;opacity:.42;transform:none}.btn--ghost{background:transparent}.btn--sm{padding:6px 12px;font-size:13px}.menu-hint{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;color:var(--muted);font-size:12px;text-align:left}.settings-card{text-align:left;min-width:460px;max-height:88vh;overflow-y:auto}.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.settings-head h2{margin:0}.settings-section{margin-top:20px;border-top:1px solid var(--panel-border);padding-top:16px}.settings-section h3{margin:0 0 12px;font-size:15px;color:var(--muted);letter-spacing:0}.presets{display:flex;gap:8px;margin-bottom:14px}.slider-row{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:12px;margin-bottom:10px}.slider-label{font-size:13px;color:var(--muted)}.slider{width:100%;accent-color:var(--accent)}.slider-value{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}.toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.toggle-row .slider-label{flex:1}.toggle-row .btn{display:inline-flex;align-items:center;gap:6px}.keybinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.keybind{display:flex;justify-content:space-between;align-items:center;background:#14141f;border:1px solid var(--panel-border);border-radius:8px;padding:8px 12px;cursor:pointer;color:var(--text)}.keybind:hover{border-color:var(--accent)}.keybind--active{border-color:var(--accent-2);box-shadow:0 0 0 2px #a35bff4d}.keybind-action{font-size:13px;color:var(--muted)}.keybind-key{font-weight:700;font-size:13px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.result-grid>div{display:flex;flex-direction:column;background:#14141f;border:1px solid var(--panel-border);border-radius:8px;padding:10px 14px}.result-grid span{font-size:11px;color:var(--muted);letter-spacing:0}.result-grid strong{font-size:22px;font-variant-numeric:tabular-nums}.auth-card{min-width:380px;text-align:center}.auth-tabs{display:flex;gap:8px;margin-bottom:20px}.auth-tab{flex:1;background:#14141f;color:var(--muted);border:1px solid var(--panel-border);border-radius:6px;padding:10px 0;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s ease,color .15s ease}.auth-tab:hover{color:var(--text);border-color:var(--accent)}.auth-tab--active{color:#fff;border-color:var(--accent);background:#4f9dff24}.auth-fields{display:flex;flex-direction:column;gap:14px;text-align:left;margin-bottom:8px}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-field>span{font-size:12px;letter-spacing:0;color:var(--muted)}.auth-input{background:#14141f;color:var(--text);border:1px solid var(--panel-border);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit}.auth-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #4f9dff40}.auth-error{color:#ff6072;font-size:13px;margin:14px 0 4px;min-height:1em}.auth-link{background:none;border:none;color:var(--accent);font:inherit;font-weight:600;padding:0;cursor:pointer}.auth-link:hover{text-decoration:underline}.net-title{font-size:28px;margin-top:14px}.net-getready{margin-top:16px;margin-bottom:0}.net-spinner{width:42px;height:42px;margin:4px auto 0;border-radius:50%;border:4px solid var(--panel-border);border-top-color:var(--accent);animation:net-spin .9s linear infinite}@keyframes net-spin{to{transform:rotate(360deg)}}.net-reconnect-pill{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:30;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--accent-2);border-radius:999px;background:#111518f0;color:var(--accent-2);font-size:13px;font-weight:600}.net-retry-hint{margin:0 0 4px;color:var(--accent-2);font-size:13px}.net-error-text{max-width:42ch;margin-left:auto;margin-right:auto;color:var(--text);line-height:1.45}.net-error-detail{margin:-12px 0 18px;text-align:left;color:var(--muted);font-size:12px}.net-error-detail summary{cursor:pointer;text-align:center;list-style:none;text-decoration:underline dotted}.net-error-detail code{display:block;max-height:108px;margin-top:8px;padding:8px 10px;overflow:auto;border:1px solid var(--panel-border);border-radius:5px;background:#0d1114;font-size:11px;line-height:1.4;word-break:break-word}.spin-slow{animation:net-spin 1.8s linear infinite}.icon-btn{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid var(--panel-border);border-radius:6px;background:#151a1e;color:var(--text);cursor:pointer}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.icon-btn--inline{display:inline-grid;width:30px;height:30px;min-width:30px;margin-left:8px;vertical-align:middle}.menu-card--main{width:min(390px,calc(100vw - 32px))}.menu-footer{margin-top:18px;padding-top:14px;border-top:1px solid var(--panel-border);display:flex;align-items:center;justify-content:space-between}.menu-rank{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:13px}.menu-rank strong{color:var(--accent-2);font-size:18px;font-variant-numeric:tabular-nums}.net-search-icon{width:48px;height:48px;display:grid;place-items:center;margin:0 auto;border:1px solid var(--accent);border-radius:50%;color:var(--accent);animation:net-pulse 1.1s ease-in-out infinite alternate}@keyframes net-pulse{to{transform:scale(1.08);color:var(--accent-2);border-color:var(--accent-2)}}.queue-metrics{display:flex;justify-content:center;gap:10px;margin:16px 0 4px}.queue-metrics span{min-width:92px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--panel-border);border-radius:5px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}.net-getready{display:inline-flex;align-items:center;gap:7px}.rating-result{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;margin:18px 0 4px;padding:12px 14px;border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);text-align:left}.rating-result span{color:var(--muted);font-size:13px}.rating-result strong,.rating-result b{font-size:20px;font-variant-numeric:tabular-nums}.delta-up{color:var(--success)!important}.delta-down{color:var(--danger)!important}.ranking-surface{pointer-events:auto;overflow-y:auto;background:#0b0e10}.ranking-header{position:sticky;top:0;z-index:2;width:100%;min-height:78px;padding:16px clamp(18px,4vw,56px);display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:18px;background:#0b0e10f5;border-bottom:1px solid var(--panel-border)}.ranking-header h1,.section-heading h2,.rank-summary h2{margin:0;letter-spacing:0}.ranking-header h1{font-size:22px}.eyebrow{margin:0 0 3px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:0}.ranking-error{margin:16px auto 0;width:min(1180px,calc(100% - 36px));padding:10px 14px;border:1px solid #7d3039;border-radius:5px;color:#ffadb6;background:#251216}.ranking-content{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:26px 0 44px}.rank-summary{min-height:132px;display:grid;grid-template-columns:76px minmax(180px,1fr) repeat(4,minmax(90px,.45fr));align-items:center;gap:18px;padding:22px 0;border-bottom:1px solid var(--panel-border)}.rank-emblem{width:64px;height:64px;display:grid;place-items:center;border:2px solid currentColor;color:#a0abb0;transform:rotate(45deg)}.rank-emblem svg{transform:rotate(-45deg)}.rank-emblem[data-band=bronze]{color:#c47b3b}.rank-emblem[data-band=silver]{color:#b8c3c9}.rank-emblem[data-band=gold]{color:#f4c542}.rank-emblem[data-band=platinum]{color:#45d6c3}.rank-emblem[data-band=diamond]{color:#60a5fa}.rank-emblem[data-band=master]{color:#e86acb}.rank-emblem[data-band=grandmaster]{color:#ff6b5d}.rank-emblem[data-band=god-of-tetris]{color:#fff176}.rank-summary-main h2{font-size:27px}.rank-progress{width:min(220px,100%);height:5px;margin-top:11px;overflow:hidden;background:#2a3034}.rank-progress span{display:block;height:100%;background:var(--accent)}.rank-metric{min-height:58px;padding-left:16px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--panel-border)}.rank-metric span{color:var(--muted);font-size:10px}.rank-metric strong{margin-top:5px;font-size:22px;font-variant-numeric:tabular-nums}.ranking-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);gap:36px;padding-top:30px}.leaderboard-panel,.history-panel{min-width:0}.section-heading{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.section-heading h2{font-size:19px}.segmented{display:flex;border:1px solid var(--panel-border);border-radius:5px;overflow:hidden}.segmented button{min-height:34px;padding:0 12px;border:0;border-right:1px solid var(--panel-border);background:#14191c;color:var(--muted);cursor:pointer}.segmented button:last-child{border-right:0}.segmented button.active{background:var(--accent);color:#041014}.segmented button:disabled{opacity:.4;cursor:not-allowed}.leaderboard-table{border-top:1px solid var(--panel-border)}.leaderboard-row{min-height:48px;display:grid;grid-template-columns:54px minmax(130px,1fr) minmax(110px,.7fr) 74px;align-items:center;gap:12px;padding:0 10px;border-bottom:1px solid #22292d;font-size:13px}.leaderboard-row--head{min-height:36px;color:var(--muted);font-size:10px}.leaderboard-row--me{background:#33b5e517;box-shadow:inset 3px 0 var(--accent)}.player-cell{min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-cell svg{color:var(--accent-2);flex:0 0 auto}.history-list{border-top:1px solid var(--panel-border)}.history-row{min-height:58px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;border-bottom:1px solid #22292d}.history-row>div{min-width:0;display:flex;flex-direction:column}.history-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.history-row small{color:var(--muted);margin-top:3px}.result-mark{width:24px;height:24px;display:grid;place-items:center;border:1px solid currentColor;border-radius:4px;font-size:11px;font-weight:800}.result-mark--win{color:var(--success)}.result-mark--loss{color:var(--danger)}.empty-state{margin:0;padding:24px 10px;color:var(--muted);font-size:13px}.spin{animation:net-spin .9s linear infinite}@media (max-width: 860px){.ranking-content{width:min(100% - 28px,680px)}.rank-summary{grid-template-columns:64px 1fr repeat(2,minmax(70px,.5fr))}.rank-metric:nth-last-child(-n+2){display:none}.ranking-grid{grid-template-columns:1fr;gap:30px}}@media (max-width: 560px){.menu-card,.settings-card,.auth-card{min-width:0;width:calc(100vw - 24px);padding:24px 20px}.title{font-size:32px}.ranking-header{padding:12px 14px;grid-template-columns:38px 1fr 38px;gap:10px}.ranking-header h1{font-size:18px}.rank-summary{grid-template-columns:52px 1fr;gap:14px}.rank-emblem{width:46px;height:46px}.rank-summary-main h2{font-size:21px}.rank-metric{display:none}.section-heading{align-items:flex-end}.segmented button{padding:0 8px;font-size:12px}.leaderboard-row{grid-template-columns:40px minmax(100px,1fr) 68px}.leaderboard-row>span:nth-child(3),.leaderboard-row>strong:nth-child(3){display:none}}.wardrobe-surface{pointer-events:auto;overflow-y:auto;background:#0b0e10}.wardrobe-header{position:sticky;top:0;z-index:3;width:100%;min-height:78px;padding:16px clamp(18px,4vw,56px);display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:18px;background:#0b0e10f5;border-bottom:1px solid var(--panel-border)}.wardrobe-header h1{margin:0;font-size:22px;letter-spacing:0}.wardrobe-header>svg{justify-self:center;color:var(--accent)}.wardrobe-content{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:24px 0 48px}.wardrobe-error{min-height:46px;margin-bottom:16px;padding:4px 5px 4px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #7d3039;border-radius:5px;color:#ffadb6;background:#251216;font-size:13px}.progress-band{min-height:72px;display:grid;grid-template-columns:auto minmax(150px,1fr) repeat(3,auto);align-items:center;gap:clamp(16px,3vw,38px);border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border)}.progress-band>div:not(.xp-track){display:flex;flex-direction:column;gap:4px}.progress-band span{color:var(--muted);font-size:10px}.progress-band strong{font-size:19px;font-variant-numeric:tabular-nums}.xp-track{height:6px;overflow:hidden;background:#2a3034}.xp-track span{display:block;height:100%;background:var(--accent)}.progress-band .soft-balance{min-height:34px;padding:0 10px;flex-direction:row!important;align-items:center;border:1px solid #806a29;color:var(--accent-2)}.wardrobe-toolbar{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px}.wardrobe-toolbar .segmented button{display:inline-flex;align-items:center;justify-content:center;gap:6px}.cosmetic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cosmetic-grid[aria-busy=true]{opacity:.68}.cosmetic-tile{min-width:0;overflow:hidden;border:1px solid #2a3237;border-radius:6px;background:#12171a}.cosmetic-tile--selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.cosmetic-preview{position:relative;width:100%;height:150px;padding:0;display:grid;place-items:center;overflow:hidden;border:0;border-bottom:1px solid #2a3237;background:#090c0e;cursor:pointer}.cosmetic-preview:disabled{cursor:default}.cosmetic-preview:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.skin-preview{width:min(230px,84%);display:grid;grid-template-columns:repeat(7,minmax(18px,1fr));gap:4px}.skin-preview span{aspect-ratio:1;border:2px solid rgba(0,0,0,.42);box-shadow:inset 0 5px #ffffff4d}.background-preview{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background-color:var(--preview-base);background-image:linear-gradient(var(--preview-grid) 1px,transparent 1px),linear-gradient(90deg,var(--preview-grid) 1px,transparent 1px);background-size:24px 24px}.background-preview span{width:46%;height:62%;border:2px solid var(--preview-accent);background:color-mix(in srgb,var(--preview-base) 82%,black)}.cosmetic-lock{position:absolute;color:#d8e0e4;filter:drop-shadow(0 2px 4px #000)}.cosmetic-preview:disabled>:not(.cosmetic-lock){opacity:.28}.cosmetic-meta{min-height:70px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.cosmetic-meta h2{margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;letter-spacing:0}.rarity{font-size:9px;font-weight:700;text-transform:uppercase}.rarity--common{color:#aeb9bf}.rarity--rare{color:#4fc3f7}.rarity--epic{color:#e86acb}.rarity--seasonal{color:var(--accent-2)}.equipped-mark{display:inline-flex;align-items:center;gap:4px;color:var(--success);white-space:nowrap;font-size:10px}.unlock-rule{min-height:34px;margin:0;padding:0 14px 12px;color:var(--muted);font-size:11px}.cosmetic-tile>.btn{width:calc(100% - 28px);margin:0 14px 14px}@media (max-width: 780px){.cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-band{grid-template-columns:auto 1fr repeat(2,auto)}.progress-band>div:nth-child(4){display:none}}@media (max-width: 560px){.wardrobe-header{min-height:66px;padding:10px 14px;grid-template-columns:38px 1fr 28px;gap:10px}.wardrobe-header h1{font-size:18px}.wardrobe-content{width:calc(100% - 24px);padding-top:16px}.progress-band{grid-template-columns:auto 1fr auto;gap:14px}.progress-band>div:nth-child(3),.progress-band>div:nth-child(4){display:none}.wardrobe-toolbar{align-items:stretch;flex-direction:column;padding:14px 0}.wardrobe-toolbar .segmented{width:100%}.wardrobe-toolbar .segmented button{min-width:0;flex:1}.cosmetic-grid{grid-template-columns:1fr}}.social-surface{pointer-events:auto;overflow-y:auto;background:#0b0e10}.social-header{position:sticky;top:0;z-index:3;width:100%;min-height:78px;padding:16px clamp(18px,4vw,56px);display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:18px;background:#0b0e10f5;border-bottom:1px solid var(--panel-border)}.social-header h1{margin:0;font-size:22px;letter-spacing:0}.connection-dot{width:10px;height:10px;justify-self:center;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px #92a0a81f}.connection-dot--connected{background:var(--success)}.connection-dot--connecting,.connection-dot--reconnecting{background:var(--accent-2)}.connection-dot--error{background:var(--danger)}.social-content{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:24px 0 48px}.social-error{min-height:46px;margin-bottom:16px;padding:4px 5px 4px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #7d3039;border-radius:5px;color:#ffadb6;background:#251216;font-size:13px}.social-error .icon-btn{border:0;background:transparent}.invite-strip{margin-bottom:18px;border-top:1px solid #815f17}.invite-row{min-height:52px;padding:7px 8px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #4c401e;background:#f4c5420f;font-size:13px}.invite-row span{color:var(--muted)}.social-tabs{width:fit-content;margin-bottom:22px;display:flex;border:1px solid var(--panel-border);border-radius:5px;overflow:hidden}.social-tabs button{min-width:128px;min-height:38px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-right:1px solid var(--panel-border);background:#14191c;color:var(--muted);cursor:pointer}.social-tabs button:last-child{border-right:0}.social-tabs button.active{background:var(--accent);color:#041014}.social-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:34px}.social-panel{min-width:0}.social-panel>.section-heading{padding-bottom:8px;margin-bottom:0;border-bottom:1px solid var(--panel-border)}.social-panel>.section-heading>span{color:var(--muted);font-variant-numeric:tabular-nums}.social-row{min-height:58px;padding:7px 8px;display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:11px;border-bottom:1px solid #22292d}.social-row>div:not(.row-actions){min-width:0;display:flex;flex-direction:column}.social-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.social-row small{margin-top:3px;color:var(--muted);font-size:11px}.presence-dot{width:9px;height:9px;border-radius:50%;background:#566168}.presence-dot--online{background:var(--success)}.presence-dot--ingame{background:var(--accent-2)}.row-actions{display:flex;align-items:center;gap:6px}.social-row .icon-btn,.invite-row .icon-btn{width:32px;height:32px;flex-basis:32px}.inline-form{padding:12px 0;display:grid;grid-template-columns:1fr 38px;gap:8px}.inline-form .icon-btn{width:38px;height:38px}.search-results{max-height:300px;overflow-y:auto}.search-results .social-row{grid-template-columns:minmax(0,1fr) auto}.privacy-row{margin-top:22px;padding-top:16px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;border-top:1px solid var(--panel-border);font-size:12px;color:var(--muted)}select{min-height:38px;padding:0 28px 0 10px;border:1px solid var(--panel-border);border-radius:5px;background:#14191c;color:var(--text);font:inherit}.room-fields{padding:14px 0;display:flex;flex-direction:column;gap:12px}.room-fields label{min-width:0;display:flex;flex-direction:column;gap:6px}.room-fields label>span{color:var(--muted);font-size:11px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.room-fields .check-row{min-height:34px;flex-direction:row;align-items:center;gap:9px}.check-row input{accent-color:var(--accent)}.social-primary{width:100%}.room-code-form{grid-template-columns:1fr auto}.room-code{font-weight:800;font-variant-numeric:tabular-nums}.room-browser{border-top:1px solid #22292d}.room-browser-row{width:100%;min-height:58px;padding:7px 8px;display:grid;grid-template-columns:22px minmax(0,1fr) 20px;align-items:center;gap:10px;border:0;border-bottom:1px solid #22292d;background:transparent;color:var(--text);text-align:left;cursor:pointer}.room-browser-row:hover{background:#33b5e512}.room-browser-row>span{display:flex;min-width:0;flex-direction:column}.room-browser-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-browser-row small{margin-top:3px;color:var(--muted)}.lobby-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr);gap:38px}.lobby-codebar{min-height:64px;display:grid;grid-template-columns:auto 38px 1fr auto;align-items:center;gap:10px;border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border)}.lobby-codebar>div{display:flex;flex-direction:column}.lobby-codebar>div span{color:var(--muted);font-size:10px}.lobby-codebar>div strong{font-size:20px;font-variant-numeric:tabular-nums}.lifecycle{justify-self:start;padding:5px 8px;border:1px solid var(--panel-border);border-radius:4px;color:var(--muted);font-size:11px}.lifecycle--ingame{border-color:#856c22;color:var(--accent-2)}.lifecycle--countdown{border-color:#247497;color:var(--accent)}.member-list{margin-top:18px;border-top:1px solid #22292d}.member-row{min-height:62px;padding:7px 10px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;border-bottom:1px solid #22292d}.member-slot{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--panel-border);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.member-row>div{display:flex;flex-direction:column}.member-row small{margin-top:3px;color:var(--muted)}.ready{color:var(--muted);font-size:11px}.ready--on{color:var(--success)}.lobby-actions{min-height:70px;display:flex;align-items:center;justify-content:flex-end;gap:10px}.lobby-side{display:flex;flex-direction:column;gap:28px}.invite-friends{max-height:300px;overflow-y:auto}@media (max-width: 820px){.social-grid,.lobby-layout{grid-template-columns:1fr;gap:30px}.lobby-side{order:-1}}@media (max-width: 560px){.social-header{min-height:66px;padding:10px 14px;grid-template-columns:38px 1fr 28px;gap:10px}.social-header h1{font-size:18px}.social-content{width:calc(100% - 24px);padding-top:16px}.social-tabs{width:100%}.social-tabs button{min-width:0;flex:1}.field-pair{grid-template-columns:1fr}.privacy-row{grid-template-columns:1fr auto}.privacy-row .btn{grid-column:1 / -1}.lobby-codebar{grid-template-columns:auto 38px 1fr;padding:8px 0}.lobby-codebar>.btn{grid-column:1 / -1}.member-row{grid-template-columns:28px minmax(0,1fr)}.member-row .ready{grid-column:2}.lobby-actions{align-items:stretch;flex-direction:column}.lobby-actions .btn{width:100%}}