/* ============================================================================
   holo.css — פעימת-העל: עור "הולוגרמה רגישה" (22.07, סבב דיוקים 2)
   שכבה על-גבי magic.css. מסכים 1-5 קדושים — לא נוגעים בהם; העור חל רק על
   מסכים שנושאים .lw (light-world) + על הכרום הגלובלי ושכבת אור-השרביט.
   ניגודיות נמדדה (WCAG): --lw-ink על --cream = 8.25 · --lw-gold-text = 4.77.
   דיוקי סבב 2 (יוסף): טקסט תמיד נבדק מול הרקע שלו + בלי שורות יתומות ·
   פרלקסה מחוזקת בשלוש שכבות · מסך 10 אוורירי עם קלפים בגזרה מדויקת ·
   מסך 12 יהלומים (לא לבבות) + הקריסטל שלה גדול במרכז · כפתור מוזיקה חדש.
   ============================================================================ */

/* ═══════════ 1. טוקנים חדשים ═══════════ */
:root {
  /* — עולם האור: שמנת-פנינה וזהב רך — */
  --cream:      #FFFBF4;   /* משטח כרטיס ראשי */
  --cream-2:    #FBF3E8;   /* משטח משני / הצללת שמנת */
  --lw-ink:     #6B4550;   /* דיו גוף — 8.25 על שמנת (נמדד) */
  --lw-ink-strong: #5E3B47;/* דיו כותרות — 10.75 */
  --lw-gold-text:  #A16207;/* זהב לטקסט בלבד — 4.77 (AA). לעולם לא C9A45C לטקסט */
  --lw-gold-line:  #D9BC7E;/* זהב לקווים/מסגרות — דקורטיבי, לא טקסט */
  --lw-shadow:  0 12px 34px rgba(202, 132, 160, .20), 0 3px 10px rgba(202, 132, 160, .13);

  /* — טוקני תנועה מורחבים (על גבי --t-micro/--t-scene/--t-enter) — */
  --t-hero: 1100ms;                                /* רגעי שיא בלבד */
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1);   /* קפיץ עדין לכרטיסים */
  --ease-hero:   cubic-bezier(.16, 1, .3, 1);

  /* — פרלקסה (נכתב חי ע"י wand.js מהג'ירו/עכבר) — */
  --plx-x: 0; --plx-y: 0;
  /* גיין פר-מקור-קלט: 1 לעכבר, ~2.1 לג'ירו (wand.js קובע חי) */
  --plx-gain: 1;
}

/* ═══════════ 2. עולם האור — המסך עצמו ═══════════ */
.step.lw .vignette { display: none; }
.step.lw .content { color: var(--lw-ink); }
.step.lw .content { padding-top: max(clamp(64px, 11vh, 108px), env(safe-area-inset-top)); } /* אוויר לכרום */

/* ═══ כלל הטקסט של נסיה: שורות מאוזנות, בלי מילה יתומה בסוף שורה ═══
   text-wrap: balance מחלק את השורות שוות-אורך — שבירה מעוצבת בכל רוחב מסך.
   בדפדפנים בלי תמיכה: max-width צר + מרכז שומרים על שבירה סבירה. */
.lw .lw-title, .lw .lw-sub i, .lw .s12h-paras i, .lw .s10h-punch {
  text-wrap: balance;
}

/* גוון הקריסטל על הרקע — שכבת צבע חיה מעל הארט, מתחת לתוכן */
.lw-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--c-glow), transparent 62%),
    linear-gradient(180deg, transparent 30%, var(--c-air) 130%);
  opacity: .5;
  transition: opacity 900ms ease;
}

/* ═══ פרלקסה תלת-שכבתית מחוזקת (דיוק יוסף: "שירגישו את זה") ═══
   רקע 18px ↓ שכבת-עומק צפה 34px ↓ תוכן נגדי 8px — שלושה קצבים = עומק אמיתי. */
.step.lw .art-layer {
  transform: translate3d(calc(var(--plx-x) * var(--plx-gain) * 18px),
                         calc(var(--plx-y) * var(--plx-gain) * 12px), 0) scale(1.09);
  will-change: transform;
}
.step.lw .content > .stack {
  transform: translate3d(calc(var(--plx-x) * var(--plx-gain) * -8px),
                         calc(var(--plx-y) * var(--plx-gain) * -6px), 0);
}
/* שכבת העומק: בועות-אור רכות שמרחפות לאט וזזות הכי הרבה עם המכשיר —
   הן "הכי קרובות אלינו" ולכן מוכיחות את העומק. CSS בלבד, בלי תמונות. */
.lw-depth {
  position: absolute; inset: -4%; z-index: 2; pointer-events: none;
  transform: translate3d(calc(var(--plx-x) * var(--plx-gain) * 34px),
                         calc(var(--plx-y) * var(--plx-gain) * 24px), 0);
  will-change: transform;
}
.lw-depth i {
  position: absolute;
  width: calc(var(--u) * var(--s, 8)); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
              rgba(255, 255, 255, .5), rgba(255, 235, 248, .16) 55%, transparent 75%);
  filter: blur(1px);
  animation: lwBokeh var(--d, 9s) var(--dl, 0s) ease-in-out infinite alternate;
}
@keyframes lwBokeh {
  from { transform: translateY(-6px) scale(.96); opacity: .55; }
  to   { transform: translateY(8px)  scale(1.05); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .step.lw .art-layer, .step.lw .content > .stack, .lw-depth { transform: none !important; }
  .lw-depth i { animation: none; }
}

/* ═══ טיפוגרפיית עולם-האור — סבב 4 (נסיה): בלי שום קופסת-זכוכית ═══
   ⚠️ הוחלט סופית: טקסט בהיר ישירות על העולם, נישא ע"י הצללה רכה בלבד —
   בדיוק השפה של מסכים 1-5 שנסיה אוהבת. .lw-band נשאר כמבנה פריסה בלבד
   (קיבוץ ורווחים) — אפס ויזואליה.
   Final (EN): light type straight on the world, carried by soft layered
   shadows only. No glass, no plates. .lw-band is layout-only. */
.lw .lw-band {
  position: relative;
  width: fit-content; max-width: 94%;
  margin-inline: auto;
  display: grid; gap: calc(var(--air) * 1.8);
}

.lw .lw-title {
  position: relative;
  display: block;
  margin-inline: auto;
  font-size: calc(var(--fs-greet) * .92);
  line-height: 1.42;
  max-width: 22ch;
  color: #FFFDF9;
  -webkit-text-stroke: var(--stroke-soft) currentColor;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .8), 0 2px 12px rgba(122, 58, 82, .42),
               0 0 30px rgba(122, 58, 82, .26);
}
.lw .lw-sub {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: #FFFBF5;
  -webkit-text-stroke: .2px currentColor;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .78), 0 0 12px rgba(122, 58, 82, .4);
}
/* הדגשה "זהובה" בעולם האור: שמנת-זהב מוארת עם זוהר חם — לא אוקר כהה
   (הצבע שנסיה לא אהבה). Warm lit gold, not dark ochre. */
.lw .lw-gold, .lw .s06h-of, .lw .s10h-punch, .lw .s12h-paras i.hl {
  color: #FFF3DC;
  -webkit-text-stroke: .25px currentColor;
  text-shadow: 0 1px 2px rgba(90, 52, 30, .75), 0 0 12px rgba(201, 148, 72, .6),
               0 0 26px rgba(232, 206, 156, .45);
}

/* ═══ כרטיס שמנת ═══ */
.cream-card {
  position: relative;
  background: linear-gradient(168deg, var(--cream), var(--cream-2));
  border-radius: 24px;
  border: 1px solid rgba(217, 188, 126, .55);
  box-shadow: var(--lw-shadow), inset 0 1px 0 #fff;
}
.cream-card::before {
  content: ''; position: absolute; inset: 5px; border-radius: 19px;
  border: 1px solid rgba(217, 188, 126, .38);
  pointer-events: none;
}

/* ═══ מצב מגע חי ═══ */
.lw-press {
  transition: transform var(--t-micro) var(--ease-spring),
              box-shadow var(--t-micro) ease, filter var(--t-micro) ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lw-press:hover  { transform: translateY(-2px) scale(1.015); }
.lw-press:active { transform: scale(.965); }
.lw-press:focus-visible { outline: 3px solid var(--lw-gold-text); outline-offset: 4px; }

/* כפתור ראשי בעולם האור */
.lw-btn {
  position: relative; z-index: 4;
  display: grid; place-items: center;
  min-height: 52px;
  padding: .45em 2.1em .55em;
  border: 1.5px solid var(--lw-gold-line);
  border-radius: 999px;
  background: linear-gradient(175deg, #FFFDF8, #F7ECD9);
  color: var(--c-ink);
  font-size: var(--fs-cta); line-height: 1.15;
  -webkit-text-stroke: var(--stroke-heavy) currentColor;
  box-shadow: 0 6px 22px var(--c-glow), 0 2px 8px rgba(202,132,160,.16), inset 0 1px 0 #fff;
  overflow: hidden;
}
.lw-btn::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: translateX(-280%) skewX(-14deg);
  animation: shimmer 6s 2.4s ease-in-out infinite;
}

/* ═══════════ 3. הכרום המעוטר הגלובלי ═══════════ */
#fairyChrome {
  position: fixed; inset: 0; z-index: 46; pointer-events: none;
  opacity: 0; transition: opacity 700ms ease;
  font-family: inherit;
}
#fairyChrome.on { opacity: 1; }

.fc-trail {
  position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 6px);
  left: 50%; transform: translateX(-50%);
  width: min(62vw, 340px); height: 26px;
  display: flex; align-items: center;
}
.fc-thread {
  position: absolute; inset-inline: 8px; top: 50%; height: 2px; transform: translateY(-50%);
  background: rgba(255, 251, 244, .38);
  border-radius: 2px; overflow: hidden;
}
.fc-thread i {
  position: absolute; top: 0; bottom: 0; right: 0; width: 0%;
  background: linear-gradient(270deg, var(--c-primary), var(--gold-hi));
  box-shadow: 0 0 8px var(--c-glow);
  transition: width 900ms var(--ease-hero);
}
.fc-st {
  position: relative; z-index: 1;
  width: 9px; height: 9px; margin: 0; flex: 0 0 auto;
  transform: rotate(45deg) scale(.82);
  background: rgba(255, 251, 244, .55);
  border: 1px solid rgba(217, 188, 126, .8);
  border-radius: 2px;
  transition: transform 600ms var(--ease-spring), background 600ms ease, box-shadow 600ms ease;
}
.fc-trail .fc-sp { flex: 1 1 auto; }
.fc-st.done { background: var(--gold-hi); border-color: var(--gold-hi); }
.fc-st.here {
  background: var(--c-primary); border-color: #fff;
  transform: rotate(45deg) scale(1.35);
  box-shadow: 0 0 12px var(--c-glow), 0 0 26px var(--c-glow);
  animation: fcBreath 2.8s ease-in-out infinite;
}
@keyframes fcBreath {
  0%, 100% { box-shadow: 0 0 10px var(--c-glow), 0 0 20px var(--c-glow); }
  50%      { box-shadow: 0 0 16px var(--c-glow), 0 0 34px var(--c-glow); }
}

.fc-back {
  position: absolute; top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  pointer-events: auto; cursor: pointer;
  border: 1.4px solid rgba(217, 188, 126, .85);
  border-radius: 50%;
  background: rgba(255, 251, 244, .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(202, 132, 160, .22), inset 0 1px 0 #fff;
  color: var(--lw-gold-text);
  transition: transform var(--t-micro) var(--ease-spring), opacity 500ms ease;
  opacity: 0; pointer-events: none;
}
.fc-back.on { opacity: 1; pointer-events: auto; }
.fc-back:hover { transform: scale(1.08); }
.fc-back:active { transform: scale(.9); }
.fc-back:focus-visible { outline: 3px solid var(--lw-gold-text); outline-offset: 3px; }
.fc-back svg { width: 20px; height: 20px; display: block; }

.fc-medal {
  position: absolute; top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.4px solid rgba(217, 188, 126, .85);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFDF8, var(--cream-2));
  box-shadow: 0 4px 14px var(--c-glow), inset 0 1px 0 #fff;
  opacity: 0; transform: scale(.5);
  transition: opacity 700ms ease, transform 700ms var(--ease-spring);
  overflow: hidden;
  pointer-events: none;
}
.fc-medal.on { opacity: 1; transform: none; }
.fc-medal img {
  width: 74%; height: 74%; object-fit: contain;
  animation: fcMedalBreath 4.5s ease-in-out infinite;
}
@keyframes fcMedalBreath { 0%,100% { transform: scale(1) } 50% { transform: scale(1.09) } }
.fc-medal::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform: translateX(-220%) skewX(-16deg);
}
.fc-medal.sheen::after { animation: shimmer 900ms ease-out 1; }

/* ═══ מתג המוזיקה — מתג-החלקה אמיתי (דיוק יוסף 22.07) ═══
   הידית מחליקה מצד לצד: מסילה מוארת בצבע הקריסטל = דלוק · מסילה כהה
   והידית בצד השני = כבוי. בדיוק כמו מתג בהגדרות הטלפון.
   RTL: "דלוק" = הידית בקצה הימני (כיוון ההתחלה בעברית).
   A real sliding switch: knob travels, track lights up. */
/* סבב 4: קטן באמת (זה לא חשוב) + ברור שזה מוזיקה — תו ♪ ליד מתג זעיר.
   Tiny and self-explanatory: a note glyph beside a mini slide-switch. */
#snd {
  top: calc(max(12px, env(safe-area-inset-top)) + 54px) !important;
  left: max(15px, env(safe-area-inset-left)) !important;
  width: auto !important; height: auto !important;
  border: 0 !important; border-radius: 999px !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 4px !important;
  display: flex !important; align-items: center; gap: 4px;
  opacity: .82;
}
#snd .sw-note {
  width: 11px; height: 13px; display: block;
  color: #FFFDF9;
  filter: drop-shadow(0 1px 2px rgba(122, 58, 82, .7));
  transition: color 300ms ease, opacity 300ms ease;
}
.sw-track {
  position: relative; display: block;
  width: 28px; height: 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 251, 244, .75);
  background: linear-gradient(90deg, var(--c-primary), var(--gold-hi));
  box-shadow: 0 0 8px var(--c-glow), inset 0 1px 2px rgba(120, 80, 110, .22);
  transition: background 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.sw-knob {
  position: absolute; top: 1.5px; right: 1.5px;   /* דלוק = ימין (RTL) */
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF, #FDF4E4);
  box-shadow: 0 1px 3px rgba(142, 78, 100, .4);
  transition: right 320ms var(--ease-spring), background 320ms ease;
}
#snd.off .sw-track {
  background: rgba(150, 136, 150, .45);
  border-color: rgba(255, 251, 244, .5);
  box-shadow: inset 0 1px 2px rgba(140, 84, 100, .28);
}
#snd.off .sw-knob { right: 14.5px; background: radial-gradient(circle at 34% 30%, #FBF7F2, #E2DAE0); }
#snd.off .sw-note { opacity: .55; }
#snd:focus-visible { outline: 2px solid #FFFDF9; outline-offset: 3px; }

body[data-world="dark"] .fc-back { background: rgba(26, 18, 42, .55); color: var(--gold-hi); }
body[data-world="dark"] .fc-medal { background: radial-gradient(circle at 32% 28%, rgba(46,32,66,.9), rgba(26,18,42,.85)); }
body[data-world="dark"] .fc-st { background: rgba(253, 251, 247, .28); }

/* ═══════════ 4. אור השרביט — הקנבס ═══════════ */
#wand {
  position: fixed; inset: 0; z-index: 43; pointer-events: none;
}

/* ═══════════ 5. מסך 6 — הצצה: שורות אור צפות, בלי גלולות ═══════════
   (סבב 2: בלי קופסאות — טקסט חופשי שצף על הרקע, אייקון עדין לצד כל שורה) */
.s06h .stack { justify-content: center; gap: calc(var(--air) * 2.4); }
.s06h .lw-title { opacity: 0; animation: riseIn 800ms 200ms var(--ease-enter) forwards; }
.s06h .s06h-intro { display: grid; gap: calc(var(--air) * 1.15); }
.s06h .s06h-intro i {
  display: block; font-style: normal;
  opacity: 0; animation: riseIn 700ms var(--ease-enter) forwards;
}
.s06h .s06h-intro i:nth-child(1) { animation-delay: 650ms; }
.s06h .s06h-intro i:nth-child(2) { animation-delay: 950ms; }
.s06h .s06h-intro i:nth-child(3) { animation-delay: 1250ms; font-size: calc(var(--fs-body) * 1.06); }

.s06h .s06h-of {
  font-size: calc(var(--fs-body) * 1.12);
  opacity: 0; animation: riseIn 700ms 1650ms var(--ease-enter) forwards;
}

/* ═══ הכרטיסיות (סבב 3, דיוק יוסף): אותה שפה כמו קלפי האורקל —
   בסיס שמנת, מסגרת זהב כפולה־דקה, האיור בפנים. טקסט חופשי על רקע ורוד
   נקרא כ"טקסט זרוק"; כרטיסייה נקראת כאובייקט מעוצב ⇒ גם קריאוּת וגם עולם.
   Tiles in the oracle-card language: cream base, double gold hairline. ═══ */
.s06h .s06h-rows {
  display: grid; gap: calc(var(--air) * 1.9);
  justify-items: center;
  width: 100%;
}
.s06h .s06h-row {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--air) * 2.2);
  width: min(78%, calc(var(--u) * 72));
  padding: calc(var(--air) * 1.35) calc(var(--air) * 2.4);
  border-radius: calc(var(--u) * 3.4);
  background: linear-gradient(166deg, rgba(255,253,248,.94), rgba(250,240,228,.9));
  border: 1px solid rgba(190, 152, 84, .62);
  box-shadow: 0 8px 20px rgba(202, 132, 160, .18), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-size: calc(var(--fs-body) * .99);
  color: var(--lw-ink-strong);
  text-shadow: none;
  opacity: 0;
  animation: s06hIn 620ms var(--ease-spring) forwards;
}
/* קו-הזהב הפנימי — הדנ"א של הקלפים, בזעיר אנפין */
.s06h .s06h-row::before {
  content: ''; position: absolute; inset: 3px;
  border-radius: calc(var(--u) * 2.8);
  border: 1px solid rgba(190, 152, 84, .34);
  pointer-events: none;
}
/* ⚠️ הריחוף הוא *אופקי* בכוונה: הכרטיסיות מסודרות אנכית, ולכן סחיפה
   הצידה אינה יכולה לסגור את המרווח בין שכנות — התנגשות בלתי-אפשרית
   מבנית, לא "מכוילת". קודם היה translateY ±3.5px על מרווח 9px ⇒ שתי
   שכנות נעו זו אל זו 7px ונראו נוגעות.
   Horizontal drift by design: tiles stack vertically, so sideways motion
   can never close the vertical gap — collision is structurally impossible
   rather than merely tuned. */
.s06h .s06h-row.floaty {
  animation: s06hFloat var(--fdur, 7s) var(--fdel, 0s) ease-in-out infinite alternate;
  opacity: 1;
}
@keyframes s06hIn {
  from { opacity: 0; transform: translateY(14px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes s06hFloat {
  from { transform: translateX(-5px) rotate(-.35deg); }
  to   { transform: translateX(5px)  rotate(.35deg); }
}
.s06h .s06h-row span { flex: 1 1 auto; text-align: start; }
/* סבב 4: האלמנט = הקלף המתאים ממסך 10, כמיניאטורה — רצף עולם אחד.
   The element is the matching oracle card in miniature. */
.s06h .s06h-ico {
  width: auto;
  height: calc(var(--u) * 16.5);
  min-height: 54px;
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(178, 106, 134, .32);
  transform: rotate(-3.2deg);
}
.s06h .s06h-row:nth-child(even) .s06h-ico { transform: rotate(3.2deg); }
.s06h .lw-btn { opacity: 0; animation: riseIn 800ms 3400ms var(--ease-enter) forwards; }

/* ═══════════ 6. מסך 10 — קלפי הרגעים (סבב 2: אוויר, גזרה מדויקת) ═══════════ */
.s10h .stack { justify-content: space-between; gap: calc(var(--air) * 1.6); }
.s10h .lw-title { opacity: 0; animation: riseIn 800ms 200ms var(--ease-enter) forwards; }

/* הצביר: תופס את רוב הגובה הפנוי, הקלפים קטנים יותר ופרושים רחב יותר —
   הטקסט שמתחת לעולם לא נבלע. */
.s10h .s10h-fan {
  position: relative;
  flex: 1 1 auto;
  width: min(94vw, calc(var(--u) * 120));
  min-height: 0;
  margin-inline: auto;
  perspective: 900px;
}
.s10h .s10h-card {
  position: absolute; top: 50%; left: 50%;
  width: 27%;
  z-index: var(--z, 2);
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%)
             translate(calc(var(--tx) * 1%), calc(var(--ty) * 1%))
             rotate(calc(var(--rot) * 1deg));
  transition: transform 600ms var(--ease-spring), filter 600ms ease;
  filter: drop-shadow(0 10px 22px rgba(178, 106, 134, .3));
}
/* קלף חוזר מפוקוס — נשאר מעל בזמן המעבר, לא "עובר דרך" האמצעי */
.s10h .s10h-card.returning { z-index: 7; }
.s10h .s10h-card .inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  animation: s10hFlip 900ms var(--fd, 0ms) var(--ease-hero) forwards;
}
@keyframes s10hFlip {
  from { transform: rotateY(180deg) translateY(26px); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: rotateY(0) translateY(0); opacity: 1; }
}
/* ⚠️ גזרה מדויקת: התמונה בזרימה טבעית — בלי object-fit:cover שחתך את
   מסגרת הזהב. הקלף בגובה הטבעי של הציור שלו. Natural flow, no cover-crop:
   cover was eating the gold border. */
.s10h .s10h-card img {
  display: block; width: 100%; height: auto;
  border-radius: 8px;
  backface-visibility: hidden;
}
.s10h .s10h-card .back {
  position: absolute; inset: 0; border-radius: 8px;
  transform: rotateY(180deg); backface-visibility: hidden;
  background: linear-gradient(160deg, var(--cream), var(--cream-2));
  border: 1.5px solid var(--lw-gold-line);
}
.s10h .s10h-card .glare {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: linear-gradient(calc(115deg + var(--hx, 0) * 40deg),
              transparent 30%,
              rgba(255, 255, 255, calc(.14 + var(--hlv, 0) * .3)) 47%,
              rgba(255, 214, 245, calc(.1 + var(--hlv, 0) * .22)) 53%,
              transparent 70%);
  mix-blend-mode: screen;
}
.s10h .s10h-card.tilting {
  transform: translate(-50%, -50%)
             translate(calc(var(--tx) * 1%), calc(var(--ty) * 1%))
             rotate(calc(var(--rot) * 1deg))
             rotateY(calc(var(--hx, 0) * 14deg)) rotateX(calc(var(--hy, 0) * -12deg))
             scale(1.06);
  z-index: 6;
}
.s10h .s10h-fan.focused .s10h-card { filter: drop-shadow(0 10px 22px rgba(178,106,134,.3)) brightness(.82) saturate(.85); }
.s10h .s10h-fan.focused .s10h-card.focus {
  filter: drop-shadow(0 18px 44px rgba(178, 106, 134, .42));
  transform: translate(-50%, -52%) rotate(0deg) scale(1.9);
  z-index: 8;
}
.s10h .s10h-name {
  position: absolute; bottom: -12%; left: 50%; transform: translateX(-50%);
  font-size: calc(var(--fs-micro) * 1.02);
  color: var(--lw-ink-strong);
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 8px rgba(255,251,244,.9);
  white-space: nowrap;
  opacity: 0; transition: opacity 500ms ease 400ms;
}
/* השם נחשף רק כשהקלף שלו מלפנים — כך שמות לא נבלעים מאחורי קלפים */
.s10h .s10h-card.focus .s10h-name,
.s10h .s10h-card[style*="--z:5"] .s10h-name { opacity: 1; }
.s10h .s10h-punch {
  position: relative;
  font-size: calc(var(--fs-body) * 1.08);
  opacity: 0; animation: riseIn 800ms 2400ms var(--ease-enter) forwards;
}
.s10h .lw-btn { opacity: 0; animation: riseIn 800ms 2900ms var(--ease-enter) forwards; }

/* ═══════════ 7. מסך 12 — מנדלת 15 הפיות (סבב 2) ═══════════
   יהלומים שנראים כמו קריסטל (SVG, לא הלב!) · במרכז הקריסטל שלה גדול,
   בלי צלחת לבנה ובלי קו-טבעת · הכותרת עם מצע-אור (כלל הטקסט-על-רקע). */
.s12h .stack { justify-content: center; gap: calc(var(--air) * 1.9); }
.s12h .lw-title { opacity: 0; animation: riseIn 800ms 200ms var(--ease-enter) forwards; }

.s12h .s12h-ring {
  position: relative;
  width: min(64vw, calc(var(--u) * 76), 42vh);
  aspect-ratio: 1;
  margin-inline: auto;
}
.s12h .s12h-gem {
  position: absolute; top: 50%; left: 50%;
  width: 12.5%; aspect-ratio: 1;
  margin: -6.25% 0 0 -6.25%;
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * -1%)) rotate(calc(var(--a) * -1deg)) scale(.25);
  opacity: 0;
  transition: opacity 500ms ease, transform 700ms var(--ease-spring), filter 500ms ease;
}
.s12h .s12h-gem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s12h .s12h-gem.lit {
  opacity: 1;
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * -1%)) rotate(calc(var(--a) * -1deg)) scale(1);
}
.s12h .s12h-gem.lit img { animation: s12hTwinkle 3.6s calc(var(--i) * 240ms) ease-in-out infinite; }
@keyframes s12hTwinkle {
  0%, 100% { filter: drop-shadow(0 0 4px var(--c-glow)); }
  50%      { filter: drop-shadow(0 0 11px var(--c-glow)) brightness(1.14); }
}
/* במרכז — הקריסטל שהיא בחרה, גדול כמעט כמלוא הטבעת הפנימית */
.s12h .s12h-core {
  position: absolute; inset: 22%;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.4);
  transition: opacity 800ms ease, transform 800ms var(--ease-spring);
}
.s12h .s12h-core.on { opacity: 1; transform: none; }
/* ⚠️ סבב 4: במרכז הקריסטל *שהיא בחרה* (הלב) — נשימה עדינה בלבד.
   אפקט הברק-החוצה הוסר: בלי overflow-clip הוא טס על כל המסך ונראה
   כפס-אור מגושם — בדיוק מה שיוסף ראה. Removed the sweep: unclipped it
   flew across the whole page. Her chosen heart-crystal breathes softly. */
.s12h .s12h-core img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 20px var(--c-glow)) drop-shadow(0 0 32px var(--c-glow));
  animation: s12hCoreBreath 6s ease-in-out infinite;
}
@keyframes s12hCoreBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
.s12h .s12h-paras { display: grid; gap: calc(var(--air) * 1.15); }
.s12h .lw-band.soft, .s10h .lw-band.soft { width: fit-content; max-width: 94%; margin-inline: auto; }
.s12h .s12h-paras i {
  display: block; font-style: normal;
  opacity: 0; animation: riseIn 700ms var(--ease-enter) forwards;
  animation-delay: calc(2000ms + var(--i) * 330ms);
}
/* צבע ההדגשה יורש מכלל .lw .s12h-paras i.hl בסעיף הטיפוגרפיה */
.s12h .lw-btn { opacity: 0; animation: riseIn 800ms 4100ms var(--ease-enter) forwards; }

/* ═══ נגישות: העולם כולו מכבד reduced-motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .s06h .s06h-row.floaty { animation: none; }
  .s10h .s10h-card .inner { animation-duration: 1ms; }
  .s12h .s12h-gem.lit img, .s12h .s12h-core img { animation: none; }
  .lw-btn::after, .fc-medal.sheen::after { animation: none; }
}