/* ==========================================================================
   KALAYAN · GAME OVER — escape game page.
   Extends quiz-room.css (shared component system). Signature colour = violet.
   ========================================================================== */
:root{ --gold:var(--violet); }        /* Game Over wayfinding colour */

/* hero image background (no video) */
.qhero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;border:0;display:block}
.qhero__scrim{background:
  linear-gradient(90deg,rgba(11,10,16,.94) 0%,rgba(11,10,16,.78) 42%,rgba(11,10,16,.5) 74%,rgba(11,10,16,.6) 100%),
  linear-gradient(0deg,rgba(11,10,16,.9) 0%,transparent 48%),
  radial-gradient(60% 45% at 82% 8%,rgba(112,12,206,.34),transparent 60%)}

/* ---- LES 3 SALLES (scénarios) ---- */
.scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.scenario{--c:var(--violet);position:relative;display:flex;flex-direction:column;border-radius:var(--r-ui);overflow:hidden;
  background:var(--ink-3);box-shadow:0 0 0 1px var(--line);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.scenario:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(0,0,0,.78),0 0 0 1px color-mix(in srgb,var(--c) 48%,transparent)}
.scenario__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.scenario__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.scenario:hover .scenario__media img{transform:scale(1.07)}
.scenario__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(11,10,16,.8))}
.scenario__media--emblem{display:grid;place-items:center;
  background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--c) 34%,var(--ink-3)),var(--ink-2))}
.scenario__media--emblem svg{width:38%;height:38%;color:var(--c);opacity:.92;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--c) 65%,transparent))}
.scenario__diff{position:absolute;top:.9rem;left:.9rem;z-index:2;display:inline-flex;align-items:center;gap:.5em;
  padding:.42em .8em;border-radius:var(--r-pill);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:rgba(11,10,16,.62);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent)}
.scenario__diff .dots{display:inline-flex;gap:3px}
.scenario__diff .dots i{width:6px;height:6px;border-radius:50%;background:var(--c);opacity:.3}
.scenario__diff .dots i.on{opacity:1;box-shadow:0 0 8px -1px var(--c)}
.scenario__body{padding:1.3rem 1.4rem 1.5rem;position:relative;z-index:1}
.scenario__n{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.9rem;color:var(--c)}
.scenario h3{font-weight:800;font-size:1.32rem;letter-spacing:-.01em;line-height:1.05;margin:.25rem 0 .5rem}
.scenario p{color:var(--muted);font-size:.94rem}
.scenario__tag{display:block;margin-top:.8rem;font-size:.82rem;color:var(--cream);font-family:"Fredoka",sans-serif;font-style:italic}
.scenario::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c);z-index:3;
  box-shadow:0 0 16px 0 var(--c)}

@media (max-width:820px){.scenarios{grid-template-columns:1fr;gap:1rem}}