/* Library CSS for the no-build host.
   No reset, no html { font-size }, no preview chrome — those fight
   the product's css/base.css and --fs-base / --tap scale. *//* M1 primitives — DESIGN_MANIFEST §12.1. Tokens only; no raw hex. */

bel-button,
bel-icon-button,
bel-badge,
bel-avatar,
bel-currency-pill,
bel-toggle,
bel-tabs,
bel-text-field,
bel-select,
bel-toast,
bel-progress-bar,
bel-skeleton,
bel-stats-pill,
bel-empty-state,
bel-connection-banner {
  display: block;
}
/* `hidden` must beat the block display above (latent since db9e6a6, Design S03 review) — its own statement, never
   inside a selector list: b815fef put it inside the list and turned six components display:none. */
bel-connection-banner[hidden] { display: none; }

bel-button,
bel-icon-button,
bel-badge,
bel-currency-pill,
bel-toggle {
  display: inline-flex;
}

.bel-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: bel-spin 0.7s linear infinite;
  flex: 0 0 20px;
}

@keyframes bel-spin {
  to { transform: rotate(360deg); }
}

html[data-screenshot="1"] .bel-spinner,
html[data-motion="off"] .bel-spinner {
  animation: none;
  border-right-color: currentColor;
  opacity: 0.5;
}

/* ---- Button ---- */
.bel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 88px;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-button);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-feedback) var(--ease-standard),
    color var(--dur-feedback) var(--ease-standard),
    transform var(--dur-feedback) var(--ease-standard);
}
.bel-button--sm { min-height: var(--touch-min); padding: 0 var(--space-3); font-size: var(--fs-small); }
.bel-button--lg { min-height: var(--button-lg-height); padding: 0 var(--space-5); font-size: var(--fs-h3); }
.bel-button--block { width: 100%; }
/* §12.1 `fill`: for a container narrower than the 88px comfort minimum. The height and hit area are still
   `--touch-min`; only the width floor and the single line give way. */
.bel-button--fill { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; height: auto; }

.bel-button--primary { background: var(--accent-gold); color: var(--text-on-accent); }
.bel-button--play { background: var(--action-play); color: var(--text-on-play); }
.bel-button--secondary {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.bel-button--tertiary { background: transparent; color: var(--accent-gold-text); }
.bel-button--danger { background: var(--danger); color: var(--text-on-danger); }

@media (hover: hover) {
  .bel-button:hover:not(:disabled),
  .bel-force-hover.bel-button { filter: brightness(1.06); }
}
.bel-button:active:not(:disabled),
.bel-force-pressed.bel-button { transform: translateY(1px); }
.bel-button--primary:active:not(:disabled),
.bel-force-pressed.bel-button--primary { background: var(--accent-gold-pressed); }
.bel-button--play:active:not(:disabled),
.bel-force-pressed.bel-button--play { background: var(--action-play-pressed); }
.bel-button--danger:active:not(:disabled),
.bel-force-pressed.bel-button--danger { background: var(--danger-pressed); }
.bel-force-focus.bel-button {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}
/* Disabled control — MANIFEST §12.1 (v1.9.7): fixed fill/ink/border tokens, never opacity.
   All five variants render identically when disabled; `loading` is not `disabled`. */
.bel-button:disabled {
  background: var(--control-disabled-fill);
  color: var(--control-disabled-ink);
  border-color: var(--control-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  filter: none;
}

/* ---- IconButton ---- */
.bel-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  background: transparent;
}
.bel-icon-button.is-selected { color: var(--accent-gold-text); }
@media (hover: hover) {
  .bel-icon-button:hover:not(:disabled),
  .bel-force-hover.bel-icon-button { background: var(--surface-2); }
}
.bel-icon-button:active:not(:disabled),
.bel-force-pressed.bel-icon-button { background: var(--surface-3); }
/* Disabled IconButton — MANIFEST v1.9.8: ink only (--control-disabled-ink), background stays
   transparent and no border — an enabled icon button has no surface either, so a boxed disabled
   one would out-shout the working controls beside it. Never opacity (2.04 / 1.70 / 2.49 measured). */
.bel-icon-button:disabled {
  color: var(--control-disabled-ink);
  background: transparent;
  cursor: not-allowed;
}
.bel-icon-button .bel-badge {
  position: absolute;
  top: -6px;
  right: -4px;
}

/* ---- Badge ---- */
.bel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.bel-badge--count {
  min-width: var(--badge-count-size);
  height: var(--badge-count-size);
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: var(--text-on-danger);
  font-size: 11px;
}
.bel-badge--dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--danger);
}
.bel-badge--claim,
.bel-badge--claimable {
  width: var(--badge-count-size);
  height: var(--badge-count-size);
  border-radius: var(--radius-full);
  background: var(--action-play);
  color: var(--text-on-play);
  font-size: 11px;
}
.bel-badge--new,
.bel-badge--label {
  height: auto;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-gold);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.bel-badge--counter {
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

/* ---- Avatar ---- */
.bel-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.bel-avatar__ring {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
  display: grid;
  place-items: center;
}
.bel-avatar__ring.is-vip {
  box-shadow: 0 0 0 2px var(--accent-gold);
}
.bel-force-focus .bel-avatar__ring,
.bel-avatar:focus-visible .bel-avatar__ring {
  box-shadow: 0 0 0 2px var(--accent-gold);
}
.bel-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bel-avatar__fallback {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
/* An emoji/text fallback the player chose: full-ring disc, the host-supplied background behind it (0.4.1). */
.bel-avatar__fallback--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  font-size: 1.15em;
  line-height: 1;
  color: var(--text-primary);
}
.bel-avatar--static { cursor: default; }
.bel-avatar__dot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
  background: var(--text-muted);
}
.bel-avatar__dot--online { background: var(--action-play); }
.bel-avatar__level {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 18px;
  max-width: 100%;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.bel-avatar__vip {
  position: absolute;
  top: -4px;
  left: -4px;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  background: var(--accent-gold);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

/* ---- CurrencyPill ---- */
.bel-currency {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-primary);
  white-space: nowrap;
  text-decoration: none;
}
a.bel-currency { cursor: pointer; }
.bel-currency--sm { height: 24px; }
.bel-currency--lg { height: 40px; padding: 0 12px 0 10px; }
.bel-currency__amount { font-size: var(--fs-button); }
.bel-currency__name {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.bel-currency--chips { color: var(--currency-chips); }
.bel-currency--diamonds { color: var(--currency-gems); }
.bel-currency--bonus-tokens { color: var(--currency-tokens); }
.bel-currency--club-coins { color: var(--currency-club); }
.bel-currency.is-stale .bel-currency__amount {
  color: var(--text-secondary);
}
.bel-currency__stale {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--text-secondary);
}
.bel-currency.is-insufficient { outline: 1px solid var(--danger); }
.bel-currency.is-unavailable .bel-currency__amount {
  color: var(--text-secondary);
}

/* ---- Toggle ---- */
.bel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  background: transparent;
  cursor: pointer;
}
.bel-toggle__track {
  width: var(--toggle-track-width);
  height: var(--toggle-track-height);
  border-radius: var(--radius-full);
  background: var(--toggle-track-off);
  border: 2px solid var(--toggle-border-off);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: background-color var(--dur-feedback) var(--ease-standard), border-color var(--dur-feedback) var(--ease-standard);
}
.bel-toggle.is-on .bel-toggle__track {
  background: var(--toggle-track-on);
  border-color: var(--toggle-track-on);
}
.bel-toggle__knob {
  width: var(--toggle-knob);
  height: var(--toggle-knob);
  border-radius: var(--radius-full);
  background: var(--toggle-knob-fill);
  box-shadow: var(--shadow-1);
  display: grid;
  place-items: center;
  transition: transform var(--dur-feedback) var(--ease-standard);
  color: var(--toggle-track-on);
}
.bel-toggle.is-on .bel-toggle__knob { transform: translateX(20px); }
.bel-toggle.is-pending .bel-toggle__knob { opacity: 0.5; }
/* Disabled toggle — MANIFEST §11.2 (v1.9.6): dashed border separates it from "off" by shape,
   never the ON colour in any state, no opacity. Knob position still reports the value. */
.bel-toggle:disabled { cursor: not-allowed; }
.bel-toggle:disabled .bel-toggle__track,
.bel-toggle:disabled.is-on .bel-toggle__track {
  background: var(--toggle-track-disabled);
  border: 2px dashed var(--toggle-border-disabled);
}
.bel-toggle:disabled .bel-toggle__knob {
  background: var(--toggle-knob-disabled);
  box-shadow: none;
  color: var(--toggle-track-disabled);
}
.bel-toggle .bel-toggle__check { width: 12px; height: 12px; }

/* ---- Tabs ---- */
.bel-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.bel-tabs__tab {
  flex: 1 1 0;
  min-height: var(--touch-min);
  min-width: 0;
  padding: 0 var(--space-3);
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.bel-tabs__tab.is-selected {
  background: var(--accent-gold);
  color: var(--text-on-accent);
}
/* No disabled tab exists in the product (every unavailable tab is absent, MANIFEST v1.9.8); if one
   ever appears it takes the full §12.1 control treatment — a tab label is text and needs 4.5:1. */
.bel-tabs__tab:disabled {
  background: var(--control-disabled-fill);
  color: var(--control-disabled-ink);
  box-shadow: inset 0 0 0 1px var(--control-disabled-border);
  cursor: not-allowed;
}
.bel-tabs__label { min-width: 0; }
.bel-tabs--scroll {
  gap: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  background: transparent;
  border-radius: 0;
}
.bel-tabs--scroll .bel-tabs__tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.bel-tabs--scroll .bel-tabs__tab.is-selected {
  background: transparent;
  color: var(--text-primary);
  border-bottom-color: var(--accent-gold);
}
.bel-tabs__icon {
  width: var(--icon-size);
  height: var(--icon-size);
}
.bel-stats-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  padding: 0 var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}
.bel-stats-pill__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
@media (max-width: 359px) {
  .bel-tabs__tab { font-size: 14px; }
}

/* ---- Fields ---- */
.bel-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bel-field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.bel-field__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  background: var(--surface-3);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 16px;
}
.bel-field__input:focus {
  border-color: var(--accent-gold);
}
.bel-force-hover .bel-field__input,
.bel-field__input:hover {
  border-color: var(--border-strong);
}
.bel-field__error {
  color: var(--danger-text);
  font-size: var(--fs-small);
}
.bel-field [aria-invalid="true"] { border-color: var(--danger); }
/* Disabled Input/Select — MANIFEST §12.1 (v1.9.7): same control-disabled tokens as Button. */
.bel-field__input:disabled {
  background: var(--control-disabled-fill);
  color: var(--control-disabled-ink);
  border-color: var(--control-disabled-border);
  cursor: not-allowed;
}
.bel-select__native:disabled ~ .bel-select__chevron { color: var(--control-disabled-ink); }
.bel-select { position: relative; display: block; }
.bel-select__native { appearance: none; padding-right: 40px; }
.bel-select__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

/* ---- Toast ---- */
.bel-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  max-width: 480px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
}
.bel-toast--success {
  background: var(--success);
  color: var(--text-on-play); /* --success is a bright green in every theme: black ink in high contrast is right (Design v1.9.15: 5.03 / 5.41 / 15.89) */
}
.bel-toast--danger,
.bel-toast--error {
  background: var(--danger);
  color: var(--text-on-danger);
}
.bel-toast--warning { color: var(--warning); }
.bel-toast--info { color: var(--info-text); }

/* ---- Skeleton ---- */
/* The host fills its container even inside a centring grid/flex cell — a skeleton that shrinks to 0 draws nothing (release/0.4.0 presence gate). */
bel-skeleton { width: 100%; min-width: 0; }
.bel-skeleton {
  display: block;
  height: 14px;
  width: 80%;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  animation: bel-shimmer 2s ease-in-out infinite;
}
@keyframes bel-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
html[data-screenshot="1"] .bel-skeleton,
html[data-motion="off"] .bel-skeleton { animation: none; }

/* ---- ProgressBar ---- */
bel-progress-bar { display: block; min-width: 0; }
.bel-progress {
  display: block;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
}
.bel-progress__fill {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: var(--radius-full);
  background: var(--accent-gold);
}
bel-progress-bar:not([data-zero]) .bel-progress__fill { min-width: 8px; }

/* ---- Empty ---- */
.bel-empty {
  max-width: 320px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
}
.bel-empty__text {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ---- Connection banner ---- */
.bel-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: var(--banner-height);
  padding: var(--space-1) var(--page-margin);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
/* The retry action carries a sentence at lg/xl (and „Опитай отново" at 320 md): it wraps instead of clipping. */
.bel-banner .bel-button {
  white-space: normal;
  height: auto;
  min-height: var(--touch-min);
  padding-block: var(--space-1);
  overflow-wrap: anywhere;
}
.bel-banner--reconnecting,
.bel-banner--connecting,
.bel-banner--loading {
  background: color-mix(in srgb, var(--accent-gold) 16%, var(--surface-2));
}
.bel-banner--failed,
.bel-banner--error,
.bel-banner--offline {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-2));
}
.bel-banner--online { background: color-mix(in srgb, var(--success) 16%, var(--surface-2)); }
/* M1 composites — DESIGN_MANIFEST §12.2 */

bel-top-bar,
bel-bottom-nav,
bel-left-rail,
bel-ticker,
bel-promo-banner,
bel-tile,
bel-feature-card,
bel-room-card,
bel-modal,
bel-sheet {
  display: block;
}
bel-top-bar {
  min-width: 0;
  max-width: 100%;
}

/* ---- TopBar ---- */
.bel-topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  min-height: var(--topbar-height);
  padding: env(safe-area-inset-top, 0px) var(--page-margin) 0;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.bel-topbar__utils,
.bel-topbar__end,
.bel-topbar__wallet {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.bel-topbar__utils { flex: 0 0 auto; }
.bel-topbar__end {
  flex: 0 0 auto;
  justify-content: flex-end;
}
.bel-topbar__end > bel-icon-button { flex-shrink: 0; }
.bel-topbar__end > bel-icon-button[hidden],
.bel-topbar__wallet > bel-icon-button[hidden] {
  display: none;
}
.bel-topbar__wallet {
  flex: 0 0 auto;
  justify-content: flex-end;
  overflow: visible;
}
.bel-topbar__pills {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 0;
}
.bel-topbar__pills bel-currency-pill {
  display: inline-flex;
  flex-shrink: 0;
}
.bel-topbar__pills bel-currency-pill[hidden] { display: none; }
.bel-topbar__wallet .bel-currency { height: 24px; }
.bel-topbar__wallet .bel-currency__amount { font-size: var(--fs-small); }
.bel-topbar__wallet .bel-currency__icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
.bel-topbar__wallet bel-icon-button { flex-shrink: 0; }
.bel-topbar bel-icon-button,
.bel-topbar bel-avatar {
  flex-shrink: 0;
  width: calc(var(--touch-floor) - var(--space-1));
  height: calc(var(--touch-floor) - var(--space-1));
  overflow: visible;
}
.bel-topbar .bel-icon-button,
.bel-topbar .bel-avatar {
  box-sizing: content-box;
  width: calc(var(--touch-floor) - var(--space-1));
  height: calc(var(--touch-floor) - var(--space-1));
  min-width: calc(var(--touch-floor) - var(--space-1));
  min-height: calc(var(--touch-floor) - var(--space-1));
  padding: calc(var(--space-1) / 2);
  margin: calc(var(--space-1) / -2);
}
.bel-topbar a.bel-currency {
  min-width: var(--touch-floor);
  min-height: var(--touch-floor);
}
@media (max-width: 360px) {
  .bel-topbar .bel-avatar__ring {
    width: 36px;
    height: 36px;
  }
}
@media (min-width: 430px) {
  .bel-topbar bel-icon-button,
  .bel-topbar bel-avatar {
    width: var(--touch-min);
    height: var(--touch-min);
  }
  .bel-topbar .bel-icon-button,
  .bel-topbar .bel-avatar {
    box-sizing: border-box;
    width: var(--touch-min);
    height: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    margin: 0;
  }
  .bel-topbar a.bel-currency {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }
  .bel-topbar__wallet .bel-currency { height: 32px; }
  .bel-topbar__wallet .bel-currency__amount { font-size: var(--fs-button); }
}

.bel-wallet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bel-wallet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
}

.bel-inbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.bel-inbox__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ---- Nav ---- */
.bel-nav {
  display: flex;
  background: var(--surface-1);
}
.bel-nav--bottom {
  min-height: var(--bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--border-subtle);
}
.bel-nav--rail {
  display: none;
  flex-direction: column;
  width: var(--left-rail-width);
  min-height: 100dvh;
  border-right: 1px solid var(--border-subtle);
  padding-top: env(safe-area-inset-top, 0px);
}
.bel-nav__item {
  flex: 1 1 0;
  min-width: 64px;
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  position: relative;
}
.bel-nav__item.is-active {
  color: var(--accent-gold-text);
}
.bel-nav--bottom .bel-nav__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 32px;
  height: 2px;
  background: var(--accent-gold);
  border-radius: var(--radius-full);
}
.bel-nav--rail .bel-nav__item {
  flex: 0 0 56px;
  width: 100%;
}
.bel-nav--rail .bel-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 24px;
  background: var(--accent-gold);
  border-radius: var(--radius-full);
}
.bel-nav__label {
  max-width: 64px;
  text-align: center;
  overflow-wrap: anywhere;
}
.bel-nav__item.is-soon {
  opacity: 0.72;
  cursor: default;
}
.bel-nav__soon {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: lowercase;
  color: var(--accent-gold-text);
  line-height: 1;
}

/* ---- Ticker ---- */
bel-ticker {
  display: block;
}
.bel-ticker {
  height: var(--ticker-height);
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.bel-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  padding: 0 var(--page-margin);
  animation: bel-ticker-marquee 18s linear infinite;
}
.bel-ticker__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-size: var(--fs-small);
  color: var(--text-primary);
}
.bel-ticker__avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  flex: 0 0 20px;
}
.bel-ticker__name { font-weight: var(--fw-semibold); }
.bel-ticker__msg { font-weight: var(--fw-regular); }
@keyframes bel-ticker-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (hover: hover) {
  bel-ticker:hover .bel-ticker__track,
  bel-ticker:focus-within .bel-ticker__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .bel-ticker { overflow-x: auto; mask-image: none; }
  .bel-ticker__track { animation-duration: 0s; animation: none; }
}
html[data-motion="off"] .bel-ticker { overflow-x: auto; mask-image: none; }
html[data-motion="off"] .bel-ticker__track,
html[data-screenshot="1"] .bel-ticker__track {
  animation-duration: 0s;
  animation: none;
}

/* ---- Promo ---- */
bel-promo-banner { display: block; }
.bel-promo {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  max-height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
  color: var(--art-ink);
  text-decoration: none;
}
.bel-promo__picture,
.bel-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.bel-promo__title {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  max-width: 55%;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  /* §11.3: label over artwork — fixed scrim + ink, never a themed token. */
  background: var(--art-scrim);
  color: var(--art-ink);
}
@media (min-width: 768px) {
  .bel-promo { aspect-ratio: 3 / 1; }
}

/* ---- Tile ---- */
bel-tile { display: block; min-width: 0; }
.bel-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 96px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
  color: var(--art-ink);
  text-decoration: none;
}
.bel-tile--hero { aspect-ratio: 2 / 1; min-height: 120px; }
.bel-tile__art {
  position: absolute;
  inset: 0;
  background: var(--surface-1);
}
.bel-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.bel-tile__band {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  /* §11.3 fixed over-artwork palette: the art never themes, so neither does anything on it. */
  background: var(--art-scrim);
  color: var(--art-ink);
}
.bel-tile__title {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-small);
  color: var(--art-ink);
  overflow-wrap: break-word;
}
.bel-tile__online {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.bel-tile__oc-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.bel-tile__soon {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-2);
  z-index: 2;
  /* §11.3: „ОЧАКВАЙТЕ СКОРО" sits over artwork — fixed badge pair, 8.89:1 in every theme. */
  background: var(--badge-soon-bg);
  color: var(--badge-soon-ink);
}
.bel-tile--soon .bel-tile__art { filter: saturate(0.4) brightness(0.82); }
.bel-tile--soon,
.bel-tile.is-disabled {
  pointer-events: none;
}
@media (hover: hover) {
  .bel-tile:hover .bel-tile__art { filter: brightness(1.06); }
  .bel-tile--soon:hover .bel-tile__art { filter: saturate(0.4) brightness(0.82); }
}
.bel-tile:active { transform: scale(0.98); }
.bel-tile--soon:active { transform: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  .bel-tile--hero { aspect-ratio: auto; }
  .bel-tile--hero .bel-tile__art {
    position: relative;
    height: 200px;
    max-height: 200px;
  }
}
@media (min-width: 1024px) {
  .bel-tile--hero { aspect-ratio: auto; }
  .bel-tile--hero .bel-tile__art {
    position: relative;
    height: 240px;
    max-height: 240px;
  }
}

/* ---- Feature card ---- */
bel-feature-card { display: block; min-width: 0; max-width: 100%; }
.bel-feature {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 96px;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
  /* Manifest v1.9.15 (corrected): the feature card is an art panel that PAINTS #0C1428 in every theme — its ink is
     --art-ink (FIXED §11.3, white everywhere, 18.32:1). --text-on-play is ink for --action-play/--success only: it is
     #000000 in high contrast and painted black titles on black cards (third time, after the tile band and the promo). */
  color: var(--art-ink);
}
.bel-feature__art {
  position: absolute;
  inset: 0;
  background: var(--surface-1);
}
.bel-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}
.bel-feature__body {
  position: relative;
  z-index: 1;
  margin-left: 46%;
  width: 54%;
  min-height: 96px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  color: var(--art-ink);
}
.bel-feature__title {
  margin: 0;
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: var(--art-ink);
}
.bel-feature__note {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--art-ink);
}
.bel-feature__ranks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.bel-feature__rank {
  display: grid;
  grid-template-columns: 12px 32px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}
.bel-feature__rank-n {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.bel-feature__face {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.bel-feature__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
}
.bel-feature__piggy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.bel-feature__pct {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bel-feature.is-locked { opacity: 0.85; }
.bel-feature.is-vip-only .bel-feature__art { opacity: 0.6; }
.bel-feature.is-loading { min-height: 96px; }
@media (max-width: 359px) {
  .bel-feature__title { font-size: var(--fs-small); }
}

/* ---- Modal / Sheet ---- */
.bel-modal[hidden],
.bel-sheet[hidden] { display: none; }
.bel-modal,
.bel-sheet { position: relative; }
.bel-modal.is-open,
.bel-sheet.is-open { display: block; }
.bel-modal__scrim,
.bel-sheet__scrim {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  z-index: 40;
}
.bel-modal__panel,
.bel-sheet__panel {
  position: fixed;
  z-index: 41;
  background: var(--surface-2);
  color: var(--text-primary);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
}
.bel-modal__panel {
  inset: env(safe-area-inset-top, 0px) 0 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.bel-sheet__panel {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bel-modal__head,
.bel-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar-height);
  padding: 0 var(--space-4);
}
.bel-modal__head h2,
.bel-sheet__head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
}
.bel-modal__body,
.bel-sheet__body {
  padding: var(--space-4);
  overflow: auto;
}
@media (min-width: 768px) {
  .bel-modal__panel {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 32px));
    border-radius: var(--radius-lg);
    max-height: 90dvh;
  }
}
@media (min-width: 1024px) {
  .bel-sheet__panel {
    left: auto;
    right: var(--page-margin);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 400px;
    border-radius: var(--radius-lg);
  }
}

/* ---- RoomCard (§15.4) ---- */
bel-room-card { min-width: 0; }
.bel-room {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: var(--room-card-width);
  max-width: 100%;
  min-width: 0;
  padding: var(--space-3);
  padding-left: calc(var(--space-3) + var(--space-1));
  background: var(--surface-1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.bel-room::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--space-1);
  background: var(--tier-color, var(--tier-finals));
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.bel-room--finals { --tier-color: var(--tier-finals); }
.bel-room--advanced { --tier-color: var(--tier-advanced); }
.bel-room--professionals { --tier-color: var(--tier-professionals); }
.bel-room--masters { --tier-color: var(--tier-masters); }
.bel-room--legends { --tier-color: var(--tier-legends); }
.bel-room--supreme { --tier-color: var(--tier-supreme); }
.bel-room__emblem {
  position: absolute;
  top: var(--space-6);
  left: var(--space-4);
  width: var(--space-16);
  height: var(--space-16);
  color: var(--tier-color, var(--tier-finals));
  opacity: 0.12;
  pointer-events: none;
}
.bel-room__emblem-icon {
  width: var(--space-16);
  height: var(--space-16);
}
.bel-room__count {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}
/* VIP is a badge, not a gate (§15.4): it sits in flow above the title so it never overlaps it. */
.bel-room__vip {
  align-self: flex-start;
  margin-bottom: calc(-1 * var(--space-1));
}
.bel-room__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-right: var(--space-8);
  min-width: 0;
}
.bel-room__tier {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.bel-room__variant {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.bel-room__prize {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}
.bel-room__prize-label {
  width: 100%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.bel-room__prize-value {
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-bold);
  color: var(--accent-gold);
  line-height: 1.1;
}
.bel-room__chip {
  color: var(--accent-gold);
  width: var(--icon-size);
  height: var(--icon-size);
}
.bel-room__entry {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.bel-room__entry.is-danger { color: var(--danger-text); }
.bel-room__reqs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.bel-room__lock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-height: var(--touch-min);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.bel-room bel-button,
.bel-room .bel-button { width: 100%; }
.bel-room.is-loading {
  min-height: 220px;
  aspect-ratio: 264 / 280;
}
.bel-room:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* ---- C01 TableCard (§16.3) — one object: stakes, seats with their medals, footer ---- */
bel-table-card { display: block; min-width: 0; }
.bel-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.bel-table:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}
.bel-table.is-loading { min-height: 220px; }
.bel-table__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bel-table__crown { color: var(--accent-gold-text); flex: 0 0 var(--icon-size); }
.bel-table__phase { margin-left: auto; }
.bel-table__stakes {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.bel-table__entry {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.bel-table__entry.is-danger { color: var(--danger-text); }
.bel-table__prize {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.bel-table__prize-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.bel-table__prize-value {
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-bold);
  color: var(--accent-gold);
  line-height: 1.1;
}
.bel-table__chip { color: var(--accent-gold); align-self: center; }

/* Seats: pairs stay together with their medal; 2/3/4 seats never wrap mid-row (§16.8 (1), (5)). */
.bel-table__seats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
}
.bel-table__seats--3 { grid-template-columns: minmax(0, 1fr); }
.bel-table__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  position: relative;
  min-width: 0;
}
.bel-table__pair[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.bel-table__pair[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bel-table__medal {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 20px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--accent-gold-text);
}
.bel-table__medal-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.bel-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  min-height: 84px;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-align: center;
}
.bel-seat--free {
  justify-content: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  border: 2px dashed var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.bel-seat--free[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--text-disabled);
  border-color: var(--control-disabled-border);
}
@media (hover: hover) {
  .bel-seat--free:not([aria-disabled="true"]):hover { border-color: var(--accent-gold); color: var(--text-primary); }
}
.bel-seat.is-you .bel-avatar__ring { box-shadow: 0 0 0 2px var(--accent-gold); }
.bel-seat__name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bel-seat__crown { width: 12px; height: 12px; flex: 0 0 12px; color: var(--accent-gold-text); }
.bel-seat__meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  align-items: center;
  max-width: 100%;
}
.bel-seat__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bel-seat__level { font-size: 11px; }
.bel-seat__you { font-size: 10px; }
.bel-seat bel-button { width: auto; }
.bel-seat .bel-button { min-width: 0; max-width: 100%; min-height: 36px; padding: 0 var(--space-1); font-size: var(--fs-caption); white-space: normal; }
.bel-seat__meta .bel-badge { min-width: 0; max-width: 100%; padding-inline: 4px; }
.bel-seat .bel-button__label { overflow-wrap: anywhere; }
.bel-table__foot {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}
.bel-table__spectators {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.bel-table__foot-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.bel-table__elapsed { font-size: var(--fs-small); color: var(--text-secondary); }
.bel-table__foot bel-button,
.bel-table__foot .bel-button { width: 100%; }
.bel-table__foot .bel-button { white-space: normal; text-align: center; }
/* Below 480 the action takes its own row so „Пълна — влизаш като зрител" never squeezes the counters. */
@media (max-width: 479px) {
  .bel-table__foot { grid-template-columns: auto minmax(0, 1fr); }
  .bel-table__foot bel-button { grid-column: 1 / -1; }
}

/* ---- C02 TournamentCard (§17.2) ---- */
bel-tournament-card { display: block; min-width: 0; }
.bel-tournament {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.bel-tournament.is-loading { min-height: 260px; }
.bel-tournament__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.bel-tournament__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.bel-tournament__type { color: var(--text-secondary); font-size: var(--fs-small); }
.bel-tournament__players { flex: 0 0 auto; gap: var(--space-1); }
.bel-tournament__players-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.bel-tournament__rules { display: grid; gap: var(--space-1); }
.bel-tournament__rule { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-tournament__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.bel-tournament__stake { display: grid; gap: var(--space-1); }
.bel-tournament__stepper {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  gap: var(--space-2);
}
.bel-tournament__stake-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}
.bel-tournament__chip { color: var(--accent-gold); width: var(--icon-size); height: var(--icon-size); flex: 0 0 var(--icon-size); }
.bel-tournament__bound { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-tournament__prize {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.bel-tournament__prize-value {
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-bold);
  color: var(--accent-gold);
  line-height: 1.1;
}
.bel-tournament__formula { font-size: var(--fs-small); color: var(--text-secondary); }
.bel-tournament bel-button,
.bel-tournament .bel-button { width: 100%; }
.bel-tournament__note { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }
.bel-tournament.is-insufficient .bel-tournament__stake-value { outline: 1px solid var(--danger); }

/* ---- C03 LeaderboardRow (§17.6) ---- */
bel-leaderboard-row { display: block; min-width: 0; }
.bel-lrow {
  display: grid;
  grid-template-columns: 40px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--list-row-height, 72px);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.bel-lrow.is-loading { display: block; min-height: 72px; }
.bel-lrow.is-loading .bel-skeleton { width: 80%; height: 14px; margin: 0 auto; }
.bel-lrow--top { background: var(--surface-2); border-radius: var(--radius-md); border-bottom: 0; }
/* Own row: 2 px --border-focus inset ring AND the „Ти" badge — colour is never the only cue. */
.bel-lrow.is-you { box-shadow: inset 0 0 0 2px var(--border-focus); }
.bel-lrow__pos {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 40px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.bel-lrow--top .bel-lrow__pos { color: var(--accent-gold-text); }
.bel-lrow__medal { width: 16px; height: 16px; flex: 0 0 16px; }
.bel-lrow__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bel-lrow__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bel-lrow__meta { display: inline-flex; gap: var(--space-1); min-height: 16px; }
.bel-lrow__vip, .bel-lrow__you { font-size: 10px; }
.bel-lrow__value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* A 7-digit value at 320 (or lg/xl) wraps inside its cell instead of stealing the name column or clipping
   (Design §17 follow-up generalised from TOP-3 to every row — release/0.4.0 matrix). */
.bel-lrow__value .bel-num {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bel-lrow__chip { color: var(--accent-gold); width: 18px; height: 18px; flex: 0 0 18px; }

/* §17.4 v1.9.13 (Design follow-up): TOP-3 stays three-up at every width AND every text scale; the VALUE adapts
   intrinsically — no viewport breakpoint, because data-fs scales the text independently of the viewport. The
   number may wrap under the glyph only when it must. */
.bel-rankings__top .bel-lrow__value {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}
.bel-rankings__top .bel-lrow__value .bel-num {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* C02-10 carries a sentence as its label (the reason): it wraps to two lines at lg/xl instead of overflowing. */
.bel-tournament .bel-button {
  white-space: normal;
  height: auto;
  min-height: var(--touch-min);
  padding-block: var(--space-2);
  overflow-wrap: anywhere;
}
/* M1 app shell — DESIGN_MANIFEST §12.3–12.4 */

.bel-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--text-primary);
}

.bel-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
}
.bel-shell__main > bel-top-bar {
  min-width: 0;
  max-width: 100%;
}

.bel-shell__content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4) var(--page-margin);
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-6));
}
.bel-shell__content:has(bel-home-screen),
.bel-shell__content:has(bel-lobby-screen) {
  padding: 0;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

.bel-stub {
  padding: var(--space-6) 0;
}
.bel-stub h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h1);
}

@media (min-width: 1024px) {
  .bel-shell {
    grid-template-columns: var(--left-rail-width) 1fr;
  }
  .bel-shell > bel-left-rail .bel-nav--rail,
  .bel-nav--rail { display: flex; }
  .bel-shell__main .bel-nav--bottom { display: none; }
  .bel-shell__content {
    max-width: var(--content-max-lg);
    margin: 0 auto;
    width: 100%;
    padding-bottom: var(--space-8);
  }
}

@media (min-width: 1440px) {
  .bel-shell__content { max-width: var(--content-max-xxl); }
}

@media (max-height: 568px) {
  .bel-shell__main bel-ticker { display: none; }
}

/* M2 screens — S02 Settings. Visual values PROPOSED until Design review. */

bel-settings-row,
bel-list-row,
bel-settings-screen,
bel-help-center,
bel-home-screen,
bel-lobby-screen {
  display: block;
}

.bel-settings-row {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 56px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.bel-settings-row__icon {
  color: var(--text-secondary);
}
.bel-settings-row__text { min-width: 0; }
.bel-settings-row__label {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.bel-settings-row__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.bel-settings-row.is-error { outline: 2px solid var(--danger); outline-offset: 2px; }
.bel-settings-row.is-disabled .bel-settings-row__label,
.bel-settings-row.is-disabled .bel-settings-row__desc {
  color: var(--text-disabled);
}
.bel-settings-row.is-disabled .bel-settings-row__icon {
  color: var(--icon-disabled);
}
.bel-settings-row bel-select { min-width: 140px; }
.bel-settings-row .bel-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bel-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: 0 var(--space-1);
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.bel-list-row__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bel-list-row__chevron { color: var(--text-muted); }
.bel-list-row.is-disabled {
  pointer-events: none;
  color: var(--text-disabled);
}
.bel-list-row.is-disabled .bel-list-row__icon,
.bel-list-row.is-disabled .bel-list-row__chevron {
  color: var(--icon-disabled);
}

.bel-settings { width: 100%; }
.bel-settings .bel-modal__body,
.bel-help .bel-modal__body {
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}
.bel-settings bel-tabs { margin: 0 var(--space-4); }
.bel-settings__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bel-settings__intro {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.bel-settings__socials { padding: var(--space-3) 0; }
.bel-settings__socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.bel-settings__social {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  color: var(--text-primary);
  background: var(--surface-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.bel-settings__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.bel-settings__actions bel-button,
.bel-settings__panel > bel-button { width: 100%; }
/* S02 action labels at lg/xl wrap instead of clipping (same family as C02-10, Design 20c80c7 follow-up) */
.bel-settings__actions .bel-button,
.bel-settings__panel > bel-button .bel-button {
  white-space: normal;
  height: auto;
  min-height: var(--touch-min);
  padding-block: var(--space-2);
  overflow-wrap: anywhere;
}
.bel-settings__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.bel-settings__id-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  min-height: var(--touch-min);
  overflow-wrap: anywhere;
}
.bel-settings__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.bel-settings__confirm p { margin: 0; overflow-wrap: anywhere; }
.bel-settings__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bel-settings__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.bel-settings__links a { color: var(--info-text); }
.bel-settings__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.bel-settings__logo {
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bel-help__hero {
  height: 72px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--info) 24%, var(--surface-1));
  margin-bottom: var(--space-3);
}
.bel-help__greet {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.bel-help__list { margin-top: var(--space-3); }
.bel-help__powered {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-align: center;
}

.bel-qa-screen {
  position: relative;
  min-height: 80dvh;
  background: var(--bg-base);
}
.bel-qa-screen__home {
  padding: var(--space-6) var(--page-margin);
  color: var(--text-secondary);
}
.bel-qa-cases {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--page-margin) var(--space-8);
}
.bel-qa-cases .bel-modal__scrim { display: none; }
.bel-qa-cases .bel-modal__panel {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-height: none;
  border-radius: var(--radius-lg);
}
.bel-qa-cases .bel-modal[hidden] { display: none; }
.bel-qa-cases .bel-modal { display: block; }
/* An open sheet in a case renders in flow the same way, so a case staged at a confirmation shows the
   confirmation (a fixed scrim would paint over the static modal) and nothing in a case is obscured. */
.bel-qa-cases .bel-sheet__scrim { display: none; }
.bel-qa-cases .bel-sheet__panel {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-height: none;
  border-radius: var(--radius-lg);
  margin-top: var(--space-3);
}
.bel-qa-cases .bel-sheet[hidden] { display: none; }
.bel-qa-cases .bel-sheet { display: block; }

/* ---- NAV03-A Home ---- */
.bel-qa-screen--home {
  padding: 0;
  min-width: 0;
}
.bel-home {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-base);
}
.bel-home bel-ticker {
  position: sticky;
  top: 0;
  z-index: 5;
}
.bel-home__body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-4) var(--page-margin) var(--space-8);
  min-width: 0;
}
.bel-home__games {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
}
.bel-home__games bel-tile[hero],
.bel-home__games bel-tile[spec="G01"] {
  grid-column: 1 / -1;
}
.bel-home__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gutter);
  min-width: 0;
}
.bel-home__skel {
  min-height: 96px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
}
.bel-home__skel--hero { aspect-ratio: 2 / 1; grid-column: 1 / -1; }
.bel-home__retry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 360px) {
  .bel-home__games { gap: var(--grid-gutter); }
}
@media (min-width: 768px) {
  .bel-home__games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bel-home__features { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .bel-home__body {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "games promo"
      "games features";
    align-items: start;
  }
  .bel-home__promo { grid-area: promo; }
  .bel-home__games { grid-area: games; }
  .bel-home__features {
    grid-area: features;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- S01 Belot lobby ---- */
.bel-qa-screen--s01 {
  padding: 0;
  min-width: 0;
}
.bel-lobby {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg-base);
}
.bel-lobby__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-lobby__title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.bel-lobby bel-ticker {
  position: sticky;
  top: 0;
  z-index: 5;
}
.bel-lobby__body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-4) var(--page-margin) var(--space-8);
  min-width: 0;
}
.bel-lobby__rail { min-width: 0; }
.bel-lobby__sec02 {
  position: relative;
  min-width: 0;
  margin-inline: calc(-1 * var(--page-margin));
}
.bel-lobby__carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: var(--page-margin);
  padding-bottom: var(--space-2);
  min-width: 0;
}
.bel-lobby__carousel > * {
  flex: 0 0 var(--room-card-width);
  scroll-snap-align: start;
}
.bel-lobby__arrows { display: none; }
.bel-lobby__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) 0 0;
}
.bel-lobby__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
}
.bel-lobby__dot.is-active { background: var(--accent-gold); }
.bel-lobby__dots[hidden] { display: none; }
.bel-lobby__friends,
.bel-lobby__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gutter);
  min-width: 0;
}
.bel-lobby__online { min-width: 0; }
.bel-lobby__online-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.bel-lobby__l01 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}
.bel-lobby__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.bel-lobby__player-name {
  max-width: 100%;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bel-lobby__l01-skel {
  min-height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
html[data-motion="off"] .bel-lobby__carousel { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  .bel-lobby__carousel { scroll-behavior: auto; }
}
@media (min-width: 768px) {
  .bel-lobby__friends,
  .bel-lobby__features { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bel-lobby__l01 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* §15.10 (1): three cards must be visible from 1024. 3 × 264 + 2 × 12 = 816 px, so SEC02 keeps the
     full content width here; the feature column only returns at 1440 (1200 − 320 − 24 = 856 ≥ 816). */
  .bel-lobby__body {
    max-width: var(--content-max-lg);
    margin-inline: auto;
    width: 100%;
  }
  .bel-lobby__l01 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bel-lobby__arrows {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-inline: var(--page-margin);
    margin-bottom: var(--space-2);
  }
}
@media (min-width: 1280px) {
  .bel-lobby__body { max-width: var(--content-max-xl); }
}
@media (min-width: 1440px) {
  .bel-lobby__body {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "promo features"
      "rail features"
      "rooms features"
      "friends features"
      "online features";
    align-items: start;
    max-width: var(--content-max-xxl);
  }
  .bel-lobby__promo { grid-area: promo; }
  .bel-lobby__rail { grid-area: rail; }
  .bel-lobby__sec02 { grid-area: rooms; }
  .bel-lobby__friends { grid-area: friends; }
  .bel-lobby__features {
    grid-area: features;
    grid-template-columns: minmax(0, 1fr);
  }
  .bel-lobby__online { grid-area: online; }
}

/* ---- C01 VIP zone (§16) ---- */
.bel-qa-screen--vip { padding: 0; min-width: 0; }
.bel-vip {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg-base);
}
.bel-vip__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
  gap: var(--space-2);
}
.bel-vip__title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
  min-width: 0;
}
.bel-vip__head-actions { display: flex; gap: var(--space-1); }
.bel-vip__body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-4) var(--page-margin) calc(var(--space-8) + var(--touch-min) + var(--space-4));
  min-width: 0;
}
.bel-vip__code {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-items: end;
}
.bel-vip__code bel-text-field { min-width: 0; }
.bel-vip__code input { text-transform: uppercase; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.bel-vip__hint {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.bel-vip__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gutter);
  min-width: 0;
}
.bel-vip__sticky {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: var(--space-3) var(--page-margin) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-base) 92%, transparent);
  border-top: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
}
.bel-vip__sticky bel-button,
.bel-vip__sticky .bel-button { width: 100%; }
@media (min-width: 480px) {
  .bel-vip__code { grid-template-columns: minmax(0, 1fr) auto; }
  .bel-vip__code .bel-vip__hint { grid-column: 1 / -1; order: 3; }
}
@media (min-width: 768px) {
  .bel-vip__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .bel-vip__body,
  .bel-vip__sticky > * {
    max-width: var(--content-max-lg);
    margin-inline: auto;
    width: 100%;
  }
}

/* Create-table form inside the routed Modal (§16.4) */
.bel-vip-form {
  display: grid;
  gap: var(--space-4);
}
.bel-vip-form__group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bel-vip-form__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.bel-vip-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bel-vip-form__choice {
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bel-vip-form__choice.is-selected {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--text-on-accent);
}
.bel-vip-form__choice--allin { letter-spacing: var(--ls-label); }
.bel-vip-form__confirm {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--warning);
}
.bel-vip-form__confirm-text { margin: 0; font-size: var(--fs-small); }
.bel-vip-form__confirm-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.bel-vip-form__summary {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Pre-start table room (§16.5) */
bel-table-room { display: block; min-width: 0; }
.bel-table-room {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--page-margin);
  min-width: 0;
  background: var(--bg-base);
}
.bel-table-room__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.bel-table-room__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.bel-table-room__code-label { font-size: var(--fs-small); color: var(--text-secondary); }
.bel-table-room__code-value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}
.bel-table-room__hint,
.bel-table-room__stake {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.bel-table-room.is-locked .bel-table-room__stake { color: var(--text-primary); font-weight: var(--fw-semibold); }
.bel-table-room__foot bel-button,
.bel-table-room__foot .bel-button { width: 100%; }
.bel-table-room__waiting,
.bel-table-room__locked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-height: var(--touch-min);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

/* EXAMPLE_STATIC marker (OPD-M3-4 / OPD-10): fixture-driven screens say so, visibly, when they show example counts. */
.bel-example {
  margin: 0;
  padding: var(--space-1) var(--page-margin);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-2);
}

/* ---- shared lobby-variant head for C02 / C03 ---- */
.bel-screen-head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-screen-head__title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ---- C02 Турнири (§17.1) ---- */
.bel-qa-screen--c02, .bel-qa-screen--c03 { padding: 0; min-width: 0; }
.bel-tournaments, .bel-rankings {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg-base);
}
.bel-tournaments__body, .bel-rankings__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--page-margin) var(--space-8);
  min-width: 0;
  width: 100%;
}
.bel-tournaments__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gutter);
  min-width: 0;
}
@media (min-width: 768px) {
  .bel-tournaments__body, .bel-rankings__body { max-width: var(--content-max-tab); margin-inline: auto; }
  .bel-tournaments__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.bel-buyin { display: grid; gap: var(--space-3); }
.bel-buyin__row {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-body);
}
.bel-buyin__row .bel-num { margin-left: auto; font-weight: var(--fw-bold); }
.bel-buyin bel-button, .bel-buyin .bel-button { width: 100%; }

/* ---- C03 Класации (§17.4) — one column of rows at every width ---- */
.bel-rankings__period {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  color: var(--text-secondary);
}
.bel-rankings__me {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.bel-rankings__mine {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.bel-rankings__mine-value { margin-left: auto; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-primary); }
.bel-rankings__mine .bel-icon { color: var(--accent-gold); }
.bel-rankings__position { margin-left: auto; text-align: right; color: var(--text-primary); }
.bel-rankings__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
}
.bel-rankings__board { display: grid; gap: var(--space-3); min-width: 0; }
.bel-rankings__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.bel-rankings__top .bel-lrow {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  gap: var(--space-1);
}
.bel-rankings__top .bel-lrow__pos { width: auto; justify-content: center; }
.bel-rankings__top .bel-lrow__who { align-items: center; max-width: 100%; }
.bel-rankings__top .bel-lrow__name { max-width: 100%; }
.bel-rankings__rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.bel-rankings__rows .bel-lrow:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.bel-rankings__rows .bel-lrow:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: 0; }
.bel-rankings__updated { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); text-align: center; }

/* ---- S03 own profile (M5 brief §8: banner 3:1, avatar over its lower edge, one column <768, tiles 2-up <430 / 4-up above) ---- */
bel-profile-screen { display: block; }
.bel-qa-screen--s03 { padding: 0; min-width: 0; }
.bel-profile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-base);
}
.bel-profile__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-profile__title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.bel-profile__body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-3) var(--page-margin) var(--space-8);
  min-width: 0;
}
.bel-profile__tabs { min-width: 0; }
.bel-profile__upgrade {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.bel-profile__upgrade-title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.bel-profile__upgrade-body {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.bel-profile__upgrade-body strong { color: var(--text-primary); }
.bel-profile__upgrade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bel-profile__card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.bel-profile__banner {
  position: relative;
  aspect-ratio: 3 / 1;
  min-height: 96px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent-gold) 30%, var(--surface-1)));
  display: grid;
  place-items: center;
}
.bel-profile__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bel-profile__banner-emoji { font-size: var(--fs-display); line-height: 1; }
.bel-profile__banner bel-icon-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}
.bel-profile__ava {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * var(--space-8));
  position: relative;
  z-index: 1;
}
.bel-profile__ava .bel-avatar__ring {
  width: 96px;
  height: 96px;
  box-shadow: 0 0 0 4px var(--bg-base);
}
.bel-profile__ava .bel-avatar__fallback { font-size: var(--fs-h1); }
.bel-profile__ava .bel-avatar__level {
  right: 2px;
  bottom: 2px;
  height: 22px;
  min-width: 26px;
  font-size: var(--fs-caption);
}
/* An owned frame always shows — generic ring until the host supplies its own art (brief §5). */
.bel-profile__ava[data-frame] .bel-avatar__ring {
  box-shadow: 0 0 0 4px var(--bg-base), 0 0 0 7px var(--accent-gold);
}
.bel-profile__who {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
  text-align: center;
  min-width: 0;
}
.bel-profile__name {
  margin: 0;
  max-width: 100%;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}
.bel-profile__name[data-name-style] {
  background: linear-gradient(90deg, var(--accent-gold), var(--text-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .bel-profile__name[data-name-style] { background: none; color: CanvasText; }
}
.bel-profile__subtitle {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--accent-gold-text);
  overflow-wrap: anywhere;
}
.bel-profile__since,
.bel-profile__photo-note {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.bel-profile__edits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.bel-profile__edit-icon { margin-inline-end: var(--space-1); }
.bel-profile__xp {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
.bel-profile__xp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bel-profile__xp-text {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.bel-profile__quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}
.bel-profile__quick bel-button .bel-button {
  width: 100%;
  white-space: normal;
  height: auto;
  min-height: var(--touch-min);
  padding-block: var(--space-2);
  overflow-wrap: anywhere;
}
.bel-profile__section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.bel-profile__h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}
.bel-profile__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.bel-profile__tile {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  min-width: 0;
}
.bel-profile__tile-k {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.bel-profile__tile-v {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}
.bel-profile__games {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bel-profile__game { display: grid; gap: var(--space-1); }
.bel-profile__game-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-small);
}
.bel-profile__game-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-profile__game-score { color: var(--text-secondary); white-space: nowrap; }
.bel-profile__hist-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bel-profile__hist {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
.bel-profile__hist-icon { display: grid; place-items: center; color: var(--text-secondary); }
.bel-profile__hist.is-win .bel-profile__hist-icon { color: var(--accent-gold); }
.bel-profile__hist-text { display: grid; gap: 2px; min-width: 0; }
.bel-profile__hist-title { font-size: var(--fs-small); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-profile__hist-date { font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-profile__hist-delta { font-weight: var(--fw-bold); white-space: nowrap; }
.bel-profile__hist.is-win .bel-profile__hist-delta { color: var(--success-text, var(--text-primary)); }
.bel-profile__hist.is-loss .bel-profile__hist-delta { color: var(--danger-text, var(--text-primary)); }
.bel-profile__skel-banner { min-height: 96px; }
.bel-profile__skel-banner bel-skeleton,
.bel-profile__skel-avatar bel-skeleton,
.bel-profile__skel-row bel-skeleton,
.bel-profile__skel-banner .bel-skeleton,
.bel-profile__skel-avatar .bel-skeleton,
.bel-profile__skel-row .bel-skeleton { width: 100%; height: 100%; border-radius: inherit; }
.bel-profile__skel-avatar {
  width: 96px;
  height: 96px;
  margin: calc(-1 * var(--space-8)) auto 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.bel-profile__skel-row { height: 72px; border-radius: var(--radius-md); overflow: hidden; }
@media (min-width: 430px) {
  .bel-profile__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .bel-profile__body { max-width: var(--content-max-tab); margin-inline: auto; width: 100%; }
}


/* ---- S05 Приятели (M5 brief §9: LeaderboardRow geometry, one column, content max 720 from 768) ---- */
bel-friends-screen { display: block; }
.bel-qa-screen--s05 { padding: 0; min-width: 0; }
.bel-friends { display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); }
.bel-friends__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-friends__title { margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-friends__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--page-margin) var(--space-8); min-width: 0; }
.bel-friends__stale { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-friends__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bel-friend {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) var(--touch-min);
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
.bel-friend--skel { display: block; min-height: 72px; }
.bel-friend--skel .bel-skeleton { width: 80%; height: 14px; margin: var(--space-4) auto; }
.bel-friend__avatar { display: flex; align-items: center; justify-content: center; }
.bel-friend__who { display: grid; gap: 2px; min-width: 0; }
/* S05-06: one ink for every name (OPD-M5-8); UGC wraps, never truncates (§11.1) */
.bel-friend__name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.bel-friend__presence { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-friend__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-muted); flex: 0 0 8px; }
.bel-friend__presence--online .bel-friend__dot { background: var(--action-play); }
.bel-friend__presence--in_game .bel-friend__dot { background: var(--accent-gold); }
.bel-friend__presence--offline .bel-friend__dot { background: var(--text-muted); }
.bel-friends__sheet { display: grid; gap: var(--space-2); }
.bel-friends__sheet bel-button .bel-button { width: 100%; justify-content: flex-start; min-height: var(--touch-min); white-space: normal; height: auto; }
.bel-friends__sheet .bel-icon { margin-inline-end: var(--space-2); }
.bel-friends__confirm { display: grid; gap: var(--space-3); }
.bel-friends__confirm-text { margin: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.bel-friends__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bel-friends__confirm-actions bel-button .bel-button { white-space: normal; height: auto; min-height: var(--touch-min); }
@media (min-width: 768px) {
  .bel-friends__body { max-width: var(--content-max-tab); margin-inline: auto; width: 100%; }
}


/* ---- S06 Известия (M5 brief §10: row = avatar 40 / body / delete, one column, content max 720 from 768) ---- */
bel-notifications-screen { display: block; }
.bel-qa-screen--s06 { padding: 0; min-width: 0; }
.bel-notifs { display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); }
.bel-notifs--embedded { background: transparent; }
.bel-notifs__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-notifs__title { margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-notifs__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--page-margin) 0; }
.bel-notifs--embedded .bel-notifs__actions { padding-inline: 0; }
.bel-notifs__actions bel-button .bel-button { white-space: normal; height: auto; min-height: var(--touch-min); }
.bel-notifs__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--page-margin) var(--space-8); min-width: 0; }
.bel-notifs--embedded .bel-notifs__body { padding-inline: 0; padding-bottom: var(--space-3); }
.bel-notifs__stale { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-notifs__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bel-notif {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) var(--touch-min);
  align-items: start;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
/* §13.2: unread = tint + a filled dot + the weight change below (+ hidden „Непрочетено") — never colour alone */
.bel-notif--unread { background: var(--surface-2); }
.bel-notif__unread { position: absolute; inset: var(--space-2) auto auto var(--space-2); width: 8px; height: 8px; border-radius: var(--radius-full); background: transparent; }
.bel-notif--unread .bel-notif__unread { background: var(--accent-gold); }
.bel-notif--skel { display: block; min-height: 72px; }
.bel-notif--skel .bel-skeleton { width: 80%; height: 14px; margin: var(--space-4) auto; }
.bel-notif__avatar { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.bel-notif__avatar--type { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-secondary); }
.bel-notif__avatar--type .bel-icon { width: 20px; height: 20px; }
.bel-notif__body { display: grid; gap: var(--space-1); min-width: 0; }
.bel-notif__line { margin: 0; font-size: var(--fs-body); color: var(--text-primary); overflow-wrap: anywhere; }
/* S06-03: UGC wraps, never truncates (§11.1); the name is one ink; unread rows carry the weight */
.bel-notif__name { font-weight: var(--fw-semibold); color: var(--text-primary); }
.bel-notif--unread .bel-notif__event { font-weight: var(--fw-semibold); }
.bel-notif__award { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.bel-notif__currency { width: 16px; height: 16px; vertical-align: -3px; }
.bel-notif__amount { font-variant-numeric: tabular-nums; }
.bel-notif__meta { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-notif__type .bel-icon { width: 16px; height: 16px; display: block; }
.bel-notif__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.bel-notif__actions bel-button .bel-button { white-space: normal; height: auto; min-height: var(--touch-min); }
.bel-notifs__confirm { display: grid; gap: var(--space-3); }
.bel-notifs__confirm-text, .bel-notifs__confirm-what { margin: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.bel-notifs__confirm-what { color: var(--text-secondary); }
.bel-notifs__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bel-notifs__confirm-actions bel-button .bel-button { white-space: normal; height: auto; min-height: var(--touch-min); }
@media (min-width: 768px) {
  .bel-notifs__body, .bel-notifs__actions { max-width: var(--content-max-tab); margin-inline: auto; width: 100%; }
}


/* ---- S04 Мисии (M6 brief §9: card = icon 24 / body, one column, content max 720 from 768) ---- */
bel-missions-screen { display: block; }
.bel-qa-screen--s04 { padding: 0; min-width: 0; }
.bel-missions { display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); }
.bel-missions__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-missions__title { margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-missions__tabs { padding: var(--space-2) var(--page-margin) 0; }
.bel-missions__timer { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--page-margin) 0; font-size: var(--fs-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bel-missions__timer .bel-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.bel-missions__celebrate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) var(--page-margin) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-primary); font-weight: var(--fw-semibold); }
.bel-missions__celebrate .bel-icon { width: 20px; height: 20px; color: var(--success); }
.bel-missions__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--page-margin) var(--space-8); min-width: 0; }
.bel-missions__stale { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-missions__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bel-mission {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
.bel-mission--skel { display: block; min-height: 120px; }
.bel-mission--skel .bel-skeleton { width: 80%; height: 14px; margin: var(--space-4) auto; }
.bel-mission__icon { display: flex; align-items: flex-start; justify-content: center; color: var(--text-secondary); padding-top: 2px; }
.bel-mission__icon .bel-icon { width: 24px; height: 24px; }
.bel-mission__body { display: grid; gap: var(--space-2); min-width: 0; }
/* S04-09/10 wrap, never truncate (§11.1) */
.bel-mission__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.bel-mission__condition { margin: 0; font-size: var(--fs-body); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-mission__progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.bel-mission__progress bel-progress-bar { display: block; min-width: 0; }
.bel-mission__counter { font-size: var(--fs-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bel-mission__reward { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--fs-body); color: var(--text-primary); }
.bel-mission__reward-value { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); white-space: nowrap; }
.bel-mission__currency { width: 18px; height: 18px; }
.bel-mission__amount { font-variant-numeric: tabular-nums; }
.bel-mission__action { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.bel-mission__action bel-button .bel-button { white-space: normal; height: auto; min-height: var(--touch-min); }
.bel-mission__claimed { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); font-size: var(--fs-body); color: var(--text-secondary); }
.bel-mission__claimed .bel-icon { width: 18px; height: 18px; color: var(--success); }
@media (min-width: 768px) {
  .bel-missions__body, .bel-missions__tabs, .bel-missions__timer, .bel-missions__celebrate { max-width: var(--content-max-tab); margin-inline: auto; width: 100%; }
}


/* ---- NOV02 Бонуси (M6 brief §8: one card, seven tiles that fit at 320 and never scroll, content max 720 from 768) ---- */
bel-bonus-screen { display: block; }
.bel-qa-screen--nov02 { padding: 0; min-width: 0; }
.bel-bonus { display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); }
.bel-bonus__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-bonus__title { margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-bonus__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--page-margin) var(--space-8); min-width: 0; }
.bel-bonus-card { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-1); border-radius: var(--radius-md); min-width: 0; }
.bel-bonus-card--skel { min-height: 200px; }
.bel-bonus-card--skel .bel-skeleton { width: 80%; height: 14px; margin: var(--space-2) auto; }
.bel-bonus-card__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.bel-bonus-card__title .bel-icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent-gold); }
/* NOV02-08: seven equal columns, no scroll — the strip explains the ladder, so all of it is on screen at 320 */
.bel-bonus__strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
/* the framed day carries its reward, so it takes two of eight columns (≈72 px at 320) — still seven tiles, no scroll */
.bel-bonus__strip:has(.bel-bonus__tile--active) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.bel-bonus__tile--active { grid-column: span 2; }
.bel-bonus__tile {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-1) 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.bel-bonus__tile-day { display: flex; align-items: center; justify-content: center; min-height: 20px; font-weight: var(--fw-semibold); }
.bel-bonus__tile-day .bel-icon { width: 16px; height: 16px; }
/* §13.2: taken = check glyph + hidden word + tone; active = frame + label + reward — never colour alone */
.bel-bonus__tile--taken { color: var(--success); }
.bel-bonus__tile--active { border-color: var(--accent-gold); color: var(--text-primary); background: var(--surface-1); }
.bel-bonus__tile-reward { display: grid; gap: 1px; justify-items: center; }
/* below 430 only the framed tile carries its amount; the seven rewards are the compact ladder list under the strip */
.bel-bonus__tile-reward--wide { display: none; }
.bel-bonus__ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-bonus__ladder-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bel-bonus__ladder-day { flex: 0 0 3.2em; }
.bel-bonus__ladder .bel-bonus__reward { flex-wrap: nowrap; gap: var(--space-3); }
.bel-bonus__ladder .bel-bonus__amount { font-size: var(--fs-caption); font-weight: var(--fw-regular); }
.bel-bonus__ladder .bel-bonus__currency { width: 14px; height: 14px; flex-basis: 14px; }
@media (min-width: 430px) {
  .bel-bonus__tile-reward--wide { display: grid; }
  .bel-bonus__ladder { display: none; }
}

.bel-bonus__tile-reward .bel-bonus__reward { display: grid; gap: 1px; justify-items: center; }
.bel-bonus__reward { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bel-bonus__amount { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-primary); }
.bel-bonus__currency { width: 16px; height: 16px; flex: 0 0 16px; }
/* inside a tile the glyph sits above the number and a long amount wraps — ~37 px per tile at 320, never a clipped digit */
.bel-bonus__tile .bel-bonus__amount { flex-direction: column; gap: 0; font-size: 11px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; text-align: center; min-width: 0; max-width: 100%; }
.bel-bonus__tile .bel-bonus__currency { width: 12px; height: 12px; flex-basis: 12px; }
.bel-bonus__tile .bel-bonus__num { max-width: 100%; }
.bel-bonus__rule, .bel-bonus__hint, .bel-bonus__stale { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-bonus__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.bel-bonus__actions bel-button .bel-button { white-space: normal; height: auto; min-height: var(--touch-min); }
.bel-bonus__settled { display: grid; gap: var(--space-2); padding-top: var(--space-1); }
/* NOV02 free-spin row: a door to #/wheel, and the one countdown the pair shares. Same containment rule the store
   card learned in 0.5.2 — nothing inside a card may widen it. */
.bel-bonus-card--spin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.bel-bonus__spin-action { display: flex; min-width: 0; }
.bel-bonus__spin-action bel-button { flex: 1 1 auto; min-width: 0; }
.bel-bonus__spin-action bel-button .bel-button { min-height: var(--touch-min); }
.bel-bonus__spin-done { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; min-height: var(--touch-min); font-size: var(--fs-body); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-bonus__spin-done .bel-icon { width: 18px; height: 18px; color: var(--success); }
.bel-bonus__spin-unavailable { margin: 0; min-height: var(--touch-min); display: flex; align-items: center; font-size: var(--fs-body); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-bonus__reset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-bonus__reset .bel-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.bel-bonus__claimed { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); font-size: var(--fs-body); color: var(--text-secondary); }
.bel-bonus__claimed .bel-icon { width: 18px; height: 18px; color: var(--success); }
.bel-bonus__next { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bel-bonus__next .bel-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.bel-bonus__celebrate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) var(--page-margin) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-primary); font-weight: var(--fw-semibold); }
.bel-bonus__celebrate .bel-icon { width: 20px; height: 20px; color: var(--success); }
@media (min-width: 768px) {
  .bel-bonus__body, .bel-bonus__celebrate { max-width: var(--content-max-tab); margin-inline: auto; width: 100%; }
  .bel-bonus__tile .bel-bonus__amount { font-size: var(--fs-caption); }
}


/* ---- NOV01 Магазин (M7 brief §9: 2-up below 430, 3-up to 768, 4-up above; content max 720; the slot is the axis) ---- */
bel-store-screen { display: block; }
.bel-qa-screen--nov01 { padding: 0; min-width: 0; }
.bel-store { display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); }
.bel-store__head {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--page-margin);
}
.bel-store__title { margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-store__tabs { padding: var(--space-2) var(--page-margin) 0; }
.bel-store__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--page-margin) var(--space-3); min-width: 0; }
.bel-store__stale { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
/* OPD-M7-9: one line for the group, with its retry. It states the consequence — never a cause it does not know. */
.bel-store__ownership-stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-primary); font-size: var(--fs-body); overflow-wrap: anywhere; }
.bel-store__ownership-stale bel-button { flex: 0 0 auto; min-width: 0; }
/* OPD-M7-7: why the confirmation came back. The current price is in the sentence below it; the old one is nowhere. */
.bel-store__price-changed { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.bel-store__note { margin: 0; padding: 0 var(--page-margin) var(--space-8); font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-store__confirm .bel-store__note { padding: 0; }
.bel-store__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
/* `minmax(0, 1fr)`, not the default `auto`: an auto track is sized to its widest item, and `.bel-store__worn` is a
   non-shrinkable inline-flex. At 320 x xl „Сложено" made the inner track wider than the card's content box, so the
   track — and every child stretched to it — overran the 12 px padding by 14.66 px. The card's width is set by the
   outer grid; nothing inside it may widen it. */
.bel-store-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); background: var(--surface-1); border-radius: var(--radius-md); min-width: 0; }
.bel-store-item--skel { min-height: 180px; }
.bel-store-item--skel .bel-skeleton { width: 80%; height: 14px; margin: var(--space-4) auto; }
.bel-store-item--worn { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
/* the card tap previews (a real button); the buy is a separate step */
.bel-store-item__open { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.bel-store-item__open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.bel-store-item__name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.bel-store-item__owned { font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-store-item__free { font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-store-item__action { display: flex; min-width: 0; }
/* The action carries the blocked reason when the shop is offline or rate-limited, and that label is much longer
   than „Сложи". A flex item keeps `min-width: auto`, so it refuses to shrink below its content and overran the
   card by 7 px at 320. It must shrink, and the words must be allowed to break. */
.bel-store-item__action bel-button { flex: 1 1 auto; min-width: 0; }
/* The scoped exception this used to carry is now the named `fill` variant (§12.1) chosen on the button itself. */
.bel-store-item__action bel-button .bel-button { min-height: var(--touch-min); }
.bel-store__preview { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-primary); overflow: hidden; }
.bel-store__preview--card { aspect-ratio: 4 / 3; width: 100%; }
.bel-store__preview--large { aspect-ratio: 4 / 3; width: 100%; max-height: 220px; }
.bel-store__preview--cardBack.bel-store__preview--card, .bel-store__preview--cardBack.bel-store__preview--large { aspect-ratio: 3 / 4; max-width: 160px; margin: 0 auto; }
.bel-store__preview--emoji { font-size: 40px; }
.bel-store__preview--text { font-size: var(--fs-h3); font-weight: var(--fw-semibold); padding: var(--space-2); text-align: center; overflow-wrap: anywhere; }
.bel-store__preview--none .bel-icon { width: 28px; height: 28px; color: var(--text-secondary); }
/* §13.2: glyph + tabular number + hidden noun — never colour alone */
/* The number never breaks (`nowrap` on the amount), but the glyph may drop below it rather than push the price
   past the card's edge — a price that overruns its card is the one thing this row must never do. */
.bel-store__price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-primary); }
.bel-store__price .bel-store__amount { white-space: nowrap; }
.bel-store__currency { width: 16px; height: 16px; flex: 0 0 16px; }
.bel-store__worn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; min-height: var(--touch-min); font-size: var(--fs-body); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-store__worn .bel-icon { width: 18px; height: 18px; color: var(--success); }
.bel-store__short { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: var(--fs-caption); color: var(--text-secondary); }
.bel-store__preview-body { display: grid; gap: var(--space-3); }
.bel-store__preview-name { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bel-store__preview-price { margin: 0; font-size: var(--fs-body); }
.bel-store__preview-action { display: grid; gap: var(--space-2); }
.bel-store__preview-action bel-button .bel-button { width: 100%; white-space: normal; overflow-wrap: anywhere; height: auto; min-height: var(--touch-min); }
.bel-store__insufficient { display: grid; gap: var(--space-2); }
.bel-store__short-title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); }
.bel-store__short-detail, .bel-store__paths-title { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.bel-store__paths { display: grid; gap: var(--space-2); }
.bel-store__paths bel-button .bel-button { width: 100%; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; height: auto; min-height: var(--touch-min); }
.bel-store__paths .bel-icon { margin-inline-end: var(--space-2); }
.bel-store__confirm { display: grid; gap: var(--space-3); }
.bel-store__confirm-text, .bel-store__confirm-after { margin: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.bel-store__confirm-after { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.bel-store__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bel-store__confirm-actions bel-button .bel-button { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: var(--touch-min); }
.bel-store__celebrate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) var(--page-margin) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-primary); font-weight: var(--fw-semibold); }
.bel-store__celebrate .bel-icon { width: 20px; height: 20px; color: var(--success); }
.bel-store__celebrate-item { display: inline-flex; align-items: center; gap: var(--space-2); }
/* The toast's exit. `--dur-ui` is already 120ms under data-motion=off / prefers-reduced-motion, so reduced motion
   drops the movement while the 2.5 s timeline (owned by the element, not by CSS) is unchanged. */
.bel-store__celebrate-close { margin-inline-start: auto; }
.bel-store__celebrate { opacity: 1; transition: opacity var(--dur-ui) ease-out; }
.bel-store__celebrate.is-leaving { opacity: 0; }
html[data-motion="off"] .bel-store__celebrate { transition-duration: 120ms; }
@media (min-width: 430px) {
  .bel-store__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .bel-store__body, .bel-store__tabs, .bel-store__note, .bel-store__celebrate { max-width: var(--content-max-tab); margin-inline: auto; width: 100%; }
  .bel-store__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bel-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--fw-bold);
}

.bel-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
}

.bel-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-screenshot="1"],
html[data-screenshot="1"] * {
  caret-color: transparent;
  animation: none;
  animation-duration: 0ms;
  transition-duration: 0ms;
}

html[data-screenshot="1"] .bel-skeleton {
  animation: none;
  background: var(--surface-3);
}
/*$vite$:1*/