/* ══ R213 · v271 · MÁQUINAS ARCADE DE SKIN (arcade-skins.js) ══════════════
 * La Sala Arcade tiene dos pisos (pestañas): las 3 máquinas gacha (R167,
 * intactas) y el piso de skins (Power Arcade · Bubblegum Arcade), con la de
 * la skin activa primero. Cada máquina abre un mini-juego sobre la caja del
 * hábitat. Mismo lenguaje que las cabinas: caja 3D por `transform` (lateral y
 * techo a 90°), bisel de latón, neón y sombra de piso. Solo se anima
 * transform / opacity / filter con las curvas oficiales o `steps(N)`.
 * Botones con guarda de 3 ids (R198: `.pf-section button` de las skins le
 * gana a una guarda de 2). Sin tramas `repeating-*` (§7.13/§7.15). */

/* ══ R226 · v284 · HUB DE LA SALA ARCADE ════════════════════════════════════
 * Sin pestañas: la sala abre en un carrusel de cartas (Beat Surge · Power
 * Catch · Bubble Pop · Gachapón · DJ Booth). Gachapón y Beat Surge son pisos
 * a los que se entra por su carta; la cabecera muestra «‹ ARCADE» en esos
 * pisos y, en el hub, los chips COLECCIÓN y PREMIOS. Estado en atributos
 * (data-piso, data-gabinete, data-tuya, data-pronto). Cristal obsidiana con
 * bisel de latón y neón de 1 px + halo de 14 px; solo se anima transform /
 * opacity / filter. */
#power-companion-box .sala-arcade.has-pisos .sa-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* La × de la sala sube a la fila de la cabecera: la cabecera y el carrusel no la pisan. */
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade.sala-arcade #sa-x { top: 0; }

/* ── Cabecera (44 px): ‹ ARCADE en los pisos; COLECCIÓN y PREMIOS en el hub ── */
.sah-cab {
  position: absolute;
  top: 0;
  right: 56px;
  left: 4px;
  z-index: 4;
  height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  container-type: inline-size;
  container-name: sahcab;
}
.sah-tit {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.24em;
  color: #fde68a;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.85), 0 0 2px #ffffff;
}
.sah-tit b { color: var(--power-accent, #ff3b30); text-shadow: 0 0 8px color-mix(in srgb, var(--power-accent, #ff3b30) 80%, transparent), 0 0 2px #ffffff; }
@container sahcab (max-width: 279px) {
  .sah-tit { display: none; }
}
.sah-sub {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.2em;
  color: #fde68a;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 1px 0 #000000;
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-volver,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px !important;
  color: #fde68a !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(13, 13, 18, 0.62)) !important;
  border: 1px solid rgba(200, 168, 110, 0.55) !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.2), inset 0 1px 0 rgba(255, 236, 190, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important;
  font: 900 9px/1 ui-monospace, "SFMono-Regular", Menlo, monospace !important;
  letter-spacing: 0.12em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  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(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-volver { order: -2; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-volver:active,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip:active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-volver:focus-visible,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip:focus-visible,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip[aria-expanded="true"] { outline: none; filter: brightness(1.3); }
.sah-volver-svg { display: block; flex: 0 0 auto; fill: currentColor; image-rendering: pixelated; pointer-events: none; }
.sah-volver-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sah-copa { display: block; flex: 0 0 auto; width: 18px; height: 18px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7)); }
.sah-copa-k { fill: #1a0f00; }
.sah-copa-c { fill: #fbbf24; }
.sah-copa-w { fill: #fffbe6; }
.sah-chip-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; }
.sah-chip-txt small { font: 900 7px/1 ui-monospace, monospace; letter-spacing: 0.1em; color: rgba(253, 230, 138, 0.78); }
.sah-chip-txt b { font: 900 11px/1 ui-monospace, monospace; letter-spacing: 0.04em; color: #ffffff; text-shadow: 0 0 6px rgba(251, 191, 36, 0.9); }

/* ── Qué se ve en cada piso (el inactivo desaparece, sin medidas animadas) ── */
#power-companion-box .sala-arcade[data-piso="hub"] .sa-fila,
#power-companion-box .sala-arcade[data-piso="hub"] #sa-probs-btn,
#power-companion-box .sala-arcade[data-piso="hub"] #sa-costo,
#power-companion-box .sala-arcade[data-piso="hub"] #sa-saldo,
#power-companion-box .sala-arcade[data-piso="hub"] .sah-volver,
#power-companion-box .sala-arcade[data-piso="hub"] .sah-sub,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sah-carrusel,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sah-chip,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sah-tit,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sas-pool,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sas-pool-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
#power-companion-box .sala-arcade[data-piso="hub"] .sah-volver,
#power-companion-box .sala-arcade[data-piso="hub"] .sah-sub,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sah-chip,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sah-tit,
#power-companion-box .sala-arcade:not([data-piso="hub"]) .sas-pool { display: none !important; }

/* ── Carrusel de cartas ───────────────────────────────────────────────── */
#power-companion-box .sala-arcade { --sas-u: 1.5px; --sah-u: 1px; --sah-g: #c8a86e; --sah-g2: #f1d99a; }
#power-companion-box .sala-arcade[data-gabinete="cian"] { --sah-g: #22d3ee; --sah-g2: #a5f3fc; }
#power-companion-box .sala-arcade[data-gabinete="magenta"] { --sah-g: #ff3bd4; --sah-g2: #f5d0fe; }
#power-companion-box .sala-arcade[data-gabinete="violeta"] { --sah-g: #a78bfa; --sah-g2: #ddd6fe; }
#power-companion-box .sala-arcade[data-gabinete="oro"] { --sah-g: #fbbf24; --sah-g2: #fff7d6; }
.sah-carrusel {
  position: absolute;
  top: 48px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 1;
  margin: 0;
  padding: 0 2px;
  list-style: none;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 2px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.sah-carrusel::-webkit-scrollbar { display: none; }
.sah-card {
  --sas-c: #ff3bd4;
  --sas-c2: #22d3ee;
  --sas-lado: #3a0d33;
  --sa-c: var(--sas-c);
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  scroll-snap-align: start;
  border-radius: 14px;
  background:
    radial-gradient(80% 90% at 22% 60%, color-mix(in srgb, var(--sas-c) 20%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(13, 13, 18, 0.82));
  border: 1px solid color-mix(in srgb, var(--sah-g) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sah-g) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sah-g2) 35%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.45);
  perspective: 420px;
  perspective-origin: 30% 40%;
  cursor: pointer;
}
.sah-card[data-juego="power"] { --sas-c: #ff3b30; --sas-c2: #fbbf24; --sas-lado: #2a1216; }
.sah-card[data-juego="bubble"] { --sas-c: #ff5fc8; --sas-c2: #7ee8ff; --sas-lado: #4a1240; }
.sah-card[data-juego="gacha"] { --sas-c: #fbbf24; --sas-c2: #22d3ee; --sas-lado: #2c2210; }
.sah-card[data-juego="dj"] { --sas-c: #8b8ba0; --sas-c2: #55556e; --sas-lado: #16161e; cursor: default; }
.sah-card[data-pronto="1"] .sas-mini { filter: grayscale(0.7) brightness(0.8); }
.sah-info {
  flex: 0 0 96px;
  width: 96px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
}
.sah-nombre {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 10px/1.15 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sas-c) 55%, #ffffff);
  text-shadow: 0 0 7px color-mix(in srgb, var(--sas-c) 80%, transparent), 0 1px 0 #000000;
}
.sah-dato {
  min-width: 0;
  min-height: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.sah-dato i,
.sah-dato small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  white-space: nowrap;
}
.sah-num, .sah-rec { font: 800 8px/1.1 ui-monospace, monospace; letter-spacing: 0.06em; color: #fde68a; text-shadow: 0 1px 0 #000000; display: flex; align-items: center; gap: 2px; }
.sah-costo { font: 800 7px/1.1 ui-monospace, monospace; letter-spacing: 0.04em; color: #c4b5fd; }
.sah-pronto { font: 900 7px/1.1 ui-monospace, monospace; letter-spacing: 0.12em; color: #a1a1aa; }
.sah-rayo { display: block; flex: 0 0 auto; fill: #ffc83d; }
.sah-rango {
  --sah-r: #4ade80;
  flex: 0 0 auto;
  padding: 2px 4px;
  border-radius: 5px;
  font: 900 7px/1 ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: #0b0b12;
  background: var(--sah-r);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sah-r) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.sah-rango[data-rango="flow"] { --sah-r: #38bdf8; }
.sah-rango[data-rango="synchro"] { --sah-r: #a78bfa; }
.sah-rango[data-rango="overdrive"] { --sah-r: #ff3bd4; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-jugar { width: 100%; max-width: 96px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-jugar[aria-disabled="true"] { cursor: default; filter: grayscale(0.85) brightness(0.75); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-jugar[aria-disabled="true"]:active { transform: none; }
.sah-jugar[aria-disabled="true"] .sas-jugar-txt { font-size: 9px; }
/* R227 · «¿CÓMO SE JUEGA?» en la carta BEAT SURGE: fila [DUELO][?] dentro de una columna
 * de info más ancha (la carta no crece en alto). Cristal obsidiana con el neón de la carta;
 * 44 px en esta regla base. Oculto ([hidden]) si el módulo del tutorial no existe. */
.sah-card[data-juego="battle"] .sah-info { flex-basis: 124px; width: 124px; }
.sah-acc { min-width: 0; display: flex; align-items: center; gap: 3px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-acc > .sah-jugar { flex: 1 1 0; width: auto; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-tuto {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  color: color-mix(in srgb, var(--sas-c) 45%, #ffffff) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(13, 13, 18, 0.82)) !important;
  border: 1px solid color-mix(in srgb, var(--sas-c) 55%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--sas-c) 28%, transparent), inset 0 1px 0 rgba(255, 236, 190, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.45) !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  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(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-tuto[hidden] { display: none; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-tuto:hover { filter: brightness(1.18); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-tuto:active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-tuto:focus-visible { outline: 2px solid #fde68a; outline-offset: 1px; }
.sah-tuto-txt { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.sah-tuto-txt i {
  min-width: 0;
  font: 900 7px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 6px color-mix(in srgb, var(--sas-c) 80%, transparent), 0 1px 0 #000000;
}
.sas-mini {
  position: relative;
  flex: 0 0 auto;
  width: calc(40 * var(--sas-u));
  height: calc(52 * var(--sas-u));
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sah-card { --sas-u: var(--sah-u); }
.sah-card .sas-mini { transform-origin: 100% 50%; transform: translate3d(2px, 0, 0) rotateY(12deg); }
.sah-card:not([data-pronto="1"]):hover .sas-mini,
.sah-card:not([data-pronto="1"]):focus-within .sas-mini { filter: brightness(1.22) saturate(1.15); }
.sas-mini-cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 1px rgba(241, 217, 154, 0.7)) drop-shadow(0 0 7px color-mix(in srgb, var(--sas-c) 60%, transparent));
}
.sah-card[data-tuya="1"] .sas-mini-cv {
  filter: drop-shadow(0 0 1px rgba(241, 217, 154, 0.9)) drop-shadow(0 0 12px color-mix(in srgb, var(--sas-c) 85%, transparent));
}
.sas-mini-lado,
.sas-mini-techo {
  position: absolute;
  display: block;
  pointer-events: none;
  backface-visibility: visible;
}
.sas-mini-lado {
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(9 * var(--sas-u));
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(241, 217, 154, 0.85) 0 1px, transparent 1px calc(100% - 1px), rgba(122, 100, 64, 0.9) calc(100% - 1px)),
    linear-gradient(180deg, transparent 0 24%, var(--sas-c) 24% 26%, transparent 26%),
    linear-gradient(180deg, var(--sas-lado) 0%, #0b0b10 100%);
}
.sas-mini-techo {
  top: 0;
  right: 0;
  left: 0;
  height: calc(9 * var(--sas-u));
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, #5c4a2c 0%, var(--sas-lado) 100%);
  box-shadow: inset 0 0 0 1px rgba(241, 217, 154, 0.45);
}
/* Sombra de piso y charco de neón bajo cada cabina. */
.sas-mini::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -6px;
  left: -14%;
  height: 11px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--sas-c) 42%, transparent), transparent),
    radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent);
  pointer-events: none;
  transform: translateZ(-4px);
}
.sas-tag {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 6px;
  font: 900 6.5px/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: #14100a;
  background: var(--sas-c2);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sas-c2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-jugar {
  position: relative;
  flex: 0 0 auto;
  width: 82%;
  max-width: 116px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a0f00 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sas-c) 65%, transparent));
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-jugar:active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-jugar:focus-visible { outline: 2px solid #fde68a; outline-offset: 1px; border-radius: 8px !important; }
.sas-jugar-svg {
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: calc(100% - 10px);
  image-rendering: pixelated;
}
.sas-jugar-tapa, .sas-jugar-txt { transition: transform 100ms cubic-bezier(0.16, 1, 0.3, 1); }
.sas-jugar-txt {
  position: relative;
  top: -4px;
  font: 900 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  color: #14100a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.sas-jugar:active .sas-jugar-tapa { transform: translate3d(0, 4px, 0); }
.sas-jugar:active .sas-jugar-txt { transform: translate3d(0, 6px, 0); }

/* ── Capa del juego (encima de la sala, como Cyber Spin / Neon Drop) ───── */
#power-companion-box .sas-juego {
  --sas-g: 1px;
  --sas-c: #ff3b30;
  --sas-c2: #fbbf24;
  --sas-lado: #2a1216;
  background:
    radial-gradient(70% 90% at 40% 50%, color-mix(in srgb, var(--sas-c) 18%, transparent), transparent 72%),
    linear-gradient(180deg, #0b0a10 0%, #07070b 62%, #0d0b12 100%);
}
#power-companion-box .sas-juego[data-skin="bubble"] {
  --sas-c: #ff5fc8;
  --sas-c2: #7ee8ff;
  --sas-lado: #4a1240;
  background:
    radial-gradient(70% 90% at 40% 50%, rgba(255, 95, 200, 0.24), transparent 72%),
    linear-gradient(180deg, #1d0b2e 0%, #12061c 62%, #1a0a24 100%);
}
.sas-escena {
  position: absolute;
  top: 8px;
  right: 62px;
  bottom: 8px;
  left: 8px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  perspective-origin: 70% 30%;
}
.sas-cab {
  position: relative;
  flex: 0 0 auto;
  width: calc(192 * var(--sas-g));
  height: calc(144 * var(--sas-g));
  min-width: 0;
  transform-style: preserve-3d;
  transform: rotateY(9deg);
}
.sas-cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: pointer;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(241, 217, 154, 0.55),
    0 0 14px color-mix(in srgb, var(--sas-c) 45%, transparent),
    0 14px 26px rgba(0, 0, 0, 0.65);
}
.sas-cab-lado,
.sas-cab-techo {
  position: absolute;
  display: block;
  pointer-events: none;
  backface-visibility: visible;
}
.sas-cab-lado {
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(241, 217, 154, 0.85) 0 1px, transparent 1px calc(100% - 1px), rgba(122, 100, 64, 0.9) calc(100% - 1px)),
    linear-gradient(180deg, transparent 0 22%, var(--sas-c) 22% 24%, transparent 24%),
    linear-gradient(180deg, var(--sas-lado) 0%, #0b0b10 100%);
}
.sas-cab-techo {
  top: 0;
  right: 0;
  left: 0;
  height: 22px;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, #5c4a2c 0%, var(--sas-lado) 100%);
  box-shadow: inset 0 0 0 1px rgba(241, 217, 154, 0.45);
}
/* Sombra de piso bajo la cabina del juego. */
.sas-cab::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -9px;
  left: -8%;
  height: 12px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--sas-c) 36%, transparent), transparent),
    radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent);
  pointer-events: none;
  transform: translateZ(-6px);
}
.sas-controles {
  position: absolute;
  right: 5px;
  bottom: 8px;
  z-index: 4;
  width: 48px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-ctl {
  position: relative;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px !important;
  color: var(--sas-c2) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(13, 13, 18, 0.72)) !important;
  border: 1px solid color-mix(in srgb, var(--sas-c) 55%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--sas-c) 30%, transparent), inset 0 1px 0 rgba(255, 236, 190, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.45) !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-ctl:active,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-ctl[data-pulsado="1"] { transform: scale(0.95); filter: brightness(1.35); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-ctl:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-ctl-inflar { padding: 8px 0; }
.sas-ctl-svg { display: block; image-rendering: pixelated; pointer-events: none; }
.sas-f-c { fill: currentColor; }
.sas-p-k { fill: #7a1d5a; }
.sas-p-c { fill: #ff8fd8; }
.sas-p-w { fill: #ffffff; }
.sas-p-s { fill: #c2338f; }
.sas-ctl-txt { font: 900 7px/1 ui-monospace, monospace; letter-spacing: 0.08em; color: #ffd1f0; pointer-events: none; }
.sas-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sas-mini, .sas-jugar-tapa, .sas-jugar-txt { transition: none; }
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-volver,
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip,
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-jugar,
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-ctl { transition: none; }
}

/* ══ R214 · v272 · PESTAÑAS SIN SOLAPE, POOL DE LA SEMANA Y MODAL DE PREMIO ══
 * Las pestañas conservan su área táctil de 44 px (§6.4); ahora las dos filas
 * de máquinas arrancan DEBAJO de esa área, así un toque en la marquesina de
 * una gacha nunca cambia de piso. La escala --sa-u / --sas-u se vuelve a
 * medir sola con la fila más baja (múltiplos de 0,5). */
#power-companion-box .sala-arcade.has-pisos .sa-fila { top: 44px; }

/* R226 · pool de premios de la semana: chip de la cabecera del hub (antes, riel del piso de skins). */
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-pool {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  border-radius: 12px;
  color: #fde68a !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(13, 13, 18, 0.62)) !important;
  border: 1px solid rgba(200, 168, 110, 0.55) !important;
  box-shadow: 0 0 14px 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);
}
.sas-pool-fila { min-width: 0; display: flex; gap: 2px; pointer-events: none; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-pool:active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-pool:focus-visible,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-pool[aria-expanded="true"] { outline: none; filter: brightness(1.3); }
.sas-pool-tit { font: 900 7px/1 ui-monospace, monospace; letter-spacing: 0.1em; text-align: left; pointer-events: none; color: #fde68a; text-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }
.sas-pool-chip,
.sas-pool-lista li { --sas-rc: #4ade80; }
.sas-pool-chip[data-rareza="rara"], .sas-pool-lista li[data-rareza="rara"] { --sas-rc: #38bdf8; }
.sas-pool-chip[data-rareza="legendaria"], .sas-pool-lista li[data-rareza="legendaria"] { --sas-rc: #fbbf24; }
.sas-pool-chip {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 1px;
  border-radius: 7px;
  background: rgba(13, 13, 18, 0.72);
  border: 1px solid color-mix(in srgb, var(--sas-rc) 60%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sas-rc) 30%, transparent);
}
.sas-pool-chip b { min-width: 0; font: 900 7px/1 ui-monospace, monospace; color: var(--sas-rc); white-space: nowrap; }
.sas-pool-chip .sas-pool-thumb { width: 16px; height: 16px; }
.sas-pool-chip .sas-pool-thumb.is-ico { font-size: 11px; line-height: 16px; }
.sas-pool-thumb {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--cuadros, 1) * 100%) 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.sas-pool-thumb.is-ico { font-size: 16px; line-height: 24px; text-align: center; }

/* Panel de reglas del pool: cubre la sala entera (R226: cabe sin scroll a 360 px; se cierra al tocarlo o con Escape). */
.sas-pool-panel {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 8;
  min-width: 0;
  padding: 5px 7px;
  overflow-y: auto;
  border-radius: 12px;
  color: #e4e4e7;
  background: rgba(10, 10, 16, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.3), inset 0 1px 0 rgba(255, 236, 190, 0.14);
  cursor: pointer;
}
.sas-pool-panel[hidden] { display: none; }
.sas-pool-ptit { margin: 0 0 4px; font: 900 8px/1.2 ui-monospace, monospace; letter-spacing: 0.08em; color: #fde68a; }
.sas-pool-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sas-pool-lista li { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 1px 4px; border-radius: 8px; border-left: 3px solid var(--sas-rc); background: rgba(255, 255, 255, 0.04); }
.sas-pool-lista .sas-pool-thumb { width: 20px; height: 20px; }   /* R226 · el panel cubre la sala y entra sin scroll a 360 px */
.sas-pool-lista .sas-pool-thumb.is-ico { font-size: 13px; line-height: 20px; }
.sas-pool-txt { min-width: 0; display: flex; flex-direction: column; }
.sas-pool-txt small { font: 900 7px/1 ui-monospace, monospace; letter-spacing: 0.12em; color: var(--sas-rc); }
.sas-pool-txt b { font: 700 9px/1.2 system-ui, sans-serif; color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sas-pool-txt i { font: 600 7.5px/1.2 system-ui, sans-serif; font-style: normal; color: #a1a1aa; }
.sas-pool-nota { margin: 4px 0 0; font: 600 7.5px/1.3 system-ui, sans-serif; color: #a1a1aa; }

/* ── Modal de premio: estallido neón ASMR (solo transform / opacity) ──── */
.sas-premio {
  --sas-pc: #fde047;
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: rgba(6, 6, 10, 0.72);
}
.sas-premio[hidden] { display: none; }
.sas-premio-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sas-premio-aro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 2px solid var(--sas-pc);
  box-shadow: 0 0 12px var(--sas-pc);
  opacity: 0;
}
.sas-premio-ch { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.sas-premio-ch b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: var(--sas-pc); opacity: 0; }
.sas-premio[data-burst="a"] .sas-premio-aro { animation: sasAroA 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.sas-premio[data-burst="b"] .sas-premio-aro { animation: sasAroB 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.sas-premio[data-burst] .sas-premio-aro2 { animation-delay: 140ms; }
.sas-premio[data-burst="a"] .sas-premio-ch b { animation: sasChA 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.sas-premio[data-burst="b"] .sas-premio-ch b { animation: sasChB 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.sas-premio[data-burst="a"] .sas-premio-caja { animation: sasCajaA 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.sas-premio[data-burst="b"] .sas-premio-caja { animation: sasCajaB 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes sasAroA { from { opacity: 1; transform: scale(0.2); } to { opacity: 0; transform: scale(2.6); } }
@keyframes sasAroB { from { opacity: 1; transform: scale(0.2); } to { opacity: 0; transform: scale(2.6); } }
@keyframes sasChA { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, -78px, 0); } }
@keyframes sasChB { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, -78px, 0); } }
@keyframes sasCajaA { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sasCajaB { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.sas-premio-caja {
  position: relative;
  width: min(300px, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: "rot rot" "arte rz" "arte nm" "arte pw" "ok ok";
  column-gap: 8px;
  row-gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(13, 13, 18, 0.92));
  border: 1px solid color-mix(in srgb, var(--sas-pc) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sas-pc) 40%, transparent), inset 0 1px 0 rgba(255, 236, 190, 0.2), inset 0 0 0 1px rgba(200, 168, 110, 0.25);
}
.sas-premio-caja p { margin: 0; min-width: 0; }
.sas-premio-rotulo { grid-area: rot; text-align: center; font: 900 11px/1.2 ui-monospace, monospace; letter-spacing: 0.1em; color: #ffffff; text-shadow: 0 0 8px var(--sas-pc), 0 0 2px #ffffff; }
.sas-premio-arte { grid-area: arte; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 10px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--sas-pc) 30%, transparent), rgba(13, 13, 18, 0.6) 70%); }
.sas-premio-thumb { display: block; width: 48px; height: 48px; background-repeat: no-repeat; background-position: 0 0; background-size: calc(var(--cuadros, 1) * 100%) 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.sas-premio-thumb[hidden], .sas-premio-ico[hidden] { display: none; }
.sas-premio-ico { font-size: 30px; line-height: 1; }
.sas-premio-rareza { grid-area: rz; align-self: end; font: 900 8px/1.1 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--sas-pc); }
.sas-premio-nombre { grid-area: nm; font: 700 11px/1.2 system-ui, sans-serif; color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sas-premio-powi { grid-area: pw; align-self: start; font: 700 9px/1.2 system-ui, sans-serif; color: #fde68a; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-premio-ok {
  grid-area: ok;
  min-height: 44px;
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font: 900 11px/1 ui-monospace, monospace !important;
  letter-spacing: 0.12em;
  color: #0b0b12 !important;
  background: var(--sas-pc) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--sas-pc) 45%, transparent) !important;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 110ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-premio-ok:active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-premio-ok:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sas-premio[data-burst] .sas-premio-aro,
  .sas-premio[data-burst] .sas-premio-ch b { animation: none !important; opacity: 0 !important; }
  .sas-premio[data-burst] .sas-premio-caja { animation: none !important; }
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sas-pool { transition: none; }
}

/* ══ R226 · v284 · COLECCIÓN ARCADE (arcade-coleccion.js) ═══════════════════
 * Cubre la sala (inset 4 px) y entra sin scroll a 360 px: cabecera con el
 * medidor «Colección Arcade: n/N Desbloqueados» (role=meter) y su ×, cuatro
 * pestañas de 44 px y una grilla de una o dos filas. Lo bloqueado se ve en
 * silueta (filtro estático). Solo pintura y transform/opacity al entrar. */
.sah-col {
  position: absolute;
  inset: 2px;
  z-index: 9;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 6px 3px;
  overflow: hidden;
  border-radius: 14px;
  color: #e4e4e7;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--sah-g) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #14101e, #08080c);
  border: 1px solid color-mix(in srgb, var(--sah-g) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sah-g) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sah-g2) 30%, transparent);
  transform-origin: 50% 0;
  animation: sahColIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sah-col[hidden] { display: none; }
@keyframes sahColIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.sah-col-cab { flex: 0 0 44px; min-width: 0; display: flex; align-items: center; gap: 6px; }
.sah-col-meter { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sah-col-t {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 900 7.5px/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fde68a;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.7);
}
.sah-col-t b { color: #ffffff; }
.sah-col-barra {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(13, 13, 18, 0.9);
  border: 1px solid color-mix(in srgb, var(--sah-g) 55%, transparent);
}
.sah-col-barra b {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, #22d3ee, #ff3bd4 55%, #fbbf24);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-x,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-tab,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  color: #fde68a !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.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  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(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-x { flex: 0 0 44px; width: 44px; font-size: 20px; color: #e4e4e7 !important; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-x:active,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-tab:active,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab:not([aria-disabled="true"]):active { transform: scale(0.95); }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-x:focus-visible,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-tab:focus-visible,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab:focus-visible { outline: 2px solid #fde68a; outline-offset: 1px; }
.sah-col-tabs { flex: 0 0 44px; min-width: 0; display: flex; gap: 4px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--sah-g) 80%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--sah-g) 32%, transparent), inset 0 1px 0 rgba(255, 236, 190, 0.22) !important;
}
.sah-col-tab small,
.sah-col-tab b { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.sah-col-tab small { font: 900 6.5px/1 ui-monospace, monospace; letter-spacing: 0.06em; color: rgba(253, 230, 138, 0.8); }
.sah-col-tab b { font: 900 10px/1 ui-monospace, monospace; color: #ffffff; }
.sah-col-tab[aria-selected="true"] small { color: #fde68a; }
.sah-col-grid {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
/* R227 · 21 trofeos+medallas en DOS filas horizontales: los 10 trofeos (24 px = 48 a 1:1 en DPR 2)
 * y, tras un salto de línea (::after con order), las 11 medallas (16 px = 32 a 1:1 en DPR 2).
 * 360 px: grilla de 254 × 52 → 249 y 252 de ancho, 24 + 2 + 2 + 20 = 48 de alto. */
.sah-col-grid[data-cat="trofeos"] { gap: 2px 1px; }
.sah-col-grid[data-cat="trofeos"]::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
.sah-col-grid[data-cat="trofeos"] > .sah-col-item[data-tipo="medalla"] { order: 2; margin: 0 1px; }
.sah-col-grid[data-cat="cintas"] { gap: 8px; }
.sah-col-grid[data-cat="stickers"] { gap: 2px; }
.sah-col-grid[data-cat="gabinetes"] { gap: 6px; }
.sah-col-item {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.sah-col-item[data-tipo="trofeo"] { width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(200, 168, 110, 0.18); }
.sah-col-item[data-tipo="medalla"] { width: 20px; height: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(200, 168, 110, 0.18); }
.sah-col-item[data-tipo="sticker"] { width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(200, 168, 110, 0.18); }
.sah-col-img { display: block; width: 24px; height: 24px; image-rendering: crisp-edges; image-rendering: pixelated; }
.sah-col-item[data-tipo="medalla"] .sah-col-img { width: 16px; height: 16px; }
.sah-col-cv { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
.sah-col-item[data-tipo="sticker"] .sah-col-cv { width: 24px; height: 24px; filter: drop-shadow(0 0 3px rgba(255, 59, 212, 0.55)); }
.sah-col-item[data-tipo="cinta"] .sah-col-cv { width: 40px; height: 20px; }
.sah-col-item[data-tipo="gabinete"] .sah-col-cv { width: 28px; height: 36px; }
.sah-col-item[data-on="0"] .sah-col-img,
.sah-col-item[data-on="0"] .sah-col-cv { filter: brightness(0) invert(0.42) opacity(0.5); }
.sah-col-item[data-on="1"] .sah-col-img { filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.55)); }
.sah-col-cinta-n { font: 900 6.5px/1 ui-monospace, monospace; letter-spacing: 0.08em; color: #a1a1aa; white-space: nowrap; }
.sah-col-item[data-on="1"] .sah-col-cinta-n[data-rango="groove"] { color: #4ade80; }
.sah-col-item[data-on="1"] .sah-col-cinta-n[data-rango="flow"] { color: #38bdf8; }
.sah-col-item[data-on="1"] .sah-col-cinta-n[data-rango="synchro"] { color: #a78bfa; }
.sah-col-item[data-on="1"] .sah-col-cinta-n[data-rango="overdrive"] { color: #ff3bd4; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab { width: 44px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab[aria-pressed="true"] {
  border-color: #fde68a !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255, 236, 190, 0.3) !important;
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab[aria-disabled="true"] { cursor: default; }
/* «Nuevo»: un punto que late por pasos (solo opacidad). */
.sah-col-item[data-nuevo="1"]::after,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip[data-nuevo="1"]::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  background: #ff3bd4;
  box-shadow: 0 0 6px #ff3bd4;
  pointer-events: none;
  animation: sahNuevo 1200ms steps(2, jump-none) infinite;
}
@keyframes sahNuevo {
  from { opacity: 1; }
  to { opacity: 0.3; }
}
.sah-col-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sah-col-info {
  flex: 0 0 auto;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 8px/1.3 ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #c4b5fd;
}
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-jugar[aria-disabled="true"]:active .sas-jugar-tapa,
html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-jugar[aria-disabled="true"]:active .sas-jugar-txt { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sah-col { animation: none; }
  .sah-col-barra b { transition: none; }
  .sah-col-item[data-nuevo="1"]::after,
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-chip[data-nuevo="1"]::after { animation: none; }
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-x,
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-tab,
  html:not(#sas-a):not(#sas-b):not(#sas-c) body .gacha-arcade .sah-col-gab { transition: none; }
}

/* ══ R226 · LOGROS de Beat Surge sin scroll a 360 px ═══════════════════════
 * El panel (arcade-battle.css) vivía en la caja de 212 px entre la cabecera y
 * el riel y necesitaba 181 px de alto para 121 disponibles. En el hub cubre la
 * sala como el pool y la colección: trofeos y medallas en una fila de 10 cada
 * uno, íconos de 24 px (los trofeos de 48 px quedan 1:1 en pantallas 2×) y un
 * fondo casi opaco para que el piso de abajo no se lea a través. El resto de la
 * pintura y el comportamiento siguen en arcade-battle.css. */
html:not(#sas-a):not(#sas-b):not(#sas-c) body #power-companion-box .sala-arcade .bsb-logros-panel:not(.bsb-top-panel) {
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  z-index: 9;
  padding: 4px 6px;
  overflow: hidden;
  background: rgba(10, 10, 16, 0.985);
}
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 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body #power-companion-box .sala-arcade .bsb-logros-panel:not(.bsb-top-panel) .bsb-logro { padding: 2px 0; }
html:not(#sas-a):not(#sas-b):not(#sas-c) body #power-companion-box .sala-arcade .bsb-logros-panel:not(.bsb-top-panel) .bsb-logro-img { width: 24px; height: 24px; }