/* ==========================================================================
   מסך הפתיחה — opening-splash.webp
   --------------------------------------------------------------------------
   התמונה היא הדמיה שטוחה 1448×1086 (יחס 4:3). הכותרת „התחילי את ההרפתקה!”
   וכפתור ה-Play העגול צרובים בתוכה, ולכן אין כאן טקסט HTML כלל —
   רק כפתור שקוף שממוקם בדיוק על העיגול המצויר.

   מיקום העיגול בתמונה: מרכז ב-51.1% מהרוחב, 58.5% מהגובה; קוטר ≈ 20.5%.

   שכבת התמונה: רוחב 100vw, גובה 75vw (יחס 4:3), left: 0.
   top: calc(50vh - 36vw) — נבחר כך שגם הכותרת נראית במלואה וגם התמונה
   מכסה את כל המסך בשלוש הרזולוציות: 1366×768, 1440×900, 1920×1080.
   ========================================================================== */
.opening-splash {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  background: #2a1746;
  opacity: 1;
  transition: opacity .25s ease;
}
.opening-splash[hidden] { display: none; }
.opening-splash.is-ending { opacity: 0; pointer-events: none; }

/* שכבת התמונה עצמה */
.opening-splash::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50vh - 36vw);
  width: 100vw;
  height: 75vw;
  pointer-events: none;
  background: url("../assets/backgrounds/opening-splash.webp") 0 0 / 100% 100%;
}

/* הכפתור: שקוף לחלוטין, יושב על העיגול הסגול-זהוב שבתמונה.
   y = top השכבה + 58.5%·75vw = (50vh − 36vw) + 43.875vw = 50vh + 7.875vw */
.opening-play {
  position: absolute;
  z-index: 2;
  left: 51.1vw;
  top: calc(50vh + 7.875vw);
  width: 20.5vw;
  height: 20.5vw;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .16s ease, filter .16s ease;
}
.opening-play:hover {
  transform: translate(-50%, -50%) scale(1.05);
  filter: drop-shadow(0 0 22px rgba(255, 214, 120, .55));
}
.opening-play:active {
  transform: translate(-50%, -50%) scale(.97);
}
.opening-play:focus-visible {
  outline: 3px solid #ffd76a;
  outline-offset: 6px;
}
.opening-play:disabled {
  cursor: default;
  filter: none;
}