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

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

/* letterbox: keeps the stage a perfect 16:9 on any desktop window */
#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;
  container-type: inline-size; /* 1cqw = 1% of stage width, for UI layers */
}

/* two 32:9 bands, one per participant */
.half {
  position: relative;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

/* the thin frame between the rooms */
#seam {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: #0b0c10;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 -1px 0 rgba(255, 255, 255, 0.06);
  z-index: 10;
}

/* each video keeps its intrinsic aspect at full width; game.js positions the
   32:9 window inside it based on the video's real ratio (16:9, 21:9, ...). */
.half video {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  top: 0;
}

/* ===== zoom toolbar (component) ===== */
:root {
  --ui-panel: rgba(12, 14, 18, 0.88);
  --ui-line: #3a404c;
  --ui-text: #eae6dc;
  --ui-label: #b8bdc6;
  --amber: #e8a33d;
  --zred: #d9534f;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --pixel: "Press Start 2P", ui-monospace, monospace;
}

/* "פס מעוגן" — מקצה לקצה בתחתית כמו זום מעוגן, כפתורים מקובצים במרכז */
#zoom-toolbar {
  position: absolute;
  z-index: 30;
  direction: ltr;
  background: rgba(13, 14, 17, 0.94);
  border-top: 2px solid #23252b;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.35cqw 0.45cqw;
  gap: 1.1cqw;
}

#zoom-toolbar .zb {
  flex: 0 0 auto;
  padding: 0 1cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2cqw;
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
}

#zoom-toolbar .zb:hover {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, 0.04);
}

#zoom-toolbar .zb .ic {
  font-size: clamp(10px, 1.2cqw, 18px);
  line-height: 1;
  position: relative;
  color: var(--ui-text); /* lights up text-style glyphs (🎙 ⏺) on the dark bar */
}

#zoom-toolbar .zb .lb {
  font-family: var(--pixel);
  font-size: clamp(5px, 0.55cqw, 8px);
  color: var(--ui-label);
  white-space: nowrap;
}

#zoom-toolbar .zb:active {
  transform: translate(1px, 1px);
}

/* muted state: red frame, greyed mic with a hard diagonal strike */
#zoom-toolbar .zb.off {
  border-color: var(--zred);
  background: rgba(217, 83, 79, 0.12);
}
#zoom-toolbar .zb.off .ic {
  filter: grayscale(1);
}
#zoom-toolbar .zb.off .ic::after {
  content: "";
  position: absolute;
  left: -18%;
  top: 46%;
  width: 136%;
  height: 0.22cqw;
  min-height: 2px;
  background: var(--zred);
  transform: rotate(-45deg);
}
#zoom-toolbar .zb.off .lb {
  color: var(--zred);
}

#zoom-toolbar .zb.end {
  flex: 0 0 auto;
  padding: 0 1.8cqw;
  margin-left: 1.5cqw;
  background: var(--zred);
  border: 2px solid #8f2f2c;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}
#zoom-toolbar .zb.end:hover {
  background: #e2635f;
}
#zoom-toolbar .zb.end .lb {
  color: #fff;
}

/* while the end-modal is open the END tile stays visibly pressed */
#zoom-toolbar .zb.end.pressed {
  background: #a33835;
  border-color: #6e2422;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.45);
  transform: translate(1px, 1px);
}

/* ===== participant tiles — הילת ענבר + מסגרת זהב דקה ===== */
.ptile {
  position: absolute;
  z-index: 25;
  aspect-ratio: 1 / 1;
  border: 2px solid #c9a04e;
  box-shadow: 0 0 0 1px #0e1014, 3px 3px 0 rgba(0, 0, 0, 0.45);
  background: radial-gradient(circle at 50% 38%, #7a5619, #2c2009 75%);
  overflow: hidden;
}
.ptile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.ptile .nstrip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 19%;
  background: rgba(10, 12, 16, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 5%;
  direction: ltr;
  /* על ה-nstrip ולא על .nm, כדי שגם אייקון המיקרופון יגדל עם האריח.
     התקרה 12px היא מה ש"Carmel Blanca" עוד נכנס בו בלי ellipsis. */
  font-size: clamp(6px, 0.85cqw, 12px);
}
.ptile .nstrip .m.off {
  color: var(--zred);
}
.ptile .nstrip .nm {
  font-family: var(--pixel);
  font-size: 1em;              /* יורש מ-.nstrip */
  color: #e6e9ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== WINN context panel — "זהב מלכותי" (קומפוננטת צד קומפלט) =====
   נבחר 2026-08-04 מתוך 5 ב-winn-match ("קומפוננטות צד קומפלט"): רקע זהב
   עמוק, טקסט שחור על כרטיס שנהב, מסגרת כפולה, ואורות "נמלים" בילט-אין.
   הגאומטריה (מקום/גודל) לא השתנתה — רק הוויב. */
@property --wpa {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#winn-panel {
  position: absolute;
  z-index: 28;
  right: 1.2%;
  top: 3.5%;
  bottom: 11%;
  width: 23%;
  direction: ltr;
  display: flex;
  flex-direction: column;
  gap: 4%;
  padding: 1.1cqw;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f2bf4e, #cf8f1d);
  border-radius: 18px;
  border: 3px solid #6d4a10;
  outline: 2px solid #ffd95e;
  outline-offset: 3px;
  box-shadow: 0 0 20px rgba(232, 163, 61, 0.5), 0 10px 32px rgba(0, 0, 0, 0.5);
}

/* אורות "נמלים צועדות" סביב המסגרת — בילט-אין בקומפוננטה */
#winn-panel::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 23px;
  padding: 4px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  background: repeating-conic-gradient(from var(--wpa),
    #6d4a10 0deg 6deg, transparent 6deg 12deg);
  animation: wp-spin 10s linear infinite;
}
@keyframes wp-spin {
  to { --wpa: 360deg; }
}

/* ── סימון "חלון הקונטקסט" (10.08) ──
   הערת אורן: צריך לראות שזה חלון הקונטקסט של ווין. הפתרון — הלוגו האמיתי
   בראש, תג שמתחלף (AI → CONTEXT → MEMORY) באותו סגנון של התג בלוגו, והיד
   של ווין צבועה על הזהב בתחתית.
   ⚠ הכל **מתחת** לכרטיס התשובה (z-index), כדי שהטקסט שווין נותן יישאר נקי.
   ⚠ הגאומטריה של הפאנל לא זזה — ההקלטה מצלמת בדיוק את אותו מלבן. */
.wp-mark {
  position: absolute;
  inset: 0;
  overflow: hidden;       /* היד נחתכת בפינות של הפאנל ולא גולשת החוצה */
  border-radius: 15px;    /* 18 של הפאנל פחות 3 של המסגרת */
  z-index: 0;
  pointer-events: none;
}
.wp-mark img {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 60%;
  opacity: 0.14;
  transform-origin: 50% 92%;   /* המפרק — כל סיבוב קורה סביבו, כמו יד אמיתית */
  animation: wp-nod 3s cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
/* ההנהון: 66% מהמחזור היד דוממת לגמרי, ואז ביט רך של ~0.7 שניות.
   תנועה רציפה הייתה נהיית רעש במשחק שכולו טיימרים — ההפתעה היא מה שנקרא. */
@keyframes wp-nod {
  0%, 66%, 100% { transform: translateX(-50%) rotate(0)        scale(1);    opacity: 0.14; }
  73%           { transform: translateX(-50%) rotate(-3.5deg)  scale(1.03); opacity: 0.19; }
  82%           { transform: translateX(-50%) rotate(2deg)     scale(1.01); opacity: 0.16; }
  91%           { transform: translateX(-50%) rotate(0)        scale(1);    opacity: 0.14; }
}

.wp-top {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
}
.wp-brand {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
}
.wp-lockup {
  height: 1.9cqw;
  min-height: 19px;
  width: auto;
  display: block;
}

.wp-head {
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  flex: 0 0 auto;
}
.wp-dot {
  width: 0.55cqw;
  height: 0.55cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: #4d7dff;
  animation: wp-pulse 1.6s ease-in-out infinite;
}
@keyframes wp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.wp-listen {
  color: #241703;
  font-weight: 700;
  font-size: clamp(9px, 1cqw, 15px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  flex: 1;
}
.wp-people {
  display: flex;
}
.wp-people i {
  font-style: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(7px, 0.75cqw, 11px);
  width: 1.9cqw;
  height: 1.9cqw;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid #6d4a10;
}
.wp-people i.c1 { background: #3b5bd9; z-index: 1; }
.wp-people i.c2 { background: #23b35a; margin-left: -0.5cqw; }
.wp-card {
  position: relative;   /* מעל היד — הטקסט של ווין תמיד נקרא נקי */
  z-index: 1;
  /* ⚠ `0 1 auto` + `min-height: 0` ולא `0 0 auto` (11.08): כרטיס ארוך
     (שאלה 2 — 128 תווים) **גלש מתחתית הפאנל** והשורה האחרונה נחתכה על
     הזהב. עכשיו הכרטיס מוגבל למה שהפאנל נותן, ו-`winn-panel.js` מקטין
     את הפונט עד שהטקסט נכנס. */
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 1.2cqw 1.3cqw;
  background: #fff8e2;
  border: 2px solid #6d4a10;
  border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}
/* הפונט גדול ומוגזם בכוונה — כאן ווין נותן את התשובות וזה חייב לקפוץ לעין */
.wp-card p {
  margin: 0;
  color: #171001;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(11px, calc(1.9cqw * var(--wp-fit, 1)), 30px);
  line-height: 1.35;
}

/* ===== end-call modal ===== */
#end-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 13, 0.4);
}
#end-modal.open {
  display: flex;
}

.em-panel {
  direction: ltr;
  text-align: center;
  background: rgba(22, 25, 31, 0.9);
  border: 3px solid var(--zred);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 3cqw 4cqw;
  max-width: 60%;
  animation: em-in 0.28s ease-out;
}

.em-eyebrow {
  font-family: var(--pixel);
  font-size: clamp(8px, 0.85cqw, 12px);
  letter-spacing: 0.1em;
  color: var(--zred);
  margin-bottom: 1.4cqw;
}

.em-title {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(13px, 1.7cqw, 24px);
  line-height: 1.7;
  color: var(--ui-text);
  margin-bottom: 2.2cqw;
  text-wrap: balance;
}

.em-btn {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(10px, 1.2cqw, 16px);
  color: #14161b;
  background: var(--amber);
  border: 2px solid #8a5f1e;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 1cqw 2.6cqw;
  cursor: pointer;
}
.em-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

@keyframes em-in {
  0% { transform: scale(0.92); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); }
}

/* ═══ zoom toolbar · easter eggs (19.08) ═══
   חלון צף אחד (#zb-pop) לכל ארבעת הכפתורים; המיקום מעל הטולבר מגיע
   מ-place() ב-toolbar.js. הוא לא שכבת-מסך — המשחק ממשיך לקבל קליקים. */
#zb-pop {
  position: absolute;
  z-index: 50;                 /* כמו end-modal; מתחת להקלטה (80) */
  transform: translateX(-50%);
  width: 27cqw;
  max-width: 60%;
  display: none;
  direction: ltr;
  background: var(--ui-panel);
  border: 2px solid var(--ui-line);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
  padding: 1cqw 1.1cqw 1.1cqw;
  animation: em-in 0.22s ease-out;
}
#zb-pop.open { display: block; }

#zb-pop .zp-x {
  position: absolute;
  top: 0.35cqw; right: 0.35cqw;
  font-family: var(--mono);
  font-size: clamp(9px, 0.8cqw, 13px);
  color: var(--ui-label);
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.07s ease;
}
#zb-pop .zp-x:hover { border-color: var(--ui-line); background: rgba(255,255,255,0.06); transform: translateY(-1px); }

#zb-pop .zp-head {
  font-family: var(--pixel);
  font-size: clamp(6px, 0.62cqw, 9px);
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 0.9cqw;
}

/* -- VIDEO: מדדי "שיפור המראה" -- */
#zb-pop .zp-meter {
  display: flex; align-items: center; gap: 0.6cqw;
  font-family: var(--pixel);
  font-size: clamp(5px, 0.55cqw, 8px);
  color: var(--ui-text);
  margin-bottom: 0.55cqw;
}
#zb-pop .zp-meter > span:first-child { flex: 0 0 34%; color: var(--ui-label); }
#zb-pop .zp-bar {
  flex: 1; height: 0.7cqw; min-height: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--ui-line);
  overflow: hidden;
}
#zb-pop .zp-bar i { display: block; height: 100%; background: var(--amber); }
#zb-pop .zp-err .zp-bar i { background: var(--zred); animation: zp-blink 0.5s steps(2) infinite; }
#zb-pop .zp-err b { color: var(--zred); }
@keyframes zp-blink { 50% { opacity: 0.35; } }
#zb-pop .zp-note {
  font-family: var(--mono);
  font-size: clamp(8px, 0.75cqw, 12px);
  color: var(--ui-label);
  margin-top: 0.9cqw;
}

/* -- PEOPLE: שורות המשתתפים -- */
#zb-pop .zp-person {
  display: flex; align-items: center; gap: 0.7cqw;
  padding: 0.45cqw 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#zb-pop .zp-person:last-child { border-bottom: none; }
#zb-pop .zp-face {
  width: 2.2cqw; height: 2.2cqw; min-width: 18px; min-height: 18px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid #c9a04e;
  flex: 0 0 auto;
}
#zb-pop .zp-face-winn {
  display: flex; align-items: center; justify-content: center;
  background: var(--amber);
  font-size: clamp(9px, 1.1cqw, 16px);
  border-color: #8a5f1e;
}
#zb-pop .zp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.18cqw; }
#zb-pop .zp-who b {
  font-family: var(--pixel);
  font-size: clamp(6px, 0.6cqw, 9px);
  color: var(--ui-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#zb-pop .zp-who i {
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(7px, 0.68cqw, 11px);
  color: var(--ui-label);
}
#zb-pop .zp-mic { font-size: clamp(8px, 0.85cqw, 13px); position: relative; }
#zb-pop .zp-mic.off { filter: grayscale(1); }
#zb-pop .zp-mic.off::after {
  content: ""; position: absolute; left: -12%; top: 48%;
  width: 124%; height: 2px; background: var(--zred);
  transform: rotate(-45deg);
}

/* -- CHAT: כמו צ'אט של זום -- */
#zb-pop .zp-log {
  max-height: 16cqw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-line) transparent;
}
#zb-pop .zp-msg { margin-bottom: 0.8cqw; }
#zb-pop .zp-meta {
  font-family: var(--mono);
  font-size: clamp(7px, 0.62cqw, 10px);
  color: var(--ui-label);
  margin-bottom: 0.2cqw;
}
#zb-pop .zp-meta b { color: var(--amber); }
#zb-pop .zp-meta span { float: right; opacity: 0.7; }
#zb-pop .zp-msg p {
  font-family: var(--mono);
  font-size: clamp(8px, 0.75cqw, 12px);
  line-height: 1.45;
  color: var(--ui-text);
  margin: 0;
}
#zb-pop .zp-typebox {
  margin-top: 0.9cqw;
  border: 1px solid var(--ui-line);
}
#zb-pop .zp-typebox:focus-within { border-color: var(--amber); }
#zb-pop .zp-in {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45cqw 0.6cqw;
  background: transparent;
  border: none; outline: none;
  font-family: var(--mono);
  font-size: clamp(11px, 0.8cqw, 16px);   /* לא מתחת ל-16px? מספיק — דסקטופ בלבד */
  color: var(--ui-text);
  caret-color: var(--amber);
}
#zb-pop .zp-in::placeholder { color: var(--ui-label); opacity: 0.8; }
/* END CHAT — מופיע רק אחרי שנתפסים בצ'אט; hover לפי החוק: מסגרת+רקע+תנועה */
#zb-pop .zp-endchat {
  display: block;
  margin: 0.6cqw 0 0.2cqw;
  padding: 0.5cqw 0.9cqw;
  font-family: var(--pixel);
  font-size: clamp(6px, 0.62cqw, 9px);
  color: #fff;
  background: var(--zred);
  border: 2px solid #8f2f2c;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.07s ease, background 0.15s ease, border-color 0.15s ease;
}
#zb-pop .zp-endchat:hover {
  background: #e2635f;
  border-color: #fff;
  transform: translateY(-2px);
}
#zb-pop .zp-endchat:active { transform: translate(1px, 1px); }

/* -- SHARE: פוסט לינקדאין — כרטיס לבן וסאנס-סריף, בכוונה צורם על המשחק -- */
#zb-pop .zp-li {
  background: #fff;
  color: #1d2226;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 0.9cqw 1cqw;
  margin: 0.2cqw -0.3cqw 0;
}
#zb-pop .zp-li .zp-li-head { display: flex; gap: 0.6cqw; margin-bottom: 0.6cqw; }
#zb-pop .zp-li .zp-face { border-radius: 50%; border-color: #d0d5da; width: 2.6cqw; height: 2.6cqw; }
#zb-pop .zp-li .zp-who b {
  font-family: inherit;
  font-size: clamp(9px, 0.8cqw, 13px);
  font-weight: 700; color: #1d2226;
}
#zb-pop .zp-li .zp-who i {
  font-family: inherit;
  font-size: clamp(7px, 0.65cqw, 11px);
  color: #6c7278;
}
#zb-pop .zp-li-text {
  font-size: clamp(8px, 0.75cqw, 12px);
  line-height: 1.4;
  margin: 0 0 0.5cqw;
}
#zb-pop .zp-li-tags {
  font-size: clamp(8px, 0.72cqw, 11px);
  color: #0a66c2; font-weight: 600;
  margin: 0 0 0.7cqw;
}
/* "הגיף הדבילי" — קונפטי CSS: שמונה פתיתים נופלים + CONGRATS קופץ */
#zb-pop .zp-li-gif {
  position: relative;
  height: 5.2cqw; min-height: 44px;
  background: linear-gradient(135deg, #f2e7fe, #dff1ff);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.6cqw;
}
#zb-pop .zp-li-gif b {
  font-size: clamp(12px, 1.5cqw, 22px);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #e0a800, #d9534f, #0a66c2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: zp-congrats 0.9s ease-in-out infinite;
}
@keyframes zp-congrats { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } }
#zb-pop .zp-li-gif em {
  position: absolute; font-style: normal;
  font-size: clamp(11px, 1.2cqw, 18px);
  animation: zp-balloon-bob 1.6s ease-in-out infinite;
}
#zb-pop .zp-li-gif em:nth-of-type(1) { left: 10%; bottom: 8%; }
#zb-pop .zp-li-gif em:nth-of-type(2) { right: 10%; bottom: 14%; animation-delay: 0.5s; }
@keyframes zp-balloon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18%); } }
#zb-pop .zp-li-gif i {
  position: absolute; top: -12%;
  width: 0.5cqw; height: 0.5cqw; min-width: 4px; min-height: 4px;
  animation: zp-confetti 1.8s linear infinite;
}
#zb-pop .zp-li-gif i:nth-of-type(1) { left: 8%;  background: #d9534f; animation-delay: 0s; }
#zb-pop .zp-li-gif i:nth-of-type(2) { left: 22%; background: #e0a800; animation-delay: 0.5s; }
#zb-pop .zp-li-gif i:nth-of-type(3) { left: 34%; background: #0a66c2; animation-delay: 1.1s; }
#zb-pop .zp-li-gif i:nth-of-type(4) { left: 47%; background: #2fa45c; animation-delay: 0.3s; }
#zb-pop .zp-li-gif i:nth-of-type(5) { left: 59%; background: #d9534f; animation-delay: 0.9s; }
#zb-pop .zp-li-gif i:nth-of-type(6) { left: 71%; background: #e0a800; animation-delay: 1.4s; }
#zb-pop .zp-li-gif i:nth-of-type(7) { left: 83%; background: #0a66c2; animation-delay: 0.6s; }
#zb-pop .zp-li-gif i:nth-of-type(8) { left: 93%; background: #2fa45c; animation-delay: 1.2s; }
@keyframes zp-confetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(6cqw) rotate(300deg); opacity: 0.4; }
}
#zb-pop .zp-li-foot {
  display: flex; justify-content: space-between;
  font-size: clamp(7px, 0.65cqw, 11px);
  color: #6c7278;
  border-bottom: 1px solid #e5e8ea;
  padding-bottom: 0.5cqw; margin-bottom: 0.5cqw;
}
#zb-pop .zp-li-comment {
  font-size: clamp(7px, 0.68cqw, 11px);
  color: #444a4f;
}

/* -- REC: בלון המצלמה — התנועה עצמה ב-WAAPI מ-toolbar.js -- */
.zb-balloon {
  position: absolute;
  z-index: 55;
  transform: translate(-50%, 0);
  font-size: clamp(14px, 1.8cqw, 28px);
  pointer-events: none;
}