:root {
  --shell-header-h: 88px;
  --shell-gutter: 48px;
  --shell-rail-max: 1320px;
  --shell-rail: min(calc(100% - var(--shell-gutter)), var(--shell-rail-max));
  /* Header top air + gap from header bottom to first page block — same on every page. */
  --shell-header-top: 14px;
  --shell-content-gap: 24px;
  --shell-ink: var(--text, #F4EFE4);
  /* Match site header CTA (#f0c866), not the older --gold fallback. */
  --shell-accent: var(--m3-primary, var(--primary, #f0c866));
  --shell-accent-ink: var(--m3-on-primary, var(--primary-ink, #171310));
  --scroll-thumb: rgba(255, 255, 255, 0.14);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.26);
  --scroll-track: transparent;
}

@media (max-width: 1024px) {
  :root { --shell-gutter: 28px; }
}

@media (max-width: 780px) {
  :root { --shell-gutter: 32px; }
}

@media (max-width: 360px) {
  :root { --shell-gutter: 24px; }
}

/* Header scrolls with the page — not sticky, not fixed. */
body {
  display: block !important;
  padding-top: 0 !important;
  min-height: 100dvh;
}

.site-chrome,
.site-chrome-spacer {
  display: contents;
}

.site-header,
.checkout-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 20;
  width: 100%;
  height: var(--shell-header-h);
  margin: var(--shell-header-top, 14px) 0 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  isolation: auto !important;
}

.header-main {
  width: var(--shell-rail);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}

.brand {
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--shell-ink);
}

.brand-mark {
  width: 40px;
  height: 30px;
  object-fit: contain;
  flex: none;
}

.brand-word {
  width: 118px;
  height: 28px;
  object-fit: contain;
  flex: none;
  /* Same cream ink as nav labels — not a separate gold cast. */
  filter: brightness(0) invert(96%) sepia(8%) saturate(320%) hue-rotate(358deg);
}

.brand:hover img,
.brand:focus-visible img {
  opacity: 1 !important;
  transform: none !important;
}

.brand:hover .brand-word,
.brand:focus-visible .brand-word {
  filter: brightness(0) invert(96%) sepia(8%) saturate(320%) hue-rotate(358deg) !important;
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark { filter: none !important; }

.next-primary-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(4px, 1vw, 10px);
}

.next-primary-nav a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(12px, 1.4vw, 20px);
  border: 0;
  border-radius: 12px;
  color: var(--shell-ink);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .88;
  transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.next-primary-nav a:hover,
.next-primary-nav a.active {
  color: var(--shell-accent);
  background: rgba(255, 255, 255, .07);
  opacity: 1;
}

.site-search,
.shell-search-space,
.header-main .site-search {
  display: none !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .icon-button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: var(--shell-ink);
  cursor: pointer;
  box-sizing: border-box;
  opacity: .9;
}

.site-header .icon-button:hover {
  background: rgba(255,255,255,.09);
  opacity: 1;
}

.site-header .icon-button svg { width: 22px; height: 22px; }

/* Keep header chrome from clipping the fixed inbox popover. */
.site-header,
.header-main,
.header-actions,
.inbox-chrome,
.inbox-bell-wrap {
  overflow: visible !important;
}

.inbox-chrome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.inbox-bell-wrap {
  position: relative;
}

.inbox-button {
  position: relative;
}

.inbox-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--shell-accent, #f1d88a);
  color: var(--shell-accent-ink, #1a1b17);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(18, 19, 21, .92);
}

/* Portaled to body + fixed by JS so header height never clips the list.
   Popovers use the graphite overlay (rgba(20,21,24,.98)), the pre-4A-1
   value, restored by owner decision 2026-09-27. */
.inbox-panel {
  position: fixed;
  z-index: 260;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 0;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(70dvh, 520px);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: var(--overlay, rgba(20, 21, 24, .98));
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.inbox-panel:not([hidden]) {
  display: flex;
}

.inbox-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inbox-panel-head strong {
  font-size: 14px;
  font-weight: 750;
}

.inbox-panel-head a {
  color: var(--shell-accent, #f1d88a);
  font-size: 13px;
  text-decoration: none;
}

.inbox-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.inbox-empty {
  margin: 0;
  padding: 10px 4px 4px;
  color: rgba(255,255,255,.55);
}

.inbox-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: inherit;
  text-decoration: none;
}

.inbox-item:hover {
  background: rgba(255,255,255,.08);
}

.inbox-item.is-unread {
  background: rgba(241, 216, 138, .08);
}

.inbox-item strong {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  overflow-wrap: anywhere;
}

.inbox-item span {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 780px) {
  .inbox-panel {
    width: min(420px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    max-height: min(62dvh, calc(100dvh - 140px));
    border-radius: 18px;
    padding: 14px;
  }

  .inbox-panel-head strong { font-size: 15px; }
  .inbox-item { padding: 12px 12px; }
}

/* 2026-09-27 decision: «Войти» is graphite on every surface — gold is
   reserved for the page's own primary action and the active state. */
.header-login {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--shell-ink) !important;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}

.header-login:hover,
.header-login:focus-visible {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: var(--line-strong, rgba(255, 255, 255, 0.22));
  color: var(--shell-ink) !important;
}

/* Language switcher (i18n 06.10): a graphite text chip left of «Войти», 44px target, muted
   until hovered — never gold (one gold button per screen). next.css carries the same geometry
   for the first frame (critical_build FRAME); keep the two equal. */
.lang-switch {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted, #B3AA98) !important;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  background: rgba(255, 255, 255, .09);
  border-color: var(--line-strong, rgba(255, 255, 255, .22));
  color: var(--shell-ink) !important;
}

/* Keyboard focus on the shell chrome: 2px ring in the text colour at 2px
   offset, never gold and never a fill (owner 2026-09-27, same rule as
   next.css and play.css). The shell restates it because the forum loads
   shell.css without next.css. The colour is pinned to --shell-ink rather
   than following the element's own text colour: active dock items and
   focused footer links have gold text, which drew a gold ring on them. */
.header-login:focus-visible,
.lang-switch:focus-visible,
.lang-hint-open:focus-visible,
.lang-hint-close:focus-visible,
.footer-lang a:focus-visible,
.account-menu-lang-links a:focus-visible,
.header-account:focus-visible,
.dock-account:focus-visible,
.site-header .icon-button:focus-visible,
.mobile-dock a:focus-visible,
.footer-column a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4) !important;
  outline-offset: 2px;
}

/* Top nav links are tabs: the ring sits inside the pill (offset -2px, like
   play.css .cab-nav-link) and the label is forced to ink, so keyboard focus
   never reads as the current page (gold label on the .07 pill). The offset
   is !important only to beat the later `.site-header a:focus-visible` rule,
   which has the same specificity. */
.next-primary-nav a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4) !important;
  outline-offset: -2px !important;
  color: var(--shell-ink) !important;
}

.header-account,
.dock-account {
  min-height: 48px;
  max-width: min(240px, 42vw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--shell-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.header-account:hover,
.header-account:focus-visible,
.dock-account:hover,
.dock-account:focus-visible,
.header-account[aria-expanded="true"],
.dock-account[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.09);
  color: var(--shell-ink);
  filter: none;
}

/* S3 (2026-09-27): on play.slarp.gg the account chip *is* the current page
   (no product in the nav is highlighted there) — the chip carries
   aria-current="page" (shell.py attrs()/chip_current). Guest chip stays
   graphite: «Войти» is never gold on any surface (see DECISIONS.md,
   "«Войти» графитовая..."). Once logged in, the chip itself stays graphite
   too (.07 fill, .12 border, ink name, like the current nav pill); the only
   gold is the solid avatar tile below, the current-page state marker. */
.header-login[aria-current="page"] {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: var(--line-strong, rgba(255, 255, 255, 0.22));
}

.header-account[aria-current="page"] {
  /* !important: site/src/css/next.css ships a competing !important
     .header-account background/border (see the same fight header-login
     already had to win above). */
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* The rule above also beats next.css's chip hover, so hover and the open
   menu restate it here, capped at the .10 selected+hover lift. */
.header-account[aria-current="page"]:is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .2) !important;
}

.header-account[aria-current="page"] .header-account-name {
  color: var(--shell-ink);
}

.header-account-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  /* Graphite by default — gold is the active-page treatment only (one gold
     CTA per screen). The tile turns gold solely on play.slarp.gg via
     [aria-current="page"] below; on every other page this avatar sat gold
     on its own, unrelated to any action (visual QA, 2026-09-27).
     !important: same fight as .header-login above — next.css ships a
     competing !important background on .header-account-avatar itself. */
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--shell-ink) !important;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}
/* the chip's only gold = current-page state marker (DECISIONS 2026-09-27) */
.header-account[aria-current="page"] .header-account-avatar,
.dock-account[aria-current="page"] .header-account-avatar {
  background: var(--shell-accent) !important;
  color: var(--shell-accent-ink) !important;
}
.header-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

.menu-button,
.header-nav,
.theme-button { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 10px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--shell-accent);
  color: var(--shell-accent-ink);
}
.skip-link:focus { transform: none; }

.mobile-dock { display: none; }
.shell-product-dock { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.shell-product-dock a { min-width: 0; text-align: center; }
.shell-product-dock a .dock-label,
.shell-product-dock a span:not(.dock-icon):not(.header-account-avatar) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
}
.dock-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Every header and dock control, including the forum's (no next.css there). */
.site-header a:focus-visible,
.site-header button:focus-visible,
.mobile-dock a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: 2px;
}

/* Account menu (S1, redrawn 06.10: owner «при нажатии на кабинет чтобы приятнее
   появлялась плашка и выглядела нормально, а не просто текст») — the header
   popover and the dock bottom sheet share this body: a head with the account
   (avatar or initial, name, access line), rows with an icon and a one-line
   hint, the current page marked, a divider, a quiet «Выйти». */
.account-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

.account-menu-head .header-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 16px;
}

.account-menu-who {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--shell-ink);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.account-menu-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, #b3aa98);
  font-family: var(--body, "Golos Text", "Segoe UI", sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--shell-ink);
  font-family: var(--body, "Golos Text", "Segoe UI", sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-item-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--shell-ink);
}

.account-menu-item-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.account-menu-item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.account-menu-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-item-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, #b3aa98);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

/* The current page: a .06 fill and an ink check — never gold (the only gold
   in the chip is the avatar tile on play.slarp.gg, DECISIONS 2026-09-27). */
.account-menu-item[aria-current="page"] { background: rgba(255, 255, 255, 0.06); }

.account-menu-item-check {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--shell-ink);
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* 2026-09-27 QA (low): the wash above is subtle — keyboard focus on a menu
   item (popover or the dock's bottom sheet) needs its own visible ring, in
   the text colour per DECISIONS (never gold — that reads as an active tab). */
.account-menu-item:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: -2px;
}

/* «Выйти» is quiet: muted until hovered, no icon tile fill. */
.account-menu-item.is-quiet { color: var(--muted, #b3aa98); min-height: 48px; }
.account-menu-item.is-quiet .account-menu-item-icon { background: transparent; color: inherit; }
.account-menu-item.is-quiet:hover,
.account-menu-item.is-quiet:focus-visible { color: var(--shell-ink); }

.account-menu-divider {
  height: 1px;
  margin: 6px 10px;
  background: var(--line, rgba(255, 255, 255, 0.1));
}

/* Desktop popover, portaled to body and anchored under the chip by JS. Opens
   with a short fade and scale from its top right corner (.is-open), closes
   the same way; shell.js sets hidden after the transition. */
.account-menu {
  position: fixed;
  z-index: 260;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: var(--overlay, rgba(20, 21, 24, .98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
}

.account-menu:not([hidden]) { display: flex; }
.account-menu.is-open { opacity: 1; transform: none; }

/* Mobile bottom sheet (S2), full width, anchored to the safe area. Slides up
   over a fading scrim (.is-open); a drag on the handle moves it with the
   finger (.is-dragging, no transition), a 70px pull closes it. */
.account-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: none;
  background: var(--scrim, rgba(8, 9, 12, .58));
  opacity: 0;
}

.account-sheet-backdrop:not([hidden]) { display: block; }
.account-sheet-backdrop.is-open { opacity: 1; }

.account-sheet {
  position: fixed;
  z-index: 300;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  max-height: min(82dvh, 600px);
  padding: 6px 10px calc(14px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: var(--overlay, rgba(20, 21, 24, .98));
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  transform: translateY(100%);
}

.account-sheet:not([hidden]) { display: flex; }
.account-sheet.is-open { transform: none; }
.account-sheet.is-dragging { transition: none !important; }

.account-sheet-grabber {
  flex: none;
  width: 40px;
  height: 4px;
  margin: 8px auto 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  touch-action: none;
}

.account-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.account-sheet-body .account-menu-item { font-size: 15px; min-height: 56px; }
.account-sheet-body .account-menu-item.is-quiet { min-height: 50px; }
.account-sheet-body .account-menu-item-hint { font-size: 13px; }
.account-sheet-body .account-menu-head { padding: 4px 10px 16px; }

body.account-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .account-menu { transition: opacity 140ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1); }
  .account-sheet { transition: transform 300ms cubic-bezier(.32, .72, 0, 1); }
  .account-sheet-backdrop { transition: opacity 240ms ease; }
}

/* Windows, after «Скачать» (shell.js showDownloadDone): what to do with the file. Fixed in the
   corner, so it never shifts the page or hides the button; it stays until the person closes it
   (they read it while the installer runs). Above the phone dock on narrow windows. */
.shell-download-done {
  position: fixed;
  z-index: 250;
  right: 24px;
  bottom: 24px;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  margin: 0;
  padding: 16px 16px 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: var(--overlay, rgba(20, 21, 24, .98));
  color: var(--shell-ink, #F4EFE4);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  animation: shell-download-done-in 180ms ease-out;
}

@keyframes shell-download-done-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.shell-download-done-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shell-download-done-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shell-download-done-title b {
  font-size: 16px;
  font-weight: 800;
}

.shell-download-done-title span {
  color: var(--muted, #B3AA98);
  font-size: 13px;
}

/* 44px target (it was 32 and .64 opacity: small and faint, audit 05.10); the
   negative margin keeps the glyph where it stood. */
.shell-download-done-close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  opacity: .82;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.shell-download-done-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }

.shell-download-done-close:focus-visible,
.shell-download-done-links a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: 2px;
  opacity: 1;
}

.shell-download-done-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: shell-download-step;
}

.shell-download-done-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0;
  counter-increment: shell-download-step;
}

.shell-download-done-steps li::before {
  content: counter(shell-download-step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--shell-ink, #F4EFE4);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.shell-download-done-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted, #B3AA98);
  font-size: 13px;
}

.shell-download-done-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0;
  font-size: 13px;
}

/* 44px targets: a row of standalone links, not running text. */
.shell-download-done-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--shell-ink, #F4EFE4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 780px) {
  .shell-download-done {
    left: 16px;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-download-done { animation: none; }
}

.checkout-header .checkout-header-main {
  width: min(calc(100% - 40px), 1200px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto; /* brand · title · language · support */
  align-items: center;
  gap: 16px;
}

.checkout-header-title {
  justify-self: center;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--shell-ink);
}

/* Dense Majestic-style footer: information first, no separating stripe. */
.site-ip-notice {
  background: transparent;
  border: 0;
  padding: 10px 0 0;
}

.site-ip-notice-inner {
  width: var(--shell-rail);
  margin-inline: auto;
}

.site-ip-notice p {
  margin: 0;
  max-width: 72em;
  /* 0.75 measures 5.01:1 on #121315 (AA for 11px). */
  color: rgba(179, 170, 152, 0.75);
  font-size: 11px;
  line-height: 1.45;
}

.site-ip-notice strong {
  color: rgba(244, 239, 228, 0.82);
  font-weight: 700;
}

.site-footer {
  flex: none;
  border: 0 !important;
  background: var(--m3-surface, #121315) !important;
  padding: clamp(22px, 3vw, 36px) 0 clamp(40px, 5vw, 62px) !important;
}

.footer-majestic {
  width: var(--shell-rail);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    minmax(240px, 1.1fr) minmax(120px, .55fr) minmax(120px, .55fr)
    minmax(220px, .9fr) minmax(170px, .7fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}

.footer-company {
  min-width: 0;
}

.footer-brand {
  width: max-content;
  min-height: 38px;
  margin-bottom: 15px;
}

.footer-company > strong,
.footer-column > strong {
  display: block;
  margin-bottom: 16px;
  color: rgba(244, 239, 228, .94);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.footer-company > strong {
  margin-bottom: 8px;
}

.footer-company p {
  max-width: 39em;
  margin: 4px 0 0;
  /* Seller identification: readable size and solid muted (8.07:1). */
  color: var(--muted, #B3AA98);
  font-size: 12px;
  line-height: 1.5;
}

.footer-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Vertical rhythm moves into the links' own padding below (WCAG 2.5.8
     target size, design-backlog п.7) — kept visually close to the old 11px. */
  gap: 1px;
}

.footer-column a {
  min-height: 0 !important;
  display: inline-block !important;
  padding-block: 5px;
  color: rgba(179, 170, 152, .78);
  font-size: 11px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 150ms ease;
}

/* The `!important` display above beats the UA's `[hidden]{display:none}`
   rule: restate hidden with matching specificity (the Play build and pages
   may hide a footer link). */
.footer-column a[hidden] {
  display: none !important;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--shell-accent);
}

.footer-column a:focus-visible,
.footer-brand:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: 2px;
  border-radius: 8px;
}

.footer-contacts a:last-child {
  color: rgba(244, 239, 228, .9);
  text-decoration: underline;
  text-decoration-color: rgba(233, 200, 124, .45);
  text-underline-offset: 4px;
}

/* «Язык: Русский · English» (i18n 06.10): the first row of the contacts column; the current
   language is text (its own lang attribute), the other one the alternate link. */
.footer-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  padding-block: 5px;
  color: rgba(179, 170, 152, .78);
  font-size: 11px;
  line-height: 1.4;
}

.footer-lang-label { color: rgba(244, 239, 228, .7); }

.footer-column .footer-lang a { padding-block: 0; }

/* The account sheet's language row (shell.js langSwitchItem): a row like the others, the two
   languages at its end. */
.account-menu-lang { cursor: default; }

.account-menu-lang-links {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-size: 13px;
  font-weight: 700;
}

.account-menu-lang-links .is-current { color: var(--muted, #b3aa98); }

.account-menu-lang-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--shell-ink);
  text-decoration: underline;
  text-decoration-color: rgba(233, 200, 124, .45);
  text-underline-offset: 3px;
}

/* «This page is also available in English» (shell.js langHint): one fixed quiet bar above the
   dock/footer edge, transform/opacity only (no layout shift); the transition exists only when
   motion is welcome. */
.lang-hint {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  width: max-content;
  max-width: min(calc(100% - 32px), 560px);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 14px;
  background: rgba(24, 25, 28, .96);
  color: var(--shell-ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  font-family: var(--body, "Golos Text", "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
}

.lang-hint.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.lang-hint-open {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--shell-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(233, 200, 124, .45);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.lang-hint-close {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #b3aa98);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lang-hint-close:hover,
.lang-hint-close:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: var(--shell-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .lang-hint { transition: opacity 220ms ease, transform 220ms ease; }
}

@media (max-width: 780px) {
  body:has(.mobile-dock) .lang-hint { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

.footer-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Focus pages (/checkout/, /play/start/: <body data-checkout> or
   data-shell-focus): two lines instead of four columns — the seller, then the
   documents and support; no product links (declutter 05.10). The IP notice
   above keeps its text and stands off the page's card. */
body:is([data-checkout], [data-shell-focus]) .site-ip-notice { margin-top: 32px; }

/* margin: the store sheet's footer offset (up to 56px) would split the
   notice from its two lines. */
.site-footer.site-footer--focus {
  margin-top: 8px;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom)) !important;
}

.footer-focus {
  width: var(--shell-rail);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
}

.footer-focus-seller {
  margin: 0;
  color: var(--muted, #B3AA98);
  font-size: 12px;
  line-height: 1.5;
}

.footer-focus-seller strong {
  color: rgba(244, 239, 228, .94);
  font-weight: 700;
}

.footer-focus-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.footer-focus a {
  display: inline-flex;
  align-items: center;
  color: rgba(179, 170, 152, .9);
  font-size: 12px;
  text-decoration: none;
  transition: color 150ms ease;
}

.footer-focus-links a { min-height: 44px; }

.footer-focus-seller a {
  color: rgba(244, 239, 228, .9);
  text-decoration: underline;
  text-decoration-color: rgba(233, 200, 124, .45);
  text-underline-offset: 4px;
}

.footer-focus a:hover,
.footer-focus a:focus-visible { color: var(--shell-accent); }

.footer-focus a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (max-width: 780px) {
  .footer-focus { display: grid; gap: 4px; }
  .footer-focus-links { gap: 0 14px; }
  /* the e-mail is a finger target like the six links under it (it was a
     119×18 tap on a phone, review 05.10) */
  .footer-focus-seller a { min-height: 44px; }
}

/* 981–1080: the five footer columns' minimums plus gaps (870px + 4 × 3.4vw)
   are wider than the rail, and «Контакты» ran 34px past it at 1000 (sweep
   05.10). The four-column footer with the company row on top starts here. */
@media (max-width: 1080px) {
  .footer-majestic { grid-template-columns: repeat(4, minmax(130px, .6fr)); }
  .footer-company { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  :root { --shell-header-h: 78px; }
  .brand-word { width: 96px; height: 22px; }
  .brand-mark { width: 34px; height: 26px; }
  .next-primary-nav a {
    font-size: 14px;
    padding-inline: 10px;
  }
  .header-login { min-height: 44px; padding-inline: 16px; font-size: 13px; }
  .header-account { min-height: 44px; max-width: min(200px, 40vw); padding: 0 10px 0 6px; gap: 8px; }
  .header-account-avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .header-account-name { font-size: 13px; }
  .site-header .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .footer-majestic {
    grid-template-columns: repeat(4, minmax(130px, .6fr));
  }
  .footer-company { grid-column: 1 / -1; }
}

/* 781–1100 (declutter 05.10): the logo, five product tabs and a signed-in
   cluster (bell, mail, name chip) did not fit one row — the tabs ran under the
   logo and the bell at 800 on play.slarp.gg, and at 1000 with a long name.
   The chip keeps its avatar here (the name stays in its aria-label and in the
   menu); up to 900 the tabs tighten; up to 1279 a long name is capped. The
   same rules stand in next.css, whose !important tab type wins where it loads. */
@media (min-width: 781px) and (max-width: 1100px) {
  .header-account .header-account-name { display: none; }
  .header-account { min-width: 44px; gap: 0; padding: 0 6px; }
}
@media (min-width: 781px) and (max-width: 900px) {
  .header-main { gap: 16px; }
  .next-primary-nav { gap: 2px; }
  .next-primary-nav a { padding-inline: 8px; font-size: 13px; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .header-account { max-width: 180px; }
}

@media (max-width: 780px) {
  :root { --shell-header-h: 68px; }
  .header-main {
    width: var(--shell-rail);
    display: flex;
    gap: 10px;
  }
  /* The logo is never a shrinkable flex item — review2 (high) measured the
     wordmark image poking out of a squeezed .brand box into the bell/mail
     icons at 375px on every host that still loads the pre-shell !important
     header rules (site/src/css/next.css, community/board/board.css). */
  .brand { flex: none; }
  .brand-word { width: 84px; height: 20px; }
  .brand-mark { width: 28px; height: 21px; }
  .next-primary-nav { display: none; }
  .header-actions { margin-left: auto; }
  /* 44px like the ≤980 header and the menu sheet: 42 was under the phone
     target (audit 05.10). */
  .header-login {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 12px;
    border-radius: 10px;
  }
  /* The account chip already lives in the mobile dock (.dock-account) once
     logged in — keeping the header copy too crowds brand + bell + mail +
     chip into one row and the chip pushes into the logo (visual QA,
     2026-09-27). Guests still see .header-login above; only the logged-in
     header chip is hidden here. */
  .header-account { display: none; }
  /* Guests too (declutter 05.10): one «Войти» on a phone, the dock's last
     slot. A page without the dock keeps the header button, and so does
     /play/prices/ while its pay bar has slid the dock away
     (html.prices-bar-on). The same rule stands next to the graphite copy in
     next.css (critical first frame). */
  html:not(.prices-bar-on) body:has(.mobile-dock) .header-login { display: none; }
  /* The switcher follows the same rule: on a phone the language lives in the account sheet and
     the footer (i18n 06.10). */
  html:not(.prices-bar-on) body:has(.mobile-dock) .lang-switch { display: none; }
  .dock-account {
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    max-width: none;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
  }
  .dock-account .header-account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 10px;
  }
  .dock-account > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750;
  }
  .site-header .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .mobile-dock {
    position: fixed;
    z-index: 150;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 560px);
    min-height: 68px;
    display: grid;
    gap: 0;
    transform: translateX(-50%);
    border: 0;
    border-radius: 22px;
    background: rgba(27, 29, 32, .92);
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  /* Five slots with full names (owner 06.10: «обрезается ускор.»). The label
     scales with the viewport: «Ускоритель» (Geologica 750) is 53px at 9px and
     66px at 11px; the slot is 58px at 320 (full-width dock below, ≤360), 67px
     at 375, 70px at 390, 75px at 414, 78px at 430 — measured 06.10, no slot
     truncates. Ellipsis stays only as the guard for an unknown fallback font. */
  .mobile-dock a {
    min-height: 56px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 14px;
    color: rgba(244, 239, 228, .72);
    padding: 6px 2px;
    font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
    font-size: clamp(9px, 2.75vw, 11px);
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.1;
    transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
  }
  .mobile-dock a:hover {
    color: var(--shell-ink, #F4EFE4);
    background: rgba(255, 255, 255, .05);
  }
  .mobile-dock a.active {
    border: 0;
    background: rgba(255, 255, 255, .08);
    color: var(--shell-accent, #f0c866);
  }
  .mobile-dock a.dock-account {
    gap: 3px;
  }
  .mobile-dock .header-account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 10px;
  }
  .mobile-dock a.active .dock-icon,
  .mobile-dock a.active svg {
    color: var(--shell-accent, #f0c866);
  }
  /* S3 (2026-09-27): dock account slot on play.slarp.gg — the active dock
     item treatment (.08 neutral tile, gold icon and label) plus the gold
     avatar tile; the guest slot has no aria-current and stays graphite. */
  .mobile-dock a[aria-current="page"]:not(.dock-account) {
    background: rgba(255, 255, 255, .08);
    color: var(--shell-accent, #f0c866);
  }
  .mobile-dock a[aria-current="page"] .dock-icon,
  .mobile-dock a[aria-current="page"] svg {
    color: var(--shell-accent, #f0c866);
  }
  .mobile-dock a.dock-account[aria-current="page"] {
    background: rgba(255, 255, 255, .08);
    color: var(--shell-accent, #f0c866);
  }
  .mobile-dock a.dock-account[aria-current="page"] .dock-icon,
  .mobile-dock a.dock-account[aria-current="page"] svg {
    color: var(--shell-accent, #f0c866);
  }
  /* Focus must stay in the text colour, never gold (DECISIONS). Redundant
     since the shared chrome ring is pinned to --shell-ink instead of the
     element's own (here gold) text colour; kept as a harmless guard. */
  .mobile-dock a.dock-account[aria-current="page"]:focus-visible {
    outline-color: var(--shell-ink, #F4EFE4) !important;
  }
  .site-footer {
    padding: 20px 0 calc(88px + env(safe-area-inset-bottom)) !important;
  }
  /* Phone footer: every link is a 44px row (audit 05.10). No logo (the
     header has it) and no «Продукты» (the dock and the header nav carry
     them): Аккаунт | Документы side by side, then Контакты across both
     columns on the same two tracks. 851 → ~550px (declutter 05.10). */
  .footer-majestic {
    width: var(--shell-rail);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
  .footer-company {
    grid-column: 1 / -1;
  }
  .footer-majestic .footer-brand,
  .footer-majestic .footer-products { display: none !important; }
  .footer-column { gap: 0; }
  .footer-column > strong { margin-bottom: 4px; }
  .footer-column.footer-contacts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
  .footer-contacts > strong { grid-column: 1 / -1; }
  /* The row is the target, not the word: «Цены» was 29px wide (review
     05.10), so a link stretches across its column. */
  .footer-column a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-self: stretch;
    align-items: center;
    padding-block: 0;
  }
  .footer-brand { min-height: 44px; }
}

@media (max-width: 360px) {
  .header-main { width: var(--shell-rail); gap: 6px; }
  .brand { gap: 8px; }
  .brand-word { width: 72px; height: 17px; }
  .header-login { padding-inline: 12px; }
  .header-actions { gap: 6px; }
  .inbox-chrome { gap: 6px; }
  .inbox-badge {
    top: -4px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
  }
  /* The compact header's longest title, «Регистрация» (/play/start/), sat 6px
     from the logo at 320. */
  .checkout-header-title { font-size: 14px; letter-spacing: .03em; }
  .footer-majestic,
  .footer-column.footer-contacts { column-gap: 16px; }
  /* «Важная информация» keeps one line beside «Аккаунт», so the link rows of
     the two columns stay level. */
  .footer-column > strong { letter-spacing: .01em; }
  /* Five full-name slots down to 320 (owner 06.10): the dock takes the full
     width minus 8px a side (next.css pins 24px with !important; the two-class
     selector wins), 6px padding, tighter type. Slot 58.4px at 320 against the
     53px «Ускоритель». */
  .mobile-dock.shell-product-dock { width: calc(100% - 16px) !important; padding: 6px; gap: 0; }
  .mobile-dock a {
    padding: 5px 1px;
    letter-spacing: -.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .mobile-dock {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Quiet shared scrollbar — every page and every overflow surface. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, rgba(255, 255, 255, 0.14))
    var(--scroll-track, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, rgba(255, 255, 255, 0.14))
    var(--scroll-track, transparent);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--scroll-track, transparent);
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: var(--scroll-thumb, rgba(255, 255, 255, 0.14));
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover, rgba(255, 255, 255, 0.26));
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Google Play build of the phone app (channel=play, shell.js playChannel): no
   way to prices, the store, orders or the accelerator landing from any page.
   shell.js removes these nodes; the rules cover anything drawn later. */
html.site-play-channel .next-primary-nav,
html.site-play-channel .footer-column[aria-label="Продукты"],
html.site-play-channel a[href*="slarp.gg/play/prices"],
html.site-play-channel a[href^="/play/prices"],
html.site-play-channel a[href*="slarp.gg/store"],
html.site-play-channel a[href^="/store"],
html.site-play-channel a[href*="#orders"],
html.site-play-channel a[href$="slarp.gg/play/"],
html.site-play-channel a[href="/play/"] { display: none !important; }
html.site-play-channel .brand { pointer-events: none; }
/* /play/start/ in that mode (play-start.js): no buy card, no tariff button,
   no Windows install steps — sign-in, then the free 72 hours. */
html.site-play-channel [data-join-buy],
html.site-play-channel [data-join-prices],
html.site-play-channel [data-join-pc-steps] { display: none !important; }
html.site-play-channel .shell-product-dock { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* --- Motion layer (06.10, owner: «приятные анимации, которые не будут делать
   сайт баганным»). Transform and opacity only, so nothing moves the layout
   (CLS stays 0). Hover and press feedback is CSS under the no-preference
   media query (works without JS); the scroll reveal and smooth anchors need
   shell.js, which adds html.motion-on / html.motion-smooth only when the
   person has not asked for reduced motion and only to elements already below
   the fold — content is never hidden before the script runs, and the first
   screen (main heading, LCP image) is never touched. --- */
@media (prefers-reduced-motion: no-preference) {
  html.motion-smooth { scroll-behavior: smooth; }

  html.motion-on [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 560ms cubic-bezier(.2, .7, .2, 1), transform 640ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.motion-on [data-reveal].is-in { opacity: 1; transform: none; }

  /* Press feedback on the controls the shell owns and the site's cards. */
  .mobile-dock a,
  .mobile-dock a .dock-icon,
  .account-menu-item,
  .header-login,
  .header-account,
  .dock-account,
  .next-primary-nav a,
  .site-header .icon-button,
  .slarp-social-grid a,
  .slarp-guides-grid > li,
  .slarp-game-related > li,
  .home-showcase-grid > * {
    transition-property: color, background-color, border-color, opacity, transform, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: ease;
  }
  .mobile-dock a:active .dock-icon,
  .mobile-dock a:active .header-account-avatar { transform: scale(.88); }
  .account-menu-item:active { transform: scale(.985); }
  .header-login:active,
  .header-account:active,
  .site-header .icon-button:active,
  .next-primary-nav a:active { transform: scale(.97); }
  .slarp-social-grid a:active,
  .slarp-guides-grid > li:active,
  .slarp-game-related > li:active,
  .home-showcase-grid > *:active { transform: scale(.985); }

  /* Segmented control (prices plan switch): the selected fill slides between
     options (shell.js segmentedSlide draws .seg-slide for the 220ms of the
     move and lifts the static fill meanwhile). */
  .slarp-prices-switch { position: relative; isolation: isolate; }
  .slarp-prices-switch .seg-slide {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: var(--fill-selected, rgba(255, 255, 255, .08));
    pointer-events: none;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), width 220ms cubic-bezier(.2, .8, .2, 1);
  }
  .slarp-prices-switch.is-sliding .slarp-prices-switch-opt { background: transparent !important; }
}