@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--red:#f02d48;--muted:#a7a7b1;--panel:#1b1b22}*{box-sizing:border-box}body{margin:0;background:#0e0e13;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:16px}.app{max-width:600px;margin:auto;min-height:100svh;padding:0 20px 110px;background:radial-gradient(ellipse at 90% 0,#35141c,transparent 45%),#101015}header{display:flex;justify-content:space-between;align-items:center;padding:24px 0 18px}.brand{font:800 29px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px}.brand span{color:var(--red)}.brand small{font:600 12px Inter,sans-serif;letter-spacing:4px;display:block;color:var(--muted);margin-top:4px}.profile{border:1px solid #41414b;border-radius:50%;width:36px;height:36px;background:#25252e;color:#fff;font-weight:800}.hud{display:flex;gap:8px;align-items:center;margin-bottom:18px}.identity{flex:1}.identity strong{font-size:18px}.identity small{display:block;color:var(--muted);font-size:13px;margin-top:4px}.wallet{font-size:14px;background:#24242c;border:1px solid #34343e;padding:10px;border-radius:12px}.xp{height:4px;background:#33333d;margin-top:10px;border-radius:5px;overflow:hidden}.xp i{height:100%;display:block;background:var(--red)}.eyebrow{font-weight:700;letter-spacing:2px;color:var(--muted);font-size:12px;text-transform:uppercase}h1,h2,h3,p{margin:0}h1{font:800 36px 'Barlow Condensed',Impact,sans-serif;margin:4px 0 16px}h2{font:700 25px 'Barlow Condensed',Impact,sans-serif}h3{font-size:17px}.room{position:relative;height:255px;border-radius:20px;overflow:hidden;background:#21212a;margin-bottom:18px}.room img{width:100%;height:100%;object-fit:cover;object-position:40% center}.room.night img{filter:brightness(.48) saturate(.7) hue-rotate(8deg)}.room.dawn img{filter:brightness(.8) sepia(.15)}.room:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#111119)}.room-label{position:absolute;top:16px;left:16px;background:#111b;padding:8px 12px;border-radius:8px;z-index:1;font-size:14px}.room-bottom{position:absolute;bottom:16px;left:16px;right:16px;z-index:1;display:flex;align-items:end;justify-content:space-between}.room-bottom span{font-size:13px;color:#ddd}.tag{display:inline-block;border:1px solid #ffffff30;background:#181820c9;padding:7px 10px;border-radius:8px;font-size:13px}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px 0 24px}.stat{min-width:0;text-align:center}.stat b{font:700 28px 'Barlow Condensed',sans-serif}.stat small{font-size:12px;display:block;color:var(--muted);margin:5px 0}.bar{height:5px;background:#303039;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:var(--c)}.card{background:linear-gradient(120deg,#23232c,#19191f);border:1px solid #33333d;border-radius:16px;padding:18px;margin:12px 0}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.card p,.note{font-size:14px;line-height:1.6;color:var(--muted);margin-top:7px}.primary{display:block;width:100%;border:0;border-radius:12px;background:var(--red);color:#fff;padding:16px;font:700 18px Inter,sans-serif;box-shadow:0 5px 24px #ef23332a;cursor:pointer}.primary:active{transform:scale(.98)}button{font-family:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}.secondary{background:#30303b;border:1px solid #484854;border-radius:9px;padding:10px 13px;color:#fff;font-weight:600;font-size:14px}.training{border-left:3px solid var(--red)}.training .primary{margin-top:16px}.gain{color:var(--red);font-size:14px;font-weight:700}.section{margin:25px 0 10px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{border:1px solid #36363f;background:#202028;color:#fff;text-align:left;padding:16px;border-radius:12px}.choice.active{border-color:var(--red);background:#3a1a24}.choice small{display:block;margin-top:6px;color:var(--muted);font-size:13px}.chance{font:800 38px 'Barlow Condensed',sans-serif;color:var(--red)}.opponent{display:flex;gap:14px;align-items:center}.badge{width:48px;height:48px;background:#38232e;border:1px solid #704050;border-radius:14px;display:grid;place-items:center;font:800 25px 'Barlow Condensed',sans-serif}.card .primary{margin-top:14px}.price{font-weight:800;font-size:21px}.locked{opacity:.6}.trophy{font-size:34px}.empty{padding:20px 0}.history{font-size:14px;border-bottom:1px solid #303039;padding:12px 0;color:var(--muted)}.history b{color:#fff}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(600px,100%);background:#17171ff5;backdrop-filter:blur(20px);display:flex;justify-content:space-around;border-top:1px solid #333;padding:12px 6px calc(12px + env(safe-area-inset-bottom));z-index:5}nav button{border:0;background:none;color:#9797a5;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;min-width:65px;padding:5px}nav button.active{color:var(--red)}nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;background:#f3f3f7;color:#15151c;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:600;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}dialog{color:#fff;background:#202029;border:1px solid #444451;border-radius:22px;padding:26px;max-width:420px;width:calc(100% - 40px)}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog h2{font-size:32px;margin:12px 0}dialog p{color:#bdbdc7;line-height:1.7;margin:12px 0 20px}.big{font-size:48px}.progress{display:flex;gap:8px;margin:18px 0}.progress span{flex:1;padding:10px 4px;background:#30303b;border-radius:8px;text-align:center;font-size:13px}.progress .won{background:#243e35;color:#72ddb2}.progress .current{background:#581f2c;color:#fff}.meta{display:flex;gap:18px;margin:12px 0;font-size:14px;color:#b6b6c1}.danger{color:#ff8898}.footnote{color:#797985;font-size:12px;line-height:1.5;margin:20px 0}@media(min-width:700px){body{padding:22px 0}.app{border:1px solid #30303b;border-radius:26px;padding-top:0}.room{height:300px}nav{border-radius:18px 18px 0 0}}@media(max-width:360px){.app{padding-left:12px;padding-right:12px}.wallet{padding:8px;font-size:12px}.stat small{font-size:11px}}
.room{height:auto!important;aspect-ratio:3/2}.room img{object-position:center}.room.night{background:#111626}.room.night img{filter:brightness(.38) saturate(.65)}
[hidden]{display:none!important}.avatar{display:block;width:48px;height:48px;object-fit:cover;border:2px solid var(--skin,var(--red));border-radius:15px}.avatar-button{border:0;padding:0;background:none}.large{width:92px;height:92px;border-radius:24px}.hud{gap:10px}.identity strong{overflow-wrap:anywhere;font-size:16px}.profile-preview{display:flex;flex-direction:column;align-items:center;gap:14px;background:radial-gradient(ellipse,#531b2c,transparent 70%);padding:24px 0 30px}.profile-preview .large{width:124px;height:124px}.profile-preview h2{overflow-wrap:anywhere;text-align:center}.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.avatar-option{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid #41414b;border-radius:14px;padding:14px 6px;color:#fff;background:#22222b}.avatar-option .avatar{width:72px;height:72px;border:none;border-radius:12px}.avatar-option.selected{background:#471b28;border:2px solid var(--red)}form label{display:block;font-weight:700;margin-bottom:10px}input{width:100%;border-radius:12px;background:#22222b;border:1px solid #474751;color:#fff;font:500 18px Inter,system-ui,sans-serif;padding:16px;outline:none}input:focus{border-color:var(--red);box-shadow:0 0 0 3px #f02d4820}.sessionbar{height:6px;margin:16px 0}.cleared{border-color:#467863}.cleared .badge{color:#90ddb8;background:#20392f}.duel{display:flex;align-items:center;justify-content:space-around;gap:12px;margin:24px 0}.duel>div{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;flex:1}.duel h3{font-size:15px;overflow-wrap:anywhere;text-align:center}.versus{font:800 30px 'Barlow Condensed',Impact,sans-serif;color:var(--red)}.rival{font-size:42px}.soundwave{display:flex;gap:7px;height:45px;align-items:center;justify-content:center;margin:16px 0}.soundwave i{width:6px;height:26px;border-radius:4px;background:var(--red);animation:wave .6s ease-in-out infinite alternate}.soundwave i:nth-child(2n){animation-delay:.2s}.soundwave i:nth-child(3n){animation-delay:.4s}@keyframes wave{to{height:7px;opacity:.4}}.cosmetic-preview .avatar{border-color:var(--skin)!important;box-shadow:0 0 14px color-mix(in srgb,var(--skin),transparent 75%)}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:420px){.wallet{padding:9px 6px;font-size:12px}.hud .avatar{width:40px;height:40px}.hud{gap:7px}.identity small{font-size:12px}}
/* Mobile game shell — illustrated room, compact panels, illustrated bottom menu. */
body{background:#08080b}.app{position:relative;overflow:hidden;padding-bottom:calc(130px + env(safe-area-inset-bottom));background:#0e0e12;max-width:600px}.app[data-view="room"]{padding-left:0;padding-right:0}.app[data-view="room"]>header{position:absolute;right:14px;top:83px;z-index:6;padding:0;gap:7px}.app[data-view="room"] .brand{display:none}.app[data-view="room"] #hud{position:absolute;top:16px;left:12px;right:12px;z-index:5}.app[data-view="room"] .hud{align-items:center;gap:7px}.app[data-view="room"] .identity{padding:12px 9px;background:#141419ee;border:1px solid #5f2531;border-radius:0 14px 14px 0;margin-left:-7px}.app[data-view="room"] .identity strong{font-size:18px}.app[data-view="room"] .wallet{background:#17171fee;border:1px solid #53323a;border-radius:12px;padding:12px 9px;white-space:nowrap}.avatar-wrap{display:block;width:48px;height:48px;border:2px solid var(--skin,var(--red));border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#682132,#17171f);flex-shrink:0}.avatar-wrap.large{width:100px;height:100px;border-radius:24px}.avatar-wrap canvas{width:100%;height:100%;display:block}.app[data-view="room"] .avatar-wrap{width:58px;height:58px;position:relative;z-index:1;border-width:3px}.app[data-view="room"] .avatar-button{flex-shrink:0}.sound-button{border:1px solid #4d3e45;background:#211c24;color:#c7c2ca;border-radius:9px;padding:6px 12px;font-size:19px;height:36px}.sound-button.on{color:#fff;border-color:#d1354b;background:#501b29}.sound-button:after{content:' OFF';font:700 10px Inter,system-ui}.sound-button.on:after{content:' ON'}header{gap:8px}.brand{margin-right:auto}.room.immersive{border-radius:0;aspect-ratio:auto;height:410px!important;margin:0;isolation:isolate;overflow:hidden;background:#242229}.room-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important;object-position:45% 35%!important;pointer-events:none}.room.immersive:after{inset:70% 0 0;z-index:0;background:linear-gradient(transparent,#0e0e12)}.room-sign{position:absolute;top:113px;left:15px;z-index:3;padding:7px 12px;background:#111111de;transform:rotate(-4deg);border-left:4px solid var(--red);box-shadow:0 4px 12px #0005}.room-sign h1{font:800 30px 'Barlow Condensed',Impact,sans-serif;margin:0;border-bottom:3px solid var(--red);padding-bottom:3px}.room-sign>span{font:800 16px 'Barlow Condensed',Impact,sans-serif;display:block;margin-top:4px;text-align:right}.room-clock{position:absolute;top:129px;right:12px;z-index:3;font-size:12px;background:#17151cbb;border-radius:8px;padding:7px 10px}.room-player{position:absolute;left:16%;bottom:10px;width:52%;height:277px;border:0;background:none;padding:0;z-index:2;opacity:1!important}.room-player .game-character{width:100%;height:100%;object-fit:contain;filter:drop-shadow(4px 7px 4px #0005)}.room-player:disabled{cursor:default}.mic-upgrade{position:absolute;right:14px;bottom:90px;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 10px;color:#fff;border:1px solid #b1b1b170;border-radius:12px;background:#17171ee8;box-shadow:0 3px 16px #0004}.mic-upgrade>span{font-size:23px}.mic-upgrade div{text-align:left}.mic-upgrade strong{font-size:13px}.mic-upgrade small{display:block;font-size:11px;margin-top:3px;color:#c2c2ca}.mic-upgrade b{background:var(--red);border-radius:6px;padding:4px 8px;font-size:18px}.home-panels{padding:0 14px}.home-panels .stats{margin:0 0 18px;padding:15px 9px;background:#19191e;border:1px solid #37373e;border-radius:16px;position:relative;z-index:2;box-shadow:0 7px 20px #0004}.stat{padding:0 4px}.stat b{font-size:29px}.stat small{font-size:11px;white-space:nowrap}.stat .bar{height:7px}.card{background:linear-gradient(110deg,#28282f,#17171b);border:1px solid #3d3d45;border-radius:16px;box-shadow:0 4px 14px #0002}.training .primary{font:800 24px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.8px;text-transform:uppercase;padding:17px;background:linear-gradient(135deg,#ff2946,#df0a2b);border:1px solid #ff6e7b;box-shadow:0 0 20px #f02d4833}.training .row h3{font-size:16px}.training .eyebrow{font-size:11px;letter-spacing:1.1px}.training .gain{font:800 27px 'Barlow Condensed',Impact,sans-serif;white-space:nowrap}.training .note{font-size:12px}.training>p{font-size:13px}.battle-teaser{width:100%;border:1px solid #51424a;border-radius:15px;color:#fff;background:radial-gradient(ellipse at 0 100%,#70132b,transparent),#211c23;padding:18px 14px;display:flex;align-items:center;gap:14px;text-align:left}.battle-teaser>span{font-size:34px}.battle-teaser div{flex:1}.battle-teaser h3{font-size:16px}.battle-teaser p{font-size:12px;color:#b9b2bd;margin-top:6px}.battle-teaser>b{font:800 24px 'Barlow Condensed',sans-serif;color:#e95b70}nav{padding:4px 5px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(#18171c,#0d0d11);border-top:1px solid #5c3944;gap:2px}nav button{flex:1;min-width:0;border:1px solid transparent;border-radius:15px;padding:7px 2px 4px;gap:2px;font:800 17px 'Barlow Condensed',Impact,sans-serif}nav button img{width:70px;height:50px;object-fit:cover;object-position:center;border-radius:10px;mix-blend-mode:screen}nav button.active{background:linear-gradient(#5f1b2c88,#23121b);border-color:#d92243;box-shadow:inset 0 3px 0 #ff304e}nav button.active span{color:#ff324f}.ambient-led{position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 3px 12px #ff254577;animation:ledGlow 3s ease-in-out infinite alternate}.ambient-led:after{content:'';position:absolute;left:5%;top:40%;width:21%;height:11%;background:#b3e7ff18;filter:blur(9px);animation:screenGlow 2.7s ease-in-out infinite alternate}.window-night{display:none;position:absolute;left:68%;top:8%;width:33%;height:22%;z-index:1;pointer-events:none;background:radial-gradient(circle at 33% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,#ddd 0 1px,transparent 2px),linear-gradient(#101326,#182439);opacity:.85}.room.night .window-night{display:block}.room.dawn img{filter:sepia(.1) brightness(.85)}.room.night .ambient-led{box-shadow:inset 0 4px 35px #ff184559}.music-particles{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.35}.music-particles span{position:absolute;left:43%;top:48%;color:#ffc3ce;font-size:18px;opacity:0;animation:noteFloat 3s ease-out infinite}.music-particles span:nth-child(2){left:47%;animation-delay:1s}.music-particles span:nth-child(3){left:39%;animation-delay:2s}.performing .music-particles{opacity:1}.room-trophies{position:absolute;left:14px;bottom:28px;z-index:3;font-size:22px;text-shadow:0 3px 5px #000}.room-trophies b{font:800 19px 'Barlow Condensed',sans-serif}.character-studio{height:265px;position:relative;display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#542031,transparent 70%);border:1px solid #3e2a35;border-radius:20px;margin-bottom:20px;overflow:hidden}.creator-body{height:260px;width:220px;z-index:1;object-fit:contain}.character-studio>.tag{position:absolute;right:12px;top:12px;font-size:10px}.studio-glow{position:absolute;width:140px;height:28px;bottom:19px;background:#c5365360;filter:blur(18px);border-radius:50%}.customizer{display:grid;gap:16px;margin:22px 0}.customizer fieldset{border:0;padding:0;margin:0;min-width:0}.customizer legend{font-size:14px;font-weight:700;margin-bottom:9px;color:#d1cbd6}.custom-options{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:39px;height:39px;border-radius:50%;background:var(--swatch);border:2px solid #ffffff25;position:relative}.swatch.selected{outline:2px solid #fff;outline-offset:3px}.swatch.selected:after{content:'✓';display:grid;place-items:center;background:#0008;border-radius:50%;color:#fff;position:absolute;inset:7px;font-size:12px}.pill{font-size:14px;padding:10px 15px;background:#27232d;border:1px solid #504551;color:#fff;border-radius:10px}.pill.selected{background:#661d31;border-color:#f13450}.countdown{text-align:center;color:#ff3a54;font:800 68px 'Barlow Condensed',Impact,sans-serif;min-height:88px;animation:countPop .4s ease-out}.round-label{text-align:center;color:#fff;font:800 29px 'Barlow Condensed',Impact,sans-serif;min-height:88px;display:grid;place-items:center}.battle-modal{background:radial-gradient(ellipse at 50% 0,#54202e,#17171d 65%);border-color:#783044}.battle-probability{text-align:center;font-size:13px!important}.jury-pending{display:flex;justify-content:center;gap:10px;margin:20px 0}.jury-pending span{background:#2b2430;border:1px solid #55424e;border-radius:9px;padding:7px 12px;font-size:11px;color:#9c909f;text-align:center}.jury-pending b{display:block;font-size:21px;color:#fff;margin-top:5px}.vote-score{display:flex;align-items:center;justify-content:center;gap:22px;font:800 64px 'Barlow Condensed',Impact,sans-serif;margin:8px 0 22px}.vote-score span{font-size:32px;color:#93818e}.vote-score b:first-child{color:#ff405b}.jury-votes{display:flex;gap:5px;justify-content:center}.jury-votes>div{flex:1;min-width:0;text-align:center;padding:8px 3px;border:1px solid #51404b;background:#2a212b;border-radius:8px}.jury-votes small{font-size:9px;display:block;color:#c0afbc}.jury-votes b{font-size:11px;display:block;overflow-wrap:anywhere;margin-top:8px}.for-you{color:#ff7590}.for-rival{color:#a7b6f0}dialog .duel .large{width:90px;height:90px}.duel .avatar-wrap{border-radius:20px}.game-character{pointer-events:none}.cosmetic-preview .avatar-wrap{border-color:var(--skin)!important}#toast{bottom:125px}@keyframes countPop{from{transform:scale(1.25);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes ledGlow{to{box-shadow:inset 0 3px 22px #ff2545aa}}@keyframes screenGlow{to{opacity:.35}}@keyframes noteFloat{0%{transform:translateY(0) rotate(-10deg);opacity:0}25%{opacity:.85}100%{transform:translate(16px,-55px) rotate(15deg);opacity:0}}@media(min-width:700px){.app{border-radius:24px}.room.immersive{height:440px!important}.room-player{height:315px}.app[data-view="room"] .identity strong{font-size:20px}.stat small{font-size:14px}.mic-upgrade strong{font-size:16px}.mic-upgrade small{font-size:13px}}@media(max-width:360px){.room.immersive{height:365px!important}.room-sign h1{font-size:25px}.room-player{height:255px}.app[data-view="room"] .avatar-wrap{width:48px;height:48px}.app[data-view="room"] .wallet{font-size:11px;padding:12px 5px}.app[data-view="room"] .identity strong{font-size:15px}.stat small{font-size:10px}.mic-upgrade{right:8px;bottom:74px}.mic-upgrade div{max-width:96px}.room-clock{font-size:10px}nav button img{width:59px;height:44px}}@media(prefers-reduced-motion:reduce){.music-particles{display:none}*{animation:none!important}}
.identity{min-width:0}.identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wallet{flex-shrink:0}.character-studio{position:sticky;top:8px;z-index:4;background:radial-gradient(ellipse at 50% 45%,#542031,transparent 70%),#17141c;box-shadow:0 8px 25px #0007}.game-character.creator-body{pointer-events:none}.room-background{animation:roomDrift 18s ease-in-out infinite alternate;transform-origin:50% 55%}@keyframes roomDrift{from{transform:scale(1.015)}to{transform:scale(1.045)}}@media(prefers-reduced-motion:reduce){.room-background{animation:none;transform:none}}
/* Full-screen scene. Menus and stat upgrades are panels over the game. */
body.game-screen{padding:0;margin:0;height:100dvh;overflow:hidden;overscroll-behavior:none}.app[data-view="room"]{height:100dvh;min-height:0;padding:0;border-radius:0;overflow:hidden;max-width:600px;border:0}.room.immersive.fullscreen{height:100dvh!important;min-height:0;border-radius:0;margin:0}.fullscreen .room-background{object-position:center!important;object-fit:cover!important;animation:roomDrift 22s ease-in-out infinite alternate}.fullscreen:after{inset:76% 0 0;background:linear-gradient(transparent,#11101888)}.fullscreen .room-sign{top:108px;left:15px;padding:6px 10px}.fullscreen .room-sign h1{font-size:26px}.fullscreen .room-sign>span{font-size:14px}.fullscreen .room-clock{top:130px;right:12px;font-size:11px;padding:6px 8px}.fullscreen .room-player{left:20%;bottom:calc(214px + env(safe-area-inset-bottom));width:60%;height:min(45dvh,360px);max-width:290px;z-index:2}.fullscreen .room-player .game-character{filter:drop-shadow(2px 6px 4px #0003)}.fullscreen .mic-upgrade{top:43%;bottom:auto;right:10px;padding:8px;gap:6px;border-color:#ffffff35;background:#191723c9;backdrop-filter:blur(7px)}.fullscreen .mic-upgrade strong{font-size:12px}.fullscreen .mic-upgrade small{font-size:10px}.fullscreen .mic-upgrade>span{font-size:20px}.fullscreen .mic-upgrade b{padding:3px 6px;font-size:16px}.fullscreen .music-particles span{top:41%;left:49%}.fullscreen .room-trophies{left:14px;bottom:calc(269px + env(safe-area-inset-bottom));border:1px solid #b1965166;border-radius:10px;background:#322818a6;color:#fff;padding:7px 9px}.fullscreen .window-night{left:89%;width:11%;top:12%;height:25%}.scene-controls{position:absolute;left:12px;right:12px;bottom:calc(99px + env(safe-area-inset-bottom));z-index:4}.scene-controls .stats{margin:10px 0 0;padding:9px 6px;background:#191720d4;border:1px solid #ffffff33;border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #0005;gap:2px}.scene-controls .stat{border:0;border-radius:9px;background:none;color:#fff;text-align:center;padding:3px 2px;min-width:0;transition:background .12s,transform .12s}.scene-controls .stat:active{background:#ffffff15;transform:scale(.94)}.stat-symbol{display:none;color:var(--c);font-size:15px}.scene-controls .stat b{font:800 27px 'Barlow Condensed',Impact,sans-serif}.scene-controls .stat small{font-size:11px;display:block;color:#ddd;margin:3px 0 6px}.scene-controls .bar{height:5px}.tap-hint{display:block;text-align:center;color:#efe5ebc4;font-size:10px;margin-top:5px;text-shadow:0 2px 6px #000}.training-pill{position:relative;width:100%;overflow:hidden;display:flex;align-items:center;gap:9px;border:1px solid #ffffff32;border-radius:12px;padding:10px 12px;background:#241b25bb;backdrop-filter:blur(9px);color:#fff;text-align:left}.training-pill>span{font-size:22px;color:#ff667e}.training-pill>div{flex:1;min-width:0}.training-pill strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.training-pill small{display:block;color:#c9bccb;font-size:10px;margin-top:4px}.training-pill>b{font:800 22px 'Barlow Condensed',Impact,sans-serif;color:#ff607a}.pill-progress{height:3px;position:absolute;bottom:0;left:0;background:var(--red)}.running{border-color:#fd4e6b77}.app[data-view="room"] nav,body.game-screen nav{background:#111018d6;backdrop-filter:blur(12px);border-top:1px solid #c342624f}.app[data-view="room"] .hud{margin:0}.app[data-view="room"] .identity{padding:9px 7px}.app[data-view="room"] .identity strong{font-size:16px}.app[data-view="room"] .identity small{font-size:11px}.app[data-view="room"] .wallet{font-size:12px;padding:11px 7px}.app[data-view="room"] .avatar-wrap{width:52px;height:52px}.app[data-view="room"]>header{top:78px}.game-sheet{position:fixed;inset:auto auto calc(92px + env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:560px;max-height:78dvh;margin:0;padding:20px 18px 18px;border:1px solid #86647477;border-radius:22px;background:linear-gradient(145deg,#302431f5,#18151df7);box-shadow:0 20px 70px #0008;backdrop-filter:blur(14px);animation:sheetEnter .18s ease-out}.game-sheet::backdrop{background:#07030b44;backdrop-filter:blur(2px)}.sheet-close{position:absolute;right:12px;top:12px;z-index:2;background:#ffffff12;color:#fff;border:1px solid #ffffff25;border-radius:50%;width:32px;height:32px;font-size:16px}.game-sheet h1{font-size:29px;margin:5px 35px 16px 0}.game-sheet h2{font-size:25px}.game-sheet .eyebrow{font-size:10px;letter-spacing:1.3px}.game-sheet .card{background:#ffffff08;box-shadow:none}.game-sheet .primary{font-size:16px;padding:14px}.game-sheet p{margin:6px 0 10px;font-size:13px}.game-sheet .note{font-size:13px}.game-sheet .choices{gap:9px}.game-sheet .choice{padding:14px 12px}.game-sheet .choice strong{font-size:14px}.game-sheet .choice small{font-size:12px}#sheetbody{max-height:calc(78dvh - 45px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin}.stat-upgrade{display:flex;align-items:center;justify-content:center;gap:22px;padding:12px 0 16px;font:800 42px 'Barlow Condensed',Impact,sans-serif}.upgrade-plus{font-size:22px;color:#ff536e}.duration-row{padding:12px 0 18px;font-size:14px}.duration-row b{font:800 27px 'Barlow Condensed',Impact,sans-serif;color:#ff6380}.speed-row{font-size:12px;color:#c7b7c7;margin-top:14px}.scene-controls .stats .bar i{pointer-events:none}#toast{bottom:calc(235px + env(safe-area-inset-bottom));font-size:12px;padding:10px 13px;max-width:calc(100% - 32px)}.game-sheet .footnote{font-size:11px}nav button img{width:63px;height:45px}nav button{font-size:16px;padding-top:5px;padding-bottom:3px}@keyframes sheetEnter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@media(min-width:700px){body.game-screen .app{border-left:1px solid #3b303b;border-right:1px solid #3b303b}.fullscreen .room-player{left:26%;width:48%;height:min(46dvh,380px)}.fullscreen .mic-upgrade strong{font-size:14px}.fullscreen .mic-upgrade small{font-size:12px}.scene-controls{left:20px;right:20px}.scene-controls .stat small{font-size:14px}.scene-controls .stat b{font-size:30px}}@media(max-height:650px){.fullscreen .room-sign{top:98px}.fullscreen .room-sign h1{font-size:23px}.fullscreen .room-clock{top:119px;font-size:10px}.fullscreen .room-player{bottom:calc(192px + env(safe-area-inset-bottom));height:37dvh}.scene-controls{bottom:calc(87px + env(safe-area-inset-bottom))}.scene-controls .stat b{font-size:23px}.scene-controls .stat small{font-size:10px}.training-pill{padding:7px 10px}.game-sheet{bottom:calc(82px + env(safe-area-inset-bottom));max-height:76dvh}nav button img{height:39px;width:54px}nav button{font-size:14px}}@media(prefers-reduced-motion:reduce){.fullscreen .room-background,.game-sheet{animation:none}}
.fullscreen.dawn .room-player{filter:brightness(.9) saturate(.92)}.fullscreen.night .room-player{filter:brightness(.65) saturate(.85)}.fullscreen .room-background{transform-origin:center}.game-sheet:focus{outline:none}.scene-controls .stat:focus-visible{outline:2px solid var(--c);outline-offset:2px}

/* Swipeable pages keep the navigation available; training stays in a compact overlay. */
.game-page{position:absolute;inset:125px 0 calc(94px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 28px;background:linear-gradient(140deg,#2b1724ed,#121018f5),url('room-flat.webp') center/cover;touch-action:pan-y}.game-page h1{font-size:30px}.game-page .eyebrow{font-size:10px}.game-page .card{padding:17px}.queue-status{padding:14px 0}.queue-status .row{font-size:13px}.queue-list{display:flex;gap:6px;flex-wrap:wrap}.queue-list span{border:1px solid;border-radius:7px;padding:5px 7px;font-size:10px;background:#ffffff06}.afk-launch{position:sticky;bottom:0;padding:10px 0 2px;background:#241b29;display:grid;gap:8px}.scene-controls .stat b{font-size:24px}.game-sheet[data-kind="activity"]{max-height:82dvh}.game-sheet[data-kind="activity"] #sheetbody{max-height:calc(82dvh - 45px)}@media(prefers-reduced-motion:reduce){.slide-next,.slide-previous{animation:none}}

.category-tabs,.menu-selector{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.category-tabs button,.menu-selector button{border:1px solid #635062;background:#211a28;color:#cfc7d3;padding:10px 12px;border-radius:10px;font-size:12px;flex:1;min-width:70px}.category-tabs button{font-weight:800;font-size:15px}.category-tabs .selected,.menu-selector .selected{border-color:var(--red);background:#531a2d;color:#fff}.queue-item{display:flex;align-items:center;gap:8px;color:#fff;border:1px solid;border-radius:8px;background:#ffffff06;padding:8px;font-size:11px}.queue-item b{color:#ff8094;font-size:14px}.cancel-current,.cancel-all{border-color:#b1435e;color:#ffb4c2;width:100%;margin-top:9px}.queue-list{max-height:115px;overflow-y:auto}.game-page .section{margin:12px 0 8px}.game-page .footnote{margin-top:12px}.game-page .card{margin:10px 0}.game-page h1{margin-bottom:10px}.game-page{overflow-x:hidden;touch-action:pan-y}.game-sheet .duration-row{padding:8px 0}.game-sheet .stat-upgrade{padding:8px 0;font-size:34px}.game-sheet .queue-status{padding:8px 0}.game-sheet .speed-row{margin-top:7px}

/* Compact phone menus: fixed choices and one card per page. */
.game-page{padding:12px 14px 14px}.game-page h1{font-size:27px;margin:0 0 8px}.game-page .category-tabs{margin:8px 0;gap:6px}.game-page .category-tabs button{padding:9px 8px;font-size:13px}.game-page .menu-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0}.game-page .menu-selector button{min-width:0;padding:9px 3px;font-size:11px;line-height:1.2}.page-gear .menu-selector:has([data-action="select-coach"]){grid-template-columns:repeat(5,minmax(0,1fr))}.page-battle .menu-selector{grid-template-columns:repeat(4,minmax(0,1fr))}.game-page .card{padding:14px;margin:10px 0}.game-page .card h2{font-size:25px;margin:5px 0}.game-page .card h3{font-size:16px}.game-page .card p{font-size:12px;line-height:1.45;margin:7px 0}.game-page .card .primary{font-size:14px;padding:12px;margin-top:10px}.lesson-facts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 8px;font-size:11px}.lesson-facts span{padding:6px 8px;background:#ffffff08;border:1px solid #ffffff16;border-radius:8px}.game-page .lesson-caption{font-size:10px;color:#c3b0c4;margin:9px 0 0}.career-summary,.battle-level{font-size:12px;color:#cbbbcc;padding:8px 0}.history-score{font:800 52px 'Barlow Condensed',Impact,sans-serif;color:var(--red);text-align:center;margin:15px 0}.pager{display:flex;gap:8px}.pager button{flex:1}.jury-pending{gap:5px}.jury-pending span{padding:7px 3px;flex:1;min-width:0;font-size:9px;overflow-wrap:anywhere}.jury-votes small{color:#ede2ec;font-size:10px;font-weight:700;min-height:24px;display:flex;align-items:center;justify-content:center}.game-page{overflow-y:auto}dialog:not(.game-sheet){max-height:calc(100dvh - 28px);overflow-y:auto}dialog .vote-score{font-size:52px;margin:8px 0 14px}dialog .big{font-size:38px}dialog h2{font-size:28px;margin:8px 0}dialog p{font-size:13px;line-height:1.5;margin:12px 0}.battle-modal .jury-votes{margin:8px 0}dialog #closemodal{padding:13px;font-size:16px}@media(max-height:650px){.game-page{inset:116px 0 calc(82px + env(safe-area-inset-bottom));padding:8px 12px}.game-page h1{font-size:24px}.game-page .card{padding:11px;margin:7px 0}.game-page .category-tabs button,.game-page .menu-selector button{padding-top:7px;padding-bottom:7px}.lesson-facts{margin:8px 0 5px}.game-page .card p{margin:5px 0}.game-page .card .primary{padding:10px}dialog:not(.game-sheet){padding:18px}dialog .vote-score{font-size:44px;margin:4px 0 8px}dialog .meta{font-size:12px}dialog .jury-votes b{font-size:10px}}
/* Paged training and compact career: controls stay inside the phone viewport. */
.game-sheet[data-kind="stat"]{max-height:calc(100dvh - 125px);padding:16px 14px 14px}.game-sheet[data-kind="stat"] #sheetbody{overflow:hidden;max-height:none;padding:0}.game-sheet[data-kind="stat"] h1{margin:0 35px 8px 0;font-size:25px}.game-sheet[data-kind="stat"] .category-tabs{margin:6px 0 10px}.game-sheet .category-tabs button{flex:1;background:#241b2c;color:#e5dce7;border:1px solid #6b5269;border-radius:9px;padding:9px;font-size:12px}.game-sheet .category-tabs .selected{background:#5b1d31;border-color:#ed3656}.game-sheet[data-kind="stat"] .stat-upgrade{padding:7px 0;font-size:32px}.game-sheet[data-kind="stat"] .duration-row{padding:6px 0 10px}.game-sheet[data-kind="stat"] .primary{padding:12px;font-size:15px}.game-sheet[data-kind="stat"] p{font-size:11px;margin:8px 0}.mini-queue,.compact-session{border:1px solid #ffffff20;background:#ffffff06;border-radius:10px;padding:10px;font-size:12px;margin:9px 0}.compact-session .sessionbar{margin:9px 0;height:4px}.compact-session .row{font-size:12px}.queue-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;padding:6px 0;border-bottom:1px solid #ffffff15}.queue-entry button{padding:5px 9px}.queue-paged{min-height:33px}.pager{align-items:center}.pager>span{font-size:11px}.game-sheet[data-kind="stat"] .cancel-all{margin-top:7px;padding:8px;font-size:12px}.game-sheet[data-kind="stat"] .cancel-current{padding:8px;font-size:12px;margin-top:5px}.game-sheet[data-kind="stat"] .pager .secondary{font-size:11px;padding:9px 6px}.centered{text-align:center}.setting-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:13px 0}.volume-row{display:flex;align-items:center;gap:12px;font-size:12px;margin:12px 0}.volume-row input{padding:0;height:25px;border:0;flex:1;accent-color:var(--red)}.game-sheet[data-kind="settings"] #sheetbody{overflow:hidden;max-height:none}.compact-choices{gap:6px;margin:12px 0}.compact-choices .choice{padding:9px 7px}.compact-choices .choice strong{font-size:12px}.compact-choices .choice small{font-size:10px;margin-top:4px}.game-sheet[data-kind="activity"] #sheetbody{overflow:hidden;max-height:none}.game-page .category-tabs{gap:5px}.game-page .category-tabs button{font-size:11px;padding:8px 4px;min-width:0}.page-gear .menu-selector:has([data-action="select-mic"]){grid-template-columns:repeat(3,minmax(0,1fr))}.page-career .menu-selector,.page-work .menu-selector,.page-gear .menu-selector:has([data-action="select-equipment"]){grid-template-columns:repeat(4,minmax(0,1fr))}.page-career .event-card p{font-size:11px;line-height:1.45}.event-card .tag{white-space:nowrap;font-size:10px}.event-card h2{max-width:75%}.nav-symbol{display:grid;place-items:center;height:37px;font:800 29px 'Barlow Condensed',Impact,sans-serif;color:#ffcd83}body.game-screen nav button{font-size:12px;min-width:0;padding:5px 1px 3px}body.game-screen nav button img{width:45px;height:37px}body.game-screen nav{gap:1px}.artist-pager{margin:12px 0}.artist-pager>strong{font-size:12px;text-align:center;flex:1}.chat-message{padding:12px;background:#221b2d;border-left:2px solid #8667bd;border-radius:8px;margin:12px 0;font-size:12px;line-height:1.5}.sponsor-card p{font-size:11px!important}.game-page{overflow-y:hidden}.page-social .card h2{font-size:27px}.sound-button:after,.sound-button.on:after{content:none}dialog a{color:#fca5b7}.game-sheet[data-kind="settings"] h1{font-size:26px}#modal .duel{margin:12px 0}#modal .duel .large{width:65px;height:65px}.battle-modal .countdown{font-size:54px;min-height:65px}.battle-modal .round-label{min-height:65px;font-size:24px}.battle-modal .soundwave{height:30px;margin:9px 0}.battle-modal .jury-pending{margin:12px 0}.game-sheet[data-kind="activity"] .primary{font-size:13px;padding:12px}@media(max-height:650px){.game-sheet[data-kind="stat"]{bottom:calc(76px + env(safe-area-inset-bottom));padding:12px;max-height:calc(100dvh - 100px)}.game-sheet[data-kind="stat"] h1{font-size:22px}.game-sheet[data-kind="stat"] .category-tabs button{padding:7px}.game-sheet[data-kind="stat"] .mini-queue{margin:7px 0}.game-sheet[data-kind="stat"] .compact-session{padding:8px;margin:7px 0}.queue-entry{padding:4px 0}.page-career .event-card h2{font-size:21px}}
.game-sheet[data-kind="stat"],.game-sheet[data-kind="activity"],.game-sheet[data-kind="settings"]{overflow:hidden}.page-career .pager .secondary{font-size:11px;padding:9px 5px}.page-social .note{font-size:11px;line-height:1.4}.page-social .chat-message{font-size:11px;margin:10px 0;padding:9px}.game-page .sponsor-card{padding:11px}.game-page .sponsor-card .secondary{font-size:11px;padding:7px 9px}
/* v10: a coherent game HUD, six matching icons and a compact Boxcoin shop. */
.app[data-view="room"] .hud{display:grid;grid-template-columns:48px minmax(0,1fr) 60px 64px;grid-template-rows:40px 24px;gap:5px;margin:0;align-items:center}
.app[data-view="room"] .hud .avatar-button{grid-row:1/3}.app[data-view="room"] .hud .avatar-wrap{width:48px;height:48px}
.app[data-view="room"] .identity{grid-row:1/3;margin-left:0;min-width:0;border-radius:13px;padding:10px 8px;height:69px;background:linear-gradient(125deg,#261721f5,#12131bef)}
.app[data-view="room"] .identity strong{font-size:16px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app[data-view="room"] .identity small{font-size:10px;margin-top:3px}.identity .xp{height:5px;margin-top:8px}
.app[data-view="room"] .wallet{display:flex;align-items:center;justify-content:center;gap:3px;padding:7px 4px;height:40px;font-size:13px;border-radius:12px;color:#ffe3a1;background:#251d16ee;border-color:#9b703d88}.wallet svg{width:22px;height:22px;flex-shrink:0}.app[data-view="room"] .box-wallet{background:#241b37f5;border-color:#a484dd99;color:#dfceff}.box-wallet>span{font-size:13px;color:#fff}.fan-wallet{grid-column:3/5;text-align:center;font-size:11px;font-weight:700;color:#ffc1cc;background:#261621ee;border-radius:8px;padding:4px;border:1px solid #613145}
body.game-screen nav{padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:linear-gradient(#19131ff7,#0d0c12fa);gap:4px}
body.game-screen nav button{border-radius:14px;gap:5px;padding:6px 1px;font:700 10px Inter,system-ui,sans-serif;letter-spacing:0;color:#c5becd;min-width:0;flex:1;border:1px solid transparent;transition:background .15s,transform .15s}
body.game-screen nav button.active{color:#fff;background:linear-gradient(145deg,#74243a,#361624);border-color:#ff4967;box-shadow:0 0 15px #f02d4825}
.nav-icon{display:grid;place-items:center;width:38px;height:32px;border-radius:10px;background:#ffffff08;color:#ffb6c4}body.game-screen nav .nav-icon svg{width:25px;height:26px;stroke-width:1.8;fill:none;stroke:currentColor}nav button.active .nav-icon{background:#ff496730;color:#fff}nav button:active{transform:scale(.93)}
.stat{transition:transform .15s}.stat:active{transform:scale(.94)}.scene-controls .stats{border-color:#c8587466;background:linear-gradient(125deg,#29202bf5,#17131cf2);box-shadow:0 8px 24px #0007}.stat small{color:#ddd5df}.stat .bar i,.xp i{box-shadow:0 0 8px currentColor;transition:width .3s}.game-page h1{letter-spacing:.5px}.game-page .category-tabs .selected,.game-page .menu-selector .selected{box-shadow:inset 0 0 0 1px #ff647b;background:linear-gradient(135deg,#72273e,#3d2032);color:#fff}.game-page .card{border-color:#9b617055;background:linear-gradient(130deg,#352332ed,#18141ef5)}.primary{background:linear-gradient(135deg,#ff3b60,#dc173a);box-shadow:0 4px 0 #8c1028,0 8px 22px #ee254330}.primary:disabled{box-shadow:none}
#toast{color:#fff;background:linear-gradient(115deg,#4d2036,#221d32);border:1px solid #ef728f;padding:12px 17px;box-shadow:0 6px 30px #0007;font-size:13px}#toast.reward-pop.show{animation:rewardPop .38s ease-out}.reward-glow{animation:rewardGlow .65s ease-out}@keyframes rewardPop{0%{transform:translateX(-50%) scale(.8)}65%{transform:translateX(-50%) scale(1.05)}100%{transform:translateX(-50%) scale(1)}}@keyframes rewardGlow{35%{box-shadow:0 0 25px #ffae5788;border-color:#ffcd83}}
.game-sheet[data-kind="shop"]{overflow:hidden;max-height:calc(100dvh - 120px);padding:16px;background:linear-gradient(135deg,#372542f7,#17121efb)}.game-sheet[data-kind="shop"] #sheetbody{overflow:hidden;max-height:none}.game-sheet[data-kind="shop"] h1{display:flex;align-items:center;gap:9px;font-size:28px;margin:4px 35px 8px 0}.game-sheet[data-kind="shop"] h1 svg{width:28px;height:28px}.box-balance{display:flex;align-items:center;gap:10px;border:1px solid #9c75d466;background:#a67bff15;border-radius:12px;padding:8px 12px;margin-bottom:10px}.box-balance strong{font-size:26px;color:#dac3ff}.box-balance span{font-size:12px;color:#dfd0ed}.game-sheet[data-kind="shop"] .note{font-size:12px;line-height:1.45;margin:10px 0}.boost-grid,.test-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}.boost-card{border:1px solid #b191e9;background:linear-gradient(135deg,#50366a,#2a1e3b);color:#fff;border-radius:14px;padding:14px 7px;display:flex;align-items:center;flex-direction:column;gap:10px}.boost-card strong{font-size:20px}.boost-card span{display:flex;align-items:center;gap:4px;font-size:12px}.boost-card svg{width:19px;height:19px}.test-packs{grid-template-columns:repeat(3,minmax(0,1fr))}.test-packs button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 3px;background:#8e61c522;border-color:#8e61c5}.test-packs svg{width:30px;height:30px}.test-packs b{font-size:20px}.test-packs small{font-size:10px}.real-payment,.milestone{width:100%;font-size:11px;padding:11px 6px}.shop-footnote{display:flex;align-items:center;gap:3px;font-size:10px!important;color:#cbbbd2;line-height:1.4!important;margin-top:12px!important}.shop-footnote svg{width:17px;height:17px;flex-shrink:0}.customizer fieldset:first-child{border:1px solid #d9698155;background:#63253c20;border-radius:13px;padding:12px}.customizer fieldset:first-child .pill{min-width:95px}
@media(max-width:360px){.app[data-view="room"] .hud{grid-template-columns:42px minmax(0,1fr) 55px 60px;gap:4px}.app[data-view="room"] .hud .avatar-wrap{width:42px;height:42px}.app[data-view="room"] .identity strong{font-size:14px}.wallet svg{width:19px;height:19px}body.game-screen nav button{font-size:9px}.game-sheet[data-kind="shop"]{padding:12px}.boost-card{padding:11px 5px}}
@media(prefers-reduced-motion:reduce){.stat,.xp i,.stat .bar i,nav button{transition:none}}
/* v11: clearer, solid menus and glanceable background activities. */
body.game-screen nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#14111c;border-top:2px solid #76465c;box-shadow:0 -8px 24px #0006}
body.game-screen nav button{display:flex;flex-direction:row;justify-content:center;gap:7px;min-height:40px;padding:5px 6px;font:700 14px Inter,system-ui,sans-serif;background:#2b2533;color:#f2edf5;border:1px solid #69576f;border-radius:11px;white-space:nowrap}
body.game-screen nav button.active{background:linear-gradient(130deg,#ed2d52,#a61c3a);border:1px solid #ffb0c2;box-shadow:0 2px 10px #ea325238;color:#fff}.nav-icon{width:27px;height:28px;background:none;color:#d6c8e3}body.game-screen nav .nav-icon svg{width:23px;height:25px}nav button.active .nav-icon{background:none;color:#fff}
.game-page{bottom:calc(116px + env(safe-area-inset-bottom));background:linear-gradient(140deg,#302036f7,#16131efb);padding:14px}
.game-page h1{font-size:29px;margin-bottom:13px;color:#fff}.game-page .category-tabs,.game-sheet .category-tabs{padding:4px;background:#0e0b14;border:1px solid #68546e;border-radius:13px;gap:4px}.game-page .category-tabs button,.game-sheet .category-tabs button{font-size:14px;line-height:1.25;padding:10px 5px;background:#2a2432;border:1px solid #65576d;color:#eee5f4;border-radius:9px;min-width:0}.game-page .menu-selector button{font-size:13px;padding:10px 4px;background:#2f2838;border-color:#82708c;color:#eee5f4}.game-page .category-tabs .selected,.game-sheet .category-tabs .selected,.game-page .menu-selector .selected{background:#b72345;border-color:#ffa9be;color:#fff;box-shadow:0 0 0 1px #dc5976}
.game-page .card{background:#292331;border:1px solid #807088;border-radius:15px;box-shadow:0 6px 17px #0004;padding:15px}.game-page .card h2{font-size:28px;color:#fff}.game-page .card p,.game-page .note{font-size:14px;line-height:1.5;color:#d3c9dc}.game-page .card .primary{font-size:15px;padding:13px}.game-page .lesson-caption{font-size:12px;color:#d9c4e0}.game-page .footnote{font-size:12px;color:#c5b5d0}.game-page .price{color:#ffd685}.secondary{background:#332c3e;border-color:#887492;color:#fff}.game-sheet{background:#26202ff7;border-color:#a58ba9}.game-sheet .note{color:#e0d5e7}.game-sheet[data-kind="stat"] p{font-size:13px;line-height:1.4}.game-sheet[data-kind="stat"] .pager .secondary{font-size:13px}.sheet-close{background:#46394c;border-color:#bd9bc0;color:#fff}
.scene-controls{bottom:calc(120px + env(safe-area-inset-bottom))}.scene-controls .stat small{font-size:12px;color:#fff}.scene-controls .stats{background:#201b29f5;border-color:#9a7396}.training-pill{background:#29202fee;border-color:#a0607b}.training-pill small{color:#e0cfe2}.room-player{bottom:calc(220px + env(safe-area-inset-bottom))}
.ongoing-activities{position:absolute;top:178px;right:12px;width:190px;z-index:4;display:grid;gap:7px}.ongoing-card{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:6px;align-items:center;color:#fff;text-align:left;background:#211c2bf2;border:1px solid #c08e58;border-radius:12px;padding:9px;box-shadow:0 4px 14px #0005}.ongoing-icon svg{width:24px;height:25px;fill:none;stroke:#ffd089;stroke-width:1.8}.ongoing-card small{display:block;font-size:9px;letter-spacing:1px;color:#ffd089;font-weight:800;margin-bottom:3px}.ongoing-card strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ongoing-card b{font-size:16px;color:#ffe3a6;font-variant-numeric:tabular-nums}.ongoing-card:active{transform:scale(.97)}.ongoing-activities:empty{display:none}
@media(max-width:360px){body.game-screen nav button{font-size:12px;gap:4px;padding:5px 3px}.game-page{padding:10px}.game-page .category-tabs button{font-size:12px}.ongoing-activities{width:174px;top:160px}.scene-controls{left:10px;right:10px}.scene-controls .stat small{font-size:11px}}
@media(max-height:700px){.game-page{top:116px;padding:8px 12px}.game-page h1{font-size:24px;margin-bottom:6px}.game-page .card{padding:11px;margin:8px 0}.game-page .card h2{font-size:24px}.game-page .card p,.game-page .note{font-size:13px;margin:5px 0;line-height:1.4}.game-page .category-tabs button,.game-page .menu-selector button{padding:8px 4px;font-size:12px}.game-page .card .primary{padding:10px;font-size:14px}.game-sheet[data-kind="stat"] .pager .secondary{font-size:12px}.ongoing-activities{top:158px}.room-player{height:33dvh}.scene-controls .stat b{font-size:25px}}
.game-sheet[data-kind]{bottom:calc(116px + env(safe-area-inset-bottom));max-height:calc(100dvh - 140px)}
/* v12: four destinations and a reserved, compact control dock. */
:root{--room-nav:86px;--room-controls:170px}
body.game-screen nav{height:calc(76px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));background:#15111bf7}
body.game-screen nav button{flex-direction:column;gap:4px;min-height:0;padding:5px 2px;font-size:12px;border-radius:13px;background:#27212f;border-color:#54465d}
body.game-screen nav button.active>span:last-child{color:#fff}.nav-icon{height:26px;width:29px}body.game-screen nav .nav-icon svg{width:24px;height:25px}
.game-page{bottom:calc(var(--room-nav) + env(safe-area-inset-bottom))}.game-sheet[data-kind]{bottom:calc(var(--room-nav) + env(safe-area-inset-bottom));max-height:calc(100dvh - 110px)}
.scene-controls{bottom:calc(var(--room-nav) + env(safe-area-inset-bottom));left:12px;right:12px;display:grid;gap:8px}
.scene-controls .stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0;padding:5px;height:116px;border-radius:18px;border:1px solid #80708b;background:#1c1724ed;box-shadow:0 6px 22px #0006}
.scene-controls .stat{display:grid;grid-template-rows:28px 27px 16px 4px;align-items:center;gap:4px;padding:7px 2px;border:1px solid color-mix(in srgb,var(--c),transparent 55%);border-radius:13px;background:linear-gradient(160deg,color-mix(in srgb,var(--c),transparent 84%),#201a29);box-shadow:inset 0 1px 0 #ffffff10}
.scene-controls .stat-symbol{display:grid;place-items:center;color:var(--c);font-size:21px;font-weight:800;height:28px;width:28px;margin:0 auto;border-radius:50%;background:color-mix(in srgb,var(--c),transparent 86%);text-shadow:0 0 9px color-mix(in srgb,var(--c),transparent 45%)}
.scene-controls .stat b{font:800 26px 'Barlow Condensed',Impact,sans-serif;line-height:1;color:#fff;letter-spacing:.1px}
.scene-controls .stat small{margin:0;font-size:11px;line-height:1.2;color:#f0eaf5;white-space:nowrap}.scene-controls .stat .bar{height:4px;width:90%;margin:auto;background:#514659}.scene-controls .stat:active{background:color-mix(in srgb,var(--c),#201a29 65%);transform:scale(.95)}
.training-pill{height:40px;padding:7px 10px;gap:7px;border-radius:11px;background:#29202ff2;border-color:#704858}.training-pill>span{font-size:20px}.training-pill strong{font-size:13px}.training-pill>b{font-size:18px}.training-pill .pill-progress{bottom:0;height:2px}.training-pill:not(.running)>b{font:700 11px Inter,system-ui,sans-serif;padding:4px 6px;background:#e8416822;border:1px solid #b83c5966;border-radius:6px}
.ongoing-activities{position:static;display:flex;gap:6px;width:100%;margin:0}.ongoing-activities:empty{display:none}.ongoing-card{flex:1;min-width:0;height:38px;padding:6px 8px;gap:5px;grid-template-columns:20px minmax(0,1fr) auto;border-radius:10px;background:#27212e;border-color:#886641}.ongoing-icon svg{width:19px;height:20px}.ongoing-card strong{font-size:12px}.ongoing-card b{font-size:14px}.ongoing-activities:has(.ongoing-card:nth-child(3)) .ongoing-card>span:nth-child(2){display:none}.ongoing-activities:has(.ongoing-card:nth-child(3)) .ongoing-card{grid-template-columns:20px 1fr;text-align:right}
.room:has(.ongoing-card){--room-controls:216px}
.room-player{bottom:calc(var(--room-nav) + var(--room-controls) + 8px + env(safe-area-inset-bottom));height:min(42dvh,calc(100dvh - 170px - var(--room-nav) - var(--room-controls) - env(safe-area-inset-bottom)));width:50%;left:25%;filter:brightness(.88) saturate(.92)}
.mic-upgrade{left:12px;right:auto;top:174px;bottom:auto;width:140px;display:grid;grid-template-columns:20px minmax(0,1fr) 22px;gap:5px;padding:7px;border-color:#87778c;background:#24202be8}.mic-upgrade strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.mic-upgrade small{display:none}.mic-upgrade>span{font-size:21px}.mic-upgrade b{font-size:17px;padding:2px 4px}.hud-trophy{display:flex;align-items:center;gap:3px;padding:0;color:#ffd77d;background:none;border:none;font-size:11px;font-weight:800}.hud-trophy svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}.fan-wallet{display:flex;justify-content:center;align-items:center;gap:12px}
.hub-destinations{display:grid;gap:12px;margin-top:20px}.hub-tile{display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:center;gap:13px;border:1px solid #886b8c;border-radius:18px;color:#fff;background:linear-gradient(120deg,#3b273e,#251e30);padding:19px 15px;text-align:left;box-shadow:0 7px 20px #0003}.hub-tile:nth-child(2){border-color:#746cab;background:linear-gradient(120deg,#322a48,#251e30)}.hub-tile:nth-child(3){border-color:#b08a56;background:linear-gradient(120deg,#413329,#251e30)}.hub-icon{display:grid;place-items:center;width:46px;height:46px;background:#ffffff0b;border-radius:13px;color:#ffc7d3}.hub-icon svg{width:28px;height:30px;stroke:currentColor;stroke-width:1.8;fill:none}.hub-tile strong{display:block;font-size:20px}.hub-tile small{display:block;font-size:12px;color:#cdbed6;margin-top:6px}.hub-tile>b{font-size:24px;color:#d3bdde}.hub-back{position:absolute;top:12px;right:14px;background:#3a2d45;border:1px solid #896b98;border-radius:8px;color:#e4d0ee;font-size:12px;padding:7px 9px;z-index:2}.game-page:has(.hub-back)>h1{padding-right:64px}.page-social:has(.hub-back)>h1{font-size:25px}
@media(max-width:360px){body.game-screen nav button{font-size:11px}.scene-controls{left:8px;right:8px}.scene-controls .stat small{font-size:10px}.scene-controls .stats{gap:3px}.mic-upgrade{width:124px}.ongoing-card{padding:6px;gap:4px}.ongoing-card strong{font-size:11px}.hub-tile{padding:15px 12px}}
@media(max-height:650px){.room-sign{top:92px}.room-sign h1{font-size:22px}.room-sign>span{font-size:12px}.mic-upgrade{top:157px}.hub-destinations{margin-top:12px;gap:9px}.hub-tile{padding:14px}.game-page .hub-back{top:8px}}
/* v13: header controls have their own row; stable equipment and battle sections. */
.app[data-view="room"]>header{top:94px;right:12px;gap:7px}.app[data-view="room"]>header .sound-button,.app[data-view="room"]>header .profile{height:34px;min-height:34px;line-height:1;padding:5px 9px;display:grid;place-items:center}.app[data-view="room"]>header .sound-button{width:38px;font-size:19px}.app[data-view="room"]>header .profile{width:34px;font-size:17px}.room-clock{top:140px}.game-page{top:142px}.page-gear .category-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex-wrap:nowrap}.page-gear .category-tabs button{min-width:0;white-space:nowrap;padding:10px 3px;font-size:13px}.battle-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));flex-wrap:nowrap}.battle-tabs button{min-width:0;white-space:nowrap;font-size:12px!important;padding:10px 3px!important}.continue-career{margin-top:12px}.page-battle .event-card h2{font-size:25px}.page-battle .event-card .lesson-caption{font-size:11px}.page-battle .battle-level{font-size:12px}.page-battle .card h3{font-size:17px}
@media(max-height:700px){.game-page{top:136px}.page-gear .category-tabs button,.battle-tabs button{padding:8px 3px!important;font-size:12px!important}.room-clock{top:134px}.page-battle .event-card h2{font-size:22px}.page-battle .lesson-caption{font-size:10px}.page-battle .pager .secondary{font-size:11px;padding:8px 5px}}
@media(max-width:360px){.battle-tabs button{font-size:10px!important}.page-gear .category-tabs button{font-size:12px}}
/* v14: bounded avatar editor, one category at a time. */
body.avatar-screen{overflow:hidden;overscroll-behavior:none;height:100dvh}.app[data-view="profile"]{height:100dvh;min-height:0;max-width:600px;padding:16px;overflow:hidden;display:flex;flex-direction:column}.app[data-view="profile"]>header,.app[data-view="profile"]>#hud{display:none}.app[data-view="profile"]>#view{flex:1;min-height:0}.game-sheet[data-kind="profile"]{height:min(630px,calc(100dvh - 110px));overflow:hidden;padding:16px}.game-sheet[data-kind="profile"] #sheetbody{height:100%;overflow:hidden;max-height:none;padding:0}.avatar-editor{height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden}.avatar-editor h1{flex-shrink:0;font-size:26px;margin:0 40px 0 0;line-height:1.1}.avatar-editor .character-studio{flex:1;min-height:90px;max-height:200px;height:auto;position:relative;top:auto;margin:0;border-radius:15px;box-shadow:none}.avatar-editor .character-studio canvas{height:100%;width:auto;max-width:100%;object-fit:contain}.avatar-editor #profileform{display:grid;gap:10px;flex-shrink:0}.avatar-editor .name-editor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.avatar-editor .name-editor label{font-size:13px;margin:0}.avatar-editor input{font-size:16px;padding:8px 10px;height:38px}.avatar-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.avatar-categories button{border:1px solid #73617f;background:#2d2538;color:#e9deef;font-size:12px;border-radius:8px;padding:9px 2px;min-width:0}.avatar-categories button.selected{background:#ab2040;color:#fff;border-color:#fc9eb4}.avatar-editor .customizer{display:grid;gap:10px;margin:0;min-height:126px;align-content:start}.avatar-editor .customizer fieldset,.avatar-editor .customizer fieldset:first-child{padding:0;margin:0;border:0;border-radius:0;background:none;min-width:0}.avatar-editor .customizer legend{font-size:13px;margin:0 0 6px;color:#ede3f2}.avatar-editor .custom-options{display:flex;gap:6px;flex-wrap:nowrap}.avatar-editor .customizer fieldset .pill{min-width:0;flex:1;font-size:12px;padding:8px 4px;border-radius:9px;white-space:nowrap}.avatar-editor .swatch{width:32px;height:32px;min-width:0;border-width:2px;flex-shrink:0}.avatar-editor .avatar-save{font-size:15px;padding:11px;height:42px;margin:0;box-shadow:0 3px 0 #8c1028}.judge-requirements{display:grid;gap:7px;margin:13px 0}.judge-requirements span{font-size:13px;color:#d4bccf;line-height:1.4}.judge-requirements .met{color:#a0edc4}.judge-card p{color:#ffd786!important}
@media(max-height:650px){.game-sheet[data-kind="profile"]{padding:12px}.avatar-editor{gap:7px}.avatar-editor h1{font-size:23px}.avatar-editor .character-studio{min-height:60px;max-height:110px}.avatar-editor #profileform{gap:7px}.avatar-editor input{height:34px;padding:6px 9px}.avatar-categories button{padding:7px 2px;font-size:11px}.avatar-editor .customizer{min-height:105px;gap:8px}.avatar-editor .customizer legend{font-size:12px;margin-bottom:4px}.avatar-editor .customizer fieldset .pill{padding:6px 3px;font-size:11px}.avatar-editor .swatch{width:28px;height:28px}.avatar-editor .avatar-save{height:37px;padding:8px}.app[data-view="profile"]{padding:12px}}
@media(max-width:360px){.avatar-categories button{font-size:11px}.avatar-editor .custom-options{gap:4px}.avatar-editor .customizer fieldset .pill{font-size:11px;padding-left:2px;padding-right:2px}}
@media(max-height:500px){.game-sheet[data-kind="profile"]{bottom:12px;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}.avatar-editor .character-studio{display:none}.avatar-editor h1{font-size:20px}.avatar-editor .customizer{min-height:96px}.avatar-editor #profileform{gap:6px}.avatar-editor{gap:6px}}
/* v15: visible completed battles, independent activities, direct QG tabs. */
.menu-selector button.completed,.menu-selector button.completed.selected{background:#183e31;color:#b8f6d5;border-color:#59c996;box-shadow:inset 0 0 0 1px #59c99633}.menu-selector button.completed.selected{outline:2px solid #9cecc4;outline-offset:1px}.completed-check{font-weight:900;margin-right:3px;color:#82e4b3}
:root{--room-controls:190px}.room:has(.ongoing-card){--room-controls:236px}.room-activity-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.activity-status{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:5px;min-width:0;height:60px;padding:8px;border-radius:12px;border:1px solid #79617d;background:#25202fed;color:#fff;text-align:left;overflow:hidden;backdrop-filter:blur(9px)}.activity-status .activity-icon{font-size:22px;color:#dfb5fb}.activity-status small{display:block;font-size:9px;letter-spacing:.6px;color:#d3b9df;margin-bottom:5px}.activity-status strong{display:block;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-status>b{font-size:14px;font-weight:800;color:#e6d0f2}.activity-status.running{border-color:#b186c7}.upgrade-status .activity-icon,.upgrade-status>b{color:#ff718f}.upgrade-status.running{border-color:#c45370}.afk-status.running>b{color:#8ee4b7;font-size:10px;background:#204633;padding:4px;border-radius:5px}.activity-status .pill-progress{height:3px}
.stat-switcher{display:flex;align-items:center;gap:8px;padding-right:36px}.game-sheet .stat-switcher h1{flex:1;min-width:0;margin:0;font-size:24px;line-height:1.15;text-align:center}.stat-arrow{flex-shrink:0;width:30px;height:32px;border:1px solid #82648f;border-radius:9px;background:#403048;color:#fff;font-size:25px;line-height:1}.stat-position{display:flex;justify-content:center;gap:6px;margin:8px 36px 12px 0}.stat-position i{height:5px;width:5px;border-radius:50%;background:#6d5c77}.stat-position i.active{width:18px;border-radius:4px;background:var(--dot)}.game-sheet[data-kind="stat"] #sheetbody{touch-action:pan-y}
.page-hub .hub-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px}.page-hub .hub-tabs button{min-width:0}.page-hub .eyebrow{font-size:9px;letter-spacing:.8px}.page-hub .artist-pager{margin:10px 0}.page-hub .card{margin:10px 0;padding:14px}.page-hub .card h2{font-size:24px}.page-hub .card p{font-size:12px;line-height:1.4}.page-hub .chat-message{padding:11px;font-size:13px}.page-hub .primary{font-size:14px;padding:12px}.page-hub .note,.page-hub .lesson-caption{font-size:11px;line-height:1.4}.page-hub .pager .secondary{font-size:12px;padding:9px 7px}.page-hub .sponsor-card{padding:12px}.page-hub .sponsor-card h3{font-size:16px}
@media(max-width:360px){.activity-status{gap:4px;padding:7px;grid-template-columns:14px minmax(0,1fr) auto}.activity-status strong{font-size:10px}.activity-status small{font-size:8px}.activity-status>b{font-size:12px}.activity-status .activity-icon{font-size:18px}.game-sheet .stat-switcher h1{font-size:21px}}
@media(max-height:650px){.page-hub .hub-tabs{margin-bottom:8px}.page-hub .card{padding:11px;margin:8px 0}.page-hub .chat-message{padding:8px}.page-hub .artist-pager{margin:7px 0}.page-hub .card h2{font-size:22px}.page-hub .note{margin:7px 0}}

/* Horizontal gestures switch the displayed item without scrolling the page. */
.game-page,.avatar-editor,#sheetbody{touch-action:pan-y}.game-page .cosmetic-preview~.price{font-size:16px;color:#d5c4f7}
/* v17: progressive collectible frames, compact pickers and main-page gestures. */
.contact-picker,.event-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:12px 0}.contact-picker select,.event-picker select{min-width:0;width:100%;height:42px;background:#33263e;color:#fff;border:1px solid #967baa;border-radius:11px;padding:8px 10px;font:600 14px Inter,system-ui,sans-serif}.contact-picker>span,.event-picker>span{font-size:12px;color:#d5c2df;font-weight:700}.qualifier-badge{display:inline-block;background:#47371f;color:#ffe297;border:1px solid #c79c52;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:800;letter-spacing:.5px;margin-bottom:8px}.frame-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:12px 0}.frame-choice{height:43px;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;border:2px solid var(--frame-color);border-radius:11px;background:#25202f;color:#fff;font-size:13px}.frame-choice i{font-style:normal;font-size:11px;color:var(--frame-color)}.frame-choice.locked-frame{opacity:.6}.frame-choice.selected{background:color-mix(in srgb,var(--frame-color),#21192d 80%);outline:2px solid #fff;outline-offset:1px;opacity:1}.avatar-wrap.frame-double{outline:2px solid var(--skin);outline-offset:3px;box-shadow:0 0 12px color-mix(in srgb,var(--skin),transparent 60%)}.avatar-wrap.frame-shine{border-color:var(--skin);box-shadow:0 0 0 2px #fff6,0 0 14px var(--skin),inset 0 0 8px #fff4}.avatar-wrap.frame-neon{border-color:var(--skin);box-shadow:3px 0 9px var(--skin),-3px 0 9px var(--skin-second),0 0 0 2px var(--skin-second)}.avatar-wrap.frame-prism{border-color:transparent;background:linear-gradient(135deg,#77e9ff,#bcb5ff,#ff7ada,#ffe18c) border-box;box-shadow:0 0 16px var(--skin);outline:2px solid #e4dfff;outline-offset:2px}.cosmetic-preview{padding:8px}#view[data-swipe="1"]>section{animation:pageFromRight .18s ease-out}#view[data-swipe="-1"]>section{animation:pageFromLeft .18s ease-out}.room,.game-page,#nav{touch-action:pan-y}@keyframes pageFromRight{from{opacity:.65;translate:20px 0}to{opacity:1;translate:0 0}}@keyframes pageFromLeft{from{opacity:.65;translate:-20px 0}to{opacity:1;translate:0 0}}
@media(max-height:650px){.contact-picker,.event-picker{margin:8px 0}.contact-picker select,.event-picker select{height:36px}.frame-picker{margin:8px 0;gap:6px}.frame-choice{height:37px}.page-battle .event-card p{font-size:12px;margin:7px 0}.qualifier-badge{font-size:10px;margin-bottom:5px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){#view[data-swipe]>section{animation:none}}
/* v18: horizontal chips, owned equipment and complete qualification results. */
.chip-strip{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;padding:3px 2px 5px;margin:10px 0;position:relative}.chip-strip::-webkit-scrollbar{display:none}.chip-strip button{flex:0 0 auto;min-height:38px;max-width:160px;white-space:nowrap;border:1px solid #907d9c;border-radius:10px;padding:8px 12px;background:#302637;color:#efe7f5;font-size:14px}.chip-strip button.selected{background:#b41f43;border:2px solid #ffafc4;color:#fff;padding:7px 11px;box-shadow:0 0 0 1px #f64e7988}.page-hub .menu-selector:has([data-action="select-work"]){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.page-hub .menu-selector [data-action="select-work"]{min-width:0;padding:10px 2px;font-size:14px}.menu-selector button.completed,.menu-selector button.completed.selected{background:#183e31;color:#b8f6d5;border-color:#59c996}.result-filters{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px!important;margin-bottom:10px}.result-filters button{min-width:0;font-size:12px!important;padding:8px 3px!important}.page-battle .result-card{margin:10px 0;padding:13px}.page-battle .result-card h2{font-size:23px;margin:7px 0}.result-rank{display:flex;align-items:center;gap:12px;margin:8px 0}.result-rank>strong{font:800 34px 'Barlow Condensed',Impact,sans-serif}.result-rank small{font-size:18px;color:#d3bfda}.result-rank>span{font-size:13px}.result-rank.qualified{color:#8ce7b7}.result-rank.not-qualified{color:#ff9bb0}.result-ranking{width:100%;border-collapse:collapse;table-layout:fixed}.result-ranking caption{font-size:11px;text-align:left;color:#cbb5d5;margin-bottom:5px}.result-ranking td,.result-ranking th{font-size:12px;text-align:left;padding:6px 5px;border-bottom:1px solid #77608144}.result-ranking td:first-child{width:30px}.result-ranking td:last-child{width:48px;text-align:right;color:#d2c3dc}.result-ranking th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.result-ranking .selected-row th{color:#9debc0}.result-ranking .player-row{background:#f63f692a}.result-ranking .player-row th{font-weight:800;color:#fff}.ranking-pager{align-items:center;margin-top:8px}.ranking-pager>span{font-size:11px;color:#d4c2de}.ranking-pager .secondary,.result-pager .secondary{font-size:12px!important;padding:8px 6px!important}.result-pager{margin-top:8px}
@media(max-height:650px){.chip-strip{margin:7px 0;gap:6px}.chip-strip button{min-height:34px;padding:6px 10px;font-size:13px}.chip-strip button.selected{padding:5px 9px}.page-battle .result-card{padding:10px;margin:7px 0}.page-battle .result-card h2{font-size:21px}.result-ranking td,.result-ranking th{padding:4px 5px}.result-rank{margin:6px 0}.result-filters{margin-bottom:7px}}
.page-gear .owned-equipment{border-color:#59bd90}.page-gear .owned-equipment>.eyebrow{color:#a2e9c4}

/* v19: visible tiers and compact cards with actions kept above navigation. */
.page-gear .menu-selector:has([data-action="select-equipment"]){grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.menu-selector [data-action="select-equipment"]{min-width:0;padding:8px 2px;font-size:13px}.item-tier{display:block;font-size:11px;margin-top:4px;color:#d3c3e1}.menu-selector .selected .item-tier{color:#fff}.equipment-card .row h2{min-width:0;font-size:24px}.equipment-card .price{flex-shrink:0;font-size:23px}
.npc-portrait{display:block;flex-shrink:0;width:72px;height:72px;object-fit:cover;border-radius:17px;border:2px solid #9e719e;background:#302238}.npc-fallback{overflow:hidden}.npc-fallback canvas{width:100%;height:100%}.artist-identity{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}.artist-identity>div{min-width:0}.page-hub .artist-identity h2{margin:0 0 4px;font-size:24px;overflow-wrap:anywhere}.page-hub .artist-identity p{margin:0 0 6px}.artist-identity small{display:block;font-size:10px;color:#cebbd6;margin-top:4px}.friendship-meter{height:5px;background:#49364d;border-radius:8px;overflow:hidden}.friendship-meter i{display:block;height:100%;background:#b38aec;border-radius:8px}.page-hub .social-card{padding:13px;margin:8px 0}.social-card .chat-message{margin:10px 0;padding:9px;font-size:12px;line-height:1.35}.social-card .lesson-caption{margin:7px 0}.social-card .friendly-button{width:100%;min-height:36px;padding:8px;font-size:12px}.page-hub .hub-tabs{margin-bottom:10px}.page-hub .social-card .primary{min-height:42px;padding:10px;font-size:14px}.page-battle .event-card{padding:13px;margin:10px 0}.event-card>.row{align-items:flex-start}.event-card .row h2{min-width:0;flex:1;line-height:1.08;margin:0;font-size:23px!important}.event-card .tag{flex-shrink:0;font-size:11px;padding:6px}.event-card>p{font-size:13px;line-height:1.4;margin:10px 0}.event-card .primary{font-size:15px;padding:12px;min-height:44px}.event-card .qualifier-badge{font-size:10px;margin-bottom:9px}.event-card .lesson-caption{margin:8px 0 0;font-size:11px!important}.rival-name{display:flex;gap:9px;align-items:center;min-width:0}.event-rival .npc-portrait{width:42px;height:42px;border-radius:10px}.rival-name h3{margin:0;min-width:0;overflow-wrap:anywhere}.page-battle .event-card~.pager{margin:8px 0}.page-battle .event-card~.pager .secondary{font-size:12px;padding:9px 6px;min-height:36px}
@media(max-height:700px){.page-hub .social-card{padding:10px}.artist-identity{grid-template-columns:58px minmax(0,1fr);gap:10px}.social-card .npc-portrait{width:58px;height:58px}.page-hub .artist-identity h2{font-size:22px}.social-card .chat-message{margin:7px 0;padding:7px}.page-hub .social-card .primary{padding:9px;min-height:39px}.page-hub .social-card .lesson-caption{font-size:10px;margin:5px 0}.page-battle .event-card{padding:11px;margin:8px 0}.event-card>p{margin:8px 0;font-size:12px}.event-card .primary{padding:10px;font-size:14px}.event-card .row h2{font-size:21px!important}.page-battle .event-card~.pager .secondary{padding:8px 4px;font-size:11px}}

.duel .npc-portrait{width:82px;height:82px;margin:auto;border-radius:50%;border:3px solid #b88ade}.duel>div{min-width:0}.duel h3{overflow-wrap:anywhere}
.social-card .primary{margin-top:8px}.page-hub:has(.social-card)>h1,.page-battle:has(.event-card)>h1{margin-bottom:12px}.page-hub .social-card .chat-message{overflow-wrap:anywhere}.page-hub .social-card .lesson-caption{white-space:normal}
@media(max-height:650px){.page-hub:has(.social-card)>h1,.page-battle:has(.event-card)>h1{font-size:29px;margin:2px 0 8px}.page-hub:has(.social-card) .hub-tabs{margin-bottom:6px}.page-hub .social-card .artist-identity{grid-template-columns:50px minmax(0,1fr)}.page-hub .social-card .npc-portrait{width:50px;height:50px}.page-hub .social-card .chat-message{font-size:11px;margin:6px 0}.page-hub .social-card .primary{margin-top:6px}.page-hub .social-card .friendly-button{min-height:34px}.page-battle .event-card>p{margin:6px 0;line-height:1.3}.page-battle .event-card .qualifier-badge{margin-bottom:4px}.page-battle .event-card .primary{margin-top:8px}.page-battle .event-card~.pager{margin-top:6px}}
.opponent .npc-portrait{width:48px;height:48px;border-radius:14px}
/* Beatboxer portraits use the same canvas language as the player avatar. */
.npc-fallback{display:block;overflow:hidden;background:#302238!important;border-color:#8f6a9d!important}.npc-fallback canvas{display:block;width:100%;height:100%}.npc-portrait{image-rendering:auto}

.discord-opponents button.completed{background:#183e31;color:#b8f6d5;border-color:#59c996}.discord-opponents button.completed.selected{outline:2px solid #b8f6d5;outline-offset:0}.page-hub .menu-selector [data-action="select-work"]{font-size:11px;white-space:normal;line-height:1.4}
/* Reward feedback stays outside the game layout and never intercepts gestures. */
#reward-layer{position:fixed;inset:0;width:100vw;height:100dvh;margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none;z-index:10000;color:#fff}
#reward-layer::backdrop{background:none;pointer-events:none}
.reward-particle{position:absolute;width:23px;height:23px;display:grid;place-items:center;animation:reward-flight .8s cubic-bezier(.3,.05,.65,1) both;filter:drop-shadow(0 0 7px currentColor)}
.reward-particle svg{width:100%;height:100%}.reward-particle.xp{color:#ff749b;font-size:25px}
.floating-reward{position:absolute;font-size:22px;line-height:1;font-weight:900;text-shadow:0 2px 6px #000;white-space:nowrap;animation:reward-rise 1.3s ease-out both}
@keyframes reward-flight{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}12%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}85%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.5);opacity:0}}
@keyframes reward-rise{0%{transform:translate(-50%,-30%) scale(.65);opacity:0}18%{opacity:1;transform:translate(-50%,-100%) scale(1.1)}70%{opacity:1}100%{transform:translate(-50%,-230%) scale(1);opacity:0}}
.notification-button{position:relative;color:#ffc857!important}.notification-button svg{width:21px;height:21px}.notification-button[hidden]{display:none!important}.notice-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:1px 4px;border-radius:10px;background:#f02d48;color:white;border:1px solid #ff8c9e;font:800 11px/14px Inter,system-ui}
.game-sheet[data-kind="notifications"]{padding:20px 16px;max-height:calc(100dvh - 115px)}.game-sheet[data-kind="notifications"] #sheetbody{overflow:hidden}.game-sheet[data-kind="notifications"] h1{font-size:26px;margin:0 40px 16px 0}
.notice-reward,.notice-list button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border-radius:14px;padding:13px;background:#302337;border:1px solid #8569a9;color:#fff;margin-bottom:9px}.notice-reward{border-color:#c095ed;background:#45265f}.notice-reward svg{width:32px;height:32px;flex-shrink:0}.notice-list b,.notice-reward b{display:block;font-size:14px}.notice-list small,.notice-reward small{display:block;font-size:12px;color:#c8becd;margin-top:4px}.notice-check{color:#5cddb0;font-size:22px}.game-sheet[data-kind="notifications"] .pager{margin:10px 0 0}.box-wallet{position:relative}.box-wallet.has-reward::after{content:'';position:absolute;width:9px;height:9px;right:4px;top:4px;background:#ffc857;border-radius:50%;box-shadow:0 0 8px #ffc857}
@media(prefers-reduced-motion:reduce){.reward-particle{display:none}.floating-reward{animation:none;transform:translate(-50%,-120%)} }
/* A quiet red interface: colour carries state, not decoration. */
.app button,.game-sheet button,dialog button{box-shadow:none!important;text-shadow:none!important;background-image:none!important;border-radius:10px;transition:background-color .15s,transform .15s}
.app button:active,.game-sheet button:active{transform:scale(.98)}
.primary,.app .primary,.game-sheet .primary,dialog .primary{background:#c72d40!important;border:1px solid #c72d40!important;color:#fff;box-shadow:none!important}
.primary:disabled{background:#55252e!important;border-color:#55252e!important;color:#b9a1a7}
.secondary,.category-tabs button,.menu-selector button,.chip-strip button,.custom-options .pill{background:#24232b!important;border-color:#51474f!important;color:#e6e1e4}
.category-tabs button.selected,.menu-selector button.selected,.chip-strip button.selected,.custom-options .pill.selected{background:#a92d3f!important;border-color:#d25565!important;color:#fff}
.menu-selector button.completed,.chip-strip button.completed{background:#21382f!important;border-color:#497b65!important;color:#a6d6bf}
.hud .identity,.hud .wallet,.fan-wallet,.card,.activity-status,.scene-controls .stats,.stat,.character-studio{box-shadow:none!important;background-image:none!important}
.hud .identity{background:#19181ee8!important;border-color:#59414a!important}.hud .wallet,.fan-wallet{background:#201e25e8!important}.cash-wallet{border-color:#8d7549!important}.box-wallet{border-color:#735c90!important}
.stat{background:#22212ae8!important;border:1px solid #5a505b!important;border-top:3px solid var(--c)!important;border-radius:12px!important}.stat-symbol{background:none!important;box-shadow:none!important;font-size:25px!important}.stat b{text-shadow:none!important}.stat small{font-size:12px!important}.stat .bar{height:4px!important}
.card{background:#24212ae8!important;border-color:#635561!important;border-radius:14px!important}.ongoing-card,.activity-status{background:#26222bea!important;border-color:#61515c!important}.activity-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
#nav{background:#18171df2!important;border-color:#43353d!important}#nav button{background:#24212b!important;border-color:#51434d!important;border-radius:12px!important}#nav button.active{background:#a72a3b!important;border-color:#d75a6b!important;color:#fff!important}#nav button small{display:block;font-size:10px;font-weight:500;color:#b7a8af}.nav-locked{opacity:.5}
.ambient-led,.studio-glow{display:none!important}.reward-glow,.reward-pop{animation:none!important}.music-particles{opacity:.3}.avatar-wrap{box-shadow:none!important}.frame-neon,.frame-prism{box-shadow:none!important}
.battle-tabs{grid-template-columns:repeat(auto-fit,minmax(65px,1fr))!important}.game-sheet{background:#25212b!important;border-color:#75616f!important;box-shadow:0 12px 40px #0005!important}
.tutorial-card{position:relative;background:#242027f2;border:1px solid #75636d;border-radius:14px;padding:15px;text-align:left;box-shadow:0 8px 20px #0003}.tutorial-card h2{font-size:25px;margin:10px 0 8px;line-height:1.05}.tutorial-card p{font-size:14px;line-height:1.45;color:#ded4db;margin:0 0 12px}.tutorial-card .primary{width:100%;padding:11px;font-size:15px}.tutorial-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#c5b7bf;letter-spacing:1px}.tutorial-meta button{font-size:12px;letter-spacing:0;padding:4px 8px;color:#d9c9d0;background:#343039;border:1px solid #645560}
#tutorial-slot{position:absolute;z-index:8;left:14px;right:14px;top:150px}.tutorial-active .room-sign,.tutorial-active .room-clock{display:none}.tutorial-active .scene-controls{bottom:16px!important}.tutorial-active .activity-status{display:none}.tutorial-active .room-player{transform:translateX(-50%) scale(.86)!important;transform-origin:bottom center}.tutorial-active .room-player .game-character{filter:none!important}.tutorial-active .room{min-height:100dvh}
.beginner-game .ongoing-activities:empty{display:none}.beginner-game .upgrade-status:has(.pill-hint){display:none}.tutorial-replay{width:100%;margin-top:12px;padding:12px;font-size:14px}.creation-lore{font-size:13px;line-height:1.4;color:#c6b8c0;margin:0 0 8px}.avatar-editor:has(.creation-lore) .character-studio{max-height:26dvh!important}
@media(max-height:700px){#tutorial-slot{top:140px}.tutorial-card{padding:11px}.tutorial-card h2{font-size:21px;margin:7px 0}.tutorial-card p{font-size:12px;line-height:1.3;margin-bottom:9px}.tutorial-card .primary{padding:9px}.tutorial-active .stat-symbol{display:none}.tutorial-active .stat{padding:8px 3px!important}}
.stat-symbol svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tutorial-active .cash-wallet,.tutorial-active .box-wallet,.tutorial-active .fan-wallet{visibility:hidden}.tutorial-active #notifications{display:none!important}
/* Level hints have their own row, outside the icon and title. */
body.game-screen #nav button{display:grid;grid-template-rows:25px 16px 11px;align-content:center;justify-items:center;gap:2px;padding:7px 2px;min-height:70px;line-height:1.1}
#nav .nav-icon{display:grid;place-items:center;position:static!important;width:26px!important;height:25px!important;background:none!important;padding:0!important}#nav .nav-icon svg{width:25px;height:25px}#nav .nav-label{font-size:12px;line-height:16px}#nav .nav-level{position:static;font-size:10px;line-height:11px;margin:0;min-height:11px;color:#c4b6bf}.nav-locked{opacity:.7!important}
.game-sheet[data-kind="stat"],.game-sheet[data-kind="shop"]{padding:18px 15px 14px;max-height:calc(100dvh - 100px);border-color:#8d7886!important}.game-sheet[data-kind="stat"] #sheetbody,.game-sheet[data-kind="shop"] #sheetbody{overflow:hidden;padding:0;max-height:none}
.readable-stat .stat-switcher{padding-right:42px;margin-bottom:16px;gap:9px}.readable-stat .stat-switcher h1{font-size:26px!important;text-transform:none;line-height:1.2;color:var(--stat-color,#fff);font-family:Inter,system-ui;font-weight:800}.readable-stat .stat-arrow{width:32px;height:35px;font-size:25px;background:#343039;color:#eee;border-color:#6a5964}
.readable-stat .category-tabs,.readable-shop .category-tabs{margin:12px 0 16px}.readable-stat .category-tabs button,.readable-shop .category-tabs button{font-size:14px!important;padding:11px 5px!important}
.stat-levels{display:flex;justify-content:center;align-items:center;gap:26px;padding:8px 0 18px}.stat-levels>div{text-align:center;min-width:95px}.stat-levels small{display:block;font-size:12px;color:#c4b9c2;margin-bottom:7px}.stat-levels b{font:800 43px/1 Inter,system-ui}.stat-levels>span{font-size:30px;color:var(--stat-color)}
.training-facts{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:12px 0;border-top:1px solid #6f5f684d;color:#cfc2cb}.training-facts b{color:#fff;font-size:16px;margin-left:5px}.readable-stat .primary{font-size:16px!important;padding:14px!important;margin:4px 0 13px;min-height:48px}
.queue-summary{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#302b35;border:1px solid #6f5e6a;color:#fff;padding:12px;border-radius:12px!important;text-align:left}.queue-summary span{font-size:13px;font-weight:700}.queue-summary small{display:block;font-size:12px;color:#c1b5bf;font-weight:400;margin-top:5px}.queue-summary b{font-size:20px;color:var(--stat-color)}
.readable-stat .stat-tools{margin-top:13px}.readable-stat .stat-tools button{font-size:13px;padding:11px 5px}.readable-stat .stat-speed{font-size:12px!important;color:#c5b8c1;text-align:center;margin:12px 0 0!important}.readable-stat .note{font-size:13px!important;line-height:1.4}.readable-stat .queue-entry{font-size:13px;padding:10px 0}.readable-stat .queue-entry button{min-width:34px;min-height:34px}.readable-stat .compact-session{font-size:14px}.readable-stat .cancel-all{font-size:14px;padding:12px}
.readable-shop h1{font:800 25px/1.2 Inter,system-ui;margin:0 40px 16px 0!important}.shop-wallet{display:flex;align-items:center;gap:11px}.shop-wallet svg{width:32px;height:32px}.shop-wallet strong{font-size:34px;color:#d2b4fa}.shop-wallet>span{font-size:14px;color:#cbbcd6}.shop-explanation{font-size:14px!important;line-height:1.4;margin:12px 0 14px!important;color:#e0d4df}
.readable-shop .boost-grid{gap:10px;margin:0 0 14px}.readable-shop .boost-card{padding:17px 8px!important;min-height:120px;opacity:1!important;background:#332b3c!important;border:1px solid #9d85b8!important;color:#f5ecff}.readable-shop .boost-card strong{font-size:25px;color:#fff}.readable-shop .boost-card span{display:flex;justify-content:center;align-items:center;gap:5px;font-size:13px;margin-top:12px;color:#dbc5f5}.readable-shop .boost-card svg{width:19px;height:19px}.readable-shop .boost-card small{display:block;font-size:12px;margin-top:10px;color:#c9b6db}.readable-shop .boost-card:disabled{background:#2c2731!important;border-color:#66546f!important;color:#e4d7ed}
.shop-queue{display:flex;justify-content:space-between;font-size:13px;color:#d2c5d3;margin:10px 0 15px}.shop-queue b{font-size:16px;color:#fff}.shop-milestone{display:flex;align-items:center;gap:9px;padding:13px;background:#392c46;border:1px solid #9a80b5;border-radius:12px}.shop-milestone>svg{width:25px;height:25px;flex-shrink:0}.shop-milestone>div{flex:1;min-width:0}.shop-milestone b{display:block;font-size:14px}.shop-milestone span{display:block;font-size:13px;color:#ddc8f4;margin-top:5px}.shop-milestone button{font-size:12px;padding:10px 8px}.shop-caption{font-size:12px!important;line-height:1.4;color:#bdb0c2;margin:14px 0 0!important}.readable-shop .test-packs{margin:16px 0}.readable-shop .test-packs small{font-size:12px}
@media(max-height:650px){.game-sheet[data-kind="stat"],.game-sheet[data-kind="shop"]{padding-top:12px}.readable-stat .stat-switcher{margin-bottom:8px}.stat-levels{padding:4px 0 12px}.stat-levels b{font-size:34px}.readable-stat .category-tabs,.readable-shop .category-tabs{margin:8px 0 10px}.readable-shop .boost-card{min-height:100px;padding:12px 6px!important}.readable-shop .shop-explanation{font-size:13px!important}}

/* Compact controls, a stacked claim card, and tab-by-tab introduction. */
body.game-screen #nav button{grid-template-rows:25px 16px;gap:5px;min-height:64px}
.readable-shop .shop-milestone{display:grid;grid-template-columns:25px minmax(0,1fr);gap:8px 10px;align-items:center;padding:12px}
.readable-shop .shop-milestone>div{min-width:0}
.readable-shop .shop-milestone b,.readable-shop .shop-milestone span{overflow-wrap:normal;line-height:1.35}
.readable-shop .shop-milestone>.primary{grid-column:1/-1;width:100%;min-width:0;margin:5px 0 0;padding:11px;font-size:14px}
.app>header{align-items:center}
.app>header #sound,.app>header #help,.app>header #notifications{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;min-width:36px;padding:0;line-height:1;border-radius:10px;box-sizing:border-box}
.app>header #sound svg,.app>header #notifications svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app[data-view="room"]>header{display:flex;justify-content:center;align-items:center;gap:8px;top:100px;right:12px;padding:0}
.tutorial-tab-preview{display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:700;margin-top:12px}
.tutorial-tab-preview svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.tutorial-tab-preview+h2{font-size:22px}
@media(max-height:650px){.readable-shop .shop-wallet strong{font-size:28px}.readable-shop .boost-card{min-height:90px;padding:9px 5px!important}.readable-shop .shop-milestone{padding:9px}.readable-shop .shop-caption{margin-top:8px!important}.tutorial-card p{font-size:13px}}

/* Readable compact balances and a soft night lamp, without a window overlay. */
.room-clock,.window-night{display:none!important}
.hud .wallet{min-width:0!important;gap:3px!important;padding:7px 4px!important;overflow:hidden}
.hud .wallet strong{font-size:13px!important;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:0}
.hud .wallet svg{width:18px!important;height:18px!important;flex:0 0 18px}
.hud .box-wallet>span{font-size:12px;flex:0 0 auto}
.room.night .room-background{filter:brightness(.58) saturate(.8)!important}
.desk-lamp-light{position:absolute;z-index:1;left:-14%;top:30%;width:65%;height:55%;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 43% 36%,#ffcc7950 0,#ffb65a20 29%,#ffc36d09 48%,transparent 68%);mix-blend-mode:screen}
.room.night .desk-lamp-light,.room.dawn .desk-lamp-light{opacity:1}
/* Queue: the current point and the waiting list have separate visual hierarchy. */
.readable-queue .stat-switcher{margin-bottom:10px}
.queue-current{background:#302a34;border:1px solid var(--c);border-radius:12px;padding:12px}
.queue-current small{display:block;font-size:10px;color:var(--c);letter-spacing:1px;margin-bottom:5px}
.queue-current b{font-size:14px}.queue-current strong{font-size:20px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.queue-current .sessionbar{margin:11px 0;height:5px}.queue-current button{width:100%;font-size:12px;padding:8px}
.queue-list-title{display:flex;justify-content:space-between;font-size:12px;margin:14px 0 5px}.queue-list-title span{color:#c5b8c5}
.queue-readable-row{display:grid;grid-template-columns:24px minmax(0,1fr) 34px;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #ffffff1a}
.queue-number{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#ffffff0c;font-size:11px;color:#cdc0ce}
.queue-readable-row b{display:block;font-size:13px;color:var(--c)}.queue-readable-row small{display:block;color:#d3c6d4;font-size:12px;margin-top:3px}
.queue-readable-row button{width:34px;height:34px;padding:0;font-size:20px!important}
.readable-queue .queue-pagination{margin:10px 0}.readable-queue .queue-pagination button{font-size:12px;padding:8px!important}
.queue-total{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #665768;margin-top:11px;padding-top:11px;font-size:12px}.queue-total b{font-size:20px;white-space:nowrap;color:#fff}
.readable-queue .cancel-all{width:100%;font-size:13px!important;margin-top:11px!important;padding:10px!important}
.readable-queue .queue-footnote{font-size:11px!important;text-align:center;color:#c7b9c9;margin:10px 0 0!important}.queue-empty{font-size:13px;color:#d5c4d8;padding:10px 0}
/* Jam profile: portrait, relationship, reward chips and action. */
.page-hub .social-card .artist-identity,.page-social .artist-identity{grid-template-columns:60px minmax(0,1fr);gap:12px}
.social-card .npc-portrait{width:60px!important;height:60px!important;border-radius:12px}
.page-hub .social-card h2{font:800 23px/1.15 Inter,system-ui!important}.social-card .artist-identity p{font-size:12px!important;color:#e2d5e7!important;margin:4px 0!important}
.social-card .artist-identity small{font-size:12px;color:#d9cce0}.social-card .friendship-meter{height:5px;margin-top:8px}
.social-card .jam-intro{font-size:13px!important;margin:14px 0!important;color:#ddd0e2!important}
.jam-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:12px 0}.jam-rewards span{padding:8px 4px;text-align:center;background:#36303f;border-radius:8px;font-size:11px;color:#ded0e6}.jam-rewards b{color:#fff}
.social-card .primary{margin-top:10px;font-size:14px!important;min-height:44px}
.jam-unlock{font-size:12px;text-align:center;line-height:1.4;color:#d5c9da;border-top:1px solid #67556e;margin-top:13px;padding-top:11px}.social-card .chat-message{font-size:13px!important;line-height:1.4;margin:12px 0;padding:10px}
/* Guided visits display the actual pages and their controls. */
#tutorial-guide{position:absolute;left:12px;right:12px;bottom:calc(var(--room-nav) + env(safe-area-inset-bottom) + 8px);z-index:9}
#tutorial-guide .tutorial-card{padding:10px 12px;background:#29252efc;border-color:#b85e6c}
#tutorial-guide .tutorial-tab-preview{display:none}#tutorial-guide .tutorial-meta{font-size:10px}#tutorial-guide .tutorial-card h2{font:800 15px/1.2 Inter,system-ui;margin:6px 0}
#tutorial-guide .tutorial-card p{font-size:12px;line-height:1.35;margin:0 0 8px}#tutorial-guide .tutorial-card .primary{font-size:12px;padding:8px;min-height:34px}
.tutorial-tour .cash-wallet,.tutorial-tour .box-wallet,.tutorial-tour .fan-wallet{visibility:visible}
.tutorial-tour .game-page{bottom:calc(var(--room-nav) + env(safe-area-inset-bottom) + 182px);padding:10px 12px}
.tutorial-tour .game-page .category-tabs{margin:5px 0}.tutorial-tour .game-page .card{padding:9px;margin:5px 0}
.tutorial-tour .game-page .card p{font-size:11px;margin:4px 0}.tutorial-tour .game-page .card h2{font-size:20px}.tutorial-tour .game-page .card .primary{padding:8px;font-size:12px}
.tutorial-tour .game-page .social-card .chat-message,.tutorial-tour .game-page .jam-intro{display:none}
.tutorial-tour .game-page .chip-strip{margin:7px 0}.tutorial-tour .game-page .chip-strip button{padding:7px 9px;font-size:12px}
.tutorial-tour #nav button.active{outline:2px solid #f1a2ad;outline-offset:-3px}
.tutorial-tour .room .scene-controls{bottom:calc(var(--room-nav) + env(safe-area-inset-bottom) + 182px)}
@media(max-height:650px){.queue-current{padding:9px}.queue-readable-row{padding:6px 0}.readable-queue .queue-footnote{margin-top:6px!important}.queue-list-title{margin-top:10px}#tutorial-guide .tutorial-card p{font-size:11px}.tutorial-tour .game-page{bottom:calc(var(--room-nav) + env(safe-area-inset-bottom) + 164px)}.tutorial-tour .game-page .card .note,.tutorial-tour .game-page .lesson-caption{font-size:10px}}

.app[data-view="room"] .hud{grid-template-columns:48px minmax(0,1fr) 70px 76px}
@media(max-width:360px){.app[data-view="room"] .hud{grid-template-columns:42px minmax(0,1fr) 63px 69px}.hud .wallet strong{font-size:12px!important}.hud .wallet svg{width:16px!important;height:16px!important;flex-basis:16px}}

.readable-notices h1{font:800 23px/1.2 Inter,system-ui!important;margin:0 42px 17px 0!important}
.notice-section-label{font-size:10px;letter-spacing:1px;font-weight:700;color:#cfbecf;margin:13px 0 8px}
.readable-notices .notice-reward{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 10px;padding:12px;background:#352b40;border-color:#9c82b7}
.readable-notices .notice-reward svg{width:28px;height:28px}.readable-notices .notice-reward b{font-size:14px;line-height:1.3}.readable-notices .notice-reward small{font-size:12px;line-height:1.3;margin-top:4px;color:#e0cfee}
.notice-reward-action{grid-column:1/-1;padding:8px;background:#5f416e;border-radius:7px;font-size:12px;text-align:center;color:#fff}
.readable-notices .notice-list button{display:grid;grid-template-columns:30px minmax(0,1fr) 15px;gap:10px;min-height:66px;padding:11px;background:#302a35;border-color:#766174;margin-bottom:7px}
.notice-kind-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#ffffff09;color:#e4bac8}.notice-kind-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.notice-text{min-width:0}.readable-notices .notice-list small{font-size:11px;margin:0 0 4px;color:#cbbbcf}.readable-notices .notice-list b{font-size:14px;line-height:1.3;color:#fff;overflow-wrap:anywhere}
.notice-open{font-size:24px;color:#dcb8cd}.readable-notices .pager{margin-top:12px!important;gap:8px}.readable-notices .pager button{font-size:12px;padding:9px;min-height:36px}.readable-notices .pager>span{font-size:12px;white-space:nowrap}.readable-notices .notice-hint{font-size:11px;text-align:center;color:#cbbbcc;margin:12px 0 0}
@media(max-height:650px){.readable-notices .notice-list button{min-height:55px;padding:8px}.readable-notices h1{font-size:21px!important;margin-bottom:12px!important}.notice-section-label{margin-top:10px}}

#nav .nav-icon{position:relative!important}.nav-lock{position:absolute;right:-8px;bottom:-3px;display:grid;place-items:center;width:17px;height:17px;border-radius:5px;background:#5f472b;border:1px solid #d6a85d;color:#ffdc94;font-style:normal}#nav .nav-lock svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
body.game-screen #nav .nav-locked{opacity:1!important;grid-template-rows:25px 16px 10px;gap:2px;background:#302a27!important;border-color:#987348!important;color:#d3c3b1}.nav-locked-label{font-size:9px!important;line-height:10px;color:#e7bd7e!important;font-weight:600!important}
.jam-next{font-size:11px!important;color:#dbc0ed!important;line-height:1.4;margin-top:12px!important}
.celebration-bit{position:fixed;width:5px;height:8px;border-radius:2px;pointer-events:none;animation:celebrateBurst .8s ease-out both}
@keyframes celebrateBurst{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.celebration-bit{display:none}}

/* v32: keep jam actions in normal flow with a visible separation. */
.page-hub .social-card,.page-social .social-card{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.social-card .artist-identity{margin:0;gap:12px}.social-card .artist-identity h2{margin:0;font-size:24px}.social-card .artist-identity p{margin:3px 0}.social-card .chat-message{margin:0;padding:10px 12px;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.social-card .jam-intro,.social-card .jam-next{margin:0;line-height:1.4;font-size:13px}.social-card .jam-rewards{margin:0;gap:6px}.social-card .jam-rewards span{padding:8px 4px;font-size:13px}.social-card .jam-actions{display:flex;flex-direction:column;gap:12px;flex-shrink:0}.social-card .jam-actions button{margin:0;min-height:44px;padding:10px 12px;line-height:1.3;position:static;width:100%}.social-card .jam-actions .primary:disabled{opacity:1;background:#34303d;color:#f0e9f3;border:1px solid #736880}.social-card .jam-unlock{margin:0;padding:6px;font-size:13px}.page-hub,.page-social{padding-bottom:18px}
@media(max-height:740px){.social-card .artist-identity .npc-portrait{width:58px;height:58px}.social-card .jam-intro,.social-card .chat-message{display:none}.page-hub .social-card,.page-social .social-card{gap:8px;padding:12px}.social-card .jam-actions{gap:10px}}

.room.night .room-background{filter:none!important}.room.night .desk-lamp-light{display:none}.room.night .ambient-led{box-shadow:none}

/* Comfortable touch targets without making the panels taller than necessary. */
.stat-tools button,.game-page .menu-selector button,.game-page .chip-strip button{min-height:44px}.page-hub .menu-selector [data-action="select-work"]{font-size:12px}.game-page .category-tabs button{min-height:42px;line-height:1.25;overflow-wrap:anywhere}.game-page .lesson-caption{font-size:14px;line-height:1.4}.social-card .jam-actions button{font-size:14px}.readable-shop .boost-card span{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap}.readable-shop .boost-card small{line-height:1.35}

.avatar-categories{grid-template-columns:repeat(6,minmax(0,1fr))}.avatar-categories button{font-size:12px;padding:8px 2px}.avatar-detail-tabs{display:flex;gap:6px;margin-bottom:8px}.avatar-detail-tabs button{flex:1;min-height:36px;border:1px solid #51474f;background:#24232b;color:#eee;border-radius:9px;font-size:12px}.avatar-detail-tabs .selected{background:#a92d3f;border-color:#d25565}.avatar-editor .custom-options .pill:disabled{opacity:.6;font-size:11px}.avatar-editor .custom-options{flex-wrap:wrap}.avatar-unlock-level{display:flex;align-items:center;justify-content:center;color:white;text-shadow:0 1px 3px #000;font-size:11px}.avatar-editor .customizer fieldset .pill{min-height:32px}

/* Wardrobe: readable choices, with separate unlock conditions. */
.avatar-editor .custom-options.choice-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
.avatar-editor .choice-options .pill{width:100%;min-width:0;flex:none;min-height:54px;height:auto;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;white-space:normal;overflow-wrap:anywhere;font-size:14px!important;line-height:1.2}
.avatar-editor .choice-options .pill span{display:block;max-width:100%}
.avatar-editor .choice-options .pill small{font-size:11px;line-height:1.25;color:#c7bec9;font-weight:400}
.avatar-editor .choice-options .pill:disabled{opacity:1;color:#aaa2ae;background:#211e26!important;border-color:#39323e!important}
.avatar-editor .choice-options .pill.selected small{color:#fff}
.avatar-editor .color-options{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.avatar-editor .color-options .swatch{width:100%;min-width:0;height:32px;flex:none}
.avatar-editor .character-studio{height:clamp(140px,23dvh,210px)!important;min-height:0!important}
.avatar-editor .character-studio canvas{height:100%;max-width:100%}
.avatar-editor .customizer{min-height:0;max-height:31dvh;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.avatar-editor .customizer fieldset{min-width:0;margin:10px 0}
@media(max-width:380px){.avatar-editor .custom-options.choice-options{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-editor .choice-options .pill{font-size:13px!important}.avatar-editor .color-options{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Paged wardrobe, preview remains separate from the saved outfit. */
.avatar-editor .customizer{max-height:none!important;overflow:visible!important}
.avatar-editor .character-studio{position:relative;height:clamp(110px,18dvh,160px)!important}
.wardrobe-preview-note{position:absolute;bottom:6px;left:6px;right:6px;text-align:center;background:#17141ee8;padding:5px;border-radius:6px;font-size:12px;color:#edcf91}
.avatar-editor .choice-options .pill.locked-choice{background:#211e26!important;border-color:#47404d!important;color:#bbb3c0}
.avatar-editor .choice-options .pill.locked-choice.selected{border-color:#e0b756!important;color:#fff}
.wardrobe-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:8px;font-size:12px;text-align:center}
.wardrobe-pager button{min-height:36px;font-size:12px;padding:6px;border:1px solid #51474f;border-radius:8px;background:#24232b;color:#fff}
.avatar-editor .custom-options.choice-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.avatar-editor .choice-options .pill{min-height:48px;padding:6px 4px}

/* Quiet, top-edge notification instead of a glowing overlay on the game. */
#toast{top:calc(10px + env(safe-area-inset-top));bottom:auto!important;left:50%;width:max-content;max-width:min(440px,calc(100% - 24px));transform:translateX(-50%);padding:10px 14px;background:#252329!important;color:#f5f2f4!important;border:1px solid #514a50!important;border-radius:10px!important;box-shadow:none!important;backdrop-filter:none!important;font-size:14px;line-height:1.35;text-align:center;z-index:10000;pointer-events:none;text-shadow:none!important}
#toast.show{transform:translateX(-50%)!important}

#toast.reward-pop.show{animation:none!important}

/* Notices occupy their own strip above the navigation buttons. */
nav{padding-top:34px!important}
#toast{max-width:min(560px,calc(100% - 28px));width:calc(100% - 28px);height:24px;padding:3px 8px!important;background:none!important;border:0!important;border-radius:0!important;font-size:12px!important;line-height:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.avatar-editor .choice-options .pill .wardrobe-thumb{display:block;width:64px;height:56px;object-fit:contain;margin:0 auto;pointer-events:none}
.avatar-editor .choice-options .pill:has(.wardrobe-thumb){gap:2px;padding:4px;min-height:88px}
.avatar-editor .choice-options .pill span{font-weight:600;font-size:12px}
.avatar-editor .choice-options .pill small:empty{display:none}
.avatar-editor .character-studio{height:clamp(90px,15dvh,140px)!important}
.readable-stat .training-facts b,.queue-total b,.lesson-caption b,.shop-milestone b,.artist-identity h2,.jam-progress strong,.card .price{color:#fff;font-weight:800}
.readable-stat .training-facts span,.queue-total span{color:#e1dbe3}
.choice strong,.notice-text b,.lesson-caption strong{font-weight:750;color:#fff}
.game-page .lesson-caption{color:#c9c1cd}

:root{--room-nav:116px}

body.game-screen nav{height:calc(106px + env(safe-area-inset-bottom))!important}

/* Notice anchored beneath the settings/help/bell group. */
:root{--room-nav:86px}
nav{padding-top:7px!important}
body.game-screen nav{height:calc(76px + env(safe-area-inset-bottom))!important}
#toast,#toast.show{transform:none!important;max-width:calc(100% - 24px);height:auto;min-height:24px;max-height:48px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:#242128f5!important;border:1px solid #504650!important;border-radius:7px!important;padding:5px 7px!important;font-size:12px!important;line-height:17px!important;text-align:left}
/* Keep the live preview from being squeezed by the wardrobe form. */
.avatar-editor .character-studio{display:flex!important;flex:0 0 clamp(125px,24dvh,190px)!important;min-height:125px!important;max-height:190px!important;height:clamp(125px,24dvh,190px)!important;align-items:center;justify-content:center}
.avatar-editor .character-studio canvas.creator-body{width:auto!important;height:100%!important;max-height:100%;object-fit:contain}
.avatar-editor .character-studio:has(.wardrobe-preview-note) canvas.creator-body{height:calc(100% - 24px)!important;align-self:flex-start}
.avatar-editor .wardrobe-preview-note{bottom:0;left:0;right:0;padding:4px 6px;line-height:16px;font-size:11px}
.avatar-editor .customizer fieldset .pill{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal;min-width:0}
.avatar-editor .choice-options .pill span,.avatar-editor .choice-options .pill small{max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
.avatar-editor .choice-options .pill:has(.wardrobe-thumb){min-height:90px}
.avatar-editor .customizer fieldset{margin:0!important}
.avatar-editor .customizer{gap:8px!important}
.avatar-editor .avatar-save{font-size:14px!important;white-space:normal}
@media(max-height:650px){.avatar-editor .character-studio{flex-basis:105px!important;min-height:105px!important;height:105px!important}.avatar-editor .choice-options .pill .wardrobe-thumb{height:42px}.avatar-editor .choice-options .pill:has(.wardrobe-thumb){min-height:74px}}

.chip-strip[data-strip="artists"] button:has(.relation-max-badge){display:inline-flex;align-items:center;gap:8px}
.relation-max-badge{display:inline-block;flex-shrink:0;padding:3px 5px;border:1px solid #8bd7b0;border-radius:6px;background:#264d40;color:#baf6d8;font-size:12px;font-weight:800;line-height:1.2}

/* One bounded form scroller, separate from the save footer. */
.game-sheet[data-kind="profile"]{height:min(660px,calc(100dvh - 110px))!important;max-height:calc(100dvh - 110px)!important;padding:16px!important;box-sizing:border-box;overflow:hidden}
.game-sheet[data-kind="profile"] #sheetbody{height:100%!important;max-height:none!important;overflow:hidden!important;padding:0;box-sizing:border-box}
.avatar-editor{height:100%;min-height:0;max-height:none;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.avatar-editor h1{flex:0 0 auto}
.avatar-editor .character-studio{flex:0 0 clamp(150px,27dvh,210px)!important;min-height:150px!important;height:clamp(150px,27dvh,210px)!important;max-height:210px!important}
.avatar-editor #profileform{display:block!important;flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;padding:4px 6px 16px;box-sizing:border-box;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-padding:12px}
.avatar-editor .name-editor{margin-bottom:12px}
.avatar-editor .avatar-categories{margin-bottom:14px}
.avatar-editor .customizer{display:grid;gap:14px!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important}
.avatar-editor .color-options{padding:5px 3px 8px;box-sizing:border-box}
.avatar-editor .avatar-save-footer{flex:0 0 auto;padding:8px 0 5px;border-top:1px solid #57464f;background:#26212d}
.avatar-editor .avatar-save{display:block;width:100%;height:auto!important;min-height:46px;box-sizing:border-box;padding:12px!important;margin:0!important;border-radius:12px;line-height:1.3}
.avatar-editor .customizer fieldset{min-height:min-content}
@media(max-height:650px){.avatar-editor .character-studio{flex-basis:140px!important;min-height:140px!important;height:140px!important;max-height:140px!important}.avatar-editor{gap:7px}.avatar-editor .avatar-save{min-height:44px}}

/* Bilingual choice stays compact in settings and the first character form. */
.language-picker{border:0;padding:0;margin:10px 0 16px;min-width:0}
.language-picker legend{font-size:14px;font-weight:700;margin-bottom:8px;color:#ded5e5}
.language-picker>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.language-picker button{min-height:44px;padding:10px 12px;font-size:16px}
.language-picker button.selected{background:#a82940;border-color:#f08fa3;color:#fff}
:root { --discord-brand: #5865f2; }
.cloud-account,.mobile-support{margin:16px 0;padding:18px;border:1px solid #67516f;border-radius:18px;background:#19171f}
.cloud-account h2,.mobile-support h2{margin:0 0 10px;font-family:inherit;font-size:18px}
.cloud-account p,.mobile-support p{font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.cloud-account button{width:100%;margin-top:8px;min-height:46px}
.cloud-account .discord-connect{background:var(--discord-brand)}
.cloud-status{color:#d9c5ed}
.cloud-choices{display:grid;gap:8px}
.cloud-signout{margin-top:12px!important}
.cloud-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 16px;padding:12px 14px;border:1px solid #67516f;border-radius:16px;background:#19171f}.cloud-banner>div{display:flex;flex-direction:column;gap:3px;flex:1;min-width:180px}.cloud-banner strong{font-size:15px}.cloud-banner span{font-size:12px;color:#cbbbd4}.cloud-banner button{min-height:40px;margin:0}.cloud-banner .install-app{flex-basis:100%}.cloud-banner .install-help{flex-basis:100%;margin:0;font-size:12px}
.cloud-gate{min-height:calc(100dvh - 110px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px 22px;background:linear-gradient(160deg,#25192d 0%,#121117 72%);border-radius:24px}.cloud-gate-logo{width:min(180px,48vw);height:auto;display:block}.cloud-gate-logo span{color:#ff6d91}.cloud-gate h1{margin:18px 0 8px;font-size:32px}.cloud-gate p{max-width:360px;color:#d7c9dd;line-height:1.5}.cloud-gate button{width:min(100%,360px);margin-top:12px;min-height:50px}.cloud-gate .install-app{margin-top:20px}.cloud-gate .install-help{font-size:13px}