/* Perfil (profile) y sus ventanas (elegir avatar, cambiar nombre). Raíz: .screen.ui.s-profile.
   Spec 8.11: ficha dorada de 236 (la única de la pantalla) y, a la derecha, pestañas con las
   estadísticas (rejilla 3×3 de pozos) o el historial. */

.s-profile .profile-body {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 12px;
  width: 100%; max-width: 1180px; max-height: 480px; align-self: center; margin: auto 0; padding: 12px;
}

/* ---- Ficha ---------------------------------------------------------------------------------- */
.s-profile .prof-card { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 16px 12px 12px; }
.s-profile .pc-main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.s-profile .pc-main > .avf { width: calc(88px * var(--art-k)) !important; height: calc(88px * var(--art-k)) !important; margin-bottom: 0; }
.s-profile .pc-name { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; margin-top: 2px; }
.s-profile .pc-name .ty-h2 { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.s-profile .pc-code {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border: 0; cursor: pointer;
  font: 800 12px/1 var(--f-ui); color: var(--tx-2);
}
.s-profile .pc-code b { color: #fff; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.s-profile .pc-code svg { color: var(--c-cyan); margin-left: 2px; }
.s-profile .pc-code:active { transform: translateY(1px); }
.s-profile .pc-xp { width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding: 0 4px; }
.s-profile .pc-row { display: flex; align-items: center; justify-content: space-between; }
.s-profile .pc-row .ty-over:first-child { color: #fff; }
.s-profile .pc-xpv { letter-spacing: .6px; }
.s-profile .pc-cue { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.s-profile .pc-cue .ty-h4 { font-size: 16px; }
.s-profile .pc-cueimg { width: 206px; max-width: 100%; height: 5px; margin-top: 1px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.s-profile .pc-since { margin-top: 0; color: var(--tx-4); }
.s-profile .pc-btns { flex: none; display: flex; gap: 8px; margin-top: 10px; }
.s-profile .pc-btns .btn { min-width: 96px; }

/* ---- Derecha: pestañas y contenido ----------------------------------------------------------- */
.s-profile .prof-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.s-profile .prof-right .tabs { flex: none; margin-bottom: 12px; }
.s-profile .prof-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.s-profile .prof-wait { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Estadísticas: 3×3 pozos que llenan el alto */
.s-profile .tiles { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-profile .stile { position: relative; display: flex; align-items: center; gap: 8px; min-height: 0; padding: 0 14px; overflow: hidden; }
.s-profile .st-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-profile .st-txt .ty-over { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-profile .st-val { font-size: 27px; color: #fff; white-space: nowrap; padding-right: 2px; text-shadow: 0 2px 0 rgba(0,8,30,.55); }
.s-profile .st-val.gold-t { justify-self: start; align-self: flex-start; }
.s-profile .st-val.c-green { color: var(--c-green-hi); }
.s-profile .st-val.c-orange { color: var(--c-orange); }
.s-profile .st-txt .ty-small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx-3); }
.s-profile .st-bar { height: 6px; margin-top: 2px; }
/* Anillo del % de victorias (degradado cónico estático) */
.s-profile .st-ring {
  flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(#5ed22c 0 var(--p), rgba(126,174,255,.14) var(--p) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.s-profile .st-ring i { position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(180deg, var(--well-top), var(--well-bot)); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }

/* Historial */
.s-profile .hist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; margin-right: -4px; }
.s-profile .hist.stagger > :nth-child(n+11) { animation: none; }
.s-profile .hrow { flex: none; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.s-profile .hrow .pill { width: 76px; justify-content: center; }
.s-profile .h-rival { flex: 1 1 0; min-width: 0; font: 800 12.5px/1 var(--f-ui); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-profile .h-vs { font-weight: 600; color: var(--tx-3); }
.s-profile .h-venue { flex: none; width: 76px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-profile .h-reason { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-profile .h-date { flex: none; width: 52px; text-align: right; color: var(--tx-4); }
.s-profile .prof-empty { flex: 1; min-height: 0; display: flex; }
.s-profile .prof-empty .empty-st { flex: 1; }

/* ---- Ventanas ------------------------------------------------------------------------------- */
/* Elige avatar: 6 × avatar(56) */
.av-modal { width: 452px; max-width: 100%; }
.av-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.av-grid .av-pick { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.av-grid .av-pick.sel { box-shadow: 0 0 0 2px var(--gold-2); background: rgba(255,211,77,.08); }
.av-grid .av-pick:not([disabled]):active { transform: scale(.94); }
.av-grid .av-pick.locked { cursor: default; }
.av-grid .av-pick.locked .avf { opacity: .35; }
.av-grid .av-pick .pill { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 16px; padding: 0 5px; font-size: 8.5px; letter-spacing: .4px; gap: 3px; }
.av-grid .av-pick .pill svg { width: 9px; height: 9px; }
.av-grid .av-chk {
  position: absolute; right: 2px; top: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(#7ee84a, #2c9612); box-shadow: 0 0 0 2px #0c2656, 0 2px 3px rgba(0,0,0,.5);
}
.av-modal .av-hint { margin: 12px 0 0; text-align: center; }
/* Cambiar nombre */
.rename-modal { width: 340px; max-width: 100%; }
.rename-modal .confirm-txt { margin: 0 auto 10px; }
.rename-modal .rn-hint { margin: 6px 2px 0; }