/* v65: final phone-browser fit layer. Loaded after every legacy frame stylesheet. */
@media (orientation: portrait), (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    display: block !important;
    place-items: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #080302 !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
  }

  .app-shell.ui-mobile-v61 {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: calc(var(--mcb-vh, 1vh) * 100) !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .app-shell.ui-mobile-v61::before,
  .app-shell.ui-mobile-v61::after {
    content: none !important;
    display: none !important;
  }

  .app-shell.ui-mobile-v61 .screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  .app-shell.ui-mobile-v61 .screen.screen-active.menu-screen,
  .app-shell.ui-mobile-v61 .screen.screen-active.splash-screen,
  .app-shell.ui-mobile-v61 .screen.screen-active.settings-screen,
  .app-shell.ui-mobile-v61 .screen.screen-active.howto-screen,
  .app-shell.ui-mobile-v61 .screen.screen-active.result-screen {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  .app-shell.ui-mobile-v61 .screen.screen-active.level-map-screen,
  .app-shell.ui-mobile-v61 .screen.screen-active.game-screen {
    display: grid !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen.screen-active {
    padding: calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 86px) !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: 10px !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen .top-bar {
    top: calc(var(--safe-top) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen .hero-panel {
    width: 100% !important;
    min-height: clamp(118px, 24dvh, 168px) !important;
    max-height: 24dvh !important;
    margin-top: auto !important;
    z-index: 20 !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen .menu-actions {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    z-index: 50 !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen .stat-strip {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    z-index: 30 !important;
  }

  .app-shell.ui-mobile-v61 .menu-hostess-rig {
    left: auto !important;
    right: -4vw !important;
    bottom: calc(var(--safe-bottom) + 138px) !important;
    width: min(56vw, 250px) !important;
    height: min(48dvh, 420px) !important;
    z-index: 24 !important;
    opacity: .98 !important;
  }

  .mobile-wizard-chip {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px) !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .mobile-wizard-chip b { font-size: 10px !important; }
  .mobile-wizard-chip span { font-size: 11px !important; }
  .mobile-wizard-chip button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .app-shell.ui-mobile-v61 .world-map-screen.screen-active {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #071018 !important;
    touch-action: pan-x !important;
  }

  .app-shell.ui-mobile-v61 .world-map-viewport {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    touch-action: pan-x !important;
    z-index: 1 !important;
  }

  .app-shell.ui-mobile-v61 .world-map-viewport::-webkit-scrollbar {
    display: none !important;
  }

  .app-shell.ui-mobile-v61 .world-map-track {
    position: relative !important;
    width: 218vw !important;
    min-width: 820px !important;
    height: 100% !important;
    background-image: linear-gradient(180deg, rgba(6, 18, 24, .04), rgba(6, 18, 24, .16)), var(--concept-world-bg, var(--ui-world-bg)) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    scroll-snap-align: center !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-map-pins {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 4 !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin {
    position: absolute !important;
    left: var(--x) !important;
    top: var(--y) !important;
    width: clamp(70px, calc(var(--w) * 1.05), 132px) !important;
    min-width: 70px !important;
    min-height: 70px !important;
    aspect-ratio: 1 / 1 !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 5 !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin .restaurant-art {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 24px !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin .restaurant-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 18px 12px rgba(0,0,0,.34)) !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin.restaurant-locked {
    opacity: .78 !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin.restaurant-locked .restaurant-art img {
    filter: grayscale(1) saturate(.35) brightness(.72) contrast(.94) drop-shadow(0 16px 10px rgba(0,0,0,.32)) !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin.restaurant-locked::after {
    content: 'LOCKED' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -10px !important;
    transform: translateX(-50%) !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(56, 56, 58, .9), rgba(22, 22, 24, .94)) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #e8e8e8 !important;
    font-size: 9px !important;
    font-weight: 1000 !important;
    letter-spacing: .05em !important;
    text-shadow: none !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-lock {
    display: none !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin.restaurant-playable .restaurant-art img,
  .app-shell.ui-mobile-v61 .restaurant-pin.restaurant-selected .restaurant-art img {
    filter: drop-shadow(0 0 20px rgba(255, 215, 75, .95)) drop-shadow(0 18px 12px rgba(0,0,0,.34)) !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-pin.restaurant-playable::before {
    content: 'OPEN' !important;
    position: absolute !important;
    left: 50% !important;
    top: -9px !important;
    transform: translateX(-50%) !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(#ffe76b, #f49b17) !important;
    border: 2px solid #842d0d !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 1000 !important;
    text-shadow: 0 2px 0 #70220a !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-name,
  .app-shell.ui-mobile-v61 .restaurant-pin small {
    display: none !important;
  }

  .app-shell.ui-mobile-v61 .world-back-button {
    left: 12px !important;
    top: calc(var(--safe-top) + 10px) !important;
    min-width: 74px !important;
    min-height: 44px !important;
    z-index: 40 !important;
  }

  .app-shell.ui-mobile-v61 .world-map-title {
    display: grid !important;
    position: absolute !important;
    left: 96px !important;
    right: 12px !important;
    top: calc(var(--safe-top) + 10px) !important;
    z-index: 39 !important;
    min-height: 44px !important;
    padding: 7px 12px !important;
    border-radius: 16px !important;
    background: rgba(10, 4, 2, .48) !important;
    border: 1px solid rgba(255, 214, 100, .24) !important;
    backdrop-filter: blur(10px) !important;
  }

  .app-shell.ui-mobile-v61 .world-map-title strong {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .app-shell.ui-mobile-v61 .world-map-title span {
    font-size: 10px !important;
    color: #ffd76b !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  .app-shell.ui-mobile-v61 .world-map-hint {
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--safe-bottom) + 12px) !important;
    z-index: 38 !important;
    padding: 9px 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(58, 24, 8, .9), rgba(18, 7, 3, .94)) !important;
    border: 1px solid rgba(255, 214, 100, .38) !important;
    color: #ffe9b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.3) !important;
  }

  .app-shell.ui-mobile-v61 .world-map-edge {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 36px !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }

  .app-shell.ui-mobile-v61 .world-map-edge-left {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(6, 3, 2, .42), transparent) !important;
  }

  .app-shell.ui-mobile-v61 .world-map-edge-right {
    right: 0 !important;
    background: linear-gradient(270deg, rgba(6, 3, 2, .42), transparent) !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-popover {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--safe-bottom) + 52px) !important;
    width: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    border-radius: 20px !important;
    z-index: 60 !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-popover-art img {
    max-height: 72px !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-popover-copy strong {
    font-size: 20px !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-popover-copy span,
  .app-shell.ui-mobile-v61 .restaurant-popover-copy em,
  .app-shell.ui-mobile-v61 .restaurant-popover-copy small {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  .app-shell.ui-mobile-v61 .restaurant-popover-action {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
  }
}

@media (orientation: portrait) and (max-height: 720px) {
  .app-shell.ui-mobile-v61 .menu-screen .hero-panel {
    min-height: 108px !important;
    max-height: 118px !important;
    padding: 12px !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen .hero-panel::before {
    height: 46px !important;
  }

  .app-shell.ui-mobile-v61 .menu-screen .hero-panel h2 {
    font-size: 22px !important;
  }

  .app-shell.ui-mobile-v61 .menu-hostess-rig {
    bottom: calc(var(--safe-bottom) + 118px) !important;
    width: min(50vw, 220px) !important;
    height: min(42dvh, 360px) !important;
  }
}