/* The public welcome lobby lives outside the map and leaves the game HUD intact. */
.join-shade{padding:18px;display:flex;align-items:center;justify-content:center}
.welcome-layout{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1000px) minmax(210px,250px);gap:20px;align-items:center;width:min(1580px,100%);max-height:100%;min-height:0}
.welcome-layout .join-card{width:100%;max-height:100%;min-width:0;grid-template-columns:1fr 1fr}
.welcome-wing{position:relative;isolation:isolate;background:#19241f;padding:19px 17px;min-width:0;max-height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#8f7446 #17221e;box-shadow:0 12px 28px #0005}
/* One warm charcoal material across the three frames. The story is separated
   by light and a fine brass seam, rather than a different green panel. */
.welcome-layout{--welcome-surface:#242925;--welcome-grain:repeating-linear-gradient(0deg,transparent 0 3px,#ead2a503 3px 4px)}
.welcome-layout :is(.join-card,.welcome-wing){background-color:var(--welcome-surface)}
.welcome-layout :is(.join-card,.welcome-wing)>.ng-skin>.ng-c{background-color:var(--welcome-surface);background-image:var(--welcome-grain);background-size:auto;background-position:0 0;background-repeat:repeat}
.welcome-layout .welcome-story{background:radial-gradient(ellipse at 50% 0,#d6ad630d,transparent 68%);border-right-color:#b89a6140;box-shadow:inset -1px 0 #0b110c70}
.welcome-layout :is(.welcome-registration,.welcome-return){background:transparent}
.welcome-wing-head{padding-bottom:12px;border-bottom:1px solid #8e785042;margin-bottom:12px}
.welcome-wing-head .eyebrow{font:10px/14px var(--ng-body);letter-spacing:1.2px;color:#c6ab76}
.welcome-wing h2{font:400 26px/27px var(--ng-title);color:#efdbb2;margin:5px 0 0}
.roadmap-now{font:12px/16px var(--ng-body);color:#b1b9a0;padding:0 0 14px 2px}
.roadmap-now b{display:block;color:#ead4a8;font:400 21px/25px var(--ng-title);padding-left:13px}
.roadmap-live-dot{display:inline-block;width:5px;height:5px;background:#9ac5a2;box-shadow:0 0 8px #9ac5a245;margin-right:7px;vertical-align:2px}
.roadmap-steps{list-style:none;margin:0;padding:0}
.roadmap-steps li{position:relative;display:flex;gap:10px;min-height:65px;padding:10px 0}
.roadmap-steps li:not(:last-child):before{content:'';position:absolute;left:13px;top:34px;bottom:-9px;width:1px;background:#8d775244}
.roadmap-number{flex:none;position:relative;display:grid;place-items:center;width:27px;height:27px;font:400 17px var(--ng-title);color:#bba578;background:#12201a;border:1px solid #7b69464d}
.roadmap-steps li>div{min-width:0}.roadmap-steps b{font:600 14px/18px var(--ng-body);color:#ddd1b6;display:block}
.roadmap-steps p{font:11px/15px var(--ng-body);color:#a0ad98;margin:3px 0 0}
.roadmap-steps small{font:9px/12px var(--ng-body);letter-spacing:1px;color:#e7c17e;display:block;margin-bottom:3px}
.roadmap-next .roadmap-number{color:#fae0aa;border-color:#b09352;background:#48371b}.roadmap-next b{color:#f0d59b}
.roadmap-footer{font:11px/16px var(--ng-body);color:#a0ae95;border-top:1px solid #8e785042;padding-top:13px;margin:13px 0 0;text-align:center}
.casting-board .welcome-wing-head{margin-bottom:10px}
.casting-total{display:flex;align-items:center;gap:10px}.casting-total strong{font:400 36px/38px var(--ng-title);color:#f0d59b;min-width:30px}.casting-total span{font:12px/15px var(--ng-body);color:#c5c9b3}
.casting-status{font:10px/15px var(--ng-body);color:#aac5ad;margin:5px 0 12px}.casting-status:before{content:'';display:inline-block;width:4px;height:4px;background:#94c6a2;margin:0 6px 2px 0}.casting-stale .casting-status{color:#d3b885}.casting-stale .casting-status:before{background:#d3b885}
.profession-census+.profession-census{margin-top:13px}
.profession-census h3{display:flex;justify-content:space-between;align-items:baseline;gap:5px;font:400 20px/23px var(--ng-title);color:#ead4aa;margin:0 0 4px;padding-bottom:5px;border-bottom:1px solid #8e785042}
.profession-census h3 small{font:8px/10px var(--ng-body);letter-spacing:.7px;color:#9caa90}
.profession-census ol{list-style:none;padding:0;margin:0}
.census-row{display:flex;align-items:center;gap:7px;min-height:25px;padding:2px 0;border-bottom:1px solid #92956b15;font:12px/17px var(--ng-body);color:#c9cdb7}
.census-row>.ng-art{width:18px;max-height:21px;flex:none}.census-row>span:not(.ng-art){flex:1;min-width:0}.census-row>b{font:400 19px/20px var(--ng-title);color:#ecd7ac;text-align:right;min-width:22px}
.casting-footnote{font:10px/14px var(--ng-body);color:#94a18d;margin:9px 0 12px}
.economy-note{position:relative;background:#dec18c;color:#4d3922;padding:12px;isolation:isolate}.economy-note b{display:block;font:600 13px/16px var(--ng-body);color:#50371c}.economy-note p{font:11px/15px var(--ng-body);margin:5px 0 7px;color:#6c5031}.economy-note small{font:600 10px/14px var(--ng-body);color:#594023}
@media(max-width:1550px){
  .join-shade{padding-inline:14px}.welcome-layout{grid-template-columns:210px minmax(0,1000px) 220px;gap:14px}
  .welcome-layout .welcome-story,.welcome-layout .welcome-registration{padding-inline:18px}
  .welcome-layout .welcome-topline{gap:5px}.welcome-layout .live-ticket{font-size:8px;letter-spacing:0}
  .welcome-layout .welcome-topline .eyebrow{font-size:9px;letter-spacing:.7px}
}
@media(max-width:1220px){
  .welcome-layout{grid-template-columns:178px minmax(0,1000px) 190px;gap:11px}.join-shade{padding-inline:10px}
  .welcome-wing{padding:16px 13px}.welcome-wing h2{font-size:22px;line-height:24px}.welcome-wing-head .eyebrow{font-size:9px;letter-spacing:.8px}
  .welcome-layout .welcome-story,.welcome-layout .welcome-registration{padding-inline:14px}
  .welcome-layout .welcome-topline .live-ticket{display:none}.welcome-layout .welcome-village>span{font-size:24px}
  .welcome-layout .join-card h1{font-size:28px}.welcome-layout .welcome-lead{font-size:12px;line-height:17px}
  .welcome-layout .welcome-registration h2{font-size:24px;line-height:26px}
  .welcome-layout .welcome-loop{gap:4px;font-size:11px}.welcome-layout .welcome-loop .ng-art{width:17px}.welcome-layout .welcome-loop i{margin-inline:0}
  .welcome-layout .show-facts span{font-size:10px}.welcome-layout .choice-copy b{font-size:14px}.welcome-layout .choice-copy small{font-size:11px;line-height:14px}
  .roadmap-steps{margin-left:0}.roadmap-steps li{gap:8px}.roadmap-steps b{font-size:13px}.roadmap-steps p{font-size:10px;line-height:14px}
  .profession-census h3{font-size:18px}.profession-census h3 small{font-size:7px;letter-spacing:.4px}.census-row{font-size:11px;gap:5px}.census-row>.ng-art{width:16px}
  .economy-note{padding:10px}.economy-note b{font-size:12px}.economy-note p{font-size:10px;line-height:14px}.economy-note small{font-size:9px;line-height:12px}
}
@media(max-height:780px){
  .join-shade{padding-block:12px}.welcome-wing{padding-block:15px}.welcome-wing-head{padding-bottom:9px;margin-bottom:9px}
  .roadmap-now{padding-bottom:9px}.roadmap-steps li{min-height:56px;padding-block:8px}.roadmap-footer{margin-top:9px;padding-top:9px}
  .casting-total strong{font-size:32px;line-height:33px}.casting-status{margin-bottom:9px}.census-row{min-height:23px;padding-block:2px}.profession-census+.profession-census{margin-top:9px}.casting-footnote{margin-block:7px 9px}
}
@media(max-height:700px){
  .join-shade{padding-block:8px}.welcome-wing{padding-block:13px}.welcome-wing h2{font-size:23px;line-height:25px}
  .welcome-wing-head{padding-bottom:8px;margin-bottom:8px}.roadmap-now{font-size:11px;padding-bottom:6px}.roadmap-now b{font-size:19px;line-height:22px}
  .roadmap-steps li{min-height:50px;padding-block:6px}.roadmap-steps p{font-size:10px;line-height:14px}.roadmap-footer{font-size:10px;line-height:14px;padding-top:8px;margin-top:8px}
  .casting-board .welcome-wing-head{margin-bottom:7px}.casting-total strong{font-size:29px;line-height:30px}.casting-total span{font-size:11px;line-height:13px}.casting-status{font-size:9px;line-height:13px;margin-block:4px 8px}
  .profession-census h3{font-size:18px;line-height:20px;padding-bottom:3px;margin-bottom:3px}.census-row{min-height:21px;padding-block:1px}.census-row>b{font-size:18px;line-height:19px}.census-row>.ng-art{max-height:18px}
  .profession-census+.profession-census{margin-top:8px}.casting-footnote{margin-block:6px 8px;font-size:9px;line-height:12px}.economy-note{padding:10px}.economy-note p{font-size:10px;line-height:13px;margin-block:4px}.economy-note small{font-size:9px;line-height:12px}
}
/* Give each frame a definite shared track: no content can slip below the HUD. */
.welcome-layout{height:min(660px,100%);grid-template-rows:minmax(0,1fr);align-items:stretch}
.welcome-layout .join-card{height:100%;min-height:0}
.welcome-wing{min-height:0;height:100%;display:flex;flex-direction:column}
.welcome-wing>*:not(.ng-skin){flex-shrink:0}
.roadmap-footer{margin-top:auto}.casting-board .economy-note{margin-top:auto}
@media(max-height:780px){
  .casting-board{padding-block:12px}.casting-board .welcome-wing-head .eyebrow{display:none}
  .casting-board .welcome-wing-head{padding-bottom:5px;margin-bottom:5px}.casting-board h2{font-size:22px;line-height:24px;margin:0}
  .casting-total strong{font-size:25px;line-height:27px}.casting-total span{font-size:10px;line-height:12px}
  .casting-status{font-size:9px;line-height:11px;margin:3px 0 6px}
  .profession-census h3{font-size:17px;line-height:18px;padding-bottom:2px;margin-bottom:2px}
  .profession-census+.profession-census{margin-top:7px}
  .census-row{font-size:11px;line-height:15px;min-height:21px;padding-block:1px}.census-row>b{font-size:17px;line-height:18px}.census-row>.ng-art{width:15px;max-height:17px}
  .casting-footnote{font-size:9px;line-height:12px;margin:6px 0 8px}
  .economy-note{padding:10px}.economy-note b{font-size:12px;line-height:14px}.economy-note p{font-size:10px;line-height:13px;margin:4px 0 0}
}
@media(max-width:1220px) and (max-height:700px){
  .welcome-layout .join-card h1{font-size:24px}.welcome-layout .welcome-village{height:86px}
  .welcome-layout .welcome-registration h2{font-size:23px}
  .welcome-layout .welcome-fine{font-size:10px;line-height:13px}
  .welcome-layout .welcome-lead{font-size:11px;line-height:15px}
}
@media(min-height:701px) and (max-height:780px){
  .casting-board h2{font-size:25px;line-height:27px}.casting-board .welcome-wing-head{padding-bottom:9px;margin-bottom:10px}
  .casting-total strong{font-size:31px;line-height:33px}.casting-total span{font-size:11px;line-height:14px}
  .casting-status{font-size:10px;line-height:14px;margin-block:5px 11px}
  .profession-census h3{font-size:20px;line-height:22px;padding-bottom:5px;margin-bottom:4px}
  .census-row{min-height:24px;padding-block:2px;font-size:12px;line-height:17px}.census-row>b{font-size:19px;line-height:20px}.census-row>.ng-art{width:16px;max-height:20px}
  .profession-census+.profession-census{margin-top:12px}
}