/* ==========================================================
   THE SCROLL · קומפוננטה עצמאית (זוג עם scroll.js)
   ששים שניות מול תיק חומרים. במרכז יושב נכס סטטי 16:9 —
   אינפוגרפיקת 8-ביט מפוצצת בפרטים. הקומפוננטה רק ממסגרת אותו.

   ⚠ **כתיבה מחדש · 12.08.2026 · THE BURNING FRAME (מאושר: "מושלם").**
   הגלגול השלישי באותו יום, ואחרון: פאנל צף (DOSSIER) → קבינת ארקייד
   (THE CABINET, חי כשעתיים) → **המסגרת הבוערת**, שנבחרה מתוך חמש
   אופציות שהוצגו לעודד על המשחק של דונלד.

   הרעיון: **המסגרת של התמונה היא הטיימר.** אין קופסה נפרדת לשעון —
   הלחץ עוטף את הדבר שהשחקן מנסה לזכור:
     · המסגרת ירוקה וזוהרת · **צהובה ב-30** · **אדומה ב-10**, ואז גם
       החדר נצבע אדום · **בחמש האחרונות המסגרת והספרות רועדות**
     · המספר בשלטית קטנה שמרחפת כולה **מעל** המסגרת (שני סבבים של
       עודד: קודם פלשה לתמונה, אחר כך ישבה על הקו — עכשיו רווח אוויר)
     · חצים = כפתורי ארקייד עגולים **שרוכבים על שפות התמונה**
     · המגש (PAGE n/N + המספרים + SKIP) **צמוד לפאה התחתונה** של
       התמונה וחלק מאותו חפץ — רועד יחד איתה
     · חץ זהב ענק מעל NEXT — **יורד אחרי שקופית 4** ולא חוזר

   **הטיימר — הכללים הנעולים:** מספר בלבד, 60 יורד ל-0, בלי מילים,
   בלי דקות:שניות ובלי אפס מוביל. הצבע הוא ההודעה.
   ========================================================== */

#scroll {
  position: absolute;
  inset: 0;
  z-index: 40;
  direction: ltr;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  font-family: "Jersey 10", monospace;

  /* צבע הטיימר — משתנה אחד שהמסגרת, השלטית והזוהר יונקים ממנו */
  --tc: #4fd07a;
  --tglow: rgba(79, 208, 122, .75);
}
#scroll.visible { opacity: 1; pointer-events: auto; }
#scroll.warm { --tc: #ffbe46; --tglow: rgba(255, 190, 70, .8); }
#scroll.hot  { --tc: #ff3b2f; --tglow: rgba(255, 59, 47, .8); }

/* scrim — מדמם את החדר, לא מסתיר אותו */
#scroll .scrim { position: absolute; inset: 0; background: rgba(4, 5, 8, .8); }

/* בעשר האחרונות החדר עצמו נצבע אדום */
#scroll .redvig {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  background: radial-gradient(ellipse 70% 65% at 50% 46%, transparent 52%, rgba(255, 30, 20, .3) 100%);
}
#scroll.hot .redvig { opacity: 1; }

/* ---------- המסגרת הבוערת ---------- */
#scroll .fr {
  position: absolute;
  left: 50%;
  top: 47.8%;
  transform: translate(-50%, -50%) rotate(.4deg);
  width: 63cqw;
  border: 1.05cqw solid var(--tc);
  background: var(--tc);
  box-shadow:
    0 0 4.7cqw .7cqw var(--tglow),
    inset 0 0 0 .2cqw rgba(0, 0, 0, .35),
    0 1.25cqw 3.1cqw rgba(0, 0, 0, .8);
  transition: border-color .5s ease, background .5s ease, box-shadow .5s ease;
}
#scroll .shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;                  /* עד שהנכס נטען — וגם הרקע שלו */
}
#scroll .shot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;                   /* ⚠ מגן מפני reset חיצוני שמאפס רוחב */
  object-fit: cover;
  image-rendering: pixelated;
  animation: sc-turn .26s ease both;
}
@keyframes sc-turn {
  from { opacity: .25; transform: translateX(var(--dir, 0)); }
  to   { opacity: 1; transform: none; }
}

/* ---------- השלטית של המספר ----------
   מרחפת כולה מעל המסגרת עם רווח אוויר — לא נוגעת בקו ולא בתמונה. */
#scroll .chip {
  position: absolute;
  top: -5.8cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: #0b0c0f;
  border: .22cqw solid var(--tc);
  border-radius: .6cqw;
  padding: .35cqw 1.7cqw;
  box-shadow: 0 0 2.6cqw .35cqw var(--tglow);
  transition: border-color .5s ease, box-shadow .5s ease;
}
#scroll .cnum {
  font-family: "Press Start 2P", monospace;
  font-size: 4.1cqw;
  line-height: 1;
  color: var(--tc);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 1.7cqw var(--tglow);
  min-width: 5.1cqw;
  text-align: center;
  transition: color .5s ease;
  display: block;
}

/* ---------- החצים · רוכבים על שפות התמונה ----------
   ⚠ ילדים של ‎.fr‎ ולא של ‎.shot‎ — לתמונה יש overflow:hidden (בשביל
   אנימציית הדפדוף) וכל מה שחורג ממנה נחתך. למדנו כשנשאר מהכפתורים
   רק סהרון.
   ⚠ ‎-3.9cqw‎: "עוד טיפה לצדדים" (עודד) — רוב העיגול בחוץ, רוכב על קו
   המסגרת, ועדיין נקרא כחלק ממנה. */
#scroll .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6.7cqw;
  height: 6.7cqw;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  background: radial-gradient(circle at 50% 32%, #7c838f, #565c66 55%, #383d45 100%);
  transition: transform .07s ease, filter .15s ease;
  box-shadow:
    inset 0 .3cqw 0 rgba(255, 255, 255, .35),
    inset 0 -.4cqw 0 rgba(0, 0, 0, .45),
    0 .5cqw 0 #101216,
    0 .62cqw 0 .16cqw #05060a;
}
/* ⚠ החץ הוא SVG ולא התו ◀ — התו נופל לפונט מערכת, יוצא קטן ולא ממורכז */
#scroll .nav svg.ar {
  width: 3.3cqw;
  height: 3.3cqw;
  fill: currentColor;
  filter: drop-shadow(0 .1cqw 0 rgba(0, 0, 0, .35));
}
#scroll .nav.prev { left: -3.9cqw; }
#scroll .nav.next { right: -3.9cqw; }
#scroll .nav:hover {
  filter: brightness(1.15);
  transform: translateY(calc(-50% - .16cqw));
  box-shadow:
    inset 0 0 0 .2cqw #ffe07a,
    inset 0 .3cqw 0 rgba(255, 255, 255, .35),
    inset 0 -.4cqw 0 rgba(0, 0, 0, .45),
    0 .66cqw 0 #101216,
    0 .78cqw 0 .16cqw #05060a;
}
#scroll .nav:active {
  transform: translateY(calc(-50% + .3cqw));
  box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .25), 0 .2cqw 0 #101216;
}
/* מושבת נשאר גלוי — אחרת נראה שאין שם כפתור בכלל */
#scroll .nav[disabled] { opacity: .4; filter: grayscale(.8); pointer-events: none; }

/* NEXT דולק ומהבהב בזהב — כל הזמן, בכל העמודים */
#scroll .nav.next:not([disabled]) { animation: sc-arcglow 1.5s ease-in-out infinite; }
@keyframes sc-arcglow {
  0%, 100% {
    background: radial-gradient(circle at 50% 32%, #ffd685, #f0a93c 55%, #a06a10 100%);
    color: #2b1d00;
    box-shadow:
      inset 0 .3cqw 0 rgba(255, 240, 200, .6),
      inset 0 -.4cqw 0 rgba(120, 70, 0, .5),
      0 .5cqw 0 #101216,
      0 .62cqw 0 .16cqw #05060a,
      0 0 1.4cqw .16cqw rgba(255, 190, 70, .5);
  }
  50% {
    background: radial-gradient(circle at 50% 32%, #fff0c4, #ffc247 55%, #c2810f 100%);
    color: #2b1d00;
    box-shadow:
      inset 0 .3cqw 0 rgba(255, 248, 225, .75),
      inset 0 -.4cqw 0 rgba(120, 70, 0, .5),
      0 .5cqw 0 #101216,
      0 .62cqw 0 .16cqw #05060a,
      0 0 3.6cqw .5cqw rgba(255, 190, 70, .95);
  }
}

/* ---------- חץ הזהב שמעל NEXT ----------
   הוא מה שאומר, בלי מילה, שיש עוד עמודים.
   ⚠ **יורד אחרי שקופית 4 ולא חוזר** (עודד, 12.08) — מי שהגיע לעמוד 5
   כבר הבין שמדפדפים, ומכאן החץ רק רעש. יורד גם בעמוד האחרון. */
#scroll .hint {
  position: absolute;
  bottom: calc(100% + .5cqw);
  left: 50%;
  transform: translateX(-50%);
  width: 4.4cqw;
  pointer-events: none;
  animation: sc-hintbob 1.1s ease-in-out infinite;
}
#scroll .hint svg { display: block; width: 100%; height: auto; }
#scroll .hint polygon {
  fill: #ffcc4d;
  stroke: #7a4e00;
  stroke-width: 1.4;
  stroke-linejoin: round;
  /* ⚠ בלי drop-shadow (עודד, 16.08): ההילה גרמה לחץ להיראות כמו גזירה
     מרושלת. חץ חד ונקי — בכל 100 המשחקים. */
}
@keyframes sc-hintbob {
  0%, 100% { transform: translate(-50%, -.5cqw); }
  50%      { transform: translate(-50%, .55cqw); }
}
#scroll.nohint .hint, #scroll.last .hint { display: none; }

/* ---------- המגש · צמוד לפאה התחתונה של התמונה ----------
   ילד של ‎.fr‎ — זז ורועד יחד איתה, כי הוא חלק מאותו חפץ. */
#scroll .tray {
  position: absolute;
  top: calc(100% + .8cqw);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  background: #16181d;
  border-radius: .73cqw;
  padding: .9cqw 1.6cqw;
  box-shadow: inset 0 0 0 .18cqw #3a3e46, 0 .5cqw 1.6cqw rgba(0, 0, 0, .7);
}
#scroll .plab { font-size: 2.5cqw; color: #e9edf2; letter-spacing: .1em; white-space: nowrap; }
#scroll .plab b { color: #ffbe46; font-weight: normal; }
#scroll .tabs { display: flex; gap: .4cqw; }
#scroll .tab {
  width: 2.75cqw;
  height: 2.95cqw;
  border: none;
  border-radius: .4cqw;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  font-family: "Press Start 2P", monospace;
  font-size: 1.1cqw;
  color: #8b9099;
  background: #191c21;
  transition: transform .07s ease, filter .15s ease;
  box-shadow: inset 0 .16cqw 0 rgba(255, 255, 255, .12), inset 0 -.2cqw 0 rgba(0, 0, 0, .5), 0 .26cqw 0 #0b0c0f;
}
/* hover לפי החוק: מסגרת + רקע + תנועה */
#scroll .tab:hover {
  transform: translateY(-.14cqw);
  filter: brightness(1.2);
  color: #ffe07a;
  box-shadow: inset 0 0 0 .14cqw #ffe07a, inset 0 .16cqw 0 rgba(255, 255, 255, .12), 0 .4cqw 0 #0b0c0f;
}
#scroll .tab:active { transform: translateY(.2cqw); }
/* העמוד הנוכחי דולק בזהב — העוגן של "איפה אני מתוך N" */
#scroll .tab.cur {
  cursor: default;
  color: #2b1d00;
  background: #ffbe46;
  box-shadow: inset 0 .16cqw 0 #ffe9b0, inset 0 -.2cqw 0 #b57a10, 0 .26cqw 0 #0b0c0f,
    0 0 1.4cqw .26cqw rgba(255, 190, 70, .85);
}
#scroll .tab.cur:hover { transform: none; filter: none; }

/* ---------- SKIP קטן מאחורי הזכוכית ----------
   ⚠ SKIP ולא I'M READY: "מוכן" נשמע כמו המהלך הנכון ומזמין לחיצה;
   "דילוג" אומר בדיוק מה הכפתור עושה. עדיין יציאת חירום, לא הזמנה. */
#scroll .glassbox { position: relative; display: inline-flex; margin-left: .6cqw; }
#scroll .ready {
  display: flex;
  align-items: center;
  padding: .68cqw 1.55cqw .78cqw;
  border: none;
  border-radius: 3cqw;
  font-family: "Press Start 2P", monospace;
  font-size: .68cqw;
  letter-spacing: .06em;
  color: #fff2ee;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, filter .15s ease;
  text-shadow: .1cqw .1cqw 0 rgba(0, 0, 0, .45);
  background: radial-gradient(ellipse 120% 160% at 50% 14%, #ff7a6b 0 18%, #e8402f 52%, #a81b0f 100%);
  box-shadow: inset 0 .16cqw 0 rgba(255, 255, 255, .38), 0 .34cqw 0 #6d1108, 0 .44cqw 0 .1cqw #2c0703;
}
#scroll .ready:hover { filter: brightness(1.08); }
#scroll .ready:active {
  transform: translateY(.18cqw);
  box-shadow: inset 0 .16cqw 0 rgba(255, 255, 255, .28), 0 .06cqw 0 #6d1108, 0 .1cqw 0 .1cqw #2c0703;
}

/* ── הזכוכית שמעל הכפתור (10.08) ──
   שלוש לחיצות — סדק, סדק גדול, ואז ריסוק שגם מפעיל את הכפתור. */
#scroll .glass {
  position: absolute;
  inset: -.55cqw -.66cqw;
  border-radius: .5cqw;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, .40) 0 14%,
      rgba(255, 255, 255, .06) 24% 44%,
      rgba(255, 255, 255, .46) 50% 58%,
      rgba(255, 255, 255, .07) 64% 86%,
      rgba(255, 255, 255, .22) 92% 100%);
  border: .16cqw solid rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 .1cqw .26cqw rgba(255, 255, 255, .8),
    inset 0 -.16cqw .26cqw rgba(0, 0, 0, .3),
    0 .1cqw .5cqw rgba(0, 0, 0, .45);
  transition: transform .09s ease, box-shadow .15s ease, background .15s ease;
}
#scroll .glass:hover {
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, .46) 0 16%,
      rgba(255, 255, 255, .12) 27% 58%,
      rgba(255, 255, 255, .38) 70% 84%,
      rgba(255, 255, 255, .16) 92% 100%);
  box-shadow:
    inset 0 .1cqw .3cqw rgba(255, 255, 255, .75),
    0 0 0 .16cqw rgba(255, 255, 255, .5),
    0 .16cqw .6cqw rgba(0, 0, 0, .45);
  transform: translateY(-.1cqw);
}
#scroll .glass:active { transform: translateY(.08cqw); }
#scroll .glass svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#scroll .glass path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 .12cqw rgba(255, 255, 255, .9));
}
#scroll .glass g { opacity: 0; transition: opacity .12s ease; }
#scroll .glass.k1 .g1,
#scroll .glass.k2 .g1,
#scroll .glass.k2 .g2 { opacity: 1; }
#scroll .glass.k1 { animation: sc-gnick .16s ease-out; }
#scroll .glass.k2 { animation: sc-gnick .19s ease-out; }
@keyframes sc-gnick {
  0% { transform: translate(0, 0) }
  30% { transform: translate(-.14cqw, .1cqw) }
  62% { transform: translate(.12cqw, -.08cqw) }
  100% { transform: translate(0, 0) }
}
#scroll .glass.gone { pointer-events: none; animation: sc-gsmash .26s ease-in forwards; }
@keyframes sc-gsmash {
  0% { opacity: 1; transform: scale(1); filter: brightness(1) }
  22% { opacity: 1; transform: scale(1.06); filter: brightness(2.4) }
  100% { opacity: 0; transform: scale(1.22) rotate(1.5deg); filter: brightness(1) }
}

/* ---------- חמש השניות האחרונות ----------
   הספרות רועדות בעצמן **וגם** המסגרת כולה (והמגש שצמוד אליה). */
#scroll.panic .cnum { animation: sc-pulse .42s steps(2) infinite, sc-digitshake .11s steps(2) infinite; }
#scroll.panic .fr   { animation: sc-nerve .42s ease-in-out infinite; }
@keyframes sc-pulse { 50% { opacity: .34; } }
@keyframes sc-digitshake {
  0%   { transform: translate(-.16cqw, .1cqw); }
  50%  { transform: translate(.16cqw, -.1cqw); }
  100% { transform: translate(-.1cqw, -.06cqw); }
}
@keyframes sc-nerve {
  25% { transform: translate(calc(-50% - .18cqw), -50%) rotate(.4deg); }
  75% { transform: translate(calc(-50% + .18cqw), -50%) rotate(.4deg); }
}

/* מכבדים העדפת מערכת — למי שביקש פחות תנועה */
@media (prefers-reduced-motion: reduce) {
  #scroll .nav.next:not([disabled]),
  #scroll .hint,
  #scroll.panic .cnum,
  #scroll.panic .fr,
  #scroll .shot img { animation: none; }
  #scroll .nav.next:not([disabled]) {
    background: radial-gradient(circle at 50% 32%, #ffd685, #f0a93c 55%, #a06a10 100%);
    color: #2b1d00;
    box-shadow:
      inset 0 .3cqw 0 rgba(255, 240, 200, .6),
      inset 0 -.4cqw 0 rgba(120, 70, 0, .5),
      0 .5cqw 0 #101216,
      0 .62cqw 0 .16cqw #05060a,
      0 0 2.4cqw .3cqw rgba(255, 190, 70, .8);
  }
}