/* ============================================================
   OmniBoard PROJECT — mobile.css
   Phone/tablet-portrait layer, loaded LAST on every page.
   Every rule lives inside a max-width query, so desktop
   (>= 821px) is byte-for-byte unaffected.
   Export nodes (scouting JPEG export, transfer slide) are
   excluded explicitly where a rule could reach them.
   ============================================================ */

/* ─── Shared dashboard header (index, auth, subscribe, transfer) ─── */
@media (max-width: 820px) {
  .dash-header {
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
  }
  /* Home header gets two rows: logo + account/bell/settings, then
     theme + subscribe/coupon. Headers without those buttons stay one row. */
  .dash-header .header-right { flex: 0 0 auto; margin-inline-end: auto; }
  .dash-header .header-left { display: contents; }
  .dash-header:has(.header-quick-squares)::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .dash-header .header-select { order: 6; flex: 1 1 120px; }
  .dash-header .header-quick-squares { order: 7; }
  .dash-header .header-btn {
    height: 40px;
    min-width: 40px;
  }
  .dash-header .header-btn.omniboard-settings-trigger { width: 40px !important; }
  .dash-header .header-select {
    height: 40px;
    min-width: 0;
    font-size: 13px;
  }
  #omniAccountArea { white-space: nowrap; }
  #omniAccountArea a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Theme picker + subscribe/coupon move to their own full-width row
     instead of hanging off-screen under the picker. */
  .dash-header .header-theme-wrap { display: contents; }
  .dash-header .header-quick-squares {
    position: static;
    margin: 0;
  }
  .dash-header .header-square-btn { height: 40px; font-size: 12.5px; padding: 0 10px; }
  .dash-header .header-coupon-popover {
    left: 12px;
    right: 12px;
    top: calc(100% + 4px);
  }
  .dash-header .header-coupon-popover[hidden] { display: none; }
  .dash-header .header-coupon-popover input { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; font-size: 16px; }
  .dash-header .header-coupon-popover button { height: 40px; }

  .auth-policy-link { font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 760px) {
  .dash-card small { font-size: 11px; letter-spacing: .08em; }
}

/* ─── Board (board.html) — phones and portrait tablets ───
   The desktop layout floats every panel over one fixed viewport. On a
   phone that hides the pitch, so here the page scrolls as one column:
   header, pitch (full width), animation panel, inspector. The tool rail
   becomes a bottom bar and tool settings / roster open as bottom sheets.
   Pitch size: board.js sets an inline px size; it is overridden with a
   width-bound size that keeps the inline aspect-ratio, and every pointer
   coordinate is a percentage of the live rect, so drawings stay aligned.
   The image export draws on its own fixed 4096px canvas, so it is not
   affected by any of this. */
@media (max-width: 820px) {
  body.board-body.board-body-v2 {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  body.board-body-v2 .floating-header {
    order: 0;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: 8px 8px 0;
    padding: 8px 10px;
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.board-body-v2 .brand-v2.board-omni-logo { justify-content: center; }
  body.board-body-v2 .board-omni-icon { width: 32px; height: 32px; }
  body.board-body-v2 .board-omni-name { font-size: 19px; }
  body.board-body-v2 .omniboard-header-project-title { max-width: 100%; }
  body.board-body-v2 .top-actions-v2 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  body.board-body-v2 .top-actions-v2 .divider-v2 { display: none; }
  body.board-body-v2 .top-actions-v2 .btn-ghost-v2,
  body.board-body-v2 .top-actions-v2 .btn-primary-v2 {
    min-height: 40px;
    min-width: 40px;
    padding: 6px 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.board-body-v2 .top-actions-v2 #exportBoardMenuToggle { min-width: 32px; }

  body.board-body-v2 .board-workspace-v2,
  body.board-tools-open .board-workspace-v2 {
    order: 1;
    position: relative;
    inset: auto;
    padding: 10px 8px 0;
    display: block;
  }
  body.board-body-v2 .pitch-wrap-v2 {
    width: 100%;
    padding: 0;
    transform: none !important;
  }
  body.board-body-v2 #pitch.pitch-premium-v2 {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    margin: 0 auto;
  }
  /* Tokens keep their px size from the board settings, which is far too
     big on a ~360px pitch. Scaled down here with the separate `scale`
     property; origin 0 0 keeps each token centred on its --x/--y point
     (base transform is translate(-50%,-50%)). Export is unaffected: it
     redraws tokens from data on its own canvas. */
  body.board-body-v2 #pitch .token {
    scale: var(--m-token-scale, .8);
    transform-origin: 0 0;
  }

  /* Tool rail → bottom bar */
  body.board-body-v2 .floating-toolbar-left {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    max-height: none;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    z-index: 120;
  }
  body.board-body-v2 .floating-toolbar-left::-webkit-scrollbar { display: none; }
  body.board-body-v2 .floating-toolbar-left .toolbar-group {
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
  }
  body.board-body-v2 .floating-toolbar-left .toolbar-group:not(:last-child)::after {
    width: 1px;
    height: 28px;
    margin: 0 0 0 4px;
  }
  body.board-body-v2 .floating-toolbar-left .zoom-group { display: none; }
  body.board-body-v2 .floating-toolbar-left .tool-slot { flex: 0 0 auto; }
  body.board-body-v2 .floating-toolbar-left .tool-btn-v2.active { transform: none; }
  /* The settings tab sits on the slot's top edge instead of its left side. */
  body.board-body-v2 .floating-toolbar-left .tool-settings-toggle {
    top: -2px;
    left: -2px;
    width: 22px;
    height: 22px;
    transform: none;
    border: 1px solid var(--v2-glass-border);
    border-radius: 6px;
    font-size: 13px;
    line-height: 14px;
    z-index: 2;
  }
  body.board-body-v2 .floating-toolbar-left .tool-settings-toggle.active { transform: none; }
  body.board-body-v2 .floating-toolbar-left .polygon-draft-bar { flex-direction: row; }

  /* Tool settings / training / roster → bottom sheets above the bar */
  body.board-body-v2 .floating-board-tools-panel,
  body.board-body-v2 .floating-training-panel,
  body.board-body-v2 .floating-roster-panel {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    max-width: none;
    max-height: min(52vh, 480px);
    z-index: 130;
    animation: none;
  }

  /* Inspector (teams / settings) flows under the pitch */
  body.board-body-v2 .floating-inspector {
    order: 3;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    width: auto;
    max-height: none;
    margin: 12px 8px 0;
    z-index: 1;
  }
  body.board-body-v2 .inspector-tab { padding: 12px 0; min-height: 44px; }

  /* Animation panel sits under the pitch in the flow */
  body.board-body-v2 .board-animation-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    margin-top: 10px;
    max-height: none;
    min-height: 0;
  }
  body.board-animation-open .pitch-wrap-v2 { transform: none; }
  body.board-body-v2 .board-animation-panel {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas:
      "head close"
      "tabs tabs"
      "pane pane";
    gap: 8px;
    padding: 10px;
    overflow: visible;
  }
  body.board-body-v2 .board-animation-panel .animation-tabs button { min-height: 38px; }
  body.board-body-v2 .board-animation-panel .animation-actions,
  body.board-body-v2 .board-animation-panel .timeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  body.board-body-v2 .board-animation-panel .animation-actions > button,
  body.board-body-v2 .board-animation-panel .timeline-toolbar > button {
    flex: 1 1 0;
    min-height: 40px;
  }
  body.board-body-v2 .board-animation-panel .animation-pane.active { grid-template-columns: minmax(0, 1fr); }
  body.board-body-v2 .board-animation-panel .animation-scene-list,
  body.board-body-v2 .board-animation-panel .animation-timeline-list { max-height: 200px; }
  body.board-body-v2 #closeAnimationPanel { width: 40px; height: 40px; }
}
@media (max-width: 600px) { body.board-body-v2 { --m-token-scale: .66; } }
@media (max-width: 420px) { body.board-body-v2 { --m-token-scale: .58; } }

/* ─── Media (media.html, "Omni Draw") — phones and portrait tablets ───
   Desktop is a fixed-height split (stage | 290px settings column). On a
   phone the page scrolls as one column: header, stage (16:9), transport,
   layers timeline, tool strip, then the settings column full width.
   The drawing overlay is measured from the live stage rect, and every
   export (image, SVG, video) composes its own canvas from the media's
   natural size, so none of this reaches an exported file. */
@media (max-width: 820px) {
  body.media-body[data-media-design="concept-06"] {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.media-body .c6-app { height: auto; min-height: 100dvh; display: flex; flex-direction: column; }
  body.media-body .c6-header {
    height: auto;
    padding: 8px 10px;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
    justify-content: center;
  }
  body.media-body .c6-brand { flex: 1 1 100%; justify-content: center; }
  body.media-body .c6-header-actions {
    margin: 0;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  body.media-body .c6-header-actions > button,
  body.media-body .c6-header-actions .export-split > button {
    min-height: 40px;
    font-size: 13px;
  }
  body.media-body .c6-header-actions #exportMediaMenuToggle { min-width: 36px; }

  body.media-body .c6-body {
    flex: 0 0 auto;
    flex-direction: column;
    overflow: visible;
  }
  body.media-body .c6-left {
    flex: 0 0 auto;
    border-left: 0;
  }
  body.media-body .c6-video-container {
    flex: 0 0 auto;
    width: auto;
    margin: 10px 8px;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    max-height: 70vh;
  }
  body.media-body .c6-video-container .empty-viewer { padding: 12px; gap: 8px; }

  body.media-body .analysis-transport {
    flex-wrap: wrap;
    row-gap: 6px;
    height: auto;
    padding: 8px 10px;
  }
  body.media-body .analysis-transport > button { min-width: 40px; min-height: 40px; }
  body.media-body .analysis-transport .media-timeline-wrap { flex: 1 1 100%; order: 10; }
  body.media-body .analysis-transport #volumeSlider { flex: 1 1 80px; min-width: 0; }

  /* Tool strip: the desktop already wraps it into groups; on a phone the
     groups are centred, spacers dropped and each tool keeps a ~50px target. */
  body.media-body .c6-toolbar {
    padding: 8px;
    gap: 6px;
    justify-content: center;
  }
  body.media-body .c6-toolbar .c6-spacer { display: none; }
  body.media-body .c6-toolbar .c6-tool-group { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  body.media-body .c6-toolbar .c6-tool {
    width: 60px;
    height: auto;
    min-height: 52px;
    white-space: normal;
    text-align: center;
    font-size: 10.5px;
    overflow-wrap: anywhere;
  }
  body.media-body .c6-toolbar .media-view-controls .c6-btn-ghost { min-height: 40px; min-width: 44px; }

  body.media-body .c6-right,
  body.media-body .c6-right.analysis-tools {
    width: 100% !important;
    max-width: none !important;
    overflow: visible;
    flex-shrink: 0;
  }
  body.media-body .c6-right input[type="range"] { min-height: 28px; }
  body.media-body .c6-color-picker button { min-width: 30px; min-height: 30px; }
  body.media-body #mediaColorPicker { width: 36px !important; height: 36px !important; }
  body.media-body #mediaColorHex { height: 36px; font-size: 16px; }
  body.media-body .c6-asset-list { max-height: none; }
}

/* ─── Training (training.html) ─── */
@media (max-width: 760px) {
  .training-body .tr-header {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }
  .training-body .tr-title { flex: 1 1 0; }
  .training-body .tr-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .training-body .tr-status { min-width: 0; flex: 1 1 100%; text-align: center; order: 9; }
  .training-body .tr-btn { height: 40px; }
  .training-body .tr-shell { padding: 8px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .training-body .tr-stage { min-width: 0; }
  .training-body .tr-pane { min-height: 0; aspect-ratio: 105 / 68; flex: none; }
  .training-body .tr-tab { height: 40px; }
  .training-body .tr-chip { height: 36px; padding: 0 12px; font-size: 12px; }
  .training-body .tr-tool { min-height: 52px; }
  .training-body .tr-pchip { height: 32px; font-size: 11.5px; }
  .training-body .tr-icon { min-width: 32px; min-height: 32px; }
  .training-body .tr-presets { max-width: 92%; }
  .training-body .tr-pane-over { aspect-ratio: 4 / 3; }
  .training-body .tr-pane-over .tr-presets { top: auto; bottom: 6px; }
  .training-body .tr-anim-bar input,
  .training-body .tr-anim-bar select { height: 36px; font-size: 13px; }
  .training-body .tr-frame-acts { display: flex; }
  .training-body .tr-frame-acts button { width: 26px; height: 24px; font-size: 11px; }
  .training-body .tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Shared phone basics ───
   iOS zooms the whole page when a field under 16px gets focus; 16px
   text fields stop that. Exported scouting/transfer nodes are excluded. */
@media (max-width: 760px) {
  :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"],
      input[type="number"], input[type="tel"], input:not([type]), textarea):not([data-export-root] *, .tr-export-sheet *) {
    font-size: 16px;
  }
}

/* ─── Auth (auth.html) ─── */
@media (max-width: 760px) {
  .auth-main { padding: 24px 14px; }
  .auth-card { max-width: 420px; padding: 22px 18px; }
  .auth-tab { min-height: 44px; }
  .auth-field input { height: 46px; }
  .auth-submit { min-height: 46px; }
  .auth-link { display: inline-block; padding: 8px 4px; }
}

/* ─── Data Center (scouting.html) ───
   Every rule is scoped under .pg-main / .pg-header. The JPEG export clones
   a card into an off-screen wrapper appended to <body> (outside .pg-main),
   so none of these rules can reach an exported image. */
@media (max-width: 760px) {
  .scouting-body .pg-header .pg-back { min-height: 40px; min-width: 40px; }
  .scouting-body .pg-main .pg-eyebrow { font-size: 11px; }
  /* Section tabs: four equal tabs that always fit (English labels are wider) */
  .scouting-body .pg-main .pg-hub-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .scouting-body .pg-main .pg-hub-nav-btn { height: auto; min-height: 40px; padding: 4px; font-size: 12.5px; line-height: 1.2; }

  /* Filter bars: one full-width control per row instead of ragged widths */
  .scouting-body .pg-main .pg-topbar { gap: 10px; }
  .scouting-body .pg-main .pg-topbar > .scouting-select-wrap {
    flex: 1 1 100%;
    display: block !important;
  }
  .scouting-body .pg-main .scouting-select-wrap > button.pg-select {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
  }
  .scouting-body .pg-main .scouting-select-panel { max-width: calc(100vw - 24px); }
  /* Comparison / list filter rows: two controls per row, always inside the card */
  .scouting-body .pg-main .pg-compare-search > .scouting-select-wrap,
  .scouting-body .pg-main .pg-lb-toolbar > .scouting-select-wrap {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    display: block !important;
  }

  /* Cards breathe less on a narrow screen */
  .scouting-body .pg-main .project-card { padding: 16px 12px; }
  .scouting-body .pg-main .project-card[style*="padding:30px"],
  .scouting-body .pg-main .project-card[style*="padding: 30px"] { padding: 16px 12px !important; }

  /* Small action buttons (export / expand / outline) and chips */
  .scouting-body .pg-main .pg-section-title .pg-back,
  .scouting-body .pg-main .scouting-export-btn { min-height: 36px; padding-inline: 12px; }
  .scouting-body .pg-main .pg-compare-chip { min-height: 36px; }
  .scouting-body .pg-main .pc-fixture-row-open { width: 36px; height: 36px; }
  .scouting-body .pg-main .pc-fixture-row-date { font-size: 11px; }
  .scouting-body .pg-main .pg-back { min-height: 36px; }
  .scouting-body .pg-main .pg-lb-chip,
  .scouting-body .pg-main .scouting-role-tab,
  .scouting-body .pg-main .scouting-event-segment button,
  .scouting-body .pg-main .scouting-event-export,
  .scouting-body .pg-main .scouting-zone-toggle { min-height: 36px; }
  .scouting-body .pg-main .project-card button[style*="height:26px"] { height: 34px !important; font-size: 12px !important; }
  .scouting-body .pg-main .pg-breadcrumb button { min-height: 32px; }
  .scouting-body .pg-main input[type="checkbox"] { width: 18px; height: 18px; }
  .scouting-body .pg-main #scoutingEventFrom,
  .scouting-body .pg-main #scoutingEventTo { min-height: 32px; }

  /* Radar: show the phone companion, hide the 1080-unit full radar */
  .scouting-body .pg-main .scouting-radar-full { display: none !important; }
  .scouting-body .pg-main .scouting-radar-phone[hidden] { display: block; }
  .scouting-radar-phone-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
  }
  .scouting-radar-phone-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border, rgba(200,210,220,.12));
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #e8eaec);
  }
  .scouting-radar-phone-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border, rgba(200,210,220,.2));
  }
  .scouting-radar-phone-label { min-width: 0; line-height: 1.4; }
  .scouting-radar-phone-values { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .scouting-radar-phone-values b {
    min-width: 40px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    direction: ltr;
  }
}
/* Small phones: the league table drops goals for/against (goal difference
   stays) so club names get room instead of the headers running together. */
@media (max-width: 430px) {
  .scouting-body .pg-main .standings-row {
    grid-template-columns: 22px minmax(0, 1fr) repeat(6, 26px);
  }
  .scouting-body .pg-main .standings-row > div:nth-child(7),
  .scouting-body .pg-main .standings-row > div:nth-child(8) { display: none; }
}

/* ─── Omni Transfer (transfer.html) ───
   Scoped under .tr-page: the 1600x900 slide export renders from a sheet
   appended to <body> (.tr-export-sheet), outside .tr-page. */
@media (max-width: 760px) {
  .tr-page .tr-filters { gap: 8px; }
  .tr-page .tr-filters > .tr-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 44px;
    font-size: 13px;
  }
  .tr-page .tr-search input { height: 44px; }
  .tr-page .tr-step { height: 44px; }
  .tr-page .tr-step button { width: 36px; }
  .tr-page .tr-seg button { min-height: 36px; padding-inline: 12px; }
  .tr-page .tr-toggle { min-height: 40px; }
  .tr-page .tr-view button { min-width: 40px; min-height: 40px; }
}
/* Player sheet (aside.tr-panel, appended to <body>): the close/download
   buttons sat on top of long names. Give them their own strip. The export
   sheet shares .tr-panel, so it is excluded by name. */
@media (max-width: 760px) {
  aside.tr-panel:not(.tr-export-sheet) .tr-panel-head { padding-top: 60px; }
  aside.tr-panel:not(.tr-export-sheet) .tr-close,
  aside.tr-panel:not(.tr-export-sheet) .tr-export { min-width: 40px; min-height: 40px; }
}

/* ─── Shared settings modal (js/core/settings-modal.js) ─── */
@media (max-width: 760px) {
  .omniboard-modal__head { position: relative; padding-inline-end: 64px; }
  .omniboard-modal__close.omniboard-modal__close--phone {
    display: grid !important;
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    border: 1px solid var(--border, rgba(200,210,220,.2));
    border-radius: 10px;
    background: var(--surface2, #1a1d20);
    color: var(--ink, #e8eaec);
  }
  .omniboard-modal__quick a,
  .omniboard-modal__quick button { min-height: 36px; display: inline-flex; align-items: center; }
  .omniboard-settings__rail button { min-height: 40px; }
}

/* ─── Projects / Subscribe ─── */
@media (max-width: 760px) {
  .projects-body .pc-title-button { min-height: 36px; text-align: start; }
  .sub-main { padding: 24px 14px; }
  .sub-card { max-width: none; min-width: 0; flex-basis: 100%; }
}