/* ---------- Pantallas de menú ---------- */
#screen {
  position: absolute; inset: 0;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232, 163, 61, 0.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 14px),
    var(--bg);
}
.screen {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) * 2);
  display: flex; flex-direction: column; gap: var(--space-4);
}

/* ---------- Menú principal ---------- */
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.logo {
  font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: 0 0.2rem 0 #6b4a12, 0 0.35rem 0 rgba(0,0,0,0.5);
}
.logo span { color: var(--text); margin-left: 0.25em; }
/* Logo con imagen (escudo con la espada): pequeño en el menú, grande en la entrada */
.logo.logo-img { margin: 0; line-height: 0; text-shadow: none; }
.logo.logo-img img { display: block; height: 6.5rem; width: auto; filter: drop-shadow(0 0.3rem 0.4rem rgba(0, 0, 0, 0.6)); }
.login-screen .logo.logo-img { align-self: center; }
.login-screen .logo.logo-img img { height: clamp(10rem, 32vh, 17rem); }
.tagline { color: var(--muted); }

.gold-badge {
  display: inline-flex; align-items: center; gap: 0.2em;
  background: var(--panel); border: 2px solid var(--panel-border);
  padding: var(--space-1) var(--space-3); border-radius: 999px;
  font-size: 1.05rem;
}
.gold-badge b { color: var(--gold); }
.gold-badge span { color: var(--muted); font-size: 0.85em; margin-left: 0.15em; }

.voc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 46rem) { .voc-grid { grid-template-columns: repeat(4, 1fr); } }

.voc-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer; text-align: center;
  transition: transform 0.12s, border-color 0.12s;
}
.voc-card:hover { transform: translateY(-2px); border-color: var(--panel-border-light); }
.voc-card.is-selected {
  border-color: var(--voc);
  box-shadow: 0 0 0 2px var(--voc), 0 0 1.5rem -0.3rem var(--voc), var(--shadow);
}
.voc-sprite { width: 4rem; height: 4rem; }
.voc-name { font-size: 1.25rem; font-weight: 700; color: var(--voc); }
.voc-desc { font-size: 0.85rem; color: var(--muted); min-height: 3.2em; }
.voc-record { margin-top: auto; font-size: 0.8rem; color: var(--gold); padding-top: var(--space-1); border-top: 1px solid var(--panel-border); width: 100%; text-align: center; }
.voc-record.is-empty { color: var(--muted); }
.new-record { color: var(--gold); font-weight: 700; text-align: center; margin: 0 0 var(--space-2); }
.voc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2); font-size: 0.8rem; }

.menu-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.menu-secondary { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.records {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: var(--space-2);
  margin: 0; padding: var(--space-3);
  background: var(--bg-2); border: 2px solid var(--panel-border); border-radius: var(--radius);
}
.records div { text-align: center; }
.records dt { color: var(--muted); font-size: 0.75rem; }
.records dd { margin: 0; font-size: 1.2rem; font-weight: 700; }
.controls-hint { color: var(--muted); font-size: 0.8rem; text-align: center; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(180deg, #4a3e31, #362d24);
  border: 2px solid var(--panel-border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 600; cursor: pointer;
  transition: transform 0.08s, filter 0.12s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:focus-visible, .voc-card:focus-visible, .card:focus-visible, .tab:focus-visible, .slot:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
.btn-primary { background: linear-gradient(180deg, #f2c14e, #d4952a); border-color: #fff1c4; color: #2a1a05; }
.btn-danger { background: linear-gradient(180deg, #b8463f, #8a2f2a); border-color: #e48a85; }
.btn-big { min-width: 16rem; font-size: 1.25rem; min-height: 3.25rem; }
.btn-small { min-height: 2.25rem; padding: var(--space-1) var(--space-3); font-size: 0.9rem; }
.btn-icon { width: 2.75rem; padding: 0; }
.badge { background: var(--accent); color: #2a1a05; border-radius: 999px; padding: 0 0.45em; font-size: 0.75rem; }

/* ---------- Pantallas de panel (mejoras / equipo) ---------- */
.screen-head { display: flex; align-items: center; gap: var(--space-3); }
.screen-head h2 { font-size: 1.75rem; margin-right: auto; }

.voc-picker {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3); background: var(--bg-2);
  border: 2px solid var(--panel-border); border-radius: var(--radius);
}
.voc-picker > div { display: flex; flex-direction: column; gap: var(--space-2); }
.voc-picker-sprite {
  width: 4.5rem; height: 4.5rem; flex-shrink: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--voc) 35%, transparent), var(--panel));
  border: 2px solid var(--voc); border-radius: var(--radius);
}
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tab {
  min-height: 2.25rem; padding: 0 var(--space-3);
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius);
  cursor: pointer;
}
.tab.is-active { background: var(--panel-2); border-color: var(--gold); color: var(--gold); }
.tabs-small .tab { min-height: 2rem; font-size: 0.85rem; }

.upgrade-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 36rem) { .upgrade-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .upgrade-grid { grid-template-columns: repeat(3, 1fr); } }

.upgrade-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius);
}
.upgrade-icon { font-size: 1.6rem; width: 2rem; text-align: center; }
.upgrade-icon img { width: 2.4rem; height: 2.4rem; margin-left: -0.2rem; image-rendering: pixelated; display: block; }
.upgrade-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.upgrade-body h3 { font-size: 1rem; }
.upgrade-body h3 small { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.pips { display: flex; gap: 3px; flex-wrap: wrap; }
.pips i { width: 0.55rem; height: 0.35rem; background: #1a1612; border-radius: 1px; }
.pips i.on { background: var(--gold); }
.btn-cost { min-width: 5rem; font-size: 0.9rem; background: linear-gradient(180deg, #a08c6a, #7b6a4e); color: #1d160c; }
.btn-cost.is-max { background: var(--panel-2); color: var(--text); cursor: default; filter: none; }
.btn-cost.is-poor { opacity: 0.55; }

/* ---------- Equipo ---------- */
.equip-layout { display: grid; gap: var(--space-4); }
@media (min-width: 46rem) { .equip-layout { grid-template-columns: auto 1fr; align-items: start; } }

.inventory-wrap {
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
  padding: var(--space-4);
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius);
}
.inventory { display: grid; grid-template-columns: repeat(3, 4rem); grid-auto-rows: 4rem; gap: var(--space-2); }
.slot {
  display: grid; place-items: center;
  background: #191512;
  border: 2px solid #0a0907;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6), inset -2px -2px 0 rgba(255,255,255,0.05);
  border-radius: 0.25rem;
}
.slot-empty-cell { background: transparent; border: none; box-shadow: none; }
.slot-label { font-size: 0.6rem; color: #5f554a; text-align: center; line-height: 1.1; }
.slot.is-filled { cursor: pointer; padding: 0; }
.slot.is-filled img { width: 3rem; height: 3rem; }
.slot.rarity-common { border-color: #c9c4b8; box-shadow: 0 0 0.35rem -0.1rem rgba(235, 230, 220, .55); }
.slot.rarity-uncommon { border-color: color-mix(in srgb, var(--uncommon) 60%, black); }
.slot.rarity-rare { border-color: color-mix(in srgb, var(--rare) 60%, black); }
.slot.rarity-epic { border-color: color-mix(in srgb, var(--epic) 70%, black); box-shadow: 0 0 0.6rem -0.1rem var(--epic); }

.stat-list { display: grid; grid-template-columns: repeat(2, minmax(7rem, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; width: 100%; }
.stat-list div { display: flex; justify-content: space-between; gap: var(--space-2); border-bottom: 1px dashed var(--panel-border); padding: 0.15rem 0; }
.stat-list dt { color: var(--muted); font-size: 0.85rem; }
.stat-list dd { margin: 0; font-weight: 600; }

.depot { background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); padding: var(--space-3); min-width: 0; }
.depot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.depot-head small { color: var(--muted); font-weight: 400; }
.depot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow-y: auto; }
.depot-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); background: var(--bg-2);
  border-left: 4px solid var(--common); border-radius: 0.25rem;
}
.depot-row.rarity-uncommon { border-left-color: var(--uncommon); }
.depot-row.rarity-rare { border-left-color: var(--rare); }
.depot-row.rarity-epic { border-left-color: var(--epic); }
.item-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.depot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.depot-info small { color: var(--muted); font-size: 0.75rem; }
.depot-info .item-stats { color: var(--good); }
.depot-count { font-size: 0.95rem; margin-left: var(--space-1); }
.item-stack { position: relative; flex-shrink: 0; display: inline-flex; }
.stack-count {
  position: absolute; right: -0.2rem; bottom: -0.2rem; font-size: 0.75rem; font-weight: 700; line-height: 1;
  color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.depot-actions { display: grid !important; grid-template-columns: auto auto; }
.depot-actions .btn { white-space: nowrap; }
.depot-actions .btn[data-action="sell-all"] { grid-column: 2; }
.depot-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; padding: var(--space-2); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.hud-top { width: 100%; max-width: 44rem; display: flex; flex-direction: column; gap: var(--space-1); padding-right: 3.25rem; }
@media (min-width: 40rem) { .hud-top { flex-direction: row; align-items: center; gap: var(--space-3); } }
.bars { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 12rem; }
.bar { position: relative; height: 1.1rem; background: #1a1210; border: 2px solid #000; border-radius: 0.25rem; overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; background: var(--hp); transition: width 0.1s linear; }
.bar-xp { height: 0.8rem; }
.bar-xp span { background: var(--xp); }
.bar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 0.75rem; line-height: 0.95rem; text-shadow: 1px 1px 0 #000; }
.bar-xp em { font-size: 0.65rem; line-height: 0.6rem; }
.hud-info { display: flex; gap: var(--space-3); font-size: 0.95rem; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.hud-time { font-weight: 700; color: var(--gold); }

.boss-bar { width: min(32rem, 92%); text-align: center; text-shadow: 1px 1px 0 #000; }
.boss-bar b { color: #ff8c7a; }
.bar-boss { height: 1rem; }
.bar-boss span { background: linear-gradient(90deg, #8b1a1a, var(--boss)); }

.teleport-note { font-size: 0.9rem; color: var(--portal); text-shadow: 1px 1px 0 #000; }
.teleport-note.is-open { font-weight: 700; animation: blink 0.9s infinite alternate; }
@keyframes blink { to { opacity: 0.55; } }

.hud-spells { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); max-width: 48rem; padding-bottom: env(safe-area-inset-bottom); }
.spell-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.spell-chip.is-rune { border-color: #8a6bbf; }
.spell-row.is-runes .spell-chip.is-empty { border-color: #5b4a7a; }
.spell-chip {
  position: relative; overflow: hidden;
  display: flex; align-items: baseline; gap: 0.3em;
  padding: 0.2rem 0.5rem; font-size: 0.75rem;
  background: rgba(10, 8, 6, 0.75); border: 1px solid color-mix(in srgb, var(--el) 70%, black); border-radius: 0.25rem;
}
.spell-chip .spell-fill { position: absolute; inset: auto 0 0 0; height: 3px; width: calc(var(--ready) * 100%); background: var(--el); }
.spell-chip b { color: var(--el); font-weight: 600; }
.spell-chip small { color: var(--gold); font-size: 0.6rem; }
.spell-chip.is-empty { border-style: dashed; border-color: var(--panel-border-light); }
.spell-chip.is-empty b { color: var(--muted); font-weight: 400; }
.spell-chip.is-locked { opacity: 0.6; border-color: #3a3028; }
.spell-chip.is-locked b { color: var(--muted); font-weight: 400; }
.slot-note { font-size: 0.85rem; color: var(--accent); }
.levelup.is-quest { border-color: var(--gold); box-shadow: 0 0 2rem -0.5rem var(--gold), 0 1rem 3rem rgba(0,0,0,0.6); }
.card-icon { font-size: 1.8rem; line-height: 1; }

#pause-btn { position: absolute; top: var(--space-2); right: var(--space-2); }

/* ---------- Modales ---------- */
#modal { position: absolute; inset: 0; }
.modal {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--space-4);
  background: rgba(5, 4, 3, 0.72);
  overflow-y: auto;
}
.modal-box {
  width: min(46rem, 100%);
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--panel-border-light); border-radius: var(--radius);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.6);
  animation: pop 0.18s ease-out;
}
.modal-box.small { width: min(22rem, 100%); }
.modal-box h2 { font-size: 1.75rem; color: var(--gold); }
.modal-box .records { width: 100%; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } }
.stack { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }

.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); width: 100%; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .cards.is-five { grid-template-columns: repeat(5, 1fr); } }
.card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--bg-2);
  border: 2px solid color-mix(in srgb, var(--el) 55%, black);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 0 1.2rem -0.3rem var(--el); }
.card-key { position: absolute; top: 0.4rem; left: 0.5rem; font-size: 0.7rem; color: var(--muted); }
.card-tag { font-size: 0.7rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.card-tag.is-new { background: var(--good); color: #082a0d; }
.card-name { font-size: 1.2rem; color: var(--el); }
.card-words { font-size: 0.8rem; color: #f0e05a; font-style: italic; }
.card-desc { font-size: 0.85rem; }
.card-params { font-size: 0.75rem; color: var(--muted); }

.earned { font-size: 1.5rem; color: var(--gold); font-weight: 700; }
.loot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.loot-list li { display: flex; align-items: center; gap: var(--space-1); padding: 0.2rem 0.5rem 0.2rem 0.2rem; background: var(--bg-2); border-radius: 0.25rem; border: 1px solid var(--common); font-size: 0.85rem; }
.loot-list li.rarity-uncommon { border-color: var(--uncommon); }
.loot-list li.rarity-rare { border-color: var(--rare); }
.loot-list li.rarity-epic { border-color: var(--epic); }
.loot-list img { width: 1.75rem; height: 1.75rem; }

/* ---------- Avisos ---------- */
#toasts {
  position: absolute; left: 50%; top: 5.5rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  width: min(28rem, 92%);
}
.toast {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(20, 16, 12, 0.92); border: 2px solid var(--panel-border-light); border-radius: var(--radius);
  font-size: 0.9rem; animation: pop 0.18s ease-out;
}
.toast img { width: 1.75rem; height: 1.75rem; }
.toast-boss { border-color: var(--portal); }
.toast-good { border-color: var(--good); }
.toast-bad { border-color: var(--danger); }

/* ---------- Zonas de caza ---------- */
.zone-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 40rem) { .zone-grid { grid-template-columns: repeat(2, 1fr); } }
.zone-card {
  position: relative; display: flex; flex-direction: column; text-align: left; overflow: hidden;
  padding: 0; cursor: pointer;
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform 0.12s, border-color 0.12s;
}
.zone-card:hover { transform: translateY(-2px); border-color: var(--zone); }
.zone-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.zone-card.is-last { border-color: var(--zone); }
.zone-ground {
  display: flex; align-items: flex-end; justify-content: space-around; gap: var(--space-2);
  height: 6.5rem; padding: var(--space-2) var(--space-3);
  background-image: var(--ground); background-size: 4rem 4rem; image-rendering: pixelated;
  border-bottom: 3px solid var(--zone);
  box-shadow: inset 0 -2rem 2rem -1.5rem rgba(0, 0, 0, 0.6);
}
.zone-ground img { width: 3.5rem; height: 3.5rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)); }
.zone-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
.zone-name { font-size: 1.2rem; color: var(--zone); }
.zone-desc { font-size: 0.85rem; }
.zone-meta { font-size: 0.75rem; color: var(--muted); }
.zone-tag {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: var(--zone); color: #111; font-size: 0.7rem; font-weight: 700;
  padding: 0.05rem 0.5rem; border-radius: 999px;
}

/* ---------- Outfits y addons ---------- */
.outfit-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 46rem) { .outfit-grid { grid-template-columns: repeat(3, 1fr); } }
.outfit-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius);
}
.outfit-card.is-selected { border-color: var(--gold); box-shadow: 0 0 1.2rem -0.4rem var(--gold); }
.outfit-preview {
  width: 6rem; height: 6rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
}
.outfit-card h3 { font-size: 1.15rem; }
.outfit-using { font-size: 0.8rem; color: var(--gold); font-weight: 700; }
.addon-row {
  width: 100%; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2); background: var(--bg-2); border-radius: 0.25rem; border: 1px solid var(--panel-border);
}
.addon-row.is-owned { border-color: var(--good); }
.addon-head { display: flex; align-items: center; gap: var(--space-2); }
.addon-head img { width: 2.25rem; height: 2.25rem; }
.addon-done { margin-left: auto; color: var(--good); font-size: 0.8rem; font-weight: 700; }
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.req-list li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; color: var(--muted); }
.req-list li img { width: 1.5rem; height: 1.5rem; }
.req-list li span { flex: 1; min-width: 0; }
.req-list li b { color: var(--danger); font-variant-numeric: tabular-nums; }
.req-list li.is-met b { color: var(--good); }

/* ---------- Equipo: secciones y piezas ---------- */
.section-tabs .tab { min-height: 2.5rem; }
.material-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 40rem) { .material-grid { grid-template-columns: repeat(2, 1fr); } }
.material {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); background: var(--panel); border-left: 4px solid var(--accent); border-radius: 0.25rem;
}
.material.is-empty { opacity: 0.5; }
.material img { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.material div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.material small { color: var(--muted); font-size: 0.72rem; }
.material-count { font-size: 1.1rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.loot-list li.rarity-material { border-color: var(--accent); }

/* ---------- Detalles de la partida ---------- */
.card-element { font-size: 0.7rem; color: var(--el); text-transform: uppercase; letter-spacing: 0.06em; }
.hud-zone { color: var(--muted); }
.hud-info .is-full { color: var(--danger); }

/* ---------- Cuenta premium y outfits bloqueados ---------- */
.account-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.premium-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.25rem 0.9rem; min-height: 2.2rem; cursor: pointer;
  background: var(--panel); border: 2px dashed var(--panel-border-light); border-radius: 999px;
  font-size: 0.85rem; color: var(--muted);
}
.premium-badge.is-premium { border-style: solid; border-color: var(--gold); color: var(--gold); font-weight: 700; }
.premium-badge .btn { min-height: 1.9rem; border-radius: 999px; font-size: 0.8rem; }
.outfit-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.outfit-card { position: relative; }
.outfit-card.is-locked .outfit-preview:not(.outfit-puzzle) { filter: grayscale(1) brightness(0.6); }
.outfit-tag {
  position: absolute; top: var(--space-2); right: var(--space-2);
  font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px;
  background: var(--gold); color: #2a1a05;
}
.outfit-tag.is-free { background: var(--panel-2); color: var(--muted); }
.outfit-note { font-size: 0.8rem; color: var(--accent); text-align: center; }
.unlock-row { border-color: var(--gold); }

/* ---------- Arma inicial y ataque ---------- */
.slot.is-start-weapon { position: relative; }
.slot.is-start-weapon img { opacity: 0.55; }
.slot-tag { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 0.55rem; color: var(--muted); }
.stat-list .stat-wide { grid-column: 1 / -1; }

/* ---------- Skill (Melee / Distance / Magic) ---------- */
.upgrade-card.is-skill { grid-column: 1 / -1; border-color: var(--gold); }
.pips.is-bar { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; }
.skill-bar { display: block; height: 0.5rem; width: 100%; background: var(--bg-2); border-radius: 0.25rem; overflow: hidden; }
.skill-bar span { display: block; height: 100%; background: var(--gold); }
.skill-level { font-size: 0.85rem; color: var(--muted); }

/* ---------- Menú: survival / mazmorra y vocaciones no elegidas en gris ---------- */
.play-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.btn-dungeon { border-color: #4fb35a; background: url("../assets/ui/icons/dungeon_bg.png") center / 125% auto no-repeat, #1b3820; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.voc-card:not(.is-selected) { filter: grayscale(1) brightness(0.75); }
.voc-card:not(.is-selected):hover, .voc-card:not(.is-selected):focus-visible { filter: grayscale(0.6) brightness(0.9); }
.gold-text { color: var(--gold); }

/* ---------- Mazmorras ---------- */
.dungeon-list { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) { .dungeon-list { grid-template-columns: repeat(2, 1fr); } }
.dungeon-list { align-items: stretch; grid-auto-rows: 1fr; }
.dungeon-card { position: relative; background: var(--panel); border: 2px solid var(--panel-border); border-left: 5px solid var(--zone); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.dungeon-dots { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; gap: 5px; }
.dungeon-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #6b6459; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }
.dungeon-dot.is-done { background: var(--good); }
.dungeon-dot.is-failed { background: var(--danger); }
.dungeon-head h3 { padding-right: 3.5rem; }
.dungeon-pager { display: flex; align-items: center; gap: var(--space-1, 0.25rem); }
.dungeon-pager .dungeon-levels { flex: 1; min-width: 0; }
.dungeon-arrow { flex-shrink: 0; width: 1.8rem; min-width: 0; height: 3.2rem; padding: 0; font-size: 1.4rem; line-height: 1; }
.dungeon-arrow:disabled { opacity: 0.25; cursor: default; }
.dungeon-level.is-failed { box-shadow: inset 0 0 0 1px var(--danger); }
.dungeon-head { display: flex; gap: var(--space-3); align-items: center; }
.dungeon-head h3 { color: var(--zone); }
.dungeon-head p { margin: 0.2rem 0 0; }
.dungeon-ground { flex-shrink: 0; display: grid; grid-template-columns: repeat(2, 2rem); gap: 2px; padding: 4px; border-radius: 0.3rem; background: var(--ground) 0 0 / 2.5rem; image-rendering: pixelated; }
.dungeon-ground img { width: 2rem; height: 2rem; image-rendering: pixelated; }
.dungeon-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dungeon-level { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--bg-2); border-radius: 0.25rem; }
.dungeon-level.is-locked { opacity: 0.7; }
.dungeon-level.is-done { box-shadow: inset 0 0 0 1px var(--good); }
.dungeon-level-n { flex-shrink: 0; font-weight: 700; color: var(--gold); width: 4rem; }
.dungeon-reward { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dungeon-reward small { color: var(--muted); font-size: 0.8rem; }
.dungeon-done { color: var(--good); font-weight: 700; }
.lock { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.hud-dungeon { color: var(--gold); }

/* ---------- Cuentas ---------- */
.login-screen { align-items: center; }
.login-box { width: min(26rem, 100%); margin: var(--space-4) auto 0; display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); padding: var(--space-4); }
.login-box label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted); }
.login-box input { font: inherit; font-size: 1.1rem; color: var(--text, #f2e6d0); background: var(--bg-2); border: 2px solid var(--panel-border);
  border-radius: 0.3rem; padding: 0.5rem 0.65rem; }
.login-box input:focus { outline: none; border-color: var(--gold); }
.login-error { color: var(--danger); margin: 0; }
.account-chip { display: flex; align-items: center; gap: var(--space-2); padding: 0.2rem 0.3rem 0.2rem 0.7rem; border: 2px solid var(--panel-border); border-radius: 999px; background: var(--panel); }
.account-chip.is-local { padding: 0.35rem 0.8rem; color: var(--muted); }
.dungeon-boss { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--danger); }

/* ---------- Barra de magias / runas ---------- */
.spell-row { align-items: center; }
.spell-row-label { font-size: 0.8rem; color: var(--muted); min-width: 3.6rem; text-align: right; padding-right: 0.2rem; }
.spell-row.is-runes .spell-row-label { color: #b99be8; }
.spell-chip .rune-icon { width: 1.4rem; height: 1.4rem; image-rendering: pixelated; vertical-align: middle; }
.card-rune { width: 2.6rem; height: 2.6rem; image-rendering: pixelated; margin: 0.2rem auto 0; }
.card-words { color: var(--muted); font-style: normal; }

/* ---------- Arenas ---------- */
.btn-arena { border-color: #8a6bbf; background: url("../assets/ui/icons/arena_bg.png") center / 125% auto no-repeat, #2c1b38; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.arena-list { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) { .arena-list { grid-template-columns: repeat(2, 1fr); } }
.arena-card.is-locked { opacity: 0.75; }
.arena-req { font-size: 0.85rem; color: var(--gold); margin-left: 0.3rem; }
.arena-rewards { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.arena-reward { display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0.5rem; background: var(--bg-2); border: 1px solid var(--panel-border); border-radius: 0.3rem; }
.arena-reward img { width: 2.2rem; height: 2.2rem; image-rendering: pixelated; }
.arena-reward small { font-size: 0.7rem; color: var(--muted); }
.arena-reward.rarity-epic { border-color: var(--epic); }
.arena-reward.rarity-rare { border-color: var(--rare); }
.arena-reward.rarity-uncommon { border-color: var(--uncommon); }
.arena-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }

/* ---------- Tickets ---------- */
.ticket-bar { display: flex; gap: var(--space-1); }
.ticket-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.55rem 0.15rem 0.3rem; border-radius: 999px; border: 2px solid; background: var(--panel); }
.ticket-badge.is-dungeon { border-color: #c9a23a; color: #ffe066; }
.ticket-badge.is-arena { border-color: #8a6bbf; color: #d7a6ff; }
.ticket-badge img { width: 1.5rem; height: 1.5rem; image-rendering: pixelated; }
.btn-ticket { width: 1.1rem; height: 1.1rem; image-rendering: pixelated; vertical-align: middle; margin-left: 0.2rem; }
.arena-card.is-cleared { border-color: var(--good); }
.loot-list li.ticket-li.is-dungeon { border-color: #c9a23a; }
.loot-list li.ticket-li.is-arena { border-color: #8a6bbf; }

/* ---------- Zonas bloqueadas ---------- */
.zone-card.is-locked { filter: grayscale(1) brightness(0.7); cursor: not-allowed; }
.zone-card.is-locked:hover { filter: grayscale(1) brightness(0.8); }
.zone-lock { font-size: 0.85rem; color: var(--muted); }
.zone-diff { font-size: 0.85rem; color: var(--danger); }

/* ---------- Elegir carta: set y botín de la partida debajo ---------- */
.modal.is-levelup { place-items: center; }
.levelup-stack { margin: auto 0; }
.levelup-stack { width: min(52rem, 100%); display: flex; flex-direction: column; gap: var(--space-3); }
.levelup-stack .modal-box { width: 100%; padding: var(--space-4); }
.modal-box.no-pop { animation: none; }
.run-loadout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3); background: rgba(20, 17, 14, 0.92); border: 2px solid var(--panel-border); border-radius: var(--radius); text-align: left; }
@media (max-width: 34rem) { .run-loadout { grid-template-columns: 1fr; } }
.run-set h3 { font-size: 1rem; color: var(--gold); margin: 0 0 var(--space-2); }
.rinventory { display: grid; grid-template-columns: repeat(3, 2.75rem); gap: 4px; }
.rslot { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--panel-border); border-radius: 0.25rem; }
.rslot span { font-size: 0.55rem; color: var(--muted); text-align: center; line-height: 1; }
.rslot img { width: 2rem; height: 2rem; image-rendering: pixelated; }
.rslot.is-blank { background: none; border: 0; }
.rslot.is-filled { border-color: var(--el, var(--panel-border-light)); }
.run-loot { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.run-loot .tabs { display: flex; gap: var(--space-1); }
.rloot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 13rem; overflow-y: auto; }
.rloot { display: flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-2); background: var(--bg-2); border-radius: 0.25rem; }
.rloot img { width: 2rem; height: 2rem; image-rendering: pixelated; flex-shrink: 0; }
.rloot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rloot-text small { color: var(--muted); font-size: 0.75rem; }
.rloot-list.is-mats { flex-direction: row; flex-wrap: wrap; }
.rmat { display: flex; align-items: center; gap: 4px; padding: 2px 6px; background: var(--bg-2); border-radius: 0.25rem; font-size: 0.8rem; }
.rmat img { width: 1.6rem; height: 1.6rem; image-rendering: pixelated; }
.rmat b { color: var(--gold); }

/* Valores de la magia en la carta: "Daño: 40 › 52" */
.card-stats { list-style: none; margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2); width: 100%; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; background: rgba(0,0,0,0.25); border-radius: 0.25rem; }
.card-stats li { display: flex; justify-content: space-between; gap: var(--space-2); }
.card-stats span { color: var(--muted); }
.card-stats.is-upgrade li { justify-content: center; }
.card-stats.is-upgrade b { color: var(--text, #f3e9d2); }
.card-stats i { font-style: normal; color: var(--muted); margin: 0 0.15rem; }
.card-stats em { font-style: normal; color: var(--good); }
.card-pct { color: var(--good); font-size: 0.75rem; margin-left: 0.2rem; }
.hud-timed { color: var(--c); border: 1px solid var(--c); border-radius: 0.3rem; padding: 0 0.35rem; font-size: 0.8rem; box-shadow: 0 0 0.5rem -0.1rem var(--c); }

/* ---------- Survivor Coins y tienda ---------- */
.sc-coin { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; font-style: normal; font-size: 0.7rem; font-weight: 800; color: #2b0d3d; background: radial-gradient(circle at 35% 30%, #f3d9ff, #b26bff 55%, #6a2fa0); box-shadow: 0 0 0 1px #3d1d6b, 0 0 6px -1px #c77dff; margin-right: 0.25rem; vertical-align: -0.2rem; }
.sc-badge { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.3rem 0.7rem; border: 2px solid #8e5cc7; border-radius: 999px; background: rgba(40, 18, 60, 0.6); }
.sc-badge b { color: #e6c8ff; }
.sc-badge span { color: var(--muted); font-size: 0.8rem; margin-left: 0.2rem; }
.btn-shop { border-color: #8e5cc7; color: #e6c8ff; }
.shop-title { color: var(--gold); margin: var(--space-3) 0 var(--space-2); }
.shop-grid { display: grid; gap: var(--space-2); }
@media (min-width: 48rem) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
.shop-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.shop-ico { width: 2.5rem; height: 2.5rem; image-rendering: pixelated; flex-shrink: 0; }
.shop-ico.is-outfit { width: 3rem; height: 3rem; }
.shop-emoji { width: 2.5rem; text-align: center; font-size: 1.5rem; flex-shrink: 0; }
.shop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-text small { color: var(--muted); }
.shop-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.shop-owned { color: var(--good); font-size: 0.8rem; }
.shop-admin { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 2px dashed #8e5cc7; border-radius: var(--radius); margin-bottom: var(--space-2); }
.shop-admin input { width: 11rem; }
.good-text { color: var(--good); }
.btn.is-poor { opacity: 0.55; }

/* ---------- Tier amarillo (legendario) y Forja ---------- */
.rarity-text-legendary { color: var(--legendary, #ffd34d); }
.slot.rarity-legendary, .rslot.rarity-legendary { border-color: #ffd34d; box-shadow: 0 0 0.7rem -0.1rem #ffd34d; }
.depot-row.rarity-legendary { border-left-color: #ffd34d; }
.loot-list li.rarity-legendary, .rloot.rarity-legendary { border-color: #ffd34d; }
.btn-forge { border-color: #d98a3a; color: #ffcf99; }
.btn-market { border-color: #4fb38a; color: #a8f0cf; }
/* Forja y Market a la izquierda del todo (alineados con Arenas); el resto, separado, a la derecha. */
.menu-actions:has(.btn-market) { align-items: stretch; width: max-content; max-width: 100%; margin-inline: auto; }
.menu-actions:has(.btn-market) .menu-secondary { justify-content: flex-end; }
.menu-secondary .btn-market { margin-right: auto; }
.forge-layout { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) { .forge-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.forge-search { width: 100%; padding: 0.55rem 0.8rem; border-radius: var(--radius); border: 2px solid var(--panel-border-light); background: var(--bg-2); color: inherit; font: inherit; margin-bottom: var(--space-2); }
.forge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.forge-item { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-2); background: var(--panel); border: 1px solid var(--panel-border); border-left: 4px solid var(--common); border-radius: 0.25rem; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.forge-item.rarity-uncommon { border-left-color: var(--uncommon); }
.forge-item.rarity-rare { border-left-color: var(--rare); }
.forge-item.rarity-epic { border-left-color: var(--epic); }
.forge-item.rarity-legendary { border-left-color: #ffd34d; }
.forge-item.is-active { outline: 2px solid var(--gold); }
.forge-item img { width: 2.25rem; height: 2.25rem; image-rendering: pixelated; }
.forge-item-text { display: flex; flex-direction: column; min-width: 0; }
.forge-item-text small { color: var(--muted); }
.forge-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); }
.forge-selected { display: flex; gap: var(--space-2); align-items: center; }
.forge-selected img { width: 3rem; height: 3rem; image-rendering: pixelated; }
.forge-selected div { display: flex; flex-direction: column; }
.forge-selected small { color: var(--muted); }
.forge-slots { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.forge-slot { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 2px solid var(--common); border-radius: 0.3rem; background: var(--bg-2); position: relative; }
.forge-slot img { width: 2.6rem; height: 2.6rem; image-rendering: pixelated; }
.forge-slot small { position: absolute; bottom: -1.1rem; font-size: 0.7rem; }
.forge-slot.is-empty { font-size: 0.65rem; color: var(--muted); text-align: center; border-style: dashed; }
.forge-slot.rarity-uncommon { border-color: var(--uncommon); }
.forge-slot.rarity-rare { border-color: var(--rare); }
.forge-slot.rarity-epic { border-color: var(--epic); }
.forge-slot.rarity-legendary { border-color: #ffd34d; box-shadow: 0 0 0.7rem -0.1rem #ffd34d; }
.forge-plus, .forge-arrow { font-size: 1.4rem; color: var(--muted); }
.forge-cost { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.forge-cost .is-missing { color: var(--danger); }
.forge-result { margin: 0; font-weight: 700; }
.forge-result.is-ok { color: var(--good); }
.forge-result.is-bad { color: var(--danger); }
.forge-materials { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--panel-border); }
.forge-materials small { color: var(--muted); }
.forge-mat-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.forge-panel .btn:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.6); }

/* ---------- Market ---------- */
.market-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.market-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--panel); border: 1px solid var(--panel-border); border-left: 4px solid var(--common); border-radius: 0.25rem; flex-wrap: wrap; }
.market-row.rarity-uncommon { border-left-color: var(--uncommon); }
.market-row.rarity-rare { border-left-color: var(--rare); }
.market-row.rarity-epic { border-left-color: var(--epic); }
.market-row.rarity-legendary { border-left-color: #ffd34d; }
.market-item-text { flex: 1; min-width: 10rem; display: flex; flex-direction: column; }
.market-item-text small, .market-meta small { color: var(--muted); }
.market-meta { display: flex; flex-direction: column; align-items: flex-end; min-width: 8rem; }
.market-buy { display: flex; gap: 4px; align-items: center; }
.market-buy input { width: 4rem; }
.market-sell { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; padding: var(--space-3); background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); }
.market-sell label { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; color: var(--muted); }
.market-sell select, .market-sell input, .market-buy input { padding: 0.4rem 0.5rem; border-radius: 0.3rem; border: 1px solid var(--panel-border-light); background: var(--bg-2); color: var(--text, #f3e9d2); font: inherit; }
.market-sell select { min-width: 14rem; }
.market-sell input { width: 8rem; }

/* ---------- Comprar con gold o SC en cada sitio, y ventanitas ---------- */
.badge-plus { margin-left: 0.35rem; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 0.3rem; border: 1px solid currentColor; background: rgba(255,255,255,0.08); color: inherit; font: 700 0.9rem/1 var(--font); cursor: pointer; display: inline-grid; place-items: center; }
.badge-plus:hover { background: rgba(255,255,255,0.2); }
.ticket-badge { display: inline-flex; align-items: center; }
.cost-pair { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.btn-sc { border-color: #8e5cc7; background: linear-gradient(180deg, #5b2d86, #3b1c59); color: #f0dcff; }
.popup-backdrop { z-index: 50; }
.popup-box { position: relative; text-align: left; align-items: stretch; width: min(26rem, 100%); }
.popup-box h2 { font-size: 1.35rem; }
.popup-close { position: absolute; top: 0.5rem; right: 0.5rem; }
.popup-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--bg-2); border-radius: 0.3rem; }
.popup-row img { width: 2.2rem; height: 2.2rem; image-rendering: pixelated; }

.market-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--panel-border-light); background: var(--panel); color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; }
.chip.is-active { border-color: var(--gold); color: var(--gold); background: var(--panel-2); }

/* ---------- Modo de juego y barra manual ---------- */
.mode-grid { display: grid; gap: var(--space-3); }
@media (min-width: 44rem) { .mode-grid { grid-template-columns: 1fr 1fr; } }
.mode-card { text-align: left; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); color: inherit; font: inherit; cursor: pointer; }
.mode-card:hover, .mode-card.is-selected { border-color: var(--gold); box-shadow: 0 0 1rem -0.4rem var(--gold); }
.mode-card h3 { color: var(--gold); font-size: 1.4rem; margin: 0; }
.mode-card p { margin: 0; color: var(--muted); }
.mode-icon { font-size: 2rem; }
.manual-bar { display: flex; flex-direction: row; gap: 6px; justify-content: center; }
.manual-slot { position: relative; min-width: 5.5rem; min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0.35rem 0.5rem 0.35rem 1.2rem; background: rgba(20,17,14,0.85); border: 2px solid var(--panel-border); border-radius: 0.4rem; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; }
.manual-slot.is-active { border-color: var(--gold); box-shadow: 0 0 0.8rem -0.1rem var(--gold); }
.manual-slot.is-empty { color: var(--muted); font-size: 0.8rem; cursor: default; }
.manual-key { position: absolute; top: 2px; left: 4px; font-size: 0.7rem; color: var(--gold); }
.manual-spell { display: flex; flex-direction: column; align-items: center; color: var(--el); font-size: 0.8rem; font-weight: 700; line-height: 1.1; }
.manual-spell small { font-size: 0.55rem; color: var(--gold); }
.manual-spell .rune-icon { width: 1.6rem; height: 1.6rem; }
.manual-plus { font-style: normal; color: var(--muted); margin: 0 2px; }
.fuse-cards .card { min-height: 6rem; justify-content: center; }
.fuse-cards .card.is-picked { outline: 3px solid #ffd34d; }

/* ---------- Selector de modo en el menú y ranking ---------- */
.mode-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.mode-switch small { flex-basis: 100%; text-align: center; }
.mode-pill { padding: 0.45rem 1.1rem; border-radius: 999px; border: 2px solid var(--panel-border-light); background: var(--panel); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.mode-pill.is-active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0.8rem -0.3rem var(--gold); background: var(--panel-2); }
.ranking { width: min(100%, 32rem); margin: var(--space-3) auto 0; padding: var(--space-3); background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); }
.ranking h3 { margin: 0 0 var(--space-2); color: var(--gold); font-size: 1.05rem; }
.ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ranking-list li { display: grid; grid-template-columns: 1.6rem 1fr auto 3.5rem; gap: var(--space-2); align-items: center; padding: 3px var(--space-2); border-radius: 0.25rem; background: var(--bg-2); }
.ranking-list li.is-me { outline: 1px solid var(--gold); }
.ranking-list small { color: var(--muted); text-align: right; }
.rank-pos { color: var(--gold); font-weight: 700; }

/* Resetear mejoras */
.reset-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.reset-bar span { display: inline-flex; align-items: center; gap: 4px; }
.reset-bar.is-confirm { padding: 8px 12px; border: 1px solid #c0392b; border-radius: 10px; background: rgba(192, 57, 43, .12); }
.mat-icon { width: 32px; height: 32px; vertical-align: middle; image-rendering: pixelated; object-fit: contain; }
.forge-mat-row span { display: inline-flex; align-items: center; gap: 4px; }

/* Nivel de forja */
.forge-level { padding: 10px 14px; border: 1px solid rgba(255, 211, 77, .35); border-radius: 12px; background: rgba(255, 211, 77, .06); margin-bottom: 10px; display: grid; gap: 6px; }
.forge-level-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.forge-level-bar { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.forge-level-bar span { display: block; height: 100%; background: linear-gradient(90deg, #e09a00, #ffd34d); }

/* Páginas de vocaciones: flecha a la derecha del druid para las vocaciones-monstruo */
.voc-pager { display: flex; align-items: stretch; gap: var(--space-2); }
.voc-pager .voc-grid { flex: 1; min-width: 0; }
.voc-arrow {
  flex: 0 0 auto; width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--panel-border); border-radius: var(--radius);
  color: var(--gold, #ffd34d); cursor: pointer; font: inherit; transition: transform .12s, border-color .12s;
}
.voc-arrow span { font-size: 1.4rem; line-height: 1; }
.voc-arrow small { font-size: .62rem; color: var(--muted, #b9a98a); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .08em; }
.voc-arrow:hover { border-color: var(--gold, #ffd34d); transform: translateX(2px); }
.voc-arrow.is-prev:hover { transform: translateX(-2px); }
@media (max-width: 46rem) { .voc-arrow { width: 40px; } }
.manual-charge { display: block; font-style: normal; font-size: .62rem; color: #7fe8dc; line-height: 1; }

/* ---------------------------------------------------------------- Monstruos jugables (colección) */
.voc-sprite.is-shadow, .mon-card.is-locked img.mon-sprite, .mon-portrait.is-locked img { filter: brightness(0) drop-shadow(0 0 0 #1c2433); opacity: 0.55; }
.voc-card.is-locked { opacity: 0.85; }
.mon-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mon-sep { width: 1px; height: 1.4rem; background: var(--panel-border); margin: 0 var(--space-1); }
.mon-filter { font: inherit; color: var(--text); background: var(--panel-2); border: 2px solid var(--panel-border); border-radius: 999px; padding: 0.2rem 0.8rem; cursor: pointer; }
.mon-filter:hover { border-color: var(--panel-border-light); }
.mon-filter.is-active { border-color: var(--gold); color: var(--gold); }
.mon-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 52rem) { .mon-layout { grid-template-columns: 1fr 19rem; } }
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-3); }
.mon-card { position: relative; font: inherit; color: var(--text); background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-2) var(--space-2); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); cursor: pointer; min-height: 9rem; }
.mon-card:hover { border-color: var(--panel-border-light); }
.mon-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.mon-num { position: absolute; top: 0.3rem; left: 0.45rem; font-size: 0.75rem; color: var(--muted); }
.mon-sprite { width: 4.5rem; height: 4.5rem; object-fit: contain; image-rendering: pixelated; margin-top: auto; }
.mon-name { font-size: 0.95rem; }
.mon-size { font-size: 0.75rem; color: var(--muted); background: var(--bg-2); border-radius: 999px; padding: 0 0.5rem; }
.mon-detail { background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 52rem) { .mon-detail { position: sticky; top: var(--space-4); } }
.mon-portrait { aspect-ratio: 1; border-radius: var(--radius); border: 3px solid var(--voc); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--voc) 30%, var(--bg-2)), var(--bg)); display: grid; place-items: center; }
.mon-portrait img { width: 70%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.mon-dex { text-align: center; color: var(--muted); font-size: 0.85rem; }
.mon-title { text-align: center; font-size: 1.5rem; }
.mon-tags { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.mon-tag { font-size: 0.8rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--panel-border); }
.mon-tag.is-melee { background: #7a2a22; } .mon-tag.is-distance { background: #2a5a2a; } .mon-tag.is-mage { background: #3a2a7a; } .mon-tag.is-ghost { background: #3a5a6a; }
.mon-tag.is-build-shield { background: #2a4a7a; } .mon-tag.is-build-weapon { background: #7a4a1a; } .mon-tag.is-build-bare { background: #4a4a4a; }
.mon-desc { font-size: 0.85rem; color: var(--muted); }
.mon-stat { display: grid; grid-template-columns: 5rem 1fr 3rem; align-items: center; gap: var(--space-2); font-size: 0.9rem; }
.mon-stat i { height: 0.5rem; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.mon-stat i b { display: block; height: 100%; background: var(--gold); }
.mon-stat em { font-style: normal; text-align: right; }
.mon-line { font-size: 0.9rem; }
.mon-line b { color: var(--gold); }
.mon-spells { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mon-spell { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; border: 1px solid var(--el); color: var(--el); background: var(--bg-2); display: inline-flex; align-items: center; }
.mon-spell img { width: 1.4rem; height: 1.4rem; image-rendering: pixelated; }
.mon-buy { margin-top: var(--space-2); }
.mon-buy.is-poor { opacity: 0.6; }
.mon-locked { text-align: center; }

/* Inicio: sólo el personaje elegido */
.voc-single { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.voc-single .voc-card { width: min(20rem, 100%); }
.voc-single .voc-sprite { width: 6rem; height: 6rem; }
.mon-popup { width: min(64rem, 100%); max-width: none; text-align: left; align-items: stretch; gap: var(--space-3); }
.mon-popup .mon-grid { padding: 2px; align-content: start; }
/* En pantalla ancha la lista mide lo mismo que la ficha de la derecha (llega hasta el final de las estadísticas)
   y sólo hace scroll lo que no quepa en ese alto. */
@media (min-width: 52rem) {
  .mon-popup .mon-layout { align-items: stretch; }
  .mon-popup .mon-grid { contain: size; overflow-y: auto; min-height: 30rem; }
  .mon-popup .mon-detail { position: static; }
}

/* Menú en tres columnas: botones de personaje | personaje elegido | jugar */
.menu-stage { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-2); }
.menu-side { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-side .btn-big { width: 100%; }
.menu-play-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.menu-play-row .btn-big { width: 100%; min-width: 0; padding-left: 0.4rem; padding-right: 0.4rem; }
.btn-depot { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-color: #e0913a; background: url("../assets/ui/icons/depot_bg.png") center / 125% auto no-repeat, #3a2412; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.btn-depot img { width: 2rem; height: 2rem; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000); }
.menu-play { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-play .btn-big { width: 100%; }
.voc-single-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.menu-stage .voc-single { order: -1; }
@media (min-width: 52rem) {
  .menu-stage { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem) minmax(0, 1fr); }
  .menu-stage .voc-single { order: 0; }
  .menu-side { align-self: start; justify-self: start; width: min(100%, 17rem); }
  .menu-play { justify-self: end; width: min(100%, 17rem); }
}
@media (min-width: 76rem) {
  .screen.menu { max-width: 74rem; }
  .menu-head { flex-wrap: nowrap; }
  .menu-head .logo { font-size: 3rem; white-space: nowrap; }
  /* Logo centrado encima de la columna de la izquierda (Depot, Battle Pass...) y más grande */
  .menu-head .logo.logo-img { flex: 0 0 auto; width: min(100%, 17rem); display: flex; justify-content: center; background: none; }
  .menu-head .logo.logo-img img { height: 10.5rem; }
  .menu-head .account-bar { flex-wrap: wrap; min-width: 0; row-gap: 0.4rem; }
}

/* ---------- Puzzles de 6 piezas (personajes y outfits que aún no tienes) ---------- */
.puzzle { display: block; width: 100%; height: 100%; overflow: visible; }
.puzzle .pz-bg { fill: rgba(236, 227, 208, 0.13); }
.puzzle .pz-fill { fill: rgba(255, 255, 255, 0.06); }
.puzzle .pz-edge { fill: none; stroke: rgba(236, 227, 208, 0.75); stroke-width: 1.4; stroke-dasharray: 3 2.5; stroke-linejoin: round; }
.puzzle .pz-edge.is-owned { stroke: rgba(245, 197, 66, 0.55); stroke-dasharray: none; stroke-width: 1; }
.puzzle .pz-edge.is-fresh { stroke: var(--gold); stroke-width: 2.4; stroke-dasharray: none; filter: drop-shadow(0 0 3px var(--gold)); animation: pz-glow 1.1s ease-in-out infinite alternate; }
.puzzle .pz-piece.is-fresh { animation: pz-drop 0.7s cubic-bezier(.2, 1.6, .4, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes pz-glow { to { stroke-opacity: 0.45; } }
@keyframes pz-drop { from { transform: scale(1.6); opacity: 0; } }
.mon-card .mon-puzzle { display: block; padding: 0.2rem; }
.mon-card .mon-puzzle .pz-edge { stroke-width: 1.1; stroke-dasharray: 2.5 2; }
.mon-pieces { position: absolute; top: 0.35rem; right: 0.45rem; font-size: 0.7rem; color: var(--muted); }
.mon-portrait.is-puzzle { padding: 6%; }
.mon-portrait.is-puzzle .puzzle { height: calc(100% - 3.4rem); width: auto; max-width: 90%; }
.mon-puzzle-note, .outfit-puzzle-note { font-size: 0.85rem; }
.link-btn { font: inherit; color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; display: inline-flex; align-items: center; gap: 0.2rem; }
.link-btn img { width: 1.1rem; height: 1.1rem; image-rendering: pixelated; }
.outfit-preview.outfit-puzzle { display: block; padding: 0.25rem; }
.outfit-tag.is-puzzle { background: #1f5a33; color: #b8ffcb; }

/* ---------- Monedas y botones de la ruleta ---------- */
.ticket-badge.is-roulette_outfit { border-color: #2f9a52; color: #8dffaa; }
.ticket-badge.is-roulette_player { border-color: #b33a3a; color: #ff9c9c; }
.btn-roulette { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.btn-roulette img { width: 1.6rem; height: 1.6rem; image-rendering: pixelated; flex: none; }
.btn-roulette.is-outfit { border-color: #2f9a52; color: #b8ffcb; }
.btn-roulette.is-player { border-color: #b33a3a; color: #ffc1c1; }
.popup-row img { image-rendering: pixelated; }

/* ---------- Ventana de la ruleta ---------- */
.roulette-popup { --rl: #2f9a52; --rl-2: #8dffaa; width: min(62rem, 100%); max-width: none; text-align: left; align-items: stretch; position: relative; }
.roulette-popup.is-player { --rl: #b33a3a; --rl-2: #ff9c9c; }
.roulette-popup.no-pop { animation: none; }
.roulette-popup h2 { display: flex; align-items: center; gap: 0.4rem; color: var(--rl-2); }
.rl-coin { width: 2rem; height: 2rem; image-rendering: pixelated; }
.rl-layout { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .rl-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.rl-main { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; }
.rl-text { max-width: 32rem; }
.rl-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.rl-spin { min-width: 14rem; display: inline-flex; gap: 0.6rem; align-items: center; justify-content: center; }
.rl-spin small { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.9rem; opacity: 0.85; }
.rl-spin small img { width: 1.3rem; height: 1.3rem; image-rendering: pixelated; }

.slot-machine { --cell: clamp(4.5rem, 14vw, 6.5rem); position: relative; flex: none; padding: 0.6rem 0.8rem 0.9rem; border-radius: 1.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rl) 55%, #1b1713), #1b1713 75%);
  border: 3px solid var(--rl); box-shadow: inset 0 0 0 3px rgba(0,0,0,0.35), 0 0.8rem 2rem rgba(0,0,0,0.5); margin-right: 2.2rem; }
.slot-top { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--rl-2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
.slot-top img { width: 1.4rem; height: 1.4rem; image-rendering: pixelated; }
.slot-window { position: relative; display: flex; gap: 0.4rem; padding: 0.4rem; background: #0b0a09; border-radius: 0.6rem; border: 2px solid rgba(0,0,0,0.6); }
.reel { width: var(--cell); height: var(--cell); overflow: hidden; border-radius: 0.4rem; background: linear-gradient(180deg, #d9d2c3, #fffaf0 30%, #fffaf0 70%, #cfc6b4); box-shadow: inset 0 0.5rem 0.6rem -0.3rem rgba(0,0,0,0.45), inset 0 -0.5rem 0.6rem -0.3rem rgba(0,0,0,0.45); }
.reel-strip { display: flex; flex-direction: column; }
.reel-strip.is-rolling { animation: reel-roll var(--d) cubic-bezier(.12, .55, .2, 1) forwards; }
@keyframes reel-roll { from { transform: translateY(0); filter: blur(1.5px); } 85% { filter: blur(0); } to { transform: translateY(calc((var(--n) - 1) * var(--cell) * -1)); } }
.reel-cell { width: var(--cell); height: var(--cell); flex: none; display: grid; place-items: center; }
.reel-cell img { width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated; }
.reel-cell img.is-shadow { filter: brightness(0); opacity: 0.8; }
.slot-line { position: absolute; left: 0.2rem; right: 0.2rem; top: 50%; height: 2px; background: color-mix(in srgb, var(--rl-2) 70%, transparent); pointer-events: none; }
.slot-lever { position: absolute; right: -2.1rem; top: 1.4rem; width: 1.6rem; height: calc(var(--cell) + 1.6rem); }
.slot-lever i { position: absolute; left: 0.55rem; bottom: 0; width: 0.5rem; height: 100%; background: linear-gradient(90deg, #8c8c8c, #e6e6e6, #8c8c8c); border-radius: 0.3rem; transform-origin: bottom center; }
.slot-lever b { position: absolute; left: 0; top: -0.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #c41f1f 60%, #6b0d0d); box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.5); }
.slot-lever.is-pulled i { animation: lever-arm 0.6s ease-in-out; }
.slot-lever.is-pulled b { animation: lever-ball 0.6s ease-in-out; }
@keyframes lever-arm { 50% { transform: scaleY(0.25); } }
@keyframes lever-ball { 50% { transform: translateY(calc(var(--cell) + 1.2rem)); } }
.slot-machine.is-spinning { animation: slot-shake 0.12s linear 6 alternate; }
@keyframes slot-shake { to { transform: translateX(1px); } }

.rl-prizes { background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.rl-prizes h3 { font-size: 1.1rem; }
.rl-odds { font-size: 0.8rem; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.4rem; max-height: 26rem; overflow-y: auto; padding: 2px; }
.rl-prize { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0.3rem; background: var(--bg-2); border: 1px solid var(--panel-border); border-radius: 0.4rem; text-align: center; min-width: 0; }
.rl-prize .puzzle { width: 3.6rem; height: 3.6rem; }
.rl-prize .pz-edge { stroke-width: 1; stroke-dasharray: 2.5 2; }
.rl-prize b { font-size: 0.72rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rl-prize small { font-size: 0.65rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rl-prize em { position: absolute; top: 0.15rem; right: 0.3rem; font-style: normal; font-size: 0.65rem; color: var(--rl-2); }

.rl-reveal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 4, 3, 0.78); border-radius: var(--radius); z-index: 5; animation: fade-in 0.25s ease-out; padding: var(--space-3); }
@keyframes fade-in { from { opacity: 0; } }
.rl-card { width: min(20rem, 100%); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; padding: var(--space-4); border-radius: 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--voc) 22%, var(--panel)), var(--panel)); border: 3px solid var(--rl); box-shadow: 0 0 2.5rem -0.5rem var(--rl); animation: card-in 0.45s cubic-bezier(.2, 1.5, .4, 1); }
.rl-card.is-complete { border-color: var(--gold); box-shadow: 0 0 3rem -0.2rem var(--gold); }
@keyframes card-in { from { transform: scale(0.6) rotateY(90deg); opacity: 0; } }
.rl-new { padding: 0.15rem 0.8rem; border-radius: 999px; background: var(--rl); color: #fff; font-weight: 700; font-size: 0.85rem; }
.rl-card.is-complete .rl-new { background: var(--gold); color: #2a1a05; }
.rl-card-art { width: 12rem; height: 12rem; border-radius: 0.6rem; padding: 0.4rem; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--voc) 30%, var(--bg-2)), var(--bg)); }
.rl-card-art > img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; animation: pz-drop 0.6s ease-out; }
.rl-card h3 { font-size: 1.4rem; color: var(--gold); }
.rl-pieces { display: flex; gap: 0.3rem; }
.rl-pieces i { width: 1.1rem; height: 1.1rem; border-radius: 0.25rem; border: 2px dashed var(--muted); }
.rl-pieces i.is-on { background: var(--rl); border: 2px solid var(--rl-2); }
.rl-pieces i.is-fresh { background: var(--gold); border-color: #fff3c2; box-shadow: 0 0 0.5rem var(--gold); }
.rl-count { font-weight: 700; }

/* Tiradas de 1, 2 o 3 piezas: la misma máquina con 1, 2 o 3 filas de rodillos */
.slot-window { flex-direction: column; }
.slot-row { position: relative; display: flex; gap: 0.4rem; }
.slot-machine.rows-2 { --cell: clamp(3.8rem, 10vw, 4.8rem); }
.slot-machine.rows-3 { --cell: clamp(3.2rem, 8vw, 4rem); }
.slot-machine.rows-2 .slot-window, .slot-machine.rows-3 .slot-window { padding-left: 1.6rem; }
.slot-row-n { position: absolute; left: -1.35rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; background: var(--rl); color: #fff; }
.slot-row + .slot-row { padding-top: 0.4rem; border-top: 2px solid rgba(255, 255, 255, 0.06); }
.slot-lever { --lever-h: calc(var(--cell) + 1.6rem); top: 50%; transform: translateY(-50%); height: var(--lever-h); }
.slot-machine:not(.rows-1) .slot-lever b { top: -0.6rem; }
@keyframes lever-ball { 50% { transform: translateY(calc(var(--lever-h) - 0.4rem)); } }
.rl-opts { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.rl-opt { font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 6.5rem; padding: 0.35rem 0.8rem;
  background: var(--bg-2); border: 2px solid var(--panel-border); border-radius: 0.6rem; }
.rl-opt:hover:not(:disabled) { border-color: var(--rl); }
.rl-opt.is-active { border-color: var(--rl-2); background: color-mix(in srgb, var(--rl) 30%, var(--bg-2)); box-shadow: 0 0 0.8rem -0.3rem var(--rl-2); }
.rl-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.rl-opt small { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--rl-2); }
.rl-opt img { width: 1.1rem; height: 1.1rem; image-rendering: pixelated; }
.rl-reveal-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; }
.rl-reveal-title { font-size: 1.6rem; color: var(--gold); text-shadow: 0 0 1rem rgba(245, 197, 66, 0.4); }
.rl-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.rl-cards .rl-card { animation-delay: calc(var(--i) * 0.18s); animation-fill-mode: both; }
.rl-card h4 { font-size: 1.25rem; color: var(--gold); }
.rl-cards.is-2 .rl-card { width: 15rem; padding: var(--space-3); }
.rl-cards.is-2 .rl-card-art { width: 10rem; height: 10rem; }
.rl-cards.is-3 .rl-card { width: 12.5rem; padding: var(--space-3) var(--space-2); }
.rl-cards.is-3 .rl-card-art { width: 8.5rem; height: 8.5rem; }
.rl-cards.is-3 .rl-card h4 { font-size: 1.05rem; }
.rl-cards.is-3 .rl-count { font-size: 0.85rem; }

/* Tirada de 3: las 8 líneas posibles sobre las 9 casillas */
.slot-grid { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.slot-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.slot-line { stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; opacity: 0.75; filter: drop-shadow(0 0 2px rgba(0,0,0,0.9)); stroke-dasharray: 6 5; }
.slot-line.is-win { stroke-width: 5; opacity: 1; stroke-dasharray: none; filter: drop-shadow(0 0 6px var(--c)); animation: line-in 0.5s ease-out, line-glow 0.9s 0.5s ease-in-out infinite alternate; }
@keyframes line-in { from { stroke-dasharray: 0 600; } to { stroke-dasharray: 600 0; } }
@keyframes line-glow { to { opacity: 0.6; } }
.rl-hint { font-size: 0.85rem; color: var(--rl-2); max-width: 26rem; }
.slot-grid .slot-row + .slot-row { padding-top: 0; border-top: 0; }
.slot-machine.rows-3.is-lines .slot-window { padding-left: 0.4rem; }

/* Tirada de 1: un solo hueco grande */
.slot-machine.is-single { --cell: clamp(6rem, 18vw, 8rem); }
.slot-machine.is-single { min-width: 16rem; }
.slot-machine.is-single .slot-window { align-items: center; }
.reel-cell.is-star img { width: 70%; height: 70%; image-rendering: auto; filter: drop-shadow(0 0 4px rgba(255, 211, 77, 0.8)); }
.rl-star { width: 1.1rem; height: 1.1rem; vertical-align: -0.2rem; }
.rl-coin-art { display: grid; place-items: center; position: relative; }
/* Premio de oro: 3 bolsas de Fortuna apiladas (en la casilla del rodillo y en la tarjeta) */
.rl-bags { position: relative; display: block; width: 78%; height: 78%; }
.rl-bags img { position: absolute; width: 55%; height: 55%; image-rendering: pixelated; filter: drop-shadow(0 0.1rem 0 rgba(0, 0, 0, 0.6)); }
.rl-bags .b0 { left: 0; bottom: 4%; }
.rl-bags .b1 { right: 0; bottom: 4%; }
.rl-bags .b2 { left: 22.5%; top: 0; z-index: 1; }
.reel-cell.is-gold .rl-bags img { animation: none; }
.rl-gold-art .rl-bags { width: 64%; height: 64%; animation: coin-spin 1.2s ease-in-out infinite alternate; }
.rl-gold-art .rl-bags img { width: 55%; height: 55%; animation: none; }
.rl-bags.is-1 .b0 { left: 15%; top: 15%; bottom: auto; width: 70%; height: 70%; }
.rl-bags.is-2 .b0 { left: 0; top: 22%; bottom: auto; width: 55%; height: 55%; }
.rl-bags.is-2 .b1 { right: 0; top: 22%; bottom: auto; width: 55%; height: 55%; }
.rl-gold-art .rl-bags.is-1 .b0 { width: 70%; height: 70%; }
.rl-bags.is-inline { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; }
.rl-bags.is-inline img { filter: none; }
.rl-coin-art img { width: 60%; height: 60%; image-rendering: pixelated; animation: coin-spin 1.2s ease-in-out infinite alternate; }
.rl-coin-art b { position: absolute; bottom: 0.6rem; right: 0.8rem; font-size: 1.6rem; color: var(--gold); text-shadow: 0 0.15rem 0 #000; }
@keyframes coin-spin { from { transform: scale(0.95) rotateY(0); } to { transform: scale(1.05) rotateY(25deg); } }
.rl-card.is-coins { border-color: var(--gold); box-shadow: 0 0 3rem -0.2rem var(--gold); }

/* Sin monedas para la tirada: botón en rojo que lleva a comprarlas */
.rl-spin.is-poor { opacity: 1; background: linear-gradient(180deg, #c43b3b, #8a1f1f); border-color: #ff8080; color: #fff; animation: poor-pulse 1.4s ease-in-out infinite; }
.rl-spin.is-poor small img { filter: none; }
@keyframes poor-pulse { 50% { box-shadow: 0 0 1.1rem -0.2rem #ff5a5a; } }
.rl-poor { color: #ff9c9c; font-size: 0.85rem; }
.rl-prize.is-owned { opacity: 0.55; border-style: dashed; }
.rl-prize.is-owned em { color: #8dffaa; }
.rl-prize-img { width: 3.6rem; height: 3.6rem; object-fit: contain; image-rendering: pixelated; }

/* La ruleta va sola, sin lista de premios al lado */
.roulette-popup { width: min(40rem, 100%); }
.roulette-popup .rl-layout { grid-template-columns: 1fr; }

/* El premio se colorea justo cuando su rodillo se para */
.reel-strip.is-rolling .reel-cell.is-win img.is-shadow { animation: reel-unshadow 0.35s ease-out var(--d) forwards; }
@keyframes reel-unshadow { to { filter: none; opacity: 1; } }
.reel-cell.is-win img:not(.is-shadow) { filter: drop-shadow(0 0 4px rgba(255, 211, 77, 0.8)); }

/* ------------------------------------------------------------ online: salas y amigos */
.btn-online { border-color: #3fa7d6; background: url("../assets/ui/icons/online.gif") center / 125% auto no-repeat, #1b2a38; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.online-popup { width: min(54rem, 100%); max-width: none; max-height: 92vh; overflow: auto; position: relative; text-align: left; align-items: stretch; }
.on-count { font-size: 0.8rem; color: var(--muted); font-weight: 400; margin-left: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.on-layout { display: grid; grid-template-columns: 1fr 17rem; gap: 1.2rem; align-items: start; }
.on-main { position: relative; min-width: 0; }
.on-main h3, .on-friends h3 { margin: 0.2rem 0 0.7rem; }
.on-friends h4 { margin: 0.9rem 0 0.4rem; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.on-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.on-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 8.2rem; padding: 0.7rem 0.4rem; border-radius: 0.7rem; border: 2px solid var(--panel-border); background: var(--panel-2); text-align: center; color: inherit; font: inherit; }
.on-slot b { font-size: 0.9rem; overflow-wrap: anywhere; }
.on-slot.is-me { border-color: var(--gold); }
.on-slot.is-pending { opacity: 0.7; border-style: dashed; }
.on-slot.is-empty { border-style: dashed; background: transparent; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.on-slot.is-empty:hover:not(:disabled) { border-color: #3fa7d6; transform: translateY(-2px); }
.on-slot.is-empty:disabled { cursor: not-allowed; opacity: 0.45; }
.on-plus { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid #3fa7d6; color: #6cc7ef; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.on-slot .on-dot { position: absolute; top: 0.5rem; left: 0.5rem; }
.on-avatar { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(160deg, #6b5536, #3b2f22); border: 2px solid var(--panel-border-light); font-weight: 700; color: var(--gold); }
.on-row .on-avatar { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; }
.on-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #6b6458; }
.on-dot.is-on { background: #4cd964; box-shadow: 0 0 0.4rem #4cd964; }
.on-kick { position: absolute; top: 0.25rem; right: 0.35rem; border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0.2rem; }
.on-kick:hover { color: #ff6b6b; }
.on-row .on-kick { position: static; margin-left: auto; }
.on-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.on-note { text-align: center; font-size: 0.85rem; }
.on-friends { border-left: 2px solid var(--panel-border); padding-left: 1rem; min-width: 0; }
.on-add { display: flex; gap: 0.4rem; }
.on-add input { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 0.5rem; border: 2px solid var(--panel-border); background: #1b1712; color: inherit; font: inherit; }
.on-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.on-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-row.is-out b { flex: 0 1 auto; }
.on-invites { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.on-invite { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 0.6rem; background: rgba(63, 167, 214, 0.15); border: 2px solid #3fa7d6; animation: on-pulse 1.6s ease-in-out infinite alternate; }
.on-invite span { flex: 1; }
@keyframes on-pulse { from { box-shadow: 0 0 0 rgba(63, 167, 214, 0); } to { box-shadow: 0 0 0.8rem rgba(63, 167, 214, 0.55); } }
.on-picker { position: absolute; inset: 2.2rem 0 auto 0; z-index: 2; max-height: 22rem; overflow: auto; padding: 0.8rem; border-radius: 0.8rem; background: var(--panel); border: 2px solid #3fa7d6; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.6); }
.on-picker header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
@media (max-width: 720px) {
  .on-layout { grid-template-columns: 1fr; }
  .on-friends { border-left: 0; padding-left: 0; border-top: 2px solid var(--panel-border); padding-top: 0.8rem; }
  .on-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.online-popup .btn:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }

/* Tirada diaria con gold en las ruletas */
.rl-gold-spin { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 0.5rem; }
.rl-spin.is-gold { background: linear-gradient(180deg, #fff1a8, #e3a92c); color: #3a2706; border-color: #8a5a10; }
.rl-spin.is-gold small { display: inline-flex; align-items: center; gap: 0.25rem; }
.rl-spin.is-gold:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
.rl-gold-left { color: var(--muted); font-size: 0.8rem; text-align: center; }
.rl-none { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.2rem; font-weight: 900; color: #b33a3a; text-shadow: 0 0.1rem 0 #000; }
.reel-cell.is-none { opacity: 0.85; }
.rl-card.is-nothing .rl-none { font-size: 4rem; }

/* Comprar tickets por cantidad */
.ticket-row { flex-wrap: wrap; row-gap: 0.4rem; }
.qty-picker { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.qty-input { width: 3.6rem; padding: 0.3rem 0.35rem; border-radius: 0.4rem; border: 2px solid var(--panel-border); background: #1b1712; color: inherit; font: inherit; text-align: center; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { min-width: 1.9rem; padding-inline: 0.4rem; }
.qty-chip { padding-inline: 0.45rem; font-size: 0.78rem; }
.qty-chip.is-active { border-color: var(--gold); color: var(--gold); }
.ticket-buy { display: flex; gap: 0.35rem; margin-left: auto; }
.popup-box.is-tickets { width: min(40rem, 100%); }
.on-slot.is-filled { border-color: color-mix(in srgb, var(--voc) 70%, var(--panel-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--voc) 18%, var(--panel-2)), var(--panel-2)); }
.on-slot.is-me { box-shadow: 0 0 0 2px var(--gold) inset; }
.on-char { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 0.6rem; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--voc) 35%, transparent), transparent 70%); }
.on-char img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.on-voc { color: var(--voc); font-weight: 700; }
.on-slot { min-height: 10.5rem; }
.ticket-row .shop-text { flex: 0 0 9.5rem; }

/* Eventos globales (oro x2 / experiencia x2) */
.event-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
.event-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem 0.25rem 0.3rem; border-radius: 999px; border: 2px solid var(--gold); background: rgba(245, 197, 66, 0.15); font-size: 0.9rem; animation: on-pulse 1.4s ease-in-out infinite alternate; }
.event-chip.is-xp { border-color: #8dff8a; background: rgba(141, 255, 138, 0.12); }
.event-chip img { width: 1.6rem; height: 1.6rem; image-rendering: pixelated; }
.event-chip small { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.event-chip.is-xp small { color: #8dff8a; }
.event-chip.is-hud { padding: 0.1rem 0.5rem 0.1rem 0.15rem; font-size: 0.8rem; }
.event-chip.is-hud img { width: 1.2rem; height: 1.2rem; }
.admin-events { display: inline-flex; gap: 0.4rem; }
.admin-event { display: inline-flex; align-items: center; gap: 0.3rem; }
.admin-event img { width: 1.3rem; height: 1.3rem; image-rendering: pixelated; }
.btn-online-icon { width: 1.6rem; height: 1.6rem; vertical-align: middle; margin-right: 0.35rem; image-rendering: pixelated; }
.hud-blessing img { width: 1.2rem; height: 1.2rem; vertical-align: middle; image-rendering: pixelated; }
.event-admin h2 { display: flex; align-items: center; gap: 0.5rem; }
.event-admin h2 img { width: 2rem; height: 2rem; image-rendering: pixelated; }
.event-admin h4 { margin: 0.8rem 0 0.35rem; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ev-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ev-opt.is-active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0.5rem rgba(245, 197, 66, 0.4); }
.ev-effect { margin: 0.9rem 0; padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: rgba(245, 197, 66, 0.1); border: 1px solid rgba(245, 197, 66, 0.35); font-size: 0.9rem; }
.ev-effect.is-bad { background: rgba(255, 90, 74, 0.12); border-color: rgba(255, 90, 74, 0.5); }

/* Carta del personaje del inicio: nombre, imagen, stats, récord y Equipo / Outfit / Mejoras dentro */
.voc-hero { cursor: default; }
.voc-hero:hover { transform: none; }
.voc-hero-img { display: grid; place-items: center; padding: 0.2rem; border: 0; border-radius: 0.6rem; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--voc) 25%, transparent), transparent 70%); cursor: pointer; transition: transform 0.15s; }
.voc-hero-img:hover { transform: translateY(-2px) scale(1.04); }
.voc-hero-img:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.voc-hero-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; width: 100%; margin-top: var(--space-2); }
.voc-hero-actions .btn { width: 100%; justify-content: center; }
.btn-change-voc { border-color: var(--gold); }
.ticket-bar { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
@media (max-width: 480px) { .account-bar { justify-content: center; } .ticket-bar { justify-content: center; } }
.shop-admin select { width: 11rem; padding: 0.35rem 0.5rem; border-radius: 0.4rem; border: 2px solid var(--panel-border); background: #1b1712; color: inherit; font: inherit; }
.mode-pill.is-3d .beta { font-size: 0.65rem; padding: 0.05rem 0.35rem; border-radius: 999px; background: #3fa7d6; color: #04121b; margin-left: 0.25rem; vertical-align: middle; }

/* ---------- Partida en grupo y desafíos ---------- */
.hud-group { position: absolute; left: var(--space-3, 12px); top: 86px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.hud-mate { background: rgba(10, 8, 6, 0.72); border: 1px solid var(--panel-border); border-radius: 6px; padding: 3px 8px; min-width: 120px; font-size: 0.8rem; }
.hud-mate b { margin-right: 6px; }
.hud-mate small { color: var(--muted); }
.hud-mate .bar { height: 5px; margin-top: 2px; background: #2a1a1a; border-radius: 3px; overflow: hidden; }
.hud-mate .bar span { display: block; height: 100%; background: #3fbf3f; }
.hud-mate.is-dead { opacity: 0.45; }
.hud-mate.is-blue { border-color: #5fb0ff; }
.hud-mate.is-red { border-color: #ff6b6b; }
.on-setup { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.on-setup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.on-setup-row > span { min-width: 3.5rem; font-size: 0.85rem; }
.on-challenges { margin-top: 14px; border-top: 1px solid var(--panel-border); padding-top: 10px; }
.ch-card { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ch-card header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ch-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
@media (max-width: 34rem) { .ch-sides { grid-template-columns: 1fr; } }
.ch-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch-side.is-mine { outline: 1px dashed var(--gold); outline-offset: 3px; border-radius: 4px; }
.ch-vs { align-self: center; font-weight: 700; color: var(--gold); }
.ch-stake { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-item { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; background: rgba(255, 255, 255, 0.06); border-radius: 4px; padding: 2px 6px; }
.ch-item img { width: 20px; height: 20px; }
.ch-warn { color: var(--danger); font-size: 0.85rem; margin: 0; }
.ch-editor { display: flex; flex-direction: column; gap: 8px; }
.ch-depot { display: flex; flex-wrap: wrap; gap: 4px; max-height: 180px; overflow-y: auto; }
.ch-pick { width: 52px; height: 52px; display: grid; place-items: center; background: var(--bg-2); border: 2px solid var(--panel-border); border-radius: 6px; cursor: pointer; padding: 2px; }
.ch-pick img { width: 30px; height: 30px; }
.ch-pick small { font-size: 0.6rem; color: var(--muted); }
.ch-pick.is-on { border-color: var(--gold); background: rgba(255, 211, 77, 0.15); }
.ch-gold input { width: 8rem; font: inherit; padding: 4px 6px; background: var(--bg-2); color: var(--text); border: 1px solid var(--panel-border); border-radius: 4px; }

/* Desafío */
.btn-challenge { border-color: #d65a3f; background: url("../assets/ui/icons/challenge_bg.png") center / 125% auto no-repeat, #381b1b; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.challenge-popup { max-width: 760px; }
.ch-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; margin-top: 10px; }
.ch-type-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 14px; background: rgba(0, 0, 0, 0.25); border: 2px solid var(--panel-border); border-radius: 10px; color: var(--text); font: inherit; cursor: pointer; }
.ch-type-card:hover, .ch-type-card:focus-visible { border-color: var(--gold); background: rgba(255, 211, 77, 0.08); }
.ch-type-card b { font-size: 1.15rem; }
.ch-type-icon { font-size: 2.2rem; line-height: 1; }
.ch-setup { display: flex; flex-direction: column; gap: 10px; }
.ch-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ch-setup .on-setup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ch-setup .on-setup-row > .muted:first-child { min-width: 3.5rem; }
.ch-type { color: var(--gold); }
.challenge-popup { max-height: 92vh; overflow-y: auto; }

.btn-survival { border-color: #f2c14e; background: url("../assets/ui/icons/survival_bg.png") center / 125% auto no-repeat, #3a2f12; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.voc-hero { position: relative; }
.voc-swap { position: absolute; top: 8px; right: 8px; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; padding: 0; font: inherit; font-size: 1.25rem; line-height: 1; color: var(--gold); background: rgba(0, 0, 0, 0.45); border: 2px solid var(--gold); border-radius: 8px; cursor: pointer; z-index: 2; }
.voc-swap:hover, .voc-swap:focus-visible { background: rgba(255, 211, 77, 0.2); }

/* Pantalla de carga: Lattice Loader en el centro */
.loading-screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: 16px; text-align: center; }
.lattice { display: inline-flex; align-items: center; gap: 12px; color: #f5f5f5; font-size: 1.15rem; }
.lattice-grid { display: grid; grid-template-columns: repeat(3, 9px); gap: 3px; }
.lattice-grid i { width: 9px; height: 9px; border-radius: 50%; background: #f5f5f5; opacity: 0.15; animation: lattice-wave 720ms linear infinite; }
.lattice-grid i.is-core { animation: none; opacity: 0.15; }
@keyframes lattice-wave { 0% { opacity: 1; } 12% { opacity: 1; } 45% { opacity: 0.35; } 70%, 100% { opacity: 0.15; } }
.lattice-label { font-weight: 600; letter-spacing: 0.01em; }
.lattice-time { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8em; color: #9b9b9b; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: left; }
@media (prefers-reduced-motion: reduce) { .lattice-grid i { animation-duration: 2s; } }

/* Depot: paneles tipo Accordion Gallery */
.depot-popup { width: min(64rem, 100%); max-width: 64rem; }
.depot-popup .acc-gallery { width: 100%; align-self: stretch; }
.depot-title-icon { width: 2rem; height: 2rem; image-rendering: pixelated; vertical-align: middle; margin-right: 0.4rem; }
.acc-gallery { display: flex; gap: 10px; height: clamp(16rem, 52vh, 26rem); perspective: 900px; margin-top: 10px; }
.acc-panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; padding: 0; cursor: pointer; font: inherit; color: #fff;
  border: 2px solid color-mix(in srgb, var(--hue) 55%, #000); border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 35%, color-mix(in srgb, var(--hue) 70%, #fff 10%), color-mix(in srgb, var(--hue) 35%, #0b0907) 70%);
  filter: grayscale(1) brightness(0.6);
  transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
}
.acc-panel.is-default, .acc-panel:hover, .acc-panel:focus-visible { flex-grow: 5; filter: none; transform: none; }
.acc-gallery:hover .acc-panel.is-default:not(:hover), .acc-gallery:focus-within .acc-panel.is-default:not(:focus-visible):not(:hover) { flex-grow: 1; filter: grayscale(1) brightness(0.6); }
/* Los paneles a los lados del abierto se inclinan un poco hacia él */
.acc-panel:has(~ .acc-panel:hover), .acc-panel:has(~ .acc-panel:focus-visible) { transform: rotateY(12deg); }
.acc-panel:hover ~ .acc-panel, .acc-panel:focus-visible ~ .acc-panel, .acc-gallery:not(:hover):not(:focus-within) .acc-panel.is-default ~ .acc-panel { transform: rotateY(-12deg); }
.acc-panel:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.acc-art { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transform: scale(1.25) translateY(-6%); }
.acc-art img { width: 7rem; height: 7rem; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.acc-panel.is-default .acc-art, .acc-panel:hover .acc-art, .acc-panel:focus-visible .acc-art { transform: scale(1) translateY(-8%); }
.acc-gallery:hover .acc-panel.is-default:not(:hover) .acc-art { transform: scale(1.25) translateY(-6%); }
.acc-tab { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-weight: 700; font-size: 1rem; white-space: nowrap; text-shadow: 0 1px 2px #000; transition: opacity 0.25s; }
.acc-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-align: left;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent); opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.4s; }
.acc-caption b { font-size: 1.35rem; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.acc-caption small { color: #e8e2d6; }
.acc-panel.is-default .acc-caption, .acc-panel:hover .acc-caption, .acc-panel:focus-visible .acc-caption { opacity: 1; transform: none; transition-delay: 0.15s; }
.acc-panel.is-default .acc-tab, .acc-panel:hover .acc-tab, .acc-panel:focus-visible .acc-tab { opacity: 0; }
.acc-gallery:hover .acc-panel.is-default:not(:hover) .acc-caption { opacity: 0; transition-delay: 0s; }
.acc-gallery:hover .acc-panel.is-default:not(:hover) .acc-tab { opacity: 1; }
.acc-badge { position: absolute; top: 10px; right: 10px; }
@media (max-width: 40rem) {
  .acc-gallery { flex-direction: column; height: auto; perspective: none; }
  .acc-panel, .acc-panel:hover, .acc-panel.is-default { flex: none !important; height: 4.5rem; transform: none !important; filter: none !important; }
  .acc-art { transform: none !important; justify-content: start; padding-left: 12px; }
  .acc-art img { width: 3rem; height: 3rem; }
  .acc-tab { display: none; }
  .acc-caption, .acc-gallery:hover .acc-panel.is-default:not(:hover) .acc-caption { opacity: 1 !important; transform: none; inset: 0 0 0 4.5rem; justify-content: center; background: none; }
  .acc-caption b { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .acc-panel, .acc-art, .acc-caption { transition: none; } }

/* Guild */
.guild-popup { max-width: 40rem; }
.guild-head-actions { display: flex; gap: 6px; }
.guild-create { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.guild-create input { flex: 1 1 12rem; font: inherit; padding: 6px 8px; background: var(--bg-2); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; }
.guild-members { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.guild-friends { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* Carta del personaje (estilo carta coleccionable): el marco lleva el color de la rareza */
.tcard { position: relative; width: min(20rem, 100%); padding: 9px; border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rar) 92%, #fff 8%), color-mix(in srgb, var(--rar) 55%, #000) 55%, color-mix(in srgb, var(--rar) 85%, #fff 15%));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px color-mix(in srgb, var(--rar) 35%, transparent); }
.tcard { perspective: 1400px; }
.tcard-flip { position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 1.2, 0.4, 1); }
.tcard.is-flipped .tcard-flip { transform: rotateY(180deg); }
.tcard-face { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 12px; border-radius: 11px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 14%, #2c241c), #1d1813); text-align: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tcard-back { position: absolute; inset: 0; transform: rotateY(180deg); cursor: pointer; text-align: left; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 22%, #2c241c), #17130f); }
.tcard-back-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--rar) 50%, transparent); }
.tcard-back-pic { width: 3.6rem; height: 3.6rem; flex: none; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--rar);
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--voc) 35%, #000), #0d0b09); }
.tcard-back-pic img { width: 3.3rem; height: 3.3rem; image-rendering: pixelated; }
.tcard-back-title { display: flex; flex-direction: column; min-width: 0; }
.tcard-back-title b { font-size: 1.2rem; color: #fff; text-shadow: 0 1px 0 #000; }
.tcard-back-title small { color: #d8cdb8; font-size: 0.75rem; }
.tcard-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tcard-stats li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.28); font-size: 0.85rem; }
.tcard-stats li span { color: #d8cdb8; white-space: nowrap; }
.tcard-stats li b { color: #fff; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-back-hint { text-align: center; color: var(--muted); font-size: 0.7rem; }
@media (prefers-reduced-motion: reduce) { .tcard-flip { transition: none; } }
.tcard-head { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px; text-align: left; }
.tcard-class { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cls) 60%, #fff 25%), var(--cls) 60%, color-mix(in srgb, var(--cls) 60%, #000));
  border: 2px solid rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.tcard-class img { width: 1.6rem; height: 1.6rem; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000); }
.tcard-power { display: flex; flex-direction: column; line-height: 1; }
.tcard-power small { font-size: 0.55rem; letter-spacing: 0.08em; color: #d8cdb8; }
.tcard-power b { font-size: 1.15rem; color: #fff; text-shadow: 0 1px 0 #000; }
.tcard-name { font-size: 1.2rem; font-weight: 700; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.tcard-rarity { font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: #111; background: var(--rar); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); white-space: nowrap; }
.tcard-art { position: relative; aspect-ratio: 1 / 1.08; display: grid; place-items: center; border-radius: 6px; overflow: hidden;
  background-size: cover; background-position: center; image-rendering: pixelated;
  border: 3px solid color-mix(in srgb, var(--rar) 70%, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.45); }
.tcard-art .voc-hero-img { background: radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.35), transparent 65%); }
.tcard-art .voc-sprite { width: 9rem; height: 9rem; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6)); }
.tcard-art .voc-swap { top: 6px; right: 6px; }
.tcard-class-tag { position: absolute; left: 6px; bottom: 6px; font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; background: color-mix(in srgb, var(--cls) 80%, #000); text-shadow: 0 1px 0 #000; }
.tcard .voc-stats { color: #eadfca; }
/* Brillo holográfico para épicas y legendarias */
.tcard.rarity-epic .tcard-art::after, .tcard.rarity-legendary .tcard-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.35;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, color-mix(in srgb, var(--rar) 60%, transparent) 50%, transparent 65%); background-size: 250% 250%; animation: tcard-holo 5s ease-in-out infinite; }
@keyframes tcard-holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .tcard .tcard-art::after { animation: none; } }

/* Rankings */
.btn-ranking { border-color: #c9a23a; }
.ranking-popup { width: min(46rem, 100%); }
.rk-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rk-chip { font: inherit; font-size: 0.85rem; padding: 4px 12px; border-radius: 999px; cursor: pointer; color: var(--text); background: rgba(0, 0, 0, 0.3); border: 2px solid var(--panel-border); }
.rk-chip.is-on { color: var(--gold); border-color: var(--gold); background: rgba(255, 211, 77, 0.12); }
.rk-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rk-search { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: 0.85rem; padding: 5px 10px; border-radius: 8px; color: var(--text); background: var(--bg-2); border: 2px solid var(--panel-border); }
.rk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rk-item { display: grid; grid-template-columns: 1.6rem 1.8rem 2.6rem 1fr auto; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--panel-border); }
.rk-item.is-me { border-color: var(--gold); background: rgba(255, 211, 77, 0.08); }
.rk-trophy { font-size: 1.1rem; text-align: center; }
.rk-trophy.rk-2 { filter: grayscale(1) brightness(1.35); }
.rk-trophy.rk-3 { filter: sepia(1) hue-rotate(-25deg) saturate(1.6) brightness(0.85); }
.rk-pos { font-weight: 700; color: var(--gold); }
.rk-icon img { width: 2.4rem; height: 2.4rem; image-rendering: pixelated; }
.rk-who { display: flex; flex-direction: column; min-width: 0; }
.rk-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-who small { color: var(--muted); font-size: 0.75rem; }
.rk-time { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-empty { text-align: center; padding: 20px 0; }
@media (max-width: 30rem) { .rk-item { grid-template-columns: 1.4rem 2.2rem 1fr auto; } .rk-trophy { display: none; } .rk-time { font-size: 1.05rem; } }

/* Eventos del admin */
.btn-admin-events { border-color: #d65a5a; }
.acc-art img[src$=".gif"], .acc-art img[src$=".png"] { image-rendering: pixelated; }
.give-popup { width: min(40rem, 100%); }
.give-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 8px; margin: 6px 0 12px; }
.give-kind { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; font: inherit; color: var(--text); cursor: pointer; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 2px solid var(--panel-border); }
.give-kind img { width: 2.6rem; height: 2.6rem; image-rendering: pixelated; }
.give-kind small { font-size: 0.75rem; text-align: center; }
.give-kind.is-on { border-color: var(--gold); background: rgba(255, 211, 77, 0.12); }
.give-kind:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.give-sc { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; display: inline-grid; place-items: center; }
.give-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.give-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.give-form input { font: inherit; padding: 6px 8px; background: var(--bg-2); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; }
.give-form .btn { display: inline-flex; align-items: center; gap: 6px; }
.give-form .btn img, .give-form .btn .sc-coin { width: 1.4rem; height: 1.4rem; font-size: 0.8rem; }
@media (max-width: 34rem) { .give-form { grid-template-columns: 1fr; } }

/* Paneles con suelo de fondo (mapas) y bloqueados */
.acc-bg { position: absolute; inset: 0; background-image: var(--bg); background-size: 64px 64px; image-rendering: pixelated; opacity: 0.5; }
.acc-panel:has(.acc-bg) { background-blend-mode: normal; }
.acc-panel.is-locked .acc-art img { filter: brightness(0.25) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.acc-lock { position: absolute; font-style: normal; font-size: 2.2rem; text-shadow: 0 2px 4px #000; }
.acc-art { position: absolute; }
.play-popup .acc-gallery { height: clamp(16rem, 50vh, 24rem); }

/* Gold y SC en corto: al pasar por encima se ve la cifra entera y el contador crece un momento */
.num-badge { transition: transform 0.18s ease; transform-origin: center; cursor: default; }
.num-swap .num-full { display: none; }
.num-badge:hover, .num-badge:focus-visible { transform: scale(1.15); z-index: 5; position: relative; }
.num-badge:hover .num-short, .num-badge:focus-visible .num-short { display: none; }
.num-badge:hover .num-full, .num-badge:focus-visible .num-full { display: inline; }

/* Battle Pass */
.btn-pass { border-color: #e0913a; background: linear-gradient(135deg, #5a3a12, #2a1d10 60%, #5a3a12); }
.pass-popup { width: min(60rem, 100%); }
.bp-top { display: flex; flex-direction: column; gap: 6px; }
.bp-level b { font-size: 1.4rem; color: var(--gold); }
.bp-progress { position: relative; height: 1.3rem; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--panel-border); overflow: hidden; }
.bp-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #d4952a, #f2c14e); }
.bp-progress small { position: relative; display: block; text-align: center; font-size: 0.75rem; line-height: 1.3rem; text-shadow: 0 1px 0 #000; }
.bp-track-wrap { display: grid; grid-template-columns: auto 1fr; gap: 6px; margin-top: 10px; }
.bp-rows { display: grid; grid-template-rows: 1.4rem 5.6rem 6.4rem; gap: 6px; align-items: center; font-weight: 700; font-size: 0.85rem; }
.bp-rows span:first-child { grid-row: 2; }
.bp-prem { grid-row: 3; color: var(--gold); }
.bp-track { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.bp-col { display: grid; grid-template-rows: 1.4rem 5.6rem 6.4rem; gap: 6px; flex: 0 0 6.2rem; scroll-snap-align: start; }
.bp-col.is-current .bp-lvl { background: var(--gold); color: #111; }
.bp-lvl { text-align: center; font-weight: 700; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font-size: 0.8rem; line-height: 1.4rem; }
.bp-cell { position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 3px 5px; padding: 4px; font: inherit; font-size: 0.72rem; color: var(--text);
  border-radius: 8px; border: 2px solid var(--panel-border); background: rgba(0, 0, 0, 0.3); opacity: 0.55; cursor: default; }
.bp-cell.is-reached { opacity: 1; border-color: var(--gold); background: rgba(255, 211, 77, 0.12); cursor: pointer; }
.bp-cell.is-done { opacity: 0.6; border-color: #3fbf4f; background: rgba(63, 191, 79, 0.12); }
.bp-cell.is-locked { filter: grayscale(0.8); }
.bp-cell:disabled { cursor: default; }
.bp-gold { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; flex-basis: 100%; justify-content: center; }
.bp-ticket { display: inline-flex; align-items: center; gap: 1px; }
.bp-ticket img { width: 1.3rem; height: 1.3rem; image-rendering: pixelated; }
.bp-check { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 0.8rem; }

/* Bestiary */
.bestiary-popup { width: min(60rem, 100%); }
.bst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 8px; margin-top: 10px; }
.bst-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 10px; border: 2px solid var(--panel-border); background: rgba(0, 0, 0, 0.3); text-align: center; }
.bst-card img { width: 3rem; height: 3rem; image-rendering: pixelated; }
.bst-card b { font-size: 0.8rem; line-height: 1.1; min-height: 2em; display: grid; place-items: center; }
.bst-card small { font-size: 0.7rem; color: var(--muted); }
.bst-card.is-unknown img { filter: brightness(0); opacity: 0.5; }
.bst-card.stage-3 { border-color: var(--gold); background: rgba(255, 211, 77, 0.1); }
.bst-stars i { font-style: normal; color: #4a4038; }
.bst-stars i.on { color: var(--gold); }
.bst-bar { width: 100%; height: 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.bst-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf4f, #f2c14e); }

/* Prey */
.prey-popup { width: min(56rem, 100%); }
.prey-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; margin-top: 8px; }
.prey-slot { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--panel-border); background: rgba(0, 0, 0, 0.3); min-height: 14rem; }
.prey-slot.is-locked { opacity: 0.6; }
.prey-slot header { display: flex; justify-content: space-between; align-items: center; }
.prey-active { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.prey-active img { width: 4rem; height: 4rem; image-rendering: pixelated; }
.prey-bonus { font-weight: 700; color: var(--gold); }
.prey-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.prey-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; font: inherit; color: var(--text); cursor: pointer; border-radius: 8px; border: 2px solid var(--panel-border); background: rgba(0, 0, 0, 0.3); }
.prey-opt:hover, .prey-opt:focus-visible { border-color: var(--gold); }
.prey-opt img { width: 2.6rem; height: 2.6rem; image-rendering: pixelated; }
.prey-opt small { font-size: 0.72rem; }
.prey-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: auto; }
.prey-lock { flex: 1; display: grid; place-items: center; text-align: center; }

/* Sets de equipo */
.sets-block { margin-top: 10px; }
.sets-block h3 { margin: 0 0 6px; }
.set-row { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; margin-bottom: 6px; border-radius: 8px; border: 1px solid var(--panel-border); background: rgba(0, 0, 0, 0.25); font-size: 0.8rem; }
.set-row.is-active { border-color: #3fbf4f; }
.set-items { display: flex; gap: 4px; }
.set-items img { width: 1.8rem; height: 1.8rem; image-rendering: pixelated; opacity: 0.35; filter: grayscale(1); }
.set-items img.on { opacity: 1; filter: none; }
.set-on { color: #6fdc7a; font-weight: 700; }

/* Rashid y raids */
.rashid-popup { width: min(36rem, 100%); }
.rashid-item { width: 2rem; height: 2rem; image-rendering: pixelated; }
.raid-popup { width: min(44rem, 100%); }
.raid-kinds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.raid-popup h4 { margin: 10px 0 6px; }
.event-chip.is-raid { border-color: #d65a5a; background: rgba(214, 90, 90, 0.2); }
@media (max-width: 34rem) { .raid-kinds { grid-template-columns: repeat(3, 1fr); } }

/* Personajes: cabecera en una línea y ficha de la derecha sin scroll (el botón Elegir siempre a la vista) */
.mon-head { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.mon-head .mon-filters { flex: 1; }
.mon-head-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.mon-detail { gap: 6px; padding: var(--space-3); }
.mon-portrait { position: relative; aspect-ratio: auto; height: clamp(11rem, 30vh, 16rem); }
.mon-portrait img { width: auto; height: 78%; }
.mon-portrait .mon-title { position: absolute; top: 6px; left: 8px; margin: 0; font-size: 1rem; text-align: left; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); text-shadow: 0 1px 0 #000; }
.mon-portrait .mon-dex { position: absolute; bottom: 4px; left: 0; right: 0; margin: 0; font-size: 0.72rem; }
.mon-tag-corner { position: absolute; top: 6px; right: 8px; }
.mon-tags:empty { display: none; }
.mon-stat { font-size: 0.82rem; }
.mon-line { margin: 0; font-size: 0.82rem; }
.mon-detail .mon-spells { flex: 1 1 auto; min-height: 2.5rem; overflow-y: auto; align-content: flex-start; padding-right: 2px; }
.mon-detail .mon-buy { margin-top: auto; flex: none; }
@media (min-width: 52rem) {
  .mon-popup { max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
  .mon-popup .mon-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .mon-popup .mon-grid { contain: none; height: 100%; min-height: 0; }
  .mon-popup .mon-detail { min-height: 0; overflow: hidden; }
}
.mon-portrait.is-puzzle { overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; }
.mon-portrait.is-puzzle svg { height: calc(100% - 3.4rem); width: auto; max-width: 90%; display: block; overflow: hidden; }

/* Ficha dorada y premio sorpresa del pase */
.rl-spin.is-golden { background: linear-gradient(180deg, #ffe27a, #d9a520); border-color: #fff4c4; color: #2a1a05; box-shadow: 0 0 14px rgba(255, 211, 77, 0.5); }
.ticket-badge.is-roulette_gold { border-color: #ffd34d; }
.bp-item { position: relative; display: inline-grid; place-items: center; }
.bp-item img { width: 1.9rem; height: 1.9rem; image-rendering: pixelated; }
.bp-item.is-mystery img { filter: brightness(0); opacity: 0.6; }
.bp-item.is-mystery b { position: absolute; font-size: 1.1rem; color: var(--gold); text-shadow: 0 1px 2px #000; }
.mon-tag.is-druid { background: #2a6a4a; }
.addon-toggle { margin-left: auto; min-width: 5.5rem; }
.addon-toggle.is-on { border-color: #3fbf4f; color: #8fe39a; background: rgba(63, 191, 79, 0.15); }
.depot-row.is-worn { border-style: dashed; }
.worn-by { color: var(--gold); font-weight: 700; }
.tcard-level { background: rgba(0, 0, 0, 0.7); color: var(--gold); font-size: 0.8rem; }

/* Outfits: cada carta mide lo que ocupa (no se estira hasta abajo) y panel de colores */
.outfit-grid { align-items: start; }
.color-panel { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius); border: 2px solid var(--panel-border); background: var(--panel); }
.color-preview { width: 5.5rem; height: 5.5rem; image-rendering: pixelated; flex: none; border-radius: 10px; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.08), transparent 70%); }
.color-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.color-parts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.color-part { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.85rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; color: var(--text); background: rgba(0, 0, 0, 0.3); border: 2px solid var(--panel-border); }
.color-part i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #000; }
.color-part.is-on { border-color: var(--gold); color: var(--gold); }
.color-grid { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 2px; max-width: 34rem; }
.color-sw { aspect-ratio: 1; padding: 0; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 2px; cursor: pointer; }
.color-sw.is-on { outline: 2px solid #fff; outline-offset: 1px; z-index: 1; }
@media (max-width: 34rem) { .color-panel { flex-direction: column; align-items: center; } }

/* Equipo: poder del personaje encima del set */
.equip-power { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 3px 10px; margin: 0 auto 8px; width: fit-content;
  border: 1px solid rgba(255, 211, 77, .45); border-radius: 10px; background: rgba(0, 0, 0, .35); }
.equip-power small { font-size: .65rem; letter-spacing: .12em; color: #d9c48a; }
.equip-power b { font-size: 1.05rem; color: #ffd34d; text-shadow: 0 0 6px rgba(255, 211, 77, .35); }
.power-diff { font-style: normal; font-weight: 700; font-size: .8rem; }
.power-diff.is-up { color: #6dff8a; }
.power-diff.is-down { color: #ff6b5e; }
.item-power { display: inline-block; font-size: .72rem; font-weight: 700; margin-top: 2px; }
.item-power.is-up { color: #6dff8a; }
.item-power.is-down { color: #ff6b5e; }
.item-power.is-same { color: #a9a294; }
.fuse-cards .card.is-disabled { opacity: 0.4; filter: grayscale(0.7); cursor: not-allowed; }
.fuse-full { display: block; font-size: 0.7rem; color: #ff9b8f; font-weight: 700; }
.lock.is-done { color: #6dff8a; }
.lock.done-tick { font-size: 1.6rem; line-height: 1; font-weight: 700; text-shadow: 0 0 6px rgba(109, 255, 138, 0.45); }
/* Tarjetas de mazmorra/arena simétricas: misma altura, el nivel siempre abajo y del mismo alto */
.dungeon-card .dungeon-pager { margin-top: auto; }
.dungeon-head .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dungeon-pager .dungeon-level { min-height: 4.4rem; box-sizing: border-box; }
.dungeon-pager .dungeon-level .dungeon-reward small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Tactics (auto-battler) ---------- */
.btn-tactics { background: linear-gradient(135deg, #3a2a14, #6b4a1c 55%, #3a2a14); border-color: #d9a441; color: #ffe7a8; }
body.in-tactics #ui > #screen { pointer-events: none; background: none; }
body.in-tactics .tac-panel, body.in-tactics .modal { pointer-events: auto; }
.tac-ui { position: fixed; inset: 0; font-size: 0.9rem; }
.tac-panel { position: absolute; background: rgba(20, 16, 12, 0.92); border: 2px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5); }
.tac-top { top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0.8rem; min-height: 58px; }
.tac-round { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tac-round b { color: var(--gold); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-round small { color: var(--muted); }
.tac-progress { display: flex; gap: 3px; align-items: center; margin-top: 2px; }
.tac-dot { width: 10px; height: 10px; border-radius: 50%; background: #3a3127; border: 1px solid #6b5a3a; display: inline-block; }
.tac-dot.is-done { background: #4cd964; border-color: #2c8a3c; }
.tac-dot.is-cur { background: #ffd34d; border-color: #fff; box-shadow: 0 0 6px #ffd34d; }
.tac-dot.is-council { border-radius: 2px; transform: rotate(45deg); }
.tac-sep { color: var(--muted); margin: 0 2px; }
.tac-stats { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.tac-hp { display: flex; align-items: center; gap: 0.4rem; }
.tac-hp-bar, .tac-xp { display: inline-block; width: 90px; height: 9px; background: #000; border-radius: 5px; overflow: hidden; border: 1px solid #5a4a30; }
.tac-hp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e0453a, #4cd964); }
.tac-xp { width: 70px; height: 7px; vertical-align: middle; margin: 0 0.3rem; }
.tac-xp i { display: block; height: 100%; background: #3d8bff; }
.tac-gold { font-weight: 700; color: var(--gold); font-size: 1.1rem; }
.tac-level small { color: var(--muted); }
.tac-streak.is-win { color: #ff9b4a; } .tac-streak.is-loss { color: #7fc8ff; }
.tac-traits { top: 100px; left: 66px; width: 200px; max-height: calc(100% - 100px - var(--tac-fight-bottom, 190px) - 120px); overflow: auto; padding: 0.6rem; }
.tac-traits h3, .tac-opp h3 { color: var(--gold); margin-bottom: 0.4rem; font-size: 1rem; }
.tac-trait { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.3rem 0.35rem; border-radius: 6px; opacity: 0.6; }
.tac-trait.is-on { opacity: 1; background: rgba(255, 211, 77, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 211, 77, 0.35); }
.tac-trait > b { min-width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: #3a3127; color: #fff; }
.tac-trait.is-on > b { background: #c9a23a; color: #1a140c; }
.tac-side { top: 100px; right: 8px; width: 240px; max-height: calc(100% - 100px - var(--tac-fight-bottom, 190px) - 100px); overflow: auto; padding: 0.6rem; }
.tac-opp-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0.4rem 0; }
.tac-opp-list span { position: relative; width: 44px; height: 44px; border-radius: 6px; border: 2px solid var(--cost); background: #221c15; display: grid; place-items: center; }
.tac-opp-list img { width: 38px; height: 38px; }
.tac-opp-list small { position: absolute; bottom: -2px; left: 0; right: 0; text-align: center; font-size: 0.6rem; color: #ffd34d; text-shadow: 0 0 2px #000; }
.tac-help { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.tac-help summary { cursor: pointer; color: var(--text); }
.tac-help ul { padding-left: 1rem; margin: 0.4rem 0 0; }
.tac-unit { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.tac-close { position: absolute; top: -4px; right: -4px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; }
.tac-unit-head { display: flex; gap: 0.5rem; align-items: center; }
.tac-unit-head img { width: 56px; height: 56px; border: 2px solid var(--cost); border-radius: 8px; background: #221c15; }
.tac-unit-head div { display: flex; flex-direction: column; }
.tac-unit-head b { color: var(--gold); }
.tac-unit-head small { color: var(--muted); font-size: 0.75rem; }
.tac-stars { color: #ffd34d; }
.tac-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 0.6rem; margin: 0; font-size: 0.8rem; }
.tac-stat div { display: flex; justify-content: space-between; border-bottom: 1px dashed #3a3127; }
.tac-stat dt { color: var(--muted); } .tac-stat dd { margin: 0; font-weight: 700; }
.tac-ability { font-size: 0.8rem; } .tac-ability b { color: #c07dff; }
.tac-sell-hint { position: fixed; left: 0; right: 0; bottom: 0; height: 184px; display: grid; place-items: center; background: rgba(160, 30, 20, 0.55); color: #fff; font-size: 1.2rem; font-weight: 700; pointer-events: none; z-index: 5; }
.tac-result { text-align: center; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; min-width: 18rem; }
.tac-result.is-win h2 { color: #6dff8a; } .tac-result.is-loss h2 { color: #ff6b5e; }
.tac-dmg { color: #ff6b5e; font-size: 1.4rem; font-weight: 700; }
@media (max-width: 1000px) {
  .tac-traits, .tac-side { width: 150px; font-size: 0.75rem; }
  .tac-trait small { display: none; }
}
@media (max-width: 700px) {
  .tac-traits, .tac-side { display: none; }
  .tac-bottom { grid-template-columns: 1fr; }
  .tac-left { flex-direction: row; flex-wrap: wrap; }
  .tac-card { height: 88px; } .tac-card-art img { width: 40px; height: 40px; }
  .tac-top { flex-wrap: wrap; gap: 0.4rem; }
}

/* ---------- Logo que cambia de juego y menú de Tibia Fight Tactics ---------- */
.logo-switch { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: block; line-height: 0; transition: transform 0.15s ease, filter 0.15s ease; }
.logo-switch:hover { transform: scale(1.04); filter: brightness(1.12); }
.logo-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.tmenu { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.3fr) minmax(14rem, 1fr); gap: var(--space-4); align-items: start; margin-top: var(--space-3); }
.tmenu-panel { background: var(--panel); border: 2px solid var(--panel-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.tmenu-panel h2 { color: var(--gold); font-size: 1.3rem; margin-bottom: 0.5rem; }
.tmenu-panel h3 { color: var(--gold); margin: 0.8rem 0 0.4rem; }
.tmenu-cities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: c; }
.tmenu-cities li { display: flex; flex-direction: column; padding: 0.3rem 0.5rem 0.3rem 2rem; border-radius: 6px; background: var(--bg-2); position: relative; opacity: 0.8; }
.tmenu-cities li::before { counter-increment: c; content: counter(c); position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; background: #3a3127; color: #fff; }
.tmenu-cities li small { color: var(--muted); font-size: 0.75rem; }
.tmenu-cities li.is-done { opacity: 1; box-shadow: inset 0 0 0 1px var(--good); }
.tmenu-cities li.is-done::before { content: '✔'; background: #2c8a3c; }
.tmenu-cities li.is-cur { opacity: 1; box-shadow: inset 0 0 0 2px #ffd34d; }
.tmenu-main { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.tmenu-show { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.tmenu-show span { width: 64px; height: 64px; border: 2px solid var(--cost); border-radius: 10px; background: radial-gradient(circle, #3a2f22, #17120d); display: grid; place-items: center; box-shadow: 0 0 10px color-mix(in srgb, var(--cost) 40%, transparent); }
.tmenu-show img { width: 56px; height: 56px; }
.tmenu-run small { color: var(--muted); }
.tmenu-main .btn-big { min-width: 16rem; }
.tmenu-stats { display: flex; gap: 1.2rem; margin: 0.4rem 0 0; }
.tmenu-stats div { display: flex; flex-direction: column; align-items: center; }
.tmenu-stats dt { color: var(--muted); font-size: 0.8rem; } .tmenu-stats dd { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.tmenu-traits { max-height: 70vh; overflow: auto; }
.tmenu-trait { padding: 0.25rem 0; border-bottom: 1px dashed #3a3127; display: flex; flex-wrap: wrap; gap: 0 0.3rem; align-items: baseline; }
.tmenu-trait small { color: var(--muted); } .tmenu-trait span { width: 100%; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 52rem) { .tmenu { grid-template-columns: 1fr; } .tmenu-main { order: -1; } }

/* Barra de abajo de Tactics (nivel, comprar XP, refrescar, oro, candado y tienda) */
.tac-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); width: min(1000px, calc(100% - 16px)); display: grid; grid-template-columns: 13rem 1fr; gap: 0.6rem; padding: 0.55rem; background: linear-gradient(180deg, rgba(34, 27, 19, 0.97), rgba(18, 14, 10, 0.97)); }
.tac-bottom.is-fighting .tac-left { opacity: 0.5; }
.tac-left { display: flex; flex-direction: column; gap: 0.3rem; justify-content: space-between; }
.tac-lvl { display: flex; align-items: center; gap: 0.55rem; background: #1b1610; border: 1px solid #4a3c26; border-radius: 8px; padding: 0.2rem 0.5rem; }
.tac-lvl > div { display: flex; flex-direction: column; flex: 1; }
.tac-lvl small { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; }
.tac-lvl .tac-xp { width: 100%; margin: 2px 0; height: 8px; }
.tac-hex { width: 2.2rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, #e8b54a, #9a6a1c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); text-shadow: 0 1px 2px #000; }
.tac-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0.2rem 0.6rem; line-height: 1.15; border-radius: 8px; border: 2px solid #6b5a3a; background: linear-gradient(180deg, #3a2e1f, #241c13); color: var(--text); cursor: pointer; text-align: left; }
.tac-btn.is-xp { border-color: #3d8bff; background: linear-gradient(180deg, #1f3358, #142340); }
.tac-btn.is-roll { border-color: #c9a23a; }
.tac-btn:hover:not(:disabled) { filter: brightness(1.15); }
.tac-btn:disabled { opacity: 0.5; cursor: default; }
.tac-btn b { font-size: 0.95rem; }
.tac-btn > span { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--gold); font-weight: 700; }
.tac-btn small { color: var(--muted); font-weight: 400; margin-left: 0.3rem; }
.tac-btn kbd { position: absolute; top: 4px; right: 6px; font: inherit; font-size: 0.7rem; color: #bbb; background: #0006; border: 1px solid #fff3; border-radius: 3px; padding: 0 4px; }
.tac-right { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tac-shop-head { position: relative; display: flex; justify-content: center; align-items: center; min-height: 2rem; }
.tac-goldbox { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1.3rem; line-height: 1.2; font-weight: 700; color: var(--gold); background: #1b1610; border: 2px solid #8a6a2a; border-radius: 8px; padding: 0.05rem 1.4rem; }
.tac-lockbtn { position: absolute; right: 0; top: 0; width: 2.4rem; height: 2.2rem; border-radius: 8px; border: 2px solid #6b5a3a; background: #241c13; cursor: pointer; font-size: 1rem; }
.tac-lockbtn.is-on { border-color: #ffd34d; box-shadow: 0 0 8px #ffd34d88; }
.tac-shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.45rem; }
.tac-card { position: relative; display: block; height: 100px; padding: 0; border-radius: 8px; border: 2px solid var(--cost); background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--cost) 22%, #2e271e), #15110c 75%); cursor: pointer; color: var(--text); overflow: hidden; }
.tac-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 12px var(--cost); }
.tac-card:disabled { cursor: default; }
.tac-card.is-empty { border: 2px dashed #3a3127; background: none; }
.tac-card-art { position: absolute; inset: 0 0 24px 0; display: grid; place-items: center; }
.tac-card-art img { width: 64px; height: 64px; filter: drop-shadow(0 3px 2px #000a); }
.tac-card-traits { position: absolute; top: 4px; left: 4px; display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.tac-card-traits i { font-style: normal; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; font-size: 0.75rem; border-radius: 50%; background: #000a; border: 1px solid #fff4; }
/* Cartas épicas (lila): un brillo especular recorre el borde dando vueltas sin parar. */
@property --tac-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tac-card.is-tier4, .tac-card.is-tier5 { overflow: visible; }
.tac-card.is-tier4 .tac-card-foot { border-radius: 0 0 6px 6px; }
.tac-card.is-tier4::after {
  content: ''; position: absolute; inset: -2px; border-radius: 8px; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--tac-spin), transparent 0deg, #c89bff00 4deg, #c89bffcc 26deg, #ffffff 44deg, #ffffff 58deg, #c89bffcc 76deg, #c89bff00 98deg,
    transparent 180deg, #c89bff00 205deg, #e2ccffaa 228deg, #c89bff00 250deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tac-spin 3s linear infinite; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #c89bff);
}
@keyframes tac-spin { to { --tac-spin: 360deg; } }
/* Cartas legendarias (amarillo): borde eléctrico finito que tiembla, con un halo suave. */
.tac-card.is-tier5 .tac-card-foot { border-radius: 0 0 6px 6px; }
.tac-card.is-tier5::before, .tac-card.is-tier5::after { content: ''; position: absolute; inset: -2px; border-radius: 8px; pointer-events: none; z-index: 3; }
.tac-card.is-tier5::before { border: 2px solid #ffe27a; filter: url(#tac-electric) drop-shadow(0 0 2px #ffd34d); }
.tac-card.is-tier5::after { border: 1px solid #ffd34d55; box-shadow: 0 0 8px #ffd34d66, inset 0 0 6px #ffd34d33; animation: tac-zap 2.4s ease-in-out infinite; }
@keyframes tac-zap { 0%, 100% { opacity: 0.55; } 47% { opacity: 0.9; } 50% { opacity: 0.4; } 53% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tac-card.is-tier4::after, .tac-card.is-tier5::after { animation: none; } }
/* Carta que ya tienes: el borde del color de su tier parpadea. Si al comprarla evoluciona, lo dice la etiqueta. */
.tac-card.is-owned { animation: tac-owned 1s ease-in-out infinite; }
@keyframes tac-owned { 0%, 100% { border-color: var(--cost); box-shadow: 0 0 10px var(--cost), inset 0 0 6px var(--cost); } 50% { border-color: color-mix(in srgb, var(--cost) 25%, #15110c); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .tac-card.is-owned { animation: none; box-shadow: 0 0 10px var(--cost); } }
.tac-card-have.tac-card-evo { line-height: 0.75; text-align: center; font-size: 0.8rem; }
.tac-card-evo.is-star1 { color: #c98a4a; text-shadow: 0 0 2px #3a2410, 0 0 4px #000; }
.tac-card-evo.is-star2 { color: #eef2f8; text-shadow: 0 0 2px #4a5466, 0 0 4px #000; }
.tac-card-evo.is-star3 { color: #ffd34d; text-shadow: 0 0 2px #7a4a00, 0 0 6px #ffd34d; }
.tac-card-have { position: absolute; top: 4px; right: 6px; color: #ffd34d; font-size: 0.7rem; letter-spacing: 1px; z-index: 1; text-shadow: 0 0 3px #000; }
.tac-card-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; padding: 0 0.4rem; background: #000a; border-top: 1px solid color-mix(in srgb, var(--cost) 50%, transparent); }
.tac-card-foot b { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-card-cost { display: inline-flex; align-items: center; font-weight: 700; color: var(--gold); }
.tac-fightbox { position: absolute; left: var(--tac-fight-left, auto); right: var(--tac-fight-right, auto); bottom: var(--tac-fight-bottom, 190px); display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; pointer-events: auto; }
.tac-count { display: flex; align-items: center; gap: 0.4rem; background: rgba(20, 16, 12, 0.92); border: 2px solid #4a6aa8; border-radius: 8px; padding: 0.15rem 0.6rem; color: #cfe0ff; }
.tac-count b { color: #fff; }
.tac-fight { position: static; font: inherit; font-size: 1.1rem; font-weight: 700; color: #fff; padding: 0.4rem 1.1rem; border-radius: 10px; border: 2px solid #ff9a8a; background: linear-gradient(180deg, #e8483b, #a8231a); cursor: pointer; text-shadow: 0 2px 2px #0008; box-shadow: 0 4px 0 #6d140e, 0 6px 14px #0008; }
.tac-fight:hover:not(:disabled) { filter: brightness(1.1); }
.tac-fight:disabled { filter: grayscale(0.6); cursor: default; }

/* Tactics: ficha de rasgo, intereses y racha */
.tac-tip { position: fixed; left: 280px; width: 300px; padding: 0.7rem; z-index: 20; pointer-events: none !important; background: linear-gradient(180deg, #23304f, #182238); border-color: #4a6aa8; }
.tac-tip-head { display: flex; align-items: center; gap: 0.5rem; }
.tac-tip-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-size: 1.1rem; background: #0006; border: 2px solid #8aa6e0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tac-tip-head b { font-size: 1.15rem; flex: 1; }
.tac-tip-count { color: #cfe0ff; font-weight: 700; }
.tac-tip-desc { margin: 0.45rem 0; padding: 0.3rem 0.5rem; background: #3a2a2a; border-radius: 6px; font-size: 0.85rem; }
.tac-tip-steps { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tac-tip-steps li { display: flex; gap: 0.5rem; align-items: center; padding: 0.25rem 0.4rem; border-radius: 5px; background: #0003; color: #aab4c8; font-size: 0.82rem; }
.tac-tip-steps li b { min-width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 1px solid #6a7aa0; border-radius: 4px; color: #fff; }
.tac-tip-steps li.is-on { color: #fff; background: #ffd34d22; }
.tac-tip-steps li.is-on b { background: #ffd34d; color: #1a140c; border-color: #ffd34d; }
.tac-tip-units { display: flex; flex-wrap: wrap; gap: 5px; }
.tac-tip-units > span { position: relative; width: 46px; height: 46px; border: 2px solid var(--cost); border-radius: 6px; background: #0005; display: grid; place-items: center; }
.tac-tip-units > span > img { width: 40px; height: 40px; }
.tac-tip-units > span.is-missing img { filter: grayscale(1) brightness(0.55); }
.tac-tip-units > span.is-missing { border-color: #555; }
.tac-tip-units > span.is-board { box-shadow: 0 0 8px var(--cost); }
.tac-tip-units i { position: absolute; right: -3px; bottom: -3px; font-style: normal; font-size: 0.6rem; font-weight: 700; display: inline-flex; align-items: center; background: #000c; border-radius: 4px; padding: 0 2px; color: var(--gold); }
.tac-eco { position: absolute; right: calc(100% - var(--tac-board-left, 200px) + 12px); top: var(--tac-board-top, 200px); display: flex; pointer-events: auto; }
.tac-eco .tac-hint { left: calc(100% + 8px); bottom: auto; top: 0; }
.tac-fightrow { display: flex; align-items: center; gap: 0.5rem; }
.tac-fightrow .tac-streak { background: rgba(20, 16, 12, 0.92); border: 2px solid #4a3c26; border-radius: 10px; padding: 0.35rem 0.55rem; font-weight: 700; }
.tac-fightrow .tac-hint { left: auto; right: 0; }
/* Objetos: a la izquierda del banquillo */
.tac-item-ghost { position: fixed; width: 40px; height: 40px; transform: translate(-50%, -50%); pointer-events: none; z-index: 100; filter: drop-shadow(0 0 6px #ffd34d); }
.tac-unit-items { display: flex; gap: 6px; }
.tac-unit-items span { width: 40px; height: 40px; border-radius: 6px; border: 2px dashed #4a3c26; display: grid; place-items: center; background: #0005; }
.tac-unit-items span.is-comp { border: 2px solid #8a8a8a; } .tac-unit-items span.is-full { border: 2px solid #ffd34d; }
.tac-unit-items img { width: 32px; height: 32px; }
.tac-item-stats { color: #6dff8a; font-weight: 700; font-size: 0.85rem; }
.tac-recipes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tac-recipes li { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; }
.tac-recipes .tac-item { width: 30px; height: 30px; cursor: default; } .tac-recipes .tac-item img { width: 24px; height: 24px; }
.tac-recipes li > span:last-child { display: flex; flex-direction: column; } .tac-recipes small { color: var(--muted); }
.tac-drop { color: #ffd34d; }
.tac-orbs { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0.35rem 0.3rem; background: rgba(20, 16, 12, 0.85); border: 2px solid #4a3c26; border-radius: 10px; }
.tac-orbs > i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a4030, #1c1710); border: 2px solid #6b5a3a; }
.tac-orbs > i.is-on { background: radial-gradient(circle at 35% 35%, #fff6b0, #ffd34d 45%, #b07a10); border-color: #ffe27a; box-shadow: 0 0 8px #ffd34d; }
.tac-orbs > b { font-size: 0.8rem; color: var(--gold); }
.tac-hover { position: relative; cursor: help; }
.tac-hint { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; width: 15rem; padding: 0.5rem 0.6rem; background: #1b2236; border: 2px solid #4a6aa8; border-radius: 8px; font-size: 0.8rem; color: #cfd6e6; z-index: 30; flex-direction: column; gap: 0.25rem; box-shadow: 0 6px 16px #000a; }
.tac-hint b { color: #fff; }
.tac-hover:hover .tac-hint { display: flex; }
.tac-top .tac-hint { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }

.tac-tip-units i .coin { width: 0.7em; height: 0.7em; margin-right: 1px; }

.tac-dots { display: flex; gap: 3px; margin-left: auto; }
.tac-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a3550; border: 1px solid #4a6aa8; }
.tac-dots i.is-on { background: #7fb2ff; border-color: #cfe0ff; }
.tac-count.is-missing { border-color: #e0453a; color: #ffb3ab; animation: tac-blink 0.9s ease-in-out infinite; }
.tac-count.is-missing .tac-dots i:not(.is-on) { background: #e0453a; border-color: #ff9a8a; }
@keyframes tac-blink { 50% { box-shadow: 0 0 10px #e0453a; background: rgba(90, 20, 15, 0.92); } }
.tac-money { display: inline-flex; align-items: center; gap: 0.4rem; }
.tac-money .tac-streak { background: rgba(20, 16, 12, 0.92); border: 2px solid #4a3c26; border-radius: 10px; padding: 0.2rem 0.5rem; font-weight: 700; }
.tac-income.tac-hint { width: 27rem; left: 50%; transform: translateX(-50%); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; }
.tac-inc { display: flex; flex-direction: column; align-items: center; background: #0006; border: 1px solid #4a6aa8; border-radius: 6px; padding: 0.15rem 0.5rem; }
.tac-inc b { color: #6dff8a; font-size: 1rem; } .tac-inc small { font-size: 0.65rem; color: #aab4c8; }
.tac-inc.is-total { border-color: #ffd34d; } .tac-inc.is-total b { color: #ffd34d; }
.tac-income > i { font-style: normal; color: #cfd6e6; font-weight: 700; }
.tac-income em { width: 100%; font-style: normal; font-size: 0.7rem; color: #aab4c8; white-space: normal; }
.tac-choice { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.tac-choice h2 { color: #fff; font-size: 1.8rem; text-shadow: 0 3px 4px #000; }
.tac-choice-cards { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.tac-choice-card { width: 10.5rem; min-height: 15rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.6rem; border-radius: 12px; border: 3px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #1b2236), #141826); color: #fff; cursor: pointer; box-shadow: 0 8px 20px #000a; }
.tac-choice-card:hover { transform: translateY(-4px); box-shadow: 0 0 18px var(--c); }
.tac-choice-art { height: 5rem; display: grid; place-items: center; }
.tac-choice-art img { width: 64px; height: 64px; }
.tac-choice-emoji { font-size: 3.2rem; }
.tac-choice-card b { font-size: 1.05rem; text-align: center; }
.tac-choice-txt { font-size: 0.8rem; background: #0006; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 8px; padding: 0.3rem 0.5rem; text-align: center; flex: 1; display: grid; place-items: center; }
body.tac-dragging #ui, body.tac-dragging #ui * { pointer-events: none !important; }

/* Objetos pegados al lateral izquierdo (columna como en TFT) */
.tac-items { position: absolute; left: 0; top: 100px; width: 54px; padding: 6px 5px; display: flex; flex-direction: column; gap: 5px; border-radius: 0 10px 10px 0; border-left: 0; z-index: 6; }
.tac-item-wrap { position: relative; display: block; }
.tac-item { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 6px; background: #0007; border: 2px solid #8a8a8a; cursor: grab; touch-action: none; }
.tac-item img { width: 32px; height: 32px; pointer-events: none; }
.tac-item.is-empty { border: 2px solid #2e2619; background: #0b0907; cursor: default; }
.tac-item.is-full { border-color: #ffd34d; box-shadow: 0 0 6px #ffd34d66; }
.tac-item.is-sel { outline: 2px solid #4cd9ff; outline-offset: 1px; }
.tac-items.is-fighting .tac-item { cursor: default; opacity: 0.6; }
.tac-item-wrap:hover .tac-hint { display: flex; }
.tac-item-hint.tac-hint { left: calc(100% + 10px); top: -4px; bottom: auto; width: 17rem; }
/* Puente invisible entre el objeto y su ventana: puedes llevar el ratón a la ventana sin que se cierre. */
.tac-item-hint.tac-hint::before { content: ''; position: absolute; right: 100%; top: 0; width: 14px; height: 56px; }
.tac-recipe-go { all: unset; display: flex; align-items: center; gap: 0.3rem; width: 100%; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; cursor: pointer; }
.tac-recipe-go:hover, .tac-recipe-go:focus-visible { background: #4cd96422; outline: 1px solid #4cd96488; }
.tac-recipe-go > span:last-child { display: flex; flex-direction: column; }
.tac-item-hint.is-recipes { width: 19rem; }
.tac-item-hint small { color: #aab4c8; }
body.tac-dragging .tac-hint { display: none !important; }
/* Rasgos al estilo TFT: hexágono con icono + caja con número, nombre y escalones */
.tac-traits { position: absolute; z-index: 5; pointer-events: auto; top: 100px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; max-height: calc(100vh - 100px - var(--tac-fight-bottom, 200px) - 10px); left: 60px; width: 210px; padding: 0; background: none; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 6px; }
.tac-trait { display: flex; align-items: center; gap: 0; padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; opacity: 1; cursor: pointer; }
.tac-trait-hex { position: relative; z-index: 1; flex: none; width: 2.5rem; height: 2.8rem; display: grid; place-items: center; font-size: 1.05rem; background: #2b2f36; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: grayscale(1) brightness(0.8); }
.tac-trait-hex::before { content: ''; position: absolute; inset: 3px; z-index: -1; background: #15181d; clip-path: inherit; }
.tac-trait.is-on .tac-trait-hex { filter: none; }
.tac-trait.is-bronze .tac-trait-hex { background: linear-gradient(180deg, #c98a52, #7a4a22); }
.tac-trait.is-silver .tac-trait-hex { background: linear-gradient(180deg, #e6ecf2, #8a96a3); }
.tac-trait.is-gold .tac-trait-hex { background: linear-gradient(180deg, #ffe27a, #b07d12); }
.tac-trait.is-on .tac-trait-hex::before { background: #2a1d10; }
.tac-trait-box { margin-left: -0.55rem; padding: 0.2rem 0.6rem 0.2rem 0.85rem; display: flex; align-items: center; gap: 0.55rem; min-width: 0; border-radius: 0 6px 6px 0; background: rgba(20, 22, 26, 0.72); }
.tac-trait:not(.is-on) .tac-trait-box { background: rgba(20, 22, 26, 0.45); color: #9aa0a8; }
.tac-trait-box > b { font-size: 1.05rem; min-width: 0.8rem; text-align: center; color: #fff; background: none; }
.tac-trait-name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.tac-trait-name small { display: flex; gap: 0.2rem; align-items: center; font-weight: 400; color: #8b919a; font-size: 0.72rem; }
.tac-trait-name small i { font-style: normal; opacity: 0.6; }
.tac-trait-name small em { font-style: normal; }
.tac-trait-name small em.is-on { color: #fff; font-weight: 700; }
.tac-trait:hover .tac-trait-box, .tac-trait.is-pinned .tac-trait-box { box-shadow: inset 0 0 0 1px #ffd34d88; }
.tac-traits > .muted { padding: 0.5rem; font-size: 0.8rem; background: rgba(20, 22, 26, 0.6); border-radius: 6px; }
/* Probabilidades de la tienda según el nivel */
.tac-odds { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 0.55rem; font-size: 0.8rem; font-weight: 700; }
.tac-odds span { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--cost); }
.tac-odds i { width: 9px; height: 9px; border-radius: 50%; background: var(--cost); display: inline-block; }
.tac-odds span.is-zero { opacity: 0.4; }

/* Wiki */
.btn-wiki { border-color: #4a8ad6; background: linear-gradient(135deg, #1d3554, #14202f 60%, #1d3554); }
.wiki-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; min-height: 0; flex: 1; }
.wiki-nav { display: flex; flex-direction: column; gap: 0.3rem; overflow: auto; max-height: calc(100vh - 140px); padding-right: 0.3rem; }
.wiki-search { padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--line, #5a4a30); background: #0006; color: inherit; margin-bottom: 0.3rem; font: inherit; }
.wiki-topic { display: flex; align-items: center; gap: 0.55rem; text-align: left; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid transparent; background: #0003; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.wiki-topic span { width: 1.4rem; text-align: center; }
.wiki-topic:hover { background: #ffffff10; }
.wiki-topic.is-on { border-color: var(--gold, #ffd34d); background: rgba(255, 211, 77, 0.12); color: var(--gold, #ffd34d); }
.wiki-page { overflow: auto; max-height: calc(100vh - 140px); padding: 1rem 1.3rem; border-radius: 10px; border: 1px solid var(--line, #5a4a30); background: #0004; line-height: 1.5; }
.wiki-title { display: flex; gap: 0.5rem; align-items: center; font-size: 1.5rem; color: var(--gold, #ffd34d); margin: 0 0 0.6rem; }
.wiki-page h4 { margin: 1.1rem 0 0.4rem; color: #f0d58a; font-size: 1.1rem; }
.wiki-page p { margin: 0.4rem 0; }
.wiki-page ul { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; }
.wiki-page li { margin: 0.25rem 0; }
.wiki-page b { color: #fff; }
.wiki-table-wrap { overflow-x: auto; margin: 0.5rem 0; }
.wiki-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.wiki-table th, .wiki-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid #ffffff1a; text-align: left; vertical-align: top; }
.wiki-table th { color: var(--gold, #ffd34d); background: #0004; }
@media (max-width: 720px) {
  .wiki-layout { grid-template-columns: 1fr; }
  .wiki-nav { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .wiki-search { width: 100%; }
  .wiki-page { max-height: none; }
}

/* Mazmorra completada entera: todos sus objetos en un recuadro con el tick */
.dungeon-pager.is-all-done { display: block; }
.dungeon-all { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; list-style: none; }
.dungeon-all { padding: 0.35rem var(--space-2); }
.dungeon-all-items { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.4rem; align-items: start; }
.dungeon-all-item { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; min-width: 0; }
.dungeon-all-item .item-icon { width: 32px; height: 32px; }
.dungeon-all-item b { font-size: 0.72rem; }
.dungeon-all-item small { font-size: 0.6rem; color: var(--muted); }

/* Tactics: botones del menú y ventanas de objetos y rasgos */
.tmenu-dex { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.tdx-popup { width: min(480px, 96vw); }
.tdx-grid { display: grid; grid-template-columns: repeat(calc(var(--n) + 1), 1fr); gap: 6px; padding: 0.5rem; background: #0005; border-radius: 10px; }
.tdx-corner { display: grid; place-items: center; font-size: 1.4rem; color: var(--muted); }
.tdx-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 3px; border-radius: 8px; border: 2px solid #8a6a2a; background: #1d1810; cursor: pointer; }
.tdx-cell img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.tdx-cell.is-head { border-radius: 50%; border-color: #6a7a9a; background: #23304f; }
.tdx-cell.is-full { border-color: #c9a35a; }
.tdx-cell:hover, .tdx-cell.is-sel { border-color: #fff6d8; box-shadow: 0 0 8px #ffd34d88; }
.tdx-info { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: #0006; border-left: 4px solid #4cd964; min-height: 5.2rem; }
.tdx-info > .tdx-cell { width: 56px; flex: none; cursor: default; }
.tdx-info p { margin: 0.25rem 0 0; }
.tdx-recipe { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.tdx-recipe img { width: 24px; height: 24px; image-rendering: pixelated; }
.ttr-popup { width: min(900px, 96vw); max-height: 90vh; overflow: auto; }
.ttr-group { color: var(--gold); margin: 0.6rem 0 0.4rem; }
.ttr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.ttr-card { padding: 0.6rem; border-radius: 10px; background: #0005; border: 1px solid #ffffff14; display: flex; flex-direction: column; gap: 0.4rem; }
.ttr-card header { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; align-items: center; }
.ttr-card header .tac-trait-hex { grid-row: span 2; filter: none; background: linear-gradient(180deg, #e8b54a, #9a6a1c); }
.ttr-card header small { grid-column: 2; }
.ttr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.ttr-steps li { display: flex; gap: 0.4rem; align-items: center; }
.ttr-steps b { min-width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 4px; background: #3a3127; }
.ttr-units { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ttr-units span { width: 52px; display: flex; flex-direction: column; align-items: center; border-radius: 6px; border: 2px solid var(--cost); background: #0006; padding: 2px; }
.ttr-units img { width: 36px; height: 36px; image-rendering: pixelated; }
.ttr-units small { font-size: 0.55rem; text-align: center; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Iconos de rasgo con imagen (trofeos) */
.trait-img { width: 1.35em; height: 1.35em; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.tac-trait-hex .trait-img { width: 1.5rem; height: 1.5rem; }
.tac-card-traits .trait-img { width: 1.1rem; height: 1.1rem; }
/* Rasgo que ya tienes en el tablero (carta que aún no tienes): el contorno parpadea en blanco. */
.tac-card-traits i.is-match { border-color: #fff; box-shadow: 0 0 7px #fff, 0 0 2px #fff; } /* iluminado fijo */
@keyframes tac-trait-match { 0%, 100% { border-color: #fff; box-shadow: 0 0 6px #fff, 0 0 2px #fff; } 50% { border-color: #fff4; box-shadow: none; } }
/* Imagen del rasgo con zoom dentro del hexágono: el borde de color se mantiene y la imagen, más grande,
   se corta por abajo (pies/plataforma) dentro del hexágono interior. */
.tac-trait-hex, .tac-tip-icon { position: relative; }
.hex-in { position: absolute; inset: 3px; z-index: 1; display: grid; place-items: center; overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #15181d; }
.tac-trait.is-on .hex-in, .ttr-card .hex-in { background: #2a1d10; }
.hex-in .trait-img { width: 100%; height: 100%; max-width: none; flex: none; object-fit: cover; image-rendering: pixelated; }
.trait-img.is-art, .hex-in .trait-img.is-art { image-rendering: auto; }

/* Rasgos con su icono ilustrado completo (marco dorado incluido) y el nombre en pergamino */
.tac-trait-hex:has(.is-art), .tac-tip-icon:has(.is-art) { background: none !important; clip-path: none; overflow: visible; border: 0; }
.tac-trait-hex:has(.is-art)::before { display: none; }
.hex-in:has(.is-art) { inset: 0; clip-path: none; background: none !important; overflow: visible; }
.hex-in .trait-img.is-art { width: 100%; height: 100%; object-fit: contain; }
.tac-trait.is-bronze .tac-trait-hex:has(.is-art) { filter: drop-shadow(0 0 3px #e0904a); }
.tac-trait.is-silver .tac-trait-hex:has(.is-art) { filter: drop-shadow(0 0 4px #e6ecf2); }
.tac-trait.is-gold .tac-trait-hex:has(.is-art) { filter: drop-shadow(0 0 5px #ffd34d); }
.trait-scroll { height: 1.25rem; width: auto; display: block; image-rendering: auto; }
.tac-tip-head .trait-scroll, .ttr-card header .trait-scroll { height: 1.6rem; }
.tac-trait-name:has(.trait-scroll) { gap: 0.1rem; }

/* En las ventanas largas, la cabecera (título y Volver) se queda fija arriba al hacer scroll */
.modal-box > .screen-head { position: sticky; top: calc(-1 * var(--space-6)); z-index: 30; margin-top: calc(-1 * var(--space-6)); padding-top: var(--space-6); padding-bottom: 0.4rem;
  background: linear-gradient(180deg, var(--panel-2) 80%, transparent); align-self: stretch; }

/* Títulos en pergamino (el pergamino se estira según el texto; las puntas enrolladas no se deforman) */
.scroll-title { display: inline-block; width: fit-content; padding: 0.15em 0.2em 0.25em; border-style: solid; border-width: 0 1.25em;
  border-image: url(data:image/png;base64,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) 0 36 fill / 0 1.25em stretch; color: #3a1c08 !important;
  font-family: var(--font-display, inherit); line-height: 1.15; text-shadow: none; white-space: nowrap; }
h2.scroll-title { font-size: 1.7rem; }
.ttr-group.scroll-title { display: block; margin: 0.9rem auto 0.6rem; font-size: 1.3rem; text-align: center; }
.scroll-title.is-small { font-size: 0.95rem; padding: 0 0.15em 0.1em; border-width: 0 0.9em; border-image-width: 0 0.9em; }
.tac-ability.is-passive b { color: #b98cff; }

/* Rasgos: pulsar una criatura abre su ficha */
.ttr-units .ttr-unit { width: 52px; display: flex; flex-direction: column; align-items: center; border-radius: 6px; border: 2px solid var(--cost); background: #0006; padding: 2px; cursor: pointer; color: inherit; font: inherit; }
.ttr-units .ttr-unit:hover { box-shadow: 0 0 8px var(--cost); transform: translateY(-1px); }
.ttr-units .ttr-unit img { width: 36px; height: 36px; image-rendering: pixelated; }
.ttr-units .ttr-unit small { font-size: 0.55rem; text-align: center; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ttr-unit-card-back { position: fixed; inset: 0; z-index: 60; background: #0008; }
.ttr-unit-card { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 94vw); max-height: 90vh; overflow: auto;
  padding: 0.9rem; border-radius: 12px; background: linear-gradient(180deg, #2b2418, #1b160f); border: 2px solid #c9a35a; box-shadow: 0 1rem 3rem #000a; text-align: left; }
.ttr-stars { display: flex; gap: 0.4rem; margin: 0.4rem 0; }
.ttr-stars .is-active { border-color: #ffd34d; color: #ffd34d; }
.ttr-unit-traits { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0; font-size: 0.85rem; }
.ttr-unit-traits > span { display: flex; align-items: center; gap: 0.45rem; }
.ttr-unit-traits .tac-trait-hex { width: 1.7rem; height: 1.9rem; flex: none; filter: none; }
/* Botín: al pasar el ratón por la imagen, con qué básicos de tu inventario se fusiona */
.tac-choice-art.tac-hover { position: relative; }
.tac-fuse-hint.tac-hint { width: 18rem; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); text-align: left; }
.tac-fuse-hint .tac-recipes .tac-item img { width: 22px; height: 22px; }
/* Recetas que puedes crear ya con lo que tienes en el inventario */
.tac-recipes li.is-can .tac-item { border-color: #4cd964 !important; box-shadow: 0 0 6px #4cd96488; }
.tac-recipes li.is-can b { color: #6dff8a; }
.tac-recipes li.is-can small { color: #b9f5c4; }
/* Receta que aún no puedes hacer: el objeto que sale pierde el borde dorado y el básico que te falta se marca en rojo. */
.tac-recipes li.is-miss .tac-item.is-full { border-color: #4a3f31; box-shadow: none; }
.tac-recipes li.is-miss .tac-item.is-comp { border-color: #e0322a; box-shadow: 0 0 6px #e0322a99; }

/* Imágenes de objetos de Tactics: siempre enteras, sin deformar (las pociones no son cuadradas) y con un
   pequeño margen para que la espada y otros objetos largos no toquen el borde del recuadro. */
.tac-item img, .tac-unit-items img, .tac-choice-art img, .tdx-recipe img, .tdx-cell img, .tac-recipes img {
  object-fit: contain; image-rendering: pixelated; }
.tac-item img { width: 30px; height: 30px; }
.tac-recipes .tac-item, .tac-fuse-hint .tac-recipes .tac-item { width: 30px; height: 30px; overflow: visible; }
.tac-recipes .tac-item img, .tac-fuse-hint .tac-recipes .tac-item img { width: 22px; height: 22px; }
.tac-unit-items img { width: 80%; height: 80%; }
.tac-fuse-hint.tac-hint { top: calc(100% + 6px); bottom: auto; z-index: 40; }
.tac-fuse-hint, .tac-fuse-hint li span, .tac-fuse-hint b { text-align: left; }
.tac-fuse-hint .tac-recipes li > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Modo Bosses ---------- */
.btn-bosses { border-color: #c99b5a; background: linear-gradient(135deg, #3b2a14, #1f170d 60%, #3b2a14); }
.bosses-screen .bosses-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.bosses-help { margin: 0.2rem 0 0.6rem; }
.bosses-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }
.bosses-group { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; text-align: left; padding: 0.6rem 0.7rem; border-radius: 10px;
  border: 2px solid var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, #241c13), #15110c 80%); color: var(--text); cursor: pointer; }
.bosses-group:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-1px); }
.bosses-group b { font-size: 1.05rem; color: #fff; }
.bosses-group small { color: var(--muted); }
.bosses-faces { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 0.2rem; }
.bosses-faces img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; background: #0006; border-radius: 6px; }
.boss-pick { width: min(820px, 96vw); max-height: 92vh; overflow: auto; text-align: center; }
.boss-pick-grid { width: 100%; align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.boss-pick-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 0.4rem; border-radius: 10px;
  border: 3px solid #8a8a8a; background: radial-gradient(ellipse at 50% 35%, #3a3026, #15110c 80%); color: var(--text); cursor: pointer; }
.boss-pick-card:hover { border-color: #d6d6d6; transform: translateY(-2px); }
.boss-pick-card img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.boss-pick-card b { font-size: 0.85rem; line-height: 1.1; }
.boss-pick-card small { font-size: 0.68rem; color: var(--muted); }
.boss-pick-card.is-won, .boss-pick-card.is-lost { background: radial-gradient(ellipse at 50% 35%, #2f2f2f, #121212 80%); }
.boss-pick-card.is-won img, .boss-pick-card.is-lost img { filter: grayscale(1) brightness(0.9); }
.boss-pick-card.is-won b, .boss-pick-card.is-lost b { color: #cfcfcf; }
.boss-pick-card.is-won { border-color: #3fd13f; box-shadow: 0 0 10px #3fd13f88; }
.boss-pick-card.is-lost { border-color: #e0322a; box-shadow: 0 0 10px #e0322a88; }
.boss-pick-card.is-won:hover img, .boss-pick-card.is-lost:hover img { filter: grayscale(0.5); }
.boss-pick-tag { position: absolute; top: 4px; right: 4px; font-size: 0.6rem; font-weight: 800; padding: 1px 5px; border-radius: 999px; background: #000b; }
.boss-pick-card.is-won .boss-pick-tag { color: #6dff8a; }
.boss-pick-card.is-lost .boss-pick-tag { color: #ff6b5e; }
.boss-pick-exit { margin-top: 0.2rem; }

/* ---------- GameMaster (admin) ---------- */
.gm-popup { width: min(900px, 96vw); max-height: 92vh; overflow: auto; }
.gm-user { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin: 0.4rem 0; }
.gm-user label, .gm-box label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.gm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.8rem; margin-top: 0.5rem; }
.gm-box { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem; border-radius: 10px; background: #0005; border: 1px solid #ffffff1a; }
.gm-box h3 { margin: 0; color: var(--gold); }
.gm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.3rem; max-height: 260px; overflow: auto; padding: 2px; }
.gm-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 8px; border: 2px solid #3a3127; background: #15110c; color: var(--text); cursor: pointer; }
.gm-item img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.gm-item small { font-size: 0.6rem; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gm-item.is-on { border-color: #ffd34d; box-shadow: 0 0 8px #ffd34d88; }
.gm-popup input, .gm-popup select { font: inherit; padding: 6px 8px; background: var(--bg-2); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; }
/* Mientras eliges magias/mejoras, la barra de huecos de abajo se ve clara (por encima del fondo oscuro). */
#ui:has(.modal.is-levelup) .hud-spells { position: relative; z-index: 10; pointer-events: none; }

/* Tactics en pantallas grandes: tienda, objetos, rasgos y ficha de la derecha crecen con la pantalla (el tablero lo calcula el juego). */
.tac-items, .tac-traits, .tac-side { zoom: var(--tac-ui-scale, 1); }
.tac-bottom { zoom: var(--tac-shop-scale, 1); }
/* Barra de arriba: sólo dos recuadros (Salir + ronda a la izquierda, vida a la derecha); el tablero sube hasta arriba. */
.tac-top { background: none; border: 0; box-shadow: none; padding: 0; pointer-events: none; justify-content: space-between; align-items: flex-start; }
.tac-top-left, .tac-top .tac-stats { pointer-events: auto; background: rgba(20, 16, 12, 0.92); border: 2px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5); padding: 0.4rem 0.8rem; min-height: 58px; }
.tac-top-left { display: flex; align-items: center; gap: 1rem; max-width: 22rem; }
.tac-top-left .tac-round { flex: 0 1 auto; }

/* Menús y ventanas crecen con monitores grandes (--ui-scale lo calcula main.js con el tamaño de la ventana). */
.screen, .modal-box { zoom: var(--ui-scale, 1); }
#modal .modal-box { max-height: calc(94vh / var(--ui-scale, 1)); overflow-y: auto; }