/* OOM! RF4 CSS layer: responsive.css */
@media (max-width: 680px) {
  .alchemy-alloc-rows { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hub-progress-grid, .hub-service-grid { grid-template-columns: 1fr; }
  .hub-buttons, .hub-side { min-width: 0; width: 100%; max-width: none; }
  .loadout-grid { grid-template-columns: 1fr; }
  .class-card { width: min(300px, 100%); }
}
/* ---------- responsive ---------- */
@media (max-width: 980px) {
  #party-frames { width: 205px; }
  .pframe { padding: 5px 8px; }
  #combat-side:not(.collapsed) { position: absolute; right: 10px; top: 90px; bottom: 130px; z-index: 20; }
  .combat-mid { position: relative; }
  .temp-board { grid-template-columns: 1fr; }
  .temp-card { min-height: auto; }
}
@media (max-width: 720px) {
  .combat-layout { height: auto; min-height: 100vh; }
  .combat-mid { flex-direction: column; }
  #party-frames { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .pframe { flex: 1 1 45%; }
  .battlefield-wrap { min-height: 240px; }
  .hb-slot { width: 50px; height: 50px; }
  .blame-cols { flex-direction: column; }
  .ledger-hero { grid-template-columns: 1fr; }
  .ledger-detail-section { grid-template-columns: 1fr; }
  .ledger-zone-group { grid-template-columns: 1fr; }
  .ledger-score { text-align: center; }
  .enchant-controls { grid-template-columns: 1fr; }
  .temp-pref-head { display: block; }
  .temp-pref-head span { display: block; margin-top: 4px; }
}

@media (pointer: coarse), (max-width: 720px) {
  .combat-top-btns .icon-btn,
  .pframe,
  .eframe,
  .hb-slot,
  .hb-ult,
  .hb-consum,
  .touch-assist {
    touch-action: manipulation;
  }
  .pframe { min-height: 44px; }
  .eframe { min-height: 58px; }
  .combat-top-btns .icon-btn { min-width: 44px; min-height: 44px; }
  .hotbar { gap: 8px; }
  .hb-slot { min-width: 50px; min-height: 50px; }
  .hb-ult { min-width: 54px; min-height: 54px; }
  .touch-assist-row { display: flex; }
}