/* Laptop screens. On a short window (a 13-15" laptop shows 600-800px of page) the bars
   above and below the battlefield are slimmed, so the field, which is limited by height,
   gets the space; the title screen scales its heading to the height; panels compact. */

/* ---------- title screen ---------- */
/* centred content that is taller than the window must start at the top, not be cut off */
#screen-menu { justify-content: safe center; }
@media (min-width: 761px) and (max-height: 860px) {
  #screen-menu { padding-top: clamp(20px, 4vh, 40px); padding-bottom: 56px; }
  #screen-menu h1 { font-size: clamp(56px, 13.5vh, 108px); margin-top: 8px; }
  .title-rule { margin: 10px 0 8px; }
  #screen-menu .sub { margin-bottom: 12px; }
  .menu-intro { font-size: 19px; margin: 0; }
  #screen-menu .menu { gap: 9px; margin-top: 16px; }
  #screen-menu .menu > button { min-height: 62px; padding: 10px 16px 10px 12px; }
  #screen-menu .menu button .mi { width: 40px; height: 40px; }
  #screen-menu .menu button .mi svg { width: 22px; height: 22px; }
  #screen-menu .menu button span { font-size: 18px; }
  #screen-menu .menu button small { font-size: 14px; }
  .menu-utilities { margin-top: 4px; }
  #screen-menu .credit { bottom: 12px; }
}
@media (min-width: 761px) and (max-height: 680px) {
  #screen-menu h1 { font-size: clamp(50px, 12vh, 80px); }
  #screen-menu .menu > button { min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
  .menu-intro { display: none; }
}

/* ---------- battle ---------- */
@media (min-width: 761px) and (max-height: 860px) {
  #battle-top { min-height: 0; padding: 5px 14px; row-gap: 4px; }
  #battle-top .phase { font-size: 15px; }
  #battle-top > button.small { padding: 5px 11px; min-height: 0; }
  #phase-track { height: 30px; }
  .phase-step { padding: 0 24px 0 28px; align-items: center; font-size: 12px; }
  #army-strip { height: 72px; padding: 6px 14px; }
  .army-strip-label span { margin-top: 3px; }
  #battle-roster { padding-top: 0; padding-bottom: 0; }
  .regiment { padding: 4px 10px 4px 9px; }
  .regiment .thumb { width: 40px; height: 48px; }
  .regiment strong { font-size: 13px; }
  .regiment small { font-size: 12px; margin: 1px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #toggle-log { padding: 8px 14px; }
  /* the selected regiment's profile */
  .unit-portrait { height: 92px; margin-bottom: 8px; }
  /* the regiment's figure scales with its box (128 x 145 at full size) */
  .unit-art-portrait { height: 118px; }
  .unit-art-portrait canvas.thumb { width: 92px; height: 104px; }
  #battle-left .unitinfo { font-size: 13px; line-height: 1.5; padding-top: 10px; }
  .unitinfo .statline { margin: 8px 0; }
  .statline .stat, .stats .stat { padding: 3px 0 4px; }
  .statline .stat b, .stats .stat b { font-size: 16px; }
  .unitinfo .props { font-size: 12.5px; margin: 6px 0; }
  #battle-left .actions { padding: 10px 12px; gap: 6px; font-size: 13px; }
  #battle-left .actions button { font-size: 13px; }
  /* deployment dock */
  #deploy-tray.muster-dock { gap: 8px; padding: 10px 12px 14px; }
  .muster-dock .md-head { padding-bottom: 8px; }
  .md-title { font-size: 19px; margin-bottom: 4px; }
  .muster-dock .md-scen { font-size: 13px; margin-bottom: 6px; }
  .md-facts span { font-size: 11px; padding: 1px 7px; }
  .md-actions { margin: 2px -12px -14px; padding: 10px 12px 12px; bottom: -14px; }
  .md-actions button { padding: 9px 10px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  #phase-track { height: 26px; }
  .phase-step { font-size: 11px; }
  #army-strip { height: 64px; }
  .regiment .thumb { width: 34px; height: 42px; }
  .unit-portrait { height: 72px; }
  .unit-art-portrait { height: 96px; }
  .unit-art-portrait canvas.thumb { width: 76px; height: 86px; }
  .muster-dock .md-scen { display: none; }
  .md-facts { display: none; }
}

/* ---------- army builder and other page screens ---------- */
@media (min-width: 761px) and (max-height: 860px) {
  .page { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .topbar { padding-bottom: 10px; }
  .topbar h2 { font-size: 24px; }
}
@media (min-width: 1101px) and (max-width: 1600px), (min-width: 1101px) and (max-height: 860px) {
  /* a narrower army list leaves the catalogue room for three columns */
  #builder-list { width: 390px !important; padding: 10px; }
  #builder-catalog { padding: 10px 12px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 8px; }
  #builder-catalog h3.sec-head { margin: 12px 0 8px; font-size: 15px; }
  #builder-catalog .unit-card { padding: 9px 10px; }
  #builder-catalog .unit-family { gap: 10px; margin-bottom: 6px; }
  #builder-catalog .unit-family canvas.thumb { width: 48px !important; height: 56px !important; }
  #builder-catalog .unit-card .head b { font-size: 15px; }
  #builder-catalog .unit-card .head .muted, #builder-catalog .unit-card .head .accent { font-size: 12px; }
  #builder-catalog .unit-card .stats { gap: 3px; margin: 0 0 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #builder-catalog .unit-card .stats .stat { padding: 2px 0 3px; min-width: 0; }
  #builder-catalog .unit-card .stats .stat span { font-size: 8.5px; letter-spacing: 0; overflow: hidden; }
  #builder-catalog .unit-card .stats .stat b { font-size: 14px; }
  #builder-catalog .unit-card .props { font-size: 12px; line-height: 1.4; }
  .unit-card .add-btn { margin-top: 8px !important; padding: 5px 8px; min-height: 0; }
  #builder-list .entry { padding: 6px 8px; margin-bottom: 5px; }
  #builder-list .entry .head { gap: 8px; }
  #builder-list .entry .head canvas.thumb { width: 36px !important; height: 41px !important; }
  #builder-list .entry .head b { font-size: 14px; }
  #builder-list .entry .entry-sum { font-size: 12px; }
  #builder-list .entry .head button.danger { min-height: 26px; padding: 2px 8px; }
}

/* ---------- campaign ---------- */
/* the army panel takes only the room its regiments need; the chronicle gets the rest */
@media (min-width: 1101px) {
  #camp-roster { flex: 0 1 auto !important; min-height: 0; overflow: auto; }
  #camp-log { flex: 1 1 170px; height: auto !important; min-height: 140px; overflow: auto; }
}
@media (min-width: 761px) and (max-height: 860px) {
  #camp-map .campaign-heading { padding: 10px 18px 0; }
  #camp-roster { padding: 10px 12px; }
  .roster .entry { padding: 6px 9px; margin-bottom: 6px; }
}

/* ---------- campaign dialogs ---------- */
/* the battle briefing keeps its orders in reach however long the muster lists run */
#modal-body.m-brief > .choices:last-child { position: sticky; bottom: -28px; z-index: 2; margin: 14px -28px -28px; padding: 14px 28px 18px; background: linear-gradient(0deg, #0c141e 80%, rgba(12, 20, 30, 0)); }
@media (min-width: 761px) and (max-height: 860px) {
  .modal { max-height: 95dvh; }
  /* merchant: a slimmer header, tabs and footer leave the wares the room */
  #modal-body.m-shop { height: min(820px, 95dvh); }
  .ms-head { padding: 12px 22px 10px; gap: 14px; }
  .ms-seal { width: 44px; height: 44px; padding: 9px; }
  .modal .ms-head h2 { font-size: 23px; }
  .modal .ms-head .text { font-size: 14px; }
  .ms-purse { padding: 6px 12px; }
  .ms-purse .coin { width: 22px; height: 22px; }
  .ms-gold { font-size: 20px; }
  .ms-tabs { padding: 6px 22px 0; }
  .ms-tabs button { padding: 7px 14px; }
  .ms-panels { padding: 12px 22px 14px; }
  .ms-grid { gap: 10px; }
  #modal-body .ms-ware { padding: 9px 10px; gap: 10px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  .ms-ware .thumb { width: 48px; height: 55px; }
  .ms-icon { width: 48px; height: 48px; padding: 11px; }
  .ms-stats { margin: 5px 0 3px; }
  .ms-desc { font-size: 13.5px; margin-top: 3px; }
  .k-unit .ms-note { display: none; } /* "joins the army at once" says nothing new */
  .ms-row { padding: 7px 10px; margin-bottom: 6px; }
  .ms-armhead, .ms-opt { padding: 7px 10px; }
  .ms-foot { padding: 10px 22px 12px; }
  .ms-foot .primary { padding: 9px 22px; }
  /* events: a smaller seal and tighter page */
  #modal-body.m-tale { padding: 20px 30px 18px; }
  .tl-seal { width: 60px; height: 60px; padding: 11px; margin-bottom: 6px; }
  .tl-seal.small { width: 50px; height: 50px; padding: 9px; }
  #modal-body.m-tale h2 { font-size: 26px; margin-top: 4px; }
  #modal-body.m-tale h2:after { margin-top: 2px; }
  #modal-body.m-tale .text { font-size: 16.5px; line-height: 1.5; margin-top: 6px; }
  .tl-choices { gap: 8px; margin-top: 14px !important; }
  #modal-body.m-tale .tl-choice { padding: 9px 14px; gap: 5px; }
  .tl-purse { margin-top: 10px; }
  /* battle briefing: a slimmer picture band */
  #modal-body.m-brief { padding: 20px 26px; }
  #modal-body.m-brief .result-art { height: 76px; margin: -20px -26px 14px; }
  #modal-body.m-brief > .choices:last-child { bottom: -20px; margin: 10px -26px -20px; padding: 10px 26px 14px; }
  .muster-row { padding: 1px 0; font-size: 13.5px; }
  .muster-row .thumb { width: 26px; height: 30px; }
  /* camp: a lower night sky over the three rewards */
  .cp-sky { min-height: 112px; padding: 14px 24px 12px; }
  .cp-sky.dawn { min-height: 96px; }
  .modal .cp-headtext h2 { font-size: 25px; }
  .modal .cp-headtext .text { font-size: 14.5px; }
  .cp-cards { gap: 12px; padding: 12px 22px 16px; }
  .cp-card { padding: 10px 14px 12px; }
  .cp-list { gap: 5px; margin-bottom: 10px; }
  .cp-item { padding: 5px 9px; }
  .cp-card .choices button, .cp-drillfoot button { padding: 9px; }
  /* the war chest on one row: what it gives, the total, and its button */
  .cp-card.cp-supplies { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .cp-supplies .ms-lead { margin-bottom: 0; }
  .cp-supplies .cp-gold { font-size: 30px; }
  .cp-supplies > button.primary { grid-column: 3; grid-row: 1 / 3; width: auto; padding: 10px 22px; }
}
@media (min-width: 1200px) and (max-height: 860px) {
  /* a wide, short window: a wider merchant with three columns of wares */
  #modal-body.m-shop { width: min(1240px, 96vw); }
  .ms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- camp with a large army ---------- */
@media (min-width: 761px) and (max-height: 860px) {
  /* the camp never outgrows the window: the reward lists take what height is left and scroll */
  #modal-body.m-bivouac:not(.m-dawn) { display: flex; flex-direction: column; overflow: hidden; }
  #modal-body.m-bivouac:not(.m-dawn) > .cp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #modal-body.m-bivouac:not(.m-dawn) .cp-sky, #modal-body.m-bivouac:not(.m-dawn) .cp-recovery { flex: none; }
  #modal-body.m-bivouac:not(.m-dawn) .cp-cards { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  #modal-body.m-bivouac:not(.m-dawn) .cp-card { min-height: 0; }
  #modal-body.m-bivouac:not(.m-dawn) .cp-list { max-height: none; min-height: 84px; flex: 0 1 auto; }
  .cp-recovery { padding: 9px 24px; }
  .cp-recovery span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cp-item { gap: 8px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .cp-item .thumb { width: 28px; height: 32px; }
  .cp-item small { font-size: 12px; }
  /* dawn: what the night changed, two regiments to a row */
  #modal-body.m-bivouac.m-dawn { width: min(860px, 94vw); }
  .cp-changes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 22px 4px; }
  .cp-change { padding: 5px 10px; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) auto; }
  .cp-change .thumb { width: 30px; height: 34px; }
  .cp-change b { font-size: 14px; }
  .cp-change small { font-size: 12px; }
  .cp-change .cp-delta { font-size: 16px; }
  .cp-dawn .cp-foot { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 10px 22px 14px; background: linear-gradient(0deg, #0d151f 80%, rgba(13, 21, 31, 0)); }
}
@media (min-width: 761px) and (max-height: 760px) {
  /* treasure: a lower chest scene */
  .tr-scene { height: 160px; }
  .tr-chest { width: 150px; margin-left: -75px; }
  .tr-sparks { bottom: 56px; }
  .tr-find { padding: 14px 28px 18px; }
}

/* ---------- battle result ---------- */
@media (min-width: 761px) and (max-height: 860px) {
  #modal-body.m-result { width: min(1100px, 96vw); }
  /* a lower banner, score and tally */
  .res-hero { padding: 14px 24px 10px; }
  .res-verdict { margin: 4px 0 2px; gap: 10px; }
  .res-word { font-size: clamp(40px, 7.5vh, 60px); }
  .res-why { font-size: 15px; }
  .res-score { padding: 10px 24px 4px; }
  .res-crest { width: 40px; height: 48px; }
  .res-num { font-size: 30px; }
  .res-bar.odds-bar { margin: 2px 24px 0; height: 6px; }
  .res-stats { padding: 10px 24px 2px; gap: 8px; }
  .res-stat { padding: 5px 10px; }
  .res-stat b { font-size: 19px; }
  .res-stat span { font-size: 12.5px; }
  .res-stat small { font-size: 10px; }
  /* the spoils (gold, veterancy) come before the regiment lists, so they are seen first */
  .res-spoils { order: 1; margin: 10px 24px 0; padding: 9px 14px; }
  .res-spoilhead { font-size: 15px; margin-bottom: 3px; }
  #modal-body .res-spoils .res-spoiltext { font-size: 14px; line-height: 1.45; columns: 2; column-gap: 28px; padding: 0; }
  .res-cols { order: 2; padding: 10px 24px 4px; gap: 12px; }
  .res-foot { order: 3; padding: 10px 24px 12px; margin-top: 4px; }
  .res-foot button.primary { padding: 10px 26px; font-size: 16px; }
  /* one line per regiment: name over its strength bar, state and count side by side */
  .res-colhead { padding: 4px 12px 6px; }
  .res-unit { padding: 3px 12px; gap: 8px; grid-template-columns: 24px 1fr auto; }
  .res-unit .thumb { width: 24px; height: 28px; }
  .res-umid > span { font-size: 13.5px; }
  .res-ubar { margin-top: 3px; }
  .res-ustate { display: flex; align-items: baseline; gap: 6px; }
  .res-ustate b { font-size: 11px; }
  .res-ustate small { font-size: 11.5px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .res-hero { padding: 10px 24px 8px; }
  .res-eyebrow { font-size: 11px; }
  .res-verdict { margin: 2px 0 0; }
  .res-word { font-size: clamp(36px, 7vh, 48px); }
  .laurel { width: 34px; }
  .res-why { font-size: 14px; }
  .res-score { padding: 8px 24px 2px; }
  .res-crest { width: 32px; height: 38px; }
  .res-num { font-size: 25px; }
  .res-sidetext small { font-size: 11px; }
  /* each tally on one line: the number, what it counts, and its unit */
  .res-stats { padding-top: 8px; }
  .res-stat { display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 6px 10px; }
  .res-stat b { font-size: 18px; }
}