/* =====================================================================
   Peonada · estilos
   Pensado primero para el CELULAR PARADO: todo el juego es una columna vertical (en la PC también, centrada,
   con el escenario de fondo a los costados). Arriba la barra con tu peón, las vidas y las gemas; abajo la barra
   de 5 pestañas (TIENDA · PEÓN · ARENA · TORNEOS · RANKING); en el medio la pantalla, que se desliza.
   Mismo lenguaje que Orbitalyc: paneles azules con borde oscuro grueso, botones gorditos con relieve
   (amarillo = acción principal, azul = el resto, verde = confirmar, rojo = cerrar, violeta = mejora),
   texto blanco con contorno y letra Lilita One. El arte del juego es pixel art.
   ===================================================================== */
@font-face { font-family: 'Lilita One'; src: url('fuentes/LilitaOne-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --ink: #0b1330;
  --ol: 1.6px;
  --sh: 0 2px 0 var(--ink);
  --txt: #ffffff;
  --txt2: #dbe7ff;
  --dim: #a9c0ec;
  --oro: #ffd23f;
  --caja: rgba(10, 28, 78, .55);
  --borde-caja: rgba(8, 18, 50, .8);
  --rz-comun: #b2b8bf;
  --rz-rara: #3d8bfd;
  --rz-epica: #b45cff;
  --rz-legendaria: #f5b301;
  --maldita: #c0244a;
  --verde: #6fd845;
  --rojo: #ff5a4a;
  --gema: #ff6fb0;
  --ancho: min(100vw, 520px);
  --barra: 54px;
  --nav: 64px;
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bot: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0a1029; color: var(--txt); overflow: hidden;
  font: 15px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; }
button { touch-action: manipulation; }
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.oculto { display: none !important; }

/* ---------- Texto con contorno ---------- */
.letra, h1, h2, h3, .btn, .titulo, .chip, .pestanas button, .numero, .flota, .cinta, .navabajo a {
  font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; letter-spacing: .03em;
}
.contorno, h1, h2, .btn, .titulo, .flota, .cinta, .pestanas button, .num-grande {
  -webkit-text-stroke: var(--ol) var(--ink); paint-order: stroke fill; text-shadow: var(--sh);
}

/* ---------- La columna (el "celular") y el fondo de la PC ---------- */
#fondo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; filter: brightness(.42) saturate(.9); }
#app {
  position: relative; z-index: 1; width: var(--ancho); height: 100vh; height: 100dvh; margin: 0 auto;
  display: flex; flex-direction: column; overflow: hidden; background: #18264a;
}
@media (min-width: 560px) { #app { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px rgba(255, 255, 255, .06), 0 0 80px rgba(0, 0, 0, .7); } }

/* ---------- Barra de arriba: tu peón, vidas, gemas, ajustes ---------- */
.barra {
  flex: none; display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--sa-top)) 8px 6px; min-height: calc(var(--barra) + var(--sa-top));
  background: linear-gradient(180deg, #2c5cb8, #1d428c); border-bottom: 3px solid var(--ink); position: relative; z-index: 20;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 3px 0 rgba(4, 10, 36, .45);
}
body.sin-sesion .barra .solo-sesion, body.sin-peon .barra .solo-peon { display: none !important; }
.barra .yo { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; cursor: pointer; }
.barra .yo .cara { width: 40px; height: 36px; border-radius: 9px; border: 2px solid var(--ink); background: rgba(0, 0, 0, .25); overflow: hidden; display: grid; place-items: center; flex: none; }
.barra .yo .datos { min-width: 0; flex: 1; }
.barra .yo .nom { font: 15px/1.1 'Lilita One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; }
.barra .yo .nv { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.barra .yo .nv b { font: 12px 'Lilita One', sans-serif; color: #ffe27a; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; font-weight: 400; }
.barra .yo .nv .barra-v { flex: 1; height: 8px; border-width: 1.5px; border-radius: 5px; max-width: 90px; }
.barra .marca { font-family: 'Lilita One', sans-serif; font-size: 24px; color: #ffe27a; letter-spacing: .05em; flex: 1; text-align: center;
  -webkit-text-stroke: 1.8px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.pildora {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 4px; border-radius: 999px; border: 2px solid var(--ink); flex: none;
  background: rgba(8, 18, 50, .6); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25); font: 16px 'Lilita One', sans-serif; color: #fff; cursor: pointer;
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill;
}
.pildora .mas { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--ink); background: linear-gradient(180deg, #b8f58a, #43b82c); display: grid; place-items: center; font-size: 14px; line-height: 1; margin-left: 2px; }
.pildora.vidas b { color: #ff9a9a; font-weight: 400; }
.pildora.gemas b { color: #ffc0e0; font-weight: 400; }
.boton-ico { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(180deg, #4f86e6, #2f62bf); display: grid; place-items: center; cursor: pointer; flex: none;
  box-shadow: inset 0 -3px 0 #1c4a9a, inset 0 2px 0 rgba(255, 255, 255, .3); padding: 0; }

/* ---------- La pantalla del medio ---------- */
#pantalla { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
#pantalla.lleno { padding: 0; overflow: hidden; }

/* ---------- Barra de abajo: 5 pestañas con íconos de pixel art ---------- */
.navabajo {
  flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--nav) + var(--sa-bot)); padding-bottom: var(--sa-bot); position: relative; z-index: 20;
  background: linear-gradient(180deg, #24499a, #1a3a7c); border-top: 3px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18);
}
body.sin-sesion .navabajo, body.sin-peon .navabajo { display: none; }
.navabajo a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--txt2); text-decoration: none; font-size: 11px;
  -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; position: relative; border-right: 2px solid rgba(8, 18, 50, .5);
}
.navabajo a:last-child { border-right: 0; }
.navabajo a canvas { transition: transform .15s; }
.navabajo a.on { color: #fff; background: linear-gradient(180deg, #4f8ef0, #2b62c8); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); }
.navabajo a.on canvas { transform: translateY(-3px) scale(1.12); }
.navabajo a.centro { background: linear-gradient(180deg, #ffd65a, #f09a12); color: #fff; border-radius: 14px 14px 0 0; margin-top: -10px; border: 3px solid var(--ink); border-bottom: 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45); font-size: 13px; }
.navabajo a.centro.on { background: linear-gradient(180deg, #ffe98a, #ffb020); }
.navabajo a .punto { position: absolute; top: 4px; right: 18%; width: 12px; height: 12px; border-radius: 50%; background: #ff3a3a; border: 2px solid var(--ink); }

/* ---------- Botones gorditos ---------- */
.btn {
  --t: #7cc8ff; --m: #3a93f0; --b: #2270d8; --s: #16509f;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-size: 17px; padding: 10px 16px; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, var(--t) 0%, var(--m) 46%, var(--b) 54%, var(--b) 100%);
  border: 2px solid var(--ink); border-radius: 11px;
  box-shadow: inset 0 -4px 0 var(--s), inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 rgba(4, 10, 36, .55);
  transition: transform .08s, box-shadow .08s, filter .12s;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--s), inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 rgba(4, 10, 36, .55); }
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.08); } }
.btn.amarillo { --t: #ffe98a; --m: #ffcc33; --b: #ffab12; --s: #d0700a; }
.btn.verde { --t: #b8f58a; --m: #6fd845; --b: #43b82c; --s: #2b8420; }
.btn.rojo { --t: #ff9a8a; --m: #ff5a4a; --b: #e0342f; --s: #9e1a1a; }
.btn.violeta { --t: #e3a8ff; --m: #b86cf5; --b: #9043e0; --s: #5f22a8; }
.btn.rosa { --t: #ffb8da; --m: #ff6fb0; --b: #e83e8c; --s: #a8215e; }
.btn:disabled, .btn.amarillo:disabled, .btn.verde:disabled, .btn.rojo:disabled, .btn.violeta:disabled, .btn.rosa:disabled { cursor: not-allowed; --t: #b9c2d6; --m: #97a1b8; --b: #7f89a2; --s: #5d667e; color: #eef1f8; }
.btn.grande { font-size: 23px; padding: 13px 22px; border-radius: 14px; border-width: 3px; }
.btn.chico { font-size: 14px; padding: 6px 10px; border-radius: 9px; }
.btn.ancho { width: 100%; }
.btn.late:not(:disabled) { animation: late 1.6s ease-in-out infinite; }
@keyframes late { 50% { transform: scale(1.035); } }
.btn canvas.px { margin: -6px 0; }
.btn small { font-size: 13px; opacity: .95; }

/* ---------- Paneles y cajas ---------- */
.panel {
  position: relative; padding: 14px;
  background: linear-gradient(180deg, #3f78d6 0, #2f62bf 46px, #2a56ad 60%, #244a98 100%);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -5px 0 rgba(8, 20, 60, .35), 0 6px 0 rgba(4, 10, 36, .45);
}
.panel + .panel, .panel + .bloque, .bloque + .panel { margin-top: 12px; }
.titulo { font-size: 19px; margin: 0 0 10px; color: #fff; display: flex; align-items: center; gap: 8px; }
.titulo small { font-size: 13px; color: var(--txt2); -webkit-text-stroke: 0; text-shadow: none; font-family: system-ui, sans-serif; letter-spacing: 0; }
.caja { background: var(--caja); border: 2px solid var(--borde-caja); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .22); padding: 10px; }
.sub { color: var(--txt2); font-size: 14px; }
.vacio { color: var(--dim); font-size: 14px; padding: 6px 2px; }
.cabecera { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
.cabecera h1 { margin: 0; font-size: 26px; color: #fff; }
.cabecera .sub { margin: 0; }

/* ---------- Formularios ---------- */
.campo { display: block; margin: 0 0 12px; }
.campo span { display: block; font-size: 13px; color: var(--txt2); margin: 0 0 4px; }
.campo input, .campo select {
  width: 100%; padding: 12px; border-radius: 10px; border: 2px solid var(--ink); color: #13203a; background: #f2f6ff;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .12); font-size: 16px;
}
.campo input:focus { outline: 3px solid #ffd23f; outline-offset: 1px; }
.error { color: #ffd1cc; background: rgba(160, 20, 30, .45); border: 2px solid #7a1020; border-radius: 10px; padding: 8px 10px; font-size: 14px; margin: 0 0 12px; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 5px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; padding: 3px 1px 4px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: 1 0 auto; color: #bcd0f5; padding: 8px 10px; cursor: pointer; font-size: 14px; white-space: nowrap;
  background: linear-gradient(180deg, #2b5bb8, #1f4796); border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(6, 20, 64, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.pestanas button.on { color: #fff; background: linear-gradient(180deg, #8fd3ff, #4aa6f5 50%, #2f86e6); transform: translateY(-2px);
  box-shadow: inset 0 -3px 0 #1c5fb5, inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 rgba(4, 10, 36, .5); }

/* ---------- Chips, etiquetas y barras ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 14px;
  background: rgba(8, 18, 50, .55); border: 2px solid var(--ink); color: #fff; cursor: default;
}
.chip.click { cursor: pointer; }
.chip .nv { color: #ffe27a; }
.chip canvas.px { margin: -3px 0; }
.etq { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .35); color: #fff; margin: 2px 3px 0 0; }
.barra-v { position: relative; height: 18px; background: #1a2240; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 0 rgba(4, 10, 36, .5); }
.barra-v > i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(180deg, #b6f58c 0, #6fd845 40%, #3fae2a 100%); transition: width .35s ease; }
.barra-v > b { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff6; transition: width .7s ease .25s; }
.barra-v.xp > i { background: linear-gradient(180deg, #e3a8ff, #b86cf5 50%, #9043e0); }
.barra-v.media > i { background: linear-gradient(180deg, #ffe98a 0, #ffc933 40%, #f09a12 100%); }
.barra-v.baja > i { background: linear-gradient(180deg, #ff9a8a 0, #ff5a4a 40%, #d42b2b 100%); }
.barra-v > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 12px 'Lilita One', sans-serif; color: #fff;
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; z-index: 1; }
.corazones { display: flex; gap: 2px; align-items: center; }

/* ---------- Avisos (toasts) y ventanas ---------- */
#toasts { position: fixed; left: 50%; top: calc(64px + var(--sa-top)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 440px); }
.toast { pointer-events: auto; color: #fff; padding: 10px 16px; border-radius: 12px; border: 2px solid var(--ink); font: 16px 'Lilita One', sans-serif; text-align: center;
  background: linear-gradient(180deg, #2c5cb8, #1d428c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 rgba(4, 10, 36, .5);
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; animation: entra .25s ease; }
.toast.bien { background: linear-gradient(180deg, #52c43a, #2f8f22); }
.toast.mal { background: linear-gradient(180deg, #e8483e, #a8231f); }
.toast.logro { background: linear-gradient(180deg, #ffd65a, #e09a12); }
/* (los casilleros de logros también se llaman .logro: el aviso no tiene que heredar su forma cuadrada) */
.toast.logro { display: block; aspect-ratio: auto; place-items: initial; cursor: default; filter: none; }
.toast.gema { background: linear-gradient(180deg, #ff8ac4, #d63a84); }
@keyframes entra { from { transform: translateY(-10px) scale(.96); opacity: 0; } }
#modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 14px; background: rgba(6, 14, 44, .72); }
#modal.on { display: flex; }
#modal .panel { width: min(460px, 100%); max-height: calc(100dvh - 28px); overflow: auto; animation: entra .2s ease; }
#modal .botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
#modal .botones .btn { flex: 1; }

/* ---------- Inicio (entrar / crear cuenta) ---------- */
.inicio { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 100%; padding-top: 4px; }
.logo { text-align: center; }
.logo h1 { margin: 0; font-size: clamp(48px, 15vw, 76px); line-height: .95; color: #ffe27a; -webkit-text-stroke: 4px var(--ink); text-shadow: 0 6px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, .5); transform: rotate(-2deg); }
.logo .cinta { display: inline-block; margin-top: 8px; padding: 5px 16px; font-size: clamp(13px, 4vw, 18px); color: #fff; background: linear-gradient(180deg, #e0463a, #a8231f); border: 3px solid var(--ink); border-radius: 8px; transform: rotate(1deg); box-shadow: 0 4px 0 rgba(4, 10, 36, .5); }
.escena { width: 100%; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 5px 0 rgba(4, 10, 36, .45); }
.escena canvas { width: 100%; height: auto; }
.inicio .panel { width: 100%; }
.pie { color: var(--dim); font-size: 12px; text-align: center; margin: 4px 0 0; }

/* ---------- Crear peón ---------- */
.crear .escena { position: relative; }
.crear .dado { position: absolute; right: 8px; bottom: 8px; }
.partes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.parte { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; background: var(--caja); border: 2px solid var(--borde-caja); border-radius: 10px; overflow: hidden; }
.parte button { height: 42px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font: 22px 'Lilita One', sans-serif; }
.parte button:active { background: rgba(255, 255, 255, .25); }
.parte span { text-align: center; font-size: 12px; color: var(--txt2); line-height: 1.15; padding: 2px; }
.parte span b { display: block; color: #fff; font-weight: 600; font-size: 14px; }
.fila-nombre { display: flex; gap: 8px; align-items: end; }
.fila-nombre .campo { flex: 1; margin: 0; }

/* ---------- La arena (pantalla principal) ---------- */
.arena-casa { display: flex; flex-direction: column; min-height: 100%; }
.arena-casa .escena { position: relative; flex: 1 1 auto; min-height: 280px; border-radius: 16px; display: flex; }
.arena-casa .escena canvas { width: 100%; height: 100%; object-fit: cover; }
.arena-casa .rotulo { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; pointer-events: none; }
.arena-casa .lugar { font: 12px 'Lilita One', sans-serif; color: #fff; background: rgba(8, 18, 50, .7); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 8px; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.arena-casa .placa-nombre { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); text-align: center; pointer-events: none; width: 92%; }
.arena-casa .placa-nombre h2 { margin: 0; font-size: 24px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-casa .acciones { padding: 12px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.arena-casa .corazones-grandes { display: flex; justify-content: center; gap: 4px; align-items: center; }
.arena-casa .tarjetas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.tarjeta { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 2px solid var(--ink); background: linear-gradient(180deg, #2f62bf, #244a98);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 3px 0 rgba(4, 10, 36, .45); cursor: pointer; min-width: 0; color: #fff; text-align: left; }
.tarjeta b { display: block; font: 14px 'Lilita One', sans-serif; font-weight: 400; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.tarjeta small { display: block; color: var(--txt2); font-size: 12px; line-height: 1.2; }
.tarjeta.vivo { background: linear-gradient(180deg, #e0463a, #a8231f); }
.rango { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; border: 2px solid var(--ink); background: var(--rc, #9c7a54); font: 14px 'Lilita One', sans-serif; color: #fff;
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }

/* ---------- Tu peón (atributos, equipo, sinergias, build, logros, trajes) ---------- */
.ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.ficha .retrato { border-radius: 14px; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 60%, #4f86e6, #23458f); overflow: hidden; }
.ficha h2 { margin: 0 0 4px; font-size: 22px; }
.record { display: flex; gap: 12px; margin: 6px 0 0; font: 15px 'Lilita One', sans-serif; flex-wrap: wrap; }
.record .g { color: #9df27a; } .record .p { color: #ffb0a6; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.stat .numero { font-size: 22px; }
.derivados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.derivados div { background: var(--caja); border: 2px solid var(--borde-caja); border-radius: 10px; padding: 6px 7px; font-size: 11px; color: var(--txt2); }
.derivados b { display: block; font: 17px 'Lilita One', sans-serif; color: #fff; font-weight: 400; }
.lista-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.grupo + .grupo { margin-top: 12px; }
.grupo h3 { font-size: 15px; margin: 0 0 6px; color: var(--txt2); }
.sinergia { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); margin-bottom: 6px; }
.sinergia.activa { background: linear-gradient(180deg, rgba(255, 210, 63, .35), rgba(224, 138, 0, .3)); border-color: #7a4a00; }
.sinergia b { font-family: 'Lilita One', sans-serif; font-weight: 400; }
.sinergia small { display: block; color: var(--txt2); font-size: 12px; }
.sinergia .cuenta { font: 16px 'Lilita One', sans-serif; }
.build { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.build .paso { text-align: center; font-size: 11px; color: var(--txt2); cursor: pointer; }
.build .paso .mini { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; border: 3px solid var(--rz, #b2b8bf); background: rgba(8, 18, 50, .6); }
.logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.logro { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--ink); background: linear-gradient(180deg, #ffd65a, #e09a12); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); cursor: pointer; }
.logro.no { background: #2a3658; filter: grayscale(1) brightness(.6); }

/* ---------- Combates (listas) ---------- */
.combates-lista { display: flex; flex-direction: column; gap: 6px; }
.fila-combate { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); }
.fila-combate .res { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--ink); font: 18px 'Lilita One', sans-serif; }
.fila-combate .res.g { background: #43b82c; } .fila-combate .res.p { background: #c0392b; }
.fila-combate .quien { min-width: 0; }
.fila-combate .quien b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-combate .quien small { color: var(--txt2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-combate .cuando { color: var(--dim); font-size: 11px; text-align: right; margin-bottom: 3px; }
.etq-torneo { display: inline-block; font: 11px 'Lilita One', sans-serif; padding: 1px 6px; border-radius: 6px; background: #7b3fa0; border: 1px solid var(--ink); margin-right: 4px; }

/* ---------- Cartas (subir de nivel): las 3 en fila, y el detalle de la elegida abajo ---------- */
.subir { text-align: center; }
.subir h1 { font-size: clamp(38px, 11vw, 56px); margin: 2px 0 0; color: #ffe27a; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 5px 0 var(--ink); animation: pum .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pum { from { transform: scale(.3); opacity: 0; } }
.subir .sub { margin: 4px 0 10px; }
.cartas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; perspective: 1000px; align-items: stretch; }
.carta { --rz: var(--rz-comun); position: relative; cursor: pointer; transition: transform .2s; min-height: 196px; }
.carta.rz-rara { --rz: var(--rz-rara); } .carta.rz-epica { --rz: var(--rz-epica); } .carta.rz-legendaria { --rz: var(--rz-legendaria); }
.carta.maldita { --rz: var(--maldita); }
.carta-gira { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.carta.oculta .carta-gira { transform: rotateY(180deg); }
.carta-frente, .carta-dorso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; border: 3px solid var(--ink); }
.carta-frente {
  display: flex; flex-direction: column; align-items: center; padding: 6px 5px 8px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 55%, #1c2f63) 0, #1f3a7a 45%, #1a2f63 100%);
  box-shadow: inset 0 0 0 3px var(--rz), inset 0 3px 0 5px rgba(255, 255, 255, .12), 0 5px 0 rgba(4, 10, 36, .5);
}
.carta-dorso { transform: rotateY(180deg); display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #2a4f9e 0 10px, #24478f 10px 20px); box-shadow: inset 0 0 0 4px #ffd23f, 0 5px 0 rgba(4, 10, 36, .5); }
.carta.maldita .carta-frente { background: radial-gradient(ellipse at 50% 30%, #5a1024 0, #2a0712 70%); }
.carta.rz-legendaria .carta-frente::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); animation: brillo 3.2s linear infinite; pointer-events: none; }
@keyframes brillo { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.cinta { align-self: center; font-size: 11px; padding: 1px 8px; margin: -6px 0 4px; border-radius: 0 0 8px 8px; background: var(--rz); color: #fff; border: 2px solid var(--ink); border-top: 0; white-space: nowrap; }
.carta-tipo { text-align: center; font: 10px 'Lilita One', sans-serif; color: var(--txt2); letter-spacing: .05em; line-height: 1.1; }
.carta-arte { display: grid; place-items: center; width: 100%; flex: 1; min-height: 70px; margin: 2px 0; border-radius: 10px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rz) 45%, transparent) 0, transparent 70%); }
.carta-nombre { text-align: center; font: 15px 'Lilita One', sans-serif; line-height: 1.05; margin: 2px 0 0; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; text-shadow: var(--sh); word-break: break-word; }
.carta .descartar { position: absolute; right: 4px; top: 4px; z-index: 3; padding: 2px 7px; font-size: 13px; }
.carta.elegida { transform: translateY(-8px) scale(1.04); }
.carta.elegida .carta-frente { box-shadow: inset 0 0 0 3px var(--rz), 0 0 0 4px #ffe27a, 0 0 26px rgba(255, 226, 122, .7), 0 5px 0 rgba(4, 10, 36, .5); }
.detalle-carta { margin-top: 12px; text-align: left; }
.detalle-carta .nombre { font: 20px 'Lilita One', sans-serif; display: flex; align-items: center; gap: 8px; }
.carta-efecto { font-size: 14px; line-height: 1.35; color: #fff; background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.carta-texto { font-size: 13px; color: var(--txt2); font-style: italic; margin: 6px 0 0; }
.carta-vista { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.carta-vista li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 4px; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.carta-vista .sube { color: #9df27a; } .carta-vista .baja { color: #ffb0a6; }
.carta-vista .sinerg { color: #ffe27a; justify-content: center; font-family: 'Lilita One', sans-serif; }
.subir .acciones { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.subir .acciones .btn { flex: 1; }
/* carta suelta (detalle de algo que ya tenés) */
.carta.suelta { width: 150px; min-height: 200px; margin: 0 auto; }

/* ---------- Tienda ---------- */
.seccion-tienda + .seccion-tienda { margin-top: 14px; }
.seccion-tienda > h2 { font-size: 18px; margin: 0 0 8px 2px; display: flex; align-items: center; gap: 6px; }
.oferta-vida { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; }
/* el botón abajo, a todo el ancho (al costado no entraba con letra grande o muchas vidas) y los corazones bajan de renglón */
.oferta-vida > .btn { grid-column: 1 / -1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; font-size: 15px; }
.oferta-vida .corazones { display: inline-flex; flex-wrap: wrap; gap: 1px; }
.paquetes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.paquete { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 14px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #6a3fb0, #3f2780); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 4px 0 rgba(4, 10, 36, .45); text-align: center; }
.paquete b { font: 20px 'Lilita One', sans-serif; font-weight: 400; color: #ffc0e0; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; }
.paquete .precio-real { font: 13px 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.paquete .extra { position: absolute; top: -8px; right: -4px; font: 11px 'Lilita One', sans-serif; background: #43b82c; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; transform: rotate(6deg); }
.trajes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.traje { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px 8px; border-radius: 14px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rz, #b2b8bf) 45%, #1c2f63), #1a2f63 70%); box-shadow: inset 0 0 0 3px var(--rz, #b2b8bf), 0 4px 0 rgba(4, 10, 36, .45); text-align: center; overflow: hidden; }
.traje .cinta { margin: 0 0 2px; }
.traje b { font: 14px 'Lilita One', sans-serif; font-weight: 400; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; }
.traje.puesto { box-shadow: inset 0 0 0 3px var(--rz, #b2b8bf), 0 0 0 3px #6fd845, 0 4px 0 rgba(4, 10, 36, .45); }
.traje .btn { width: 100%; }
.traje .parodia { position: absolute; top: 26px; right: 4px; padding: 1px 5px; border-radius: 6px; border: 2px solid var(--ink); background: #ff5fa2; color: #fff; font: 10px 'Lilita One', sans-serif; letter-spacing: .3px; transform: rotate(6deg); }
.precio { display: inline-flex; align-items: center; gap: 3px; }

/* ---------- Torneos ---------- */
.torneo { padding: 12px; }
.torneo + .torneo { margin-top: 12px; }
.torneo.semanal { background: linear-gradient(180deg, #8a4fd6 0, #6a37b8 46px, #5a2ea0 60%, #4a2688 100%); }
.torneo .cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.torneo .cab h2 { margin: 0; font-size: 20px; }
.torneo .cuenta-atras { font: 26px 'Lilita One', sans-serif; color: #ffe27a; -webkit-text-stroke: 1.6px var(--ink); paint-order: stroke fill; text-shadow: var(--sh); }
.premios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 10px 0; }
.premios div { background: rgba(0, 0, 0, .25); border: 2px solid rgba(0, 0, 0, .35); border-radius: 9px; padding: 4px; text-align: center; font-size: 11px; color: var(--txt2); }
.premios div b { display: flex; align-items: center; justify-content: center; gap: 2px; font: 15px 'Lilita One', sans-serif; color: #ffc0e0; font-weight: 400; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.en-vivo { display: inline-flex; align-items: center; gap: 6px; font: 13px 'Lilita One', sans-serif; padding: 2px 8px; border-radius: 8px; background: #e0342f; border: 2px solid var(--ink); animation: respira 1.4s ease-in-out infinite; }
@keyframes respira { 50% { filter: brightness(1.25); } }
.camino { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.camino span { font: 12px 'Lilita One', sans-serif; padding: 3px 7px; border-radius: 8px; border: 2px solid var(--ink); background: #2a3658; }
.camino span.g { background: #43b82c; } .camino span.p { background: #c0392b; } .camino span.prox { background: #f09a12; }
.ronda-tabs { margin-bottom: 8px; }
.partido { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); margin-bottom: 6px; }
.partido.mio { border-color: #ffd23f; background: rgba(255, 210, 63, .18); }
.partido .lado { display: flex; align-items: center; gap: 5px; min-width: 0; }
.partido .lado.der { flex-direction: row-reverse; text-align: right; }
.partido .lado b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.partido .lado small { font-size: 11px; color: var(--txt2); display: block; }
.partido .lado.perdio { opacity: .45; }
.partido .lado.gano b { color: #b6f58c; }

/* ---------- Combate (ocupa toda la columna) ---------- */
.combate { position: absolute; inset: 0; z-index: 30; background: #000; overflow: hidden; }
.combate canvas.escena-combate { position: absolute; left: 0; top: 0; }
.combate .capa-textos { position: absolute; left: 0; top: 0; pointer-events: none; }
.hud { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: calc(6px + var(--sa-top)) 6px 6px; z-index: 2; pointer-events: none; }
.placa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; align-items: center; padding: 5px; border-radius: 12px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #2c5cb8, #1d428c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 3px 0 rgba(4, 10, 36, .45); min-width: 0; }
.placa.der { grid-template-columns: minmax(0, 1fr) auto; background: linear-gradient(180deg, #c0473a, #8e2620); }
.placa.der .retrato { order: 2; }
.placa .retrato { width: 40px; height: 36px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 2px solid var(--ink); display: grid; place-items: center; overflow: hidden; }
.placa .info { min-width: 0; }
.placa .quien { font: 13px 'Lilita One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 1.1px var(--ink); paint-order: stroke fill; }
.placa.der .quien { text-align: right; }
.placa .quien small { color: #ffe27a; white-space: nowrap; }
.placa .barra-v { height: 15px; }
.placa .estados { display: flex; gap: 2px; min-height: 14px; margin-top: 2px; }
.placa.der .estados { justify-content: flex-end; }
.placa .comps { display: flex; gap: 3px; margin-top: 3px; }
.placa.der .comps { justify-content: flex-end; }
.placa .comps .barra-v { width: 34px; height: 8px; border-width: 1.5px; }
.lugar-combate { position: absolute; left: 50%; top: calc(66px + var(--sa-top)); transform: translateX(-50%); z-index: 2; font: 12px 'Lilita One', sans-serif; color: #fff; background: rgba(8, 18, 50, .65);
  border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; white-space: nowrap; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; pointer-events: none; }
.controles { position: absolute; right: 8px; bottom: calc(10px + var(--sa-bot)); display: flex; gap: 8px; z-index: 3; }
.flota { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 21px; color: #fff; animation: flota 1s ease-out forwards; z-index: 4; }
.flota.dano { color: #fff; }
.flota.crit { color: #ffe27a; font-size: 30px; }
.flota.cura { color: #9df27a; }
.flota.info { color: #bfe9ff; font-size: 16px; }
.flota.veneno { color: #b5f07a; font-size: 16px; }
.flota.fuego { color: #ffb347; font-size: 16px; }
.flota.sangre { color: #ff8a8a; font-size: 16px; }
.flota.grande { font-size: 28px; color: #ffe27a; }
.cartel-hab { position: absolute; z-index: 5; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 5px; border-radius: 10px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #ffe98a, #ffab12); color: #fff; font: 15px 'Lilita One', sans-serif; -webkit-text-stroke: 1.4px var(--ink); paint-order: stroke fill; animation: cartel 1.1s ease forwards; pointer-events: none; white-space: nowrap; }
/* Globo de diálogo (los trajes de famosos hablan en la pelea) */
.globo { position: absolute; z-index: 6; transform: translate(-50%, -100%); width: max-content; max-width: 168px; padding: 4px 9px 5px; border-radius: 11px; border: 3px solid var(--ink);
  background: #fffdf4; color: var(--ink); font: 13px/1.15 'Lilita One', sans-serif; text-align: center; box-shadow: 0 3px 0 rgba(4, 10, 36, .4); animation: globo 1.9s ease-out forwards; pointer-events: none; }
.globo::after { content: ''; position: absolute; left: calc(50% + var(--cola, 0px)); bottom: -10px; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.globo::before { content: ''; position: absolute; left: calc(50% + var(--cola, 0px)); bottom: -5px; margin-left: -4px; border: 4px solid transparent; border-top-color: #fffdf4; border-bottom: 0; z-index: 1; }
@keyframes globo { 0% { transform: translate(-50%, -78%) scale(.4); opacity: 0; } 9% { transform: translate(-50%, -100%) scale(1.08); opacity: 1; } 16% { transform: translate(-50%, -100%) scale(1); } 86% { opacity: 1; } 100% { transform: translate(-50%, -112%); opacity: 0; } }
@keyframes cartel { 0% { transform: translate(-50%, -80%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.08); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -130%); opacity: 0; } }
.anuncio { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 6; text-align: center; pointer-events: none; width: 94%; }
.anuncio h2 { margin: 0; font-size: clamp(36px, 12vw, 60px); color: #ffe27a; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 5px 0 var(--ink); animation: pum .5s cubic-bezier(.3, 1.6, .5, 1); }
.anuncio.ko-sello { top: 26%; }
.anuncio.ko-sello h2 { font-size: clamp(48px, 17vw, 84px); color: #ff5a3a; letter-spacing: 2px; animation: sello .45s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes sello { 0% { transform: scale(2.6) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }
.anuncio p { margin: 6px 0 0; font: 17px 'Lilita One', sans-serif; -webkit-text-stroke: 1.4px var(--ink); paint-order: stroke fill; }
.resultado { position: absolute; left: 10px; right: 10px; bottom: calc(12px + var(--sa-bot)); z-index: 7; text-align: center; animation: entra .3s ease; }
.resultado h2 { font-size: 40px; margin: 0; }
.resultado.gano h2 { color: #ffe27a; } .resultado.perdio h2 { color: #d6dcea; }
.resultado .acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.resultado .logros-nuevos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.resultado .vidas-res { display: flex; justify-content: center; gap: 3px; margin-top: 8px; }
.buscando { position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; text-align: center; background: rgba(6, 14, 44, .55); padding: 20px; }
.buscando h2 { font-size: 32px; margin: 0 0 6px; }

/* ---------- Ranking y perfil ---------- */
.filas-ranking { display: flex; flex-direction: column; gap: 6px; }
.fila-rank { display: grid; grid-template-columns: 38px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px 5px 6px; border-radius: 12px; background: var(--caja); border: 2px solid var(--borde-caja); cursor: pointer; }
.fila-rank.yo { background: rgba(255, 210, 63, .25); border-color: #7a4a00; }
.fila-rank .pos { font: 18px 'Lilita One', sans-serif; text-align: center; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; }
.fila-rank .quien { min-width: 0; }
.fila-rank .quien b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-rank .quien small { color: var(--txt2); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.fila-rank .nvl { text-align: right; font: 16px 'Lilita One', sans-serif; -webkit-text-stroke: 1.1px var(--ink); paint-order: stroke fill; }
.fila-rank .nvl small { display: block; font: 11px system-ui, sans-serif; color: var(--txt2); -webkit-text-stroke: 0; }
.mini-retrato { width: 40px; height: 36px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(0, 0, 0, .25); overflow: hidden; display: grid; place-items: center; }
.paginas { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.oro1 { color: #ffd23f; } .oro2 { color: #dfe6ef; } .oro3 { color: #e3a46b; }

/* ---------- Clanes: chat y guerra ---------- */
.chat { height: min(52vh, 420px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(8, 18, 50, .55);
  border: 2px solid var(--borde-caja); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25); overscroll-behavior: contain; }
.msj { display: flex; gap: 6px; align-items: flex-end; max-width: 92%; }
.msj .mini-retrato { width: 34px; height: 31px; flex: none; }
.msj .burbuja { background: #2f62bf; border: 2px solid var(--ink); border-radius: 12px 12px 12px 4px; padding: 5px 9px; font-size: 14px; line-height: 1.3; word-break: break-word; }
.msj .burbuja b { display: block; font: 12px 'Lilita One', sans-serif; font-weight: 400; color: #ffe27a; }
.msj .burbuja b small { color: var(--dim); font: 11px system-ui, sans-serif; }
.msj.mio { align-self: flex-end; flex-direction: row-reverse; }
.msj.mio .burbuja { background: #43862c; border-radius: 12px 12px 4px 12px; }
.msj.sistema { align-self: center; max-width: 96%; font: 12px 'Lilita One', sans-serif; color: #ffe27a; background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 3px 10px; text-align: center; }
.chat-escribir { display: flex; gap: 6px; margin-top: 8px; }
.chat-escribir input { flex: 1; min-width: 0; padding: 11px; border-radius: 10px; border: 2px solid var(--ink); background: #f2f6ff; color: #13203a; font-size: 16px; }
.marcador { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; text-align: center; }
.marcador .lado-g { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.marcador .lado-g b { font: 14px 'Lilita One', sans-serif; font-weight: 400; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.marcador .pts { font: 28px 'Lilita One', sans-serif; color: #ffe27a; }
.marcador .vs { font-size: 22px; color: #ffe27a; }
a.btn { text-decoration: none; }
.campo input[type=search], .campo input[type=number] { width: 100%; }

/* ---------- Menú de ajustes ---------- */
.menu-mas { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 360px) {
  .barra .yo .nv .barra-v { display: none; }
  .pildora { padding: 0 6px 0 3px; font-size: 14px; }
  .cartas { gap: 5px; }
  .carta-nombre { font-size: 13px; }
}

/* "Mantener la sesión iniciada" */
.recordar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font: 14px 'Lilita One', sans-serif; color: var(--dim); cursor: pointer; user-select: none; }
.recordar input { width: 20px; height: 20px; accent-color: #f5c542; margin: 0; cursor: pointer; }

/* ---------- TU PEÓN: héroe, colección, inventario, habilidades y mascotas ---------- */
.heroe .escena { position: relative; }
.heroe-nivel { position: absolute; top: 8px; left: 8px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff6c0, var(--rc, #ffd23f) 45%, #a8720a); font: 20px/1 'Lilita One', sans-serif; color: #fff; box-shadow: 0 3px 0 rgba(4, 10, 36, .5); }
.heroe-nivel small { font-size: 10px; line-height: 1; }
.heroe-nombre { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 65%; }
.heroe-nombre h2 { margin: 0; font-size: 22px; text-align: right; line-height: 1.05; overflow-wrap: anywhere; }
.heroe-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.heroe-fila .record { margin: 0; }
.colecciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.coleccion { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 10px; cursor: pointer; color: #fff; overflow: hidden; }
.coleccion b { font: 20px/1 'Lilita One', sans-serif; font-weight: 400; }
.coleccion b small { font-size: 12px; color: var(--txt2); }
.coleccion span { font-size: 11px; color: var(--txt2); }
.coleccion i { position: absolute; left: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #6fd845, #c8f27a); }
/* las 7 pestañas de TU PEÓN en dos filas (3 grandes arriba, 4 abajo), con el ícono arriba: se ven todas sin deslizar */
.pest-peon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.pest-peon button { grid-column: span 3; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 2px 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pest-peon button:nth-child(-n+3) { grid-column: span 4; font-size: 13px; }
@media (max-width: 360px) { .pest-peon button { font-size: 10.5px; } .pest-peon button:nth-child(-n+3) { font-size: 11.5px; } }
.inv-seccion + .inv-seccion { margin-top: 14px; }
.inv-seccion h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 16px; color: #fff; }
.inv-seccion h3 small { font: 12px system-ui, sans-serif; color: var(--txt2); }
.inv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.casillero { --rz: var(--rz-comun); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 4px; cursor: pointer; background: none; border: 0; color: #fff; min-width: 0; }
.casillero-ico { width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 12px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rz) 45%, #1d3c86), #142a63 75%);
  box-shadow: inset 0 0 0 2px var(--rz), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 3px 0 rgba(4, 10, 36, .45); }
.casillero:hover .casillero-ico { transform: translateY(-2px); }
.casillero small { font-size: 10.5px; line-height: 1.15; text-align: center; color: var(--txt2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; }
.casillero-nv { position: absolute; top: -5px; right: -4px; padding: 1px 6px; border-radius: 8px; border: 2px solid var(--ink); background: #ffd23f; color: #fff; font: 12px 'Lilita One', sans-serif; }
.casillero.maldita .casillero-ico { box-shadow: inset 0 0 0 2px var(--maldita), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 3px 0 rgba(4, 10, 36, .45);
  background: radial-gradient(circle at 50% 40%, #6a1b3a, #2a0f24 75%); }
.casillero.vacio { cursor: default; opacity: .45; }
.casillero.vacio .casillero-ico { background: rgba(8, 18, 50, .5); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3); }
.casillero.vacio span { font: 22px 'Lilita One', sans-serif; color: #3e5ba3; }
.hab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hab-carta { --rz: var(--rz-comun); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; text-align: left; cursor: pointer; color: #fff;
  border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 30%, #1d3c86), #142a63);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rz) 70%, transparent), 0 3px 0 rgba(4, 10, 36, .45); }
.hab-carta.activa { background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 38%, #6a3fb5), #2a1f63); }
.hab-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 40% 35%, #fff4c8, var(--rz) 70%); }
.hab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hab-txt b { font: 14px/1.1 'Lilita One', sans-serif; font-weight: 400; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.hab-tipo { font: 10px 'Lilita One', sans-serif; letter-spacing: .4px; color: #ffe27a; }
.hab-carta:not(.activa) .hab-tipo { color: #9fd3ff; }
.hab-nv { display: flex; gap: 3px; }
.hab-nv i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); background: #2a3a6a; }
.hab-nv i.si { background: #ffd23f; }
.hab-desc { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.3; color: var(--txt2); }
.mascotas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mascota { --rz: var(--rz-comun); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px 10px; cursor: pointer; color: #fff; text-align: center;
  border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 30%, #2f62bf), #1b3a80);
  box-shadow: inset 0 0 0 2px var(--rz), 0 4px 0 rgba(4, 10, 36, .45); overflow: hidden; }
.mascota-escena { position: relative; width: calc(100% + 12px); display: flex; justify-content: center; padding-top: 6px;
  background: linear-gradient(180deg, #8fd0ff 0, #cbeaff 55%, #7cbf4a 56%, #5a9a36 100%); border-bottom: 3px solid var(--ink); margin-bottom: 4px; }
.mascota b { font: 15px 'Lilita One', sans-serif; font-weight: 400; }
.mascota span { font-size: 11px; color: var(--txt2); }
.mascota.bloqueada { cursor: default; filter: saturate(.4); }
.mascota.bloqueada .mascota-escena { background: linear-gradient(180deg, #3a4f86 0, #2a3a6a 56%, #1d2a50 100%); }
.mascota-candado { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: 30px 'Lilita One', sans-serif; color: #ffd23f; }
@media (max-width: 380px) { .colecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hab-grid { grid-template-columns: minmax(0, 1fr); } .inv-grid { gap: 5px; } }
.casillero-ico canvas { max-width: 92%; max-height: 92%; }

/* ---------- PASE DE BATALLA ---------- */
.pase-temporada { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.pase-temporada b { font: 19px 'Lilita One', sans-serif; font-weight: 400; color: #ffe27a; }
.pase-temporada span { font-size: 12px; color: var(--txt2); }
.pase-nivel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pase-escudo { width: 62px; height: 62px; border-radius: 16px; border: 3px solid var(--ink); display: grid; place-content: center; text-align: center; color: #fff;
  background: linear-gradient(180deg, #ffe27a, #e8a020); font: 28px/1 'Lilita One', sans-serif; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 4px 0 rgba(4, 10, 36, .5); }
.pase-escudo small { font-size: 10px; }
.pase-barra small { display: block; margin-top: 5px; font-size: 11px; color: var(--txt2); }
.pase-premium { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #ffd96a, #e8a020 55%, #b8700f); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 5px 0 rgba(4, 10, 36, .45); }
.pase-premium.activo { grid-template-columns: auto minmax(0, 1fr); }
.pase-premium-btn { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.pase-premium b { font: 18px 'Lilita One', sans-serif; font-weight: 400; color: #fff; }
.pase-premium small { display: block; font-size: 12px; line-height: 1.3; color: #3a2400; margin: 2px 0 8px; }
.pase-premium.activo small { margin: 0; }
.pase-premium-trajes { display: flex; gap: 0; }
.pase-premium-trajes canvas { background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
.pase-cols { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; text-align: center; font: 13px 'Lilita One', sans-serif; color: var(--txt2); margin-bottom: 6px; }
.pase-cols .oro { color: #ffd23f; }
.pase-lista { display: flex; flex-direction: column; gap: 6px; }
.pase-fila { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.pase-num { display: grid; place-items: center; border-radius: 50%; width: 36px; height: 36px; align-self: center; justify-self: center; border: 3px solid var(--ink);
  background: #2a3a6a; color: #9fb3dc; font: 15px 'Lilita One', sans-serif; }
.pase-fila.alcanzado .pase-num { background: linear-gradient(180deg, #8fe86a, #3fa83a); color: #fff; }
.pase-fila.siguiente .pase-num { background: linear-gradient(180deg, #8fd3ff, #2f86e6); color: #fff; box-shadow: 0 0 0 3px #8fd3ff; }
.pase-celda { --rz: var(--rz-comun); position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 12px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 30%, #2f62bf), #1b3a80); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rz) 70%, transparent); text-align: center; min-height: 78px; }
.pase-celda.dorada { background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 25%, #c98a1a), #6a4510); }
.pase-celda.vacia { background: rgba(8, 18, 50, .35); border-color: rgba(8, 18, 50, .6); box-shadow: none; }
.pase-celda small { font-size: 11px; line-height: 1.15; color: #fff; }
.pase-celda.lejos { opacity: .55; }
.pase-celda.reclamado { opacity: .6; filter: saturate(.5); }
.pase-celda.bloqueado .pase-ico { filter: brightness(.55); }
.pase-celda.listo { box-shadow: inset 0 0 0 2px var(--rz), 0 0 0 3px #6fd845, 0 0 14px rgba(111, 216, 69, .6); animation: late 1.4s ease-in-out infinite; }
.pase-celda .btn { padding: 3px 8px; font-size: 12px; }
.pase-ico { min-height: 34px; display: grid; place-items: center; }
.pase-ico.grande { min-height: 36px; }
.pase-ok { position: absolute; top: 2px; right: 6px; font: 18px 'Lilita One', sans-serif; color: #6fd845; }
.pase-candado { position: absolute; top: 4px; right: 4px; }
.tarjeta-pase { position: relative; background: linear-gradient(180deg, #ffcf4a, #d08a10); }
.tarjeta-pase b { color: #fff; }
.tarjeta-pase .pase-aviso { color: #c8ff9a; }
.tarjeta-pase .punto { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ff3a3a; border: 2px solid var(--ink); }
/* ---------- Títulos ---------- */
.titulo-chip { --rz: var(--rz-comun); padding: 2px 9px; border-radius: 9px; border: 2px solid var(--ink); background: rgba(8, 18, 50, .75); color: var(--rz); cursor: pointer;
  font: 12px 'Lilita One', sans-serif; letter-spacing: .2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-chip.vacio { color: #c8d8f0; border-style: dashed; }
.titulo-mini { --rz: var(--rz-comun); display: block; font: italic 11px system-ui, sans-serif; color: var(--rz); filter: brightness(1.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo-placa { font: 10px 'Lilita One', sans-serif; color: #ffe27a; margin: -1px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulos-lista { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.titulo-fila { --rz: var(--rz-comun); display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 2px solid var(--ink); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 30%, #2f62bf), #1b3a80); color: #fff; }
.titulo-fila b { font: 15px 'Lilita One', sans-serif; font-weight: 400; color: var(--rz); filter: brightness(1.3); }
.titulo-fila small { font-size: 11px; color: var(--txt2); }
.titulo-fila.puesto { box-shadow: 0 0 0 3px #6fd845; }
.titulo-fila.bloqueado { cursor: default; opacity: .55; }

/* ---------- CLASIFICATORIA ---------- */
.escudo-liga { --liga: #b07a45; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--liga) 40%, #fff), var(--liga) 55%, color-mix(in srgb, var(--liga) 60%, #000)); box-shadow: 0 3px 0 rgba(4, 10, 36, .45); }
.escudo-liga.grande { width: 92px; height: 92px; border-width: 4px; }
.clasif-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--liga) 35%, #3f78d6), #244a98); }
.clasif-datos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.clasif-liga { font: 20px 'Lilita One', sans-serif; font-weight: 400; color: color-mix(in srgb, var(--liga) 60%, #fff); }
.clasif-trofeos { font: 30px/1 'Lilita One', sans-serif; color: #fff; }
.clasif-trofeos small { font-size: 14px; color: var(--txt2); }
.ligas { display: flex; flex-direction: column; gap: 6px; }
.liga { --liga: #b07a45; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px;
  border: 2px solid var(--ink); background: rgba(8, 18, 50, .45); opacity: .6; }
.liga.alcanzada { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--liga) 30%, #1d3c86), #1b3a80); }
.liga.actual { box-shadow: 0 0 0 3px var(--liga); opacity: 1; }
.liga b { display: block; font: 15px 'Lilita One', sans-serif; font-weight: 400; color: #fff; }
.liga small { font-size: 11px; color: var(--txt2); }
.liga-ok { font: 18px 'Lilita One', sans-serif; color: #6fd845; }
.trofeos-n { font: 16px 'Lilita One', sans-serif; color: #ffe27a; }
.tarjeta-clasif { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--liga) 55%, #2f62bf), #244a98); }
.tarjeta-flecha { font: 28px 'Lilita One', sans-serif; color: #fff; }
.res-trofeos { font: 34px 'Lilita One', sans-serif; margin: 4px 0; }
.res-trofeos.mas { color: #8fe86a; } .res-trofeos.menos { color: #ff7a6a; }
.res-liga { display: flex; align-items: center; justify-content: center; gap: 8px; }
.res-liga b { font: 16px 'Lilita One', sans-serif; font-weight: 400; color: #fff; }
.res-liga span { font: 18px 'Lilita One', sans-serif; color: #ffe27a; }

/* ---------- Cartel de ACTUALIZANDO (actualizando.js) ---------- */
.actualizando { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(8, 14, 34, .82); padding: 16px; }
.actualizando.on { display: flex; }
.actualizando .caja { max-width: 340px; text-align: center; background: #1d3a7a; border: 3px solid var(--ink); border-radius: 16px; padding: 22px 18px 18px; box-shadow: 0 6px 0 var(--ink); }
.actualizando h2 { margin: 12px 0 6px; font: 26px 'Lilita One', sans-serif; color: #ffe27a; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.actualizando p { margin: 0 0 10px; color: #f4efe6; }
.actualizando small { display: block; color: #b8c8ee; font-size: 12px; }
.actualizando .engranaje { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; border: 6px dashed #ffe27a; animation: girar 1.6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Sin textos cortados: los nombres y títulos largos pasan a otro renglón en vez de cortarse con "…" ---------- */
.fila-combate .quien b, .fila-rank .quien b, .partido .lado b, .placa .quien, .marcador .lado-g b, .titulo-chip, .titulo-mini, .titulo-placa,
.arena-casa .placa-nombre h2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.12; }
.placa .quien { font-size: 12px; }
.pest-peon button { white-space: normal; overflow: visible; line-height: 1.05; }

/* pestañas de los lugares de los accesorios (tienda) */
.pest-acc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0 0 8px; }
.pest-acc .btn { padding: 6px 2px; font-size: 12px; min-width: 0; }

/* ---------- AMIGOS (p-amigos.js) ---------- */
.amigos-buscar { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.amigos-buscar input { width: 100%; box-sizing: border-box; font: 16px system-ui, sans-serif; padding: 10px 12px; border-radius: 10px; border: 3px solid var(--ink); }
.amigos-buscar .fila-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.titulo-seccion { font-size: 17px; margin: 16px 2px 8px; }
.fila-amigo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px; }
.fila-amigo .quien b { display: block; overflow-wrap: anywhere; }
.fila-amigo .acciones-amigo { display: flex; gap: 6px; }
.fila-desafio { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; color: inherit; }
.fila-desafio > span:first-child { grid-row: 1 / 3; font: 12px 'Lilita One', sans-serif; padding: 3px 7px; border-radius: 8px; border: 2px solid var(--ink); }
.fila-desafio .gano { background: #43b82c; } .fila-desafio .perdio { background: #c0392b; }
.fila-desafio b { overflow-wrap: anywhere; } .fila-desafio small { grid-column: 2; } .fila-desafio .ver { grid-row: 1 / 3; grid-column: 3; font: 13px 'Lilita One', sans-serif; color: #ffe27a; }

/* =====================================================================
   Lo de todos los días: NUEVO, cofres, premio diario, misiones, jefe, álbum, evento, pronósticos
   ===================================================================== */
/* ---------- Cartelitos de NUEVO (novedades.js) y la guía ---------- */
.chapa-nuevo { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 6px; border-radius: 6px; border: 2px solid var(--ink); background: linear-gradient(180deg, #ff8a5a, #e8342f);
  font: 10px/1.2 'Lilita One', sans-serif; color: #fff; letter-spacing: .05em; -webkit-text-stroke: 0; text-shadow: 0 1px 0 var(--ink); transform: rotate(-4deg); animation: chapa 2.4s ease-in-out infinite; }
@keyframes chapa { 0%, 80%, 100% { transform: rotate(-4deg) scale(1); } 88% { transform: rotate(3deg) scale(1.12); } }
.chapa-nuevo.chica { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 8px; padding: 0 4px; border-width: 1.5px; }
.guia { position: relative; animation: guia 1.8s ease-in-out infinite; }
@keyframes guia { 50% { box-shadow: 0 0 0 3px #ffe27a, 0 0 18px 4px rgba(255, 226, 122, .6); } }
.guia-flecha { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 16px 'Lilita One', sans-serif; color: #ffe27a; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  animation: rebota .8s ease-in-out infinite; pointer-events: none; z-index: 2; }
@keyframes rebota { 50% { transform: translate(-50%, 5px); } }
.numerito { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--ink); background: #ff3a3a;
  font: 12px 'Lilita One', sans-serif; font-style: normal; color: #fff; }
.tarjeta .numerito, .boton-dia .numerito { position: absolute; top: -7px; right: -6px; }
.tarjeta-jefe, .tarjeta-evento { position: relative; }
.pestanas button .numerito { margin-left: 4px; min-width: 16px; height: 16px; font-size: 10px; }

/* ---------- Cofres de la arena ---------- */
.cofres-fila { margin-top: 10px; padding: 8px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #5a3a22, #3e2614); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 4px 0 rgba(4, 10, 36, .45); }
.cofres-titulo { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; }
.cofres-titulo b { font-size: 15px; }
.cofres-titulo small { margin-left: auto; color: #f0d8b8; font-size: 11px; text-align: right; }
.cofres-lugares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cofre-lugar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 4px 2px; border-radius: 10px;
  border: 2px solid var(--ink); background: rgba(0, 0, 0, .28); color: #fff; cursor: pointer; }
.cofre-lugar.vacio { border-style: dashed; border-color: rgba(255, 255, 255, .25); cursor: default; }
.cofre-lugar.vacio small { color: #c8a888; font-size: 11px; }
.cofre-lugar small { font: 12px 'Lilita One', sans-serif; }
.cofre-lugar.plata { background: radial-gradient(circle at 50% 40%, rgba(180, 220, 255, .35), rgba(0, 0, 0, .28)); }
.cofre-lugar.oro { background: radial-gradient(circle at 50% 40%, rgba(255, 210, 63, .4), rgba(0, 0, 0, .28)); }
.cofre-lugar.abriendo small { color: #9df27a; }
.cofre-lugar.listo { background: radial-gradient(circle at 50% 40%, rgba(255, 240, 150, .7), rgba(224, 138, 0, .45)); animation: late 1s ease-in-out infinite; }
.cofre-lugar.listo small { color: #fff; }
.cofre-ventana .cofre-grande { display: grid; place-items: center; padding: 6px; }
.cofre-grande.listo canvas { animation: late 1s ease-in-out infinite; }
.cofre-posible { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cofre-posible-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--caja); border: 2px solid var(--borde-caja); font-size: 13px; }
.cofre-posible-fila small { color: var(--dim); }

/* ---------- Botones del día (premio diario, misiones, álbum) ---------- */
.botones-dia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.boton-dia { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border-radius: 12px; border: 2px solid var(--ink); color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #4f86e6, #2f62bf); box-shadow: inset 0 -3px 0 #1c4a9a, inset 0 2px 0 rgba(255, 255, 255, .3), 0 3px 0 rgba(4, 10, 36, .45); }
.boton-dia b { font-size: 12px; line-height: 1.05; text-align: center; }
.boton-dia .chapa-nuevo { position: absolute; top: -8px; left: -4px; margin: 0; }

/* ---------- Tarjetas del evento y del jefe ---------- */
.tarjeta-evento { background: linear-gradient(180deg, #ff8ac4, #c83a84); }
.tarjeta-evento.tema-brujas { background: linear-gradient(180deg, #8a4ac8, #3a1a6a); }
.tarjeta-evento.tema-primavera { background: linear-gradient(180deg, #8ad85a, #2f8f42); }
.tarjeta-jefe { background: linear-gradient(180deg, #a83a3a, #5a1a1a); }
.tarjeta-evento .punto, .tarjeta-jefe .punto { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ff3a3a; border: 2px solid var(--ink); }

/* ---------- Premios (premios.js) ---------- */
.premios-lista { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.premio-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; border: 2px solid var(--ink); font-size: 12px; color: #fff;
  background: color-mix(in srgb, var(--rz) 30%, rgba(8, 18, 50, .75)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rz) 60%, transparent); }
.premio-chip canvas.px { margin: -2px 0; }

/* ---------- Misiones y premio por entrar ---------- */
.mision { padding: 10px 12px; margin-bottom: 10px; }
.mision.lista { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 0 0 3px #9df27a, 0 6px 0 rgba(4, 10, 36, .45); }
.mision.hecha { opacity: .7; }
.mision-top { display: flex; align-items: center; gap: 8px; }
.mision-dif { flex: none; font: 11px 'Lilita One', sans-serif; padding: 2px 7px; border-radius: 7px; border: 2px solid var(--ink); color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 0 var(--ink); }
.mision-txt { font: 15px 'Lilita One', sans-serif; font-weight: 400; line-height: 1.15; }
.mision-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mision-ok { font-size: 22px; color: #9df27a; }
.mision-bonus { display: flex; align-items: center; gap: 10px; }
.mision-bonus small { display: block; color: var(--txt2); font-size: 12px; }
.mision-bonus.hecha { opacity: .7; }
.calendario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.cal-dia { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 2px solid var(--ink); text-align: center;
  background: color-mix(in srgb, var(--rz) 25%, rgba(8, 18, 50, .7)); font-size: 11px; line-height: 1.1; }
.cal-dia small { font: 11px 'Lilita One', sans-serif; }
.cal-dia.grande { grid-column: span 2; background: radial-gradient(circle, rgba(255, 210, 63, .45), rgba(8, 18, 50, .7)); }
.cal-dia.hecho { opacity: .5; }
.cal-dia.hoy { box-shadow: 0 0 0 3px #ffe27a, 0 0 14px rgba(255, 226, 122, .7); animation: late 1.4s ease-in-out infinite; }
.cal-ok { position: absolute; top: 2px; right: 4px; color: #9df27a; font-size: 16px; }

/* ---------- Jefe de la semana ---------- */
.jefe-top { text-align: center; background: linear-gradient(180deg, #8a2a2a 0, #5a1a1a 60%, #3a1010 100%); }
.jefe-evento { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 8px; background: #7b3fa0; border: 2px solid var(--ink); margin-bottom: 4px; }
.jefe-figura { display: grid; place-items: center; margin: -4px 0 -8px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.jefe-nombre-grande { margin: 0; font-size: 26px; color: #ffe27a; }
.jefe-barra { position: relative; margin: 6px 0 22px; }
.jefe-hito { position: absolute; top: 24px; transform: translateX(-50%); width: 2px; height: 0; }
.jefe-hito i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: #2a3658;
  font: 10px/12px 'Lilita One', sans-serif; font-style: normal; text-align: center; color: #fff; }
.jefe-hito.ok i { background: #43b82c; }
.jefe-hitos-premios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jefe-hito-premio { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 8px; background: var(--caja); border: 2px solid var(--borde-caja); }
.jefe-hito-premio.ok { border-color: #43b82c; }
.jefe-mis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; text-align: center; }
.jefe-mis > div { background: var(--caja); border: 2px solid var(--borde-caja); border-radius: 10px; padding: 6px; }
.jefe-mis small { display: block; color: var(--txt2); font-size: 11px; }
.jefe-mis b { font-size: 22px; }
.jefe-ranking { display: flex; flex-direction: column; gap: 4px; }
.fila-jefe { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); }
.fila-jefe.yo { border-color: #ffd23f; background: rgba(255, 210, 63, .18); }
.fila-jefe .pos { font-size: 16px; text-align: center; }
.fila-jefe .quien b { display: block; overflow-wrap: anywhere; line-height: 1.1; }
.fila-jefe .quien small { color: var(--txt2); font-size: 11px; }
.fila-jefe .pts { font-size: 18px; color: #ffe27a; }
.jefe-puestos { display: flex; flex-direction: column; gap: 4px; }
.jefe-puesto { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--caja); border: 2px solid var(--borde-caja); }
.jefe-puesto small { color: var(--txt2); }

/* ---------- Álbum ---------- */
.album-hitos { display: flex; flex-direction: column; gap: 6px; }
.album-hito { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); }
.album-hito b { font-size: 18px; text-align: center; }
.album-hito.listo { border-color: #9df27a; }
.album-hito.hecho { opacity: .55; }
.album-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.album-item { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; border: 3px solid var(--rz); background: radial-gradient(circle, color-mix(in srgb, var(--rz) 35%, #23458f), #1a2f66); cursor: pointer; padding: 0; overflow: hidden; }
.album-item.falta { border-color: #3a4668; background: #1a2240; }
.album-item.falta canvas { filter: brightness(0) opacity(.45); }
.album-pregunta { position: absolute; font-size: 20px; color: #a9c0ec; }
.album-grande { display: grid; place-items: center; padding: 8px; }
.album-grande.falta canvas { filter: brightness(0) opacity(.5); }

/* ---------- Evento ---------- */
.evento-top.tema-primavera { background: linear-gradient(180deg, #6fc84a 0, #3f9a3a 50%, #2a6a2a 100%); }
.evento-top.tema-brujas { background: linear-gradient(180deg, #7a3ab8 0, #4a2080 50%, #2a1050 100%); }
.evento-cab { display: flex; align-items: center; gap: 10px; }
.evento-cab h1 { margin: 0; font-size: 24px; }
.evento-tengo { text-align: center; margin: 4px 0 6px; font-size: 22px; color: #ffe27a; }
.evento-reglas { margin: 0; padding-left: 20px; color: var(--txt2); }
.evento-hitos { display: flex; flex-direction: column; gap: 6px; }
.evento-hito { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); }
.evento-hito.destacado { background: radial-gradient(circle at 30% 50%, rgba(255, 210, 63, .25), var(--caja)); }
.evento-hito.listo { border-color: #9df27a; }
.evento-hito.hecho { opacity: .55; }
.evento-pts { display: flex; align-items: center; gap: 3px; font-size: 16px; }
.evento-cosa { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.evento-ok { font-size: 20px; color: #9df27a; }
.evento-falta { color: var(--dim); font-size: 11px; }

/* ---------- Resultado de la pelea: cofre y puntos del evento ---------- */
.res-extras { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.res-cofre { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; border: 2px solid var(--ink); background: radial-gradient(circle, rgba(255, 220, 120, .5), rgba(8, 18, 50, .6));
  font-size: 15px; animation: pum .5s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.res-evento { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; border: 2px solid var(--ink); background: rgba(8, 18, 50, .6); font: 14px 'Lilita One', sans-serif; }

/* ---------- Pronósticos del torneo ---------- */
.pronostico-aviso { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 8px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(180deg, #7b3fa0, #4a2070); }
.pronostico-aviso small { display: block; color: #e8d8ff; font-size: 12px; }
.partido .lado.pronostico { outline: 3px solid #c8a8ff; outline-offset: 1px; border-radius: 8px; background: rgba(180, 120, 255, .22); }

/* ---------- Mascotas que evolucionan ---------- */
.mascota-evo { color: #ffe27a; font-size: 11px; line-height: 1.15; }
.mascota.evo1 { box-shadow: 0 0 0 2px #c3ccd5; }
.mascota.evo2 { box-shadow: 0 0 0 2px #ffd23f, 0 0 12px rgba(255, 210, 63, .45); }

/* ---------- ULTIS: el cartel en la pelea, la marca en la placa y la pantalla ---------- */
.ulti-cartel { position: absolute; left: 50%; top: 22%; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 16px; border: 3px solid var(--ink);
  transform: translateX(-50%); background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 70%, #fff), var(--rz) 55%, color-mix(in srgb, var(--rz) 70%, #000));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 40px 8px color-mix(in srgb, var(--rz) 70%, transparent), 0 6px 0 rgba(4, 10, 36, .55);
  animation: ultiEntra 2.2s cubic-bezier(.2, 1.4, .4, 1) both; pointer-events: none; max-width: 92%; }
.ulti-cartel .ulti-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; border: 3px solid var(--ink); background: rgba(8, 18, 50, .55); flex: none; }
.ulti-cartel small { display: block; font: 14px 'Lilita One', sans-serif; color: #fff; letter-spacing: .2em; }
.ulti-cartel b { display: block; font: 24px/1.05 'Lilita One', sans-serif; font-weight: 400; color: #fff; }
@keyframes ultiEntra { 0% { transform: translateX(-50%) scale(.2) rotate(-8deg); opacity: 0; } 12% { transform: translateX(-50%) scale(1.12) rotate(2deg); opacity: 1; }
  20% { transform: translateX(-50%) scale(1); } 85% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(.9) translateY(-14px); opacity: 0; } }
.ulti-chip { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 0 6px 0 2px; border-radius: 999px; border: 2px solid var(--ink); background: var(--rz); font: 10px/14px 'Lilita One', sans-serif; color: #fff;
  -webkit-text-stroke: 0; text-shadow: 0 1px 0 var(--ink); animation: chapa 2.4s ease-in-out infinite; }
.placa.der .ulti-chip { float: right; }
.ulti-chip.usada { filter: grayscale(1) brightness(.6); animation: none; text-decoration: line-through; }
.traje-ulti { display: block; margin: 2px 0 4px; padding: 2px 6px; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(180deg, #b86cf5, #7b3fa0); font: 11px/1.2 'Lilita One', sans-serif; color: #fff; }

.ulti-top { background: linear-gradient(180deg, #5a3ab8 0, #3a2280 60%, #24145a 100%); }
.ulti-ficha { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border-radius: 12px; border: 3px solid var(--rz);
  background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--rz) 40%, transparent), rgba(8, 18, 50, .6)); }
.ulti-ficha.grande { padding: 12px; }
.ulti-ficha.falta { border-color: #3a4668; background: #1a2240; cursor: pointer; }
.ulti-ficha.falta .ulti-ficha-ico canvas { filter: brightness(0) opacity(.45); }
.ulti-ficha-ico { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--ink); background: rgba(0, 0, 0, .3); }
.ulti-ficha.grande .ulti-ficha-ico { width: 76px; height: 76px; }
.ulti-ficha-ico i { position: absolute; font-size: 22px; font-style: normal; color: #a9c0ec; }
.ulti-ficha-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ulti-ficha-txt b { font-size: 16px; line-height: 1.1; }
.ulti-ficha.grande .ulti-ficha-txt b { font-size: 21px; }
.ulti-ficha-txt small { color: var(--txt2); font-size: 12px; line-height: 1.25; }
.ulti-cuando { color: #ffe27a !important; }
.ulti-rz { align-self: flex-start; font: 10px 'Lilita One', sans-serif; padding: 1px 6px; border-radius: 6px; background: var(--rz); color: #fff; border: 1.5px solid var(--ink); }
.ulti-ficha > .btn, .ulti-ficha > .ulti-puesta, .ulti-ficha > .ulti-traje-chip { grid-column: 1 / -1; justify-self: end; }
.ulti-puesta { color: #9df27a; font-size: 14px; }
.ulti-traje-chip { font: 11px 'Lilita One', sans-serif; padding: 2px 8px; border-radius: 8px; background: #7b3fa0; border: 2px solid var(--ink); }
.ulti-grilla { display: flex; flex-direction: column; gap: 6px; }
.ulti-trajes { display: flex; flex-direction: column; gap: 6px; }
.ulti-traje { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--rz);
  background: radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--rz) 30%, transparent), rgba(8, 18, 50, .6)); }
.ulti-traje.falta { opacity: .75; border-color: #3a4668; }
.ulti-traje-cara { width: 40px; height: 36px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(0, 0, 0, .25); display: grid; place-items: center; overflow: hidden; }
.ulti-traje-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ulti-traje-txt b { font-size: 14px; line-height: 1.1; }
.ulti-traje-txt small { color: var(--txt2); font-size: 11px; line-height: 1.2; }
.heroe-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* =====================================================================
   PULIDO PREMIUM (04/10): relieve, brillos y movimiento suave en lo que más se ve
   ===================================================================== */
/* el fondo de la pantalla: una luz desde arriba y una trama de rombos muy suave (no se ve plano) */
#pantalla { background:
  radial-gradient(120% 60% at 50% 0%, rgba(90, 140, 255, .22), rgba(90, 140, 255, 0) 70%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 14px),
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 14px),
  #18264a; }

/* paneles: un filo de luz adentro y una sombra más profunda */
.panel { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 0 0 2px rgba(255, 255, 255, .06), inset 0 -5px 0 rgba(8, 20, 60, .35), 0 6px 0 rgba(4, 10, 36, .45), 0 10px 18px rgba(0, 0, 0, .25); }

/* botones: brillo arriba, el principal con un destello que lo recorre y un halo */
.btn { text-shadow: 0 2px 0 var(--ink); }
.btn.amarillo:not(:disabled) { box-shadow: inset 0 -4px 0 var(--s), inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 rgba(4, 10, 36, .55), 0 0 14px rgba(255, 196, 40, .28); }
.btn.grande.late:not(:disabled) { position: relative; overflow: hidden; }
.btn.grande.late:not(:disabled)::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); animation: destello 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes destello { 0%, 55% { left: -50%; } 85%, 100% { left: 130%; } }
.btn:focus-visible { outline: 3px solid #ffe27a; outline-offset: 2px; }

/* barras: fondo hundido, brillo arriba del relleno y una franja de luz que pasa en las de progreso */
.barra-v { background: linear-gradient(180deg, #0f1630, #1d2850); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 2px 0 rgba(4, 10, 36, .5); }
.barra-v > i { border-radius: 0 5px 5px 0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .45); }
.barra-v > i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); }
.barra-v.xp > i, .barra-v.media > i { background-size: 100% 100%; }
.barra-v.xp > i::before, .tarjeta-pase .barra-v > i::before { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); animation: franja 2.8s ease-in-out infinite; }
@keyframes franja { 0%, 40% { left: -40%; } 100% { left: 110%; } }
.barra-v > i { overflow: hidden; }

/* barra de arriba: píldoras con brillo y el + que late */
.pildora { background: linear-gradient(180deg, rgba(4, 10, 36, .75), rgba(14, 28, 70, .65)); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 2px 0 rgba(4, 10, 36, .4); }
.pildora .mas { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 6px rgba(111, 216, 69, .6); }
.barra .yo .cara { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 2px 0 rgba(4, 10, 36, .45); }

/* barra de abajo: la pestaña elegida brilla y tiene una rayita de luz arriba */
.navabajo { background: linear-gradient(180deg, #2a55ad, #1a3a7c 60%, #142e66); }
.navabajo a.on::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 3px 3px; background: #ffe27a; box-shadow: 0 0 8px #ffe27a; }
.navabajo a.centro { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 -4px 12px rgba(255, 196, 40, .35); }
.navabajo a.centro::before { display: none; }

/* tarjetas: brillo, se hunden al tocarlas y el ícono va en un medallón */
.tarjeta { position: relative; background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 50%); transition: transform .08s, filter .12s;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 3px 0 rgba(4, 10, 36, .45), 0 6px 10px rgba(0, 0, 0, .18); }
.tarjeta:active { transform: translateY(2px); filter: brightness(.95); }
.tarjeta > canvas.px:first-child { padding: 3px; border-radius: 10px; background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(0, 0, 0, .18)); box-shadow: inset 0 0 0 2px rgba(8, 18, 50, .45); }
.boton-dia:active { transform: translateY(2px); }
.boton-dia > canvas.px:first-child { filter: drop-shadow(0 2px 0 rgba(4, 10, 36, .5)); }

/* ventanas: el fondo se desenfoca y el panel aparece con un pequeño rebote */
#modal { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#modal .panel { animation: modalEntra .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes modalEntra { from { transform: scale(.88); opacity: 0; } }
#modal .titulo { justify-content: center; text-align: center; font-size: 22px; }

/* títulos de pantalla: una rayita dorada abajo */
.cabecera h1 { position: relative; }
.cabecera h1::after { content: ''; display: block; width: 46px; height: 3px; margin-top: 3px; border-radius: 3px; background: linear-gradient(90deg, #ffe27a, rgba(255, 226, 122, 0)); }
.panel > .titulo:first-child { padding-bottom: 6px; border-bottom: 2px solid rgba(8, 18, 50, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }

/* avisos: con brillo y entran desde arriba */
.toast { background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 4px 0 rgba(4, 10, 36, .5), 0 8px 18px rgba(0, 0, 0, .3); }

/* barritas de desplazamiento finas y del color del juego */
#pantalla::-webkit-scrollbar { width: 6px; }
#pantalla::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }

/* quien prefiere menos movimiento: sin destellos ni franjas */
@media (prefers-reduced-motion: reduce) {
  .btn.grande.late:not(:disabled)::after, .barra-v.xp > i::before, .tarjeta-pase .barra-v > i::before, .chapa-nuevo, .guia, .guia-flecha { animation: none !important; }
}

/* ---------- Contador de vidas (cuando te quedás sin vidas) ---------- */
.contador-vida { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.contador-vida > small { font: 13px 'Lilita One', sans-serif; letter-spacing: .12em; color: #ffd1cc; margin-top: 4px; }
.contador-reloj { font: 44px/1 'Lilita One', sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.contador-barra { width: 86%; height: 14px; }
.contador-barra > i { background: linear-gradient(180deg, #ffb8c0, #ff5a6a 50%, #d42b4b) !important; }
.contador-vida .sub { margin: 4px 0 6px; font-size: 12px; }
.sin-vidas { text-align: center; padding: 12px; background: linear-gradient(180deg, #8a2a3a 0, #5a1a2a 60%, #3a1020 100%); }
.sin-vidas h3 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.pildora.vidas { position: relative; }
.pildora.vidas.sin { background: linear-gradient(180deg, #a8231f, #6a1414); animation: late 1.6s ease-in-out infinite; }
.pildora-reloj { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; border: 1.5px solid var(--ink); background: #1a2240;
  font: 10px/12px 'Lilita One', sans-serif; color: #ffb8c0; -webkit-text-stroke: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amigos-invitar { display: flex; flex-direction: column; gap: 2px; padding: 12px; margin-bottom: 12px; background: linear-gradient(180deg, #3fae4a 0, #2a8a3a 60%, #1f6a2c 100%); }

/* ---------- Peón dormido (tope de peleas del día) y vidas extra ---------- */
.dormido { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px; background: linear-gradient(180deg, #2b3f8a 0, #1c2860 60%, #121a40 100%); }
.dormido h3 { margin: 2px 0 0; font-size: 18px; color: #fff; }
.dormido > small { font: 13px 'Lilita One', sans-serif; letter-spacing: .12em; color: #bfe9ff; margin-top: 4px; }
.pildora.vidas b.extra { color: #ffd84a; }
.pildora.vidas b.extra small { font-size: 10px; vertical-align: top; margin-left: 1px; }

/* ---------- Revelar premios a pantalla completa (cofres, misiones, calendario…) ---------- */
.rv-capa { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: calc(16px + var(--sa-top, 0px)) 16px calc(20px + var(--sa-bot, 0px)); overflow: hidden; overflow: clip; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: radial-gradient(ellipse at 50% 45%, #2a4fa6 0, #142a66 45%, #070f2e 100%); animation: rv-entra .25s ease; }
.rv-capa.sale { animation: rv-sale .26s ease forwards; }
.rv-capa.tiembla { animation: rv-tiembla .45s ease; }
@keyframes rv-entra { from { opacity: 0; } }
@keyframes rv-sale { to { opacity: 0; transform: scale(1.04); } }
@keyframes rv-tiembla { 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
.rv-chispas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; image-rendering: pixelated; }
.rv-rayos { --rz: #ffcf3a; position: absolute; left: 50%; top: 46%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rz) 55%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 18%, transparent 42%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 18%, transparent 42%);
  animation: rv-gira 22s linear infinite; }
.rv-rayos.on { opacity: .75; }
@keyframes rv-gira { to { transform: rotate(360deg); } }
.rv-titulo { position: relative; z-index: 2; font: 28px/1.1 'Lilita One', sans-serif; color: #fff; text-align: center; letter-spacing: .02em; animation: rv-baja .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rv-baja { from { transform: translateY(-40px) scale(.7); opacity: 0; } }
.rv-escena { position: relative; z-index: 2; width: 100%; max-width: 440px; min-height: 330px; display: grid; place-items: center; }
.rv-pie { position: relative; z-index: 6; min-height: 64px; display: flex; align-items: center; justify-content: center; }
.rv-pie .btn { min-width: 210px; animation: pum .4s cubic-bezier(.3, 1.6, .5, 1); }
.rv-toca { font: 21px 'Lilita One', sans-serif; color: #fff; animation: rv-late 1s ease-in-out infinite; }
.rv-toca.chico { font-size: 15px; letter-spacing: .04em; opacity: .9; }
@keyframes rv-late { 50% { transform: scale(1.08); opacity: .75; } }
.rv-saltar { position: absolute; z-index: 7; right: 12px; top: calc(12px + var(--sa-top, 0px)); padding: 5px 12px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(4, 10, 36, .45); color: #fff; font: 13px 'Lilita One', sans-serif; letter-spacing: .05em; cursor: pointer; }
.rv-flash { position: absolute; inset: 0; z-index: 4; background: #fff; pointer-events: none; animation: rv-flash .6s ease-out forwards; }
@keyframes rv-flash { from { opacity: .95; } to { opacity: 0; } }

/* el cofre: cae, salta esperando el toque, cada golpe lo sacude más y deja escapar más luz */
.rv-cofre-caja { position: relative; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), opacity .4s; animation: rv-cae .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes rv-cae { from { transform: translateY(-110vh) rotate(-8deg); } 70% { transform: translateY(8px) scaleY(.9); } }
.rv-escena.con-cartas { min-height: 400px; }
.rv-escena.con-cartas .rv-cofre-caja { transform: translateY(150px) scale(.5); opacity: .9; }
.rv-escena.con-cartas .rv-mesa { align-items: start; padding-top: 6px; }
.rv-cofre { position: relative; display: grid; place-items: center; cursor: pointer; animation: rv-espera 1.1s ease-in-out .6s infinite; }
.rv-cofre .rv-dibujo { position: relative; z-index: 1; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .35)); transition: filter .3s; }
.rv-cofre .rv-brillo { position: absolute; inset: -46px; border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s;
  background: radial-gradient(circle, color-mix(in srgb, var(--rz) 85%, #fff) 0, color-mix(in srgb, var(--rz) 45%, transparent) 38%, transparent 68%); }
@keyframes rv-espera { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-8px) rotate(-3deg); } 90% { transform: translateY(0) rotate(2deg); } }
.rv-cofre[data-golpes="1"] { --f: 1; } .rv-cofre[data-golpes="2"] { --f: 2; } .rv-cofre[data-golpes="3"] { --f: 3; }
.rv-cofre[data-golpes] .rv-brillo { opacity: calc(var(--f) * .3); transform: scale(calc(.75 + var(--f) * .15)); }
.rv-cofre[data-golpes] .rv-dibujo { filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .35)) brightness(calc(1 + var(--f) * .12)); }
.rv-cofre.golpe { animation: rv-golpe .34s ease; }
@keyframes rv-golpe { 15% { transform: scale(calc(1 + var(--f) * .05), calc(1 - var(--f) * .06)) translateY(4px); }
  40% { transform: rotate(calc(var(--f) * -4deg)) translateY(calc(var(--f) * -7px)) scale(calc(1 + var(--f) * .04)); }
  65% { transform: rotate(calc(var(--f) * 3deg)); } 85% { transform: rotate(calc(var(--f) * -1deg)); } }
.rv-cofre.abierto { animation: pum .45s cubic-bezier(.3, 1.6, .5, 1); }
.rv-cofre.abierto .rv-brillo { opacity: 1; transform: scale(1.35); }
.rv-cuantos { position: absolute; z-index: 2; right: -10px; top: -6px; min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px;
  border: 3px solid var(--ink); background: linear-gradient(180deg, #ff6b6b, #d42b4b); color: #fff; font: 22px 'Lilita One', sans-serif; transition: transform .25s; }
.rv-cuantos.fuera { transform: scale(0); }

/* las cartas: de espaldas, se dan vuelta (las épicas y legendarias tiemblan antes con la luz de su rareza) */
.rv-mesa { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; perspective: 900px; pointer-events: none; }
.rv-carta { --rz: #d6dbe0; position: relative; width: 176px; height: 232px; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.rv-carta.sale { animation: rv-sale-cofre .42s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rv-sale-cofre { from { transform: translateY(150px) scale(.15) rotate(-12deg); opacity: 0; } }
.rv-carta.vuelta { transform: rotateY(180deg); }
.rv-carta.suspenso { animation: rv-suspenso .12s linear infinite; }
.rv-carta.suspenso .rv-dorso { box-shadow: 0 0 0 4px var(--rz), 0 0 40px 10px var(--rz); }
@keyframes rv-suspenso { 25% { transform: translate(-3px, 1px) rotate(-1.5deg); } 75% { transform: translate(3px, -1px) rotate(1.5deg); } }
.rv-cara { position: absolute; inset: 0; border-radius: 16px; border: 4px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; text-align: center; transition: box-shadow .3s; }
.rv-dorso { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 10px, transparent 10px 20px), linear-gradient(180deg, #3a64c8, #1d3a8a);
  box-shadow: inset 0 0 0 4px #ffd23f, inset 0 0 0 7px var(--ink), 0 8px 0 rgba(0, 0, 0, .35); }
.rv-dorso span { font: 84px 'Lilita One', sans-serif; color: #ffd23f; }
.rv-frente { transform: rotateY(180deg); color: #fff;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--rz) 70%, #fff) 0, color-mix(in srgb, var(--rz) 55%, #1d3a7a) 45%, #12245a 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 8px 0 rgba(0, 0, 0, .35); }
.rv-carta.rz-epica .rv-frente, .rv-carta.rz-legendaria .rv-frente { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 0 0 3px var(--rz), 0 0 34px 6px var(--rz); }
.rv-carta.rz-legendaria .rv-frente::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  animation: rv-reflejo 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes rv-reflejo { from { transform: translateX(-60%); } 60%, to { transform: translateX(60%); } }
.rv-ico { min-height: 112px; display: grid; place-items: center; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.rv-frente b { font: 18px/1.1 'Lilita One', sans-serif; }
.rv-frente small { font-size: 11px; opacity: .9; }
.rv-frente .rv-rz { font: 13px 'Lilita One', sans-serif; letter-spacing: .1em; color: color-mix(in srgb, var(--rz) 60%, #fff); opacity: 1; }
.rv-cartel { position: absolute; top: -4px; left: 50%; z-index: 4; font: 34px 'Lilita One', sans-serif; color: var(--rz); white-space: nowrap;
  text-shadow: 0 0 18px var(--rz); animation: rv-cartel .5s cubic-bezier(.3, 1.8, .5, 1) forwards; transform: translateX(-50%) rotate(-6deg); }
@keyframes rv-cartel { from { transform: translateX(-50%) rotate(-6deg) scale(2.6); opacity: 0; } }

/* el resumen del final */
.rv-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 10px; width: 100%; perspective: 900px; }
.rv-resumen.uno { place-items: center; }
.rv-carta.chica { width: auto; height: 150px; }
.rv-carta.chica .rv-cara { border-radius: 12px; border-width: 3px; padding: 6px 4px; gap: 3px; }
.rv-carta.chica .rv-ico { min-height: 56px; }
.rv-carta.chica .rv-frente b { font-size: 13px; }
.rv-carta.chica .rv-dorso span { font-size: 48px; }
.rv-carta.entra { animation: rv-da-vuelta .55s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes rv-da-vuelta { from { transform: rotateY(0) scale(.2); } to { transform: rotateY(180deg); } }
@media (max-height: 640px) { .rv-escena { min-height: 270px; } .rv-escena.con-cartas { min-height: 330px; } .rv-escena.con-cartas .rv-cofre-caja { transform: translateY(125px) scale(.42); } .rv-carta:not(.chica) { width: 156px; height: 206px; } .rv-ico { min-height: 92px; } }

/* ---------- Clan: botones de la cabecera y pestañas que entran las 4 en el celular ---------- */
.clan-cab-botones { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.clan-cab-botones .btn.chico { padding: 6px 10px; font-size: 13px; }
.pest-clan { overflow: visible; }
.pest-clan button { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 13px; letter-spacing: 0; }
.pest-clan button .numerito { margin-left: 3px; }

/* ---------- Elegir rival, venganza, racha y primeras peleas ---------- */
.rival { --dif: #f5b301; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 18px 10px 10px; margin-top: 12px; cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 0 0 3px var(--dif), 0 6px 0 rgba(4, 10, 36, .45); transition: transform .12s; }
.rival:active { transform: scale(.98); }
.rival-dif { position: absolute; left: 10px; top: -11px; padding: 2px 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--dif); color: #fff; font: 14px 'Lilita One', sans-serif; letter-spacing: .06em; }
.rival-retrato { width: 80px; height: 72px; border-radius: 12px; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 40%, #5a86d8, #1c3a80); display: grid; place-items: center; overflow: hidden; }
.rival-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rival-nombre { font: 17px/1.1 'Lilita One', sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rival-info > small { color: var(--txt2); font-size: 12px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.rival-equipo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 2px 0; }
.rival-vida { display: inline-flex; align-items: center; gap: 2px; font: 13px 'Lilita One', sans-serif; color: #ff9aa8; margin-right: 2px; }
.rival-ulti { font-size: 14px; color: #ffe27a; }
.rival-combo { font: 10px 'Lilita One', sans-serif; padding: 1px 5px; border-radius: 6px; background: #b45cff; color: #fff; border: 1px solid var(--ink); }
.rival-txt { font-style: italic; }
.rival-premio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font: 13px 'Lilita One', sans-serif; }
.rival-premio > span { display: inline-flex; align-items: center; gap: 2px; }
.pr-xp { color: #9df27a; }
.pr-pase { color: #ffe27a; }
.pr-cofre { color: #ffcf8a; }
.rival .btn { padding: 10px 10px; font-size: 15px; align-self: center; }
.novato-aviso { display: flex; gap: 10px; align-items: center; margin-top: 10px; background: linear-gradient(180deg, #2f8a4a, #1d5c30); }
.novato-aviso p { margin: 0; font-size: 13px; }
.venganza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer;
  background: linear-gradient(180deg, #8a2a3a 0, #5a1a2a 70%, #3a1020 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 0 0 3px #ff5a4a, 0 6px 0 rgba(4, 10, 36, .45); animation: venganza-late 2s ease-in-out infinite; }
@keyframes venganza-late { 50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 0 0 3px #ff5a4a, 0 0 18px 4px rgba(255, 90, 74, .55), 0 6px 0 rgba(4, 10, 36, .45); } }
.venganza-titulo { font: 20px 'Lilita One', sans-serif; color: #ffd84a; letter-spacing: .03em; }
.venganza small { color: #ffd1cc; font-size: 12px; }
.venganza-reloj b { font-variant-numeric: tabular-nums; }
.venganza.chica { padding: 8px 10px; margin: 0 0 10px; }
.venganza.chica .rival-retrato { width: 56px; height: 50px; }
.venganza.chica .rival-retrato canvas { transform: scale(.7); }
.venganza.chica .venganza-titulo { font-size: 17px; }

/* la racha: un fuego que se prende desde 3 victorias seguidas */
.racha { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-top: 10px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3a3f63, #23284a); }
.racha.prendida { background: linear-gradient(180deg, #ff9a3c, #d4481e 60%, #8a2410); box-shadow: 0 0 16px rgba(255, 120, 40, .45); }
.racha.chico { padding: 5px 10px; margin: 6px 0 0; border-width: 2px; }
.racha-fuego { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; }
.racha.chico .racha-fuego { width: 32px; height: 32px; }
.racha-fuego .llama { font-size: 34px; line-height: 1; filter: grayscale(1) brightness(.8); }
.racha.chico .racha-fuego .llama { font-size: 26px; }
.racha.prendida .racha-fuego .llama { filter: none; animation: llama .5s ease-in-out infinite alternate; }
@keyframes llama { to { transform: scale(1.12) translateY(-2px) rotate(3deg); } }
.racha-fuego b { position: absolute; bottom: -2px; right: -4px; font: 16px 'Lilita One', sans-serif; color: #fff; }
.racha-txt { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.racha-txt b { font: 14px 'Lilita One', sans-serif; color: #fff; letter-spacing: .03em; }
.racha-txt small { font-size: 12px; color: #ffe9c8; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.racha:not(.prendida) .racha-txt small { color: var(--txt2); }
.racha-perdida { margin: 4px 0; font: 15px 'Lilita One', sans-serif; color: #ffb0a8; }

/* cómo se juega (primeras peleas) */
.novato { margin-bottom: 10px; background: linear-gradient(180deg, #2f8a4a, #1d5c30); }
.novato-tit { display: block; font: 17px 'Lilita One', sans-serif; color: #ffe27a; margin-bottom: 4px; }
.novato ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.novato li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.novato li b { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: #ffd23f; color: #3a2400; font: 14px 'Lilita One', sans-serif; }
.novato li.hecho { opacity: .7; }
.novato li.hecho b { background: #6fd845; color: #fff; }

/* el resultado: dificultad, estadísticas, compartir y (sin cuenta) a jugar */
.resultado { max-height: calc(100% - 70px - var(--sa-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.res-dif { display: inline-block; padding: 1px 12px; border-radius: 999px; border: 2px solid var(--ink); font: 13px 'Lilita One', sans-serif; letter-spacing: .06em; color: #fff; background: #f5b301; margin-bottom: 2px; }
.res-dif.dif-facil { background: #4fc35a; } .res-dif.dif-dificil { background: #e8463a; }
.estadisticas { margin: 10px 0 0; text-align: left; border-radius: 10px; background: rgba(8, 18, 50, .45); border: 2px solid var(--borde-caja); padding: 6px 10px; }
.estadisticas summary { cursor: pointer; font: 14px 'Lilita One', sans-serif; color: #ffe27a; }
.est-cab, .est-fila { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.est-cab { margin-top: 6px; font: 12px 'Lilita One', sans-serif; color: var(--txt2); }
.est-cab span:first-child, .est-fila b:first-child { text-align: right; }
.est-fila { padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.est-fila span { font-size: 12px; color: var(--txt2); text-align: center; min-width: 84px; }
.est-fila b { font: 16px 'Lilita One', sans-serif; color: #fff; opacity: .75; }
.est-fila b.gana { color: #9df27a; opacity: 1; }
.compartir-pelea { margin-top: 8px; width: 100%; }
.cta-jugar { margin: 10px 0 0; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, #2f8a4a, #1d5c30); border: 2px solid var(--ink); }
.cta-jugar b { font: 18px 'Lilita One', sans-serif; color: #ffe27a; }
.cta-jugar .sub { margin: 2px 0 8px; }
.intro-venganza { color: #ff7a6a !important; font-size: 19px !important; }
.intro-combos { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.intro-combo { font: 14px 'Lilita One', sans-serif; padding: 2px 10px; border-radius: 8px; border: 2px solid var(--ink); background: #b45cff; color: #fff; animation: pum .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.intro-combo.lado-B { background: #e8463a; }

/* combos: en la carta, en su detalle y en TU PEÓN */
.carta-combo { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 1px 8px; border-radius: 999px; border: 2px solid var(--ink);
  background: #b45cff; color: #fff; font: 11px 'Lilita One', sans-serif; animation: late 1.4s ease-in-out infinite; }
.carta-combo.cerca { background: #6a4c9c; animation: none; }
.carta-vista .combo-li { display: block; color: #e3c2ff; }
.carta-vista .combo-li small { display: block; color: var(--txt2); font-size: 12px; }
.carta-vista .combo-cerca { color: #c9a8f0; font-size: 13px; }
.sinergia.combo .combo-rayo { font-size: 22px; filter: grayscale(.6); }
.sinergia.combo.activa { background: linear-gradient(180deg, rgba(180, 92, 255, .45), rgba(110, 50, 180, .4)); border-color: #3a1a6a; }
.sinergia.combo.activa .combo-rayo { filter: none; }
.combo-piezas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.combo-piezas .chip { font-size: 11px; opacity: .55; }
.combo-piezas .chip.tengo { opacity: 1; box-shadow: 0 0 0 2px #9df27a; }
.sub-titulo { font: 16px 'Lilita One', sans-serif; color: #ffe27a; margin: 4px 0 6px; }
.sub-titulo:not(:first-child) { margin-top: 14px; }

/* ---------- Transición al cambiar de pantalla ---------- */
#pantalla.transicion > * { animation: pant-entra .24s cubic-bezier(.2, .9, .3, 1) backwards; }
#pantalla.transicion > *:nth-child(2) { animation-delay: .03s; } #pantalla.transicion > *:nth-child(3) { animation-delay: .06s; } #pantalla.transicion > *:nth-child(n+4) { animation-delay: .09s; }
@keyframes pant-entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { #pantalla.transicion > * { animation: none; } }

/* ---------- Monedas (la moneda del juego) ---------- */
.pildora.monedas b { color: #ffe27a; }
.saldos { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.botones-compra { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; width: 100%; }
.botones-compra .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.precio.oro { color: #3a2400; }
.rival-premio .pr-oro { color: #ffe27a; }

/* ---------- Barra de arriba en el celular: con las monedas no entra el nombre (se ve en la arena) ---------- */
@media (max-width: 430px) {
  .barra { gap: 5px; padding-left: 6px; padding-right: 6px; }
  .barra .yo { flex: 0 1 auto; gap: 4px; }
  .barra .yo .nom { display: none; }
  .barra .yo .nv { flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; }
  .barra .yo .nv .barra-v { display: block; width: 34px; flex: none; }
  .barra .pildora { padding: 0 6px 0 3px; font-size: 15px; gap: 3px; }
  .barra .pildora .mas { width: 16px; height: 16px; font-size: 12px; }
  .barra .pildora.vidas { margin-left: auto; }
}

/* ---------- Pelea: HUD, números y resultado (ajuste general) ---------- */
.placa .comps { gap: 5px; }
.placa .comp { display: flex; align-items: center; gap: 2px; }
.placa.der .comp { flex-direction: row-reverse; }
.placa .comp-ico { width: 16px; height: 14px; display: grid; place-items: center; overflow: hidden; }
.placa .comp-ico canvas { max-width: 16px; max-height: 14px; width: auto; height: auto; image-rendering: pixelated; }
.placa.der .comp-ico canvas { transform: scaleX(-1); }
.placa .comps .barra-v { width: 30px; }
.placa .comp.caida { opacity: .45; filter: grayscale(1); }
/* la parte que se acaba de perder queda blanca un ratito y se va achicando (se ve cuánto pegó) */
.placa .barra-v > b { background: linear-gradient(180deg, #fff, #ffe9a8); transition: width .55s ease .35s; }
.barra-v.pega > i { animation: barra-pega .28s ease; }
@keyframes barra-pega { 0%, 40% { filter: brightness(2.2) saturate(.3); } }
.barra-v.late { animation: barra-late .7s ease-in-out infinite; }
@keyframes barra-late { 50% { box-shadow: 0 0 0 2px #ff4a3a, 0 0 12px rgba(255, 60, 40, .8); } }
.placa.sacude { animation: placa-sacude .22s ease; }
@keyframes placa-sacude { 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 0); } }
/* el nombre del lugar: aparece al empezar y se va */
.lugar-combate { animation: lugar-va 3.2s ease forwards; }
@keyframes lugar-va { 0% { opacity: 0; transform: translate(-50%, -6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
/* el botón de velocidad: más grande y fácil de ver */
.controles .btn { min-width: 52px; min-height: 40px; font-size: 17px; border-radius: 12px; }
/* números: más gordos, con un saltito, y cada uno se va para un costado */
.flota { font-size: 24px; --ol: 3px; }
.flota.dano { color: #fff; }
.flota.dano.fuerte { font-size: 30px; color: #ffe9d6; }
.flota.crit { color: #ff4a3a; font-size: 36px; }
.flota.cura { color: #8fe86a; font-size: 24px; }
.flota.info { font-size: 17px; --ol: 2.4px; }
.flota.grande { font-size: 30px; }
.flota.veneno, .flota.fuego, .flota.sangre { font-size: 19px; }
@keyframes flota {
  0% { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  10% { transform: translate(calc(-50% + var(--dx, 0px) * .3), -14px) scale(1.35); opacity: 1; }
  22% { transform: translate(calc(-50% + var(--dx, 0px) * .45), -18px) scale(1); }
  72% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -52px) scale(.9); opacity: 0; }
}
/* resultado: tu peón arriba del cartel (con rayos si ganaste), papelitos y los premios de a uno */
.res-heroe { position: relative; display: grid; place-items: end center; height: 112px; margin: -4px 0 2px; }
.res-heroe canvas { position: relative; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(4, 10, 36, .55)); animation: heroe-sube .5s cubic-bezier(.3, 1.6, .5, 1); }
.res-heroe.gano canvas { animation: heroe-sube .5s cubic-bezier(.3, 1.6, .5, 1), heroe-salta 1.1s ease-in-out .5s infinite; }
@keyframes heroe-sube { from { transform: translateY(30px) scale(.6); opacity: 0; } }
@keyframes heroe-salta { 50% { transform: translateY(-5px); } }
.res-rayos { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 214, 90, .45) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 30%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 30%, transparent 62%);
  animation: carga-gira 14s linear infinite; }
@keyframes carga-gira { to { transform: rotate(360deg); } }
.resultado.perdio .res-heroe canvas { filter: grayscale(.35) brightness(.85) drop-shadow(0 4px 0 rgba(4, 10, 36, .55)); }
.res-extras > * { animation: premio-pop .45s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes premio-pop { from { transform: scale(.2); opacity: 0; } }
.confeti { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.confeti i { position: absolute; top: -12px; width: 7px; height: 11px; border: 1px solid rgba(4, 10, 36, .5); animation: confeti 3s cubic-bezier(.25, .5, .5, 1) forwards; }
@keyframes confeti { to { transform: translate(var(--va, 0px), 105vh) rotate(var(--gira, 540deg)); } }
@media (prefers-reduced-motion: reduce) { .res-heroe canvas, .res-rayos, .barra-v.late, .placa.sacude, .res-extras > * { animation: none !important; } }

/* ---------- Menús (ajuste general) ---------- */
/* arena: tarjetas en grupos con título */
.arena-casa .seccion { margin-top: 14px; }
.arena-casa .seccion .tarjetas { margin-top: 6px; }
.seccion-tit { display: flex; align-items: center; gap: 8px; font: 13px 'Lilita One', sans-serif; letter-spacing: .1em; color: #ffe27a; padding: 0 4px; }
.seccion-tit::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 226, 122, .5), rgba(255, 226, 122, 0)); }
.tarjeta-pase .barra-v { min-width: 0; }
/* barra de abajo: lo nuevo es un puntito dorado (el rojo es "hay algo para reclamar") */
.navabajo a .punto.nuevo { background: #ffd23f; box-shadow: 0 0 6px rgba(255, 210, 63, .9); }
/* elegir rival: más compacto */
.rival { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 16px 8px 8px; margin-top: 14px; }
.rival-dif small { font-size: 11px; letter-spacing: 0; opacity: .95; }
.rival-retrato { width: 62px; height: 60px; border-width: 2px; }
.rival-retrato canvas { transform: scale(.85); }
.rival-nombre { font-size: 15px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rival-equipo { margin: 1px 0; }
.rival-premio { gap: 6px; margin-top: 1px; font-size: 12px; }
.rival .btn { padding: 9px 8px; font-size: 14px; }

/* clan: para qué sirve (cuando todavía no tenés) */
.clan-por-que { display: flex; flex-direction: column; gap: 8px; }
.clan-ventaja { display: flex; align-items: center; gap: 10px; }
.clan-ventaja > canvas { flex: none; padding: 4px; border-radius: 10px; background: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2)); }
.clan-ventaja b { display: block; font: 14px 'Lilita One', sans-serif; color: #ffe27a; }
.clan-ventaja small { color: var(--txt2); font-size: 12.5px; }

/* tienda: la rareza se ve en toda la tarjeta (luz detrás del peón, brillo en las épicas y legendarias) */
.traje > canvas.px { border-radius: 12px; background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--rz) 60%, transparent), transparent 68%); }
.traje.rz-epica { box-shadow: inset 0 0 0 3px var(--rz), 0 0 14px rgba(180, 92, 255, .45), 0 4px 0 rgba(4, 10, 36, .45); }
.traje.rz-legendaria { box-shadow: inset 0 0 0 3px var(--rz), 0 0 18px rgba(245, 179, 1, .55), 0 4px 0 rgba(4, 10, 36, .45); }
.traje.rz-legendaria::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 246, 200, .35) 50%, transparent 65%);
  background-size: 250% 100%; animation: brillo-leyenda 3.2s ease-in-out infinite; }
@keyframes brillo-leyenda { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
.traje.puesto.rz-epica, .traje.puesto.rz-legendaria { box-shadow: inset 0 0 0 3px var(--rz), 0 0 0 3px #6fd845, 0 4px 0 rgba(4, 10, 36, .45); }
@media (prefers-reduced-motion: reduce) { .traje.rz-legendaria::after { animation: none; } }

/* cofres: los de oro brillan y tienen chispitas; los de plata, un reflejo */
.cofre-lugar.oro:not(.vacio) { box-shadow: 0 0 12px rgba(255, 210, 63, .45); }
.cofre-lugar.oro::before, .cofre-lugar.oro::after { content: '✦'; position: absolute; color: #fff6c0; font-size: 11px; text-shadow: 0 0 4px #ffd23f; pointer-events: none; animation: chispa-cofre 1.6s ease-in-out infinite; }
.cofre-lugar.oro::before { top: 6px; left: 10px; }
.cofre-lugar.oro::after { top: 16px; right: 9px; animation-delay: .8s; }
@keyframes chispa-cofre { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
.cofre-lugar.plata::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%);
  background-size: 250% 100%; animation: brillo-leyenda 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cofre-lugar.oro::before, .cofre-lugar.oro::after, .cofre-lugar.plata::after { animation: none; } }
/* la tarjeta de la clasificatoria va de media columna: el título se achica con el ancho para que no se corte */
.tarjeta-clasif b { font-size: clamp(10.5px, 3.35vw, 14px); letter-spacing: 0; }
.tarjeta-clasif > canvas.px:first-child { flex: none; }
@media (max-width: 350px) { .tarjeta-clasif { gap: 5px; } .tarjeta-clasif > .escudo-liga { transform: scale(.8); margin: 0 -4px; } }

/* instalar en el iPhone: los pasos */
.pasos-instalar ol { margin: 8px 0 0; padding-left: 22px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.pasos-instalar li { color: #eef3ff; }

/* iPhone: el aviso para instalar el juego como app */
.aviso-iphone { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3a5ee0, #2a1f8a); }
.aviso-iphone-ico { font-size: 26px; }
.aviso-iphone > div { flex: 1; min-width: 0; }
.aviso-iphone b { display: block; font: 14px 'Lilita One', sans-serif; color: #ffd23f; }
.aviso-iphone small { color: #e6ecff; font-size: 12px; }
.aviso-iphone-x { background: none; border: 0; color: #c9d4ff; font-size: 18px; padding: 4px; cursor: pointer; }

/* ajustes: el idioma */
.menu-mas .idiomas { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
/* ---------- Pase de batalla por temporadas (una por mes, cada una con su color: --tc) ---------- */
.pase { --tc: #e8a020; }
.pase-portada { position: relative; margin-bottom: 10px; border-radius: 16px; border: 3px solid var(--ink); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #1a1450), #150a40); box-shadow: 0 4px 0 rgba(4, 10, 36, .5), inset 0 0 0 2px color-mix(in srgb, var(--tc) 70%, #fff); }
.pase-escena { display: grid; place-items: center; border-bottom: 3px solid var(--ink); background: #0d0a28; }
.pase-escena canvas { max-width: 100%; height: auto !important; image-rendering: pixelated; }
.pase-portada-txt { padding: 8px 12px 10px; text-align: center; }
.pase-portada-txt small { display: block; font: 12px 'Lilita One', sans-serif; letter-spacing: .1em; color: color-mix(in srgb, var(--tc) 60%, #fff); }
.pase-portada-txt h1 { margin: 2px 0 2px; font-size: clamp(22px, 7vw, 30px); color: #fff; }
.pase-portada-txt p { margin: 0 0 6px; font-size: 13px; color: #e6ecff; font-style: italic; }
.pase-portada-datos { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 12.5px; color: #dfe7ff; }
.pase-reloj { display: inline-flex; align-items: center; gap: 4px; }
.pase-reloj b { color: #ffd23f; font: 14px 'Lilita One', sans-serif; }
.pase-prox { opacity: .8; }
.pase-estrella { position: absolute; top: 8px; left: 8px; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--ink); background: linear-gradient(180deg, #ffe98a, #f5b301); color: #fff; font: 12px 'Lilita One', sans-serif; }
.pase-fila.hito { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc) 22%, transparent), transparent); border-radius: 12px; }
.pase-fila.hito .pase-num { background: var(--tc); color: #fff; border-radius: 999px; min-width: 30px; padding: 2px 4px; transform: scale(1.15); }
.pase-celda.especial { box-shadow: 0 0 0 2px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 60%, transparent); }
.pase-excl { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; border: 2px solid var(--ink); background: var(--tc); color: #fff; font: 9px 'Lilita One', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.pase-extra { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 14px; border: 3px dashed color-mix(in srgb, var(--tc) 70%, #fff); background: rgba(8, 10, 40, .4); }
.pase-extra > div:nth-child(2) { flex: 1; min-width: 0; }
.pase-extra b { display: block; font: 14px 'Lilita One', sans-serif; color: #ffd23f; }
.pase-extra small { color: var(--txt2); font-size: 12px; }
.pase-extra.listo { border-style: solid; box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }
/* ---------- Apuestas (solo monedas) ---------- */
.apuesta { margin-top: 10px; padding: 8px 10px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #5a3a12, #3a240a); box-shadow: inset 0 2px 0 rgba(255, 220, 120, .2), 0 3px 0 rgba(4, 10, 36, .45); }
.apuesta-tit { display: flex; align-items: center; gap: 6px; }
.apuesta-tit b { font: 14px 'Lilita One', sans-serif; color: #ffd23f; letter-spacing: .04em; }
.apuesta-tit small { margin-left: auto; color: #ffe9c8; font-size: 12px; }
.apuesta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.apuesta-chip { flex: 1 1 auto; min-width: 52px; padding: 6px 8px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(180deg, #7a5422, #5a3a14); color: #fff; font: 14px 'Lilita One', sans-serif; cursor: pointer; }
.apuesta-chip.on { background: linear-gradient(180deg, #fff2a0, #ffd23f 45%, #e8a020); color: #3a2400; box-shadow: 0 0 10px rgba(255, 210, 63, .6); }
.apuesta-chip:disabled { opacity: .35; cursor: default; }
.apuesta-ayuda { display: block; color: #ffe9c8; font-size: 11.5px; line-height: 1.3; }
.rival-sin-apuesta { position: absolute; right: 10px; bottom: 6px; font-size: 10.5px; color: var(--txt2); }
.res-apuesta { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px auto 0; padding: 5px 12px; border-radius: 12px; border: 2px solid var(--ink); width: fit-content; animation: premio-pop .45s cubic-bezier(.3, 1.7, .5, 1) .6s both; }
.res-apuesta.gano { background: linear-gradient(180deg, #ffe98a, #e8a020); }
.res-apuesta.perdio { background: rgba(120, 30, 30, .7); }
.res-apuesta b { font: 15px 'Lilita One', sans-serif; color: #fff; }
.etq-apuesta { margin-left: 6px; padding: 0 5px; border-radius: 6px; font: 11px 'Lilita One', sans-serif; border: 1px solid var(--ink); }
.etq-apuesta.g { background: #ffd23f; color: #3a2400; } .etq-apuesta.p { background: #8a2a2a; color: #fff; }

/* Clasificatoria: cuándo termina la temporada (cada mes los trofeos vuelven a 0) */
.clasif-temporada { margin: 10px 2px 0; text-align: center; font-size: 14px; color: var(--txt2); }
.clasif-temporada b { color: #ffe9b0; font-family: 'Lilita One', sans-serif; font-weight: 400; letter-spacing: .02em; }
.clasif-temporada small { display: block; margin-top: 2px; font-size: 12px; }

/* ===== Cuenta: jugar ya (invitado), Google, guardar mi cuenta y el tutorial de las primeras peleas ===== */
.inicio-rapido { text-align: center; }
.inicio-rapido .jugar-ya { font-size: 24px; letter-spacing: .02em; }
.inicio-rapido > .sub { margin: 8px 0 0; font-size: 13px; }
.separador-o { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0; color: var(--dim); font: 13px 'Lilita One', sans-serif; letter-spacing: .03em; }
.separador-o::before, .separador-o::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: rgba(169, 192, 236, .35); }
.inicio-sep { margin: 2px 0 -2px; }
.google-caja { display: flex; justify-content: center; min-height: 44px; }
.con-google .google-caja { margin: 0 0 4px; }
.cuenta-invitado { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2f8a3a, #1d5a2a); text-align: center; }
.cuenta-invitado b { font: 15px 'Lilita One', sans-serif; color: #ffe27a; }
.cuenta-invitado small { color: #e9ffe6; font-size: 12px; line-height: 1.35; }
.aviso-guardar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 8px 8px 10px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2f8a3a, #1d5a2a); box-shadow: 0 4px 0 rgba(4, 10, 36, .45); animation: entra .3s ease; }
.aviso-guardar-ico { font-size: 24px; flex: none; }
.aviso-guardar > div { flex: 1; min-width: 0; }
.aviso-guardar b { display: block; font: 14px 'Lilita One', sans-serif; color: #ffe27a; overflow-wrap: anywhere; }
.aviso-guardar small { display: block; color: #e9ffe6; font-size: 12px; line-height: 1.3; }
.aviso-guardar .btn { flex: none; }
.aviso-guardar-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; font-size: 14px; cursor: pointer; }
/* tutorial: el hueco ilumina lo que hay que tocar; las tapas (transparentes) no dejan tocar el resto */
.tuto-capa { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.tuto-hueco { position: fixed; border-radius: 14px; border: 3px solid #ffe27a; box-shadow: 0 0 0 200vmax rgba(4, 10, 30, .62), 0 0 18px 4px rgba(255, 226, 122, .7); transition: all .18s ease; animation: tuto-late 1.4s ease-in-out infinite; }
.tuto-capa.clara .tuto-hueco { box-shadow: 0 0 18px 4px rgba(255, 226, 122, .8); }
.tuto-tapa { position: fixed; pointer-events: auto; }
.tuto-globo { position: fixed; pointer-events: auto; margin: 0; padding: 10px 12px; text-align: left; animation: entra .25s ease; }
.tuto-globo p { margin: 4px 0 8px; font-size: 14px; line-height: 1.35; color: var(--txt); }
.tuto-titulo { display: block; font: 17px 'Lilita One', sans-serif; color: #ffe27a; }
.tuto-flecha { position: absolute; width: 0; height: 0; margin-left: -10px; border: 10px solid transparent; }
.tuto-globo[data-lado=abajo] .tuto-flecha { top: -20px; border-bottom-color: #ffe27a; }
.tuto-globo[data-lado=arriba] .tuto-flecha { bottom: -20px; border-top-color: #ffe27a; }
.tuto-globo[data-lado=sobre] .tuto-flecha { display: none; }
.tuto-botones { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tuto-saltar { border: 0; background: none; padding: 6px 2px; color: var(--dim); font: 13px 'Lilita One', sans-serif; text-decoration: underline; cursor: pointer; }
.tuto-tipos { margin: 0 0 8px; padding: 0 0 0 4px; list-style: none; font-size: 12.5px; line-height: 1.35; color: var(--txt2); }
.tuto-tipos li { margin: 2px 0; }
.tuto-tipos b { font: 13px 'Lilita One', sans-serif; color: #ffe27a; font-weight: 400; }
@keyframes tuto-late { 50% { border-color: #fff6c8; } }
@media (prefers-reduced-motion: reduce) { .tuto-hueco, .tuto-globo, .aviso-guardar { animation: none !important; transition: none !important; } }

/* ===== avisos (Web Push): qué avisos quiere ===== */
.avisos-web-prefs { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; }
.avisos-web-prefs .recordar { margin: 0; padding: 8px 4px; font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.avisos-web-prefs .recordar:last-child { border-bottom: 0; }
.avisos-web-prefs .recordar input { width: 22px; height: 22px; flex: none; }

/* ===== 2 contra 2 por relevos (p-dobles.js) y Copa de Clanes (copa-clanes.js) ===== */
.tarjeta-dobles { background: linear-gradient(180deg, #2fae8e, #1c7a63); }
.tarjeta.ancho { width: 100%; margin: 0 0 12px; text-align: left; color: #fff; cursor: pointer; }
.etq-dobles { background: #1c7a63; }
.dobles-reglas ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--txt2); }
.dobles-reglas li { margin: 3px 0; }
.dobles-vidas { display: flex; justify-content: center; margin-top: 8px; }
.dobles-quedan { display: block; font-size: 12px; color: var(--verde); }
.dobles-quedan.agotado { color: var(--dim); }
.dobles-marcador { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 12px;
  background: rgba(8, 18, 50, .78); border: 2px solid var(--ink); }
.dobles-marcador > b { font: 17px 'Lilita One', sans-serif; color: #ffe27a; min-width: 38px; text-align: center; }
.dm-lado { display: flex; gap: 3px; }
.mini-retrato.dm-cara { width: 30px; height: 27px; transition: filter .3s, opacity .3s; }
.mini-retrato.dm-cara.pelea { border-color: #ffe27a; box-shadow: 0 0 0 2px rgba(255, 226, 122, .35); }
.mini-retrato.dm-cara.caido { filter: grayscale(1) brightness(.6); opacity: .65; }
.anuncio.anuncio-relevo h2 { font-size: clamp(28px, 9vw, 46px); }
.dobles-equipos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 8px 0 4px; }
.dobles-equipos > b { font-size: 18px; color: #ffe27a; }
.de-lado { display: flex; justify-content: center; gap: 6px; min-width: 0; }
.de-peon { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: 72px; }
.de-peon small { font-size: 11px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt2); }
.de-peon.caido .mini-retrato { filter: grayscale(1) brightness(.65); }
.de-peon.caido small { color: var(--dim); text-decoration: line-through; }
.dobles-amigo { color: #c8ff9a; margin: 6px 0 0; }
.copa-cab { display: flex; gap: 10px; align-items: center; }
.copa-copa { font-size: 34px; line-height: 1; }
.copa-cab h3 { margin: 0; font: 20px 'Lilita One', sans-serif; color: #ffe27a; }
.copa-cab small { display: block; text-transform: capitalize; }
.copa-reloj { font-size: 12px; }
.copa-mio { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border-radius: 12px;
  background: rgba(255, 210, 63, .18); border: 2px solid #7a4a00; }
.copa-mio b { display: block; }
.copa-mio small { display: block; font-size: 12px; }
.copa-puesto { font: 26px 'Lilita One', sans-serif; text-align: center; }
.fila-rank.copa-fuera { opacity: .6; }
.copa-premios { display: flex; flex-direction: column; gap: 6px; }
.copa-tramo { padding: 6px 8px; border-radius: 10px; background: var(--caja); border: 2px solid var(--borde-caja); }
.copa-tramo > b { display: block; margin-bottom: 4px; font: 14px 'Lilita One', sans-serif; font-weight: 400; }
.copa-anterior h3 { margin: 14px 0 6px; }
.copa-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.copa-escalon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: var(--caja);
  border: 2px solid var(--borde-caja); cursor: pointer; min-width: 0; }
.copa-escalon b { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copa-escalon small { font-size: 11px; color: var(--txt2); }
.copa-escalon .medalla { font-size: 22px; line-height: 1; }
.copa-escalon.e1 { order: 2; padding-top: 16px; background: rgba(255, 210, 63, .22); border-color: #7a4a00; }
.copa-escalon.e2 { order: 1; }
.copa-escalon.e3 { order: 3; }
.copa-insignia { font-size: 12px; text-transform: none; }
.copa-insignia.i-campeon { background: #8a6a00; } .copa-insignia.i-segundo { background: #5d6a7c; } .copa-insignia.i-tercero { background: #7a4a26; }
.copa-mi-premio { margin-top: 10px; padding: 8px; border-radius: 12px; background: rgba(111, 216, 69, .18); border: 2px solid #2c6a17; text-align: center; }
.copa-mi-premio .lista-chips { justify-content: center; margin-top: 6px; }
@media (max-width: 380px) { .pest-clan button { font-size: 11.5px; } .mini-retrato.dm-cara { width: 26px; height: 24px; } }

/* ===== Compartir peleas, reacciones en la pelea y modo liviano (social2) ===== */
/* la fila de reacciones del que atacó: abajo a la izquierda (a la derecha está el x1/x2/x3) */
.reacciones { position: absolute; left: 8px; bottom: calc(10px + var(--sa-bot)); z-index: 3; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 14px;
  border: 2px solid var(--ink); background: rgba(8, 14, 48, .72); box-shadow: 0 3px 0 rgba(4, 10, 36, .45); max-width: calc(100% - 84px); }
.reac-btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 21px; line-height: 36px; cursor: pointer;
  transition: transform .08s; -webkit-tap-highlight-color: transparent; }
.reac-btn:active { transform: scale(.85); }
.reac-btn:disabled { opacity: .3; cursor: default; }
.reac-cuenta { position: absolute; top: -10px; right: -6px; padding: 0 6px; border-radius: 8px; border: 2px solid var(--ink); background: #ffd23f; color: #3a2400; font: 11px 'Lilita One', sans-serif; --ol: 0px; }
.reacciones.llena .reac-cuenta { background: #8fe86a; }
@media (max-width: 380px) { .reac-btn { width: 32px; height: 32px; font-size: 18px; line-height: 32px; } .reacciones { gap: 2px; padding: 3px 4px; } }
/* la reacción que sube flotando arriba del peón (con el nombre de quien la hizo, al mirar la repetición) */
.reaccion-flota { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); pointer-events: none; animation: reac-sube 1.8s ease-out forwards; }
.reaccion-emoji { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(4, 10, 36, .6)); }
.reaccion-flota small { margin-top: 2px; font: 12px 'Lilita One', sans-serif; color: #ffe27a; white-space: nowrap; --ol: 2px; }
.reaccion-flota.liviano { animation-duration: 1.4s; }
@keyframes reac-sube { 0% { transform: translate(-50%, -60%) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -100%) scale(1.25); opacity: 1; } 24% { transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -190%); opacity: 0; } }
/* historial: compartir y «Fulano te hizo 😂 en el segundo 12» */
.compartir-mini { margin-left: 4px; min-width: 34px; padding-left: 6px; padding-right: 6px; }
.fila-con-reac { display: flex; flex-direction: column; gap: 3px; }
.reac-recibidas { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 2px 46px; }
.reac-recibidas span { padding: 1px 8px; border-radius: 9px; background: rgba(255, 210, 63, .14); border: 1px solid rgba(255, 210, 63, .35); color: #ffe9b0; font-size: 12px; }
.btn.cargando { opacity: .6; pointer-events: none; }
/* la pelea compartida que ya no está */
.ver-nada { margin: 30px 10px; text-align: center; }
.ver-nada-ico { font-size: 54px; line-height: 1; margin-bottom: 6px; }
.ver-nada .titulo { justify-content: center; }
.ver-final .acciones { flex-wrap: wrap; }
/* modo liviano (liviano.js): sin rayos que giran, sin desenfoque detrás de las ventanas, sin sacudones de las placas */
body.liviano .res-rayos, body.liviano .rv-rayos { display: none !important; }
body.liviano #modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.liviano .placa.sacude, body.liviano .barra-v.late, body.liviano .res-heroe.gano canvas { animation: none !important; }

/* ===== La Torre (p-torre.js) y ofertas del día de la tienda (tienda-dia.js) ===== */
.tarjeta-torre { position: relative; background: linear-gradient(180deg, #6a6a8a, #34345a); }
.torre-record { display: flex; flex-direction: column; align-items: center; padding: 4px 10px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #8a7fa0, #4a3f66); }
.torre-record small { font: 11px 'Lilita One', sans-serif; letter-spacing: .06em; }
.torre-record b { font: 24px/1 'Lilita One', sans-serif; color: var(--oro); }
.torre-casa { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.torre-columna { position: relative; flex: 0 0 auto; width: 276px; max-width: 100%; margin: 0 auto; max-height: 400px; overflow-y: auto; overflow-x: hidden;
  border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #1c2a5e 0%, #3b5aa0 70%, #6d8fd0 100%); padding: 8px 0 0; scrollbar-width: thin; }
.torre-techo, .torre-base { display: flex; justify-content: center; padding-left: 26px; padding-right: 44px; }
.torre-techo canvas, .torre-base canvas, .torre-muro canvas { display: block; }
.torre-base { padding-left: 2px; padding-right: 20px; }
.torre-fila { display: flex; align-items: center; height: 54px; }
.torre-num { width: 26px; flex: none; text-align: right; padding-right: 3px; font: 13px 'Lilita One', sans-serif; color: var(--dim); }
.torre-fila.hecho .torre-num { color: var(--verde); }
.torre-fila.actual .torre-num { color: var(--oro); font-size: 16px; }
.torre-fila.guardian .torre-num { color: #ff8a7a; }
.torre-muro { position: relative; flex: none; }
.torre-yo { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); pointer-events: none; }
.torre-yo canvas { display: block; }
.torre-lado { width: 44px; flex: none; display: flex; justify-content: center; }
.torre-guardian { position: relative; width: 38px; height: 34px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(0, 0, 0, .3); overflow: hidden; display: grid; place-items: center; }
.torre-guardian canvas { width: 36px; height: auto; }
.torre-guardian:not(.vencido) canvas { filter: grayscale(.7) brightness(.7); }
.torre-guardian i { position: absolute; right: 0; bottom: -2px; font-style: normal; font-size: 13px; }
.torre-guardian.vencido i { color: var(--verde); font-size: 15px; }
.torre-hito { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(255, 210, 63, .25); display: grid; place-items: center; overflow: hidden; }
.torre-hito canvas { max-width: 32px; height: auto; }
.torre-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.torre-rival { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.torre-rival.es-guardian { background: linear-gradient(180deg, #7a2b3a, #3a1430); }
.torre-rival h2 { margin: 0; font-size: 20px; }
.torre-rival-tit { padding: 2px 12px; border-radius: 999px; border: 2px solid var(--ink); background: #5a6a9a; font: 13px 'Lilita One', sans-serif; letter-spacing: .06em; }
.torre-rival.es-guardian .torre-rival-tit { background: #c0392b; }
.torre-rival-fig canvas { display: block; }
.torre-rival-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font: 14px 'Lilita One', sans-serif; }
.torre-rival-datos span { display: inline-flex; align-items: center; gap: 3px; }
.torre-premios-piso { justify-content: center; margin: 2px 0 4px; }
.torre-intentos { display: flex; gap: 5px; justify-content: center; margin-top: 6px; }
.torre-intentos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(0, 0, 0, .35); }
.torre-intentos i.lleno { background: radial-gradient(circle at 35% 35%, #fff2a0, var(--oro)); }
.torre-nota { margin: 4px 0 0; font-size: 12.5px; }
.torre-cima { background: linear-gradient(180deg, #8a6a1a, #4a3410); }
.torre-proximos { display: flex; flex-direction: column; gap: 6px; }
.torre-proximo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 2px solid var(--borde-caja); }
.torre-proximo > b { font: 14px 'Lilita One', sans-serif; min-width: 62px; color: var(--oro); }
.torre-proximo.guardian > b { color: #ff8a7a; }
.torre-proximo .premios-lista { flex: 1; }
.torre-guardianes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.torre-g { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.torre-g .mini-retrato { width: 100%; max-width: 48px; height: 42px; }
.torre-g:not(.vencido) .mini-retrato canvas { filter: grayscale(.8) brightness(.65); }
.torre-g.vencido .mini-retrato { border-color: #2c6a17; background: rgba(111, 216, 69, .25); }
.torre-g small { font: 12px 'Lilita One', sans-serif; }
.torre-g i { position: absolute; top: 0; right: 2px; font-style: normal; font-size: 12px; }
.torre-res-piso { background: #5a6a9a; }
.torre-res-premios { justify-content: center; margin: 6px 0 2px; }
.ofertas-dia { position: relative; }
.ofertas-dia > h2 { flex-wrap: wrap; }
.ofertas-reloj { margin-left: auto; font: 13px 'Lilita One', sans-serif; color: var(--txt2); white-space: nowrap; }
.ofertas-reloj .reloj-vivo { color: var(--oro); }
.oferta-dia .oferta-pct { position: absolute; top: 24px; left: 2px; z-index: 1; padding: 1px 6px; border-radius: 8px; border: 2px solid var(--ink); background: #e8463a; color: #fff;
  font: 13px 'Lilita One', sans-serif; transform: rotate(-8deg); }
.oferta-dia .oferta-antes { font-size: 12px; color: var(--dim); }
.oferta-dia .oferta-hecha { display: block; width: 100%; text-align: center; padding: 6px 0; border-radius: 10px; background: rgba(111, 216, 69, .25); border: 2px solid #2c6a17; font: 13px 'Lilita One', sans-serif; }
.oferta-dia.comprada > canvas.px { opacity: .75; }
@media (max-width: 380px) { .torre-columna { max-height: 340px; } .torre-guardianes { gap: 4px; } }

/* ===== temporada: marcos de perfil, banderas y premios de fin de temporada (temporada.js) ===== */
/* La bandera (emoji; en Windows con la letra de banderas que carga paises.js). Sin el contorno de los textos. */
.bandera { display: inline-block; margin-right: .28em; font-family: 'Banderas Peonada', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: .95em; font-weight: 400; line-height: 1; letter-spacing: 0; vertical-align: -.06em; -webkit-text-stroke: 0; text-shadow: none; }
/* El marco: el retrato queda adentro; el borde biselado (luz arriba-izquierda, sombra abajo-derecha) son sombras
   (no cambian el tamaño del retrato) y los adornos, pedacitos recortados con su contorno de tinta. --k: el grosor. */
.marco { --k: 1px; position: relative; display: inline-grid; flex: none; align-self: center; isolation: isolate; }
.marco.grande { --k: 2px; }
.marco > :first-child { border-color: var(--m3) !important;
  box-shadow: 0 0 0 calc(var(--k) * 2) var(--m2), calc(var(--k) * -1) calc(var(--k) * -1) 0 calc(var(--k) * 2) var(--m1), var(--k) var(--k) 0 calc(var(--k) * 2) var(--m3), 0 0 0 calc(var(--k) * 4) var(--ink); }
.marco.brillo > :first-child { animation: marco-brillo 2.6s ease-in-out infinite; }
@keyframes marco-brillo { 50% { box-shadow: 0 0 0 calc(var(--k) * 2) var(--m2), calc(var(--k) * -1) calc(var(--k) * -1) 0 calc(var(--k) * 2) var(--m1), var(--k) var(--k) 0 calc(var(--k) * 2) var(--m3), 0 0 0 calc(var(--k) * 4) var(--ink), 0 0 calc(var(--k) * 9) calc(var(--k) * 4) color-mix(in srgb, var(--m2) 70%, transparent); } }
.marco > i { position: absolute; display: none; pointer-events: none; z-index: 2;
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }
.marco > i::before, .marco > i::after { content: ''; position: absolute; inset: 0; }
.marco > .mc { --s: calc(var(--k) * 7); width: var(--s); height: var(--s); }
.marco > .mc.a, .marco > .mc.c { left: calc(var(--k) * -1 - var(--s) / 2); }
.marco > .mc.b, .marco > .mc.d { right: calc(var(--k) * -1 - var(--s) / 2); }
.marco > .mc.a, .marco > .mc.b { top: calc(var(--k) * -1 - var(--s) / 2); }
.marco > .mc.c, .marco > .mc.d { bottom: calc(var(--k) * -1 - var(--s) / 2); }
.marco > .mt { --s: calc(var(--k) * 12); width: var(--s); height: calc(var(--s) * .7); left: 50%; top: calc(var(--s) * -.62); transform: translateX(-50%); }
/* clavos y remaches */
.ad-clavos > .mc, .ad-remaches > .mc, .ad-corona > .mc { display: block; }
.ad-clavos > .mc { --s: calc(var(--k) * 4); }
.ad-clavos > .mc::before { border-radius: 1px; background: radial-gradient(circle at 35% 35%, var(--m1) 0 22%, var(--m3) 32%); }
.ad-remaches > .mc, .ad-corona > .mc { --s: calc(var(--k) * 6); }
.ad-remaches > .mc::before, .ad-corona > .mc::before { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 14%, var(--m1) 22%, var(--m2) 55%, var(--m3) 85%); }
/* gemas (rubíes) y diamantes */
.ad-gemas > .mc, .ad-diamantes > .mc, .ad-diamantes > .mt, .ad-alas > .mt { display: block; }
.ad-gemas > .mc::before, .ad-diamantes > i::before, .ad-alas > .mt::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(135deg, #ffd6de, #e83a5a 55%, #7e0d2a); }
.ad-diamantes > i::before { background: linear-gradient(135deg, #fff, #bfeaff 45%, #3a8fd8); }
.ad-diamantes > .mt, .ad-alas > .mt { --s: calc(var(--k) * 10); height: var(--s); top: calc(var(--s) * -.7); }
.ad-alas > .mt::before { background: linear-gradient(135deg, #fff, var(--m1) 40%, var(--m3)); }
/* estrellas */
.ad-estrellas > .mc, .ad-laureles > .mt { display: block; }
.ad-estrellas > .mc { --s: calc(var(--k) * 9); }
.ad-estrellas > i::before, .ad-laureles > .mt::before { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(180deg, #fff, var(--m1) 45%, var(--m2)); }
.ad-laureles > .mt { --s: calc(var(--k) * 10); height: var(--s); top: calc(var(--s) * -.72); }
/* copos */
.ad-copos > .mc { display: block; --s: calc(var(--k) * 9); }
.ad-copos > .mc::before, .ad-copos > .mc::after { background: #fff; clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%); }
.ad-copos > .mc::after { transform: rotate(45deg) scale(.78); background: #d8f2ff; }
/* hojas */
.ad-hojas > .mc { display: block; --s: calc(var(--k) * 8); }
.ad-hojas > .mc::before { clip-path: ellipse(50% 28% at 50% 50%); transform: rotate(-45deg); background: linear-gradient(180deg, #8ee06a, #2f8a2a); }
.ad-hojas > .mc.b::before, .ad-hojas > .mc.c::before { transform: rotate(45deg); }
/* llamas */
.ad-llamas > .mc, .ad-llamas > .mt { display: block; }
.ad-llamas > .mc { --s: calc(var(--k) * 8); }
.ad-llamas > .mt { height: var(--s); top: calc(var(--s) * -.78); }
.ad-llamas > i::before { clip-path: polygon(50% 0, 66% 30%, 80% 14%, 92% 56%, 76% 100%, 24% 100%, 8% 56%, 22% 22%, 36% 42%); background: linear-gradient(0deg, #c0300c, #ff7a2a 45%, #ffe08a); }
.ad-llamas.brillo > i::before { animation: marco-llama .5s steps(2) infinite alternate; transform-origin: 50% 100%; }
@keyframes marco-llama { to { transform: scaleY(1.15) scaleX(.92); } }
/* corona (arriba al centro) */
.ad-corona > .mt { display: block; --s: calc(var(--k) * 16); }
.ad-corona > .mt::before { clip-path: polygon(0 100%, 0 22%, 24% 58%, 50% 0, 76% 58%, 100% 22%, 100% 100%); background: linear-gradient(180deg, #fff6c0, var(--m1) 30%, var(--m2) 70%, var(--m3)); }
.ad-corona > .mt::after { inset: auto 42% 18% 42%; height: 26%; border-radius: 50%; background: #e83a5a; }
/* laureles y alas: a los costados */
.ad-laureles > .mc.a, .ad-laureles > .mc.b, .ad-alas > .mc.a, .ad-alas > .mc.b { display: block; height: auto; }
.ad-laureles > .mc.a, .ad-laureles > .mc.b { top: 22%; bottom: calc(var(--k) * -3); width: calc(var(--k) * 6); }
.ad-laureles > .mc.a { left: calc(var(--k) * -8); }
.ad-laureles > .mc.b { right: calc(var(--k) * -8); }
.ad-laureles > .mc::before { clip-path: polygon(50% 0, 100% 12%, 50% 24%, 100% 36%, 50% 48%, 100% 60%, 50% 72%, 100% 84%, 50% 100%, 0 88%, 50% 76%, 0 64%, 50% 52%, 0 40%, 50% 28%, 0 16%);
  background: linear-gradient(180deg, var(--m1), var(--m2) 60%, var(--m3)); }
.ad-alas > .mc.a, .ad-alas > .mc.b { top: calc(var(--k) * -2); bottom: 35%; width: calc(var(--k) * 11); }
.ad-alas > .mc.a { left: calc(var(--k) * -13); }
.ad-alas > .mc.b { right: calc(var(--k) * -13); transform: scaleX(-1); }
.ad-alas > .mc::before { clip-path: polygon(100% 12%, 62% 0, 0 4%, 30% 22%, 0 32%, 32% 48%, 4% 62%, 40% 74%, 100% 92%); background: linear-gradient(90deg, #fff, var(--m1) 45%, var(--m2)); }
/* dónde va el marco */
.placa.der > .marco { order: 2; }
.fila-rank > .marco { justify-self: center; }
@media (prefers-reduced-motion: reduce) { .marco.brillo > :first-child, .ad-llamas.brillo > i::before { animation: none; } }

/* Ranking: MUNDO / MI PAÍS */
.ranking-donde { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
.ranking-donde .btn { display: inline-flex; align-items: center; gap: 4px; }

/* El cartel de la temporada terminada */
.cartel-temporada { --liga: #ffd23f; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cartel-temporada .ct-escudo { animation: ct-entra .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ct-entra { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.cartel-temporada .ct-mes { font: 22px/1.1 'Lilita One', sans-serif; color: var(--oro); }
.cartel-temporada .ct-mes::first-letter { text-transform: uppercase; }
.cartel-temporada .ct-liga { margin: 0; font: 17px 'Lilita One', sans-serif; color: color-mix(in srgb, var(--liga) 55%, #fff); }
.cartel-temporada .sub { margin: 0; }

/* La Clasificatoria: premios de fin de temporada e historial */
.tp-ligas, .tp-top, .tp-historial { display: flex; flex-direction: column; gap: 5px; }
.tp-top { margin-top: 10px; }
.tp-top > b { font: 14px 'Lilita One', sans-serif; font-weight: 400; color: #ffe27a; }
.tp-liga { --liga: #888; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "e n" "e p"; column-gap: 8px; row-gap: 3px; align-items: center;
  padding: 5px 8px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--liga) 28%, #1d3c86), #1b3a80); }
.tp-liga > .escudo-liga { grid-area: e; width: 32px; height: 32px; border-width: 2px; }
.tp-liga > b { grid-area: n; font: 14px 'Lilita One', sans-serif; font-weight: 400; }
.tp-liga.actual { box-shadow: 0 0 0 3px var(--liga); }
.tp-liga.top { --liga: #ffd23f; grid-template-areas: "e p"; }
.tp-pos { grid-area: e; min-width: 34px; text-align: center; font: 14px 'Lilita One', sans-serif; color: #ffe27a; }
.tp-premios { grid-area: p; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tp-premios .premio-chip { font-size: 11px; }
.premio-chip canvas.px-marco { height: 22px !important; width: auto !important; }
.tp-sub { margin: 14px 0 6px; font-size: 16px; }
.tp-fila { --liga: #888; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; border: 2px solid var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--liga) 25%, #1d3c86), #1b3a80); }
.tp-fila > .escudo-liga { width: 30px; height: 30px; border-width: 2px; }
.tp-fila b { display: block; font: 14px 'Lilita One', sans-serif; font-weight: 400; }
.tp-fila b::first-letter { text-transform: uppercase; }
.tp-fila small { font-size: 11px; color: var(--txt2); }
.tp-trofeos { font: 15px 'Lilita One', sans-serif; color: #ffe27a; }
.temporadas > .btn.verde { margin-bottom: 8px; }

/* Elegir marco (TU PEÓN) y marcos de la tienda */
.marcos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 58vh; overflow: auto; padding: 4px 2px; }
.marco-op, .marco-venta { --rz: var(--rz-comun); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; text-align: center;
  border: 2px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--rz) 30%, #2f62bf), #1b3a80); }
.marco-op { padding: 6px 4px; cursor: pointer; }
.marco-op b { font: 12px/1.1 'Lilita One', sans-serif; font-weight: 400; color: color-mix(in srgb, var(--rz) 40%, #fff); }
.marco-op small { font-size: 10px; line-height: 1.15; color: var(--txt2); }
.marco-op.puesto, .marco-venta.puesto { box-shadow: 0 0 0 3px var(--verde); }
.marco-op.bloqueado { cursor: default; opacity: .62; }
.marco-op.bloqueado .marco-prev { filter: grayscale(.75); }
.marco-prev { display: grid; place-items: center; min-height: 56px; padding: 10px 14px 6px; }
.marcos-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.marco-venta { padding: 6px 6px 8px; border-width: 3px; border-radius: 14px; }
.marco-venta b { font: 14px/1.1 'Lilita One', sans-serif; font-weight: 400; }
.marco-venta small { font-size: 11px; line-height: 1.2; }

/* Elegir país (AJUSTES) */
.pais-buscar { width: 100%; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; color: #111; }
.paises-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 5px; max-height: 50vh; overflow: auto; }
.pais-op { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 10px; border: 2px solid var(--ink); background: rgba(10, 28, 78, .6); color: #fff; text-align: left; font-size: 13px; cursor: pointer; }
.pais-op span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pais-op .bandera { font-size: 18px; }
.pais-op.puesto { box-shadow: 0 0 0 3px var(--verde); }

/* ===== 2 contra 2: con el marcador de equipos arriba, el cartel del escenario baja para no tapar los nombres ===== */
.combate:has(.dobles-marcador) .lugar-combate { top: calc(170px + var(--sa-top)); }