:root{--bg: #16171d;--bg-deep: #101116;--panel: #1e1f28;--panel-2: #262733;--border: #2f3040;--border-strong: #414254;--text: #e5e4e7;--hero: #f4f3ec;--text-dim: #9a9baa;--accent: #6c3bff;--accent-2: #9d7bff;--accent-soft: rgba(108, 59, 255, .16);--pink: #ff8fb8;--cream: #f4f3ec;--danger: #ff5f6f;--success: #3fd9a5;--warn: #ffbf5e;--blob-1: rgba(108, 59, 255, .13);--blob-2: rgba(255, 143, 184, .07);--shadow: 0 10px 34px rgba(0, 0, 0, .35);--board-bg: #101116;--board-grid: rgba(255, 255, 255, .05);--btn-shadow: #4a24c4;--btn-shadow-ghost: rgba(0, 0, 0, .35);--font-ui: "Baloo 2", "Space Grotesk", system-ui, sans-serif}:root[data-theme=light]{--bg: #f6f4ea;--bg-deep: #efece0;--panel: #ffffff;--panel-2: #f7f5ec;--border: #e5e1d2;--border-strong: #cfcaba;--text: #33323c;--hero: #33323c;--text-dim: #84839a;--accent: #6c3bff;--accent-2: #8b63ff;--accent-soft: rgba(108, 59, 255, .1);--pink: #ff7fb2;--blob-1: rgba(108, 59, 255, .1);--blob-2: rgba(255, 143, 184, .16);--shadow: 0 10px 30px rgba(120, 110, 160, .18);--board-bg: #fbf9f0;--board-grid: rgba(40, 40, 60, .07);--btn-shadow: #4a24c4;--btn-shadow-ghost: #b9b2a0}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html{background:var(--panel)}body{background:radial-gradient(900px 500px at 85% -10%,var(--blob-1),transparent 60%),radial-gradient(700px 460px at 5% 108%,var(--blob-2),transparent 60%),radial-gradient(500px 400px at 50% 120%,var(--blob-1),transparent 65%),var(--bg);transition:background .3s ease}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}.screen{display:none;flex:1;min-height:0;flex-direction:column;position:relative;z-index:1}.screen.active{display:flex}.hidden{display:none!important}.panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow)}h3{font-size:13px;color:var(--text-dim);margin-bottom:14px;font-weight:700}.avatar.mascot{width:84px;height:84px;display:block;filter:drop-shadow(0 10px 24px rgba(108,59,255,.45));animation:mascotBounce 2.4s ease-in-out infinite}@keyframes mascotBounce{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}.btn{font-family:var(--font-ui);font-weight:800;font-size:16px;border:none;cursor:pointer;padding:12px 26px;border-radius:14px;letter-spacing:.02em;transition:transform .06s ease,box-shadow .06s ease,filter .15s ease}.btn-primary{background:linear-gradient(145deg,var(--accent-2),var(--accent));color:#fff;box-shadow:0 5px 0 var(--btn-shadow)}.btn-primary:hover{filter:brightness(1.07)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 0 var(--btn-shadow)}.btn-primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--btn-shadow)}.btn-primary:disabled{filter:grayscale(.4) brightness(.85);cursor:wait}.btn-ghost{background:var(--panel-2);color:var(--text-dim);border:2px solid var(--border);box-shadow:0 4px 0 var(--btn-shadow-ghost)}.btn-ghost:hover{color:var(--text);border-color:var(--border-strong)}.btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-ghost)}.btn-big{font-size:21px;padding:15px 46px}.btn-icon{background:var(--panel);border:2px solid var(--border);color:var(--text);cursor:pointer;font-family:var(--font-ui);font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;box-shadow:0 3px 0 var(--btn-shadow-ghost);transition:transform .08s ease,border-color .15s}.btn-icon:hover{border-color:var(--border-strong)}.btn-icon:active{transform:translateY(2px);box-shadow:0 1px 0 var(--btn-shadow-ghost)}kbd{background:var(--panel-2);border:2px solid var(--border-strong);border-bottom-width:3px;padding:1px 8px;font-size:11px;font-family:var(--font-ui);border-radius:8px}.brand{display:flex;align-items:baseline;gap:12px;justify-content:center}.brand-tetris{font-size:64px;font-weight:800;letter-spacing:.01em;color:var(--hero);text-shadow:0 4px 0 var(--btn-shadow-ghost);line-height:1.1}.brand-arena{font-family:var(--font-ui);font-weight:800;font-size:56px;line-height:1;letter-spacing:.01em;background:linear-gradient(120deg,var(--accent-2) 20%,var(--pink) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-3deg);animation:arenaWiggle 3.2s ease-in-out infinite;display:inline-block}@keyframes arenaWiggle{0%,to{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-3px)}}.brand.small .brand-tetris{font-size:24px;text-shadow:0 2px 0 var(--btn-shadow-ghost)}.brand.small .brand-arena{font-size:22px}#screen-login{align-items:center;justify-content:center;gap:24px}.login-card{background:var(--panel);border:1px solid var(--border);border-radius:28px;padding:42px 52px 36px;width:min(500px,92vw);display:flex;flex-direction:column;gap:20px;align-items:center;box-shadow:var(--shadow)}.tagline{color:var(--text-dim);font-size:16px;text-align:center}.tagline em{font-family:var(--font-ui);font-style:normal;font-weight:800;color:var(--pink);font-size:18px}#login-form{display:flex;flex-direction:column;gap:12px;width:100%}#name-input{background:var(--bg-deep);border:2px solid var(--border-strong);color:var(--text);font-family:var(--font-ui);font-weight:600;font-size:18px;padding:13px 16px;outline:none;text-align:center;border-radius:16px;transition:border-color .15s,box-shadow .15s}#name-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.error-text{color:var(--danger);font-size:14px;text-align:center;font-weight:600}.controls-hint{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;color:var(--text-dim);font-size:12.5px}.controls-hint span{display:inline-flex;gap:4px;align-items:center}.footer-note{color:var(--text-dim);opacity:.6;font-size:12px;letter-spacing:.12em}.login-top{position:absolute;top:18px;right:18px;display:flex;gap:8px}#toast-container{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;align-items:center}.toast{background:var(--panel);border:2px solid var(--border-strong);color:var(--text);padding:10px 22px;font-size:14px;font-weight:600;border-radius:999px;box-shadow:var(--shadow);animation:toastIn .25s ease}@keyframes toastIn{0%{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.confetti i{position:absolute;display:block;opacity:.5;animation:drift 14s ease-in-out infinite alternate}.confetti .c1{width:22px;height:22px;background:var(--accent);border-radius:6px;top:12%;left:8%;transform:rotate(18deg);animation-duration:11s}.confetti .c2{width:14px;height:14px;background:var(--pink);border-radius:50%;top:68%;left:12%;animation-duration:16s;animation-delay:-4s}.confetti .c3{width:18px;height:18px;background:var(--warn);border-radius:4px;top:20%;right:10%;transform:rotate(-14deg);animation-duration:13s;animation-delay:-7s}.confetti .c4{width:12px;height:12px;background:var(--success);border-radius:50%;top:76%;right:16%;animation-duration:10s;animation-delay:-2s}.confetti .c5{width:16px;height:16px;background:var(--pink);border-radius:5px;top:44%;left:4%;transform:rotate(32deg);animation-duration:18s;animation-delay:-9s}.confetti .c6{width:20px;height:20px;background:var(--accent-2);border-radius:50%;top:8%;left:46%;animation-duration:15s;animation-delay:-5s}.confetti .c7{width:13px;height:13px;background:var(--warn);border-radius:50%;top:88%;left:55%;animation-duration:12s;animation-delay:-6s}.confetti .c8{width:15px;height:15px;background:var(--accent);border-radius:5px;top:52%;right:5%;transform:rotate(-25deg);animation-duration:17s;animation-delay:-3s}@keyframes drift{0%{translate:0 0;rotate:0deg}50%{translate:14px -22px;rotate:14deg}to{translate:-10px -44px;rotate:-10deg}}:root[data-theme=light] .confetti i{opacity:.35}.avatar{display:inline-block;width:40px;height:40px;flex:none;position:relative}.avatar .avatar-svg{width:100%;height:100%;display:block;overflow:visible}.avatar-svg .eyes{transform-box:fill-box;transform-origin:center;animation:gaze 8s ease-in-out infinite;animation-delay:var(--d, 0s)}.avatar-svg .blink{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite;animation-delay:var(--d, 0s)}.avatar[data-mood=shock] .eyes,.avatar[data-mood=sad] .eyes,.avatar[data-mood=focus] .eyes{animation:none}@keyframes gaze{0%,14%{transform:translate(0) rotate(0)}20%,34%{transform:translate(-9px,-1px) rotate(14deg)}40%,54%{transform:translate(0) rotate(0)}60%,76%{transform:translate(9px,-3px) rotate(-16deg)}82%,to{transform:translate(0) rotate(0)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.avatar.sm{width:34px;height:34px}.avatar.lg{width:76px;height:76px}.avatar.xl{width:104px;height:104px}.avatar.mystery{border-radius:34%;border:3px dashed var(--border-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:30px;animation:mysteryPulse 1.4s ease-in-out infinite}@keyframes mysteryPulse{50%{transform:scale(.92);opacity:.6}}.avatar.react{animation:avatarPop .45s ease}@keyframes avatarPop{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-6deg)}to{transform:scale(1)}}.section-label{font-size:13px;font-weight:700;color:var(--text-dim);margin-bottom:8px}.lobby-header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px}.header-actions{display:flex;gap:10px}.lobby-grid{flex:1;display:grid;grid-template-columns:260px minmax(0,1fr) 290px;gap:20px;padding:8px 28px 24px;min-height:0;max-width:1320px;width:100%;margin:0 auto}.profile-card,.leaderboard-card{display:flex;flex-direction:column;min-height:0}.profile-card{align-items:center;text-align:center;gap:14px}.profile-card .avatar.xl{width:116px;height:116px;margin-top:8px}.profile-name{font-size:24px;font-weight:800;word-break:break-word;line-height:1.1}.profile-elo{display:flex;align-items:baseline;gap:8px;justify-content:center}.elo-number{font-size:44px;font-weight:800;color:var(--accent-2);line-height:1;font-variant-numeric:tabular-nums}.elo-label{color:var(--text-dim);font-size:14px;font-weight:700}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;margin-top:6px}.profile-stats div{background:var(--panel-2);border-radius:14px;padding:10px 4px}.profile-stats dt{font-size:11.5px;color:var(--text-dim);font-weight:700}.profile-stats dd{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}.profile-logout{margin-top:4px}.bottom-nav{display:none}.profile-wl{width:100%;margin-top:auto;display:flex;flex-direction:column;gap:8px}.wl-bar{height:10px;border-radius:999px;background:color-mix(in srgb,var(--danger) 45%,var(--bg-deep));overflow:hidden}.wl-bar i{display:block;height:100%;width:50%;background:var(--success);border-radius:999px;transition:width .6s ease}.wl-nums{display:flex;justify-content:space-between;font-size:13px;color:var(--text-dim);font-weight:600}.wl-nums b{color:var(--text);font-size:17px}.queue-panel{display:flex;flex-direction:column;gap:18px;min-height:0;overflow-y:auto}.lobby-tabs{display:flex;gap:6px;background:var(--bg-deep);padding:5px;border-radius:999px;flex:none}.tab{flex:1;font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--text-dim);background:transparent;border:none;border-radius:999px;padding:10px 0;cursor:pointer;transition:background .15s,color .15s}.tab.active{background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--btn-shadow)}.view-free{flex:1;display:flex;flex-direction:column;justify-content:center}.mode-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mode-tile{font-family:var(--font-ui);text-align:left;border-radius:24px;padding:22px 22px 24px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}.mode-tile.ranked{border:none;color:#fff;background:radial-gradient(120% 90% at 100% 0%,rgba(255,143,184,.55),transparent 55%),linear-gradient(150deg,var(--accent-2),var(--accent) 70%);box-shadow:0 7px 0 var(--btn-shadow)}.mode-tile.solo{background:var(--panel-2);color:var(--text);border:2px solid var(--border);box-shadow:0 6px 0 var(--btn-shadow-ghost)}.mode-tile:hover{transform:translateY(-2px)}.mode-tile:active{transform:translateY(5px);box-shadow:0 1px 0 var(--btn-shadow)}.mode-tile:focus-visible{outline:3px solid var(--pink);outline-offset:3px}.mt-piece{position:absolute;top:16px;right:14px;width:110px;height:80px;transform:rotate(12deg)}.mode-tile.ranked .mt-piece{filter:drop-shadow(0 8px 14px rgba(40,10,120,.45))}.mt-title{font-size:26px;font-weight:800;line-height:1.05}.mt-sub{font-size:14px;opacity:.85;line-height:1.35;max-width:26ch}.mode-tile.solo .mt-sub{color:var(--text-dim);opacity:1}.searching{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px 0}.search-duo{display:flex;align-items:center;gap:22px}.search-vs{font-size:24px;font-weight:800;color:var(--pink)}.search-text{font-size:22px;font-weight:800}.search-text span{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:6px}.search-sub{color:var(--text-dim);font-size:14px;min-height:18px}.view-rooms{display:flex;flex-direction:column;gap:14px}.create-lobby{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}.create-lobby input{background:var(--bg-deep);border:2px solid var(--border-strong);border-radius:12px;color:var(--text);font-family:var(--font-ui);font-weight:600;font-size:15px;padding:10px 14px;outline:none;min-width:0}.create-lobby input:focus{border-color:var(--accent)}.cap-label{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:13px;font-weight:700;white-space:nowrap}.cap-label input{width:64px;text-align:center;padding:10px 6px}.lobby-items{display:flex;flex-direction:column;gap:8px}.lobby-empty{color:var(--text-dim);font-size:14px;padding:18px;text-align:center;border:2px dashed var(--border);border-radius:16px}#refresh-lobbies-btn{align-self:center}.lobby-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;background:var(--panel-2);border:2px solid var(--border);border-radius:16px;padding:12px 14px}.lobby-card.current{border-color:var(--accent)}.lc-name{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-meta{color:var(--text-dim);font-size:12.5px;font-weight:600}.lc-faces{display:flex}.lc-faces .avatar{width:28px;height:28px;margin-left:-8px}.lc-faces .avatar:first-child{margin-left:0}.lc-status{display:inline-block;margin-top:4px;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px}.lc-status.waiting{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}.lc-status.playing{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}.btn-join{font-size:13px;padding:7px 16px}.btn-join:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed;box-shadow:none}.lobby-room{display:flex;flex-direction:column;gap:12px}.lobby-room-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.room-name{font-size:24px;font-weight:800}.room-status{color:var(--accent-2);font-weight:800;font-size:13px}.room-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}.member-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border-radius:18px;background:var(--panel-2);border:2px solid var(--border);position:relative}.member-card .avatar{width:52px;height:52px}.member-card.me{border-color:var(--accent)}.member-card.empty{border-style:dashed;background:transparent;color:var(--text-dim);justify-content:center;min-height:118px;font-size:13px}.mc-name{font-weight:800;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-role{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px}.mc-role.fighter{color:#fff;background:var(--accent)}.mc-role.watcher{color:var(--text-dim);background:var(--bg-deep)}.mc-crown{position:absolute;top:-9px;left:50%;translate:-50% 0;width:22px;height:14px;background:#ffd166;clip-path:polygon(0 100%,0 25%,26% 55%,50% 0,74% 55%,100% 25%,100% 100%)}.room-note{color:var(--text-dim);font-size:13px;min-height:16px}.room-actions{display:flex;gap:10px;flex-wrap:wrap}.btn-sm{font-size:13px;padding:8px 18px}.invite-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto}.invite-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:2px solid var(--border);border-radius:12px;padding:6px 10px;font-weight:700;font-size:14px}.invite-row .avatar{width:26px;height:26px}.invite-row span:nth-child(2){flex:1}.btn-invite{font-size:12.5px;padding:6px 16px}.btn-invite:disabled{filter:grayscale(.6) brightness(.85);cursor:default;box-shadow:none}.toast-action{display:flex;align-items:center;gap:12px}.btn-toast{font-size:13px;padding:7px 16px}.leaderboard-list{list-style:none;overflow-y:auto;flex:1;min-height:0}.lb-tabs{display:flex;gap:6px;margin-bottom:12px;background:var(--bg-deep);padding:4px;border-radius:999px}.lb-tab{flex:1;font-family:var(--font-ui);font-weight:700;font-size:12.5px;color:var(--text-dim);background:transparent;border:none;border-radius:999px;padding:7px 0;cursor:pointer}.lb-tab.active{background:var(--accent);color:#fff}.leaderboard-list li{display:flex;align-items:center;gap:10px;padding:7px 8px;margin-bottom:3px;border-radius:12px;font-size:14px}.leaderboard-list li:hover{background:var(--panel-2)}.leaderboard-list li.me{background:var(--accent-soft)}.leaderboard-list li .avatar{width:28px;height:28px}.lb-rank{width:24px;color:var(--text-dim);font-weight:800;font-size:13px;text-align:center}.lb-rank.top{color:#1c1530;background:#ffd166;border-radius:8px}.lb-rank.top.r2{background:#d9dbe6}.lb-rank.top.r3{background:#f0b48a}.lb-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-elo{font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums}.lb-wl{color:var(--text-dim);font-size:11px}.leaderboard-empty{color:var(--text-dim);font-size:13px;padding:12px 6px}.chat{display:flex;flex-direction:column;gap:8px;min-height:0}.chat-log{list-style:none;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:180px;min-height:40px;padding:2px}.chat-log:empty:before{content:"Chưa có tin nhắn nào";color:var(--text-dim);font-size:13px;padding:6px 2px}.chat-log li{display:flex;gap:8px;align-items:flex-end;font-size:14px;animation:toastIn .2s ease}.chat-log li .avatar{width:24px;height:24px}.chat-log li p{background:var(--panel-2);border:1px solid var(--border);padding:6px 12px;border-radius:16px 16px 16px 4px;max-width:80%;word-break:break-word}.chat-log li p b{display:block;font-size:11.5px;color:var(--text-dim)}.chat-log li.mine{flex-direction:row-reverse}.chat-log li.mine p{background:var(--accent);border-color:transparent;color:#fff;border-radius:16px 16px 4px}.chat-log li.mine p b{display:none}.chat-quick{display:flex;gap:6px;flex-wrap:wrap}.chat-quick button{font-family:var(--font-ui);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;border:2px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}.chat-quick button:hover{border-color:var(--accent)}.chat-quick button:active{transform:translateY(2px)}.chat-form{display:flex;gap:8px}.chat-form input{flex:1;min-width:0;background:var(--bg-deep);border:2px solid var(--border-strong);border-radius:12px;color:var(--text);font-family:var(--font-ui);font-size:15px;font-weight:600;padding:8px 12px;outline:none;user-select:text;-webkit-user-select:text}.chat-form input:focus{border-color:var(--accent)}#screen-game{position:relative}.game-header{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:12px;padding:10px 24px}.hud-player{display:flex;align-items:center;gap:10px;min-width:0;position:relative}.hud-player.op{justify-content:flex-end}.hud-player.op .hud-id{text-align:right}.hud-id{display:flex;flex-direction:column;min-width:0;line-height:1.1}.player-name{font-weight:800;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-elo{color:var(--text-dim);font-size:13px;font-weight:700}.hud-clock{display:flex;flex-direction:column;align-items:center;line-height:1.05}.hud-clock #game-timer{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.hud-level{font-size:12px;font-weight:800;color:var(--warn)}.hud-bubble{position:absolute;top:calc(100% + 8px);right:0;z-index:45;background:#fff;color:#2a2540;font-weight:700;font-size:14px;padding:6px 12px;border-radius:14px 4px 14px 14px;box-shadow:var(--shadow);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-quit{display:none;justify-self:end}.arena{flex:1;min-height:0;display:grid;grid-template-columns:clamp(130px,13vw,190px) auto clamp(130px,13vw,190px) auto;grid-template-rows:auto auto auto 1fr;grid-template-areas:"hold  board next op" "stats board next op" "items board next op" "quit  board next op";justify-content:center;align-content:center;gap:14px 18px;padding:6px 16px 18px}#screen-game[data-mode=solo] .arena{grid-template-columns:clamp(130px,13vw,190px) auto clamp(130px,13vw,190px);grid-template-areas:"hold  board next" "stats board next" "items board next" "quit  board next"}#screen-game[data-mode=solo] .op-col,#screen-game[data-mode=solo] .hud-player.op,#screen-game[data-mode=solo] .garbage-bar,#screen-game[data-mode=watch] .arena{display:none}.hold-panel{grid-area:hold}.items-panel{grid-area:items;padding:12px;border-radius:18px;transition:border-color .2s}.items-panel.ready{border-color:var(--warn)}.items-panel.shielded{border-color:#3f7cf4}.items-panel kbd{margin-left:4px}.item-slots{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;align-items:end}.item-slot{aspect-ratio:1;border-radius:16px;border:2px dashed var(--border-strong);background:var(--bg-deep);display:flex;align-items:center;justify-content:center;padding:10%;cursor:default}.item-slot.filled{border-style:solid;border-color:var(--border);background:var(--panel-2)}#item-slot-0.filled{cursor:pointer;border-color:var(--warn);box-shadow:0 4px color-mix(in srgb,var(--warn) 45%,transparent);animation:giftGlow 1.6s ease-in-out infinite}#item-slot-0.filled:active{transform:translateY(3px);box-shadow:none}#item-slot-1.filled{opacity:.75}.item-icon{width:100%;height:100%;display:block}.items-hint{margin-top:8px;font-size:12px;color:var(--text-dim);font-weight:600;line-height:1.3}@keyframes giftGlow{50%{box-shadow:0 4px color-mix(in srgb,var(--warn) 45%,transparent),0 0 18px color-mix(in srgb,var(--warn) 55%,transparent)}}.stats-panel{grid-area:stats}.board-col{grid-area:board;display:flex;gap:6px;align-items:stretch}.next-panel{grid-area:next;align-self:start}.op-col{grid-area:op;align-self:start;display:flex;flex-direction:column;gap:8px;padding:12px}.btn-quit{grid-area:quit;align-self:end;font-size:14px;padding:10px}.btn-quit kbd{margin-left:4px}.hold-panel,.next-panel{padding:12px;border-radius:18px}.mini-label{font-size:13px;color:var(--text-dim);margin-bottom:6px;font-weight:700}#hold-canvas{display:block;width:100%;height:clamp(60px,8vh,96px)}#next-list{display:flex;flex-direction:column;gap:4px}#next-list canvas{display:block;width:100%;height:clamp(44px,6.4vh,80px)}#next-list canvas:first-child{height:clamp(58px,8.4vh,104px)}.stats-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;padding:14px;border-radius:18px}.stat label{display:block;font-size:12px;color:var(--text-dim);font-weight:700}.stat span{font-size:clamp(18px,1.6vw,24px);font-weight:800;font-variant-numeric:tabular-nums}.stat-score{grid-column:1 / -1}.stat-score span{font-size:clamp(26px,2.4vw,36px);color:var(--hero)}.garbage-bar{width:10px;border-radius:999px;background:var(--bg-deep);border:1px solid var(--border);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.garbage-fill{width:100%;height:0%;background:linear-gradient(0deg,var(--danger),var(--warn));transition:height .15s ease}.b2b-badge{margin-top:10px;text-align:center;color:#fff;background:var(--accent);border-radius:999px;font-weight:800;font-size:13px;padding:3px 0}.op-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.op-head .mini-label{margin:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#opponent-board{display:block;background:var(--board-bg);border-radius:10px}.op-stats{font-size:12.5px;color:var(--text-dim);font-weight:600}.op-stats b{color:var(--text);font-variant-numeric:tabular-nums}.op-attacking{color:var(--danger);font-size:12px;font-weight:800;animation:blink .7s infinite}@keyframes blink{50%{opacity:.35}}.board-wrap{position:relative;touch-action:none}#my-board{display:block;background:var(--board-bg);border:2px solid var(--border-strong);border-radius:16px;box-shadow:0 0 0 6px var(--accent-soft),0 0 70px #6c3bff2e}#fx-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:16px}#float-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.float-label{position:absolute;left:50%;font-weight:800;font-size:24px;color:var(--hero);text-shadow:0 2px 16px rgba(108,59,255,.9);pointer-events:none;white-space:nowrap}.countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#1011168c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:16px}.countdown span{font-size:110px;font-weight:800;color:var(--hero);text-shadow:0 6px 30px rgba(108,59,255,.6)}.danger-flash{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(255,95,111,.35),transparent 65%);opacity:0;transition:opacity .3s;border-radius:16px}.danger-flash.on{opacity:1}.touch-hint{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:20;background:var(--panel);border:2px solid var(--border-strong);border-radius:999px;color:var(--text-dim);font-size:11px;font-weight:700;padding:6px 14px;width:max-content;max-width:66%;text-align:center;pointer-events:none}.watch-stage{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(260px,340px);justify-content:center;align-items:center;gap:28px;padding:8px 24px 24px}.watch-boards{display:flex;align-items:center;gap:22px}.watch-col{display:flex;flex-direction:column;align-items:center;gap:8px}.watch-col canvas{display:block;background:var(--board-bg);border-radius:12px;border:2px solid var(--border-strong)}.watch-name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px}.watch-score{font-weight:800;font-size:20px;color:var(--accent-2);font-variant-numeric:tabular-nums}.watch-vs{font-size:30px;font-weight:800;color:var(--pink)}.watch-chat{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:16px;align-self:stretch;display:flex;flex-direction:column;min-height:0;max-height:72vh}.watch-chat .chat-log{max-height:none;flex:1}.watch-chat .chat-slot{flex:1;display:flex;flex-direction:column;min-height:0}.watch-chat .chat{flex:1}.faceoff{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 16px;color:#fff;background:linear-gradient(112deg,#6c3bff 0,#6c3bff 49.6%,#fff 49.6%,#fff 50.4%,#e84a82 50.4%,#e84a82);overflow:hidden}.faceoff:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 25% 45%,rgba(255,255,255,.18),transparent 40%),radial-gradient(circle at 75% 45%,rgba(255,255,255,.16),transparent 40%);pointer-events:none}.fo-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(20px,8vw,120px);width:100%;max-width:980px}.fo-side{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1;min-width:0}.fo-side .avatar.xl{width:clamp(110px,14vw,184px);height:clamp(110px,14vw,184px);padding:clamp(10px,1.4vw,18px);background:#fffffff0;border-radius:34%;box-shadow:0 10px 30px #0000002e;animation:foBob 2.2s ease-in-out infinite}.fo-b .avatar.xl{animation-delay:-1.1s}@keyframes foBob{50%{transform:translateY(-8px) rotate(2deg)}}.fo-name{font-size:clamp(22px,3vw,38px);font-weight:800;text-shadow:0 3px 0 rgba(0,0,0,.18);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fo-elo{font-size:15px;font-weight:800;background:#00000038;padding:2px 12px;border-radius:999px}.fo-center{position:relative;width:clamp(110px,12vw,150px);height:clamp(110px,12vw,150px);flex:none;display:flex;align-items:center;justify-content:center}.fo-ring{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.fo-ring circle{fill:none;stroke-width:9}.fo-ring-bg{stroke:#ffffff40}.fo-ring-fg{stroke:#fff;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}.fo-count{font-size:clamp(44px,5vw,64px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}.fo-vs{position:absolute;bottom:-34px;font-size:22px;font-weight:800;letter-spacing:.06em}.fo-hint{position:relative;font-size:15px;font-weight:600;opacity:.9;margin-top:18px}.fo-bubbles{position:absolute;bottom:calc(100% + 6px);display:flex;flex-direction:column-reverse;align-items:center;gap:6px;width:max-content;max-width:260px}.fo-bubble{background:#fff;color:#2a2540;font-weight:800;font-size:16px;padding:8px 14px;border-radius:18px;box-shadow:0 6px 18px #00000040;max-width:260px;word-break:break-word;text-align:center}.fo-chat{position:relative;width:min(560px,100%);background:#140e2861;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;padding:12px}.fo-chat .chat-log{display:none}.fo-chat .chat-quick{justify-content:center}.fo-chat .chat-quick button{background:#ffffff29;border-color:#ffffff4d;color:#fff}.fo-chat .chat-quick button:hover{background:#ffffff47;border-color:#fff}.fo-chat .chat-form input{background:#ffffffeb;border-color:transparent;color:#2a2540}.faceoff.watching .fo-hint:after{content:" · bạn đang xem"}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#101116b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}:root[data-theme=light] .overlay{background:#f6f4eabf}.result-card{background:var(--panel);border:1px solid var(--border-strong);border-radius:30px;padding:34px 44px 30px;width:min(480px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--shadow);text-align:center}.result-avatar{margin-top:-86px}.result-title{font-size:46px;font-weight:800;color:var(--hero);line-height:1}.result-title.win{color:var(--success)}.result-title.lose{color:var(--danger)}.result-title.small{font-size:32px}.result-elo{display:flex;align-items:baseline;gap:14px;font-size:32px;font-weight:800;font-variant-numeric:tabular-nums}.elo-arrow{font-size:20px;font-weight:800;padding:2px 10px;border-radius:999px}.elo-arrow.up{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}.elo-arrow.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}.result-reason{color:var(--text-dim);font-size:15px}.result-reason em{font-style:normal;font-weight:800;color:var(--pink)}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.result-stats span{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.result-stats label{font-size:12px;color:var(--text-dim);font-weight:700}.result-quick{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.result-quick button{font-family:var(--font-ui);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;border:2px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}.result-quick button:disabled{opacity:.5;cursor:default}.result-actions{display:flex;gap:12px;margin-top:4px}.rematch-waiting{color:var(--text-dim);font-size:14px;animation:blink 1.2s infinite;font-weight:600}.disconnect-msg{color:var(--text-dim);text-align:center}.btn:focus-visible,.btn-icon:focus-visible,.tab:focus-visible,.lb-tab:focus-visible{outline:3px solid var(--pink);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width: 1080px){.lobby-grid{grid-template-columns:220px minmax(0,1fr) 250px;padding:8px 16px 16px;gap:14px}.mode-tiles{grid-template-columns:1fr}.mode-tile{min-height:150px}.watch-stage{grid-template-columns:1fr}.watch-chat{max-height:34vh}}@media (max-width: 760px){.lobby-header{padding:10px 14px}.btn{padding:10px 16px;font-size:14px}.btn-icon{padding:6px 12px;font-size:12px;white-space:nowrap}.tab{font-size:14px;padding:8px 0}.lobby-grid{display:flex;flex-direction:column;padding:4px 12px calc(86px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.panel{padding:16px;border-radius:20px}.lobby-grid>.panel{display:none;flex:1 0 auto;min-height:auto}.lobby-grid[data-tab=play] .queue-panel,.lobby-grid[data-tab=rooms] .queue-panel,.lobby-grid[data-tab=rank] .leaderboard-card,.lobby-grid[data-tab=me] .profile-card{display:flex}.lobby-tabs{display:none}.queue-panel{overflow:visible}.view-free{justify-content:center}.mode-tiles{gap:14px}.mode-tile{min-height:170px;padding:18px 20px 20px;border-radius:22px}.mt-title{font-size:26px}.mt-piece{width:96px;height:70px}.leaderboard-card h3{font-size:20px;color:var(--text);margin-bottom:10px}.leaderboard-list{overflow:visible;flex:none}.profile-card{justify-content:center;gap:16px}.profile-card .avatar.xl{width:128px;height:128px}.profile-name{font-size:28px}.profile-wl{margin-top:8px}.profile-stats dd{font-size:20px}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border)}.bn-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;background:none;border:none;color:var(--text-dim);font-family:var(--font-ui);font-weight:700;font-size:11.5px;cursor:pointer}.bn-item>svg{width:44px;height:28px;padding:3px 10px;border-radius:999px;fill:currentColor;transition:background .15s}.bn-item .bn-avatar{width:28px;height:28px;border-radius:999px;outline:2px solid transparent;outline-offset:2px}.bn-item.active{color:var(--accent-2)}.bn-item.active>svg{background:var(--accent-soft)}.bn-item.active .bn-avatar{outline-color:var(--accent-2)}.create-lobby{grid-template-columns:1fr auto}.view-rooms .chat-log{max-height:30vh}.create-lobby .btn{grid-column:1 / -1}.lobby-card{grid-template-columns:1fr auto}.lc-faces{display:none}.login-card{padding:26px 20px 24px;gap:14px;border-radius:22px}.brand-tetris{font-size:46px}.brand-arena{font-size:40px}.controls-hint{display:none}.tagline{font-size:14px}.game-header{padding:6px 10px;gap:8px;grid-template-columns:1fr auto 1fr auto}.avatar.sm{width:28px;height:28px}.player-name{font-size:14px}.player-elo{font-size:11px}.hud-clock #game-timer{font-size:16px}.hud-level{font-size:10.5px}.header-quit{display:inline-block}.hud-bubble{font-size:13px;max-width:180px}.arena,#screen-game[data-mode=solo] .arena{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;grid-template-areas:"hold  next  op" "stats stats op" "board board board";justify-content:stretch;align-content:start;gap:6px;padding:4px 8px calc(8px + env(safe-area-inset-bottom))}#screen-game[data-mode=solo] .arena{grid-template-areas:"hold next next" "stats stats stats" "board board board"}.btn-quit{display:none}.board-col{justify-self:center;align-self:start}.arena{position:relative}.items-panel{position:absolute;right:18px;top:96px;z-index:35;padding:0;background:none;border:none;box-shadow:none}.items-panel .mini-label,.items-hint{display:none}.item-slots{display:flex;flex-direction:column;gap:6px;align-items:center}#item-slot-0{width:56px;height:56px}#item-slot-1{width:36px;height:36px}.item-slot:not(.filled){display:none}#item-slot-0.filled{background:color-mix(in srgb,var(--panel) 85%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hold-panel,.next-panel,.stats-panel,.op-col{padding:6px 8px;border-radius:14px;box-shadow:none}.hold-panel .mini-label,.next-panel .mini-label,.op-head{display:none}#hold-canvas{width:46px;height:34px}.next-panel{align-self:stretch;display:flex;align-items:center}#next-list{flex-direction:row;gap:2px;align-items:center}#next-list canvas,#next-list canvas:first-child{width:42px;height:32px}#next-list canvas:first-child{width:52px;height:38px}#next-list canvas:nth-child(n+5){display:none}.b2b-badge{display:none!important}.stats-panel{display:flex;gap:14px;align-items:baseline;padding:4px 10px}.stat{display:flex;align-items:baseline;gap:4px}.stat label{font-size:11px}.stat span,.stat-score span{font-size:15px}.stat-score span{color:var(--hero)}.op-col{padding:4px;gap:2px}.op-stats{display:none}.garbage-bar{width:6px}.watch-stage{padding:6px 10px 10px;gap:10px;align-items:start}.watch-boards{gap:8px;justify-content:center}.watch-vs{font-size:18px}.watch-name{font-size:14px}.watch-score{font-size:16px}.watch-chat{padding:10px}.faceoff{gap:14px;justify-content:flex-start;padding-top:12vh}.fo-stage{gap:10px}.fo-vs{bottom:-28px;font-size:18px}.fo-hint{font-size:13px;margin-top:14px}.fo-bubble{font-size:14px}.fo-bubbles{max-width:150px}.fo-chat{margin-top:auto}.result-card{padding:26px 18px 22px}.result-avatar{margin-top:-70px}.result-title{font-size:34px}.result-elo{font-size:24px}.result-stats span{font-size:18px}}#screen-game[data-mode=watch] .hud-level{display:none}.chat-log,.leaderboard-list,.invite-list{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.home-hello h2{font-size:30px;font-weight:800;line-height:1.1}.home-hello p{color:var(--text-dim);font-size:15px;margin-top:4px}.home-strip{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:14px;margin-top:18px}.hs-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:14px 16px;text-align:left;font-family:var(--font-ui);color:var(--text);min-width:0}.hs-card .section-label{display:flex;justify-content:space-between;align-items:baseline}.hs-card .section-label b{color:var(--success)}.hs-faces{display:flex;flex-wrap:wrap;gap:6px}.hs-faces .avatar{width:34px;height:34px}.hs-faces:empty:before{content:"Chỉ có mình bạn";color:var(--text-dim);font-size:13px}.hs-link{cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s}.hs-link:hover{border-color:var(--accent)}.hs-big{font-size:36px;font-weight:800;line-height:1}.hs-go{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--accent-2)}.hs-more{background:none;border:none;color:var(--accent-2);font-family:var(--font-ui);font-weight:700;font-size:12.5px;cursor:pointer}.hs-top ol{list-style:none;display:flex;flex-direction:column;gap:4px}.hs-top li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}.hs-top li .avatar{width:22px;height:22px}.hs-top li span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hs-top li b{color:var(--accent-2);font-variant-numeric:tabular-nums}.hs-top li.me span:nth-child(2){color:var(--accent-2)}.hs-top ol:empty:before{content:"Chưa có ai";color:var(--text-dim);font-size:13px}.page-title{font-size:26px;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:0}.rooms-browse{display:flex;flex-direction:column;gap:12px;min-width:0}.rooms-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--text-dim);font-size:15px;padding:40px 24px;border:2px dashed var(--border);border-radius:24px}.rooms-empty p{max-width:32ch}.lb-rate{width:44px;text-align:right;color:var(--text-dim);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}@media (min-width: 761px){#screen-lobby.active{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 1fr auto}.side-bg{grid-column:1;grid-row:1 / -1;background:var(--panel);border-right:1px solid var(--border)}.lobby-header{display:contents}.lobby-header .brand{grid-column:1;grid-row:1;justify-content:flex-start;padding:24px 22px 22px;position:relative}.header-actions{grid-column:1;grid-row:3;padding:16px 18px 22px;position:relative;flex-wrap:wrap}.bottom-nav{display:flex;flex-direction:column;gap:4px;grid-column:1;grid-row:2;padding:0 12px;position:relative}.bn-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:none;border-radius:14px;background:none;color:var(--text-dim);font-family:var(--font-ui);font-weight:700;font-size:15.5px;cursor:pointer;text-align:left;transition:background .15s,color .15s}.bn-item>svg{width:24px;height:24px;fill:currentColor;flex:none}.bn-item .bn-avatar{width:26px;height:26px}.bn-item:hover{background:var(--panel-2);color:var(--text)}.bn-item.active{background:var(--accent-soft);color:var(--text)}.bn-item.active>svg{color:var(--accent-2)}.bn-item:focus-visible{outline:3px solid var(--pink);outline-offset:2px}.lobby-grid{grid-column:2;grid-row:1 / -1;display:block;width:100%;max-width:1120px;margin:0 auto;padding:32px 40px 40px;overflow-y:auto}.lobby-grid>.panel{display:none}.lobby-grid[data-tab=play] .queue-panel,.lobby-grid[data-tab=rooms] .queue-panel,.lobby-grid[data-tab=rank] .leaderboard-card,.lobby-grid[data-tab=me] .profile-card{display:flex}.lobby-tabs{display:none}.queue-panel{background:none;border:none;box-shadow:none;padding:0;overflow:visible}.view-free{justify-content:flex-start;gap:20px}.mode-tiles{grid-template-columns:1.55fr 1fr;gap:18px}.mode-tile{min-height:270px;padding:28px;border-radius:28px}.mode-tile.ranked .mt-title{font-size:38px}.mode-tile .mt-sub{font-size:15.5px}.mode-tile .mt-piece{width:150px;height:110px;top:24px;right:22px}.searching{min-height:270px;justify-content:center;background:var(--panel);border:1px solid var(--border);border-radius:28px}.view-rooms{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.25fr);gap:24px;align-items:start}.view-rooms.hidden{display:none!important}.lobby-room{background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:20px}.view-rooms .chat-log{max-height:220px}.leaderboard-card{max-width:820px;margin:0 auto;padding:24px 26px}.leaderboard-list li{padding:10px 12px;font-size:15px;gap:14px}.leaderboard-list li .avatar{width:32px;height:32px}.lb-wl{width:56px;text-align:right;font-size:12.5px}.profile-card{max-width:520px;margin:0 auto;padding:32px 30px 28px;gap:16px}.profile-card .avatar.xl{width:136px;height:136px}.profile-name{font-size:30px}.profile-wl{margin-top:6px}}@media (min-width: 761px) and (max-width: 1080px){.lobby-grid{padding:24px}.mode-tiles,.home-strip{grid-template-columns:1fr 1fr}.hs-top{grid-column:1 / -1}.view-rooms{grid-template-columns:1fr}}@media (max-width: 760px){.side-bg,.rooms-empty{display:none!important}.lb-rate{display:none}.home-hello h2{font-size:24px}.home-strip{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.hs-top{grid-column:1 / -1}.view-rooms.in-room .rooms-browse{display:none}.view-free{justify-content:flex-start;gap:14px}.mode-tile{min-height:150px}}.btn-danger{background:var(--danger);color:#fff;box-shadow:0 5px color-mix(in srgb,var(--danger) 55%,#000)}.btn-danger:hover{filter:brightness(1.06)}.btn-danger:active{transform:translateY(4px);box-shadow:0 1px color-mix(in srgb,var(--danger) 55%,#000)}.leave-card{width:min(420px,100%)}.leave-msg{color:var(--text-dim);font-size:15px;line-height:1.45;max-width:34ch}#overlay-leave{z-index:120}@media (max-width: 760px){.leave-card .result-actions{flex-direction:column-reverse;width:100%}.leave-card .result-actions .btn{width:100%}}.install-banner{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--panel);border:1px solid var(--accent)}.install-banner img{border-radius:12px;display:block}.ib-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}.ib-text b{font-size:15px}.ib-text span{font-size:12.5px;color:var(--text-dim)}.ib-close{background:none;border:none;color:var(--text-dim);font-size:22px;line-height:1;padding:4px 6px;cursor:pointer}.ios-icon{border-radius:18px;margin-top:-56px;box-shadow:var(--shadow)}.ios-steps{text-align:left;display:flex;flex-direction:column;gap:10px;font-size:15px;padding-left:20px;color:var(--text)}.ios-steps svg{width:18px;height:18px;vertical-align:-3px;color:var(--accent-2)}#overlay-ios{z-index:130}@media (max-width: 760px){#toast-container{bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 24px)}.faceoff{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.watch-stage{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}.inset-probe{position:fixed;visibility:hidden;pointer-events:none;padding-bottom:env(safe-area-inset-bottom)}.net-pill{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:210;background:var(--warn);color:#2a2540;font-weight:800;font-size:13px;padding:6px 16px;border-radius:999px;box-shadow:var(--shadow);animation:blink 1.2s infinite}.diag-toggle{background:none;border:none;color:var(--text-dim);font-family:var(--font-ui);font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}.diag-box{width:100%;text-align:left;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;background:var(--bg-deep);border-radius:12px;padding:10px 12px;white-space:pre-wrap;word-break:break-all;user-select:text;-webkit-user-select:text}