/* Hirodill V36.69.38 — authoritative responsive UI foundation.
   Loaded last on purpose: older feature-specific styles remain available, while
   viewport ownership, scrolling and safe-area behavior have one final contract. */

:root {
  --visual-vw: 100vw;
  --visual-vh: 100dvh;
  --visual-offset-top: 0px;
  --visual-offset-left: 0px;
  --keyboard-inset: 0px;
  --keyboard-visible-vh: 100dvh;
  --ui-safe-top: max(6px, env(safe-area-inset-top));
  --ui-safe-right: max(6px, env(safe-area-inset-right));
  --ui-safe-bottom: max(6px, env(safe-area-inset-bottom));
  --ui-safe-left: max(6px, env(safe-area-inset-left));
  --ui-gap: clamp(6px, 1.1vmin, 14px);
  --ui-touch: 42px;
  --ui-panel-max: 1180px;
}

html,
body,
.app-shell,
.game-frame {
  box-sizing: border-box;
  width: 100%;
  /* V36.69.50: the game viewport belongs to the layout viewport, not to the
     keyboard-shrunk VisualViewport. Modals may follow --visual-vh; gameplay
     must stay full-size behind the IME or the HUD/chat collapses upward. */
  height: 100%;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* The real VisualViewport owns every game modal. Browser chrome, fullscreen,
   keyboard and notches can no longer leave the lower/right edge unreachable. */
.menu-overlay {
  position: fixed !important;
  z-index: 200 !important;
  top: var(--visual-offset-top, 0px) !important;
  left: var(--visual-offset-left, 0px) !important;
  width: var(--visual-vw, 100vw) !important;
  height: var(--visual-vh, 100dvh) !important;
  max-width: var(--visual-vw, 100vw) !important;
  max-height: var(--visual-vh, 100dvh) !important;
  padding: var(--ui-safe-top) var(--ui-safe-right) var(--ui-safe-bottom) var(--ui-safe-left) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

.menu-overlay[hidden] { display: none !important; }

.menu-overlay > .game-menu-window,
.menu-overlay > .menu-window {
  position: relative !important;
  display: grid !important;
  place-items: stretch !important;
  width: min(100%, var(--ui-panel-max)) !important;
  height: min(100%, 820px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: var(--ui-panel-max) !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: clamp(12px, 2vmin, 24px) !important;
  overflow: hidden !important;
  contain: layout paint;
}

.game-menu-window > .menu-page:not([hidden]) {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

.game-menu-window > .menu-page[hidden] { display: none !important; }

.menu-page--scroll-fallback:not([hidden]) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.menu-back-button {
  position: fixed !important;
  z-index: 240 !important;
  top: calc(var(--visual-offset-top, 0px) + var(--ui-safe-top)) !important;
  left: calc(var(--visual-offset-left, 0px) + var(--ui-safe-left)) !important;
  width: var(--ui-touch) !important;
  height: var(--ui-touch) !important;
  min-width: var(--ui-touch) !important;
  min-height: var(--ui-touch) !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: manipulation !important;
}

.menu-page > h2,
.menu-title-block,
.status-page-heading,
.attribute-page-heading,
.blacksmith-header,
.bank-page > h2,
.bank-page-tabs,
.inventory-tabs,
.store-tabs {
  flex: 0 0 auto;
  min-width: 0;
}

.game-menu-window button,
.game-menu-window input,
.game-menu-window select,
.game-menu-window textarea {
  max-width: 100%;
  touch-action: manipulation;
}

/* Home menu scales up to desktop but never creates giant sparse cards. */
.menu-home:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: var(--ui-gap);
  padding-inline: clamp(38px, 5vw, 66px);
}

.menu-title-block { margin: 0 !important; }
.menu-tile-grid {
  align-self: center;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: var(--ui-gap) !important;
}
.menu-tile { min-width: 0; min-height: clamp(68px, 10vh, 104px); }

/* Standard text/config/account pages use one scroll owner. */
.config-page:not([hidden]),
.account-page:not([hidden]),
.social-page:not([hidden]),
.support-page:not([hidden]),
.credits-page:not([hidden]),
.admin-inventory-page:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 2px clamp(40px, 5vw, 66px) 12px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* Status and attributes own a fixed header and one flexible content area. */
.status-page:not([hidden]),
.attributes-page:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--ui-gap);
  padding-inline: clamp(40px, 5vw, 66px);
  overflow: hidden !important;
}

.status-page-heading,
.attribute-page-heading { margin: 0 !important; }

.status-page .status-dashboard:not([hidden]),
.attributes-page .attribute-subpage:not([hidden]) {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.status-page .status-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.attribute-panel--qol { min-height: 0; }
.attribute-row > div { min-width: 0; }
.attribute-row small { overflow-wrap: anywhere; }

/* Inventory: title/tabs remain reachable; the active tab owns overflow. */
.inventory-page:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: var(--ui-gap);
  padding-inline: clamp(40px, 4vw, 58px);
  overflow: hidden !important;
}

.inventory-page > h2,
.inventory-tabs { margin: 0 !important; }
.inventory-tabs-content,
.inventory-tab-panel:not([hidden]) {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.inventory-layout-v31 {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.inventory-layout-v31 > *,
.inventory-layout-v31 .responsive-accordion-panel { min-width: 0; min-height: 0; }

/* Merchant, forge and bank share the same shell contract. */
.merchant-page:not([hidden]),
.blacksmith-page:not([hidden]),
.bank-page:not([hidden]),
.store-page:not([hidden]) {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  padding-inline: clamp(40px, 4vw, 58px);
}

.merchant-page:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); }
.blacksmith-page:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); }
.bank-page:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); }
.store-page:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); }

.merchant-layout,
.blacksmith-layout,
.bank-page-content,
.bank-view:not([hidden]),
.bank-layout,
.store-content,
.store-view:not([hidden]) {
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.merchant-buy-grid,
.merchant-sell-grid,
.blacksmith-equipment-grid,
.blacksmith-recipe-grid,
.blacksmith-commerce-panel,
.bank-grid,
.bank-material-panel,
.material-commerce-grid,
.store-view:not([hidden]) {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* Compact landscape: reserve a close rail and use every remaining pixel. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --ui-touch: 40px; --ui-gap: 5px; }

  .menu-overlay { place-items: stretch !important; padding: 3px !important; }
  .menu-overlay > .game-menu-window,
  .menu-overlay > .menu-window {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 4px !important;
    border-radius: 9px !important;
  }

  .game-menu-window > .menu-page:not([hidden]) { padding: 2px 5px 5px 46px !important; }
  .menu-page > h2 { margin: 0 0 4px !important; font-size: clamp(.95rem, 3.5vmin, 1.25rem) !important; }
  .menu-home:not([hidden]) { padding: 3px 6px 5px 46px !important; }
  .menu-title-block { align-self: end; }
  .menu-title-block h2 { font-size: clamp(1rem, 4vmin, 1.35rem) !important; }
  .menu-title-block small { font-size: .52rem; }
  .menu-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-tile { min-height: 54px !important; padding: 5px 8px !important; }
  .menu-tile-icon { width: 30px !important; height: 30px !important; }

  .status-page:not([hidden]),
  .attributes-page:not([hidden]),
  .inventory-page:not([hidden]),
  .merchant-page:not([hidden]),
  .blacksmith-page:not([hidden]),
  .bank-page:not([hidden]),
  .store-page:not([hidden]) { padding: 2px 5px 5px 46px !important; }

  .status-page .status-dashboard { gap: 5px !important; }
  .status-card { padding: 5px 7px !important; }
  .attribute-row { min-height: 42px !important; }
  .attribute-row small { display: none; }

  .bank-gold-panel { margin-bottom: 4px !important; }
  .bank-page-tabs,
  .blacksmith-page-tabs,
  .store-tabs,
  .inventory-tabs { margin-bottom: 4px !important; }
}

/* Portrait phones: one readable column. The page scrolls instead of shrinking. */
@media (orientation: portrait) and (max-width: 599px) {
  :root { --ui-touch: 44px; }
  .menu-overlay { place-items: stretch !important; padding: 4px !important; }
  .menu-overlay > .game-menu-window,
  .menu-overlay > .menu-window {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 7px !important;
    border-radius: 10px !important;
  }
  .game-menu-window > .menu-page:not([hidden]) { padding: 5px 5px 14px 50px !important; }
  .menu-home:not([hidden]) { padding: 8px 8px 14px 50px !important; overflow-y: auto !important; }
  .menu-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; }
  .menu-tile { min-height: 68px !important; }

  .status-page .status-dashboard { grid-template-columns: 1fr !important; }
  .account-layout { grid-template-columns: 1fr !important; }
  .attribute-summary--qol { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .inventory-layout-v31,
  .merchant-layout,
  .blacksmith-layout,
  .bank-layout { grid-template-columns: 1fr !important; overflow-y: auto !important; }

  .inventory-tab-panel:not([hidden]),
  .merchant-layout,
  .blacksmith-layout,
  .bank-view:not([hidden]) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-layout-v31 { height: auto; }
  .inventory-layout-v31 > * { min-height: max-content; }
  .bank-layout { height: auto; }
  .bank-storage-panel,
  .bank-inventory-panel { min-height: 280px; }
}

/* Tablets keep generous touch targets without inheriting cramped phone rules. */
@media (pointer: coarse) and (min-width: 600px) and (min-height: 600px) {
  :root { --ui-touch: 48px; --ui-panel-max: 1120px; }
  .game-menu-window button { min-height: 42px; }
  .menu-tile { min-height: 92px; }
}

/* Desktop and ultrawide stay centered and density-limited. */
@media (pointer: fine) and (min-width: 1200px) {
  :root { --ui-panel-max: 1180px; }
  .menu-overlay > .game-menu-window,
  .menu-overlay > .menu-window { min-height: min(76vh, 680px); }
}

@media (pointer: fine) and (min-width: 2200px) {
  :root { --ui-panel-max: 1320px; }
  .menu-overlay > .game-menu-window,
  .menu-overlay > .menu-window { height: min(82vh, 860px) !important; }
}

/* The virtual keyboard may reduce the visual viewport to a thin strip. */
.virtual-keyboard-open .login-card,
.virtual-keyboard-open .account-page:not([hidden]) {
  max-height: var(--visual-vh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.virtual-keyboard-open .chat-dock.open {
  max-height: var(--keyboard-visible-vh, 100dvh) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .game-menu-window *,
  .exchange-window * { scroll-behavior: auto !important; }
}