/* Середньовічна тема «Аніме Це Кайф»: інструмент із оливковим корпусом, зеленою
 * емалевою плитою, коричневими й кремовими клавішами та LCD-віконцем.
 * Джерело – дизайн-система (design/: README, tokens.json, components/bundle.css).
 *
 * Кожне правило тут стоїть під html[data-theme="medieval"], токени теж: частина
 * змінних збігається з сучасною темою назвою (--radius-sm) і різниться значенням,
 * тож на голому :root їх не оголошуємо. Сучасна тема (style.css, arcade.css) від
 * цього файлу не залежить. Виняток – @font-face і @keyframes: вони не мають
 * селектора, а шрифти браузер вантажить лише тоді, коли тема їх справді просить.
 *
 * Розмітка одна на обидві теми. Елементи, яких бракувало середньовічним
 * компонентам (решітка динаміка, знак ¶, буквиця, світлодіод…), стоять у
 * розмітці з атрибутом hidden – у сучасній темі їх нема, тут їм дає display
 * відповідне правило.
 */

/* ==================== Шрифти ==================== */
@font-face { font-family: "UnifrakturMaguntia"; src: url("/static/fonts/UnifrakturMaguntia-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ponomar"; src: url("/static/fonts/Ponomar-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Grenze Gotisch"; src: url("/static/fonts/GrenzeGotisch-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Monomakh"; src: url("/static/fonts/Monomakh-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kaif LCD"; src: url("/static/fonts/KaifLCD-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ==================== Токени ==================== */
html[data-theme="medieval"] {
  color-scheme: light;

  /* корпус */
  --chassis: #bfad72;
  --chassis-lit: #d3c38c;
  --chassis-shade: #a18f55;
  --hairline: #8a7845;
  /* плита */
  --panel: #25322b;
  --enamel: #1d2824;
  --enamel-side: #0f1613;
  --grille: #3b2319;
  /* клавіші й пергамент */
  --key: #4a2620;
  --key-side: #2b1511;
  --vellum: #e8dfc8;
  --vellum-side: #b9ab8b;
  --vermilion: #c4321a;
  --vermilion-side: #86200f;
  --on-vermilion: #fff8ea;
  /* дисплей */
  --display: #1b1514;
  --display-dim: #3a2c28;
  --lcd: #ff4a2e;
  --amber: #e8892f;
  /* чорнило */
  --ink: #2a1a14;
  --ink-muted: #45321e;
  --rubric: #6c1607;
  --on-dark-muted: #b9ad90;
  --led-on: #f2461c;
  --led-off: #5a5047;
  /* фарби ілюмінування: орнамент, золота облямівка, вікно за карткою входу */
  --gilt: #d6a53c;
  --lapis: #2e4d8c;
  --verdigris: #2f7a68;
  --stone: #cbbf9f;

  --shadow-drop: 0 6px 10px -5px rgba(28, 14, 6, .55);
  --shadow-lift: 0 16px 26px -14px rgba(28, 14, 6, .65);
  --shadow-plate: inset 0 2px 8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .45);
  --shadow-focus: 0 0 0 2px #e8dfc8, 0 0 0 4px #2a1a14;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --layout-max: 1320px;
  --poster-min: 158px;
  --key-height: 40px;

  --font-textura: "UnifrakturMaguntia", "Ponomar", serif;
  --font-book: "Grenze Gotisch", "Monomakh", serif;
  --font-lcd: "Kaif LCD", "Monomakh", monospace;

  /* Змінні сучасної теми, на які спираються правила style.css. Середньовічні
     правила нижче перекривають вигляд кожного класу, а це – запобіжник для
     того, що перекрити забули: воно хоча б не світитиме темним склом. */
  --bg: var(--chassis);
  --bg-1: var(--chassis-lit);
  --bg-soft: var(--chassis-lit);
  --bg-card: var(--vellum);
  --bg-hi: var(--vellum);
  --line: var(--hairline);
  --line-soft: var(--vellum-side);
  --text: var(--ink);
  --text-dim: var(--ink-muted);
  --text-mut: var(--ink-muted);
  --accent: var(--vermilion);
  --accent-2: var(--vermilion);
  --accent-dim: var(--rubric);
  --grad: linear-gradient(var(--vermilion), var(--vermilion));
  --glow: var(--shadow-lift);
  --shadow: var(--shadow-lift);
  --radius: var(--radius-md);
  --maxw: var(--layout-max);
}

/* ==================== Основа ==================== */
/* Тло сторінки – папір на самому <html> (розділ «Фактури й орнамент» нижче),
   тож body прозорий: інакше він накрив би і папір, і ромбову сітку body::before. */
html[data-theme="medieval"] body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-book);
  font-weight: 500;
  font-synthesis: none;
}
html[data-theme="medieval"] ::selection { background: rgba(196, 50, 26, .28); }
html[data-theme="medieval"] * { scrollbar-color: var(--hairline) transparent; }
html[data-theme="medieval"] *::-webkit-scrollbar-thumb { background: var(--hairline); }
/* Жирного накреслення в темі немає: наголос – колір рубрики або буквиця. Сучасні
   правила ставлять 600-800 направо й наліво, тож вага скидається для всіх разом
   (правила style.css із двома класами перебиває окремо кожен компонент нижче). */
html[data-theme="medieval"] * { font-weight: 500; }
/* Іконки, що стоять прямо в index.html, намальовані сучасним набором, доки
   app.js не перемалює їх у середньовічні (retheme). Браузер може встигнути
   показати сторінку раніше – тоді краще порожнє місце, ніж чужий знак. */
html[data-theme="medieval"] svg.ico[data-ico]:not(.kf-icon) { visibility: hidden; }

/* ==================== Топбар (Topbar, Plate, Wordmark, Tabs) ==================== */
/* Суцільна зелена плита з чотирма гвинтами замість скла з #glass-distortion.
   Гвинти – фонові радіальні градієнти, окремих елементів їм не треба. */
html[data-theme="medieval"] .topbar {
  margin: 10px 10px 0;
  padding: 10px 26px;
  min-height: 64px;
  gap: var(--space-4);
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--vellum);
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 10px 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--enamel-side), var(--shadow-lift);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Назва сайту: текстура, перша літера кіновар'ю, три піксельні крапки. Блок, а
   не flex, – інакше ::first-letter не працює. */
html[data-theme="medieval"] .brand {
  display: block;
  white-space: nowrap;
  font-family: var(--font-textura);
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--vellum);
  background: none;
  -webkit-text-fill-color: currentColor;
}
html[data-theme="medieval"] .brand::first-letter { color: var(--vermilion); -webkit-text-fill-color: var(--vermilion); }
html[data-theme="medieval"] .brand:hover { filter: none; transform: none; }
html[data-theme="medieval"] .brand span {
  margin-left: .24em;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
html[data-theme="medieval"] .brand .brand-dots {
  display: inline-grid;
  grid-template-columns: repeat(3, 4px);
  gap: 2px;
  margin-left: 10px;
  vertical-align: top;
  margin-top: 7px;
}
html[data-theme="medieval"] .brand-dots i { width: 4px; height: 4px; background: var(--vellum); }
html[data-theme="medieval"] .brand-dots i:nth-child(1) { grid-column: 1; grid-row: 2; }
html[data-theme="medieval"] .brand-dots i:nth-child(2) { grid-column: 2; grid-row: 1; }
html[data-theme="medieval"] .brand-dots i:nth-child(3) { grid-column: 3; grid-row: 2; background: var(--vermilion); }

/* Вкладки розділів: таблички-легенди в утопленій рамці; активна – кіновар.
   Рухома пігулка з бризками – ефект сучасного скла, тут її нема. */
html[data-theme="medieval"] .nav {
  gap: var(--space-1);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] :is(.nav-pill, .nav-goo) { display: none; }
html[data-theme="medieval"] .nav-btn {
  gap: 7px;
  padding: 6px 14px 7px;
  border-radius: var(--radius-xs);
  color: var(--on-dark-muted);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  transition: background .15s ease, color .15s ease;
}
html[data-theme="medieval"] .nav-btn:hover { color: var(--vellum); background: var(--enamel); }
html[data-theme="medieval"] .nav-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
html[data-theme="medieval"] .nav-btn.active {
  color: var(--on-vermilion);
  background: var(--vermilion);
  box-shadow: 0 2px 0 var(--vermilion-side);
}
/* Лічильник новинок – число пікселями на склі дисплея (Badge lcd). */
html[data-theme="medieval"] :is(.nav-badge, .nav-btn.active .nav-badge) {
  min-width: 0;
  height: auto;
  margin: -2px 0;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  color: var(--lcd);
  background-color: var(--display);
  font-family: var(--font-lcd);
  font-size: 26px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: var(--shadow-plate);
  text-shadow: 0 0 6px rgba(255, 74, 46, .45);
}

/* Праворуч: решітка динаміка, чип граббера, тема, налаштування, «Вийти». */
html[data-theme="medieval"] .topbar-actions { gap: var(--space-3); }
html[data-theme="medieval"] .tb-grille {
  display: block;
  width: 64px;
  height: 32px;
  border-radius: var(--radius-sm);
  background-color: var(--grille);
  background-image: radial-gradient(circle, var(--display) 0 2px, transparent 2.5px);
  background-size: 8px 8px;
  background-position: 2px 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* Чип граббера – бурштиновий процес на склі дисплея (Badge amber). */
html[data-theme="medieval"] .grab-chip {
  gap: var(--space-1);
  padding: 2px 7px 3px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--amber);
  background: var(--display);
  font-family: var(--font-book);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
}
html[data-theme="medieval"] .grab-chip svg { width: 14px; height: 14px; margin: -1px 0; }
/* «Вийти» – тихе текстове посилання (kf-link). */
html[data-theme="medieval"] .logout {
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--on-dark-muted);
  background: none;
  font-family: var(--font-book);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html[data-theme="medieval"] .logout:hover { color: var(--vellum); background: none; border-color: transparent; transform: none; }
html[data-theme="medieval"] .logout:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (max-width: 760px) {
  html[data-theme="medieval"] .topbar { gap: 10px; padding: 10px 14px; }
  html[data-theme="medieval"] .brand { font-size: 24px; line-height: 28px; }
  html[data-theme="medieval"] .brand .brand-dots { margin-top: 5px; margin-left: 8px; }
  html[data-theme="medieval"] .tb-grille { display: none; }
}

/* ==================== Клавіші (Button) ==================== */
/* Кожна дія натискається як фізична клавіша: бічна грань 3px кольором *-side,
   м'яка тінь; при натисканні клавіша опускається на 2px, грань стає 1px.
   Коричнева – звичайні дії, кіновар – одна головна, кремова – тихі й зворотні
   («Назад», видалення), налаштування й тема – квадратні клавіші з іконкою.
   Спільне – під :where(), щоб варіанти нижче перемагали без боротьби за вагу. */
html[data-theme="medieval"] :where(.btn-primary, .btn-ghost, .back, .icon-btn, .wl-add button) {
  --kf-face: var(--key);
  --kf-side: var(--key-side);
  --kf-text: var(--vellum);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--key-height);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--kf-text);
  background: var(--kf-face);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--kf-side), var(--shadow-drop);
  cursor: var(--kf-cursor-hand), pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] :where(.btn-primary, .btn-ghost, .back, .icon-btn, .wl-add button):hover {
  color: var(--kf-text);
  background: var(--kf-face);
  border-color: transparent;
  filter: brightness(1.08);
  transform: none;
}
html[data-theme="medieval"] :where(.btn-primary, .btn-ghost, .back, .icon-btn, .wl-add button):active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 var(--kf-side);
}
html[data-theme="medieval"] :where(.btn-primary, .btn-ghost, .back, .icon-btn, .wl-add button):focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--kf-side), var(--shadow-focus);
}
html[data-theme="medieval"] :where(.btn-primary, .btn-ghost, .back, .icon-btn, .wl-add button):disabled {
  opacity: .5;
  cursor: var(--kf-cursor-quill), default;
  filter: none;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--kf-side), var(--shadow-drop);
}
html[data-theme="medieval"] :where(.btn-primary, .btn-ghost, .back, .icon-btn, .wl-add button) > svg { width: 18px; height: 18px; }
html[data-theme="medieval"] .btn-primary {
  --kf-face: var(--vermilion);
  --kf-side: var(--vermilion-side);
  --kf-text: var(--on-vermilion);
}
/* Тихі й зворотні дії, а також небезпечні: червона клавіша – лише за головною. */
html[data-theme="medieval"] :is(.back, .detail-delete, #cleanup-now) {
  --kf-face: var(--vellum);
  --kf-side: var(--vellum-side);
  --kf-text: var(--ink);
}
html[data-theme="medieval"] .icon-btn {
  width: var(--key-height);
  height: var(--key-height);
  padding: 0;
}

/* ==================== Спільні дрібниці ==================== */
/* Число чи час пікселями на склі дисплея (Badge lcd): лічильники й час зупинки. */
html[data-theme="medieval"] :is(.row-toggle-n, .e-time) {
  display: inline-block;
  min-width: 0;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--lcd);
  background-color: var(--display);
  font-family: var(--font-lcd);
  font-size: 26px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  box-shadow: var(--shadow-plate);
  text-shadow: 0 0 6px rgba(255, 74, 46, .45);
}

/* Ілюмінована буквиця (Initial): кремова плитка, червона літера текстурою,
   подвійна рамка й завитки по кутах. Розмітку ставить initialHtml() в app.js. */
html[data-theme="medieval"] .initial {
  --kf-size: 64px;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--kf-size);
  height: var(--kf-size);
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: var(--vermilion);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
  font-family: var(--font-textura);
  font-size: calc(var(--kf-size) * .66);
  line-height: 1;
  font-weight: 400;
}
html[data-theme="medieval"] .initial::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rubric);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--vellum), inset 0 0 0 3px var(--rubric);
  opacity: .8;
}
html[data-theme="medieval"] .initial-vine { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--rubric); opacity: .55; }
html[data-theme="medieval"] .initial-letter { position: relative; text-shadow: 1px 1px 0 var(--vellum), 2px 2px 0 rgba(127, 27, 12, .35); }

/* Порожній стан (EmptyState): світла ділянка корпусу з пунктирною рамкою. */
html[data-theme="medieval"] :is(.empty, .wl-empty, .ep-empty) {
  padding: 48px 20px;
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  background-color: var(--chassis-lit);
  font-size: 16px;
  line-height: 24px;
}

/* ==================== Головна ==================== */
/* Заголовок розділу (SectionTitle): червоний ¶, текстура й подвійна лінійка до
   правого краю, як у рукописі. Великими літерами текстура не читається. */
html[data-theme="medieval"] :is(.row-title, .row-heading) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--font-textura);
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme="medieval"] .row-heading { margin: 0; }
html[data-theme="medieval"] .row-title::before { display: none; }
/* Лінійка до правого краю – стрічка виноградної лози (--kf-band-rinceau). */
html[data-theme="medieval"] :is(.row-title, .row-heading)::after {
  content: "";
  flex: 1 1 auto;
  height: 22px;
  margin-left: 4px;
  background: var(--hairline);
  -webkit-mask: var(--kf-band-rinceau) repeat-x left center / auto 22px;
  mask: var(--kf-band-rinceau) repeat-x left center / auto 22px;
}
html[data-theme="medieval"] .sec-mark { display: inline; color: var(--vermilion); }
/* «Переглянуто»: той самий заголовок, тільки замість ¶ – шеврон, що повертається. */
html[data-theme="medieval"] .row-toggle {
  gap: 10px;
  border-radius: var(--radius-xs);
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme="medieval"] .row-toggle:hover { color: var(--ink); }
html[data-theme="medieval"] .row-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
html[data-theme="medieval"] .row-toggle-chev { width: 18px; height: 18px; color: var(--vermilion); }

/* «Продовжити перегляд» (ContinueCard): пергаментна картка з тонкою смугою
   прогресу й часом зупинки пікселями. */
html[data-theme="medieval"] .continue-strip { padding: 4px 2px 12px; }
html[data-theme="medieval"] .continue-card {
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
  transition: transform .18s ease, box-shadow .18s ease;
}
html[data-theme="medieval"] .continue-card:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-lift);
}
html[data-theme="medieval"] .continue-card:active { transform: translateY(-2px); }
html[data-theme="medieval"] :is(.continue-card, .poster-wrap)::before { display: none; }
html[data-theme="medieval"] .continue-thumb { background-color: var(--grille); }
/* На наведенні – кругла червона клавіша відтворення в лівому нижньому куті. */
html[data-theme="medieval"] .continue-thumb::after {
  inset: auto auto 12px 12px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--vermilion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff8ea' d='M6.5 3.8C8.6 7.6 13.2 10.6 20.5 12C13.2 13.4 8.6 16.4 6.5 20.2C7.6 15.2 7.6 8.8 6.5 3.8Z'/%3E%3C/svg%3E") 9px 8px / 16px no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vermilion-side), var(--shadow-drop);
}
/* Тонка смуга перегляду (Progress thin): суцільний червоний на склі дисплея. */
html[data-theme="medieval"] :is(.mini-progress, .ep-progress) {
  height: 5px;
  padding: 1px 0;
  border-radius: 0;
  background: var(--display);
  box-shadow: var(--shadow-plate);
}
html[data-theme="medieval"] :is(.mini-progress, .ep-progress) > i { background: var(--lcd); }
html[data-theme="medieval"] .continue-body { position: relative; padding: 10px 88px 12px 14px; }
html[data-theme="medieval"] .continue-body .t { font-size: 16px; line-height: 22px; font-weight: 500; }
html[data-theme="medieval"] .continue-body .e { margin-top: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* Час зупинки стоїть окремо праворуч, пікселями; « · » між ними ховаємо. */
html[data-theme="medieval"] .e-sep { display: none; }
html[data-theme="medieval"] .e-time { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

/* Сітка постерів (PosterCard): постер 2:3 з темною гранню знизу, назва у два
   рядки; без постера – кремова плитка з буквицею й назвою. */
@media (min-width: 641px) {
  html[data-theme="medieval"] .grid { gap: var(--space-5); }
}
html[data-theme="medieval"] .poster-wrap {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--vellum);
  box-shadow: 0 0 0 1px var(--key-side), 0 4px 0 var(--key-side), var(--shadow-drop);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
}
html[data-theme="medieval"] .poster-wrap::after { display: none; }
html[data-theme="medieval"] .card:hover .poster-wrap {
  border-color: transparent;
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--key-side), 0 4px 0 var(--key-side), var(--shadow-lift);
}
html[data-theme="medieval"] .card:active .poster-wrap { transform: translateY(-3px); transition-duration: .07s; }
html[data-theme="medieval"] .poster-fallback {
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--ink);
  background-color: var(--vellum);
  font-family: var(--font-book);
  font-size: 16px;
  line-height: 22px;
}
/* Бейдж нових серій (Badge vermilion) – табличка-легенда в кутку постера. */
html[data-theme="medieval"] .badge {
  top: 8px;
  right: 8px;
  padding: 2px 7px 3px;
  border-radius: var(--radius-xs);
  color: var(--vellum);
  background: var(--key);
  font-family: var(--font-book);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] .badge.new { color: var(--on-vermilion); background: var(--vermilion); }
html[data-theme="medieval"] .card-title { margin-top: 12px; font-size: 16px; line-height: 21px; color: var(--ink); }
html[data-theme="medieval"] .card-sub { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ==================== Сторінка тайтла ==================== */
html[data-theme="medieval"] .detail-poster {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--vellum);
  box-shadow: 0 0 0 1px var(--key-side), 0 4px 0 var(--key-side), var(--shadow-drop);
}
/* Без постера – кремова плитка 2:3 з великою буквицею (Initial lg). */
html[data-theme="medieval"] .detail-fallback { display: none; }
html[data-theme="medieval"] .detail-head.no-poster .detail-fallback {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 190px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  background-color: var(--vellum);
  box-shadow: 0 0 0 1px var(--key-side), 0 4px 0 var(--key-side), var(--shadow-drop);
}
html[data-theme="medieval"] .initial-lg { --kf-size: 96px; }
/* Назва тайтла (PageTitle): текстура 36px, перша літера кіновар'ю. */
html[data-theme="medieval"] .detail-meta h1 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-textura);
  font-size: 36px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
}
html[data-theme="medieval"] .detail-meta h1::first-letter { color: var(--vermilion); }
html[data-theme="medieval"] .detail-sub { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 24px; }
html[data-theme="medieval"] .detail-delete { margin-top: 16px; }

/* Рядки серій (EpisodeRow): номер на коричневій клавіші, назва, розмір і місце
   зупинки, тонкий прогрес, кругла позначка «переглянуто». */
html[data-theme="medieval"] .episode-list { gap: 10px; }
html[data-theme="medieval"] .episode {
  gap: var(--space-4);
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
  transition: transform .14s ease;
}
html[data-theme="medieval"] .episode:hover { background-color: var(--vellum); border-color: transparent; transform: translateX(3px); }
html[data-theme="medieval"] .episode:active { transform: translateX(3px) scale(.985); transition-duration: .07s; }
html[data-theme="medieval"] .ep-num {
  flex: 0 0 46px;
  height: 46px;
  margin-bottom: 3px;
  padding: 5px 8px;
  align-items: flex-start;
  justify-content: flex-start;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--vellum);
  background: var(--key);
  font-family: var(--font-book);
  font-size: 18px;
  line-height: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--key-side);
}
html[data-theme="medieval"] .ep-main .ep-t { font-size: 18px; line-height: 24px; font-weight: 500; }
html[data-theme="medieval"] .ep-main .ep-meta { margin-top: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
html[data-theme="medieval"] .ep-progress { margin-top: 8px; max-width: 340px; }
html[data-theme="medieval"] .ep-check {
  width: 28px;
  height: 28px;
  border: 2px solid var(--key);
  color: transparent;
  background: var(--vellum);
  transition: background .14s ease;
}
html[data-theme="medieval"] .ep-check:hover { border-color: var(--key); background: var(--chassis-lit); }
html[data-theme="medieval"] .ep-check.done { border-color: var(--vermilion-side); color: var(--on-vermilion); background: var(--vermilion); }
html[data-theme="medieval"] .ep-check svg { width: 16px; height: 16px; }
/* Переглянута серія приглушує назву, а прогрес ховається. */
html[data-theme="medieval"] .episode:has(.ep-check.done) .ep-t { color: var(--ink-muted); }
html[data-theme="medieval"] .episode:has(.ep-check.done) .ep-progress { display: none; }

@media (max-width: 640px) {
  html[data-theme="medieval"] .detail-head.no-poster .detail-fallback { width: 140px; }
  html[data-theme="medieval"] .detail-meta h1 { font-size: 30px; line-height: 34px; }
}

/* ==================== Плеєр (PlayerFrame, Transport, SkipIntro) ==================== */
/* Плеєр як окремий прилад: зелена плита-обрамлення з гвинтами, над екраном
   смужка зі світлодіодом, назвою, решіткою динаміка й клавішею «закрити»;
   під приладом підпис текстурою. Завіса відкриття (clip-path на сцені) і
   кільце-глоу з app.js працюють як і раніше – тепер усередині обрамлення. */
html[data-theme="medieval"] .player-overlay { background: color-mix(in srgb, var(--display) 96%, transparent); }
html[data-theme="medieval"] .player-overlay::before {
  background: radial-gradient(55% 45% at 50% 50%, rgba(232, 137, 47, .28), transparent 70%);
}
/* Хрестик у кутку оверлею замінює клавіша на смужці приладу. */
html[data-theme="medieval"] .player-overlay > .player-close { display: none; }
html[data-theme="medieval"] .player-frame {
  aspect-ratio: auto;
  padding: 10px 12px 12px;
  border-radius: var(--radius-lg);
  color: var(--vellum);
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 10px 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--enamel-side), var(--shadow-lift);
}
html[data-theme="medieval"] .player-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: 0 6px 8px 10px;
}
/* Світлодіод із підписом (Led): горить, поки грає; на паузі блимає. */
html[data-theme="medieval"] .player-led {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--on-dark-muted);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
  white-space: nowrap;
}
html[data-theme="medieval"] .player-led::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--led-on);
  box-shadow: 0 0 0 2px rgba(242, 70, 28, .22), 0 0 8px 1px rgba(242, 70, 28, .65);
}
html[data-theme="medieval"] .led-pause,
html[data-theme="medieval"] .player-frame.is-paused .led-play { display: none; }
html[data-theme="medieval"] .player-frame.is-paused .led-pause { display: inline; }
html[data-theme="medieval"] .player-frame.is-paused .player-led::before { animation: kf-blink 1.1s steps(2, jump-none) infinite; }
@keyframes kf-blink { 50% { background: var(--led-off); box-shadow: none; } }
html[data-theme="medieval"] .player-bar-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--on-dark-muted);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-theme="medieval"] .player-grille {
  flex: 0 0 auto;
  width: 56px;
  height: 16px;
  border-radius: var(--radius-sm);
  background-color: var(--grille);
  background-image: radial-gradient(circle, var(--display) 0 2px, transparent 2.5px);
  background-size: 8px 8px;
  background-position: 2px 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* «Закрити» – кругла кремова клавіша (Button vellum sm round). */
html[data-theme="medieval"] .player-bar-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -2px -4px 3px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--ink);
  background: var(--vellum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
  cursor: var(--kf-cursor-hand), pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] .player-bar-close:hover { filter: brightness(1.08); }
html[data-theme="medieval"] .player-bar-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vellum-side); }
html[data-theme="medieval"] .player-bar-close:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
/* Екран: втиснуте скло дисплея, тримає 16:9 ще до метаданих відео. */
html[data-theme="medieval"] .player-stage {
  position: relative;
  inset: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: var(--display);
  box-shadow: var(--shadow-plate);
}
html[data-theme="medieval"] :is(#player, .player-snap) { background: var(--display); }
html[data-theme="medieval"] .player-glow {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px rgba(232, 137, 47, .55), 0 0 60px 12px rgba(242, 70, 28, .3);
}
html[data-theme="medieval"] .player-caption {
  margin-top: 14px;
  color: var(--vellum);
  font-family: var(--font-textura);
  font-size: 24px;
  line-height: 28px;
}
html[data-theme="medieval"] .player-caption::first-letter { color: var(--vermilion); }

/* Транспорт: панель на склі дисплея – сегментна доріжка перемотки, клавіші
   серій, червона кругла клавіша відтворення, час пікселями. */
html[data-theme="medieval"] .pc {
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px 14px 12px;
  border-radius: var(--radius-md);
  color: var(--vellum);
  background-color: color-mix(in srgb, var(--display) 88%, transparent);
  box-shadow: var(--shadow-plate);
}
html[data-theme="medieval"] :is(.pc-seek-track, .pc-seek:hover .pc-seek-track) {
  height: 8px;
  border-radius: 2px;
  background: var(--display);
  box-shadow: var(--shadow-plate);
}
html[data-theme="medieval"] :is(.pc-buffered, .pc-played) {
  top: 2px;
  bottom: 2px;
  left: 2px;
  height: auto;
  max-width: calc(100% - 4px);
  border-radius: 0;
}
html[data-theme="medieval"] .pc-buffered { background: var(--display-dim); }
html[data-theme="medieval"] .pc-played {
  background: repeating-linear-gradient(90deg, var(--lcd) 0 5px, transparent 5px 7px);
  filter: drop-shadow(0 0 3px rgba(255, 74, 46, .55));
}
html[data-theme="medieval"] :is(.pc-handle, .pc-seek:hover .pc-handle, .pc-seek.pc-dragging .pc-handle) {
  width: 14px;
  height: 14px;
  background: var(--vellum);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%) scale(1);
}
html[data-theme="medieval"] .pc-tip {
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--lcd);
  background: var(--display);
  box-shadow: var(--shadow-plate), 0 6px 14px -6px rgba(0, 0, 0, .7);
  font-family: var(--font-lcd);
  font-size: 26px;
  line-height: 20px;
  font-weight: 400;
}
html[data-theme="medieval"] .pc-preview { border-radius: var(--radius-xs); background: var(--display); }
html[data-theme="medieval"] .pc-row { gap: var(--space-3); margin-top: 4px; }
html[data-theme="medieval"] .pc-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--vellum);
}
html[data-theme="medieval"] .pc-btn:hover { background: var(--grille); }
html[data-theme="medieval"] .pc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
html[data-theme="medieval"] .pc-btn:disabled { opacity: .35; }
html[data-theme="medieval"] .pc-btn:disabled:hover { background: none; }
html[data-theme="medieval"] #pc-play {
  width: 40px;
  height: 40px;
  margin-bottom: 3px;
  border-radius: var(--radius-full);
  color: var(--on-vermilion);
  background: var(--vermilion);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vermilion-side), var(--shadow-drop);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] #pc-play:hover { background: var(--vermilion); filter: brightness(1.08); }
html[data-theme="medieval"] #pc-play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vermilion-side); }
html[data-theme="medieval"] #pc-play svg { width: 18px; height: 18px; }
html[data-theme="medieval"] .pc-time {
  color: var(--lcd);
  font-family: var(--font-lcd);
  font-size: 39px;
  line-height: 30px;
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 74, 46, .45);
}
html[data-theme="medieval"] .pc-dur { color: var(--amber); font-size: 26px; text-shadow: none; }
html[data-theme="medieval"] .pc-vol-range { height: 6px; border-radius: 1px; background: var(--display-dim); }
html[data-theme="medieval"] .pc-vol-range::-webkit-slider-thumb { background: var(--vellum); }
html[data-theme="medieval"] .pc-vol-range::-moz-range-thumb { background: var(--vellum); }

/* «Пропустити опенінг» (SkipIntro): кремова клавіша, яку заливає темніший
   пергамент, поки йде відлік. Стоїть над транспортом на сталій висоті. */
html[data-theme="medieval"] .pc-intro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  right: 24px;
  bottom: 132px;
  min-height: var(--key-height);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--vellum);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] .pc-intro:hover { color: var(--ink); background: var(--vellum); filter: brightness(1.05); }
html[data-theme="medieval"] :is(.pc-intro-fill, .pc-intro:hover .pc-intro-fill) { background: var(--vellum-side); }
html[data-theme="medieval"] .pc-intro:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
html[data-theme="medieval"] .pc-intro-ico { position: relative; z-index: 1; display: inline-flex; }
@media (max-width: 600px) {
  html[data-theme="medieval"] .pc-intro { right: 12px; bottom: 112px; }
  html[data-theme="medieval"] .pc-time { font-size: 26px; line-height: 20px; }
  html[data-theme="medieval"] .pc-dur { font-size: 20px; }
}

/* ==================== Новинки ==================== */
/* Заголовок сторінки (PageTitle) – і тут, і в налаштуваннях. */
html[data-theme="medieval"] .settings-head h1 {
  color: var(--ink);
  font-family: var(--font-textura);
  font-size: 36px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
}
html[data-theme="medieval"] .settings-head h1::first-letter { color: var(--vermilion); }
html[data-theme="medieval"] .disc-sub { color: var(--ink-muted); font-size: 14px; line-height: 20px; }

/* Нові / Відхилені – таблички на корпусі (Tabs on="chassis"). */
html[data-theme="medieval"] .disc-tabs { gap: var(--space-2); }
html[data-theme="medieval"] .disc-tab {
  gap: 7px;
  padding: 6px 14px 7px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--ink-muted);
  background: var(--chassis-lit);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  box-shadow: 0 2px 0 var(--chassis-shade);
  transition: background .15s ease, color .15s ease;
}
html[data-theme="medieval"] .disc-tab:hover { color: var(--ink); background: var(--vellum); }
html[data-theme="medieval"] .disc-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
html[data-theme="medieval"] .disc-tab.active { color: var(--on-vermilion); background: var(--vermilion); box-shadow: 0 2px 0 var(--vermilion-side); }
html[data-theme="medieval"] :is(.disc-tab-n, .disc-tab.active .disc-tab-n) {
  min-width: 0;
  margin: -2px 0;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  color: var(--lcd);
  background-color: var(--display);
  font-family: var(--font-lcd);
  font-size: 26px;
  line-height: 20px;
  font-weight: 400;
  box-shadow: var(--shadow-plate);
  text-shadow: 0 0 6px rgba(255, 74, 46, .45);
}

/* Картка новинки (DiscoverCard): пергамент, постер, рубрикований рядок
   метаданих, клавіші притиснуті до низу – в усьому ряді на одній лінії. */
html[data-theme="medieval"] .disc-card {
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
}
html[data-theme="medieval"] .disc-card::before { display: none; }
html[data-theme="medieval"] .disc-card:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-lift);
}
html[data-theme="medieval"] .disc-poster { background: var(--grille); }
html[data-theme="medieval"] .disc-poster .poster-fallback { display: flex; background-color: var(--vellum); }
html[data-theme="medieval"] :is(.disc-poster, .disc-row-poster) .pf-title { display: none; }
/* «Сховати» – кругла кремова клавіша в кутку постера, на наведенні. */
html[data-theme="medieval"] .disc-hide {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--ink);
  background: var(--vellum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] .disc-hide:hover { color: var(--rubric); background: var(--vellum); }
html[data-theme="medieval"] .disc-hide:focus-visible { box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
html[data-theme="medieval"] .disc-hide svg { width: 16px; height: 16px; }
html[data-theme="medieval"] .disc-body { padding: 12px 14px 14px; }
html[data-theme="medieval"] .disc-title { font-size: 18px; line-height: 24px; letter-spacing: 0; }
html[data-theme="medieval"] .disc-meta { margin-top: 4px; color: var(--rubric); font-size: 14px; line-height: 20px; letter-spacing: 0; }
html[data-theme="medieval"] .disc-desc { margin-top: 8px; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
html[data-theme="medieval"] .disc-desc i { color: var(--ink-muted); }
html[data-theme="medieval"] .disc-actions { padding-top: 12px; gap: var(--space-2); }
/* Клавіші варіантів – малі: перший варіант кіновар, другий кремовий. */
html[data-theme="medieval"] :is(.disc-add, .disc-restore) {
  min-height: 32px;
  padding: 0 var(--space-3);
  gap: 6px;
  font-size: 14px;
}
html[data-theme="medieval"] :is(.disc-add, .disc-restore) > svg { width: 16px; height: 16px; }
html[data-theme="medieval"] .disc-actions .disc-add ~ .disc-add {
  --kf-face: var(--vellum);
  --kf-side: var(--vellum-side);
  --kf-text: var(--ink);
}
/* Підпис «джерело невідоме»: розкладка – у style.css, тут лише колір і шрифт. */
html[data-theme="medieval"] .disc-warn { color: var(--rubric); font-size: 14px; line-height: 20px; }

/* Відхилені – компактний пергаментний рядок. «Повернути» – головна дія тут
   (коричнева клавіша), «Додати» – кремова. */
html[data-theme="medieval"] .disc-row {
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
}
html[data-theme="medieval"] .disc-row-poster img { border-radius: var(--radius-xs); }
html[data-theme="medieval"] .disc-row-poster .poster-fallback {
  display: flex;
  width: 46px;
  height: 66px;
  padding: 0;
  border-radius: var(--radius-xs);
  background-color: var(--vellum);
  box-shadow: inset 0 0 0 1px var(--vellum-side);
}
html[data-theme="medieval"] .disc-row-poster .initial { --kf-size: 40px; }
html[data-theme="medieval"] .disc-row .disc-title { font-size: 16px; line-height: 22px; }
html[data-theme="medieval"] .disc-row .disc-desc { margin-top: 2px; font-size: 14px; -webkit-line-clamp: 1; }
html[data-theme="medieval"] .disc-row-actions .disc-add {
  --kf-face: var(--vellum);
  --kf-side: var(--vellum-side);
  --kf-text: var(--ink);
}

/* Повідомлення під формою чи над списком (Notice): успіх – темна плита з
   бурштиновою галочкою, помилка – пергамент у червоній рамці з хрестиком.
   Іконка – маска з середньовічного набору, тож розмітки не треба. */
html[data-theme="medieval"] .wl-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 21px;
}
html[data-theme="medieval"] .wl-msg::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--kf-mask) center / contain no-repeat;
  mask: var(--kf-mask) center / contain no-repeat;
}
html[data-theme="medieval"] .wl-msg.ok { color: var(--vellum); background: var(--panel); }
html[data-theme="medieval"] .wl-msg.ok::before {
  background: var(--amber);
  --kf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.8 12.8C5.6 12.4 7.4 13.6 9.4 16.2C12 11.2 15.4 7 20.4 4.2C16.3 8.2 13.1 13 10.4 19.6C8.4 16.8 6.2 14.3 3.8 12.8Z'/%3E%3C/svg%3E");
}
html[data-theme="medieval"] .wl-msg.err { color: var(--rubric); background: var(--vellum); box-shadow: inset 0 0 0 2px var(--vermilion); }
html[data-theme="medieval"] .wl-msg.err::before {
  --kf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(45 12 12)' d='M10.5 2.8L13.5 2.8L12.8 11.2L21.2 10.5L21.2 13.5L12.8 12.8L13.5 21.2L10.5 21.2L11.2 12.8L2.8 13.5L2.8 10.5L11.2 11.2Z'/%3E%3C/svg%3E");
}

/* ==================== Налаштування ==================== */
/* Текстура 36px довша за сучасний заголовок: коли клавіші вже не влазять
   поруч, вони переходять рядком нижче й тримаються правого краю. */
html[data-theme="medieval"] .settings-head { flex-wrap: wrap; row-gap: var(--space-3); }
html[data-theme="medieval"] .settings-actions { margin-left: auto; }
html[data-theme="medieval"] .grab-status { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
/* Смуги завантаження й заповнення диска (Progress): червоні сегменти на склі. */
html[data-theme="medieval"] :is(.grab-status .bar, .stat-bar) {
  position: relative;
  height: 10px;
  padding: 2px;
  border-radius: 2px;
  background: var(--display);
  box-shadow: var(--shadow-plate);
}
html[data-theme="medieval"] :is(.grab-status .bar, .stat-bar) i {
  background: repeating-linear-gradient(90deg, var(--lcd) 0 5px, transparent 5px 7px);
  filter: drop-shadow(0 0 3px rgba(255, 74, 46, .55));
}
html[data-theme="medieval"] .grab-files .bar { height: 8px; }
html[data-theme="medieval"] .grab-file-top { font-size: 14px; line-height: 20px; }
html[data-theme="medieval"] .grab-file-pct { color: var(--ink); }

/* Місце на диску (Display): червоні пікселі на димчастому склі, бурштинові
   підписи над значеннями, кириличні одиниці поруч книжковим шрифтом. */
html[data-theme="medieval"] .storage {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--on-dark-muted);
  background-color: var(--display);
  box-shadow: var(--shadow-plate), 0 2px 0 rgba(255, 255, 255, .18);
}
html[data-theme="medieval"] .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
html[data-theme="medieval"] .stat-lbl {
  margin: 0 0 6px;
  color: var(--amber);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
}
html[data-theme="medieval"] .stat-val {
  color: var(--lcd);
  font-family: var(--font-lcd);
  font-size: 52px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 74, 46, .45);
}
html[data-theme="medieval"] .stat-unit {
  margin-left: 4px;
  color: var(--amber);
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 20px;
  text-shadow: none;
  white-space: normal;
}
html[data-theme="medieval"] .stat-note { margin-top: var(--space-2); color: var(--on-dark-muted); font-size: 14px; line-height: 20px; }

/* Додавання тайтла (.kf-form-row): світла ділянка корпусу, пергаментні поля. */
html[data-theme="medieval"] .wl-add {
  gap: var(--space-3);
  align-items: flex-end;
  padding: 14px;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--chassis-lit);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 var(--chassis-shade);
}
/* Поле вводу (Input): пергамент із коричневою облямівкою й утопленою тінню. */
html[data-theme="medieval"] :is(.wl-add input, .login-card input) {
  min-height: var(--key-height);
  padding: 9px 13px;
  border: 1px solid var(--key);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--vellum);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  box-shadow: inset 0 2px 3px rgba(43, 21, 17, .18);
  transition: box-shadow .15s ease;
}
html[data-theme="medieval"] :is(.wl-add input, .login-card input)::placeholder { color: var(--ink-muted); opacity: 1; }
html[data-theme="medieval"] :is(.wl-add input, .login-card input):focus {
  outline: none;
  border-color: var(--key);
  box-shadow: inset 0 2px 3px rgba(43, 21, 17, .18), var(--shadow-focus);
}
html[data-theme="medieval"] .wl-add button { align-self: flex-end; }

/* Список тайтлів (ListRow): пергаментний рядок із прапорцем, назвою,
   джерелом і кремовими клавішами «змінити» / «видалити». */
html[data-theme="medieval"] .wl-list { gap: 10px; }
html[data-theme="medieval"] .wl-row {
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
}
html[data-theme="medieval"] .wl-row:hover { border-color: transparent; }
html[data-theme="medieval"] .wl-row.off { opacity: .55; }
html[data-theme="medieval"] .wl-topic { font-size: 18px; line-height: 24px; }
html[data-theme="medieval"] .wl-sub { margin-top: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
/* Прапорець (Checkbox): порожня кремова клітинка або червона з галочкою. */
html[data-theme="medieval"] :is(.wl-toggle input, .gchk input) {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--key);
  border-radius: var(--radius-xs);
  background: var(--vellum) center / 14px no-repeat;
  cursor: var(--kf-cursor-hand), pointer;
}
html[data-theme="medieval"] :is(.wl-toggle input, .gchk input):checked {
  border-color: var(--vermilion-side);
  background-color: var(--vermilion);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff8ea' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
html[data-theme="medieval"] :is(.wl-toggle input, .gchk input):focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* «Змінити» й «Видалити» – малі квадратні кремові клавіші. */
html[data-theme="medieval"] :is(.wl-edit, .wl-del) {
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--vellum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] :is(.wl-edit, .wl-del):hover { color: var(--ink); background: var(--vellum); filter: brightness(1.05); }
html[data-theme="medieval"] .wl-del:hover { color: var(--rubric); }
html[data-theme="medieval"] :is(.wl-edit, .wl-del):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vellum-side); }
html[data-theme="medieval"] :is(.wl-edit, .wl-del):focus-visible { outline: none; box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
html[data-theme="medieval"] :is(.wl-edit, .wl-del) svg { width: 16px; height: 16px; }

/* ==================== Ігри ==================== */
/* Знаки середньовічного набору для місць без розмітки під іконку: CSS-маски. */
html[data-theme="medieval"] {
  --kf-ico-forward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12H17.2'/%3E%3Cpath fill='%23000' stroke='none' d='M21.6 12L15.6 7.7L16.7 12L15.6 16.3Z'/%3E%3Cpath d='M7.8 12L5.4 9.4M7.8 12l-2.4 2.6M5.1 12L2.7 9.4M5.1 12l-2.4 2.6'/%3E%3C/svg%3E");
  --kf-ico-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath fill='%23000' stroke='none' d='M3.2 8.6L7.8 12.2L12 5.6L16.2 12.2L20.8 8.6L19 17.4H5Z'/%3E%3Cpath d='M5.2 20.2h13.6'/%3E%3Ccircle fill='%23000' stroke='none' cx='3.2' cy='7.2' r='1.3'/%3E%3Ccircle fill='%23000' stroke='none' cx='12' cy='4' r='1.3'/%3E%3Ccircle fill='%23000' stroke='none' cx='20.8' cy='7.2' r='1.3'/%3E%3C/svg%3E");
  --kf-ico-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 3.5h13.6M5.2 20.5h13.6'/%3E%3Cpath d='M7.4 3.5c0 4.6 4.6 5.4 4.6 8.5s-4.6 3.9-4.6 8.5M16.6 3.5c0 4.6-4.6 5.4-4.6 8.5s4.6 3.9 4.6 8.5'/%3E%3Cpath fill='%23000' stroke='none' d='M8.9 20c.6-2.2 1.9-3.3 3.1-3.7 1.2.4 2.5 1.5 3.1 3.7z'/%3E%3Cpath fill='%23000' stroke='none' d='M9.9 7.2h4.2c-.5.9-1.2 1.5-2.1 2.1-.9-.6-1.6-1.2-2.1-2.1z'/%3E%3C/svg%3E");
  --kf-ico-scroll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.8 4.4h10.9a2.1 2.1 0 0 1 0 4.2h-1.9V18a2.6 2.6 0 0 1-2.6 2.6H5.3a2.1 2.1 0 0 1 0-4.2h1.9V5a.6.6 0 0 1 .6-.6z'/%3E%3Cpath d='M7.2 16.4h6.6a2.1 2.1 0 0 0 0 4.2'/%3E%3Cpath d='M16.8 8.6V6.5a2.1 2.1 0 0 0-2.1-2.1'/%3E%3Cpath d='M9.8 8.6h4.4M9.8 11.4h4.4M9.8 14.2h3'/%3E%3C/svg%3E");
}
html[data-theme="medieval"] :is(.ghero-btn, .rev-badge, .rev-chip, .gcard-date, .ghero-desc-label)::before,
html[data-theme="medieval"] .ghero-btn::after {
  content: "";
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--kf-mask) center / contain no-repeat;
  mask: var(--kf-mask) center / contain no-repeat;
}

/* Завантаження (Spinner): кільце з восьми світлодіодів, по якому біжить вогник. */
html[data-theme="medieval"] .games-loading { color: var(--ink-muted); font-size: 16px; line-height: 24px; }
html[data-theme="medieval"] .spinner {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  animation: none;
  background:
    radial-gradient(circle at 11px 2px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 17.4px 4.6px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 20px 11px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 17.4px 17.4px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 11px 20px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 4.6px 17.4px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 2px 11px, var(--led-off) 0 2px, transparent 2.5px),
    radial-gradient(circle at 4.6px 4.6px, var(--led-off) 0 2px, transparent 2.5px);
}
html[data-theme="medieval"] .spinner::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--led-on);
  box-shadow: 0 0 6px rgba(242, 70, 28, .8);
  transform-origin: 2px 11px;
  animation: kf-spin-led .8s steps(8, end) infinite;
}
@keyframes kf-spin-led { to { transform: rotate(360deg); } }

/* Слайдер знижок (GameHero): картинка гри в рамці без затемнення, зелена плита з
   підписом ліворуч унизу, пергамент «Про гру» праворуч, світлодіоди слайдів між
   двома круглими клавішами. */
html[data-theme="medieval"] .ghero {
  height: clamp(300px, 42vw, 440px);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--grille);
  box-shadow: 0 0 0 1px var(--key-side), 0 4px 0 var(--key-side), var(--shadow-lift);
}
html[data-theme="medieval"] .ghero::before { display: none; }
html[data-theme="medieval"] .ghero-slide { background-color: var(--grille); background-image: var(--img) !important; }
html[data-theme="medieval"] .ghero-inner {
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  max-width: min(520px, calc(100% - 24px));
  padding: 22px 26px 24px;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--radius-lg);
  color: var(--vellum);
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 10px 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--enamel-side), var(--shadow-lift);
}
html[data-theme="medieval"] :is(.ghero-badges, .gdetail-badges) { gap: var(--space-2); }
html[data-theme="medieval"] .ghero-title {
  color: var(--vellum);
  font-family: var(--font-textura);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}
html[data-theme="medieval"] .ghero-btn { margin-top: 4px; }
html[data-theme="medieval"] .ghero-btn::after { width: 18px; height: 18px; --kf-mask: var(--kf-ico-forward); }
html[data-theme="medieval"] .ghero-desc {
  width: min(300px, 32%);
  margin-right: clamp(12px, 3vw, 28px);
  padding: 16px 18px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] .ghero-desc-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--rubric);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
  text-transform: none;
}
html[data-theme="medieval"] .ghero-desc-label::before { width: 16px; height: 16px; --kf-mask: var(--kf-ico-scroll); }
html[data-theme="medieval"] .ghero-desc p { color: var(--ink-muted); font-size: 14px; line-height: 21px; }
html[data-theme="medieval"] .ghero-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 14px;
}
html[data-theme="medieval"] .ghero-dots { gap: 2px; margin-top: 0; }
html[data-theme="medieval"] .ghero-ctrl:has(.ghero-dot + .ghero-dot) .ghero-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--ink);
  background: var(--vellum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
  cursor: var(--kf-cursor-hand), pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] .ghero-step:hover { filter: brightness(1.05); }
html[data-theme="medieval"] .ghero-step:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vellum-side); }
html[data-theme="medieval"] .ghero-step:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
/* Світлодіоди слайдів. */
html[data-theme="medieval"] .ghero-dot {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: none;
}
html[data-theme="medieval"] .ghero-dot::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45);
}
html[data-theme="medieval"] .ghero-dot.on { background: none; transform: none; }
html[data-theme="medieval"] .ghero-dot.on::before {
  background: var(--led-on);
  box-shadow: 0 0 0 2px rgba(242, 70, 28, .22), 0 0 8px 1px rgba(242, 70, 28, .65);
}
html[data-theme="medieval"] .ghero-dot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Знижка (Badge vermilion), відгуки (Rating: емаль і бурштинова корона),
   платформи словами на коричневих легендах (Platforms). */
html[data-theme="medieval"] .disc-badge {
  top: 8px;
  left: 8px;
  padding: 2px 7px 3px;
  border-radius: var(--radius-xs);
  color: var(--on-vermilion);
  background: var(--vermilion);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
  box-shadow: none;
}
html[data-theme="medieval"] .gprice.big .disc-badge.big { align-self: center; padding: 3px 9px; font-size: 15px; line-height: 20px; }
html[data-theme="medieval"] :is(.rev-badge, .rev-chip) {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--vellum);
  background: var(--enamel);
  white-space: nowrap;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] .rev-badge { gap: 6px; padding: 3px 9px 4px 7px; font-size: 14px; line-height: 18px; }
html[data-theme="medieval"] .rev-chip { top: 8px; right: 8px; gap: 4px; padding: 2px 7px 3px 5px; font-size: 13px; line-height: 16px; }
html[data-theme="medieval"] :is(.rev-badge, .rev-chip)::before { background: var(--amber); --kf-mask: var(--kf-ico-crown); }
html[data-theme="medieval"] .rev-badge::before { width: 16px; height: 16px; }
html[data-theme="medieval"] .rev-chip::before { width: 14px; height: 14px; }
html[data-theme="medieval"] .plats { gap: var(--space-1); }
html[data-theme="medieval"] .poster-wrap .plats { left: 8px; bottom: 8px; }
html[data-theme="medieval"] :is(.plat, .gdetail-badges .plat) {
  width: auto;
  height: auto;
  padding: 2px 6px 3px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--vellum);
  background: var(--key);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Ціна (Price): стара закреслена, нова рубрикою; на плиті – бурштином. */
html[data-theme="medieval"] .gprice { flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
html[data-theme="medieval"] .price-old { color: var(--ink-muted); font-size: 14px; line-height: 20px; text-decoration-thickness: 1.5px; }
html[data-theme="medieval"] .price-new { color: var(--rubric); font-size: 18px; line-height: 24px; }
html[data-theme="medieval"] :is(.ghero-price, .gprice.big) { gap: 4px 10px; }
html[data-theme="medieval"] :is(.ghero-price, .gprice.big) .price-old { color: var(--on-dark-muted); font-size: 16px; }
html[data-theme="medieval"] :is(.ghero-price, .gprice.big) .price-new { color: var(--amber); font-size: 28px; line-height: 32px; }

/* Панель над сіткою (.kf-toolbar): заголовок із лічильником ліворуч,
   сортування й фільтри праворуч – підписи над полями. */
html[data-theme="medieval"] .ggrid-head { align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: 18px; }
html[data-theme="medieval"] .ggrid-head .row-title { flex: 1 1 320px; margin: 0; }
html[data-theme="medieval"] .ggrid-count { font: inherit; letter-spacing: 0; text-transform: none; }
html[data-theme="medieval"] .gc-sep { display: none; }
html[data-theme="medieval"] .gc-n {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--lcd);
  background-color: var(--display);
  font-family: var(--font-lcd);
  font-size: 26px;
  line-height: 20px;
  font-weight: 400;
  box-shadow: var(--shadow-plate);
  text-shadow: 0 0 6px rgba(255, 74, 46, .45);
}
html[data-theme="medieval"] .ggrid-controls { align-items: flex-end; gap: var(--space-3); }
/* Випадний список (Select): пергамент, як поле вводу, зі своїм шевроном. */
html[data-theme="medieval"] .gsel {
  display: grid;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
  text-transform: none;
}
html[data-theme="medieval"] .gsel select {
  min-height: var(--key-height);
  padding: 9px 36px 9px 13px;
  border: 1px solid var(--key);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--vellum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232a1a14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  box-shadow: inset 0 2px 3px rgba(43, 21, 17, .18);
}
html[data-theme="medieval"] .gsel select:hover { border-color: var(--key); background-color: var(--vellum); }
html[data-theme="medieval"] .gsel select:focus { outline: none; border-color: var(--key); box-shadow: inset 0 2px 3px rgba(43, 21, 17, .18), var(--shadow-focus); }
html[data-theme="medieval"] .gsel option { color: var(--ink); background: var(--vellum); }
html[data-theme="medieval"] .gchk {
  gap: 10px;
  min-height: var(--key-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: none;
  font-size: 15px;
  line-height: 20px;
}
html[data-theme="medieval"] .gchk:hover { color: var(--ink); }
@media (min-width: 641px) {
  html[data-theme="medieval"] .ggrid { gap: var(--space-5); }
}

/* Плитка гри (GameCard): постер 2:3, знижка ліворуч, корона праворуч,
   платформи внизу, ціна й дата кінця акції з пісковим годинником. */
html[data-theme="medieval"] .gcard-date {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 20px;
}
html[data-theme="medieval"] .gcard-date::before { width: 14px; height: 14px; --kf-mask: var(--kf-ico-hourglass); }

/* Сторінка гри (GameHeader): широка картинка, під нею постер у кремовій рамці
   й зелена плита з назвою, платформами, відгуками, ціною й «Відкрити в Steam». */
html[data-theme="medieval"] .gdetail-hero {
  --banner: clamp(180px, 26vw, 280px);
  --lift: clamp(80px, 12vw, 130px);
  overflow: visible;
  gap: clamp(16px, 3vw, 28px);
  align-items: flex-end;
  margin-bottom: 28px;
  padding: calc(var(--banner) - var(--lift)) clamp(12px, 3vw, 28px) 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none !important;
}
html[data-theme="medieval"] .gdetail-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--banner);
  border-radius: var(--radius-md);
  background: var(--img) center / cover no-repeat var(--grille);
  box-shadow: 0 0 0 1px var(--key-side), 0 4px 0 var(--key-side);
}
html[data-theme="medieval"] .gdetail-poster {
  position: relative;
  width: clamp(112px, 18vw, 184px);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--vellum);
  box-shadow: 0 0 0 5px var(--vellum), 0 0 0 6px var(--vellum-side), 0 8px 0 1px var(--vellum-side), var(--shadow-lift);
}
html[data-theme="medieval"] .gdetail-head {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
  align-items: flex-start;
  padding: 20px 24px 22px;
  border-radius: var(--radius-lg);
  color: var(--vellum);
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 10px 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--enamel-side), var(--shadow-lift);
}
html[data-theme="medieval"] .gdetail-head h1 {
  color: var(--vellum);
  font-family: var(--font-textura);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}
html[data-theme="medieval"] .gdetail-meta { color: var(--on-dark-muted); font-size: 14px; line-height: 20px; }
html[data-theme="medieval"] .gsteam { margin-top: 4px; }
html[data-theme="medieval"] .gdetail-short { margin: 0 0 30px; color: var(--ink); font-size: 18px; line-height: 28px; }
html[data-theme="medieval"] .gdetail-side { top: 84px; }
@media (max-width: 640px) {
  html[data-theme="medieval"] .gdetail-hero { flex-direction: column; align-items: stretch; }
  html[data-theme="medieval"] .gdetail-poster { width: 112px; }
}

/* Особливості (FeatureList): світлі таблички; режими гри – на пергаменті з
   рубрикованою іконкою. */
html[data-theme="medieval"] .gfeats { gap: 6px; }
html[data-theme="medieval"] .gfeat {
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  background-color: var(--chassis-lit);
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 2px 0 var(--chassis-shade);
}
html[data-theme="medieval"] .gfeat svg { width: 18px; height: 18px; color: var(--ink-muted); }
html[data-theme="medieval"] .gfeat.is-mode { color: var(--ink); background-color: var(--vellum); font-weight: 500; box-shadow: 0 2px 0 var(--vellum-side); }
html[data-theme="medieval"] .gfeat.is-mode svg { color: var(--rubric); }

/* Галерея (Gallery): кадри 16:9 у кремових рамках, як мініатюри в рукописі. */
html[data-theme="medieval"] .ggallery { gap: var(--space-3); }
html[data-theme="medieval"] .gshot {
  margin: 5px 5px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--grille);
  box-shadow: 0 0 0 4px var(--vellum), 0 0 0 5px var(--vellum-side), 0 6px 0 1px var(--vellum-side);
}
html[data-theme="medieval"] .gshot:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px var(--vellum), 0 0 0 5px var(--vellum-side), 0 6px 0 1px var(--vellum-side);
}
html[data-theme="medieval"] .gshot:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--vellum), var(--shadow-focus); }

/* Опис зі Steam (Prose): заголовки текстурою з кіновар'ю, посилання рубрикою,
   списки з червоними ромбами, картинки в кремовій рамці. */
html[data-theme="medieval"] .gabout { color: var(--ink); font-size: 16px; line-height: 26px; }
html[data-theme="medieval"] .gabout p { margin: 0 0 14px; }
html[data-theme="medieval"] .gabout :is(h1, h2, h3) {
  margin: 26px 0 8px;
  color: var(--ink);
  font-family: var(--font-textura);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
}
html[data-theme="medieval"] .gabout :is(h1, h2, h3)::first-letter { color: var(--vermilion); }
html[data-theme="medieval"] .gabout a { color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="medieval"] .gabout :is(strong, b) { color: var(--rubric); }
html[data-theme="medieval"] .gabout ul { margin: 0 0 14px; padding: 0; list-style: none; }
html[data-theme="medieval"] .gabout li { position: relative; margin-bottom: 4px; padding-left: 20px; }
html[data-theme="medieval"] .gabout li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 7px;
  height: 7px;
  background: var(--vermilion);
  transform: rotate(45deg);
}
html[data-theme="medieval"] .gabout img {
  margin: 12px 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--vellum), 0 0 0 5px var(--vellum-side);
}

/* Лайтбокс (Lightbox): темне скло дисплея, кадр у кремовій рамці, круглі
   кремові клавіші «назад», «вперед», «закрити». */
html[data-theme="medieval"] .gallery-overlay {
  background: color-mix(in srgb, var(--display) 94%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="medieval"] .gal-media {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 6px var(--vellum), 0 0 0 7px var(--vellum-side), 0 10px 0 1px var(--vellum-side), var(--shadow-lift);
}
html[data-theme="medieval"] :is(.gal-nav, .gallery-overlay .player-close) {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--ink);
  background: var(--vellum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
}
html[data-theme="medieval"] :is(.gal-nav, .gallery-overlay .player-close):hover { border-color: transparent; background: var(--vellum); filter: brightness(1.05); }
html[data-theme="medieval"] .gallery-overlay .player-close:hover { transform: none; }
html[data-theme="medieval"] :is(.gal-nav, .gallery-overlay .player-close) svg { width: 18px; height: 18px; }

/* ==================== Вхід (LoginCard) ==================== */
/* Зелена плита посеред корпусу: назва сайту, поля з підписами над ними,
   червона клавіша «Увійти» з ключем, помилка – пергамент у червоній рамці.
   Підписи, крапки назви й «медіатека» стоять у LOGIN_HTML з hidden. */
html[data-theme="medieval"] .login-body { background: transparent; }
html[data-theme="medieval"] .login-card {
  width: min(360px, 100%);
  padding: 36px 32px 32px;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--vellum);
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 10px 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--enamel-side) 0 3px, transparent 3.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--enamel-side), var(--shadow-lift);
}
html[data-theme="medieval"] .login-brand {
  display: block;
  margin: 0 0 24px;
  text-align: center;
  white-space: nowrap;
  color: var(--vellum);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--font-textura);
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
html[data-theme="medieval"] .login-brand::first-letter { color: var(--vermilion); -webkit-text-fill-color: var(--vermilion); }
html[data-theme="medieval"] .login-brand span {
  margin-left: .24em;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme="medieval"] .login-brand .brand-dots {
  display: inline-grid;
  grid-template-columns: repeat(3, 4px);
  gap: 2px;
  margin: 7px 0 0 10px;
  vertical-align: top;
}
html[data-theme="medieval"] .login-brand .login-tail {
  display: inline;
  margin-left: 10px;
  color: var(--on-dark-muted);
  -webkit-text-fill-color: var(--on-dark-muted);
  font-family: var(--font-book);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
}
html[data-theme="medieval"] .login-card form { gap: 6px; }
html[data-theme="medieval"] .login-label {
  display: block;
  margin-top: 6px;
  color: var(--on-dark-muted);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .02em;
}
/* Підпис над полем уже називає його – підказка всередині зайва. */
html[data-theme="medieval"] .login-card input::placeholder { color: transparent; }
html[data-theme="medieval"] .login-card form:has(.err) input[type="password"] { padding: 8px 12px; border: 2px solid var(--vermilion); }
html[data-theme="medieval"] .login-card button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--key-height);
  margin: 14px 0 3px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--on-vermilion);
  background: var(--vermilion);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vermilion-side), var(--shadow-drop);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] .login-card button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.6' cy='12' r='3.6'/%3E%3Cpath fill='%23000' stroke='none' d='M6.6 10.7L7.9 12L6.6 13.3L5.3 12Z'/%3E%3Cpath d='M10.2 12H21'/%3E%3Cpath d='M17.2 12v3.6M20.4 12v3M14.4 12v2' stroke-width='1.9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.6' cy='12' r='3.6'/%3E%3Cpath fill='%23000' stroke='none' d='M6.6 10.7L7.9 12L6.6 13.3L5.3 12Z'/%3E%3Cpath d='M10.2 12H21'/%3E%3Cpath d='M17.2 12v3.6M20.4 12v3M14.4 12v2' stroke-width='1.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="medieval"] .login-card button:hover { filter: brightness(1.08); transform: none; }
html[data-theme="medieval"] .login-card button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vermilion-side); }
html[data-theme="medieval"] .login-card button:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vermilion-side), var(--shadow-focus); }
/* Помилка (Notice err) – між полями й клавішею не влазить за порядком
   розмітки, тож стоїть під клавішею тим самим пергаментом у червоній рамці. */
html[data-theme="medieval"] .err {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  color: var(--rubric);
  background: var(--vellum);
  box-shadow: inset 0 0 0 2px var(--vermilion);
  font-size: 15px;
  line-height: 21px;
  text-align: left;
}
html[data-theme="medieval"] .err::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(45 12 12)' d='M10.5 2.8L13.5 2.8L12.8 11.2L21.2 10.5L21.2 13.5L12.8 12.8L13.5 21.2L10.5 21.2L11.2 12.8L2.8 13.5L2.8 10.5L11.2 11.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(45 12 12)' d='M10.5 2.8L13.5 2.8L12.8 11.2L21.2 10.5L21.2 13.5L12.8 12.8L13.5 21.2L10.5 21.2L11.2 12.8L2.8 13.5L2.8 10.5L11.2 11.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==================== Аркада (ArcadeButton, ArcadeWindow, ScoreTable) ==================== */
/* Кнопка: кругла емалева клавіша з гральною кісткою, що повільно пливе, і три
   світлодіоди по черзі (крапки пакмана). Обрізання overflow з arcade.css (баг
   Chrome 154 зі знімком переходу) лишається: клавіша й діоди влазять у запас. */
html[data-theme="medieval"] .pac-fab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  border-radius: var(--radius-full);
}
html[data-theme="medieval"] .pac-fab:hover { filter: none; }
html[data-theme="medieval"] .pac-fab:active { transform: none; }
html[data-theme="medieval"] .pac-fab:focus-visible { outline: none; }
html[data-theme="medieval"] .pac-stage { display: none; }
html[data-theme="medieval"] .pac-key {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  color: var(--vellum);
  background: var(--enamel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 var(--enamel-side), var(--shadow-lift);
  animation: kf-float 3.4s ease-in-out infinite;
}
html[data-theme="medieval"] .pac-fab:hover .pac-key { color: var(--amber); }
html[data-theme="medieval"] .pac-fab:active .pac-key { transform: translateY(2px); box-shadow: 0 1px 0 var(--enamel-side); animation: none; }
html[data-theme="medieval"] .pac-fab:focus-visible .pac-key { box-shadow: 0 4px 0 var(--enamel-side), var(--shadow-focus); }
html[data-theme="medieval"] .pac-dots { position: static; display: flex; gap: 6px; transform: none; }
html[data-theme="medieval"] .pac-dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--led-off);
  box-shadow: none;
  animation-name: kf-leds;
}
@keyframes kf-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes kf-leds {
  0%, 32% { background: var(--led-on); box-shadow: 0 0 6px rgba(242, 70, 28, .8); opacity: 1; transform: none; }
  33%, 100% { background: var(--led-off); box-shadow: none; opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  html[data-theme="medieval"] .pac-fab { width: auto; height: auto; }
  html[data-theme="medieval"] .pac-key { width: 46px; height: 46px; }
  html[data-theme="medieval"] .pac-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="medieval"] .pac-key { animation: none; }
}

/* Вікно міні-ігор як книга-скриня: зелена смуга з назвою текстурою, панель
   гравця на світлому корпусі, пергаментні плитки й таблиця рекордів, рядок
   стану на склі дисплея. Замість сірого Win95 з arcade.css. */
html[data-theme="medieval"] .w95-overlay { background: color-mix(in srgb, var(--display) 72%, transparent); }
html[data-theme="medieval"] .w95 {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--chassis);
  font-family: var(--font-book);
  font-size: 15px;
  box-shadow: 0 0 0 1px var(--enamel-side), 0 4px 0 var(--enamel-side), var(--shadow-lift);
}
html[data-theme="medieval"] .w95-bar {
  height: auto;
  gap: 10px;
  padding: 8px 10px 8px 16px;
  color: var(--vellum);
  background: var(--panel);
}
html[data-theme="medieval"] .w95-bar-ico { display: none; }
html[data-theme="medieval"] .w95-bar-dice { display: inline-flex; color: var(--amber); }
html[data-theme="medieval"] .w95-bar-txt {
  font-family: var(--font-textura);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
html[data-theme="medieval"] .w95-bar-txt::first-letter { color: var(--vermilion); }
/* Клавіші вікна – малі кремові (Button vellum sm); «Звук» втиснута, коли ввімкнено. */
html[data-theme="medieval"] .w95-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  margin-bottom: 3px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--vellum);
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--vellum-side), var(--shadow-drop);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
html[data-theme="medieval"] .w95-btn:hover { filter: brightness(1.05); }
html[data-theme="medieval"] :is(.w95-btn:active, .w95-btn.on) {
  padding: 0 var(--space-3);
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 var(--vellum-side);
}
html[data-theme="medieval"] .w95-btn:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
html[data-theme="medieval"] .w95-btn[disabled] { opacity: .5; color: var(--ink); text-shadow: none; filter: none; transform: none; }
/* «Закрити» на смузі – кругла клавіша з лапчастим хрестом замість «✕». */
html[data-theme="medieval"] .w95-bar .w95-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 0;
}
html[data-theme="medieval"] .w95-bar .w95-btn:active { padding: 0; }
html[data-theme="medieval"] :is(.w95-bar .w95-btn, .w95-back)::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--kf-mask) center / contain no-repeat;
  mask: var(--kf-mask) center / contain no-repeat;
}
html[data-theme="medieval"] .w95-bar .w95-btn::before {
  --kf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(45 12 12)' d='M10.5 2.8L13.5 2.8L12.8 11.2L21.2 10.5L21.2 13.5L12.8 12.8L13.5 21.2L10.5 21.2L11.2 12.8L2.8 13.5L2.8 10.5L11.2 11.2Z'/%3E%3C/svg%3E");
}
html[data-theme="medieval"] .w95-arrow { display: none; }
html[data-theme="medieval"] .w95-back::before {
  --kf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 12H21'/%3E%3Cpath fill='%23000' stroke='none' d='M2.4 12L8.4 7.7L7.3 12L8.4 16.3Z'/%3E%3Cpath d='M16.2 12l2.4-2.6M16.2 12l2.4 2.6M18.9 12l2.4-2.6M18.9 12l2.4 2.6'/%3E%3C/svg%3E");
}
html[data-theme="medieval"] .w95-tools {
  gap: var(--space-2);
  margin: 0;
  padding: 10px 14px;
  background-color: var(--chassis-lit);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
html[data-theme="medieval"] .w95-tools .sep { display: none; }
html[data-theme="medieval"] .w95-nick { gap: 8px; padding: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
html[data-theme="medieval"] :is(.w95-nick input, .game-over input) {
  width: 132px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--key);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--vellum);
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 20px;
  box-shadow: inset 0 2px 3px rgba(43, 21, 17, .18);
}
html[data-theme="medieval"] :is(.w95-nick input, .game-over input):focus { outline: none; box-shadow: inset 0 2px 3px rgba(43, 21, 17, .18), var(--shadow-focus); }
html[data-theme="medieval"] .w95-body { margin: 0; background: none; box-shadow: none; }
html[data-theme="medieval"] .w95-body.playing { background: var(--display); }
html[data-theme="medieval"] .w95-pick { gap: var(--space-4); padding: var(--space-4); }
html[data-theme="medieval"] .w95-tiles { gap: var(--space-3); }
/* Плитки ігор: пергамент, піксельна мініатюра на темному склі. */
html[data-theme="medieval"] .w95-tile {
  width: 116px;
  gap: 4px;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  color: var(--ink);
  background-color: var(--vellum);
  font-family: var(--font-book);
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
  transition: transform .14s ease;
}
html[data-theme="medieval"] .w95-tile:hover { transform: translateY(-2px); }
html[data-theme="medieval"] .w95-tile:focus-visible { outline: none; box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-focus); }
html[data-theme="medieval"] .w95-tile canvas {
  box-sizing: content-box;
  margin-bottom: 4px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--display);
  box-shadow: var(--shadow-plate);
}
html[data-theme="medieval"] :is(.w95-tile:hover, .w95-tile:focus-visible) canvas { filter: none; }
html[data-theme="medieval"] .w95-tile .nm { padding: 0; font-size: 15px; line-height: 20px; }
html[data-theme="medieval"] :is(.w95-tile:hover, .w95-tile:focus-visible) .nm { color: var(--ink); background: none; }
html[data-theme="medieval"] .w95-tile .bs { color: var(--ink-muted); font-size: 13px; line-height: 16px; letter-spacing: .02em; }
/* Таблиця рекордів (ScoreTable): рядок поточного гравця червоний. */
html[data-theme="medieval"] .w95-board {
  width: 236px;
  padding: 12px 12px 10px;
  border-radius: var(--radius-md);
  background-color: var(--vellum);
  box-shadow: 0 3px 0 var(--vellum-side);
}
html[data-theme="medieval"] .w95-board h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-textura);
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}
html[data-theme="medieval"] .w95-board h3::first-letter { color: var(--vermilion); }
html[data-theme="medieval"] .w95-board h3::after { display: none; }
html[data-theme="medieval"] .w95-board table { font-size: 14px; line-height: 20px; }
html[data-theme="medieval"] .w95-board th {
  padding: 2px 6px;
  color: var(--ink-muted);
  background: none;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: none;
  border-bottom: 1px solid var(--vellum-side);
}
html[data-theme="medieval"] .w95-board td { padding: 3px 6px; color: var(--ink); }
html[data-theme="medieval"] .w95-board td.n { color: var(--ink-muted); }
html[data-theme="medieval"] :is(.w95-board tr.me td, .w95-board tr.me td.n) { color: var(--on-vermilion); background: var(--vermilion); }
html[data-theme="medieval"] .w95-board tr.me td:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
html[data-theme="medieval"] .w95-board tr.me td:last-child { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
html[data-theme="medieval"] .w95-board .none { padding: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
html[data-theme="medieval"] .w95-status { gap: var(--space-3); padding: 8px 14px; background-color: var(--display); font-size: 14px; line-height: 20px; }
html[data-theme="medieval"] .w95-status span { min-height: 0; padding: 0; box-shadow: none; }
html[data-theme="medieval"] .w95-status .s-main { color: var(--amber); }
html[data-theme="medieval"] .w95-status .s-side { color: var(--on-dark-muted); }
/* Сцена гри – темне скло; накладка кінця гри – тим самим склом. */
html[data-theme="medieval"] .game-stage { background: var(--display); }
html[data-theme="medieval"] .game-over { background: rgba(27, 21, 20, .86); font-family: var(--font-book); }
html[data-theme="medieval"] .game-over h2 { color: var(--amber); font-family: var(--font-textura); font-size: 28px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
html[data-theme="medieval"] .game-over h2::first-letter { color: var(--vermilion); }
html[data-theme="medieval"] .game-over p { font-size: 15px; line-height: 22px; }
html[data-theme="medieval"] .game-over .rank { color: var(--amber); }
html[data-theme="medieval"] :is(.game-hint, .doom-boot, .alien-boot) { color: var(--on-dark-muted); font-family: var(--font-book); }
html[data-theme="medieval"] :is(.doom-boot, .alien-boot) b { color: var(--amber); }
@media (max-width: 640px) {
  html[data-theme="medieval"] .w95-pick { flex-direction: column; }
  html[data-theme="medieval"] .w95-board { width: 100%; }
}

/* ==================== Бульбашка Скріпки (Balloon) ==================== */
/* Спрайт дає бібліотека clippyjs, система оформлює лише бульбашку: пергамент
   із чорнильною облямівкою, хвостик до персонажа, перша літера текстурою.
   Бібліотека пише стилі інлайном – звідси !important. */
html[data-theme="medieval"] .clippy-balloon {
  padding: 12px 14px 13px !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
  background-color: var(--vellum) !important;
  box-shadow: 0 3px 0 var(--vellum-side), var(--shadow-drop);
}
html[data-theme="medieval"] .clippy-text {
  max-width: 270px !important;
  font-family: var(--font-book) !important;
  font-size: 15px !important;
  line-height: 22px !important;
}
html[data-theme="medieval"] .clippy-text::first-letter {
  color: var(--vermilion);
  font-family: var(--font-textura);
  font-size: 28px;
  line-height: 20px;
}
html[data-theme="medieval"] .clippy-link {
  margin-top: 8px !important;
  color: var(--rubric) !important;
  font-weight: 500 !important;
  text-underline-offset: 3px;
}
/* Хвостик: бібліотека ставить його над чи під бульбашкою залежно від боку;
   замість її картинки – повернутий квадрат пергаменту з облямівкою. */
html[data-theme="medieval"] .clippy-tip {
  width: 14px !important;
  height: 14px !important;
  margin-top: -7px !important;
  border: 1.5px solid var(--ink);
  border-top: 0;
  border-left: 0;
  background: var(--vellum) !important;
  transform: rotate(45deg);
}
html[data-theme="medieval"] .clippy-tip[style*="margin-top: -16px"] { margin-top: -8px !important; transform: rotate(-135deg); }

/* ==================== Фактури й орнамент ==================== */
/* З design/textures.css: папір, ромбова сітка тла, гравіювання на плитах,
   стрічки, розетка, кути, арка, вітраж. Класи .kf-* дизайн-системи тут
   зіставлені з класами сайту за таблицею в design/README.md; нові елементи
   орнаменту (розділювач, кути, медальйон, арка) мають у розмітці ті самі класи
   .kf-* і атрибут hidden – у сучасній темі їх нема.
   Під час хвилі перемикання фактури – частина знімка компонента, окремо їх
   ніхто не анімує; коло нового тла несе і папір, і сітку. */
html[data-theme="medieval"] {
  --kf-tex-grain: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22g%22 x=%220%22 y=%220%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 seed=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.416 -0.144%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23g)%22/%3E%3C/svg%3E");
  --kf-tex-grain-light: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22g%22 x=%220%22 y=%220%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.95%22 numOctaves=%222%22 seed=%229%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.260 -0.090%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23g)%22/%3E%3C/svg%3E");
  --kf-tex-mottle: url("data:image/png;base64,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");
  --kf-tex-flecks: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22420%22%3E%3Ccircle cx=%22165.83%22 cy=%2220.28%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22165.83%22 cy=%22440.28%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22153.59%22 cy=%2224.36%22 r=%221.7%22 fill=%22%232a1a14%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%2236.1%22 cy=%22175.63%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.24%22/%3E%3Ccircle cx=%22178.3%22 cy=%22347.28%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%22264.86%22 cy=%22244.86%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22166.61%22 cy=%22410.03%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%22166.61%22 cy=%22-9.97%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%2255.93%22 cy=%22176.04%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22129.56%22 cy=%22342.77%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%22239.91%22 cy=%2278.91%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%2226.37%22 cy=%2225.03%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22223.32%22 cy=%22326.44%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22190.34%22 cy=%22125.9%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%22327.53%22 cy=%2234.38%22 r=%221.7%22 fill=%22%232a1a14%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%22367.56%22 cy=%22306.37%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%2230.74%22 cy=%22215.01%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%2263.83%22 cy=%22205.36%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%2232.6%22 cy=%22234.39%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22131.77%22 cy=%22292.02%22 r=%221.7%22 fill=%22%232a1a14%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%22334.69%22 cy=%2228.88%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22199.12%22 cy=%22278.94%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22130.04%22 cy=%22242.74%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22119.53%22 cy=%22162.03%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22395.07%22 cy=%22149.29%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.27%22/%3E%3Ccircle cx=%2224.76%22 cy=%22322.66%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%22167.12%22 cy=%22385.06%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22188.66%22 cy=%22230.76%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%22362.87%22 cy=%22116.94%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22286.74%22 cy=%22159.79%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.45%22/%3E%3Ccircle cx=%2274.01%22 cy=%2297.42%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22349.06%22 cy=%2276.58%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.18%22/%3E%3Ccircle cx=%22175.96%22 cy=%22155.09%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.18%22/%3E%3Ccircle cx=%2252.71%22 cy=%22360.86%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.27%22/%3E%3Ccircle cx=%22310.71%22 cy=%22191.79%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%22367.3%22 cy=%22335.11%22 r=%221.7%22 fill=%22%232a1a14%22 fill-opacity=%220.39%22/%3E%3Ccircle cx=%22165.53%22 cy=%22202.24%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%2228.29%22 cy=%2287.68%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%22252.31%22 cy=%2243%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%2242.62%22 cy=%22152.72%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%2287.34%22 cy=%22158.02%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%22145.9%22 cy=%22152.95%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%22204.99%22 cy=%22410.69%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%22204.99%22 cy=%22-9.31%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.21%22/%3E%3Ccircle cx=%2236.07%22 cy=%2242.92%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22201.02%22 cy=%22290.66%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22399.41%22 cy=%22221.87%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.19%22/%3E%3Ccircle cx=%22-20.59%22 cy=%22221.87%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.19%22/%3E%3Ccircle cx=%22383.94%22 cy=%22318.42%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.37%22/%3E%3Ccircle cx=%22362.6%22 cy=%22292.4%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22381.47%22 cy=%22149.39%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%22327.2%22 cy=%22138.46%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.32%22/%3E%3Ccircle cx=%22331.13%22 cy=%22318.5%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22343.7%22 cy=%22310.75%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22206.97%22 cy=%22307.02%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%22198.34%22 cy=%2281.33%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.39%22/%3E%3Ccircle cx=%22187.84%22 cy=%22393.55%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22153.15%22 cy=%2292.59%22 r=%220.7%22 fill=%22%232a1a14%22 fill-opacity=%220.44%22/%3E%3Ccircle cx=%22141.85%22 cy=%22202.71%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.31%22/%3E%3Ccircle cx=%22201.38%22 cy=%22274.25%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%22350.55%22 cy=%2250.36%22 r=%221.7%22 fill=%22%232a1a14%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22315.06%22 cy=%22200.77%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.39%22/%3E%3Ccircle cx=%22267.05%22 cy=%2236.43%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.30%22/%3E%3Ccircle cx=%22168.58%22 cy=%22397.65%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22168.58%22 cy=%22-22.35%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22417.11%22 cy=%2211.57%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22417.11%22 cy=%22431.57%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22-2.89%22 cy=%2211.57%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22-2.89%22 cy=%22431.57%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.22%22/%3E%3Ccircle cx=%22338.73%22 cy=%2261.39%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.42%22/%3E%3Ccircle cx=%22199.23%22 cy=%22393.74%22 r=%221.7%22 fill=%22%232a1a14%22 fill-opacity=%220.34%22/%3E%3Ccircle cx=%2255.01%22 cy=%225.98%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%2255.01%22 cy=%22425.98%22 r=%220.6%22 fill=%22%232a1a14%22 fill-opacity=%220.33%22/%3E%3Ccircle cx=%22221.16%22 cy=%22392.12%22 r=%221.3%22 fill=%22%232a1a14%22 fill-opacity=%220.36%22/%3E%3Ccircle cx=%2281.82%22 cy=%22367.04%22 r=%220.8%22 fill=%22%232a1a14%22 fill-opacity=%220.45%22/%3E%3Ccircle cx=%22123.05%22 cy=%22101.03%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%22228.63%22 cy=%22350.36%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.27%22/%3E%3Ccircle cx=%22148.59%22 cy=%22192.43%22 r=%220.5%22 fill=%22%232a1a14%22 fill-opacity=%220.43%22/%3E%3Ccircle cx=%22217.04%22 cy=%22347.4%22 r=%221.0%22 fill=%22%232a1a14%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22219.87%22 cy=%227.86%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%22219.87%22 cy=%22427.86%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.41%22/%3E%3Ccircle cx=%22255.59%22 cy=%22325.94%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.48%22/%3E%3Ccircle cx=%22198.87%22 cy=%22304.58%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.30%22/%3E%3Ccircle cx=%22217.71%22 cy=%22233.29%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%2223.87%22 cy=%2280.35%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.51%22/%3E%3Ccircle cx=%22443.87%22 cy=%2280.35%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.51%22/%3E%3Ccircle cx=%22213.24%22 cy=%22235.93%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.48%22/%3E%3Ccircle cx=%22257.26%22 cy=%22212.33%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22189.99%22 cy=%22223.98%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.46%22/%3E%3Ccircle cx=%22104.02%22 cy=%22219.75%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%22374.96%22 cy=%2285.09%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.53%22/%3E%3Ccircle cx=%2251.08%22 cy=%22185.69%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22179.9%22 cy=%2289.33%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.45%22/%3E%3Ccircle cx=%22376.75%22 cy=%2264.87%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.49%22/%3E%3Ccircle cx=%22370.79%22 cy=%22406.37%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%22370.79%22 cy=%22-13.63%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%2239.53%22 cy=%22371.67%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.47%22/%3E%3Ccircle cx=%22349.63%22 cy=%2267.82%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22169.6%22 cy=%22176.94%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.55%22/%3E%3Ccircle cx=%22303.3%22 cy=%228.18%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22303.3%22 cy=%22428.18%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%227.59%22 cy=%22139.23%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%22427.59%22 cy=%22139.23%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.38%22/%3E%3Ccircle cx=%2227%22 cy=%22413.73%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%2227%22 cy=%22-6.27%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.40%22/%3E%3Ccircle cx=%2244.01%22 cy=%22111.54%22 r=%220.8%22 fill=%22%23fff6e0%22 fill-opacity=%220.54%22/%3E%3Ccircle cx=%2276.25%22 cy=%22317.43%22 r=%220.6%22 fill=%22%23fff6e0%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22283.91%22 cy=%22397.32%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.50%22/%3E%3Ccircle cx=%22283.91%22 cy=%22-22.68%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.50%22/%3E%3Ccircle cx=%22386.05%22 cy=%22239.65%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.29%22/%3E%3Ccircle cx=%2224.16%22 cy=%22289.05%22 r=%221.0%22 fill=%22%23fff6e0%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22112.95%22 cy=%227.07%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.52%22/%3E%3Ccircle cx=%22112.95%22 cy=%22427.07%22 r=%221.4%22 fill=%22%23fff6e0%22 fill-opacity=%220.52%22/%3E%3Cpath d=%22M111.07 51.1Q113.59 55.07 117.38 57.85%22 stroke=%22%232a1a14%22 stroke-opacity=%220.15%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M261.12 18.15Q257.05 18.88 252.96 18.29%22 stroke=%22%232a1a14%22 stroke-opacity=%220.25%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M261.12 438.15Q257.05 438.88 252.96 438.29%22 stroke=%22%232a1a14%22 stroke-opacity=%220.25%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M76.08 391.54Q66.56 389.59 58.49 395.01%22 stroke=%22%232a1a14%22 stroke-opacity=%220.16%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M282.31 113.62Q283.83 122.21 280.67 130.34%22 stroke=%22%232a1a14%22 stroke-opacity=%220.18%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M212.37 410.78Q202.81 414.65 193.13 411.11%22 stroke=%22%232a1a14%22 stroke-opacity=%220.12%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M212.37 -9.22Q202.81 -5.35 193.13 -8.89%22 stroke=%22%232a1a14%22 stroke-opacity=%220.12%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M273.04 275.73Q278.79 280.73 283.94 286.33%22 stroke=%22%232a1a14%22 stroke-opacity=%220.21%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M90.38 96.42Q81.74 95.56 75.68 101.78%22 stroke=%22%232a1a14%22 stroke-opacity=%220.16%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M415.56 412.39Q409.88 412.64 405.52 416.3%22 stroke=%22%232a1a14%22 stroke-opacity=%220.14%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M415.56 -7.61Q409.88 -7.36 405.52 -3.7%22 stroke=%22%232a1a14%22 stroke-opacity=%220.14%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M-4.44 412.39Q-10.12 412.64 -14.48 416.3%22 stroke=%22%232a1a14%22 stroke-opacity=%220.14%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M-4.44 -7.61Q-10.12 -7.36 -14.48 -3.7%22 stroke=%22%232a1a14%22 stroke-opacity=%220.14%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M180.91 23.27Q190.72 24.71 200.61 24.15%22 stroke=%22%232a1a14%22 stroke-opacity=%220.24%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M180.91 443.27Q190.72 444.71 200.61 444.15%22 stroke=%22%232a1a14%22 stroke-opacity=%220.24%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M251.49 290.93Q254.61 299 257.82 307.04%22 stroke=%22%232a1a14%22 stroke-opacity=%220.26%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M152.94 138.15Q157.56 138.98 160.15 142.9%22 stroke=%22%232a1a14%22 stroke-opacity=%220.12%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M91.5 76.84Q100.41 84.14 102.97 95.37%22 stroke=%22%232a1a14%22 stroke-opacity=%220.24%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M104.24 326.02Q110.82 325.97 116.49 329.33%22 stroke=%22%232a1a14%22 stroke-opacity=%220.21%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3Cpath d=%22M165.47 125.85Q163.13 130.76 157.69 130.89%22 stroke=%22%232a1a14%22 stroke-opacity=%220.20%22 stroke-width=%22.6%22 fill=%22none%22/%3E%3C/svg%3E");
  --kf-pat-diaper: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cpath d=%22M24.0 0L48 24.0L24.0 48L0 24.0Z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cg fill=%22%23000%22%3E%3Ccircle cx=%2224%22 cy=%2221%22 r=%222.1%22/%3E%3Ccircle cx=%2227%22 cy=%2224%22 r=%222.1%22/%3E%3Ccircle cx=%2224%22 cy=%2227%22 r=%222.1%22/%3E%3Ccircle cx=%2221%22 cy=%2224%22 r=%222.1%22/%3E%3Ccircle cx=%2224.0%22 cy=%2224.0%22 r=%221%22/%3E%3Cpath d=%22M0 -3.2L3.2 0L0 3.2L-3.2 0Z%22/%3E%3Cpath d=%22M48 -3.2L51.2 0L48 3.2L44.8 0Z%22/%3E%3Cpath d=%22M0 44.8L3.2 48L0 51.2L-3.2 48Z%22/%3E%3Cpath d=%22M48 44.8L51.2 48L48 51.2L44.8 48Z%22/%3E%3C/g%3E%3C/svg%3E");
  --kf-pat-tracery: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22%3E%3Ccircle cx=%2232.0%22 cy=%2232.0%22 r=%2229.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%2232%22 cy=%2223.5%22 r=%228.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2240.5%22 cy=%2232%22 r=%228.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2232%22 cy=%2240.5%22 r=%228.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2223.5%22 cy=%2232%22 r=%228.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2232.0%22 cy=%2232.0%22 r=%222.4%22 fill=%22%23000%22/%3E%3Cpath d=%22M0 -5L5 0L0 5L-5 0Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M64 -5L69 0L64 5L59 0Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M0 59L5 64L0 69L-5 64Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M64 59L69 64L64 69L59 64Z%22 fill=%22%23000%22/%3E%3C/svg%3E");
  --kf-pat-window: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2272%22 height=%2272%22 viewBox=%220 0 72 72%22%3E%3Ccircle cx=%2236.0%22 cy=%2236.0%22 r=%2233.0%22 fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%2236%22 cy=%2227.5%22 r=%228.2%22 fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2244.5%22 cy=%2236%22 r=%228.2%22 fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2236%22 cy=%2244.5%22 r=%228.2%22 fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2227.5%22 cy=%2236%22 r=%228.2%22 fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2236.0%22 cy=%2236.0%22 r=%222.4%22 fill=%22%23e8dfc8%22/%3E%3Cpath d=%22M0 -5L5 0L0 5L-5 0Z%22 fill=%22%23e8dfc8%22/%3E%3Cpath d=%22M72 -5L77 0L72 5L67 0Z%22 fill=%22%23e8dfc8%22/%3E%3Cpath d=%22M0 67L5 72L0 77L-5 72Z%22 fill=%22%23e8dfc8%22/%3E%3Cpath d=%22M72 67L77 72L72 77L67 72Z%22 fill=%22%23e8dfc8%22/%3E%3C/svg%3E");
  --kf-band-rinceau: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2272%22 height=%2222%22 viewBox=%220 0 72 22%22%3E%3Cpath d=%22M0 11.0C9 4.0 27 4.0 36 11.0S63 18.0 72 11.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22/%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M18 5.75q-3.2 -1.2 -3.4 -4.2q2.6 0.4 3.4 4.2z%22/%3E%3Cpath d=%22M18 5.75q3.2 -1.2 3.4 -4.2q-2.6 0.4 -3.4 4.2z%22/%3E%3Cellipse cx=%2218%22 cy=%222.15%22 rx=%221.5%22 ry=%222.6%22/%3E%3Cpath d=%22M54 16.25q-3.2 1.2 -3.4 4.2q2.6 -0.4 3.4 -4.2z%22/%3E%3Cpath d=%22M54 16.25q3.2 1.2 3.4 4.2q-2.6 -0.4 -3.4 -4.2z%22/%3E%3Cellipse cx=%2254%22 cy=%2219.85%22 rx=%221.5%22 ry=%222.6%22/%3E%3Ccircle cx=%2218%22 cy=%2215.2%22 r=%221.3%22/%3E%3Ccircle cx=%2254%22 cy=%226.8%22 r=%221.3%22/%3E%3C/g%3E%3Cpath d=%22M31.68 9.4c-1.5-2.8 .6-5 2.4-3.6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3Cpath d=%22M67.68 12.6c-1.5 2.8 .6 5 2.4 3.6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E");
  --kf-band-frieze: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2214%22 viewBox=%220 0 24 14%22%3E%3Cg fill=%22%23000%22%3E%3Crect y=%220%22 width=%2224%22 height=%221.4%22/%3E%3Crect y=%2212.6%22 width=%2224%22 height=%221.4%22/%3E%3Cpath d=%22M0 11.2L6.0 3.4L12.0 11.2Z%22/%3E%3Cpath d=%22M12.0 2.8L18.0 10.6L24 2.8Z%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%2218.0%22 cy=%224.2%22 r=%221.3%22/%3E%3Ccircle cx=%226.0%22 cy=%229.8%22 r=%221.3%22/%3E%3C/g%3E%3C/svg%3E");
  --kf-arch-opening: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -14 200 294%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M24 280V116C24 76 54 46 100 34C146 46 176 76 176 116V280Z%22 fill=%22%23000%22/%3E%3C/svg%3E");
}

/* Папір: сторінка й кожна пергаментна поверхня – волокна, зерно, м'які плями.
   Папір лежить на <html>, ромбова сітка – body::before під вмістом. */
html[data-theme="medieval"] { background-color: var(--chassis); background-image: var(--kf-tex-flecks), var(--kf-tex-grain), var(--kf-tex-mottle); background-size: auto, auto, 576px; }
html[data-theme="medieval"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--hairline); opacity: .16; -webkit-mask: var(--kf-pat-diaper); mask: var(--kf-pat-diaper); }
html[data-theme="medieval"] :is(.continue-card, .episode, .disc-card, .disc-row, .wl-row, .ghero-desc, .poster-fallback, .detail-fallback, .w95-board, .w95-tile, .initial) {
  background-color: var(--vellum);
  background-image: var(--kf-tex-flecks), var(--kf-tex-grain), var(--kf-tex-mottle);
  background-size: auto, auto, 576px;
}
/* Бульбашку Скріпки бібліотека фарбує інлайном – звідси !important. */
html[data-theme="medieval"] .clippy-balloon {
  background-image: var(--kf-tex-flecks), var(--kf-tex-grain), var(--kf-tex-mottle) !important;
  background-size: auto, auto, 576px !important;
}
/* Світлий корпус (порожні стани, форма, особливості гри, панель аркади): зерно й плями. */
html[data-theme="medieval"] :is(.empty, .wl-empty, .ep-empty, .gfeat, .wl-add, .w95-tools) { background-image: var(--kf-tex-grain), var(--kf-tex-mottle); background-size: auto, 576px; }

/* Емаль: ледь помітний гравійований ажур під вмістом плити. */
html[data-theme="medieval"] :is(.topbar, .player-frame, .ghero-inner, .gdetail-head, .login-card) { isolation: isolate; }
html[data-theme="medieval"] :is(.topbar, .player-frame, .ghero-inner, .gdetail-head, .login-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 0;
  border-radius: inherit;
  background: var(--enamel-side);
  opacity: .35;
  -webkit-mask: var(--kf-pat-tracery) center / 64px;
  mask: var(--kf-pat-tracery) center / 64px;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  pointer-events: none;
}

/* Скло дисплея: дрібний світлий пил. */
html[data-theme="medieval"] :is(.storage, .pc, .w95-status, .nav-badge, .nav-btn.active .nav-badge, .row-toggle-n, .e-time, .disc-tab-n, .disc-tab.active .disc-tab-n, .gc-n) { background-image: var(--kf-tex-grain-light); }

/* Стрічки й розділювач (Divider): між «Усіма тайтлами» й «Переглянутим» і
   перед галереєю гри – не частіше одного разу на екран. */
html[data-theme="medieval"] .kf-band { display: block; height: 22px; background: var(--hairline); -webkit-mask: var(--kf-band-rinceau) repeat-x center / auto 22px; mask: var(--kf-band-rinceau) repeat-x center / auto 22px; }
html[data-theme="medieval"] .kf-band--frieze { height: 14px; -webkit-mask: var(--kf-band-frieze) repeat-x center / auto 14px; mask: var(--kf-band-frieze) repeat-x center / auto 14px; }
html[data-theme="medieval"] .kf-band--rubric { background: var(--rubric); }
html[data-theme="medieval"] .kf-band--gilt { background: var(--gilt); }
html[data-theme="medieval"] .kf-band--hairline { background: var(--hairline); }
html[data-theme="medieval"] .kf-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; color: var(--rubric); }
html[data-theme="medieval"] .kf-divider .kf-band { flex: 1 1 auto; }
html[data-theme="medieval"] .kf-divider .kf-ornament--fleuron { width: 56px; height: 28px; flex: 0 0 auto; }
/* Над «Переглянутим» відступ дає сама секція, під розділювачем – звичний до заголовка. */
html[data-theme="medieval"] #watched-section > .kf-divider,
html[data-theme="medieval"] .gdetail-body > .kf-divider { margin: 0 0 var(--space-6); }

/* Кольори орнаменту. */
html[data-theme="medieval"] .kf-ornament-wrap { display: inline-flex; flex: 0 0 auto; line-height: 0; }
html[data-theme="medieval"] .kf-ornament { display: block; }
html[data-theme="medieval"] .o-gilt { fill: var(--gilt); }
html[data-theme="medieval"] .o-gilt-s { stroke: var(--gilt); }
html[data-theme="medieval"] .o-verm { fill: var(--vermilion); }
html[data-theme="medieval"] .o-vellum { fill: var(--vellum); }
html[data-theme="medieval"] .o-lapis { fill: var(--lapis); }
html[data-theme="medieval"] .o-verd { fill: var(--verdigris); }
html[data-theme="medieval"] .o-ink { fill: var(--ink); }
html[data-theme="medieval"] .o-ink-s { stroke: var(--ink); }
html[data-theme="medieval"] .o-stone { fill: var(--stone); }
html[data-theme="medieval"] .o-stone-edge { stroke: var(--ink); }
html[data-theme="medieval"] .kf-ornament--roundel { width: 96px; height: 96px; }
html[data-theme="medieval"] .kf-ornament--fleuron { width: 48px; height: 24px; }

/* Кути (Corners): один завиток, віддзеркалений у чотири кути картки. */
html[data-theme="medieval"] .kf-corners { position: absolute; inset: 6px; display: block; pointer-events: none; color: var(--rubric); }
html[data-theme="medieval"] .kf-corners > .kf-ornament--corner { position: absolute; width: 36px; height: 36px; }
html[data-theme="medieval"] .kf-corners > :nth-child(1) { left: 0; top: 0; }
html[data-theme="medieval"] .kf-corners > :nth-child(2) { right: 0; top: 0; transform: scaleX(-1); }
html[data-theme="medieval"] .kf-corners > :nth-child(3) { left: 0; bottom: 0; transform: scaleY(-1); }
html[data-theme="medieval"] .kf-corners > :nth-child(4) { right: 0; bottom: 0; transform: scale(-1, -1); }
html[data-theme="medieval"] .kf-corners--gilt { color: var(--gilt); }

/* Порожній стан (EmptyState): кути в рамці, медальйон, речення під ним. */
html[data-theme="medieval"] :is(.empty, .wl-empty, .ep-empty) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
html[data-theme="medieval"] :is(.empty, .wl-empty, .ep-empty) .kf-ornament--roundel { width: 88px; height: 88px; }
html[data-theme="medieval"] .empty-text { max-width: 46ch; }

/* Готична арка (ArchFrame) навколо одиничного постера тайтла: картинка
   обрізана по отвору арки, над нею – камінь із краббами й фіалом. Без
   постера в арці стоїть буквиця. */
html[data-theme="medieval"] .poster-arch { position: relative; display: block; flex: 0 0 auto; width: 190px; aspect-ratio: 200 / 294; }
/* .detail-head – щоб перебити розмір і тінь заглушки з розділу «Сторінка тайтла». */
html[data-theme="medieval"] .detail-head .poster-arch :is(.detail-poster, .detail-fallback) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--grille);
  box-shadow: none;
  -webkit-mask: var(--kf-arch-opening) center / 100% 100% no-repeat;
  mask: var(--kf-arch-opening) center / 100% 100% no-repeat;
}
html[data-theme="medieval"] .poster-arch > .kf-ornament-wrap { position: absolute; inset: 0; display: block; pointer-events: none; }
html[data-theme="medieval"] .poster-arch .kf-ornament--arch { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(43, 21, 17, .35)); }
@media (max-width: 640px) {
  html[data-theme="medieval"] .poster-arch { width: 140px; }
  /* У вужчій арці буквиця 96px заходила б кутами під камінь. */
  html[data-theme="medieval"] .poster-arch .initial-lg { --kf-size: 72px; }
}

/* Золота облямівка всередині рамки героя й банера гри. */
html[data-theme="medieval"] .ghero::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--gilt);
  border-radius: calc(var(--radius-md) - 3px);
  pointer-events: none;
  opacity: .85;
}
html[data-theme="medieval"] .gdetail-hero::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: calc(var(--banner) - 12px);
  border: 2px solid var(--gilt);
  border-radius: calc(var(--radius-md) - 3px);
  pointer-events: none;
  opacity: .85;
}
html[data-theme="medieval"] :is(.gdetail-poster, .gdetail-head) { z-index: 1; }

/* Стрілчасте вікно з лазурі й ажуру в кам'яній рамі за карткою входу.
   body::before уже зайнятий ромбовою сіткою, тож вікно – body::after. */
html[data-theme="medieval"] .login-body { position: relative; isolation: isolate; }
html[data-theme="medieval"] .login-body::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(520px, 88vw);
  height: min(720px, 90%);
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px;
  background: var(--kf-pat-window) center / 72px, var(--lapis);
  box-shadow: 0 0 0 10px var(--stone), 0 0 0 12px var(--ink), 0 18px 30px -12px rgba(28, 14, 6, .6);
}

@media (prefers-reduced-transparency: reduce) { html[data-theme="medieval"] body::before { display: none; } }

/* ---------- курсор ----------
   Замість стрілки – гусяче перо (точка кліку – кінчик), над тим, що
   натискається, – рука-вказівник із полів рукописів. Світлий ореол тримає
   обидва видимими на темних плитах. Поля вводу лишають текстову риску, а
   вимкнені кнопки і спеціальні стани (прихований курсор у плеєрі) мають свої
   правила з вищою специфічністю. */
html[data-theme="medieval"] {
  --kf-cursor-quill: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22translate(2.2 2.2) rotate(45)%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cg fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%223.4%22%3E%3Cpath d=%22M9 0C15-7.5 28-8 38-1.2V1.2C28 5 17 5.5 9 0Z%22/%3E%3Cpath d=%22M0 0L7.5-2.3V2.3Z%22/%3E%3C/g%3E%3Cg stroke=%22%232a1a14%22%3E%3Cpath d=%22M9 0C15-7.5 28-8 38-1.2V1.2C28 5 17 5.5 9 0Z%22 fill=%22%23e8dfc8%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M14-2.6L17-5.2M19-3.6L22.5-6.4M24-4L28-6.6M29-3.8L32.5-5.2M15 1.6L18 3.4M21 2.4L24.5 3.8M27 2.6L30.5 3.2%22 fill=%22none%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M6 0H38%22 fill=%22none%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M0 0L7.5-2.3V2.3Z%22 fill=%22%232a1a14%22 stroke-width=%221%22/%3E%3C/g%3E%3Cpath d=%22M1.6 0H5%22 fill=%22none%22 stroke=%22%23c4321a%22 stroke-width=%22.7%22/%3E%3C/g%3E%3C/svg%3E") 2 2;
  --kf-cursor-hand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cg fill=%22none%22 stroke=%22%23e8dfc8%22 stroke-width=%223.4%22%3E%3Cpath d=%22M11.4 3C11.4 1.2 14.6 1.2 14.6 3V13.2C14.6 11.7 17.6 11.7 17.6 13.4C17.6 12 20.6 12 20.6 13.8C20.6 12.6 23.4 12.8 23.4 14.4V20.6C23.4 24.4 21 26.6 17.4 26.6H13.6C11.4 26.6 10 25.6 8.8 24L5 19C4.1 17.8 5.9 16.1 7.3 17.2L11.4 20.2Z%22/%3E%3Cpath d=%22M11.8 26.6H22.6L22.2 30.2H12.2Z%22/%3E%3C/g%3E%3Cg stroke=%22%232a1a14%22 stroke-width=%221.3%22%3E%3Cpath d=%22M11.4 3C11.4 1.2 14.6 1.2 14.6 3V13.2C14.6 11.7 17.6 11.7 17.6 13.4C17.6 12 20.6 12 20.6 13.8C20.6 12.6 23.4 12.8 23.4 14.4V20.6C23.4 24.4 21 26.6 17.4 26.6H13.6C11.4 26.6 10 25.6 8.8 24L5 19C4.1 17.8 5.9 16.1 7.3 17.2L11.4 20.2Z%22 fill=%22%23e8dfc8%22/%3E%3Cpath d=%22M17.6 13.6V16.4M20.6 13.9V16.6M11.4 13.4H14.6%22 fill=%22none%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M11.8 26.6H22.6L22.2 30.2H12.2Z%22 fill=%22%23c4321a%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 13 1;
  cursor: var(--kf-cursor-quill), auto;
}
html[data-theme="medieval"] :where(a[href], button:not(:disabled), [role="button"], [role="tab"], summary, label[for], select,
  input:is([type="checkbox"], [type="radio"], [type="range"]),
  .brand, .grab-chip, .icon-btn, .continue-card, .card, .row-toggle, .back, .episode, #player, .pc-intro, .pc-seek,
  .pc-btn, .pc-vol-range, .player-close, .player-bar-close, .btn-ghost, .btn-primary, .wl-del, .wl-edit, .nav-btn,
  .disc-hide, .disc-tab, .ghero-slide, .ghero-dot, .ghero-step, .gchk, .gshot, .gal-nav, .pac-fab, .w95-btn, .w95-tile) {
  cursor: var(--kf-cursor-hand), pointer;
}
/* #player і повзунок гучності в style.css мають сильніші селектори (повзунок –
   окремими правилами: чужий префікс зламав би весь список). */
html[data-theme="medieval"] #player { cursor: var(--kf-cursor-hand), pointer; }
html[data-theme="medieval"] .pc-vol-range::-webkit-slider-thumb { cursor: var(--kf-cursor-hand), pointer; }
html[data-theme="medieval"] .pc-vol-range::-moz-range-thumb { cursor: var(--kf-cursor-hand), pointer; }
html[data-theme="medieval"] :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea) { cursor: text; }
html[data-theme="medieval"] :is(button:disabled, .pc-btn:disabled, .btn-ghost:disabled, .btn-primary:disabled, .w95-btn[disabled], .w95-bar) {
  cursor: var(--kf-cursor-quill), default;
}