/* 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(27.5px * var(--header-scale));transform:translateY(-50%);width:calc(158px * var(--header-scale));height:max(44px,calc(47px * var(--header-scale)))}
#loading.v2 .launch-header .gear-chip{left:calc(478px * var(--header-scale));top:calc(28px * var(--header-scale));transform:translate(-50%,-50%);width:max(44px,calc(56px * var(--header-scale)));height:max(44px,calc(52px * 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))}
}