/* ============================================================================
   mobile.css — phone layout for the forward board (pairs with mobile.js)
   Load AFTER styles.css so these win without piling on !important.
   Everything is inside the ≤767px query; desktop is untouched.
   ============================================================================ */

.m-bar { display: none; }
.m-chip { display: none; }

/* ── Overscroll edges ────────────────────────────────────────────────────────
   The theme lives on <body>, but when a phone rubber-bands past the top or
   bottom of the page the browser paints <html> behind it, which had no
   colour, so the bounce showed white. Give <html> the darkest theme colour
   so the stretch blends in, and stop the bounce itself where supported. */
html {
  background-color: var(--bg-deep, #08080a);
  overscroll-behavior-y: none;
}

@media (max-width: 767px) {

  /* ── Control bar ─────────────────────────────────────────────────────────── */
  .m-bar.m-ready { display: block; margin: 0 0 0.55rem; }
  body.reverse-active .m-bar-fwd,
  body:not(.reverse-active) .m-bar-rev { display: none; }

  /* :where() keeps this reset at zero specificity so the component classes win */
  :where(.m-bar) button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-bar button:focus-visible { outline: 2px solid #ed796e; outline-offset: 2px; }

  .m-views {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
    margin-bottom: 0.55rem;
    border: 1px solid var(--line-strong, rgba(204, 48, 34, 0.35));
    border-radius: 12px;
    background: rgba(9, 9, 10, 0.7);
  }
  .m-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pixel-font);
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft, #a5a3b0);
    padding: 0.55rem 0.3rem;
    min-height: 38px;
    border-radius: 9px;
    transition: background 160ms ease, color 160ms ease;
  }
  .m-view-btn[aria-pressed="true"] {
    color: var(--ink, #f3efea);
    background: rgba(204, 48, 34, 0.24);
    box-shadow: inset 0 0 0 1px rgba(237, 121, 110, 0.55);
  }

  /* ── Dashboard: overview map + focused rule ──────────────────────────────── */
  .m-dash {
    display: grid;
    grid-template-columns: minmax(0, 46%) 1fr;
    gap: 0.75rem;
    align-items: stretch;
  }
  .m-dash[hidden] { display: none; }

  .m-mini {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--m-cols, 9), 1fr);
    grid-template-rows: repeat(var(--m-rows, 9), 1fr);
    gap: 2px;
    aspect-ratio: var(--m-cols, 9) / var(--m-rows, 9);
    align-self: start;
    padding: 4px;
    border-radius: 10px;
    background: #09090a;
    border: 1px solid var(--line-strong, rgba(204, 48, 34, 0.35));
  }
  .m-sq {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }
  .m-sq img { width: 118%; height: 118%; object-fit: contain; pointer-events: none; }
  .m-sq img:not([src]) { display: none; }
  .m-sq.is-line { background: rgba(204, 48, 34, 0.20); }
  .m-sq[data-state="ok"]    { background: rgba(58, 175, 117, 0.16); box-shadow: inset 0 0 0 1px rgba(58, 175, 117, 0.55); }
  .m-sq[data-state="hint"]  { background: rgba(86, 186, 176, 0.14); box-shadow: inset 0 0 0 1px rgba(86, 186, 176, 0.55); }
  .m-sq[data-state="err"]   { background: rgba(233, 88, 74, 0.30); }
  .m-sq[data-state="draft"] { background: rgba(245, 158, 11, 0.28); }

  .m-band {
    z-index: 2;
    margin: -2px;
    border: 2px solid #ed796e;
    border-radius: 5px;
    box-shadow: none;
    pointer-events: none;
  }

  .m-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }
  /* Everything in the focus panel uses the pixel font, like the rest of the
     board, instead of dropping back to the body font. */
  .m-where {
    margin: 0;
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft, #a5a3b0);
  }
  .m-rule {
    display: flex;
    align-items: center;
    min-height: 2.4rem;
    min-width: 0;
    font-family: var(--pixel-font);
    font-size: 0.95rem;
  }
  .m-rule .rule-badge.text {
    display: inline-block;
    font-size: 0.78rem;
    line-height: 1.3;
    padding: 0.35rem 0.55rem;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    font-family: var(--pixel-font);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .m-rule .type-badge-custom { font-size: 0.8rem; }
  .m-help {
    margin: 0;
    font-family: var(--pixel-font);
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    line-height: 1.6;
    color: var(--ink-soft, #a5a3b0);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .m-help[hidden] { display: none; }

  .m-count {
    display: grid;
    gap: 0.25rem;
    margin-top: auto;
    font-family: var(--pixel-font);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft, #a5a3b0);
  }
  .m-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .m-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #ed796e;
    transition: width 300ms ease;
  }
  .m-count.done { color: var(--ok, #3aaf75); }
  .m-count.done .m-fill { background: var(--ok, #3aaf75); }

  .m-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .m-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.45rem 0;
    min-height: 40px;
    border-radius: 10px;
    color: var(--ink, #f3efea);
    border: 1px solid var(--line-strong, rgba(204, 48, 34, 0.35));
    background: rgba(204, 48, 34, 0.08);
  }
  .m-nav-btn:active { background: rgba(204, 48, 34, 0.25); }

  /* ── Focus view: the board shows one line as big tiles ───────────────────── */
  .m-focus {
    overflow: visible;
    padding: 0.45rem;
  }
  .m-focus .board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 0.45rem;
    touch-action: pan-y;               /* horizontal swipes come to mobile.js */
  }
  .m-focus .board-grid > .rule-head,
  .m-focus .board-grid > .row-head,
  .m-focus .board-grid > .cell:not(.m-in) { display: none; }

  .m-focus .board-grid > .cell {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 128px;
    padding: 0.4rem 0.3rem 0.45rem;
    border-radius: 12px;
    animation-delay: calc(var(--m-k, 0) * 28ms) !important;
  }
  .m-focus .cell .cell-summary {
    flex: 1;
    justify-content: center;
    gap: 0.3rem;
  }
  .m-focus .cell .qual-stack { display: none; }

  /* The chip names the rule this tile adds on top of the focused line. */
  .m-rows .cell .m-chip-col,
  .m-cols .cell .m-chip-row {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.1rem;
    margin-bottom: 0.1rem;
  }
  .m-focus .m-chip { font-family: var(--pixel-font); min-width: 0; max-width: 100%; }
  .m-focus .m-chip .rule-badge.text {
    font-family: var(--pixel-font);
    font-weight: 700;
    max-width: 100%;
    font-size: 0.56rem;
    line-height: 1.25;
    padding: 0.2rem 0.3rem;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .m-focus .m-chip .type-badge-custom { font-size: 0.62rem; }

  /* Once any tile shows a % tag, give every tile a slim top band for it, so
     the tag sits above the rule chip instead of on top of it. Applied to the
     whole line so the tiles stay level with each other. */
  .m-focus .board-grid:has(.cs-pct) > .cell { padding-top: 1.35rem; }
  .m-focus .board-grid:has(.cs-pct) > .cell > .cs-pct { top: 5px; right: 6px; }

  .m-focus .summary-sprite { width: 64px; height: 64px; }
  .m-focus .picked-name { font-size: 0.64rem; }
  .m-focus .picked-name-row { justify-content: center; }

  /* Empty tile: a quiet tuft of tall grass where the Pokémon will go
     (theme.css paints it; this is the shape and fallback). */
  :is(.m-focus, .m-fit) .cell:has(.summary-sprite.hidden) .cell-summary::before {
    content: "";
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(237, 121, 110, 0.28);
    background:
      linear-gradient(rgba(204, 48, 34, 0.16) 0 46%, rgba(237, 121, 110, 0.35) 46% 54%, rgba(255, 255, 255, 0.04) 54%);
  }
  :is(.m-focus, .m-fit) .cell.drafted:has(.summary-sprite.hidden) .cell-summary::before { border-color: rgba(245, 158, 11, 0.5); }
  :is(.m-focus, .m-fit) .cell.err:has(.summary-sprite.hidden) .cell-summary::before     { border-color: rgba(233, 88, 74, 0.6); }


  /* ── Full grid view: keep the scroll board, fix what was broken ──────────── */
  /* Wider header column + smaller type so rules like EARTHQUAKE aren't clipped */
  :where(.board-wrap, #revBoardWrap) .board-grid {
    --board-header-min: 98px;
    --board-header-max: 104px;
  }
  :where(.board-wrap, #revBoardWrap) .row-head,
  :where(.board-wrap, #revBoardWrap) .rule-head.corner {
    font-size: 0.5rem;
    /* The sticky column stuck inside the wrap's padding, so scrolled cells
       showed through that strip on the left. A solid spread shadow paints
       over it; the soft one keeps the right-edge separator. */
    box-shadow: -0.5rem 0 0 0 #09090a, 3px 0 10px rgba(0, 0, 0, 0.7);
  }
  :where(.board-wrap, #revBoardWrap) .row-head .rule-badge.text,
  :where(.board-wrap, #revBoardWrap) .rule-head.corner .rule-badge.text { font-size: 0.5rem; }

  /* The row rule is pinned on the left, so cells only need the column rule. */
  .m-grid .cell .q-row,
  .m-grid .cell .q-sep { display: none; }


  /* ── Info panel extras (Reverse) ─────────────────────────────────────────── */
  .m-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
  .m-status {
    font-family: var(--pixel-font);
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: var(--ink-soft, #a5a3b0);
    border: 1px solid var(--line-strong, rgba(204, 48, 34, 0.35));
  }
  .m-status.done { color: var(--ok, #3aaf75); border-color: rgba(58, 175, 117, 0.5); }
  .m-status[hidden], .m-guess[hidden], .m-count[hidden] { display: none; }
  .m-rule .rev-qmark { font-size: 1.1rem; padding: 0.25rem 0.8rem; }

  .m-guess {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: auto;
    border-radius: 10px;
    font-family: var(--pixel-font);
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: #e03f30;
    box-shadow: none;
  }
  .m-guess:active { filter: brightness(1.15); }

  /* Reverse map: every square has a Pokémon, so brightness carries progress —
     dim until either of its lines is solved, full once both are. */
  .m-bar-rev .m-sq img { opacity: 0.32; filter: grayscale(0.6); }
  .m-bar-rev .m-sq[data-state="half"] img { opacity: 0.7; filter: none; }
  .m-bar-rev .m-sq[data-state="ok"] img { opacity: 1; filter: none; }
  .m-sq[data-state="half"] { background: rgba(58, 175, 117, 0.07); box-shadow: inset 0 0 0 1px rgba(58, 175, 117, 0.25); }

  /* Reverse tiles: chip on top, Pokémon below */
  .m-focus .board-grid > .rev-cell { justify-content: flex-start; gap: 0.2rem; }
  .m-focus .rev-cell .rev-cell-sprite { width: 64px; height: 64px; margin-top: auto; }
  .m-focus .rev-cell .rev-cell-name { margin-bottom: auto; font-size: 0.64rem; }
  .m-focus .m-chip .rev-qmark { font-size: 0.95rem; padding: 0.1rem 0.7rem; }

  /* ── Fitted grid: boards 5×5 and smaller (Draft) ─────────────────────────── */
  .m-fit { overflow: visible; }
  .m-fit .board-grid {
    grid-template-columns: minmax(0, 5.2rem) repeat(var(--board-cols, 5), minmax(0, 1fr));
    min-width: 0;
    gap: 0.25rem;
  }
  .m-fit .row-head,
  .m-fit .rule-head.corner { position: static; box-shadow: none; }
  .m-fit :is(.rule-head, .row-head) { min-height: 2.8rem; padding: 0.2rem; font-size: 0.5rem; }
  .m-fit :is(.rule-head, .row-head) .rule-badge.text { font-size: 0.5rem; line-height: 1.25; }
  .m-dense .board-grid > .rule-head:not(.corner) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);   /* read bottom-to-top, like spreadsheet headers */
    min-height: 5.6rem;
    padding: 0.3rem 0.1rem;
  }
  .m-dense .board-grid > .rule-head:not(.corner) .rule-badge.text { padding: 0.3rem 0.15rem; }
  .m-fit .board-grid > .cell {
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0.2rem;
    border-radius: 9px;
  }
  .m-fit .cell .cell-summary { justify-content: center; gap: 0.1rem; }
  .m-fit .cell .qual-stack { display: none; }
  .m-fit .summary-sprite { width: 78%; height: auto; aspect-ratio: 1; }
  .m-fit .picked-name { font-size: 0.46rem; -webkit-line-clamp: 1; }
  .m-fit .result-mark { display: none; }
  .m-fit .cell:not(.locked):not(.drafted):not(.err) .picked-name-row { display: none; }
  .m-fit .cell:has(.summary-sprite.hidden) .cell-summary::before { width: 58%; height: auto; aspect-ratio: 1; }

  /* Small fitted boards shouldn't balloon either: cap tiles around 88px. */
  .m-fit .board-grid { max-width: calc(5.2rem + var(--board-cols, 5) * 92px); margin-inline: auto; }

  /* Type badges in narrow row/column headers ("✦ PSYCHIC", "∞ DRAGON") were
     wider than the header and got cut off. Shrink them to fit instead. */
  :where(.board-wrap, #revBoardWrap) :is(.row-head, .rule-head) .type-badge-custom {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.5rem;
    padding: 0.22rem 0.4rem;
    gap: 3px;
    letter-spacing: 0.02em;
  }
  :where(.board-wrap, #revBoardWrap) :is(.row-head, .rule-head) .type-badge-custom :is(.tbn, .tbi) {
    font-size: inherit;
    min-width: 0;
  }
  :where(.board-wrap, #revBoardWrap) :is(.row-head, .rule-head) .type-badge-custom .tbn {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .board-scroll-hint.m-hide { display: none !important; }


  /* ── Cell modal: centered card above the keyboard ─────────────────────────
     Was a bottom sheet. Two problems with that on iPhone: the input was under
     16px, so Safari zoomed the whole page on focus (the sheet ran off the
     right edge and the page stayed zoomed), and a sheet pinned to the bottom
     ends up behind the keyboard. Now the overlay is sized to the *visible*
     viewport (mobile.js writes --vv-top / --vv-h from visualViewport), and
     the card centers in whatever space is left above the keyboard. */
  .cell-modal-overlay {
    inset: auto 0 auto 0;
    top: var(--vv-top, 0px);
    height: var(--vv-h, 100dvh);
    padding: max(12px, env(safe-area-inset-top)) 12px 12px;
    place-items: center;
    overscroll-behavior: contain;
  }
  .cell-modal-card {
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.7rem 0.9rem 0.85rem;
    animation: m-card-in 200ms cubic-bezier(.2, .8, .3, 1) both;
  }
  @keyframes m-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* Header: lives on the left, close on the right, rules underneath. The old
     absolute corner block forced 3.5rem of side padding onto the rules. */
  .modal-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
  }
  .modal-header-right {
    position: static;
    order: -1;
    justify-content: space-between;
  }
  .modal-close-btn { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }

  /* Both rules on one line when they fit, wrapping when they don't. */
  .modal-rules {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    padding: 0;
  }
  .modal-rule-tag {
    font-size: 0.62rem;
    padding: 0.3rem 0.5rem;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .modal-rule-x { font-size: 0.62rem; }

  .modal-rule-help-row { gap: 0.6rem; padding: 0 0 0.5rem; }
  .modal-rule-help-row .modal-rule-help { font-size: 0.64rem; line-height: 1.35; }

  .modal-preview {
    flex-direction: row;
    justify-content: center;
    gap: 0.6rem;
    min-height: 0;
    margin-bottom: 0.5rem;
  }
  .modal-preview:has(.modal-sprite.hidden):has(.modal-picked-name:empty) { display: none; }
  .modal-sprite { width: 52px; height: 52px; }
  .modal-picked-name { font-size: 0.8rem; text-align: left; min-height: 0; }

  /* 16px is the floor: anything smaller and iOS zooms the page on focus. */
  .modal-input {
    box-sizing: border-box;
    font-size: 16px;
    padding: 0.65rem 0.8rem;
    border-radius: 9px;
  }
  .modal-suggestions { max-height: 168px; overscroll-behavior: contain; }
  .modal-suggestion-btn { font-size: 0.82rem; min-height: 46px; padding: 0.3rem 0.55rem; gap: 0.5rem; }
  .modal-sug-sprite { width: 38px; height: 38px; }

  .modal-footer { gap: 0.4rem; margin-top: 0.2rem; }
  .modal-status { font-size: 0.72rem; }
  .modal-actions { gap: 0.45rem; }
  .modal-ok-btn, .modal-cancel-btn {
    font-size: 0.78rem;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border-radius: 9px;
  }

  .modal-hint-bar { padding: 0.45rem 0 0; margin-top: 0.25rem; gap: 0.45rem; }
  .modal-hint-tag { font-size: 0.56rem; }

  /* Keyboard up: the visible area is roughly half the screen. Drop the
     explainers and the hint row (both come back when the keyboard closes) so
     the input, suggestions and Confirm stay on screen without scrolling. */
  .cell-modal-overlay.m-kb .modal-rule-help-row,
  .cell-modal-overlay.m-kb .modal-hint-bar { display: none; }
  .cell-modal-overlay.m-kb .modal-suggestions { max-height: 132px; }
  .cell-modal-overlay.m-kb .cell-modal-card { padding-top: 0.6rem; padding-bottom: 0.7rem; }
}

/* While the modal is open the page behind it shouldn't scroll or zoom-drift. */
@media (max-width: 767px) {
  html.m-modal-open, html.m-modal-open body { overflow: hidden; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .m-focus .board-grid > .cell { animation: none !important; }
  .m-fill, .m-view-btn { transition: none; }
  .cell-modal-card { animation: none; }
}