/* Sprint 14: one responsive layer for the existing game surfaces. */
html {
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.enotTouch14,
html.enotTouch14 body {
  overscroll-behavior: none;
}

html.enotTouch14 button,
html.enotTouch14 input,
html.enotTouch14 select,
html.enotTouch14 textarea,
html.enotTouch14 [role="button"] {
  touch-action: manipulation;
}

/* Touch devices use the existing forest menu as the single secondary-action home. */
.enotTouch14.hudCompact #hudPrimaryActions { display: none; }
.enotTouch14.hudCompact #enotActionDock {
  position: fixed;
  inset: max(70px, calc(env(safe-area-inset-top) + 58px)) max(10px, env(safe-area-inset-right)) auto auto;
  width: min(330px, calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right))));
  max-height: calc(100dvh - max(86px, env(safe-area-inset-top) + 70px) - max(10px, env(safe-area-inset-bottom)));
  padding: 12px;
  overflow: auto;
}
.enotTouch14.hudCompact #enotActionDock.hudMoreOpen > button {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-height: 46px;
  font-size: 16px !important;
}
.enotTouch14.enotModal14 #saveStatus11,
.enotTouch14.enotModal14 #hudCraftRail,
.enotTouch14.enotModal14 #s4InventoryDock:not(.hudInventoryOpen) { visibility: hidden !important; }

/* Quick pockets occupy only the space between controls. Opening inventory releases the whole screen. */
.enotTouch14.hudCompact #s4InventoryDock {
  left: max(8px, env(safe-area-inset-left));
  width: max-content;
  max-width: calc(100vw - 124px - max(8px, env(safe-area-inset-left)) - env(safe-area-inset-right));
  transform: none;
}
.enotTouch14.hudCompact #s4InventoryDock.hudInventoryOpen {
  position: fixed;
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  width: auto;
  max-width: none;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  transform: none;
  overscroll-behavior: contain;
}
.enotTouch14.hudCompact #s4InventoryDock.hudInventoryOpen .s4InventoryGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.enotTouch14.hudCompact #inventoryV4Menu button,
.enotTouch14.hudCompact #yoGearPicker button { min-height: 46px; }
.enotTouch14.hudCompact #inventoryV4Tooltip,
.enotTouch14.hudCompact #inventoryV4Menu { max-width: calc(100vw - 16px); }

/* Safe top row. Secondary buttons no longer compete with the clock. */
.enotTouch14.hudCompact #stats {
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
}
.enotTouch14.hudCompact #dayWrap {
  top: max(62px, calc(env(safe-area-inset-top) + 56px)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
}
.enotTouch14.hudCompact #clock { width: 62px !important; height: 62px !important; }
.enotTouch14.hudCompact #hudCraftRail {
  top: max(68px, calc(env(safe-area-inset-top) + 62px));
  left: max(9px, env(safe-area-inset-left));
}
.enotTouch14 #s6Nudge {
  top: max(120px, calc(env(safe-area-inset-top) + 112px));
  width: min(520px, calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right))));
  max-height: 86px;
  overflow: auto;
}
.enotTouch14 #saveStatus11 {
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 126px) !important;
  max-width: min(300px, calc(100vw - 24px)) !important;
}

/* All modal-like game windows share bounded, scrollable, finger-sized behaviour. */
@media (max-width: 1024px), (pointer: coarse) {
  #title, #death, #pause, #coop {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .card {
    box-sizing: border-box;
    width: min(620px, 100%);
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: clamp(18px, 4vw, 30px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .card button, .coopForm input, #soloName { min-height: 46px; }
  .panel,
  #bookCard,
  .s7Panel,
  .s8Window,
  #s10Panel,
  #yoJournal, #yoCargo, #yoMerchant, #yoHome, #yoAlbum, #yoMailboxPanel {
    box-sizing: border-box !important;
    width: min(720px, calc(100vw - max(18px, env(safe-area-inset-left) + env(safe-area-inset-right)))) !important;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    padding: clamp(13px, 2.6vw, 20px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
  .s8Overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .panel button,
  #bookCard button,
  .s7Panel button,
  .s8Window button,
  .s8Window select,
  #s10Panel button,
  #yoJournal button, #yoCargo button, #yoMerchant button, #yoHome button, #yoAlbum button, #yoMailboxPanel button { min-height: 44px; }
  #mapPanel { width: min(720px, calc(100vw - 18px)) !important; }
  #mapCanvas { max-height: calc(100dvh - 190px); width: auto !important; max-width: 100%; }
  #achGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; }
  #profList, #beastList, #epicList { max-height: none; }
  #book { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #accountDialog13 {
    width: min(520px, calc(100vw - max(18px, env(safe-area-inset-left) + env(safe-area-inset-right))));
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: clamp(18px, 4vw, 28px);
  }
  #accountDialog13 input { min-height: 48px; font-size: 16px; }
  #accountDialog13 button, .accountOpen13 { min-height: 46px; }
  #s7Chat { right: max(9px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 132px); }
  #coopRecovery13 { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .card { border-width: 2px; border-radius: 16px; padding: 16px 14px; }
  .card h1 { font-size: clamp(38px, 13vw, 48px); margin-bottom: 10px; }
  .card h1.coopH { font-size: 38px; }
  .card .sub { font-size: 16px; }
  .card .sub2 { font-size: 13.5px; margin-bottom: 12px; }
  .card .sub br, .card .sub2 br { display: none; }
  .card button { width: min(100%, 360px); padding: 10px 14px; font-size: 19px; }
  .card button.backBtn { width: auto; }
  #soloName { width: 100%; font-size: 16px; }
  .coopRow { flex-direction: column; gap: 4px; }
  .coopForm input { font-size: 16px; }
  .card .keys { margin-top: 12px; font-size: 13px; }

  .hudCompact #stats { gap: 5px; }
  .hudCompact .stat { width: 38px; height: 38px; }
  .hudCompact .stat .ico { font-size: 16px; }
  .hudCompact .stat .num { bottom: -12px; font-size: 11px; }
  .enotTouch14.hudCompact #hudCraftRail { top: max(61px, calc(env(safe-area-inset-top) + 55px)); }
  .enotTouch14.hudCompact #hudCraftRail .hudButton { min-height: 44px; }
  .enotTouch14.hudCompact #dayWrap { top: max(59px, calc(env(safe-area-inset-top) + 53px)) !important; }
  .enotTouch14.hudCompact #clock { width: 56px !important; height: 56px !important; }
  .enotTouch14 #s6Nudge { top: max(112px, calc(env(safe-area-inset-top) + 105px)); font-size: 12px; }

  .hudCompact #hudCraftPanel,
  .hudCompact #hudHelpPanel,
  .hudCompact #enotActionDock,
  .hudCompact #chest {
    position: fixed;
    inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: none;
    overflow: auto;
  }
  .hudCompact #s4InventoryDock.hudInventoryOpen .s4InventoryGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #achGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 2px; }
  .achCell img { width: 56px; height: 56px; }
  #achToast { top: max(8px, env(safe-area-inset-top)); width: calc(100vw - 18px); padding: 8px; }
  #achToast img { width: 54px; height: 54px; }
  .s8BookHead { align-items: flex-start; gap: 10px; }
  .s8BookCover { width: 52px; height: 66px; }
  .s8Page { min-height: 0; padding: 14px; }
  .s8Desc { font-size: 17px; }
  .s8Nav { flex-wrap: wrap; }
  #yoAlbum { inset: auto !important; }
  #s7Chat { width: calc(100vw - 18px); }
  #accountDialog13 h2 { font-size: 25px; }
  #accountDialog13 { font-size: 17px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .enotTouch14.hudCompact #s4InventoryDock {
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 500px - env(safe-area-inset-left) - env(safe-area-inset-right));
    transform: translateX(-50%);
  }
  .enotTouch14.hudCompact #s4InventoryDock.hudInventoryOpen {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    transform: none;
  }
  .enotTouch14.hudCompact #stats { top: max(6px, env(safe-area-inset-top)); }
  .enotTouch14.hudCompact #hudCraftRail { top: max(58px, calc(env(safe-area-inset-top) + 50px)); }
  .enotTouch14.hudCompact #dayWrap { top: max(54px, calc(env(safe-area-inset-top) + 48px)) !important; }
  .enotTouch14 #s6Nudge {
    top: max(8px, env(safe-area-inset-top));
    width: min(430px, calc(100vw - 390px));
    max-height: 58px;
  }
  #title .card, #coop .card, #death .card, #pause .card { max-width: min(760px, calc(100vw - 18px)); padding: 12px 18px; }
  .card h1 { font-size: 34px; }
  .card h1 br { display: none; }
  .card .sub2 { display: none; }
  .card .keys { margin-top: 7px; }
  .card button { min-height: 42px; padding-block: 7px; }
  .panel,
  #bookCard,
  .s7Panel,
  .s8Window,
  #s10Panel,
  #yoJournal, #yoCargo, #yoMerchant, #yoHome, #yoAlbum, #yoMailboxPanel,
  #accountDialog13 { max-height: calc(100dvh - 12px) !important; }
  #mapCanvas { max-height: calc(100dvh - 150px); }
  #s7Chat { bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (min-width: 600px) and (max-width: 899px) and (pointer: coarse) {
  .enotTouch14.hudCompact #s4InventoryDock {
    left: 50%;
    max-width: calc(100vw - 290px - env(safe-area-inset-left) - env(safe-area-inset-right));
    transform: translateX(-50%);
  }
}

@media (min-width: 900px) and (pointer: coarse) {
  .enotTouch14.hudCompact #s4InventoryDock {
    left: 50%;
    max-width: min(680px, calc(100vw - 300px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    transform: translateX(-50%);
  }
}