:root {
  --bg: #0e1020; --bg2: #161a33; --card: #1d2243; --card2: #262c54;
  --txt: #eef1ff; --muted: #9aa3c7; --accent: #6c8cff; --accent2: #ff5db1;
  --good: #4ee08a; --bad: #ff5d6c; --warn: #ffd23d;
  --radius: 16px; --shadow: 0 8px 28px rgba(0,0,0,.35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #20255180, transparent), var(--bg);
  color: var(--txt); overflow-x: hidden;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 78px; position: relative; background: var(--bg); }

/* --- Tipograf?a / utilidades --- */
h1,h2,h3 { margin: 0 0 8px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spread { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* Panel salvaje (Atrapar) */
.wild-spawn-info { min-width: 0; }
.wild-spawn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.wild-spawn-name { font-weight: 800; line-height: 1.25; font-size: 17px; }
.wild-spawn-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 8px;
}
.wild-spawn-type { font-size: 12px; font-weight: 800; text-transform: capitalize; }
.wild-spawn-rarity { flex-shrink: 0; font-size: 12px; }
.wild-spawn-art { flex-shrink: 0; }
.wild-spawn-meta {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}
.wild-spawn-meta .cd { white-space: nowrap; }

/* --- Botones --- */
button { font-family: inherit; cursor: pointer; border: none; }
.btn {
  background: linear-gradient(135deg, var(--accent), #8a6bff); color: #fff;
  padding: 12px 16px; border-radius: 12px; font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 14px rgba(108,140,255,.4); transition: transform .08s, filter .15s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
.btn:disabled .klax-img, .btn:disabled .klax-svg, .btn:disabled svg, .btn:disabled img { opacity: 1; filter: drop-shadow(0 4px 8px #0005); }
.btn.alt { background: linear-gradient(135deg, var(--accent2), #ff8a5b); box-shadow: 0 4px 14px rgba(255,93,177,.4); }
.btn.ghost { background: var(--card2); color: var(--txt); box-shadow: none; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.good { background: linear-gradient(135deg, var(--good), #2bbd6e); }

/* --- Header --- */
header { padding: 14px 16px 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.wallet .lang-dropdown { flex-shrink: 0; position: relative; }

.lang-flags {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.lang-dropdown {
  position: relative;
  flex-shrink: 0;
  margin-right: 2px;
}
.lang-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px 2px 2px;
  border: 2px solid #ffffff30;
  border-radius: 6px;
  background: #0b0f22cc;
  cursor: pointer;
  line-height: 0;
  transition: border-color .15s, background .15s;
}
.lang-dropdown-btn:hover { border-color: #ffffff55; background: #141c38cc; }
.lang-dropdown-btn:focus-visible { outline: 2px solid #6c8cff88; outline-offset: 1px; }
.lang-dropdown.open .lang-dropdown-btn {
  border-color: #6c8cff;
  background: #1a2244cc;
}
.lang-dropdown-caret {
  font-size: 9px;
  color: #ffffff99;
  line-height: 1;
  margin-left: 1px;
}
.lang-dropdown.open { z-index: 2; }
.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  background: #0f1528f8;
  border: 1px solid #ffffff28;
  border-radius: 8px;
  box-shadow: 0 10px 28px #00000077;
}
.lang-dropdown-menu[hidden] { display: none !important; }

/* Durante combate: ocultar selector de idioma (no debe quedar por encima de la arena) */
body.battle-active #langSelectHeader,
body.battle-active header .lang-dropdown {
  visibility: hidden;
  pointer-events: none;
}
body.battle-active .lang-dropdown-menu {
  display: none !important;
}
.lang-dropdown-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transition: border-color .12s, background .12s;
}
.lang-dropdown-opt:hover { border-color: #ffffff33; background: #ffffff0a; }
.lang-dropdown-opt.active {
  border-color: #6c8cff;
  background: #1a2244aa;
}
.lang-dropdown .lang-flag-svg { width: 26px; height: 17px; }
.lang-flag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #0b0f2288;
  cursor: pointer;
  line-height: 0;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.lang-flag-btn:hover { border-color: #ffffff44; transform: translateY(-1px); }
.lang-flag-btn:focus-visible { outline: 2px solid #6c8cff88; outline-offset: 1px; }
.lang-flag-btn.active {
  border-color: #6c8cff;
  box-shadow: 0 0 0 1px #6c8cff66;
  background: #1a2244cc;
}
.lang-flag-svg {
  display: block;
  width: 30px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 1px 3px #00000055;
}
.login-panel-inner .lang-flags {
  justify-content: center;
  margin-bottom: 0;
  gap: 6px;
}
.login-panel-inner .lang-flag-svg { width: 36px; height: 24px; }
.login-panel-inner .lang-flag-btn { padding: 3px; border-radius: 8px; }
.logo { font-weight: 900; font-size: 20px; letter-spacing: .5px; flex: 1; min-width: 0;
  background: linear-gradient(90deg, #ffd23d, #ff5db1, #6c8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wallet { display: flex; gap: 10px; align-items: center; font-weight: 800; flex-shrink: 0; }
.wallet .pts { background: var(--card); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }
.trainer-count-pill {
  font-size: 11px; font-weight: 900; color: #eef2ff; letter-spacing: 0.04em; text-transform: uppercase;
  max-width: min(58vw, 248px); overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(135deg, #6c8cff40, #ff5db122);
  border: 1px solid #8aa4ff88;
  box-shadow: 0 0 14px #6c8cff44, inset 0 1px 0 #ffffff18, var(--shadow);
  padding: 7px 14px;
}
.header-logout { padding: 6px 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.header-logout-ic { line-height: 1; }
.header-wallet-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #app { padding-bottom: 0; }
  #main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  header {
    flex-wrap: wrap;
    padding: 8px max(10px, env(safe-area-inset-right)) 6px 10px;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
  }
  .logo {
    flex: 1 0 100%;
    max-width: none;
    width: 100%;
    font-size: 17px;
    letter-spacing: 0.3px;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
  }
  .wallet .lang-dropdown {
    flex: 0 0 auto;
    margin-left: 0;
  }
  .header-wallet-right {
    margin-left: auto;
    gap: 4px;
    flex-shrink: 0;
  }
  .wallet {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: visible;
  }
  .trainer-count-pill {
    font-size: 9px;
    padding: 4px 6px;
    max-width: none;
    flex: 0 1 auto;
    min-width: 0;
    letter-spacing: 0;
    text-transform: none;
  }
  .wallet .pts {
    padding: 4px 7px;
    font-size: 11px;
    line-height: 1.2;
    flex-shrink: 0;
  }
  .header-logout {
    padding: 4px 6px;
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 0;
  }
  .header-logout-txt { display: none; }
  .header-logout-ic { font-size: 15px; }
}

/* --- Cards --- */
.card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin: 12px 16px; }

/* Tarjeta de entrenador (Inicio) ? ancho completo como banners de eventos */
.card.player-card {
  margin: 0 0 12px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 16px;
  border: 5px solid color-mix(in srgb, var(--tier, #6c8cff) 72%, transparent);
  box-shadow: var(--shadow);
}

/* Inicio ? aviso de eventos temporales (torneo, raid, subasta, flash?) */
.home-temporal-events-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 22px 0 14px;
  padding: 0 12px;
  text-align: center;
  box-sizing: border-box;
}
.home-temporal-events-heading__icon {
  flex-shrink: 0;
  font-size: clamp(18px, 4.5vw, 22px);
  line-height: 1;
  filter: drop-shadow(0 0 10px #ffd23d99);
  animation: homeTemporalIconPulse 2s ease-in-out infinite;
}
.home-temporal-events-heading__text {
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd23d;
  text-shadow: 0 1px 10px #000a, 0 0 18px #ffd23d44;
}
@keyframes homeTemporalIconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.92; }
}
.home-temporal-events-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 22px 0 20px;
  padding: 0 16px;
  box-sizing: border-box;
}
.home-temporal-events-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.home-temporal-events-grid > .home-promo--compact {
  margin-bottom: 0 !important;
}
.home-temporal-events-divider span {
  display: block;
  width: min(320px, 78%);
  height: 3px;
  border-radius: 999px;
  background: #ffd23d;
}
.player-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.player-card__identity { min-width: 0; flex: 1; }
.player-card__name {
  font-weight: 900;
  font-size: clamp(17px, 4.5vw, 20px);
  line-height: 1.2;
  word-break: break-word;
}
.player-card__rename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line, rgba(255,255,255,.18));
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.player-card__rename:hover { background: rgba(255,255,255,.14); }
.player-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.35;
}
.player-card__tier { font-weight: 700; color: var(--tier, var(--txt)); }
.player-card__dot { opacity: .45; user-select: none; }
.player-card__side {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}
.player-card__elo {
  text-align: center;
  min-width: 58px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--card2);
  border: 1px solid color-mix(in srgb, var(--tier, #6c8cff) 40%, transparent);
  box-shadow: inset 0 0 0 1px #ffffff08;
}
.player-card__elo-val {
  display: block;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tier, var(--txt));
}
.player-card__elo-lbl {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
  opacity: .75;
}
/* Acceso r?pido al ranking (formato chip, no hub-btn) */
.player-card__rank-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tier, #ffd23d) 50%, #ffffff22);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tier, #ffd23d) 28%, transparent), var(--card2) 70%);
  color: var(--txt);
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #ffffff0a, 0 2px 10px #0004;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.player-card__rank-btn:hover {
  border-color: color-mix(in srgb, var(--tier, #ffd23d) 70%, #fff);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tier, #ffd23d) 40%, transparent), var(--card2) 65%);
}
.player-card__rank-btn:active { transform: scale(.96); }
.player-card__rank-ico {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 4px #0006);
}
.player-card__rank-txt {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .9;
  line-height: 1.1;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .player-card__side { gap: 4px; }
  .player-card__elo { min-width: 52px; padding: 7px 9px; }
  .player-card__elo-val { font-size: 1.2rem; }
  .player-card__rank-btn { min-width: 44px; padding: 5px 6px; }
  .player-card__rank-ico { font-size: 14px; }
  .player-card__rank-txt { font-size: 7px; max-width: 48px; }
}
.player-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.player-card__grid--solo {
  grid-template-columns: 1fr;
}
.player-card__grid--solo .player-stat {
  text-align: center;
  align-items: center;
}
.player-stat {
  background: var(--card2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.player-stat__lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}
.player-stat__val {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.player-stat__val--energy {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.player-stat__sub { font-size: 12px; font-weight: 700; }
.player-card__eta {
  font-size: 11px;
  text-align: center;
  margin: -2px 0 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #6c8cff14;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.player-card__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: 0.06em;
}
.player-card__passes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.player-card__passes--solo {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.player-card__passes--solo .player-pass {
  min-width: min(100%, 220px);
}
.player-pass {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 6px;
  border-radius: 999px;
  background: var(--card2);
  color: var(--muted);
  border: 1px solid #ffffff0c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-pass--on {
  background: linear-gradient(135deg, #ffd23d, #ff8a5b);
  color: #012;
  border-color: transparent;
}
.player-pass--adv.player-pass--on {
  background: linear-gradient(135deg, #6c8cff, #9b7dff);
  color: #fff;
}
@media (max-width: 360px) {
  .player-card__passes { grid-template-columns: 1fr; }
  .player-pass { white-space: normal; }
}
.ref-card { border: 1px solid #6c8cff33; background: linear-gradient(135deg, #6c8cff14, var(--card)); }
.ref-code-block {
  padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid #ffffff14;
}
.ref-code-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ref-code-value { font-size: 22px; font-weight: 900; letter-spacing: .08em; color: #ffd23d; }
.ref-code-hint { font-size: 11px; margin: 8px 0 0; line-height: 1.4; }
.ref-code-example { font-family: ui-monospace, monospace; font-size: 10px; word-break: break-all; }
.ref-link-row { margin-top: 10px; }
.ref-link-row input {
  width: 100%; box-sizing: border-box; background: var(--card2); border: 1px solid #ffffff14;
  border-radius: 10px; padding: 9px 10px; color: var(--txt); font-size: 12px;
}
.ref-count-line { line-height: 1.45; }
.ref-count-num { font-weight: 800; }
.ref-count-pending { color: #f0c14b; }
.ref-count-valid { color: var(--good); }
.ref-list { display: flex; flex-direction: column; gap: 8px; }
.ref-list-inner { display: flex; flex-direction: column; gap: 8px; }
.ref-list-row {
  padding: 8px 10px; border-radius: 10px; background: #ffffff08;
  border: 1px solid #ffffff12;
}
.ref-list-row--pending { border-color: #f0c14b33; background: #f0c14b10; }
.ref-list-row--valid { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.ref-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ref-row-name { font-weight: 800; font-size: 13px; }
.ref-list-row--valid .ref-row-name { color: var(--good); }
.ref-list-row--pending .ref-row-name { color: #f0c14b; }
.ref-row-date { font-size: 11px; margin-left: auto; }
.ref-row-badge { margin-left: 0; }
.ref-row-badge--valid { background: var(--good); color: #012; }
.ref-row-badge--pending { background: #f0c14b; color: #2a2100; }
.ref-row-progress {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.ref-row-bar {
  flex: 1; height: 7px; border-radius: 999px; background: #0006; overflow: hidden; min-width: 0;
}
.ref-row-bar > i { display: block; height: 100%; border-radius: 999px; width: 0; }
.ref-list-row--pending .ref-row-bar > i { background: #f0c14b; }
.ref-list-row--valid .ref-row-bar > i { background: var(--good); }
.ref-row-battles { font-size: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ref-list-row--pending .ref-row-battles { color: #f0c14b; }
.ref-list-row--valid .ref-row-battles { color: var(--good); }
.login-ref-hint {
  font-size: 12px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
  background: #6c8cff18; border: 1px solid #6c8cff33; color: var(--txt);
}
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 18px 16px 4px; font-weight: 800; }

/* --- Monstruo tarjeta --- */
.mon-card { background: linear-gradient(160deg, var(--card2), var(--card)); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.mon-card .art { display: flex; justify-content: center; }
.mon-head { display: flex; justify-content: space-between; align-items: flex-start; }
.mon-name { font-weight: 800; font-size: 16px; }
.lvl { background: #0007; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.typechip { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #08101f; }
.statbar { height: 7px; background: #0006; border-radius: 999px; overflow: hidden; margin-top: 3px; position: relative; }
.statbar > i { display: block; height: 100%; border-radius: 999px; }
.statbar--split > .statbar-seg { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; }
.statbar--split > .statbar-seg--bonus { box-shadow: 0 0 6px #ffd23d88; z-index: 1; }
.stat-val-bonus { font-size: 10px; font-weight: 800; color: #ffd23d; }
.has-equip-bonus .statrow span:last-child { font-variant-numeric: tabular-nums; }
.equip-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #6c8cff14;
  border: 1px solid #6c8cff33;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.equip-block-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}
.mon-equip-chip {
  display: inline-flex; align-items: flex-start; gap: 4px;
  padding: 3px 8px 3px 4px; border-radius: 10px;
  background: #00000044; border: 1px solid #ffffff18;
  font-size: 10px; font-weight: 700; max-width: 100%;
  flex: 1 1 auto; min-width: min(100%, 140px);
  text-align: left;
}
.mon-equip-chip .item-icon,
.mon-equip-chip img,
.mon-equip-chip svg { flex-shrink: 0; margin-top: 1px; }
.mon-equip-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  line-height: 1.25;
  word-break: break-word;
}
.mon-equip-crit { font-size: 10px; margin-top: 2px; text-align: right; }
.mon-potion-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin-top: 5px;
  padding: 5px 7px;
  border-radius: 9px;
  background: linear-gradient(135deg, #5b2d9a33, #2a184855);
  border: 1px solid #c89bff44;
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.mon-potion-bonus-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #e6c7ff;
  flex-shrink: 0;
}
.mon-potion-bonus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.mon-potion-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mon-potion-chip-lbl { opacity: 0.82; font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 0.02em; }
.mon-potion-chip-val { font-variant-numeric: tabular-nums; }
.mon-potion-chip--hp {
  color: #9dffc2;
  background: #1f6b4333;
  border-color: #4ee08a66;
}
.mon-potion-chip--atk {
  color: #ffb4a0;
  background: #7a2a1f33;
  border-color: #ff6b4a66;
}
.mon-potion-chip--def {
  color: #a8c8ff;
  background: #2a457a33;
  border-color: #6c8cff66;
}
.mon-potion-chip--spd {
  color: #ffe566;
  background: #6b5a1a33;
  border-color: #e6c84a66;
}
.statrow { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; margin-top: 6px; }
.stamina { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; align-items: center; }
.stamina i { width: 14px; height: 14px; border-radius: 4px; background: #0007; display: inline-block; flex-shrink: 0; }
.stamina--pass { gap: 2px; }
.stamina--pass i { width: 10px; height: 10px; border-radius: 3px; }
.stamina i.on { background: linear-gradient(135deg, #4ee08a, #2bbd6e); box-shadow: 0 0 8px #4ee08a88; }
.adventure-energy { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.adventure-energy--inline { display: inline-flex; vertical-align: middle; }
.adventure-energy i { width: 14px; height: 14px; border-radius: 4px; background: #0007; display: inline-block; flex-shrink: 0; }
.adventure-energy i.on { background: linear-gradient(135deg, #6c8cff, #9b7dff); box-shadow: 0 0 8px #6c8cff88; }
.adventure-rules { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.55; }
.adventure-rules li { margin-bottom: 4px; }
.adventure-rules-card { padding: 12px 14px; }
.adventure-team-energy { display: flex; flex-direction: column; gap: 8px; }
.adventure-energy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adventure-energy-name { font-size: 12px; flex: 1 1 100px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adventure-energy-eta { font-size: 10px; }
.adventure-boss-list img.adventure-boss-thumb { vertical-align: middle; border-radius: 6px; margin-left: 4px; }
.adventure-levels { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.adventure-level-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: #0003; border: 1px solid #ffffff0a;
}
.adventure-level-row.current { border-color: var(--accent, #6c8cff); background: #6c8cff14; }
.adventure-level-row.done { opacity: 0.55; }
.adventure-level-row.locked { opacity: 0.35; }
.adventure-level-num {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; background: #0005; flex-shrink: 0;
}
.adventure-level-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.adventure-level-info b { font-size: 13px; }
.adventure-lvl-reward { font-size: 10px; color: var(--warn); }
.adventure-pick-row {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px;
  background: #0003; cursor: pointer;
}
.adventure-pick-row input { flex-shrink: 0; }
.adventure-boss-banner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0;
}
.adventure-boss-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  border-radius: 10px; background: #0003; border: 1px solid color-mix(in srgb, var(--adv-accent) 40%, transparent);
  font-size: 10px; text-align: center;
}
.adventure-boss-chip b { font-size: 11px; }
.adventure-boss-chip img { border-radius: 8px; }
.adventure-level-row--boss { border-color: #6c8cff44; }
.adventure-campaign-head { margin-bottom: 4px; }

/* ?? Ruinas Klax ? Aventura UI ?? */
.adv-ruins-body { margin: 0; padding: 0; }
.adv-ruins-page { padding-bottom: 24px; }
.adv-ruins-hero {
  position: relative; margin: 0 16px 14px; padding: 18px 16px; border-radius: 16px;
  background: linear-gradient(145deg, #1a1f45 0%, #12162e 55%, #0d1024 100%);
  border: 1px solid #6c8cff33; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.adv-ruins-hero-glow {
  position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px;
  background: radial-gradient(circle, #9b7dff55 0%, transparent 70%);
  pointer-events: none;
}
.adv-ruins-hero-kicker { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #9b7dff; }
.adv-ruins-hero-text { position: relative; z-index: 1; flex: 1 1 200px; }
.adv-ruins-hero-energy {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.adv-ruins-play {
  margin: 0 16px 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--zone-accent, #6c8cff) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--zone-accent) 12%, #0000) 0%, #0002 100%);
}
.adv-ruins-play--done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.adv-ruins-play-icon { font-size: 36px; }
.adv-ruins-play-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.adv-ruins-play-gem {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 28px;
  background: #4ee08a18; border: 1px solid #4ee08a44;
}
.adv-ruins-play-meta h3 { margin: 2px 0 4px; font-size: 18px; }
.adv-ruins-play-kicker { font-size: 10px; color: var(--zone-accent, #9b7dff); text-transform: uppercase; letter-spacing: 0.08em; }
.adv-ruins-play-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px;
}
.adv-ruins-play-stats > div {
  text-align: center; padding: 8px 4px; border-radius: 10px; background: #0003; font-size: 10px;
}
.adv-ruins-play-stats b { display: block; font-size: 15px; margin-bottom: 2px; }
.adv-ruins-play-reward { font-size: 11px; color: var(--warn); margin-bottom: 10px; }
.adv-ruins-play-btn { width: 100%; margin-bottom: 6px; }
.adv-ruins-play-hint { font-size: 10px; margin: 0; text-align: center; }
.adv-ruins-daily {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
}
.adv-ruins-daily.is-exhausted { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.adv-ruins-admin-extra {
  margin: 0 16px 14px;
  padding: 10px 12px;
}
.adv-ruins-admin-extra-title {
  margin: 0 0 2px;
  font-size: 13px;
}
.adv-ruins-admin-extra-scope {
  margin: 0 0 8px;
  font-size: 11px;
}
.adv-ruins-admin-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}
.adv-ruins-admin-extra-grid b {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}
.adv-ruins-admin-extra-grid span {
  display: block;
  font-size: 10px;
  color: var(--muted, #9aa3b5);
  line-height: 1.25;
}
.adv-ruins-admin-extra-hist {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.35;
}
.adv-ruins-progress { margin: 0 16px 14px; }
.adv-ruins-prizes { margin: 0 16px 14px; padding: 12px 14px; }
.adv-ruins-prizes-title { margin: 0 0 4px; font-size: 15px; }
.adv-ruins-prizes-sub { font-size: 11px; margin: 0 0 10px; }
.adv-ruins-prizes-scroll { max-height: min(52vh, 420px); overflow: auto; border-radius: 10px; border: 1px solid #ffffff10; }
.adv-ruins-prizes-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.adv-ruins-prizes-tbl th {
  position: sticky; top: 0; z-index: 1;
  background: #1a1f3a; text-align: left; padding: 8px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  border-bottom: 1px solid #ffffff12;
}
.adv-ruins-prizes-tbl td { padding: 7px 10px; border-bottom: 1px solid #ffffff08; vertical-align: middle; }
.adv-ruins-prize-lvl { white-space: nowrap; font-weight: 700; width: 88px; }
.adv-ruins-prize-items { display: flex; flex-wrap: wrap; gap: 4px; }
.adv-ruins-prize-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px 2px 4px; border-radius: 999px;
  background: #ffffff0c; border: 1px solid #ffffff14; font-size: 10px;
}
.adv-ruins-prize-chip b { font-size: 10px; }
.adv-ruins-prize-chip--limited {
  border-color: #ffb43d88;
  background: #ffb43d14;
}
.adv-ruins-prize-chip.is-exhausted {
  opacity: 0.55;
  filter: grayscale(0.35);
}
.adv-ruins-prize-first {
  font-style: normal;
  font-size: 9px;
  opacity: 0.85;
  color: #ffb43d;
}
.adv-ruins-prize-row--current { background: #6c8cff18; }
.adv-ruins-prize-row--current .adv-ruins-prize-lvl { color: #9bb4ff; }
.adv-ruins-prize-row--done { opacity: 0.55; }
.adv-ruins-prize-row--boss .adv-ruins-prize-lvl { color: #ffb43d; }
.adv-ruins-progress-head { font-size: 12px; margin-bottom: 6px; }
.adv-ruins-progress-bar {
  height: 8px; border-radius: 99px; background: #0005; overflow: hidden; border: 1px solid #ffffff0a;
}
.adv-ruins-progress-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #6c8cff, #9b7dff, #ff5db1);
  transition: width 0.35s ease;
}
.adv-ruins-map { display: flex; flex-direction: column; gap: 10px; margin: 0 16px 12px; }
.adv-ruins-zone {
  padding: 12px; border-radius: 14px; background: #0003; border: 1px solid #ffffff0a;
  border-left: 3px solid var(--zone-accent, #6c8cff);
}
.adv-ruins-zone--active {
  border-color: color-mix(in srgb, var(--zone-accent) 50%, transparent);
  background: color-mix(in srgb, var(--zone-accent) 8%, #0002);
}
.adv-ruins-zone--done { opacity: 0.72; }
.adv-ruins-zone-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.adv-ruins-zone-head h4 { margin: 2px 0; font-size: 14px; }
.adv-ruins-zone-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zone-accent); }
.adv-ruins-zone-boss {
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; text-align: center; flex-shrink: 0;
}
.adv-ruins-zone-boss b { font-size: 10px; }
.adv-ruins-zone-boss img { border-radius: 8px; }
.adv-ruins-track { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.adv-ruins-node {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid #ffffff12;
  background: #0005; color: inherit; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; padding: 0; cursor: pointer;
}
.adv-ruins-node img { border-radius: 4px; width: 22px; height: 22px; object-fit: cover; }
.adv-ruins-node.current {
  border-color: var(--zone-accent, #6c8cff); box-shadow: 0 0 12px color-mix(in srgb, var(--zone-accent) 45%, transparent);
  background: color-mix(in srgb, var(--zone-accent) 18%, #0005);
}
.adv-ruins-node.done { opacity: 0.45; }
.adv-ruins-node.locked { opacity: 0.25; cursor: not-allowed; }
.adv-ruins-node--boss { width: 34px; height: 34px; border-color: #6c8cff55; }
.adv-ruins-zone-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10px; }
.admin-withdraw-payout {
  margin-top: 6px; font-size: 15px; color: var(--good);
}
.admin-withdraw-payout b { font-size: 16px; }
.adv-ruins-rules summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.adv-ruins-energy-extra { margin-top: 10px; }

/* ?? Ruinas Klax ? cinem?tica de entrada ?pica (~5.5 s) ?? */
body.ruins-intro-lock { overflow: hidden; }
.adv-ruins-page--behind-intro {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
}
.adv-ruins-page:not(.adv-ruins-page--behind-intro) {
  animation: ruinsPageReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ruinsPageReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ruins-intro {
  --intro-dur: 5.5s;
  position: fixed; inset: 0; z-index: 12000;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: grid; place-items: center;
  background: #03010a;
  overflow: hidden;
}
.ruins-intro--exit {
  animation: ruinsIntroExit 0.62s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.ruins-intro__void {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #1a0f3a 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #0a0618 0%, #03010a 100%);
  opacity: 1;
}
.ruins-intro--ready .ruins-intro__void {
  animation: ruinsIntroVoid var(--intro-dur) ease forwards;
}

.ruins-intro__beams {
  position: absolute; inset: -20%;
  background:
    conic-gradient(from 200deg at 50% 45%, transparent 0deg, #4ee08a18 18deg, transparent 36deg),
    conic-gradient(from 340deg at 50% 45%, transparent 0deg, #c77dff22 22deg, transparent 44deg);
  opacity: 0;
  filter: blur(8px);
}
.ruins-intro--ready .ruins-intro__beams {
  animation: ruinsIntroBeams var(--intro-dur) ease forwards;
}

.ruins-intro__flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #e8ffe8cc 0%, #9b7dff66 28%, transparent 62%);
  opacity: 0;
}
.ruins-intro__flash--2 {
  background: radial-gradient(circle at 50% 42%, #ffffff99 0%, #4ee08a55 20%, transparent 50%);
}
.ruins-intro--ready .ruins-intro__flash {
  animation: ruinsIntroFlash1 var(--intro-dur) ease forwards;
}
.ruins-intro--ready .ruins-intro__flash--2 {
  animation: ruinsIntroFlash2 var(--intro-dur) ease forwards;
}

.ruins-intro__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 38%, #000000bb 100%);
  opacity: 0.85;
}
.ruins-intro--ready .ruins-intro__vignette {
  animation: ruinsIntroVignette var(--intro-dur) ease forwards;
}

.ruins-intro__speedlines {
  position: absolute; inset: -30% -50%;
  background: repeating-linear-gradient(
    102deg,
    transparent 0, transparent 32px,
    #4ee08a14 32px, #4ee08a14 34px,
    transparent 34px, transparent 66px,
    #c77dff12 66px, #c77dff12 68px
  );
  opacity: 0;
}
.ruins-intro--ready .ruins-intro__speedlines {
  animation: ruinsIntroSpeed var(--intro-dur) linear forwards;
}

.ruins-intro__edge-glow {
  position: absolute; top: 0; bottom: 0; width: 42%; pointer-events: none;
  opacity: 0;
}
.ruins-intro__edge-glow--left {
  left: 0;
  background: linear-gradient(90deg, #4ee08a66, transparent 80%);
}
.ruins-intro__edge-glow--right {
  right: 0;
  background: linear-gradient(-90deg, #c77dff66, transparent 80%);
}
.ruins-intro--ready .ruins-intro__edge-glow {
  animation: ruinsIntroEdge var(--intro-dur) ease forwards;
}
.ruins-intro--ready .ruins-intro__edge-glow--right { animation-delay: 0.06s; }

.ruins-intro__particles,
.ruins-intro__dust-layer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.ruins-intro__spark {
  position: absolute; left: var(--x); bottom: -6%;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 12px var(--c), 0 0 24px color-mix(in srgb, var(--c) 40%, transparent);
  opacity: 0;
}
.ruins-intro--ready .ruins-intro__spark {
  animation: ruinsIntroSpark var(--t) ease-in var(--d) infinite;
}
.ruins-intro__dust {
  position: absolute; left: var(--x); bottom: 18%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #c4b09a88;
  box-shadow: 0 0 6px #c4b09a44;
  opacity: 0;
}
.ruins-intro--ready .ruins-intro__dust {
  animation: ruinsIntroDust var(--t) ease-out var(--d) forwards;
}

.ruins-intro__shockwaves {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2;
}
.ruins-intro__shockwaves span {
  position: absolute;
  width: 30vmin; height: 30vmin; border-radius: 50%;
  border: 2px solid #4ee08a99;
  box-shadow: 0 0 30px #4ee08a55, inset 0 0 20px #c77dff33;
  opacity: 0;
}
.ruins-intro__shockwaves span:nth-child(2) { border-color: #c77dff88; }
.ruins-intro__shockwaves span:nth-child(3) { border-color: #6ce8ff66; }
.ruins-intro--ready .ruins-intro__shockwaves span:nth-child(1) {
  animation: ruinsIntroShock var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ruins-intro--ready .ruins-intro__shockwaves span:nth-child(2) {
  animation: ruinsIntroShock var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}
.ruins-intro--ready .ruins-intro__shockwaves span:nth-child(3) {
  animation: ruinsIntroShock var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) 0.24s forwards;
}

.ruins-intro__epic-title {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; pointer-events: none;
  opacity: 1;
}
.ruins-intro__epic-kicker {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #9b7dff; opacity: 0;
  transform: translateY(12px);
}
.ruins-intro__epic-line {
  display: block;
  font-size: clamp(36px, 11vw, 56px);
  font-weight: 900; line-height: 0.95;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #e8ffe8;
  text-shadow:
    0 0 20px #4ee08a88,
    0 0 40px #4ee08a44,
    0 4px 0 #2a5a3a,
    0 8px 24px #00000088;
  opacity: 0;
  transform: scale(1.8) translateY(20px);
  filter: blur(6px);
}
.ruins-intro__epic-line--accent {
  color: #d56bff;
  text-shadow:
    0 0 24px #c77dffaa,
    0 0 48px #c77dff55,
    0 4px 0 #4a2060,
    0 8px 24px #00000088;
}
.ruins-intro--ready .ruins-intro__epic-kicker {
  animation: ruinsEpicKicker var(--intro-dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ruins-intro--ready .ruins-intro__epic-line:nth-of-type(2) {
  animation: ruinsEpicTitle1 var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ruins-intro--ready .ruins-intro__epic-line--accent {
  animation: ruinsEpicTitle2 var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ruins-intro__reveal {
  position: relative; z-index: 3;
  width: min(94vw, 500px);
  max-height: 80vh;
}
.ruins-intro__frame {
  position: relative;
  width: 100%;
  clip-path: circle(0% at 50% 44%);
  transform: scale(0.85);
  opacity: 0;
}
.ruins-intro--ready .ruins-intro__reveal {
  animation: ruinsIntroShake var(--intro-dur) ease forwards;
}
.ruins-intro--ready .ruins-intro__frame {
  animation: ruinsFrameIris var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Imagen fija y completa desde el reveal hasta el fade final */
.ruins-intro--hold .ruins-intro__reveal {
  animation: none !important;
  transform: none !important;
}
.ruins-intro--hold .ruins-intro__frame {
  animation: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
.ruins-intro--hold .ruins-intro__art {
  animation: none !important;
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  filter: brightness(1) blur(0) saturate(1) !important;
}
.ruins-intro--hold .ruins-intro__flash,
.ruins-intro--hold .ruins-intro__beams,
.ruins-intro--hold .ruins-intro__speedlines,
.ruins-intro--hold .ruins-intro__edge-glow,
.ruins-intro--hold .ruins-intro__epic-title,
.ruins-intro--hold .ruins-intro__shockwaves {
  opacity: 0 !important;
  animation: none !important;
  visibility: hidden;
}
.ruins-intro--hold .ruins-intro__art-glow {
  animation: none !important;
  opacity: 0.4 !important;
  transform: scale(1) !important;
}
.ruins-intro--hold .ruins-intro__art-shine {
  animation: none !important;
  opacity: 0 !important;
}

.ruins-intro__art {
  display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain;
  border-radius: 16px;
  transform: scale(2.6) translateY(10%);
  filter: brightness(0) blur(28px) saturate(0.3) contrast(1.2);
  opacity: 0;
}
.ruins-intro--ready .ruins-intro__art {
  animation: ruinsIntroArt var(--intro-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ruins-intro__art-glow {
  position: absolute; inset: -8%;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 55%, #4ee08a55 0%, #c77dff33 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ruins-intro--ready .ruins-intro__art-glow {
  animation: ruinsArtGlow var(--intro-dur) ease forwards;
}

.ruins-intro__art-shine {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.08) 56%,
    transparent 62%
  );
  transform: translateX(-130%) skewX(-14deg);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.ruins-intro--ready .ruins-intro__art-shine {
  animation: ruinsArtShine var(--intro-dur) ease forwards;
}

.ruins-intro__chips {
  position: absolute; z-index: 6;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: min(94vw, 500px); padding: 0 8px;
}
.ruins-intro__chip {
  padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid #ffffff22;
  opacity: 0;
  backdrop-filter: blur(6px);
}
.ruins-intro__chip--1 { color: #4ee08a; background: #4ee08a22; border-color: #4ee08a55; }
.ruins-intro__chip--2 { color: #ff7eb8; background: #ff7eb822; border-color: #ff7eb855; }
.ruins-intro__chip--3 { color: #6ce8ff; background: #6ce8ff22; border-color: #6ce8ff55; }
.ruins-intro--ready .ruins-intro__chip--1 {
  animation: ruinsIntroChip1 var(--intro-dur) cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
.ruins-intro--ready .ruins-intro__chip--2 {
  animation: ruinsIntroChip2 var(--intro-dur) cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
.ruins-intro--ready .ruins-intro__chip--3 {
  animation: ruinsIntroChip3 var(--intro-dur) cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.ruins-intro__skip {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 8;
  opacity: 0; font-size: 11px;
}
.ruins-intro--ready .ruins-intro__skip {
  animation: ruinsIntroSkipBtn var(--intro-dur) ease forwards;
}

/* ?? Keyframes cinem?tica ?? */
@keyframes ruinsIntroExit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes ruinsIntroVoid {
  0%, 8% { opacity: 1; }
  35% { opacity: 0.6; }
  100% { opacity: 0.35; }
}
@keyframes ruinsIntroBeams {
  0%, 10% { opacity: 0; transform: rotate(-8deg) scale(0.8); }
  22% { opacity: 0.9; transform: rotate(0deg) scale(1); }
  45% { opacity: 0.4; }
  100% { opacity: 0; transform: rotate(6deg) scale(1.15); }
}
@keyframes ruinsIntroFlash1 {
  0%, 6% { opacity: 0; transform: scale(0.4); }
  10% { opacity: 1; transform: scale(1.15); }
  16% { opacity: 0.5; transform: scale(1.6); }
  28%, 100% { opacity: 0; }
}
@keyframes ruinsIntroFlash2 {
  0%, 28% { opacity: 0; transform: scale(0.6); }
  32% { opacity: 0.85; transform: scale(1.05); }
  38% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}
@keyframes ruinsIntroVignette {
  0%, 20% { opacity: 1; }
  50% { opacity: 0.75; }
  78%, 100% { opacity: 0.55; }
}
@keyframes ruinsIntroSpeed {
  0%, 14% { opacity: 0; transform: translateX(12%) skewX(-8deg); }
  24% { opacity: 0.9; }
  48% { opacity: 0.5; transform: translateX(-22%) skewX(-8deg); }
  100% { opacity: 0; transform: translateX(-35%) skewX(-8deg); }
}
@keyframes ruinsIntroEdge {
  0%, 12% { opacity: 0; }
  26% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 0; }
}
@keyframes ruinsIntroShock {
  0%, 32% { opacity: 0; transform: scale(0.15); }
  36% { opacity: 0.95; }
  52% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes ruinsEpicKicker {
  0%, 4% { opacity: 0; transform: translateY(14px); }
  12% { opacity: 1; transform: translateY(0); }
  28% { opacity: 1; }
  38% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; }
}
@keyframes ruinsEpicTitle1 {
  0%, 6% { opacity: 0; transform: scale(2.2) translateY(30px); filter: blur(10px); }
  14% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  28% { opacity: 1; transform: scale(1) translateY(0); }
  40% { opacity: 0; transform: scale(0.92) translateY(-24px); filter: blur(4px); }
  100% { opacity: 0; }
}
@keyframes ruinsEpicTitle2 {
  0%, 10% { opacity: 0; transform: scale(2.4) translateY(36px); filter: blur(12px); }
  18% { opacity: 1; transform: scale(1.05) translateY(0); filter: blur(0); }
  30% { opacity: 1; transform: scale(1) translateY(0); }
  42% { opacity: 0; transform: scale(0.9) translateY(-28px); filter: blur(6px); }
  100% { opacity: 0; }
}
@keyframes ruinsFrameIris {
  0%, 18% { clip-path: circle(0% at 50% 44%); opacity: 0; transform: scale(0.7); }
  28% { clip-path: circle(8% at 50% 44%); opacity: 0.4; transform: scale(0.82); }
  42% { clip-path: circle(58% at 50% 44%); opacity: 1; transform: scale(0.96); }
  54% { clip-path: circle(78% at 50% 44%); opacity: 1; transform: scale(1.03); }
  64%, 100% { clip-path: circle(130% at 50% 44%); opacity: 1; transform: scale(1); }
}
@keyframes ruinsIntroArt {
  0%, 18% {
    opacity: 0;
    transform: scale(2.8) translateY(12%);
    filter: brightness(0) blur(32px) saturate(0.2);
  }
  30% {
    opacity: 0.85;
    transform: scale(1.45) translateY(5%);
    filter: brightness(1.6) blur(10px) saturate(1.4) contrast(1.15);
  }
  42% {
    opacity: 1;
    transform: scale(1.12) translateY(1%);
    filter: brightness(1.2) blur(3px) saturate(1.2);
  }
  52% {
    opacity: 1;
    transform: scale(1.04);
    filter: brightness(1.05) blur(0) saturate(1.1);
  }
  64%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0) saturate(1.05);
  }
}
@keyframes ruinsIntroShake {
  0%, 38%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(-5px, 3px) rotate(-0.6deg); }
  42% { transform: translate(6px, -4px) rotate(0.7deg); }
  44% { transform: translate(-3px, 2px) rotate(-0.3deg); }
  46% { transform: translate(0, 0) rotate(0deg); }
  62% { transform: translate(1px, 0); }
  64% { transform: translate(-1px, 0); }
}
@keyframes ruinsArtGlow {
  0%, 38% { opacity: 0; transform: scale(0.8); }
  44% { opacity: 1; transform: scale(1.1); }
  58% { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1); }
}
@keyframes ruinsArtShine {
  0%, 58% { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  62% { opacity: 1; }
  72% { transform: translateX(130%) skewX(-14deg); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes ruinsIntroChip1 {
  0%, 62% { opacity: 0; transform: translateX(-36px) translateY(20px) scale(0.7); }
  70% { opacity: 1; transform: translateX(0) translateY(0) scale(1.08); }
  78%, 100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes ruinsIntroChip2 {
  0%, 66% { opacity: 0; transform: translateY(28px) scale(0.7); }
  74% { opacity: 1; transform: translateY(0) scale(1.08); }
  82%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ruinsIntroChip3 {
  0%, 70% { opacity: 0; transform: translateX(36px) translateY(20px) scale(0.7); }
  78% { opacity: 1; transform: translateX(0) translateY(0) scale(1.08); }
  86%, 100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes ruinsIntroSpark {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-110vh) scale(1.3); }
}
@keyframes ruinsIntroDust {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  15% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-80px) scale(0.3); }
}
@keyframes ruinsIntroSkipBtn {
  0%, 28% { opacity: 0; pointer-events: none; }
  34%, 100% { opacity: 0.8; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ruins-intro--ready .ruins-intro__frame,
  .ruins-intro--ready .ruins-intro__art,
  .ruins-intro--ready .ruins-intro__epic-title,
  .ruins-intro--ready .ruins-intro__epic-kicker,
  .ruins-intro--ready .ruins-intro__epic-line,
  .ruins-intro--ready .ruins-intro__flash,
  .ruins-intro--ready .ruins-intro__shockwaves span {
    animation: none !important;
  }
  .ruins-intro__epic-title { display: none; }
  .ruins-intro__frame { clip-path: none; opacity: 1; transform: none; }
  .ruins-intro__art { opacity: 1; transform: none; filter: none; }
  .ruins-intro__chip { opacity: 1; }
  .ruins-intro__skip { opacity: 0.8; pointer-events: auto; }
}

@media (max-width: 520px) {
  .adventure-boss-banner { grid-template-columns: repeat(2, 1fr); }
  .adv-ruins-play-stats { grid-template-columns: repeat(3, 1fr); }
  .adv-ruins-zone-head { flex-direction: column; }
  .lb-row { padding: 8px 10px; gap: 8px; }
  .lb-row__rank, .lb-row .rank { width: 24px; font-size: 14px; }
  .lb-row__elo { font-size: 14px; min-width: 32px; }
  .lb-row__line2 { gap: 4px; margin-top: 3px; }
  .player-badges--sm .player-badge { font-size: 12px; }
}
.equip-slot { font-size: 16px; flex-shrink: 0; margin-left: auto; }
:root { --klaxball-scale: 1.2; --cebo-scale: 1.25; --wide-item-aspect: 1.832; --market-listing-art-scale: 1.2; }
.item-icon { vertical-align: middle; object-fit: contain; display: inline-block; }
.item-icon--lg { width: 40px; height: 40px; }
.item-icon--klaxball.item-icon--lg { width: calc(40px * var(--klaxball-scale)); height: calc(40px * var(--klaxball-scale)); }
.item-icon--cebo.item-icon--lg { width: calc(40px * var(--cebo-scale)); height: calc(40px * var(--cebo-scale)); }
.item-icon--wide.item-icon--lg { width: calc(40px * var(--wide-item-aspect)); height: 40px; }
.listing-item-art {
  --item-art-size: 46px;
  width: var(--item-art-size);
  height: var(--item-art-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.listing-item-art__img,
.listing-item-art__emoji {
  width: calc(var(--item-art-size) - 4px);
  height: calc(var(--item-art-size) - 4px);
  flex-shrink: 0;
}
.listing-item-art__img {
  display: block;
  object-fit: contain;
}
.listing-item-art__img--klaxball {
  width: calc((var(--item-art-size) - 4px) * var(--klaxball-scale));
  height: calc((var(--item-art-size) - 4px) * var(--klaxball-scale));
}
.listing-item-art__img--cebo {
  width: calc((var(--item-art-size) - 4px) * var(--cebo-scale));
  height: calc((var(--item-art-size) - 4px) * var(--cebo-scale));
}
.listing-item-art__img--wide {
  width: calc((var(--item-art-size) - 4px) * var(--wide-item-aspect));
  height: calc(var(--item-art-size) - 4px);
}
.listing-item-art__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--item-art-size) * 0.62);
  line-height: 1;
}
.shop-item .ic, .inv-item .ic {
  font-size: 40px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.shop-item .ic .item-icon--lg, .inv-item .ic .item-icon--lg { width: 44px; height: 44px; }
.shop-item .ic .item-icon--klaxball.item-icon--lg,
.inv-item .ic .item-icon--klaxball.item-icon--lg { width: calc(44px * var(--klaxball-scale)); height: calc(44px * var(--klaxball-scale)); }
.shop-item .ic .item-icon--cebo.item-icon--lg,
.inv-item .ic .item-icon--cebo.item-icon--lg { width: calc(44px * var(--cebo-scale)); height: calc(44px * var(--cebo-scale)); }
.shop-item .ic .item-icon--wide.item-icon--lg,
.inv-item .ic .item-icon--wide.item-icon--lg { width: calc(44px * var(--wide-item-aspect)); height: 44px; }
.shop-fragment--soon { opacity: 0.72; }
.shop-frag-close-banner {
  margin: 0 16px 10px;
  padding: 6px 10px;
  width: fit-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  color: #5c3b00;
  background: #ffe8a8;
  border: 1px solid #e0c06a;
}
.shop-admin-caramelo-banner {
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ffd23d55;
  background: linear-gradient(135deg, #ffd23d18, var(--card));
}
.shop-admin-caramelo-banner > b {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}
.shop-admin-caramelo-total {
  margin: 0 0 8px;
  font-size: 12px;
}
.shop-admin-caramelo-list {
  margin: 0;
  padding: 0 0 0 18px;
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}
.shop-admin-caramelo-list li {
  margin: 0 0 2px;
}
.shop-admin-caramelo-list .qty {
  font-weight: 800;
  color: var(--accent);
}
.shop-frag-grid .shop-fragment .btn { margin-top: 6px; width: 100%; }
.shop-frag-upgrade-icons { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.shop-frag-upgrade-arrow { font-size: 18px; font-weight: 900; color: var(--accent); }
.shop-upgrade-rate { font-weight: 800; font-size: 13px; color: var(--text); }
.shop-fragment-upgrade .shop-qty-label { width: 100%; margin: 6px 0; }
.wiki-frag-tbl td { vertical-align: middle; }
.wiki-frag-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.wiki-frag-pill { display: flex; align-items: center; gap: 6px; background: var(--card2); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.wiki-frag-pill .item-icon { width: 28px; height: 28px; }
.wiki-frag-pill .item-icon--klaxball { width: calc(28px * var(--klaxball-scale)); height: calc(28px * var(--klaxball-scale)); }
.wiki-frag-pill .item-icon--cebo { width: calc(28px * var(--cebo-scale)); height: calc(28px * var(--cebo-scale)); }
.wiki-item-line { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: 13px; line-height: 1.35; }
.wiki-item-line .item-icon { flex-shrink: 0; margin-top: 1px; }
.wiki-item-subtitle { font-weight: 700; margin: 10px 0 4px; font-size: 12px; color: var(--accent); }
.ball-btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }

/* --- Grid --- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 12px 16px; }

/* --- Bottom nav --- */
.nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  background: #12152bdd; backdrop-filter: blur(12px); display: flex; justify-content: space-around;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #ffffff14; z-index: 50; }
.nav button { background: none; color: var(--muted); font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 10px; border-radius: 12px; }
.nav button .ic { font-size: 20px; }
.nav button.active { color: var(--txt); }
.nav button.active .ic { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 4px 8px #6c8cff88); }
.nav button { position: relative; }
.nav button.has-spawn::after { content: ''; position: absolute; top: 4px; right: 14px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); animation: spawnPulse 1.1s ease-in-out infinite; }
.nav-lbl--campo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  gap: 0;
  font-size: 9px;
  letter-spacing: 0.02em;
}
.nav-lbl--campo .nav-lbl-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.nav-lbl--campo .nav-lbl-a,
.nav-lbl--campo .nav-lbl-b { display: block; }
.nav-lbl--campo .nav-lbl-full { display: none; }
@keyframes spawnPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } }

/* Men? personalizable ? modo edici?n */
.home-sections-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 16px 4px;
}
.home-sections-head .section-title {
  margin: 0;
}
.home-nav-edit-hint {
  margin: 0 16px 8px;
  font-size: 12px;
  line-height: 1.35;
}
.nav.nav--edit {
  outline: 1px dashed #ffd23d66;
  outline-offset: -2px;
}
.nav button.nav-btn--edit {
  color: #ffd23d;
  box-shadow: inset 0 0 0 1px #ffd23d55;
}
.nav-edit-mark,
.hub-edit-mark {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  background: #ff5d6c;
  color: #fff;
  pointer-events: none;
}
.hub-edit-mark {
  top: 6px;
  right: 6px;
  background: #4ee08a;
  color: #081018;
}
.hub-btn.hub-btn--edit {
  box-shadow: inset 0 0 0 1px #4ee08a66;
  touch-action: none;
  cursor: grab;
}
.hub-btn.is-reordering,
.nav button.is-reordering {
  opacity: 0.85;
  transform: scale(1.05);
  z-index: 5;
  box-shadow: 0 8px 22px #0008;
  cursor: grabbing;
}
.homeLinks--edit.is-reordering-list .hub-btn,
.nav.nav--edit.is-reordering-list button {
  transition: transform 0.08s ease;
}
.nav.nav--edit button.nav-btn--edit {
  touch-action: none;
  cursor: grab;
}
body.nav-edit-mode .nav button[data-tab="home"] {
  box-shadow: inset 0 0 0 1px #6c8cff66;
}

/* --- Banner spawn / reto --- */
.banner { margin: 10px 16px; padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow); animation: pop .3s; }
.banner.spawn { background: linear-gradient(135deg, #2b6f4e, #1d4d6e); }
.banner.pvp { background: linear-gradient(135deg, #6e2b5a, #4a2b6e); }
.banner .grow { flex: 1; }
.banner .ttl { font-weight: 900; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Banner Twitch ? Seoky en directo (arriba del todo) */
#banners:empty { display: none; }
#banners:not(:empty) {
  display: block;
  padding: max(8px, env(safe-area-inset-top)) 12px 0;
}

/* Ticker fino de anuncios (marquee fijo arriba) */
.announce-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  height: calc(26px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(90deg, #1a1040 0%, #2a1858 40%, #1a1040 100%);
  border-bottom: 1px solid #ffffff22;
  box-shadow: 0 4px 14px #0008;
}
.announce-ticker[hidden] { display: none !important; }
/* Track animado por JS (translate3d + m?dulo en px). Segmentos byte-id?nticos, sin flex-gap. */
.announce-ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.announce-ticker-segment {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.announce-ticker-unit {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* Espacio entre unidades dentro del segmento (incluido al final ? bucle continuo). */
  padding-right: 2.5rem;
  box-sizing: content-box;
}
.announce-ticker-seg {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffe9a8;
  text-shadow: 0 1px 2px #000a;
  flex-shrink: 0;
}
.announce-ticker-sep {
  color: #ff5db1;
  font-weight: 900;
  opacity: 0.85;
  flex-shrink: 0;
  margin-left: 0.65rem;
}
body.has-announce-ticker #app {
  padding-top: calc(26px + env(safe-area-inset-top, 0px));
}
body.has-announce-ticker #banners:not(:empty) {
  padding-top: 8px;
}
body.has-announce-ticker.login-active #app,
body.has-announce-ticker.starter-active #app {
  padding-top: 0;
}
body.has-announce-ticker.login-active .announce-ticker,
body.has-announce-ticker.starter-active .announce-ticker {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .announce-ticker-track { transform: none !important; padding: 0 12px; }
}

.twitch-live-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #9146ff 0%, #6441a5 55%, #3a1f6e 100%);
  border: 1px solid #ffffff33;
  box-shadow: 0 8px 24px #9146ff55, 0 2px 8px #0008;
  overflow: hidden;
  animation: twitchLiveIn .35s ease-out;
}
.twitch-live-banner:hover,
.twitch-live-banner:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.twitch-live-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, #ffffff22 48%, transparent 62%);
  animation: twitchLiveShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
.twitch-live-icon {
  flex-shrink: 0;
  color: #fff;
  filter: drop-shadow(0 2px 4px #0008);
}
.twitch-live-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.twitch-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  background: #e91916;
  padding: 2px 7px;
  border-radius: 999px;
  animation: twitchLiveBlink 1.4s ease-in-out infinite;
}
.twitch-live-msg {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px #0008;
}
.twitch-live-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff22;
  border: 1px solid #ffffff44;
}
.vip-pass-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 8px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid #a9f8ff80;
  border-radius: 14px;
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(135deg, #42146f 0%, #7132af 48%, #087f9a 100%);
  box-shadow: 0 8px 24px #7437be66, 0 0 18px #41e5ff35, 0 2px 8px #0008;
}
.vip-pass-banner:hover,
.vip-pass-banner:focus-visible {
  filter: brightness(1.12);
  outline: none;
}
.vip-pass-banner__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #d7fbff3b 48%, transparent 62%);
}
.vip-pass-banner__gem {
  z-index: 1;
  flex-shrink: 0;
  color: #a9f8ff;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 12px #83f4ff, 0 2px 4px #0008;
}
.vip-pass-banner__text {
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.vip-pass-banner__badge {
  padding: 2px 7px;
  border-radius: 999px;
  color: #201034;
  background: linear-gradient(90deg, #a9f8ff, #e4c4ff);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.vip-pass-banner__msg {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 2px #0008;
}
.vip-pass-banner__cta {
  z-index: 1;
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1px solid #c1fbff80;
  border-radius: 999px;
  background: #ffffff20;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
@media (min-width: 768px) {
  #banners:not(:empty) { padding: 12px 20px 0; }
  .twitch-live-banner,
  .vip-pass-banner { max-width: none; margin: 0 0 8px; }
}
@keyframes twitchLiveIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes twitchLiveShine {
  0%, 100% { transform: translateX(-40%); opacity: 0.35; }
  50% { transform: translateX(40%); opacity: 0.7; }
}
@keyframes twitchLiveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .twitch-live-banner,
  .twitch-live-pulse,
  .twitch-live-badge,
  .vip-pass-banner,
  .vip-pass-banner__shine,
  .vip-pass-banner__gem { animation: none !important; }
}

/* --- Modal --- */
.overlay { position: fixed; inset: 0; background: #06070fcc; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.modal { background: var(--card); border-radius: 20px; padding: 18px; width: 100%; max-width: 440px; box-shadow: var(--shadow);
  max-height: min(90dvh, 90vh); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: pop .25s; }
body.modal-open { overflow: hidden; }

/* T?rminos y condiciones (gate post-login, no dismissible) */
.overlay-terms { z-index: 120; }
.modal-terms {
  max-width: 520px;
  max-height: min(92dvh, 760px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.terms-gate {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 760px);
  min-height: 0;
}
.terms-gate-head { padding: 18px 18px 8px; flex-shrink: 0; }
.terms-gate-title { margin: 0 0 6px; font-size: 1.25rem; }
.terms-gate-intro { margin: 0; font-size: 13px; line-height: 1.4; }
.terms-gate-scroll {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px 12px;
  border-top: 1px solid #ffffff14;
  border-bottom: 1px solid #ffffff14;
  background: #00000022;
}
.terms-gate-doc-title { margin: 0 0 10px; font-size: 1.05rem; }
.terms-gate-doc { font-size: 13px; line-height: 1.45; }
.terms-gate-doc .wiki-sub { margin: 12px 0; }
.terms-gate-doc .wiki-sub-title { margin: 0 0 6px; font-size: 14px; }
.terms-gate-hint { margin: 8px 18px 0; font-size: 12px; flex-shrink: 0; }
.terms-gate-actions {
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.terms-gate-accept { width: 100%; font-weight: 800; }
.terms-gate-backdrop {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1020;
}
.terms-gate-waiting { font-weight: 700; opacity: .7; }

/* Modal ficha Klax: hoja inferior en m?vil, centrado en pantallas altas */
.overlay-dex { align-items: flex-end; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.modal-dex { max-width: 480px; margin: 0 auto; border-radius: 20px 20px 0 0; max-height: min(92dvh, 92vh);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); width: 100%; }
@media (min-width: 400px) and (min-height: 520px) {
  .overlay-dex { align-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .modal-dex { border-radius: 20px; max-height: min(88dvh, 720px); }
}

/* --- Toast --- */
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 448px; }
.toast { background: #222a52f0; color: #fff; padding: 11px 14px; border-radius: 12px; font-weight: 700; box-shadow: var(--shadow); animation: pop .25s; border-left: 4px solid var(--accent); }
.toast.bad { border-color: var(--bad); } .toast.good { border-color: var(--good); } .toast.warn { border-color: var(--warn); }
.toast.wild-spawn {
  border-left: none;
  border: 1.5px solid #7dffb8;
  background: linear-gradient(135deg, #0d2818f0 0%, #163a28f5 55%, #1a2f4af0 100%);
  box-shadow: 0 8px 20px #00000055, 0 0 14px #3dff9a44;
  padding: 10px 14px;
  text-align: center;
  animation: wildSpawnPop .4s cubic-bezier(.2,1.2,.3,1);
}
.toast.wild-spawn .wild-toast-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.toast.wild-spawn .wild-toast-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 6px #7dffb8aa);
  flex-shrink: 0;
}
.toast.wild-spawn .wild-toast-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.toast.wild-spawn .wild-toast-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #eafff3;
  text-shadow: 0 0 10px #7dffb866;
  line-height: 1.2;
}
.toast.wild-spawn .wild-toast-sub {
  font-size: 11px;
  font-weight: 700;
  color: #9dffc8;
  opacity: 0.92;
  line-height: 1.2;
}
@keyframes wildSpawnPop {
  0% { opacity: 0; transform: translateY(-10px) scale(0.92); }
  65% { opacity: 1; transform: translateY(1px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================= ARENA DE COMBATE ================= */
.arena {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 480px);
  height: 100dvh;
  height: 100svh;
  z-index: 150;
  overflow: hidden;
}
.arena-field {
  position: absolute; inset: 0;
  overflow: hidden; perspective: 420px;
}
.fighter { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fighter.enemy .hpbox { position: absolute; top: 5%; left: 7%; z-index: 6; pointer-events: auto; }
.fighter.enemy .sprite {
  position: absolute;
  bottom: 54%;
  right: 16%;
  transform: scaleX(-1);
  transform-origin: center bottom;
  z-index: 5;
}
.fighter.enemy.fighter--trainer .sprite.enemy {
  bottom: 46%;
  right: 20%;
  z-index: 6;
}
.battle-trainer-enemy {
  position: absolute;
  bottom: 24%;
  right: 6%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.battle-trainer-sprite {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px #000a);
  animation: klaxBob 3.4s ease-in-out infinite;
}
.battle-trainer-label {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px #000c;
  background: #0b0f22bb;
  padding: 2px 8px;
  border-radius: 999px;
}
.fighter.player .sprite {
  position: absolute;
  bottom: 18%;
  left: 12%;
  transform-origin: center bottom;
  z-index: 4;
}
.fighter.player .hpbox { position: absolute; bottom: 36%; right: 6%; z-index: 6; pointer-events: auto; }
.hpbox { background: #0b0f22cc; border-radius: 12px; padding: 8px 12px; min-width: 150px; box-shadow: var(--shadow); }
.hpbox .nm { font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; }
.hpbar { height: 9px; background: #0008; border-radius: 999px; overflow: hidden; margin-top: 5px; }
.hpbar > i { display: block; height: 100%; background: linear-gradient(90deg, #4ee08a, #b6e04e); transition: width .5s; border-radius: 999px; }
.hpbar.low > i { background: linear-gradient(90deg, #ff5d6c, #ffb43d); }
.hpbar.critical > i { animation: hpPulse .7s ease-in-out infinite; }
@keyframes hpPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.hp-num { font-size: 11px; color: var(--muted); text-align: right; margin-top: 2px; }
.sprite { transition: transform .22s cubic-bezier(.25,.9,.35,1), filter .18s; filter: drop-shadow(0 10px 12px #0006); z-index: 5; }
.sprite .klax-svg { display: block; }
.klax-img { display: block; filter: drop-shadow(0 4px 8px #0005); }
.klax-img-idle { animation: klaxBob 3.2s ease-in-out infinite; }
@keyframes klaxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sprite.enemy { transform: scaleX(-1); }
.sprite.hit { animation: shake .35s; }
.sprite.faint { animation: faint .8s forwards; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes faint { to { transform: translateY(40px) scale(.6) rotate(20deg); opacity: 0; } }
.sprite.enemy.faint { animation: faintE .8s forwards; }
@keyframes faintE { to { transform: scaleX(-1) translateY(40px) scale(.6) rotate(-20deg); opacity: 0; } }

.dmg-float { position: absolute; font-weight: 900; font-size: 26px; color: #fff; text-shadow: 0 2px 6px #000; animation: floatUp 1s forwards; pointer-events: none; z-index: 5; }
.dmg-float.crit { color: var(--warn); font-size: 34px; }
@keyframes floatUp { to { transform: translateY(-40px); opacity: 0; } }
.fx { position: absolute; border-radius: 50%; pointer-events: none; opacity: .9; mix-blend-mode: screen; animation: burst .5s forwards; }
@keyframes burst { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

.arena-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  background: transparent;
  border: none;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.arena-ui .battle-toolbar { pointer-events: auto; }
.battle-matchup-slot {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  pointer-events: none;
}
.battle-matchup-slot:empty { display: none; margin: 0; }
.matchup-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  background: #0b0f22dd;
  border: 1px solid #ffffff18;
  box-shadow: 0 4px 16px #0008;
}
.matchup-chip__main { font-size: 12px; }
.matchup-chip__sub { font-size: 10px; font-weight: 700; opacity: 0.85; }
.matchup-chip--bad { border-color: #ff7b8a88; color: #ffc4cb; }
.matchup-chip--good { border-color: #6ee08a88; color: #b8f5c8; }
.arena-top {
  display: none;
  position: absolute; left: 0; right: 0; top: 0; z-index: 8;
  background: transparent;
  border: none;
  padding: max(6px, env(safe-area-inset-top)) 12px 6px;
  pointer-events: none;
}
.arena-top.has-content { display: block; }
/* Panel centrado: captura, recompensas y ?Continuar? */
.arena.catch-phase .arena-ui { display: none; }
.arena.catch-phase .arena-field { pointer-events: none; }
.arena.catch-phase .arena-field .hpbox,
.arena.battle-end-result .arena-field .hpbox,
.arena.battle-end-result .fighter--trainer .trainer-badge { display: none !important; }
.arena.battle-end-result.battle-end--player-won .fighter.enemy { display: none !important; }
.arena.battle-end-result.battle-end--enemy-won .fighter.player { display: none !important; }
.arena.catch-phase .arena-top {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 30;
  padding: 16px;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 58%, #06070d44 0%, #06070daa 52%, #06070dcc 100%);
}
.arena.catch-phase .arena-commands {
  width: min(320px, 92vw);
  margin: 0 auto;
  background: #0b0f22ee;
  border: 1px solid #ffffff22;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 40px #000a;
  pointer-events: auto;
  display: grid;
  gap: 10px;
}
.arena.catch-phase .battle-banner-slot { display: none !important; }
.arena.catch-phase .catch-finish-msg {
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 4px #000c;
}
.arena.catch-phase .catch-continue-btn {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 14px 16px;
  pointer-events: auto;
  touch-action: manipulation;
}
.arena.catch-phase .catch-flee-btn {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 14px 16px;
  pointer-events: auto;
  touch-action: manipulation;
}
.arena.catch-phase .moves { grid-template-columns: 1fr; }
.arena.catch-phase .battle-actions { grid-template-columns: 1fr; }
.arena.catch-phase .ball-btn,
.arena.catch-phase .battle-actions .btn { width: 100%; justify-content: center; }
.catch-bait-btn.active { border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, var(--card)); color: var(--good); }
.arena-top .arena-commands,
.arena-top .battle-banner-slot { pointer-events: auto; }
.battle-banner-slot { display: flex; justify-content: center; align-items: center; min-height: 0; }
.battle-banner-slot:not(:empty) { min-height: 34px; margin-bottom: 6px; }
.arena-commands { display: grid; gap: 8px; }
.arena-commands .moves:not(:empty) + .battle-actions:not(:empty) { margin-top: 0; }
.arena-commands .moves:empty + .battle-actions:not(:empty),
.arena-commands .moves:not(:empty) + .battle-actions:empty { /* ok */ }
.battle-toolbar {
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; margin: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  position: relative;
  z-index: 9;
}
.battle-toolbar .battle-log { display: none !important; }
.battle-speed-btn {
  flex-shrink: 0; padding: 8px 14px; border-radius: 10px; border: 1px solid #ffffff35;
  background: #0b0f22cc; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer;
  position: static; pointer-events: auto; align-self: flex-end;
  box-shadow: 0 4px 16px #0008;
}
.battle-speed-btn.on { background: var(--good); color: #012; border-color: transparent; }
.battle-close-btn {
  flex-shrink: 0; padding: 6px 10px; border-radius: 8px;
  border: 1px solid #ff5d6c88; background: #ff5d6c28; color: #ffb3ba;
  font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap;
  position: static; pointer-events: auto; align-self: center;
}
.battle-close-btn:active { transform: scale(.96); background: #ff5d6c44; }
.battle-close-btn--float {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: 10px;
  z-index: 12;
  pointer-events: auto;
}
.battle-log { font-size: 14px; min-height: 26px; font-weight: 700; margin-bottom: 8px; }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.move-btn { padding: 12px; border-radius: 12px; background: var(--card2); color: #fff; font-weight: 800; text-align: left; border: 2px solid transparent; }
.move-btn .mt { font-size: 11px; opacity: .8; font-weight: 700; }
.move-btn:active { transform: scale(.97); }
.battle-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.battle-actions:has(> :only-child) { grid-template-columns: 1fr; }
.battle-actions .btn[style*="grid-column"] { grid-column: 1 / -1; }

/* --- PvP manual: campo de tama?o FIJO + cajet?n debajo (no se encoge al mostrar ataques) --- */
.arena--manual {
  --mpvp-field-h: min(52dvh, 420px);
  display: flex;
  flex-direction: column;
  background: #06070f;
}
.arena--manual .arena-field {
  position: relative;
  inset: auto;
  flex: 0 0 var(--mpvp-field-h);
  width: 100%;
  height: var(--mpvp-field-h);
  min-height: var(--mpvp-field-h);
  max-height: var(--mpvp-field-h);
  overflow: hidden;
}
/* Fondo recortado al alto fijo: cubre y encuadra el suelo/plataformas de pelea */
.arena--manual .bg-scene {
  inset: 0;
}
.arena--manual .bg-scene__pixel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  transform: scale(1.12);
  transform-origin: center 78%;
}
.arena--manual .arena-ui {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px max(8px, env(safe-area-inset-bottom));
  background: #06070df5;
  border-top: 1px solid #ffffff18;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 8;
}
/* Sprites encajados en el alto fijo del campo */
.arena--manual .fighter.enemy .sprite {
  bottom: 44%;
  right: 12%;
}
.arena--manual .fighter.player .sprite {
  bottom: 8%;
  left: 8%;
}
.arena--manual .fighter.enemy .hpbox {
  top: 4%;
  left: 5%;
  min-width: 120px;
  padding: 6px 10px;
  transform: scale(0.92);
  transform-origin: top left;
}
.arena--manual .fighter.player .hpbox {
  bottom: 26%;
  right: 5%;
  min-width: 120px;
  padding: 6px 10px;
  transform: scale(0.92);
  transform-origin: bottom right;
}
.mpvp-command-box {
  background: #0b0f22f2;
  border: 1px solid #ffffff28;
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 -4px 18px #0008;
  display: grid;
  gap: 6px;
  overflow: visible;
}
.mpvp-turn-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}
.mpvp-turn-label.is-you { color: var(--good); }
.mpvp-turn-label.is-wait { color: #ffc86b; }
.mpvp-turn-label.is-spec { color: #9ad4ff; }
.arena--spectate .mpvp-command-box {
  box-shadow: inset 0 0 0 1px rgba(100, 180, 255, 0.35);
}
.arena--spectate .mpvp-spectate-line {
  color: #9ad4ff;
  font-weight: 800;
}
.explore-spectate-btn {
  background: linear-gradient(135deg, #c43a18, #e89020) !important;
  border-color: #ffd060 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  animation: explore-spectate-pulse 1.4s ease-in-out infinite;
}
@keyframes explore-spectate-pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 6px 18px rgba(200, 60, 20, 0.45); }
  50% { filter: brightness(1.12); box-shadow: 0 8px 22px rgba(255, 160, 40, 0.55); }
}
.mpvp-turn-timer {
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 8px;
  background: #ffffff12;
}
.mpvp-turn-timer.is-low { background: #ff5d6c44; color: #ffb3ba; }
.mpvp-pot-line, .mpvp-wait-line {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  color: #ffffff99;
  font-weight: 700;
}
.mpvp-fair-level {
  color: #b8e0ff;
  letter-spacing: 0.02em;
}
.mpvp-party {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.mpvp-party-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #ffffff18;
  background: #ffffff08;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.mpvp-party-slot:disabled { opacity: 0.55; cursor: default; }
.mpvp-party-slot.is-active { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.mpvp-party-slot.is-faint { opacity: 0.4; filter: grayscale(0.8); }
.mpvp-party-slot.is-cd { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.35); }
.mpvp-party-ico { width: 36px; height: 36px; flex-shrink: 0; }
.mpvp-party-ico svg { width: 36px; height: 36px; display: block; }
.mpvp-party-meta { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mpvp-party-meta b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpvp-party-meta i {
  display: block; height: 4px; border-radius: 2px;
  background: var(--good); max-width: 100%;
}
.mpvp-party-meta em { font-size: 9px; font-style: normal; opacity: 0.75; }
.arena--manual .moves {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-height: 84px; /* reserva hueco: el campo no cambia al mostrar ataques */
}
.arena--manual .move-btn { padding: 9px 10px; }
.arena--manual .battle-log { font-size: 12px; min-height: 20px; margin-bottom: 4px; }
.arena--manual .battle-actions { grid-template-columns: 1fr; }
.move-btn--cd { opacity: 0.45; filter: grayscale(0.4); cursor: not-allowed; }
.mpvp-cd-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 6px;
  background: #ff5d6c55;
  color: #ffb3ba;
  vertical-align: middle;
  margin-left: 4px;
}
.mpvp-pick.mpvp-pick--on {
  background: color-mix(in srgb, var(--good) 22%, var(--card2)) !important;
  color: #fff !important;
  border: 1px solid var(--good) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent);
}
.mpvp-pick.mpvp-pick--lead {
  background: color-mix(in srgb, var(--good) 38%, var(--card2)) !important;
  outline: 2px solid var(--good);
}

/* --- Login --- */
/* --- Login / pantalla de acceso --- */
:root {
  --login-battle-h: clamp(172px, 38svh, 320px);
  --login-version-h: calc(26px + env(safe-area-inset-bottom, 0px));
}

html.login-active {
  height: 100%;
  height: 100svh;
  overflow: hidden;
  background: #161a33;
}

body.login-active {
  overflow: hidden;
  background: #161a33;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100svh;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh;
  max-height: 100svh;
}
body.login-active #app {
  padding-bottom: 0;
  max-width: none;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100svh;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh;
  max-height: 100svh;
  margin: 0;
  background: #161a33;
  position: fixed;
  inset: 0;
}

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #05060e;
  overflow: hidden;
  isolation: isolate;
}

.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.login-bg-media {
  position: absolute;
  inset: -3%;
  background: url('/assets/login-cover.png') center center / cover no-repeat;
  animation: loginCoverKenBurns 32s ease-in-out infinite;
  transform-origin: center center;
  filter: brightness(1.04) saturate(1.08) contrast(1.02);
}

.login-bg-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0.35) 0%, rgba(6, 10, 18, 0.05) 32%, rgba(6, 10, 18, 0.72) 78%, rgba(6, 10, 18, 0.92) 100%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(6, 10, 18, 0.15) 0%, rgba(6, 10, 18, 0.55) 100%);
  pointer-events: none;
}

.login-title-hero {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  padding: clamp(10px, 2.5vw, 20px) clamp(14px, 4vw, 28px) 0;
  text-align: center;
}

.login-title-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100%, 640px);
  margin: 0 auto;
}

.login-title-logo-wrap {
  margin: 0;
  padding: 0;
  line-height: 0;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}
.login-title-logo {
  display: block;
  width: min(240px, 62vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  /* Soften residual dark navy inside the emblem against the login art */
  mix-blend-mode: lighten;
}

.login-title-animated {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: clamp(30px, 8.8vw, 48px) !important;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}

.login-title-letter-wrap {
  display: inline-block;
  animation:
    loginLetterIn 0.65s cubic-bezier(0.34, 1.35, 0.64, 1) both,
    loginLetterFloat 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.05s), calc(0.7s + var(--i) * 0.1s);
}

.login-title-letter-wrap--clash {
  animation-delay: calc(var(--i) * 0.05s), calc(0.85s + (var(--i) - 7) * 0.08s);
}

.login-title-letter {
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(165deg, #fff 0%, #ffe08a 38%, #ff9a4d 68%, #ff5db1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-title-letter-wrap--clash .login-title-letter {
  background: linear-gradient(165deg, #eef2ff 0%, #b8c8ff 35%, #6c8cff 62%, #ff7ec4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: loginClashGlow 2.8s ease-in-out infinite;
  animation-delay: calc(0.85s + (var(--i) - 7) * 0.08s);
}

.login-title-tag {
  margin: 10px 0 0;
  width: 100%;
  text-align: center;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  opacity: 0;
  animation: loginTagFade 0.7s ease forwards 0.8s;
}

.login-title-bar {
  display: block;
  height: 3px;
  margin: 12px auto 0;
  width: min(220px, 72%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffd23d, #ff8a5b, #6c8cff, transparent);
  background-size: 200% 100%;
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: center;
  animation: loginTitleBar 0.8s ease forwards 0.95s, loginTitleBarShine 2.8s linear infinite 1.75s;
  box-shadow: 0 0 18px rgba(255, 180, 60, 0.45);
}

.login-shell {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding:
    clamp(16px, 4svh, 32px)
    clamp(12px, 3vw, 20px)
    calc(var(--login-version-h) + clamp(10px, 2vw, 16px));
  min-height: 0;
}

.login-lang-flags {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 6;
  width: min(100%, 420px);
  display: flex;
  justify-content: center;
  margin: 0 auto 10px;
  flex-shrink: 0;
  pointer-events: auto;
}

.login-lang-flags .lang-flags {
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 12, 24, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
  .login-screen {
    display: flex;
    flex-direction: column;
  }
  .login-bg-media {
    background-position: center 42%;
  }
  .login-shell {
    width: 100%;
    padding-top: clamp(16px, 4svh, 28px);
  }
  .login-panel {
    width: min(100%, 400px);
    max-height: min(62dvh, 520px);
  }
}

.login-clash {
  position: absolute; left: 50%; top: 54%;
  width: 90px; height: 90px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff8 0%, #ffd23d44 30%, #ff5db122 50%, transparent 72%);
  border-radius: 50%;
  filter: blur(2px);
  animation: loginClashBurst 3.2s ease-in-out infinite;
  pointer-events: none; z-index: 3;
}

.login-vfx { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }

.login-proj {
  position: absolute; top: var(--t, 50%);
  width: var(--size, 14px); height: var(--size, 14px);
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 10px currentColor;
  animation: loginProjFlyL var(--dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.login-proj--from-l { left: 12%; }
.login-proj--from-r { left: auto; right: 12%; animation-name: loginProjFlyR; }
.login-proj--fire { background: #ff6b3d; color: #ff6b3d; }
.login-proj--water { background: #3da5ff; color: #3da5ff; border-radius: 40% 40% 50% 50%; }
.login-proj--leaf { background: #5fd66f; color: #5fd66f; border-radius: 2px; transform: rotate(45deg); width: 12px; height: 14px; }
.login-proj--bolt { background: #ffd23d; color: #ffd23d; box-shadow: 0 0 14px #ffd23d; }
.login-proj--shadow { background: #8b5cf6; color: #8b5cf6; }
.login-proj--dragon { background: #ff4d8d; color: #ff4d8d; width: 16px; height: 16px; }

/* Cuerpo a cuerpo: impacto en el centro cuando los Klax se encuentran */
.login-melee {
  position: absolute; left: 50%; top: var(--my, 54%);
  width: 80px; height: 50px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.login-melee-swing {
  position: absolute; top: 50%; width: 36px; height: 5px; border-radius: 3px;
  opacity: 0;
  animation: loginMeleeSwing 3.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.login-melee-swing--l {
  left: 0; transform-origin: right center;
  background: linear-gradient(90deg, transparent, #fff, #ff6b3d);
}
.login-melee-swing--r {
  right: 0; transform-origin: left center;
  background: linear-gradient(270deg, transparent, #fff, #3da5ff);
}
.login-melee-impact {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, #fffc 0%, #ffd23d55 35%, transparent 70%);
  animation: loginMeleeImpact 3.2s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

.login-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.login-spark {
  opacity: 0.55;
  position: absolute; left: var(--x); top: var(--y);
  width: 4px; height: 4px; border-radius: 50%; background: #fff;
  animation: loginSpark 2.4s ease-out infinite;
  animation-delay: calc(var(--i) * 0.17s);
}

.login-ground {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 42%;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, #0008 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, #1a2a1a88 35%, #3d2818 70%, #1a0e08 100%);
  transform: perspective(400px) rotateX(12deg);
  transform-origin: bottom center;
}

.login-arena-ring {
  position: absolute; left: 50%; bottom: 14%; width: min(92%, 420px); height: 28%;
  transform: translateX(-50%);
  border: 2px solid #ffffff18;
  border-radius: 50%;
  box-shadow: 0 0 40px #6c8cff33, inset 0 0 30px #0006;
  animation: loginRingPulse 3.2s ease-in-out infinite;
}

.login-fighters { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.login-fighter {
  position: absolute;
  bottom: calc(16% + var(--row) * 9%);
  width: var(--size);
  z-index: calc(3 - var(--row));
}
.login-fighter--left { left: clamp(2%, 4vw, 8%); }
.login-fighter--right { right: clamp(2%, 4vw, 8%); }

.login-fighter-sprite {
  position: relative; z-index: 2;
  filter: drop-shadow(0 8px 16px #0009);
}
.login-fighter--left .login-fighter-sprite {
  transform: scaleX(-1);
  animation: loginBobL 3.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.login-fighter--right .login-fighter-sprite {
  animation: loginBobR 3.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.login-fighter-sprite .klax-img,
.login-fighter-sprite svg { display: block; width: var(--size) !important; height: auto !important; }

.login-fighter-shadow {
  position: absolute; left: 50%; bottom: -6px; width: 70%; height: 10px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #000a 0%, transparent 70%);
  border-radius: 50%;
}

.login-battle-vignette { display: none; }

.login-hero { display: none; }

.launch-countdown {
  margin-bottom: 0;
  padding: clamp(12px, 2.5vw, 16px);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.14), rgba(255, 93, 177, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 32px rgba(108, 140, 255, 0.18), inset 0 0 20px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  animation: launchCdPulse 2.8s ease-in-out infinite;
}
.launch-countdown-eyebrow {
  margin: 0 0 8px; font-size: clamp(11px, 2.8vw, 13px); font-weight: 900;
  letter-spacing: 0.18em; text-transform: uppercase; color: #ffd23d;
  text-shadow: 0 0 16px #ffd23d88;
}
.launch-countdown-grid {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 1.2vw, 10px);
  flex-wrap: wrap;
}
.launch-cd-cell { display: flex; flex-direction: column; align-items: center; min-width: clamp(52px, 14vw, 72px); }
.launch-cd-num {
  font-size: clamp(36px, 11vw, 56px); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, #a8b8ff 55%, #6c8cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 12px #6c8cffaa);
}
.launch-cd-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #9aa8e8; margin-top: 4px; }
.launch-cd-sep {
  font-size: clamp(28px, 8vw, 44px); font-weight: 900; line-height: 1; color: #ffffff44;
  padding-bottom: 18px; animation: launchCdBlink 1s step-end infinite;
}
.launch-countdown-date { margin: 10px 0 0; font-size: 12px; text-transform: capitalize; color: #ffffff88; }
.launch-gate-notice {
  font-size: 12px; line-height: 1.45; max-width: 340px; margin: 0; text-align: center;
  padding: 10px 12px; border-radius: 10px; background: #ff5db118; border: 1px solid #ff5db144;
  color: #ffc8e0;
}
@keyframes launchCdPulse {
  0%, 100% { box-shadow: 0 0 40px #6c8cff33, inset 0 0 24px #ffffff08; }
  50% { box-shadow: 0 0 56px #ff5db144, inset 0 0 28px #ffffff12; }
}
@keyframes launchCdBlink { 50% { opacity: 0.25; } }

@keyframes officialLaunchShine {
  0% { transform: translateX(-30%) rotate(12deg); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(30%) rotate(12deg); opacity: 1; }
  80% { opacity: 0; }
  100% { transform: translateX(50%) rotate(12deg); opacity: 0; }
}

/* Aviso torneo programado (Inicio) ? compacto: 1 banner + CDs + CTA */
.tournament-promo-banner {
  position: relative;
  margin: 0 0 10px;
  padding: 10px 12px 12px;
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #ff6b3528 0%, #6c8cff22 50%, #ffd23d16 100%);
  border: 2px solid #ff8c4266;
  box-shadow: 0 0 0 1px #ffffff12 inset, 0 6px 24px #ff6b3533, 0 0 32px #6c8cff18;
  animation: tournamentPromoPulse 2.4s ease-in-out infinite;
}
.tournament-promo-banner--compact .tournament-promo-title {
  font-size: clamp(15px, 4.2vw, 18px);
  margin: 0 0 8px;
}
.tournament-promo-shine {
  position: absolute; inset: -40% -20%;
  background: linear-gradient(105deg, transparent 40%, #ffffff16 50%, transparent 60%);
  animation: officialLaunchShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
.tournament-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 9px; font-weight: 900; letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff8c42, #ffd23d);
  color: #1a0a14;
  box-shadow: 0 2px 10px #ff8c4266;
}
.tournament-promo-title {
  position: relative; z-index: 1;
  margin: 0; font-size: clamp(17px, 5vw, 24px); font-weight: 900;
  color: #fff; text-shadow: 0 2px 10px #000a;
}
.tournament-promo-sub {
  position: relative; z-index: 1;
  margin: 6px 0 14px; font-size: 12px; font-weight: 700;
  color: #e8ecff; line-height: 1.35;
}
.tournament-promo-rows {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}
.tournament-promo-row {
  padding: 8px 10px;
  border-radius: 10px;
  background: #00000040;
  border: 1px solid #ffffff1a;
  text-align: center;
}
.tournament-promo-row-fmt {
  margin: 0 0 2px;
  font-size: 13px; font-weight: 800; color: #fff;
}
.tournament-promo-row-meta {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 700; color: #e8ecff;
}
.tournament-promo-row-meta b { color: #fff; }
.tournament-promo-row-cta {
  margin: 0 0 2px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: #ffd23d;
  text-align: center;
}
.tournament-promo-banner--compact .launch-countdown-grid {
  gap: 2px;
  justify-content: center;
  margin: 0 auto;
}
.tournament-promo-banner--compact .launch-cd-cell { min-width: 36px; }
.tournament-promo-banner--compact .launch-cd-num {
  font-size: clamp(16px, 4.5vw, 22px);
  line-height: 1.1;
}
.tournament-promo-banner--compact .launch-cd-lbl { font-size: 8px; }
.tournament-promo-banner--compact .launch-cd-sep {
  font-size: clamp(14px, 3.5vw, 18px);
  padding-bottom: 10px;
}
.tournament-promo-banner--compact .tournament-promo-btn {
  width: auto;
  padding: 8px 22px;
  font-size: 13px;
}

/* Banners temporales del Inicio ? compactos (info esencial + CTA) */
.home-promo--compact {
  padding: 8px 10px 10px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
}
.home-promo--compact [class$="-promo-title"],
.home-promo--compact .shop-promo-home-title,
.home-promo--compact .rifa-result-title,
.home-promo--compact .incursion-promo-title,
.home-promo--compact .klaxruleta-promo-title,
.home-promo--compact .ranking-promo-title {
  margin: 2px 0 6px !important;
  font-size: clamp(14px, 3.8vw, 17px) !important;
}
.home-promo--compact [class$="-promo-badge"],
.home-promo--compact .shop-promo-home-badge,
.home-promo--compact .rifa-result-badge {
  margin: 0 0 2px !important;
  padding: 2px 8px !important;
  font-size: 9px !important;
}
.home-promo--compact [class$="-promo-event"],
.home-promo--compact .shop-promo-home-event,
.home-promo--compact .rifa-result-event,
.home-promo--compact .ranking-promo-event,
.home-promo--compact .incursion-promo-event {
  margin-top: 6px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}
.home-promo--compact [class$="-promo-cta"],
.home-promo--compact .shop-promo-home-cta,
.home-promo--compact .klaxruleta-promo-cta,
.home-promo--compact .ranking-promo-cta,
.home-promo--compact .incursion-promo-cta {
  margin: 4px 0 2px !important;
  font-size: 10px !important;
  text-align: center;
}
.home-promo--compact .launch-countdown-grid,
.home-promo--compact .shop-promo-home-grid {
  transform: scale(0.92);
  transform-origin: center top;
  margin: 0 auto 2px !important;
}
.home-promo--compact .launch-cd-cell { min-width: 34px; }
.home-promo--compact .launch-cd-num {
  font-size: clamp(15px, 4vw, 20px) !important;
  line-height: 1.1;
}
.home-promo--compact .launch-cd-lbl { font-size: 8px !important; }
.home-promo--compact .launch-cd-sep {
  font-size: clamp(13px, 3.2vw, 16px) !important;
  padding-bottom: 10px;
}
.home-promo--compact [class$="-promo-btn"],
.home-promo--compact .shop-promo-home-btn,
.home-promo--compact .rifa-result-btn,
.home-promo--compact .incursion-promo-btn,
.home-promo--compact .ranking-promo-actions .btn {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 7px 22px !important;
  font-size: 13px !important;
}
.home-promo--compact .ranking-promo-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px !important;
}
.home-promo--compact [class$="-promo-hero"],
.home-promo--compact .shop-promo-home-hero,
.home-promo--compact .rifa-result-hero {
  margin: 0 auto 4px !important;
}
.home-promo--compact [class$="-promo-format"],
.home-promo--compact .shop-promo-home-format,
.home-promo--compact .rifa-result-prize,
.home-promo--compact .incursion-promo-format {
  margin: 0 0 2px !important;
  font-size: 12px !important;
  line-height: 1.25;
}
.home-promo--compact .incursion-promo-timer,
.home-promo--compact .home-promo-cd-timer {
  font-size: 18px !important;
  margin: 0 !important;
}

/* Countdown unificado HH:MM:SS en todos los banners promo (home / eventos) */
.home-promo-cd-timer {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  color: #fecaca;
  text-shadow: 0 0 16px #ef444488, 0 2px 8px #000c;
  animation: homePromoCdTimerGlow 1.6s ease-in-out infinite;
}
@keyframes homePromoCdTimerGlow {
  0%, 100% { text-shadow: 0 0 12px #ef444455, 0 2px 8px #000c; }
  50% { text-shadow: 0 0 24px #fecacacc, 0 0 8px #ffd23d66, 0 2px 8px #000c; }
}
.tournament-promo-banner .home-promo-cd-timer {
  color: #ffd23d;
  text-shadow: 0 0 16px #ffd23d88, 0 2px 8px #000c;
}
.auction-promo-banner .home-promo-cd-timer,
.auction-card .home-promo-cd-timer {
  color: #c4b5fd;
  text-shadow: 0 0 16px #a78bfa88, 0 2px 8px #000c;
}
.blind-auction-promo-banner .home-promo-cd-timer,
.blind-auction-card .home-promo-cd-timer {
  color: #67e8f9;
  text-shadow: 0 0 16px #22d3ee88, 0 2px 8px #000c;
}
.rifa-promo-banner .home-promo-cd-timer {
  color: #fbbf24;
  text-shadow: 0 0 16px #fbbf2488, 0 2px 8px #000c;
}
.klaxruleta-promo-banner .home-promo-cd-timer {
  color: #f0abfc;
  text-shadow: 0 0 16px #e879f988, 0 2px 8px #000c;
}
.ruins-event-promo-banner .home-promo-cd-timer,
.ruins-home-banner .home-promo-cd-timer {
  color: #86efac;
  text-shadow: 0 0 16px #22c55e88, 0 2px 8px #000c;
}
.shop-promo-home-banner .home-promo-cd-timer {
  color: #fdba74;
  text-shadow: 0 0 16px #fb923c88, 0 2px 8px #000c;
}
.ranking-promo-banner .home-promo-cd-timer {
  color: #ffd23d;
  text-shadow: 0 0 16px #ffd23d88, 0 2px 8px #000c;
}
.bomber-promo-banner .home-promo-cd-timer {
  color: #fda4af;
  text-shadow: 0 0 16px #fb718588, 0 2px 8px #000c;
}
@media (prefers-reduced-motion: reduce) {
  .home-promo-cd-timer { animation: none !important; }
}
.home-promo--compact .tournament-promo-shine,
.home-promo--compact .auction-promo-shine,
.home-promo--compact .blind-auction-promo-shine,
.home-promo--compact .rifa-promo-shine,
.home-promo--compact .rifa-result-shine,
.home-promo--compact .klaxruleta-promo-shine,
.home-promo--compact .shop-promo-home-shine,
.home-promo--compact .ranking-promo-shine,
.home-promo--compact .incursion-promo-shine,
.home-promo--compact .incursion-promo-shine--2,
.home-promo--compact .ruins-home-shine,
.home-promo--compact .ruins-home-glow {
  display: none !important;
}
.home-promo--compact.ruins-home-banner {
  animation: none;
  margin-bottom: 0 !important;
}
.home-promo--compact .ruins-home-title {
  margin: 2px 0 6px !important;
  font-size: clamp(14px, 3.8vw, 17px) !important;
}
.home-promo--compact .ruins-home-sub,
.home-promo--compact .ruins-home-leader,
.home-promo--compact .ruins-home-hint {
  font-size: 11px !important;
  margin: 0 0 4px !important;
}
.home-promo--compact .ruins-home-admin-extra {
  margin: 0 auto 6px !important;
  padding: 6px 10px !important;
  max-width: none;
}
.home-promo--compact .ruins-home-admin-extra__lbl {
  font-size: 9px !important;
}
.home-promo--compact .ruins-home-admin-extra__vals {
  font-size: 11px !important;
  gap: 4px 10px;
}
.home-promo--compact .ruins-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
}
.home-promo--compact .ruins-home-btn,
.home-promo--compact .ruins-home-rank-btn {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  margin-top: 8px !important;
}
.home-promo--compact.incursion-promo-banner {
  animation: none;
  box-shadow: 0 0 0 1px #ffffff14 inset, 0 4px 16px #ef444433;
}

/* Legendaria: mismo hueco de banner que Incursi?n, con brillo p?rpura/oro */
.legendary-promo-banner {
  background: linear-gradient(145deg, #6b21a880 0%, #7c3aed45 40%, #f59e0b28 100%) !important;
  border: 2px solid #c084fc99 !important;
  box-shadow:
    0 0 0 1px #ffffff22 inset,
    0 8px 28px #7c3aed55,
    0 0 48px #f59e0b33,
    0 0 20px #e9d5ff44 !important;
  animation: legendaryPromoGlow 2s ease-in-out infinite !important;
}
@keyframes legendaryPromoGlow {
  0%, 100% {
    border-color: #c084fc88;
    box-shadow:
      0 0 0 1px #ffffff18 inset,
      0 8px 28px #7c3aed44,
      0 0 40px #a855f733,
      0 0 16px #fbbf2440;
  }
  50% {
    border-color: #fde68acc;
    box-shadow:
      0 0 0 1px #ffffff30 inset,
      0 12px 40px #7c3aed77,
      0 0 64px #f59e0b55,
      0 0 28px #e9d5ff66;
  }
}
.legendary-promo-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 30%, #fbbf2433 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, #a855f744 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: legendaryPromoPulse 2.8s ease-in-out infinite;
}
@keyframes legendaryPromoPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.legendary-promo-shine {
  position: absolute;
  inset: -60% -40%;
  background: linear-gradient(
    105deg,
    transparent 36%,
    #ffffff10 44%,
    #fde68a66 50%,
    #e9d5ff55 53%,
    #ffffff10 58%,
    transparent 64%
  );
  animation: legendaryPromoShine 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.legendary-promo-shine--2 {
  animation-delay: 1.2s;
  animation-duration: 3s;
  opacity: 0.9;
  background: linear-gradient(
    118deg,
    transparent 40%,
    #c084fc44 47%,
    #ffffff33 50%,
    transparent 58%
  );
}
@keyframes legendaryPromoShine {
  0% { transform: translateX(-55%) rotate(10deg); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translateX(55%) rotate(10deg); opacity: 1; }
  88% { opacity: 0; }
  100% { transform: translateX(70%) rotate(10deg); opacity: 0; }
}
.legendary-promo-badge {
  background: #7c3aed55 !important;
  color: #fde68a !important;
  border-color: #c084fc88 !important;
  box-shadow: 0 0 16px #a855f688 !important;
}
.legendary-promo-title {
  text-shadow: 0 0 22px #a855f688, 0 0 12px #fbbf2466, 0 2px 8px #0008 !important;
}
.legendary-promo-btn {
  box-shadow: 0 0 18px #a855f666 !important;
}

/* Compact home: mantener brillo Legendaria (las dem?s incursiones lo apagan) */
.home-promo--compact.legendary-promo-banner {
  animation: legendaryPromoGlow 2s ease-in-out infinite !important;
  box-shadow:
    0 0 0 1px #ffffff22 inset,
    0 6px 22px #7c3aed55,
    0 0 36px #f59e0b40 !important;
  overflow: hidden !important;
}
.home-promo--compact .legendary-promo-shine,
.home-promo--compact .legendary-promo-shine--2,
.home-promo--compact .legendary-promo-glow {
  display: block !important;
}
.home-promo--compact .legendary-promo-shine,
.home-promo--compact .legendary-promo-shine--2 {
  inset: -25% -15%;
}
.home-promo--compact .legendary-promo-glow {
  inset: -10%;
}

.legendary-promo-boss {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 2px;
  flex: 1 1 auto;
  min-height: 0;
}
.legendary-promo-boss-art {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 12px #c084fc88) drop-shadow(0 4px 10px #0008);
}
.legendary-promo-boss-name {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #f5e9ff;
  text-shadow: 0 1px 6px #000a;
}
.home-promo--compact .legendary-promo-boss-name {
  font-size: 11px !important;
}
.incursion-boss-art {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 14px #a855f666);
}

/* PC: 1/2/3 banners a ancho completo; 4+ ? 3 por fila (m?vil en columna) */
@media (min-width: 768px) {
  .home-temporal-events-heading,
  .home-temporal-events-divider {
    padding-left: 0;
    padding-right: 0;
  }
  .home-temporal-events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
    align-items: stretch;
    justify-items: stretch;
  }
  .home-temporal-events-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-temporal-events-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-temporal-events-grid[data-count="3"],
  .home-temporal-events-grid[data-count="4"],
  .home-temporal-events-grid[data-count="5"],
  .home-temporal-events-grid[data-count="6"],
  .home-temporal-events-grid[data-count="7"],
  .home-temporal-events-grid[data-count="8"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-temporal-events-grid > .home-promo--compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    box-sizing: border-box;
  }
  /* Legendaria: el shine/glow debe quedar recortado al card (en PC overflow:visible lo sacaba) */
  .home-temporal-events-grid > .home-promo--compact.legendary-promo-banner {
    overflow: hidden;
  }
  .home-temporal-events-grid > .home-promo--compact > [class$="-promo-btn"],
  .home-temporal-events-grid > .home-promo--compact > .shop-promo-home-btn,
  .home-temporal-events-grid > .home-promo--compact > .rifa-result-btn,
  .home-temporal-events-grid > .home-promo--compact > .incursion-promo-btn,
  .home-temporal-events-grid > .home-promo--compact > .ranking-promo-actions,
  .home-temporal-events-grid > .home-promo--compact > .ruins-home-actions {
    margin-top: auto !important;
  }
  .home-temporal-events-grid .launch-countdown-grid,
  .home-temporal-events-grid .shop-promo-home-grid {
    transform: scale(0.88);
    transform-origin: center top;
  }
  .home-temporal-events-grid .launch-cd-cell { min-width: 28px; }
  .home-temporal-events-grid .tournament-promo-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
  }
  .home-temporal-events-grid .tournament-promo-row,
  .home-temporal-events-grid [class$="-promo-event"],
  .home-temporal-events-grid .shop-promo-home-event,
  .home-temporal-events-grid .rifa-result-event,
  .home-temporal-events-grid .incursion-promo-event {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
}

/* legacy (por si queda markup antiguo) */
.tournament-promo-events {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px);
  margin: 0 0 16px;
}
.tournament-promo-event {
  position: relative; z-index: 1;
  margin: 0;
  padding: clamp(14px, 3.5vw, 18px) clamp(12px, 3vw, 16px);
  border-radius: 14px;
  background: #00000048;
  border: 1px solid #ffffff28;
  box-shadow: 0 4px 18px #00000055, inset 0 1px 0 #ffffff12;
}
.tournament-promo-event + .tournament-promo-event {
  margin-top: 0;
}
.tournament-promo-format {
  margin: 0 0 8px; font-size: 15px; font-weight: 900; color: #fff; text-align: center;
}
.tourney-promo-meta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 0 0 8px;
}
.tourney-promo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #e8ecff;
  background: #ffffff10; border: 1px solid #ffffff1c;
}
.tourney-promo-chip b { color: #fff; }
.tournament-promo-cta {
  margin: 0 0 4px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: #ffd23d;
}
.tournament-promo-grid { position: relative; z-index: 1; }
.tournament-promo-num { color: #ffd23d; text-shadow: 0 2px 8px #000c, 0 0 16px #ffd23d88; }
.tournament-promo-sep { color: #ffd23d; animation: launchCdBlink 1s step-end infinite; }
.tournament-promo-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.tournament-promo-btn {
  position: relative; z-index: 1;
  margin-top: 12px; width: 100%; max-width: 280px;
}
@keyframes tournamentPromoPulse {
  0%, 100% { border-color: #ff8c4266; box-shadow: 0 0 0 1px #ffffff12 inset, 0 8px 32px #ff6b3544; }
  50% { border-color: #ffd23d88; box-shadow: 0 0 0 1px #ffffff18 inset, 0 10px 36px #ffd23d44; }
}

/* Subasta ? banner Inicio (estilo torneo, tono violeta) */
.auction-promo-banner {
  position: relative;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #7c3aed28 0%, #a78bfa22 50%, #c4b5fd12 100%);
  border: 2px solid #a78bfa66;
  animation: auctionPromoPulse 3s ease-in-out infinite;
}
.auction-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff12 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.auction-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #a78bfa33; color: #e9d5ff;
  border: 1px solid #a78bfa55;
}
.auction-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(17px, 4vw, 22px); font-weight: 900;
}
.auction-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #ffffffbb;
}
.auction-promo-event {
  position: relative; z-index: 1;
  margin-top: 8px; padding: 8px 10px;
  border-radius: 12px; background: #00000033;
  border: 1px solid #ffffff15;
}
.auction-promo-event + .auction-promo-event { margin-top: 8px; }
.auction-promo-hero {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-end;
  margin: 2px auto 6px;
  filter: drop-shadow(0 8px 20px #000a) drop-shadow(0 0 22px #a78bfa66);
  animation: auctionHeroFloat 3.2s ease-in-out infinite;
}
.auction-promo-hero img,
.auction-promo-hero svg { width: clamp(104px, 34vw, 140px); height: auto; }
@keyframes auctionHeroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}
.auction-promo-format { margin: 0 0 4px; font-size: 14px; }
.auction-promo-cta {
  margin: 6px 0 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #c4b5fd;
}
.auction-promo-grid { position: relative; z-index: 1; }
.auction-promo-num { color: #c4b5fd; text-shadow: 0 2px 8px #000c, 0 0 16px #a78bfa88; }
.auction-promo-sep { color: #c4b5fd; animation: launchCdBlink 1s step-end infinite; }
.auction-promo-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.auction-promo-btn {
  position: relative; z-index: 1;
  margin-top: 12px; width: 100%; max-width: 280px;
}

/* Subasta CIEGA ? banner Inicio (estilo id?ntico al de subasta, tono cian, totalmente aparte) */
.blind-auction-promo-banner {
  position: relative;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #0891b228 0%, #22d3ee22 50%, #67e8f912 100%);
  border: 2px solid #22d3ee66;
  animation: blindAuctionPromoPulse 3s ease-in-out infinite;
}
.blind-auction-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff12 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.blind-auction-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #22d3ee33; color: #cffafe;
  border: 1px solid #22d3ee55;
}
.blind-auction-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(17px, 4vw, 22px); font-weight: 900;
}
.blind-auction-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #ffffffbb;
}
.blind-auction-promo-event {
  position: relative; z-index: 1;
  margin-top: 8px; padding: 8px 10px;
  border-radius: 12px; background: #00000033;
  border: 1px solid #ffffff15;
}
.blind-auction-promo-event + .blind-auction-promo-event { margin-top: 8px; }
.blind-auction-promo-hero {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-end;
  margin: 2px auto 6px;
  filter: drop-shadow(0 8px 20px #000a) drop-shadow(0 0 22px #22d3ee66);
  animation: blindAuctionHeroFloat 3.2s ease-in-out infinite;
}
.blind-auction-promo-hero img,
.blind-auction-promo-hero svg { width: clamp(104px, 34vw, 140px); height: auto; }
@keyframes blindAuctionHeroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}
.blind-auction-promo-format { margin: 0 0 4px; font-size: 14px; }
.blind-auction-promo-cta {
  margin: 6px 0 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #67e8f9;
}
.blind-auction-promo-grid { position: relative; z-index: 1; }
.blind-auction-promo-num { color: #67e8f9; text-shadow: 0 2px 8px #000c, 0 0 16px #22d3ee88; }
.blind-auction-promo-sep { color: #67e8f9; animation: launchCdBlink 1s step-end infinite; }
.blind-auction-promo-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.blind-auction-promo-btn {
  position: relative; z-index: 1;
  margin-top: 12px; width: 100%; max-width: 280px;
}
.blind-auction-winners-pill {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: #facc1533; color: #fde68a;
  border: 1px solid #facc1555;
}

/* Rifa ? banner Inicio (tono ?mbar/dorado) */
.rifa-promo-banner {
  position: relative;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #b4530928 0%, #fbbf2422 50%, #fde68a12 100%);
  border: 2px solid #fbbf2466;
  animation: rifaPromoPulse 3s ease-in-out infinite;
}
@keyframes rifaPromoPulse {
  0%, 100% { box-shadow: 0 0 0 0 #fbbf2400; }
  50% { box-shadow: 0 0 28px 2px #fbbf2433; }
}
.rifa-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff12 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.rifa-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #fbbf2433; color: #fef3c7;
  border: 1px solid #fbbf2455;
}
.rifa-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(17px, 4vw, 22px); font-weight: 900;
}
.rifa-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #ffffffbb;
}
.rifa-promo-event {
  position: relative; z-index: 1;
  margin-top: 8px; padding: 8px 10px;
  border-radius: 12px; background: #00000033;
  border: 1px solid #ffffff15;
}
.rifa-promo-event + .rifa-promo-event { margin-top: 8px; }
.rifa-promo-hero {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-end;
  margin: 2px auto 6px;
  filter: drop-shadow(0 8px 20px #000a) drop-shadow(0 0 22px #fbbf2466);
  animation: rifaHeroFloat 3.2s ease-in-out infinite;
}
.rifa-promo-hero img,
.rifa-promo-hero svg { width: clamp(104px, 34vw, 140px); height: auto; }
@keyframes rifaHeroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}
.rifa-promo-prizes {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: #facc1533; color: #fde68a;
  border: 1px solid #facc1555;
}
.rifa-promo-format { margin: 0 0 4px; font-size: 14px; }
.rifa-promo-cta {
  margin: 6px 0 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #fbbf24;
}
.rifa-promo-grid { position: relative; z-index: 1; }
.rifa-promo-num { color: #fbbf24; text-shadow: 0 2px 8px #000c, 0 0 16px #fbbf2488; }
.rifa-promo-sep { color: #fbbf24; animation: launchCdBlink 1s step-end infinite; }
.rifa-promo-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.rifa-promo-btn {
  position: relative; z-index: 1;
  margin-top: 12px; width: 100%; max-width: 280px;
}

/* Rifa ? banner de ganadores (Inicio + p?gina) */
.rifa-result-banner,
.rifa-result-page-card {
  position: relative;
  padding: clamp(14px, 3.2vw, 22px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #fde68a44 0%, transparent 55%),
    linear-gradient(155deg, #78350f55 0%, #b4530933 40%, #fbbf2418 100%);
  border: 2px solid #facc1588;
  box-shadow: 0 0 32px #fbbf2428, inset 0 1px 0 #ffffff22;
  animation: rifaResultGlow 3.4s ease-in-out infinite;
}
@keyframes rifaResultGlow {
  0%, 100% { box-shadow: 0 0 18px #fbbf2420, inset 0 1px 0 #ffffff18; }
  50% { box-shadow: 0 0 36px #facc1544, inset 0 1px 0 #ffffff28; }
}
.rifa-result-shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, #ffffff18 50%, transparent 65%);
  animation: launchShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.rifa-result-confetti {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 18%, #fbbf24 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, #fde68a 0 2px, transparent 3px),
    radial-gradient(circle at 28% 78%, #f59e0b 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, #fff7ed 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 48% 12%, #facc15 0 1.5px, transparent 2.5px);
  animation: rifaConfettiDrift 6s ease-in-out infinite;
}
@keyframes rifaConfettiDrift {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(4px); opacity: 0.7; }
}
.rifa-result-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.08em;
  background: linear-gradient(90deg, #fbbf2444, #fde68a33);
  color: #fef3c7;
  border: 1px solid #facc1566;
}
.rifa-result-title {
  position: relative; z-index: 1;
  margin: 4px 0 6px;
  font-size: clamp(18px, 4.4vw, 24px);
  font-weight: 900;
  background: linear-gradient(180deg, #fffbeb, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rifa-result-sub {
  position: relative; z-index: 1;
  margin: 0 0 10px; font-size: 12px; color: #ffffffbb;
}
.rifa-result-event {
  position: relative; z-index: 1;
  margin-top: 10px; padding: 12px 10px;
  border-radius: 14px;
  background: #00000040;
  border: 1px solid #fbbf2433;
}
.rifa-result-event + .rifa-result-event { margin-top: 10px; }
.rifa-result-hero {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-end;
  margin: 4px auto 8px;
  filter: drop-shadow(0 8px 22px #000a) drop-shadow(0 0 24px #facc1566);
  animation: rifaHeroFloat 3s ease-in-out infinite;
}
.rifa-result-hero img,
.rifa-result-hero svg { width: clamp(108px, 36vw, 148px); height: auto; }
.rifa-result-prize {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 14px;
}
.rifa-result-winners-label {
  position: relative; z-index: 1;
  margin: 0 0 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fde68a;
}
.rifa-result-winner-name {
  position: relative; z-index: 1;
  margin: 0;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 900;
  color: #fef3c7;
  text-shadow: 0 2px 12px #fbbf2466;
  animation: rifaWinnerPop 0.8s ease-out both;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
}
.rifa-result-ticket {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fbbf2430;
  border: 1px solid #fbbf2466;
  color: #fde68a;
  letter-spacing: 0.02em;
}
.rifa-result-winner-list .rifa-result-ticket {
  font-size: 12px;
  margin-left: 4px;
}
@keyframes rifaWinnerPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.rifa-result-winner-list {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.rifa-result-winner-list li {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fbbf2418;
  border: 1px solid #fbbf2433;
  font-size: 15px; font-weight: 800; color: #fef3c7;
}
.rifa-result-rank {
  font-size: 11px; font-weight: 900;
  color: #fbbf24; opacity: 0.9;
}
.rifa-result-btn {
  position: relative; z-index: 1;
  margin-top: 14px; width: 100%; max-width: 280px;
}
.rifa-result-page-title {
  position: relative; z-index: 1;
  margin: 8px 0 6px; font-size: 16px; font-weight: 800;
}
.rifa-result-page-card .rifa-result-badge { margin-top: 0; }

/* Incursi?n ? banner Inicio (tono rojo/carmes?, destacado) */
.incursion-promo-banner {
  position: relative;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #dc262640 0%, #ef444430 45%, #f8717120 100%);
  border: 2px solid #f8717188;
  box-shadow:
    0 0 0 1px #ffffff18 inset,
    0 8px 28px #ef444444,
    0 0 40px #ef444433;
  animation: incursionPromoGlow 2.2s ease-in-out infinite;
}
@keyframes incursionPromoGlow {
  0%, 100% {
    border-color: #f8717177;
    box-shadow:
      0 0 0 1px #ffffff14 inset,
      0 8px 28px #ef444440,
      0 0 36px #ef444428;
  }
  50% {
    border-color: #fecacaaa;
    box-shadow:
      0 0 0 1px #ffffff28 inset,
      0 12px 36px #ef444466,
      0 0 56px #f8717155,
      0 0 20px #ffd23d44;
  }
}
.incursion-promo-shine {
  position: absolute;
  inset: -60% -40%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    #ffffff08 44%,
    #ffffff35 50%,
    #fecaca45 52%,
    #ffffff08 58%,
    transparent 64%
  );
  animation: incursionPromoShine 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.incursion-promo-shine--2 {
  animation-delay: 1.3s;
  animation-duration: 3.2s;
  opacity: 0.85;
  background: linear-gradient(
    115deg,
    transparent 42%,
    #ffd23d22 48%,
    #ffffff20 50%,
    transparent 56%
  );
}
@keyframes incursionPromoShine {
  0% { transform: translateX(-55%) rotate(10deg); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translateX(55%) rotate(10deg); opacity: 1; }
  88% { opacity: 0; }
  100% { transform: translateX(70%) rotate(10deg); opacity: 0; }
}
.incursion-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #ef444444; color: #fecaca;
  border: 1px solid #ef444466;
  box-shadow: 0 0 14px #ef444466;
  animation: incursionPromoBadgePulse 2s ease-in-out infinite;
}
@keyframes incursionPromoBadgePulse {
  0%, 100% { box-shadow: 0 0 10px #ef444444; transform: scale(1); }
  50% { box-shadow: 0 0 18px #ef444488; transform: scale(1.03); }
}
.incursion-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(17px, 4vw, 22px); font-weight: 900;
  text-shadow: 0 0 20px #ef444466, 0 2px 8px #0008;
}
.incursion-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #ffffffbb;
}
.incursion-promo-event {
  position: relative; z-index: 1;
  margin-top: 8px; padding: 8px 10px;
  border-radius: 12px; background: #00000044;
  border: 1px solid #ffffff22;
  box-shadow: 0 0 16px #ef444422 inset;
}
.incursion-promo-format { margin: 0 0 4px; font-size: 14px; }
.incursion-promo-cta {
  margin: 6px 0 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #fca5a5;
}
.incursion-promo-timer {
  margin: 0; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: #fecaca;
  text-shadow: 0 0 16px #ef444488, 0 2px 8px #000c;
  animation: incursionPromoTimerGlow 1.6s ease-in-out infinite;
}
@keyframes incursionPromoTimerGlow {
  0%, 100% { text-shadow: 0 0 12px #ef444455, 0 2px 8px #000c; }
  50% { text-shadow: 0 0 24px #fecacacc, 0 0 8px #ffd23d66, 0 2px 8px #000c; }
}
.incursion-promo-btn {
  position: relative; z-index: 1;
  margin-top: 12px; width: 100%; max-width: 280px;
  box-shadow: 0 0 20px #22c55e55;
  animation: incursionPromoBtnGlow 2.4s ease-in-out infinite;
}
@keyframes incursionPromoBtnGlow {
  0%, 100% { box-shadow: 0 0 14px #22c55e44; }
  50% { box-shadow: 0 0 26px #22c55e77, 0 0 12px #ffffff22; }
}
@media (prefers-reduced-motion: reduce) {
  .incursion-promo-banner,
  .incursion-promo-shine,
  .incursion-promo-badge,
  .incursion-promo-timer,
  .incursion-promo-btn,
  .legendary-promo-banner,
  .legendary-promo-shine,
  .legendary-promo-glow,
  .legendary-promo-badge,
  .legendary-promo-btn {
    animation: none !important;
  }
}

/* Incursi?n ? pantalla */
.incursion-admin-block {
  margin-bottom: 12px;
  border: 1px solid #fbbf2433;
  background: linear-gradient(135deg, #fbbf2408 0%, transparent 60%);
}
.incursion-admin-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ffffff12;
}
.incursion-admin-events { display: flex; flex-direction: column; gap: 8px; }
.incursion-admin-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ffffff14;
  background: #00000028;
}
.incursion-admin-event-meta { min-width: 0; }
.incursion-admin-schedule-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.incursion-admin-schedule { min-width: 620px; font-size: 12px; }
.incursion-admin-schedule th { font-size: 11px; white-space: nowrap; }
.incursion-admin-schedule td { vertical-align: middle; }
.incursion-reward-tiers { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.incursion-reward-tier {
  border-radius: 12px;
  border: 1px solid #ffffff12;
  background: #00000022;
  overflow: visible;
}
.incursion-reward-tier > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
}
.incursion-reward-tier > summary::-webkit-details-marker { display: none; }
.incursion-reward-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.incursion-reward-tier-title { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.incursion-reward-rows { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.incursion-reward-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.incursion-reward-on { display: flex; align-items: center; }
.incursion-reward-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.incursion-reward-item .item-picker { flex: 1; min-width: 0; }
.incursion-reward-row select.inc-drop-item { min-width: 0; flex: 1; font-size: 12px; }
.item-picker { position: relative; min-width: 0; }
.item-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #ffffff18;
  background: var(--card2);
  color: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.item-picker-ic { flex-shrink: 0; width: 22px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.item-picker-ic .item-icon--wide { width: auto; max-width: 40px; height: 18px; object-fit: contain; }
.item-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-picker-caret { flex-shrink: 0; opacity: 0.55; font-size: 10px; }
.item-picker-menu {
  display: none;
  position: fixed;
  z-index: 10000;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid #ffffff22;
  background: var(--card);
  box-shadow: 0 8px 24px #00000055;
  padding: 4px;
}
.item-picker--open { z-index: 10001; }
.item-picker--open .item-picker-menu { display: block; }
.incursion-top-rewards {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ffffff10;
}
.incursion-top-rank {
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid #ffffff10;
  background: #00000018;
  overflow: visible;
}
.incursion-top-rank > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.incursion-top-rank > summary::-webkit-details-marker { display: none; }
.incursion-top-rank--flat {
  padding: 6px 8px 4px;
}
.incursion-top-rank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 4px;
}
.incursion-top-rank .incursion-reward-rows { padding: 0 0 6px; }
.incursion-top-rank--flat .incursion-reward-rows { padding: 0; }
.incursion-rank-editors { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.incursion-rank-actions { display: inline-flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.incursion-reward-rank-block { margin-top: 8px; }
.incursion-reward-rank-label { font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.wiki-incursion-prize { white-space: nowrap; }
.admin-drop-rows, #adminDropForm, .incursion-admin-section, #incursionAdminBody { overflow: visible; }
.item-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.item-picker-opt:hover, .item-picker-opt.selected { background: #ffffff12; }
.incursion-reward-fields {
  display: flex;
  gap: 6px;
  align-items: center;
}
.incursion-reward-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--muted);
}
.incursion-reward-field input { width: 52px; }
.incursion-admin-pager { flex-wrap: wrap; gap: 8px; }
.admin-drop-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.admin-drop-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.admin-drop-row .admin-drop-preview {
  flex-shrink: 0;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-drop-row select.admin-drop-item { min-width: 0; flex: 1; font-size: 12px; }
@media (max-width: 640px) {
  .admin-drop-row { grid-template-columns: auto 1fr auto; }
  .admin-drop-row .incursion-reward-item { grid-column: 1 / -1; }
}
.admin-item-select-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.admin-item-select-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--card2);
  font-size: 13px;
  min-height: 34px;
}
.admin-item-select-preview .item-icon { flex-shrink: 0; }
@media (max-width: 640px) {
  .incursion-reward-row {
    grid-template-columns: auto 1fr auto;
  }
  .incursion-reward-fields { grid-column: 2 / -1; }
  .incursion-reward-item { grid-column: 1 / -1; }
  .incursion-admin-event-row { flex-direction: column; align-items: stretch; }
}
.incursion-event-card { margin-bottom: 12px; }

.incursion-event-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  margin: 12px 0 2px;
}
.incursion-event-countdown-label {
  font-size: 12px;
  color: var(--muted, #9ca3af);
  letter-spacing: 0.02em;
}
.incursion-event-countdown-time {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #fecaca;
  text-shadow: 0 0 14px #ef444466, 0 2px 6px #000a;
}

.incursion-event-boss {
  gap: 12px;
  margin-top: 10px;
  align-items: center;
}
.incursion-event-boss-info {
  flex: 1;
  min-width: 160px;
}

.legendary-my-klax {
  font-size: 12px;
  margin-top: 20px;
}

.legendary-jackpot-banner {
  padding: 10px;
  margin-bottom: 12px;
  background: #2a1a3a;
  text-align: center;
}
.legendary-jackpot-pending {
  font-size: 11px;
  margin-left: 8px;
}

/* Legendary raid live damage ranking ? name / dmg / pct (not plain white) */
.legendary-dmg-top {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2a1540aa, #1a1028aa);
  border: 1px solid #a855f733;
  width: fit-content;
  max-width: 100%;
}
.legendary-dmg-top-title {
  display: block;
  font-size: 12px;
  color: #e9d5ff;
  letter-spacing: 0.02em;
}
.legendary-dmg-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 14px 0 0;
  font-size: 12px;
  max-height: 260px;
  overflow: auto;
  scrollbar-gutter: stable;
}
.legendary-dmg-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 4px 8px 4px 2px;
  border-bottom: 1px solid #ffffff0a;
}
.legendary-dmg-row:last-child { border-bottom: none; }
.legendary-dmg-rank {
  flex: 0 0 1.6em;
  text-align: center;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}
.legendary-dmg-main {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1;
}
.legendary-dmg-name {
  flex: 0 1 11em;
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3e8ff;
  font-weight: 600;
}
.legendary-dmg-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  /* ~15 espacios entre el nombre y da�o/% */
  margin-left: 15ch;
  white-space: nowrap;
}
.legendary-dmg-value {
  min-width: 5.5em;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
  text-shadow: 0 0 10px #f59e0b55;
}
.legendary-dmg-pct {
  min-width: 4.2em;
  padding-right: 4px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #67e8f9;
  text-shadow: 0 0 8px #22d3ee44;
}
.legendary-dmg-value--mine {
  color: #fcd34d;
}
.legendary-dmg-row--top1 .legendary-dmg-value {
  color: #fde68a;
  text-shadow: 0 0 12px #fbbf2488;
}
.legendary-dmg-row--top1 .legendary-dmg-pct { color: #a5f3fc; }
.legendary-dmg-row--top1 .legendary-dmg-name { color: #fef3c7; }
.legendary-dmg-row--top2 .legendary-dmg-value { color: #e9d5ff; text-shadow: 0 0 8px #a855f755; }
.legendary-dmg-row--top2 .legendary-dmg-pct { color: #c4b5fd; }
.legendary-dmg-row--top3 .legendary-dmg-value { color: #fdba74; text-shadow: none; }
.legendary-dmg-row--top3 .legendary-dmg-pct { color: #7dd3fc; }

/* PC: center boss + live damage block; keep damage box content-width */
@media (min-width: 768px) {
  .incursion-event-countdown {
    margin: 14px 0 6px;
  }
  .incursion-event-countdown-time {
    font-size: 28px;
  }
  .incursion-event-boss {
    justify-content: center;
  }
  .incursion-event-boss-info {
    flex: 0 1 auto;
  }
  .incursion-event-card .legendary-dmg-top {
    margin-left: auto;
    margin-right: auto;
  }
  .incursion-event-card .legendary-my-klax {
    text-align: center;
  }
  .legendary-jackpot-banner {
    text-align: center;
  }
}
/* Movil: nombre completo a la izq.; dano y % a la derecha */
@media (max-width: 767px) {
  .legendary-dmg-top {
    width: 100%;
  }
  .legendary-dmg-main {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .legendary-dmg-name {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
  }
  .legendary-dmg-stats {
    margin-left: auto;
    width: auto;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 4px;
  }
  .legendary-dmg-value,
  .legendary-dmg-pct {
    min-width: 0;
    text-align: right;
  }
}

.incursion-history-block { margin-top: 12px; }
.incursion-history-title { font-size: 12px !important; margin: 0 0 6px !important; }
.incursion-history-list { display: flex; flex-direction: column; gap: 4px; }
.incursion-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid #ffffff0d;
  font-size: 11px;
}
.incursion-history-row-main {
  flex: 1;
  min-width: 0;
}
.incursion-history-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.incursion-history-row-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.incursion-history-row-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
  font-size: 10px;
}
.incursion-history-row-when { opacity: 0.85; }
.incursion-history-loot-btn {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px !important;
  min-height: 0;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.incursion-history-pager { margin-top: 6px; align-items: center; font-size: 10px; }
.incursion-history-card { padding: 12px 14px; }
.incursion-history-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.incursion-history-body {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.incursion-result-modal { max-width: 520px; }
.incursion-result-hero { text-align: center; margin-bottom: 12px; }
.incursion-result-kicker { margin: 0; font-size: 12px; color: var(--muted); }
.incursion-result-title { margin: 6px 0 10px; font-size: 1.25rem; }
.incursion-result-boss { display: flex; justify-content: center; margin: 8px 0; }
.incursion-result-boss-name { margin: 0; font-size: 14px; }
.incursion-result-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.incursion-result-tbl { font-size: 12px; min-width: 420px; }
.incursion-result-tbl tr.is-me { background: #22c55e14; }
.incursion-result-tbl tr.incursion-result-noloot { opacity: 0.85; }
.incursion-result-reward-line { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.incursion-result-myloot {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #22c55e18; border: 1px solid #22c55e44; font-size: 12px;
}
.incursion-event-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.incursion-tier-pill.incursion-tier-explorador { background: #22c55e33; color: #86efac; }
.incursion-tier-pill.incursion-tier-elite { background: #3b82f633; color: #93c5fd; }
.incursion-tier-pill.incursion-tier-epica { background: #a855f733; color: #d8b4fe; }
.incursion-boss-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.incursion-boss-meta { flex: 1; min-width: 160px; }
.incursion-boss-meta--active { margin-top: 10px; }

.incursion-battle-arena {
  position: relative;
  min-height: 196px;
  margin: 4px 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ef444433;
  background: #120606;
  box-shadow: inset 0 0 40px #ef444418;
}
.incursion-battle-arena--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 160px;
}
.incursion-battle-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 82% 42%, #7f1d1d55 0%, transparent 62%),
    radial-gradient(ellipse 40% 50% at 18% 72%, #1e1b4b44 0%, transparent 55%),
    linear-gradient(180deg, #0a0505 0%, #1a0a0a 55%, #0d0505 100%);
  pointer-events: none;
}
.incursion-battle-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, transparent, #00000066);
  pointer-events: none;
}
.incursion-battle-party {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--bf-party-w, 58%); padding: 10px 8px 12px 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  z-index: 2;
}
.incursion-battle-party-label {
  margin: 0 0 6px; font-size: 10px; font-weight: 700;
  color: #fca5a5cc; text-transform: uppercase; letter-spacing: 0.04em;
}
.incursion-battle-fighters {
  display: grid;
  grid-template-columns: repeat(var(--bf-cols, 4), var(--bf-cell, 52px));
  gap: var(--bf-gap, 6px);
  align-content: end;
  justify-content: start;
}
.incursion-battle-fighter {
  position: relative;
  width: var(--bf-cell, 52px); height: var(--bf-cell, 52px);
  animation: incursionFighterLunge 2.1s ease-in-out var(--fd, 0s) infinite;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 6px #00000088);
}
.incursion-battle-fighter.is-me {
  outline: 2px solid #22c55eaa;
  outline-offset: 2px;
  border-radius: 10px;
}
.incursion-battle-fighter-art {
  width: 100%; height: 100%;
  transform: scaleX(-1);
}
.incursion-battle-potion {
  position: absolute; top: -4px; right: -4px;
  font-size: 11px; line-height: 1;
  animation: incursionPotionPulse 1.2s ease-in-out infinite;
}
.incursion-battle-more {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: #ffffff14; color: #e5e7eb;
}
.incursion-battle-fx {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
.incursion-battle-projectile {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #fde68a 0%, #f97316 55%, transparent 70%);
  box-shadow: 0 0 10px #fb923caa;
  left: 22%;
  top: calc(38% + var(--p) * 9%);
  opacity: 0;
  animation: incursionProjectile 1.8s linear var(--pd, 0s) infinite;
}
.incursion-battle-boss {
  position: absolute; right: 4%; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: min(42%, 150px);
  display: flex; justify-content: center;
}
.incursion-battle-boss--waiting { position: relative; transform: none; margin: 8px 0; }
.incursion-battle-boss-shake {
  position: relative;
  animation: incursionBossShake 2.1s ease-in-out infinite;
  filter: drop-shadow(0 0 18px #ef444466);
}
.incursion-battle-impact {
  position: absolute; inset: 18% 10% auto 10%; height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a88 0%, transparent 68%);
  opacity: 0;
  animation: incursionBossImpact 2.1s ease-out infinite;
  pointer-events: none;
}
.incursion-battle-empty-msg {
  position: relative; z-index: 1;
  margin: 10px 0 0; font-size: 12px; text-align: center;
}
@keyframes incursionFighterLunge {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(10px, -3px) scale(1.05); }
  50% { transform: translate(16px, 0) scale(0.98); }
  65% { transform: translate(8px, 2px) scale(1); }
}
@keyframes incursionProjectile {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  12% { opacity: 1; }
  55% { opacity: 1; transform: translate(145px, -8px) scale(1); }
  70% { opacity: 0; transform: translate(170px, -4px) scale(0.5); }
  100% { opacity: 0; }
}
@keyframes incursionBossShake {
  0%, 30%, 100% { transform: translate(0, 0); }
  48% { transform: translate(-4px, 2px) rotate(-1deg); }
  52% { transform: translate(3px, -2px) rotate(1deg); }
  56% { transform: translate(-2px, 1px); }
}
@keyframes incursionBossImpact {
  0%, 44% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.85; transform: scale(1.1); }
  62% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; }
}
@keyframes incursionPotionPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .incursion-battle-fighter,
  .incursion-battle-boss-shake,
  .incursion-battle-projectile,
  .incursion-battle-impact,
  .incursion-battle-potion { animation: none !important; }
}
.incursion-rewards-box {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff06;
  border: 1px solid #ffffff10;
}
.incursion-rewards-head {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}
.incursion-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px;
}
.incursion-reward-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #00000028;
  border: 1px solid #ffffff0c;
  min-width: 0;
}
.incursion-reward-chip__icon { flex-shrink: 0; line-height: 0; }
.incursion-reward-chip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.incursion-reward-chip__name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incursion-reward-chip__meta { font-size: 10px; line-height: 1.2; }
.incursion-rewards-note { font-size: 10px; margin: 8px 0 0; line-height: 1.35; }
.incursion-boss-silhouette {
  filter: brightness(0.3) blur(0.5px);
  opacity: 0.85;
}
.incursion-hp-bar {
  position: relative; height: 18px; border-radius: 999px;
  background: #00000055; border: 1px solid #ffffff22; overflow: hidden; margin-top: 6px;
}
.incursion-hp-fill {
  height: 100%; background: linear-gradient(90deg, #dc2626, #f87171);
  transition: width 0.4s ease;
}
.incursion-hp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.incursion-join-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.incursion-join-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; border-radius: 12px; border: 2px solid #ffffff20;
  background: var(--card); cursor: pointer;
}
.incursion-join-pick.selected { border-color: #ef4444; box-shadow: 0 0 12px #ef444444; }

.incursion-pick-filter {
  width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ffffff22;
  background: var(--card2);
  color: var(--txt);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.incursion-pick-filter::placeholder { color: var(--muted); }
.incursion-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  background: #12162c;
  border: 1px solid #ffffff14;
}
.incursion-pick-mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 10px;
  border-radius: 12px;
  border: 2px solid #ffffff22;
  background: var(--card);
  color: var(--txt);
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  min-height: 108px;
}
.incursion-pick-mon .incursion-pick-name {
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incursion-pick-mon.is-on {
  border-color: #f0c14a;
  background: #2a2410;
  box-shadow: 0 0 0 2px #f0c14a99, 0 0 16px #f0c14a55;
}
.incursion-pick-mon.is-on::after {
  content: '?';
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0c14a;
  color: #1a1408;
  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.incursion-pick-mon.is-disabled:not(.is-on) {
  opacity: 0.45;
  cursor: not-allowed;
}
.incursion-pick-count {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #f0c14a;
}
.incursion-deployed-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.incursion-deployed-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px; border-radius: 10px; background: #00000022;
}
.incursion-locked-reason {
  margin: 8px 0 0; font-size: 12px; color: #fca5a5;
}
.incursion-rank-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ffffff14;
}
.incursion-rank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.incursion-rank-head-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.incursion-rank-table {
  border: 1px solid #ffffff14;
  border-radius: 12px;
  overflow: hidden;
  background: #00000028;
}
.incursion-rank-table-head,
.incursion-rank-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 4.8rem) 4.75rem;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
}
.incursion-rank-table-head {
  min-height: 28px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: #ffffff06;
  border-bottom: 1px solid #ffffff10;
}
.incursion-rank-table-head span:last-child,
.incursion-rank-col--dmg {
  text-align: right;
}
.incursion-rank-row {
  min-height: 54px;
  border-bottom: 1px solid #ffffff0a;
  background: linear-gradient(90deg, #ffffff04 0%, transparent 100%);
}
.incursion-rank-row:last-child {
  border-bottom: none;
}
.incursion-rank-row.rank-top-1 {
  background: linear-gradient(90deg, #fbbf2414 0%, transparent 100%);
  box-shadow: inset 3px 0 0 #f59e0b;
}
.incursion-rank-row.rank-top-2 {
  background: linear-gradient(90deg, #94a3b814 0%, transparent 100%);
  box-shadow: inset 3px 0 0 #94a3b8;
}
.incursion-rank-row.rank-top-3 {
  background: linear-gradient(90deg, #d9770614 0%, transparent 100%);
  box-shadow: inset 3px 0 0 #d97706;
}
.incursion-rank-row.is-me {
  background: linear-gradient(90deg, #ef444418 0%, transparent 100%);
  box-shadow: inset 3px 0 0 #ef4444;
}
.incursion-rank-col--pos {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.incursion-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.incursion-rank-col--user {
  min-width: 0;
}
.incursion-rank-col--klax {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  align-items: center;
  min-height: 32px;
}
.incursion-rank-klax-mini {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #00000044;
  border: 1px solid #ffffff12;
  overflow: hidden;
}
.incursion-rank-col--dmg {
  min-width: 0;
}
.incursion-rank-username {
  display: block;
  font-weight: 800;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incursion-rank-you {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fca5a5;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.incursion-rank-meta {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incursion-rank-damage {
  display: block;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fecaca;
  line-height: 1.15;
}
.incursion-rank-col--dmg .incursion-rank-bar {
  margin-top: 4px;
  height: 3px;
}
.incursion-rank-bar {
  height: 3px;
  border-radius: 999px;
  background: #ffffff0d;
  overflow: hidden;
}
.incursion-rank-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #f97316);
  transition: width 0.35s ease;
}
.incursion-rank-row.rank-top-1 .incursion-rank-bar > span {
  background: linear-gradient(90deg, #f59e0b, #fde68a);
}
.incursion-rank-row.rank-top-2 .incursion-rank-bar > span {
  background: linear-gradient(90deg, #94a3b8, #e2e8f0);
}
.incursion-rank-row.rank-top-3 .incursion-rank-bar > span {
  background: linear-gradient(90deg, #d97706, #fdba74);
}
.incursion-rank-pager {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ffffff10;
  gap: 8px;
  flex-wrap: wrap;
}
.incursion-rank-pager-info {
  font-size: 11px;
  text-align: center;
  flex: 1;
  min-width: 120px;
}

/* Incursi?n ? animaci?n entrada (Klax ? cueva) */
body.incursion-intro-lock { overflow: hidden; }
.incursion-intro {
  --inc-intro-dur: 5.2s;
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center;
  background: #0a1620;
  overflow: hidden;
}
.incursion-intro__void {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #06101866 0%, transparent 28%, transparent 62%, #02080ecc 100%),
    url('/assets/incursion/intro-bg.png') center / cover no-repeat;
  transform: scale(1.04);
}
.incursion-intro--ready .incursion-intro__void {
  animation: incursionIntroBgPulse var(--inc-intro-dur) ease-out forwards;
}
@keyframes incursionIntroBgPulse {
  0% { transform: scale(1.08); filter: brightness(0.75) saturate(0.9); }
  35%, 70% { transform: scale(1.02); filter: brightness(1) saturate(1.05); }
  100% { transform: scale(1.06); filter: brightness(0.85) saturate(1); }
}
.incursion-intro__mist {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #04101855 0%, transparent 42%, #02081077 100%);
  opacity: 0.85;
}
.incursion-intro__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at 50% 48%, transparent 28%, #020810aa 100%);
}
.incursion-intro__particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.incursion-intro__ember {
  position: absolute; left: var(--x); bottom: 8%;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  opacity: 0;
}
.incursion-intro--ready .incursion-intro__ember {
  animation: incursionIntroEmber var(--t) ease-in var(--d) infinite;
}
@keyframes incursionIntroEmber {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.1); }
}
.incursion-intro__title {
  position: absolute; top: clamp(12px, 4vh, 28px); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; pointer-events: none;
}
.incursion-intro__kicker {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #99f6e4; opacity: 0; transform: translateY(10px);
  text-shadow: 0 2px 10px #000c;
}
.incursion-intro__line {
  font-size: clamp(30px, 9vw, 48px); font-weight: 900; line-height: 0.95;
  letter-spacing: 0.08em; text-transform: uppercase; color: #ecfeff;
  text-shadow: 0 0 22px #22d3ee88, 0 4px 16px #000d;
  opacity: 0; transform: scale(1.5) translateY(16px); filter: blur(5px);
}
.incursion-intro__tier {
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #5eead4; opacity: 0; transform: translateY(8px);
  text-shadow: 0 2px 10px #000c;
}
.incursion-intro--ready .incursion-intro__kicker {
  animation: incursionIntroKicker var(--inc-intro-dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.incursion-intro--ready .incursion-intro__line {
  animation: incursionIntroTitle var(--inc-intro-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.incursion-intro--ready .incursion-intro__tier {
  animation: incursionIntroTier var(--inc-intro-dur) cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}
@keyframes incursionIntroKicker {
  0%, 8% { opacity: 0; transform: translateY(10px); }
  18%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes incursionIntroTitle {
  0%, 6% { opacity: 0; transform: scale(1.5) translateY(16px); filter: blur(5px); }
  20%, 75% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.96) translateY(-8px); filter: blur(2px); }
}
@keyframes incursionIntroTier {
  0%, 12% { opacity: 0; transform: translateY(8px); }
  24%, 72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
.incursion-intro__scene {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.incursion-intro__party {
  position: absolute; left: 0; right: 0; bottom: 18%;
  height: min(38vh, 260px);
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  z-index: 3; pointer-events: none;
}
.incursion-intro__klax {
  opacity: 0;
  transform: translateX(-42vw) translateY(18px) scale(1.05);
  filter: drop-shadow(0 10px 18px #000c);
}
.incursion-intro--ready .incursion-intro__klax {
  animation: incursionKlaxEnterCave calc(var(--inc-intro-dur) * 0.78) cubic-bezier(0.45, 0.05, 0.2, 1) calc(0.35s + var(--i, 0) * 0.12s) forwards;
}
@keyframes incursionKlaxEnterCave {
  0% { opacity: 0; transform: translateX(-42vw) translateY(18px) scale(1.05); }
  12% { opacity: 1; }
  48% { opacity: 1; transform: translateX(-6vw) translateY(6px) scale(0.95); }
  72% { opacity: 0.85; transform: translateX(2vw) translateY(-2vh) scale(0.62); }
  100% { opacity: 0; transform: translateX(4vw) translateY(-8vh) scale(0.22); filter: blur(3px); }
}
.incursion-intro__caption {
  position: absolute; bottom: clamp(52px, 10vh, 84px); z-index: 5;
  margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ccfbf1; opacity: 0;
  text-shadow: 0 2px 10px #000c;
}
.incursion-intro--ready .incursion-intro__caption {
  animation: incursionIntroCaption var(--inc-intro-dur) ease forwards;
}
@keyframes incursionIntroCaption {
  0%, 28% { opacity: 0; transform: translateY(8px); }
  40%, 72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
.incursion-intro__skip {
  position: absolute; right: 14px; bottom: 14px; z-index: 6;
}
.incursion-intro--exit {
  animation: incursionIntroExit 0.58s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes incursionIntroExit {
  to { opacity: 0; transform: scale(1.04); filter: blur(6px); }
}

.klax-lock-banner--incursion {
  color: #fca5a5;
  border-color: #ef444444;
  background: #ef444418;
}
.mon-incursion {
  background: #ef444433;
  color: #fecaca;
  font-size: 10px;
}
.mon-card--incursion {
  border-color: #ef444444;
  box-shadow: inset 0 0 0 1px #ef444422;
}
.team-active-item.is-incursion { opacity: 0.72; }

/* Tienda ? banner oferta flash Inicio (tono naranja/dorado) */
.shop-promo-home-banner {
  position: relative;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #ea580c28 0%, #f9731622 50%, #fbbf2412 100%);
  border: 2px solid #fb923c66;
  animation: shopPromoHomePulse 3s ease-in-out infinite;
}
.shop-promo-home-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff14 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.shop-promo-home-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #fb923c33; color: #ffedd5;
  border: 1px solid #fb923c55;
}
.shop-promo-home-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(17px, 4vw, 22px); font-weight: 900;
}
.shop-promo-home-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #ffffffbb;
}
.shop-promo-home-event {
  position: relative; z-index: 1;
  margin-top: 8px; padding: 10px 10px 8px;
  border-radius: 12px; background: #00000033;
  border: 1px solid #ffffff15;
}
.shop-promo-home-hero {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  margin: 2px auto 8px;
  filter: drop-shadow(0 8px 20px #000a) drop-shadow(0 0 24px #fb923c88);
  animation: shopPromoHeroFloat 3.2s ease-in-out infinite;
}
.shop-promo-home-hero img,
.shop-promo-home-hero .item-icon,
.shop-promo-home-hero .item-icon--lg {
  width: clamp(76px, 25vw, 104px) !important;
  height: auto !important;
  max-height: 112px;
  object-fit: contain;
}
.shop-promo-home-hero--stone {
  filter: drop-shadow(0 10px 24px #000b) drop-shadow(0 0 28px #fbbf24aa) drop-shadow(0 0 44px #c084fc77);
}
.shop-promo-home-hero--stone img,
.shop-promo-home-hero--stone .item-icon,
.shop-promo-home-hero--stone .item-icon--lg {
  width: clamp(87px, 28vw, 118px) !important;
  max-height: 126px;
}
.shop-promo-home-hero-emoji {
  font-size: clamp(50px, 15vw, 78px);
  line-height: 1;
  filter: drop-shadow(0 0 18px #fb923c88);
}
@keyframes shopPromoHeroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-promo-home-hero { animation: none !important; }
}
.shop-promo-home-format { margin: 0 0 4px; font-size: 13px; }
.shop-promo-home-sold {
  margin: 0 0 6px; font-size: 12px; font-weight: 800; color: #fde68a;
}
.shop-promo-home-sold span { font-size: 15px; color: #fff; }
.shop-promo-home-cta {
  margin: 6px 0 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #fdba74;
}
.shop-promo-home-grid { position: relative; z-index: 1; }
.shop-promo-home-num { color: #fdba74; text-shadow: 0 2px 8px #000c, 0 0 16px #fb923c88; }
.shop-promo-home-sep { color: #fdba74; animation: launchCdBlink 1s step-end infinite; }
.shop-promo-home-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.shop-promo-home-btn {
  position: relative; z-index: 1;
  margin-top: 12px; width: 100%; max-width: 280px;
}
@keyframes shopPromoHomePulse {
  0%, 100% { border-color: #fb923c66; box-shadow: 0 0 0 1px #ffffff12 inset, 0 8px 32px #ea580c44; }
  50% { border-color: #fbbf2488; box-shadow: 0 0 0 1px #ffffff18 inset, 0 10px 36px #f9731644; }
}

/*
 * Inicio m?vil / touch ? matar paint caro al hacer scroll.
 * Glow animado (box-shadow), shine, drop-shadow m?ltiples y float
 * del hero flash/piedra fuerzan repaint continuo en GPUs m?viles.
 * Desktop (hover fino) conserva el look completo.
 */
@media (max-width: 768px), (hover: none) {
  .home-temporal-events-heading__icon {
    filter: none;
    animation: none;
  }
  .home-temporal-events-heading__text {
    text-shadow: 0 1px 4px #000a;
  }

  .tournament-promo-banner,
  .auction-promo-banner,
  .blind-auction-promo-banner,
  .rifa-promo-banner,
  .rifa-result-banner,
  .incursion-promo-banner,
  .legendary-promo-banner,
  .shop-promo-home-banner,
  .mc-go-promo,
  .ruins-home-banner,
  .ruins-event-promo-banner,
  .klaxruleta-promo-banner {
    animation: none !important;
    box-shadow: 0 4px 14px #0007;
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
  }

  .tournament-promo-shine,
  .auction-promo-shine,
  .blind-auction-promo-shine,
  .rifa-promo-shine,
  .rifa-result-shine,
  .rifa-result-confetti,
  .incursion-promo-shine,
  .incursion-promo-shine--2,
  .legendary-promo-shine,
  .legendary-promo-shine--2,
  .legendary-promo-glow,
  .shop-promo-home-shine,
  .mc-go-promo__shine,
  .mc-go-promo__bolts,
  .ruins-home-shine,
  .ruins-home-glow,
  .ruins-event-promo-shine,
  .klaxruleta-promo-shine {
    display: none !important;
  }

  .tournament-promo-num,
  .auction-promo-num,
  .blind-auction-promo-num,
  .rifa-promo-num,
  .klaxruleta-promo-num,
  .ruins-event-promo-num,
  .shop-promo-home-num,
  .incursion-promo-timer {
    text-shadow: 0 1px 3px #000a;
  }
  .tournament-promo-sep,
  .auction-promo-sep,
  .blind-auction-promo-sep,
  .rifa-promo-sep,
  .klaxruleta-promo-sep,
  .shop-promo-home-sep {
    animation: none !important;
  }

  .auction-promo-hero,
  .blind-auction-promo-hero,
  .rifa-promo-hero,
  .rifa-result-hero,
  .shop-promo-home-hero,
  .shop-promo-home-hero--stone {
    animation: none !important;
    filter: drop-shadow(0 3px 6px #0008);
  }
  .shop-promo-home-hero-emoji {
    font-size: clamp(36px, 11vw, 50px);
    filter: none;
  }
  .auction-promo-hero img,
  .auction-promo-hero svg,
  .blind-auction-promo-hero img,
  .blind-auction-promo-hero svg,
  .rifa-promo-hero img,
  .rifa-promo-hero svg {
    width: clamp(72px, 26vw, 104px);
  }
  .shop-promo-home-hero img,
  .shop-promo-home-hero .item-icon,
  .shop-promo-home-hero .item-icon--lg,
  .shop-promo-home-hero--stone img,
  .shop-promo-home-hero--stone .item-icon,
  .shop-promo-home-hero--stone .item-icon--lg {
    width: clamp(53px, 20vw, 76px) !important;
    max-height: 81px;
  }

  .ruins-home-title {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #e8dcff;
    filter: none;
  }
  .ruins-home-banner:not(.ruins-home-banner--empty) .ruins-home-btn,
  .incursion-promo-btn {
    animation: none !important;
    box-shadow: 0 3px 12px #0006;
  }
  .incursion-promo-badge {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-temporal-events-heading__icon,
  .tournament-promo-banner,
  .tournament-promo-shine,
  .tournament-promo-sep,
  .auction-promo-banner,
  .auction-promo-shine,
  .auction-promo-hero,
  .auction-promo-sep,
  .blind-auction-promo-banner,
  .blind-auction-promo-shine,
  .blind-auction-promo-hero,
  .blind-auction-promo-sep,
  .rifa-promo-banner,
  .rifa-promo-shine,
  .rifa-promo-hero,
  .rifa-promo-sep,
  .rifa-result-banner,
  .rifa-result-shine,
  .rifa-result-confetti,
  .shop-promo-home-banner,
  .shop-promo-home-shine,
  .shop-promo-home-hero,
  .shop-promo-home-sep,
  .mc-go-promo,
  .mc-go-promo__shine,
  .mc-go-promo__bolts,
  .ruins-home-banner,
  .ruins-home-shine,
  .ruins-home-glow,
  .ruins-home-banner:not(.ruins-home-banner--empty) .ruins-home-btn {
    animation: none !important;
  }
}

/* MonsterClash GO ? promo Inicio (justo bajo la tarjeta de jugador) */
.mc-go-promo {
  position: relative;
  margin: 0 0 14px;
  padding: clamp(14px, 3.5vw, 18px) clamp(12px, 3vw, 18px) clamp(16px, 4vw, 20px);
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(58, 208, 255, 0.28), transparent 55%),
    radial-gradient(80% 60% at 10% 100%, rgba(245, 197, 66, 0.22), transparent 50%),
    linear-gradient(155deg, #0d1528 0%, #081428 45%, #0a1f18 100%);
  border: 2px solid rgba(58, 208, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(245, 197, 66, 0.18) inset,
    0 8px 28px rgba(58, 208, 255, 0.18),
    0 0 40px rgba(245, 197, 66, 0.12);
  animation: mcGoPromoPulse 2.6s ease-in-out infinite;
}
.mc-go-promo__shine {
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
  animation: officialLaunchShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.mc-go-promo__bolts {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 48%, rgba(58, 208, 255, 0.12) 50%, transparent 52%),
    linear-gradient(60deg, transparent 58%, rgba(245, 197, 66, 0.1) 60%, transparent 62%);
  background-size: 220% 220%;
  animation: mcGoBoltsSweep 5s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}
@keyframes mcGoPromoPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(245, 197, 66, 0.14) inset,
      0 8px 24px rgba(58, 208, 255, 0.14),
      0 0 32px rgba(245, 197, 66, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(245, 197, 66, 0.28) inset,
      0 10px 36px rgba(58, 208, 255, 0.28),
      0 0 48px rgba(245, 197, 66, 0.2);
  }
}
@keyframes mcGoBoltsSweep {
  0% { background-position: 0% 50%, 100% 50%; }
  100% { background-position: 100% 50%, 0% 50%; }
}
.mc-go-promo__badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #081018;
  background: linear-gradient(90deg, #f5c542, #ffe29a 55%, #3ad0ff);
  box-shadow: 0 2px 14px rgba(245, 197, 66, 0.55), 0 0 18px rgba(58, 208, 255, 0.35);
}
.mc-go-promo__art {
  position: relative;
  z-index: 1;
  margin: 0 auto 6px;
  max-width: min(100%, 340px);
  background: transparent;
  filter: drop-shadow(0 6px 18px rgba(58, 208, 255, 0.35)) drop-shadow(0 2px 8px rgba(245, 197, 66, 0.25));
}
.mc-go-promo__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 128px;
  object-fit: contain;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
}
.mc-go-promo__title {
  position: relative;
  z-index: 1;
  margin: 2px 0 4px;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #ffe29a, #fff, #3ad0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(58, 208, 255, 0.45));
}
.mc-go-promo__lead {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: #c8e8ff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mc-go-promo__feats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 14px;
  padding: 0;
  list-style: none;
  max-width: 360px;
}
.mc-go-promo__feat {
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  color: #f4fff8;
  background: rgba(8, 24, 40, 0.55);
  border: 1px solid rgba(58, 208, 255, 0.35);
  box-shadow: 0 0 12px rgba(58, 208, 255, 0.12);
}
.mc-go-promo__feat--more {
  color: #081018;
  background: linear-gradient(135deg, #f5c542, #ffe29a);
  border-color: rgba(245, 197, 66, 0.7);
  box-shadow: 0 2px 12px rgba(245, 197, 66, 0.4);
}
.mc-go-promo__btn {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 280px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #3ad0ff, #5fd08a 55%, #f5c542) !important;
  color: #081018 !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(58, 208, 255, 0.4), 0 0 20px rgba(245, 197, 66, 0.25);
}
.mc-go-promo__btn:active {
  transform: scale(0.98);
}

/* Ruinas Klax ? banner Inicio (debajo del panel de usuario) */
.ruins-home-banner {
  position: relative;
  margin: 0 0 14px;
  padding: clamp(14px, 3.5vw, 20px) clamp(14px, 3.5vw, 22px);
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #4a1d9628 0%, #7c3aed33 38%, #6ce8ff18 100%);
  border: 2px solid #9b7dff77;
  box-shadow: 0 0 28px #7c3aed22, inset 0 1px 0 #ffffff12;
  animation: ruinsHomePulse 2.8s ease-in-out infinite;
}
.ruins-home-banner--empty {
  border-color: #6c8cff55;
  animation: none;
}
.ruins-home-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff14 50%, transparent 65%);
  animation: launchShine 3.5s ease-in-out infinite;
  pointer-events: none;
}
.ruins-home-glow {
  position: absolute;
  top: -40%; left: 50%; width: 120%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #9b7dff33 0%, transparent 70%);
  pointer-events: none;
  animation: ruinsHomeGlow 4s ease-in-out infinite alternate;
}
@keyframes ruinsHomePulse {
  0%, 100% { box-shadow: 0 0 24px #7c3aed22, inset 0 1px 0 #ffffff12; }
  50% { box-shadow: 0 0 36px #9b7dff44, inset 0 1px 0 #ffffff18; }
}
@keyframes ruinsHomeGlow {
  from { opacity: 0.5; transform: translateX(-50%) scale(1); }
  to { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
.ruins-home-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  background: #9b7dff33; color: #e4d9ff;
  border: 1px solid #c4b5fd66;
}
.ruins-home-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(20px, 5vw, 26px); font-weight: 900;
  background: linear-gradient(90deg, #fff, #c4b5fd, #6ce8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px #7c3aed55);
}
.ruins-home-sub {
  position: relative; z-index: 1;
  margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #ffffffcc;
  max-width: 340px; margin-left: auto; margin-right: auto;
}
.ruins-home-leader {
  position: relative; z-index: 1;
  margin: 0 auto 12px;
  padding: 8px 12px;
  max-width: 340px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  border-radius: 10px;
  background: #00000035;
  border: 1px solid #ffd23d33;
  color: #ffe9a8;
}
.ruins-home-admin-extra {
  position: relative; z-index: 1;
  margin: -4px auto 12px;
  padding: 8px 12px;
  max-width: 360px;
  text-align: center;
  border-radius: 10px;
  background: #ffd23d14;
  border: 1px solid #ffd23d44;
  color: #ffe9a8;
}
.ruins-home-admin-extra__lbl {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ruins-home-admin-extra__vals {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: center;
  font-size: 12px;
  line-height: 1.35;
}
.ruins-home-admin-extra__vals b { color: #fff; }
.ruins-home-amulet {
  position: relative; z-index: 1;
  margin: -4px auto 12px;
  padding: 9px 12px;
  max-width: 360px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #22c55e22, #10b98118);
  border: 1px solid #34d39966;
  color: #eafff4;
  box-shadow: 0 10px 26px #22c55e22;
}
.ruins-home-amulet b { color: #fff; }
.ruins-home-leader.muted { color: #ffffff99; border-color: #ffffff18; }
.ruins-home-leader b { color: #fff; }
.ruins-home-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 12px; text-align: left;
}
.ruins-home-stat {
  padding: 10px 12px; border-radius: 12px;
  background: #00000040; border: 1px solid #ffffff18;
}
.ruins-home-stat-lbl {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: #b8a8e8;
  margin-bottom: 4px;
}
.ruins-home-stat-val {
  display: block; font-size: 14px; font-weight: 800;
}
.ruins-home-stat-val--energy {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ruins-home-actions {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%;
}
.ruins-home-rank-btn {
  width: 100%; max-width: 300px;
  font-weight: 700; font-size: 13px;
  border-color: #ffffff28;
  color: #e8dcff;
}
.ruins-home-btn {
  position: relative; z-index: 1;
  width: 100%; max-width: 300px;
  font-weight: 800; font-size: 15px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px #7c3aed44;
}
.ruins-home-banner:not(.ruins-home-banner--empty) .ruins-home-btn {
  animation: ruinsHomeBtnGlow 2s ease-in-out infinite;
}
@keyframes ruinsHomeBtnGlow {
  50% { box-shadow: 0 4px 28px #9b7dff66; transform: translateY(-1px); }
}
.ruins-home-hint {
  position: relative; z-index: 1;
  font-size: 11px; margin: 8px 0 0;
}

/* Modal ranking Ruinas */
.ruins-rank-modal { max-width: 420px; margin: 0 auto; }
.ruins-rank-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.ruins-rank-head h2 { margin: 0; font-size: 1.15rem; }
.ruins-rank-sub { font-size: 12px; margin: 0 0 12px; line-height: 1.4; }
.ruins-rank-self {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px;
  background: linear-gradient(90deg, #7c3aed33, transparent);
  border-color: #9b7dff44;
}
.ruins-rank-self--empty {
  text-align: center; padding: 10px; margin-bottom: 12px; font-size: 12px;
}
.ruins-rank-self__lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); flex: 1;
}
.ruins-rank-self__pos { font-size: 1.25rem; font-weight: 900; min-width: 2rem; text-align: center; }
.ruins-rank-self__lvl { font-weight: 800; font-size: 13px; color: #c4b5fd; }
.ruins-rank-list {
  max-height: min(52vh, 360px); overflow-y: auto;
  border: 1px solid #ffffff12; border-radius: 12px;
  background: var(--card2); margin-bottom: 10px;
}
.ruins-rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #ffffff0a;
}
.ruins-rank-row:last-child { border-bottom: none; }
.ruins-rank-row__pos { flex-shrink: 0; width: 2rem; text-align: center; font-weight: 900; }
.ruins-rank-row__name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.ruins-rank-row__lvl { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #b8a8e8; }
.campo-rank-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.15;
  text-align: right;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.campo-rank-stats__score { font-weight: 800; color: #c4b5fd; }
.campo-rank-stats__meta { font-size: 10px; font-weight: 600; }
.campo-rank-stats__caught { color: var(--good); font-weight: 800; }
/* Misma fila compacta en PC: no heredar el max-width 42% del ranking Elo */
.ruins-rank-row.lb-row .lb-row__name,
.ruins-rank-row .ruins-rank-row__name {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}
.ruins-rank-self .campo-rank-stats { margin-left: auto; }
.ruins-rank-pager { margin-top: 4px; }

.flappy-rank-klax {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0; min-width: 0; max-width: 42%;
}
.flappy-rank-klax img,
.flappy-rank-klax svg,
.flappy-rank-klax .klax-img {
  width: 34px; height: 34px; flex-shrink: 0;
  object-fit: contain;
}
.flappy-rank-klax small {
  font-size: 11px; font-weight: 700; color: #c4b5fd;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 7.5rem;
}
.flappy-rank-klax--empty {
  color: #ffffff55; font-weight: 700; min-width: 1.2rem; justify-content: center;
}
.flappy-rank-self .flappy-rank-klax { margin: 0 4px; }
@media (max-width: 420px) {
  .flappy-rank-klax small { display: none; }
}

@keyframes auctionPromoPulse {
  0%, 100% { border-color: #a78bfa66; box-shadow: 0 0 0 1px #ffffff12 inset, 0 8px 32px #7c3aed44; }
  50% { border-color: #c4b5fd88; box-shadow: 0 0 0 1px #ffffff18 inset, 0 10px 36px #a78bfa44; }
}

@keyframes blindAuctionPromoPulse {
  0%, 100% { border-color: #22d3ee66; box-shadow: 0 0 0 1px #ffffff12 inset, 0 8px 32px #0891b244; }
  50% { border-color: #67e8f988; box-shadow: 0 0 0 1px #ffffff18 inset, 0 10px 36px #22d3ee44; }
}

/* Ranking ? banner temporada ELO (tono dorado) */
.ranking-promo-banner {
  position: relative;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #ffd23d28 0%, #f59e0b22 45%, #eab30816 100%);
  border: 2px solid #fbbf2466;
  animation: rankingPromoPulse 2.8s ease-in-out infinite;
}
.ranking-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff14 50%, transparent 60%);
  animation: officialLaunchShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
.ranking-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  background: linear-gradient(90deg, #fbbf24, #ffd23d);
  color: #1a1208;
  box-shadow: 0 2px 12px #fbbf2488;
}
.ranking-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(17px, 4vw, 22px); font-weight: 900;
  color: #fff; text-shadow: 0 2px 10px #000a;
}
.ranking-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #ffffffcc; line-height: 1.35;
}
.ranking-promo-event {
  position: relative; z-index: 1;
  margin-top: 8px; padding: 10px 10px 8px;
  border-radius: 12px; background: #00000033;
  border: 1px solid #ffffff18;
}
.ranking-promo-cta {
  margin: 6px 0 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: #ffd23d;
}
.ranking-promo-grid { position: relative; z-index: 1; }
.ranking-promo-num { color: #ffd23d; text-shadow: 0 2px 8px #000c, 0 0 16px #ffd23d88; }
.ranking-promo-sep { color: #ffd23d; animation: launchCdBlink 1s step-end infinite; }
.ranking-promo-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.ranking-promo-actions {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 12px;
}
.ranking-promo-actions .btn { flex: 1 1 140px; max-width: 220px; }
.ranking-promo-actions--prizes-only .btn { flex: 0 1 220px; }
/* Archivo bajo el ELO ? separado del banner TEMPORADA (no reutilizar ranking-promo-actions). */
.rank-season-archive-btns {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px 0 4px;
}
.rank-season-archive-btns .btn { flex: 1 1 140px; max-width: 220px; }
@keyframes rankingPromoPulse {
  0%, 100% { border-color: #fbbf2466; box-shadow: 0 0 0 1px #ffffff12 inset, 0 8px 32px #f59e0b44; }
  50% { border-color: #ffd23d88; box-shadow: 0 0 0 1px #ffffff18 inset, 0 10px 36px #ffd23d44; }
}

/* Pr?xima season ? banner USDT (debajo del countdown ELO) */
.next-season-banner {
  position: relative;
  padding: clamp(14px, 3.5vw, 20px) clamp(12px, 3vw, 18px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #22c55e28 0%, #10b98122 40%, #05966918 100%);
  border: 2px solid #34d39977;
  animation: nextSeasonPulse 2.4s ease-in-out infinite;
}
.next-season-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff18 50%, transparent 65%);
  animation: officialLaunchShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.next-season-icons {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.next-season-ic {
  position: absolute;
  font-size: clamp(18px, 4vw, 26px);
  opacity: 0.55;
  filter: drop-shadow(0 2px 6px #0008);
  animation: nextSeasonFloat 3s ease-in-out infinite;
}
.next-season-ic--1 { top: 8%; left: 6%; animation-delay: 0s; }
.next-season-ic--2 { top: 12%; right: 8%; animation-delay: 0.4s; }
.next-season-ic--3 { bottom: 10%; left: 10%; animation-delay: 0.8s; }
.next-season-ic--4 { bottom: 14%; right: 6%; animation-delay: 1.2s; }
.next-season-ic--5 { top: 42%; left: 3%; font-size: 14px; opacity: 0.4; animation-delay: 1.6s; }
.next-season-kicker {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  background: linear-gradient(90deg, #059669, #22c55e);
  color: #ecfdf5;
  box-shadow: 0 2px 14px #22c55e88;
}
.next-season-title {
  position: relative; z-index: 1;
  margin: 6px 0 4px;
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 900; letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 12px #000c, 0 0 20px #34d39966;
  line-height: 1.2;
}
.next-season-title-ic {
  display: inline-block;
  animation: nextSeasonBounce 1.8s ease-in-out infinite;
}
.next-season-title-ic:last-child { animation-delay: 0.3s; }
.next-season-prize {
  position: relative; z-index: 1;
  margin: 8px 0 4px;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 900; letter-spacing: 0.02em;
  color: #ecfdf5;
  text-shadow: 0 0 24px #22c55eaa, 0 2px 10px #000a;
  line-height: 1.25;
}
.next-season-prize strong {
  color: #4ade80;
  font-size: 1.08em;
  text-shadow: 0 0 28px #22c55ecc, 0 0 8px #bbf7d0;
}
.next-season-prize-ic {
  display: inline-block;
  animation: nextSeasonBounce 1.4s ease-in-out infinite;
}
.next-season-prize-ic:last-of-type { animation-delay: 0.25s; }
.next-season-bang {
  display: inline-block;
  color: #fde047;
  animation: nextSeasonBang 0.9s ease-in-out infinite;
}
.next-season-sub {
  position: relative; z-index: 1;
  margin: 8px 0 0;
  font-size: 11px; font-weight: 600;
  color: #ffffffcc;
  line-height: 1.35;
  max-width: 36em;
  margin-left: auto; margin-right: auto;
}
.next-season-dates {
  position: relative; z-index: 1;
  margin: 10px 0 0;
  font-size: 12px; font-weight: 700;
  color: #fff;
  line-height: 1.45;
}
@keyframes nextSeasonPulse {
  0%, 100% { border-color: #34d39966; box-shadow: 0 0 0 1px #ffffff10 inset, 0 8px 32px #22c55e44; }
  50% { border-color: #4ade8099; box-shadow: 0 0 0 1px #ffffff18 inset, 0 12px 40px #22c55e66, 0 0 24px #22c55e33; }
}
@keyframes nextSeasonFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.45; }
  50% { transform: translateY(-6px) rotate(8deg); opacity: 0.75; }
}
@keyframes nextSeasonBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes nextSeasonBang {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.85; }
}

/* Modal premios ranking */
.rank-prizes-modal { display: flex; flex-direction: column; gap: 10px; max-height: min(78dvh, 680px); }
.rank-prizes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rank-prizes-head h2 { margin: 0; font-size: clamp(17px, 4.8vw, 20px); line-height: 1.25; }
.rank-prizes-intro { margin: 0; font-size: 12px; line-height: 1.45; color: #ffffffaa; }
.rank-prize-tiers {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; padding-right: 4px; margin-top: 4px;
}
.rank-prize-tier {
  border-radius: 14px; padding: 12px 12px 10px;
  background: linear-gradient(135deg, #ffffff08, #ffffff04);
  border: 1px solid #ffffff18;
}
.rank-prize-tier--gold {
  background: linear-gradient(135deg, #ffd23d22, #f59e0b12);
  border-color: #ffd23d55;
  box-shadow: 0 0 24px #ffd23d22;
}
.rank-prize-tier--silver {
  background: linear-gradient(135deg, #e2e8f022, #94a3b812);
  border-color: #cbd5e155;
}
.rank-prize-tier--bronze {
  background: linear-gradient(135deg, #fb923c22, #ea580c12);
  border-color: #fb923c55;
}
.rank-prize-tier--top {
  background: linear-gradient(135deg, #6c8cff18, #4f46e512);
  border-color: #6c8cff44;
}
.rank-prize-tier--mid {
  background: linear-gradient(135deg, #22c55e18, #16a34a12);
  border-color: #22c55e44;
}
.rank-prize-tier-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.rank-prize-medal {
  flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 20px; font-weight: 900;
  background: #00000044; border: 1px solid #ffffff22;
}
.rank-prize-tier--gold .rank-prize-medal { background: linear-gradient(135deg, #ffd23d44, #f59e0b33); }
.rank-prize-tier--silver .rank-prize-medal { background: linear-gradient(135deg, #e2e8f044, #94a3b833); }
.rank-prize-tier--bronze .rank-prize-medal { background: linear-gradient(135deg, #fb923c44, #ea580c33); }
.rank-prize-tier-title { margin: 0; font-size: 15px; font-weight: 900; }
.rank-prize-tier-sub { margin: 2px 0 0; font-size: 11px; color: #ffffff88; }
.rank-prize-rewards {
  display: grid; grid-template-columns: 1fr; gap: 6px;
}
@media (min-width: 420px) {
  .rank-prize-rewards { grid-template-columns: 1fr 1fr; }
}
.rank-prize-reward {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 10px;
  background: #00000033; border: 1px solid #ffffff10;
  font-size: 12px; line-height: 1.3;
}
.rank-prize-reward-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.rank-prize-reward-icon img { width: 24px; height: 24px; object-fit: contain; }

.auto-pvp-banner {
  border-color: #6c8cff55 !important;
  background: linear-gradient(135deg, #6c8cff18, #ff5db112);
}
.rank-payout-modal { display: flex; flex-direction: column; gap: 10px; max-height: min(78dvh, 680px); }
.rank-payout-list {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; padding-right: 4px; max-height: min(52dvh, 480px);
}
.rank-payout-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border-radius: 12px;
  background: #00000033; border: 1px solid #ffffff12;
}
.rank-payout-rank {
  flex-shrink: 0; width: 32px; text-align: center; font-size: 18px; font-weight: 900;
}
.rank-payout-body { flex: 1; min-width: 0; font-size: 13px; }
.rank-payout-rewards { font-size: 11px; margin-top: 4px; line-height: 1.35; }
.rank-payout-warn {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.4;
  background: #ff5db118; border: 1px solid #ff5db144; color: #ffc8e0;
}
.rank-payout-warn.good { background: #4ee08a18; border-color: #4ee08a44; color: #b8f5d0; }

.auction-card-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.auction-card-art { flex: 0 0 auto; }
.auction-card-info { flex: 1; min-width: 160px; }
.auction-card-title { margin: 0 0 4px; font-size: 18px; }
.auction-you-lead { margin: 6px 0 0; font-size: 12px; color: var(--good); }
.auction-bid-list { display: flex; flex-direction: column; gap: 4px; }
.auction-bid-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 12px; align-items: center; }
.blind-auction-card-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.blind-auction-card-art { flex: 0 0 auto; }
.blind-auction-card-info { flex: 1; min-width: 160px; }
.blind-auction-card-title { margin: 0 0 4px; font-size: 18px; }
.blind-auction-you-bid { margin: 6px 0 0; font-size: 12px; color: #67e8f9; }
.blind-auction-bid-list { display: flex; flex-direction: column; gap: 4px; }
.blind-auction-bid-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 12px; align-items: center; }

.klax-dex-gen {
  margin-bottom: clamp(14px, 3vw, 20px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ffffff12;
  background: linear-gradient(180deg, #ffffff06, transparent 48px);
}
.klax-dex-gen:last-child { margin-bottom: 0; }
.klax-dex-gen--2 {
  border-color: #ffd23d44;
  background: linear-gradient(180deg, #ffd23d12, #6c8cff08 40%, transparent 72px);
  box-shadow: 0 0 0 1px #ffd23d18 inset, 0 8px 28px #0003;
}
.klax-dex-gen-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.5vw, 12px);
  padding: clamp(10px, 2.5vw, 14px) clamp(10px, 2.5vw, 14px) clamp(8px, 2vw, 10px);
  border-bottom: 1px solid #ffffff10;
}
.klax-dex-gen-head--2 { border-bottom-color: #ffd23d28; }
.klax-dex-gen-badge {
  flex-shrink: 0;
  font-size: clamp(10px, 2.8vw, 11px);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6c8cff, #43c0ff);
  color: #08101f;
  box-shadow: 0 4px 14px #6c8cff44;
}
.klax-dex-gen-badge--new {
  background: linear-gradient(135deg, #ffd23d, #ff8a5b);
  box-shadow: 0 4px 16px #ffd23d55;
  animation: klaxGenPulse 2.4s ease-in-out infinite;
}
.klax-dex-gen-badge--unico {
  background: linear-gradient(135deg, #ffd86b, #f0a020);
  box-shadow: 0 4px 16px #ffd86b55;
  animation: none;
}
.klax-dex-gen-badge--exclusivo {
  background: linear-gradient(135deg, #a78bfa, #7c5cbf);
  box-shadow: 0 4px 16px #a78bfa55;
  animation: none;
  color: #fff;
}
.klax-dex-gen-badge--shiny {
  background: linear-gradient(135deg, #7CFFB2, #2ee6c8);
  box-shadow: 0 4px 16px #7CFFB255;
  animation: none;
  color: #08101f;
}
.klax-dex-gen--unico {
  border-color: #ffd86b44;
  background: linear-gradient(180deg, #ffd86b12, #6c8cff08 40%, transparent 72px);
}
.klax-dex-gen--exclusivo {
  border-color: #a78bfa44;
  background: linear-gradient(180deg, #a78bfa14, #6c8cff08 40%, transparent 72px);
}
.klax-dex-gen--shiny {
  border-color: #7CFFB244;
  background: linear-gradient(180deg, #7CFFB214, #6c8cff08 40%, transparent 72px);
}
.klax-dex-gen-head--unico { border-bottom-color: #ffd86b28; }
.klax-dex-gen-head--exclusivo { border-bottom-color: #a78bfa28; }
.klax-dex-gen-head--shiny { border-bottom-color: #7CFFB228; }
@keyframes klaxGenPulse {
  0%, 100% { box-shadow: 0 4px 16px #ffd23d55; }
  50% { box-shadow: 0 4px 22px #ffd23d88, 0 0 0 2px #ffd23d33; }
}
.klax-dex-gen-copy { flex: 1; min-width: 0; }
.klax-dex-gen-title {
  margin: 0;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 900;
  line-height: 1.15;
}
.klax-dex-gen-sub {
  margin: 3px 0 0;
  font-size: clamp(10px, 2.6vw, 11px);
  color: var(--muted);
  line-height: 1.35;
}
.klax-dex-gen-head--2 .klax-dex-gen-sub { color: #ffe08a; }
.klax-dex-gen-count {
  flex-shrink: 0;
  font-size: clamp(9px, 2.4vw, 10px);
  font-weight: 800;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 999px;
  background: #00000033;
}
.klax-dex-gen-body { padding: 0 clamp(6px, 1.5vw, 10px) clamp(4px, 1vw, 6px); }
.klax-dex-gen-body .klax-dex-row:last-child { border-bottom: none; }
.klax-dex-gen-label {
  display: block;
  width: 100%;
  margin: 1px 0 3px;
  font-size: clamp(6px, 1.9vw, 8px);
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-align: center;
}
.klax-dex-gen-label--1 { color: #8eb0ff; }
.klax-dex-gen-label--2 { color: #ffd23d; }
.klax-dex-gen-label--unico { color: #ffd86b; }
.klax-dex-gen-label--exclusivo { color: #c4b5fd; }
.klax-dex-gen-label--shiny { color: #7CFFB2; }
.klax-dex-gen-label--modal {
  font-size: clamp(10px, 2.8vw, 12px);
  margin: 2px 0 8px;
  text-align: center;
}
.species-dex-modal .klax-dex-gen-label--1 { color: #9bb4ff; }
.species-dex-modal .klax-dex-gen-label--2 { color: #ffe08a; }
.species-dex-modal .klax-dex-gen-label--unico { color: #ffe9a8; }
.species-dex-modal .klax-dex-gen-label--exclusivo { color: #ddd6fe; }
.species-dex-modal .klax-dex-gen-label--shiny { color: #a8ffd4; }
.klax-dex-cell { position: relative; }

.login-panel {
  width: min(100%, 420px);
  max-height: min(72dvh, 640px);
  overflow: visible;
  flex-shrink: 0;
}

.login-panel-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(145deg, rgba(255, 210, 61, 0.55), rgba(108, 140, 255, 0.45) 45%, rgba(255, 93, 177, 0.4));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 80px rgba(108, 140, 255, 0.12);
}

.login-panel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: loginCardShine 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.login-panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: clamp(18px, 4vw, 24px);
  border-radius: 22px;
  background:
    linear-gradient(165deg, rgba(22, 28, 56, 0.92) 0%, rgba(14, 18, 38, 0.96) 55%, rgba(10, 12, 28, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  max-height: min(70dvh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.login-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.login-panel-head--flags {
  justify-content: center;
  margin-bottom: 0;
}

.login-panel-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.login-panel-brand-title {
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  background: linear-gradient(135deg, #ffd23d 0%, #ff8a5b 42%, #d98bff 78%, #8aa4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-panel-brand-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa8c8;
}

.login-panel-head .lang-flags {
  margin: 0;
  flex-shrink: 0;
}

.login-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8b4d4;
  padding-left: 2px;
}

.login-field-hint {
  font-size: 11px;
  line-height: 1.4;
  color: #8892b0;
  margin-top: -2px;
}

.login-field--pass .pass-field {
  width: 100%;
}
.login-version-badge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--login-version-h);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffffcc;
  background: transparent;
  border-top: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.app-version-footer {
  display: none;
}
.login-panel .login-submit,
.login-panel #play {
  margin-top: 4px;
}
.login-panel input {
  width: 100%;
  max-width: none;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 8, 20, 0.82);
  color: #fff;
  font-size: 16px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.login-panel input::placeholder {
  color: #6b7594;
}

.login-panel input:focus {
  outline: none;
  border-color: rgba(255, 210, 61, 0.55);
  background: rgba(8, 10, 26, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 180, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.login-panel .pass-field {
  position: relative; width: 100%; max-width: none;
}
.login-panel .pass-field input {
  max-width: none; padding-right: 48px;
}
.pass-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
.pass-toggle:active { background: #ffffff10; }
.pass-eye--hide { display: none; }
.pass-toggle--on .pass-eye--show { display: none; }
.pass-toggle--on .pass-eye--hide { display: inline; }
.login-hint { font-size: 11px; max-width: none; margin: 0; line-height: 1.5; text-align: left; color: #b8c0d8; }
.login-hint b { color: #e8ecff; }
.login-submit {
  width: 100%;
  max-width: none;
  min-height: 52px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd23d 0%, #ff8a3d 38%, #ff5db1 100%);
  color: #1a1024;
  box-shadow: 0 10px 28px rgba(255, 138, 61, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.login-submit:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 18px rgba(255, 138, 61, 0.32);
}

.login-submit.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #c8d0ea;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  font-weight: 800;
}

.login-tabs {
  display: flex;
  gap: 6px;
  max-width: none;
  width: 100%;
  padding: 4px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-tab {
  flex: 1;
  padding: 11px 8px;
  border-radius: 10px;
  background: transparent;
  color: #98a2c0;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid transparent;
  touch-action: manipulation;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.login-tab.active {
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.95), rgba(90, 114, 232, 0.98));
  color: #fff;
  border-color: rgba(170, 190, 255, 0.45);
  box-shadow: 0 8px 20px rgba(108, 140, 255, 0.35);
}

@keyframes loginBobL {
  0%, 100% { transform: scaleX(-1) translate(0, 0); filter: brightness(1); }
  38% { transform: scaleX(-1) translate(22px, -6px) scale(1.04); filter: brightness(1.15); }
  42% { transform: scaleX(-1) translate(28px, -3px); filter: brightness(1.25); }
  55% { transform: scaleX(-1) translate(6px, 0); filter: brightness(1); }
}
@keyframes loginBobR {
  0%, 100% { transform: translate(0, 0); filter: brightness(1); }
  38% { transform: translate(-22px, -6px) scale(1.04); filter: brightness(1.15); }
  42% { transform: translate(-28px, -3px); filter: brightness(1.25); }
  55% { transform: translate(-6px, 0); filter: brightness(1); }
}
@keyframes loginMeleeSwing {
  0%, 100%, 50% { opacity: 0; transform: translateY(-50%) scaleX(0.3); }
  38%, 44% { opacity: 1; transform: translateY(-50%) scaleX(1.1); }
  48% { opacity: 0; transform: translateY(-50%) scaleX(1.3); }
}
@keyframes loginMeleeImpact {
  0%, 100%, 36% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  40%, 46% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  52% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
@keyframes loginClashBurst {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  38%, 46% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
  55% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
@keyframes loginArenaShake {
  0%, 100%, 35%, 50% { transform: translate(0); }
  40% { transform: translate(-2px, 1px); }
  42% { transform: translate(2px, -1px); }
  44% { transform: translate(-1px, 1px); }
}
@keyframes loginProjFlyL {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12% { opacity: 1; }
  50% { transform: translate(95px, -4px) scale(1); opacity: 1; }
  65%, 100% { transform: translate(115px, 0) scale(0); opacity: 0; }
}
@keyframes loginProjFlyR {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12% { opacity: 1; }
  50% { transform: translate(-95px, -4px) scale(1); opacity: 1; }
  65%, 100% { transform: translate(-115px, 0) scale(0); opacity: 0; }
}
@keyframes loginSpark {
  0% { opacity: 0; transform: scale(0); }
  38% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0) translateY(-18px); }
}
@keyframes loginRingPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  42% { opacity: 0.8; transform: translateX(-50%) scale(1.02); }
}
@keyframes loginCoverKenBurns {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes loginLetterIn {
  from {
    opacity: 0;
    transform: translateY(-22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginLetterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes loginClashGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(108, 140, 255, 0.35); }
  50% { text-shadow: 0 0 20px rgba(255, 126, 196, 0.65), 0 0 8px rgba(108, 140, 255, 0.5); }
}

@keyframes loginTagFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes loginTitleBar {
  from { opacity: 0; transform: scaleX(0.2); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes loginTitleBarShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes loginCardShine {
  0%, 72%, 100% { transform: translateX(-120%); opacity: 0; }
  78% { opacity: 1; }
  92% { transform: translateX(120%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .login-bg-media,
  .login-panel-card::before,
  .login-title-letter-wrap,
  .login-title-tag,
  .login-title-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .login-title-letter-wrap--clash .login-title-letter {
    animation: none !important;
    text-shadow: none !important;
  }
  .login-title-bar { transform: scaleX(1) !important; }
}
.admin-list-head { display: none; }
.admin-user-row { cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 12px 14px !important; touch-action: manipulation; }
.admin-user-row:active { background: #ffffff08; }
.admin-user-id { font-weight: 900; color: var(--muted); font-size: 12px; }
.admin-user-main { min-width: 0; }
.admin-user-name { font-weight: 800; font-size: clamp(14px, 4vw, 16px); line-height: 1.25; word-break: break-word; }
.admin-user-email { color: var(--text, #e8eaf0); font-weight: 600; }
.admin-user-sub { font-size: clamp(10px, 2.8vw, 11px); line-height: 1.35; margin-top: 3px; word-break: break-word; }
.admin-user-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-user-stat { background: var(--card2); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.admin-summary { line-height: 1.45; }
.admin-ref-block { display: flex; flex-direction: column; gap: 10px; }
.admin-ref-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.admin-ref-list { display: flex; flex-direction: column; gap: 8px; }
.admin-ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid #ffffff0a; }
.admin-ref-row:first-child { border-top: none; padding-top: 0; }
.admin-ref-date { font-size: 11px; }
.admin-ref-pvp { font-size: 11px; font-variant-numeric: tabular-nums; }
.admin-ref-rewards { display: flex; flex-wrap: wrap; gap: 4px; }
.btn.linkish { background: none; border: none; padding: 0; color: var(--accent, #7eb8ff); font-weight: 800; font-size: inherit; text-align: left; cursor: pointer; }
.btn.linkish:hover { text-decoration: underline; }
.admin-mon-row .row { margin-bottom: 6px; }
@media (min-width: 420px) {
  .admin-user-row { display: grid !important; grid-template-columns: 28px 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 14px !important; }
  .admin-user-row:hover { background: #ffffff08; }
  .admin-user-id { align-self: start; margin-top: 2px; }
  .admin-user-stats { flex-direction: column; align-items: flex-end; gap: 2px; }
  .admin-user-stat { background: none; padding: 0; font-size: 11px; }
}
@media (min-width: 520px) {
  .admin-list-head { display: grid; grid-template-columns: 28px 1fr 44px 52px 36px; gap: 6px; font-size: 10px; font-weight: 800; padding: 0 14px 6px; text-transform: uppercase; }
  .admin-user-row { grid-template-columns: 28px 1fr 44px 52px 36px; align-items: center; }
  .admin-user-stats { display: contents; flex-direction: row; }
  .admin-user-stat { font-size: 12px; font-weight: 800; }
  .admin-user-stat:nth-child(1) { grid-column: 3; text-align: right; }
  .admin-user-stat:nth-child(2) { grid-column: 4; text-align: right; }
  .admin-user-stat:nth-child(3) { grid-column: 5; text-align: right; }
}
.hero-mons { display: flex; gap: -10px; }

/* --- Starter choose (cinem?tica estilo RPG) --- */
.starter-cinematic {
  position: relative;
  width: 100%;
  max-width: 920px;
  min-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px 28px;
  overflow: hidden;
}
.starter-cinematic__bg {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, #6c8cff44 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 20% 20%, #ff5db122 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 25%, #5fd66f22 0%, transparent 45%),
    linear-gradient(180deg, #0a0c1f 0%, #121633 45%, #1a1040 100%);
  animation: starterBgPulse 6s ease-in-out infinite alternate;
  z-index: 0;
}
.starter-cinematic__particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #ffffff88 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 20%, #ffffff55 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, #6c8cff66 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 60%, #ffd23d55 0%, transparent 100%);
  background-size: 100% 100%;
  opacity: 0.5;
  animation: starterParticles 8s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.starter-cinematic__vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px #000000aa;
  pointer-events: none;
  z-index: 1;
}
.starter-intro,
.starter-pick {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
.starter-intro__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.28em;
  color: #ffd23d;
  text-shadow: 0 0 20px #ffd23d88;
  margin-bottom: 16px;
  animation: starterFadeUp 0.8s ease both;
}
.starter-intro__title {
  font-size: clamp(26px, 6vw, 40px);
  margin: 0 0 12px;
  animation: starterFadeUp 0.9s ease 0.15s both;
  text-shadow: 0 4px 24px #6c8cff66;
}
.starter-intro__line {
  font-size: clamp(14px, 3.5vw, 17px);
  color: var(--muted);
  margin: 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
.starter-intro__line--1 { animation: starterFadeUp 0.9s ease 0.35s both; }
.starter-intro__line--2 { animation: starterFadeUp 0.9s ease 0.55s both; margin-top: 8px; }
.starter-intro__pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin: 28px auto 0;
  box-shadow: 0 0 0 0 #6c8cff88;
  animation: starterPulse 1.4s ease infinite, starterFadeUp 0.6s ease 0.8s both;
}
.starter-intro--out {
  animation: starterIntroOut 0.65s ease forwards;
  pointer-events: none;
}
.starter-pick--hidden { opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.98); }
.starter-pick--in {
  animation: starterPickIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  visibility: visible;
}
.starter-pick__title {
  font-size: clamp(20px, 4.5vw, 30px);
  margin: 0 0 6px;
}
.starter-pick__sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
}
.starter-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 0 8px;
}
.starter-stage__floor {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 8px;
  height: 28px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, #6c8cff33 0%, transparent 70%);
  filter: blur(4px);
}
.starter-grid--cinematic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.starter-card {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0 0 10px;
  cursor: pointer;
  text-align: center;
  color: inherit;
  font: inherit;
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  animation: starterCardIn 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) var(--stagger, 0s) forwards;
  transition: transform 0.2s ease, filter 0.25s ease;
}
.starter-pick--in .starter-card { /* animation triggered when parent gets --in */ }
.starter-grid--cinematic:has(.starter-card) .starter-card { /* noop */ }
.starter-pick--in .starter-grid .starter-card {
  animation: starterCardIn 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) var(--stagger, 0s) forwards;
}
.starter-card__platform {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 42px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, var(--type-color, #6c8cff) 0%, transparent 72%);
  opacity: 0.45;
  transition: opacity 0.25s, transform 0.25s;
}
.starter-card__beam {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: 70%;
  height: 55%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--type-color, #6c8cff) 100%);
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.3s;
  pointer-events: none;
}
.starter-card__sprite {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 8px 4px 4px;
  animation: starterBob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--stagger, 0s) + 0.5s);
}
.starter-card__sprite svg,
.starter-card__sprite .klax-img {
  width: clamp(72px, 22vw, 100px) !important;
  height: auto !important;
  filter: drop-shadow(0 8px 16px #00000066);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.starter-card__info {
  position: relative;
  z-index: 2;
  background: #161a33cc;
  border: 2px solid #ffffff14;
  border-radius: 14px;
  padding: 8px 6px 10px;
  margin: 0 2px;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.starter-name { font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.starter-card__tag { font-size: 10px; margin-top: 6px; line-height: 1.2; }
.starter-card:hover .starter-card__info,
.starter-card:focus-visible .starter-card__info {
  border-color: color-mix(in srgb, var(--type-color) 55%, transparent);
  transform: translateY(-2px);
}
.starter-card:hover .starter-card__sprite svg,
.starter-card:hover .starter-card__sprite .klax-img {
  transform: scale(1.06);
}
.starter-card.sel .starter-card__info {
  border-color: var(--type-color);
  box-shadow: 0 0 24px color-mix(in srgb, var(--type-color) 45%, transparent), 0 12px 28px #00000055;
  transform: translateY(-6px) scale(1.03);
}
.starter-card.sel .starter-card__beam { opacity: 0.35; }
.starter-card.sel .starter-card__platform { opacity: 0.85; transform: scale(1.15); }
.starter-card.sel .starter-card__sprite svg,
.starter-card.sel .starter-card__sprite .klax-img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 18px var(--type-color)) drop-shadow(0 8px 16px #00000088);
  animation: starterBobSel 1.1s ease-in-out infinite;
}
.starter-grid--cinematic:has(.starter-card.sel) .starter-card:not(.sel) {
  opacity: 0.55;
  filter: grayscale(0.35) brightness(0.75);
  transform: scale(0.94);
}
.starter-detail {
  width: 100%;
  max-width: 420px;
  margin: 16px auto 0;
  padding: 12px 14px;
  background: #161a33dd;
  border: 2px solid #ffffff18;
  border-radius: 14px;
  text-align: left;
  min-height: 88px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.starter-detail--empty { text-align: center; display: flex; align-items: center; justify-content: center; }
.starter-detail:not(.starter-detail--empty) {
  border-color: #6c8cff55;
  box-shadow: 0 8px 28px #00000044;
  animation: starterFadeUp 0.35s ease;
}
.starter-detail__head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.starter-detail__name { font-weight: 800; font-size: 16px; }
.starter-detail__flavor { font-size: 13px; margin: 0 0 6px; line-height: 1.4; }
.starter-detail__stats { font-size: 11px; margin: 0; }
.starter-confirm {
  width: 100%;
  max-width: 340px;
  margin-top: 16px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 800;
  opacity: 0.45;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
}
.starter-confirm--ready {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 8px 28px #6c8cff55;
  animation: starterConfirmPulse 2s ease-in-out infinite;
}
.starter-cinematic--confirming .starter-card.sel .starter-card__sprite {
  animation: starterConfirmFlash 0.5s ease 3;
}
.starter-cinematic--catching {
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.starter-cinematic--exit {
  animation: starterCinematicExit 0.72s ease forwards;
  pointer-events: none;
}

body.starter-active { overflow: hidden; }
body.starter-active #app {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: 16px 12px !important;
  margin: 0 auto !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-template-areas: none !important;
}

@keyframes starterBgPulse {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.04) translateY(-1%); }
}
@keyframes starterParticles {
  0% { transform: translateY(0); opacity: 0.45; }
  50% { opacity: 0.65; }
  100% { transform: translateY(-12px); opacity: 0.45; }
}
@keyframes starterFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes starterIntroOut {
  to { opacity: 0; transform: scale(1.04); filter: blur(4px); }
}
@keyframes starterPickIn {
  from { opacity: 0; visibility: hidden; transform: translateY(28px) scale(0.96); }
  to { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
}
@keyframes starterCardIn {
  from { opacity: 0; transform: translateY(48px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes starterBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes starterBobSel {
  0%, 100% { transform: scale(1.12) translateY(0); }
  50% { transform: scale(1.12) translateY(-8px); }
}
@keyframes starterConfirmPulse {
  0%, 100% { box-shadow: 0 8px 28px #6c8cff55; }
  50% { box-shadow: 0 8px 36px #6c8cff99, 0 0 0 4px #6c8cff22; }
}
@keyframes starterConfirmFlash {
  0%, 100% { filter: drop-shadow(0 0 18px var(--type-color)) brightness(1); }
  50% { filter: drop-shadow(0 0 28px #fff) brightness(1.25); }
}
@keyframes starterCinematicExit {
  0% { opacity: 1; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.03); filter: brightness(1.4); }
  100% { opacity: 0; transform: scale(1.08); filter: brightness(2); }
}
@keyframes starterPulse {
  0% { box-shadow: 0 0 0 0 #6c8cff88; }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* legacy aliases */
.starter-screen { width: 100%; max-width: 720px; }
.starter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.starter { background: var(--card); border-radius: 16px; padding: 10px 6px; text-align: center; border: 3px solid transparent; transition: .15s; }
.starter.sel { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 24px #6c8cff55; }

.countdown { font-variant-numeric: tabular-nums; font-weight: 800; }
/* Shop: misma rejilla/tama?o de tarjeta que el Market */
.shopgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 16px;
}
.invgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px; }
.shop-page { padding-bottom: 8px; }
.shop-page .shopgrid:last-of-type { margin-bottom: 4px; }
.shop-admin-prices .admin-grid { margin: 0; }

.mission-reward-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 4px;
  font-size: 11px;
}
.mission-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mission-reward-chip .item-icon { flex-shrink: 0; }
.mission-reward-sep { opacity: 0.55; user-select: none; }
.shop-item, .inv-item { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.shop-item {
  border: 1px solid #ffffff12;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
}
.shopgrid { align-items: stretch; }
.shop-item-desc {
  font-size: 11px;
  flex: 1 1 auto;
  width: 100%;
}
.shop-item-price { font-size: 11px; width: 100%; }
.shop-item-actions {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-top: 4px;
}
.shop-item:not(:has(.shop-item-actions)) > .shop-qty-label { margin-top: auto; width: 100%; }
.shop-item:not(:has(.shop-item-actions)):not(:has(.shop-qty-label)) > .btn:last-child {
  margin-top: auto;
  width: 100%;
}
.shop-item-actions .shop-qty-label { margin-bottom: 0; }
.shop-item--promo {
  position: relative;
  border: 1px solid rgba(255, 180, 61, 0.45);
  background: linear-gradient(145deg, rgba(255, 180, 61, 0.12), var(--card) 55%);
}
.shop-item--promo .shop-promo-ic {
  margin: 4px auto 8px;
  filter: drop-shadow(0 4px 14px #0008) drop-shadow(0 0 16px #fb923c66);
}
.shop-item--promo .shop-promo-ic .item-icon--lg {
  width: 50px;
  height: 50px;
}
.shop-promo-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #ffb43d;
  margin-bottom: 6px;
}
.shop-promo-grid { margin-bottom: 8px; }
.admin-promo-row .admin-grid { gap: 8px; }
.inv-item .ic { position: relative; display: inline-flex; }
.inv-item--new .ic::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  background: var(--bad);
  border-radius: 50%;
  border: 2px solid var(--card);
  box-shadow: 0 0 6px #ff5d6c88;
  animation: spawnPulse 1.6s ease-in-out infinite;
}
.shop-qty-label {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  width: 100%; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--muted);
}
.shop-qty {
  width: 100%; padding: 8px 10px; border-radius: 10px; border: 2px solid #ffffff18;
  background: var(--card2); color: #fff; font-size: 15px; font-weight: 800; text-align: center;
}
.shop-buy-btn { width: 100%; }
.stars-buy-card .stars-buy-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.stars-buy-card .stars-buy-label input { width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid #ffffff18; background: var(--card2); color: var(--txt); font-size: 16px; font-weight: 800; }
.stars-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stars-quote { background: var(--card2); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.stars-quote-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 8px; }
.stars-quote-row + .stars-quote-row { margin-top: 6px; }
.stars-quote-total { font-size: 15px; padding-top: 6px; border-top: 1px solid #ffffff12; }
.stars-buy-err { color: var(--bad); font-size: 12px; font-weight: 700; margin-top: 6px; }
.admin-pricing-divider { border-top: 1px solid #ffffff12; padding-top: 10px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #ffffff10;
}
.rank-public-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.rank-public-tab {
  border: 1px solid #ffffff18;
  background: var(--card);
  color: var(--txt);
  border-radius: 999px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  opacity: 0.78;
}
.rank-public-tab.active {
  opacity: 1;
  border-color: #5fd08a88;
  background: linear-gradient(135deg, #5fd08a33, var(--card));
  box-shadow: 0 0 0 1px #5fd08a44;
}
.lb-row__rank,
.lb-row .rank {
  font-weight: 900;
  color: var(--warn);
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.lb-row__body {
  flex: 1;
  min-width: 0;
}
.lb-row__line1 {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.lb-row__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.lb-row__prize-stars {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd23d33, #f59e0b22);
  border: 1px solid #ffd23d55;
  color: #ffe566;
  white-space: nowrap;
  text-shadow: 0 1px 4px #0008;
}
.lb-row__prize--gold {
  background: linear-gradient(135deg, #ffd23d55, #f59e0b33);
  border-color: #ffd23d88;
  color: #fff3bf;
  box-shadow: 0 0 12px #ffd23d44;
}
.lb-row__prize--silver {
  background: linear-gradient(135deg, #e2e8f044, #94a3b833);
  border-color: #cbd5e188;
  color: #f1f5f9;
}
.lb-row__prize--bronze {
  background: linear-gradient(135deg, #fb923c44, #ea580c33);
  border-color: #fb923c77;
  color: #ffedd5;
}
.lb-row__prize--top {
  background: linear-gradient(135deg, #6c8cff33, #ff5db122);
  border-color: #6c8cff66;
  color: #c7d4ff;
}
.lb-row__line2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.lb-row__tier { font-size: 10px; }
.lb-row__record { font-size: 11px; }
.lb-row__elo {
  font-weight: 800;
  flex-shrink: 0;
  font-size: 15px;
  min-width: 36px;
  text-align: right;
  line-height: 1;
}
.rank-self-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
}
.lb-pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px;
  padding: 12px 14px; border-top: 1px solid #ffffff10;
}
.lb-page-info { font-size: 12px; text-align: center; }
.lb-page-btn { min-width: 96px; }

/* ============ Fondos de batalla (pixel art HGSS) ============ */
.bg-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-scene--pixel { background: #06070f; }
.bg-scene__pixel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Legacy layers (preview / fallback) */
.bg-scene__sky { position: absolute; left: 0; right: 0; top: 0; height: 52%; }
.bg-scene__hills { position: absolute; left: -8%; right: -8%; top: 28%; height: 38%; }
.bg-scene__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; }
.bg-scene__platform {
  position: absolute;
  border-radius: 50%;
  transform: rotateX(52deg);
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -7px 0 rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.12);
}
.bg-scene__platform--enemy { width: 46%; height: 15%; top: 36%; right: 6%; }
.bg-scene__platform--player { width: 58%; height: 17%; bottom: 11%; left: 2%; }

.arena-vignette { display: none; }

/* Veredicto grande al terminar el combate */
.battle-verdict {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.55);
  z-index: 25;
  font-size: clamp(2.4rem, 14vw, 4.2rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-shadow: 0 0 40px currentColor, 0 6px 28px rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.battle-verdict.win { color: #ffd23d; }
.battle-verdict.lose { color: #ff4757; }
.battle-verdict.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: verdictPop 0.55s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.battle-verdict.fade {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.12);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
@keyframes verdictPop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ============ Activaci?n pase de batalla ============ */
.pass-activate-overlay {
  position: fixed; inset: 0; z-index: 220;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  background: #06070fcc;
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.pass-activate-panel {
  position: relative; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center;
  margin: auto; flex-shrink: 0;
}
.pass-activate-overlay.show { opacity: 1; pointer-events: auto; }
.pass-activate-overlay.hide { opacity: 0; pointer-events: none; }
.elo-bomb-overlay { z-index: 240; }
.elo-bomb-overlay .pass-activate-ticket {
  font-size: 140px;
  line-height: 1;
}
.elo-bomb-overlay .pass-activate-ticket .item-icon,
.elo-bomb-overlay .pass-activate-ticket .item-icon--lg {
  width: 140px;
  height: 140px;
  filter: drop-shadow(0 10px 22px #0009);
}
.elo-bomb-overlay .pass-activate-ticket .item-icon--wide,
.elo-bomb-overlay .pass-activate-ticket .item-icon--wide.item-icon--lg {
  width: calc(140px * var(--wide-item-aspect));
  height: 140px;
}
.elo-bomb-overlay .pass-activate-ring {
  width: 180px;
  height: 180px;
}
.elo-bomb-burst {
  background: radial-gradient(circle, #ff5a5a66 0%, #ff8a5b33 35%, transparent 68%);
}
.elo-bomb-ring { border-color: #ff6b6b88; }
.pass-activate-burst {
  position: absolute; width: min(120vw, 520px); height: min(120vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffd23d55 0%, #ff8a5b33 35%, transparent 68%);
  transform: scale(0.2); opacity: 0;
}
.pass-activate-overlay.show .pass-activate-burst {
  animation: passBurst 1.1s ease-out forwards;
}
@keyframes passBurst {
  0% { transform: scale(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0.35; }
}
.pass-activate-ring {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 3px solid #ffd23d88;
  box-shadow: 0 0 24px #ffd23d66, inset 0 0 20px #ff8a5b44;
  transform: scale(0.4); opacity: 0;
}
.pass-activate-overlay.show .pass-activate-ring {
  animation: passRing 1.4s ease-out .15s forwards;
}
@keyframes passRing {
  0% { transform: scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.pass-activate-sparks {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.pass-activate-spark {
  position: absolute; left: 50%; top: 46%; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd23d, #ff8a5b);
  box-shadow: 0 0 10px #ffd23d;
  opacity: 0;
}
.pass-activate-overlay.show .pass-activate-spark {
  animation: passSpark .85s ease-out var(--delay, 0s) forwards;
}
@keyframes passSpark {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.3); opacity: 0; }
}
.pass-activate-ticket {
  font-size: 72px; line-height: 1; z-index: 1;
  filter: drop-shadow(0 8px 16px #0008);
  transform: scale(0) rotate(-18deg); opacity: 0;
}
.pass-activate-overlay.show .pass-activate-ticket {
  animation: passTicketPop .7s cubic-bezier(0.34, 1.45, 0.64, 1) .2s forwards;
}
@keyframes passTicketPop {
  0% { transform: scale(0) rotate(-18deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.pass-activate-title {
  margin-top: 12px; z-index: 1;
  font-size: clamp(22px, 6vw, 30px); font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(135deg, #ffd23d, #ff8a5b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(16px); opacity: 0;
}
.pass-activate-overlay.show .pass-activate-title {
  animation: passTitleIn .55s ease-out .55s forwards;
}
@keyframes passTitleIn {
  to { transform: translateY(0); opacity: 1; }
}
.pass-activate-perks {
  margin-top: 4px; z-index: 1; display: flex; flex-direction: column; gap: 8px;
  max-width: 320px; width: 100%;
}
.pass-perks-title--activate {
  margin-top: 14px; z-index: 1;
  transform: translateY(12px); opacity: 0;
}
.pass-activate-overlay.show .pass-perks-title--activate {
  animation: passTitleIn .45s ease-out .72s forwards;
}
.pass-perk-row--reveal {
  opacity: 0; transform: translateY(12px);
}
.pass-activate-overlay.show .pass-perk-row--reveal {
  animation: passPerkIn .45s ease-out var(--delay, 0.85s) forwards;
}
@keyframes passPerkIn {
  to { opacity: 1; transform: translateY(0); }
}
.pass-perks-card {
  margin-top: 12px; text-align: left; width: 100%; max-width: 340px;
  margin-left: auto; margin-right: auto;
}
.pass-perks-card--active { margin-top: 10px; }
.pass-perks-title {
  font-size: 11px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.pass-perks-foot { font-size: 12px; margin: 10px 0 0; text-align: center; }
/* PvP Auto ON/OFF en pesta?a Pases (solo si el admin otorg? acceso) */
.pass-autopvp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 clamp(12px, 4vw, 16px) 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid #ffffff12;
}
.pass-autopvp__lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.pass-autopvp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ffffff22;
  background: var(--card2);
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #ffffff0a, 0 2px 8px #0004;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pass-autopvp__btn:hover {
  border-color: #ffffff44;
}
.pass-autopvp__btn:active { transform: scale(.92); }
.pass-autopvp__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 6px #2ecc7188;
  transition: background .12s ease, box-shadow .12s ease;
}
.pass-autopvp__btn.is-off .pass-autopvp__dot {
  background: #e74c3c;
  box-shadow: 0 0 6px #e74c3c88;
}
.passes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 clamp(12px, 4vw, 16px) calc(12px + env(safe-area-inset-bottom, 0px));
}
.passes-grid > .pass-card { margin: 0; }
@media (max-width: 480px) {
  .passes-grid {
    gap: 8px;
    margin-left: 8px;
    margin-right: 8px;
  }
  .passes-grid > .pass-card { padding: 10px; }
  .passes-grid > .pass-card > div:first-child { font-size: 36px !important; }
  .passes-grid > .pass-card h2 { font-size: 17px; }
  .passes-grid .pass-perk-row { gap: 6px; padding: 7px; }
  .passes-grid .pass-perk-icon { width: 32px; height: 32px; border-radius: 9px; }
  .passes-grid .pass-perk-emoji { font-size: 19px; }
  .passes-grid .pass-perk-icon .item-icon { width: 22px; height: 22px; }
  .passes-grid .pass-perk-text { font-size: 11px; }
  .passes-grid .pass-price-block { padding: 10px; }
  .passes-grid .btn { width: 100%; padding: 10px 6px; font-size: 12px; }
}
.pass-card--adventure h2 { margin-top: 4px; }
.pass-adventure-burst {
  background: radial-gradient(circle, #6c8cff55 0%, #9b7dff33 35%, transparent 68%);
}
.pass-adventure-ring {
  border-color: #6c8cff88;
  box-shadow: 0 0 24px #6c8cff66, inset 0 0 20px #9b7dff44;
}
.pass-adventure-title {
  background: linear-gradient(135deg, #6c8cff, #9b7dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pass-price-block {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--card2); border: 1px solid #ffffff14;
  max-width: 340px; margin-left: auto; margin-right: auto;
}
.pass-price-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pass-price-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pass-price-old {
  font-size: 18px; font-weight: 700; color: #ffffff55;
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.pass-price-new { font-size: 26px; font-weight: 900; color: #ffd23d; }
.pass-price-badge {
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #ffd23d, #ff8a5b); color: #012;
}
.pass-price-note { font-size: 11px; margin: 8px 0 0; }
.pass-perk-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card2); border: 1px solid #ffffff12;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.pass-perk-row:last-child { margin-bottom: 0; }
.pass-activate-perks .pass-perk-row {
  background: #0b0f22dd; border-color: #ffd23d44;
  font-size: 14px; font-weight: 700; box-shadow: var(--shadow);
}
.pass-perk-icon {
  flex-shrink: 0; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: #0e1020aa; border-radius: 12px; border: 1px solid #ffffff14;
  line-height: 1;
}
.pass-perk-emoji { font-size: 24px; }
.pass-perk-icon .item-icon { width: 28px; height: 28px; object-fit: contain; }
.pass-perk-icon .item-icon--klaxball { width: calc(28px * var(--klaxball-scale)); height: calc(28px * var(--klaxball-scale)); }
.pass-perk-icon .item-icon--cebo { width: calc(28px * var(--cebo-scale)); height: calc(28px * var(--cebo-scale)); }
.pass-perk-icon .item-icon--wide { width: calc(28px * var(--wide-item-aspect)); height: 28px; }
.pass-perk-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; text-align: left; }
.pass-activate-perks .pass-perk-text { font-size: 14px; }
.wiki-pass-perks { margin: 8px 0 0; padding-left: 0; list-style: none; }
.wiki-pass-perks li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wiki-pass-perks .item-icon { flex-shrink: 0; }
.pass-activate-perk {
  background: #0b0f22dd; border: 1px solid #ffd23d44;
  border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow);
}
.pass-activate-btn {
  margin-top: 18px; z-index: 1; min-width: 160px;
  background: linear-gradient(135deg, #ffd23d, #ff8a5b); color: #012; border: none;
  transform: scale(0.9); opacity: 0;
}
.pass-activate-overlay.show .pass-activate-btn {
  animation: passBtnIn .45s ease-out 1.15s forwards;
}
@keyframes passBtnIn {
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pass-activate-overlay.show .pass-activate-burst,
  .pass-activate-overlay.show .pass-activate-ring,
  .pass-activate-overlay.show .pass-activate-spark,
  .pass-activate-overlay.show .pass-activate-ticket,
  .pass-activate-overlay.show .pass-activate-title,
  .pass-activate-overlay.show .pass-perks-title--activate,
  .pass-activate-overlay.show .pass-perk-row--reveal,
  .pass-activate-overlay.show .pass-activate-btn {
    animation: none !important;
    opacity: 1 !important; transform: none !important;
  }
}

.arena-field.shake { animation: fieldShake .32s; }
.arena-field.shake-hard { animation: fieldShakeHard .42s; }
@keyframes fieldShake { 0%,100%{transform:translate(0)} 25%{transform:translate(-4px,2px)} 75%{transform:translate(4px,-2px)} }
@keyframes fieldShakeHard { 0%,100%{transform:translate(0)} 20%{transform:translate(-7px,3px)} 40%{transform:translate(7px,-3px)} 60%{transform:translate(-5px,2px)} 80%{transform:translate(5px,-2px)} }
.sprite.charge { filter: drop-shadow(0 0 16px #fff8) brightness(1.15); transform: scale(1.04); }
.sprite.enemy.charge { transform: scaleX(-1) scale(1.04); }
.sprite.enter-player { animation: enterP .55s ease-out forwards; opacity: 0; }
.sprite.enter-enemy { animation: enterE .55s ease-out forwards; opacity: 0; }
@keyframes enterP { from { opacity: 0; transform: translateY(28px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes enterE { from { opacity: 0; transform: scaleX(-1) translateY(-22px) scale(.85); } to { opacity: 1; transform: scaleX(-1) translateY(0) scale(1); } }
/* PvP Manual: retirada del Klax actual antes de la entrada del nuevo */
.sprite.mpvp-retreat-player { animation: mpvpRetreatP .48s ease-in forwards; }
.sprite.mpvp-retreat-enemy { animation: mpvpRetreatE .48s ease-in forwards; }
@keyframes mpvpRetreatP {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-48%) translateY(18px) scale(0.62); }
}
@keyframes mpvpRetreatE {
  0% { opacity: 1; transform: scaleX(-1) translateY(0) scale(1); }
  100% { opacity: 0; transform: scaleX(-1) translateX(-48%) translateY(18px) scale(0.62); }
}
.move-banner {
  position: relative; z-index: 1;
  background: #0b0f22e6; border: 2px solid var(--mc, #6c8cff); border-radius: 999px; padding: 8px 16px;
  font-weight: 800; font-size: 13px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  box-shadow: 0 4px 20px #0006; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  text-align: center; transform: translateY(6px) scale(.96);
}
.move-banner.show { opacity: 1; transform: translateY(0) scale(1); }
.move-banner-actor { color: var(--mc, #6c8cff); }
.eff-float { position: absolute; font-weight: 900; font-size: 13px; pointer-events: none; z-index: 6;
  animation: effPop .9s forwards; text-shadow: 0 2px 6px #000; }
.eff-float.super { color: #7ee8a0; }
.eff-float.weak { color: #b8c0cc; font-size: 12px; }
.eff-float.good { color: #4ee08a; }
.evade-dodge { animation: evadeDodge 0.45s ease; }
@keyframes evadeDodge {
  0% { transform: translateX(0); }
  35% { transform: translateX(26px) rotate(6deg); opacity: 0.65; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes effPop { 0% { opacity: 0; transform: scale(.7) translateY(8px); } 20% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: translateY(-18px); } }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 5;
  animation: sparkFly .45s ease-out forwards; }
@keyframes sparkFly { to { transform: translate(var(--sx), var(--sy)); opacity: 0; } }
.proj-trail { position: absolute; height: 4px; width: 40px; border-radius: 999px; transform-origin: left center;
  opacity: 0; pointer-events: none; z-index: 5; transition: transform .28s ease-out, opacity .2s; filter: blur(1px); }
.fx.crit-fx { mix-blend-mode: screen; }
.lunge-player { transform: translate(30px, -22px) scale(1.08) !important; }
.lunge-enemy  { transform: scaleX(-1) translate(30px, 22px) scale(1.08) !important; }
.projectile { position: absolute; width: 22px; height: 22px; border-radius: 50%; z-index: 6;
  transition: transform .28s cubic-bezier(.25,.1,.25,1); pointer-events: none; }
.crit-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #fff, transparent 70%); opacity: 0; pointer-events: none; z-index: 7; transition: opacity .12s; }
.crit-flash.on { opacity: .45; }

.battle-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}
.battle-fx-node { position: absolute; pointer-events: none; }

.battle-hud-center {
  display: none;
}

.battle-hud-center:not(:empty) {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 22;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(92vw, 380px);
  padding: 0 8px;
  box-sizing: border-box;
}

/* ============ Combate ? acercamiento y efectos (battleFx.js) ============ */
.sprite.battle-charge {
  filter: drop-shadow(0 0 18px var(--ac, #fff)) brightness(1.2) saturate(1.15);
  transform: scale(1.06);
  animation: battleChargePulse .14s ease-in-out 2;
}
.sprite.enemy.battle-charge--enemy { transform: scaleX(-1) scale(1.06); }
@keyframes battleChargePulse { 50% { transform: scale(1.1); } }
.sprite.enemy.battle-charge--enemy { animation-name: battleChargePulseE; }
@keyframes battleChargePulseE { 50% { transform: scaleX(-1) scale(1.1); } }

.sprite.battle-approach {
  transform: translate(var(--ax, 0), var(--ay, 0)) scale(1.12) !important;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ac, #fff) 60%, transparent)) brightness(1.15);
  z-index: 7 !important;
}
.sprite.enemy.battle-approach--enemy {
  transform: scaleX(-1) translate(var(--ax, 0), var(--ay, 0)) scale(1.12) !important;
}

/* FX visuales ? solo dentro de la capa de efectos (no toolbar/log/botones) */
.battle-fx-layer .battle-proj {
  width: var(--sz, 24px); height: var(--sz, 24px); border-radius: 50%;
  transition: transform var(--dur, 320ms) cubic-bezier(.22,.85,.28,1);
  background: radial-gradient(circle, var(--c2, #fff) 12%, var(--c) 52%, color-mix(in srgb, var(--g, var(--c)) 35%, transparent) 78%);
  box-shadow: 0 0 16px var(--g, var(--c)), 0 0 28px color-mix(in srgb, var(--c) 55%, transparent);
  z-index: 15;
}

.battle-proj-trail {
  width: 4px; height: var(--len, 80px); transform-origin: center top;
  transform: rotate(calc(var(--ang, 0deg) - 90deg)) scaleY(0);
  background: linear-gradient(180deg, var(--c), transparent);
  opacity: .65; filter: blur(1px); transition: transform .28s ease-out, opacity .25s;
  z-index: 13;
}
.battle-proj-trail--stretch { transform: rotate(calc(var(--ang, 0deg) - 90deg)) scaleY(1); opacity: .4; }

.battle-beam {
  width: var(--len, 100px); height: 10px; transform-origin: 0 50%;
  transform: rotate(var(--ang, 0deg)) scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--g, var(--c)) 28%, var(--c2, #fff) 50%, var(--c) 72%, transparent 100%);
  box-shadow: 0 0 20px var(--g, var(--c)), 0 0 36px color-mix(in srgb, var(--c) 50%, transparent);
  animation: battleBeamFire .34s ease-out forwards;
  z-index: 15;
}
.battle-beam--wave { height: 16px; filter: blur(1px); animation: battleWaveFire .38s ease-out forwards; }
.battle-beam--fire { height: 14px; animation: battleBeamFire .3s ease-out forwards; }
.battle-beam--dragon {
  background: linear-gradient(90deg, transparent, #a855f7, #fff, #6366f1, transparent);
  box-shadow: 0 0 24px #a855f7;
}
@keyframes battleBeamFire { to { transform: rotate(var(--ang, 0deg)) scaleX(1); opacity: .95; } }
@keyframes battleWaveFire {
  0% { transform: rotate(var(--ang, 0deg)) scaleX(0) scaleY(.35); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(var(--ang, 0deg)) scaleX(1) scaleY(1); opacity: .88; }
}

.battle-bolt {
  width: 96px; height: 96px;
  background: conic-gradient(from 0deg, transparent, var(--c), #fff, var(--c), transparent);
  clip-path: polygon(50% 0%, 64% 36%, 98% 40%, 68% 62%, 80% 98%, 50% 74%, 20% 98%, 30% 62%, 2% 40%, 36% 36%);
  animation: battleBoltHit .34s ease-out forwards;
  filter: drop-shadow(0 0 14px var(--c));
}
@keyframes battleBoltHit {
  0% { transform: translate(-50%, -50%) scale(.15) rotate(-25deg); opacity: 0; }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(10deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: .92; }
}
@keyframes battleSparkJitter { 50% { transform: rotate(8deg) scale(1.08); } }

.battle-explosion {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, var(--c2, #fff) 0%, var(--c) 38%, color-mix(in srgb, var(--g, var(--c)) 55%, transparent) 70%);
  animation: battleExplode .58s ease-out forwards;
  box-shadow: 0 0 36px var(--g, var(--c)), 0 0 52px color-mix(in srgb, var(--c) 45%, transparent);
}
.battle-explosion--dragon { background: radial-gradient(circle, #fff, #a855f7, transparent 68%); }
@keyframes battleExplode { to { transform: translate(-50%, -50%) scale(5); opacity: 0; } }

.battle-impact {
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--c) 75%, var(--c2, #fff));
  box-shadow: 0 0 18px var(--g, var(--c));
  animation: battleImpactPop .4s ease-out forwards;
}
.battle-impact--slash { width: 96px; height: 44px; border-radius: 6px; border-width: 4px; animation: battleSlashPop .34s ease-out forwards; }
.battle-impact--bite { animation: battleBitePop .32s ease-out forwards; }
@keyframes battleImpactPop { to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes battleSlashPop { to { transform: translate(-50%, -50%) scale(1.9) rotate(-38deg); opacity: 0; } }
@keyframes battleBitePop { 50% { transform: translate(-50%, -50%) scale(1.35); } to { transform: translate(-50%, -50%) scale(.5); opacity: 0; } }

.battle-slash {
  width: 108px; height: 108px;
  background: linear-gradient(135deg, transparent 40%, var(--g, var(--c)) 47%, var(--c2, #fff) 50%, var(--c) 53%, transparent 60%);
  animation: battleSlashArc .36s ease-out forwards;
  filter: drop-shadow(0 0 10px var(--g, var(--c)));
}
.battle-slash--flip { transform: translate(-50%, -50%) scaleX(-1); }
@keyframes battleSlashArc {
  0% { transform: translate(-50%, -50%) scale(.25) rotate(-65deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.25) rotate(28deg); opacity: 0; }
}

.battle-leaf {
  width: 14px; height: 9px; border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, var(--c2, #b8ffb8), var(--c));
  box-shadow: 0 0 8px var(--g, var(--c));
  animation: battleLeafFly .58s ease-out forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes battleLeafFly { to { transform: translate(-50%, calc(-50% - 52px)) rotate(520deg); opacity: 0; } }

.battle-rockfall {
  width: 18px; height: 18px; border-radius: 35% 42% 30% 48%;
  background: linear-gradient(145deg, #e8e8e8, var(--c));
  animation: battleRockDrop .48s ease-in forwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes battleRockDrop { to { transform: translate(-50%, calc(-50% + 100px)) rotate(300deg); opacity: 0; } }

.battle-meteor {
  width: 40px; height: 40px; border-radius: 45% 50% 40% 55%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--c), #3a2818);
  box-shadow: 0 0 22px #ff8c42, 0 0 40px #ff450088;
  animation: battleMeteorFall .45s cubic-bezier(.55,.05,.9,.45) forwards;
}
@keyframes battleMeteorFall { to { transform: translate(-50%, calc(-50% + 130px)) scale(1.45); opacity: 0; } }

.battle-vortex {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--c2, #c4b5fd), var(--c), #1a0828, var(--g), var(--c2), transparent);
  box-shadow: 0 0 36px var(--g, #5b21b6), 0 0 56px var(--c, #8b5cf6);
  mix-blend-mode: screen;
  animation: battleVortexSpin .58s ease-out forwards;
}
@keyframes battleVortexSpin { to { transform: translate(-50%, -50%) scale(1.6) rotate(440deg); opacity: 0; } }

.battle-shadow,
.battle-shadow-orb {
  border-radius: 50%;
  mix-blend-mode: screen;
}
.battle-shadow {
  background: radial-gradient(circle, var(--c2, #c4b5fd) 0%, var(--c, #8b5cf6) 38%, #1a0a2e 58%, transparent 78%);
  box-shadow: 0 0 40px var(--g, #5b21b6), 0 0 70px var(--c, #8b5cf6);
}

.battle-shard {
  width: 9px; height: 24px; border-radius: 2px;
  background: linear-gradient(180deg, #fff, var(--c));
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  animation: battleShardBurst .44s ease-out forwards;
}
@keyframes battleShardBurst { to { transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(-54px) scale(.55); opacity: 0; } }

.battle-whip {
  width: var(--len, 90px); height: 7px; transform-origin: 0 50%;
  transform: rotate(var(--ang, 0deg)) scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, #2d5016, var(--c), #9ef06a);
  animation: battleWhipSnap .28s ease-out forwards;
  z-index: 15;
}
@keyframes battleWhipSnap {
  70% { transform: rotate(calc(var(--ang, 0deg) + 10deg)) scaleX(1); }
  100% { transform: rotate(var(--ang, 0deg)) scaleX(1); opacity: .75; }
}

.battle-ring {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--c);
  box-shadow: 0 0 14px var(--g, var(--c));
  animation: battleRingPop .5s ease-out forwards;
  animation-delay: var(--d, 0ms);
  mix-blend-mode: screen;
}
.battle-ring--crit { border-width: 4px; width: 60px; height: 60px; }
@keyframes battleRingPop { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

.battle-crit-burst {
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--c), transparent 66%);
  animation: battleCritBurst .32s ease-out forwards;
}
@keyframes battleCritBurst { to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }

.battle-spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; z-index: 16;
  animation: battleSparkFly .48s ease-out forwards;
}
@keyframes battleSparkFly { to { transform: translate(var(--sx), var(--sy)); opacity: 0; } }

.arena-field.bfx-flash-elec { animation: bfxFlashElec .2s; }
.arena-field.bfx-flash-frost { animation: bfxFlashFrost .24s; }
.arena-field.bfx-flash-shadow { animation: bfxFlashShadow .24s; }
.arena-field.bfx-hit-pulse { animation: bfxHitPulse .18s ease-out; }
@keyframes bfxFlashElec { 50% { filter: brightness(1.4) saturate(1.25); } }
@keyframes bfxFlashFrost { 50% { filter: brightness(1.25) hue-rotate(12deg); } }
@keyframes bfxFlashShadow { 50% { filter: brightness(0.82) contrast(1.25) saturate(1.35); } }
@keyframes bfxHitPulse { 50% { filter: brightness(1.18); } }

.move-banner-tag {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px;
  background: color-mix(in srgb, var(--mc, #6c8cff) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #6c8cff) 55%, transparent);
}
.move-banner-type {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 900;
  color: #fff; text-shadow: 0 1px 2px #0008;
  background: color-mix(in srgb, var(--mc, #6c8cff) 72%, #000);
  border: 1px solid color-mix(in srgb, var(--mc, #6c8cff) 85%, #fff);
}
.move-banner--bolt, .move-banner--explosion, .move-banner--dragon { box-shadow: 0 0 22px color-mix(in srgb, var(--mc) 45%, transparent); }

  @media (prefers-reduced-motion: reduce) {
  .sprite.battle-approach, .sprite.battle-charge { transition: none !important; animation: none !important; }
  .battle-fx-layer [class^="battle-"], .battle-fx-layer .battle-fx-node { animation-duration: .01ms !important; }
  .arena-field.bfx-flash-elec, .arena-field.bfx-flash-frost, .arena-field.bfx-flash-shadow, .arena-field.bfx-hit-pulse { animation: none !important; }
}

.thrown-ball { position: absolute; width: calc(36px * var(--klaxball-scale)); height: calc(36px * var(--klaxball-scale)); z-index: 8; pointer-events: none;
  background: url(/assets/klaxball.png) center/contain no-repeat;
  transition: transform .5s cubic-bezier(.3,-0.4,.7,1.4); }

/* ============ Evoluci?n ============ */
.evolving { animation: evoPulse 1s ease-in-out infinite; filter: brightness(2.5) saturate(0); }
@keyframes evoPulse { 0%,100% { transform: scale(1); filter: brightness(1.8) saturate(.2); } 50% { transform: scale(1.12); filter: brightness(4) saturate(0); } }
.evolved { animation: evoPop .6s; }
@keyframes evoPop { 0% { transform: scale(.4); filter: brightness(3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); filter: brightness(1); } }
.evo-stage { transition: filter .3s; }

/* ============ Cinem?tica de evoluci?n ============ */
.evo-cinematic-overlay {
  z-index: 240;
  background: radial-gradient(ellipse at 50% 38%, #2a1455ee 0%, #0a0618f0 48%, #020208fa 100%);
}
.evo-cinematic-burst {
  position: absolute;
  width: min(130vw, 560px);
  height: min(130vw, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, #c4b5fd66 0%, #8b5cf644 28%, #6c8cff33 48%, transparent 72%);
  transform: scale(0.15);
  opacity: 0;
}
.evo-cinematic-overlay.show .evo-cinematic-burst {
  animation: evoBurstIn 1.8s ease-out forwards;
}
@keyframes evoBurstIn {
  0% { transform: scale(0.15); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.2); opacity: 0.4; }
}
.evo-cinematic-ring {
  border-color: #c4b5fd99;
  box-shadow: 0 0 36px #a78bfa88, inset 0 0 28px #6c8cff55;
}
.evo-cinematic-ring--2 {
  width: 110px;
  height: 110px;
  border-width: 2px;
  border-color: #ffd23d88;
  box-shadow: 0 0 28px #ffd23d66, inset 0 0 18px #ff8a5b44;
}
.evo-cinematic-overlay.charging .evo-cinematic-ring {
  animation: evoRingPulse 1.1s ease-out infinite;
}
.evo-cinematic-overlay.charging .evo-cinematic-ring--2 {
  animation: evoRingPulse 1.1s ease-out .25s infinite;
}
@keyframes evoRingPulse {
  0% { transform: scale(0.55); opacity: 0.35; }
  45% { opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.evo-cinematic-overlay.revealed .evo-cinematic-ring {
  animation: evoRingReveal .9s ease-out forwards;
}
@keyframes evoRingReveal {
  0% { transform: scale(0.6); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
.evo-cinematic-stage {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-top: 4px;
}
.evo-cinematic-sprite {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 22px #000a);
}
.evo-cinematic-sprite svg { display: block; }
.evo-from { z-index: 2; }
.evo-to {
  z-index: 3;
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}
.evo-cinematic-core {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #e9d5ff 35%, transparent 72%);
  opacity: 0;
  z-index: 1;
  filter: blur(1px);
}
.evo-cinematic-beam {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 14px;
  height: 0;
  margin-left: -7px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent 0%, #e9d5ff88 25%, #fff 55%, #c4b5fd 100%);
  opacity: 0;
  filter: blur(2px);
  z-index: 0;
  transform-origin: center bottom;
}
.evo-cinematic-orbit {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.evo-orbit-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd23d, #c4b5fd);
  box-shadow: 0 0 10px #e9d5ff;
  transform: rotate(calc(var(--i) * 36deg)) translateY(-92px);
  opacity: 0;
}
.evo-cinematic-overlay.charging .evo-cinematic-orbit {
  opacity: 1;
  animation: evoOrbitSpin 2.2s linear infinite;
}
.evo-cinematic-overlay.charging .evo-orbit-dot {
  animation: evoDotPulse 0.9s ease-in-out calc(var(--i) * 0.07s) infinite;
}
@keyframes evoOrbitSpin { to { transform: rotate(360deg); } }
@keyframes evoDotPulse {
  0%, 100% { opacity: 0.35; transform: rotate(calc(var(--i) * 36deg)) translateY(-92px) scale(0.7); }
  50% { opacity: 1; transform: rotate(calc(var(--i) * 36deg)) translateY(-102px) scale(1.2); }
}
.evo-cinematic-overlay.charging .evo-from {
  animation: evoChargeShake 0.11s linear infinite, evoChargeGlow 0.85s ease-in-out infinite;
}
.evo-cinematic-overlay.charging .evo-cinematic-core {
  animation: evoCorePulse 0.85s ease-in-out infinite;
}
.evo-cinematic-overlay.charging .evo-cinematic-beam {
  animation: evoBeamRise 2s ease-in forwards;
}
.evo-cinematic-overlay.charging .evo-cinematic-spark {
  animation: passSpark 0.9s ease-out var(--delay, 0s) infinite;
}
@keyframes evoChargeShake {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-4px, 2px) scale(1.04); }
  75% { transform: translate(4px, -2px) scale(0.98); }
}
@keyframes evoChargeGlow {
  0%, 100% { filter: drop-shadow(0 12px 22px #000a) brightness(1.4) saturate(0.3); }
  50% { filter: drop-shadow(0 0 28px #e9d5ff) brightness(2.8) saturate(0); }
}
@keyframes evoCorePulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1.35); }
}
@keyframes evoBeamRise {
  0% { height: 0; opacity: 0; }
  15% { opacity: 0.85; }
  100% { height: 220px; opacity: 0.15; }
}
.evo-cinematic-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #e9d5ffcc 28%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}
.evo-cinematic-overlay.flash .evo-cinematic-flash {
  animation: evoWhiteFlash 0.65s ease-out forwards;
}
@keyframes evoWhiteFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.evo-cinematic-overlay.flash .evo-from {
  animation: evoFromVanish 0.5s ease-in forwards;
}
@keyframes evoFromVanish {
  to { opacity: 0; transform: scale(0.15); filter: brightness(4) blur(4px); }
}
.evo-cinematic-overlay.revealed .evo-to {
  animation: evoRevealPop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes evoRevealPop {
  0% { opacity: 0; transform: scale(0.15); filter: brightness(3) blur(2px); }
  55% { opacity: 1; transform: scale(1.22); filter: brightness(1.5); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.evo-cinematic-overlay.revealed .evo-cinematic-spark {
  animation: passSpark 1s ease-out var(--delay, 0s) forwards;
}
.evo-cinematic-hook {
  margin-top: 10px;
  z-index: 2;
  font-size: 14px;
  font-weight: 800;
  color: #c4b5fd;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
}
.evo-cinematic-overlay.show .evo-cinematic-hook {
  animation: evoTextIn 0.45s ease-out 0.25s forwards;
}
.evo-cinematic-title {
  margin-top: 6px;
  z-index: 2;
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 900;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #fff 0%, #e9d5ff 35%, #a78bfa 65%, #ffd23d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: scale(0.7) translateY(12px);
}
.evo-cinematic-overlay.revealed .evo-cinematic-title {
  animation: evoTitleSlam 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.1s forwards;
}
@keyframes evoTitleSlam {
  0% { opacity: 0; transform: scale(0.7) translateY(12px); }
  70% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.evo-cinematic-names {
  z-index: 2;
  margin-top: 6px;
  font-size: clamp(14px, 4vw, 16px);
  opacity: 0;
  transform: translateY(10px);
}
.evo-cinematic-overlay.revealed .evo-cinematic-names {
  animation: evoTextIn 0.55s ease-out 0.35s forwards;
}
.evo-name-from { color: var(--muted); }
.evo-name-arrow { margin: 0 6px; color: #a78bfa; font-weight: 900; }
.evo-name-to {
  font-size: 1.08em;
  background: linear-gradient(135deg, #ffd23d, #ff8a5b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes evoTextIn {
  to { opacity: 1; transform: translateY(0); }
}
.evo-cinematic-btn {
  margin-top: 16px;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
}
.evo-cinematic-overlay.revealed .evo-cinematic-btn:not(:disabled) {
  animation: evoTextIn 0.45s ease-out 0.55s forwards;
}
.evo-cinematic-overlay.charging .evo-cinematic-panel {
  animation: evoPanelShake 0.14s linear infinite;
}
@keyframes evoPanelShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  75% { transform: translate(2px, -1px); }
}
.evo-cinematic-overlay.reduced .evo-to {
  opacity: 1;
  transform: scale(1);
}
.evo-cinematic-overlay.reduced .evo-from { display: none; }
@media (prefers-reduced-motion: reduce) {
  .evo-cinematic-overlay.charging .evo-cinematic-panel,
  .evo-cinematic-overlay.charging .evo-from,
  .evo-cinematic-overlay.charging .evo-cinematic-orbit { animation: none !important; }
  .evo-cinematic-overlay.revealed .evo-to { animation: evoTextIn 0.4s ease-out forwards !important; }
}

/* ============ Quema de Klax (fusi?n ? reward) ============ */
.burn-cinematic-overlay {
  z-index: 240;
  background: radial-gradient(ellipse at 50% 38%, #4a1808ee 0%, #140806f2 48%, #060304fa 100%);
}
.burn-cinematic-burst {
  position: absolute;
  width: min(130vw, 560px);
  height: min(130vw, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, #ff8a4c66 0%, #ff5d2a44 28%, #c43a1033 48%, transparent 72%);
  transform: scale(0.15);
  opacity: 0;
}
.burn-cinematic-overlay.show .burn-cinematic-burst {
  animation: burnBurstIn 1.6s ease-out forwards;
}
@keyframes burnBurstIn {
  0% { transform: scale(0.15); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0.38; }
}
.burn-cinematic-ring {
  border-color: #ff8a4c99;
  box-shadow: 0 0 36px #ff6b3d88, inset 0 0 28px #ffd23d44;
}
.burn-cinematic-ring--2 {
  width: 110px;
  height: 110px;
  border-width: 2px;
  border-color: #ffd23d88;
  box-shadow: 0 0 28px #ffd23d66, inset 0 0 18px #ff8a4c44;
}
.burn-cinematic-overlay.fusing .burn-cinematic-ring {
  animation: evoRingPulse 1s ease-out infinite;
}
.burn-cinematic-overlay.fusing .burn-cinematic-ring--2 {
  animation: evoRingPulse 1s ease-out .22s infinite;
}
.burn-cinematic-overlay.revealed .burn-cinematic-ring {
  animation: evoRingReveal .9s ease-out forwards;
}
.burn-cinematic-stage {
  position: relative;
  width: 260px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-top: 4px;
}
.burn-cinematic-sprite {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 18px #000a);
  transition: none;
}
.burn-cinematic-sprite svg { display: block; }
.burn-a { left: 4%; z-index: 2; }
.burn-b { right: 4%; z-index: 2; }
.burn-cinematic-overlay.burn-cinematic--single .burn-a {
  left: 50%;
  transform: translateX(-50%);
}
.burn-cinematic-overlay.show .burn-a {
  animation: burnSlideInL 0.45s ease-out forwards;
}
.burn-cinematic-overlay.show.burn-cinematic--single .burn-a {
  animation: burnSlideInC 0.45s ease-out forwards;
}
.burn-cinematic-overlay.show .burn-b {
  animation: burnSlideInR 0.45s ease-out forwards;
}
@keyframes burnSlideInL {
  from { opacity: 0; transform: translateX(-36px) scale(0.85); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes burnSlideInC {
  from { opacity: 0; transform: translateX(-50%) scale(0.85); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes burnSlideInR {
  from { opacity: 0; transform: translateX(36px) scale(0.85); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.burn-cinematic-overlay.fusing .burn-a {
  animation: burnMergeL 1.9s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}
.burn-cinematic-overlay.fusing.burn-cinematic--single .burn-a {
  animation: burnMergeC 1.9s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}
.burn-cinematic-overlay.fusing .burn-b {
  animation: burnMergeR 1.9s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}
@keyframes burnMergeL {
  0% { left: 4%; transform: translateX(0) scale(1); filter: drop-shadow(0 10px 18px #000a) brightness(1); }
  55% { left: 28%; transform: translateX(0) scale(0.92); filter: drop-shadow(0 0 22px #ff8a4c) brightness(1.35) saturate(1.2); }
  100% { left: 42%; opacity: 0; transform: translateX(0) scale(0.35); filter: drop-shadow(0 0 36px #ffd23d) brightness(2.6) saturate(0.2) blur(3px); }
}
@keyframes burnMergeC {
  0% { left: 50%; transform: translateX(-50%) scale(1); filter: drop-shadow(0 10px 18px #000a) brightness(1); }
  55% { left: 50%; transform: translateX(-50%) scale(0.92); filter: drop-shadow(0 0 22px #ff8a4c) brightness(1.35) saturate(1.2); }
  100% { left: 50%; opacity: 0; transform: translateX(-50%) scale(0.35); filter: drop-shadow(0 0 36px #ffd23d) brightness(2.6) saturate(0.2) blur(3px); }
}
@keyframes burnMergeR {
  0% { right: 4%; transform: translateX(0) scale(1); filter: drop-shadow(0 10px 18px #000a) brightness(1); }
  55% { right: 28%; transform: translateX(0) scale(0.92); filter: drop-shadow(0 0 22px #ff8a4c) brightness(1.35) saturate(1.2); }
  100% { right: 42%; opacity: 0; transform: translateX(0) scale(0.35); filter: drop-shadow(0 0 36px #ffd23d) brightness(2.6) saturate(0.2) blur(3px); }
}
.burn-cinematic-core {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd23d 32%, #ff6b3d88 58%, transparent 74%);
  opacity: 0;
  z-index: 3;
  filter: blur(1px);
}
.burn-cinematic-overlay.fusing .burn-cinematic-core {
  animation: burnCorePulse 0.7s ease-in-out infinite;
}
@keyframes burnCorePulse {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.45); }
}
.burn-cinematic-reward {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform: scale(0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 28px #000a);
}
.burn-cinematic-item-img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  image-rendering: auto;
}
.burn-cinematic-item-emoji { font-size: 72px; line-height: 1; }
.burn-cinematic-overlay.revealed .burn-cinematic-reward {
  animation: evoRevealPop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Sin fusing el merge deja de aplicar: no dejar Klax detr?s del premio. */
.burn-cinematic-overlay.flash .burn-cinematic-sprite,
.burn-cinematic-overlay.revealed .burn-cinematic-sprite {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  animation: none !important;
}
.burn-cinematic-embers {
  position: absolute;
  width: 220px;
  height: 180px;
  top: 50%;
  left: 50%;
  margin: -90px 0 0 -110px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.burn-ember {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23d, #ff5d2a);
  box-shadow: 0 0 10px #ff8a4c;
  opacity: 0;
  --dx: calc((var(--i) - 3.5) * 18px);
}
.burn-cinematic-overlay.fusing .burn-cinematic-embers { opacity: 1; }
.burn-cinematic-overlay.fusing .burn-ember {
  animation: burnEmberRise 1.1s ease-out calc(var(--i) * 0.08s) infinite;
}
@keyframes burnEmberRise {
  0% { opacity: 0; transform: translate(var(--dx), 0) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), -110px) scale(1.1); }
}
.burn-cinematic-overlay.fusing .burn-cinematic-spark {
  animation: passSpark 0.85s ease-out var(--delay, 0s) infinite;
}
.burn-cinematic-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #ffd23dcc 26%, #ff6b3d66 48%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}
.burn-cinematic-overlay.flash .burn-cinematic-flash {
  animation: evoWhiteFlash 0.6s ease-out forwards;
}
.burn-cinematic-overlay.revealed .burn-cinematic-spark {
  animation: passSpark 1s ease-out var(--delay, 0s) forwards;
}
.burn-cinematic-hook {
  margin-top: 10px;
  z-index: 2;
  font-size: 14px;
  font-weight: 800;
  color: #ffb08a;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
}
.burn-cinematic-overlay.show .burn-cinematic-hook {
  animation: evoTextIn 0.45s ease-out 0.2s forwards;
}
.burn-cinematic-title {
  margin-top: 6px;
  z-index: 2;
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 900;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #fff 0%, #ffd23d 40%, #ff8a4c 70%, #ff5d2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: scale(0.7) translateY(12px);
}
.burn-cinematic-overlay.revealed .burn-cinematic-title {
  animation: evoTitleSlam 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.08s forwards;
}
.burn-cinematic-names {
  z-index: 2;
  margin-top: 6px;
  font-size: clamp(13px, 3.8vw, 15px);
  opacity: 0;
  transform: translateY(10px);
  text-align: center;
  padding: 0 12px;
}
.burn-cinematic-overlay.revealed .burn-cinematic-names {
  animation: evoTextIn 0.55s ease-out 0.3s forwards;
}
.burn-name-from { color: var(--muted); }
.burn-name-arrow { margin: 0 6px; color: #ff8a4c; font-weight: 900; }
.burn-name-item {
  font-size: 1.06em;
  background: linear-gradient(135deg, #ffd23d, #ff8a4c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.burn-cinematic-btn {
  margin-top: 16px;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
}
.burn-cinematic-overlay.revealed .burn-cinematic-btn:not(:disabled) {
  animation: evoTextIn 0.45s ease-out 0.5s forwards;
}
.burn-cinematic-overlay.fusing .burn-cinematic-panel {
  animation: evoPanelShake 0.13s linear infinite;
}
.burn-cinematic-overlay.reduced .burn-cinematic-reward {
  opacity: 1;
  transform: scale(1);
}
.burn-cinematic-overlay.reduced .burn-a,
.burn-cinematic-overlay.reduced .burn-b { display: none; }
@media (prefers-reduced-motion: reduce) {
  .burn-cinematic-overlay.fusing .burn-cinematic-panel,
  .burn-cinematic-overlay.fusing .burn-a,
  .burn-cinematic-overlay.fusing .burn-b,
  .burn-cinematic-overlay.fusing .burn-ember { animation: none !important; }
  .burn-cinematic-overlay.revealed .burn-cinematic-reward { animation: evoTextIn 0.4s ease-out forwards !important; }
}

/* Silueta misteriosa en banner PvP */
.mystery { filter: drop-shadow(0 4px 10px #0008); }

/* ============ Nav con muchas pesta?as: scroll horizontal (solo m?vil) ============ */
@media (max-width: 767px) {
  .nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; gap: 2px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { flex: 1 0 auto; min-width: 52px; max-width: 72px; }
  .nav button .nav-lbl { font-size: 10px; line-height: 1.1; text-align: center; }
}

/* ============ Ranking: mi fila resaltada ============ */
.lb-row.me { background: linear-gradient(90deg, #6c8cff22, transparent); border-radius: 8px; }

/* ============ Panel de admin ============ */
.admin-page-intro { margin: 0 clamp(12px, 4vw, 16px) 8px; font-size: clamp(12px, 3.4vw, 13px); }
.admin-list-card { padding: 0; overflow: hidden; margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.admin-list-card .lb-row:last-child { border-bottom: none; }

.overlay-admin { align-items: flex-end; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.modal-admin { max-width: 480px; margin: 0 auto; border-radius: 20px 20px 0 0; max-height: min(94dvh, 94vh);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); width: 100%; }
@media (min-width: 400px) and (min-height: 520px) {
  .overlay-admin { align-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .modal-admin { border-radius: 20px; max-height: min(90dvh, 820px); }
}

.admin-modal-title { margin: 0 0 8px; font-size: clamp(17px, 4.8vw, 20px); line-height: 1.25; word-break: break-word; }
.admin-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.admin-modal-head .admin-modal-title { margin: 0; flex: 1; min-width: 0; }
.admin-modal-close { flex-shrink: 0; min-height: 40px; touch-action: manipulation; }
.admin-summary { font-size: clamp(11px, 3.2vw, 12px); margin-bottom: 10px; word-break: break-word; }
.admin-section-title { margin: 14px 0 6px !important; font-size: clamp(11px, 3vw, 13px); }
.admin-hint { font-size: clamp(10px, 3vw, 11px); margin: 0 0 8px; line-height: 1.35; }
.admin-block { margin: 8px 0; padding: 10px; }
#edicionGrantForm { overflow: visible; }
#edicionGrantForm .admin-grid { overflow: visible; }
.ed-grant-hist-wrap { margin-top: 10px; font-size: 12px; }
.ed-grant-hist__empty { margin: 0; padding: 4px 2px; }
.ed-grant-hist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 3 columns: equal side tracks keep the gift block visually centered */
.ed-grant-hist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px solid #ffffff0c;
  color: var(--txt, #eef1ff);
}
.ed-grant-hist__row--klax { border-left: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.ed-grant-hist__row--item { border-left: 3px solid color-mix(in srgb, var(--good) 65%, transparent); }
.ed-grant-hist__who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  line-height: 1.25;
}
.ed-grant-hist__user {
  font-weight: 800;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ed-grant-hist__arrow {
  color: var(--muted);
  font-weight: 800;
  flex-shrink: 0;
  opacity: 0.85;
}
.ed-grant-hist__asset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
  max-width: 100%;
  min-width: 0;
}
.ed-grant-hist__ic {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ed-grant-hist__ic .klax-img,
.ed-grant-hist__ic svg {
  width: 26px !important;
  height: auto !important;
  max-height: 26px;
  object-fit: contain;
}
.ed-grant-hist__ic .item-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
}
.ed-grant-hist__fallback { font-size: 18px; line-height: 1; }
.ed-grant-hist__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 5px;
  min-width: 0;
  max-width: 14rem;
}
.ed-grant-hist__name {
  font-weight: 800;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ed-grant-hist__qty {
  flex-shrink: 0;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--good);
}
.ed-grant-hist__lvl,
.ed-grant-hist__rarity {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}
.ed-grant-hist__time {
  justify-self: end;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 560px) {
  .ed-grant-hist__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "who time"
      "asset asset";
    column-gap: 8px;
    row-gap: 6px;
    padding: 8px 10px;
  }
  .ed-grant-hist__who { grid-area: who; }
  .ed-grant-hist__asset {
    grid-area: asset;
    justify-self: start;
  }
  .ed-grant-hist__time { grid-area: time; }
  .ed-grant-hist__meta { max-width: none; justify-content: flex-start; }
}

/* Ventas Shop (Edici?n) */
.ed-shop-sales-wrap { margin-top: 10px; font-size: 12px; }
.ed-shop-sales__empty { margin: 0; padding: 4px 2px; }
.ed-shop-sales {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}
.ed-shop-sales__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px solid #ffffff0c;
  border-left: 3px solid color-mix(in srgb, #58d68d 70%, transparent);
  color: var(--txt, #eef1ff);
}
.ed-shop-sales__row--shop {
  border-left-color: color-mix(in srgb, #58d68d 70%, transparent);
}
.ed-shop-sales__row--promo {
  border-left-color: color-mix(in srgb, #5dade2 75%, transparent);
}
.ed-shop-sales__who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  min-width: 0;
  line-height: 1.25;
}
.ed-shop-sales__user {
  font-weight: 800;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.ed-shop-sales__uid { font-size: 11px; }
.ed-shop-sales__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.ed-shop-sales__asset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}
.ed-shop-sales__ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ed-shop-sales__ic .item-icon {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}
.ed-shop-sales__fallback {
  font-size: 22px;
  line-height: 1;
}
.ed-shop-sales__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.ed-shop-sales__flash {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffb43d;
  line-height: 1.2;
}
.ed-shop-sales__money {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.ed-shop-sales__time {
  justify-self: end;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ed-shop-sales__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "who time"
      "detail detail";
    column-gap: 8px;
    row-gap: 6px;
  }
  .ed-shop-sales__who { grid-area: who; }
  .ed-shop-sales__detail {
    grid-area: detail;
    align-items: flex-start;
    text-align: left;
  }
  .ed-shop-sales__asset { justify-content: flex-start; }
  .ed-shop-sales__time { grid-area: time; }
}

.admin-vps-health {
  margin: 10px 0 12px;
  border-color: #6c8cff44;
  background: linear-gradient(135deg, #6c8cff0a, #00d4aa08);
}
.admin-vps-health--bad { border-color: #ff5d6c66; }
.admin-vps-health-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.admin-vps-health-updated { font-size: 11px; }
.admin-vps-metrics { display: flex; flex-direction: column; gap: 10px; }
.admin-vps-metric-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; margin-bottom: 4px;
}
.admin-vps-metric-head span:last-child { font-size: 11px; color: var(--muted); text-align: right; }
.admin-vps-bar {
  height: 8px; border-radius: 999px; background: #ffffff12; overflow: hidden;
}
.admin-vps-bar-fill {
  height: 100%; border-radius: inherit; width: 0;
  transition: width .35s ease, background-color .25s ease;
}
.admin-vps-bar-fill.ok { background: linear-gradient(90deg, #00d4aa, #6c8cff); }
.admin-vps-bar-fill.warn { background: linear-gradient(90deg, #ffd23d, #ff9f43); }
.admin-vps-bar-fill.bad { background: linear-gradient(90deg, #ff5d6c, #ff9f43); }
.admin-vps-health-meta {
  margin-top: 10px; font-size: 11px; line-height: 1.45; word-break: break-word;
}
.admin-vps-health-alerts { margin-top: 8px; }
.admin-vps-alert {
  margin: 0; font-size: 11px; line-height: 1.35; padding: 6px 8px; border-radius: 8px;
}
.admin-vps-alert--ok { color: var(--good); background: #00d4aa14; }
.admin-vps-alert--warn { color: #ffd23d; background: #ffd23d14; }
.admin-vps-alert--bad { color: var(--bad); background: #ff5d6c18; }
.klax-swap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .klax-swap-grid { grid-template-columns: 1fr; } }
.klax-swap-side-title { margin: 0 0 10px; font-size: 14px; }
.klax-swap-mon-card { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; background: var(--card2); border-radius: 10px; }
.klax-swap-arrow-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.klax-swap-arrow { font-size: 28px; color: var(--accent); }
.klax-swap-arrow-card { flex: 1; min-width: 140px; max-width: 220px; }
.admin-btn-full { width: 100%; min-height: 44px; margin-top: 6px; touch-action: manipulation; }
.admin-btn-danger { color: var(--bad); width: 100%; margin-top: 10px; min-height: 44px; touch-action: manipulation; }
.admin-danger-zone { border: 1px solid #ff5d6c44; margin: 12px clamp(12px, 4vw, 16px) calc(12px + env(safe-area-inset-bottom, 0px)); }
.admin-danger-title { color: var(--bad); }

/* ============ Admin ? MonsterClash Go ============ */
#adminMonsterClashGo {
  overflow: visible;
}
#adminMonsterClashGoBody {
  overflow: visible;
  color: var(--txt);
}
.go-admin-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.go-admin-sticky {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 92%, #000);
  border: 1px solid #ffffff18;
  box-shadow: 0 6px 18px #0005;
}
.go-admin-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  cursor: pointer;
}
.go-admin-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.go-admin-hint {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
}
.go-admin-foot { margin-top: 8px; }
.go-admin-save {
  margin-top: 4px !important;
  flex-shrink: 0;
}
.go-admin-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #ffffff14;
}
.go-admin-section__title {
  font-weight: 800;
  font-size: 14px;
  margin: 12px 0 4px;
}
.go-admin-section__title--sm {
  font-weight: 700;
  font-size: 12px;
  margin-top: 10px;
}
.go-admin-details {
  margin-top: 12px;
  padding: 8px 10px 10px;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  overflow: visible;
}
.go-admin-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  min-height: 40px;
  display: flex;
  align-items: center;
  list-style: none;
}
.go-admin-details > summary::-webkit-details-marker { display: none; }
.go-admin-details > summary::after {
  content: '?';
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.go-admin-details:not([open]) > summary::after { transform: rotate(-90deg); }
.go-admin-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 0;
}
.go-admin-field input,
.go-admin-field select,
.go-ec-field input,
.go-ec-field select {
  background: var(--bg2);
  border: 1px solid #ffffff20;
  color: var(--txt);
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  min-width: 0;
}
.go-admin-docs {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.45;
}
.go-admin-grid { margin-top: 8px; }
.go-admin-grid--checks {
  grid-template-columns: 1fr;
}
.go-shop-tier {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #ffffff14;
  border-radius: 8px;
}
.go-shop-tier__title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--txt);
}
.go-egg-content {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #ffffff18;
  border-radius: 10px;
  overflow: visible;
}
.go-egg-content__title {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.go-ec-prize {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  min-width: 0;
  max-width: 100%;
}
.go-ec-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 0;
}
.go-ec-field--type { width: 110px; max-width: 100%; }
.go-ec-field--grow { flex: 1 1 160px; min-width: min(100%, 160px); }
.go-ec-field--num { width: 76px; max-width: 100%; }
.go-ec-pct { opacity: 0.9; font-weight: 700; }
.go-ec-del,
.go-ec-add {
  flex: 0 0 auto;
  min-height: 40px;
  touch-action: manipulation;
}
.go-ec-add { margin-top: 8px; }

@media (min-width: 480px) {
  .go-admin-field input,
  .go-admin-field select,
  .go-ec-field input,
  .go-ec-field select {
    padding: 7px 8px;
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  .go-admin-sticky {
    top: 8px;
  }
  .go-admin-grid--checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .go-admin-grid--checks .admin-check {
    grid-column: auto;
    min-height: 40px;
  }
}

@media (max-width: 520px) {
  .go-admin-sticky {
    position: sticky;
    top: 0;
    margin-left: -2px;
    margin-right: -2px;
    border-radius: 10px;
  }
  .go-ec-field--type,
  .go-ec-field--num {
    width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
  }
  .go-ec-field--grow {
    flex: 1 1 100%;
    min-width: 0;
  }
  .go-ec-del {
    width: 100%;
  }
  .go-admin-details {
    padding: 8px;
  }
  /* datetime-local can overflow narrow screens */
  .go-admin-grid input[type="datetime-local"] {
    font-size: 13px;
    min-width: 0;
  }
}

/* ============ Registro banco (ingresos / retiros) ============ */
.bank-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.bank-summary-item { background: var(--card2); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
.bank-summary-item b { font-size: 13px; }
.bank-summary-in b { color: var(--good); }
.bank-summary-out b { color: var(--bad); }
.bank-summary-bal b { color: var(--accent, #6c8cff); }
.admin-finance-card { margin-bottom: 10px; border-color: #6c8cff44; }
.admin-finance-card .section-title { margin: 0 0 8px; font-size: 13px; }
.admin-finance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.admin-finance-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.admin-finance-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.admin-finance-fees-block {
  background: var(--card2);
  border: 1px solid #7ee78733;
  border-radius: 12px;
  padding: 10px;
}
.admin-finance-fees-block .admin-finance-item { background: var(--card, #12162a); }
.admin-finance-item.finance-market b { color: #ffd166; }
.admin-finance-item.finance-fees-total b { color: #7ee787; font-size: 16px; }
.admin-finance-item { background: var(--card2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.admin-finance-item b { font-size: 14px; line-height: 1.2; }
.admin-finance-item .muted { font-size: 10px; }
.admin-finance-item.finance-in b { color: var(--good); }
.admin-finance-item.finance-out b { color: var(--bad); }
.admin-finance-item.finance-reserve b { color: #ffb347; }
.admin-finance-item.finance-prize b { color: #c9a0ff; }
.admin-finance-item.finance-dev b { color: #7ee787; }
.admin-finance-item.finance-surplus b { color: var(--accent, #6c8cff); }
.admin-finance-divider { height: 1px; background: var(--border, #ffffff14); margin: 10px 0; }
.admin-finance-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.admin-tesoreria-search { margin-top: 4px; }
.admin-tesoreria-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #ffffff18);
  background: var(--card2, #0e1224);
  color: var(--text, #e8ecff);
  font-size: 14px;
}
.admin-tesoreria-search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.admin-tesoreria-player-row {
  background: var(--card2, #0e1224);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-tesoreria-player-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-tesoreria-player-stats { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.admin-gains-card { padding: 8px 10px; }
.admin-gains-card .lb-row { margin: 0; border-radius: 8px; }
.admin-gains-card .lb-row + .lb-row { margin-top: 6px; }
.admin-gains-val { font-weight: 900; font-size: 13px; white-space: nowrap; }
.admin-gains-user-btn { flex-shrink: 0; min-width: 0; padding: 6px 10px; font-size: 11px; }
@media (max-width: 520px) {
  .admin-finance-grid, .admin-finance-grid.cols3, .admin-finance-grid.cols2 { grid-template-columns: 1fr; }
}
.bank-row { padding: 8px 0; border-bottom: 1px solid #ffffff0a; }
.bank-row:last-child { border-bottom: none; }
.bank-row-main { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.bank-row-sub { font-size: 10px; margin-top: 2px; word-break: break-all; }
.bank-tx-link {
  color: #7dd3fc;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.bank-tx-link:hover { color: #bae6fd; }
.bank-row-in .bank-row-main b:last-child { color: var(--good); }
.bank-row-out .bank-row-main b:last-child { color: var(--bad); }
.bank-row-adjust .bank-row-main b:last-child { color: #fbbf24; }
.bank-public-withdrawals { margin-top: 4px; overflow-x: auto; }
.bank-public-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #ffffff12;
  white-space: nowrap;
}
.bank-public-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid #ffffff0a;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.3;
  min-width: min(100%, 520px);
}
.bank-public-row:last-child { border-bottom: none; }
.bank-public-user {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bank-public-user b { font-size: 12px; }
.bank-public-date { flex: 0 0 auto; font-size: 10px; }
.bank-public-sep { flex: 0 0 auto; opacity: 0.5; font-size: 10px; }
.bank-public-amt {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  text-align: right;
}
.bank-public-amt b { color: var(--good); font-weight: 800; }
.bank-public-amt .muted { font-size: 10px; }
.bank-public-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.bank-pending-block { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #ffffff18; }
@media (max-width: 380px) {
  .bank-summary { grid-template-columns: 1fr; }
}

.t-pick-list { gap: 8px; max-height: min(50dvh, 360px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.t-pick-mon { display: flex !important; gap: 10px; align-items: center; justify-content: flex-start; width: 100%; min-height: 52px; text-align: left; }
.t-pick-mon.selected { outline: 2px solid var(--accent); background: #6c8cff22; }

.tourney-prize-split-hint {
  font-size: 11px; margin: 0 0 10px; text-align: center; line-height: 1.4;
}
.tourney-result-prizes {
  margin-top: 8px; text-align: left;
}
.tourney-result-prize {
  font-size: 12px; padding: 4px 0;
}
.tourney-result-modal { padding: 4px 2px 0; max-width: 420px; margin: 0 auto; }
.tourney-result-trophy { font-size: 42px; line-height: 1; margin-bottom: 4px; }
.tourney-result-title { margin: 0 0 6px; font-size: clamp(18px, 5vw, 22px); font-weight: 900; }
.tourney-result-champ { font-size: 13px; margin-bottom: 8px; }
.tourney-result-summary { font-size: 11px; line-height: 1.35; margin-bottom: 10px; }
.tourney-result-standings-lbl {
  margin: 0 0 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: #ffd23d;
  text-align: left;
}
.tourney-result-standings {
  text-align: left;
  max-height: min(48dvh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid #ffffff18;
  background: #00000040;
  padding: 4px 0;
}
.tourney-result-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #ffffff0e;
  font-size: 13px;
}
.tourney-result-row:last-child { border-bottom: none; }
.tourney-result-row--me {
  background: #ffd23d18;
}
.tourney-result-place {
  font-weight: 900; font-size: 14px; text-align: center;
}
.tourney-result-name {
  font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tourney-result-stars {
  font-weight: 800; color: #ffd23d; white-space: nowrap; font-size: 12px;
}
.tourney-result-stars--none {
  color: #ffffff66; font-weight: 600; font-size: 11px;
}
.tourney-page-head {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0 4px;
}
.tourney-page-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 26px; border-radius: 14px;
  background: linear-gradient(135deg, #ffd23d33, #ff5db133);
  border: 1px solid #ffd23d44;
  box-shadow: 0 4px 16px #ff5db122;
}
.tourney-page-title { margin: 0; font-size: 20px; font-weight: 900; }
.tourney-page-sub { margin: 2px 0 0; font-size: 12px; }
.tourney-history-card {
  margin-bottom: 12px; padding: 12px 14px;
  background: linear-gradient(180deg, #ffd23d12 0%, var(--card) 40%);
  border: 1px solid #ffd23d44;
  position: sticky; top: 0; z-index: 8;
  box-shadow: 0 4px 24px #0006;
}
.tourney-history-card .tourney-history { margin-top: 0; padding-top: 0; border-top: none; }
.tourney-card { padding: 14px; background: linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%); }
.tourney-page-fmt--1v1 { color: #ffb347; text-shadow: 0 0 12px #ff9f4366; }
.tourney-page-fmt--3v3 { color: #a29bfe; }
.tourney-event-card {
  margin-bottom: 14px; padding: 0; overflow: hidden; min-width: 0;
}
.tourney-event-card--1v1 {
  border: 2px solid #ff9f43;
  box-shadow: 0 0 28px #ff9f4338, 0 10px 36px #0009;
  background: linear-gradient(165deg, #ff9f4328 0%, var(--card) 38%, var(--bg2) 100%);
}
.tourney-event-card--3v3 {
  border: 1px solid #6c5ce766;
  box-shadow: 0 6px 24px #0006;
  background: linear-gradient(165deg, #6c5ce718 0%, var(--card) 28%, var(--bg2) 100%);
}
/* PC: icono a la izquierda, t?tulo + premios a la derecha (como antes) */
.tourney-event-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #ffffff12;
}
.tourney-event-banner-top { display: contents; }
.tourney-event-banner-text { min-width: 0; grid-column: 2; }
.tourney-event-banner--1v1 {
  background: linear-gradient(90deg, #ff9f4340, #ff6b6b28);
  border-bottom-color: #ff9f4355;
}
.tourney-event-banner--3v3 {
  background: linear-gradient(90deg, #6c5ce730, #00cec928);
  border-bottom-color: #6c5ce744;
}
.tourney-event-banner-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 24px;
  border-radius: 12px; background: #0003;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
.tourney-event-banner--1v1 .tourney-event-banner-icon {
  background: #ff9f4333; box-shadow: 0 0 16px #ff9f4355;
}
.tourney-event-banner-title {
  font-size: 22px; font-weight: 1000; letter-spacing: .06em; line-height: 1.1;
}
.tourney-event-banner--1v1 .tourney-event-banner-title {
  font-size: 26px; color: #ffd89b;
  text-shadow: 0 0 20px #ff9f4388, 0 2px 0 #c45c00;
}
.tourney-event-banner--3v3 .tourney-event-banner-title { color: #c8c0ff; }
.tourney-event-banner-desc { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; }
.tourney-event-banner-fair { font-size: 11px; color: #e8c547; margin-top: 5px; font-weight: 700; line-height: 1.35; }
.tourney-event-banner .tourney-prize-box {
  grid-column: 2;
  margin-top: 10px;
}

/* --- Caja de premios (bote + podio) --- */
.tourney-prize-box {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #00000030;
  border: 1px solid #ffffff14;
  text-align: left;
}
.tourney-prize-box--test {
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  padding: 12px 10px;
}
.tourney-prize-pot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffd23d22, #ff9f4318);
  border: 1px solid #ffd23d44;
}
.tourney-prize-pot-lbl { font-size: 12px; font-weight: 800; color: #ffe9a8; }
.tourney-prize-pot-val { font-size: 20px; font-weight: 1000; color: #ffd23d; text-shadow: 0 1px 8px #ffd23d55; }
.tourney-prize-head {
  font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  color: #cbd3f5; margin-bottom: 8px; text-align: center;
}
.tourney-prize-podium {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.tourney-prize-podium--many {
  max-height: 168px; overflow-y: auto; padding-right: 4px;
}
.tourney-prize-place {
  flex: 0 0 72px;
  width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 10px;
  background: #ffffff0c; border: 1px solid #ffffff14;
}
.tourney-prize-place--gold { background: #ffd23d1e; border-color: #ffd23d55; }
.tourney-prize-place--silver { background: #d4dcf01a; border-color: #d4dcf044; }
.tourney-prize-place--bronze { background: #d9853f1a; border-color: #d9853f44; }
.tourney-prize-medal { font-size: 18px; line-height: 1; }
.tourney-prize-pos { font-size: 10px; font-weight: 800; color: var(--muted); }
.tourney-prize-val { font-size: 15px; font-weight: 1000; color: #7dffb8; }
.tourney-prize-place--gold .tourney-prize-val { color: #ffd23d; }
.tourney-prize-place--silver .tourney-prize-val { color: #e6ecff; }
.tourney-prize-place--bronze .tourney-prize-val { color: #ffb877; }
.tourney-prize-foot {
  margin-top: 8px; text-align: center;
  font-size: 10px; font-weight: 600; color: var(--muted);
}
.tourney-prize-foot b { color: #cbd3f5; }
.tourney-event-banner-burn { font-size: 10px; font-weight: 600; color: var(--muted); }
.tourney-event-banner--1v1 .tourney-event-banner-split b { color: #ffd89b; }
.tourney-event-banner--3v3 .tourney-event-banner-split b { color: #a29bfe; }
.tourney-event-body { padding: 14px; min-width: 0; max-width: 100%; }
.tourney-format-pill--1v1 {
  background: linear-gradient(90deg, #ff9f43, #ff6b6b); color: #1a0a00; font-weight: 900; font-size: 12px;
}
.tourney-format-pill--3v3 {
  background: linear-gradient(90deg, #6c5ce7, #00cec9); color: #0a1020; font-weight: 900; font-size: 11px;
}
.tourney-live-fmt--1v1 { color: #ffb347; }
.tourney-live-fmt--3v3 { color: #a29bfe; }
.t-live-pill--1v1 { background: #ff9f4333; border: 1px solid #ff9f4366; }
.t-live-pill--3v3 { background: #6c5ce733; border: 1px solid #6c5ce766; }
.tourney-idle-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 12px; }
.tourney-status-pill { background: linear-gradient(90deg, #6c8cff, #ff5db1); color: #fff; }
.tourney-hour-pill { background: var(--card2); }
.tourney-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px;
}
.tourney-stats--compact { grid-template-columns: repeat(2, 1fr); }
.tourney-stat {
  padding: 10px 12px; border-radius: 12px; background: var(--card2);
  border: 1px solid #ffffff10; display: flex; flex-direction: column; gap: 2px;
}
.tourney-stat-icon { font-size: 16px; line-height: 1; }
.tourney-stat-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tourney-stat-val { font-size: 15px; font-weight: 900; line-height: 1.2; }
.tourney-stat-extra { font-size: 10px; }
.tourney-players-block { margin-bottom: 12px; }
.tourney-players-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.tourney-players { display: flex; flex-wrap: wrap; gap: 6px; }
.tourney-players-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; flex-wrap: wrap;
}
.tourney-players-pager .btn { min-width: 0; flex: 1 1 88px; font-size: 12px; padding: 8px 10px; }
.tourney-players-pager .muted { flex: 1 1 auto; text-align: center; font-size: 11px; }
.tourney-player-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px;
  border-radius: 999px; background: var(--card2); border: 1px solid #ffffff12;
  font-size: 12px; font-weight: 700;
}
.tourney-player-av {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.tourney-actions { display: flex; gap: 8px; margin-top: 4px; }
.tourney-actions .btn { flex: 1; }

/* Torneo en vivo */
.tourney-live-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.tourney-live-title { display: flex; align-items: center; gap: 10px; }
.tourney-live-icon {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px;
  border-radius: 12px; background: #ff5db122; border: 1px solid #ff5db144;
  animation: t-sword-pulse 1.5s ease-in-out infinite;
}
.tourney-round-progress {
  height: 4px; border-radius: 999px; background: #ffffff12; overflow: hidden; margin-bottom: 12px;
}
.tourney-round-progress-bar {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transition: width .4s ease;
}
.t-live-pill { background: linear-gradient(90deg, var(--accent2), #ff5db1); color: #fff; flex-shrink: 0; }
.t-live-banner {
  margin-top: 0; padding: 12px 14px; border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #ffffff18;
}
.t-live-banner--pending {
  background: linear-gradient(135deg, #ffd23d18, #ff5db114);
  border-color: #ffd23d55;
  animation: t-banner-pulse 2s ease-in-out infinite;
}
.t-live-banner--done {
  background: linear-gradient(135deg, #4ee08a18, #6c8cff14);
  border-color: #4ee08a44;
}
.t-live-banner-icon { font-size: 28px; flex-shrink: 0; }
.t-live-banner-body { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.t-live-cd { color: var(--warn); font-weight: 900; }
.t-hero-match {
  margin: 12px 0; padding: 12px; border-radius: 14px;
  background: linear-gradient(135deg, #6c8cff18, #ff5db112);
  border: 2px solid #6c8cff55;
  box-shadow: 0 4px 20px #6c8cff22;
}
.t-hero-match--pending { border-color: #ffd23d55; background: linear-gradient(135deg, #ffd23d14, var(--card2)); }
.t-hero-match--idle { padding: 10px 12px; background: var(--card2); border: 1px solid #ffffff10; text-align: center; font-size: 12px; }
.t-hero-match-badge {
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin-bottom: 8px;
}
.t-hero-match-hint { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.t-hero-watch { width: 100%; margin-top: 10px; }
.t-bracket-hint { font-size: 12px; margin: 0 0 8px; }
.t-bracket-wrap { margin-top: 4px; min-width: 0; max-width: 100%; }
.t-bracket-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.t-bracket-head-title { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

/* Selector de ronda (una ronda visible) */
.t-bracket-tabs {
  display: flex; gap: 6px; align-items: center;
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #6c8cff99 #ffffff14;
}
.t-bracket-tabs::-webkit-scrollbar { height: 6px; }
.t-bracket-tabs::-webkit-scrollbar-track { background: #ffffff12; border-radius: 999px; }
.t-bracket-tabs::-webkit-scrollbar-thumb { background: #6c8cff88; border-radius: 999px; }
.t-bracket-tab {
  position: relative; flex: 0 0 auto;
  min-width: 44px; padding: 7px 12px; border-radius: 10px;
  border: 1px solid #ffffff18; background: var(--card2); color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.t-bracket-tab:hover { border-color: #ffffff33; color: #fff; }
.t-bracket-tab--active {
  border-color: var(--accent); color: #fff;
  background: linear-gradient(135deg, #6c8cff28, var(--card2));
  box-shadow: 0 0 0 1px #6c8cff33;
}
.t-bracket-tab--live { border-color: #4ee08a55; }
.t-bracket-tab--live.t-bracket-tab--active {
  border-color: var(--good);
  background: linear-gradient(135deg, #4ee08a22, var(--card2));
  box-shadow: 0 0 0 1px #4ee08a33;
}
.t-bracket-tab--pending { border-color: #ffd23d55; }
.t-bracket-tab-dot {
  position: absolute; top: 5px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 6px #4ee08a99;
}
.t-bracket-tab--pending .t-bracket-tab-dot { background: var(--warn); box-shadow: 0 0 6px #ffd23d99; }

.t-bracket-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 14px; background: #ffffff06; border: 1px solid #ffffff10;
}
.t-bracket-round--live { border-color: #4ee08a55; background: #4ee08a08; }
.t-bracket-round--pending { border-color: #ffd23d44; }
.t-bracket-round-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.t-bracket-round-num {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; background: var(--card2); color: var(--accent);
}
.t-bracket-round--live .t-bracket-round-num { background: var(--good); color: #012; }
.t-bracket-round-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.t-bracket-round--live .t-bracket-round-title { color: var(--good); }
.t-bracket-round--pending .t-bracket-round-title { color: var(--warn); }
.t-bracket-round-count { font-size: 11px; margin-left: auto; }
.t-bracket-matches { display: flex; flex-direction: column; gap: 8px; }
.t-bracket-matches--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

/* Cruces del bracket */
.t-match-duel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
}
.t-match-side {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center;
}
.t-match-side--win .t-match-name { color: var(--good); font-weight: 900; }
.t-match-center { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-match-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #4a5088, #6c8cff);
  border: 2px solid #ffffff22;
}
.t-match-side--win .t-match-avatar { background: linear-gradient(135deg, #2a8a55, var(--good)); border-color: #4ee08a66; }
.t-match-name { font-size: 11px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-match-crown { font-size: 12px; line-height: 1; }
.t-match-vs { font-size: 10px; font-weight: 900; color: var(--muted); letter-spacing: .05em; }
.t-match-score-pill {
  padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 900;
  background: #ffd23d22; color: var(--warn); border: 1px solid #ffd23d44;
}
.t-match-pending-pill { font-size: 16px; }
.t-match-bye {
  display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.t-match-bye-tag {
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: #ffffff12; color: var(--muted);
}
.t-match--pending { border-color: #ffd23d44; animation: t-match-glow 2.5s ease-in-out infinite; }
@keyframes t-match-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.t-match-vs--pulse { animation: t-sword-pulse 1.2s ease-in-out infinite; display: inline-block; }
@keyframes t-sword-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(-8deg); }
}
.t-match {
  width: 100%; text-align: left; padding: 10px; border-radius: 12px;
  background: var(--card2); border: 1px solid #ffffff12; font-size: 12px; line-height: 1.35;
  transition: transform .12s ease, border-color .12s ease;
  box-sizing: border-box;
}
button.t-match { cursor: pointer; color: inherit; font: inherit; }
.t-match--watch {
  border-color: #6c8cff66;
  background: linear-gradient(135deg, #6c8cff12, var(--card2));
}
.t-match--watch:hover { border-color: var(--accent); }
.t-match--watch:active { transform: scale(.98); }
.t-match--mine {
  outline: 2px solid var(--accent);
  background: linear-gradient(135deg, #6c8cff20, var(--card2));
  box-shadow: 0 0 0 1px #6c8cff33;
}
.t-match--mine::before {
  content: 'T?'; position: absolute; top: 6px; right: 8px;
  font-size: 9px; font-weight: 900; letter-spacing: .08em; color: var(--accent); opacity: .9;
}
.t-match--mine { position: relative; }
.t-match--bye { opacity: .8; }
.t-match-play {
  display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffffff10;
  font-size: 11px; font-weight: 800; color: var(--accent); text-align: center;
}

/* Historial de campeones del torneo */
.tourney-history {
  margin-top: 0; padding-top: 0; border-top: none;
}
.tourney-history-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.tourney-history-icon {
  width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px;
  border-radius: 10px; background: linear-gradient(135deg, #ffd23d33, #ff5db122);
  border: 1px solid #ffd23d44;
}
.tourney-history-cancel { font-size: 11px; margin: 0 0 8px; }
.tourney-history-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: min(320px, 45dvh); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.tourney-history-row {
  display: grid; grid-template-columns: 28px 36px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 12px; background: var(--card2); border: 1px solid #ffffff10;
}
.tourney-history-row--latest {
  border-color: #ffd23d55;
  background: linear-gradient(90deg, #ffd23d14, var(--card2));
}
.tourney-history-row--archive {
  width: 100%; text-align: left; border: none; cursor: pointer;
  font: inherit; color: inherit;
}
.tourney-history-row--archive:hover { background: #ffffff0c; }
.tourney-history-row--selected {
  outline: 2px solid var(--accent);
  background: #7c6cff18;
}
.tourney-history-row--mine:not(.tourney-history-row--selected) { outline: 1px solid var(--accent); }
.tourney-archive-panel {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #ffffff14;
}
.tourney-archive-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.tourney-history-rank {
  font-size: 12px; font-weight: 900; text-align: center; color: var(--muted);
}
.tourney-history-row--latest .tourney-history-rank { font-size: 16px; }
.tourney-history-av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #c9a020, #ffd23d); border: 2px solid #ffd23d66;
}
.tourney-history-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tourney-history-name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tourney-history-you { font-size: 11px; font-weight: 700; color: var(--accent); }
.tourney-history-meta { font-size: 10px; }
.tourney-history-prize { font-size: 12px; font-weight: 900; color: var(--warn); white-space: nowrap; }
.tourney-history-empty { margin: 0; font-size: 12px; text-align: center; padding: 12px 8px; }

/* Torneos ? solo m?vil: columna compacta (PC queda como antes) */
@media (max-width: 480px) {
  .tourney-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 10px;
    box-sizing: border-box;
  }
  .tourney-page-head { gap: 10px; margin-bottom: 10px; }
  .tourney-page-icon { width: 40px; height: 40px; font-size: 22px; border-radius: 12px; flex-shrink: 0; }
  .tourney-page-title { font-size: 18px; }
  .tourney-page-sub { font-size: 11px; line-height: 1.35; }
  .tourney-card { padding: 10px; }
  .tourney-history-card { padding: 10px 12px; }
  .tourney-event-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
  .tourney-event-banner-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .tourney-event-banner-icon {
    width: 38px; height: 38px; font-size: 20px; border-radius: 10px;
    grid-column: unset; grid-row: unset; align-self: auto;
  }
  .tourney-event-banner-text { grid-column: unset; flex: 1; min-width: 0; }
  .tourney-event-banner .tourney-prize-box {
    grid-column: unset;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .tourney-event-banner-title {
    font-size: clamp(18px, 5.2vw, 22px);
    letter-spacing: 0;
    line-height: 1.15;
  }
  .tourney-event-banner--1v1 .tourney-event-banner-title {
    font-size: clamp(20px, 5.8vw, 24px);
    letter-spacing: 0;
  }
  .tourney-event-banner-desc { line-height: 1.35; }
  .tourney-event-body { padding: 12px; }
  .tourney-idle-head { gap: 6px; margin-bottom: 10px; }
  .tourney-hour-pill {
    flex: 1 1 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    font-size: 11px;
    padding: 6px 10px;
  }
  .tourney-stats {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
  }
  .tourney-stat {
    padding: 8px 10px;
    border-radius: 10px;
    min-width: 0;
  }
  .tourney-stat-val {
    font-size: 13px;
    word-break: break-word;
  }
  .tourney-stat-extra { font-size: 9px; line-height: 1.25; }
  .tourney-prize-box { padding: 8px; }
  .tourney-prize-pot {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 8px 10px;
  }
  .tourney-prize-pot-val { font-size: 17px; }
  .tourney-prize-place {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 56px;
    max-width: none;
    padding: 6px 2px;
  }
  .tourney-prize-val { font-size: 13px; }
  .tourney-prize-medal { font-size: 16px; }
  .tourney-actions { flex-direction: column; gap: 6px; }
  .tourney-actions .btn { width: 100%; flex: none; }
  .tourney-live-head { flex-wrap: wrap; gap: 8px; }
  .tourney-live-title { min-width: 0; flex: 1 1 auto; }
  .t-live-pill { font-size: 11px; }
  .t-live-banner { padding: 10px 12px; gap: 10px; }
  .t-live-banner-icon { font-size: 22px; }
  .t-bracket-panel { padding: 10px; }
  .t-bracket-matches--grid { grid-template-columns: 1fr; }
  .t-bracket-tab { min-width: 40px; padding: 6px 10px; }
  .t-match { padding: 8px; }
  .t-match-avatar { width: 28px; height: 28px; font-size: 12px; }
  .t-match-name { font-size: 10px; }
  .tourney-history-list { max-height: min(280px, 40dvh); }
  .tourney-history-row {
    grid-template-columns: 24px 30px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px;
  }
  .tourney-history-meta {
    white-space: normal;
    line-height: 1.3;
  }
  .tourney-history-prize { font-size: 11px; }
  .tourney-archive-head { flex-wrap: wrap; }
  .tournament-promo-banner { padding: 10px 12px; }
  .tournament-promo-banner--compact .launch-cd-cell { min-width: 34px; }
  .tournament-promo-banner--compact .launch-cd-num {
    font-size: clamp(15px, 4.2vw, 20px);
  }
  .tournament-promo-banner--compact .launch-cd-sep {
    font-size: clamp(12px, 3.2vw, 16px);
    padding-bottom: 8px;
  }
  .tournament-promo-badge { letter-spacing: 0.08em; }
}

@keyframes t-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #ffd23d00; }
  50% { box-shadow: 0 0 12px 2px #ffd23d33; }
}
.admin-inv { gap: 6px; margin-bottom: 8px; }
.admin-inv-pill {
  background: var(--card2);
  font-size: clamp(11px, 3vw, 12px);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.admin-inv-rm {
  border: 0;
  background: #ffffff18;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-inv-rm:hover { background: #c0392b; }
.admin-inv-rm--all { background: #c0392b55; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 2vw, 8px); margin: 8px 0; }
.admin-grid label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 3px; font-weight: 700; min-width: 0; }
.admin-grid label.admin-check { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--txt); grid-column: 1 / -1; }
.admin-grid input, .admin-grid select { background: var(--bg2); border: 1px solid #ffffff20; color: var(--txt); border-radius: 8px; padding: 10px 8px; font-size: 16px; font-family: inherit; width: 100%; min-width: 0; }
.admin-grid input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
@media (min-width: 480px) {
  .admin-grid input, .admin-grid select { padding: 7px 8px; font-size: 13px; }
}

.admin-auction-species-label {
  display: block;
  margin: 8px 0 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.admin-auction-species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 4px;
  background: var(--bg2);
  border: 1px solid #ffffff14;
  border-radius: 10px;
}
.admin-auction-species {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid #ffffff12;
  background: var(--card2);
  color: var(--txt);
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}
.admin-auction-species:hover { border-color: #a78bfa66; background: #a78bfa14; }
.admin-auction-species.sel {
  border-color: #a78bfa;
  background: #a78bfa22;
  box-shadow: 0 0 0 1px #a78bfa55;
}
.admin-auction-species .klax-img,
.admin-auction-species svg { width: 44px !important; height: auto !important; }
.admin-auction-species__name {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-auction-species__rar { font-size: 8px; line-height: 1.1; text-align: center; }

.admin-blind-auction-species-label {
  display: block;
  margin: 8px 0 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.admin-blind-auction-species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 4px;
  background: var(--bg2);
  border: 1px solid #ffffff14;
  border-radius: 10px;
}
.admin-blind-auction-species {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid #ffffff12;
  background: var(--card2);
  color: var(--txt);
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}
.admin-blind-auction-species:hover { border-color: #22d3ee66; background: #22d3ee14; }
.admin-blind-auction-species.sel {
  border-color: #22d3ee;
  background: #22d3ee22;
  box-shadow: 0 0 0 1px #22d3ee55;
}
.admin-blind-auction-species .klax-img,
.admin-blind-auction-species svg { width: 44px !important; height: auto !important; }
.admin-blind-auction-species__name {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-blind-auction-species__rar { font-size: 8px; line-height: 1.1; text-align: center; }

.admin-rifa-species-label {
  display: block;
  margin: 8px 0 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.admin-rifa-species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 4px;
  background: var(--bg2);
  border: 1px solid #ffffff14;
  border-radius: 10px;
}
.admin-rifa-species {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid #ffffff12;
  background: var(--card2);
  color: var(--txt);
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}
.admin-rifa-species:hover { border-color: #fbbf2466; background: #fbbf2414; }
.admin-rifa-species.sel {
  border-color: #fbbf24;
  background: #fbbf2428;
  box-shadow: 0 0 0 2px #fbbf2466, 0 0 12px #fbbf2433;
}
.admin-rifa-species .klax-img,
.admin-rifa-species svg { width: 44px !important; height: auto !important; }
.admin-rifa-species__name {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-rifa-species__rar { font-size: 8px; line-height: 1.1; text-align: center; }
.admin-rifa-selected {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
}

.admin-blind-auction-egg-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid #22d3ee33;
}
.admin-blind-auction-egg-img {
  width: 94px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px #0008);
}
.blind-auction-prize-img {
  filter: drop-shadow(0 8px 20px #000a) drop-shadow(0 0 22px #22d3ee44);
}
.blind-auction-promo-hero .blind-auction-prize-img {
  width: clamp(136px, 44vw, 182px) !important;
  max-height: none !important;
}
.blind-auction-card-art .blind-auction-prize-img {
  width: 156px !important;
  max-height: 195px !important;
}

.egg-hatch-progress { margin-top: 8px; }
.egg-hatch-bar {
  height: 8px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
  margin-bottom: 4px;
}
.egg-hatch-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #fbbf24);
  transition: width 0.25s ease;
}
.egg-hatch-fill--ready { background: linear-gradient(90deg, #4ade80, #22d3ee); }
.egg-hatch-label { font-size: 10px; color: var(--muted); }
.egg-hatch-progress--ready .egg-hatch-label { color: #4ade80; font-weight: 700; }
.blind-egg-progress-list { display: flex; flex-direction: column; gap: 10px; }
.blind-egg-progress-row {
  padding: 10px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid #fbbf2433;
}
.blind-egg-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.blind-egg-progress-row .btn { margin-top: 8px; width: 100%; }

.admin-mon-row { margin: 0 0 8px; padding: 10px; }
.admin-mon-row--active { border: 1px solid #4ee08a44; }
.admin-mon-row--inactive { opacity: .78; border: 1px solid #ffffff10; }
.admin-active-klax { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-active-klax li { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.admin-roster-cd { font-size: 13px; margin: 10px 0 0; }
.admin-maint-extend { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff12; display: flex; flex-direction: column; gap: 8px; }
.admin-maint-countdown { margin-top: 12px; }
.stats-pvp-summary {
  margin: 0 clamp(12px, 4vw, 16px) 12px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.stats-pvp-num { font-size: 28px; font-weight: 900; }
.stats-pvp-split { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.stats-pvp-botwr { font-size: 13px; padding-top: 8px; border-top: 1px solid #ffffff10; }
.stats-chart-card--wide .stats-chart { min-height: 200px; }
.admin-mon-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; }
.admin-mon-info { min-width: 0; word-break: break-word; }
.admin-mon-meta { font-size: clamp(10px, 3vw, 11px); margin-top: 2px; }
.admin-mon-actions { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.admin-mon-actions .btn { flex: 1; min-width: min(100%, 120px); min-height: 40px; touch-action: manipulation; }
.admin-mon-actions .mDel { color: var(--bad); }
.admin-mons { gap: 0; }

.admin-species-field { display: block; min-width: 0; }
.admin-species-picker { position: relative; margin-top: 4px; }
.admin-species-picker.open { z-index: 10001; }
.admin-species-picker__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--card2);
  border: 1px solid #ffffff18;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-species-picker__trigger:hover { border-color: #a78bfa55; }
.admin-species-picker.open .admin-species-picker__trigger {
  border-color: #a78bfa88;
  box-shadow: 0 0 0 1px #a78bfa33;
}
.admin-species-picker__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
}
.admin-species-picker__icon .klax-img,
.admin-species-picker__icon svg { width: 28px !important; height: auto !important; }
.admin-species-picker__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.admin-species-picker__caret {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  transition: transform .15s ease;
}
.admin-species-picker.open .admin-species-picker__caret { transform: rotate(180deg); }
.admin-species-picker__menu {
  position: fixed;
  z-index: 10000;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid #ffffff22;
  box-shadow: 0 8px 24px #00000055;
}
.admin-species-picker__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-species-picker__opt:hover { background: #ffffff0a; }
.admin-species-picker__opt.active {
  background: #a78bfa22;
  outline: 1px solid #a78bfa55;
}
.admin-species-picker__opt .klax-img,
.admin-species-picker__opt svg { width: 32px !important; height: auto !important; flex-shrink: 0; }
.admin-species-picker__opt-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
}

@media (max-width: 420px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid-mon { grid-template-columns: 1fr 1fr; }
  .admin-species-field { grid-column: 1 / -1; }
}

/* ============ Wiki / Gu?a ============ */
details.wiki { background: var(--card); border-radius: 14px; margin: 8px 16px; box-shadow: var(--shadow); overflow: hidden; }
details.wiki > summary { padding: 14px; font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.wiki > summary::-webkit-details-marker { display: none; }
details.wiki > summary::after { content: '?'; color: var(--muted); transition: transform .2s; }
details.wiki[open] > summary::after { transform: rotate(180deg); }
.wiki-body { padding: 0 14px 14px; font-size: 14px; line-height: 1.5; }
.wiki-body p { margin: 6px 0; }
.wiki-steps { margin: 6px 0 10px 18px; padding: 0; }
.wiki-steps li { margin: 4px 0; }
.wiki-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.wiki-tbl th, .wiki-tbl td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #ffffff12; }
.wiki-tbl th { color: var(--muted); font-size: 12px; }
.wiki-tbl td:first-child, .wiki-tbl th:first-child { text-align: left; }
.wiki-counter-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.wiki-counter-tbl { min-width: 680px; font-size: 12px; }
.wiki-counter-tbl th { font-size: 11px; white-space: nowrap; }
.wiki-counter-cell { text-align: left !important; vertical-align: top; line-height: 1.65; }
.wiki-counter-cell--warn { background: rgba(244, 67, 54, 0.06); }
.wiki-counter-cell .typechip { margin: 2px 4px 2px 0; display: inline-block; }

/* Admin ? matriz editable de tipos */
.admin-type-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  background: var(--bg2);
}
.admin-type-matrix {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
  font-size: 11px;
}
.admin-type-matrix th,
.admin-type-matrix td {
  padding: 4px;
  border: 1px solid #ffffff10;
  text-align: center;
  vertical-align: middle;
}
.admin-type-matrix thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
  font-size: 10px;
  padding: 6px 4px;
}
.admin-type-corner {
  position: sticky;
  left: 0;
  z-index: 2 !important;
  background: var(--card) !important;
  font-size: 9px !important;
  color: var(--muted);
  white-space: nowrap;
}
.admin-type-matrix tbody th {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  text-align: left;
  padding: 4px 6px;
  white-space: nowrap;
}
.admin-type-cell {
  width: 100%;
  min-width: 58px;
  padding: 4px 2px;
  border-radius: 6px;
  border: 1px solid #ffffff18;
  background: var(--card2);
  color: var(--txt);
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  text-align: center;
}
.admin-type-cell-wrap--strong .admin-type-cell {
  background: #4ee08a22;
  border-color: #4ee08a66;
  color: #7dffb8;
}
.admin-type-cell-wrap--weak .admin-type-cell {
  background: #ff5d5d18;
  border-color: #ff5d5d55;
  color: #ffb0b0;
}
.wiki-incursion-tbl td:nth-child(2) { text-align: left; }
.wiki-cat {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 22px 0 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid #ffffff14;
}
.wiki-cat:first-child { margin-top: 4px; }
.wiki-sub {
  margin: 16px 0 4px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: #ffffff06;
  border: 1px solid #ffffff0c;
}
.wiki-sub-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.wiki-sub-body > :first-child { margin-top: 0; }
.wiki-sub-body > :last-child { margin-bottom: 0; }
.evo-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.evo-node { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }

/* ============ Klax paseando en Inicio ============ */
#walkers {
  position: relative;
  left: auto;
  transform: none;
  bottom: auto;
  width: auto;
  max-width: none;
  margin: 12px 16px 8px;
  height: 88px;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.walker2 { position: absolute; bottom: 0; left: 0; will-change: left; }
.walker2 .face { transition: transform .25s; }
.walker-bob.walking { animation: bob .45s ease-in-out infinite; }
.walker2 .bubble { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 18px; opacity: 0; transition: opacity .3s; white-space: nowrap; text-shadow: 0 1px 3px #000; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ============ Banners comunidad (Inicio) ============ */
.home-social-section {
  width: 100%;
  margin: 18px 0 8px;
}
.home-social-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 0 16px;
  text-align: center;
  box-sizing: border-box;
}
.home-social-heading__icon {
  flex-shrink: 0;
  font-size: clamp(17px, 4.2vw, 20px);
  line-height: 1;
}
.home-social-heading__text {
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-social-banners {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 16px;
}
.shop-exchange-info {
  font-size: 11px;
  margin-top: 6px;
  font-weight: 700;
}
.admin-market-min-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid #ffffff20;
  color: var(--txt);
  font-size: 13px;
}
.admin-market-mins-tbl td { vertical-align: middle; }
.social-community-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--txt);
  box-shadow: var(--shadow);
  transition: transform .08s, border-color .15s;
}
.social-community-banner:active { transform: scale(.98); }
.social-community-banner__logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-community-banner__logo svg {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.social-community-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}
.social-community-banner__body strong { font-size: 13px; }
.social-community-banner__cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
}
.telegram-community-banner {
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.14), rgba(42, 171, 238, 0.06));
  border: 1px solid rgba(42, 171, 238, 0.35);
}
.telegram-community-banner__logo svg {
  box-shadow: 0 2px 8px rgba(42, 171, 238, 0.35);
}
.telegram-community-banner__cta { color: #5ec8ff; }
.x-community-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.x-community-banner__logo svg {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.x-community-banner__cta { color: #e7e9ef; }

/* ============ Hub de Inicio ============ */
.hub-btn { background: var(--card); border-radius: 14px; padding: 14px 6px; color: var(--txt);
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 12px;
  box-shadow: var(--shadow); transition: transform .08s; position: relative; }
.hub-btn:active { transform: scale(.95); }
.hub-btn.has-spawn::after { content: ''; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); animation: spawnPulse 1.1s ease-in-out infinite; }

/* ============ Klax-dex (Inicio) ============ */
.klax-dex-collection-bar {
  margin: 0 clamp(8px, 3vw, 16px) 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4ee08a18, #43c0ff10);
  border: 1px solid #4ee08a44;
}
.klax-dex-collection-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.klax-dex-collection-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--good);
  letter-spacing: 0.02em;
}
.klax-dex-collection-count {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
.klax-dex-collection-bar-track {
  height: 6px;
  border-radius: 999px;
  background: #0005;
  overflow: hidden;
  margin-bottom: 6px;
}
.klax-dex-collection-bar-track > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--good), #7ef0b0);
  transition: width .35s ease;
}
.klax-dex-collection-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}
.klax-dex-wrap { margin: 0 clamp(8px, 3vw, 16px) 16px; padding: clamp(8px, 2vw, 10px); overflow-x: hidden; }
.klax-dex-page { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.klax-dex-row { display: flex; flex-direction: column; gap: 6px; padding: clamp(6px, 2vw, 10px) 0; border-bottom: 1px solid #ffffff10; }
.klax-dex-row:last-child { border-bottom: none; }
.klax-dex-section {
  font-size: clamp(10px, 2.6vw, 11px); font-weight: 800; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase; padding-left: 2px;
}
.klax-dex-row--legends .klax-dex-section { color: #fbbf24; }
.klax-dex-row--beta .klax-dex-section { color: #2ee6c8; }
.klax-dex-row--auction .klax-dex-section { color: #a78bfa; }
.klax-dex-row--unico .klax-dex-section { color: #ffd86b; }
.klax-dex-stages { width: 100%; display: grid; gap: clamp(4px, 1.5vw, 8px); min-width: 0; }
.klax-dex-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.klax-dex-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.klax-dex-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.klax-dex-cell { position: relative; background: var(--card2); border-radius: 12px; padding: clamp(4px, 1.5vw, 6px) 3px; text-align: center;
  border: 2px solid transparent; transition: border-color .15s, box-shadow .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: inherit; font: inherit; width: 100%; min-width: 0; overflow: hidden; }
.klax-dex-num {
  position: absolute; top: 4px; left: 5px; z-index: 1;
  font-size: clamp(8px, 2.3vw, 10px); font-weight: 800; line-height: 1;
  color: #94a3b8; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  pointer-events: none;
}
.klax-dex-circ {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  min-width: clamp(16px, 4.2vw, 20px); height: clamp(16px, 4.2vw, 20px);
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #0b1220ee;
  border: 1px solid #ffffff28;
  color: #e2e8f0;
  font-size: clamp(7px, 2vw, 9px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 1px 4px #0006;
}
.klax-dex-cell--owned .klax-dex-circ {
  border-color: #86efac66;
  color: #bbf7d0;
}
.klax-dex-circulation-total {
  margin: 0 clamp(8px, 3vw, 16px) 10px;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, #1a2240, #12182c);
  border: 1px solid #ffffff14;
  border-radius: 12px;
}
.klax-dex-circulation-total-label {
  font-size: 13px; font-weight: 700; color: #94a3b8;
}
.klax-dex-circulation-total-value {
  font-size: clamp(18px, 5vw, 22px); font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
  letter-spacing: 0.02em;
}
.klax-dex-cell--owned .klax-dex-num { color: #86efac; }
.klax-dex-cell--owned {
  border-color: var(--good);
  background: #4ee08a14;
  box-shadow: 0 0 0 1px #4ee08a33, inset 0 0 10px #4ee08a12;
}
.klax-dex-cell--owned.klax-dex-tap:hover {
  border-color: #7ef0b0;
  box-shadow: 0 4px 14px #4ee08a33, inset 0 0 10px #4ee08a18;
}
.klax-dex-cell .klax-dex-sprite {
  width: clamp(34px, 20vw, 52px);
  height: clamp(38px, 22vw, 57px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.klax-dex-cell .klax-dex-sprite .klax-img,
.klax-dex-cell .klax-dex-sprite svg,
.klax-dex-cell .klax-img,
.klax-dex-cell svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.klax-dex-cell .klax-img[src*="sparrix1"],
.klax-dex-cell img[src*="sparrix1"] {
  transform: scale(1.25);
  transform-origin: center bottom;
}
.klax-dex-tap { cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; touch-action: manipulation; }
.klax-dex-tap:hover { background: var(--card); box-shadow: 0 4px 14px #0003; }
.klax-dex-tap:active { transform: scale(.96); }
.klax-dex-name { font-size: clamp(8px, 2.6vw, 10px); font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; hyphens: auto; }
.klax-dex-cell .typechip.sm,
.klax-dex-cell .pill.sm { font-size: clamp(7px, 2vw, 9px); padding: 1px 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klax-dex-cell .muted { font-size: clamp(7px, 2vw, 9px); line-height: 1.2; }

@media (max-width: 420px) {
  .klax-dex-row--legends .klax-dex-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.species-dex-modal { display: flex; flex-direction: column; gap: 4px; }
.species-dex-num {
  text-align: center; font-size: 13px; font-weight: 800; color: #94a3b8;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em; margin-top: 4px;
}
.species-dex-title { margin: 6px 0 4px; text-align: center; font-size: clamp(18px, 5vw, 22px); line-height: 1.2; word-break: break-word; }
.species-dex-art { display: flex; justify-content: center; align-items: center; min-height: clamp(120px, 28dvh, 180px);
  background: radial-gradient(ellipse at 50% 60%, #ffffff12, transparent 70%); border-radius: 16px; padding: clamp(6px, 2vw, 10px); }
.species-dex-art .klax-img,
.species-dex-art svg { width: min(168px, 44vw) !important; height: auto !important; max-height: min(200px, 34dvh); filter: drop-shadow(0 8px 20px #0006); }
.dex-stats { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.dex-stat-row { display: grid; grid-template-columns: 28px 1fr 32px; gap: clamp(4px, 2vw, 8px); align-items: center; font-size: clamp(11px, 3.2vw, 12px); font-weight: 800; }
.dex-stat-lbl { color: var(--muted); text-align: right; }
.dex-stat-val { text-align: right; font-variant-numeric: tabular-nums; }
.dex-stat-bar { height: 8px; background: #0006; border-radius: 999px; overflow: hidden; min-width: 0; }
.dex-stat-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.dex-moves { display: flex; flex-direction: column; gap: 6px; max-height: min(160px, 28dvh); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dex-move { background: var(--card2); border-radius: 10px; padding: 8px 10px; font-size: clamp(12px, 3.4vw, 14px); }
.species-dex-close { width: 100%; margin-top: 10px; min-height: 44px; touch-action: manipulation; }
.typechip.sm { font-size: 9px; padding: 2px 6px; }
.pill.sm { font-size: 9px; padding: 2px 6px; }

/* ============ Retos PvP: temporizador ============ */
.challenge-timer-wrap { height: 5px; background: #ffffff12; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.challenge-timer-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--warn)); border-radius: 999px; transition: width .9s linear; }
.challenge-card .cd { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--warn); }

.pvp-stats-card { padding: 14px 16px; }
.pvp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pvp-stat { text-align: center; padding: 8px 4px; background: #ffffff08; border-radius: 10px; }
.pvp-stat-val { font-size: 22px; font-weight: 900; line-height: 1.1; }
.pvp-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.pvp-elo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; }
.pvp-history-list { gap: 6px; margin-bottom: 12px !important; }
.pvp-history-scroll {
  max-height: min(58vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.pvp-history-tabs { display: flex; gap: 6px; }
.pvp-history-tabs button {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid #ffffff10;
}
.pvp-history-tabs button.active { background: var(--accent); color: #fff; border-color: transparent; }
.pvp-history-pager { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pvp-history-pager .btn { min-width: 0; flex: 1 1 88px; font-size: 12px; padding: 8px 10px; }
.pvp-history-pager .muted { flex: 1 1 100%; text-align: center; order: -1; margin-bottom: 2px; }
.pvp-history-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border-radius: 10px; border: 1px solid #ffffff10;
  border-left: 3px solid transparent;
}
.pvp-history-row.win { border-left-color: var(--good); }
.pvp-history-row.loss { border-left-color: var(--bad); }
.pvp-history-row--global { align-items: flex-start; }
.pvp-history-row--global.win { border-left-color: var(--good); }
.pvp-history-row--global.loss { border-left-color: var(--bad); }
.pvp-history-icon { font-size: 18px; flex-shrink: 0; }
.pvp-history-row--mine { align-items: flex-start; }
.pvp-history-line {
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
.pvp-history-matchup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin: 0 2px;
}
.pvp-history-klax {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.pvp-history-klax svg,
.pvp-history-klax .klax-img {
  width: 30px !important;
  height: 30px !important;
  display: block;
}
.pvp-history-lvl {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pvp-history-vs {
  margin: 0 4px;
  font-size: 11px;
  font-weight: 700;
}
.pvp-history-global-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.pvp-history-global-match {
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.pvp-history-global-meta {
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.pvp-history-bot-pill { margin-left: 4px; }
.pvp-history-elo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pvp-history-elo-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  min-width: 0;
}
.pvp-history-elo-chip--win {
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.28);
}
.pvp-history-elo-chip--loss {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.24);
}
.pvp-history-elo-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp-elo-delta {
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
}
.pvp-elo-delta--na {
  font-weight: 600;
  font-size: 12px;
}

/* ============ Mercado ============ */
.market-buy-filters { margin-bottom: 10px; padding: 0; overflow: hidden; }
.market-buy-filters-head {
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.market-buy-filters-head::-webkit-details-marker { display: none; }
.market-buy-filters-head::after {
  content: '?';
  color: var(--muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.market-buy-filters[open] > .market-buy-filters-head::after { transform: rotate(180deg); }
.market-buy-filters-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
  margin-left: auto;
  margin-right: 4px;
}
.market-buy-filters-brief { white-space: nowrap; }
.market-buy-filters-body { padding: 0 14px 14px; }
.market-buy-filters-body > .row { margin-top: 8px; }
.market-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 2vw, 8px);
  margin-top: 8px;
}
.market-filter-grid label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  gap: 3px;
  font-weight: 700;
  min-width: 0;
}
.market-filter-grid input,
.market-filter-grid select {
  background: var(--bg2);
  border: 1px solid #ffffff20;
  color: var(--txt);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  min-width: 0;
}
.market-filter-mon {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 2vw, 8px);
}
.market-buy-section { margin-bottom: 18px; }
.market-buy-section + .market-buy-section {
  padding-top: 14px;
  border-top: 1px solid #ffffff14;
}
.market-buy-section-title { margin-left: 0 !important; margin-bottom: 8px; }
.market-buy-list { gap: 8px; }

/* ============ Modo Aventura ============ */
.adventure-intro { margin: 0 16px 12px; font-size: 13px; }
.adventure-trainers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 12px;
}
.adventure-trainer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 12px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, transform .15s;
}
.adventure-trainer-card.selected {
  border-color: var(--adv-accent, var(--accent));
  box-shadow: 0 0 0 1px var(--adv-accent, var(--accent)) inset;
}
.adventure-trainer-art {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.adventure-trainer-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 6px 10px #0005);
}
.adventure-trainer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.adventure-trainer-meta b { font-size: 13px; }
.adventure-placeholder { margin: 0 16px 16px; }
.adventure-route-preview {
  display: flex;
  gap: 14px;
  align-items: center;
}
.adventure-route-preview img {
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px #0006);
}
@media (max-width: 380px) {
  .adventure-trainers { grid-template-columns: 1fr; }
  .adventure-route-preview { flex-direction: column; text-align: center; }
}

/* --- Minijuego de precisi?n (Modo Aventura) --- */
.skill-overlay { z-index: 120; align-items: center; padding: 12px; }
.skill-panel {
  width: min(100%, 380px);
  padding: 14px 14px 16px;
  margin: 0;
  animation: skillPop .25s ease-out;
}
@keyframes skillPop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.skill-head { margin-bottom: 8px; align-items: flex-start; }
.skill-title { font-weight: 800; font-size: 16px; }
.skill-sub { font-size: 12px; margin-top: 2px; }
.skill-score { margin-bottom: 10px; font-size: 13px; }
.skill-stat b { font-size: 15px; }
.skill-stat--hit b { color: var(--good, #4ee08a); }
.skill-stat--miss b { color: var(--bad, #ff5d6c); }
.skill-arena-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.skill-arena {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #1a2044 0%, #0d1024 70%);
  box-shadow: inset 0 0 0 3px #ffffff18, 0 8px 32px #0008;
  overflow: visible;
}
.skill-arena--hit { animation: skillHit .22s ease-out; }
.skill-arena--miss { animation: skillMiss .22s ease-out; }
@keyframes skillHit { 50% { box-shadow: inset 0 0 0 3px #4ee08a88, 0 0 24px #4ee08a55; } }
@keyframes skillMiss { 50% { box-shadow: inset 0 0 0 3px #ff5d6c88, 0 0 24px #ff5d6c44; } }
.skill-ring {
  position: absolute; inset: 18px; border-radius: 50%;
  border: 2px dashed #ffffff22;
}
.skill-target {
  position: absolute; inset: 0;
  transform-origin: center center;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.34, 1.2, .64, 1);
}
.skill-target:not(.skill-target--animate) { transition: none; }
.skill-zone {
  position: absolute; inset: 10px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent var(--zone-start), #4ee08a88 270deg, transparent var(--zone-end));
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  pointer-events: none;
}
.skill-aim {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 22px;
  margin-left: -1.5px; border-radius: 2px;
  background: linear-gradient(#4ee08a, #6c8cff);
  box-shadow: 0 0 10px #4ee08a88;
  pointer-events: none;
}
.skill-klax {
  position: absolute; inset: 0;
  pointer-events: none;
}
.skill-klax-orbit {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  transform-origin: center center;
  filter: drop-shadow(0 4px 8px #000a);
  will-change: transform;
}
.skill-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: #ffffff10;
  border: 2px solid #ffffff22;
}
.skill-hint { font-size: 11px; text-align: center; max-width: 280px; line-height: 1.45; margin: 0; }
.skill-throw-btn { width: 100%; font-size: 15px; padding: 12px; }
.skill-feedback {
  min-height: 22px; text-align: center; font-weight: 800; font-size: 14px; margin-top: 8px;
}
.skill-feedback--good { color: var(--good, #4ee08a); }
.skill-feedback--bad { color: var(--bad, #ff5d6c); }

/* --- Ruinas Klax (Modo Aventura) --- */
.ruins-overlay {
  z-index: 120;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 !important;
  background: #0a0c18;
  backdrop-filter: none;
}
body.ruins-game-active { overflow: hidden; touch-action: none; }
.ruins-overlay { touch-action: none; -webkit-user-select: none; user-select: none; }
@media (min-width: 520px) {
  .ruins-overlay {
    align-items: center;
    justify-content: center;
    padding: 16px !important;
    background: rgba(4, 6, 18, 0.88);
    backdrop-filter: blur(6px);
  }
}
.ruins-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #1a2044 0%, #12162e 55%, #0d1024 100%);
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
}
@media (min-width: 520px) {
  .ruins-panel {
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 0;
    max-height: 96vh;
    border: 1px solid #6c8cff33;
    box-shadow: 0 24px 64px #000a, 0 0 0 1px #ffffff08 inset;
    border-radius: 20px;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
}
.ruins-topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px;
  flex-shrink: 0;
}
.ruins-topbar__info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ruins-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 8px;
  background: linear-gradient(135deg, #6c8cff44, #9b7dff33);
  border: 1px solid #6c8cff55; color: #c8d4ff;
}
.ruins-title { font-weight: 800; font-size: 16px; line-height: 1.2; }
.ruins-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ruins-hud {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
  flex-shrink: 0;
}
.ruins-hud-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: #ffffff0a; border: 1px solid #ffffff14;
}
.ruins-hud-pill--hearts { gap: 3px; padding: 5px 8px; }
.ruins-hud-pill--gems { color: #4ee08a; border-color: #4ee08a33; }
.ruins-hud-pill--shadows { color: #ff5db1; border-color: #ff5db144; background: #ff5db10c; }
.ruins-hud-pill--lethal { color: #ff8aa0; border-color: #ff5d6c44; background: #ff5d6c0c; margin-left: auto; }
.ruins-hud-pill--warn { color: var(--warn, #ffb43d); border-color: #ffb43d55; animation: ruinsPulse 0.8s ease-in-out infinite; }
.ruins-hud-pill--danger { color: #ff5d6c; border-color: #ff5d6c66; background: #ff5d6c18; animation: ruinsPulse 0.45s ease-in-out infinite; }
@keyframes ruinsPulse { 50% { opacity: 0.65; } }

/* Escenario: canvas cuadrado centrado + controles superpuestos abajo (m?vil) */
.ruins-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 520px) {
  .ruins-stage {
    flex: 0 0 auto;
    display: block;
    overflow: visible;
  }
}

.ruins-timer-wrap {
  height: 5px; margin: 0 0 10px; background: #ffffff10; border-radius: 999px; overflow: hidden;
}
.ruins-timer-bar {
  height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #6c8cff, #9b7dff);
  transition: width 0.15s linear;
}
.ruins-timer-wrap--warn .ruins-timer-bar { background: linear-gradient(90deg, #ffb43d, #ff8a3d); }
.ruins-timer-wrap--danger .ruins-timer-bar { background: linear-gradient(90deg, #ff5d6c, #ff3d5c); }
.ruins-hud-ic { font-size: 13px; line-height: 1; }
.ruins-heart {
  width: 14px; height: 14px; border-radius: 4px; background: #ffffff12; display: inline-block;
}
.ruins-heart--on {
  background: linear-gradient(135deg, #ff5d6c, #ff8aa0);
  box-shadow: 0 0 8px #ff5d6c66;
}
.ruins-canvas-wrap {
  position: relative;
  flex: 0 0 auto;
  width: var(--ruins-canvas-size, min(100%, 72vw));
  height: var(--ruins-canvas-size, min(100%, 72vw));
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 0 0 2px #6c8cff22, 0 12px 32px #0008, inset 0 0 40px #0006;
  line-height: 0;
}
@media (min-width: 520px) {
  .ruins-canvas-wrap {
    width: auto;
    height: auto;
    margin: 0 auto 12px;
  }
}
.ruins-canvas-wrap canvas {
  display: block;
  touch-action: none;
  width: 100% !important;
  height: 100% !important;
}
.ruins-ingame-timer {
  pointer-events: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: baseline; gap: 4px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.72); border: 1px solid #ffffff22;
  box-shadow: 0 4px 16px #0009;
  font-weight: 800; line-height: 1;
}
.ruins-ingame-timer__ic { font-size: 14px; }
.ruins-ingame-timer__val { font-size: 22px; color: #fff; min-width: 1.5ch; text-align: center; }
.ruins-ingame-timer__unit { font-size: 12px; color: #ffffffaa; font-weight: 700; }
.ruins-ingame-timer--warn { border-color: #ffb43d66; box-shadow: 0 0 14px #ffb43d44; }
.ruins-ingame-timer--warn .ruins-ingame-timer__val { color: #ffd080; }
.ruins-ingame-timer--urgent {
  border-color: #ff5d6c; background: rgba(80, 10, 20, 0.88);
  animation: ruinsTimerPulse 0.42s ease-in-out infinite;
}
.ruins-ingame-timer--urgent .ruins-ingame-timer__val { color: #ff8aa0; font-size: 26px; }
.ruins-canvas-wrap--urgent {
  animation: ruinsScreenFlash 0.42s ease-in-out infinite;
}
@keyframes ruinsTimerPulse {
  50% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 22px #ff5d6c88; }
}
@keyframes ruinsScreenFlash {
  0%, 100% { box-shadow: 0 0 0 2px #ff5d6c55, 0 12px 32px #0008, inset 0 0 0 rgba(255, 93, 108, 0); }
  50% { box-shadow: 0 0 28px #ff5d6caa, 0 12px 32px #0008, inset 0 0 90px rgba(255, 93, 108, 0.38); }
}
.ruins-vignette {
  pointer-events: none; position: absolute; inset: 0;
  box-shadow: inset 0 0 48px #00000088, inset 0 0 12px #6c8cff11;
  border-radius: 14px;
}
.ruins-hint {
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  padding: 0 12px 6px;
  color: #ffffffcc;
}
.ruins-hint--portal { color: #c8b4ff; animation: ruinsPulse 1.2s ease-in-out infinite; }
@media (min-width: 520px) {
  .ruins-hint { display: none; }
}
.ruins-shake { animation: ruinsShake .32s ease-out; }
@keyframes ruinsShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.ruins-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding:
    0
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  pointer-events: none;
}
.ruins-controls > * { pointer-events: auto; }
@media (min-width: 520px) {
  .ruins-controls {
    position: static;
    flex-shrink: 0;
    padding: 0 2px;
    pointer-events: auto;
  }
  .ruins-controls > * { pointer-events: auto; }
}

@media (max-width: 519px) {
  .ruins-hud { display: none; }
  .ruins-sub { display: none; }
  .ruins-topbar { margin-bottom: 4px; }
  .ruins-title { font-size: 14px; }
  .ruins-panel {
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: 0;
  }
  .ruins-stage { border-radius: 0; }
  .ruins-canvas-wrap { border-radius: 0; box-shadow: none; }
}
.ruins-joystick {
  width: 104px; height: 104px; border-radius: 50%; position: relative; touch-action: none; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #ffffff14, #ffffff06);
  border: 2px solid #ffffff20;
  box-shadow: 0 8px 20px #0006, inset 0 2px 8px #ffffff10;
  -webkit-tap-highlight-color: transparent;
}
.ruins-joystick-ring {
  position: absolute; inset: 12px; border-radius: 50%; border: 1px dashed #ffffff18;
}
.ruins-joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, #8ba3ff, #6c8cff 40%, #5a72e8);
  box-shadow: 0 4px 14px #6c8cff66, inset 0 2px 4px #ffffff44;
  pointer-events: none;
}
.ruins-dash-btn {
  flex: 1; max-width: 148px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px; font-weight: 800; border-radius: 14px;
  background: linear-gradient(145deg, #ffb43d, #ff9020);
  border: none; color: #1a1200;
  box-shadow: 0 6px 18px #ffb43d44;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ruins-dash-btn--cd { opacity: 0.55; filter: grayscale(0.3); }
.ruins-dash-ic { font-size: 20px; line-height: 1; }
.ruins-dash-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ruins-pick-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ruins-pick-head h3 { margin: 0; }
.ruins-pick-badge {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  background: #6c8cff22; color: #a8b8ff;
}
.ruins-pick-desc { font-size: 13px; margin: 0 0 12px; line-height: 1.45; }
.ruins-pick-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 14px; background: #ffffff08; margin-bottom: 8px; cursor: pointer;
  border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.ruins-pick-row:has(input:checked) {
  border-color: #6c8cff77; background: linear-gradient(90deg, #6c8cff18, #9b7dff10);
}
.ruins-pick-name { display: flex; flex-direction: column; font-weight: 800; font-size: 14px; }
.ruins-pick-name small { font-weight: 600; font-size: 11px; color: var(--muted); }
.ruins-pick-row--empty { opacity: 0.45; }
.ruins-pick-energy { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ruins-pick-energy .adventure-energy { display: flex; gap: 3px; }

.market-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 16px;
  align-items: stretch;
}
.market-tabs button {
  flex: 1;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid #ffffff10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-tabs button.active { background: var(--accent); color: #fff; border-color: transparent; }
.rank-board-tabs { margin: 10px 0 12px; }
.market-history-tabs-wrap,
#marketHistoryTabs,
#pvpHistoryTabs {
  margin: 0 16px 10px;
}
.market-hist-row { min-width: 0; }
.market-hist-row .grow { min-width: 0; }
.market-hist-row .grow > div { overflow: hidden; text-overflow: ellipsis; }
.market-hist-row--global.market-hist-row--sold { border-left: 3px solid var(--good); }
.market-hist-row--global.market-hist-row--bought { border-left: 3px solid var(--accent); }
.catch-hist-row--fragment { border-left: 3px solid #6c8cff; }
/* Bola usada en la captura: chip compacto junto a tipo y rareza. */
.catch-hist-ball {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0; max-width: 100%;
  font-size: 11px; padding: 2px 7px;
  background: #ffffff14; color: var(--muted);
}
.catch-hist-ball img { display: block; flex-shrink: 0; }
.listing { background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.listing--market > div:first-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.listing .grow { flex: 1; }
.price-tag { font-weight: 900; color: var(--warn); white-space: nowrap; }

/* Anuncios del mercado en tarjetas */
.market-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.market-card {
  background: var(--card);
  border: 1px solid #ffffff12;
  border-radius: 14px;
  padding: 10px 10px 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}
.market-card-seller {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #9aa3b5);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid #ffffff10;
}
.market-card-art { display: flex; align-items: center; justify-content: center; min-height: 68px; }
.market-card-title { font-weight: 800; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.market-card-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.market-card-body .pill { width: fit-content; }
.market-card-body .listing-mon-stats { width: 100%; text-align: left; }
.listing-mon-stats .mon-potion-bonus { margin-top: 6px; width: 100%; box-sizing: border-box; }
.listing-equip-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd36a;
  background: #ffd36a22;
  border: 1px solid #ffd36a55;
  border-radius: 6px;
  padding: 2px 8px;
  flex-shrink: 0;
  margin: 0 auto;
}
.market-quick-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.market-quick-sort-label { font-size: 12px; margin-right: 2px; }
.market-quick-sort-btn.active {
  background: #6c8cff33;
  border-color: #6c8cff88;
  color: #fff;
  font-weight: 800;
}
.market-card-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #ffffff10;
}
.market-card-footer .price-tag { font-size: 15px; }
.market-card-footer .btn { width: 100%; }
.market-card--item-group {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.market-card--item-group:hover {
  border-color: #6c8cff66;
  background: #ffffff08;
  transform: translateY(-2px);
}
.market-card--item-group:active { transform: translateY(0); }
.market-card-offers {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #9aa3b5);
}
.market-card-open { pointer-events: none; }
.market-card-tags { width: 100%; }
/* Ofertas de un item: banner a pantalla completa (m?vil y PC) */
.market-offers-fs {
  position: fixed;
  inset: 0;
  z-index: 90; /* por debajo de .overlay (100) para que el confirm de compra quede encima */
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg, #0b1020);
  overflow: hidden;
}
.market-item-offers {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
}
.market-item-offers-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 10px;
  text-align: left;
  border-bottom: 1px solid #ffffff14;
  background: var(--card);
  flex-shrink: 0;
}
.market-item-offers-art { flex-shrink: 0; }
.market-item-offers-titles { min-width: 0; }
.market-item-offers-titles h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.market-item-offers-meta { font-size: 12px; }
.market-item-offers-x {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
}
.market-item-offers-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid #ffffff10;
  background: #ffffff06;
  flex-shrink: 0;
}
.market-item-offers-sort-lbl { font-size: 12px; margin-right: 2px; }
.market-offers-sort-btn.active {
  background: #6c8cff33;
  border-color: #6c8cff88;
  color: #fff;
  font-weight: 800;
}
.market-item-offers-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 12px 8px;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}
.market-item-offers-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid #ffffff14;
  background: var(--card);
}
.market-item-offers-foot .btn { min-width: 140px; }
@media (min-width: 700px) {
  .market-item-offers-head,
  .market-item-offers-sort,
  .market-item-offers-foot {
    padding-left: 20px;
    padding-right: 20px;
  }
  .market-item-offers-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    padding: 16px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
  .market-item-offers-titles h3 { font-size: 20px; }
}
@media (max-width: 700px) {
  /* Mercado: 2 por fila para tarjetas m?s grandes y legibles */
  .market-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .shopgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 10px;
  }
  .market-card {
    padding: 10px 8px 9px;
    border-radius: 12px;
    gap: 5px;
  }
  .shop-item {
    padding: 7px 5px 6px;
    border-radius: 10px;
    gap: 4px;
  }
  .market-card-seller { font-size: 10px; padding-bottom: 3px; margin-bottom: 0; }
  .market-card-art { min-height: 56px; }
  .market-card-art .klax-img,
  .market-card-art .klax-svg,
  .market-card-art img { max-width: 52px !important; max-height: 52px !important; }
  .shop-item .ic .item-icon--lg { width: 36px; height: 36px; }
  .shop-item .ic .item-icon--klaxball.item-icon--lg { width: calc(36px * var(--klaxball-scale)); height: calc(36px * var(--klaxball-scale)); }
  .shop-item .ic .item-icon--cebo.item-icon--lg { width: calc(36px * var(--cebo-scale)); height: calc(36px * var(--cebo-scale)); }
  .shop-item .ic .item-icon--wide.item-icon--lg { width: calc(36px * var(--wide-item-aspect)); height: 36px; }
  .shop-frag-upgrade-icons { gap: 4px; margin-bottom: 2px; }
  .shop-frag-upgrade-arrow { font-size: 14px; }
  .shop-item > div[style*="font-weight:800"],
  .shop-upgrade-rate { font-size: 11px !important; }
  .shop-item .muted { font-size: 9px !important; min-height: 0 !important; }
  .shop-qty-label { font-size: 9px; margin-bottom: 4px; gap: 2px; }
  .shop-qty,
  .shop-item select { font-size: 12px; padding: 5px 4px; }
  .shop-item .btn { font-size: 11px; padding: 6px 4px; width: 100%; }
  .market-card-title { font-size: 12px; }
  .market-card-body { font-size: 10px; gap: 3px; }
  .market-card-body .pill,
  .market-card-tags .pill,
  .market-card-tags .typechip { font-size: 10px; padding: 2px 6px; }
  .market-card-footer { gap: 5px; padding-top: 6px; }
  .market-card-footer .price-tag { font-size: 13px; }
  .market-card-footer .btn { font-size: 12px; padding: 7px 6px; }
  .market-card-offers { font-size: 10px; }
  .market-item-offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }
  .market-item-offers-sort .btn { font-size: 11px; padding: 7px 8px; }
}

/* Banner de confirmaci?n de compra */
.market-confirm { text-align: center; }
.market-confirm-art { display: flex; align-items: center; justify-content: center; min-height: 72px; }
.market-confirm-price { font-size: 24px; font-weight: 900; color: var(--warn); }

@media (max-width: 420px) {
  .market-tabs { gap: 4px; margin-left: 12px; margin-right: 12px; }
  .market-tabs button { font-size: 11px; padding: 9px 4px; }
  .pvp-history-tabs button { font-size: 11px; padding: 9px 6px; }
  #marketHistoryTabs, #pvpHistoryTabs { margin-left: 12px; margin-right: 12px; }
  .market-hist-row.listing { align-items: flex-start; }
  .market-hist-row .col { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
  .market-hist-row .price-tag { font-size: 11px; }
  .listing { padding: 8px; gap: 8px; }
  .pvp-history-pager .muted { font-size: 11px; }
}

/* ============ Escritorio / PC (?768px) ? no altera m?vil ============ */
@media (min-width: 768px) {
  body:not(.login-active):not(.starter-active) #app {
    display: grid;
    grid-template-areas:
      "nav banners"
      "nav header"
      "nav main";
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    max-width: none;
    width: 100%;
    margin: 0;
    padding-bottom: 0;
    min-height: 100vh;
    background: var(--bg);
  }

  /* Ticker a ancho completo (incluye zona del men? izquierdo); m?vil no cambia. */
  body.has-announce-ticker:not(.login-active):not(.starter-active) #app {
    padding-top: 0;
    grid-template-areas:
      "ticker ticker"
      "nav banners"
      "nav header"
      "nav main";
    grid-template-rows: 26px auto auto 1fr;
  }
  body.has-announce-ticker:not(.login-active):not(.starter-active) #app::before {
    content: '';
    grid-area: ticker;
    height: 26px;
    display: block;
  }
  .announce-ticker {
    left: 0;
    right: 0;
    width: 100%;
  }
  body.has-announce-ticker:not(.login-active):not(.starter-active) #app > .nav {
    top: 26px;
    height: calc(100vh - 26px);
  }

  body:not(.login-active) #app > header { grid-area: header; padding: 16px 20px 8px; }
  body:not(.login-active) #app > #banners { grid-area: banners; }
  body:not(.login-active) #app > #main {
    grid-area: main;
    min-height: 0;
    background: var(--bg);
    padding-bottom: 20px;
  }

  body:not(.login-active) #app > .nav {
    grid-area: nav;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    max-width: none;
    width: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 16px 12px;
    border-top: none;
    border-right: 1px solid #ffffff14;
    background: var(--bg2);
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  body:not(.login-active) #app > .nav button {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 12px;
    text-align: left;
  }

  body:not(.login-active) #app > .nav button .ic {
    font-size: 22px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
  }

  body:not(.login-active) #app > .nav button .nav-lbl {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
  }
  body:not(.login-active) #app > .nav button .nav-lbl--campo {
    flex-direction: row;
    align-items: center;
    gap: 0;
    font-size: 14px;
    letter-spacing: 0;
  }
  body:not(.login-active) #app > .nav button .nav-lbl--campo .nav-lbl-stack { display: none; }
  body:not(.login-active) #app > .nav button .nav-lbl--campo .nav-lbl-full { display: inline; }

  body:not(.login-active) #app > .nav button.active {
    background: #6c8cff22;
    box-shadow: inset 0 0 0 1px #6c8cff55;
    color: var(--txt);
  }

  body:not(.login-active) #app > .nav button.active .ic {
    transform: none;
    filter: none;
  }

  body:not(.login-active) #app > .nav button.has-spawn::after {
    top: 10px;
    right: 10px;
    left: auto;
    transform: none;
  }

  body:not(.login-active) .logo { font-size: 22px; }

  body.starter-active #app { padding: 32px 24px !important; }

  .starter-cinematic { max-width: 960px; min-height: min(88vh, 860px); }
  .starter-grid--cinematic { gap: 18px; max-width: 720px; }
  .starter-card__sprite svg,
  .starter-card__sprite .klax-img {
    width: clamp(96px, 10vw, 120px) !important;
  }
  .starter-name { font-size: 15px; }
  .starter-confirm { max-width: 380px; font-size: 16px; min-height: 52px; }

  /* Login: panel lateral + arte a pantalla completa */
  html.login-active:not(.maintenance-active) {
    height: auto;
    overflow: visible;
  }
  body.login-active:not(.maintenance-active) {
    position: static;
    inset: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  body.login-active:not(.maintenance-active) #app {
    position: relative;
    inset: auto;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .login-screen {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(400px, 440px) minmax(0, 1fr);
    min-height: 100dvh;
    height: 100dvh;
    width: 100%;
    background: #05060e;
  }

  .login-bg {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .login-bg-media {
    inset: 0;
    background-position: center center;
    filter: brightness(1.02) saturate(1.06) contrast(1.02);
  }

  .login-bg-shade {
    background:
      linear-gradient(270deg, rgba(8, 12, 20, 0.94) 0%, rgba(8, 12, 20, 0.72) 28%, rgba(8, 12, 20, 0.08) 48%, rgba(8, 12, 20, 0.02) 100%),
      linear-gradient(180deg, rgba(8, 12, 20, 0.2) 0%, transparent 35%, rgba(8, 12, 20, 0.15) 100%);
  }

  .login-title-hero {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(48px, 8vh, 88px) clamp(28px, 4vw, 56px) 24px;
    text-align: center;
  }

  .login-title-hero-inner {
    max-width: 560px;
    margin: 0 auto;
  }

  .login-title-animated {
    justify-content: center;
    font-size: clamp(44px, 4.8vw, 68px) !important;
  }

  .login-title-logo {
    width: min(280px, 32vw);
  }

  .login-title-tag {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-align: center;
  }

  .login-title-bar {
    margin-left: auto;
    margin-right: auto;
    width: min(280px, 72%);
  }

  .login-shell {
    grid-column: 1;
    grid-row: 1;
    z-index: 4;
    align-items: center;
    justify-content: center;
    padding: 40px clamp(28px, 3vw, 40px);
    min-height: 0;
    background:
      linear-gradient(165deg, rgba(10, 16, 26, 0.97) 0%, rgba(8, 12, 22, 0.99) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.35);
  }

  .login-lang-flags {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    align-self: center;
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  .login-lang-flags .lang-flags {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
  }

  .login-panel {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }

  .login-panel-card {
    width: 100%;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .login-panel-card::before {
    display: none;
  }

  .login-panel-inner {
    max-width: 380px;
    margin: 0 auto;
    max-height: none;
    padding: 0;
    gap: 12px;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }

  .login-panel-head--flags {
    justify-content: center;
  }

  .login-panel-brand-title {
    font-size: 32px;
    white-space: nowrap;
  }

  .login-panel-brand-tag {
    font-size: 11px;
  }

  .login-panel input,
  .login-panel .pass-field,
  .login-tabs,
  .login-hint,
  .login-submit,
  .login-fields,
  .launch-countdown { max-width: 380px; width: 100%; }

  .login-version-badge {
    grid-column: 1 / -1;
    z-index: 6;
  }

  /* Grillas m?s amplias */
  .grid2 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 12px 20px;
  }

  .grid3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 20px;
  }

  .shopgrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin: 12px 20px;
  }
  .invgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 20px;
  }

  .card, .section-title { margin-left: 20px; margin-right: 20px; }
  .home-sections-head { margin-left: 20px; margin-right: 20px; }
  .home-nav-edit-hint { margin-left: 20px; margin-right: 20px; }
  .card.player-card { margin-left: 0; margin-right: 0; width: 100%; max-width: none; }
  .banner { margin-left: 20px; margin-right: 20px; }
  .market-tabs { margin-left: 20px; margin-right: 20px; }
  details.wiki { margin-left: 20px; margin-right: 20px; }
  .klax-dex-wrap { margin-left: 20px; margin-right: 20px; }

  .mon-card { cursor: pointer; transition: transform .12s, box-shadow .12s; }

  /* Klax paseando: mismo hueco entre botones y ?S?guenos? que en m?vil */
  #walkers {
    margin: 16px 20px 8px;
  }

  /* Combate en PC: columna 480px centrada (mismo formato que antes del ancho completo) */
  .arena {
    top: 0;
    left: 50%;
    width: min(480px, 100vw);
    max-width: none;
    height: 100dvh;
    height: 100svh;
    max-height: none;
    transform: translateX(-50%);
    border-radius: 0;
    box-shadow: none;
  }

  .arena-ui { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .arena-top.has-content { padding: max(8px, env(safe-area-inset-top)) 16px 8px; }
  .moves { gap: 10px; }
  .move-btn { padding: 14px; cursor: pointer; }
  .move-btn:hover:not(:disabled) { border-color: #ffffff33; background: #ffffff0a; }

  /* Modales y toasts centrados respecto al viewport completo */
  #toasts { max-width: min(560px, calc(100vw - 48px)); }

  .overlay-dex .modal-dex {
    max-width: 560px;
  }

  .overlay-admin {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .overlay-admin .modal-admin {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Si el contenido no usa .admin-modal, permitir scroll (p. ej. modales antiguos) */
  .overlay-admin .modal-admin:not(:has(.admin-modal)) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 28px calc(28px + env(safe-area-inset-bottom));
  }

  .modal-admin .admin-modal {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 28px calc(28px + env(safe-area-inset-bottom));
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }

  .modal-admin .admin-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card);
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ffffff12;
  }

  .admin-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-grid-mon { grid-template-columns: repeat(4, 1fr); }

  .modal { max-width: 520px; }

  .admin-page-intro { margin-left: 20px; margin-right: 20px; }

  .t-pick-list { max-height: min(50vh, 420px); flex: 1 1 auto; min-height: 120px; }
  /* Picker torneo en PC: cabecera fija + lista con scroll (el modal admin es fullscreen) */
  .modal-admin .t-pick-modal {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
  }
  .modal-admin .t-pick-modal .admin-modal-head { flex-shrink: 0; }
  .modal-admin .t-pick-modal #tConfirm { flex-shrink: 0; }

  /* Klax-dex: celdas un poco m?s grandes */
  .klax-dex-cell .klax-dex-sprite { width: 48px; height: 53px; }
  .klax-dex-cell .klax-dex-sprite .klax-img,
  .klax-dex-cell .klax-dex-sprite svg,
  .klax-dex-cell svg,
  .klax-dex-cell .klax-img { width: 100% !important; height: 100% !important; }

  .species-dex-art svg,
  .species-dex-art .klax-img { width: 200px !important; max-height: 240px; }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .btn.ghost:hover:not(:disabled) { background: #ffffff12; }
  .hub-btn:hover { background: var(--card2); transform: translateY(-2px); }
  .starter:hover { border-color: #ffffff22; transform: translateY(-2px); }
  .mon-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px #0006; }
  body:not(.login-active) #app > .nav button:hover:not(.active) {
    color: var(--txt);
    background: #ffffff0a;
  }
  .klax-dex-tap:hover { transform: translateY(-2px); }
  .listing:hover { background: #ffffff06; }
  .login-tab:hover:not(.active) { background: #ffffff10; color: var(--txt); }
}

@media (min-width: 1024px) {
  body:not(.login-active):not(.starter-active) #app {
    grid-template-columns: 260px minmax(0, 1fr);
    width: 100%;
  }

  .grid2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .grid3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mantenimiento + suspensi?n de cuenta */
body.maintenance-active,
body.ban-active { overflow: hidden; }
html.maintenance-active,
body.maintenance-active,
html.ban-active,
body.ban-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
}
body.maintenance-active.login-active #app,
body.ban-active.login-active #app {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  height: 100svh;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #0e1020;
}
.maintenance-screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.maintenance-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, #3a2a6a55, transparent),
    radial-gradient(ellipse 70% 50% at 80% 80%, #ff5d6c33, transparent),
    linear-gradient(160deg, #0e1020, #1a1235 45%, #0e1020);
}
.maintenance-klax-row {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; opacity: .35; pointer-events: none; padding: 20px;
  animation: maintFloat 6s ease-in-out infinite alternate;
}
.maint-klax { animation: maintBob 2.4s ease-in-out infinite; }
.maint-klax:nth-child(2) { animation-delay: .4s; }
.maint-klax:nth-child(3) { animation-delay: .8s; }
.maint-klax--emoji { font-size: 48px; filter: drop-shadow(0 4px 12px #0008); }
@keyframes maintFloat { from { transform: translateY(-8px); } to { transform: translateY(10px); } }
@keyframes maintBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.maintenance-panel {
  position: relative;
  z-index: 2;
  max-width: 420px;
  width: min(420px, 100%);
  text-align: center;
  margin: 0;
  background: linear-gradient(145deg, #ffffff12, #ffffff08);
  border: 1px solid #ffffff22;
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 20px 60px #0006;
}
.maintenance-panel--robinhood {
  max-width: 560px;
  width: min(560px, 100%);
  padding: 22px 18px 24px;
  background: linear-gradient(160deg, #ffffff10, #0a1020cc 55%, #141028ee);
  border: 1px solid #ffd23d33;
  box-shadow: 0 24px 70px #000a, 0 0 40px #ff5d6c22;
}
.maintenance-icon { font-size: 52px; margin-bottom: 8px; }
.maintenance-title { font-size: 28px; font-weight: 900; margin: 0 0 10px; }
.maintenance-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff88;
}
.maintenance-hero-msg {
  margin: 0 0 6px;
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #ffd23d;
  text-shadow: 0 2px 24px #ffd23d44;
}
.maintenance-msg { font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
.maintenance-hint { font-size: 12px; margin: 10px 0 14px; }
.maintenance-panel--robinhood .maintenance-countdown {
  margin: 14px 0 4px;
  padding: 14px 10px;
}
.maintenance-panel--robinhood .launch-cd-num {
  font-size: clamp(26px, 5.5vw, 38px);
}

/* Tipografía estilo logo Hoodies / Robinhood Chain */
.rh-logo-kicker,
.rh-logo-title {
  margin: 0;
  font-family: "Lilita One", "Russo One", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #ffe34d;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #142a66;
  text-shadow:
    0 3px 0 #0b1a44,
    0 5px 0 #08122e,
    0 10px 22px #0009;
}
.rh-logo-kicker {
  margin: 0 0 10px;
  font-size: clamp(24px, 5.4vw, 36px);
  -webkit-text-stroke: 3.5px #142a66;
}
.rh-logo-title {
  margin: 8px 0 4px;
  font-size: clamp(28px, 6.4vw, 44px);
  -webkit-text-stroke: 4.5px #142a66;
}
.rh-logo-img {
  display: block;
  width: min(340px, 78vw);
  height: auto;
  margin: 0 auto;
  border-radius: 50%;
  filter: drop-shadow(0 10px 28px #000a) drop-shadow(0 0 22px #ff5d6c33);
  animation: rhLogoFloat 4.5s ease-in-out infinite alternate;
}
.rh-discord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 6px;
  padding: 12px 18px;
  min-width: min(280px, 86%);
  border-radius: 12px;
  border: 1px solid #5865f299;
  background: linear-gradient(180deg, #6875f5, #5865f2);
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 8px 24px #5865f255;
}
.rh-discord-btn:hover {
  filter: brightness(1.08);
  color: #fff !important;
}
.maintenance-panel--robinhood .maintenance-actions {
  margin-top: 10px;
}
@keyframes rhLogoFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.02); }
}
@media (max-width: 480px) {
  .rh-logo-kicker { -webkit-text-stroke: 3px #142a66; }
  .rh-logo-title { -webkit-text-stroke: 3.5px #142a66; }
  .rh-logo-img { width: min(280px, 82vw); }
}
.ban-panel { border-color: #ff5d7088; }
.ban-screen-bg { background: radial-gradient(ellipse 80% 60% at 50% 40%, #2a1020 0%, #0e1020 70%); }
.ban-reason { font-weight: 600; color: #ffb4be; }
.ban-when { margin: -6px 0 12px; font-size: 12px; }
.ban-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.ban-contact-btn { text-align: center; text-decoration: none; }
.admin-ban-block textarea {
  width: 100%;
  margin-top: 6px;
  min-height: 72px;
  resize: vertical;
  box-sizing: border-box;
}
.admin-ban-reason {
  padding: 10px 12px;
  border-radius: 10px;
  background: #ff5d7014;
  border: 1px solid #ff5d7044;
  font-size: 13px;
  line-height: 1.45;
}
.maintenance-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.maint-admin-banner { background: linear-gradient(135deg, #ffd23d22, var(--card)); }
.maintenance-countdown { margin: 14px 0 10px; padding: 12px 8px; border-radius: 14px; background: #ffffff0a; }
.maintenance-countdown .launch-cd-num { color: #ffd23d; }
.team-active-card { margin-bottom: 12px; }
.team-active-warn { color: var(--warn, #ffd23d); font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.team-active-grid { display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.team-active-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: var(--card2, #ffffff08); border: 1px solid #ffffff14; cursor: pointer;
}
.team-active-item.is-on { border-color: #4ee08a66; background: #4ee08a14; }
.team-active-item input { flex-shrink: 0; }
.mon-active { background: #4ee08a33; color: #cfe; font-size: 10px; }
.mon-inactive { background: #ffffff14; color: #aaa; font-size: 10px; }

/* --- Admin estad?sticas --- */
.stats-intro { margin: 0 clamp(12px, 4vw, 16px) 10px; font-size: 12px; }
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 clamp(12px, 4vw, 16px) 12px;
}
.stats-kpi {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.stats-kpi-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.stats-kpi-body { min-width: 0; }
.stats-kpi-label { font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.25; }
.stats-kpi-value { font-size: clamp(16px, 4.5vw, 20px); font-weight: 900; margin-top: 2px; line-height: 1.15; }
.stats-kpi-sub { font-size: 10px; margin-top: 3px; }
.stats-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 clamp(12px, 4vw, 16px) 12px;
  padding: 12px 14px;
}
.stats-item-pill {
  background: var(--card2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}
.stats-bomb-tops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 clamp(12px, 4vw, 16px) 12px;
}
@media (min-width: 720px) {
  .stats-bomb-tops { grid-template-columns: 1fr 1fr; }
}
.stats-bomb-top-card {
  margin: 0;
  padding: 12px;
  overflow: hidden;
}
.stats-bomb-top-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.stats-bomb-top-icon { flex-shrink: 0; display: grid; place-items: center; }
.stats-bomb-top-titles { min-width: 0; }
.stats-bomb-top-title { font-weight: 800; font-size: 13px; line-height: 1.25; }
.stats-bomb-top-sub { font-size: 11px; margin-top: 2px; }
.stats-bomb-top-wrap {
  max-height: min(52dvh, 420px);
  overflow: auto;
  margin: 0;
  border-radius: 8px;
}
.stats-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 clamp(12px, 4vw, 16px) calc(12px + env(safe-area-inset-bottom, 0px));
}
.stats-chart-grid--2 { grid-template-columns: 1fr; }
.stats-chart-card {
  padding: 12px 12px 8px;
  overflow: visible;
  margin: 0;
  position: relative;
}
.stats-chart-card--wide { grid-column: 1 / -1; }
.stats-chart-title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--muted);
}
.stats-chart {
  display: block;
  width: 100%;
  height: 160px;
  background: transparent;
  touch-action: manipulation;
  cursor: crosshair;
}
.stats-chart-tooltip {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: var(--card2);
  border: 1px solid #ffffff28;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  box-shadow: var(--shadow);
}
.stats-chart-tooltip.on { display: block; }
.stats-daily-catch { margin: 0 clamp(12px, 4vw, 16px) 16px; padding: 12px 14px; }
.stats-daily-catch-head { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; font-size: 12px; }
.stats-daily-catch-meta { margin: 0 0 10px; font-size: 11px; }
.stats-daily-catch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-daily-catch-table th,
.stats-daily-catch-table td { padding: 8px 14px; text-align: left; border-bottom: 1px solid #ffffff10; vertical-align: middle; }
.stats-daily-catch-table th { font-size: 11px; color: var(--muted); font-weight: 700; }
.stats-daily-catch-rank { width: 36px; color: var(--muted); font-weight: 700; }
.stats-daily-catch-num { width: 72px; text-align: right !important; }
.stats-daily-catch-bar-cell { min-width: 100px; }
.stats-daily-catch-bar { height: 6px; background: #ffffff12; border-radius: 999px; overflow: hidden; margin-bottom: 4px; max-width: 120px; }
.stats-daily-catch-bar span { display: block; height: 100%; background: linear-gradient(90deg, #58d68d, #ffd23d); border-radius: 999px; }
.stats-daily-catch-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.stats-daily-catch-tag--full { color: var(--bad); }
.stats-daily-catch-pager { margin-top: 12px; align-items: center; gap: 8px; }

.catch-rank-head { gap: 8px; margin-bottom: 12px; }
.catch-rank-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px;
  background: #ffffff0a; border: 1px solid #ffffff14; color: var(--muted);
}
.catch-rank-chip b { color: var(--text); font-weight: 700; }
.catch-rank-wrap {
  overflow-x: auto; border-radius: 12px;
  border: 1px solid #ffffff14; background: linear-gradient(180deg, #ffffff08, #ffffff03);
}
.catch-rank-table {
  min-width: 640px;
  table-layout: fixed;
  width: 100%;
}
.catch-rank-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #141820ee; padding: 10px 6px; white-space: nowrap;
  letter-spacing: 0.02em; text-transform: uppercase; font-size: 10px;
  border-bottom: 1px solid #ffffff18;
}
.catch-rank-th-rank { width: 48px; text-align: center !important; }
.catch-rank-th-user { width: 22%; text-align: left !important; }
.catch-rank-th-num { width: 72px; text-align: center !important; }
.catch-rank-th-stat { width: 14%; text-align: center !important; }
.catch-rank-th-use { width: 90px; text-align: left !important; }
.catch-rank-table .stats-daily-catch-rank { text-align: center !important; }
.catch-rank-table .catch-rank-num { text-align: center !important; }
.catch-rank-table tbody tr:hover { background: #ffffff08; }
.catch-rank-row--top1 { background: linear-gradient(90deg, #ffd23d14, transparent); }
.catch-rank-row--top2 { background: linear-gradient(90deg, #c0c8d414, transparent); }
.catch-rank-row--top3 { background: linear-gradient(90deg, #cd7f3214, transparent); }
.catch-rank-badge {
  display: inline-flex; min-width: 28px; justify-content: center;
  padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 800;
  background: #ffffff10; color: var(--muted);
}
.catch-rank-row--top1 .catch-rank-badge { background: #ffd23d33; color: #ffd23d; }
.catch-rank-row--top2 .catch-rank-badge { background: #c0c8d433; color: #d0d8e4; }
.catch-rank-row--top3 .catch-rank-badge { background: #cd7f3233; color: #e0a070; }
.catch-rank-user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catch-rank-attempts { font-variant-numeric: tabular-nums; }
.catch-rank-cell { text-align: center !important; }
.catch-rank-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.catch-rank-pill--comun { background: #b8c0cc22; color: #d0d6e0; border-color: #b8c0cc40; }
.catch-rank-pill--raro { background: #43c0ff22; color: #7ad4ff; border-color: #43c0ff44; }
.catch-rank-pill--cost { opacity: 0.95; font-weight: 800; }
.catch-rank-pill--cost.catch-rank-pill--comun { background: #b8c0cc14; }
.catch-rank-pill--cost.catch-rank-pill--raro { background: #43c0ff14; }

/* Admin ? Atrapar: stats Salvajes (lobby) vs Campo Klax (secciones separadas) */
.admin-catch-stats-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ffffff12;
}
.admin-catch-stats-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-catch-stats-block-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.admin-catch-stats-block-head b { font-size: 13px; }
.admin-catch-fold--salvajes {
  border-color: #7ad4ff33;
}
.admin-catch-fold--campo {
  border-color: #6fdf8a33;
}
.admin-campo-stats-body { color: var(--txt); font-size: 12px; }
.admin-campo-stats-kpis {
  margin: 0 0 12px;
  gap: 8px;
}
.admin-campo-stats-kpis .stats-kpi {
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff0a, #ffffff04);
  border: 1px solid #ffffff12;
}
.admin-campo-stats-kpis .stats-kpi-icon { font-size: 18px; }
.admin-campo-stats-kpis .stats-kpi-value { font-size: clamp(15px, 4vw, 18px); }
.admin-campo-stats-section { margin-top: 12px; }
.admin-campo-stats-section .stats-chart-title { margin-bottom: 6px; }
.admin-campo-stats-table { min-width: 0; }
.admin-campo-stats-table--recent { min-width: 520px; }

/* Collapsible panels: Estad?sticas Salvajes / Estad?sticas Campo Klax */
.admin-catch-fold {
  margin-top: 12px;
  padding: 0;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff08, #ffffff03);
  overflow: hidden;
}
.admin-catch-fold-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  background: #ffffff08;
}
.admin-catch-fold-head:hover { background: #ffffff0e; }
.admin-catch-fold-titles {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-catch-fold-titles b {
  font-size: 13px;
  pointer-events: none;
}
.admin-catch-fold-summary {
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
}
.admin-catch-fold-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.admin-catch-fold-chev {
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  transition: transform 0.2s ease;
  pointer-events: none;
  line-height: 1;
  padding: 6px 4px;
  min-width: 1.4em;
  text-align: center;
}
.admin-catch-fold--collapsed .admin-catch-fold-chev { transform: rotate(-90deg); }
/* Minimizado: se ocultan tablas/detalles, pero el preview (KPIs) sigue visible. */
.admin-catch-fold--collapsed .admin-catch-fold-body { display: none !important; }
.admin-catch-fold-preview {
  margin: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid #ffffff10;
}
.admin-catch-fold-body { margin: 0; padding: 0 12px 12px; }
.admin-catch-fold:not(.admin-catch-fold--collapsed) .admin-catch-fold-preview {
  padding-bottom: 4px;
}
.admin-catch-fold:not(.admin-catch-fold--collapsed) .admin-catch-fold-body {
  border-top: none;
  padding-top: 4px;
}

.campo-stats-when {
  white-space: nowrap;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.campo-stats-species {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.campo-stats-lv {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  background: #ffffff12;
  color: var(--muted);
  vertical-align: middle;
}
.campo-stats-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
}
.campo-stats-pill--ok {
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 36%, transparent);
}
.campo-stats-pill--fail {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: #ff9aa4;
  border-color: color-mix(in srgb, var(--bad) 34%, transparent);
}
@media (max-width: 639px) {
  .admin-campo-stats-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-campo-stats-table th,
  .admin-campo-stats-table td { padding: 7px 8px; }
}

@media (min-width: 640px) {
  .stats-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-chart-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-campo-stats-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .stats-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-campo-stats-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mon-card--inactive { opacity: .72; }
.mon-card--inactive .art { filter: grayscale(.35); }
.mon-locked { background: #ff6b3d33; color: #ffb08a; font-size: 10px; }
.mon-card--locked .art { filter: grayscale(.5) brightness(.85); }
.mon-card--burn-pick { cursor: pointer; outline: 2px solid transparent; }
.mon-card--burn-on {
  outline: 2px solid #ff8a4c;
  box-shadow: 0 0 0 3px #ff8a4c33, 0 10px 28px #0005;
}
.mon-card--burn-disabled { opacity: .45; cursor: not-allowed; }
.team-burn-card { margin: 10px 0; }
.klax-lock-banner,
.klax-lock-notice {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ff6b3d18;
  border: 1px solid #ff6b3d44;
  color: #ffc9a8;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.team-active-item.is-locked { opacity: .65; }
.adventure-pick-row--locked { opacity: .55; pointer-events: none; }
.admin-user-filters textarea { resize: vertical; min-height: 52px; }
.claim-reward-overlay .pass-activate-ticket { font-size: 56px; }

/* Recompensa visual (fragmentos, etc.) */
.item-reward-overlay .pass-activate-ticket { font-size: 0; line-height: 0; }
.reward-hero-wrap { position: relative; display: inline-block; z-index: 1; }
.reward-hero-img {
  width: 104px; height: 104px; object-fit: contain; display: block;
  filter: drop-shadow(0 10px 22px #0009);
}
.reward-hero-img--wide {
  width: calc(104px * var(--wide-item-aspect));
  height: 104px;
}
.reward-hero-emoji { font-size: 72px; line-height: 1; display: block; filter: drop-shadow(0 8px 16px #0008); }
.reward-hero-klax .klax-img,
.reward-hero-klax svg {
  width: 110px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px #0009);
}
.ruins-victory-overlay .reward-hero-klax .klax-img,
.ruins-victory-overlay .reward-hero-klax svg { width: 120px; }
.reward-hero-qty {
  position: absolute; right: -10px; bottom: -2px;
  background: linear-gradient(135deg, var(--accent), #7b68ee);
  color: #fff; font-weight: 900; font-size: 17px; line-height: 1;
  padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 4px 14px #0007;
  border: 2px solid #ffffff22;
}
.reward-perk-row .reward-perk-icon .item-icon,
.reward-perk-row .reward-perk-icon .item-icon--lg { width: 44px; height: 44px; }
.reward-perk-row .reward-perk-icon .item-icon--klaxball,
.reward-perk-row .reward-perk-icon .item-icon--klaxball.item-icon--lg { width: calc(44px * var(--klaxball-scale)); height: calc(44px * var(--klaxball-scale)); }
.reward-perk-row .reward-perk-icon .item-icon--cebo,
.reward-perk-row .reward-perk-icon .item-icon--cebo.item-icon--lg { width: calc(44px * var(--cebo-scale)); height: calc(44px * var(--cebo-scale)); }
.reward-perk-row .reward-perk-icon .item-icon--wide,
.reward-perk-row .reward-perk-icon .item-icon--wide.item-icon--lg { width: calc(44px * var(--wide-item-aspect)); height: 44px; }
.item-reward-overlay--fragment .pass-activate-burst {
  background: radial-gradient(circle, #5dade255 0%, #bb8fce33 35%, transparent 68%);
}
.item-reward-overlay--fragment .pass-activate-ring {
  border-color: #5dade288;
  box-shadow: 0 0 24px #5dade266, inset 0 0 20px #bb8fce44;
}
.item-reward-overlay--fragment .pass-activate-title {
  background: linear-gradient(135deg, #5dade2, #bb8fce);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.item-reward-overlay--crystal .pass-activate-burst {
  background: radial-gradient(circle, #4ee08a66 0%, #6c8cff33 35%, transparent 68%);
}
.item-reward-overlay--crystal .pass-activate-ring {
  border-color: #4ee08a88;
  box-shadow: 0 0 28px #4ee08a55, inset 0 0 22px #6c8cff33;
}
.item-reward-overlay--crystal .pass-activate-title {
  background: linear-gradient(135deg, #4ee08a, #9b7dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.item-reward-overlay--ruins-portal .pass-activate-burst {
  background: radial-gradient(circle, #c77dff77 0%, #6c8cff44 35%, transparent 68%);
}
.item-reward-overlay--ruins-portal .pass-activate-ring {
  border-color: #c77dff99;
  box-shadow: 0 0 32px #9b7dff66, inset 0 0 24px #6c8cff44;
}
.item-reward-overlay--ruins-portal .pass-activate-title {
  background: linear-gradient(135deg, #c77dff, #6c8cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.item-reward-overlay--ruins-win .pass-activate-burst {
  background: radial-gradient(circle, #6c8cff66 0%, #4ee08a33 40%, transparent 68%);
}
.item-reward-overlay--ruins-win .pass-activate-title {
  background: linear-gradient(135deg, #6c8cff, #4ee08a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.item-reward-overlay--ruins-boss .pass-activate-burst {
  background: radial-gradient(circle, #ffb43d66 0%, #ff5db144 35%, transparent 68%);
}
.item-reward-overlay--ruins-boss .pass-activate-title {
  background: linear-gradient(135deg, #ffb43d, #ff5db1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.item-reward-overlay--ruins-campaign .pass-activate-burst {
  background: radial-gradient(circle, #ffd23d88 0%, #ffb43d44 35%, transparent 68%);
}
.item-reward-overlay--ruins-campaign .pass-activate-ring {
  border-color: #ffd23d99;
  box-shadow: 0 0 36px #ffb43d77, inset 0 0 28px #ffd23d44;
}
.item-reward-overlay--ruins-campaign .pass-activate-title {
  background: linear-gradient(135deg, #ffd23d, #ffb43d, #ff9020);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ruins-victory-overlay .pass-activate-perks { max-height: 42vh; overflow-y: auto; }

/* Aviso captura salvaje: carrera multijugador / sin bola gastada */
.wild-catch-outcome .wild-outcome-panel {
  max-width: min(380px, 92vw);
  text-align: center;
}
.wild-catch-outcome--race .wild-outcome-panel {
  border: 2px solid #ff8c4266;
  box-shadow: 0 0 0 1px #ffffff12 inset, 0 12px 40px #ff6b3544;
}
.wild-catch-outcome--fail .wild-outcome-panel {
  border: 2px solid #6c8cff55;
}
.wild-outcome-badge {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 6px;
}
.wild-outcome-icon {
  font-size: 56px;
  line-height: 1;
  margin: 4px 0 8px;
}
.wild-outcome-creature {
  margin: 0 auto 8px;
  opacity: 0.85;
  filter: grayscale(0.35);
}
.wild-outcome-title {
  font-size: clamp(18px, 5vw, 22px);
  margin-bottom: 8px;
}
.wild-catch-outcome--race .wild-outcome-title {
  color: #ffb08a;
  text-shadow: 0 0 16px #ff6b3555;
}
.wild-outcome-msg {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.wild-outcome-detail {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffffb3;
}
.wild-outcome-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
}
.wild-outcome-note--safe {
  background: #7ee78722;
  border: 1px solid #7ee78755;
  color: #b8f5c0;
}
.wild-outcome-btn { margin-top: 4px; width: 100%; max-width: 280px; }

/* Canje fragmentos: Klax sale de Klaxball */
.frag-catch-overlay .frag-catch-burst {
  background: radial-gradient(circle, #6c8cff55 0%, #ff5db133 35%, transparent 68%);
}
.frag-catch-overlay .frag-catch-ring {
  border-color: #6c8cff88;
  box-shadow: 0 0 24px #6c8cff66, inset 0 0 20px #ff5db144;
}
.frag-catch-stage {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 8px auto 4px;
  z-index: 1;
}
.frag-catch-ball {
  width: calc(92px * var(--klaxball-scale));
  height: calc(92px * var(--klaxball-scale));
  background: url(/assets/klaxball.png) center/contain no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 8px 18px #0009);
  transition: transform .45s ease-in, opacity .35s ease;
}
.frag-catch-overlay.shake .frag-catch-ball {
  animation: fragBallShake .55s ease-in-out 3;
}
.frag-catch-creature {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.frag-catch-creature svg { width: 100%; height: 100%; display: block; }
.frag-catch-flash {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #6c8cff44 35%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.frag-catch-overlay.revealed .frag-catch-ball {
  transform: translate(-50%, -50%) scale(0.12);
  opacity: 0;
}
.frag-catch-overlay.revealed .frag-catch-creature {
  animation: fragKlaxEmerge .7s cubic-bezier(.2, 1.35, .35, 1) forwards;
}
.frag-catch-overlay.revealed .frag-catch-flash {
  animation: fragCatchFlash .5s ease-out forwards;
}
.frag-catch-overlay.revealed .frag-catch-spark {
  animation: passSpark .85s ease-out var(--delay, 0s) forwards;
}
@keyframes fragBallShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(-20deg); }
  75% { transform: translate(-50%, -50%) rotate(20deg); }
}
@keyframes fragKlaxEmerge {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(0.15); filter: brightness(2.5); }
  55% { opacity: 1; transform: translate(-50%, -58%) scale(1.14); filter: brightness(1.35); }
  100% { opacity: 1; transform: translate(-50%, -54%) scale(1); filter: brightness(1); }
}
@keyframes fragCatchFlash {
  0% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.35); }
}
.frag-catch-info {
  z-index: 1;
  opacity: 0;
  transform: translateY(14px);
  margin-top: 4px;
}
.frag-catch-info.show {
  animation: fragCatchInfoIn .55s ease-out forwards;
}
@keyframes fragCatchInfoIn {
  to { opacity: 1; transform: translateY(0); }
}
.frag-catch-title {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 900;
  letter-spacing: .03em;
  background: linear-gradient(135deg, #6c8cff, #ff5db1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
}
.frag-catch-name {
  font-size: clamp(17px, 4.8vw, 22px);
  font-weight: 800;
  margin-bottom: 8px;
}
.frag-catch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.frag-catch-type { font-size: 11px; padding: 3px 8px; }
.frag-catch-btn {
  margin-top: 14px;
  opacity: 0;
  transform: translateY(10px);
}
.frag-catch-overlay.revealed .frag-catch-btn {
  animation: passTitleIn .45s ease-out .25s forwards;
}
.frag-catch-btn:disabled { opacity: 0.45; pointer-events: none; }

/* ============ Cinem?tica de captura ============ */
.catch-cinematic-overlay {
  z-index: 245;
  background: #061208 center/cover no-repeat url(/assets/catch-bg/field.png);
}
.catch-cinematic-overlay--incursion {
  z-index: 270;
  background: radial-gradient(ellipse at 50% 28%, #2a1848ee 0%, #120820f2 42%, #06040efa 100%);
}
.catch-rockets {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.catch-rocket {
  position: absolute;
  left: var(--left, 50%);
  bottom: -8%;
  width: 10px;
  height: 10px;
  opacity: 0;
}
.catch-cinematic-overlay.rockets-celebrate .catch-rocket,
.catch-cinematic-overlay--incursion.show .catch-rocket {
  animation: catchRocketLaunch var(--dur, 2s) ease-out var(--delay, 0s) infinite;
}
.catch-rocket__trail {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 42px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, hsl(var(--hue, 40) 90% 70%), transparent);
  opacity: 0.85;
}
.catch-rocket__head {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: hsl(var(--hue, 40) 100% 72%);
  box-shadow: 0 0 10px hsl(var(--hue, 40) 100% 65%);
}
.catch-rocket__burst {
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 0 hsl(var(--hue, 40) 100% 70%),
    12px -8px 0 -2px hsl(calc(var(--hue, 40) + 40) 100% 70%),
    -14px -4px 0 -2px hsl(calc(var(--hue, 40) + 80) 100% 68%),
    8px -18px 0 -1px hsl(calc(var(--hue, 40) + 120) 100% 72%),
    -6px -16px 0 -1px #fff;
  opacity: 0;
}
@keyframes catchRocketLaunch {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  65% { transform: translateY(-58vh) scale(1); opacity: 1; }
  100% { transform: translateY(-70vh) scale(0.35); opacity: 0; }
}
.catch-cinematic-overlay.rockets-celebrate .catch-rocket__burst,
.catch-cinematic-overlay--incursion.success .catch-rocket__burst {
  animation: catchRocketBurst 1.1s ease-out calc(var(--delay, 0s) + 0.55s) infinite;
}
@keyframes catchRocketBurst {
  0% { transform: scale(0.2); opacity: 0; box-shadow: 0 0 0 0 hsl(var(--hue, 40) 100% 70%); }
  40% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.incursion-result-catch {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.incursion-result-catch.ok { color: #7dff9a; }
.incursion-result-catch.fail { color: #ffb86b; }
.catch-cinematic-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00000022 0%, #02080466 45%, #020804cc 100%);
  pointer-events: none;
}
.catch-cinematic-overlay .catch-cinematic-panel {
  z-index: 1;
}
.catch-cinematic-overlay--starter {
  z-index: 260;
  background: radial-gradient(ellipse at 50% 32%, #1a2848ee 0%, #0e1430f0 45%, #060818fa 100%);
}
.catch-cinematic-overlay--starter .catch-cinematic-burst {
  background: radial-gradient(circle, #6c8cff66 0%, #ffd23d44 35%, #5fd66f33 55%, transparent 72%);
}
.catch-cinematic-overlay--starter .catch-cinematic-ring {
  border-color: #ffd23d99;
}
.catch-cinematic-burst {
  position: absolute;
  width: min(130vw, 560px);
  height: min(130vw, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, #5fd66f55 0%, #3da5ff33 30%, #ffd23d22 55%, transparent 72%);
  transform: scale(0.15);
  opacity: 0;
}
.catch-cinematic-overlay.show .catch-cinematic-burst {
  animation: evoBurstIn 1.6s ease-out forwards;
}
.catch-cinematic-ring {
  border-color: #5fd66f99;
  box-shadow: 0 0 36px #5fd66f88, inset 0 0 28px #3da5ff55;
}
.catch-cinematic-ring--2 {
  width: 110px;
  height: 110px;
  border-color: #ffd23d88;
  box-shadow: 0 0 28px #ffd23d66, inset 0 0 18px #ff8a5b44;
}
.catch-cinematic-overlay.shaking .catch-cinematic-ring,
.catch-cinematic-overlay.absorb .catch-cinematic-ring {
  animation: evoRingPulse 1s ease-out infinite;
}
.catch-cinematic-stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-top: 4px;
}
.catch-cinematic-wild {
  position: absolute;
  z-index: 2;
  transition: transform 0.45s ease, opacity 0.35s ease, filter 0.35s ease;
  filter: drop-shadow(0 12px 22px #000a);
}
.catch-cinematic-wild.absorbed {
  opacity: 0;
  transform: scale(0.15);
  filter: brightness(2.5) blur(2px);
  pointer-events: none;
}
.catch-cinematic-wild.break-free {
  opacity: 1;
  visibility: visible;
  animation: catchBreakFree 0.62s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
@keyframes catchBreakFree {
  0% { opacity: 0; transform: scale(0.2) translateY(12px); filter: brightness(2); }
  55% { opacity: 1; transform: scale(1.18) translateY(-6px); filter: brightness(1.35); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}
.catch-cinematic-wild.fleeing {
  opacity: 1;
  animation: catchWildFlee 1.05s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
  z-index: 5;
}
@keyframes catchWildFlee {
  0% { opacity: 1; transform: scale(1) translate(0, 0); }
  12% { transform: scale(1.06) translate(-10px, 2px); }
  28% { transform: scale(0.98) translate(18px, -4px); }
  55% { opacity: 1; transform: scale(0.88) translate(72px, -8px); }
  100% { opacity: 0; transform: scale(0.55) translate(165px, -28px); filter: blur(1.5px); }
}
.catch-flee-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.catch-flee-trail.active { opacity: 1; }
.catch-flee-trail i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff88 0%, #9ee8b044 45%, transparent 72%);
  opacity: 0;
}
.catch-flee-trail.active i:nth-child(1) { animation: catchFleeDust 1s ease-out 0.05s forwards; }
.catch-flee-trail.active i:nth-child(2) { animation: catchFleeDust 1s ease-out 0.18s forwards; }
.catch-flee-trail.active i:nth-child(3) { animation: catchFleeDust 1s ease-out 0.32s forwards; }
.catch-flee-trail.active i:nth-child(4) { animation: catchFleeDust 1s ease-out 0.48s forwards; }
@keyframes catchFleeDust {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(55px, -12px) scale(1.3); }
}
.catch-flee-trail.active i:nth-child(2) { animation-name: catchFleeDust2; }
@keyframes catchFleeDust2 {
  0% { opacity: 0; transform: translate(-8px, 6px) scale(0.35); }
  20% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(48px, 8px) scale(1.1); }
}
.catch-flee-trail.active i:nth-child(3) { animation-name: catchFleeDust3; }
@keyframes catchFleeDust3 {
  0% { opacity: 0; transform: translate(4px, -4px) scale(0.3); }
  100% { opacity: 0; transform: translate(90px, -18px) scale(1.2); }
}
.catch-flee-trail.active i:nth-child(4) { animation-name: catchFleeDust4; }
@keyframes catchFleeDust4 {
  0% { opacity: 0; transform: translate(-4px, 2px) scale(0.25); }
  100% { opacity: 0; transform: translate(120px, -6px) scale(0.9); }
}
.catch-cinematic-ball {
  position: absolute;
  width: calc(72px * var(--klaxball-scale));
  height: calc(72px * var(--klaxball-scale));
  background: center/contain no-repeat;
  filter: drop-shadow(0 10px 18px #000a);
  opacity: 0;
  transform: scale(0.35) translateY(80px);
  z-index: 3;
}
.catch-cinematic-overlay.throwing .catch-cinematic-ball {
  opacity: 1;
  animation: catchBallThrow 0.72s cubic-bezier(0.25, 0.9, 0.35, 1) forwards;
}
@keyframes catchBallThrow {
  0% { opacity: 0; transform: scale(0.35) translateY(90px); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.catch-cinematic-overlay.absorb .catch-cinematic-ball,
.catch-cinematic-overlay.shaking .catch-cinematic-ball,
.catch-cinematic-overlay.resolve .catch-cinematic-ball {
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* Bola visible aunque el SO desactive animaciones CSS (Windows reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .catch-cinematic-overlay.throwing .catch-cinematic-ball,
  .catch-cinematic-overlay.absorb .catch-cinematic-ball,
  .catch-cinematic-overlay.shaking .catch-cinematic-ball,
  .catch-cinematic-overlay.resolve .catch-cinematic-ball {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
  }
  .catch-cinematic-ball.shake-l,
  .catch-cinematic-ball.shake-r {
    animation: none !important;
  }
  .catch-cinematic-ball.shake-l { transform: scale(1.04) rotate(-14deg) !important; }
  .catch-cinematic-ball.shake-r { transform: scale(1.04) rotate(14deg) !important; }
}
.catch-cinematic-ball.shake-l {
  animation: catchBallShakeL 0.22s ease-in-out;
}
.catch-cinematic-ball.shake-r {
  animation: catchBallShakeR 0.22s ease-in-out;
}
@keyframes catchBallShakeL {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(-24deg); }
}
@keyframes catchBallShakeR {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(24deg); }
}
.catch-cinematic-ball.caught {
  animation: catchBallCaught 0.65s ease-out forwards;
}
@keyframes catchBallCaught {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.2); filter: brightness(1.8); }
  100% { transform: scale(1); filter: brightness(1.2); }
}
.catch-cinematic-ball.escaped {
  opacity: 0.35;
  transform: scale(0.7);
  filter: grayscale(0.4);
}
.catch-cinematic-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #5fd66fcc 28%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}
.catch-cinematic-overlay.flash .catch-cinematic-flash {
  animation: evoWhiteFlash 0.65s ease-out forwards;
}
.catch-cinematic-hook {
  margin-top: 10px;
  z-index: 2;
  font-size: 14px;
  font-weight: 800;
  color: #9ee8b0;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
}
.catch-cinematic-overlay.show .catch-cinematic-hook {
  animation: evoTextIn 0.45s ease-out 0.2s forwards;
}
.catch-cinematic-title {
  margin-top: 6px;
  z-index: 2;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #fff 0%, #9ee8b0 35%, #3da5ff 70%, #ffd23d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: scale(0.75) translateY(12px);
}
.catch-cinematic-overlay.revealed .catch-cinematic-title {
  animation: evoTitleSlam 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.08s forwards;
}
.catch-cinematic-overlay.fail.revealed .catch-cinematic-title {
  background: linear-gradient(135deg, #fff, #ffb43d, #ff5d6c);
  -webkit-background-clip: text;
  background-clip: text;
}
.catch-cinematic-names {
  z-index: 2;
  margin-top: 4px;
  font-size: clamp(14px, 4vw, 16px);
  opacity: 0;
}
.catch-cinematic-overlay.revealed .catch-cinematic-names {
  animation: evoTextIn 0.5s ease-out 0.28s forwards;
}
.catch-cinematic-msg {
  z-index: 2;
  margin: 6px 0 0;
  font-size: 13px;
  max-width: 300px;
  opacity: 0;
}
.catch-cinematic-overlay.revealed .catch-cinematic-msg {
  animation: evoTextIn 0.45s ease-out 0.42s forwards;
}
.catch-cinematic-btn {
  margin-top: 14px;
  z-index: 2;
  opacity: 0;
}
.catch-cinematic-overlay.revealed .catch-cinematic-btn:not(:disabled) {
  animation: evoTextIn 0.45s ease-out 0.52s forwards;
}
.catch-cinematic-overlay.shaking .catch-cinematic-panel {
  animation: evoPanelShake 0.14s linear infinite;
}
.header-audio {
  padding: 6px 9px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.header-audio--muted {
  opacity: 0.55;
}
.header-audio-group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.battle-music-mute-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #ffffff33;
  border-radius: 12px;
  background: #1a2044ee;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 16px #0008;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
.battle-music-mute-btn--float {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: 10px;
  z-index: 30;
}
.arena:has(.battle-close-btn--float) .battle-music-mute-btn--float {
  top: max(52px, calc(env(safe-area-inset-top) + 44px));
}
.battle-music-mute-btn.show {
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0);
}
.battle-music-mute-btn.show.battle-music-mute-btn--float {
  pointer-events: auto !important;
}
.battle-music-mute-btn:active {
  transform: scale(0.94);
}
.arena.catch-phase .battle-music-mute-btn--float,
.arena.battle-end-result .battle-music-mute-btn--float {
  display: flex;
}

/* Mantenimiento en PC: forzar panel centrado (anula layout login escritorio) */
@media (min-width: 768px) {
  html.maintenance-active,
  body.maintenance-active {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body.maintenance-active.login-active #app,
  body.ban-active.login-active #app {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  body.maintenance-active .maintenance-screen {
    position: fixed;
    inset: 0;
    display: grid !important;
    place-items: center;
    width: 100vw;
    height: 100dvh;
    height: 100svh;
    margin: 0;
    padding: 24px;
  }

  body.maintenance-active .maintenance-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  body.maintenance-active .maintenance-panel {
    justify-self: center;
    align-self: center;
  }
}

.multi-kind-pill { margin-right: 6px; }
.multi-user-list .multi-user-link {
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.35;
}
.multi-ip-label {
  font-size: 14px;
  font-weight: 600;
}
.multi-ip-label code {
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #ffffff12;
}
.multi-principal-pill {
  background: #6c8cff33;
  color: #b8c8ff;
  margin-left: 6px;
}
.multi-acct-row {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff08;
}
.multi-acct-row--principal {
  background: #6c8cff18;
  border: 1px solid #6c8cff44;
}
.multi-acct-meta {
  font-size: 12px;
  margin: 4px 0 0;
  line-height: 1.4;
}
.multi-alts-list { margin-top: 10px; }

.player-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}
.player-badges--sm .player-badge { font-size: 13px; width: 1.35em; height: 1.35em; }
.player-badges--md .player-badge { font-size: 16px; width: 1.35em; height: 1.35em; }
.player-badge {
  cursor: help;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.lb-row__line1 .player-badges { margin-right: 0; }

/* Ranking: premio ? centrado en la fila en PC; m?vil sigue junto al nombre */
@media (min-width: 768px) {
  .lb-row { position: relative; }
  .lb-row__line1 .lb-row__prize-stars {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .lb-row__name { flex: 0 1 auto; max-width: min(100%, 42%); }
  /* Campo/Ruinas: mantener formato m?vil (stats a la derecha, nombre flexible) */
  .ruins-rank-row.lb-row .lb-row__name {
    flex: 1 1 auto;
    max-width: none;
  }
}
.item-rarity-pill {
  font-size: 9px !important;
  vertical-align: middle;
  margin-left: 4px;
}
.multi-signals li { margin: 2px 0; }
.multi-user-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.multi-user-flag { font-size: 1.15em; line-height: 1; flex-shrink: 0; }
.multi-user-flag-img {
  display: inline-block;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  vertical-align: -1px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px #ffffff22;
}
.multi-user-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.35;
}
.admin-catch-fold-summary .multi-user-flag-img,
.multi-ip-label .multi-user-flag-img {
  vertical-align: -2px;
  margin-right: 2px;
}
.multi-user-meta {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}
.multi-user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.multi-tag {
  font-size: 10px !important;
  background: #6c8cff22;
  color: #c8d4ff;
}
.multi-tag--warn {
  background: #ff4d6d33;
  color: #ffb3c1;
}
.multi-report-card { padding: 14px 16px; }
.multi-report-card.admin-catch-fold { padding: 0; }
.multi-cluster-list { display: flex; flex-direction: column; }
.multi-report-card .admin-catch-fold-preview .multi-acct-row { margin-top: 0; }
.multi-report-card .admin-catch-fold-body .multi-alts-list { margin-top: 4px; }
.multi-report-card .admin-catch-fold-summary { text-transform: none; letter-spacing: 0; }
.multi-primary-user {
  text-align: left;
  font-size: 15px;
  gap: 8px;
  padding: 0;
}
.multi-primary-meta { font-size: 12px; margin: 6px 0 0; }
.multi-report-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa8c4;
  margin: 12px 0 6px;
}
.multi-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.multi-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff08;
}
.multi-reason--high { border-left: 3px solid #ff4d6d; }
.multi-reason--mid { border-left: 3px solid #ffd23d; }
.multi-reason--low { border-left: 3px solid #6c8cff; }
.multi-reason-rank {
  flex-shrink: 0;
  width: 1.4em;
  font-weight: 700;
  color: #9aa8c4;
}
.multi-linked { margin-top: 10px; font-size: 12px; }
.multi-linked summary { cursor: pointer; }
.multi-linked-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.kc-gen-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ffd23d33;
  background: linear-gradient(135deg, #ffd23d14, #6c8cff0c);
}
.kc-gen-banner-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd23d, #ff8a5b);
  color: #08101f;
}
.kc-gen-tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ffd23d22;
  color: #ffd23d;
  vertical-align: middle;
}

.klax-creator-layout {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 640px) {
  .klax-creator-layout { grid-template-columns: 1fr; }
}
.klax-creator-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.klax-creator-preview {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff08;
  border-radius: 14px;
  border: 1px solid #ffffff14;
}
.klax-creator-file .btn { cursor: pointer; }
.klax-creator-fields .admin-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.hidden { display: none !important; }
.kc-move-form-card { background: #ffffff06; border: 1px solid #ffffff12; }
.kc-moves-tbl td, .kc-moves-tbl th { padding: 4px 8px !important; }
.kc-move-edit-row.kc-editing { background: #6c8cff14; }
.kc-edit-row.kc-editing { background: #ffd23d14; }
.kc-edit-row.kc-editing td { border-color: #ffd23d44; }
.kc-catalog-tbl .btn { white-space: nowrap; }
.kc-catalog-thumb-cell { width: 52px; padding: 4px 6px !important; vertical-align: middle; }
.kc-catalog-thumb {
  width: 44px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.kc-catalog-thumb img,
.kc-catalog-thumb svg { display: block; max-width: 44px; max-height: 48px; object-fit: contain; }
.kc-catalog-meta { display: none; font-size: 10px; margin-top: 3px; line-height: 1.35; word-break: break-word; }
.kc-catalog-name-cell { text-align: left !important; min-width: 0; }
.kc-catalog-actions-cell { vertical-align: middle; padding: 4px 6px !important; }
.kc-catalog-actions {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center;
}
.kc-edit-row.kc-hidden-row { opacity: 0.78; }
.kc-hidden-tag { color: #94a3b8; font-size: 10px; white-space: nowrap; }

@media (max-width: 767px) {
  .kc-catalog-tbl { display: block; width: 100%; margin-top: 8px; font-size: 11px; }
  .kc-catalog-tbl thead { display: none; }
  .kc-catalog-tbl tbody { display: block; }
  .kc-catalog-tbl tr.kc-edit-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "actions actions";
    gap: 8px 10px;
    padding: 10px 8px;
    border-bottom: 1px solid #ffffff12;
    align-items: start;
  }
  .kc-catalog-tbl tr.kc-edit-row td {
    display: block;
    border: none;
    padding: 0 !important;
    text-align: left !important;
  }
  .kc-catalog-tbl tr.kc-edit-row .kc-col-thumb { grid-area: thumb; }
  .kc-catalog-tbl tr.kc-edit-row .kc-col-name { grid-area: name; min-width: 0; }
  .kc-catalog-tbl tr.kc-edit-row .kc-col-actions { grid-area: actions; }
  .kc-catalog-tbl .kc-col-id,
  .kc-catalog-tbl .kc-col-tier,
  .kc-catalog-tbl .kc-col-type { display: none !important; }
  .kc-catalog-meta { display: block; }
  .kc-catalog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .kc-catalog-actions .btn {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 8px 6px;
    font-size: 11px;
  }
}

/* ?? Flappy Klaxs ?? */
body.flappy-lock { overflow: hidden; }
.flappy-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(4, 8, 20, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  backdrop-filter: blur(4px);
}
.flappy-frame {
  width: fit-content;
  max-width: 100%;
  background: #0d1228;
  border-radius: 16px;
  border: 1px solid #ffffff18;
  box-shadow: 0 20px 60px #000a;
  overflow: hidden;
  position: relative;
}
/* M?vil: pantalla completa */
.flappy-overlay--fs { padding: 0; }
.flappy-overlay--fs .flappy-frame {
  width: 100%;
  height: 100dvh;
  max-width: none;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
}
.flappy-overlay--fs .flappy-play-wrap { flex: 1 1 auto; min-height: 0; }
.flappy-hud {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: #121833; font-size: 12px;
}
.flappy-hud-next { flex: 1; min-width: 0; }
.flappy-hud-lbl { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.flappy-hud b { font-size: 13px; line-height: 1.25; }
.flappy-play-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: #0b1020; /* letterbox si el aspect no llena el wrap */
}
#flappyCanvas {
  display: block;
  /* Tama?o real lo fija JS (mundo l?gico 390?620 escalado por CSS) */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* Sin azul s?lido: el primer frame del canvas pinta el cielo real */
  background: transparent;
  touch-action: none;
}
/* Cron?metro flotante sobre el campo de juego */
.flappy-float-time {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(8, 12, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.flappy-float-time__lbl {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}
.flappy-float-time b {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  color: #ffe66d;
}
.flappy-float-time.hidden { display: none; }
@media (max-width: 700px) {
  .flappy-float-time { top: 10px; padding: 7px 14px; }
  .flappy-float-time b { font-size: 20px; }
}
.flappy-hint {
  position: absolute; left: 0; right: 0; bottom: 72px;
  text-align: center; color: #fff; font-weight: 800;
  text-shadow: 0 2px 8px #000a; pointer-events: none;
  animation: flappy-hint-pulse 1.4s ease-in-out infinite;
}
.flappy-hint.hidden { display: none; }
@keyframes flappy-hint-pulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}
.flappy-result {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 12, 28, 0.82);
  backdrop-filter: blur(4px);
  padding: 16px;
  z-index: 5;
  animation: flappy-result-fade 0.28s ease-out;
}
@keyframes flappy-result-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.flappy-result.hidden { display: none; }
.flappy-result-card {
  background: var(--card); border-radius: 14px; padding: 18px 16px;
  width: 100%; max-width: 320px; text-align: center;
  border: 1px solid #ffffff14;
}
.flappy-result-card--end {
  position: relative;
  overflow: hidden;
  max-width: 360px;
  padding: 22px 18px 18px;
  border-radius: 20px;
  border: 1px solid #ffffff22;
  background:
    linear-gradient(165deg, #163a62 0%, #1a2f48 42%, #1c4034 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  animation: flappy-result-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes flappy-result-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.flappy-result-sky {
  position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(180deg, #5ec8ffaa 0%, transparent 100%);
  pointer-events: none;
}
.flappy-result-cloud {
  position: absolute;
  width: 34px; height: 12px;
  background: #ffffffb8;
  border-radius: 999px;
  box-shadow: 10px -4px 0 -2px #ffffffa8, -9px -3px 0 -3px #ffffff99;
  opacity: 0.7;
}
.flappy-result-cloud--1 { top: 18%; left: 12%; }
.flappy-result-cloud--2 { top: 28%; right: 14%; transform: scale(0.75); }
.flappy-result-hero { position: relative; z-index: 1; margin-bottom: 14px; }
.flappy-result-klax {
  display: flex; justify-content: center; margin: 0 auto 8px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  animation: flappy-result-bob 2.2s ease-in-out infinite;
}
@keyframes flappy-result-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.flappy-result-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fd6ff;
  font-weight: 700;
}
.flappy-result-title {
  margin: 4px 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.flappy-result-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #1a2a12;
  background: linear-gradient(135deg, #ffe566, #ffb43d);
  box-shadow: 0 0 16px #ffb43d66;
}
.flappy-result-time-big {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 140px;
  padding: 10px 22px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #ffffff18;
}
.flappy-result-time-big__lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8c4e0;
}
.flappy-result-time-big b {
  font-size: 36px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 2px 12px rgba(94, 200, 255, 0.35);
}
.flappy-result-stats {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.flappy-result-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #ffffff10;
}
.flappy-result-stat span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9bb3cc;
}
.flappy-result-stat b { font-size: 14px; color: #f2f7ff; }
.flappy-result-energy {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0 0 12px;
  border: 1px solid #ffffff14;
}
.flappy-result-energy__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 16px;
}
.flappy-result-energy b { display: block; font-size: 13px; margin-bottom: 2px; }
.flappy-result-energy small { display: block; font-size: 11px; line-height: 1.35; color: #c5d4e6; }
.flappy-result-energy--free {
  background: linear-gradient(135deg, #1e4d3588, #163a4888);
  border-color: #4ee08a55;
}
.flappy-result-energy--free b { color: #7dffb3; }
.flappy-result-energy--spent {
  background: rgba(255, 180, 61, 0.12);
  border-color: #ffb43d44;
}
.flappy-result-energy--spent b { color: #ffd086; }
.flappy-result-section { margin: 0 0 10px; }
.flappy-result-section__lbl {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9bb3cc;
  margin-bottom: 6px;
}
.flappy-result-empty {
  margin: 0 0 10px;
  font-size: 12px;
  color: #a8c4e0;
}
.flappy-result-loading { margin: 24px 0; color: #c5d4e6; }
.flappy-result-time { font-size: 16px; margin: 0 0 6px; }
.flappy-result-rewards {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 0;
}
.flappy-reward-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #ffffff14; border-radius: 999px; padding: 4px 10px; font-size: 12px;
  border: 1px solid #ffffff12;
}
.flappy-result-next {
  font-size: 12px;
  margin: 0 0 14px;
  color: #c5d4e6;
}
.flappy-result-next--done { color: #7dffb3; font-weight: 700; }
.flappy-result-cta {
  width: 100%;
  min-height: 44px;
  font-weight: 800;
  border-radius: 12px;
}
.flappy-pick-head .ruins-pick-badge { background: #5dade2; }

.adv-flappy-page { padding: 0 0 24px; }
.adv-flappy-hero {
  position: relative; overflow: hidden;
  margin: 0 12px 12px; padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1a3a6e 0%, #16304f 45%, #1e4d3a 100%);
  border: 1px solid #ffffff14;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  justify-content: space-between;
}
.adv-flappy-hero-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, #5ec8ff44, transparent 55%),
    radial-gradient(ellipse at 80% 100%, #58d68d33, transparent 50%);
  pointer-events: none;
}
.adv-flappy-hero-text { position: relative; z-index: 1; max-width: 280px; }
.adv-flappy-play {
  margin: 0 12px; padding: 16px;
  display: flex; gap: 14px; align-items: center;
  background: linear-gradient(120deg, #1b2744, #1a3d32);
  border: 1px solid #5dade244;
}
.adv-flappy-play-art {
  font-size: 42px; width: 64px; height: 64px;
  display: grid; place-items: center;
  background: #ffffff10; border-radius: 16px; flex-shrink: 0;
}
.adv-flappy-prize-row--done { opacity: 0.55; }
.adv-flappy-prize-row--done td:first-child { text-decoration: line-through; }
.admin-flappy-prize-row label { font-size: 11px; }
.admin-flappy-prize-row input,
.admin-flappy-prize-row select { min-width: 0; }

/* Escena animada en el panel de juego */
.adv-flappy-play-art--scene {
  position: relative;
  overflow: hidden;
  font-size: 0;
  background:
    linear-gradient(180deg, #6fd0ff 0%, #9be3ff 55%, #8fdc74 82%, #4a8f3a 100%);
  border: 1px solid #ffffff22;
}
.adv-flappy-scene-bird {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  animation: flappy-scene-bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
@keyframes flappy-scene-bob {
  0%, 100% { transform: translate(-50%, -50%) scaleX(-1) rotate(-6deg); }
  50% { transform: translate(-50%, -62%) scaleX(-1) rotate(7deg); }
}
.adv-flappy-scene-cloud {
  position: absolute;
  width: 26px; height: 10px;
  background: #ffffffd8;
  border-radius: 999px;
  box-shadow: 8px -4px 0 -2px #ffffffc9, -7px -3px 0 -3px #ffffffc0;
  animation: flappy-scene-cloud linear infinite;
}
.adv-flappy-scene-cloud--1 { top: 16%; animation-duration: 5s; }
.adv-flappy-scene-cloud--2 { top: 58%; animation-duration: 7.5s; animation-delay: -3s; transform: scale(0.7); }
@keyframes flappy-scene-cloud {
  from { left: 110%; }
  to { left: -45%; }
}

/* Alas del Aviador */
.adv-flappy-wings {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding: 7px 10px;
  background: linear-gradient(120deg, #ffd23d22, #ffffff10);
  border: 1px solid #ffd23d55;
  border-radius: 10px;
  font-size: 12px;
}
.adv-flappy-wings--table { margin-top: 10px; }
.adv-flappy-wings-count {
  background: #ffd23d; color: #221a00;
  font-weight: 900; border-radius: 999px;
  padding: 1px 9px; font-size: 12px;
}
.adv-flappy-wings-count--out { background: var(--bad); color: #fff; }
.ruins-home-amulet--flappy { margin-top: 8px; }
.flappy-wings-award {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(120deg, #ffd23d33, #ff9d0022);
  border: 1px solid #ffd23d88;
  font-size: 14px;
  animation: flappy-wings-pop 0.5s ease-out;
}
@keyframes flappy-wings-pop {
  0% { transform: scale(0.7); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* Intro Flappy (reutiliza estructura ruins-intro) */
.flappy-intro__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2a6fd8 0%, #5ec8ff 45%, #87d96a 85%, #4a8f3a 100%);
}
.flappy-intro__clouds { position: absolute; inset: 0; overflow: hidden; }
.flappy-intro__cloud {
  position: absolute;
  top: var(--y);
  left: 110%;
  width: 70px; height: 24px;
  background: #ffffffe0;
  border-radius: 999px;
  box-shadow: 22px -10px 0 -6px #ffffffd0, -20px -8px 0 -8px #ffffffc5;
  transform: scale(var(--s, 1));
  animation: flappy-intro-cloud var(--t, 7s) linear var(--d, 0s) infinite;
}
@keyframes flappy-intro-cloud {
  from { left: 110%; }
  to { left: -25%; }
}
.flappy-intro__stage {
  position: absolute;
  left: 0; right: 0;
  top: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  transform: translateY(-50%);
}
.flappy-intro__pipes {
  width: 46px; height: 190px;
  border-radius: 8px;
  background: linear-gradient(90deg, #2a8f36, #58d68d 45%, #2a8f36);
  border: 3px solid #14501c;
  position: relative;
  opacity: 0;
}
.flappy-intro__pipes::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px; height: 26px;
  background: linear-gradient(90deg, #237a2e, #6be29a 45%, #237a2e);
  border: 3px solid #14501c;
  border-radius: 6px;
}
.flappy-intro__pipes--left { transform: translateX(-70px) rotate(180deg); }
.flappy-intro__pipes--left::after { bottom: -4px; }
.flappy-intro__pipes--right { transform: translateX(70px); }
.flappy-intro__pipes--right::after { top: -4px; }
.ruins-intro--ready .flappy-intro__pipes {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.5s ease;
}
.ruins-intro--ready .flappy-intro__pipes--left { transform: rotate(180deg); }
.flappy-intro__bird {
  font-size: 64px;
  opacity: 0;
  transform: translateY(60px) scaleX(-1) scale(0.5);
  /* bob propio: flappy-scene-bob usa translate(-50%,-50%) y desplazaba el Klax a la izquierda */
  animation: flappy-intro-bird 1.1s 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards,
    flappy-intro-bob 1.6s 1.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
}
@keyframes flappy-intro-bird {
  to { opacity: 1; transform: translateY(0) scaleX(-1) scale(1); }
}
@keyframes flappy-intro-bob {
  0%, 100% { transform: translateY(0) scaleX(-1) scale(1) rotate(-6deg); }
  50% { transform: translateY(-10px) scaleX(-1) scale(1) rotate(7deg); }
}
.flappy-intro .ruins-intro__epic-line--accent { color: #ffd23d; }

/* Bloques admin desplegables */
.admin-block--collapsible { padding-top: 0; padding-bottom: 0; }
.admin-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 13px 0;
  margin: 0;
}
.admin-block-head b { pointer-events: none; }
.admin-block-chev {
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.online-count-pill { color: #4ee08a; }
.admin-block-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bad, #ff5d6c);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}
.admin-block--collapsed > .admin-block-chev,
.admin-block--collapsed .admin-block-chev { transform: rotate(-90deg); }
.admin-block--collapsible.admin-block--collapsed > *:not(.admin-block-head) { display: none !important; }
.admin-block--collapsible:not(.admin-block--collapsed) { padding-bottom: 14px; }

/* ===== Chat de entrenadores (FAB + ventana flotante) ===== */
#mc-chat-root {
  position: fixed;
  z-index: 85;
  pointer-events: none;
}
.mc-chat-fab,
.mc-chat-panel {
  pointer-events: auto;
}
.mc-chat-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom) + 10px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ffffff22;
  background: linear-gradient(160deg, #2a3158 0%, #1a1f3a 100%);
  box-shadow: 0 8px 24px #0008, 0 0 0 1px #ffd23d22;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 87;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mc-chat-fab:hover { transform: scale(1.06); box-shadow: 0 10px 28px #000a, 0 0 0 1px #ffd23d55; }
.mc-chat-fab:active { transform: scale(0.96); }
.mc-chat-fab-ic { font-size: 22px; line-height: 1; }
.mc-chat-fab-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bad, #ff5d6c);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: none;
  place-items: center;
  box-shadow: 0 2px 6px #0008;
  line-height: 1;
  pointer-events: none;
}
.mc-chat-fab-badge.is-on {
  display: grid;
}
.mc-chat-panel {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom) + 68px);
  width: min(360px, calc(100vw - 24px));
  height: min(360px, calc(100vh - 140px));
  max-height: calc(100dvh - 140px);
  display: none;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid #ffffff18;
  background: linear-gradient(180deg, #1c2240 0%, #12162a 100%);
  box-shadow: 0 18px 48px #000a, inset 0 1px 0 #ffffff10;
  overflow: hidden;
  z-index: 86;
}
.mc-chat-panel.is-open {
  display: flex;
}
.mc-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #ffffff12;
  background: #ffffff08;
  flex-shrink: 0;
}
.mc-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
}
.mc-chat-title-ic { font-size: 16px; }
.mc-chat-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #ffffff14;
  background: #ffffff0a;
  color: #c8d0e8;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  z-index: 2;
}
.mc-chat-close:hover { background: #ffffff16; }
.mc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.mc-chat-empty {
  margin: auto;
  color: var(--muted, #8b93b0);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.mc-chat-msg {
  background: #ffffff08;
  border: 1px solid #ffffff0e;
  border-radius: 12px;
  padding: 7px 9px;
  max-width: 100%;
}
.mc-chat-msg--mine {
  background: #3d6cff18;
  border-color: #3d6cff33;
  align-self: flex-end;
}
.mc-chat-msg--featured {
  background: linear-gradient(135deg, #ffd23d18 0%, #ff8a3d14 100%);
  border-color: #ffd23d55;
  box-shadow: 0 0 0 1px #ffd23d22, 0 4px 14px #ffd23d14;
}
.mc-chat-msg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.mc-chat-msg-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mc-chat-del {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #ff8a8a;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.mc-chat-del:hover,
.mc-chat-del:focus-visible {
  opacity: 1;
  background: #ff4d4d22;
  outline: none;
}
.mc-chat-user {
  font-weight: 800;
  font-size: 12px;
  color: #e8ecff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mc-chat-msg--featured .mc-chat-user { /* color viene del nick elegido del jugador */ }
.mc-chat-star { color: #ffd23d; font-size: 11px; }
.mc-chat-time {
  font-size: 10px;
  color: var(--muted, #8b93b0);
  flex-shrink: 0;
}
.mc-chat-text {
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
}
.mc-chat-klax-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #0c1022aa;
  border: 1px solid #ffffff12;
}
.mc-chat-klax-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  min-width: 0;
}
.mc-chat-klax-card-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-chat-tools {
  display: flex;
  gap: 6px;
  padding: 4px 10px 0;
  flex-shrink: 0;
}
.mc-chat-tool {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #ffffff14;
  background: #ffffff0a;
  cursor: pointer;
  font-size: 15px;
}
.mc-chat-tool:hover { background: #ffffff16; }
.mc-chat-tool-color {
  display: grid;
  place-items: center;
  padding: 0;
}
.mc-chat-color-swatch {
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  border-radius: 50%;
  border: 1.5px solid #ffffff88;
  background: #e8ecff;
  box-shadow: inset 0 0 0 1px #0004;
  pointer-events: none;
}
.mc-chat-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 2px 0;
}
.mc-chat-color-opt {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.mc-chat-color-opt:hover { transform: scale(1.06); }
.mc-chat-color-opt.is-selected {
  border-color: #ffd23d;
  box-shadow: 0 0 0 1px #ffd23d88;
}
.mc-chat-color-hint {
  margin: 6px 0 0;
  font-size: 11px;
}
.mc-chat-pickers {
  flex-shrink: 0;
  max-height: 110px;
  overflow-y: auto;
  border-top: 1px solid #ffffff10;
  background: #0a0e1ccc;
  padding: 6px 8px;
}
.mc-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.mc-chat-emoji {
  border: 0;
  background: transparent;
  font-size: 18px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 6px;
}
.mc-chat-emoji:hover { background: #ffffff14; }
.mc-chat-klax-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-chat-klax-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid #ffffff10;
  background: #ffffff08;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  color: inherit;
}
.mc-chat-klax-row:hover { background: #ffffff14; }
.mc-chat-klax-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  min-width: 0;
}
.mc-chat-compose {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid #ffffff12;
  flex-shrink: 0;
  background: #ffffff06;
}
.mc-chat-compose input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #ffffff18;
  background: #0c1022;
  color: #eef2ff;
  padding: 0 10px;
  font-size: 13px;
  outline: none;
}
.mc-chat-compose input:focus { border-color: #ffd23d66; }
.mc-chat-send {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(160deg, #ffd23d, #f0a020);
  color: #1a1408;
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
}
.mc-chat-send:hover { filter: brightness(1.05); }

@media (min-width: 768px) {
  .mc-chat-fab {
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
  }
  .mc-chat-panel {
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 80px));
    right: max(24px, env(safe-area-inset-right));
    width: min(480px, calc(100vw - 48px));
    height: min(560px, calc(100vh - 120px));
    max-height: calc(100dvh - 120px);
  }
}

body.login-active #mc-chat-root,
html.login-active #mc-chat-root,
.maintenance-active #mc-chat-root {
  display: none !important;
}


/* ===== Campo Klax (exploracion) ===== */
body.explore-lock {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Hero CTA en pesta?a Atrapar ? mapa a pantalla ancha, inconfundible */
.catch-explore-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(120, 210, 140, 0.45);
  background: #0a1810;
  box-shadow:
    0 0 0 1px rgba(40, 100, 60, 0.35),
    0 14px 36px rgba(0, 0, 0, 0.4);
}
.catch-explore-hero__map {
  position: relative;
  height: 148px;
  overflow: hidden;
  background: #163224;
}
.catch-explore-hero__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 42%;
  image-rendering: pixelated;
  transform: scale(1.08);
}
.catch-explore-hero__map-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 14, 0.15) 0%, rgba(8, 20, 14, 0.55) 70%, #0a1810 100%);
  pointer-events: none;
}
.catch-explore-hero__badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #eaffea;
  background: rgba(18, 72, 38, 0.92);
  border: 1px solid rgba(150, 230, 160, 0.45);
  border-radius: 999px;
  padding: 5px 11px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.catch-explore-hero__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 16px;
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(70, 180, 100, 0.18), transparent 55%),
    linear-gradient(165deg, #143524 0%, #0d1f16 55%, #0a1810 100%);
}
.catch-explore-hero__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7ddea0;
}
.catch-explore-hero__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #d8ffe0;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.catch-explore-hero__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #a8d0b4;
}
.catch-explore-hero__desc b { color: #e4ffe8; font-weight: 700; }
.catch-explore-hero__attempts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120, 210, 140, 0.4);
  background: rgba(20, 70, 40, 0.55);
  box-shadow: inset 0 1px 0 rgba(180, 255, 200, 0.12);
}
.catch-explore-hero__attempts-main {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #e8ffe8;
  line-height: 1.25;
}
.catch-explore-hero__attempts-reset {
  font-size: 11px;
  font-weight: 600;
  color: #8fc9a0;
}
.catch-explore-hero__attempts.is-exhausted {
  border-color: rgba(230, 160, 70, 0.55);
  background: rgba(80, 45, 12, 0.55);
}
.catch-explore-hero__attempts.is-exhausted .catch-explore-hero__attempts-main {
  color: #ffd9a0;
}
.catch-explore-hero__attempts.is-exhausted .catch-explore-hero__attempts-reset {
  color: #d4b080;
}
.catch-explore-hero__cta {
  align-self: stretch;
  margin-top: 8px;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 18px;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(50, 160, 80, 0.4);
}
.catch-explore-hero__cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
@media (min-width: 520px) {
  .catch-explore-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }
  .catch-explore-hero__map {
    height: auto;
    min-height: 200px;
  }
  .catch-explore-hero__map-fade {
    background: linear-gradient(90deg, transparent 40%, rgba(10, 24, 16, 0.55) 78%, #0a1810 100%);
  }
  .catch-explore-hero__body {
    justify-content: center;
    padding: 18px 20px;
  }
  .catch-explore-hero__cta {
    align-self: flex-start;
  }
}

.explore-overlay {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12px;
  overflow-y: auto;
  background: rgba(6, 18, 10, 0.92);
  backdrop-filter: blur(5px);
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Modals/toasts default to z-index 100/200 ? below Campo. Raise while explore is open. */
body.explore-lock .overlay {
  z-index: 13000;
}
/* During wild battle: remove from layout/stack so .arena is visible & usable */
.explore-overlay--battling {
  display: none !important;
}
/* Belt-and-suspenders: while Campo is open, battle UI must sit above explore shell */
body.explore-lock .arena {
  z-index: 15000;
}
body.explore-lock .pass-activate-overlay {
  z-index: 15100;
}
body.explore-lock .catch-cinematic-overlay {
  z-index: 15120;
}
body.explore-lock #toasts {
  z-index: 15200;
}
/*
 * Toasts de Campo: hijos de `.explore-frame` (mapa), no del overlay letterbox.
 * z-index por encima del HUD (8) / bag (14) para que en PC se vean 5s sobre el mapa.
 */
.explore-toasts {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: min(448px, 92%);
  pointer-events: none;
  isolation: isolate;
}
.explore-overlay--fs.explore-overlay--pc .explore-toasts {
  /* Bajo la franja HUD del frame PC, centrado en el mapa jugable. */
  top: 52px;
}
.explore-toasts .toast {
  pointer-events: none;
  opacity: 1;
}
/* Immersive shell: map fills viewport; HUD overlays (no reserved chrome strips). */
.explore-overlay--fs {
  padding: 0;
  align-items: stretch;
  overflow: hidden;
  background: #0a1410;
  backdrop-filter: none;
}
.explore-frame {
  width: min(440px, 100%);
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(165deg, #1a3a24 0%, #102018 60%, #0a1410 100%);
  border: 1px solid rgba(110, 200, 120, 0.25);
  border-radius: 16px;
  padding: 8px 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  margin: auto 0;
}
.explore-overlay--fs .explore-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 0;
  gap: 0;
  background: #0a1410;
  box-shadow: none;
  overflow: hidden;
}
/* Desktop PC: large limited centered frame ? HUD/joystick stay inside the map box. */
@media (min-width: 701px) {
  .explore-overlay--fs.explore-overlay--pc {
    padding: clamp(16px, 3.5vh, 36px);
    align-items: center;
    justify-content: center;
    background: rgba(6, 18, 10, 0.94);
    /* Sin blur extra en PC: backdrop-filter + toasts fixed hermanos fallaba en algunos GPU/Chrome. */
    backdrop-filter: none;
  }
  .explore-overlay--fs.explore-overlay--pc .explore-frame {
    width: auto;
    height: auto;
    max-width: min(900px, calc(100vw - 48px));
    max-height: min(90vh, calc(100dvh - 48px), calc(100vh - 48px));
    margin: 0;
    border-radius: 16px;
    border: 1px solid rgba(110, 200, 120, 0.3);
    box-shadow:
      0 16px 48px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(40, 100, 60, 0.25);
    background: #0a1410;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .explore-overlay--fs.explore-overlay--pc .explore-hud {
    padding: 10px 12px 8px;
  }
  .explore-overlay--fs.explore-overlay--pc .explore-joystick {
    left: 12px;
    bottom: 12px;
  }
  .explore-overlay--fs.explore-overlay--pc .explore-hud-chat {
    right: 12px;
    bottom: 12px;
  }
  .explore-overlay--fs.explore-overlay--pc .explore-hud-bag--fab {
    right: 12px;
    bottom: calc(12px + 56px + 8px);
  }
  .explore-overlay--fs.explore-overlay--pc .explore-hud-status {
    left: 10px;
    right: 10px;
    bottom: 120px;
  }
  .explore-overlay--fs.explore-overlay--pc #exploreCanvas {
    border-radius: 0;
  }
}
.explore-hud {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Overlay chrome on top of the map (mobile + desktop immersive). */
.explore-overlay--fs .explore-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    8px
    max(10px, env(safe-area-inset-left, 0px));
  gap: 6px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 18, 10, 0.72) 0%, rgba(6, 18, 10, 0.28) 70%, transparent 100%);
}
.explore-overlay--fs .explore-hud-top,
.explore-overlay--fs .explore-chat-bar,
.explore-overlay--fs .explore-hud-klax,
.explore-overlay--fs .explore-hud-top-right,
.explore-overlay--fs .explore-hud-skin,
.explore-overlay--fs .explore-hud-audio,
.explore-overlay--fs .explore-hud-mute,
.explore-overlay--fs .explore-hud-bag,
.explore-overlay--fs .explore-hud-quit,
.explore-overlay--fs .explore-hud-zones,
.explore-overlay--fs .explore-chat-bar input,
.explore-overlay--fs .explore-chat-bar .btn {
  pointer-events: auto;
}
.explore-overlay--fs .explore-hud-trainers {
  pointer-events: none;
}
.explore-overlay--fs .explore-hud-skin,
.explore-overlay--fs .explore-hud-mute,
.explore-overlay--fs .explore-hud-quit,
.explore-overlay--fs .explore-hud-zones {
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(180, 255, 190, 0.28);
  backdrop-filter: blur(4px);
}
.explore-overlay--fs .explore-hud-zones {
  pointer-events: auto;
  color: #d8ffe4;
  font-weight: 700;
}
.explore-overlay--fs .explore-hud-zones.is-active,
.explore-hud-zones.is-active {
  background: rgba(40, 120, 180, 0.72);
  border-color: rgba(120, 210, 255, 0.65);
  color: #e8f7ff;
}
.explore-admin-zones {
  position: absolute;
  left: 8px;
  right: auto;
  bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px));
  top: auto;
  width: min(360px, calc(100% - 16px));
  z-index: 12;
  max-height: min(62%, 420px);
  overflow: auto;
  padding: 0;
  border-radius: 12px;
  background: rgba(8, 22, 14, 0.92);
  border: 1px solid rgba(120, 220, 140, 0.45);
  backdrop-filter: blur(8px);
  color: #e8ffe0;
  font-size: 12px;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  touch-action: none;
}
.explore-admin-zones.is-dragged {
  bottom: auto;
  right: auto;
}
.explore-overlay--pc .explore-admin-zones {
  bottom: 56px;
  max-height: 280px;
  width: min(380px, calc(100% - 16px));
}
.explore-admin-zones-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 8px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-bottom: 1px solid rgba(120, 220, 140, 0.22);
  position: sticky;
  top: 0;
  background: rgba(8, 22, 14, 0.96);
  z-index: 1;
  border-radius: 12px 12px 0 0;
}
.explore-admin-zones-head.is-dragging,
.explore-admin-zones-head:active {
  cursor: grabbing;
}
.explore-admin-zones-head b {
  font-size: 13px;
  white-space: nowrap;
}
.explore-admin-zones-hint {
  flex: 1;
  font-size: 10px;
  line-height: 1.25;
  min-width: 0;
}
.explore-admin-zones-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 10px;
}
.explore-admin-zones-field,
.explore-admin-zones-row label,
.explore-admin-zones-bounds-toggle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: #c8e8d0;
}
.explore-admin-zones-bounds-toggle {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.explore-admin-zones-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.explore-admin-zones-zone-pick {
  align-items: flex-end;
}
.explore-admin-zones-zone-pick .explore-admin-zones-field {
  flex: 1 1 140px;
  min-width: 120px;
}
.explore-admin-zones-grow {
  flex: 1 1 120px;
  min-width: 100px;
}
.explore-admin-zones-row label {
  flex: 1 1 64px;
  min-width: 64px;
}
.explore-admin-zones input[type="number"],
.explore-admin-zones input[type="text"],
.explore-admin-zones select {
  width: 100%;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(160, 230, 180, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: #e8ffe0;
  font-size: 12px;
}
.explore-admin-zones-poly {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(120, 220, 140, 0.22);
}
.explore-admin-zones-poly-status {
  font-size: 10px;
  line-height: 1.3;
}
.explore-admin-zones-poly-btns {
  gap: 6px;
}
.explore-admin-zones-poly-btns .btn.is-active {
  outline: 1px solid rgba(180, 255, 140, 0.85);
  background: rgba(40, 90, 50, 0.55);
}
.explore-admin-zones-bounds.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.explore-admin-zones-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.explore-admin-zones-dirty {
  font-size: 11px;
  color: #ffd080;
}
.explore-overlay--zone-edit #exploreCanvas {
  cursor: crosshair;
}
.explore-overlay--zone-edit #exploreCanvas:active {
  cursor: grabbing;
}
.explore-overlay--fs .explore-chat-bar {
  padding: 2px 0 0;
}
.explore-hud-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.explore-hud-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-end;
}
.explore-hud-trainers {
  flex: 0 0 auto;
  width: fit-content;
  max-width: max-content;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(160, 230, 180, 0.35);
  color: #d8ffe4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}
/* Mobile: trainers counter under the selected-Klax card (not cramped top-right). */
@media (max-width: 700px) {
  .explore-hud-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "klax right"
      "trainers trainers";
    align-items: center;
    gap: 6px 8px;
  }
  .explore-hud-klax {
    grid-area: klax;
    flex: none;
    width: 100%;
  }
  .explore-hud-trainers {
    grid-area: trainers;
    margin-left: 0;
    width: fit-content;
    max-width: max-content;
    justify-self: start;
    align-self: start;
    text-align: left;
  }
  .explore-hud-top-right {
    grid-area: right;
  }
}
.explore-hud-klax {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 220, 120, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.explore-hud-klax--low {
  border-color: rgba(255, 120, 120, 0.55);
  background: rgba(60, 12, 12, 0.45);
}
.explore-hud-klax-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
}
.explore-hud-klax-icon .creature,
.explore-hud-klax-icon svg,
.explore-hud-klax-icon img {
  width: 36px !important;
  height: 36px !important;
}
.explore-hud-klax-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.explore-hud-klax-name {
  font-size: 13px;
  font-weight: 700;
  color: #e8ffe8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-hud-quit { flex: 0 0 auto; }
.explore-hud-skin { flex: 0 0 auto; min-width: 36px; font-size: 18px; line-height: 1; padding: 6px 10px; }
.explore-hud-audio {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.explore-hud-mute {
  flex: 0 0 auto;
  min-width: 36px;
  font-size: 16px;
  line-height: 1;
  padding: 6px 10px;
}
.explore-hud-mute.explore-hud-mute--muted {
  opacity: 0.85;
}
.explore-hud-chat {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #4ccf76, #2a9a52 55%, #238a48);
  border: 2px solid rgba(180, 255, 190, 0.55);
  box-shadow: 0 6px 18px rgba(30, 110, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
.explore-overlay--fs .explore-hud-chat {
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
.explore-hud-chat-icon {
  display: block;
  pointer-events: none;
}
.explore-hud-chat-icon--close { display: none; }
.explore-hud-chat.is-open {
  background: linear-gradient(145deg, #6a8572, #3d5544 55%, #33483a);
  border-color: rgba(180, 255, 190, 0.32);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.explore-hud-chat.is-open .explore-hud-chat-icon--bubble { display: none; }
.explore-hud-chat.is-open .explore-hud-chat-icon--close { display: block; }

/* Campo bag shortcut: FAB above chat (same stack on mobile + PC) */
.explore-hud-bag--fab {
  position: absolute;
  right: 10px;
  bottom: calc(10px + 56px + 8px);
  z-index: 3;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(145deg, #5ecf8a, #2f9a58 55%, #247a46);
  border: 2px solid rgba(180, 255, 190, 0.55);
  box-shadow: 0 6px 18px rgba(30, 110, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
.explore-overlay--fs .explore-hud-bag--fab {
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 56px + 8px);
}
.explore-hud-bag-emoji {
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.explore-hud-bag--fab.is-open {
  background: linear-gradient(145deg, #6a8572, #3d5544 55%, #33483a);
  border-color: rgba(180, 255, 190, 0.32);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.explore-bag-sheet {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 14px max(12px, env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}
.explore-bag-sheet[hidden] { display: none !important; }
.explore-bag-sheet__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(4, 14, 8, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.explore-bag-sheet__panel {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100% - 8px));
  border-radius: 14px;
  background: rgba(8, 22, 14, 0.94);
  border: 1px solid rgba(120, 220, 140, 0.45);
  backdrop-filter: blur(8px);
  color: #e8ffe0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.explore-overlay--pc .explore-bag-sheet__panel {
  width: min(340px, calc(100% - 16px));
}
.explore-bag-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(120, 220, 140, 0.22);
}
.explore-bag-sheet__head b {
  font-size: 14px;
  letter-spacing: 0.02em;
}
.explore-bag-sheet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 12px;
}
.explore-bag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(180, 255, 190, 0.18);
  text-align: center;
  min-width: 0;
}
.explore-bag-item--empty {
  opacity: 0.55;
}
.explore-bag-item__ic {
  display: grid;
  place-items: center;
  min-height: 44px;
}
.explore-bag-item__ic .item-icon,
.explore-bag-item__ic .item-icon--lg {
  width: 40px;
  height: 40px;
}
.explore-bag-item__qty {
  font-size: 13px;
  font-weight: 800;
  color: #d8ffe4;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(160, 230, 180, 0.28);
}
.explore-bag-item__name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: #c8e8d0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-hud-skin[data-skin="default"] { color: #4da3ff; }
.explore-hud-skin[data-skin="girl"] { color: #ff7eb6; }
.explore-chat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  position: relative;
  z-index: 6;
}
.explore-chat-bar[hidden] { display: none !important; }
.explore-chat-bar input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(180, 255, 190, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #f2fff0;
  padding: 10px 12px;
  font-size: 16px; /* ?16px evita zoom iOS al enfocar */
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.explore-chat-bar input::placeholder { color: #8cba96; }
.explore-chat-bar .btn { flex: 0 0 auto; }
.explore-skin-pick { margin: 0 0 12px; }
.explore-skin-pick__label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #9fd0a8; margin-bottom: 6px;
}
.explore-skin-pick__row { display: flex; flex-wrap: wrap; gap: 8px; }
.explore-skin-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px 6px; border-radius: 12px; cursor: pointer;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(180,255,190,0.18);
  min-width: 72px;
}
.explore-skin-option input { position: absolute; opacity: 0; pointer-events: none; }
.explore-skin-option img {
  width: 37px; height: 48px; object-fit: contain; image-rendering: pixelated;
}
.explore-skin-option__symbol {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.explore-skin-option__symbol--male { color: #4da3ff; }
.explore-skin-option__symbol--female { color: #ff7eb6; }
.explore-skin-option:has(input:checked) {
  border-color: rgba(120, 220, 110, 0.7);
  box-shadow: 0 0 0 1px rgba(120, 220, 110, 0.25);
  background: rgba(40, 90, 50, 0.35);
}
.explore-hud-stamina {
  font-size: 15px; font-weight: 800;
  color: #ffe08a;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.explore-hud-stamina--low { color: #ff8a8a; }
.explore-hud-exp {
  display: grid;
  grid-template-columns: auto auto minmax(48px, 96px);
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #d7e4ff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.explore-hud-exp-label {
  color: #9db8ff;
  letter-spacing: .04em;
}
.explore-hud-exp-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.explore-hud-exp-track {
  display: block;
  height: 5px;
  overflow: hidden;
  border: 1px solid rgba(160, 190, 255, .42);
  border-radius: 999px;
  background: rgba(3, 9, 28, .7);
}
.explore-hud-exp-track > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6c8cff, #ff5db1);
  transition: width .22s ease-out;
}
.explore-hud-exp--unavailable { opacity: .62; }
/* Mobile: reserve a full row for EXP so the bar cannot spill past the mini-card. */
@media (max-width: 700px) {
  .explore-hud-exp {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "label value"
      "track track";
    gap: 3px 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .explore-hud-exp-label { grid-area: label; font-size: 9px; }
  .explore-hud-exp-value {
    grid-area: value;
    font-size: 9px;
    justify-self: end;
  }
  .explore-hud-exp-track {
    grid-area: track;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}
/* Ephemeral status over the map ? does not reserve HUD vertical space */
.explore-hud-status {
  position: absolute;
  left: 8px; right: 8px; top: 8px;
  z-index: 3;
  font-size: 12px;
  font-weight: 700;
  color: #e8ffe8;
  text-align: center;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(6, 20, 12, 0.72);
  border: 1px solid rgba(150, 230, 160, 0.28);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Correct zone (status_empty): green success recuadro */
.explore-hud-status--zone-ok {
  color: #f2fff4;
  background: rgba(18, 110, 48, 0.92);
  border-color: rgba(140, 230, 160, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* Incorrect zone (zone_mismatch): red recuadro */
.explore-hud-status--zone-bad {
  color: #fff;
  background: rgba(180, 28, 36, 0.92);
  border-color: rgba(255, 140, 140, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.explore-hud-status[hidden] { display: none !important; }
.explore-play-wrap {
  position: relative; display: flex; justify-content: center; align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.explore-friendly-dock {
  position: absolute;
  left: 50%;
  bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: auto;
  max-width: min(92%, 320px);
}
.explore-friendly-dock[hidden] { display: none !important; }
.explore-friendly-btn {
  width: 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-spectate-btn {
  background: linear-gradient(135deg, #ff6a2a, #ff3d6e);
  border-color: #ffd24a;
  color: #fff;
  font-weight: 700;
  animation: explore-spectate-pulse 1.4s ease-in-out infinite;
}
@keyframes explore-spectate-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(255, 80, 40, 0.45); }
  50% { box-shadow: 0 6px 22px rgba(255, 200, 60, 0.7); }
}
.arena--spectate .mpvp-spectate-line {
  font-weight: 600;
}
.mpvp-turn-label.is-spec {
  color: #ffb347;
}
.explore-overlay--fs.explore-overlay--pc .explore-friendly-dock {
  bottom: 28px;
}
.explore-overlay--fs .explore-play-wrap {
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a1410;
}
#exploreCanvas {
  display: block; border-radius: 10px; background: #6ec6ff;
  max-width: 100%; touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* CSS upscale del buffer l?gico: nearest-neighbor (evita blur en Klax/mapa). */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.explore-overlay--fs #exploreCanvas {
  border-radius: 0;
  max-width: none;
  flex-shrink: 0;
}
.explore-joystick {
  position: absolute; left: 10px; bottom: 10px;
  width: 108px; height: 108px; border-radius: 50%;
  touch-action: none; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(20,40,28,0.55));
  border: 2px solid rgba(180, 255, 190, 0.28);
  box-shadow: 0 8px 20px #0006, inset 0 2px 8px rgba(255,255,255,0.08);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  z-index: 2;
  /* Zona t?ctil m?s grande que el dibujo (m?vil) */
  cursor: grab;
}
.explore-overlay--fs .explore-joystick {
  left: max(10px, env(safe-area-inset-left, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
/* Mobile: floating joystick ? hidden until left-half touch, then centered on origin */
.explore-overlay--fs:not(.explore-overlay--pc) .explore-joystick {
  left: 0;
  top: 0;
  bottom: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.12s ease;
}
.explore-overlay--fs:not(.explore-overlay--pc) .explore-joystick.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.explore-overlay--fs .explore-hud-status {
  top: auto;
  bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 120px));
}
.explore-joystick::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
}
.explore-joystick-ring {
  position: absolute; inset: 12px; border-radius: 50%;
  border: 1px dashed rgba(180, 255, 190, 0.22);
  pointer-events: none;
}
.explore-joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, #9dffb0, #4cbf68 40%, #2f8a45);
  box-shadow: 0 4px 14px rgba(60, 180, 90, 0.45), inset 0 2px 4px rgba(255,255,255,0.35);
  pointer-events: none;
}
.explore-hint { font-size: 11px; color: #8cba96; text-align: center; flex: 0 0 auto; }
.explore-overlay--fs .explore-hint { display: none; }
.adv-explore-page { padding: 0 0 24px; }
.adv-explore-hero {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  padding: 16px; margin-bottom: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1e4a2e 0%, #143222 50%, #0e2418 100%);
  border: 1px solid rgba(120, 200, 130, 0.22);
}
.adv-explore-hero-glow {
  position: absolute; inset: -40% -20% auto auto; width: 60%; height: 120%;
  background: radial-gradient(circle, rgba(90,200,110,0.22), transparent 70%);
  pointer-events: none;
}
.adv-explore-play {
  display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 12px;
}
.adv-explore-play-art {
  width: 84px; height: 84px; flex: 0 0 auto;
  border-radius: 14px;
  background: linear-gradient(160deg, #4a9e45, #2d6a32);
  display: grid; place-items: center; position: relative;
}
.adv-explore-grass { position: absolute; font-size: 28px; opacity: 0.55; }
.adv-explore-hero-klax { position: relative; z-index: 1; }
.explore-pick-head .ruins-pick-badge { background: #2f8a45; }

/* Intro combate Campo Klax (estilo Pok?mon) */
.explore-battle-intro {
  position: fixed; inset: 0; z-index: 14000;
  pointer-events: auto; overflow: hidden;
  background: transparent;
}
.explore-battle-intro__flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
}
.explore-battle-intro__swirl {
  position: absolute; left: 50%; top: 50%;
  width: 180vmax; height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #000 0deg 28deg,
    transparent 28deg 48deg,
    #0a1a10 48deg 76deg,
    transparent 76deg 96deg,
    #000 96deg 124deg,
    transparent 124deg 144deg,
    #061208 144deg 172deg,
    transparent 172deg 192deg,
    #000 192deg 220deg,
    transparent 220deg 240deg,
    #0a1a10 240deg 268deg,
    transparent 268deg 288deg,
    #000 288deg 316deg,
    transparent 316deg 336deg,
    #000 336deg 360deg
  );
  transform: scale(0.05) rotate(0deg);
  opacity: 0;
}
.explore-battle-intro__zoom {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 0%, transparent 18%, #000 62%);
  opacity: 0;
  transform: scale(1.4);
}
.explore-battle-intro__label {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  color: #e8ffe8;
  font-weight: 800;
  font-size: clamp(16px, 4vw, 22px);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #0a2010, 0 0 18px #3ec06088;
  opacity: 0;
  white-space: nowrap;
}
.explore-battle-intro--on .explore-battle-intro__flash {
  animation: exploreIntroFlash 0.55s ease-out forwards;
}
.explore-battle-intro--on .explore-battle-intro__swirl {
  animation: exploreIntroSwirl 1.25s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.explore-battle-intro--on .explore-battle-intro__zoom {
  animation: exploreIntroZoom 1.15s ease-in forwards;
}
.explore-battle-intro--on .explore-battle-intro__label {
  animation: exploreIntroLabel 0.9s ease-out 0.25s forwards;
}
.explore-battle-intro--out {
  opacity: 0;
  transition: opacity 0.2s ease;
}
@keyframes exploreIntroFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  28% { opacity: 0; }
  40% { opacity: 0.85; }
  55% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes exploreIntroSwirl {
  0% { opacity: 0; transform: scale(0.04) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: scale(1.15) rotate(540deg); }
}
@keyframes exploreIntroZoom {
  0% { opacity: 0; transform: scale(1.5); }
  40% { opacity: 0.35; }
  100% { opacity: 0.92; transform: scale(1); }
}
@keyframes exploreIntroLabel {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.arena.bg-explore-zone .bg-scene__pixel {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  object-fit: cover;
  object-position: center center;
  /* sin filter: evita soft blur percibido */
  filter: none;
}

/* --- La KlaxRuleta --- */
.klaxruleta-promo-banner {
  position: relative;
  padding: clamp(14px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #7c3aed33 0%, #ec489933 45%, #f59e0b22 100%);
  border: 2px solid #c77dff66;
  animation: klaxruletaPromoPulse 2.8s ease-in-out infinite;
}
@keyframes klaxruletaPromoPulse {
  0%, 100% { box-shadow: 0 0 0 0 #c77dff00; }
  50% { box-shadow: 0 0 28px 2px #c77dff44; }
}
.klaxruleta-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff14 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.klaxruleta-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #c77dff33; color: #f3e8ff;
  border: 1px solid #c77dff55;
}
.klaxruleta-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(18px, 4.5vw, 24px); font-weight: 900;
  background: linear-gradient(90deg, #fde68a, #f9a8d4, #c4b5fd);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.klaxruleta-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 10px; font-size: 12px; color: #ffffffbb;
}
.klaxruleta-promo-wheel {
  position: relative; z-index: 1;
  width: 72px; height: 72px; margin: 0 auto 12px;
  border-radius: 50%;
  background: conic-gradient(#ff6b9d, #6c8cff, #4ee08a, #ffd23d, #c77dff, #ff8a5b, #5eead4, #f472b6, #ff6b9d);
  box-shadow: 0 0 0 3px #ffffff22, 0 8px 24px #0008;
  animation: klaxruletaPromoSpin 8s linear infinite;
}
@keyframes klaxruletaPromoSpin {
  to { transform: rotate(360deg); }
}
.klaxruleta-promo-cta {
  position: relative; z-index: 1;
  margin: 10px 0 4px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #f3e8ff;
}
.klaxruleta-promo-grid {
  position: relative; z-index: 1;
  margin: 4px auto 0;
  justify-content: center;
}
.klaxruleta-promo-num {
  color: #f5e1ff;
  font-size: clamp(1.15rem, 4.2vw, 1.55rem);
  text-shadow: 0 2px 8px #000c, 0 0 16px #c77dff88;
}
.klaxruleta-promo-sep { color: #e9d5ff; animation: launchCdBlink 1s step-end infinite; }
.klaxruleta-promo-date {
  position: relative; z-index: 1;
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  text-transform: capitalize; color: #ffffffbb;
}
.klaxruleta-promo-btn { position: relative; z-index: 1; margin-top: 12px; }

/* --- Super Evento de Referidos --- */
.super-ref-promo-banner {
  position: relative;
  padding: clamp(14px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #dc262633 0%, #f59e0b33 45%, #ef444422 100%);
  border: 2px solid #fb923c66;
  animation: superRefPromoPulse 2.8s ease-in-out infinite;
}
@keyframes superRefPromoPulse {
  0%, 100% { box-shadow: 0 0 0 0 #fb923c00; }
  50% { box-shadow: 0 0 28px 2px #fb923c44; }
}
.super-ref-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff14 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.super-ref-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #fb923c33; color: #ffedd5;
  border: 1px solid #fb923c55;
}
.super-ref-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(18px, 4.5vw, 24px); font-weight: 900;
  background: linear-gradient(90deg, #fde68a, #fb923c, #f87171);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.super-ref-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 10px; font-size: 12px; color: #ffffffbb;
}
.super-ref-promo-cta {
  position: relative; z-index: 1;
  margin: 10px 0 4px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: #ffedd5;
}
.super-ref-promo-btn { position: relative; z-index: 1; margin-top: 12px; }
.super-ref-list {
  margin: 0; padding-left: 1.1em; font-size: 13px; line-height: 1.55;
}
.super-ref-list li { margin: 4px 0; }
.super-ref-fair { color: #fca5a5; }
.super-ref-credit-row {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px;
}
.super-ref-suspect {
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px;
}
.super-ref-admin-row { margin: 6px 0; font-size: 12px; }

/* --- Evento Ruinas Klax (promo / countdown) --- */
.ruins-event-promo-banner {
  position: relative;
  padding: clamp(14px, 3vw, 20px);
  margin-bottom: 12px;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(145deg, #1e3a5f55 0%, #0f766e44 45%, #f59e0b22 100%);
  border: 2px solid #5eead466;
  animation: ruinsEventPromoPulse 2.8s ease-in-out infinite;
}
@keyframes ruinsEventPromoPulse {
  0%, 100% { box-shadow: 0 0 0 0 #5eead400; }
  50% { box-shadow: 0 0 28px 2px #5eead444; }
}
.ruins-event-promo-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, #ffffff14 50%, transparent 60%);
  animation: launchShine 4s ease-in-out infinite;
  pointer-events: none;
}
.ruins-event-promo-badge {
  position: relative; z-index: 1;
  display: inline-block; margin: 0 0 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: #5eead433; color: #ccfbf1;
  border: 1px solid #5eead455;
}
.ruins-event-promo-title {
  position: relative; z-index: 1;
  margin: 4px 0; font-size: clamp(18px, 4.5vw, 24px); font-weight: 900;
  background: linear-gradient(90deg, #fde68a, #5eead4, #93c5fd);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ruins-event-promo-sub {
  position: relative; z-index: 1;
  margin: 0 0 8px; font-size: 12px; color: #e2e8f0cc;
}
.ruins-event-promo-cta {
  position: relative; z-index: 1;
  margin: 8px 0 4px; font-size: 11px; font-weight: 700; color: #99f6e4;
}
.ruins-event-promo-grid { position: relative; z-index: 1; justify-content: center; }
.ruins-event-promo-num {
  color: #f0fdfa;
  text-shadow: 0 0 12px #5eead466;
}
.ruins-event-promo-sep { color: #99f6e4; animation: launchCdBlink 1s step-end infinite; }
.ruins-event-promo-btn { position: relative; z-index: 1; margin-top: 12px; }

.klaxruleta-intro { margin-bottom: 12px; }
.klaxruleta-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin: 8px 0 16px; padding: 16px 8px 20px;
  overflow: visible;
}
.klaxruleta-pointer {
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid #fde68a;
  filter: drop-shadow(0 2px 6px #000a) drop-shadow(0 0 8px #fde68a88);
  z-index: 3;
  margin-bottom: -8px;
  transform-origin: 50% 0%;
}
.klaxruleta-stage.is-spinning .klaxruleta-pointer {
  animation: klaxruletaPointerPulse 0.28s ease-in-out infinite alternate;
}
.klaxruleta-stage.is-landing .klaxruleta-pointer {
  animation: klaxruletaPointerTick 0.18s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 6px #000a) drop-shadow(0 0 14px #fff8) drop-shadow(0 0 18px #fde68acc);
}
.klaxruleta-stage.is-win-impact .klaxruleta-pointer {
  animation: klaxruletaPointerSlam 0.45s cubic-bezier(0.2, 1.4, 0.3, 1);
}
@keyframes klaxruletaPointerPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@keyframes klaxruletaPointerTick {
  from { transform: rotate(-6deg) scale(1.05); }
  to { transform: rotate(6deg) scale(1.12); }
}
@keyframes klaxruletaPointerSlam {
  0% { transform: scale(1.25); }
  40% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.klaxruleta-wheel-wrap {
  position: relative;
  width: min(340px, 92vw); height: min(340px, 92vw);
  border-radius: 50%;
  padding: 8px;
  background: radial-gradient(circle at 50% 40%, #ffffff22, #0007);
  box-shadow: 0 12px 40px #0009, inset 0 0 0 2px #ffffff22;
}
.klaxruleta-glow {
  position: absolute; inset: -10%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, #fde68a55 0%, #ff6b9d22 35%, transparent 70%);
  transition: opacity 0.35s ease;
  z-index: 0;
}
.klaxruleta-stage.is-spinning .klaxruleta-glow {
  opacity: 0.55;
  animation: klaxruletaGlowSpin 1.1s linear infinite;
}
.klaxruleta-stage.is-landing .klaxruleta-glow,
.klaxruleta-stage.is-win-impact .klaxruleta-glow {
  opacity: 1;
  animation: klaxruletaGlowFlash 0.35s ease-in-out infinite alternate;
}
@keyframes klaxruletaGlowSpin {
  to { transform: rotate(360deg); }
}
@keyframes klaxruletaGlowFlash {
  from { opacity: 0.7; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.35); }
}
.klaxruleta-rim-flash {
  position: absolute; inset: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  box-shadow: inset 0 0 0 3px #fff0, 0 0 0 0 #fde68a00;
}
.klaxruleta-stage.is-landing .klaxruleta-rim-flash {
  opacity: 1;
  animation: klaxruletaRimPulse 0.22s ease-in-out infinite alternate;
}
.klaxruleta-stage.is-win-impact .klaxruleta-rim-flash {
  opacity: 1;
  animation: klaxruletaRimBoom 0.55s ease-out;
}
@keyframes klaxruletaRimPulse {
  from { box-shadow: inset 0 0 0 2px #ffffff55, 0 0 12px #fde68a66; }
  to { box-shadow: inset 0 0 0 4px #ffffffaa, 0 0 28px #fde68acc; }
}
@keyframes klaxruletaRimBoom {
  0% { box-shadow: inset 0 0 0 6px #fff, 0 0 0 0 #fde68a88; }
  100% { box-shadow: inset 0 0 0 0 #fff0, 0 0 48px 12px #fde68a00; }
}
.klaxruleta-wheel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 24px #0006;
  will-change: transform;
  z-index: 1;
}
.klaxruleta-stage.is-spinning .klaxruleta-wheel {
  filter: saturate(1.15) brightness(1.05);
}
.klaxruleta-stage.is-anticipating .klaxruleta-wheel-wrap {
  animation: klaxruletaAnticipate 0.42s ease-out;
}
.klaxruleta-stage.is-win-impact {
  animation: klaxruletaStageShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes klaxruletaAnticipate {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes klaxruletaStageShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 2px) rotate(-0.6deg); }
  30% { transform: translate(7px, -3px) rotate(0.7deg); }
  45% { transform: translate(-5px, -2px) rotate(-0.4deg); }
  60% { transform: translate(4px, 2px) rotate(0.35deg); }
  75% { transform: translate(-2px, 1px); }
}
.klaxruleta-hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px;
  background: radial-gradient(circle at 35% 30%, #2a2458, #12102a);
  border: 3px solid #fde68a88;
  box-shadow: 0 4px 14px #000a;
  z-index: 2;
}
.klaxruleta-stage.is-spinning .klaxruleta-hub {
  box-shadow: 0 0 16px #fde68a88, 0 4px 14px #000a;
}
.klaxruleta-labels {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
/* Cada etiqueta gira con su quesito; icono + nombre centrados en el radio del sector. */
.klaxruleta-label {
  position: absolute;
  inset: 0;
  transform: rotate(var(--ang));
  pointer-events: none;
}
.klaxruleta-slice {
  position: absolute;
  left: 50%;
  top: 3.5%;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: min(46%, 6.4em);
  max-width: 72px;
  padding: 0 1px;
  text-align: center;
  pointer-events: none;
}
.klaxruleta-label.is-flip .klaxruleta-slice {
  transform: translateX(-50%) rotate(180deg);
}
.klaxruleta-slice-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px #000c) drop-shadow(0 0 4px #0006);
}
.klaxruleta-slice-ic img,
.klaxruleta-slice-ic .klax-img,
.klaxruleta-slice-ic svg,
.klaxruleta-slice-ic .item-icon {
  width: 38px !important;
  height: 38px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.klaxruleta-star-ic {
  font-size: 28px;
  line-height: 1;
  font-style: normal;
}
.klaxruleta-slice i {
  display: block;
  width: 100%;
  font-style: normal;
  font-size: clamp(10px, 3.2vw, 13px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow:
    0 1px 2px #000e,
    0 0 4px #000a,
    0 0 1px #000;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.klaxruleta-spins {
  margin: 0; font-size: 14px; font-weight: 700;
}
.klaxruleta-total-spins {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.klaxruleta-feed-row {
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.klaxruleta-feed-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.klaxruleta-feed-ic img,
.klaxruleta-feed-ic .item-icon,
.klaxruleta-feed-ic .creature-icon {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain;
}
.klaxruleta-feed-ic .klaxruleta-star-ic {
  font-size: 20px;
  line-height: 1;
}
.klaxruleta-feed-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.klaxruleta-feed-when {
  font-size: 11px;
  white-space: nowrap;
}
.klaxruleta-feed-pager .btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.klaxruleta-burn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 16px;
  align-items: stretch;
}
.klaxruleta-burn-grid > .mon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid transparent;
  overflow: visible;
}
.klaxruleta-burn-grid > .mon-card.mon-card--burn-on {
  outline: none;
  border-color: #ff8a4c;
  box-shadow: 0 0 0 3px #ff8a4c33, 0 10px 28px #0005;
}
.klaxruleta-burn-grid .mon-card-name {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (min-width: 720px) {
  .klaxruleta-burn-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
.klaxruleta-confetti {
  position: absolute;
  left: 50%; top: 42%;
  width: 0; height: 0;
  z-index: 6;
  pointer-events: none;
}
.klaxruleta-confetti i {
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--c, #fde68a);
  opacity: 0;
  animation: klaxruletaConfettiBurst var(--d, 0.8s) cubic-bezier(0.15, 0.75, 0.25, 1) var(--delay, 0s) forwards;
}
@keyframes klaxruletaConfettiBurst {
  0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; }
}
.klaxruleta-win-overlay { z-index: 12000; }
.klaxruleta-win-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, #ffffff88 0%, #fde68a33 28%, transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.klaxruleta-win-overlay.show .klaxruleta-win-flash {
  animation: klaxruletaWinFlash 0.7s ease-out;
}
@keyframes klaxruletaWinFlash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
.klaxruleta-win-panel {
  position: relative;
  text-align: center;
  padding: 30px 22px 26px;
  overflow: hidden;
  transform: scale(0.72);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 1.35, 0.3, 1), opacity 0.28s ease;
}
.klaxruleta-win-overlay.show .klaxruleta-win-panel {
  transform: scale(1);
  opacity: 1;
}
.klaxruleta-win-confetti {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(circle at 14% 18%, #fbbf24 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 86% 22%, #ff6b9d 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 22% 78%, #6c8cff 0 2px, transparent 3px),
    radial-gradient(circle at 74% 72%, #4ee08a 0 2px, transparent 3px),
    radial-gradient(circle at 48% 10%, #c77dff 0 2px, transparent 3px),
    radial-gradient(circle at 58% 88%, #ff8a5b 0 2px, transparent 3px);
  animation: klaxruletaWinConfetti 1.2s ease-out;
}
@keyframes klaxruletaWinConfetti {
  0% { transform: translateY(-10px) scale(0.9); opacity: 0; }
  30% { opacity: 0.85; }
  100% { transform: translateY(8px) scale(1); opacity: 0.55; }
}
.klaxruleta-win-badge { font-size: 36px; margin-bottom: 4px; animation: klaxruletaWinPop 0.55s ease-out; }
.klaxruleta-win-icon {
  display: grid; place-items: center;
  margin: 4px auto 10px;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ffffff22, #0006);
  border: 2px solid #fde68a66;
  box-shadow: 0 0 24px #fde68a44, 0 8px 20px #0008;
  animation: klaxruletaWinIconPunch 0.65s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.klaxruleta-win-icon img,
.klaxruleta-win-icon .klax-img,
.klaxruleta-win-icon svg,
.klaxruleta-win-icon .item-icon {
  width: 64px !important;
  height: 64px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  object-fit: contain;
}
.klaxruleta-win-icon .klaxruleta-star-ic { font-size: 42px; }
.klaxruleta-win-title { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.klaxruleta-win-prize {
  font-size: 17px; font-weight: 800; color: #fde68a; margin-bottom: 16px;
  text-shadow: 0 0 18px #fde68a55;
  animation: klaxruletaWinPrizeIn 0.55s ease-out 0.12s both;
}
.klaxruleta-win-btn { animation: klaxruletaWinPop 0.5s ease-out 0.2s both; }
@keyframes klaxruletaWinPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes klaxruletaWinIconPunch {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  55% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes klaxruletaWinPrizeIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 380px) {
  .klaxruleta-slice-ic {
    width: 34px; height: 34px;
  }
  .klaxruleta-slice-ic img,
  .klaxruleta-slice-ic .klax-img,
  .klaxruleta-slice-ic svg,
  .klaxruleta-slice-ic .item-icon {
    width: 32px !important;
    height: 32px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
  .klaxruleta-star-ic { font-size: 24px; }
  .klaxruleta-slice i { font-size: clamp(9px, 3.4vw, 11px); }
}
@media (prefers-reduced-motion: reduce) {
  .klaxruleta-promo-banner, .klaxruleta-promo-wheel, .klaxruleta-promo-shine,
  .ruins-event-promo-banner, .ruins-event-promo-shine { animation: none; }
  .klaxruleta-wheel { transition: none !important; }
  .klaxruleta-stage.is-anticipating .klaxruleta-wheel-wrap,
  .klaxruleta-stage.is-spinning .klaxruleta-pointer,
  .klaxruleta-stage.is-landing .klaxruleta-pointer,
  .klaxruleta-stage.is-win-impact,
  .klaxruleta-stage.is-spinning .klaxruleta-glow,
  .klaxruleta-stage.is-landing .klaxruleta-glow,
  .klaxruleta-stage.is-win-impact .klaxruleta-glow,
  .klaxruleta-stage.is-landing .klaxruleta-rim-flash,
  .klaxruleta-stage.is-win-impact .klaxruleta-rim-flash,
  .klaxruleta-confetti i,
  .klaxruleta-win-flash,
  .klaxruleta-win-confetti,
  .klaxruleta-win-badge,
  .klaxruleta-win-icon,
  .klaxruleta-win-prize,
  .klaxruleta-win-btn { animation: none !important; }
}

/* ===== La Tragaperras del Bote ? estilo CLASH ELEMENTALES ===== */
.klaxslots-page { max-width: 520px; margin: 0 auto; width: 100%; }
.klaxslots-page--wide {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.klaxslots-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.klaxslots-play-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
}
.klaxslots-buy-below {
  width: 100%;
  margin-top: 10px;
}
.klaxslots-buy-below .klaxslots-buy-box {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  padding: 12px 14px;
}
.klaxslots-buy-col {
  width: 100%;
  max-width: 480px;
}
.klaxslots-buy-col .team-burn-card {
  margin: 0;
  height: 100%;
}
.klaxslots-cabinet-col {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  flex: 1 1 480px;
}
.klaxslots-jackpot-hero {
  width: 100%;
  margin: 0 0 14px;
  padding: 20px 16px 18px;
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 140% 100% at 50% -20%, rgba(255, 230, 100, 0.45) 0%, transparent 58%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 160, 0, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #4a3818 0%, #1a1206 100%);
  border: 4px solid #e8c547;
  box-shadow:
    0 0 40px rgba(255, 200, 0, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255,255,255,.18);
  animation: ksJackpotGlow 2.4s ease-in-out infinite alternate;
}
@keyframes ksJackpotGlow {
  from { box-shadow: 0 0 28px rgba(255, 200, 0, 0.28), 0 8px 28px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.15); }
  to { box-shadow: 0 0 52px rgba(255, 220, 0, 0.55), 0 8px 28px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.22); }
}
.klaxslots-jackpot-hero-label {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #ffe082;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(255, 200, 0, 0.55);
}
.klaxslots-jackpot-hero-amount {
  font-size: clamp(42px, 10vw, 58px);
  font-weight: 900;
  line-height: 1;
  color: #fff6a0;
  text-shadow:
    0 0 20px rgba(255, 220, 0, 0.85),
    0 0 40px rgba(255, 160, 0, 0.45),
    0 3px 0 rgba(0,0,0,.4);
  font-family: ui-monospace, 'Courier New', monospace;
  letter-spacing: .02em;
}
.klaxslots-jackpot-hero-sub {
  display: none;
}
.klaxslots-jackpot-hero-last {
  margin-top: 8px;
}
.klaxslots-jackpot-hero-last .klaxslots-last-win {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 240, 200, 0.7);
}
.klaxslots-feed {
  width: 100%;
  max-width: 560px;
  margin: 0;
  align-self: center;
}
.klaxslots-feed .auction-bid-list {
  max-height: 360px;
  overflow: auto;
}
.klaxslots-feed-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
}
.klaxslots-feed-ic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.klaxslots-feed-ic img,
.klaxslots-feed-ic .item-icon,
.klaxslots-feed-ic .creature-icon {
  max-width: 32px;
  max-height: 32px;
}
.klaxslots-feed-text { min-width: 0; font-size: 12px; }
.klaxslots-feed-when { font-size: 11px; white-space: nowrap; }
.klaxslots-feed-jackpot { filter: drop-shadow(0 0 4px gold); }
.klaxslots-cabinet { width: 100%; }
.klaxslots-legend--below {
  width: 100%;
  max-width: 520px;
  margin: 0;
  text-align: center;
}
.klaxslots-legend--below > b { display: block; text-align: center; }
.klaxslots-extras {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: center;
}
.klaxslots-side-card {
  margin: 0;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.klaxslots-side-card .section-title {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}
.klaxslots-side-card .row {
  justify-content: center;
}
.klaxslots-hint {
  font-size: 11px;
  margin: 8px 0 0;
  text-align: center;
  line-height: 1.45;
}
.klaxslots-burn-grid-wrap {
  width: 100%;
  max-width: 560px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 2px;
}
.klaxslots-admin-panel { margin-top: 16px; max-width: 100%; width: 100%; }
.klaxslots-admin-panel--compact { margin-top: 20px; }

@media (min-width: 720px) {
  .klaxslots-page--wide { max-width: 960px; padding: 0 12px; }
  .klaxslots-cabinet-col { max-width: 500px; margin: 0; }
  .klaxslots-buy-below { max-width: 500px; }
  .klaxslots-legend--below { max-width: 560px; }
  .klaxslots-legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .klaxslots-extras {
    max-width: 560px;
  }
  .klaxslots-admin-panel .admin-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.klaxslots-promo-banner {
  position: relative; overflow: hidden; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(145deg, #3a3228 0%, #5c5040 50%, #2a2418 100%);
  border: 2px solid #8a7355; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.klaxslots-promo-shine { display: none; }
.klaxslots-promo-badge {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; color: #ffb347;
  display: inline-block;
}
.klaxslots-promo-title {
  margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #fff;
  text-align: center; width: 100%;
}
.klaxslots-promo-art {
  display: block;
  margin: 2px auto 8px;
  font-size: clamp(52px, 18vw, 88px);
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
}
.klaxslots-promo-jackpot {
  margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,.85);
  text-align: center; width: 100%;
}
.klaxslots-promo-jackpot b { color: #ffe566; }
.klaxslots-promo-cd {
  width: 100%;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #00000044;
  border: 1px solid #c9a22755;
  box-shadow: 0 0 16px #ffe56622 inset;
  box-sizing: border-box;
}
.klaxslots-promo-cta {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffd699;
  text-align: center;
  width: 100%;
}
.klaxslots-promo-timer {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #ffe566;
  text-align: center;
  text-shadow: 0 0 16px #ffe56688, 0 2px 8px #000c;
  animation: klaxslotsPromoTimerGlow 1.6s ease-in-out infinite;
}
@keyframes klaxslotsPromoTimerGlow {
  0%, 100% { text-shadow: 0 0 12px #ffe56655, 0 2px 8px #000c; }
  50% { text-shadow: 0 0 24px #ffe566cc, 0 0 8px #ffb34766, 0 2px 8px #000c; }
}
.home-promo--compact .klaxslots-promo-timer {
  font-size: 18px !important;
}
.klaxslots-promo-btn { margin-top: 8px; width: auto; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .klaxslots-promo-timer { animation: none; }
}

.klaxslots-cabinet {
  --ks-row-h: 76px;
  position: relative;
  padding: 10px 8px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 12%),
    linear-gradient(180deg, #6b6b72 0%, #4a4a52 8%, #3d3d44 50%, #2e2e34 100%);
  border: 4px solid #7a7a82;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -4px 8px rgba(0,0,0,.35),
    0 12px 32px rgba(0,0,0,.5);
}
.klaxslots-sfx-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid #8a8a92;
  background: linear-gradient(180deg, #4a4a52, #2e2e34);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  padding: 0;
}
.klaxslots-sfx-toggle.is-muted { opacity: .72; border-color: #666; }
.klaxslots-sfx-toggle:active { transform: scale(.96); }
.klaxslots-marquee {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px; padding: 8px 10px;
  background: linear-gradient(180deg, #4a4038, #2a2218);
  border: 3px solid #6a5a48; border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
.klaxslots-marquee-flame { font-size: 22px; filter: drop-shadow(0 0 6px #ff6600); animation: ksFlameFlicker 1.2s ease-in-out infinite alternate; }
@keyframes ksFlameFlicker { from { transform: scale(1); opacity: .9; } to { transform: scale(1.08); opacity: 1; } }
.klaxslots-marquee-text { text-align: center; line-height: 1.05; }
.klaxslots-marquee-top {
  display: block; font-size: 26px; font-weight: 900; letter-spacing: .06em;
  background: linear-gradient(180deg, #fff 0%, #ffb347 40%, #ff6600 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.8));
}
.klaxslots-marquee-sub {
  display: block; font-size: 15px; font-weight: 900; letter-spacing: .14em;
  background: linear-gradient(90deg, #ff6b6b, #ffd23d, #4ee08a, #6c8cff, #c77dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.klaxslots-frame {
  display: grid; grid-template-columns: 36px 1fr 36px; gap: 4px; align-items: stretch;
}
.klaxslots-pillar {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 12px 4px;
  min-height: calc(var(--ks-row-h) * 3 + 16px);
  background: linear-gradient(90deg, #5a5a62, #3a3a42, #5a5a62);
  border: 2px solid #888; border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.35);
}
.klaxslots-pillar-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  gap: 26px;
  padding: 16px 0;
}
.klaxslots-pillar-elm { font-size: 19px; line-height: 1; filter: drop-shadow(0 0 5px rgba(255,200,80,.55)); }
.klaxslots-pillar-skull { display: none; }

.klaxslots-reels-stage {
  position: relative; min-width: 0;
  padding: 8px 6px;
  background: linear-gradient(180deg, #1a1a1e, #0d0d10);
  border: 3px solid #555; border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.8);
}
.klaxslots-reels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.klaxslots-reel { min-width: 0; }
.klaxslots-reel-window {
  height: calc(var(--ks-row-h) * 3);
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(180deg, #9a9aa3 0%, #7e7e88 45%, #6f6f78 100%);
  border: 2px solid #555;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.35);
}
.klaxslots-reel-inner {
  display: flex;
  flex-direction: column;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.klaxslots-cabinet.is-spinning .klaxslots-reel-inner {
  transition: none;
}
.klaxslots-reel-item {
  height: var(--ks-row-h);
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.klaxslots-reel-icon {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(var(--ks-row-h) - 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.klaxslots-reel-icon img,
.klaxslots-reel-icon .item-icon,
.klaxslots-reel-icon .creature-icon,
.klaxslots-reel-icon .klaxslots-sym {
  max-width: 54px;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.klaxslots-reel-lbl {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 12px;
  font-size: 8px; font-weight: 800; text-align: center; color: #333;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 12px;
  pointer-events: none;
}
.klaxslots-sym { font-size: 36px; line-height: 1; }
.klaxslots-sym--jackpot { filter: drop-shadow(0 0 8px gold); }
.klaxslots-sym--stars { font-size: 32px; }

.klaxslots-pay-arrow {
  position: absolute; top: 50%; width: 0; height: 0; margin-top: -2px;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; z-index: 3;
}
.klaxslots-pay-arrow--l {
  left: -2px; border-right: 14px solid #ff8800;
  filter: drop-shadow(0 0 4px rgba(255,136,0,.8));
}
.klaxslots-pay-arrow--r {
  right: -2px; border-left: 14px solid #ff8800;
  filter: drop-shadow(0 0 4px rgba(255,136,0,.8));
}
.klaxslots-payline-band {
  position: absolute;
  left: 4px; right: 4px;
  top: calc(8px + var(--ks-row-h));
  height: var(--ks-row-h);
  border-top: 2px solid rgba(255, 120, 0, 0.35);
  border-bottom: 2px solid rgba(255, 120, 0, 0.35);
  background: rgba(255, 180, 0, 0.06);
  pointer-events: none; z-index: 2;
}

.klaxslots-spins-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 10px 8px 8px;
  padding: 10px 12px;
  text-align: center;
  background: #0a0a0c;
  border: 3px solid #444;
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(255, 50, 50, 0.08);
}
.klaxslots-spins-bar-val {
  display: block;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: #ff3333;
  font-family: ui-monospace, 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(255, 50, 50, 0.45);
}
.klaxslots-spins-bar-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}
.klaxslots-my-total {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: center;
  width: 100%;
}
.klaxslots-led-cell { text-align: center; }
.klaxslots-led-label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: #aa4444; font-family: ui-monospace, monospace;
}
.klaxslots-led-val {
  display: block; font-size: 22px; font-weight: 800; line-height: 1.1;
  color: #ff3333; font-family: ui-monospace, 'Courier New', monospace;
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.5);
}
.klaxslots-led-val--gold { color: #ffcc00; text-shadow: 0 0 10px rgba(255, 200, 0, 0.55); }
.klaxslots-tiradas { text-align: center; font-size: 11px; margin: 0 0 8px; opacity: .75; }

.klaxslots-controls {
  display: grid; gap: 6px; padding: 0 4px;
}
.klaxslots-controls--stars { grid-template-columns: 1fr 1fr 1.5fr; }
.klaxslots-controls--burn { grid-template-columns: 1.4fr repeat(3, 1fr); }
.klaxslots-controls--both { grid-template-columns: repeat(3, 1fr) 1.25fr; }
.klaxslots-ctrl {
  min-height: 52px; padding: 6px 4px; border-radius: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; line-height: 1.15; cursor: pointer;
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 0 rgba(0,0,0,.35);
  color: #fff; text-align: center;
}
.klaxslots-ctrl:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 rgba(0,0,0,.35); }
.klaxslots-ctrl:disabled { opacity: .45; cursor: not-allowed; }
.klaxslots-ctrl--spin {
  font-size: 18px; letter-spacing: .08em;
  background: linear-gradient(180deg, #e83030, #a01010);
  border-color: #600;
}
.klaxslots-ctrl--mini {
  background: linear-gradient(180deg, #e8e8ec, #a8a8b0);
  color: #222; font-size: 9px;
}
.klaxslots-ctrl--paid {
  background: linear-gradient(180deg, #40c060, #208040);
  border-color: #106030; font-size: 10px;
}
.klaxslots-ctrl--auto.is-on {
  background: linear-gradient(180deg, #ffb347, #ff8800);
  color: #1a1208;
  border-color: #a86000;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 14px rgba(255, 136, 0, 0.55);
}
.klaxslots-ctrl--ghost { visibility: hidden; pointer-events: none; }

.klaxslots-cabinet.is-spinning .klaxslots-reel-window {
  box-shadow: inset 0 0 16px rgba(255, 180, 0, 0.35);
  background: linear-gradient(180deg, #a8a8b0 0%, #85858f 45%, #74747e 100%);
}
.klaxslots-cabinet.is-spinning .klaxslots-reel-icon { transform: scale(1.02); }
.klaxslots-cabinet.is-spinning .klaxslots-payline-band {
  background: rgba(255, 180, 0, 0.14);
  border-color: rgba(255, 120, 0, 0.55);
}
.klaxslots-cabinet.is-landed .klaxslots-led-val--gold { animation: klaxslotsJackpotPulse .45s ease-in-out 2; }
@keyframes klaxslotsJackpotPulse { 50% { transform: scale(1.08); filter: brightness(1.25); } }

.klaxslots-last-win-wrap { text-align: center; margin-top: 8px; }
.klaxslots-last-win { font-size: 11px; margin: 0; }

.klaxslots-legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.klaxslots-legend-item {
  display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 6px 8px;
  border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.klaxslots-legend-ic { flex-shrink: 0; }

.klaxslots-win-overlay .klaxslots-win-panel {
  background: linear-gradient(160deg, #4a4a52, #2a2a30);
  border: 3px solid #8a7355; text-align: center;
}
.klaxslots-win-badge { font-size: 48px; margin-bottom: 8px; }
.klaxslots-win-icon { margin: 8px 0 12px; min-height: 72px; display: flex; align-items: center; justify-content: center; }
.klaxslots-win-title { font-size: 22px; font-weight: 800; color: #ffb347; margin-bottom: 8px; }
.klaxslots-win-prize { font-size: 16px; margin-bottom: 16px; }
.klaxslots-win-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,180,0,.2), transparent 60%);
  pointer-events: none; animation: klaxslotsWinFlash .6s ease-out;
}
@keyframes klaxslotsWinFlash { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 380px) {
  .klaxslots-frame { grid-template-columns: 28px 1fr 28px; }
  .klaxslots-marquee-top { font-size: 22px; }
  .klaxslots-led-val { font-size: 18px; }
  .klaxslots-ctrl--spin { font-size: 15px; }
  .klaxslots-cabinet { --ks-row-h: 68px; }
}

/* ===== Incursi?n Legendaria ? cinem?tica de cofre ===== */
.leg-chest-overlay .leg-chest-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(165deg, #2a1838 0%, #120a1a 55%, #1a1028 100%);
  border: 2px solid color-mix(in srgb, var(--chest-tone, #d4a017) 55%, #fff 10%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--chest-tone, #d4a017) 35%, transparent);
}
.leg-chest-burst {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--chest-tone, #d4a017) 40%, transparent), transparent 62%);
  opacity: 0; pointer-events: none;
}
.leg-chest-overlay.revealed .leg-chest-burst { opacity: 1; animation: legChestBurst .7s ease-out; }
@keyframes legChestBurst { from { transform: scale(.6); opacity: .2; } to { transform: scale(1.15); opacity: 1; } }
.leg-chest-ring {
  border-color: color-mix(in srgb, var(--chest-tone, #d4a017) 70%, #fff);
}
.leg-chest-stage {
  position: relative;
  height: 180px;
  margin: 8px auto 4px;
  display: grid;
  place-items: center;
}
.leg-chest-closed {
  position: relative;
  z-index: 2;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}
.leg-chest-img {
  width: 128px; height: 128px; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.leg-chest-glow {
  position: absolute; inset: 18% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--chest-tone, #d4a017) 55%, transparent), transparent 70%);
  opacity: .35; pointer-events: none;
}
.leg-chest-overlay.shake .leg-chest-closed {
  animation: legChestShake .18s ease-in-out infinite;
}
@keyframes legChestShake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-5px, 2px) rotate(-4deg); }
  50% { transform: translate(5px, -2px) rotate(4deg); }
  75% { transform: translate(-3px, 1px) rotate(-2deg); }
}
.leg-chest-overlay.open .leg-chest-closed {
  transform: scale(.72) translateY(-18px);
  opacity: .35;
  filter: blur(1px) brightness(1.2);
}
.leg-chest-loot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.4) translateY(24px);
  z-index: 3;
  pointer-events: none;
}
.leg-chest-overlay.revealed .leg-chest-loot {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,1.2,.3,1);
}
.leg-chest-loot-img {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--chest-tone, #d4a017) 70%, #fff));
  animation: legChestLootPulse 1.4s ease-in-out infinite;
}
.leg-chest-loot-img--wide {
  width: calc(96px * var(--wide-item-aspect));
  height: 96px;
}
.leg-chest-loot-emoji {
  font-size: 64px;
  filter: drop-shadow(0 0 12px rgba(255,220,120,.6));
  animation: legChestLootPulse 1.4s ease-in-out infinite;
}
@keyframes legChestLootPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.leg-chest-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.75), transparent 55%);
  opacity: 0; pointer-events: none; z-index: 4;
}
.leg-chest-overlay.revealed .leg-chest-flash {
  animation: legChestFlash .55s ease-out;
}
@keyframes legChestFlash {
  0% { opacity: .9; }
  100% { opacity: 0; }
}
.leg-chest-info { margin-top: 6px; min-height: 78px; }
.leg-chest-hook {
  margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--chest-tone, #d4a017) 80%, #fff); opacity: .85;
}
.leg-chest-title {
  margin: 4px 0 0; font-size: 15px; font-weight: 700; color: #f2e8ff;
}
.leg-chest-loot-name {
  margin: 10px 0 0; font-size: 20px; font-weight: 800;
  color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--chest-tone, #d4a017) 50%, transparent);
  opacity: 0; transform: translateY(8px);
}
.leg-chest-loot-qty { margin: 2px 0 0; font-size: 13px; opacity: 0; }
.leg-chest-overlay.revealed .leg-chest-loot-name,
.leg-chest-overlay.revealed .leg-chest-loot-qty {
  opacity: 1; transform: none;
  transition: opacity .4s ease .15s, transform .4s ease .15s;
}
.leg-chest-btn { margin-top: 14px; min-width: 140px; }
.leg-chest-overlay.shake .leg-chest-spark { opacity: .7; }
.leg-chest--gold .leg-chest-panel { box-shadow: 0 0 48px rgba(212,160,23,.4); }
.leg-chest--silver .leg-chest-panel { box-shadow: 0 0 40px rgba(154,168,184,.35); }
.leg-chest--wood .leg-chest-panel { box-shadow: 0 0 36px rgba(139,90,43,.35); }

@media (prefers-reduced-motion: reduce) {
  .leg-chest-overlay.shake .leg-chest-closed { animation: none; }
  .leg-chest-loot-img, .leg-chest-loot-emoji { animation: none; }
}

/* ===== Bomber Klax ===== */
body.bomber-lock { overflow: hidden; }
.bomber-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(4, 8, 18, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  backdrop-filter: blur(4px);
}
.bomber-pick-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(4, 8, 18, 0.9);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.bomber-pick-card {
  width: min(100%, 420px);
  background: #121a33;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 16px 48px #000a;
}
.bomber-pick-card h3 { margin: 0 0 6px; font-size: 16px; }
.bomber-pick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: min(50dvh, 360px);
  overflow: auto;
}
.bomber-pick-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: #0d1528; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 10px; color: inherit; cursor: pointer;
}
.bomber-pick-btn:hover { border-color: #5dffc088; }
.bomber-pick-btn span { display: flex; flex-direction: column; gap: 2px; }
.bomber-pick-btn small { opacity: 0.65; font-size: 11px; }
.bomber-level-prizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bomber-frame {
  width: min(100%, 640px);
  max-height: 100dvh;
  min-height: 0;
  background: #0d1528;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px #000a;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.bomber-hud {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  background: rgba(12, 18, 36, 0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.bomber-hud-stats { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; font-weight: 700; min-width: 0; }
.bomber-hint-desk { font-size: 11px; }
.bomber-fs-btn {
  margin-left: auto;
  min-width: 36px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
}
.bomber-fs-btn.is-on {
  color: #5dffc0;
  border-color: #5dffc066;
}
html:fullscreen,
html:-webkit-full-screen {
  background: #0b1220;
}
html:fullscreen .bomber-overlay,
html:-webkit-full-screen .bomber-overlay,
.bomber-overlay.bomber-overlay--fs,
.bomber-overlay.bomber-overlay--desktop {
  padding: 0;
  background: #0b1220;
  backdrop-filter: none;
}
html:fullscreen .bomber-frame,
html:-webkit-full-screen .bomber-frame,
.bomber-overlay.bomber-overlay--fs .bomber-frame,
.bomber-overlay.bomber-overlay--desktop .bomber-frame {
  width: 100%;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
html:fullscreen .bomber-play-wrap,
html:-webkit-full-screen .bomber-play-wrap,
.bomber-overlay.bomber-overlay--fs .bomber-play-wrap,
.bomber-overlay.bomber-overlay--desktop .bomber-play-wrap {
  max-height: none;
}
.bomber-play-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #0b1220;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  max-height: min(78dvh, 680px);
}
.bomber-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: 1;
}
#bomberCanvas {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  touch-action: none;
}
.bomber-end {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 18, 0.72);
  padding: 16px; z-index: 5;
}
.bomber-end.hidden { display: none; }
.bomber-end-card {
  background: #151e38;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 360px;
  text-align: center;
  animation: bomber-pop 0.35s ease;
}
.bomber-end-card h2 { margin: 0 0 10px; font-size: 18px; }
.bomber-rewards { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
.bomber-end-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Joystick flotante (aparece bajo el dedo, como en Campo Klax) */
.bomber-joystick {
  position: absolute; left: 0; top: 0;
  width: 108px; height: 108px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(30,20,55,0.6));
  border: 2px solid rgba(200, 150, 255, 0.32);
  box-shadow: 0 8px 20px #0006, inset 0 2px 8px rgba(255,255,255,0.08);
  touch-action: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bomber-joystick.is-active { opacity: 1; visibility: visible; }
.bomber-joystick-ring {
  position: absolute; inset: 12px; border-radius: 50%;
  border: 1px dashed rgba(210, 170, 255, 0.24);
}
.bomber-joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, #d9b0ff, #9a5fe0 40%, #6c34b0);
  box-shadow: 0 4px 14px rgba(150, 90, 220, 0.45), inset 0 2px 4px rgba(255,255,255,0.35);
}
.bomber-bomb-fab {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
  margin: 8px 4px 4px auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 170, 0.35);
  background: linear-gradient(160deg, #ff8a63, #c1301f);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 2px 6px rgba(255,255,255,0.25);
  color: #fff; font-size: 32px; line-height: 1;
  display: none;
  touch-action: none; user-select: none;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.bomber-bomb-fab:active { transform: scale(0.93); }
@media (max-width: 720px), (pointer: coarse) {
  .bomber-bomb-fab { display: block; }
  .bomber-hint-desk { display: none; }
  .bomber-frame { width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: none; }
  .bomber-overlay { padding: 0; }
  .bomber-play-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; touch-action: none; }
}

/* Landscape: pantalla completa; HUD pegado al mapa (no arriba de la pantalla) */
@media (orientation: landscape) and (max-height: 560px),
       (orientation: landscape) and (pointer: coarse) {
  .bomber-overlay,
  .bomber-overlay.bomber-overlay--landscape {
    padding: 0;
    background: #0b1220;
    backdrop-filter: none;
  }
  .bomber-frame {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
  }
  .bomber-hud {
    position: relative;
    top: auto; left: auto; right: auto;
    padding: 3px 6px;
    gap: 6px;
    font-size: 11px;
    background: rgba(8, 12, 24, 0.92);
    flex-wrap: nowrap;
  }
  .bomber-hud-stats {
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
  }
  .bomber-play-wrap {
    position: absolute;
    inset: 0;
    max-height: none;
    flex: none;
    background: #070b14;
  }
  .bomber-bomb-fab {
    display: block;
    width: 54px;
    height: 54px;
    font-size: 24px;
    align-self: flex-end;
    margin: 6px 2px 2px auto;
  }
}

.bomber-play-wrap.bomber-loot-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at center, rgba(93,255,192,0.38), rgba(93,255,192,0.08) 40%, transparent 68%);
  animation: bomberLootFlash 0.28s ease-out forwards;
}
@keyframes bomberLootFlash {
  0% { opacity: 1; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bomber-play-wrap.bomber-loot-flash::after { animation: none; opacity: 0; }
}
.bomber-levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.bomber-level-card {
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #141c32;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.bomber-level-card:hover:not(:disabled) { transform: translateY(-1px); border-color: #5dffc088; }
.bomber-level-card.locked { opacity: 0.45; cursor: not-allowed; }
.bomber-level-card.cleared { border-color: #5dffc044; }
.bomber-level-num {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; background: #243056; flex-shrink: 0;
}
.bomber-level-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bomber-level-prizes { display: flex; flex-wrap: wrap; gap: 6px; }
.bomber-prize-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.bomber-prize-chip img { border-radius: 3px; }
.bomber-progress { margin-bottom: 4px; }
.bomber-admin-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bomber-admin-row label { font-size: 12px; display: flex; gap: 4px; align-items: center; }
.bomber-admin-row input[type=number] { width: 64px; }
.bomber-admin-row select { max-width: 160px; }
@keyframes bomber-pop {
  from { transform: scale(0.86); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.pill.ok { background: #2e7d32; color: #fff; }

/* Bomber Klax promo banner */
.bomber-promo-banner {
  position: relative; overflow: hidden; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(145deg, #2a1a3a 0%, #4a2a5c 45%, #1a1228 100%);
  border: 2px solid #8a5cff; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.bomber-promo-shine { display: none; }
.bomber-promo-badge { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: #c9a0ff; }
.bomber-promo-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #fff; width: 100%; }
.bomber-promo-art {
  display: block; margin: 2px auto 8px;
  font-size: clamp(52px, 18vw, 88px); line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  pointer-events: none; user-select: none;
}
.bomber-promo-sub { margin: 0 0 8px; font-size: 12px; width: 100%; }
.bomber-promo-cta { text-align: center; width: 100%; margin: 0 0 4px; font-size: 12px; }
.bomber-promo-grid { margin-left: auto; margin-right: auto; }
.bomber-promo-btn { margin-top: 8px; }

/* ===== Hoodies waitlist (Robinhood migration) ===== */
/* Override login/maintenance lock so the waitlist can scroll fullscreen */
html.wl-active,
body.wl-active,
html.wl-active.maintenance-active,
body.wl-active.maintenance-active,
html.wl-active.login-active,
body.wl-active.login-active {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.wl-active.login-active #app,
body.wl-active.maintenance-active.login-active #app,
body.wl-active #app {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #07101f !important;
  display: block !important;
  transform: none !important;
}
.wl-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, #2a4a9a55, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 80%, #ffc43a22, transparent 55%),
    linear-gradient(165deg, #07101f 0%, #0c1830 42%, #0a1224 100%);
}
.wl-grid {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(#ffffff12 1px, transparent 1px),
    linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.wl-klax {
  position: absolute;
  opacity: 0.18;
  filter: drop-shadow(0 12px 28px #000a);
  animation: wlKlaxDrift 7s ease-in-out infinite alternate;
}
.wl-klax--a { left: -2%; bottom: 6%; width: min(240px, 38vw); height: auto; }
.wl-klax--b { right: -1%; top: 12%; width: min(190px, 30vw); height: auto; animation-delay: -2.5s; }
@keyframes wlKlaxDrift {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-14px) rotate(3deg); }
}
.wl-screen {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  min-height: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wl-admin-bar { grid-area: admin; }
.wl-hero { grid-area: hero; }
.wl-alerts { grid-area: alert; display: flex; flex-direction: column; gap: 10px; }
.wl-area-quests { grid-area: quests; }
.wl-area-invite { grid-area: invite; }
.wl-area-points { grid-area: points; }
.wl-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 12px 10px 4px;
  border-top: 1px solid #ffffff12;
  margin-top: 0;
}
.wl-page-info {
  font-size: 12px;
  color: #9aabcc;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.wl-page-btn { min-width: 88px; }
.wl-area-foot { grid-area: foot; }
.wl-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #ffd23d28;
}
.wl-hero-copy {
  min-width: 0;
}
.wl-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 30px #0008, 0 0 0 2px #ffd23d55;
  animation: rhLogoFloat 4.5s ease-in-out infinite alternate;
}
.wl-brand {
  margin: 0 0 4px;
  font-family: "Lilita One", "Russo One", Impact, sans-serif;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe34d;
  -webkit-text-stroke: 3.5px #142a66;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #0b1a44, 0 8px 18px #0008;
}
.wl-title {
  margin: 0 0 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  color: #f4f7ff;
  max-width: none;
}
.wl-sub {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #b7c3de;
  max-width: 68ch;
}
.wl-hero-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wl-hero-steps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #ffffff18;
  background: #ffffff08;
  color: #d5def3;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wl-hero-steps li span {
  color: #ffe34d;
  font-family: "Lilita One", Impact, sans-serif;
  font-size: 13px;
  -webkit-text-stroke: 1.5px #142a66;
  paint-order: stroke fill;
}
.wl-score {
  justify-self: end;
  text-align: center;
  padding: 6px 10px;
  border: 1px solid #ffd23d44;
  background: linear-gradient(160deg, #ffd23d18, #0a1428cc);
  min-width: 72px;
  line-height: 1.1;
}
.wl-score-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: #c9d2ea;
  margin-bottom: 1px;
  white-space: nowrap;
}
.wl-score-num {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #ffe34d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.wl-board-card {
  padding: 14px;
  border: 1px solid #ffffff14;
  background: linear-gradient(160deg, #ffffff08, #0a142888);
}
.wl-alert {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid #ff6b7a;
  background: #ff6b7a18;
  color: #ffd0d6;
  font-size: 13px;
}
.wl-alert--warn {
  border-left-color: #ffd23d;
  background: #ffd23d14;
  color: #ffe9a8;
}
.wl-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wl-section-head h2 {
  margin: 0 0 4px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #f4f7ff;
}
.wl-section-head p {
  margin: 0;
  font-size: 13px;
  color: #9aabcc;
  line-height: 1.4;
}
.wl-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wl-task {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 14px 14px 14px 10px;
  border: 1px solid #ffffff14;
  background: linear-gradient(120deg, #ffffff08, #0a142888);
  transition: border-color .2s ease, background .2s ease;
}
.wl-task.is-done {
  border-color: #3dd68c44;
  background: linear-gradient(120deg, #3dd68c12, #0a142888);
}
.wl-task-index {
  font-family: "Lilita One", Impact, sans-serif;
  font-size: 22px;
  color: #ffe34d99;
  -webkit-text-stroke: 2px #142a66;
  paint-order: stroke fill;
  text-align: center;
  padding-top: 2px;
}
.wl-task.is-done .wl-task-index { color: #3dd68c; }
.wl-task-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.wl-task-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f4f7ff;
}
.wl-task-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #9aabcc;
  line-height: 1.4;
}
.wl-badge {
  font-size: 11px;
  font-weight: 700;
  color: #ffe34d;
  white-space: nowrap;
}
.wl-badge--done { color: #3dd68c; }
.wl-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.wl-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #8eb6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wl-btn {
  appearance: none;
  border: 1px solid #ffd23d66;
  background: linear-gradient(180deg, #ffe34d, #f0b429);
  color: #142a66;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px #0005;
}
.wl-btn:hover:not(:disabled) { filter: brightness(1.06); }
.wl-btn:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}
.wl-btn--verify {
  background: linear-gradient(180deg, #3a6dff, #244fd6);
  border-color: #6b90ff88;
  color: #fff;
}
.wl-btn--ghost {
  background: transparent;
  border-color: #3dd68c66;
  color: #3dd68c;
  box-shadow: none;
}
.wl-ref-box {
  padding: 14px;
  border: 1px solid #ffd23d33;
  background: #ffd23d0c;
}
.wl-ref-label {
  display: block;
  font-size: 12px;
  color: #c9d2ea;
  margin-bottom: 6px;
}
.wl-ref-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wl-ref-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ffffff22;
  background: #060d1a;
  color: #f4f7ff;
  font-size: 13px;
}
.wl-ref-stats {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #9aabcc;
}
.wl-ref-locked {
  margin: 0;
  font-size: 13px;
  color: #9aabcc;
}
.wl-leaders {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ffffff14;
}
.wl-lead-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #ffffff10;
  font-size: 13px;
}
.wl-lead-row:last-child { border-bottom: 0; }
.wl-lead-rank { color: #ffe34d; font-weight: 800; }
.wl-lead-name { color: #e8eefc; font-weight: 600; }
.wl-lead-pts { color: #9aabcc; font-variant-numeric: tabular-nums; }
.wl-lead-empty {
  padding: 14px 12px;
  color: #9aabcc;
  font-size: 13px;
}
.wl-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #ffffff14;
}
.wl-discord {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(180deg, #6875f5, #5865f2);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid #5865f299;
}
.wl-admin {
  appearance: none;
  background: transparent;
  border: 0;
  color: #7a8aaa;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wl-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #ffd23d55;
  background: #ffd23d14;
  color: #ffe9a8;
  font-size: 13px;
  font-weight: 700;
}
.wl-username-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.wl-username-row .wl-ref-input { flex: 1 1 160px; }

.wl-hero-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: end;
  align-self: start;
  justify-content: flex-end;
}
.wl-hero-stats .wl-score {
  min-width: 70px;
}

/* Desktop: full-bleed two-column layout */
@media (min-width: 900px) {
  .wl-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.95fr);
    grid-template-areas:
      "admin admin"
      "hero hero"
      "alert alert"
      "quests invite"
      "points points"
      "foot foot";
    align-content: start;
    gap: 20px 24px;
    padding:
      max(28px, env(safe-area-inset-top))
      max(32px, env(safe-area-inset-right))
      max(48px, env(safe-area-inset-bottom))
      max(32px, env(safe-area-inset-left));
  }
  .wl-hero {
    gap: 18px 24px;
  }
  .wl-hero-stats {
    flex-direction: column;
    align-items: stretch;
  }
  .wl-hero-stats .wl-score {
    min-width: 96px;
    padding: 7px 12px;
  }
  .wl-score-num { font-size: 26px; letter-spacing: -0.02em; }
  .wl-sub { font-size: 15px; }
  .wl-logo { width: 96px; height: 96px; }
  .wl-klax { opacity: 0.22; }
  .wl-klax--a { width: min(280px, 22vw); }
  .wl-klax--b { width: min(220px, 18vw); }
}

@media (min-width: 1200px) {
  .wl-screen {
    max-width: 1280px;
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }
}

@media (max-width: 640px) {
  .wl-hero {
    grid-template-columns: auto 1fr;
  }
  .wl-hero-stats {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-self: stretch;
  }
  .wl-hero-stats .wl-score {
    flex: 1;
    text-align: center;
  }
  .wl-hero-steps li {
    font-size: 11px;
    padding: 6px 8px;
  }
  .wl-klax { opacity: 0.1; }
  .wl-screen {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wl-klax, .wl-logo { animation: none; }
}


/* Admin minimal login — centered form only */
html.login-minimal,
body.login-minimal,
html.login-minimal.login-active,
body.login-minimal.login-active {
  background: #0a1020 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
}
body.login-minimal.login-active #app {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0a1020 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}
.login-screen--minimal,
.login-screen.login-screen--minimal {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: #0a1020 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.login-minimal-box {
  width: min(360px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px;
  border: 1px solid #ffffff18;
  background: linear-gradient(160deg, #ffffff0c, #0a1428ee);
  justify-self: center;
  align-self: center;
}
.login-minimal-box .login-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-minimal-box .login-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9aabcc;
}
.login-minimal-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #ffffff22;
  background: #060d1a;
  color: #f4f7ff;
  font-size: 15px;
}
.login-minimal-box .login-submit {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  font-weight: 800;
}
@media (min-width: 768px) {
  html.login-minimal.login-active:not(.maintenance-active),
  body.login-minimal.login-active:not(.maintenance-active) {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body.login-minimal.login-active:not(.maintenance-active) #app {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    height: 100dvh !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.login-minimal .login-screen,
  body.login-minimal .login-screen--minimal {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    background: #0a1020 !important;
  }
}