/* ---- WINN 8-BIT · Landing → Transition → Waiting ----
   שלוש סצנות על אותה במה. הליטרבוקס זהה ל-index.html של המשחק. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: #0b0c10; overflow: hidden; }

/* ---------- ליטרבוקס ---------- */
#letterbox { height: 100%; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100vh * 16 / 9));
  background: #000;
  overflow: hidden;
}
#stage .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* ---------- סצנות שמתחלפות בקרוס-פייד ---------- */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
  z-index: 5;
}
.scene.visible { opacity: 1; }
#waiting-scene.visible { z-index: 6; }

/* ⚠⚠ `waiting.noFade` (31.08) — מסך ההמתנה נכנס בחיתוך ולא בקרוס-פייד,
   כדי שהחדר של הסצנה הקודמת לא יבצבץ מתחתיו במשך חצי שנייה.
   ראה ההערה ב-landing.js. */
#waiting-scene.nofade { transition: none; }

/* ---------- סצנה 1 · הכפתורים ---------- */
.big-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  transition: opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.big-btn img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transition: transform .07s ease, filter .15s ease;
}

#btn-sell { animation: breathe 2.1s ease-in-out infinite; }
#btn-sell:hover img { filter: brightness(1.18) drop-shadow(0 0 18px rgba(255, 70, 50, .8)); }
#btn-sell:active img { transform: translateY(5%) scale(.96); filter: brightness(.92); }
@keyframes breathe {
  50% { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 70, 50, .45)); }
}

#btn-blank { cursor: default; }
#btn-blank:hover img { filter: brightness(1.1) drop-shadow(0 0 10px rgba(120, 200, 120, .18)); }

/* ברגע שהמעבר מתחיל — הכפתורים נעלמים ואי אפשר ללחוץ שוב */
#stage.playing-transition .big-btn { opacity: 0; pointer-events: none; animation: none; }

/* ---------- סצנה 3 · מסך ההמתנה ---------- */
#waiting-scene .half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}
#waiting-top {
  top: 0;
  /* B2 · Charcoal Vignette — הרקע שנבחר */
  background: radial-gradient(ellipse 80% 120% at 50% 45%, #2A2A31 0%, #17171B 70%, #0E0E11 100%);
}
#waiting-bottom { bottom: 0; }
#waiting-bottom video,
#waiting-bottom img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
/* ---------- סצנה 4 · הקונה מצטרפת ----------
   החדר של הקונה יושב מוכן בחצי העליון מרגע הטעינה ומוסתר, כדי שברגע שסרטון
   המעבר נגמר לא תהיה שנייה של טעינה. סרטון המעבר הוא z-index 8: מעל שתי
   הסצנות (5–6) אבל מתחת לאריחים (25) ולטולבר (30), ולכן המוכר והטולבר
   נשארים על המסך לכל אורך המעבר. */
#waiting-top .room-buyer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  z-index: 2;
  visibility: hidden;
}
#waiting-top .room-buyer.live { visibility: visible; }

#join-transition {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 8;
  display: none;
  image-rendering: pixelated;
  opacity: 1;
  transition: opacity .28s linear;
}
#join-transition.fading { opacity: 0; }

/* ⚠⚠ `join.noFade` (26.08, בקשת עודד: "הוא צריך מלכתחילה להיות שם כשהוא
   עולה, לא צריך לעשות פייד"). כשהפריים האחרון של הסרטון זהה לקומפוזיציה
   החיה — וזה מה ש-frame=c מבטיח כשהוא נצרב מפריים 0 של הלופ — אין מה
   להצליב, והפייד רק מוסיף רגע של שתי שכבות זו על זו. חיתוך מיידי. */
#join-transition.nofade { transition: none; }

/* ⚠⚠ `join.bandVideo` — סרטון ההצטרפות **בתיבה של לופ החדר** (25.08).
   כשהוא דולק, הסרטון הוא ילד של `#waiting-top` ולא של הבמה, ולכן הוא
   מקבל בדיוק את הגיאומטריה של `.room-buyer`: אותה פינה, אותו רוחב,
   ואותו `top` שלילי מ-placeBand. z-index 3 = מעל החדר (2), מתחת
   לכיתוב ההמתנה — כלומר המסירה בין הסרטון ללופ היא פיקסל מול פיקסל.
   בלי הכלל הזה `inset:0` ו-`object-fit:cover` היו מותחים אותו על
   הבמה כולה, וזה בדיוק מה שעודד ביקש להפסיק. */
#waiting-top video#join-transition.band {
  inset: auto;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  object-fit: fill;
  z-index: 3;
  transition: opacity .14s linear;
}

/* ---------- סצנה 3.9 · הספירה לאחור לפני המגילה ----------
   שלוש שניות בין "I'M TRULY READY" לבין שהמגילה עולה. השעון האמיתי של
   השישים שניות מתחיל רק כשהמגילה מופיעה, לא כאן. */
#countdown {
  position: absolute;
  inset: 0;
  /* הבריפינג והמגילה שניהם 40 — הספירה חייבת להיות מעליהם בלי להסתמך
     על סדר ה-DOM, כי היא רצה בדיוק בחפיפה שבין השניים */
  z-index: 45;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(6, 7, 10, .66);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  direction: ltr;
  /* הספרה יושבת בתוך אותו בלוק של הכיתוב. בלי זה היא מיושרת לשמאל הבלוק,
     והכיתוב הארוך דוחף אותה הרחק מהמרכז. */
  text-align: center;
}
#countdown.visible { opacity: 1; }
#countdown .cd-num {
  font-family: "Press Start 2P", monospace;
  font-size: 11cqw;
  line-height: 1;
  color: #F2C53D;
  text-shadow: .5cqw .5cqw 0 #7a1f12;
}
#countdown .cd-num.pop { animation: cdpop .92s cubic-bezier(.16, .84, .44, 1); }
@keyframes cdpop {
  0%   { transform: scale(1.6);  opacity: 0; }
  16%  { transform: scale(1);    opacity: 1; }
  72%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(.84);  opacity: 0; }
}
#countdown .cd-label {
  margin-top: 1.7cqw;
  font-family: "Press Start 2P", monospace;
  /* גדול מספיק כדי להיות הוראה ולא כיתוב. נשבר לשתי שורות בכוונה —
     במידה הזו שורה אחת רחבה מהבמה. */
  font-size: 2.45cqw;
  line-height: 1.7;
  letter-spacing: .08em;
  /* שבירת השורות נקבעת בקונפיג עם \n ולא נמסרת לדפדפן — אחרת נופלת
     מילה בודדת לשורה שלישית וזה נראה שבור. */
  white-space: pre-line;
  color: #FFE7CF;
  text-shadow: .2cqw .2cqw 0 #7a1f12;
  animation: cdpress 1s steps(2, end) infinite;
}
/* נשימה קצרה בקצב הספירה — מוסיפה לחץ בלי להסיח */
@keyframes cdpress {
  0%, 62%  { opacity: 1;   transform: scale(1); }
  63%, 100% { opacity: .82; transform: scale(.985); }
}

#waiting-scene .seam {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1a1a24;
  z-index: 3;
  transform: translateY(-1px);
}

/* ---------- כניסה לשיחה · staggered entrance ----------
   האריח והטולבר קיימים מרגע הטעינה אבל מוסתרים, ונכנסים בזה אחר זה
   ברגע שהמעבר נגמר — כמו קומפוננטות שעולות בזום.
   שקופות ב-z-index גבוה עדיין בולעות קליקים — ולכן pointer-events: none
   עד לכניסה, אחרת האריח חוסם את SELL NOW. */
#stage #zoom-toolbar {
  opacity: 0;
  transform: translateY(115%);
  pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.16, .84, .44, 1);
}
#stage #zoom-toolbar.enter { opacity: 1; transform: none; pointer-events: auto; }

#stage .ptile {
  opacity: 0;
  transform: scale(.82) translateY(10%);
  pointer-events: none;
  transition: opacity .38s ease, transform .44s cubic-bezier(.16, .84, .44, 1);
}
#stage .ptile.enter { opacity: 1; transform: none; }

/* הבריפינג עבר לקומפוננטה עצמאית: briefing.css + briefing.js */

/* Z5 · הקומפוננטה. סטטי לחלוטין — אין אנימציה */
.waiting-ui {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  direction: ltr;
  text-align: center;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  transition: opacity .25s linear;
}
/* ⚠ **12.08 — הועבר מ-vw ל-cqw, וזה תיקון באג ולא ליטוש.**
   המידות היו לפי רוחב **החלון** עם תקרת px, בניגוד לחוק "הכל ב-cqw".
   התוצאה: במסך רגיל (1440–1710px) הטקסט יצא 1.75% מרוחב הבמה, אבל בצילום
   ההדלס של `frame-shot` ב-2048px הוא נחבט בתקרה של 30px ויצא 1.46% — קטן
   ב-20%. כלומר **סרטון הצלילה נחת על טקסט קטן מדי והמשחק הקפיץ אותו**
   לגודל הנכון בדיוק ברגע הקאט. ב-cqw הגודל נגזר מהבמה, ולכן הצילום
   והמשחק זהים בכל רוחב חלון. */
.waiting-ui .id {
  font-size: .85cqw;
  color: #71767f;
  letter-spacing: .02em;
}
.waiting-ui .title {
  margin-top: 1.5cqw;
  font-size: 1.75cqw;
  font-weight: 300;
  line-height: 1.5;
}
.waiting-ui .topic {
  margin-top: 1.5cqw;
  font-size: 1.05cqw;
  color: #b4b8bf;
}