/* R227 · v285 · BEAT SURGE · ACADEMIA DEL BEAT (beat-surge-tutorial.js).
 * Overlay de pantalla completa por encima de la arena (9450): cristal
 * obsidiana con bisel latón y neón cian/magenta. Solo se animan transform y
 * opacity con las curvas oficiales (§6.2). Estado en data-*; los reinicios
 * van con keyframes gemelos A/B (V-14) y ningún keyframe usa custom props.
 * Los botones llevan guarda de 3 ids (V-40): viven dentro del hábitat y las
 * skins pintan los botones de #power-companion-box. */

.bst {
  position: fixed;
  inset: 0;
  z-index: 9470;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: manipulation;
  font: 800 12px/1.25 ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: #f4efe4;
  -webkit-tap-highlight-color: transparent;
}
.bst[hidden] { display: none; }
.bst *, .bst *::before, .bst *::after { box-sizing: border-box; }
.bst-velo {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 9, 0.88);
}
.bst-panel {
  position: relative;
  min-width: 0;
  width: min(100%, 440px);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(13, 11, 22, 0.97);
  border: 1px solid rgba(196, 160, 82, 0.6);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(234, 208, 138, 0.38),
    inset 0 -1px 0 rgba(58, 46, 26, 0.9),
    inset 0 0 0 2px #06050a,
    -6px 0 14px rgba(34, 211, 238, 0.28),
    6px 0 14px rgba(255, 63, 208, 0.28);
  animation: bstEntra 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bstEntra {
  from { transform: translateY(14px) scale(0.96); }
  to { transform: translateY(0) scale(1); }
}

/* ── cabecera: marca · puntos de progreso · × ── */
.bst-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 2px 12px;
  border-bottom: 1px solid rgba(196, 160, 82, 0.28);
}
.bst-marca {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 9px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: #ead08a;
}
.bst-marca b { color: #22d3ee; text-shadow: 0 0 6px rgba(34, 211, 238, 0.7); }
.bst-puntos { display: flex; gap: 5px; min-width: 0; }
.bst-puntos i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #241c3c;
  box-shadow: inset 0 0 0 1px rgba(196, 160, 82, 0.4);
}
.bst-puntos i[data-e="hecho"] { background: #c4a052; }
.bst-puntos i[data-e="actual"] { background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.8); transform: scale(1.25); }
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-x {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 22px/1 ui-monospace, monospace;
  color: #ead08a;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-x:active { transform: scale(0.95); }

.bst-cuerpo {
  min-width: 0;
  min-height: 0;
  padding: 10px 12px 6px;
  overflow: hidden;
}

/* ── entrenadora (mascota real, celda 48 × 2) ── */
.bst-coach { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bst-txt { min-width: 0; flex: 1 1 auto; }
.bst-pet {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(closest-side, rgba(34, 211, 238, 0.22), rgba(13, 11, 22, 0) 100%), #0d0b16;
  box-shadow: inset 0 0 0 1px rgba(196, 160, 82, 0.55), inset 0 -10px 0 rgba(255, 63, 208, 0.12);
}
.bst-pet img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  max-height: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  animation-name: bstHoja;
  animation-iteration-count: infinite;
}
@keyframes bstHoja {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.bst-pet img:not([src]) { visibility: hidden; }
.bst-pet-resp {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font: 900 40px/1 ui-monospace, monospace;
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
}
.bst-pet[data-resp="1"] .bst-pet-resp { display: flex; }
.bst-pet[data-resp="1"] img { visibility: hidden; }

.bst-num {
  margin: 0 0 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 9px/1.1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: #ff3fd0;
  text-shadow: 0 0 6px rgba(255, 63, 208, 0.6);
}
.bst-titulo {
  margin: 0;
  font: 900 17px/1.1 ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 0 #06050a, 0 0 10px rgba(34, 211, 238, 0.45);
  overflow-wrap: anywhere;
}
.bst-regla {
  margin: 5px 0 0;
  font: 800 12px/1.3 ui-monospace, monospace;
  color: #fde68a;
}
.bst-tip {
  margin: 8px 0 0;
  font: 700 10px/1.3 ui-monospace, monospace;
  color: #a1a1aa;
}

/* ── portada ── */
.bst-portada { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.bst-portada .bst-coach { justify-content: center; }
.bst-portada .bst-titulo { margin-top: 8px; font-size: 12px; color: #fde68a; }
.bst-portada .bst-titulo b {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  color: #ffffff;
  text-shadow: 0 2px 0 #06050a, -2px 0 10px rgba(34, 211, 238, 0.6), 2px 0 10px rgba(255, 63, 208, 0.6);
}
.bst-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.bst-lista li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
  font: 900 9px/1.1 ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-align: left;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(196, 160, 82, 0.35);
}
.bst-lista b {
  flex: 0 0 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #06050a;
  background: #22d3ee;
}

/* ── escena: estado (pulso · fase · marcas) · juicio · pads ── */
.bst-escena { margin-top: 10px; min-width: 0; }
.bst-estado {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto 26px;
  align-items: center;
  column-gap: 8px;
}
.bst-met {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font: 900 13px/1 ui-monospace, monospace;
  font-style: normal;
  color: #06050a;
  background: #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.55), inset 0 0 0 2px #06050a;
  opacity: 0.35;
}
.bst-escena[data-fase="demo"] .bst-met { animation-name: bstMet; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes bstMet {
  0% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 0.35; }
}
.bst-met[data-pulso="a"] { animation: bstPulsoA 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.bst-met[data-pulso="b"] { animation: bstPulsoB 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.bst-escena[data-fase="demo"] .bst-met[data-pulso] { animation-name: bstMet; }
@keyframes bstPulsoA {
  0% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.35; }
}
@keyframes bstPulsoB {
  0% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.35; }
}
.bst-fase {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 10px/1.2 ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: #22d3ee;
}
.bst-escena[data-fase="demo"] .bst-fase { color: #ead08a; }
.bst-marcas { grid-column: 3; grid-row: 1; display: flex; gap: 4px; }
.bst-marcas i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #1b1530;
  box-shadow: inset 0 0 0 1px rgba(196, 160, 82, 0.45);
}
.bst-marcas i[data-j="S"] { background: #fde047; }
.bst-marcas i[data-j="P"] { background: #22d3ee; }
.bst-marcas i[data-j="G"] { background: #4ade80; }
.bst-marcas i[data-j="O"] { background: #a1a1aa; }
.bst-marcas i[data-j="M"] { background: #ff2a3d; }
.bst-juicio {
  grid-column: 2 / span 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font: 900 18px/1 ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #06050a;
  transform-origin: left center;
}
.bst-juicio[data-j="S"] { color: #fde047; text-shadow: 0 2px 0 #06050a, 0 0 10px rgba(253, 224, 71, 0.8); }
.bst-juicio[data-j="P"] { color: #22d3ee; }
.bst-juicio[data-j="G"] { color: #4ade80; }
.bst-juicio[data-j="O"] { color: #d4d4d8; }
.bst-juicio[data-j="M"] { color: #ff2a3d; }
.bst-juicio[data-pop="a"] { animation: bstPopA 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.bst-juicio[data-pop="b"] { animation: bstPopB 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bstPopA {
  from { transform: scale(1.35); }
  to { transform: scale(1); }
}
@keyframes bstPopB {
  from { transform: scale(1.35); }
  to { transform: scale(1); }
}

.bst-fila {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 96px;
  margin-top: 8px;
}
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-pad {
  position: relative;
  min-width: 0;
  min-height: 44px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: #f4efe4;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  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(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-pad:active,
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-pad[data-tecla="1"] { transform: scale(0.95); }
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-pad:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.bst-pad-cara {
  position: absolute;
  inset: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 2px 7px;
  overflow: hidden;
  border-radius: 10px;
  background: #0d0b16;
  border: 1px solid var(--bst-c);
  box-shadow: inset 0 1px 0 rgba(234, 208, 138, 0.45), inset 0 -10px 0 rgba(0, 0, 0, 0.35), 0 0 14px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.bst-pad-cara::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 14%;
  height: 26%;
  border-radius: 6px;
  background: var(--bst-c);
  opacity: 0.85;
  box-shadow: 0 0 12px var(--bst-c);
}
.bst-pad-cara::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: var(--bst-c);
}
.bst-pad-cuerpo {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 8px/1 ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: #ead08a;
}
.bst-pad kbd {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font: 800 8px/1 ui-monospace, monospace;
  color: #a1a1aa;
}
.bst-pad[data-objetivo="1"] .bst-pad-cara {
  border-color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(234, 208, 138, 0.45), 0 0 14px var(--bst-c), 0 0 0 2px var(--bst-c);
}
.bst-pad-orden {
  position: absolute;
  left: 4px;
  top: 4px;
  display: none;
  font: 900 9px/1 ui-monospace, monospace;
  color: #06050a;
  background: #ead08a;
  border-radius: 4px;
  padding: 2px 3px;
}
.bst-escena[data-fase="demo"] .bst-pad-orden:not(:empty) { display: block; }
.bst-pad[data-orden]:not([data-orden=""])::before {
  content: attr(data-orden);
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  font: 900 10px/1 ui-monospace, monospace;
  color: #06050a;
  background: #ff3fd0;
  border-radius: 4px;
  padding: 2px 4px;
}
/* aro que se cierra sobre el pad objetivo (A/B) */
.bst-pad-aro {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid #ffffff;
  border-radius: 10px;
  opacity: 0;
}
.bst-pad[data-objetivo="1"][data-aro="a"] .bst-pad-aro { animation: bstAroA 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.bst-pad[data-objetivo="1"][data-aro="b"] .bst-pad-aro { animation: bstAroB 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bstAroA {
  0% { transform: scale(1.8); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bstAroB {
  0% { transform: scale(1.8); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* golpe: destello del color del juicio (A/B) */
.bst-pad[data-gj="S"] .bst-pad-cara::after { background: #fde047; }
.bst-pad[data-gj="P"] .bst-pad-cara::after { background: #22d3ee; }
.bst-pad[data-gj="G"] .bst-pad-cara::after { background: #4ade80; }
.bst-pad[data-gj="O"] .bst-pad-cara::after { background: #d4d4d8; }
.bst-pad[data-gj="M"] .bst-pad-cara::after { background: #ff2a3d; }
.bst-pad[data-gj="r"] .bst-pad-cara::after { background: #ff3fd0; }
.bst-pad[data-golpe="a"] .bst-pad-cara::after { animation: bstGolpeA 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.bst-pad[data-golpe="b"] .bst-pad-cara::after { animation: bstGolpeB 280ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes bstGolpeA {
  from { opacity: 0.85; }
  to { opacity: 0; }
}
@keyframes bstGolpeB {
  from { opacity: 0.85; }
  to { opacity: 0; }
}
/* luces de la demo: el dedo (g) en el color del pad; la rival (r) en magenta */
.bst-luz {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--bst-c);
  opacity: 0;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.bst-luz[data-quien="r"] { background: #ff3fd0; }
.bst-escena[data-ronda="c8"] .bst-luz, .bst-escena[data-ronda="ct"] .bst-luz { animation-name: bstLuz4; }
.bst-escena[data-ronda="es"] .bst-luz, .bst-escena[data-ronda="fs"] .bst-luz { animation-name: bstLuz8; }
.bst-escena:not([data-fase="demo"]) .bst-luz { display: none; }
@keyframes bstLuz4 {
  0% { opacity: 0.85; }
  14% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes bstLuz8 {
  0% { opacity: 0.85; }
  7% { opacity: 0; }
  100% { opacity: 0; }
}
/* dedo fantasma: una columna de 25 % que viaja con translate (un pad = 100 %) */
.bst-dedo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 25%;
  height: 100%;
  pointer-events: none;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.bst-dedo i {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 18px;
  height: 28px;
  margin-left: -9px;
  border-radius: 9px 9px 7px 7px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px #06050a, 0 0 14px rgba(34, 211, 238, 0.85);
}
.bst-dedo i::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 3px;
  height: 7px;
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.55);
}
.bst-escena:not([data-fase="demo"]) .bst-dedo { display: none; }
.bst-escena[data-ronda="c8"] .bst-dedo { animation-name: bstDedoC8; }
.bst-escena[data-ronda="es"] .bst-dedo { animation-name: bstDedoEs; }
.bst-escena[data-ronda="ct"] .bst-dedo { animation-name: bstDedoCt; }
.bst-escena[data-ronda="fs"] .bst-dedo { animation-name: bstDedoFs; }
@keyframes bstDedoC8 {
  0% { transform: translate(0%, -45%) scale(1); }
  2.25% { transform: translate(0%, -45%) scale(1); }
  6.25% { transform: translate(0%, -4%) scale(0.88); }
  10.25% { transform: translate(0%, -45%) scale(1); }
  27.25% { transform: translate(100%, -45%) scale(1); }
  31.25% { transform: translate(100%, -4%) scale(0.88); }
  35.25% { transform: translate(100%, -45%) scale(1); }
  52.25% { transform: translate(200%, -45%) scale(1); }
  56.25% { transform: translate(200%, -4%) scale(0.88); }
  60.25% { transform: translate(200%, -45%) scale(1); }
  77.25% { transform: translate(300%, -45%) scale(1); }
  81.25% { transform: translate(300%, -4%) scale(0.88); }
  85.25% { transform: translate(300%, -45%) scale(1); }
  100% { transform: translate(0%, -45%) scale(1); }
}
@keyframes bstDedoEs {
  0% { transform: translate(200%, -45%) scale(1); }
  51.13% { transform: translate(200%, -45%) scale(1); }
  53.13% { transform: translate(200%, -4%) scale(0.88); }
  55.13% { transform: translate(200%, -45%) scale(1); }
  63.63% { transform: translate(0%, -45%) scale(1); }
  65.63% { transform: translate(0%, -4%) scale(0.88); }
  67.63% { transform: translate(0%, -45%) scale(1); }
  76.13% { transform: translate(300%, -45%) scale(1); }
  78.13% { transform: translate(300%, -4%) scale(0.88); }
  80.13% { transform: translate(300%, -45%) scale(1); }
  88.63% { transform: translate(100%, -45%) scale(1); }
  90.63% { transform: translate(100%, -4%) scale(0.88); }
  92.63% { transform: translate(100%, -45%) scale(1); }
  100% { transform: translate(200%, -45%) scale(1); }
}
@keyframes bstDedoCt {
  0% { transform: translate(100%, -45%) scale(1); }
  8.5% { transform: translate(100%, -45%) scale(1); }
  12.5% { transform: translate(100%, -4%) scale(0.88); }
  16.5% { transform: translate(100%, -45%) scale(1); }
  33.5% { transform: translate(200%, -45%) scale(1); }
  37.5% { transform: translate(200%, -4%) scale(0.88); }
  41.5% { transform: translate(200%, -45%) scale(1); }
  58.5% { transform: translate(100%, -45%) scale(1); }
  62.5% { transform: translate(100%, -4%) scale(0.88); }
  66.5% { transform: translate(100%, -45%) scale(1); }
  83.5% { transform: translate(200%, -45%) scale(1); }
  87.5% { transform: translate(200%, -4%) scale(0.88); }
  91.5% { transform: translate(200%, -45%) scale(1); }
  100% { transform: translate(100%, -45%) scale(1); }
}
@keyframes bstDedoFs {
  0% { transform: translate(0%, -45%) scale(1); }
  1.13% { transform: translate(0%, -45%) scale(1); }
  3.13% { transform: translate(0%, -4%) scale(0.88); }
  5.13% { transform: translate(0%, -45%) scale(1); }
  13.63% { transform: translate(300%, -45%) scale(1); }
  15.63% { transform: translate(300%, -4%) scale(0.88); }
  17.63% { transform: translate(300%, -45%) scale(1); }
  19.88% { transform: translate(300%, -45%) scale(1); }
  21.88% { transform: translate(300%, -4%) scale(0.88); }
  23.88% { transform: translate(300%, -45%) scale(1); }
  26.13% { transform: translate(100%, -45%) scale(1); }
  28.13% { transform: translate(100%, -4%) scale(0.88); }
  30.13% { transform: translate(100%, -45%) scale(1); }
  90% { transform: translate(100%, -45%) scale(1); }
  100% { transform: translate(0%, -45%) scale(1); }
}

/* ── final: cómo se gana ── */
.bst-claves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.bst-claves li {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  text-align: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(196, 160, 82, 0.4);
}
.bst-claves li[data-c="precision"] { color: #22d3ee; }
.bst-claves li[data-c="memoria"] { color: #ff3fd0; }
.bst-claves li[data-c="groove"] { color: #fbbf24; }
.bst-claves svg { filter: drop-shadow(0 0 5px currentColor); }
.bst-claves b { font: 900 9px/1 ui-monospace, monospace; letter-spacing: 0.08em; }
.bst-claves span { min-width: 0; font: 700 9px/1.25 ui-monospace, monospace; color: #d4d4d8; }
.bst-tr { margin: 10px 0 0; font: 800 11px/1.3 ui-monospace, monospace; color: #f4efe4; }
.bst-tr b {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #06050a;
  background: #ead08a;
}
.bst-rangos { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.bst-rangos i {
  min-width: 0;
  padding: 3px 6px;
  font: 900 8px/1 ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.1em;
  border-radius: 4px;
  background: #141022;
  box-shadow: inset 0 0 0 1px currentColor;
}
.bst-rangos i[data-r="groove"] { color: #22d3ee; }
.bst-rangos i[data-r="flow"] { color: #4ade80; }
.bst-rangos i[data-r="synchro"] { color: #ff3fd0; }
.bst-rangos i[data-r="overdrive"] { color: #fbbf24; }

/* ── pie: botones (44 px en la regla base) ── */
.bst-pie {
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(196, 160, 82, 0.22);
}
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 12px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: #ead08a;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(196, 160, 82, 0.6);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(234, 208, 138, 0.3);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-btn[data-tipo="pri"] {
  color: #06050a;
  background: #22d3ee;
  border-color: #a5f3fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(8, 145, 178, 0.9), 0 0 14px rgba(34, 211, 238, 0.45);
}
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-btn[hidden] { display: none; }
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-btn:active { transform: scale(0.95); }
html:not(#bst-a):not(#bst-b):not(#bst-c) .bst .bst-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ── apaisado (660 × 360 y el monitor virtual): dos columnas ── */
@media (min-aspect-ratio: 3/2) and (max-height: 520px) {
  .bst { padding: 6px; }
  .bst-panel { width: min(100%, 640px); }
  .bst-cuerpo { padding: 8px 12px 4px; }
  .bst-ronda, .bst-final {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 14px;
    align-items: start;
  }
  .bst-ronda .bst-coach, .bst-final .bst-coach { flex-direction: column; align-items: flex-start; }
  .bst-escena { margin-top: 0; }
  .bst-fila { height: 84px; }
  .bst-final .bst-claves { margin-top: 0; }
  .bst-final .bst-tr, .bst-final .bst-rangos { grid-column: 2; }
  .bst-portada {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    text-align: left;
    align-items: center;
  }
  .bst-portada .bst-coach { grid-row: 1 / span 4; }
  .bst-portada .bst-titulo { margin-top: 0; }
  .bst-portada .bst-lista { margin-top: 6px; }
  .bst-pie { padding: 6px 12px 8px; }
}

/* ── sin movimiento: sin dedo animado ni aros; indicaciones estáticas ── */
.bst[data-quieto="1"] .bst-panel,
.bst[data-quieto="1"] .bst-pet img,
.bst[data-quieto="1"] .bst-met,
.bst[data-quieto="1"] .bst-juicio,
.bst[data-quieto="1"] .bst-pad-cara::after { animation: none; }
.bst[data-quieto="1"] .bst-dedo,
.bst[data-quieto="1"] .bst-luz,
.bst[data-quieto="1"] .bst-pad-aro { display: none; }
.bst[data-quieto="1"] .bst-met { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bst-panel, .bst-pet img, .bst-met, .bst-juicio, .bst-pad-cara::after { animation: none; }
  .bst-dedo, .bst-luz, .bst-pad-aro { display: none; }
}