/* An unopened result packet changes only with completed questions. */
.quiz-page{--journey-accent:#e9ff43;position:relative}
.quiz-page[data-stage="1"]{--journey-accent:#e4ee72}
.quiz-page[data-stage="2"]{--journey-accent:#e9ff43}
.quiz-page[data-stage="3"]{--journey-accent:#ff8665}
.quiz-page .progress{height:4px;overflow:visible;position:relative;background:#e5e7dc}
.quiz-page .progress>span{position:relative;background:var(--ink)}
.quiz-page .progress>span::after{content:'';position:absolute;right:-3px;top:-2px;width:8px;height:8px;background:var(--journey-accent);border:1px solid var(--ink);transform:rotate(45deg)}
.quiz-page .progress[aria-valuenow="0"]>span::after{display:none}
.quiz-page .question-content{padding-top:20px;padding-bottom:2px;gap:16px;min-height:0}
.quiz-page .auto-hint{margin-top:0;min-height:23px;font-size:11px;padding:5px 0 3px}
.quiz-page .question-title:focus{outline:none}
.reveal-trail{display:flex;align-items:center;justify-content:center;gap:19px;flex-shrink:0;width:100%;height:108px;position:relative;isolation:isolate}
.mystery-pack{width:68px;height:78px;position:relative;transform:rotate(-7deg);flex-shrink:0}
.pack-paper{position:absolute;inset:8px 0 0;background:var(--journey-accent);border:2px solid var(--ink);border-radius:2px;box-shadow:3px 3px 0 var(--ink);overflow:hidden;z-index:2}
.pack-paper::before,.pack-paper::after{content:'';position:absolute;top:6px;bottom:6px;width:2px;border-left:1px dashed var(--ink);opacity:.55}
.pack-paper::before{left:5px}.pack-paper::after{right:4px}
.pack-mark{position:absolute;inset:0;display:grid;place-items:center;font:900 39px/1 Arial,sans-serif;transform:rotate(8deg);padding-bottom:2px}
.pack-flap{position:absolute;top:8px;left:0;width:68px;height:23px;border:2px solid var(--ink);background:#f7f8f1;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);z-index:3;transform-origin:center top}
.pack-seal{position:absolute;left:26px;top:22px;width:20px;height:20px;background:var(--ink);color:var(--paper);display:grid;place-items:center;line-height:1;font-size:16px;border-radius:50%;z-index:4}
.pack-peek{position:absolute;left:7px;right:7px;top:10px;height:31px;background:var(--ink);border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;z-index:1}
.pack-peek i{width:14px;height:18px;background:var(--paper);border-radius:50%;position:relative}
.pack-peek i::after{content:'';position:absolute;width:5px;height:7px;border-radius:50%;background:var(--ink);right:3px;bottom:3px}
.pack-aura{position:absolute;inset:-8px -15px;background:var(--journey-accent);border-radius:50%;opacity:0;z-index:-1;transform:scale(.8)}
.pack-tear{position:absolute;left:0;right:0;top:8px;border-top:2px dashed var(--ink);opacity:0}
.trail-copy{min-width:166px;position:relative}
.trail-label{font-size:13px;font-weight:750;letter-spacing:-.02em}
.trail-seals{display:flex;align-items:center;gap:8px;margin-top:11px}
.trail-seals>span{height:19px;width:28px;border:1px solid #c5c9bd;color:#858a7e;background:var(--paper);display:grid;place-items:center;font-size:12px;line-height:1;transform:rotate(-5deg)}
.trail-seals>span:nth-child(2n){transform:rotate(4deg)}
.trail-seals>.is-open{color:var(--ink);border-color:var(--ink);background:var(--journey-accent);box-shadow:1px 1px 0 var(--ink);font-weight:900}
.checkpoint-note{position:absolute;bottom:calc(100% + 7px);left:0;font-size:11px;font-weight:800;color:var(--ink);background:var(--journey-accent);padding:3px 6px;transform:rotate(-4deg);white-space:nowrap}
.checkpoint-note:empty{display:none}
.reveal-trail[data-stage="1"] .pack-flap{transform:rotate(-12deg) translateY(-4px)}
.reveal-trail[data-stage="1"] .pack-seal{transform:translate(28px,8px) rotate(22deg)}
.reveal-trail[data-stage="2"] .pack-flap,.reveal-trail[data-stage="3"] .pack-flap{transform:translateY(-8px) rotate(-24deg)}
.reveal-trail[data-stage="2"] .pack-seal,.reveal-trail[data-stage="3"] .pack-seal{transform:translate(34px,26px) rotate(35deg)}
.reveal-trail[data-stage="2"] .pack-peek{transform:translateY(-9px)}
.reveal-trail[data-stage="3"] .pack-peek{transform:translateY(-17px)}
.reveal-trail[data-stage="3"] .pack-paper{clip-path:polygon(0 3%,10% 0,22% 5%,33% 1%,45% 6%,55% 0,66% 5%,80% 0,91% 6%,100% 2%,100% 100%,0 100%)}
.reveal-trail[data-stage="3"] .pack-flap{transform:translate(-6px,-14px) rotate(-34deg)}
.reveal-trail[data-stage="3"] .pack-tear{opacity:.4}
.reveal-trail.is-last .pack-aura{opacity:.45;transform:scale(1)}
.reveal-trail.is-last .pack-paper{transform:rotate(4deg)}
.reveal-trail.is-last .pack-peek{transform:translateY(-21px) rotate(8deg)}
.reveal-trail.is-last .trail-label{font-size:16px;font-weight:900}
.result-unseal{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;overflow:hidden}
.unseal-half{position:absolute;inset:-2px;background:var(--acid);border:2px solid var(--ink);display:grid;place-items:center}
.unseal-half:first-child{clip-path:polygon(0 0,55% 0,48% 20%,57% 39%,48% 55%,56% 79%,49% 100%,0 100%)}
.unseal-half:last-child{clip-path:polygon(55% 0,100% 0,100% 100%,49% 100%,56% 79%,48% 55%,57% 39%,48% 20%)}
.unseal-half::before{content:'?';font:900 140px/1 Arial,sans-serif;color:var(--ink);transform:rotate(-9deg)}
@media(max-height:620px){
 .reveal-trail{height:81px;gap:17px}
 .mystery-pack{transform:rotate(-7deg) scale(.78);margin:-7px}
 .quiz-page .question-content{padding-top:12px;gap:12px}
 .quiz-page .question-title{font-size:1.3rem;line-height:1.48}
 .quiz-page .answer-skip{margin-top:5px}
 .trail-label{font-size:12px}.trail-seals{margin-top:7px}.checkpoint-note{bottom:calc(100% + 3px)}
}
@media(max-height:460px) and (min-width:600px){
 .reveal-trail{height:65px}.mystery-pack{transform:rotate(-7deg) scale(.66);margin:-12px}
 .quiz-page .question-content{padding-top:10px;gap:30px}
 .quiz-page .question-title{font-size:1.3rem}
 .trail-copy{display:flex;align-items:center;gap:18px;min-width:0}.trail-seals{margin-top:0}
 .checkpoint-note{left:0;bottom:calc(100% + 2px)}
}
/* The peeled flap sits behind the eyes, so the peek stays readable. */
.reveal-trail[data-stage="2"] .pack-flap,.reveal-trail[data-stage="3"] .pack-flap{z-index:0}
.pack-peek{align-items:flex-start;padding-top:4px}
.pack-peek i{height:14px}
.pack-peek i::after{height:5px}

.trail-copy{min-width:0}.trail-seals{margin-top:0}
.checkpoint-note.sr-only{width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden}