/* World selection, concept C: each world is a war banner hanging in the council hall.
   Art: /v2/art/world-select/. --b is the banner width, everything scales from it. */
html.gv-v2 #worldSelectScreen{--gold:#ffe2a0;isolation:isolate;padding:14px 16px 20px;background:#07040c}
html.gv-v2 #worldSelectScreen:before{content:"";position:fixed;inset:0;z-index:-1;background:url('/v2/art/world-select/hall.webp') center/cover no-repeat}
html.gv-v2 #worldSelectScreen .world-card{width:100%;max-width:none;padding:0;border:0;border-image:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.gv-v2 #worldSelectScreen .auth-logo{margin:0 auto 2px}
html.gv-v2 #worldSelectScreen .create-logo-img{width:320px;height:150px}
html.gv-v2 #worldSelectScreen .world-title{display:flex;align-items:center;justify-content:center;gap:18px;margin:0;font:700 42px/1.15 var(--font-display,serif);color:var(--gold);text-shadow:0 2px 12px #0009}
html.gv-v2 #worldSelectScreen .world-title:before,html.gv-v2 #worldSelectScreen .world-title:after{content:"";flex:0 1 74px;height:1px;background:linear-gradient(90deg,transparent,#d8ad62)}
html.gv-v2 #worldSelectScreen .world-title:after{transform:scaleX(-1)}
html.gv-v2 #worldSelectScreen .world-email{margin:2px 0 14px;font-size:15px;color:#ead8bd;text-shadow:0 1px 6px #000c}

html.gv-v2 #worldSelectScreen .world-list{--b:clamp(340px,min(31vw,calc((100dvh - 330px)/1.448)),470px);--h:calc(var(--b)*1.448);display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(20px,5vw,84px)}

/* The banner itself: a playable world (button) or the countdown (section). */
html.gv-v2 #worldSelectScreen .world-btn,
html.gv-v2 #worldSelectScreen .gv-world-launch{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:0 0 auto;gap:0;box-sizing:border-box;width:var(--b);height:var(--h);min-height:0;margin:0;padding:calc(var(--h)*.385) calc(var(--b)*.14) 0;border:0;border-image:none;border-radius:0;--art:url('/v2/art/world-select/banner-eldervale.webp');background:var(--art) center/100% 100% no-repeat;box-shadow:none;color:#f1e1ca;text-align:center;filter:drop-shadow(0 18px 26px #000a);transform-origin:50% 4%;animation:gvBannerSway 11s ease-in-out infinite}
html.gv-v2 #worldSelectScreen .world-btn[data-world="dawnspire"],
html.gv-v2 #worldSelectScreen .gv-world-launch{--art:url('/v2/art/world-select/banner-dawnspire.webp');animation-delay:-5s}
html.gv-v2 #worldSelectScreen .gv-world-launch:after{display:none}
html.gv-v2 #worldSelectScreen .world-list:has(.world-btn[data-world="dawnspire"]) .gv-world-launch{display:none}
@keyframes gvBannerSway{0%,100%{transform:rotate(-.32deg)}50%{transform:rotate(.32deg)}}

html.gv-v2 #worldSelectScreen .world-btn{cursor:pointer;transition:filter .22s ease-out}
html.gv-v2 #worldSelectScreen .world-btn:hover:not(:disabled),
html.gv-v2 #worldSelectScreen .world-btn:focus-visible{outline:0;filter:drop-shadow(0 18px 26px #000a) drop-shadow(0 0 20px #ffd98a88) brightness(1.08)}
html.gv-v2 #worldSelectScreen .world-btn:focus-visible .world-btn-status{text-decoration:underline;text-underline-offset:4px}

/* Flatten the existing markup so name, badge, hero and action stack in the approved order. */
html.gv-v2 #worldSelectScreen .world-btn-left,
html.gv-v2 #worldSelectScreen .world-btn-left>div:last-child{display:contents}
html.gv-v2 #worldSelectScreen .world-btn-icon{display:none}
html.gv-v2 #worldSelectScreen .world-btn-name,
html.gv-v2 #worldSelectScreen .gv-world-launch h3{order:1;margin:0;font:700 calc(var(--b)*.105)/1.12 var(--font-display,serif)!important;color:#fbe6bd;text-shadow:0 2px 8px #0009;white-space:normal;overflow-wrap:anywhere}
html.gv-v2 #worldSelectScreen .world-badge{order:2;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:calc(var(--b)*.022) 0 calc(var(--b)*.014);padding:0;border:0;border-radius:0;background:none;color:#f3c561;font:700 calc(var(--b)*.05)/1.2 var(--font-display,serif);letter-spacing:.06em}
html.gv-v2 #worldSelectScreen .world-badge:before,html.gv-v2 #worldSelectScreen .world-badge:after{content:"";flex:0 1 calc(var(--b)*.2);height:1px;background:linear-gradient(90deg,transparent,#d8ad62)}
html.gv-v2 #worldSelectScreen .world-badge:after{transform:scaleX(-1)}
html.gv-v2 #worldSelectScreen .world-character{order:3;margin:0;font:400 calc(var(--b)*.05)/1.3 var(--font-body,serif);color:#f4e8d5;overflow-wrap:anywhere}
html.gv-v2 #worldSelectScreen .world-btn-status{order:4;margin:calc(var(--b)*.03) 0 0;font:italic 700 calc(var(--b)*.056)/1.2 var(--font-display,serif)!important;color:#f7c75f!important;text-transform:none;letter-spacing:0}

/* Countdown state of Dawnspire. */
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-copy{display:block;width:100%}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-lead{margin:calc(var(--b)*.016) 0 0;font:italic 400 calc(var(--b)*.048)/1.25 var(--font-display,serif);color:#f4e8d5}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-countdown{width:100%;margin-top:calc(var(--b)*.03)}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-timer{display:flex;justify-content:center;gap:calc(var(--b)*.05)}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-unit{min-width:0}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-unit strong{font:700 calc(var(--b)*.086)/1.05 var(--font-display,serif);color:#f7c75f}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-unit>span{margin:0;font:400 calc(var(--b)*.034)/1.3 var(--font-body,serif);color:#e9d9c2}
html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-date{margin:calc(var(--b)*.026) 0 0;font:400 calc(var(--b)*.042)/1.25 var(--font-body,serif);color:#f4e8d5}

html.gv-v2 #worldSelectScreen .world-logout{display:inline-flex;align-items:center;justify-content:center;gap:16px;width:auto;min-width:230px;min-height:48px;margin:6px 0 0;padding:8px 12px;background:none;color:#f1dcb4;font:400 19px var(--font-display,serif);text-shadow:0 1px 6px #000c;cursor:pointer}
html.gv-v2 #worldSelectScreen .world-logout:before,html.gv-v2 #worldSelectScreen .world-logout:after{content:"";width:70px;height:1px;background:linear-gradient(90deg,transparent,#d8ad62)}
html.gv-v2 #worldSelectScreen .world-logout:after{transform:scaleX(-1)}
html.gv-v2 #worldSelectScreen .world-logout:hover{color:#fff2d6}

@media(max-width:760px){
 html.gv-v2 #worldSelectScreen{padding:10px 8px 18px}
 html.gv-v2 #worldSelectScreen .create-logo-img{width:230px;height:108px}
 html.gv-v2 #worldSelectScreen .world-title{font-size:28px;gap:10px}
 html.gv-v2 #worldSelectScreen .world-title:before,html.gv-v2 #worldSelectScreen .world-title:after{flex-basis:24px}
 html.gv-v2 #worldSelectScreen .world-email{font-size:13px;margin-bottom:10px}
 html.gv-v2 #worldSelectScreen .world-list{--b:min(calc((100vw - 22px)/2),300px);flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:6px}
 /* Phone: rod and scene, then the tip, stay undistorted; only the plain cloth between them grows with the text. */
 html.gv-v2 #worldSelectScreen .world-btn,html.gv-v2 #worldSelectScreen .gv-world-launch{height:auto;min-height:calc(var(--b)*1.72);padding:5px calc(var(--b)*.12);background:none;border-style:solid;border-color:transparent;border-width:calc(var(--b)*.5566) 0 calc(var(--b)*.3741);border-image:var(--art) 546 0 367 0 fill / calc(var(--b)*.5566) 0 calc(var(--b)*.3741) / 0 stretch;justify-content:center}
 html.gv-v2 #worldSelectScreen .world-btn-name,html.gv-v2 #worldSelectScreen .gv-world-launch h3{font-size:calc(var(--b)*.118)!important}
 html.gv-v2 #worldSelectScreen .world-badge{font-size:max(10px,calc(var(--b)*.06));gap:6px;margin:3px 0}
 html.gv-v2 #worldSelectScreen .world-character{font-size:max(11px,calc(var(--b)*.068))}
 html.gv-v2 #worldSelectScreen .world-btn-status{margin-top:5px;font-size:max(12px,calc(var(--b)*.074))!important}
 html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-lead{margin-top:2px;font-size:max(11px,calc(var(--b)*.064))}
 html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-countdown{margin-top:5px}
 html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-timer{gap:calc(var(--b)*.028)}
 html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-unit strong{font-size:calc(var(--b)*.108)}
 html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-unit>span{font-size:max(9px,calc(var(--b)*.054))}
 html.gv-v2 #worldSelectScreen .gv-world-launch .gv-launch-date{margin-top:4px;font-size:max(10px,calc(var(--b)*.058))}
 html.gv-v2 #worldSelectScreen .world-logout{margin-top:10px}
}
@media(min-width:761px) and (max-height:820px){
 html.gv-v2 #worldSelectScreen .create-logo-img{width:190px;height:88px}
 html.gv-v2 #worldSelectScreen .world-title{font-size:32px}
 html.gv-v2 #worldSelectScreen .world-email{margin-bottom:8px}
 html.gv-v2 #worldSelectScreen .world-list{--b:clamp(330px,calc((100dvh - 232px)/1.448),470px)}
}
@media(prefers-reduced-motion:reduce){
 html.gv-v2 #worldSelectScreen .world-btn,html.gv-v2 #worldSelectScreen .gv-world-launch{animation:none;transition:none}
}

/* Dawnspire is the Steam-launch world: new players kept picking Eldervale (Mark, 10.11.2026). Pinned to the name, the only box that stays put on every screen. */
html.gv-v2 #worldSelectScreen .world-btn[data-world="dawnspire"] .world-btn-name{position:relative}
html.gv-v2 #worldSelectScreen .world-btn[data-world="dawnspire"] .world-btn-name::before{content:"NEW";position:absolute;z-index:3;bottom:calc(100% + .35em);left:50%;transform:translateX(-50%) rotate(-4deg);padding:.12em .55em;border:2px solid #ffe2a0;border-radius:999px;background:linear-gradient(#e0452f,#9d1f16);box-shadow:0 0 0 2px #3a0d08,0 4px 14px #000a,0 0 18px #ff6a3c99;color:#fff6dc;font-size:.52em;line-height:1;letter-spacing:.08em;text-shadow:0 1px 2px #5a120b;white-space:nowrap;pointer-events:none;animation:gvNewPulse 2.4s ease-in-out infinite}
@keyframes gvNewPulse{0%,100%{box-shadow:0 0 0 2px #3a0d08,0 4px 14px #000a,0 0 12px #ff6a3c66}50%{box-shadow:0 0 0 2px #3a0d08,0 4px 14px #000a,0 0 26px #ff8a4ccc}}
@media(prefers-reduced-motion:reduce){html.gv-v2 #worldSelectScreen .world-btn[data-world="dawnspire"] .world-btn-name::before{animation:none}}