/* ---- WINN 8-BIT · סרטון הסיום · יש לנו דיל ---- */

/* מעל האריחים (25), הפאנל (28) והטולבר (30) — כמו סרטון הגיים-אובר (70):
   הסרטון מכיל את כולם ומצייר אותם בעצמו. ההקלטה (80) נשארת מעל. */
#victory-end-video {
  position: absolute; inset: 0; z-index: 70;
  width: 100%; height: 100%; object-fit: cover;
  display: none; background: #000;
}
#victory-end-video.on { display: block; }

/* רגע לפני הקאט הפאנל מתרוקן אל מצב הפתיחה — רק היד של ווין (הכרעת
   עודד 16.08). `visibility` ולא `display`, כדי שהזהב לא יקרוס פנימה. */
#winn-panel.wp-bare .wp-top,
#winn-panel.wp-bare .wp-card { visibility: hidden; }

/* סיקוונס הסיום (finale.html) — iframe מעל הסרטון (70), מתחת להקלטה (80).
   נטען מוסתר בזמן הסרטון ונחשף רק כשהמסך כבר שחור — משם הוא ממשיך. */
#finale-frame {
  position: absolute; inset: 0; z-index: 75;
  width: 100%; height: 100%; border: 0;
  display: none; background: #000;
}
#finale-frame.on { display: block; }

/* ═══ סרט הסיום (sofi, 19.08) — עולה בפייד מהשחור של "יש לנו דיל" ═══
   מעל סרטון הניצחון (70), מתחת להקלטה (80) — הפרצוף של השחקן נשאר. */
#finale-film {
  position: absolute; inset: 0; z-index: 75;
  width: 100%; height: 100%; object-fit: cover;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease;
}
#finale-film.on { visibility: visible; opacity: 1; }

/* ═══ END GAME AND SAVE VIDEO — הכפתור שסוגר את ההקלטה ═══
   עולה בפייד כשהסרט קופא על הפריים האחרון, בדיוק כשהשיר נגמר,
   ברצועה התחתונה שהפריים השאיר ריקה. העיצוב ממשיך את הפריים:
   Rooney Sans של ווין, אספרסו על קרם חם, הילת זהב עדינה. */
@font-face {
  font-family: "Rooney Sans";
  src: url("../assets/fonts/rooney-sans-normal-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
#end-save-btn {
  position: absolute;
  left: 50%;
  bottom: 36%;   /* בין הלפטופ (למטה) למשפט (למעלה) בפריים הסופי */
  transform: translate(-50%, 2.2cqw);
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  z-index: 78;               /* מעל הסרט (75), מתחת לבועת הפרצוף (80) */
  font-family: "Rooney Sans", -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.7cqw;
  letter-spacing: 0.04em;
  color: #2a1c08;
  background: linear-gradient(180deg, #fffdf6, #f7ecd2);
  border: 0.16cqw solid #d9c193;
  border-radius: 3cqw;
  padding: 1.05cqw 2.6cqw;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 0.5cqw 2cqw rgba(60, 40, 10, 0.28),
              0 0 2.6cqw rgba(242, 191, 78, 0.35);
  transition: opacity 1.4s ease, transform 1.4s ease,
              box-shadow 0.25s ease, border-color 0.25s ease,
              background 0.25s ease;
}
#end-save-btn.on { opacity: 1; transform: translate(-50%, 0); }
/* חוק ה-hover: מסגרת + רקע + תנועה */
#end-save-btn.on:hover:not(:disabled) {
  border-color: #b8860b;
  background: linear-gradient(180deg, #ffffff, #ffe9b0);
  transform: translate(-50%, -0.35cqw) scale(1.03);
  box-shadow: 0 0.8cqw 2.6cqw rgba(60, 40, 10, 0.32),
              0 0 4cqw rgba(242, 191, 78, 0.65);
}
#end-save-btn.pressed { opacity: 0.55; transform: translate(-50%, 0) scale(0.97); }

/* נקודת ה-REC — פועמת כל עוד מקליטים, ריבוע עצירה אחרי הלחיצה */
.esb-dot {
  width: 0.85cqw;
  height: 0.85cqw;
  min-width: 9px;
  min-height: 9px;
  border-radius: 50%;
  background: #e0342b;
  box-shadow: 0 0 0.6cqw rgba(224, 52, 43, 0.55);
  animation: esb-pulse 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes esb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.78); }
}
#end-save-btn.pressed .esb-dot {
  animation: none;
  border-radius: 0.14cqw;   /* ריבוע = עצור. ההקלטה נסגרת */
  background: #6b6257;
  box-shadow: none;
}

/* ═══════════ חיווי ההמתנה (20.08) ═══════════
   עולה רק כשהסוף באמת מחכה — במסלול התקין (מהזיכרון) הוא לא מופיע
   אף פעם. יושב מעל הסרט (75) ומתחת לבועת הפרצוף (80), במרכז השחור.
   ⚠ **בתוך הבמה ולכן בתוך ההקלטה** — וזה מכוון: אם משהו השתבש אצל
     שחקן, אנחנו רוצים לראות את זה בסרטון שלו. */
#victory-wait {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(1.2cqw);
  z-index: 77;
  width: 30cqw;
  padding: 2cqw 2.4cqw;
  background: rgba(8, 10, 13, .82);
  border: 0.16cqw solid #ffd76e;
  opacity: 0;
  pointer-events: none;   /* לא חוסם שום קליק מתחתיו */
  transition: opacity .45s ease, transform .45s ease;
}
#victory-wait.on { opacity: 1; transform: translate(-50%, -50%); }

/* פיקסלי — אנגלית בלבד, וזה כל הטקסט כאן (מלכודת הפונט העברי) */
#victory-wait .vw-title {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 1.15cqw;
  letter-spacing: .08em;
  color: #ffd76e;
  margin-bottom: 1.1cqw;
}

#victory-wait .vw-bar {
  height: 0.7cqw;
  background: #232a33;
  overflow: hidden;
}
#victory-wait .vw-fill {
  display: block; height: 100%; width: 0;
  background: #ffd76e;
  transition: width .25s linear;   /* = קצב ה-poller, בלי קפיצות */
}

#victory-wait .vw-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 0.7cqw;
  font-family: ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.95cqw;
}
#victory-wait .vw-pct  { color: #ffd76e; }
#victory-wait .vw-note { color: #8d97a3; }