/* Слайд-шоу плиток прошивки (packages/ui/tileshow.js). Кадр — справжня плитка
   інтерфейсу oCBot, над нею репліка в бульбашці. Висота вікна стала, тож зміна
   кадру не рухає нічого довкола; довгі плитки (скрипти) обрізаються знизу під
   згасання — видно верх, де назва й гейдж. */
.tshow { --tshow-w: 210px; --tshow-h: 168px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  width: calc(var(--tshow-w) + 60px); pointer-events: none; }

.tshow-say { position: relative; max-width: 100%; padding: 9px 13px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border-gold); box-shadow: var(--elev-2);
  font: 500 .8rem/1.42 var(--font); color: var(--text); text-wrap: pretty;
  transition: opacity .2s ease; }
/* Хвіст бульбашки — на кадр під нею. */
.tshow-say::after { content: ''; position: absolute; right: calc(var(--tshow-w) / 2 - 7px); bottom: -7px;
  width: 12px; height: 12px; background: var(--surface); transform: rotate(45deg);
  border: solid var(--border-gold); border-width: 0 1px 1px 0; }
.tshow-say.out { opacity: 0; }

.tshow-frame { position: relative; width: var(--tshow-w); height: var(--tshow-h);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
          mask-image: linear-gradient(#000 72%, transparent); }
.tshow-frame img { position: absolute; top: 0; left: 0; width: 100%; height: auto;
  filter: drop-shadow(0 6px 14px rgba(var(--green-rgb), .14));
  transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 1); }
.tshow-frame img.enter { opacity: 0; transform: translateY(10px) scale(.98); }
.tshow-frame img.out { opacity: 0; transform: translateY(-8px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .tshow-frame img, .tshow-say { transition: none; }
}

/* ── Плитка головної ─────────────────────────────────────────────────────
   Стоїть там, де в інших плиток гравюра, під тілом плитки й під посиланням-
   обкладинкою: клік по кадру веде туди ж, куди й уся плитка. На широкому екрані —
   у правому нижньому куті, великим кадром; вужче — окремим рядком під текстом,
   на телефоні на всю ширину колонки, бульбашка над кадром.
   Тло такої плитки — з двох кутів: колір зони зверху зліва, як у всіх, і густіший
   знизу справа — під кадром, щоб світла плитка прошивки мала на чому стояти. */
.dir-tile:has(.tshow.corner) .dir-plate { display: none; }
.dir-tile:has(.tshow.corner) .wash { opacity: 1;
  background:
    radial-gradient(120% 90% at 10% -10%, color-mix(in srgb, var(--zone) 24%, transparent), transparent 60%),
    radial-gradient(85% 95% at 104% 108%, color-mix(in srgb, var(--zone) 46%, transparent), transparent 64%); }
.dir-tile .tshow.corner { position: relative; z-index: 4; width: 100%; margin: 20px 0 -20px;
  align-items: center; --tshow-w: min(100%, 380px); --tshow-h: 230px; }
.dir-tile .tshow.corner .tshow-say { max-width: 420px; }
.dir-tile .tshow.corner .tshow-say::after { right: calc(50% - 7px); }
@media (min-width: 1440px) {
  .dir-tile .tshow.corner { position: absolute; right: 26px; bottom: 0; margin: 0;
    width: calc(var(--tshow-w) + 16px); align-items: flex-end; --tshow-w: 290px; --tshow-h: 250px; }
  /* Бульбашка не ширша за кадр: ліворуч від неї на наведенні ростуть гілки-свободи. */
  .dir-tile .tshow.corner .tshow-say::after { right: calc(var(--tshow-w) / 2 - 7px); }
}