/* Fixed design units. Each control owns its dimensions; containers only place it. */
#loading.v2{--button-scale:1;--button-gap:18px;--profile-width:290px;--profile-height:66px;--coin-width:158px;--gear-side:56px;--season-width:300px}
#loading.v2 .launch-header{left:50%;right:auto;transform:translateX(-50%);width:min(1360px,calc(100% - 32px));height:var(--profile-height);gap:14px}
#loading.v2 .launch-header button{flex:0 0 auto;min-width:0;min-height:0}
#loading.v2 .launch-header .player-chip{width:var(--profile-width);height:var(--profile-height)}
#loading.v2 .launch-header .coin-chip{width:var(--coin-width);height:var(--gear-side)}
#loading.v2 .launch-header .gear-chip{width:var(--gear-side);height:var(--gear-side)}
#loading.v2 .content{width:calc(393px * var(--button-scale) + var(--button-gap));max-width:none;top:calc(var(--profile-height) + 34px);bottom:calc(var(--season-width) * .23 + 40px)}
#loading.v2 .logo{flex:1 1 0;min-height:0;max-height:280px;margin:0 auto 12px;object-fit:contain}
#loading.v2 .bottom-dock{width:fit-content;flex:0 0 auto;grid-template-columns:max-content max-content;grid-template-rows:max-content max-content;justify-content:center;align-items:center;justify-items:center;gap:var(--button-gap)}
#loading.v2 .bottom-dock .action{box-sizing:border-box;flex:none;justify-self:center;align-self:center;padding:0;min-width:0;min-height:0;max-width:none;margin:0}
#loading.v2 #guest{min-height:0;min-width:0;width:calc(360px * var(--button-scale));height:calc(101px * var(--button-scale));aspect-ratio:360/101}
#loading.v2 #sign-in{min-height:0;min-width:0;width:calc(184px * var(--button-scale));height:calc(57px * var(--button-scale));aspect-ratio:184/57}
#loading.v2 #news-open{min-height:0;min-width:0;width:calc(209px * var(--button-scale));height:calc(61px * var(--button-scale));aspect-ratio:209/61}
#loading.v2 .footer{height:calc(var(--season-width) * .23);bottom:20px}
#loading.v2 .season-chip{flex:0 0 auto;width:var(--season-width);min-width:0;height:calc(var(--season-width) * .23)}
/* These canvases are paint surfaces, not button sizing rules. */
#loading.v2 canvas.concept-chrome{object-fit:contain}
dialog .action:not(#loading.v2 *){width:min(340px,calc(100vw - var(--safe-left) - var(--safe-right) - 110px));margin-left:auto;margin-right:auto;flex:none}
@media(min-width:768px) and (max-width:1024px){#loading.v2{--button-scale:1.2}}
@media(min-width:1440px){
 #loading.v2{--button-scale:1.2}
 #loading.v2 .content{left:max(4%,calc((100% - 1360px) / 2))}
 #loading.v2 .footer{left:max(4%,calc((100% - 1360px) / 2));right:max(4%,calc((100% - 1360px) / 2))}
}
@media(max-width:767px),(max-height:540px){
 #loading.v2{--button-scale:.8;--button-gap:12px;--profile-width:165px;--profile-height:48px;--coin-width:105px;--gear-side:44px;--season-width:240px}
 #loading.v2 .launch-header{gap:8px}
 #loading.v2 .content{bottom:calc(var(--season-width) * .23 + 44px)}
 #loading.v2 .footer{gap:12px;bottom:16px}
 #loading.v2 .logo{margin-bottom:8px}
}
@media(orientation:portrait){
 #loading.v2 .content{left:50%;transform:translateX(-50%)}
}
/* Header coordinates measured from the concept, all using the same scale. */
#loading.v2{--header-scale:1;--header-width:506px}
#loading.v2 .launch-header{display:block;width:var(--header-width);height:calc(65px * var(--header-scale));top:20px}
#loading.v2 .launch-header button{position:absolute;margin:0;padding:0;border:0}
#loading.v2 .launch-header .player-chip{left:0;top:0;width:calc(226px * var(--header-scale));height:max(44px,calc(65px * var(--header-scale)))}
#loading.v2 .launch-header .coin-chip{left:calc(276px * var(--header-scale));top:calc(31.5px * var(--header-scale));transform:translateY(-50%);width:calc(158px * var(--header-scale));height:max(44px,calc(53px * var(--header-scale)))}
#loading.v2 .launch-header .gear-chip{left:calc(478px * var(--header-scale));top:calc(31.5px * var(--header-scale));transform:translate(-50%,-50%);width:max(44px,calc(56px * var(--header-scale)));height:max(44px,calc(53px * var(--header-scale)))}
#loading.v2 .player-chip.concept-frame>img{position:absolute;left:0;top:0;width:calc(65px * var(--header-scale));height:calc(65px * var(--header-scale));border:0;background:none}
#loading.v2 .player-chip[data-reference-avatar=true]>img{opacity:0}
#loading.v2 .player-chip.concept-frame>span{position:absolute;left:calc(80px * var(--header-scale));top:calc(8px * var(--header-scale));width:calc(136px * var(--header-scale))}
#loading.v2 .player-chip strong{font-size:calc(20px * var(--header-scale));line-height:calc(27px * var(--header-scale));font-weight:600}
#loading.v2 .level-line{font-size:calc(15px * var(--header-scale));height:calc(20px * var(--header-scale));gap:calc(6px * var(--header-scale))}
#loading.v2 .level-line>b{font-weight:600}
#loading.v2 .level-line>i{height:calc(10px * var(--header-scale));width:calc(91px * var(--header-scale));flex:none}
#loading.v2 .coin-chip> :not(.concept-chrome){position:absolute;top:50%;transform:translateY(-50%)}
#loading.v2 .coin-mark.concept-coin{left:calc(8px * var(--header-scale));width:calc(34px * var(--header-scale));height:calc(32px * var(--header-scale))}
#loading.v2 .coin-chip strong{left:calc(49px * var(--header-scale));width:calc(66px * var(--header-scale));font-size:calc(23px * var(--header-scale));text-align:center}
#loading.v2 .coin-plus{left:calc(119px * var(--header-scale));width:calc(30px * var(--header-scale));height:calc(31px * var(--header-scale));background:none}
#loading.v2 .coin-plus canvas{object-fit:contain}
#loading.v2 .gear-chip.reference-loaded canvas.reference-ink{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(37px * var(--header-scale));height:calc(35px * var(--header-scale))}
@media(min-width:1440px){#loading.v2{--header-scale:1.2;--header-width:607.2px}}
@media(max-width:767px),(max-height:540px){#loading.v2{--header-scale:.8003952569;--header-width:405px}}
@media(max-width:425px){#loading.v2{--header-scale:.6758893281;--header-width:342px}}
@media(max-width:374px){#loading.v2{--header-scale:.6442687747;--header-width:326px}}

#loading.v2 .content .logo{width:calc(320px * var(--button-scale))}
/* Place the logo at the reference's top position instead of centering it in spare height. */
#loading.v2 .content{top:calc(65px * var(--header-scale) + 36px)}
#loading.v2 .content .logo{flex:0 0 auto;height:calc(214px * var(--button-scale));max-height:none}
/* Keep the portrait action group together above the season/footer row. */
@media(orientation:portrait){
 #loading.v2 .content{bottom:calc(var(--season-width) * .23 + 56px)}
}
/* Pointer/touch interaction must not leave bright overlays on the artwork. */
#loading.v2 :is(.concept-plate,.concept-frame):hover{filter:none;transform:none}
#loading.v2 .launch-header :is(.coin-chip,.gear-chip):hover{transform:translateY(-50%)}
#loading.v2 .launch-header .gear-chip:hover{transform:translate(-50%,-50%)}
#loading.v2 button:focus:not(:focus-visible){outline:none}
#loading.v2 button:focus-visible{filter:none}
@media(orientation:landscape) and (max-height:540px){
 #loading.v2 .content .logo{flex:1 1 0;height:auto;min-height:0;max-height:calc(214px * var(--button-scale))}
}

/* Loading owns the Play slot. Never paint a disabled translucent Play plate. */
#loading.v2:not(.ready) #guest{visibility:hidden;opacity:0;pointer-events:none}
#loading.v2:not(.ready) #guest *{visibility:hidden!important}
#loading.v2 .readiness{box-sizing:border-box;position:absolute;left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);width:calc(360px * var(--button-scale));height:calc(101px * var(--button-scale));max-width:none;display:grid;grid-template-columns:28px 1fr;grid-template-rows:1fr 1fr 8px;align-items:center;gap:3px 12px;padding:10px 18px 14px;background:#050e24f2;border:2px solid #35558a;clip-path:var(--cut);color:white}
#loading.v2 .loading-spinner{grid-row:1/3;width:26px;height:26px;border:3px solid #35558a;border-top-color:#ffe05c;border-radius:50%;animation:loading-spin .9s linear infinite}
#loading.v2 .loading-title{font:16px/1 BrawlItalic,sans-serif;color:#fff;white-space:nowrap}
#loading.v2 #status{font:16px/1 Body,sans-serif;color:#c6d6f3;grid-column:2}
#loading.v2 .track{grid-column:1/-1;grid-row:3;width:100%;height:8px;min-width:0;background:#23365b}
#loading.v2 #progress{background:#ffe05c;height:100%}
#loading.v2.ready .readiness{display:none}
#loading.v2:not(.ready) :is(.scene,.logo,.shine,.beam,.spark){animation:none}
#loading.v2:not(.ready) #launch-fx{visibility:hidden}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#loading.v2 .loading-spinner{animation:none}}
#loading.v2.reduced-motion .loading-spinner{animation:none}

/* Informational surfaces use the same navy, cyan bevel, and display lettering. */
dialog{border:2px solid #35558a;border-radius:6px;background:linear-gradient(135deg,#152648,#050e24 65%);box-shadow:0 0 0 3px #020714,0 18px 70px #000b;padding:24px}
dialog h2{color:white;font:36px/1.1 BrawlItalic,sans-serif}
dialog .close{width:44px;height:44px;border-radius:4px;border:2px solid #35558a;background:#050e24;color:white}
dialog .action{min-height:48px}
#updates{width:min(880px,calc(100vw - var(--safe-left) - var(--safe-right) - 32px))}
.release-card{margin:16px 0;border:1px solid #35558a;background:#0b1932;padding:0 18px}
.release-card summary{display:flex;align-items:center;gap:20px;min-height:64px;cursor:pointer;color:#c6d6f3;list-style:none}
.release-card summary::after{content:'+';margin-left:auto;font:28px BrawlItalic;color:#ffe05c}
.release-card[open] summary::after{content:'−'}
.release-card summary strong{font:26px BrawlItalic;color:#ffe05c}
.release-card summary span{font:16px Body}
.release-card ul{padding-left:20px;margin:0 0 20px}
.release-card li{margin:12px 0;color:#edf3ff}