/* Welcome screen in the menus' own voice: ink outlines, colour slabs, hard shadows.
   Everything here is scoped to #loading.v2 (and the dialogs), over the base in shell.html. */
:root{--ink:#120f24;--night:#0b0d2e;--cut:polygon(13px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 13px),calc(100% - 13px) 100%,6px 100%,0 calc(100% - 6px),0 13px)}
#loading.v2{padding:0;background:var(--night)}
#loading.v2 .launch{border:0;border-radius:0;box-shadow:none;background:var(--night)}
#loading.v2 .scene{inset:0;animation:none;background-position:62% center;transform-origin:62% 60%}
#loading.v2 .scene.live{background-image: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,#0b0d2ef5 0%,#0b0d2ed0 22%,#0b0d2e70 38%,transparent 56%),linear-gradient(0deg,#0b0d2ecc,transparent 26%)}
#loading.v2 .launch.shake{animation:launch-shake .35s linear}

/* Left column on wide screens: wordmark, progress, actions, news. */
#loading.v2 .content{all:unset;box-sizing:border-box;position:absolute;left:clamp(20px,4vw,64px);top:clamp(12px,3vh,36px);bottom:clamp(44px,7vh,68px);width:min(40vw,540px);display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2.4vh,24px)}
#loading.v2 .logo{all:unset;display:block;width:112%;margin-left:-7%;max-height:34vh;object-fit:contain;object-position:left center;filter:drop-shadow(0 7px 0 #07061a99);animation:logo-slam .55s cubic-bezier(.2,1.6,.4,1) .05s both,logo-float 4.4s ease-in-out .7s infinite alternate}
#loading.v2 .bottom-dock{all:unset;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(10px,1.6vw,16px);row-gap:clamp(12px,2.2vh,20px);align-items:stretch}
#loading.v2 h1{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
#loading.v2 .actions{all:unset;display:contents}

/* Slab buttons. */
:is(#loading.v2,dialog) .action{all:unset;box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.38em;cursor:pointer;min-height:clamp(60px,10vh,96px);padding:0 24px;font:normal clamp(30px,4.8vh,54px)/1 BrawlItalic,sans-serif;letter-spacing:.5px;color:var(--ink);filter:drop-shadow(0 8px 0 #07061a);transition:transform .09s ease-out,filter .12s;-webkit-tap-highlight-color:transparent;--top:#fff06a;--bottom:#ffae00}
:is(#loading.v2,dialog) .action::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--ink);clip-path:var(--cut)}
:is(#loading.v2,dialog) .action::after{content:"";position:absolute;inset:5px;z-index:-1;clip-path:var(--cut);background:linear-gradient(112deg,transparent 7%,#ffffff40 7% 13%,transparent 13% 15.5%,#ffffff40 15.5% 17.5%,transparent 17.5%),radial-gradient(circle,#ffffff2e 24%,transparent 27%) 0 0/9px 9px,linear-gradient(0deg,#00000030 0 9%,transparent 9%),linear-gradient(180deg,#ffffff30 0 47%,transparent 47%),linear-gradient(180deg,var(--top),var(--bottom))}
:is(#loading.v2,dialog) .action svg{width:.82em;height:.82em;fill:currentColor;flex-shrink:0}
:is(#loading.v2,dialog) .action:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 0 #07061a) brightness(1.06)}
:is(#loading.v2,dialog) .action:active{transform:translateY(5px);filter:drop-shadow(0 3px 0 #07061a)}
:is(#loading.v2,dialog) .action:focus-visible{outline:4px solid #62ecf8;outline-offset:6px}
:is(#loading.v2,dialog) .action.secondary{--top:#4fc0ff;--bottom:#1560e8;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;min-height:clamp(52px,8vh,78px);font-size:clamp(22px,3.3vh,36px);white-space:nowrap;padding:0 14px}
:is(#loading.v2,dialog) .action.secondary svg{stroke:var(--ink);stroke-width:3.5px;paint-order:stroke fill;stroke-linejoin:round}
#loading.v2 .action:disabled{--top:#b6bcd6;--bottom:#8188a8;color:#3d4263;cursor:wait;transform:none;filter:drop-shadow(0 5px 0 #07061a)}
#loading.v2 #guest{grid-column:1/-1;grid-row:2;min-height:clamp(74px,13vh,124px);font-size:clamp(40px,6.6vh,76px)}
#loading.v2 #sign-in{grid-column:1;grid-row:3}
#loading.v2 #news-open{grid-column:2;grid-row:3}
#loading.v2 #guest svg{order:2}
#loading.v2 #guest:disabled{font-size:clamp(28px,4.6vh,48px)}
#loading.v2 .glint{position:absolute;inset:5px;z-index:-1;clip-path:var(--cut);overflow:hidden;pointer-events:none}
#loading.v2 .glint::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:22%;background:#fffc;transform:skewX(-22deg);opacity:0}
#loading.v2.ready #guest{animation:play-pop .45s cubic-bezier(.2,1.6,.4,1),play-pulse 1.6s ease-in-out .5s infinite}
#loading.v2.ready .glint::before{animation:glint-sweep 2.8s ease-in-out 1s infinite}
#loading.v2 .guest-note{all:unset;display:block;grid-column:1/-1;grid-row:4;margin-top:-4px;text-align:center;color:#e6ecff;font:16px/1.2 Body,sans-serif;text-shadow:0 2px 0 #07061a}

/* Progress: the tip and the status share a line above a full-width bar. */
#loading.v2 .readiness{all:unset;grid-column:1/-1;grid-row:1;display:flex;flex-direction:column;gap:7px;color:#fff}
#loading.v2 .track{all:unset;box-sizing:border-box;order:2;width:100%;height:26px;padding:5px;background:var(--ink);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#loading.v2 #progress{height:100%;width:0;box-shadow:none;background:repeating-linear-gradient(105deg,#62ecf8 0 16px,#1cb8ea 16px 20px);background-size:200% 100%;transition:width .22s cubic-bezier(.2,.7,.3,1);animation:bar-flow 1.1s linear infinite}
#loading.v2.ready #progress{background-image:repeating-linear-gradient(105deg,#fff06a 0 16px,#ffb81c 16px 20px)}
#loading.v2 #status{order:1;align-self:flex-end;font:clamp(20px,2.8vh,28px)/1 BrawlItalic,sans-serif;white-space:nowrap;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;color:#fff}
#loading.v2 .tip{all:unset;grid-column:1/-1;grid-row:1;align-self:start;justify-self:start;max-width:62%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#dfe6ff;font:17px/1.6 Body,sans-serif;text-shadow:0 2px 0 #07061a}
#loading.v2 .tip.swap{animation:tip-in .35s ease-out}
#loading.v2.ready .tip{visibility:hidden}

/* What's new: the second of the two equal secondaries, in the panel colour. */
#loading.v2 .action.news{--top:#3d4aa0;--bottom:#1b2258}
#loading.v2 .news img{width:1.25em;height:1.25em;margin:-.2em 0;object-fit:contain;filter:drop-shadow(0 2px 0 #07061a99)}
#loading.v2 .news>span:not(.arrow){display:contents}
#loading.v2 .news .kicker{display:inline;color:inherit;font:inherit;-webkit-text-stroke:inherit}
#loading.v2 .news strong,#loading.v2 .news small,#loading.v2 .news .arrow{display:none}
#loading.v2 .footer{all:unset;position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(12px,2.4vh,24px);color:#dfe6ff;font:14px/1 Brawl,sans-serif;letter-spacing:1.2px;text-shadow:0 2px 0 #07061a}
#loading.v2 .version{color:inherit;font-size:inherit}
#loading.v2 #retry{all:unset;position:absolute;right:4%;bottom:8%;padding:14px 28px;cursor:pointer;background:#ff4d5e;color:#fff;font:26px/1 BrawlItalic,sans-serif;border:5px solid var(--ink);box-shadow:0 7px 0 #07061a}

/* Leaving: the picture rushes in, the chrome drops away. */
#loading.v2.leaving{pointer-events:none;animation:launch-out .5s ease-in forwards}
#loading.v2.leaving .scene{animation:scene-rush .5s cubic-bezier(.6,0,.9,.4) forwards}
#loading.v2.leaving .content,#loading.v2.leaving .footer{transition:opacity .2s,transform .25s;opacity:0;transform:translateY(18px)}

/* 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 .action{width:100%;min-height:64px;font-size:30px;margin-top:22px}
button:focus-visible,input:focus-visible{outline-color:#62ecf8}

/* Phones: the painting on top, everything to press within thumb reach. */
@media(max-width:700px){
#loading.v2 .scene{inset:0;background-position:center 30%;background-size:auto 82%;background-repeat:no-repeat;transform-origin:50% 45%}
#loading.v2 .shade{background:linear-gradient(0deg,#0b0d2e 0%,#0b0d2ef2 24%,#0b0d2ea6 38%,transparent 54%),linear-gradient(180deg,#0b0d2e80,transparent 20%)}
#loading.v2 .content{left:0;right:0;top:0;bottom:0;width:auto;padding:calc(var(--safe-top) + 30px) 18px calc(var(--safe-bottom) + 16px);justify-content:space-between;gap:0}
#loading.v2 .logo{width:100%;margin:0;max-height:21vh;object-position:center}
#loading.v2 .bottom-dock{row-gap:clamp(11px,1.8vh,16px)}
#loading.v2 #guest{min-height:clamp(70px,11vh,104px);font-size:clamp(40px,6.2vh,60px)}
#loading.v2 .action.secondary{min-height:clamp(52px,7.2vh,68px);font-size:clamp(19px,2.9vh,25px);padding:0 8px}
#loading.v2 .guest-note{display:none}
#loading.v2 .tip{font-size:14px;max-width:56%}
#loading.v2 #status{font-size:clamp(18px,2.6vh,24px)}
#loading.v2 .footer{left:auto;right:14px;top:calc(var(--safe-top) + 8px);bottom:auto;font-size:12px;text-align:right}
#loading.v2 #retry{right:18px;bottom:auto;top:calc(var(--safe-top) + 34px)}
}
/* Phones on their side: tighter rows so nothing is squeezed. */
@media(max-height:520px) and (min-width:701px){
#loading.v2 .content{top:6px;bottom:30px;width:min(46vw,480px);gap:6px}
#loading.v2 .logo{max-height:24vh}
#loading.v2 .bottom-dock{row-gap:8px}
#loading.v2 #guest{min-height:58px;font-size:36px}
#loading.v2 .action.secondary{min-height:44px;font-size:22px}
#loading.v2 .guest-note,#loading.v2 .tip{display:none}
#loading.v2 .track{height:20px;padding:4px}
#loading.v2 .footer{bottom:8px;font-size:11px}
}
@keyframes logo-slam{0%{opacity:0;transform:scale(2.3) rotate(-7deg)}100%{opacity:1;transform:none}}
@keyframes logo-float{from{transform:translateY(0) rotate(0)}to{transform:translateY(-8px) rotate(-.7deg)}}
@keyframes launch-shake{0%,100%{transform:none}15%{transform:translate(-5px,3px)}30%{transform:translate(4px,-3px)}45%{transform:translate(-3px,-2px)}60%{transform:translate(3px,2px)}80%{transform:translate(-1px,1px)}}
@keyframes play-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes play-pulse{50%{transform:scale(1.035)}}
@keyframes glint-sweep{0%,55%{left:-40%;opacity:.9}100%{left:130%;opacity:.9}}
@keyframes bar-flow{to{background-position:-40px 0}}
@keyframes tip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes launch-out{0%,55%{opacity:1}100%{opacity:0}}
@keyframes scene-rush{to{transform:scale(1.32)}}
@media(prefers-reduced-motion:reduce){#loading.v2 *,#loading.v2 *::before,#loading.v2 *::after{animation:none!important;transition:none!important}}