/* ============================================================
   cards.css · My Superhero Friends (v50)
   קומיקס עד הסוף: קרני מהירות, נקודות הדפסה, משבצות, בועות דיבור,
   קווי דיו עבים, צל קשיח. התנועה: transform ו-opacity בלבד.
   ============================================================ */
.comic { --halftone: radial-gradient(rgba(10, 11, 34, .2) 1.3px, transparent 1.8px); }
.comic .sky__swirl { opacity: .03; }

/* ---------- כריכה ---------- */
.cover { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 50px) 0 40px; background: radial-gradient(80% 70% at 70% 40%, #2a62c7 0%, #1b3f8b 38%, #2a1550 75%, #170c33 100%); border-bottom: 4px solid var(--ink); }
.cover__rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 68% 46%, rgba(255, 224, 138, .13) 0 4deg, transparent 4deg 11deg); mask-image: radial-gradient(closest-side at 68% 46%, transparent 10%, #000 60%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce-motion) .cover__rays { animation: rays 60s linear infinite; } }
@keyframes rays { to { transform: rotate(360deg); } }
.cover::after { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 9px 9px; mask-image: linear-gradient(180deg, transparent 40%, #000); pointer-events: none; }
.cover__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.cover__issue { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cover__issue span { padding: 5px 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); font: 900 .95rem/1 var(--f-brand); box-shadow: 2px 3px 0 var(--ink); transform: rotate(-2deg); }
.cover__issue span:nth-child(2) { background: var(--gold); transform: rotate(2deg); }
.cover__issue span:nth-child(3) { background: #ff6b6b; color: #fff; transform: rotate(-1deg); }
.cover__title { font-size: clamp(2.8rem, 1.4rem + 5.4vw, 6.4rem); line-height: .98; color: #fff; -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: .05em .07em 0 var(--ink); }
.cover__small { display: block; font-size: .3em; color: var(--teal-hi); margin-bottom: .35em; -webkit-text-stroke: .1em var(--ink); }
.cover__pop { display: block; color: var(--gold); transform: rotate(-3deg); transform-origin: right; }
.cover__lead { margin-top: 22px; padding: 16px 18px; max-width: 54ch; background: var(--paper); color: var(--paper-ink); border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); font-size: 1.04rem; line-height: 1.6; transform: rotate(-.8deg); }
.cover__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cover__art { position: relative; height: clamp(360px, 42vw, 560px); }
.cover__logo { position: absolute; z-index: 20; width: 40%; top: -8%; inset-inline-end: -2%; filter: drop-shadow(5px 6px 0 var(--ink)); transform: rotate(8deg); }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce-motion) .cover__logo { animation: pop-in .9s var(--spring) .2s both; } }
@keyframes pop-in { from { transform: rotate(-20deg) scale(.2); opacity: 0; } }
.cover__deck { position: absolute; inset: 0; }
.cover__deck .ccard { position: absolute; top: 12%; left: 28%; width: 42%; transform-origin: 50% 110%; transform: rotate(calc(var(--k) * 11deg)) translateX(calc(var(--k) * 6%)); transition: transform .9s var(--spring); }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce-motion) .cover__deck .ccard { animation: deal-card .9s var(--spring) both; animation-delay: calc(.15s + var(--n) * 90ms); } }
@keyframes deal-card { from { transform: translateY(40%) rotate(0deg) scale(.7); opacity: 0; } }
.cover__art:hover .ccard { transform: rotate(calc(var(--k) * 15deg)) translateX(calc(var(--k) * 10%)) translateY(-3%); }
.cover__count { position: relative; z-index: 2; margin-top: 18px; font: 700 1.05rem var(--f-brand); color: #dfe6ff; }
.cover__count b { color: var(--gold); font-size: 1.4em; }
@media (max-width: 860px) { .cover__grid { grid-template-columns: 1fr; } .cover__art { height: 92vw; max-height: 480px; order: -1; } }

/* ---------- בועות ומשבצות ---------- */
.balloon { position: relative; display: inline-block; max-width: 100%; padding: 18px 30px; border-radius: 50%; background: #fff; color: var(--ink); border: 3px solid var(--ink); font: 900 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.25 var(--f-brand); box-shadow: 4px 5px 0 var(--ink); text-wrap: balance; }
/* זנב מצויר שנבלע בבועה, במקום ריבוע מסובב */
.balloon::after { content: ""; position: absolute; top: calc(100% - 3px); inset-inline-end: 22%; width: 34px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M4 0 C10 10 9 22 2 32 C16 26 26 16 30 0' fill='%23fff' stroke='%230e0b20' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M1 0h33v3H1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; }
[dir="rtl"] .balloon::after, html[dir="rtl"] .balloon::after { transform: scaleX(-1); }
.balloon--shout { border: 0; border-radius: 0; box-shadow: none; padding: 26px 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M8 30 L30 6 L52 24 L78 4 L100 22 L128 2 L150 20 L176 3 L198 21 L226 4 L246 24 L272 8 L284 34 L298 48 L284 62 L296 84 L272 92 L262 116 L236 100 L210 118 L188 100 L160 117 L138 99 L110 116 L88 98 L60 115 L44 96 L18 104 L22 80 L2 66 L18 52 L4 38 Z' fill='%23f5c842' stroke='%230e0b20' stroke-width='4' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; filter: drop-shadow(4px 5px 0 var(--ink)); transform: rotate(-3deg); }
.balloon--shout::after { display: none; }

.story-strip { padding: clamp(48px, 7vw, 90px) 0 clamp(30px, 4vw, 50px); }
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); align-items: stretch; }
.cpanel { position: relative; display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: 16px; min-height: 0; padding: 34px 24px 0; background: var(--paper); color: var(--paper-ink); border: 4px solid var(--ink); box-shadow: 8px 9px 0 var(--ink); overflow: hidden; isolation: isolate; }
.cpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 100%, rgba(255, 255, 255, .55), transparent 70%), var(--halftone); background-size: auto, 9px 9px; mask-image: linear-gradient(180deg, transparent 20%, #000 75%); pointer-events: none; }
/* ציור המשבצת: הקלפים עצמם, יושבים בתחתית ומציצים */
.cpanel::after { content: ""; justify-self: stretch; align-self: end; margin-inline: -24px; height: clamp(230px, 19vw, 300px); margin-top: 8px; background: var(--art) no-repeat 50% 100% / contain; transform: translateY(10%); transition: transform .8s var(--spring); }
.cpanel:hover::after { transform: translateY(0) scale(1.03); }
.cpanel--1 { --art: url('../assets/cards/story/panel-1.webp'); background: linear-gradient(170deg, #fff1c4, #ffd977); transform: rotate(-1deg); }
.cpanel--2 { --art: url('../assets/cards/story/panel-2.webp'); background: linear-gradient(170deg, #d4f4f8, #8fd8e3); transform: rotate(.8deg) translateY(12px); }
.cpanel--3 { --art: url('../assets/cards/story/panel-3.webp'); background: linear-gradient(170deg, #ffe0ef, #f4a9cf); transform: rotate(-.5deg); }
.js-motion .cpanel--1[data-in].is-in { transform: rotate(-1deg); }
.js-motion .cpanel--2[data-in].is-in { transform: rotate(.8deg) translateY(12px); }
.js-motion .cpanel--3[data-in].is-in { transform: rotate(-.5deg); }
.cpanel__no { position: absolute; top: 12px; inset-inline-start: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 900 1.3rem var(--f-brand); transform: rotate(-6deg); z-index: 2; }
.cpanel .balloon { position: relative; z-index: 1; justify-self: center; margin: 4px 30px 6px; text-align: center; }
.cpanel__cap { position: relative; z-index: 1; padding: 12px 14px; background: rgba(255, 255, 255, .72); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); font-size: 1.02rem; line-height: 1.55; }
.cpanel__cap b { display: block; margin-bottom: 2px; font: 900 1.2rem var(--f-brand); }
@media (max-width: 820px) { .panels { grid-template-columns: 1fr; } .cpanel { min-height: 0; grid-template-rows: auto auto auto; } .cpanel::after { height: 230px; } .cpanel--2 { transform: rotate(.8deg); } .js-motion .cpanel--2[data-in].is-in { transform: rotate(.8deg); } }

/* ---------- כלי הסינון ---------- */
.collection { padding: clamp(30px, 5vw, 60px) 0 clamp(40px, 6vw, 80px); }
.tools { position: sticky; top: calc(var(--nav-h) + 18px); z-index: 50; padding: 14px; margin-bottom: 26px; background: rgba(18, 22, 66, .94); border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: 6px 7px 0 var(--ink); transition: top .45s var(--ease); }
.topnav.is-hidden ~ main .tools { top: 12px; }
.tools__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
.search svg { position: absolute; inset-inline-start: 14px; width: 20px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 48px; padding: 10px 46px 10px 16px; border-radius: var(--r-pill); border: 2.5px solid var(--ink); background: #fffaf0; color: var(--paper-ink); font: 700 1.05rem var(--f-brand); }
.search input::placeholder { color: #8a84ad; }
.search input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.sort { display: flex; align-items: center; gap: 8px; font: 700 1rem var(--f-brand); color: var(--muted); }
.sort select { min-height: 48px; padding: 8px 14px; border-radius: var(--r-pill); border: 2.5px solid var(--ink); background: var(--gold); color: var(--ink); font: 900 1rem var(--f-brand); cursor: pointer; }
.tools__toggle { display: none; }
.tools__badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff5a8a; color: #fff; font-size: .8rem; }
.filters { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; margin-top: 14px; }
.fgroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.fgroup legend { font: 900 1rem var(--f-brand); color: var(--gold); margin-bottom: 8px; padding: 0; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px; border-radius: var(--r-pill); border: 2px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--text); font: 700 .92rem/1 var(--f-brand); transition: background .2s, transform .35s var(--spring), border-color .2s; }
.fchip:hover { background: rgba(255,255,255,.12); }
.fchip[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 2px 3px 0 var(--ink); transform: rotate(-2deg); }
.fchip small { opacity: .7; font-size: .8em; }
.fchip i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sw); }
.tools__status { margin-top: 10px; font-size: .92rem; color: var(--muted); }
.tools__clear { margin-inline-start: 8px; color: var(--gold); font: 700 .92rem var(--f-brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .tools { top: calc(var(--nav-h) + 14px); padding: 10px; }
  .tools__toggle { display: inline-flex; }
  .sort > span { display: none; }
  .filters { grid-template-columns: 1fr; display: none; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
  .tools.is-open .filters { display: grid; }
}

/* ---------- הגריד ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.grid > li { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.tcard { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border-radius: 14px; border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); background: var(--night-2); overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .3s; container-type: inline-size; }
.tcard img { width: 100%; height: 100%; object-fit: cover; }
.tcard:hover, .tcard:focus-visible { box-shadow: 9px 11px 0 var(--ink); }
.tcard:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.tcard__shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 46%, rgba(255, 224, 138, .25) 52%, transparent 66%); background-size: 250% 250%; background-position: var(--sx, 50%) 50%; transition: opacity .3s; }
.tcard:hover .tcard__shine { opacity: 1; }
.tcard.is-moving { transition: transform .08s linear, box-shadow .3s; }
.tcard__side { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; padding: 4px 8px; border-radius: 6px; border: 2px solid var(--ink); font: 900 .72rem/1 var(--f-brand); color: var(--ink); background: var(--side-c, var(--gold)); box-shadow: 2px 2px 0 var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .35s var(--spring); }
.tcard:hover .tcard__side, .tcard:focus-visible .tcard__side { opacity: 1; transform: none; }
@media (hover: none) { .tcard__side { display: none; } }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tcard { box-shadow: 4px 5px 0 var(--ink); } }

/* לוחית שם: מכסה את השם האמיתי שמודפס על הקלף */
.nameplate { position: absolute; z-index: 2; display: grid; place-items: center; padding-inline: 4%; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--np, #1b3f8b) 72%, #000), color-mix(in srgb, var(--np, #1b3f8b) 40%, #000)); border: 2px solid #f5c842; box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 rgba(255,255,255,.25); color: #ffe08a; font: 900 7cqw/1 var(--f-brand); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 var(--ink); direction: ltr; }

.empty { display: grid; justify-items: center; gap: 16px; padding: 60px 0; text-align: center; color: var(--muted); }

/* ---------- הסולם ---------- */
.scale { margin-block: clamp(20px, 4vw, 50px); }
.scale__panel { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(22px, 4vw, 44px); background: #11143f; border: 4px solid var(--ink); box-shadow: 8px 10px 0 var(--ink); border-radius: var(--r-lg); position: relative; overflow: hidden; }
.scale__panel::before { content: ""; position: absolute; inset: 0; background: url('../assets/cards/ui/back-printed.webp') center / 420px repeat; opacity: .12; pointer-events: none; }
.scale__panel > * { position: relative; }
.scale__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); }
.scale__title span { color: var(--gold); }
.scale__panel p { max-width: 64ch; color: var(--muted); }
.scale__bar { width: min(720px, 100%); direction: ltr; }
.scale__note { font: 700 1rem var(--f-brand); color: var(--teal-hi) !important; }

.cta { margin-block: clamp(30px, 5vw, 70px) clamp(40px, 6vw, 80px); }
.cta__box { display: grid; justify-items: start; gap: 14px; padding: clamp(24px, 4vw, 44px); background: var(--gold); color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 10px 0 var(--ink); border-radius: var(--r-lg); position: relative; overflow: hidden; }
.cta__box::after { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 8px 8px; mask-image: linear-gradient(200deg, #000, transparent 55%); pointer-events: none; }
.cta__box h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.cta__box p { max-width: 56ch; }
.cta__box .balloon--shout { background: #fff; }
.cta__box .btn { --b-bg: var(--ink); --b-fg: var(--gold); position: relative; z-index: 1; box-shadow: 3px 4px 0 #a47a10; }

/* ============================================================
   הצופה: הקלף בגדול, מתהפך סביב הציר האנכי
   ============================================================ */
.viewer { position: fixed; inset: 0; z-index: 1100; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.viewer[hidden] { display: none; }
.viewer__scrim { position: absolute; inset: 0; background: rgba(6, 7, 26, .9); background-image: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 224, 138, .05) 0 3deg, transparent 3deg 10deg); opacity: 0; transition: opacity .35s var(--ease); }
.viewer.is-open .viewer__scrim { opacity: 1; }
.viewer__stage { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; perspective: 1600px; }
.flip { position: relative; height: min(76vh, 760px, calc((100vw - 32px) * 1.5)); aspect-ratio: 2 / 3; cursor: pointer; touch-action: pan-y; outline: none; transform: scale(.85); opacity: 0; transition: transform .55s var(--spring), opacity .3s var(--ease); container-type: inline-size; }
.viewer.is-open .flip { transform: none; opacity: 1; }
.flip:focus-visible { outline: 3px solid var(--gold); outline-offset: 8px; border-radius: 18px; }
.flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .9s cubic-bezier(.2, .9, .25, 1.08); will-change: transform; }
.flip.is-dragging .flip__inner { transition: none; }
.face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid var(--ink); background: var(--night); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.face--front img { width: 100%; height: 100%; object-fit: cover; }
.face--back { transform: rotateY(180deg); }
.flip__shine { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%); opacity: var(--shine, 0); transition: opacity .3s; }
.viewer__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 8px; border-radius: var(--r-pill); background: rgba(18, 22, 66, .95); border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); max-width: calc(100vw - 24px); opacity: 0; transform: translateY(20px); transition: opacity .3s .1s, transform .5s var(--spring) .1s; }
.viewer.is-open .viewer__bar { opacity: 1; transform: none; }
.viewer__info { min-width: 0; padding-inline: 6px; text-align: center; }
.viewer__info h2 { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__info p { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.vbtn { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); }
.vbtn svg { width: 22px; }
.vbtn:hover { background: var(--gold); }
.viewer__close { position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.viewer__close svg { width: 22px; }
@media (max-width: 560px) { .viewer__info p { display: none; } .viewer__bar { gap: 8px; } }

/* ---------- גב הקלף: לפי הטיוטה של דניאל ----------
   אמנות הגיבור למעלה + שם + הלוגו, מגילה עם הכוח והמשפט, חמישה מדדים,
   והסולם המוסרי מאש לגפנים עם חץ. הכול ביחידות של רוחב הקלף (cqw). */
.back { position: absolute; inset: 0; display: grid; grid-template-rows: 41% auto auto auto auto; align-content: start; background: #10183e; color: #fff; font-family: var(--f-brand); }
.back::before { content: ""; position: absolute; inset: 0; background: url('../assets/cards/ui/back-printed.webp') center / cover; opacity: .28; }
.back > * { position: relative; }
.back__art { position: relative; overflow: hidden; }
.back__art > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.12); mask-image: linear-gradient(180deg, #000 55%, transparent 98%); }
.back__logo { position: absolute; top: 3cqw; inset-inline-start: 3cqw; width: 22cqw; filter: drop-shadow(1cqw 1cqw 0 var(--ink)); transform: rotate(-8deg); }
.back__name { position: absolute; bottom: 2cqw; inset-inline: 4cqw; text-align: center; font: 900 9cqw/1 var(--f-brand); color: var(--gold); -webkit-text-stroke: .9cqw var(--ink); paint-order: stroke fill; text-shadow: .9cqw 1cqw 0 var(--ink); text-transform: uppercase; direction: ltr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back__scroll { margin: 1cqw 4.5cqw 0; padding: 2.2cqw 4cqw; background: url('../assets/cards/ui/parchment.webp') center / 100% 100%; color: #2b1d0e; text-align: center; border-radius: 2cqw; }
.back__scroll b { display: block; font: 900 4.6cqw/1.15 var(--f-brand); }
.back__scroll span { display: block; margin-top: 1cqw; font: 500 3.4cqw/1.3 var(--f-text); }
.back__scroll i { display: block; margin-top: 1cqw; font: 700 3.1cqw/1.25 var(--f-brand); font-style: normal; opacity: .8; direction: ltr; }
.back__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; margin: 2cqw 6cqw 0; direction: ltr; }
.stat { position: relative; aspect-ratio: 175 / 315; }
.stat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stat b { position: absolute; bottom: 4%; inset-inline: 0; text-align: center; font: 900 7.6cqw/1 var(--f-brand); color: #fff; -webkit-text-stroke: .7cqw var(--ink); paint-order: stroke fill; text-shadow: .5cqw .6cqw 0 var(--ink); }
.back__moral { position: relative; margin: 1.6cqw 4cqw 0; direction: ltr; }
.back__moral img { width: 100%; }
.back__arrow { position: absolute; top: 74%; left: var(--m); width: 7cqw; height: 9cqw; transform: translateX(-50%); }
.back__arrow::before { content: ""; position: absolute; inset: 0; background: var(--gold); border: .7cqw solid var(--ink); clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%); }
.back__side { margin-top: 3.2cqw; text-align: center; font: 900 4.2cqw/1 var(--f-brand); color: var(--side-c, var(--gold)); }
.viewer.is-open .back__arrow { animation: arrow-in .9s var(--spring) .55s both; }
@keyframes arrow-in { from { left: 50%; opacity: 0; } }

/* ---------- reduced motion ---------- */
html.reduce-motion .flip__inner { transition-duration: .001ms; }

/* נעילת גלילה כשקלף או קרב פתוחים */
html.scroll-locked, html.scroll-locked body { overflow: hidden; }
html.scroll-locked body { position: fixed; inset-inline: 0; width: 100%; }
.viewer, .arena { overscroll-behavior: contain; }
.viewer.is-closing .viewer__aside, .viewer.is-closing .vbtn, .viewer.is-closing .viewer__close, .viewer.is-closing .viewer__bar { opacity: 0 !important; transition: opacity .12s !important; pointer-events: none; }
.flip { transform-style: preserve-3d; }

/* כפתור וינטג' עגול בפינה השמאלית התחתונה של הקלף, יושב על הפינה ולא מסתיר את הציור */
.vint-btn { position: absolute; z-index: 5; left: -18px; bottom: -18px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff3d0, #e8c27a 55%, #b8863a); color: #3a2414; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink);
  font: 900 1rem/1 var(--f-brand); cursor: pointer; transform: rotate(-10deg); transition: transform .45s var(--spring), box-shadow .3s; }
.vint-btn::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed rgba(58, 36, 20, .45); }
.vint-btn span { position: relative; }
.vint-btn:hover, .vint-btn:focus-visible { transform: rotate(0deg) scale(1.08); box-shadow: 6px 7px 0 var(--ink); }
.vint-btn[aria-pressed="true"] { background: radial-gradient(circle at 35% 30%, #fff, #ffe08a 55%, #f5c842); }
@media (max-width: 760px) { .vint-btn { width: 60px; height: 60px; left: -10px; bottom: -10px; font-size: .9rem; } }

/* מובייל: שלוש המשבצות קומפקטיות, ציור קטן בצד במקום ענק למטה */
@media (max-width: 820px) {
  .story-strip { padding: 28px 0 14px; }
  .panels { gap: 12px; }
  .cpanel { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "art bal" "art cap"; align-items: center; gap: 6px 12px; padding: 12px 12px 12px 10px; min-height: 0; box-shadow: 5px 6px 0 var(--ink); border-width: 3px; }
  .cpanel::after { grid-area: art; align-self: stretch; height: auto; min-height: 112px; margin: 0; background-position: 50% 50%; transform: none; }
  .cpanel .balloon { grid-area: bal; justify-self: start; margin: 0; padding: 8px 14px; font-size: 1rem; box-shadow: 3px 3px 0 var(--ink); }
  .cpanel .balloon::after { display: none; }
  .cpanel .balloon--shout { padding: 12px 18px; transform: rotate(-2deg); }
  .cpanel__cap { grid-area: cap; padding: 0; background: none; border: 0; box-shadow: none; font-size: .88rem; line-height: 1.45; }
  .cpanel__cap b { display: inline; font-size: .95rem; margin-inline-end: 4px; }
  .cpanel__no { top: 6px; inset-inline-start: 6px; width: 28px; height: 28px; font-size: 1rem; border-width: 2px; }
  .cpanel--2, .js-motion .cpanel--2[data-in].is-in { transform: rotate(.6deg); }
}