/* Start screen, concept B: a great gate in the council hall, the entry form on a stone tablet.
   Art: /v2/art/auth-screen/. --w is the tablet width. CSS only: every form, id and handler is untouched. */
html.gv-v2 #authScreen{isolation:isolate;padding:10px 16px 18px;background:#07040c}
html.gv-v2 #authScreen:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#07040c99 0,#07040c66 27%,#07040c00 35%,#07040c00 65%,#07040c66 73%,#07040c99 100%),linear-gradient(#07040c33,#07040c40),url('/v2/art/auth-screen/gate-bg.webp') center/cover no-repeat;pointer-events:none}
html.gv-v2 #authScreen .auth-mute{background:#0b0712b3;border:1px solid #d8ad62}

/* Layout: the welcome on the left, the tablet in the gateway, the three features on the right */
html.gv-v2 #authScreen .gate-layout{--w:540px;width:min(1460px,100%);grid-template-columns:minmax(0,1fr) var(--w) minmax(0,1fr);grid-template-rows:auto 1fr auto auto auto auto 1fr;grid-template-areas:". logo ." ". card trails" "kicker card trails" "h1 card trails" "lead card trails" "foot card trails" ". card trails";gap:0 clamp(16px,3vw,56px);align-items:center}
html.gv-v2 #authScreen :is(.gate-kicker,.gate-story h1,.gate-lead,.gate-footnote){padding-left:clamp(0px,4vw,76px)}
html.gv-v2 #authScreen .gate-intro,html.gv-v2 #authScreen .gate-story{display:contents}
html.gv-v2 #authScreen .create-logo-img{grid-area:logo;justify-self:center;width:min(360px,100%);height:150px;max-height:none;margin:0 0 -12px;position:relative;z-index:2;object-fit:contain}
html.gv-v2 #authScreen .gate-kicker{grid-area:kicker;margin:0 0 10px;color:#f1c77c;text-shadow:0 2px 6px #000c}
html.gv-v2 #authScreen .gate-story h1{grid-area:h1;margin:0 0 14px;font-size:clamp(30px,3vw,46px);line-height:1.12;text-shadow:0 3px 10px #000d}
html.gv-v2 #authScreen .gate-lead{grid-area:lead;margin:0 0 14px;line-height:1.55;text-shadow:0 2px 6px #000d}
html.gv-v2 #authScreen .gate-footnote{grid-area:foot;margin:0;text-shadow:0 2px 6px #000d}
html.gv-v2 #authScreen .gate-trails{grid-area:trails;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin:0}
html.gv-v2 #authScreen .gate-trails>div{max-width:190px;font:700 17px/1.25 var(--font-display,serif);color:#ffe2a0;text-shadow:0 2px 6px #000d}
html.gv-v2 #authScreen .gate-trails img{width:86px;height:90px}

/* Stone tablet: drawn behind the content, so the form may rise into the arch */
html.gv-v2 #authScreen .gate-card{grid-area:card;position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;width:var(--w);padding:calc(var(--w)*.17) calc(var(--w)*.145) calc(var(--w)*.1);border:0;border-image:none;background:none;box-shadow:none;text-align:center}
html.gv-v2 #authScreen .gate-card:before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-color:transparent;border-width:calc(var(--w)*.3825) calc(var(--w)*.1275) calc(var(--w)*.176);border-image:url('/v2/art/auth-screen/tablet.webp') 306 102 141 fill / calc(var(--w)*.3825) calc(var(--w)*.1275) calc(var(--w)*.176) / 0 stretch;filter:drop-shadow(0 18px 30px #000b)}
html.gv-v2 #authScreen .gate-card>*{order:7}
html.gv-v2 #authScreen .gate-card-head{order:0;margin-bottom:8px}
html.gv-v2 #authScreen .gate-card-head img{display:none}
html.gv-v2 #authScreen .gate-card-head h2{font-size:31px;line-height:1.15;color:#ffe2a0}
html.gv-v2 #authScreen .gate-card>.auth-tabs{order:1}
html.gv-v2 #authScreen .gate-card>.auth-form{order:2}
html.gv-v2 #authScreen .gate-card>.auth-error{order:3}
html.gv-v2 #authScreen .gate-card>.auth-divider{order:4}
html.gv-v2 #authScreen .gate-card>.btn-google{order:5}
html.gv-v2 #authScreen .gate-card>.btn-guest{order:6}
html.gv-v2 #authScreen .gate-card>.steam-wishlist{order:7}
html.gv-v2 #authScreen .gate-card>div:has(>a[href*="discord"]){order:8}
html.gv-v2 #authScreen .gate-card>div:has(>a[href*="/terms/"]){order:9}
html.gv-v2 #authScreen .gate-card>.gate-language{order:10}

/* Tabs */
html.gv-v2 #authScreen .auth-tabs{gap:0;margin:0 0 6px}
html.gv-v2 #authScreen .auth-tab{min-height:40px;padding:4px;border:0;border-image:none;background:linear-gradient(90deg,transparent,#8a6a3f,transparent) center bottom/100% 1px no-repeat;color:#d9c7ad;font:700 18px/1.2 var(--font-display,serif);text-decoration:none;filter:none}
html.gv-v2 #authScreen .auth-tab.active{background:linear-gradient(90deg,transparent,#ffcf70,transparent) center bottom/100% 2px no-repeat;color:#ffe2a0;text-decoration:none;filter:none;text-shadow:0 0 12px #ffc14d88}

/* Fields */
html.gv-v2 #authScreen .gate-field-label{margin:7px 0 4px;color:#f3e2c7;font-size:13px}
html.gv-v2 #authScreen .auth-input{min-height:44px;margin:0;border:1px solid #a98a5b;border-radius:8px;background:#0e0916e6;box-shadow:none}
html.gv-v2 #authScreen .auth-input:focus{border-color:#ffd98a;box-shadow:0 0 10px #ffc14d55}
html.gv-v2 #authScreen .auth-forgot{margin:6px 0 0;text-align:right;color:#ffdc95}
html.gv-v2 #authScreen .gv-newsletter-choice{margin:9px 0 0;font-size:12px;line-height:1.35;color:#ead8bd;text-align:left}

/* Buttons */
html.gv-v2 body #authScreen .auth-btn{min-height:62px!important;margin:12px auto 0!important;padding:6px 30px!important;background:transparent url('/v2/art/auth-screen/button-login.webp') center/100% 100% no-repeat!important;box-shadow:none!important;color:#2d1804!important;font:700 23px/1.1 var(--font-display,serif)!important;letter-spacing:.02em;text-shadow:0 1px 0 #ffe9b866!important;transition:filter .18s ease-out}
html.gv-v2 body #authScreen .btn-guest{width:76%!important;min-height:48px!important;margin:9px auto 0!important;padding:4px 26px!important;background:transparent url('/v2/art/auth-screen/button-guest.webp') center/100% 100% no-repeat!important;box-shadow:none!important;color:#ffe2a0!important;font:700 17px/1.1 var(--font-display,serif)!important;transition:filter .18s ease-out}
html.gv-v2 body #authScreen :is(.auth-btn,.btn-guest):hover{filter:brightness(1.12) drop-shadow(0 0 10px #ffc14d88)}
html.gv-v2 #authScreen .auth-divider{margin:8px 0;color:#e4d2bb}
html.gv-v2 #authScreen .btn-google{min-height:46px;border:0;border-radius:8px;font-size:15px;font-weight:600}

/* Steam */
html.gv-v2 #authScreen .gate-card>.steam-wishlist{display:block;margin:12px 0 0;padding:12px 0 0;border:0;border-top:1px solid #8a6a3f;border-radius:0;background:none;box-shadow:none;text-align:center}
html.gv-v2 #authScreen .steam-wishlist strong{display:block;font:700 21px/1.2 var(--font-display,serif);color:#ffe2a0}
html.gv-v2 #authScreen .steam-wishlist p{margin:3px 0 8px;font-size:14px;line-height:1.35;color:#f0e2cd}
html.gv-v2 #authScreen .steam-wishlist-link{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:62%;min-height:42px;padding:6px 18px;box-sizing:border-box;border:1px solid #d8ad62;border-radius:8px;background:#0e0916b3;color:#fff2df;font-size:15px;font-weight:700;text-decoration:none}
html.gv-v2 #authScreen .steam-wishlist-link:hover{background:#2a1c34;border-color:#ffd98a}

/* Small links: inline styles in the markup, so these need !important */
html.gv-v2 #authScreen .gate-card>div:has(>a[href*="discord"]){gap:4px 20px!important;margin-top:10px!important;flex-wrap:wrap}
html.gv-v2 #authScreen .gate-card>div:has(>a[href*="discord"])>a{padding:4px 2px!important;background:none!important;border:0!important;border-radius:0!important;backdrop-filter:none!important;color:#ead8bd!important;font-size:14px!important;font-weight:600!important}
html.gv-v2 #authScreen .gate-card>div:has(>a[href*="discord"])>a:hover{color:#ffe2a0!important}
html.gv-v2 #authScreen .gate-card>div:has(>a[href*="/terms/"]){margin-top:6px!important;font-size:12px!important;color:#d9c9b4!important}
html.gv-v2 #authScreen .gate-language{margin:4px 0 0}
html.gv-v2 #authScreen .gate-language summary{padding:4px;font-size:13px}

@media(max-height:900px) and (min-width:901px){
 html.gv-v2 #authScreen .create-logo-img{height:104px;width:260px;margin-bottom:-6px}
 html.gv-v2 #authScreen .gate-layout{--w:510px}
 html.gv-v2 #authScreen .gate-trails img{width:68px;height:72px}
}
@media(max-width:1180px) and (min-width:901px){
 html.gv-v2 #authScreen :is(.gate-kicker,.gate-story h1,.gate-lead,.gate-footnote){padding-left:0}
 html.gv-v2 #authScreen .gate-layout{--w:470px;grid-template-columns:minmax(0,1fr) var(--w);grid-template-areas:". logo" ". card" "kicker card" "h1 card" "lead card" "trails card" "foot card" ". card";grid-template-rows:auto 1fr auto auto auto auto auto 1fr}
 html.gv-v2 #authScreen .gate-trails{flex-direction:row;margin:0 0 14px;justify-content:flex-start}
 html.gv-v2 #authScreen .gate-trails>div{font-size:14px}
}
@media(max-width:900px){
 html.gv-v2 #authScreen{padding:8px 8px 14px}
 html.gv-v2 #authScreen:before{background:linear-gradient(#07040c8c,#07040c73 32%,#07040c40),url('/v2/art/auth-screen/gate-bg-phone.webp') center top/cover no-repeat}
 html.gv-v2 #authScreen :is(.gate-kicker,.gate-story h1){padding-left:0;text-shadow:0 2px 8px #000,0 0 3px #000}
 html.gv-v2 #authScreen .gate-layout{--w:min(calc(100vw - 16px),460px);display:flex;flex-direction:column;align-items:center;gap:0;max-width:none}
 html.gv-v2 #authScreen .gate-intro{display:contents}
 html.gv-v2 #authScreen .gate-story{display:block;padding:0;background:none;text-align:center;width:100%}
 html.gv-v2 #authScreen .create-logo-img{width:230px;height:104px;max-width:230px!important;margin:0 auto}
 html.gv-v2 #authScreen .gate-kicker{margin:2px 0 3px;font-size:11px}
 html.gv-v2 #authScreen .gate-story h1{margin:0 0 8px;font-size:25px}
 html.gv-v2 #authScreen .gate-story :is(.gate-lead,.gate-trails,.gate-footnote){display:none}
 html.gv-v2 #authScreen .gate-card{padding:calc(var(--w)*.15) calc(var(--w)*.14) calc(var(--w)*.09)}
 html.gv-v2 #authScreen .gate-card-head h2{font-size:25px}
 html.gv-v2 #authScreen .auth-tab{flex:1 1 0;min-width:0;padding:4px 1px;font-size:clamp(13px,4vw,16px);overflow-wrap:anywhere}
 html.gv-v2 body #authScreen .auth-btn{min-height:54px!important;font-size:20px!important}
 html.gv-v2 body #authScreen .btn-guest{width:88%!important;min-height:44px!important;font-size:15px!important}
 html.gv-v2 #authScreen .steam-wishlist strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 html.gv-v2 body #authScreen :is(.auth-btn,.btn-guest){transition:none}
}