:root {
  --cc-cork: #4a3826;
  --cc-bg-dark: #241a10;
  --cc-paper: #f3ead4;
  --cc-paper-ink: #241a10;
  --cc-paper-muted: #6b5a42;
  --cc-red: #a3272c;
  --cc-red-dark: #7c1d21;
  --cc-gold: #c9a24b;
  --cc-good: #2f6b3f;
  --cc-good-soft: #dcead9;
  --cc-bad: #a3272c;
  --cc-bad-soft: #f1d9d6;
  --cc-ivory: #fff8ec;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--cc-bg-dark);
}

body {
  direction: rtl;
  font-family: 'Heebo', 'Segoe UI', Tahoma, sans-serif;
  color: var(--cc-ivory);
  padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
}

[hidden] { display: none !important; }
img { max-width: 100%; }

.stage {
  position: relative;
  max-width: 760px;
  margin: 24px auto 48px;
  min-height: 70vh;
  border-radius: 18px;
  overflow: hidden;
  padding: 76px clamp(16px, 4vw, 40px) 32px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 6px),
    radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px) 0 0/14px 14px,
    var(--cc-cork);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55), 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--cc-gold);
  font-weight: 700;
  margin: 0 0 4px;
}

.heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  color: var(--cc-ivory);
  text-wrap: balance;
}

.lede {
  max-width: 46ch;
  color: #e7dcc4;
  line-height: 1.7;
  margin: 0;
}

/* --- תאורת אזעקה אדומה מהבהבת: 10 השניות האחרונות של כל תיק --- */
.alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 32%, rgba(220, 20, 20, 0.55) 100%);
  mix-blend-mode: screen;
}
.stage:has(#timer[data-urgent='true']) .alarm-overlay {
  animation: pulse-light 1.2s infinite;
}
@keyframes pulse-light {
  0%, 18%, 100% { opacity: 0.08; }
  9% { opacity: 0.5; }
  55% { opacity: 0.6; }
  73% { opacity: 0.1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage:has(#timer[data-urgent='true']) .alarm-overlay { animation: none; opacity: 0.25; }
}

/* --- כפתור מוזיקה --- */
.music-toggle {
  position: absolute;
  inset-inline-end: 16px;
  top: 16px;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--cc-gold);
  background: rgba(0, 0, 0, 0.4);
  color: var(--cc-ivory);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.music-toggle:hover { background: rgba(0, 0, 0, 0.6); }

button:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  cursor: pointer;
  background: var(--cc-gold);
  color: #241a10;
  transition: transform 0.1s, opacity 0.15s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--ghost { background: transparent; border: 2px solid var(--cc-gold); color: var(--cc-ivory); }

/* --- "+5" ירוק: קופץ במרכז המסך ועף אל צג הקופה אחרי תשובה נכונה (--dx/--dy מ-script.js) --- */
.score-float {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: clamp(3.3rem, 11vw, 4.95rem);
  font-weight: 800;
  line-height: 1;
  direction: ltr;
  white-space: nowrap;
  color: #4cd46a;
  text-shadow: 0 2px 0 #0f2a17, 0 0 3px #0f2a17, 0 0 22px rgba(76, 212, 106, 0.6);
  animation: score-float 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes score-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.2; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .score-float { animation: score-float-fade 1.4s ease forwards; }
}
@keyframes score-float-fade {
  0% { opacity: 0; }
  15%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- כיסוי / סיום --- */
.cover, .ending {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.ending { min-height: 0; max-width: 520px; margin-inline: auto; position: relative; }
/* מרווח משלהם לכפתורי הסיום, כדי שלא ייצמדו לטקסט גם כשה-gap מצטמצם במסכים נמוכים */
.ending > .btn { margin-block: 12px; }
#ending-heading, .ending-text { white-space: pre-line; }

.ending-heading-pop { animation: celebrate-pop 0.6s ease; }
@keyframes celebrate-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ending-heading-pop { animation: none; }
}

.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.confetti-piece {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(420px) rotate(360deg); opacity: 0; }
}
.stamp {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  border: 3px solid var(--cc-red);
  color: #ffb3b3;
  padding: 0.5rem 1.4rem;
  border-radius: 6px;
  transform: rotate(-6deg);
  font-size: 1rem;
  letter-spacing: 0;
}
.title-xl { font-size: 3rem; color: var(--cc-ivory); margin: 0; }

.coupon-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 360px; width: 100%; margin-inline: auto; text-align: start; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.85rem; color: #e7dcc4; }
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'] {
  font: inherit;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 248, 236, 0.3);
  background: rgba(255, 248, 236, 0.08);
  color: var(--cc-ivory);
}
.field input::placeholder { color: rgba(255, 248, 236, 0.45); }
.consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: #e7dcc4; }
.consent input { margin-top: 0.2rem; }

.status-msg {
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  text-align: center;
}
.status-msg[data-state='success'] { background: var(--cc-good-soft); color: #17331f; }
.status-msg[data-state='error'] { background: var(--cc-bad-soft); color: #4a1414; }

.coupon-code {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  background: var(--cc-ivory);
  color: var(--cc-paper-ink);
  border: 2px dashed var(--cc-gold);
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  display: inline-block;
}
.coupon-result { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.coupon-result p { margin: 0; }
.coupon-result .coupon-code { user-select: all; }
.coupon-result__meta { font-size: 0.85rem; color: #e7dcc4; }

footer.credit {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cc-ivory);
}
footer.credit p { margin: 0; }
footer.credit a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
footer.credit a:hover { color: var(--cc-gold); }

@media (max-width: 560px) {
  body { padding-inline: 8px; }
  .stage { margin-top: 8px; padding-inline: 12px; }
  .title-xl { font-size: 2.25rem; }
  .btn { max-width: 100%; min-height: 44px; padding-inline: 20px; }
  .lede, .btn { overflow-wrap: anywhere; }
}

/* Shared scene for the opening and the case screens. */
body:has(:is(.opening-environment > section, #screen-case[data-case]):not([hidden])) {
  padding: 0;
  background: #030303;
}
body:has(:is(.opening-environment > section, #screen-case[data-case]):not([hidden])) .credit { display: none; }
.stage:has(:is(.opening-environment > section, #screen-case[data-case]):not([hidden])) {
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #030303;
  box-shadow: none;
  gap: 0;
}
/* לכל מסך פתיחה תמונת רקע משלו: המידות שלה, ומרכז מקור האור בה כחלק מרוחב התמונה מצד ימין
   (התמונה מוצמדת לימין). מוגדר על .stage כי הרקע ומסכי הפתיחה הם אחים בתוכו. */
.stage {
  --scene-w: 1672;
  --scene-h: 941;
  /* מסך ההסבר: אלומת האור ב-16% מרוחב התמונה, מצד שמאל */
  --beam-from-right: 0.84;
}
.stage:has(#screen-gate:not([hidden])) {
  --scene-w: 1915;
  --scene-h: 821;
  /* השער: המנורה בעמודה 709 מתוך 1915 */
  --beam-from-right: 0.63;
}
.opening-environment {
  position: relative;
}
.opening-environment:not(:has(> section:not([hidden]))) { display: none; }
/* מסך הפתיחה נכנס במלואו למסך אחד ואין בו גלילה. הגדלים למטה מתכווצים לפי גובה החלון,
   ו-fitOpening ב-script.js מקטין את התוכן כולו אם גם זה לא מספיק. חריג יחיד: כשההקטנה הייתה
   הופכת את הטקסט ללא קריא (טלפון לרוחב) fitOpening מסמן data-scroll וחוזרת גלילה רגילה. */
:root:has(.opening-environment > section:not([hidden]):not([data-scroll='true'])) {
  overflow: hidden;
  overscroll-behavior: none;
}
.opening-environment > .cover {
  --scene-width: max(100vw, calc(100svh * var(--scene-w) / var(--scene-h)));
  /* מרכז מקור האור ברקע, על המסך */
  --beam-x: calc(100vw - var(--scene-width) * var(--beam-from-right));
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 88px 0;
  padding: clamp(56px, 10svh, 88px) 0 clamp(24px, 6svh, 88px);
  /* אזור התוכן מתחיל ב-5vw משמאל ומרכזו בדיוק מתחת לאלומה; .intro-content ממורכז בתוכו.
     כשהאזור צר מהתוכן (האלומה קרובה לשוליים) התוכן נצמד ל-5vw משמאל. */
  padding-left: 5vw;
  padding-right: min(calc(105vw - 2 * var(--beam-x)), 95vw);
  direction: ltr;
  text-align: right;
}
.opening-environment > .cover[data-scroll='true'] {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
}
.opening-background {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: -1;
  pointer-events: none;
  background: url('assets/investigation-opening.png') right center / cover no-repeat;
}
.stage:has(:is(.opening-environment > section, #screen-case[data-case]):not([hidden])) > .opening-background { display: block; }
.stage:has(#screen-gate:not([hidden])) > .opening-background {
  background-image: url('assets/investigation-gate.png');
}
.stage:has(#screen-case[data-case]:not([hidden])) > .opening-background {
  background-image: url('assets/investigation-case-01.png');
}
.stage:has(#screen-case[data-case="02"]:not([hidden])) > .opening-background {
  background-image: url('assets/investigation-case-02.png');
}
.stage:has(#screen-case[data-case="03"]:not([hidden])) > .opening-background {
  background-image: url('assets/investigation-case-03.png');
}
.stage:has(#screen-case[data-case="04"]:not([hidden])) > .opening-background,
.stage:has(#screen-case[data-case="05"]:not([hidden])) > .opening-background {
  background-image: url('assets/investigation-case-04-05.png');
}
.intro-content {
  direction: rtl;
  /* רוחב לפי השורה הארוכה, כדי שהטקסט עצמו (ולא קופסה רחבה ממנו) יעמוד מתחת לאלומת האור. */
  width: max-content;
  max-width: min(640px, 55vw);
  /* ממורכז מתחת לאלומה (ראו הריפוד של .cover) ואנכית כשיש מקום; כשאין — נצמד לשמאל/למעלה
     (ו-fitOpening מקטין מהקצה העליון). */
  margin: auto;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  gap: clamp(12px, 2.5svh, 24px);
}
.opening-environment .stamp {
  border: 0;
  border-right: 2px solid var(--cc-gold);
  border-radius: 0;
  padding: 0 12px 0 0;
  transform: none;
  color: #d5b77b;
  font-family: inherit;
  font-size: 0.875rem;
}
.opening-environment .title-xl {
  font-size: 4.5rem;
  font-size: clamp(2.75rem, 7.5svh, 4.5rem);
  line-height: 1.12;
  color: #f9eedc;
  letter-spacing: 0;
}
.opening-environment .lede {
  font-size: 1.125rem;
  font-size: clamp(1rem, 1.9svh, 1.125rem);
  line-height: 1.85;
  color: #ded8cd;
  text-wrap: pretty;
}
@media (max-height: 800px) {
  .opening-environment .lede { line-height: 1.6; }
}
.intro-subtitle {
  margin: -8px 0 0;
  font-size: 1.5rem;
  font-size: clamp(1.25rem, 2.6svh, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: #f9eedc;
}
.intro-copy { display: grid; gap: 12px; gap: clamp(6px, 1.3svh, 12px); }
.opening-environment .btn {
  margin-top: 8px;
  margin-top: clamp(0px, 0.8svh, 8px);
  min-height: 52px;
  min-height: clamp(44px, 5.5svh, 52px);
  padding: 14px 28px;
  padding: clamp(10px, 1.5svh, 14px) 28px;
  border: 1px solid #dfc38d;
  border-radius: 4px;
  background: #cfad6c;
  color: #17130c;
}
.opening-environment .heading {
  font-size: 2.75rem;
  font-size: clamp(2rem, 5svh, 2.75rem);
  line-height: 1.2;
  color: #f9eedc;
}
.stage:has(:is(.opening-environment > section, #screen-case[data-case]):not([hidden])) .music-toggle {
  top: max(24px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  right: auto;
}

/* חלון רחב: התמונה בגובה המסך בלבד (לא נמתחת לרוחב), והצד השמאלי נשאר שחור. תמונת השער רחבה
   מ-2:1, ולכן עד שהחלון רחב ממנה היא עדיין מכסה את כל הרוחב. */
@media (min-aspect-ratio: 2/1) and (min-width: 901px) {
  .opening-background {
    width: min(100%, calc(100svh * var(--scene-w) / var(--scene-h)));
  }
  .opening-environment > .cover {
    --scene-width: calc(100svh * var(--scene-w) / var(--scene-h));
  }
}
/* בתמונת השער הקצה השמאלי לא שחור (פס האור האדום), אז כשהחלון רחב ממנה הקצה נמוג לשחור. */
@media (min-aspect-ratio: 7/3) and (min-width: 901px) {
  .stage:has(#screen-gate:not([hidden])) > .opening-background {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%);
    mask-image: linear-gradient(to right, transparent, #000 12%);
  }
}

/* Keep the complete original image above the copy on portrait/narrow screens.
   Capped at 42vh so a wide-but-squarish window (e.g. 1024x768) doesn't blow up
   the top padding past what the viewport can actually fit.
   Defined on .stage so both the background and the opening screens (siblings) see it. */
@media (max-width: 900px), (max-aspect-ratio: 3/2) {
  .stage {
    --stack-img-h: min(calc(100vw * var(--scene-h) / var(--scene-w)), 42vh);
  }
  .opening-environment > .cover {
    justify-content: flex-start;
    padding: calc(var(--stack-img-h) + clamp(12px, 3svh, 32px)) 24px clamp(12px, 3svh, 40px);
  }
  .opening-background {
    height: var(--stack-img-h);
    background-position: center top;
  }
  .intro-content {
    width: min(100%, 440px);
    max-width: none;
    margin-inline: auto;
    margin-block: 0;
    gap: clamp(10px, 2.2svh, 20px);
  }
  .opening-environment .title-xl { font-size: clamp(2.25rem, 6svh, 3.25rem); }
  .opening-environment .heading { font-size: clamp(1.875rem, 4.5svh, 2.25rem); }
  .opening-environment .lede { font-size: clamp(0.95rem, 2.1svh, 1.0625rem); }
  .stage:has(:is(.opening-environment > section, #screen-case[data-case]):not([hidden])) .music-toggle { top: 16px; left: 16px; }
}
@media (max-width: 380px) {
  .opening-environment > .cover { padding-inline: 20px; }
  .intro-content { gap: clamp(8px, 2svh, 16px); }
  .opening-environment .title-xl { font-size: clamp(2.25rem, 5.5svh, 2.75rem); }
  .opening-environment .btn { width: 100%; padding-inline: 16px; }
}

/* Fit the ending screen (score + lead form) in the viewport without scrolling. */
@media (max-height: 1060px) {
  .stage:has(#screen-ending:not([hidden])) { padding: 44px clamp(16px, 4vw, 40px) 16px; margin: 12px auto 16px; }
  .ending { gap: 8px; }
  .coupon-form { gap: 0.5rem; }
  .field { gap: 0.15rem; }
  .field input[type='text'],
  .field input[type='email'],
  .field input[type='tel'] { padding: 0.45rem 0.7rem; }
  .consent { font-size: 0.78rem; }
  .btn { padding: 0.6rem 1.6rem; }
  body:has(#screen-ending:not([hidden])) footer.credit { margin: 0 auto 12px; }
}
@media (max-height: 820px) {
  .ending .lede { line-height: 1.4; }
}

/* Genuinely short viewports (browser chrome eating a laptop's height, small phones
   in landscape, etc.) need the same squeeze regardless of width — the width-gated
   rules above only fire together with a narrow viewport. Narrow widths also wrap
   option text onto more lines, so this has to reach fairly tall/narrow phones too. */
@media (max-height: 950px) {
  .stage:has(#screen-ending:not([hidden])) { padding: 18px clamp(16px, 4vw, 40px) 4px; margin: 2px auto 4px; }
  #ending-heading { font-size: 1.3rem; }
  .ending .eyebrow { margin-bottom: 0; }
  .ending { gap: 4px; }
  .coupon-form { gap: 0.22rem; }
  .field { gap: 0.1rem; }
  .field label { font-size: 0.76rem; }
  .field input[type='text'],
  .field input[type='email'],
  .field input[type='tel'] { padding: 0.35rem 0.6rem; }
  body:has(#screen-ending:not([hidden])) footer.credit { margin: 0 auto 4px; font-size: 0.8rem; line-height: 1.35; }
}

/* =====================================================================
   מסך התיק — סצנה בנויה מתמונות, לפי "תמונות/ככה זה צריך להראות.png".
   החלקים ב-assets/ui (מוכנים ע"י tools/prepare_ui_assets.py). כל האחוזים/היחסים
   למטה נמדדו על התמונות החתוכות — אם מחליפים תמונה, מריצים שוב את הסקריפט ומעדכנים.
   ===================================================================== */
@font-face {
  font-family: 'DSEG7 Classic';
  src: url('assets/fonts/DSEG7Classic-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

#screen-case[data-case] { display: block; }
.case-hud img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- ארונית המגירות (מד ההתקדמות): 6 מצבים אחד על השני, רק המצב הנוכחי גלוי.
   במעבר בין תיקים המצב היוצא והנכנס מתמזגים (cross-dissolve): plus-lighter מחבר את שתי השכבות
   כך שסכום השקיפויות תמיד 1 — הארונית נשארת אטומה לכל אורך המיזוג ולא מהבהבת דרכה הרקע,
   והמגירה שנסגרת (שבולטת מחוץ לגוף הארונית) נמוגה בהדרגה. isolation מגביל את החיבור לארונית בלבד. --- */
.cabinet {
  position: relative;
  aspect-ratio: 926 / 1530;
  container-type: inline-size;
  isolation: isolate;
}
.cabinet__state {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: plus-lighter;
  transition: opacity 0.9s ease-in-out;
}
.case-hud .cabinet__state img { height: 100%; }
.cabinet[data-open='0'] .cabinet__state[data-state='0'],
.cabinet[data-open='1'] .cabinet__state[data-state='1'],
.cabinet[data-open='2'] .cabinet__state[data-state='2'],
.cabinet[data-open='3'] .cabinet__state[data-state='3'],
.cabinet[data-open='4'] .cabinet__state[data-state='4'],
.cabinet[data-open='5'] .cabinet__state[data-state='5'] { opacity: 1; }
.cabinet__labels {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* הסכום (0/5 ₪) בלבן, בלי רקע, ממורכז בתוך מסגרת הפליז של המגירה (left/top מ-LABEL_SLOTS ב-script.js) */
.cabinet__label {
  position: absolute;
  width: 17.49%;
  height: 5.36%;
  padding: 1.25% 1.7% 1.05%;
  display: grid;
  place-items: center;
  /* סדר עברי: קודם המספר (מימין) ואחריו ₪ (משמאל) — כמו בשאר הטקסטים במשחק */
  direction: rtl;
  white-space: nowrap;
  font: 800 max(4.3cqw, 6.5px)/1 'Heebo', 'Segoe UI', Tahoma, sans-serif;
  color: #fff;
}
/* תווית שנוספה עכשיו (אחרי המשוב) נכנסת בהדרגה; תוויות של מצב נכנס מתמזגות יחד עם השכבה שלהן */
.cabinet__label.is-new { animation: label-in 0.4s ease both; }
@keyframes label-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- ספרות LED אדומות (טיימר) --- */
.timer {
  position: relative;
  container-type: inline-size;
}
.timer__screen {
  position: absolute;
  /* המסך השחור שבתוך לוח הטיימר; הנקודתיים צרובות בתמונה בדיוק באמצע */
  left: 12.99%;
  right: 13.89%;
  top: 23.06%;
  bottom: 15.82%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 9%;
  align-items: center;
  padding-inline: 4%;
}
.timer__digits {
  position: relative;
  isolation: isolate;
  font: italic 700 12cqw/1 'DSEG7 Classic', Consolas, monospace;
  color: #ff2b2b;
  text-align: center;
  text-shadow: 0 0 0.08em rgba(255, 50, 50, 0.9), 0 0 0.35em rgba(255, 0, 0, 0.5);
}
.timer__digits::before {
  content: '88';
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(255, 40, 40, 0.07);
  text-shadow: none;
}
/* 10 השניות האחרונות: הספרות פועמות — אותו משך ואותן נקודות keyframes כמו תאורת האזעקה
   (pulse-light) ומסגרת הדף (frame-alarm), כולן מתחילות יחד עם data-urgent. */
#timer[data-urgent='true'] .timer__digits { animation: pulse 1.2s infinite; }
@keyframes pulse {
  0%, 18%, 100% { transform: scale(1); filter: brightness(1); }
  9% { transform: scale(1.12); filter: brightness(1.45); }
  55% { transform: scale(1.16); filter: brightness(1.6); }
  73% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  #timer[data-urgent='true'] .timer__digits { animation: none; filter: brightness(1.4); }
}

/* --- צג הקופה --- */
.cash-box {
  position: relative;
  container-type: inline-size;
}
.cash-box__screen {
  position: absolute;
  /* המסך הריק שמימין ל"הקופה שלך" (תמונות/הקופה שלך.png, נמדד ב-tools/prepare_ui_assets.py) */
  left: 54.68%;
  right: 10.34%;
  top: 42.57%;
  bottom: 28.25%;
  margin: 0;
  display: grid;
  place-items: center;
}
.cash-box__amount {
  font: 800 7.2cqw/1 'Heebo', 'Segoe UI', Tahoma, sans-serif;
  color: #ff3b30;
  white-space: nowrap;
  text-shadow: 0 0 0.06em #ff6b5e, 0 0 0.3em rgba(255, 30, 30, 0.75);
}
.cash-box.is-bump .cash-box__amount { animation: cash-bump 0.55s ease; }
@keyframes cash-bump {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.3); filter: brightness(1.6); }
}

/* --- ערימת הדפים: 9-slice כדי שהמהדק, התווית והסיכה לא יימתחו והדף יגדל לגובה הטקסט.
   cqw = אחוז מרוחב .case-file. מידות המקור (1234x1151): חיתוך 260/90/80/130,
   ריפוד תוכן 150/110/95/140, תווית 145–425 x 85–230, הסיכה ב-585–660. --- */
.case-file { container-type: inline-size; }
.evidence {
  position: relative;
  isolation: isolate;
  padding: 12.16cqw 8.91cqw 7.7cqw 11.35cqw;
  color: #2b1e11;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  /* הוגדל לבקשת הלקוחה (היה 2.85cqw) — בדסקטופ הדף עדיין נכנס בגובה בלי ש-fitCase יקטין אותו,
     חוץ מתיק 03 בחלונות נמוכים (הקטנה של כ-5%). */
  font-size: clamp(14px, 3.8cqw, 26px);
}
.evidence::before,
.evidence::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 0 solid transparent;
  border-image: url('assets/ui/case-paper.webp') 260 90 80 130 fill / 21.07cqw 7.29cqw 6.48cqw 10.53cqw stretch;
}
/* עותק של הדף מתחת לדף, עם זוהר שעוקב אחרי צורת הנייר: מהבהב אדום ב-10 השניות האחרונות,
   ואחרי תשובה נשאר סטטי — ירוק לנכונה, אדום לשגויה / זמן שאזל. */
.evidence::after {
  z-index: -2;
  opacity: 0;
  filter: drop-shadow(0 0 0.3cqw #ff2a2a) drop-shadow(0 0 2cqw rgba(255, 30, 30, 0.8));
}
#screen-case:has(#timer[data-urgent='true']) .evidence::after { animation: frame-alarm 1.2s infinite; }
@keyframes frame-alarm {
  0%, 18%, 100% { opacity: 0.35; }
  9% { opacity: 0.9; }
  55% { opacity: 1; }
  73% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-case:has(#timer[data-urgent='true']) .evidence::after { animation: none; opacity: 0.8; }
}
#screen-case:has(#answer-feedback:not([hidden])[data-result='incorrect']) .evidence::after {
  animation: none;
  opacity: 1;
}
#screen-case:has(#answer-feedback:not([hidden])[data-result='correct']) .evidence::after {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 0.3cqw #35d765) drop-shadow(0 0 2cqw rgba(40, 210, 90, 0.8));
}

.evidence__tag {
  position: absolute;
  left: 11.75cqw;
  top: 6.89cqw;
  width: 22.69cqw;
  height: 11.75cqw;
  display: grid;
  place-items: center;
  font: 800 4.6cqw/1 'Heebo', 'Segoe UI', Tahoma, sans-serif;
  color: #2b1e11;
  white-space: nowrap;
}
/* הכותרת בראש הדף, מימין לתווית "תיק 01" (הטקסט מיושר לימין, כך שהסיכה נשארת פנויה) */
.evidence__head { margin-left: 35cqw; min-height: 9cqw; }
.evidence .eyebrow { margin: 0 0 0.15em; font-size: 0.8em; color: #8c2b20; }
.evidence .heading { font-size: 1.75em; line-height: 1.1; color: #22170c; }
.evidence p { margin: 0; line-height: 1.5; }
.evidence-area, .question-area { display: grid; gap: 0.6em; }
/* פסקאות הראיה והשאלה: שבירות השורה של הנוסח נשמרות, ורווח קטן בין פסקה לפסקה. */
.case-narrative { display: grid; gap: 0.35em; }
.case-narrative p, .evidence .question { white-space: pre-line; }
.evidence .question { font-weight: 800; font-size: 1.12em; }

/* --- אפשרויות: מלבנים שחורים עם עיגול בחירה (לחיצה = התשובה, בלי כפתור אישור) --- */
.options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45em;
}
.option {
  width: 100%;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.45em 0.95em;
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
  text-align: start;
  color: #efe6d4;
  background: linear-gradient(#211d1a, #0e0c0a);
  border: 1px solid rgba(255, 236, 200, 0.14);
  border-radius: 0.3em;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.option__radio {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 2px solid rgba(239, 230, 212, 0.75);
  display: grid;
  place-items: center;
}
.option__radio::after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.15s;
}
.option:hover:not(:disabled) { border-color: rgba(207, 173, 108, 0.85); }
.option:hover:not(:disabled) .option__radio { border-color: #cfad6c; }
.option:disabled { cursor: default; }
.option:disabled:not(.is-correct, .is-incorrect) { opacity: 0.65; }
.option.is-correct { border-color: #3fcf6a; box-shadow: 0 0 0 1px #3fcf6a, 0 0 0.8em rgba(63, 207, 106, 0.35); }
.option.is-incorrect { border-color: #ff4a4a; box-shadow: 0 0 0 1px #ff4a4a, 0 0 0.8em rgba(255, 74, 74, 0.35); }
.option.is-correct .option__radio { border-color: #3fcf6a; color: #3fcf6a; }
.option.is-incorrect .option__radio { border-color: #ff4a4a; color: #ff4a4a; }
.option:is(.is-correct, .is-incorrect) .option__radio::after { transform: scale(1); }

/* --- משוב (טקסט מחייב) בסגנון חותמת דיו על הדף --- */
.feedback-area { min-height: 2.4em; display: grid; place-items: center; }
.answer-feedback {
  margin: 0;
  padding: 0.25em 0.8em;
  border: 2px solid currentColor;
  border-radius: 0.25em;
  font-weight: 800;
  text-align: center;
  color: #a3272c;
  transform: rotate(-1.5deg);
}
.answer-feedback[data-result='correct'] { color: #1d6b34; }

/* חותמת "פוענח" — תשובה נכונה בלבד */
.stamp-solved {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 56%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(-10deg);
}
.stamp-solved.is-stamped { animation: stamp-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes stamp-in {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(2.4); }
  60% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-9deg) scale(0.94); }
  100% { opacity: 0.9; transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-solved.is-stamped { animation: none; }
}

/* --- פריסת דסקטופ: מסגרת עיצוב של 200u x 100u (כמו תמונת היעד), מוצמדת לימין ולמעלה.
   u = 1% מגובה החלון, או חצי אחוז מהרוחב כשהחלון צר מ-2:1 (ואז הסצנה מתכווצת ונשאר פס כהה למטה).
   הרקע תופס 177.8u מימין; מסגרת הלוח מתחילה בערך ב-107u מקצה המסגרת השמאלי. --- */
/* מסך התיק ננעל לגובה מסך אחד — אין גלילה בכלל (בכל הגדלים). אם הדף לא נכנס,
   fitCase ב-script.js מקטין אותו (בפריסה צרה: יחד עם שורת ה-HUD). */
:root:has(#screen-case[data-case]:not([hidden])) {
  overflow: hidden;
  overscroll-behavior: none;
}
.stage:has(#screen-case[data-case]:not([hidden])) {
  --u: min(1svh, 0.5vw);
  --frame-left: calc(100% - 200 * var(--u));
  /* הארונית מתחילה 27px מתחת לראש המסך (הפינה השמאלית העליונה שלה היא שורות 1–5 מתוך 1190
     בתמונה). הגובה מחושב כך שהפינה הימנית התחתונה (94% מגובה התמונה, בכל 6 המצבים) הייתה נוגעת
     בתחתית המסך בלי ההזזה, ולכן 27px מתחתית מגירה 05 נחתכים; הבסיס והרגליים שמתחתיה נחתכים
     (clip-path למטה). הארונית נמתחת
     לגובה (יחס רוחב/גובה 0.483) וצד הארון נחתך מחוץ למסך, כך שחזיתות המגירות מתחילות
     ממש בקצה. תוויות הסכום ממוקמות באחוזים ונמתחות יחד עם התמונה. */
  /* הרוחב לפי גובה הסצנה (כדי שהארונית לא תגיע לדף השאלה); הגובה נמתח עד תחתית המסך עצמו —
     בחלון צר מ-2:1 זה יותר מתחתית הסצנה, כך שהפינה נוגעת בסוף הדף גם שם. */
  --cabinet-w: calc(100 * var(--u) / 0.94 * 0.483);
  /* הקופה צמודה לפינה השמאלית העליונה, מעל ראש הארונית, ורחבה בדיוק כמו גוף הארונית שעל המסך:
     הגוף נגמר בעמודה 656 מתוך 720 (0.911), ו-0.16 ממנו נחתכים מחוץ לקצה → 0.75 מרוחב התמונה. */
  --cash-w: calc(var(--cabinet-w) * 0.75);
  --cabinet-h: calc(100vh / 0.94);
  --cabinet-h: calc(100svh / 0.94);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.stage:has(#screen-case[data-case]:not([hidden])) > .opening-background {
  left: auto;
  right: 0;
  width: calc(177.8 * var(--u));
  height: calc(100 * var(--u));
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, #000 86%, transparent);
}
.case-hud { display: contents; }
.stage:has(#screen-case[data-case]:not([hidden])) .cash-box {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: var(--cash-w);
  /* מוטה כמו הקו העליון של מגירה 01 בארונית (שיפוע 0.145 בתמונה = 8.2°). הארונית נמתחת לגובה
     על המסך, ולכן הזווית מחושבת מהמידות שלה בפועל: 0.145 × 720/1190 × גובה/רוחב (בערך 10°–13°).
     הציר בפינה הימנית התחתונה, כך שהקצה התחתון של הקופה מקביל לראש המגירה. */
  transform-origin: 100% 100%;
  rotate: 10deg;
  rotate: atan2(calc(var(--cabinet-h) * 0.0877), var(--cabinet-w));
}
.stage:has(#screen-case[data-case]:not([hidden])) .cabinet {
  position: absolute;
  left: calc(var(--cabinet-w) * -0.16);
  top: 27px;
  width: var(--cabinet-w);
  height: var(--cabinet-h);
  aspect-ratio: auto;
  clip-path: inset(0 0 6% 0);
}
.stage:has(#screen-case[data-case]:not([hidden])) .timer {
  position: absolute;
  right: calc(4 * var(--u));
  top: calc(1.5 * var(--u));
  width: calc(34 * var(--u));
}
/* הדף ממורכז מתחת לאלומת האור שברקע (עמודה 258 מתוך 1672 בתמונה = 49.6u מקצה המסגרת),
   אבל לא עולה על הארונית: בחלון שאינו רחב מ-2:1 הוא נעצר 3u מימין לקצה הארונית (0.84 מרוחבה). */
#investigation-board:has(#screen-case[data-case]:not([hidden])) {
  width: calc(58 * var(--u));
  margin: calc(12 * var(--u)) auto 0 max(calc(var(--frame-left) + 20.6 * var(--u)), calc(var(--cabinet-w) * 0.84 + 3 * var(--u)));
}
.case-file,
#investigation-board { transform-origin: top center; }
/* כפתור ההשתקה למטה, מימין לארונית (שמגיעה עד תחתית המסך) — גם מימין למגירה 05 כשהיא פתוחה */
.stage:has(#screen-case[data-case]:not([hidden])) .music-toggle {
  top: auto;
  bottom: max(16px, calc(3 * var(--u)));
  left: calc(var(--cabinet-w) * 0.84 + 2 * var(--u));
  right: auto;
}

/* --- פריסה צרה (טלפון / טאבלט / חלון כמעט ריבועי): הרקע מעומעם על כל המסך,
   שורת HUD — ארונית משמאל, טיימר וקופה לידה — ומתחתיה ערימת הדפים. --- */
@media (max-width: 1100px), (max-aspect-ratio: 3/2) {
  .stage:has(#screen-case[data-case]:not([hidden])) > .opening-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 70% center;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.4;
  }
  #investigation-board:has(#screen-case[data-case]:not([hidden])) {
    width: min(540px, calc(100% - 16px));
    margin: max(10px, env(safe-area-inset-top)) auto 0;
  }
  .case-hud {
    display: grid;
    direction: ltr;
    grid-template-columns: 30% 1fr;
    column-gap: 4%;
    row-gap: 4px;
    align-items: center;
    margin-bottom: 8px;
  }
  .stage:has(#screen-case[data-case]:not([hidden])) :is(.cash-box, .cabinet, .timer) {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
  }
  .stage:has(#screen-case[data-case]:not([hidden])) .cabinet {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: auto;
    aspect-ratio: 926 / 1530;
    clip-path: none;
  }
  .stage:has(#screen-case[data-case]:not([hidden])) .timer { grid-column: 2; grid-row: 1; }
  .stage:has(#screen-case[data-case]:not([hidden])) .cash-box { grid-column: 2; grid-row: 2; rotate: none; }
  .evidence { font-size: clamp(14px, 3.7cqw, 17px); }
  /* פינה שמאלית תחתונה, בשוליים של ערימת הדפים — לא על מלבני התשובות */
  .stage:has(#screen-case[data-case]:not([hidden])) .music-toggle {
    position: fixed;
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 6px;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.95rem;
  }
}