/* === ФОНТИ =============================================================== */
@font-face {
  font-family:"Final Fantasy Script Collection - Final Fantasy VII";
  src:url("https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/fonts/Final_Fantasy_VII.eot") format("eot"),
      url("https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/fonts/Final_Fantasy_VII.woff") format("woff"),
      url("https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/fonts/Final_Fantasy_VII.ttf") format("truetype"),
      url("https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/fonts/Final_Fantasy_VII.svg#FinalFantasyVII") format("svg");
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family: "Final Fantasy VII";
  src: url("fonts/Final_Fantasy_VII.ttf") format("truetype");
  font-weight: 2;
  font-style: normal;
    --bg-img: url("https://i.pinimg.com/736x/7e/eb/d4/7eebd4379d7fcb9a5b8630ca58e7d9e6.jpg");
  --tiles-x: 3;               /* рівно три плитки по горизонталі */
  --scanline-alpha: .15;      /* інтенсивність «смужок» */
}

/* === ТЕМА / ЗМІННІ ====================================================== */
:root {
  --bg:           #421f3f;   /* фон */
  --ink:          #f8be87;   /* текст */
  --muted:        #f9a160;   /* приглушений текст */
  --link:         #ff5757;   /* посилання */
  --rule:         #59898c;   /* тонкі розділювачі */
  --frame-dark:   #315c69;   /* зовнішня темна рамка */
  --frame:        #82b6aa;   /* внутрішня світла рамка */
  --container:    1920px;    /* макс. ширина всієї сітки */
  --gap: clamp(1px, 4vw, 124px);
  --radius:       15px;
    --bandA: 140px;       /* висота сектора з ГУСТИМИ лініями */
  --bandB: 80px;        /* висота сектора з РІДКИМИ лініями */

  --bg-url: url("https://i.pinimg.com/736x/7e/eb/d4/7eebd4379d7fcb9a5b8630ca58e7d9e6.jpg");
  --tiles-x: 3;                 /* рівно 3 плитки по горизонталі */

  --scanline-alpha: .20;
  --scanline-height: 4px;

  /* чергування секторів */
  --bandA: 140px;               /* висота сектора густих ліній */
  --bandB: 80px;                /* висота сектора рідких ліній */

  /* щільність та контраст ліній */
  --dense-step: 2px;            /* 1px лінія + 1px зазор */
  --sparse-step: 3px;           /* 1px лінія + 4px зазор */
  --dense-alpha: .02;
  --sparse-alpha: .32;


  --scrollY: 0px;
  
    --stamps-h: 64px;     /* висота смуги */
  --stamps-gap: 64px;   /* проміжок між штампами */
  --stamps-speed: 60s;   /* пікселів/сек (швидкість) */
  
  
}

/* === БАЗА =============================================================== */


body{
    color: var(--ink);
  position: relative;
  isolation: isolate; /* створює власний stacking context, контент буде вище */
    font: 16px/1.55 "Final Fantasy VII", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;

  /* Кастомний курсор */
  cursor: url("assets/cursor/st_1.cur"), auto;
  
}
/* дві сітки смужок: горизонтальні (крок 2px) + вертикальні (крок 3px) */
body::before {
    color: var(--ink);
  content: "";
  inset: 0;
  pointer-events: none;          /* не заважає клікам */
  z-index: -10;                   /* між фоном body та контентом */

  /* смужки як окремі шари */
  background-image:
    /* горизонтальні scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.35) 0px,
      rgba(0,0,0,.35) 1px,
      rgba(0,0,0,  0) 1px,
      rgba(0,0,0,  0) 2px
    );

  background-repeat: repeat, repeat;
  background-size: 100% 100%, 100% 100%;
  background-position: 0 0, 0 0;

  /* акуратніше накладання на фон */
  mix-blend-mode: multiply;      /* смужки «множаться» з підкладкою */

}


html, body {
   html, body{
margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  min-height: 100vh;

  background-image:
    linear-gradient(to bottom, rgba(18,16,16,0) 50%, rgba(0,0,0,var(--scanline-alpha)) 50%),
    var(--bg-url);

  background-size:
    100% var(--scanline-height),
    calc(100vw / var(--tiles-x)) auto;

  background-repeat:
    repeat,
    repeat;

  background-position:
    0 0,
    center top;

  background-attachment:
    scroll,
    fixed;

  background-blend-mode:
    multiply,
    normal;

  background-color:#000;
}

/* === 2) Накладка смуг з чітким чергуванням секторів === */
body{ position: relative; isolation: isolate; }

/* ГУСТІ лінії: видимі лише в секторах A.
   Лінії фіксовані (fixed) — не рухаються; маска зсувається на --scrollY */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-3;                     /* над фоном body, під контентом */
  mix-blend-mode:multiply;

  /* самі лінії (щільні) — фіксовані до камери */
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,var(--dense-alpha)) 0 1px,
      rgba(0,0,0,0)                   2px var(--dense-step)
    );
  background-repeat: repeat;
  background-size: 100% 100%;
  background-position: 0 0;


}

/* РІДКІ лінії: видимі лише в секторах B.
   Лінії теж фіксовані; маска зсунута на скрол + висоту сектора A (щоб чергуватися) */



body.homebrew .layout {
  display: grid;
  grid-template-columns: 260px 1fr; /* Ліва + центральна */
  gap: 16px;
}

body.homebrew main.page {
  max-width: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link);    border-radius: 15px;   text-decoration: underline wavy indianred; }
a:hover {
  text-decoration: underline;
  cursor: url("assets/cursor/hov_1.cur"), pointer; 
}
hr { border: 0; border-top: 1px solid var(--rule); }
:focus-visible { outline: 2px dashed var(--link); outline-offset: 2px; }

/* === СІТКИ =============================================================== */
.layout {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(1080px, 1fr) minmax(280px, 430px);
  gap: 15px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--gap);
}
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.page { min-width: 0; }

.columns { display: flex; gap: 10px; }
.column { flex: 1; gap: 10px; }

/* Журнал — грід 3/2/1 */
.journal-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
@media (max-width: 900px){ .journal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .journal-grid{ grid-template-columns: 1fr; } }

/* === ТЕКСТ =============================================================== */
.txt {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: 14px;
  line-height: 1.1;
  color: #f7dbb6;
  text-shadow: 2px 2px #000;
}
.txt_small {
  margin: 5px;
  font-size: 12px;
  line-height: 1.05;
  color: #f9a160;
  text-shadow: 2px 2px #000;
}
.small_accent {
  display: inline-block;
  padding: 4px 10px;
  background: #315c69;
  color: #f8be87;
  border-radius: 999px;
  margin: 10px;
  font-size: 16px;
  text-shadow: 2px 2px #000;
}

/* === КАРТКИ / РАМКИ ====================================================== */
.box, nav, .badges, section.bio, .note {
  /* тюнити можна цими змінними: */
  --glass-darken: .45;   /* наскільки затемнювати 0..1 */
  --glass-opacity: .50;  /* загальна прозорість «вітражу» 0..1 */
  --glass-scale: 50%;    /* розмір тайлу текстури */

  position: relative;
  overflow: hidden;                     /* щоб псевдоелемент не виліз за радіус */
  background: rgba(33,14,33,.20);       /* легкий базовий тон за текстурою */
  border: 1px solid var(--frame-dark);
  border-color: #7d3b7d;
  border-radius: var(--radius);
  padding: 10px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* 2) Власне «вітраж»: текстура + затемнюючий шар у ::before */
.box::before, nav::before, .badges::before, section.bio::before, .note::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  /* Темний напівпрозорий шар + сама картинка */
  background-image:
    linear-gradient(0deg, rgba(0,0,0,var(--glass-darken)), #568983),
    url(assets/bg/033.jpg);
  background-size: cover, var(--glass-scale);
  background-position: center, center;
  background-repeat: no-repeat, repeat;

  /* «Вітражна» прозорість лише для бекграунду */
  opacity: var(--glass-opacity);

  /* Легка стилізація під скло */
  filter: saturate(1.5) contrast(1.2);
}

/* 3) Контент поверх «вітражу» */
.box > *, nav > *, .badges > *, section.bio > *, .note > * {
  position: relative;
  z-index: 1;
}

.box::before, nav::before, .badges::before, section.bio::before, .note::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid var(--frame);
  border-radius: calc(var(--radius) - 2px);
  pointer-events: none;
}

/* === ХЕДЕР =============================================================== */
header.site { margin: 12px 0 8px; text-align: center; }
header.site h1 { font-size: 32px; line-height: 1.2; margin: 0 0 6px; }
header.site .sub { color: var(--muted); font-size: 14px; }

/* === НАВІГАЦІЯ =========================================================== */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}
nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
}
nav a::before { content: attr(data-emoji); }
aside.sidebar nav a { width: 100%; }
aside.sidebar nav a:hover { background: #3d6f7d; }

/* === ЖАБКИ =============================================================== */
.frog-row { display:flex; justify-content:center; align-items:center; gap:16px; }
.frog-row img { width:32px; height:auto; image-rendering: pixelated; }

/* === БАЗОВИЙ КОНТЕНТ ===================================================== */
section { margin: 16px 0; }
.rule { margin: 24px 0; }
h2 { font-size: 22px; margin: 0 0 10px; }
.emoji-list { list-style: none; padding: 0; margin: 0; }
.emoji-list li { margin: 10px 0; }
.note { font-size: 14px; font-style: italic; text-align: center; }

footer {
  margin: 32px 0 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* === БЕЙДЖІ / ПЛИТКА ===================================================== */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 16px;
}
.badge {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #833d48;
  color: #fff;
}

/* === ГАЛЕРЕЯ ============================================================= */
.gallery { margin: 12px 0 24px; }
.gallery-group { margin: 20px 0 28px; }
.gallery-title {
  font-size: 18px; line-height: 1.3; margin: 0 0 10px; color: var(--ink);
  width: max-content;
}

/* Картка-зображення */
.badge-img {
  display: inline-grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 6px;
  border: 2px solid var(--frame-dark);
  border-radius: 12px;
  background: #833d48;
  padding: 6px;
  width: max-content;
  text-align: center;
}
.badge-img figure {
  display: grid;
  justify-items: center;
  margin: 0;
  width: max-content;
}
.badge-img figcaption {
  width: min(36ch, 100%);
  margin: 0 auto;
  color: #fff;
  font-size: 0.9em;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  text-align: center;
}
.badge-img img { display: block; margin-left: auto; margin-right: auto; }
.badge-img img:hover { cursor: url("assets/cursor/loop.cur"), zoom-in; }

/* Прокрутка до якорів у галереї */
.gallery-group, .badge-img { scroll-margin-top: 16px; }
.targeted { background-color: rgba(251,234,144,.2); animation: blink 0.6s ease 2; }
@keyframes blink { 50% { background-color: transparent; } }

/* === ЗУМ ЗОБРАЖЕНЬ ======================================================= */
.zoomable {
  width: 200px;
  height: auto;
  border-radius: 6px;
  cursor: url("assets/cursor/loop.cur"), zoom-in !important;
  transition: border-width 0.5s ease, box-shadow 0.5s ease, 200ms;
  border: 1px solid var(--frame-dark);
  border-radius: 10px;
  
}
.zoomable.is-large {
  position: relative;
  z-index: 9999;
  max-width: 1080px;
  transition: 200ms;
  cursor: zoom-out;
  border: 5px solid var(--frame-dark);
  border-radius: 10px;
  /* лишаємо як було (на візуал не впливає) */
  border-color: linear-gradient(#59898c,#421f3f);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
  background-image: linear-gradient(#59898c,#421f3f);
  border-width: 30px;
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
  background-image: linear-gradient(#59898c, #421f3f);
  transition: border-width 0.5s ease, box-shadow 0.5s ease;
}
body.lightbox-open { overflow: hidden; }

/* Overlay під зум */
#zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9998;
}
#zoom-overlay.active { display: block; }

/* === КНОПКИ ============================================================== */
button {
  padding: 5px 5px;
  border-radius: 10px;
  border: 2px solid var(--rule);
  background-color: #315c69;
  transition: all 0.3s ease;
  box-shadow: #315c69 0px 10px 0px 0px;
  color: #d3d3d3;
  cursor: url("assets/cursor/hov_1.cur"), zoom-in;
  text-shadow: 4px 4px #000;
  font-size: 24px;
  margin: 15px 5px .5rem 5px;
}
button:hover {
  box-shadow: #315c69 0px 7px 0px 0px;
  text-align: center;
  background-color: #528e99;
  transition: 200ms;
}
button:active {
  background-color: #aae3d2;
  box-shadow: #315c69 0px 0px 0px 0px;
  transform: translateY(5px);
  transition: 200ms;
}

/* === КОНТЕЙНЕРИ ========================================================== */
.container {
  position: relative;
  margin: 0rem;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
  background-image: linear-gradient(#59898c,#421f3f);
}
.container.dark { background-image: none; background: url("assets/bg/tile2.png") repeat; }
.container.dark2 { background-image: none; background-color: rgba(0,0,0,.55); }
.container.light { background-image: none; background-color: rgba(255,255,255,.2); }
.container:before {
  pointer-events: none;
  position: absolute;
  border: 2px solid #fff;
  border-radius: 7px;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 0;
}
.title {
  color: #fbea90;
  text-transform: uppercase;
  text-shadow: 4px 4px #000;
  font-size: 24px;
  margin: 0 0 .5rem 10px;
  cursor: url("assets/cursor/title.cur"), auto;
}
.container p {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: 12px;
  line-height: 1.2;
  color: #f6f8df;
  text-shadow: 2px 2px #000;
}

/* Внутрішні рядки в темних контейнерах */
.container.dark .columns {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 2px 0;
}
.container.dark .txt { flex: 0 0 40px; text-align: left; }
.container.dark .txt_small { flex: 1 1 auto; text-align: center; word-break: break-word; }
@media (max-width: 480px){ .container.dark .txt{ flex-basis: 140px; } }

/* Сайдбарні банери */
.sidebar .box .columns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center; 
}
.sidebar .box .columns .column { flex: 0 0 auto; }
.sidebar .box .columns .column a { display: inline-block; }
.sidebar .box .columns .column img {
  display: block;
  height: 62px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

/* === HOME: Journal ======================================================= */
.home-journal.container{
  background-image: none;
  background-color: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.25);
  padding: .75rem; /* фінальне */
}
.home-journal .title{ margin: 0 0 .75rem 10px; }
.home-journal .mini-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px; /* фінальне */
}
@media (max-width: 900px){ .home-journal .mini-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .home-journal .mini-grid{ grid-template-columns: 1fr; } }

.home-journal .mini.container{
  background-image: none;
  background-color: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.25);
  padding: .75rem; /* фінальне */
}
.home-journal .mini.container.dark  { background-color: rgba(0,0,0,.35); }
.home-journal .mini.container.light { background-color: rgba(255,255,255,.18); }

.home-journal .mini-link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
  cursor:url("assets/cursor/hov_1.cur"), pointer; /* з другого блоку */
}
.home-journal .mini-title{
  margin: 0 0 5px;
  font-weight: 700; color: #fff; text-shadow: 2px 2px #000;
  font-size: 1.05rem;
}
.home-journal .mini-date{ font-size:.9em; opacity:.85; color:#fff; margin-bottom:.35rem; }
.home-journal .mini-snippet{ color:#fff; text-shadow:1px 1px #000; margin:0; }
.home-journal .actions{ margin-top:.75rem; text-align:right; }
.home-journal .actions a{ text-decoration:none; color:#fff; }

.home-journal .mini.container:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08) saturate(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,.25),
              inset 0 0 0 1px rgba(255,255,255,.15);
  cursor:url("assets/cursor/hov_1.cur"), pointer;
}

/* === HOME: Updates ======================================================= */
.home-updates.container{
  background-image: none;
  background-color: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.25);
  padding: .9rem;
}
.home-updates .mini-grid,
.home-journal .mini-grid { display: block; } /* fallback */
.home-updates .mini.container{
  display:flex; flex-direction:column;
  padding:.85rem; min-height:140px;
  transition: transform .16s ease, box-shadow .16s ease,
              background-color .16s ease, filter .16s ease;
  will-change: transform;
  transform-origin: center center;
}
.home-updates .mini.container.dark  { background-color: rgba(0,0,0,.35); }
.home-updates .mini.container.light { background-color: rgba(255,255,255,.18); }
.home-updates .mini-link{ display:block; height:100%; color:inherit; text-decoration:none; }
.home-updates .mini-title{ margin:0 0 .35rem; font-weight:700; color:#fff; text-shadow:2px 2px #000; }
.home-updates .mini-date{ margin:0 0 .35rem; font-size:.9em; color:#fff; opacity:.85; }
.home-updates .mini-snippet{ margin:0; color:#fff; text-shadow:1px 1px #000; }
.home-updates .mini-snippet a{
  color: var(--link);
  text-decoration: underline;
  cursor: url("assets/cursor/hov_1.cur"), pointer;
}
.home-updates.updates-single .mini.container,
#latestUpdate.updates-single .mini.container,
#latestJournal.updates-single .mini.container { width:100%; display:block; }

/* === ВІДЕО-КАРТКИ ======================================================== */
.reel {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  outline: 2px solid var(--frame-dark);
  background: #000;
  cursor: url("assets/cursor/loop.cur"), pointer;
  transition: transform .15s ease, outline-width .15s ease;
}
.reel:hover { transform: translateY(-2px); outline-width: 3px; }
.reel.is-large {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: auto; max-width: 90vw; max-height: 90vh;
  z-index: 10001;
  cursor: zoom-out;
}

/* Фігури */
figure { margin: 0; }
figcaption .small_accent { display: inline-block; }

/* === ФОРМИ =============================================================== */
form.box input[type="text"],
form.box textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: rgba(0,0,0,.2);
  color: var(--ink);
  margin: 6px 0 10px;
}
form.box button { margin-top: 8px; }

/* === LATEST UPDATES (єдина версія) ======================================= */
#latestUpdates { display: block; }
#latestUpdates .container { display: block; width: 100%; }
#latestUpdates .mini-link,
#latestUpdates a.mini-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: url("assets/cursor/hov_1.cur"), pointer;
}
#latestUpdates .post-title {
  margin: 0 0 .35rem;
  font-weight: 700; color: #fff; text-shadow: 2px 2px #000; font-size: 1.1rem;
}
#latestUpdates .post-date  {
  font-size: .95em; opacity: .9; color: #fff; margin: 0 0 .35rem;
}
#latestUpdates .post-body  {
  color: #fff; text-shadow: 1px 1px #000; margin: 0; line-height: 1.4;
}



/* Кнопка касети */
.cassette-btn{
  display:inline-block;
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: 10px;
  cursor: url("assets/cursor/hov_1.cur"), pointer;
}
.cassette-btn:hover .loader{
  transform: scale(1.06);
  filter: brightness(1.06) saturate(1.03);
  cursor: url("assets/cursor/hov_1.cur"), pointer;
}
.loader{
  transition: transform .15s ease, filter .15s ease;
}
.loader:before,
.loader:after{ animation-play-state: paused; }
.loader.is-playing:before,
.loader.is-playing:after{ animation-play-state: running; }

/* Screen reader helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === ХЕЛПЕРИ ============================================================= */
.hidden { display: none !important; }
.center { text-align: center; }
.small  { font-size: .9em; color: var(--muted); }
.pixel  { image-rendering: pixelated; }

body.homebrew .brew-sheet { padding: 1rem; background: rgba(97,49,79, .75)!important} 
body.homebrew .brew-header { margin-bottom: .5rem; }
body.homebrew .brew-title { margin: 0 0 .15rem; font-size: 1.6rem; color: #fff; text-shadow: 2px 2px #000; }
body.homebrew .brew-sub   { color: var(--muted); font-size: .95rem; }

body.homebrew .brew-note { margin: .75rem 0 1rem; position: relative; }
body.homebrew .brew-portrait { display:block; border-radius:10px; opacity:.9; mix-blend-mode: multiply; }
body.homebrew .brew-wrap-right { float:right; margin: 0 0 .5rem 1rem; max-width: 260px; }
@media (max-width: 720px){ body.homebrew .brew-wrap-right{ float:none; margin: .25rem auto; display:block; } }

body.homebrew .brew-attribs { margin-top:.5rem; font-size:.9rem; color: var(--muted); }
body.homebrew .brew-attribs .attribution{ display:block; }

body.homebrew .brew-quote,
body.homebrew .brew-verse {
  margin: .6rem 0;
  padding: .65rem .8rem;
  border-left: 3px solid var(--frame);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-shadow: 1px 1px #000;
  border-radius: 10px;
}

body.homebrew .brew-callout { margin:.8rem 0; }
body.homebrew .brew-descriptive { margin:.6rem 0; }

body.homebrew .brew-stats {
  display:grid; gap:.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin:.4rem 0 .6rem;
}
body.homebrew .brew-stats > div strong { display:inline-block; min-width: 7.5ch; }

body.homebrew .brew-ability {
  width:100%; border-collapse: collapse; margin:.4rem 0 .6rem;
  background: rgba(0,0,0,.25); border: 2px solid var(--frame-dark); border-radius: 10px; overflow:hidden;
}
body.homebrew .brew-ability th, 
body.homebrew .brew-ability td {
  text-align:center; padding:.45rem .35rem; color:#fff; text-shadow:1px 1px #000;
  border-right:1px solid rgba(255,255,255,.12);
}
body.homebrew .brew-ability thead { background: rgba(255,255,255,.08); }

body.homebrew .brew-feats { display:grid; gap:.25rem; margin:.4rem 0 .8rem; }
body.homebrew .brew-feats > div strong { min-width: 10ch; display:inline-block; }

body.homebrew .brew-section { margin: .9rem 0; background: rgba(0,0,0,.42); }
body.homebrew .brew-section h3 { margin:.2rem 0 .5rem; font-size:1.2rem; color:#fff; text-shadow:2px 2px #000; }

body.homebrew .brew-list { margin:.2rem 0 .2rem 1.1rem; }
body.homebrew .brew-list li { margin:.25rem 0; }

body.homebrew .table-scroll { overflow:auto; border-radius:10px; border:1px solid var(--frame-dark); }
body.homebrew .brew-table { width:100%; border-collapse: collapse; background: rgba(0,0,0,.25); }
body.homebrew .brew-table th,
body.homebrew .brew-table td {
  padding:.5rem .6rem; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; text-shadow:1px 1px #000;
}
body.homebrew .brew-table thead { background: rgba(255,255,255,.08); }

/* невелика правка контейнерів, щоб виглядало щільніше в brew */
body.homebrew .container.dark  { background-color: rgba(0,0,0,.42); }
body.homebrew .container.light { background-color: rgba(255,255,255,.18); }

/* Показуємо лише активного монстра */
body.homebrew .monster-entry{ display:none; }
body.homebrew .monster-entry[data-active="1"]{ display:block; }

/* Власне двоколонка для тіла статблоку */
body.homebrew .monster-entry .brew-columns{
  column-count:2;
  column-gap:28px;
  column-fill:balance;
}
@media (max-width:980px)

/* ===== FROG STRIP (local to the central block) ===================== */
@font-face{
  font-family:"Final Fantasy VII";
  src:url("assets/fonts/Final_Fantasy_VII.ttf") format("truetype");
  font-weight:normal; font-style:normal;
}
:root{ --title-font:"Final Fantasy VII", system-ui, sans-serif; }

/* контейнер смуги жуабок — замінює колишній .frog-row */
.frog-canvas{
  position: relative;
  height: 120px;               /* висота смуги жаб */
  margin: 6px 0 12px;
  overflow: visible;           /* бульбашки можуть виходити нагору */
  isolation: isolate;
}

/* поле, у якому стрибають жаби */
.frog-field{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* БАЗА ЖАБИ */
.frog{
  --frog-url: url("assets/anim/frog__1.gif"); /* ваш локальний спрайт */
  --sz: 96px;            /* базовий розмір (можна перевизначати інлайн) */
  --delay: 0s;           /* старт руху */
  --dd: 26s;             /* тривалість проходу */
  --hopd: 3.6s;          /* ритм підскакувань */
  --say-delay: 8s;       /* коли з’являється бульбашка */
  --say-dur: 30s;        /* частота звичних реплік */
  --say-dur-alt: 16s;    /* частота “зламаних” реплік */
  width: var(--sz); height: var(--sz);
  position: absolute; top: 0;
  background-image: var(--frog-url);
  background-size: contain; background-repeat: no-repeat;
  image-rendering: pixelated;

  /* монохромний фіолет↔червоний тінт без квадратів */
  --hr: 300deg;  /* старт — violet */
  filter: grayscale(1) contrast(1.06) brightness(1.02)
          hue-rotate(var(--hr)) saturate(1.9)
          drop-shadow(0 0 6px rgba(146,92,240,.55));
}

/* смуга “зверху центрального блоку” */
.frog.t{ top: 0; }

/* напрямки */
.frog.dir-r{ left: calc(-1 * var(--sz)); }
.frog.dir-l{ right: calc(-1 * var(--sz)); }

/* повний прохід крізь ШИРИНУ БЛОКУ */
.frog.t.dir-r{
  animation:
    run-r var(--dd) linear infinite var(--delay),
    hop var(--hopd) ease-in-out infinite calc(var(--delay)*1.1),
    tone-swap var(--tone-period,18s) steps(1,end) infinite var(--tone-delay,0s);
}
.frog.t.dir-l{
  animation:
    run-l var(--dd) linear infinite var(--delay),
    hop var(--hopd) ease-in-out infinite calc(var(--delay)*1.1),
    tone-swap var(--tone-period,18s) steps(1,end) infinite var(--tone-delay,0s);
}

/* рух відносно ширини frog-canvas */
@keyframes run-r{
  0%   { left:  calc(-1 * var(--sz)); }
  100% { left:  calc(100% + var(--sz)); }
}
@keyframes run-l{
  0%   { right: calc(-1 * var(--sz)); }
  100% { right: calc(100% + var(--sz)); }
}
@keyframes hop{
  0%,100%{ transform: translateY(0) }
  30%    { transform: translateY(-12px) }
  60%    { transform: translateY(0) }
}

/* фіолет ↔ червоний */
@keyframes tone-swap{
  0%,45%   { --hr: 300deg; }  /* violet */
  50%,95%  { --hr: -20deg; }  /* red */
  100%     { --hr: 300deg; }
}
/* трохи “хаосу” */
.frog:nth-child(3n){ --tone-delay: 3.2s; }
.frog:nth-child(4n){ --tone-delay: 6.4s; }
.frog:nth-child(5n){ --tone-period: 22s; }

/* ===== БУЛЬБАШКИ ==================================================== */
/* звичайна репліка (::after) — базовий шрифт */
.frog::after{
  content: attr(data-say);
  position:absolute; left:50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding:6px 9px; max-width:260px; white-space:nowrap;
  font:14px/1.15 inherit;
  color:#fbea90; text-shadow:1px 1px #000;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.22); border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  animation: bubble var(--say-dur,30s) ease-in-out infinite;
  animation-delay: var(--say-delay,8s);
}
.frog[data-say=""]::after{ display:none; }

@keyframes bubble{
  0%,70%,100%{ opacity:0; transform:translate(-50%,0) scale(.98) }
  12%,22%   { opacity:1; transform:translate(-50%,-2px) scale(1) }
}

/* альтернативна “зламана” (::before) — TITLE + ASCII-бурсти */
.frog{ --say-alt:"◇ ▓ ▒ ░ ⌁ ⇄ ▤"; }
.frog::before{
  content: var(--say-alt);
  position:absolute; left:50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding:6px 9px; max-width:260px; white-space:nowrap;
  font:14px/1.15 var(--title-font);
  color:#d9c8ff; background: rgba(14,6,26,.6);
  border:1px solid rgba(255,255,255,.18); border-radius:8px;
  text-shadow:0 0 6px rgba(130,80,210,.6), 1px 1px #000;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  animation: bubble-glitch var(--say-dur-alt,16s) steps(1,end) infinite;
  animation-delay: calc(var(--say-delay,8s) * .6);
}
@keyframes bubble-glitch{
  0%,8%   { opacity:0; transform:translate(-50%,0)  scale(.98) }
  4%      { opacity:1; transform:translate(-50%,-2px) scale(1) }
  30%,38% { opacity:0; transform:translate(-50%,0)  scale(.98) }
  34%     { opacity:1; transform:translate(-50%,-2px) scale(1) }
  60%,68% { opacity:0; transform:translate(-50%,0)  scale(.98) }
  64%     { opacity:1; transform:translate(-50%,-2px) scale(1) }
  92%,100%{ opacity:0; transform:translate(-50%,0)  scale(.98) }
}

/* “буква глючить” — скан-смуга по звичній бульбашці */
.frog.glitch-letter::after{
  position: relative; overflow: visible;
  background-image:
    linear-gradient(90deg, transparent 0 46%, rgba(255,0,255,.36) 46% 54%, transparent 54% 100%);
  background-size: 220% 100%;
  background-position: 0 50%;
  mix-blend-mode: screen;
  animation: glitch-scan var(--say-dur,30s) linear infinite;
  animation-delay: var(--say-delay,8s);
}
@keyframes glitch-scan{
  0%   { background-position: 0% 50%; }
  10%  { background-position: 100% 50%; }
  12%  { background-position: 0% 50%; }
  40%  { background-position: 100% 50%; }
  42%  { background-position: 0% 50%; }
  70%  { background-position: 100% 50%; }
  72%  { background-position: 0% 50%; }
}



/* БОС-ЖАБА (одна найбільша) */
.frog.boss{
  --sz: 168px; --dd: 42s; --hopd: 4.6s;
  --say-delay: 10s; --say-dur: 34s; --say-dur-alt: 14s;
  filter: grayscale(1) contrast(1.08) brightness(1.04)
          hue-rotate(var(--hr)) saturate(2.2)
          drop-shadow(0 0 8px rgba(210,120,255,.7));
  z-index: 6;
}


/* жаби, що спавняться у центрі */
.frog.mid {
  left: 50%;
  transform: translateX(-50%);
  animation:
    hop var(--hopd,3.6s) ease-in-out infinite,
    tone-swap var(--tone-period,18s) steps(1,end) infinite var(--tone-delay,0s);
}
.frog.mid::before,
.frog.mid::after {
  animation-delay: var(--say-delay, 6s); /* можна зміщувати інлайном */
}
/* ===== FIX: compose movement + tint instead of overwriting ============ */

/* 0) Базові keyframes руху (залиш, якщо вже є) */
@keyframes frog-slide-r{ 0%{left:calc(-1*var(--sz))} 100%{left:calc(100vw + var(--sz))} }
@keyframes frog-slide-l{ 0%{right:calc(-1*var(--sz))} 100%{right:calc(100vw + var(--sz))} }
@keyframes frog-ping-r { 0%{left:calc(-1*var(--sz))} 50%{left:var(--stop,33vw)} 100%{left:calc(-1*var(--sz))} }
@keyframes frog-ping-l { 0%{right:calc(-1*var(--sz))} 50%{right:var(--stop,33vw)} 100%{right:calc(100vw + var(--sz))} }
@keyframes frog-hop    { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-12px)} 60%{transform:translateY(0)} }

/* 1) Параметри за замовчуванням + “псевдорандом” швидкості/тону */
.frog{
  /* рухові змінні */
  --dd:26s;           /* довше = повільніше */
  --hopd:3.8s;
  --delay:0s;

  /* колірний тон: фіолетовий ↔ червоний */
  --hrA:300deg;       /* violet */
  --hrB:-20deg;       /* red */
  --tone-period:18s;
  --tone-delay:0s;

  /* СКЛАДАННЯ анімацій через змінні */
  --anim-move:none;
  --anim-hop:none;
  --anim-tint:tint-swap var(--tone-period) steps(1,end) infinite var(--tone-delay);

  /* застосовуємо разом: рух + хоп + тінт */
  animation: var(--anim-move), var(--anim-hop), var(--anim-tint);
  /* сам тінт робимо через hue-rotate, щоб не малювати прямокутники */
  filter: grayscale(1) contrast(1.06) brightness(1.02) hue-rotate(var(--hrA)) saturate(1.9);
}

/* 2) Призначаємо РУХ (лише підставляємо у --anim-*) */
.frog.t.dir-r, .frog.b.dir-r{ --anim-move: frog-slide-r var(--dd) linear infinite var(--delay); }
.frog.t.dir-l, .frog.b.dir-l{ --anim-move: frog-slide-l var(--dd) linear infinite var(--delay); }
.frog.m-top.dir-r, .frog.m-bot.dir-r{ --anim-move: frog-ping-r var(--dd) linear infinite var(--delay); }
.frog.m-top.dir-l, .frog.m-bot.dir-l{ --anim-move: frog-ping-l var(--dd) linear infinite var(--delay); }
.frog{ --anim-hop: frog-hop var(--hopd) ease-in-out infinite calc(var(--delay)*1.3); }

/* 3) Перемикач тону (нічого не чіпає з руху) */
@keyframes tint-swap{
  0%,45%,100%{
    filter: grayscale(1) contrast(1.06) brightness(1.02) hue-rotate(var(--hrA)) saturate(1.9);
  }
  50%,95%{
    filter: grayscale(1) contrast(1.06) brightness(1.02) hue-rotate(var(--hrB)) saturate(1.9);
  }
}

/* 4) “Псевдо-рандом” швидкість/тон/затримка для різних жаб */
.frog:nth-child(6n+1){ --hrA:290deg; --hrB:0deg;   --dd:22s; --hopd:3.4s; --tone-period:16s; --tone-delay:.6s; }
.frog:nth-child(6n+2){ --hrA:305deg; --hrB:-10deg; --dd:28s; --hopd:3.9s; --tone-period:18s; --tone-delay:1.3s; }
.frog:nth-child(6n+3){ --hrA:320deg; --hrB:-30deg; --dd:34s; --hopd:4.2s; --tone-period:22s; --tone-delay:.9s; }
.frog:nth-child(6n+4){ --hrA:300deg; --hrB:-20deg; --dd:26s; --hopd:3.6s; --tone-period:20s; --tone-delay:2.1s; }
.frog:nth-child(6n+5){ --hrA:285deg; --hrB:-15deg; --dd:24s; --hopd:3.5s; --tone-period:19s; --tone-delay:.2s; }
.frog:nth-child(6n+6){ --hrA:310deg; --hrB:-5deg;  --dd:31s; --hopd:4.0s; --tone-period:24s; --tone-delay:1.8s; }

/* 5) “Mid” жаби в центрі (не знімаємо tint) */
.frog.mid{
  left:50%; transform:translateX(-50%);
  --anim-move:none; /* вони не їдуть горизонтально */
}


.comment-btn {
  margin-top: 0.8rem;
  padding: 0.5rem 1rem;
  background: #fbea90;
  border: 1px solid #888;
  border-radius: 4px;

}
.comment-btn:hover {
  background: #ffeaa7;
}

.frog-canvas{ position: relative; z-index: 1; }
.frog-field{ position: relative; height: 180px; pointer-events:none; }

.frog{
  position: absolute;
  width: var(--sz,96px);
  height: var(--sz,96px);
  background: center / contain no-repeat;
  --frog-img: url("assets/anim/frog__1.gif");
  background-image: var(--frog-img);
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 16px rgba(0,0,0,.35));
  will-change: transform;
  /* якщо десь ставили pause — знімаємо */
  animation-play-state: running;
}

#statuscafe {
    padding: .5em;
    background: url("assets/bg/tile2.png") repeat; 
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.stamp-ticker{
  position: fixed; top:64px; left:0; right:0;
  height: var(--stamps-h);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;              /* поверх фон-оверлеїв */
  opacity: .25;
  -webkit-mask-image: linear-gradient(to right, transparent 0 24px, #000 60px calc(100% - 60px), transparent calc(100% - 24px));
          mask-image: linear-gradient(to right, transparent 0 24px, #000 60px calc(100% - 60px), transparent calc(100% - 24px));
}

/* “пояс”, який рухається */
.stamp-belt{
  position: absolute; inset: 0 auto 0 0;
  display: inline-flex; height: 100%;
  will-change: transform;
  animation: stamp-loop var(--stamps-dur) linear infinite;
}

/* одна доріжка зі штампами */
.stamp-track{
  display: inline-flex; align-items: center;
  gap: var(--stamps-gap); height: 100%;
}
.stamp-track img{
  height: calc(var(--stamps-h) - 8px);
  width: auto; image-rendering: auto;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.35));
  user-select: none; pointer-events: none;
}

/* рухаємо пояс на півширини (бо дві однакові доріжки підряд) */
@keyframes stamp-loop{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* фонові оверлеї нижче */
body::before, body::after{ z-index: -2; }



/* === Music Player (constant hue) === */
.music-player{
  display:flex; flex-direction:column; align-items:center; gap:10px; margin:18px 0;

  /* налаштовувані змінні */
  --hue-base: 90deg;          /* стартовий відтінок */
  --hue-speed-paused: 12s;   /* швидкість у паузі */
  --hue-speed-playing: 6s;   /* швидкість під час програвання */
}

.music-player .music-visual{
  display:block; max-width:100%; height:auto;
  /* ПОСТІЙНА анімація hue */
  animation: hueRoll var(--hue-speed-paused) linear infinite;
}

/* під час програвання - тільки пришвидшуємо */
.music-player .music-visual.is-playing{
  animation-duration: var(--hue-speed-playing);
}

/* ключові кадри навколо базового hue */
@keyframes hueRoll{
  from { filter: hue-rotate(var(--hue-base))!important; }
  to   { filter: hue-rotate(calc(var(--hue-base) + 60deg))!important; }
}

/* якщо не хочеш вимикати рух за системним налаштуванням — або прибери цей блок,
   або залиш як є (тоді анімація вимкнеться у користувачів з Reduced Motion) */

/* === Music Player (force constant hue) === */
.music-player{
  display:flex; flex-direction:column; align-items:center; gap:10px; margin:18px 0;

  /* налаштовувані змінні */
  --hue-base: 90deg;
  --hue-speed-paused: 12s;
  --hue-speed-playing: 6s;
}

/* базовий filter + анімація (з !important на час дебагу) */
.music-player .music-visual{
  display:block; max-width:100%; height:auto;
  filter: hue-rotate(var(--hue-base, 0deg));
  animation: hueRoll var(--hue-speed-paused) linear infinite !important;
  will-change: filter;
}

/* під час програвання — змінюємо тільки швидкість */
.music-player .music-visual.is-playing{
  animation-duration: var(--hue-speed-playing) !important;
}

/* 360° щоб було явно видно */
@keyframes hueRoll{
  from { filter: hue-rotate(var(--hue-base, 0deg)); }
  to   { filter: hue-rotate(calc(var(--hue-base, 0deg) + 360deg)); }
}

.page .music-player .music-visual{
  animation: colorRoll var(--hue-speed-paused) linear infinite !important;
}

.music-player{
  --hue-speed-paused: 12s;
  --hue-speed-playing: 6s;
}

/* крутимо фільтр на обгортці, не на <img> */
.music-visual-wrap{
  display:inline-block;
  /* додаємо колір і крутимо відтінок */
  animation-name: colorRoll;
  animation-duration: var(--hue-speed-paused);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running !important; /* на випадок глобальних пауз */
  will-change: filter;
}

/* сам GIF без фільтрів (щоб анімація йшла з обгортки) */
.music-visual{
  display:block; max-width:100%; height:auto;
  filter: none !important;
}

/* пришвидшення під час програвання */
.music-visual-wrap.is-playing{
  animation-duration: var(--hue-speed-playing) !important;
}

/* повний оберт і фіксований ланцюжок — гарантує інтерполяцію */
@keyframes colorRoll{
  0%   { filter: sepia(1) saturate(800%) hue-rotate(0deg)   brightness(1.05) contrast(1.05); }
  100% { filter: sepia(1) saturate(800%) hue-rotate(360deg) brightness(1.05) contrast(1.05); }
}

/* === Internet Stamps: drag-to-scroll === */
.stamp-ticker{
  --stamps-h: 64px;
  --stamps-gap: 32px;
  height: var(--stamps-h);
  overflow-x: auto;
  overflow-y: auto;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch; /* плавність на iOS */
  scroll-behavior: auto;
  pointer-events: auto;              /* було none у старій версії */
  scrollbar-width: none;             /* Firefox: ховаємо скролбар */
}
.stamp-ticker::-webkit-scrollbar{ display: none; } /* WebKit */

.stamp-ticker.dragging{ cursor: grabbing; }

.stamp-track{
  display: inline-flex;
  align-items: center;
  gap: var(--stamps-gap);
  height: 90%;
  width: max-content;

}

/* клон більше не потрібен */
.stamp-track--clone{ display: none !important; }

.stamp-track > img{
  height: calc(var(--stamps-h) - 18px);
  width: auto;
  flex: 0 0 auto;
  pointer-events: none;            /* щоб не “хапався” за img */
  -webkit-user-drag: none;
  user-drag: none;
}
.stamp-ticker{
  position: relative !important;   /* прибираємо fixed */
  top: auto !important; left: auto !important; right: auto !important;

  z-index: 5 !important;           /* вище фону/оверлеїв */
  pointer-events: auto !important;  /* даємо хапатися */

  height: var(--stamps-h, 64px);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  cursor: url("assets/cursor/drag_1.cur"), grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: none;               /* дозволяє власний drag на тачі */
  overscroll-behavior: contain;
  user-select: none; -webkit-user-select: none;
  opacity: 1 !important;            /* на всякий випадок */
}
.stamp-ticker::-webkit-scrollbar{ display:none; }

.stamp-track{
  display: inline-flex;
  align-items: center;
  gap: var(--stamps-gap, 64px);
  height: 90%;
  width: max-content;

}

.stamp-track--clone{ display: none !important; }

.stamp-track > img{
  flex: 0 0 auto;
  height: calc(var(--stamps-h, 64px) - 8px);
  width: auto;
  pointer-events: none;
  -webkit-user-drag: none; user-drag: none;
}

.stamp-ticker.dragging{ cursor: url("assets/cursor/drag_2.cur"), grabbing}

/* === Stamps: center focus scaling === */
.stamp-track > img{
  transform-origin: center bottom;
  transition: transform 120ms linear, opacity 120ms linear;
  will-change: transform, opacity;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}



.stamp-ticker{
  /* приглушення країв — підкрути ширини градієнтів за смаком */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0 32px,
    #000 272px calc(100% - 72px),
    transparent calc(100% - 32px)
  );
          mask-image: linear-gradient(
    to right,
    transparent 0 32px,
    #000 272px calc(100% - 72px),
    transparent calc(100% - 32px)
  );
}

/* іще трохи «тьмяніше» для не-центральних (допомагає фокус-ефекту) */
.stamp-track > img{
  transition: transform 120ms linear, opacity 120ms linear;
  opacity: .15;
}
.stamp-track > img.is-center{
  opacity: .8;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
}
.stamp-ticker{
  /* підкручуй відсотки, якщо треба інша ширина «чистого» центру */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.40) 30%,
    rgba(0,0,0,0.75) 42%,
    #000 49%,
    #000 51%,
    rgba(0,0,0,0.75) 58%,
    rgba(0,0,0,0.40) 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.40) 30%,
    rgba(0,0,0,0.75) 42%,
    #000 49%,
    #000 51%,
    rgba(0,0,0,0.75) 58%,
    rgba(0,0,0,0.40) 70%,
    transparent 100%
  );
}

/* залишаємо тільки тінь для центрального — без зміни прозорості */
.stamp-track > img{
  transform-origin: center bottom;
  transition: transform 120ms linear;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none; user-drag: none;
}
.stamp-track > img.is-center{
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
}

/* === Stamps: headroom for scaled center === */
.stamp-ticker{
  /* макс. очікуваний масштаб центрального (піджениш під свій cfg.max) */
  --stamps-scale-max: 1.25; /* якщо у JS cfg.max = 1.22, можна поставити 1.22 */

  /* додаємо вертикальний «запас» і дозволяємо виходити вгору */
  padding-block: calc((var(--stamps-h, 64px) * (var(--stamps-scale-max) - 1)) / 2);
  overflow-y: visible !important;
}

/* вирівнюємо елементи по нижньому краю, щоб ріст йшов вгору */
.stamp-track{
  align-items: flex-end; /* було center */
}

/* (нагадування) масштаб від низу вгору */
.stamp-track > img{
  transform-origin: center bottom;
}