@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: inherit;
  }

  * {
    color-scheme: dark;
  }
}



body {
  overflow: hidden; /* Bloquea el scroll vertical */
}


* {
  box-sizing: border-box;
  user-select: none;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #000;
  overscroll-behavior: contain;
}

p, h1, h2, h3, h4 {
  display: inline-block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pix {
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--m)) !important; 
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.toy-box {
  position: absolute;
  top: -50px;
  width: 320px;
  height: 64px;
}

.capsule-machine {
  position: relative;
  width: 320px;
  height: 500px; 
  --m: 4;
  --w: 80px;
  --h: 125px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAB9CAYAAAA1I+RFAAAAAXNSR0IArs4c6QAAAchJREFUeF7t08Ftg0AARcFsPS7QNbhA10O0SGuR2Ipw3tHDgcOKx2H4jK8X13a/bq/OP/1sXG7jt8GPA3DnJnKEfADCO4e3nlqIOyC89/COiAD/Z7dXc4XD+oLgRAQIsAnE2gIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArE3AIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArE3AIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArE3AIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArE3AIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArE3AIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArE3AIBRoGYWyDAKBBzCwQYBWJugQCjQMwtEGAUiLkFAowCMbdAgFEg5hYIMArEfMx+u1+3+J6PzMflNgCGT/8AtML3FSferPbbuvzK5yAX3hMgyL8Bj3DryW9l1KLLccC7FgAAAABJRU5ErkJggg==);
}

.capsule-machine.shake {
  animation: forwards shake 0.5s;
}

@keyframes shake {
  0%, 40%, 80% { 
    margin-left: 5px;
  }
  20%, 60%, 100% {
    margin-left: -5px;
  }
}

.capsule-machine::after {
  position: absolute;
  content: '';
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--m)) !important; 
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  background-image: url(data:image/png;base64,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);
  pointer-events: none;
  z-index: 1;
  transition: 0.5s;
}

.capsule-machine.see-through::after,
.capsule-machine.see-through .circle {
  opacity: 0.3;
}

.wrapper.lock {
  pointer-events: none;
}

.lock-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 1s;
  background-color: transparent;
  pointer-events: none;
}

.wrapper.lock .lock-cover {
  background-color: #676d74;
  opacity: 0.8;
  z-index: 10;
}

.capsule {
  position: absolute;
  left: calc((var(--w) * var(--m)) / var(--offset));
  top: calc((var(--h) * var(--m)) / var(--offset));
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  display: flex;
  align-items: center;
  justify-content: center;
}

.lid,
.base {
  position: absolute;
  --h-m: var(--m) / 2;
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--h-m));
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--h-m)) !important; 
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.lid {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAAXNSR0IArs4c6QAAADlJREFUKFNjZEAD/////48uhsxnZGRkROHDODCN6ApwWQBTBzYNpJmQRmwGgfQwkqMZ2dWjBvz/DwCs+Tv1GZ2dFQAAAABJRU5ErkJggg==);
  top: 0;
  --start: 0;
  --end: -100px;
}

.base {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAAXNSR0IArs4c6QAAADBJREFUKFNj/O/Y/p+BAsA4agADIyj8yA0Hxv2VjGADyDEEpBmkD24AsQbBNMLUAwDsrRnng7/G/QAAAABJRU5ErkJggg==);
  bottom: 0;
  --start: 0;
  --end: 100px;
}

.base.green {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAM0lEQVQokWNkmKz3n4ECwESJ5mFiACMDAwMD2QGZe4mREc4h1ZDcS4wIFyADQgZBNcIAABJ/Cs2DyWyyAAAAAElFTkSuQmCC);
}

.base.pink {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAAXNSR0IArs4c6QAAADBJREFUKFNj/O/Y/p+BAsA4agADIyj8yA0Hxv2VjGADyDEEpBmkD24AsQbBNMLUAwDsrRnng7/G/QAAAABJRU5ErkJggg==);
}

.base.red {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAAXNSR0IArs4c6QAAADBJREFUKFNj/G9m9p+BAsA4agADIyj8yA0HxlOnGMEGkGMISDNIH9wAYg2CaYSpBwAEFBgbcBUePAAAAABJRU5ErkJggg==);
}

.base.blue {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAAXNSR0IArs4c6QAAADBJREFUKFNj1Nn36D8DBYBx1AAGRlD4kRsOV5zkGMEGkGMISDNIH9wAYg2CaYSpBwAPYhoAi8QRLQAAAABJRU5ErkJggg==);
}
/* #2cbee2 */

.capsule-wrapper.open .lid,
.capsule-wrapper.open .base {
  animation: open-capsule forwards 1s;
}

@keyframes open-capsule {
  0% {
    transform: translateY(var(--start));
    opacity: 1;
  }
  100% {
    transform: translateY(var(--end));
    opacity: 0;
  }
}

.capsule-wrapper {
  /* border: 1px solid hotpink; */
  position: absolute;
  --m: 4;
  --w: 16px;
  --h: 16px;
  --offset: -2;
  width: 0;
  height: 0;
  transition: 0.05s;
  cursor: pointer;
}

.capsule-wrapper.enlarge {
  --m: 8;
  z-index: 11;
  transition: 0.8s;
  pointer-events: none;
}

.capsule-wrapper.enlarge .toy {
  --m: 4;
}

.capsule-wrapper.enlarge.open .toy {
  --m: 6;
}

.capsule-wrapper.enlarge.open .toy.collected {
  --m: 2;
}

.line-start,
.line-end {
  position: absolute;
  height: 0;
  width: 0;
}

.line {
  position: absolute;
  height: 1px;
  width: 0;
  border-top: solid #ff3636 4px;
}

.circle {
  position: absolute;
  bottom: 30px;
  left: 26px;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  z-index: 5;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA1ElEQVRYhe2ZwQ3DIAxFIYN0AkbpuBklE2QQp6cfUQrUqSP4lfxOCRjx5FzgJwYDe0qHpu6xbfHXPS4vzKWey6Jas4qcz1dl1cUQ00q1gKxW9GvRXWIlWtHu5J7ScbdYySrSlWxOjJADPcnq4Eg50JL8GJghB2qSby8z5UApOddGwWnK0D2Qd5HDqEMMgat7AF3ksqpALxgZPy9YRfg76IJWXNCKC1pxQSt+WLBCL+gnait+q7PyXxd3QB19AOrwCFDHb4A6wMyhjYBLaEP0GiN+Q7wAf9WZcy2yNKAAAAAASUVORK5CYII=);
  --w: 40px;
  --h: 40px;
  --m: 4;
  transition: 0.5s;
}

.circle::after {
  position: absolute;
  top: -10px;
  right: -22px;
  content: '';
  --w: 15px;
  --h: 15px;
  --m: 4;
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAYUlEQVQokWN8FKDznwEJyG24wshAJGBE10yKISgKsBmEzxCsEsR6Ba/TkA3BZgBBf+EzgImQZnx+JqgZlyuI1ozLdpJsRredaM3YbCfZZmRAVDrGlYSJzgSUZCC4AciGAAB/YSzP/fJtgwAAAABJRU5ErkJggg==);
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--m)) !important; 
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.handle {
  position: relative;
  width: 160px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.handle::after {
  position: absolute;
  top: -7px;
  content: '';
  --w: 40px;
  --h: 16px;
  --m: 4;
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAQCAYAAABk1z2tAAAAt0lEQVRIidWWuxGAIAxAwXMNrSxxGCZlGC2pdBCt8DAkBBE8fI18QvL0FJGiAJtSBzY+rqt8mzsrQSA0EYH23s0RTlqQLMSRIYwGFBPiSBCWnwpxIMJyU+qoJTSY5Wrvemb7AVaIvkRiqpBrx0TgekhHTex6vpLBK1UIMpglKI6NxSAFXbLYnC+Fxfo36Y89gRT0C7r203eIeoKxPqTqR/Ia+4dtBotrbqPmaO5Xx9HcYYGj5nHrBLLLe8dTmL+aAAAAAElFTkSuQmCC);
  background-size: calc(var(--w) * var(--m)) calc(var(--h) * var(--m)) !important; 
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.cover.white {
  position: absolute;
  bottom: 116px;
  width: 100%;
  height: calc(220px - 116px);
  background-color: white;
  z-index: 1;
  transition: 0.5s;
}

button {
  border: 0;
  background-color: white;
  padding: 4px 8px;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 10px;
  margin-right: 10px;
  color: black;
}

.button-wrapper {
  position: absolute;
  bottom: 80px;
  z-index: 10;
}

.toy {
  position: absolute;
  --w: 16px;
  --h: 16px;
  --m: 2;
  width: calc(var(--w) * var(--m));
  height: calc(var(--h) * var(--m));
  z-index: -1;
  transition: 0.5s;
}




.cover {
  position: absolute;
  z-index: 4;
  cursor: auto;
}


.cover.a {
  top: 0;
  left: 0;
  width: 320px;
  height: 280px;
}

.cover.b {
  top: 280px;
  left: 0;
  width: 212px;
  height: 220px;
}

.cover.c {
  top: 280px;
  left: 212px;
  width: 108px;
  height: 108px;
}

.cover.d {
  bottom: 0;
  left: 212px;
  width: 80px;
  height: 24px;
}

.cover.e {
  bottom: 0;
  left: 292px;
  height: 112px;
  width: 28px;
}

.sign {
  position: absolute;
  color: white;
  bottom: 40px;
  font-size: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}



/* pantalla.completa */

a:hover {
  text-decoration: underline;
}




/* Estilos para el mensaje tipo cómic */

@keyframes popUp {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Estilos para los juguetes */
.toy.collected {
    cursor: pointer;
    position: relative;
    z-index: 100;
}

.toy.collected:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}


.toy.collected.fullscreen {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(8) !important;
    z-index: 1000;
}




.toy.collected {
    --m: 2;
    cursor: pointer;
    z-index: 1000 !important;
    pointer-events: auto !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}



.toy.collected:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

.toy.collected.fullscreen {
    position: fixed !important;
    /* Centramos respecto a la máquina */
    top: 40% !important; /* Ajustamos vertical para que quede en el centro de la máquina */
    left: 50% !important;
    transform: translate(-50%, -50%) scale(8) !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.3s ease;
    pointer-events: auto;
    transform-origin: center center !important;
}


.toy.collected.fullscreen {
    transform-origin: center center !important;
}


.fullscreen-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #676d74;
    opacity: 0.8;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.comic-message {
    position: absolute;
    background-color: white;
    border: 2px solid black;
    padding: 5px 10px;
    border-radius: 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: black;
    pointer-events: none;
    z-index: 10000;
}

@keyframes popUp {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


.toy.duplicate {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(10) !important;
    z-index: 9999 !important;
    pointer-events: none;
}




/* Estilos para el modal de felicitaciones */
.congrats-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.congrats-modal.active {
  display: flex;
}

.congrats-modal-content {
  background-color: black;
  color: white;
  padding: 20px;
  border-radius: 10px;
  border: 3px solid #ffcc00;
  text-align: center;
  font-family: 'Press Start 2P', sans-serif;
  max-width: 90%;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.7);
  animation: modal-appear 0.5s ease-out;
}

@keyframes modal-appear {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.congrats-modal-content h2 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #ffcc00;
}

.congrats-modal-content p {
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.5;
}

.congrats-modal-buttons {
  display: flex;
  justify-content: center;
}

.congrats-modal-buttons button {
  background-color: #ffcc00;
  color: black;
  border: none;
  padding: 10px 15px;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.congrats-modal-buttons button:hover {
  background-color: #fff;
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 480px) {
  .congrats-modal-content {
    padding: 15px;
    width: 85%;
  }
  
  .congrats-modal-content h2 {
    font-size: 14px;
  }
  
  .congrats-modal-content p {
    font-size: 10px;
  }
  
  .congrats-modal-buttons button {
    padding: 8px 12px;
    font-size: 8px;
  }
}

/* Estilo para el botón de reinicio */
.reload {
  background: none !important;
  border: none;
  color: white;
  background-color: #111 !important;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.reload:hover {
  opacity: 0.7;
}

/* Modo debug - visual */
.debug-mode .capsule-wrapper {
  border: 1px dashed red;
}

.debug-mode .circle::before {
  content: "DEBUG";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 10px;
}

/* Inhabilitar selección para simular app real */
body {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* No compatible */
  touch-action: manipulation;  /* Previene comportamiento de zoom al tocar */
}

/* Mejora visual para el sistema de idioma */
[data-i18n]::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  transition: width 0.3s;
}

[data-i18n]:hover::after {
  width: 100%;
  height: 2px;
  background-color: #ffcc00;
}