/* Character creation, concept A: the three classes as war banners in the same hall as world selection.
   Art: /v2/art/create-screen/. --b is the banner width. Rod and tip stay undistorted; only the plain cloth
   between them grows with the content. */
html.gv-v2 body #createScreen{background:#07040c!important;isolation:isolate}
html.gv-v2 body #createScreen:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#07040c70,#07040c70),url('/v2/art/world-select/hall.webp') center/cover no-repeat}

html.gv-v2 #createScreen.creation-layout-ready .create-section-label,
html.gv-v2 #createScreen.creation-layout-ready .create-veil h2,
html.gv-v2 #createScreen .creation-appearance legend{font:700 25px/1.2 var(--font-display,serif);color:#ffe2a0;letter-spacing:.02em;text-shadow:0 2px 10px #000b;text-align:center}

/* Name field */
html.gv-v2 #createScreen .creation-hero .name-input-wrap{align-items:center;justify-content:center;width:min(760px,100%);max-width:none;gap:18px;margin:0 auto}
html.gv-v2 #createScreen .creation-hero .name-input-wrap .create-section-label{max-width:none;margin:0;white-space:nowrap}
html.gv-v2 #createScreen .creation-hero .name-input{flex:0 1 480px;width:480px;max-width:100%;height:52px;padding:0 6px;box-sizing:border-box;background:none;border-style:solid;border-color:transparent;border-width:0 64px;border-image:url('/v2/art/create-screen/name-frame.webp') 0 96 fill / 0 64px / 0 stretch;border-radius:0;box-shadow:none;color:#fff0da;font-size:18px;text-align:center}
html.gv-v2 #createScreen .creation-hero .name-input::placeholder{color:#c9b8ae;font-style:italic}

/* Class banners */
html.gv-v2 #createScreen.creation-layout-ready .class-grid{--b:clamp(216px,19.5vw,286px);display:grid;grid-template-columns:repeat(3,var(--b));justify-content:center;gap:clamp(6px,1vw,16px);width:auto;margin:0}
html.gv-v2 #createScreen.creation-layout-ready .class-card{--art:url('/v2/art/create-screen/banner-warrior.webp');display:block;box-sizing:border-box;width:var(--b);padding:0 calc(var(--b)*.135);background:none;border-style:solid;border-color:transparent;border-width:calc(var(--b)*.153) 0 calc(var(--b)*.358);border-image:var(--art) 110 0 258 0 fill / calc(var(--b)*.153) 0 calc(var(--b)*.358) / 0 stretch;border-radius:0;box-shadow:none;filter:drop-shadow(0 16px 22px #000a);text-align:center;transition:filter .22s ease-out}
html.gv-v2 #createScreen.creation-layout-ready .class-card[data-class="mage"]{--art:url('/v2/art/create-screen/banner-mage.webp')}
html.gv-v2 #createScreen.creation-layout-ready .class-card[data-class="blade_dancer"]{--art:url('/v2/art/create-screen/banner-blade.webp')}
html.gv-v2 #createScreen.creation-layout-ready .class-card:hover,
html.gv-v2 #createScreen.creation-layout-ready .class-card:focus-visible{outline:0;filter:drop-shadow(0 16px 22px #000a) drop-shadow(0 0 12px #ffd98a66) brightness(1.06)}
html.gv-v2 #createScreen.creation-layout-ready .class-card.selected{filter:drop-shadow(0 0 3px #ffe9a8) drop-shadow(0 0 20px #ffc14dcc) brightness(1.08);box-shadow:none}
html.gv-v2 #createScreen .class-card.selected:after{display:none}
html.gv-v2 #createScreen.creation-layout-ready .gate-full-hero{display:block;width:auto;max-width:100%;aspect-ratio:320/390;height:clamp(110px,20dvh,190px);margin:0 auto 4px}
html.gv-v2 #createScreen.creation-layout-ready .class-name{font:700 calc(var(--b)*.092)/1.15 var(--font-display,serif);color:#ffe7bb;text-shadow:0 2px 6px #000a;margin:0 0 5px;overflow-wrap:anywhere}
html.gv-v2 #createScreen.creation-layout-ready .class-desc{font:italic 400 13px/1.35 var(--font-body,serif);color:#f4e8d5;min-height:0;margin:0 0 7px}
html.gv-v2 #createScreen.creation-layout-ready .class-passives{gap:1px 9px}
html.gv-v2 #createScreen.creation-layout-ready .class-passive{padding:0;background:none;font-size:13px;font-weight:600;line-height:1.4;text-shadow:0 1px 3px #000c}
html.gv-v2 #createScreen .class-passive.buff{color:#b9f2bd}
html.gv-v2 #createScreen .class-passive.debuff{color:#ffc9bd}
html.gv-v2 #createScreen.creation-layout-ready .class-matchup{margin-top:7px;font-size:13px;line-height:1.4}
html.gv-v2 #createScreen .class-matchup :is(.class-strong,.class-weak){display:block;color:#f4e8d5}

/* Avatars */
html.gv-v2 #createScreen .creation-appearance{margin:0;padding:0;border:0;min-width:0;text-align:center}
html.gv-v2 #createScreen .creation-appearance legend{padding:0;margin:0 auto 12px;font-size:21px}
html.gv-v2 #createScreen .creation-avatar-choices{display:flex;flex-direction:column;align-items:center;gap:8px}
html.gv-v2 #createScreen .creation-avatar-choices button{position:relative;display:block;width:96px;height:102px;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;opacity:.78;transition:opacity .18s ease-out,filter .18s ease-out}
html.gv-v2 #createScreen .creation-avatar-choices button img{position:absolute;left:6%;top:5.6%;width:88%;height:83%;object-fit:cover;border:0;border-radius:50%}
html.gv-v2 #createScreen .creation-avatar-choices button:after{content:"";position:absolute;inset:0;background:url('/v2/art/create-screen/avatar-ring.webp') center/100% 100% no-repeat}
html.gv-v2 #createScreen .creation-avatar-choices button:hover{opacity:1}
html.gv-v2 #createScreen .creation-avatar-choices button[aria-pressed="true"]{opacity:1;filter:drop-shadow(0 0 3px #ffe9a8) drop-shadow(0 0 12px #ffc14dcc)}
html.gv-v2 #createScreen .creation-avatar-choices button[aria-pressed]:not(:focus-visible){border:0!important;outline:0!important;background:none!important;box-shadow:none!important}
html.gv-v2 #createScreen .creation-appearance p{margin:12px 0 0;font-size:13px;line-height:1.4;color:#ead8bd;text-shadow:0 1px 5px #000c}

/* Sides */
html.gv-v2 #createScreen.creation-layout-ready .create-veil-side{display:flex;flex-direction:column;align-items:center;padding:4px;background:none;border:0;border-image:none;border-radius:0;box-shadow:none;filter:none;cursor:pointer;transition:opacity .18s ease-out}
html.gv-v2 #createScreen.creation-layout-ready .create-veil-side img{width:92px;height:92px;object-fit:contain;transition:filter .18s ease-out}
html.gv-v2 #createScreen.creation-layout-ready .create-veil-side strong{color:#ffe2a0;font-size:21px}
html.gv-v2 #createScreen.creation-layout-ready .create-veil-side small{color:#f0e2cd;font-size:13px;line-height:1.35;text-shadow:0 1px 5px #000c}
html.gv-v2 #createScreen .create-veil-side[aria-pressed]:not(:focus-visible){border:0!important;outline:0!important;background:none!important;box-shadow:none!important}
html.gv-v2 #createScreen .create-veil-grid:has([aria-pressed="true"]) .create-veil-side[aria-pressed="false"]{opacity:.6}
html.gv-v2 #createScreen .create-veil-side[aria-pressed="true"] img{filter:drop-shadow(0 0 3px #ffe9a8) drop-shadow(0 0 16px #ffc14dcc)}
html.gv-v2 #createScreen .create-veil-side:hover img{filter:drop-shadow(0 0 10px #ffd98a88)}

/* The notice is information, not an error */
html.gv-v2 #createScreen.creation-layout-ready .veil-choice-warning{margin:0 auto;padding:0;border:0;background:none;text-align:center;color:#ead8bd;font-size:14px;line-height:1.4;text-shadow:0 1px 5px #000e}
html.gv-v2 #createScreen.creation-layout-ready .veil-choice-warning strong{display:inline;color:#ffe2a0;font-size:15px}
html.gv-v2 #createScreen.creation-layout-ready .veil-choice-warning p{display:inline;margin:0 0 0 5px;color:inherit}

/* Main button */
html.gv-v2 body #createScreen.creation-layout-ready .btn-begin,
html.gv-v2 body #createScreen.creation-layout-ready .creation-next{width:380px;max-width:100%;min-height:68px;margin:0 auto;padding:6px 52px;border:0;border-radius:0;background:transparent url('/v2/art/create-screen/begin-button.webp') center/100% 100% no-repeat!important;box-shadow:none;color:#2d1804;font:700 21px/1.1 var(--font-display,serif);letter-spacing:.02em;text-shadow:0 1px 0 #ffe9b866;cursor:pointer;transition:filter .18s ease-out}
html.gv-v2 body #createScreen .btn-begin:hover:not(:disabled),
html.gv-v2 body #createScreen .creation-next:hover:not(:disabled){filter:brightness(1.1) drop-shadow(0 0 12px #ffc14d99)}
html.gv-v2 body #createScreen .btn-begin:disabled,
html.gv-v2 body #createScreen .creation-next:disabled{opacity:.55;filter:saturate(.45);cursor:default}

@media(min-width:960px){
 html.gv-v2 body #createScreen.creation-layout-ready{grid-template-columns:minmax(150px,210px) auto minmax(170px,230px);grid-template-rows:auto auto auto auto auto auto;grid-template-areas:"logo logo logo" "name name name" "avatar label sideh" "avatar classes sides" "warn warn warn" "foot foot foot";justify-content:center;align-content:center;align-items:start;justify-items:center;column-gap:clamp(16px,2.6vw,48px);row-gap:6px;padding:12px 18px}
 html.gv-v2 #createScreen .creation-main,html.gv-v2 #createScreen .creation-hero,html.gv-v2 #createScreen .create-veil{display:contents}
 html.gv-v2 #createScreen.creation-layout-ready>.create-logo-img{grid-area:logo;width:230px;height:88px;object-fit:contain}
 html.gv-v2 #createScreen .creation-hero .name-input-wrap{grid-area:name}
 html.gv-v2 #createScreen .creation-hero>.create-section-label{grid-area:label;margin:0}
 html.gv-v2 #createScreen.creation-layout-ready .class-grid{grid-area:classes}
 html.gv-v2 #createScreen .creation-appearance{grid-area:avatar;align-self:center}
 html.gv-v2 #createScreen.creation-layout-ready .create-veil h2{grid-area:sideh;margin:0}
 html.gv-v2 #createScreen.creation-layout-ready .create-veil-grid{grid-area:sides;display:flex;flex-direction:column;align-self:center;gap:14px;width:100%}
 html.gv-v2 #createScreen.creation-layout-ready .veil-choice-warning{grid-area:warn;max-width:1040px}
 html.gv-v2 #createScreen .creation-footer{grid-area:foot;width:100%}
}
@media(min-width:960px) and (max-height:800px){
 html.gv-v2 #createScreen.creation-layout-ready>.create-logo-img{width:150px;height:52px}
 html.gv-v2 #createScreen.creation-layout-ready .gate-full-hero{height:clamp(90px,15dvh,120px)}
 html.gv-v2 #createScreen.creation-layout-ready .create-section-label,html.gv-v2 #createScreen.creation-layout-ready .create-veil h2{font-size:20px}
 html.gv-v2 #createScreen .creation-hero .name-input{height:44px}
 html.gv-v2 #createScreen.creation-layout-ready .class-desc,html.gv-v2 #createScreen.creation-layout-ready .class-passive,html.gv-v2 #createScreen.creation-layout-ready .class-matchup{font-size:12px}
 html.gv-v2 #createScreen .creation-avatar-choices button{width:72px;height:77px}
 html.gv-v2 #createScreen.creation-layout-ready .create-veil-side img{width:68px;height:68px}
 html.gv-v2 body #createScreen.creation-layout-ready .btn-begin{min-height:54px;font-size:18px}
 html.gv-v2 #createScreen.creation-layout-ready .veil-choice-warning{font-size:12px}
}
@media(max-width:959px){
 html.gv-v2 #createScreen.creation-layout-ready .create-section-label,html.gv-v2 #createScreen.creation-layout-ready .create-veil h2,html.gv-v2 #createScreen .creation-appearance legend{font-size:20px}
 html.gv-v2 #createScreen .creation-hero .name-input-wrap{flex-direction:column;gap:6px;width:100%;margin-bottom:8px}
 html.gv-v2 #createScreen .creation-hero .name-input{flex:none;width:min(360px,100%);height:48px;font-size:16px;border-width:0 44px;border-image-width:0 44px}
 html.gv-v2 #createScreen.creation-layout-ready .class-grid{--b:min(calc((100vw - 50px)/3),176px);gap:7px;margin-top:4px}
 html.gv-v2 #createScreen.creation-layout-ready .class-card{padding:0 calc(var(--b)*.1)}
 html.gv-v2 #createScreen.creation-layout-ready .gate-full-hero{height:clamp(80px,15dvh,132px);margin-bottom:2px}
 html.gv-v2 #createScreen.creation-layout-ready .class-name{font-size:max(13px,calc(var(--b)*.118));min-height:0;margin:0}
 html.gv-v2 #createScreen .creation-class-detail{margin-top:10px;min-height:0}
 html.gv-v2 #createScreen .creation-class-detail .class-desc{font-size:14px;margin-bottom:5px}
 html.gv-v2 #createScreen .creation-class-detail .class-passive{font-size:13px}
 html.gv-v2 #createScreen .creation-class-detail .class-matchup{font-size:13px;margin-top:5px}
 html.gv-v2 #createScreen .creation-class-detail .class-matchup :is(.class-strong,.class-weak){display:inline;margin:0 5px}
 html.gv-v2 #createScreen .creation-appearance{margin-top:10px}
 html.gv-v2 #createScreen .creation-appearance legend{margin-bottom:6px;font-size:17px}
 html.gv-v2 #createScreen .creation-avatar-choices{flex-direction:row;justify-content:center;gap:14px}
 html.gv-v2 #createScreen .creation-avatar-choices button{width:62px;height:66px}
 html.gv-v2 #createScreen .creation-appearance p{margin-top:6px;font-size:12px}
 html.gv-v2 #createScreen.creation-layout-ready .create-veil-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 html.gv-v2 #createScreen.creation-layout-ready .veil-choice-warning{margin-top:18px}
 html.gv-v2 body #createScreen.creation-layout-ready .btn-begin,html.gv-v2 body #createScreen.creation-layout-ready .creation-next{width:min(350px,100%);min-height:62px;padding:6px 40px;font-size:17px}
 html.gv-v2 body #createScreen[data-creation-step=veil] .creation-next{display:none}
 html.gv-v2 body #createScreen[data-creation-step=hero] .creation-next{display:block}
}
@media(prefers-reduced-motion:reduce){
 html.gv-v2 #createScreen .class-card,html.gv-v2 #createScreen .create-veil-side,html.gv-v2 #createScreen .creation-avatar-choices button{transition:none}
}

/* Veil side: share of active players and the joining bonus (launch-week.js veilCreateInfo). */
html.gv-v2 #createScreen .create-veil-side .vb-share{margin-top:4px;color:#bfae93;font-size:12px;letter-spacing:.03em}
html.gv-v2 #createScreen .create-veil-side .vb-tag{display:flex;flex-direction:column;align-items:center;margin-top:8px;padding:5px 12px;border-top:1px solid #d9b06488;border-bottom:1px solid #d9b06488;background:linear-gradient(90deg,transparent,#3a240a99,transparent)}
html.gv-v2 #createScreen .create-veil-side .vb-tag b{color:#ffd98a;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
html.gv-v2 #createScreen .create-veil-side .vb-tag i{color:#f4e8d5;font-style:normal;font-size:13px}
html.gv-v2 #createScreen .create-veil .vb-rule{margin:6px auto 0;max-width:520px;text-align:center;color:#d6cbb8;font-size:13px;line-height:1.4}
html.gv-v2 #createScreen .create-veil-side .vb-tag em{margin-top:3px;max-width:220px;color:#cbbfa9;font-style:normal;font-size:11.5px;line-height:1.35}

/* Joining bonus made loud (Mark 11.11 evening): a gold seal, a halo behind the crest, the reward with its pictures. */
html.gv-v2 #createScreen .create-veil-side.vb-pays{position:relative;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#f0b84a2e,transparent 70%);box-shadow:0 0 0 1px #f3cf8699,0 0 34px #f0b84a40}
html.gv-v2 #createScreen .create-veil-side.vb-pays img:not(.vb-loot img){filter:drop-shadow(0 0 16px #ffcf6eaa) drop-shadow(0 0 4px #ffcf6e)}
html.gv-v2 #createScreen .create-veil-side.vb-pays:before{content:'';position:absolute;left:50%;top:6px;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,#ffcf6e55,transparent 68%);animation:vbHalo 2.6s ease-in-out infinite;pointer-events:none}
@keyframes vbHalo{50%{opacity:.45;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){html.gv-v2 #createScreen .create-veil-side.vb-pays:before{animation:none}}
html.gv-v2 #createScreen .create-veil-side .vb-seal{position:absolute;right:-6px;top:-8px;z-index:2;padding:5px 11px 4px;border-radius:6px;background:linear-gradient(180deg,#f6d27c,#c4903c);color:#2a1606;font:800 12px/1 var(--font-body,inherit);letter-spacing:.12em;box-shadow:0 4px 12px #000a,0 0 16px #f0b84a88;transform:rotate(6deg)}
html.gv-v2 #createScreen .create-veil-side .vb-tag{gap:4px;margin-top:10px;padding:10px 12px;border:1px solid #f3cf8688;border-radius:10px;background:linear-gradient(180deg,#3a240acc,#1e1208cc)}
html.gv-v2 #createScreen .create-veil-side .vb-tag strong{color:#fff;font:700 14px/1.3 var(--font-body,inherit)}
html.gv-v2 #createScreen .create-veil-side .vb-tag b{font-size:15px}
html.gv-v2 #createScreen .create-veil-side .vb-loot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2px}
html.gv-v2 #createScreen .create-veil-side .vb-loot img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px #ff9a2a88)}
html.gv-v2 #createScreen .create-veil-side .vb-loot i{color:#ffd98a;font-style:normal;font-weight:700;font-size:14px;line-height:1.25;text-align:left}
html.gv-v2 #createScreen .create-veil-side .vb-none{display:block;margin-top:4px;color:#9d8f7b;font-size:12px}
html.gv-v2 #createScreen .create-veil-side.vb-big img{filter:saturate(.7) brightness(.85)}