: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.4s infinite alternate;
  z-index: 5
}
@keyframes parpadeo-glitch {
  0% {
    filter: hue-rotate(0deg) brightness(1);
    transform: translate(0, 0) skew(0deg)
  }
  20% {
    transform: translate(-2px, 2px) skew(10deg)
  }
  40% {
    filter: hue-rotate(90deg) brightness(1.8);
    transform: translate(2px, -2px) skew(-10deg)
  }
  60% {
    transform: translate(-1px, 1px) skew(5deg)
  }
  80% {
    filter: hue-rotate(180deg) brightness(1.4);
    transform: translate(1px, -1px) skew(-5deg)
  }
  100% {
    filter: hue-rotate(270deg) brightness(1);
    transform: translate(0, 0) skew(0deg)
  }
}
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: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none
}
#overlay-crt-scanlines {
  position: fixed;
  top: -40px;
  left: 0;
  width: 100vw;
  height: calc(100vh + 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: 100vw;
  height: 100vh;
  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: 100vw;
  height: 100vh;
  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: 260px !important;
  max-width: 92vw !important;
  border-color: #FF4081 !important
}
.cmd-bienvenida-continuar {
  width: fit-content !important;
  min-width: 420px !important;
  max-width: 92vw !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
}
.bienvenida-kkr-logo-img {
  display: block;
  max-width: 100%;
  height: 76px;
  width: auto;
  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;
  align-items: center;
  justify-content: center;
  gap: 18px
}
.cmd-bienvenida-mascota-cara {
  font-size: 22px;
  color: #FFD1E3;
  text-shadow: 2px 2px 0px #000;
  animation: bienvenidaMascotaRebote 0.9s ease-in-out infinite
}
.cmd-bienvenida-mascota-cara:nth-child(1) {
  color: #FF80AB;
  animation-delay: 0s
}
.cmd-bienvenida-mascota-cara:nth-child(2) {
  color: #84FFFF;
  animation-delay: 0.15s
}
.cmd-bienvenida-mascota-cara:nth-child(3) {
  color: #FFF59D;
  animation-delay: 0.3s
}
@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: 230px !important;
    max-width: 92vw !important
  }
  .cmd-bienvenida-continuar {
    width: fit-content !important;
    min-width: 260px !important;
    max-width: 92vw !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
  }
  .bienvenida-kkr-logo-img {
    height: 56px
  }
  .cmd-bienvenida-mascota-cara {
    font-size: 16px
  }
  .cmd-bienvenida-mascotas {
    gap: 10px
  }
}
@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: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 99999;
  overflow: hidden
}
#boot-fase-terminal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  box-sizing: border-box;
  padding: 26px 30px;
  font-family: 'Consolas','Courier New',monospace
}
#boot-koreos-texto {
  margin: 0;
  color: #33FF66;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  text-shadow: 0 0 5px rgba(51,255,102,0.7)
}
#boot-koreos-gato-arte {
  position: absolute;
  top: 26px;
  right: 26px;
  margin: 0;
  color: #33FF66;
  font-size: 8px;
  line-height: 1.05;
  white-space: pre;
  text-shadow: 0 0 5px rgba(51,255,102,0.6);
  opacity: 0.9;
  pointer-events: none
}
@media (max-width: 640px) {
  #boot-koreos-gato-arte {
    font-size: 6px;
    right: 14px;
    top: 20px
  }
}
#boot-fase-xp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center
}
#boot-koreos-centro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px
}
#boot-koreos-titulo {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 54px;
  letter-spacing: 5px;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 0 16px rgba(255,255,255,0.55)
}
.barra-carga-xp {
  width: 260px;
  height: 16px;
  background: #000000;
  border: 2px solid #FFFFFF;
  border-radius: 0px;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden
}
.barra-carga-xp-segmentos {
  position: relative;
  width: 100%;
  height: 100%
}
.barra-carga-xp-segmentos span {
  position: absolute;
  top: 0;
  height: 100%;
  width: 34px;
  border-radius: 0px;
  background: linear-gradient(90deg, #1565C0, #90CAF9, #1565C0);
  animation: xpCargaMover 1.3s ease-in-out infinite;
  left: -40px
}
.barra-carga-xp-segmentos span:nth-child(1) {
  animation-delay: 0s
}
.barra-carga-xp-segmentos span:nth-child(2) {
  animation-delay: 0.18s
}
.barra-carga-xp-segmentos span:nth-child(3) {
  animation-delay: 0.36s
}
@keyframes xpCargaMover {
  0% {
    left: -40px
  }
  100% {
    left: 100%
  }
}
#boot-koreos-subtexto {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: #AAAAAA;
  margin: 0
}
#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: 100vw;
  height: 100vh;
  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(100vw - 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(100vw - 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: flex-start;
  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(100vw - 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, 80vw);
  height: min(390px, 80vw);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  z-index: 9060;
  pointer-events: none
}
@media (max-height: 700px) {
  .corral-mascotas-centro {
    width: min(285px, 70vh);
    height: min(285px, 70vh)
  }
  .decoracion-flotante-banners {
    display: none !important
  }
}
@media (max-height: 420px) {
  .corral-mascotas-centro {
    width: min(105px, 27vh);
    height: min(105px, 27vh)
  }
  .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-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
}
@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(100vw - 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: 14px
}
#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: clamp(88px, 20vw, 170px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: clamp(20px, 5vw, 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, 4.6vw, 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: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px
}
.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: flex;
  flex-wrap: wrap;
  gap: 8px
}
.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
}
.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: 100vw;
  height: 100vh;
  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(4, 1fr);
  gap: 8px
}
.medalla-seleccionable {
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  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
}
.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.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: 34vw;
  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, 4.2vw, 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, 3.6vw, 21px)
}
.arcade-gato-presentador-girasol {
  top: -8%;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: clamp(13px, 3.6vw, 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: 90vw;
  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: 46vw
}
.cartel-habilidad-detalle {
  font-size: 12px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw
}
.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: 94vw;
  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: 94vw;
  height: 85vh;
  overflow: hidden
}
#contenedor-juego.modo-play-16-9 {
  width: min(97vw, 95vh * 16 / 9);
  height: min(95vh, 97vw * 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: 94vw;
  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: 260px;
  max-width: 420px;
  height: 85vh;
  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%;
  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;
  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: 100%;
  margin-bottom: 0;
  z-index: 60;
  max-height: 92%;
  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 {
  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: 94vw
  }
}
#modal-sala-mp button:not(.btn-sala-mp-expulsar):not(.btn-sala-mp-agregar-amigo):not(.sala-mp-btn-reaccion):not(#btn-sala-mp-copiar-codigo) {
  padding: 13px 14px;
  font-size: 14px;
  min-height: 44px;
  box-sizing: border-box;
}
#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: 92vw;
  height: 100vh;
  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: 100vw;
  height: 100vh;
  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: 100vw;
  height: 100vh;
  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: 42vw
}
.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(92vw, 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 {
  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: 100vw;
  height: 100vh;
  height: 100dvh;
  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, 12vw, 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) {
  #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, 30vw, 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, 19.5vw, 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) {
  .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, 2.2vw, 20px)
}
.grid-personalizar-perfil {
  gap: clamp(8px, 2vw, 18px)
}
.columna-personalizar-perfil {
  gap: clamp(6px, 1.6vw, 14px)
}
.cabecera-columna-personalizar-sticky {
  gap: clamp(6px, 1.6vw, 16px);
  padding-bottom: clamp(10px, 2.4vw, 26px)
}
.mini-ventana-cuerpo {
  padding: clamp(5px, 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, 0.6vw, 4px) clamp(5px, 1.2vw, 8px);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: clamp(12px, 2vw, 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 {
  position: absolute;
  top: 2%;
  left: 50%;
  right: auto;
  margin: 0;
  transform: translate(-50%, -18px) scale(0.82);
  transform-origin: center top;
  scale: var(--escala-ui-juego, 1);
  width: max-content;
  min-width: min(160px, 62vw);
  max-width: 80%;
  background: #FFFDE7;
  border: 3px solid #222222;
  box-shadow: 4px 4px 0px #222222;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  will-change: transform, opacity
}
#banner-combo-celebracion.banner-combo-activo {
  animation: bannerComboAparecer 1.5s cubic-bezier(.34,1.56,.64,1) both
}
.banner-combo-titulo {
  width: 100%;
  background: linear-gradient(90deg, #FF4081 0%, #FF80AB 100%);
  border-bottom: 2px solid #222222;
  padding: 4px 9px;
  box-sizing: border-box;
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFFDE7;
  letter-spacing: 0.5px;
  text-align: center
}
.banner-combo-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 16px 12px 16px
}
#banner-combo-texto {
  font-family: 'Pixelify Sans',sans-serif;
  font-size: 26px;
  font-weight: bold;
  color: #222222;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.08);
  white-space: nowrap
}
#banner-combo-cara {
  font-size: 17px;
  font-weight: bold;
  color: #D81B60;
  white-space: nowrap
}
@keyframes bannerComboAparecer {
  0% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.82)
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1.08)
  }
  22% {
    transform: translate(-50%, 0px) scale(1)
  }
  80% {
    opacity: 1;
    transform: translate(-50%, 0px) scale(1)
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -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: 90vw;
  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, 92vw);
  max-height: 90vh;
  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(460px, 92vw)
}
#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), 115vh) 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: min(86vw, 480px);
  max-height: 68vh;
  background: rgba(4, 12, 6, 0.72);
  border: 2px solid #39FF14;
  box-shadow: 0 0 22px rgba(57,255,20,0.45), 4px 4px 0px rgba(0,0,0,0.5);
  font-family: 'Consolas','Courier New',monospace;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  overflow: hidden;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px)
}
.arcade-terminal-hackeo.visible {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1)
}
.arcade-terminal-hackeo-titulo {
  background: linear-gradient(90deg,#0D3B12,#0A2A0D);
  color: #A8FFB0;
  border-bottom: 1px solid #39FF14
}
.arcade-terminal-hackeo-cuerpo {
  padding: 12px 14px 14px;
  position: relative
}
.arcade-terminal-hackeo-cuerpo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(57,255,20,0.05) 0px, rgba(57,255,20,0.05) 1px, transparent 1px, transparent 3px);
  pointer-events: none
}
.arcade-terminal-hackeo-lineas {
  color: #39FF14;
  font-size: 12px;
  line-height: 1.7;
  min-height: 60px;
  text-shadow: 0 0 5px rgba(57,255,20,0.55)
}
.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: 12px;
  background: rgba(57,255,20,0.12);
  border: 1px solid #39FF14;
  overflow: hidden
}
.arcade-terminal-hackeo-barra-relleno {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg,#39FF14 0px,#39FF14 6px,#1B7A0C 6px,#1B7A0C 12px);
  transition: width 0.25s linear
}
.arcade-terminal-hackeo-barra-pct {
  color: #39FF14;
  font-size: 11px;
  min-width: 30px;
  text-align: right
}
@media (max-width: 640px) {
  .arcade-terminal-hackeo {
    width: min(92vw, 400px)
  }
  .arcade-terminal-hackeo-lineas {
    font-size: 11px
  }
}
@keyframes confeti-pixel-caida {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    transform: translate(var(--desvio-x, 0px), 115vh) 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(220px, 17.7vw, 340px);
  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 {
  position: relative;
  z-index: 1;
  padding: 16px;
  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: 28px 1fr auto;
  gap: 6px;
  align-items: center;
  background: linear-gradient(135deg, #B3E5FC 0%, #FFD6E8 100%);
  border: 2px solid #222;
  box-shadow: 2px 2px 0px #222;
  padding: 5px 8px;
  font-size: 12px;
  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-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: 94vw;
  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::-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
}
#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 {
  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
}
.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
}
#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(100vw - 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: 11px;
  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-ajuste-nota {
  display: none;
  position: absolute;
  top: 58px;
  left: 15px;
  right: 15px;
  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: 85px;
  left: 15px;
  right: 15px;
  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-ui-juego, 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: 100vw;
  height: 100vh;
  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: 100vw;
  height: 100vh;
  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: 100vw;
  height: 100vh;
  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 {
  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(92vw, 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, 5.5vw, 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: 60vw;
  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, 4.4vw, 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: 100vw;
  height: 100vh;
  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-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: 100vw;
  height: 100vh;
  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 {
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  width: 42px;
  height: 42px;
  font-size: 18px;
  z-index: 491;
}
#boton-vel-menos-tactil {
  left: calc(50% - 30px);
}
#boton-vel-mas-tactil {
  left: calc(50% + 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: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 {
  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, 2.2vw, 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: 100vw;
  height: 100vh;
  height: 100dvh;
  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(92vw, 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 {
  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-pausa .btn-menu-grande.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 {
  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 {
  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-pausa .btn-menu-grande.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 {
    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: 44vh;
  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: 104px;
  height: 104px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none
}
.rango-ola-grande .emblema-rango {
  width: 84px;
  height: 84px
}
.tarjeta-record-panel .rango-ola-grande .emblema-rango {
  width: 62px;
  height: 62px
}
.emblema-rango.emblema-rango-mini {
  width: 28px;
  height: 28px
}
.sala-mp-fila-ronda-rango-emblema {
  background: transparent !important;
  border: none !important
}
.sala-mp-fila-ronda-rango .emblema-rango.emblema-rango-mini {
  width: 26px;
  height: 26px
}