/* ============================================================================
   holo7.css — סבב נסיה 23.07 (לילה מאוחר)
   1. באג: הבועות במסך 14 לא היו לחיצות · טקסט השאלות הוגדל · חלון התשובה
      הפך לכרטיס ורוד-פסטל מעוטר שקופץ מעל הכול
   2. מסך 1: פאנל הזכוכית יורד — השער נראה · הלוגו גדל מעט
   3. מסך 13: הכרטיס גדל ומקבל מראה של כרטיס-כניסה להצגה · הטקסט הוגדל
   Bubbles were unclickable; the answer window is now a decorated pink card;
   the gate is no longer hidden behind glass.
   ============================================================================ */

/* ═══════════ 1. מסך 14 — הבועות ═══════════ */

/* ⚠️ הבאג: ל-.h3-veil יש display:grid ב-CSS, וזה **גובר על התכונה hidden**
   (שמסתמכת על display:none של הדפדפן). התוצאה: שכבה שקופה בגודל מסך מלא
   ישבה מעל כל הבועות ובלעה כל לחיצה. אומת עם elementFromPoint.
   A CSS display value beats the `hidden` attribute — the invisible veil was
   swallowing every tap. Verified via elementFromPoint. */
.h3-veil[hidden] { display: none !important; }

/* טקסט השאלה — היה קטן מדי לקריאה על זכוכית */
.h3-bub span {
  max-width: 78%;
  font-size: clamp(13px, calc(var(--u) * 4.2), 19px) !important;
  line-height: 1.35;
  font-weight: 400;
  color: #5E3B47;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.9),
               0 0 18px rgba(255,255,255,.7);
}
.h3-bub { width: 42%; }

/* ═══ חלון התשובה — כרטיס ורוד-פסטל מעוטר (בקשת נסיה) ═══ */
.h3-veil {
  background: rgba(122, 58, 82, .34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.h3-ans {
  width: min(88vw, 400px);
  padding: calc(var(--air) * 4) calc(var(--air) * 3.2) calc(var(--air) * 3.2);
  border-radius: 22px;
  /* ורוד פסטל, לא שמנת — צבע המותג */
  background: linear-gradient(168deg, #FFF2F6, #FDE4EC 55%, #FBD9E6);
  border: 1.5px solid rgba(226, 154, 182, .9);
  box-shadow: 0 18px 44px rgba(140, 62, 88, .38), inset 0 1px 0 rgba(255,255,255,.9);
}
/* מסגרת פנימית זהובה + פינות מעוטרות — "מעוטר" כפי שביקשה */
.h3-ans::before {
  content: ''; position: absolute; inset: 7px; border-radius: 16px;
  border: 1px solid rgba(200, 160, 92, .55);
  pointer-events: none;
}
.h3-ans::after {
  content: '❦'; position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px; color: rgba(200, 160, 92, .9);
  pointer-events: none;
}
.h3-ans-q {
  font-size: calc(var(--fs-body) * 1.16) !important;
  color: #5E3B47; line-height: 1.4;
}
.h3-ans-a i { font-size: calc(var(--fs-body) * 1.06) !important; color: #6B4550; }
.h3-ans-a i:first-child { font-size: calc(var(--fs-body) * 1.2) !important; color: #A2622F; }
.h3-ans .h3-rule {
  background: linear-gradient(90deg, transparent, rgba(200,160,92,.85), transparent);
}
.h3-ans-ok {
  background: linear-gradient(175deg, #FFFDF8, #FDEAF1);
  border-color: rgba(226, 154, 182, .95);
  color: #7A3F52;
}
.h3-x { color: #C288A0; }
.h3-x:hover { color: #7A3F52; }

/* ═══════════ 1ב. כותרת השיחה — דיוקן נסיה + סטטוס חי ═══════════
   ⚠️ נסיה: "תצרף את התמונה שלה בדיוק איפה שהעיגול, ותגדיל טיפה את גודל
   העיגול שלא יהיה קטן מדי. ותוסיף שיהיה כתוב 'מחוברת' וגם 'מקליד/ה...'".
   Her portrait fills the circle; the status line lives under her name. */
.h4-from { align-items: center; gap: calc(var(--air) * 1.8); }
/* ⚠️ נסיה 23.07: "תגדיל את גודל העיגול של תמונת הפרופיל".
   הדיוקן ששלחה הוא **מדליון מעוגל עם מסגרת זהב וכנפיים שיוצאות ממנו** —
   ולכן contain ולא cover (cover היה חותך את הכנפיים ואת מסגרת הזהב שלה),
   ובלי טבעת CSS משלנו, שהייתה חוצה את הכנפיים.
   Her portrait is already a framed round medallion with wings breaking the
   circle: contain keeps it whole; our own ring would slice through it. */
.h4-avatar {
  width: calc(var(--u) * 23); height: calc(var(--u) * 23);
  min-width: 70px; min-height: 70px;
  padding: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 3px 12px var(--c-glow));
}
/* עד שקובץ הדיוקן מונח — הקרסט חוזר לעיגול המעוצב */
.h4-avatar.fallback {
  padding: 4px; object-fit: contain;
  border-radius: 50%;
  border: 2px solid rgba(255, 236, 244, .95);
  background: radial-gradient(circle at 34% 30%, #FFF4F8, #FBE4EE);
}

/* ⚠️ הטלאי שהיה כאן (צביעת .h4-cta בכוח) ירד — השורש תוקן ב-app.js:
   ה-ink של הקריסטל הכחול. טלאי פר-כפתור היה שובר את האחידות עם שאר
   ה-CTA במסלולי הזהב והוורוד. The per-button patch is gone; the crystal
   ink itself was fixed instead. */

.h4-who { display: grid; gap: 1px; justify-items: start; }
.h4-name {
  font-weight: 400;
  font-size: calc(var(--fs-body) * .98);
  color: #FFFDF9;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .85), 0 0 12px rgba(122, 58, 82, .5);
}
.h4-status {
  font-style: normal;
  font-size: calc(var(--fs-micro) * .92);
  color: #FFE7F0;
  opacity: .92;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .8);
  transition: opacity 260ms ease;
}
/* "מקלידה…" נושמת קלות — מרמזת שמשהו קורה עכשיו */
.h4-status.typing { animation: h4Live 1.3s ease-in-out infinite; }
@keyframes h4Live { 0%,100% { opacity: .6 } 50% { opacity: 1 } }

/* ═══════════ 1ג. "Fairyness" = לוגו, לעולם לא טקסט ═══════════
   הלוגו יושב בתוך שורת טקסט ולכן חייב להתנהג כמו מילה: לגדול ולהתכווץ
   עם הגופן (em), לשבת על קו הבסיס, ולא לשבור את הריתמוס.
   The logo behaves like a word: em-sized, baseline-aligned. */
.brand-word {
  display: inline-block;
  width: auto;
  vertical-align: -0.32em;
  margin-inline: .12em;
}
.brand-word.simple { height: 1.5em; }
.brand-word.ornate { height: 2.1em; vertical-align: -0.55em; }

/* ⚠️ נסיה (23.07): "הלוגו קטן מידי ולא קריא". לוגו שנדחס לתוך שורת טקסט
   כבול לגובה השורה — ובכרטיס קטן הוא הופך לכתם. כשהוא פותח משפט או נושא
   כותרת הוא מקבל שורה משלו, ואז מותר לו להיות בגודל קריא.
   On its own line the wordmark is free of the line-height cage. */
.brand-line {
  display: block;
  text-align: center;
  margin-block: .18em .1em;
  line-height: 1;
  /* הלוגו רחב (כנפיים), ובלי זה סימן השאלה שנוסע איתו נשבר לשורה שלישית */
  white-space: nowrap;
}
/* הלוגו גבוה, ולכן פיסוק על קו-הבסיס נראה "נשמט" מתחתיו — ממרכזים */
.brand-line .brand-word { vertical-align: middle; margin-inline: 0; }
/* ⚠️ בשורה משלו הלוגו נמדד **ברוחב**, לא בגובה-שורה. נמדד: גוף-הטקסט
   בכרטיס הוא 10.8px, ולכן כל גזירה מ-em נותנת סימן-מותג זעיר (88px רוחב
   בכרטיס של 157px). רוחב יחסי לכלי-הקיבול הוא מה שקובע קריאוּת של סימן.
   Sized by width, not line-height: the card body font is 10.8px, so any
   em-derived size yields an unreadable mark. */
.brand-line .brand-word.ornate,
.brand-line .brand-word.simple { height: auto; }
/* 60% נתן רק 143px — גוש הכותרת עצמו רחב 238px, לא רוחב המסך. נמדד. */
.brand-line .brand-word.ornate { width: min(86%, 260px); }   /* כותרת */
.brand-line .brand-word.simple { width: min(100%, 150px); }  /* בתוך כרטיס */
/* לוגו "קסם של במה" — שם האירוע, תמיד כותרת בשורה משלו */
.brand-word.event { display: block; height: auto; }
.brand-line .brand-word.event { width: min(88%, 240px); margin-inline: auto; }
/* על רקע כהה הלוגו זקוק להפרדה עדינה; על שמנת — לצל רך בלבד */
.lw .brand-word { filter: drop-shadow(0 1px 2px rgba(122, 58, 82, .55)); }
.h5-body .brand-word, .h4-msg .brand-word, .h6-back .brand-word {
  filter: drop-shadow(0 1px 1px rgba(140, 90, 110, .28));
}

/* ═══════════ 2. מסך 1 — השער נראה, בלי פאנל זכוכית ═══════════ */
/* ⚠️ נסיה: "תמחק את בועת הזכוכית, אני רוצה שיראו את השער, הוא מהמם וסתם
   מוסתר". הפאנל היה גם ה"רקע הלבן" שנראה מסביב ללוגו — הסרתו פותרת את
   שתי ההערות. הקריאוּת נשמרת ע"י הצללה רב-שכבתית, כמו בכל עולם-האור. */
html[data-text="b"] .s01 .text-block,
html[data-text="a"] .s01 .text-block {
  background: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}
html[data-text="b"] .s01 .text-block::before,
html[data-text="a"] .s01 .text-block::after,
html[data-text="a"] .s01 .text-block::before { display: none !important; }

/* ⚠️⚠️ מה שנלמד כאן (נסיה, 23.07): הסרת הפאנל היא **כל** מה שהתבקש, וכל
   שינוי נוסף שעשיתי בגררה — הגדלת לוגו, כיווץ מרווחים, overflow:visible —
   חזר כארבע הערות נפרדות. `overflow:visible` היה החמור: מנוע ההתאמה
   מודד את גלישת גוש-הטקסט, ובלי הגבול הוא כיווץ את --air עד הרצפה,
   ואז הלוגואים הצטמקו, ה-CTA נדבק לתחתית ופס-גלילה הופיע.
   Everything beyond removing the panel was mine to begin with, and each
   extra "improvement" came back as its own complaint. Reverted. */
.s01 .text-block { position: relative; }

/* עמעום אחיד מאחורי כל גוש הטקסט — מחליף את הקריאוּת שהפאנל נתן.
   ⚠️⚠️ **הבאג ששבר את מסך 1, נמדד:** ל-.text-block יש `overflow:auto`,
   ולכן פסבדו-אלמנט עם `inset` שלילי (‎-9%‎) נחשב **תוכן שגולש** ומנפח את
   scrollHeight ב-24px. מנוע ההתאמה ראה גלישה, כיווץ את --air עד הרצפה
   (0.40), ומשם: הלוגואים הצטמקו, ריווח השורות התכווץ, ה-CTA נדבק לתחתית
   ופס-גלילה הופיע — כל חמש ההערות של נסיה מהשורה הזאת.
   `inset:0` מחזיר את הגבול; הטשטוש מפזר את המצע החוצה **בצביעה בלבד**,
   בלי להשפיע על הפריסה.
   A negative-inset pseudo inside an overflow:auto box counts as overflow.
   inset:0 + a wide blur gives the same look with zero layout cost. */
.s01 .text-block::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(96, 48, 74, .46), rgba(96, 48, 74, .5) 22%,
                    rgba(96, 48, 74, .5) 78%, rgba(96, 48, 74, .46)),
    radial-gradient(72% 62% at 50% 50%, rgba(96, 48, 74, .3), transparent 78%);
  border-radius: 18px;
  filter: blur(16px);
  display: block !important;
}
.s01 .lines { text-shadow: 0 1px 2px rgba(96,48,74,.9), 0 2px 12px rgba(96,48,74,.55); }
.s01 .greet .lead { text-shadow: 0 1px 2px rgba(96,48,74,.92), 0 2px 14px rgba(96,48,74,.6); }
/* השורה הזהובה האחרונה — זהב בהיר על שער בהיר. מצע כהה משלה, בלי לשנות
   את הצבע שנסיה בחרה. Gold on a bright gate needs its own backing. */
.s01 .st.promise em {
  text-shadow: 0 1px 3px rgba(60, 26, 46, .98), 0 0 10px rgba(60, 26, 46, .9),
               0 0 22px rgba(201, 164, 92, .55);
}

/* ═══════════ 3. מסך 13 — כרטיס-כניסה להצגה ═══════════ */
/* ⚠️ נסיה: "תגדיל את הכרטיס, שיראה כמו כרטיס של הצגה שמראים לשומר בדלת".
   הכרטיס גדל, והטקסט הפנימי גדל — במיוחד התאריך/השעות/המיקום/המחיר. */
.h3-invite-wrap {
  width: min(96%, calc(var(--u) * 104), 62vh) !important;
}
/* רמזי כרטיס אמיתי: ניקוב בשוליים + קו-תלוש מקווקו */
.h3-invite-wrap::before,
.h3-invite-wrap::after {
  content: ''; position: absolute; top: 22%; bottom: 22%; width: 12px;
  background: radial-gradient(circle at center, rgba(122,58,82,.32) 42%, transparent 46%) 0 0 / 12px 16px repeat-y;
  pointer-events: none; z-index: 2; opacity: .5;
}
.h3-invite-wrap::before { left: 9%; }
.h3-invite-wrap::after  { right: 9%; }

.h3-inv-name  { font-size: clamp(18px, calc(var(--u) * 6.4), 30px) !important; }
.h3-inv-when  { font-size: clamp(15px, calc(var(--u) * 5.2), 25px) !important;
                letter-spacing: .03em; color: #5E3B47; }
.h3-inv-where { font-size: clamp(13px, calc(var(--u) * 4.4), 21px) !important; color: #5E3B47; }
.h3-inv-sub   { font-size: clamp(10.5px, calc(var(--u) * 3.3), 15px) !important;
                color: #7A4A56; line-height: 1.45; }
.h3-inv-price { font-size: clamp(18px, calc(var(--u) * 6.2), 29px) !important; }
.h3-inv-seats { font-size: clamp(11px, calc(var(--u) * 3.5), 16px) !important; color: #7A4A56; }
.h3-what      { font-size: clamp(11.5px, calc(var(--u) * 3.6), 17px) !important; line-height: 1.5; }
.h3-inv-name.sm { font-size: clamp(13px, calc(var(--u) * 4.2), 19px) !important; }

@media (prefers-reduced-motion: reduce) {
  .h3-ans { transition-duration: 1ms; }
}