.escape-room-vignette{position:relative;isolation:isolate;aspect-ratio:3/2;width:100%;overflow:hidden;border:1px solid #bba37e;border-radius:1rem;background:#16232e;box-shadow:0 .5rem 1.5rem #1b293522;margin:1rem 0 1.2rem;perspective:900px}
.vignette-background{display:block;width:100%;height:100%;object-fit:cover}
.vignette-door{position:absolute;left:29%;top:12%;width:42%;height:79%;perspective:700px;clip-path:inset(0 round 48% 48% 0 0 / 22% 22% 0 0)}
.vignette-door-leaf{position:absolute;top:0;height:100%;width:50%;background-image:url('/assets/escape/realistic/door-leaves.webp');background-size:200% 100%;background-repeat:no-repeat;backface-visibility:visible;transition:transform 3.8s cubic-bezier(.22,.55,.25,1) .5s,filter 3.8s .5s}
.leaf-left{left:0;background-position:left center;transform-origin:left center}.leaf-right{right:0;background-position:right center;transform-origin:right center}
.escape-room-vignette.is-solved .leaf-left{transform:rotateY(-100deg);filter:brightness(.65)}.escape-room-vignette.is-solved .leaf-right{transform:rotateY(100deg);filter:brightness(.65)}
.vignette-sockets{position:absolute;z-index:2;left:12%;right:12%;top:45%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;transition:opacity .8s .25s,transform 1s .25s}
.vignette-socket{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:4.4rem;padding:.35rem .15rem;border:2px solid #c0a578;border-radius:.8rem;color:#fff5db;background:#1a2633e8;box-shadow:0 3px 8px #0007;font:inherit;cursor:pointer;text-shadow:0 1px 3px #000}
.vignette-socket.is-active{outline:3px solid #f0d38e;outline-offset:3px;background:#365451f5}.vignette-socket.is-filled{border-color:#f2d28d}.socket-value{font-size:1.05rem;font-weight:850}.socket-symbol{font-size:1.2rem;line-height:1.1;min-height:1.3rem;margin-top:.15rem;color:#ffe7a3}
.vignette-socket:focus-visible{outline:3px solid #fff;outline-offset:3px}
.escape-room-vignette.is-solved .vignette-sockets{opacity:0;transform:translateY(-.5rem);pointer-events:none}
.escape-symbol-guide{margin:.2rem 0!important;font-size:.95rem}.escape-selection:empty{display:none}
.vignette-book{position:absolute;left:17%;top:40%;width:66%;height:51%;perspective:800px;filter:drop-shadow(0 8px 7px #0008)}
.vignette-book-pages{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transform:scaleX(.1);transform-origin:50% center;transition:opacity .9s .6s,transform 2.4s .5s}
.vignette-book-cover{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 3.6s cubic-bezier(.22,.55,.25,1) .35s,opacity .8s 2.9s}
.vignette-book-cover>img{width:100%;height:100%;object-fit:fill;backface-visibility:hidden}.vignette-book-equation{position:absolute;top:35%;left:10%;right:10%;text-align:center;font-size:clamp(.75rem,2vw,1.3rem);font-weight:850;background:#ffedb8eb;color:#3d2a16;padding:.25rem;border-radius:.3rem;backface-visibility:hidden}
.vignette-book-equation:empty{display:none}.escape-room-vignette.is-solved .vignette-book-cover{transform:rotateY(-175deg);opacity:0}.escape-room-vignette.is-solved .vignette-book-pages{opacity:1;transform:scaleX(1)}
.vignette-rays{position:absolute;inset:0;overflow:hidden;pointer-events:none}.vignette-ray{position:absolute;left:7%;width:86%;height:2px;top:var(--ray-y);transform:rotate(var(--ray-angle));transform-origin:center;opacity:.85;background:#fff7bb;box-shadow:0 0 5px 2px #fff3a8,0 0 16px 4px #edb4508a;transition:opacity .5s,transform 2.2s ease}
.vignette-ray.is-selected{opacity:.25}.escape-room-vignette.is-solved .vignette-ray{opacity:0;transform:rotate(var(--ray-angle)) scaleX(.02);transition:opacity 2s .35s,transform 2.4s .35s}
.vignette-gate-marks{position:absolute;left:31%;right:31%;top:47%;display:flex;justify-content:space-around;gap:.3rem;color:#ffe7a0;text-shadow:0 0 5px #f8c258,0 2px 5px #000;font-size:clamp(1.2rem,3vw,2rem);transition:opacity 1s .5s}
.vignette-gate-mark{opacity:.35;transition:opacity .3s}.vignette-gate-mark.is-filled{opacity:1}.escape-room-vignette.is-solved .vignette-gate-marks{opacity:0}
.vignette-reward{position:absolute;z-index:3;left:50%;top:52%;width:24%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('/assets/escape/realistic/code-shard.webp') center/contain no-repeat;color:#493014;font-size:clamp(1.2rem,3vw,2rem);text-shadow:0 1px #fff5;opacity:0;transform:translate(-50%,-35%) scale(.35);transition:opacity 1.2s 2s,transform 1.7s 2s;filter:drop-shadow(0 0 14px #ffe4a3b0)}
.reward-symbol{line-height:1}.reward-value{line-height:1.2}.escape-room-vignette.is-solved .vignette-reward{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vignette-celebration-dust{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 20% 24%,#ffedac 0 1px,transparent 2px),radial-gradient(circle at 73% 36%,#ffedac 0 2px,transparent 3px),radial-gradient(circle at 36% 72%,#ffedac 0 1px,transparent 2px),radial-gradient(circle at 84% 81%,#ffedac 0 1px,transparent 2px)}
.escape-room-vignette.is-solved .vignette-celebration-dust{animation:vignette-dust 5s .8s both}@keyframes vignette-dust{0%{opacity:0;transform:translateY(10px)}25%,65%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.escape-room-celebration .escape-room-vignette{max-width:33rem;margin:0 auto 1.2rem}.escape-room-celebration .vignette-socket{pointer-events:none}
@media(max-width:380px){.vignette-sockets{gap:.35rem;left:7%;right:7%;top:43%}.vignette-socket{min-height:3.6rem}.socket-value{font-size:.9rem}.socket-symbol{font-size:1rem}.vignette-reward{width:29%}}
@media(max-height:550px){.escape-room-celebration .escape-room-vignette{max-width:13.4rem;margin-bottom:.5rem}.escape-room-celebration .vignette-sockets{top:38%}.escape-room-celebration .vignette-socket{min-height:2.3rem;padding:.1rem}.escape-room-celebration .socket-value,.escape-room-celebration .socket-symbol{font-size:.7rem;min-height:0;margin:0}}
@media(prefers-reduced-motion:reduce){.escape-room-vignette *, .escape-room-vignette *::before{transition:none!important;animation:none!important}.escape-room-vignette.is-solved .vignette-celebration-dust{opacity:0}}

.vignette-symbols .vignette-door{left:34%;width:32%;top:9%;height:76.5%}
.vignette-gate .vignette-door{left:26.5%;width:47%;top:7%;height:80%}
.vignette-door{clip-path:polygon(0 25%,3% 17%,10% 12%,22% 7%,36% 3%,50% 0,64% 3%,78% 7%,90% 12%,97% 17%,100% 25%,100% 100%,0 100%)}
.vignette-book{left:18%;top:54%;width:64%;height:34%;transform:rotateX(28deg);transform-origin:center bottom}
.vignette-library .vignette-reward{top:71%;width:20%}
.escape-rune-emblem{background:url('/assets/escape/realistic/code-shard.webp') center/contain no-repeat;border:0!important;border-radius:0!important;box-shadow:none!important;color:#543c20!important}

.vignette-reward{pointer-events:none}

.escape-word-riddle{margin:.1rem 0 1.2rem;padding:1rem 1.1rem;border:1px solid #dbc594;border-left:4px solid #b98b32;border-radius:.65rem;background:#fff8e6;box-shadow:0 4px 12px #78561b0a}.escape-word-riddle h4{margin:0 0 .5rem;color:#795420;font-size:1rem}.escape-word-riddle p{margin:0!important;color:#384a5b;line-height:1.7}.escape-riddle-status{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.escape-rune-grid .escape-rune-name{font-size:1.05rem}

.escape-symbol-math{box-sizing:border-box;width:min(26rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:1.4rem;border:2px solid #bd985a;border-radius:1.25rem;text-align:center;background:#fffcf3;color:#182a45;box-shadow:0 1rem 4rem #07182b80;overflow:auto}.escape-symbol-math::backdrop{background:#07192bc9;backdrop-filter:blur(4px)}.symbol-math-emblem{width:4rem;height:4rem;display:grid;place-items:center;margin:0 auto;background:url('/assets/escape/realistic/code-shard.webp') center/contain no-repeat;color:#624214;font-size:2rem}.symbol-math-name{margin:.35rem 0 .7rem;font-weight:800}.escape-symbol-math h2{font-family:Georgia,serif;font-size:1.45rem;margin:0 0 1rem}.symbol-math-equation{font-size:2.2rem;font-weight:850;margin:.5rem 0 1rem}.escape-symbol-math label{display:block;margin-bottom:.5rem}.symbol-math-answer{box-sizing:border-box;display:block;width:7rem;max-width:100%;margin:auto;padding:.6rem;border:2px solid #8eaba7;border-radius:.65rem;font:inherit;font-size:1.7rem;text-align:center;background:#fff}.symbol-math-answer:focus{outline:3px solid #cda550;outline-offset:3px}.symbol-math-feedback{min-height:2.7em;font-weight:700;color:#936136;font-size:.95rem}.symbol-math-feedback.is-correct{color:#246a5a}.escape-symbol-math .escape-secondary{min-height:2.75rem}@media(max-height:550px){.escape-symbol-math{padding:.65rem 1rem;width:min(30rem,calc(100vw - 2rem));display:grid;grid-template-columns:5rem 1fr;gap:.3rem .8rem;align-items:center}.symbol-math-emblem{grid-column:1;grid-row:1/3;width:3.3rem;height:3.3rem}.symbol-math-name{grid-column:1;grid-row:3;margin:0;font-size:.85rem}.escape-symbol-math h2{grid-column:2;margin:0;font-size:1.15rem}.symbol-math-equation{grid-column:2;margin:0;font-size:1.7rem}.escape-symbol-math>div:not(.symbol-math-emblem){grid-column:2}.escape-symbol-math label{display:none}.symbol-math-answer{padding:.3rem;font-size:1.4rem}.symbol-math-feedback{grid-column:1/-1;margin:.2rem 0;min-height:1.4em}.escape-symbol-math .escape-secondary{grid-column:1/-1;justify-self:center}}

.vignette-symbols .vignette-door{left:40.5%;top:6.5%;width:31%;height:86%}

/* Hit areas sit on the plates painted into this scene, not on separate cards. */
.vignette-integrated .vignette-sockets{inset:0;display:block;pointer-events:none;z-index:3}
.vignette-integrated .vignette-socket{position:absolute;top:43%;left:30%;width:15%;height:17%;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border:0;background:transparent;box-shadow:none;pointer-events:auto;border-radius:.3rem;padding:0}
.vignette-integrated .vignette-socket:nth-child(2){left:50%}.vignette-integrated .vignette-socket:nth-child(3){left:70%}
.vignette-integrated .vignette-socket.is-active{background:#f0d89b12;outline:2px solid #ffe0a1;outline-offset:-2px;box-shadow:0 0 12px #f4cf7744}
.vignette-integrated .vignette-socket.is-filled{color:#ffe1a0}.vignette-integrated .socket-value{font-size:clamp(.7rem,2vw,1.05rem)}.vignette-integrated .socket-symbol{font-size:clamp(1rem,2.5vw,1.5rem)}
.escape-puzzle .vignette-integrated .escape-rune-grid{position:absolute;inset:0;display:block;margin:0;pointer-events:none;z-index:4;transition:opacity .5s}
.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice{position:absolute;left:18%;top:80%;width:19%;height:28%;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;transform:translate(-50%,-50%);pointer-events:auto;border:0;border-radius:50%;background:transparent!important;box-shadow:none!important;color:#452d15;gap:0;text-align:center}
.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(2){left:39.3%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(3){left:60.7%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(4){left:82%}
.vignette-integrated .escape-rune-emblem{width:76%;height:76%;background:none!important;border:0!important;box-shadow:none!important;font-size:clamp(1.4rem,4vw,2.4rem);color:#4d3115!important;text-shadow:0 1px #ffe9a077}
.vignette-integrated .escape-rune-body{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.vignette-integrated .escape-symbol-choice:focus-visible{outline:3px solid #fff;outline-offset:-3px}.vignette-integrated .escape-symbol-choice:hover .escape-rune-emblem,.vignette-integrated .escape-symbol-choice[aria-pressed=true] .escape-rune-emblem{filter:drop-shadow(0 0 4px #fff0af);color:#fff3c8!important}
.vignette-integrated .escape-rune-position{top:4%;right:6%;width:1.2rem;height:1.2rem;font-size:.7rem;background:#173e46;color:#fff9e9}
.escape-room-vignette.vignette-integrated.is-solved .vignette-sockets{transform:none;opacity:0}.vignette-integrated.is-solved .escape-rune-grid{opacity:0;pointer-events:none}.vignette-integrated.is-solved .escape-rune-grid .escape-symbol-choice{pointer-events:none}
.vignette-integrated .vignette-door{left:36%;top:8%;width:28%;height:52%}
.escape-room-celebration .vignette-integrated .vignette-socket{min-height:0;min-width:0}

.vignette-integrated .vignette-socket{left:31.25%;top:35.7%;width:10.2%;height:15%}.vignette-integrated .vignette-socket:nth-child(2){left:50%}.vignette-integrated .vignette-socket:nth-child(3){left:68.75%}
.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice{left:19.5%;top:73.6%;width:18%;height:24%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(2){left:39.9%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(3){left:60.2%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(4){left:80.6%}
.vignette-integrated .escape-rune-emblem{font-size:clamp(1.2rem,4vw,2rem)}.vignette-integrated .vignette-door{left:38.5%;top:3%;width:23%;height:61%}

.vignette-integrated::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url('/assets/escape/realistic/symbol-integrated-door.webp') center/cover no-repeat;clip-path:inset(28% 44.6% 56.5% 44.6%)}
.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice{display:flex;align-items:center;justify-content:center;flex-direction:column}

/* Coordinates match the generated task-board photograph. */
.vignette-integrated .vignette-socket{left:33.7%;top:30.2%;width:10.6%;height:16%;min-height:0;min-width:0}
.vignette-integrated .vignette-socket:nth-child(2){left:50%}.vignette-integrated .vignette-socket:nth-child(3){left:66.3%}
.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice{left:22.5%;top:59.5%;width:14%;height:16%;min-height:0;min-width:0}
.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(2){left:40.7%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(3){left:59.2%}.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(4){left:77.1%}
.vignette-integrated .vignette-door{left:36%;top:0;width:28%;height:51%}
.vignette-integrated::after{background-image:url('/assets/escape/realistic/symbol-task-door.webp');clip-path:inset(21.5% 26.5% 61% 27.5%)}
.vignette-integrated .escape-rune-emblem{display:grid;place-items:center;width:100%;height:100%;font-size:clamp(1.4rem,4vw,2.5rem);color:#f7d481!important;text-shadow:0 2px 3px #170c00}
.vignette-zoom{position:absolute;right:2%;top:2%;z-index:8;border:1px solid #d0ad67;border-radius:.4rem;background:#10212ddd;color:#ffe5a1;font-size:1.6rem;width:44px;height:44px;cursor:pointer}
.escape-scene-zoom{width:min(1100px,96vw);max-width:96vw;max-height:96dvh;padding:0;border:1px solid #cba65c;border-radius:.8rem;background:#10202c;overflow:auto}
.escape-scene-zoom::backdrop{background:#04101de8}.escape-scene-zoom .escape-room-vignette{margin:0;border:0}.escape-scene-zoom .vignette-zoom{display:none}.vignette-zoom-close{position:absolute;right:1%;top:1%;z-index:10;width:44px;height:44px;border:1px solid #d0ad67;background:#10212ddd;color:#fff1cd;border-radius:.4rem;font-size:1.7rem;cursor:pointer}
.vignette-integrated .escape-symbol-math{position:absolute;z-index:7;left:12.5%;top:72%;width:75%;height:14.5%;min-height:40px;max-height:none;margin:0;padding:0 .3rem;display:flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:0;background:transparent;color:#ffe6ac;box-shadow:none;overflow:visible}
.vignette-integrated .escape-symbol-math h2,.vignette-integrated .symbol-math-emblem,.vignette-integrated .symbol-math-name,.vignette-integrated .escape-symbol-math label{display:none}
.vignette-integrated .symbol-math-equation{margin:0!important;color:#ffe6ac;font-size:clamp(.95rem,2.7vw,2rem);white-space:nowrap}
.vignette-integrated .symbol-math-answer{width:3.8rem;height:36px;padding:.1rem;border-radius:.25rem;font-size:1.2rem;background:#fff6dc}
.vignette-integrated .escape-symbol-math .escape-secondary{min-height:32px;padding:0 .35rem;font-size:0;border:0;background:transparent;color:#ffe6ac}.vignette-integrated .escape-symbol-math .escape-secondary::after{content:'×';font-size:1.3rem}
.vignette-integrated .symbol-math-feedback{position:absolute;left:0;right:0;top:100%;margin:0!important;font-size:clamp(.55rem,1.3vw,.85rem);min-height:0;line-height:1.1;color:#ffe6ac;text-align:center}.vignette-integrated .symbol-math-feedback.is-correct{color:#bbf3c9}
.escape-room-celebration .vignette-zoom{display:none}

/* Opaque closed leaves cover the whole opening; the library appears only on success. */
.vignette-integrated .vignette-door{left:33.5%;top:-2%;width:33%;height:53.5%;clip-path:none}
.vignette-integrated::after{background-image:url('/assets/escape/realistic/symbol-enclosed-door.webp')}

/* Separate animated barrier and plaques over a clean background. */
.vignette-integrated::after{display:none}
.vignette-magic-beam{position:absolute;z-index:2;pointer-events:none;left:25%;top:24%;width:50%;height:13%;background:url('/assets/escape/realistic/magic-barrier.webp') center/100% 100% no-repeat;filter:drop-shadow(0 0 5px #ffc95a);transform-origin:center}
.vignette-integrated .vignette-socket{background:url('/assets/escape/realistic/magic-plaque.webp') center/100% 100% no-repeat;border-radius:0;box-shadow:0 0 9px #f4be5355;isolation:isolate}
.vignette-integrated .vignette-socket.is-active{background:url('/assets/escape/realistic/magic-plaque.webp') center/100% 100% no-repeat;outline:2px solid #ffe5a3;outline-offset:-2px;box-shadow:0 0 12px #ffe19a99}
.escape-room-vignette.vignette-integrated.is-solved .vignette-sockets{opacity:1;transform:none;transition:none}
.vignette-integrated .vignette-socket:nth-child(1){--depart-x:-150%;--depart-y:-90%;--depart-turn:-28deg}
.vignette-integrated .vignette-socket:nth-child(2){--depart-x:-50%;--depart-y:-220%;--depart-turn:0deg}
.vignette-integrated .vignette-socket:nth-child(3){--depart-x:50%;--depart-y:-90%;--depart-turn:28deg}
.vignette-integrated.is-solved .vignette-socket{animation:magic-plaque-depart 2.7s .25s ease-in-out both;pointer-events:none}
.vignette-integrated.is-solved .vignette-magic-beam{animation:magic-barrier-release 2.3s .7s ease-in-out both}
.vignette-integrated .vignette-door-leaf{transition:transform 3.4s cubic-bezier(.22,.55,.25,1) 3.1s,filter 3.4s 3.1s}
.vignette-integrated .vignette-reward{transition:opacity 1.2s 5.7s,transform 1.7s 5.7s}
@keyframes magic-plaque-depart{0%{transform:translate(-50%,-50%);opacity:1;filter:drop-shadow(0 0 0 #ffe295)}30%{transform:translate(-50%,-65%) scale(1.08);opacity:1;filter:drop-shadow(0 0 12px #ffe295)}100%{transform:translate(var(--depart-x),var(--depart-y)) rotate(var(--depart-turn)) scale(.4);opacity:0;filter:drop-shadow(0 0 20px #ffe295)}}
@keyframes magic-barrier-release{0%{opacity:1;transform:scaleX(1)}30%{opacity:1;filter:brightness(1.8) drop-shadow(0 0 14px #fff1ab);transform:scaleX(1.04)}100%{opacity:0;filter:blur(8px);transform:scaleX(.02)}}
@media(prefers-reduced-motion:reduce){.vignette-integrated.is-solved .vignette-socket,.vignette-integrated.is-solved .vignette-magic-beam{animation:none!important;opacity:0}.vignette-integrated .vignette-door-leaf,.vignette-integrated .vignette-reward{transition:none!important}}

/* A lively barrier remains below the interactive plaques. */
.vignette-integrated .vignette-magic-beam{left:16%;top:15%;width:68%;height:31%;filter:drop-shadow(0 0 8px #ffc85e)}
.vignette-integrated:not(.is-solved) .vignette-magic-beam{animation:magic-barrier-pulse 2.8s ease-in-out infinite alternate}
@keyframes magic-barrier-pulse{0%{opacity:.78;filter:brightness(.88) drop-shadow(0 0 5px #ffc85e);transform:scale(1,.91)}50%{opacity:1;filter:brightness(1.18) drop-shadow(0 0 12px #ffe3a0);transform:scale(1.03,1.08)}100%{opacity:.86;filter:brightness(1.03) drop-shadow(0 0 8px #ffd580);transform:scale(1.01,.96)}}
.vignette-integrated .socket-value{display:none}
.vignette-integrated .socket-symbol{margin:0;font-size:clamp(1.25rem,3vw,1.8rem)}
/* Show the next multiplication on the scene before a symbol is chosen. */
.vignette-integrated .symbol-math-preview{position:absolute;z-index:6;left:12.5%;top:72%;width:75%;height:14.5%;min-height:40px;display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,1vw,.75rem);color:#ffe7a8;text-align:center;text-shadow:0 1px 3px #000;pointer-events:none}
.vignette-integrated .symbol-math-preview[hidden],.vignette-integrated.is-solved .symbol-math-preview{display:none}
.symbol-math-preview-hint{font-size:clamp(.65rem,1.45vw,.95rem);font-weight:700;line-height:1.1}
.symbol-math-preview-equation{font-size:clamp(.95rem,2.5vw,1.75rem);white-space:nowrap;line-height:1.1}

.escape-gate-code-clue{padding:.7rem 1rem;border:1px solid #c9ab70;border-radius:.65rem;background:#fff8e7;color:#5a431c;font-weight:800;line-height:1.6}
/* Room illustration matches the closed magical symbol door. */
.escape-scene[data-room="1"]{background-image:linear-gradient(180deg,#1020330d 55%,#0b1a2ab8),url('/assets/escape/realistic/symbol-door-portrait.webp');background-position:center,center center;background-size:cover}
@media(max-width:600px){.escape-scene[data-room="1"]{background-position:center,center 40%}}

.vignette-integrated .escape-rune-position{display:none}

/* The game console and its controls are one separately moving layer. */
.vignette-integrated .vignette-door{left:28.5%;top:0;width:43%;height:75%;clip-path:none}
.vignette-integrated .vignette-door-leaf{transition:transform 3s cubic-bezier(.22,.55,.25,1) 4.1s,filter 3s 4.1s}
.vignette-integrated .vignette-reward{transition:opacity 1.1s 6.1s,transform 1.5s 6.1s}
.vignette-podium{position:absolute;z-index:4;left:4%;top:51%;width:92%;aspect-ratio:1440/489;pointer-events:none;filter:drop-shadow(0 7px 8px #0008);transform:translateX(0)}
.vignette-podium-image{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.vignette-integrated .escape-rune-grid,.escape-puzzle .vignette-integrated .escape-rune-grid{position:absolute;inset:0;display:block;margin:0;z-index:2;pointer-events:none}
.vignette-integrated .escape-rune-grid .escape-symbol-choice,.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice{position:absolute;top:22.1%;left:18.9%;width:15.5%;height:35%;min-width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent!important;box-shadow:none!important;pointer-events:auto}
.vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(2),.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(2){left:39.2%}
.vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(3),.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(3){left:60.5%}
.vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(4),.escape-puzzle .vignette-integrated .escape-rune-grid .escape-symbol-choice:nth-child(4){left:81%}
.vignette-integrated .escape-rune-grid .escape-symbol-choice::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse,#ffe8aa30,transparent 68%);box-shadow:0 0 8px #ffce4b66;pointer-events:none;transition:box-shadow .25s,background .25s}
.vignette-integrated .escape-rune-grid .escape-symbol-choice:hover::before,.vignette-integrated .escape-rune-grid .escape-symbol-choice:focus-visible::before,.vignette-integrated .escape-rune-grid .escape-symbol-choice[aria-pressed=true]::before{background:radial-gradient(ellipse,#fff4b578,#eeb6433b 50%,transparent 72%);box-shadow:0 0 12px 3px #ffe394a6,inset 0 0 8px #fff2bb99}
.vignette-integrated .escape-rune-emblem{position:relative;z-index:1;text-shadow:0 0 7px #fff0a7,0 1px 2px #472500;color:#fff0b9!important}
.vignette-integrated .symbol-math-preview,.vignette-integrated .escape-symbol-math{left:7%;top:51%;width:86%;height:32%;min-height:0}
.vignette-integrated .escape-symbol-math{pointer-events:auto}
.escape-room-vignette.vignette-integrated.is-solved .escape-rune-grid{opacity:1}
.vignette-integrated.is-solved .vignette-podium{animation:podium-drive-away 3.2s .8s cubic-bezier(.55,0,.6,1) both}
@keyframes podium-drive-away{0%{transform:translateX(0)}15%{transform:translateX(-1.5%)}100%{transform:translateX(115%)}}
@media(prefers-reduced-motion:reduce){.vignette-integrated.is-solved .vignette-podium{animation:none!important;transform:translateX(115%)}.vignette-integrated .vignette-door-leaf,.vignette-integrated .vignette-reward{transition:none!important}}
/* Each correct multiplication deactivates its own ray independently. */
.vignette-lights .vignette-ray.is-deactivated{opacity:0;transition:opacity .45s ease}

/* Every beam connects two visible lenses in the 3:2 chamber image. */
.vignette-lights .vignette-ray{left:11.3%;top:var(--ray-y);width:var(--ray-width);transform-origin:left center}
@media(prefers-reduced-motion:reduce){.vignette-lights .vignette-ray.is-deactivated{opacity:0;transition:none!important}}

.symbol-order-feedback{position:absolute;z-index:9;top:2%;left:5%;width:78%;margin:0;padding:.45rem .6rem;border:1px solid #eac783;border-radius:.45rem;background:#241b16ee;color:#fff1ce;font-size:clamp(.68rem,1.5vw,.95rem);font-weight:700;line-height:1.25;text-align:center;box-shadow:0 3px 12px #0008;pointer-events:none}
.symbol-order-feedback[hidden],.vignette-integrated.is-solved .symbol-order-feedback{display:none}

.escape-library-gears{display:block;margin:.8rem 0 1.1rem;padding:.75rem 1rem;border:1px solid #d3b982;border-radius:.7rem;background:#fff6df;color:#604620;font-weight:800;line-height:1.45}
/* A solved ray flashes once, then retracts towards its own emitter. */
.vignette-lights:not(.is-solved) .vignette-ray.is-deactivated {
  animation: light-ray-release 1.5s ease-out both;
  transition: none;
}
.vignette-lights:not(.is-solved) .vignette-ray.is-deactivated::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(.65rem, 2vw, 1.1rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff8c9;
  box-shadow: 0 0 .55rem .2rem #ffe998, 0 0 1.5rem .55rem #e8ad43aa;
  transform: translate(-50%, -50%) scale(.3);
  animation: light-emitter-spark 1.5s ease-out both;
  pointer-events: none;
}
@keyframes light-ray-release {
  0% { opacity: .85; transform: rotate(var(--ray-angle)) scaleX(1); }
  20% { opacity: 1; transform: rotate(var(--ray-angle)) scaleX(1); background: #fff; box-shadow: 0 0 8px 3px #fffbd2, 0 0 22px 8px #ffc65bc9; }
  48% { opacity: 1; transform: rotate(var(--ray-angle)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--ray-angle)) scaleX(.015); }
}
@keyframes light-emitter-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); }
}
.vignette-lights.is-ray-celebrating { animation: light-room-success-glow 1.5s ease-out both; }
@keyframes light-room-success-glow {
  0%, 100% { box-shadow: 0 .5rem 1.5rem #1b293522; }
  30% { box-shadow: 0 0 0 2px #f6d27d, 0 0 1.4rem .2rem #e3b85788; }
}
@media (prefers-reduced-motion: reduce) {
  .vignette-lights:not(.is-solved) .vignette-ray.is-deactivated { animation: none !important; opacity: 0; transform: rotate(var(--ray-angle)); }
  .vignette-lights .vignette-ray.is-deactivated::after { animation: none !important; display: none; }
  .vignette-lights.is-ray-celebrating { animation: none !important; }
}

/* Equations are labels; only the result fields are interactive. */
.escape-light-card .escape-light-choice{cursor:default}

/* An extra, separately visible emitter pair supports older nine-task rooms. */
.vignette-extra-lens{position:absolute;z-index:1;top:70.9%;width:3.2%;aspect-ratio:1;border:1px solid #c79a42;border-radius:50%;background:radial-gradient(circle,#fffad2 0 22%,#f3c867 45%,#825727 72%);box-shadow:0 0 6px #ffd36b;transform:translate(-50%,-50%)}
.vignette-extra-lens.lens-left{left:11.3%}.vignette-extra-lens.lens-right{left:88.7%}
/* Matching portrait of the light chamber with its horizontal beams. */
.escape-scene[data-room="3"]{background-image:linear-gradient(180deg,#1020330d 55%,#0b1a2ab8),url('/assets/escape/realistic/light-hall-portrait-v2.webp');background-position:center,center center;background-size:cover}
@media(max-width:600px){.escape-scene[data-room="3"]{background-position:center,center 42%}}

/* Compact, accessible answer fields; the input has its own spoken label. */
.escape-light-label>span{display:none}
.escape-light-label{display:flex;justify-content:center;align-items:center;flex-direction:row;min-width:0;margin:.7rem .15rem .1rem}
.escape-puzzle input.escape-light-answer{width:min(5rem,100%);max-width:100%;min-width:0}
.escape-puzzle .escape-light-choice{white-space:nowrap;gap:.25rem;padding:.45rem .25rem;font-size:clamp(.75rem,2.3vw,1.1rem)}
.escape-puzzle .escape-light-choice::before{flex:0 0 clamp(1.4rem,3vw,2rem);width:clamp(1.4rem,3vw,2rem);height:clamp(1.4rem,3vw,2rem)}

/* Red laser light and matching sparks in the chamber. */
.vignette-lights .vignette-ray{background:#ffe1e5;box-shadow:0 0 2px 1px #ff2145,0 0 8px 3px #ff163aab,0 0 18px 5px #d9002a60}
.vignette-lights:not(.is-solved) .vignette-ray.is-deactivated{animation:red-ray-release 1.5s ease-out both}
.vignette-lights:not(.is-solved) .vignette-ray.is-deactivated::after{background:#fff1f3;box-shadow:0 0 .55rem .2rem #ff6a78,0 0 1.5rem .55rem #e50032aa}
.vignette-lights .vignette-extra-lens{background:radial-gradient(circle,#fff5f5 0 22%,#fa5969 45%,#77252b 72%);box-shadow:0 0 6px #ff4b58}
@keyframes red-ray-release{0%{opacity:.85;transform:rotate(var(--ray-angle)) scaleX(1)}20%{opacity:1;transform:rotate(var(--ray-angle)) scaleX(1);background:#fff1f2;box-shadow:0 0 8px 3px #ff8c99,0 0 22px 8px #ec002fc9}48%{opacity:1;transform:rotate(var(--ray-angle)) scaleX(1)}100%{opacity:0;transform:rotate(var(--ray-angle)) scaleX(.015)}}
@media(prefers-reduced-motion:reduce){.vignette-lights:not(.is-solved) .vignette-ray.is-deactivated{animation:none!important;opacity:0}}
@keyframes light-room-success-glow{0%,100%{box-shadow:0 .5rem 1.5rem #1b293522}30%{box-shadow:0 0 0 2px #ff6674,0 0 1.4rem .2rem #e9193f88}}
/* Leave solved cards visually empty without shifting the remaining exercises. */
.escape-light-card.is-solved{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
@media(prefers-reduced-motion:reduce){.escape-light-card.is-solved{transition:none!important}}
/* Same room, now with red laser beams and a matching task background. */
.escape-scene[data-room="3"]{background-image:linear-gradient(180deg,#1020330d 55%,#0b1a2ab8),url('/assets/escape/realistic/light-hall-red-portrait-v1.webp');background-position:center,center center;background-size:cover}
@media(max-width:600px){.escape-scene[data-room="3"]{background-position:center,center 42%}}
.escape-light-grid{background:linear-gradient(#1a0e12aa,#170e16bd),url('/assets/escape/realistic/light-task-wall-red-v1.webp') center/cover no-repeat;border-color:#805e5f}
/* Each calculation lives in a laser mechanism from the light chamber. */
.escape-light-grid .escape-light-card {
  background: #18171a url('/assets/escape/realistic/laser-task-panel-v1.webp') center / 100% 100% no-repeat;
  border: 1px solid #86664d;
  box-shadow: 0 .25rem .7rem #160a0dc0;
  padding: 1.35rem .65rem;
}
.escape-puzzle .escape-light-grid .escape-light-choice {
  min-height: 3.1rem;
  color: #fff4e6;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 0 .55rem #ff758a80;
}
.escape-puzzle .escape-light-grid .escape-light-choice::before { display: none; }
.escape-light-grid .escape-light-label { margin-top: .8rem; }
.escape-light-grid .escape-light-answer { background: #fffaf3; border-color: #c8aaa1; }
.escape-light-grid .escape-light-answer:focus-visible { outline-color: #ff797e; }
/* Keep the answer above the lower laser and match the chamber's red light. */
.escape-light-grid .escape-light-card { padding-bottom: 2rem; }
.escape-light-grid .escape-light-label { margin-top: .15rem; }
.escape-puzzle input.escape-light-answer { border-color: #c13a4a; }
.escape-puzzle input.escape-light-answer:focus-visible { border-color: #a82538; outline-color: #ff797e; }
/* Each active beam has its own long, irregular-looking phase. JavaScript supplies
   independent random durations and negative start delays for each beam. */
@media (prefers-reduced-motion: no-preference) {
  .vignette-lights:not(.is-solved) .vignette-ray:not(.is-deactivated) {
    animation: laser-subtle-flicker var(--flicker-duration, 11s) var(--flicker-delay, 0s) linear infinite;
  }
}
@keyframes laser-subtle-flicker {
  0%, 18%, 36%, 57%, 74%, 100% { opacity: .95; }
  23%, 62%, 79% { opacity: .35; }
  28%, 67%, 84% { opacity: .9; }
}

/* The last lock reveals the treasure when its three code pieces are entered. */
.vignette-treasure-open{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.3s ease-in-out .8s;pointer-events:none}
.vignette-gate.is-solved .vignette-treasure-open{opacity:1}
.vignette-treasure-glow{position:absolute;inset:10% 15%;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 65%,#ffeaa566,transparent 58%);mix-blend-mode:screen}
.vignette-gate.is-solved .vignette-treasure-glow{animation:treasure-reveal-glow 4s .6s ease-out both}
@keyframes treasure-reveal-glow{0%{opacity:0}38%{opacity:.9}100%{opacity:0}}
.escape-finish-treasure{display:block;width:100%;height:auto;border:1px solid #bba37e;border-radius:1rem;margin:1rem 0 1.2rem;box-shadow:0 .5rem 1.5rem #1b293522}
@media(prefers-reduced-motion:reduce){.vignette-gate.is-solved .vignette-treasure-glow{animation:none}}
.escape-scene[data-room="4"]{background-image:linear-gradient(180deg,#1020331a 55%,#0b1a2ab8),url('/assets/escape/realistic/treasure-chest-closed-v1.webp');background-position:center,center;background-size:cover}
.escape-scene[data-room="4"].is-finished{background-image:linear-gradient(180deg,#1020331a 55%,#0b1a2ab8),url('/assets/escape/realistic/treasure-chest-open-v1.webp')}
/* Treasure close-up after the final room is solved. */
.escape-treasure-finale{box-sizing:border-box;position:fixed;width:min(42rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);margin:auto;padding:clamp(1rem,3vw,1.8rem);overflow:auto;border:2px solid #bd9653;border-radius:1.2rem;background:#fff8e8;color:#192d41;text-align:center;box-shadow:0 1rem 4rem #050b17c9}
.escape-treasure-finale::backdrop{background:#071421e8;backdrop-filter:blur(4px)}
.escape-treasure-finale h2{margin:0 0 .35rem;font-family:Georgia,serif;font-size:clamp(1.6rem,4vw,2.35rem);line-height:1.12;color:#192d41}
.escape-treasure-finale p{margin:0 0 .9rem;line-height:1.45}
.treasure-finale-picture{position:relative;overflow:hidden;margin:0 auto 1rem;border:1px solid #b98e4d;border-radius:.75rem;background:#1b130d;max-height:58dvh}
.treasure-finale-picture img{display:block;width:100%;max-height:58dvh;object-fit:contain}
.treasure-finale-sparkles{position:absolute;inset:0;pointer-events:none;color:#fff0a5;text-shadow:0 0 7px #fff,0 0 20px #ffc843}
.treasure-finale-spark{position:absolute;font-size:clamp(1rem,3vw,2.2rem);opacity:.15;animation:treasure-finale-sparkle 3s ease-in-out infinite}
.treasure-finale-spark:nth-child(1){left:22%;top:36%;animation-delay:-.2s}.treasure-finale-spark:nth-child(2){left:43%;top:23%;animation-delay:-1.5s}.treasure-finale-spark:nth-child(3){left:66%;top:34%;animation-delay:-.9s}.treasure-finale-spark:nth-child(4){left:77%;top:58%;animation-delay:-2.1s}.treasure-finale-spark:nth-child(5){left:53%;top:61%;animation-delay:-2.7s}.treasure-finale-spark:nth-child(6){left:28%;top:63%;animation-delay:-1.1s}.treasure-finale-spark:nth-child(7){left:57%;top:42%;animation-delay:-1.9s}
@keyframes treasure-finale-sparkle{0%,100%{opacity:.15;transform:scale(.92)}50%{opacity:.85;transform:scale(1.06)}}
.escape-treasure-finale .escape-primary:focus-visible{outline:3px solid #176e6b;outline-offset:4px}
@media(max-height:550px){.escape-treasure-finale{padding:.65rem 1rem}.escape-treasure-finale h2{font-size:1.4rem}.escape-treasure-finale p{margin-bottom:.45rem}.treasure-finale-picture,.treasure-finale-picture img{max-height:42dvh}.treasure-finale-picture{margin-bottom:.5rem}}
@media(prefers-reduced-motion:reduce){.treasure-finale-spark{animation:none;opacity:.5}}
/* Keep the treasure photograph at its natural proportions without letterboxing. */
.treasure-finale-picture img{height:auto;object-fit:cover}
/* Separate glints catch the light on individual coins and gemstones. */
.treasure-finale-sparkles{isolation:isolate;color:#fff8d7}
.treasure-finale-sparkles .treasure-finale-spark{
  left:var(--spark-x);top:var(--spark-y);width:var(--spark-size);height:var(--spark-size);
  font-size:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0 7%,#fff1b5ed 12%,#ffdc6688 24%,transparent 60%);
  filter:drop-shadow(0 0 5px #ffd36a) drop-shadow(0 0 11px #eaa300aa);
  transform:translate(-50%,-50%) scale(.5);
  opacity:.24;
  animation:treasure-gold-glint var(--spark-duration) ease-in-out var(--spark-delay) infinite;
}
.treasure-finale-spark::before,.treasure-finale-spark::after{
  content:"";position:absolute;left:45%;top:0;width:10%;height:100%;border-radius:50%;
  background:linear-gradient(transparent,#fff3b1 35%,#fff 50%,#fff3b1 65%,transparent)
}
.treasure-finale-spark::after{transform:rotate(90deg)}
@keyframes treasure-gold-glint{
  0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.42)}
  18%,38%{opacity:.42;transform:translate(-50%,-50%) scale(.55)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
  67%{opacity:.68;transform:translate(-50%,-50%) scale(.85)}
  80%{opacity:.32;transform:translate(-50%,-50%) scale(.48)}
}
@media(prefers-reduced-motion:reduce){
  .treasure-finale-sparkles .treasure-finale-spark{animation:none;opacity:.22;transform:translate(-50%,-50%) scale(.58)}
  .treasure-finale-spark:nth-child(n+8){opacity:.1}
}