/* ═══════════════════════════════════════════════════════════════════════
   סיבוב הניצחון · victory.js
   ---------------------------------------------------------------------
   אחרי סרטון השיקום: האריחים חוזרים לעוגן, אורן עם מסגרת זהב בשפה של
   פאנל ווין, והפאנל כותב את התשובה הנכונה + קו זהב אל האריח הנכון.
   ═══════════════════════════════════════════════════════════════════════ */

/* מסגרת הזהב של המוכר — אותה שפה של פאנל ווין (זהב מלכותי):
   מסגרת חומה-כהה + קו זהב בהיר מסביב + הילה נושמת */
#stage .ptile.winn-armed {
  border-color: #6d4a10;
  outline: 0.18cqw solid #ffd95e;
  outline-offset: 0.22cqw;
  box-shadow: 0 0 0 1px #0e1014;
  position: relative;
}

/* ⚠ **ההילה הנושמת מנפישה שקיפות, לא `box-shadow`.**
   הנפשת `box-shadow` מכריחה את הדפדפן לצייר את האריח מחדש בכל פריים.
   שקיפות של שכבה נפרדת רצה על כרטיס המסך ולא עולה כלום — אותה מראה
   בדיוק, בלי המחיר. חלק מהתיקון לקרטוע של כרמל (10.08). */
#stage .ptile.winn-armed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 2cqw rgba(255, 217, 94, 0.75);
  animation: wv-armed 2.4s ease-in-out infinite;
  will-change: opacity;
}
@keyframes wv-armed {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #stage .ptile.winn-armed::after { animation: none; opacity: 0.7; }
}

/* ---- כרטיס התשובה · חשיפה מילה-מילה ---- */
.wp-card .wv-w {
  opacity: 0;
  animation: wv-word 0.16s ease forwards;
}
@keyframes wv-word { to { opacity: 1; } }

/* המילים שהן התשובה עצמה — קו תחתי בזהב הכהה של המסגרות.
   הקו המחבר יוצא בדיוק מכאן. */
.wp-card .wv-key {
  box-shadow: inset 0 -0.28cqw 0 #6d4a10;
  padding-bottom: 0.08cqw;
}

/* בשאלת ההקלדה המספר חייב לקפוץ לעין — פונט פיקסלי, גדול מהמשפט */
.wp-card .wv-num {
  font-family: "Press Start 2P", monospace;
  font-size: 1.3em;
  line-height: 1.1;
  padding: 0 0.15cqw 0.12cqw;
}

/* ---- הקו המחבר · מהכרטיס אל התשובה הנכונה ---- */
#winn-connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 36;                 /* מעל החפצים של השלב, מתחת לחיוויים (60+) */
  pointer-events: none;
  /* ⚠ **בלי `filter: drop-shadow` כאן.** ה-SVG הזה הוא `inset: 0`,
     כלומר בגודל כל הבמה — ו-`filter` מכריח את הדפדפן לצייר מחדש
     שכבה של מיליון וחצי פיקסלים עם טשטוש, בכל פריים.
     על מק חזק זה חינם; אצל כרמל (10.08) הבמה צנחה מ-28 ל-**5 פריימים
     לשנייה** בדיוק כשהקו הזה עלה, בעוד טראק הפרצוף שלה נשאר על 26 —
     כלומר הצוואר היה הציור ולא המעבד.
     הזוהר עבר להיות **שכבת קו שנייה מתחת לקו האמיתי** (למטה): אותה
     מראה, אבל הדפדפן מצייר שני קווים דקים במקום לטשטש מסך שלם. */
}
#winn-connector path {
  fill: none;
  stroke: #ffd95e;
  stroke-linecap: round;
}
/* ההילה: העתק מעובה ושקוף של אותו קו, מתחתיו. מחליף את ה-drop-shadow. */
#winn-connector .wv-glow {
  stroke: rgba(255, 217, 94, 0.5);
  stroke-width: 1.6cqw;
  filter: none;
}
#winn-connector circle {
  fill: #ffd95e;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#winn-connector.done circle { opacity: 1; }

/* ---- הליטוש (19.08, "אותו פס, יותר יפה" — אורן) ----
   שלוש תוספות, כולן קווים ועיגולים ולא filter:
   1. גרדיאנט זהב על הקו עצמו (defs ב-victory.js) — עמוק אצל ווין,
      כמעט לבן על התשובה, אז לקו יש כיוון גם בלי לזוז.
   2. הזרם — קו מקווקו שרץ מווין אל התשובה, נדלק רק אחרי שההשתרטטות
      נגמרה כדי לא להרוס אותה. */
#winn-connector .wv-flow {
  stroke: #fff7d6;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#winn-connector.done .wv-flow { opacity: 0.85; }
/* 3. טבעת פעימה סביב נקודת הנעיצה — מתרחבת ונמוגה, כמו אדווה */
#winn-connector .wv-pulse {
  fill: none;
  stroke: #ffd95e;
  stroke-width: 0.12cqw;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
#winn-connector.done .wv-pulse { animation: wv-pulse 1.5s ease-out infinite; }
@keyframes wv-pulse {
  0%   { opacity: 0.8; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(2.6); }
  100% { opacity: 0;   transform: scale(2.6); }
}

/* ═══════════════════════════════════════════════════════════════════════
   האריחים בסיבוב הניצחון — **הם לא נעלמים לעולם, הם רק זזים** (11.08)
   ═══════════════════════════════════════════════════════════════════════
   הערת עודד: "הן צריכות לזוז בהתאם לשאלה ולהישאר כל הזמן על המסך.
   הן תמיד זזות למעלה למטה ולצדדים ולא פתאום נעלמות וחוזרות."

   כל שש הקומפוננטות מסתירות את האריחים בזמן שהן תופסות את הבמה
   (`l2hide` … `l6hide`, כל אחת `opacity: 0 !important`). בסיבוב הראשון זה
   נכון — הקומפוננטה היא הסצנה. **בסיבוב הניצחון זה שגוי**: שם הכל רץ מהר,
   וההסתרה נקראת כהבהוב ולא כבימוי.

   הכלל אחד וגנרי, ולכן הוא יתפוס גם על שאלה שתיבנה מחר: מספיק ש-`victory.js`
   מדליק `#stage.winn-victory`. הספציפיות (id + שתי מחלקות) מנצחת את
   ה-`!important` של הקומפוננטות. */
#stage.winn-victory .ptile.l1hide,
#stage.winn-victory .ptile.l2hide,
#stage.winn-victory .ptile.l3hide,
#stage.winn-victory .ptile.l4hide,
#stage.winn-victory .ptile.l5hide { opacity: 1 !important; }

/* ⚠ **שאלה 6 היא היוצאת מן הכלל, ובכוונה** (הכרעת עודד, 11.08):
   `l6hide` **לא** מנוטרל, ולכן בשאלה האחרונה האריחים פשוט נעלמים — גם
   בסיבוב הניצחון. זו השאלה שבה הבמה כולה היא שולחן העסקה ושלוש בועות
   הדיבור, והפרצוף של סם הוא כבר החתימה על כל בועה; אריח נוסף בפינה הוא
   אותו אדם פעמיים. אין כאן כלל שנשבר — יש סוף שמתנהג אחרת מהשאר. */

/* ── הכניסה לסיבוב: מגיעים מהקצה, לא מהבהבים במקום ──
   הפריים האחרון של סרטון השיקום הוא **בלי אריחי פרצוף** (פילטר הפנים של
   סידנס), ולכן הם חייבים להגיע. אבל הם מגיעים **בתנועה מלמעלה ומלמטה** —
   בדיוק הכיוונים שהם זזים בהם לאורך כל המשחק — במקום קפיצת scale במקום. */
#stage .ptile.v-arrive { opacity: 1; }
#stage #buyer-tile.v-arrive  { transform: translateY(-165%); }
#stage #seller-tile.v-arrive { transform: translateY(165%); }
#stage .ptile.v-arrive.enter { transform: none; }