/* GRAVETIDE · the phone fit (docs/23, owner 2026-10-10: «на мобиле выбор капитанов начальный экран ужасный и вообще
   много чего ужасно сверстано, слишком все большое, не видно нифига. должно помещаться без прокрутов всяких»; and the
   same day: «даже на самом маленьком экране 270 пикселей телефоне андроиде все должно быть видно идеально и со всем можно
   было бы взаимодействовать. может просто резиновый дизайн сделать»).
   Loaded last (index.html). A phone held sideways — a screen 520 px tall or less — gets fluid phone sizes: one unit
   --u grows from 0 at a 270 px tall screen to 1 px at 360 px and over, and every size below is a calc() on it — taps
   32 → 36–38 px, text 9 → 10 px, headings 12 → 13–14 px (ux2, 2026-10-11; 10.5–12.5 and 13.5–16.5 px before), paddings
   4 → 8 px. Windows take the whole screen;
   what would still scroll is laid out in pages (kit/fit.ts). Measured by tools/mobile/fit/audit.mjs at 480×270 …
   915×412; the desk and the tablet keep their own sizes. */

@media (max-height: 520px) {
  :root {
    --u: clamp(0px, (100dvh - 270px) / 90, 1px);
    --f-tap: calc(32px + 4 * var(--u));
    --f-btn: calc(32px + 6 * var(--u));
    --f-btn2: calc(32px + 8 * var(--u));
    --f-tab: calc(36px + 8 * var(--u));
    --f-head: calc(32px + 8 * var(--u));
    /* ux2 (owner, 2026-10-11: «нигде не должно быть таких шрифтов на мобиле, все небольшого размера, я бы сделал 10
       шрифт по умолчанию и даже какие-то снижал до 6-8пкс»): text 9 → 10 px, secondary 8 → 9, tiny labels 7 → 8,
       a name in a row 9.5 → 11, headings 12 → 13, a window's title 12.5 → 14 (was 10.5–16.5 px) */
    --f-fs: calc(9px + 1 * var(--u));
    --f-fs-s: calc(8px + 1 * var(--u));
    --f-fs-xs: calc(7px + 1 * var(--u));
    --f-fs-m: calc(9.5px + 1.5 * var(--u));
    --f-fs-h: calc(12px + 1 * var(--u));
    --f-fs-t: calc(12.5px + 1.5 * var(--u));
    /* the kit's own type on the same scale everywhere on a phone (the sea's HUD, the sheets, the cards) */
    --k-fs-1: var(--f-fs-s);
    --k-fs-2: var(--f-fs);
    --k-fs-3: var(--f-fs-m);
    --k-fs-4: var(--f-fs-h);
    --f-ico: calc(18px + 4 * var(--u));
    --f-gap: calc(3px + 3 * var(--u));
    --f-pad: calc(4px + 4 * var(--u));
    --f-rail: calc(66px + 10 * var(--u));
  }
}

/* ================================================================== windows and sheets on a phone held sideways */
@media (max-height: 520px) {
  /* The kit's own sizes, fluid. */
  #modal, .k-sheet-root { --k-h-1: var(--f-tap); --k-h-2: var(--f-btn); --k-h-3: var(--f-btn2); --k-fs-1: var(--f-fs-s); --k-fs-2: var(--f-fs); --k-fs-3: var(--f-fs-m); --k-fs-4: var(--f-fs-h); --k-sp-2: calc(5px + 3 * var(--u)); --k-sp-3: calc(6px + 4 * var(--u)); --k-sp-4: calc(8px + 4 * var(--u)); }
  /* the window takes the whole screen: the sea above a sheet was 10 % of the height lost to every page */
  #modal-panel { height: 100dvh; font-size: var(--f-fs); }
  .skinned #modal-panel { border-width: calc(5px + 3 * var(--u)) calc(5px + 3 * var(--u)) 0; border-image-width: calc(5px + 3 * var(--u)) calc(5px + 3 * var(--u)) 0; }
  #modal-panel .w-grip { height: 6px; padding-top: 1px; }
  #modal-panel .w-grip i { height: 3px; }
  .w-head.modal-head, #modal-panel > .modal-head:not(.w-head) { min-height: var(--f-head); padding-right: calc(var(--f-btn) + 8px); }
  #modal-panel .x-btn { width: var(--f-btn); height: var(--f-btn); top: 1px; right: 2px; }
  .w-title, .skinned .w-head h2.w-title { font-size: var(--f-fs-t); }
  .w-crest { width: calc(18px + 6 * var(--u)); height: calc(18px + 6 * var(--u)); }
  .w-fig { height: calc(22px + 4 * var(--u)); padding: 0 calc(4px + 3 * var(--u)); font-size: var(--f-fs); }
  .w-fig-ico { width: calc(13px + 3 * var(--u)); height: calc(13px + 3 * var(--u)); }
  /* the rail of places, narrower and lower */
  .w-rail { width: var(--f-rail); gap: 2px; padding: 2px; }
  #modal-panel[data-modal="hero"] .w-rail { width: calc(var(--f-rail) + 16px - 6 * var(--u)); }
  .w-tab { height: var(--f-tab); font-size: var(--f-fs-s); gap: 0; letter-spacing: 0; }
  .w-tab-ico { width: var(--f-ico); height: var(--f-ico); }
  /* the picture and the word held on the tab's middle as the eye reads them (the word's capitals, not its line box with
     the descenders' room): 1.4–1.6 px high before (align.mjs, QA 2026-10-22) */
  .w-tab:not(.w-tab--go) { padding-top: 3.5px; padding-bottom: 0.5px; }
  /* the gold «В море» keeps its word whole (its 15 px line sat in a 10 px box) */
  .w-tab--go { min-height: calc(var(--f-tab) + 2px); padding: 2px; }
  .w-tab--go .w-tab-l { line-height: 1.2; overflow: visible; }
  .w-tab--go .w-tab-ico { width: var(--f-ico); height: var(--f-ico); }
  /* the second row: chips a finger tall; a long row keeps the words of the lit chip only (the rest: their icons, the
     name in the long-press hint) — it ran 1119 px in a 528 px row on 640×360 */
  .w-chips { gap: calc(2px + 2 * var(--u)); padding: calc(2px + 1 * var(--u)) var(--f-pad); }
  .w-chip { min-height: var(--f-tap); padding: 0 calc(6px + 3 * var(--u)) 0 calc(4px + 2 * var(--u)); font-size: var(--f-fs); gap: 4px; }
  .w-chip-ico { width: var(--f-ico); height: var(--f-ico); }
  /* docs/30: a long row keeps every chip's word, small under its picture (the icons alone said nothing to a newcomer:
     «Гавань», «Владения», «Биржа» were only in the long-press hint); the row scrolls if it must */
  .w-chips:has(> .w-chip:nth-child(5)) { overflow-x: auto; scrollbar-width: none; }
  .w-chips:has(> .w-chip:nth-child(5)) > .w-chip:has(.w-chip-ico) { flex: none; flex-direction: column; justify-content: center; gap: 0; padding: 1px calc(2px + 1 * var(--u)); min-width: var(--f-tap); }
  .w-chips:has(> .w-chip:nth-child(5)) > .w-chip:has(.w-chip-ico) > .w-chip-ico { width: calc(var(--f-ico) * 0.8); height: calc(var(--f-ico) * 0.8); }
  .w-chips:has(> .w-chip:nth-child(5)) > .w-chip:has(.w-chip-ico) > .w-chip-l { display: block; font-size: var(--f-fs-s); line-height: 1.05; white-space: nowrap; }
  /* the page */
  #modal-panel .modal-body { font-size: var(--f-fs); line-height: 1.33; }
  #modal-panel h3 { font-size: var(--f-fs-h); }
  #modal-panel h4 { font-size: calc(var(--f-fs-h) - 2px); }
  #modal-panel .btn { min-height: var(--f-tap); font-size: var(--f-fs); }
  #modal-panel .btn.btn-small { min-height: var(--f-tap); }
  .w-row { min-height: calc(var(--f-tap) + 4px); padding: 1px 4px; gap: calc(4px + 2 * var(--u)); }
  .w-row-b > .k-btn { min-width: calc(48px + 8 * var(--u)); padding: 0 calc(5px + 3 * var(--u)); }
  .w-row-ico { width: calc(22px + 6 * var(--u)); height: calc(22px + 6 * var(--u)); }
  .w-row-t > b { font-size: var(--f-fs-m); }
  .w-sec { margin: calc(4px + 4 * var(--u)) 0 calc(2px + 2 * var(--u)); }
  .w-quick { gap: var(--f-gap); margin-bottom: var(--f-pad); }
  .w-qbtn .k-btn-ico { width: var(--f-ico); height: var(--f-ico); }
  .w-tile { min-height: calc(56px + 16 * var(--u)); padding: 3px; }
  .w-tile-ico { width: calc(28px + 8 * var(--u)); height: calc(28px + 8 * var(--u)); }
  .k-sheet-body { font-size: var(--f-fs); }

  /* ---------- the pager (kit/fit.ts): a page that would scroll is laid out in pages side by side */
  .fit-paged { overflow: hidden !important; column-count: var(--fit-cols, 1); column-gap: 16px; column-fill: auto; padding-left: 8px !important; padding-right: 8px !important; overscroll-behavior: contain; }
  .fit-paged.fit-flow { display: block !important; }
  .fit-paged.fit-flow > * + * { margin-top: var(--fit-gap, 0px); }
  .fit-paged .w-row, .fit-paged .q-card, .fit-paged .talent, .fit-paged .w-tile, .fit-paged tr, .fit-paged li, .fit-paged .ability, .fit-paged .w-wb, .fit-paged .w-quick, .fit-paged .w-sec, .fit-paged h3, .fit-paged h4 { break-inside: avoid; }
  .fit-paged .w-sec, .fit-paged h3, .fit-paged h4 { break-after: avoid; }
  .fit-pager { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(8px + 4 * var(--u)); height: calc(var(--f-tap) + 4px); border-top: 1px solid rgba(140, 107, 58, 0.3); background: rgba(8, 8, 9, 0.6); }
  .fit-pg-b { width: calc(48px + 8 * var(--u)); height: var(--f-tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--k-brass-dim); border-radius: var(--k-r-1); background: linear-gradient(180deg, #2a2521, #17140f); color: var(--k-gold); font: 600 calc(18px + 4 * var(--u))/1 var(--k-font-serif); cursor: pointer; touch-action: manipulation; }
  .fit-pg-b:disabled { opacity: 0.35; cursor: default; }
  .fit-pg-n { min-width: 40px; text-align: center; font: 600 var(--f-fs) var(--k-font-sans); color: var(--k-bone); font-variant-numeric: tabular-nums; }

  /* ---------- the older windows' heads and tabs: one band, the line under the name goes to the desk */
  #modal-panel > .modal-head:not(.w-head) { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  #modal-panel > .modal-head:not(.w-head) .sub, #modal-panel > .modal-head:not(.w-head) > p, #modal-panel > .modal-head:not(.w-head) > .muted { display: none; }
  .skinned #modal-panel > .modal-head:not(.w-head) h2 { font-size: var(--f-fs-t); white-space: nowrap; border-width: calc(4px + 2 * var(--u)) 26px; border-image-width: calc(4px + 2 * var(--u)) 26px; }
  #modal-panel .tabs { padding: 0 4px; gap: 2px; min-height: 0; }
  #modal-panel .tabs .tab, body.touch #modal-panel .tabs .tab { min-height: var(--f-tap); padding: 0 calc(5px + 4 * var(--u)); font-size: var(--f-fs-s); letter-spacing: 0.02em; display: inline-flex; align-items: center; }
  #modal-panel .tabs .tab .ico { width: calc(14px + 4 * var(--u)); height: calc(14px + 4 * var(--u)); margin-right: 4px; vertical-align: -4px; }

  /* ---------- the page's parts */
  #modal-panel .card, .k-sheet .card { padding: calc(3px + 3 * var(--u)) calc(5px + 3 * var(--u)); margin-bottom: var(--f-gap); }
  #modal-panel .card h4, .k-sheet .card h4 { font-size: calc(var(--f-fs-h) - 1.5px); margin-bottom: 2px; }
  #modal-panel .card p, .k-sheet .card p { font-size: var(--f-fs-m); line-height: 1.28; margin-bottom: calc(2px + 2 * var(--u)); }
  #modal-panel .card h4 .ico-md { width: calc(20px + 6 * var(--u)); height: calc(20px + 6 * var(--u)); margin: 0 6px 0 0; } /* (not over the card's edge: 2026-10-15) */
  #modal-panel p { margin-top: 0; margin-bottom: calc(3px + 2 * var(--u)); }
  #modal-panel ul { margin: 2px 0 calc(3px + 3 * var(--u)); padding-left: 16px; }
  #modal-panel .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(5px + 3 * var(--u)); }
  /* painted banners shrink to a strip: the words and the buttons are what a phone needs on its one screen */
  #modal-panel .card-art { height: calc(32px + 12 * var(--u)); margin-bottom: 4px; }
  .hol-card .hol-art { aspect-ratio: auto; height: calc(32px + 12 * var(--u)); }
  #modal-panel table.grid td, #modal-panel table.grid th { padding: 2px 4px; font-size: var(--f-fs); }

  /* ---------- small words and small taps: no word under 10 px at 270 nor under 11 at 360 (the «small» of a page was
     10.4 px, the tags 9 px, the tiles' names 10 px) */
  #modal-panel small, .k-sheet small, #board-tac small, #advcard small, #lairchest small, #board-offer small, #encounter small, #surrender small { font-size: max(var(--f-fs-s), 0.83em); }
  .tag, .talent .tag, .hx-otag .tag, .pb-tags .tag { font-size: var(--f-fs-s); }
  .stat-l { font-size: var(--f-fs-s); letter-spacing: 0.03em; }
  .tb-store, .bk-will .tb-store { font-size: var(--f-fs-s); }
  .tb-chip-men { font-size: var(--f-fs-s); height: 16px; line-height: 16px; }
  .tb-rs i { font-size: var(--f-fs-s); line-height: 14px; }
  body.simple #touch > #tc-ammo .tc-ammo-n { font-size: var(--f-fs-s); }
  .tal-main .tier-label, #modal-panel .tier-label { font-size: var(--f-fs-s); }
  .army-slot > i.army-tier, .army-slot > .army-rate { font-size: var(--f-fs-s); }
  #modal-panel label.check { min-height: var(--f-tap); display: flex; align-items: center; gap: 8px; }
  /* the level's choice in the Hero tab: its words whole (they were clamped to two lines) */
  .cap-body .hx-pick-t small { display: block; -webkit-line-clamp: unset; overflow: visible; }
  /* the order book's six schools wrap to a second row instead of running sideways */
  .cap-body .w-chips.hx-schools { flex-wrap: wrap; overflow: visible; }
  /* the departure check: its list is the sheet's, not a box of its own */
  .depart-panel .dp-list { overflow: visible; }
  /* the pirate's chest */
  #lairchest .lc-foot .btn { min-height: var(--f-tap); }
  /* a mate's boarding offer */
  .bo-x { width: var(--f-tap); height: var(--f-tap); }
  .bo-st { width: var(--f-btn); height: var(--f-btn); }
  .bo-st b { font-size: var(--f-fs-s); line-height: 13px; }
  .bo-auto .bo-as { font-size: var(--f-fs-s); }
}

/* ================================================================== the title screen */
/* the account's controls kept 30 and 28 px to fit at 360: fluid, a finger wide at every height */
@media (max-height: 520px), (max-width: 699px) {
  #screen-login .lang-switch .btn, #screen-login .login-panel:has(#login-account[open]) .lang-switch .btn { min-width: 40px; min-height: var(--f-tap, 36px); padding-top: 0; padding-bottom: 0; }
  #screen-login #login-account summary, .login-account summary { min-height: var(--f-tap, 38px); }
  #screen-login .login-panel input, #screen-login #login-account input { min-height: var(--f-tap, 38px); padding-top: 3px; padding-bottom: 3px; }
  #screen-login .login-account form .row #forgot-btn { min-height: var(--f-tap, 36px); }
  #screen-login .login-account form .row .btn { min-height: var(--f-tap, 38px); }
}
@media (max-height: 520px) {
  #screen-login #login-account label { margin-bottom: 2px; }
  #screen-login .login-panel label { font-size: var(--f-fs-s); }
  #screen-login .login-panel #login-form .btn-primary { min-height: var(--f-btn2); }
  #screen-login .login-panel .subtitle { font-size: var(--f-fs-m); }
  #screen-login .login-panel .hint { font-size: var(--f-fs-s); }
}

/* (the chat on a phone held sideways: client/chat.css — docs/28) */

/* ================================================================== talents (talents.ts) on a phone held sideways */
/* The rose stood 272 px over a single column and the tree ran 13 pages under it: its trees now stand in a small grid
   down the left with the loadouts and the clean slate, the level and the points ride in the band, the chosen tree
   pages beside them in two columns, each talent whole (its picture beside its name). */
@media (max-height: 520px) and (min-width: 460px) {
  #modal-panel[data-modal="talents"] .modal-body { display: grid; grid-template-columns: calc(108px + 24 * var(--u)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'load main' 'side main' 'respec pager'; gap: var(--f-gap) calc(6px + 4 * var(--u)); overflow: hidden; padding: var(--f-pad); }
  #modal-panel[data-modal="talents"] .tal-layout { display: contents; }
  #modal-panel[data-modal="talents"] .tal-chips { position: absolute; z-index: 3; top: calc((var(--f-head) - 24px) / 2); left: calc(120px + 30 * var(--u)); right: calc(var(--f-btn) + 12px); height: 24px; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  #modal-panel[data-modal="talents"] .chip-stat { padding: 1px 7px 1px 4px; font-size: var(--f-fs); }
  #modal-panel[data-modal="talents"] .tal-loadout { grid-area: load; margin: 0; gap: 3px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #modal-panel[data-modal="talents"] .tal-loadout > .with-ico, #modal-panel[data-modal="talents"] .tal-loadout > .muted { display: none; }
  #modal-panel[data-modal="talents"] .tal-loadout.muted { display: none; }
  #modal-panel[data-modal="talents"] .tal-loadout .btn { min-height: var(--f-tap); min-width: 0; padding: 0 2px; font-size: var(--f-fs-s); white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
  #modal-panel[data-modal="talents"] .tal-side { grid-area: side; min-height: 0; }
  #modal-panel[data-modal="talents"] .tal-main { grid-area: main; min-height: 0; overflow-y: auto; }
  #modal-panel[data-modal="talents"] .tal-respec { grid-area: respec; min-height: 0; align-self: end; }
  #modal-panel[data-modal="talents"] .tal-main + .fit-pager { grid-area: pager; border-top: 0; background: none; }
  #modal-panel[data-modal="talents"] .tal-respec .card { margin: 0; padding: 0; border: 0; background: none; }
  #modal-panel[data-modal="talents"] .tal-respec .card > :not(.respec-btns) { display: none; }
  #modal-panel[data-modal="talents"] .respec-btns { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  #modal-panel[data-modal="talents"] .respec-btns .btn { min-height: var(--f-btn); font-size: var(--f-fs-s); line-height: 1.15; padding: 0 3px; }
  #modal-panel[data-modal="talents"] .respec-btns .btn:last-child { display: none; }
  #modal-panel[data-modal="talents"] .tal-rules { display: none; }
  #modal-panel[data-modal="talents"] .rose { width: auto; height: auto; display: grid; grid-template-columns: repeat(3, var(--f-tap)); gap: 2px; justify-content: center; border-radius: 0; background: none; box-shadow: none; }
  #modal-panel[data-modal="talents"] .rose::before, #modal-panel[data-modal="talents"] .rose-core { display: none; }
  #modal-panel[data-modal="talents"] .rose-node { position: relative; left: auto; top: auto; width: var(--f-tap); height: var(--f-tap); margin: 0; transform: none; }
  #modal-panel[data-modal="talents"] .rose-node .rose-ico { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
  #modal-panel[data-modal="talents"] .rose-pts { font-size: var(--f-fs-s); min-width: 16px; height: 15px; line-height: 13px; padding: 0 3px; }
  #modal-panel[data-modal="talents"] .rose-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--f-gap); gap: 3px; } /* side by side: the rail's button says «Деяния» (the full name stood out of its half into the trees; one under the other ran into «Чистый лист» at 480×270, docs/30) */
  #modal-panel[data-modal="talents"] .rose-extra .btn { min-height: var(--f-tap); padding: 0 2px; gap: 2px; font-size: var(--f-fs-s); white-space: normal; line-height: 1.1; }
  #modal-panel[data-modal="talents"] .rose-extra .btn .ico-sm { display: none; }
  #modal-panel[data-modal="talents"] .tal-main.fit-paged { column-count: 2; column-gap: 16px; }
  #modal-panel[data-modal="talents"] .tal-main .tier-row { display: block; }
  #modal-panel[data-modal="talents"] .tal-main .talent { display: block; position: relative; margin: 0 0 4px; padding: 3px 5px; font-size: var(--f-fs); line-height: 1.26; }
  #modal-panel[data-modal="talents"] .tal-main .talent-ico { float: left; width: calc(20px + 4 * var(--u)); height: calc(20px + 4 * var(--u)); margin: 0 5px 0 0; }
  #modal-panel[data-modal="talents"] .tal-main .talent-top { min-height: calc(20px + 4 * var(--u)); }
  #modal-panel[data-modal="talents"] .tal-main .talent-top b { font-size: var(--f-fs-m); }
  #modal-panel[data-modal="talents"] .tal-main .motto { display: none; }
  #modal-panel[data-modal="talents"] .tal-main .tree-h { font-size: var(--f-fs-h); break-after: avoid; }
  #modal-panel[data-modal="talents"] .tal-main .tree-h .ico-md { width: calc(20px + 6 * var(--u)); height: calc(20px + 6 * var(--u)); }
  #modal-panel[data-modal="talents"] .tal-main .tier-label { break-after: avoid; margin: 2px 0; }
}

/* ================================================================== the premium shop (premium.ts) on a phone held sideways */
@media (max-height: 520px) and (min-width: 460px) {
  /* two cards a column-pair a page, each whole; the italic flavour line is the desk's */
  .pm-body.fit-paged { column-count: 2 !important; }
  .pm-body.fit-paged .pm-grid { display: block; }
  .pm-body.fit-paged .pm-card { break-inside: avoid; margin-bottom: var(--f-gap); }
  .pm-body .pm-note { display: none; }
  .pm-card, .pm-card.pm-ship { grid-template-columns: calc(48px + 16 * var(--u)) minmax(0, 1fr); gap: 4px 8px; padding: var(--f-pad); }
  .pm-art { width: calc(48px + 16 * var(--u)); height: calc(48px + 16 * var(--u)); }
  .pm-hull { width: calc(48px + 16 * var(--u)); height: calc(34px + 10 * var(--u)); }
  .pm-hull img { height: calc(48px + 16 * var(--u)); }
  .pm-art .pm-face { width: calc(42px + 14 * var(--u)); height: calc(42px + 14 * var(--u)); }
  .pm-name { font-size: var(--f-fs-h); }
  .pm-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
  .pm-buy .pm-why { order: -1; margin-right: auto; text-align: left; }
  .pm-buy .btn { min-height: var(--f-tap); min-width: 80px; }
  .pm-price .dbl { font-size: var(--f-fs-h); }
  .pm-list { font-size: var(--f-fs-h); break-after: avoid; }
  .pm-gift, .pm-meta, .pm-why { font-size: var(--f-fs-s); }
}

/* ================================================================== sheets, cards and narrow rows on a phone held sideways */
@media (max-height: 520px) {
  /* the kit's sheet: the whole height when it needs it, a thinner grip and band */
  .k-sheet { max-height: 100dvh; padding: 0 max(var(--f-pad), var(--sa-r, 0px)) calc(var(--f-pad) + var(--sa-b, 0px)) max(var(--f-pad), var(--sa-l, 0px)); }
  .skinned .k-sheet.panel { border-width: calc(5px + 4 * var(--u)) calc(5px + 4 * var(--u)) 0; border-image-width: calc(5px + 4 * var(--u)) calc(5px + 4 * var(--u)) 0; }
  .k-sheet-grip { height: calc(6px + 6 * var(--u)); }
  .skinned .k-sheet .k-sheet-grip { margin-top: 0; }
  .k-sheet-head { min-height: var(--f-head); }
  .k-sheet-title { font-size: var(--f-fs-t); }
  .k-sheet-x.k-btn--icon, .k-sheet-x { width: var(--f-btn); height: var(--f-btn); min-width: var(--f-btn); min-height: var(--f-btn); }
  .k-sheet-foot { padding-top: var(--f-gap); gap: var(--f-gap); }
  .k-sheet .btn, .k-sheet .btn.btn-small { min-height: var(--f-tap); }
  /* the level's choice from below: two cards, each as tall as its words */
  .lu-pick { min-height: 0; padding: var(--f-pad); gap: var(--f-gap); }
  .lu-ico { width: calc(34px + 12 * var(--u)); height: calc(34px + 12 * var(--u)); }
  .lu-t b { font-size: var(--f-fs-h); }
  .lu-sub { margin-bottom: var(--f-gap); }
  /* a list row's line under the name wraps rather than losing its end («в трюме 10 · скоропортящ…») */
  .w-row-t > small { white-space: normal; text-overflow: clip; overflow: visible; }
  /* settings: a row's name wraps rather than losing its end */
  .opt-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
  .opt-row { min-height: var(--f-btn2); padding: 0 var(--f-pad); }
  /* a heading plate in a page wraps rather than losing its end («Вы ходите в одиноч…») */
  #modal-panel .modal-body .title-sm, .skinned #modal-panel .modal-body .title-sm { white-space: normal; overflow: visible; text-overflow: clip; font-size: var(--f-fs-h) !important; border-width: calc(3px + 3 * var(--u)) calc(14px + 12 * var(--u)); border-image-width: calc(3px + 3 * var(--u)) calc(14px + 12 * var(--u)); }
  /* the Throne's nine tabs: a finger wide each at any width */
  .throne-win .tabs:has(.tab:nth-child(9)) .tab { min-width: var(--f-tap); min-height: var(--f-tap); padding: 0 calc(3px + 4 * var(--u)); }
  .throne-win .tabs { flex-wrap: wrap; }
  /* the adventure card folded: one row — its picture and name, its order, the cross — within the top band (it scrolled
     2 px at 640×360 and 26 px at 480×270) */
  #advcard .ac-card:not(.open) { display: flex; align-items: center; gap: calc(3px + 3 * var(--u)); padding: 2px calc(4px + 2 * var(--u)); }
  #advcard .ac-card:not(.open) > .ac-head { flex: 1 1 auto; min-width: 0; }
  #advcard .ac-card:not(.open) .enc-h { white-space: normal; overflow: visible; text-overflow: clip; font-size: var(--f-fs-m); line-height: 1.15; }
  #advcard .ac-card:not(.open) > .ac-acts, #advcard .ac-card:not(.open) .ac-guard > .ac-acts { flex: 0 1 auto; margin: 0; }
  #advcard .ac-card:not(.open) .ac-acts .btn { flex: 0 1 auto; }
  #advcard .ac-card:not(.open) .ac-guard { margin: 0; padding: 0; border: 0; }
  #advcard .ac-head { min-height: var(--f-tap); gap: calc(4px + 4 * var(--u)); }
  #advcard .ac-head .ac-art { width: calc(22px + 6 * var(--u)); height: calc(22px + 6 * var(--u)); }
  #advcard .ac-x { min-width: var(--f-tap); min-height: var(--f-tap); }
  #advcard .ac-acts .btn { min-height: var(--f-tap); font-size: var(--f-fs); }
}
/* a phone narrower than 560 px held sideways: a long chip row keeps its pictures only, the lit one too (its border and
   gold say which) — eleven chips and the lit one's word ran 433 px in a 404 px row at 480×270 */
@media (max-height: 520px) and (max-width: 560px) {
  .w-chips:has(> .w-chip:nth-child(5)) > .w-chip:has(.w-chip-ico) { padding: 1px 2px; } /* the words stay (docs/30); the row scrolls */
}

/* ================================================================== the sea's HUD below 360 px tall (seahud.css) */
/* At 360 px and over it is as it was (phase 2's sizes); below, the helm, «Огонь», the buttons, the captain's frame and
   the chart shrink with the screen (they covered half the sea at 480×270), and her mark's line gives its bars room.
   The chart (owner, 2026-10-17: «сделай карту на мобиле больше… она щас маленькая очень»): 140 px from 360 px tall
   (it was 86), 92 px at 270 (it was 66: the adventure card keeps its 150 px between the plate and the chart). */
@media (max-height: 520px) {
  body.simple { --sea-pad: calc(6px + 4 * var(--u)); --sea-fire: calc(62px + 18 * var(--u)); --sea-btn: calc(38px + 10 * var(--u)); --sea-gap: calc(8px + 6 * var(--u)); --cs-face: calc(36px + 8 * var(--u)); --cs-bar: calc(76px + 24 * var(--u)); --mm: calc(92px + 48 * var(--u)); --stick: calc(88px + 24 * var(--u)); }
  body.simple #tc-target .k-target { height: var(--f-tap); gap: calc(5px + 5 * var(--u)); padding: 0 calc(5px + 5 * var(--u)); }
  body.simple #tc-target .k-target-name { min-width: 0; font-size: var(--f-fs-m); }
  body.simple #tc-target .k-target-bars { flex: none; width: calc(32px + 24 * var(--u)); min-width: 0; }
}
@media (max-height: 520px) {
  .skinned .throne-win .tabs:has(.tab:nth-child(8)) .tab { border-left-width: 3px; border-right-width: 3px; border-image-width: 6px 3px 0; }
  .throne-win .tabs:has(.tab:nth-child(9)) { flex-wrap: nowrap; }
}

/* ================================================================== tabs that lived in a page ride in the band */
/* The Throne's nine tabs and the shop's two stood at the top of their page: paged, they went away with page 1. On a
   phone held sideways they stand in the window's band, right of its name, and stay whatever page is turned to. */
@media (max-height: 520px) {
  #modal-panel .throne-win > .tabs, #modal-panel .pm-body > .tabs { position: absolute; z-index: 4; top: 0; right: calc(var(--f-btn) + 8px); left: auto; height: var(--f-head); max-width: calc(100% - var(--f-btn) - 56px); margin: 0; padding: 0; border: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; background: none; }
  #modal-panel .throne-win > .tabs .tab, #modal-panel .pm-body > .tabs .tab { min-height: var(--f-tap); }
  #modal-panel:has(.throne-win > .tabs) > .modal-head h2, #modal-panel:has(.pm-body > .tabs) > .modal-head h2 { max-width: calc(100vw - 480px); overflow: hidden; }
}
@media (max-height: 520px) {
  /* the shop's three tabs (owner, 2026-10-11: «Свитки») stand left of its purse, whatever its width (premium.ts sets it) */
  #modal-panel .pm-body > .tabs { right: calc(var(--pm-purse, 230px) + 6px); max-width: calc(100% - 56px - var(--pm-purse, 230px)); }
}
@media (max-height: 520px) and (max-width: 900px) {
  /* the shop's tabs in a narrow band: the lit one says its name, the others their picture and count */
  #modal-panel .pm-body > .tabs .tab:not(.active) .pm-tl { display: none; }
}
@media (max-height: 520px) and (max-width: 560px) {
  /* the smallest phones: the other tabs their picture alone */
  #modal-panel .pm-body > .tabs .tab { padding-left: 6px; padding-right: 6px; }
  #modal-panel .pm-body > .tabs .tab:not(.active) .pm-count { display: none; }
}
@media (max-height: 520px) and (max-width: 900px) {
  /* a narrow band: the window's crest stands for its name (the tab that is lit says where she is) */
  #modal-panel:has(.throne-win > .tabs) > .modal-head h2, #modal-panel:has(.pm-body > .tabs) > .modal-head h2 { font-size: 0 !important; max-width: none; padding-left: 4px; padding-right: 4px; border-width: 0; border-image: none; background: none; }
  #modal-panel:has(.throne-win > .tabs) > .modal-head h2 > span, #modal-panel:has(.pm-body > .tabs) > .modal-head h2 > span { display: none; }
}
@media (max-height: 520px) {
  /* in a paged page nothing small is split between two pages (a card's top on one page and its foot on the next) —
     only what is taller than a page breaks */
  .fit-paged :is(.card:not(:has(.card)), .hx-pick, .sk-card, .stat-tile, .help-row, .lu-pick, .pm-card, .tw-card, .dp-row, .opt-row, .army-slot, .gear-slot, .rs-card, .th-card, .adm-card, .cit-card, .ar-card, .deed-row, .w-wb-row, p, .btn) { break-inside: avoid; }
}
/* two columns a page (kit/fit.ts reads --fit-two) where the page is a list of short rows or cards: they read across the
   landscape instead of as a tall stack (the journal's isles ran 21 pages in one column, 11 in two); the market's
   rows, the rumours, the Throne's tiers and the paper doll keep one */
@media (max-height: 520px) {
  #modal-panel:is([data-modal="journal"], [data-modal="crew"], [data-modal="ship"], [data-modal="look"], [data-modal="options"], [data-modal="help"], [data-modal="tattoos"]) .modal-body:not(:has(table, .jr-side, .cols)),
  .port-body:is([data-page="holdings"], [data-page="quests"], [data-page="harbour"], [data-page="charts"]):not(:has(.cols)),
  .modal-body.tattoos,
  .cap-body:has(> .sk-page) { --fit-two: 1; }
  /* a row of two buttons or more wraps in a narrow column rather than running out of it */
  .fit-paged :is(div, span, p):has(> .btn + .btn) { flex-wrap: wrap; }
}
@media (max-height: 520px) {
  /* a task's card keeps its picture's room on the left (the phone's card padding took it, the picture lay over the name) */
  #modal-panel .q-card { padding-left: calc(42px + 10 * var(--u)); }
  #modal-panel .q-card > .q-ico { left: calc(5px + 3 * var(--u)); top: calc(5px + 3 * var(--u)); width: calc(30px + 6 * var(--u)); height: calc(30px + 6 * var(--u)); }
}
@media (max-height: 520px) {
  /* her mark's name wraps in the line rather than losing its end («Цепь бух…» at every phone size) */
  body.simple #tc-target .k-target-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.08; font-size: var(--f-fs); overflow-wrap: normal; min-width: min-content; }
  /* seaux 2026-10-11 (owner: «ты переносишь слово застава на две строчки хотя место есть»): the bars a fixed width, so
     the plate's fitted width is what it lays out at; a name breaks only between its words, and only when there is no room */
}
@media (max-height: 520px) {
  /* the Throne's tabs in the band at every phone width: the lit one its picture and word, the others their picture
     (at 740–812 px the words came back and «Колизей» stood past the screen's edge) */
  .throne-win .tabs:has(.tab:nth-child(9)) .tab .ico-sm { display: inline-block; width: calc(18px + 4 * var(--u)); height: calc(18px + 4 * var(--u)); margin: 0; flex: none; }
  .throne-win .tabs:has(.tab:nth-child(9)) .tab { justify-content: center; gap: 3px; flex: 0 0 auto; }
  .throne-win .tabs .tab:not(.active) .th-tw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .throne-win .tabs .tab:not(.active) .hx-dot { margin-left: 0; }
  .th-rt > span { font-size: var(--f-fs-s); }
  /* a task's name wraps to a third line rather than being clamped at two */
  #modal-panel .q-t > b { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; }
  /* the boarding's order chips in a creature's card a finger tall */
  .tb-sps > .chip.tb-spc { min-height: var(--f-tap); }
}
@media (max-height: 520px) {
  /* the departure check down to 480×270: each row one line high, its buy button beside it (a narrow phone put the
     button under the words and the rows ran under the screen's foot) */
  .confirm-panel.depart-panel { padding: calc(4px + 4 * var(--u)) var(--f-pad) var(--f-pad); }
  .depart-panel .dp-row { flex-wrap: nowrap; min-height: calc(var(--f-tap) + 4px); gap: calc(4px + 4 * var(--u)); padding: 0 calc(4px + 4 * var(--u)); }
  .depart-panel .dp-row .ico-md { width: calc(22px + 6 * var(--u)); height: calc(22px + 6 * var(--u)); }
  .depart-panel .dp-text b { font-size: var(--f-fs-m); }
  .depart-panel .dp-text .muted { font-size: var(--f-fs-s); }
  .depart-panel .dp-buy, body.touch .depart-panel .dp-buy { width: auto; max-width: 48%; min-height: var(--f-tap); white-space: normal; line-height: 1.15; font-size: var(--f-fs); padding-block: 2px; }
  .depart-panel .dp-none { width: auto; max-width: 40%; text-align: right; font-size: var(--f-fs-s); }
  .depart-panel .dp-title { font-size: var(--f-fs-t); }
  .depart-panel p.dp-lead, .depart-panel p.dp-warn { font-size: var(--f-fs); }
  .depart-panel .k-sheet-foot > .k-btn { min-height: var(--f-btn); font-size: var(--f-fs); }
}
@media (max-height: 520px) {
  /* the adventure card in the top band between the captain's frame and the chart at every width (it stood at 360 px
     from the left: 124 px wide at 640×360 with its button past the screen, off the screen at 480×270) */
  #advcard { left: calc(var(--sa-l) + var(--cs-face, 44px) + var(--cs-bar, 100px) + 74px); right: calc(var(--sa-r) + var(--mm, 86px) + 20px); width: auto; min-width: 0; max-width: 420px; }
}
@media (max-height: 520px) and (max-width: 560px) {
  /* a narrow phone: her mark's line keeps its name, level and chance; the bars are on her card (a tap) */
  body.simple #tc-target .k-target-bars { display: none; }
  /* the Throne's lit tab is its picture too (the page's own heading names it) */
  .throne-win .tabs .tab.active .th-tw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-height: 520px) {
  /* the boarding's end at sea, one band down to 480 px wide (it wrapped and «Дальше» went under its 64 px) */
  .tb-banner.tb-end.sea { gap: 3px calc(6px + 8 * var(--u)); padding: 3px calc(6px + 4 * var(--u)); max-height: none; }
  .tb-end.sea .tb-bsc { gap: 2px calc(6px + 8 * var(--u)); }
  .tb-end.sea .tb-bsc > b { font-size: calc(15px + 5 * var(--u)); }
  .tb-end.sea .tb-end-rows { gap: 3px calc(8px + 8 * var(--u)); }
  .tb-end.sea .tb-rs, .tb-end.sea .tb-rs-ico { width: calc(20px + 4 * var(--u)); height: calc(20px + 4 * var(--u)); }
  .tb-end.sea .tb-endbtn { min-height: var(--f-btn); padding: 0 calc(8px + 6 * var(--u)); font-size: var(--f-fs-m); }
}

/* ================================================================== the title screen on the smallest phones */
/* Below 600 px wide the title screen stacked its name over the form and ran 130 px under a 270 px screen (it scrolled
   as a whole): the name left, the form right, as from 600 px — and fluid. */
@media (max-height: 520px) and (min-width: 460px) and (max-width: 599px) {
  #screen-login > .login-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 14px; align-items: start;
    grid-template-areas: "brand lang" "brand form" "brand acct" "brand reset" "hint err";
    width: 96vw; padding: var(--f-pad) calc(8px + 6 * var(--u));
  }
  #screen-login .login-brand { grid-area: brand; align-self: center; text-align: center; }
  #screen-login .lang-switch { grid-area: lang; margin-bottom: 2px; }
  #screen-login #login-form { grid-area: form; }
  #screen-login #login-account { grid-area: acct; margin-top: 4px; }
  #screen-login #reset-form { grid-area: reset; }
  #screen-login #login-error { grid-area: err; margin: 2px 0 0; }
  #screen-login .hint { grid-area: hint; margin: 4px 0 0; align-self: end; }
  #screen-login .login-panel .title { font-size: clamp(22px, 5.6vw, 40px); margin: 0; }
  #screen-login .login-panel .subtitle { margin: 4px 0 0; }
  #screen-login .login-panel label { margin-bottom: 4px; }
  #screen-login .login-panel:has(#login-account[open]) #login-form { display: none; }
  #screen-login .login-panel:has(#login-account[open]) { grid-template-areas: "brand lang" "brand acct" "brand reset" "hint err"; }
  #screen-login .login-account form .row .btn { white-space: nowrap; font-size: var(--f-fs); padding-left: 4px; padding-right: 4px; }
}
@media (max-height: 520px) {
  #screen-login > .login-panel { max-height: 100dvh; }
  /* settings: a row's name keeps its word whole; what does not fit beside it goes under it */
  .opt-row { flex-wrap: wrap; row-gap: 2px; padding-top: 2px; padding-bottom: 2px; }
  .opt-name { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; }
  .opt-row > input[type=range] { min-width: 48px; }
}
@media (max-height: 520px) {
  /* the account's form at 270–320 px: a thinner frame, the three buttons in one row, the languages beside the name */
  .skinned #screen-login > .login-panel { border-width: calc(8px + 10 * var(--u)); border-image-width: calc(8px + 10 * var(--u)); }
  #screen-login .login-account form .row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #screen-login .login-account form .row #forgot-btn { grid-column: auto; }
  #screen-login .login-account form .row .btn { white-space: normal !important; line-height: 1.1; font-size: var(--f-fs-s) !important; padding-left: 2px; padding-right: 2px; }
}
@media (max-height: 340px) and (min-width: 460px) {
  #screen-login .login-panel:has(#login-account[open]) { grid-template-areas: "lang acct" "brand acct" "brand reset" "hint err"; grid-template-rows: auto 1fr auto auto; }
  #screen-login .login-panel:has(#login-account[open]) .lang-switch { justify-content: center !important; }
}
@media (max-height: 520px) {
  /* a mate's offer: the stacks wrap rather than run sideways (480×270 EN) */
  .bo-sts { flex-wrap: wrap; overflow: visible; }
}

/* ==================================================================== seaux (2026-10-11): every window scrolls
   Owner: «Там еще где цели у нас открывая эту модалку у нее нет скролла вниз, не понятно какие цели. Никакие из окошек с
   инфой нельзя вниз пролистнуть». The pager (kit/fit.ts) is no longer installed: on his iPhone its columns cut the
   windows off. Every window's page, the Journal's and the company's, the sheets (the goals and news, the menu, the
   captain's), the talents' list scroll up and down with a finger — iOS Safari's momentum, the scroll kept inside the
   pane — and with the wheel on a desk. Nothing on a scroll area takes the touch from it. */
#modal-panel .modal-body, #modal-panel #company-body, #modal-panel .tal-main, .k-sheet-root .k-sheet-body, .w-rail {
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: auto; }
#modal-panel .modal-body, #modal-panel .tal-main, .k-sheet-body { min-height: 0; }
#modal-panel > .modal-body, .w-frame, .w-pane { min-height: 0; }
/* the talents' left column (the load and the side) on a phone: it scrolls too rather than being cut at the screen's foot */
@media (max-height: 520px) {
  #modal-panel[data-modal="talents"] .modal-body > :not(.tal-main):not(.fit-pager) { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  #modal-panel .fit-pager { display: none; }
}

/* ==================================================================== ux2 (2026-10-11): small type on a phone, taps that land
   Owner: «в талантах гиганские шрифты, на мобиле просто ничего не видно. нигде не должно быть таких шрифтов на мобиле,
   все небольшого размера, я бы сделал 10 шрифт по умолчанию и даже какие-то снижал до 6-8пкс»; «полукруглая обводка
   появляется на кнопках типа ремонт и т.д. их быть не должно». */
/* iOS (Safari, and Telegram's webview on an iPhone) blows a page's text up when the phone is turned sideways — the
   talents' 11 px lines came out at some 20 px on the owner's iPhone: the page's own sizes are kept */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* a finger leaves no grey flash and no ring: the focus ring is the keyboard's (a desk's :focus-visible keeps its gold
   ring); on a touch screen iOS drew it round a button the code had focused (the depart window's, a sheet's first
   button) — a pill's ring is a half-circle at each end */
* { -webkit-tap-highlight-color: transparent; }
body.touch :focus, body.touch :focus-visible { outline: none !important; }
body.touch #mm-tab:focus-visible .mm-tab-pill { box-shadow: none; }
@media (hover: none) and (pointer: coarse) {
  :focus, :focus-visible { outline: none !important; }
  #mm-tab:focus-visible .mm-tab-pill { box-shadow: none; }
}
/* the action pills in the skin's frame: the frame is the border; no capsule ring drawn round it */
.skinned body.touch #touch > .tc-actrow > .k-btn, body.touch.skinned #touch > .tc-actrow > .k-btn { border-radius: var(--k-r-1, 4px); }
/* (the action buttons' shadow and the gold one's glow: seahud.css .tc-actb, one design for all of them) */
/* a window slides up quicker (320 → 120 ms): a tap as it settles lands where the finger saw the tab (a finger aimed at a
   tab of a window still sliding came down a tab lower — the window had moved on meanwhile) */
@media (max-height: 520px), (max-width: 699px) {
  #modal-panel { transition-duration: 120ms; }
}
/* a tab is pressed, never selected as text nor held for the system's menu (a long press on iOS took the tap) */
.w-tab, .w-chip, .tab, [role="tab"] { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (max-height: 520px) {
  /* headings of a page and of a card: 12–13 px (15–20 px before) */
  #modal-panel :is(h3, h4, h5, .card-h, .tree-h, .giver-name), .k-sheet :is(h3, h4, h5, .card-h) { font-size: var(--f-fs-h) !important; line-height: 1.2; }
  /* an inline size in an older window's markup (its 18–20 px plates and lines) */
  #modal-panel :is(h2, h3)[style*="font-size"] { font-size: var(--f-fs-h) !important; }
  #modal-panel :is(p, span, div, b, small)[style*="font-size"] { font-size: var(--f-fs) !important; }
  /* the names of rows and cards: 9.5–11 px (15–17 px before) */
  #modal-panel :is(.pm-name, .th-tt > b, .cit-name > b, .fl-t b, .hx-pick-t > b, .sk-head > b, .th-bt > b, .adm-tt > b, .q-t > b, .w-wb-t > b, .lk-name, .talent-top b),
  .k-sheet :is(.lu-t > b, .w-wb-t > b, .fl-t b) { font-size: var(--f-fs-m) !important; }
  /* figures once shown big — a pack's doubloons, a medal's count, a rank, a level, the hands of a trade: a heading's size */
  #modal-panel :is(.pm-pack-n, .th-medal b, .rn-rank, .hx-lv, .prof-n) { font-size: var(--f-fs-h) !important; }
  #modal-panel .pm-price .dbl { font-size: var(--f-fs-m) !important; }
  /* the talents' lines and the rules under them: the body's size (they were 11–12 px fixed) */
  #modal-panel .talent small, #modal-panel .tal-loadout, #modal-panel .tal-loadout .muted, #modal-panel .tal-rules, #modal-panel .tree .motto, #modal-panel .motto { font-size: var(--f-fs-s); }
  #modal-panel .talent { font-size: var(--f-fs); }
  /* the prologue's three lines and the title screen's buttons */
  #prologue p { font-size: var(--f-fs-h); line-height: 1.35; }
  #screen-login .login-panel #login-form .btn-primary, #screen-login .login-panel .btn { font-size: var(--f-fs-m); }
  /* the boarding's chips and its end */
  .tb-rb > i.tb-x2 { font-size: var(--f-fs); }
  .tb-end .tb-bsc > b, .tb-end.sea .tb-bsc > b, .tb-end.land .tb-bsc > b { font-size: var(--f-fs-t) !important; }
  .enc-h { font-size: var(--f-fs-m); }
}

/* ux2: every word of a window's page and of a sheet on the phone's scale — the older windows set their own sizes in px
   (12–14 px names, 11–13 px lines: 1 800 words over 10.5 px at 844×390): the names and figures 9.5–11 px, the lines 9–10,
   the small and muted 8–9, a section's label 9.5–11. The fit's own rules for a part (#modal-panel .card p, the talents',
   the depart window's…) are more particular and stay; the badges, tags, chips and keys keep their sizes. */
@media (max-height: 520px) {
  :is(#modal-panel .modal-body, #modal-panel #company-body, .k-sheet-body, #advcard, #lairchest, #board-offer, #encounter, #surrender) :where(span, p, li, label, dd, dt, div, output, td, th, summary):not(.k-badge, .rose-pts, .tag, .chip, .key, .pips, .hx-dot, .tier-label, .k-btn-l, .w-chip-l, .w-tab-l, .money, .dbl) { font-size: var(--f-fs); }
  :is(#modal-panel .modal-body, #modal-panel #company-body, .k-sheet-body, #advcard, #lairchest, #board-offer, #encounter, #surrender) :where(b, strong, .money, .dbl, .stat-v, .gi-name, .pm-name, .po-name, .xpv):not(.k-badge, .rose-pts, .tag, .chip, .key) { font-size: var(--f-fs-m); }
  :is(#modal-panel .modal-body, #modal-panel #company-body, .k-sheet-body, #advcard, #lairchest, #board-offer, #encounter, #surrender) :where(small, .muted, .sub, .hint, .hx-note, .w-sub):not(.k-badge, .tag, .chip, .key) { font-size: var(--f-fs-s); }
  :is(#modal-panel .modal-body, #modal-panel #company-body, .k-sheet-body, #advcard, #lairchest, #board-offer, #encounter, #surrender) :where(.gi-h, .giver-h, .enc-h, .fp-head > b, .bo-h > b):not(.k-badge) { font-size: var(--f-fs-m); }
  /* the band's line under a window's name, the boarding card's figures */
  #modal-panel .w-head .w-sub { font-size: var(--f-fs-s); }
  .tb-cardsh .tb-stats b, .tb-card-h b { font-size: var(--f-fs-m); }
  /* the menu's tiles, a figure shown big (a rank, a seal, the raid's rounds, a primary skill) */
  #modal-panel[data-modal="menu"] .menu-tile > span { font-size: var(--f-fs-m); }
  #modal-panel :is(.th-rt > b, .hx-pv, .th-branch .card-h > span:first-of-type, .adm-board .card-h > span) { font-size: var(--f-fs-h) !important; }
}
@media (max-height: 520px) {
  /* the looks' chips and the toasts' lines on the same scale */
  #modal-panel .lk-chip { font-size: var(--f-fs); }
  #toasts .toast { font-size: var(--f-fs); }
  /* (over a window: a readable card, 12 px at least — owner 2026-10-18, «я не вижу») */
  #modal-toasts .toast { font-size: max(12px, var(--f-fs)); line-height: 1.3; }
}
/* the depart window's «Всегда докупать»: in its head line, right of the purse's word, a finger tall */
.depart-panel .dp-always { margin: 4px 0 0; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; color: var(--fog, #9aa3a8); cursor: pointer; }
.depart-panel .dp-always input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--gold, #d8b45c); }
@media (max-height: 520px) {
  .depart-panel .dp-always { margin: 0 0 0 auto; min-height: var(--f-tap); align-self: center; font-size: var(--f-fs-s); }
}
@media (max-height: 520px) {
  /* a window's fields on the same scale (the page has maximum-scale=1: iOS does not zoom into a field under 16 px) */
  #modal-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: var(--f-fs-m); }
}

/* ================================================================== the iPhone's notch, held sideways
   (owner, 2026-10-12: «из-за айфоновской шторки модалки и окна перекрывают часть текста … центруй все красиво и
   ограничивай ширину окон»): every window, sheet and screen keeps off the safe areas on BOTH sides by the larger of
   the two — the notch is on one side only, so equal margins keep the window in the middle of what can be seen — and
   its width is capped (a window 880 px, a sheet 760 px); the window's own padding no longer carries the safe area. */
@media (max-height: 520px) {
  #modal, .k-sheet-root, .screen { --sa-x: max(var(--sa-l, 0px), var(--sa-r, 0px)); box-sizing: border-box; padding-left: var(--sa-x); padding-right: var(--sa-x); }
  #modal-panel { width: min(100%, 880px) !important; max-width: 880px; margin-inline: auto; }
  .k-sheet { width: min(100%, 760px); margin-inline: auto; padding-left: var(--f-pad); padding-right: var(--f-pad); }
}

/* Tap → choose → act on a phone held sideways (owner, 2026-10-15): the choice's buttons in the bottom band (32 → 40 px),
   their words at 10 px, what a blow would do at 7–8 px. */
@media (max-height: 520px) {
  .tb-pick { gap: calc(2px + 2 * var(--u)); padding: 2px; border-radius: calc(18px + 2 * var(--u)); }
  .tb-pk { height: var(--f-btn2); min-width: var(--f-btn2); padding: 0 calc(10px + 4 * var(--u)) 0 3px; gap: calc(3px + 2 * var(--u)); border-radius: calc(16px + 2 * var(--u));
    font-size: 10px; }
  .tb-pk-i { width: calc(26px + 6 * var(--u)); height: calc(26px + 6 * var(--u)); }
  .tb-pk em { font-size: var(--f-fs-xs); }
  .tb-pk.cancel { width: calc(26px + 4 * var(--u)); height: calc(26px + 4 * var(--u)); min-width: 0; }
  .skinned .tb-pk-x { width: calc(22px + 4 * var(--u)); height: calc(22px + 4 * var(--u)); }
  .tb-pk.cast b { max-width: calc(80px + 20 * var(--u)); }
}

/* ================================================================== the title screen (the owner's pack, 2026-10-17)
   The painting under it is chosen by the page (index.html): the wide one on a desk, its darker top for the logo; the
   captain at the wheel on a phone on its side, its darker right two-thirds for the logo and the form. The painted logo
   (ui/logo_*) stands outside the form's panel: over the form on a desk, beside it on a phone. A scrim keeps the form and
   the words readable over the painting. */
#screen-login .keyart { filter: none; }
#screen-login .keyart::after {
  background:
    radial-gradient(ellipse 46% 40% at 50% 24%, rgba(3, 5, 8, 0.42), rgba(3, 5, 8, 0) 100%),
    linear-gradient(180deg, rgba(3, 5, 8, 0) 45%, rgba(3, 5, 8, 0.6) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}
#screen-login .login-brand { position: relative; z-index: 1; flex: none; text-align: center; pointer-events: none; }
#screen-login .login-logo { margin: 0; font-size: 0; line-height: 0; letter-spacing: 0; text-shadow: none; }
#screen-login .login-logo img { display: inline-block; width: auto; height: clamp(140px, 33vh, 330px); max-width: 92vw; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.8)); }
#screen-login .login-brand .subtitle { margin: 10px auto 0; max-width: 34em; color: var(--bone, #d8d2c4); font-family: var(--serif, serif); font-style: italic; font-size: 15px; text-shadow: 0 1px 2px #000, 0 0 14px rgba(0, 0, 0, 0.9); }
@media (min-height: 521px) {
  #screen-login { flex-direction: column; align-items: center; justify-content: flex-start; }
  #screen-login .login-brand { margin: auto 0 0; padding-top: max(12px, 2vh); }
  #screen-login > .login-panel { margin: 1.4vh auto auto; }
  #screen-login > .login-panel .hint { margin-top: 10px; }
}
@media (max-height: 520px) {
  #screen-login .keyart::after {
    background:
      linear-gradient(90deg, rgba(3, 5, 8, 0) 22%, rgba(3, 5, 8, 0.38) 48%, rgba(3, 5, 8, 0.55) 100%),
      radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
  }
  #screen-login { flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.6vw; padding-right: max(var(--sa-x, 0px), 2vw); }
  #screen-login .login-brand { width: 30vw; margin: auto 0; }
  #screen-login .login-logo img { width: 100%; height: auto; max-height: 58dvh; }
  #screen-login .login-brand .subtitle { display: inline-block; font-size: var(--f-fs-s, 11px); line-height: 1.25; margin-top: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(3, 5, 8, 0.62); box-shadow: 0 0 8px 2px rgba(3, 5, 8, 0.45); }
  #screen-login > .login-panel, #screen-login > .login-panel:has(#login-account[open]) {
    display: block; width: min(36vw, 340px); margin: auto 0; max-height: calc(100dvh - 8px); overflow-y: auto; overscroll-behavior: contain;
    padding: calc(6px + 4 * var(--u)) calc(8px + 6 * var(--u));
  }
  #screen-login > .login-panel .lang-switch { justify-content: flex-end; margin-bottom: 2px; }
  #screen-login > .login-panel label { margin-bottom: 4px; }
  #screen-login > .login-panel #login-account { margin-top: 4px; }
  #screen-login > .login-panel .hint { margin: 4px 0 0; }
}
@media (max-height: 520px) and (max-width: 599px) {
  /* the smallest phones: the captain's third is given to the form */
  #screen-login .login-brand { width: 33vw; }
  #screen-login > .login-panel, #screen-login > .login-panel:has(#login-account[open]) { width: 58vw; }
}
/* the account's drawer opened: it takes the guest form's place on a desk too, the logo steps down, its line goes; on the
   lowest phones the form takes the whole width (its buttons stay on the screen, nothing to scroll to) */
#screen-login:has(#login-account[open]) .login-brand .subtitle { display: none; }
@media (min-height: 521px) {
  #screen-login:has(#login-account[open]) .login-logo img { height: clamp(90px, 17vh, 200px); }
  #screen-login .login-panel:has(#login-account[open]) #login-form { display: none; }
}
@media (max-height: 340px) {
  #screen-login:has(#login-account[open]) .login-brand { display: none; }
  #screen-login > .login-panel:has(#login-account[open]) { width: min(94vw, 560px); margin: auto; }
  #screen-login > .login-panel:has(#login-account[open]) .lang-switch { position: absolute; z-index: 1; top: calc(6px + 4 * var(--u)); right: calc(8px + 6 * var(--u)); margin: 0; }
  #screen-login > .login-panel:has(#login-account[open]) #login-account { margin-top: 0; }
}
@media (max-height: 520px) {
  #screen-login > .login-panel:has(#login-account[open]) .login-account form .row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; }
}
/* The long press's hint over a window or the sea (kit/hint.ts) and the toasts over a window: readable on the smallest
   phone — 12 px at least (owner, 2026-10-18: «я не вижу»); both in the top layer, over the windows and their scrim. */
.k-hint { font-size: max(12px, var(--k-fs-2)); }