/* СТОПКА — «КОЛОДА» (владелец 22.10 10:18: «визуализация карт в стопке требует премиальности»; макет stack-premium,
 * выбран вариант А). Верхняя карта, под ней кромки двух карт вверх-вправо тонкой светлой нитью; в уголке — веер из 3 карт
 * и число — на самой кнопке состояния; кнопка обычная — тот же код, цвет и действие (10:28, 10:48, 13:08: «серой не нужно»).
 * Имя набора — под кнопкой слева (13:31: в узкой карточке плашка по центру наезжала на «2 из 5»).
 * Волны хода — свои у кадра, не меняются (00:40). */
[data-stack-top]{--stack-edge:color-mix(in oklch,var(--surface) 82%,#3a2c24);--stack-thread:color-mix(in oklch,#ffebd2 22%,transparent)}
/* КОЛОДА, ВАРИАНТ А (владелец 22.10 10:28; 16:23 «всё-таки мне нравится А»; 16:24 — снимок: «сейчас колода не А»):
 * из-под верхней карты выглядывают две карты, повёрнутые вверх-вправо, тонкой светлой нитью — как в макете.
 * Прежде кромки были слоем тени: тень не поворачивается (выходило плоско), а тени наведения и публикации её стирали
 * (16:21: «отрисовка стопки исчезает»). Теперь это две настоящие карты под верхней (stacks.js ставит их в карточку):
 * слой ниже снимка (z-index -1 в изолированной карточке), снаружи видна только их кромка. */
/* Сетка рисует карточки «по видимости» (content-visibility:auto) — это обрезка по краю карточки; у верхней карты
 * стопки её снимаем, иначе кромки нижних карт не видны (16:24). */
/* Верхняя карта стопки — чуть меньше своей ячейки, прижата к левому нижнему углу; карты под ней выглядывают в
 * освободившуюся полосу сверху-справа и не заходят на соседние ячейки (владелец 22.10 16:28: «стопка подлезает
 * под соседние — сделай карты во фрейме чуть меньше»; 16:33: «чуть побольше сдвиг, чтобы виднее была стопка»). Сдвиг и поворот нижних — в долях карты: запас одинаков
 * в любой колонке и на телефоне. */
.mf-frame[data-stack-top]{overflow:visible;content-visibility:visible;scale:.89;transform-origin:0 100%}
[data-stack-top] .mf-frame-media,[data-stack-top]::before{border-radius:inherit}
.mf-stack-back{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--stack-edge);box-shadow:0 0 0 1px var(--stack-thread),0 10px 22px color-mix(in oklch,black 45%,transparent);pointer-events:none;transform-origin:50% 100%}
.mf-stack-back.is-near{transform:translate(2.4%,-1.9%) rotate(1.2deg)}
.mf-stack-back.is-far{transform:translate(4.8%,-3.8%) rotate(2.4deg)}
.mf-frame-status:has(>.mf-stack-chip){width:auto;padding-inline:var(--space-2)}
.mf-frame-status:has(>.mf-stack-chip)>:not(.mf-stack-chip){display:none}
.mf-stack-chip{display:inline-flex;align-items:center;gap:6px;color:inherit;font:600 var(--micro)/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;white-space:nowrap;pointer-events:none}
.mf-stack-fan{width:18px;height:18px;fill:color-mix(in oklch,currentColor 22%,transparent);stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.mf-stack-fan .is-front{fill:currentColor}
.mf-stack-badge{position:absolute;z-index:3;left:var(--space-2);top:calc(var(--space-2) + var(--mf-ctl-size) + 6px);max-width:calc(100% - 2 * var(--space-2));padding:3px var(--space-2);border:1px solid color-mix(in oklch,white 12%,transparent);border-radius:999px;background:color-mix(in oklch,black 55%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:color-mix(in oklch,white 88%,var(--accent));font-size:var(--micro);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* СТОПКА ТЕМЫ — «ЦВЕТОК» (владелец 22.10 17:00, макет theme-stacks В): верхняя карта меньше ячейки и стоит по центру низа;
 * за ней четыре карты веером из одной точки, кромки светятся цветом темы (--theme-a/--theme-b ставит stacks.js). Нижние
 * не выходят за ячейку — соседей не задевают (замер craft:photosets 9в). */
.mf-frame[data-stack-top][data-stack-kind="theme"]{scale:.8;transform-origin:50% 100%;translate:0 -6%}
.mf-stack-back.is-petal{background:color-mix(in oklch,var(--theme-b) 22%,#1d1418);box-shadow:0 0 0 1px color-mix(in oklch,var(--theme-a) 70%,transparent),0 0 14px color-mix(in oklch,var(--theme-a) 35%,transparent)}
.mf-stack-back.p1{transform:rotate(-5deg)}
.mf-stack-back.p2{transform:rotate(-2.5deg)}
.mf-stack-back.p3{transform:rotate(2.5deg)}
.mf-stack-back.p4{transform:rotate(5deg)}
.mf-stack-flower{width:18px;height:18px}