/* Entry-only presentation. Each screen owns its scroll area; artwork stays
   behind its content and never exposes the game canvas while scrolling. */
.auth-gate,.server-hub,.character-hub,.creator{
 position:fixed;inset:0;isolation:isolate;overflow-x:hidden;overflow-y:auto;
 overscroll-behavior:contain;scrollbar-gutter:stable;background:#101211;color:#eee5d2;
 -webkit-overflow-scrolling:touch;
}
.auth-scene,.creator-backdrop,.realm-backdrop,.server-hub .realm-backdrop,.character-hub .creator-backdrop{
 position:fixed;inset:0;z-index:-1;pointer-events:none;filter:none;backdrop-filter:none;
 background:linear-gradient(90deg,#0b1116b0,#0b111647 45%,#0b1116d9),linear-gradient(0deg,#090d11f5,transparent 75%),url('../assets/entry/frontier.webp?v=98') center/cover no-repeat;
}
.auth-card,.hub-shell,.server-shell,.creator-shell{
 position:relative;display:grid;width:min(1160px,calc(100% - 64px));min-height:100%;height:auto;
 margin:0 auto;padding:28px 0 max(28px,env(safe-area-inset-bottom));gap:26px 56px;
 align-items:center;align-content:center;grid-template-rows:none;
}
.auth-card{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:'brand brand' 'story form' '. footer'}
.auth-card>header,.hub-shell>header,.server-shell>header,.creator-shell>header{
 display:flex;grid-column:1/-1;grid-row:auto;align-items:center;justify-content:space-between;
 gap:16px;padding:0 0 20px;border-bottom:1px solid #c09b553d;
}
.auth-card>header{grid-area:brand;justify-content:flex-start}
.auth-card>header>div{display:grid;gap:4px}
.auth-card>header img,.creator-brand img{width:36px;height:36px;object-fit:contain}
.auth-card>header b,.creator-brand>span:not(.entry-beta){font:600 13px Georgia,serif;letter-spacing:.24em;color:#f0e2c3}
.auth-card>header>div>span,.creator-brand>b{font:10px Georgia,serif;letter-spacing:.25em;color:#bd915c}
.creator-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.entry-beta,.auth-card>header>.entry-beta,.creator-brand>.entry-beta{
 display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #a89a654d;border-radius:3px;
 background:#111915d9;color:#d4ceae;font:600 10px/1.2 system-ui;letter-spacing:.08em;white-space:nowrap;
}
.entry-beta::before{content:'';width:6px;height:6px;border-radius:50%;background:#95c394;box-shadow:0 0 9px #95c39455}
.auth-card>header>.entry-beta{margin-left:auto}
.auth-message{grid-area:story;margin:0;padding:30px 0}
.auth-message small,.hub-copy>small,.realm-copy>small,.creator-copy>p{font:600 10px/1.6 system-ui;letter-spacing:.2em;color:#d1ae70}
.auth-message h1{margin:22px 0;font:400 clamp(42px,5.2vw,72px)/1.12 Georgia,serif;letter-spacing:-.035em;text-shadow:0 4px 22px #0009}
.auth-message h1 em,.hub-copy h1 em,.creator-copy h1 em,.realm-copy h1 em{color:#e1bd7e;font-weight:400}
.auth-message>p{max-width:405px;margin:0;color:#c9c7bb;font:14px/1.85 system-ui}
.entry-benefits{display:flex;flex-wrap:wrap;gap:20px;margin-top:34px;padding-top:24px;border-top:1px solid #c09b553d}
.entry-benefits>span{display:grid;gap:7px;color:#a8aea7;font:10px system-ui;letter-spacing:.03em}
.entry-benefits b{font:24px Georgia,serif;color:#ead5ad}
.auth-form{grid-area:form;display:grid;gap:16px;padding:32px;border:1px solid #ad854f88;border-radius:4px;background:linear-gradient(145deg,#202522f5,#101719fc);box-shadow:0 20px 65px #0006,inset 0 0 0 4px #d2ac6410;backdrop-filter:none}
.auth-form h2{margin:0 0 8px;color:#f0e3ca;font:27px Georgia,serif}
.auth-form label,.name-row label{display:grid;gap:7px;min-width:0}
.auth-form label>span,.name-row label>span{font:600 10px/1.5 system-ui;letter-spacing:.1em;color:#b9b5a6}
.auth-form input:not([type=checkbox]),.name-row input,.name-row label select{width:100%;min-width:0;height:46px;padding:0 12px;border:1px solid #aaa08055;border-radius:3px;outline:0;background:#0b1214;color:#efe7d6;font:14px system-ui;box-sizing:border-box}
.auth-form input::placeholder,.name-row input::placeholder{color:#7f8b89}
.auth-form input:focus,.name-row input:focus,.name-row select:focus{outline:2px solid #c7a570;outline-offset:2px}
.auth-options{display:flex;justify-content:space-between;align-items:center;gap:12px;font:12px system-ui;color:#b9bbae}
.auth-options label{display:flex;align-items:center;gap:7px}.auth-options input{width:15px;height:15px;accent-color:#bf9a5f}
.auth-options button,.password-toggle{border:0;padding:4px;background:none;color:#d4b37c;font:12px system-ui}
.password-toggle{justify-self:end;margin-top:-10px;min-height:24px}
.auth-primary,.realm-enter,.name-row>button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;height:auto;padding:13px 18px;border:1px solid #edc981a6;border-radius:3px;background:linear-gradient(#c7a16b,#98703f);box-shadow:inset 0 1px #ffe3a859,0 3px 10px #0004;color:#161b19;font:700 13px system-ui;letter-spacing:.03em;cursor:pointer}
.auth-primary:hover,.realm-enter:hover,.name-row>button:hover{filter:brightness(1.1)}
.auth-primary:disabled,.realm-enter:disabled,.name-row>button:disabled{cursor:default;opacity:.45;filter:grayscale(.5)}
.auth-feedback{min-height:0;margin:0;color:#ffa99e;font:12px/1.6 system-ui}.auth-feedback:empty{display:none}.auth-feedback.success{color:#a5d39c}
.auth-card>footer{grid-area:footer;display:flex;justify-content:center;align-items:center;gap:8px;padding:0;border:0;color:#b7b9ae;font:12px system-ui}
.auth-card>footer button{border:0;background:transparent;color:#e5bf81;font:600 12px system-ui;cursor:pointer}
.hub-shell,.creator-shell{grid-template-columns:minmax(0,1fr);max-width:1060px;align-items:start;gap:22px}
.hub-shell>header button,.creator-shell>header button,.server-shell>header button{flex-shrink:0;min-height:36px;padding:8px 12px;border:1px solid #ac956351;border-radius:3px;background:#141c1edd;color:#d6c6a5;font:12px system-ui;cursor:pointer}
.hub-copy,.creator-copy,.realm-copy{grid-column:1;grid-row:auto;margin:0;position:static}
.hub-copy h1,.creator-copy h1{font:38px/1.16 Georgia,serif;margin:10px 0}.hub-copy h1 br,.creator-copy h1 br{display:none}
.hub-copy p,.creator-copy>span{font:13px/1.8 system-ui;color:#c6c7b9}.creator-copy>p{margin:0}
.character-layout{display:grid;grid-column:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch;min-width:0}
.character-list{grid-column:auto;display:flex;flex-direction:column;gap:12px;min-width:0}
.character-select{display:grid;grid-template-columns:48px minmax(0,1fr) 18px;gap:14px;min-height:108px;padding:18px;background:#162020ef;border:1px solid #ac956351;border-radius:4px;color:#eee6d4;text-align:left;backdrop-filter:none}
.character-select.selected{border-color:#d3ab68;background:linear-gradient(110deg,#3e3b2df5,#152020ef);box-shadow:inset 3px 0 #d3ab68}
.character-select:hover{transform:none;border-color:#d3ab68}.character-select b{font:23px Georgia,serif;overflow-wrap:anywhere}.character-select small{font-size:10px;color:#d8b878}.character-select em{font-size:11px;color:#b8bcb0}.character-select u{font-size:10px;color:#aaa;line-height:1.5;margin-top:7px}.character-select>i{color:#d8b878}.character-select>span{width:46px;height:52px;border-radius:3px;color:#ddbc81;border:1px solid #c7a57040;background:#243336}
.hub-shell>.character-enter,.hub-shell>.new-character{grid-column:1;grid-row:auto;width:calc(50% - 12px);margin:0}
.new-character{padding:12px;border:1px dashed #a991635c;background:#142021dc;border-radius:3px;color:#eee0c5}.new-character b{font-size:12px}.new-character small{font-size:10px;color:#aeb6aa}.new-character span{background:#b5a16d20;color:#d8c38b}
.entry-preview{--accent:#d8b878;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:330px;overflow:hidden;border:1px solid #ac956351;border-radius:4px;padding:24px;background:radial-gradient(ellipse at 50% 28%,#49646a65,transparent 70%),#121c20ee}
.entry-preview[data-faction=karus]{--accent:#dcaa88;background:radial-gradient(ellipse at 50% 28%,#8c493954,transparent 70%),#201a1aee}
.preview-eyebrow{font:600 9px system-ui;letter-spacing:.17em;color:var(--accent)}.class-illustration{height:210px;display:flex;justify-content:center}.class-illustration svg{height:100%;width:auto;stroke:var(--accent);stroke-width:1.6;fill:#263538;stroke-linejoin:round}.class-illustration .hero-cloak{fill:#13202b;stroke:#65847e}.class-illustration .hero-armor{fill:#3c4d4c}.class-illustration .hero-helm{fill:#58615a}.class-illustration .ragnar-portrait{display:block;width:100%;height:100%;object-fit:contain}
.preview-copy h2{font:30px Georgia,serif;margin:8px 0;color:#f4e5ca;overflow-wrap:anywhere}.preview-faction{font:600 9px system-ui;letter-spacing:.14em;color:var(--accent)}.preview-copy p{font:12px/1.65 system-ui;color:#b6c5c0;margin:8px 0}.preview-copy .preview-role{font-size:14px;color:#e5d5b1}.preview-role span{font-size:12px;color:#aebdb9}.preview-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.preview-chips span{font:10px system-ui;padding:5px 8px;border:1px solid #bcb99230;border-radius:2px;color:#d7d3b8;background:#b6bb9610}
.race-picker{grid-column:1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.race-card{display:flex;align-items:center;gap:16px;padding:17px;border:1px solid #ac956351;background:#162020ed;border-radius:4px;backdrop-filter:none}.race-card.active{border-color:#d3ab68;background:linear-gradient(110deg,#34454aee,#162020ed)}.race-card[data-race=karus].active{background:linear-gradient(110deg,#503129ee,#201a1aed)}.race-card small{font-size:9px;color:#d8b878}.race-card strong{font-size:23px}.race-card p{font:12px/1.6 system-ui;color:#bfc6b9}.race-crest{flex-shrink:0;width:48px;height:56px;font-size:32px}
.creator-choice{grid-column:1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.class-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.class-card{display:grid;gap:6px;padding:16px 12px;min-height:104px;border:1px solid #ac956351;border-radius:3px;background:#162020ed}.class-card.active{border-color:#d3ab68;background:#393d2fe8}.class-card span{color:#dfc993;font-size:24px}.class-card b{font-size:14px}.class-card small{font-size:11px;color:#bac7c0}.entry-help{font:12px/1.7 system-ui;color:#b4bcac;margin-bottom:0}
.entry-preview.compact{min-height:240px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:20px}.compact .preview-eyebrow{grid-column:1/-1}.compact .class-illustration{height:170px;align-self:center}.compact .preview-copy h2{font-size:26px}.compact .preview-copy p{font-size:11px}
.name-row{grid-column:1;grid-row:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:none;width:100%;margin:0;padding:22px;border:1px solid #ac956351;border-radius:4px;background:#141d1fee}.name-row>button{grid-column:3;align-self:end;min-height:46px}.name-row #creatorFeedback{grid-column:1/-1;font-size:13px;color:#ffb4a7}
.creator-shell>footer{grid-column:1;grid-row:auto;display:flex;gap:20px;flex-wrap:wrap;font:11px system-ui;color:#a7bab1}
.server-shell{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:'brand brand' 'story list' '. enter' 'footer footer'}
.server-shell>header{grid-area:brand}.realm-copy{grid-area:story}.server-list{grid-area:list}.server-shell>.realm-enter{grid-area:enter}.server-shell>footer{grid-area:footer;font:11px system-ui;color:#b5b9ab}
.realm-copy h1{font:56px/1.08 Georgia,serif;letter-spacing:-.025em}.realm-copy p{font:14px/1.8 system-ui;max-width:380px}.server-card{border-radius:4px;background:#172020f2;border-color:#ac956351}.server-card.selected{border-color:#d3ab68;box-shadow:inset 3px 0 #d3ab68}.server-card small,.realm-status{font-size:10px}.server-card p{font-size:12px}.server-stats span{font-size:10px}.server-stats b{font-size:12px}
.entry-preview[hidden],.register-only[hidden],.auth-gate[hidden],.creator[hidden],.character-hub[hidden],.server-hub[hidden]{display:none!important}
@media(max-width:900px){
 .auth-card,.hub-shell,.server-shell,.creator-shell{width:calc(100% - 40px);gap:22px 28px}
 .auth-card{grid-template-columns:minmax(0,1fr) 350px}.auth-form{padding:26px}.auth-message h1{font-size:45px}.entry-benefits{gap:16px}
 .server-shell{grid-template-columns:minmax(0,1fr) 350px}.realm-copy h1{font-size:44px}
 .creator-choice{gap:16px}.entry-preview.compact{grid-template-columns:80px minmax(0,1fr);padding:16px}.compact .class-illustration{height:140px}.compact .preview-copy h2{font-size:22px}
}
@media(max-width:700px){
 .auth-card,.hub-shell,.server-shell,.creator-shell{width:calc(100% - 28px);padding-top:max(18px,env(safe-area-inset-top));gap:20px}
 .auth-card{max-width:460px;grid-template-columns:minmax(0,1fr);grid-template-areas:'brand' 'story' 'form' 'footer'}
 .auth-message{display:block;padding:0}.auth-message small{font-size:9px}.auth-message h1{font-size:34px;margin:12px 0}.auth-message>p{display:none}.entry-benefits{margin-top:16px;padding-top:14px;justify-content:space-between}.entry-benefits b{font-size:21px}.entry-benefits>span{font-size:9px;gap:4px}.auth-form{padding:22px;gap:14px}.auth-form h2{font-size:24px}
 .creator-brand{gap:7px;max-width:72%}.creator-brand img{width:26px;height:26px}.creator-brand .entry-beta{padding:5px 7px;font-size:9px}.creator-brand>b{font-size:9px}.creator-brand>span:not(.entry-beta){font-size:11px}
 .character-layout,.creator-choice{grid-template-columns:minmax(0,1fr);gap:16px}.hub-shell>.character-enter,.hub-shell>.new-character{width:100%}
 .hub-copy h1,.creator-copy h1{font-size:29px}.race-picker{gap:8px}.race-card{padding:12px;gap:8px}.race-crest{width:28px;height:36px;font-size:26px}.race-card p{display:none}.race-card strong{font-size:20px}.race-card small{font-size:7px}
 .entry-preview:not(.compact){min-height:180px;display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:16px}.preview-eyebrow{grid-column:1/-1}.class-illustration{height:150px;align-self:center}.preview-copy h2{font-size:24px}
 .entry-preview.compact{min-height:190px;grid-template-columns:90px minmax(0,1fr)}.compact .preview-copy>p:not(.preview-role){display:none}.class-card{min-height:90px;padding:12px}
 .name-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:16px}.name-row>label:first-child,.name-row>button{grid-column:1/-1}.creator-shell>footer{gap:10px;font-size:10px}
 .server-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:'brand' 'story' 'list' 'enter' 'footer'}.realm-copy h1{font-size:38px;margin:10px 0}.realm-copy{margin-top:0}.server-shell>footer{justify-content:flex-start;flex-wrap:wrap;gap:12px}
}
@media(prefers-reduced-motion:reduce){.entry-progress i{animation:none}}