/* 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: none !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;
  }
}

/* 2026-10-03: quiet, rounded casual arcade surfaces. */
.mini-game-lock--active .mini-game-lock__dialog {
  width: min(720px, calc(100vw - 48px)) !important;
  height: min(760px, calc(100dvh - 48px)) !important;
}
.mini-game-lock--active .mini-game-card {
  border: 1px solid #dce4d4 !important;
  background: #fafcf6 !important;
  box-shadow: 0 20px 70px #152c2526 !important;
  border-radius: 24px !important;
}
.mini-game-lock--active .mini-game-card__stage {
  border: 0 !important; border-radius: 16px !important;
  background: #e0edbd !important; box-shadow: 0 3px 12px #29482d14 !important;
}
.mini-game-lock--active .mini-game-card__stage--square {
  width: min(100%, 480px, 52dvh) !important;
  height: auto !important; aspect-ratio: 1 !important;
}
.mini-game-lock--active .mini-game-card__canvas { object-fit: contain !important; }
.mini-game-lock--active .mini-game-controls__button,
.mini-game-lock--active .mini-game-lock__close {
  border: 1px solid #d5dfce !important; background: #fff !important;
  color: #304b38 !important; box-shadow: 0 2px 3px #2546300a !important;
  font-weight: 700 !important;
}
.mini-game-lock--active .mini-game-controls__button--accent {
  background: #4b8047 !important; border-color: #4b8047 !important; color: #fff !important;
}
.mini-game-lock--active .mini-game-controls__button:active { transform: scale(.96) !important; }
.mini-game-lock--active .mini-game-card__hud { background: #eef4e6 !important; border: 0 !important; }
.mini-game-lock--active .mini-game-controls__dpad { border: 0 !important; background: #eef4e6 !important; }
.mini-game-lock--active .mini-game-controls__button[data-direction] {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
}
.mini-game-lock--active .mini-game-controls__dpad {
  grid-template-columns: repeat(3, 44px) !important; grid-template-rows: repeat(3, 44px) !important;
}
@media (max-width: 680px) {
  .mini-game-lock--active .mini-game-lock__dialog { width: 100% !important; height: 100dvh !important; }
  .mini-game-lock--active .mini-game-card { border: 0 !important; border-radius: 0 !important; }
  .mini-game-lock--active .mini-game-card__stage--square {
    width: min(calc(100vw - 1rem), calc(100dvh - 260px), 480px) !important;
    height: auto !important; max-height: none !important;
  }
  .mini-game-lock--active .mini-game-controls__button { min-height: 44px !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .mini-game-lock--active .mini-game-card__stage--square {
    width: min(100%, calc(100dvh - 90px)) !important; height: auto !important;
  }
}

.mini-game-lock__preview--goose .mini-game-lock__preview-art { background: #e7f0df !important; }
.mini-game-lock__preview--goose .mini-game-lock__preview-art::before {
  background: url('/assets/Images/fruit-world/pip.webp') center / contain no-repeat !important;
  width: 130px !important; height: 145px !important; top: 5% !important; left: 7% !important;
  box-shadow: none !important; border-radius: 0 !important;
}
.mini-game-lock__preview--goose .mini-game-lock__preview-art::after { display: none !important; }
.mini-game-lock__preview--snake .mini-game-lock__preview-art { background: url('/assets/Images/arcade/fruit-orchard.webp') center / cover !important; }
.mini-game-lock__preview--snake .mini-game-lock__preview-art::before,
.mini-game-lock__preview--snake .mini-game-lock__preview-art::after { display: none !important; }
.mini-game-lock__preview--snake .mini-game-lock__preview-content { background:#fbfcf8ed; border-radius:18px; padding:1rem; color:#304b38; }

@media (max-height: 560px) and (orientation: landscape) {
  .mini-game-lock--active .mini-game-card {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 8px 16px !important; padding: 10px !important;
  }
  .mini-game-lock--active .mini-game-card__header { min-height:0 !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__stage--square {
    width: min(100%, calc(100dvh - 150px)) !important;
    height: auto !important; max-height:100% !important;
  }
  .mini-game-lock--active .mini-game-controls__layout {
    display:grid !important; grid-template-columns:1fr !important; justify-items:center !important;
  }
  .mini-game-lock--active .mini-game-controls__actions,
  .mini-game-lock--active .mini-game-controls__actions--stack {
    width:100% !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Compact portrait spacing and disjoint arena/control columns in landscape. */
.mini-game-lock--active .mini-game-card {
  grid-template-rows:auto auto auto !important;
  align-content:center !important;
  gap:18px !important;
}
.mini-game-lock--active .mini-game-card__stage {
  width:100% !important; height:auto !important; max-height:none !important;
}
.mini-game-lock--active .mini-game-card__stage:has(#goose-canvas) { aspect-ratio:30 / 11 !important; }
.mini-game-lock--active .mini-game-card__stage--square { width:min(100%,480px,52dvh) !important; }
.mini-game-lock--active .mini-game-controls__note { display:block !important; color:#36513a !important; }
@media (max-width:680px) {
  .mini-game-lock--active .mini-game-card { gap:16px !important; }
  .mini-game-lock--active .mini-game-card__stage--square { width:min(100%,480px,calc(100dvh - 310px)) !important; }
  .mini-game-lock--active .mini-game-card__stage { max-width:100% !important; }
}
@media (max-height:560px) and (orientation:landscape) {
  .mini-game-lock--active .mini-game-card {
    grid-template-columns:minmax(0,1fr) 210px !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    align-content:stretch !important;
    gap:8px 12px !important;
  }
  .mini-game-lock--active .mini-game-card__stage {
    width:100% !important; height:auto !important; max-width:100% !important;
    max-height:none !important; justify-self:center !important; align-self:center !important;
  }
  .mini-game-lock--active .mini-game-card__stage--square { width:min(100%,calc(100dvh - 110px)) !important; }
  .mini-game-lock--active .mini-game-controls__note { display:none !important; }
  .mini-game-lock--active .mini-game-controls__actions { gap:3px !important; }
  .mini-game-lock--active .mini-game-controls__button { padding:.5rem .25rem !important; font-size:.75rem !important; }
}