/* css/game-link.css — блок «ОНЛАЙН-ГРА» перед футером (S-BALL, 19.09).
 *
 * ADDENDUM-S-BALL-2 (Ірина, 18.09 після превʼю #90): блок — як og-картка гри
 * (poletilo/public/og.jpg), лише нижча: чорний папір, «ЩО ДІСТАЛО?», підрядок
 * «НАПИШИ — І РОЗТРОЩИ», червона рвана кнопка DESTROY IT (стиль .go з гри, лайму нема).
 * Праворуч замість печатки — паперова кулька, що розгортається в клапоть зі словом
 * гравця, закресленим червоним (js/game-block.js міняє слова й вмикає анімацію лише
 * у полі зору). Ширина — на всю колонку контенту, тобто = ширині фото над/під блоком
 * (головна 860 px, лендінги 904 px на ≥1024).
 *
 * LCP: стилі неблокуючі (media=print → all); фон і спрайт призначаються лише з
 * класом .is-near (IntersectionObserver за 400 px до блоку) — до того блок чорний.
 * Спрайт img/game/unfold.webp 870×150: три кадри 150×150 (stage.ball.4 → .3 → .2 з
 * атласу гри; ball.1 у грі — рибка, тому розгорнутий стан — клапоть tag.paper.1
 * 420×121 з x=450).
 */
.glink{width:100%;margin:0 auto;padding:8px 0 28px;box-sizing:border-box;position:relative;z-index:1}
.glink-in{
  --st-w:330px;--st-h:150px;--b:150px;--sh:300px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:190px;max-height:220px;box-sizing:border-box;
  padding:20px 28px 22px 32px;border:1px solid #1d1d1d;border-radius:2px;
  background:#0a0a0a center/cover no-repeat;color:#f0f0f0;text-decoration:none;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.glink-in.is-near{background-image:url(/img/game/paper-strip.webp)}
.glink-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.glink-lbl{font:600 11px/1.2 Montserrat,'Montserrat Fallback',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a}
.glink-h{font:900 calc(44px * var(--fs-alumni-scale,1.4))/.92 'Alumni Sans','Alumni Fallback','Arial Narrow',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#f5f5f5;margin-top:2px}
.glink-sub{font:700 12px/1.3 Montserrat,'Montserrat Fallback',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin-bottom:6px}
/* кнопка — рваний клапоть червоного паперу, як .go у грі (clip-path той самий) */
.glink-btn{
  display:inline-flex;align-items:center;gap:10px;padding:9px 26px 8px 18px;
  background:#C8102E;color:#f5f5f5;
  font:600 calc(22px * var(--fs-alumni-scale,1.4))/1 'Alumni Sans','Alumni Fallback','Arial Narrow',sans-serif;letter-spacing:.04em;
  -webkit-text-stroke:2px #0a0a0a;paint-order:stroke fill;
  clip-path:polygon(0 4%,12% 0,38% 3%,61% 0,86% 2%,100% 0,99% 52%,100% 100%,72% 97%,45% 100%,18% 96%,1% 100%,0 48%);
  transition:background .15s ease;
}
.glink-boom{width:26px;height:26px;flex:none;overflow:visible;transform:rotate(-12deg)}
.glink-boom polygon{fill:#f5f5f5;stroke:#0a0a0a;stroke-width:6;stroke-linejoin:round}
.glink-in:hover .glink-btn,.glink-in:focus-visible .glink-btn{background:#a50d26}
.glink-in:focus-visible{outline:2px solid #f0f0f0;outline-offset:3px}

/* ── праворуч: кулька ↔ клапоть зі словом ── */
.glink-stage{position:relative;flex:0 0 var(--st-w);width:var(--st-w);height:var(--st-h)}
.glink-ball,.glink-sheet{position:absolute;top:50%;left:50%;background-repeat:no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.glink-ball{width:var(--b);height:var(--b);margin:calc(var(--b) / -2) 0 0 calc(var(--b) / -2);
  background-size:calc(var(--b) * 870 / 150) var(--b);background-position:0 0}
.glink-sheet{width:var(--sh);height:calc(var(--sh) * 121 / 420);margin:calc(var(--sh) * -121 / 840) 0 0 calc(var(--sh) / -2);
  background-size:calc(var(--sh) * 870 / 420) auto;background-position:calc(var(--sh) * -450 / 420) 0;
  display:grid;place-items:center;opacity:0;transform:scale(.3,.5) rotate(8deg)}
.glink-in.is-near .glink-ball,.glink-in.is-near .glink-sheet{background-image:url(/img/game/unfold.webp)}
.glink-word{position:relative;padding:0 6px;font:900 calc(24px * var(--fs-alumni-scale,1.4))/1 'Alumni Sans','Alumni Fallback','Arial Narrow',sans-serif;
  letter-spacing:.04em;text-transform:uppercase;color:#141414;white-space:nowrap;transform:rotate(-2deg)}
.glink-word::after{content:'';position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;
  background:#C8102E;transform:scaleX(0) rotate(-3deg);transform-origin:left center}

/* цикл 4 с на слово: кулька (ball.4) → .3 → .2 → клапоть, слово закреслюється → назад.
   Крутиться лише .is-live (блок у полі зору); поза ним — пауза. */
.glink-in.is-live .glink-ball{animation:glinkFrames 4s step-end infinite,glinkBall 4s ease-in-out infinite}
.glink-in.is-live .glink-sheet{animation:glinkSheet 4s ease-in-out infinite}
.glink-in.is-live .glink-word::after{animation:glinkStrike 4s ease-out infinite}
.glink-in.is-paused .glink-ball,.glink-in.is-paused .glink-sheet,.glink-in.is-paused .glink-word::after{animation-play-state:paused}
@keyframes glinkFrames{
  0%{background-position:0 0}
  22%{background-position:calc(var(--b) * -1) 0}
  30%{background-position:calc(var(--b) * -2) 0}
  82%{background-position:calc(var(--b) * -2) 0}
  88%{background-position:calc(var(--b) * -1) 0}
  94%{background-position:0 0}
}
@keyframes glinkBall{
  0%,30%{opacity:1;transform:scale(1) rotate(0)}
  38%{opacity:0;transform:scale(1.1) rotate(10deg)}
  80%{opacity:0;transform:scale(1.1) rotate(-10deg)}
  86%,100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes glinkSheet{
  0%,32%{opacity:0;transform:scale(.3,.5) rotate(8deg)}
  42%,76%{opacity:1;transform:scale(1) rotate(-2deg)}
  84%,100%{opacity:0;transform:scale(.3,.5) rotate(8deg)}
}
@keyframes glinkStrike{0%,50%{transform:scaleX(0) rotate(-3deg)}58%,100%{transform:scaleX(1) rotate(-3deg)}}
/* reduced-motion (клас ставить js): статичний клапоть з одним словом. Без JS узагалі
   фону й кульки нема (їх вмикає .is-near) — лишається текстова картка з кнопкою. */
.glink-in.is-still .glink-ball{opacity:0}
.glink-in.is-still .glink-sheet{opacity:1;transform:rotate(-2deg)}
.glink-in.is-still .glink-word::after{transform:scaleX(1) rotate(-3deg)}
@media(prefers-reduced-motion:reduce){.glink-btn{transition:none}}

/* ── планшет і вузьке вікно (601–1023): колонка лендінгу лише 604 px — менший клапоть,
   щоб текст і кнопка вміщались в один рядок (ревʼю 19.09: на 700–800 px різало низ) ── */
@media(min-width:601px) and (max-width:1023px){
  .glink-in{--st-w:190px;--st-h:120px;--b:110px;--sh:190px;gap:12px;padding:18px 18px 20px 24px}
  .glink-h{font-size:calc(36px * var(--fs-alumni-scale,1.4))}
  .glink-btn{font-size:calc(19px * var(--fs-alumni-scale,1.4))}
  .glink-word{font-size:calc(15px * var(--fs-alumni-scale,1.4))}
}

/* ── мобільний: стек заголовок → підрядок → кнопка; клапоть — праворуч у рядку кнопки
   (угорі він лягав на «…ЛО?» на 320–390, ревʼю 19.09); ≤ 260 px ── */
@media(max-width:600px){
  .glink{padding:4px 0 20px}
  .glink-in{--st-w:116px;--st-h:78px;--b:74px;--sh:116px;display:block;position:relative;min-height:0;max-height:260px;padding:16px 16px 18px}
  .glink-h{font-size:calc(34px * var(--fs-alumni-scale,1.4))}
  .glink-sub{font-size:11px;letter-spacing:.12em}
  .glink-btn{font-size:calc(19px * var(--fs-alumni-scale,1.4));padding:8px 20px 7px 14px}
  .glink-boom{width:22px;height:22px}
  .glink-stage{position:absolute;bottom:8px;right:6px}
  .glink-word{font-size:calc(10px * var(--fs-alumni-scale,1.4))}
  .glink-word::after{height:3px;margin-top:-1.5px}
}
@media(max-width:360px){
  .glink-in{--st-w:96px;--st-h:70px;--b:62px;--sh:96px;padding:14px 12px 16px}
  .glink-h{font-size:calc(30px * var(--fs-alumni-scale,1.4))}
  .glink-btn{font-size:calc(17px * var(--fs-alumni-scale,1.4));padding:7px 14px 6px 10px;gap:7px}
  .glink-boom{width:18px;height:18px}
  .glink-word{font-size:calc(8.5px * var(--fs-alumni-scale,1.4))}
}
/* 320–340 (iPhone SE 1-го покоління): кнопка й клапоть ледь торкались — клапоть ще менший */
@media(max-width:340px){
  .glink-in{--st-w:78px;--st-h:60px;--b:52px;--sh:78px}
  .glink-word{font-size:calc(7.5px * var(--fs-alumni-scale,1.4))}
}