/* Compact shared shell for modal mini games (Snake, Goose Run, and Pong). */
body.mini-game-lock--body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.mini-game-lock--active .mini-game-lock__overlay {
  padding: clamp(0.45rem, 1.5vw, 0.9rem) !important;
  overflow: hidden !important;
  background: rgba(21, 17, 12, 0.76) !important;
}

.mini-game-lock--active .mini-game-lock__dialog {
  width: min(940px, 100%) !important;
  height: min(860px, calc(100dvh - clamp(0.9rem, 3vw, 1.8rem))) !important;
  max-height: calc(100dvh - clamp(0.9rem, 3vw, 1.8rem)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.mini-game-lock--active .mini-game-card {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: clamp(0.7rem, 1.8vw, 1.15rem) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(0.5rem, 1.4vh, 0.85rem) !important;
  overflow: hidden !important;
  border: 2px solid #15110c !important;
  border-radius: 22px !important;
  color: #15110c !important;
  background: linear-gradient(180deg, #fffdf5, #fff0c7) !important;
  box-shadow: 8px 8px 0 #15110c !important;
}

.mini-game-lock--active .mini-game-card::after {
  display: none !important;
}

.mini-game-lock--active .mini-game-lock__close {
  top: clamp(0.9rem, 2.3vw, 1.35rem) !important;
  right: clamp(0.9rem, 2.3vw, 1.35rem) !important;
  width: 44px !important;
  height: 44px !important;
  border: 2px solid #15110c !important;
  color: #15110c !important;
  background: #fffdf0 !important;
  box-shadow: 3px 3px 0 #15110c !important;
}

.mini-game-lock--active .mini-game-card__header {
  width: min(100%, 800px) !important;
  padding-inline: 3.2rem !important;
  display: grid !important;
  justify-items: center !important;
  gap: 0.32rem !important;
  text-align: center !important;
}

.mini-game-lock--active .mini-game-card__header h2 {
  margin: 0 !important;
  color: #15110c !important;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem) !important;
  line-height: 1.05 !important;
}

.mini-game-lock--active .mini-game-card__header p {
  margin: 0 !important;
  color: #71583b !important;
  font-size: clamp(0.8rem, 1.8vw, 0.9rem) !important;
  line-height: 1.3 !important;
}

.mini-game-lock--active .mini-game-card__hud {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.35rem 0.65rem !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.35rem 0.85rem !important;
  border: 1px solid rgba(21, 17, 12, 0.15) !important;
  border-radius: 999px !important;
  color: #3b2b18 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  font-size: clamp(0.74rem, 1.7vw, 0.88rem) !important;
  line-height: 1.15 !important;
}

.mini-game-lock--active .mini-game-card__hud span,
.mini-game-lock--active .mini-game-card__hud strong {
  color: #15110c !important;
  font-size: inherit !important;
}

.mini-game-lock--active .mini-game-card__stage {
  width: min(100%, 800px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: auto !important;
  aspect-ratio: 12 / 7 !important;
  align-self: center !important;
  overflow: hidden !important;
  border: 3px solid #15110c !important;
  border-radius: 16px !important;
  background: #1a130b !important;
  box-shadow: 6px 7px 0 rgba(21, 17, 12, 0.14) !important;
}

.mini-game-lock--active .mini-game-card__stage--square {
  width: min(100%, 520px) !important;
  height: min(52dvh, 520px) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

.mini-game-lock--active .mini-game-card__canvas,
.mini-game-lock--active .mini-game-card__stage > canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: fill !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  touch-action: none !important;
}

.mini-game-lock--active .mini-game-controls {
  width: min(100%, 800px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 0.38rem !important;
}

.mini-game-lock--active .mini-game-controls__layout {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.5rem, 1.8vw, 0.9rem) !important;
}

.mini-game-lock--active .mini-game-controls__pad {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.mini-game-lock--active .mini-game-controls__dpad {
  display: grid !important;
  grid-template-columns: repeat(3, 42px) !important;
  grid-template-rows: repeat(3, 42px) !important;
  gap: 0.24rem !important;
  padding: 0.35rem !important;
  border: 1px solid rgba(21, 17, 12, 0.14) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: none !important;
}

.mini-game-lock--active .mini-game-controls__dpad::after {
  background: #ffd92e !important;
}

.mini-game-lock--active .mini-game-controls__actions {
  flex: 0 1 430px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

.mini-game-lock--active .mini-game-controls__actions--stack {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mini-game-lock--active .mini-game-controls__actions:only-child {
  flex-basis: 430px !important;
  width: min(100%, 430px) !important;
}

.mini-game-lock--active .mini-game-controls__button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0.62rem 0.72rem !important;
  border: 2px solid #15110c !important;
  border-radius: 999px !important;
  color: #15110c !important;
  background: #fffdf0 !important;
  box-shadow: 3px 3px 0 #15110c !important;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  touch-action: manipulation !important;
}

.mini-game-lock--active .mini-game-controls__button--accent {
  color: #15110c !important;
  background: #ffd92e !important;
}

.mini-game-lock--active .mini-game-controls__button[data-direction] {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
}

.mini-game-lock--active .mini-game-controls__button--spacer {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.mini-game-lock--active .mini-game-controls__button:active,
.mini-game-lock--active .mini-game-controls__button.is-active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #15110c !important;
}

.mini-game-lock--active .mini-game-controls__note {
  width: 100% !important;
  margin: 0 !important;
  color: #71583b !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Pong only needs vertical movement, so the two useful controls form a rail. */
.mini-game-lock--active .mini-game-controls--pong .mini-game-controls__dpad {
  grid-template-columns: repeat(2, 52px) !important;
  grid-template-rows: 44px !important;
}

.mini-game-lock--active .mini-game-controls--pong .mini-game-controls__dpad::after,
.mini-game-lock--active .mini-game-controls--pong .mini-game-controls__button--spacer {
  display: none !important;
}

.mini-game-lock--active .mini-game-controls--pong .mini-game-controls__button[data-direction] {
  position: static !important;
  grid-row: 1 !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 44px !important;
}

.mini-game-lock--active .mini-game-controls--pong .mini-game-controls__button[data-direction='up'] {
  grid-column: 1 !important;
}

.mini-game-lock--active .mini-game-controls--pong .mini-game-controls__button[data-direction='down'] {
  grid-column: 2 !important;
}

@media (max-width: 680px) {
  .mini-game-lock--active .mini-game-lock__overlay {
    padding: 0 !important;
  }

  .mini-game-lock--active .mini-game-lock__dialog {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .mini-game-lock--active .mini-game-card {
    height: 100dvh !important;
    padding: max(0.45rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom)) !important;
    gap: clamp(0.35rem, 1.1dvh, 0.55rem) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .mini-game-lock--active .mini-game-lock__close {
    top: max(0.55rem, env(safe-area-inset-top)) !important;
    right: 0.55rem !important;
    width: 40px !important;
    height: 40px !important;
  }

  .mini-game-lock--active .mini-game-card__header {
    min-height: 40px !important;
    padding-inline: 2.75rem !important;
    align-content: center !important;
    gap: 0.2rem !important;
  }

  .mini-game-lock--active .mini-game-card__header h2 {
    font-size: clamp(1.05rem, 5vw, 1.3rem) !important;
  }

  .mini-game-lock--active .mini-game-card__header p,
  .mini-game-lock--active .mini-game-controls__note {
    display: none !important;
  }

  .mini-game-lock--active .mini-game-card__hud {
    padding: 0.25rem 0.5rem !important;
    gap: 0.25rem 0.55rem !important;
    font-size: 0.72rem !important;
  }

  .mini-game-lock--active .mini-game-card__stage {
    width: min(100%, calc((100dvh - 205px) * 1.714)) !important;
    max-height: calc(100dvh - 205px) !important;
  }

  .mini-game-lock--active .mini-game-card__stage--square {
    width: min(calc(100vw - 1rem), calc(100dvh - 225px), 520px) !important;
    height: min(calc(100vw - 1rem), calc(100dvh - 225px), 520px) !important;
    max-height: calc(100dvh - 225px) !important;
  }

  .mini-game-lock--active .mini-game-controls__layout {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 0.45rem !important;
  }

  .mini-game-lock--active .mini-game-controls__dpad {
    grid-template-columns: repeat(3, 38px) !important;
    grid-template-rows: repeat(3, 38px) !important;
    gap: 0.18rem !important;
    padding: 0.25rem !important;
  }

  .mini-game-lock--active .mini-game-controls__button[data-direction] {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .mini-game-lock--active .mini-game-controls__actions,
  .mini-game-lock--active .mini-game-controls__actions--stack {
    grid-template-columns: 1fr !important;
    gap: 0.3rem !important;
  }

  .mini-game-lock--active .mini-game-controls__actions:only-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mini-game-lock--active .mini-game-controls__button {
    min-height: 40px !important;
    padding: 0.48rem 0.55rem !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
  }

  .mini-game-lock--active .mini-game-controls--pong .mini-game-controls__dpad {
    grid-template-columns: repeat(2, 46px) !important;
    grid-template-rows: 42px !important;
  }

  .mini-game-lock--active .mini-game-controls--pong .mini-game-controls__button[data-direction] {
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
  }

  .mini-game-lock--active .mini-game-controls--pong .mini-game-controls__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .mini-game-lock--active .mini-game-card {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.42fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .mini-game-lock--active .mini-game-card__header {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
  }

  .mini-game-lock--active .mini-game-card__stage,
  .mini-game-lock--active .mini-game-card__stage--square {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: 100% !important;
    max-height: calc(100dvh - 58px) !important;
  }

  .mini-game-lock--active .mini-game-controls {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
  }

  .mini-game-lock--active .mini-game-controls__layout {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-game-lock--active .mini-game-card *,
  .mini-game-lock--active .mini-game-card *::before,
  .mini-game-lock--active .mini-game-card *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}