/* ==========================================================
   THE MISSION SCREEN · המסך היחיד שלפני המגילה (זוג עם briefing.js)
   מרקיזת ארקייד מימין, אריח המוכר האמיתי משמאל בתוך מסגרת זהב.
   שני דברים בלבד: המטרה והחוק. **לא להוסיף שורות.**
   ========================================================== */

#briefing {
  position: absolute;
  inset: 0;
  z-index: 40;                       /* מעל אריחים (25) וטולבר (30), מתחת לספירה (45) */
  direction: ltr;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  font-family: "Jersey 10", monospace;
}
#briefing.visible { opacity: 1; }
#briefing.lit { pointer-events: auto; }

/* החשכה: החדר נשאר נוכח אבל מודגש החוצה */
#briefing .scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 46%, rgba(4, 5, 8, .68) 0%, rgba(4, 5, 8, .88) 85%);
}

/* ---------- המרקיזה ----------
   left/top מוחלטים ולא מרכוז: הקומפוזיציה היא זוג — אריח משמאל,
   מרקיזה מימינו — ושני המרכזים יושבים על 24.6cqw. ראה briefing.js */
#briefing .marq {
  position: absolute;
  left: 36cqw;
  top: 24.6cqw;
  transform: translateY(-50%);
  text-align: center;
  padding: 2.6cqw 4.4cqw 2.5cqw;
  background: #16171b;
  border: .9cqw solid #2b2d33;
  border-radius: 1cqw;
  box-shadow: 0 0 3.4cqw rgba(242, 197, 61, .28), 0 2cqw 4cqw rgba(0, 0, 0, .7);
}
/* נורות המרקיזה — ארבע שורות נקודות שמהבהבות יחד */
#briefing .marq::before {
  content: "";
  position: absolute;
  inset: -.62cqw;
  border-radius: 1.1cqw;
  pointer-events: none;
  background:
    radial-gradient(circle .34cqw at .9cqw 50%, #ffdc6b 45%, transparent 55%) left center / 2.2cqw 2.2cqw repeat-y,
    radial-gradient(circle .34cqw at calc(100% - .9cqw) 50%, #ffdc6b 45%, transparent 55%) right center / 2.2cqw 2.2cqw repeat-y,
    radial-gradient(circle .34cqw at 50% .9cqw, #ffdc6b 45%, transparent 55%) top center / 2.2cqw 2.2cqw repeat-x,
    radial-gradient(circle .34cqw at 50% calc(100% - .9cqw), #ffdc6b 45%, transparent 55%) bottom center / 2.2cqw 2.2cqw repeat-x;
  animation: mis-bulbs 1s steps(2) infinite;
}
@keyframes mis-bulbs { 50% { opacity: .35; } }

#briefing .marq .msn {
  font-family: "Press Start 2P", monospace;
  font-size: 1.7cqw;
  letter-spacing: .3cqw;
  color: #fff;
  text-shadow: .2cqw .2cqw 0 #4a1208;
}
#briefing .marq .ttl {
  margin-top: 1.3cqw;
  font-family: "Press Start 2P", monospace;
  font-size: 2.9cqw;
  color: #f2c53d;
  text-shadow: .34cqw .34cqw 0 #c0392b;
  white-space: nowrap;
}
#briefing .marq .law {
  margin-top: 1.7cqw;
  font-family: "Press Start 2P", monospace;
  font-size: 1.3cqw;
  color: #ff5545;
  text-shadow: 0 0 1cqw rgba(255, 69, 56, .45);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
}
#briefing .marq .law img { width: 2.5cqw; image-rendering: pixelated; }

/* הלב: פועם וזוהר, ופעמיים במחזור נכבה לרגע — החוק בתמונה אחת, בלי מילה */
#briefing .hdie { animation: mis-heart 1.6s ease-in-out infinite; }
@keyframes mis-heart {
  0%, 55%, 100% { filter: drop-shadow(0 0 1.5cqw rgba(255, 69, 56, .7)); transform: scale(1); }
  8%  { transform: scale(1.12); }
  16% { transform: scale(1); }
  24% { transform: scale(1.06); }
  62%, 74% { filter: grayscale(1) brightness(.4); transform: scale(.96); }
  68% { filter: drop-shadow(0 0 1.1cqw rgba(255, 69, 56, .5)); }
}
#briefing .blink { animation: mis-blink .85s steps(1) infinite; }
@keyframes mis-blink { 50% { opacity: 0; } }

/* מצב צילום headless — בלי הבהובים, ובלי מעבר על האריח (ב-headless עם
   virtual-time הזמן הווירטואלי רץ מהר מהקומפוזיטור והפריים יוצא באמצע
   הגלישה — האריח נראה כאילו לא זז בכלל) */
body.mission-still #stage .ptile { transition: none !important; }
body.mission-still #briefing .hdie,
body.mission-still #briefing .blink,
body.mission-still #briefing .marq::before,
body.mission-still #mission-frame { animation: none; }
body.mission-still #briefing .hdie { filter: drop-shadow(0 0 1.5cqw rgba(255, 69, 56, .7)); }

/* ---------- הכפתור ---------- */
#briefing .startbtn {
  margin-top: 2.1cqw;
  font-family: "Press Start 2P", monospace;
  font-size: 1.15cqw;
  color: #fff;
  cursor: pointer;
  background: #c0392b;
  border: .22cqw solid #7e2318;
  border-radius: .45cqw;
  padding: 1.1cqw 2.6cqw;
  box-shadow: 0 .4cqw 0 #7e2318;
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
#briefing .startbtn:hover {
  transform: translateY(-.25cqw);
  box-shadow: 0 .65cqw 0 #7e2318;
  filter: brightness(1.12);
}
#briefing .startbtn:active { transform: translateY(.1cqw); box-shadow: 0 .2cqw 0 #7e2318; }
#briefing .startbtn:focus-visible { outline: .22cqw solid #f2c53d; outline-offset: .3cqw; }

/* ---------- מסגרת השחקן ----------
   ילדה ישירה של הבמה (z 42) כי היא מעל אריח המוכר שהורם ל-41.
   ⚠ המידות מחבקות את ריבוע האריח **אחרי** ההזזה שב-briefing.js —
   לא לגעת באחת בלי השנייה. הן נמדדו עם `briefing-one.html?probe=1`. */
#mission-frame {
  position: absolute;
  left: 13.4cqw;
  bottom: 22.05cqw;
  width: 19.2cqw;
  height: 19.2cqw;
  z-index: 42;
  direction: ltr;
  font-family: "Jersey 10", monospace;
  border: .32cqw solid #f2c53d;
  border-radius: .6cqw;
  box-shadow: 0 0 2.6cqw rgba(242, 197, 61, .55), inset 0 0 1.4cqw rgba(242, 197, 61, .25);
  transform: rotate(-2.5deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  animation: mis-frame 1.6s ease-in-out infinite;
}
#mission-frame.visible { opacity: 1; }
@keyframes mis-frame {
  50% { box-shadow: 0 0 4cqw rgba(242, 197, 61, .8), inset 0 0 1.4cqw rgba(242, 197, 61, .25); }
}
#mission-frame .tag {
  position: absolute;
  left: 50%;
  top: -1.6cqw;
  transform: translateX(-50%);
  font-family: "Press Start 2P", monospace;
  font-size: .85cqw;
  color: #1a1405;
  background: linear-gradient(170deg, #ffdc6b, #eab72a);
  border: .18cqw solid #8a6a12;
  border-radius: .4cqw;
  padding: .6cqw 1.1cqw;
  white-space: nowrap;
}