/* css/screens.css (WP4b) — every screen in js/ui/screens/*: station / build / hire sheets, Products, Me, Wardrobe,
   Shop, managers, relocation, plugs, achievements, stats, catalog, settings, orders, crate opening, customs.
   Reference HUD look (docs/reference-ui.webp): dark navy panels, thin borders, chunky green buttons, big numbers.
   Uses the tokens of css/main.css (--panel*, --green*, --gem*, --yellow, --red, --text*, --radius*). All classes
   are prefixed scr- so they never collide with the HUD/sheet styles. */

.scr { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; color: var(--text); }
/* every screen title: 20 / 900 (--fs-title), phones too — the same as .sheet__title */
.scr__title { font-size: var(--fs-title); font-weight: 900; line-height: var(--lh-tight); margin: 0 44px 2px 0; }
.scr .num, .scr-price .num { font-variant-numeric: tabular-nums; font-weight: var(--fw-num); }
.scr-rx { display: contents; }
.scr-sec { display: flex; flex-direction: column; gap: 8px; }
/* a section heading (§4): 14 / 900 --text-2, sentence case, 16 above / 8 below (the .scr-sec gap), an optional
   count tag — the Zlecenia one (css/sheets.css .orders__sub) is the same */
.scr-sec__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sec); font-weight: 900; line-height: var(--lh-tight); color: var(--text-2); margin: 8px 0 0; }
.scr-list { display: flex; flex-direction: column; gap: 8px; }
.scr-note { font-size: var(--fs-14); font-weight: 700; color: var(--text-2); line-height: var(--lh-body); margin: 0; }
.scr-note--good { color: var(--text); }
.scr-empty { padding: 16px 12px; text-align: left; color: var(--text-dim); font-weight: 700; background: var(--raised); border-radius: var(--r-md); }

/* cards and rows (§4): fills separate them — no 1 px rims. Card = --raised, --r-md, 12 padding. Row = 52 min
   (dense 44), 12 padding, 12 gap; a state is a 4 px left bar (own / selected green, problem red) */
.scr-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--raised); border: 0; border-radius: var(--r-md); }
.scr-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; background: var(--raised); border: 0; border-radius: var(--r-md); color: var(--text); text-align: left; width: 100%; font: inherit; }
.scr-row--dense { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.scr-card .scr-row { padding: 0; background: none; border: 0; min-height: 0; }
/* the grouped list: one container, rows touching through 2 px gaps that show the panel as dividers */
.scr-list--group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; border-radius: var(--r-md); overflow: hidden; }
.scr-list--group > :is(.scr-row, .card, .scr-tile, .scr-rank__row, .scr-lp__row) { border-radius: 0; }
.scr-list--group > [hidden] { display: none; }
.scr-row--tap { cursor: var(--cur-hand); }
.scr-row--tap:active { background: var(--raised-2); }
.scr-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.scr-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 800; font-size: var(--fs-16); line-height: var(--lh-tight); }
.scr-row__sub { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); line-height: var(--lh-tight); }
.scr-row__right { flex: none; display: flex; align-items: center; gap: 8px; }
.scr-row__chev { flex: none; display: grid; place-items: center; color: var(--text-dim); }
/* i18n QA: on narrow phones a wide right control (lock chip „Po „Ziomek się wdrożył””, „Zbuduj stanowisko”) drops under the
   title instead of squeezing it to one word per line */
.scr-row { flex-wrap: wrap; row-gap: 8px; }
.scr-row__main { flex: 1 1 130px; }
.scr-row__right { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; }
.scr-row__right .scr-lock { white-space: normal; }
.scr-row__title .scr-tag { max-width: 100%; }
.scr-row--slider .scr-row__main { flex: 1 1 auto; }
.scr-row__val { min-width: 52px; text-align: right; font-size: var(--fs-14); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.scr-row.is-active { background: var(--raised-2); box-shadow: inset 4px 0 0 var(--green); }
.scr-row.is-binding { box-shadow: inset 4px 0 0 var(--red); }
.scr-row.is-done { opacity: 0.8; }
.scr-row--station { flex-wrap: wrap; gap: 8px; padding: 8px 12px 12px 0; }
.scr-row--station .scr-row__right { flex: 1 1 100%; padding-left: 12px; }
.scr-row--station .scr-row__right > * { width: 100%; }
.scr-row__open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 52px; padding: 0 0 0 12px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: var(--cur-hand); }
/* the row's icon well (§4): 32, --r-sm, --panel fill, a 20 px --text-2 glyph (kit.js tile) */
.scr-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--panel); color: var(--text-2); }
.scr-ico--lg { width: 48px; height: 48px; border-radius: var(--r-md); }

/* tags (§4): 20 px, 0 6 padding, --r-xs, 12 / 800, no caps, no border; meaning beyond the six fills = a 12 px
   leading glyph (kit.js tag(text, kind, glyph)) */
.scr-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); font-size: var(--fs-12); font-weight: 800; line-height: 20px; background: var(--raised-2); color: var(--text-2); white-space: nowrap; }
.scr-tag > .icon { flex: none; }
.scr-tag--ok > .icon { color: var(--green); }
.scr-tag--go { background: var(--green); color: #fff; }
.scr-tag--best { background: var(--yellow); color: var(--ink); }
.scr-tag--bad { background: var(--red); color: #fff; }
.scr-tag--gem { background: var(--gem); color: #fff; }
.scr-tag--dim { background: transparent; color: var(--text-dim); }
.scr-tag > [data-icon='star'] { color: var(--yellow); }
.scr-tag--best > [data-icon] { color: var(--ink); }
.scr-tag > [data-icon='fans'] { color: var(--fans); }
.scr-tag[hidden] { display: none; }
.scr-price { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.scr-price--gems { color: var(--gem-light); }
.scr-price--gems .num { color: var(--text); }
.btn .scr-price, .btn .scr-price .num { color: inherit; }
/* a label before the price („Zatrudnij | ¥350”) gets a thin divider; a price-only chip („¥200 000”) never does —
   the „Brakuje …” line (.short) comes first in the DOM, which used to draw a stray bar before the cash icon */
.btn > span:not(.scr-price, .short, .short__bar) ~ .scr-price { margin-left: 2px; padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, 0.3); }
/* progress (§4): 8 px, pill, the --bg recess, a flat fill (green progress, yellow XP / level) */
.scr-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; flex: none; }
.scr-bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--green); transition: width var(--mo-med) var(--mo-out); }
.scr-bar--xp .scr-bar__fill, .scr-bar--build .scr-bar__fill { background: var(--yellow); }

/* buttons */
.scr-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.scr-btns--tight { gap: 8px; align-items: center; }
.scr-btns .btn { flex: 1 1 auto; }
.scr-link-btn { align-self: flex-start; }
.scr-hold { position: relative; overflow: hidden; }
.scr-hold__fill { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.28); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.scr-hold__label { position: relative; }
.scr-sticky { position: sticky; bottom: 0; padding: 12px 0 4px; background: var(--panel); z-index: 2; }

/* segmented control + tabs — ONE look for every switcher (§4): kit.js segmented() / tabs() (Rozwój, Sklep,
   Statystyki, Osiągnięcia, event hub, Ustawienia, Kupuj ×1/×10) and the Zlecenia tabs (ui/orders.js .seg).
   Track: the --bg recess, --r-md, 4 px inset, 44 px tall. Keys: --r-sm, 14 / 800 --text-2. The active key: a
   --raised-2 fill with the small 3 px edge, --text — the same fill as the active bottom-nav tab; no green pill. The fill
   slides under the active key (kit.js / orders.js set --seg-n = segments, --seg-i = active), --mo-slow / --mo-out,
   never overshooting (owner 2026-10-12: a spring pushed it out of the track). Labels stay on one line: kit.js
   fitSegLabels shrinks the track's font-size inline (down from --fs-14, never below 12 px); the keys inherit it.
   Reduced motion (data-reduce-motion, css/motion.css): the fill jumps. */
.scr-seg,
.seg {
  --seg-pad: 4px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: var(--seg-pad);
  border: 0;
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--fs-14);
}
.scr-seg::before,
.seg::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: var(--seg-pad);
  bottom: var(--seg-pad);
  left: var(--seg-pad);
  width: calc((100% - 2 * var(--seg-pad)) / var(--seg-n, 1));
  border-radius: var(--r-sm);
  background: var(--raised-2);
  box-shadow: var(--sh-edge-sm);
  transform: translateX(calc(100% * var(--seg-i, 0)));
  transition: transform var(--mo-slow) var(--mo-out);
  pointer-events: none;
}
.scr-seg__btn,
.seg__btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 36px;
  padding: 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-weight: 800;
  font-size: inherit;
  line-height: var(--lh-tight);
  text-align: center;
  white-space: nowrap;
  cursor: var(--cur-hand);
}
.scr-seg__label,
.seg__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 2026-10-22 polish: a tab with a count badge moves its label off the badge corner (the „1” sat on „Zadania”) */
.seg__btn:has(> .seg__count:not(:empty):not(.is-dot)),
.scr-seg__btn:has(> .scr-seg__count:not(:empty):not(.is-dot)) { padding-right: 16px; }
/* a live count on the tab's corner (kit.js badge: ready builds on „Budowa”) = the Zlecenia .seg__count: one rule,
   css/sheets.css „segmented control”; the pop on show: css/motion.css */
.scr-seg__btn.is-active,
.seg__btn.is-active { color: var(--text); background: transparent; box-shadow: none; }
/* keyboard: a ring INSIDE the segment (an outer ring is cut off by the sheet body at the track's edges) */
.scr-seg > .scr-seg__btn:focus-visible,
.seg > .seg__btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
:root[data-reduce-motion="true"] :is(.scr-seg, .seg)::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) :is(.scr-seg, .seg)::before { transition: none; }
}
.scr-seg--sm .scr-seg__btn { min-height: 28px; }
.scr-tabs { display: flex; flex-direction: column; gap: 12px; }
.scr-tabs__body { display: flex; flex-direction: column; gap: 12px; }

/* many categories (Szafa, Katalog QC): the tabs wrap into rows — each active tab carries its own fill (no slide) */
.scr-seg--scroll,
.scr-tabs--scroll > .scr-seg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.scr-seg--scroll::before,
.scr-tabs--scroll > .scr-seg::before { display: none; }
.scr-seg--scroll .scr-seg__btn,
.scr-tabs--scroll > .scr-seg .scr-seg__btn { flex: 1 1 auto; min-width: 30%; padding: 4px 12px; }
.scr-seg--scroll .scr-seg__btn.is-active,
.scr-tabs--scroll > .scr-seg .scr-seg__btn.is-active { background: var(--raised-2); box-shadow: var(--sh-edge-sm); }

/* buy mode ×1 / ×10 / Next / Max: small segments after a „Kupuj” label (a setting, not navigation) */
.scr-buymode { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scr-buymode__label { flex: none; font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.scr-seg--mode { width: 100%; max-width: 280px; }
.scr-buymode > .scr-seg--mode { flex: 1 1 auto; max-width: none; } /* reaches the right edge: aligned with the tabs above */
.scr-seg--mode .scr-seg__btn { min-height: 28px; padding: 2px 4px; }
/* finger-sized hit areas (≥ 44 px tall) for the slim switchers (Ustawienia, ×1 / ×10 / Max) and the station name row:
   an invisible box grows past the 28 px key (css/sheets.css does the same for the ✕ and the Zlecenia tabs) */
.scr-seg--sm .scr-seg__btn::before,
.scr-seg--mode .scr-seg__btn::before,
.scr-stn__open::before {
  content: '';
  position: absolute;
  top: min(0px, calc((100% - 44px) / 2));
  bottom: min(0px, calc((100% - 44px) / 2));
  left: 0;
  right: 0;
}
.scr-stn__open { position: relative; }

/* flow chain: icon + number chips (name in title / screen readers), chevrons, the binding stage marked red. Above it
   Kim's line with the one action (parts.js flowSummary; a tap unfolds the chain on phones) */
.scr-flowbox { display: flex; flex-direction: column; gap: 8px; }
.scr-flowbox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.scr-flowbox__unit { font-weight: 700; color: var(--text-dim); }
.scr-flowline[hidden] { display: none; }
.scr-flow { display: flex; align-items: center; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; padding: 12px 8px 8px; background: var(--bg); border: 0; border-radius: var(--r-md); scrollbar-width: none; }
.scr-flow::-webkit-scrollbar { display: none; }
.scr-flow__cell { position: relative; flex: 1 0 40px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; padding: 8px 4px 4px; border-radius: var(--r-sm); background: var(--raised); }
.scr-flow__ico { display: grid; place-items: center; color: var(--text-2); }
.scr-flow__v { font-size: var(--fs-14); line-height: 1; white-space: nowrap; }
.scr-flow__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scr-flow__arrow { flex: none; display: grid; place-items: center; width: 12px; color: var(--text-dim); }
.scr-flow__bind { display: none; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--red); color: #fff; font-size: var(--fs-12); font-weight: 800; line-height: 20px; white-space: nowrap; }
.scr-flow__cell.is-binding { box-shadow: inset 0 -4px 0 var(--red); }
.scr-flow__cell.is-binding .scr-flow__bind { display: block; }
.scr-flow__cell.is-binding .scr-flow__ico { color: var(--red); }
.scr-flow__chip { margin: 0; cursor: var(--cur-hand); }
.scr-flow__chip:empty { display: none; }
/* one Kim line per screen: while the Stanowiska hint („Każdy krok nadąża…”) shows, it replaces the flow line */
.scr-products:has(.scr-advice:not([hidden])) .scr-flowline { display: none; }

/* Rozwój station cards (§4 row): icon well 32 · name 16 / 800 + „Lv 12” 12 / 900 + the red „Najwolniej” tag · the
   effect 12 / 700 --text-2 · the milestone mini bar · the level buy button. Agent-process order (step 1–5) */
.scr-stn { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--raised); border: 0; border-radius: var(--r-md); }
.scr-stn.is-binding { box-shadow: inset 4px 0 0 var(--red); }
.scr-stn__open { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: var(--cur-hand); }
.scr-stn__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scr-stn__top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.scr-stn__name { font-size: var(--fs-16); font-weight: 800; line-height: var(--lh-tight); }
.scr-stn__lv { font-size: var(--fs-12); font-weight: 900; color: var(--text-2); }
.scr-stn__eff { font-size: var(--fs-12); font-weight: 700; line-height: var(--lh-tight); color: var(--text-2); }
.scr-stn__eff:empty { display: none; }
.scr-stn__ms { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scr-stn__msbar { position: relative; flex: none; width: 56px; height: 6px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.scr-stn__msfill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--yellow); transition: width var(--mo-med) var(--mo-out); }
.scr-stn__mstxt { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-12); font-weight: 700; line-height: var(--lh-tight); color: var(--text-2); }
.scr-stn__crew { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--raised-2); color: var(--text-2); font-size: var(--fs-12); font-weight: 800; }
.scr-stn__crew.is-empty { background: var(--red); color: #fff; }
.scr-stn__buy { position: relative; }
.scr-stn__buy .buy { width: 100%; min-height: 44px; }
.scr-stn__lock { display: none; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.scr-stn.is-locked .scr-stn__lock { display: grid; }
.scr-stn.is-locked .buy { --btn-bg: var(--panel); --btn-edge: var(--edge-c); --btn-fg: var(--text-dim); --btn-hi: var(--btn-shine-off); }
.scr-stn.is-locked :is(.buy__cur, .buy__price, .buy__delta) { display: none; }
.scr-buy { display: flex; flex-direction: column; gap: 8px; }
.scr-buy--top { flex-direction: row; justify-content: flex-end; }
.scr-buy .btn { min-height: 52px; }

/* builds, pads, hires, vehicles */
.scr-build__head { display: flex; align-items: center; gap: 12px; }
.scr-build__clock { font-size: var(--fs-16); color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
.scr-pad__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.scr-pad__foot .scr-price { font-size: var(--fs-16); margin-right: auto; }
.scr-pad__time { color: var(--text-2); font-size: var(--fs-14); font-weight: 800; }
/* locked = a recessed well with THE 2 px border (2026-10-22 polish: --panel on the --panel sheet made locked cards
   vanish — a floating title and a lock in empty space) */
.scr-pad.is-locked { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.scr-pad.is-locked .scr-ico { color: var(--text-dim); }
.scr-crew { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text-2); }
.scr-hire.is-next { box-shadow: inset 4px 0 0 var(--green); background: var(--raised-2); }
.scr-hire.is-done { opacity: 0.7; }
/* hire.js marks the focused role card .is-focus (scroll target only): it gets the one-time pulse below, no ring of its own */
/* goal-card shortcut (js/ui/goals.js): ONE element — the row to tap (kit.js focusTarget) — gets one soft pulse: a
   yellow ring fades in over its edge, holds, fades out (~2 s, goals.js sets --goal-focus-ms). The ring sits inside
   the row's edge (offset −2 px): the sheet body clips anything drawn outside a full-width card. Reduced motion: the
   ring just shows for the same time. Only the outline animates: the target can be any button / card, and an animated
   box-shadow would wipe its own for the whole pulse (a .btn's 3D edge, the red bar of a binding station). */
.is-goal-focus {
  outline: 2px solid transparent;
  outline-offset: -2px;
  animation: scr-goal-focus var(--goal-focus-ms, 1.9s) var(--mo-out) 1 both;
}
@keyframes scr-goal-focus {
  0% { outline-color: rgba(247, 197, 30, 0); }
  14% { outline-color: rgba(247, 197, 30, 1); }
  70% { outline-color: rgba(247, 197, 30, 0.9); }
  100% { outline-color: rgba(247, 197, 30, 0); }
}
:root[data-reduce-motion="true"] .is-goal-focus { animation: none; outline-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) .is-goal-focus { animation: none; outline-color: var(--yellow); }
}

/* screen title (kit.js page) stays in view while the sheet body scrolls — a goal shortcut used to scroll „Rozwój”
   half under the handle (owner 2026-10-12). An opaque band in the sheet's colour (the flat --panel) spans the body
   width (room on the right for the ✕, which floats above it on phones — css/sheets.css); 8 px of the same colour
   under it keep scrolled rows from touching the title. kit.js scrollSheetTo centres rows below the band. A band at
   top 0 sticks BELOW the body's padding-top (4 px phone, 8 px desktop: --sheet-body-pt, css/sheets.css), so scrolled
   rows showed — and took taps — through that strip. The band reaches up over it instead: it sticks at the body's very
   top edge (top −pad), starts there at rest too (margin −pad) and keeps its text where it was (padding +pad). */
.sheet__body > .scr > .scr__title:first-child,
.sheet__body > .scr > .scr-st__head:first-child {
  position: sticky;
  top: calc(-1 * var(--sheet-body-pt, 0px));
  z-index: 3;
  margin-top: calc(-1 * var(--sheet-body-pt, 0px));
  margin-right: 0;
  padding-top: var(--sheet-body-pt, 0px);
  padding-right: 48px;
  background: var(--panel);
}
.sheet__body > .scr > .scr-st__head:first-child .scr__title { margin-right: 0; }
.sheet__body > .scr > .scr__title:first-child::after,
.sheet__body > .scr > .scr-st__head:first-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
  background: var(--panel);
  pointer-events: none;
}
.scr-hire__rate { color: var(--green); }
.scr-next { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-14); }
.scr-next__k { color: var(--text-dim); font-weight: 800; }

/* station sheet */
.scr-st__head { display: flex; align-items: center; gap: 12px; }
.scr-st__title { display: flex; flex-direction: column; gap: 4px; }
.scr-st__title .scr__title { margin: 0 44px 0 0; }
.scr-st__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.scr-st__lvl { font-size: var(--fs-16); font-weight: 900; color: var(--yellow); }
.scr-st__ms-row { display: flex; flex-direction: column; gap: 4px; }
.scr-st__ms { font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.scr-st__rate { margin: 0; font-weight: 800; font-size: var(--fs-16); }
.scr-st__rate:empty { display: none; }
.scr-st__rate--all { font-size: var(--fs-14); font-weight: 700; color: var(--text-2); }

/* Me (visual pass 2): a header card, the Codzienne QC hero card, grouped lists (me.js) */
.scr-me__head { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.scr-me__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scr-me__name { font-size: var(--fs-20); font-weight: 900; line-height: var(--lh-tight); margin: 0 40px 0 0; overflow-wrap: anywhere; }
.scr-me__rank { margin: 0; color: var(--yellow); font-weight: 800; font-size: var(--fs-14); }
.scr-me__lvrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* „Fani” (js/ui/fans.js): total (white) + the pink fans glyph, this week's gain in grey */
.scr-me__fans { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin: 0; font-size: var(--fs-14); font-weight: 800; }
.scr-me__fans .icon { flex: none; color: var(--fans); }
.scr-me__fans-week { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); }
.scr-me__lv { font-size: var(--fs-14); font-weight: 900; color: var(--text); }
.scr-me__xp { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); }
.scr-me__back, .scr-me__account { grid-column: 1 / -1; }
/* the player's own 3D ziomek (chunky pass 2026-10-20, js/ui/screens/me.js avatar): a pressable tile with the equipped
   look on a small pedestal, the agency logo as a badge on its corner; a tap opens the Szafa (the canvas takes no
   pointer: no drag-turn here). Without WebGL2 the tile stays hidden and the 64 px logo is the avatar as before. */
.scr-me__ava { position: relative; flex: none; align-self: start; }
.scr-me__fig {
  position: relative;
  display: block;
  width: 104px;
  height: 140px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--raised-2);
  box-shadow: var(--btn-shine-soft), 0 var(--btn-lip-sm) 0 var(--edge-c);
  overflow: hidden;
}
.scr-me__fig[hidden] { display: none; }
.scr-me__fig::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 6%;
  height: 12%;
  border-radius: 50%;
  background: var(--panel-raised);
  box-shadow: 0 0 0 2px var(--yellow);
}
.scr-me__fig:active { transform: translateY(2px); box-shadow: var(--btn-shine-soft), 0 2px 0 var(--edge-c); }
.scr-me__cv { position: relative; display: block; width: 100%; height: 100%; pointer-events: none; }
.scr-me__ava.is-3d > .scr-logo { position: absolute; left: 6px; top: 6px; --logo-size: 32px !important; pointer-events: none; }
.scr-me__ava.is-3d > .scr-logo > *,
.scr-me__ava.is-3d > .scr-logo img { width: 100% !important; height: 100% !important; }
.scr-me__ava.is-3d > .scr-logo .scr-logo__badge { font-size: var(--fs-12); }
/* no equipped frame: a card-coloured gap and the line ring separate the badge from the tile (a frame keeps its rings) */
.scr-me__ava.is-3d > .scr-logo:is(:not([data-frame-style]), [data-frame-style="none"]) { box-shadow: 0 0 0 2px var(--panel); }
.scr-me__back { margin: -4px 0 -4px -12px; }
.scr-me__account:empty { display: none; }
.scr-logo { position: relative; width: var(--logo-size, 64px); height: var(--logo-size, 64px); border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--line); }
.scr-logo__badge, .scr-logo__img { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-20); object-fit: cover; }
.scr-logo__badge { background: var(--line); }
/* avatar frame (equipped cosmetic, Me header + HUD profile logo): js/ui/avatar-frame.js sets data-frame-style and the
   ring colours from the cosmetic's params — outer ring, thin inner ring, the frame's own glow (a bought cosmetic) */
[data-frame-style]:not([data-frame-style="none"]) {
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--frame-w, 3px) * 0.4) var(--frame-ring2, transparent), 0 0 0 var(--frame-w, 3px) var(--frame-ring, transparent), 0 0 var(--frame-glow, 0px) calc(var(--frame-w, 3px) * 0.5) var(--frame-ring, transparent);
}
.scr-logo { --frame-w: 4px; }
/* the hero card: Codzienne QC — title 16 / 900, the state 14 / 700 grey, the screen's one primary („Zacznij”) */
.scr-me__hero { gap: 8px; }
.scr-me__herot { margin: 0; font-size: var(--fs-16); font-weight: 900; line-height: var(--lh-tight); }
.scr-me__state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--text-2); }
.scr-me__state .scr-tile__sub { font-size: inherit; }
.scr-me__stateico:empty { display: none; }
.scr-me__stateico { display: inline-grid; place-items: center; flex: none; }
.scr-me__hero.is-done .scr-me__state { color: var(--text-dim); }
.scr-me__hero.is-done .scr-me__stateico { color: var(--green); }
.scr-me__hero.is-locked { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.scr-me__hero.is-locked :is(.scr-me__herot, .scr-me__state) { color: var(--text-dim); }
.scr-me__go[hidden] { display: none; }
/* Ja rows: a trailing value OR a chevron (the chevron steps aside while a value shows) */
.scr-me__row { position: relative; }
.scr-me__row > .scr-row__main { flex: 1 1 auto; }
/* playtest: „Do zgarnięcia: 195 ge…” was cut at one line — two lines, never an ellipsis mid-number */
.scr-me__row > .scr-row__val { min-width: 0; max-width: 55%; overflow: hidden; white-space: normal; line-height: var(--lh-tight); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.scr-me__row > .scr-row__val:empty { display: none; }
.scr-me__row.has-crates > .scr-row__val { color: var(--text); }
.scr-me__row > .scr-row__val:not(:empty) ~ .scr-row__chev { display: none; }
.scr-me__row > .scr-me__gem { flex: none; }
.scr-me__row.has-crates > .scr-me__gem { display: none; }
/* locked (§3): --panel fill, --text-dim, the lock glyph in the well — no grayscale, no fading */
.scr-me__row.is-locked { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.scr-me__row.is-locked :is(.scr-row__title, .scr-ico, .scr-row__val) { color: var(--text-dim); }
.scr-me__row.is-locked > .scr-row__val { font-size: var(--fs-12); font-weight: 700; }
/* Wkrótce (n): one dense row; the locked rows under it show once it is opened */
.scr-me__soon .scr-row__chev { transition: transform var(--mo-med) var(--mo-out); }
.scr-me__soonlist.is-open .scr-me__soon .scr-row__chev { transform: rotate(180deg); }
.scr-me__soonlist:not(.is-open) > :not(.scr-me__soon) { display: none; }
.scr-me__groups { display: contents; }
/* „something new here” = one dot everywhere: the nav tab's red dot (css/hud.css .hud-nav__tab.has-dot) — red, a dark
   ring, no glow; on a Ja row it sits left of the trailing value */
.scr-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--raised); }
.scr-dot[hidden] { display: none; }
.scr-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-radius: var(--r-md); overflow: hidden; }
.scr-links a { color: var(--text); font-weight: 800; }
.scr-links > li > .site-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: var(--raised); text-decoration: none; }
.scr-links > li > .site-link > .ext-icon { margin-left: auto; color: var(--text-dim); }
.scr-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scr-steps__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--raised); border-radius: var(--r-md); line-height: var(--lh-body); }
.scr-steps__n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); font-weight: 900; }


/* relocation */
.scr-map { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 16px 8px; background: var(--bg); border: 0; border-radius: var(--r-md); scrollbar-width: none; }
/* a mouse has no swipe: a thin bar lets it reach the last city and „…∞” */
@media (pointer: fine) {
  .scr-map { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}
.scr-map__city { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px; text-align: center; }
.scr-map__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--raised-2); border: 2px solid var(--line); }
.scr-map__name { font-weight: 800; font-size: var(--fs-12); }
.scr-map__sub { font-size: var(--fs-12); color: var(--text-dim); }
.scr-map__road { flex: 1 0 18px; height: 4px; border-radius: var(--r-xs); background: var(--line); align-self: flex-start; margin-top: 12px; }
.scr-map__more { color: var(--text-dim); font-weight: 800; padding: 0 8px; align-self: flex-start; margin-top: 4px; }
.scr-map__city.is-past .scr-map__dot { background: var(--green-dark); border-color: var(--green-dark); }
.scr-map__city.is-here .scr-map__dot { background: var(--green); border-color: #fff; width: 36px; height: 36px; margin-top: -4px; }
.scr-map__city.is-next .scr-map__dot { border-color: var(--yellow); }
.scr-map__city.is-next .scr-map__name { color: var(--text); }
.scr-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-radius: var(--r-md); overflow: hidden; }
.scr-check { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 4px 8px; min-height: 52px; padding: 8px 12px; background: var(--raised); border: 0; }
.scr-check > .scr-bar { grid-column: 1 / -1; }
.scr-check__mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--text-dim); }
.scr-check.is-ok .scr-check__mark { background: var(--green); color: #fff; }
.scr-check.is-next { box-shadow: inset 4px 0 0 var(--yellow); }
.scr-check__label { font-weight: 700; }
.scr-check__val { font-size: var(--fs-14); font-weight: 800; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
/* Plugi: the reached auto-buy perk is a switch in the check row — label + switch, no second panel inside the row */
.scr-check > .scr-row--toggle { min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; flex-wrap: nowrap; font-weight: 700; }
.scr-plugs { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); }
.scr-plugs__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--panel); flex: none; }
.scr-plugs__gain { font-size: var(--fs-24); font-weight: 900; color: var(--text); }
.scr-plugs__mult { font-weight: 800; color: var(--green); }
.scr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scr-col { padding: 12px; background: var(--raised); border-radius: var(--r-md); box-shadow: inset 0 4px 0 var(--green); }
.scr-col.is-reset { box-shadow: inset 0 4px 0 var(--red); }
.scr-col__title { margin: 0 0 8px; font-size: var(--fs-14); font-weight: 800; }
.scr-col ul { margin: 0; padding: 0 0 0 16px; font-size: var(--fs-12); font-weight: 700; color: var(--text-2); line-height: var(--lh-body); }
.scr-reloc__go { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; padding-top: 8px; background: var(--panel); }

/* managers */
.scr-mgr__face { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; font-weight: 900; font-size: var(--fs-20); color: #fff; box-shadow: 0 0 0 2px var(--line); }
.scr-mgr__bio { font-size: var(--fs-12); font-weight: 700; color: var(--text-dim); }
.scr-mgr__line { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-body); }
.scr-mgr__line svg { flex: none; margin-top: 2px; color: var(--text-2); }
.scr-mgr__lv { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scr-pips { display: flex; gap: 4px; }
.scr-pip { width: 12px; height: 12px; border-radius: var(--r-xs); background: var(--bg); }
.scr-pip.is-on { background: var(--yellow); }

/* achievements, stats, catalog */
.scr-achv__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; padding: 12px; border-radius: var(--r-md); }
.scr-achv__head .scr-bar { grid-column: 1 / -1; }
.scr-achv__row.is-done .scr-ico { color: var(--yellow); }
.scr-achv__prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.scr-achv__prog .scr-bar, .scr-row__main > .scr-bar { flex: 1; height: 8px; }
.scr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scr-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--raised); border: 0; border-radius: var(--r-md); min-width: 0; }
.scr-stat__k { font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.scr-stat__v { font-size: var(--fs-20); font-weight: 900; overflow-wrap: anywhere; }
.scr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scr-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: var(--raised); border: 0; border-radius: var(--r-md); text-align: center; min-height: 92px; }
.scr-cat__grade { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-sm); font-weight: 900; font-size: var(--fs-16); background: var(--bg); color: var(--text-dim); }
.scr-cat__name { font-size: var(--fs-12); font-weight: 800; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.scr-cat.is-s3 .scr-cat__grade { background: var(--yellow); color: var(--ink); }
.scr-cat.is-s2 .scr-cat__grade { background: var(--green); color: #fff; }
.scr-cat.is-s1 .scr-cat__grade { background: var(--raised-2); color: var(--text); }
.scr-cat.is-unknown { background: var(--panel); color: var(--text-dim); }

/* wardrobe + skins */
.scr-ward__preview { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-md); border: 0; }
.scr-ward__act { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.scr-ward__rar { font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.scr-grid--ward { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scr-ward__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: var(--raised); border: 0; border-radius: var(--r-md); color: var(--text); font: inherit; cursor: var(--cur-hand); min-height: 112px; }
.scr-ward__item.is-sel { background: var(--raised-2); box-shadow: inset 0 0 0 2px var(--text-2); }
.scr-ward__item.is-eq { box-shadow: inset 0 0 0 2px var(--green); }
.scr-ward__name { font-size: var(--fs-12); font-weight: 800; text-align: left; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.scr-ward__state { font-size: var(--fs-12); color: var(--text-2); }
.scr-sw { position: relative; display: block; flex: none; border-radius: var(--r-sm); overflow: hidden; --a: #f2c21b; --b: var(--ink); --c: #ffffff; background: var(--a); }
.scr-sw--sm { width: 40px; height: 40px; border-radius: var(--r-sm); }
.scr-sw--sm .scr-sw__txt { font-size: var(--fs-14); }
.scr-sw--md { width: 56px; height: 56px; }
.scr-sw--lg { width: 84px; height: 84px; border-radius: var(--r-md); }
.scr-sw--outfit { background: linear-gradient(to bottom, var(--a) 0 58%, var(--c) 58% 64%, var(--b) 64%); }
.scr-sw--outfit[data-pattern="camo"] { background: radial-gradient(circle at 30% 30%, var(--c) 0 12%, transparent 13%), radial-gradient(circle at 70% 40%, var(--b) 0 14%, transparent 15%), linear-gradient(to bottom, var(--a) 0 60%, var(--b) 60%); }
.scr-sw--outfit[data-pattern='neon'] { box-shadow: inset 0 0 0 3px var(--c); }
.scr-sw--hat { background: linear-gradient(to bottom, transparent 0 22%, var(--a) 22% 62%, var(--b) 62% 72%, transparent 72%), var(--line); }
.scr-sw--mat { background: repeating-linear-gradient(0deg, var(--b) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, var(--b) 0 1px, transparent 1px 10px), linear-gradient(to bottom, var(--a) 0 80%, var(--c) 80%); }
.scr-sw--mat[data-pattern="marble"] { background: linear-gradient(135deg, var(--a) 0 40%, var(--b) 42% 44%, var(--a) 46% 70%, var(--b) 72% 73%, var(--a) 75%); }
.scr-sw--mat[data-pattern="carbon"] { background: repeating-linear-gradient(45deg, var(--a) 0 4px, var(--b) 4px 8px); }
.scr-sw--hall { background: linear-gradient(to bottom, var(--b) 0 45%, var(--a) 45%), var(--a); }
.scr-sw--hall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22%; height: 4px; background: var(--c); }
.scr-sw--sign { display: grid; place-items: center; background: var(--a); }
.scr-sw__txt { font-weight: 900; color: var(--b); font-size: var(--fs-16); }
.scr-sw--paint { background: linear-gradient(to bottom, transparent 0 25%, var(--a) 25% 75%, var(--b) 75% 82%, transparent 82%), var(--line); }
.scr-sw--paint[data-pattern="chrome"] { background: linear-gradient(160deg, #f4f4f5, #8a93a6 45%, #f4f4f5 55%, #59617a); }
.scr-sw--frame { background: var(--line); border-radius: 50%; box-shadow: inset 0 0 0 5px var(--a); }
.scr-weekly__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.scr-weekly__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scr-weekly__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 8px; background: var(--raised); border: 0; border-radius: var(--r-md); }
.scr-weekly__pick { padding: 0; background: none; border: 0; cursor: var(--cur-hand); }
.scr-weekly__off { position: absolute; top: 8px; right: 8px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--red); font-size: var(--fs-12); font-weight: 800; line-height: 20px; }

/* shop */
.scr-shop__gems { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px; border-radius: var(--r-md); color: var(--gem-light); }
.scr-shop__gems svg { grid-row: span 2; }
.scr-shop__gemv { font-size: var(--fs-32); font-weight: 900; color: #fff; }
/* 2026-10-22 polish: the two screen heroes (Sklep gems, Osiągnięcia count) were outline-only boxes (.panel on the
   panel) — now the chunky card: the --raised fill, THE border and the 4 px lip like every pressable block; the shop's
   „Zdobądź gemy” sits in the hero's right column (the gem tasks sheet) */
.scr-shop__gems.panel,
.scr-achv__head.panel { background: var(--raised); box-shadow: 0 var(--edge) 0 var(--edge-c); margin-bottom: var(--edge); }
.scr-shop__gems { grid-template-columns: auto 1fr auto; }
.scr-shop__gems > .scr-row__sub { grid-column: 2 / -1; }
.scr-shop__get { grid-column: 3; grid-row: 1; justify-self: end; }
.scr-achv__head:not(.scr-achv__bhead) > .scr-row__title.num { font-size: var(--fs-24); }

/* settings */
.scr-row--toggle { cursor: var(--cur-hand); }
.scr-switch { position: relative; flex: none; width: 52px; height: 30px; }
.scr-switch__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: var(--cur-hand); z-index: 1; }
.scr-switch__knob { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--bg); transition: background var(--mo-fast) var(--mo-out); }
.scr-switch__knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform var(--mo-fast) var(--mo-out); }
.scr-switch__input:checked + .scr-switch__knob { background: var(--green); }
.scr-switch__input:checked + .scr-switch__knob::after { transform: translateX(22px); }
.scr-switch__input:focus-visible + .scr-switch__knob { outline: 2px solid var(--yellow); outline-offset: 2px; }
.scr-row--slider, .scr-row--choice, .scr-row--latency { flex-wrap: wrap; }
.scr-row--choice .scr-seg { flex: 1 1 180px; }
.scr-range { flex: 1 1 120px; accent-color: var(--green); height: 32px; }
.scr-input, .scr-textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--text); font: inherit; font-weight: 700; }
.scr-textarea { min-height: 120px; font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-12); font-weight: 700; resize: vertical; word-break: break-all; }
.scr-input:focus, .scr-textarea:focus { outline: 0; border-color: var(--green); }
.scr-input__err { margin: 0; min-height: 1em; color: var(--red); font-size: var(--fs-12); font-weight: 800; }
.scr-rename { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--raised); border: 0; border-radius: var(--r-md); }
.scr-rename__row { display: flex; gap: 8px; }
.scr-rename__row .scr-input { flex: 1; min-width: 0; }
.scr-set-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.scr-about { display: flex; justify-content: space-between; gap: 8px; color: var(--text-dim); font-size: var(--fs-12); font-weight: 700; margin: 8px 0 0; }
.scr-tap-pad { width: 100%; min-height: 120px; border: 0; border-radius: var(--r-md); background: var(--bg); color: var(--text); font: inherit; font-weight: 800; font-size: var(--fs-16); cursor: var(--cur-hand); touch-action: manipulation; }
.scr-tap-pad.is-hit { animation: scr-hit var(--mo-fast) var(--mo-out); }

/* modals (confirm, export/import, reset, latency) */
.scr-modal { display: flex; flex-direction: column; gap: 12px; }
.scr-modal__title { margin: 0; font-size: var(--fs-20); font-weight: 900; line-height: var(--lh-tight); text-align: center; }
.scr-modal__body { margin: 0; color: var(--text-2); font-weight: 700; line-height: var(--lh-body); white-space: pre-line; } /* a 2nd line: the move's warning */
.scr-modal__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.scr-modal__actions .btn { flex: 1 1 120px; }

/* orders */
.scr-req { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; background: var(--raised); border: 0; border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: var(--cur-hand); }
.scr-req__av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--raised-2); box-shadow: 0 0 0 2px var(--line); font-weight: 900; font-size: var(--fs-14); }
.scr-req__tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.scr-prog { display: flex; align-items: center; gap: 8px; }
.scr-prog .scr-bar { flex: 1; }
.scr-cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scr-cal__day { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--raised); border: 0; border-radius: var(--r-md); min-height: 64px; }
.scr-cal__n { font-size: var(--fs-12); font-weight: 800; color: var(--text-dim); }
.scr-cal__r { font-size: var(--fs-12); font-weight: 800; line-height: var(--lh-tight); }
.scr-cal__day.is-done { opacity: 0.5; }
.scr-cal__day.is-today { box-shadow: var(--ring-go); }
.scr-cal__day.is-next { background: var(--panel); }

/* ------------------------------------------------------------------ crate opening (js/ui/screens/crate.js)
   Crate rework 2026-10-21 (owner: „bardziej efektowne”; Starr Drop / Clash Royale): the WHOLE screen on phones — no
   scrolling down to 360 × 640, the backdrop's padding and the bottom nav gone (#app.is-crate), the safe areas kept;
   a big panel on desktops. A column: the title + „Pomiń”, the stage (flex 1: the crate sized from the stage's own box
   — container units — rays + light discs behind it, the one-per-tap card over it, the hand + „Stuknij! 1/3”), then
   in the summary the cards (one row ≤ 4, else 3 per row) and „Odbierz” pinned at the bottom. data-phase: box → burst
   → cards → summary; data-taps 1 / 2 grow the light; --gc = the light (the rarity tease), --rc = the rarity colour.
   No gradients / blurred glows (the light = flat discs at low opacity, the rays a clip-path starburst turning with
   the unlock reveal's unl-rays loop); reduce motion: no shake, flash, rays or slams; data-low: no rays. */
.modal-backdrop.modal-backdrop--crate { padding: 0; }
#app.is-crate > .hud-nav-wrap { display: none; }
#app.is-crate #hud .hud-dock { visibility: hidden; }
.modal.scr-crate {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  padding: max(var(--sp-3), var(--safe-top)) max(var(--sp-3), var(--safe-right)) max(var(--sp-3), var(--safe-bottom)) max(var(--sp-3), var(--safe-left));
  border: 0;
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  --gc: #fff1c9;
  --rc: var(--text-2);
}
.scr-crate__top { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); min-height: 40px; }
.scr-crate__head { grid-column: 2; margin: 0; font-size: var(--fs-20); font-weight: var(--fw-num); line-height: var(--lh-tight); }
.scr-crate__skip { grid-column: 3; justify-self: end; }
.scr-crate__skip[hidden] { display: none; }

/* the stage: everything inside sizes from its box (cqw / cqh) */
.scr-crate__stage { position: relative; flex: 1 1 0; min-height: 0; display: grid; place-items: center; container-type: size; cursor: var(--cur-hand); }
.scr-crate__aura { position: absolute; left: 50%; top: 47%; z-index: 0; width: min(120cqw, 104cqh); aspect-ratio: 1; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); pointer-events: none; }
.scr-crate__disc { position: absolute; inset: 16%; border-radius: 50%; background: var(--gc); opacity: 0.08; transform: scale(0.8); transition: opacity var(--mo-slow) var(--mo-out), transform var(--mo-pop) var(--mo-spring), background-color var(--mo-slow) var(--mo-out); }
.scr-crate__disc--in { inset: 31%; opacity: 0.1; }
.scr-crate__rays {
  position: absolute;
  inset: 0;
  background: var(--gc);
  opacity: 0;
  clip-path: polygon(50% 50%, 44.8% 0.3%, 55.2% 0.3%, 50% 50%, 70.3% 4.3%, 79.4% 9.5%, 50% 50%, 90.5% 20.6%, 95.7% 29.7%, 50% 50%, 99.7% 44.8%, 99.7% 55.2%, 50% 50%, 95.7% 70.3%, 90.5% 79.4%, 50% 50%, 79.4% 90.5%, 70.3% 95.7%, 50% 50%, 55.2% 99.7%, 44.8% 99.7%, 50% 50%, 29.7% 95.7%, 20.6% 90.5%, 50% 50%, 9.5% 79.4%, 4.3% 70.3%, 50% 50%, 0.3% 55.2%, 0.3% 44.8%, 50% 50%, 4.3% 29.7%, 9.5% 20.6%, 50% 50%, 20.6% 9.5%, 29.7% 4.3%);
  transition: opacity var(--mo-slow) var(--mo-out), background-color var(--mo-slow) var(--mo-out);
  animation: unl-rays 18s linear infinite;
  animation-play-state: paused;
}
.scr-crate__rays--2 { inset: 13%; rotate: 15deg; animation-duration: 26s; animation-direction: reverse; }
.scr-crate[data-taps='1'] .scr-crate__disc { opacity: 0.16; transform: scale(0.9); }
.scr-crate[data-taps='2'] .scr-crate__disc { opacity: 0.22; transform: scale(1); }
.scr-crate[data-taps='2'] .scr-crate__rays { opacity: 0.1; animation-play-state: running; }
.scr-crate:not([data-phase='box']) .scr-crate__disc { opacity: 0.26; transform: scale(1.06); }
.scr-crate:not([data-phase='box']) .scr-crate__disc--in { opacity: 0.32; }
.scr-crate:not([data-phase='box']) .scr-crate__rays { opacity: 0.3; animation-play-state: running; }
.scr-crate:not([data-phase='box']) .scr-crate__rays--2 { opacity: 0.18; }
.scr-crate__aura.is-up .scr-crate__disc { animation: crate-up var(--mo-pop) var(--mo-spring); }
.scr-crate[data-low='true'] .scr-crate__rays { display: none; }

/* the crate: the 3D canvas (or the CSS box without WebGL2), ~60 % of a phone's width, scaled to the stage height */
.scr-crate__box { position: relative; z-index: 1; width: min(52cqw, 220px); aspect-ratio: 1.25; padding: 0; border: 0; border-radius: var(--r-sm); background: var(--cardboard-1); box-shadow: 0 8px 0 var(--cardboard-3); cursor: var(--cur-hand); transition: transform var(--mo-pop) var(--mo-spring), opacity var(--mo-slow) var(--mo-out); }
.scr-crate__box:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.scr-crate__box.is-3d:focus-visible { outline-offset: -10%; border-radius: var(--r-lg); }
.scr-crate__tape { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; transform: translateX(-50%); background: var(--cardboard-2); }
.scr-crate__label { position: absolute; left: 12px; bottom: 12px; padding: 0 6px; background: var(--paper); color: var(--ink); font-size: var(--fs-12); font-weight: 900; border-radius: var(--r-xs); transform: rotate(-6deg); }
.scr-crate__flap { position: absolute; top: -14px; width: 50%; height: 30px; background: var(--cardboard-2); border-radius: var(--r-xs) var(--r-xs) 0 0; transition: transform var(--mo-slow) var(--mo-out); }
.scr-crate__flap--l { left: 0; transform-origin: left bottom; }
.scr-crate__flap--r { right: 0; transform-origin: right bottom; }
.scr-crate:not([data-phase='box']) .scr-crate__flap--l { transform: rotate(-120deg); }
.scr-crate:not([data-phase='box']) .scr-crate__flap--r { transform: rotate(120deg); }
.scr-crate__box--gem { background: var(--gem-dark); box-shadow: 0 8px 0 var(--gem-dark); }
.scr-crate__box--gem .scr-crate__flap, .scr-crate__box--gem .scr-crate__tape { background: var(--gem); }
.scr-crate__box--premium { background: var(--yellow); box-shadow: 0 8px 0 var(--cardboard-3); }
.scr-crate__box--premium .scr-crate__flap, .scr-crate__box--premium .scr-crate__tape { background: var(--cardboard-1); }
.scr-crate__box:not(.is-3d).is-hit { animation: crate-squash 420ms var(--mo-spring); }
.scr-crate__box.is-3d { width: min(78cqw, 66cqh, 520px); aspect-ratio: 1; border-radius: 0; background: transparent; box-shadow: none; }
.scr-crate__box.is-3d > span { display: none; }
.scr-crate__cv { display: block; width: 100%; height: 100%; pointer-events: none; }
/* the cards take the stage: the open crate drops back and down, peeking under the card */
.scr-crate[data-phase='cards'] .scr-crate__box { opacity: 0.6; transform: translateY(38cqh) scale(0.36); }

/* the breathing hand on the crate (the tutorial's hand and its tut-tap loop) + the „Stuknij! 1/3” pill */
.scr-crate__hand {
  position: absolute;
  z-index: 4;
  left: calc(50% + min(18cqw, 15cqh, 120px));
  top: calc(50% + min(4cqw, 4cqh, 30px));
  color: #ffffff;
  filter: drop-shadow(1.6px 0 0 var(--panel)) drop-shadow(-1.6px 0 0 var(--panel)) drop-shadow(0 1.6px 0 var(--panel))
    drop-shadow(0 -1.6px 0 var(--panel)) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
  pointer-events: none;
  transition: opacity var(--mo-med) var(--mo-out);
}
.scr-crate__hand .icon { display: block; transform-origin: 46% 4%; animation: tut-tap 1.6s ease-in-out infinite; }
.scr-crate:not([data-phase='box']) .scr-crate__hand { opacity: 0; }
.scr-crate:not([data-phase='box']) .scr-crate__hand .icon { animation-play-state: paused; }
.scr-crate__pill {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: min(calc(50% + min(39cqw, 33cqh, 260px) + var(--sp-3)), calc(100% - 44px));
  padding: var(--sp-1) var(--sp-4);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-16);
  font-weight: var(--fw-num);
  line-height: var(--lh-tight);
  white-space: nowrap;
  box-shadow: 0 var(--btn-lip-sm) 0 var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
}
.scr-crate__pill:empty { display: none; }
.scr-crate[data-phase='cards'] .scr-crate__pill { top: auto; bottom: var(--sp-2); font-size: var(--fs-14); }

/* the card being revealed: headline, the big card, the counter, „2/3” */
.scr-crate__show { position: absolute; inset: 0 0 20cqh; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); pointer-events: none; perspective: 900px; }
.scr-crate__show[hidden] { display: none; }
.scr-crate__kicker,
.scr-crate__count {
  margin: 0;
  color: var(--gc);
  font-size: var(--fs-40);
  font-weight: var(--fw-num);
  line-height: 1;
  -webkit-text-stroke: 3px var(--edge-c);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--edge-c);
  transform: rotate(-3deg);
}
.scr-crate__count { min-height: 1em; color: #ffffff; font-size: var(--fs-32); transform: none; }
.scr-crate__count:empty { visibility: hidden; }
.scr-crate__nth { margin: 0; color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-label); }
.scr-crate__big {
  position: relative;
  width: min(58cqw, 38cqh, 260px);
  aspect-ratio: 0.74;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  border: 4px solid var(--rc);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: inset 0 0 0 3px var(--panel), 0 var(--btn-lip) 0 var(--edge-c);
  overflow: hidden;
  color: var(--text);
}
/* the rarity band at the top and a one-off shine sweeping across */
.scr-crate__big::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42%; background: var(--rc); opacity: 0.22; }
.scr-crate__big::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; background: #ffffff; opacity: 0; transform: translateX(-160%) rotate(18deg); }
.scr-crate__bigpic { position: relative; display: grid; place-items: center; width: 56%; aspect-ratio: 1; color: var(--rc); }
.scr-crate__bigpic > .scr-sw { width: 100%; height: 100%; border-radius: var(--r-md); }
.scr-crate__bigpic .cos-thumb,
.scr-crate__pic .cos-thumb { width: 100% !important; height: 100% !important; }
.scr-crate__bigpic > .icon { width: 70%; height: 70%; }
.scr-crate__bigname { position: relative; display: -webkit-box; width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-20); font-weight: var(--fw-num); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.scr-crate__bigsub { position: relative; color: var(--text-2); font-size: var(--fs-16); font-weight: var(--fw-label); line-height: var(--lh-tight); }
.scr-crate__big .scr-crate__prog { position: relative; width: 86%; height: 10px; }
.scr-crate__big.is-done { border-color: var(--yellow); animation: crate-done var(--mo-pop) var(--mo-spring); }
.scr-crate__big.is-done .scr-crate__bigsub { color: var(--yellow); }
.scr-crate__show.is-in .scr-crate__big { animation: crate-slam 560ms var(--mo-spring) both; }
.scr-crate__show.is-in .scr-crate__big::after { animation: crate-shine 820ms ease-out 360ms both; }
.scr-crate__show.is-in .scr-crate__kicker { animation: crate-kick var(--mo-pop) var(--mo-spring) 160ms both; }
.scr-crate__show.is-in .scr-crate__count { animation: crate-pop 420ms var(--mo-spring) 300ms both; }

/* the summary: every card, then „Odbierz” */
.scr-crate__cards { flex: none; display: none; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-2); width: 100%; max-width: 560px; margin: 0 auto; }
.scr-crate[data-phase='summary'] .scr-crate__cards { display: grid; }
.scr-crate__card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-1);
  border: 3px solid var(--rc);
  border-radius: var(--r-md);
  background: var(--raised);
  box-shadow: 0 var(--btn-lip-sm) 0 var(--edge-c);
  color: var(--text);
}
.scr-crate__card.is-open { animation: crate-pop 420ms var(--mo-spring) both; }
.scr-crate__card:nth-child(2) { animation-delay: 70ms; }
.scr-crate__card:nth-child(3) { animation-delay: 140ms; }
.scr-crate__card:nth-child(4) { animation-delay: 210ms; }
.scr-crate__card:nth-child(5) { animation-delay: 280ms; }
.scr-crate__card:nth-child(6) { animation-delay: 350ms; }
.scr-crate__pic { display: grid; place-items: center; width: 56px; height: 56px; flex: none; color: var(--rc); }
.scr-crate__pic > .scr-sw { width: 100%; height: 100%; }
.scr-crate[data-n='4'] .scr-crate__pic,
.scr-crate[data-n='5'] .scr-crate__pic,
.scr-crate[data-n='6'] .scr-crate__pic { width: 44px; height: 44px; }
.scr-crate__name,
.scr-crate__title { display: -webkit-box; width: 100%; min-height: calc(2em * var(--lh-tight)); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-12); font-weight: var(--fw-num); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.scr-crate__title { font-size: var(--fs-14); }
.scr-crate__sub { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-label); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.scr-crate__prog { display: block; width: 100%; height: 6px; flex: none; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.scr-crate__fill { display: block; height: 100%; background: var(--rc); transition: width var(--mo-pop) var(--mo-out); }
.scr-crate__card.is-done { border-color: var(--yellow); }
.scr-crate__card.is-done .scr-crate__sub { color: var(--yellow); font-weight: var(--fw-num); }
.scr-crate__foot { flex: none; display: none; justify-content: center; }
.scr-crate[data-phase='summary'] .scr-crate__foot { display: flex; }
.scr-crate__done { width: min(100%, 360px); }
.scr-crate__done[hidden] { display: none; }

/* the white flash of the burst and the screen shake of taps 2–3 */
.scr-crate__flash { position: absolute; inset: 0; z-index: 6; background: #ffffff; opacity: 0; pointer-events: none; }
.scr-crate__flash.is-on { animation: crate-flash 520ms ease-out both; }
.modal.scr-crate.is-shake { animation: crate-shake 380ms ease-out; }
.modal.scr-crate.is-golden { animation: scr-shake var(--mo-slow) var(--mo-out) 2; }

/* reduce motion: the taps stay, no shake / squash / slam / flash / rays (fades only) */
.scr-crate[data-reduce='true'] *,
.scr-crate[data-reduce='true'] { animation: none !important; }
.scr-crate[data-reduce='true'] .scr-crate__rays,
.scr-crate[data-reduce='true'] .scr-crate__flash { display: none; }
.scr-crate[data-reduce='true'] .scr-crate__fill,
.scr-crate[data-reduce='true'] .scr-crate__box { transition: none; }

/* short phones (≤ 700 px tall): a smaller title, headline and card */
@media (max-height: 700px) {
  .scr-crate__top { min-height: 32px; }
  .scr-crate__head { font-size: var(--fs-16); }
  .scr-crate__kicker { font-size: var(--fs-32); }
  .scr-crate__count { font-size: var(--fs-24); }
  .scr-crate__bigname { font-size: var(--fs-16); }
  .scr-crate__bigsub { font-size: var(--fs-14); }
  .scr-crate[data-n='5'] .scr-crate__pic,
  .scr-crate[data-n='6'] .scr-crate__pic { width: 36px; height: 36px; }
}
/* landscape phones: the stage on the left, the summary cards + „Odbierz” on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .modal.scr-crate { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--sp-3); }
  .scr-crate__cards { gap: var(--sp-1); }
  .scr-crate__card { padding: var(--sp-1); }
  .scr-crate[data-n] .scr-crate__pic { width: 36px; height: 36px; }
  .scr-crate__top { grid-column: 1 / -1; }
  .scr-crate__stage { grid-column: 1 / -1; grid-row: 2 / 4; }
  .scr-crate[data-phase='summary'] .scr-crate__stage { grid-column: 1; }
  .scr-crate__cards { grid-column: 2; grid-row: 2; align-self: center; }
  .scr-crate__foot { grid-column: 2; grid-row: 3; }
  .scr-crate__big { width: min(60cqw, 44cqh, 260px); }
  .scr-crate__show { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: var(--sp-4); }
}
/* desktops / tablets: a big centred panel (zoomed by --ui on wide screens, css/sheets.css) */
@media (min-width: 700px) and (min-height: 560px) {
  .modal-backdrop.modal-backdrop--crate { padding: var(--sp-4); }
  .modal.scr-crate { width: min(100%, 760px); height: min(100%, 900px); padding: var(--sp-4) var(--sp-5) var(--sp-5); border: 3px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 var(--btn-lip) 0 var(--edge-c), var(--sh-modal); }
  .scr-crate__head { font-size: var(--fs-24); }
  .scr-crate__hand .icon { width: 64px; height: 64px; }
  .scr-crate__pic { width: 72px; height: 72px; }
  .scr-crate[data-n='4'] .scr-crate__pic,
  .scr-crate[data-n='5'] .scr-crate__pic,
  .scr-crate[data-n='6'] .scr-crate__pic { width: 56px; height: 56px; }
  .scr-crate__name { font-size: var(--fs-14); }
  .scr-crate__card { padding: var(--sp-3) var(--sp-2); }
}

@keyframes crate-up { 0% { transform: scale(0.55); opacity: 0.6; } }
@keyframes crate-squash { 0% { transform: scale(1.18, 0.8); } 40% { transform: scale(0.9, 1.12) rotate(-5deg); } 70% { transform: scale(1.04, 0.97) rotate(3deg); } 100% { transform: none; } }
@keyframes crate-shake { 0%, 100% { transform: none; } 15% { transform: translate(-8px, 3px); } 30% { transform: translate(7px, -4px); } 45% { transform: translate(-5px, 2px); } 60% { transform: translate(4px, -1px); } 80% { transform: translate(-2px, 1px); } }
@keyframes crate-flash { 0% { opacity: 0.92; } 100% { opacity: 0; } }
@keyframes crate-slam {
  0% { transform: translateY(-40%) scale(1.7) rotateY(-80deg) rotate(-8deg); opacity: 0; }
  35% { opacity: 1; }
  62% { transform: translateY(3%) scale(0.9) rotateY(0deg) rotate(2deg); }
  82% { transform: scale(1.04); }
  100% { transform: none; opacity: 1; }
}
@keyframes crate-kick { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(0.9) rotate(-2deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
@keyframes crate-pop { 0% { transform: scale(0.4); opacity: 0; } 65% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes crate-shine { 0% { opacity: 0.55; transform: translateX(-160%) rotate(18deg); } 100% { opacity: 0.55; transform: translateX(520%) rotate(18deg); } }
@keyframes crate-done { 0% { transform: scale(1); } 45% { transform: scale(1.1) rotate(-2deg); } 100% { transform: none; } }

/* customs */
.scr-customs { display: flex; flex-direction: column; gap: 12px; }
.scr-customs__title { margin: 0; font-size: var(--fs-20); font-weight: 900; color: var(--text); }
.scr-customs__timer { height: 8px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.scr-customs__fill { display: block; height: 100%; background: var(--red); transform-origin: left center; }
.scr-customs__docs { display: flex; flex-direction: column; gap: 8px; }
.scr-customs__doc { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 8px 12px; background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); animation: scr-slide-in var(--mo-slow) var(--mo-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.scr-customs__lines { width: 44px; height: 40px; flex: none; border-top: 2px solid #b0a588; border-bottom: 2px solid #b0a588; box-shadow: inset 0 12px 0 -10px #b0a588, inset 0 -12px 0 -10px #b0a588; }
.scr-customs__name { flex: 1; font-weight: 900; }
.scr-customs__stamp { flex: none; width: 72px; height: 56px; border: 2px dashed #b0a588; border-radius: var(--r-sm); background: transparent; color: transparent; font: inherit; font-weight: 900; cursor: var(--cur-hand); }
.scr-customs__doc.is-stamped .scr-customs__stamp { border: 3px solid var(--green-dark); color: var(--green-dark); transform: rotate(-6deg); animation: scr-stamp var(--mo-fast) var(--mo-out); }

.scr-finds:empty { display: none; }

@keyframes scr-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(calc(var(--w, 4deg) * -1)); } 75% { transform: rotate(var(--w, 4deg)); } }
@keyframes scr-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes scr-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes scr-stamp { from { transform: scale(1.4) rotate(-6deg); } to { transform: scale(1) rotate(-6deg); } }
@keyframes scr-hit { from { background: var(--raised-2); } to { background: var(--bg); } }
@keyframes scr-done-pop { 0% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(180deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .scr-crate__box, .scr-crate.is-golden, .scr-crate.is-shake, .scr-customs__doc, .scr-customs__stamp { animation: none !important; }
  .scr-crate__flap, .scr-bar__fill, .scr-crate__fill { transition: none; }
}
:root[data-reduce-motion='true'] .scr-customs__doc { animation: none; }

@media (max-width: 360px) {
  .scr-grid, .scr-grid--ward { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- locked actions (BACKLOG item 3): a navy chip + lock + the unlock condition; never a green „buy” look ---- */
.scr-lock { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%; padding: 4px 12px; border: 0; border-radius: var(--r-sm); background: var(--panel); color: var(--text-dim); font: inherit; font-size: var(--fs-14); font-weight: 800; line-height: var(--lh-tight); text-align: left; cursor: help; box-shadow: none; }
.scr-lock .icon { flex: none; color: var(--text-dim); }
.scr-lock__text { min-width: 0; overflow-wrap: anywhere; }
.scr-lock.is-nope { animation: scr-nope var(--mo-slow) var(--mo-out); }
@keyframes scr-nope { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
/* locked (§3): --panel fill + --text-dim + the lock glyph — no grayscale filter, no fading */
.scr-card.is-locked, .scr-row.is-locked { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.scr-card.is-locked .scr-row__title, .scr-row.is-locked .scr-row__title { color: var(--text-dim); }
.scr-card.is-locked .scr-ico, .scr-row.is-locked .scr-ico { color: var(--text-dim); }
.scr-hire.is-locked { box-shadow: inset 0 0 0 2px var(--line); }
.scr-ward__item { position: relative; }
.scr-ward__lock { position: absolute; top: 4px; right: 4px; display: none; padding: 4px; border-radius: var(--r-sm); background: var(--bg); color: var(--text-dim); }
.scr-ward__item.is-locked { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
.scr-ward__item.is-locked .scr-ward__lock { display: inline-flex; }
.scr-ward__item.is-locked .scr-ward__name { color: var(--text-dim); }

/* ---- toggle knob (BACKLOG item 8): the one overshoot curve ---- */
.scr-switch__knob::after { transition: transform var(--mo-med) var(--mo-spring), width var(--mo-fast) var(--mo-out); }
.scr-switch__input:active + .scr-switch__knob::after { width: 30px; }
.scr-switch__input:checked:active + .scr-switch__knob::after { transform: translateX(16px); }

/* ---- Ustawienia: short list, save folded under „Zaawansowane” (BACKLOG item 6) ---- */
.scr-adv { border: 0; border-radius: var(--r-md); background: var(--raised); }
.scr-adv__sum { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 12px; font-weight: 800; cursor: var(--cur-hand); list-style: none; }
.scr-adv__sum::-webkit-details-marker { display: none; }
.scr-adv__sum::after { content: ''; width: 8px; height: 8px; border-right: 3px solid var(--text-dim); border-bottom: 3px solid var(--text-dim); transform: rotate(45deg); transition: transform var(--mo-med) var(--mo-out); }
.scr-adv[open] > .scr-adv__sum::after { transform: rotate(225deg); }
.scr-adv__body { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.scr-reset { display: flex; flex-direction: column; gap: 8px; }
.scr-sec--account[hidden] { display: none; }
/* „Zapis w chmurze: zsynchronizowano 14:05” under the account card: a status dot, green when in sync */
.scr-sync { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-tight); color: var(--text-2); }
.scr-sync[hidden] { display: none; }
.scr-sync::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.scr-sync[data-state='ok']::before { background: var(--green); }
.scr-sync[data-state='paused']::before { background: var(--red); }
.scr-row--wrap { flex-wrap: wrap; row-gap: 12px; }
.scr-row--wrap > .scr-row__main { flex: 1 1 100%; }
.scr-row--wrap > .scr-seg { flex: 1 1 100%; }

/* Rozwój: the header holds the title only; gem access = the grouped „Sklep” / „Za darmo” rows at the end of the body
   (products.js gemRows; owner 2026-10-11: the HUD gem „+” is hard to tap on phones) */
.scr-products__title { display: flex; align-items: center; gap: 8px; }
.scr-products__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-gemrows { margin-top: 8px; }
.scr-gemrow .scr-ico .icon[data-icon='gift'], .scr-gemrow .scr-ico .icon[data-icon='gem'] { color: inherit; }
.scr-step {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--raised-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 900;
  line-height: 1;
}
.scr-stn.is-binding .scr-step { background: var(--red); color: #fff; }
.scr-buymode[hidden], .scr-advice[hidden], .scr-hint[hidden], .scr-fold[hidden] { display: none; }
.scr-advice > .btn { flex: none; }
.scr-hint { text-align: left; }
/* „Więcej (n)”: a quiet row like the others (no dashed outline: dashed means empty / locked) */
.scr-fold { display: flex; flex-direction: column; gap: 8px; }
.scr-fold__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: var(--raised);
  border: 0;
  border-radius: var(--r-md);
  color: var(--text-2);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: var(--cur-hand);
}
.scr-fold__head:active { background: var(--raised-2); }
.scr-fold__t { flex: 1; min-width: 0; }
.scr-fold__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--raised-2); color: var(--text-2); font-size: var(--fs-12); font-weight: 800; line-height: 20px; text-align: center; }
.scr-fold__n:empty { display: none; }
.scr-fold__head::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 2px 0 4px;
  border-right: 3px solid var(--text-dim);
  border-bottom: 3px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform var(--mo-med) var(--mo-out);
}
.scr-fold.is-open > .scr-fold__head::after { margin-top: 4px; transform: rotate(225deg); }
.scr-fold:not(.is-open) > :not(.scr-fold__head) { display: none; }
.scr-fold.is-open > :not(.scr-fold__head) { animation: scr-more-in var(--mo-med) var(--mo-out); }
/* the level pill's „+” badge (ui/buy-button.js plus — a plus, never an arrow, on every station level button) */
.buy__plus { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--r-xs); background: rgba(255, 255, 255, 0.24); }
.buy__plus .icon { width: 12px; height: 12px; }
.buy:disabled .buy__plus { display: none; }


/* Category rows with many tabs (Szafa: Ciuchy / Czapki / Maty QC / Hala / Szyldy / Lakier / Pieczątki / Ramki) wrap
   into rows instead of a hidden horizontal scroll (owner 2026-10-11: „nie mieści się — Szyl…”): see the segmented
   control block at the top (.scr-seg--scroll). */

/* ---------------------------------------------------------------- Liga Agentów (BACKLOG 11, js/ui/screens/leaderboard.js)
   Visual pass 2: the two tabs, Kim's line on how fans are earned, „Twoje miejsce” as a plain card („Twoje miejsce” /
   „#6” 24 / 900 / the fans line), one grouped list of 52 px rows: place (1–3 = 28 px coins, gold / silver / bronze
   with an ink number and a 2 px ink edge; 4+ = a grey number) · the agency logo disc 32 · nick 16 / 800 + agency 12 / 700
   · fans 16 / 900 white + the pink fans glyph. The own row = --raised-2 + a 4 px green left bar. No glow, no tinted
   borders, no staggered entry. */
.scr-rank { display: flex; flex-direction: column; gap: 12px; }
.scr-rank__mine:empty { display: none; }
.scr-rank__card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--raised); border: 0; border-radius: var(--r-md); }
.scr-rank__card.is-login { flex-direction: column; align-items: stretch; }
.scr-rank__card .scr-rank__pos { justify-content: flex-start; font-size: var(--fs-24); font-weight: 900; line-height: var(--lh-tight); color: var(--text); }
.scr-rank__mine-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scr-rank__mine-title { font-size: var(--fs-14); font-weight: 800; color: var(--text-2); }
.scr-rank__mine-value { font-size: var(--fs-14); font-weight: 700; color: var(--text); }
.scr-rank__mine-note { margin: 0; font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-body); color: var(--text-2); }
.scr-rank__login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.scr-rank__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scr-rank__body { position: relative; display: flex; flex-direction: column; gap: 12px; }
.scr-rank__list { list-style: none; margin: 0; padding: 0; }
.scr-rank__row { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; background: var(--raised); border: 0; border-radius: var(--r-md); }
.scr-rank__pos { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-16); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* ranks 1–3: a 28 px coin with the number in ink and the 2 px ink edge */
.scr-rank__row:is(.is-gold, .is-silver, .is-bronze) > .scr-rank__pos > .scr-rank__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: var(--fs-14);
  box-shadow: 0 2px 0 var(--ink);
}
.scr-rank__row.is-silver > .scr-rank__pos > .scr-rank__n { background: var(--medal-2); }
.scr-rank__row.is-bronze > .scr-rank__pos > .scr-rank__n { background: var(--medal-3); }
.scr-rank__row.is-me { background: var(--raised-2); box-shadow: inset 4px 0 0 var(--green); }
.scr-rank__row.is-skel { min-height: 52px; background: linear-gradient(90deg, var(--panel-raised) 0%, var(--raised-2) 50%, var(--panel-raised) 100%); background-size: 200% 100%; animation: scr-rank-skel 1.2s linear infinite; }
.scr-rank__ava { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--ava-bg, var(--raised-2)); color: var(--ava-fg, #fff); box-shadow: 0 0 0 2px var(--line); font-size: var(--fs-12); font-weight: 900; }
.scr-rank__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr-rank__ava--own { overflow: visible; background: transparent; }
.scr-rank__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scr-rank__nick { font-weight: 800; line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-rank__sub { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-rank__val { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-16); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.scr-rank__val .icon { flex: none; color: var(--fans); }
.scr-rank__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 12px; text-align: left; background: var(--raised); border-radius: var(--r-md); }
.scr-rank__empty-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--panel); color: var(--text-2); }
.scr-rank__empty-title { margin: 0; font-weight: 900; font-size: var(--fs-16); }
.scr-rank__empty-sub { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--text-2); }
.scr-rank__foot-box { display: flex; flex-direction: column; gap: 4px; }
.scr-rank__foot { margin: 0; font-size: var(--fs-12); font-weight: 700; color: var(--text-2); }
.scr-rank__foot--dim { color: var(--text-dim); }
/* Liga Agentów (owner 2026-10-14): accounts with 0 fans on the open tab (a cloud save, no score yet / nothing this
   month) stay listed at the end, quieter; the month tab's „Nowa liga za …” line reads as part of the footer */
.scr-rank__row.is-zero:not(.is-me) { background: var(--panel); }
.scr-rank__row.is-zero:not(.is-me) :is(.scr-rank__nick, .scr-rank__val, .scr-rank__pos) { color: var(--text-dim); }
.scr-rank__ends { font-weight: 800; color: var(--text); }
@keyframes scr-rank-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* label with a phone variant (kit.js duo): desktop shows the long one */
.duo__s { display: none; }

/* ---------------------------------------------------------------- phones (BACKLOG 32 „wszędzie za dużo tekstu”)
   Everything that is NOT the wide landscape desktop (js/ui/nav.js PHONE_QUERY) — desktop never matches this block.
   Cards = title + one value + button; sentences that only describe something hide behind a tap: `.scr-more` inside a
   card (kit.js moreOnTap toggles .is-more), a section's explanatory note behind its title (kit.js section:
   .scr-sec--info → .is-info), the flow chain behind its one status line (parts.js flowSummary → .is-open).
   Icon tiles that repeat the title (station / hire / build / vehicle cards) go. Sizes stay on the one scale. */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .scr-more { display: none; }
  .is-more .scr-more { display: block; animation: scr-more-in var(--mo-med) var(--mo-out); }
  .duo__l { display: none; }
  .duo__s { display: inline; }

  .scr-sec > .scr-note:not(.scr-note--good) { display: none; }
  .scr-sec.is-info > .scr-note { display: block; animation: scr-more-in var(--mo-med) var(--mo-out); }
  .scr-sec--info > .scr-sec__title { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; cursor: var(--cur-hand); }
  .scr-sec--info > .scr-sec__title::after {
    content: 'i';
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--raised-2);
    color: var(--text);
    font-size: var(--fs-12);
    font-weight: 900;
    font-style: normal;
  }
  .scr-sec.is-info > .scr-sec__title::after { background: var(--green); }
  /* loose intro sentences of the hire / build sheets (the cards say it) */
  .scr-hire-sheet .scr-note:not(.scr-note--good),
  .scr-build-sheet > .scr-note { display: none; }
  .scr-sec__title.is-tap { animation: scr-more-tap var(--mo-fast) var(--mo-out); }

  /* one-line labels */
  .scr-row__sub,
  .scr-stn__eff {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .scr-row__main { min-width: 0; }
  .scr-row--hire .scr-row__title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scr-card .scr-build__head > .scr-ico { display: none; }

  /* Rozwój header: the flow chain folded behind Kim's one action line (a tap unfolds it) */
  .scr-flowbox:not(.is-open) > .scr-flowbox__head,
  .scr-flowbox:not(.is-open) > .scr-flow { display: none; }
  .scr-flowbox.is-open > .scr-flow { animation: scr-more-in var(--mo-med) var(--mo-out); }
  /* the „Kupuj” label stays on phones: without it the control read as a second, shorter tab bar under the tabs */

  /* station card: name + Lv · one value line · buy pill */
  .scr-stn .scr-ico,
  .scr-stn__ms,
  .scr-stn__crew { display: none; }

  /* hire card: title + rate + button („what it does” on a tap) */
  .scr-hire { cursor: var(--cur-hand); }
  .scr-hire__rate { font-weight: 800; }

  /* pads / vehicles: compact feet */
  .scr-pad__foot { gap: 8px; }

  /* station sheet */
  .scr-st__head > .scr-ico { display: none; }

  /* Ja: a column for the floating ✕ (sheets.css) beside the header card */
  .scr-me__head { margin-right: 44px; }
  .scr-me__head .scr-logo { zoom: 0.75; }

  /* Sklep gems header / Ustawienia choice hints are whole sentences — wrap them instead of cutting them mid-way */
  .scr-shop__gems .scr-row__sub,
  .scr-row--wrap > .scr-row__main > .scr-row__sub { white-space: normal; }
  /* Przeprowadzka / Plugi head: „Odprawa na start: ¥614 bln” beside the Bonusy button wraps, never „Odprawa na st…” */
  .scr-plugs .scr-row__sub { white-space: normal; }
  /* Sklep items and Osiągnięcia: the sub IS the item („+4 miejsca w kolejce…”) — it wraps, never cut („Zarobki ×2
     przez 30 min akt…”). Measured 390 / 360 px: 1–3 lines, one 4-line achievement. */
  .scr-shop .scr-row__main > .scr-row__sub,
  .scr-achv .scr-row__main > .scr-row__sub,
  .scr-season .ssn-shop .scr-row__main > .scr-row__sub {
    white-space: normal;
    line-height: var(--lh-tight);
  }
  /* playtest: the season shop cut its rule („0/2 w tym…”, „Nie lic…”) — the sub wraps there too */
}

@keyframes scr-more-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes scr-more-tap {
  50% { transform: scale(0.94); }
}

/* skin crate rows (Sklep, 2026-10-20): the name with its „i” (odds) right after it */
.scr-skin-crate__title { display: flex; align-items: center; gap: var(--sp-1); }
.scr-skin-crate__title .scr-crate-info { min-height: 28px; width: 28px; }
.scr-row__cta { pointer-events: none; flex: none; }

/* ------------------------------------------------------------------ sign finish (owner 2026-10-22, css/main.css tokens)
   Cards and rows inside sheets get the navy sign finish (soft gloss, lit top strip, darker bottom bevel); the
   segmented tabs' sliding pill too. Locked cards keep their flat recess (their `background` shorthand drops the gloss);
   the grouped lists keep flat rows (2 px dividers). */
.scr-card,
.cos-card { background-image: var(--sign-gloss-soft); box-shadow: var(--sign-hi-soft), var(--sign-rim); }
.scr-card.is-locked { background-image: none; }
.scr-list:not(.scr-list--group) > .scr-row,
.scr-sec > .scr-row { background-image: var(--sign-gloss-soft); box-shadow: var(--sign-hi-soft), var(--sign-rim); }
.scr-row.is-locked { background-image: none; }
.scr-seg::before,
.seg::before { background-image: var(--sign-gloss-soft); box-shadow: inset 0 0 0 2px var(--line), var(--sign-hi-soft), var(--sign-rim), var(--sh-edge-sm); }