/* Phone fixes from the mobile audit. Loaded last. */

/* Floating combat numbers never draw over dialogs or the menu. */
#modal:has(.overlay) ~ #floats { display: none; }

@media (max-width: 960px) {
  /* ---- Gear: the item grid was squeezed to a few pixels ---- */
  .gear-page .gear-bag { flex: none; height: auto; min-height: 0; }
  .gear-page .gear-bag .bag-items { flex: none; height: auto; min-height: 0; max-height: none; overflow: visible; }
  .gear-page .item-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }

  /* ---- Skills: single-column cards with readable buttons ---- */
  #view .gather-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view .gather-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;
    text-align: left;
  }
  #view .gather-card > span:first-child { grid-row: 1 / 3; font-size: 32px; text-align: center; }
  #view .gather-card h3 { margin: 0; font-size: 16px; }
  #view .gather-card p { margin: 0; font-size: 12.5px; }
  #view .gather-card > :not(span:first-child, h3, p) { grid-column: 1 / -1; }
  #view .gather-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #view .gather-grid button { min-height: 40px; font-size: 13px; }
  #view .recipe-grid { grid-template-columns: minmax(0, 1fr); }
  #view .recipe-grid button { min-height: 36px; font-size: 12px; }
  #view .profession-progress { gap: 6px; }

  /* ---- Dock: hint that the tab row scrolls ---- */
  .dock-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .dock-tabs::-webkit-scrollbar { display: none; }
  .dock-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 11px; }
  .dock-line time, .dock-chat time { font-size: 10.5px; }
  .dock-compose input, .dock-compose button { min-height: 40px; font-size: 15px; }

  /* ---- Abilities: bigger reorder arrows ---- */
  #ability-config .ab-slot .priority-controls { flex-direction: row; }
  #ability-config .ab-slot .priority-controls button { min-width: 40px; min-height: 36px; font-size: 15px; }
  #ability-config .ab-switch-track { width: 40px; height: 22px; }
  #ability-config .ab-switch-track::after { width: 16px; height: 16px; }
  #ability-config .ab-switch input:checked + .ab-switch-track::after { transform: translateX(18px); }
  #ability-config .ab-book-item { min-height: 0; }

  /* ---- Bestiary: Grave buttons show the numeral and progress, not a cut-off name ---- */
  .bestiary .bx-grave { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 7px 4px; }
  .bestiary .bx-grave-num { grid-row: auto; }
  .bestiary .bx-grave-name { display: none; }
  .bestiary .bx-grave-progress { width: 100%; }
  .bestiary .bx-grave small { grid-column: auto; }

  /* ---- Build: loadout buttons big enough to tap ---- */
  .bd-loadouts button { min-height: 38px; }
}

/* ---- Combat hotbar on phones: five slots fit; Automation lives in the footer ---- */
@media (max-width: 760px) {
  .hunt-hotbar-row .hunt-hotbar, .hunt-hotbar { --slot: min(58px, calc((100vw - 92px) / 5)); }
  .hot-gear-cell { display: none; }
  .hot-tray { gap: 8px; padding: 9px 10px 6px; }
  .hot-name { max-width: var(--slot); font-size: 10px; }
  .hot-cost { right: -3px; bottom: -5px; min-width: 18px; height: 16px; padding: 0 3px; font-size: 9.5px; }
  .hot-key { top: -5px; left: -5px; min-width: 16px; height: 16px; font-size: 9.5px; }
  .hot-energy { height: 16px; }
  .hot-energy span { font-size: 11px; line-height: 15px; }
}

/* ---- Dock tab row never shrinks (it was squashed to a thin strip in a column layout) ---- */
.dock-tabs { flex: 0 0 auto; }
.dock-peek { display: none; }

/* ---- Phones: the chat/log dock is pinned above the tab bar on every screen ---- */
@media (max-width: 960px) {
  #app #journal {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 56px;
    display: block !important;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 6px;
    overflow: visible;
    border: 0;
    background: none;
    pointer-events: none;
  }
  #app #journal > .hunt-dock {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    background: linear-gradient(180deg, #1d1818, #120d0d);
    box-shadow: 0 -6px 18px #000a;
  }
  #app.phone-dock-open #journal > .hunt-dock { height: min(52dvh, 460px); }
  #app #journal .dock-tabs { min-height: 38px; padding: 0 6px; }
  #app #journal .dock-tabs .dock-collapse { position: sticky; right: 0; background: #1a1414; }
  #app #journal .dock-peek {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 0 12px 2px;
    border: 0;
    border-top: 1px solid #332828;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #d9ccb2;
    font-size: 13px;
    text-align: left;
  }
  .dock-peek-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock-peek-open { display: none; }

  /* Keep page content clear of the pinned bar */
  #view .scroll-view, #view .hunt-screen, #view .gear-page { padding-bottom: 96px !important; }
  #app.phone-dock-open #view .scroll-view, #app.phone-dock-open #view .hunt-screen, #app.phone-dock-open #view .gear-page { padding-bottom: calc(min(52dvh, 460px) + 16px) !important; }
  /* Toasts sit above the bar */
  #toasts { bottom: 150px !important; }
}

/* ---- Hunt Stop / Resume ---- */
.hunt-overview-head .hunt-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 3px 4px 3px 10px;
  border: 1px solid #4d3a38;
  border-radius: 20px;
  background: #181313;
  box-shadow: none;
  color: #b0a48c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
}
.hunt-overview-head .hunt-state-btn i { width: 7px; height: 7px; border-radius: 50%; background: #7d6462; }
.hunt-overview-head .hunt-state-btn.live { color: #b6d49b; border-color: #4f6a3c; }
.hunt-overview-head .hunt-state-btn.live i { background: #8fd06a; box-shadow: 0 0 7px #8fd06a; }
.hunt-stop { padding: 2px 8px; border-radius: 12px; background: #2a2222; color: #d6c9b8; font-size: 10.5px; }
.hunt-state-btn:hover .hunt-stop { background: #4a1418; color: #e9dfd3; }
.hunt-overview-head .hunt-state-btn.retreat { padding-right: 10px; border-color: #8a3f3f; color: #f0a2a2; }
.hunt-stopped {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 22px;
  border: 1px solid #5e4442;
  border-radius: 12px;
  background: #0f0c0ccc;
  backdrop-filter: blur(3px);
  box-shadow: 0 8px 24px #000a;
  text-align: center;
}
.hunt-stopped p { margin: 0; color: #dfd1c1; font-family: var(--title); font-size: 16px; letter-spacing: 1px; }
.hunt-stopped .primary { min-height: 40px; padding: 0 22px; font-size: 14px; }
.hunt-stopped-hint { max-width: 240px; color: #a8998c; font-size: 11.5px; line-height: 1.4; }