/* ── MOBILE OVERRIDES (≤640px) ──────────────────────────────────────────────
   Desktop layout is completely untouched — these rules only fire on narrow
   viewports (phones in portrait, small tablets). The body.mview-* class
   controls which panel is visible at any given time.
   ──────────────────────────────────────────────────────────────────────────── */

/* Hidden on desktop — shown only by media query below */
#mobile-nav         { display: none; }
#mobile-place-hint  { display: none; }
#mobile-place-cancel{ display: none; }
#mobile-menu-btn    { display: none; }

/* ── Mobile menu button base styles (hidden until activated by media query) ── */
#mobile-menu-btn {
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #7a5020;
  border-radius: 5px;
  color: #f0c060;
  font-size: 20px;
  line-height: 1;
  padding: 3px 9px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#mobile-menu-btn:active { background: #2a1a08; }

/* ── Core mobile layout (portrait phones) ────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Header: compact bar with ☰ menu button ── */
  #mobile-menu-btn  { display: flex; }
  #header {
    height: 44px;
    min-height: 44px;
    padding: 0 10px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 44px;
    gap: 6px;
    align-items: center;
  }
  #header-title      { display: none; }
  #header-left       { display: none; }   /* only held the (now hidden) title */
  #header-stats      { gap: 10px; flex-wrap: nowrap; justify-content: center; }
  #money-display     { font-size: 14px; }
  #vibe-display      { font-size: 13px; }
  #header-center     { display: none; }

  /* ── Slide-in notifications: wrap to a portrait box so long lines (e.g. a
       drink order "…wants a Blue Hawaiian") don't run off the screen ── */
  #order-banner {
    white-space: normal;
    max-width: 84vw;
    text-align: center;
    font-size: 15px;
    line-height: 1.3;
    padding: 8px 14px;
  }
  .warn-toast              { max-width: 84vw; }
  .warn-toast .wt-title    { white-space: normal; }
  .warn-toast.wt-large     { max-width: 90vw; padding: 12px 18px; }
  .warn-toast.wt-large .wt-title { font-size: 22px; }
  .warn-toast.wt-large .wt-body  { font-size: 18px; }

  /* ── Main layout: column, room for fixed bottom nav ── */
  #main {
    flex-direction: column;
    padding-bottom: 56px;
  }

  /* Hide collapse buttons — not applicable on mobile */
  .panel-collapse-btn { display: none !important; }

  /* Restore collapsed panels that desktop may have collapsed */
  #left-panel.panel-collapsed  { display: flex !important; }
  #right-panel.panel-collapsed { display: flex !important; }

  /* All three sections hidden by default; only the active mview shows */
  #left-panel {
    width: 100%;
    min-width: 0;
    flex: 1;
    border-right: none;
    display: none;
  }
  #right-panel {
    width: 100%;
    min-width: 0;
    flex: 1;
    border-left: none;
    display: none;
  }
  #room-wrap {
    flex: unset;
    width: 100%;
    flex: 1;
    display: none;
  }

  /* ── mview body classes reveal the right section ── */
  body.mview-mix      #left-panel  { display: flex; }
  body.mview-decorate #left-panel  { display: flex; }
  body.mview-room     #room-wrap   { display: flex; flex-direction: column; }
  body.mview-log      #right-panel { display: flex; }

  /* ── Mobile bottom nav bar ── */
  #mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: #1a0d04;
    border-top: 2px solid #5a3010;
    z-index: 2000;
    /* keep above everything */
  }
  .mnav-btn {
    flex: 1;
    background: none;
    border: none;
    border-right: 1px solid #3a1e08;
    color: #a08850;
    font-size: 11px;
    font-family: var(--font-display);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    padding: 4px 2px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mnav-btn:last-child { border-right: none; }
  .mnav-btn .mnav-icon { font-size: 21px; line-height: 1; }
  .mnav-btn.active     { color: #f0c060; background: #1e1004; }
  .mnav-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 20px);
    background: #cc3030;
    color: #fff;
    font-size: 10px;
    font-family: Georgia, serif;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    font-weight: bold;
  }

  /* ── Mobile placement hint (overlays room when a decor item is pending) ── */
  #mobile-place-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 5, 0, 0.90);
    color: #f0c060;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #7a5020;
    pointer-events: none;
    z-index: 600;
    text-align: center;
    white-space: nowrap;
    display: none;
  }
  body.mobile-placing #mobile-place-hint { display: block; }

  #mobile-place-cancel {
    position: absolute;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    background: #3a1008;
    color: #f09060;
    border: 1px solid #7a3010;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    z-index: 600;
    display: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-placing #mobile-place-cancel { display: block; }

  /* ── Touch-friendly tap targets ── */
  button { touch-action: manipulation; }
  .tab-btn   { min-height: 44px; font-size: 12px; }
  .rp-tab-btn{ min-height: 40px; font-size: 12px; padding: 4px 2px; }
  .buy-btn   { min-height: 38px; padding: 5px 10px; }
  .ie-btn    { min-height: 36px; }

  /* ── Room: fill height in the flex column, allow pointer drag events ── */
  #room { touch-action: none; flex: 1; min-height: 0; }

  /* ── Item editor: pin above the mobile nav bar ── */
  #item-editor {
    bottom: 64px !important;
    left:    8px !important;
    right:   8px !important;
    width:   auto !important;
    top:     auto !important;
  }
  #item-editor input[type=range] { width: 100%; max-width: 100%; }
  #item-editor .ie-btns          { flex-wrap: wrap; }

  /* ── Scrollable panels ── */
  #panel-content          { -webkit-overflow-scrolling: touch; overflow-y: auto; }
  #rp-feed                { -webkit-overflow-scrolling: touch; overflow-y: auto; }
  #rp-recipes, #rp-cellar, #rp-menu, #rp-merch, #rp-music { -webkit-overflow-scrolling: touch; overflow-y: auto; }

  /* ── Order panel compact on mobile log view ── */
  #rp-order { min-height: 0; }

  /* ── Modal sizing ── */
  .tiki-popup {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
  }
  #recipe-overlay #recipe-popup {
    width: 95vw;
    max-width: 95vw;
    max-height: 82vh;
    overflow-y: auto;
  }

  /* ── Tutorial: compact for phone screens ── */
  #tutorial-card {
    padding: 32px 20px 24px;
    max-width: 95vw;
    border-radius: 10px;
  }
  #tutorial-art   { font-size: 64px; margin-bottom: 12px; }
  #tutorial-title { font-size: 22px; margin-bottom: 10px; }
  #tutorial-body  { font-size: 15px; line-height: 1.6; margin-bottom: 18px; min-height: 70px; }
  .tut-counter    { font-size: 13px; }
  .tutorial-dots  { gap: 8px; margin-bottom: 16px; }

  /* ── Decor tray: pointer cursor → tap cursor on mobile ── */
  .decor-art-wrap.can-drag { cursor: pointer; }

  /* ── Order queue label wraps nicely on small screens ── */
  .order-wants  { font-size: 14px; }
  .order-tip    { font-size: 12px; }
  .order-card   { padding: 6px; }

}

/* ── iOS safe areas (notch / home indicator) ────────────────────────────────
   viewport-fit=cover lets the app use the full screen; these insets keep the
   header, bottom nav, and floating controls clear of the notch and home bar.
   env() falls back to 0 on devices without safe areas, so this is a no-op there. */
@media (max-width: 640px) {
  #header {
    height: calc(44px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }
  #main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  #mobile-nav {
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }
  #item-editor         { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  #mobile-place-cancel { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  #mobile-place-hint   { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Portrait-only: rotate prompt for phones held in landscape ─────────────── */
#rotate-notice { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate-notice {
    display: flex;
    position: fixed; inset: 0; z-index: 100000;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center;
    background: #0a0604; color: #f0c060;
  }
  .rotate-icon  { font-size: 52px; line-height: 1; animation: rotateHint 2s ease-in-out infinite; }
  .rotate-title { font-family: var(--font-display); font-size: 22px; font-weight: bold; color: #f0c060; }
  .rotate-sub   { font-size: 14px; color: #c0a060; max-width: 320px; line-height: 1.5; }
  @keyframes rotateHint { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
  /* The World Rum Map is allowed in landscape — don't nag to rotate while it's open (#386). */
  body.rum-map-open #rotate-notice { display: none !important; }
}