/* Post-197: creation fills the screen with one aspect-preserving cover canvas.
 * Scenery, hero and sky masks share the same transform; UI uses visible bounds.
 * Cover crops outer scene edges on mismatched aspect ratios. No raster changes. */
#nexoriaCharacterFlow.nx197-auth { padding:0; display:grid; place-items:center; overflow:hidden; background:#08131b; inset:0 auto auto 0; width:var(--nx197-art-width,100vw); height:var(--nx197-art-height,100lvh); }
#nexoriaCharacterFlow.nx197-auth[hidden] { display:none !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card { position:relative; width:min(100vw,222.35434dvh) !important; height:auto !important; aspect-ratio:1870/841; max-width:none; max-height:none; margin:0; padding:0 !important; border:0 !important; border-radius:0 !important; overflow:hidden !important; background:#10212c !important; box-shadow:none !important; isolation:isolate; container-type:inline-size; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="create"] { width:100% !important; height:100% !important; aspect-ratio:auto; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="create"] .nx197-art { inset:auto; left:var(--nx197-cover-left,0px); top:var(--nx197-cover-top,0px); width:var(--nx197-cover-width,100%); height:var(--nx197-cover-height,100%); }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="faction"] { width:min(100vw,219.858156dvh) !important; aspect-ratio:1860/846; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card::before { display:none; }
.nx197-art,.nx197-scene,.nx197-scenery,.nx197-hero { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.nx197-art { z-index:0; overflow:hidden; }
.nx197-scene { opacity:0; transition:opacity .5s ease; background:#153848; }
.nx197-scene.is-current { opacity:1; }
.nx197-scenery,.nx197-hero { object-fit:contain; }
.nx197-hero { z-index:4; transition:translate .52s ease-out; translate:1.2% 0; }
.nx197-scene.is-current .nx197-hero { translate:0 0; }
.nx198-faction-hero,.nx198-faction-foreground { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.nx198-faction-hero { z-index:1; transform:translateY(0); }
.nx198-faction-foreground { z-index:2; }
.nx197-scene[data-scene="faction"].is-faction-fallback > img { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-faction="aether"] .nx198-faction-hero.is-aether,
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-faction="umbra"] .nx198-faction-hero.is-umbra { animation:nx198-faction-breathe 4.8s ease-in-out infinite; }
#nexoriaCharacterFlow[data-auth197-paused="true"] .nx198-faction-hero { animation-play-state:paused !important; }
.nx197-logo { position:absolute; z-index:6; left:2.5%; top:2.5%; width:19%; height:auto; pointer-events:none; animation:nx197-logo-float 7s ease-in-out infinite; }
.nx197-title { position:absolute; z-index:6; left:3.4%; top:22%; margin:0; color:#ffedbf; font:500 2cqw Georgia,serif; text-shadow:0 2px 8px #09151f; pointer-events:none; }
.nx197-identity { position:absolute; left:3.4%; top:33%; z-index:6; display:grid; gap:.4cqw; color:#fff3d4; text-shadow:0 2px 9px #07101b; }
.nx197-identity strong { font:700 4cqw Georgia,serif; }
.nx197-identity span { color:#f0cc80; font:600 1.4cqw Georgia,serif; }
.nx197-cloud-window { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; }
.nx197-cloud { position:absolute; width:62%; height:auto; top:-1%; opacity:.8; animation:nx197-cloud-drift 70s linear infinite; }
.nx197-cloud-b { left:57%; top:4%; animation-delay:-35s; opacity:.55; }
.nx197-cloud-a { left:-5%; }
.nx197-cloud-shadows { position:absolute; z-index:3; left:0; right:0; bottom:0; height:34%; overflow:hidden; pointer-events:none; mask-image:linear-gradient(transparent,#000 28%); }
.nx197-cloud-shadow { position:absolute; left:-10%; top:14%; width:66%; height:75%; background:#1b3652; opacity:.13; filter:blur(8px); mask-image:url('assets/auth-197/clouds.png'); mask-size:100% 100%; mask-repeat:no-repeat; animation:nx197-shadow-drift 70s linear infinite; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-status { position:absolute; z-index:20; inset:auto 25% 8%; border:1px solid #d8b878; color:#fff1d1; padding:12px; background:#112330ed; text-align:center; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-status[hidden] { display:none !important; }
#nexoriaCharacterFlow.nx197-auth #nx108FlowHeader { position:absolute; z-index:10; top:18%; left:30%; width:40%; color:#ffeec5; text-shadow:0 2px 10px #111; }
#nexoriaCharacterFlow.nx197-auth #nx108FlowHeader[hidden] { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card button:focus-visible { outline:2px solid #fff3bc !important; outline-offset:4px !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-primary { border:2px solid #bb8c42 !important; border-radius:14px 3px !important; color:#332515 !important; background:linear-gradient(#fff9e3,#f3dfaf) !important; box-shadow:inset 0 0 0 2px #fff3cd,0 0 0 1px #64411a,0 3px 15px #10100b70 !important; font-family:Georgia,serif; font-weight:700; letter-spacing:.015em; }
#nexoriaCharacterFlow.nx197-auth .nx108-primary:disabled { opacity:.5; }
/* Three real account slots; their original click/create handlers remain attached. */
#nexoriaCharacterFlow.nx197-auth #nx108CharacterList { position:absolute; z-index:7; left:3.3%; top:50%; width:32.5%; height:32%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.7%; padding:0; margin:0; }
#nexoriaCharacterFlow.nx197-auth #nx108CharacterList[hidden] { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice { position:relative; display:block; width:100%; height:100%; min-height:0 !important; padding:0 !important; overflow:hidden; border:1px solid #bb9359 !important; border-radius:7px !important; background:#152a38da !important; box-shadow:inset 0 0 0 3px #0d1c25 !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice.is-selected { border-color:#ffe0a2 !important; box-shadow:0 0 12px #f9d46e99,inset 0 0 0 2px #d5ac57 !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice > img { position:absolute; inset:2%; width:96%; height:96%; object-fit:cover; object-position:50% 18%; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice > span { position:absolute; inset:auto 0 0; width:100%; box-sizing:border-box; display:grid; gap:.25cqw; padding:8% 3% 7%; background:linear-gradient(transparent,#14232dec 28%); color:#ffedc5; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice strong { font:600 1.1cqw Georgia,serif; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice small { font-size:.7cqw; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice.is-empty > b { position:absolute; inset:32% 0 auto; font:400 4cqw Georgia,serif; color:#e9cd93; }
#nexoriaCharacterFlow.nx197-auth .nx108-character-choice.is-empty > span { background:none; bottom:8%; }
#nexoriaCharacterFlow.nx197-auth .nx108-selection-particles { display:none; }
#nexoriaCharacterFlow.nx197-auth #nx108CharacterActions { position:absolute; z-index:8; inset:auto 2.8% 6% auto; width:22%; margin:0; display:flex; gap:10px; }
#nexoriaCharacterFlow.nx197-auth #nx108CharacterActions[hidden] { display:none; }
#nexoriaCharacterFlow.nx197-auth #nx108EnterGame { min-height:0; width:100%; padding:1.1cqw .8cqw; font-size:1.8cqw; }
/* Creation is a layered 2D banner, so MAPTNV no longer loads a second WebGL scene. */
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="create"] .nx197-title { top:3.4%; left:2.8%; font-size:2.45cqw; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="create"] .nx197-logo { left:21%; top:43%; width:25%; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-model="nv3"][data-auth197-view="create"] .nx197-logo { top:16%; width:27%; }
#nexoriaCharacterFlow.nx197-auth #nx108CreateForm { position:absolute; z-index:7; inset:auto; top:var(--nx197-visible-top,0px); left:var(--nx197-visible-left,0px); width:var(--nx197-visible-width,100%); height:var(--nx197-visible-height,100%); min-height:0; margin:0; padding:0; background:transparent; overflow:visible; isolation:auto; }
#nexoriaCharacterFlow.nx197-auth #nx108CreateForm[hidden] { display:none !important; }
#nexoriaCharacterFlow.nx197-auth #nx108MaptnvCanvas,#nexoriaCharacterFlow.nx197-auth #nx108MaptnvStatus { display:none !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-picker { position:absolute; z-index:7; inset:0; display:block !important; border:0; padding:0; margin:0; pointer-events:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-grid { position:absolute; inset:13.7% auto auto 2.1%; width:17.2%; height:50%; display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:4.5%; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice { position:relative; display:block; width:100%; height:100%; min-height:0 !important; padding:0; border:1px solid #a78242 !important; border-radius:4px !important; background:#132634 !important; overflow:visible; pointer-events:auto; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice[data-model-available="false"] { display:none !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice > img { position:absolute; inset:2%; width:96%; height:96%; object-fit:cover; object-position:50% 19%; border-radius:2px; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice > span { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice::before { content:attr(data-portrait-number); position:absolute; z-index:1; left:5%; bottom:4%; font:500 1.7cqw Georgia,serif; color:#ffe7ae; text-shadow:0 1px 4px #000; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice.is-selected { border-color:#fff0b8 !important; box-shadow:0 0 12px #f8ce7099,inset 0 0 0 1px #fce5a4 !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-choice.is-selected::after { content:"›"; position:absolute; left:102%; top:25%; font:700 3cqw Georgia,serif; color:#ffe29b; text-shadow:0 0 8px #daab4f; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-fields { position:absolute; top:auto; right:max(2%,env(safe-area-inset-right)); bottom:max(5%,env(safe-area-inset-bottom)); width:27%; max-height:calc(100% - 16px); min-width:0; padding:.65cqw .85cqw; display:grid; gap:.35cqw; transform:none; border:1px solid #c2a36d77; border-radius:6px; background:#10202eb3; box-shadow:0 3px 15px #08131b55; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-fields > label { font:500 clamp(12px,1.3cqw,24px) Georgia,serif; }
#nexoriaCharacterFlow.nx197-auth .nx108-name-row { display:flex; gap:.3cqw; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-name-row input { box-sizing:border-box; min-height:28px; height:2.8cqw; flex:1; min-width:0; font-size:clamp(16px,1.1cqw,22px); padding:.3cqw .7cqw; background:#f9f0dbed; color:#282118; border:1px solid #d8b87a; border-radius:3px; }
#nexoriaCharacterFlow.nx197-auth #nx108NameCount { font-size:.85cqw; color:#f1d397; align-self:center; }
#nexoriaCharacterFlow.nx197-auth #nx108NameMessage { margin:0; min-height:1.1em; font-size:.8cqw; color:#f5dfb2; }
#nexoriaCharacterFlow.nx197-auth #nx108NameMessage.is-error { color:#ffb5a7; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-actions { display:block; }
#nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-actions button[type="submit"] { width:100%; min-height:0; padding:.65cqw .2cqw; font-size:1.65cqw; }
#nexoriaCharacterFlow.nx197-auth #nx108CreateCancel { display:none; }
#nexoriaCharacterFlow.nx197-auth #nx108MaptnvFactionBack { top:2%; right:2%; min-width:0; min-height:0; padding:0 .5cqw; font:400 3.2cqw Georgia,serif; color:#ffe7ac; background:none !important; border:0 !important; box-shadow:none; }
/* Post-198: both faction halves stay undimmed and clickable; selection is a
 * character-only breathing motion, with a small textual selected indicator. */
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="faction"] .nx197-logo { left:39%; top:3%; width:22%; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="faction"] .nx197-title { left:0; top:20%; width:100%; text-align:center; font-size:2cqw; }
#nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="faction"] #nx108FlowHeader { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-step { position:absolute; inset:0; z-index:5; display:block; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-step[hidden] { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-cards { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:0; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-card { position:relative; width:100%; height:100%; aspect-ratio:auto; min-height:0 !important; padding:0; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; transform:none !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-card > img { display:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-card::after { content:none; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-card.is-selected { box-shadow:none !important; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-card strong { position:absolute; z-index:1; bottom:17%; left:0; right:0; color:#ffedc7 !important; font:500 4.2cqw Georgia,serif; background:none; text-shadow:0 3px 12px #080c12; }
#nexoriaCharacterFlow.nx197-auth .nx108-faction-card.is-selected::before { content:"✓  Đã chọn"; position:absolute; z-index:2; bottom:10%; left:0; right:0; color:#ffe8b3; text-shadow:0 2px 5px #050e17; font:600 1.6cqw Georgia,serif; }
#nexoriaCharacterFlow.nx197-auth #nx108FactionContinue { position:absolute; z-index:9; bottom:6%; left:38%; width:24%; min-height:0; padding:.85cqw .8cqw; font-size:1.9cqw; }
/* The login artwork keeps pre-keyboard pixel bounds. Only the form scroller
 * follows visualViewport, so opening the keyboard cannot recenter the image. */
#authGate.auth-gate { inset:0 auto auto 0; width:var(--nx197-art-width,100vw); height:var(--nx197-art-height,100lvh); padding:0; overflow:hidden; touch-action:none; }
#authGate .nexoria-login-scene { position:absolute; inset:0 auto auto 0; width:var(--nx197-art-width,100vw); height:var(--nx197-art-height,100lvh); }
#authGate .auth-shell { position:absolute; inset:auto; top:var(--nx197-visible-top,0px); left:var(--nx197-visible-left,0px); display:flex; align-items:center; justify-content:center; width:var(--nx197-visible-width,100vw); height:var(--nx197-visible-height,100dvh); min-height:0; margin:0; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; pointer-events:auto; }
#authGate .auth-card { flex:0 0 auto; width:min(342px,100%); margin:auto; }
#authGate.nx197-keyboard-open .nexoria-login-tilt { display:none; }
@media(max-height:500px) and (orientation:landscape) { #authGate .auth-card { width:min(310px,100%); } }
@media(orientation:portrait) {
  #nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="create"] .nx197-title { top:max(3%,env(safe-area-inset-top)); left:5%; font-size:clamp(20px,5cqw,32px); }
  #nexoriaCharacterFlow.nx197-auth .nx108-flow-card[data-auth197-view="create"] .nx197-logo { top:12%; left:4%; width:40%; }
  #nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-model-grid { left:max(4%,env(safe-area-inset-left)); top:25%; width:21%; height:39%; }
  #nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-fields { right:4%; bottom:max(4%,env(safe-area-inset-bottom)); width:92%; padding:10px 12px; gap:5px; }
  #nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-fields > label { font-size:16px; }
  #nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-name-row input { height:40px; }
  #nexoriaCharacterFlow.nx197-auth #nx108NameCount,#nexoriaCharacterFlow.nx197-auth #nx108NameMessage { font-size:12px; }
  #nexoriaCharacterFlow.nx197-auth .nx108-maptnv .nx108-create-actions button[type="submit"] { min-height:40px; font-size:16px; }
  #nexoriaCharacterFlow.nx197-auth #nx108MaptnvFactionBack { top:max(2%,env(safe-area-inset-top)); right:4%; min-height:36px; min-width:36px; font-size:32px; }
}
@keyframes nx197-logo-float { 0%,100% { translate:0 0; } 50% { translate:0 -2%; } }
@keyframes nx198-faction-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.5%); } }
@keyframes nx197-cloud-drift { from { transform:translateX(-15%); } to { transform:translateX(85%); } }
@keyframes nx197-shadow-drift { from { transform:translateX(-15%) skewX(-15deg); } to { transform:translateX(85%) skewX(-15deg); } }
@media(prefers-reduced-motion:reduce) { .nx197-logo,.nx197-cloud,.nx197-cloud-shadow { animation:none; } .nx198-faction-hero { animation:none !important; } .nx197-scene,.nx197-hero { transition:none; } }