/* Touch-first phone layout: safe areas, non-overlapping HUD and reachable controls. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  html, body { overscroll-behavior: none; touch-action: none; }

  .screen {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .panel {
    width: min(100%, 430px);
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 18px;
    border-radius: 12px;
  }
  .title-panel h1, .compact h1 {
    font-size: clamp(34px, 12vw, 48px) !important;
    letter-spacing: .06em !important;
  }
  .title-panel .subtitle { margin-top: 7px; letter-spacing: .2em; font-size: 11px; }
  .tagline { margin: 12px auto 14px; font-size: 13px; line-height: 1.35; }
  .legal { margin-top: 12px; font-size: 9px; }
  .brand-mark { height: 27px; margin-bottom: 5px; }
  .brand-mark span { width: 22px; height: 22px; }
  .brand-mark span:nth-child(2) { height: 29px; }
  .menu-buttons { gap: 7px; }
  .menu-buttons button { min-height: 46px; }
  .dialog-actions { gap: 8px; margin-top: 16px; }
  .dialog-actions button { flex: 1 1 130px; }
  .input-row { grid-template-columns: 1fr; }
  .input-row button { width: 100%; }
  .settings-grid { gap: 11px; }
  .help-grid > div { grid-template-columns: 96px 1fr; }
  .help-grid { gap: 5px; }
  .help-grid span { font-size: 12px; }

  #top-left, #top-right {
    top: calc(env(safe-area-inset-top) + 50px);
    padding: 5px 7px;
    font-size: 10px;
    line-height: 1.35;
    background: #050b0aa8;
    backdrop-filter: blur(5px);
  }
  #top-left { left: calc(env(safe-area-inset-left) + 7px); }
  #top-right { right: calc(env(safe-area-inset-right) + 7px); }
  #world-line, #quest-line, #perf-line { display: none; }
  body:not(.creative-mode) #top-left { display: none; }
  #mode-badge { margin: 0; }
  #ammo-line { max-width: 135px; }
  #status-bar {
    left: calc(env(safe-area-inset-left) + 8px);
    right: calc(env(safe-area-inset-right) + 8px);
    top: calc(env(safe-area-inset-top) + 88px);
    bottom: auto;
    transform: none;
    width: auto;
    align-items: center;
  }
  .heart { width: 14px; height: 14px; font-size: 15px; line-height: 14px; }
  .bubble { width: 12px; height: 12px; }
  #hotbar {
    bottom: calc(env(safe-area-inset-bottom) + 7px);
    grid-template-columns: repeat(9, calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 22px) / 9));
    gap: 1px;
    padding: 3px;
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 8px);
    pointer-events: auto;
    touch-action: none;
  }
  #hotbar .slot { width: 100%; height: auto; aspect-ratio: 1; min-width: 0; }
  #hotbar .slot img { left: 10%; top: 8%; width: 80%; height: 80%; }
  #hotbar .slot .key { display: none; }
  #hotbar .slot .count { font-size: 11px; }
  #selected-name {
    bottom: calc(env(safe-area-inset-bottom) + 52px);
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #autosave-indicator {
    right: calc(env(safe-area-inset-right) + 7px);
    bottom: calc(env(safe-area-inset-bottom) + 54px);
    font-size: 10px;
  }
  #toast-stack {
    top: calc(env(safe-area-inset-top) + 96px);
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px);
  }
  .toast { max-width: 100%; padding: 8px 10px; font-size: 12px; }

  .inventory-window {
    width: 100%;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
    padding: 12px;
    border-radius: 10px;
  }
  .inventory-head { position: sticky; top: 0; z-index: 3; background: var(--panel-2); }
  .slot-grid { grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 4px; }
  .slot-grid .slot { width: 100%; height: auto; aspect-ratio: 1; }
  .recipe-head { align-items: stretch; flex-direction: column; }
  .recipe-head input { width: 100%; }
  body.creative-mode .inventory-window {
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
  }
  #creative-items { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); max-height: 36vh; }
}

@media (max-width: 950px) and (max-height: 500px) {
  .panel { max-width: 620px; padding: 13px 16px; }
  .title-panel h1, .compact h1 { font-size: 32px !important; }
  .title-panel .subtitle, .tagline, .legal, .brand-mark { display: none; }
  .menu-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #top-left, #top-right { top: calc(env(safe-area-inset-top) + 7px); }
  #status-bar { top: calc(env(safe-area-inset-top) + 45px); }
  #hotbar { grid-template-columns: repeat(9, 36px); width: auto; }
  .slot-grid { grid-template-columns: repeat(9, 42px); }
  #selected-name { bottom: calc(env(safe-area-inset-bottom) + 44px); }
  #toast-stack { top: calc(env(safe-area-inset-top) + 50px); width: min(62vw, 430px); }
  .inventory-layout { grid-template-columns: 1fr 1fr; }
  .inventory-window { overflow: auto; }
  #creative-items { max-height: 150px; }
}