/*
 * Safari/iPad compatibility layer.
 *
 * Loaded after the existing page styles so the desktop layout remains the
 * default. Keep fixes capability- or coarse-pointer-based instead of relying
 * on a Safari user-agent string.
 */
:root {
  --du-viewport-height: 100vh;
  --du-safe-top: env(safe-area-inset-top, 0px);
  --du-safe-right: env(safe-area-inset-right, 0px);
  --du-safe-bottom: env(safe-area-inset-bottom, 0px);
  --du-safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100dvh) {
  :root {
    --du-viewport-height: 100dvh;
  }
}

html,
body {
  min-height: 100%;
  width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

.du-tablet-combat-status {
  display: none;
}

.du-tablet-enemy-layout-details {
  display: none;
}

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

img {
  -webkit-user-drag: none;
}

body.min-h-screen {
  min-height: var(--du-viewport-height) !important;
}

/* Desktop side panels follow the visible viewport when Safari chrome moves. */
@media (min-width: 1280px) {
  #bagPanel,
  #inventoryPanel,
  [data-du-right-panel] {
    height: var(--du-viewport-height) !important;
    max-height: var(--du-viewport-height);
  }
}

/* Drawer panels must not extend behind Safari's toolbar or home indicator. */
@media (max-width: 1279px) {
  #inventoryPanel,
  [data-du-right-panel] {
    height: var(--du-viewport-height);
    max-height: var(--du-viewport-height);
    padding-top: var(--du-safe-top);
    padding-right: var(--du-safe-right);
    padding-bottom: var(--du-safe-bottom);
  }

  /*
   * The panel already uses left:12% and right:0. Tailwind's w-full used to
   * add width:100%, pushing the final 12% (including Close) off the iPad.
   */
  #inventoryPanel {
    width: auto !important;
    max-width: none !important;
  }

  #inventoryPanel > div:first-child > button[data-action="ui-set-panel"] {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-right: max(0.25rem, var(--du-safe-right));
    border: 1px solid #64748b;
    border-radius: 0.5rem;
    background: #1e293b;
    color: #f8fafc;
    font-size: 1.25rem;
    font-weight: 800;
  }
}

/* Compact authoritative combat resources for coarse-pointer tablets only. */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1279px) {
  .du-tablet-combat-panel {
    min-height: 0 !important;
    padding-top: 0.45rem !important;
  }

  .du-tablet-combat-panel > .du-tablet-combat-cards {
    margin-top: 0 !important;
  }

  .du-tablet-combat-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0.5rem;
    border: 1px solid rgba(71, 85, 105, 0.9);
    border-radius: 0.75rem;
    background: rgba(2, 6, 23, 0.86);
  }

  .du-tablet-combat-panel > .du-tablet-combat-status {
    margin-top: 0.35rem !important;
    margin-bottom: 0 !important;
  }

  .du-tablet-combat-panel > .du-tablet-combat-status + * {
    margin-top: 0.35rem !important;
  }

  .du-tablet-status-zone {
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.82);
  }

  .du-tablet-status-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1rem;
    white-space: nowrap;
  }

  .du-tablet-status-heading b {
    margin-left: auto;
    color: #f8fafc;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
  }

  .du-tablet-status-bar {
    height: 0.4rem;
    margin-top: 0.3rem;
  }

  .du-tablet-shield {
    flex: 0 0 auto;
    padding: 0.05rem 0.3rem;
    border: 1px solid #0e7490;
    border-radius: 999px;
    color: #67e8f9;
    font-size: 0.65rem;
    font-weight: 800;
  }

  .du-tablet-focus {
    min-width: 4.75rem;
  }

}

@media (pointer: coarse) and (min-width: 700px) and (max-width: 1279px) {
  .du-tablet-combat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .du-tablet-enemy-desktop-details {
    display: none;
  }

  .du-tablet-enemy-layout-details {
    display: grid;
    margin-top: 0.45rem;
  }

  .du-tablet-enemy-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    font-size: 0.65rem;
    line-height: 0.9rem;
  }

  .du-tablet-enemy-armor {
    margin-top: 0.35rem;
  }

  .du-tablet-enemy-armor + .du-tablet-enemy-metrics {
    margin-top: 0.2rem;
  }

  .du-tablet-enemy-metrics > span {
    min-width: 0;
    white-space: nowrap;
  }

  .du-tablet-enemy-identity > div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.35rem;
    margin-top: 0;
    white-space: nowrap;
  }

  .du-tablet-enemy-card .du-tablet-enemy-intent {
    margin-top: 0.5rem;
  }

  .du-tablet-enemy-card .du-tablet-enemy-intent > div {
    min-height: 2rem;
    padding: 0.35rem 0.45rem;
  }
}
}

/*
 * Direct body overlays include confirmations, rules, options and companion
 * profiles. The overlay scrolls if Safari's visible area or keyboard is
 * smaller than the dialog.
 */
body .fixed.inset-0 {
  box-sizing: border-box;
  min-height: var(--du-viewport-height);
  max-height: var(--du-viewport-height);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: max(0.75rem, var(--du-safe-top));
  padding-right: max(0.75rem, var(--du-safe-right));
  padding-bottom: max(0.75rem, var(--du-safe-bottom));
  padding-left: max(0.75rem, var(--du-safe-left));
}

body .fixed.inset-0 > .panel,
body .fixed.inset-0 > section,
body .fixed.inset-0 > [role="dialog"] {
  max-height: calc(var(--du-viewport-height) - 1.5rem) !important;
  max-height: calc(var(--du-viewport-height) - max(1.5rem, var(--du-safe-top)) - max(1.5rem, var(--du-safe-bottom))) !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent momentum-scroll chains from dragging the whole game underneath. */
.scrollbar,
[class*="overflow-y-auto"] {
  -webkit-overflow-scrolling: touch;
}

/* iPad/WebKit: reduce repeated compositing and hover work on touch screens. */
@media (pointer: coarse) {
  .panel {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  }

  .btn:hover:not(:disabled),
  .die:hover:not(.sealed):not(.frozen):not(.captured) {
    filter: none !important;
    transform: none !important;
  }

  .backdrop-blur,
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .reward-burst-card::after {
    display: none !important;
  }

  .reward-burst,
  .combat-float-item {
    will-change: auto !important;
  }
}

/* Prevent Safari flex/grid children from forcing horizontal overflow. */
#app,
#guildApp,
#shopApp,
#tavernApp,
#cemeteryApp,
main,
aside,
section {
  min-width: 0;
}

/*
 * iPad landscape is usually 1024–1194 CSS pixels and therefore below the
 * desktop xl breakpoint. Guild layouts with hard minimum columns otherwise
 * overflow horizontally; stack only on coarse-pointer tablets.
 */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (max-width: 1279px) {
  .du-guild-page #app [class*="lg:grid-cols-"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .du-guild-page #app [class*="max-h-"] {
    max-height: min(62svh, 680px);
  }
}