/* Creazione personaggio "arcade" (protocollo B) — layer #lue-creation.
   Riusa i token --lue-* (lue-mud-theme.css) e i font self-hosted (login-screen.css).
   Struttura/stili ripresi dal pacchetto design (prototipo + tokens.css). */

#lue-creation {
  --lue-sheet: url("/sprites/LE_alpha.png");
  --lue-tile: 16px;
  --lue-tile-scale: 5;
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 3vw, 40px);
  box-sizing: border-box;
  background: var(--lue-bg-page, #060410);
  overflow: auto;
}
#lue-creation * { box-sizing: border-box; }

#lue-creation .lue-cr-frame {
  width: 100%;
  max-width: 960px;
  min-height: 640px;
  position: relative;
  background: var(--lue-bg-deep, #080612);
  border: 2px solid var(--lue-border-gold, #c09820);
  box-shadow: var(--lue-shadow-panel, 0 0 40px rgba(0,0,0,.6)), 6px 6px 0 #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar */
#lue-creation .lue-cr-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; min-height: 52px;
  padding: 10px 16px; border-bottom: 2px solid var(--lue-border, #2a2440);
  background: var(--lue-panel, #12101e);
}
#lue-creation .lue-cr-fase { font-family: var(--lue-font-ui); font-size: 9px; color: var(--lue-fg-gold, #e8c838); letter-spacing: .06em; }
#lue-creation .lue-cr-dots { display: flex; gap: 6px; }
#lue-creation .lue-cr-dot { width: 10px; height: 10px; border: 1px solid #806800; }
#lue-creation .lue-cr-toggle {
  font-family: var(--lue-font-ui); font-size: 7px; padding: 8px 10px; min-height: 32px;
  background: var(--lue-panel-inset, #0a0916); border: 1px solid var(--lue-border, #2a2440);
  color: var(--lue-fg-dim, #908880); cursor: pointer;
}
#lue-creation .lue-cr-toggle[data-on="true"] { background: #c09820; color: #0e0b1a; }

#lue-creation .lue-cr-body { flex: 1; display: flex; flex-direction: column; }
#lue-creation .lue-cr-screen {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 24px; animation: lueCrIn 240ms steps(4); text-align: center;
}
#lue-creation .lue-cr-title { font-family: var(--lue-font-ui); font-size: clamp(12px,2.6vw,20px); color: var(--lue-fg-gold, #e8c838); text-shadow: 3px 3px 0 #503818; }
#lue-creation .lue-cr-sub { font-family: var(--lue-font-text); font-size: 22px; color: var(--lue-text-narrate, #c8c0b0); }
#lue-creation .lue-cr-err { font-family: var(--lue-font-ui); font-size: 8px; color: #f04828; text-align: center; line-height: 1.8; }

#lue-creation input.lue-cr-field {
  width: 100%; background: var(--lue-panel-inset, #0a0916); border: 2px solid var(--lue-border, #2a2440);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.8); font-family: var(--lue-font-text); font-size: 26px;
  color: var(--lue-fg, #d8d0c0); padding: 10px 14px; outline: none; caret-color: var(--lue-fg-gold, #e8c838);
}
#lue-creation input.lue-cr-field:focus { border-color: var(--lue-border-gold, #c09820); box-shadow: inset 2px 2px 0 rgba(0,0,0,.8), 0 0 0 2px #060410, 0 0 0 4px #806800; }
#lue-creation input.lue-cr-field::placeholder { color: var(--lue-fg-muted, #504858); }
#lue-creation input.lue-cr-field[data-err="true"] { border-color: #f04828; }
/* Maschera password a QUADRATINI, esplicita via CSS: identica ovunque, senza
   dipendere dal glifo del font (robusta anche se VT323/CDN tarda a caricare). */
#lue-creation input.lue-cr-field[type="password"] { -webkit-text-security: square; text-security: square; }

#lue-creation .lue-cr-btn {
  font-family: var(--lue-font-ui); font-size: 9px; min-height: 48px; padding: 0 18px; cursor: pointer;
  background: var(--lue-panel-inset, #0a0916); border: 2px solid var(--lue-border, #2a2440); color: var(--lue-fg-dim, #908880);
}
#lue-creation .lue-cr-btn.primary { background: var(--lue-panel-raised, #1a1828); border-color: var(--lue-border-gold, #c09820); color: var(--lue-fg-gold, #e8c838); box-shadow: 2px 2px 0 #000; }
#lue-creation .lue-cr-btn:hover { filter: brightness(1.25); }
#lue-creation .lue-cr-btn:active { transform: translate(1px,1px); }
#lue-creation .lue-cr-btn[data-dis="true"] { opacity: .35; pointer-events: none; }
#lue-creation .lue-cr-btnrow { display: flex; gap: 10px; width: 100%; max-width: 520px; }

/* Ritratto sprite */
#lue-creation .lue-ritratto {
  width: calc(var(--lue-tile) * var(--lue-tile-scale)); height: calc(var(--lue-tile) * var(--lue-tile-scale));
  background: var(--lue-panel-inset, #0a0916); border: 2px solid var(--lue-border, #2a2440);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.7); position: relative; overflow: hidden; image-rendering: pixelated; flex-shrink: 0;
}
#lue-creation .lue-ritratto-tile { position: absolute; left: 0; top: 0; width: var(--lue-tile); height: var(--lue-tile); transform: scale(var(--lue-tile-scale)); transform-origin: 0 0; image-rendering: pixelated; background-image: var(--lue-sheet); background-repeat: no-repeat; }
#lue-creation .lue-ritratto-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--lue-font-ui); font-size: calc(var(--lue-tile) * var(--lue-tile-scale) * .42); color: var(--lue-fg-gold, #e8c838); text-shadow: 3px 3px 0 #503818; background: repeating-conic-gradient(#0a0916 0 25%, #0e0c1c 0 50%) 0 0 / 8px 8px; }
#lue-creation .lue-ritratto[data-sheet="true"] .lue-ritratto-ph { display: none; }
#lue-creation .lue-ritratto[data-sheet="false"] .lue-ritratto-tile { display: none; }

/* Card selezione (sesso/mestiere) */
#lue-creation .lue-cr-cards { display: grid; gap: 18px; width: 100%; }
/* Flip carta mestiere: anima il giro (toggle .flipped sull'elemento esistente) */
#lue-creation .lue-cr-flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 300ms steps(6); }
#lue-creation .lue-cr-flip-inner.flipped { transform: rotateY(180deg); }
#lue-creation .lue-cr-card { background: var(--lue-panel, #12101e); border: 2px solid var(--lue-border, #2a2440); box-shadow: 4px 4px 0 #000; cursor: pointer; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#lue-creation [data-focus="true"] { outline: 2px solid #e8c838; outline-offset: 3px; box-shadow: 0 0 0 1px #060410, 0 0 18px rgba(232,200,56,.45); }
#lue-creation [data-sel="true"] { background: #c09820; color: #0e0b1a; }
/* Evidenziazione al passaggio/selezione (riquadro giallo) */
#lue-creation .lue-cr-card:hover { outline: 2px solid #e8c838; outline-offset: 3px; box-shadow: 4px 4px 0 #000, 0 0 18px rgba(232,200,56,.45); }
#lue-creation .lue-cr-card[data-sel="true"] { outline: 2px solid #e8c838; outline-offset: 3px; box-shadow: 4px 4px 0 #000, 0 0 22px rgba(232,200,56,.6); }
/* Passo sesso: il riquadro si RIEMPIE d'oro su hover/selezione (segue il mouse),
   nessuna card pre-selezionata all'ingresso. */
#lue-creation .lue-cr-sex { transition: background 90ms steps(2); }
#lue-creation .lue-cr-sex:hover,
#lue-creation .lue-cr-sex[data-sel="true"] { background: #c09820; }
#lue-creation .lue-cr-sex:hover > div:last-child,
#lue-creation .lue-cr-sex[data-sel="true"] > div:last-child { color: #0e0b1a !important; }

/* Stat rows / stepper */
#lue-creation .lue-cr-statrow { display: grid; grid-template-columns: minmax(90px,1fr) auto auto auto; align-items: center; gap: 10px; background: var(--lue-panel, #12101e); border: 2px solid var(--lue-border, #2a2440); padding: 6px 10px; }
#lue-creation .lue-cr-step { width: 40px; height: 40px; font-family: var(--lue-font-ui); font-size: 12px; background: var(--lue-panel-inset, #0a0916); border: 2px solid var(--lue-border, #2a2440); color: var(--lue-fg, #d8d0c0); cursor: pointer; }
#lue-creation .lue-cr-step[data-dis="true"] { opacity: .35; pointer-events: none; }
#lue-creation .lue-cr-cell { width: 14px; height: 22px; border: 1px solid #2a2440; }

/* Confirm modal */
#lue-creation .lue-cr-modal { position: absolute; inset: 0; background: rgba(6,4,16,.85); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 5; animation: lueCrIn 160ms steps(2); }
#lue-creation .lue-cr-modal-box { width: 100%; max-width: 440px; background: var(--lue-panel, #12101e); border: 2px solid #f04828; box-shadow: 6px 6px 0 #000; padding: 24px; display: flex; flex-direction: column; gap: 16px; text-align: center; }

/* Tooltip descrizione stat */
#lue-creation .lue-cr-tip {
  position: fixed; display: none; z-index: 40; max-width: 300px;
  background: var(--lue-panel-inset, #0a0916); border: 2px solid var(--lue-border-gold, #c09820);
  box-shadow: 4px 4px 0 #000; color: var(--lue-text-narrate, #c8c0b0);
  font-family: var(--lue-font-text); font-size: 17px; line-height: 1.3; padding: 9px 12px; pointer-events: none;
}
#lue-creation .cr-info {
  display: inline-block; cursor: help; color: var(--lue-fg-gold, #e8c838); font-family: var(--lue-font-ui);
  font-size: 8px; margin-left: 7px; border: 1px solid var(--lue-border-gold, #c09820); border-radius: 50%;
  width: 15px; height: 15px; line-height: 13px; text-align: center; outline: none; vertical-align: middle;
}
#lue-creation .cr-info:hover, #lue-creation .cr-info:focus { background: var(--lue-fg-gold, #e8c838); color: #0e0b1a; box-shadow: 0 0 10px rgba(232,200,56,.5); }

/* CRT + wipe */
#lue-creation .lue-cr-crt { position: absolute; inset: 0; pointer-events: none; z-index: 10; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 120px rgba(0,0,0,.75); }
#lue-creation .lue-cr-wipe { position: absolute; inset: 0; background: #e8c838; transform-origin: center; animation: lueCrWipe 420ms steps(6) forwards; pointer-events: none; z-index: 20; mix-blend-mode: screen; opacity: .9; }
#lue-creation[data-shake="true"] .lue-cr-frame { animation: lueCrShake 320ms steps(4) 1; }

@keyframes lueCrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lueCrWipe { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes lueCrShake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-6px);} 75% { transform: translateX(6px);} }
@keyframes lueCrPulse { 0%,100% { filter: drop-shadow(0 0 14px rgba(232,200,56,.35)); } 50% { filter: drop-shadow(0 0 30px rgba(232,200,56,.7)); } }
@keyframes lueCrFlash { 0% { background: #2ecc71; } 100% { background: transparent; } }
@keyframes lueCrBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  #lue-creation *, #lue-creation *::before, #lue-creation *::after { animation: none !important; transition: none !important; }
  #lue-creation .lue-cr-crt { display: none !important; }
}