/* Round 11 mobile pass (loaded last). Phones and tablets ≤ 900 px wide get a bottom bar (5 main tabs + More), a
 * collapsible stat strip, bottom-sheet modals, ≥ 44 px tap targets, readable type, safe-area insets, no sideways page
 * scrolling. Touch devices of any width get the 44 px tap targets. JS side: js/mobile.js. */
.rail-more, .stats-toggle { display: none; }
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --kb: 0px; }
.worldmap, .worldmap svg, .mapwrap svg { touch-action: none; } /* pinch-zoom + pan handled by mapview.js */

/* ---------- touch targets (any touch device) ---------- */
@media (pointer: coarse), (max-width: 900px) {
  button, .btn, select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, summary { min-height: 44px; }
  .icon-btn, .modal-x, .mapctl button, button.ghost.sm, .cr-logo { min-width: 44px; min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; flex: none; }
  label.check, .check { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  input[type=range] { min-height: 44px; }
  .seg button, .tabs-inline button { min-height: 44px; }
  a.btn, [data-act]:is(a, span.link) { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 900px) {
  :root, html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :root { --bar-h: 58px; }
  body { overscroll-behavior: none; }
  /* no sideways page: the closed intel drawer must not sit off-screen to the right */
  #stage, #stage-body, #shell { overflow: hidden; max-width: 100vw; }
  body.intel-closed #intel { display: none; }
  main#view { padding: 10px max(10px, var(--sal)) calc(16px + var(--kb)) max(10px, var(--sar)); overflow-x: hidden; overscroll-behavior: contain; }
  :where(main#view) :where(*) { min-width: 0; }
  main#view :is(p, td, li, .cr-desc, .nb-text, .msg) { overflow-wrap: anywhere; }
  main#view img, main#view canvas, main#view video { max-width: 100%; }
  #stage { height: calc(100vh - var(--bar-h) - var(--sab)); height: calc(100dvh - var(--bar-h) - var(--sab)); }
  body.kb-open #stage { height: 100dvh; }

  /* ---------- bottom bar: 5 main tabs + More ---------- */
  #tabs.rail { height: calc(var(--bar-h) + var(--sab)); padding: 0 var(--sar) var(--sab) var(--sal); overflow: hidden; }
  #tabs.rail .rail-groups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  #tabs.rail .rail-group { display: contents; }
  #tabs.rail button[data-tab]:not([data-main]) { display: none !important; }
  #tabs.rail .rail-more { display: flex !important; }
  #tabs.rail button, #tabs.rail .rail-more { position: relative; min-width: 0 !important; width: 100%; height: var(--bar-h); padding: 6px 2px !important; font-size: .64rem !important; align-items: center; }
  #tabs.rail button .lbl { max-width: 100% !important; }
  #tabs.rail .nbadge { position: absolute; top: 4px; left: calc(50% + 6px); right: auto !important; width: auto; }
  body.kb-open #tabs.rail { display: none; }

  /* ---------- top bar: brand + End Turn, then a swipeable stat strip (▾ expands everything) ---------- */
  #topbar { padding-top: var(--sat); padding-left: var(--sal); padding-right: var(--sar); }
  #topbar .tb-main { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: 'brand actions actions' 'stats stats toggle'; gap: 6px 6px; padding: 6px 8px; }
  #topbar .brand { grid-area: brand; max-width: none; min-width: 0; }
  #topbar .brand-txt { min-width: 0; } #hdr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
  .hdr-actions { grid-area: actions; display: flex; gap: 6px; align-items: center; }
  .hdr-actions #btn-intel, .hdr-actions #btn-sound, #rail-toggle { display: none !important; }
  .hdr-actions .endturn { min-height: 44px; padding: 6px 14px; }
  #hdr-stats.statusbar { grid-area: stats; display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; gap: 6px; mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #hdr-stats > * { scroll-snap-align: start; flex: none; }
  .stats-toggle { grid-area: toggle; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
  .tb-res { padding: 0 8px 6px; } #hdr-res.resstrip { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); }
  #hdr-res .rchip { scroll-snap-align: start; flex: none; }
  #res-more { display: none !important; }
  body.stats-open #hdr-stats.statusbar { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  body.stats-open #hdr-res.resstrip { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  body.stats-open #hdr-res .rchip .rl { display: inline !important; }
  #topbar { max-height: 70dvh; overflow-y: auto; }

  /* ---------- bottom sheets ---------- */
  .modal-bg { align-items: flex-end; padding: 0; overflow: hidden; }
  .modal, .modal.wide, .modal.quizmodal { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - var(--sat) - 12px); margin: 0; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 16px 16px 0 0; padding: 8px max(14px, var(--sar)) calc(18px + var(--sab) + var(--kb)) max(14px, var(--sal)); animation: sheetUp .22s var(--ease); }
  .modal::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line2); margin: 2px auto 8px; }
  .modal-x { position: sticky; top: 0; float: right; z-index: 5; margin: -4px -4px 0 8px; background: var(--card2); border: 1px solid var(--line2); border-radius: 50%; }
  .modal h2 { font-size: 1.15rem; padding-right: 8px; }
  .modal .form, .modal fieldset { grid-template-columns: minmax(0, 1fr) !important; }
  .modal .row { flex-wrap: wrap; }
  .more-sheet .more-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
  .more-g { margin: 10px 0; } .more-gh { font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .more-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 8px 4px; border-radius: var(--r2); background: var(--card2); border: 1px solid var(--line); font-size: .8rem; text-align: center; }
  .more-item.on { border-color: var(--accent); color: var(--accent); }
  .more-item .nbadge { position: absolute; top: 6px; right: 8px; }

  /* ---------- readable type (≥ ~12 px) ---------- */
  .tiny, small, .small, .muted.small, .tbl, .tbl.small { font-size: .74rem; }
  .kpi small, .panel-h, h4, .tag, .nbadge, th, .tbl th, .cr-tn, .more-gh, .sb-top, .cs-un { font-size: .7rem; }
  .kpi span { font-size: .74rem; }
  .tbl td, .tbl th { padding: 8px 6px; }
  .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* ---------- screens ---------- */
  .kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .dip.comms { display: flex; flex-direction: column; }
  .dip.comms > * { width: 100%; align-self: stretch; }
  main#view select, .modal select { max-width: 100%; } .dip.comms select, .dip.comms textarea { width: 100%; }
  .dip.comms .diplist { max-height: 26dvh; overflow-y: auto; overscroll-behavior: contain; }
  .dip.comms .composer { position: static; padding-bottom: 6px; scroll-margin-bottom: 12px; }
  .dip.comms .composer textarea { min-height: 64px; height: 64px; }
  .dip.comms #thread { max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; }
  .dip.comms .composer textarea { font-size: 1rem; }
  .nb .nb-side { display: none; }
  .cr-tier.sub { grid-column: 1 / -1; }
  .cr-grid { grid-template-columns: minmax(0, 1fr); }
  .cr-tiers { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* toasts above the bar and clear of the home indicator */
  #toasts { bottom: calc(var(--bar-h) + var(--sab) + 8px); left: max(8px, var(--sal)); right: max(8px, var(--sar)); }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none !important; } }

/* tablets (601-900 px): two columns where it helps */
@media (min-width: 601px) and (max-width: 900px) {
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .modal, .modal.wide, .modal.quizmodal { max-width: 760px !important; margin: 0 auto; }
}

/* phones in landscape: short screen. One-row top bar, icon-only bottom bar, resources only when expanded */
@media (max-width: 900px) and (max-height: 500px) {
  :root { --bar-h: 48px; }
  #topbar .tb-main { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'brand stats toggle actions'; padding: 4px 8px; }
  #topbar .brand-txt { display: none; }
  .tb-res { display: none; } body.stats-open .tb-res { display: block; }
  #tabs.rail button .lbl, #tabs.rail .rail-more .lbl { display: none !important; }
  .modal, .modal.wide, .modal.quizmodal { max-height: calc(100dvh - 8px); }
}

/* ---- R11 pass 2: hard tap floor on touch, wrapping rows ---- */
@media (pointer: coarse), (max-width: 900px) {
  button:not(.rail-more):not([data-tab]), select { min-height: 44px !important; }
  button { min-width: 44px; }
  .cr-logo, .mapctl button, button.tiny, .pill button.tiny, .nb-react, button.ghost, button.primary, .icon-btn { min-width: 44px !important; min-height: 44px !important; height: auto; }
  .mapctl button { width: 44px; height: 44px; font-size: 1.2rem; }
  .cr-logo { width: 46px; height: 46px; }
  .nb-reacts { gap: 6px; }
  .slots.big .slot { min-width: 44px; min-height: 44px; }
}
@media (max-width: 900px) {
  #view .row.top, #view .row { flex-wrap: wrap; }
  #view .grow { min-width: 0; }
  .grow > div:has(> .ideo) { display: flex; flex-wrap: wrap; gap: 6px; }
  .ideo { white-space: normal; }
}
/* ---- R11 pass 2: phone battle cutscene ---- */
@media (max-width: 600px) {
  .cs-frame { width: calc(100vw - 12px); padding: 8px 8px calc(8px + var(--sab, 0px)); max-height: calc(100dvh - 12px); overflow-y: auto; }
  .cs-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .cs-title { grid-column: 1 / -1; order: -1; }
  .cs-side { padding: 4px 6px; gap: 6px; }
  .cs-flag svg, .cs-flag img { width: 30px; height: 20px; }
  .cs-hud { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cs-u, .cs-units.def .cs-u { grid-template-columns: minmax(0, 1fr) 60px auto; gap: 6px; padding: 3px 6px; }
  .cs-units.def .cs-un { order: 0; text-align: left; } .cs-units.def .cs-bar { order: 0; } .cs-units.def .cs-uc { order: 0; text-align: right; }
  .cs-units.def .cs-bar i { margin-left: 0; }
  .cs-units.def .cs-u { border-right: 3px solid var(--bad); } .cs-units:not(.def) .cs-u { border-left: 3px solid var(--good); }
  .cs-uc b { font-size: 12px; } .cs-uc s { font-size: 12px; } .cs-un { font-size: 12px; }
  .cs-foot { flex-wrap: wrap; } .cs-hint { display: none; }
}
@media (pointer: coarse), (max-width: 900px) {
  .qz-opts label { min-height: 44px; align-items: center; padding: 6px 8px; }
  .qz-opts input[type=radio] { width: 22px; height: 22px; margin: 0; flex: none; }
}
@media (max-width: 900px) { .slots.big { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } }

/* ---- R11 pass 2: nation hero, war ops header ---- */
@media (max-width: 600px) {
  .nation-hero { flex-wrap: wrap; gap: 10px; }
  .nation-hero .bigflag svg, .nation-hero .bigflag img { width: 120px; height: 80px; }
  .nation-hero .portrait { width: 80px; height: 80px; }
  .nation-hero > div:last-child { flex: 1 1 100%; min-width: 0; }
  .ops-head { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .ops-tag { writing-mode: horizontal-tb; transform: none; border-left: none; padding-left: 0; flex: 1 1 100%; }
  .ops-head .warhead { flex: 1 1 0; min-width: 0; }
}

/* ---- R11 pass 2: landscape phone diplomacy = channel list | chat side by side ---- */
@media (max-width: 900px) and (max-height: 500px) {
  .dip.comms { display: grid; grid-template-columns: 230px minmax(0, 1fr) !important; align-items: start; gap: 8px; }
  .dip.comms > * { width: auto; }
  .dip.comms .diplist { max-height: calc(100dvh - 120px); position: sticky; top: 0; }
  .dip.comms .dipdossier { grid-column: 1 / -1; }
  .dip.comms #thread { max-height: calc(100dvh - 190px); }
}