/* Reference menu: cinematic plate, brushed logo, cut-corner navy chrome. */
@font-face{font-family:Brush;src:url('loading-brush.ttf') format('truetype');font-display:swap}
:root{--ink:#020815;--night:#040d21;--cut:polygon(10px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 10px),calc(100% - 10px) 100%,9px 100%,0 calc(100% - 9px),0 10px)}
#loading.v2{padding:0;background:var(--night);overflow:hidden}
#loading.v2 .launch{width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--night);isolation:isolate}
#loading.v2 .scene{inset:0;animation:breathe 8s ease-in-out infinite alternate;background-image:url('loading-art.png');background-position:center;background-size:cover;transform-origin:65% 55%}
#loading.v2 .scene.live{background-image:none;animation:none}
#launch-art,#launch-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#loading.v2 .shine,#loading.v2 .beam,#loading.v2 .particles{display:none}
#loading.v2 .shade{background:linear-gradient(90deg,#02091944,transparent 52%),linear-gradient(0deg,#02091977,transparent 25%);pointer-events:none}
#loading.v2 button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#loading.v2 .launch-safe{position:absolute;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
#loading.v2 .launch-header{position:absolute;z-index:4;top:14px;left:4%;right:4%;display:flex;align-items:center;gap:14px;height:clamp(46px,7.3vh,72px)}
#loading.v2 :is(.player-chip,.coin-chip,.gear-chip,.season-chip){position:relative;box-sizing:border-box;background:#051127ed;color:white;border:2px solid #253e74;box-shadow:0 0 0 3px #01081699;clip-path:var(--cut);border-radius:0;cursor:pointer;padding:0;font-family:BrawlItalic,sans-serif;height:100%}
#loading.v2 .player-chip{width:clamp(200px,27vw,350px);display:flex;align-items:center;gap:13px;text-align:left;padding:0 13px 0 0}
#loading.v2 .player-chip>img{height:100%;aspect-ratio:1;object-fit:contain;background:#071424;clip-path:var(--cut);border:2px solid #52d6f4}
#loading.v2 .player-chip>span{flex:1;min-width:0}
#loading.v2 .player-chip strong{display:block;font-size:clamp(18px,2.8vh,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
#loading.v2 .level-line{display:flex;align-items:center;gap:9px;font:clamp(13px,1.8vh,18px) BrawlItalic,sans-serif;color:#d8e4fd}
#loading.v2 .level-line>b{white-space:nowrap}.level-line>i{height:9px;flex:1;background:#202f50;transform:skewX(-12deg);border-radius:2px;overflow:hidden}.level-line em{display:block;background:linear-gradient(#fff16a,#ffd028);height:100%;width:0}
#loading.v2 .coin-chip{margin-left:auto;width:clamp(128px,16vw,215px);display:flex;align-items:center;justify-content:space-around;gap:8px;padding:6px}
#loading.v2 .coin-mark{display:grid;place-items:center;flex-shrink:0;width:1.25em;height:1.25em;border:2px solid #fff1ad;border-radius:50%;background:linear-gradient(120deg,#ffe16a,#ffa500);box-shadow:inset 0 0 0 2px #ffb51c,inset 0 0 0 4px #ffed98;font:clamp(23px,3.2vh,33px) BrawlItalic;color:white;text-shadow:1px 2px #c68116}
#loading.v2 .coin-chip strong{font-size:clamp(21px,3vh,30px)}
#loading.v2 .coin-plus{display:grid;place-items:center;width:1.1em;height:1.1em;background:#183975;border-radius:2px;font:bold clamp(26px,3.6vh,36px)/1 sans-serif}
#loading.v2 .gear-chip{aspect-ratio:1;width:auto;padding:9px}#loading.v2 .gear-chip img{width:100%;height:100%;object-fit:contain}
#loading.v2 :is(.player-chip,.coin-chip,.gear-chip,.season-chip):hover{filter:brightness(1.25)}
#loading.v2 .content{all:unset;position:absolute;left:4%;top:max(14%,calc(26px + clamp(46px,7.3vh,72px)));bottom:18%;width:35%;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
#loading.v2 .logo{all:unset;display:block;width:100%;height:53%;object-fit:contain;filter:drop-shadow(0 5px 0 #01051366);animation:logo-float 5s ease-in-out infinite alternate}
#loading.v2 .bottom-dock{all:unset;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#loading.v2 h1{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
#loading.v2 .actions{all:unset;display:contents}
:is(#loading.v2,dialog) .action{all:unset;box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.42em;cursor:pointer;padding:0 14px;font:normal clamp(28px,5.8vh,64px)/1 BrawlItalic,sans-serif;color:#050904;filter:drop-shadow(0 5px 0 #020714);transition:transform .12s,filter .12s;--top:#fff872;--bottom:#ffce23}
:is(#loading.v2,dialog) .action::before{content:"";position:absolute;inset:0;z-index:-2;background:#020612;clip-path:var(--cut)}
:is(#loading.v2,dialog) .action::after{content:"";position:absolute;inset:4px;z-index:-1;clip-path:var(--cut);background:linear-gradient(115deg,transparent 7%,#fff3 7% 9%,transparent 9% 76%,#fff3 76% 76.6%,transparent 76.6%),radial-gradient(circle,#ffffff30 18%,transparent 21%) 0 0/5px 5px,linear-gradient(var(--top),var(--bottom));border:2px solid #fff07899}
:is(#loading.v2,dialog) .action svg{width:.82em;height:.82em;fill:currentColor;flex-shrink:0}
:is(#loading.v2,dialog) .action:hover{filter:brightness(1.08) drop-shadow(0 6px 0 #020714);transform:translateY(-2px)}
:is(#loading.v2,dialog) .action:active{transform:translateY(3px)}
:is(#loading.v2,dialog) button:focus-visible{outline:3px solid #fff2a6;outline-offset:2px;filter:brightness(1.3)}
:is(#loading.v2,dialog) .action.secondary{--top:#0b1d48;--bottom:#040c21;color:white;font-size:clamp(17px,2.6vh,27px);min-height:clamp(44px,6.7vh,66px);white-space:nowrap}
:is(#loading.v2,dialog) .action.secondary::after{border:2px solid #2850a1;background:linear-gradient(var(--top),var(--bottom));inset:2px}
#loading.v2 #guest{grid-column:1/-1;grid-row:1;min-height:clamp(66px,11.7vh,120px);font-size:clamp(40px,7.4vh,80px)}
#loading.v2 #sign-in{grid-column:1;grid-row:2}#loading.v2 #news-open{grid-column:2;grid-row:2}
#loading.v2 .guest-note{display:none}
#loading.v2 .notification{position:absolute;right:12px;top:-3px;background:#fc153a;color:white;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;font:13px Brawl,sans-serif}
#loading.v2 .action:disabled{filter:saturate(.35);cursor:wait;transform:none}
#loading.v2 #guest:disabled{font-size:clamp(26px,5vh,50px)}
#loading.v2 .readiness{all:unset;position:absolute;left:0;right:0;bottom:calc(100% + 12px);display:flex;align-items:center;gap:10px}
#loading.v2 .track{height:5px;background:#1e2d4f;flex:1;min-width:0;border-radius:0;overflow:hidden}
#loading.v2 #progress{height:100%;width:0;background:#ffe040;box-shadow:none;transition:width .2s}
#loading.v2 #status{font:15px BrawlItalic;color:#e4edff;white-space:nowrap;text-shadow:0 2px #020716}
#loading.v2.ready .readiness{visibility:hidden}
#loading.v2 .tip{display:none}
#loading.v2 .glint{position:absolute;inset:6px;clip-path:var(--cut);z-index:-1;overflow:hidden;pointer-events:none}
#loading.v2 .glint::before{content:"";position:absolute;inset:-20% auto -20% -50%;width:18%;background:#fff7;transform:skewX(-23deg)}
#loading.v2.ready .glint::before{animation:glint-sweep 4s ease-in-out infinite}
#loading.v2 .wall-tag{font:clamp(19px,3.5vh,38px)/.95 Brush,sans-serif;color:#669af0;transform:rotate(-7deg);pointer-events:none;text-align:center;text-shadow:0 2px #12254d66}
#loading.v2>.wall-tag{position:absolute}
#loading.v2 .tag-left,#loading.v2 .tag-right{display:none}
#loading.v2 .footer{all:unset;position:absolute;left:4%;right:4%;bottom:3%;height:clamp(52px,8.5vh,90px);display:flex;align-items:center;gap:20px;z-index:2}
#loading.v2 .season-chip{display:flex;align-items:center;gap:15px;width:clamp(240px,28vw,380px);padding:6px 12px;clip-path:var(--cut)}
#loading.v2 .season-chip>img{width:42px;height:42px;filter:sepia(1) saturate(5)}
#loading.v2 .season-chip>span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;color:#62d5f5;font:clamp(13px,1.8vh,18px)/1 BrawlItalic}
#loading.v2 .season-chip strong{font-size:1.2em}.season-chip b{font-weight:normal}.season-progress{display:flex;align-items:center;gap:10px;width:100%;margin-top:5px}.season-progress i{height:8px;background:#233152;flex:1;transform:skewX(-12deg)}.season-progress small{font:12px BrawlItalic;color:#c1d1ef}
#loading.v2 .repeat-tag{margin-left:auto;color:#5272b0;font-size:clamp(21px,3.7vh,40px)}
#loading.v2 .version{font:12px Brawl;color:#788cb9;position:absolute;right:0;bottom:-12px}
#loading.v2 #retry{position:absolute;right:4%;bottom:16%;padding:14px 24px;background:#f62b51;color:white;border:2px solid #fff;font:22px BrawlItalic;z-index:5;cursor:pointer}
#loading.v2.leaving{pointer-events:none;animation:launch-out .5s ease-in forwards}
#loading.v2.leaving .scene{animation:scene-rush .5s ease-in forwards}
#loading.v2.leaving :is(.content,.footer,.launch-header){transition:opacity .2s;opacity:0}
/* Dialogs. */
dialog{border:5px solid var(--ink);border-radius:20px;background:linear-gradient(160deg,#2b367f,#171c4c 70%);box-shadow:0 10px 0 #07061a,0 30px 90px #000b;color:#fff}
dialog::backdrop{background:#07061acc;backdrop-filter:blur(6px)}
dialog h2{font:40px/1 BrawlItalic,sans-serif;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;margin:6px 0 16px}
dialog p,dialog li,dialog label{color:#dfe6ff}
dialog input{border:4px solid var(--ink);border-radius:10px;background:#0e1234;color:#fff}
dialog .close{background:#ffd21f;border:4px solid var(--ink);border-radius:10px;color:var(--ink);box-shadow:0 4px 0 #07061a;font-weight:bold}
#google-pending{background:#0e1234;border:3px solid var(--ink);color:#dfe6ff}
/* Dialog buttons. The :not() lifts these above the shared .action rule, whose all:unset otherwise wins. */
dialog .action:not(#loading.v2 *){width:100%;min-height:64px;font-size:30px;margin-top:22px}
dialog .action.secondary:not(#loading.v2 *){min-height:50px;font-size:23px;margin-top:16px}
button:focus-visible,input:focus-visible{outline-color:#62ecf8}


@media(orientation:portrait){
 #loading.v2 .scene{background-image:url('loading-mobile.png');background-size:cover;background-position:center;transform-origin:50% 50%}
 #loading.v2 .shade{background:linear-gradient(0deg,#02091966,transparent 24%)}
 #loading.v2 .launch-header{top:12px;left:4%;right:4%;height:clamp(44px,6.6vh,70px);gap:10px}
 #loading.v2 .player-chip{width:46%;gap:8px;padding-right:8px}
 #loading.v2 .player-chip strong{font-size:clamp(14px,2.2vh,26px)}
 #loading.v2 .level-line{font-size:clamp(10px,1.55vh,17px);gap:6px}.level-line>i{height:7px}
 #loading.v2 .coin-chip{width:27%;padding:4px;gap:5px}
 #loading.v2 .coin-chip strong{font-size:clamp(18px,2.6vh,28px)}
 #loading.v2 .coin-mark{font-size:clamp(20px,3vh,31px)}
 #loading.v2 .coin-plus{font-size:clamp(23px,3vh,32px)}
 #loading.v2 .gear-chip{padding:7px}
 #loading.v2 .content{left:10%;width:80%;top:max(9%,calc(28px + clamp(44px,6.6vh,70px)));bottom:12%;}
 #loading.v2 .logo{width:88%;margin:0 auto;height:26%;}
 #loading.v2 .bottom-dock{gap:10px}
 #loading.v2 #guest{min-height:clamp(68px,10.5vh,115px);font-size:clamp(44px,7vh,80px)}
 #loading.v2 .action.secondary{min-height:clamp(44px,6.2vh,72px);font-size:clamp(16px,2.35vh,28px);padding:0 8px}
 #loading.v2 .footer{left:5%;right:7%;height:clamp(50px,7.8vh,85px);bottom:2.5%;gap:12px}
 #loading.v2 .season-chip{width:65%;gap:9px;padding:5px 8px}
 #loading.v2 .season-chip>img{width:30px;height:30px}
 #loading.v2 .season-chip>span{font-size:clamp(11px,1.55vh,18px)}
 #loading.v2 .repeat-tag{font-size:clamp(21px,3.2vh,36px)}
 #loading.v2 .version{display:none}
 #loading.v2 .tag-left,#loading.v2 .tag-right{display:block;position:absolute;z-index:1;font-size:clamp(18px,3.2vh,36px);width:17%}
 #loading.v2 .tag-left{left:3%;top:20%}#loading.v2 .tag-right{right:3%;top:24%}
}
@media(orientation:landscape) and (max-height:540px){
 #loading.v2 .launch-header{top:8px;height:44px;gap:10px}
 #loading.v2 .content{top:max(16%,64px);bottom:20%;width:37%}
 #loading.v2 .logo{height:48%}
 #loading.v2 .bottom-dock{gap:8px}
 #loading.v2 #guest{min-height:54px;font-size:40px}
 #loading.v2 .action.secondary{min-height:44px;font-size:17px;padding:0 6px}
 #loading.v2 .footer{height:48px;bottom:3%}
 #loading.v2 .season-chip{width:32%;min-width:220px}
 #loading.v2 .season-chip>img{width:28px;height:28px}
 #loading.v2 .readiness{bottom:calc(100% + 4px)}
 #loading.v2 .player-chip{width:230px}
}
@keyframes logo-float{from{transform:translateY(0) rotate(0)}to{transform:translateY(-5px) rotate(-.4deg)}}
@keyframes glint-sweep{0%,60%{left:-50%;opacity:0}65%{opacity:.8}100%{left:130%;opacity:.8}}
@keyframes launch-out{0%,55%{opacity:1}100%{opacity:0}}
@keyframes scene-rush{to{transform:scale(1.12)}}
#loading.v2.reduced-motion *,#loading.v2.reduced-motion *::before,#loading.v2.reduced-motion *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#loading.v2 *,#loading.v2 *::before,#loading.v2 *::after{animation:none!important;transition:none!important}}

/* Fixed lettering and icons come from the concept, at their original proportions. */
#loading.v2 canvas.reference-ink{display:block;position:static;flex:none;width:auto;pointer-events:none;image-rendering:auto}
#loading.v2 .gear-chip.reference-loaded>img{display:none}
#loading.v2 .gear-chip.reference-loaded canvas{width:100%;height:auto}
#loading.v2 .action.reference-loaded{gap:clamp(10px,2vh,20px)}
#loading.v2 #guest.reference-loaded canvas{display:none}
#loading.v2.ready #guest.reference-loaded>svg,#loading.v2.ready #guest.reference-loaded>#play-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#loading.v2.ready #guest.reference-loaded canvas{display:block;height:clamp(36px,6.3vh,64px)}
#loading.v2 #sign-in.reference-loaded,#loading.v2 #news-open.reference-loaded{font-size:0}
#loading.v2 #sign-in.reference-loaded>svg,#loading.v2 #news-open.reference-loaded>svg,#loading.v2 #news-open.reference-loaded>span{display:none}
#loading.v2 .reference-loaded canvas.secondary-icon{height:clamp(21px,3vh,30px)}
#loading.v2 .reference-loaded canvas.account-word,#loading.v2 .reference-loaded canvas.news-word{height:clamp(19px,2.6vh,26px)}
#loading.v2 .season-chip.reference-loaded>img{display:none}
#loading.v2 .season-chip.reference-loaded canvas.season-crown{order:-1;height:clamp(30px,4.3vh,43px)}
#loading.v2 .season-chip .reference-loaded{font-size:0}
#loading.v2 .season-chip canvas.season-word{height:clamp(13px,1.9vh,19px)}
#loading.v2 .season-chip canvas.season-subtitle{height:clamp(10px,1.4vh,14px)}
#loading.v2 .wall-tag.reference-loaded{font-size:0;transform:none}
#loading.v2 .wall-tag.reference-loaded canvas{width:100%;height:auto}
#loading.v2 .repeat-tag.reference-loaded{width:clamp(60px,9vw,115px)}
#loading.v2 .player-chip strong,#loading.v2 .level-line,#loading.v2 .coin-chip strong{font-family:Body,sans-serif;font-weight:600;font-style:italic}
#loading.v2 .player-chip strong{letter-spacing:.1px}
@media(orientation:landscape) and (max-height:540px){
 #loading.v2.ready #guest.reference-loaded canvas{height:32px}
 #loading.v2 .reference-loaded canvas.secondary-icon{height:22px}
 #loading.v2 .reference-loaded canvas.account-word,#loading.v2 .reference-loaded canvas.news-word{height:20px}
}
@media(orientation:portrait){
 #loading.v2 .reference-loaded canvas.account-word,#loading.v2 .reference-loaded canvas.news-word{height:clamp(18px,2.45vh,28px)}
 #loading.v2 .repeat-tag.reference-loaded{width:24%}
}

/* Dialogs share the same usable area, including in landscape Safari. */
dialog{inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);width:min(460px,calc(100vw - var(--safe-left) - var(--safe-right) - 30px));max-height:min(85dvh,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px))}

/* Source-painted silhouette and bevel, with live hit targets and focus states. */
#loading.v2 canvas.concept-chrome{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#loading.v2 .concept-frame{border:0;box-shadow:none;background:none;clip-path:none;isolation:isolate}
#loading.v2 .concept-frame> :not(.concept-chrome){position:relative;z-index:1}
#loading.v2 .coin-mark.concept-coin{background:none;border:0;box-shadow:none;border-radius:0;text-shadow:none}
#loading.v2 .coin-mark.concept-coin canvas{width:100%;height:100%;object-fit:contain}
#loading.v2 .concept-plate::before,#loading.v2 .concept-plate::after{display:none}
#loading.v2 .concept-plate{filter:none;padding:0}
#loading.v2 .concept-plate> :not(.concept-chrome){visibility:hidden}
#loading.v2 #guest.concept-plate:not(:disabled)> :not(.concept-chrome){visibility:hidden}
#loading.v2 #guest.concept-plate:disabled .concept-chrome{opacity:.25}
#loading.v2 #guest.concept-plate:disabled #play-caption{visibility:visible;position:relative;color:white;font-size:26px;z-index:1}
#loading.v2 .concept-plate:hover{filter:brightness(1.12)}
#loading.v2 .concept-plate:focus-visible{outline:3px solid #fff2a6;outline-offset:3px}

#loading.v2 #guest.concept-plate canvas.concept-chrome,#loading.v2 .gear-chip.concept-frame canvas.concept-chrome{display:block;width:100%;height:100%}