/* A coastal stepping-stone trail for the island's number puzzles. */
.game[data-scene=sequence] .stage{border-top-color:#819f75;background:linear-gradient(155deg,#fbfcf2,#edf5e7)}
.game[data-scene=sequence] .scene-landmark--sequence{display:none}
.game[data-scene=sequence] .path-equations{display:flex;flex-wrap:wrap;gap:.45rem;margin:.85rem 0;color:#315f50}
.game[data-scene=sequence] .path-equations span{padding:.45rem .7rem;border:1px solid #cfdec4;border-radius:10px;background:#f5faef;color:#315f50;font-size:.92rem;font-weight:750}
/* The numbers sit directly on the four photographed stones. Keep the full 3:1 image visible. */
.game[data-scene=sequence] .sequence{position:relative;display:block;min-height:0;aspect-ratio:3/1;margin:1rem 0 1.2rem;padding:0;overflow:hidden;border:1px solid #a9c7af;border-radius:20px;background:#e6d1a1 url('/assets/lighthouse/number-path-stones-v1.jpg') center/100% 100% no-repeat;box-shadow:0 4px 0 #cbdcc8}
.game[data-scene=sequence] .sequence::before{content:none}
.game[data-scene=sequence] .sequence span{position:absolute;display:grid;place-items:center;width:19%;max-width:none;min-width:0;height:43%;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:46% 50% 45% 49%;background:transparent;color:#29251e;box-shadow:none;transform:translate(-50%,-50%);text-align:center;text-shadow:0 1px 1px #fff9;font-size:clamp(1.1rem,4vw,2.1rem);font-weight:850;line-height:1;font-variant-numeric:tabular-nums}
.game[data-scene=sequence] .sequence span:nth-child(1){left:15.8%;top:50.5%}
.game[data-scene=sequence] .sequence span:nth-child(2){left:38.3%;top:49%}
.game[data-scene=sequence] .sequence span:nth-child(3){left:61%;top:52%}
.game[data-scene=sequence] .sequence span:nth-child(4){left:84.2%;top:55%}
.game[data-scene=sequence] .sequence span.missing{border:2px dashed #995d12;background:#fff2c633;color:#65400c;box-shadow:0 0 0 1px #fff4cf70}
.game[data-scene=sequence] .story-solved .sequence span.missing,.game[data-scene=sequence] .path-correct .sequence span.missing{border:2px solid #357247;background:#d6f4cc66;color:#174b2d;box-shadow:0 0 0 2px #ecffe299;animation:path-stone-success 1.2s ease-out both}
.path-progress{display:grid;gap:.5rem;margin:.8rem 0 1rem;padding:.8rem 1rem;border:1px solid #bfd5bc;border-radius:14px;background:#f4faed;color:#315b45}
.path-progress-label{font-size:.85rem;font-weight:800}
.path-progress-steps{display:flex;gap:.45rem;align-items:center}
.path-progress-step{display:grid;place-items:center;width:2rem;height:1.65rem;border:1px solid #aebd9d;border-radius:48%;background:linear-gradient(#eee9da,#cfc9b6);color:#53634e;font-size:.75rem;font-weight:800;box-shadow:0 2px 0 #aaa88a66}
.path-progress-step.is-done,.path-progress-step.done{border-color:#598b5b;background:linear-gradient(#c6e7b9,#8fbf88);color:#194b2f}
.path-progress-step.is-current,.path-progress-step.current,.path-progress-step[aria-current]{outline:2px solid #bc852e;outline-offset:2px}
@keyframes path-stone-success{0%,100%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.08)}}
@media(max-width:390px){.game[data-scene=sequence] .sequence{border-radius:15px}.game[data-scene=sequence] .sequence span{font-size:1.1rem}.game[data-scene=sequence] .sequence span.missing{border-width:1.5px}.game[data-scene=sequence] .path-equations span{font-size:.83rem}.path-progress{padding:.7rem .8rem}}
@media(prefers-reduced-motion:reduce){.game[data-scene=sequence] .story-solved .sequence span.missing,.game[data-scene=sequence] .path-correct .sequence span.missing{animation:none}}
/* Each solved path moves farther along the shore. */
.game[data-scene=sequence] .sequence[data-path="2"]{background-image:url('/assets/lighthouse/number-path-stones-v2.jpg')}
.game[data-scene=sequence] .sequence[data-path="3"]{background-image:url('/assets/lighthouse/number-path-stones-v3.jpg')}
.game[data-scene=sequence] .sequence[data-path="4"]{background-image:url('/assets/lighthouse/number-path-stones-v4.jpg')}
.game[data-scene=sequence] .sequence[data-path="5"]{background-image:url('/assets/lighthouse/number-path-stones-v5.jpg')}
.path-celebrating [hidden]{display:none!important}
.path-reward{text-align:center;padding:.4rem .6rem 1.2rem}
.path-reward-art{position:relative;isolation:isolate;width:min(230px,65%);aspect-ratio:1;margin:0 auto;animation:path-reward-arrive .8s ease-out both}
.path-reward-art::before{content:'';position:absolute;inset:5%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#fff6ca,#ffe6a080 48%,transparent 70%)}
.path-reward-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px #98793d66)}
.path-reward-sparkle{position:absolute;left:calc(10% + var(--spark)*11%);top:22%;color:#b98519;font-size:1.25rem;text-shadow:0 0 7px #fff5a2;animation:path-reward-sparkle 1.7s ease-out both;animation-delay:calc(var(--spark)*.12s)}
.path-reward h4{margin:.4rem 0;font:700 clamp(1.6rem,4vw,2.2rem)/1.15 Georgia,serif;color:#514522}
.path-reward p{max-width:34rem;margin:.7rem auto 1.3rem;line-height:1.5;color:#485d48}
 .path-reward-sparkle:nth-child(3n){top:62%}.path-reward-sparkle:nth-child(3n+1){top:38%}
@keyframes path-reward-arrive{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
@keyframes path-reward-sparkle{0%{opacity:0;transform:translateY(18px) scale(.5)}40%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.path-reward-art,.path-reward-sparkle{animation:none}.path-reward-sparkle{opacity:.7}}
/* A correct number lands on the missing stepping stone. */
.game[data-scene=sequence] .sequence .path-number{display:block;font:inherit;line-height:1}
.game[data-scene=sequence] .path-correct .sequence .missing .path-number{animation:path-number-lands 1.3s cubic-bezier(.18,.65,.25,1) both}
.game[data-scene=sequence] .path-correct .sequence .missing::before,.game[data-scene=sequence] .path-correct .sequence .missing::after{content:'✦';position:absolute;z-index:2;color:#fff5a7;text-shadow:0 1px 3px #7d5e1c,0 0 8px #ffdf6a;font-size:clamp(1rem,3vw,1.7rem);opacity:0;pointer-events:none;animation:path-number-spark 1.3s ease-out .45s both}
.game[data-scene=sequence] .path-correct .sequence .missing::before{left:-12%;top:-14%}
.game[data-scene=sequence] .path-correct .sequence .missing::after{right:-12%;top:10%;animation-delay:.6s}
@keyframes path-number-lands{0%{opacity:0;transform:translateY(-70px) scale(1.7) rotate(-12deg)}35%{opacity:1}68%{transform:translateY(5px) scale(1.15) rotate(4deg)}85%{transform:translateY(-5px) scale(1.05) rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes path-number-spark{0%{opacity:0;transform:translateY(12px) scale(.5)}35%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.game[data-scene=sequence] .path-correct .sequence .missing .path-number{animation:none}.game[data-scene=sequence] .path-correct .sequence .missing::before,.game[data-scene=sequence] .path-correct .sequence .missing::after{animation:none;display:none}}

/* At the end of the trail, see the moon lens where it was found. */
.path-reward .path-reward-art{width:100%;max-width:720px;aspect-ratio:3/1;margin:0 auto 1rem;overflow:hidden;border:1px solid #a9c7af;border-radius:20px;background:#e6d1a1;box-shadow:0 4px 0 #cbdcc8}
.path-reward .path-reward-art::before{content:none}
.path-reward .path-reward-art img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.path-reward .path-reward-sparkle{left:calc(71% + var(--spark)*6%);top:18%;font-size:clamp(.55rem,1.6vw,.85rem);color:#fff8c9;text-shadow:0 1px 4px #8e6421,0 0 9px #ffdd70}
.path-reward .path-reward-sparkle:nth-child(3n){top:68%}
.path-reward .path-reward-sparkle:nth-child(3n+1){top:35%}
@media(max-width:390px){.path-reward .path-reward-art{border-radius:15px}}
/* First take in the whole trail, then move closer to the discovered piece. */
.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"]) img{transform-origin:86% 58%;animation:path-discovery-focus 3.6s ease-in-out both}
.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"])::after{content:'';position:absolute;left:86%;top:58%;width:19%;aspect-ratio:1;border:2px solid #fff6c9;border-radius:50%;box-shadow:0 0 10px #ffe89c,0 0 25px #ffdc73;opacity:0;transform:translate(-50%,-50%) scale(.8);pointer-events:none;animation:path-discovery-glow 1.4s ease-out 2.2s both}
.path-reward .path-reward-art .path-reward-sparkle{animation:none;opacity:0}
.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"]) .path-reward-sparkle{animation:path-reward-sparkle 1.7s ease-out both;animation-delay:calc(2.2s + var(--spark)*.12s)}
@keyframes path-discovery-focus{0%,35%{transform:scale(1)}100%{transform:scale(1.75)}}
@keyframes path-discovery-glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}45%{opacity:.85}100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"]) img,.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"])::after,.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"]) .path-reward-sparkle{animation:none}.path-reward .path-reward-art[data-loaded="true"]:not([data-fallback="true"])::after{opacity:.55;transform:translate(-50%,-50%)}}