/* phones (docs/MOBILE_PLAN.md): everything here sits behind the phone width, so the desktop app and the Overwolf
   window never see it. Loaded last, so these rules win over the page files and theme.css */
@media (max-width: 640px) {
  :root {
    --nav-w: 0px;
    --top-h: 56px;
    /* the bottom bar's own height; the home indicator's inset comes on top */
    --mbar-h: 60px;
    --mbar: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px));
    --page-pad: 14px;
  }

  /* ---------- the side navigation becomes a bottom bar: Home, Tier list, Champions, Profile, More ---------- */
  body .sidenav {
    inset: auto 0 0 0;
    width: auto;
    height: var(--mbar);
    flex-direction: row;
    gap: 0;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-right: 0;
    border-top: 1px solid var(--hairline);
    background: color-mix(in oklch, var(--surface-1) 97%, transparent);
    /* a blur would make the bar the frame of its fixed children, and the "More" sheet and its dimming need the screen */
    backdrop-filter: none;
  }
  body .sidenav .brand, body .sidenav .nav-section, body .sidenav .spacer, body .sidenav .tab-line { display: none; }
  body .sidenav .tabs { flex: 1; flex-direction: row; align-items: stretch; gap: 0; }
  body .sidenav .tab, body .sidenav .live-pill {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  body .sidenav .tab .nav-label { display: block; font: 600 11px/1 var(--font-ui); color: inherit; }
  body .sidenav .tab[aria-current="page"], body .sidenav .nav-more.current { color: var(--text-1); }
  body .sidenav .tab[aria-current="page"] .nav-icon, body .sidenav .nav-more.current .nav-icon { color: var(--amber); }
  body .sidenav .tab:hover { background: transparent; }
  .nav-more { display: flex; align-items: center; border: 0; color: var(--text-2); font: inherit; cursor: pointer; }

  /* behind "More": the planner, the patch and the draft board, as a small sheet over the bar */
  body .sidenav [data-tab="planner"], body .sidenav [data-tab="patch"], body .sidenav .live-pill { display: none; }
  body .sidenav.more-open::before { content: ""; position: fixed; inset: 0; bottom: var(--mbar); background: rgb(4 6 10 / .55); }
  body .sidenav.more-open [data-tab="planner"], body .sidenav.more-open [data-tab="patch"], body .sidenav.more-open .live-pill {
    position: fixed;
    right: 10px;
    width: 210px;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-6);
    padding: 0 var(--space-7);
    border: 1px solid var(--line-2);
    background: var(--bg-raised-2);
    box-shadow: var(--shadow-pop);
  }
  body .sidenav.more-open .live-pill { bottom: calc(var(--mbar) + 10px); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  body .sidenav.more-open [data-tab="patch"] { bottom: calc(var(--mbar) + 10px + 52px); border-bottom: 0; }
  body .sidenav.more-open [data-tab="planner"] { bottom: calc(var(--mbar) + 10px + 104px); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  body .sidenav.more-open [data-tab="planner"] .nav-label, body .sidenav.more-open [data-tab="patch"] .nav-label, body .sidenav.more-open .live-pill .live-word {
    display: inline;
    font: 600 15px/1 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-1);
  }
  /* the draft board has no icon of its own; its name lines up with the two above */
  body .sidenav.more-open .live-pill .live-word { padding-left: calc(20px + var(--space-6)); }
  body .sidenav.more-open .live-pill .live-sep, body .sidenav.more-open .live-pill .live-text, body .sidenav.more-open .live-pill .live-dot { display: none; }

  /* ---------- top bar and pages: full width, between the top bar and the bottom bar ---------- */
  .topbar, .tab-page, .live-view { margin-left: 0; }
  .topbar {
    height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--page-pad) 0;
  }
  .topbar .bar-search { width: 100%; }
  .topbar .bar-search .field { height: 42px; }
  /* "/" focuses the search from a keyboard; phones have none */
  .bar-search kbd { display: none; }
  .tab-page {
    height: calc(100dvh - var(--top-h) - env(safe-area-inset-top, 0px) - var(--mbar));
    padding: var(--space-8) var(--page-pad) var(--space-10);
    scrollbar-gutter: auto;
  }
  .toast { top: auto; bottom: calc(var(--mbar) + var(--space-5)); right: var(--page-pad); left: var(--page-pad); justify-content: space-between; }
  .toast-text { white-space: normal; }

  /* iOS zooms into any field with text under 16 px */
  input, select, textarea, .field-input { font-size: 16px; }

  /* ---------- touch targets: about 44 px for anything a thumb presses ---------- */
  .choice { height: 40px; }
  .bar-button, .button { min-height: 44px; }
  .select, .picker-button.select { height: 44px; }
  /* a row of choices that doesn't fit scrolls sideways instead of running off the screen */
  .choices { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .choices::-webkit-scrollbar { display: none; }
  .choices .choice { flex: none; }

  .page-title { overflow-wrap: anywhere; }
}

/* touch screens of any size: a long press opens a card (tooltip.js), not the system's link preview or a text selection */
@media (pointer: coarse) {
  [data-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ---------- step 3: the pages ---------- */
@media (max-width: 640px) {
  /* filter bars: each group of choices on one line that scrolls sideways, the search field full width under them */
  .filter-bar { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .filter-groups { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-4); }
  .filter-groups .choices, .filter-groups .select { align-self: flex-start; }
  .choices:not(.locked) { flex-wrap: nowrap; }
  .filter-bar .field, .tier-filter .field { width: 100%; margin-left: 0; }

  /* tables: the columns that matter, the rest stays on the desktop and the champion page */
  .data-table { table-layout: auto; }
  .data-table col { width: auto !important; }
  .data-table th:first-child, .data-table td:first-child { padding-left: var(--space-5); }
  .data-table th:last-child, .data-table td:last-child { padding-right: var(--space-5); }
  .data-table th, .data-table td { padding-inline: var(--space-3); }

  /* tier list: place, tier, champion, win rate */
  .tier-panel .data-table [data-col="delta"], .tier-panel .data-table [data-col="pick"], .tier-panel .data-table [data-col="games"],
  .tier-panel .data-table [data-col="ban"], .tier-panel .data-table [data-col="counters"] { display: none; }
  .tier-panel .tier-filter { position: static; padding: var(--space-5); }
  .tier-panel .data-table th { top: 0; }
  .tier-panel .data-table th:first-child, .tier-panel .data-table td:first-child { padding-left: var(--space-5); }
  .tier-panel .data-table th:last-child, .tier-panel .data-table td:last-child { padding-right: var(--space-5); }
  .tl-win-bar { display: none; }
  .tl-champ { max-width: 46vw; }
}

@media (max-width: 640px) {
  /* panel heads: the title first, its filters and links wrap under it instead of running off */
  .panel > .panel-head { flex-wrap: wrap; row-gap: var(--space-3); }

  /* champion page: the six numbers in two rows of three; the build path wraps to a second line */
  .cp-strip .stat-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); }
  .cp-strip .stat:nth-child(3n + 1) { border-left: 0; }
  .champions-page .cp-strip .stat.main .stat-value { font-size: var(--fs-xl); }
  .cp-path { flex-wrap: wrap; gap: var(--space-6) var(--space-9); }
  .cp-path-group + .cp-path-group { margin-left: 0; padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
  /* patch page: the champion's name gets its own line in each change card, its role numbers under it */
  .pt-change { padding: var(--space-6); }
  .pt-change-head { flex-wrap: wrap; row-gap: var(--space-5); }
  .pt-change-name { flex: 1 0 100%; }
}

@media (max-width: 640px) {
  /* profile: on Improve the analysis comes first, the rank and champion panels after it */
  .pf-improve .pf-main { order: -1; }
  .pf-side { position: static; }
  /* recent form: the most played champions take the whole width, the roles go under them */
  .pf-summary-cell:has(.pf-recent) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* Improve: the season's progress wraps under its label; a focus card's title gets its own line */
  .im-progress { display: flex; flex-wrap: wrap; row-gap: var(--space-3); }
  .im-progress-bar { flex: 1 1 100%; width: auto; }
  .im-focus-head { flex-wrap: wrap; row-gap: var(--space-3); }
  .im-focus-name { flex: 1 0 100%; overflow: visible; white-space: normal; }
}

/* ---------- step 5: the draft board ---------- */
@media (max-width: 640px) {
  /* one screen at a time (screens.js goToScreen), each as tall as its content and scrolled like any page */
  .live-view > .draft-page, .live-view > .champ-page, .live-view > .game-page { display: none; height: auto; }
  body[data-screen="0"] .live-view > .draft-page, body[data-screen="1"] .live-view > .champ-page,
  body[data-screen="2"] .live-view > .game-page { display: flex; }
  body[data-tab="live"] .live-view { padding-bottom: calc(var(--mbar) + var(--space-6)); }
  .champ-page { min-height: 0; overflow: visible; border-top: 0; }
  .champ-page .cp-body { display: flex; flex-direction: column; }

  /* the two teams side by side like the loading screen; the best picks and the build under them */
  body .board-main {
    flex: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "ally enemy" "sug sug" "build build";
    gap: var(--space-5);
    padding: var(--space-5) var(--page-pad);
  }
  /* rows as tall as their content; the desktop's :has() rule would split the screen height between them */
  body .board-main, body .board-main:has(.centre:not(.collapsed)) { grid-template-rows: auto; }
  body .board-main > .team { padding: var(--space-3); }
  body .board-main > .team.ally { grid-area: ally; }
  body .board-main > .team.enemy { grid-area: enemy; }
  body .board-main > .suggestions { grid-area: sug; min-height: 0; }
  body .board-main > .build { grid-area: build; }
  .build-msg-title { flex: 1 1 auto; white-space: normal; }
  .slot { flex: none; min-height: 56px; padding: var(--space-3) var(--space-4); }
  .sug-body { max-height: none; overflow: visible; }

  /* a pick comes off with its × (no hover or right click on a phone) */
  .slot-x { display: block; }

  /* the champion grid: not on the board, but a full-screen sheet once a slot is tapped */
  body .board-main > .centre { display: none; }
  body.picker-open .board-main > .centre {
    position: fixed;
    z-index: 85;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--page-pad) calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
    background: var(--surface-0);
  }
  body.picker-open { overflow: hidden; }
  body.picker-open .sheet-done { display: block; align-self: flex-end; min-height: 40px; padding: 0 var(--space-8); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-1); font: 600 15px/1 var(--font-ui); }
  body.picker-open .lv-browse-toggle { display: none; }
  body.picker-open .search-row { flex-direction: column; align-items: stretch; height: auto; }
  body.picker-open .grid-well { flex: 1; min-height: 0; display: flex; }
  body.picker-open .grid-scroll { flex: 1; overflow-y: auto; }
  body.picker-open .grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

@media (max-width: 640px) {
  /* best picks: place, portrait, name, win rate; the bar leaves the name its room */
  body .lv-sug-row { grid-template-columns: 22px var(--sug-icon) minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  body .lv-sug-row .sug-meter { display: none; }
  /* bans: the label over five small icons, so they fit a half-width team column */
  .lv-bans { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .team.enemy .lv-bans { flex-direction: column; align-items: flex-end; }
  .lv-bans .ban-row { --ban: 26px; gap: 3px; }
}

@media (max-width: 640px) {
  /* the live champion page's header in three rows: who and the way back, the numbers, the other champions */
  #champPage { padding: var(--space-5) var(--page-pad); }
  #champPage .cp-head { flex-wrap: wrap; gap: var(--space-5); }
  #champPage .cp-portrait-wrap { order: 0; }
  #champPage .cp-title { order: 1; flex: 1 1 0; min-width: 0; }
  #champPage .cp-back { order: 2; height: 40px; }
  #champPage .cp-head .stat-row { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-5); }
  #champPage .cp-head .stat { padding: 0 var(--space-3); border-left: 0; }
  #champPage .cp-switch { order: 4; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #champPage .cp-switch-champ.extra { display: inline-flex; }
  #champPage .cp-back kbd { display: none; }
}

@media (max-width: 640px) {
  /* planner: the teams on the page, the champions as a sheet while a slot is chosen (planner.selected) */
  .pl-page .pl-pool { display: none; }
  .pl-page:has(.pl-row.selected) .pl-pool {
    position: fixed;
    z-index: 85;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--page-pad) calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
    border-radius: 0;
    background: var(--surface-0);
    overflow-y: auto;
  }
  .pl-page:has(.pl-row.selected) .pl-pool .sheet-done { display: block; min-height: 40px; padding: 0 var(--space-8); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-1); font: 600 15px/1 var(--font-ui); }
  .pl-pool #planHint { display: none; }
  #planFilter .field { height: 44px; }
  /* a pick comes off with its × (no hover on a phone) */
  .pl-remove { opacity: 1; }
}

@media (max-width: 640px) {
  /* planner: the "select a slot" hint stacks its icon, text and button */
  .pl-empty-state { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .pl-empty-state .button, .pl-empty-state button { align-self: stretch; justify-content: center; }
}