/* =====================================================================
   tela_inicio.css — tela inicial (seleção de 3 personagens) e criação.
   Classes "ti-". O container é o .ui-tela de ui.js (z 65).
   ===================================================================== */
.ui-tela.ti-ativa { background: #07060c; overflow: hidden; }
.ti-fundo, .ti-fundo > * { position: absolute; inset: 0; pointer-events: none; }
.ti-arte {
  inset: -6%;
  background: url('../assets/cenarios/cristais.jpg') center / cover no-repeat;
  filter: blur(3px) saturate(1.15) brightness(.55);
  animation: ti-deriva 60s ease-in-out infinite alternate;
}
.ui-tela:has(.ti-criacao) .ti-arte { background-image: url('../assets/cenarios/cidade.jpg'); }
@keyframes ti-deriva { from { transform: scale(1.04) translate(-1.5%, -1%); } to { transform: scale(1.12) translate(1.5%, 1.2%); } }
.ti-veu {
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(40,28,80,.15), rgba(6,5,12,.78) 70%, rgba(4,3,8,.96)),
    linear-gradient(180deg, rgba(6,5,12,.55), rgba(6,5,12,0) 30%, rgba(6,5,12,0) 65%, rgba(6,5,12,.85));
}
.ti-part { width: 100%; height: 100%; }

.ti-palco {
  --cor: #c9a227;
  position: relative; z-index: 1; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 4vh 16px 18px; box-sizing: border-box;
  animation: ti-surge .5s ease-out both;
}
@keyframes ti-surge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- botões ---------- */
.ti-bt {
  cursor: pointer; border-radius: 6px; padding: 9px 20px;
  font: 600 14px "Segoe UI", system-ui, sans-serif; letter-spacing: .03em;
  border: 1px solid #6e5626; color: #f6e7bd;
  background: linear-gradient(#3a3020, #241d12);
  box-shadow: inset 0 1px 0 rgba(255,230,160,.18), 0 2px 8px rgba(0,0,0,.5);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.ti-bt:hover { filter: brightness(1.2); transform: translateY(-1px); }
.ti-bt:active { transform: translateY(1px); }
.ti-bt-ouro {
  color: #2a1d05; border-color: #f7dc8c;
  background: linear-gradient(#ffe79a, #e0b54a 55%, #b8862a);
  box-shadow: inset 0 1px 0 #fff6cf, 0 0 0 1px rgba(0,0,0,.45), 0 4px 16px rgba(240,190,70,.28);
  text-shadow: 0 1px 0 rgba(255,245,200,.6);
}
.ti-bt-ouro:hover { box-shadow: inset 0 1px 0 #fff6cf, 0 0 0 1px rgba(0,0,0,.45), 0 4px 24px rgba(255,210,90,.5); }
.ti-bt-sec { background: rgba(20,18,30,.75); color: #d8d2c0; border-color: #4a4160; }
.ti-bt-grande { padding: 13px 34px; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.ti-bt-ico {
  width: 36px; height: 36px; flex: none; cursor: pointer; border-radius: 6px;
  border: 1px solid #5a2b2b; background: rgba(40,14,14,.7); color: #e6a39a; font: 700 15px sans-serif;
  transition: background .15s, color .15s;
}
.ti-bt-ico:hover { background: #7a2020; color: #fff; }
.ui-tela kbd { color: #f0cf74; }

/* =====================================================================
   Seleção de personagens
   ===================================================================== */
.ti-logo { position: relative; text-align: center; margin: 1vh 0 3.5vh; }
.ti-selo {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(240,207,116,.16), rgba(240,207,116,0) 62%),
    repeating-conic-gradient(from 0deg, rgba(240,207,116,.22) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 58%, transparent 59%, transparent 66%, #000 67%, #000 68%, transparent 69%), radial-gradient(circle, #000 40%, transparent 62%);
          mask: radial-gradient(circle, transparent 54%, #000 55%, #000 58%, transparent 59%, transparent 66%, #000 67%, #000 68%, transparent 69%), radial-gradient(circle, #000 40%, transparent 62%);
  animation: ti-gira 50s linear infinite; opacity: .9;
}
@keyframes ti-gira { to { transform: rotate(360deg); } }
.ti-logo h1 {
  position: relative; margin: 0; font: 700 clamp(40px, 7vw, 76px)/1 Georgia, "Times New Roman", serif; letter-spacing: .05em;
  background: linear-gradient(180deg, #fff5cf 10%, #f0cf74 45%, #b07a26 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2c1f08) drop-shadow(0 0 22px rgba(240,190,90,.35));
}
.ti-logo p { position: relative; margin: 12px 0 0; color: #cbbf9d; font: italic 15px Georgia, serif; letter-spacing: .06em; }
.ti-logo p::before, .ti-logo p::after { content: '✦'; color: #b8954a; margin: 0 10px; font-style: normal; font-size: 11px; }

.ti-titulo-sec { margin: 0 0 16px; font: 600 13px "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .22em; color: #a99e80; }

.ti-slots { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 1000px; }
.ti-slot {
  --cor: #8a7a50;
  position: relative; width: 268px; min-height: 380px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; padding: 16px 16px 14px;
  border-radius: 14px; cursor: pointer; text-align: center; color: #ece8dc; font-family: "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(30,26,46,.82), rgba(12,11,20,.9));
  border: 1px solid rgba(184,149,74,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  transition: transform .25s, border-color .25s, box-shadow .25s;
  animation: ti-surge .55s ease-out both; animation-delay: var(--d, 0ms);
  outline: none;
}
.ti-slot::before { /* cantos dourados */
  content: ''; position: absolute; inset: 6px; border-radius: 10px; pointer-events: none;
  background:
    linear-gradient(#b8954a, #b8954a) top left / 18px 1px, linear-gradient(#b8954a, #b8954a) top left / 1px 18px,
    linear-gradient(#b8954a, #b8954a) top right / 18px 1px, linear-gradient(#b8954a, #b8954a) top right / 1px 18px,
    linear-gradient(#b8954a, #b8954a) bottom left / 18px 1px, linear-gradient(#b8954a, #b8954a) bottom left / 1px 18px,
    linear-gradient(#b8954a, #b8954a) bottom right / 18px 1px, linear-gradient(#b8954a, #b8954a) bottom right / 1px 18px;
  background-repeat: no-repeat; opacity: .7;
}
.ti-slot:hover { transform: translateY(-4px); border-color: rgba(240,207,116,.6); }
.ti-slot.ti-sel {
  transform: translateY(-6px); border-color: #f0cf74;
  box-shadow: 0 0 0 1px rgba(240,207,116,.4), 0 0 34px color-mix(in srgb, var(--cor) 45%, transparent), 0 14px 36px rgba(0,0,0,.6);
}
.ti-slot-n {
  position: absolute; top: 12px; left: 14px; font: 700 13px Georgia, serif; color: #b8954a; letter-spacing: .1em;
}
.ti-slot-spr { position: relative; width: 190px; height: 190px; margin: 4px 0 6px; }
.ti-slot-spr canvas { position: relative; width: 190px; height: 190px; }
.ti-pedestal {
  position: absolute; left: 50%; bottom: 2px; width: 150px; height: 40px; margin-left: -75px; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--cor) 55%, transparent), transparent 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 50%, transparent);
  opacity: .55; transition: opacity .3s;
}
.ti-sel .ti-pedestal { opacity: 1; animation: ti-pulsa 2.4s ease-in-out infinite; }
@keyframes ti-pulsa { 50% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--cor) 60%, transparent); } }
.ti-slot-nome { font: 700 20px Georgia, serif; color: #fff4d6; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.ti-slot-classe { margin-top: 2px; font-size: 13px; color: color-mix(in srgb, var(--cor) 70%, #fff); font-weight: 600; }
.ti-slot-info { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 8px 0 14px; font-size: 12px; color: #a8a596; }
.ti-slot-bts { display: flex; gap: 8px; width: 100%; margin-top: auto; }
.ti-slot-bts .ti-bt { flex: 1; }

.ti-vazio { justify-content: center; gap: 6px; border-style: dashed; border-color: rgba(184,149,74,.35); background: linear-gradient(180deg, rgba(22,20,34,.6), rgba(10,9,16,.7)); }
.ti-vazio .ti-mais {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px;
  font: 300 52px/1 Georgia, serif; color: #f0cf74;
  border: 1px solid rgba(240,207,116,.45); background: radial-gradient(circle, rgba(240,207,116,.14), transparent 70%);
  transition: transform .3s, box-shadow .3s;
}
.ti-vazio:hover .ti-mais, .ti-vazio.ti-sel .ti-mais { transform: rotate(90deg) scale(1.06); box-shadow: 0 0 24px rgba(240,207,116,.35); }
.ti-vazio b { font: 600 16px Georgia, serif; color: #f0e2b8; }
.ti-vazio small { color: #8d8877; font-size: 12px; }

.ti-rodape { margin-top: auto; padding-top: 3vh; font-size: 12px; color: #8d8877; text-align: center; }

/* =====================================================================
   Criação de personagem
   ===================================================================== */
.ti-criacao { padding-top: 2.5vh; }
.ti-cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: 1180px; margin-bottom: 2vh; }
.ti-cab .ti-bt { justify-self: start; }
.ti-cab h2 {
  margin: 0; font: 700 30px Georgia, serif; letter-spacing: .05em;
  background: linear-gradient(#fff5cf, #e0b54a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ti-cab-slot { justify-self: end; font: 600 12px "Segoe UI", sans-serif; letter-spacing: .15em; text-transform: uppercase; color: #b8954a; }

.ti-criar-corpo {
  display: grid; grid-template-columns: 240px minmax(300px, 1fr) 320px; gap: 22px;
  width: 100%; max-width: 1180px; align-items: start;
}
.ti-classes, .ti-detalhe {
  background: linear-gradient(180deg, rgba(26,23,40,.86), rgba(12,11,20,.9));
  border: 1px solid rgba(184,149,74,.35); border-radius: 12px; padding: 14px; backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ti-classes h3, .ti-detalhe h4 { margin: 0 0 10px; font: 600 11px "Segoe UI", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a99e80; }
.ti-classes { display: flex; flex-direction: column; gap: 7px; }
.ti-classe {
  --cor: #888; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 7px 10px 7px 7px; border-radius: 9px; color: #e6e1d3; font: 13px "Segoe UI", sans-serif;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
  transition: background .2s, border-color .2s, transform .2s;
  animation: ti-surge .4s ease-out both; animation-delay: var(--d, 0ms);
}
.ti-classe:hover { background: rgba(255,255,255,.06); transform: translateX(3px); }
.ti-classe.ti-sel {
  border-color: var(--cor); transform: translateX(5px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 26%, transparent), rgba(255,255,255,.02));
  box-shadow: 0 0 18px color-mix(in srgb, var(--cor) 25%, transparent);
}
.ti-classe-ret {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background-color: #12101c; box-shadow: 0 0 0 2px var(--cor), inset 0 0 10px rgba(0,0,0,.6);
}
.ti-classe b { display: block; font-size: 15px; }
.ti-classe small { color: #a8a596; font-size: 12px; }

.ti-centro { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ti-vitrine { position: relative; width: 300px; height: 300px; display: grid; place-items: center; }
.ti-vitrine canvas { position: relative; width: 280px; height: 280px; }
.ti-runa {
  position: absolute; left: 50%; bottom: 6px; width: 260px; height: 80px; margin-left: -130px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--cor) 70%, transparent);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--cor) 40%, transparent), transparent 70%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--cor) 45%, transparent), inset 0 0 20px color-mix(in srgb, var(--cor) 35%, transparent);
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.ti-runa::after {
  content: ''; position: absolute; inset: 10px 26px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--cor) 60%, transparent);
  animation: ti-brilho 2.6s ease-in-out infinite;
}
@keyframes ti-brilho { 50% { opacity: .35; } }
.ti-sexo { display: flex; gap: 8px; }
.ti-sexo button {
  min-width: 130px; padding: 8px 14px; cursor: pointer; border-radius: 20px;
  border: 1px solid #4a4160; background: rgba(20,18,30,.8); color: #cfc9b8; font: 600 13px "Segoe UI", sans-serif;
  transition: all .2s;
}
.ti-sexo button:hover { border-color: #b8954a; }
.ti-sexo button.ti-sel { border-color: #f0cf74; color: #fff3cf; background: linear-gradient(#4a3a1c, #2a2010); box-shadow: 0 0 14px rgba(240,190,70,.3); }
.ti-nome { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 320px; }
.ti-nome span { font: 600 11px "Segoe UI", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a99e80; }
.ti-nome input {
  width: 100%; box-sizing: border-box; text-align: center; padding: 11px 14px; border-radius: 8px;
  background: rgba(8,7,14,.85); color: #fff4d6; font: 600 18px Georgia, serif; letter-spacing: .04em;
  border: 1px solid #6e5626; box-shadow: inset 0 2px 8px rgba(0,0,0,.6);
  transition: border-color .2s, box-shadow .2s;
}
.ti-nome input::placeholder { color: #5f5a4c; font-weight: 400; }
.ti-nome input:focus { outline: none; border-color: #f0cf74; box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 16px rgba(240,190,70,.25); }
.ti-nome input.ti-erro { animation: ti-treme .35s; border-color: #d45a4a; }
@keyframes ti-treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.ti-detalhe.ti-troca { animation: ti-surge .35s ease-out; }
.ti-det-nome { margin: 0; font: 700 28px Georgia, serif; color: color-mix(in srgb, var(--cor) 75%, #fff); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.ti-det-papel { margin: 2px 0 12px; color: #cbbf9d; font: italic 14px Georgia, serif; }
.ti-det-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.ti-det-info dt { color: #8d8877; }
.ti-det-info dd { margin: 0; color: #ece8dc; }
.ti-det-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #d6d0c0; padding: 10px 12px; border-left: 2px solid var(--cor); background: rgba(255,255,255,.03); border-radius: 0 6px 6px 0; }
.ti-detalhe h4 { margin-top: 12px; }
.ti-attr { display: grid; grid-template-columns: 92px 1fr 24px; gap: 8px; align-items: center; font-size: 12px; color: #a8a596; margin-bottom: 5px; }
.ti-attr div { height: 7px; background: rgba(0,0,0,.55); border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ti-attr i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 60%, #000), var(--cor)); transition: width .4s; }
.ti-attr b { text-align: right; color: #ece8dc; }
.ti-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ti-skill { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.035); font-size: 12px; color: #d6d0c0; min-width: 0; }
.ti-skill small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-skill svg, .ti-skill i, .ti-skill img { flex: none; width: 26px; height: 26px; }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .ti-criar-corpo { grid-template-columns: 200px minmax(280px, 1fr) 270px; gap: 14px; }
  .ti-classe-ret { width: 38px; height: 38px; }
  .ti-vitrine { width: 260px; height: 260px; }
  .ti-vitrine canvas { width: 240px; height: 240px; }
}
@media (max-width: 860px) {
  .ti-criar-corpo { grid-template-columns: 1fr; max-width: 560px; }
  .ti-classes { display: grid; grid-template-columns: 1fr 1fr; }
  .ti-classes h3 { grid-column: 1 / -1; }
  .ti-centro { order: -1; }
}
@media (max-height: 760px) {
  .ti-logo { margin-bottom: 2vh; }
  .ti-selo { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .ti-slot { min-height: 340px; }
  .ti-slot-spr, .ti-slot-spr canvas { width: 160px; height: 160px; }
  .ti-vitrine { width: 240px; height: 240px; }
  .ti-vitrine canvas { width: 230px; height: 230px; }
}