/* Спільне для обох тем: кнопка перемикання і перехід між темами.
 *
 * Вигляд самих тем живе окремо: сучасна – style.css і arcade.css (їх не
 * чіпаємо), середньовічна – theme-medieval.css, де кожне правило стоїть під
 * html[data-theme="medieval"]. Тут лише те, що однаково потрібне обом.
 */

/* Нативні контроли (прапорці, списки, смуги прокрутки) – у тон теми. Для
   середньовічної теми light стоїть у theme-medieval.css. */
html[data-theme="modern"] { color-scheme: dark; }

/* ---------- кнопка теми ----------
   У сучасній темі це звичайна .icon-btn (style.css), але щит не крутиться, як
   шестерня налаштувань, а перевертається монетою – так само, як у середньовічній. */
.theme-toggle .ico { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.theme-toggle:hover .ico,
.theme-toggle:focus-visible .ico { transform: perspective(60px) rotateY(180deg); }
/* Поки тема перемикається, щит обертається безперервно, а кнопка не приймає натискань. */
.theme-toggle.is-switching { pointer-events: none; }
.theme-toggle.is-switching .ico { animation: theme-flip .9s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes theme-flip {
  from { transform: perspective(60px) rotateY(0deg); }
  to   { transform: perspective(60px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .ico { transition: none; }
  .theme-toggle:hover .ico, .theme-toggle:focus-visible .ico { transform: none; }
  .theme-toggle.is-switching .ico { animation: none; }
}

/* ---------- перехід між темами ----------
   Під data-vt="theme" (хвиля) і "theme-fade" (кроссфейд) усе рухає theme.js
   через WAAPI: стандартні морф групи й кроссфейд браузера вимкнені, щоб старий
   знімок компонента стояв на своєму старому місці, а новий – на новому.
   Переходи між сторінками (data-vt=push|pop|left|right) цього не торкаються. */
html[data-vt^="theme"]::view-transition-group(*) { animation: none; }
html[data-vt^="theme"]::view-transition-old(*),
html[data-vt^="theme"]::view-transition-new(*) { animation: none; transform-origin: 0 0; }
/* Полотно з частинками – над усіма знімками. */
html[data-vt="theme"]::view-transition-group(tt-fx) { z-index: 1000; }
/* На час хвилі живі знімки нової теми мають стояти нерухомо: CSS-переходи
   кольорів, що стартували б від самої зміни теми, і скляний backdrop-filter
   (його GPU перераховує щокадру, бо під склом рухається хвиля) вимкнені.
   Старий знімок уже зроблений зі склом; після хвилі воно вертається. */
html.tt-still *, html.tt-still *::before, html.tt-still *::after {
  transition: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Арка навколо постера тайтла – обгортка лише для середньовічної теми
   (theme-medieval.css). Тут вона не має власного прямокутника, тож постер і
   заглушка лишаються прямими нащадками .detail-head, як до неї. */
.poster-arch { display: contents; }

/* Опис гри зі Steam: відео й картинки приходять з атрибутом width (600-616px) і
   у вужчій колонці залазили під особливості праворуч. Тепер вони не ширші за
   колонку, а задовгі слова й посилання переносяться. */
.gabout :is(img, video) { max-width: 100%; height: auto; }
.gabout { overflow-wrap: anywhere; }