/* =========================================================
   Reino de Torres — estilos
   ========================================================= */
:root {
  --bg1: #2a4bb0; --bg2: #16205a;
  --gold: #ffd166; --green: #4fd36a; --green-d: #23853a;
  --red: #ff5a6a; --red-d: #a8243a;
  --panel: #1d2a6e; --panel2: #24357f;
  --text: #ffffff; --muted: #b9c4f0;

  /* paleta del juego (la misma que GAME_PALETTE de js/data.js) */
  /* tinta y contornos */
  --ink: #1a1430;                /* contorno principal: morado tinta */
  --ink-light: #2a1a0c;          /* contorno de las maderas */
  /* elementos */
  --elem-nature: #3fbf6a;
  --elem-fire: #ff5a2c;
  --elem-ice: #58c9ff;
  --elem-metal: #f2b632;
  --elem-arcano: #8c6bff;
  /* rarezas: fondos y bordes de cartas y tienda */
  --rarity-common: #7a8399;
  --rarity-rare: #1f74e0;
  --rarity-epic: #8c6bff;
  --rarity-mythic: #ff4f7b;
  --rarity-legendary: #ffd700;
  /* madera, oro y piedra */
  --ui-wood-dark: #2a1a0c;
  --ui-wood-base: #a0663a;
  --ui-gold: #ffc65a;
  --ui-gold-edge: #a2520a;
  --ui-panel-bg: rgba(26, 20, 48, 0.85);
}
/* sin zoom al tocar dos veces ni al pellizcar: solo se puede desplazar */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12) 0 2px, transparent 3px) 0 0 / 34px 34px,
    linear-gradient(180deg, var(--bg1), var(--bg2));
  user-select: none; -webkit-user-select: none;
}
h1, h2, h3, .btn, .summon-btn, .logo h1 { font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: 0.02em; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: pan-x pan-y; }

/* ---------- menú ---------- */
.menu {
  height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top)) 14px calc(90px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
}
.res-bar { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.pill { background: rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.15); border-radius: 999px; padding: 4px 12px; font-size: 0.9rem; }
.pill.gold { color: var(--gold); }
.pill.gem { color: #8fe9ff; }
.back-bar .pill { padding: 4px 8px; font-size: 0.8rem; }
.logo { text-align: center; margin: 6px 0 12px; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.logo h1 { margin: 0; font-size: clamp(2.2rem, 10vw, 3.1rem); color: #fff; text-shadow: 0 4px 0 #0e1a4a, 0 0 24px rgba(120,170,255,0.6); -webkit-text-stroke: 2px #0e1a4a; }
.logo p { margin: 4px 0 0; color: var(--muted); }
.deck-preview { display: flex; justify-content: center; gap: 4px; margin: 4px 0 14px; }
.deck-preview img { width: 54px; height: 54px; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.35)); }
@keyframes glow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 18px 4px rgba(255,209,102,0.8); } }
.sound-row { display: flex; justify-content: center; gap: 6px; margin-top: 14px; color: var(--muted); }
.foot { text-align: center; color: var(--muted); font-size: 0.72rem; font-weight: 700; margin-top: 10px; }

.back-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.back-bar h2 { flex: 1; min-width: 0; margin: 0; font-size: clamp(1.15rem, 5.6vw, 1.6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 3px 0 var(--ink); }
.back { width: 44px; height: 44px; border-radius: 14px; font-size: 1.6rem; background: var(--panel2); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.lead { color: var(--muted); margin: 0 0 12px; }
.muted { color: var(--muted); text-align: center; font-size: 0.85rem; }
.stage-list { display: flex; flex-direction: column; gap: 8px; }
.stage {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink);
}
.stage.locked { opacity: 0.5; }
.stage-n { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--gold); color: #3a1d00; font-family: 'Lilita One'; font-size: 1.2rem; border: 2px solid var(--ink); }
.stage-t { flex: 1; min-width: 0; }
.stage-t b { display: block; }
.stage-t small { color: var(--muted); font-size: 0.74rem; }
.stage-s { color: var(--gold); font-size: 1.1rem; letter-spacing: 1px; }
.howto p { background: rgba(0,0,0,0.22); border-radius: 14px; padding: 10px 12px; margin: 0 0 8px; font-weight: 700; line-height: 1.4; }

/* cartas */
.ulv { margin-top: -6px; background: linear-gradient(180deg, #ffb84a, #e07b1a); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; font-family: 'Lilita One'; font-size: 0.8rem; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.ubar { position: relative; width: 92%; height: 14px; margin-top: 4px; background: #0e1430; border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
.ubar span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3aa0ff, #6fd2ff); }
.ubar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 0.6rem; line-height: 10px; }
.legend { margin-top: 14px; font-size: 0.78rem; color: var(--muted); background: rgba(0,0,0,0.2); padding: 10px; border-radius: 12px; }

/* ---------- capas ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8,10,30,0.72); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.modal-card {
  width: min(400px, 100%); max-height: 92vh; overflow-y: auto; text-align: center;
  background: linear-gradient(180deg, #2b3c8f, #182260); border: 4px solid var(--ink); border-radius: 22px;
  box-shadow: 0 8px 0 var(--ink); padding: 18px 16px; animation: popIn 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } }
.modal-card h2 { margin: 4px 0; font-size: 1.8rem; text-shadow: 0 3px 0 var(--ink); }
.modal-card p { margin: 6px 0; font-weight: 700; }
.swap-row { display: flex; justify-content: center; gap: 6px; margin: 6px 0 10px; }
.swap-row button { background: rgba(0,0,0,0.3); border: 2px solid var(--ink); border-radius: 12px; padding: 2px; }
.swap-row img { width: 54px; height: 54px; display: block; }
.btn {
  display: block; width: 100%; margin-top: 10px; padding: 12px; font-size: 1.2rem; border-radius: 14px; border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 rgba(0,0,0,0.2); text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn:disabled { filter: grayscale(0.8) brightness(0.7); }
.btn-green { background: linear-gradient(180deg, #6fe38a, #2a9a4b); }
.btn-red { background: linear-gradient(180deg, #ff7a8a, #c22a44); }
.btn-ghost { background: var(--panel2); }
.chest-ico { font-size: 4rem; animation: popIn 0.5s, bob 2s 0.5s ease-in-out infinite; filter: drop-shadow(0 0 20px var(--cc)); }
.gold-big { font-size: 1.6rem; color: var(--gold); }
.chest-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0; }
.chest-card { width: 76px; padding: 4px; border: 3px solid var(--rc); border-radius: 12px; background: rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; animation: popIn 0.4s backwards; }
.chest-card img { width: 56px; height: 56px; }
.chest-card small { font-size: 0.62rem; }
.result.win { border-color: #3a2a00; background: linear-gradient(180deg, #3a62d0, #1d2c78); }
.res-emoji { font-size: 3.4rem; animation: popIn 0.5s; }
.res-stars { font-size: 2.4rem; color: var(--gold); letter-spacing: 6px; text-shadow: 0 3px 0 var(--ink); }
.res-gold { font-size: 1.3rem; color: var(--gold); }
.res-chest { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.25); border-radius: 12px; padding: 6px 10px; font-size: 0.9rem; text-align: left; }
.res-chest img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.res-chest span { display: flex; flex-direction: column; }
.res-chest small { color: var(--muted); font-size: 0.72rem; }
.res-chest.full { background: rgba(194,42,68,0.22); }
.res-chest.full img { filter: grayscale(0.8); opacity: 0.7; }
.res-unlock { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 8px; color: var(--gold); }
.res-unlock img { width: 60px; height: 60px; }
.res-unlock.secret { color: var(--rarity-legendary); animation: popIn 0.5s backwards; }
.toast { position: fixed; left: 50%; bottom: 26%; transform: translate(-50%, 10px); z-index: 60; background: #fff; color: #1a1a3a; padding: 8px 16px; border-radius: 999px; border: 3px solid var(--ink); opacity: 0; pointer-events: none; transition: 0.2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- partida ---------- */
.battle { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.b-top { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 6px; background: linear-gradient(180deg, #1b2a6b, #16215a); border-bottom: 3px solid var(--ink); }
.b-btn { width: 40px; height: 40px; border-radius: 12px; border: 3px solid var(--ink); background: var(--panel2); font-size: 1.05rem; box-shadow: 0 3px 0 var(--ink); }
.b-btn.quit { background: linear-gradient(180deg, #ff7a8a, #c22a44); }
.b-btn.speed { width: auto; padding: 0 10px; font-family: 'Lilita One'; }
.b-wave { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.b-wave b { font-family: 'Lilita One'; font-weight: 400; font-size: 1.15rem; text-shadow: 0 2px 0 var(--ink); }
.b-event { font-size: 0.72rem; color: var(--gold); }
.arena { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
#cv { display: block; touch-action: none; }
.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none; text-align: center; z-index: 4; }
.banner b { display: block; font-family: 'Lilita One'; font-weight: 400; font-size: clamp(1.6rem, 8vw, 2.4rem); color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.banner small { display: inline-block; margin-top: 4px; background: rgba(10,12,40,0.8); border-radius: 10px; padding: 3px 10px; font-size: 0.85rem; max-width: 86vw; }
.banner.show { animation: banner 2.4s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.unit-info { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; display: flex; gap: 8px; align-items: center; background: rgba(12,16,48,0.92); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px; }
.unit-info img { width: 52px; height: 52px; }
.unit-info b { display: block; }
.unit-info small { display: block; font-size: 0.72rem; color: var(--muted); }
.unit-info .hint { color: var(--gold); }
.b-bottom { padding: 6px 10px max(8px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, #16215a, #1d2c78); border-top: 3px solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.lives small { display: block; font-size: 0.62rem; color: var(--muted); }
.lives span { font-size: 0.95rem; letter-spacing: 1px; }
.mana { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.35); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 14px 2px 8px; }
.mana b { font-family: 'Lilita One'; font-weight: 400; font-size: 1.5rem; color: #7dfcff; text-shadow: 0 2px 0 var(--ink); }
.drop { font-size: 1.2rem; }
.cmd-wrap { --cc: #7fd6ff; }
.b-actions { display: flex; gap: 10px; align-items: center; }
.cmd-btn { --charge: 0deg; width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--ink); padding: 4px; background: conic-gradient(var(--cc) var(--charge), rgba(255,255,255,0.12) var(--charge)); }
.cmd-btn span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #16215a; font-size: 1.6rem; filter: grayscale(0.7); }
.cmd-btn.ready { animation: glowC 0.9s ease-in-out infinite; }
.cmd-btn.ready span { filter: none; }
@keyframes glowC { 50% { box-shadow: 0 0 18px 6px var(--cc); } }
.summon-btn {
  flex: 1; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.4rem; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #ffe066, #f2a01a); color: #3a1d00; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  box-shadow: 0 5px 0 var(--ink), inset 0 -5px 0 rgba(0,0,0,0.15), inset 0 3px 0 rgba(255,255,255,0.5);
}
.summon-btn small { font-family: 'Fredoka', 'Nunito'; font-weight: 700; font-size: 0.8rem; }
.summon-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.deck-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dcard { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px 2px 2px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 45%, #1d2c78), #16215a); box-shadow: 0 3px 0 var(--ink); }
.dcard img { width: 44px; height: 44px; }
.dcard:active { transform: translateY(2px); }
.dcard.poor .dcost { color: #ff9aa8; }
.dcard.poor img { filter: grayscale(0.5) brightness(0.85); }
.dlv { position: absolute; top: -6px; left: -4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #3a1d00; border: 2px solid var(--ink); font-family: 'Lilita One'; font-size: 0.8rem; }
.dcost { font-size: 0.66rem; color: #7dfcff; }

@media (min-width: 700px) and (min-height: 600px) {
  .battle { max-width: 560px; margin: 0 auto; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* =========================================================
   Estilo de los diseños nuevos (assets/ui/boton): verde lima
   brillante, marco dorado grueso y reflejo superior.
   ========================================================= */
:root { --gold-frame: #f5c400; --gold-dark: #4a3200; }
.btn, .summon-btn, .back, .b-btn, .stage, .dcard {
  position: relative; overflow: hidden;
}
.btn::after, .summon-btn::after, .b-btn::after, .stage::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 5%; height: 38%;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  pointer-events: none;
}
.btn-green, .summon-btn {
  background: linear-gradient(180deg, #c4f74a 0%, #86dc22 48%, #4caa12 100%);
  border: 4px solid var(--gold-frame);
  box-shadow: 0 0 0 3px var(--gold-dark), 0 7px 0 var(--gold-dark), inset 0 -6px 0 rgba(20,80,0,0.35);
  color: #fff; text-shadow: 0 2px 0 #1e5a00, 0 0 2px #1e5a00;
}
.summon-btn small { color: #fff; text-shadow: 0 1px 0 #1e5a00; }
.summon-btn:active, .btn-green:active { transform: translateY(4px); box-shadow: 0 0 0 3px var(--gold-dark), 0 3px 0 var(--gold-dark), inset 0 -6px 0 rgba(20,80,0,0.35); }
.btn-red { border: 4px solid var(--gold-frame); box-shadow: 0 0 0 3px var(--gold-dark), 0 7px 0 var(--gold-dark); }
.btn-ghost { border: 4px solid #8fa0d8; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); }
.stage, .back, .b-btn { border-color: #e0b400; box-shadow: 0 0 0 2px var(--gold-dark), 0 5px 0 var(--gold-dark); }
.b-btn.quit { border-color: var(--gold-frame); }
.dcard { border-color: var(--gold-frame); box-shadow: 0 0 0 2px var(--gold-dark), 0 4px 0 var(--gold-dark); }
.dcard img { width: 50px; height: 50px; }
.deck-preview img { width: 62px; height: 62px; }
.cmd-btn { box-shadow: 0 0 0 3px var(--gold-dark); border-color: var(--gold-frame); }
.mana { border-color: var(--gold-frame); box-shadow: 0 0 0 2px var(--gold-dark); }
.pill { border-color: rgba(245,196,0,0.6); }

/* botón grande de jugar con la imagen del diseño */
@keyframes playPulse { 50% { transform: scale(1.04); } }

/* =========================================================
   Ilustraciones de la interfaz (assets/ui): fondo del menú,
   botón de invocar, marco de las cartas en partida y carta de
   la colección.
   ========================================================= */
body {
  background:
    linear-gradient(180deg, rgba(27,42,107,0.55), rgba(22,32,90,0.92) 55%),
    url('assets/ui/fondo.webp') center top / cover no-repeat,
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
.summon-btn {
  border: none; box-shadow: none; border-radius: 22px; height: 64px;
  filter: drop-shadow(0 4px 0 var(--gold-dark));
}
.summon-btn::after { display: none; }
.summon-btn:active { transform: translateY(3px); box-shadow: none; filter: drop-shadow(0 1px 0 var(--gold-dark)); }
.dcard {
  border: none; box-shadow: none; border-radius: 10px; padding: 6px 4px 8px;
  background: url('assets/ui/marco-carta.webp') center / 100% 100% no-repeat, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 55%, #1d2c78), #16215a 75%) center / 86% 86% no-repeat;
}
.dcard img { width: 46px; height: 46px; }

/* sin barra de desplazamiento visible en los menús (se sigue pudiendo
   desplazar) y menú más compacto en pantallas bajas */
.menu, .overlay { scrollbar-width: none; -ms-overflow-style: none; }
.menu::-webkit-scrollbar, .overlay::-webkit-scrollbar, .overlay *::-webkit-scrollbar { display: none; }
@media (max-height: 900px) {
  .logo { margin: 2px 0 6px; }
  .logo h1 img { width: min(210px, 56%); }
  .deck-preview { margin: 2px 0 8px; }
  .deck-preview img { width: 52px; height: 52px; }
}
@media (max-height: 760px) {
  .logo p { display: none; }
}

/* =========================================================
   Marcador de partida con las piezas ilustradas: corazones de
   vida, frasco de maná, aro del comandante, botón amarillo de
   invocar y marco de madera de las cartas.
   ========================================================= */
.b-top { gap: 6px; padding-left: 8px; padding-right: 8px; }
.b-wave b { font-size: 1.05rem; }
.lives { display: flex; align-items: center; flex-shrink: 0; }
.lives span { display: flex; letter-spacing: 0; }
.heart { width: 19px; height: 17px; margin-right: -2px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35)); transition: transform 0.2s; }
.heart.lost { filter: grayscale(1) brightness(0.45); opacity: 0.55; transform: scale(0.85); }
.mana {
  position: relative; flex-shrink: 0; width: 82px; height: 44px; padding: 0; gap: 0;
  background: none; border: none; box-shadow: none; border-radius: 0;
}
.mana img { position: absolute; left: 0; top: 0; width: 42px; height: 44px; }
.mana b {
  position: absolute; left: 21px; top: 22px; min-width: 40px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; font-size: 1rem; line-height: 1; color: #7dfcff;
  background: linear-gradient(180deg, #3a3e4c, #22242e); border: 2px solid #111218; border-radius: 7px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.12), 0 2px 0 rgba(0,0,0,0.4);
}
.mi { width: 0.9em; height: 1.15em; vertical-align: -0.2em; margin-left: 1px; }

.cmd-btn {
  width: 66px; height: 66px; padding: 0; border: none; border-radius: 50%; position: relative;
  background: url('assets/ui/comandante.webp') center / 100% 100% no-repeat; box-shadow: none;
}
.cmd-btn span {
  position: absolute; left: 21%; top: 21%; width: 58%; height: 58%;
  background: conic-gradient(color-mix(in srgb, var(--cc) 70%, transparent) var(--charge), transparent 0);
  font-size: 1.45rem;
}
.cmd-btn.ready { animation: none; }
.cmd-btn.ready span { animation: glowC 0.9s ease-in-out infinite; }

.summon-btn {
  background: none; border-style: solid; border-width: 12px 18px;
  border-image: url('assets/ui/boton-invocar-2.webp') 27% 13% fill / 12px 18px stretch;
  height: 62px; border-radius: 18px; color: #fff; font-size: 1.5rem;
  text-shadow: 0 2px 0 #b35a00, 0 0 3px #b35a00;
  filter: drop-shadow(0 4px 0 #8a4300);
}
.summon-btn small { color: #fff; text-shadow: 0 1px 0 #b35a00, 0 0 2px #b35a00; font-size: 0.85rem; }
.summon-btn:active { filter: drop-shadow(0 1px 0 #8a4300); }

.deck-bar { gap: 5px; }
.dcard {
  aspect-ratio: 188 / 200; padding: 0; justify-content: center;
  background: url('assets/ui/marco.webp') center / 100% 100% no-repeat, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 50%, #1d2c78), #16215a 75%) 50% 45% / 74% 70% no-repeat;
}
.dcard img { width: 66%; height: auto; margin-top: -10%; }
.dcost {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); white-space: nowrap;
  padding: 0 5px; border-radius: 6px; background: #1d3448; border: 1px solid #5fd2ff; font-size: 0.62rem; line-height: 1.35;
}
.dlv { top: -4px; left: -3px; }

/* botones verdes de los menús: solo CSS (misma receta que «Mejorar»),
   sin la ilustración verde del botón */
.btn-green {
  color: #fff; border: 4px solid #8fe08a; padding: 10px 18px;
  background: linear-gradient(180deg, #4fd06a, #22903c);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -5px 0 rgba(0,0,0,0.22);
  text-shadow: 0 2px 0 #145a24; filter: none;
}
.btn-green::after { display: none; }
.btn-green:active { transform: translateY(5px); box-shadow: 0 0 0 3px var(--ink), 0 1px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.3); filter: none; }
.btn-green:disabled { filter: grayscale(0.8) brightness(0.8); }

/* cartas del mazo en el menú de tropas con el marco de partida */

/* retratos de los comandantes (assets/commanders) */
.cmd-btn span { overflow: hidden; filter: none; background: #16215a; }
.cmd-btn span img { position: absolute; inset: -6%; width: 112%; height: 112%; }
/* la parte aún sin cargar se ve oscura y se va destapando como un reloj */
.cmd-btn span::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent var(--charge), rgba(8,10,30,0.68) 0);
}
.cmd-btn span i { position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 0.8rem; z-index: 1; display: none; }
.cmd-btn.ready span::after { background: none; }
.cmd-btn.ready span { box-shadow: 0 0 14px 4px var(--cc); }

/* medallones de los eventos de oleada (assets/events) */
.banner-pic { display: block; width: 84px; height: 84px; margin: 0 auto 4px; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.4)); }
.b-event { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.b-event img { width: 16px; height: 16px; }

/* =========================================================
   Menú de pausa: tarjeta con marco dorado, medallón, cinta
   con el título, resumen de la partida y opciones rápidas.
   ========================================================= */
.pause-wrap { position: relative; isolation: isolate; width: min(380px, 100%); display: grid; place-items: center; padding-top: 34px; }
.pause-rays {
  position: absolute; left: 50%; top: 40px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255,209,102,0.16) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: pauseSpin 40s linear infinite;
}
@keyframes pauseSpin { to { transform: rotate(360deg); } }
.pause-card {
  position: relative; width: 100%; overflow: visible; padding: 50px 16px 16px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120,160,255,0.35), transparent 60%),
    linear-gradient(180deg, #2f47a8, #1a2668 60%, #141c52);
  border: 4px solid var(--gold-frame); border-radius: 26px;
  box-shadow: 0 0 0 3px var(--gold-dark), 0 10px 0 var(--gold-dark), 0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(255,255,255,0.08), inset 0 -10px 24px rgba(0,0,0,0.35);
}
/* remaches dorados en las esquinas */
.pause-card::before {
  content: ''; position: absolute; inset: 8px; border-radius: 18px; pointer-events: none;
  border: 2px dashed rgba(245,196,0,0.25);
  background:
    radial-gradient(circle at 10px 10px, #ffe58a 0 3px, #a87800 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 10px) 10px, #ffe58a 0 3px, #a87800 4px, transparent 5px),
    radial-gradient(circle at 10px calc(100% - 10px), #ffe58a 0 3px, #a87800 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #ffe58a 0 3px, #a87800 4px, transparent 5px);
}
.pause-medal {
  position: absolute; left: 50%; top: -38px; width: 76px; height: 76px; margin-left: -38px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #4d6fe0, #1d2c86 70%);
  border: 5px solid var(--gold-frame);
  box-shadow: 0 0 0 3px var(--gold-dark), 0 5px 0 var(--gold-dark), 0 0 24px rgba(255,209,102,0.55), inset 0 4px 0 rgba(255,255,255,0.25);
  animation: popIn 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.05s backwards, medalBob 2.4s ease-in-out 0.4s infinite;
}
.pause-medal span { width: 11px; height: 32px; border-radius: 4px; background: linear-gradient(180deg, #fff, #d8e2ff); box-shadow: 0 3px 0 var(--ink); }
@keyframes medalBob { 50% { transform: translateY(-4px); } }
.pause-ribbon { position: relative; margin: 0 -30px 6px; padding: 6px 0 8px; z-index: 1; }
.pause-ribbon::before, .pause-ribbon::after { content: ''; position: absolute; top: 10px; width: 34px; height: 100%; background: #b07a00; z-index: -2; }
.pause-ribbon::before { left: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.pause-ribbon::after { right: -6px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.pause-ribbon h2 {
  position: relative; margin: 0; padding: 6px 0 8px; font-size: 2rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 3px 0 var(--ink);
  background: linear-gradient(180deg, #ffe36a, #f5b400 55%, #d08a00);
  border-top: 3px solid var(--gold-dark); border-bottom: 3px solid var(--gold-dark);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), inset 0 -4px 0 rgba(0,0,0,0.18), 0 4px 0 rgba(0,0,0,0.3);
}
.modal-card .pause-where { margin: 4px 0 8px; color: var(--muted); font-size: 0.92rem; }
.pause-prog { height: 10px; margin: 0 12px 12px; border-radius: 6px; background: #0b1238; border: 2px solid var(--ink); overflow: hidden; }
.pause-prog i { display: block; height: 100%; background: linear-gradient(180deg, #ffe36a, #f59e00); box-shadow: inset 0 2px 0 rgba(255,255,255,0.45); border-radius: 4px; transition: width 0.4s; }
.pause-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ps-stat {
  display: flex; flex-direction: column; align-items: center; padding: 6px 2px 5px; border-radius: 14px; min-width: 0;
  background: linear-gradient(180deg, rgba(10,16,52,0.75), rgba(10,16,52,0.45)); border: 2px solid rgba(245,196,0,0.45);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.06); animation: popIn 0.3s backwards;
}
.ps-stat:nth-child(2) { animation-delay: 0.04s; } .ps-stat:nth-child(3) { animation-delay: 0.08s; } .ps-stat:nth-child(4) { animation-delay: 0.12s; }
.ps-stat i { font-style: normal; font-size: 1.15rem; line-height: 1.3; }
.ps-stat i .mi { width: 1em; height: 1.25em; }
.ps-stat b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.1; text-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.ps-stat b small { font-size: 0.75em; color: var(--muted); }
.ps-stat small { font-size: 0.64rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pause-lives { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px; margin: 10px 0 4px; }
.pause-lives .heart { width: 24px; height: 22px; }
.pause-lives small { width: 100%; font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pause-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.pause-opt {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 999px;
  font: inherit; font-size: 0.85rem; color: var(--muted); background: rgba(0,0,0,0.3); border: 2px solid rgba(143,160,216,0.5);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pause-opt i { font-style: normal; font-size: 1.05rem; }
.pause-opt b { color: var(--gold); }
.pause-opt.on { color: #fff; border-color: var(--gold-frame); background: rgba(245,196,0,0.14); }
.pause-opt:active { transform: scale(0.96); }
.pause-resume { margin-top: 14px; font-size: 1.4rem; padding: 6px 8px; animation: resumePulse 1.8s ease-in-out infinite; }
@keyframes resumePulse { 50% { transform: scale(1.03); } }
.pause-resume:active { animation: none; }
.pause-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pause-row .btn { margin-top: 12px; font-size: 1.05rem; padding: 10px 6px; }
.pause-row .btn.armed { animation: armedGlow 0.8s ease-in-out infinite; }
@keyframes armedGlow { 50% { filter: brightness(1.25); box-shadow: 0 0 0 3px var(--gold-dark), 0 6px 0 var(--gold-dark), 0 0 18px 4px rgba(255,90,106,0.7); } }
.modal-card .pause-confirm { margin: 10px 0 0; font-size: 0.82rem; color: #ffb3bc; }
.pause-confirm.shake { animation: shakeX 0.35s; }
@keyframes shakeX { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 340px) {
  .pause-stats { grid-template-columns: repeat(2, 1fr); }
  .pause-ribbon h2 { font-size: 1.7rem; }
}

/* =========================================================
   Textos de las cartas legibles: el nombre va en una placa
   dentro del marco (sin pisar la madera de abajo) y nombre,
   nivel y contador llevan contorno oscuro y sombra.
   ========================================================= */
.ulv { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }

/* =========================================================
   Cartas de tropa (barra de la partida y menú de tropas):
   marco dorado fino, fondo del color de su rareza (como las
   cartas del rival en la cabecera) y textos en placas limpias.
   ========================================================= */
.dcard {
  --gold-rim: linear-gradient(180deg, #fff1a8 0%, #f5c400 35%, #c98a00 70%, #8a5a00 100%);
  border: 3px solid transparent; border-image: none; border-radius: 14px; filter: none;
  box-shadow: 0 4px 0 #3a2600, 0 7px 12px rgba(0,0,0,0.35);
  overflow: hidden;
}
/* barra de la partida */
.deck-bar { gap: 6px; }
.dcard {
  aspect-ratio: auto; padding: 4px 0 0; justify-content: flex-start; gap: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 94%, #000) 0%, color-mix(in srgb, var(--rc) 66%, #000) 100%) padding-box,
    var(--gold-rim) border-box;
}
.dcard::after { display: none; }
.dcard img { width: 76%; max-width: 64px; height: auto; aspect-ratio: 1; margin: 2px 0 3px; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.45)); }
.dlv {
  top: 3px; left: 3px; width: 20px; height: 20px; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c400 55%, #c98a00); color: #3a1d00;
  border: 2px solid #3a2600; font-size: 0.78rem; box-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
/* elemento de la tropa, arriba a la derecha (fuego, hielo, naturaleza…) */
.del {
  position: absolute; top: 3px; right: 3px; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(6,10,36,0.78); border: 1.5px solid rgba(255,214,90,0.8); box-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.del x-ico { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
.dcost {
  position: static; transform: none; width: 100%; margin-top: auto; padding: 3px 0 4px; border: none; border-radius: 0;
  background: linear-gradient(180deg, rgba(6,10,36,0.55), rgba(6,10,36,0.9)); border-top: 1px solid rgba(255,214,90,0.45);
  font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; font-size: 0.82rem; line-height: 1; color: #8ff3ff;
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-align: center; white-space: nowrap;
}
.dcost .mi { width: 0.75em; height: 0.95em; vertical-align: -0.12em; -webkit-text-stroke: 0; }
.dcard.poor { filter: none; }
.dcard.poor img { filter: grayscale(0.7) brightness(0.7) drop-shadow(0 3px 2px rgba(0,0,0,0.45)); }
.dcard.poor .dcost { color: #ff9aa8; }
.dcard:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a2600, 0 3px 6px rgba(0,0,0,0.35); }

/* menú de tropas */
.ulv {
  position: relative; z-index: 1; margin-top: -10px; padding: 1px 9px 2px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd166, #f08a24); border: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,0.35);
  font-size: 0.78rem; line-height: 1.1;
}
.ubar { width: 82%; height: 13px; margin-top: 5px; border-width: 2px; border-radius: 999px; background: #0b1238; }
.ubar span { background: linear-gradient(180deg, #8fe3ff, #3aa0ff); border-radius: 999px; }
.ubar em { line-height: 9px; font-size: 0.6rem; }
@keyframes cardGlow { 50% { box-shadow: 0 4px 0 #3a2600, 0 0 16px 4px rgba(255,209,102,0.85); } }
/* bloqueadas: silueta oscura, candado y la fase que la desbloquea */

/* «Seguir jugando» con el mismo botón naranja que «Invocar» */
.btn.pause-resume {
  background: none; border-style: solid; border-width: 12px 18px; padding: 2px 8px; min-height: 62px;
  border-image: url('assets/ui/boton-invocar-2.webp') 27% 13% fill / 12px 18px stretch;
  border-radius: 18px; color: #fff; font-size: 1.5rem; box-shadow: none;
  text-shadow: 0 2px 0 #b35a00, 0 0 3px #b35a00; -webkit-text-stroke: 0;
  filter: drop-shadow(0 4px 0 #8a4300);
}
.btn.pause-resume::after { display: none; }
.btn.pause-resume:active { transform: translateY(3px); filter: drop-shadow(0 1px 0 #8a4300); box-shadow: none; }
/* bloqueadas a la vista: retrato apagado y candado pequeño en la esquina */
/* en la colección, las que ya están en el mazo */

/* =========================================================
   Ficha de tropa: marco dorado, rayos del color de la rareza,
   cinta con el nombre, estadísticas en casillas y rasgos.
   ========================================================= */
.unit-card {
  position: relative; overflow-x: hidden; padding: 12px 16px 16px;
  background:
    radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--rc) 45%, transparent), transparent 62%),
    linear-gradient(180deg, #2f47a8, #1a2668 55%, #141c52);
  border: 4px solid var(--gold-frame); border-radius: 26px;
  box-shadow: 0 0 0 3px var(--gold-dark), 0 10px 0 var(--gold-dark), 0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(255,255,255,0.08);
}
.uc-x {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  font: 400 1rem 'Lilita One', sans-serif; color: #fff; background: rgba(6,10,36,0.7); border: 2px solid rgba(245,196,0,0.7);
}
.uc-x:active { transform: scale(0.92); }
.uc-hero { position: relative; display: grid; place-items: center; height: 176px; margin: 0 -16px; }
.uc-rays {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 55%, transparent) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: ucSpin 18s linear infinite; opacity: 0.8;
}
@keyframes ucSpin { to { transform: rotate(1turn); } }
.uc-img {
  position: relative; width: 168px; height: 168px;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 70%, transparent));
  animation: popIn 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.05s backwards, ucFloat 3s ease-in-out 0.4s infinite;
}
@keyframes ucFloat { 50% { transform: translateY(-5px); } }
.uc-ribbon { position: relative; margin: -6px -30px 2px; padding: 4px 0 6px; z-index: 1; }
.uc-ribbon::before, .uc-ribbon::after { content: ''; position: absolute; top: 9px; width: 34px; height: 100%; z-index: -2; background: color-mix(in srgb, var(--rc) 60%, #000); }
.uc-ribbon::before { left: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.uc-ribbon::after { right: -6px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.uc-ribbon h2 {
  margin: 0; padding: 5px 0 7px; font-size: 2rem; line-height: 1; color: #fff;
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 3px 0 var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc) 55%, color-mix(in srgb, var(--rc) 70%, #000));
  border-top: 3px solid color-mix(in srgb, var(--rc) 40%, #000); border-bottom: 3px solid color-mix(in srgb, var(--rc) 40%, #000);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.45), inset 0 -4px 0 rgba(0,0,0,0.18), 0 4px 0 rgba(0,0,0,0.3);
}
.modal-card .uc-title { margin: 6px 0 4px; color: var(--muted); font-size: 0.95rem; }
.uc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px; }
.uc-chip {
  padding: 3px 10px 4px; border-radius: 999px; font-size: 0.78rem; color: #fff;
  background: rgba(6,10,36,0.6); border: 2px solid rgba(143,160,216,0.55);
}
.uc-chip.rar { color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 50%, #fff), var(--rc)); border-color: var(--ink); }
.uc-chip.el { border-color: var(--ec); background: color-mix(in srgb, var(--ec) 22%, rgba(6,10,36,0.7)); }
.modal-card .uc-desc {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 14px; font-size: 0.92rem; line-height: 1.35;
  background: rgba(6,10,36,0.45); border: 1px solid rgba(255,214,90,0.25);
}
.uc-desc em { color: var(--rarity-legendary); font-style: normal; font-size: 0.85rem; }
.pause-stats.uc-stats { grid-template-columns: repeat(3, 1fr); }
.uc-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.uc-trait {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,16,52,0.8), rgba(10,16,52,0.5)); border: 2px solid rgba(245,196,0,0.4);
  animation: popIn 0.3s backwards;
}
.uc-trait i { font-style: normal; font-size: 1rem; }
.uc-trait b { font-size: 0.8rem; }
.uc-trait small { font-size: 0.72rem; color: var(--muted); }
.uc-level {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 16px;
  background: rgba(6,10,36,0.45); border: 1px solid rgba(255,214,90,0.25); text-align: left;
}
.uc-lvmedal {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  font: 400 1.35rem 'Lilita One', sans-serif; color: #3a1d00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c400 55%, #c98a00); border: 3px solid #3a2600; box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
.uc-lvbody { flex: 1; min-width: 0; }
.uc-lvtop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.uc-lvtop > b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.05rem; text-shadow: 0 2px 0 var(--ink); }
.uc-gain { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.uc-gain b { color: #8dff7a; }
.uc-level .ubar { width: 100%; margin: 0; }
.uc-level .ubar.ok span { background: linear-gradient(180deg, #b6ff8a, #3fcf4a); }
.modal-card .uc-why { margin: 4px 0 0; font-size: 0.8rem; color: #ffb3bc; }
.modal-card .uc-indeck { margin: 10px 0 0; color: #8dff7a; font-size: 0.9rem; }
.modal-card .uc-swap-t { margin: 12px 0 4px; color: var(--muted); font-size: 0.85rem; }
.unit-card .swap-row button { border: 3px solid var(--rc); border-radius: 50%; padding: 2px; background: rgba(6,10,36,0.6); }
.unit-card .swap-row button:active { transform: scale(0.92); }
/* legendarias: borde con brillo que recorre el marco */
.unit-card.rar-legendaria { animation: popIn 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), legendGlow 2.2s ease-in-out 0.3s infinite; }
@keyframes legendGlow { 50% { box-shadow: 0 0 0 3px var(--gold-dark), 0 10px 0 var(--gold-dark), 0 0 34px 8px rgba(255,176,32,0.55), inset 0 0 0 3px rgba(255,255,255,0.12); } }
.unit-card.rar-legendaria .uc-rays { opacity: 1; animation-duration: 10s; }
/* míticas: el mismo brillo en su rojo, más rápido */
.unit-card.rar-mitica { animation: popIn 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), mythGlow 1.6s ease-in-out 0.3s infinite; }
@keyframes mythGlow { 50% { box-shadow: 0 0 0 3px var(--gold-dark), 0 10px 0 var(--gold-dark), 0 0 40px 10px rgba(255,59,107,0.6), inset 0 0 0 3px rgba(255,255,255,0.14); } }
.unit-card.rar-mitica .uc-rays { opacity: 1; animation-duration: 6s; }

/* filtros por rareza de la colección */
.coll-empty { grid-column: 1 / -1; text-align: center; }

/* ---------- tienda ---------- */
.sh-head { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 2px 8px; }
.sh-head h3 { margin: 0; font-family: 'Lilita One'; font-weight: 400; font-size: 1.3rem; text-shadow: 0 2px 0 var(--ink); }
.sh-head small { color: var(--muted); font-size: 0.75rem; }
.sh-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sh-offer, .sh-chest, .sh-gold {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px;
  background: linear-gradient(180deg, #2b3c8f, #1a2563); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink);
}
/* cartas de la tienda: con el marco de la tienda y un brillo del color de su rareza */
.sh-offer { padding: 16px 14px 14px; border: 0; box-shadow: none; background: url(assets/ui/marco-tienda.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rc) 65%, transparent)); }
.sh-offer .sh-price { min-width: 0; width: 100%; }
.sh-offer img { width: 70px; height: 70px; margin-top: 8px; }
.sh-offer b, .sh-chest b, .sh-gold b { font-size: 0.95rem; }
.sh-rar { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); background: var(--rc); color: #1a1030; font-size: 0.66rem; padding: 1px 8px; border-radius: 8px; border: 2px solid var(--ink); white-space: nowrap; }
.sh-n { color: var(--muted); font-size: 0.75rem; }
.sh-price { margin-top: 4px; min-width: 76%; padding: 4px 8px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(180deg, #6fe08a, #2a9a4b); font-family: 'Lilita One'; font-size: 1rem; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.sh-price.poor { background: linear-gradient(180deg, #7a809c, #4b506a); }
.sh-price.sold { background: rgba(0,0,0,0.35); color: var(--muted); }
.sh-offer.sold { opacity: 0.6; }
.sh-offer.sold img { filter: grayscale(0.7); }
.sh-chests, .sh-golds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-chest { border-color: var(--cc); }
.sh-chest-pic { width: 88%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 8px var(--cc)); }
.sh-gold-pic { width: 70%; aspect-ratio: 1; object-fit: contain; }
.sh-chest .sh-price, .sh-gold .sh-price { min-width: 0; width: 100%; }
.sh-offer:active { transform: translateY(3px); }
.sh-chest:active, .sh-gold:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* ---------- apertura del cofre ---------- */
.chest-fx { position: fixed; inset: 0; z-index: 70; overflow: hidden; cursor: pointer; touch-action: none; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: opacity 0.25s; }
.chest-fx.out { opacity: 0; pointer-events: none; }
.cfx-dim { position: absolute; inset: 0; background: rgba(8,10,30,0.8); opacity: 0; transition: opacity 0.3s; }
.chest-fx.open .cfx-dim { opacity: 1; }
.cfx-at { position: absolute; transform: translate(-50%, -50%); transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.5, 1); }
.cfx-chest { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.cfx-chest.shake { animation: cfxShake 0.3s linear forwards; }
@keyframes cfxShake {
  0% { transform: scale(1); }
  20% { transform: scale(1.2) translateX(-4%) rotate(-7deg); }
  40% { transform: scale(1.2) translateX(4%) rotate(6deg); }
  60% { transform: scale(1.2) translateX(-3%) rotate(-5deg); }
  80% { transform: scale(1.2) translateX(2%) rotate(3deg); }
  100% { transform: scale(1.2); }
}
.cfx-chest.opened { transform: scale(1.2); animation: cfxPop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); filter: drop-shadow(0 0 16px var(--cc)); }
@keyframes cfxPop { from { transform: scale(1.38, 1.08); } }
.cfx-rays { position: absolute; left: 50%; top: 42%; width: 280%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.3s; }
.chest-fx.open .cfx-rays { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cfx-rays img { display: block; width: 100%; height: 100%; animation: cfxSpin 10s linear infinite; }
@keyframes cfxSpin { to { transform: rotate(1turn); } }
.cfx-coin { position: absolute; z-index: 2; width: 26px; pointer-events: none; }
.cfx-card {
  position: absolute; left: 0; top: 0; z-index: 3; width: 168px; padding: 18px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(180deg, #2b3c8f, #182260); border: 4px solid var(--rc, var(--gold)); border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink), 0 0 34px 8px color-mix(in srgb, var(--rc, var(--gold)) 55%, transparent);
}
.cfx-card img { width: 112px; height: 112px; object-fit: contain; }
.cfx-card b { font-size: 1.15rem; text-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.cfx-card small { color: var(--gold); font-family: 'Lilita One'; font-size: 1.25rem; text-shadow: 0 2px 0 var(--ink); }
.cfx-card.r-epica, .cfx-card.r-legendaria, .cfx-card.r-mitica { box-shadow: 0 6px 0 var(--ink), 0 0 50px 14px color-mix(in srgb, var(--rc) 65%, transparent); }
.cfx-card.r-legendaria { background: linear-gradient(180deg, #4a3a9f, #241a6a); }
.cfx-card.r-mitica { background: linear-gradient(180deg, #8a1f45, #3a0a24); }
.cfx-gold { --rc: #ffd166; }
.cfx-gold img { width: 100px; height: 100px; }
.cfx-gold b { font-family: 'Lilita One'; font-weight: 400; font-size: 1.6rem; color: var(--gold); }
.cfx-rar { position: absolute; top: -13px; background: var(--rc, var(--gold)); color: #1a1030; font-size: 0.78rem; padding: 1px 10px; border-radius: 9px; border: 2px solid var(--ink); white-space: nowrap; }
.cfx-new { position: absolute; top: 10px; right: -10px; transform: rotate(12deg); padding: 2px 8px; border-radius: 8px; background: linear-gradient(180deg, #ff6a7d, #c22a44); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); font-size: 0.78rem; font-weight: 900; white-space: nowrap; }
.chest-card { position: relative; }
.chest-card.fresh::before { content: '¡Nueva!'; position: absolute; top: -8px; right: -6px; padding: 0 5px; border-radius: 6px; background: #c22a44; border: 2px solid #fff; font-size: 0.55rem; font-weight: 900; transform: rotate(10deg); }
.cfx-bar { position: relative; width: 100%; height: 16px; margin-top: 6px; border-radius: 8px; background: rgba(0,0,0,0.45); border: 2px solid var(--ink); overflow: hidden; }
.cfx-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3aa0ff, #6fd2ff); }
.cfx-bar.full span { background: linear-gradient(90deg, #4caa12, #c4f74a); }
.cfx-bar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 0.68rem; line-height: 12px; font-weight: 900; text-shadow: 0 1px 0 var(--ink); }
.cfx-chest.opened.bump { animation: cfxPop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cfx-flash { position: absolute; inset: 0; z-index: 4; background: #fff; pointer-events: none; }
/* contador de lo que queda en el cofre, en su esquina */
.cfx-left { position: absolute; z-index: 2; transform: translate(-50%, -50%); min-width: 54px; padding: 4px 8px 3px; text-align: center; border-radius: 14px; background: linear-gradient(180deg, #ff6a7d, #c22a44); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); opacity: 0; }
.cfx-left b { display: block; font-family: 'Lilita One'; font-weight: 400; font-size: 1.5rem; line-height: 1; text-shadow: 0 2px 0 var(--ink); }
.cfx-left small { display: block; font-size: 0.62rem; font-weight: 900; line-height: 1.1; }
.cfx-left.tick { opacity: 1; animation: cfxTick 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cfx-left.none { opacity: 0; }
@keyframes cfxTick { from { transform: translate(-50%, -50%) scale(1.4); } }
.cfx-hint { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--ink); animation: cfxHint 1.2s ease-in-out infinite; }
@keyframes cfxHint { 50% { opacity: 0.45; } }
.cfx-skip { position: absolute; z-index: 5; top: calc(12px + env(safe-area-inset-top)); right: 12px; padding: 6px 14px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.35); color: #fff; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s; }
.chest-fx.open .cfx-skip { opacity: 1; }
/* botón de los cofres: dorado, sin el reflejo ovalado de los demás */
.btn.chest-ok {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #ffe680 0%, #ffc61a 50%, #f59a00 100%); border: 3px solid #fff6c4;
  box-shadow: 0 0 0 3px var(--gold-dark), 0 6px 0 3px var(--gold-dark), inset 0 -5px 0 rgba(160,80,0,0.35);
  color: #fff; font-family: 'Lilita One'; font-weight: 400; font-size: 1.45rem; letter-spacing: 0.5px; text-shadow: 0 2px 0 #8a4b00, 0 0 3px #8a4b00;
}
.btn.chest-ok::after { left: 6px; right: 6px; top: 3px; height: 40%; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); }
.btn.chest-ok:active { transform: translateY(4px); box-shadow: 0 0 0 3px var(--gold-dark), 0 2px 0 3px var(--gold-dark), inset 0 -5px 0 rgba(160,80,0,0.35); }
.btn.chest-ok span { font-size: 1rem; padding: 2px 10px; border-radius: 10px; background: rgba(90,40,0,0.35); text-shadow: 0 1px 0 #5a2a00; }
.btn.chest-ok.poor { filter: grayscale(0.85) brightness(0.85); }
.chest-modal .btn.chest-ok, .chest-info .btn.chest-ok { margin-top: 14px; }
/* resumen del cofre: compacto y con el botón siempre a la vista en el móvil */
.chest-modal { padding-bottom: 0; }
.chest-modal .chest-pic { height: 118px; }
.chest-modal .chest-pic-img { width: 112px; height: 112px; }
.chest-modal .chest-pic-rays { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
.chest-modal .chest-cards { gap: 6px; margin: 8px 0 0; }
.chest-modal .chest-card { width: 66px; padding: 3px; }
.chest-modal .chest-card img { width: 48px; height: 48px; }
.chest-modal .btn.chest-ok { position: sticky; bottom: 0; margin: 12px 0 16px; }
.chest-modal::after { content: ''; display: block; height: 1px; }
/* ficha del cofre */
.chest-pic.closed .chest-pic-rays { opacity: 0.35; }
.ci-loot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.ci-loot span { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 2px solid var(--ink); font-size: 0.72rem; color: var(--muted); font-weight: 800; }
.ci-loot b { font-family: 'Lilita One'; font-weight: 400; font-size: 1.05rem; color: #fff; white-space: nowrap; }
.ci-t { margin: 12px 0 6px; font-family: 'Lilita One'; font-weight: 400; font-size: 1.05rem; text-align: left; }
.ci-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin-top: 5px; border-radius: 12px; background: rgba(0,0,0,0.25); text-align: left; }
.ci-row i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rc); border: 2px solid var(--ink); box-shadow: 0 0 8px var(--rc); }
.ci-row span { flex: 1; display: flex; flex-direction: column; }
.ci-row b { font-size: 0.95rem; color: var(--rc); text-shadow: 0 1px 0 var(--ink); }
.ci-row small { font-size: 0.68rem; color: var(--muted); }
.ci-row em { font-style: normal; font-family: 'Lilita One'; font-size: 1.1rem; white-space: nowrap; }
.modal-card .ci-note { margin: 8px 0 0; font-size: 0.72rem; color: var(--muted); }
.chest-pic { position: relative; height: 150px; margin: -6px -16px 0; overflow: hidden; display: grid; place-items: center; }
.chest-pic-rays { position: absolute; left: 50%; top: 50%; width: 290px; height: 290px; margin: -145px 0 0 -145px; opacity: 0.75; animation: cfxSpin 12s linear infinite; }
.chest-pic-img { position: relative; width: 140px; height: 140px; object-fit: contain; animation: popIn 0.4s, bob 2s 0.4s ease-in-out infinite; }

/* ---------- ficha: mini partida ---------- */
.uc-demo { position: relative; margin: 8px 0 4px; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.uc-demo canvas { display: block; width: 100%; height: 118px; }
.uc-demo span { position: absolute; top: 4px; left: 6px; font-size: 0.62rem; background: rgba(0,0,0,0.45); padding: 1px 7px; border-radius: 8px; color: #fff; }

/* ---------- barra de pestañas ---------- */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 560px; margin: 0 auto;
  padding: 8px 8px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #24357f, #141c52); border: 3px solid var(--ink); border-bottom: 0; border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.35);
}
.navbar button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 4px;
  background: none; border: 3px solid transparent; border-radius: 14px; transition: transform 0.12s;
}
.navbar i { font-style: normal; font-size: 1.5rem; line-height: 1; filter: grayscale(0.4); opacity: 0.8; }
.navbar span { font-size: 0.72rem; color: var(--muted); }
.navbar button.on { background: linear-gradient(180deg, #ffd166, #f08a24); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: translateY(-8px); }
.navbar button.on i { filter: none; opacity: 1; }
.navbar button.on span { color: #3a1d00; }
.navbar button.locked { opacity: 0.55; }
.navbar button.locked b { position: absolute; top: 2px; right: 14%; font-size: 0.8rem; }
.navbar button:active { transform: translateY(2px); }

/* pestañas dentro de Mazo */
.sub-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin-bottom: 12px; background: rgba(0,0,0,0.3); border: 3px solid var(--ink); border-radius: 16px; }
.sub-tabs button { padding: 8px 4px; border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: 0.95rem; }
.sub-tabs button.on { background: linear-gradient(180deg, #ffd166, #f08a24); color: #3a1d00; box-shadow: 0 3px 0 var(--ink); }

/* ---------- códigos ---------- */
.code-ico { font-size: 3rem; filter: drop-shadow(0 0 12px #b48bff); }
.code-in {
  width: 100%; margin-top: 4px; padding: 12px; font: inherit; font-size: 1.3rem; text-align: center; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: #0e1430; border: 3px solid var(--ink); border-radius: 14px; user-select: text; -webkit-user-select: text; outline: none;
}
.code-in:focus { border-color: #b48bff; box-shadow: 0 0 0 3px rgba(180,139,255,0.35); }
.code-err { color: #ff8a9a; margin: 8px 0 0; font-size: 0.9rem; }
@media (max-height: 680px) {
  .chest-info .chest-pic { height: 112px; }
  .chest-info .chest-pic-img { width: 104px; height: 104px; }
  .chest-info .ci-row { padding: 4px 10px; }
}

/* ---------- huecos de cofre (pantalla principal) ---------- */
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.slot {
  position: relative; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px 2px 6px;
  border-radius: 14px; border: 3px solid #e0b400; background: linear-gradient(180deg, #2b3c8f, #1a2563); box-shadow: 0 0 0 2px var(--gold-dark), 0 5px 0 var(--gold-dark);
}
.slot:active { transform: translateY(3px); }
.slot.empty { justify-content: center; border: 3px dashed rgba(255,255,255,0.22); background: rgba(0,0,0,0.22); box-shadow: none; }
.slot.empty span { font-size: 0.62rem; color: var(--muted); font-weight: 800; }
.slot img { position: absolute; top: 4px; left: 50%; width: 78%; aspect-ratio: 1; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 0 6px var(--cc)); }
.slot b { position: relative; font-size: 0.78rem; white-space: nowrap; text-shadow: 0 2px 0 var(--ink); }
.slot small { position: relative; font-size: 0.6rem; color: var(--muted); font-weight: 800; white-space: nowrap; }
.slot.unlocking { border-color: var(--rarity-rare); box-shadow: 0 0 0 2px #0d2a5a, 0 5px 0 #0d2a5a; }
.slot.unlocking b { color: #9ad6ff; }
.slot.ready { border-color: var(--gold-frame); background: linear-gradient(180deg, #3a62d0, #1d2c78); animation: glow 1.2s ease-in-out infinite; }
.slot.ready img { animation: slotBob 1.4s ease-in-out infinite; }
@keyframes slotBob { 50% { transform: translateX(-50%) translateY(-4px) scale(1.05); } }
.slot-go { color: var(--gold); font-family: 'Lilita One'; font-weight: 400; font-size: 1.05rem !important; }
.btn.chest-ok.alt { background: linear-gradient(180deg, #7cc4ff 0%, #3a8dff 50%, #1f5fd0 100%); border-color: #d6ecff; box-shadow: 0 0 0 3px #0d2a5a, 0 6px 0 3px #0d2a5a, inset 0 -5px 0 rgba(0,30,90,0.35); text-shadow: 0 2px 0 #0d2a5a; }
.btn.chest-ok.alt span { background: rgba(0,20,70,0.35); text-shadow: 0 1px 0 #0d2a5a; }
.modal-card .ci-wait { margin: 12px 0 0; font-size: 0.95rem; }
.modal-card .ci-wait b { color: #9ad6ff; }

/* =========================================================
   Partida: franja de la próxima oleada, tutorial y barra estrecha
   ========================================================= */
.wave-info {
  position: absolute; left: 8px; right: 8px; top: 6px; z-index: 3; height: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 10px;
  background: rgba(12,16,48,0.78); border: 2px solid var(--ink); border-radius: 12px; pointer-events: none;
}
.wi-now { display: flex; flex-direction: column; line-height: 1.05; flex-shrink: 0; }
.wi-now b { font-family: 'Lilita One'; font-weight: 400; font-size: 0.95rem; text-shadow: 0 2px 0 var(--ink); }
.wi-now small { font-size: 0.68rem; color: var(--muted); }
.wi-next { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.wi-next > small { font-size: 0.68rem; color: var(--muted); margin-right: 2px; }
.wi-last { font-family: 'Lilita One'; font-weight: 400; font-size: 0.9rem; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.wi-chip { display: inline-flex; align-items: center; font-style: normal; font-size: 0.72rem; font-weight: 900; white-space: nowrap; }
.wi-chip img { width: 30px; height: 30px; margin-right: -3px; }
.wi-chip.boss { color: var(--gold); }
.wi-chip.ev img { width: 26px; height: 26px; margin: 0 0 0 2px; }
.coach {
  position: absolute; left: 10px; right: 10px; z-index: 6; padding: 8px 12px; text-align: center;
  font-size: 0.85rem; line-height: 1.3; color: #1a1030; background: #fff8d6; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink); pointer-events: none; animation: coachIn 0.35s ease;
}
.coach b { color: #b2470e; }
.coach.top { top: 6px; }
.coach.bottom { bottom: 8px; }
.unit-info:not([hidden]) ~ .coach.bottom { bottom: 96px; }
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } }
.b-wave { min-width: 0; }
.b-wave b { white-space: nowrap; }
@media (max-width: 380px) {
  .b-top { gap: 4px; }
  .heart { width: 15px; height: 14px; }
  .b-wave b { font-size: 0.92rem; }
}

/* Resultado: daño por tropa */
.res-dmg { margin: 10px 0 4px; text-align: left; }
.res-dmg h3 { font-size: 0.85rem; margin: 0 0 6px; text-align: center; color: var(--muted); }
.rd-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rd-row img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.rd-bar { position: relative; flex: 1; height: 24px; border-radius: 8px; background: rgba(0,0,0,0.3); overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.rd-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffd166, #e09a12); opacity: 0.55; }
.rd-bar b, .rd-bar em { position: relative; font-size: 0.75rem; font-style: normal; text-shadow: 0 1px 0 var(--ink); }

/* Ficha de una tropa que aún no tienes y ofertas de tropas nuevas */
.unit-card.locked .uc-img { filter: grayscale(0.4) brightness(0.85); }
.uc-get { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 6px; padding: 8px 10px; border-radius: 14px; background: rgba(6,10,36,0.45); border: 1px solid rgba(255,214,90,0.25); }
.uc-get b { color: var(--gold); }
.uc-get small { font-size: 0.8rem; color: #dfe6ff; }
.sh-new { position: absolute; top: 14px; right: 10px; z-index: 1; background: #ff4f7b; color: #fff; font-size: 0.62rem; font-weight: 900; padding: 1px 6px; border-radius: 8px; border: 2px solid var(--ink); transform: rotate(8deg); }

/* =========================================================
   Pantalla principal ilustrada: barra de recursos, mazo, botón
   de jugar, huecos de cofre, modos y barra de pestañas
   ========================================================= */
/* barra de recursos sobre el marco azul y oro */
.res-bar {
  padding: 13px 16px 15px; margin: 0 -4px 8px; gap: 5px; flex-wrap: nowrap;
  background: url(assets/ui/header.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4));
}
.res-bar .pill { background: rgba(0,0,0,0.28); border-color: rgba(245,196,0,0.45); padding: 3px 9px; font-size: 0.85rem; white-space: nowrap; }

/* mazo: un retrato en cada aro del banner (centros en DECK_RINGS de ui.js) */
.deck-preview {
  position: relative; display: block; width: min(100%, 380px); aspect-ratio: 930 / 278; margin: 2px auto 12px;
  background: url(assets/ui/banner-mazo.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4));
}
.deck-preview img, .deck-preview img[style] {
  position: absolute; top: 49.8%; width: 15%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35));
}

/* botón de jugar */

/* huecos de cofre con su marco de madera y piedra */
.slot {
  height: auto; aspect-ratio: 858 / 853; padding: 0 10% 15%; border: 0; border-radius: 0; box-shadow: none;
  background: url(assets/ui/hueco-cofre.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4));
}
.slot img { top: 9%; width: 60%; }
.slot.empty { border: 0; background: url(assets/ui/hueco-cofre.webp) center / 100% 100% no-repeat; padding: 0 16%; }
.slot.empty span { max-width: 70%; white-space: normal; color: rgba(220,228,255,0.55); text-align: center; line-height: 1.15; }
.slot.unlocking { box-shadow: none; filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4)) drop-shadow(0 0 6px var(--rarity-rare)); }
.slot.ready { background: url(assets/ui/hueco-cofre.webp) center / 100% 100% no-repeat; animation: slotGlow 1.2s ease-in-out infinite; }
@keyframes slotGlow { 50% { filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4)) drop-shadow(0 0 10px rgba(255,209,102,0.95)); } }

/* modos: banner de madera con el icono en el aro de la izquierda */

/* barra de pestañas sobre el marco azul y oro (con la joroba en el centro) */
.navbar {
  padding-top: 16px; border: 0; border-radius: 0; box-shadow: none;
  background: url(assets/ui/navbar.webp) center top / 100% 100% no-repeat;
  filter: drop-shadow(0 -4px 8px rgba(0,0,0,0.35));
}

/* Letras de cartel en la pantalla principal: Lilita One blanca o
   amarilla clara, contorno marrón oscuro grueso y sombra por debajo,
   para que los textos parezcan parte de las ilustraciones.
   (el contorno va por detrás del relleno, así que se ve la mitad del grosor) */
:root { --edge: #2b1606; }
.logo p, .res-bar .pill b, .slot b, .slot small, .slot.empty span, .navbar span {
  font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: 0.03em;
  color: #fff; -webkit-text-stroke: 6px var(--edge); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--edge), 0 5px 6px rgba(0,0,0,0.45);
}
.logo p { color: #fff1b8; -webkit-text-stroke-width: 5px; text-shadow: 0 2px 0 var(--edge), 0 4px 5px rgba(0,0,0,0.4); }
.res-bar .pill { color: #fff; font-size: 0.9rem; }
.res-bar .pill.gold b { color: #ffe58a; }
.res-bar .pill b { -webkit-text-stroke-width: 5px; }
.slot b { -webkit-text-stroke-width: 5px; }
.slot.unlocking b { color: #c8ecff; }
.slot-go { color: #ffe58a; -webkit-text-stroke-width: 6px !important; }
.slot small, .slot.empty span { color: #fff1b8; -webkit-text-stroke-width: 4px; text-shadow: 0 2px 0 var(--edge); }
.slot.empty span { color: rgba(255,241,184,0.75); }
.navbar span { color: #fff1b8; -webkit-text-stroke-width: 4.5px; text-shadow: 0 2px 0 var(--edge); }
.navbar button.on span { color: #fff; }

/* título ilustrado y letrero de madera sobre el mazo */
.logo h1 { margin: 0; line-height: 0; }
.logo h1 img { width: min(260px, 68%); height: auto; filter: drop-shadow(0 6px 0 rgba(10,12,40,0.4)); animation: bob 3s ease-in-out infinite; }
.logo p { margin-top: 2px; }
@media (max-height: 760px) { .logo h1 img { width: min(170px, 46%); } }

/* =========================================================
   Iconos ilustrados (assets/icons) en lugar de emojis. Van en una
   etiqueta propia con la imagen de fondo (ver ico() en ui.js).
   ========================================================= */
x-ico {
  display: inline-block; flex-shrink: 0; width: 1.3em; height: 1.3em; margin: 0 0.06em; vertical-align: -0.3em;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}
.res-bar .pill x-ico { width: 1.75em; height: 1.75em; margin: -0.45em 0.12em -0.45em -0.55em; vertical-align: -0.55em; }
.back-bar .pill x-ico { width: 1.45em; height: 1.45em; margin: -0.3em 0.08em -0.3em -0.3em; vertical-align: -0.42em; }
.navbar i x-ico { width: 1.45em; height: 1.45em; margin: 0; vertical-align: 0; }
.navbar b x-ico { width: 1.4em; height: 1.4em; }
.res-emoji x-ico { width: 1.5em; height: 1.5em; }
.code-ico x-ico, .chest-ico x-ico { width: 1.4em; height: 1.4em; }
.sh-price x-ico, .btn x-ico { width: 1.4em; height: 1.4em; vertical-align: -0.38em; }

/* Tarjetas de la tienda (ofertas, cofres y oro) con el mismo marco de
   madera y pizarra (assets/ui/tarjeta-tienda.webp). Va como border-image
   para que las esquinas no se deformen en las tarjetas altas. */
.sh-offer, .sh-chest, .sh-gold {
  padding: 0 0 2px; gap: 2px; border-radius: 0; box-shadow: none; background: none;
  border: 21px solid transparent; border-image: url(assets/ui/tarjeta-tienda.webp) 21% fill / 21px stretch;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.45));
}
/* luz del color de la rareza (o del cofre) detrás del dibujo */
.sh-offer::before, .sh-chest::before {
  content: ''; position: absolute; inset: -4px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rc, var(--cc)) 42%, transparent), transparent 68%);
}
.sh-offer { filter: drop-shadow(0 4px 0 rgba(10,12,40,0.45)) drop-shadow(0 0 5px color-mix(in srgb, var(--rc) 60%, transparent)); }
.sh-offer img { margin-top: 4px; }
.sh-chest-pic { filter: none; }
.sh-rar { top: -29px; }
.sh-new { top: -12px; right: -14px; }
.sh-chest:active, .sh-gold:active, .sh-offer:active { transform: translateY(3px); box-shadow: none; filter: drop-shadow(0 1px 0 rgba(10,12,40,0.45)); }
x-ico.off { filter: grayscale(1) brightness(0.45); opacity: 0.75; }
.stage-s x-ico { width: 1.15em; height: 1.15em; margin: 0 -0.05em; }
.res-stars x-ico { width: 1.1em; height: 1.1em; margin: 0 0.04em; filter: drop-shadow(0 3px 0 var(--ink)); }
.res-stars x-ico.off { filter: grayscale(1) brightness(0.45) drop-shadow(0 3px 0 var(--ink)); }

/* barra de recursos: icono centrado en altura con el número */
.res-bar .pill { display: inline-flex; align-items: center; }
.res-bar .pill x-ico { vertical-align: 0; margin: -0.5em 0.14em -0.5em -0.55em; }

/* =========================================================
   Comandantes: tarjeta de madera y piedra (assets/ui/tarjeta-comandante)
   con el cuerpo entero dentro, nombre en la placa y su medallón
   encendido; debajo, la habilidad del elegido con su efecto.
   ========================================================= */
/* el mismo marco para todos (assets/ui/tarjeta-comandante-2: el de siempre sin la fila de medallones) */
.pause-opt i x-ico { width: 1.2em; height: 1.2em; margin: 0; }

/* =========================================================
   Inicio al estilo del género: título con atajos a los lados,
   huecos de cofre, panel del mazo con el banner del comandante
   y tres botones de jugar (duelo, campaña y cooperativo)
   ========================================================= */
.home-top { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 4px; margin: 0 0 6px; }
.home-top .logo { margin: 0; }
.home-top .logo h1 img { width: min(230px, 100%); }
.side-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.side-btn { display: flex; flex-direction: column; align-items: center; gap: 0; width: 64px; padding: 0; border: 0; background: none; box-shadow: none; }
.side-btn::after { display: none; }
.side-btn img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(10,12,40,0.5)); }
.side-btn.glow img { animation: sideGlow 1.2s ease-in-out infinite; }
@keyframes sideGlow { 50% { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 3px 0 rgba(10,12,40,0.5)) drop-shadow(0 0 8px rgba(255,209,102,0.95)); } }
.side-btn:active { transform: translateY(3px); }
.side-btn span, .cmd-banner b, .cmd-banner small, .cb-slot {
  font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: 0.03em; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 4.5px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge);
}
.side-btn span { margin-top: -4px; font-size: 0.78rem; color: #fff1b8; }

/* panel del mazo: banner del comandante encima de los cinco aros */
.deck-panel { width: min(100%, 380px); margin: 24px auto 6px; }
.cmd-banner {
  position: relative; display: block; width: 100%; aspect-ratio: 1177 / 336; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url(assets/ui/banner-comandante.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4));
}
.cmd-banner::after { display: none; }
.cmd-banner:active { transform: translateY(2px); }
/* la figura del comandante asoma por encima del banner */
.cmd-banner img { position: absolute; left: 4%; bottom: 10%; height: 118%; width: auto; max-width: 30%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45)); }
.cb-txt { position: absolute; left: 31%; right: 34%; top: 50%; transform: translateY(-50%); text-align: left; line-height: 1.05; }
.cb-txt small { display: block; font-size: 0.72rem; color: #fff1b8; -webkit-text-stroke-width: 4px; }
.cb-txt b { display: block; font-size: clamp(0.9rem, 4.4vw, 1.15rem); line-height: 1; white-space: normal; -webkit-text-stroke-width: 6px; text-shadow: 0 3px 0 var(--edge); }
.cb-slot {
  position: absolute; left: 67.4%; width: 19.9%; top: 33.3%; height: 33.1%;
  display: grid; place-items: center; font-size: clamp(0.85rem, 4.2vw, 1.05rem); color: #ffe58a;
}
.deck-panel .deck-preview { width: 100%; margin: -2px 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.deck-panel .deck-preview::after { display: none; }
.deck-panel .deck-preview:active { transform: translateY(2px); }

/* tres botones de jugar */
@media (max-height: 760px) {
  .home-top { margin-bottom: 2px; }
  .home-top .logo h1 img { width: min(140px, 100%); }
  .side-btn img { width: 36px; height: 36px; }
  .side-btn span { font-size: 0.7rem; }
  .side-col { gap: 2px; }
  .slots { width: 76%; margin: 0 auto 4px; gap: 6px; }
  .deck-panel { width: min(100%, 300px); margin-top: 14px; }
}

/* opciones: sonido y restablecer juego */
.modal-card.options .sound-row { margin: 6px 0 12px; font-size: 1.05rem; color: #fff; }
.modal-card.options .sound-row input { width: 22px; height: 22px; }
.modal-card.options .foot { margin-top: 12px; }

/* habilidad del comandante lista: el aro brilla mucho y late, con rayos que
   giran por detrás y una onda que sale del aro */
.cmd-wrap { position: relative; flex-shrink: 0; }
.cmd-wrap .cmd-btn { position: relative; z-index: 1; }
.cmd-rays {
  position: absolute; left: 50%; top: 50%; width: 170%; height: 170%; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(circle, color-mix(in srgb, var(--cc, #7fd6ff) 75%, transparent) 0%, transparent 62%), url(assets/chests/destello.webp) center / contain no-repeat;
}
.cmd-btn.ready + .cmd-rays { opacity: 1; animation: cmdRays 5s linear infinite; }
@keyframes cmdRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* solo transform y opacidad: animar filtros aquí hacía que Safari no
   repintara el botón de invocar de al lado */
.cmd-btn.ready { animation: cmdReady 0.9s ease-in-out infinite; }
@keyframes cmdReady { 50% { transform: scale(1.1); } }
.cmd-wrap::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 130%; height: 130%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--cc) 35%, transparent 70%); opacity: 0; transform: translate(-50%, -50%);
}
.cmd-wrap:has(.cmd-btn.ready)::before { animation: cmdGlow 0.9s ease-in-out infinite; }
@keyframes cmdGlow { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }
.cmd-btn.ready::after {
  content: ''; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  border: 3px solid var(--cc); box-shadow: 0 0 10px var(--cc);
  animation: cmdWave 1.2s ease-out infinite;
}
@keyframes cmdWave { from { transform: scale(0.9); opacity: 0.95; } to { transform: scale(1.6); opacity: 0; } }
.summon-btn.full small { color: #fff1b8; }

/* sin maná: la misma pieza en gris (cambiar la imagen en vez de un filtro;
   en Safari el filtro a veces se quedaba puesto con maná de sobra) */
.summon-btn.poor { border-image-source: url('assets/ui/boton-invocar-gris.webp'); text-shadow: 0 2px 0 #3a3c4a, 0 0 3px #3a3c4a; }
.summon-btn.poor small { text-shadow: 0 1px 0 #3a3c4a, 0 0 2px #3a3c4a; }

/* ficha de tropa: pestañas Vídeo y Stats */
.uc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 2px; }
.uc-tabs button {
  padding: 6px 0; border-radius: 12px; border: 2px solid rgba(255,214,90,0.35); background: rgba(6,10,36,0.45);
  font-family: 'Lilita One', 'Nunito', sans-serif; font-size: 0.95rem; color: #c9d4f0;
}
.uc-tabs button.on { background: linear-gradient(180deg, #ffd34d, #f08a24); border-color: #3a2600; color: #3a1d00; box-shadow: 0 3px 0 #3a2600; }
.uc-pane .uc-demo canvas { height: 150px; }
/* vista previa de la mejora */
.uc-preview { margin: 8px 0 6px; padding: 8px 10px; border-radius: 14px; background: rgba(40,140,40,0.18); border: 2px solid rgba(141,255,122,0.5); animation: popIn 0.25s ease; }
.uc-preview > b { display: block; text-align: center; font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; color: #fff1b8; margin-bottom: 4px; }
.ucp-row { display: grid; grid-template-columns: 22px 1fr auto 44px; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.85rem; }
.ucp-row i { font-style: normal; text-align: center; }
.ucp-row em { font-style: normal; color: #dfe6ff; white-space: nowrap; }
.ucp-row em b { color: #8dff7a; }
.ucp-row small { text-align: right; font-weight: 900; color: #8dff7a; }

/* =========================================================
   Pulido visual (docs/informe-ui-ux.md)
   ========================================================= */
/* tres acabados de texto: grande, etiqueta y número */

/* botón de jugar: late con «scale» (así el «transform» de :active sigue
   hundiéndolo) y un brillo lo cruza cada pocos segundos, recortado a la
   forma del dibujo */
@keyframes playPulse { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }


/* hueco de cofre vacío: silueta apagada de un cofre en la piedra */
.slot.empty::before {
  content: ''; position: absolute; left: 24%; right: 24%; top: 18%; bottom: 30%; pointer-events: none;
  background: url(assets/chests/madera.webp?v=2) center / contain no-repeat;
  filter: grayscale(1) brightness(0.35); opacity: 0.45;
}
.slot.empty span { position: relative; }

/* hueco para la figura de la comandante, que asoma por encima del banner */
.deck-panel { margin-top: 30px; }
/* huecos de cofre abajo del todo, debajo de los botones de jugar */
/* texto de ayuda legible sobre el azul */
.lead { color: rgba(255,255,255,0.85); }

/* ofertas de la tienda: marco y fondo del color de su rareza
   (assets/ui/tienda-<rareza>.webp), cortado en nueve para que los
   adornos de las esquinas no se deformen */
.sh-offer[class*=" r-"] {
  border-image-slice: 17% 21% fill; border-image-width: 46px 36px; border-image-outset: 6px 4px; border-image-repeat: stretch;
  padding: 6px 0 4px;
}
.sh-offer.r-comun { border-image-source: url(assets/ui/tienda-comun.webp); }
.sh-offer.r-rara { border-image-source: url(assets/ui/tienda-rara.webp); }
.sh-offer.r-epica { border-image-source: url(assets/ui/tienda-epica.webp); }
.sh-offer.r-mitica { border-image-source: url(assets/ui/tienda-mitica.webp); }
.sh-offer.r-legendaria { border-image-source: url(assets/ui/tienda-legendaria.webp); }
.sh-offer b, .sh-offer .sh-n {
  font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; color: #fff;
  -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge);
}
.sh-offer .sh-n { color: #fff1b8; -webkit-text-stroke-width: 4px; }

/* botón 2.5D: contorno, canto, cara en degradado y brillo de caramelo.
   Al pulsar baja lo mismo que mide el canto. */
/* los precios de la tienda, con el mismo volumen */
.sh-price { position: relative; box-shadow: 0 4px 0 #1d6b23, inset 0 -4px 0 rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.55); }
.sh-price.poor { box-shadow: 0 4px 0 #4b5263, inset 0 -4px 0 rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.35); }
.sh-price.sold { box-shadow: none; }

/* Mazo: ordenar la colección por rareza o por tipo (elemento) */
.coll-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 8px; }
.coll-head h3 { margin: 0; }
.sort-sw { display: flex; align-items: center; gap: 4px; padding: 3px; background: rgba(0,0,0,0.3); border: 2px solid var(--ink); border-radius: 12px; }
.sort-sw small { padding: 0 4px 0 6px; color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.sort-sw button { padding: 4px 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 400 0.85rem 'Lilita One', sans-serif; }
.sort-sw button.on { background: linear-gradient(180deg, #ffd166, #f08a24); color: #3a1d00; box-shadow: 0 2px 0 var(--ink); }
.sort-sw button:active { transform: translateY(2px); }
.ef-ico x-ico { width: 1.25em; height: 1.25em; margin: 0 3px 0 0; vertical-align: -0.28em; }
.el-head {
  display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; padding: 6px 12px; border-radius: 12px;
  font: 400 1.05rem 'Lilita One', sans-serif; color: #fff; text-shadow: 0 2px 0 var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 45%, transparent), transparent 80%);
  border-left: 4px solid var(--ec);
}
.el-head .ef-ico x-ico { width: 1.5em; height: 1.5em; }
.el-head small { margin-left: auto; font: 800 0.72rem 'Nunito', sans-serif; color: var(--muted); text-shadow: none; }

/* Novedades (js/version.js) */
.patch-notes { max-height: 82vh; overflow-y: auto; text-align: left; }
.patch-notes h2, .patch-notes .code-ico { text-align: center; }
.pn-ver { margin: 0 0 8px; text-align: center; color: #ffe58a; font: 400 0.95rem 'Lilita One', sans-serif; }
.pn-list { margin: 0 0 12px; padding-left: 20px; font-size: 0.86rem; line-height: 1.35; }
.pn-list li { margin-bottom: 6px; }
.pn-old { margin: 4px 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,0.25); font-size: 0.8rem; }
.pn-old p { margin: 0 0 4px; }
.pn-old b { color: #ffe58a; margin-right: 4px; }

/* Partida: espera para recolocar tropas, al lado del maná */
.move-cd {
  position: relative; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 3px solid var(--ink);
  background: conic-gradient(#ffd166 var(--p, 360deg), rgba(6,10,36,0.6) 0);
  box-shadow: 0 0 0 2px var(--gold-dark), 0 3px 0 var(--ink);
}
.move-cd::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2b3c8f, #16215a); }
.move-cd::after { display: none; }
.move-cd img { position: relative; width: 26px; height: 26px; object-fit: contain; }
.move-cd b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 1.15rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.move-cd.cooling img { opacity: 0.35; filter: grayscale(1); }
.move-cd:not(.cooling) { animation: moveReady 1.6s ease-in-out infinite; }
@keyframes moveReady { 50% { box-shadow: 0 0 0 2px var(--gold-dark), 0 3px 0 var(--ink), 0 0 10px 2px rgba(255,209,102,0.85); } }
.move-cd:active { transform: translateY(2px); }
/* la barra de arriba con el contador: el texto de la oleada se encoge y,
   si no cabe, se corta en vez de pisar los corazones */
.b-top { gap: 4px; }
.b-wave { min-width: 0; overflow: hidden; }
.b-wave b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(0.8rem, 3.5vw, 1.05rem); }
.b-top .mana { width: 76px; }
.move-cd { width: 36px; height: 36px; }
.move-cd img { width: 23px; height: 23px; }
@media (max-width: 380px) {
  .b-top .heart { margin-right: -6px; }
  .wv-w { display: none; }
}

/* =========================================================
   Dirección de arte (docs/auditoria-direccion-arte.txt)
   ========================================================= */

/* 1. Campaña: placas de madera y pizarra (el mismo marco que la tienda)
   con una franja del color de su zona; la siguiente por jugar late */
.stage-list { gap: 10px; }
.stage {
  min-height: 78px; padding: 0 10px 0 6px; gap: 12px; border-radius: 0; background: none; box-shadow: none;
  border: 18px solid transparent; border-image: url(assets/ui/tarjeta-tienda.webp) 21% fill / 18px stretch;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.45));
}
.stage::before { content: ''; position: absolute; left: -8px; top: -6px; bottom: -6px; width: 7px; border-radius: 4px; background: var(--zc); box-shadow: 0 0 8px var(--zc); }
.stage::after { display: none; }
.stage-n {
  flex-shrink: 0; width: 44px; height: 48px; border: 3px solid var(--ink); border-radius: 10px 10px 50% 50% / 10px 10px 45% 45%;
  background: linear-gradient(180deg, #fff1a8, #f5c400 45%, #b8860b); color: #3a1d00; font-size: 1.35rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(0,0,0,0.4);
}
.stage-t b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.12rem; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.stage-t small { color: #cfd8ff; }
.stage.next { animation: stageNext 1.4s ease-in-out infinite; }
@keyframes stageNext { 50% { filter: drop-shadow(0 4px 0 rgba(10,12,40,0.45)) drop-shadow(0 0 10px var(--zc)); transform: scale(1.015); } }
.stage.locked { opacity: 1; filter: grayscale(0.85) brightness(0.65) drop-shadow(0 4px 0 rgba(10,12,40,0.45)); }
.stage.locked .stage-n { background: linear-gradient(180deg, #c9ced8, #7d8494 55%, #4b5263); color: #20242e; }
.stage:not(.locked):active { transform: translateY(3px); filter: drop-shadow(0 1px 0 rgba(10,12,40,0.45)); }

/* 1. Inicio: el botón de campaña manda (más ancho que duelo y cooperativo) */

/* 1. Botón secundario con la misma receta 2.5D: cara en degradado, filo de luz, canto y hundido igual al canto */
.btn-ghost { background: linear-gradient(180deg, #4a63c8, #263a8f); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -5px 0 rgba(0,0,0,0.25); }
.btn-ghost:active { transform: translateY(5px); box-shadow: 0 0 0 3px var(--ink), 0 1px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.3); }

/* 2. Regla de texto: títulos, etiquetas y cifras con contorno de tinta por fuera
   (paint-order) y sombra; los párrafos siguen en Nunito sin contorno */
.back-bar h2, .sh-head h3, .coll-head h3, .modal-card h2, .menu > h3 {
  font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink), 0 5px 6px rgba(0,0,0,0.35);
}
.pill b { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }

/* 3. Cartas de la colección con el marco y el fondo de su rareza (los mismos que la tienda) */

/* 7. Estandarte del comandante teñido con su color */
.cmd-banner::before {
  content: ''; position: absolute; inset: 8% 2% 8% 2%; pointer-events: none; border-radius: 8px;
  background: linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--cc) 55%, transparent) 55%, color-mix(in srgb, var(--cc) 30%, transparent));
  mix-blend-mode: soft-light;
}
.cb-slot { color: color-mix(in srgb, var(--cc) 55%, #fff); }
.cmd-banner img { filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45)) drop-shadow(0 0 10px color-mix(in srgb, var(--cc) 70%, transparent)); }
.stage { overflow: visible; }

/* Pestañas (Tropas / Comandante) y Ordenar: carril oscuro con borde dorado y
   la pestaña activa como botón naranja 2.5D; textos con contorno */
.sub-tabs, .sort-sw {
  background: linear-gradient(180deg, #121a44, #1c2760); border: 3px solid #e0b400;
  box-shadow: 0 0 0 2px var(--gold-dark), inset 0 3px 6px rgba(0,0,0,0.55), 0 4px 0 var(--gold-dark);
}
.sub-tabs button, .sort-sw button {
  position: relative; font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: 0.02em;
  color: #c9d4ff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink);
}
.sub-tabs button { font-size: 1.1rem; }
.sub-tabs button.on, .sort-sw button.on {
  color: #fff; border: 2px solid var(--ink);
  background: linear-gradient(180deg, #ffd35a 0%, #ffa22e 55%, #e0700f 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -4px 0 rgba(0,0,0,0.2), 0 3px 0 #8a4300;
}
.sub-tabs button.on::before, .sort-sw button.on::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 8%; height: 38%; pointer-events: none;
  border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
}
.sub-tabs button:active, .sort-sw button:active { transform: translateY(2px); }
.sort-sw small { font-family: 'Lilita One', sans-serif; font-weight: 400; color: #c9d4ff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* cifras de oro y gemas de las barras de arriba, como en el inicio */
.back-bar .pill b {
  font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: 0.03em; color: #fff;
  -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge);
}
.back-bar .pill.gold b { color: #ffe58a; }
.back-bar .pill.gem b { color: #bff4ff; }

/* Fichas de moneda (oro, gemas, trofeos, estrellas): base azul marino hundida,
   aro de oro macizo con canto y el icono como medalla asomando a la izquierda */
.back-bar .pill, .res-bar .pill {
  position: relative; display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 12px 0 27px; margin-left: 14px;
  border: 2px solid #f5c400; border-radius: 999px;
  background: linear-gradient(180deg, #0d1434 0%, #1b2766 100%);
  box-shadow: 0 0 0 2px var(--gold-dark), inset 0 2px 5px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.12), 0 3px 0 var(--gold-dark);
  font-size: 0; /* el espacio entre icono y cifra no cuenta */
}
.back-bar .pill x-ico, .res-bar .pill x-ico {
  position: absolute; left: -13px; top: 50%; width: 36px; height: 36px; margin: 0; transform: translateY(-50%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
.back-bar .pill b, .res-bar .pill b { font-size: 1.05rem; line-height: 1; }
.res-bar .pill:first-child { margin-left: 13px; }
/* gota de maná junto a una cifra: centrada con la cifra (flex), no a ojo */
.dcost, .summon-btn small { display: flex; align-items: center; justify-content: center; gap: 2px; }
.dcost .mi, .summon-btn small .mi { width: 0.85em; height: 1.05em; margin: 0; vertical-align: 0; flex-shrink: 0; }

/* Mejorar carta: misma receta que «Cerrar» (CSS, sin ilustración), en verde */
.btn-up {
  color: #fff; border: 4px solid #8fe08a;
  background: linear-gradient(180deg, #4fd06a, #22903c);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -5px 0 rgba(0,0,0,0.22);
  text-shadow: 0 2px 0 #145a24;
}
.btn-up:active { transform: translateY(5px); box-shadow: 0 0 0 3px var(--ink), 0 1px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.3); }
.btn-up:disabled { filter: grayscale(0.85) brightness(0.75); }

/* =========================================================
   Torneo, niveles de comandante y cofre de comandante
   ========================================================= */
.sh-chests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-chests .sh-chest-pic { width: 62%; }
.cmd-upbtn { display: block; width: 100%; margin-top: 10px; }
.cmd-why { margin: 4px 0 0; font-size: 0.8rem; color: #ffb3bc; text-align: center; }
.cfx-cmd { background: linear-gradient(180deg, #5a2fb8, #2a1466); box-shadow: 0 6px 0 var(--ink), 0 0 40px 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.cfx-cmd img { object-position: 50% 100%; }

/* =========================================================
   Filtros por rareza: pestañas de madera en horizontal
   (assets/ui/filtro-rareza-h.webp, de assets/filtros-tabs.jpg girada y con
   el canto de arriba rehecho a espejo del de abajo),
   en dos filas de tres. Nombre del color de su rareza con trazo de
   tinta y la cuenta en una chapa abajo. Las de elemento siguen igual.
   ========================================================= */

/* =========================================================
   Cartas de modo de la pantalla principal (assets/ui/modo-*):
   campaña, 1 contra 1, 2 contra la máquina y torneo
   ========================================================= */
.mode-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 380px); margin: 10px auto 4px; }
.mode-card {
  position: relative; padding: 0; border: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 5px 0 rgba(10,8,30,0.45)); transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
  animation: popIn 0.35s backwards;
}
.mode-card:nth-child(2) { animation-delay: 0.05s; } .mode-card:nth-child(3) { animation-delay: 0.1s; } .mode-card:nth-child(4) { animation-delay: 0.15s; }
.mode-card img { display: block; width: 100%; height: auto; }
.mode-card:active { transform: translateY(3px) scale(0.96); }
.mode-chip {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  padding: 1px 7px 1px 3px; border-radius: 999px; background: var(--ui-panel-bg); border: 2px solid var(--ui-gold);
  font: 400 0.72rem 'Lilita One', sans-serif; color: #fff;
}
.mode-chip x-ico { width: 1.25em; height: 1.25em; margin: 0; }
.mode-row + .slots { width: min(100%, 400px); margin: 16px auto; }
@media (max-height: 700px) { .mode-row { width: min(100%, 340px); margin-top: 4px; } }

/* =========================================================
   1 contra 1: una fila por rival con su monstruo, el nivel de
   sus cartas y el premio en chapas · Torneo: niveles y premio
   ========================================================= */
.rival-list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 12px; }
.rival-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 20px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.16), inset 0 -6px 0 rgba(0,0,0,0.18), 0 5px 0 var(--ink);
  animation: popIn 0.3s backwards;
}
.rival-row:nth-child(2) { animation-delay: 0.05s; } .rival-row:nth-child(3) { animation-delay: 0.1s; }
.rival-row:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.16), 0 2px 0 var(--ink); }
.rival-row.d0 { --c1: #5fd47e; --c2: #23853a; }
.rival-row.d1 { --c1: #ffb84a; --c2: #c9600f; }
.rival-row.d2 { --c1: #ff6a8a; --c2: #a8243a; }
.rv-face {
  width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.4), rgba(26,20,48,0.35) 70%); border: 3px solid var(--ink);
}
.rv-face img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(26,20,48,0.5)); }
.rv-info { min-width: 0; }
.rv-info b { display: block; font: 400 1.45rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.rv-info small { display: inline-block; margin-top: 3px; padding: 1px 9px; border-radius: 999px; background: rgba(26,20,48,0.45); font-size: 0.72rem; color: #fff; }
.rv-prize { display: flex; align-items: center; gap: 4px; }
.rv-chips { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.rv-chest { width: 42px; flex-shrink: 0; filter: drop-shadow(0 2px 0 rgba(26,20,48,0.5)); }
.pz-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 2px; border-radius: 999px; white-space: nowrap;
  background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.55); font: 400 0.85rem 'Lilita One', sans-serif; color: #fff;
}
.pz-chip x-ico { width: 1.35em; height: 1.35em; margin: 0; }
.rec-row { display: flex; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.rec-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 12px; border-radius: 999px; background: var(--ui-panel-bg); font-size: 0.78rem; color: var(--muted); }
.rec-chip b { font: 400 1.05rem 'Lilita One', sans-serif; color: #fff; }
.rec-chip.win b { color: #8dff7a; } .rec-chip.lose b { color: #ffb3bc; }

.tn-panel { padding: 12px; margin-bottom: 12px; border-radius: 18px; background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.45); box-shadow: 0 4px 0 var(--ink); }
.tn-panel h3 { margin: 0 0 8px; text-align: center; color: var(--ui-gold); text-shadow: 0 2px 0 var(--ink); }
.tn-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tn-lv { display: flex; flex-direction: column; align-items: center; padding: 6px 2px 5px; border-radius: 14px; border: 3px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 35%, #1a1430), #1a1430); }
.tn-lv b { font: 400 1.6rem 'Lilita One', sans-serif; line-height: 1.1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.tn-lv small { font-size: 0.62rem; color: color-mix(in srgb, var(--rc) 45%, #fff); white-space: nowrap; }
.tn-cmd { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; font-size: 0.9rem; }
.tn-cmd x-ico { width: 1.4em; height: 1.4em; margin: 0; }
.tn-cmd b { font: 400 1.15rem 'Lilita One', sans-serif; color: var(--ui-gold); }
.tn-prize { display: flex; align-items: center; gap: 12px; }
.tn-prize img { width: 76px; flex-shrink: 0; filter: drop-shadow(0 0 10px #a35bff); }
.tn-prize > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tn-prize > span > b { width: 100%; font: 400 1.1rem 'Lilita One', sans-serif; color: var(--ui-gold); text-shadow: 0 2px 0 var(--ink); }
.tn-prize > span > small { width: 100%; font-size: 0.8rem; color: var(--muted); }
.tn-go { display: block; width: 100%; font-size: 1.4rem; margin-bottom: 8px; }

/* =========================================================
   Tienda: cartas con el fondo de su rareza
   (assets/ui/fondo-carta-<rareza>, de assets/fondos-interior-cartas-tiendas.jpg)
   y encima la cinta de su rareza (assets/ui/cinta-<rareza>, de
   assets/cintas-tipo-cartas.jpg) con el nombre en español.
   Titulares de la tienda en Titan One.
   ========================================================= */
.sh-offers { gap: 30px 10px; padding-top: 18px; }
.sh-offer[class*=" r-"] {
  border: 18px solid transparent; border-image-slice: 12% fill; border-image-width: 18px; border-image-outset: 0; border-image-repeat: stretch;
  padding: 50px 0 4px;
}
.sh-offer.r-comun { border-image-source: url(assets/ui/fondo-carta-comun.webp); }
.sh-offer.r-rara { border-image-source: url(assets/ui/fondo-carta-rara.webp); }
.sh-offer.r-epica { border-image-source: url(assets/ui/fondo-carta-epica.webp); }
.sh-offer.r-mitica { border-image-source: url(assets/ui/fondo-carta-mitica.webp); }
.sh-offer.r-legendaria { border-image-source: url(assets/ui/fondo-carta-legendaria.webp); }
.sh-offer .sh-rar {
  top: -34px; width: 88%; aspect-ratio: 200 / 126; display: grid; place-items: center; padding: 0 0 12%; z-index: 2;
  border: 0; border-radius: 0; background: url(assets/ui/cinta-comun.webp) center / 100% 100% no-repeat;
  font: 400 clamp(1rem, 4.6vw, 1.3rem) 'Titan One', 'Lilita One', sans-serif; color: #fff; letter-spacing: 0.03em;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink);
}
.sh-offer.r-rara .sh-rar { background-image: url(assets/ui/cinta-rara.webp); }
.sh-offer.r-epica .sh-rar { background-image: url(assets/ui/cinta-epica.webp); }
.sh-offer.r-mitica .sh-rar { background-image: url(assets/ui/cinta-mitica.webp); }
.sh-offer.r-legendaria .sh-rar { background-image: url(assets/ui/cinta-legendaria.webp); }
.sh-offer .sh-new { top: 2px; right: -12px; z-index: 3; }
.sh-head h3 { font-family: 'Titan One', 'Lilita One', sans-serif; letter-spacing: 0.02em; }
/* seis ofertas en dos filas de tres: cartas más pequeñas */
.sh-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 6px; }
.sh-offer[class*=" r-"] { border-width: 12px; border-image-width: 12px; padding: 30px 0 2px; }
.sh-offer .sh-rar { top: -26px; width: 94%; font-size: clamp(0.78rem, 3.4vw, 1rem); -webkit-text-stroke-width: 4px; text-shadow: 0 2px 0 var(--ink); }
.sh-offer img { width: 52px; height: 52px; margin-top: 0; }
.sh-offer b { font-size: 0.8rem; -webkit-text-stroke-width: 4px; }
.sh-offer .sh-n { font-size: 0.66rem; -webkit-text-stroke-width: 3px; }
.sh-offer .sh-price { font-size: 0.82rem; padding: 3px 4px; }
.sh-offer .sh-new { right: -8px; font-size: 0.6rem; }

/* portal de luz bajo el cofre al abrirlo (assets/chests/portal-<tipo>) */
.cfx-portal {
  position: absolute; left: 50%; top: 66%; width: 190%; height: auto; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.2); opacity: 0; transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s;
}
.chest-fx.open .cfx-portal { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: cfxPortal 2.4s ease-in-out 0.5s infinite; }
@keyframes cfxPortal { 50% { filter: brightness(1.25) drop-shadow(0 0 14px var(--cc)); } }
.chest-pic-portal { position: absolute; left: 50%; top: 68%; width: 210px; transform: translate(-50%, -50%); pointer-events: none; }

/* =========================================================
   Botones laterales del inicio: tres por lado (cofre gratis,
   misiones y códigos · trofeos, ayuda y opciones) y un punto
   rojo con lo que hay por cobrar
   ========================================================= */
.side-col { gap: 6px; }
.side-btn { position: relative; }
.side-dot {
  position: absolute; top: -2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font: 400 0.78rem/1 'Lilita One', sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(180deg, #ff6a7f, #d0213f); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  animation: popIn 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* =========================================================
   Campaña: mapa por zonas (camino de 10 fases que sube y baja)
   encima de las placas, y cabecera de zona en la lista
   ========================================================= */
.camp-map { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.cm-zone {
  padding: 8px 10px 4px; border-radius: 18px; background: var(--ui-panel-bg);
  border: 2px solid color-mix(in srgb, var(--zc) 55%, transparent); box-shadow: 0 4px 0 var(--ink), inset 0 0 18px color-mix(in srgb, var(--zc) 18%, transparent);
}
.cm-zone.locked { filter: grayscale(0.85) brightness(0.7); }
.cm-head { display: flex; align-items: center; gap: 8px; }
.cm-head > img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 0 rgba(10,8,30,0.5)); }
.cm-head > span { flex: 1; min-width: 0; text-align: left; }
.cm-head b { display: block; font: 400 1.02rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-head small { display: block; font-size: 0.68rem; color: var(--muted); }
.cm-head em { display: inline-flex; align-items: center; gap: 2px; font: 400 0.9rem 'Lilita One', sans-serif; font-style: normal; color: #ffe58a; white-space: nowrap; }
.cm-head em x-ico { width: 1.25em; height: 1.25em; margin: 0; }
.cm-trail { position: relative; aspect-ratio: 100 / 34; margin: 2px 4px 0; }
.cm-trail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cm-path { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 5; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cm-path.done { stroke: #ffd166; stroke-width: 6; stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(255,209,102,0.7)); }
.cm-node {
  position: absolute; width: 9.5%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  background: radial-gradient(circle at 50% 35%, #8a93ad, #4b5263);
}
.cm-node b { font: 400 clamp(0.72rem, 3.4vw, 0.95rem) 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.cm-node.open { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--zc) 60%, #fff), var(--zc)); }
.cm-node.done { background: radial-gradient(circle at 50% 35%, #fff1a8, #f5c400 55%, #b8860b); }
.cm-node.lock { opacity: 0.75; }
.cm-node.end { width: 12%; }
.cm-node.next { animation: cmNext 1.2s ease-in-out infinite; box-shadow: 0 3px 0 var(--ink), 0 0 0 3px #fff, 0 0 12px var(--zc); }
@keyframes cmNext { 50% { transform: translate(-50%, -50%) scale(1.12); } }
.cm-node:active { transform: translate(-50%, -50%) scale(0.92); }
.cm-crown { position: absolute; top: -48%; right: -30%; width: 62%; aspect-ratio: 1; display: grid; place-items: center; }
.cm-crown x-ico { width: 100%; height: 100%; margin: 0; }
.cm-here {
  position: absolute; left: 50%; bottom: 88%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); object-fit: cover;
  border-radius: 50%; border: 2px solid #fff; background: var(--ink); box-shadow: 0 2px 0 var(--ink); pointer-events: none;
}
.cm-st { position: absolute; left: 50%; top: 96%; transform: translateX(-50%); display: flex; gap: 1px; }
.cm-st u { width: 6px; height: 6px; border-radius: 50%; background: #3a3f55; border: 1px solid var(--ink); }
.cm-st u.on { background: #ffd166; }

.stage-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 2px -2px; padding: 0 0 4px;
  border-bottom: 3px solid var(--zc); font: 400 1.05rem 'Lilita One', sans-serif; color: #fff;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink);
}
.stage-zone img { width: 34px; height: 34px; object-fit: contain; }
.stage.flash { animation: stageFlash 1.1s ease-out; }
@keyframes stageFlash { 0%, 40% { filter: drop-shadow(0 0 14px var(--zc)) brightness(1.3); transform: scale(1.03); } }

/* =========================================================
   1 contra 1: franja de la arena · Camino de trofeos
   ========================================================= */
.arena-strip {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 8px 10px; text-align: left;
  border-radius: 18px; background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.55); box-shadow: 0 4px 0 var(--ink);
}
.arena-strip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.arena-strip > img { width: 74px; height: 50px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); flex-shrink: 0; }
.as-txt { flex: 1; min-width: 0; }
.as-txt small { display: block; font-size: 0.68rem; color: var(--muted); }
.as-txt b { display: block; font: 400 1.1rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.as-txt .ubar, .ms-body .ubar { display: block; width: 100%; margin: 4px 0 0; }
.ubar.ok span { background: linear-gradient(180deg, #b6ff8a, #3fcf4a); }
.as-tro { display: flex; flex-direction: column; align-items: center; font: 400 1.05rem 'Lilita One', sans-serif; color: #ffe58a; }
.as-tro x-ico { width: 30px; height: 30px; margin: 0; }

.rd-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 10px; border-radius: 18px; background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.55); box-shadow: 0 4px 0 var(--ink); }
.rd-head > img { width: 110px; height: 72px; object-fit: cover; border-radius: 12px; border: 3px solid var(--ink); flex-shrink: 0; }
.rd-head > span { min-width: 0; text-align: left; }
.rd-head small { display: block; font-size: 0.72rem; color: var(--muted); }
.rd-head b { display: block; font: 400 1.35rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.rd-head em { display: flex; align-items: center; gap: 3px; font-style: normal; font-size: 0.82rem; color: #ffe58a; }
.rd-head em x-ico { width: 1.4em; height: 1.4em; margin: 0; }
.road { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.rd-stop { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; }
/* el camino: un tramo por parada, dorado hasta tu récord */
.rd-stop::before { content: ''; position: absolute; left: 29px; top: -8px; bottom: -8px; width: 6px; border-radius: 3px; background: #2a2f4a; z-index: 0; }
.rd-stop.reach::before { background: linear-gradient(180deg, #ffe58a, #f5a400); box-shadow: 0 0 6px rgba(255,209,102,0.6); }
.rd-stop:first-child::before { top: 50%; }
.rd-stop:last-child::before { bottom: 50%; }
.rd-at {
  position: relative; z-index: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; padding: 3px 4px 2px; min-width: 54px;
  border-radius: 12px; background: #2a2f4a; border: 2px solid var(--ink); font: 400 0.85rem 'Lilita One', sans-serif; color: #fff;
}
.rd-stop.reach .rd-at { background: linear-gradient(180deg, #ffd166, #c98a10); }
.rd-at x-ico { width: 22px; height: 22px; margin: 0; }
.rd-card {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 10px; border-radius: 16px; text-align: left;
  background: var(--ui-panel-bg); border: 2px solid color-mix(in srgb, var(--rc, #ffc65a) 55%, transparent); box-shadow: 0 3px 0 var(--ink);
}
.rd-stop.arena .rd-card { background: linear-gradient(90deg, rgba(60,40,10,0.9), rgba(26,20,48,0.9)); border-color: rgba(255,198,90,0.85); }
.rd-stop.lock .rd-card { filter: brightness(0.7) saturate(0.6); }
.rd-stop.got .rd-card { opacity: 0.65; }
.rd-stop.ready .rd-card { box-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(143,224,138,0.8); }
.rd-pic { position: relative; width: 54px; height: 48px; flex-shrink: 0; display: grid; place-items: center; }
.rd-pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(10,8,30,0.5)); }
.rd-stop.arena .rd-pic img { object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); }
.rd-pic.card img { width: 70%; object-fit: fill; border-radius: 6px; border: 2px solid var(--rc); }
.rd-pic.card i { position: absolute; font: 400 1.4rem 'Lilita One', sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.rd-txt { flex: 1; min-width: 0; }
.rd-txt b { display: block; font: 400 1rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.rd-txt small { display: block; font-size: 0.7rem; color: var(--muted); }
.rd-txt small x-ico { width: 1.2em; height: 1.2em; margin: 0 1px; vertical-align: -0.25em; }
.rd-claim, .ms-claim { width: auto; flex-shrink: 0; margin: 0; padding: 6px 12px; font-size: 0.95rem; }
.rd-ok, .ms-ok { flex-shrink: 0; font-style: normal; font-size: 1.4rem; color: #8dff7a; text-shadow: 0 2px 0 var(--ink); }
.rd-lock { flex-shrink: 0; font-style: normal; }
.rd-lock x-ico { width: 24px; height: 24px; margin: 0; }

/* =========================================================
   Misiones diarias (medallón assets/ui/misiones, de
   assets/misiones-diarias-sin-letras)
   ========================================================= */
.modal-card.missions { text-align: left; }
.modal-card.missions h2, .modal-card.missions .lead, .ms-left { text-align: center; }
.ms-medal { display: block; width: 104px; height: 104px; margin: -4px auto 0; filter: drop-shadow(0 4px 0 rgba(10,8,30,0.5)); animation: popIn 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
.ms-row {
  display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 10px; border-radius: 16px;
  background: rgba(10,12,40,0.45); border: 2px solid rgba(255,255,255,0.12);
}
.ms-row.ready { border-color: #8fe08a; box-shadow: 0 0 10px rgba(143,224,138,0.55); }
.ms-row.got { opacity: 0.6; }
.ms-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; }
.ms-ico x-ico, .ms-ico img { width: 40px; height: 40px; margin: 0; object-fit: contain; }
.ms-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-body > b { font-size: 0.9rem; line-height: 1.15; }
.ms-body > small { font-size: 0.75rem; color: var(--muted); }
.ms-prize { display: flex; gap: 4px; margin-top: 3px; }
.ms-bonus { background: linear-gradient(90deg, rgba(120,140,190,0.35), rgba(10,12,40,0.45)); }
.ms-bonus .ms-ico { width: 52px; height: 52px; }
.ms-bonus .ms-ico img { width: 52px; height: 52px; }
.ms-bonus .ms-body > b { font: 400 1.05rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }

/* =========================================================
   Torneo: paneles con el marco de madera y pizarra de la tienda;
   cada nivel es una carta con el fondo de su rareza
   (assets/ui/fondo-carta-<rareza>) y su cinta abajo
   (assets/ui/cinta-<rareza>); los tres comandantes en medallones
   ========================================================= */
.tn-panel {
  padding: 4px 2px 6px; border-radius: 0; background: none; box-shadow: none;
  border: 18px solid transparent; border-image: url(assets/ui/tarjeta-tienda.webp) 21% fill / 18px stretch;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.45));
}
.tn-panel h3 { margin: -4px 0 10px; font: 400 1.3rem 'Titan One', 'Lilita One', sans-serif; color: #ffe58a; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.tn-levels { gap: 6px; }
.tn-lv {
  position: relative; aspect-ratio: 3 / 4; justify-content: center; gap: 0; padding: 0 0 14px; border-radius: 10px;
  border: 0; background: var(--rc) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink), 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent);
  animation: popIn 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}
.tn-lv:nth-child(2) { animation-delay: 0.05s; } .tn-lv:nth-child(3) { animation-delay: 0.1s; }
.tn-lv:nth-child(4) { animation-delay: 0.15s; } .tn-lv:nth-child(5) { animation-delay: 0.2s; }
.tn-lv.r-comun { background-image: url(assets/ui/fondo-carta-comun.webp); }
.tn-lv.r-rara { background-image: url(assets/ui/fondo-carta-rara.webp); }
.tn-lv.r-epica { background-image: url(assets/ui/fondo-carta-epica.webp); }
.tn-lv.r-mitica { background-image: url(assets/ui/fondo-carta-mitica.webp); }
.tn-lv.r-legendaria { background-image: url(assets/ui/fondo-carta-legendaria.webp); }
.tn-lv small { font: 400 0.62rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-transform: uppercase; letter-spacing: 0.05em; }
.tn-lv b { font: 400 clamp(1.9rem, 9vw, 2.5rem) 'Titan One', 'Lilita One', sans-serif; line-height: 1; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.tn-lv em {
  position: absolute; left: -7%; right: -7%; bottom: -10px; aspect-ratio: 200 / 126; display: grid; place-items: center; padding: 0 0 14%;
  background: url(assets/ui/cinta-comun.webp) center / 100% 100% no-repeat; font: 400 clamp(0.5rem, 2.3vw, 0.72rem) 'Titan One', 'Lilita One', sans-serif;
  font-style: normal; color: #fff; white-space: nowrap; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
}
.tn-lv.r-rara em { background-image: url(assets/ui/cinta-rara.webp); }
.tn-lv.r-epica em { background-image: url(assets/ui/cinta-epica.webp); }
.tn-lv.r-mitica em { background-image: url(assets/ui/cinta-mitica.webp); }
.tn-lv.r-legendaria em { background-image: url(assets/ui/cinta-legendaria.webp); }
.tn-cmd { gap: 10px; margin-top: 26px; font: 400 1rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.tn-cmd b { font-size: 1.35rem; -webkit-text-stroke: 5px var(--ink); }
.tn-faces { display: flex; }
.tn-faces img {
  width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; object-fit: cover; background: var(--ink);
  border: 3px solid var(--cc); box-shadow: 0 2px 0 var(--ink);
}
.tn-faces img:first-child { margin-left: 0; }
.tn-prize img { filter: drop-shadow(0 0 10px #a35bff) drop-shadow(0 3px 0 rgba(10,8,30,0.5)); }

/* Cofre: cuando todo lo que queda son legendarias, el contador de
   «quedan» se vuelve de oro, late, lo cruza un destello y detrás giran
   rayos dorados. No lo dice con palabras: solo brilla. */
.cfx-lrays {
  position: absolute; z-index: 1; width: 170px; height: 170px; transform: translate(-50%, -50%) scale(0.3); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,226,120,0.85) 0%, rgba(255,190,40,0.35) 32%, transparent 62%), url(assets/chests/destello.webp) center / contain no-repeat;
  transition: opacity 0.35s, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.cfx-lrays.on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: cfxLRays 3.2s linear infinite; }
@keyframes cfxLRays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.cfx-left.legend {
  overflow: hidden; color: #fff; border-color: #fffbe0;
  background: linear-gradient(180deg, #fff6b0, #ffd23a 40%, #f08a00);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink), 0 0 16px 5px rgba(255,214,60,0.95), 0 0 42px 14px rgba(255,160,0,0.6);
  animation: cfxLegend 0.8s ease-in-out infinite;
}
.cfx-left.legend b { -webkit-text-stroke: 4px #7a3c00; paint-order: stroke fill; text-shadow: 0 2px 0 #7a3c00, 0 0 10px #fff; }
.cfx-left.legend small { color: #6a3400; }
.cfx-left.legend::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent); transform: skewX(-20deg);
  animation: cfxShine 1.1s ease-in-out infinite;
}
@keyframes cfxLegend {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%, -50%) scale(1.18) rotate(-4deg); filter: brightness(1.25); }
}
@keyframes cfxShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .cfx-left.legend, .cfx-lrays.on, .cfx-left.legend::after { animation: none; } }

/* ---------- deslizar entre pestañas ---------- */
/* al deslizar, la pestaña entra de lado sin el saltito de entrada de sus cartas */
.menu.no-intro * { animation-duration: 0s !important; animation-delay: 0s !important; }

/* ---------- 1 contra 1: modificador y jefe final ---------- */
.b-wave-row { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; min-width: 0; }
.b-mod { flex: none; display: flex; padding: 1px 3px; gap: 1px; border-radius: 9px; border: 2px solid var(--gold); background: rgba(10,12,40,0.75); cursor: pointer; }
.b-mod img { width: 18px; height: 18px; object-fit: contain; display: block; }
.pause-mod { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--gold); line-height: 1.3; }

.roulette {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: rgba(8,10,30,0.66); backdrop-filter: blur(2px); cursor: pointer; animation: rlIn 0.25s ease-out;
}
.roulette.out { opacity: 0; transition: opacity 0.3s; }
@keyframes rlIn { from { opacity: 0; } to { opacity: 1; } }
.rl-title { margin: 0; text-align: center; font-size: clamp(1.2rem, 6vw, 1.6rem); color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 3px 0 var(--ink); }
.rl-row h3 { margin: 0 0 4px; text-align: center; font-size: 1rem; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.rl-track {
  position: relative; height: 104px; overflow: hidden;
  background: linear-gradient(180deg, #2a1a0c, #4a2e14 50%, #2a1a0c);
  border-top: 3px solid var(--ui-gold); border-bottom: 3px solid var(--ui-gold);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.6);
}
.rl-track::before, .rl-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.rl-track::before { left: 0; background: linear-gradient(90deg, rgba(20,12,4,0.95), transparent); }
.rl-track::after { right: 0; background: linear-gradient(-90deg, rgba(20,12,4,0.95), transparent); }
.rl-strip { display: flex; height: 100%; align-items: center; will-change: transform; }
/* RL_W de js/ui.js = ancho + márgenes (84 + 4 + 4) */
.rl-card {
  flex: none; width: 84px; height: 90px; margin: 0 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, #2f4192, #1a245e); border: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,0.45);
}
.rl-card.boss { background: linear-gradient(180deg, #7a2a3a, #3c1020); }
.rl-card img { width: 46px; height: 46px; object-fit: contain; }
.rl-card b { font-size: 0.68rem; line-height: 1.05; text-align: center; padding: 0 3px; color: #fff; }
.rl-card.win { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ink), 0 0 18px 4px rgba(255,209,102,0.85); animation: rlWin 0.45s ease-out; }
@keyframes rlWin { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1.08); } }
.rl-row.done .rl-card.win { transform: scale(1.08); }
.rl-mark { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 96px; transform: translateX(-50%); z-index: 3; pointer-events: none; border-left: 3px solid var(--gold); border-right: 3px solid var(--gold); }
.rl-mark::before, .rl-mark::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 9px solid transparent; }
.rl-mark::before { top: 0; border-top-color: var(--gold); }
.rl-mark::after { bottom: 0; border-bottom-color: var(--gold); }
.rl-desc { min-height: 1.3em; margin: 6px 16px 0; text-align: center; font-size: 0.82rem; color: #fff; text-shadow: 0 1px 0 var(--ink); }
.rl-skip { text-align: center; color: var(--muted); font-size: 0.8rem; }

/* sorteo de la siguiente oleada (showWaveDraw): no tapa los toques */
.wave-draw {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; width: 212px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 6px;
  background: rgba(12,16,48,0.86); border: 2px solid var(--ui-gold); border-radius: 14px; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 rgba(0,0,0,0.4);
  animation: rlIn 0.25s ease-out;
}
.wave-draw.out { opacity: 0; transition: opacity 0.3s; }
.wave-draw > small { font-size: 0.68rem; color: var(--gold); text-shadow: 0 1px 0 var(--ink); }
.wd-track { position: relative; width: 100%; height: 62px; overflow: hidden; background: linear-gradient(180deg, #2a1a0c, #4a2e14 50%, #2a1a0c); }
.wd-track::before, .wd-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; }
.wd-track::before { left: 0; background: linear-gradient(90deg, rgba(20,12,4,0.95), transparent); }
.wd-track::after { right: 0; background: linear-gradient(-90deg, rgba(20,12,4,0.95), transparent); }
.wd-strip { display: flex; height: 100%; align-items: center; will-change: transform; }
/* WD_W de js/ui.js = ancho + márgenes (56 + 4 + 4) */
.wd-card { flex: none; width: 56px; height: 54px; margin: 0 4px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, #2f4192, #1a245e); border: 2px solid var(--ink); }
.wd-card img { width: 44px; height: 44px; object-fit: contain; }
.wd-card.win { border-color: var(--gold); box-shadow: 0 0 12px 3px rgba(255,209,102,0.85); animation: rlWin 0.45s ease-out forwards; }
.wd-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 64px; transform: translateX(-50%); z-index: 3; border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.wd-name { font-family: 'Lilita One'; font-weight: 400; font-size: 0.95rem; color: #fff; text-shadow: 0 2px 0 var(--ink); text-align: center; line-height: 1.15; }
.wd-name em { display: block; font-style: normal; font-family: system-ui, sans-serif; font-size: 0.7rem; color: var(--gold); }
.wave-draw:not(.done) .wd-name { color: var(--muted); }
.wi-unknown { width: 30px; height: 30px; justify-content: center; font-size: 1.1rem; background: rgba(255,255,255,0.08); border-radius: 8px; }

.skill-pick { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(8,10,30,0.7); animation: rlIn 0.25s ease-out; }
.skill-pick.out { opacity: 0; transition: opacity 0.35s; }
.sp-card { width: 100%; max-width: 420px; background: var(--ui-panel-bg); border: 3px solid var(--cc, var(--gold)); border-radius: 18px; padding: 12px; box-shadow: 0 0 0 3px var(--ink), 0 0 30px rgba(0,0,0,0.5); }
.sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-head img { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--cc, var(--gold)); background: #16215a; object-fit: cover; }
.sp-head b { display: block; font-family: 'Lilita One'; font-weight: 400; font-size: 1.15rem; text-shadow: 0 2px 0 var(--ink); }
.sp-head small { color: var(--gold); font-size: 0.85rem; }
.sp-list { display: flex; flex-direction: column; gap: 8px; }
.sp-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 14px; cursor: pointer;
  font: inherit; color: #fff; background: linear-gradient(180deg, #2f4192, #1d2a6e); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.sp-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.sp-opt img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.sp-opt b { display: block; font-family: 'Lilita One'; font-weight: 400; font-size: 1.05rem; }
.sp-opt small { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.25; }
.sp-opt.on { border-color: var(--gold); background: linear-gradient(180deg, #4a7a2a, #23531a); box-shadow: 0 0 0 2px var(--ink), 0 0 14px rgba(255,209,102,0.7); }
.sp-opt:disabled { cursor: default; }
.sp-have { margin: 10px 0 0; font-size: 0.75rem; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .rl-card.win { animation: none; } }

/* ---------- modo roguelike (su pantalla) ---------- */
.rg-panel { display: flex; align-items: center; gap: 10px; }
.rg-panel img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.rg-panel b { display: block; }
.rg-panel small { color: var(--muted); font-size: 0.8rem; }

/* ---------- torneo: formas de jugarlo ---------- */
.tn-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.tn-mode { font: inherit; color: #fff; cursor: pointer; padding: 8px 6px; border-radius: 12px; border: 3px solid var(--ink); background: var(--panel2); box-shadow: 0 4px 0 var(--ink); text-align: center; }
.tn-mode b { display: block; font-family: 'Lilita One'; font-weight: 400; font-size: 0.95rem; }
.tn-mode small { display: block; font-size: 0.68rem; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.tn-mode.on { background: linear-gradient(180deg, #ffd34d, #f08a24); color: #3a1d00; }
.tn-mode.on small { color: #5a3000; }
.tn-decks { margin: 0 0 8px; font-size: 0.78rem; color: var(--muted); text-align: center; }

/* ---------- comandantes nuevos (sin ilustración) y héroes ---------- */
.cmd-btn.aiming { animation: cmdAim 0.6s ease-in-out infinite; }
@keyframes cmdAim { 50% { transform: scale(1.12); } }
.hero-hint { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); z-index: 6; pointer-events: none; text-align: center; padding: 6px 12px; border-radius: 12px; background: rgba(10,12,40,0.88); border: 2px solid var(--gold); font-size: 0.9rem; white-space: nowrap; }
.hero-hint small { display: block; font-size: 0.7rem; color: var(--muted); }

/* ---------- ventajas del roguelike: las reliquias, en dorado ---------- */
.sp-opt.relic { background: linear-gradient(180deg, #6a4a12, #3a2606); border-color: #2a1a04; }
.sp-opt.relic b { color: var(--gold); }

/* ---------- emojis rápidos ---------- */
.emote-btn { position: absolute; right: 6px; top: calc(35% + 6px); z-index: 6; width: 38px; height: 38px; border-radius: 50%; font-size: 1.3rem; line-height: 1; border: 3px solid var(--ink); background: var(--panel2); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.emote-bar { position: absolute; right: 50px; top: calc(35% + 2px); z-index: 6; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(10,12,40,0.9); border: 2px solid var(--gold); }
.emote-bar button { width: 36px; height: 36px; font-size: 1.3rem; border: 0; border-radius: 10px; background: rgba(255,255,255,0.08); cursor: pointer; }
.emote-bubble { position: absolute; z-index: 7; font-size: 2.2rem; padding: 4px 10px; border-radius: 18px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); pointer-events: none; animation: emoteIn 2.2s ease forwards; }
.emote-bubble x-ico { width: 2.2rem; height: 2.2rem; }
.emote-bubble.me { left: 12px; bottom: 16px; }
.emote-bubble.foe { left: 50px; top: 44px; }
@keyframes emoteIn { 0% { transform: scale(0.3); opacity: 0; } 12% { transform: scale(1.15); opacity: 1; } 20% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ---------- repetición ---------- */
.replay-card { max-width: 380px; width: 100%; }
.rp-view { border-radius: 12px; overflow: hidden; border: 3px solid var(--ink); background: #000; }
.rp-view img { display: block; width: 100%; height: auto; min-height: 120px; }
.rp-bar { height: 6px; margin: 8px 0 4px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; }
.rp-bar i { display: block; height: 100%; width: 0; background: var(--gold); }

/* ---------- talentos ---------- */
.uc-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.uc-tabs button { position: relative; }
.tab-dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }
.tal-note { font-size: 0.72rem; color: var(--muted); text-align: center; margin: 8px 0 0; }

/* cofre legendario de la tienda: ocupa la fila entera y brilla */
.sh-chests .sh-chest[data-buychest="legendario"] { grid-column: 1 / -1; box-shadow: 0 0 0 2px var(--ink), 0 0 16px rgba(63,208,255,0.55); }
.sh-chests .sh-chest[data-buychest="legendario"] .sh-chest-pic { width: 34%; filter: drop-shadow(0 0 10px rgba(63,208,255,0.7)); }

/* destello de detrás del cofre (ficha y resumen): se difumina hacia los
   bordes de su caja en vez de cortarse en seco */
.chest-pic-glow {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
}

/* cinco cartas de modo en la misma fila; Co-op y Roguelike llevan el nombre
   escrito encima de la ilustración, a la altura del de las demás */
.mode-row { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 440px); gap: 5px; }
.mode-card { container-type: inline-size; }
.mode-card:nth-child(5) { animation-delay: 0.2s; }
.mode-name {
  position: absolute; left: 0; right: 0; top: 67.8%; transform: translateY(-50%); text-align: center; pointer-events: none;
  font-family: 'Lilita One', 'Titan One', sans-serif; font-size: 13cqw; line-height: 1; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 0.9cqw #1a1430; paint-order: stroke fill; text-shadow: 0 0.8cqw 0 #1a1430;
}

/* árbol de habilidades del comandante (pestaña Comandante) */
.ct-tree { margin: 10px 0; padding: 10px; border-radius: 16px; background: var(--ui-panel-bg); border: 3px solid var(--cc); }
.ct-tree h3 { margin: 0 0 6px; font-size: 1.05rem; }

/* aviso de los héroes con su efecto (barras de Torvald, engranajes de Morgana) */
.hero-hint { display: flex; align-items: center; gap: 8px; text-align: left; }
.hero-hint img { height: 38px; width: auto; max-width: 70px; object-fit: contain; }

/* árbol de talentos y de habilidades (ilustración de assets/ui/arbol-*) */
.tree { position: relative; width: min(100%, 300px); margin: 8px auto 0; background: center / 100% 100% no-repeat; }
.tree-node {
  position: absolute; padding: 9%; border: 0; border-radius: 10%; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.tree-node img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)); opacity: 0.55; }
.tree-node.on { box-shadow: 0 0 0 3px var(--gold), 0 0 16px 4px rgba(255,209,102,0.8); background: rgba(255,209,102,0.18); }
.tree-node.on img { opacity: 1; transform: scale(1.08); }
.tree-node:disabled { cursor: default; }
.tree-node:disabled img { opacity: 0.2; filter: grayscale(1); }
.tree-lv {
  position: absolute; transform: translate(-50%, -50%); font-family: 'Lilita One', sans-serif; font-size: clamp(0.8rem, 4.2vw, 1.05rem);
  color: #ffe9a8; -webkit-text-stroke: 3px #1a1430; paint-order: stroke fill; pointer-events: none;
}
.tree-lv.locked { color: #9aa0b8; }
.tree-list { margin-top: 8px; text-align: left; }
.tree-list p { margin: 0 0 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,0.25); font-size: 0.8rem; }
.tree-list p.locked { color: var(--muted); }
.tree-list span { display: block; margin-top: 2px; color: #fff; }
.tree-list em { font-style: normal; color: var(--gold); }

/* ---------- repaso visual ---------- */
/* títulos largos de las pantallas: en dos líneas y algo más pequeños en vez de cortarse */
.back-bar h2 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.05; font-size: clamp(1rem, 5vw, 1.5rem); overflow-wrap: anywhere; }
/* los atajos del inicio por encima de la figura del comandante */
.side-col { position: relative; z-index: 3; }
.side-btn span { position: relative; z-index: 1; }
/* iconos de las casillas del árbol a buen tamaño */
.tree-node { padding: 0; }
.tree-node img { width: 58%; height: 58%; }
/* camino de trofeos: cartas con su forma */
.rd-pic.card { width: 54px; height: 54px; }
.rd-pic.card u {
  position: absolute; width: 30px; height: 44px; border-radius: 5px; border: 2px solid var(--rc);
  background: center / cover no-repeat; box-shadow: 0 2px 0 rgba(10,8,30,0.5); display: grid; place-items: center; text-decoration: none;
}
.rd-pic.card u:first-child:not(:last-child) { transform: translate(-8px, 2px) rotate(-12deg); filter: brightness(0.75); }
.rd-pic.card u:last-child { transform: translateX(3px) rotate(4deg); }
.rd-pic.card u i { position: static; font: 400 1.25rem 'Lilita One', sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
/* elección de ventajas y habilidades: tarjeta opaca (no se transparenta el cartel de detrás) */
.sp-card { background: linear-gradient(180deg, #232c6e, #161c4c); }
/* ficha de cofre: retrato de cada legendaria */
/* ficha de tropa: aire entre las pestañas y su contenido */
.uc-pane { margin-top: 8px; }
/* oleada en la barra de arriba: sin la palabra «Oleada» cuando no cabe */
@media (max-width: 430px) { .wv-w { display: none; } }
.back-bar h2.long { font-size: clamp(0.95rem, 4.3vw, 1.3rem); overflow-wrap: normal; }

/* árbol: casillas aún cerradas, en gris (se pueden tocar para leerlas) */
.tree-node.locked img { opacity: 0.35; filter: grayscale(1); }
.tree-list span { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--muted); }
.tree-list span img { width: 18px; height: 18px; object-fit: contain; flex: none; margin-top: 1px; }
.tree-list span.on { color: #fff; }
.tree-list p.locked span { opacity: 0.75; }
.tree-list span i { font-style: normal; }

/* avisos largos (talentos, modificadores): en varias líneas dentro de la pantalla */
.toast { white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.3; border-radius: 18px; }

/* =========================================================
   Lavado de cara: piezas comunes sin párrafos sueltos
   - botón «?» de la barra y su ficha (INFO en ui.js)
   - fichas de datos, premios por tramos y portada de modo
   - Cómo jugar en fichas, interruptor de sonido y chapas
   Todas con la misma placa: fondo tinta, borde dorado suave.
   ========================================================= */
:root { --plate-bg: var(--ui-panel-bg); --plate-edge: rgba(255,198,90,0.45); --plate-shadow: 0 3px 0 var(--ink); }
.plate, .stat-tiles > span, .help-card, .info-row, .mode-hero, .time-chip, .ver-chip, .opt-row {
  background: var(--plate-bg); border: 2px solid var(--plate-edge); box-shadow: var(--plate-shadow);
}

/* botón «?» junto al título de cada pantalla */
.info-btn {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 2px solid var(--gold-frame); background: radial-gradient(circle at 35% 30%, #4a68d8, #1d2c78);
  box-shadow: 0 3px 0 var(--gold-dark); color: #fff; font: 400 1.05rem 'Lilita One', sans-serif; line-height: 1;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
}
.info-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-dark); }
.back-bar h2 { flex: 0 1 auto; }
.back-bar .info-btn + .pill { margin-left: auto; }
.back-bar h2:not(:has(+ .info-btn)) { flex: 1; }

/* ficha de explicación */
.info-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.info-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; text-align: left; }
.info-row p { margin: 0; font-size: 0.86rem; line-height: 1.3; color: #fff; }
.info-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.info-ico x-ico { width: 100%; height: 100%; margin: 0; vertical-align: 0; }

/* fichas de datos (tres en fila) */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.stat-tiles > span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border-radius: 14px; }
.stat-tiles x-ico { width: 30px; height: 30px; margin: 0 0 2px; vertical-align: 0; }
.stat-tiles b { font: 400 1.3rem 'Lilita One', sans-serif; line-height: 1.05; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.stat-tiles small { font-size: 0.66rem; font-weight: 800; color: var(--muted); }

/* portada de un modo: su carta y el titular */
.mode-hero { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 14px; border-radius: 18px; text-align: left; }
.mode-hero img { width: 74px; flex: none; filter: drop-shadow(0 4px 0 rgba(10,12,40,0.5)); }
.mode-hero b { display: block; font: 400 1.5rem 'Titan One', 'Lilita One', sans-serif; color: #ffe58a; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.mode-hero small { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 800; color: var(--muted); }

/* premios por tramos (cofre y cuándo) */
.prize-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prize-steps span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.prize-steps img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(10,12,40,0.5)); }
.prize-steps small { font-size: 0.72rem; font-weight: 900; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* Cómo jugar */
.help-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.help-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; text-align: left; }
.help-card b { display: block; font: 400 1.05rem 'Lilita One', sans-serif; color: #ffe58a; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.help-card small { display: block; margin-top: 1px; font-size: 0.8rem; line-height: 1.3; font-weight: 700; color: #e6ebff; }
.help-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; }
.help-ico x-ico { width: 100%; height: 100%; margin: 0; vertical-align: 0; }

/* chapas: tiempo que queda, versión y récord */
.time-chip, .ver-chip {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 auto 10px; padding: 3px 12px 3px 6px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 900; color: #fff;
}
.time-chip x-ico { width: 1.3em; height: 1.3em; margin: 0; vertical-align: 0; }
.ver-chip { margin: 12px auto 0; padding: 3px 12px; color: var(--muted); font-size: 0.7rem; }
.rec-chip { align-items: center; }
.rec-chip x-ico { width: 1.2em; height: 1.2em; margin: 0; vertical-align: 0; }

/* opciones: fila con interruptor */
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 12px; padding: 8px 12px; border-radius: 14px; cursor: pointer; }
.opt-row span { display: flex; align-items: center; gap: 8px; font: 400 1.1rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.opt-row span x-ico { width: 1.5em; height: 1.5em; margin: 0; vertical-align: 0; }
.switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 54px; height: 30px; margin: 0;
  border-radius: 999px; border: 2px solid var(--ink); background: #2b3466; box-shadow: inset 0 2px 4px rgba(0,0,0,0.45); cursor: pointer;
  transition: background 0.15s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c400 60%, #c98a00); box-shadow: 0 2px 0 rgba(0,0,0,0.35);
  transition: transform 0.15s;
}
.switch:checked { background: linear-gradient(180deg, #86dc22, #4caa12); }
.switch:checked::after { transform: translateX(24px); }

/* nombre escrito sobre la carta de modo, igual que el que trae la ilustración */
.mode-name {
  top: 69%; font-family: 'Titan One', 'Lilita One', sans-serif; font-size: 10.5cqw; letter-spacing: 0.02em; text-transform: uppercase;
  color: #fbf1d8; -webkit-text-stroke: 0; text-shadow: 0 0.7cqw 0 rgba(20,10,30,0.55);
}
.mode-name.long { font-size: 8.6cqw; }

/* títulos de la barra en una línea; la chapa de tiempo, centrada */
.back-bar h2, .back-bar h2.long { white-space: nowrap; overflow-wrap: normal; overflow: visible; }
.back-bar h2.long { font-size: clamp(0.95rem, 4.6vw, 1.3rem); }
.time-chip { display: flex; width: fit-content; }

/* final de partida: logros, premio y datos */
.res-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.res-lines span {
  padding: 3px 12px; border-radius: 999px; background: linear-gradient(180deg, #ffe58a, #f5b400); border: 2px solid var(--gold-dark);
  font: 400 0.92rem 'Lilita One', sans-serif; color: #4a2600;
}
.res-prize { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.res-prize .pz-chip { font-size: 1rem; }
.pz-chip.neg b { color: #ffb3bc; }
.res-stats { margin: 4px 0 10px; }

/* inicio: comandante y mazo en una sola placa (assets/ui/panel-mazo, hecha
   de banner-comandante con la fila de aros de banner-mazo dentro).
   Arriba el comandante (0–49 %), abajo los cinco aros (49–89 %). */
.deck-panel {
  position: relative; aspect-ratio: 1177 / 613;
  background: url(assets/ui/panel-mazo.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.4));
}
.deck-panel .cmd-banner {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 48.94%; aspect-ratio: auto;
  background: none; filter: none;
}
.deck-panel .cmd-banner::before { inset: 12% 3% 0 3%; }
.deck-panel .cmd-banner img { height: 128%; bottom: 11%; }
.deck-panel .cb-slot { top: 30.7%; height: 37%; }
.deck-panel .deck-preview {
  position: absolute; left: 9.18%; top: 48.94%; width: 81.56%; height: 39.64%; aspect-ratio: auto; margin: 0;
  background: none; filter: none;
}
.deck-panel .deck-preview img, .deck-panel .deck-preview img[style] { width: 16.2%; top: 49.7%; }

/* =========================================================
   Pestaña Comandante: fila de retratos, ficha del elegido y su árbol
   ========================================================= */
.cmd-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 4px 0 12px; }
.cp-btn { position: relative; padding: 0 0 6px; border: 0; background: none; transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cp-face {
  display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #8a6a2a;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cc) 55%, #1a2766), #111a4a 80%);
  box-shadow: 0 3px 0 var(--ink);
}
.cp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-btn.view { transform: translateY(-3px); }
.cp-btn.view .cp-face { border-color: var(--gold-frame); box-shadow: 0 3px 0 var(--gold-dark), 0 0 0 2px var(--cc), 0 0 14px var(--cc); }
.cp-btn.eq::after {
  content: ''; position: absolute; left: 50%; bottom: -2px; width: 34%; height: 4px; transform: translateX(-50%);
  border-radius: 999px; background: var(--gold-frame); box-shadow: 0 0 6px var(--gold-frame);
}
.cp-btn.locked .cp-face img { filter: grayscale(1) brightness(0.5); }
.cp-btn:active { transform: translateY(1px) scale(0.95); }
.cp-lv, .cp-lock { position: absolute; right: -2px; top: -4px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; }
.cp-lv {
  background: linear-gradient(180deg, #ffb84a, #e07b1a); border: 2px solid var(--ink); color: #fff;
  font: 400 0.72rem 'Lilita One', sans-serif; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill;
}
.cp-lock { width: 22px; padding: 0; background: rgba(8,12,40,0.85); border: 2px solid rgba(255,198,90,0.6); }
.cp-lock x-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }

.cmd-hero {
  position: relative; margin: 0 0 12px; padding: 12px; border-radius: 20px; text-align: left; overflow: hidden;
  background: radial-gradient(120% 90% at 18% 30%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 60%), var(--ui-panel-bg);
  border: 2px solid color-mix(in srgb, var(--cc) 60%, var(--gold-frame)); box-shadow: 0 4px 0 var(--ink);
}
.ch-top { display: flex; gap: 12px; align-items: stretch; }
.ch-stage { position: relative; flex: none; width: 34%; min-height: 150px; }
.ch-stage::before {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 2%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 70%, transparent), transparent);
}
.ch-body { position: absolute; left: 50%; bottom: 4%; height: 112%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 4px 0 rgba(0,0,0,0.45)); }
.cmd-hero.locked .ch-body { filter: grayscale(1) brightness(0.45); }
.ch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ch-title { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 55%, #fff); }
.ch-name { font: 400 1.7rem 'Titan One', 'Lilita One', sans-serif; line-height: 1; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.ch-state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 900; color: #fff;
}
.ch-state.on { background: linear-gradient(180deg, #86dc22, #4caa12); border: 2px solid #2a6a08; }
.ch-state.locked { background: rgba(8,12,40,0.8); border: 2px solid rgba(255,198,90,0.5); color: #ffe58a; }
.ch-state x-ico { width: 1.2em; height: 1.2em; margin: 0; vertical-align: 0; }
.ch-ab { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 8px; border-radius: 12px; background: rgba(0,0,0,0.3); }
.ch-ab img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ch-ab em { display: block; font: 400 1rem 'Lilita One', sans-serif; font-style: normal; color: color-mix(in srgb, var(--cc) 50%, #fff); }
.ch-ab small { display: block; font-size: 0.76rem; line-height: 1.25; font-weight: 700; color: #e6ebff; }
.ch-cd { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 900; color: var(--muted); }
.ch-cd x-ico { width: 1.25em; height: 1.25em; margin: 0; vertical-align: 0; }
.ch-level { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ch-level .uc-lvbody { flex: 1; min-width: 0; }
.cmd-hero .cmd-upbtn { margin-top: 10px; }

/* figura del comandante encajada en su hueco: entera, sin pasarse del
   ancho (Brann es el triple de ancho que Morgana) y apoyada abajo */
.ch-stage { width: 36%; min-height: 0; height: 156px; align-self: center; }
/* la tarjeta nunca más baja que la figura (si no, la cortaba por abajo) */
.cmd-hero .ch-top { min-height: 164px; }
.ch-body {
  left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; max-width: 100%; transform: none;
  object-fit: contain; object-position: 50% 100%;
}
.ch-stage::before { bottom: -2%; }

/* retratos de arriba: chapa de nivel en forma de escudo dorado, centrada
   abajo; verde con flecha si se puede mejorar; candado en una chapa oscura */
.cmd-pick { gap: 6px; margin-bottom: 16px; }
.cp-btn { padding-bottom: 9px; }
.cp-face { border-width: 2.5px; }
.cp-lv, .cp-lock {
  left: 50%; right: auto; top: auto; bottom: -1px; transform: translateX(-50%);
  min-width: 0; width: 22px; height: 24px; padding: 0 0 3px; border: 0; border-radius: 0;
  clip-path: polygon(50% 100%, 0 72%, 0 0, 100% 0, 100% 72%);
  background: linear-gradient(180deg, #5a3a08, #2a1800); /* borde */
}
.cp-lv::before, .cp-lock::before {
  content: ''; position: absolute; inset: 2px 2px 3px; z-index: -1;
  clip-path: polygon(50% 100%, 0 72%, 0 0, 100% 0, 100% 72%);
  background: linear-gradient(180deg, #fff1a8 0%, #f5c400 45%, #c98a00 100%);
}
.cp-lv { isolation: isolate; color: #3a1d00; font: 400 0.8rem 'Lilita One', sans-serif; -webkit-text-stroke: 0; line-height: 1; animation: none; }
.cp-lv.ready::before { background: linear-gradient(180deg, #d8ff9a 0%, #6fd83a 50%, #2f9a1a 100%); }
.cp-lv.ready { color: #123800; }
.cp-lock { isolation: isolate; }
.cp-lock::before { background: linear-gradient(180deg, #4a4f6a, #22263c); }
.cp-lock x-ico { width: 13px; height: 13px; }
.cp-btn.view .cp-lv::before { background: linear-gradient(180deg, #ffffff 0%, #ffe066 40%, #f5a300 100%); }
.cp-btn.eq::after { bottom: -7px; width: 40%; height: 3px; }

/* =========================================================
   Menú de tropas: bandeja del mazo, chapas de filtro y cartas
   con el fondo ilustrado de su rareza
   ========================================================= */
.deck-tray {
  margin: 4px 0 16px; padding: 10px 8px 12px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,198,90,0.16), rgba(26,20,48,0.85) 40%), var(--ui-panel-bg);
  border: 2px solid rgba(255,198,90,0.6); box-shadow: 0 4px 0 var(--ink), inset 0 1px 0 rgba(255,255,255,0.12);
}
.tc-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.coll-head h3 small { font: 800 0.8rem 'Nunito', sans-serif; color: var(--muted); -webkit-text-stroke: 0; text-shadow: none; }

/* chapas de filtro en una fila */
.chip-filters { display: flex; gap: 5px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 5px; }
.chip-filters::-webkit-scrollbar { display: none; }
.cf {
  flex: 1 0 auto; padding: 5px 10px 6px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--rc) 55%, var(--ink));
  background: rgba(8,12,40,0.6); color: color-mix(in srgb, var(--rc) 55%, #fff); box-shadow: 0 3px 0 var(--ink);
  font: 400 0.82rem 'Lilita One', sans-serif; white-space: nowrap;
}
.cf x-ico { width: 1.35em; height: 1.35em; margin: 0; vertical-align: -0.3em; }
.cf.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 85%, #fff), color-mix(in srgb, var(--rc) 75%, #000));
  border-color: #fff3c0; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
}
.cf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.coll-empty { display: grid; place-items: center; padding: 30px 0; opacity: 0.4; }
.coll-empty x-ico { width: 48px; height: 48px; }

/* carta */
.tc {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; overflow: hidden;
  aspect-ratio: 3 / 4.15; border-radius: 12px; border: 2.5px solid transparent;
  background:
    url(assets/ui/fondo-carta-comun.webp) center 30% / cover no-repeat padding-box,
    linear-gradient(180deg, #fff1a8 0%, #f5c400 35%, #c98a00 70%, #8a5a00 100%) border-box;
  box-shadow: 0 4px 0 #3a2600, 0 6px 10px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}
.tc.r-rara { background-image: url(assets/ui/fondo-carta-rara.webp), linear-gradient(180deg, #fff1a8 0%, #f5c400 35%, #c98a00 70%, #8a5a00 100%); }
.tc.r-epica { background-image: url(assets/ui/fondo-carta-epica.webp), linear-gradient(180deg, #fff1a8 0%, #f5c400 35%, #c98a00 70%, #8a5a00 100%); }
.tc.r-mitica { background-image: url(assets/ui/fondo-carta-mitica.webp), linear-gradient(180deg, #fff1a8 0%, #f5c400 35%, #c98a00 70%, #8a5a00 100%); }
.tc.r-legendaria { background-image: url(assets/ui/fondo-carta-legendaria.webp), linear-gradient(180deg, #fff1a8 0%, #f5c400 35%, #c98a00 70%, #8a5a00 100%); }
.tc:active { transform: translateY(3px) scale(0.97); box-shadow: 0 1px 0 #3a2600; }
.tc-art { display: block; width: 84%; margin-top: 9%; aspect-ratio: 1; min-height: 0; flex-shrink: 1; }
.tc-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5)); }
.tc-el {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(8,12,40,0.8); border: 1.5px solid rgba(255,214,90,0.8);
}
.tc-el x-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
/* nivel: escudo dorado, como los de los comandantes */
.tc-lv {
  position: absolute; top: 2px; left: 3px; width: 20px; height: 23px; display: grid; place-items: center; padding-bottom: 3px; isolation: isolate;
  clip-path: polygon(50% 100%, 0 72%, 0 0, 100% 0, 100% 72%); background: linear-gradient(180deg, #5a3a08, #2a1800);
  font: 400 0.78rem 'Lilita One', sans-serif; line-height: 1; color: #3a1d00;
}
.tc-lv::before {
  content: ''; position: absolute; inset: 2px 2px 3px; z-index: -1;
  clip-path: polygon(50% 100%, 0 72%, 0 0, 100% 0, 100% 72%); background: linear-gradient(180deg, #fff1a8 0%, #f5c400 45%, #c98a00 100%);
}
.tc-lv.lock::before { background: linear-gradient(180deg, #4a4f6a, #22263c); }
.tc-lv x-ico { width: 11px; height: 11px; margin: 0; vertical-align: 0; }
.tc.ready .tc-lv::before { background: linear-gradient(180deg, #d8ff9a 0%, #6fd83a 50%, #2f9a1a 100%); }
.tc.ready .tc-lv { color: #123800; }
.tc.ready { box-shadow: 0 4px 0 #3a2600, 0 0 12px 2px rgba(111,216,58,0.75); }
/* barra de cartas */
.tc-bar { position: relative; flex-shrink: 0; width: 84%; height: 12px; margin: 3px 0; border-radius: 999px; background: #0b1238; border: 1.5px solid var(--ink); overflow: hidden; }
.tc-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8fe3ff, #3aa0ff); border-radius: 999px; }
.tc-bar.full i { background: linear-gradient(180deg, #b6ff8a, #3fcf4a); }
.tc-bar em { position: relative; display: block; text-align: center; font: 400 0.6rem/10px 'Lilita One', sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
/* placa del nombre */
.tc-name {
  display: block; flex-shrink: 0; width: 100%; margin-top: auto; padding: 3px 2px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(6,10,36,0.55), rgba(6,10,36,0.9)); border-top: 1px solid rgba(255,214,90,0.45);
  font: 400 0.74rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill;
}
.tc-row .tc-name { font-size: 0.68rem; }
/* aún no la tienes */
.tc.locked { filter: saturate(0.25) brightness(0.75); }
.tc.locked .tc-art img { filter: brightness(0.15) drop-shadow(0 0 1px rgba(255,255,255,0.6)); }
.tc.locked .tc-name { color: #b9c4f0; }
.cf { flex: 1 1 auto; padding: 5px 6px 6px; font-size: 0.74rem; }
.chip-filters { gap: 4px; }
.tc.locked { filter: saturate(0.35) brightness(0.85); }
.tc.locked .tc-art img { filter: grayscale(1) brightness(0.42) contrast(1.1); }
.tc.locked .tc-lv::before { background: linear-gradient(180deg, #8a90b0, #4a4f6a); }
.tc.locked .tc-lv x-ico { width: 12px; height: 12px; }

/* ---------- 1.20: mazos guardados, perfil, logros, bestiario, retos, opciones y copia ---------- */
.sub-tabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-tabs button { position: relative; }
.deck-slots button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.deck-slots img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); flex: none; }
.prof-head { display: flex; align-items: center; gap: 12px; }
.prof-head > img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; background: #16215a; border: 3px solid var(--cc, var(--gold)); box-shadow: 0 3px 0 var(--ink); }
.prof-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.prof-name small { color: var(--muted); font-size: 0.75rem; }
.prof-name input { width: 100%; padding: 9px 12px; font: inherit; font-size: 1.1rem; color: #fff; background: #0e1430; border: 3px solid var(--ink); border-radius: 12px; outline: none; user-select: text; -webkit-user-select: text; }
.prof-name input:focus { border-color: #b48bff; }
.name-in { text-transform: none; letter-spacing: 0.02em; }
.prof-recs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.prof-recs .rec-chip x-ico { width: 1.4em; height: 1.4em; margin: 0 2px 0 0; }
.prof-recs .rec-chip b { color: #fff; }
.tn-panel h3 { margin: 0 0 8px; text-align: center; }
.ach-head { text-align: center; color: var(--muted); margin: 0 0 4px; font-size: 0.9rem; }
.ach-head b { color: #fff; font-size: 1.15rem; }
.bst-t { margin: 14px 0 8px; font-size: 1.05rem; text-align: center; }
.bst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bst-card { display: flex; gap: 8px; align-items: flex-start; min-width: 0; padding: 8px; border-radius: 14px; text-align: left; background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.35); }
.bst-card.boss { border-color: rgba(255,90,106,0.6); }
.bst-card img { width: 48px; height: 48px; flex: none; }
.bst-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bst-card b { font-size: 0.9rem; line-height: 1.1; }
.bst-card small { font-size: 0.68rem; line-height: 1.25; color: var(--muted); }
.bst-card .bst-ab { color: #ffb3bd; }
.bst-card em { font-style: normal; font-size: 0.7rem; color: var(--gold); }
.bst-card.unseen { opacity: 0.75; }
.bst-card.unseen img { filter: brightness(0) opacity(0.55); }
@media (max-width: 360px) { .bst-grid { grid-template-columns: 1fr; } }
.reto-hero img { width: 64px; height: auto; flex: none; }
.reto-hero span { display: flex; flex-direction: column; gap: 2px; }
.reto-row { padding: 10px; margin-bottom: 10px; border-radius: 18px; background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.45); box-shadow: 0 4px 0 var(--ink); }
.reto-row.won { border-color: #8fe08a; }
.rt-top { display: flex; align-items: center; gap: 10px; }
.rt-cmd, .ri-cmd { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; background: #16215a; border: 3px solid var(--cc, var(--gold)); }
.ri-cmd { display: block; width: 84px; height: 84px; margin: 0 auto 6px; box-shadow: 0 4px 0 var(--ink); }
.rt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.rt-txt b { font-size: 1rem; }
.rt-chip { padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; background: rgba(0,0,0,0.35); color: var(--gold); }
.rt-chip.ok { color: #8dff7a; }
.rt-chip.mine { color: #9fd6ff; }
.rt-best { display: flex; flex-direction: column; align-items: center; flex: none; }
.rt-best small { font-size: 0.65rem; color: var(--muted); }
.rt-best b { font: 400 1.5rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.rt-deck { display: flex; justify-content: center; gap: 6px; margin: 8px 0; }
.rt-deck img { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--ink); background: rgba(0,0,0,0.3); }
.rt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-btns .btn { margin: 0; padding: 8px; font-size: 1rem; }
.reto-invite .time-chip { margin: 4px auto 4px; }
.opt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.opt-btns .btn { margin: 0; padding: 10px 6px; font-size: 0.95rem; }
.options .opt-row { margin: 6px 0; }
.bk-code { height: 64px; font-size: 0.62rem; letter-spacing: 0; text-transform: none; text-align: left; word-break: break-all; resize: none; }
.bk-t { margin: 14px 0 4px; font-size: 1rem; }
.ci-pity { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; font-size: 0.8rem; color: var(--gold); }
.ci-pity x-ico { width: 1.4em; height: 1.4em; margin: 0; }
.rl-style { margin: -4px 12px 8px; font-size: 0.78rem; text-align: center; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.emote-btn x-ico { width: 26px; height: 26px; margin: 0; vertical-align: middle; }
.opt-btns .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- 1.21: temporada, racha, evento, modos que se abren y cosméticos ---------- */
.season-strip { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 8px 12px; border-radius: 18px; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 35%, #1a1430), rgba(26,20,48,0.9)); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px color-mix(in srgb, var(--sc) 60%, transparent); }
.ss-lv { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sc) 70%, #fff), var(--sc) 60%, color-mix(in srgb, var(--sc) 50%, #000)); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ss-lv small { font-size: 0.55rem; line-height: 1; color: #fff; text-shadow: 0 1px 0 var(--ink); }
.ss-lv b { font: 400 1.35rem 'Lilita One', sans-serif; line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.ss-lv.big { width: 64px; height: 64px; }
.ss-lv.big b { font-size: 1.7rem; }
.ss-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-body > b { font: 400 1rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ss-body .ubar { display: block; width: 100%; margin: 0; }
.ss-next { font-size: 0.72rem; color: #ffe58a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.season-strip .side-dot { position: absolute; top: -6px; right: -4px; }
.ev-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; }
.ev-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; color: #fff; background: rgba(10,12,40,0.7); border: 2px solid rgba(255,198,90,0.5); }
.ev-chip x-ico { width: 1.3em; height: 1.3em; margin: 0; }
.ev-chip.ready { border-color: #8fe08a; box-shadow: 0 0 10px rgba(143,224,138,0.7); animation: glow 1.2s ease-in-out infinite; }
.ev-chip.gold { color: #ffe58a; }
.season-head { --sc: var(--gold); }
.season-head .ubar { display: block; margin-top: 4px; }
.rd-at small { display: block; font-size: 0.55rem; line-height: 1; }
.mode-card { position: relative; }
.mode-card.mode-locked img { filter: grayscale(1) brightness(0.55); }
.mode-lock { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 0.68rem; color: #fff; background: rgba(10,12,40,0.85); border: 2px solid var(--gold); }
.mode-lock x-ico { width: 1.2em; height: 1.2em; margin: 0; }
.new-mode .nm-pic { width: 120px; display: block; margin: 0 auto 6px; animation: popIn 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); filter: drop-shadow(0 0 16px rgba(255,209,102,0.8)); }
.lg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 4px; }
.lg-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; background: rgba(10,12,40,0.55); border: 2px solid rgba(255,255,255,0.12); }
.lg-day small { font-size: 0.62rem; color: var(--muted); }
.lg-day img { width: 34px; height: 34px; object-fit: contain; }
.lg-day b { font-size: 0.7rem; }
.lg-day.got { opacity: 0.45; }
.lg-day.today { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,209,102,0.8); animation: glow 1.2s ease-in-out infinite; }
.lg-day.big { grid-column: span 2; background: linear-gradient(180deg, rgba(255,209,102,0.25), rgba(10,12,40,0.6)); }
.lg-day.big img { width: 46px; height: 46px; }
/* marcos del retrato */
.frame { --fr: #8a5a2b; display: inline-grid; place-items: center; padding: 4px; border-radius: 50%; background: var(--fr); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink); flex: none; }
.frame img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #16215a; display: block; }
.frame.big img { width: 62px; height: 62px; }
.fr-basico { --fr: linear-gradient(135deg, #c48a4a, #6b4220); }
.fr-oro { --fr: linear-gradient(135deg, #fff1a8, #f5c400 45%, #a2520a); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink), 0 0 12px rgba(255,209,102,0.7); }
.fr-hielo { --fr: linear-gradient(135deg, #ffffff, #7fd6ff 50%, #2b6fa8); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink), 0 0 12px rgba(127,214,255,0.8); }
.fr-fuego { --fr: linear-gradient(135deg, #ffe066, #ff5a2c 50%, #8a1a0a); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink), 0 0 12px rgba(255,90,44,0.8); }
.fr-natura { --fr: linear-gradient(135deg, #d4ff7a, #3fbf6a 50%, #1f5c2e); }
.fr-arcano { --fr: linear-gradient(135deg, #e6c8ff, #8c6bff 50%, #3a1f8a); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink), 0 0 12px rgba(140,107,255,0.8); }
.fr-sombra { --fr: linear-gradient(135deg, #5b3a9e, #14101f 60%); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px #ff4f7b, 0 0 14px rgba(255,79,123,0.6); }
.fr-real { --fr: conic-gradient(#ffd166, #ff4f7b, #ffd166, #8c6bff, #ffd166); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink), 0 0 14px rgba(255,209,102,0.8); }
.fr-arcoiris { --fr: conic-gradient(#ff5a6a, #ffd166, #4fd36a, #58c9ff, #8c6bff, #ff5a6a); animation: frSpin 4s linear infinite; }
.fr-eclipse { --fr: radial-gradient(circle, #14101f 55%, #c04bff 70%, #ffd166 80%, #14101f 92%); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink), 0 0 18px rgba(192,75,255,0.9); }
@keyframes frSpin { to { filter: hue-rotate(360deg); } }
.fr-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fr-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; border: 2px solid transparent; background: rgba(10,12,40,0.45); }
.fr-pick small { font-size: 0.6rem; color: var(--muted); }
.fr-pick .frame img { width: 30px; height: 30px; }
.fr-pick.on { border-color: var(--gold); }
.fr-pick.locked { opacity: 0.4; filter: grayscale(0.7); }
.t2 { margin-top: 12px !important; }
.ti-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ti-pick { padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; color: #fff; background: rgba(10,12,40,0.6); border: 2px solid rgba(255,198,90,0.4); }
.ti-pick.on { border-color: var(--gold); background: rgba(255,198,90,0.25); }
.prof-title { font-style: normal; font-size: 0.8rem; color: var(--gold); }
.asc-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.asc { width: 36px; height: 36px; border-radius: 10px; font: 400 1.05rem 'Lilita One', sans-serif; color: #fff; background: rgba(10,12,40,0.6); border: 2px solid rgba(255,90,106,0.5); }
.asc.on { background: linear-gradient(180deg, #ff7a8a, #c22a44); border-color: var(--gold); }
.asc-note { display: block; margin-top: 8px; text-align: center; font-size: 0.72rem; color: var(--muted); }
.res-near { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.res-near span { padding: 4px 10px; border-radius: 10px; font-size: 0.78rem; color: #ffe58a; background: rgba(10,12,40,0.5); border: 1px dashed rgba(255,209,102,0.6); }
.res-tag { margin: 4px 0; font-size: 0.8rem; color: #ffe58a; }
.res-tag.up { font: 400 1rem 'Lilita One', sans-serif; color: #8dff7a; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pz-chip.xp b { color: #ffe58a; }
.surplus { margin: 2px 0 6px; font-size: 0.85rem; color: #ffe58a; }
.reto-row.weekly { border-color: var(--gold); background: linear-gradient(180deg, rgba(255,198,90,0.18), var(--ui-panel-bg)); }
.season-head > span:last-child { flex: 1; }
.season-head .ubar em { display: block; font-size: 0.72rem; color: #fff; }
.ss-lv.big small { display: block; color: #fff; font-size: 0.6rem; }
/* ---------- 1.21.1: ruleta de la tienda ---------- */
.wheel-box { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 14px; padding: 14px 10px 12px; border-radius: 20px; background: var(--ui-panel-bg); border: 2px solid rgba(255,198,90,0.55); box-shadow: 0 4px 0 var(--ink); }
.wheel { position: relative; width: min(270px, 78vw); aspect-ratio: 1; }
.wh-disc { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #f5c400; box-shadow: 0 0 0 4px var(--ink), 0 6px 0 4px var(--ink), inset 0 0 0 3px rgba(0,0,0,0.25), 0 0 26px rgba(255,209,102,0.45); overflow: hidden; }
.wh-slot { position: absolute; inset: 0; pointer-events: none; }
.wh-slot::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; background: rgba(26,20,48,0.55); transform: translateX(-50%) rotate(15deg); transform-origin: bottom center; }
.wh-slot > span { position: absolute; left: 50%; top: 7%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; }
.wh-slot img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(26,20,48,0.6)); }
.wh-slot b { font: 400 0.68rem 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.wh-hub { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #f5c400 55%, #a2520a); border: 4px solid var(--ink); box-shadow: 0 3px 0 var(--ink); z-index: 2; }
.wh-arrow { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 3; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #ff4f7b; filter: drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 0 var(--ink)); }
.wh-go { width: auto; min-width: 200px; margin: 4px 0 0; font-size: 1.25rem; }
.wh-cost { margin-left: 6px; font-size: 0.95rem; }
.wh-cost x-ico { width: 1.3em; height: 1.3em; margin: 0 2px 0 0; vertical-align: -0.3em; }
.wh-prize { display: block; width: 90px; height: 90px; object-fit: contain; margin: 0 auto 6px; animation: popIn 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.navbar button.has-dot::after { content: ''; position: absolute; top: 6px; right: 22%; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }
/* ---------- 1.21.2: cartas del mazo en la colección ---------- */
.tc-mazo { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); z-index: 2; padding: 1px 7px; border-radius: 999px; white-space: nowrap; font: 400 0.62rem 'Lilita One', sans-serif; color: #fff; background: rgba(47,174,58,0.92); border: 1.5px solid #fff1a8; box-shadow: 0 2px 0 rgba(0,0,0,0.4); }

/* =========================================================
   Interfaz nueva (assets/new-ui): fondos por pantalla, barra de
   recursos, barra de pestañas, cinta de título, botón azul, carta
   por descubrir, cartel de la siguiente fase, paneles de pergamino,
   separador de secciones, placa de vidas y botón de reto.
   Las placas van en border-image cortadas en nueve (cifras en
   píxeles de cada imagen) para que no se deformen al estirarse.
   ========================================================= */
body {
  background:
    linear-gradient(180deg, rgba(22,32,90,0.12) 0%, rgba(22,32,90,0.5) 34%, rgba(20,28,82,0.9) 62%, rgba(18,26,74,0.97) 100%),
    url('assets/ui/fondo-2.webp') center top / cover no-repeat,
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
body[data-screen="shop"] { background-image: linear-gradient(180deg, rgba(22,32,90,0.12) 0%, rgba(22,32,90,0.5) 34%, rgba(20,28,82,0.9) 62%, rgba(18,26,74,0.97) 100%), url('assets/ui/fondo-1.webp'), linear-gradient(180deg, var(--bg1), var(--bg2)); }
body[data-screen="collection"], body[data-screen="commanders"], body[data-screen="friends"] { background-image: linear-gradient(180deg, rgba(22,32,90,0.12) 0%, rgba(22,32,90,0.5) 34%, rgba(20,28,82,0.9) 62%, rgba(18,26,74,0.97) 100%), url('assets/ui/fondo-3.webp'), linear-gradient(180deg, var(--bg1), var(--bg2)); }

/* barra de recursos: placa azul con gemas en los extremos */
.res-bar {
  background: none; border-style: solid; border-color: transparent; border-width: 12px 20px;
  border-image: url(assets/ui/header.webp?v=2) 72 84 fill / 12px 20px stretch;
  padding: 1px 0 3px;
}

/* barra de pestañas: tabla de madera con canto dorado */
.navbar {
  background: none; padding: 0 2px env(safe-area-inset-bottom);
  border-style: solid; border-color: transparent; border-width: 16px 20px 10px;
  border-image: url(assets/ui/navbar.webp?v=2) 80 100 70 fill / 16px 20px 10px stretch;
}

/* cinta roja de los títulos de pausa y resultados */
.pause-ribbon::before, .pause-ribbon::after { display: none; }
.pause-ribbon h2 {
  padding: 8px 0 22px; border: 0; box-shadow: none;
  background: url(assets/ui/cinta-titulo.webp) center / 100% 100% no-repeat;
}

/* botón secundario: placa azul con marco de oro */
.btn-ghost, .btn-ghost:active {
  background: none; box-shadow: none; padding: 3px 6px 5px;
  border-style: solid; border-color: transparent; border-width: 12px 18px;
  border-image: url(assets/ui/boton-azul.webp) 64 84 fill / 12px 18px stretch;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.5));
}
.btn-ghost:active { filter: drop-shadow(0 1px 0 rgba(10,12,40,0.5)); }

/* botón de reto: tabla naranja con la espada a la izquierda */
.btn-reto {
  background: none; box-shadow: none; padding: 4px 6px 6px; color: #fff;
  border-style: solid; border-color: transparent; border-width: 14px 16px 14px 50px;
  border-image: url(assets/ui/boton-reto.webp) 64 66 64 168 fill / 14px 16px 14px 50px stretch;
  filter: drop-shadow(0 4px 0 rgba(60,24,0,0.55));
}
.btn-reto:active { transform: translateY(3px); filter: drop-shadow(0 1px 0 rgba(60,24,0,0.55)); }

/* carta por descubrir: marco morado con el hueco del retrato */
.tc.locked {
  filter: none; border-color: transparent; box-shadow: 0 4px 0 rgba(10,12,40,0.45);
  background: url(assets/ui/carta-vacia.webp) center / 100% 100% no-repeat;
}
.tc.locked .tc-art img { filter: grayscale(1) brightness(0.32) contrast(1.1); opacity: 0.85; }

/* la siguiente fase de la campaña, señalada con el cartel de la flecha */
.stage.next::after {
  display: block; content: ''; position: absolute; left: -10px; top: -20px; width: 58px; height: 33px; z-index: 2;
  background: url(assets/ui/cartel-flecha.webp) center / contain no-repeat; border: 0; border-radius: 0; opacity: 1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)); transform: rotate(-8deg); pointer-events: none;
}

/* separador dorado entre las secciones de la tienda */
.sh-head:not(:first-child) { position: relative; margin-top: 34px; }
.sh-head:not(:first-child)::before {
  content: ''; position: absolute; left: 0; right: 0; top: -32px; height: 26px; pointer-events: none;
  background: url(assets/ui/separador.webp) center / contain no-repeat;
}

/* paneles de pergamino (texto oscuro) */
.coach {
  background: none; box-shadow: none; border-radius: 0; padding: 0 6px; color: #3a2410;
  border: 14px solid transparent; border-image: url(assets/ui/panel-1.webp) 44 fill / 14px stretch;
  filter: drop-shadow(0 3px 0 rgba(10,12,40,0.45));
}
.toast {
  background: none; border-radius: 0; padding: 2px 8px; color: #3a2410;
  border: 12px solid transparent; border-image: url(assets/ui/panel-2.webp) 40 fill / 12px stretch;
  filter: drop-shadow(0 3px 0 rgba(10,12,40,0.45));
}
.unit-info {
  background: none; border-radius: 0; padding: 0 4px; color: #3a2410;
  border: 14px solid transparent; border-image: url(assets/ui/panel-3.webp) 50 fill / 14px stretch;
  filter: drop-shadow(0 3px 0 rgba(10,12,40,0.45));
}
.unit-info b { color: #3a2410; }
.unit-info small { color: #6b4a2a; }
.unit-info .hint { color: #b2470e; }
.modal-card.patch-notes {
  background: none; box-shadow: none; border-radius: 0; padding: 0 8px; color: #3a2410;
  border: 30px solid transparent; border-width: 30px 22px 26px; border-image: url(assets/ui/panel-4.webp) 70 48 60 fill / 30px 22px 26px stretch;
  filter: drop-shadow(0 6px 0 rgba(10,12,40,0.45));
}
.patch-notes .pn-ver { color: #9a4a00; }
.patch-notes .pn-old { background: rgba(90,60,20,0.12); }

/* placa azul y oro detrás de las vidas en partida */
.b-top .lives {
  border-style: solid; border-color: transparent; border-width: 5px 8px;
  border-image: url(assets/ui/placa-vida.webp) 24 fill / 5px 8px stretch; padding: 1px 4px;
}

/* arrastrar cartas al mazo (bindDeckDrag) */
.tc { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.tc img { -webkit-user-drag: none; }
.tc-ghost { position: fixed; z-index: 90; pointer-events: none; margin: 0; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5)); transform: scale(1.08) rotate(-4deg); }
.tc-lifted { opacity: 0.35; }
.deck-tray.drop-on .tc { animation: dropWiggle 0.6s ease-in-out infinite; }
.deck-tray .tc.drop-here { animation: none; transform: scale(1.1); outline: 3px solid #ffe066; outline-offset: 2px; border-radius: 12px; }
@keyframes dropWiggle { 50% { transform: rotate(2deg); } }

/* torneo: arena, rival y modificador con flechas (tourneyPicker) */
.tp-row { display: grid; grid-template-areas: 'label label label' 'prev val next'; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 4px 6px; margin-bottom: 10px; }
.tp-label { grid-area: label; text-align: center; font: 400 0.8rem 'Lilita One', sans-serif; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.tp-arrow { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #ffd34d, #f08a24); color: #3a1d00; font-size: 1.1rem; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.tp-arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tp-row .tp-arrow[data-dir="-1"] { grid-area: prev; }
.tp-row .tp-arrow[data-dir="1"] { grid-area: next; }
.tp-val { grid-area: val; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 6px; border-radius: 12px; background: rgba(0,0,0,0.25); }
.tp-val b { font: 400 1rem 'Lilita One', sans-serif; color: #fff; }
.tp-val small { font-size: 0.7rem; color: var(--muted); line-height: 1.25; }
.tp-pic { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); }
.tp-any { display: grid; place-items: center; font: 400 2.4rem 'Titan One', sans-serif; color: #ffe58a; background: rgba(255,255,255,0.08); }
.tp-ico { width: 36px; height: 36px; object-fit: contain; }
.tp-lv.lv0 { color: #7be08a; } .tp-lv.lv1 { color: #ffe58a; } .tp-lv.lv2 { color: #ff7b7b; }

/* hoja de stats de la ficha de tropa (unitStatsHtml) */
.us-sheet { margin: 8px 0 6px; padding: 4px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(10,16,52,0.85), rgba(10,16,52,0.6)); border: 2px solid color-mix(in srgb, var(--ec) 55%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--ec) 18%, transparent), 0 3px 0 var(--ink); }
.us-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; animation: popIn 0.3s backwards; }
.us-row + .us-row { border-top: 1px solid rgba(255,255,255,0.08); }
.us-row:nth-child(2) { animation-delay: 0.03s; } .us-row:nth-child(3) { animation-delay: 0.06s; } .us-row:nth-child(4) { animation-delay: 0.09s; } .us-row:nth-child(5) { animation-delay: 0.12s; }
.us-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 1.05rem; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ec) 70%, #fff), color-mix(in srgb, var(--ec) 60%, #000)); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.us-ico x-ico, .us-ico .mi { width: 1.25em; height: 1.25em; }
.us-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.8rem; font-weight: 800; color: #e8ecff; text-align: left; }
.us-bar { display: block; height: 7px; border-radius: 99px; background: rgba(0,0,0,0.45); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6); }
.us-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 70%, #000), var(--ec), color-mix(in srgb, var(--ec) 50%, #fff)); }
.us-val { font: 400 1.15rem 'Lilita One', sans-serif; color: #fff; text-shadow: 0 2px 0 var(--ink); white-space: nowrap; text-align: right; }
.us-val em { display: block; font-style: normal; font-size: 0.78rem; color: #7be08a; line-height: 1; }
.uc-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.uc-trait { border-radius: 12px; padding: 6px 8px; align-items: flex-start; text-align: left; }
.uc-trait > span { display: flex; flex-direction: column; min-width: 0; }
.uc-trait small { line-height: 1.2; }

/* =========================================================
   Ficha de tropa con las piezas de assets/tarjeta-personajes.jpg
   (assets/ui/ficha-*): cabecera de pergamino con runas, cinta de
   piedra, píldoras y pestañas de metal, panel de stats y panel de nivel.
   ========================================================= */
.unit-card .uc-hero { height: 184px; margin: -6px -10px 0; background: url(assets/ui/ficha-cabecera.webp) center / 100% 100% no-repeat; }
.unit-card .uc-rays { opacity: 0.45; }
.unit-card .uc-ribbon { margin: -14px -22px 2px; padding: 0; height: 62px; display: grid; place-items: center; background: url(assets/ui/ficha-cinta.webp) center / 100% 100% no-repeat; }
.unit-card .uc-ribbon::before, .unit-card .uc-ribbon::after { display: none; }
.unit-card .uc-ribbon h2 { padding: 0; background: none; border: 0; box-shadow: none; font-size: 1.9rem; color: #fff; -webkit-text-stroke: 5px #1e2228; paint-order: stroke fill; text-shadow: 0 3px 0 #1e2228; }
.unit-card .uc-chip { padding: 5px 14px 6px; border: 0; border-radius: 0; color: #1d2433; font-weight: 900; background: url(assets/ui/ficha-pildora.webp) center / 100% 100% no-repeat; }
.unit-card .uc-chip.rar { color: #1d2433; }
.unit-card .uc-chip.rar::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; background: var(--rc); border: 2px solid #1d2433; }
.unit-card .uc-chip.el { color: #1d2433; }
.modal-card.unit-card .uc-desc { background: #1b222b; border: 2px solid #3d444c; box-shadow: inset 0 2px 6px rgba(0,0,0,0.45); }
.unit-card .uc-tabs { gap: 6px; }
.unit-card .uc-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 5px; height: 42px; padding: 0 6px 2px; border: 0; border-radius: 0; box-shadow: none;
  background: url(assets/ui/ficha-tab.webp) center / 100% 100% no-repeat; color: #2a3140; text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.unit-card .uc-tabs button.on { background-image: url(assets/ui/ficha-tab-on.webp); color: #4a2e08; text-shadow: 0 1px 0 rgba(255,240,190,0.7); box-shadow: none; }
.unit-card .uc-tabs button::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; background: center / contain no-repeat; }
.unit-card .uc-tabs button[data-uct="video"]::before { background-image: url(assets/ui/ficha-ico-video.webp); }
.unit-card .uc-tabs button[data-uct="stats"]::before { background-image: url(assets/ui/ficha-ico-stats.webp); }
.unit-card .uc-tabs button[data-uct="talents"]::before { background-image: url(assets/ui/ficha-ico-talentos.webp); }
.unit-card .us-sheet { background: linear-gradient(180deg, #272e38, #1d232b); border: 3px solid #5b4434; border-radius: 18px; box-shadow: inset 0 0 0 1px #2c2219, inset 0 0 22px rgba(0,0,0,0.35), 0 3px 0 rgba(0,0,0,0.4); }
.unit-card .us-row + .us-row { border-top: 2px solid #2d3542; }
.unit-card .us-ico { background: radial-gradient(circle at 35% 30%, #8a6a52, #4a3426); border-color: #2c2219; }
.unit-card .us-ico.pic { background: none; border: 0; box-shadow: none; width: 38px; height: 38px; }
.unit-card .us-ico.pic img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)); }
.unit-card .us-bar { height: 9px; background: #3a1a2c; box-shadow: inset 0 1px 3px rgba(0,0,0,0.7); }
.unit-card .us-bar span { background: linear-gradient(180deg, #d9bda6, #a3826c 55%, #6e5444); }
.unit-card .us-val { min-width: 52px; padding: 3px 9px; border-radius: 9px; background: #12161c; box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
.unit-card .uc-trait { background: #1b222b; border: 2px solid #3d444c; }
.unit-card .uc-level { min-height: 70px; padding: 10px 14px 10px 10px; border: 0; border-radius: 0; background: url(assets/ui/ficha-nivel.webp?v=2) center / 100% 100% no-repeat; }
.unit-card .uc-lvmedal {
  width: 50px; height: 52px; border: 0; border-radius: 0; box-shadow: none; padding-bottom: 4px;
  background: url(assets/ui/ficha-escudo.webp) center / 100% 100% no-repeat; color: #f1c24a; font-size: 1.5rem;
  -webkit-text-stroke: 4px #2a1c0a; paint-order: stroke fill;
}
.unit-card .uc-level .ubar { height: 15px; background: #0e1f14; border: 2px solid #7a5a2a; }
.unit-card .uc-level .ubar span, .unit-card .uc-level .ubar.ok span { background: url(assets/ui/ficha-barra.webp) left center / 100% 100% no-repeat; border-radius: 999px; }
.unit-card .uc-level .ubar em { line-height: 11px; text-shadow: 0 1px 0 #000; }

/* botón verde ilustrado de Mejorar (assets/ui/ficha-mejorar, de la plantilla de ficha):
   los cantos con las gemas no se estiran, solo el centro */
.btn.btn-up, .btn.btn-up:disabled {
  min-height: 62px; padding: 6px 30px 10px; border-radius: 0; box-shadow: none; background: none; color: #fff;
  border: solid transparent; border-width: 0 46px; border-image: url(assets/ui/ficha-mejorar.webp) 0 46 fill / 0 46px stretch;
  font-size: 1.45rem; -webkit-text-stroke: 5px #0e3a1c; paint-order: stroke fill; text-shadow: 0 3px 0 #0e3a1c;
  filter: drop-shadow(0 4px 0 rgba(10,12,40,0.45));
}
.btn.btn-up::before, .btn.btn-up::after { display: none; }
.btn.btn-up:active { transform: translateY(3px); box-shadow: none; filter: drop-shadow(0 1px 0 rgba(10,12,40,0.45)); }
.btn.btn-up:disabled { filter: grayscale(0.9) brightness(0.7); }
.btn.btn-up { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 4px 6px 8px; }
.btn.btn-up x-ico { flex-shrink: 0; }