/* Harvest Hollow on phones and tablets (mobile wave 2026-10-03, layout lane). Linked after the base sheets in
   index.html; only the release's mobile-panels.css and feel.css come after it.
   EVERY rule of this file sits in one of the media queries of ui/layout.js LAYOUT_Q (or in `(hover: none)`), so a
   desktop window (wider than 1180 px and taller than 500 px) never sees any of it; test/mobile-ui.test.js checks that.

     touch      (max-width: 1180px), (max-height: 500px)   tablets and phones: one bottom bar (tools | dock | menu),
                                                            the small dock buttons and the together buttons in the
                                                            farm menu, players as dots, compact pills
     dockless   (max-width: 959px), (max-height: 500px)    Build / Market / Barn move into the farm menu too
     phone      (max-width: 600px), (max-height: 500px)    the compact top row, the Goal Tracker chip, bottom sheets
     portrait   (max-width: 600px)                         phones upright: the bottom bar scrolls sideways
     land       (max-height: 500px) and (min-width: 601px) phones on their side: tools in a left column, the menu and
                                                            the view buttons on the right, panels slide in from the right
   The safe-area tokens --sat/--sar/--sab/--sal (style.css) keep the HUD clear of a notch and a home bar. */

/* ======== touch (tablets and phones) ============================================================================ */
@media (max-width: 1180px), (max-height: 500px) {
  :root { --bar-h: 82px; --menu-w: 68px; }
  /* no grey flash on a tap, no text selection or iOS callout on a long press of the game's own controls */
  #hud, #panels, .seed-pop, .emote-wheel, .modal-layer { -webkit-tap-highlight-color: transparent; }
  #hud, .seed-pop, .emote-wheel { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #hud input { -webkit-user-select: text; user-select: text; }
  /* a two-finger spread on the HUD or a sheet zoomed the PAGE (3.9-5x) and nothing in the game undid it (mobile QA
     P1-1): every game layer pans only. Zero specificity, so an element's own `touch-action: none` (the sheet grip,
     a panel title) still wins; the farm canvas is `none` (style.css), pinch and twist there are the game's own */
  :where(#hud, #panels, #celebrate, .modal-layer, .seed-pop, .emote-wheel, .touch-build),
  :where(#hud, #panels, #celebrate, .modal-layer, .seed-pop, .emote-wheel, .touch-build) :where(*) { touch-action: pan-x pan-y; }
  /* buttons too (pan-x pan-y has no double-tap zoom, so a tap is as quick as with `manipulation`, minus the pinch) */
  #hud button, #panels button, .seed-pop button, .emote-wheel button, .modal-layer button { touch-action: pan-x pan-y; }
  /* key hints mean nothing without a keyboard */
  .tool .key, .social-btn .key, .edge-item kbd, .tool-flyout .tool .key { display: none; }

  /* ---- top row: players shrink to their faces (name and title in the button's label and tooltip) ---- */
  .hud-tl { top: calc(var(--safe) + var(--sat)); left: calc(var(--safe) + var(--sal)); }
  .hud-tr { top: calc(var(--safe) + 6px + var(--sat)); right: calc(var(--safe) + var(--sar)); gap: 16px; }
  .players { gap: 8px; }
  .players .tag { display: none; }
  .pill, .pill-coins { min-width: 0; padding-right: 8px; }
  .hud-right { right: calc(var(--safe) + var(--sar)); }
  .hud-gear { right: calc(var(--safe) + var(--sar)); top: calc(var(--safe) + 66px + var(--sat)); }
  .hud-right { top: calc(var(--safe) + 122px + var(--sat)); }

  /* ---- the bottom (tablets; release 1.0 S1, S2): the toolbar of 3 at the left, the dock of 4 + the Farm book at the
     right, both on the bottom edge; the flyouts, the coach and the trays above the toolbar ---- */
  .tray-wrap { left: 0; right: auto; bottom: 0; transform: none; align-items: flex-start; gap: 8px;
    padding: 0 0 calc(8px + var(--sab)) calc(8px + var(--sal)); max-width: calc(100vw - 16px - var(--sal) - var(--sar)); }
  .tray-wrap > * { max-width: 100%; }
  .tool { flex: none; }
  .tool-more { display: none !important; }
  .tool[aria-pressed="true"] { transform: translateY(-5px); }
  #hud > .dock { right: calc(8px + var(--sar)); bottom: calc(8px + var(--sab)); }
  #hud .dock-minis { display: none; }

  /* ---- above the bar: the coach, the feed (it steps aside for the coach), the trays ---- */
  .coach { width: min(540px, calc(100vw - 16px - var(--sal) - var(--sar))); }
  body.tray-open .coach-slot { position: static; width: auto; }
  body.tray-open .coach { width: min(440px, calc(100vw - 16px - var(--sal) - var(--sar))); }
  .hud-bl { left: calc(8px + var(--sal)); bottom: calc(var(--bar-h) + var(--sab) + 12px); min-width: 0; max-width: min(360px, calc(100vw - 80px)); }
  body.coach-on .hud-bl .feed { display: none; }
  .seed-tray, .seed-strip { max-width: calc(100vw - 16px - var(--sal) - var(--sar)); }
  .chat-box { width: min(420px, calc(100vw - 16px)); }
  /* the chat line a thumb uses: 44 px field and Send (S9a, ux-phone#16) */
  .chat-box .field, .chat-box .btn { min-height: 44px; }

  /* ---- toasts never squeeze between a banner and the tracker; with a banner up they sit over the bar. The column
     spans the screen (left: 50% alone let an absolute box shrink-wrap to half of it and wrap every toast) ---- */
  .toasts, #hud:has(#banners > :not(.banner-more)) .toasts { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); transform: none; }
  .notice, #hud:has(#banners > :not(.banner-more)) .notice { left: 50%; width: max-content; }
  #hud:has(#banners > :not(.banner-more)) .toast, #hud:has(#banners > :not(.banner-more)) .notice { max-width: min(560px, calc(100vw - 24px)); }
  #hud:has(#banners > .unlock-banner, #banners > .rosette, #banners > .bloom-banner) .toasts { top: auto; bottom: calc(var(--bar-h) + var(--sab) + 16px); }
  /* an urgent notice (Reload) never under a card: it sits over the bar too, above the toasts (QA r4 I4-01) */
  #hud:has(#banners > .unlock-banner, #banners > .rosette, #banners > .bloom-banner) .notice { top: auto; bottom: calc(var(--bar-h) + var(--sab) + 16px); }
  .toast { max-width: min(560px, calc(100vw - 24px)); }

  /* the tutorial's arrow over a tool gets its own room above the bar (tutorial.js body.tut-bar) */
  /* grown by tutorial.js (--tut-room) until Grandma's card stands clear of the arrow (QA r2 S-08) */
  body.tut-bar #toolbar { margin-top: var(--tut-room, 66px); }
  body.tut-tray #build-tray, body.tut-tray #seed-tray { margin-top: var(--tut-room, 0px); }
  /* small buttons on cards a finger presses: 44 px tall at least */
  .unlock-banner .x { width: 44px; height: 44px; }
  .unlock-banner .btn--small, .toast .btn--small, .coach .btn--small { min-height: 42px; }
  .hud-tr .pill::before { content: ''; position: absolute; inset: -6px -3px; }
  .hammer-hint .hint-btn { min-height: 40px; padding: 0 14px; }
  .keys.gestures kbd { white-space: nowrap; flex: none; }
  .ss-seed, .ss-more { width: 44px; height: 44px; }
  /* every button a finger presses in a sheet: 44 px at least (mobile QA P1-4, astra P1-1: Feed / Sell / Collect were
     26 px, stacked 4 px apart). A range slider takes `height` (Chrome ignores its min-height) */
  .hh-panel-body .btn, .hh-panel-body .btn.pn-xs, .hh-panel-body .btn.pn-sm, .hh-panel-body .btn.pn-skip, .hh-panel-body .btn--small,
  .pn-chipbtn, .pn-keep-open, .pn-feedtoggle, .pn-tag-btn, .pn-thanks, .pn-wishbtn, .pn-step, .hh-panel-body .chip {
    min-height: 44px; min-width: 44px; }
  .hh-panel-body input[type="range"], .settings input[type="range"] { height: 44px; }
  .hh-panel-body input.pn-num { min-height: 44px; }
  .hh-tab, .coach-more, .tracker-chip, .hint-btn { min-height: 44px; }
  .panel-tip-x { width: 44px; height: 44px; }
  .coach-more { min-width: 44px; }
  .swatch { width: 44px; height: 44px; }
  /* the farmer dots stay small to look at; the finger gets 44 px across them (two stacked dots share the height) */
  .players .farmer { position: relative; }
  .players .farmer::before { content: ''; position: absolute; inset: -1px -10px; }
  /* two dots stacked share their height: the top one reaches up, the bottom one down (QA r1 S-23: 26 px tall); each
     gets 37 x 44 px (the 24 px dots meet WCAG 2.5.8's 24 px; the 44 px exception is in the lane notes) */
  .players li:first-child:not(:only-child) .farmer::before { inset: -12px -10px -1px; }
  .players li:last-child:not(:only-child) .farmer::before { inset: -1px -10px -12px; }
  .players li:only-child .farmer::before { inset: -10px; }
  .ss-seed .ic { width: 34px; height: 34px; }
  /* a card is flicked away with a finger (toasts.js swipeAway): the browser must not take that drag */
  .unlock-banner { touch-action: none; }
  /* a chat line typed while Grandma's card is up sits over the card, not under it */
  .hud-bl { z-index: 3; }

  /* ---- the Farm book (ui/layout.js; release 1.0 S3): tiles a thumb presses, the last row clear of the home bar ---- */
  .farm-book .m-places, .farm-book .m-tiles, .farm-book #social { gap: 20px 6px; }
  /* the captions' pills a little narrower, the same for every one: five Bulgarian captions keep the book's one size in
     the iPhone's Together row (QA r2 S-21: "Изненада" was set at 11.5 px, "Бележки" at 12.5 px) */
  .farm-book .dock-mini .lbl, .farm-book .social-btn > .lbl, .farm-book .m-tile .lbl { padding-left: 5px; padding-right: 5px; }
  /* five Together tiles in a column too narrow for five (360): three over two, centred, never the surprise alone on a
     second row (QA r2 S2-C1, coop#9; five 13 px captions do not fit 5 x 65 px) */
  @media (max-width: 374px) {
    .farm-book #social .together-menu:not(:has(> button[hidden])):has(> button:nth-of-type(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .farm-book #social .together-menu:not(:has(> button[hidden])):has(> button:nth-of-type(5)) > button { grid-column: span 2; }
    .farm-book #social .together-menu:not(:has(> button[hidden])):has(> button:nth-of-type(5)) > button:nth-of-type(4) { grid-column: 2 / span 2; }
  }
  .farm-book { padding-bottom: calc(12px + var(--sab)); }
}

/* ======== tablets wide enough for the dock in the bar (960-1180 px) ============================================== */
@media (min-width: 960px) and (max-width: 1180px) and (min-height: 501px) {
  .dock-btn, .dock .m-menu-btn { width: 76px; }
}

/* ======== dockless: Build / Market / Barn in the farm menu (tablets under 960 px and every phone) ================ */
@media (max-width: 959px), (max-height: 500px) {
  /* a narrow top row: the farm's name and the pills' chevron step aside (the pills still open their panels) */
  .farm-name, .pill > .more, .pill-hearts { display: none; }
  #hud-xp-bar { width: 130px; }
  .pill { padding-right: 12px; }
}

/* ======== phone (portrait and landscape) ========================================================================== */
@media (max-width: 600px), (max-height: 500px) {
  :root { --bar-h: 84px; }

  /* ---- the compact top row: the level star and its XP bar, the two farmers as stacked dots, coins and acorns ---- */
  .hud-tl { top: calc(6px + var(--sat)); left: calc(6px + var(--sal)); gap: 6px; }
  .level-star { width: 48px; height: 48px; margin-right: -16px; }
  .level-num { font-size: 1.25rem; padding-top: 5px; }
  .level-body { padding: 4px 8px 5px 20px; gap: 0; }
  .farm-name { display: none; }
  #hud-xp-bar { width: 88px; height: 20px; }
  .xp-text { font-size: .8125rem; }
  .xp-text .xp-unit { display: none; }
  .players { flex-direction: column; gap: 1px; }
  .players .face, .players li.partner .face { width: 24px; height: 24px; font-size: .875rem;
    box-shadow: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--pcd), 0 2px 0 4px rgba(62, 38, 18, .25); }
  .players li.partner[data-slot="p2"] .face, .players li[data-slot="p2"] .face { border-radius: 7px; }
  .players .face::after { width: 9px; height: 9px; right: -4px; bottom: -3px; box-shadow: 0 0 0 2px var(--paper-50); }
  body.cb-safe .players li.offline .face { outline-offset: 3px; outline-width: 2px; }
  .hud-tr { top: calc(10px + var(--sat)); right: calc(6px + var(--sar)); gap: 10px; }
  .pill { height: 34px; gap: 4px; padding: 0 10px 0 30px; font-size: 1.0625rem; }
  .pill > .icon { width: 38px; height: 38px; left: -9px; }
  .pill > .more { display: none; }
  .pill .badge { top: -9px; right: -9px; }
  .buffs { left: 0; top: 102px; }
  .buff { height: 30px; font-size: .875rem; }
  /* Settings, the together buttons and Farm Beauty live in the Farm book on a phone (release 1.0 S3) */
  #hud-gear, #hud .hud-bl > .social { display: none; }
  .bench-chip { left: calc(6px + var(--sal)); top: calc(108px + var(--sat)); max-width: calc(100vw - 80px); }
  /* the Golden Hour / Spark pill sits at the chip's top-left: the chip goes under it (QA r2 L2-04, life-feel's note) */
  #hud:has(.buffs > *) .bench-chip { top: calc(150px + var(--sat)); }
  .hud-right { top: calc(56px + var(--sat)); }

  /* ---- the Goal Tracker: one chip under the top row; a tap opens every card under it ---- */
  .tracker-chip-wrap { display: flex; position: absolute; top: calc(58px + var(--sat)); left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); }
  .tracker-chip { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 42px; padding: 0 12px 0 5px;
    border: 0; border-radius: var(--r-pill); text-align: left; pointer-events: auto; color: var(--ink-900);
    background: radial-gradient(120% 90% at 30% 30%, var(--paper-50), var(--paper-100) 60%, var(--paper-200));
    box-shadow: inset 0 0 0 2px var(--paper-edge), 0 0 0 2.5px var(--wood-700), 0 4px 0 2.5px rgba(62, 38, 18, .3); }
  .tracker-chip .slot-tag { flex: none; padding: 4px 7px; border-radius: var(--r-pill); font: 800 .8125rem/1 var(--font-display); letter-spacing: .05em;
    color: #fff; background: var(--go-900); }
  .tracker-chip .tc-art { flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
  .tracker-chip .tc-art .ic, .tracker-chip .tc-art .glyph { width: 26px; height: 26px; }
  /* the NOW chip says its whole line (release 1.0 M12a, ux-phone#4, copy#4): no "NOW" tag (the chip is always NOW), the
     line wraps to two lines and the chip grows instead of cutting its noun */
  .tracker-chip .tc-t { min-width: 0; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font: 700 .9375rem/1.1 var(--font-ui); }
  .tracker-chip { height: auto; min-height: 44px; padding-top: 3px; padding-bottom: 3px; }
  .tracker-chip .slot-tag { display: none; }
  .tracker-chip { padding-left: 8px; }
  .tracker-chip .tc-n { flex: none; padding: 2px 7px; border-radius: var(--r-pill); font: 800 .8125rem/1.2 var(--font-ui); color: #fff; background: var(--wood-700); }
  .tracker-chip .chev { flex: none; font: 800 .875rem/1 var(--font-ui); color: var(--ink-700); transition: transform var(--t-micro) var(--ease-out); }
  .tracker-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .tracker-chip.bang::after { content: '!'; position: absolute; right: -6px; top: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    font: 800 .875rem/1 var(--font-display); color: var(--ink-900); background: var(--sun-500); box-shadow: 0 0 0 2px var(--sun-900); }
  .tracker { display: none; top: calc(108px + var(--sat)); left: calc(6px + var(--sal)); width: min(360px, calc(100vw - 12px - var(--sal) - var(--sar)));
    max-height: calc(100% - 116px - var(--sat) - var(--bar-h) - var(--sab)); overflow-y: auto; overscroll-behavior: contain;
    gap: 12px; padding: 12px 10px 10px; border-radius: var(--r-l);
    background: rgba(255, 244, 214, .94); box-shadow: inset 0 0 0 2px var(--paper-edge), 0 0 0 3px var(--wood-700), var(--drop); }
  .tracker.m-open { display: flex; z-index: 20; pointer-events: auto; }
  .tracker .tracker-mode { display: none; }
  .goal { min-height: 56px; }

  /* ---- the farm menu button and the bar ---- */
  .hud-right { gap: 6px; }
  .edge-btn { width: 44px; height: 44px; }
  .edge-btn .glyph { width: 26px; height: 26px; }
  .edge-gap { height: 2px; }

  /* the seed on the armed Hand's picture sits inside the picture, clear of the slot's word under it (QA r3 S3-18, fbp#15:
     at 360 it covered the tops of "Wheat" and "Пшеница" by 3 px) */
  .tool .crop-on { bottom: 3px; width: 24px; height: 24px; }
  .tool .crop-on .ic { width: 20px; height: 20px; }

  /* ---- above the bar ---- */
  .coach { padding: 5px; }
  .coach-paper { gap: 8px; padding: 7px 9px; }
  .coach .grandma-art, .coach .gran { width: 40px !important; height: 40px !important; }
  .coach .line { font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .coach .who { font-size: .875rem; }
  .coach .prog { margin-top: 3px; }
  .coach .acts .btn { font-size: .875rem; padding: 7px 12px 9px; }
  .coach-more { width: 40px; height: 40px; }
  .feed li { font-size: .875rem; padding: 3px 6px 3px 9px; }
  .feed li .ic { width: 20px; height: 20px; }
  .feed li:not(:nth-last-child(-n+2)) { display: none; }
  .hud-bl .feed li.stale { display: none; }
  /* a seed card grows with its "Plant 108 · 1h" line (a fixed 96 px let it run into the next card) */
  .seed { width: auto; min-width: 96px; padding-left: 6px; padding-right: 6px; }

  /* ---- toasts and banners under the tracker chip ---- */
  .conn, .toasts, .notice { top: calc(108px + var(--sat)); }
  /* the connection line keeps out of the edge lane too: the column stands at its height since owner 2026-10-19 */
  .conn { left: calc(8px + var(--sal)); right: var(--edge-lane); width: fit-content; margin-inline: auto; transform: none;
    max-width: calc(100vw - 8px - var(--sal) - var(--edge-lane)); }
  .conn:not(:empty) ~ .toasts, .conn:not(:empty) ~ .notice { top: calc(160px + var(--sat)); }
  /* a running Friendly Duel's score chip sits under the tracker (ui-league): toasts and notices go below it */
  #hud:has(> .lg-duel-chip:not([hidden])) .toasts, #hud:has(> .lg-duel-chip:not([hidden])) .notice { top: calc(156px + var(--sat)); }
  .notice { max-width: calc(100vw - 16px); }
  .banners { top: calc(108px + var(--sat)); right: calc(12px + var(--sar)); left: calc(12px + var(--sal)); align-items: center; }
  .unlock-banner .x { right: -6px; }
  /* the right edge column (Harvey, zoom, turn) keeps its own lane: banners, toasts and notices stop short of it, so none
     of them ever lies over its buttons, whatever their height or the column's place (verifier 2026-10-13: the land
     banner covered Harvey's button on an iPhone 13 and the tap landed on the banner). 16 px edge + 44 px button + gap */
  #hud { --edge-lane: calc(var(--safe) + 56px + var(--sar)); }
  .banners { right: var(--edge-lane); }
  .toasts, #hud:has(#banners > :not(.banner-more)) .toasts { right: var(--edge-lane); }
  .toast, #hud:has(#banners > :not(.banner-more)) .toast { max-width: min(560px, calc(100vw - 8px - var(--sal) - var(--edge-lane))); }
  .notice, #hud:has(#banners > :not(.banner-more)) .notice { left: calc(8px + var(--sal)); right: var(--edge-lane); width: fit-content;
    margin-inline: auto; transform: none; max-width: min(560px, calc(100vw - 8px - var(--sal) - var(--edge-lane))); }
  body.tut-bar #hud:has(#banners > .unlock-banner, #banners > .rosette, #banners > .bloom-banner) .toasts {
    bottom: calc(var(--bar-h) + var(--sab) + 82px); }
  .unlock-banner, .bloom-banner, .rosette { width: min(360px, 100%); }
  .banner-more { align-self: center; }
  /* a drip-fed system card ("Changed your mind?") folds into a slim chip on a phone (wave 4b): one 48 px line under the
     tracker instead of a quarter of the screen; a tap opens the whole card, Got it / × / a swipe put it away */
  .unlock-banner.compact:not(.open) { padding: 4px; border-radius: var(--r-pill); width: min(340px, 100%); }
  .unlock-banner.compact:not(.open) > .ribbon, .unlock-banner.compact:not(.open) > .sheet { display: none; }
  .unlock-banner.compact:not(.open) > .card-chip { display: flex; }
  .unlock-banner.compact:not(.open) > .x { top: 50%; right: 2px; translate: 0 -50%; }
  .card-chip { align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 50px 4px 10px; border: 0;
    border-radius: var(--r-pill); background: linear-gradient(180deg, var(--paper-50), var(--paper-100));
    box-shadow: inset 0 0 0 2px var(--paper-edge); color: var(--ink-900); text-align: left; cursor: pointer; }
  .card-chip-bulb { flex: none; font-size: 1.15rem; line-height: 1; }
  /* release 1.0 M12a (integrator): the title takes a second line rather than "Changed you…" at 360 x 640 */
  .card-chip-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font: 800 1rem/1.15 var(--font-display); }
  .card-chip-more { flex: none; padding: 3px 10px 4px; border-radius: var(--r-pill); font: 700 .8125rem/1.2 var(--font-ui);
    color: #fff; background: var(--sky-700, #2F7FC1); }
  .card-chip:focus-visible { outline: 3px solid var(--sky-900); outline-offset: 2px; }
  .unlock-banner.compact.open { animation: none; }

  /* the level-up: the same show, phone-sized */
  .lvl { scale: .62; }

  /* the seed picker at a plot: four columns, inside the screen (release 1.0 M12a, ux-phone#2 appendix): 12 px from each
     edge, no "then tap or drag" line, names on up to two lines in their card, the price and the clock wrapping */
  .seed-pop { max-width: calc(100vw - 24px - var(--sal) - var(--sar)); }
  .sp-grid { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
  /* the clock glyph steps aside: "утре 04:00" keeps one line in a 4-column picker (QA r2 S-23) */
  .sp-clk { display: none; }
  .sp-head span { display: none; }
  .sp-nm { white-space: normal; text-align: center; line-height: 1.05; min-height: 2.1em; display: flex; align-items: center; justify-content: center;
    overflow-wrap: break-word; hyphens: auto; max-width: 100%; font-size: .8125rem; }
  .sp-seed { min-width: 0; }

  /* ---- panels: sheets with a grip; the banner title sits inside the sheet, the close button in its corner ---- */
  .hh-sheet-grip { display: block; position: absolute; z-index: 3; left: 50%; top: 6px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px;
    background: rgba(90, 50, 21, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
  .hh-sheet-grip::before { content: ''; position: absolute; inset: -6px -50px -10px; }
  .hh-sheet-grip, .hh-panel-title { touch-action: none; }
  .hh-panel-title { top: 15px; max-width: calc(100% - 124px); padding: 6px 20px 8px; font-size: 1.375rem;
    text-shadow: -1.5px -1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px 1.5px 0 var(--o), 1.5px 1.5px 0 var(--o), 0 2.5px 0 var(--o); }
  .hh-panel.size-side .hh-panel-title { font-size: 1.375rem; }
  .hh-panel-title .ic { width: 30px; height: 30px; margin: -6px 0 -6px -8px; }
  .hh-panel-close { right: calc(10px + var(--sar)); top: 11px; width: 44px; height: 44px; }
  .hh-panel-close .glyph { width: 22px; height: 22px; }
  .hh-tabs { padding: 0 2px; --tab-pad: 2px; }
  .hh-tab { min-height: 44px; padding: 8px 12px 9px; }
  .hh-panel-body { padding: 12px 10px 16px; }
  .hh-panel .scroll-fade { left: 10px; right: 10px; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  @keyframes sheet-left { from { transform: translateX(100%); } }
  @keyframes sheet-right { to { transform: translateX(100%); } }

  /* ---- panel bodies reflow: one column for every two-pane page, card grids never wider than the sheet ---- */
  .pn-sell, .pn-land, .pn-land-one, .pn-ordhead, .pn-barnhead, .wk-fair-top, .wk-barge-top, .wk-fair-cols, .wk-town-cols, .wk-payout,
  .pc-wall-head, .pc-ledger, .pc-bgrid, .pc-pages, .pc-set-body, .pc-album-head, .pc-bundles { grid-template-columns: minmax(0, 1fr); }
  .pn-recipes, .pn-animals, .pn-letters, .pn-letters:has(> .pn-letter:only-child), .pn-week, .pn-ribbons, .pn-statrows, .pn-board,
  .pn-cards2, .pn-anifoot, .pn-cards.pn-cards-animals, .wk-board, .wk-friend-grid, .pc-pieces, .pc-mws, .pc-facts, .pc-pets {
    grid-template-columns: minmax(0, 1fr); }
  .pn-cards, .wk-entries { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .pn-stacks { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .pn-barnrow { grid-template-columns: 40px minmax(0, 1fr) 56px; }
  .pn-barnrow .pn-keep, .pn-barnrow .pn-keep-open, .pn-barnrow-acts { grid-column: 2 / -1; }
  .pn-upgrade { max-width: none; }
  .pn-tree { grid-template-columns: 96px minmax(0, 1fr); }
  .pn-tree-art { width: 96px; height: 96px; }
  .pn-reqs { grid-template-columns: minmax(0, 1fr); }
  .wk-row { grid-template-columns: 54px minmax(0, 1fr); }
  .wk-row > :last-child { grid-column: 1 / -1; }
  .pc-tiers, .pc-btop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-next-list { grid-template-columns: minmax(0, 1fr); }
  .pc-project { min-width: 0; }
  /* the village across the river keeps readable names: it scrolls sideways instead of shrinking to 5 px text (M-11) */
  .wk-village-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .wk-village-wrap::-webkit-scrollbar { display: none; }
  .wk-village { width: 760px; max-width: none; max-height: none; }
  .wk-ladder-head { flex-wrap: wrap; }
  .wk-entries { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
  .wk-row { grid-template-columns: minmax(0, 1fr); }
  .wk-row > :last-child { grid-column: auto; }
  .pn-plotstrip { flex-wrap: wrap; gap: 8px 12px; }
  .pn-plotstrip-text { flex: 1 1 160px; }
  .pn-plotstrip .ic { width: 44px; height: 44px; }
  .pn-bhead { flex-wrap: wrap; gap: 10px 12px; }
  .pn-bhead-art { width: 64px; height: 64px; }
  .pn-bhead-art .ic { width: 52px; height: 52px; }
  .pn-bhead-text { flex: 1 1 200px; }
  .pn-bhead-acts { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .pn-bhead-acts > * { flex: 1 1 140px; }
  .pc-bhero { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pn-store-intro { flex-wrap: wrap; }
  /* the Market's sell slip rides at the bottom of the sheet while the goods scroll under it */
  .pn-slip { top: auto; bottom: 0; z-index: 2; gap: 8px; padding: 12px 12px 12px; margin-top: 4px;
    box-shadow: inset 0 0 0 2px rgba(217, 182, 119, .8), 0 -8px 16px rgba(62, 38, 18, .18); }
  .pn-slip-head .ic { width: 52px; height: 52px; }
  .pn-slip-title { font-size: 1.25rem; }
  .pn-sell-btn { min-height: 48px; }

  /* ---- the first screen: the card scrolls when a keyboard or a short screen leaves no room for it ---- */
  #slot-picker.modal-layer { overflow-y: auto; overscroll-behavior: contain; place-items: start center;
    padding: calc(8px + var(--sat)) calc(8px + var(--sar)) calc(16px + var(--sab)) calc(8px + var(--sal)); }
  .slot-card { width: min(500px, 100%); margin: 78px auto 0; }
  .slot-title { width: min(340px, 86vw); }
  .slot-paper { padding: 12px 12px 10px; }
  /* the colours in one row, their name under it, Play last and full width (S9a, ux-phone#18) */
  .slot .swatches { padding-left: 0; flex-wrap: wrap; gap: 4px; justify-content: space-between; width: 100%; }
  .swatch { width: 44px; height: 44px; }
  /* all the colours share one row: each 44 px where there is room, a little less on a 360 px phone (QA r1 S-19: the
     sixth wrapped alone onto a second row) */
  .slot .swatches .swatch { flex: 1 1 0; min-width: 0; max-width: 44px; height: auto; aspect-ratio: 1; }
  .slot .swatches .sw-name { flex: 1 1 100%; text-align: center; margin: 2px 0 0; }
  .slot .pass { margin-left: 0; max-width: 100%; }
  .slot .btn { margin-left: auto; min-height: 44px; }
  .slot > .btn { flex: 1 1 100%; width: 100%; margin-left: 0; }

  /* ---- dialogs inside the sheets ---- */
  .dlg .art { width: 72px; height: 72px; }
  .dlg .lead { font-size: 1.125rem; }
  .settings { grid-template-columns: 1fr; gap: 14px; }
  .sign { width: 100%; }
}

/* ======== phone upright ============================================================================================ */
@media (max-width: 600px) {
  /* portrait: a running duel's chip (top 112 px) sits where the Golden Hour / Spark pill is; the pill goes under it
     (the chip covered it: "Golden" was all that showed) and toasts under both */
  #hud:has(> .lg-duel-chip:not([hidden])) .buffs { top: 152px; }
  #hud:has(> .lg-duel-chip:not([hidden])):has(.buffs > *) .toasts,
  #hud:has(> .lg-duel-chip:not([hidden])):has(.buffs > *) .notice { top: calc(196px + var(--sat)); }
  /* the Barn is a phone-bar button; Acorns and Hearts live on the Farm book's You page (M12a, ux-phone#1) */
  .pill-hearts, .pill-barn, body.acorn-price #hud-acorns-pill { display: none; }

  /* the right edge cluster (owner 2026-10-19: "on Phone move the icons better, nothing at the center of the screen"):
     Harvey and the turn button stand at the top of the edge lane, under the coins, so the farm keeps its middle and the
     column never meets Grandma's card, a tray, the tool pop-up or the bar (it used to stand at 46 % and dodge her card
     with six rules). Harvey's progress shows as a small chip under it (harness.css). The quest chip stops short of the
     lane, so a long Bulgarian goal never runs under Harvey; a centred duel chip keeps out of it on both sides */
  .hud-right { top: calc(54px + var(--sat)); }
  .tracker-chip-wrap { right: calc(var(--edge-lane) + 8px); }
  #hud > .lg-duel-chip { max-width: calc(100vw - 2 * var(--edge-lane)); }
  /* the timers row (Golden Hour, Spark, the balloon crates' power-ups) is the left slot under the quest chip: a second
     timer wraps under the first instead of running into the lane */
  .buffs { max-width: calc(100vw - 12px - var(--sal) - var(--edge-lane)); flex-wrap: wrap; }

  /* the phone bar (release 1.0 S3, ux-phone#3): five slots across the screen, [tool in hand] [Market] [Orders] [Barn]
     [Farm book]; the other tools pop up from the tool slot (with Build); the bar's wood is the toolbar itself */
  :root { --slot: calc((100vw - 12px - var(--sal) - var(--sar)) / 5); }
  /* before Orders opens (L2) the bar has four slots: they share its width, no empty cell (QA r1 S-25; hud.js data-bar) */
  body[data-bar="4"] { --slot: calc((100vw - 12px - var(--sal) - var(--sar)) / 4); }
  .tray-wrap { left: 0; right: 0; padding: 0; gap: 8px; align-items: center; max-width: none; }
  #toolbar { align-self: stretch; max-width: none; gap: 0; height: calc(80px + var(--sab)); border-radius: 22px 22px 0 0; overflow: visible;
    padding: 8px 6px calc(6px + var(--sab)) calc(6px + var(--sal)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2.5px var(--wood-900), 0 -4px 12px rgba(62, 38, 18, .25); }
  #toolbar::after { content: none; }
  .tray-wrap::after { content: none; }
  .tool, .tool-cur { width: calc(var(--slot) - 6px); height: 66px; padding-top: 2px; }
  .tool .ico { height: 38px; }
  .tool .ic, .tool .glyph { width: 38px; height: 38px; }
  /* a name too long for its slot shrinks to fit (toolbar.js fitLabel, measured): a scaleX(.86) left "Царевиц(а)" cut
     at 360 BG (QA r1 S-07); only the sides clip: the 1.0 line box is 13 px and the outlined letters reach 17 px, so a
     clip on both axes cut their feet (i18n-shots clipY, integrator QA r1) */
  .tool .name { display: block; font-size: .8125rem; max-width: 100%; overflow: hidden; overflow-x: clip; overflow-y: visible; text-overflow: clip; }
  .tool .name.long { letter-spacing: -.02em; }
  .tool-cur[aria-pressed="true"] { transform: none; }
  /* one label style for the five slots of the bar (QA r1 S-34): the tool slot's word is white and outlined like the
     doors' (the slot in hand already shows by its yellow tile) */
  #toolbar .tool-cur .name { font: 800 .8125rem/1 var(--font-display); letter-spacing: -.01em; color: #fff; --o: var(--wood-900);
    text-shadow: -1.5px -1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px 1.5px 0 var(--o), 1.5px 1.5px 0 var(--o), 0 2.5px 0 var(--o); }
  #hud > .dock { display: flex; right: calc(6px + var(--sar)); bottom: calc(6px + var(--sab)); gap: 6px; padding: 0; border-radius: 0;
    background: none; box-shadow: none; z-index: 3; }
  #hud > .dock::after { content: none; }
  #hud > .dock .dock-btn[data-dock="build"] { display: none; }
  #hud > .dock .dock-btn, #hud > .dock .m-menu-btn { width: calc(var(--slot) - 6px); height: 66px; padding: 2px 1px 0; border-radius: 14px; }
  #hud > .dock .dock-btn .ic, #hud > .dock .dock-btn .glyph, #hud > .dock .m-menu-ico .glyph { width: 38px; height: 38px; }
  #hud > .dock .m-menu-ico { height: 38px; }
  #hud > .dock .dock-btn .lbl, #hud > .dock .m-menu-btn .lbl { max-width: 100%; font-size: .8125rem; line-height: .95; white-space: normal; text-align: center;
    overflow-wrap: anywhere; }
  /* badges inside the circle (astra#8: a badge sat on the neighbour's label) */
  #hud > .dock .badge { top: 2px; right: 2px; transform: scale(.86); transform-origin: 100% 0; }
  /* the tool pop-up: every tool and Build in a grid over the bar, its caret at the slot */
  .tool-flyout.tool-pop { align-self: flex-start; margin: 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    width: min(calc(100vw - 12px - var(--sal) - var(--sar)), 360px); gap: 10px 6px; padding: 12px 10px 10px; }
  .tool-flyout.tool-pop .tool { width: auto; min-width: 0; height: 66px; }
  /* the coach's arrow into the pop-up (Build) comes from above onto Строй, which leads the pop-up while a build step
     waits; the room for the arrow opens above the pop-up (tutorial.js grows --tut-room until her card clears it), the
     grid stays compact (QA r3 S3-07, fbp#8: a 96 px band of empty cream opened between the rows and pushed her card to
     mid-screen; QA r2 S-09: the arrow lay on Семена and Лейка, the tiles above Строй) */
  body.tut-fly .tool-flyout.tool-pop { margin-top: var(--tut-room, 0px); }
  body.tut-fly .tool-flyout.tool-pop [data-act="build"] { order: -1; }
  .coach-slot, .seed-tray, .build-tray, .stroke-chip, .seed-strip, .tray-tip, .hammer-hint, .tool-flyout { margin: 0 6px; }
  .coach { width: calc(100vw - 12px - var(--sal) - var(--sar)); }
  body.tray-open .coach { width: calc(100vw - 12px - var(--sal) - var(--sar)); }
  /* Grandma's whole line on an upright phone: four lines, three with a tray or the pop-up open (QA r3 S3-02, fbp#2:
     "…в…" and "(става и пшеницата…" were cut at 360 BG, clamped at three and two) */
  .coach .line { -webkit-line-clamp: 4; }
  body.tray-open .coach .line { -webkit-line-clamp: 3; }
  /* Grandma's words take the card's whole width; "⋯" (and the naming chip) ride in the progress row under them: in its
     own column "⋯" left the Bulgarian lines four and five lines long at 360, cut at three (QA r1 S-04) */
  .coach--line .coach-paper { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: center; }
  .coach--line .grandma-art, .coach--line .gran { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .coach--line .say { display: contents; }
  .coach--line .line { grid-column: 2 / 4; grid-row: 1; }
  .coach--line .prog { grid-column: 2; grid-row: 2; margin-top: 0; }
  .coach--line .acts { grid-column: 3; grid-row: 2; margin-left: 0; justify-self: end; }
  .coach--line .say:not(:has(.prog)) ~ .acts { grid-column: 2 / 4; }
  .coach--line .coach-paper:has(.coach-name) .acts { grid-column: 2 / 4; grid-row: 3; }
  /* the "⋯" in its 44 px circle sat above the middle (Astra's look at the 360 card): no lift on a phone */
  .coach--line .coach-more { padding: 0; }
  /* her count-down never runs under the "⋯" beside it: it takes a line of its own when the row has no room (QA r3 S3-03,
     fbp#3: "0/3 готово след 1:39, после го вз" with "вземи" under the ⋯ once the farm was named) */
  .coach--line .prog { min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  .coach--line .prog .eta { white-space: normal; min-width: 0; }
  /* the bar keeps 56 px beside a count-down; the count-down takes the next line (QA r4 S4-10, fbp#7: a 7 px dot) */
  .coach--line .prog .bar { min-width: 56px; }
  /* the Undo chip (and the bench chip) stand above Grandma's card, never on it: at 360 the Undo chip covered her "Name
     your farm" chip for its ten minutes (QA r1 S-14; tutorial.js sets --coach-h) */
  body.coach-on .hud-bl { bottom: calc(var(--bar-h) + var(--sab) + 20px + var(--coach-h, 0px)); }
  /* a three-line step with the pop-up open lifts her card high (QA r4 S4-03, fbp#1): while a tray or the pop-up is open
     her naming chip waits (a row less). The right column no longer follows her card: it stands at the top (above) */
  body.tray-open .coach--line .coach-name { display: none; }
  body.tray-open .coach--line .coach-paper:has(.coach-name) .acts { grid-column: 3; grid-row: 2; }

  /* every panel is a bottom sheet; the big ones take the whole screen under the status bar */
  .hh-panel, .hh-panel.size-side, .hh-panel.size-wide, .hh-panel.size-full, .hh-panel.size-card {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto; transform: none; max-height: calc(100% - 10px - var(--sat));
    padding: 62px calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal)); border-radius: 22px 22px 0 0; }
  .hh-panel.size-wide, .hh-panel.size-full { height: calc(100% - 10px - var(--sat)); }
  /* without tabs a wide panel's height never jumps, so a short one (Pets, a building) is only as tall as it needs */
  .hh-panel.size-wide:not(:has(> .hh-tabs:not([hidden]))) { height: auto; }
  .hh-panel.is-opening, .hh-panel.size-card.is-opening, .hh-panel.size-side.is-opening { animation: sheet-up 300ms var(--ease-out) both; }
  .hh-panel.is-closing, .hh-panel.size-card.is-closing, .hh-panel.size-side.is-closing { animation: sheet-down 160ms var(--ease-in) both; }
  .hh-panel .scroll-fade { bottom: calc(8px + var(--sab)); }
  /* the Market on an upright phone (final release V-07): the slip was a third of the sheet (about 320 px) and the
     chalkboard another 125, so only two rows of goods showed. The chalkboard keeps only its wanted goods; the slip
     packs the quick chips and the total on one row, and an empty note takes no room */
  .pn-chalk { margin: 0 0 8px; padding: 6px 10px 8px; }
  .pn-chalk-title { display: none; }
  .pn-chalk-body { margin-top: 0; }
  .pn-slip { flex-flow: row wrap; align-items: center; gap: 6px 8px; padding: 8px 12px 10px; }
  .pn-slip > * { flex: 1 1 100%; min-width: 0; }
  .pn-slip-head { gap: 8px; }
  .pn-slip-head .ic { width: 40px; height: 40px; }
  .pn-slip-title { font-size: 1.0625rem; }
  .pn-slip-qty { grid-template-columns: minmax(0, 1fr) 64px; }
  .pn-slip > .pn-quick { flex: 0 1 auto; }
  .pn-slip-total { font-size: 1.5rem; }
  /* Grandma's card already says what the tray tip says: on an upright phone the tip goes while she talks, so the
     card, the tip and the tray no longer cover half the farm (final release PT-07) */
  body.tray-open.coach-on .tray-tip { display: none; }
  /* the Undo chip sits where an open tray's cards are (the 360 e2e: it covered the build tray's Move card) */
  body.tray-open .hud-chips { visibility: hidden; }
  /* the bottom-left column (the Undo chip, the feed lines) lies where a stroke's "Planting Wheat × 4" chip is: it steps
     aside for the chip's 2.5 s; the chip says the same thing (the integrator's QA r1 e2e-mobile: "Undo: Flower Bed" on
     "Planting Wheat × 1" at 360, "You harvested 2 Wheat" on "… × 4" on the iPhone) */
  #hud:has(.stroke-chip:not(.hammer-hint):not([hidden])) .hud-bl { visibility: hidden; }
}

/* ======== small phones upright (iPhone SE, Galaxy S8, 360 x 640): the farm keeps its middle (mobile QA P1-3, M-09) === */
@media (max-width: 600px) and (max-height: 760px) {
  /* "Farm book" wrapped to two lines and ran out of the 360 phone bar's button: one line, set narrower */
  #hud > .dock .m-menu-btn .lbl { display: inline-block; max-width: none; white-space: nowrap; transform: scaleX(.84); }
  /* with the seed tray open the tip, the coach's progress line and a third coach line go */
  body.tray-open .tray-tip, body.tray-open .coach .prog { display: none; }
  body.tray-open .coach .line { -webkit-line-clamp: 3; }
  /* the seed picker: two rows that scroll sideways, so it fits above or below its plot instead of on it */
  .sp-grid { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-columns: 80px;
    max-width: calc(100vw - 42px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 3px; }
  .sp-grid::-webkit-scrollbar { display: none; }
  /* three seeds or fewer (level 1: Wheat and two locked) keep one row: short enough to sit under the plot with Grandma's
     card clear below it (first-time FT-2: two rows went over her line, or beside the plot over Harvey) */
  .sp-grid:not(:has(> :nth-child(4))) { grid-template-rows: auto; }
  /* the Market: Mabel's chalkboard and the sell slip shrink so the goods keep three to six stacks in view */
  .pn-chalk { margin: 0 0 8px; padding: 6px 10px 8px; }
  .pn-chalk-title { display: none; }
  .pn-chalk-body { margin-top: 0; }
  .pn-slip { gap: 6px; padding: 8px 12px 10px; }
  .pn-slip-head { gap: 8px; }
  .pn-slip-head .ic { display: none; }
  .pn-slip-title { font-size: 1.0625rem; }
}

/* ======== phone on its side: tools on the left, the view buttons and the menu on the right ===================== */
@media (max-height: 500px) and (min-width: 601px) {
  :root { --side-l: 84px; --side-r: 64px; }
  .hud-tr { right: calc(6px + var(--sar)); }
  .pill-barn .cap { font-size: .875rem; }

  /* the tracker chip and its drop-down start right of the tool column */
  .tracker-chip-wrap { top: calc(56px + var(--sat)); left: calc(var(--side-l) + var(--sal)); right: auto; max-width: min(440px, calc(100vw - var(--side-l) - var(--side-r) - 90px)); }
  .tracker { top: calc(104px + var(--sat)); left: calc(var(--side-l) + var(--sal)); width: min(380px, calc(100vw - var(--side-l) - var(--side-r) - 16px));
    max-height: calc(100% - 112px - var(--sat) - var(--sab)); }

  /* the right column: Harvey and the turn button under the pills */
  .hud-right { top: calc(54px + var(--sat)); transform: none; gap: 6px; }
  .edge-btn { width: 44px; height: 44px; }
  .edge-gap { height: 0; }

  /* the phone bar on its side (release 1.0 S3: "landscape keeps its layout with these items"): one column at the left,
     [tool in hand] [Market] [Orders] [Barn] [Farm book]; the coach, the trays and the chips stay at the bottom */
  .tray-wrap { top: 0; justify-content: flex-end; align-items: center; gap: 6px; max-width: none;
    padding: 0 calc(var(--side-r) + 8px + var(--sar)) calc(6px + var(--sab)) calc(var(--side-l) + 4px + var(--sal)); }
  #toolbar { position: absolute; left: calc(6px + var(--sal)); top: calc(54px + var(--sat)); flex-direction: column;
    max-width: none; width: 72px; padding: 6px; gap: 6px; overflow: visible; border-radius: 18px 18px 0 0; }
  .tool, .tool-cur { width: 60px; height: 52px; padding-top: 1px; }
  .tool .ico { height: 32px; }
  .tool .ic, .tool .glyph { width: 32px; height: 32px; }
  .tool .name { display: block; font-size: .8125rem; max-width: 100%; overflow: hidden; overflow-x: clip; overflow-y: visible; text-overflow: clip; }
  .tool .name.long { letter-spacing: -.02em; }
  .tool[aria-pressed="true"], .tool-cur[aria-pressed="true"] { transform: none; }
  #toolbar .tool-cur .name { font: 800 .8125rem/1 var(--font-display); color: #fff; --o: var(--wood-900);
    text-shadow: -1.5px -1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px 1.5px 0 var(--o), 1.5px 1.5px 0 var(--o), 0 2.5px 0 var(--o); }
  .tool .badge { top: -6px; right: -6px; }
  #hud > .dock { display: flex; flex-direction: column; left: calc(6px + var(--sal)); right: auto; top: calc(54px + 64px + var(--sat)); bottom: auto;
    width: 72px; gap: 6px; padding: 0 6px 6px; border-radius: 0 0 18px 18px; }
  #hud > .dock .dock-btn[data-dock="build"] { display: none; }
  #hud > .dock .dock-btn, #hud > .dock .m-menu-btn { width: 60px; height: 52px; padding: 1px 0 0; border-radius: 13px; }
  #hud > .dock .dock-btn .ic, #hud > .dock .dock-btn .glyph, #hud > .dock .m-menu-ico .glyph { width: 32px; height: 32px; }
  #hud > .dock .m-menu-ico { height: 32px; }
  #hud > .dock .dock-btn .lbl, #hud > .dock .m-menu-btn .lbl { max-width: 100%; font-size: .8125rem; line-height: .95; white-space: normal; text-align: center; overflow-wrap: anywhere; }
  /* "Farm book" on two lines ran out of the 52 px button (the iPhone 13 landscape shots): one line, set narrower */
  #hud > .dock .m-menu-btn .lbl { display: inline-block; max-width: none; white-space: nowrap; transform: scaleX(.84); }
  #hud > .dock .badge { top: 1px; right: 1px; transform: scale(.8); transform-origin: 100% 0; }
  /* the tool pop-up opens to the right of the column */
  .tool-flyout.tool-pop { position: absolute; left: calc(84px + var(--sal)); top: calc(54px + var(--sat)); display: grid; grid-template-columns: repeat(3, 64px);
    gap: 8px 6px; padding: 10px; }
  .tool-flyout.tool-pop .tool { width: 64px; height: 56px; }
  .tool-flyout.tool-pop .fly-caret { left: -9px; top: 22px; bottom: auto; box-shadow: -3px 3px 0 0 var(--wood-700); }
  .coach, body.tray-open .coach { width: min(560px, 100%); }
  .coach .line, body.tray-open .coach .line { -webkit-line-clamp: 2; }
  /* Grandma's buttons side by side: the card stays two lines tall and the farm keeps its middle */
  .coach .acts { flex-direction: row; align-items: center; align-self: center; }
  .hud-bl { left: calc(var(--side-l) + var(--sal)); bottom: calc(6px + var(--sab)); max-width: min(380px, 44vw); }
  .conn, .toasts, .notice { top: calc(56px + var(--sat)); }
  .conn:not(:empty) ~ .toasts, .conn:not(:empty) ~ .notice { top: calc(104px + var(--sat)); }
  #hud:has(#banners > .unlock-banner, #banners > .rosette, #banners > .bloom-banner) .toasts { bottom: calc(80px + var(--sab)); }
  .banners { top: calc(56px + var(--sat)); left: auto; right: calc(var(--side-r) + 8px + var(--sar)); width: min(360px, 46vw); }
  .buffs { top: 50px; left: calc(var(--side-l) + 280px); }
  .lvl { scale: .5; }
  /* the seed picker: two rows that scroll sideways (a half card peeks at the end), so the card fits beside its plot
     instead of on it (seeds.js popPlacement 'side'; astra P1-2) */
  .sp-grid { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-columns: 80px;
    max-width: calc(3.5 * 80px + 3 * 5px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 3px; }
  .sp-grid::-webkit-scrollbar { display: none; }
  /* the quick-seed strip stays between the tool column and the menu (it ran 39 px under each, astra P1-4) */
  .seed-tray, .seed-strip { max-width: 100%; }
  /* the Market on a 390 px tall screen: the tab's intro and the plots card fold so a crop and its button show (astra P1-5) */
  .pn-store-intro .pn-intro { display: none; }
  .pn-store-intro { justify-content: flex-end; }
  .pn-plotstrip { flex-wrap: nowrap; gap: 10px; margin-bottom: 10px; padding: 4px 8px 4px 4px; }
  .pn-plotstrip .ic { width: 36px; height: 36px; }
  .pn-plotstrip-text span { display: none; }
  .pn-plotstrip .btn { min-height: 44px; padding-top: 6px; padding-bottom: 8px; white-space: nowrap; }

  /* the Market's sell slip: too tall to ride along the bottom of a 340 px sheet, so it stands beside the goods */
  .pn-sell { grid-template-columns: minmax(0, 1fr) 216px; gap: 10px; }
  .pn-stacks { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .pn-slip { top: 0; bottom: auto; margin-top: 0; padding: 10px; box-shadow: inset 0 0 0 2px rgba(217, 182, 119, .8), var(--pn-shadow); }
  .pn-slip-head { gap: 8px; }
  .pn-slip-head .ic { width: 40px; height: 40px; }
  .pn-slip-title { font-size: 1.125rem; }
  .pn-slip-qty { grid-template-columns: minmax(0, 1fr) 56px; }
  .pn-slip-sum { flex-wrap: wrap; }
  /* renaming the farm with the keyboard up (181 px left): the suggestion chips fold while the name field has the focus,
     so the field and Carve both fit above the keyboard (QA r3 S3-16, oib#4: three rows of chips between them scrolled
     the field out of sight); a chip's tap fills the field as before */
  #panel-naming:has(input.field:focus) .chips { display: none; }
  /* dialogs: the buttons stay in view on a 340 px screen */
  .dlg { gap: 8px; }
  .dlg .art { width: 52px; height: 52px; }
  .dlg .acts { margin-top: 0; }

  /* panels slide in from the right and leave the farm in view; small cards stay in the middle */
  .hh-panel.size-side, .hh-panel.size-wide, .hh-panel.size-full, #panel-menu.hh-panel {
    left: auto; right: 0; top: 0; bottom: 0; width: min(500px, 64vw); height: auto; max-height: none; transform: none;
    padding: 58px calc(8px + var(--sar)) calc(6px + var(--sab)) 12px; border-radius: 22px 0 0 22px; }
  .hh-panel.size-card:not(#panel-menu) { width: min(460px, calc(100vw - 24px)); max-height: calc(100% - 12px); padding-top: 56px; }
  .hh-panel.size-side .hh-sheet-grip, .hh-panel.size-wide .hh-sheet-grip, .hh-panel.size-full .hh-sheet-grip, #panel-menu .hh-sheet-grip {
    left: 5px; top: 50%; width: 5px; height: 46px; margin: -23px 0 0; }
  .hh-panel.size-card:not(#panel-menu) .hh-sheet-grip { display: none; }
  /* its hit area stays in the sheet's 12 px left gutter (QA r4 S4-08, oib#2: the upright one, 105 x 60 px, swallowed taps
     on the Farm book's first column) */
  .hh-panel.size-side .hh-sheet-grip::before, .hh-panel.size-wide .hh-sheet-grip::before, .hh-panel.size-full .hh-sheet-grip::before,
  #panel-menu .hh-sheet-grip::before { inset: -8px -2px -8px -5px; }
  .hh-panel.size-side .hh-panel-title, .hh-panel.size-wide .hh-panel-title, .hh-panel.size-full .hh-panel-title, #panel-menu .hh-panel-title { top: 10px; }
  .hh-panel-title { top: 10px; }
  .hh-panel-close { top: 8px; }
  .hh-panel.size-side.is-opening, .hh-panel.size-wide.is-opening, .hh-panel.size-full.is-opening, #panel-menu.is-opening { animation: sheet-left 280ms var(--ease-out) both; }
  .hh-panel.size-side.is-closing, .hh-panel.size-wide.is-closing, .hh-panel.size-full.is-closing, #panel-menu.is-closing { animation: sheet-right 160ms var(--ease-in) both; }
  .hh-panel .scroll-fade { bottom: calc(6px + var(--sab)); }
}

/* ======== tablets (601-1180 px wide, taller than 500 px) ========================================================== */
@media (min-width: 601px) and (max-width: 1180px) and (min-height: 501px) {
  .tool { width: 60px; height: 64px; }
  #toolbar { padding-bottom: 8px; }
  .coach-slot, .seed-tray, .build-tray, .seed-strip, .tray-tip { align-self: flex-start; }
  .tracker { top: calc(104px + var(--sat)); left: calc(var(--safe) + var(--sal)); }
  .farm-name { max-width: 150px; }
  #hud-xp-bar { width: 170px; }
  /* the dock beside the toolbar of 3 (owner 2026-10-19): in a window under ~665 px its five buttons (430 px) ran under
     the Tools slot. They share the room right of the toolbar instead, each as wide as before when it is there; the
     Farm book's name may wrap and every name shrinks to what fits (13 px at least) */
  #hud > .dock { max-width: calc(100vw - 240px - var(--sal) - var(--sar)); }
  #hud > .dock > :is(.dock-btn, .m-menu-btn) { flex: 0 1 auto; min-width: 0; }
  #hud > .dock :is(.dock-btn, .m-menu-btn) .lbl { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
  #hud > .dock .dock-btn .lbl { font-size: clamp(.8125rem, calc((100vw - 240px) / 26), 1rem); }
  #hud > .dock .m-menu-btn .lbl { font-size: clamp(.8125rem, calc((100vw - 240px) / 28), .9375rem); }
}

/* ======== touch screens: a hover that sticks after a tap never lifts or tilts a button ============================= */
@media (hover: none) {
  .tool:hover:not([aria-pressed="true"]), .dock-btn:hover, .dock-mini:hover, .edge-btn:hover, .social-btn:hover, .seed:hover,
  .hud-tr .pill:hover, .goal:hover, .sp-seed:hover, .ss-seed:hover, .level-star:hover, .hh-tab:hover, .btn:hover { transform: none; filter: none; }
  .tool:hover .ic, .tool:hover .glyph, .dock-btn:hover .ic, .dock-btn:hover .glyph, .sp-seed:hover .sp-art .ic { transform: none; }
  .players .farmer:hover .face { transform: none; }
}

/* ======== touch layouts: the "where to get it" bubble and a crop's Finish buttons take a thumb (live requests) ======= */
@media (max-width: 1180px), (max-height: 500px) {
  .ih { width: min(344px, calc(100vw - 16px)); }
  .ih-scroll { max-height: calc(100dvh - 32px - var(--sat) - var(--sab)); padding: 12px 12px 12px; }
  .ih .ih-show { min-height: 40px; padding: 8px 12px 10px; font-size: .875rem; }
  .ih-src { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .tip .tip-finish .btn { min-height: 44px; }
  /* a hover that sticks after a tap never rings a chip that is not open */
  .pn-chip[data-item]:hover:not([aria-describedby="item-hint"]) { box-shadow: inset 0 0 0 2px rgba(217, 182, 119, .7); background: rgba(255, 255, 255, .55); }
}

/* wave 4 (wish 9): a phone's farmer chips are small: "Your look" lives in the Menu and Settings there */
@media (max-width: 600px), (max-height: 500px) {
  .players .look-btn { display: none; }
}

/* a finger needs room on the Settings switches (Quality, Day and night, Motion, Right-drag) */
@media (hover: none) {
  .seg button { min-height: 44px; min-width: 44px; padding: 6px 14px; }
}
/* four or five choices keep one row on an upright phone ("Еко" and „Неподвижно“ sat alone on a second row at 360: QA r4
   S4-14, va#3) */
@media (max-width: 600px) {
  .seg:has(> button:nth-child(4)) > button { padding-inline: 7px; font-size: .8125rem; }
}

/* wave 5: the ❤ card of a home on a phone: the chips scroll sideways, the "Pair them" button takes the full width;
   a pet's world card keeps its command reachable for a thumb */
@media (max-width: 600px), (max-height: 500px) {
  .pn-pair { padding: 10px 10px 12px; }
  .pn-pair-foot .pn-act:has(> .pn-pair-go) { margin-left: 0; flex: 1 1 100%; }
  .pn-pair-foot .pn-pair-go { width: 100%; min-height: 48px; }
  .pn-pair-couple .ic { width: 30px; height: 30px; }
  .pc-pet-acts > .pn-act:has(> .pc-stay) { flex: 1 1 100%; }
  .pc-pet-acts .pc-stay { width: 100%; min-height: 44px; }
}