/* Индустриальный визуальный слой. Утверждённые карточки главной не перестраиваем. */
body.reference-ui {
  --ufg-motion-accent: var(--visual-cyan, #63f7f0);
  --ufg-motion-ease: cubic-bezier(.2,.75,.2,1);
  --ufg-motion-fast: 220ms;
}

/* Мягкий свет за содержимым, без тяжёлого canvas, курсорного трекинга и звуков. */
.reference-ui .rf-shell {
  box-shadow: 0 22px 80px rgba(0,0,0,.25), 0 0 56px rgba(99,247,240,.025);
}
.reference-ui .rf-hero-copy h1,
.reference-ui .games-hero-copy h1 { text-wrap: balance; letter-spacing: -.045em; }
.reference-ui .section-intro,
.reference-ui .games-intro { text-wrap: pretty; }
.reference-ui .rf-section-head h2,
.reference-ui .games-section h2 { letter-spacing: -.035em; }
.reference-ui .section-kicker,
.reference-ui .rf-kicker { color: var(--ufg-motion-accent); }
.reference-ui .btn,
.reference-ui .store-tab,
.reference-ui .rf-category {
  transition: border-color var(--ufg-motion-fast) ease,
    box-shadow var(--ufg-motion-fast) ease, background-color var(--ufg-motion-fast) ease;
}
.reference-ui :is(.btn,.store-tab,.rf-category):focus-visible {
  outline: 2px solid var(--ufg-motion-accent); outline-offset: 4px;
}
.reference-ui .section-link { text-underline-offset: 5px; transition: color var(--ufg-motion-fast) ease; }
.reference-ui .rf-hero-media,
.reference-ui .games-hero-media { overflow: clip; }
.reference-ui.ufg-motion-enabled .rf-hero-media img,
.reference-ui.ufg-motion-enabled .games-hero-media img { will-change: transform; }

/* Мерч — предметные изображения на прозрачном фоне, не знак вместо товара. */
.reference-ui.shop-page .shop-grid.is-merch {
  grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px;
}
.reference-ui.shop-page .merch-card {
  display: flex; flex-direction: column; min-height: 0; position: relative;
  border-color: rgba(99,247,240,.2); background: transparent;
}
.reference-ui.shop-page .merch-card .merch-art {
  height: auto; min-height: 0; aspect-ratio: 1; padding: 24px; overflow: clip; background: transparent;
}
.reference-ui.shop-page .merch-art img {
  display: block; position: static; width: 100%; height: 100%; object-fit: contain;
  transition: transform 450ms var(--ufg-motion-ease);
}
.reference-ui.shop-page .merch-card .product-body {
  flex: 1; padding: 0 24px 24px; justify-content: flex-start;
}
.reference-ui.shop-page .merch-card .product-body h3 {
  font-size: clamp(20px,1.7vw,25px); line-height: 1.25; margin: 14px 0 12px;
}
.reference-ui.shop-page .merch-card .development-pill {
  margin: 0 0 16px; color: var(--ufg-motion-accent); background: transparent;
}
.reference-ui.shop-page .merch-card .merch-preview-note { font-size: 11px; line-height: 1.5; margin-top: 12px; }
.reference-ui.shop-page .merch-card .product-buy { margin-top: auto; padding-top: 24px; flex-direction: column; align-items: stretch; }
.reference-ui.shop-page .merch-card .product-body { position: static; }
/* Одна настоящая ссылка покрывает карточку; вложенных кнопок и лишних tab-stop нет. */
.reference-ui.shop-page .merch-card-link::after { content: ""; position: absolute; inset: 0; }
.reference-ui.shop-page .merch-card-link { clip-path: none; }
.reference-ui.shop-page .merch-card:focus-within { outline: 2px solid var(--ufg-motion-accent); outline-offset: -3px; }
/* Filter и transform создают новый containing block и сужают область ссылки. */
.reference-ui.shop-page .merch-card-link:hover { transform: none; filter: none; }
.reference-ui.shop-page .merch-availability {
  border-top: 1px solid rgba(99,247,240,.16); padding-top: 14px; width: 100%;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .reference-ui .btn:hover { box-shadow: 0 0 24px rgba(99,247,240,.12); }
  .reference-ui.shop-page .merch-card:hover { border-color: var(--ufg-motion-accent); }
  .reference-ui.shop-page .merch-card:hover .merch-art img { transform: translateY(-4px) scale(1.025); }
}
@media (max-width:1180px) {
  .reference-ui.shop-page .shop-grid.is-merch { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .reference-ui.shop-page .shop-grid.is-merch { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .reference-ui.shop-page .merch-card .merch-art { max-height: 330px; width: 100%; padding: 22px; }
}
@media (prefers-reduced-motion:reduce) {
  /* Второй защитный слой на случай отмены движения во время отрисовки кадра. */
  .reference-ui :is(.rf-hero-copy,.games-hero-copy) > *,
  .reference-ui :is(.rf-section-head,.home-section-head,.games-section > .section-head),
  .reference-ui :is(.rf-hero-media,.games-hero-media) img {
    opacity: 1 !important; transform: none !important; will-change: auto;
  }
  .reference-ui .merch-art img { transform: none !important; transition: none !important; }
  .reference-ui :is(.btn,.store-tab,.rf-category,.section-link) { transition: none; }
}