/* QUESTS · Dinosaur Detectives. Painted scenes (art/quest/*.webp) with living layers on top.
   Stage units: 1cqw = 1% of the 16:9 stage width. The "world" holds the painting and everything placed in it,
   and moves as one camera; overlays (boards, title cards, warp) sit above it in screen space. */
.qs-card{max-width:min(1180px,calc((100svh - 330px) * 16 / 9));min-width:min(100%,640px);margin:14px auto 0;border-radius:24px;overflow:hidden;background:#140d24;border:4px solid #f6cf72;box-shadow:0 24px 60px #1c123366}
.qs-card h1:focus{outline:none}
.qs-defs{position:absolute;width:0;height:0}
.qs-stage{position:relative;aspect-ratio:16/9;container-type:size;overflow:hidden;background:#000;isolation:isolate;user-select:none}
.qs-world{position:absolute;inset:0;transform-origin:0 0;transition:transform 2.8s cubic-bezier(.45,0,.2,1);will-change:transform}
.qs-drift{position:absolute;inset:0;animation:qs-drift 46s ease-in-out infinite alternate;transform-origin:50% 60%}
.qs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.qs-world i,.qs-world .qs-slice{position:absolute;pointer-events:none}
.qs-slice{background-repeat:no-repeat}

/* Living layers */
.qs-water{filter:url(#qs-water);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.qs-water::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff2a 45%,transparent 60%);background-size:300% 100%;animation:qs-glint 7s linear infinite;mix-blend-mode:screen}
.qs-puddle{filter:url(#qs-water-small)}
.qs-portal{filter:url(#qs-swirl) saturate(1.35) brightness(1.08);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);animation:qs-portal-hue 6s ease-in-out infinite}
.qs-portal-glow{width:16cqw;height:40cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#7ff7ec66,#3ce0d022 60%,transparent);mix-blend-mode:screen;animation:qs-pulse 3s ease-in-out infinite}
.qs-spark{width:.45cqw;height:.45cqw;border-radius:50%;background:#d8fffb;box-shadow:0 0 .8cqw .3cqw #3ce0d0;animation:qs-spark var(--t) var(--d) ease-in-out infinite}
.qs-ray{height:130%;transform-origin:50% 0;rotate:var(--a);background:linear-gradient(#fff6c8b0,#fff3c000 85%);mix-blend-mode:screen;filter:blur(1cqw);animation:qs-ray 9s var(--d) ease-in-out infinite}
.qs-mote{width:calc(var(--s) * .32cqw);height:calc(var(--s) * .32cqw);border-radius:50%;background:#fff8d8;box-shadow:0 0 .6cqw .15cqw #fff3c099;animation:qs-mote var(--t) var(--d) linear infinite;opacity:0}
.qs-led{width:1.4cqw;height:1.4cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#bffff8,#3ce0d0 50%,transparent);mix-blend-mode:screen;animation:qs-pulse 2.2s ease-in-out infinite}
.qs-breathe{transform-origin:50% 100%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 75%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 75%,transparent 100%);animation:qs-breathe 5.5s ease-in-out infinite}
.qs-graze{transform-origin:90% 15%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);animation:qs-graze 4.6s ease-in-out infinite}
.qs-bfly{width:.8cqw;height:.55cqw;animation:qs-bfly var(--t) var(--d) ease-in-out infinite}
.qs-bfly::before,.qs-bfly::after{content:'';position:absolute;top:0;width:52%;height:100%;background:radial-gradient(circle at 40% 40%,#ffd77a,#e8892a 70%,#6a3a1a);animation:qs-flap .22s ease-in-out infinite alternate}
.qs-bfly::before{left:0;border-radius:90% 10% 60% 40%;transform-origin:100% 50%}.qs-bfly::after{right:0;border-radius:10% 90% 40% 60%;transform-origin:0 50%}
.qs-birds{position:absolute;left:0;top:8%;width:100%;height:10%;pointer-events:none}
.qs-birds i{position:absolute;width:2.2cqw;height:1cqw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M2 12 Q11 2 20 10 Q29 2 38 12' stroke='%23332a22' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:qs-bird 28s linear infinite}
.qs-birds i:nth-child(2){top:30%;scale:.8;animation-delay:-1.2s}.qs-birds i:nth-child(3){top:60%;scale:.65;animation-delay:-2.1s}
.qs-dapple{position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(ellipse 8% 5% at 30% 60%,#fff4c055,transparent),radial-gradient(ellipse 6% 4% at 60% 70%,#fff4c044,transparent),radial-gradient(ellipse 10% 6% at 75% 45%,#fff4c033,transparent),radial-gradient(ellipse 7% 4% at 45% 85%,#fff4c044,transparent);mix-blend-mode:screen;animation:qs-dapple 14s ease-in-out infinite alternate}
.qs-leaf{width:1.2cqw;height:1cqw;border-radius:0 80% 0 80%;background:#e8c23a;animation:qs-leaf var(--t) var(--d) linear infinite;opacity:0}

/* Things in the paintings */
.qs-spot,.qs-target{position:absolute;z-index:4;width:calc(var(--r,6) * 2cqw);height:calc(var(--r,6) * 2cqw);translate:-50% -50%;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qs-target{--r:7}
.qs-ring{position:absolute;inset:0;border-radius:50%;border:.3cqw solid #fff3b0;box-shadow:0 0 1.6cqw #ffe28a,inset 0 0 1.6cqw #ffe28a88;animation:qs-ring 1.8s ease-in-out infinite}
.qs-spot.optional .qs-ring{border-style:dashed}
.qs-spot.found .qs-ring{animation:none;border-color:#7ff7a0;box-shadow:0 0 1.2cqw #7ff7a0}
.qs-spot-label{position:absolute;left:50%;top:100%;translate:-50% .4cqw;white-space:nowrap;padding:.35cqw 1cqw;border-radius:99px;background:#1c1233e0;border:.18cqw solid #f6cf72;color:#fff8ea;font:800 max(1.2cqw,11px)/1.1 ui-rounded,'Segoe UI',sans-serif;opacity:0;transition:opacity .3s}
.qs-spot:hover .qs-spot-label,.qs-spot:focus-visible .qs-spot-label,.qs-spot.found .qs-spot-label,.qs-target .qs-spot-label{opacity:1}
.qs-spot:focus-visible,.qs-target:focus-visible{outline:.3cqw solid #fff;outline-offset:.3cqw}
.qs-target.tried{opacity:.55}.qs-target.tried .qs-ring{animation:none;border-style:dashed}
.qs-target.picked .qs-ring{border-color:#7ff7a0;box-shadow:0 0 2cqw #7ff7a0}
.qs-plaque{position:absolute;z-index:3;translate:-50% 0;padding:.5cqw 1.6cqw;border-radius:.6cqw;background:linear-gradient(#e7c27a,#b98a3e);border:.2cqw solid #7a5a26;color:#3b2a12;text-align:center;font:900 1.5cqw Georgia,serif;box-shadow:0 .5cqw 1cqw #0006;letter-spacing:.1cqw}
.qs-plaque small{display:block;font:800 .7cqw ui-rounded,'Segoe UI',sans-serif;letter-spacing:.2cqw}
.qs-blank{color:#7a5a26;animation:qs-blink 1.2s steps(2) infinite}
.qs-name-full{display:none}
.qs-plaque.named .qs-name-missing,.ev-named .qs-name-missing{display:none}
.qs-plaque.named .qs-name-full,.ev-named .qs-name-full{display:inline;animation:qs-shine 1.4s ease-out}
.ev-label .qs-plaque{box-shadow:0 0 0 .4cqw #fff3b0,0 0 3cqw #ffe28a;animation:qs-pulse 1.2s ease-in-out 4}
.qs-skull-on{position:absolute;z-index:3;width:11.5cqw;opacity:0;scale:.6;transition:opacity .6s,scale .6s cubic-bezier(.2,.9,.3,1.4)}
.qs-skull-on.on,.ev-named .qs-skull-on{opacity:1;scale:1}
.qs-skull-on svg{width:100%;display:block;filter:drop-shadow(0 .4cqw .5cqw #0007)}
.qs-holo{position:absolute;z-index:4;width:22cqw;padding:1cqw;border-radius:1.4cqw;background:#0b2a33cc;border:.2cqw solid #7ff7ec;box-shadow:0 0 3cqw #3ce0d0aa;color:#bffff8;text-align:center;font:900 1cqw ui-rounded,'Segoe UI',sans-serif;letter-spacing:.2cqw;opacity:0;scale:.3;transition:opacity .5s,scale .6s cubic-bezier(.2,.9,.3,1.3)}
.qs-holo-in{position:relative;height:9cqw;background:repeating-linear-gradient(#7ff7ec10 0 .3cqw,transparent .3cqw .6cqw);animation:qs-flicker 2.6s infinite}
.qs-holo-in svg{position:absolute;left:4%;bottom:0;width:70%}
.qs-holo-tree{position:absolute;right:8%;bottom:0;width:2.4cqw;height:8cqw;background:linear-gradient(#7ff7ec,#3ce0d0);clip-path:polygon(50% 0,100% 80%,60% 80%,60% 100%,40% 100%,40% 80%,0 80%)}
.qs-holo-tree.t2{right:20%;height:6cqw}
.ev-holo .qs-holo{opacity:1;scale:1}
.qs-giant-shadow{position:absolute;z-index:2;left:18%;top:24%;width:30cqw;opacity:0;filter:blur(.5cqw)}
.qs-giant-shadow svg,.qs-allo-walk svg{width:100%;display:block}
.ev-giant .qs-giant-shadow{animation:qs-giant 6s ease-in-out forwards}
.qs-allo-walk{position:absolute;z-index:2;left:-30%;top:36.5%;width:17cqw;opacity:0;filter:blur(.12cqw) saturate(.6);mix-blend-mode:multiply}
.ev-pass .qs-allo-walk{animation:qs-allo 26s linear forwards}
.ev-pass .qs-allo-walk svg{animation:qs-stride 1.1s ease-in-out infinite alternate}
.ev-gone .qs-allo-walk{opacity:0;transition:opacity 1.2s}
.qs-ripples{position:absolute;z-index:3;width:10cqw;height:2.4cqw;translate:-50% -50%}
.qs-ripples i{position:absolute;inset:0;border-radius:50%;border:.2cqw solid #ffffffcc;opacity:0}
.ev-rumble .qs-ripples i,.ev-pass .qs-ripples i{animation:qs-ripple 1.3s ease-out infinite}
.qs-ripples i:nth-child(2){animation-delay:.4s!important}.qs-ripples i:nth-child(3){animation-delay:.8s!important}
.ev-rumble,.ev-giant{animation:qs-shake .45s ease-in-out 4}
.qs-coprolite{position:absolute;z-index:3;width:4.5cqw;translate:-50% -50%;filter:drop-shadow(0 .3cqw .3cqw #0006)}
.qs-coprolite svg{width:100%;display:block}
.qs-cart{position:absolute;z-index:3;width:10cqw;translate:-50% -50%;rotate:-4deg;filter:drop-shadow(0 .5cqw .6cqw #0007) saturate(.9)}
.qs-cart svg{width:100%;display:block}
.qs-print{position:absolute;z-index:2;width:2.6cqw;height:3cqw;translate:-50% -50%;rotate:var(--r);opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 84 C40 84 36 72 42 62 L28 26 L36 24 L48 56 L50 18 L56 18 L56 56 L66 24 L74 26 L60 62 C66 72 62 84 50 84Z' fill='%234a2e18'/%3E%3C/svg%3E") center/contain no-repeat}
.qs-branch{position:absolute;z-index:3;width:5cqw;height:.6cqw;border-radius:99px;background:linear-gradient(#7a5232,#4a3020);rotate:24deg;box-shadow:1.6cqw -.6cqw 0 -.1cqw #5a3a22}
.qs-station{position:absolute;z-index:2;width:7cqw;translate:-50% -50%;filter:drop-shadow(0 .5cqw .6cqw #0006)}
.qs-station svg,.qs-pip svg{width:100%;display:block}
.qs-pip{position:absolute;z-index:4;width:7cqw;translate:-50% -50%;opacity:0;scale:.4;transition:opacity .6s,scale .7s cubic-bezier(.2,.9,.3,1.5)}
.ev-pip .qs-pip{opacity:1;scale:1}
.qs-pip-bob{display:block;width:55%;animation:qs-bob 1.8s ease-in-out infinite}
.qs-pip-skull{position:absolute;right:-20%;bottom:0;width:55%}
.qp-eyes{animation:qp-blink 4s infinite;transform-origin:60px 47px}
.qp-bulb{animation:qs-pulse 1.4s ease-in-out infinite}
.qs-holo,.qs-pip,.qs-plaque{pointer-events:none}

/* Screen overlays */
.qs-vignette{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 60%,#0008)}
.qs-title{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;color:#ffe7a3;text-shadow:0 .3cqw 1.2cqw #000;animation:qs-title-in 1.2s ease-out both;pointer-events:none}
.qs-title::before,.qs-title::after{content:'';position:absolute;left:0;right:0;height:10%;background:#000;animation:qs-bars 1s ease-out both}
.qs-title::before{top:0}.qs-title::after{bottom:0}
.qs-title span{font:800 1.6cqw ui-rounded,'Segoe UI',sans-serif;letter-spacing:.5cqw;text-transform:uppercase;color:#fff8ea}
.qs-title b{font:900 5cqw/1.05 Georgia,serif;text-align:center;padding:0 6cqw}
.qs-title.out{animation:qs-title-out .9s ease-in both}
.qs-warp{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#d8fffb,#3ce0d0 20%,#0b2a33 60%,#000)}
.qs-warp i{position:absolute;left:50%;top:50%;width:20cqw;height:20cqw;translate:-50% -50%;border-radius:50%;border:1cqw solid #bffff8;box-shadow:0 0 4cqw #3ce0d0;opacity:0}
.ev-warp .qs-warp{animation:qs-warp 4.2s ease-in-out forwards}
.ev-warp .qs-warp i{animation:qs-tunnel 1.1s linear infinite}
.qs-warp i:nth-child(2){animation-delay:.28s!important}.qs-warp i:nth-child(3){animation-delay:.55s!important}.qs-warp i:nth-child(4){animation-delay:.82s!important}
.ev-warp .qs-world{scale:1.4;filter:blur(.6cqw) brightness(1.6);transition:scale 2.5s ease-in,filter 2.5s ease-in}
.qs-confetti{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.qs-confetti i{position:absolute;top:-6%;width:1cqw;height:1.6cqw;background:hsl(var(--h) 85% 62%);opacity:0}
.ev-party .qs-confetti i{animation:qs-confetti 3.4s var(--d) ease-in infinite}
.ev-hop .qs-world{animation:qs-hop .5s ease-in-out 3}
.qs-toasts{position:absolute;z-index:9;right:2%;top:3%;display:flex;flex-direction:column;gap:.8cqw;pointer-events:none}
.qs-toast{display:flex;align-items:center;gap:.8cqw;padding:.8cqw 1.4cqw;border-radius:1.2cqw;background:#fff8ea;color:#3b2160;font:700 max(1.3cqw,12px) ui-rounded,'Segoe UI',sans-serif;box-shadow:0 0 0 .25cqw #f6cf72,0 1cqw 2cqw #0007;animation:qs-toast 3.8s ease both}
.qs-toast span{font-size:max(2cqw,18px)}.qs-toast b{color:#a86b00}

/* Fit boards */
.qs-board{position:absolute;inset:0;z-index:6;background:#0c0a18a6}
.qs-board-bridge,.qs-board-skull{background:linear-gradient(transparent 60%,#0c0a18b0)}
.qs-blueprint{position:absolute;left:30%;top:5%;width:62%;height:60%;border-radius:1.4cqw;background:#123552 repeating-linear-gradient(0deg,#9fd6ff14 0 1px,transparent 1px 2.4cqw),repeating-linear-gradient(90deg,#9fd6ff14 0 1px,transparent 1px 2.4cqw);border:.25cqw solid #9fd6ff66}
.qs-blueprint svg{position:absolute;inset:4%;width:92%;height:92%}
.qs-outline *{fill:#9fd6ff12;stroke:#9fd6ff;stroke-width:1.6;stroke-dasharray:5 4}
.qs-mapframe{position:absolute;left:15%;top:16%;width:70%;height:48%;border-radius:1.2cqw;background:#e9d6a8;border:.3cqw solid #7a5a36;box-shadow:0 1cqw 3cqw #0008}
.qs-mapframe b{position:absolute;left:50%;top:-3.2cqw;translate:-50% 0;color:#ffe7a3;font:900 1.6cqw Georgia,serif;letter-spacing:.3cqw}
.qs-rocks span{position:absolute;height:10%;display:block;filter:drop-shadow(0 .5cqw .5cqw #0007)}
.qs-rocks svg{width:100%;height:100%}
.qs-slot{position:absolute;z-index:1;border:.3cqw dashed #9fd6ff;border-radius:1cqw;background:#9fd6ff1a;padding:.3cqw;cursor:pointer;animation:qs-ring 2s ease-in-out infinite}
.qs-board-map .qs-slot{border-color:#7a5a36;background:#7a5a361a}
.qs-board-bridge .qs-slot{border-color:#fff3b0;background:#fff3b022}
.qs-slot.filled{animation:none;border-style:solid;border-color:#f6cf72;background:transparent;box-shadow:0 0 2cqw #f6cf7288}
.qs-slot svg{width:100%;height:100%;display:block}
.qs-slot:focus-visible{outline:.3cqw solid #fff}
.qs-tray{position:absolute;z-index:2;left:2%;right:2%;bottom:2.5%;height:27%;display:flex;gap:1.2cqw;justify-content:center;align-items:stretch}
.qs-piece{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4cqw;width:16cqw;padding:.8cqw;border-radius:1.4cqw;border:.25cqw solid #f0dfb5;background:#fff8ea;color:#3b2160;font:800 max(1.2cqw,11px) ui-rounded,'Segoe UI',sans-serif;cursor:grab;touch-action:none;transition:box-shadow .2s,scale .2s}
.qs-piece-art{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;transition:rotate .5s cubic-bezier(.3,1.4,.5,1)}
.qs-piece-art svg{max-width:100%;max-height:100%}
.qs-piece.upside .qs-piece-art{rotate:180deg}
.qs-piece.selected{box-shadow:0 0 0 .35cqw #5b3a9c,0 0 2cqw #f6cf72;scale:1.04}
.qs-piece.dragging{z-index:20;cursor:grabbing;box-shadow:0 2cqw 3cqw #000a;scale:1.08;transition:none}
.qs-turn{position:absolute;top:-1.4cqw;right:-1cqw;padding:.4cqw 1cqw;border-radius:99px;background:#5b3a9c;color:#fff;font:900 max(1.2cqw,12px) ui-rounded,'Segoe UI',sans-serif;cursor:pointer;box-shadow:0 .3cqw 0 #3b2463;animation:qs-pulse 1.4s ease-in-out infinite}

/* Breathing while the big dinosaur passes */
.qs-hide{position:absolute;left:-2%;right:-2%;bottom:-4%;height:52%;z-index:5;pointer-events:none;filter:blur(.15cqw) brightness(.75)}
.qs-hide svg{width:100%;height:100%;display:block}
.qs-breath{position:absolute;z-index:6;left:50%;top:40%;width:20cqw;height:20cqw;translate:-50% -50%;display:grid;place-items:center;color:#fff8ea;text-align:center}
.qs-breath b{position:relative;z-index:1;font:900 max(2cqw,15px) ui-rounded,'Segoe UI',sans-serif;text-shadow:0 .2cqw .8cqw #000}
.qs-breath-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#bffff866,#3ce0d033 60%,transparent 72%);border:.4cqw solid #bffff8aa;box-shadow:0 0 4cqw #3ce0d088;scale:.75;transition:scale 4s ease-in-out}
.qs-breath[data-phase="in"] .qs-breath-ring{scale:1.45;transition-duration:4s}
.qs-breath[data-phase="out"] .qs-breath-ring{scale:.75;transition-duration:5s}
.qs-breath-dots{position:absolute;bottom:-3cqw;display:flex;gap:.8cqw}
.qs-breath-dots i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#ffffff44;border:.15cqw solid #fff}
.qs-breath-dots i.on{background:#7ff7ec}

/* Heights */
.qs-heights{position:absolute;inset:0;z-index:6;background:linear-gradient(#8fd0f5ee,#d9f0fbee 70%,#bfe3a0ee)}
.qs-h-stage{position:absolute;left:3%;right:3%;top:6%;height:66%}
.qs-h-item{position:absolute;bottom:0;height:var(--h);width:20%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;opacity:0;transition:height 1s cubic-bezier(.3,1,.4,1),opacity .6s}
.qs-h-item.show{opacity:1}
.qs-h-art{flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.qs-h-art svg{height:100%;max-width:100%}
.qs-h-item b{position:absolute;bottom:-2.6cqw;font:900 max(1.4cqw,12px) ui-rounded,'Segoe UI',sans-serif;color:#2b1d14}
.qs-h-item small{position:absolute;bottom:-4.4cqw;font:700 max(1.1cqw,10px) ui-rounded,'Segoe UI',sans-serif;color:#3a4a3a}
.qs-h-ground{position:absolute;left:0;right:0;bottom:-.4cqw;height:.6cqw;background:#5a7a3a;border-radius:99px}
.qs-h-steps{position:absolute;left:3%;right:3%;bottom:4%;display:flex;gap:1cqw;justify-content:center}
.qs-h-steps button{flex:1;max-width:20cqw;min-height:44px;border-radius:1.2cqw;border:.25cqw solid #f0dfb5;background:#fff8ea;color:#3b2160;font:900 max(1.4cqw,12px) ui-rounded,'Segoe UI',sans-serif;cursor:pointer}
.qs-h-steps button.on{background:#f6cf72;border-color:#b97a22}
.qs-h-steps button.seen:not(.on){border-color:#2e674b}

/* Time dial */
.qs-dial{position:absolute;z-index:6;left:50%;top:6%;width:34cqw;height:34cqw;translate:-50% 0}
.qs-dial-face{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#3a2a52 0 54%,#c9a24a 55% 58%,#2a1d3e 59%);box-shadow:0 0 0 .5cqw #8a6a26,0 2cqw 4cqw #000a}
.qs-dial-seg{position:absolute;left:50%;top:50%;width:10cqw;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:.3cqw;color:#ffe7a3;font:900 max(1.2cqw,11px) ui-rounded,'Segoe UI',sans-serif}
.qs-dial-seg svg{width:9cqw;border-radius:.8cqw}
.qs-dial-seg.seg0{translate:-140% -80%}.qs-dial-seg.seg1{translate:-50% -140%}.qs-dial-seg.seg2{translate:40% -80%}
.qs-dial-seg{z-index:2}
.qs-dial-hand{position:absolute;z-index:1;left:50%;top:50%;width:1cqw;height:8cqw;translate:-50% -100%;transform-origin:50% 100%;rotate:var(--turn);border-radius:99px;background:linear-gradient(#ffe7a3,#c9a24a);box-shadow:0 0 1cqw #f6cf72;transition:rotate 1s cubic-bezier(.3,1.6,.5,1)}
.qs-dial-hub{position:absolute;left:50%;top:50%;width:3.4cqw;height:3.4cqw;translate:-50% -50%;border-radius:50%;background:#f6cf72;box-shadow:0 0 0 .4cqw #8a6a26}
.qs-dial.locked .qs-dial-face{box-shadow:0 0 0 .5cqw #8a6a26,0 0 5cqw #3ce0d0}
.qs-dial.wobble .qs-dial-hand{animation:qs-wobble .6s ease-in-out}

/* HUD */
.qs-hud{padding:12px 18px 18px}
.qs-chapters{display:flex;justify-content:center;gap:6px;list-style:none;margin:0 0 8px;padding:0}
.qs-chapters li{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ffffff14;color:#bfb0dc;font:900 12px ui-rounded,'Segoe UI',sans-serif}
.qs-chapters li.done{background:#f6cf7255;color:#ffe7a3}
.qs-chapters li.current{background:#f6cf72;color:#3b2160;box-shadow:0 0 12px #f6cf72aa}
.qs-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:4px auto 10px;max-width:900px}
.qs-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(200px,30%);padding:10px 10px 12px;border-radius:18px;border:3px solid #f0dfb5;background:#fff8ea;color:#3b2160;font:800 15px/1.2 ui-rounded,'Segoe UI',sans-serif;cursor:pointer;transition:translate .2s,box-shadow .2s}
.qs-opt:hover:not(:disabled),.qs-opt:focus-visible{translate:0 -3px;box-shadow:0 0 18px #f6cf72aa;border-color:#f6cf72}
.qs-opt-art{height:96px;width:100%;display:flex;align-items:center;justify-content:center}
.qs-opt-art svg{max-height:96px;max-width:100%}
.qs-opt.seen{border-color:#c9b9e6}
.qs-opt.tried{opacity:.7}
.qs-opt.right{border-color:#f6cf72;box-shadow:0 0 20px #f6cf72}
.qs-opt:disabled{cursor:default}
.qs-tick{position:absolute;top:6px;right:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#2e674b;color:#fff;font-size:14px}
.qs-again{font-size:12px;color:#5b3a9c}
.qs-found{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 10px}
.qs-found span{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:2px dashed #8f7bb8;color:#bfb0dc;font-weight:800}
.qs-found span.got{border:2px solid #f6cf72;background:#fff8ea;color:#3b2160}
.qs-found span.optional{opacity:.75}
.qs-tip{color:#d9cdee;font-weight:700;margin:4px 0 8px;text-align:center}
.qs-journal-count{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:4px;border-radius:99px;background:#5b3a9c;color:#fff;font-size:12px}
.no-captions .qs-caption{display:none}

/* Journal + finish */
.qs-journal{border:0;padding:0;background:transparent;width:min(860px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 24px)}
.qs-journal::backdrop{background:#140c26c4}
.qs-journal-inner{padding:20px;border-radius:24px;background:linear-gradient(#fffaf0,#f3e3c0);border:4px solid #f6cf72;max-height:calc(100svh - 24px);overflow:auto}
.qs-journal-head{display:flex;justify-content:space-between;align-items:center}.qs-journal-head h2{margin:0;font-family:Georgia,serif;color:#3b2463}
.qs-journal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:14px 0}
.qs-entry{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:2px dashed #cdbb9a;background:#ffffff80;color:#8a7a66;font:700 14px/1.3 ui-rounded,'Segoe UI',sans-serif}
.qs-entry span{font-size:28px}
.qs-entry.got{border:2px solid #e2c47e;background:#fff;color:#3b2160}
.qs-journal-note{margin:0;color:#6b5a80;font-weight:700}
.qs-finish-hero{width:260px;margin:0 auto;filter:drop-shadow(0 0 20px #f6cf72aa)}
.qs-finish-hero svg{width:100%}
.qs-finish-grid .qs-entry{background:#ffffff14;border-color:#f6cf7266;color:#fff8ea}

.qs-rotate{display:none;margin:0;padding:8px 12px;background:#2c1a52;color:#ffe7a3;font:800 14px ui-rounded,'Segoe UI',sans-serif;text-align:center}
@media (max-width:650px) and (orientation:portrait){.qs-rotate{display:block}}
@media (max-width:650px){
 .qs-card{border-width:3px;border-radius:18px}
 .qs-hud{padding:10px}
 .qs-cards .qs-opt{width:calc(50% - 6px)}
 .qs-chapters li{width:20px;height:20px;font-size:10px}
 .qs-piece{width:22cqw}
}

@keyframes qs-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.035) translate(-.6%,-.4%)}}
@keyframes qs-glint{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes qs-portal-hue{0%,100%{filter:url(#qs-swirl) saturate(1.35) brightness(1.05) hue-rotate(0deg)}50%{filter:url(#qs-swirl) saturate(1.6) brightness(1.25) hue-rotate(-12deg)}}
@keyframes qs-pulse{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.08}}
@keyframes qs-spark{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(2cqw,-8cqw);opacity:0}}
@keyframes qs-ray{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes qs-mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}85%{opacity:.7}100%{transform:translate(var(--dx),-14cqw);opacity:0}}
@keyframes qs-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,1.012)}}
@keyframes qs-graze{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-3deg) translateY(1.5%)}55%{transform:rotate(-2deg) translateY(1%)}70%{transform:rotate(-3.5deg) translateY(1.8%)}}
@keyframes qs-bfly{0%,100%{transform:translate(0,0)}25%{transform:translate(4cqw,-2cqw)}50%{transform:translate(7cqw,1cqw)}75%{transform:translate(3cqw,3cqw)}}
@keyframes qs-flap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
@keyframes qs-bird{from{transform:translateX(-10cqw)}to{transform:translateX(110cqw)}}
@keyframes qs-dapple{from{transform:translate(0,0)}to{transform:translate(3%,2%)}}
@keyframes qs-leaf{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(6cqw,60cqw) rotate(540deg);opacity:0}}
@keyframes qs-ring{0%,100%{scale:1;opacity:.85}50%{scale:1.1;opacity:1}}
@keyframes qs-blink{50%{opacity:.2}}
@keyframes qs-shine{from{filter:brightness(2.4);letter-spacing:.6cqw}to{filter:none}}
@keyframes qs-flicker{0%,100%{opacity:1}48%{opacity:.85}50%{opacity:.4}52%{opacity:.9}}
@keyframes qs-giant{0%{opacity:0;transform:translateX(0)}20%{opacity:.45}80%{opacity:.4}100%{opacity:0;transform:translateX(45cqw)}}
@keyframes qs-allo{0%{left:8%;opacity:0}10%{opacity:.8}85%{opacity:.8}100%{left:58%;opacity:0}}
@keyframes qs-stride{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-2%) rotate(1deg)}}
@keyframes qs-ripple{from{transform:scale(.2);opacity:.9}to{transform:scale(1.4);opacity:0}}
@keyframes qs-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-.3%,.4%)}50%{transform:translate(.3%,-.2%)}75%{transform:translate(-.2%,.3%)}}
@keyframes qs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes qp-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes qs-title-in{from{opacity:0;letter-spacing:1cqw}to{opacity:1}}
@keyframes qs-bars{from{height:0}}
@keyframes qs-title-out{to{opacity:0}}
@keyframes qs-warp{0%{opacity:0}15%{opacity:.85}75%{opacity:1}88%{opacity:1;filter:brightness(2.2)}100%{opacity:0}}
@keyframes qs-tunnel{from{scale:.1;opacity:1;rotate:0deg}to{scale:6;opacity:0;rotate:90deg}}
@keyframes qs-confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(62cqw) rotate(720deg);opacity:.8}}
@keyframes qs-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5%)}}
@keyframes qs-toast{0%{opacity:0;transform:translateX(40%)}12%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
@keyframes qs-wobble{0%,100%{rotate:var(--turn)}30%{rotate:calc(var(--turn) - 12deg)}60%{rotate:calc(var(--turn) + 8deg)}}

/* Reduce motion: same story, no movement. Camera cuts instead of gliding; the warp is a simple fade. */
:root[data-reduced="true"] .qs-card *,:root[data-reduced="true"] .qs-card{animation:none!important;transition:none!important}
:root[data-reduced="true"] .qs-mote,:root[data-reduced="true"] .qs-leaf,:root[data-reduced="true"] .qs-bfly,:root[data-reduced="true"] .qs-spark,:root[data-reduced="true"] .qs-birds{display:none}
:root[data-reduced="true"] .ev-pass .qs-allo-walk{left:40%;opacity:.8}
:root[data-reduced="true"] .ev-warp .qs-warp{opacity:.9}
:root[data-reduced="true"] .ev-warp .qs-world{scale:1;filter:none}
@media (prefers-reduced-motion:reduce){.qs-card *,.qs-card{animation:none!important;transition:none!important}.qs-mote,.qs-leaf,.qs-bfly,.qs-spark,.qs-birds{display:none}.ev-pass .qs-allo-walk{left:40%;opacity:.8}}