/* v77: hard overrides for the phone world-map header and restaurant level select. */

/* ---------- World map header ---------- */
.app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-map-title {
  display: grid !important;
  position: absolute !important;
  left: 12px !important;
  right: 126px !important;
  top: calc(max(10px, env(safe-area-inset-top)) + 2px) !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 9px 13px !important;
  align-content: center !important;
  gap: 3px !important;
  border: 2px solid rgba(244,173,39,.78) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,rgba(73,23,5,.96),rgba(28,7,2,.97)) !important;
  box-shadow: 0 5px 0 rgba(83,24,3,.88), inset 0 1px 0 rgba(255,240,176,.2) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 118 !important;
  pointer-events: none !important;
}

.app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-map-title strong {
  min-width: 0 !important;
  color: #fff3d4 !important;
  font-size: clamp(16px,4.2vw,21px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 3px 0 #5a1703 !important;
}

.app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-map-title span {
  min-width: 0 !important;
  color: #f4ad27 !important;
  font-size: clamp(8px,2.2vw,10px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  font-weight: 1000 !important;
}

.app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-back-button {
  display: inline-flex !important;
  position: absolute !important;
  left: auto !important;
  right: 12px !important;
  top: calc(max(10px, env(safe-area-inset-top)) + 4px) !important;
  bottom: auto !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 3px solid #873006 !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg,#ffe365 0%,#ff9e22 52%,#ed630c 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58),0 5px 0 #681f04,0 10px 20px rgba(0,0,0,.22) !important;
  text-shadow: 0 2px 0 #8b2c05 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  z-index: 120 !important;
  transform: none !important;
}

.app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-back-button::before {
  content: "←" !important;
  display: inline-block !important;
  font-size: 19px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* ---------- Restaurant level screen ---------- */
.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76.screen-active {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#260b03,#100301) !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76.screen-active > .level-map-top-bar {
  display: flex !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: calc(max(8px, env(safe-area-inset-top)) + 2px) !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 70px !important;
  max-height: 70px !important;
  padding: 11px 112px 10px 15px !important;
  align-items: center !important;
  border: 2px solid rgba(244,173,39,.8) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg,rgba(75,24,5,.98),rgba(30,8,2,.98)) !important;
  box-shadow: 0 6px 0 rgba(83,24,3,.9),inset 0 1px 0 rgba(255,243,183,.2) !important;
  z-index: 130 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-top-bar > div {
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  gap: 4px !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-top-bar strong {
  color: #fff3d4 !important;
  font-size: clamp(18px,4.7vw,23px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 3px 0 #5a1703 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-top-bar span {
  color: #f4ad27 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 1000 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-top-bar > .back-button-v76 {
  display: inline-flex !important;
  position: absolute !important;
  left: auto !important;
  right: 9px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 3px solid #873006 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#ffe365,#ff9c20 52%,#ee640c) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.56),0 4px 0 #681f04 !important;
  text-shadow: 0 2px 0 #8b2c05 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transform: translateY(-50%) !important;
  z-index: 135 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-top-bar > .back-button-v76::before {
  content: "←" !important;
  display: inline-block !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(max(8px, env(safe-area-inset-top)) + 84px) !important;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: 150px minmax(0,1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-hero-v76 {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  margin: 0 12px !important;
  overflow: hidden !important;
  border: 3px solid #c47c13 !important;
  border-radius: 22px !important;
  background-color: #351003 !important;
  background-image: url('../assets/Generated/UI/burger_hero_v01.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 0 0 2px rgba(255,226,125,.14),0 7px 0 rgba(84,25,3,.88),0 13px 24px rgba(0,0,0,.28) !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-hero-v76 > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-hero-copy {
  display: none !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-scroll-v76 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 12px 30px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-scroll-v76 > .level-grid.level-grid-v76 {
  display: grid !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 14px 12px !important;
  align-content: start !important;
  justify-content: stretch !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-grid.level-grid-v76 > .level-card-v76 {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 174px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 22px 9px 11px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: 56px minmax(31px,auto) 22px 18px 25px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 5px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  transform: none !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-card-v76 .level-number {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  font-size: 26px !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-card-v76 .level-title {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 31px !important;
  place-items: center !important;
  padding: 0 2px !important;
  color: #fff7df !important;
  font-size: clamp(13px,3.5vw,17px) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-card-v76 .level-stars {
  display: flex !important;
  min-height: 22px !important;
  margin: 0 !important;
  gap: 2px !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-card-v76 .level-star {
  display: inline-block !important;
  width: auto !important;
  font-size: 20px !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-best-time {
  display: block !important;
  min-width: 0 !important;
  min-height: 18px !important;
  max-width: 100% !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-reward {
  display: inline-flex !important;
  min-width: 68px !important;
  min-height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 9px !important;
  font-size: 13px !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 > .level-map-playbar {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 2px) !important;
  width: auto !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  margin: 0 !important;
  padding: 9px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0,1fr) 108px !important;
  align-items: center !important;
  gap: 9px !important;
  box-sizing: border-box !important;
  border-radius: 21px !important;
  background: linear-gradient(180deg,#591b04,#210702) !important;
  border: 3px solid #df941f !important;
  box-shadow: inset 0 1px 0 rgba(255,237,164,.2),0 6px 0 #5c1b03,0 12px 24px rgba(0,0,0,.32) !important;
  z-index: 140 !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .selected-level-badge {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  font-size: 23px !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-selection strong {
  font-size: clamp(13px,3.6vw,18px) !important;
}

.app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 #btnPlaySelectedLevel {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 8px !important;
  font-size: 16px !important;
}

@media (max-width: 350px) {
  .app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-map-title {
    right: 112px !important;
  }
  .app-shell.ui-mobile-v61 .world-map-screen.screen-active > .world-back-button {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76.screen-active > .level-map-top-bar {
    padding-right: 102px !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-top-bar > .back-button-v76 {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    font-size: 12px !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-grid.level-grid-v76 > .level-card-v76 {
    min-height: 166px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 > .level-map-playbar {
    grid-template-columns: 46px minmax(0,1fr) 96px !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 #btnPlaySelectedLevel {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
}

@media (min-width: 901px) and (orientation: landscape) {
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-map-content {
    top: 94px !important;
    bottom: 104px !important;
    grid-template-columns: minmax(300px,36%) minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    gap: 18px !important;
    padding: 0 22px !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-hero-v76 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }
  .app-shell.ui-mobile-v61 .level-map-screen.level-map-v76 .level-scroll-v76 > .level-grid.level-grid-v76 {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}