.mystery-progress { --step-accent:#e5c687;--step-muted:#83909f;--step-track:#3a4855;display:flex;list-style:none;padding:0;margin:18px auto 24px;max-width:480px;gap:0;font:12px/1.3 'Segoe UI',Arial,sans-serif; }
.mystery-progress li { position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--step-muted); }
.mystery-progress li:not(:first-child)::before { content:'';position:absolute;height:2px;background:var(--step-track);width:calc(100% - 36px);right:calc(50% + 18px);top:15px; }
.mystery-progress-number { display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;border:1px solid var(--step-track);border-radius:50%;font-size:13px; }
.mystery-progress .is-current,.mystery-progress .is-complete {color:var(--step-accent)}
.mystery-progress .is-current {font-weight:700}
.mystery-progress .is-current .mystery-progress-number {border-color:var(--step-accent);box-shadow:0 0 0 3px #d8b86b19}
.mystery-progress .is-complete .mystery-progress-number {border-color:var(--step-accent);background:var(--step-accent);color:#1a1a18}
.mystery-progress .is-current::before,.mystery-progress .is-complete::before {background:var(--step-accent)!important}
.star-note .mystery-progress {--step-accent:#795126;--step-muted:#8b806f;--step-track:#c4b598}
.star-note .mystery-progress .is-complete .mystery-progress-number {color:#fff5df}
.alchemy-puzzle .mystery-progress {
 --step-accent:#e8c36f;--step-muted:#9c8c72;--step-track:#66563e;
 position:absolute;top:10px;left:50%;z-index:12;
 width:min(520px,calc(100vw - 100px));margin:0;transform:translateX(-50%);
}
.alchemy-puzzle .mystery-progress .is-complete .mystery-progress-number {color:#231408}
@media(max-width:480px) { .mystery-progress {font-size:11px;margin:14px auto 20px} }

.mystery-step-button {display:flex;flex-direction:column;align-items:center;gap:7px;border:0;padding:0 6px;background:transparent;color:inherit;font:inherit;cursor:pointer;}
.mystery-step-button:disabled {cursor:default;opacity:1;}
.mystery-step-button:focus-visible {outline:2px solid var(--step-accent);outline-offset:5px;border-radius:4px;}
.mystery-step-button:not(:disabled):hover .mystery-progress-number {box-shadow:0 0 0 3px #d8b86b33;}

/* Keep stage navigation in the same top position across desktop stages. */
@media(min-width:1024px){
 .constellation .mystery-progress,.star-note .mystery-progress {
 position:fixed;top:60px;left:50%;transform:translateX(-50%);
 width:480px;max-width:calc(100vw - 100px);margin:0;z-index:5;
 }
 .constellation .constellation-eyebrow {margin-bottom:84px;}
 .star-note[open] {padding-top:140px;}
}
@media(max-width:1023px){
 .star-note .mystery-progress {position:sticky;top:0;z-index:5;flex-shrink:0;}
}
@media(max-width:560px){
 .alchemy-puzzle .mystery-progress {top:7px;width:min(330px,calc(100vw - 82px));font-size:10px;}
 .alchemy-puzzle .mystery-progress-number {width:27px;height:27px;}
 .alchemy-puzzle .mystery-progress li:not(:first-child)::before {top:13px;}
}
