/* ══ R227 · v285 · BEAT SURGE: BATTLE ARENA (arcade-battle.js) ═════════════
 * El piso «battle» de la Sala Arcade (rango, división, dificultad, DUELO ·
 * RETAR · ENSAYO, AFINAR, LOGROS con el título de la placa, TOP 20), la arena
 * vertical de pantalla completa (180 × 320 lógico a escala entera), los
 * paneles Afinar oído y Ensayo, el flex de victoria/derrota, la Vitrina de
 * Trofeos y la placa + medallas del perfil.
 * Solo se anima transform / opacity / filter con las curvas oficiales; el
 * estado efímero va en data-* (el Tailwind CDN observa class); sin var()
 * dentro de @keyframes; botones con guarda de 3 ids (R198); 44 px en la
 * regla base; cristal obsidiana + bisel latón + neón (cian = tú, magenta = rival). */

/* ── Tres pestañas: más angostas, mismo alto ───────────────────────────── */
#power-companion-box .sala-arcade.has-pisos3 .sas-pisos { gap: 4px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade.has-pisos3 .sas-piso { letter-spacing: 0.08em; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade #sas-piso-battle[aria-selected="true"] {
  color: #f5d0fe !important;
  text-shadow: 0 0 8px #ff3bd4, 0 0 2px #ffffff;
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade #sas-piso-battle[aria-selected="true"]::before {
  border-color: rgba(255, 59, 212, 0.6);
  box-shadow: 0 0 14px rgba(255, 59, 212, 0.32), inset 0 1px 0 rgba(255, 236, 190, 0.2);
}

/* ── Cambio de piso ────────────────────────────────────────────────────── */
#power-companion-box .sala-arcade[data-piso="battle"] .sa-fila,
#power-companion-box .sala-arcade[data-piso="battle"] #sa-probs-btn,
#power-companion-box .sala-arcade[data-piso="battle"] #sa-costo,
#power-companion-box .sala-arcade[data-piso="battle"] #sa-saldo,
#power-companion-box .sala-arcade[data-piso="battle"] .sas-fila,
#power-companion-box .sala-arcade[data-piso="battle"] .sas-pool,
#power-companion-box .sala-arcade:not([data-piso="battle"]) .bsb-piso,
#power-companion-box .sala-arcade:not([data-piso="battle"]) .bsb-logros-btn,
#power-companion-box .sala-arcade:not([data-piso="battle"]) .bsb-logros-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Piso de Beat Surge ────────────────────────────────────────────────── */
.bsb-piso {
  position: absolute;
  top: 46px;
  right: 60px;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bsb-cab { min-width: 0; display: flex; align-items: center; gap: 6px; }
.bsb-rango {
  --bsb-rc: #4ade80;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(13, 13, 18, 0.78);
  border: 1px solid color-mix(in srgb, var(--bsb-rc) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bsb-rc) 30%, transparent), inset 0 1px 0 rgba(255, 236, 190, 0.14);
}
.bsb-rango[data-rango="flow"] { --bsb-rc: #38bdf8; }
.bsb-rango[data-rango="synchro"] { --bsb-rc: #a78bfa; }
.bsb-rango[data-rango="overdrive"] { --bsb-rc: #ff3bd4; }
.bsb-rango b { font: 900 9px/1.1 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--bsb-rc); text-shadow: 0 0 6px var(--bsb-rc); }
.bsb-rango i { font: 800 8px/1.1 ui-monospace, monospace; font-style: normal; color: #fde68a; }
.bsb-temp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 7.5px/1.2 ui-monospace, monospace; letter-spacing: 0.08em; color: #a1a1aa; }
.bsb-temp--reto { color: #f5d0fe; text-shadow: 0 0 6px rgba(255, 59, 212, 0.7); }
.bsb-difs { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif {
  --bsb-rc: #4ade80;
  position: relative;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 3px 2px 4px;
  display: flex;
  flex-direction: column;            /* R226 · insignia: estrellas arriba, nombre (o «SUBÍ A <RANGO>») abajo */
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  border-radius: 10px;
  font: 900 7.5px/1 ui-monospace, monospace !important;
  letter-spacing: 0.06em;
  color: #d4d4d8 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(13, 13, 18, 0.7)) !important;
  border: 1px solid rgba(200, 168, 110, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.12), inset 0 -2px 0 color-mix(in srgb, var(--bsb-rc) 45%, transparent) !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif[data-rango="flow"] { --bsb-rc: #38bdf8; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif[data-rango="synchro"] { --bsb-rc: #a78bfa; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif[data-rango="overdrive"] { --bsb-rc: #ff3bd4; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif[aria-checked="true"] {
  color: #ffffff !important;
  border-color: var(--bsb-rc) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--bsb-rc) 40%, transparent), inset 0 1px 0 rgba(255, 236, 190, 0.2), inset 0 -2px 0 var(--bsb-rc) !important;
  text-shadow: 0 0 6px var(--bsb-rc);
}
/* R226 · La bloqueada ya no se apaga entera: las estrellas quedan en silueta y la leyenda «SUBÍ A <RANGO>» se lee. */
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif[aria-disabled="true"] { cursor: not-allowed; color: #71717a !important; background: rgba(13, 13, 18, 0.78) !important; border-style: dashed !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif:active:not([aria-disabled="true"]) { transform: scale(0.95); }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif:focus-visible { outline: 2px solid #fde68a; outline-offset: 1px; }
.bsb-dif span, .bsb-dif b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
/* ── R226 · Insignias de estrellas (★ a ★★★★): pixel 7×7 en SVG estático, currentColor ──────────────── */
.bsb-estrellas { flex: 0 0 auto; display: flex; gap: 1px; line-height: 0; color: color-mix(in srgb, var(--bsb-rc) 70%, #3f3f46); }
.bsb-estrella { display: block; width: 7px; height: 7px; fill: currentColor; image-rendering: pixelated; }
.bsb-dif[aria-checked="true"] .bsb-estrellas { color: #fde047; animation: bsbEstrellaPop 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.bsb-dif[aria-disabled="true"] .bsb-estrellas { color: #3f3f46; }
.bsb-dif-n { display: flex; align-items: center; gap: 2px; }
.bsb-dif-sube { font-size: 6.5px; letter-spacing: 0.04em; color: #a1a1aa; }
.bsb-dif-rg { font: 900 7px/1 ui-monospace, monospace; letter-spacing: 0.04em; color: var(--bsb-rc); text-shadow: 0 0 5px color-mix(in srgb, var(--bsb-rc) 60%, transparent); }
.bsb-dif-sube .bsb-candado { margin-top: 2px; }
@keyframes bsbEstrellaPop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
/* Tocar una bloqueada: «no» con la cabeza (gemelos A/B por data-nudge, solo transform, 2 px). */
.bsb-dif[data-nudge="a"] .bsb-dif-rg { animation: bsbNiegaA 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.bsb-dif[data-nudge="b"] .bsb-dif-rg { animation: bsbNiegaB 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes bsbNiegaA { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }
@keyframes bsbNiegaB { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }
/* Candado pixel (8×9) dibujado con dos sombras planas: sin imágenes ni íconos externos. */
.bsb-candado { flex: 0 0 auto; width: 6px; height: 5px; margin-top: 3px; background: #a1a1aa; box-shadow: 1px -3px 0 -1px #a1a1aa, -1px -3px 0 -1px #a1a1aa; }
.bsb-acciones { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 5px; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  font: 900 10px/1 ui-monospace, monospace !important;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-decoration: none;
  color: #fde68a !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(13, 13, 18, 0.75)) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.22), inset 0 1px 0 rgba(255, 236, 190, 0.16) !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn--duelo,
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn--reto {
  color: #0b0b12 !important;
  background: linear-gradient(90deg, #22d3ee, #ff3bd4) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 14px rgba(255, 59, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn--wa { color: #0b0b12 !important; background: #4ade80 !important; border-color: rgba(255, 255, 255, 0.5) !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn:active:not([aria-disabled="true"]) { transform: scale(0.95); }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Riel derecho: LOGROS n/20. */
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-logros-btn {
  position: absolute;
  top: 58px;
  right: 4px;
  z-index: 5;
  width: 52px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  color: #fde68a !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(13, 13, 18, 0.55)) !important;
  border: 1px solid rgba(255, 59, 212, 0.5) !important;
  box-shadow: 0 0 14px rgba(255, 59, 212, 0.25), inset 0 1px 0 rgba(255, 236, 190, 0.16) !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-logros-btn:active { transform: scale(0.95); }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-logros-btn[aria-expanded="true"],
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-logros-btn:focus-visible { outline: none; filter: brightness(1.3); }
.bsb-logros-tit { font: 900 7px/1 ui-monospace, monospace; letter-spacing: 0.08em; }
.bsb-logros-btn b { font: 900 11px/1 ui-monospace, monospace; color: #f5d0fe; text-shadow: 0 0 6px rgba(255, 59, 212, 0.8); }
.bsb-logros-panel {
  position: absolute;
  top: 44px;
  right: 60px;
  bottom: 4px;
  left: 4px;
  z-index: 6;
  min-width: 0;
  padding: 5px 7px;
  overflow-y: auto;
  border-radius: 12px;
  background: rgba(10, 10, 16, 0.95);
  border: 1px solid rgba(255, 59, 212, 0.5);
  box-shadow: 0 0 14px rgba(255, 59, 212, 0.3), inset 0 1px 0 rgba(255, 236, 190, 0.14);
  cursor: pointer;
}
.bsb-logros-panel[hidden] { display: none; }
.bsb-logros-ptit { margin: 2px 0 3px; font: 900 7.5px/1.2 ui-monospace, monospace; letter-spacing: 0.08em; color: #fde68a; }
.bsb-logros-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.bsb-logro { min-width: 0; display: flex; justify-content: center; padding: 2px 0; border-radius: 7px; background: rgba(255, 255, 255, 0.04); }
.bsb-logro-img, .bsb-fin-logro-img, .bsb-vitrina-img, .bs-medalla-img { image-rendering: pixelated; image-rendering: crisp-edges; }
.bsb-logro:not(.is-on) .bsb-logro-img,
.bsb-vitrina-item:not(.is-on) .bsb-vitrina-img,
.bs-medalla:not(.is-on) .bs-medalla-img { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)); opacity: 0.5; }
.bsb-logro.is-on { background: rgba(255, 59, 212, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 59, 212, 0.4); }
.bsb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── R216 · Riel: TOP 20 (ranking global), debajo de LOGROS. Hereda la regla
 * base de .bsb-logros-btn (44 px, cristal, compresión al tocar); acá solo cambia
 * su lugar y su color. El panel hereda .bsb-logros-panel (caja interna con su
 * propio scroll: la página no se desplaza). ──────────────────────────────── */
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-top-btn {
  top: 108px;
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25), inset 0 1px 0 rgba(255, 236, 190, 0.16) !important;
}
.bsb-top-btn b { color: #a5f3fc; text-shadow: 0 0 6px rgba(34, 211, 238, 0.8); }
.bsb-top-panel { background: rgba(8, 8, 14, 0.99); border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 14px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 236, 190, 0.14); }
.bsb-top-aviso { margin: 4px 0; font: 800 8px/1.35 ui-monospace, monospace; letter-spacing: 0.04em; color: #e4e4e7; }
.bsb-top-panel[data-estado="sin_red"] .bsb-top-aviso,
.bsb-top-panel[data-estado="ajeno"] .bsb-top-aviso { color: #fde68a; }
.bsb-top-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.bsb-top-fila {
  --bsb-rc: #4ade80;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px 16px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font: 800 8px/1 ui-monospace, monospace;
  color: #e4e4e7;
}
.bsb-top-fila[data-rango="flow"] { --bsb-rc: #38bdf8; }
.bsb-top-fila[data-rango="synchro"] { --bsb-rc: #a78bfa; }
.bsb-top-fila[data-rango="overdrive"] { --bsb-rc: #ff3bd4; }
.bsb-top-fila.is-yo { background: rgba(34, 211, 238, 0.16); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.7), 0 0 10px rgba(34, 211, 238, 0.25); color: #ffffff; }
.bsb-top-pos { min-width: 0; text-align: right; color: #fde68a; }
.bsb-top-pet {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 800%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.bsb-top-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsb-top-nom small { font-size: 7px; color: #a5f3fc; }
.bsb-top-tr { min-width: 0; text-align: right; color: #fde68a; }
.bsb-top-rg { min-width: 0; overflow: hidden; text-align: right; font-size: 7px; letter-spacing: 0.06em; color: var(--bsb-rc); text-shadow: 0 0 4px var(--bsb-rc); }
.bsb-top-sep { text-align: center; font: 800 8px/1 ui-monospace, monospace; color: #71717a; }

/* ══ R227 · v285 · Piso: AFINAR, ENSAYO y título de la placa ════════════════ */
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-afinar-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 2px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  color: #a5f3fc !important;
  background: rgba(13, 13, 18, 0.78) !important;
  border: 1px solid rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.22), inset 0 1px 0 rgba(255, 236, 190, 0.16) !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-afinar-btn:active { transform: scale(0.95); }
.bsb-afinar-btn b { font: 900 9px/1 ui-monospace, monospace; color: #ffffff; }
.bsb-afinar-btn span { font: 900 6.5px/1 ui-monospace, monospace; letter-spacing: 0.06em; }
.bsb-cab { align-items: stretch; }
.bsb-rango { justify-content: center; }
.bsb-acciones.bsb-acciones { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
/* R227 · «¿CÓMO SE JUEGA?» (tutorial): en la cabecera, en el lugar del rótulo de temporada; misma pieza que AFINAR
   (44 px en su regla base .bsb-afinar-btn), acento oro y texto que se recorta sin romper la fila. */
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-tuto-btn { flex: 1 1 auto; min-width: 0; margin: 0; color: #fde68a !important; border-color: rgba(251, 191, 36, 0.55) !important; box-shadow: 0 0 14px rgba(251, 191, 36, 0.2), inset 0 1px 0 rgba(255, 236, 190, 0.16) !important; }
.bsb-tuto-btn span { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsb-titulos { min-width: 0; display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.bsb-titulos::-webkit-scrollbar { display: none; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-titulo {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 9px;
  font: 900 8px/1 ui-monospace, monospace !important;
  letter-spacing: 0.05em;
  color: #e9e4f4 !important;
  background: rgba(13, 13, 18, 0.8) !important;
  border: 1px solid rgba(196, 160, 82, 0.45) !important;
  cursor: pointer;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-titulo[aria-pressed="true"] { color: #0b0b12 !important; background: #ead08a !important; border-color: #fff3c8 !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-titulo:active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body #power-companion-box .sala-arcade .bsb-logros-panel:not(.bsb-top-panel) .bsb-logros-grid--med { grid-template-columns: repeat(11, minmax(0, 1fr)); }

/* ══ R227 · Arena de pantalla completa (180 × 320 lógico a escala entera) ════
 * Va en <body> (no dentro de la caja del hábitat): la arena vertical no entra
 * en el 11:6 del cuarto. El lienzo vive en .bsb-marco, del tamaño exacto
 * 180·e × 320·e; los pads son botones transparentes encima de los pads que
 * pinta el lienzo (el arte de art-lead o el respaldo). Nunca se anima la
 * opacidad del contenedor del lienzo (V-11): la entrada es solo transform. */
.bsb-arena {
  --bsb-e: 2px;
  position: fixed;
  inset: 0;
  z-index: 9450;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  background: #06050b;
  box-shadow: inset 0 0 0 1px rgba(196, 160, 82, 0.18);
}
.bsb-arena[hidden] { display: none; }
.bsb-marco {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  width: 360px;
  height: 640px;
  animation: bsbMarcoEntra 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bsbMarcoEntra {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
.bsb-cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  box-shadow: 0 0 0 1px #06050a, 0 0 0 2px #c4a052, -6px 0 14px rgba(34, 211, 238, 0.3), 6px 0 14px rgba(255, 63, 208, 0.3);
}
.bsb-pads { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-pad {
  position: absolute;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
  color: transparent;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-pad[data-pulsado="1"] { transform: scale(0.95); }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-pad:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.bsb-pad-ic { width: 1px; height: 1px; opacity: 0; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-x {
  position: absolute;
  top: var(--bsb-xtop, 54px);
  right: 0;
  z-index: 6;
  width: 44px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 22px/1 ui-monospace, monospace;
  color: #e9e4f4 !important;
  background: rgba(7, 6, 12, 0.72) !important;
  border: 1px solid rgba(196, 160, 82, 0.55) !important;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 0 14px rgba(255, 63, 208, 0.25) !important;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena[data-x="fuera"] .bsb-x { top: -48px; border-radius: 12px; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-x:active { transform: scale(0.95); }
/* En el flex la salida es SALIR (abajo): la × no tapa los sellos ni el título. */
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena[data-fase="flex"] .bsb-x { visibility: hidden; }

/* ── Paneles dentro de la arena: Afinar oído y Ensayo (cristal obsidiana + bisel latón) ── */
.bsb-panel {
  position: absolute;
  top: 18%;
  right: 10px;
  left: 10px;
  z-index: 5;
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 14px;
  background: rgba(8, 7, 14, 0.94);
  border: 1px solid rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.3), inset 0 1px 0 rgba(234, 208, 138, 0.35), inset 0 -2px 0 rgba(58, 46, 26, 0.9);
  animation: bsbPanelEntra 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bsb-panel[hidden] { display: none; }
@keyframes bsbPanelEntra {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}
.bsb-panel p { margin: 0; min-width: 0; }
.bsb-panel-t { font: 900 13px/1.2 ui-monospace, monospace; letter-spacing: 0.14em; color: #a5f3fc; text-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
.bsb-panel-t--s { font-size: 9px; color: #ead08a; text-shadow: none; }
.bsb-panel-x { font: 600 12px/1.35 system-ui, sans-serif; color: #e4e4e7; }
.bsb-panel-dato { font: 800 11px/1.35 ui-monospace, monospace; color: #fde68a; }
.bsb-panel-btns, .bsb-menu-rondas { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bsb-clase { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.bsb-clase input { min-width: 0; min-height: 44px; accent-color: #ead08a; }
.bsb-clase b { font: 900 9px/1 ui-monospace, monospace; color: #ead08a; white-space: nowrap; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  font: 900 10px/1.1 ui-monospace, monospace !important;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  color: #fde68a !important;
  background: rgba(13, 13, 18, 0.88) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.22), inset 0 1px 0 rgba(255, 236, 190, 0.16) !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn--duelo { color: #ffffff !important; background: #b0122b !important; border-color: #ff8a9a !important; box-shadow: 0 0 14px rgba(255, 42, 61, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 #5a0a18 !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn--wa { color: #0b0b12 !important; background: #4ade80 !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn[aria-disabled="true"] { filter: saturate(0.4) brightness(0.7); cursor: default; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn:active:not([aria-disabled="true"]) { transform: scale(0.95); }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.bsb-btn[hidden] { display: none !important; }

/* ── Flex de victoria / derrota ───────────────────────────────────────────
 * El lienzo pinta la escena (velo, rayos, título, sellos, podio con aura y el héroe).
 * Encima, en las zonas que el layout deja libres (zonaTR, desbloqueos / mejora y los
 * botones), van estos bloques DOM con su posición en px lógicos × e: el TR nunca queda
 * tapado por el arte y «ANTES → DESPUÉS +N» son tres cajas en fila (sin solape). */
.bsb-fin {
  position: absolute;
  inset: 0;
  z-index: 8;
  font-size: calc(var(--bsb-e) * 5);
}
.bsb-fin[hidden] { display: none; }
.bsb-fin-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bsb-conf { position: absolute; top: 30%; left: 50%; width: 0; height: 0; }
.bsb-conf b { position: absolute; left: -3px; top: -2px; width: 6px; height: 4px; opacity: 0; background: #22d3ee; }
.bsb-conf b[data-c="1"] { background: #ff3fd0; }
.bsb-conf b[data-c="2"] { background: #fde047; }
.bsb-conf b[data-c="3"] { background: #4ade80; }
.bsb-fin[data-res="gana"][data-burst="a"] .bsb-conf b { animation: bsbConfA 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.bsb-fin[data-res="gana"][data-burst="b"] .bsb-conf b { animation: bsbConfB 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.bsb-conf:nth-child(2n) b { animation-delay: 90ms !important; }
.bsb-conf:nth-child(3n) b { animation-delay: 170ms !important; }
@keyframes bsbConfA {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, -150px, 0) rotate(260deg); }
}
@keyframes bsbConfB {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, -150px, 0) rotate(260deg); }
}
.bsb-fin-tr, .bsb-fin-div, .bsb-fin-info, .bsb-fin-b { position: absolute; min-width: 0; }
.bsb-fin-tr { display: flex; align-items: center; justify-content: center; gap: 0.6em; white-space: nowrap; }
.bsb-fin-tr[data-con="0"] .bsb-fin-flecha { display: none; }
.bsb-fin-tr-antes, .bsb-fin-tr-despues { min-width: 0; font: 900 calc(var(--bsb-e) * 13) / 1 ui-monospace, monospace; letter-spacing: 0.02em; white-space: nowrap; }
.bsb-fin-tr-antes { color: #a1a1aa; text-shadow: 0 2px 0 #06050a; }
.bsb-fin-tr-despues { color: #ffffff; text-shadow: 0 2px 0 #7a5c22, 0 0 10px rgba(253, 224, 71, 0.55); }
.bsb-fin-flecha { font: 900 calc(var(--bsb-e) * 9) / 1 ui-monospace, monospace; font-style: normal; color: #ead08a; }
.bsb-fin-tr-delta { min-width: 0; white-space: nowrap; font: 900 calc(var(--bsb-e) * 8) / 1 ui-monospace, monospace; color: #4ade80; text-shadow: 0 1px 0 #06050a; }
.bsb-fin-tr-delta[data-signo="menos"] { color: #ff8aa0; }
.bsb-fin-tr-delta[data-signo="cero"] { color: #e9e4f4; font-size: calc(var(--bsb-e) * 5); }
.bsb-fin-div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 0 4px; }
.bsb-fin-div-n { font: 900 calc(var(--bsb-e) * 5.5) / 1 ui-monospace, monospace; letter-spacing: 0.08em; color: #4ade80; white-space: nowrap; }
.bsb-fin-div-n[data-rango="flow"] { color: #38bdf8; }
.bsb-fin-div-n[data-rango="synchro"] { color: #a78bfa; }
.bsb-fin-div-n[data-rango="overdrive"] { color: #ff3bd4; }
.bsb-fin-div-barra { position: relative; display: block; min-width: 0; height: 6px; overflow: hidden; border: 1px solid #c4a052; background: #06050a; }
.bsb-fin-div-barra b { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: #ead08a; transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.bsb-fin-ok { font: 900 calc(var(--bsb-e) * 4) / 1 ui-monospace, monospace; color: #4ade80; white-space: nowrap; }
/* Desbloqueos (victoria) o «mejora» (derrota): cristal obsidiana con bisel latón. */
.bsb-fin-info {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35em;
  padding: 0.4em 0.7em;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(8, 7, 14, 0.9);
  border: 1px solid rgba(196, 160, 82, 0.7);
  box-shadow: 0 0 14px rgba(255, 63, 208, 0.25), inset 0 1px 0 rgba(234, 208, 138, 0.35);
}
.bsb-fin[data-res="pierde"] .bsb-fin-info, .bsb-fin[data-res="empate"] .bsb-fin-info, .bsb-fin[data-res="ensayo"] .bsb-fin-info { border-color: rgba(74, 222, 128, 0.7); box-shadow: 0 0 14px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(234, 208, 138, 0.35); }
.bsb-fin-info p { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsb-fin-info .bsb-fin-cab[hidden] { display: none; }
.bsb-fin-cab { font: 900 calc(var(--bsb-e) * 6) / 1.1 ui-monospace, monospace; letter-spacing: 0.1em; color: #4ade80; }
.bsb-fin-dato { font: 800 calc(var(--bsb-e) * 5.5) / 1.25 ui-monospace, monospace; color: #fde68a; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bsb-fin-dato[data-tipo="ascenso"] { color: #ffb3ef; }
.bsb-fin-rondas { font: 700 calc(var(--bsb-e) * 4.8) / 1.2 ui-monospace, monospace; color: #e4e4e7; }
.bsb-fin-rondas[data-descanso="1"] { color: #c4b5fd; }
.bsb-fin-logros { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
.bsb-fin-logros:empty { display: none; }
.bsb-fin-logro { flex: 0 0 auto; display: flex; padding: 1px; border-radius: 6px; background: rgba(251, 191, 36, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45); }
.bsb-fin-logros-t, .bsb-fin-powi { flex: 0 0 auto; font: 900 calc(var(--bsb-e) * 4) / 1.2 ui-monospace, monospace; letter-spacing: 0.08em; color: #fde68a; }
.bsb-fin-powi { color: #bbf7d0; padding: 1px 4px; border: 1px solid #4ade80; border-radius: 3px; }
.bsb-fin-logro-img { image-rendering: crisp-edges; image-rendering: pixelated; }
.bsb-fin-sticker { display: block; width: 20px; height: 20px; font: 900 14px/20px ui-monospace, monospace; text-align: center; color: #ff3fd0; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-fin .bsb-fin-b { font-size: calc(var(--bsb-e) * 6.5) !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-fin .bsb-btn--ic { padding: 0; }
/* R227 · el link del reto ocupa el lugar de ENVIAR RETO (posición en línea desde JS): nunca tapa SALIR. */
.bsb-fin-link { position: absolute; display: flex; align-items: center; gap: 5px; min-width: 0; margin: 0; }
.bsb-fin-link[hidden] { display: none; }
.bsb-fin-input { min-width: 0; flex: 1 1 auto; height: 44px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(200, 168, 110, 0.4); background: #0b0b12; color: #e4e4e7; font: 600 9px/1 ui-monospace, monospace; }

/* ── Placa de duelista en el perfil (propio y ajeno) ─────────────────── */
.bs-placa-wrap { min-width: 0; margin: 0 0 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bs-placa-cv { display: block; width: 176px; height: 58px; max-width: none; image-rendering: crisp-edges; image-rendering: pixelated; }
@media (min-width: 400px) { .bs-placa-cv { width: 352px; height: 116px; } }
.bs-placa-nota { margin: 0; min-width: 0; text-align: center; font: 600 10px/1.3 system-ui, sans-serif; color: #a1a1aa; }
#bs-medallas-grid[hidden] { display: none; }

/* ── Trofeos sobre los estantes de la Vitrina (en el hábitat) ──────────── */
#power-companion-box .pet-deco-prop[data-obj="vitrina"] .pet-deco-ventana { position: relative; }
.pet-deco-trofeos { position: absolute; inset: 0; pointer-events: none; }
.pet-deco-trofeo { position: absolute; display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Vitrina de Trofeos (modal de página) ──────────────────────────────── */
.bsb-vitrina {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 4, 8, 0.72);
}
.bsb-vitrina[hidden] { display: none; }
.bsb-vitrina[data-abierto="1"] .bsb-vitrina-caja { animation: bsbCajaA 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.bsb-vitrina-caja {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  min-width: 0;
  overflow-y: auto;
  padding: 14px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(13, 13, 18, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.28), inset 0 1px 0 rgba(255, 236, 190, 0.2), inset 0 0 0 1px rgba(200, 168, 110, 0.25);
}
.bsb-vitrina-caja p { margin: 0; }
.bsb-vitrina-t { font: 900 13px/1.2 ui-monospace, monospace; letter-spacing: 0.14em; color: #fde68a; text-shadow: 0 0 8px rgba(251, 191, 36, 0.8); }
.bsb-vitrina-sub { margin: 3px 0 8px !important; font: 600 11px/1.3 system-ui, sans-serif; color: #a1a1aa; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 22px;
  color: #e4e4e7 !important;
  background: rgba(13, 13, 18, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  cursor: pointer;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-x:active { transform: scale(0.95); }
.bsb-vitrina-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.bsb-vitrina-grid li { min-width: 0; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-item {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 12px;
  font: 800 9.5px/1.2 system-ui, sans-serif;
  color: #e4e4e7 !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(200, 168, 110, 0.3) !important;
  cursor: pointer;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-item[aria-disabled="true"] { cursor: default; color: #71717a !important; }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-item.is-ex {
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255, 236, 190, 0.2) !important;
}
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-item:active:not([aria-disabled="true"]) { transform: scale(0.95); }
html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-vitrina .bsb-vitrina-item:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
.bsb-vitrina-item span { min-width: 0; max-width: 100%; }
.bsb-vitrina-item small { font: 600 8.5px/1.2 system-ui, sans-serif; color: #71717a; }

/* ── Medallas en el perfil ─────────────────────────────────────────────── */
.bs-medallas-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bs-medalla {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 168, 110, 0.22);
}
.bs-medalla.is-on {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.22), inset 0 1px 0 rgba(255, 236, 190, 0.14);
}
.bs-medalla-n { min-width: 0; max-width: 100%; text-align: center; font: 700 9px/1.15 system-ui, sans-serif; color: #a1a1aa; overflow-wrap: anywhere; }
.bs-medalla.is-on .bs-medalla-n { color: #fde68a; }
#bs-medallas-section[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bsb-fin[data-burst] .bsb-conf b { animation: none !important; opacity: 0 !important; }
  .bsb-vitrina[data-abierto="1"] .bsb-vitrina-caja, .bsb-marco, .bsb-panel { animation: none !important; }
  .bsb-piso { transition: none; }
  .bsb-fin-div-barra b { transition: none; }
  html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-pad,
  html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .bsb-arena .bsb-btn,
  html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-btn,
  html:not(#bsb-a):not(#bsb-b):not(#bsb-c) body .gacha-arcade .bsb-dif { transition: none; }
  .bsb-dif .bsb-estrellas, .bsb-dif .bsb-dif-rg { animation: none !important; }
}

/* ── R228 · Trofeos evolutivos y méritos de Beat Surge en «Power Showcase · MÉRITOS» ───────────
   Holo = tira de `cuadros` (del catálogo) que avanza por background-position con
   steps(N, jump-none): N y la duración van en línea desde el JS, nunca fijos acá (§6.3). */
@keyframes bsHoloCuadros {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}
.bs-holo {
  display: inline-block;
  flex: none;
  background-repeat: no-repeat;
  background-position: 0% 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  animation-name: bsHoloCuadros;
  animation-iteration-count: infinite;
}
.pw-showcase-grid > .bs-meritos { grid-column: 1 / -1; min-width: 0; }
.bs-meritos {
  margin: 0;
  padding: 8px 8px 9px;
  border-radius: 1rem;
  background: rgba(13, 13, 18, 0.72);
  border: 1px solid rgba(200, 168, 110, 0.45);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.16), inset 0 1px 0 rgba(255, 236, 190, 0.14);
}
.bs-meritos-t { margin: 0 0 6px; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font: 900 8.5px/1.2 ui-monospace, monospace; letter-spacing: 0.06em; color: #fde68a; }
.bs-meritos-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-meritos-t b { flex: none; color: #fbbf24; }
.bs-meritos-fila { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.bs-merito {
  min-width: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(200, 168, 110, 0.3);
}
.bs-merito[data-nivel="plata"] { box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.55); }
.bs-merito[data-nivel="oro"] { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.65), 0 0 8px rgba(251, 191, 36, 0.22); }
.bs-merito[data-nivel="holo"] { box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.7), 0 0 10px rgba(217, 70, 239, 0.3); }
.bs-merito-img { display: block; width: 32px; height: 32px; max-width: none; image-rendering: crisp-edges; image-rendering: pixelated; }
.bs-meritos-vacio { margin: 0; text-align: center; font: 600 10px/1.3 system-ui, sans-serif; color: #a1a1aa; }
#bs-placa-wrap[hidden] { display: none; }
#bs-medallas-section[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bs-holo { animation: none !important; background-position: 0% 0 !important; }
}