:root {
  --bg-color-web: #F48FB1;
  --grid-color-web: rgba(255, 255, 255, 0.4);
  color-scheme: light
}
body.modo-oscuro {
  --bg-color-web: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  --grid-color-web: rgba(107, 78, 122, 0.5)
}
.nota-glitch-edit {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.7) 4px, rgba(255, 255, 255, 0.7) 8px) !important;
  box-shadow: 0 0 6px #00BCD4,0 0 6px #FF4081;
  border: 1px solid #FFF !important;
  animation: parpadeo-glitch 0.8s steps(1, end) infinite;
  z-index: 5
}
@keyframes parpadeo-glitch {
  0% {
    opacity: 1
  }
  50% {
    opacity: 0.55
  }
  100% {
    opacity: 1
  }
}
html {
  overflow-x: hidden;
  max-width: 100%
}
body {
  background: var(--bg-color-web);
  background-attachment: fixed;
  color: #222222;
  font-family: 'Pixelify Sans','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 10px;
  overflow-x: hidden;
  max-width: 100%;
  transition: background 0.4s ease
}
#canvas-fondo-web {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  z-index: 0;
  pointer-events: none
}
#overlay-crt-scanlines {
  position: fixed;
  top: -40px;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(calc(100 * var(--vh, 1vh)) + 40px);
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
  opacity: 0.5;
  animation: crtScanMove 8s linear infinite;
  will-change: transform;
  transform: translateZ(0)
}
#overlay-crt-scanlines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(90deg, rgba(0,188,212,0.04) 0px, rgba(0,188,212,0.04) 1px, transparent 2px, transparent 3px);
  animation: crtRgbShift 2.6s ease-in-out infinite alternate;
  will-change: transform
}
@keyframes crtScanMove {
  0% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(40px)
  }
}
@keyframes crtRgbShift {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(1.5px)
  }
}
#stickers-flotantes-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}
.sticker-flotante {
  position: absolute;
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: 700;
  text-shadow: 2px 2px 0px #222222;
  opacity: 0.55;
  animation-name: stickerFlotar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  user-select: none;
  will-change: transform
}
@keyframes stickerFlotar {
  0%,
  100% {
    transform: translateY(0px) rotate(-6deg)
  }
  50% {
    transform: translateY(-16px) rotate(6deg)
  }
}
@media (max-width: 640px) {
  #stickers-flotantes-fondo .sticker-flotante {
    opacity: 0.4
  }
}
.avatares-flotando-espera {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 8px;
  min-height: 32px
}
.avatar-flotante-chico-item {
  display: flex;
  flex-direction: column;
  align-items: center
}
.avatar-flotante-chico {
  width: 38px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  line-height: 1.1;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 2px;
  box-sizing: border-box;
  border: 2px solid #222;
  box-shadow: 1px 1px 0px #222;
  overflow: hidden;
  animation-name: avatarFlotarChico;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  user-select: none;
  will-change: transform
}
.avatar-flotante-chico-nombre {
  display: block;
  font-size: 8px;
  text-align: center;
  color: #666;
  margin-top: 2px;
  max-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.avatar-flotante-chico.avatar-flotante-eliminado {
  opacity: 0.4;
  filter: grayscale(0.6)
}
@keyframes avatarFlotarChico {
  0%,
  100% {
    transform: translateY(0px) rotate(-4deg)
  }
  50% {
    transform: translateY(-7px) rotate(4deg)
  }
}
#pantalla-bienvenida {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: pointer;
  transition: opacity 0.6s ease;
  overflow: hidden
}
#pantalla-bienvenida::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}
#bienvenida-decoracion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}
.bienvenida-flotante {
  position: absolute;
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: 700;
  text-shadow: 2px 2px 0px #222222;
  animation-name: stickerFlotar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  user-select: none;
  will-change: transform
}
.bienvenida-rombo-1 {
  top: 16%;
  left: 12%;
  font-size: 34px;
  color: #90CAF9;
  opacity: 0.7;
  animation-duration: 4.2s
}
.bienvenida-rombo-2 {
  bottom: 18%;
  right: 11%;
  font-size: 26px;
  color: #FF66B2;
  opacity: 0.6;
  animation-duration: 3.4s;
  animation-delay: 0.4s
}
.bienvenida-rombo-3 {
  top: 24%;
  right: 16%;
  font-size: 18px;
  color: #FFD54F;
  opacity: 0.65;
  animation-duration: 3.9s;
  animation-delay: 0.9s
}
.bienvenida-nota-1 {
  bottom: 24%;
  left: 15%;
  font-size: 30px;
  color: #A5D6A7;
  opacity: 0.7;
  animation-duration: 3.6s;
  animation-delay: 0.2s
}
.bienvenida-nota-2 {
  top: 34%;
  right: 8%;
  font-size: 22px;
  color: #CE93D8;
  opacity: 0.6;
  animation-duration: 4.6s;
  animation-delay: 1.1s
}
.bienvenida-gato {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  opacity: 0.85;
  animation-duration: 2.6s
}
@media (max-width: 640px) {
  .bienvenida-rombo-1,
  .bienvenida-rombo-2,
  .bienvenida-rombo-3 {
    display: none
  }
}
#bienvenida-tarjeta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}
#bienvenida-cmd-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}
.cmd-bienvenida-titulo,
.cmd-bienvenida-continuar {
  position: relative !important;
  opacity: 0.97 !important
}
.cmd-bienvenida-continuar {
  animation: bienvenidaTituloFlotar 3.2s cubic-bezier(.45,.05,.55,.95) infinite
}
.cmd-bienvenida-titulo {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: calc(92 * var(--vw, 1vw)) !important;
  border-color: #FF4081 !important
}
.cmd-bienvenida-continuar {
  width: fit-content !important;
  min-width: 420px !important;
  max-width: calc(92 * var(--vw, 1vw)) !important;
  animation-delay: 0.3s
}
.cmd-bienvenida-titulo .cmd-titulo-kawaii {
  background: linear-gradient(90deg, #FF4081 0%, #F06292 55%, #FF80AB 100%);
  font-size: 13px;
  padding: 6px 12px
}
.cmd-bienvenida-continuar .cmd-titulo-kawaii {
  background: linear-gradient(90deg, #00BCD4 0%, #26C6DA 100%);
  font-size: 13px;
  padding: 5px 10px
}
.cmd-bienvenida-titulo .cmd-cuerpo-kawaii {
  font-size: 12px;
  line-height: 1.4;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  background: linear-gradient(180deg, #0D0D0D 0%, #191919 100%)
}
.cmd-bienvenida-continuar .cmd-cuerpo-kawaii {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 16px;
  display: flex;
  flex-direction: column;
  align-items: center
}
.cmd-bienvenida-linea {
  color: #B0BEC5
}
.cmd-bienvenida-resultado {
  margin: 0 0 8px 0
}
.cmd-bienvenida-resultado:last-child {
  margin-bottom: 0
}
.cmd-bienvenida-continuar .cmd-bienvenida-resultado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center
}
.cmd-bienvenida-nombre {
  display: block;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 28px !important;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 !important;
  text-align: center;
  white-space: nowrap;
  color: #FF80AB;
  text-shadow: 2px 2px 0px #000
}
#pantalla-bienvenida {
  --gato-gigante-lado: clamp(88px, calc(20 * var(--vw, 1vw)), 170px);
  --lado-logo-kkr: clamp(154px, calc(min(calc(100 * var(--vw, 1vw) - 2 * (var(--gato-gigante-lado) + 24px)), calc(100 * var(--vh, 1vh) - 140px)) * 0.68), 540px)
}
@media (max-width: 640px) {
  #pantalla-bienvenida {
    --lado-logo-kkr: clamp(154px, calc(min(calc(91 * var(--vw, 1vw)), calc(100 * var(--vh, 1vh) - 140px)) * 0.68), 540px)
  }
}
.bienvenida-kkr-logo-img {
  display: block;
  max-width: 100%;
  width: var(--lado-logo-kkr);
  height: var(--lado-logo-kkr);
  object-fit: contain;
  image-rendering: pixelated
}
#bienvenida-cmd-kkr.cmd-bienvenida-sin-marco {
  overflow: visible !important
}
.bienvenida-kkr-logo-img {
  transform-origin: 50% 60%;
  filter: drop-shadow(3px 5px 0px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(255,64,129,0.5));
  animation: kkrLogoOla 4.2s ease-in-out infinite,kkrLogoBrillo 2.8s ease-in-out infinite;
  will-change: transform, filter
}
@keyframes kkrLogoOla {
  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg) scale(1)
  }
  25% {
    transform: translateY(-6px) rotate(0deg) scale(1.015)
  }
  50% {
    transform: translateY(-2px) rotate(1.2deg) scale(1)
  }
  75% {
    transform: translateY(-7px) rotate(0deg) scale(1.015)
  }
}
@keyframes kkrLogoBrillo {
  0%,
  100% {
    filter: drop-shadow(3px 5px 0px rgba(0,0,0,0.55)) drop-shadow(0 0 10px rgba(255,64,129,0.35))
  }
  50% {
    filter: drop-shadow(3px 7px 0px rgba(0,0,0,0.4)) drop-shadow(0 0 24px rgba(132,255,255,0.75))
  }
}
.plataforma-android-juego .bienvenida-kkr-logo-img {
  animation: kkrLogoOla 4.2s ease-in-out infinite;
  will-change: transform
}
@media (prefers-reduced-motion: reduce) {
  .bienvenida-kkr-logo-img {
    animation: none
  }
}
.cmd-bienvenida-sin-marco {
  background: none !important;
  border: none !important;
  box-shadow: none !important
}
.cmd-bienvenida-sin-marco.visible {
  opacity: 1 !important
}
#bienvenida-cmd-kkr {
  box-sizing: border-box;
  display: flex;
  flex-direction: column
}
#bienvenida-cmd-kkr .cmd-cuerpo-kawaii {
  flex: 1 1 auto
}
.cmd-bienvenida-sin-marco .cmd-titulo-kawaii {
  display: none !important
}
.cmd-bienvenida-sin-marco .cmd-cuerpo-kawaii {
  background: none !important;
  padding: 0 !important;
  min-height: 0 !important
}
.cmd-bienvenida-continuar .cmd-bienvenida-resultado:last-child {
  animation: respirarInvitacion 1.6s ease-in-out infinite
}
.cmd-bienvenida-mascotas {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, calc(var(--lado-logo-kkr, 300px) / 30), 18px)
}
.cmd-bienvenida-mascota-cara {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: calc(clamp(9px, calc((var(--lado-logo-kkr, 300px) - 70px) / 25), 22px) * var(--mascota-escala, 1));
  color: #FFD1E3;
  text-shadow: 2px 2px 0px #000;
  animation: bienvenidaMascotaRebote 0.9s ease-in-out infinite
}
.cmd-bienvenida-mascota-cara:nth-child(3n+1) {
  color: #FF80AB;
  animation-delay: 0s
}
.cmd-bienvenida-mascota-cara:nth-child(3n+2) {
  color: #84FFFF;
  animation-delay: 0s
}
.cmd-bienvenida-mascota-cara:nth-child(3n) {
  color: #FFF59D;
  animation-delay: 0s
}
@keyframes bienvenidaMascotaRebote {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg)
  }
  50% {
    transform: translateY(-6px) rotate(3deg)
  }
}
@keyframes bienvenidaTituloFlotar {
  0%,
  100% {
    transform: translateY(0px) rotate(-1.2deg)
  }
  50% {
    transform: translateY(-9px) rotate(1.2deg)
  }
}
.bienvenida-icono-tecla {
  display: inline-block;
  animation: bienvenidaIconoRebote 1.2s ease-in-out infinite
}
.bienvenida-icono-tecla:nth-of-type(2) {
  animation-delay: 0.3s
}
@keyframes bienvenidaIconoRebote {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-3px)
  }
}
@media (max-width: 640px) {
  .cmd-bienvenida-titulo {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(92 * var(--vw, 1vw)) !important
  }
  .cmd-bienvenida-continuar {
    width: fit-content !important;
    min-width: 260px !important;
    max-width: calc(92 * var(--vw, 1vw)) !important
  }
  .cmd-bienvenida-titulo .cmd-cuerpo-kawaii {
    font-size: 10px;
    padding: 8px 12px
  }
  .cmd-bienvenida-continuar .cmd-cuerpo-kawaii {
    font-size: 10px;
    padding: 6px 12px
  }
  .cmd-bienvenida-nombre {
    font-size: 20px !important;
    white-space: normal !important
  }
}
@keyframes parpadeo {
  from {
    opacity: 0.4
  }
  to {
    opacity: 1
  }
}
@keyframes respirarInvitacion {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1)
  }
  50% {
    opacity: 1;
    transform: scale(1.045)
  }
}
#pantalla-boot-koreos {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: #000000;
  z-index: 99999;
  overflow: hidden;
  container-type: size
}
#boot-fase-terminal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  box-sizing: border-box;
  padding: 3cqh 3.2cqw;
  display: flex;
  flex-direction: column;
  font-family: 'Pixelify Sans','Consolas','Courier New',monospace;
  font-size: clamp(10px,min(2.1cqh,3.6cqw),22px);
  line-height: 1.3;
  color: #33FF66;
  text-shadow: 0 0 0.4em rgba(51,255,102,0.55)
}
#boot-koreos-texto {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start
}
#boot-koreos-gato-arte {
  position: absolute;
  top: 3cqh;
  right: 3.2cqw;
  margin: 0;
  font-family: 'Consolas','DejaVu Sans Mono',monospace;
  font-size: clamp(4px,min(1cqw,1.7cqh),9px);
  line-height: 1.05;
  white-space: pre;
  color: #33FF66;
  opacity: 0.85;
  clip-path: inset(0 0 100% 0);
  pointer-events: none
}
#boot-koreos-barra-texto {
  margin-top: 1.1em;
  display: flex;
  align-items: center;
  gap: 0.8em
}
.boot-fila {
  display: flex;
  align-items: center
}
.boot-fila-etq {
  min-width: 0;
  flex: 0 0 auto
}
.boot-fila > div:last-child {
  flex: 0 0 auto
}
.boot-fila-guia {
  align-self: flex-end;
  flex: 1;
  min-width: 8px;
  border-bottom: 1px dotted #33FF66;
  opacity: 0.4
}
.boot-notas {
  display: flex;
  align-items: center
}
.boot-notas i {
  display: block;
  opacity: 0.16;
  transform: scale(0.7);
  transition: opacity 0.15s linear,transform 0.18s steps(3)
}
.boot-notas i.on {
  opacity: 1;
  transform: scale(1)
}
.boot-notas i svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible
}
.boot-barra-celdas {
  gap: 0.2em
}
.boot-barra-celdas i {
  width: 9px
}
.boot-cab {
  color: #F8BBD0;
  text-shadow: 0 0 0.5cqw rgba(248,187,208,0.6)
}
.boot-ok {
  color: #69F0AE
}
.boot-aviso {
  color: #FFE57F;
  text-shadow: 0 0 0.5cqw rgba(255,229,127,0.6)
}
.boot-info {
  color: #B3E5FC
}
.boot-cursor {
  display: inline-block;
  flex: none;
  background: #33FF66;
  animation: bootParpadeo 1s steps(1) infinite
}
@keyframes bootParpadeo {
  50% {
    opacity: 0
  }
}
#boot-fase-xp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none
}
#boot-cubos-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
#boot-cubos-barra {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 36cqw;
  min-width: 180px;
  transform: translateX(-50%);
  gap: 0.5cqw;
  opacity: 0;
  transition: opacity 0.4s
}
#boot-cubos-barra.visible {
  opacity: 1
}
#boot-cubos-barra i {
  flex: 1
}
#boot-koreos-subtexto {
  position: absolute;
  left: 0;
  right: 0;
  top: 67%;
  margin: 0;
  text-align: center;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: max(11px,1.5cqw);
  letter-spacing: 1px;
  color: #AAAAAA
}
#boot-koreos-titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}
#menu-cmd-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1
}
.cmd-flotante-kawaii {
  position: absolute;
  min-width: 150px;
  max-width: 220px;
  background: #0D0D0D;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  font-family: 'Consolas','Courier New',monospace;
  font-size: 10px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease,transform 0.6s ease;
  overflow: hidden
}
.cmd-flotante-kawaii.visible {
  opacity: 0.85;
  transform: translateY(0)
}
.cmd-flotante-kawaii .cmd-titulo-kawaii {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 10px;
  color: #FFFDE7;
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  background: #FF4081
}
.cmd-flotante-kawaii .cmd-cuerpo-kawaii {
  padding: 5px 7px;
  color: #69F0AE;
  white-space: pre-wrap
}
.cmd-flotante-kawaii.tema-menta .cmd-titulo-kawaii {
  background: #00BCD4
}
.cmd-flotante-kawaii.tema-menta .cmd-cuerpo-kawaii {
  color: #84FFFF
}
.cmd-flotante-kawaii.tema-lila .cmd-titulo-kawaii {
  background: #AB47BC
}
.cmd-flotante-kawaii.tema-lila .cmd-cuerpo-kawaii {
  color: #E1BEE7
}
.cmd-flotante-kawaii.tema-rosa .cmd-titulo-kawaii {
  background: #FF4081
}
.cmd-flotante-kawaii.cmd-ascii-arte {
  max-width: 210px
}
.cmd-flotante-kawaii.cmd-ascii-arte .cmd-cuerpo-kawaii {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans','Noto Sans Symbols',sans-serif;
  font-size: 11px;
  line-height: 1.35;
  white-space: pre;
  letter-spacing: 0;
  overflow: hidden
}
.cmd-flotante-kawaii.cmd-ascii-arte.cmd-ascii-arte-imagen-cont {
  max-width: none;
  width: auto
}
.cmd-cuerpo-arte-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px
}
.cmd-ascii-arte-imagen {
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center
}
.cmd-flotante-kawaii.cmd-ascii-arte.cmd-ascii-arte-grande {
  max-width: 230px
}
.cmd-flotante-kawaii.cmd-ascii-arte.cmd-ascii-arte-grande .cmd-cuerpo-kawaii {
  font-family: 'Consolas','Courier New',monospace;
  font-size: 7px;
  line-height: 1.05
}
@media (max-width: 640px) {
  .cmd-flotante-kawaii.cmd-ascii-arte .cmd-cuerpo-kawaii {
    font-size: 9px
  }
  .cmd-flotante-kawaii.cmd-ascii-arte.cmd-ascii-arte-grande .cmd-cuerpo-kawaii {
    font-size: 6px
  }
}
.cmd-orejas-kawaii {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 0.85;
  font-size: 6px;
  white-space: pre;
  pointer-events: none;
  color: #FF4081
}
.cmd-flotante-kawaii.tema-menta .cmd-orejas-kawaii {
  color: #00BCD4
}
.cmd-flotante-kawaii.tema-lila .cmd-orejas-kawaii {
  color: #AB47BC
}
.cmd-flotante-kawaii.tema-rosa .cmd-orejas-kawaii {
  color: #FF4081
}
.cmd-flotante-kawaii.cmd-mascota-grande {
  min-width: 170px;
  max-width: 230px
}
.cmd-flotante-kawaii.cmd-mascota-grande .cmd-titulo-kawaii {
  font-size: 11px
}
.cmd-flotante-kawaii.cmd-mascota-grande .cmd-cuerpo-mascota-flotante {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px
}
.cmd-mascota-flotante-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.05;
  text-align: center;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid #222;
  border-radius: 50%;
  box-shadow: 2px 2px 0px #222;
  transform-origin: 50% 80%;
  animation: cmdMascotaFlotanteIdle 2.2s ease-in-out infinite
}
@keyframes cmdMascotaFlotanteIdle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }
  30% {
    transform: translateY(-3px) rotate(-5deg)
  }
  60% {
    transform: translateY(0) rotate(4deg)
  }
}
.cmd-mascota-flotante-nombre {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 9px;
  color: inherit;
  opacity: 0.85
}
.cmd-flotante-kawaii.tema-rosa .cmd-cuerpo-kawaii {
  color: #FFD1E3
}
.cmd-flotante-kawaii.tema-error {
  border-color: #B71C1C;
  box-shadow: 3px 3px 0px #B71C1C
}
.cmd-flotante-kawaii.tema-error .cmd-titulo-kawaii {
  background: #D32F2F;
  color: #FFEBEE
}
.cmd-flotante-kawaii.tema-error .cmd-cuerpo-kawaii {
  color: #FF8A80
}
.cmd-flotante-kawaii.tema-error.visible {
  animation: parpadeoCmdError 1.6s ease-in-out infinite
}
.cmd-flotante-kawaii.glitch-entrada {
  animation: glitchNoticiaEntrada 0.5s steps(3,end) both
}
.cmd-flotante-kawaii.glitch-salida {
  animation: glitchNoticiaSalida 0.42s steps(3,end) both
}
.cmd-flotante-kawaii.tema-error.glitch-entrada {
  animation: glitchNoticiaEntrada 0.5s steps(3,end) both,parpadeoCmdError 1.6s ease-in-out 0.5s infinite
}
.cmd-flotante-kawaii.cmd-anuncio-falso {
  min-width: 190px;
  max-width: 240px;
  border: 3px solid #FFD700;
  box-shadow: 4px 4px 0px #FF4081,0 0 16px rgba(255,215,0,0.6)
}
.cmd-flotante-kawaii.tema-anuncio .cmd-titulo-kawaii {
  background-image: repeating-linear-gradient(-45deg,#FF4081 0px,#FF4081 10px,#FFD700 10px,#FFD700 20px);
  background-size: 28px 28px;
  color: #1A0033;
  font-weight: bold;
  text-shadow: 1px 1px 0px #FFFFFF;
  animation: anuncioFalsoTituloRayas 0.9s linear infinite
}
.cmd-flotante-kawaii.tema-anuncio .cmd-cuerpo-kawaii {
  background: linear-gradient(160deg,#FFF9C4 0%,#F8BBD0 100%);
  color: #1A0033;
  padding: 0
}
@keyframes anuncioFalsoTituloRayas {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: -28px 0
  }
}
.cmd-cuerpo-anuncio-falso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 0 9px
}
.anuncio-falso-marquee-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: #1A0033;
  padding: 3px 0;
  border-bottom: 2px dashed #FFD700
}
.anuncio-falso-marquee {
  display: inline-block;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #FFD700;
  padding-left: 100%;
  animation: anuncioFalsoMarquee 4.5s linear infinite
}
@keyframes anuncioFalsoMarquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}
.anuncio-falso-premio {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 2px 10px;
  color: #AB47BC;
  text-shadow: 1px 1px 0px #FFFFFF;
  animation: anuncioFalsoRebote 0.6s ease-in-out infinite
}
@keyframes anuncioFalsoRebote {
  0%,100% {
    transform: scale(1) rotate(-1deg)
  }
  50% {
    transform: scale(1.12) rotate(1deg)
  }
}
.anuncio-falso-boton {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #FFFDE7;
  background: #FF4081;
  border: 2px solid #AD1457;
  box-shadow: 2px 2px 0px #AD1457;
  padding: 4px 10px;
  border-radius: 4px;
  animation: anuncioFalsoBotonParpadeo 0.7s steps(1,end) infinite
}
@keyframes anuncioFalsoBotonParpadeo {
  0%,49% {
    background: #FF4081
  }
  50%,100% {
    background: #00BCD4
  }
}
.anuncio-falso-letra-chica {
  font-size: 6px;
  color: #4A148C;
  opacity: 0.75;
  text-align: center;
  padding: 0 8px
}
.cmd-flotante-kawaii.tema-anuncio.visible {
  animation: anuncioFalsoSacudida 0.3s ease-in-out infinite
}
@keyframes anuncioFalsoSacudida {
  0%,100% {
    transform: translateY(0) rotate(0deg)
  }
  25% {
    transform: translateY(-1px) rotate(-0.6deg)
  }
  75% {
    transform: translateY(1px) rotate(0.6deg)
  }
}
@keyframes parpadeoCmdError {
  0%,
  100% {
    opacity: 0.85
  }
  50% {
    opacity: 0.55
  }
}
@keyframes glitchNoticiaEntrada {
  0% {
    opacity: 0;
    transform: translate(-8px,0) skewX(8deg);
    clip-path: inset(0 0 60% 0);
    filter: brightness(2) saturate(0) hue-rotate(90deg)
  }
  12% {
    opacity: 1;
    transform: translate(6px,0) skewX(-6deg);
    clip-path: inset(45% 0 0 0)
  }
  24% {
    opacity: 0.25;
    transform: translate(-5px,0);
    clip-path: inset(0 35% 0 0)
  }
  36% {
    opacity: 1;
    transform: translate(4px,0) skewX(4deg);
    clip-path: inset(0 0 25% 0);
    filter: brightness(1.6) saturate(0.2)
  }
  50% {
    opacity: 0.4;
    transform: translate(-6px,0);
    clip-path: inset(15% 0 0 45%)
  }
  65% {
    opacity: 1;
    transform: translate(0,0) skewX(-2deg);
    clip-path: inset(0);
    filter: brightness(1.2) saturate(0.6)
  }
  82% {
    opacity: 0.85;
    transform: translate(2px,0)
  }
  100% {
    opacity: 1;
    transform: translate(0,0) skewX(0deg);
    clip-path: inset(0);
    filter: none
  }
}
@keyframes glitchLivianoEntrada {
  0% {
    opacity: 0;
    transform: translate(-8px,0) skewX(8deg)
  }
  24% {
    opacity: 0.25;
    transform: translate(-5px,0)
  }
  50% {
    opacity: 0.4;
    transform: translate(-6px,0)
  }
  65% {
    opacity: 1;
    transform: translate(0,0) skewX(-2deg)
  }
  100% {
    opacity: 1;
    transform: translate(0,0) skewX(0deg)
  }
}
@keyframes glitchLivianoSalida {
  0% {
    opacity: 1;
    transform: translate(0,0)
  }
  30% {
    opacity: 1;
    transform: translate(-6px,0)
  }
  45% {
    opacity: 0.3;
    transform: translate(7px,0) skewX(-6deg)
  }
  100% {
    opacity: 0;
    transform: translate(6px,0)
  }
}
.plataforma-android-juego .cmd-flotante-kawaii.glitch-entrada,
.plataforma-android-juego .cmd-noticia-gato.glitch-entrada {
  animation: glitchLivianoEntrada 0.5s steps(3,end) both
}
.plataforma-android-juego .cmd-flotante-kawaii.glitch-salida,
.plataforma-android-juego .cmd-noticia-gato.glitch-salida {
  animation: glitchLivianoSalida 0.42s steps(3,end) both
}
.plataforma-android-juego .cmd-flotante-kawaii.tema-error.glitch-entrada {
  animation: glitchLivianoEntrada 0.5s steps(3,end) both,parpadeoCmdError 1.6s ease-in-out 0.5s infinite
}
@keyframes glitchNoticiaSalida {
  0% {
    opacity: 1;
    transform: translate(0,0);
    clip-path: inset(0);
    filter: none
  }
  15% {
    opacity: 0.55;
    transform: translate(5px,0) skewX(4deg);
    clip-path: inset(0 0 30% 0);
    filter: brightness(1.5) saturate(0.3)
  }
  30% {
    opacity: 1;
    transform: translate(-6px,0);
    clip-path: inset(22% 40% 0 0)
  }
  45% {
    opacity: 0.3;
    transform: translate(7px,0) skewX(-6deg);
    clip-path: inset(0 0 0 50%)
  }
  60% {
    opacity: 0.8;
    transform: translate(-4px,0);
    clip-path: inset(50% 0 0 0)
  }
  75% {
    opacity: 0.2;
    transform: translate(6px,0) skewX(7deg);
    filter: brightness(2.2) saturate(0)
  }
  100% {
    opacity: 0;
    transform: translate(0,0) scaleY(0.15);
    clip-path: inset(0 0 100% 0)
  }
}
.cmd-noticia-gato {
  position: absolute;
  min-width: 260px;
  max-width: 340px;
  background: #0D0D0D;
  border: 2px solid #FF1744;
  box-shadow: 3px 3px 0px #222222,0 0 14px rgba(255,23,68,0.55);
  font-family: 'Consolas','Courier New',monospace;
  overflow: hidden;
  pointer-events: none
}
.cmd-noticia-gato.glitch-entrada {
  animation: glitchNoticiaEntrada 0.5s steps(3,end) both
}
.cmd-noticia-gato.glitch-salida {
  animation: glitchNoticiaSalida 0.42s steps(3,end) both
}
.cmd-noticia-gato .cmd-titulo-kawaii-noticia {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #FFFDE7;
  padding: 4px 7px;
  display: flex;
  justify-content: space-between;
  background: #FF1744
}
.cmd-noticia-gato .cmd-cuerpo-noticia {
  padding: 8px 10px;
  color: #69F0AE;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal
}
.cmd-noticia-gato .cmd-cuerpo-noticia b {
  display: block;
  color: #FFEB3B;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-bottom: 3px
}
.cmd-titulo-widget {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  color: #FFFDE7;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  background: #FF4081;
  letter-spacing: 0.5px
}
.cmd-cuerpo-widget {
  padding: 8px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Consolas','Courier New',monospace
}
#menu-cmd-fondo {
  z-index: -1
}
#menu-principal {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9000;
  opacity: 0;
  display: none;
  transition: opacity 0.5s ease
}
#menu-principal h2 {
  font-size: 48px;
  color: #FF4081;
  margin-bottom: 20px;
  text-shadow: 3px 3px 0px #000000;
  background: #FFFDE7;
  padding: 8px 25px;
  border: 3px solid #222;
  box-shadow: 4px 4px 0px #222
}
#fondo-menu-personalizado {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: -2;
  transition: opacity 0.3s ease
}
#fondo-menu-personalizado.activo {
  opacity: 0.35
}
.rombo-gigante-fondo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  background: transparent;
  border: 6px solid rgba(34,34,34,0.65);
  box-sizing: border-box;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(45deg) scale(1);
  transform-origin: center center;
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.08s linear,opacity 0.08s linear;
  will-change: transform,opacity
}
.rombo-gigante-fondo-2 {
  width: 680px;
  height: 680px;
  background: transparent;
  border-width: 5px;
  opacity: 0.8
}
.rombo-gigante-bienvenida {
  opacity: 0.75;
  border-width: 5px
}
.rombo-olas-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none
}
.contenedor-botones-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  margin: 0 auto;
  width: max-content;
  transform-origin: center bottom;
  scale: var(--escala-ui-juego, 1);
  display: flex;
  flex-direction: row;
  gap: 18px;
  z-index: 9050
}
.contenedor-botones-menu .btn-menu-grande {
  width: 190px;
  padding: 18px 12px;
  font-size: 17px;
  white-space: nowrap;
  transform-origin: center bottom
}
.contenedor-botones-menu .btn-menu-grande:hover {
  animation: saltoGiroBotonMenu 0.9s ease-in-out infinite
}
@keyframes saltoGiroBotonMenu {
  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }
  25% {
    transform: translateY(-4px) rotate(-2.5deg)
  }
  50% {
    transform: translateY(-1px) rotate(0deg)
  }
  75% {
    transform: translateY(-4px) rotate(2.5deg)
  }
}
@media (max-width: 640px) {
  .contenedor-botones-menu {
    position: static;
    transform: none;
    flex-direction: column;
    width: 320px;
    max-width: calc(calc(100 * var(--vw, 1vw)) - 40px);
    gap: 15px
  }
  .contenedor-botones-menu .btn-menu-grande {
    width: auto;
    min-height: 48px;
    padding: 18px 24px;
    font-size: 21px;
    white-space: normal
  }
}
.btn-menu-grande {
  padding: 15px 20px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 0px;
  border: 3px solid #222222;
  cursor: pointer;
  transition: all 0.1s ease;
  color: #222222;
  background-color: #FFFDE7;
  background-image: radial-gradient(rgba(255,255,255,0.65) 20%, transparent 20%),radial-gradient(rgba(255,255,255,0.65) 20%, transparent 20%);
  background-position: 0 0,5px 5px;
  background-size: 10px 10px;
  box-shadow: 4px 4px 0px #222222;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-menu-jugar {
  background-color: #80DEEA
}
#btn-menu-jugar.foco-teclado {
  background-color: #4DD0E1 !important
}
.btn-menu-sala-mp {
  background-color: #CE93D8
}
#btn-menu-sala-mp.foco-teclado {
  background-color: #BA68C8 !important
}
.btn-menu-editar {
  background-color: #FFD54F
}
#btn-menu-editar.foco-teclado {
  background-color: #FFCA28 !important
}
.btn-menu-cargar {
  background-color: #CE93D8
}
#btn-menu-cargar.foco-teclado {
  background-color: #BA68C8 !important
}
.btn-menu-config {
  background-color: #A5D6A7
}
#btn-menu-config.foco-teclado {
  background-color: #81C784 !important
}
#widget-reproductor-y2k {
  width: 320px;
  background: #0D0D0D;
  border: 2px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden
}
#widget-reproductor-y2k .cmd-titulo-widget {
  background: #00BCD4
}
.reproductor-pantalla-eq {
  background: #050505;
  border: 2px solid #00BCD4;
  margin: 10px 10px 0 10px;
  height: 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden
}
#canvas-eq-visualizer {
  width: 100%;
  height: 100%;
  display: block
}
.reproductor-info-cancion {
  font-family: 'Consolas','Courier New',monospace;
  font-size: 12px;
  font-weight: bold;
  color: #84FFFF;
  text-align: center;
  padding: 8px 10px 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.reproductor-controles-botones {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 10px 10px 10px
}
.btn-player-y2k {
  font-family: 'Consolas','Courier New',monospace;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: bold;
  background: #0D0D0D;
  color: #69F0AE;
  border: 2px solid #444;
  box-shadow: 2px 2px 0px #000;
  cursor: pointer
}
.btn-player-y2k:hover {
  background: #1A1A1A;
  border-color: #00BCD4;
  color: #84FFFF
}
#panel-menu-perfil {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: calc(calc(100 * var(--vw, 1vw)) - 50px);
  box-sizing: border-box;
  transform-origin: left top;
  scale: max(var(--escala-ui-juego, 1), 0.62)
}
#fila-carnet-mascota-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px
}
#carnet-perfil-menu {
  width: 132px;
  max-width: 100%;
  min-height: 0;
  padding: 28px 6px;
  gap: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s ease,color 0.25s ease
}
#carnet-perfil-menu .carnet-perfil-avatar {
  width: 90px;
  height: 72px;
  font-size: 15px
}
#carnet-perfil-menu .carnet-perfil-datos {
  display: none
}
#carnet-perfil-menu.carnet-perfil-menu-expandido {
  width: 460px;
  max-width: calc(calc(100 * var(--vw, 1vw)) - 50px);
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 16px 16px 16px 28px;
  gap: 16px
}
#carnet-perfil-menu.carnet-perfil-menu-expandido .carnet-perfil-datos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px
}
#carnet-perfil-menu.carnet-perfil-menu-expandido .carnet-perfil-nombre {
  font-size: 19px
}
#carnet-perfil-menu.carnet-perfil-menu-expandido .carnet-perfil-sub {
  font-size: 12px;
  gap: 8px
}
#carnet-perfil-menu.carnet-perfil-menu-expandido .carnet-perfil-medallas span {
  font-size: 17px
}
#widget-perfil-jugador {
  width: 230px;
  background: #0D0D0D;
  border: 2px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  box-sizing: border-box;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  overflow: hidden
}
#widget-perfil-jugador .cmd-titulo-widget {
  background: #AB47BC
}
#widget-perfil-jugador .cmd-cuerpo-widget {
  gap: 6px
}
.perfil-info-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #E1BEE7;
  white-space: nowrap;
  overflow: hidden
}
.perfil-info-linea span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 6px
}
.perfil-info-linea span:last-child {
  flex-shrink: 0;
  color: #84FFFF;
  font-size: 11px
}
.barra-xp-contenedor {
  width: 100%;
  height: 10px;
  background: #1A1A1A;
  border: 2px solid #444;
  box-sizing: border-box;
  overflow: hidden
}
#widget-perfil-jugador .barra-xp-contenedor {
  width: 100%;
  height: 10px;
  background: #1A1A1A;
  border: 2px solid #444;
  box-sizing: border-box;
  overflow: hidden
}
.barra-xp-relleno {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00E5FF, #FF4081, #00E5FF);
  background-size: 200% 100%;
  animation: brillo-nivel-plus 4s linear infinite;
  transition: width 0.4s ease
}
.barra-xp-relleno-mascota {
  background: linear-gradient(90deg, #FFB74D, #FF4081, #FFB74D);
  background-size: 200% 100%
}
#widget-perfil-jugador .barra-xp-relleno {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00E5FF, #FF4081, #00E5FF);
  background-size: 200% 100%;
  animation: brillo-nivel-plus 4s linear infinite;
  transition: width 0.4s ease
}
#widget-perfil-jugador .texto-perfil-xp-mini {
  color: #69F0AE;
  font-family: 'Consolas','Courier New',monospace
}
#widget-perfil-jugador button {
  font-family: 'Consolas','Courier New',monospace;
  font-size: 11px;
  padding: 5px 8px;
  background: #0D0D0D;
  color: #69F0AE;
  border: 2px solid #444;
  box-shadow: 2px 2px 0px #000
}
#widget-perfil-jugador button:hover:not(:disabled) {
  background: #1A1A1A;
  border-color: #AB47BC;
  color: #E1BEE7
}
#pila-patch-notes-menu {
  position: absolute;
  bottom: 25px;
  left: 25px;
  z-index: 9100;
  transform-origin: left bottom;
  scale: var(--escala-ui-juego, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px
}
.fila-tab-patch-notes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px
}
.tab-patch-notes {
  background: #CE93D8;
  color: #222;
  font-size: 12px;
  padding: 8px 14px
}
.tab-patch-notes:hover {
  background: #BA68C8
}
.wrap-btn-nekonews {
  position: relative;
  display: inline-flex
}
.gato-nekonews-arriba {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  margin-bottom: 2px;
  pointer-events: none;
  z-index: 2
}
.gato-nekonews-arriba-salto {
  position: relative;
  width: 100%;
  height: 100%;
  animation: nekoNewsSalto 1.8s ease-in-out infinite
}
.gato-nekonews-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FFCDD2;
  color: #B71C1C;
  border: 2px solid #7a1414;
  font-size: 13px;
  box-shadow: 2px 2px 0px #222222,0 0 8px rgba(255,23,68,0.4)
}
.gato-nekonews-girasol {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 17px;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.35))
}
.gato-nekonews-modal {
  position: relative;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  flex-shrink: 0;
  margin: -6px auto 6px;
  animation: nekoNewsSalto 1.8s ease-in-out infinite
}
.gato-nekonews-modal-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #B3E5FC;
  color: #01579B;
  border: 3px solid #0a3d5c;
  font-size: 12px;
  box-shadow: 3px 3px 0px #222222,0 0 14px rgba(255,23,68,0.4)
}
.gato-nekonews-modal-cara-rojo {
  background: #FFCDD2;
  color: #B71C1C;
  border-color: #7a1414
}
.toast-nativo-icono-nekonews {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0
}
.toast-nekonews-salto {
  position: relative;
  width: 100%;
  height: 100%;
  animation: nekoNewsSalto 1.8s ease-in-out infinite
}
.toast-nekonews-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 7px;
  border: 2px solid #222;
  box-shadow: 1px 1px 0px #222
}
.toast-nekonews-girasol {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 8px;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.35))
}
.tab-buymeacoffee {
  background: #FFDD00;
  color: #222;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 14px;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #7B1FA2;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer
}
.tab-buymeacoffee:hover {
  background: #FFE94D
}
.switch-modo-oscuro-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #CE93D8;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #7B1FA2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 15px
}
.tab-instalar-app {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 9200;
  background: #A5D6A7;
  color: #222;
  font-size: 12px;
  padding: 8px 14px
}
.tab-instalar-app:hover {
  background: #81C784
}
#pila-reproductor-menu {
  position: absolute;
  bottom: 25px;
  right: 25px;
  z-index: 9100;
  width: 320px;
  transform-origin: right bottom;
  scale: var(--escala-ui-juego, 1);
  display: flex;
  flex-direction: column;
  gap: 10px
}
#carrusel-banners-menu {
  width: 100%;
  border: 3px solid #222;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #222;
  background: #FFFDE7;
  overflow: hidden;
  cursor: default;
  box-sizing: border-box;
}
#carrusel-banners-menu.con-enlace {
  cursor: pointer
}
#carrusel-banners-menu .banner-menu-slide {
  display: none;
  position: relative;
  width: 100%
}
#carrusel-banners-menu .banner-menu-slide.activo {
  display: block
}
#carrusel-banners-menu .banner-menu-slide img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover
}
#carrusel-banners-menu .banner-menu-titulo {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 4px 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}
#carrusel-banners-menu .banner-menu-puntos {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 5px 0;
  background: #FFFDE7
}
#carrusel-banners-menu .banner-menu-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E0E0E0;
  border: 1px solid #222
}
#carrusel-banners-menu .banner-menu-punto.activo {
  background: #FF4081
}
.decoracion-flotante-menu {
  background: transparent;
  pointer-events: none;
  display: flex;
  z-index: 9050
}
.decoracion-flotante-menu img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  animation: flotarDecoracionMenu 3s ease-in-out infinite
}
.decoracion-flotante-izquierda {
  align-self: flex-start;
  max-width: 160px;
  max-height: 110px;
  margin-bottom: 15px
}
.decoracion-flotante-banners {
  width: 100%;
  justify-content: center;
  max-height: 110px
}
#widget-corral-menu {
  width: 100%;
  box-sizing: border-box;
}
.corral-mascotas-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(390px, calc(80 * var(--vw, 1vw)));
  height: min(390px, calc(80 * var(--vw, 1vw)));
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  z-index: 9060;
  pointer-events: none
}
@media (max-height: 700px) and (pointer: coarse) {
  .corral-mascotas-centro {
    width: min(285px, calc(70 * var(--vh, 1vh)));
    height: min(285px, calc(70 * var(--vh, 1vh)))
  }
}
@media (max-height: 420px) and (pointer: coarse) {
  .corral-mascotas-centro {
    width: min(105px, calc(27 * var(--vh, 1vh)));
    height: min(105px, calc(27 * var(--vh, 1vh)))
  }
  .cmd-flotante-kawaii {
    display: none !important
  }
  #panel-menu-perfil {
    top: 8px;
    left: 8px
  }
  #pila-patch-notes-menu {
    bottom: 8px;
    left: 8px
  }
  #pila-reproductor-menu {
    bottom: 8px;
    right: 8px
  }
  .contenedor-botones-menu {
    bottom: 8px
  }
}
.decoracion-flotante-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  max-width: 220px;
  max-height: 220px
}
@keyframes flotarDecoracionMenu {
  0%,
  100% {
    transform: translateY(0px)
  }
  50% {
    transform: translateY(-10px)
  }
}
#modal-perfiles,
#panel-patch-notes,
#modal-estadisticas,
#modal-historial-partidas,
#modal-pase,
#modal-cuenta,
#modal-tutorial,
#modal-gpu-software,
#modal-elegir-editar {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9700
}
#modal-perfiles,
#panel-patch-notes,
#modal-estadisticas,
#modal-historial-partidas,
#modal-pase,
#modal-cuenta,
#modal-tutorial,
#modal-elegir-editar,
#modal-catalogo-kkr,
#modal-seleccionar-dificultad,
#modal-config-opciones,
#modal-cuenta-online,
#modal-amigos,
#modal-sala-mp,
#modal-reportar-mapa,
#modal-reportar-bug {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain
}
#modal-elegir-editar .tarjeta-modal {
  scale: max(var(--escala-ui-juego, 1), 0.85)
}
#modal-tutorial {
  z-index: 9800
}
.paso-tutorial-titulo {
  font-weight: bold;
  color: #D81B60;
  font-size: 18px;
  margin: 0 0 8px 0;
  font-family: 'Pixelify Sans',sans-serif
}
.paso-tutorial-nota-ejemplo {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #F06292;
  border: 2px solid #222;
  vertical-align: middle;
  margin: 0 9px 0 3px;
  box-sizing: border-box;
  transform: rotate(45deg)
}
.paso-tutorial-nota-swap {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: linear-gradient(to bottom, #FF4081 50%, #00BCD4 50%);
  border: 2px solid #222;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  vertical-align: middle;
  margin: 0 9px -3px 3px;
  box-sizing: border-box;
}
.paso-tutorial-nota-trampa {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #222;
  vertical-align: middle;
  margin: 0 9px 0 3px;
  box-sizing: border-box;
  transform: rotate(45deg);
  overflow: hidden;
  animation: glitchNotaTrampa 0.5s steps(1) infinite
}
.paso-tutorial-nota-trampa::before,
.paso-tutorial-nota-trampa::after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  left: 50%;
  top: 50%;
  box-shadow: 0 0 0 1px #222
}
.paso-tutorial-nota-trampa::before {
  width: 150%;
  height: 2px;
  transform: translate(-50%,-50%)
}
.paso-tutorial-nota-trampa::after {
  width: 2px;
  height: 150%;
  transform: translate(-50%,-50%)
}
@keyframes glitchNotaTrampa {
  0% {
    background: #FF4081
  }
  20% {
    background: #00BCD4
  }
  40% {
    background: #FFD54F
  }
  60% {
    background: #76FF03
  }
  80% {
    background: #CE93D8
  }
  100% {
    background: #FF4081
  }
}
.punto-paso-tutorial {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #CFD8DC;
  border: 1px solid #222;
  box-sizing: border-box;
}
.punto-paso-tutorial.activo {
  background: #F06292
}
#btn-abrir-estadisticas {
  font-family: 'Consolas','Courier New',monospace;
  font-size: 11px;
  padding: 5px 8px;
  background: #0D0D0D;
  color: #69F0AE;
  border: 2px solid #444;
  box-shadow: 2px 2px 0px #000
}
#btn-abrir-estadisticas:hover:hover {
  background: #1A1A1A;
  border-color: #AB47BC;
  color: #E1BEE7
}
#btn-abrir-perfiles,
#btn-cuenta-online,
#btn-amigos,
#btn-abrir-estadisticas {
  transition: transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease,border-color 0.15s ease,color 0.15s ease
}
#btn-abrir-perfiles:hover:not(:disabled),
#btn-cuenta-online:hover:not(:disabled),
#btn-amigos:hover:not(:disabled),
#btn-abrir-estadisticas:hover:not(:disabled):hover:not(:disabled) {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 2px 4px 0px #000,0 0 10px rgba(171, 71, 188, 0.8)
}
#btn-abrir-perfiles:active:not(:disabled),
#btn-cuenta-online:active:not(:disabled),
#btn-amigos:active:not(:disabled),
#btn-abrir-estadisticas:active:not(:disabled):active:not(:disabled) {
  transform: translate(1px, 1px) scale(1);
  box-shadow: 1px 1px 0px #000
}
.tarjeta-logro {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  box-sizing: border-box;
  transition: opacity 0.2s ease,filter 0.2s ease
}
.tarjeta-logro.bloqueado {
  opacity: 0.45;
  filter: grayscale(1)
}
.tarjeta-logro .logro-icono {
  font-size: 26px;
  line-height: 1
}
.tarjeta-logro .logro-nombre {
  font-size: 11px;
  font-weight: bold;
  color: #D81B60
}
.tarjeta-logro .logro-desc {
  font-size: 10px;
  color: #666
}
.tarjeta-pase-clickeable {
  cursor: pointer;
  transition: transform 0.15s ease,box-shadow 0.15s ease
}
.tarjeta-pase-clickeable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px #222
}
.tarjeta-pase-bloqueada {
  position: relative;
  opacity: 0.7;
  filter: saturate(0.55)
}
.tarjeta-pase-comprable {
  cursor: pointer;
  position: relative;
  border-color: #0288D1;
  box-shadow: 2px 2px 0px #0288D1;
  transition: transform 0.15s ease,box-shadow 0.15s ease
}
.tarjeta-pase-comprable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px #0288D1
}
.tarjeta-pase-comprable .logro-desc {
  color: #0277BD;
  font-weight: bold
}
.tarjeta-pase-candado {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px
}
.tarjeta-pase-equipada {
  background: linear-gradient(135deg, #C8E6C9 0%, #FFF9C4 100%);
  border-color: #2E7D32
}
.tarjeta-pase-equipada .logro-nombre {
  color: #2E7D32
}
.selector-pases-temporada {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px
}
.chip-pase-selector {
  font-size: 11px;
  padding: 4px 8px
}
.chip-pase-selector.vista {
  background: #FFECB3;
  box-shadow: 3px 3px 0px #222222
}
.selector-color-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px
}
.carnet-perfil-y2k {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 104px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #FFFDE7, #FFF3E0);
  border: none;
  --borde-grosor-actual: 3px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden
}
.carnet-perfil-y2k::before {
  content: "";
  position: absolute;
  top: calc(var(--borde-grosor-actual, 3px) + 3px);
  left: calc(var(--borde-grosor-actual, 3px) + 3px);
  right: calc(var(--borde-grosor-actual, 3px) + 3px);
  height: 6px;
  background: var(--franja-carnet, #222222)
}
.carnet-perfil-avatar {
  width: 78px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 1.15;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 3px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222222;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  transition: border-radius .15s ease,clip-path .15s ease,background .15s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none
}
.swatch-forma-carita-demo {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-sizing: border-box;
}
.carnet-borde-animado-overlay {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1
}
.carnet-borde-animado-overlay.borde-anim-pulso,
.swatch-borde-carnet-demo.borde-anim-pulso,
.estilo-fila-demo-borde.borde-anim-pulso {
  animation: bordeCarnetPulso var(--borde-anim-duracion, 2.2s) ease-in-out infinite
}
.carnet-borde-animado-overlay.borde-anim-arcoiris,
.swatch-borde-carnet-demo.borde-anim-arcoiris,
.estilo-fila-demo-borde.borde-anim-arcoiris {
  animation: bordeCarnetArcoiris var(--borde-anim-duracion, 3s) linear infinite
}
@keyframes bordeCarnetPulso {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1)
  }
  50% {
    opacity: .72;
    filter: brightness(1.6) saturate(1.35)
  }
}
@keyframes bordeCarnetArcoiris {
  from {
    filter: hue-rotate(0deg)
  }
  to {
    filter: hue-rotate(360deg)
  }
}
.carnet-perfil-y2k.franja-anim-pulso::before,
.swatch-franja-carnet-demo.franja-anim-pulso,
.estilo-fila-demo-franja.franja-anim-pulso {
  animation: franjaCarnetPulso var(--franja-anim-duracion, 2.4s) ease-in-out infinite
}
.carnet-perfil-y2k.franja-anim-arcoiris::before,
.swatch-franja-carnet-demo.franja-anim-arcoiris,
.estilo-fila-demo-franja.franja-anim-arcoiris {
  animation: franjaCarnetArcoiris var(--franja-anim-duracion, 4.5s) linear infinite
}
.carnet-perfil-y2k.franja-anim-desplazamiento::before,
.swatch-franja-carnet-demo.franja-anim-desplazamiento,
.estilo-fila-demo-franja.franja-anim-desplazamiento {
  animation: franjaCarnetDesplazamiento var(--franja-anim-duracion, 1.8s) linear infinite
}
.carnet-perfil-y2k.franja-anim-charter::before,
.swatch-franja-carnet-demo.franja-anim-charter,
.estilo-fila-demo-franja.franja-anim-charter {
  animation: franjaCarnetCharter var(--franja-anim-duracion, 1.6s) linear infinite
}
@keyframes franjaCarnetCharter {
  from {
    background-position-x: 0, 0, 0, 0
  }
  to {
    background-position-x: -48px, 0, 0, 0
  }
}
@keyframes franjaCarnetPulso {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1)
  }
  50% {
    opacity: .55;
    filter: brightness(1.4)
  }
}
@keyframes franjaCarnetArcoiris {
  from {
    filter: hue-rotate(0deg)
  }
  to {
    filter: hue-rotate(360deg)
  }
}
@keyframes franjaCarnetDesplazamiento {
  from {
    background-position-x: 0
  }
  to {
    background-position-x: 84px
  }
}
@keyframes mascotaGestoEstirar {
  0% {
    transform: scale(1, 1)
  }
  30% {
    transform: scale(1.16, 0.84)
  }
  60% {
    transform: scale(0.92, 1.1)
  }
  100% {
    transform: scale(1, 1)
  }
}
.mascota-gesto-estirar {
  display: inline-block;
  animation: mascotaGestoEstirar 0.9s ease-in-out
}
@keyframes mascotaGestoLadeo {
  0% {
    transform: rotate(0deg)
  }
  25% {
    transform: rotate(-9deg)
  }
  55% {
    transform: rotate(7deg)
  }
  80% {
    transform: rotate(-3deg)
  }
  100% {
    transform: rotate(0deg)
  }
}
.mascota-gesto-ladeo {
  display: inline-block;
  animation: mascotaGestoLadeo 1.1s ease-in-out
}
@keyframes mascotaGestoSalto {
  0% {
    transform: translateY(0) scale(1, 1)
  }
  28% {
    transform: translateY(-11px) scale(0.95, 1.08)
  }
  50% {
    transform: translateY(0) scale(1.08, 0.9)
  }
  70% {
    transform: translateY(-4px) scale(0.98, 1.03)
  }
  100% {
    transform: translateY(0) scale(1, 1)
  }
}
.mascota-gesto-salto {
  display: inline-block;
  animation: mascotaGestoSalto 0.8s ease-in-out
}
@keyframes mascotaGestoMeneo {
  0% {
    transform: translateX(0) rotate(0deg)
  }
  20% {
    transform: translateX(-4px) rotate(-4deg)
  }
  40% {
    transform: translateX(4px) rotate(4deg)
  }
  60% {
    transform: translateX(-3px) rotate(-3deg)
  }
  80% {
    transform: translateX(2px) rotate(2deg)
  }
  100% {
    transform: translateX(0) rotate(0deg)
  }
}
.mascota-gesto-meneo {
  display: inline-block;
  animation: mascotaGestoMeneo 0.7s ease-in-out
}
@keyframes mascotaGestoCurioso {
  0% {
    transform: translateY(0) rotate(0deg) scale(1, 1)
  }
  22% {
    transform: translateY(-3px) rotate(-6deg) scale(1.05, 0.97)
  }
  46% {
    transform: translateY(2px) rotate(5deg) scale(0.97, 1.04)
  }
  70% {
    transform: translateY(-2px) rotate(-3deg) scale(1.02, 0.99)
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1, 1)
  }
}
.mascota-gesto-curioso {
  display: inline-block;
  animation: mascotaGestoCurioso 0.85s ease-in-out
}
#mascota-widget-menu {
  position: relative;
  width: 132px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  z-index: 9100;
  padding: 20px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s ease,color 0.25s ease
}
#mascota-widget-menu.mascota-widget-menu-expandido {
  width: 460px;
  max-width: calc(calc(100 * var(--vw, 1vw)) - 50px);
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 16px 16px 16px 23px;
  gap: 16px
}
#fila-carnet-mascota-menu {
  position: relative
}
#mascota-widget-menu-avatar-wrap.mascota-widget-menu-colarse {
  animation: mascotaColarseResorte 0.95s cubic-bezier(.34,1.56,.64,1) both
}
#mascota-widget-menu-avatar-wrap.mascota-widget-menu-colarse-glitch,
.carnet-mascota-avatar-wrap.carnet-mascota-colarse-glitch {
  animation: mascotaColarseGlitch 0.95s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes mascotaColarseGlitch {
  0% {
    transform: translateY(70px) scale(1.7, 0.2) rotate(0deg);
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent)
  }
  6% {
    opacity: 1;
    filter: brightness(2.2) drop-shadow(7px 0 0 #84FFFF) drop-shadow(-7px 0 0 #FF5252)
  }
  12% {
    opacity: .2;
    filter: brightness(1.6) drop-shadow(-6px 2px 0 #FFEA00) drop-shadow(6px -2px 0 #FFFFFF)
  }
  18% {
    opacity: 1;
    filter: brightness(2) drop-shadow(6px -2px 0 #84FFFF) drop-shadow(-6px 2px 0 #FF5252)
  }
  26% {
    opacity: .3;
    filter: brightness(1.3) drop-shadow(-4px 0 0 #FF5252) drop-shadow(4px 0 0 #84FFFF)
  }
  34% {
    opacity: 1;
    transform: translateY(-14px) scale(0.78, 1.32) rotate(-6deg);
    filter: brightness(1.1) drop-shadow(2px -1px 0 #84FFFF) drop-shadow(-2px 1px 0 #FF5252)
  }
  42% {
    filter: none
  }
  50% {
    transform: translateY(6px) scale(1.16, 0.86) rotate(5deg)
  }
  64% {
    transform: translateY(-8px) scale(0.92, 1.12) rotate(-3deg)
  }
  78% {
    transform: translateY(3px) scale(1.05, 0.96) rotate(2deg)
  }
  90% {
    transform: translateY(-2px) scale(0.98, 1.02) rotate(-1deg)
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(0deg);
    opacity: 1;
    filter: none
  }
}
@keyframes mascotaColarseResorte {
  0% {
    transform: translateY(70px) scale(1.7, 0.2) rotate(0deg);
    opacity: 0
  }
  12% {
    opacity: 1
  }
  34% {
    transform: translateY(-14px) scale(0.78, 1.32) rotate(-6deg)
  }
  50% {
    transform: translateY(6px) scale(1.16, 0.86) rotate(5deg)
  }
  64% {
    transform: translateY(-8px) scale(0.92, 1.12) rotate(-3deg)
  }
  78% {
    transform: translateY(3px) scale(1.05, 0.96) rotate(2deg)
  }
  90% {
    transform: translateY(-2px) scale(0.98, 1.02) rotate(-1deg)
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(0deg);
    opacity: 1
  }
}
#mascota-widget-menu-avatar-wrap.carnet-mascota-avatar-wrap {
  width: 88px;
  height: 88px
}
#mascota-widget-menu-avatar-wrap .carnet-mascota-avatar {
  width: 88px;
  height: 88px;
  font-size: 16px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-sombrero {
  top: -19px;
  font-size: 29px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-mono {
  font-size: 20px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq,
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  font-size: 21px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq {
  left: -19px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  right: -19px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap.carnet-mascota-avatar-wrap {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  align-self: flex-start
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .carnet-mascota-avatar {
  width: 88px;
  height: 88px;
  font-size: 16px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-sombrero {
  top: -19px;
  font-size: 29px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-mono {
  font-size: 20px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-datos .carnet-mascota-nombre {
  font-size: 19px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-datos .carnet-mascota-sub {
  font-size: 12px
}
#mascota-widget-menu #mascota-widget-menu-datos .carnet-mascota-sub .px-parrafo-cont {
  max-width: 100%;
  flex-wrap: wrap
}
#mascota-widget-menu-nombre {
  display: none
}
#mascota-widget-menu-datos {
  display: none;
  flex: 1;
  min-width: 0
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-datos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px
}
.mascota-speech-bubble {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 12px;
  width: max-content;
  max-width: 190px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222222;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  border-radius: 10px;
  padding: 6px 10px;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  z-index: 9200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-8px) scale(0.92);
  transition: opacity 0.25s ease,transform 0.25s ease
}
.mascota-speech-bubble.activa {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1)
}
.mascota-speech-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -7px;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid #222222
}
.mascota-speech-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid #FFFFFF;
  z-index: 1
}
@media (max-width: 620px) {
  #mascota-widget-menu {
    position: fixed;
    top: auto;
    left: auto;
    right: 12px;
    bottom: 12px
  }
  .mascota-speech-bubble {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    margin-left: 0;
    margin-right: 10px;
    transform: translateY(-50%) translateX(8px) scale(0.92)
  }
  .mascota-speech-bubble.activa {
    transform: translateY(-50%) translateX(0) scale(1)
  }
  .mascota-speech-bubble::after,
  .mascota-speech-bubble::before {
    display: none
  }
}
.carnet-perfil-datos {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2
}
.carnet-perfil-nombre {
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 0px #222;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0
}
.carnet-perfil-nombre > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0
}
.insignia-charter-verificado {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  color: #063542;
  background: linear-gradient(90deg, #00E5FF, #7C4DFF);
  border: 2px solid #222;
  border-radius: 10px;
  padding: 1px 7px 1px 5px;
  box-shadow: 1px 1px 0px #222;
  text-shadow: none;
  flex-shrink: 0
}
.carnet-perfil-sub {
  font-size: 11px;
  color: inherit;
  opacity: 0.8;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}
.carnet-perfil-rango-fav {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 7px;
  border: 2px solid #222;
  box-shadow: 1px 1px 0px #222;
  background: #FFD54F
}
.carnet-perfil-medallas {
  margin-top: 5px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap
}
.carnet-perfil-medallas span {
  font-size: 13px
}
.carnet-perfil-barra-xp {
  margin-top: 6px
}
.carnet-mascota-barra-xp {
  margin-top: 6px
}
.carnet-perfil-avatar-wrap,
.carnet-mascota-avatar-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none
}
.accesorio-mascota-capa {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  z-index: 5;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.35))
}
.accesorio-mascota-capa.accesorio-sombrero {
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  font-size: 19px
}
.accesorio-mascota-capa.accesorio-mono {
  bottom: -3px;
  right: -6px;
  font-size: 14px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-sombrero {
  top: -15px;
  font-size: 23px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-mono {
  font-size: 16px
}
.accesorio-mascota-capa img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: block
}
@keyframes auraLateralFlotar2fps {
  0% {
    transform: translateY(-50%) translateY(0px)
  }
  50% {
    transform: translateY(-50%) translateY(-5px)
  }
  100% {
    transform: translateY(-50%) translateY(0px)
  }
}
.accesorio-mascota-capa.accesorio-aura-izq,
.accesorio-mascota-capa.accesorio-aura-der {
  top: 50%;
  font-size: 14px;
  z-index: 6;
  animation: auraLateralFlotar2fps 1s steps(1) infinite;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3))
}
.accesorio-mascota-capa.accesorio-aura-izq {
  left: -13px
}
.accesorio-mascota-capa.accesorio-aura-der {
  right: -13px;
  animation-delay: 0.5s
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq,
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  font-size: 17px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq {
  left: -15px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  right: -15px
}
.accesorio-mascota-capa.accesorio-orejas-izq,
.accesorio-mascota-capa.accesorio-orejas-der {
  top: -8px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid currentColor;
  z-index: 1
}
.accesorio-mascota-capa.accesorio-orejas-izq {
  left: 9px;
  transform: rotate(-18deg)
}
.accesorio-mascota-capa.accesorio-orejas-der {
  right: 9px;
  transform: rotate(18deg)
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-izq,
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-der {
  top: -10px;
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom-width: 14px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-izq {
  left: 11px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-der {
  right: 11px
}
.accesorio-mascota-capa.accesorio-orejas-redondas-izq,
.accesorio-mascota-capa.accesorio-orejas-redondas-der {
  top: -9px;
  width: 12px;
  height: 12px;
  background: currentColor;
  border-radius: 50%;
  z-index: 1
}
.accesorio-mascota-capa.accesorio-orejas-redondas-izq {
  left: 6px
}
.accesorio-mascota-capa.accesorio-orejas-redondas-der {
  right: 6px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-izq,
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-der {
  top: -11px;
  width: 15px;
  height: 15px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-izq {
  left: 8px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-der {
  right: 8px
}
.accesorio-mascota-capa.accesorio-orejas-caidas-izq,
.accesorio-mascota-capa.accesorio-orejas-caidas-der {
  top: -6px;
  width: 10px;
  height: 24px;
  background: currentColor;
  border-radius: 50% 50% 50% 50%/55% 55% 100% 100%;
  z-index: 1;
  transform-origin: top center
}
.accesorio-mascota-capa.accesorio-orejas-caidas-izq {
  left: -2px;
  transform: rotate(-26deg)
}
.accesorio-mascota-capa.accesorio-orejas-caidas-der {
  right: -2px;
  transform: rotate(26deg)
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-izq,
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-der {
  top: -8px;
  width: 13px;
  height: 30px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-izq {
  left: -3px
}
.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-der {
  right: -3px
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq,
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  top: -10px;
  font-size: 13px;
  z-index: 5;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3))
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq {
  left: -8px;
  transform: rotate(-12deg)
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  right: -8px;
  transform: scaleX(-1) rotate(-12deg)
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq,
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  font-size: 16px;
  top: -12px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq {
  left: -9px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  right: -9px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq,
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  font-size: 16px;
  top: -12px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq {
  left: -9px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  right: -9px
}
#carnet-mascota-preview .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq,
#carnet-mascota-preview .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  font-size: 13px;
  top: -11px
}
#carnet-mascota-preview .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq {
  left: -8px
}
#carnet-mascota-preview .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  right: -8px
}
.swatch-especie-mascota-nivel {
  display: block;
  font-size: 9px;
  font-weight: bold;
  opacity: 0.7;
  margin-top: 1px
}
.carnet-mascota-y2k {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 104px;
  box-sizing: border-box;
  border: 3px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: visible;
  background: linear-gradient(135deg, #FFFDE7, #FFF3E0);
  color: #222222;
  transition: background 0.25s ease,color 0.25s ease
}
.carnet-mascota-avatar-wrap {
  width: 70px;
  height: 70px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none
}
.carnet-mascota-avatar {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 4px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: visible;
  position: relative;
  z-index: 4;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222222;
  border: 2px solid #222;
  border-radius: 50%;
  box-shadow: 2px 2px 0px #222
}
.carnet-mascota-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none
}
.carnet-mascota-datos {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2
}
.carnet-mascota-nombre {
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0
}
.carnet-mascota-nombre > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0
}
@keyframes mascotaIdleEspecialSway {
  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }
  25% {
    transform: translateY(-3px) rotate(-4deg)
  }
  75% {
    transform: translateY(-1px) rotate(4deg)
  }
}
.mascota-idle-especial {
  animation: mascotaIdleEspecialSway 2.6s ease-in-out infinite
}
@keyframes kkrTituloGatoFlota {
  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }
  25% {
    transform: translateY(-2px) rotate(-6deg)
  }
  50% {
    transform: translateY(0px) rotate(0deg)
  }
  75% {
    transform: translateY(-1px) rotate(6deg)
  }
}
@keyframes kkrTituloGatoParpadeo {
  0%,
  88%,
  100% {
    filter: brightness(1)
  }
  92% {
    filter: brightness(1.6)
  }
  96% {
    filter: brightness(0.85)
  }
}
#bienvenida-titulo-flanqueado {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}
.bienvenida-gato-gigante-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 2
}
.bienvenida-gato-gigante-slot-izq {
  right: 100%;
  margin-right: 10px
}
.bienvenida-gato-gigante-slot-der {
  left: 100%;
  margin-left: 10px
}
.bienvenida-gato-gigante-anim {
  position: relative;
  display: inline-block;
  transform-origin: 50% 80%;
  filter: drop-shadow(2px 5px 0px rgba(0,0,0,0.35));
  animation: kkrTituloGatoFlota 2.4s ease-in-out infinite,kkrTituloGatoParpadeo 4.6s ease-in-out infinite
}
.bienvenida-gato-gigante-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gato-gigante-lado, clamp(88px, calc(20 * var(--vw, 1vw)), 170px));
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: clamp(20px, calc(5 * var(--vw, 1vw)), 34px);
  border: 3px solid #7a1414;
  box-shadow: 3px 3px 0px #222222,0 0 14px rgba(255,23,68,0.4);
  background: #FFCDD2;
  color: #B71C1C
}
.bienvenida-gato-gigante-cara-azul {
  background: #B3E5FC;
  color: #01579B;
  border-color: #0a3d5c
}
.bienvenida-gato-gigante-girasol {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: clamp(17px, calc(4.6 * var(--vw, 1vw)), 28px);
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.35))
}
@media (max-width: 640px) {
  .bienvenida-gato-gigante-slot {
    display: none
  }
}
@keyframes mascotaSaltoFelizBounce {
  0%,
  100% {
    transform: translateY(0)
  }
  30% {
    transform: translateY(-5px)
  }
  50% {
    transform: translateY(0)
  }
  65% {
    transform: translateY(-2px)
  }
}
.mascota-salto-feliz {
  animation: mascotaSaltoFelizBounce 1.8s ease-in-out infinite
}
.mascota-avatar-evolucionada::after {
  box-shadow: 0 0 16px 5px rgba(255,213,79,0.9);
  animation: mascotaEvolucionadaGlow 1.8s ease-in-out infinite
}
@keyframes mascotaEvolucionadaGlow {
  0%,
  100% {
    opacity: 0.55
  }
  50% {
    opacity: 1
  }
}
.mascota-brillos-nivel6 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3
}
.mascota-brillos-nivel6 span {
  position: absolute;
  font-size: 10px;
  opacity: 0;
  line-height: 1
}
.brillo-n6-1 {
  top: -4px;
  left: 6%;
  animation: brilloNivel6Fade 3.4s ease-in-out infinite
}
.brillo-n6-2 {
  top: 42%;
  right: -8px;
  animation: brilloNivel6Fade 3.9s ease-in-out infinite;
  animation-delay: 1.2s
}
.brillo-n6-3 {
  bottom: -2px;
  left: 42%;
  animation: brilloNivel6Fade 3.6s ease-in-out infinite;
  animation-delay: 2.3s
}
@keyframes brilloNivel6Fade {
  0%,
  100% {
    opacity: 0;
    transform: translateY(2px) scale(0.75)
  }
  20% {
    opacity: 0.75;
    transform: translateY(-1px) scale(1)
  }
  55% {
    opacity: 0.75;
    transform: translateY(-5px) scale(1)
  }
  80% {
    opacity: 0;
    transform: translateY(-8px) scale(0.75)
  }
}
.carnet-mascota-sub {
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.85
}
.selector-accesorio-mascota {
  display: grid;
  grid-template-columns: repeat(auto-fill, 52px);
  justify-content: space-between;
  align-items: start;
  gap: 8px 6px;
  margin-top: 4px
}
.selector-accesorio-mascota > .item-preview-mascota-wrap {
  box-sizing: border-box;
  width: 52px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start
}
.selector-accesorio-mascota .item-accesorio-bloqueado {
  width: 100%
}
.selector-accesorio-mascota .etiqueta-exclusivo-charter {
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.selector-accesorio-mascota .btn-vista-previa-ojo {
  right: 1px
}
.selector-accesorio-mascota .badge-nuevo-accesorio {
  left: 1px
}
.selector-accesorio-mascota .marca-variantes-accesorio {
  top: 26px;
  bottom: auto;
  right: 8px
}
.lista-pase-mascota {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto
}
.fila-pase-mascota-nivel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 2px solid #222;
  border-radius: 4px;
  background: #FFF8E1;
  opacity: 0.55
}
.fila-pase-mascota-nivel.pase-nivel-alcanzado {
  opacity: 1;
  background: #E1F5FE
}
.fila-pase-mascota-nivel.pase-nivel-actual {
  border-color: #FF4081;
  box-shadow: 0 0 0 2px rgba(255,64,129,0.35)
}
.pase-mascota-nivel-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #222;
  color: #FFF8E1;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center
}
.pase-nivel-alcanzado .pase-mascota-nivel-badge {
  background: #FF4081
}
.pase-mascota-nivel-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column
}
.pase-mascota-nivel-mensaje {
  font-size: 11px;
  line-height: 1.25
}
.pase-mascota-nivel-bytes {
  font-size: 10px;
  color: #666;
  margin-top: 1px
}
.pase-mascota-nivel-check {
  flex-shrink: 0;
  font-size: 13px
}
.lista-hitos-bytes-charts {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.lista-hitos-bytes-charts .fila-pase-mascota-nivel {
  padding: 4px 6px
}
.lista-hitos-bytes-charts .pase-mascota-nivel-badge {
  width: 22px;
  height: 22px;
  font-size: 10px
}
.lista-hitos-bytes-charts .pase-mascota-nivel-mensaje {
  font-size: 10px
}
.lista-hitos-bytes-charts .pase-mascota-nivel-bytes {
  font-size: 9px
}
.swatch-accesorio-mascota {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer;
  box-sizing: border-box;
}
.swatch-accesorio-mascota.vacio {
  font-size: 9px;
  font-weight: bold;
  color: #666
}
.swatch-accesorio-mascota {
  position: relative
}
.swatch-orejas-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%) scale(0.42);
  transform-origin: center
}
.swatch-accesorio-mascota.activo {
  background: #FFD54F;
  box-shadow: 2px 2px 0px #222,0 0 0 2px #FF4081
}
.swatch-accesorio-mascota img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block
}
.selector-avatar-perfil,
.selector-skin-receptor {
  display: grid;
  grid-template-columns: repeat(auto-fill, 74px);
  justify-content: space-between;
  align-items: start;
  gap: 10px 6px;
  margin-top: 4px
}
.swatch-avatar-perfil {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 72px;
  height: 76px;
  padding: 6px 4px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer;
  box-sizing: border-box;
}
.swatch-avatar-perfil-cara {
  font-size: 13px;
  font-family: 'Pixelify Sans',sans-serif;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible
}
.swatch-avatar-perfil-nombre {
  font-size: 10px;
  font-weight: bold;
  color: #222;
  white-space: nowrap
}
.swatch-avatar-perfil.activo {
  background: #FFD54F;
  box-shadow: 2px 2px 0px #222,0 0 0 2px #FF4081
}
.swatch-skin-receptor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 74px;
  height: 92px;
  box-sizing: border-box;
  padding: 6px 4px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer;
  font-size: 10px;
  text-align: center;
  color: #222;
  position: relative
}
.swatch-skin-receptor span {
  line-height: 1.2
}
.swatch-skin-receptor.activo {
  background: #FFF3E0;
  box-shadow: 2px 2px 0px #222,0 0 0 2px #00BCD4
}
.swatch-skin-receptor.bloqueada {
  cursor: not-allowed
}
.swatch-skin-receptor.bloqueada .swatch-skin-receptor-preview {
  opacity: 0.5
}
.swatch-skin-receptor-preview {
  display: flex;
  gap: 2px;
  min-height: 24px;
  align-items: center;
  justify-content: center
}
.swatch-skin-receptor > .btn-desbloquear-skin-byte {
  margin-top: auto
}
.swatch-skin-receptor > span {
  max-width: 100%
}
.swatch-skin-receptor-preview span {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  display: inline-block;
  border: 1px solid #222
}
@keyframes cicloArcoirisPreview {
  from {
    filter: hue-rotate(0deg)
  }
  to {
    filter: hue-rotate(360deg)
  }
}
.swatch-skin-receptor-preview.arcoiris-animado {
  animation: cicloArcoirisPreview 2.4s linear infinite
}
.simbolo-anim-skin-receptor {
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 12px;
  color: #FF4081;
  line-height: 1;
  z-index: 2;
  text-shadow: -1px 0 #FFFDE7,1px 0 #FFFDE7,0 -1px #FFFDE7,0 1px #FFFDE7
}
.preview-forma-nota {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: linear-gradient(135deg, #FF4081, #00BCD4);
  border: 2px solid #222;
  box-sizing: border-box;
}
.preview-forma-rombo {
  transform: rotate(45deg)
}
.preview-forma-circulo {
  border-radius: 50%
}
.preview-forma-pixel {
  clip-path: polygon(40% 0%,60% 0%,60% 20%,80% 20%,80% 40%,100% 40%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0% 60%,0% 40%,20% 40%,20% 20%,40% 20%)
}
.badge-bytes-disponibles {
  background: #E1F5FE;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #01579B;
  white-space: nowrap
}
.btn-desbloquear-skin-byte {
  margin-top: 2px;
  font-size: 9px;
  padding: 2px 5px;
  background: #B3E5FC;
  border: 1.5px solid #222;
  box-shadow: 1.5px 1.5px 0px #222;
  cursor: pointer;
  color: #222;
  font-weight: bold
}
.btn-desbloquear-skin-byte:hover:not(:disabled) {
  background: #81D4FA
}
.btn-desbloquear-skin-byte:disabled {
  opacity: 0.5;
  cursor: not-allowed
}
.item-accesorio-bloqueado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px
}
.item-accesorio-bloqueado .btn-desbloquear-skin-byte {
  font-size: 8px;
  padding: 1.5px 4px;
  margin-top: 0
}
.item-preview-mascota-wrap {
  position: relative;
  display: inline-flex
}
.btn-vista-previa-ojo {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  background: #FFFDE7;
  border: 1.5px solid #222;
  box-shadow: 1px 1px 0px #222;
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2
}
.btn-vista-previa-ojo:hover {
  background: #FFE082;
  transform: scale(1.1)
}
.badge-nuevo-accesorio {
  position: absolute;
  top: -8px;
  left: -6px;
  background: #FF4081;
  color: #fff;
  font-size: 7px;
  font-weight: bold;
  padding: 1.5px 4px;
  border-radius: 6px;
  border: 1.5px solid #222;
  box-shadow: 1px 1px 0px #222;
  z-index: 3;
  letter-spacing: 0.3px;
  pointer-events: none;
  animation: rebotarBadgeNuevo 1.1s ease-in-out infinite
}
@keyframes rebotarBadgeNuevo {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-3px)
  }
}
#modal-preview-accesorio-mascota {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9850
}
#preview-accesorio-mascota-avatar-zoom {
  transform: scale(1.7);
  margin: 16px 0 20px
}
.bloqueada-charter {
  filter: grayscale(1) brightness(0.9);
  opacity: 0.55
}
.etiqueta-exclusivo-charter {
  font-size: 7px;
  font-weight: bold;
  text-align: center;
  line-height: 1.15;
  color: #063542;
  background: linear-gradient(90deg, #00E5FF, #7C4DFF);
  border: 1px solid #222;
  border-radius: 6px;
  padding: 1px 4px;
  max-width: 64px
}
.swatch-borde-carnet.bloqueada,
.swatch-franja-carnet.bloqueada,
.swatch-accesorio-mascota.bloqueada,
.swatch-color-perfil.bloqueada {
  opacity: 0.5;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}
.swatch-borde-carnet.bloqueada::after,
.swatch-franja-carnet.bloqueada::after,
.swatch-accesorio-mascota.bloqueada::after,
.swatch-color-perfil.bloqueada::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  text-shadow: 0 0 3px #FFFFFF,0 0 3px #FFFFFF,0 0 3px #FFFFFF
}
.swatch-accesorio-mascota.bloqueada {
  font-size: 17px
}
.swatch-accesorio-mascota.bloqueada {
  opacity: 0.9
}
.swatch-accesorio-mascota.bloqueada::after {
  content: '🔒';
  top: auto;
  left: auto;
  bottom: -5px;
  right: -5px;
  transform: none;
  font-size: 12px;
  background: #FFFDE7;
  border: 1.5px solid #222;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-shadow: none;
  line-height: 1
}
.swatch-color-perfil {
  width: 32px;
  height: 32px;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  transition: transform 0.12s ease
}
.swatch-color-perfil:hover {
  transform: translateY(-2px) scale(1.08)
}
.swatch-color-perfil.activo {
  border-color: #222;
  box-shadow: 2px 2px 0px #222,0 0 0 3px #FFFFFF,0 0 0 5px #222
}
.swatch-borde-carnet {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer;
  box-sizing: border-box;
  padding: 4px;
  transition: transform 0.12s ease
}
.swatch-borde-carnet:hover {
  transform: translateY(-2px) scale(1.08)
}
.swatch-borde-carnet.activo {
  background: #FFF3E0;
  box-shadow: 2px 2px 0px #222,0 0 0 2px #FF4081
}
.swatch-borde-carnet-demo {
  display: block;
  width: 22px;
  height: 16px;
  box-sizing: border-box;
  background: #FFFDE7
}
.swatch-franja-carnet {
  width: 54px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer;
  box-sizing: border-box;
  padding: 4px;
  transition: transform 0.12s ease;
  position: relative
}
.swatch-franja-carnet:hover {
  transform: translateY(-2px) scale(1.08)
}
.swatch-franja-carnet.activo {
  background: #FFF3E0;
  box-shadow: 2px 2px 0px #222,0 0 0 2px #FF4081
}
.swatch-franja-carnet-demo {
  display: block;
  width: 100%;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid #222
}
.swatch-franja-carnet-demo.demo-grande {
  height: 22px
}
.contenedor-franja-item {
  position: relative
}
.overlay-info-franja {
  position: absolute;
  top: -7px;
  right: -7px;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 2
}
.simbolo-anim-franja {
  font-size: 12px;
  color: #FF4081;
  line-height: 1;
  text-shadow: -1px 0 #FFFDE7,1px 0 #FFFDE7,0 -1px #FFFDE7,0 1px #FFFDE7
}
.btn-inspeccionar-franja {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #222;
  background: #FFFDE7;
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 1px 1px 0px #222;
  flex-shrink: 0
}
.btn-inspeccionar-franja:hover {
  background: #FFD54F;
  transform: scale(1.1)
}
.carnet-perfil-y2k.carnet-previsualizando-franja {
  animation: previsualizacionFranjaPulso 1s ease-in-out infinite
}
.carnet-perfil-y2k.carnet-previsualizando-franja::after {
  content: "Vista previa";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  line-height: 1;
  background: #00BCD4;
  color: #FFFFFF;
  padding: 3px 6px;
  border: 1px solid #222;
  border-radius: 3px;
  box-shadow: 1px 1px 0px #222;
  z-index: 3;
  pointer-events: none
}
@keyframes previsualizacionFranjaPulso {
  0%,
  100% {
    outline: 2px dashed #00BCD4;
    outline-offset: 3px
  }
  50% {
    outline: 2px dashed #FF4081;
    outline-offset: 3px
  }
}
.contenedor-borde-item {
  position: relative
}
.overlay-info-borde {
  position: absolute;
  top: -7px;
  right: -7px;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 2
}
.simbolo-anim-borde {
  font-size: 12px;
  color: #FF4081;
  line-height: 1;
  text-shadow: -1px 0 #FFFDE7,1px 0 #FFFDE7,0 -1px #FFFDE7,0 1px #FFFDE7
}
.btn-inspeccionar-borde {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #222;
  background: #FFFDE7;
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 1px 1px 0px #222;
  flex-shrink: 0
}
.btn-inspeccionar-borde:hover {
  background: #FFD54F;
  transform: scale(1.1)
}
.carnet-perfil-y2k.carnet-previsualizando-borde {
  animation: previsualizacionFranjaPulso 1s ease-in-out infinite
}
.carnet-perfil-y2k.carnet-previsualizando-borde::after {
  content: "Vista previa";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  line-height: 1;
  background: #00BCD4;
  color: #FFFFFF;
  padding: 3px 6px;
  border: 1px solid #222;
  border-radius: 3px;
  box-shadow: 1px 1px 0px #222;
  z-index: 3;
  pointer-events: none
}
.swatch-estilo-ola-demo {
  display: block;
  width: 100%;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid #222;
  background: linear-gradient(#4DD0E1, #00BCD4);
  animation: swatchOlaBob 1.7s ease-in-out infinite
}
.swatch-estilo-ola-demo.demo-olas {
  border-radius: 0 0 50% 50%/0 0 16px 16px
}
.swatch-estilo-ola-demo.demo-rombos {
  clip-path: polygon(0% 45%, 16.66% 0%, 33.33% 45%, 50% 0%, 66.66% 45%, 83.33% 0%, 100% 45%, 100% 100%, 0% 100%)
}
.swatch-estilo-ola-demo.demo-burbujas {
  background: linear-gradient(#4DD0E1, #00BCD4);
  clip-path: polygon(0% 100%, 0% 65%, 25% 65%, 25% 30%, 50% 30%, 50% 0%, 75% 0%, 75% 30%, 100% 30%, 100% 100%);
  animation: swatchOlaBob 1.7s steps(4) infinite
}
@keyframes swatchOlaBob {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(2px)
  }
}
.btn-ojo-preview-ola {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFDE7;
  border: 1.5px solid #222;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 1px 1px 0px #222;
  transition: transform 0.12s ease;
  z-index: 3
}
.btn-ojo-preview-ola:hover {
  transform: scale(1.25)
}
.preview-ola-carril-wrap {
  position: relative;
  width: 100%;
  height: 72px;
  border: 2px solid #222;
  border-radius: 6px;
  box-shadow: 2px 2px 0px #222;
  box-sizing: border-box;
  overflow: hidden;
  background: #1B1F2A;
  margin-bottom: 10px
}
.canvas-preview-ola-carril {
  display: block;
  width: 100%;
  height: 100%
}
.preview-ola-carril-etiqueta {
  position: absolute;
  top: 5px;
  left: 6px;
  font-size: 10px;
  color: #FFFFFF;
  background: rgba(0,0,0,0.5);
  padding: 2px 7px;
  border-radius: 5px;
  pointer-events: none;
  letter-spacing: 0.3px
}
.badge-notificacion {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #FF1744;
  color: #FFFFFF;
  border: 2px solid #222;
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0px #222;
  font-family: 'Pixelify Sans',sans-serif;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  animation: pulsoBadgeNotificacion 1.6s ease-in-out infinite
}
@keyframes pulsoBadgeNotificacion {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.15)
  }
}
.lista-medallas-seleccion {
  display: grid;
  grid-template-columns: repeat(auto-fill, 74px);
  justify-content: space-between;
  align-items: start;
  gap: 10px 6px;
  margin-top: 4px
}
.medalla-seleccionable {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  width: 74px;
  height: 92px;
  overflow: hidden;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 3px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s ease,filter 0.15s ease,transform 0.12s ease
}
.medalla-seleccionable .medalla-icono {
  font-size: 22px;
  line-height: 1
}
.medalla-seleccionable .medalla-nombre {
  font-size: 9px;
  font-weight: bold;
  color: #444
}
.medalla-seleccionable.bloqueada {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: not-allowed
}
.medalla-seleccionable.exhibida {
  background: #FFF9C4;
  border-color: #D81B60;
  box-shadow: 2px 2px 0px #D81B60
}
.medalla-seleccionable.exhibida .medalla-nombre {
  color: #D81B60
}
.medalla-seleccionable:not(.bloqueada):hover {
  transform: translateY(-2px)
}
.entrada-parche {
  border-bottom: 2px dashed #222;
  padding-bottom: 8px;
  margin-bottom: 8px
}
.entrada-parche:last-child {
  border-bottom: none;
  margin-bottom: 0
}
.entrada-parche h4 {
  margin: 0 0 4px 0;
  color: #D81B60;
  font-size: 13px
}
.entrada-parche ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px
}
.entrada-parche li {
  margin-bottom: 3px
}
.tarjeta-perfil-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 8px 10px;
  box-sizing: border-box;
}
.tarjeta-perfil-item.activo {
  border-color: #FF4081;
  background: #FFF8E1
}
.perfil-item-fila-nombre {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-weight: bold
}
.perfil-item-icono {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1
}
.perfil-item-nombre {
  min-width: 0;
  overflow: hidden
}
.perfil-item-activo {
  flex: 0 0 auto
}
.perfil-item-nombre .px-parrafo-cont {
  flex-wrap: nowrap;
  overflow: hidden
}
.tarjeta-perfil-item .btn-usar-perfil .px-etiqueta,
.tarjeta-perfil-item .btn-borrar-perfil .px-etiqueta {
  display: inline-flex;
  align-items: center
}
.interfaz-juego {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 10;
  position: relative
}
#fondo-gatos-juego {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
  border-radius: 4px
}
#fondo-gatos-juego.activo {
  opacity: 0.75
}
#fondo-video-juego {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
  border-radius: 4px
}
#fondo-video-juego.activo {
  opacity: 0.75
}
#capa-cmd-error-juego {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}
#arcade-habilidad-capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: hidden
}
#esquinas-habilidad-objetivo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  overflow: hidden
}
.esquina-objetivo {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.esquina-objetivo.esquina-objetivo-activa {
  display: flex
}
.esquina-objetivo-cara {
  position: relative;
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 4px solid #222;
  box-shadow: 2px 2px 0px #222;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  font-size: 16px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  font-family: 'Pixelify Sans', sans-serif;
}
.esquina-objetivo-cara::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 14px 4px rgba(255, 213, 79, 0.85);
}
.esquina-objetivo-tecla {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  background: #222;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.esquina-objetivo-0 { top: 14px; left: 14px }
.esquina-objetivo-1 { top: 14px; right: 14px }
.esquina-objetivo-2 { bottom: 14px; left: 14px }
.esquina-objetivo-3 { bottom: 14px; right: 14px }
.esquina-objetivo-lista .esquina-objetivo-cara {
  animation: esquinaObjetivoPulso 0.8s ease-in-out infinite;
}
.esquina-objetivo-lista .esquina-objetivo-cara::after {
  animation: esquinaObjetivoPulsoGlow 0.8s ease-in-out infinite;
}
@keyframes esquinaObjetivoPulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes esquinaObjetivoPulsoGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.esquina-objetivo-llorando .esquina-objetivo-cara {
  animation: esquinaObjetivoTemblorLlanto 0.26s ease-in-out infinite;
}
.esquina-objetivo-llorando .esquina-objetivo-cara::after {
  box-shadow: 0 0 14px 4px rgba(64, 196, 255, 0.85);
  opacity: 1;
}
@keyframes esquinaObjetivoTemblorLlanto {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-4deg); }
  75% { transform: translateX(2px) rotate(4deg); }
}
.esquina-objetivo-sacudon .esquina-objetivo-cara {
  animation: esquinaObjetivoSacudonGolpe 0.38s cubic-bezier(.36,.07,.19,.97) both;
}
.esquina-objetivo-sacudon .esquina-objetivo-cara::after {
  box-shadow: 0 0 20px 6px rgba(255, 64, 64, 0.9);
  animation: esquinaObjetivoSacudonGolpeGlow 0.38s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes esquinaObjetivoSacudonGolpe {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.28) rotate(-12deg); }
  32% { transform: scale(1.1) translateX(-7px) rotate(9deg); }
  48% { transform: scale(1.1) translateX(7px) rotate(-9deg); }
  64% { transform: scale(1.04) translateX(-4px) rotate(5deg); }
  80% { transform: scale(1.04) translateX(4px) rotate(-5deg); }
  100% { transform: scale(1) translateX(0) rotate(0deg); }
}
@keyframes esquinaObjetivoSacudonGolpeGlow {
  0%, 100% { opacity: 0; }
  15% { opacity: 1; }
}
#arcade-habilidad-capa .osv-escenario {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  overflow: hidden
}
#arcade-habilidad-capa.arcade-vineta-roja::before,
#arcade-habilidad-capa .osv-escenario.arcade-vineta-roja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 60px 12px rgba(211, 47, 47, 0.85);
  animation: arcadeVinetaPulso 1s ease-in-out infinite;
  pointer-events: none
}
@keyframes arcadeVinetaPulso {
  0%,
  100% {
    opacity: 0.55
  }
  50% {
    opacity: 1
  }
}
.arcade-mascota-invasora {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.35s ease
}
.arcade-mascota-invasora.visible {
  opacity: 1
}
.arcade-mascota-invasora-bounce {
  animation: corralPetBailar 0.7s ease-in-out infinite
}
.arcade-mascota-invasora .carnet-mascota-avatar {
  font-size: 11px
}
.arcade-gato-presentador {
  position: absolute;
  top: 4%;
  width: calc(34 * var(--vw, 1vw));
  max-width: 175px;
  min-width: 108px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(2px 5px 0px rgba(0,0,0,0.35));
  animation: arcadeGatoPresentadorSalto 1.05s ease-in-out infinite
}
.arcade-gato-presentador.visible {
  opacity: 1
}
.arcade-gato-presentador-izq {
  left: 7%
}
.arcade-gato-presentador-der {
  right: 7%
}
.arcade-gato-presentador-cara {
  font-size: clamp(15px, calc(4.2 * var(--vw, 1vw)), 26px);
  border-width: 3px;
  box-shadow: 3px 3px 0px #222222,0 0 14px rgba(255,23,68,0.4)
}
.arcade-gato-presentador-accesorio {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  z-index: 10;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.35))
}
.arcade-gato-presentador-lentes {
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(13px, calc(3.6 * var(--vw, 1vw)), 21px)
}
.arcade-gato-presentador-girasol {
  top: -8%;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: clamp(13px, calc(3.6 * var(--vw, 1vw)), 21px)
}
@keyframes arcadeGatoPresentadorSalto {
  0%,100% {
    transform: translateY(0) scale(1,1)
  }
  15% {
    transform: translateY(-20px) scale(1.04,0.95)
  }
  32% {
    transform: translateY(6px) scale(0.95,1.06)
  }
  48% {
    transform: translateY(-11px) scale(1.02,0.98)
  }
  65% {
    transform: translateY(0) scale(1,1)
  }
}
@keyframes nekoNewsSalto {
  0%,100% {
    transform: translateY(0) scale(1,1)
  }
  50% {
    transform: translateY(-5px) scale(1.01,0.99)
  }
}
.arcade-aviso-habilidad {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: #D32F2F;
  color: #FFEBEE;
  border: 3px solid #B71C1C;
  box-shadow: 4px 4px 0px #7F0000;
  padding: 14px 20px;
  text-align: center;
  font-family: 'Pixelify Sans', sans-serif;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 80%;
  box-sizing: border-box;
}
.arcade-aviso-habilidad.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: parpadeoCmdError 0.7s ease-in-out infinite
}
.arcade-aviso-habilidad-l1 {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 6px
}
.arcade-aviso-habilidad-l2 {
  font-size: 12px
}
.cartel-habilidad-recibida {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px) scale(0.92);
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFDE7;
  border: 3px solid #222;
  box-shadow: 5px 5px 0px #222;
  padding: 8px 18px 8px 8px;
  font-family: 'Pixelify Sans', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(90 * var(--vw, 1vw));
  box-sizing: border-box;
}
.cartel-habilidad-recibida.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1)
}
.cartel-habilidad-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 62px
}
.cartel-habilidad-avatar {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid #222;
  box-shadow: 2px 2px 0px #222;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: 21px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;
  position: relative;
  z-index: 4
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-sombrero {
  top: -13px;
  font-size: 20px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-mono {
  font-size: 14px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq,
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  font-size: 15px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq {
  left: -13px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  right: -13px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-izq,
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-der {
  top: -9px;
  border-left-width: 6px;
  border-right-width: 6px;
  border-bottom-width: 12px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-izq {
  left: 10px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-der {
  right: 10px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-izq,
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-der {
  top: -10px;
  width: 13px;
  height: 13px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-izq {
  left: 7px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-der {
  right: 7px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-izq,
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-der {
  top: -6px;
  width: 11px;
  height: 26px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-izq {
  left: -2px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-der {
  right: -2px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq,
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  font-size: 15px;
  top: -12px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq {
  left: -9px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der {
  right: -9px
}
.cartel-habilidad-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0
}
.cartel-habilidad-nombre {
  font-weight: bold;
  font-size: 14px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(46 * var(--vw, 1vw))
}
.cartel-habilidad-detalle {
  font-size: 12px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(46 * var(--vw, 1vw))
}
.switch-modo-arcade {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0
}
.switch-modo-arcade input {
  opacity: 0;
  width: 0;
  height: 0
}
.switch-modo-arcade-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  transition: 0.2s;
  box-sizing: border-box;
}
.switch-modo-arcade-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border: 2px solid #222;
  transition: 0.2s
}
.switch-modo-arcade input:checked + .switch-modo-arcade-slider {
  background: #FF8A65
}
.switch-modo-arcade input:checked + .switch-modo-arcade-slider::before {
  transform: translateX(16px)
}
.switch-modo-arcade input:disabled + .switch-modo-arcade-slider {
  opacity: 0.5;
  cursor: not-allowed
}
#contenedor-juego canvas {
  position: relative;
  z-index: 1;
  transform-origin: center center
}
.panel-controles {
  background: #FFFDE7;
  padding: 8px 10px;
  border-radius: 0px;
  border: 3px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  flex-direction: column;
  gap: 8px;
  width: calc(94 * var(--vw, 1vw));
  margin-bottom: 10px;
  box-sizing: border-box;
  color: #222222
}
.grupo-inputs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center
}
.fila-controles-una-linea {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  box-sizing: border-box;
}
.fila-controles-una-linea > * {
  flex-shrink: 0
}
.fila-controles-una-linea input[type="text"] {
  width: 100px
}
.fila-controles-una-linea #url-musica {
  flex: 1 1 auto;
  min-width: 140px;
  width: auto
}
.contenedor-url-audio {
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 4px
}
.contenedor-url-audio #url-musica {
  flex: 1 1 auto;
  min-width: 0
}
.contenedor-url-audio button {
  flex-shrink: 0;
  white-space: nowrap
}
.popover-ayuda-audio {
  display: none;
  position: fixed;
  background: #FFFDE7;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  padding: 10px 12px;
  z-index: 9500;
  width: 260px;
  font-size: 11px;
  line-height: 1.5;
  color: #222222;
  transform-origin: top
}
.popover-ayuda-audio.abierto {
  display: block
}
.popover-ayuda-audio p {
  margin: 0 0 8px 0
}
.popover-ayuda-audio p:last-child {
  margin-bottom: 0
}
.popover-ayuda-audio a {
  color: #D81B60;
  font-weight: bold
}
.dropdown-dock {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px
}
.popover-recursos {
  display: none;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  background: #FFFDE7;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  padding: 10px 12px;
  z-index: 9500;
  width: 260px;
  box-sizing: border-box;
  transform-origin: top
}
.popover-recursos.abierto {
  display: flex
}
.popover-recursos .etiqueta-recurso {
  font-size: 11px;
  color: #666;
  font-weight: bold;
  display: block;
  margin-top: 8px
}
.popover-recursos .etiqueta-recurso:first-child {
  margin-top: 0
}
.popover-recursos input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
.popover-ayuda-audio.abierto,
.popover-recursos.abierto {
  animation: popover-entrada 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) forwards
}
.popover-ayuda-audio.cerrando,
.popover-recursos.cerrando {
  animation: popover-salida 0.12s ease-in forwards
}
@keyframes popover-entrada {
  from {
    opacity: 0;
    transform: scale(0.95)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes popover-salida {
  from {
    opacity: 1;
    transform: scale(1)
  }
  to {
    opacity: 0;
    transform: scale(0.95)
  }
}
.grupo-opciones-borde {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px dashed #999999;
  padding: 3px 8px;
  flex-shrink: 0
}
.btn-toggle-avanzado {
  font-size: 11px;
  background: #ECEFF1;
  color: #222222;
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap
}
.avanzado-panel {
  border-top: 1px dashed #999999;
  margin-top: 6px;
  padding-top: 6px
}
.btn-min-guia-teclas {
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  color: #222222;
  background: #FFFDE7;
  border: 1px solid #222222;
  padding: 0 5px;
  flex-shrink: 0
}
.panel-flotante-guia-teclas.minimizada #texto-guia-teclas {
  display: none
}
input[type="text"],
input[type="number"],
select {
  padding: 6px;
  border-radius: 0px;
  border: 2px solid #222222;
  background-color: #E1F5FE;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222222;
  font-size: 13px;
  box-sizing: border-box;
  font-family: 'Pixelify Sans',sans-serif;
  box-shadow: 2px 2px 0px #222222
}
input[type="text"] {
  width: 100%
}
body.modo-oscuro select {
  background-color: #E1F5FE !important
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 26px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #222 50%),linear-gradient(135deg, #222 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%,calc(100% - 9px) 55%;
  background-size: 5px 5px,5px 5px;
  background-repeat: no-repeat
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #222222;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  box-shadow: 2px 2px 0px #222222;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0
}
input[type="checkbox"]:checked {
  background: #00BCD4
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -1px;
  width: 5px;
  height: 10px;
  border: solid #222222;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg)
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  cursor: pointer;
  box-sizing: border-box;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  background: #FF4081;
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #FF4081;
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  border-radius: 0;
  cursor: pointer
}
::selection {
  background: #FF4081;
  color: #FFFDE7
}
::-moz-selection {
  background: #FF4081;
  color: #FFFDE7
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px
}
*::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #E0F7FA, #FFD6E8)
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4DD0E1, #FF4081);
  border: 2px solid #222222
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #26C6DA, #D81B60)
}
* {
  scrollbar-width: thin;
  scrollbar-color: #FF4081 #E0F7FA
}
button {
  padding: 6px 12px;
  border-radius: 0px;
  border: 2px solid #222222;
  background: linear-gradient(135deg, #E0F7FA 0%, #FFFDE7 55%, #FFE0F0 100%);
  color: #222222;
  font-weight: bold;
  cursor: pointer;
  font-size: 13px;
  font-family: 'Pixelify Sans',sans-serif;
  box-shadow: 2px 2px 0px #222222;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1),filter 0.15s ease,background 0.1s ease
}
button:active:not(:disabled) {
  transform: translate(1px, 1px) scale(0.94);
  box-shadow: 1px 1px 0px #222;
  filter: brightness(0.95)
}
button:hover:not(:disabled) {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFECB3 55%, #FFD6E8 100%);
  transform: translateY(-2px) scale(1.04);
  animation: brilloIdolBoton 1s ease-in-out infinite
}
@keyframes brilloIdolBoton {
  0%,
  100% {
    filter: brightness(1.06) saturate(1.2) drop-shadow(0 0 3px rgba(255,64,129,0.6))
  }
  50% {
    filter: brightness(1.1) saturate(1.3) drop-shadow(0 0 8px rgba(0,229,255,0.65))
  }
}
button.btn-jugar {
  background: #80DEEA;
  color: #222
}
button.foco-teclado {
  background: #FFECB3 !important;
  outline: 3px solid #D81B60;
  outline-offset: 2px;
  box-shadow: 4px 4px 0px #222 !important;
  transform: translate(-1px, -1px);
  animation: brilloIdolBoton 1s ease-in-out infinite
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid #00BCD4;
  outline-offset: 2px;
  box-shadow: 4px 4px 0px #222 !important
}
button:disabled {
  background: #E0E0E0;
  color: #999;
  cursor: default;
  box-shadow: none
}
.cargando-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  vertical-align: -3px
}
.cargando-eq span {
  width: 4px;
  height: 4px;
  background: #FF4081;
  animation: eqBarraCarga 0.9s ease-in-out infinite
}
.cargando-eq span:nth-child(1) {
  background: #FF4081;
  animation-delay: 0s
}
.cargando-eq span:nth-child(2) {
  background: #00BCD4;
  animation-delay: 0.15s
}
.cargando-eq span:nth-child(3) {
  background: #FF4081;
  animation-delay: 0.3s
}
.cargando-eq span:nth-child(4) {
  background: #00BCD4;
  animation-delay: 0.45s
}
@keyframes eqBarraCarga {
  0%,
  100% {
    height: 4px
  }
  50% {
    height: 16px
  }
}
button#btn-descargar {
  background: #80DEEA;
  color: #222
}
button#btn-guardar-local {
  background: #A5D6A7;
  color: #222
}
button#btn-volver-menu {
  background: #FFAB91;
  color: #222
}
#contenedor-juego {
  position: relative;
  background: transparent;
  border: 3px solid #222222;
  box-shadow: 5px 5px 0px #222222;
  width: calc(94 * var(--vw, 1vw));
  height: calc(85 * var(--vh, 1vh));
  overflow: hidden
}
#contenedor-juego.modo-play-16-9 {
  width: min(calc(97 * var(--vw, 1vw)), calc(95 * var(--vh, 1vh)) * 16 / 9);
  height: min(calc(95 * var(--vh, 1vh)), calc(97 * var(--vw, 1vw)) * 9 / 16);
  margin: 0 auto
}
#fila-editor-modovisual {
  display: contents
}
#fila-editor-modovisual.modovisual-on {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  width: calc(94 * var(--vw, 1vw));
  margin: 0 auto
}
#fila-editor-modovisual.modovisual-on #contenedor-juego {
  width: auto;
  flex: 7 1 0%;
  min-width: 0
}
#sidebar-controles-modovisual {
  display: none
}
#fila-editor-modovisual.modovisual-on #sidebar-controles-modovisual {
  display: block;
  flex: 3 1 0%;
  min-width: 300px;
  max-width: 560px;
  height: calc(85 * var(--vh, 1vh));
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 253, 231, 0.97);
  border: 3px solid #222222;
  box-shadow: 5px 5px 0px #222222;
  box-sizing: border-box;
  position: relative
}
#sidebar-controles-modovisual #panel-controles-editor.panel-controles-flotante {
  position: static;
  width: 100%;
  scale: 1;
  max-height: none;
  box-shadow: none;
  border: none;
  z-index: auto
}
#sidebar-controles-modovisual .panel-flotante-editor-centro {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  scale: 1
}
#sidebar-controles-modovisual .panel-dificultad-config {
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  gap: 8px
}
.fila-dificultad-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}
#sidebar-controles-modovisual .fila-dificultad-grupo {
  width: 100%
}
#sidebar-controles-modovisual .fila-dificultad-grupo select {
  flex: 1;
  min-width: 0
}
#sidebar-controles-modovisual #titulo-lista-visuales {
  display: block
}
#sidebar-controles-modovisual #lista-visuales {
  border-top: 2px dashed #999;
  padding-top: 8px;
  margin-top: 10px
}
#sidebar-controles-modovisual .fila-controles-una-linea > span,
#sidebar-controles-modovisual #nombre-archivo,
#sidebar-controles-modovisual #autor-cancion,
#sidebar-controles-modovisual #btn-descargar,
#sidebar-controles-modovisual #btn-subir-nube,
#sidebar-controles-modovisual #indicador-cambios-sin-subir,
#sidebar-controles-modovisual #label-marcar-evento,
#sidebar-controles-modovisual #grupo-probar-mapa,
#sidebar-controles-modovisual .contenedor-url-audio,
#sidebar-controles-modovisual .dropdown-dock {
  display: none !important
}
#banner-solo-lectura-chart {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  transform-origin: top center;
  scale: var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)));
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFDE7;
  border: 3px solid #222;
  box-shadow: 4px 4px 0px #222;
  padding: 8px 14px;
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #222;
  white-space: nowrap
}
#banner-solo-lectura-chart #btn-salir-solo-lectura-chart {
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: bold;
  font-size: 12px;
  background: #FF8A80;
  color: #222;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 4px 10px;
  cursor: pointer
}
#banner-solo-lectura-chart #btn-salir-solo-lectura-chart:hover {
  filter: brightness(1.06)
}
body.modo-solo-lectura-chart #panel-controles-editor,
body.modo-solo-lectura-chart #panel-ajuste-nota,
body.modo-solo-lectura-chart #panel-ajuste-nota-abajo,
body.modo-solo-lectura-chart #contenedor-linea-tiempo .controles-zoom-tl {
  display: none !important
}
#panel-controles-editor.panel-controles-flotante {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))));
  margin-bottom: 0;
  z-index: 60;
  max-height: calc(92% / var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))));
  transform-origin: top left;
  scale: var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)));
  overflow-y: auto;
  background: linear-gradient(160deg, #B3E5FC 0%, #E1F5FE 45%, #F8BBD0 100%);
  box-sizing: border-box;
}
.panel-controles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none
}
.panel-controles-titulo {
  font-weight: bold;
  color: #D81B60;
  font-size: 14px
}
.panel-controles-contenido {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 10px;
  opacity: 1;
  transition: grid-template-rows 0.3s ease,opacity 0.25s ease,margin-top 0.3s ease
}
.panel-controles-contenido-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  min-height: 0
}
#panel-controles-editor.colapsado .panel-controles-contenido {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  pointer-events: none
}
#panel-controles-editor.colapsado {
  padding-bottom: 6px
}
.btn-toggle-panel {
  min-width: 30px;
  font-size: 13px
}
.btn-play-pausa {
  background: #80DEEA;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.btn-play-pausa.en-reproduccion {
  background: #FFD54F
}
canvas {
  display: block;
  image-rendering: pixelated
}
.pantalla-resultados,
.modal-config,
.pantalla-pausa,
.pantalla-gameover,
.pantalla-confirmar-salir {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9850
}
.tarjeta-modal.tarjeta-confirmar-salir {
  min-width: 280px;
  max-width: min(320px, 100%)
}
.pantalla-dialogo-personalizado {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 12px;
  box-sizing: border-box;
  z-index: 9970
}
.tarjeta-modal.tarjeta-dialogo-personalizado {
  width: fit-content;
  min-width: 300px;
  max-width: min(460px, 100%)
}
#dialogo-personalizado-input {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px
}
#confirmar-salir-mascota-wrap {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center
}
#confirmar-salir-mascota-cara {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  animation: confirmarSalirMascotaTriste 1.6s ease-in-out infinite
}
@keyframes confirmarSalirMascotaTriste {
  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }
  50% {
    transform: translateY(5px) rotate(-4deg)
  }
}
.confirmar-salir-lagrima {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  animation: confirmarSalirLagrimaCaer 1.8s ease-in infinite
}
.confirmar-salir-lagrima-1 {
  left: 38%;
  top: 38%;
  animation-delay: 0.2s
}
.confirmar-salir-lagrima-2 {
  left: 60%;
  top: 38%;
  animation-delay: 0.9s
}
@keyframes confirmarSalirLagrimaCaer {
  0% {
    opacity: 0;
    transform: translateY(0)
  }
  15% {
    opacity: 1
  }
  70% {
    opacity: 0.8
  }
  100% {
    opacity: 0;
    transform: translateY(28px)
  }
}
body.modo-oscuro #confirmar-salir-texto {
  color: #FFF6FB
}
#modal-seleccionar-dificultad,
#modal-catalogo-kkr {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9800
}
#modal-config-opciones {
  position: fixed;
  inset: 0;
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9600
}
#modal-cuenta-online {
  position: fixed;
  inset: 0;
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9700
}
#modal-amigos {
  position: fixed;
  inset: 0;
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9700
}
#modal-sala-mp {
  position: fixed;
  inset: 0;
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9700
}
#modal-sala-mp .tarjeta-modal {
  position: relative;
  z-index: 1
}
#modal-amigos .tarjeta-modal,
#modal-sala-mp .tarjeta-modal {
  min-width: 420px
}
#modal-perfiles .tarjeta-modal,
#modal-estadisticas .tarjeta-modal,
#modal-historial-partidas .tarjeta-modal,
#modal-pase .tarjeta-modal,
#modal-cuenta-online .tarjeta-modal {
  scale: max(var(--escala-ui-juego, 1), 0.85)
}
@media (max-width: 420px) {
  #modal-amigos .tarjeta-modal,
  #modal-sala-mp .tarjeta-modal {
    min-width: 0;
    width: calc(94 * var(--vw, 1vw))
  }
}
#btn-sala-mp-copiar-codigo {
  padding: 10px 14px;
  min-height: 40px;
  box-sizing: border-box;
}
#panel-invitar-sala {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  max-width: calc(92 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: linear-gradient(160deg, #B3E5FC 0%, #E1F5FE 45%, #F8BBD0 100%);
  border-right: 3px solid #222;
  box-shadow: 4px 0px 0px rgba(0,0,0,0.25);
  z-index: 9760;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.25s ease
}
#panel-invitar-sala.abierto {
  transform: translateX(0)
}
#panel-invitar-sala-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: rgba(140, 89, 111, 0.5);
  z-index: 9750;
  display: none
}
#panel-invitar-sala-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 3px solid #222;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  box-sizing: border-box;
  flex-shrink: 0
}
#panel-invitar-sala-encabezado span {
  font-weight: bold;
  font-size: 13px
}
#panel-invitar-sala-lista {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}
body.modo-oscuro #panel-invitar-sala {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 4px 0px 0px #332B3D;
  color: #FFF6FB
}
body.modo-oscuro #panel-invitar-sala-encabezado {
  color: #222222
}
body.modo-oscuro #panel-invitar-sala-lista > [style*="color:#888"],
body.modo-oscuro #panel-invitar-sala-lista > [style*="color: #888"] {
  color: #F1DCF2 !important
}
.btn-invitar-amigo-sala {
  position: relative;
  z-index: 2;
  font-size: 10px !important;
  padding: 5px 8px !important;
  flex-shrink: 0;
  background: #A5D6A7 !important;
  color: #222 !important;
  white-space: nowrap
}
.btn-invitar-amigo-sala:disabled {
  background: #E0E0E0 !important;
  color: #888 !important;
  cursor: default
}
#panel-invitar-sala-lista .tarjeta-invitar-amigo {
  padding-left: 14px
}
#panel-invitar-sala-lista .cluster-avatar-jugador {
  width: 58px;
  height: 50px;
  font-size: 10px
}
#panel-invitar-sala-lista .cluster-avatar-mascota-wrap,
#panel-invitar-sala-lista .cluster-avatar-mascota {
  width: 48px;
  height: 48px
}
#panel-invitar-sala-lista .cluster-avatar-mascota {
  font-size: 10px
}
#panel-invitar-sala-lista .tarjeta-amigo-nombre {
  font-size: 12px
}
#panel-invitar-sala-lista .tarjeta-amigo-sub {
  font-size: 9px
}
#contenedor-invitaciones-sala {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px
}
.tarjeta-invitacion-sala {
  background: #FFF8E1;
  border: 3px solid #222;
  box-shadow: 4px 4px 0px #222;
  padding: 10px;
  box-sizing: border-box;
  font-size: 12px;
  animation: salaMpOpcionEntrada 0.3s cubic-bezier(.34,1.56,.64,1) both
}
.tarjeta-invitacion-sala-titulo {
  font-weight: bold;
  margin-bottom: 6px
}
.tarjeta-invitacion-sala-botones {
  display: flex;
  gap: 6px
}
.tarjeta-invitacion-sala-botones button {
  flex: 1;
  font-size: 11px !important;
  padding: 5px !important
}
.btn-invitacion-aceptar {
  background-color: #A5D6A7 !important;
  background-image: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%) !important
}
.btn-invitacion-aceptar:hover {
  background-color: #81C784 !important;
  background-image: linear-gradient(135deg, #81C784 0%, #81C784 100%) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0px #222222 !important;
  animation: none !important
}
.btn-invitacion-rechazar {
  background-color: #FF8A80 !important;
  background-image: linear-gradient(135deg, #FFCDD2 0%, #FF8A80 100%) !important
}
.btn-invitacion-rechazar:hover {
  background-color: #EF5350 !important;
  background-image: linear-gradient(135deg, #EF5350 0%, #EF5350 100%) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0px #222222 !important;
  animation: none !important
}
#sala-mp-cubos-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}
#modal-sala-mp-vs {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: rgba(140, 89, 111, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9750
}
#modal-sala-mp-vs .tarjeta-modal {
  position: relative;
  z-index: 1
}
#sala-mp-vs-cubos-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none
}
#sala-mp-vs-stickers-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0
}
#sala-mp-vs-stickers-fondo .sticker-flotante {
  opacity: 0.5
}
@media (max-width: 640px) {
  #sala-mp-vs-stickers-fondo .sticker-flotante {
    opacity: 0.35
  }
}
#sala-mp-reacciones-flotantes-capa {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9720
}
.sala-mp-reaccion-flotante {
  position: absolute;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
  animation: salaMpReaccionFlotar 2.2s ease-out forwards
}
.sala-mp-reaccion-flotante img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 2px 2px 0px #222;
}
.sala-mp-reaccion-flotante .sala-mp-reaccion-autor {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap
}
@keyframes salaMpReaccionFlotar {
  0% {
    transform: translateY(0) scale(0.4);
    opacity: 0
  }
  15% {
    transform: translateY(-14px) scale(1.2);
    opacity: 1
  }
  30% {
    transform: translateY(-30px) scale(1);
    opacity: 1
  }
  100% {
    transform: translateY(-240px) scale(1);
    opacity: 0
  }
}
.sala-mp-reacciones-barra {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2px
}
.sala-mp-btn-reaccion {
  font-size: 22px;
  line-height: 1;
  background-color: #B3E5FC;
  background-image: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 3px solid #222;
  border-radius: 0px;
  padding: 5px;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 3px 3px 0px #222;
  transition: transform 0.1s ease,box-shadow 0.1s ease
}
.sala-mp-btn-reaccion img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}
.sala-mp-btn-reaccion:hover:not(:disabled) {
  background-color: #FFD6E8;
  background-image: linear-gradient(135deg, #FFD6E8 0%, #FFD6E8 100%);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #222;
  animation: none
}
.sala-mp-btn-reaccion:active {
  transform: translate(1px, 1px) scale(0.92);
  box-shadow: 1px 1px 0px #222
}
.sala-mp-btn-reaccion:disabled {
  opacity: 0.4;
  cursor: default
}
.sala-mp-jugador-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid #222;
  border-radius: 6px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  font-size: 12px;
  box-sizing: border-box;
}
.sala-mp-jugador-fila.listo {
  background: #E8F5E9
}
.sala-mp-jugador-fila .host-tag {
  font-size: 9px;
  background: #FFD54F;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: bold
}
.sala-mp-jugador-fila .desconectado-tag {
  font-size: 9px;
  background: #FFCDD2;
  color: #B71C1C;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: bold
}
.sala-mp-fila-ronda {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid #222;
  border-radius: 6px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  box-sizing: border-box;
  box-shadow: 2px 2px 0px #222;
  animation: salaMpFilaEntrada 0.3s ease both
}
.sala-mp-fila-ronda.eliminado {
  opacity: 0.55
}
.sala-mp-fila-ronda-puesto {
  font-weight: bold;
  font-size: 15px;
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  color: #8C596F
}
.sala-mp-fila-ronda-puesto.primero {
  color: #E65100;
  text-shadow: 1px 1px 0 #FFD54F
}
.sala-mp-fila-ronda-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}
.sala-mp-fila-ronda-nombre {
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.sala-mp-fila-ronda-precision {
  font-size: 10px;
  color: #555
}
.sala-mp-fila-ronda-puntos-party {
  font-size: 10px;
  font-weight: bold;
  color: #8C596F
}
.sala-mp-fila-ronda-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}
.sala-mp-fila-ronda-puntaje {
  font-weight: bold;
  font-size: 15px;
  color: #222;
  min-width: 50px;
  text-align: right
}
.sala-mp-fila-ronda-rango {
  font-weight: bold;
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #222;
  color: #222;
  flex-shrink: 0
}
.btn-sala-mp-expulsar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  background: #FFCDD2;
  color: #B71C1C;
  border: 2px solid #222;
  border-radius: 5px;
  box-shadow: 1px 1px 0px #222;
  cursor: pointer;
  transition: transform 0.15s ease,background 0.15s ease,box-shadow 0.15s ease
}
.btn-sala-mp-expulsar:hover {
  background: #EF5350;
  color: #FFF;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px #222
}
.btn-sala-mp-expulsar:active {
  transform: translate(0, 0) scale(0.9);
  box-shadow: 0px 0px 0px #222
}
.btn-sala-mp-agregar-amigo {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  background: #C8E6C9;
  color: #1B5E20;
  border: 2px solid #222;
  border-radius: 5px;
  box-shadow: 1px 1px 0px #222;
  cursor: pointer;
  transition: transform 0.15s ease,background 0.15s ease,box-shadow 0.15s ease
}
.btn-sala-mp-agregar-amigo:hover {
  background: #66BB6A;
  color: #FFF;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px #222
}
.btn-sala-mp-agregar-amigo:active {
  transform: translate(0, 0) scale(0.9);
  box-shadow: 0px 0px 0px #222
}
.btn-sala-mp-agregar-amigo:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: 1px 1px 0px #222
}
.sala-mp-marcador-duelo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 3px solid #222;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFF9E1, #FFE9A8);
  box-shadow: 3px 3px 0px #222;
  font-size: 16px;
  font-weight: bold;
  color: #222;
  text-align: center;
  box-sizing: border-box;
}
.sala-mp-marcador-duelo-nombre {
  font-size: 14px
}
.sala-mp-marcador-duelo-num {
  font-size: 26px;
  color: #FF4081;
  text-shadow: 1px 1px 0px #222;
  padding: 0 2px
}
.sala-mp-marcador-duelo-num.ganando {
  color: #2E7D32
}
.sala-mp-cancion-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 2px solid #222;
  border-radius: 6px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  font-size: 11px;
  cursor: pointer;
  box-sizing: border-box;
}
.sala-mp-cancion-fila:hover {
  background: #FCE4EC
}
.sala-mp-cancion-fila.elegida {
  background: #FFECB3;
  border-color: #FF66B2
}
.sala-mp-vs-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  width: 380px;
  max-width: calc(42 * var(--vw, 1vw))
}
.sala-mp-vs-slot:nth-child(2) {
  justify-self: start;
  align-self: start
}
.sala-mp-vs-slot:nth-child(3) {
  justify-self: end;
  align-self: start
}
.sala-mp-vs-slot:nth-child(4) {
  justify-self: start;
  align-self: end
}
.sala-mp-vs-slot:nth-child(5) {
  justify-self: end;
  align-self: end
}
.sala-mp-vs-slot .carnet-perfil-y2k {
  min-height: 0;
  width: 100%;
  padding: 14px;
  gap: 13px;
  overflow: visible
}
.sala-mp-vs-slot .carnet-perfil-avatar,
.sala-mp-vs-slot .carnet-mascota-avatar {
  overflow: visible;
  position: relative;
  z-index: 5
}
.sala-mp-vs-slot .carnet-perfil-avatar {
  width: 94px;
  height: 75px;
  font-size: 15px
}
.sala-mp-vs-slot .carnet-perfil-nombre {
  font-size: 18px
}
.sala-mp-vs-slot .carnet-perfil-sub {
  font-size: 11px;
  gap: 6px
}
.sala-mp-vs-slot .carnet-perfil-medallas span {
  font-size: 15px
}
.sala-mp-vs-slot .carnet-mascota-avatar-wrap {
  width: 66px;
  height: 66px
}
.sala-mp-vs-slot .carnet-mascota-avatar {
  width: 66px;
  height: 66px;
  font-size: 12px
}
.sala-mp-vs-slot .carnet-mascota-cuadro-vs {
  position: absolute;
  isolation: isolate;
  z-index: 3;
  box-sizing: border-box;
  border: 3px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease,color 0.25s ease;
  bottom: -46px;
  right: -46px
}
.sala-mp-vs-slot:nth-child(3) .carnet-mascota-cuadro-vs {
  bottom: -46px;
  right: auto;
  left: -46px
}
.sala-mp-vs-slot:nth-child(4) .carnet-mascota-cuadro-vs {
  bottom: auto;
  top: -46px;
  right: -46px;
  left: auto
}
.sala-mp-vs-slot:nth-child(5) .carnet-mascota-cuadro-vs {
  bottom: auto;
  top: -46px;
  right: auto;
  left: -46px
}
#sala-mp-vs-grid.sala-mp-vs-grid-2 .sala-mp-vs-slot:nth-child(2),
#sala-mp-vs-grid.sala-mp-vs-grid-2 .sala-mp-vs-slot:nth-child(3) {
  grid-row: 1/3;
  align-self: center
}
.mascota-vs-burbuja {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(1);
  background: #FFFDE7;
  color: #222222;
  border: 2px solid #222222;
  border-radius: 10px;
  box-shadow: 2px 2px 0px #222222;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  width: max-content;
  max-width: 150px;
  z-index: 4;
  pointer-events: none;
  font-family: 'Pixelify Sans',sans-serif;
  opacity: 0;
  animation: burbujaVsPop 0.5s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes burbujaVsPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4)
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08)
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1)
  }
}
.sala-mp-vs-slot:nth-child(2) .mascota-vs-burbuja,
.sala-mp-vs-slot:nth-child(3) .mascota-vs-burbuja {
  top: 100%;
  margin-top: 12px;
  animation-delay: 0.25s
}
.sala-mp-vs-slot:nth-child(2) .mascota-vs-burbuja::before,
.sala-mp-vs-slot:nth-child(3) .mascota-vs-burbuja::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid #222222
}
.sala-mp-vs-slot:nth-child(2) .mascota-vs-burbuja::after,
.sala-mp-vs-slot:nth-child(3) .mascota-vs-burbuja::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid #FFFDE7
}
.sala-mp-vs-slot:nth-child(3) .mascota-vs-burbuja {
  animation-delay: 0.4s
}
.sala-mp-vs-slot:nth-child(4) .mascota-vs-burbuja,
.sala-mp-vs-slot:nth-child(5) .mascota-vs-burbuja {
  bottom: 100%;
  margin-bottom: 12px;
  animation-delay: 0.55s
}
.sala-mp-vs-slot:nth-child(4) .mascota-vs-burbuja::before,
.sala-mp-vs-slot:nth-child(5) .mascota-vs-burbuja::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #222222
}
.sala-mp-vs-slot:nth-child(4) .mascota-vs-burbuja::after,
.sala-mp-vs-slot:nth-child(5) .mascota-vs-burbuja::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #FFFDE7
}
.sala-mp-vs-slot:nth-child(5) .mascota-vs-burbuja {
  animation-delay: 0.7s
}
.sala-mp-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 76px;
  font-weight: bold;
  font-family: 'Pixelify Sans',sans-serif;
  color: #FFFDE7;
  -webkit-text-stroke: 2px #222222;
  text-shadow: 3px 3px 0 #222222,0 0 18px rgba(255,102,178,0.9),0 0 34px rgba(0,188,212,0.55);
  pointer-events: none;
  z-index: 2;
  animation: latidoBadgeVs 1.1s ease-in-out infinite
}
@keyframes latidoBadgeVs {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(-3deg)
  }
  50% {
    transform: translate(-50%, -50%) scale(1.14) rotate(3deg)
  }
}
#sala-mp-vista-elegir,
#sala-mp-vista-buscando,
#sala-mp-vista-lobby,
#sala-mp-vista-nominar,
#sala-mp-vista-esperando-ronda,
#sala-mp-vista-final {
  animation: salaMpVistaEntrada 0.4s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes salaMpVistaEntrada {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.97)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.sala-mp-opcion-card {
  animation: salaMpOpcionEntrada 0.4s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform 0.15s ease,box-shadow 0.15s ease
}
.sala-mp-opcion-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px #222 !important
}
.sala-mp-opcion-card:nth-of-type(1) {
  animation-delay: 0.02s
}
.sala-mp-opcion-card:nth-of-type(2) {
  animation-delay: 0.08s
}
.sala-mp-opcion-card:nth-of-type(3) {
  animation-delay: 0.14s
}
@keyframes salaMpOpcionEntrada {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.sala-mp-jugador-fila,
.sala-mp-cancion-fila {
  animation: salaMpFilaEntrada 0.3s ease both;
  transition: transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease
}
.sala-mp-jugador-fila:hover,
.sala-mp-cancion-fila:hover {
  transform: translateX(3px);
  box-shadow: 2px 2px 0px #222
}
.sala-mp-jugador-fila.listo {
  animation: salaMpFilaEntrada 0.3s ease both,salaMpFilaListoPop 0.4s ease-out
}
@keyframes salaMpFilaEntrada {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }
  100% {
    opacity: 1;
    transform: translateX(0)
  }
}
@keyframes salaMpFilaListoPop {
  0% {
    background: #FFF9C4
  }
  100% {
    background: #E8F5E9
  }
}
.sala-mp-jugador-fila:nth-child(1) {
  animation-delay: 0s
}
.sala-mp-jugador-fila:nth-child(2) {
  animation-delay: 0.05s
}
.sala-mp-jugador-fila:nth-child(3) {
  animation-delay: 0.1s
}
.sala-mp-jugador-fila:nth-child(4) {
  animation-delay: 0.15s
}
.sala-mp-cancion-fila:nth-child(1) {
  animation-delay: 0s
}
.sala-mp-cancion-fila:nth-child(2) {
  animation-delay: 0.03s
}
.sala-mp-cancion-fila:nth-child(3) {
  animation-delay: 0.06s
}
.sala-mp-cancion-fila:nth-child(4) {
  animation-delay: 0.09s
}
.sala-mp-cancion-fila:nth-child(5) {
  animation-delay: 0.12s
}
.sala-mp-cancion-fila:nth-child(6) {
  animation-delay: 0.15s
}
#sala-mp-vista-buscando .nota-glitch-edit {
  animation: parpadeo-glitch 0.4s infinite alternate,salaMpBuscandoGiro 1.6s linear infinite
}
@keyframes salaMpBuscandoGiro {
  0% {
    transform: rotate(0deg) scale(1)
  }
  50% {
    transform: rotate(180deg) scale(1.12)
  }
  100% {
    transform: rotate(360deg) scale(1)
  }
}
#sala-mp-vista-buscando > div:nth-child(2) {
  animation: salaMpBuscandoRespira 1.4s ease-in-out infinite
}
@keyframes salaMpBuscandoRespira {
  0%,
  100% {
    opacity: 0.75
  }
  50% {
    opacity: 1
  }
}
#sala-mp-bloque-codigo {
  position: relative
}
#sala-mp-bloque-codigo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 12px rgba(0,188,212,0.5);
  animation: salaMpCodigoGlow 2.2s ease-in-out infinite
}
@keyframes salaMpCodigoGlow {
  0%,
  100% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}
#btn-sala-mp-copiar-codigo {
  transition: transform 0.15s ease
}
#btn-sala-mp-copiar-codigo:active {
  transform: scale(0.85) rotate(-6deg)
}
.sala-mp-marcador-duelo {
  animation: salaMpVistaEntrada 0.4s cubic-bezier(.34,1.56,.64,1) both
}
#sala-mp-final-titulo {
  display: inline-block;
  animation: salaMpTituloFinalRebote 0.9s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes salaMpTituloFinalRebote {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-12px)
  }
  60% {
    opacity: 1;
    transform: scale(1.12) translateY(2px)
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0)
  }
}
#sala-mp-countdown-num {
  display: inline-block;
  font-size: 54px;
  font-weight: bold;
  position: relative;
  z-index: 2
}
#sala-mp-countdown-num.sala-mp-countdown-pulso {
  animation: salaMpCountdownPulso 0.5s cubic-bezier(.34,1.56,.64,1)
}
@keyframes salaMpCountdownPulso {
  0% {
    transform: scale(1.55)
  }
  60% {
    transform: scale(0.92)
  }
  100% {
    transform: scale(1)
  }
}
.anillo-cuentaregresiva {
  position: relative;
  width: 156px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center
}
#sala-mp-vs-grid #sala-mp-countdown-anillo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none
}
.cubito-anillo-cuentaregresiva {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 100%);
  border: 2px solid #222222;
  box-shadow: 1px 1px 0px #222222;
  opacity: 0;
  transform: rotate(var(--angulo, 0deg)) translateY(-24px) rotate(calc(-1 * var(--angulo, 0deg))) scale(0.35);
  transition: opacity 0.3s ease,transform 0.35s cubic-bezier(.34,1.56,.64,1),background 0.2s ease,box-shadow 0.2s ease
}
.cubito-anillo-cuentaregresiva.activo {
  opacity: 1;
  background: linear-gradient(135deg, #00E5FF 0%, #FF4081 100%);
  box-shadow: 0 0 7px rgba(255,64,129,0.65),1px 1px 0px #222222;
  transform: rotate(var(--angulo, 0deg)) translateY(-70px) rotate(calc(-1 * var(--angulo, 0deg))) scale(1)
}
.anillo-cuentaregresiva.anillo-completo .cubito-anillo-cuentaregresiva.activo {
  animation: cubitoAnilloCompletoBrillo 0.6s ease-in-out
}
@keyframes cubitoAnilloCompletoBrillo {
  0%,
  100% {
    box-shadow: 0 0 7px rgba(255,64,129,0.65),1px 1px 0px #222222
  }
  50% {
    box-shadow: 0 0 16px rgba(255,64,129,0.95),0 0 8px rgba(0,229,255,0.8),1px 1px 0px #222222
  }
}
#modal-amigos input {
  font-family: 'Consolas','Courier New',monospace;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 8px;
  border: 2px solid #222;
  box-sizing: border-box;
}
.tarjeta-amigo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF8E1;
  border: 3px solid #222;
  box-shadow: 4px 4px 0px #222;
  padding: 15px 10px 8px;
  box-sizing: border-box;
  text-align: left;
  overflow: visible;
  transition: background 0.25s ease,color 0.25s ease
}
.tarjeta-amigo::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: var(--franja-carnet, transparent);
  z-index: 1;
  pointer-events: none
}
.avatar-cluster-jugador {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end
}
.cluster-avatar-jugador {
  width: 58px;
  height: 50px;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.05;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 2px;
  white-space: normal;
  overflow: hidden;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222222;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  transition: border-radius .15s ease,clip-path .15s ease
}
.cluster-avatar-mascota-wrap {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-left: -14px;
  margin-bottom: -2px
}
.cluster-avatar-mascota {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.1;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 3px;
  white-space: nowrap;
  overflow: visible;
  border-radius: 50%;
  border: 2px solid #222;
  box-shadow: 1px 1px 0px #222;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222222
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-sombrero {
  top: -10px;
  font-size: 16px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-mono {
  font-size: 11px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq,
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  font-size: 12px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-izq {
  left: -10px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-aura-der {
  right: -10px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-izq,
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-der {
  top: -7px;
  border-left-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 10px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-izq {
  left: 8px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-der {
  right: 8px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-izq,
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-der {
  top: -8px;
  width: 10px;
  height: 10px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-izq {
  left: 5px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-redondas-der {
  right: 5px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-izq,
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-der {
  top: -5px;
  width: 9px;
  height: 21px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-izq {
  left: -2px
}
.cluster-avatar-mascota-wrap.carnet-mascota-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-caidas-der {
  right: -2px
}
.tarjeta-amigo-datos {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0
}
.tarjeta-amigo-nombre {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.tarjeta-amigo-sub {
  font-size: 10px;
  opacity: 0.85;
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}
.tarjeta-amigo-corral {
  position: relative;
  z-index: 2;
  background: #E0E0E0 !important;
  color: #222 !important;
  font-size: 13px !important;
  padding: 4px 7px !important;
  flex-shrink: 0;
  opacity: 0.5;
  filter: grayscale(1)
}
.tarjeta-amigo-corral.activo {
  background: #A5D6A7 !important;
  opacity: 1;
  filter: none
}
.tarjeta-amigo-quitar {
  position: relative;
  z-index: 2;
  background: #FF8A80 !important;
  color: #222 !important;
  font-size: 10px !important;
  padding: 4px 6px !important;
  flex-shrink: 0
}
.corral-mascotas-caja {
  position: relative;
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  border: 3px solid #222;
  box-shadow: 4px 4px 0px #222;
  border-radius: 10px;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.55) 0px, rgba(255,255,255,0.55) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0px, rgba(255,255,255,0.55) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, #FFD6E8 0%, #B3E5FC 100%);
  background-size: 18px 18px, 18px 18px, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: corralRedFlotante 7s linear infinite;
  overflow: visible
}
@keyframes corralRedFlotante {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0
  }
  to {
    background-position: 0 18px, 18px 0, 0 0, 0 0
  }
}
body.modo-oscuro .corral-mascotas-caja {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%)
}
.corral-clima {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 7px;
  pointer-events: none;
  transition: background 1.6s ease
}
.corral-clima-atardecer {
  background: linear-gradient(180deg, rgba(255,138,101,0.4) 0%, rgba(255,183,143,0.22) 45%, rgba(255,205,178,0.05) 100%)
}
.corral-clima-noche {
  background: linear-gradient(180deg, rgba(30,20,60,0.55) 0%, rgba(55,35,90,0.4) 55%, rgba(70,45,100,0.2) 100%)
}
.corral-mascotas-centro .corral-clima-atardecer,
.corral-mascotas-centro .corral-clima-noche {
  background: none
}
.corral-estrella {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #FFFDE7;
  border-radius: 50%;
  animation: corralEstrellaTitilar 2.6s ease-in-out infinite
}
@keyframes corralEstrellaTitilar {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1)
  }
  50% {
    opacity: 1;
    transform: scale(1.6)
  }
}
.corral-pixel-lluvia {
  position: absolute;
  top: -6%;
  width: 4px;
  height: 4px;
  background: rgba(179,229,252,0.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
  animation-name: corralPixelCaer;
  animation-timing-function: linear;
  animation-iteration-count: infinite
}
body.modo-oscuro .corral-pixel-lluvia {
  background: rgba(200,180,255,0.85)
}
@keyframes corralPixelCaer {
  0% {
    transform: translateY(0);
    opacity: 0
  }
  10% {
    opacity: 0.9
  }
  90% {
    opacity: 0.7
  }
  100% {
    transform: translateY(170px);
    opacity: 0
  }
}
.corral-corazon-flotante {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translate(-50%,0);
  font-size: 14px;
  pointer-events: none;
  z-index: 6;
  animation: corralCorazonSubir 1.1s ease-out forwards
}
@keyframes corralCorazonSubir {
  0% {
    transform: translate(-50%,0) scale(0.5) rotate(0deg);
    opacity: 0
  }
  20% {
    opacity: 1;
    transform: translate(-50%,-6px) scale(1.05) rotate(-6deg)
  }
  100% {
    transform: translate(calc(-50% + var(--corral-corazon-desvio,0px)),-44px) scale(1) rotate(6deg);
    opacity: 0
  }
}
.corral-pet.corral-pet-mimado .corral-pet-wrap {
  animation: corralPetMimado 0.55s ease-in-out 1
}
@keyframes corralPetMimado {
  0% {
    transform: scale(0.82) rotate(0deg)
  }
  30% {
    transform: scale(0.93,0.74) rotate(-6deg)
  }
  60% {
    transform: scale(0.77,0.90) rotate(5deg)
  }
  100% {
    transform: scale(0.82) rotate(0deg)
  }
}
.corral-pet.corral-pet-arrastrando {
  transition: none !important;
  z-index: 80 !important;
  cursor: grabbing
}
.corral-pet.corral-pet-arrastrando .corral-pet-wrap {
  transform: scale(0.92);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.28))
}
.corral-pet.corral-pet-objetivo .carnet-mascota-avatar::after {
  box-shadow: 0 0 0 7px rgba(255,213,79,0.75);
  animation: corralObjetivoPulso 0.7s ease-in-out infinite
}
@keyframes corralObjetivoPulso {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.85)
  }
  50% {
    opacity: 1;
    transform: scale(1)
  }
}
.corral-pet.corral-pet-abrazo .corral-pet-wrap {
  animation: corralPetAbrazo 0.45s ease-in-out 2
}
@keyframes corralPetAbrazo {
  0%,
  100% {
    transform: scale(0.82) translateY(0) rotate(0deg)
  }
  30% {
    transform: scale(0.90,0.76) translateY(-4px) rotate(-4deg)
  }
  60% {
    transform: scale(0.78,0.88) translateY(0) rotate(4deg)
  }
}
#corral-mascotas-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  color: #4E5D52;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  padding: 12px;
  box-sizing: border-box;
}
body.modo-oscuro #corral-mascotas-vacio {
  color: #F1DCF2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5)
}
.corral-pet {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: left 1.1s ease-in-out, top 1.1s ease-in-out;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none
}
.corral-pet * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none
}
.corral-pet-wrap {
  transform: scale(0.82)
}
.corral-pet-wrap.corral-pet-colarse {
  animation: corralPetColarseResorte 0.95s cubic-bezier(.34,1.56,.64,1) both
}
.corral-pet-wrap.corral-pet-colarse-glitch {
  animation: corralPetColarseGlitch 0.95s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes corralPetColarseGlitch {
  0% {
    transform: translateY(40px) scale(1.02,0.12) rotate(0deg);
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent)
  }
  6% {
    opacity: 1;
    filter: brightness(2.2) drop-shadow(6px 0 0 #84FFFF) drop-shadow(-6px 0 0 #FF5252)
  }
  12% {
    opacity: .2;
    filter: brightness(1.6) drop-shadow(-5px 2px 0 #FFEA00) drop-shadow(5px -2px 0 #FFFFFF)
  }
  18% {
    opacity: 1;
    filter: brightness(2) drop-shadow(5px -2px 0 #84FFFF) drop-shadow(-5px 2px 0 #FF5252)
  }
  26% {
    opacity: .3;
    filter: brightness(1.3) drop-shadow(-3px 0 0 #FF5252) drop-shadow(3px 0 0 #84FFFF)
  }
  34% {
    opacity: 1;
    transform: translateY(-8px) scale(0.64,1.08) rotate(-6deg);
    filter: brightness(1.1) drop-shadow(2px -1px 0 #84FFFF) drop-shadow(-2px 1px 0 #FF5252)
  }
  42% {
    filter: none
  }
  50% {
    transform: translateY(4px) scale(0.95,0.71) rotate(5deg)
  }
  64% {
    transform: translateY(-5px) scale(0.75,0.92) rotate(-3deg)
  }
  78% {
    transform: translateY(2px) scale(0.86,0.79) rotate(2deg)
  }
  90% {
    transform: translateY(-1px) scale(0.80,0.84) rotate(-1deg)
  }
  100% {
    transform: translateY(0) scale(0.82,0.82) rotate(0deg);
    opacity: 1;
    filter: none
  }
}
@keyframes corralPetColarseResorte {
  0% {
    transform: translateY(40px) scale(1.02,0.12) rotate(0deg);
    opacity: 0
  }
  12% {
    opacity: 1
  }
  34% {
    transform: translateY(-8px) scale(0.64,1.08) rotate(-6deg)
  }
  50% {
    transform: translateY(4px) scale(0.95,0.71) rotate(5deg)
  }
  64% {
    transform: translateY(-5px) scale(0.75,0.92) rotate(-3deg)
  }
  78% {
    transform: translateY(2px) scale(0.86,0.79) rotate(2deg)
  }
  90% {
    transform: translateY(-1px) scale(0.80,0.84) rotate(-1deg)
  }
  100% {
    transform: translateY(0) scale(0.82,0.82) rotate(0deg);
    opacity: 1
  }
}
.corral-pet.corral-pet-caminando .corral-pet-wrap {
  animation: corralPetCaminar 0.45s ease-in-out infinite
}
@keyframes corralPetCaminar {
  0%,
  100% {
    transform: scale(0.82) translateY(0)
  }
  50% {
    transform: scale(0.82) translateY(-6px)
  }
}
.corral-pet-nombre.corral-pet-nombre-conectado {
  background: #C8F0C0
}
.corral-pet-nombre.corral-pet-nombre-desconectado {
  background: #FADCE9
}
.corral-pet-nombre {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #222;
  background: rgba(255,255,255,0.75);
  border-radius: 4px;
  padding: 0 4px;
  margin-top: 1px;
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.corral-pet.corral-pet-invitable {
  cursor: context-menu
}
.corral-pet-propia .carnet-mascota-avatar {
  outline: 2px solid #FFD54F;
  outline-offset: 2px
}
.corral-pet-propia .corral-pet-nombre::before {
  content: "★ ";
  color: #F9A825
}
.corral-pet.corral-pet-bailando .corral-pet-wrap {
  animation: corralPetBailar 0.85s ease-in-out infinite
}
@keyframes corralPetBailar {
  0%,
  100% {
    transform: scale(0.82) translateY(0) rotate(0deg)
  }
  20% {
    transform: scale(0.86,0.77) translateY(-3px) rotate(-8deg)
  }
  40% {
    transform: scale(0.82) translateY(-8px) rotate(0deg)
  }
  60% {
    transform: scale(0.78,0.87) translateY(-3px) rotate(8deg)
  }
  80% {
    transform: scale(0.82) translateY(-6px) rotate(0deg)
  }
}
.corral-pet.corral-pet-festejando .corral-pet-wrap {
  animation: corralPetFestejar 0.5s ease-in-out 4
}
@keyframes corralPetFestejar {
  0% {
    transform: scale(0.82) translateY(0)
  }
  35% {
    transform: scale(0.87,0.74) translateY(-10px)
  }
  60% {
    transform: scale(0.77,0.90) translateY(0)
  }
  100% {
    transform: scale(0.82) translateY(0)
  }
}
.corral-pet.corral-pet-charlando .corral-pet-wrap {
  animation: corralPetCharlar 1.3s ease-in-out infinite
}
@keyframes corralPetCharlar {
  0%,
  100% {
    transform: scale(0.82) rotate(0deg)
  }
  25% {
    transform: scale(0.82) rotate(-5deg)
  }
  75% {
    transform: scale(0.82) rotate(5deg)
  }
}
.corral-pet.corral-pet-triste .corral-pet-wrap {
  animation: corralPetTriste 1.6s ease-in-out infinite
}
@keyframes corralPetTriste {
  0%,
  100% {
    transform: scale(0.82) translateY(0) rotate(0deg)
  }
  50% {
    transform: scale(0.79,0.84) translateY(3px) rotate(-3deg)
  }
}
.corral-pet.corral-pet-consolando .corral-pet-wrap {
  animation: corralPetConsolar 0.9s ease-in-out infinite
}
@keyframes corralPetConsolar {
  0%,
  100% {
    transform: scale(0.82) rotate(0deg) translateX(0)
  }
  50% {
    transform: scale(0.85,0.79) rotate(-4deg) translateX(-1px)
  }
}
.corral-pet.corral-pet-beat .corral-pet-wrap {
  animation: corralPetBeat 0.2s ease-out 1
}
@keyframes corralPetBeat {
  0% {
    transform: scale(0.82)
  }
  40% {
    transform: scale(0.90,0.72) translateY(-5px)
  }
  100% {
    transform: scale(0.82)
  }
}
.corral-rombo-cayendo {
  position: absolute;
  top: -8%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  pointer-events: none;
  z-index: 4;
  border: 2px solid #222;
  box-shadow: 1.5px 1.5px 0px #222;
  animation: corralRomboCaer 1.5s linear forwards;
}
.corral-rombo-don {
  background: #FF4081;
}
.corral-rombo-kat {
  background: #00BCD4;
}
@keyframes corralRomboCaer {
  0% {
    transform: translateY(0) rotate(45deg);
    opacity: 0
  }
  10% {
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    transform: translateY(var(--corral-nota-caida-alto,150px)) rotate(45deg);
    opacity: 0
  }
}
.corral-rombo-minijuego {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 50;
  pointer-events: none;
  user-select: none;
  background: #FFB6D9;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222, 0 0 0 3px rgba(255,255,255,.5);
  box-sizing: border-box;
  animation: corralRomboMinijuegoAparecer .22s ease-out, corralRomboMinijuegoFlotar 1s ease-in-out .22s infinite;
}
.corral-rombo-minijuego.corral-rombo-minijuego-comido {
  animation: corralRomboMinijuegoComido .18s ease-in forwards !important;
}
@keyframes corralRomboMinijuegoAparecer {
  0% {
    transform: translate(-50%,-50%) rotate(45deg) scale(0.2);
    opacity: 0
  }
  100% {
    transform: translate(-50%,-50%) rotate(45deg) scale(1);
    opacity: 1
  }
}
@keyframes corralRomboMinijuegoFlotar {
  0%,
  100% {
    transform: translate(-50%,-50%) rotate(45deg) translateY(0)
  }
  50% {
    transform: translate(-50%,-50%) rotate(45deg) translateY(-6px)
  }
}
@keyframes corralRomboMinijuegoComido {
  0% {
    transform: translate(-50%,-50%) rotate(45deg) scale(1);
    opacity: 1
  }
  100% {
    transform: translate(-50%,-50%) rotate(45deg) scale(1.8);
    opacity: 0
  }
}
.hud-minijuego-rombos {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  pointer-events: auto;
  background: #FFF8E1;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  font-family: 'Pixelify Sans',sans-serif;
  padding: 4px 8px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 94%;
  box-sizing: border-box;
}
.hud-minijuego-rombos-marcador {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: bold;
  color: #222;
  white-space: nowrap
}
.hud-minijuego-rombos-cerrar {
  padding: 1px 6px;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #EF9A9A;
  color: #222;
  border: 2px solid #222;
  cursor: pointer;
  line-height: 1.3
}
.hud-minijuego-rombos-gameover {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: bold;
  color: #D81B60;
  text-align: center
}
.hud-minijuego-rombos-gameover button {
  padding: 5px 12px;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #66BB6A;
  color: #FFF;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  cursor: pointer
}
body.modo-oscuro .hud-minijuego-rombos {
  background: #2b2140;
  border-color: #F1DCF2;
  box-shadow: 2px 2px 0px #F1DCF2
}
body.modo-oscuro .hud-minijuego-rombos-marcador {
  color: #F1DCF2
}
.corral-pet.corral-pet-atrapando .corral-pet-wrap {
  animation: corralPetAtrapar 0.5s ease-out 1
}
@keyframes corralPetAtrapar {
  0% {
    transform: scale(0.82) translateY(0)
  }
  40% {
    transform: scale(0.76,0.90) translateY(-15px)
  }
  70% {
    transform: scale(0.86,0.76) translateY(0)
  }
  100% {
    transform: scale(0.82) translateY(0)
  }
}
.corral-instrumento-flotante {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-size: 14px;
  pointer-events: none;
  z-index: 20;
  animation: corralInstrumentoBob 0.55s ease-in-out infinite;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8)
}
@keyframes corralInstrumentoBob {
  0%,
  100% {
    transform: translate(-50%,0) rotate(-8deg)
  }
  50% {
    transform: translate(-50%,-5px) rotate(8deg)
  }
}
.corral-pet.corral-pet-banda .corral-pet-wrap {
  animation: corralPetBailar 0.6s ease-in-out infinite
}
.corral-pelota-jugando {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  z-index: 25;
  transform: translate(-50%,-50%);
  transition: left 0.32s cubic-bezier(.4,0,.2,1), top 0.32s cubic-bezier(.4,0,.2,1);
}
.corral-pelota-jugando.corral-pelota-salir {
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.3)
}
.corral-pet.corral-pet-girando .corral-pet-wrap {
  animation: corralPetGirarFoca 3.4s cubic-bezier(.45,.05,.55,.95) 1
}
@keyframes corralPetGirarFoca {
  0% {
    transform: scale(0.82) translateX(0) rotate(0deg)
  }
  32% {
    transform: scale(0.82) translateX(var(--corral-giro-dx,-22px)) rotate(var(--corral-giro-grados,-720deg))
  }
  46% {
    transform: scale(0.82) translateX(var(--corral-giro-dx,-22px)) rotate(var(--corral-giro-grados,-720deg))
  }
  78% {
    transform: scale(0.82) translateX(var(--corral-giro-dx2,-40px)) rotate(var(--corral-giro-grados2,-1080deg))
  }
  100% {
    transform: scale(0.82) translateX(0) rotate(var(--corral-giro-grados2,-1080deg))
  }
}
.corral-burbuja.corral-burbuja-glitch {
  background: #1a1a1f;
  color: #7CFC7C;
  border-color: #0d0d10;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  text-shadow: 1px 0 #ff4d6d, -1px 0 #4dd0ff;
  animation: burbujaVsPop 0.4s cubic-bezier(.34,1.56,.64,1) both, corralGlitchJitter 0.15s steps(2) infinite
}
@keyframes corralGlitchJitter {
  0% {
    transform: translateX(-50%) translateY(0)
  }
  50% {
    transform: translateX(calc(-50% + 1px)) translateY(-1px)
  }
  100% {
    transform: translateX(calc(-50% - 1px)) translateY(0)
  }
}
.corral-nota-flotante {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  font-size: 13px;
  pointer-events: none;
  animation: corralNotaSubir 1.3s ease-out forwards;
  z-index: 20;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8)
}
@keyframes corralNotaSubir {
  0% {
    transform: translate(-50%,0) scale(0.5);
    opacity: 0
  }
  20% {
    opacity: 1;
    transform: translate(-50%,-8px) scale(1)
  }
  100% {
    transform: translate(-50%,-40px) scale(1.05);
    opacity: 0
  }
}
.corral-burbuja {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(1);
  margin-bottom: 10px;
  background: #FFFDE7;
  color: #222222;
  border: 2px solid #222222;
  border-radius: 10px;
  box-shadow: 2px 2px 0px #222222;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  width: max-content;
  max-width: 130px;
  z-index: 5;
  pointer-events: none;
  font-family: 'Pixelify Sans',sans-serif;
  opacity: 0;
  animation: burbujaVsPop 0.4s cubic-bezier(.34,1.56,.64,1) both
}
.corral-burbuja.corral-burbuja-salir {
  animation: corralBurbujaSalir 0.3s ease both
}
@keyframes corralBurbujaSalir {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1)
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6)
  }
}
.tarjeta-jugador-sala-mp {
  margin-bottom: 6px;
  animation: salaMpFilaEntrada 0.3s ease both
}
.tarjeta-jugador-sala-mp.listo {
  box-shadow: 4px 4px 0px #2E7D32;
  border-color: #2E7D32
}
.tarjeta-jugador-sala-mp .host-tag {
  position: relative;
  z-index: 2;
  font-size: 9px;
  background: #FFD54F;
  color: #222;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: bold;
  white-space: nowrap
}
.tarjeta-jugador-sala-mp .desconectado-tag {
  position: relative;
  z-index: 2;
  font-size: 9px;
  background: #FFCDD2;
  color: #B71C1C;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: bold;
  white-space: nowrap
}
.tarjeta-jugador-sala-mp-estado {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  background: rgba(255,255,255,0.6);
  border: 1px solid #222;
  border-radius: 4px;
  padding: 3px 6px;
  flex-shrink: 0
}
.tarjeta-jugador-sala-mp .btn-sala-mp-expulsar {
  position: relative;
  z-index: 2;
  background: #FF8A80 !important;
  color: #222 !important;
  font-size: 10px !important;
  padding: 4px 6px !important;
  flex-shrink: 0
}
.tarjeta-jugador-sala-mp .btn-sala-mp-agregar-amigo {
  position: relative;
  z-index: 2;
  background: #A5D6A7 !important;
  color: #222 !important;
  font-size: 10px !important;
  padding: 4px 6px !important;
  flex-shrink: 0
}
.tarjeta-solicitud {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF3E0;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 6px 8px;
  box-sizing: border-box;
}
.tarjeta-solicitud-nombre {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: bold;
  color: #D81B60;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.tarjeta-solicitud button {
  font-size: 10px !important;
  padding: 4px 8px !important;
  flex-shrink: 0
}
.btn-solicitud-aceptar {
  background-color: #A5D6A7 !important;
  background-image: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%) !important
}
.btn-solicitud-aceptar:hover {
  background-color: #81C784 !important;
  background-image: linear-gradient(135deg, #81C784 0%, #81C784 100%) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0px #222222 !important;
  animation: none !important
}
.btn-solicitud-rechazar {
  background-color: #FF8A80 !important;
  background-image: linear-gradient(135deg, #FFCDD2 0%, #FF8A80 100%) !important
}
.btn-solicitud-rechazar:hover {
  background-color: #EF5350 !important;
  background-image: linear-gradient(135deg, #EF5350 0%, #EF5350 100%) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0px #222222 !important;
  animation: none !important
}
.btn-solicitud-cancelar {
  background-color: #FFCC80 !important;
  background-image: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%) !important
}
.btn-solicitud-cancelar:hover {
  background-color: #FFB74D !important;
  background-image: linear-gradient(135deg, #FFB74D 0%, #FFB74D 100%) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0px #222222 !important;
  animation: none !important
}
#modal-reportar-mapa {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9700
}
#modal-reportar-bug {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
  z-index: 9700
}
#modal-cuenta-online input {
  font-family: 'Consolas','Courier New',monospace;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3px;
  padding: 8px;
  border: 2px solid #222;
  box-sizing: border-box;
}
.biblio-tabs-fuente {
  display: flex;
  gap: 8px;
  margin-bottom: 4px
}
.biblio-tab-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: bold;
  border: 3px solid #222;
  cursor: pointer;
  color: var(--fa-ink);
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--fa-glass-1) 0%, var(--fa-glass-2) 42%, rgba(255,255,255,0) 47%, rgba(255,255,255,0.10) 100%),linear-gradient(160deg, var(--fa-a, transparent), var(--fa-b, transparent) 55%, var(--fa-c, transparent) 100%);
  font-family: 'Pixelify Sans',sans-serif;
  box-shadow: 4px 4px 0px var(--fa-c, #222),0 10px 18px -10px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -10px 14px -6px rgba(255,255,255,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  transition: transform 0.1s ease,box-shadow 0.1s ease,filter 0.15s ease
}
.biblio-tab-btn:hover {
  transform: translate(-2px, -2px);
  filter: brightness(1.06) saturate(1.1);
  box-shadow: 6px 6px 0px var(--fa-c, #222),0 14px 22px -10px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,1),inset 0 -10px 14px -6px rgba(255,255,255,0.5)
}
.biblio-tab-btn.activa {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px var(--fa-c, #222),0 12px 20px -10px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -10px 14px -6px rgba(255,255,255,0.4)
}
.biblio-tab-btn.activa:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--fa-c, #222),0 14px 22px -10px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,1),inset 0 -10px 14px -6px rgba(255,255,255,0.5)
}
.tarjeta-mod {
  width: 100%;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 3px 3px 0px #222;
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px
}
.tarjeta-mod label.switch-mod {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px
}
.tarjeta-mod input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0
}
.tarjeta-mod .rebanada-mod {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #E0E0E0;
  border: 2px solid #222;
  transition: 0.15s
}
.tarjeta-mod .rebanada-mod:before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #FFFDE7;
  border: 2px solid #222;
  transition: 0.15s
}
.tarjeta-mod input:checked + .rebanada-mod {
  background: #A5D6A7
}
.tarjeta-mod input:checked + .rebanada-mod:before {
  transform: translateX(20px)
}
.tarjeta-mod-info {
  flex: 1
}
.tarjeta-mod-titulo {
  font-size: 14px;
  font-weight: bold;
  color: #222;
  margin: 0 0 4px 0
}
.tarjeta-mod-desc {
  font-size: 12px;
  color: #666;
  margin: 0
}
.switch-glass {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle
}
.switch-glass input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute
}
.switch-glass .slider-glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #ECEFF1 0%, #90A4AE 55%, #B0BEC5 100%);
  border: 2px solid #222;
  border-radius: 999px;
  transition: background 0.25s ease,box-shadow 0.25s ease;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.75),inset 0 -3px 5px rgba(0,0,0,0.18)
}
.switch-glass .slider-glass::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #FFFFFF 0%, #E1F5FE 45%, #80DEEA 100%);
  border: 2px solid #222;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3),inset 0 1px 2px rgba(255,255,255,0.85);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1),background 0.25s ease
}
.switch-glass input:checked + .slider-glass {
  background: linear-gradient(180deg, #DCEDC8 0%, #4CAF50 55%, #81C784 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.75),inset 0 -3px 5px rgba(0,0,0,0.18),0 0 9px rgba(76,175,80,0.6)
}
.switch-glass input:checked + .slider-glass::before {
  transform: translateX(22px);
  background: radial-gradient(circle at 35% 25%, #FFFFFF 0%, #F1F8E9 45%, #A5D6A7 100%)
}
.switch-glass input:focus-visible + .slider-glass {
  outline: 2px solid #4DD0E1;
  outline-offset: 2px
}
#contenedor-toast-nativo {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: min(calc(92 * var(--vw, 1vw)), 420px)
}
.toast-nativo {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  background: #FFFDE7;
  border: 3px solid #222;
  box-shadow: 5px 5px 0px #222;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Pixelify Sans',sans-serif;
  opacity: 0;
  transform: translateY(-30px);
  animation: toast-nativo-entrada 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards
}
.toast-nativo.saliendo {
  animation: toast-nativo-salida 0.3s ease-in forwards
}
.toast-nativo-icono {
  font-size: 22px;
  flex-shrink: 0
}
.toast-nativo-texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #222;
  font-weight: bold;
  line-height: 1.35;
  white-space: pre-line
}
.toast-nativo-exito {
  border-color: #2E7D32
}
.toast-nativo-exito .toast-nativo-icono {
  color: #2E7D32
}
.toast-nativo-error {
  border-color: #D32F2F;
  background: #FFF3F3
}
.toast-nativo-info {
  border-color: #0288D1
}
.toast-nativo.glitch-entrada {
  animation: toastNativoGlitchEntrada 0.26s steps(4,end) both
}
@keyframes toastNativoGlitchEntrada {
  0% {
    opacity: 0;
    transform: translateY(-30px) translateX(-6px) skewX(8deg) scale(0.92);
    clip-path: inset(0 0 60% 0);
    filter: brightness(2) saturate(0) hue-rotate(90deg)
  }
  20% {
    opacity: 1;
    transform: translateY(-6px) translateX(5px) skewX(-6deg) scale(0.97);
    clip-path: inset(40% 0 0 0)
  }
  45% {
    opacity: .35;
    transform: translateY(2px) translateX(-4px) scale(1);
    clip-path: inset(0 30% 0 0)
  }
  70% {
    opacity: 1;
    transform: translateY(0) translateX(3px) skewX(3deg);
    clip-path: inset(0 0 15% 0);
    filter: brightness(1.3) saturate(.4)
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) skewX(0deg) scale(1);
    clip-path: inset(0);
    filter: none
  }
}
.plataforma-android-juego .toast-nativo.glitch-entrada {
  animation: toastNativoGlitchEntradaLiviana 0.26s steps(3,end) both
}
@keyframes toastNativoGlitchEntradaLiviana {
  0% {
    opacity: 0;
    transform: translateY(-30px) translateX(-6px) skewX(8deg)
  }
  35% {
    opacity: .4;
    transform: translateY(-8px) translateX(-5px)
  }
  65% {
    opacity: 1;
    transform: translateY(0) translateX(3px) skewX(-2deg)
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) skewX(0deg)
  }
}
@keyframes toast-nativo-entrada {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
@keyframes toast-nativo-salida {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9)
  }
}
.fila-cancion-biblio.fila-online {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}
.btn-importar-online {
  background: #A5D6A7;
  border: 2px solid #222;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-importar-online.importado {
  background: #CFD8DC
}
.botones-fila-online {
  display: flex;
  gap: 6px;
  flex-shrink: 0
}
.btn-reportar-online {
  background: #FFCDD2;
  border: 2px solid #222;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-reportar-online:hover {
  background: #FF8A80
}
.opcion-motivo-reporte {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
}
.opcion-motivo-reporte input {
  flex-shrink: 0
}
.score-global-online {
  display: block;
  font-size: 11px;
  color: #FFD54F;
  font-weight: bold;
  text-shadow: 1px 1px 0 #222;
  margin-top: 2px
}
.online-lista-toolbar {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 2px 8px 2px;
  flex-shrink: 0
}
.online-orden-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #222
}
.online-orden-selector select {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  border: 2px solid #222;
  padding: 3px 4px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  cursor: pointer
}
.online-paginacion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #222
}
.btn-pag-online {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-pag-online:disabled {
  opacity: 0.4;
  cursor: default
}
.contenedor-reacciones-online {
  display: flex;
  gap: 6px;
  margin-top: 4px
}
.btn-reaccion-online {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-reaccion-online.reaccion-like.activa {
  background: #A5D6A7
}
.btn-reaccion-online.reaccion-dislike.activa {
  background: #EF9A9A
}
#modal-lista-canciones {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  height: calc(100 * var(--vh, 1vh));
  background: linear-gradient(135deg, rgba(140,89,111,0.55) 0%, rgba(107,67,90,0.62) 55%, rgba(74,46,58,0.72) 100%);
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 9000;
  box-sizing: border-box;
  padding: 6px 28px;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.5s ease
}
#biblio-fondo-cancion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.5s ease,background-image 0.2s ease
}
#biblio-fondo-cancion.activo {
  opacity: 0.4
}
.biblio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%
}
#widget-perfil-biblioteca {
  width: clamp(150px, calc(12 * var(--vw, 1vw)), 230px);
  flex-shrink: 0;
  background: #0D0D0D;
  border: 2px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden
}
#widget-perfil-biblioteca .cmd-titulo-widget {
  background: #AB47BC
}
#widget-perfil-biblioteca .cmd-cuerpo-widget {
  gap: 6px
}
@media (max-height: 640px) and (pointer: coarse) {
  #widget-perfil-biblioteca .cmd-titulo-widget {
    padding: 2px 6px;
    font-size: 9px
  }
  #widget-perfil-biblioteca .cmd-cuerpo-widget {
    padding: 4px 6px 5px 6px;
    gap: 3px
  }
  #texto-perfil-precision-promedio-biblio {
    display: none
  }
}
@media (max-width: 640px) {
  #widget-perfil-biblioteca {
    width: clamp(96px, calc(30 * var(--vw, 1vw)), 150px)
  }
  #widget-perfil-biblioteca .cmd-titulo-widget {
    padding: 3px 6px;
    font-size: 9px
  }
  #widget-perfil-biblioteca .cmd-cuerpo-widget {
    padding: 5px 6px 6px 6px;
    gap: 4px
  }
  #widget-perfil-biblioteca .perfil-info-linea {
    font-size: 10px
  }
  #widget-perfil-biblioteca .texto-perfil-xp-mini {
    font-size: 8px
  }
}
#widget-perfil-biblioteca .barra-xp-contenedor {
  width: 100%;
  height: 10px;
  background: #1A1A1A;
  border: 2px solid #444;
  box-sizing: border-box;
  overflow: hidden
}
#widget-perfil-biblioteca .barra-xp-relleno {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00E5FF, #FF4081, #00E5FF);
  background-size: 200% 100%;
  animation: brillo-nivel-plus 4s linear infinite;
  transition: width 0.4s ease
}
#widget-perfil-biblioteca .texto-perfil-xp-mini {
  color: #69F0AE;
  font-family: 'Consolas','Courier New',monospace
}
.texto-perfil-xp-mini {
  font-size: 10px;
  color: #6B435A;
  font-weight: bold;
  text-align: right
}
.perfil-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 2px
}
.perfil-sticker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFDE7;
  border: 2px solid #222222;
  box-shadow: 1px 1px 0px #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  cursor: default
}
.perfil-sticker:nth-child(3n+1) {
  transform: rotate(-8deg);
  background: #FFECB3
}
.perfil-sticker:nth-child(3n+2) {
  transform: rotate(6deg);
  background: #B3E5FC
}
.perfil-sticker:nth-child(3n+3) {
  transform: rotate(-4deg);
  background: #F8BBD0
}
.biblio-titulo {
  margin: 0;
  color: #FFFDE7;
  font-size: 26px;
  text-shadow: 3px 3px 0px #222;
  white-space: nowrap;
  flex: 1;
  text-align: center
}
.btn-engranaje-biblio {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  font-size: 22px;
  background-color: #A5D6A7;
  border: 3px solid #222;
  box-shadow: 4px 4px 0px #222;
  cursor: pointer;
  transition: all 0.1s ease
}
.btn-engranaje-biblio:hover {
  background-color: #81C784;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #222
}
.btn-engranaje-biblio:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #222
}
.biblio-buscador {
  max-width: 640px
}
.biblio-topbar-centro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center
}
.biblio-topbar-centro .biblio-buscador {
  max-width: none
}
.biblio-topbar-centro .biblio-tabs-fuente {
  margin-bottom: 0
}
@media (max-width: 640px) {
  .biblio-tabs-fuente {
    flex-wrap: wrap;
    gap: 6px
  }
  .biblio-tab-btn {
    padding: 6px 10px;
    font-size: 11px
  }
  .contenedor-busqueda-y2k {
    padding: 3px 6px;
    gap: 6px
  }
  .contenedor-busqueda-y2k span,
  .contenedor-busqueda-y2k input {
    font-size: 12px
  }
}
.biblio-cuerpo {
  flex: 1;
  display: flex;
  gap: 16px;
  width: 100%;
  min-height: 0;
  margin-top: 0
}
.biblio-lista-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px
}
.biblio-panel-derecho {
  width: clamp(240px, calc(19.5 * var(--vw, 1vw)), 375px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0
}
.panel-record-grande {
  flex: 1;
  background: linear-gradient(160deg, rgba(38,198,218,0.55) 0%, rgba(178,235,242,0.6) 55%, rgba(255,255,255,0.55) 100%);
  border: 3px solid #222;
  box-shadow: 5px 5px 0px #222;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column
}
.panel-record-contenido {
  position: relative;
  z-index: 1;
  padding: 8px 14px 8px 8px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #FF4081 #E0F7FA
}
.panel-record-contenido::-webkit-scrollbar {
  width: 8px
}
.panel-record-contenido::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #E0F7FA, #FFD6E8)
}
.panel-record-contenido::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4DD0E1, #FF4081);
  border: 1px solid #222
}
.cubitos-fondo-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0
}
.cubito-particula {
  position: absolute;
  bottom: -16px;
  border: 2px solid #222;
  opacity: 0;
  animation-name: cubito-flotar-arriba;
  animation-timing-function: linear;
  animation-iteration-count: infinite
}
@keyframes cubito-flotar-arriba {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0
  }
  10% {
    opacity: 0.85
  }
  88% {
    opacity: 0.85
  }
  100% {
    transform: translateY(-480px) rotate(200deg);
    opacity: 0
  }
}
.cubito-particula:nth-child(1) {
  left: 6%;
  width: 8px;
  height: 8px;
  background: #FFC1E3;
  animation-duration: 7.5s;
  animation-delay: 0s
}
.cubito-particula:nth-child(2) {
  left: 18%;
  width: 12px;
  height: 12px;
  background: #B3E5FC;
  animation-duration: 9s;
  animation-delay: 1.2s
}
.cubito-particula:nth-child(3) {
  left: 30%;
  width: 9px;
  height: 9px;
  background: #F8BBD0;
  animation-duration: 6.8s;
  animation-delay: 2.4s
}
.cubito-particula:nth-child(4) {
  left: 44%;
  width: 11px;
  height: 11px;
  background: #B2EBF2;
  animation-duration: 8.3s;
  animation-delay: 0.6s
}
.cubito-particula:nth-child(5) {
  left: 58%;
  width: 8px;
  height: 8px;
  background: #FFD1E8;
  animation-duration: 7s;
  animation-delay: 3.1s
}
.cubito-particula:nth-child(6) {
  left: 70%;
  width: 13px;
  height: 13px;
  background: #BBDEFB;
  animation-duration: 9.6s;
  animation-delay: 1.8s
}
.cubito-particula:nth-child(7) {
  left: 82%;
  width: 9px;
  height: 9px;
  background: #F48FB1;
  animation-duration: 7.8s;
  animation-delay: 2.9s
}
.cubito-particula:nth-child(8) {
  left: 92%;
  width: 10px;
  height: 10px;
  background: #B3E0F2;
  animation-duration: 8.9s;
  animation-delay: 0.2s
}
.biblio-ayuda-teclado {
  text-align: center;
  font-size: 11px;
  color: #FFFDE7;
  opacity: 0.85
}
.biblio-acciones-secundarias {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%
}
.biblio-acciones-secundarias button:hover {
  transform: translate(-2px, -2px);
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 5px 5px 0px var(--fa-c, #222),0 10px 18px -8px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,1),inset 0 -8px 12px -6px rgba(255,255,255,0.5)
}
.biblio-acciones-secundarias button:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--fa-c, #222)
}
.biblio-footer {
  display: flex;
  justify-content: center;
  width: 100%
}
.biblio-acciones-cancion {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%
}
.biblio-acciones-cancion .btn-jugar-item-panel {
  padding: 9px 24px;
  font-size: 15px;
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: bold;
  border: 3px solid #222;
  cursor: pointer;
  color: var(--fa-ink);
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--fa-glass-1) 0%, var(--fa-glass-2) 42%, rgba(255,255,255,0) 47%, rgba(255,255,255,0.10) 100%),linear-gradient(160deg, var(--fa-a, transparent), var(--fa-b, transparent) 55%, var(--fa-c, transparent) 100%);
  box-shadow: 4px 4px 0px var(--fa-c, #222),0 10px 20px -10px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -10px 14px -6px rgba(255,255,255,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75),0 0 8px var(--fa-glow, transparent);
  transition: transform 0.1s ease,box-shadow 0.1s ease,filter 0.15s ease
}
.biblio-acciones-cancion .btn-jugar-item-panel {
  padding: 13px 36px;
  font-size: 19px;
  position: relative;
  overflow: hidden
}
.biblio-acciones-cancion button:hover {
  transform: translate(-2px, -2px);
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 6px 6px 0px var(--fa-c, #222),0 14px 24px -10px var(--fa-glow, transparent),inset 0 1px 0 rgba(255,255,255,1),inset 0 -10px 14px -6px rgba(255,255,255,0.5)
}
.biblio-acciones-cancion button:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--fa-c, #222)
}
@keyframes ola-liquido-flujo {
  0% {
    background-position: 0 0,0 0
  }
  100% {
    background-position: -120px 0,-80px 0
  }
}
@keyframes ola-liquido-flujo-chica {
  0% {
    background-position: 0 0,0 0
  }
  100% {
    background-position: -48px 0,-32px 0
  }
}
.tira-difs-panel .btn-dif-record-item,
.biblio-acciones-cancion .btn-jugar-item-panel {
  position: relative;
  overflow: hidden
}
.biblio-acciones-cancion .btn-jugar-item-panel::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -10%;
  height: 65%;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cpath d='M0 17 Q15 4 30 17 T60 17 T90 17 T120 17 V34 H0 Z' fill='%234DD0E1' fill-opacity='0.3'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M0 15 Q10 3 20 15 T40 15 T60 15 T80 15 V30 H0 Z' fill='%2300BCD4' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 100%,80px 100%;
  background-position: 0 0,0 0;
  animation: ola-liquido-flujo 3s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease
}
.biblio-acciones-cancion .btn-jugar-item-panel:hover::after {
  opacity: 1
}
.tira-difs-panel .btn-dif-record-item::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -8%;
  height: 60%;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M0 8 Q6 1.5 12 8 T24 8 T36 8 T48 8 V16 H0 Z' fill='%234DD0E1' fill-opacity='0.3'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'%3E%3Cpath d='M0 7 Q4 1 8 7 T16 7 T24 7 T32 7 V14 H0 Z' fill='%2300BCD4' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 100%,32px 100%;
  background-position: 0 0,0 0;
  animation: ola-liquido-flujo-chica 1.6s linear infinite
}
.fila-cancion-biblio {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #222222;
  border-left: 8px solid transparent;
  box-shadow: 2px 2px 0px #222222;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.1s;
  position: relative;
  overflow: hidden
}
.fila-cancion-biblio:hover {
  background: rgba(178, 235, 242, 0.55)
}
.fila-cancion-biblio.seleccionada {
  border-left-color: #FF4081;
  background: rgba(178, 235, 242, 0.75)
}
.fila-cancion-biblio.foco-teclado-cancion {
  outline: 3px solid #00E5FF;
  outline-offset: -3px
}
.fila-cancion-biblio.es-favorita {
  border-left-color: #FFC107
}
.canvas-eq-fila-biblio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
  pointer-events: none
}
.fila-cancion-biblio > .info-cancion-lista,
.fila-cancion-biblio > .fila-meta-derecha {
  position: relative;
  z-index: 1
}
body.modo-oscuro .canvas-eq-fila-biblio {
  opacity: 0.85
}
.fila-elegir-editar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden
}
.fila-elegir-editar-info .fila-elegir-editar-nombre {
  font-weight: bold;
  color: #222;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.fila-elegir-editar-info .fila-elegir-editar-meta {
  font-size: 10px;
  color: #666
}
.fila-elegir-editar-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0
}
.btn-elegir-editar-eliminar {
  padding: 5px 8px;
  font-size: 11px;
  background: #EEEEEE
}
.btn-elegir-editar-eliminar:hover {
  background: #FF8A80
}
.fila-meta-derecha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 10px
}
.fila-meta-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  padding-top: 4px
}
.fila-meta-badges .badge-rombos {
  color: #FF4081;
  letter-spacing: 1px
}
.rombos-dificultad-cont {
  display: inline-flex;
  align-items: center;
  line-height: 1
}
.rombo-dif {
  display: inline-block;
  width: 1em;
  text-align: center;
  color: #666;
  opacity: .35;
  transition: opacity .15s ease, color .15s ease
}
.rombo-dif.lleno {
  color: #FF4081;
  opacity: 1
}
.rombo-dif-ex.lleno {
  color: #FF1744;
  animation: rombo-ex-pulso 1s infinite ease-in-out
}
@keyframes rombo-ex-pulso {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 2px rgba(255, 23, 68, .6);
  }
  50% {
    transform: scale(1.25);
    text-shadow: 0 0 6px rgba(255, 23, 68, 1);
  }
}
.btn-favorita-fila {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  color: #BDBDBD;
  transition: transform 0.1s ease
}
.btn-favorita-fila:hover {
  transform: scale(1.2)
}
.btn-favorita-fila.activa {
  color: #FFC107
}
.local-lista-toolbar select#select-orden-local {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px;
  border: 2px solid #222;
  padding: 3px 4px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  cursor: pointer
}
.btn-filtro-favoritas-local.activa {
  background: #FFC107
}
.puntaje-ola-grande {
  display: flex;
  justify-content: center;
  gap: 1px;
  font-size: 46px;
  font-weight: bold;
  color: #FF66B2;
  text-shadow: 3px 3px 0px #222
}
.puntaje-ola-grande span {
  display: inline-block;
  animation: ola-digito-vertical 1.6s ease-in-out infinite
}
.rango-ola-grande {
  display: flex;
  justify-content: center;
  gap: 3px;
  font-size: 76px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 4px 4px 0px #222;
  margin-bottom: 6px
}
.rango-ola-grande span {
  display: inline-block;
  animation: ola-digito-vertical 1.6s ease-in-out infinite
}
.rango-con-badge-tras {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px
}
.rango-con-badge-tras .rango-ola-grande {
  position: relative;
  z-index: 1;
  margin-bottom: 0
}
.combo-badge-texto-tras-letra {
  position: absolute;
  z-index: 2;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  white-space: nowrap;
  opacity: 0.78;
  pointer-events: none;
  margin: 0
}
@keyframes ola-digito-vertical {
  0%,
  100% {
    transform: translateY(0px)
  }
  50% {
    transform: translateY(10px)
  }
}
.btn-dif-record-item.foco-teclado-dif {
  outline: 3px solid #00E5FF;
  outline-offset: 1px
}
.portada-panel-cancion {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border: 3px solid #222;
  box-shadow: 2px 2px 0px #222;
  overflow: hidden;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #FCE4EC 0%, #E1BEE7 50%, #B3E5FC 100%);
  flex-shrink: 0;
  flex-grow: 0
}
.portada-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transform-origin: 50% 50%;
  animation: portadaPanelImgRespirar 6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease
}
.portada-panel-cancion:hover .portada-panel-img {
  animation-play-state: paused;
  transform: scale(1.06) rotate(-0.6deg);
  filter: saturate(1.15) brightness(1.03)
}
@keyframes portadaPanelImgRespirar {
  0%,
  100% {
    transform: scale(1) rotate(0deg)
  }
  50% {
    transform: scale(1.025) rotate(0.35deg)
  }
}
@media (prefers-reduced-motion: reduce) {
  .portada-panel-img {
    animation: none
  }
}
.portada-panel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);
  z-index: 0;
  animation: portada-placeholder-flotar 2.4s ease-in-out infinite
}
@keyframes portada-placeholder-flotar {
  0%,
  100% {
    transform: translateY(0px) rotate(-4deg)
  }
  50% {
    transform: translateY(-8px) rotate(4deg)
  }
}
.portada-panel-cancion.portada-panel-sinimagen .portada-panel-img {
  display: none
}
.portada-panel-overlay-densidad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-top: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.75) 100%);
  box-sizing: border-box;
}
.portada-densidad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 2px
}
.portada-densidad-titulo {
  font-size: 10px;
  font-weight: bold;
  color: #FFECF3;
  text-shadow: 1px 1px 0px #000
}
.portada-densidad-stats {
  font-size: 9px;
  font-weight: bold;
  color: #FFECF3;
  text-shadow: 1px 1px 0px #000;
  opacity: 0.9
}
.portada-densidad-canvas {
  width: 100%;
  height: 30px;
  display: block;
  background: transparent;
  box-sizing: border-box;
}
.tira-difs-panel {
  display: flex;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  flex-shrink: 0
}
.tira-difs-panel .btn-dif-record-item {
  flex: 1;
  min-width: 0;
  padding: 6px 2px 5px;
  font-size: 11px;
  border-radius: 0px;
  border: 2px solid #222;
  background: #FFFDE7;
  color: #222;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: 2px 2px 0px #222;
  transition: all 0.1s ease
}
.tira-difs-panel .btn-dif-record-item:hover {
  background: #FFF3D6
}
.tira-difs-panel .btn-dif-record-item .btn-dif-nombre {
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}
.tira-difs-panel .btn-dif-record-item .btn-dif-nivel {
  font-size: 13px;
  font-weight: bold
}
.tira-difs-panel .btn-dif-record-item.activo {
  background: #222;
  color: #FFF;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--color-dif, #80DEEA);
  border-color: var(--color-dif, #80DEEA)
}
.tarjeta-record-panel {
  background: rgba(255, 253, 231, 0.9);
  border: 2px solid #222;
  box-shadow: 3px 3px 0px #222;
  padding: 6px 10px;
  box-sizing: border-box;
  flex-shrink: 0
}
.tarjeta-record-panel .rango-ola-grande {
  font-size: 52px;
  margin-bottom: 2px
}
.tarjeta-record-panel .rango-con-badge-tras {
  margin-bottom: 2px
}
.tarjeta-record-panel .combo-badge-texto-tras-letra {
  font-size: 11px;
  padding: 3px 9px
}
.tarjeta-record-panel .puntaje-ola-grande {
  font-size: 32px
}
.tarjeta-record-panel .fila-record-personal {
  margin-top: 4px !important;
  margin-bottom: 4px !important
}
.tarjeta-record-panel-clickable {
  cursor: pointer;
  transition: transform 0.12s ease,box-shadow 0.12s ease
}
.tarjeta-record-panel-clickable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #222
}
.tarjeta-record-panel-clickable:active {
  transform: translate(0px, 0px);
  box-shadow: 1px 1px 0px #222
}
.tarjeta-record-panel-replay-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #FFFDE7;
  background: #8E24AA;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 4px 8px;
  animation: respirarInvitacion 1.8s ease-in-out infinite
}
#badge-modo-replay {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  background: #8E24AA;
  color: #FFFDE7;
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: bold;
  font-size: 13px;
  padding: 6px 16px;
  border: 2px solid #222;
  box-shadow: 3px 3px 0px #222;
  pointer-events: none;
  letter-spacing: 0.5px
}
.tarjeta-modal,
.tarjeta-resultados,
.tarjeta-pausa,
.tarjeta-gameover {
  background: #FFFDE7;
  border: 3px solid #222222;
  border-radius: 0px;
  box-shadow: 5px 5px 0px #222222;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 340px;
  max-width: 100%;
  overflow-x: hidden;
  align-items: center;
  color: #222222;
  box-sizing: border-box;
}
.tarjeta-modal {
  background: linear-gradient(160deg, #B3E5FC 0%, #E1F5FE 45%, #F8BBD0 100%)
}
.tarjeta-pausa {
  scale: max(var(--escala-ui-juego, 1), 0.85)
}
.tarjeta-resultados,
.tarjeta-gameover,
.modal-config .tarjeta-modal {
  scale: max(var(--escala-ui-juego, 1), 0.62)
}
body.modo-oscuro .tarjeta-modal {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 30%, #8C6690 60%, #B98CA0 85%, #E0C4CE 100%);
  color: #FFF6FB
}
body.modo-oscuro .tarjeta-modal [style*="background:linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%)"],
body.modo-oscuro .tarjeta-modal [style*="background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%)"],
body.modo-oscuro .sala-mp-opcion-card,
body.modo-oscuro .sala-mp-jugador-fila,
body.modo-oscuro .sala-mp-fila-ronda,
body.modo-oscuro .sala-mp-cancion-fila,
body.modo-oscuro .tarjeta-perfil-item {
  color: #222222 !important
}
body.modo-oscuro #sala-mp-bloque-codigo,
body.modo-oscuro #sala-mp-codigo-actual,
body.modo-oscuro #sala-mp-xp,
body.modo-oscuro #res-perfil-xp {
  color: #222222 !important
}
.texto-ventana-modal {
  color: #666
}
body.modo-oscuro .texto-ventana-modal {
  color: #F1DCF2
}
body.modo-oscuro #cuenta-online-estado {
  color: #FFB74D !important
}
body.modo-oscuro #nombre-perfil-stats {
  color: #FF8FC7 !important
}
body.modo-oscuro #contenedor-pasos-tutorial {
  color: #F1DCF2 !important
}
body.modo-oscuro #amigos-bloqueado-msg,
body.modo-oscuro #sala-mp-bloqueado-msg,
body.modo-oscuro #sala-mp-acepta-cuenta {
  color: #FFB74D !important
}
.subtitulo-config-y2k {
  color: #D81B60
}
body.modo-oscuro .subtitulo-config-y2k {
  color: #F1DCF2
}
body.modo-oscuro #panel-controles-editor {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 4px 4px 0px #332B3D;
  color: #FFF6FB
}
body.modo-oscuro #panel-controles-editor .panel-controles-titulo {
  color: #FF9EC4
}
body.modo-oscuro #panel-controles-editor [style*="color:#666"],
body.modo-oscuro #panel-controles-editor [style*="color: #666"] {
  color: #E9D4DD !important
}
body.modo-oscuro #panel-controles-editor [style*="color:#00838F"],
body.modo-oscuro #panel-controles-editor [style*="color: #00838F"] {
  color: #4DD0E1 !important
}
body.modo-oscuro #panel-controles-editor [style*="color:#D81B60"],
body.modo-oscuro #panel-controles-editor [style*="color: #D81B60"] {
  color: #FF9EC4 !important
}
body.modo-oscuro #panel-controles-editor [style*="color:#222"],
body.modo-oscuro #panel-controles-editor [style*="color: #222"] {
  color: #FFF6FB !important
}
body.modo-oscuro #panel-controles-editor .grupo-opciones-borde,
body.modo-oscuro #panel-controles-editor .avanzado-panel,
body.modo-oscuro #panel-controles-editor #fila-checks-visual,
body.modo-oscuro #panel-controles-editor #lista-visuales {
  border-color: #B98CA0
}
body.modo-oscuro #panel-controles-editor .panel-letras {
  border-top-color: #B98CA0
}
body.modo-oscuro #panel-controles-editor .btn-toggle-avanzado {
  background: #6B4E7A;
  color: #FFF6FB;
  border-color: #332B3D;
  box-shadow: 2px 2px 0px #332B3D
}
body.modo-oscuro #panel-controles-editor .item-letra,
body.modo-oscuro #panel-controles-editor .popover-ayuda-audio,
body.modo-oscuro #panel-controles-editor .popover-recursos,
body.modo-oscuro #panel-controles-editor .lista-letras {
  color: #222222
}
body.modo-oscuro #panel-controles-editor .lista-letras [style*="color:#666"] {
  color: #222222 !important
}
body.modo-oscuro #contenedor-logros [style*="color:#666"] {
  color: #E8DCF2 !important
}
body.modo-oscuro #panel-ajuste-nota {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 3px 3px 0px #332B3D;
  color: #FFF6FB
}
body.modo-oscuro #panel-ajuste-nota [style*="color:#D81B60"],
body.modo-oscuro #panel-ajuste-nota [style*="color: #D81B60"] {
  color: #FF9EC4 !important
}
body.modo-oscuro #panel-ajuste-nota .separador-panel-nota {
  background: #B98CA0
}
body.modo-oscuro #panel-ajuste-nota-abajo {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 3px 3px 0px #332B3D;
  color: #FFF6FB
}
body.modo-oscuro #panel-ajuste-nota-abajo .separador-panel-nota {
  background: #B98CA0
}
#barra-mantener-salir-pausa {
  width: 200px;
  height: 8px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: -4px
}
#barra-mantener-salir-pausa-relleno {
  height: 100%;
  width: 0%;
  background: #FF4081;
  transition: width linear
}
#texto-mantener-salir-pausa {
  font-size: 11px;
  color: #666;
  text-align: center;
  margin-top: -6px;
  min-height: 14px
}
#overlay-salir-espacio-mp {
  display: none;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none
}
#barra-salir-espacio-mp-track {
  width: 240px;
  height: 10px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 3px 3px 0px #222222
}
#barra-salir-espacio-mp-relleno {
  height: 100%;
  width: 0%;
  background: #FF4081;
  transition: width linear
}
#texto-salir-espacio-mp {
  font-size: 12px;
  font-weight: bold;
  color: #FFFDE7;
  text-shadow: 1px 1px 0 #222,-1px -1px 0 #222,1px -1px 0 #222,-1px 1px 0 #222;
  text-align: center
}
#cuerpo-scroll-personalizar {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain
}
.grid-personalizar-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.grid-personalizar-perfil > .cabecera-columna-personalizar-sticky,
.grid-personalizar-perfil > .columna-personalizar-perfil {
  flex: 1 1 calc(50% - 9px);
  min-width: 0;
  box-sizing: border-box;
}
.columna-personalizar-perfil {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
.mini-ventana-personalizar {
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%)
}
.cabecera-columna-personalizar-sticky .mini-ventana-personalizar {
  box-shadow: none
}
.mini-ventana-titulo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #00ACC1 0%, #26C6DA 35%, #B2EBF2 70%, #E0F7FA 100%);
  border-bottom: 2px solid #222222;
  padding: 4px 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #222222
}
.mini-ventana-titulo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(#26C6DA 20%, transparent 20%),radial-gradient(#E0F7FA 20%, transparent 20%);
  background-position: 0 0,3px 3px;
  background-size: 6px 6px;
  opacity: 0.15;
  pointer-events: none
}
.mini-ventana-titulo > span {
  position: relative;
  z-index: 1
}
.mini-ventana-titulo .mini-ventana-titulo-texto::before {
  content: '◆ ';
  font-size: 9px;
  vertical-align: 1px;
  opacity: 0.65
}
.mini-ventana-titulo .mini-ventana-titulo-hint {
  font-weight: normal;
  color: #666;
  font-size: 10px;
  white-space: nowrap
}
.mini-ventana-cuerpo {
  padding: 8px
}
.separador-rombo-personalizar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px
}
.separador-rombo-personalizar .linea-separador-rombo {
  flex: 1;
  height: 1px;
  background: rgba(34,34,34,0.18)
}
.separador-rombo-personalizar .rombo-separador-icono {
  width: 7px;
  height: 7px;
  background: #222222;
  border: 1px solid #222222;
  transform: rotate(45deg);
  flex-shrink: 0
}
.titulo-columna-personalizar {
  font-size: 14px;
  font-weight: bold;
  color: #FF4081;
  text-align: center;
  padding: 4px 0 6px;
  margin: -2px -2px 4px;
  background: #C7EBFB;
  border-bottom: 2px solid #222222
}
.cabecera-columna-personalizar-sticky {
  background: linear-gradient(180deg, #B3E5FC 0%, #E1F5FE 45%, #F6D3E5 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 2px 26px;
  margin: -2px -2px 0;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 5
}
.cabecera-columna-personalizar-sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 22px;
  background: linear-gradient(180deg, #F6D3E5 0%, rgba(246,211,229,0) 100%);
  pointer-events: none;
  z-index: 4
}
body.modo-oscuro .cabecera-columna-personalizar-sticky {
  background: linear-gradient(180deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%)
}
body.modo-oscuro .cabecera-columna-personalizar-sticky::after {
  background: linear-gradient(180deg, #8C6690 0%, rgba(140,102,144,0) 100%)
}
body.modo-oscuro .titulo-columna-personalizar {
  background: #4A3B5C;
  color: #FF9EC4
}
body.modo-oscuro .mini-ventana-personalizar {
  background: linear-gradient(135deg, #4A3B5C 0%, #6B4E7A 100%);
  border-color: #332B3D
}
body.modo-oscuro .mini-ventana-titulo {
  background: linear-gradient(90deg, #3A2E45 0%, #6B4E7A 35%, #8C6690 70%, #B98CA0 100%);
  border-bottom-color: #332B3D;
  color: #FFF6FB
}
body.modo-oscuro .mini-ventana-titulo .mini-ventana-titulo-hint {
  color: #E9D4DD
}
body.modo-oscuro .encabezado-ventana-y2k {
  background: linear-gradient(90deg, #3A2E45 0%, #6B4E7A 35%, #8C6690 70%, #B98CA0 100%);
  color: #FFF6FB
}
body.modo-oscuro .encabezado-ventana-y2k::before {
  background-image: radial-gradient(#6B4E7A 20%, transparent 20%),radial-gradient(#B98CA0 20%, transparent 20%)
}
body.modo-oscuro .mini-ventana-cuerpo {
  color: #FFF6FB
}
body.modo-oscuro .mini-ventana-cuerpo [style*="color:#666"],
body.modo-oscuro .mini-ventana-cuerpo [style*="color: #666"],
body.modo-oscuro .mini-ventana-cuerpo [style*="color:#888"],
body.modo-oscuro .mini-ventana-cuerpo [style*="color: #888"] {
  color: #E9D4DD !important
}
body.modo-oscuro #selector-aura-izq-mascota .swatch-accesorio-mascota,
body.modo-oscuro #selector-aura-der-mascota .swatch-accesorio-mascota {
  color: #222222
}
body.modo-oscuro .mini-ventana-cuerpo label[style*="color:#222"],
body.modo-oscuro .mini-ventana-cuerpo label[style*="color: #222"] {
  color: #FFF6FB !important
}
body.modo-oscuro .hint-variantes-cara {
  color: #E9D4DD
}
body.modo-oscuro .fila-pase-mascota-nivel {
  color: #222222 !important
}
@media (max-width: 640px), (max-height: 640px) and (pointer: coarse) {
  .grid-personalizar-perfil > .cabecera-columna-personalizar-sticky,
  .grid-personalizar-perfil > .columna-personalizar-perfil {
    flex: 1 1 100%
  }
  .grid-personalizar-perfil > .cabecera-columna-personalizar-sticky {
    position: static
  }
  .grid-personalizar-perfil > .cabecera-columna-personalizar-sticky:nth-child(1) {
    order: 1
  }
  .grid-personalizar-perfil > .columna-personalizar-perfil:nth-child(3) {
    order: 2
  }
  .grid-personalizar-perfil > .cabecera-columna-personalizar-sticky:nth-child(2) {
    order: 3
  }
  .grid-personalizar-perfil > .columna-personalizar-perfil:nth-child(4) {
    order: 4
  }
}
.tarjeta-modal {
  padding: clamp(10px, calc(2.2 * var(--vw, 1vw)), 20px)
}
.grid-personalizar-perfil {
  gap: clamp(8px, calc(2 * var(--vw, 1vw)), 18px)
}
.columna-personalizar-perfil {
  gap: clamp(6px, calc(1.6 * var(--vw, 1vw)), 14px)
}
.cabecera-columna-personalizar-sticky {
  gap: clamp(6px, calc(1.6 * var(--vw, 1vw)), 16px);
  padding-bottom: clamp(10px, calc(2.4 * var(--vw, 1vw)), 26px)
}
.mini-ventana-cuerpo {
  padding: clamp(5px, calc(1 * var(--vw, 1vw)), 8px)
}
.encabezado-ventana-y2k {
  width: 100%;
  background: linear-gradient(90deg, #00ACC1 0%, #26C6DA 35%, #B2EBF2 70%, #E0F7FA 100%);
  border-bottom: 2px solid #222222;
  padding: clamp(3px, calc(0.6 * var(--vw, 1vw)), 4px) clamp(5px, calc(1.2 * var(--vw, 1vw)), 8px);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: clamp(12px, calc(2 * var(--vw, 1vw)), 16px);
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 5px;
  position: relative
}
.subtitulo-ventana-y2k {
  font-size: 14px;
  font-weight: bold;
  color: #D81B60;
  text-align: center;
  margin: 0 0 8px
}
#banner-combo-celebracion {
  --plano-a: #B3E5FC;
  --plano-b: #80DEEA;
  --cubo-1: #E1F8FC;
  --cubo-2: #5FD3E2;
  position: absolute;
  top: 2%;
  left: 50%;
  right: auto;
  margin: 0;
  translate: -50% 0;
  transform: translateY(-18px) scale(0.82);
  transform-origin: center top;
  scale: var(--escala-ui-juego, 1);
  width: max-content;
  min-width: min(200px, calc(66 * var(--vw, 1vw)));
  max-width: none;
  background-color: var(--plano-a);
  background-image: linear-gradient(135deg, var(--plano-a) 0%, var(--plano-b) 100%);
  border: 3px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  will-change: transform, opacity
}
#banner-combo-celebracion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: rejillaBotonMenu 6s linear infinite
}
#banner-combo-celebracion:not(.banner-combo-activo)::before,
#banner-combo-celebracion:not(.banner-combo-activo) .cubos-hover-btn > span {
  animation-play-state: paused
}
#banner-combo-celebracion.banner-combo-activo {
  animation: bannerComboAparecer 1.5s cubic-bezier(.34,1.56,.64,1) both
}
.banner-combo-titulo {
  width: 100%;
  background: #222222;
  padding: 4px 9px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  line-height: 0
}
.banner-combo-titulo canvas,
#banner-combo-texto canvas {
  display: block;
  image-rendering: pixelated
}
.banner-combo-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 16px 12px 16px
}
#banner-combo-texto {
  display: block;
  line-height: 0;
  white-space: nowrap
}
#banner-combo-cara {
  font-size: 17px;
  font-weight: bold;
  color: #222222;
  opacity: 0.85;
  white-space: nowrap
}
@media (prefers-reduced-motion: reduce) {
  #banner-combo-celebracion::before {
    animation: none
  }
}
@keyframes bannerComboAparecer {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.82)
  }
  12% {
    opacity: 1;
    transform: translateY(4px) scale(1.08)
  }
  22% {
    transform: translateY(0px) scale(1)
  }
  80% {
    opacity: 1;
    transform: translateY(0px) scale(1)
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.94)
  }
}
.encabezado-ventana-y2k::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(#26C6DA 20%, transparent 20%),radial-gradient(#E0F7FA 20%, transparent 20%);
  background-position: 0 0,3px 3px;
  background-size: 6px 6px;
  opacity: 0.15;
  pointer-events: none
}
.tarjeta-gameover {
  background: #0D0D0D;
  border: 3px solid #B71C1C;
  box-shadow: 5px 5px 0px #B71C1C,0 0 22px rgba(255,23,68,0.35);
  min-width: 320px;
  max-width: calc(90 * var(--vw, 1vw));
  position: relative;
  overflow: hidden
}
.pantalla-gameover {
  background: rgba(20,4,4,0.9)
}
.pantalla-gameover.gameover-incrustado-derrota {
  background: transparent;
  animation: none;
  pointer-events: auto
}
.tarjeta-gameover.glitch-in {
  animation: glitchNoticiaEntrada 0.55s steps(3,end) both
}
.pantalla-gameover .encabezado-ventana-y2k {
  background: linear-gradient(90deg, #B71C1C 0%, #D32F2F 45%, #8E0000 100%);
  border-bottom: 2px solid #FF8A80;
  color: #FFEBEE
}
.pantalla-gameover .encabezado-ventana-y2k::before {
  display: none
}
body.modo-oscuro .pantalla-gameover .encabezado-ventana-y2k {
  background: linear-gradient(90deg, #B71C1C 0%, #D32F2F 45%, #8E0000 100%);
  color: #FFEBEE
}
.capa-scanlines-gameover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,138,128,0.06) 0px, rgba(255,138,128,0.06) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: screen;
  z-index: 1
}
.cuerpo-cmd-gameover {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Consolas','Courier New',monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #FF8A80;
  text-align: left;
  margin: 4px 0 6px 0
}
.cuerpo-cmd-gameover p {
  margin: 0
}
.linea-gameover-parpadeo {
  color: #FFCDD2;
  animation: parpadeoCmdError 1.2s ease-in-out infinite
}
.puntos-espera-gameover {
  display: inline-block;
  min-width: 1.8em
}
@keyframes parpadeoCursorPrompt {
  0%, 49% {
    opacity: 1
  }
  50%, 100% {
    opacity: 0
  }
}
.cursor-parpadeante {
  display: inline-block;
  margin-left: 2px;
  animation: parpadeoCursorPrompt 1s steps(1, end) infinite
}
.encabezado-ventana-y2k > span:first-child::after,
.cmd-titulo-widget > span:first-child::after,
.ventana-derrota-cmd-titulo > span:first-child::after {
  content: "_";
  display: inline-block;
  margin-left: 2px;
  animation: parpadeoCursorPrompt 1s steps(1, end) infinite
}
.btn-gameover-cmd {
  width: 220px;
  font-family: 'Consolas','Courier New',monospace;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  background: #1A1A1A;
  color: #69F0AE;
  border: 2px solid #69F0AE;
  box-shadow: 3px 3px 0px #222222;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left
}
.btn-gameover-cmd:hover {
  background: #69F0AE;
  color: #0D0D0D
}
.btn-gameover-cmd-salir {
  color: #FF8A80;
  border-color: #FF8A80
}
.btn-gameover-cmd-salir:hover {
  background: #FF8A80;
  color: #0D0D0D
}
.contenedor-busqueda-y2k {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  padding: 4px 8px;
  width: 100%;
  box-sizing: border-box;
  gap: 8px
}
.contenedor-busqueda-y2k span {
  font-weight: bold;
  color: #FF4081;
  font-size: 14px;
  letter-spacing: 1px
}
.contenedor-busqueda-y2k input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #222222 !important;
  outline: none;
  flex: 1;
  font-size: 14px
}
.tarjeta-config-amplia {
  width: min(580px, calc(92 * var(--vw, 1vw)));
  max-height: calc(90 * var(--vh, 1vh));
  overflow-y: auto;
  box-sizing: border-box;
}
.item-cancion-tarjeta {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  border-radius: 0px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.1s
}
.item-cancion-tarjeta:hover {
  background: #FFF8E1;
  border-color: #FF4081
}
.info-cancion-lista {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left
}
.titulo-cancion-lista {
  font-size: 16px;
  font-weight: bold;
  color: #D81B60
}
.autor-cancion-lista {
  font-size: 12px;
  color: #666666
}
.badge-desactualizado-nube {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: bold;
  color: #E65100;
  background: #FFE0B2;
  border: 2px solid #222222;
  border-radius: 0px;
  padding: 1px 6px;
  margin-left: 8px;
  box-shadow: 2px 2px 0px #222222;
  white-space: nowrap;
  vertical-align: middle
}
.rango-texto {
  font-size: 80px;
  font-weight: bold;
  margin: 5px 0;
  text-shadow: 2px 2px 0px #222;
  display: flex;
  justify-content: center;
  gap: 2px;
  animation: rangoGlowPulso 1.8s ease-in-out infinite
}
@keyframes rangoGlowPulso {
  0%,
  100% {
    filter: drop-shadow(0 0 0px currentColor)
  }
  50% {
    filter: drop-shadow(0 0 12px currentColor)
  }
}
.rango-texto span {
  display: inline-block;
  animation: ola-digito-vertical 1.6s ease-in-out infinite
}
.rango-texto.rango-impacto-anim {
  animation: rangoCartoonEntrada 0.85s cubic-bezier(.34,1.56,.64,1) both
}
.rango-texto.rango-impacto-anim span {
  animation: none
}
@keyframes rangoCartoonEntrada {
  0% {
    transform: translateY(-60px) scale(1.5,0.4);
    opacity: 0
  }
  12% {
    opacity: 1
  }
  38% {
    transform: translateY(6px) scale(0.75,1.3)
  }
  58% {
    transform: translateY(-12px) scale(1.18,0.85)
  }
  75% {
    transform: translateY(4px) scale(0.92,1.08)
  }
  90% {
    transform: translateY(-3px) scale(1.03,0.98)
  }
  100% {
    transform: translateY(0) scale(1,1);
    opacity: 1
  }
}
.rango-texto.rango-s-suspenso {
  animation: rangoSuspensoGlitch 0.09s steps(1) infinite
}
.rango-texto.rango-s-suspenso span {
  animation: none
}
@keyframes rangoSuspensoGlitch {
  0% {
    transform: translate(0,0) skewX(0deg);
    filter: brightness(1) drop-shadow(0 0 0 transparent)
  }
  33% {
    transform: translate(-2px,1px) skewX(-4deg);
    filter: brightness(1.6) drop-shadow(3px 0 0 #84FFFF) drop-shadow(-3px 0 0 #FF5252)
  }
  66% {
    transform: translate(2px,-1px) skewX(4deg);
    filter: brightness(1.3) drop-shadow(-2px 0 0 #FFEA00)
  }
  100% {
    transform: translate(0,0) skewX(0deg);
    filter: brightness(1) drop-shadow(0 0 0 transparent)
  }
}
.barra-desglose-resultados {
  display: flex;
  width: 100%;
  height: 10px;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  overflow: hidden;
  background: #FFFDE7;
  box-sizing: border-box;
  margin-bottom: 10px
}
.segmento-desglose-resultados {
  height: 100%;
  width: 0%;
  transition: width 0.9s cubic-bezier(.22,.9,.36,1)
}
.precision-texto {
  font-size: 24px;
  font-weight: bold;
  color: #D81B60;
  margin-bottom: 10px
}
.combo-badge-texto {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 14px;
  margin: -2px 0 4px 0;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  color: #222;
  background: #FF66B2;
  text-shadow: none
}
.combo-badge-texto.combo-badge-plus {
  background: linear-gradient(90deg, #FFD54F, #FF66B2, #00E5FF, #FFD54F);
  background-size: 300% 100%;
  animation: brillo-combo-plus 1.8s linear infinite
}
@keyframes brillo-combo-plus {
  0% {
    background-position: 0% 50%
  }
  100% {
    background-position: 300% 50%
  }
}
@keyframes brillo-nivel-plus {
  0% {
    background-position: 200% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
.tarjeta-resultados {
  position: relative;
  overflow: visible;
  width: min(580px, calc(92 * var(--vw, 1vw)))
}
#mascota-resultados-slot {
  width: 100%;
  height: 0;
  overflow: visible;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: height 0.55s cubic-bezier(.34,1.56,.64,1)
}
#mascota-resultados-slot.mascota-resultados-abierto {
  height: 56px
}
.mascota-resultados-hueco {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 44px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(34,34,34,0.4), rgba(34,34,34,0) 72%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.5)
}
#mascota-resultados-slot.mascota-resultados-abierto .mascota-resultados-hueco {
  animation: mascotaResHuecoDestello 1s ease-out both
}
@keyframes mascotaResHuecoDestello {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3)
  }
  28% {
    opacity: 1;
    transform: translateX(-50%) scale(1.3)
  }
  70% {
    opacity: 0.75;
    transform: translateX(-50%) scale(1)
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6)
  }
}
.mascota-resultados-globo {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  transform: translateX(-50%) translateY(6px) scale(0.7);
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.25s ease,transform 0.3s cubic-bezier(.34,1.56,.64,1)
}
.mascota-resultados-globo::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #222222
}
.mascota-resultados-globo.mascota-resultados-globo-activa {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1)
}
.mascota-resultados-cara {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  padding: 4px;
  border-radius: 50%;
  background: #FFFDE7;
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  color: #222222;
  opacity: 0;
  transform: translateY(70px) scale(1.6, 0.25);
  z-index: 2
}
#mascota-resultados-slot.mascota-resultados-abierto .mascota-resultados-cara {
  animation: mascotaResColarseEntrada 0.85s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes mascotaResColarseEntrada {
  0% {
    transform: translateY(74px) scale(1.7, 0.2);
    opacity: 0
  }
  12% {
    opacity: 1
  }
  38% {
    transform: translateY(4px) scale(0.82, 1.3)
  }
  58% {
    transform: translateY(-10px) scale(1.14, 0.9)
  }
  75% {
    transform: translateY(4px) scale(0.94, 1.06)
  }
  90% {
    transform: translateY(-3px) scale(1.03, 0.98)
  }
  100% {
    transform: translateY(0) scale(1, 1);
    opacity: 1
  }
}
#mascota-resultados-slot.mascota-resultados-abierto .mascota-resultados-cara.mascota-resultados-entrada-fiesta {
  animation: mascotaColarseFiesta 0.9s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes mascotaColarseFiesta {
  0% {
    transform: translateY(74px) scale(1.7, 0.2) rotate(0deg);
    opacity: 0
  }
  10% {
    opacity: 1
  }
  28% {
    transform: translateY(-16px) scale(0.8, 1.28) rotate(10deg)
  }
  42% {
    transform: translateY(2px) scale(1.14, 0.88) rotate(-10deg)
  }
  56% {
    transform: translateY(-10px) scale(0.94, 1.08) rotate(7deg)
  }
  70% {
    transform: translateY(0px) scale(1.06, 0.95) rotate(-5deg)
  }
  84% {
    transform: translateY(-3px) scale(0.99, 1.02) rotate(2deg)
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(0deg);
    opacity: 1
  }
}
#mascota-resultados-slot.mascota-resultados-abierto .mascota-resultados-cara.mascota-resultados-entrada-estelar {
  animation: mascotaColarseEstelar 1.05s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes mascotaColarseEstelar {
  0% {
    transform: translateY(84px) scale(1.9, 0.12) rotate(0deg);
    opacity: 0
  }
  10% {
    opacity: 1
  }
  36% {
    transform: translateY(-22px) scale(0.72, 1.4) rotate(-16deg)
  }
  52% {
    transform: translateY(6px) scale(1.22, 0.82) rotate(12deg)
  }
  68% {
    transform: translateY(-12px) scale(0.9, 1.14) rotate(-7deg)
  }
  82% {
    transform: translateY(3px) scale(1.06, 0.95) rotate(4deg)
  }
  94% {
    transform: translateY(-2px) scale(0.98, 1.02) rotate(-1deg)
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(0deg);
    opacity: 1
  }
}
.mascota-resultados-cara.mascota-resultados-bamboleo {
  animation: mascotaResBamboleo 2.6s ease-in-out infinite
}
@keyframes mascotaResBamboleo {
  0%,
  100% {
    transform: rotate(-3deg)
  }
  50% {
    transform: rotate(3deg)
  }
}
.mascota-resultados-cara.mascota-resultados-record {
  border-color: #FFE08C;
  box-shadow: 3px 3px 0px #FFE08C,0 0 14px rgba(255,224,140,.85);
  animation: mascotaResRecordBailecito 1.1s ease-in-out infinite,mascotaResRecordGlitch 1.1s steps(1) infinite
}
@keyframes mascotaResRecordBailecito {
  0%,
  100% {
    transform: translate(0,0) rotate(0deg)
  }
  15% {
    transform: translate(-11px,-10px) rotate(-14deg)
  }
  30% {
    transform: translate(-9px,0) rotate(-6deg)
  }
  50% {
    transform: translate(0,-2px) rotate(0deg)
  }
  65% {
    transform: translate(11px,-10px) rotate(14deg)
  }
  80% {
    transform: translate(9px,0) rotate(6deg)
  }
}
@keyframes mascotaResRecordGlitch {
  0%,
  24%,
  58%,
  100% {
    filter: none
  }
  8% {
    filter: brightness(2) drop-shadow(6px 0 0 #84FFFF) drop-shadow(-6px 0 0 #FF5252)
  }
  16% {
    filter: brightness(1.3) drop-shadow(-4px 2px 0 #FFEA00) drop-shadow(4px -2px 0 #FFFFFF)
  }
  66% {
    filter: brightness(2) drop-shadow(-6px 0 0 #FF5252) drop-shadow(6px 0 0 #84FFFF)
  }
  74% {
    filter: brightness(1.3) drop-shadow(4px -2px 0 #FFEA00) drop-shadow(-4px 2px 0 #FFFFFF)
  }
}
.mascota-resultados-cara.mascota-resultados-combo {
  animation: mascotaResColorPastelCombo 2s linear infinite
}
@keyframes mascotaResColorPastelCombo {
  0% {
    border-color: #B3E5FC;
    box-shadow: 3px 3px 0px #B3E5FC
  }
  25% {
    border-color: #FFD6E8;
    box-shadow: 3px 3px 0px #FFD6E8
  }
  50% {
    border-color: #FFF9C4;
    box-shadow: 3px 3px 0px #FFF9C4
  }
  75% {
    border-color: #C8E6C9;
    box-shadow: 3px 3px 0px #C8E6C9
  }
  100% {
    border-color: #B3E5FC;
    box-shadow: 3px 3px 0px #B3E5FC
  }
}
.res-mascota-xp {
  display: none;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  opacity: 0;
  transform: translateY(46px) scale(1.18, 0.3)
}
.res-mascota-xp.res-mascota-xp-mostrar {
  display: block;
  animation: mascotaResColarseEntrada 0.85s cubic-bezier(.34,1.56,.64,1) both
}
@media (max-width: 640px) {
  .mascota-resultados-cara {
    width: 60px;
    height: 60px;
    font-size: 11px
  }
}
#capa-confeti-nivel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5
}
#capa-cmd-resultados {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1
}
.confeti-rombo-pieza {
  position: absolute;
  top: -30px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  animation-name: confeti-caida;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}
@keyframes confeti-caida {
  0% {
    transform: translate(0, 0) rotate(45deg);
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    transform: translate(var(--desvio-x, 0px), calc(115 * var(--vh, 1vh))) rotate(405deg);
    opacity: 0
  }
}
.confeti-pixel-pieza {
  position: absolute;
  top: -20px;
  border: 1px solid #222222;
  animation-name: confeti-pixel-caida;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}
.confeti-falso-pieza {
  position: absolute;
  top: -30px;
  border: 1px solid rgba(34,34,34,0.55);
  border-radius: 2px;
  opacity: 0.88;
  transform: rotate(45deg);
  animation-name: confeti-caida;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}
.arcade-terminal-hackeo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.92);
  width: 520px;
  max-height: 90%;
  background: #0D0D0D;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  font-family: 'Consolas','Courier New',monospace;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  overflow: hidden
}
.arcade-terminal-hackeo.visible {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1)
}
.arcade-terminal-hackeo-titulo {
  background: #FF4081;
  color: #FFFDE7;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 13px;
  padding: 3px 8px;
  display: flex;
  justify-content: space-between
}
.arcade-terminal-hackeo-cuerpo {
  padding: 10px 14px 12px 30px;
  position: relative
}
.arcade-terminal-hackeo-lineas {
  color: #69F0AE;
  font-size: 14px;
  line-height: 1.5;
  min-height: 84px;
  text-align: left
}
.arcade-terminal-hackeo-linea {
  white-space: pre-wrap;
  word-break: break-word
}
.arcade-terminal-hackeo-linea:last-child::after {
  content: "▌";
  animation: arcadeHackeoCursorParpadeo 0.9s steps(1,end) infinite;
  margin-left: 2px
}
@keyframes arcadeHackeoCursorParpadeo {
  0%,
  49% {
    opacity: 1
  }
  50%,
  100% {
    opacity: 0
  }
}
.arcade-terminal-hackeo-barra-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px
}
.arcade-terminal-hackeo-barra-fondo {
  flex: 1;
  height: 16px;
  background: #1A1A1A;
  border: 1px solid #69F0AE;
  overflow: hidden
}
.arcade-terminal-hackeo-barra-relleno {
  height: 100%;
  width: 0%;
  background: #69F0AE;
  transition: width 0.25s linear
}
.arcade-terminal-hackeo-barra-pct {
  color: #69F0AE;
  font-size: 14px;
  min-width: 38px;
  text-align: right
}
@media (max-width: 640px) {
  .arcade-terminal-hackeo-lineas {
    font-size: 13px
  }
}
@keyframes confeti-pixel-caida {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    transform: translate(var(--desvio-x, 0px), calc(115 * var(--vh, 1vh))) rotate(280deg);
    opacity: 0
  }
}
.tabla-resultados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 20px;
  width: 100%;
  font-size: 14px;
  margin-bottom: 15px;
  border-top: 2px dashed #222;
  padding-top: 10px
}
.biblio-panel-izquierdo {
  width: clamp(240px, calc(19.5 * var(--vw, 1vw)), 375px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}
.panel-leaderboard-biblio {
  flex: 1;
  background: linear-gradient(160deg, rgba(38,198,218,0.55) 0%, rgba(178,235,242,0.6) 55%, rgba(255,255,255,0.55) 100%);
  border: 3px solid #222;
  box-shadow: 5px 5px 0px #222;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column
}
.panel-leaderboard-biblio-contenido {
  zoom: var(--k-lb, 1);
  position: relative;
  z-index: 1;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0
}
.leaderboard-biblio-titulo {
  font-weight: bold;
  color: #D81B60;
  font-size: 18px;
  text-align: center
}
.lista-leaderboard-biblio {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto
}
.fila-leaderboard {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 8px;
  align-items: center;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 8px 10px;
  font-size: 18px;
  opacity: 0;
  animation: cubito-sube-punt 0.5s cubic-bezier(.22,1.4,.4,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.045s)
}
.fila-leaderboard > span {
  zoom: 0.8
}
.fila-leaderboard-primero {
  background: linear-gradient(90deg, #FFD54F, #FF66B2, #00E5FF, #FFD54F);
  background-size: 300% 100%;
  animation: brillo-combo-plus 1.8s linear infinite,cubito-sube-punt 0.5s cubic-bezier(.22,1.4,.4,1) forwards;
  animation-direction: reverse,normal;
  animation-delay: 0s,calc(var(--i, 0) * 0.045s)
}
.fila-record-personal {
  opacity: 0;
  animation: cubito-sube-punt 0.5s cubic-bezier(.22,1.4,.4,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.06s)
}
@keyframes cubito-sube-punt {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.8)
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.leaderboard-puesto {
  font-weight: bold;
  color: #D81B60
}
.leaderboard-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.leaderboard-score {
  font-weight: bold;
  color: #222
}
.leaderboard-vacio {
  font-size: 12px;
  color: #F48FB1;
  text-align: center;
  padding: 20px 4px
}
body.modo-oscuro .leaderboard-vacio {
  color: #FF9EC4
}
.leaderboard-vacio::before {
  content: "🐾";
  display: block;
  font-size: 26px;
  margin-bottom: 6px;
  opacity: 0.8
}
.estado-vacio-icono {
  display: block;
  font-size: 26px;
  margin-bottom: 6px;
  opacity: 0.8
}
.panel-letras {
  border-top: 2px dashed #222;
  padding-top: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px
}
.lista-letras {
  max-height: 60px;
  overflow-y: auto;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px
}
.item-letra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFF8E1;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid #222
}
.btn-borrar-letra {
  background: #FF8A80;
  padding: 1px 4px;
  font-size: 9px
}
#contenedor-linea-tiempo {
  width: calc(94 * var(--vw, 1vw));
  background: linear-gradient(160deg, #B3E5FC 0%, #E1F5FE 45%, #F8BBD0 100%);
  border: 3px solid #222222;
  box-shadow: 5px 5px 0px #222222;
  border-top: none;
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 10px;
  flex-direction: column;
  gap: 5px
}
body.modo-oscuro #contenedor-linea-tiempo {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 5px 5px 0px #332B3D
}
.fila-linea-tiempo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%
}
#scroll-timeline-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  border: 2px solid #222222;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%)
}
#scroll-timeline-wrap.sin-zoom-tl {
  overflow-x: hidden
}
#scroll-timeline-wrap::-webkit-scrollbar {
  height: 8px
}
#scroll-timeline-wrap::-webkit-scrollbar-track {
  background: #B3E5FC
}
#scroll-timeline-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #4DD0E1, #FF4081);
  border: 1px solid #222
}
#barra-tiempo {
  width: 100%;
  min-width: 100%;
  height: 25px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  position: relative;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none
}
#capa-waveform {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}
#capa-seleccion-rango {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(0, 229, 255, 0.25);
  border-left: 1px solid #00E5FF;
  border-right: 1px solid #00E5FF;
  z-index: 9;
  display: none;
  pointer-events: none
}
#capa-marquee-seleccion {
  position: absolute;
  background: rgba(0, 229, 255, 0.18);
  border: 1px dashed #00E5FF;
  z-index: 40;
  display: none;
  pointer-events: none
}
.nota-linea-multisel {
  outline: 2px solid #00E5FF;
  outline-offset: 1px;
  z-index: 7 !important
}
.controles-zoom-tl {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0
}
.btn-zoom-tl {
  padding: 3px 9px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(135deg, #E0F7FA 0%, #FFFDE7 100%);
  border: 2px solid #222222;
  box-shadow: 1px 1px 0px #222222;
  cursor: pointer;
  font-family: 'Pixelify Sans',sans-serif;
  color: #222
}
.btn-zoom-tl:hover {
  background: #FFD54F
}
.btn-zoom-tl:disabled {
  opacity: 0.4;
  cursor: default;
  background: #FFFDE7
}
.reloj-tiempo {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13px;
  color: #D81B60;
  font-weight: bold;
  min-width: 100px;
  text-align: right;
  font-family: monospace
}
body.modo-oscuro .reloj-tiempo {
  color: #FF9EC4
}
body.modo-oscuro #contenedor-linea-tiempo [style*="color:#222"] {
  color: #FFF6FB !important
}
#linea-reproduccion {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #FF4081;
  z-index: 8
}
.nota-linea {
  position: absolute;
  top: 2px;
  height: 10px;
  background: #FF4081;
  cursor: pointer;
  min-width: 4px;
  border: 1px solid #222
}
.posicion-linea {
  position: absolute;
  bottom: 2px;
  width: 6px;
  height: 8px;
  background: #FFD54F;
  border: 1px solid #222;
  cursor: pointer;
  z-index: 6
}
.posicion-linea:hover {
  background: #FF4081;
  transform: scale(1.3)
}
.letra-linea {
  position: absolute;
  top: 20px;
  width: 6px;
  height: 6px;
  background: #CE93D8;
  border-radius: 50%;
  border: 1px solid #222;
  box-shadow: 0 0 0 1px #FFFFFF;
  margin-left: -4px
}
.bpm-linea {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none
}
.bpm-cambio-marca {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: #FF7043;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  cursor: pointer;
  z-index: 5
}
.bpm-cambio-marca:hover {
  background: #FF3D00;
  transform: scaleX(1.8)
}
#btn-metronomo.btn-metronomo-activo {
  background: #FFD54F !important;
  box-shadow: 0 0 6px 1px rgba(255, 213, 79, 0.8);
}
.speed-linea {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #00BCD4;
  z-index: 4
}
#capa-visuales {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  display: none
}
#barra-tiempo.modo-visual-activo #capa-bpm,
#barra-tiempo.modo-visual-activo #capa-speed,
#barra-tiempo.modo-visual-activo #capa-notas,
#barra-tiempo.modo-visual-activo #capa-posiciones {
  display: none
}
#barra-tiempo.modo-visual-activo #capa-visuales {
  display: block
}
#capa-letras {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none
}
#barra-tiempo.modo-visual-activo #capa-letras {
  display: block;
  z-index: 9
}
#barra-tiempo.modo-visual-activo {
  height: auto;
  min-height: 39px
}
#franja-scrub-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 14px;
  z-index: 10;
  display: none;
  cursor: ew-resize;
  background: repeating-linear-gradient(90deg, rgba(34,34,34,0.18) 0px, rgba(34,34,34,0.18) 2px, transparent 2px, transparent 7px);
  border-bottom: 1px dashed rgba(34,34,34,0.45);
  box-sizing: border-box;
}
#barra-tiempo.modo-visual-activo #franja-scrub-visual {
  display: block
}
.visual-bloque-linea {
  position: absolute;
  top: 17px;
  height: 19px;
  min-width: 6px;
  background: rgba(0, 188, 212, 0.5);
  border: 1px solid #00838F;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: grab;
  z-index: 8;
  overflow: hidden;
  white-space: nowrap;
  font-size: 8px;
  color: #002B33;
  line-height: 19px;
  padding-left: 2px
}
.visual-bloque-linea:active {
  cursor: grabbing
}
.visual-bloque-linea.visual-bloque-tipo-color {
  background: rgba(255, 64, 129, 0.5);
  border-color: #AD1457
}
.visual-bloque-linea.visual-bloque-tipo-pulso {
  background: rgba(186, 104, 200, 0.55);
  border-color: #6A1B9A
}
.visual-bloque-linea.visual-bloque-sel {
  border-color: #FF4081;
  background: rgba(255, 64, 129, 0.55);
  box-shadow: 0 0 4px #FF4081
}
.visual-bloque-linea .asa-resize-visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(0, 0, 0, 0.3)
}
#menu-contextual-visual {
  position: fixed;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #B2EBF2;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  padding: 4px;
  display: none;
  min-width: 190px;
  font-family: inherit
}
#menu-contextual-visual .item-menu-ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #004D5A;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap
}
#menu-contextual-visual .item-menu-ctx:hover {
  background: #E0F7FA
}
#menu-contextual-visual .item-menu-ctx.item-menu-ctx-peligro {
  color: #C62828
}
#menu-contextual-visual .item-menu-ctx.item-menu-ctx-peligro:hover {
  background: #FFEBEE
}
#menu-contextual-visual .item-menu-ctx.item-menu-ctx-deshabilitado {
  color: #B0BEC5;
  cursor: default
}
#menu-contextual-visual .item-menu-ctx.item-menu-ctx-deshabilitado:hover {
  background: none
}
#menu-contextual-visual .separador-menu-ctx {
  height: 1px;
  background: #ECEFF1;
  margin: 3px 2px
}
#menu-contextual-visual .titulo-menu-ctx {
  font-size: 10px;
  color: #78909C;
  padding: 3px 10px 5px;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis
}
#menu-contextual-cara {
  position: fixed;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #F8BBD0;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  padding: 4px;
  display: none;
  width: max-content;
  min-width: 190px;
  max-width: min(340px, calc(calc(100 * var(--vw, 1vw)) - 16px));
  box-sizing: border-box;
  font-family: inherit
}
#menu-contextual-cara .titulo-menu-ctx {
  font-size: 10px;
  color: #AD1457;
  padding: 3px 10px 5px;
  white-space: normal
}
#menu-contextual-cara .item-menu-ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  border-radius: 4px;
  white-space: normal;
  overflow-wrap: anywhere
}
#menu-contextual-cara .item-menu-ctx:hover {
  background: #FCE4EC
}
#menu-contextual-cara .item-menu-ctx.item-menu-ctx-activo {
  background: #FFF3E0;
  font-weight: bold
}
#menu-contextual-cara .item-menu-ctx-cara-demo {
  font-size: 13px;
  min-width: 40px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0
}
#menu-contextual-nota {
  position: fixed;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #F8BBD0;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  padding: 4px;
  display: none;
  min-width: 190px;
  font-family: inherit
}
#menu-contextual-nota .titulo-menu-ctx {
  font-size: 10px;
  color: #AD1457;
  padding: 3px 10px 5px;
  white-space: nowrap
}
#menu-contextual-nota .item-menu-ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap
}
#menu-contextual-nota .item-menu-ctx:hover {
  background: #FCE4EC
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-activo {
  background: #FFF3E0;
  font-weight: bold
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-peligro {
  color: #C62828
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-peligro:hover {
  background: #FFEBEE
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-deshabilitado {
  color: #B0BEC5;
  cursor: default
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-deshabilitado:hover {
  background: none
}
#menu-contextual-nota .separador-menu-ctx {
  height: 1px;
  background: #ECEFF1;
  margin: 3px 2px
}
#menu-contextual-cancion-biblio {
  position: fixed;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #B2EBF2;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  padding: 4px;
  display: none;
  min-width: 170px;
  font-family: inherit
}
#menu-contextual-cancion-biblio .item-menu-ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #004D5A;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap
}
#menu-contextual-cancion-biblio .item-menu-ctx:hover {
  background: #E0F7FA
}
#menu-contextual-cancion-biblio .item-menu-ctx.item-menu-ctx-peligro {
  color: #C62828
}
#menu-contextual-cancion-biblio .item-menu-ctx.item-menu-ctx-peligro:hover {
  background: #FFEBEE
}
#menu-contextual-cancion-biblio .separador-menu-ctx {
  height: 1px;
  background: #ECEFF1;
  margin: 3px 2px
}
#menu-contextual-cancion-biblio .titulo-menu-ctx {
  font-size: 10px;
  color: #78909C;
  padding: 3px 10px 5px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis
}
.swatch-variante-cara-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 11px;
  line-height: 1;
  pointer-events: none
}
.hint-variantes-cara {
  font-size: 9px;
  color: #78909C;
  text-align: center;
  margin-top: 4px;
  font-style: italic
}
#capa-visuales-editor-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 45;
  display: none;
  pointer-events: none
}
#contenedor-juego.modo-visual-activo #capa-visuales-editor-canvas {
  display: block;
  pointer-events: none
}
#contenedor-juego.modo-visual-activo #capa-trayectorias-editor {
  display: block
}
.asa-destino-trayectoria {
  position: absolute;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  background: #FFD54F;
  border: 2px solid #FFF;
  box-shadow: 0 0 4px #222,2px 2px 0px #222;
  transform: rotate(45deg);
  cursor: grab;
  z-index: 999;
  pointer-events: auto
}
.asa-destino-trayectoria.gif-editor-item-sel {
  background: #FF4081
}
#capa-visuales-juego {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none
}
#capa-visuales-juego-atras {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}
.gif-juego-item {
  position: absolute;
  box-sizing: border-box;
}
.gif-juego-item img {
  width: 100%;
  height: 100%;
  display: block
}
#capa-color-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: #FF4081
}
#capa-color-visual-atras {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: #FF4081
}
@keyframes gifEntradaCrecer {
  0% {
    transform: scale(0.01);
    opacity: 0
  }
  70% {
    transform: scale(1.08);
    opacity: 1
  }
  100% {
    transform: scale(1);
    opacity: 1
  }
}
.gif-juego-item.gif-entrada-crecer {
  transform-origin: center center;
  animation: gifEntradaCrecer 0.4s ease-out
}
@keyframes gifEntradaFundido {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.gif-juego-item.gif-entrada-fade {
  animation: gifEntradaFundido 0.35s ease-out
}
@keyframes gifEntradaGlitch {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent) brightness(1);
    transform-origin: center center;
    transform: scale(0.05) translate(0,0) skew(0deg)
  }
  12% {
    opacity: 1;
    filter: drop-shadow(6px 0 0 #00FFFF) drop-shadow(-6px 0 0 #FF00FF) brightness(1.8);
    transform: scale(0.55) translate(-5px,3px) skew(9deg)
  }
  28% {
    filter: drop-shadow(-6px 2px 0 #00FFFF) drop-shadow(6px -2px 0 #FF00FF) brightness(1.3);
    transform: scale(0.85) translate(4px,-3px) skew(-7deg)
  }
  44% {
    filter: drop-shadow(5px -3px 0 #00FFFF) drop-shadow(-5px 3px 0 #FF00FF) brightness(1.9);
    transform: scale(1.05) translate(-3px,2px) skew(6deg)
  }
  60% {
    filter: drop-shadow(-3px 0 0 #00FFFF) drop-shadow(3px 0 0 #FF00FF) brightness(1.2);
    transform: scale(0.97) translate(2px,-1px) skew(-3deg)
  }
  78% {
    filter: drop-shadow(2px 1px 0 #00FFFF) drop-shadow(-2px -1px 0 #FF00FF) brightness(1.4);
    transform: scale(1.02) translate(-1px,1px) skew(2deg)
  }
  100% {
    opacity: 1;
    filter: none;
    transform: scale(1) translate(0,0) skew(0deg)
  }
}
.gif-juego-item.gif-entrada-glitch {
  transform-origin: center center;
  animation: gifEntradaGlitch 0.5s steps(4,end)
}
@keyframes gifSalidaEncoger {
  0% {
    transform: scale(1);
    opacity: 1
  }
  100% {
    transform: scale(0.01);
    opacity: 0
  }
}
.gif-juego-item.gif-salida-encoger,
.gif-editor-item.gif-salida-encoger {
  transform-origin: center center;
  animation: gifSalidaEncoger 0.4s ease-in forwards
}
@keyframes gifSalidaFundido {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
.gif-juego-item.gif-salida-fade,
.gif-editor-item.gif-salida-fade {
  animation: gifSalidaFundido 0.35s ease-in forwards
}
@keyframes gifSalidaGlitch {
  0% {
    opacity: 1;
    filter: none;
    transform-origin: center center;
    transform: scale(1) translate(0,0) skew(0deg)
  }
  20% {
    filter: drop-shadow(3px -1px 0 #00FFFF) drop-shadow(-3px 1px 0 #FF00FF) brightness(1.4);
    transform: scale(1.02) translate(-1px,1px) skew(2deg)
  }
  38% {
    filter: drop-shadow(-4px 2px 0 #00FFFF) drop-shadow(4px -2px 0 #FF00FF) brightness(1.2);
    transform: scale(0.9) translate(2px,-1px) skew(-4deg)
  }
  55% {
    filter: drop-shadow(5px 0 0 #00FFFF) drop-shadow(-5px 0 0 #FF00FF) brightness(1.9);
    transform: scale(1.05) translate(-2px,2px) skew(5deg)
  }
  72% {
    filter: drop-shadow(-6px -2px 0 #00FFFF) drop-shadow(6px 2px 0 #FF00FF) brightness(1.3);
    transform: scale(0.5) translate(3px,-2px) skew(-8deg)
  }
  88% {
    opacity: 1;
    filter: drop-shadow(6px 3px 0 #00FFFF) drop-shadow(-6px -3px 0 #FF00FF) brightness(1.8);
    transform: scale(0.25) translate(-4px,3px) skew(8deg)
  }
  100% {
    opacity: 0;
    filter: none;
    transform: scale(0.05) translate(0,0) skew(0deg)
  }
}
.gif-juego-item.gif-salida-glitch,
.gif-editor-item.gif-salida-glitch {
  transform-origin: center center;
  animation: gifSalidaGlitch 0.5s steps(4,end) forwards
}
.gif-editor-item.gif-entrada-crecer {
  transform-origin: center center;
  animation: gifEntradaCrecer 0.4s ease-out
}
.gif-editor-item.gif-entrada-fade {
  animation: gifEntradaFundido 0.35s ease-out
}
.gif-editor-item.gif-entrada-glitch {
  transform-origin: center center;
  animation: gifEntradaGlitch 0.5s steps(4,end)
}
.gif-editor-item {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed rgba(0, 188, 212, 0.7);
  cursor: move;
  pointer-events: auto
}
.gif-editor-item img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}
.gif-editor-item.gif-editor-item-sel {
  border-color: #FF4081
}
.gif-editor-item .asa-resize-gif {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #FF4081;
  border: 2px solid #FFF;
  border-radius: 50%;
  cursor: nwse-resize
}
.gif-editor-item .asa-rotar-gif {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #00BCD4;
  border: 2px solid #FFF;
  border-radius: 50%;
  cursor: grab
}
.gif-editor-item .asa-rotar-gif::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 12px;
  background: #00BCD4;
  transform: translateX(-50%)
}
.gif-espejo-clon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none
}
@keyframes gifOndaExpansivaVisual {
  0% {
    transform: translate(-50%, -50%) scale(0.15);
    opacity: 0.9
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0
  }
}
.onda-expansiva-visual {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-left: 0;
  margin-top: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: gifOndaExpansivaVisual 0.65s ease-out forwards
}
.panel-dificultad-config {
  display: flex;
  gap: 6px;
  align-items: center;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  padding: 4px 8px;
  border-radius: 0px;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  font-size: 12px
}
.separador-panel-nota {
  width: 2px;
  height: 18px;
  background: #222;
  margin: 0 4px;
  flex-shrink: 0
}
.panel-flotante-guia-teclas {
  display: none;
  position: static;
  width: 100%;
  max-width: 100%;
  z-index: auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 253, 231, 0.97);
  border: 2px solid #222;
  box-shadow: none;
  padding: 5px 10px;
  font-size: 12.5px;
  color: #222;
  box-sizing: border-box;
  scale: none
}
.panel-flotante-guia-teclas #texto-guia-teclas {
  white-space: nowrap;
  overflow-x: auto;
  min-width: 0;
  flex: 1
}
.panel-flotante-guia-teclas #texto-guia-teclas {
  overflow-y: hidden
}
.panel-flotante-guia-teclas #texto-guia-teclas .px-parrafo-cont {
  flex-wrap: nowrap;
  max-width: none
}
.panel-ajuste-nota {
  display: none;
  position: absolute;
  top: calc(58px * var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))));
  left: 15px;
  right: auto;
  width: calc((100% - 30px) / var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))));
  box-sizing: border-box;
  transform-origin: top left;
  scale: var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)));
  z-index: 8;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  padding: 6px 10px;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  font-size: 12px
}
.panel-ajuste-nota-abajo {
  display: none;
  position: absolute;
  top: calc(85px * var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))));
  left: 15px;
  right: auto;
  width: calc((100% - 30px) / var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))));
  box-sizing: border-box;
  transform-origin: top left;
  scale: var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)));
  z-index: 8;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  padding: 6px 10px;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  font-size: 12px
}
.panel-flotante-editor-centro {
  display: none;
  position: absolute;
  top: auto;
  bottom: 15px;
  left: 15px;
  z-index: 8;
  flex-direction: column;
  gap: 6px;
  transform-origin: left bottom;
  scale: var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)))
}
.grid-teclas-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px
}
.seccion-carril-config {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  padding: 8px;
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  display: flex;
  flex-direction: column;
  gap: 6px
}
.seccion-carril-config h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: #D81B60;
  text-align: center;
  border-bottom: 2px solid #222;
  padding-bottom: 3px
}
.fila-tecla-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px
}
body.modo-oscuro .fila-tecla-item {
  color: #222222
}
.subtitulo-grupo-teclas {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 3px 4px;
  margin: 2px 0;
  border: 2px solid #222;
  box-shadow: 1px 1px 0px #222
}
.subtitulo-grupo-teclas.subtitulo-modo-juego {
  background: #B2EBF2;
  color: #00838F
}
.subtitulo-grupo-teclas.subtitulo-editor {
  background: #FFE0B2;
  color: #E65100;
  margin-top: 8px
}
.btn-keybinding {
  background: rgba(255, 253, 231, 0.75);
  border: 2px solid #222;
  color: #D81B60;
  font-family: monospace;
  font-weight: bold;
  padding: 2px 8px;
  min-width: 45px;
  text-align: center;
  box-shadow: 1px 1px 0px #222
}
.btn-keybinding.esperando {
  background: rgba(255, 138, 128, 0.75);
  color: #FFFFFF;
  animation: parpadeo 0.6s infinite alternate
}
.btn-icono {
  padding: 2px 6px;
  font-size: 11px
}
#btn-toggle-modo-visual {
  font-size: 15px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #FF4081, #7C4DFF);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  animation: pulso-modo-visual 1.4s ease-in-out infinite
}
@keyframes pulso-modo-visual {
  0%,
  100% {
    transform: scale(1) rotate(0deg)
  }
  40% {
    transform: scale(1.18) rotate(-6deg);
    animation-timing-function: cubic-bezier(.34,1.56,.64,1)
  }
  70% {
    transform: scale(0.96) rotate(4deg)
  }
}
#btn-toggle-modo-visual.activo {
  animation: none
}
#pantalla-carga-cancion {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: rgba(20, 10, 15, 0.28);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  z-index: 9900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease,backdrop-filter 0.4s ease,-webkit-backdrop-filter 0.4s ease
}
#pantalla-carga-cancion.carga-cancion-activa {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  pointer-events: auto
}
@supports (-moz-appearance: none) {
  #pantalla-carga-cancion.carga-cancion-activa {
    background: rgba(20, 10, 15, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }
}
#capa-transicion-negra {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  background: #000000;
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center
}
#capa-transicion-negra.transicion-activa {
  opacity: 1
}
#capa-transicion-negra .rombo-watermark-transicion {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #FF4081 0%, #00E5FF 100%);
  border: 4px solid #FFFDE7;
  box-shadow: 0 0 24px rgba(255, 64, 129, 0.55);
  transform: rotate(45deg) scale(0.3);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.2, .9, .3, 1.4),opacity 0.3s ease
}
#capa-transicion-negra.transicion-activa .rombo-watermark-transicion {
  transform: rotate(45deg) scale(1);
  opacity: 1
}
#capa-transicion-mascotas {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  overflow: hidden;
  background: transparent;
  z-index: 9600;
  display: none;
  pointer-events: none
}
#capa-transicion-mascotas.transicion-mascotas-activa {
  display: block;
  pointer-events: auto
}
.mascota-transicion {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #222;
  font-family: 'Pixelify Sans',sans-serif;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style
}
.mascota-transicion.visible {
  transform: translate(-50%, -50%) scale(1)
}
.mascota-transicion.saliendo {
  transition: transform 0.45s cubic-bezier(0.55, 0, 1, 0.45)
}
body.modo-oscuro .mascota-transicion {
  filter: brightness(0.91)
}
.anillo-carga-cancion {
  position: relative;
  width: 200px;
  height: 200px;
  animation: girarAnilloCarga 6s linear infinite
}
@keyframes girarAnilloCarga {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
.rombo-carga {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px
}
.rombo-carga-1 {
  transform: rotate(0deg) translate(0, -90px) rotate(45deg)
}
.rombo-carga-2 {
  transform: rotate(30deg) translate(0, -90px) rotate(15deg)
}
.rombo-carga-3 {
  transform: rotate(60deg) translate(0, -90px) rotate(-15deg)
}
.rombo-carga-4 {
  transform: rotate(90deg) translate(0, -90px) rotate(-45deg)
}
.rombo-carga-5 {
  transform: rotate(120deg) translate(0, -90px) rotate(-75deg)
}
.rombo-carga-6 {
  transform: rotate(150deg) translate(0, -90px) rotate(-105deg)
}
.rombo-carga-7 {
  transform: rotate(180deg) translate(0, -90px) rotate(-135deg)
}
.rombo-carga-8 {
  transform: rotate(210deg) translate(0, -90px) rotate(-165deg)
}
.rombo-carga-9 {
  transform: rotate(240deg) translate(0, -90px) rotate(-195deg)
}
.rombo-carga-10 {
  transform: rotate(270deg) translate(0, -90px) rotate(-225deg)
}
.rombo-carga-11 {
  transform: rotate(300deg) translate(0, -90px) rotate(-255deg)
}
.rombo-carga-12 {
  transform: rotate(330deg) translate(0, -90px) rotate(-285deg)
}
.rombo-nucleo {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #222;
  animation: pulsoTocarRombo 1.8s ease-in-out infinite
}
.rombo-rojo {
  background: #FF1744
}
.rombo-azul {
  background: #00E5FF
}
@keyframes pulsoTocarRombo {
  0% {
    transform: scale(1);
    opacity: 0.55
  }
  8% {
    transform: scale(1.45);
    opacity: 1
  }
  20% {
    transform: scale(1);
    opacity: 0.55
  }
  100% {
    transform: scale(1);
    opacity: 0.55
  }
}
.texto-carga-cancion {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: calc(90 * var(--vw, 1vw));
  font-size: 20px;
  color: #FFFDE7;
  text-shadow: 2px 2px 0 #000;
  animation: respirarInvitacion 1.1s ease-in-out infinite
}
.carga-cancion-escenario {
  position: relative;
  width: min(calc(92 * var(--vw, 1vw)), 900px);
  display: flex;
  align-items: center;
  gap: 48px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease
}
#pantalla-carga-cancion.carga-cancion-construida .carga-cancion-escenario {
  opacity: 1
}
.carga-cancion-portada-caja {
  width: 360px;
  height: 360px;
  flex-shrink: 0;
  border: 3px solid #FFFDE7;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.5),0 0 34px rgba(0,229,255,0.4);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #4A2B52 0%, #241830 100%);
  opacity: 0;
  transform: translateX(140px) scale(0.55);
  transition: opacity 0.6s ease,transform 0.8s cubic-bezier(.2,.85,.25,1.35)
}
#pantalla-carga-cancion.carga-cancion-construida .carga-cancion-portada-caja {
  opacity: 1;
  transform: translateX(0) scale(1)
}
.carga-cancion-mascota {
  position: absolute;
  top: -23px;
  left: -23px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden
}
.carga-cancion-mascota-cara {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #FFFDE7;
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 13px;
  line-height: 1.1;
  padding: 4px;
  text-align: center
}
#carga-cancion-mascota-cara-texto {
  display: inline-block;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  position: relative;
  z-index: 4
}
.carga-cancion-mascota-brillo {
  position: absolute;
  top: 0px;
  right: 2px;
  font-size: 13px;
  opacity: 0;
  color: #FFD54F;
  text-shadow: 0 0 4px #FFD54F,0 0 6px #FF4081;
  pointer-events: none;
  z-index: 5
}
.carga-cancion-mascota-brillo.visible {
  opacity: 1
}
#pantalla-carga-cancion.carga-cancion-construida .carga-cancion-mascota {
  animation: mascotaColarseAsomo 0.7s ease-out 0.3s both
}
@keyframes mascotaColarseAsomo {
  0% {
    transform: translateY(60px) scale(1.5, 0.3);
    opacity: 0
  }
  16% {
    opacity: 1
  }
  40% {
    transform: translateY(-9px) scale(0.88, 1.18)
  }
  62% {
    transform: translateY(4px) scale(1.05, 0.95)
  }
  100% {
    transform: translateY(0) scale(1, 1);
    opacity: 1
  }
}
@keyframes mascotaResColarseSalida {
  0% {
    transform: translateY(0) scale(1, 1);
    opacity: 1
  }
  20% {
    transform: translateY(-8px) scale(1.08, 0.9);
    opacity: 1
  }
  45% {
    transform: translateY(6px) scale(0.9, 1.14);
    opacity: 1
  }
  100% {
    transform: translateY(74px) scale(1.7, 0.2);
    opacity: 0
  }
}
#pantalla-carga-cancion .carga-cancion-mascota.carga-cancion-mascota-saliendo {
  animation: mascotaResColarseSalida 0.4s cubic-bezier(.5,0,.75,0) both
}
@keyframes mascotaColarseAsomoMovil {
  0% {
    transform: translateY(48px) scale(1.2, 0.24);
    opacity: 0
  }
  16% {
    opacity: 1
  }
  40% {
    transform: translateY(-7.2px) scale(0.704, 0.944)
  }
  62% {
    transform: translateY(3.2px) scale(0.84, 0.76)
  }
  100% {
    transform: translateY(0) scale(0.8, 0.8);
    opacity: 1
  }
}
@keyframes mascotaResColarseSalidaMovil {
  0% {
    transform: translateY(0) scale(0.8, 0.8);
    opacity: 1
  }
  20% {
    transform: translateY(-6.4px) scale(0.864, 0.72);
    opacity: 1
  }
  45% {
    transform: translateY(4.8px) scale(0.72, 0.912);
    opacity: 1
  }
  100% {
    transform: translateY(59.2px) scale(1.36, 0.16);
    opacity: 0
  }
}
.carga-cancion-portada-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1
}
.carga-cancion-portada-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  color: rgba(255,255,255,0.85);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  z-index: 0;
  animation: portada-placeholder-flotar 2.4s ease-in-out infinite
}
.carga-cancion-portada-caja.tiene-imagen .carga-cancion-portada-placeholder {
  display: none
}
@media (max-width: 640px) {
  .carga-cancion-escenario {
    gap: 26px
  }
  .carga-cancion-portada-caja {
    width: 230px;
    height: 230px
  }
  .carga-cancion-mascota {
    top: -18px;
    left: -18px;
    transform: scale(0.85);
    transform-origin: top left
  }
  #pantalla-carga-cancion.carga-cancion-construida .carga-cancion-mascota {
    animation: mascotaColarseAsomoMovil 0.7s ease-out 0.3s both
  }
  #pantalla-carga-cancion .carga-cancion-mascota.carga-cancion-mascota-saliendo {
    animation: mascotaResColarseSalidaMovil 0.4s cubic-bezier(.5,0,.75,0) both
  }
  .carga-cancion-info-caja {
    gap: 8px
  }
  .carga-cancion-titulo-grande {
    font-size: clamp(18px, calc(5.5 * var(--vw, 1vw)), 28px)
  }
  .carga-cancion-dif-barra {
    width: 140px
  }
}
.carga-cancion-info-caja {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  opacity: 0;
  transform: translateX(34px);
  transition: opacity 0.55s ease 0.18s,transform 0.55s ease 0.18s
}
#pantalla-carga-cancion.carga-cancion-construida .carga-cancion-info-caja {
  opacity: 1;
  transform: translateX(0)
}
.carga-cancion-dif-fila {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start
}
.carga-cancion-dif-pill {
  padding: 3px 18px;
  font-size: 21px;
  font-weight: bold;
  color: var(--dif-color, #00E5FF);
  background: #FFFDE7;
  border: 2px solid #222;
  box-shadow: 3px 3px 0 #222
}
.carga-cancion-dif-barra {
  height: 4px;
  width: 220px;
  max-width: calc(60 * var(--vw, 1vw));
  background: linear-gradient(90deg, var(--dif-color, #00E5FF) 0%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 8px var(--dif-color, #00E5FF)
}
.carga-cancion-charter-linea {
  font-size: 13px;
  color: #FFFDE7;
  opacity: 0.9;
  text-shadow: 1px 1px 0 #000
}
.carga-cancion-charter-linea b {
  color: #80DEEA
}
.carga-cancion-titulo-grande {
  font-size: clamp(26px, calc(4.4 * var(--vw, 1vw)), 50px);
  line-height: 1.08;
  color: #FFFFFF;
  text-shadow: 3px 3px 0 #000;
  word-break: break-word
}
.carga-cancion-esquina {
  position: absolute;
  top: calc(100% - 62px);
  left: calc(100% - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%) scale(0.38);
  z-index: 3
}
#capa-glitch-transicion {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  z-index: 10000;
  pointer-events: none;
  display: none;
  overflow: hidden;
  mix-blend-mode: screen
}
#capa-glitch-transicion.glitch-activo {
  display: block
}
.franja-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6%;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  opacity: 0;
  will-change: transform, opacity
}
#widget-perfil-jugador,
#widget-reproductor-y2k,
#widget-perfil-biblioteca {
  background: linear-gradient(160deg, #B3E5FC 0%, #E1F5FE 45%, #F8BBD0 100%) !important;
  border: 2px solid #222222 !important;
  box-shadow: 4px 4px 0px #222222 !important
}
#widget-perfil-jugador .cmd-titulo-widget,
#widget-reproductor-y2k .cmd-titulo-widget,
#widget-perfil-biblioteca .cmd-titulo-widget {
  background: linear-gradient(90deg, #00ACC1 0%, #26C6DA 35%, #B2EBF2 70%, #E0F7FA 100%) !important;
  color: #222222 !important;
  border-bottom: 2px solid #222222;
  position: relative;
  overflow: hidden
}
#widget-perfil-jugador .cmd-titulo-widget::before,
#widget-reproductor-y2k .cmd-titulo-widget::before,
#widget-perfil-biblioteca .cmd-titulo-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(#26C6DA 20%, transparent 20%),radial-gradient(#E0F7FA 20%, transparent 20%);
  background-position: 0 0,3px 3px;
  background-size: 6px 6px;
  opacity: 0.15;
  pointer-events: none
}
#widget-perfil-jugador .cmd-cuerpo-widget,
#widget-reproductor-y2k .cmd-cuerpo-widget,
#widget-perfil-biblioteca .cmd-cuerpo-widget {
  color: #222222
}
.perfil-info-linea {
  color: #222222 !important
}
.perfil-info-linea span:last-child {
  color: #D81B60 !important
}
#widget-perfil-jugador .texto-perfil-xp-mini,
#widget-perfil-biblioteca .texto-perfil-xp-mini {
  color: #666666 !important
}
#widget-perfil-jugador button {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%) !important;
  color: #222222 !important;
  border: 2px solid #222222 !important;
  box-shadow: 2px 2px 0px #222222 !important;
  font-family: 'Pixelify Sans',sans-serif !important
}
#widget-perfil-jugador button:hover:not(:disabled) {
  background: #B3E5FC !important;
  border-color: #222222 !important;
  color: #222222 !important
}
.reproductor-pantalla-eq {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border-color: #222222
}
.reproductor-info-cancion {
  color: #D81B60 !important
}
@keyframes fondoOverlayAparecer {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes tarjetaModalPop {
  0% {
    opacity: 0;
    transform: scale(0.86) translateY(16px)
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0)
  }
}
#modal-perfiles,
#panel-patch-notes,
#modal-estadisticas,
#modal-historial-partidas,
#modal-pase,
#modal-cuenta,
#modal-tutorial,
#modal-catalogo-kkr,
#modal-seleccionar-dificultad,
#modal-config-opciones,
#modal-cuenta-online,
#modal-reportar-mapa,
#modal-reportar-bug,
#modal-amigos,
#modal-sala-mp,
#modal-sala-mp-vs,
#modal-lista-canciones,
#modal-elegir-editar,
#overlay-calibrar-offset,
.pantalla-resultados,
.modal-config,
.pantalla-pausa,
.pantalla-gameover {
  animation: fondoOverlayAparecer 0.22s ease both
}
.tarjeta-modal,
.tarjeta-resultados,
.tarjeta-pausa {
  animation: tarjetaModalPop 0.34s cubic-bezier(.34,1.56,.64,1) both
}
@keyframes fondoOverlayDesaparecer {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
@keyframes tarjetaModalPopSalida {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0)
  }
  100% {
    opacity: 0;
    transform: scale(0.86) translateY(16px)
  }
}
.efecto-cierre-ventana {
  animation: fondoOverlayDesaparecer 0.2s ease both !important
}
.efecto-cierre-ventana .tarjeta-modal,
.efecto-cierre-ventana.tarjeta-modal,
.efecto-cierre-ventana .tarjeta-resultados,
.efecto-cierre-ventana.tarjeta-resultados,
.efecto-cierre-ventana .tarjeta-pausa,
.efecto-cierre-ventana.tarjeta-pausa {
  animation: tarjetaModalPopSalida 0.2s cubic-bezier(.34,1.56,.64,1) both !important
}
.tarjeta-resultados,
.tarjeta-pausa {
  background: linear-gradient(160deg, #B3E5FC 0%, #E1F5FE 45%, #F8BBD0 100%)
}
.tarjeta-logro {
  animation: tarjetaModalPop 0.32s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform 0.15s ease,box-shadow 0.15s ease
}
.tarjeta-logro:not(.bloqueado):hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 3px 5px 0px #222222
}
.fila-cancion-biblio {
  transition: background 0.15s ease,transform 0.15s ease,box-shadow 0.15s ease
}
.fila-cancion-biblio:hover {
  transform: translateX(4px)
}
input[type="text"],
input[type="number"],
select {
  transition: box-shadow 0.15s ease,transform 0.15s ease,border-color 0.15s ease
}
input[type="text"]:focus:not(:focus-visible),
input[type="number"]:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  box-shadow: 3px 3px 0px #222222;
  transform: translate(-1px, -1px)
}
input[type="checkbox"] {
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1),background 0.12s ease,box-shadow 0.12s ease
}
input[type="checkbox"]:hover {
  transform: scale(1.12)
}
input[type="checkbox"]:checked {
  animation: checkboxPop 0.25s cubic-bezier(.34,1.56,.64,1)
}
@keyframes checkboxPop {
  0% {
    transform: scale(0.7)
  }
  60% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}
input[type="range"]::-webkit-slider-thumb {
  transition: transform 0.12s ease,background 0.12s ease
}
input[type="range"]::-moz-range-thumb {
  transition: transform 0.12s ease,background 0.12s ease
}
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.18);
  background: #FF6EA9
}
input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.18);
  background: #FF6EA9
}
.encabezado-ventana-y2k {
  transition: filter 0.15s ease
}
:root {
  --fa-glass-1: rgba(255,255,255,0.92);
  --fa-glass-2: rgba(255,255,255,0.28);
  --fa-ink: #2b2350
}
.btn-menu-grande {
  position: relative;
  border-radius: 0px;
  border: 3px solid #222222;
  color: #222222;
  background-color: var(--plano-a, #FFFDE7) !important;
  background-image: linear-gradient(135deg, var(--plano-a, #FFFDE7) 0%, var(--plano-b, #FFFDE7) 100%) !important;
  box-shadow: 4px 4px 0px #222222 !important;
  text-shadow: none !important;
  transition: transform 0.1s ease,box-shadow 0.1s ease,filter 0.15s ease;
  overflow: visible;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.btn-menu-grande:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #222222 !important;
  filter: brightness(1.05)
}
.btn-menu-grande:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #222222 !important;
  filter: none
}
.btn-menu-grande.foco-teclado,
.btn-menu-jugar.foco-teclado,
.btn-menu-sala-mp.foco-teclado,
.btn-menu-editar.foco-teclado,
.btn-menu-cargar.foco-teclado,
.btn-menu-config.foco-teclado {
  outline: 3px solid #fff;
  outline-offset: 2px;
  filter: brightness(1.1) saturate(1.15)
}
.btn-menu-jugar {
  --plano-a: #B3E5FC;
  --plano-b: #80DEEA
}
.btn-menu-sala-mp {
  --plano-a: #F3E5F5;
  --plano-b: #CE93D8
}
.btn-menu-editar {
  --plano-a: #FFF3D6;
  --plano-b: #FFD54F
}
.btn-menu-cargar {
  --plano-a: #FFE0F0;
  --plano-b: #FF9FE5
}
.btn-menu-config {
  --plano-a: #E8F5E9;
  --plano-b: #A5D6A7
}
.btn-jugar-item-panel {
  --fa-a: #eafcff;
  --fa-b: #5be0f5;
  --fa-c: #0ea5d6;
  --fa-glow: rgba(0,195,255,0.55)
}
.biblio-tab-btn {
  --fa-a: #eafcff;
  --fa-b: #cdeef5;
  --fa-c: #6bb8c4;
  --fa-glow: rgba(38,198,218,0.25)
}
.biblio-tab-btn.activa {
  --fa-a: #eafcff;
  --fa-b: #5be0f5;
  --fa-c: #0e8fae;
  --fa-glow: rgba(0,172,193,0.55)
}
#btn-tab-online.biblio-tab-btn {
  --fa-a: #fbeeff;
  --fa-b: #e6c9fa;
  --fa-c: #b98fd1;
  --fa-glow: rgba(190,80,255,0.2)
}
#btn-tab-online.biblio-tab-btn.activa {
  --fa-a: #fbeeff;
  --fa-b: #dba3ff;
  --fa-c: #a855e0;
  --fa-glow: rgba(190,80,255,0.5)
}
#btn-tab-mods.biblio-tab-btn {
  --fa-a: #eafff3;
  --fa-b: #c6f5e0;
  --fa-c: #79c9a8;
  --fa-glow: rgba(40,220,170,0.2)
}
#btn-tab-mods.biblio-tab-btn.activa {
  --fa-a: #eafff3;
  --fa-b: #7cffcb;
  --fa-c: #22e0a0;
  --fa-glow: rgba(40,220,170,0.5)
}
.biblio-tab-btn {
  background-color: var(--plano-a, #B3E5FC) !important;
  background-image: linear-gradient(135deg, var(--plano-a, #B3E5FC) 0%, var(--plano-b, #FFD6E8) 100%) !important;
  border: 3px solid #222222 !important;
  box-shadow: 3px 3px 0px #222222 !important;
  text-shadow: none !important;
  color: #222222 !important;
  transform: translate(0, 0) !important;
  filter: none !important;
  transition: transform 0.1s ease,box-shadow 0.1s ease,filter 0.15s ease !important
}
.biblio-tab-btn:hover,
.biblio-tab-btn.activa {
  background-color: var(--plano-a, #B3E5FC) !important;
  background-image: linear-gradient(135deg, var(--plano-a, #B3E5FC) 0%, var(--plano-a, #B3E5FC) 100%) !important;
  border-color: #222222 !important;
  color: #222222 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0px #222222 !important;
  filter: brightness(1.05) !important
}
.biblio-tab-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0px #222222 !important;
  filter: none !important
}
.biblio-tab-btn {
  --plano-a: #E0F7FA;
  --plano-b: #B3E5FC
}
#btn-tab-online.biblio-tab-btn {
  --plano-a: #F3E5F5;
  --plano-b: #E1BEE7
}
#btn-tab-mods.biblio-tab-btn {
  --plano-a: #E8F5E9;
  --plano-b: #A5D6A7
}
.biblio-tab-btn.activa {
  --plano-a: #4DD0E1;
  --plano-b: #26C6DA
}
#btn-tab-online.biblio-tab-btn.activa {
  --plano-a: #CE93D8;
  --plano-b: #AB47BC
}
#btn-tab-mods.biblio-tab-btn.activa {
  --plano-a: #81C784;
  --plano-b: #66BB6A
}
#btn-cerrar-lista-canciones,
#btn-cerrar-elegir-editar,
#btn-pausa-salir,
#btn-borrar-todo,
#btn-reset-teclas,
#btn-borrar-nota-sel {
  --fa-c: #C62828;
  --plano-a: #FFCDD2;
  --plano-b: #FF8A80
}
#btn-elegir-editar-nueva {
  --fa-c: #33691E;
  --plano-a: #E8F5E9;
  --plano-b: #A5D6A7
}
#btn-elegir-editar-cargar {
  --fa-c: #7B1FA2;
  --plano-a: #F3E5F5;
  --plano-b: #CE93D8
}
.cmd-titulo-widget {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),linear-gradient(120deg, #ff8fd6, #b88cff);
  color: #2b1a40;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.5)
}
.cmd-cuerpo-widget {
  background: rgba(255,255,255,0.06)
}
#widget-perfil-jugador {
  background: linear-gradient(165deg, rgba(50,25,80,0.85), rgba(20,10,45,0.9));
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 0px;
  box-shadow: 4px 4px 0px #222222,0 0 22px rgba(190,80,255,0.35),inset 0 1px 0 rgba(255,255,255,0.2)
}
@supports (-moz-appearance: none) {
  #widget-perfil-jugador {
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }
}
#widget-perfil-jugador .cmd-titulo-widget {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),linear-gradient(120deg, #d79dff, #8b5fe0)
}
#widget-perfil-jugador .barra-xp-contenedor,
.barra-xp-contenedor {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0px
}
#widget-perfil-jugador button {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(180,230,255,0.15) 45%, rgba(60,40,110,0.85));
  color: #123047;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 0px;
  box-shadow: 2px 2px 0px #000,inset 0 1px 0 rgba(255,255,255,0.7);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5)
}
#widget-perfil-jugador button:hover:not(:disabled) {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(220,180,255,0.3) 45%, rgba(140,80,220,0.9));
  color: #2b1240
}
.tab-patch-notes {
  background: #CE93D8;
  color: #222;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #7B1FA2;
  text-shadow: none
}
.tab-patch-notes:hover {
  background: #BA68C8
}
.tab-instalar-app {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(180,255,220,0.35) 45%, rgba(80,220,160,0.85));
  color: #0b4a30;
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 3px 3px 0px #222222,inset 0 1px 0 rgba(255,255,255,0.8);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5)
}
.tab-instalar-app:hover {
  background-image: linear-gradient(180deg, rgba(255,255,255,1), rgba(200,255,230,0.5) 45%, rgba(100,240,180,0.95))
}
.reproductor-pantalla-eq {
  background: #01050b;
  border: 2px solid #90CAF9;
  border-radius: 0px;
  box-shadow: inset 0 0 16px rgba(144,202,249,0.3),0 0 12px rgba(144,202,249,0.22)
}
.reproductor-info-cancion {
  background: linear-gradient(135deg, #E1BEE7 0%, #F8BBD0 100%);
  border: 2px solid #F48FB1;
  margin: 8px 10px 0 10px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  height: 24px;
  white-space: normal
}
.reproductor-info-cancion-track {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
  color: #6A1B9A;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  letter-spacing: 1.5px;
  padding-left: 100%;
  animation: marqueeInfoCancion 11s linear infinite
}
@keyframes marqueeInfoCancion {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}
.btn-player-y2k {
  background-color: #B3E5FC !important;
  background-image: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%) !important;
  color: #222222 !important;
  border: 3px solid #222222 !important;
  border-radius: 0px;
  box-shadow: 3px 3px 0px #222222 !important;
  font-family: 'Pixelify Sans',sans-serif !important;
  transition: transform 0.1s ease,box-shadow 0.1s ease,filter 0.15s ease
}
.btn-player-y2k:hover {
  background-color: #F8BBD0 !important;
  background-image: linear-gradient(135deg, #F8BBD0 0%, #F8BBD0 100%) !important;
  border-color: #222222 !important;
  color: #222222 !important;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #222222 !important;
  filter: brightness(1.05)
}
.btn-player-y2k:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #222222 !important;
  filter: none
}
#btn-ver-tutorial {
  background: #90CAF9 !important;
  color: #222 !important;
  border: 2px solid #222222 !important;
  border-radius: 0px !important;
  box-shadow: 2px 2px 0px #1565C0 !important
}
#btn-borrar-todo {
  background: #FF8A80 !important;
  color: #222 !important;
  border: 2px solid #222222 !important;
  border-radius: 0px !important;
  box-shadow: 2px 2px 0px #C62828 !important
}
#btn-cerrar-config {
  background: #A5D6A7 !important;
  color: #222 !important;
  border: 2px solid #222222 !important;
  border-radius: 0px !important;
  box-shadow: 2px 2px 0px #2E7D32 !important
}
#btn-reset-teclas {
  background: #FF8A80 !important;
  color: #222 !important;
  border: 2px solid #222222 !important;
  border-radius: 0px !important;
  box-shadow: 2px 2px 0px #C62828 !important
}
#selector-idioma-app {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%) !important;
  border-radius: 6px !important;
  box-shadow: 2px 2px 0px #222222 !important
}
body.modo-oscuro #selector-idioma-app {
  color: #222222 !important
}
#capa-botones-tactiles {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  z-index: 500;
  isolation: isolate;
  will-change: transform;
  pointer-events: none;
  display: none;
}
#capa-botones-tactiles.visible {
  display: block;
}
.boton-tactil-juego {
  position: absolute;
  border-radius: 0;
  border: 3px solid #222;
  box-shadow: 3px 3px 0px #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
  opacity: var(--opacidad-botones-tactiles, 0.82);
  transform: translate(-50%, -50%) translateZ(0);
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}
.boton-tactil-juego.color-rojo {
  background: #FF5252;
}
.boton-tactil-juego.color-azul {
  background: #40C4FF;
}
.boton-tactil-juego.color-verde {
  background: #66BB6A;
}
.boton-tactil-juego.color-gris {
  background: #78909C;
}
.boton-tactil-juego.color-morado {
  background: #7E57C2;
}
.boton-tactil-juego.presionado {
  opacity: 1;
  filter: brightness(1.2);
  transform: translate(-50%, -50%) translateZ(0) scale(0.9);
}
#boton-pausa-tactil.boton-pausa-tactil {
  left: auto;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  width: 46px;
  height: 46px;
  font-size: 20px;
  transform: translateZ(0);
  z-index: 495;
}
#boton-pausa-tactil.boton-pausa-tactil.presionado {
  transform: translateZ(0) scale(0.9);
}
.boton-vel-tactil {
  --vel-tactil-x: 68%;
  --vel-tactil-y: calc(env(safe-area-inset-top, 0px) + 33px);
  top: var(--vel-tactil-y);
  width: 42px;
  height: 42px;
  font-size: 18px;
  z-index: 491;
}
#boton-vel-menos-tactil {
  left: calc(var(--vel-tactil-x) - 30px);
}
#boton-vel-mas-tactil {
  left: calc(var(--vel-tactil-x) + 30px);
}
#zonas-tactiles-juego {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 490;
}
#zonas-tactiles-juego.orientacion-vertical {
  flex-direction: row;
}
.zona-tactil-juego {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  border: 0 solid #222;
  transition: background-color 0.1s ease;
}
.zona-tactil-arriba {
  order: 1;
  background: rgba(64, 196, 255, calc(var(--opacidad-botones-tactiles, 0.82) * 0.22));
}
.zona-tactil-abajo {
  order: 2;
  background: rgba(255, 82, 82, calc(var(--opacidad-botones-tactiles, 0.82) * 0.22));
}
#zonas-tactiles-juego:not(.orientacion-vertical) .zona-tactil-arriba {
  flex: 0 0 var(--pct-linea-divisoria-tactil, 50%);
}
#zonas-tactiles-juego:not(.orientacion-vertical) .zona-tactil-abajo {
  flex: 1 1 auto;
}
#zonas-tactiles-juego.orientacion-vertical .zona-tactil-arriba {
  order: 2;
  flex: 1 1 auto;
}
#zonas-tactiles-juego.orientacion-vertical .zona-tactil-abajo {
  order: 1;
  flex: 0 0 var(--pct-linea-divisoria-tactil-x, 50%);
}
#zonas-tactiles-juego.orientacion-vertical.rojo-derecha .zona-tactil-arriba {
  order: 1;
  flex: 0 0 var(--pct-linea-divisoria-tactil-x, 50%);
}
#zonas-tactiles-juego.orientacion-vertical.rojo-derecha .zona-tactil-abajo {
  order: 2;
  flex: 1 1 auto;
}
.linea-divisoria-zonas-tactiles {
  position: absolute;
  pointer-events: none;
  background: #222;
  opacity: 0.55;
  z-index: 2;
  transition: background-color 0.1s ease, opacity 0.1s ease;
}
.linea-divisoria-zonas-tactiles.arrastrando {
  background: #FFD54F;
  opacity: 0.95;
}
#zonas-tactiles-juego.linea-oculta .linea-divisoria-zonas-tactiles {
  opacity: 0;
}
#zonas-tactiles-juego.linea-oculta .agarre-linea-divisoria-zonas-tactiles {
  pointer-events: none;
}
#zonas-tactiles-juego:not(.orientacion-vertical) .linea-divisoria-zonas-tactiles {
  left: 0;
  right: 0;
  height: 2px;
  top: var(--pct-linea-divisoria-tactil, 50%);
  transform: translateY(-50%);
}
#zonas-tactiles-juego.orientacion-vertical .linea-divisoria-zonas-tactiles {
  top: 0;
  bottom: 0;
  left: var(--pct-linea-divisoria-tactil-x, 50%);
  width: 2px;
  transform: translateX(-50%);
}
.agarre-linea-divisoria-zonas-tactiles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 50%;
}
#zonas-tactiles-juego:not(.orientacion-vertical) .agarre-linea-divisoria-zonas-tactiles {
  cursor: ns-resize;
}
#zonas-tactiles-juego.orientacion-vertical .agarre-linea-divisoria-zonas-tactiles {
  cursor: ew-resize;
}
.zona-tactil-juego-icono {
  display: none;
  font-size: 42px;
  font-weight: bold;
  color: #FFF;
  opacity: 0.55;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.35);
  pointer-events: none;
}
.zona-tactil-juego:active .zona-tactil-juego-icono {
  opacity: 0.9;
}
#modal-gpu-software {
  z-index: 9850
}
.paso-gpu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.55);
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  padding: 8px 10px;
  box-sizing: border-box;
}
.paso-gpu-numero {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F06292;
  color: #FFFDE7;
  border: 2px solid #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans',sans-serif;
  font-weight: bold;
  font-size: 12px
}
.paso-gpu-texto {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #222222
}
.paso-gpu-texto code {
  background: #222222;
  color: #FFEB3B;
  padding: 1px 5px;
  font-family: 'Consolas','Courier New',monospace;
  font-size: 12px
}
body.modo-oscuro .paso-gpu {
  background: rgba(0,0,0,0.25)
}
body.modo-oscuro .paso-gpu-texto {
  color: #FFF6FB
}
.paso-gpu-final {
  text-align: center;
  font-weight: bold
}
.barra-config-fija {
  --pad-barra-config: clamp(10px, calc(2.2 * var(--vw, 1vw)), 20px);
  position: sticky;
  bottom: calc(-1 * var(--pad-barra-config));
  z-index: 20;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--pad-barra-config));
  margin: 10px calc(-1 * var(--pad-barra-config)) calc(-1 * var(--pad-barra-config));
  padding: 10px var(--pad-barra-config);
  background: linear-gradient(90deg, #EED3E3 0%, #F8BBD0 100%);
  border-top: 3px solid #222222
}
body.modo-oscuro .barra-config-fija {
  background: linear-gradient(90deg, #AB809B 0%, #E0C4CE 100%)
}
#capa-derrota-errores {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  height: calc(100 * var(--vh, 1vh));
  z-index: 9550;
  pointer-events: none;
  overflow: hidden;
  display: none;
  background: transparent
}
.ventana-derrota-cmd {
  position: absolute;
  width: 25em;
  background: #0D0D0D;
  border: 0.1em solid #B71C1C;
  box-shadow: 0.15em 0.15em 0 #B71C1C;
  font-family: 'Consolas','Courier New',monospace;
  line-height: 1.45;
  overflow: hidden;
  will-change: transform,opacity
}
.ventana-derrota-cmd-titulo {
  display: flex;
  justify-content: space-between;
  height: 1.7em;
  line-height: 1.7;
  padding: 0 0.6em;
  font-family: 'Pixelify Sans','Courier New',monospace;
  font-weight: 700;
  background: #D32F2F;
  color: #FFEBEE
}
.ventana-derrota-cmd-cuerpo {
  height: 3.9em;
  padding: 0.5em 0.7em;
  color: #FF8A80;
  white-space: nowrap;
  overflow: hidden
}
.ventana-derrota-cmd.entra {
  animation: glitchDerrotaEntrada 0.5s steps(3,end) both,parpadeoDerrotaCmd 1.6s ease-in-out 0.5s infinite
}
.ventana-derrota-cmd.entra.sin-parpadeo {
  animation: glitchDerrotaEntrada 0.5s steps(3,end) both
}
.ventana-derrota-cmd.sale {
  animation: glitchDerrotaSalida 0.42s steps(3,end) both
}
.plataforma-android-juego .ventana-derrota-cmd {
  will-change: auto
}
.plataforma-android-juego .ventana-derrota-cmd.entra {
  animation: glitchLivianoEntrada 0.5s steps(3,end) both
}
.plataforma-android-juego .ventana-derrota-cmd.sale {
  animation: glitchLivianoSalida 0.42s steps(3,end) both
}
@keyframes parpadeoDerrotaCmd {
  0%,
  100% {
    filter: brightness(1)
  }
  50% {
    filter: brightness(0.72)
  }
}
@keyframes glitchDerrotaEntrada {
  0% {
    opacity: 0;
    transform: translate(-8px,0) skewX(8deg);
    clip-path: inset(0 0 60% 0);
    filter: brightness(2) saturate(0) hue-rotate(90deg)
  }
  12% {
    opacity: 1;
    transform: translate(6px,0) skewX(-6deg);
    clip-path: inset(45% 0 0 0)
  }
  24% {
    opacity: 0.25;
    transform: translate(-5px,0);
    clip-path: inset(0 35% 0 0)
  }
  36% {
    opacity: 1;
    transform: translate(4px,0) skewX(4deg);
    clip-path: inset(0 0 25% 0);
    filter: brightness(1.6) saturate(0.2)
  }
  50% {
    opacity: 0.4;
    transform: translate(-6px,0);
    clip-path: inset(15% 0 0 45%)
  }
  65% {
    opacity: 1;
    transform: translate(0,0) skewX(-2deg);
    clip-path: inset(0);
    filter: brightness(1.2) saturate(0.6)
  }
  82% {
    opacity: 0.85;
    transform: translate(2px,0)
  }
  100% {
    opacity: 1;
    transform: translate(0,0) skewX(0deg);
    clip-path: inset(0);
    filter: none
  }
}
@keyframes glitchDerrotaSalida {
  0% {
    opacity: 1;
    transform: translate(0,0);
    clip-path: inset(0);
    filter: none
  }
  15% {
    opacity: 0.55;
    transform: translate(5px,0) skewX(4deg);
    clip-path: inset(0 0 30% 0);
    filter: brightness(1.5) saturate(0.3)
  }
  30% {
    opacity: 1;
    transform: translate(-6px,0);
    clip-path: inset(22% 40% 0 0)
  }
  45% {
    opacity: 0.3;
    transform: translate(7px,0) skewX(-6deg);
    clip-path: inset(0 0 0 50%)
  }
  60% {
    opacity: 0.8;
    transform: translate(-4px,0);
    clip-path: inset(50% 0 0 0)
  }
  75% {
    opacity: 0.2;
    transform: translate(6px,0) skewX(7deg);
    filter: brightness(2.2) saturate(0)
  }
  100% {
    opacity: 0;
    transform: translate(0,0) scaleY(0.15);
    clip-path: inset(0 0 100% 0)
  }
}
.carnet-perfil-clase-col {
  position: absolute;
  bottom: 12px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px
}
.carnet-perfil-clase-emblema {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35))
}
.carnet-perfil-rango-fav-col {
  white-space: nowrap;
  font-size: 10px;
  padding: 0 5px;
  height: 18px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center
}
.carnet-perfil-y2k:has(.carnet-perfil-clase-col) .carnet-perfil-datos {
  padding-right: 84px;
  box-sizing: border-box;
}
#carnet-perfil-menu .carnet-perfil-clase-col {
  top: auto;
  bottom: 2px;
  transform: none;
  right: auto;
  left: 2px
}
#carnet-perfil-menu .carnet-perfil-clase-emblema {
  width: 42px;
  height: 42px
}
#carnet-perfil-menu:not(.carnet-perfil-menu-expandido) .carnet-perfil-rango-fav-col {
  display: none
}
#carnet-perfil-menu.carnet-perfil-menu-expandido .carnet-perfil-clase-col {
  top: auto;
  bottom: 16px;
  transform: none;
  left: auto;
  right: 12px
}
#carnet-perfil-menu.carnet-perfil-menu-expandido .carnet-perfil-clase-emblema {
  width: 64px;
  height: 64px
}
.carnet-perfil-clase-fila {
  margin-top: 5px;
  min-width: 0
}
.carnet-perfil-clase {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 7px;
  border: 2px solid #222;
  box-shadow: 1px 1px 0px #222;
  background: #222
}
#mascota-widget-menu.mascota-widget-menu-expandido .carnet-perfil-medallas span {
  font-size: 17px
}
.carnet-perfil-y2k:has(.carnet-perfil-rango-fav-col) .carnet-perfil-datos {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6px
}
.carnet-perfil-y2k:has(.carnet-perfil-rango-fav-col) .carnet-perfil-clase-fila {
  margin-bottom: 6px
}
.carnet-perfil-y2k:has(.carnet-perfil-rango-fav-col) .carnet-perfil-barra-xp {
  margin-top: auto;
  margin-bottom: 4px;
  height: 10px;
  flex-shrink: 0
}
.sala-mp-vs-slot .carnet-perfil-clase-col {
  position: static;
  transform: none;
  flex-shrink: 0;
  margin-left: auto
}
.sala-mp-vs-slot .carnet-perfil-clase-emblema {
  width: 56px;
  height: 56px
}
.sala-mp-vs-slot .carnet-perfil-y2k:has(.carnet-perfil-clase-col) .carnet-perfil-datos {
  padding-right: 0
}
.sala-mp-vs-slot:nth-child(2) .carnet-perfil-clase-col {
  align-self: flex-start
}
.sala-mp-vs-slot:nth-child(4) .carnet-perfil-clase-col {
  align-self: flex-end
}
.tarjeta-dialogo-personalizado .btn-menu-grande,
.tarjeta-confirmar-salir .btn-menu-grande,
#btn-cerrar-elegir-editar,
#btn-elegir-editar-nueva,
#btn-elegir-editar-cargar {
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-width: 2px !important;
  box-shadow: 2px 2px 0px #222222 !important;
}
.tarjeta-dialogo-personalizado .btn-menu-grande:hover,
.tarjeta-confirmar-salir .btn-menu-grande:hover,
#btn-cerrar-elegir-editar:hover,
#btn-elegir-editar-nueva:hover,
#btn-elegir-editar-cargar:hover {
  box-shadow: 3px 3px 0px #222222 !important;
}
.tarjeta-dialogo-personalizado .btn-menu-grande:active,
.tarjeta-confirmar-salir .btn-menu-grande:active,
#btn-cerrar-elegir-editar:active,
#btn-elegir-editar-nueva:active,
#btn-elegir-editar-cargar:active {
  box-shadow: 1px 1px 0px #222222 !important;
}
.btn-gameover-cmd {
  padding: 6px 12px;
  box-shadow: 2px 2px 0px #222222;
}
.aviso-actualizacion-juego {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(calc(92 * var(--vw, 1vw)), 420px);
  box-sizing: border-box;
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #E0F7FA 0%, #FFFDE7 55%, #FFE0F0 100%);
  border: 3px solid #0288D1;
  box-shadow: 5px 5px 0px #222;
  font-family: 'Pixelify Sans', sans-serif;
  color: #222;
  animation: avisoActualizacionEntrada 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both
}
.aviso-actualizacion-juego.saliendo {
  animation: avisoActualizacionSalida 0.3s ease-in forwards
}
.aviso-actualizacion-juego .gato-nekonews-arriba {
  margin-bottom: 4px
}
.aviso-actualizacion-icono {
  font-size: 22px;
  color: #0288D1;
  flex-shrink: 0
}
.aviso-actualizacion-cuerpo {
  flex: 1 1 130px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}
.aviso-actualizacion-titulo {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7B1FA2
}
.aviso-actualizacion-texto {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3
}
.aviso-actualizacion-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto
}
.btn-aviso-actualizar {
  background: #80DEEA;
  color: #222
}
.btn-aviso-cerrar {
  background: #FFCDD2;
  color: #222
}
@keyframes avisoActualizacionEntrada {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
@keyframes avisoActualizacionSalida {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.9)
  }
}
body.modo-oscuro #contenedor-lista-amigos > [style*="color:#888"],
body.modo-oscuro #contenedor-lista-amigos > [style*="color: #888"] {
  color: #F1DCF2 !important
}
body.modo-oscuro #texto-preview-accesorio-mascota-nombre {
  color: #FFF6FB !important;
  text-shadow: 1px 1px 0px #4A3B5C
}
body.modo-oscuro #texto-preview-accesorio-mascota-estado {
  color: #F1DCF2 !important;
  text-shadow: 1px 1px 0px #4A3B5C
}
body.modo-oscuro #modal-cuenta-online div[style*="color:#555"],
body.modo-oscuro #modal-cuenta-online div[style*="color: #555"],
body.modo-oscuro #modal-cuenta-online button[style*="color:#555"],
body.modo-oscuro #modal-cuenta-online button[style*="color: #555"] {
  color: #F1DCF2 !important
}
body.modo-oscuro #contenedor-logros > [style*="color:#888"],
body.modo-oscuro #contenedor-logros > [style*="color: #888"],
body.modo-oscuro #contenedor-niveles-pase > [style*="color:#888"],
body.modo-oscuro #contenedor-niveles-pase > [style*="color: #888"],
body.modo-oscuro #contenedor-elegir-editar-lista > [style*="color:#888"],
body.modo-oscuro #contenedor-elegir-editar-lista > [style*="color: #888"] {
  color: #F1DCF2 !important
}
.carnet-perfil-clase-emblema {
  transform-origin: 50% 70%;
  animation: carnetEmblemaFlotar 3.2s linear infinite;
  will-change: transform
}
.sala-mp-vs-slot:nth-child(even) .carnet-perfil-clase-emblema {
  animation-delay: -1.6s
}
@keyframes carnetEmblemaFlotar {
  0% {
    transform: translate(0px, 0px) rotate(0deg)
  }
  5% {
    transform: translate(-0.464px, -0.143px) rotate(-0.618deg)
  }
  10% {
    transform: translate(-0.882px, -0.518px) rotate(-1.176deg)
  }
  15% {
    transform: translate(-1.214px, -0.982px) rotate(-1.618deg)
  }
  20% {
    transform: translate(-1.427px, -1.357px) rotate(-1.902deg)
  }
  25% {
    transform: translate(-1.5px, -1.5px) rotate(-2deg)
  }
  30% {
    transform: translate(-1.427px, -1.357px) rotate(-1.902deg)
  }
  35% {
    transform: translate(-1.214px, -0.982px) rotate(-1.618deg)
  }
  40% {
    transform: translate(-0.882px, -0.518px) rotate(-1.176deg)
  }
  45% {
    transform: translate(-0.464px, -0.143px) rotate(-0.618deg)
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg)
  }
  55% {
    transform: translate(0.464px, -0.143px) rotate(0.618deg)
  }
  60% {
    transform: translate(0.882px, -0.518px) rotate(1.176deg)
  }
  65% {
    transform: translate(1.214px, -0.982px) rotate(1.618deg)
  }
  70% {
    transform: translate(1.427px, -1.357px) rotate(1.902deg)
  }
  75% {
    transform: translate(1.5px, -1.5px) rotate(2deg)
  }
  80% {
    transform: translate(1.427px, -1.357px) rotate(1.902deg)
  }
  85% {
    transform: translate(1.214px, -0.982px) rotate(1.618deg)
  }
  90% {
    transform: translate(0.882px, -0.518px) rotate(1.176deg)
  }
  95% {
    transform: translate(0.464px, -0.143px) rotate(0.618deg)
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg)
  }
}
@media (prefers-reduced-motion: reduce) {
  .carnet-perfil-clase-emblema {
    animation: none
  }
}
.contenedor-botones-menu .btn-menu-grande,
.tarjeta-pausa .btn-menu-grande ,
.tarjeta-resultados .btn-menu-grande,
#res-escenario .rs-botones .btn-menu-grande,
#btn-dialogo-personalizado-ok {
  isolation: isolate
}
.cubos-hover-btn {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  display: block;
  container-type: inline-size
}
.cubos-hover-btn > span[data-extra] {
  opacity: 0;
  transition: opacity 0.3s ease
}
.contenedor-botones-menu .btn-menu-grande:hover .cubos-hover-btn > span[data-extra],
.contenedor-botones-menu .btn-menu-grande.foco-teclado .cubos-hover-btn > span[data-extra],
.tarjeta-pausa .btn-menu-grande:hover .cubos-hover-btn > span[data-extra],
.tarjeta-resultados .btn-menu-grande:hover .cubos-hover-btn > span[data-extra],
#res-escenario .rs-botones .btn-menu-grande:hover .cubos-hover-btn > span[data-extra],
.tarjeta-pausa .btn-menu-grande.foco-teclado .cubos-hover-btn > span[data-extra] ,
.tarjeta-resultados .btn-menu-grande.foco-teclado .cubos-hover-btn > span[data-extra],
#res-escenario .rs-botones .btn-menu-grande.foco-teclado .cubos-hover-btn > span[data-extra],
#btn-dialogo-personalizado-ok:hover .cubos-hover-btn > span[data-extra],
#btn-dialogo-personalizado-ok.foco-teclado .cubos-hover-btn > span[data-extra] {
  opacity: var(--opa, 0.6)
}
.cubos-hover-btn > span {
  position: absolute;
  left: 100%;
  top: var(--y, 50%);
  width: var(--tam, 10px);
  height: var(--tam, 10px);
  opacity: var(--opa, 0.6);
  background: var(--cubo-1, #fff);
  animation: cuboHoverBotonMenu var(--dur, 0.9s) linear var(--delay, 0s) infinite;
  will-change: transform
}
@keyframes cuboHoverBotonMenu {
  from {
    transform: translateX(0) rotate(var(--rot0, 0deg))
  }
  to {
    transform: translateX(calc(-100cqw - var(--tam, 10px))) rotate(calc(var(--rot0, 0deg) + var(--giro, 270deg)))
  }
}
@media (prefers-reduced-motion: reduce) {
  .cubos-hover-btn {
    display: none !important
  }
}
.cubos-hover-btn > span.cubo-tono-1 {
  background: var(--cubo-1, #fff)
}
.cubos-hover-btn > span.cubo-tono-2 {
  background: var(--cubo-2, #ddd)
}
.btn-menu-jugar {
  --cubo-1: #E1F8FC;
  --cubo-2: #5FD3E2
}
.btn-menu-sala-mp {
  --cubo-1: #FBEEFD;
  --cubo-2: #B889DB
}
.btn-menu-editar {
  --cubo-1: #FFF9E3;
  --cubo-2: #FFC46B
}
.btn-menu-config {
  --cubo-1: #F3FAF3;
  --cubo-2: #78C47E
}
#btn-pausa-salir {
  --cubo-1: #FFEBEE;
  --cubo-2: #E57373
}
#menu-principal .contenedor-botones-menu .btn-menu-grande.foco-teclado {
  background-color: var(--plano-a, #FFFDE7) !important;
  background-image: linear-gradient(135deg, var(--plano-a, #FFFDE7) 0%, var(--plano-b, #FFFDE7) 100%) !important;
  background-size: auto;
  background-position: 0 0;
  box-shadow: 6px 6px 0px #222222 !important;
  outline: none;
  filter: brightness(1.05);
  transform: translate(-2px, -2px);
  animation: saltoGiroBotonMenu 0.9s ease-in-out infinite
}
#menu-principal .contenedor-botones-menu .btn-menu-grande,
.tarjeta-pausa .btn-menu-grande ,
.tarjeta-resultados .btn-menu-grande,
#res-escenario .rs-botones .btn-menu-grande,
#btn-dialogo-personalizado-ok {
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important
}
#menu-principal .contenedor-botones-menu .btn-menu-grande::before,
.tarjeta-pausa .btn-menu-grande::before ,
.tarjeta-resultados .btn-menu-grande::before,
#res-escenario .rs-botones .btn-menu-grande::before,
#btn-dialogo-personalizado-ok::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2, #999) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: rejillaBotonMenu 6s linear infinite
}
#menu-principal .contenedor-botones-menu .btn-menu-grande:hover::before,
#menu-principal .contenedor-botones-menu .btn-menu-grande.foco-teclado::before,
.tarjeta-pausa .btn-menu-grande:hover::before,
.tarjeta-resultados .btn-menu-grande:hover::before,
#res-escenario .rs-botones .btn-menu-grande:hover::before,
.tarjeta-pausa .btn-menu-grande.foco-teclado::before ,
.tarjeta-resultados .btn-menu-grande.foco-teclado::before,
#res-escenario .rs-botones .btn-menu-grande.foco-teclado::before,
#btn-dialogo-personalizado-ok:hover::before,
#btn-dialogo-personalizado-ok.foco-teclado::before {
  opacity: 0
}
@keyframes rejillaBotonMenu {
  from {
    background-position: 0 0
  }
  to {
    background-position: 100px 0
  }
}
@media (prefers-reduced-motion: reduce) {
  #menu-principal .contenedor-botones-menu .btn-menu-grande::before,
  .tarjeta-pausa .btn-menu-grande::before ,
  .tarjeta-resultados .btn-menu-grande::before,
  #res-escenario .rs-botones .btn-menu-grande::before,
  #btn-dialogo-personalizado-ok::before {
    animation: none
  }
}
.pase-pista-scroll {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 8px;
  margin-top: 4px;
  scrollbar-width: thin
}
.pase-pista {
  --col-w: 128px;
  width: calc(var(--n) * var(--col-w));
  position: relative
}
.pase-cartas,
.pase-riel-fila {
  display: grid;
  grid-template-columns: repeat(var(--n), var(--col-w))
}
.pase-cartas {
  align-items: stretch
}
.pase-cartas > .tarjeta-logro {
  margin: 0 5px
}
.pase-riel-fila {
  position: relative;
  padding-top: 10px;
  min-height: 62px
}
.pase-riel,
.pase-riel-fill {
  position: absolute;
  left: 0;
  top: 16px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #222
}
.pase-riel {
  background: #CFD8DC
}
.pase-riel-fill {
  background: linear-gradient(90deg, #00E5FF, #FF4081);
  transition: width 0.9s ease-out
}
.pase-nodo-celda {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center
}
.pase-nodo {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 3px solid #222;
  background: #CFD8DC;
  box-shadow: 2px 2px 0px #222;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center
}
.pase-nodo-num {
  transform: rotate(-45deg);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: #222
}
.pase-nodo-alcanzado {
  background: linear-gradient(135deg, #00E5FF, #FF4081)
}
.pase-nodo-siguiente {
  background: #FFF9C4;
  border-color: #D81B60;
  animation: paseNodoPulso 1.4s ease-in-out infinite
}
@keyframes paseNodoPulso {
  0%,
  100% {
    box-shadow: 2px 2px 0px #222,0 0 0 0 rgba(216,27,96,0.55)
  }
  50% {
    box-shadow: 2px 2px 0px #222,0 0 0 6px rgba(216,27,96,0)
  }
}
.pase-nodo-pp {
  margin-top: 9px;
  font-size: 10px;
  font-weight: bold;
  color: #D81B60;
  white-space: nowrap
}
@media (prefers-reduced-motion: reduce) {
  .pase-nodo-siguiente {
    animation: none
  }
  .pase-riel-fill {
    transition: none
  }
}
.lista-pases-temporada {
  width: 100%;
  max-height: calc(44 * var(--vh, 1vh));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 2px 4px 6px 2px
}
.tarjeta-pase-lista {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: #222;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  transition: transform 0.15s ease,box-shadow 0.15s ease
}
.tarjeta-pase-lista:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px #222
}
.tarjeta-pase-lista.activo {
  background: linear-gradient(135deg, #C8E6C9 0%, #FFF9C4 100%);
  border-color: #2E7D32
}
.pase-lista-icono {
  font-size: 30px;
  line-height: 1
}
.pase-lista-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px
}
.pase-lista-nombre {
  font-size: 14px;
  font-weight: bold;
  color: #D81B60
}
.pase-lista-badge {
  font-size: 10px;
  color: #2E7D32;
  margin-left: 6px
}
.pase-lista-nivel,
.pase-lista-pp {
  font-size: 11px;
  color: #444
}
.tarjeta-pase-lista .barra-xp-contenedor,
.tarjeta-pase-lista .barra-xp-relleno {
  display: block
}
.pase-lista-flecha {
  font-size: 14px;
  color: #222
}
.emblema-rango-envoltorio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0
}
.emblema-rango {
  display: block;
  width: 112px;
  height: 112px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none
}
.emblema-rango-vaiven {
  position: relative;
  display: block;
  animation: emblema-vaiven 1.2s steps(1) infinite
}
@keyframes emblema-vaiven {
  0% { translate: 0 0 }
  50% { translate: 0 -1.786% }
}
.emblema-rango-brillo {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: #fff;
  -webkit-mask: var(--m) center/100% 100% no-repeat;
  mask: var(--m) center/100% 100% no-repeat;
  opacity: 0;
  animation: emblema-brillo var(--t, 1.8s) steps(1) var(--dl, 0s) infinite
}
@keyframes emblema-brillo {
  0% { opacity: 0 }
  8% { opacity: .45 }
  16%, 36% { opacity: 1 }
  44% { opacity: .45 }
  52%, 100% { opacity: 0 }
}
.rango-ola-grande .emblema-rango {
  width: 112px;
  height: 112px
}
.tarjeta-record-panel .rango-ola-grande .emblema-rango {
  width: 56px;
  height: 56px
}
.emblema-rango.emblema-rango-mini {
  width: 28px;
  height: 28px;
  image-rendering: auto
}
.sala-mp-fila-ronda-rango-emblema {
  background: transparent !important;
  border: none !important;
  width: 28px;
  height: 28px
}
.sala-mp-fila-ronda-rango .emblema-rango.emblema-rango-mini {
  width: 28px;
  height: 28px
}
.carnet-perfil-clase-emblema {
  image-rendering: pixelated
}
canvas.px-dom {
  display: block;
  image-rendering: pixelated
}
canvas.px-dom.px-h {
  display: none
}
.btn-gameover-cmd:hover canvas.px-dom.px-n {
  display: none
}
.btn-gameover-cmd:hover canvas.px-dom.px-h {
  display: block
}
.ventana-derrota-cmd-titulo {
  align-items: center
}
.ventana-derrota-cmd-titulo > span:first-child::after {
  content: none
}
.ventana-derrota-cmd-titulo > span,
.ventana-derrota-cmd-cuerpo > div {
  display: block;
  line-height: 0
}
.ventana-derrota-cmd-cuerpo > div + div {
  margin-top: .45em
}
.pantalla-gameover .encabezado-ventana-y2k > span {
  display: block;
  line-height: 0
}
.pantalla-gameover .encabezado-ventana-y2k > span:first-child::after {
  content: none
}
.pantalla-gameover .cuerpo-cmd-gameover p {
  margin: 6px 0;
  line-height: 0
}
#pantalla-gameover .btn-gameover-cmd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 200px;
  padding: 9px 14px
}
.px-linea {
  display: flex;
  align-items: center;
  line-height: 0
}
.px-linea::after {
  content: none !important
}
canvas.px-dom.px-cursor {
  margin-left: 2px;
  align-self: flex-end;
  animation: parpadeoCursorPrompt 1s steps(1, end) infinite
}
.cmd-linea-pixel {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: normal;
  line-height: 0
}
.cmd-linea-px-texto {
  margin: 0 3px;
  white-space: pre;
  line-height: 1.2
}
.cmd-linea-arte {
  white-space: pre-wrap;
  line-height: 1.3
}
.cmd-noticia-px-cab {
  margin-bottom: 5px
}
.anuncio-falso-premio .cmd-linea-pixel,
.anuncio-falso-letra-chica .cmd-linea-pixel {
  justify-content: center
}
.px-etiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle
}
.px-etiqueta .px-emoji {
  line-height: 1;
  font-size: 1.1em
}
.px-ui canvas.px-dom {
  max-width: 100%;
  min-width: 0;
  height: auto !important
}
.px-linea .px-emoji {
  line-height: 1;
  margin-right: .35em
}
.mini-ventana-titulo .mini-ventana-titulo-texto.px-ui::before {
  content: none
}
.mini-ventana-titulo .mini-ventana-titulo-texto.px-ui {
  display: flex;
  align-items: center;
  line-height: 0
}
.px-parrafo-cont {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  line-height: 0
}
.px-parrafo-cont.px-inline {
  display: inline-flex;
  vertical-align: middle
}
.px-parrafo-cont canvas.px-dom {
  flex: 0 0 auto
}
.px-parrafo-plano {
  line-height: 1.2;
  white-space: nowrap
}
a.tab-buymeacoffee canvas.px-dom {
  max-width: none
}
.carnet-perfil-nombre .px-parrafo-cont,
.carnet-mascota-nombre .px-parrafo-cont {
  flex-wrap: nowrap;
  overflow: hidden
}
.px-tn.px-parrafo-cont,
.px-tn .px-parrafo-cont {
  vertical-align: middle
}
.medalla-nombre .px-parrafo-cont,
.swatch-skin-receptor > span .px-parrafo-cont {
  justify-content: center
}
.carnet-perfil-clase-fila-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px
}
.carnet-perfil-clase-fila-flex .carnet-perfil-clase,
.carnet-perfil-clase-fila-flex .insignia-charter-verificado {
  flex-shrink: 0
}
#modal-cuenta .encabezado-ventana-y2k > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 6px
}
.leaderboard-nombre .px-parrafo-cont {
  flex-wrap: nowrap;
  overflow: hidden
}
.px-msg.px-inline,
.px-msg .px-parrafo-cont {
  vertical-align: middle
}
.btn-jugar-item-panel .px-etiqueta,
.biblio-tab-btn .px-etiqueta {
  gap: .6em
}
.input-placeholder-pixel::placeholder {
  color: transparent !important
}
.placeholder-pixel-busqueda {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
  display: none;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap
}
.placeholder-pixel-busqueda canvas.px-dom {
  display: inline-block
}
.titulo-cancion-lista .px-parrafo-cont,
.autor-cancion-lista .px-parrafo-cont {
  flex-wrap: nowrap;
  overflow: hidden
}
.titulo-cancion-lista.px-inline,
.autor-cancion-lista.px-inline {
  min-width: 0
}
.btn-importar-online .px-etiqueta {
  gap: .5em
}
.puntaje-ola-grande img.px-num {
  display: block;
  height: 50px;
  width: auto;
  image-rendering: pixelated
}
.tarjeta-record-panel .puntaje-ola-grande img.px-num {
  height: 40px
}
.select-px {
  display: inline-block
}
.select-px-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #222;
  padding: 3px 6px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  color: #222;
  cursor: pointer;
  line-height: 0;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 11px
}
.select-px-texto,
.select-px-op {
  display: inline-flex;
  align-items: center;
  line-height: 0
}
.select-px-flecha {
  display: inline-flex;
  line-height: 0
}
.select-px-menu {
  display: none;
  position: fixed;
  z-index: 100001;
  background: #FFF8FC;
  border: 2px solid #222;
  box-shadow: 3px 3px 0 #222;
  max-height: 260px;
  overflow-y: auto;
  box-sizing: border-box
}
.select-px-menu.abierto {
  display: block
}
.select-px-op {
  display: flex;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  color: #222;
  font-size: 11px
}
.select-px-op:hover,
.select-px-op.activo {
  background: #FFD6E8
}
.select-px .px-etiqueta {
  justify-content: flex-start
}
#btn-cerrar-lista-canciones,
.biblio-tab-btn {
  position: relative;
  isolation: isolate
}
#btn-cerrar-lista-canciones::before,
.biblio-tab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2, #999) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: rejillaBotonMenu 6s linear infinite
}
#btn-cerrar-lista-canciones:hover::before,
.biblio-tab-btn:hover::before {
  opacity: 0
}
#btn-cerrar-lista-canciones:hover .cubos-hover-btn > span[data-extra],
.biblio-tab-btn:hover .cubos-hover-btn > span[data-extra] {
  opacity: var(--opa, 0.6)
}
#btn-cerrar-lista-canciones {
  --cubo-1: #FFEBEE;
  --cubo-2: #E57373
}
#btn-tab-local {
  --cubo-1: #E1F8FC;
  --cubo-2: #5FD3E2
}
#btn-tab-online {
  --cubo-1: #FBEEFD;
  --cubo-2: #B889DB
}
#btn-tab-mods {
  --cubo-1: #F3FAF3;
  --cubo-2: #78C47E
}
@media (prefers-reduced-motion: reduce) {
  #btn-cerrar-lista-canciones::before,
  .biblio-tab-btn::before {
    animation: none
  }
}
#widget-perfil-biblioteca {
  width: clamp(220px, calc(17.7 * var(--vw, 1vw)), 340px)
}
@media (max-width: 640px) {
  #widget-perfil-biblioteca {
    width: clamp(96px, calc(30 * var(--vw, 1vw)), 150px)
  }
}
.reproductor-info-cancion-track {
  font-size: 18px;
  display: inline-flex;
  align-items: center
}
.reproductor-info-cancion-track .px-parrafo-cont {
  flex-wrap: nowrap;
  max-width: none;
  flex-shrink: 0
}
.reproductor-info-cancion-track .px-parrafo-plano {
  line-height: 24px;
  font-size: 12px
}
.tarjeta-record-panel {
  --plano-a: #C9EEFB;
  --plano-b: #A8E3F5;
  --cubo-1: #E1F8FC;
  --cubo-2: #5FD3E2;
  position: relative;
  isolation: isolate;
  background-color: var(--plano-a);
  background-image: linear-gradient(135deg, var(--plano-a) 0%, var(--plano-b) 100%)
}
.tarjeta-record-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: rejillaBotonMenu 6s linear infinite
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-record-panel::before {
    animation: none
  }
}
#btn-copiar-codigo-amigo,
#btn-agregar-amigo {
  flex: 0 0 auto;
  min-width: 118px;
  padding-left: 18px;
  padding-right: 18px
}
.grupo-opciones-borde button:disabled {
  color: #222222
}
.placa-combo-pixel {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none
}
.placa-combo-pixel.placa-ap {
  animation: placaApPixel 1.2s steps(12) infinite
}
@keyframes placaApPixel {
  from {
    background-position: 0 0
  }
  to {
    background-position: calc(var(--shift) * -1) 0
  }
}
.placa-combo-tras-letra {
  position: absolute;
  z-index: 2;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  white-space: nowrap
}
#res-combo-badge.combo-badge-pixel {
  border: 0;
  box-shadow: none;
  background: none;
  animation: none;
  padding: 0;
  margin: 0 0 6px 0;
  line-height: 0
}
@media (prefers-reduced-motion: reduce) {
  .placa-combo-pixel.placa-ap {
    animation: none
  }
}
.biblio-acciones-cancion .btn-jugar-item-panel {
  --plano-a: #B3E5FC;
  --plano-b: #80DEEA;
  --cubo-1: #E1F8FC;
  --cubo-2: #5FD3E2;
  isolation: isolate;
  border-radius: 0;
  color: #222222;
  background-color: var(--plano-a);
  background-image: linear-gradient(135deg, var(--plano-a) 0%, var(--plano-b) 100%);
  box-shadow: 4px 4px 0px #222222;
  text-shadow: none
}
.biblio-acciones-cancion .btn-jugar-item-panel:hover {
  background-color: var(--plano-a);
  background-image: linear-gradient(135deg, var(--plano-a) 0%, var(--plano-b) 100%);
  box-shadow: 6px 6px 0px #222222;
  filter: brightness(1.05)
}
.biblio-acciones-cancion .btn-jugar-item-panel:active {
  box-shadow: 1px 1px 0px #222222;
  filter: none
}
.biblio-acciones-cancion .btn-jugar-item-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: rejillaBotonMenu 6s linear infinite
}
.biblio-acciones-cancion .btn-jugar-item-panel:hover::before {
  opacity: 0
}
.biblio-acciones-cancion .btn-jugar-item-panel:hover .cubos-hover-btn > span[data-extra] {
  opacity: var(--opa, 0.6)
}
@media (prefers-reduced-motion: reduce) {
  .biblio-acciones-cancion .btn-jugar-item-panel::before {
    animation: none
  }
}
body.tema-halloween {
  --bg-color-web: linear-gradient(160deg, #14041F 0%, #2E0B4A 50%, #8A3A00 100%);
  --grid-color-web: rgba(255, 152, 0, 0.25)
}
body.tema-halloween #menu-principal h2 {
  color: #FF9800;
  background: #2A0F3D;
  border-color: #FF9800;
  box-shadow: 4px 4px 0 #FF9800;
  text-shadow: 3px 3px 0 #000
}
body.tema-halloween .btn-menu-jugar {
  --plano-a: #FFE0B2;
  --plano-b: #FF9800;
  --cubo-1: #FFF3E0;
  --cubo-2: #E65100
}
body.tema-halloween .btn-menu-sala-mp {
  --plano-a: #E1BEE7;
  --plano-b: #BA68C8;
  --cubo-1: #F3E5F5;
  --cubo-2: #6A1B9A
}
body.tema-halloween .btn-menu-editar {
  --plano-a: #FFF9C4;
  --plano-b: #FFEE58;
  --cubo-1: #FFFDE7;
  --cubo-2: #F9A825
}
body.tema-halloween .btn-menu-cargar {
  --plano-a: #D1C4E9;
  --plano-b: #9575CD;
  --cubo-1: #EDE7F6;
  --cubo-2: #5E35B1
}
body.tema-halloween .btn-menu-config {
  --plano-a: #DCEDC8;
  --plano-b: #9CCC65;
  --cubo-1: #F1F8E9;
  --cubo-2: #558B2F
}
body.tema-halloween .cmd-flotante-kawaii.tema-menta .cmd-titulo-kawaii {
  background: #FF9800
}
body.tema-halloween .cmd-flotante-kawaii.tema-menta .cmd-cuerpo-kawaii {
  color: #FFCC80
}
body.tema-halloween .cmd-flotante-kawaii.tema-lila .cmd-titulo-kawaii {
  background: #7B1FA2
}
body.tema-halloween .cmd-flotante-kawaii.tema-lila .cmd-cuerpo-kawaii {
  color: #E1BEE7
}
body.tema-halloween .cmd-flotante-kawaii.tema-rosa .cmd-titulo-kawaii {
  background: #E65100
}
body.tema-halloween .rombo-gigante-fondo {
  border-color: rgba(255, 152, 0, 0.7)
}
#halloween-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3
}
.hw-fantasma {
  position: absolute;
  left: 0;
  will-change: transform;
  animation: hw-cruzar-der var(--hw-dur, 20s) linear forwards
}
.hw-fantasma.hw-izq {
  animation-name: hw-cruzar-izq
}
.hw-fantasma-img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(206, 147, 216, 0.85));
  animation: hw-flotar 1.6s steps(6) infinite alternate
}
.hw-calabaza-vuelo {
  position: absolute;
  left: 0;
  will-change: transform;
  animation: hw-cruzar-der var(--hw-dur, 26s) linear forwards
}
.hw-calabaza-vuelo.hw-izq {
  animation-name: hw-cruzar-izq
}
.hw-calabaza-img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.9));
  animation: hw-calabaza-baile 1.2s ease-in-out infinite, hw-calabaza-brillo 2.4s steps(3) infinite alternate
}
@keyframes hw-cruzar-der {
  from {
    transform: translateX(-140px)
  }
  to {
    transform: translateX(calc(calc(100 * var(--vw, 1vw)) + 140px))
  }
}
@keyframes hw-cruzar-izq {
  from {
    transform: translateX(calc(calc(100 * var(--vw, 1vw)) + 140px))
  }
  to {
    transform: translateX(-140px)
  }
}
@keyframes hw-flotar {
  from {
    transform: translateY(-9px)
  }
  to {
    transform: translateY(9px)
  }
}
@keyframes hw-calabaza-baile {
  0%,
  100% {
    transform: translateX(-6px) rotate(-9deg)
  }
  25% {
    transform: translateX(0) translateY(-8px) rotate(0deg)
  }
  50% {
    transform: translateX(6px) rotate(9deg)
  }
  75% {
    transform: translateX(0) translateY(-8px) rotate(0deg)
  }
}
@keyframes hw-calabaza-brillo {
  from {
    filter: drop-shadow(0 0 4px rgba(255, 152, 0, 0.6)) brightness(0.92)
  }
  to {
    filter: drop-shadow(0 0 12px rgba(255, 193, 7, 1)) brightness(1.2)
  }
}
.lista-tema-evento {
  display: flex;
  flex-direction: column;
  gap: 6px
}
.item-tema-evento {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  background: #FFFDE7;
  border: 3px solid #222;
  box-shadow: 3px 3px 0 #222;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  text-align: left;
  cursor: pointer
}
.item-tema-evento:hover {
  background: #FFF59D
}
.item-tema-evento.activo {
  background: #FFCC80;
  box-shadow: 3px 3px 0 #FF6F00
}
.item-tema-evento-icono {
  width: 28px;
  height: auto;
  image-rendering: pixelated;
  flex-shrink: 0
}
.item-tema-evento-texto {
  flex: 1
}
.item-tema-evento-marca {
  visibility: hidden;
  color: #2E7D32
}
.item-tema-evento.activo .item-tema-evento-marca {
  visibility: visible
}
@media (prefers-reduced-motion: reduce) {
  .hw-fantasma-img,
  .hw-calabaza-img {
    animation: none
  }
}
body.reducir-efectos #halloween-decor {
  display: none
}
.accesorio-anim-flotar img,
.accesorio-anim-vaiven img,
.accesorio-anim-giro img,
.accesorio-anim-rebote img {
  image-rendering: pixelated
}
span.accesorio-anim-destello:not(.accesorio-mascota-capa) {
  position: relative
}
.accesorio-anim-destello img {
  image-rendering: pixelated
}
.accesorio-anim-destello::before,
.accesorio-anim-destello::after {
  content: "";
  position: absolute;
  background: var(--spk-destello) center/100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transform: scale(0);
  pointer-events: none
}
.accesorio-anim-destello::after {
  width: .4em;
  height: .4em;
  left: calc(88% - .2em);
  top: calc(30% - .2em);
  animation: accDestello 1.92s ease-out infinite
}
.accesorio-anim-destello::before {
  width: .28em;
  height: .28em;
  left: calc(6% - .14em);
  top: calc(34% - .14em);
  animation: accDestello 1.92s ease-out infinite;
  animation-delay: -.96s
}
@keyframes accDestello {
  0%,
  52% {
    opacity: 0;
    transform: scale(0) rotate(0)
  }
  60% {
    opacity: 1;
    transform: scale(1.2) rotate(20deg)
  }
  72% {
    opacity: 1;
    transform: scale(.9) rotate(45deg)
  }
  90% {
    opacity: 0;
    transform: scale(0) rotate(90deg)
  }
  100% {
    opacity: 0;
    transform: scale(0)
  }
}
.accesorio-anim-rebote img {
  animation: accNotaRebote .96s linear infinite;
  transform-origin: 50% 100%
}
@keyframes accNotaRebote {
  0%,
  100% {
    transform: translateY(.05em) scale(1.14, .82);
    animation-timing-function: cubic-bezier(.2, .7, .4, 1)
  }
  45% {
    transform: translateY(-.42em) scale(.93, 1.08);
    animation-timing-function: cubic-bezier(.6, 0, .8, .4)
  }
}
.accesorio-anim-giro img {
  animation: accRomboGiro 1.8s ease-in-out infinite;
  transform-origin: 50% 50%
}
@keyframes accRomboGiro {
  0%,
  100% {
    transform: rotate(-22deg)
  }
  50% {
    transform: rotate(22deg)
  }
}
.accesorio-anim-flotar img {
  animation: accFantasmaFlotar 2.2s ease-in-out infinite
}
.accesorio-anim-vaiven img {
  animation: accCalabazaVaiven 2.6s ease-in-out infinite
}
@keyframes accFantasmaFlotar {
  0%,
  100% {
    transform: translateY(.08em)
  }
  50% {
    transform: translateY(-.18em)
  }
}
@keyframes accCalabazaVaiven {
  0%,
  100% {
    transform: translateX(-.16em) rotate(-7deg)
  }
  50% {
    transform: translateX(.16em) rotate(7deg)
  }
}
.carnet-borde-animado-overlay.borde-anim-embrujado,
.swatch-borde-carnet-demo.borde-anim-embrujado,
.estilo-fila-demo-borde.borde-anim-embrujado {
  animation: bordeCarnetEmbrujado var(--borde-anim-duracion, 2.6s) ease-in-out infinite
}
@keyframes bordeCarnetEmbrujado {
  0%,
  100% {
    opacity: 1
  }
  18% {
    opacity: .78
  }
  22% {
    opacity: 1
  }
  55% {
    opacity: .86
  }
  60% {
    opacity: 1
  }
}
.carnet-borde-animado-overlay.borde-anim-embrujado::before,
.carnet-borde-animado-overlay.borde-anim-embrujado::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none
}
.carnet-borde-animado-overlay.borde-anim-embrujado::before {
  top: -9px;
  left: 6px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA9klEQVR4nJ2TMQrCQBBF34ZcwsY0nkAPIQomnYitjXa2nsDWThtbCXZRUDyEnsAmguQYsQi7zLobRT8Edmb//zuZnQUgjij5EVoTysQhR+m4M2taptf1Q72LAcI4otzNMwDGq8Qy6fVbAJxPd+tkyTcVAOzmGeNVUgI8a0rWYg0VR5TZwv3HZGnHdZzQTUNxcQXFBRpdlxuYVTSovh8RGDFAfvzTQIqHo3q2Zy/wiRtbl2hybyZ2E/cpIBqmyfuUYpJ+aeKHMj/tKaiGxLo2cbI3ppqBQ46y5lub+O5c5rTYVCBNADZtv8H0Vq3le1F4UPe8pVDjBbDyXPNyb1AHAAAAAElFTkSuQmCC");
  animation: marcoCalabazaMeneo 2.6s ease-in-out infinite
}
.carnet-borde-animado-overlay.borde-anim-embrujado::after {
  bottom: -9px;
  right: 6px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAATCAYAAACgADyUAAAAxElEQVR4nGNgYGBgsBVP+89AJICpZUIXIEYTnPP56df/n59+/Y9PM7o6FmTJbef6GbyMGP4zMDAwHH45ixHZlm3n+lEMQtGIrABmALoGnBrRDcAFmPDKkqJRXdWMQV3VDCefYhtR/Mi4ag/DzdunUBTA+Iyr9jD8D3PBbiOyBLoTkeWo51RsTsQFmBgYGBhur3tMtE0wtZTHIzG2IqthYWBgYFANkiXKFri6FixO9TIqZPAyKsTJhwGUrMPAgJmd0PkwMQCQDluq7pRfSAAAAABJRU5ErkJggg==");
  animation: marcoEmbrujadoFantasma 2.4s ease-in-out infinite
}
.carnet-borde-animado-overlay .marco-adorno {
  position: absolute;
  pointer-events: none
}
.carnet-borde-animado-overlay .marco-fantasma {
  animation: marcoEmbrujadoFantasma var(--mf-dur, 2.6s) ease-in-out infinite
}
.carnet-borde-animado-overlay .marco-calabaza {
  animation: marcoCalabazaMeneo var(--mf-dur, 2.6s) ease-in-out infinite
}
.carnet-borde-animado-overlay .marco-adorno img {
  display: block;
  width: 100%;
  image-rendering: pixelated
}
@keyframes marcoCalabazaMeneo {
  0%,
  100% {
    transform: rotate(-7deg)
  }
  50% {
    transform: rotate(7deg)
  }
}
@keyframes marcoEmbrujadoCalabaza {
  0%,
  100% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(14px)
  }
}
@keyframes marcoEmbrujadoFantasma {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-5px)
  }
}
@media (prefers-reduced-motion: reduce) {
  .accesorio-anim-flotar img,
  .accesorio-anim-vaiven img,
  .accesorio-anim-giro img,
  .accesorio-anim-rebote img,
  .accesorio-anim-destello::before,
  .accesorio-anim-destello::after,
  .carnet-borde-animado-overlay.borde-anim-embrujado,
  .carnet-borde-animado-overlay.borde-anim-embrujado::before,
  .carnet-borde-animado-overlay.borde-anim-embrujado::after,
  .carnet-borde-animado-overlay .marco-adorno {
    animation: none
  }
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes {
  font-size: 26px;
  top: -14px;
  left: -2px
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
  font-size: 26px;
  top: -14px;
  right: -2px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes {
  font-size: 30px;
  top: -17px;
  left: -4px
}
#mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
  font-size: 30px;
  top: -17px;
  right: -4px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes {
  font-size: 30px;
  top: -17px;
  left: -4px
}
#mascota-widget-menu.mascota-widget-menu-expandido #mascota-widget-menu-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
  font-size: 30px;
  top: -17px;
  right: -4px
}
#carnet-mascota-preview .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes {
  font-size: 26px;
  top: -15px;
  left: -2px
}
#carnet-mascota-preview .accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
  font-size: 26px;
  top: -15px;
  right: -2px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes {
  font-size: 28px;
  top: -16px;
  left: -3px
}
.cartel-habilidad-avatar-wrap .accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
  font-size: 28px;
  top: -16px;
  right: -3px
}
.swatch-franja-carnet.swatch-ola-carril {
  width: 68px;
  height: 44px;
  padding: 3px
}
.swatch-ola-carril .icono-ola-carril {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #222;
  box-sizing: border-box
}
.swatch-orejas-preview.swatch-orejas-preview-activadas {
  transform: translate(-50%, -50%) scale(1)
}
.swatch-orejas-preview.swatch-orejas-preview-activadas .accesorio-mascota-capa {
  margin-top: 32px
}
.swatch-orejas-preview.swatch-orejas-preview-redondas {
  transform: translate(-50%, -50%) scale(1)
}
.swatch-orejas-preview.swatch-orejas-preview-redondas .accesorio-mascota-capa {
  margin-top: 33px
}
.swatch-orejas-preview.swatch-orejas-preview-caidas {
  transform: translate(-50%, -50%) scale(0.7)
}
.swatch-orejas-preview.swatch-orejas-preview-caidas .accesorio-mascota-capa {
  margin-top: 25px
}
.swatch-orejas-preview .accesorio-mascota-capa[class$="-izq"] {
  margin-left: 8px
}
.swatch-orejas-preview .accesorio-mascota-capa[class$="-der"] {
  margin-right: 8px
}
.swatch-orejas-preview.swatch-orejas-preview-activadas .accesorio-mascota-capa[class$="-izq"] {
  margin-left: 3px
}
.swatch-orejas-preview.swatch-orejas-preview-activadas .accesorio-mascota-capa[class$="-der"] {
  margin-right: 3px
}
body.tema-halloween #modal-lista-canciones {
  background: linear-gradient(160deg, rgba(20,4,31,0.9) 0%, rgba(46,11,74,0.9) 50%, rgba(138,58,0,0.88) 100%)
}
body.tema-halloween .biblio-ayuda-teclado {
  color: #FFCC80
}
body.tema-halloween #widget-perfil-biblioteca {
  background: #2A0F3D !important;
  border: 2px solid #FF9800 !important;
  box-shadow: 4px 4px 0px #FF9800 !important
}
body.tema-halloween #widget-perfil-biblioteca .cmd-titulo-widget {
  background: #FF9800 !important;
  border-bottom-color: #FF9800
}
body.tema-halloween #widget-perfil-biblioteca .cmd-cuerpo-widget,
body.tema-halloween #widget-perfil-biblioteca .perfil-info-linea {
  color: #FFCC80 !important
}
body.tema-halloween #widget-perfil-biblioteca .perfil-info-linea span:last-child {
  color: #FF9800 !important
}
body.tema-halloween #widget-perfil-biblioteca .texto-perfil-xp-mini {
  color: #E1BEE7 !important
}
body.tema-halloween .biblio-buscador.contenedor-busqueda-y2k {
  background: #2A0F3D;
  border-color: #FF9800;
  box-shadow: 2px 2px 0px #FF9800
}
body.tema-halloween .biblio-buscador.contenedor-busqueda-y2k span {
  color: #FF9800
}
body.tema-halloween .biblio-buscador.contenedor-busqueda-y2k input {
  color: #FFCC80 !important
}
body.tema-halloween .biblio-buscador.contenedor-busqueda-y2k input::placeholder {
  color: rgba(255,204,128,0.6)
}
body.tema-halloween .btn-engranaje-biblio {
  background: #9CCC65 !important;
  border-color: #222 !important
}
body.tema-halloween .btn-engranaje-biblio:hover {
  background: #DCEDC8 !important
}
body.tema-halloween #btn-tab-local.biblio-tab-btn {
  --plano-a: #FFE0B2;
  --plano-b: #FF9800;
  --cubo-1: #FFF3E0;
  --cubo-2: #E65100
}
body.tema-halloween #btn-tab-online.biblio-tab-btn {
  --plano-a: #E1BEE7;
  --plano-b: #BA68C8;
  --cubo-1: #F3E5F5;
  --cubo-2: #6A1B9A
}
body.tema-halloween #btn-tab-mods.biblio-tab-btn {
  --plano-a: #DCEDC8;
  --plano-b: #9CCC65;
  --cubo-1: #F1F8E9;
  --cubo-2: #558B2F
}
body.tema-halloween #btn-tab-local.biblio-tab-btn.activa {
  --plano-a: #FF9800;
  --plano-b: #FF9800
}
body.tema-halloween #btn-tab-online.biblio-tab-btn.activa {
  --plano-a: #BA68C8;
  --plano-b: #BA68C8
}
body.tema-halloween #btn-tab-mods.biblio-tab-btn.activa {
  --plano-a: #9CCC65;
  --plano-b: #9CCC65
}
body.tema-halloween #btn-cerrar-lista-canciones {
  --plano-a: #FFF9C4;
  --plano-b: #FFEE58;
  --cubo-1: #FFFDE7;
  --cubo-2: #F9A825
}
body.tema-halloween .online-orden-selector,
body.tema-halloween .online-paginacion {
  color: #FFCC80
}
body.tema-halloween .online-orden-selector select,
body.tema-halloween .local-lista-toolbar select#select-orden-local {
  background: #2A0F3D !important;
  color: #FFCC80 !important;
  border-color: #FF9800 !important
}
body.tema-halloween .btn-pag-online {
  background: linear-gradient(135deg, #FFE0B2 0%, #FF9800 100%);
  color: #222
}
body.tema-halloween .btn-filtro-favoritas-local.activa {
  background: #FF9800
}
body.tema-halloween .item-cancion-tarjeta {
  background: #2A0F3D;
  border-color: #FF9800;
  box-shadow: 2px 2px 0px #FF9800
}
body.tema-halloween .item-cancion-tarjeta:hover {
  background: #2E0B4A;
  border-color: #FFCC80
}
body.tema-halloween .titulo-cancion-lista {
  color: #FF9800
}
body.tema-halloween .autor-cancion-lista {
  color: #E1BEE7
}
body.tema-halloween .panel-leaderboard-biblio,
body.tema-halloween .panel-record-grande {
  background: linear-gradient(160deg, rgba(20,4,31,0.92) 0%, rgba(46,11,74,0.9) 50%, rgba(138,58,0,0.85) 100%);
  border-color: #FF9800;
  box-shadow: 5px 5px 0px #FF9800
}
body.tema-halloween .leaderboard-biblio-titulo,
body.tema-halloween .leaderboard-puesto {
  color: #FF9800
}
body.tema-halloween .leaderboard-score,
body.tema-halloween .leaderboard-nombre {
  color: #FFCC80
}
body.tema-halloween .leaderboard-vacio,
body.tema-halloween #info-record-detalles .px-msg,
body.tema-halloween #info-record-detalles > div[style*="F48FB1"] {
  color: #E1BEE7 !important
}
body.tema-halloween .panel-record-contenido {
  scrollbar-color: #FF9800 #2A0F3D
}
body.tema-halloween .panel-record-contenido::-webkit-scrollbar-track {
  background: #2A0F3D
}
body.tema-halloween .panel-record-contenido::-webkit-scrollbar-thumb {
  background: #FF9800
}
body.tema-halloween .cubito-particula {
  background: #FF9800 !important;
  opacity: 0.35
}
body.tema-halloween .cubito-particula:nth-child(even) {
  background: #BA68C8 !important
}
body.tema-halloween .biblio-acciones-cancion .btn-jugar-item-panel {
  --plano-a: #FFE0B2;
  --plano-b: #FF9800;
  --cubo-1: #FFF3E0;
  --cubo-2: #E65100
}
body.tema-halloween .biblio-acciones-cancion .btn-jugar-item-panel::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cpath d='M0 17 Q15 4 30 17 T60 17 T90 17 T120 17 V34 H0 Z' fill='%23FFE0B2' fill-opacity='0.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M0 15 Q10 3 20 15 T40 15 T60 15 T80 15 V30 H0 Z' fill='%23FF9800' fill-opacity='0.55'/%3E%3C/svg%3E")
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes {
  animation: orejasPentagramaIzq 2.4s ease-in-out infinite
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
  animation: orejasPentagramaDer 2.4s ease-in-out infinite
}
@keyframes orejasPentagramaIzq {
  0%,
  100% {
    transform: rotate(-12deg)
  }
  25% {
    transform: rotate(-32deg)
  }
  75% {
    transform: rotate(10deg)
  }
}
@keyframes orejasPentagramaDer {
  0%,
  100% {
    transform: scaleX(-1) rotate(-12deg)
  }
  25% {
    transform: scaleX(-1) rotate(8deg)
  }
  75% {
    transform: scaleX(-1) rotate(-34deg)
  }
}
@media (prefers-reduced-motion: reduce) {
  .accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-grandes,
  .accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-grandes {
    animation: none
  }
}
.carnet-perfil-y2k:has(> .borde-anim-embrujado) {
  overflow: visible
}
#widget-perfil-jugador:has(.borde-anim-embrujado),
#widget-perfil-biblioteca:has(.borde-anim-embrujado) {
  overflow: visible
}
@property --ang-carril {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}
.carnet-borde-animado-overlay.borde-anim-carril,
.swatch-borde-carnet-demo.borde-anim-carril,
.estilo-fila-demo-borde.borde-anim-carril {
  border-image: conic-gradient(from var(--ang-carril), #FF80AB 0 50%, #00BCD4 50% 100%) 1 !important;
  animation: bordeCarrilGiro var(--borde-anim-duracion, 3.84s) linear infinite
}
@keyframes bordeCarrilGiro {
  to {
    --ang-carril: -360deg
  }
}
.carnet-borde-animado-overlay .marco-rombo {
  position: absolute;
  left: 100%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  opacity: 0;
  pointer-events: none;
  animation: marcoRomboViaje var(--borde-anim-duracion, 3.84s) linear infinite
}
.carnet-borde-animado-overlay .marco-rombo-top {
  top: -9px
}
.carnet-borde-animado-overlay .marco-rombo-bottom {
  bottom: -9px
}
.carnet-borde-animado-overlay .marco-rombo img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  animation: marcoRomboGira var(--borde-anim-duracion, 3.84s) linear infinite
}
@keyframes marcoRomboViaje {
  0% {
    left: 100%;
    opacity: 0;
    transform: scale(1)
  }
  10% {
    opacity: 1
  }
  86% {
    left: 14px;
    opacity: 1;
    transform: scale(1)
  }
  88% {
    left: 14px;
    opacity: 0;
    transform: scale(.4)
  }
  100% {
    left: 14px;
    opacity: 0;
    transform: scale(.4)
  }
}
@keyframes marcoRomboGira {
  to {
    transform: rotate(360deg)
  }
}
.carnet-borde-animado-overlay .marco-receptor {
  position: absolute;
  left: 14px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  pointer-events: none
}
.carnet-borde-animado-overlay .marco-receptor-top {
  top: -11px
}
.carnet-borde-animado-overlay .marco-receptor-bottom {
  bottom: -11px
}
.carnet-borde-animado-overlay .marco-receptor i {
  display: block;
  width: 16px;
  height: 16px;
  margin: 3px;
  box-sizing: border-box;
  border: 3px solid #222222;
  box-shadow: inset 0 0 0 2px var(--rc);
  background: rgba(255, 255, 255, .55);
  transform: rotate(45deg);
  animation: marcoReceptorGolpe var(--borde-anim-duracion, 3.84s) linear infinite
}
.carnet-borde-animado-overlay .marco-receptor::after {
  content: "";
  position: absolute;
  inset: 3px;
  box-sizing: border-box;
  border: 2px solid var(--rc);
  opacity: 0;
  transform: rotate(45deg) scale(.8);
  animation: marcoReceptorOnda var(--borde-anim-duracion, 3.84s) linear infinite
}
@keyframes marcoReceptorGolpe {
  0%,
  85.9% {
    transform: rotate(45deg) scale(1);
    background: rgba(255, 255, 255, .55)
  }
  86% {
    transform: rotate(45deg) scale(1.45);
    background: var(--rc);
    animation-timing-function: ease-out
  }
  94%,
  100% {
    transform: rotate(45deg) scale(1);
    background: rgba(255, 255, 255, .55)
  }
}
@keyframes marcoReceptorOnda {
  0%,
  85.9% {
    opacity: 0;
    transform: rotate(45deg) scale(.8)
  }
  86% {
    opacity: .9;
    transform: rotate(45deg) scale(.8);
    animation-timing-function: ease-out
  }
  96%,
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(2.2)
  }
}
.carnet-perfil-y2k:has(> .borde-anim-carril),
#widget-perfil-jugador:has(.borde-anim-carril),
#widget-perfil-biblioteca:has(.borde-anim-carril) {
  overflow: visible
}
@media (prefers-reduced-motion: reduce) {
  .carnet-borde-animado-overlay.borde-anim-carril,
  .carnet-borde-animado-overlay .marco-rombo,
  .carnet-borde-animado-overlay .marco-rombo img,
  .carnet-borde-animado-overlay .marco-receptor i,
  .carnet-borde-animado-overlay .marco-receptor::after {
    animation: none
  }
  .carnet-borde-animado-overlay .marco-rombo {
    left: 50%;
    opacity: 1
  }
}
.carnet-borde-animado-overlay.borde-anim-charter::before,
.carnet-borde-animado-overlay.borde-anim-charter::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  border-top: 1px dashed
}
.carnet-borde-animado-overlay.borde-anim-charter::before {
  top: 3px;
  border-color: rgba(0, 188, 212, .55)
}
.carnet-borde-animado-overlay.borde-anim-charter::after {
  bottom: 3px;
  border-color: rgba(255, 64, 129, .5)
}
.carnet-borde-animado-overlay .marco-nota {
  --w: 19px;
  position: absolute;
  width: var(--w);
  height: var(--w);
  margin-left: -9px;
  pointer-events: none
}
.carnet-borde-animado-overlay .marco-nota-top {
  top: calc(var(--w) / -2 - var(--marco-bw, 3px) / 2)
}
.carnet-borde-animado-overlay .marco-nota-bottom {
  bottom: calc(var(--w) / -2 - var(--marco-bw, 3px) / 2)
}
.carnet-borde-animado-overlay .marco-nota img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0;
  animation: marcoNotaPop var(--borde-anim-duracion, 6.6s) linear infinite backwards;
  animation-delay: calc(var(--i) * var(--borde-anim-duracion, 6.6s) / 12)
}
.carnet-borde-animado-overlay .marco-nota u {
  position: absolute;
  inset: 16%;
  border: 2px dashed var(--c);
  opacity: 0;
  transform: rotate(45deg);
  text-decoration: none;
  animation: marcoNotaFantasma var(--borde-anim-duracion, 6.6s) linear infinite backwards;
  animation-delay: calc(var(--i) * var(--borde-anim-duracion, 6.6s) / 12)
}
.carnet-borde-animado-overlay .marco-nota::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 2px solid var(--c);
  opacity: 0;
  animation: marcoNotaOnda var(--borde-anim-duracion, 6.6s) linear infinite backwards;
  animation-delay: calc(var(--i) * var(--borde-anim-duracion, 6.6s) / 12)
}
@keyframes marcoNotaPop {
  0% {
    transform: scale(0);
    opacity: 0
  }
  2.5% {
    transform: scale(1.55);
    opacity: 1
  }
  5% {
    transform: scale(1)
  }
  86% {
    transform: scale(1);
    opacity: 1
  }
  92%,
  100% {
    transform: scale(.5);
    opacity: 0
  }
}
@keyframes marcoNotaFantasma {
  0%,
  91% {
    opacity: 0
  }
  96%,
  99.9% {
    opacity: .8
  }
  100% {
    opacity: 0
  }
}
@keyframes marcoNotaOnda {
  0% {
    opacity: .9;
    transform: rotate(45deg) scale(.7)
  }
  10%,
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(2.4)
  }
}
.carnet-perfil-y2k:has(> .borde-anim-charter),
#widget-perfil-jugador:has(.borde-anim-charter),
#widget-perfil-biblioteca:has(.borde-anim-charter) {
  overflow: visible
}
.swatch-borde-carnet-demo.borde-anim-charter {
  position: relative
}
.swatch-borde-carnet-demo.borde-anim-charter::before,
.swatch-borde-carnet-demo.borde-anim-charter::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  box-sizing: border-box;
  border: 1px solid #222222;
  transform: rotate(45deg)
}
.swatch-borde-carnet-demo.borde-anim-charter::before {
  top: -5px;
  background: #00BCD4
}
.swatch-borde-carnet-demo.borde-anim-charter::after {
  bottom: -5px;
  background: #FF4081
}
@media (prefers-reduced-motion: reduce) {
  .carnet-borde-animado-overlay .marco-nota img {
    animation: none;
    opacity: 1
  }
  .carnet-borde-animado-overlay .marco-nota u,
  .carnet-borde-animado-overlay .marco-nota::after {
    display: none
  }
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-pentagrama-rojo,
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-pentagrama-rojo {
  color: #E53935;
  text-shadow: 0 0 4px #FF1744, 0 0 10px rgba(255,23,68,0.7);
  overflow: visible
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-pentagrama-rojo {
  animation: pentagramaRojoIzq 1.9s ease-in-out infinite, pentagramaRojoLatido 1.1s ease-in-out infinite, pentagramaRojoParpadeo 5.3s steps(1) infinite
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-pentagrama-rojo {
  animation: pentagramaRojoDer 1.9s ease-in-out infinite, pentagramaRojoLatido 1.1s ease-in-out infinite 0.25s, pentagramaRojoParpadeo 5.3s steps(1) infinite 0.4s
}
.accesorio-mascota-capa.orejas-pentagrama-rojo::before,
.accesorio-mascota-capa.orejas-pentagrama-rojo::after {
  content: "";
  position: absolute;
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: #FF8A80;
  box-shadow: 0 0 4px 1px #FF1744;
  pointer-events: none;
  opacity: 0
}
.accesorio-mascota-capa.orejas-pentagrama-rojo::before {
  left: 30%;
  bottom: 35%;
  animation: pentagramaRojoBrasa 1.7s ease-out infinite
}
.accesorio-mascota-capa.orejas-pentagrama-rojo::after {
  left: 62%;
  bottom: 40%;
  animation: pentagramaRojoBrasa 2.3s ease-out infinite 0.9s
}
@keyframes pentagramaRojoIzq {
  0%, 100% { transform: rotate(-12deg) scale(1) }
  25% { transform: rotate(-36deg) scale(1.08) }
  60% { transform: rotate(-4deg) scale(0.97) }
  80% { transform: rotate(12deg) scale(1.05) }
}
@keyframes pentagramaRojoDer {
  0%, 100% { transform: scaleX(-1) rotate(-12deg) scale(1) }
  25% { transform: scaleX(-1) rotate(10deg) scale(1.08) }
  60% { transform: scaleX(-1) rotate(-4deg) scale(0.97) }
  80% { transform: scaleX(-1) rotate(-38deg) scale(1.05) }
}
@keyframes pentagramaRojoLatido {
  0%, 100% { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3)) drop-shadow(0 0 2px #FF1744) hue-rotate(0deg) }
  50% { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3)) drop-shadow(0 0 8px #FF1744) hue-rotate(-12deg) brightness(1.25) }
}
@keyframes pentagramaRojoParpadeo {
  0%, 93%, 97%, 100% { opacity: 1 }
  94% { opacity: 0.35 }
  95% { opacity: 1 }
  96% { opacity: 0.55 }
}
@keyframes pentagramaRojoBrasa {
  0% { transform: translateY(0) scale(1); opacity: 0 }
  15% { opacity: 1 }
  100% { transform: translateY(-1.1em) translateX(0.2em) scale(0.2); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .accesorio-mascota-capa.orejas-pentagrama-rojo,
  .accesorio-mascota-capa.orejas-pentagrama-rojo::before,
  .accesorio-mascota-capa.orejas-pentagrama-rojo::after {
    animation: none
  }
}
@keyframes pentagramaArcoirisColor {
  0% { color: #FF1744; text-shadow: 0 0 5px #FF1744, 0 0 12px rgba(255,23,68,0.6) }
  17% { color: #FF9100; text-shadow: 0 0 5px #FF9100, 0 0 12px rgba(255,145,0,0.6) }
  33% { color: #FFEA00; text-shadow: 0 0 5px #FFEA00, 0 0 12px rgba(255,234,0,0.6) }
  50% { color: #00E676; text-shadow: 0 0 5px #00E676, 0 0 12px rgba(0,230,118,0.6) }
  67% { color: #00B0FF; text-shadow: 0 0 5px #00B0FF, 0 0 12px rgba(0,176,255,0.6) }
  83% { color: #D500F9; text-shadow: 0 0 5px #D500F9, 0 0 12px rgba(213,0,249,0.6) }
  100% { color: #FF1744; text-shadow: 0 0 5px #FF1744, 0 0 12px rgba(255,23,68,0.6) }
}
@keyframes pentagramaArcoirisBrillo {
  0%, 100% { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3)) brightness(1) }
  50% { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3)) brightness(1.35) saturate(1.3) }
}
.demo-pentagrama-arcoiris {
  animation: pentagramaArcoirisColor 3.2s linear infinite
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-pentagrama-arcoiris,
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-pentagrama-arcoiris {
  overflow: visible
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-izq.orejas-pentagrama-arcoiris {
  animation: pentagramaRojoIzq 1.9s ease-in-out infinite, pentagramaArcoirisColor 3.2s linear infinite, pentagramaArcoirisBrillo 1.4s ease-in-out infinite
}
.accesorio-mascota-capa.accesorio-orejas-personalizadas-der.orejas-pentagrama-arcoiris {
  animation: pentagramaRojoDer 1.9s ease-in-out infinite, pentagramaArcoirisColor 3.2s linear infinite 0.5s, pentagramaArcoirisBrillo 1.4s ease-in-out infinite 0.3s
}
.accesorio-mascota-capa.orejas-pentagrama-arcoiris::before,
.accesorio-mascota-capa.orejas-pentagrama-arcoiris::after {
  content: "✦";
  position: absolute;
  font-size: 0.4em;
  color: #FFFFFF;
  text-shadow: 0 0 4px #FFFFFF;
  pointer-events: none;
  opacity: 0
}
.accesorio-mascota-capa.orejas-pentagrama-arcoiris::before {
  left: -10%;
  top: 5%;
  animation: pentagramaArcoirisDestello 2s ease-in-out infinite
}
.accesorio-mascota-capa.orejas-pentagrama-arcoiris::after {
  right: -10%;
  bottom: 15%;
  animation: pentagramaArcoirisDestello 2.6s ease-in-out infinite 1s
}
@keyframes pentagramaArcoirisDestello {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg) }
  50% { opacity: 1; transform: scale(1) rotate(90deg) }
}
.marca-variantes-accesorio {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-size: 9px;
  line-height: 1;
  color: #FF4081;
  pointer-events: none
}
@media (prefers-reduced-motion: reduce) {
  .demo-pentagrama-arcoiris,
  .accesorio-mascota-capa.orejas-pentagrama-arcoiris,
  .accesorio-mascota-capa.orejas-pentagrama-arcoiris::before,
  .accesorio-mascota-capa.orejas-pentagrama-arcoiris::after {
    animation: none
  }
}
.biblio-lista-col > * {
  flex-shrink: 0
}
.biblio-lista-col {
  min-height: 0
}
html:is(.ui-escalada, .ui-escalada-movil) :is(#pantalla-bienvenida,
  #menu-principal,
  #modal-lista-canciones,
  #modal-perfiles,
  #panel-patch-notes,
  #modal-estadisticas,
  #modal-historial-partidas,
  #modal-pase,
  #modal-cuenta,
  #modal-tutorial,
  #modal-gpu-software,
  #modal-elegir-editar,
  #modal-reportar-mapa,
  #modal-reportar-bug,
  #modal-preview-accesorio-mascota,
  #modal-cuenta-online,
  #modal-amigos,
  #modal-sala-mp,
  #modal-sala-mp-vs,
  #modal-catalogo-kkr,
  #modal-seleccionar-dificultad,
  #modal-config-opciones) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ui-ancho) !important;
  height: var(--ui-alto) !important;
  max-width: none !important;
  max-height: none !important;
  transform-origin: 0 0 !important;
  scale: var(--k-ui) !important;
  --vw: calc(var(--ui-ancho) / 100);
  --vh: calc(var(--ui-alto) / 100)
}
html.ui-escalada :is(#pantalla-bienvenida,
  #menu-principal,
  #modal-lista-canciones,
  #modal-perfiles,
  #panel-patch-notes,
  #modal-estadisticas,
  #modal-historial-partidas,
  #modal-pase,
  #modal-cuenta,
  #modal-tutorial,
  #modal-gpu-software,
  #modal-elegir-editar,
  #modal-reportar-mapa,
  #modal-reportar-bug,
  #modal-preview-accesorio-mascota,
  #modal-cuenta-online,
  #modal-amigos,
  #modal-sala-mp,
  #modal-sala-mp-vs,
  #modal-catalogo-kkr,
  #modal-seleccionar-dificultad,
  #modal-config-opciones) :is(.contenedor-botones-menu, #panel-menu-perfil, #pila-patch-notes-menu, #pila-reproductor-menu, .tarjeta-modal) {
  scale: 1 !important
}
.input-numero-pixel-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle
}
.input-numero-pixel-wrap.activo > input.input-numero-pixel {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: #222222
}
.numero-pixel-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
  display: none;
  white-space: nowrap;
  max-width: calc(100% - 26px);
  overflow: hidden
}
.input-numero-pixel-wrap.activo > .numero-pixel-overlay {
  display: block
}
.numero-pixel-overlay canvas.px-dom {
  display: inline-block
}
:root {
  --factor-extra-editor: 1.12
}
#texto-tiempo,
#texto-tiempo-total,
#texto-zoom-tl,
#texto-intensidad-visual-val,
#texto-wobble-visual-val,
#texto-spin-visual-val,
#texto-tinte-visual-val {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  vertical-align: middle
}
#texto-zoom-tl {
  justify-content: center
}
#texto-tiempo canvas.px-dom,
#texto-tiempo-total canvas.px-dom,
#texto-zoom-tl canvas.px-dom,
#texto-intensidad-visual-val canvas.px-dom,
#texto-wobble-visual-val canvas.px-dom,
#texto-spin-visual-val canvas.px-dom,
#texto-tinte-visual-val canvas.px-dom {
  display: block
}
html.ui-escalada-movil .tarjeta-pausa {
  scale: calc(max(var(--escala-ui-juego, 1), 0.85) * var(--factor-ui-movil, 1))
}
html.ui-escalada-movil #modal-lista-canciones {
  width: var(--ui-ancho-biblio, var(--ui-ancho)) !important;
  height: var(--ui-alto-biblio, var(--ui-alto)) !important;
  scale: var(--k-ui-biblio, var(--k-ui)) !important;
  --vw: calc(var(--ui-ancho-biblio, var(--ui-ancho)) / 100);
  --vh: calc(var(--ui-alto-biblio, var(--ui-alto)) / 100)
}
@media (max-height: 520px) {
  #pantalla-bienvenida {
    --lado-logo-kkr: clamp(140px, calc(min(calc(100 * var(--vw, 1vw) - 2 * (var(--gato-gigante-lado) + 24px)), calc(100 * var(--vh, 1vh) - 104px)) * 0.68), 540px)
  }
  #bienvenida-tarjeta {
    gap: 6px
  }
  .cmd-bienvenida-continuar {
    min-width: 0 !important
  }
  .cmd-bienvenida-continuar .cmd-titulo-kawaii {
    font-size: 10px;
    padding: 2px 8px
  }
  .cmd-bienvenida-continuar .cmd-cuerpo-kawaii {
    font-size: 10px;
    padding: 3px 10px
  }
  .cmd-bienvenida-titulo .cmd-cuerpo-kawaii {
    padding: 6px 10px
  }
}
@media (max-width: 640px) and (max-height: 520px) {
  #pantalla-bienvenida {
    --lado-logo-kkr: clamp(140px, calc(min(calc(91 * var(--vw, 1vw)), calc(100 * var(--vh, 1vh) - 104px)) * 0.68), 540px)
  }
}
#contenedor-juego,
#contenedor-juego *,
#capa-botones-tactiles,
#capa-botones-tactiles * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent
}
#barra-tactil-editor {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  z-index: 50;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  overflow-x: auto;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none
}
#barra-tactil-editor button {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  border: 2px solid #222222;
  background: #FFFFFF;
  color: #222222;
  cursor: pointer;
  touch-action: manipulation
}
#barra-tactil-editor button.activa {
  background: #FFD54F;
  box-shadow: inset 0 0 0 2px #D81B60
}
#barra-tactil-editor .ct-sep {
  flex: 0 0 auto;
  width: 2px;
  height: 30px;
  background: #222222
}
#barra-tactil-editor.colapsada {
  padding: 4px
}
#capa-colocar-tactil {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 45
}
#capa-colocar-tactil .ct-linea {
  position: absolute;
  width: 2px;
  background: #00E5FF;
  opacity: .9
}
#capa-colocar-tactil .ct-marca {
  position: absolute;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  box-sizing: border-box;
  border: 3px solid #00E5FF;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.25)
}
#capa-colocar-tactil .ct-barra {
  position: absolute;
  height: 30px;
  margin-top: -15px;
  box-sizing: border-box;
  border: 2px solid #222222;
  border-radius: 15px;
  opacity: .85
}
#capa-colocar-tactil .ct-etiqueta {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 2px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #222222;
  background: #FFFFFF;
  border: 2px solid #222222;
  white-space: nowrap
}
#fondo-menu-nota-tactil {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  touch-action: none;
  background: rgba(0, 0, 0, 0.18)
}
#menu-nota-tactil {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  max-height: calc(100% - 12px);
  overflow-y: auto;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  box-shadow: 3px 3px 0px #222222;
  user-select: none;
  -webkit-user-select: none
}
#menu-nota-tactil button {
  height: 46px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  border: 2px solid #222222;
  background: #FFFFFF;
  color: #222222;
  cursor: pointer;
  touch-action: manipulation
}
#menu-nota-tactil button.mn-peligro {
  background: #FF8A80
}
#capa-asa-tactil {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 44
}
#capa-asa-tactil .at-asa {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  box-sizing: border-box;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: #D81B60;
  box-shadow: 0 0 0 2px #222222
}
#capa-asa-tactil .at-duracion {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 2px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #222222;
  background: #FFFFFF;
  border: 2px solid #222222;
  white-space: nowrap
}
.ct-scrub-badge {
  display: none;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 46;
  padding: 4px 14px;
  font-size: 16px;
  font-weight: bold;
  color: #222222;
  background: #FFFFFF;
  border: 2px solid #222222;
  box-shadow: 2px 2px 0px #222222;
  pointer-events: none;
  white-space: nowrap
}
#barra-tactil-editor button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 54px;
  height: 62px;
  padding: 4px 6px
}
#barra-tactil-editor button .ct-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 34px;
  font-size: 22px;
  line-height: 1;
  pointer-events: none
}
#barra-tactil-editor button .ct-ico img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 64px;
  pointer-events: none;
  -webkit-user-drag: none
}
#barra-tactil-editor button .ct-ico svg {
  display: block;
  width: 26px;
  height: 26px;
  pointer-events: none
}
#barra-tactil-editor button .ct-cap {
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  pointer-events: none
}
#barra-tactil-editor button .ct-cap:empty {
  display: none
}
#barra-tactil-editor button:has(.ct-cap:empty) {
  height: 62px
}
#panel-ajuste-nota {
  display: none !important
}
#panel-ajuste-nota-abajo {
  top: calc(74px * var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)))) !important;
  padding: 8px 12px;
  gap: 8px 12px;
  font-size: 15px
}
#panel-ajuste-nota-abajo input,
#panel-ajuste-nota-abajo select {
  height: 40px;
  box-sizing: border-box;
  font-size: 15px;
  padding: 0 8px
}
#panel-ajuste-nota-abajo input[type="number"] {
  width: 78px !important
}
#panel-ajuste-nota-abajo #input-bpm,
#panel-ajuste-nota-abajo #input-beat-offset {
  width: 92px !important
}
#panel-ajuste-nota-abajo select {
  min-width: 96px
}
#panel-ajuste-nota-abajo button {
  min-height: 40px;
  padding: 6px 14px !important;
  font-size: 14px !important
}
@media (pointer: coarse) {
  #menu-contextual-nota {
    box-sizing: border-box;
    width: 480px;
    min-width: 0;
    max-width: calc(100vw - 12px);
    column-count: 2;
    column-gap: 6px;
    padding: 6px
  }
  #menu-contextual-nota .titulo-menu-ctx {
    column-span: all;
    font-size: 12px
  }
  #menu-contextual-nota .item-menu-ctx {
    break-inside: avoid;
    padding: 11px 12px;
    font-size: 15px
  }
}
#barra-tactil-editor {
  gap: 10px;
  padding: 8px 10px;
  scrollbar-width: none
}
#barra-tactil-editor::-webkit-scrollbar {
  display: none
}
#barra-tactil-editor .ct-grupo {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid #222222
}
#barra-tactil-editor .ct-grupo button {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  min-width: 56px;
  height: 64px;
  padding: 4px 2px;
  background: transparent;
  border: 2px solid transparent;
  box-shadow: none;
  color: #222222;
  transition: background 0.12s, transform 0.08s
}
#barra-tactil-editor .ct-grupo button:hover {
  background: rgba(255, 255, 255, 0.9)
}
#barra-tactil-editor .ct-grupo button:active {
  transform: scale(0.95)
}
#barra-tactil-editor .ct-grupo button.activa {
  background: #FFF59D;
  border-color: #D81B60;
  box-shadow: none
}
#barra-tactil-editor .ct-grupo.ct-grupo-trans button,
#barra-tactil-editor .ct-grupo.ct-grupo-fin button {
  width: 48px;
  min-width: 48px
}
#barra-tactil-editor .ct-grupo button .ct-ico {
  width: 40px;
  min-width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center
}
#barra-tactil-editor .ct-grupo button .ct-ico img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}
#barra-tactil-editor .ct-grupo button .ct-ico svg {
  width: 28px;
  height: 28px
}
#barra-tactil-editor .ct-grupo button .ct-cap {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: bold;
  line-height: 1
}
#barra-tactil-editor.colapsada {
  padding: 4px
}
#capa-asa-tactil .at-cantidad {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 2px 9px;
  font-size: 13px;
  font-weight: bold;
  color: #222222;
  background: #FFF59D;
  border: 2px solid #222222;
  white-space: nowrap
}
#barra-tactil-editor {
  color: #222222
}
#barra-tactil-editor .ct-grupo button {
  position: relative;
  width: auto;
  min-width: 60px;
  padding: 4px 6px
}
#barra-tactil-editor .ct-grupo.ct-grupo-trans button,
#barra-tactil-editor .ct-grupo.ct-grupo-fin button {
  width: 48px;
  min-width: 48px;
  padding: 4px 2px
}
#barra-tactil-editor .ct-grupo button .ct-cap {
  font-size: 18px;
  line-height: 0;
  color: inherit
}
#barra-tactil-editor button[data-lane]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent
}
#barra-tactil-editor button[data-lane="abajo"]::after {
  border-top: 7px solid #D81B60
}
#barra-tactil-editor button[data-lane="arriba"]::after {
  border-bottom: 7px solid #D81B60
}
body.modo-oscuro #barra-tactil-editor {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 3px 3px 0px #332B3D;
  color: #FFF6FB
}
body.modo-oscuro #barra-tactil-editor .ct-grupo {
  background: rgba(0, 0, 0, 0.22);
  border-color: #332B3D
}
body.modo-oscuro #barra-tactil-editor .ct-grupo button {
  color: #FFF6FB
}
body.modo-oscuro #barra-tactil-editor .ct-grupo button:hover {
  background: rgba(255, 255, 255, 0.14)
}
body.modo-oscuro #barra-tactil-editor .ct-grupo button.activa {
  background: rgba(255, 214, 232, 0.28);
  border-color: #FF9EC4
}
body.modo-oscuro #barra-tactil-editor button[data-lane="abajo"]::after {
  border-top-color: #FF9EC4
}
body.modo-oscuro #barra-tactil-editor button[data-lane="arriba"]::after {
  border-bottom-color: #FF9EC4
}
body.modo-oscuro .ct-scrub-badge,
body.modo-oscuro #capa-asa-tactil .at-duracion,
body.modo-oscuro #capa-colocar-tactil .ct-etiqueta {
  background: #4A3B5C;
  color: #FFF6FB;
  border-color: #332B3D
}
body.modo-oscuro #capa-asa-tactil .at-cantidad {
  background: #6B4E7A;
  color: #FFF6FB;
  border-color: #332B3D
}
#panel-ajuste-nota-abajo .grupo-ajustes-editor {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid #222222
}
body.modo-oscuro #panel-ajuste-nota-abajo .grupo-ajustes-editor {
  background: rgba(0, 0, 0, 0.22);
  border-color: #332B3D
}
#panel-ajuste-nota-abajo #controles-bpm-activos {
  align-items: stretch
}
#barra-tactil-editor {
  left: 8px;
  right: 8px;
  transform: none;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 16px);
  align-items: stretch
}
#barra-tactil-editor .ct-grupo {
  align-items: center;
  justify-content: center
}
#barra-tactil-editor .ct-grupo button {
  height: 62px;
  padding: 3px 6px;
  gap: 2px
}
#barra-tactil-editor .ct-grupo button .ct-ico {
  flex: none;
  height: 34px
}
#barra-tactil-editor .ct-grupo button .ct-cap {
  flex: none
}
#barra-tactil-editor .ct-grupo.ct-grupo-trans button,
#barra-tactil-editor .ct-grupo.ct-grupo-fin button {
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0
}
#panel-ajuste-nota-abajo {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  width: auto !important;
  max-width: calc((100% - 30px) / var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))))
}
#panel-ajuste-nota-abajo .fila-ajustes-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  max-width: 100%
}
#panel-ajuste-nota-abajo .fila-ajustes-extra {
  display: none
}
#panel-ajuste-nota-abajo.expandido .fila-ajustes-extra {
  display: flex
}
#panel-ajuste-nota-abajo #btn-mas-ajustes {
  align-self: stretch
}
#panel-ajuste-nota-abajo #btn-mas-ajustes.activa {
  box-shadow: inset 0 0 0 3px #222222
}
body.modo-oscuro #panel-ajuste-nota-abajo #btn-mas-ajustes.activa {
  box-shadow: inset 0 0 0 3px #FFF6FB
}
@media (max-width: 800px) {
  #panel-ajuste-nota-abajo .fila-ajustes-editor {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    touch-action: pan-x
  }
  #panel-ajuste-nota-abajo .fila-ajustes-editor > * {
    flex: 0 0 auto
  }
}
#menu-contextual-nota {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222222;
  border-radius: 0;
  box-shadow: 3px 3px 0px #222222;
  padding: 4px;
  color: #222222
}
#menu-contextual-nota .titulo-menu-ctx {
  font-size: 13px;
  color: #AD1457;
  padding: 4px 10px 6px
}
#menu-contextual-nota .item-menu-ctx {
  border: 2px solid transparent;
  border-radius: 0;
  padding: 6px 10px;
  font-size: 18px;
  font-weight: normal;
  color: #222222
}
#menu-contextual-nota .item-menu-ctx:hover {
  background: rgba(255, 255, 255, 0.75)
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-activo {
  background: #FFF59D;
  border-color: #D81B60;
  font-weight: normal
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-peligro {
  color: #C62828
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-peligro:hover {
  background: #FFCDD2
}
#menu-contextual-nota .item-menu-ctx.item-menu-ctx-deshabilitado {
  color: #7A8A96;
  opacity: 0.6
}
#menu-contextual-nota .separador-menu-ctx {
  height: 2px;
  background: #222222;
  margin: 4px 2px
}
body.modo-oscuro #menu-contextual-nota {
  background: linear-gradient(160deg, #4A3B5C 0%, #6B4E7A 45%, #8C6690 100%);
  border-color: #332B3D;
  box-shadow: 3px 3px 0px #332B3D;
  color: #FFF6FB
}
body.modo-oscuro #menu-contextual-nota .titulo-menu-ctx {
  color: #FF9EC4
}
body.modo-oscuro #menu-contextual-nota .item-menu-ctx {
  color: #FFF6FB
}
body.modo-oscuro #menu-contextual-nota .item-menu-ctx:hover {
  background: rgba(255, 255, 255, 0.14)
}
body.modo-oscuro #menu-contextual-nota .item-menu-ctx.item-menu-ctx-activo {
  background: rgba(255, 214, 232, 0.28);
  border-color: #FF9EC4
}
body.modo-oscuro #menu-contextual-nota .item-menu-ctx.item-menu-ctx-peligro {
  color: #FF8A80
}
body.modo-oscuro #menu-contextual-nota .item-menu-ctx.item-menu-ctx-peligro:hover {
  background: rgba(255, 138, 128, 0.22)
}
body.modo-oscuro #menu-contextual-nota .item-menu-ctx.item-menu-ctx-deshabilitado {
  color: rgba(255, 246, 251, 0.4);
  opacity: 1
}
body.modo-oscuro #menu-contextual-nota .separador-menu-ctx {
  background: #332B3D
}
@media (pointer: coarse) {
  #menu-contextual-nota .item-menu-ctx {
    padding: 10px 12px
  }
}
#panel-ajuste-nota-abajo input[type="number"] {
  height: 44px;
  font-size: 20px
}
#panel-ajuste-nota-abajo #input-scroll-speed {
  width: 96px !important
}
#panel-ajuste-nota-abajo #input-compas {
  width: 84px !important
}
#panel-ajuste-nota-abajo #input-bpm,
#panel-ajuste-nota-abajo #input-beat-offset {
  width: 124px !important
}
#panel-ajuste-nota-abajo .select-px-btn {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 12px
}
#panel-ajuste-nota-abajo button {
  min-height: 44px
}
#panel-ajuste-nota-abajo {
  width: max-content !important
}
#panel-ajuste-nota-abajo #fila-ajustes-principal {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin
}
#panel-ajuste-nota-abajo #fila-ajustes-principal > * {
  flex: 0 0 auto
}
#panel-ajuste-nota-abajo .select-px-btn {
  min-width: 104px;
  justify-content: space-between
}
#panel-ajuste-nota-abajo {
  padding-right: 20px
}
#panel-ajuste-nota-abajo .fila-ajustes-editor {
  scrollbar-width: none
}
#panel-ajuste-nota-abajo .fila-ajustes-editor::-webkit-scrollbar {
  display: none
}
#panel-ajuste-nota-abajo #fila-ajustes-principal {
  overflow-x: visible
}
@media (max-width: 800px) {
  #panel-ajuste-nota-abajo #fila-ajustes-principal {
    overflow-x: auto
  }
}
#panel-flotante-centro {
  display: none !important
}
#panel-ajuste-nota-abajo #grupo-dificultad-editor,
#panel-ajuste-nota-abajo #grupo-genero-editor {
  flex-wrap: wrap
}
#panel-ajuste-nota-abajo #select-dificultad-edit,
#panel-ajuste-nota-abajo #select-rombos-dificultad,
#panel-ajuste-nota-abajo #select-genero-cancion {
  height: 44px;
  font-size: 18px;
  min-width: 120px
}
#panel-ajuste-nota-abajo #btn-add-dificultad,
#panel-ajuste-nota-abajo #btn-rename-dificultad,
#panel-ajuste-nota-abajo #btn-del-dificultad {
  min-width: 44px;
  padding: 6px 10px !important;
  font-size: 18px !important
}
#panel-controles-editor .panel-controles-titulo {
  font-size: 15px
}
#panel-controles-editor #panel-controles-header button {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 14px
}
#panel-controles-editor #panel-controles-header #btn-play-pausa-editor {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  padding: 6px 0
}
#panel-controles-editor #panel-controles-header #btn-toggle-modo-visual {
  font-size: 15px
}
#panel-controles-editor #panel-controles-header #btn-toggle-panel-controles {
  min-width: 56px
}
#panel-controles-editor .fila-controles-una-linea > button,
#panel-controles-editor .fila-controles-una-linea > .grupo-opciones-borde > button,
#panel-controles-editor .fila-controles-una-linea > .contenedor-url-audio > button,
#panel-controles-editor .fila-controles-una-linea > .dropdown-dock > button {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 14px
}
#panel-controles-editor .fila-controles-una-linea > input[type="text"],
#panel-controles-editor .fila-controles-una-linea > .contenedor-url-audio > input[type="text"] {
  height: 44px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: bold;
  padding: 6px 12px
}
#panel-controles-editor .fila-controles-una-linea > #nombre-archivo {
  width: 200px
}
#panel-controles-editor .fila-controles-una-linea > #autor-cancion {
  width: 170px !important
}
#panel-controles-editor .fila-controles-una-linea > .contenedor-url-audio {
  flex: 0 0 auto
}
#panel-controles-editor .fila-controles-una-linea > .contenedor-url-audio > #url-musica {
  flex: 0 0 auto;
  width: 300px
}
#panel-controles-editor .fila-controles-una-linea > .grupo-opciones-borde > label {
  font-size: 14px !important
}
#panel-controles-editor .panel-letras span:not(.lista-letras span),
#panel-controles-editor .panel-letras label:not(.lista-letras label) {
  font-size: 14px !important
}
#panel-controles-editor .panel-letras input[type="text"],
#panel-controles-editor .panel-letras input[type="number"],
#panel-controles-editor .panel-letras select,
#panel-controles-editor .panel-letras textarea {
  font-size: 15px !important;
  min-height: 42px;
  padding: 6px 10px;
  box-sizing: border-box
}
#panel-controles-editor .panel-letras textarea {
  height: auto !important;
  min-height: 64px
}
#panel-controles-editor .panel-letras input[type="number"] {
  width: 72px !important
}
#panel-controles-editor .panel-letras input[type="color"] {
  width: 48px !important;
  height: 36px !important
}
#panel-controles-editor .panel-letras button:not(.lista-letras button) {
  min-height: 42px;
  padding: 6px 14px;
  font-size: 14px !important
}
.tab-instalar-app {
  transform-origin: right top;
  scale: var(--escala-ui-juego, 1);
  font-size: 18px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #FF80AB, #CE93D8 60%, #7C4DFF);
  color: #fff;
  border: 3px solid #222222;
  text-shadow: 2px 2px 0 #222222;
  box-shadow: 4px 4px 0 #222222;
  animation: pulsoInstalarApp 1.4s ease-out infinite
}
.tab-instalar-app:hover {
  background: linear-gradient(135deg, #FF9EBB, #DDA6E8 60%, #9575FF)
}
.tab-instalar-app .px-emoji {
  display: inline-block;
  animation: botaInstalarApp .7s ease-in-out infinite alternate
}
@keyframes pulsoInstalarApp {
  0% {
    box-shadow: 4px 4px 0 #222222, 0 0 0 0 rgba(255, 128, 171, 0.8)
  }
  70%,
  100% {
    box-shadow: 4px 4px 0 #222222, 0 0 0 16px rgba(255, 128, 171, 0)
  }
}
@keyframes botaInstalarApp {
  to {
    transform: translateY(4px)
  }
}
#panel-controles-editor #indicador-cambios-sin-subir .px-parrafo-cont {
  align-items: center;
  justify-content: center
}
#panel-controles-editor #indicador-cambios-sin-subir {
  justify-content: center;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 14px;
  gap: 6px;
  margin-left: 0;
  box-sizing: border-box
}
#btn-modo-ritmo {
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer
}
#modal-bpm .tarjeta-modal {
  scale: var(--escala-modal-bpm, max(var(--escala-ui-juego, 1), 0.62)) !important;
  transform-origin: center center
}
#panel-ajuste-nota-abajo {
  scale: calc(var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))) * var(--fit-barra-editor, 1)) !important;
  max-width: calc((100% - 30px) / (var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1))) * var(--fit-barra-editor, 1))) !important
}
#modal-url-audio .tarjeta-modal {
  scale: var(--escala-modal-url, 1) !important;
  transform-origin: center center
}
#modal-bpm .btn-menu-grande,
#modal-url-audio .btn-menu-grande,
#modal-catalogo-kkr .btn-menu-grande {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-width: 2px !important;
  box-shadow: 2px 2px 0px #222222 !important;
  min-height: 40px;
  box-sizing: border-box;
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap
}
#modal-bpm .btn-menu-grande:hover,
#modal-url-audio .btn-menu-grande:hover,
#modal-catalogo-kkr .btn-menu-grande:hover {
  box-shadow: 3px 3px 0px #222222 !important
}
#modal-bpm .btn-menu-grande:active,
#modal-url-audio .btn-menu-grande:active,
#modal-catalogo-kkr .btn-menu-grande:active {
  box-shadow: 1px 1px 0px #222222 !important
}
#btn-detectar-bpm {
  --fa-c: #00838F;
  --plano-a: #E0F7FA;
  --plano-b: #80DEEA
}
#btn-confirmar-bpm,
#btn-confirmar-url-audio {
  --fa-c: #006064;
  --plano-a: #E0F7FA;
  --plano-b: #80DEEA
}
#btn-cancelar-bpm,
#btn-cerrar-url-audio {
  --fa-c: #C62828;
  --plano-a: #FFCDD2;
  --plano-b: #FF8A80
}
#texto-estado-detectar-bpm:empty {
  display: none
}
#btn-catalogo-usar {
  --fa-c: #006064;
  --plano-a: #E0F7FA;
  --plano-b: #80DEEA
}
#btn-catalogo-cancelar {
  --fa-c: #C62828;
  --plano-a: #FFCDD2;
  --plano-b: #FF8A80
}
#btn-catalogo-kkr-nuevo {
  --fa-c: #8A5A00;
  --plano-a: #FFF8E1;
  --plano-b: #FFD54F
}
#btn-abrir-filegarden {
  --fa-c: #7B1FA2;
  --plano-a: #F3E5F5;
  --plano-b: #CE93D8
}
#modal-url-audio .btn-menu-grande#btn-abrir-filegarden {
  --cubo-1: #FBEEFD;
  --cubo-2: #B889DB
}
#btn-detectar-bpm {
  --cubo-1: #E1F8FC;
  --cubo-2: #5FD3E2;
  isolation: isolate;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important
}
#btn-detectar-bpm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2, #999) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: rejillaBotonMenu 6s linear infinite
}
#btn-detectar-bpm:hover::before,
#btn-detectar-bpm.foco-teclado::before {
  opacity: 0
}
#btn-detectar-bpm:hover .cubos-hover-btn > span[data-extra],
#btn-detectar-bpm.foco-teclado .cubos-hover-btn > span[data-extra] {
  opacity: var(--opa, 0.6)
}
@media (prefers-reduced-motion: reduce) {
  #btn-detectar-bpm::before {
    animation: none
  }
}
#btn-abrir-filegarden {
  --cubo-1: #FBEEFD;
  --cubo-2: #B889DB;
  isolation: isolate;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important
}
#btn-abrir-filegarden::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2, #999) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: rejillaBotonMenu 6s linear infinite
}
#btn-abrir-filegarden:hover::before,
#btn-abrir-filegarden.foco-teclado::before {
  opacity: 0
}
#btn-abrir-filegarden:hover .cubos-hover-btn > span[data-extra],
#btn-abrir-filegarden.foco-teclado .cubos-hover-btn > span[data-extra] {
  opacity: var(--opa, 0.6)
}
@media (prefers-reduced-motion: reduce) {
  #btn-abrir-filegarden::before {
    animation: none
  }
}
@media (pointer: coarse) {
  #widget-perfil-jugador {
    zoom: 1.25;
  }
  #widget-perfil-jugador .cmd-cuerpo-widget {
    gap: 8px;
  }
  #widget-perfil-jugador button {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}
@media (pointer: coarse) {
  #panel-menu-perfil {
    max-width: calc((100 * var(--vw, 1vw) - 40px) / max(var(--escala-ui-juego, 1), 0.62));
  }
  #fila-carnet-mascota-menu {
    flex-wrap: nowrap;
  }
  #carnet-perfil-menu.carnet-perfil-menu-expandido,
  #mascota-widget-menu.mascota-widget-menu-expandido {
    flex: 0 1 460px;
    min-width: 0;
  }
}
@media (pointer: coarse) {
  .decoracion-flotante-izquierda {
    display: none !important;
  }
}
.res-puesto-global{width:100%;box-sizing:border-box;background:#FFF59D;border:2px solid #222;box-shadow:2px 2px 0px #222;padding:8px;text-align:center;font-size:14px;font-weight:bold;opacity:.85}
.res-puesto-global.res-puesto-listo{opacity:1;animation:resPuestoPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes resPuestoPop{0%{transform:scale(.6)}100%{transform:scale(1)}}
#modal-catalogo-kkr {
  z-index: 9900 !important
}
#modal-catalogo-kkr .grid-catalogo-kore {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 10px
}
#modal-catalogo-kkr .grid-catalogo-kore > span[data-i18n],
#modal-catalogo-kkr .grid-catalogo-kore > span[data-px-clave] {
  justify-self: end;
  text-align: right
}
#modal-catalogo-kkr .grid-catalogo-kore .select-px {
  display: block;
  width: 100%;
  min-width: 0
}
#modal-catalogo-kkr .grid-catalogo-kore .select-px-btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between
}
#modal-catalogo-kkr .grid-catalogo-kore .select-px-texto {
  min-width: 0;
  overflow: hidden
}
#btn-catalogo-usar { --cubo-1: #E1F8FC; --cubo-2: #5FD3E2 }
#btn-catalogo-cancelar { --cubo-1: #FFE3E0; --cubo-2: #FF7B72 }
#btn-catalogo-kkr-nuevo { --cubo-1: #FFF6D6; --cubo-2: #F2C230 }
#btn-catalogo-usar,
#btn-catalogo-cancelar,
#btn-catalogo-kkr-nuevo {
  isolation: isolate;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important
}
#btn-catalogo-usar::before,
#btn-catalogo-cancelar::before,
#btn-catalogo-kkr-nuevo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rejilla-linea: color-mix(in srgb, var(--cubo-2, #999) 45%, transparent);
  background-image: linear-gradient(to right, var(--rejilla-linea) 1px, transparent 1px),linear-gradient(to bottom, var(--rejilla-linea) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: rejillaBotonMenu 6s linear infinite
}
#btn-catalogo-usar:hover::before,
#btn-catalogo-cancelar:hover::before,
#btn-catalogo-kkr-nuevo:hover::before,
#btn-catalogo-usar.foco-teclado::before,
#btn-catalogo-cancelar.foco-teclado::before,
#btn-catalogo-kkr-nuevo.foco-teclado::before {
  opacity: 0
}
#btn-catalogo-usar:hover .cubos-hover-btn > span[data-extra],
#btn-catalogo-cancelar:hover .cubos-hover-btn > span[data-extra],
#btn-catalogo-kkr-nuevo:hover .cubos-hover-btn > span[data-extra],
#btn-catalogo-usar.foco-teclado .cubos-hover-btn > span[data-extra],
#btn-catalogo-cancelar.foco-teclado .cubos-hover-btn > span[data-extra],
#btn-catalogo-kkr-nuevo.foco-teclado .cubos-hover-btn > span[data-extra] {
  opacity: var(--opa, 0.6)
}
@media (prefers-reduced-motion: reduce) {
#btn-catalogo-usar::before,
#btn-catalogo-cancelar::before,
#btn-catalogo-kkr-nuevo::before {
    animation: none
  }
}
#modal-catalogo-kkr .tarjeta-modal {
  width: 640px;
  max-width: 92%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column
}
#modal-catalogo-kkr .grid-catalogo-kore > span[data-i18n],
#modal-catalogo-kkr .grid-catalogo-kore > span[data-px-clave] {
  font-size: 14px
}
#modal-catalogo-kkr .catalogo-abajo {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 10px
}
#modal-catalogo-kkr .catalogo-portada-caja {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center
}
#modal-catalogo-kkr .catalogo-botones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 160px
}
#modal-catalogo-kkr #img-catalogo-portada {
  width: 170px;
  height: 170px;
  max-width: 100%;
  object-fit: cover;
  border: 2px solid #222;
  box-sizing: border-box
}
#modal-url-audio #modal-catalogo-kkr.catalogo-sobre-nuevo,
html.ui-escalada #modal-url-audio #modal-catalogo-kkr.catalogo-sobre-nuevo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  scale: 1 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  z-index: 20 !important
}
#modal-url-audio #modal-catalogo-kkr.catalogo-sobre-nuevo .tarjeta-modal,
html.ui-escalada #modal-url-audio #modal-catalogo-kkr.catalogo-sobre-nuevo .tarjeta-modal {
  scale: var(--escala-modal-url, 1) !important;
  transform-origin: center center;
  height: var(--alto-card-nuevo, auto);
  max-height: none;
  overflow: hidden
}
#panel-ajuste-nota-abajo #grupo-dificultad-editor .select-px-btn,
#panel-ajuste-nota-abajo #grupo-genero-editor .select-px-btn {
  min-width: 120px;
  gap: 12px
}
#panel-ajuste-nota-abajo #grupo-dificultad-editor .select-px-texto,
#panel-ajuste-nota-abajo #grupo-genero-editor .select-px-texto {
  min-width: 0
}
#panel-ajuste-nota-abajo #grupo-dificultad-editor .select-px-flecha,
#panel-ajuste-nota-abajo #grupo-genero-editor .select-px-flecha {
  flex: 0 0 auto
}
@media (pointer: coarse) and (max-height: 700px) {
  #modal-url-audio .tarjeta-modal > .encabezado-ventana-y2k,
  #modal-catalogo-kkr .tarjeta-modal > .encabezado-ventana-y2k {
    display: none !important
  }
  #modal-catalogo-kkr #img-catalogo-portada {
    width: 120px;
    height: 120px
  }
  #modal-catalogo-kkr .catalogo-abajo {
    gap: 16px;
    margin-top: 6px
  }
}
#aviso-girar-telefono {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #0D0D0D;
  overflow: hidden;
}
#aviso-fondo-errores { position: absolute; inset: 0; overflow: hidden; }
#aviso-fondo-errores.parpadea .ventana-derrota-cmd { animation: parpadeoDerrotaCmd 1.6s ease-in-out infinite; }
#aviso-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(13,0,0,.82) 0, rgba(13,0,0,.55) 100%); }
#aviso-contenido { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
#aviso-girar-telefono .aviso-gato .bienvenida-gato-gigante-cara { width: 130px; font-size: 26px; }
#aviso-girar-telefono .aviso-gato .bienvenida-gato-gigante-girasol { font-size: 34px; }
#aviso-tarjeta { background: #0D0D0D; border: 3px solid #FF4081; box-shadow: 4px 4px 0 #FF4081; padding: 14px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 340px; box-sizing: border-box; }
#aviso-tarjeta > div { display: block; line-height: 0; }
.aviso-fila-giro { height: 150px; display: flex; align-items: center; justify-content: center; }
.aviso-giro-continuo { display: inline-block; animation: girarAvisoSinFin 2.2s linear infinite; }
.aviso-giro-continuo .aviso-gato { animation: none; }
@keyframes girarAvisoSinFin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (orientation: portrait) and (pointer: coarse) {
  body:not(.permitir-vertical) #aviso-girar-telefono { display: flex; }
}
#panel-controles-editor.colapsado {
  padding-top: 4px;
  padding-bottom: 4px;
}
#panel-controles-editor .panel-controles-titulo {
  font-size: 17px;
  line-height: 1;
}
#panel-controles-editor #panel-controles-header button {
  min-height: 32px;
  padding: 2px 10px;
  font-size: 12px;
}
#panel-controles-editor #panel-controles-header #btn-play-pausa-editor {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 2px 0;
}
#panel-controles-editor #panel-controles-header #btn-toggle-modo-visual {
  min-width: 44px;
  font-size: 13px;
}
#panel-controles-editor #panel-controles-header #btn-toggle-panel-controles {
  min-width: 44px;
}
#panel-ajuste-nota-abajo {
  top: calc(54px * var(--escala-editor, calc(var(--escala-ui-juego, 1) * var(--factor-extra-editor, 1)))) !important;
}
:is(#modal-config-opciones,
#modal-perfiles,
#panel-patch-notes,
#modal-estadisticas,
#modal-historial-partidas,
#modal-pase,
#modal-cuenta,
#modal-tutorial,
#modal-elegir-editar,
#modal-seleccionar-dificultad,
#modal-cuenta-online,
#modal-reportar-mapa,
#modal-reportar-bug,
#modal-amigos,
#modal-sala-mp,
#modal-catalogo-kkr) { touch-action: none; }
:is(#modal-config-opciones,
#modal-perfiles,
#panel-patch-notes,
#modal-estadisticas,
#modal-historial-partidas,
#modal-pase,
#modal-cuenta,
#modal-tutorial,
#modal-elegir-editar,
#modal-seleccionar-dificultad,
#modal-cuenta-online,
#modal-reportar-mapa,
#modal-reportar-bug,
#modal-amigos,
#modal-sala-mp,
#modal-catalogo-kkr) :is(.tarjeta-modal, .tarjeta-config-amplia) { touch-action: pan-x pan-y; }
.fila-elegir-editar-nombre .px-parrafo-cont,
.fila-elegir-editar-meta .px-parrafo-cont {
  flex-wrap: nowrap;
  overflow: hidden
}
.fila-elegir-editar-nombre.px-inline,
.fila-elegir-editar-meta.px-inline {
  min-width: 0
}
#modal-elegir-editar .tarjeta-modal { padding-bottom: 6px !important; }
#modal-elegir-editar .tarjeta-modal > div:nth-child(3) { padding-bottom: 8px !important; }
#modal-elegir-editar .tarjeta-modal > div:nth-child(4) { padding: 4px 16px 6px !important; }
#panel-visuales .select-px { flex: 1; min-width: 120px; }
#panel-visuales .select-px-btn { width: 100%; box-sizing: border-box; }
#barra-tactil-editor .ct-grupo button {
  position: relative
}
#barra-tactil-editor .ct-atajo {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 9px;
  line-height: 1;
  font-weight: bold;
  color: #222222;
  opacity: 0.55;
  pointer-events: none
}
#barra-tactil-editor .ct-grupo button.activa .ct-atajo {
  opacity: 1
}
#barra-chart-jam-online {
  flex-shrink: 0;
  margin: 0 0 6px;
  padding: 6px 10px;
  background: #FFF3D0;
  border: 2px solid #222;
  box-shadow: 3px 3px 0px #222;
  font-size: 11px;
  font-weight: bold;
  color: #222;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-filtro-chart-jam.activa {
  background: #FF80AB
}
.btn-votar-jam {
  background: #FFF59D;
  border: 2px solid #222;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Pixelify Sans',sans-serif
}
.btn-votar-jam.activa {
  background: #FF80AB
}
.btn-votar-jam:disabled {
  background: #CFD8DC;
  cursor: not-allowed;
  opacity: 0.7
}
#carrusel-banners-menu .banner-jam-fondo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  background: repeating-linear-gradient(45deg, #FF80AB, #FF80AB 12px, #FFC1D9 12px, #FFC1D9 24px);
  font-size: 22px;
  font-weight: bold;
  color: #222;
  text-shadow: 2px 2px 0px #fff;
  font-family: 'Pixelify Sans',sans-serif
}
#podio-chart-jam-online {
  flex-shrink: 0;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px;
  background: #FFF3D0;
  border: 2px solid #222;
  box-shadow: 3px 3px 0px #222
}
.podio-jam-puesto {
  flex: 1;
  min-width: 0;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px
}
.podio-jam-puesto-1 {
  flex: 1.35;
  max-width: 330px
}
.podio-jam-medalla {
  text-align: center;
  font-size: 22px;
  line-height: 1
}
.podio-jam-puesto-1 .podio-jam-medalla {
  font-size: 30px
}
.podio-jam-chart {
  font-size: 11px;
  font-weight: bold;
  color: #222;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Pixelify Sans',sans-serif
}
.tarjeta-ganador-jam .tarjeta-jugador-sala-mp-estado {
  display: none
}
.tarjeta-ganador-jam {
  margin-bottom: 0 !important
}
#carrusel-banners-menu .banner-ganador-jam {
  height: 110px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background: repeating-linear-gradient(45deg, #FFE082, #FFE082 12px, #FFECB3 12px, #FFECB3 24px);
  overflow: hidden
}
#carrusel-banners-menu .banner-ganador-titulo {
  font-size: 12px;
  font-weight: bold;
  color: #222;
  text-align: center;
  font-family: 'Pixelify Sans',sans-serif
}
#carrusel-banners-menu .banner-ganador-cuerpo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0
}
#carrusel-banners-menu .banner-ganador-cuerpo .tarjeta-amigo {
  flex: 1;
  min-width: 0;
  margin: 0;
  zoom: 0.8
}
#carrusel-banners-menu .banner-ganador-chart {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: bold;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Pixelify Sans',sans-serif
}
@property --ang-jam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}
.carnet-borde-animado-overlay[class*="borde-anim-jam-"],
.swatch-borde-carnet-demo[class*="borde-anim-jam-"],
.estilo-fila-demo-borde[class*="borde-anim-jam-"] {
  border-image: conic-gradient(from var(--ang-jam), var(--jam-g)) 1 !important;
  animation: jamGiro var(--borde-anim-duracion, 3s) linear infinite
}
.swatch-borde-carnet-demo[class*="borde-anim-jam-"] {
  position: relative
}
@keyframes jamGiro {
  to {
    --ang-jam: 360deg
  }
}
.borde-anim-jam-oro {
  --jam-g: #FF80AB 0%, #FFFFFF 12%, #7C4DFF 30%, #FF80AB 50%, #FFFFFF 62%, #7C4DFF 80%, #FF80AB 100%;
  --jam-glow: #FF4081;
  --jam-pulso: 1.2s
}
.borde-anim-jam-plata {
  --jam-g: #607D8B 0%, #CFD8DC 15%, #FFFFFF 22%, #90CAF9 32%, #607D8B 50%, #CFD8DC 65%, #FFFFFF 72%, #90CAF9 82%, #607D8B 100%;
  --jam-glow: #82B1FF;
  --jam-pulso: 1.8s
}
.borde-anim-jam-bronce {
  --jam-g: #5A2E08 0%, #B5651D 25%, #FFD7A8 38%, #E0A070 46%, #B5651D 60%, #5A2E08 100%;
  --jam-glow: #FF8F3A;
  --jam-pulso: 2.4s
}
.borde-anim-jam-participante {
  --jam-g: #00E5FF 0%, #FFFFFF 10%, #76FF03 28%, #00E5FF 50%, #FFFFFF 60%, #76FF03 78%, #00E5FF 100%;
  --jam-glow: #00E5C8;
  --jam-pulso: .9s
}
.carnet-borde-animado-overlay[class*="borde-anim-jam-"]::before,
.carnet-borde-animado-overlay[class*="borde-anim-jam-"]::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none
}
.carnet-borde-animado-overlay.borde-anim-jam-oro::before {
  inset: 1px;
  border: 2px dotted #FFFFFF;
  animation: jamBombillaA .8s steps(1) infinite
}
.carnet-borde-animado-overlay.borde-anim-jam-oro::after {
  inset: 4px;
  border: 2px dotted #FF4081;
  animation: jamBombillaB .8s steps(1) infinite
}
@keyframes jamBombillaA {
  0% {
    opacity: 1
  }
  50% {
    opacity: .15
  }
}
@keyframes jamBombillaB {
  0% {
    opacity: .15
  }
  50% {
    opacity: 1
  }
}
.carnet-borde-animado-overlay.borde-anim-jam-bronce::before {
  inset: 0;
  box-shadow: inset 0 0 12px rgba(255, 143, 58, .75);
  animation: jamBrasa 2.4s ease-in-out infinite
}
.carnet-borde-animado-overlay.borde-anim-jam-plata::before {
  inset: 0;
  box-shadow: inset 0 0 10px rgba(130, 177, 255, .6);
  animation: jamBrasa 1.8s ease-in-out infinite
}
@keyframes jamBrasa {
  0%,
  100% {
    opacity: .25
  }
  50% {
    opacity: 1
  }
}
.carnet-borde-animado-overlay.borde-anim-jam-plata::after {
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%) 150% 0 / 260% 100% no-repeat;
  animation: jamDestello 3.4s ease-in-out infinite
}
@keyframes jamDestello {
  0% {
    background-position: 150% 0
  }
  60%,
  100% {
    background-position: -50% 0
  }
}
.carnet-borde-animado-overlay.borde-anim-jam-participante::before {
  inset: 0;
  box-shadow: inset 0 -8px 12px rgba(0, 229, 200, .6);
  animation: jamBrasa .9s ease-in-out infinite
}
.carnet-borde-animado-overlay .marco-jam-chispa {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
  pointer-events: none;
  background: linear-gradient(var(--c), var(--c)) center / 100% 3px no-repeat, linear-gradient(var(--c), var(--c)) center / 3px 100% no-repeat;
  animation: jamChispa 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}
.carnet-borde-animado-overlay .marco-jam-chispa::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #FFFFFF
}
@keyframes jamChispa {
  0%,
  100% {
    transform: scale(0) rotate(0deg);
    opacity: 0
  }
  45%,
  55% {
    transform: scale(1.15) rotate(45deg);
    opacity: 1
  }
}
.carnet-borde-animado-overlay .marco-jam-barra {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 13px;
  margin-left: -2px;
  pointer-events: none;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: jamBarra .55s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s)
}
@keyframes jamBarra {
  0% {
    transform: scaleY(.2)
  }
  100% {
    transform: scaleY(1)
  }
}
.carnet-borde-animado-overlay .marco-jam-sube {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: var(--c);
  pointer-events: none;
  opacity: 0;
  animation: jamSube 2.2s linear infinite;
  animation-delay: var(--d, 0s)
}
@keyframes jamSube {
  0% {
    transform: translateY(0);
    opacity: 0
  }
  15% {
    opacity: 1
  }
  100% {
    transform: translateY(-30px);
    opacity: 0
  }
}
.carnet-borde-animado-overlay .marco-jam-corona {
  position: absolute;
  top: -15px;
  left: 50%;
  width: 26px;
  margin-left: -13px;
  pointer-events: none;
  animation: jamCorona 1.6s ease-in-out infinite
}
.carnet-borde-animado-overlay .marco-jam-corona img {
  display: block;
  width: 100%;
  image-rendering: pixelated
}
@keyframes jamCorona {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg)
  }
  50% {
    transform: translateY(-3px) rotate(4deg)
  }
}
.carnet-perfil-y2k:has(> [class*="borde-anim-jam-"]),
#widget-perfil-jugador:has([class*="borde-anim-jam-"]),
#widget-perfil-biblioteca:has([class*="borde-anim-jam-"]) {
  overflow: visible
}
@media (prefers-reduced-motion: reduce) {
  .carnet-borde-animado-overlay[class*="borde-anim-jam-"],
  .swatch-borde-carnet-demo[class*="borde-anim-jam-"],
  .carnet-borde-animado-overlay[class*="borde-anim-jam-"]::before,
  .carnet-borde-animado-overlay[class*="borde-anim-jam-"]::after,
  .carnet-borde-animado-overlay .marco-jam-chispa,
  .carnet-borde-animado-overlay .marco-jam-sube,
  .carnet-borde-animado-overlay .marco-jam-barra,
  .carnet-borde-animado-overlay .marco-jam-corona {
    animation: none
  }
}
body.reducir-efectos .carnet-borde-animado-overlay[class*="borde-anim-jam-"]::before,
body.reducir-efectos .carnet-borde-animado-overlay[class*="borde-anim-jam-"]::after,
body.reducir-efectos .carnet-borde-animado-overlay .marco-jam-chispa,
body.reducir-efectos .carnet-borde-animado-overlay .marco-jam-sube,
body.reducir-efectos .carnet-borde-animado-overlay .marco-jam-barra,
body.reducir-efectos .carnet-borde-animado-overlay .marco-jam-corona {
  animation: none
}
body.reducir-efectos .carnet-borde-animado-overlay .marco-jam-sube,
body.reducir-efectos .carnet-borde-animado-overlay .marco-jam-chispa {
  display: none
}
.item-preview-mascota-wrap[data-variantes-de],
.contenedor-borde-item[data-variantes-de],
.swatch-avatar-perfil {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none
}
#menu-contextual-cara .item-menu-ctx {
  position: relative
}
#menu-contextual-cara .item-menu-ctx-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1
}
#menu-contextual-cara .item-menu-ctx-desc {
  font-size: 10px;
  color: #888888
}
#menu-contextual-cara .item-menu-ctx-estado {
  flex-shrink: 0;
  font-size: 11px
}
#menu-contextual-cara .btn-ojo-menu-ctx {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #222222;
  background: #FFFDE7;
  box-shadow: 1px 1px 0 #222222;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}
#menu-contextual-cara .btn-ojo-menu-ctx:hover {
  background: #FFE0F0
}
#menu-contextual-cara .item-menu-ctx-nombre {
  font-size: 12px
}
.item-preview-mascota-wrap[data-variantes-de] .swatch-accesorio-mascota:not(.bloqueada),
.contenedor-borde-item[data-variantes-de] .swatch-borde-carnet:not(.bloqueada) {
  border-color: #7C4DFF;
  box-shadow: 2px 2px 0px #222,inset 0 0 0 2px #FFFFFF,inset 0 0 0 4px #7C4DFF
}
.item-preview-mascota-wrap[data-variantes-de] .swatch-accesorio-mascota.activo:not(.bloqueada),
.contenedor-borde-item[data-variantes-de] .swatch-borde-carnet.activo:not(.bloqueada) {
  box-shadow: 2px 2px 0px #222,0 0 0 2px #FF4081,inset 0 0 0 2px #FFFFFF,inset 0 0 0 4px #7C4DFF
}
.item-preview-mascota-wrap[data-variantes-de] .swatch-accesorio-mascota.bloqueada,
.contenedor-borde-item[data-variantes-de] .swatch-borde-carnet.bloqueada {
  border-color: #7C4DFF
}
.swatch-avatar-perfil:has(.swatch-variante-cara-badge) {
  border-color: #7C4DFF;
  box-shadow: 2px 2px 0px #222,inset 0 0 0 1px #FFFFFF,inset 0 0 0 2px #7C4DFF
}
.swatch-avatar-perfil.activo:has(.swatch-variante-cara-badge) {
  box-shadow: 2px 2px 0px #222,0 0 0 2px #FF4081,inset 0 0 0 1px #FFFFFF,inset 0 0 0 2px #7C4DFF
}
body.reducir-efectos *, body.reducir-efectos *::before, body.reducir-efectos *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.preview-hitsound {
  font-size: 18px;
  line-height: 1;
  color: #AB47BC;
  display: inline-block
}
.btn-probar-hitsound {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  background: #FFFDE7;
  border: 1.5px solid #222;
  box-shadow: 1px 1px 0px #222;
  font-size: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  cursor: pointer;
  z-index: 2
}
.btn-probar-hitsound:hover {
  background: #FFE082;
  transform: scale(1.1)
}
.btn-probar-hitsound:active {
  transform: scale(0.95);
  box-shadow: none
}
.medalla-seleccionable .medalla-nombre {
  display: block;
  width: 100%;
  min-width: 0
}
.medalla-seleccionable .medalla-nombre .px-parrafo-cont {
  width: 100%;
  justify-content: center
}
.medalla-seleccionable .medalla-nombre .px-parrafo-cont canvas.px-dom {
  max-width: 100%;
  height: auto !important;
  image-rendering: pixelated
}
.item-tema-evento-texto {
  display: flex;
  align-items: center;
  min-width: 0
}
.item-tema-evento-texto .px-parrafo-cont {
  flex-wrap: nowrap
}
.swatch-skin-receptor > span {
  display: block;
  width: 100%;
  min-width: 0
}
.swatch-skin-receptor > span .px-parrafo-cont {
  width: 100%;
  justify-content: center
}
.swatch-skin-receptor > span .px-parrafo-cont canvas.px-dom {
  max-width: 100%;
  height: auto !important;
  image-rendering: pixelated
}
.img-estela-preview {
  height: 22px;
  width: auto;
  image-rendering: pixelated;
  margin: 0 1px
}
.letra-editor-caja {
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 2px dashed rgba(206, 147, 216, 0.95);
  border-radius: 4px;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  z-index: 9000;
  transform-origin: 50% 50%
}
.letra-editor-caja:hover,
.letra-editor-caja.letra-editor-caja-arrastrando {
  border-color: #FF4081;
  background: rgba(255, 64, 129, 0.08)
}
.letra-editor-caja .asa-escalar-letra {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #FF4081;
  border: 2px solid #FFF;
  border-radius: 50%;
  cursor: nwse-resize;
  touch-action: none
}
.letra-editor-caja .asa-rotar-letra {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #00BCD4;
  border: 2px solid #FFF;
  border-radius: 50%;
  cursor: grab;
  touch-action: none
}
.letra-editor-caja .asa-rotar-letra::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 12px;
  background: #00BCD4;
  transform: translateX(-50%)
}
#menu-contextual-visual .fila-menu-ctx-letra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 10px;
  font-size: 11px;
  color: #004D5A
}
#menu-contextual-visual .fila-menu-ctx-letra input[type="text"],
#menu-contextual-visual .fila-menu-ctx-letra input[type="number"],
#menu-contextual-visual .fila-menu-ctx-letra select {
  box-sizing: border-box;
  width: 130px;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #B2EBF2;
  border-radius: 4px;
  background: #FFF;
  color: #004D5A
}
#menu-contextual-visual .fila-menu-ctx-letra input[type="color"] {
  width: 32px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer
}
#menu-contextual-visual .fila-menu-ctx-letra button.btn-ciclo-letra {
  box-sizing: border-box;
  width: 130px;
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid #B2EBF2;
  border-radius: 4px;
  background: #FFF;
  color: #004D5A;
  text-align: left;
  cursor: pointer;
  font-size: 11px
}
#menu-contextual-visual .fila-menu-ctx-letra button.btn-ciclo-letra:hover {
  background: #E0F7FA
}
#capa-rejilla-editor {
  position: absolute;
  inset: 0;
  z-index: 43;
  display: none;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(0, 188, 212, 0.30) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 188, 212, 0.30) 1px, transparent 1px);
  background-size: var(--paso-rejilla, 10%) var(--paso-rejilla, 10%)
}
#capa-rejilla-editor::before,
#capa-rejilla-editor::after {
  content: "";
  position: absolute;
  background: rgba(255, 64, 129, 0.65)
}
#capa-rejilla-editor::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px
}
#capa-rejilla-editor::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px
}
#contenedor-juego.modo-visual-activo.rejilla-anclaje-activa #capa-rejilla-editor {
  display: block
}
#panel-visuales, #panel-letras-wrap, #vis-tabs, #vis-pie, #titulo-lista-visuales, #lista-visuales {
  --vis-ink: #222222;
  --vis-line: #222222;
  --vis-card: #FFFFFF;
  --vis-on: #80DEEA;
  --vis-seg: #CE93D8;
  --vis-chip: #A5D6A7;
  --vis-sub: #E1F8FC;
  --vis-nota: #4A4458;
  --vis-crear: #E1F8FC;
  --vis-edit: #FFF3B0;
  --vis-pie-bg: #FFFDE7;
  color: var(--vis-ink)
}
body.modo-oscuro #panel-visuales, body.modo-oscuro #panel-letras-wrap, body.modo-oscuro #vis-tabs, body.modo-oscuro #vis-pie, body.modo-oscuro #titulo-lista-visuales, body.modo-oscuro #lista-visuales {
  --vis-ink: #FFF6FB;
  --vis-line: #B98CA0;
  --vis-card: #3A3047;
  --vis-on: #2F7F8C;
  --vis-seg: #7B5A8E;
  --vis-chip: #3F7A4A;
  --vis-sub: #2B2340;
  --vis-nota: #D9C8E6;
  --vis-crear: #2B2340;
  --vis-edit: #5C4A2E;
  --vis-pie-bg: #2B2340
}
#panel-visuales .vis-oculto { display: none !important }
#panel-visuales { container-type: inline-size; gap: 12px; border-top: 0; padding-top: 4px }
#panel-letras-wrap { background: var(--vis-card); border: 2px solid var(--vis-line); padding: 12px; box-sizing: border-box; gap: 8px }
#vis-tabs { display: none; margin: 4px 0 12px; border: 2px solid var(--vis-line); background: var(--vis-card) }
#sidebar-controles-modovisual #vis-tabs { display: flex }
#vis-tabs .vis-tab { flex: 1; min-height: 46px; margin: 0; padding: 0 10px; border: 0; border-right: 2px solid var(--vis-line); border-radius: 0; background: var(--vis-card); color: var(--vis-ink); box-shadow: none; transform: none; font-family: inherit; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px }
#vis-tabs .vis-tab:last-child { border-right: 0 }
#vis-tabs .vis-tab.on { background: var(--vis-seg); font-weight: 700 }
#vis-tabs .vis-tab:focus-visible { outline: 3px dashed #AD1457; outline-offset: -4px }
.vis-tab-n { font-style: normal; font-size: 12px; font-weight: 700; background: var(--vis-line); color: var(--vis-card); padding: 1px 7px; min-width: 20px; text-align: center; display: inline-block }
#sidebar-controles-modovisual:not(.vis-tab-letras) #panel-letras-wrap { display: none !important }
#sidebar-controles-modovisual.vis-tab-letras #panel-visuales, #sidebar-controles-modovisual.vis-tab-letras #titulo-lista-visuales, #sidebar-controles-modovisual.vis-tab-letras #lista-visuales, #sidebar-controles-modovisual.vis-tab-letras #vis-pie { display: none !important }
#sidebar-controles-modovisual.vis-tab-letras #panel-letras-wrap { display: flex !important }
#sidebar-controles-modovisual.vis-tab-letras #lista-letras { max-height: 220px }
#panel-visuales .vis-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12px }
.vis-banner { padding: 10px 12px; border: 2px dashed var(--vis-line); background: var(--vis-crear); display: flex; flex-direction: column; gap: 8px }
.vis-banner[data-modo="editar"] { border-style: solid; background: var(--vis-edit); box-shadow: 3px 3px 0 var(--vis-line) }
.vis-banner-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.vis-banner-titulo { font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
.vis-banner-datos { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap }
.vis-dato { display: flex; flex-direction: column; gap: 2px }
.vis-mini-etq { font-weight: 700; color: var(--vis-nota) }
.vis-num { font-size: 24px; font-weight: 700; line-height: 1.1 }
.vis-stepper { display: flex; align-items: center; gap: 6px }
.vis-stepper .vis-num { font-size: 18px; min-width: 62px; text-align: center }
#panel-controles-editor #panel-visuales .vis-stepper button, #panel-controles-editor #panel-visuales .vis-btn-mini { margin: 0; border: 2px solid var(--vis-line); background: var(--vis-card); color: var(--vis-ink); box-shadow: 2px 2px 0 var(--vis-line); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit }
#panel-controles-editor #panel-visuales .vis-stepper button { width: 40px; min-height: 40px; padding: 0 }
#panel-controles-editor #panel-visuales .vis-btn-mini { min-height: 38px; padding: 0 12px; background: #A5D6A7; color: #222222 }
.vis-nota { color: var(--vis-nota) }
.vis-bloque { background: var(--vis-card); border: 2px solid var(--vis-line); padding: 12px; display: flex; flex-direction: column; gap: 6px }
#panel-visuales .vis-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin: 0 0 4px }
#panel-visuales .vis-h u { text-decoration: none; background: var(--vis-line); color: var(--vis-card); width: 28px; height: 28px; display: grid; place-items: center; font-size: 15px; flex: none }
.vis-grupos { display: flex; flex-direction: column; gap: 10px }
.vis-grupo-etq { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vis-nota) }
.vis-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px }
#panel-controles-editor #panel-visuales .vis-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px; padding: 8px 4px; margin: 0; background: var(--vis-card); color: var(--vis-ink); border: 2px solid var(--vis-line); box-shadow: 2px 2px 0 var(--vis-line); font-family: inherit; line-height: 1.1; text-align: center; cursor: pointer; transition: transform .1s, box-shadow .1s }
#panel-visuales .vis-card:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--vis-line) }
#panel-visuales .vis-card.on { color: #222222; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--vis-line) }
#panel-visuales .vis-grupo:nth-child(1) .vis-card.on { background: #FF8FB5 }
#panel-visuales .vis-grupo:nth-child(2) .vis-card.on { background: #80DEEA }
#panel-visuales .vis-grupo:nth-child(3) .vis-card.on { background: #CE93D8 }
#panel-visuales .vis-card svg { width: 30px; height: 30px }
#panel-visuales .vis-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; font-size: 14px }
#panel-visuales .vis-fila-interna { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
#panel-visuales .vis-etq { min-width: 84px; font-weight: 700 }
#panel-visuales .vis-fila-interna .vis-etq, #panel-visuales .vis-sub .vis-etq { min-width: 0 }
#panel-visuales .vis-fila textarea { flex: 1; min-width: 160px; height: 42px; resize: vertical; font-family: inherit; padding: 6px 10px; box-sizing: border-box }
#panel-visuales .vis-seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--vis-line); background: var(--vis-card) }
#panel-controles-editor #panel-visuales .vis-seg button { border: 0; border-right: 2px solid var(--vis-line); background: var(--vis-card); color: var(--vis-ink); min-height: 40px; padding: 0 12px; font-family: inherit; cursor: pointer; box-shadow: none; transform: none; margin: 0; border-radius: 0; font-weight: 400 }
#panel-visuales .vis-seg button:last-child { border-right: 0 }
#panel-controles-editor #panel-visuales .vis-seg button.on { background: var(--vis-seg); font-weight: 700 }
#panel-visuales input.vis-color { width: 46px; height: 38px; padding: 0; border: 2px solid var(--vis-line); background: transparent; cursor: pointer }
#panel-visuales input[type="range"] { flex: 1; min-width: 110px; max-width: 240px; cursor: pointer; accent-color: #D81B60 }
#panel-visuales .vis-val { font-weight: 700; color: #AD1457; min-width: 36px }
body.modo-oscuro #panel-visuales .vis-val { color: #FF9EC4 }
#panel-visuales .vis-chips, #panel-visuales .vis-chips-gif { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
#panel-visuales .vis-chip { position: relative; display: inline-flex; cursor: pointer }
#panel-visuales .vis-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0 }
#panel-visuales .vis-chip span { border: 2px solid var(--vis-line); background: var(--vis-card); min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center }
#panel-visuales .vis-chip input:checked + span { background: var(--vis-chip); color: #222222; box-shadow: 2px 2px 0 var(--vis-line); font-weight: 700 }
#panel-visuales .vis-chip input:focus-visible + span { outline: 3px dashed #AD1457; outline-offset: 2px }
#panel-visuales .vis-sub { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: var(--vis-sub); border: 2px dashed var(--vis-line) }
#panel-visuales .vis-sub button { padding: 0 10px; min-height: 38px }
#panel-visuales .vis-extras { display: flex; flex-direction: column; gap: 10px }
.vis-plegable { border: 2px solid var(--vis-line); background: var(--vis-card) }
.vis-plegable > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px; cursor: pointer; font-weight: 700 }
.vis-plegable > summary::-webkit-details-marker { display: none }
.vis-plegable > summary::before { content: ""; width: 9px; height: 9px; border-right: 4px solid currentColor; border-bottom: 4px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; margin: 0 4px 0 2px }
.vis-plegable[open] > summary::before { transform: rotate(45deg) }
.vis-plegable > summary:focus-visible { outline: 3px dashed #AD1457; outline-offset: -4px }
.vis-sum-r { margin-left: auto; font-weight: 400; color: var(--vis-nota); text-align: right }
.vis-plegable-cuerpo { border-top: 2px solid var(--vis-line); padding: 12px; display: flex; flex-direction: column; gap: 8px }
.vis-plegable-wrap { display: flex }
.vis-plegable-wrap > details { flex: 1; min-width: 0 }
#titulo-lista-visuales { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
#titulo-lista-visuales .vis-lista-t { font-size: 16px }
#titulo-lista-visuales small { flex: 1 1 100%; font-size: 13px }
#sidebar-controles-modovisual #titulo-lista-visuales { margin: 14px 12px 0 }
#sidebar-controles-modovisual #lista-visuales { max-height: none; overflow: visible; background: transparent; border: 0; border-top: 0; padding: 0; margin: 8px 12px 14px; gap: 8px }
.item-visual { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; min-height: 50px; border: 2px solid #222222; background: #FFFFFF; color: #222222; cursor: pointer }
.item-visual:hover { filter: brightness(.97) }
.item-visual.on { background: #FFF3B0; box-shadow: 3px 3px 0 #222222 }
.item-visual-ico { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #222222; flex: none; background: #FF8FB5 }
.item-visual-ico[data-g="2"] { background: #80DEEA }
.item-visual-ico[data-g="3"] { background: #CE93D8 }
.item-visual-ico svg { width: 20px; height: 20px }
.item-visual-txt { flex: 1; min-width: 0; display: flex; flex-direction: column }
.item-visual-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.item-visual-txt small { font-size: 12px; color: #37474F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.item-visual-acc { display: flex; gap: 4px; flex: none }
.item-visual-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; margin: 0; border: 2px solid #222222; box-shadow: 2px 2px 0 #222222; cursor: pointer; font-family: inherit; color: #222222; display: inline-flex; align-items: center; justify-content: center; background: #A5D6A7 }
.item-visual-btn.peligro { background: #FF8A80 }
.item-visual-btn.copiar { background: #80DEEA }
.item-visual-vacio { padding: 10px; border: 2px dashed #222222; background: #FFFFFF; color: #4A4458; font-size: 14px }
#sidebar-controles-modovisual #vis-pie { position: sticky; bottom: 0; z-index: 8; padding: 10px 12px 12px; background: var(--vis-pie-bg); border-top: 3px solid var(--vis-line); display: block }
#vis-pie { display: block }
#vis-pie-crear, #vis-pie-editar { display: flex; flex-direction: column; gap: 10px }
#vis-pie #btn-agregar-visual { width: 100%; min-height: 54px; padding: 8px; font-family: inherit; font-size: 17px; font-weight: 700; background: #80DEEA; color: #222222; border: 3px solid var(--vis-line); box-shadow: 4px 4px 0 var(--vis-line); cursor: pointer }
#vis-pie .vis-chk-todas { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: 14px }
#vis-pie .vis-chk-todas input { width: 20px; height: 20px; accent-color: #D81B60 }
#vis-pie .vis-btn-listo { width: 100%; min-height: 50px; font-family: inherit; font-size: 16px; font-weight: 700; background: #80DEEA; color: #222222; border: 3px solid var(--vis-line); box-shadow: 4px 4px 0 var(--vis-line); cursor: pointer }
.vis-pie-acciones { display: flex; flex-wrap: wrap; gap: 8px }
.vis-pie-acciones button { min-height: 42px; padding: 0 14px; margin: 0; font-family: inherit; font-size: 14px; background: #A5D6A7; color: #222222; border: 2px solid var(--vis-line); box-shadow: 2px 2px 0 var(--vis-line); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px }
.vis-pie-acciones #btn-vis-copiar { background: #B3E5FC }
.vis-pie-acciones #btn-vis-subir, .vis-pie-acciones #btn-vis-bajar { background: #FFFFFF; width: 44px; padding: 0 }
.vis-pie-acciones .vis-peligro { background: #FF8A80; margin-left: auto }
#vis-borrador { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 42; pointer-events: none; display: none; border: 4px dashed #FFD54F; box-sizing: border-box }
#contenedor-juego.vis-borrador-on #vis-borrador { display: block }
#vis-borrador canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; image-rendering: pixelated }
.vis-borrador-etq { position: absolute; left: 10px; top: 10px; background: #FFF3B0; color: #222222; border: 2px solid #222222; padding: 3px 10px; font-size: 13px; box-shadow: 2px 2px 0 #222222 }
@container (max-width: 640px) {
  #panel-visuales .vis-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
#panel-visuales .vis-fila > .vis-seg, #panel-visuales .vis-fila-interna > .vis-seg { max-width: 100% }
@media (prefers-reduced-motion: reduce) { .vis-card, .vis-plegable > summary::before { transition: none } }
.item-visual-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; min-height: 40px; cursor: pointer; text-align: left; font-family: inherit; color: inherit }
.item-visual-main:focus-visible, .item-visual-btn:focus-visible, .vis-card:focus-visible { outline: 3px dashed #AD1457; outline-offset: 2px }
#sidebar-controles-modovisual .panel-controles-contenido-inner { overflow: visible }
.px-ico { width: 1.15em; height: 1.15em; fill: currentColor; shape-rendering: crispEdges; vertical-align: -0.2em; flex: none }
.px-emoji-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 1 }
.px-emoji-svg:not(:last-child) { margin-right: .35em }
.btn-icono .px-ico, #btn-play-pausa-editor .px-ico { width: 1.1em; height: 1.1em; vertical-align: middle }
#panel-visuales, #panel-letras-wrap, #vis-tabs, #vis-pie, #titulo-lista-visuales, #lista-visuales { font-size: 13px }
#panel-visuales { gap: 10px }
#panel-visuales span, #panel-visuales b, #vis-tabs span, #vis-pie span { font-size: inherit }
.px-vis { line-height: 0 }
.px-vis.px-vis-una { flex-wrap: nowrap; white-space: nowrap; max-width: 100% }
#panel-visuales .vis-barra { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 }
#panel-visuales .vis-barra .vis-etq { min-width: 0; flex: none }
#panel-visuales .vis-barra .vis-seg { flex: 1 1 0; min-width: 0 }
#panel-visuales .vis-chip.vis-chip-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 10px; box-sizing: border-box; border: 2px solid var(--vis-line); background: var(--vis-card); color: var(--vis-ink); cursor: pointer }
#panel-visuales .vis-chip.vis-chip-btn:has(input:checked) { background: var(--vis-chip); box-shadow: 2px 2px 0 var(--vis-line) }
#panel-visuales .vis-chip.vis-chip-btn:has(input:focus-visible) { outline: 3px dashed #AD1457; outline-offset: 2px }
#panel-visuales .vis-chip.vis-chip-btn span { border: 0; background: transparent; min-height: 0; padding: 0; box-shadow: none; display: inline-flex; align-items: center; color: inherit; font-weight: 400 }
#panel-visuales .vis-chip.vis-chip-btn input:checked + span { background: transparent; box-shadow: none }
.vis-chip-ico { flex: none; shape-rendering: crispEdges }
#vis-tabs { margin: 4px 0 10px }
#vis-tabs .vis-tab { min-height: 38px; padding: 0 8px; font-size: 13px; gap: 8px; font-weight: 400 }
#vis-tabs .vis-tab.on { font-weight: 400 }
#vis-tabs .vis-tab > span { display: inline-flex; align-items: center }
.vis-tab-n { font-size: 13px; font-weight: 400; min-width: 22px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box }
.vis-banner { padding: 10px; gap: 8px }
.vis-banner-titulo { font-size: 13px; font-weight: 400; display: inline-flex; align-items: center; min-height: 20px }
.vis-banner-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: end }
.vis-dato { gap: 4px; min-width: 0 }
.vis-mini-etq { font-size: 13px; font-weight: 400; display: block }
.vis-num { font-size: 13px; font-weight: 400; display: inline-flex; align-items: center; min-height: 34px; line-height: 1 }
.vis-stepper { gap: 6px }
.vis-stepper .vis-num { font-size: 13px; min-width: 44px; justify-content: center; text-align: center }
#panel-controles-editor #panel-visuales .vis-stepper button { width: 34px; min-height: 34px; height: 34px; padding: 0 }
#panel-controles-editor #panel-visuales .vis-btn-mini { min-height: 30px; padding: 0 10px; font-size: 13px }
.vis-banner-nota { font-size: 13px; display: block }
.vis-bloque { padding: 10px; gap: 8px }
#panel-visuales .vis-h { font-size: 13px; font-weight: 400; gap: 8px; margin: 0 0 2px; min-height: 22px }
#panel-visuales .vis-h u { width: 22px; height: 22px; font-size: 13px; font-weight: 400 }
.vis-grupos { gap: 8px }
.vis-grupo-etq { font-size: 13px; font-weight: 400; letter-spacing: 0; display: block }
.vis-tarjetas { gap: 6px; margin-top: 4px }
#panel-controles-editor #panel-visuales .vis-card { min-height: 70px; padding: 8px 2px; gap: 6px; font-size: 13px; font-weight: 400 }
#panel-visuales .vis-card svg { width: 26px; height: 26px }
#panel-visuales .vis-card-txt { display: block; width: 100%; text-align: center; font-size: 13px; line-height: 1 }
#panel-visuales .vis-fila { font-size: 13px; gap: 8px; margin: 4px 0 0; min-height: 34px }
#panel-visuales .vis-fila:has(> .vis-etq + .vis-seg:last-child) { flex-wrap: nowrap }
#panel-visuales .vis-fila > .vis-etq { flex: 0 0 auto; min-width: 76px; font-weight: 400; display: inline-flex; align-items: center }
#panel-visuales .vis-fila > .vis-seg:last-child { flex: 1 1 0; min-width: 0; max-width: none }
#panel-visuales .vis-fila > .vis-seg:not(:last-child) { flex: 0 1 auto; min-width: 0 }
#panel-visuales .vis-etq { font-weight: 400; font-size: 13px }
#panel-visuales .vis-val { font-weight: 400; font-size: 13px; min-width: 32px }
#panel-visuales .vis-seg { display: flex; flex-wrap: wrap; gap: 2px; background: var(--vis-line); border: 2px solid var(--vis-line) }
#panel-controles-editor #panel-visuales .vis-seg button { flex: 1 1 auto; border: 0; min-height: 32px; padding: 0 8px; font-size: 13px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; background: var(--vis-card) }
#panel-controles-editor #panel-visuales .vis-seg button.on { background: var(--vis-seg); font-weight: 400 }
#panel-visuales input.vis-color { height: 32px; width: 42px }
#panel-visuales .vis-chip span { min-height: 32px; padding: 0 10px; font-weight: 400; font-size: 13px }
#panel-visuales .vis-chip input:checked + span { font-weight: 400 }
#panel-visuales .vis-sub { padding: 8px }
#panel-visuales .vis-sub button { min-height: 32px }
.vis-plegable > summary { min-height: 40px; padding: 4px 10px; gap: 8px; font-size: 13px; font-weight: 400 }
.vis-sum-t { display: inline-flex; align-items: center }
.vis-sum-r { font-size: 13px; font-weight: 400; min-width: 0; flex: 0 1 auto }
.vis-plegable-cuerpo { padding: 10px; gap: 6px }
#titulo-lista-visuales { gap: 6px 8px }
#titulo-lista-visuales .vis-lista-t { font-size: 13px; font-weight: 400; display: inline-flex }
#titulo-lista-visuales small { font-size: 13px; display: block }
.item-visual { min-height: 46px; padding: 3px 4px 3px 6px; gap: 8px }
.item-visual-main { gap: 8px }
.item-visual-ico { width: 30px; height: 30px }
.item-visual-ico svg { width: 18px; height: 18px }
.item-visual-txt { gap: 4px }
.item-visual-txt b, .item-visual-txt small { font-size: 13px; font-weight: 400; display: block }
.item-visual-txt .px-vis { flex-wrap: nowrap; overflow: hidden }
.item-visual-btn { width: 32px; height: 32px; min-height: 32px; font-size: 13px }
.item-visual-vacio { font-size: 13px; padding: 10px }
#sidebar-controles-modovisual #vis-pie { padding: 10px; }
#vis-pie-crear, #vis-pie-editar { gap: 8px }
#vis-pie #btn-agregar-visual { min-height: 48px; font-size: 18px; font-weight: 400 }
#vis-pie .vis-chk-todas { font-size: 13px; min-height: 28px; gap: 8px; align-items: center }
#vis-pie .vis-chk-todas input { width: 18px; height: 18px; flex: none; margin: 0 }
#vis-pie .vis-btn-listo { min-height: 44px; font-size: 16px; font-weight: 400 }
.vis-pie-acciones { gap: 6px }
.vis-pie-acciones button { min-height: 34px; padding: 0 10px; font-size: 13px; gap: 6px }
.vis-pie-acciones #btn-vis-subir, .vis-pie-acciones #btn-vis-bajar { width: 38px; padding: 0 }
.vis-pie-acciones button > span { display: inline-flex; align-items: center }
#panel-controles-editor #panel-visuales span, #panel-controles-editor #panel-visuales label, #panel-controles-editor #panel-visuales b, #panel-controles-editor #panel-visuales button { font-size: 13px !important }
#panel-controles-editor #panel-visuales .vis-banner-inicio, #panel-controles-editor #panel-visuales #vis-banner-inicio { font-size: 13px !important }
#panel-controles-editor #panel-visuales #btn-agregar-visual, #vis-pie #btn-agregar-visual { font-size: 18px !important }
#panel-controles-editor #panel-visuales #btn-vis-listo, #vis-pie #btn-vis-listo { font-size: 16px !important }
#panel-visuales #vis-seg-rejilla { flex-wrap: nowrap }
#panel-controles-editor #panel-visuales #vis-seg-rejilla button { flex: 1 1 0; min-width: 0; padding: 0 4px }
.vis-pie-acciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.vis-pie-acciones button { width: 100%; min-width: 0; margin: 0 !important }
.vis-pie-acciones #btn-vis-dup, .vis-pie-acciones #btn-vis-copiar, .vis-pie-acciones .vis-peligro { grid-column: span 2 }
.vis-pie-acciones #btn-vis-subir, .vis-pie-acciones #btn-vis-bajar { width: 100%; padding: 0 }
.vis-pie-acciones .vis-peligro { margin-left: 0 !important }
#vis-pie .vis-pie-fila-principal { display: flex; align-items: stretch; gap: 8px; width: 100% }
#vis-pie .vis-pie-fila-principal #btn-agregar-visual,
#vis-pie .vis-pie-fila-principal #btn-vis-listo { flex: 1 1 auto; width: auto; min-width: 0 }
#vis-pie .btn-play-pausa-visual { flex: 0 0 auto; width: 64px; min-width: 64px; max-width: 64px; min-height: 48px; padding: 0; margin: 0; font-family: inherit; font-size: 18px !important; background: #FFD54F; color: #222222; border: 3px solid var(--vis-line); box-shadow: 4px 4px 0 var(--vis-line); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box }
#vis-pie .btn-play-pausa-visual:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--vis-line) }
#vis-pie .btn-play-pausa-visual.en-reproduccion { background: #FF8FB5 }
#panel-visuales .vis-chip:not(.vis-chip-btn) > span { border: 2px solid var(--vis-line); background: var(--vis-card); color: var(--vis-ink); min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--vis-line); transition: transform .1s, box-shadow .1s }
#panel-visuales .vis-chip:not(.vis-chip-btn) > span span { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; transform: none }
#panel-visuales .vis-chip:not(.vis-chip-btn):hover > span { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--vis-line) }
#panel-visuales .vis-chip:not(.vis-chip-btn) input:checked + span { background: var(--vis-chip); color: #222222; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--vis-line) }
@media (prefers-reduced-motion: reduce) { #panel-visuales .vis-chip:not(.vis-chip-btn) > span { transition: none } }
#contenedor-juego.vis-borrador-off #vis-borrador { display: none !important }
body.sin-efectos-chart #contenedor-juego:not(.modo-visual-activo) #capa-visuales-juego, body.sin-efectos-chart #contenedor-juego:not(.modo-visual-activo) #capa-visuales-juego-atras { display: none !important }
#mascota-biblio { --mb: 38px; position: absolute; left: 0; top: 0; width: var(--mb); height: var(--mb); z-index: 60; pointer-events: none; display: none; will-change: transform; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35)) }
#mascota-biblio .mascota-biblio-int { position: relative; width: var(--mb); height: var(--mb) }
#mascota-biblio .carnet-mascota-avatar { width: var(--mb); height: var(--mb); font-size: max(7px, calc(var(--mb) * .22)); padding: 1px; border-width: 2px }
#mascota-biblio .accesorio-mascota-capa.accesorio-sombrero { top: calc(var(--mb) * -.22); font-size: calc(var(--mb) * .36) }
#mascota-biblio .accesorio-mascota-capa.accesorio-mono { font-size: calc(var(--mb) * .24) }
#mascota-biblio .accesorio-mascota-capa.accesorio-aura-izq, #mascota-biblio .accesorio-mascota-capa.accesorio-aura-der { font-size: calc(var(--mb) * .28) }
#mascota-biblio .accesorio-mascota-capa.accesorio-aura-izq { left: calc(var(--mb) * -.24) }
#mascota-biblio .accesorio-mascota-capa.accesorio-aura-der { right: calc(var(--mb) * -.24) }
#mascota-biblio .mascota-biblio-int.mascota-biblio-saliendo { animation: mascotaResColarseSalida 0.4s cubic-bezier(.5,0,.75,0) both }
#mascota-biblio .mascota-biblio-int.mascota-biblio-entrando { animation: mascotaColarseAsomo 0.7s ease-out both }
img.px-dom { display: block; image-rendering: pixelated }
.ventana-derrota-cmd { contain: layout style }
.accesorio-nota-ciclo img { image-rendering: auto }
.accesorio-nota-ciclo img + img { position: absolute; left: 0; top: 0 }
.accesorio-nota-ciclo img { animation: accNotaRebote .96s linear infinite, accNotaCiclo 2.88s steps(1, end) infinite }
.accesorio-nota-ciclo img:nth-child(2) { animation-delay: 0s, -1.92s }
.accesorio-nota-ciclo img:nth-child(3) { animation-delay: 0s, -.96s }
@keyframes accNotaCiclo {
  0% { opacity: 1 }
  33.3% { opacity: 0 }
  100% { opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .accesorio-nota-ciclo img { animation: none }
  .accesorio-nota-ciclo img + img { display: none }
}
body.jugando-activo #overlay-crt-scanlines,
body.jugando-activo #overlay-crt-scanlines::before {
  animation-play-state: paused
}
body.jugando-activo .arcade-terminal-hackeo {
  -webkit-backdrop-filter: none;
  backdrop-filter: none
}
.fila-cancion-biblio {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px
}

#vis-pie .vis-pie-snap { display: flex; gap: 8px; width: 100% }
#vis-pie .vis-pie-snap button { flex: 1 1 0; min-width: 0; min-height: 36px; margin: 0; padding: 0; font-family: inherit; font-size: 16px; background: #FFFFFF; color: #222222; border: 2px solid var(--vis-line); box-shadow: 2px 2px 0 var(--vis-line); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent }
#vis-pie .vis-pie-snap button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--vis-line) }

.osv-win {
  position: absolute;
  box-sizing: border-box;
  background: #D4D0C8;
  border: 2px solid #222;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #111;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden
}
.osv-titulo {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 2px 0 3px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  background: linear-gradient(90deg, #6B6B6B, #A9A9A9);
  white-space: nowrap
}
.osv-win.osv-activa .osv-titulo {
  background: linear-gradient(90deg, #0A246A, #3A6EA5)
}
.osv-titulo-ico {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex: none;
  align-items: center;
  justify-content: center
}
.osv-titulo-ico .osv-ico-svg {
  width: 12px;
  height: 12px
}
.osv-titulo-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45)
}
.osv-botones {
  display: flex;
  gap: 2px;
  flex: none
}
.osv-b {
  position: relative;
  display: block;
  width: 14px;
  height: 12px;
  background: #D4D0C8;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  box-sizing: border-box;
  transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1)
}
.osv-b-min::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 6px;
  height: 2px;
  background: #111
}
.osv-b-max::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 6px;
  height: 5px;
  border: 1px solid #111;
  border-top-width: 2px;
  box-sizing: border-box
}
.osv-b-cerrar::before,
.osv-b-cerrar::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 8px;
  height: 2px;
  background: #111
}
.osv-b-cerrar::before {
  transform: rotate(45deg)
}
.osv-b-cerrar::after {
  transform: rotate(-45deg)
}
.osv-b-huye {
  transform: translate(-34px, 20px) rotate(-18deg)
}
.osv-url {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: #D4D0C8;
  border-bottom: 1px solid #808080
}
.osv-url-cand {
  display: inline-flex;
  flex: none
}
.osv-url-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 0 3px;
  font-size: 9px;
  color: #1A1A1A
}
.osv-cuerpo {
  margin: 3px;
  padding: 7px 8px 8px;
  background: #ECE9D8;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080
}
.osv-fila {
  display: flex;
  align-items: flex-start;
  gap: 8px
}
.osv-ico-grande {
  flex: none;
  display: inline-flex
}
.osv-msg {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  word-break: break-word
}
.osv-botonera {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px
}
.osv-btn {
  min-width: 52px;
  padding: 2px 8px;
  text-align: center;
  font-size: 10px;
  background: #D4D0C8;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 0 0 0 1px #222;
  box-sizing: border-box
}
.osv-btn-ok {
  outline: 1px dotted #111;
  outline-offset: -4px
}
.osv-btn.osv-pulsado,
.osv-b.osv-pulsado {
  border-color: #404040 #fff #fff #404040;
  transform: translate(1px, 1px)
}
.osv-btn-ad {
  font-weight: bold;
  font-size: 11px;
  padding: 3px 12px;
  background: #FFD54F;
  color: #4A148C
}
.osv-btn-chico {
  font-size: 8px;
  min-width: 0;
  padding: 1px 4px;
  color: #666
}
.osv-progreso {
  height: 10px;
  margin-top: 8px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 1px;
  box-sizing: border-box
}
.osv-progreso-rel {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #1565C0 0 5px, transparent 5px 7px)
}
.osv-progreso-aviso {
  background: repeating-linear-gradient(90deg, #D32F2F 0 5px, transparent 5px 7px);
  animation: osvLlenar 2s linear forwards
}
.osv-progreso-gatos {
  animation: osvAtasca 3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards
}
.osv-progreso-ram {
  background: repeating-linear-gradient(90deg, #2E7D32 0 5px, transparent 5px 7px);
  animation: osvLlenar 2.4s ease-out infinite
}
.osv-progreso-txt {
  margin-top: 3px;
  font-size: 9px;
  color: #444
}
@keyframes osvLlenar {
  from { width: 0 }
  to { width: 100% }
}
@keyframes osvAtasca {
  0% { width: 0 }
  70% { width: 91% }
  100% { width: 94% }
}
.osv-aviso-l1 {
  font-size: 13px;
  letter-spacing: 1px;
  color: #B71C1C
}
.osv-aviso-parpadeo .osv-titulo {
  animation: osvTituloAlerta 0.5s steps(2, end) infinite
}
@keyframes osvTituloAlerta {
  0% { filter: none }
  100% { filter: brightness(1.45) saturate(1.3) }
}
.osv-uac-detalle {
  margin-top: 4px;
  font-size: 9px;
  color: #555;
  line-height: 1.4
}

.osv-tema-error {
  border-color: #4A0000;
  box-shadow: 3px 3px 0 rgba(90, 0, 0, 0.6)
}
.osv-tema-error .osv-titulo,
.osv-tema-error.osv-activa .osv-titulo {
  background: linear-gradient(90deg, #7F0000, #E53935)
}
.osv-tema-aviso .osv-titulo,
.osv-tema-aviso.osv-activa .osv-titulo {
  background: linear-gradient(90deg, #8D5B00, #FFB300);
  color: #1A1100;
  text-shadow: none
}
.osv-tema-tv {
  background: #1B1B2A;
  border-color: #000
}
.osv-tema-tv .osv-titulo,
.osv-tema-tv.osv-activa .osv-titulo {
  background: linear-gradient(90deg, #B71C1C, #FF5252)
}
.osv-tema-tv .osv-cuerpo {
  background: #101018;
  color: #E8EAF6;
  border-color: #000 #3A3A55 #3A3A55 #000
}
.osv-tema-term {
  background: #031006;
  border-color: #39FF14;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.45), 3px 3px 0 rgba(0, 0, 0, 0.55)
}
.osv-tema-term .osv-titulo,
.osv-tema-term.osv-activa .osv-titulo {
  background: linear-gradient(90deg, #0D3B12, #145A1B);
  color: #A8FFB0;
  border-bottom: 1px solid #39FF14
}
.osv-tema-term .osv-cuerpo {
  margin: 0;
  padding: 0;
  background: #031006;
  border: 0
}
.osv-tema-ad .osv-titulo,
.osv-tema-ad.osv-activa .osv-titulo {
  background-image: repeating-linear-gradient(-45deg, #FF4081 0 8px, #FFD54F 8px 16px);
  background-size: 22px 22px;
  color: #1A0033;
  text-shadow: 1px 1px 0 #fff;
  animation: osvRayasAd 0.9s linear infinite
}
@keyframes osvRayasAd {
  from { background-position: 0 0 }
  to { background-position: -22px 0 }
}
.osv-tema-ad {
  border-color: #FFD700;
  box-shadow: 3px 3px 0 #FF4081, 0 0 14px rgba(255, 215, 0, 0.55)
}
.osv-tema-ad .osv-cuerpo {
  background: linear-gradient(160deg, #FFF9C4, #F8BBD0)
}
.osv-tema-ad-virus {
  border-color: #B71C1C;
  box-shadow: 3px 3px 0 #B71C1C, 0 0 14px rgba(211, 47, 47, 0.55)
}
.osv-tema-ad-virus .osv-cuerpo {
  background: linear-gradient(160deg, #FFEBEE, #FFCDD2)
}
.osv-ad-grande {
  font-size: 13px;
  line-height: 1.2
}
.osv-ad-rojo {
  color: #C62828;
  animation: osvLatido 0.6s ease-in-out infinite
}
@keyframes osvLatido {
  0%, 100% { transform: scale(1) }
  50% { transform: scale(1.08) }
}
.osv-ad-nogracias {
  margin-top: 6px;
  text-align: center;
  font-size: 8px;
  color: #777;
  text-decoration: underline
}
.osv-ad-chica {
  margin-top: 5px;
  text-align: center;
  font-size: 8px;
  color: #555
}
.osv-ad-marquee {
  overflow: hidden;
  white-space: nowrap;
  margin: -7px -8px 6px;
  padding: 2px 0;
  background: #1A0033;
  color: #FFD54F;
  font-size: 10px
}
.osv-ad-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: osvMarquee 5s linear infinite
}
@keyframes osvMarquee {
  from { transform: translateX(0) }
  to { transform: translateX(-100%) }
}

.osv-tv-pantalla {
  position: relative;
  height: 62px;
  overflow: hidden;
  background: linear-gradient(180deg, #283593, #1A237E);
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center
}
.osv-tv-cara {
  font-size: 22px;
  color: #FFE0EC;
  text-shadow: 2px 2px 0 #000
}
.osv-tv-vivo {
  position: absolute;
  left: 4px;
  top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  background: #D32F2F;
  color: #fff;
  font-size: 9px;
  font-weight: bold
}
.osv-tv-vivo i {
  width: 5px;
  height: 5px;
  background: #fff;
  animation: osvParpadeo 0.9s steps(2, end) infinite
}
@keyframes osvParpadeo {
  0% { opacity: 1 }
  100% { opacity: 0.1 }
}
.osv-tv-hora {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9px;
  color: #C5CAE9
}
.osv-tv-texto {
  margin-top: 5px;
  font-size: 10px
}
.osv-tv-texto b {
  display: block;
  color: #FFEB3B;
  font-size: 11px;
  margin-bottom: 1px
}
.osv-estatica {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #fff 0 1px, #000 1px 3px);
  opacity: 0;
  animation: osvEstatica 0.45s steps(5, end) both
}
@keyframes osvEstatica {
  0% { opacity: 0.85; transform: translateY(0) }
  50% { opacity: 0.5; transform: translateY(-3px) }
  100% { opacity: 0; transform: translateY(2px) }
}
.osv-franja {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 90000;
  display: flex;
  align-items: stretch;
  background: #1A1A2E;
  border-bottom: 2px solid #000;
  font-family: 'Pixelify Sans', sans-serif;
  animation: osvFranjaEntra 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both
}
@keyframes osvFranjaEntra {
  from { transform: translateY(-100%) }
  to { transform: translateY(0) }
}
.osv-franja-et {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #D32F2F;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  animation: osvParpadeoSuave 0.8s ease-in-out infinite
}
@keyframes osvParpadeoSuave {
  0%, 100% { filter: none }
  50% { filter: brightness(1.5) }
}
.osv-franja-marco {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center
}
.osv-franja-texto {
  display: inline-block;
  white-space: nowrap;
  color: #FFEB3B;
  font-size: 11px;
  animation: osvMarquee2 22s linear infinite
}
@keyframes osvMarquee2 {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}

.osv-term {
  position: relative;
  height: 150px;
  overflow: hidden;
  font-family: 'Consolas', 'Courier New', monospace
}
#arcade-habilidad-capa canvas.osv-term-lluvia {
  z-index: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4
}
.osv-term-lineas {
  position: relative;
  padding: 8px 10px 0;
  color: #39FF14;
  font-size: 11px;
  line-height: 1.6;
  text-shadow: 0 0 5px rgba(57, 255, 20, 0.6)
}
.osv-term-linea {
  white-space: pre-wrap;
  word-break: break-word
}
.osv-term-linea:last-child::after {
  content: "▌";
  animation: osvParpadeo 0.5s steps(2, end) infinite
}
.osv-term-barra {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 12px;
  border: 1px solid #39FF14;
  background: rgba(3, 16, 6, 0.8)
}
.osv-term-barra-rel {
  height: 100%;
  width: 0;
  background: #39FF14;
  box-shadow: 0 0 8px #39FF14;
  transition: width 0.2s linear
}
.osv-term-pct {
  position: absolute;
  right: 4px;
  top: -1px;
  font-size: 9px;
  color: #fff;
  mix-blend-mode: difference
}
.osv-sello {
  position: absolute;
  right: 12px;
  top: 52%;
  padding: 2px 10px;
  border: 3px solid #FF1744;
  color: #FF1744;
  background: rgba(0, 0, 0, 0.7);
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.8);
  transform: rotate(-10deg);
  animation: osvSello 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both
}
@keyframes osvSello {
  from { transform: rotate(-10deg) scale(2.6); opacity: 0 }
  to { transform: rotate(-10deg) scale(1); opacity: 1 }
}
.osv-parpadeo-pantalla {
  animation: osvPantallaFlash 0.22s steps(2, end)
}
@keyframes osvPantallaFlash {
  0% { background: rgba(0, 0, 0, 0.9) }
  100% { background: transparent }
}

.osv-gato {
  z-index: 7
}
.osv-gato-sq {
  width: 100%;
  height: 100%;
  transform-origin: center
}
.osv-gato-pop {
  width: 100%;
  height: 100%;
  animation: osvGatoPop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both
}
@keyframes osvGatoPop {
  0% { transform: scale(0) rotate(-40deg) }
  60% { transform: scale(1.25) rotate(8deg) }
  100% { transform: scale(1) rotate(0) }
}
.osv-burbuja {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 7px;
  padding: 2px 7px;
  border: 2px solid #222;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 10px;
  white-space: nowrap;
  z-index: 3;
  transform-origin: bottom center;
  animation: osvBurbuja 1.35s ease both
}
.osv-burbuja::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #222
}
.osv-burbuja.osv-burbuja-abajo {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 7px
}
.osv-burbuja.osv-burbuja-abajo::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #222
}
@keyframes osvBurbuja {
  0% { transform: translateX(-50%) scale(0.3); opacity: 0 }
  15% { transform: translateX(-50%) scale(1.12); opacity: 1 }
  25% { transform: translateX(-50%) scale(1) }
  85% { transform: translateX(-50%) scale(1); opacity: 1 }
  100% { transform: translateX(-50%) scale(0.9); opacity: 0 }
}
.osv-sacudir {
  animation: osvSacudir 0.45s linear
}
@keyframes osvSacudir {
  0%, 100% { margin-left: 0 }
  15% { margin-left: -6px }
  35% { margin-left: 6px }
  55% { margin-left: -4px }
  75% { margin-left: 4px }
}

.osv-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  transition: transform 0.52s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.45))
}
.osv-cursor .osv-ico-svg {
  display: block;
  transition: transform 0.1s ease;
  transform-origin: 0 0
}
.osv-cursor.osv-cursor-clic .osv-ico-svg {
  transform: scale(0.82)
}

.osv-rastro {
  box-shadow: none;
  transition: opacity 0.4s ease
}
.osv-rastro.osv-rastro-fuera {
  opacity: 0
}

.osv-in-pop { animation: osvInPop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both }
.osv-in-drop { animation: osvInDrop 0.6s cubic-bezier(0.4, 0, 0.6, 1) both }
.osv-in-slideL { animation: osvInSlideL 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both }
.osv-in-slideR { animation: osvInSlideR 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both }
.osv-in-crt { animation: osvInCrt 0.45s ease-out both }
.osv-in-shake { animation: osvInShake 0.55s ease-out both }
.osv-in-glitch { animation: glitchNoticiaEntrada 0.5s steps(3, end) both }
.osv-in-max { transform-origin: 50% 80%; animation: osvInMax 0.5s cubic-bezier(0.25, 1.3, 0.4, 1) both }
@keyframes osvInPop {
  0% { transform: scale(0.4); opacity: 0 }
  60% { transform: scale(1.08); opacity: 1 }
  80% { transform: scale(0.97) }
  100% { transform: scale(1); opacity: 1 }
}
@keyframes osvInDrop {
  0% { transform: translateY(-260px); opacity: 0 }
  10% { opacity: 1 }
  55% { transform: translateY(0) }
  70% { transform: translateY(-16px) }
  85% { transform: translateY(0) }
  92% { transform: translateY(-4px) }
  100% { transform: translateY(0); opacity: 1 }
}
@keyframes osvInSlideL {
  0% { transform: translateX(-130%); opacity: 0 }
  15% { opacity: 1 }
  70% { transform: translateX(10px) }
  100% { transform: translateX(0); opacity: 1 }
}
@keyframes osvInSlideR {
  0% { transform: translateX(130%); opacity: 0 }
  15% { opacity: 1 }
  70% { transform: translateX(-10px) }
  100% { transform: translateX(0); opacity: 1 }
}
@keyframes osvInCrt {
  0% { transform: scale(0.15, 0.02); opacity: 1; filter: brightness(3) }
  45% { transform: scale(1, 0.03); filter: brightness(2.2) }
  100% { transform: scale(1, 1); filter: brightness(1) }
}
@keyframes osvInShake {
  0% { transform: scale(0.7); opacity: 0 }
  25% { transform: scale(1.06); opacity: 1 }
  40% { transform: translateX(-7px) }
  55% { transform: translateX(7px) }
  70% { transform: translateX(-4px) }
  85% { transform: translateX(3px) }
  100% { transform: translateX(0) scale(1); opacity: 1 }
}
@keyframes osvInMax {
  0% { transform: scale(0.3) translateY(60px); opacity: 0 }
  65% { transform: scale(1.05) translateY(-4px); opacity: 1 }
  100% { transform: scale(1) translateY(0); opacity: 1 }
}

.osv-out-pop { animation: osvOutPop 0.3s ease-in both }
.osv-out-crt { animation: osvOutCrt 0.38s ease-in both }
.osv-out-caer { transform-origin: 50% 100%; animation: osvOutCaer 0.62s cubic-bezier(0.5, 0, 0.9, 0.5) both }
.osv-out-glitch { animation: glitchNoticiaSalida 0.42s steps(3, end) both }
@keyframes osvOutPop {
  0% { transform: scale(1); opacity: 1 }
  30% { transform: scale(1.06) }
  100% { transform: scale(0.6); opacity: 0 }
}
@keyframes osvOutCrt {
  0% { transform: scale(1, 1); filter: brightness(1) }
  55% { transform: scale(1, 0.03); filter: brightness(2.5) }
  100% { transform: scale(0, 0.02); filter: brightness(4); opacity: 0 }
}
@keyframes osvOutCaer {
  0% { transform: translateY(0) rotate(0); opacity: 1 }
  100% { transform: translateY(260px) rotate(16deg); opacity: 0 }
}

.cartel-habilidad-recibida {
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1)
}

.osv-win {
  background: #0D0D0D;
  border: 2px solid #222222;
  box-shadow: 3px 3px 0 #222222;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10px;
  color: #69F0AE
}
.osv-win .osv-titulo,
.osv-win.osv-activa .osv-titulo {
  height: auto;
  padding: 2px 6px;
  justify-content: space-between;
  background: #FF4081;
  color: #FFFDE7;
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: normal;
  font-size: 10px;
  text-shadow: none
}
.osv-win:not(.osv-activa) .osv-titulo {
  filter: brightness(0.72)
}
.osv-titulo-ico {
  display: none
}
.osv-botones {
  gap: 6px
}
.osv-b {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  font-style: normal;
  font-size: 10px;
  line-height: 1
}
.osv-b::before,
.osv-b::after {
  all: unset
}
.osv-b-min::after {
  content: "_"
}
.osv-b-max::after {
  content: "□"
}
.osv-b-cerrar::after {
  content: "×"
}
.osv-b.osv-pulsado {
  border: 0;
  transform: none;
  color: #FFEB3B
}
.osv-url {
  background: #151515;
  border-bottom: 1px solid #222222
}
.osv-url-txt {
  background: #0D0D0D;
  border: 1px solid #333333;
  color: #69F0AE
}
.osv-cuerpo {
  margin: 0;
  padding: 6px 8px 8px;
  background: transparent;
  border: 0
}
.osv-msg {
  color: #69F0AE;
  font-size: 10px;
  line-height: 1.45
}
.osv-btn {
  background: transparent;
  color: #69F0AE;
  border: 1px solid #69F0AE;
  box-shadow: none;
  font-family: 'Pixelify Sans', sans-serif;
  padding: 2px 8px
}
.osv-btn-ok {
  outline: 0
}
.osv-btn.osv-pulsado {
  background: #69F0AE;
  color: #0D0D0D;
  border-color: #69F0AE;
  transform: none
}
.osv-btn-chico {
  color: #888888;
  border-color: #555555
}
.osv-btn-ad {
  background: #FF4081;
  color: #FFFDE7;
  border: 2px solid #AD1457;
  box-shadow: 2px 2px 0 #AD1457;
  border-radius: 4px;
  padding: 3px 10px
}
.osv-btn-ad.osv-pulsado {
  background: #00BCD4;
  color: #FFFDE7;
  border-color: #AD1457
}
.osv-progreso {
  background: #1A1A1A;
  border: 1px solid #69F0AE
}
.osv-progreso-rel,
.osv-progreso-ram {
  background: #69F0AE
}
.osv-progreso-aviso {
  background: #FF5252
}
.osv-progreso-txt,
.osv-uac-detalle {
  color: #9E9E9E
}
.osv-aviso-l1 {
  color: #FF8A80
}
.osv-tema-error {
  border-color: #B71C1C;
  box-shadow: 3px 3px 0 #B71C1C
}
.osv-tema-error .osv-titulo,
.osv-tema-error.osv-activa .osv-titulo,
.osv-tema-aviso .osv-titulo,
.osv-tema-aviso.osv-activa .osv-titulo {
  background: #D32F2F;
  color: #FFEBEE
}
.osv-tema-error .osv-msg,
.osv-tema-aviso .osv-msg {
  color: #FF8A80
}
.osv-tema-aviso {
  border-color: #B71C1C;
  box-shadow: 3px 3px 0 #B71C1C
}
.osv-tema-tv {
  background: #0D0D0D;
  border-color: #FF1744;
  box-shadow: 3px 3px 0 #222222, 0 0 14px rgba(255, 23, 68, 0.55)
}
.osv-tema-tv .osv-titulo,
.osv-tema-tv.osv-activa .osv-titulo {
  background: #FF1744
}
.osv-tema-tv .osv-cuerpo {
  background: transparent;
  color: #69F0AE
}
.osv-tv-texto {
  color: #69F0AE
}
.osv-tema-ad,
.osv-tema-ad .osv-msg,
.osv-tema-ad .osv-ad-chica {
  color: #1A0033
}
.osv-tema-ad .osv-titulo,
.osv-tema-ad.osv-activa .osv-titulo {
  color: #1A0033
}
.osv-tema-ad .osv-url {
  background: #FFF9C4
}
.osv-tema-ad .osv-url-txt {
  background: #FFFFFF;
  color: #1A1A1A;
  border-color: #CCCCCC
}
.osv-tema-ad .osv-progreso {
  background: #FFFFFF
}
.osv-tema-ad .osv-btn-chico {
  color: #555555;
  border-color: #777777
}
.osv-tema-ad-virus,
.osv-tema-ad-virus .osv-msg {
  color: #4A0000
}
.osv-tema-ad .osv-progreso-txt {
  color: #555555
}

#pantalla-resultados {
  overflow: hidden;
  padding: 0;
  background: transparent
}
#res-fondo-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  image-rendering: auto
}
#res-escenario {
  position: absolute;
  left: 0;
  top: 0;
  width: 960px;
  height: 540px;
  transform-origin: 0 0
}
#res-d-titulo {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  pointer-events: none
}
.res-d-chip {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 10px;
  border: 2px solid #222;
  box-shadow: 2px 2px 0 #222;
  background: #FFFDE7;
  color: #222;
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: bold;
  font-size: 13px
}
#res-d-mascota {
  position: absolute;
  left: 8px;
  bottom: 22px;
  width: 300px;
  height: 410px;
  display: flex;
  align-items: flex-end;
  justify-content: center
}
#res-d-mascota #mascota-resultados-slot,
#res-d-mascota #mascota-resultados-slot.mascota-resultados-abierto {
  width: 100%;
  height: 100%;
  transition: none
}
#res-d-mascota .mascota-resultados-cara {
  scale: 3.7;
  margin-bottom: 100px
}
#res-d-mascota .mascota-resultados-hueco {
  width: 190px;
  height: 36px;
  bottom: -2px
}
#res-d-mascota .mascota-resultados-globo {
  bottom: auto;
  top: 34px;
  left: 78%;
  margin: 0;
  font-size: 14px;
  padding: 5px 12px
}
#res-d-centro {
  position: absolute;
  left: 300px;
  top: 64px;
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}
.res-rango-wrap {
  position: relative;
  width: 240px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center
}
.res-rango-wrap .rango-texto {
  position: relative;
  scale: 1.7;
  margin: 0
}
.res-rayos {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.26) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%);
  mask: radial-gradient(circle, #000 18%, transparent 66%);
  pointer-events: none;
  animation: resRayosGiro 24s linear infinite
}
@keyframes resRayosGiro {
  to {
    transform: rotate(360deg)
  }
}
body.reducir-efectos .res-rayos {
  animation: none
}
#res-d-centro .precision-texto {
  font-size: 40px;
  color: #FFFFFF;
  text-shadow: 3px 3px 0 #222;
  margin: 0
}
#res-d-centro .combo-badge-texto {
  margin: 0
}
#res-escenario .tarjeta-resultados {
  position: absolute;
  right: 16px;
  top: 40px;
  width: 410px;
  min-width: 0;
  padding: 0;
  gap: 0;
  scale: 1;
  align-items: stretch;
  overflow: hidden
}
.res-d-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 8px 14px 10px
}
.res-d-cuerpo .barra-desglose-resultados {
  margin-bottom: 2px
}
.res-d-cuerpo .tabla-resultados {
  gap: 3px 18px;
  font-size: 13px
}
.res-d-graficos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
.res-d-graficos > div {
  margin-top: 0 !important;
  min-width: 0
}
.res-d-graficos > div > div {
  flex-wrap: wrap
}
#res-escenario #res-perfil-xp,
#res-escenario .res-mascota-xp {
  padding: 5px 8px !important;
  font-size: 11px !important
}
#res-escenario #res-botones-normales .btn-menu-grande {
  font-size: 14px !important;
  padding: 9px 8px !important
}

#res-d-mascota {
  top: 50%;
  bottom: auto;
  height: 340px;
  translate: 0 -50%;
  align-items: center
}
#res-d-mascota .mascota-resultados-cara {
  margin-bottom: 0
}
#res-d-mascota .mascota-resultados-hueco {
  bottom: 12px
}
#res-d-mascota .mascota-resultados-globo {
  top: 0
}
#res-d-centro {
  top: 50%;
  translate: 0 -50%
}
#res-escenario .tarjeta-resultados {
  top: 50%;
  translate: 0 -50%
}
#res-d-mascota #mascota-resultados-slot {
  align-items: center
}

#res-capa-real {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9851;
  display: none;
  overflow: hidden;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
  animation: fondoOverlayAparecer 0.22s ease both
}
#pantalla-resultados #res-d-titulo {
  z-index: 3
}
#pantalla-resultados .res-d-chip {
  max-width: calc(100% - 40px)
}
.res-d-chip .px-parrafo-cont {
  flex-wrap: nowrap;
  overflow: hidden
}

#res-escenario #res-d-centro {
  left: 50%;
  translate: -50% -50%;
  width: 236px
}
#res-escenario #res-d-centro .precision-texto {
  font-size: 36px;
  text-align: center
}
#res-escenario #res-d-centro .precision-texto .px-parrafo-cont {
  justify-content: center
}
#res-escenario #res-d-centro .combo-badge-texto {
  max-width: 236px
}

#res-fondo-real {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9849;
  display: none;
  overflow: hidden;
  background: #1d1030;
  pointer-events: none;
  animation: fondoOverlayAparecer 0.22s ease both
}

body.res-retenida #capa-transicion-mascotas {
  z-index: 9860
}
body.transicion-reintento #capa-transicion-mascotas {
  z-index: 9950
}

#res-escenario #res-d-mascota {
  left: 3%
}
#res-escenario .tarjeta-resultados {
  right: 2.6%;
  width: 404px
}

.rs-L{position:absolute;inset:0}.rs-L>*{position:absolute}
#res-escenario canvas.rs-px,#res-escenario img.rs-px{image-rendering:pixelated;display:block}.rs-pxt{display:inline-block;line-height:0}
@keyframes rs_beatP{from{scale:1.05}to{scale:1}}
.rs-ring{left:550px;top:300px;width:226px;height:226px;margin:-113px 0 0 -113px;border:6px solid var(--rc);rotate:45deg;opacity:.9;pointer-events:none;animation:rs_ringOut calc(var(--beat)*5) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes rs_ringOut{to{width:980px;height:980px;margin:-490px 0 0 -490px;opacity:0}}

.rs-cute{background:linear-gradient(160deg,#FFE0F0 0%,#E1F5FE 52%,#E8D5FF 100%);overflow:hidden}
.rs-cute::before,.rs-cute::after{content:"";position:absolute;inset:0}
.rs-cute::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.38) 0 36px,transparent 36px 72px);background-size:101.8234px 101.8234px;animation:rs_stp 6s linear infinite}
@keyframes rs_stp{to{background-position:101.8234px 0}}
.rs-cute::after{background:radial-gradient(rgba(255,255,255,.75) 18%,transparent 19%) 0 0/24px 24px}
.rs-drift{position:absolute;left:var(--x);top:0;animation:rs_drift var(--t) linear var(--dl) infinite;opacity:.85}
@keyframes rs_drift{from{transform:translateY(680px) rotate(-14deg)}50%{transform:translateY(300px) rotate(14deg) translateX(24px)}to{transform:translateY(-90px) rotate(-14deg)}}
.rs-cloud{position:absolute;top:var(--y);left:0;animation:rs_cld var(--t) linear var(--dl) infinite;opacity:.9}
@keyframes rs_cld{from{transform:translateX(-260px)}to{transform:translateX(1120px)}}
.rs-in{opacity:0}
.rs-go .rs-aL{animation:rs_inL .55s var(--d,0s) cubic-bezier(.2,.9,.3,1.25) both}
.rs-go .rs-aR{animation:rs_inR .55s var(--d,0s) cubic-bezier(.2,.9,.3,1.25) both}
.rs-go .rs-aT{animation:rs_inT .55s var(--d,0s) cubic-bezier(.2,.9,.3,1.25) both}
.rs-go .rs-aB{animation:rs_inB .6s var(--d,0s) cubic-bezier(.2,.9,.3,1.4) both}
.rs-go .rs-aP{animation:rs_inP .5s var(--d,0s) cubic-bezier(.2,.9,.3,1.5) both}
@keyframes rs_inL{from{translate:-160px 0;opacity:0}to{translate:0 0;opacity:1}}@keyframes rs_inR{from{translate:160px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes rs_inT{from{translate:0 -90px;opacity:0}to{translate:0 0;opacity:1}}@keyframes rs_inB{from{translate:0 160px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes rs_inP{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
@keyframes rs_stamp{from{scale:4;opacity:0}60%{scale:.9;opacity:1}to{scale:1;opacity:1}}
.rs-stamp{opacity:0}
.rs-go .rs-stamp{animation:rs_stamp .45s 1.1s cubic-bezier(.3,.9,.4,1.2) both}

.rs-cb{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,var(--pa),var(--pb));border:3px solid #222;box-shadow:4px 4px 0 #222}
.rs-cb::before{content:"";position:absolute;inset:0;z-index:-1;--rl:color-mix(in srgb,var(--c2) 45%,transparent);background-image:linear-gradient(to right,var(--rl) 1px,transparent 1px),linear-gradient(to bottom,var(--rl) 1px,transparent 1px);background-size:20px 20px;animation:rs_rej 6s linear infinite}
@keyframes rs_rej{to{background-position:100px 0}}
.rs-cbs{position:absolute;inset:0;z-index:-1;overflow:hidden;container-type:inline-size;pointer-events:none}
.rs-cbs>i{position:absolute;left:100%;top:var(--y);width:var(--tam);height:var(--tam);opacity:var(--o);background:var(--cc);animation:rs_cbm var(--dur) linear var(--dl) infinite}
@keyframes rs_cbm{from{transform:translateX(0) rotate(var(--r0))}to{transform:translateX(calc(-100cqw - var(--tam))) rotate(calc(var(--r0) + var(--gi)))}}
.rs-p-jugar{--pa:#B3E5FC;--pb:#80DEEA;--c1:#E1F8FC;--c2:#5FD3E2}.rs-p-mp{--pa:#F3E5F5;--pb:#CE93D8;--c1:#FBEEFD;--c2:#B889DB}
.rs-p-edit{--pa:#FFF3D6;--pb:#FFD54F;--c1:#FFF9E3;--c2:#FFC46B}.rs-p-cargar{--pa:#FFE0F0;--pb:#FF9FE5;--c1:#FFF0F8;--c2:#FF6FD0}
.rs-p-config{--pa:#E8F5E9;--pb:#A5D6A7;--c1:#F3FAF3;--c2:#78C47E}.rs-p-salir{--pa:#FFCDD2;--pb:#E57373;--c1:#FFEBEE;--c2:#E57373}
.rs-L>.rs-cb{position:absolute}
.rs-sh{filter:drop-shadow(3px 0 0 #222) drop-shadow(-3px 0 0 #222) drop-shadow(0 3px 0 #222) drop-shadow(0 -3px 0 #222) drop-shadow(7px 7px 0 #222)}
.rs-nob{border:none;box-shadow:none}
#rs-ban{left:0;top:22px;width:1060px;height:90px}
#rs-ban .rs-cb{width:100%;height:100%;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%);display:flex;align-items:center;gap:16px;padding:0 60px 0 34px}
.rs-cover{width:62px;height:62px;border:3px solid #222;background:linear-gradient(135deg,#FF4081,#00E5FF);flex:none}
.rs-col{display:flex;flex-direction:column;gap:6px}
.rs-diff{background:#7B1FA2;border:3px solid #222;padding:5px 9px}
.rs-newrec{margin-left:auto;background:#FF1744;border:3px solid #222;box-shadow:3px 3px 0 #222;padding:6px 12px;animation:rs_pls 1s ease-in-out infinite}
@keyframes rs_pls{50%{transform:scale(1.08) rotate(-3deg)}}
#rs-tags{left:46px;top:140px;display:flex;flex-direction:column;gap:12px}
.rs-tag{width:320px;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}

.rs-dia{left:390px;top:140px;width:320px;height:320px}
.rs-bw{position:absolute;inset:0;animation:rs_beatP var(--beat) cubic-bezier(.1,.7,.3,1) infinite}
.rs-dia .rs-sh{position:absolute;inset:0}
.rs-dfill{position:absolute;inset:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#FFFDE7,color-mix(in srgb,var(--rank) 40%,#fff));overflow:hidden}
.rs-dfill::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.8) 18%,transparent 19%) 0 0/20px 20px}
.rs-dfill>i{position:absolute;left:var(--x);bottom:-20px;width:var(--tam);height:var(--tam);background:var(--cc);opacity:.85;animation:rs_dup var(--dur) linear var(--dl) infinite}
@keyframes rs_dup{from{transform:translateY(0) rotate(var(--r0))}to{transform:translateY(-360px) rotate(calc(var(--r0) + 280deg));opacity:.2}}
.rs-rk{position:absolute;left:50%;top:50%;translate:-50% -50%;line-height:0}
.rs-emb{display:block;width:224px;height:224px;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;user-select:none}
.fcb{left:455px;top:472px;padding:6px 16px}
#rs-panel{left:720px;top:140px;width:334px;height:200px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.rs-row{display:flex;justify-content:space-between;align-items:flex-end}
.rs-bub{left:800px;top:338px;background:#FFFDE7;border:3px solid #222;box-shadow:3px 3px 0 #222;padding:6px 12px}
.rs-bub::after{content:"";position:absolute;left:calc(50% - 11px);bottom:-11px;width:16px;height:16px;background:#FFFDE7;border:3px solid #222;border-top:none;border-left:none;rotate:45deg}
.rs-prog{left:46px;width:390px;height:50px;padding:5px 10px;display:flex;flex-direction:column;justify-content:space-between}
.rs-pbar{height:14px;border:3px solid #222;background:#fff}
.rs-xf{height:100%;width:var(--p0);background:var(--g);background-size:200% 100%;animation:rs_brillo 4s linear infinite}
@keyframes rs_brillo{to{background-position:200% 0}}
.rs-btn{top:570px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer}

.rs-masw{left:845px;top:405px;width:150px;height:150px}
.rs-md{position:absolute;inset:0}
.rs-mas{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:5px solid #222;background:radial-gradient(circle at 35% 30%,#fff,#FFE0EC 45%,#F8BBD0);box-shadow:6px 6px 0 #222;font:700 23px 'Courier New',monospace;white-space:nowrap;color:#222;z-index:1}
.rs-tear{position:absolute;left:34px;top:80px;width:10px;height:14px;background:#4DD0E1;border:2px solid #222;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:0;z-index:2}
.rs-r-S .rs-md{animation:rs_dance calc(var(--beat)*2) ease-in-out 1.2s infinite}
@keyframes rs_dance{0%,100%{transform:translateY(0) rotate(-9deg) scale(1.06,.94)}25%,75%{transform:translateY(-32px) rotate(0) scale(.94,1.08)}50%{transform:translateY(0) rotate(9deg) scale(1.06,.94)}}
.rs-r-A .rs-md{animation:rs_bob calc(var(--beat)*4) ease-in-out infinite}.rs-r-B .rs-md{animation:rs_sway calc(var(--beat)*6) ease-in-out infinite}
.rs-r-C .rs-md{animation:rs_bob calc(var(--beat)*8) ease-in-out infinite;transform:translateY(6px)}.rs-r-D .rs-md{translate:0 14px;animation:rs_sad 3s ease-in-out infinite}
.rs-r-D .rs-tear{opacity:1;animation:rs_tr 1.4s ease-in infinite}
@keyframes rs_bob{50%{transform:translateY(-10px)}}@keyframes rs_sway{50%{transform:rotate(4deg)}}@keyframes rs_sad{50%{rotate:-2deg}}@keyframes rs_tr{to{translate:0 50px;opacity:0}}
.rs-mnote{animation:rs_mnu 1.6s ease-out forwards;pointer-events:none}
@keyframes rs_mnu{from{translate:0 0;opacity:1}to{translate:var(--dx) -150px;opacity:0}}
.rs-plq{position:absolute;left:50%;top:73%;translate:-50% -50%;rotate:-6deg;opacity:0;line-height:0;z-index:3}
.rs-go .rs-plq{animation:rs_plqIn .4s 1.45s cubic-bezier(.3,.9,.4,1.3) both}@keyframes rs_plqIn{from{scale:2.5;opacity:0}to{scale:1;opacity:1}}#res-escenario.rs-norec .rs-newrec{display:none}

#res-fondo-real { display: none !important }
#res-escenario { --beat: 469ms; --rank: #FFD54F; overflow: hidden; font-family: 'Pixelify Sans', 'Courier New', monospace }
#rs-spr canvas { position: absolute; left: 0; top: 0; pointer-events: none }
#rs-stage { position: absolute; left: 50%; top: 50%; width: 1100px; height: 620px; margin: -310px 0 0 -550px }
#rs-stage.rs-shk { animation: rs_shk .35s linear }
@keyframes rs_shk { 20% { translate: -7px 4px } 40% { translate: 6px -5px } 60% { translate: -4px 3px } 80% { translate: 2px -1px } }
#rs-stage > * { position: absolute }
#rs-rings { left: 0; top: 0; width: 1100px; height: 620px; pointer-events: none }
#res-escenario .px-parrafo-cont { flex-wrap: nowrap; column-gap: 0; row-gap: 0 }
#res-escenario .rs-px, #res-escenario #res-d-cancion, #res-escenario #res-perfect, #res-escenario #res-great, #res-escenario #res-miss, #res-escenario #res-combo, #res-escenario #res-puntaje, #res-escenario #res-precision, #res-escenario #res-total { color: #222; line-height: 0; margin: 0; padding: 0; text-align: left }
#res-escenario .rs-l3 { font-size: 27px }
#res-escenario .rs-l2 { font-size: 18px }
#res-escenario #res-perfect, #res-escenario #res-great, #res-escenario #res-miss, #res-escenario #res-combo { font-size: 36px }
#res-escenario #res-puntaje, #res-escenario #res-precision { font-size: 45px }
#res-escenario #res-total { font-size: 27px }
#res-escenario #res-d-cancion { font-size: 36px; display: block; background: none; border: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; white-space: nowrap }
#res-escenario #rs-ban .rs-col { flex: 1 1 0; min-width: 0 }
#res-escenario #res-d-cancion .px-parrafo-cont { width: max-content }
#res-escenario .rs-diff .rs-px, #res-escenario .rs-newrec .rs-px { color: #fff; font-size: 27px }
#res-escenario .rs-bub .rs-px { font-size: 18px }
#res-escenario .rs-prog .rs-px { font-size: 18px }
#res-escenario .rs-tag { position: relative }
#rs-panel { position: absolute }
#rs-panel > .rs-px, #rs-panel > #res-puntaje { align-self: flex-start }
#rs-panel .rs-row > * { flex: none }
#res-escenario #res-combo-badge.rs-plq { margin: 0; padding: 0; position: absolute; display: block; line-height: 0 }
#res-escenario #res-combo-badge.rs-plq[style*="display: none"] { display: none !important }
#res-escenario .rs-mas { overflow: visible }
#rs-face { white-space: nowrap }
.rs-prog .rs-xf { transition: width .6s ease }
#rs-puesto { left: 440px; top: 474px; width: 270px }
#res-escenario .rs-botones { position: absolute; left: 520px; top: 568px; width: 534px; gap: 10px; align-items: stretch; justify-content: center }
#res-escenario .rs-botones .btn-menu-grande { flex: 1; margin: 0; font-size: 18px; padding: 10px 8px }
#res-escenario #res-mp-espera { position: absolute; left: 520px; top: 556px; width: 534px; text-align: center }
#rs-legacy { display: none !important }
#res-escenario [class*="rs-"], #res-escenario .rs-cb * { box-sizing: border-box }
#res-escenario.rs-go #res-combo-badge.rs-plq { animation: rs_plqIn .4s 1.45s cubic-bezier(.3,.9,.4,1.3) both }

#rs-stage { left: 0; width: 100%; margin-left: 0 }
#rs-rings { left: 50%; width: 0 }
#rs-rings .rs-ring { left: 0 }
#rs-ban { left: 0; width: calc(100% - 40px) }
#rs-tags { left: 4.2% }
#res-escenario .rs-prog { left: 4.2%; width: 390px }
#res-escenario .rs-dia { left: 50%; margin-left: -160px }
#rs-puesto { left: 50%; margin-left: -135px }
#rs-panel { left: auto; right: 4.2% }
#res-escenario .rs-botones, #res-escenario #res-mp-espera { left: auto; right: 4.2% }
#res-escenario .rs-masw { left: auto; right: calc(4.2% + 59px) }
#res-escenario .rs-bubw { position: absolute; left: -40px; right: -40px; bottom: calc(100% + 12px); display: flex; justify-content: center; pointer-events: none }
#res-escenario .rs-bubw .rs-bub { position: relative; left: auto; top: auto }
#res-escenario #res-precision { font-size: 36px }
#res-escenario .rs-bubw { z-index: 5 }

body.juego-pantalla-completa #contenedor-juego.modo-play-16-9 {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100 * var(--vw, 1vw));
  height: calc(100 * var(--vh, 1vh));
  margin: 0;
  border: 0;
  box-shadow: none
}

#rs-rings > .rs-ring { position: absolute }

#res-escenario .rs-md > .rs-acc { position: absolute; left: 0; top: 0; width: 70px; height: 70px; transform-origin: 0 0; pointer-events: none }
#res-escenario .rs-md > .rs-acc-atras { z-index: 0 }
#res-escenario .rs-md > .rs-acc-frente { z-index: 3 }

#pantalla-bienvenida { padding-bottom: 12px; box-sizing: border-box }

#res-escenario #res-combo-badge.rs-plq { left: var(--plq-x, 50%); top: var(--plq-y, 73%); translate: none; rotate: 0deg; margin: 0 }
#res-escenario #res-combo-badge .placa-combo-pixel { image-rendering: pixelated }

.rs-dia .rs-sh,
#rs-ban.rs-sh {
  filter: none;
  isolation: isolate;
}

.rs-dia .rs-sh::before,
.rs-dia .rs-sh::after {
  content: "";
  position: absolute;
  inset: -4.243px;
  background: #222;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  z-index: -1;
  pointer-events: none;
}
.rs-dia .rs-sh::before { translate: 7px 7px }

#rs-ban.rs-sh::before,
#rs-ban.rs-sh::after {
  content: "";
  position: absolute;
  inset: -3px -8px -3px -3px;
  background: #222;
  clip-path: polygon(0 0, calc(100% - 3.838px) 0, calc(100% - 35.838px) 100%, 0 100%);
  z-index: -1;
  pointer-events: none;
}
#rs-ban.rs-sh::before { translate: 7px 7px }

#res-escenario .rs-bub::after { left: calc(50% - 8px); z-index: 0 }
#res-escenario .rs-bub .rs-px { position: relative; z-index: 1 }

#fila-editor-modovisual.modovisual-on {
  --mv-col2: clamp(320px, calc(20 * var(--vw, 1vw)), 480px);
  --mv-alto-tl: 120px;
  --mv-ancho: min(calc(97 * var(--vw, 1vw) - 14px - var(--mv-col2)), calc((95 * var(--vh, 1vh) - var(--mv-alto-tl)) * 16 / 9));
  display: grid;
  grid-template-columns: var(--mv-ancho) var(--mv-col2);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 0;
  justify-content: center;
  align-items: start;
  width: calc(97 * var(--vw, 1vw));
  margin: 0 auto
}
#fila-editor-modovisual.modovisual-on #contenedor-juego {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  min-width: 0
}
#fila-editor-modovisual.modovisual-on #contenedor-linea-tiempo {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  margin: 0;
  border-top: 3px solid #222222;
  min-width: 0
}
#fila-editor-modovisual.modovisual-on #sidebar-controles-modovisual {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  flex: none;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  contain: size
}
body{--rw-a:#FFE0F0;--rw-b:#E1F5FE;--rw-c:#E8D5FF;--rw-s:rgba(255,255,255,.38);--rw-d:rgba(255,255,255,.75);--rw-t:#222}
body.modo-oscuro{--rw-a:#4A3B5C;--rw-b:#6B4E7A;--rw-c:#8C6690;--rw-s:rgba(255,255,255,.07);--rw-d:rgba(255,255,255,.14);--rw-t:#fff}
body.tema-halloween{--rw-a:#14041F;--rw-b:#2E0B4A;--rw-c:#8A3A00;--rw-s:rgba(255,152,0,.09);--rw-d:rgba(255,152,0,.18);--rw-t:#fff}
#modal-sala-mp{background:linear-gradient(160deg,var(--rw-a) 0%,var(--rw-b) 52%,var(--rw-c) 100%)}
#modal-sala-mp::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,var(--rw-s) 0 36px,transparent 36px 72px);background-size:101.8234px 101.8234px;animation:rs_stp 6s linear infinite}
.rs-cute{background:linear-gradient(160deg,var(--rw-a) 0%,var(--rw-b) 52%,var(--rw-c) 100%)}
.rs-cute::before{background:repeating-linear-gradient(135deg,var(--rw-s) 0 36px,transparent 36px 72px);background-size:101.8234px 101.8234px}
.rs-cute::after{background:radial-gradient(var(--rw-d) 18%,transparent 19%) 0 0/24px 24px}
body.reducir-efectos #modal-sala-mp::before,body.reducir-efectos .mp-caja::before{animation:none}
#modal-sala-mp{overflow:hidden!important}
#modal-sala-mp .tarjeta-modal{width:1040px!important;max-width:none!important;max-height:none!important;overflow:visible!important;flex:none;min-width:0!important;align-items:center;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 8px 8px!important;gap:14px}
#modal-sala-mp .tarjeta-modal>*{max-width:100%}
.mp-oculto{display:none!important}
.mp-cerrar-oculto{display:none!important}
.mp-ban{position:relative;isolation:isolate;align-self:flex-start;width:calc(100% - 24px);margin-bottom:8px}
.mp-ban::before,.mp-ban::after{content:"";position:absolute;inset:-3px -8px -3px -3px;background:#222;clip-path:polygon(0 0,calc(100% - 3.8px) 0,calc(100% - 35.8px) 100%,0 100%);z-index:-1}
.mp-ban::before{translate:7px 7px}
#modal-sala-mp .mp-ban .encabezado-ventana-y2k{background:linear-gradient(135deg,#F3E5F5,#CE93D8)!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important;width:100%!important;box-sizing:border-box;padding:0 64px 0 34px!important;min-height:86px;font-size:32px;letter-spacing:2px;display:flex;align-items:center;gap:16px;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)}
#sala-mp-banner-titulo{min-width:0}
#sala-mp-banner-chips{display:flex;align-items:center;gap:10px;margin-left:auto}
#sala-mp-banner-chips:empty{display:none}
.mp-chip{font:inherit;font-size:18px;letter-spacing:1px;line-height:1.2;color:#222;background:#fff;border:3px solid #222;box-shadow:3px 3px 0 #222;padding:2px 12px;cursor:default;white-space:nowrap}
.mp-chip-azul{background:#90CAF9}
.mp-chip[role="button"]{cursor:pointer}
.mp-chip[role="button"]:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #222}
#modal-sala-mp .mp-ban #sala-mp-banner-chips .mp-chip.mp-chip.mp-chip{min-height:0!important;padding:2px 12px!important;border:3px solid #222!important;box-shadow:3px 3px 0 #222!important;font-size:18px!important;letter-spacing:1px}
.mp-caja{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;background:linear-gradient(135deg,var(--pa),var(--pb));border:3px solid #222!important;border-radius:0!important;box-shadow:4px 4px 0 #222!important;padding:14px 16px;color:#222}
.mp-caja::before{content:"";position:absolute;inset:0;z-index:-1;--rl:color-mix(in srgb,var(--c2) 45%,transparent);background-image:linear-gradient(to right,var(--rl) 1px,transparent 1px),linear-gradient(to bottom,var(--rl) 1px,transparent 1px);background-size:20px 20px;animation:rs_rej 6s linear infinite}
.mp-pj{--pa:#B3E5FC;--pb:#80DEEA;--c1:#E1F8FC;--c2:#5FD3E2}
.mp-pm{--pa:#F3E5F5;--pb:#CE93D8;--c1:#FBEEFD;--c2:#B889DB}
.mp-pe{--pa:#FFF3D6;--pb:#FFD54F;--c1:#FFF9E3;--c2:#FFC46B}
.mp-pc{--pa:#FFE0F0;--pb:#FF9FE5;--c1:#FFF0F8;--c2:#FF6FD0}
.mp-pg{--pa:#E8F5E9;--pb:#A5D6A7;--c1:#F3FAF3;--c2:#78C47E}
#sala-mp-bloque-modo-arcade,#sala-mp-xp,#sala-mp-lista-nominar,#sala-mp-tabla-ronda,#sala-mp-mascota-ronda,#sala-mp-nominaciones-jugadores{border:3px solid #222!important}
.mp-h3{font-size:19px;letter-spacing:1px;margin:0 0 10px;color:#222;font-weight:700;line-height:1.2}
.mp-h3-dyn{font-weight:700}
.mp-sub{font-size:13px;font-weight:400;color:#555;line-height:1.3;display:block}
.mp-cab{min-width:0}
.mp-cab .mp-h3{margin-bottom:6px}

#modal-sala-mp .mp-caja .texto-ventana-modal,#modal-sala-mp .mp-caja .mp-h3{color:#222!important}
#modal-sala-mp .mp-caja .mp-sub{color:#555!important}
#sala-mp-vista-lobby>.mp-fila-botones>#btn-sala-mp-listo{flex:0 0 300px}
#sala-mp-vista-lobby>.mp-fila-botones>#btn-sala-mp-salir{flex:0 0 220px}
#sala-mp-vista-lobby>.mp-fila-botones>#btn-cerrar-sala-mp{flex:0 0 228px;width:228px}
#sala-mp-vista-nominar>.mp-fila-botones>button,#sala-mp-vista-esperando-ronda>.mp-fila-botones>button{flex:0 0 240px}
#modal-sala-mp button.mp-btn,#modal-sala-mp button.mp-btn:not(.x):not(.y):not(.z):not(#q){box-sizing:border-box;height:46px;min-height:46px!important;padding:0 18px!important;border:3px solid #222!important;border-radius:0!important;box-shadow:4px 4px 0 #222!important;display:flex;align-items:center;justify-content:center;font-size:20px!important;letter-spacing:1px;color:#222;white-space:nowrap;cursor:pointer;margin:0}
#modal-sala-mp button.mp-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #222!important}
#modal-sala-mp button.mp-btn-chico{height:40px;min-height:40px!important;box-shadow:none!important}
.mp-btn-rosa{background:#FF66B2!important;color:#fff!important}
.mp-btn-blanco{background:#fff!important}
.mp-btn-azul{background:#90CAF9!important}
.mp-btn-rojo{background:#FF8A80!important}
.mp-btn-verde{background:#A5D6A7!important}
.mp-btn-amarillo{background:#FFD54F!important}
.mp-btn-listo{background:linear-gradient(135deg,#FFECB3,#FFC107)!important}
.mp-btn-cerrar{background:#FFAB91!important}
#modal-sala-mp .tarjeta-modal>#btn-cerrar-sala-mp{align-self:flex-start;width:220px;margin:0 0 0 24px}
#modal-sala-mp input[type=text]{box-sizing:border-box;height:44px;width:100%;border:3px solid #222!important;border-radius:0!important;background:#fff!important;display:flex;padding:0 12px;font-size:18px;color:#222;box-shadow:none}
.mp-fila-botones{display:flex;gap:16px;align-items:center;width:100%}
.mp-fila-botones .mp-btn-cerrar{margin-left:auto!important}

.mp-h3-fila{display:flex;gap:10px;align-items:baseline}
#sala-mp-vista-elegir:not([style*="display:none"]):not([style*="display: none"]){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 24px!important;align-items:stretch}
#sala-mp-vista-elegir:not([style*="display:none"]):not([style*="display: none"])>.mp-desc{grid-column:1/-1;font-size:17px;font-weight:400;color:var(--rw-t);text-align:left;margin:0}
.mp-c-azar,.mp-c-crear,.mp-c-unirse{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;min-height:300px;padding:14px 16px!important;gap:12px}
#modal-sala-mp .mp-caja button.mp-btn.mp-btn{width:100%}
#modal-sala-mp .mp-caja-buscando button.mp-btn.mp-btn{width:auto}
.sala-mp-opcion-card{animation:salaMpOpcionEntrada .4s cubic-bezier(.34,1.56,.64,1) both}
.mp-rombo{width:70px;height:70px;rotate:45deg;border:3px solid #222;display:flex;align-items:center;justify-content:center;flex:none;margin:6px}
.mp-rombo b{rotate:-45deg;font-size:34px;color:#222}
.mp-rombo-amarillo{background:#FFD54F}.mp-rombo-blanco{background:#fff}
.mp-unirse-campo{width:100%}
#input-sala-mp-codigo{font-weight:700;letter-spacing:3px;text-transform:uppercase}
#sala-mp-unirse-msg{font-size:13px;color:#D81B60;text-align:center;min-height:16px;margin-top:6px}
#sala-mp-vista-elegir:not([style*="display:none"]):not([style*="display: none"])>#btn-cerrar-sala-mp{grid-column:1;justify-self:start;width:220px;margin:0}
#sala-mp-vista-buscando{justify-content:center}
.mp-caja-buscando{width:min(450px,100%);min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;gap:14px}
.mp-spin{width:70px;height:70px;border:5px solid #222;background:linear-gradient(135deg,#FF9FE5,#80DEEA);animation:mp_sp 1.6s linear infinite;flex:none}
@keyframes mp_sp{to{rotate:360deg}}
#sala-mp-vista-lobby:not([style*="display:none"]):not([style*="display: none"]){display:grid!important;grid-template-columns:minmax(0,1fr) 374px;grid-template-areas:"jug arc" "jug inv" "jug lis" "bot bot";gap:14px 24px!important;align-items:start}
#sala-mp-vista-lobby>.mp-caja-jugadores{grid-area:jug;align-self:stretch}
#sala-mp-vista-lobby>.mp-caja-arcade{grid-area:arc}
#sala-mp-vista-lobby>.mp-caja-invitar{grid-area:inv}
#sala-mp-vista-lobby>.mp-caja-listos{grid-area:lis}
#sala-mp-vista-lobby>.mp-fila-botones{grid-area:bot;margin-top:10px}
#sala-mp-lista-jugadores{display:flex;flex-direction:column;gap:12px;max-height:none!important;overflow:visible;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
#sala-mp-lista-jugadores::before{display:none!important}
#sala-mp-lista-jugadores .tarjeta-jugador-sala-mp{margin:0}
.mp-caja-arcade{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:96px}
.mp-caja-arcade .mp-h3{margin-bottom:4px;font-size:20px}
.mp-caja-invitar{padding:10px!important;min-height:92px;display:flex}
.mp-caja-invitar .mp-btn{width:100%;height:auto;min-height:70px!important;box-shadow:none!important}
#sala-mp-lobby-msg{font-size:19px;display:block}
#sala-mp-lobby-msg:empty{display:none}
#sala-mp-lobby-barra{display:block;height:18px;border:3px solid #222;background:#fff;box-sizing:border-box;margin:0 0 10px}
#sala-mp-lobby-barra b{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF80AB,#FFD54F,#80DEEA);background-size:200% 100%;animation:rs_brillo_mp 4s linear infinite;transition:width .35s ease}
@keyframes rs_brillo_mp{to{background-position:200% 0}}
body.reducir-efectos #sala-mp-lobby-barra b,body.reducir-efectos #sala-mp-ronda-barra b{animation:none}
.mp-caja-listos .mp-nota{margin-top:2px}
.mp-caja-listos.mp-pocos .mp-nota-min{display:none}
#sala-mp-acepta-cuenta{font-size:13px;color:#D81B60;font-weight:700;margin-bottom:6px}
#sala-mp-vista-nominar:not([style*="display:none"]):not([style*="display: none"]){display:grid!important;grid-template-columns:minmax(0,1fr) 374px;grid-template-areas:"can ele" "can nom" "can est" "bot .";gap:14px 24px!important;align-items:start}
#sala-mp-vista-nominar>.mp-caja-canciones{grid-area:can;display:flex;flex-direction:column;gap:8px;align-self:stretch}
#sala-mp-vista-nominar>.mp-caja-elecciones{grid-area:ele}
#sala-mp-vista-nominar>.mp-caja-nominaciones{grid-area:nom}
#sala-mp-vista-nominar>.mp-caja-estado-nom{grid-area:est;text-align:center}
#sala-mp-vista-nominar>.mp-fila-botones{grid-area:bot;margin-top:10px}
.mp-slots{display:flex;gap:8px}
#sala-mp-lista-nominar{display:flex;flex-direction:column;gap:6px;max-height:340px!important;overflow-y:auto;background:none!important;border:0!important;box-shadow:none!important;padding:0 4px 4px 0!important}
#sala-mp-lista-nominar::before{display:none!important}
#sala-mp-nominacion-elegida{background:#FFF59D;border:3px solid #222;box-shadow:3px 3px 0 #222;padding:10px 12px;font-size:17px;min-height:50px;color:#222;line-height:1.3}
#sala-mp-nominacion-elegida:empty{background:#eee;border-style:dashed;box-shadow:none}
#sala-mp-estado-nominaciones{font-size:19px;margin-bottom:4px;text-align:center;background:none;border:0;box-shadow:none;padding:0}
#sala-mp-nominar-descripcion{text-align:center}
#sala-mp-nominaciones-jugadores{padding:14px 16px}
#sala-mp-nominaciones-jugadores:not(:has(.sala-mp-nom-fila)){display:none}
.sala-mp-nom-titulo{font-size:19px;font-weight:700;letter-spacing:1px;margin-bottom:10px;color:#222}
.sala-mp-nom-fila{display:flex;flex-wrap:wrap;gap:16px}
.sala-mp-nom-j{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;max-width:84px;opacity:.55;color:#222}
.sala-mp-nom-j.listo{opacity:1}
.sala-mp-nom-j small{min-height:16px;font-size:13px;font-weight:700;color:#2E7D32}
.sala-mp-nom-av{width:44px;height:44px;border-radius:50%;border:3px solid #222;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.sala-mp-nom-nombre{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sala-mp-cancion-fila{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px!important;background:#fff!important;border:3px solid #222!important;border-radius:0!important;box-shadow:3px 3px 0 #222!important;color:#222;font-size:18px;cursor:pointer}
.sala-mp-cancion-fila.elegida{background:#FFF59D!important}
.sala-mp-tira-difs{display:flex;gap:8px;padding:2px 0 2px 12px;background:none!important;border:0!important;box-shadow:none!important}
.sala-mp-btn-dif{background:#fff!important;border:3px solid #222!important;border-radius:0!important;box-shadow:2px 2px 0 var(--color-dif,#222)!important;height:38px;padding:0 10px!important;display:flex;align-items:center;gap:8px;font-size:15px!important;min-height:0!important;width:auto!important}
#sala-mp-vista-esperando-ronda:not([style*="display:none"]):not([style*="display: none"]){display:grid!important;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"tab mas" "sig rea" "bot .";gap:14px 24px!important;align-items:start}
#sala-mp-vista-esperando-ronda>#sala-mp-tabla-ronda{grid-area:tab}
#sala-mp-vista-esperando-ronda>#sala-mp-mascota-ronda{grid-area:mas;align-self:stretch}
#sala-mp-vista-esperando-ronda>.mp-caja-siguiente{grid-area:sig}
#sala-mp-vista-esperando-ronda>.sala-mp-reacciones-barra{grid-area:rea;flex-wrap:wrap;justify-content:flex-start;gap:8px}
#sala-mp-vista-esperando-ronda>.mp-fila-botones{grid-area:bot}
#sala-mp-tabla-ronda{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
#sala-mp-mascota-ronda{flex-direction:column;align-items:center;justify-content:space-between;gap:14px;padding:18px 10px;text-align:center;min-height:320px}
#sala-mp-mascota-burbuja{position:relative;background:#FFFDE7;border:3px solid #222;box-shadow:3px 3px 0 #222;padding:6px 12px;font-size:18px;font-weight:bold;color:#222;min-height:20px}
#sala-mp-mascota-cara{width:120px;height:120px;border-radius:50%;border:5px solid #222;box-shadow:6px 6px 0 #222;display:flex;align-items:center;justify-content:center;font-size:20px;white-space:nowrap;animation:rs_bob .94s ease-in-out infinite;color:#222}
#sala-mp-mascota-lider{font-size:19px;font-weight:bold;min-height:18px;color:#222}
@keyframes rs_bob{50%{transform:translateY(-10px)}}
.sala-mp-fila-ronda{display:flex;align-items:center;gap:10px;min-height:66px;padding:0 12px!important;background:#fff!important;border:3px solid #222!important;border-radius:0!important;box-shadow:3px 3px 0 #222!important;color:#222}
.sala-mp-fila-ronda:has(.primero){background:#FFF59D!important}
.sala-mp-fila-ronda-puesto{font-size:26px;width:46px;flex:none;background:none;border:0;padding:0}
.sala-mp-fila-ronda-puesto.primero{background:none;border:0;padding:0}
.sala-mp-fila-ronda-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sala-mp-fila-ronda-nombre{font-size:20px}
.sala-mp-fila-ronda-precision,.sala-mp-fila-ronda-puntos-party{font-size:12px;color:#555}
.sala-mp-fila-ronda-stats{display:flex;align-items:center;gap:12px;flex:none}
.sala-mp-fila-ronda-puntaje{font-size:20px}
.mp-av{width:44px;height:44px;border-radius:50%;border:3px solid #222;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;overflow:hidden;color:#222;background:#fff}
.mp-av-apagado{opacity:.35}
.mp-caja-siguiente{padding:8px 14px!important}
.mp-caja-siguiente #sala-mp-resultado-ronda-msg{font-size:16px;margin:0 0 4px}
#sala-mp-ronda-barra{height:18px;border:3px solid #222;background:#fff;box-sizing:border-box}
#sala-mp-ronda-barra b{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF80AB,#FFD54F,#80DEEA);background-size:200% 100%;animation:rs_brillo_mp 4s linear infinite;transition:width .35s ease}
.sala-mp-reacciones-barra{display:flex;gap:8px}
#sala-mp-vista-final:not([style*="display:none"]):not([style*="display: none"]){display:grid!important;grid-template-columns:minmax(0,1fr) 334px;grid-template-areas:"tab xp" "tab mas" "tab rea" "bot bot";gap:14px 24px!important;align-items:start}
#sala-mp-vista-final>#sala-mp-tabla-final{grid-area:tab;align-self:end;display:flex;flex-direction:column;gap:14px;background:none;border:0;box-shadow:none;padding:0}
#sala-mp-vista-final>#sala-mp-xp{grid-area:xp}
#sala-mp-vista-final>.mp-final-mascota{grid-area:mas}
#sala-mp-vista-final>.sala-mp-reacciones-barra{grid-area:rea;flex-wrap:wrap}
#sala-mp-vista-final>.mp-fila-botones{grid-area:bot;margin-top:10px}
#sala-mp-vista-final>.mp-fila-botones>#btn-sala-mp-jugar-de-nuevo{flex:0 0 380px}
#sala-mp-vista-final>.mp-fila-botones>#btn-sala-mp-cerrar-final{flex:0 0 244px}
#sala-mp-vista-final>.mp-fila-botones>#btn-cerrar-sala-mp{flex:0 0 334px;width:334px}
.sala-mp-podio{display:flex;align-items:flex-end;justify-content:flex-start;gap:20px;margin:0}
.sala-mp-podio-p{flex:1;max-width:200px;border:3px solid #222;box-shadow:4px 4px 0 #222;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(135deg,#B3E5FC,#80DEEA);min-height:210px;color:#222}
.sala-mp-podio-1{background:linear-gradient(135deg,#FFF3D6,#FFD54F);min-height:270px}
.sala-mp-podio-3{background:linear-gradient(135deg,#FFE0F0,#FF9FE5);min-height:170px}
.sala-mp-podio-num{font-size:34px;color:#222}
.sala-mp-podio-nombre{font-size:20px;word-break:break-word;color:#222}
.sala-mp-podio-p small{font-size:13px;color:#444}
.sala-mp-jugador-fila{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 12px!important;background:#fff!important;border:3px solid #222!important;border-radius:0!important;box-shadow:3px 3px 0 #222!important;color:#222}
.sala-mp-jf-puesto{font-size:24px;width:42px}
.sala-mp-jf-nombre{flex:1;font-size:20px}
.sala-mp-jf-pts{font-size:20px}
#sala-mp-xp{padding:14px 16px;text-align:left}
#sala-mp-xp-puesto{font-size:19px;margin-bottom:6px}
.mp-xp-grande{font-size:24px;margin:0 0 8px;color:#222}
#sala-mp-xp .barra-xp-contenedor{height:18px;border:3px solid #222;background:#fff;margin:4px 0 10px;box-sizing:border-box}
#sala-mp-xp .res-mascota-xp{font-size:15px;color:#222}
.mp-final-mascota{display:flex;align-items:center;gap:16px}
.mp-mas-final{width:100px;height:100px;border-radius:50%;border:5px solid #222;box-shadow:6px 6px 0 #222;background:radial-gradient(circle at 35% 30%,#fff,#FFE0EC 45%,#F8BBD0);animation:rs_bob .94s ease-in-out infinite;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:#222;white-space:nowrap}
.mp-final-mascota-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.mp-burbuja{background:#FFFDE7;border:3px solid #222;box-shadow:3px 3px 0 #222;padding:6px 12px;font-size:16px;color:#222;text-align:center}
.sala-mp-btn-reaccion{border:3px solid #222!important;border-radius:0!important;box-shadow:2px 2px 0 #222!important;width:52px;height:52px;padding:0!important}
.sala-mp-sin-entrada .sala-mp-jugador-fila,.sala-mp-sin-entrada .sala-mp-fila-ronda,.sala-mp-sin-entrada .sala-mp-cancion-fila,.sala-mp-sin-entrada .tarjeta-jugador-sala-mp{animation:none!important}

@media (max-width:600px){
#sala-mp-vista-elegir,#sala-mp-vista-lobby,#sala-mp-vista-nominar,#sala-mp-vista-esperando-ronda,#sala-mp-vista-final{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}
#sala-mp-vista-elegir>*,#sala-mp-vista-lobby>*,#sala-mp-vista-nominar>*,#sala-mp-vista-esperando-ronda>*,#sala-mp-vista-final>*{grid-area:auto!important;grid-column:1!important}
.mp-fila-botones{flex-wrap:wrap}
.mp-fila-botones .mp-btn{flex:1 1 100%!important;width:100%!important}
#modal-sala-mp .mp-ban .encabezado-ventana-y2k{font-size:20px;min-height:64px;flex-wrap:wrap;gap:6px 10px;padding:8px 44px 8px 16px!important}
#sala-mp-banner-chips{margin-left:0}
.sala-mp-podio{flex-wrap:wrap}
}
#modal-sala-mp-vs{background:linear-gradient(160deg,var(--rw-a) 0%,var(--rw-b) 52%,var(--rw-c) 100%)}
#modal-sala-mp-vs::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(135deg,var(--rw-s) 0 36px,transparent 36px 72px);background-size:101.8234px 101.8234px;animation:rs_stp 6s linear infinite}
body.reducir-efectos #modal-sala-mp-vs::before{animation:none}
#modal-sala-mp-vs .tarjeta-modal{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 8px!important}
#modal-sala-mp-vs .mp-ban{position:relative;isolation:isolate;align-self:flex-start;width:calc(100% - 24px);margin:0 0 8px}
#modal-sala-mp-vs .mp-ban::before,#modal-sala-mp-vs .mp-ban::after{content:"";position:absolute;inset:-3px -8px -3px -3px;background:#222;clip-path:polygon(0 0,calc(100% - 3.8px) 0,calc(100% - 35.8px) 100%,0 100%);z-index:-1}
#modal-sala-mp-vs .mp-ban::before{translate:7px 7px}
#modal-sala-mp-vs .mp-ban .encabezado-ventana-y2k{background:linear-gradient(135deg,#F3E5F5,#CE93D8)!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important;width:100%!important;box-sizing:border-box;padding:18px 64px 18px 26px!important;font-size:26px;letter-spacing:2px;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)}
#sala-mp-countdown-cancion{font-size:20px!important;font-weight:700;letter-spacing:1px}
#sala-mp-nominaciones-jugadores{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#F3E5F5,#CE93D8);border:3px solid #222;box-shadow:4px 4px 0 #222;padding:12px}
#sala-mp-nominaciones-jugadores:not(:has(.sala-mp-nom-fila)){display:none}
.sala-mp-nom-titulo{font-size:19px;font-weight:700;letter-spacing:1px;margin-bottom:10px}
.sala-mp-nom-fila{display:flex;flex-wrap:wrap;gap:16px}
.sala-mp-nom-j{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;max-width:84px;opacity:.55}
.sala-mp-nom-j.listo{opacity:1}
.sala-mp-nom-j small{min-height:16px;font-size:13px;font-weight:700;color:#2E7D32}
.sala-mp-nom-av{width:44px;height:44px;border-radius:50%;border:3px solid #222;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.sala-mp-nom-nombre{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sala-mp-sin-entrada .sala-mp-jugador-fila,.sala-mp-sin-entrada .sala-mp-fila-ronda,.sala-mp-sin-entrada .sala-mp-cancion-fila,.sala-mp-sin-entrada .tarjeta-jugador-sala-mp{animation:none!important}
#sala-mp-banner-titulo{min-width:0}

#modal-bpm .tarjeta-modal {
  width: 700px !important
}
#modal-bpm .tarjeta-modal p,
#modal-bpm .tarjeta-modal label,
#modal-bpm .tarjeta-modal label span,
#modal-bpm #sub-panel-bpm > span {
  font-size: 17px !important;
  line-height: 1.3
}
#modal-bpm #texto-estado-detectar-bpm {
  font-size: 15px !important;
  line-height: 1.3
}
#modal-bpm .tarjeta-modal input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto
}
#modal-bpm #modal-input-bpm,
#modal-bpm #modal-input-compas {
  font-size: 18px !important;
  height: 40px;
  box-sizing: border-box
}
#modal-bpm #modal-input-bpm {
  width: 100px !important
}
#modal-bpm #modal-input-compas {
  width: 72px !important
}
#modal-bpm .btn-menu-grande {
  font-size: 17px !important;
  padding: 10px 18px !important;
  min-height: 46px
}
#modal-bpm .encabezado-ventana-y2k,
#modal-bpm .encabezado-ventana-y2k span {
  font-size: 22px !important
}
#fila-editor-modovisual.modovisual-on {
  grid-template-columns: var(--mv-ancho) minmax(var(--mv-col2), 1fr)
}

#sala-mp-lista-nominar .sala-mp-cancion-fila{gap:12px;min-width:0;overflow:hidden}
#sala-mp-lista-nominar .sala-mp-cancion-fila>span:first-child{
  flex:1 1 0!important;min-width:0;display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;white-space:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)
}
#sala-mp-lista-nominar .sala-mp-cancion-fila>span:first-child>.px-tn{flex:0 1 auto;min-width:0;overflow:hidden}
#sala-mp-lista-nominar .sala-mp-cancion-fila>span:first-child>span:not(.px-tn){flex:0 3 auto;min-width:0;overflow:hidden;font-size:13px}
#sala-mp-lista-nominar .sala-mp-cancion-fila>span:last-child{flex:none;white-space:nowrap;font-size:13px}
#sala-mp-lista-nominar .sala-mp-cancion-fila .px-parrafo-cont{flex-wrap:nowrap;max-width:none}
#sala-mp-nominacion-elegida .px-parrafo-cont{flex-wrap:nowrap;overflow:hidden}

#res-escenario #res-mp-espera:not([style*="display: none"]):not([style*="display:none"]){
  display:flex;align-items:center;justify-content:center;gap:16px
}
#res-escenario #res-mp-espera{top:auto;bottom:48px}
#res-escenario #res-mp-espera #res-mp-espera-texto{margin:0!important;flex:1 1 auto;min-width:0;text-align:center}
#res-escenario #res-mp-espera #btn-resultados-continuar{flex:none;margin:0}

#modal-sala-mp-vs{overflow:hidden}
#modal-sala-mp-vs .tarjeta-modal{
  width:1320px!important;max-width:none!important;max-height:none!important;
  overflow:visible!important;flex:none;min-width:0!important
}

#sala-mp-mascota-cara,.mp-mas-final{
  border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;
  overflow:visible
}
#sala-mp-mascota-cara .sala-mp-mascota-real{zoom:1.7;flex:none}
.mp-mas-final .sala-mp-mascota-real{zoom:1.4;flex:none}

#modal-sala-mp .tarjeta-modal:has(#sala-mp-vista-final:not([style*="display:none"]):not([style*="display: none"])){width:1240px!important}
#sala-mp-vista-final:not([style*="display:none"]):not([style*="display: none"]){grid-template-columns:minmax(0,1fr) 360px;gap:18px 28px!important}
#sala-mp-vista-final>#sala-mp-tabla-final{gap:20px}
.sala-mp-podio{justify-content:center;gap:24px;padding-top:10px}
.sala-mp-podio-p{max-width:260px;padding:14px 10px 16px;gap:8px;min-height:230px}
.sala-mp-podio-1{min-height:300px}
.sala-mp-podio-3{min-height:190px}
.sala-mp-podio-p .sala-mp-mascota-real{zoom:1.25;margin:14px 0 8px;flex:none}
.sala-mp-podio-1 .sala-mp-mascota-real{zoom:1.5;margin:16px 0 10px}
#sala-mp-vista-final .sala-mp-jugador-fila{min-height:60px}

.texto-carga-cancion > span:first-child {
  display: inline-flex;
  justify-content: center;
  text-align: center
}
.texto-carga-cancion .puntos-espera-gameover {
  position: absolute;
  left: 100%;
  top: 0;
  white-space: nowrap;
  text-align: left
}

body:has(> #modal-cuenta[style*="display: flex"]) > *:not(#modal-cuenta),
body:has(> #modal-cuenta[style*="display: flex"]) > *:not(#modal-cuenta) *,
body:has(> #modal-cuenta[style*="display: flex"]) > *:not(#modal-cuenta) *::before,
body:has(> #modal-cuenta[style*="display: flex"]) > *:not(#modal-cuenta) *::after {
  animation-play-state: paused !important
}