/* ============================================================
   PERSONAJES / LADDER (portado del proyecto anterior)
   MODIFICADO: las rutas de imagen url(../public/...) pasaron a
   url(../imagenes/ladder/...). Las reglas .managed-* del principio
   vienen de assets/css/sections.css del proyecto viejo (solo las que
   usan el hero y el contenedor del ladder).
   ============================================================ */
.managed-section-shell{max-width:1240px;margin:0 auto;padding:132px 24px 72px;font-family:Arial,Helvetica,sans-serif;color:#eee9df}.managed-hero{position:relative;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;padding:54px;border:1px solid rgba(167,65,34,.35);background:linear-gradient(125deg,rgba(12,8,7,.96),rgba(32,10,7,.88)),radial-gradient(circle at 80% 20%,rgba(188,43,18,.28),transparent 38%);box-shadow:0 35px 90px rgba(0,0,0,.42)}.managed-hero:after{content:"";position:absolute;right:-70px;top:-120px;width:420px;height:420px;border:1px solid rgba(230,95,48,.16);transform:rotate(45deg)}.managed-hero-glow{position:absolute;inset:auto -10% -70% 35%;height:320px;background:radial-gradient(circle,rgba(192,42,17,.2),transparent 64%);filter:blur(10px)}.managed-hero-content{position:relative;z-index:1;max-width:860px}.managed-eyebrow{display:inline-flex;border-left:3px solid #c33b21;padding-left:12px;color:#d7a55d;font-size:12px;font-weight:900;letter-spacing:.22em}.managed-hero h1{margin:18px 0 12px;font-size:clamp(42px,7vw,82px);line-height:.98;letter-spacing:-.045em;color:#fff8ef}.managed-hero p{max-width:760px;margin:0;color:#cdbfae;font-size:20px;line-height:1.65}.managed-intro,.managed-body{margin-top:28px;padding:32px 36px;border:1px solid #30231e;background:linear-gradient(180deg,rgba(24,18,16,.95),rgba(13,10,9,.96))}.managed-richtext{font-size:17px;line-height:1.8;color:#c9bfb5}.managed-richtext h2,.managed-richtext h3{color:#fff4e5}.managed-richtext a{color:#e6a65c}.managed-richtext img{max-width:100%;height:auto}.managed-richtext table{width:100%;border-collapse:collapse}.managed-richtext td,.managed-richtext th{padding:12px;border:1px solid #493126}.managed-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.managed-card{display:flex;flex-direction:column;min-height:330px;padding:28px;border:1px solid #3c2922;background:linear-gradient(180deg,#1c1512,#100c0b);box-shadow:0 24px 60px rgba(0,0,0,.24);transition:transform .2s,border-color .2s}.managed-card:hover{transform:translateY(-5px);border-color:#a33a23}.managed-card.style-gold{border-color:#62451f;background:linear-gradient(180deg,#21190d,#120e09)}.managed-card.style-dark{border-color:#302f2d;background:linear-gradient(180deg,#171717,#0d0d0d)}.managed-card-icon{width:58px;height:58px;display:grid;place-items:center;font-size:30px;border:1px solid rgba(206,85,40,.35);background:rgba(134,29,13,.14)}.managed-card-copy{flex:1}.managed-card h2{margin:24px 0 10px;color:#f7efe5;font-size:25px}.managed-card p{color:#b8ada3;line-height:1.7}.managed-card-button{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding:14px 16px;color:#fff;text-decoration:none;font-weight:900;border:1px solid #b33b22;background:linear-gradient(135deg,#85180f,#3e0906)}.style-gold .managed-card-button{background:linear-gradient(135deg,#916423,#4a2e08);border-color:#c89440}.style-dark .managed-card-button{background:#24201e;border-color:#514a45}.managed-card-button span{font-size:22px}.managed-empty{margin-top:90px;text-align:center;padding:80px 20px;border:1px solid #35231c;background:#120d0b}.managed-empty>span{font-size:56px}.managed-empty h1{font-size:40px}.managed-empty p{color:#ac9e92}@media(max-width:900px){.managed-card-grid{grid-template-columns:1fr}.managed-hero{padding:34px;min-height:300px}.managed-section-shell{padding-top:108px}}@media(max-width:560px){.managed-section-shell{padding-left:15px;padding-right:15px}.managed-hero{padding:28px 22px}.managed-hero h1{font-size:45px}.managed-intro,.managed-body{padding:24px 20px}}
/* Página de perfil de personaje (character.php) */

.char-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 132px 24px 72px;
  font-family: Arial, Helvetica, sans-serif;
  color: #eee9df;
}

/* Buscador cuando no hay ?name= */
.char-search-card {
  max-width: 520px;
  margin: 60px auto;
  padding: 40px;
  border: 1px solid #3c2922;
  border-radius: 16px;
  background: linear-gradient(180deg, #1c1512, #100c0b);
  text-align: center;
}
.char-search-card h1 {
  margin-top: 0;
  color: #f7efe5;
  font-size: 32px;
}
.char-search-card p {
  color: #b8ada3;
}
.char-search-form {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.char-search-form input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #493126;
  background: rgba(0, 0, 0, 0.35);
  color: #eee9df;
  font-size: 16px;
}
.char-search-form button {
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid #b33b22;
  background: linear-gradient(135deg, #85180f, #3e0906);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.char-known-list {
  margin-top: 24px;
  text-align: left;
}
.char-known-list a {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: #e6a65c;
  text-decoration: none;
  font-size: 14px;
}
.char-known-list a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Encabezado */
.char-hero {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(167, 65, 34, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(125deg, rgba(12, 8, 7, 0.96), rgba(32, 10, 7, 0.88)),
    radial-gradient(circle at 80% 20%, rgba(188, 43, 18, 0.28), transparent 38%);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.42);
}
.char-portrait {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #a33a23;
  flex-shrink: 0;
  background: #0d0a09;
}
.char-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.char-hero-info h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 5vw, 46px);
  color: #fff8ef;
  letter-spacing: -0.02em;
}
.char-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.char-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  color: #d7a55d;
}
.char-tag.hardcore {
  background: rgba(157, 20, 20, 0.25);
  color: #ff8a7a;
}
.char-tag.dead {
  background: rgba(80, 80, 80, 0.35);
  color: #bbb;
}
.char-tag.ladder {
  background: rgba(200, 148, 64, 0.2);
  color: #e6c67a;
}
.char-hero-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}
.char-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #cdbfae;
}
.char-bar-label {
  width: 52px;
  flex-shrink: 0;
  font-weight: 800;
}
.char-bar-track {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.char-bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
}
.char-bar-fill.life {
  background: linear-gradient(90deg, #7a1414, #c33b21);
}
.char-bar-fill.mana {
  background: linear-gradient(90deg, #123a6e, #3d7fd6);
}
.char-bar-fill.stamina {
  background: linear-gradient(90deg, #5a4310, #c89440);
}
.char-bar-value {
  width: 90px;
  flex-shrink: 0;
  text-align: right;
}

/* Grid principal: stats + equipo */
.char-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 860px) {
  .char-grid {
    grid-template-columns: 1fr;
  }
}

.char-panel {
  padding: 24px;
  border: 1px solid #3c2922;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(24, 18, 16, 0.9),
    rgba(13, 10, 9, 0.94)
  );
}
.char-panel h2 {
  margin-top: 0;
  font-size: 18px;
  color: #f7efe5;
  border-bottom: 1px solid #30231e;
  padding-bottom: 10px;
}

.char-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.char-stat-list li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 14px;
}
.char-stat-list li b {
  color: #e6a65c;
}

/* Paperdoll de equipo — posiciones absolutas en píxeles, en la misma
   proporción 1:1 del armory real (slashdiablo: equipped-items/style.css,
   location-1..12) pero escaladas x1.8 (var --doll-scale) para que se vea a
   buen tamaño en la página en vez de perdido en el panel; sin fondo propio
   (esa textura de piedra es de la pantalla de inventario, no de esta). */
.char-equip-grid {
  --doll-scale: 1.8;
  position: relative;
  width: calc(350px * var(--doll-scale));
  height: calc(232px * var(--doll-scale));
  margin: 0 auto;
}
.char-slot {
  position: absolute;
  padding: calc(2px * var(--doll-scale));
  border: 1px solid #3c2922;
  border-radius: calc(4px * var(--doll-scale));
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 82%;
}
.char-slot.empty {
  color: #5a4f48;
}
.char-slot-icon {
  width: 95%;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
/* Silueta real de cada slot (extraídas de inv_*.dc6) de fondo, igual que el juego
   la muestra tenue en un slot vacío; con ítem puesto queda detrás del ícono real. */
.char-slot[data-slot="helm"] {
  top: 0;
  left: calc(172px * var(--doll-scale));
  width: calc(56px * var(--doll-scale));
  height: calc(56px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_helm.png);
}
.char-slot[data-slot="amu"] {
  top: calc(28px * var(--doll-scale));
  left: calc(240px * var(--doll-scale));
  width: calc(28px * var(--doll-scale));
  height: calc(28px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_amulet.png);
}
.char-slot[data-slot="armor"] {
  top: calc(70px * var(--doll-scale));
  left: calc(172px * var(--doll-scale));
  width: calc(56px * var(--doll-scale));
  height: calc(84px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_armor.png);
}
.char-slot[data-slot="glove"] {
  top: calc(171px * var(--doll-scale));
  left: calc(59px * var(--doll-scale));
  width: calc(56px * var(--doll-scale));
  height: calc(56px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_glove.png);
}
.char-slot[data-slot="belt"] {
  top: calc(171px * var(--doll-scale));
  left: calc(169px * var(--doll-scale));
  width: calc(62px * var(--doll-scale));
  height: calc(33px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_belt.png);
}
.char-slot[data-slot="boots"] {
  top: calc(171px * var(--doll-scale));
  left: calc(287px * var(--doll-scale));
  width: calc(56px * var(--doll-scale));
  height: calc(56px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_boots.png);
}
.char-slot[data-slot="ring1"] {
  top: calc(171px * var(--doll-scale));
  left: calc(127px * var(--doll-scale));
  width: calc(28px * var(--doll-scale));
  height: calc(28px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_ring.png);
}
.char-slot[data-slot="ring2"] {
  top: calc(171px * var(--doll-scale));
  left: calc(245px * var(--doll-scale));
  width: calc(28px * var(--doll-scale));
  height: calc(28px * var(--doll-scale));
  background-image: url(../imagenes/ladder/ui/slot_ring.png);
}
.weap-slot-wrapper[data-slot="weap1"] .char-slot,
.weap-slot-wrapper[data-slot="weap2"] .char-slot {
  background-image: url(../imagenes/ladder/ui/slot_weapon.png);
  position: static;
  width: 100%;
  height: 100%;
  border-radius: calc(4px * var(--doll-scale));
}

/* Arma/escudo con dos sets (swap "F" del juego): el wrapper ES el slot
   (posición/tamaño absolutos acá) y adentro se apilan las dos versiones,
   mostrando solo la activa. */
.weap-slot-wrapper {
  position: absolute;
  top: calc(39px * var(--doll-scale));
  left: calc(59px * var(--doll-scale));
  width: calc(56px * var(--doll-scale));
  height: calc(111px * var(--doll-scale));
}
.weap-slot-wrapper[data-slot="weap2"] {
  left: calc(287px * var(--doll-scale));
}
.weap-slot-wrapper .weapon-set {
  display: none;
  height: 100%;
}
.weap-slot-wrapper .weapon-set.weap-set-shown {
  display: flex;
}

/* Pestañas "I"/"II" arriba de cada mano: centradas sobre el ANCHO del slot de
   esa mano (no un offset copiado a mano), así quedan bien puestas sea cual
   sea la escala — mismo par repetido a izquierda y derecha, sincronizadas por JS. */
.weap-set-tabs {
  position: absolute;
  top: calc(39px * var(--doll-scale) - 30px);
  width: calc(56px * var(--doll-scale));
  display: flex;
  justify-content: center;
  gap: 4px;
}
.weap-set-tabs[data-side="left"] {
  left: calc(59px * var(--doll-scale));
}
.weap-set-tabs[data-side="right"] {
  left: calc(287px * var(--doll-scale));
}
.weap-set-tab-btn {
  min-width: 28px;
  padding: 4px 10px;
  border-radius: 5px 5px 0 0;
  border: 1px solid #3c2922;
  border-bottom: none;
  background: rgba(0, 0, 0, 0.5);
  color: #5a4f48;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.15s;
}
.weap-set-tab-btn:hover {
  color: #e6a65c;
}
.weap-set-tab-btn.is-active {
  color: #fff8ef;
  background: rgba(195, 59, 33, 0.28);
  border-color: #b33b22;
}

@media (max-width: 700px) {
  .char-equip-grid {
    --doll-scale: 1.3;
  }
}
@media (max-width: 520px) {
  .char-equip-grid {
    --doll-scale: 1;
  }
}

/* Colores de calidad, iguales a los de los tooltips clásicos de D2. Se aplican
   directo sobre el texto del nombre (.q-* como clase propia, no solo de un
   ancestro), así funcionan igual en el slot, en el tooltip flotante (que se
   despega del DOM del slot) y en la lista de "otros items". */
.q-normal {
  color: #c9c2b8;
}
.q-magic {
  color: #7c96ff;
}
.q-set {
  color: #3ddc3d;
}
.q-rare {
  color: #ffff64;
}
.q-unique {
  color: #c8a464;
}
.q-crafted {
  color: #ffa552;
}
.q-runeword {
  color: #e6c67a;
}
.char-slot.q-magic {
  border-color: #3c4a8a;
}
.char-slot.q-set {
  border-color: #245c24;
}
.char-slot.q-rare {
  border-color: #6b6b1e;
}
.char-slot.q-unique {
  border-color: #6b562f;
}
.char-slot.q-crafted {
  border-color: #7a4a1e;
}
.char-slot.q-runeword {
  border-color: #5a4310;
}

/* Solo aparece si al item le falta el ícono real (caso raro): antes había
   siempre un nombre debajo del ícono, ahora el panel es "solo ícono" como el
   juego, así que este es el único texto visible dentro de un slot de equipo. */
.char-slot-name {
  font-weight: 800;
  font-size: 11px;
  text-align: center;
  line-height: 1.25;
  padding: 2px;
}

.char-item-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* Tooltip: el bloque .char-tooltip dentro de cada slot es solo la plantilla de
   contenido (queda oculto); el JS lo clona en #itemTooltip y lo posiciona con
   position:fixed calculando el lugar donde entra completo en la pantalla. */
.char-slot {
  cursor: help;
}
.char-slot .char-tooltip {
  display: none;
}
#itemTooltip {
  position: fixed;
  min-width: 220px;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid #493126;
  border-radius: 10px;
  background: #0c0908;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  visibility: hidden;
  text-align: center;
}
#itemTooltip.is-visible {
  opacity: 1;
  visibility: visible;
}
.char-tooltip-title {
  font-weight: 900;
  margin-bottom: 6px;
  font-size: 15px;
}
/* Nombre base del item (solo aparece cuando el título es un nombre único/set/runeword) */
.char-tooltip-type {
  color: #c96bf0;
  font-weight: 700;
  font-size: 12.5px;
  margin: -2px 0 6px;
}
/* Colores como en el tooltip clásico de D2: blanco los stats base del item,
   azul los bonus mágicos/rareza (celeste si "mejoran" al personaje), rojo los
   que lo perjudican, y dorado las líneas que vienen de una palabra rúnica. */
.char-tooltip-line {
  font-size: 12.5px;
  color: #e8e2d8;
  line-height: 1.6;
}
.char-tooltip-line.color-positive {
  color: #7c96ff;
}
.char-tooltip-line.color-negative {
  color: #ff6b6b;
}
.char-tooltip-line.rw {
  color: #e6c67a;
}
.char-tooltip-line.set {
  color: #3ddc3d;
}
/* Colores explícitos: cuando el propio dato del juego especifica uno (ej. "Corrupted"
   siempre en rojo), tiene prioridad sobre el heurístico positivo/negativo de arriba. */
.char-tooltip-line.color-white {
  color: #e8e2d8;
}
.char-tooltip-line.color-red {
  color: #ff6b6b;
}
.char-tooltip-line.color-green {
  color: #3ddc3d;
}
.char-tooltip-line.color-blue {
  color: #7c96ff;
}
.char-tooltip-line.color-gold {
  color: #e6c67a;
}
.char-tooltip-line.color-gray {
  color: #8a7a6c;
}
.char-tooltip-line.color-black {
  color: #4a4038;
}
.char-tooltip-line.color-tan {
  color: #c9a878;
}
.char-tooltip-line.color-orange {
  color: #ffa552;
}
.char-tooltip-line.color-yellow {
  color: #ffff64;
}

/* Runas de una palabra rúnica, dentro del tooltip */
.char-tooltip-runes {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.char-tooltip-rune {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
.char-tooltip-rune-label {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(230, 198, 122, 0.12);
  color: #e6c67a;
  font-size: 11px;
  font-weight: 800;
}

.muted {
  color: #8a7a6c;
  font-size: 13.5px;
}

/* Otros items (usado por Inventario y Alijo) — mismo fondo de piedra/cuero que el equipo */
.char-other-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background:
    linear-gradient(rgba(6, 4, 3, 0.6), rgba(6, 4, 3, 0.6)),
    url(../imagenes/ladder/ui/panel_bg.png);
  background-size: cover;
  background-position: center;
}
.char-item-chip {
  position: relative;
  cursor: help;
  padding: 8px 12px;
  border: 1px solid #3c2922;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.char-item-chip .char-tooltip {
  display: none;
}
.char-item-chip .qty {
  color: #8a7a6c;
}
.char-item-chip .item-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grilla de inventario real (pestaña "Inventario"): cada item en su celda exacta
   y a su tamaño real, 28px por celda — igual a como lo dibuja el armory (mismo
   valor que su .pos-x-N/.pos-y-N), en vez de una lista de nombres. */
.inv-grid {
  position: relative;
  margin: 0 auto;
  border: 1px solid #3c2922;
  border-radius: 8px;
  background:
    linear-gradient(rgba(6, 4, 3, 0.35), rgba(6, 4, 3, 0.35)),
    url(../imagenes/ladder/ui/invchar6.png);
  background-size: cover;
  background-position: center;
}
/* Alijo: misma grilla real que Inventario (render_inventory_grid con $extraClass
   'stash-grid'), pero con el fondo propio del alijo en vez del de la mochila. */
.inv-grid.stash-grid {
  background:
    linear-gradient(rgba(6, 4, 3, 0.35), rgba(6, 4, 3, 0.35)),
    url(../imagenes/ladder/ui/alijo.png);
  background-size: cover;
  background-position: center;
}
.inv-cell-item {
  position: absolute;
  box-sizing: border-box;
  cursor: help;
  border: 1px solid #3c2922;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-cell-item:hover,
.inv-cell-item:focus {
  border-color: #e6a65c;
  z-index: 2;
  outline: none;
}
.inv-cell-item .char-tooltip {
  display: none;
}
.inv-cell-icon {
   width: 90%;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
}
.inv-cell-qty {
  position: absolute;
  bottom: 0;
  right: 2px;
  font-size: 9px;
  font-weight: 900;
  color: #fff8ef;
  text-shadow: 0 1px 3px #000;
}
.inv-cell-item.q-magic {
  border-color: #3c4a8a;
}
.inv-cell-item.q-set {
  border-color: #245c24;
}
.inv-cell-item.q-rare {
  border-color: #6b6b1e;
}
.inv-cell-item.q-unique {
  border-color: #6b562f;
}
.inv-cell-item.q-crafted {
  border-color: #7a4a1e;
}
.inv-cell-item.q-runeword {
  border-color: #5a4310;
}

/* Ladder / listado de personajes (characters.php) */
.ladder-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 24px 0 18px;
  flex-wrap: wrap;
}
.ladder-search {
  flex: 1;
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #493126;
  background: rgba(0, 0, 0, 0.35);
  color: #eee9df;
  font-size: 15px;
}
.ladder-search:focus {
  outline: none;
  border-color: #c33b21;
}
.ladder-count {
  color: #8a7a6c;
  font-size: 13px;
  white-space: nowrap;
}
.ladder-table-wrap {
  overflow-x: auto;
  border: 1px solid #3c2922;
  border-radius: 16px;
}
.ladder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ladder-table th {
  text-align: left;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  color: #8a7a6c;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}
.ladder-table td {
  padding: 12px 16px;
  border-top: 1px solid #241a16;
}
.ladder-row {
  cursor: pointer;
  transition: background 0.12s;
}
.ladder-row:hover {
  background: rgba(195, 59, 33, 0.08);
}
.ladder-rank {
  font-weight: 900;
  color: #5a4f48;
  font-variant-numeric: tabular-nums;
  width: 40px;
}
.ladder-rank.top1 {
  color: #ffd75e;
}
.ladder-rank.top2 {
  color: #cfd4dc;
}
.ladder-rank.top3 {
  color: #c8895a;
}
.ladder-name {
  font-weight: 800;
  color: #f7efe5;
}
.ladder-level {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #e6a65c;
}
.ladder-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ladder-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
}
.ladder-tag.hc {
  background: rgba(157, 20, 20, 0.25);
  color: #ff8a7a;
}
.ladder-tag.ladder {
  background: rgba(200, 148, 64, 0.2);
  color: #e6c67a;
}
.ladder-tag.dead {
  background: rgba(80, 80, 80, 0.35);
  color: #bbb;
}
.ladder-empty {
  padding: 60px 20px;
  text-align: center;
  color: #8a7a6c;
}
.ladder-empty span {
  font-size: 44px;
  display: block;
  margin-bottom: 12px;
}

/* Fila expandible del ladder: mismo "muñeco" de equipo (.char-equip-grid) que
   la ficha de personaje, solo que más chico y clickeable desde la tabla. */
.ladder-expand-cell {
  width: 32px;
  padding-left: 12px !important;
  padding-right: 0 !important;
}
.ladder-expand-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #3c2922;
  background: rgba(0, 0, 0, 0.35);
  color: #8a7a6c;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: 0.12s;
}
.ladder-expand-btn:hover {
  color: #e6a65c;
  border-color: #b33b22;
}
.ladder-row.is-expanded {
  background: rgba(195, 59, 33, 0.08);
}
.ladder-equip-row td {
  padding: 0;
  border-top: none;
}
.ladder-equip-wrap {
  padding: 18px 16px 26px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid #241a16;
}
.ladder-equip-wrap .char-equip-grid {
  --doll-scale: 1.1;
}

/* Panel de Estadísticas: radar de atributos + resistencias de equipo */
.stat-radar-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 6px;
}
.stat-radar {
  overflow: visible;
}
.radar-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.radar-axis {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}
.radar-data {
  fill: rgba(195, 59, 33, 0.35);
  stroke: #e6a65c;
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar-label {
  fill: #b8ada3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.radar-value {
  fill: #e6a65c;
  font-size: 12px;
  font-weight: 900;
}
.stat-resist-title {
  margin: 4px 0 10px;
  font-size: 13px;
  color: #8a7a6c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  padding: 0;
}
.char-resist-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.char-resist-list .char-bar-fill.resist-fire {
  background: linear-gradient(90deg, #7a1414, #e0562e);
}
.char-resist-list .char-bar-fill.resist-cold {
  background: linear-gradient(90deg, #123a52, #3fb2d6);
}
.char-resist-list .char-bar-fill.resist-lightning {
  background: linear-gradient(90deg, #7a6a10, #e6c73f);
}
.char-resist-list .char-bar-fill.resist-poison {
  background: linear-gradient(90deg, #144a1e, #3ddc3d);
}
.char-bar-value.is-negative {
  color: #ff6b6b;
  font-weight: 800;
}
.stat-resist-note {
  margin: 10px 0 0;
  line-height: 1.5;
}

/* Skills */
.char-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.char-skill-chip {
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.char-skill-chip b {
  color: #e6a65c;
}

/* Pestañas Equipo / Habilidades del panel derecho */
.char-tabbed h2 {
  display: none;
} /* el <h2> "Equipo"/"Otros items" queda reemplazado por los botones de pestaña */
.char-tabbed .char-other-items h2,
.char-tab-content h2 {
  display: block;
} /* pero los subtítulos DENTRO de una pestaña (ej. "Otros items") siguen visibles */
.char-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #30231e;
  padding-bottom: 0;
}
.char-tab-btn {
  position: relative;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #8a7a6c;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.15s;
  margin-bottom: -1px;
}
.char-tab-btn:hover {
  color: #e6a65c;
}
.char-tab-btn.is-active {
  color: #f7efe5;
  background: rgba(195, 59, 33, 0.12);
  border-color: #3c2922;
  border-bottom: 1px solid #16110f;
}
.char-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 20px;
  background: #c33b21;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.char-tab-content[hidden] {
  display: none;
}

/* Árbol de habilidades — calcado del panel real del juego: celdas cuadradas
   "remachadas", barras de conexión gruesas tipo canal tallado, pestañas
   verticales al costado (no arriba) y un encabezado con los puntos libres. */
.skill-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #30231e;
}
.skill-header-icon {
  font-size: 20px;
}
.skill-header-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a7a6c;
}
.skill-header-value {
  font-size: 18px;
  font-weight: 900;
  color: #7c96ff;
}

/* Layout de 3 columnas calcado de d2.lc/TREE: panel de descripción grande a
   la izquierda, árbol al medio, pestañas de categoría apiladas a la derecha. */
.skill-tree-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* Panel de descripción fijo (no flotante): el JS le pone acá el mismo HTML
   que antes iba al tooltip flotante — nombre en .char-tooltip-title,
   detalle en .char-tooltip-line, así hereda sus colores gratis. */
.skill-desc-panel {
  width: 220px;
  min-height: 320px;
  flex-shrink: 0;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #3c2922;
  background: radial-gradient(circle at 50% 15%, #1c1512, #0a0706 80%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.skill-desc-panel .char-tooltip-title {
  font-size: 16px;
  color: #7ce67c;
}
.skill-desc-hint {
  color: #5a4f48;
  font-size: 12.5px;
  font-style: italic;
}
.skill-tree-pages {
  overflow-x: auto;
  padding-bottom: 8px;
  flex: 1;
}
/* Pestañas apiladas a la derecha, formato "+N to / Nombre" calcado de
   d2.lc/TREE en vez de un simple botón con el nombre solo. */
.skill-page-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 128px;
}
.skill-page-btn {
  padding: 10px 8px;
  border-radius: 6px;
  border: 1px solid #3c2922;
  background: linear-gradient(180deg, rgba(36, 26, 21, 0.85), rgba(13, 10, 9, 0.9));
  color: #b8ada3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
}
.skill-page-btn-plus {
  display: block;
  color: #7c96ff;
  font-size: 11px;
  font-weight: 900;
}
.skill-page-btn-name {
  display: block;
}
.skill-page-btn:hover {
  color: #f7efe5;
  border-color: #5a4310;
}
.skill-page-btn.is-active {
  color: #fff8ef;
  background: linear-gradient(180deg, rgba(138, 90, 30, 0.35), rgba(58, 39, 18, 0.5));
  border-color: #b33b22;
  box-shadow: inset 0 0 0 1px rgba(230, 166, 92, 0.25);
}
.skill-page[hidden] {
  display: none;
}
/* fondoSkill.png: textura de piedra/pergamino con marco, genérica (sin
   canales/sockets de ninguna clase dibujados adentro, a diferencia de
   skltree_*_back.dc6 — ver el comentario que se sacó de acá arriba), así que
   no compite con las líneas reales que dibuja este mismo componente más abajo
   (<svg class="skill-tree-lines">). Se estira 100%/100% (no cover/contain)
   para que el marco se vea completo pegado a los 4 bordes sea cual sea la
   forma de la caja (varía según cuántas habilidades tenga cada pestaña). */
.skill-tree-wrap {
  position: relative;
  border-radius: 10px;
  background-image: url(../imagenes/ladder/ui/fondoSkill.png);
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.skill-tree-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Flecha fina de requisito -> habilidad, calcada de d2.lc/TREE (antes era un
   canal grueso tallado; ver el marker-end con punta de flecha en el <line>,
   armado en render_skill_tree_page()). */
.skill-line {
  stroke: #6b6058;
  stroke-width: 1.6;
}
.skill-line.is-active {
  stroke: #e6a65c;
}
.skill-arrowhead {
  fill: #6b6058;
}
.skill-arrowhead.is-active {
  fill: #e6a65c;
}
.skill-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 3px;
  border: 2px solid #100b08;
  background:
    radial-gradient(circle at 4px 4px, #cfa15f 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 4px) 4px, #cfa15f 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 4px calc(100% - 4px), #cfa15f 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #cfa15f 0 1.6px, transparent 2.2px),
    linear-gradient(155deg, #4a3420, #1a1108 65%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),
    0 2px 5px rgba(0, 0, 0, 0.55);
  cursor: help;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.skill-cell:hover,
.skill-cell:focus {
  border-color: #e6a65c;
  transform: scale(1.08);
  z-index: 2;
  outline: none;
}
.skill-cell.has-points {
  border-color: #8a5a1e;
  background:
    radial-gradient(circle at 4px 4px, #e6c67a 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 4px) 4px, #e6c67a 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 4px calc(100% - 4px), #e6c67a 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #e6c67a 0 1.6px, transparent 2.2px),
    linear-gradient(155deg, #6b4a1e, #2a1c0c 65%);
}
.skill-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 2px;
}
/* Puntos invertidos: chapita oscura con número celeste sobre el propio canal
   de conexión, debajo de la celda — igual que en el juego, no una medalla
   dorada tapando la esquina del ícono. */
.skill-points {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #0c0908;
  border: 1px solid #100b08;
  color: #7c96ff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  z-index: 1;
}
.skill-cell .char-tooltip {
  display: none;
}

@media (max-width: 760px) {
  .skill-tree-layout {
    flex-direction: column;
  }
  .skill-desc-panel {
    width: 100%;
    min-height: 0;
  }
  .skill-page-tabs {
    flex-direction: row;
    width: auto;
    flex-wrap: wrap;
  }
  .skill-page-btn {
    flex: 1;
    min-width: 100px;
  }
}