/* Mobile layout delta; explicit specificity keeps the frozen theme from overriding narrow layouts. No game rules change. */
@media (max-width: 850px) {
  html:root .auth-screen {
    min-height: 100svh;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    gap: 16px;
    align-content: start;
  }
  html:root .auth-art { min-height: 0; }
  html:root .auth-art .brand { top: 8px; }
  html:root .auth-companions { height: clamp(100px, 28vw, 170px); margin: 40px 0 8px; }
  html:root .auth-companions img { object-position: center 34%; }
  html:root .auth-art h1 { font-size: 22px; margin: 0; line-height: 1.4; }
  html:root .auth-art h1 br { display: none; }
  html:root .auth-card { padding: 22px; min-width: 0; }
  html:root .auth-card form { gap: 14px; margin-top: 20px; }
}

@media (max-width: 767px) {
  html { scroll-padding-block: 76px 90px; }
  html:root .game-inset { min-width: 0; }
  html:root .game-inset .game-main {
    padding: 12px max(12px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  html:root .game-inset .topbar {
    padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
    gap: 8px;
  }
  html:root .topbar [data-slot='sidebar-trigger'] { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  html:root .resource-menu summary { min-height: 44px; display: flex; align-items: center; }
  html:root .mobile-navigation {
    padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
  }
  html:root [data-sidebar='sidebar'][data-mobile='true'] {
    width: min(320px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
  html:root [data-mobile='true'] [data-sidebar='content'] { min-height: 0; overscroll-behavior-y: contain; }
  html:root [data-mobile='true'] [data-sidebar='menu-button'] { min-height: 44px; }
  html:root .game-main :is(input:not([type='checkbox']):not([type='radio']), select, textarea),
  html:root [role='dialog'] :is(input:not([type='checkbox']):not([type='radio']), select, textarea) { font-size: 16px !important; max-width: 100%; min-width: 0; }
  html:root .game-main :is(.collection-controls button, .collection-pagination button, .mon-card .text-link, .hunt-toolbar .text-link) { min-height: 44px; }
  html:root .mon-card > .row:last-child { flex-wrap: wrap; }
  html:root .mon-card .text-link { display: inline-flex; align-items: center; justify-content: center; padding-inline: 6px; }
  html:root .game-main :is(.panel, .panel-heading, .collection-toolbar, .collection-controls, .sell-form) { min-width: 0; }
  html:root .collection-controls { gap: 8px; }
  html:root .game-main .page-heading { min-height: 82px; margin-bottom: 14px; }
  html:root .game-main .page-heading h1 { overflow-wrap: anywhere; }
  html:root .game-main .heading-meta { flex-shrink: 0; }
  html:root .game-main :is(.idle-tabs, .biome-tabs) { scroll-padding-inline: 12px; overscroll-behavior-x: contain; }
  html:root .game-footer { flex-wrap: wrap; }
  html:root [data-slot='dialog-content'], html:root [data-slot='alert-dialog-content'] {
    width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    scroll-padding-block: 16px;
  }
  html:root .detail-modal { padding: 16px !important; }
  html:root .detail-modal .modal-top button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  html:root .detail-modal [data-slot='tabs-list'] { flex-wrap: wrap; height: auto; }
  html:root .detail-modal [data-slot='tabs-trigger'] { min-height: 44px; flex: 1 1 auto; }
  html:root .detail-hero { flex-wrap: wrap; }
  html:root .detail-hero > strong { display: block; font-size: 20px; }
  html:root .auth-global-error { width: calc(100vw - 24px); max-height: 40dvh; overflow: auto; }
}

@media (max-width: 480px) {
  html:root .detail-hero { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 12px; }
  html:root .detail-hero > .sprite { width: 80px; height: 90px; }
  html:root .detail-hero > strong { grid-column: 2; justify-self: end; }
}

/* A single readable card on the narrowest phones; normal phones retain two. */
@media (max-width: 359px) {
  html:root .mon-grid { grid-template-columns: minmax(0, 1fr); }
  html:root .game-inset .topbar { padding-inline: 8px; }
  html:root .game-inset .currencies { gap: 4px; }
  html:root .game-inset .topbar > .row { gap: 2px; }
  html:root .auth-card { padding: 18px; }
  html:root .auth-art h1 { font-size: 20px; }
}

/* Short landscape and an open keyboard must not strand dialog actions. */
@media (max-height: 500px) and (max-width: 1024px) {
  html:root .topbar { position: relative; }
  html:root .auth-screen { align-items: start; }
  html:root .auth-companions { height: 90px; }
  html:root [data-slot='dialog-content'], html:root [data-slot='alert-dialog-content'] { max-height: calc(100dvh - 24px); overflow-y: auto; }
}