/* Phone layout. The desktop screen is four panes side by side; on a phone they stack in one column, the header wraps,
   modals fit the screen, and tap targets are bigger. Loaded last so these rules win. */
@media (max-width: 760px) {
  html, body { height: auto; overflow-x: hidden; }
  body { font-size: 14px; }

  /* header: brand + level on the first row, chapters and BUM below, all scrollable instead of overflowing */
  .top { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px 10px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand small, .brand .sub { display: none; }
  .hud { order: 2; gap: 6px; padding: 3px 8px; margin-left: auto; }
  .hud .stat, #btn-reset { display: none; }
  #chapters { order: 3; flex: 1 1 100%; padding-bottom: 6px; }
  .bum { order: 4; flex: 1 1 100%; justify-content: space-between; }
  .bum>div { flex: 1; } .bum button { flex: 1; padding: 7px 8px; }

  /* mission bar: stack it */
  #mission { flex-wrap: wrap; margin: 8px 8px 0; padding: 10px 12px 10px 16px; gap: 8px 12px; }
  #mission .m-main { flex: 1 1 calc(100% - 70px); min-width: 0; }
  .m-track { display: none; }
  .m-act { flex: 1 1 100%; }
  .m-act .m-go { width: 100%; }

  /* the four panes become one column, each with a sensible height */
  .grid { display: flex; flex-direction: column; height: auto; padding: 8px; gap: 10px; }
  .pane { min-height: 0; }
  #pane-topo .canvas { padding: 0; }
  #pane-topo .canvas svg { width: 100%; height: auto; max-height: 52vh; }
  .palette-wrap { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
  #pane-cli .term { min-height: 240px; max-height: 48vh; }
  .ctl { gap: 6px; padding: 8px; }
  .ctl .btn { padding: 8px 10px; }
  .ctl .spd { flex: 1 1 100%; }
  .ctl .opt { flex: 1 1 46%; font-size: 12.5px; }
  #pane-explain .explain { max-height: 52vh; overflow: auto; }
  #pane-ws { min-height: 0; }
  .ph { flex-wrap: wrap; gap: 6px; }
  .ph .legend { display: none; }
  .wtabs, #ws-tabs { flex-wrap: wrap; }
  .pklist { height: 180px; overflow: auto; }
  .pkdetail { max-height: 46vh; }
  .wbar { flex-wrap: wrap; }
  #ws-filter { min-width: 0; width: 100%; }
  table.rt { display: block; overflow-x: auto; }

  /* moves / action chips wrap */
  .a-chips { flex-wrap: wrap; }
  .actions .a-head { flex-wrap: wrap; gap: 6px; }

  /* modals fit the screen */
  .coach, .quiz { width: calc(100vw - 20px) !important; max-height: 90vh; overflow: auto; padding: 18px 16px; }
  .coach h2 { font-size: 18px; }
  .quiz h3 { font-size: 16px; }
  #toast { max-width: calc(100vw - 20px); bottom: 12px; }
  #banner { max-width: calc(100vw - 20px); padding: 10px 14px; }
  #ach-stack { right: 8px; left: 8px; }

  /* result drawer: taller, content stacked */
  #drawer { height: 78vh; }
  .dr-head { padding: 10px 14px; }
  .dr-body { flex-direction: column; padding: 8px 12px 14px; gap: 10px; overflow: auto; }
  .dr-note { max-height: none; }

  /* the characters: smaller hint bubbles, and no helper cameos (the topology has no side margins on a phone) */
  .lm-say { max-width: 200px; font-size: 12px; }
  .act.cameo { display: none; }
}

/* tap-friendly palette on touch devices */
@media (pointer: coarse) {
  .pal { touch-action: none; padding: 9px 12px; }
  .chip { padding: 7px 12px 7px 7px; }
}