/* ============ TELA DE CRIAÇÃO DE PERSONAGEM (dedicada, mobile-first) ============
   Extraído de style.css para manter o CSS monolítico sob o limite de tamanho.
   Estilos da tela full-screen #createScreen (sobreposição do #startScreen). */
#createScreen { position:fixed; inset:0; z-index:101; display:none; overflow:hidden; }
#createScreen.open { display:block; }
.cs-bg { position:absolute; inset:-10% 0 0; background:
  radial-gradient(ellipse at 50% 118%, #4a341055 0%, transparent 55%),
  radial-gradient(ellipse at 50% -12%, #1c2c4e55 0%, transparent 52%),
  linear-gradient(#06080d, #0b0f17 48%, #120c06); }
.cs-bg::before { content:''; position:absolute; inset:0;
  background:url('../assets/personagem.png') center/cover no-repeat;
  opacity:.20; filter:saturate(.85) contrast(1.05);
  animation:bgDrift 26s ease-in-out infinite alternate; }
.cs-bg::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 38%, transparent 28%, #000000d0 100%); }
.cs-scroll { position:relative; z-index:2; height:100%; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:16px 14px 30px; -webkit-overflow-scrolling:touch; }

.cs-head { width:100%; max-width:1000px; display:flex; align-items:center; gap:14px; animation:csFadeDown .5s ease both; }
.cs-back { flex:0 0 auto; background:#12161fee; border:1px solid var(--gold-dk); color:#ffe9a8;
  padding:9px 14px; border-radius:8px; font-size:13px; letter-spacing:1px; transition:.15s; }
.cs-back:hover { border-color:var(--gold-hi); color:var(--gold-hi); }
.cs-emblem { width:58px; height:58px; flex:0 0 58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:30px; border:2px solid var(--gold); background:radial-gradient(circle at 35% 30%,#2a2410,#0c0a06);
  box-shadow:0 0 18px #c8aa5a55, inset 0 0 12px #0008; animation:csPulse 3.4s ease-in-out infinite; }
.cs-titles { text-align:left; min-width:0; }
.cs-kicker { font-family:'Cinzel',serif; font-size:11px; letter-spacing:4px; color:var(--gold); text-transform:uppercase; }
.cs-title { font-family:'Cinzel',serif; font-weight:900; font-size:clamp(22px,5vw,34px); letter-spacing:2px;
  color:var(--gold-hi); text-shadow:0 0 18px #c8a02c55, 0 3px 0 #5a4310, 0 6px 18px #000; line-height:1.04; }

.cs-body { width:100%; max-width:1000px; display:flex; flex-direction:column; gap:18px; animation:csFadeUp .55s ease .05s both; }
#createScreen .cc-title { text-align:center; font-size:15px; margin:0; }
/* Cartões de classe: ícone à esquerda, texto à direita; empilhados no mobile */
#createScreen #classCards { display:grid; grid-template-columns:1fr; gap:12px; justify-items:stretch; }
#createScreen .class-card { width:auto; min-width:0; padding:14px 16px; border-width:2px; border-radius:12px;
  background:linear-gradient(145deg,#14181f,#0a0d13); position:relative; overflow:hidden;
  display:grid; grid-template-columns:62px 1fr; grid-template-rows:auto auto auto auto; column-gap:14px; align-items:center; }
#createScreen .class-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--gold-dk),var(--gold-hi),var(--gold-dk)); opacity:0; transition:.2s; }
#createScreen .class-card:hover { border-color:#8a7748; transform:none; }
#createScreen .class-card.sel { border-color:var(--gold-hi); box-shadow:0 0 22px #c8aa5a44, inset 0 0 28px #c8aa5a14; }
#createScreen .class-card.sel::after { opacity:1; }
#createScreen .class-card .ci { grid-row:1/-1; grid-column:1; font-size:44px; text-align:center; filter:drop-shadow(0 3px 6px #000); }
#createScreen .class-card h3 { grid-column:2; font-size:18px; margin:0; align-self:end; }
#createScreen .class-card .cr { grid-column:2; font-size:11px; letter-spacing:2px; margin:2px 0 4px; align-self:start; }
#createScreen .class-card .origin-info { grid-column:2; margin:0 0 4px; }
#createScreen .class-card p { grid-column:2; font-size:12.5px; line-height:1.45; color:#c9c0a8; margin:0; }
/* Raças (inerte na 0.5.0) — apenas centraliza dentro da tela */
#createScreen .race-section { width:100%; }
#createScreen .race-cards { justify-content:center; }

.cs-nameblock { display:flex; flex-direction:column; gap:8px; align-items:center; padding-top:6px; }
.cs-name-label { font-family:'Cinzel',serif; font-size:12px; letter-spacing:3px; color:#cbbf9f; text-transform:uppercase; }
#createScreen .cc-name-row { margin:0; width:100%; max-width:420px; justify-content:center; }
#createScreen #nameInput { width:100%; background:#05070c; border:1px solid var(--gold-dk); color:#ffe9a8;
  padding:13px 14px; border-radius:8px; font-family:'Cinzel',serif; font-size:17px; text-align:center; outline:none; }
#createScreen #nameInput:focus { border-color:var(--gold-hi); box-shadow:0 0 0 2px #c8aa5a22; }
#createScreen #randName { flex:0 0 auto; background:#1c2230; border:1px solid var(--gold-dk); color:#ffe9a8;
  border-radius:8px; padding:12px 14px; font-size:18px; transition:.15s; }
#createScreen #randName:hover { border-color:var(--gold-hi); }

.cs-forge-row { display:flex; justify-content:center; padding-top:4px; }
#createScreen #enterWorld.cs-forge { margin:0; padding:16px 64px; font-size:19px; font-weight:900; letter-spacing:3px;
  color:#2a1c05; background:linear-gradient(#f6dca0,#c8a02c 55%,#a07c18); border:2px solid #ffe9a8; border-radius:10px;
  box-shadow:0 5px 0 #5a4310, 0 10px 26px #c8a02c44; transition:.15s; text-transform:uppercase; }
#createScreen #enterWorld.cs-forge:hover:not(:disabled) { filter:brightness(1.12); transform:translateY(-2px); }
#createScreen #enterWorld.cs-forge:disabled { filter:grayscale(.8) brightness(.6); cursor:not-allowed; box-shadow:0 4px 0 #5a4310; }
.cs-message { text-align:center; min-height:20px; }

@keyframes csFadeDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes csFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes csPulse { 0%,100% { box-shadow:0 0 18px #c8aa5a55, inset 0 0 12px #0008; } 50% { box-shadow:0 0 30px #c8aa5a88, inset 0 0 12px #0008; } }

/* Desktop: 3 colunas de classes lado a lado */
@media (min-width:820px) {
  #createScreen #classCards { grid-template-columns:repeat(3,1fr); }
  #createScreen .class-card { flex-direction:column; text-align:center;
    display:flex; align-items:center; gap:6px; padding:18px 14px 16px; }
  #createScreen .class-card .ci { font-size:50px; }
  #createScreen .class-card h3, #createScreen .class-card .cr, #createScreen .class-card .origin-info, #createScreen .class-card p { text-align:center; }
}
/* Telas pequenas — ajustes finos de toque */
@media (max-width:420px) {
  .cs-scroll { padding:12px 11px 24px; gap:14px; }
  .cs-emblem { width:50px; height:50px; flex-basis:50px; font-size:26px; }
  .cs-title { letter-spacing:1px; }
  #createScreen .class-card { grid-template-columns:54px 1fr; padding:12px 13px; }
  #createScreen .class-card .ci { font-size:38px; }
  #createScreen #enterWorld.cs-forge { padding:15px 48px; font-size:17px; letter-spacing:2px; }
}