.case-shell{background:#080B10;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:18px;}
.case-header{padding:16px 20px;background:#0E141F;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.case-header .case-file-tag{font-family:var(--mono);font-size:11.5px;color:var(--teal);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(79,209,197,.4);background:rgba(79,209,197,.08);padding:4px 10px;border-radius:5px;}
.case-body{padding:22px 22px 24px;}
.case-brief{font-size:14.5px;color:var(--text-muted);margin:0 0 20px;max-width:680px;}
.case-q{font-size:14.5px;font-weight:600;margin-bottom:14px;}
.case-options{display:flex;flex-direction:column;gap:8px;}
.case-opt{text-align:left;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);padding:11px 14px;border-radius:8px;font-size:13.5px;cursor:pointer;font-family:var(--sans);transition:all .15s ease;}
.case-opt:hover{border-color:var(--amber);}
.case-opt.best{background:rgba(79,209,197,.12);border-color:var(--teal);}
.case-opt.partial{background:rgba(232,163,61,.12);border-color:var(--amber);}
.case-opt.weak{background:rgba(240,84,107,.12);border-color:var(--danger);}
.case-feedback{margin-top:8px;font-size:13px;color:var(--text-muted);display:none;padding-left:2px;}
.case-feedback.show{display:block;}
.case-resolution{margin-top:18px;padding:14px 16px;border-radius:8px;border:1px solid var(--teal);background:rgba(79,209,197,.08);font-size:13.5px;color:var(--text);display:none;}
.case-resolution.show{display:block;}
.case-resolution b{color:var(--teal);}

/* ============================================================================
   "BEST" CHOICE - rainbow band rises through the page background. Same
   self-contained pattern as vocab.js/quiz.js's copies.
   ============================================================================ */
.scenario-rainbow-overlay{
  position:fixed; left:0; right:0; top:-50%; height:200%;
  z-index:2400; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,90,90,.55) 12%,
    rgba(255,175,80,.55) 24%,
    rgba(255,235,90,.5) 36%,
    rgba(120,230,140,.5) 48%,
    rgba(90,190,255,.5) 60%,
    rgba(160,120,255,.5) 72%,
    rgba(255,120,220,.5) 84%,
    transparent 100%);
  mix-blend-mode:screen;
  transform:translateY(55%);
}
.scenario-rainbow-overlay.rise{
  animation:scenarioRainbowRise 1.15s cubic-bezier(.22,.7,.3,1);
}
@keyframes scenarioRainbowRise{
  0%{ opacity:0; transform:translateY(55%); }
  10%{ opacity:1; }
  75%{ opacity:.9; }
  100%{ opacity:0; transform:translateY(-55%); }
}

/* ============================================================================
   "WEAK" CHOICE - full-screen flash + whole-page tremble.
   ============================================================================ */
.scenario-wrong-overlay{
  position:fixed; inset:0; z-index:2500; background:rgba(240,84,107,.4);
  opacity:0; pointer-events:none;
}
.scenario-wrong-overlay.flash{ animation:scenarioWrongFlashKf .45s ease-out; }
@keyframes scenarioWrongFlashKf{
  0%{ opacity:0; }
  15%{ opacity:1; }
  100%{ opacity:0; }
}

@keyframes scenarioTremble{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,2px); }
  40%{ transform:translate(5px,-3px); }
  60%{ transform:translate(-4px,3px); }
  80%{ transform:translate(4px,-2px); }
}
body.scenario-tremble{ animation:scenarioTremble .4s ease; }