/* N1.7.4.4.2 — Selección responsive: el preview no desplaza nombre ni Crear.
   Solo UI. No cambia autenticación, progresión, arte, ni paleta protegida. */
.login-shell.creation-mode {
  display: flex;
  align-items: safe center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(8px, 1.6vw, 24px);
  background: linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.24) 42%,rgba(0,0,0,.68)),
    url('/assets/runtime/caelytte-character-background.png') center center / cover no-repeat;
}
.login-shell.creation-mode .login-card {
  width: min(1280px,100%);
  padding: clamp(12px, 1.6vw, 24px);
  border: 2px solid var(--hud-gold);
  border-radius: 20px;
  background: rgba(0,0,0,.83);
  box-shadow: 0 18px 65px rgba(0,0,0,.88),inset 0 0 0 2px var(--hud-gold-muted);
  backdrop-filter: blur(5px);
}
.creation-mode .login-card > .eyebrow,
.creation-mode .login-card > h1,
.creation-mode .login-card > p:not(#account-status),
.creation-mode .login-card > label,
.creation-mode .login-card > select {display:none}
.creation-header {text-align:center; margin-bottom:10px}
.creation-header .creation-overline {display:block;color:var(--hud-gold);font-weight:800;font-size:11px;letter-spacing:.2em}
.creation-header h2 {margin:3px 0 2px;font-size:clamp(24px,2.6vw,36px);letter-spacing:.045em;text-shadow:0 2px 16px #000000}
.creation-header > p {margin:4px 0;color:var(--hud-gold)}
.creation-header .creation-account {font-size:12px;opacity:.78}
.creation-layout {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(9px,1.3vw,18px);align-items:stretch}
.creation-choices {margin:0;padding:clamp(8px,1vw,14px);min-width:0;border:1px solid var(--hud-gold-muted);border-radius:14px;background:rgba(0,0,0,.74)}
.creation-choices legend {padding:0 12px;font:700 18px Georgia,serif;color:var(--hud-gold-light)}
.creation-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.creation-option {display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-width:0;min-height:clamp(104px,16dvh,146px);padding:6px 3px;border:1px solid var(--hud-gold-muted);border-radius:11px;background:linear-gradient(165deg,#0A0A0A,#000000);transition:transform .15s,border-color .15s}
.creation-option img {height:clamp(76px,12dvh,110px);width:100%;object-fit:contain;filter:drop-shadow(0 3px 8px #000000)}
.creation-option span {font-size:12px;font-weight:700;text-align:center;line-height:1.3}
.creation-option:hover {transform:translateY(-2px)}
.creation-option[aria-pressed="true"] {border:2px solid var(--hud-gold-light);box-shadow:0 0 0 2px var(--hud-gold-muted),0 0 23px rgba(212,175,55,.24);background:#0A0A0A}
.creation-hint {font-size:12px;line-height:1.4;text-align:center;margin:10px 2px 0!important}
.creation-selected {display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;border:1px solid var(--hud-gold-muted);border-radius:14px;background:linear-gradient(180deg,rgba(0,0,0,.63),rgba(0,0,0,.94));padding:10px clamp(10px,1.3vw,20px) 12px}
/* Reservar SIEMPRE la misma altura, con o sin personaje; jamás flex:1. */
.creation-preview-stage {display:flex;flex:0 0 auto;align-items:center;justify-content:center;height:clamp(190px,34vh,355px);height:clamp(190px,34dvh,355px);min-height:0;max-height:none;border-bottom:1px solid var(--hud-gold-muted);overflow:hidden}
.creation-preview-stage img {display:block;height:100%;max-height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 9px 17px #000000)}
.creation-preview-stage img[hidden],.creation-preview-stage p[hidden] {display:none}
.creation-placeholder {font:italic 16px Georgia,serif;text-align:center;max-width:280px}
#appearance-caption {display:block;text-align:center;color:var(--hud-gold-light);font:700 clamp(17px,1.7vw,21px) Georgia,serif}
.creation-selected label {margin:2px 0 0!important;font-weight:700}
.creation-selected input {font-size:16px;text-align:center;border-radius:9px;padding:10px 9px;min-height:40px}
.creation-selected button {font:800 15px Georgia,serif;letter-spacing:.06em;padding:10px;border:2px solid var(--hud-gold);border-radius:10px;background:linear-gradient(#0A0A0A,#000000);color:var(--hud-gold-light);min-height:40px}
.creation-mode #account-status {text-align:center;margin:6px 0 0}
.creation-mode #sign-out {display:block;margin:8px auto 0!important}
/* Ventana de notebook baja: reducir el preview sin achicar los controles de acción. */
@media (min-width:781px) and (max-height:700px) {
 .creation-header {margin-bottom:6px}
 .creation-header h2 {font-size:clamp(22px,2.4vw,31px)}
 .creation-preview-stage {height:clamp(160px,31dvh,240px)}
 .creation-option {min-height:100px}
 .creation-option img {height:75px}
 .creation-grid {gap:6px}
 .creation-mode #sign-out {margin-top:4px!important}
}
@media (max-width:780px) {
 .login-shell.creation-mode {align-items:flex-start;}
 .creation-layout {grid-template-columns:1fr}
 .creation-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
 .creation-option {min-height:112px}
 .creation-option img {height:88px}
 .creation-preview-stage {height:clamp(180px,30dvh,260px)}
 .creation-selected {padding:10px 12px 12px}
}
@media (max-width:440px) {
 .creation-choices {padding:8px}
 .creation-grid {gap:5px}
 .creation-option span {font-size:10px}
 .creation-option img {height:70px}
 .creation-option {min-height:96px}
 .creation-header h2 {font-size:25px}
}

/* N1.7.4.5 · Silver 2.0 aplicado SOLO a selección de personaje.
   Nunca se cambian los tokens del HUD histórico. */
.login-shell.creation-mode {
 --hud-black:#08090B;
 --hud-black-soft:#171B21;
 --hud-panel:#171B21;
 --hud-carbon:#171B21;
 --hud-gold:#727D8B;
 --hud-gold-light:#F1F3F6;
 --hud-gold-muted:#48515D;
 --hud-text:#D4DAE2;
 --hud-muted:#AAB4C0;
 --hud-border:1px solid #48515D;
 --hud-shadow:0 10px 28px rgba(0,0,0,.65);
 color:#F1F3F6;
}
.login-shell.creation-mode .login-card {
 background:rgba(15,18,23,.93);
 border-color:#727D8B;
 box-shadow:0 18px 64px rgba(0,0,0,.8),inset 0 0 0 1px #48515D;
}
.creation-mode .creation-header .creation-overline {color:#AAB4C0}
.creation-mode .creation-header > p {color:#AAB4C0}
.creation-mode .creation-choices {background:rgba(8,9,11,.82)}
.creation-mode .creation-option {
 background:linear-gradient(155deg,#202630,#08090B);
 border-color:#48515D;
 color:#F1F3F6;
}
.creation-mode .creation-option[aria-pressed="true"] {
 background:linear-gradient(165deg,#2B3540,#0C1116);
 border-color:#D4DAE2;
 box-shadow:0 0 0 2px #48515D,0 0 19px rgba(85,220,228,.19);
}
.creation-mode .creation-selected {background:linear-gradient(180deg,rgba(23,27,33,.8),rgba(8,9,11,.97))}
.creation-mode .creation-preview-stage img {filter:drop-shadow(0 8px 16px #050609)}
.creation-mode .creation-selected button {
 background:linear-gradient(180deg,#48515D,#171B21);
 border-color:#727D8B;
 color:#F1F3F6;
}
.creation-mode .creation-selected button:not(:disabled):hover {border-color:#D4DAE2;box-shadow:0 0 16px rgba(85,220,228,.24)}
.creation-mode .creation-selected input {border-color:#48515D;color:#F1F3F6;background:#08090B}
.creation-mode button:focus-visible,.creation-mode input:focus-visible {outline-color:#55DCE4}

.creation-mode #sign-out {color:#D4DAE2;border:1px solid #727D8B;background:#171B21}
.creation-mode #sign-out:hover {border-color:#D4DAE2;background:#273039}

/* N1.7.4.9 · Transparencia ligera SOLO en Crear Personaje.
   El arte del fondo se distingue, pero el texto y controles conservan contraste. */
.login-shell.creation-mode .login-card {
  background:rgba(15,18,23,.87);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.login-shell.creation-mode .creation-choices {
  background:rgba(8,9,11,.77);
}
.login-shell.creation-mode .creation-selected {
  background:linear-gradient(180deg,rgba(23,27,33,.75),rgba(8,9,11,.89));
}
/* El control de animación pertenece al login ancestral, no a Crear Personaje. */
.login-shell.creation-mode .ancestral-motion-toggle {display:none!important}

/* HD12 modular menu: exactly six race choices, cosmetic arrows below preview. */
.creation-race {min-height:64px;font:700 clamp(13px,1.1vw,17px) Georgia,serif;color:var(--hud-gold-light);cursor:pointer;}
.appearance-switch {display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;}
.appearance-switch button {flex:0 0 48px;min-height:38px;padding:4px;font-size:25px;line-height:1;cursor:pointer;}
#appearance-caption {min-width:100px;text-align:center;}
#appearance-counter,#appearance-race-label {display:block;text-align:center;color:var(--hud-gold-light);font-size:13px;}
#appearance-race-label {opacity:.7;}
@media(max-width:780px){.creation-race{min-height:48px}.appearance-switch{gap:5px}.appearance-switch button{flex-basis:40px}}

/* P22: categories with inline role explanation. Tablet-friendly touch targets. */
.creation-role-picker{margin-top:14px;border-top:1px solid #48515d;padding:12px 2px 4px;color:#f1f3f6}
.creation-role-picker>strong{display:block;text-align:center;margin-bottom:8px;font:800 13px Georgia,serif;letter-spacing:.07em}
.creation-role-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.creation-role-option{min-height:46px;border:1px solid #6c7787;border-radius:9px;background:#161c25;color:#eef1f5;font:800 14px Georgia,serif;touch-action:manipulation;cursor:pointer}
.creation-role-option[aria-pressed=true]{border:2px solid #dceaf2;background:#344251;box-shadow:0 0 14px #3b7f8a77}
.creation-role-explain{min-height:111px;padding:9px 11px;margin-top:9px;border-radius:9px;background:#0a1018;border:1px solid #48515d;font:600 13px/1.45 system-ui,sans-serif}
.creation-role-explain>strong{font:800 16px Georgia,serif;color:#fff}
.creation-role-explain p{margin:6px 0;color:#e1e7ef}
.creation-role-explain small{display:block;color:#afbecc;font:600 11px/1.4 system-ui,sans-serif}
.creation-mode .creation-race{min-height:49px;font-size:clamp(12px,1vw,16px)}
@media(max-width:780px){.creation-role-picker{margin-top:9px}.creation-role-explain{min-height:0}.creation-race{min-height:45px!important}}