/* One card, one clear next action. Shared Moonlit materials and typography. */
.journey-shell{max-width:980px;margin:0 auto;padding:20px 22px calc(36px + env(safe-area-inset-bottom));min-height:100dvh}
.journey-top{display:flex;align-items:center;gap:16px;margin:20px 0 32px;padding-right:48px}
.journey-top>div{flex:1;min-width:0}.journey-top>div>span{font-size:14px}
.journey-progress{height:4px;background:var(--line);margin-top:9px;overflow:hidden;border-radius:4px}
.journey-progress i{display:block;height:100%;background:var(--accent);transition:width .25s}
.journey-stage{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.3fr);gap:46px;align-items:start;margin:30px 0}
.journey-image{border:0;background:none;padding:0;justify-self:center;position:sticky;top:30px;width:min(100%,245px)}
.journey-image img{width:100%;display:block;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.journey-image.is-reversed img{transform:rotate(180deg)}
.journey-copy h1{font-size:clamp(25px,3.1vw,36px);margin:10px 0 18px;line-height:1.35}.journey-copy>p{margin:14px 0}
.journey-note{padding:20px 0;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.journey-note p{margin:8px 0 0}.journey-scaffold{margin:20px 0}.journey-scaffold summary{min-height:44px;cursor:pointer;color:var(--accent);padding:10px 0}.journey-scaffold p{margin:12px 0}
.journey-options{display:grid;gap:12px;margin:22px 0}.journey-option{display:flex;align-items:flex-start;gap:12px;padding:16px;text-align:left;background:var(--paper);border:1px solid var(--control-line);border-radius:14px;min-height:60px;line-height:1.65;width:100%;font-size:16px;color:var(--ink)}
.journey-option>span:not(.letter){flex:1}.journey-option .letter{font-size:13px;padding-top:3px;color:var(--muted)}
.journey-option.correct{background:var(--success-bg);border:2px solid var(--success);color:var(--success)}.journey-option.incorrect{background:var(--error-bg);border:2px solid var(--error);color:var(--error)}
.journey-option:disabled{opacity:1;cursor:default}.journey-option:disabled:not(.correct):not(.incorrect){color:var(--muted)}
.journey-help{display:flex;justify-content:space-between}.journey-feedback{margin-top:24px;border-top:2px solid var(--line);padding:20px 0}.journey-feedback>strong{font-size:20px}.journey-feedback.correct>strong{color:var(--success)}.journey-feedback.incorrect>strong{color:var(--error)}.journey-feedback p{margin:12px 0 18px}
.journey-feedback .primary{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 0 0 7px var(--bg)}
.journey-compare{display:block;max-width:680px;margin-inline:auto}.compare-options{grid-template-columns:1fr 1fr}.compare-options .journey-option{flex-direction:column;align-items:center;text-align:center;padding:16px;position:relative}.compare-options img{width:min(100%,180px);height:auto;object-fit:contain;border-radius:5px}.compare-options .answer-marker{position:absolute;right:8px;top:8px;padding:3px;background:var(--paper);border-radius:50%}
.recall-ratings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.recall-ratings button{min-height:60px}
.journey-complete{max-width:510px;margin:25px auto}.journey-complete-image{float:right;width:115px;margin:0 0 20px 24px}.journey-complete-image img{width:100%;border-radius:6px;box-shadow:var(--shadow-card)}.journey-complete h1{margin:16px 0}.journey-complete>p{margin:18px 0}.journey-actions{display:grid;gap:12px;clear:both;padding-top:22px}.memory-anchor{font-family:var(--font-display);font-size:23px}
.memory-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:8px 0}.memory-level{color:var(--accent);border-bottom:1px solid var(--line);padding:2px 0}
.journey-recommend{display:grid;grid-template-columns:minmax(0,1fr) 126px;gap:22px;padding:24px 0 30px;border-bottom:1px solid var(--line);align-items:center}.journey-recommend h2{font-size:30px;margin:10px 0}.journey-recommend p{font-size:15px;margin:12px 0 20px}.journey-hero-image{padding:0;border:0;background:none}.journey-hero-image img{width:100%;border-radius:5px;box-shadow:var(--shadow-card)}
.journey-dashboard{margin:25px 0}.memory-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.memory-counts strong{font-size:30px;display:block;font-weight:500}.memory-counts span{font-size:12px;color:var(--muted)}.memory-log{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 25px;margin-top:24px}.memory-log button{display:flex;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--line);padding:14px 0;background:none;text-align:left}.memory-log img{width:45px;border-radius:3px}.memory-log button>span{flex:1}.memory-log .memory-state{margin-bottom:0}
.library-tools{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:30px 0 12px}.library-tools label{flex:1}.library-search{width:100%;min-height:46px;border:1px solid var(--control-line);border-radius:10px;background:var(--paper);padding:10px 14px;color:var(--ink);font:inherit}.library-basics{margin-top:36px;border-top:1px solid var(--line);padding-top:22px}.library-basics>summary{cursor:pointer;min-height:48px;color:var(--accent)}.library-basics .knowledge-grid{grid-template-columns:1fr 1fr}.legacy-quick{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.legacy-quick p{font-size:13px;color:var(--muted)}
.detail-memory-intro{margin:20px 0}.detail-memory-intro .memory-anchor{margin:12px 0}.detail-start{display:flex;flex-wrap:wrap;gap:12px;padding:14px 0}.detail-start .primary{flex:1}.card-dossier details{border-bottom:1px solid var(--line);padding:10px 0}.card-dossier summary{cursor:pointer;min-height:44px;padding:10px 0;color:var(--accent)}.card-dossier p{margin:12px 0}.card-dossier .segmented{flex-wrap:wrap}.knowledge-card-links{display:flex;gap:12px;margin:15px 0}.knowledge-card-links button{padding:0;border:0;background:none;width:70px;font-size:12px}.knowledge-card-links img{width:70px;border-radius:4px;display:block;margin-bottom:5px}
@media(max-width:600px){.journey-shell{padding:12px 20px 35px}.journey-top{margin:14px 0 20px;gap:10px}.journey-stage{display:flex;flex-direction:column;gap:20px;margin:15px 0}.journey-image{position:static;width:126px;align-self:center}.journey-copy{width:100%;min-width:0}.journey-copy h1{font-size:25px}.journey-option{font-size:15px;padding:14px}.journey-note{margin:16px 0;padding:16px 0}.journey-recommend{grid-template-columns:minmax(0,1fr) 105px;gap:16px}.journey-recommend h2{font-size:27px}.journey-recommend .primary{padding:12px 16px}.journey-compare .compare-options{gap:10px}.compare-options .journey-option{padding:10px}.library-tools{display:block}.memory-counts{gap:10px}.journey-complete-image{width:100px}.journey-top .tiny{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.journey-progress i{transition:none}}
/* Visual learning games: movement communicates a match or a changed role. */
.journey-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-20px;margin-bottom:18px}.journey-control .linkbtn{font-size:13px;min-height:44px}
.journey-visual{display:block;max-width:740px;margin-inline:auto}.picture-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.picture-options .journey-option{flex-direction:column;align-items:center;position:relative;text-align:center;padding:12px}.picture-options img{width:100%;max-width:180px;display:block;border-radius:5px;box-shadow:var(--shadow-card)}.picture-options .answer-marker{position:absolute;right:8px;top:8px;background:var(--paper);border-radius:50%;padding:4px}.picture-options.compare-options{grid-template-columns:1fr 1fr}
.journey-family{margin:28px 0 12px;border-top:1px solid var(--line);padding-top:20px}.journey-family h2{font-size:18px}.journey-family-cards{display:flex;gap:10px;margin:18px 0}.journey-family-cards button{flex:1;min-width:0;padding:8px 4px;background:none;border:1px solid transparent;border-radius:10px;font-size:12px;color:var(--ink)}.journey-family-cards button[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}.journey-family-cards img{width:min(100%,82px);display:block;margin:auto auto 8px;border-radius:4px}.journey-family-cards small{display:block;color:var(--muted);margin-top:4px}.journey-family-note{border-left:3px solid var(--accent);padding:4px 0 4px 14px;font-size:14px}.journey-family-note p{margin:6px 0}
.journey-statement{display:flex;align-items:center;gap:22px;background:var(--soft);border-radius:16px;padding:18px}.journey-statement .journey-image{width:76px;flex:none;position:static}.journey-statement blockquote{font-family:var(--font-display);font-size:20px;line-height:1.65;margin:0}
.journey-board-wrap{margin:20px 0}.journey-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px 10px;background:var(--soft);border-radius:18px}.journey-slot{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;border:1px solid var(--control-line);border-radius:12px;padding:12px 6px;background:var(--paper);color:var(--ink)}.journey-slot-card{display:grid;place-items:center;width:70px;height:120px;max-width:100%;border:1px dashed var(--control-line);border-radius:5px;overflow:hidden}.journey-slot-card img{width:100%;height:100%;object-fit:contain;border-radius:4px}.journey-slot-number{font-family:var(--font-display);font-size:30px;color:var(--muted)}.journey-slot strong{margin-top:10px;font-size:14px}.journey-slot small{font-size:11px;line-height:1.5;margin-top:4px;color:var(--muted)}.journey-slot.occupied{border:2px solid var(--accent)}.journey-slot.correct{border:2px solid var(--success)}.journey-slot.incorrect{border:2px solid var(--error)}.journey-slot .answer-marker{position:absolute;top:6px;right:6px;color:var(--success);background:var(--paper);border-radius:50%;padding:3px}.journey-slot:disabled{opacity:1;cursor:default}.journey-placement-note{padding:16px 0;border-bottom:1px solid var(--line)}.journey-placement-note p{margin:8px 0}.journey-placement-note small{color:var(--muted)}
.journey-collected{display:flex;align-items:center;gap:10px;margin:22px 0;padding:14px 0;border-block:1px solid var(--line);clear:both}.journey-collected>span:first-child{font-size:26px;color:var(--accent)}.journey-collected>span:last-child{font-size:12px;color:var(--muted)}.journey-skill-stamps{display:flex;flex-wrap:wrap;gap:8px}.journey-skill-stamps span{font-size:12px;padding:5px 8px;border-radius:6px;background:var(--soft)}.journey-skill-stamps .supported{color:var(--success)}.journey-skill-stamps .pending{color:var(--muted)}
.journey-image,.journey-option img{animation:learning-arrive .4s cubic-bezier(.16,1,.3,1) both}.journey-option:active:not(:disabled),.journey-slot:active{transform:scale(.97)}.journey-option,.journey-slot{transition:transform .15s cubic-bezier(.25,1,.5,1)}.journey-feedback,.journey-family-note,.journey-placement-note{animation:learning-reveal .24s cubic-bezier(.16,1,.3,1) both}.journey-revealed{animation:learning-unfold .36s cubic-bezier(.16,1,.3,1) both;transform-origin:top}.journey-slot.occupied img{animation:learning-place .38s cubic-bezier(.16,1,.3,1) both}.journey-complete-image{animation:learning-place .5s cubic-bezier(.16,1,.3,1) both}.journey-collected{animation:learning-reveal .45s cubic-bezier(.16,1,.3,1) both}
@keyframes learning-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes learning-reveal{from{opacity:0}to{opacity:1}}@keyframes learning-unfold{from{opacity:0;transform:perspective(500px) rotateX(-9deg)}to{opacity:1;transform:perspective(500px) rotateX(0)}}@keyframes learning-place{from{opacity:.3;transform:translateY(-20px) rotate(-4deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:600px){.journey-control{margin-top:-12px}.journey-control>span{max-width:45%;line-height:1.5}.picture-options{gap:8px}.picture-options .journey-option{padding:8px 5px;font-size:12px}.journey-board{gap:7px;padding:14px 7px}.journey-slot{padding:10px 4px}.journey-slot-card{width:60px;height:104px}.journey-slot strong{font-size:13px}.journey-statement{gap:15px;padding:14px}.journey-statement blockquote{font-size:18px}.journey-family-cards{gap:6px}.journey-family-note{font-size:14px}}
@media(prefers-reduced-motion:reduce){.journey-shell *{animation:none!important;transition:none!important}.journey-option:active:not(:disabled),.journey-slot:active{transform:none}}
/* Reserve full card space while a newly encountered face decodes. */
.picture-options img,.journey-family-cards img{aspect-ratio:0.59;object-fit:contain;background:var(--soft)}

/* v3: a paced encounter, then small objects the learner can actively connect. */
.journey-playful{max-width:940px}.journey-playful .journey-top{margin-bottom:24px}.journey-guide{display:flex;align-items:center;gap:12px;max-width:720px;margin:18px auto;padding:12px 16px;background:color-mix(in srgb,var(--soft) 72%,var(--paper));border:1px solid var(--line);border-radius:18px 18px 18px 4px}.journey-guide p{font-size:13px;line-height:1.7;margin:0;color:var(--muted)}.journey-guide-spark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--accent);font-size:26px;box-shadow:var(--shadow-soft);animation:learning-guide 2s ease-in-out 1}.journey-playful .journey-stage{margin-top:22px}.journey-discovery{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:start;padding:38px 20px 20px;min-width:0;isolation:isolate}.journey-discovery .journey-image{position:relative;width:min(100%,205px);transform:rotate(-2deg);animation:learning-discover .8s cubic-bezier(.16,1,.3,1) both}.journey-discovery-ring{position:absolute;z-index:-1;width:min(96%,290px);aspect-ratio:1;border:1px solid var(--control-line);border-radius:50%;box-shadow:0 0 0 18px color-mix(in srgb,var(--soft) 75%,transparent),0 0 0 19px var(--line);opacity:.7}.journey-discovery-caption{font-family:var(--font-display);margin-top:24px;letter-spacing:.12em;font-size:18px}.journey-observation{padding:18px;border-radius:16px;background:var(--soft)}.journey-observation p{margin:8px 0 0;line-height:1.8}.journey-construction{max-width:700px;width:100%;margin:auto}.journey-construction h1{font-size:clamp(23px,3vw,32px)}.journey-link-scene{display:flex;align-items:center;gap:22px;margin:22px 0;padding:18px;background:var(--soft);border-radius:20px}.journey-link-scene .journey-image{position:static;flex:none;width:86px}.journey-link-scene strong{display:block;font-family:var(--font-display);font-size:23px;margin:8px 0}.journey-link-scene p{font-size:13px;color:var(--muted);margin:0}.journey-link-work{margin-block:20px}.journey-link-half{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;min-width:0}.journey-link-half h2{display:flex;gap:9px;align-items:center;font-family:var(--font-body);font-size:15px;margin:0 0 10px}.journey-link-half h2>span:first-child{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:12px;flex:none}.journey-link-half details>summary{min-height:44px;cursor:pointer;line-height:1.8;font-size:14px;padding:8px 0;color:var(--ink)}.journey-link-half details>summary small{display:block;color:var(--accent);font-size:11px}.journey-link-half.is-waiting{opacity:.65}.journey-link-thread{display:block;width:2px;height:34px;margin:auto;color:var(--muted);font-size:23px;line-height:32px}.journey-link-thread.connected{color:var(--accent)}.journey-pieces{display:grid;gap:9px;padding-top:8px}.journey-piece{display:flex;gap:10px;align-items:center;width:100%;min-height:56px;text-align:left;padding:13px 15px;border:1px solid var(--control-line);border-radius:12px;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.8;transition:transform .18s,border-color .18s,background .18s}.journey-piece span{flex:1}.journey-piece.is-picked{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}.journey-piece.is-picked b{color:var(--accent)}.journey-piece:active:not(:disabled){transform:scale(.985)}.journey-piece:disabled{opacity:1}.journey-construct-actions{margin:22px 0}.journey-construct-actions>.primary:disabled{opacity:.5;cursor:not-allowed}.journey-construct-actions .journey-help{margin-top:10px}.journey-link-result,.journey-pair-result{display:grid;gap:10px;margin:18px 0}.journey-link-result p,.journey-pair-result p{border-radius:12px;padding:12px 14px;background:var(--soft);margin:0}.journey-link-result p>span,.journey-pair-result p>span{display:block;font-size:14px;margin-top:5px;line-height:1.8}.journey-construction .journey-feedback>.secondary{margin-bottom:12px}.journey-match-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.journey-match-target{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--control-line);background:var(--paper);border-radius:18px;padding:14px 12px;color:var(--ink);min-width:0;transition:transform .2s,background .2s,border-color .2s}.journey-match-image{display:block;width:min(100%,142px);aspect-ratio:.59}.journey-match-image img{width:100%;height:100%;object-fit:contain;border-radius:6px;box-shadow:var(--shadow-card)}.journey-match-target>strong{font-size:14px}.journey-match-target.is-ready{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.journey-match-target.is-ready:active{transform:scale(.97)}.journey-match-target.is-filled{background:var(--soft)}.journey-match-label{font-size:13px;line-height:1.75;border:1px dashed var(--control-line);border-radius:10px;width:100%;min-height:74px;display:grid;place-items:center;padding:10px}.journey-match-target.is-filled .journey-match-label{border-style:solid;background:var(--paper);animation:learning-place .35s ease-out}.journey-match-target.correct{border:2px solid var(--success)}.journey-match-target.incorrect{border:2px solid var(--error)}.journey-match-target:disabled{opacity:1;cursor:default}.journey-match-bank{padding:18px;border-radius:16px;background:var(--soft);display:grid;gap:10px}.journey-match-bank .journey-action-tip{font-size:12px;margin:0;color:var(--accent);min-height:22px}.journey-playful.is-updating .journey-discovery .journey-image,.journey-playful.is-updating .journey-guide-spark,.journey-playful.is-updating .journey-image{animation:none}.journey-playful .journey-feedback.correct>strong{display:inline-block;animation:learning-confirm .4s ease-out}.journey-playful .journey-feedback.incorrect>strong{display:inline-block;animation:learning-settle .25s ease-out}.journey-playful .journey-complete-image{position:relative}.journey-playful .journey-progress{height:6px;border-radius:10px}.journey-playful .journey-progress i{background:linear-gradient(90deg,var(--accent),var(--muted));border-radius:10px}
@keyframes learning-guide{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg) scale(1.09)}}@keyframes learning-discover{from{opacity:0;transform:translateY(24px) rotate(5deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}}@keyframes learning-confirm{0%{transform:scale(.95)}55%{transform:scale(1.035)}100%{transform:scale(1)}}@keyframes learning-settle{from{transform:translateX(-3px)}to{transform:translateX(0)}}
@media(max-width:600px){.journey-playful{padding-inline:18px}.journey-playful .journey-top{gap:10px;margin:10px 0 22px}.journey-playful .journey-stage{gap:22px}.journey-guide{padding:10px 12px;gap:10px;margin:14px 0}.journey-guide-spark{width:30px;height:30px;font-size:22px}.journey-guide p{font-size:12px}.journey-discovery{padding:22px 18px 10px}.journey-discovery .journey-image{width:150px}.journey-discovery-ring{width:205px;box-shadow:0 0 0 12px color-mix(in srgb,var(--soft) 75%,transparent),0 0 0 13px var(--line)}.journey-discovery-caption{margin-top:15px;font-size:15px}.journey-link-scene{gap:16px;padding:14px}.journey-link-scene .journey-image{width:68px}.journey-link-scene strong{font-size:21px}.journey-match-cards{gap:10px}.journey-match-target{padding:11px 8px;border-radius:14px}.journey-match-image{width:110px}.journey-match-label{font-size:12px;padding:8px;min-height:80px}.journey-match-bank{padding:14px}.journey-piece{font-size:14px}.journey-link-half{padding:13px}}
@media(prefers-reduced-motion:reduce){.journey-playful *{animation:none!important;transition:none!important}.journey-discovery .journey-image{transform:none}.journey-piece:active:not(:disabled),.journey-match-target.is-ready:active{transform:none}}
.journey-discovery{width:100%}.journey-discovery .journey-image{flex:none;aspect-ratio:.59}.journey-discovery .journey-image img{height:100%;object-fit:contain}.journey-discovery-caption{flex:none;position:relative}
.journey-discovery .journey-image{top:auto}
