/* =====================================================================================
   Kit de interfaz (hoja de Sou6): marcos y botones pintados en vez del marrón plano.
   Va después de theme-hoguera.css y sólo en Tibia Survivor (body:not(.game-tactics)).
   Un estilo por tipo de pieza, siempre el mismo:
     · botón normal ............ btn_brown      · botón principal ..... btn_fire
     · botón activo/elegido .... btn_gold       · botón de SC ......... btn_purple
     · botón desactivado ....... btn_grey       · filtros/pestañas .... tab_brown → tab_gold
     · casillas (personajes, equipo) ...... slot_brown → slot_gold (y color por rareza)
     · paneles y ventanas ...... panel_frame    · fila del depot ...... bar_brown
     · cabecera de pantalla .... bar_head_bar + compass
   Las imágenes van con border-image (9 trozos) para que se estiren sin deformar las esquinas.
   ===================================================================================== */

body:not(.game-tactics) :is(#screen, #modal, #toasts) {
  --kit-panel-bg: #2a190f url('../assets/ui/kit/panel_tex.webp') center / cover;
}

/* ---------- Botones ---------- */
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn:not(.btn-icon):not(.badge-plus) {
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/btn_brown.webp') 22 26 fill / 0.7rem 0.8rem stretch;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
  color: #ffe9c6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn:not(.btn-icon):not(.badge-plus):hover { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) brightness(1.15); }
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn:not(.btn-icon):not(.badge-plus):active { transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)); box-shadow: none; }
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn.btn-primary:not(.btn-icon) {
  border-image-source: url('../assets/ui/kit/btn_fire.webp');
  color: #fff6e0;
  text-shadow: 0 1px 0 #5a1a06, 0 0 8px rgba(90, 20, 0, 0.6);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(255, 120, 30, 0.35));
}
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn.btn-sc:not(.btn-icon) { border-image-source: url('../assets/ui/kit/btn_purple.webp'); color: #f3e2ff; }
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn.btn-danger:not(.btn-icon) { border-image-source: url('../assets/ui/kit/btn_dark.webp'); color: #ffc9bd; }
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn:not(.btn-icon):is(.is-active, [aria-pressed="true"]) {
  border-image-source: url('../assets/ui/kit/btn_gold.webp');
  color: #2a1405;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5);
}
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn:not(.btn-icon):is(:disabled, [aria-disabled="true"], .is-max) {
  border-image-source: url('../assets/ui/kit/btn_grey.webp');
  color: #d8cfc2;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
}

/* Mejoras: los botones de compra siguen en dorado (oro) y morado (SC), pero del mismo juego */
body:not(.game-tactics) :is(#screen, #modal) .upgrades-screen .upgrade-card .cost-pair .btn:not(.btn-icon) {
  background: none;
  border: 2px solid transparent;
  border-image: url('../assets/ui/kit/btn_gold.webp') 22 26 fill / 0.55rem 0.6rem stretch;
  color: #2a1405;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5);
}
body:not(.game-tactics) :is(#screen, #modal) .upgrades-screen .upgrade-card .cost-pair .btn.btn-sc:not(.btn-icon) { border-image-source: url('../assets/ui/kit/btn_purple.webp'); color: #f3e2ff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
body:not(.game-tactics) :is(#screen, #modal) .upgrades-screen .upgrade-card .cost-pair .btn.is-max:not(.btn-icon) { border-image-source: url('../assets/ui/kit/btn_grey.webp'); color: #d9c7a3; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }

/* ---------- Filtros y pestañas ---------- */
body:not(.game-tactics) :is(#screen, #modal) :is(.tab, .chip, .mon-filter, .equip-tab-btn, .color-part, .rk-chip) {
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/tab_brown.webp') 20 22 fill / 0.6rem 0.7rem stretch;
  box-shadow: none;
  color: #f6e3c4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}
body:not(.game-tactics) :is(#screen, #modal) :is(.tab, .chip, .mon-filter, .equip-tab-btn, .color-part, .rk-chip):hover { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)) brightness(1.15); border-color: transparent; }
body:not(.game-tactics) :is(#screen, #modal) :is(.tab, .chip, .mon-filter).is-active, body:not(.game-tactics) :is(#screen, #modal) :is(.equip-tab-btn, .color-part, .rk-chip).is-on {
  background: none;
  border-image-source: url('../assets/ui/kit/tab_gold.webp');
  color: #1e0e02;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
  box-shadow: none;
}

/* ---------- Paneles y ventanas: el mismo marco para todos ---------- */
body:not(.game-tactics) #modal .modal-box,
body:not(.game-tactics) :is(#screen, #modal) :is(.voc-picker, .inventory-wrap, .depot, .forge-panel, .market-sell, .mon-detail, .color-panel, .forge-level, .wiki-page, .prey-slot) {
  background: var(--kit-panel-bg);
  background-clip: padding-box;
  border: 13px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/panel_frame.webp') 50 / 36px stretch;
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
/* Dentro de una ventana, el panel no lleva sombra extra */
body:not(.game-tactics) #modal .modal-box :is(.mon-detail, .inventory-wrap, .depot) { filter: none; }

/* ---------- Casillas: personajes, outfits y huecos de equipo ---------- */
body:not(.game-tactics) :is(#screen, #modal) :is(.outfit-card, .prey-opt, .slot:not(.slot-empty-cell)) {
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/slot_brown.webp') 16 fill / 12px stretch;
  box-shadow: none;
}
body:not(.game-tactics) :is(#screen, #modal) :is(.outfit-card, .prey-opt, .slot.is-filled):hover { border-color: transparent; filter: brightness(1.15); }
body:not(.game-tactics) :is(#screen, #modal) .outfit-card.is-selected { border-image-source: url('../assets/ui/kit/slot_gold.webp'); box-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 190, 80, 0.45)); }
body:not(.game-tactics) :is(#screen, #modal) .slot.rarity-common { border-image-source: url('../assets/ui/kit/slot_green2.webp'); }
body:not(.game-tactics) :is(#screen, #modal) .slot.rarity-uncommon { border-image-source: url('../assets/ui/kit/slot_green.webp'); }
body:not(.game-tactics) :is(#screen, #modal) .slot.rarity-rare { border-image-source: url('../assets/ui/kit/slot_blue.webp'); }
body:not(.game-tactics) :is(#screen, #modal) .slot.rarity-epic { border-image-source: url('../assets/ui/kit/slot_purple.webp'); box-shadow: none; }
body:not(.game-tactics) :is(#screen, #modal) .slot.rarity-legendary { border-image-source: url('../assets/ui/kit/slot_gold.webp'); box-shadow: none; }

/* ---------- Tarjetas grandes (zonas, mazmorras, arenas, modos, wiki): sólo el marco, su dibujo se queda ---------- */
body:not(.game-tactics) :is(#screen, #modal) :is(.zone-card, .dungeon-card, .arena-card, .mode-card, .wiki-section) {
  background-clip: padding-box;
  border: 9px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/panel_frame.webp') 50 / 28px stretch;
  box-shadow: none;
}
body:not(.game-tactics) :is(#screen, #modal) :is(.zone-card, .dungeon-card, .arena-card, .mode-card):hover { border-color: transparent; filter: brightness(1.12); }

/* ---------- Filas (depot, addons, tienda, mercado, forja) ---------- */
body:not(.game-tactics) :is(#screen, #modal) :is(.depot-row, .addon-row, .shop-row, .market-row, .forge-item) {
  --rc: transparent;
  background: linear-gradient(90deg, var(--rc) 0 4px, transparent 4px) padding-box;
  border: 6px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/bar_brown.webp') 20 26 fill / 14px 18px stretch;
  box-shadow: none;
}
body:not(.game-tactics) :is(#screen, #modal) .depot-row.rarity-uncommon { --rc: var(--uncommon); }
body:not(.game-tactics) :is(#screen, #modal) .depot-row.rarity-rare { --rc: var(--rare); }
body:not(.game-tactics) :is(#screen, #modal) .depot-row.rarity-epic { --rc: var(--epic); }
body:not(.game-tactics) :is(#screen, #modal) .depot-row.rarity-legendary { --rc: #ffd34d; }

/* ---------- Cabecera de cada pantalla: barra con la brújula ----------
   La barra (::after) mide siempre lo de una fila; si la cabecera salta de línea (móvil),
   lo que baja queda debajo de la barra en vez de estirarla. */
body:not(.game-tactics) :is(#screen, #modal) .screen-head {
  --head-h: 4.4rem;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  min-height: var(--head-h);
  padding: 0 1.3rem 0 5rem;
  border: 0;
  border-image: none;
  margin-left: 0.4rem;
  row-gap: 0.5rem;
}
body:not(.game-tactics) :is(#screen, #modal) .screen-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--head-h);
  box-sizing: border-box;
  border: 2px solid transparent;
  border-image: url('../assets/ui/kit/bar_head_bar.webp') 22 30 18 30 fill / 1.1rem 1.5rem 1rem 1.5rem stretch;
  z-index: -1;
  pointer-events: none;
}
body:not(.game-tactics) :is(#screen, #modal) .screen-head::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 0;
  width: calc(var(--head-h) + 0.2rem);
  height: var(--head-h);
  background: url('../assets/ui/kit/compass.webp') center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
body:not(.game-tactics) :is(#screen, #modal) .screen-head > h2 { line-height: var(--head-h); white-space: nowrap; }
body:not(.game-tactics) #modal .modal-box > .screen-head { position: sticky; top: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; background: none; }

@media (max-width: 700px) {
  body:not(.game-tactics) :is(#screen, #modal) .screen-head { --head-h: 3.6rem; flex-wrap: wrap; padding: 0 0.4rem 0.2rem; margin-left: 0.2rem; column-gap: 0.5rem; }
  body:not(.game-tactics) :is(#screen, #modal) .screen-head > h2 { flex: 1 0 100%; padding-left: 3.6rem; }
  body:not(.game-tactics) #screen .screen-head h2, body:not(.game-tactics) #modal .modal-box .screen-head h2 { font-size: 1.85rem; }
  body:not(.game-tactics) #modal .modal-box > .screen-head { background: var(--kit-panel-bg); padding-bottom: 0.5rem; }
  body:not(.game-tactics) :is(#screen, #modal) .mon-head .mon-filters { flex: 0 1 auto; }
}

/* ---------- Fichas de criatura (personajes y bestiary): marco con casilla del número y barra del nombre ---------- */
body:not(.game-tactics) :is(#screen, #modal) :is(.mon-card, .bst-card) {
  position: relative;
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/card.webp') 72 28 28 92 fill / 38px 15px 15px 48px stretch;
  box-shadow: none;
  padding: 2.55rem 0.7rem 0.75rem;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}
body:not(.game-tactics) :is(#screen, #modal) :is(.mon-card, .bst-card):hover { border-color: transparent; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)) brightness(1.12); }
body:not(.game-tactics) :is(#screen, #modal) .mon-card.is-selected { box-shadow: none; filter: drop-shadow(0 0 3px #ffd36b) drop-shadow(0 0 10px rgba(255, 170, 60, 0.55)); }
body:not(.game-tactics) :is(#screen, #modal) :is(.mon-card .mon-num, .bst-card .bst-num) {
  position: absolute; top: 7px; left: 13px; width: 30px; height: 29px;
  display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 700; color: #e8d6b4; text-shadow: 0 1px 0 #000;
}
body:not(.game-tactics) :is(#screen, #modal) :is(.mon-card .mon-name, .bst-card > b) {
  position: absolute; top: 8px; left: 48px; right: 12px; height: 25px; min-height: 0;
  display: block; line-height: 25px; text-align: center;
  font-size: 0.88rem; color: #ffe2b0; text-shadow: 0 1px 0 #000;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body:not(.game-tactics) :is(#screen, #modal) .mon-card .mon-pieces { top: auto; bottom: 0.55rem; right: 0.75rem; }
body:not(.game-tactics) :is(#screen, #modal) .mon-card .mon-sprite { margin-top: 0.2rem; margin-bottom: auto; }
body:not(.game-tactics) :is(#screen, #modal) .mon-card { min-height: 10rem; }
body:not(.game-tactics) :is(#screen, #modal) .bst-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 10px; }
body:not(.game-tactics) :is(#screen, #modal) .bst-card.stage-3 { background: none; filter: drop-shadow(0 0 3px #ffd36b) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }

/* ---------- Wiki: temas como barras, el elegido en dorado ---------- */
body:not(.game-tactics) :is(#screen, #modal) .wiki-topic {
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: url('../assets/ui/kit/bar_brown.webp') 20 26 fill / 12px 16px stretch;
  padding: 0.45rem 0.9rem;
}
body:not(.game-tactics) :is(#screen, #modal) .wiki-topic:hover { background: none; filter: brightness(1.15); }
body:not(.game-tactics) :is(#screen, #modal) .wiki-topic.is-on {
  background: none;
  border-image: url('../assets/ui/kit/bar_gold.webp') 18 26 fill / 12px 16px stretch;
  color: #1e0e02; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
}
body:not(.game-tactics) :is(#screen, #modal) :is(.forge-level, .wiki-page) { border-radius: 0; }
@media (max-width: 700px) {
  body:not(.game-tactics) :is(#screen, #modal) :is(.bst-grid, .mon-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body:not(.game-tactics) :is(#screen, #modal) :is(.mon-card .mon-name, .bst-card > b) { font-size: 0.78rem; }
}
/* Prey: cada hueco en el marco de panel; las opciones a elegir, casillas (dorada al pasar por encima) */
body:not(.game-tactics) :is(#screen, #modal) .prey-slot { border-radius: 0; }
body:not(.game-tactics) #modal .modal-box .prey-slot { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
body:not(.game-tactics) :is(#screen, #modal) .prey-opt { padding: 8px 6px; }
body:not(.game-tactics) :is(#screen, #modal) :is(.prey-opt:hover, .prey-opt:focus-visible) { border-image-source: url('../assets/ui/kit/slot_gold.webp'); }
/* Iconos pintados delante del título (Guild, Wiki, Prey) */
body:not(.game-tactics) :is(#screen, #modal) .screen-head h2 .head-ico { height: 2.7rem; width: auto; vertical-align: middle; margin: -0.3rem 0.5rem 0 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
@media (max-width: 700px) { body:not(.game-tactics) :is(#screen, #modal) .screen-head h2 .head-ico { height: 1.9rem; } }
/* Desafío: iconos pintados de 1 contra 1 y equipo contra equipo */
body:not(.game-tactics) :is(#screen, #modal) .ch-type-icon img { width: 3.6rem; height: 3.6rem; display: block; margin: 0 auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
body:not(.game-tactics) :is(#screen, #modal) .ch-ico { height: 1.4em; width: auto; vertical-align: middle; margin: -0.15em 0.35em 0 0; }

/* =====================================================================================
   Battle Pass en vertical: gratis | camino de niveles | premium, bajando con scroll
   ===================================================================================== */
body:not(.game-tactics) #modal .pass-popup { width: min(58rem, 100%); }
body:not(.game-tactics) #modal .bp-v {
  position: relative;
  max-height: min(62vh, 40rem);
  overflow-y: auto;
  margin-top: 0.8rem;
  padding: 0 0.4rem 1rem;
  scrollbar-color: #7a4b2a rgba(0, 0, 0, 0.3);
}
body:not(.game-tactics) #modal :is(.bp-v-tags, .bp-vrow) { display: grid; grid-template-columns: 1fr 4.4rem 1fr; align-items: stretch; column-gap: 0.6rem; }
body:not(.game-tactics) #modal .bp-v-tags {
  position: sticky; top: 0; z-index: 3;
  padding: 0.5rem 0 0.6rem;
  background: linear-gradient(180deg, #2a190f 75%, rgba(42, 25, 15, 0));
}
body:not(.game-tactics) #modal .bp-tag {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 2.3rem; padding: 0 1rem;
  font-family: var(--hg-head); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid transparent;
  border-image: url('../assets/ui/kit/btn_purple.webp') 22 26 fill / 0.7rem 0.8rem stretch;
  color: #f6e6ff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}
body:not(.game-tactics) #modal .bp-tag.is-prem { border-image-source: url('../assets/ui/kit/btn_gold.webp'); color: #fff3d6; text-shadow: 0 1px 0 #4a2405, 0 0 6px rgba(80, 30, 0, 0.7); }
body:not(.game-tactics) #modal .bp-tag-lock svg { width: 0.95rem; height: 0.95rem; display: block; color: #fff3d6; }

/* Filas: cada nivel. El camino del medio es una línea morada hasta tu nivel y gris después. */
body:not(.game-tactics) #modal .bp-vrow { min-height: 4.8rem; padding: 0.35rem 0; }
body:not(.game-tactics) #modal .bp-vrow.is-current { min-height: 6.6rem; }
body:not(.game-tactics) #modal .bp-node { position: relative; display: grid; place-items: center; }
body:not(.game-tactics) #modal .bp-node::before,
body:not(.game-tactics) #modal .bp-node::after {
  content: ""; position: absolute; left: 50%; width: 8px; transform: translateX(-50%); z-index: 0;
  background: #3a2a22; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
body:not(.game-tactics) #modal .bp-node::before { top: -0.35rem; height: calc(50% + 0.35rem); }
body:not(.game-tactics) #modal .bp-node::after { bottom: -0.35rem; height: calc(50% + 0.35rem); }
body:not(.game-tactics) #modal .bp-v-tags + .bp-vrow .bp-node::before { display: none; }
body:not(.game-tactics) #modal .bp-vrow:last-child .bp-node::after { display: none; }
body:not(.game-tactics) #modal .bp-vrow.is-reached .bp-node::before,
body:not(.game-tactics) #modal .bp-vrow.is-next-reached .bp-node::after { background: linear-gradient(90deg, #8f3fc9, #d77cff, #8f3fc9); box-shadow: 0 0 8px rgba(215, 124, 255, 0.5); }
body:not(.game-tactics) #modal .bp-node b {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  font-family: var(--hg-head); font-size: 1.35rem; color: #cdb8a6;
  background: radial-gradient(circle at 50% 35%, #4a3a32, #241812);
  border: 3px solid #6b5444; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
body:not(.game-tactics) #modal .bp-vrow.is-reached .bp-node b {
  color: #fff; text-shadow: 0 1px 0 #3a0a52;
  background: radial-gradient(circle at 50% 35%, #e08cff, #9a3fd0 60%, #5e1f88);
  border-color: #f0c8ff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(215, 124, 255, 0.55);
}
/* Tu nivel: círculo grande con tu personaje dentro */
body:not(.game-tactics) #modal .bp-vrow.is-current .bp-node b {
  width: 4.4rem; height: 4.4rem; font-size: 0; color: transparent;
  background: radial-gradient(circle at 50% 40%, #5a2a6e, #22102c);
  border: 4px solid #ffd36b; box-shadow: 0 0 0 3px #9a3fd0, 0 0 22px rgba(255, 190, 80, 0.6);
}
body:not(.game-tactics) #modal .bp-node img { position: absolute; z-index: 2; width: 3.4rem; height: 3.4rem; top: 50%; left: 50%; transform: translate(-50%, -58%); image-rendering: pixelated; pointer-events: none; }
body:not(.game-tactics) #modal .bp-node small {
  position: absolute; z-index: 2; bottom: 0.15rem; left: 50%; transform: translateX(-50%);
  padding: 0 0.5rem; border-radius: 999px; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: #2a1405; background: #ffd36b; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* Casillas de premio */
body:not(.game-tactics) #modal .bp-vrow .bp-cell {
  position: relative; opacity: 1; min-height: 4rem; padding: 0.5rem 0.6rem; font-size: 0.78rem;
  border: 2px solid transparent; border-radius: 0;
  border-image: url('../assets/ui/kit/slot_brown.webp') 16 fill / 12px stretch;
  background: none; filter: brightness(0.8);
}
body:not(.game-tactics) #modal .bp-vrow .bp-cell.is-reached { filter: none; }
body:not(.game-tactics) #modal .bp-vrow .bp-cell.is-claim {
  border-image-source: url('../assets/ui/kit/slot_gold.webp'); cursor: pointer;
  animation: bp-glow 1.6s ease-in-out infinite alternate;
}
@keyframes bp-glow { from { filter: drop-shadow(0 0 2px rgba(255, 200, 90, 0.4)); } to { filter: drop-shadow(0 0 10px rgba(255, 200, 90, 0.85)) brightness(1.1); } }
body:not(.game-tactics) #modal .bp-vrow .bp-cell.is-done > :not(.bp-badge) { opacity: 0.55; }
body:not(.game-tactics) #modal .bp-vrow .bp-cell.is-locked { filter: none; }
body:not(.game-tactics) #modal .bp-vrow .bp-cell.is-locked > :not(.bp-badge) { filter: grayscale(0.55) brightness(0.75); }
body:not(.game-tactics) #modal .bp-vrow.is-current .bp-cell { min-height: 5.2rem; }
body:not(.game-tactics) #modal .bp-claim {
  position: absolute; left: 50%; bottom: -0.55rem; transform: translateX(-50%);
  padding: 0 0.55rem; border-radius: 999px; font-weight: 800; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #2a1405; background: linear-gradient(#ffe08a, #e0a43a); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
body:not(.game-tactics) #modal .bp-badge {
  position: absolute; top: -0.5rem; right: -0.45rem; z-index: 2;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  font-style: normal; font-weight: 900; font-size: 0.85rem; line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 0 2px #1a0f08;
}
body:not(.game-tactics) #modal .bp-badge.is-ok { color: #fff; background: radial-gradient(circle at 40% 35%, #6fe07a, #23913a); }
body:not(.game-tactics) #modal .bp-badge.is-lock { color: #2a1405; background: radial-gradient(circle at 40% 35%, #ffe08a, #c98a26); }
body:not(.game-tactics) #modal .bp-badge.is-lock svg { width: 0.85rem; height: 0.85rem; }

@media (max-width: 700px) {
  body:not(.game-tactics) #modal :is(.bp-v-tags, .bp-vrow) { grid-template-columns: 1fr 3.4rem 1fr; column-gap: 0.35rem; }
  body:not(.game-tactics) #modal .bp-tag { font-size: 0.9rem; letter-spacing: 0.02em; padding: 0 0.3rem; min-width: 0; overflow: hidden; }
  body:not(.game-tactics) #modal .bp-tag-lock { display: none; }
  body:not(.game-tactics) #modal .bp-v { max-height: 74vh; padding-inline: 0.1rem; }
  body:not(.game-tactics) #modal .bp-vrow .bp-cell { padding: 0.45rem 0.3rem; }
  body:not(.game-tactics) #modal .bp-vrow.is-current .bp-node b { width: 3.5rem; height: 3.5rem; }
  body:not(.game-tactics) #modal .bp-node img { width: 2.8rem; height: 2.8rem; }
  body:not(.game-tactics) #modal .bp-node b { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

/* Battle Pass: cabecera con el día en un círculo y el estado de hoy */
body:not(.game-tactics) #modal .pass-popup .bp-top { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; align-items: center; }
body:not(.game-tactics) #modal .bp-day {
  display: grid; place-items: center; align-content: center; width: 5.6rem; height: 5.6rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a2a3e, #1a1014); border: 4px solid #9a3fd0; box-shadow: 0 0 0 3px #ffd36b, 0 0 18px rgba(215, 124, 255, 0.4);
  line-height: 1;
}
body:not(.game-tactics) #modal .bp-day small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d9c2e8; }
body:not(.game-tactics) #modal .bp-day b { font-family: var(--hg-head); font-size: 2.3rem; color: #fff; margin: 0.1rem 0; }
body:not(.game-tactics) #modal .bp-top-info { display: grid; gap: 0.35rem; min-width: 0; }
body:not(.game-tactics) #modal .bp-top-info p { margin: 0; font-size: 0.85rem; }
body:not(.game-tactics) #modal .pass-popup .bp-progress i { background: linear-gradient(90deg, #9a3fd0, #e08cff); }
body:not(.game-tactics) #modal .bp-status, body:not(.game-tactics) #modal .pass-popup .bp-top > .on-actions { grid-column: 1 / -1; }
body:not(.game-tactics) #modal .bp-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.8rem; padding: 0.7rem 1rem; text-align: center;
  border: 2px solid transparent; border-image: url('../assets/ui/kit/bar_brown.webp') 20 26 fill / 14px 18px stretch;
}
body:not(.game-tactics) #modal .bp-status.is-ready { border-image-source: url('../assets/ui/kit/bar_gold.webp'); border-image-slice: 18 26 fill; color: #2a1405; font-size: 1.05rem; }
body:not(.game-tactics) #modal .bp-status.is-ready span { color: #2a1405; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5); }
body:not(.game-tactics) #modal .bp-status.is-ready span b { color: #7a1f04; }
body:not(.game-tactics) #modal .bp-clock { font-family: var(--hg-head); font-size: 1.6rem; letter-spacing: 0.05em; color: #e08cff; text-shadow: 0 0 10px rgba(215, 124, 255, 0.5); font-variant-numeric: tabular-nums; }
body:not(.game-tactics) #modal .bp-status small { flex-basis: 100%; }
@media (max-width: 700px) {
  body:not(.game-tactics) #modal .bp-day { width: 4.4rem; height: 4.4rem; }
  body:not(.game-tactics) #modal .bp-day b { font-size: 1.8rem; }
}
/* Pase: premio premium de un día ya pasado sin Premium (bloqueado; se recupera al hacerse Premium) */
body:not(.game-tactics) #modal .bp-badge.is-miss { color: #fff; background: radial-gradient(circle at 40% 35%, #ff7a6a, #b8231a); }
body:not(.game-tactics) #modal .bp-vrow .bp-cell.is-missed > :not(.bp-badge) { filter: grayscale(0.9) brightness(0.55); }

/* Prey: las 4 opciones siempre iguales (mismas filas y columnas aunque el nombre ocupe 2 líneas o el dibujo sea más grande) */
body:not(.game-tactics) :is(#screen, #modal) .prey-options { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
body:not(.game-tactics) :is(#screen, #modal) .prey-opt { min-width: 0; height: 100%; min-height: 6.2rem; justify-content: center; gap: 4px; }
body:not(.game-tactics) :is(#screen, #modal) .prey-opt img { flex: none; width: 2.8rem; height: 2.8rem; object-fit: contain; }
body:not(.game-tactics) :is(#screen, #modal) .prey-opt small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.3em; line-height: 1.15; text-align: center; overflow-wrap: anywhere; max-width: 100%;
}
/* Depot → Intercambiar: cabecera de cada personaje con su equipo puesto */
body:not(.game-tactics) :is(#screen, #modal) .depot-group {
  display: flex; align-items: center; gap: 0.55rem; list-style: none;
  margin: 0.5rem 0 0.1rem; padding: 0.3rem 0.9rem 0.3rem 0.4rem;
  border: 2px solid transparent; border-image: url('../assets/ui/kit/bar_gold.webp') 18 26 fill / 12px 16px stretch;
  color: #2a1405; font-family: var(--hg-head); font-size: 1.15rem; text-shadow: 0 1px 0 rgba(255, 230, 170, 0.45);
}
body:not(.game-tactics) :is(#screen, #modal) .depot-group:first-child { margin-top: 0; }
body:not(.game-tactics) :is(#screen, #modal) .depot-group img { width: 2.2rem; height: 2.2rem; image-rendering: pixelated; margin: -0.4rem 0; }
/* Arenas y mazmorras: el cuadro de los monstruos con marco dorado de casilla */
body:not(.game-tactics) :is(#screen, #modal) .dungeon-ground {
  padding: 8px; border: 4px solid transparent; border-radius: 0;
  border-image: url('../assets/ui/kit/slot_gold.webp') 16 / 12px stretch;
  background-clip: padding-box; background-origin: padding-box;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}
body:not(.game-tactics) :is(#screen, #modal) .depot-group b { color: #2a1405; font-weight: 700; }
/* Ventanas con icono propio (Guild, Wiki, Bestiary, Prey, Desafío…): el icono va donde la brújula y la brújula se quita */
body:not(.game-tactics) :is(#screen, #modal) .screen-head:has(> h2 .head-ico)::before { display: none; }
body:not(.game-tactics) :is(#screen, #modal) .screen-head:has(> h2 .head-ico) { padding-left: 1.7rem; }
body:not(.game-tactics) :is(#screen, #modal) .screen-head > h2 .head-ico {
  /* dentro de la parte oscura de la barra, sin pisar el marco */
  position: static; display: inline-block; vertical-align: middle;
  height: calc(var(--head-h) - 2rem); width: auto; max-width: calc((var(--head-h) - 2rem) * 1.3);
  margin: -0.2rem 0.55rem 0 0; object-fit: contain;
}

/* Battle Pass: cabecera (día, racha, camino con estrellas, cuenta atrás) en el marco del kit */
body:not(.game-tactics) #modal .bp-hero {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem 1.1rem;
  padding: 0.9rem 1.2rem; margin-top: 0.4rem;
  background: #24150c url('../assets/ui/kit/panel_tex.webp') center / cover; background-clip: padding-box;
  border: 13px solid transparent; border-image: url('../assets/ui/kit/panel_frame.webp') 50 / 36px stretch;
}
body:not(.game-tactics) #modal .bp-hero .bp-day { width: 5.4rem; height: 5.4rem; }
body:not(.game-tactics) #modal .bp-mid { display: grid; gap: 0.45rem; min-width: 0; }
body:not(.game-tactics) #modal .bp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
body:not(.game-tactics) #modal .bp-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.65rem; font-size: 0.8rem; white-space: nowrap;
  color: #f6e3c4; background: rgba(0, 0, 0, 0.45); border: 1px solid #8a5a2e; border-radius: 999px;
}
body:not(.game-tactics) #modal .bp-chip.is-fire { border-color: #e0782a; }
body:not(.game-tactics) #modal .bp-chip.is-star { border-color: #4f8fe0; }
body:not(.game-tactics) #modal .bp-chip b { color: #ffd36b; }
body:not(.game-tactics) #modal .bp-track { position: relative; height: 2.3rem; margin: 0 1.3rem 0 0.3rem; }
body:not(.game-tactics) #modal .bp-track::before, body:not(.game-tactics) #modal .bp-track-fill {
  content: ""; position: absolute; left: 0; top: 50%; height: 7px; transform: translateY(-50%); border-radius: 999px;
}
body:not(.game-tactics) #modal .bp-track::before { right: 0; background: #2a1d17; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
body:not(.game-tactics) #modal .bp-track-fill { width: var(--fill); background: linear-gradient(90deg, #8f3fc9, #e08cff); box-shadow: 0 0 8px rgba(215, 124, 255, 0.5); }
body:not(.game-tactics) #modal .bp-mark {
  position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 0.95rem; color: #8a7a6a;
  background: radial-gradient(circle at 50% 35%, #3a2c26, #1a120e); border: 2px solid #5a4636; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
body:not(.game-tactics) #modal .bp-mark.is-done { color: #fff; background: radial-gradient(circle at 50% 35%, #e08cff, #7a2fb0); border-color: #f0c8ff; }
body:not(.game-tactics) #modal .bp-mark.is-next { width: 2.3rem; height: 2.3rem; color: #ffd36b; border-color: #ffd36b; box-shadow: 0 0 0 3px rgba(79, 143, 224, 0.6), 0 0 14px rgba(255, 211, 107, 0.6); }
body:not(.game-tactics) #modal .bp-mark.is-final { font-size: 1rem; }
body:not(.game-tactics) #modal .bp-track-text { font-size: 0.75rem; color: #b9ab98; }
body:not(.game-tactics) #modal .bp-side { display: grid; justify-items: center; gap: 0.4rem; }
body:not(.game-tactics) #modal .bp-side-row { display: flex; align-items: center; gap: 0.6rem; }
body:not(.game-tactics) #modal .bp-next {
  display: grid; justify-items: center; padding: 0.45rem 1rem; min-width: 11rem; text-align: center;
  font-family: var(--hg-head); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: #e8d6f6;
  border: 2px solid transparent; border-image: url('../assets/ui/kit/btn_purple.webp') 22 26 fill / 0.7rem 0.8rem stretch;
}
body:not(.game-tactics) #modal .bp-next b { font-size: 1.25rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: #fff; }
body:not(.game-tactics) #modal .bp-next.is-done { border-image-source: url('../assets/ui/kit/btn_gold.webp'); color: #2a1405; }
body:not(.game-tactics) #modal .bp-next-btn { min-width: 11rem; font-size: 1.15rem; }
body:not(.game-tactics) #modal .bp-emblem {
  display: grid; place-items: center; width: 4.6rem; height: 3.8rem; padding: 4px;
  border: 2px solid transparent; border-image: url('../assets/ui/kit/slot_gold.webp') 16 fill / 12px stretch;
}
body:not(.game-tactics) #modal .bp-emblem img { width: 100%; height: 100%; object-fit: contain; }
body:not(.game-tactics) #modal .bp-streak-reset { font-size: 0.78rem; color: #b9ab98; }
body:not(.game-tactics) #modal .bp-streak-reset b { color: #e08cff; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  body:not(.game-tactics) #modal .bp-hero { grid-template-columns: auto 1fr; padding: 0.6rem 0.5rem; }
  body:not(.game-tactics) #modal .bp-side { grid-column: 1 / -1; }
  body:not(.game-tactics) #modal .bp-hero .bp-day { width: 4.4rem; height: 4.4rem; }
  body:not(.game-tactics) #modal .bp-next, body:not(.game-tactics) #modal .bp-next-btn { min-width: 0; }
}
@media (max-width: 700px) {
  body:not(.game-tactics) :is(#screen, #modal) .screen-head:has(> h2 .head-ico) { padding-left: 0.4rem; }
  body:not(.game-tactics) :is(#screen, #modal) .screen-head > h2:has(.head-ico) { padding-left: 1.1rem; }
  body:not(.game-tactics) :is(#screen, #modal) .screen-head > h2 .head-ico { height: calc(var(--head-h) - 1.6rem); max-width: calc((var(--head-h) - 1.6rem) * 1.3); }
}

/* Perfil (antes ponía el nombre y Salir) y botón de idioma con banderas */
:is(#screen, #modal) .profile-btn { cursor: pointer; font: inherit; }
body:not(.game-tactics) #screen .profile-btn:hover { background: rgba(255, 180, 90, 0.22); border-color: var(--hg-flame); }
.lang-wrap { position: relative; display: inline-flex; }
.lang-btn {
  display: grid; place-items: center; width: 2.6rem; height: 2.15rem; padding: 0; cursor: pointer;
  background: rgba(20, 14, 12, 0.62); border: 1px solid rgba(255, 190, 110, 0.28); border-radius: 999px;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: #ffd36b; background: rgba(255, 180, 90, 0.22); }
.flag { display: inline-block; width: 1.5rem; height: 1rem; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); flex: none; }
.flag svg { width: 100%; height: 100%; display: block; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; gap: 2px; min-width: 14.5rem; white-space: nowrap; padding: 6px;
  background: #24150c url('../assets/ui/kit/panel_tex.webp') center / cover; background-clip: padding-box;
  border: 10px solid transparent; border-image: url('../assets/ui/kit/panel_frame.webp') 50 / 28px stretch;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.lang-opt {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
  color: #f6e3c4; background: none; border: 0; border-radius: 6px;
}
.lang-opt:hover { background: rgba(255, 180, 90, 0.18); }
.lang-opt.is-on { color: #ffd36b; font-weight: 700; background: rgba(255, 211, 107, 0.12); }
body:not(.game-tactics) #modal .profile-popup { width: min(28rem, 100%); }
.pf-card { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0; }
.pf-avatar {
  width: 4.6rem; height: 4.6rem; padding: 6px; image-rendering: pixelated; object-fit: contain;
  border: 2px solid transparent; border-image: url('../assets/ui/kit/slot_gold.webp') 16 fill / 12px stretch;
}
.pf-who { display: grid; gap: 0.3rem; }
.pf-name { font-family: var(--hg-head, serif); font-size: 1.6rem; color: #ffdca4; }
.pf-tags { display: flex; gap: 0.35rem; }
.pf-tag { padding: 0.05rem 0.6rem; font-size: 0.8rem; font-weight: 700; color: #f6e3c4; background: rgba(0, 0, 0, 0.45); border: 1px solid #8a5a2e; border-radius: 999px; }
.pf-tag.is-premium { color: #2a1405; background: #ffd36b; border-color: #ffd36b; }
.pf-stats { display: grid; gap: 2px; margin: 0.4rem 0 0.8rem; }
.pf-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.2rem; border-bottom: 1px dashed rgba(255, 190, 110, 0.18); }
.pf-row span { color: #b9ab98; }
/* Fila elegida (forja, mercado…): marco amarillento en vez de la raya dorada */
body:not(.game-tactics) :is(#screen, #modal) :is(.depot-row, .addon-row, .shop-row, .market-row, .forge-item):is(.is-active, .is-selected) {
  outline: none; border-image-source: url('../assets/ui/kit/bar_sel.webp');
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.45));
}
/* Mejoras: el personaje y sus botones, centrados en el panel (el Reset, si sale, a la derecha) */
@media (min-width: 701px) {
  body:not(.game-tactics) #screen .upgrades-screen .upg-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.5%; }
  body:not(.game-tactics) #screen .upgrades-screen .upg-top > .voc-picker { grid-column: 2; }
  body:not(.game-tactics) #screen .upgrades-screen .upg-top > :not(.voc-picker) { grid-column: 3; justify-self: end; }
}
/* Buscador de personaje (⇄) por encima de las tarjetas de mejora, con fondo opaco */
body:not(.game-tactics) #screen .upgrades-screen .upg-top { position: relative; z-index: 40; }
body:not(.game-tactics) :is(#screen, #modal) .voc-search { z-index: 50; background: #1a110b; opacity: 1; }
/* Wiki: los iconos de cada sección (los mismos de su ventana) */
.wiki-topic span:has(.wiki-ico) { width: 1.7rem; display: grid; place-items: center; }
.wiki-ico { width: 1.6rem; height: 1.6rem; object-fit: contain; display: block; image-rendering: auto; }
.wiki-ico[src$="rashid_scroll.png"], .wiki-ico[src*="coins/"] { image-rendering: pixelated; }
.wiki-title .wiki-ico.is-big { width: 2.2rem; height: 2.2rem; margin-right: 0.3rem; display: inline-block; vertical-align: middle; }
/* Pase: los días con estrella (7, 14, 21, 28) y la copa (30) también en el camino de abajo */
body:not(.game-tactics) #modal .bp-node-mark {
  position: absolute; z-index: 3; top: 50%; left: calc(50% + 1.15rem); transform: translateY(-110%);
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-style: normal; font-size: 0.85rem;
  color: #ffd36b; background: radial-gradient(circle at 50% 35%, #3a2c26, #1a120e); border: 2px solid #ffd36b; box-shadow: 0 0 8px rgba(255, 211, 107, 0.5);
}
body:not(.game-tactics) #modal .bp-node-mark.is-final { font-size: 0.8rem; }
body:not(.game-tactics) #modal .bp-node.is-mark b { border-color: #ffd36b; }
body:not(.game-tactics) #modal .bp-vrow.is-current .bp-node-mark { left: calc(50% + 1.8rem); }
/* Pase por semanas (como la guía): etiqueta "★ Día 7" entre semanas, estrella encima del círculo y el día marcado */
body:not(.game-tactics) #modal .bp-week { display: flex; justify-content: center; position: relative; padding: 0.55rem 0 0.15rem; }
body:not(.game-tactics) #modal .bp-week::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(120, 170, 255, 0.35); transform: translateY(0.2rem); }
body:not(.game-tactics) #modal .bp-week span {
  position: relative; z-index: 2; padding: 0.15rem 0.85rem; border-radius: 999px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #e9f2ff; background: linear-gradient(#2a4f8f, #1b3566); border: 2px solid #5f97e8; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(95, 151, 232, 0.35);
}
body:not(.game-tactics) #modal .bp-week.is-final span { color: #2a1405; background: linear-gradient(#ffe08a, #d79a2a); border-color: #fff1c4; }
body:not(.game-tactics) #modal .bp-week.is-final::before { border-top-color: rgba(255, 211, 107, 0.45); }
/* estrella encima del círculo, no al lado */
body:not(.game-tactics) #modal .bp-node-mark {
  left: 50%; top: 0.05rem; transform: translate(-50%, -45%); width: auto; height: auto; border: 0; background: none; box-shadow: none;
  font-size: 1.15rem; line-height: 1; text-shadow: 0 0 6px rgba(255, 200, 80, 0.9), 0 1px 0 #000;
}
body:not(.game-tactics) #modal .bp-vrow.is-current .bp-node-mark { left: 50%; top: -0.2rem; }
body:not(.game-tactics) #modal .bp-vrow.is-mark .bp-node b { border-color: #5f97e8; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(95, 151, 232, 0.5); }
body:not(.game-tactics) #modal .bp-vrow.is-final .bp-node b { border-color: #ffd36b; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 211, 107, 0.55); }
/* las casillas de ese día: gratis con brillo azul, premium con brillo dorado */
body:not(.game-tactics) #modal .bp-vrow.is-mark .bp-cell.is-free:not(.is-claim) { filter: drop-shadow(0 0 1px #5f97e8) drop-shadow(0 0 6px rgba(95, 151, 232, 0.55)); }
body:not(.game-tactics) #modal .bp-vrow.is-mark .bp-cell.is-premium:not(.is-claim) { filter: drop-shadow(0 0 1px #ffd36b) drop-shadow(0 0 6px rgba(255, 211, 107, 0.5)); }
body:not(.game-tactics) #modal .bp-vrow.is-final .bp-cell.is-free:not(.is-claim) { filter: drop-shadow(0 0 1px #ffd36b) drop-shadow(0 0 6px rgba(255, 211, 107, 0.5)); }
/* Pase: GRATIS en amarillo y PREMIUM en lila (el lila = premium, como las Survivor Coins) */
body:not(.game-tactics) #modal .bp-tag.is-free { border-image-source: url('../assets/ui/kit/btn_gold.webp'); color: #2a1405; text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5); }
body:not(.game-tactics) #modal .bp-tag.is-prem { border-image-source: url('../assets/ui/kit/btn_purple.webp'); color: #f6e6ff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
body:not(.game-tactics) #modal .bp-tag.is-prem .bp-tag-lock svg { color: #f6e6ff; }
body:not(.game-tactics) #modal .bp-vrow.is-mark .bp-cell.is-free:not(.is-claim),
body:not(.game-tactics) #modal .bp-vrow.is-final .bp-cell.is-free:not(.is-claim) { filter: drop-shadow(0 0 1px #ffd36b) drop-shadow(0 0 6px rgba(255, 211, 107, 0.5)); }
body:not(.game-tactics) #modal .bp-vrow.is-mark .bp-cell.is-premium:not(.is-claim) { filter: drop-shadow(0 0 1px #c77dff) drop-shadow(0 0 7px rgba(199, 125, 255, 0.6)); }
body:not(.game-tactics) #modal .bp-badge.is-lock { color: #fff; background: radial-gradient(circle at 40% 35%, #d9a2ff, #7a2fb0); }
/* Tienda de tickets: todas las filas iguales. − cantidad + | (hueco) | ×10 ×50 ×100, y debajo los precios con el mismo ancho */
:is(#screen, #modal) .popup-row.ticket-row {
  display: grid; grid-template-columns: 2.4rem 10rem auto 1fr 15.5rem; grid-template-rows: auto auto; align-items: center; column-gap: 0.6rem; row-gap: 0.45rem;
}
:is(#screen, #modal) .ticket-row > img { grid-column: 1; grid-row: 1; }
:is(#screen, #modal) .ticket-row .shop-text { grid-column: 2; grid-row: 1; flex: none; min-width: 0; }
:is(#screen, #modal) .ticket-row .qty-picker { grid-column: 3; grid-row: 1; flex-wrap: nowrap; }
:is(#screen, #modal) .ticket-row .qty-chips { grid-column: 5; grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
:is(#screen, #modal) .ticket-row .ticket-buy { grid-column: 5; grid-row: 2; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
:is(#screen, #modal) .ticket-row :is(.qty-chips, .ticket-buy) .btn { width: 100%; min-width: 0; justify-content: center; padding-inline: 0.3rem; }
@media (max-width: 700px) {
  :is(#screen, #modal) .popup-row.ticket-row { grid-template-columns: 2.2rem 1fr auto; }
  :is(#screen, #modal) .ticket-row .qty-picker { grid-column: 3; }
  :is(#screen, #modal) .ticket-row .qty-chips { grid-column: 1 / -1; grid-row: 2; }
  :is(#screen, #modal) .ticket-row .ticket-buy { grid-column: 1 / -1; grid-row: 3; }
}
body:not(.game-tactics) #modal .modal-box.small.is-tickets { width: min(50rem, 100%); }
:is(#screen, #modal) .popup-row.ticket-row { grid-template-columns: 2.4rem minmax(8rem, 11rem) auto 1fr 14rem; }
/* Pagar con SC con descuento por cantidad: marco con 1 tira (descuento menor) o 2 tiras (mayor) */
body:not(.game-tactics) :is(#screen, #modal) .btn.btn-sc.sc-tier1:not(.btn-icon) { border-image: url('../assets/ui/kit/btn_sc1.webp') 26 40 26 40 fill / 0.75rem 1.1rem stretch; }
body:not(.game-tactics) :is(#screen, #modal) .btn.btn-sc.sc-tier2:not(.btn-icon) { border-image: url('../assets/ui/kit/btn_sc2.webp') 26 48 26 48 fill / 0.75rem 1.3rem stretch; }
.btn-sc .sc-off { margin-right: 0.3rem; padding: 0 0.3rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; color: #2a1405; background: #ffd36b; text-shadow: none; }
:is(#screen, #modal) .ticket-row .qty-chip:disabled { filter: grayscale(1) brightness(0.6); opacity: 0.7; cursor: not-allowed; }
/* Descuento encima del atajo que lo da; el botón de SC limpio y centrado */
:is(#screen, #modal) .popup-row.ticket-row { padding-top: 1.05rem; }
:is(#screen, #modal) .ticket-row .qty-chip { position: relative; overflow: visible; }
:is(#screen, #modal) .ticket-row .chip-off {
  position: absolute; left: 50%; top: -0.95rem; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  padding: 0.02rem 0.4rem; border-radius: 999px; font-family: var(--hg-text, sans-serif); font-weight: 800; font-size: 0.66rem; line-height: 1.2;
  color: #2a1405; background: #ffd36b; text-shadow: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
:is(#screen, #modal) .ticket-row .ticket-buy .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
body:not(.game-tactics) :is(#screen, #modal) .ticket-row .btn.btn-sc.sc-tier1:not(.btn-icon) { border-image-width: 0.75rem 0.9rem; padding-inline: 0.9rem; }
body:not(.game-tactics) :is(#screen, #modal) .ticket-row .btn.btn-sc.sc-tier2:not(.btn-icon) { border-image-width: 0.75rem 1rem; padding-inline: 1rem; }
/* Botones de icono (✕ de cerrar, flechas ‹ › de las mazmorras): el mismo botón de madera que "Volver" */
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn.btn-icon:is(.popup-close, .dungeon-arrow) {
  width: 2.6rem; height: 2.3rem; min-height: 0; padding: 0; display: grid; place-items: center;
  background: none; border: 2px solid transparent; border-radius: 0;
  border-image: url('../assets/ui/kit/btn_brown.webp') 22 26 fill / 0.7rem 0.8rem stretch;
  box-shadow: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
  color: #ffe9c6; font-size: 1.05rem; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn.btn-icon:is(.popup-close, .dungeon-arrow):hover:not(:disabled) { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) brightness(1.15); }
body:not(.game-tactics) :is(#screen, #modal, #toasts) .btn.btn-icon.dungeon-arrow:disabled { border-image-source: url('../assets/ui/kit/btn_grey.webp'); opacity: 0.55; }