/* Misdirection (magic) lesson. All rules scoped under .mdr-* */

/* ---------- the stage: a 380x400 board, everything placed in px, scaled by JS to fill the scene ---------- */
.mdr-fit { position: relative; flex: none; width: 380px; height: 400px; margin: auto; }
.mdr-stage { position: absolute; left: 0; top: 0; width: 380px; height: 400px; transform-origin: 0 0; border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #2A2150 0%, #120F24 70%); }
.mdr-mag { position: absolute; left: 70px; top: -6px; width: 240px; transition: opacity .25s; }
.mdr-mag2 { opacity: 0; }
.mdr-looking .mdr-mag2 { opacity: 1; }
.mdr-looking .mdr-mag:not(.mdr-mag2) { opacity: 0; }
.mdr-hand { position: absolute; z-index: 2; width: 120px; height: 129px; transform-origin: 50% 70%; cursor: pointer; }
.mdr-hand img { position: absolute; left: 0; bottom: 0; width: 120px; transition: opacity .12s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.mdr-hand .mdr-fs { opacity: 0; }
.mdr-shut .mdr-op { opacity: 0; }
.mdr-shut .mdr-fs { opacity: 1; }
.mdr-hl { left: 14px; top: 150px; }
.mdr-hr { left: 246px; top: 152px; }
.mdr-picked img { filter: drop-shadow(0 0 6px var(--violet-bright)) drop-shadow(0 0 2px var(--violet-bright)); }
.mdr-right img { filter: drop-shadow(0 0 7px var(--mint)) drop-shadow(0 0 2px var(--mint)); }
.mdr-wrong img { filter: drop-shadow(0 0 7px var(--red)) drop-shadow(0 0 2px var(--red)); }
.mdr-coin { position: absolute; z-index: 1; left: 54px; top: 201px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF1C4, #FCC050 45%, #B67E15 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); }
.mdr-hl:not(.mdr-shut) ~ .mdr-coin { z-index: 3; }
.mdr-out .mdr-coin { opacity: 0; }
.mdr-gone .mdr-coin { visibility: hidden; }
.mdr-table { position: absolute; z-index: 4; left: -10px; right: -10px; top: 300px; bottom: 0; border-radius: 44px 44px 0 0; background: linear-gradient(#3B2C6B, #241B45 30%, #1A1433); box-shadow: inset 0 3px 0 rgba(169, 155, 255, .35); }
.mdr-spark { position: absolute; z-index: 5; left: 286px; top: 0; width: 96px; height: 96px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 241, 196, .95) 0%, rgba(252, 192, 80, .6) 30%, rgba(252, 192, 80, 0) 70%); }
.mdr-pop { animation: mdr-pop .5s ease-out; }
@keyframes mdr-pop { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6); } }
.mdr-frozen .mdr-hand { cursor: default; }
.mdr-aud { position: absolute; z-index: 6; left: 110px; top: 334px; width: 160px; height: 48px; border-radius: 24px; border: 2px solid var(--line-strong); background: rgba(10, 14, 26, .6); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.mdr-aud.mdr-wrong { border-color: var(--red); }

/* eye-tracker dots */
.mdr-gaze { position: absolute; z-index: 6; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(169, 155, 255, .55); border: 2px solid var(--violet-bright); }
.mdr-near { background: rgba(252, 192, 80, .5); border-color: var(--gold); box-shadow: 0 0 0 7px rgba(252, 192, 80, .2); }

/* ---------- twenty viewers ---------- */
.mdr-crowd { width: 100%; max-width: 300px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mdr-face { position: relative; aspect-ratio: 1; max-height: 54px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; transition: border-color .25s, opacity .25s; opacity: .45; }
.mdr-face img { width: 92%; }
.mdr-saw { opacity: 1; border-color: var(--gold); }
.mdr-key { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--dim); }
.mdr-key span { display: inline-flex; align-items: center; gap: 6px; }
.mdr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(252, 192, 80, .3); }
.mdr-dot.mdr-no { border-color: var(--line-strong); background: transparent; }

@media (max-height: 700px) {
  .mdr-face { max-height: 44px; }
  .mdr-crowd { max-width: 260px; }
}