:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: #eef1f6;
  color: #1a1e2a;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* prevent text selection on game surface */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Canvas fills available viewport - uses dvh for modern mobile browsers with fallback */
#scene {
  display: block;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  touch-action: none;
  outline: none;
}

/* Portrait orientation overlay - only visible in portrait */
#orientation-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #eef1f6;
  color: #1a1e2a;
  z-index: 10;
  text-align: center;
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  padding-top: max(1rem, env(safe-area-inset-top, 0));
  padding-right: max(1rem, env(safe-area-inset-right, 0));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0));
  padding-left: max(1rem, env(safe-area-inset-left, 0));
}

#orientation-overlay.is-visible {
  display: flex;
}

#orientation-overlay p {
  margin: 0;
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  max-width: 20ch;
}

/* Dev refresh button — Phase 04 development-only */
#dev-refresh {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 20;
  padding: 8px 14px;
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #1a1e2a;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(26,30,42,0.12);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#dev-refresh:active {
  transform: scale(0.97);
}


/* ============================================================
   ELEVATOR — Responsive Fix (preserve desktop, repair tablet/phone)
   Implements docs/elevator_responsive_fix_preserve_desktop_mobile_tablet_meta_ai.md
   - Desktop >=1200px : locked, no visual change
   - Tablet landscape 768–1199 + landscape : slight reduction, desktop-like
   - Phone landscape <=767 + landscape and/or max-height 600 : compact reflow
   - No global transform:scale; safe-area insets respected; no page scroll
   ============================================================ */

/* Base: ensure no page scroll and canvas interaction correct */
html, body { overflow: hidden; overscroll-behavior: none; }
#scene { pointer-events: auto; }

/* Desktop locked — explicit no-op block for documentation (min-width 1200) */
@media (min-width: 1200px) {
  /* intentionally preserve approved desktop layout — no overrides */
}

/* ------------------------------------------------------------
   Tablet landscape : 768–1199, landscape
   Closer to desktop, slightly smaller type/spacing/panels
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  #mission-panel {
    min-width: 168px !important;
    max-width: clamp(188px, 26vw, 260px) !important;
    padding: 10px 11px 9px !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    pointer-events: none !important;
  }
  #condition-score-wrap {
    min-width: 190px !important;
    max-width: clamp(180px, 28vw, 300px) !important;
    padding: 10px 12px !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    border-radius: 14px !important;
  }
  #pending-panel {
    min-width: 260px !important;
    max-width: clamp(240px, 32vw, 360px) !important;
    max-height: 50vh !important;
    top: calc(max(8px, env(safe-area-inset-top, 0px)) + 68px) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding: 12px 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }
  #mission-panel .mp-title { font-size: clamp(10px, 1.05vw, 11px) !important; }
  #mission-panel .mp-section-label { font-size: clamp(8px, 0.9vw, 9px) !important; }
  #mission-panel .mp-item { font-size: clamp(10px, 1.0vw, 12px) !important; }
  #mission-panel .mp-limit { font-size: clamp(10px, 1.0vw, 12px) !important; }

  #floor-nav {
    max-width: min(78vw, 480px) !important;
    padding: 6px 8px !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 68px) !important;
    gap: 6px !important;
    border-radius: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }
  #floor-nav #floor-grid { gap: 3px !important; max-width: 260px !important; }
  #floor-nav .floor-grid-btn { width: 26px !important; height: 22px !important; font-size: 10px !important; min-width: 26px !important; min-height: 22px !important; }

  #go-button {
    min-width: 96px !important;
    min-height: 44px !important;
    padding: 12px 22px !important;
    font-size: clamp(14px, 1.4vw, 17px) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }
  #deliver-button {
    min-height: 44px !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 108px) !important;
    padding: 11px 22px !important;
    font-size: clamp(12px, 1.1vw, 14px) !important;
    min-width: 148px !important;
  }
  #leave-here-button {
    min-height: 44px !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 58px) !important;
    padding: 10px 20px !important;
    font-size: clamp(11px, 1.05vw, 13px) !important;
    min-width: 148px !important;
  }
  #deliver-flash {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 108px) !important;
  }
  /* Dev refresh — keep small, safe corner, never overlap GO */
  #dev-refresh, #debug-toggle {
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }
  #dev-refresh { right: max(8px, env(safe-area-inset-right, 0px)) !important; }
  #debug-toggle { left: max(8px, env(safe-area-inset-left, 0px)) !important; }

  #travel-counter #travel-counter-floor { font-size: clamp(28px, 4vw, 44px) !important; }
  #travel-counter #travel-counter-load { font-size: clamp(14px, 1.6vw, 18px) !important; }
}

/* ------------------------------------------------------------
   Phone landscape : max-width 767 (and large-phone fallback via height)
   Compact horizontal HUD, reduced panels, larger tap targets
   ------------------------------------------------------------ */
@media (max-width: 767px) and (orientation: landscape) {
  #mission-panel {
    min-width: 118px !important;
    max-width: clamp(118px, 19vw, 164px) !important;
    padding: 5px 6px 4px !important;
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    max-height: 48vh !important;
    overflow-y: auto !important;
    border-radius: 9px !important;
    pointer-events: none !important;
    line-height: 1.2 !important;
  }
  #mission-panel .mp-title { font-size: clamp(8px, 0.95vw, 9px) !important; margin-bottom: 3px !important; line-height:1.1 !important; }
  #mission-panel .mp-section-label { font-size: clamp(6.5px, 0.8vw, 7.5px) !important; margin: 4px 0 2px !important; letter-spacing:0.1em !important; }
  #mission-panel .mp-item { font-size: clamp(9px, 0.9vw, 10px) !important; margin: 1px 0 !important; gap:4px !important; }
  #mission-panel .mp-limit { font-size: clamp(9px, 0.9vw, 10px) !important; }

  #condition-score-wrap {
    min-width: 142px !important;
    max-width: clamp(142px, 24vw, 220px) !important;
    padding: 7px 9px !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    border-radius: 12px !important;
    line-height: 1.25 !important;
  }
  #condition-score-wrap #condition-val { font-size: clamp(10px, 1.0vw, 11px) !important; }
  #condition-score-wrap #score-val { font-size: clamp(11px, 1.15vw, 13px) !important; }
  #condition-score-wrap #combo-row { font-size: 9px !important; padding: 3px !important; margin-top: 4px !important; }

  #pending-panel {
    min-width: 188px !important;
    max-width: clamp(188px, 28vw, 280px) !important;
    max-height: 40vh !important;
    top: calc(max(6px, env(safe-area-inset-top, 0px)) + 54px) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    padding: 9px 9px !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  #floor-nav {
    max-width: min(50vw, 320px) !important;
    padding: 3px 4px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 3px !important;
    border-radius: 9px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
    background: rgba(15,20,30,0.82) !important;
    backdrop-filter: blur(6px) !important;
  }
  #floor-nav #floor-grid { gap: 1px !important; max-width: none !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; justify-content:flex-start !important; padding-bottom: 1px !important; }
  #floor-nav #floor-grid::-webkit-scrollbar { display: none !important; }
  #floor-nav .floor-grid-btn { width: 18px !important; height: 16px !important; font-size: 8px !important; min-width: 18px !important; min-height: 16px !important; border-radius: 4px !important; flex: 0 0 auto !important; }
  #floor-nav #floor-current, #floor-nav #floor-target { font-size: 11px !important; }
  #floor-nav > div { gap: 4px !important; }

  /* Hide scrollbars mobile-only, keep scroll functional, lift stays open */
  #mission-panel, #pending-panel { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  #mission-panel::-webkit-scrollbar, #pending-panel::-webkit-scrollbar { display: none !important; }
  #mission-panel, #pending-panel, #floor-nav { background: rgba(15,20,30,0.74) !important; }

  #go-button {
    min-width: 68px !important;
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: clamp(11px, 1.1vw, 12.5px) !important;
    border-radius: 10px !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  #deliver-button {
    min-width: 108px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: clamp(10px, 1.0vw, 11px) !important;
    border-radius: 10px !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 84px) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    transform: none !important;
  }
  #leave-here-button {
    min-width: 108px !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: clamp(9.5px, 0.95vw, 11px) !important;
    border-radius: 10px !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 46px) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    transform: none !important;
  }
  #deliver-flash {
    bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 92px) !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
  }

  #dev-refresh, #debug-toggle {
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }
  #dev-refresh { right: max(6px, env(safe-area-inset-right, 0px)) !important; }
  #debug-toggle { left: max(6px, env(safe-area-inset-left, 0px)) !important; }

  /* pending items typography compact but readable (>=11px labels, >=14px values handled via panel scale) */
  #pending-panel { font-size: clamp(11px, 0.95vw, 12px) !important; }

  #travel-counter #travel-counter-floor { font-size: clamp(22px, 3.8vw, 34px) !important; }
  #travel-counter #travel-counter-load { font-size: clamp(13px, 1.4vw, 16px) !important; padding: 6px 12px !important; }
  #travel-counter #travel-counter-timeline { max-width: 86vw !important; padding: 8px 10px !important; }
  #route-complete > div, #run-failure > div, #maintenance-offer { max-width: 86vw !important; padding: 18px 20px !important; }
}

/* ------------------------------------------------------------
   Compact height fallback — catches large phones (e.g. 932×430)
   and ensures landscape with limited vertical space is compact
   even when width >767 (width alone insufficient)
   ------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 600px) {
  #mission-panel {
    max-height: 46vh !important;
    overflow-y: auto !important;
    pointer-events: none !important;
    scrollbar-width: none !important; -ms-overflow-style: none !important;
  }
  #mission-panel::-webkit-scrollbar, #pending-panel::-webkit-scrollbar, #floor-nav #floor-grid::-webkit-scrollbar { display: none !important; }
  #pending-panel {
    max-height: 38vh !important;
    overflow-y: auto !important;
    scrollbar-width: none !important; -ms-overflow-style: none !important;
  }
  #floor-nav { max-width: min(50vw, 320px) !important; bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important; padding: 3px 4px !important; background: rgba(15,20,30,0.74) !important; }
  #floor-nav #floor-grid { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
  #go-button { min-width: 68px !important; min-height: 36px !important; padding: 7px 14px !important; font-size: clamp(11px, 1.1vw, 12.5px) !important; border-radius: 10px !important; bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important; right: max(6px, env(safe-area-inset-right, 0px)) !important; left: auto !important; transform: none !important; }
  #deliver-button { min-width: 108px !important; min-height: 34px !important; padding: 7px 12px !important; font-size: clamp(10px, 1.0vw, 11px) !important; border-radius: 10px !important; bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 84px) !important; right: max(6px, env(safe-area-inset-right, 0px)) !important; left: auto !important; transform: none !important; }
  #leave-here-button { min-width: 108px !important; min-height: 34px !important; padding: 6px 12px !important; font-size: clamp(9.5px, 0.95vw, 11px) !important; border-radius: 10px !important; bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 46px) !important; right: max(6px, env(safe-area-inset-right, 0px)) !important; left: auto !important; transform: none !important; }
  #travel-counter #travel-counter-timeline { max-height: 28vh !important; overflow-y: auto !important; }
}

/* Very short landscape (e.g. 812×375, 844×390) — extra compact */
@media (orientation: landscape) and (max-height: 430px) {
  #mission-panel {
    min-width: 112px !important;
    max-width: 18vw !important;
    padding: 4px 5px 3px !important;
    max-height: 46vh !important;
  }
  #condition-score-wrap {
    min-width: 124px !important;
    max-width: 20vw !important;
    padding: 5px 7px !important;
  }
  #pending-panel {
    min-width: 168px !important;
    max-width: 24vw !important;
    max-height: 34vh !important;
    top: calc(max(6px, env(safe-area-inset-top, 0px)) + 44px) !important;
    padding: 7px 7px !important;
  }
  #floor-nav {
    bottom: calc(max(5px, env(safe-area-inset-bottom, 0px)) + 32px) !important;
    padding: 3px 4px !important;
    max-width: 54vw !important;
  }
  #go-button { min-height: 44px !important; padding: 9px 16px !important; font-size: 13px !important; }
  #deliver-button { bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 84px) !important; }
  #leave-here-button { bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 42px) !important; }
}

/* Ensure non-interactive HUD doesn't block canvas clicks */
#mission-panel, #condition-score-wrap { pointer-events: none !important; }
#mission-panel * , #condition-score-wrap * { pointer-events: none !important; }
#pending-panel, #pending-panel * { pointer-events: auto; }
#floor-nav, #floor-nav * { pointer-events: auto; }
#go-button, #deliver-button, #leave-here-button, #dev-refresh, #debug-toggle { pointer-events: auto !important; }

/* No page scrolling in any orientation */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { overscroll-behavior: none; touch-action: none; }
#scene { touch-action: none; }

/* Respect safe areas for full-screen shell */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body > #scene {
  margin-left: calc(-1 * env(safe-area-inset-left, 0px));
  margin-right: calc(-1 * env(safe-area-inset-right, 0px));
}