/* D&D presentation-only responsive layer. Desktop geometry remains authoritative
   in the existing component styles; this file owns narrow-screen reflow. */
:root {
  --dnd-page-gutter: clamp(12px, 3vw, 32px);
  --dnd-content-max: 1680px;
  --dnd-touch-target: 44px;
  --dnd-safe-top: env(safe-area-inset-top, 0px);
  --dnd-safe-right: env(safe-area-inset-right, 0px);
  --dnd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dnd-safe-left: env(safe-area-inset-left, 0px);
}
html { min-width: 0; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, .hank-blue-page, .hank-gate-inner, #tiles { min-width: 0; max-width: 100%; box-sizing: border-box; }
.hank-blue-page { width: 100%; min-height: 100svh; padding-inline: var(--dnd-safe-left) var(--dnd-safe-right); padding-bottom: max(140px, var(--dnd-safe-bottom)); }
.hank-gate-inner { min-height: 100svh; }
img, svg, video, canvas { max-width: 100%; height: auto; }
:where(p, li, a, code, pre, td, th, label, .character-text-box) { overflow-wrap: anywhere; }
:where(pre, table) { max-width: 100%; }
:where(input, select, textarea) { max-width: 100%; box-sizing: border-box; font-size: max(16px, 1em); }
:where(button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid #ffdd57; outline-offset: 3px; }
dialog { max-width: calc(100vw - (2 * var(--dnd-page-gutter))); max-height: calc(100svh - (2 * var(--dnd-page-gutter))); box-sizing: border-box; overflow: auto; }

.dnd-message-notifications {
  position: fixed;
  top: max(12px, var(--dnd-safe-top));
  right: max(12px, var(--dnd-safe-right));
  z-index: 1200;
}
.dnd-message-notification-button {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(21,56,105,.96);
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.dnd-message-notification-button.has-unread { border-color: #ffdd57; }
.dnd-message-notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ffdd57;
  color: #17233c;
  font-size: 12px;
  font-weight: 800;
  box-sizing: border-box;
}
.dnd-message-notification-panel {
  position: absolute;
  top: 54px;
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70svh, 520px);
  overflow: auto;
  padding: 10px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 14px;
  background: rgba(18,47,89,.98);
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
  box-sizing: border-box;
}
.dnd-message-notification-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  margin: 0 0 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.09);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.dnd-message-notification-row:last-child { margin-bottom: 0; }
.dnd-message-notification-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.dnd-message-notification-row small { opacity: .78; }
.dnd-message-notification-count {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ffdd57;
  color: #17233c;
  font-weight: 800;
}
.dnd-message-notification-read { opacity: .65; font-size: 12px; }
.dnd-message-notification-empty { margin: 8px; }

.dnd-galaxy-map-page {
  flex: 0 0 calc(100vw - (2 * var(--dnd-page-gutter)));
  width: calc(100vw - (2 * var(--dnd-page-gutter)));
  max-width: calc(100vw - (2 * var(--dnd-page-gutter)));
  min-width: 0;
  margin: 0 auto;
}
.dnd-galaxy-map-back-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
}
.dnd-galaxy-map-back-row .hank-button {
  margin: 0;
}
.dnd-galaxy-map-embed-shell {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #102847;
  box-shadow: 0 16px 44px rgba(0,0,0,.26);
}
.dnd-galaxy-map-embed {
  display: block;
  width: 100%;
  height: max(640px, calc(100svh - 150px));
  overflow: hidden;
  border: 0;
  background: #102847;
}

@media (max-width: 1200px) {
  #tiles { width: 100%; }
  .home-actions.home-action-buttons {
    width: calc(100% - (2 * var(--dnd-page-gutter)));
    max-width: 1000px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
  .home-actions.home-action-buttons .hank-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 1100px) {
  .party-page-v2, .character-page-v5 { width: calc(100% - (2 * var(--dnd-page-gutter))); max-width: var(--dnd-content-max); margin-inline: auto; }
  .party-page-v2 { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
  .party-characters-panel { grid-column: 1 / -1; }
  .character-page-v5 { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
  .character-page-v5 > *, .character-sheet-body-v5 > *, .character-right-column-v4 > * { min-width: 0; }
  .character-equipped-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .character-equipped-card { width: min(100%, 300px); max-width: 300px; margin-inline: auto; }
}

@media (max-width: 950px) {
  .dnd-home-split, .home-split { width: calc(100% - (2 * var(--dnd-page-gutter))) !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .dnd-home-grid, .home-split .home-party-row { grid-template-columns: repeat(auto-fit, minmax(210px, 230px)) !important; gap: clamp(16px, 3vw, 28px) !important; }
  .species-native-header { grid-template-columns: minmax(0, 1fr) minmax(220px, 35%); }
  .species-native-header h1, .databank-section-title { font-size: clamp(36px, 7vw, 48px); }
}

/* The desktop character composition needs more width than the general phone
   breakpoint. At tablet widths, keep useful internal columns but remove the
   outer sidebar/main squeeze that caused unreachable right-hand content. */
@media (max-width: 900px) {
  .character-page-v5 {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
    gap: 18px;
  }

  .character-page-v5 > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .character-page-v5 .character-title-bar { order: 1; grid-column: 1 / -1; }
  .character-side-panel { display: contents; }
  .character-side-panel > .hank-button:first-child { order: 2; grid-column: 1 / -1; width: min(220px, 100%); }
  .character-sheet-body-v5,
  .character-mid-column-v4,
  .character-right-column-v4 { display: contents; }
  .character-portrait.square { order: 3; grid-column: 1; }
  .character-data-table-v4 { order: 3; grid-column: 2; }
  .combat-top-row { order: 4; grid-column: 2; }
  .hp-box { order: 5; grid-column: 2; }
  .character-stats-column { order: 6; grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-self: start; }
  .saving-skills-table { order: 6; grid-column: 2; align-self: stretch; }
  .extra-stats-grid { order: 8; grid-column: 1 / -1; }
  .character-utility-row { order: 9; grid-column: 1 / -1; }
  .character-right-lower-grid { order: 10; grid-column: 1 / -1; }
  .traits-full { order: 11; grid-column: 1 / -1; }
  .character-page-v5 > .character-sheet-block-two { order: 12; grid-column: 1 / -1; }
  .character-page-v5 > .character-sheet-block-three { order: 13; grid-column: 1 / -1; }
  .character-page-v5 > .character-sheet-block-four { order: 14; grid-column: 1 / -1; }
  .character-left-actions { order: 20; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

  .character-side-panel .character-left-actions .hank-button,
  .character-side-panel .character-left-actions .theme-edit-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .character-right-lower-grid,
  .character-data-table-v4,
  .character-section { min-width: 0; max-width: 100%; box-sizing: border-box; }

  .combat-top-row { gap: 12px; }
  .character-portrait.square { max-width: 300px; margin-inline: auto; }
  .character-portrait.square img { object-fit: contain; background: var(--char-panel, #f4f7f2); }

  .home-actions.home-action-buttons {
    width: calc(100% - (2 * var(--dnd-page-gutter)));
    max-width: 720px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-actions.home-action-buttons .hank-button { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail),
  .armor-card-grid,
  .wizard-instrument-grid,
  .character-power-card-grid {
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 14px;
  }

  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail) .hank-flip-card,
  .armor-card-grid .hank-flip-card,
  .wizard-instrument-grid .hank-flip-card,
  .character-equipped-grid .hank-flip-card {
    width: 100%;
    min-height: 300px;
  }

  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail) .hank-flip-card-inner,
  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail) .hank-flip-card-face,
  .armor-card-grid .hank-flip-card-inner,
  .armor-card-grid .hank-flip-card-face,
  .wizard-instrument-grid .hank-flip-card-inner,
  .wizard-instrument-grid .hank-flip-card-face,
  .character-equipped-grid .hank-flip-card-inner,
  .character-equipped-grid .hank-flip-card-face { min-height: 300px; }

  .equipment-card .equipment-card-image,
  .armor-card .armor-card-image,
  .wizard-instrument-grid .equipment-card-image,
  .character-equipped-grid .equipment-card-image { height: 120px; min-height: 120px; flex-basis: 120px; }
}

@media (max-width: 720px) {
  .hank-blue-page::before { inset: 10px; border-width: 3px; border-radius: 14px; }
  .hank-blue-page .corner-detail { inset: 18px; }
  .corner-detail::before, .corner-detail::after { width: min(120px, 35vw); }
  .hank-logo { width: min(560px, calc(100% - (2 * var(--dnd-page-gutter)))); margin-top: 56px; margin-inline: auto; transform: none; }
  .hank-logo img { width: 100%; }
  .hank-question { max-width: calc(100% - (2 * var(--dnd-page-gutter))); font-size: clamp(24px, 8vw, 32px); text-align: center; }
  .user-strip { position: relative; inset: auto; width: calc(100% - (2 * var(--dnd-page-gutter))); margin: max(12px, var(--dnd-safe-top)) auto 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; }
  .user-strip button { margin-left: 0; }
  .party-page-v2 { grid-template-columns: minmax(0, 1fr) !important; }
  .party-page-v2 > *, .character-page-v5 > * { grid-column: 1 !important; }
  .party-side-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .party-side-panel > * { min-width: 0; }
  .two-wide-boxes, .routine-top-row { grid-template-columns: minmax(0, 1fr) !important; }
  .species-native-page { padding: clamp(14px, 4vw, 24px); }
  .species-native-header { grid-template-columns: minmax(0, 1fr); }
  .species-native-art { height: clamp(220px, 70vw, 360px); }
  .home-actions, .species-wizard-navigation, .dialog-actions { flex-wrap: wrap; }
  :where(.hank-button, button, [role="button"]) { min-height: var(--dnd-touch-target); }
}

@media (max-width: 640px) {
  .character-page-v5 { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .character-theme-title { padding: 12px 16px; font-size: clamp(26px, 8vw, 32px); }
  .character-sheet-body-v5 { padding: 14px; gap: 12px; }

  .character-portrait.square { order: 3; grid-column: 1; width: min(100%, 280px); max-height: min(62svh, 280px); margin: 0 auto; }
  .character-portrait.square img { width: 100%; height: 100%; object-fit: contain; }
  .character-data-table-v4 { order: 4; grid-column: 1; }
  .combat-top-row { order: 5; grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 6px 0; gap: 8px; }
  .combat-top-row > div { min-width: 0; padding: 10px 6px; }
  .combat-top-row strong { font-size: 23px; }
  .hp-box { order: 6; grid-column: 1; margin-bottom: 0; }
  .character-stats-column { order: 7; grid-column: 1; }
  .saving-skills-table { order: 8; grid-column: 1; }
  .extra-stats-grid { order: 9; grid-column: 1; margin-top: 0; }
  .character-utility-row { order: 10; grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
  .character-utility-row .character-utility-box:last-child { grid-column: 1 / -1; }
  .character-death-save-line { grid-template-columns: minmax(90px, 1fr) auto; }
  .character-death-save-line > span:last-child { display: flex; flex-wrap: nowrap; gap: 2px; }
  .character-right-lower-grid { order: 11; grid-column: 1; gap: 12px; }
  .traits-full { order: 12; grid-column: 1; }

  .character-stats-column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .char-stat-label { font-size: 16px; padding: 6px 4px; }
  .char-stat-mod { font-size: 24px; padding: 2px 0; }
  .char-stat-score { font-size: 16px; }
  .character-left-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .character-sheet-block-two,
  .character-sheet-block-three,
  .character-sheet-block-four { margin-top: 22px; padding: 14px; }

  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail),
  .armor-card-grid,
  .wizard-instrument-grid,
  .character-power-card-grid { gap: 10px; }

  .hank-flip-card-face { padding: 10px; }
  .hank-flip-card-title { font-size: 17px; margin-bottom: 7px; }
  .equipment-card-primary-stat { font-size: 16px; }
  .equipment-flip-hint, .armor-flip-hint { padding-top: 5px; margin-top: auto; }
}

@media (max-width: 480px) {
  .hank-tile-row { gap: 16px; }
  .dnd-home-grid, .home-split .home-party-row { grid-template-columns: minmax(0, 1fr) !important; }
  .dnd-home-card, .home-split .hank-card-tile { width: min(100%, 280px) !important; margin-inline: auto; }
  .party-side-panel { grid-template-columns: minmax(0, 1fr); }
  .species-wizard-navigation { display: grid; grid-template-columns: minmax(0, 1fr); }
  .species-wizard-navigation-left, .species-wizard-navigation-right, .species-wizard-navigation .hank-button { width: 100%; }
}

@media (max-height: 500px) {
  .hank-logo { margin-top: 28px; }
  .hank-question { margin-top: 18px; }
  .hank-tile-row { margin-top: 20px; }

  .character-page-v5 { gap: 10px; margin-bottom: 60px; }
  .character-theme-title { padding-block: 9px; }
  .character-sheet-body-v5 { padding: 10px; gap: 9px; }
  .character-portrait.square { width: min(46vw, 190px); max-height: 190px; }
  .character-stats-column,
  .character-left-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .character-side-panel .hank-button { min-height: var(--dnd-touch-target); padding-block: 8px; }
  .character-utility-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-utility-row .character-utility-box:last-child { grid-column: 1 / -1; }
  .character-utility-box { min-height: 0; }

  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail) .hank-flip-card,
  .armor-card-grid .hank-flip-card,
  .wizard-instrument-grid .hank-flip-card,
  .character-equipped-grid .hank-flip-card,
  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail) .hank-flip-card-inner,
  .equipment-card-grid:not(.exact-item-detail):not(.exact-power-detail) .hank-flip-card-face,
  .armor-card-grid .hank-flip-card-inner,
  .armor-card-grid .hank-flip-card-face,
  .wizard-instrument-grid .hank-flip-card-inner,
  .wizard-instrument-grid .hank-flip-card-face,
  .character-equipped-grid .hank-flip-card-inner,
  .character-equipped-grid .hank-flip-card-face { min-height: 260px; }

  .equipment-card .equipment-card-image,
  .armor-card .armor-card-image,
  .wizard-instrument-grid .equipment-card-image,
  .character-equipped-grid .equipment-card-image { height: 88px; min-height: 88px; flex-basis: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}