/* Final approved shell overrides. Keep this stylesheet last so theme changes
   cannot cover the painted 2D town controls or collapse the arcade grid. */

/* Dream Town: the approved day/night artwork already contains every visible
   label and icon. The live elements below are click targets only. */
:root[data-menu-theme] .town-view .town-top > .pill,
:root[data-menu-theme] .town-view .town-top .res,
.town-view .town-top > .pill,
.town-view .town-top .res {
  border: 2px solid #dcb469 !important;
  color: #fff2c4 !important;
  background: #27264ff2 !important;
  box-shadow: inset 0 0 0 2px #fff4cb1c, 0 4px 12px #0b12338c !important;
  backdrop-filter: blur(5px) !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav,
.town-view .town-bottom-nav {
  right: 4% !important;
  bottom: 3.9% !important;
  left: 4% !important;
  display: grid !important;
  height: 8.6% !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button,
:root[data-menu-theme] .town-view .town-bottom-nav button.active,
.town-view .town-bottom-nav button,
.town-view .town-bottom-nav button.active {
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button > *,
.town-view .town-bottom-nav button > * {
  visibility: hidden !important;
}

.town-view .town-bottom-nav button:focus-visible {
  outline: 4px solid #ffe494 !important;
  outline-offset: -4px !important;
}

/* Mini-game hub: fixed mobile 2 × 2 cards with readable white titles. */
body.mobile-cat-app .collection-screen.game-hub-active {
  position: fixed !important;
  inset: 0 auto 0 50% !important;
  width: min(100%, 480px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #07142f !important;
}

body.mobile-cat-app .collection-screen.game-hub-active > .game-hub-artboard {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  transform: none !important;
  background:
    linear-gradient(180deg, rgba(4, 13, 39, .12), rgba(5, 13, 39, .5)),
    url("assets/dream-town/main-town-2d-night-v1.webp") center / cover no-repeat !important;
  box-shadow: none !important;
}

body.mobile-cat-app .collection-screen.game-hub-active .game-hub-artboard > .eyebrow {
  display: none !important;
}

body.mobile-cat-app .collection-screen.game-hub-active .game-hub-artboard > h2 {
  position: absolute !important;
  top: 8.2% !important;
  right: 18% !important;
  left: 18% !important;
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(30px, 8vw, 42px) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 3px 0 #243468, 0 0 15px rgba(108, 150, 255, .8) !important;
}

body.mobile-cat-app .collection-screen.game-hub-active .game-hub-artboard > p {
  position: absolute !important;
  top: 13.2% !important;
  right: 8% !important;
  left: 8% !important;
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-shadow: 0 2px 5px #172556 !important;
}

body.mobile-cat-app .game-hub-active .back-button {
  top: 2.2% !important;
  left: 3.5% !important;
  width: auto !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 15px !important;
  border: 2px solid #5c70ad !important;
  border-radius: 999px !important;
  color: #21386f !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(8, 22, 59, .35) !important;
}

body.mobile-cat-app .game-hub-active .game-hub-wallet {
  top: 2.2% !important;
  right: 3.5% !important;
  left: auto !important;
  display: grid !important;
  width: 43% !important;
  height: 46px !important;
  gap: 6px !important;
  opacity: 1 !important;
  overflow: visible !important;
  grid-template-columns: .95fr 1.15fr !important;
  pointer-events: none !important;
}

body.mobile-cat-app .game-hub-active .game-hub-wallet span {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 9px !important;
  overflow: visible !important;
  border: 2px solid #5c70ad !important;
  border-radius: 999px !important;
  color: #21386f !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(8, 22, 59, .35) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.hub-coin-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: visible;
  border: 2px solid #fff0a4;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 29%, #fff7bd 0 8%, #ffd24d 25%, #e49416 66%, #9b530d 100%);
  box-shadow: inset 0 0 0 2px #bf6d11, 0 1px 3px rgba(84, 46, 5, .35);
}

.hub-coin-icon::after {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 68%, #9b530d 0 26%, transparent 28%),
    radial-gradient(circle at 20% 28%, #9b530d 0 14%, transparent 16%),
    radial-gradient(circle at 42% 15%, #9b530d 0 14%, transparent 16%),
    radial-gradient(circle at 64% 15%, #9b530d 0 14%, transparent 16%),
    radial-gradient(circle at 84% 30%, #9b530d 0 14%, transparent 16%);
  content: "";
}

body.mobile-cat-app .game-hub-active .game-library-grid.four-card-grid {
  position: absolute !important;
  top: 19.2% !important;
  right: 4% !important;
  bottom: 13.7% !important;
  left: 4% !important;
  display: grid !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-card {
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 7px !important;
  overflow: hidden !important;
  border: 3px solid #29447f !important;
  border-radius: 24px !important;
  outline: 2px solid rgba(255, 255, 255, .8) !important;
  outline-offset: -6px !important;
  color: #fff !important;
  background: #f8f8ff !important;
  box-shadow: 0 6px 14px rgba(4, 15, 48, .4) !important;
  aspect-ratio: auto !important;
  flex-direction: column !important;
}

body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-art {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 17px 17px 11px 11px !important;
  background-position: center !important;
  background-size: cover !important;
  flex: 1 1 auto !important;
}

body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy {
  display: grid !important;
  visibility: visible !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 0 15px 15px !important;
  color: #fff !important;
  background: #1e2d62 !important;
  box-shadow: inset 0 2px #f1c86c !important;
  place-items: center !important;
  flex: 0 0 48px !important;
}

body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy strong {
  display: block !important;
  color: #fff !important;
  font-size: clamp(14px, 3.8vw, 18px) !important;
  font-weight: 1000 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-shadow: 0 2px 3px #0d173c !important;
}

body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy small {
  display: none !important;
}

body.mobile-cat-app .game-hub-active .game-hub-nav {
  position: absolute !important;
  right: 3% !important;
  bottom: 1.5% !important;
  left: 3% !important;
  display: grid !important;
  height: 10% !important;
  padding: 5px !important;
  overflow: hidden !important;
  border: 2px solid #29447f !important;
  border-radius: 23px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 5px 14px rgba(4, 15, 48, .42) !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

body.mobile-cat-app .game-hub-active .game-hub-nav button {
  height: 100% !important;
  border-radius: 17px !important;
  color: #293868 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.mobile-cat-app .game-hub-active .game-hub-nav button > * {
  visibility: visible !important;
}

body.mobile-cat-app .game-hub-active .game-hub-nav button.active {
  color: #183e85 !important;
  background: #a9d8ff !important;
  box-shadow: inset 0 0 0 2px #2d8fff !important;
}

@media (max-width: 390px) {
  body.mobile-cat-app .game-hub-active .game-hub-wallet {
    display: grid !important;
    width: 44% !important;
  }

  body.mobile-cat-app .game-hub-active .game-hub-wallet span {
    padding: 0 6px !important;
    gap: 4px !important;
  }

  body.mobile-cat-app .game-hub-active .game-hub-wallet b {
    font-size: 13px !important;
  }

  body.mobile-cat-app .game-hub-active .game-library-grid.four-card-grid {
    right: 3% !important;
    left: 3% !important;
    gap: 7px !important;
  }

  body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-card {
    padding: 5px !important;
    border-width: 2px !important;
    border-radius: 20px !important;
  }
}

/* One real, theme-aware menu is shared by Dream Town and the mini-game hub.
   On the town screen it sits over (and fully covers) the old painted menu. */
:root[data-menu-theme] .town-view .town-bottom-nav,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav {
  z-index: 30 !important;
  display: grid !important;
  padding: 5px !important;
  overflow: hidden !important;
  border: 2px solid var(--menu-line) !important;
  border-radius: 23px !important;
  background: linear-gradient(180deg, var(--menu-surface), var(--menu-surface-2)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--menu-surface) 52%, transparent),
    0 6px 16px color-mix(in srgb, var(--menu-shadow) 48%, transparent) !important;
  backdrop-filter: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav {
  right: 4% !important;
  bottom: 2.3% !important;
  left: 4% !important;
  height: 10% !important;
}

:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav {
  right: 3% !important;
  bottom: 1.5% !important;
  left: 3% !important;
  height: 10% !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button {
  display: grid !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 17px !important;
  color: var(--menu-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  place-items: center !important;
  gap: 1px !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button > *,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button > * {
  visibility: visible !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button.active,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button.active {
  color: var(--menu-ink) !important;
  background: var(--menu-accent-soft) !important;
  box-shadow: inset 0 0 0 2px var(--menu-accent) !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button > span:not(.arcade-machine-icon),
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button > span:not(.arcade-machine-icon) {
  display: grid !important;
  min-height: 29px !important;
  color: currentColor !important;
  font-size: 26px !important;
  line-height: 1 !important;
  place-items: center !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button > b,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button > b {
  color: currentColor !important;
  font-size: clamp(10px, 2.9vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

:root[data-menu-theme] .arcade-machine-icon {
  position: relative !important;
  display: block !important;
  width: 27px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: 2px solid var(--menu-line) !important;
  border-radius: 5px 5px 3px 3px !important;
  background: color-mix(in srgb, var(--menu-accent) 65%, var(--menu-surface-2)) !important;
  box-shadow: 0 0 7px color-mix(in srgb, var(--menu-accent) 50%, transparent) !important;
}

:root[data-menu-theme] .arcade-machine-icon::before {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 15px !important;
  height: 10px !important;
  border: 2px solid var(--menu-ink) !important;
  background: color-mix(in srgb, var(--menu-accent-soft) 76%, #fff) !important;
  content: '' !important;
}

:root[data-menu-theme] .arcade-machine-icon::after {
  position: absolute !important;
  bottom: 4px !important;
  left: 5px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--menu-title) !important;
  box-shadow: 9px 0 var(--menu-accent) !important;
  content: '' !important;
}

:root[data-menu-theme] .arcade-machine-icon i {
  position: absolute !important;
  bottom: 7px !important;
  left: 9px !important;
  width: 2px !important;
  height: 7px !important;
  background: var(--menu-ink) !important;
  transform: translateY(-3px) !important;
}

/* Approved 2D reference: roomy navy shell, gold line work and a large
   highlighted tab. The Settings palette still controls the menu colors. */
:root[data-menu-theme] .town-view .town-bottom-nav,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav {
  padding: 6px !important;
  border-radius: 27px !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button {
  border-radius: 21px !important;
  gap: 3px !important;
}

:root[data-menu-theme] .town-view .town-bottom-nav button > b,
:root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button > b {
  font-size: clamp(12px, 3.25vw, 15px) !important;
  line-height: 1.08 !important;
}

:root[data-menu-theme] .nav-icon {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  background: currentColor !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
}

:root[data-menu-theme] .nav-icon-home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.8 12 3l9 7.8v10.1a1 1 0 0 1-1 1h-5.7v-6.3H9.7v6.3H4a1 1 0 0 1-1-1Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.8 12 3l9 7.8v10.1a1 1 0 0 1-1 1h-5.7v-6.3H9.7v6.3H4a1 1 0 0 1-1-1Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

:root[data-menu-theme] .nav-icon-gamepad {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 7.1h9.6c2 0 3.2 1.3 3.8 3.2l1.2 4.2c.7 2.4-.3 4.4-2 4.4-1 0-1.7-.7-2.6-2l-1-1.5H7.8l-1 1.5c-.9 1.3-1.6 2-2.6 2-1.7 0-2.7-2-2-4.4l1.2-4.2c.6-1.9 1.8-3.2 3.8-3.2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M7.2 10v4M5.2 12h4M15.6 10.8h.1M18.2 13.2h.1' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 7.1h9.6c2 0 3.2 1.3 3.8 3.2l1.2 4.2c.7 2.4-.3 4.4-2 4.4-1 0-1.7-.7-2.6-2l-1-1.5H7.8l-1 1.5c-.9 1.3-1.6 2-2.6 2-1.7 0-2.7-2-2-4.4l1.2-4.2c.6-1.9 1.8-3.2 3.8-3.2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M7.2 10v4M5.2 12h4M15.6 10.8h.1M18.2 13.2h.1' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

:root[data-menu-theme] .nav-icon-cat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.1 8.4.4-5 4.2 2.4c1.5-.4 3.1-.4 4.6 0l4.2-2.4.4 5c1.4 1.4 2.1 3.1 2.1 5.1 0 4.5-3.8 7.5-9 7.5s-9-3-9-7.5c0-2 .7-3.7 2.1-5.1Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M8.2 12.2h.1M15.7 12.2h.1M10 15.3c1.3 1 2.7 1 4 0' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.1 8.4.4-5 4.2 2.4c1.5-.4 3.1-.4 4.6 0l4.2-2.4.4 5c1.4 1.4 2.1 3.1 2.1 5.1 0 4.5-3.8 7.5-9 7.5s-9-3-9-7.5c0-2 .7-3.7 2.1-5.1Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M8.2 12.2h.1M15.7 12.2h.1M10 15.3c1.3 1 2.7 1 4 0' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

:root[data-menu-theme] .nav-icon-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 2.6h4.8l.6 2.5c.6.2 1.2.5 1.8 1l2.4-.8 2.4 4.1-1.8 1.7a8 8 0 0 1 0 2l1.8 1.7-2.4 4.1-2.4-.8c-.6.4-1.2.7-1.8 1l-.6 2.4H9.6L9 19.1c-.6-.2-1.2-.6-1.8-1l-2.4.8-2.4-4.1 1.8-1.7a8 8 0 0 1 0-2L2.4 9.4l2.4-4.1 2.4.8c.6-.4 1.2-.8 1.8-1Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12.1' r='3.1' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 2.6h4.8l.6 2.5c.6.2 1.2.5 1.8 1l2.4-.8 2.4 4.1-1.8 1.7a8 8 0 0 1 0 2l1.8 1.7-2.4 4.1-2.4-.8c-.6.4-1.2.7-1.8 1l-.6 2.4H9.6L9 19.1c-.6-.2-1.2-.6-1.8-1l-2.4.8-2.4-4.1 1.8-1.7a8 8 0 0 1 0-2L2.4 9.4l2.4-4.1 2.4.8c.6-.4 1.2-.8 1.8-1Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12.1' r='3.1' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") !important;
}

:root[data-menu-theme="black-gold"] .town-view .town-bottom-nav,
:root[data-menu-theme="black-gold"] body.mobile-cat-app .game-hub-active .game-hub-nav {
  border-color: #d9ae55 !important;
  background: linear-gradient(180deg, #232a4f 0%, #151a35 56%, #11162d 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 235, 176, .08), 0 8px 18px rgba(3, 7, 22, .62) !important;
}

:root[data-menu-theme="black-gold"] .town-view .town-bottom-nav button,
:root[data-menu-theme="black-gold"] body.mobile-cat-app .game-hub-active .game-hub-nav button {
  color: #e8c878 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .52) !important;
}

:root[data-menu-theme="black-gold"] .town-view .town-bottom-nav button.active,
:root[data-menu-theme="black-gold"] body.mobile-cat-app .game-hub-active .game-hub-nav button.active {
  color: #46331d !important;
  background: linear-gradient(180deg, #ffd779 0%, #f2bd54 58%, #e4a943 100%) !important;
  box-shadow: inset 0 0 0 2px #ffe8a4, 0 3px 9px rgba(62, 36, 12, .42) !important;
  text-shadow: 0 1px rgba(255, 244, 198, .55) !important;
}

@media (max-width: 390px) {
  :root[data-menu-theme] .nav-icon {
    width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
  }

  :root[data-menu-theme] .town-view .town-bottom-nav button > b,
  :root[data-menu-theme] body.mobile-cat-app .game-hub-active .game-hub-nav button > b {
    font-size: 12px !important;
  }
}