:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173e50;background:#f5faf8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible+span,summary:focus-visible{outline:3px solid #df861f;outline-offset:3px}.skip{position:absolute;top:-100px;left:1rem;background:white;padding:.7rem;z-index:5}.skip:focus{top:1rem}.site-header,.main,.footer{width:min(1100px,calc(100% - 40px));margin:auto}.site-header{height:76px;display:flex;justify-content:space-between;align-items:center;gap:1rem}.brand{text-decoration:none;display:flex;align-items:center;gap:.65rem;font-size:1.16rem;letter-spacing:-.04em}.brand>span{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;background:#155b75;color:white;font-size:1.8rem;line-height:1}.brand strong span{color:#547585}.back,.text-button{color:#235e74;font-weight:700;text-decoration:none}.main{padding-bottom:3rem}.hero{display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;border-radius:28px;background:#dff4ee;min-height:325px;border:1px solid #beded5}.hero-copy{padding:clamp(25px,5vw,55px);position:relative;z-index:1}.eyebrow,.overline{margin:0 0 .55rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:.73rem;color:#317568}.hero h1{font-size:clamp(2.1rem,4.7vw,3.7rem);letter-spacing:-.045em;line-height:1.03;margin:.2em 0 .4em;color:#163c4b}.hero h1 em{font-style:normal;color:#187869}.hero-copy>p:not(.eyebrow){font-size:1.1rem;line-height:1.55;max-width:35rem}.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}.chips span{background:#fff9e5;border:1px solid #eadfaf;border-radius:50px;padding:.45rem .8rem;font-size:.84rem;font-weight:700}.hero-art{position:relative;overflow:hidden;min-height:290px;background:linear-gradient(#bfebee 0%,#e4f8f2 70%)}.sun{position:absolute;width:80px;height:80px;border-radius:50%;background:#ffd66f;top:33px;right:15%;box-shadow:0 0 0 12px #ffe4a255}.cloud{position:absolute;background:#fff;opacity:.8;border-radius:100px;width:85px;height:19px}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%;width:30px;height:30px;bottom:3px;left:16px}.cloud:after{width:38px;height:38px;left:36px}.cloud-one{top:80px;left:12%}.cloud-two{top:45px;left:48%;transform:scale(.7)}.island{position:absolute;width:85%;height:90px;border-radius:50%;background:#b8d996;bottom:41px;right:-8%;z-index:1}.water{position:absolute;bottom:0;width:100%;height:78px;background:#68bfbe;z-index:2}.tower{position:absolute;bottom:84px;right:23%;width:94px;height:170px;z-index:2}.tower-body{position:absolute;bottom:0;left:10px;width:74px;height:118px;background:linear-gradient(to bottom,#fdf8e8 0 30%,#e96956 30% 51%,#fdf8e8 51% 74%,#e96956 74%);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);border-radius:4px}.tower-body i{position:absolute;width:16px;height:21px;border-radius:8px 8px 2px 2px;background:#315a60;left:29px;top:12px}.tower-body b{position:absolute;width:20px;height:31px;border-radius:10px 10px 0 0;background:#315a60;left:27px;bottom:0}.tower-lamp{position:absolute;top:28px;left:27px;width:40px;height:32px;background:#ffe196;border:5px solid #355a5a;box-shadow:0 0 25px #fff1b3}.tower-roof{position:absolute;top:9px;left:18px;width:58px;height:28px;background:#d66454;clip-path:polygon(50% 0,100% 100%,0 100%);z-index:1}.boat{position:absolute;z-index:3;bottom:30px;left:17%;width:75px;height:24px;border-radius:0 0 50px 50px;background:#d77555;transform:rotate(-4deg)}.boat:before{content:"";position:absolute;left:35px;bottom:19px;width:3px;height:48px;background:#30575a}.boat i{position:absolute;left:39px;bottom:24px;width:29px;height:42px;background:#fff8e7;clip-path:polygon(0 0,0 100%,100% 100%)}.wave{position:absolute;z-index:3;color:#d5f5e9;font-size:2.4rem;bottom:0}.wave-one{left:12%}.wave-two{right:19%;bottom:14px}.panel{background:white;border:1px solid #c4ddd8;border-radius:22px;box-shadow:0 8px 30px #285c4c0c}.setup{margin-top:22px;padding:clamp(22px,4vw,38px)}h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.035em;margin:.2em 0 .8em}fieldset{border:0;margin:0;padding:0}legend{font-size:1.03rem;font-weight:800;padding:0;margin:0 0 .65rem}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.mode-grid label,.row-options label{cursor:pointer}.mode-grid input,.row-options input{position:absolute;opacity:0;pointer-events:none}.mode-grid label span{min-height:59px;padding:.7rem;display:flex;justify-content:center;align-items:center;gap:.55rem;border:2px solid #c1d7d6;border-radius:13px;color:#406471;font-size:1.4rem;font-weight:800}.mode-grid label b{font-size:.95rem}.mode-grid input:checked+span,.row-options input:checked+span{background:#dcf2e7;border-color:#18745f;color:#165b4c}.rows{margin-top:1.7rem}.rows p{margin:-.3rem 0 .8rem;color:#54707a}.row-options{display:flex;flex-wrap:wrap;gap:.5rem}.row-options label span{width:50px;height:50px;display:grid;place-items:center;border:2px solid #c1d7d6;border-radius:12px;font-weight:800;color:#315766}.primary{background:#176a60;color:#fff;border:0;border-radius:12px;font-weight:800;padding:1rem 1.4rem;min-height:52px;box-shadow:0 4px 0 #105348}.primary:hover{background:#105e55}.setup-status{color:#a3492c;font-weight:700;min-height:1em}.game{margin-top:30px}.game-heading{display:flex;justify-content:space-between;align-items:start;gap:1rem}.text-button{border:0;background:transparent;padding:.5rem}.progress{display:flex;gap:.4rem;overflow:auto;padding:0 0 1rem}.progress-step{background:#e9f3ef;border:1px solid #d2e4dc;border-radius:100px;padding:.55rem .8rem;white-space:nowrap;font-size:.82rem;font-weight:750;color:#597672}.progress-step.active{background:#ffe9a8;color:#664f17;border-color:#f1d477}.progress-step.done{background:#d5eee2;color:#12664c}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:start}.stage{padding:clamp(22px,4vw,36px);min-width:0}.stage h3{font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.03em;margin:.35rem 0 .6rem}.stage p{line-height:1.55}.stage-overline{color:#9a6c19;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.question{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:850;margin:1rem 0;color:#163f50}.answers{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.25rem 0}.answer{border:2px solid #b5d4cf;background:#fff;border-radius:12px;color:#194b55;min-height:58px;min-width:70px;padding:.75rem 1.2rem;font-size:1.2rem;font-weight:800}.answer:hover{background:#f0faf5}.answer[aria-pressed=true]{border-color:#156d5c;background:#dbf1e5;box-shadow:0 0 0 2px #b4e2c9}.stage-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.hint{border-top:1px solid #dbeae4;margin-top:1.6rem;padding-top:1rem;color:#245f5c}.hint summary{cursor:pointer;font-weight:800}.hint p{margin-bottom:0}.group-picture{background:#f5faf2;border:1px solid #dbead7;border-radius:16px;padding:1rem;margin:1rem 0;max-width:100%;overflow:auto}.shell-groups{display:flex;flex-wrap:wrap;gap:.4rem}.shell-group{background:#fff9e9;border:1px solid #f2dba9;border-radius:10px;display:flex;gap:3px;flex-wrap:wrap;max-width:165px;padding:.4rem}.shell{width:12px;height:12px;background:#e6a756;border-radius:50% 50% 45% 45%;display:block}.picture-label{font-size:.88rem;font-weight:700;color:#51736b;margin:.65rem 0 0!important}.sequence{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1rem 0}.sequence span{display:grid;place-items:center;min-width:48px;height:53px;border-radius:12px;background:#e2f2e8;border:1px solid #badcca;font-size:1.2rem;font-weight:800}.sequence span.missing{background:#fff1c0;border:2px dashed #d1a33c}.inventory{background:#eaf5ef;border:1px solid #cfe4d7;border-radius:20px;padding:22px}.inventory-symbol{background:#fff2c4;color:#ad7513;border-radius:12px;width:42px;height:42px;display:grid;place-items:center;font-size:1.4rem}.inventory h3{font-size:1.08rem;margin:.8rem 0 .3rem}.inventory p{font-size:.9rem;line-height:1.45;margin:.4rem 0;color:#526f6b}.inventory-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.piece{background:white;border:1px solid #bddbd0;border-radius:10px;padding:.55rem .7rem;font-weight:750}.feedback{background:#fff2cc;border-radius:12px;padding:.9rem 1.1rem;font-weight:700}.feedback:empty{display:none}.feedback.success{background:#def3e4;color:#1a6749}.note{margin:25px 0;color:#52736c;line-height:1.5}.note span{color:#ba8519;font-size:1.3rem}.footer{border-top:1px solid #d5e8df;display:flex;gap:1.4rem;flex-wrap:wrap;padding:22px 0;color:#55766d;font-size:.84rem}.footer span{flex:1}.finish{text-align:center}.finish-icon{font-size:4rem}.final-order{background:#fff8df;border-radius:12px;padding:1rem;font-weight:750}.completion{background:#eaf8ef;color:#236849;padding:1rem;border-radius:12px}
@media(max-width:720px){.hero{grid-template-columns:1fr}.hero-copy{padding-bottom:20px}.hero-art{min-height:200px}.tower{transform:scale(.8);transform-origin:bottom;bottom:65px}.water{height:60px}.island{bottom:30px}.boat{bottom:23px}.game-layout{grid-template-columns:1fr}.inventory{padding:16px}.progress-step{font-size:.75rem}.site-header,.main,.footer{width:min(100% - 28px,1100px)}.site-header{height:65px}.footer span{flex-basis:100%}}
@media(max-width:390px){.mode-grid label span{font-size:1.1rem;gap:.2rem;flex-direction:column}.mode-grid label b{font-size:.78rem}.hero h1{font-size:2rem}.row-options label span{width:44px;height:44px}}
.path-equations{display:flex;flex-wrap:wrap;gap:.4rem}.path-equations span{font-weight:700;font-size:.91rem;padding:.45rem .55rem;background:#f2f8f4;border-radius:8px}.secondary{border:2px solid #b7d3cb;color:#245f5c;background:white;padding:.75rem 1rem;border-radius:12px;font-weight:750}.answer:disabled,.secondary:disabled,.primary:disabled{opacity:.65;cursor:default}

/* Die Insel als ruhige, illustrierte Abenteuerwelt. */
:root{color:#173e50;background:#f6faf7}
body{background:radial-gradient(circle at 4% 15%,#e1f1e8 0,transparent 27rem),radial-gradient(circle at 96% 43%,#f8efdc 0,transparent 30rem),#f6faf7}
.site-header{height:80px}
.brand>span{background:#195c70;box-shadow:0 4px 0 #134956}
.back{border:1px solid #c8ded8;padding:.65rem .9rem;border-radius:100px;background:#fff9;transition:background .18s,transform .18s}
.back:hover{background:#fff;transform:translateX(-2px)}
.hero{grid-template-columns:1fr 1fr;min-height:390px;background:#e3f1e8;border:1px solid #beddd3;box-shadow:0 16px 35px #2f645212}
.hero-copy{align-self:center;padding:clamp(25px,4vw,52px)}
.hero h1{font-family:Georgia,serif;letter-spacing:-.035em;line-height:1.06;font-size:clamp(2.2rem,4.5vw,3.65rem)}
.hero h1 em{display:block;color:#227b6d}
.hero-copy>p:not(.eyebrow){color:#315c5e;max-width:30rem}
.eyebrow,.overline{color:#347468;letter-spacing:.13em}
.chips span{border-color:#ead9a4;background:#fff9e7;color:#604d22}
.hero-art{background:#bce3d9;min-height:390px}
.hero-illustration{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 50%}
.panel{box-shadow:0 13px 34px #285c4c0d}
.setup{border-top:4px solid #a8d4c3}
.setup h2,.game-heading h2,.stage h3{font-family:Georgia,serif;letter-spacing:-.025em}
.mode-grid label span,.row-options label span{background:#fff;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.mode-grid label:hover span,.row-options label:hover span{border-color:#579a88;transform:translateY(-1px)}
.mode-grid input:checked+span,.row-options input:checked+span{box-shadow:0 3px 0 #b6dbc8}
.primary{background:#176a60;transition:background .18s,transform .18s,box-shadow .18s}
.primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 #105348}
.progress{padding-bottom:.8rem}
.progress-step.active{box-shadow:0 2px 0 #e7c976}
.journey-map{position:relative;margin:.3rem 0 18px;border:1px solid #bfdfd3;border-radius:18px;overflow:hidden;background:#cae9de;box-shadow:0 6px 18px #285c4c0c}
.journey-map svg{display:block;width:100%;height:auto}
.journey-map-label{position:absolute;top:12px;left:16px;padding:.35rem .6rem;background:#fffaf0eb;border-radius:100px;color:#37665c;font-size:.75rem;font-weight:800;letter-spacing:.02em}
.journey-map-label span{color:#b4781b}
.map-pin circle{fill:#fffaf0;stroke:#749e88;stroke-width:3;transition:fill .2s,stroke .2s}
.map-pin text{text-anchor:middle;font:800 17px system-ui,sans-serif;fill:#325d56}
.game[data-scene=groups] .map-pin-1 circle,.game[data-scene=missing] .map-pin-2 circle,.game[data-scene=sequence] .map-pin-3 circle,.game[data-scene=lighthouse] .map-pin-4 circle,.game[data-scene=finish] .map-pin-4 circle{fill:#ffdf83;stroke:#cb9b35;stroke-width:4}
.stage{border-top:4px solid #8dc9b2}
.stage h3{color:#173e50}
.stage-illustration{position:relative;display:flex;align-items:center;gap:.8rem;min-height:76px;margin:-.25rem 0 1rem;padding:.9rem 1.1rem;overflow:hidden;border:1px solid #cee5dd;border-radius:16px;background:linear-gradient(120deg,#e9f6ed,#f4faf3);color:#295b55}
.stage-illustration::after{content:'✦';position:absolute;right:1.2rem;top:.5rem;color:#d5aa55;font-size:1.2rem}
.stage-illustration--groups{background:linear-gradient(115deg,#fff2db,#f4f8e9);border-color:#efdfbc}
.stage-illustration--missing{background:linear-gradient(115deg,#e3f3ed,#d7eff0)}
.stage-illustration--sequence{background:linear-gradient(115deg,#eef6df,#e4f2dd)}
.stage-illustration--lighthouse{background:linear-gradient(115deg,#fff1c7,#eef7df)}
.story-note{background:#f1f8f2;border-left:3px solid #86bba7;border-radius:0 12px 12px 0;padding:.8rem 1rem;color:#37655b}
.journey-card{display:flex;align-items:center;gap:.8rem;margin:1rem 0;padding:1rem;border:1px solid #b9dfc9;border-radius:15px;background:#e5f5e9;color:#1b644e}
.journey-card__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff4c7;color:#a06a19;font-size:1.4rem}
.journey-card__copy{line-height:1.4}
.group-picture{background:#f8f7e8;border-color:#eee2be}
.shell-group{box-shadow:0 2px 0 #eddcb8}
.question{color:#173e50}
.answer{box-shadow:0 3px 0 #d8e8e1;transition:background .16s,border-color .16s,transform .16s}
.answer:hover{transform:translateY(-1px)}
.answer[aria-pressed=true]{box-shadow:0 3px 0 #a8d2b8}
.inventory{background:linear-gradient(150deg,#edf8f0,#e0f1e8);border-color:#c6e4d4}
.inventory-symbol{box-shadow:0 2px 0 #ead8a7}
.piece-slot{width:100%;display:flex;align-items:center;gap:.65rem;min-height:48px;padding:.55rem .7rem;border-radius:12px;border:1px dashed #9dc6b4;background:#ffffff72}
.piece-slot--found{border-style:solid;border-color:#9ccdb4;background:#fff}
.piece-slot--empty{color:#6c8b80}
.piece-slot__symbol{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#fff1c5;color:#8d641d;font-size:1.15rem}
.piece-slot--empty .piece-slot__symbol{background:#d9ebe0;color:#6d9584}
.piece-slot__label{font-size:.87rem;font-weight:750}
.piece--new{animation:piece-arrives .55s ease-out both}
@keyframes piece-arrives{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
.finish-icon{color:#d59b29;text-shadow:0 3px 0 #f8e4a8}
.final-order{border:1px solid #ecd995;background:#fff7d8}
@media(max-width:720px){
  .site-header{height:68px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:26px 24px}.hero-art{min-height:205px}.hero-illustration{object-fit:cover}.setup{margin-top:16px}.game{margin-top:22px}.journey-map{margin-bottom:14px}.journey-map-label{top:7px;left:8px;font-size:.65rem;padding:.25rem .45rem}.inventory-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.piece-slot{min-width:0;flex-direction:column;text-align:center;padding:.5rem .25rem;gap:.25rem}.piece-slot__label{font-size:.72rem;overflow-wrap:anywhere}
}
@media(max-width:390px){.hero h1{font-size:2.05rem}.hero-copy>p:not(.eyebrow){font-size:1rem}.back{font-size:.83rem;padding:.55rem .65rem}.journey-map-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.selection-title{color:#496c63;font-size:.88rem;font-weight:800;margin-bottom:.5rem}
.lens-slots{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1.1rem}
.lens-slot{display:grid;place-items:center;min-width:62px;min-height:62px;padding:.5rem;border:2px dashed #a8cbbc;border-radius:16px;background:#f3f9f4;color:#769a89;font-weight:800}
.lens-slot--filled{border-style:solid;border-color:#d6b460;background:#fff4c8;color:#765512;box-shadow:0 3px 0 #ecd99e}
.game.is-lit .journey-map{box-shadow:0 0 0 4px #fff1bd,0 10px 28px #e1b95052}
.game.is-lit .map-pin-4 circle{fill:#ffe47e;stroke:#d09a23}
.stage-illustration>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff9e4;border:1px solid #e8dbba;font-size:2rem;line-height:1;box-shadow:0 3px 0 #d8ddc5}
.stage-illustration--missing>span{background:#fef7e5}.stage-illustration--sequence>span{background:#f3f9e7}.stage-illustration--lighthouse>span{font-size:2.5rem;color:#bd841a;background:#fffae5}
.stage-illustration::before{order:1;color:#477267;font-size:.91rem;font-weight:800;letter-spacing:.01em}
.stage-illustration--groups::before{content:'Hier beginnt dein Abenteuer'}
.stage-illustration--missing::before{content:'Eine Spur am Boot'}
.stage-illustration--sequence::before{content:'Weiter über die Insel'}
.stage-illustration--lighthouse::before{content:'Fast am Ziel'}
@media(max-width:390px){.site-header{gap:.4rem}.brand{font-size:.9rem;min-width:0}.back{flex-shrink:0}.hero{grid-template-columns:minmax(0,1fr)}.hero-copy{min-width:0}.hero h1{overflow-wrap:anywhere;hyphens:auto}}

/* Little living postcards make every stop a place, not just a question. */
.scene-landmark{position:relative;overflow:hidden;width:100%;margin:.8rem 0 1.15rem;border:1px solid #bfded4;border-radius:17px;background:#d9f0e7;box-shadow:0 5px 0 #d9eae1}
.scene-landmark svg{display:block;width:100%;height:clamp(94px,16vw,148px)}
.scene-landmark .scene-wave{animation:lighthouse-wave 5s ease-in-out infinite alternate;transform-box:fill-box}
.scene-landmark .scene-bird{animation:lighthouse-bird 6s ease-in-out infinite alternate;transform-box:fill-box}
.scene-landmark .scene-boat{transform-origin:50% 100%;transform-box:fill-box;animation:lighthouse-bob 4s ease-in-out infinite alternate}
.scene-landmark .scene-light{transition:opacity .6s ease}
.scene-landmark .scene-sparkles{opacity:.25;transition:opacity .5s ease}
.story-solved .scene-landmark--missing .scene-boat{animation:lighthouse-sail 1s ease-in-out forwards}
.story-solved .scene-landmark--missing .scene-sparkles,.story-solved .scene-landmark--lighthouse .scene-light,.scene-landmark--celebration .scene-light{opacity:.85}
.story-solved .scene-landmark--sequence .scene-stones{fill:#fff2a5;filter:drop-shadow(0 0 7px #ffefaa)}
.scene-landmark--celebration{margin:0 0 1rem;border-color:#ecd8a0;box-shadow:0 0 0 5px #fff3c8,0 12px 30px #d7af4b30}
.scene-landmark--celebration .scene-light{animation:lighthouse-beam 3s ease-in-out infinite alternate}
@keyframes lighthouse-wave{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
@keyframes lighthouse-bird{from{transform:translate(0,0)}to{transform:translate(13px,-4px)}}
@keyframes lighthouse-bob{from{transform:rotate(-1deg) translateY(1px)}to{transform:rotate(1deg) translateY(-2px)}}
@keyframes lighthouse-sail{to{transform:translateX(30px)}}
@keyframes lighthouse-beam{from{opacity:.45}to{opacity:.95}}
@media(max-width:390px){.scene-landmark svg{height:90px}.scene-landmark{margin:.65rem 0 1rem}}
@media(prefers-reduced-motion:reduce){.scene-landmark *{animation:none!important;transition:none!important}}

/* Only the beach task is timed; countdown updates do not interrupt screen readers. */
.group-timer { display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .8rem; padding:.45rem .8rem; border:2px solid #bf8c22; border-radius:10px; background:#fff4cf; color:#59400a; font-weight:800; font-variant-numeric:tabular-nums; }
.group-timer::before { content:'◷'; font-size:1.15em; }
.group-timer-notice { padding:.65rem .8rem; border-left:4px solid #aa7812; border-radius:4px; background:#fff7dc; color:#59400a; font-weight:700; }
.group-timer-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* A clear invitation to try the work in progress. */
.construction-notice{margin:0 0 1rem;padding:.85rem 1.1rem;border:1px solid #d0a346;border-left:5px solid #bd8617;border-radius:12px;background:#fff4d6;color:#553c08;font-size:1rem;line-height:1.5;font-weight:700}

/* Die Kiste verbindet den Zahlencode mit dem ersten Linsenteil. */
.chest-illustration{overflow:hidden;display:grid;place-items:center;margin:.75rem 0 1rem;border:1px solid #ead5a5;border-radius:16px;background:linear-gradient(145deg,#fff5d8,#eef7e9)}
.chest-illustration svg{display:block;width:min(100%,320px);height:auto;max-height:120px}
.chest-open{opacity:0}.chest-solved .chest-open{opacity:1}.chest-solved .chest-closed{opacity:0}

/* Dezente, einmalige Bewegung; kein dauerhaftes Blinken. */
.chest-illustration svg{animation:chest-arrive .55s ease-out both}
.chest-open,.chest-closed,.chest-lock{transition:opacity .3s ease}
.chest-solved .chest-lock{opacity:0}
.chest-solved .chest-open{animation:chest-reveal .9s ease-out both}
@keyframes chest-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes chest-reveal{0%{opacity:0;filter:brightness(1)}50%{opacity:1;filter:brightness(1.35)}100%{opacity:1;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.chest-illustration svg,.chest-solved .chest-open{animation:none}.chest-open,.chest-closed,.chest-lock{transition:none}}

/* Unmittelbare Rückmeldung bei der Muschelaufgabe. */
.answer.answer-correct{background:#d6f2e2;border-color:#27835f;color:#154d39}
.answer.answer-wrong{background:#fff0e4;border-color:#c17743;color:#6c3518}
.answer.answer-correct:disabled,.answer.answer-wrong:disabled{opacity:1}

/* Die Krabbe begleitet den Muscheltausch; Bewegung endet von selbst. */
.crab-illustration{overflow:hidden;display:grid;place-items:center;margin:.65rem 0 1rem;border:1px solid #c3e0d4;border-radius:16px;background:linear-gradient(160deg,#e6f5ed 0%,#f7ebca 100%)}
.crab-illustration img{display:block;width:min(100%,200px);height:135px;object-fit:contain;transform-origin:center bottom}
.crab-happy .crab-illustration img{animation:crab-wave .65s ease-in-out 2}
.crab-traded .crab-illustration img{animation:crab-trade 1s ease-out 1}
@keyframes crab-wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4deg)}}
@keyframes crab-trade{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.04);filter:brightness(1.18) drop-shadow(0 0 7px #ffe3a0)}}
@media(prefers-reduced-motion:reduce){.crab-happy .crab-illustration img,.crab-traded .crab-illustration img{animation:none}}
.beach-progress{margin:.25rem 0 .8rem;padding:.6rem .8rem;border-radius:10px;background:#edf7f0;color:#205a4c;font-size:1rem;font-weight:750}
.beach-progress-dots{display:flex;gap:.35rem;margin-top:.35rem}
.beach-progress-dots span{width:1rem;height:1rem;border:2px solid #7ba99a;border-radius:50%;background:#fff}
.beach-progress-dots span.done{border-color:#27785b;background:#54aa7e}

/* Einzelne, weiterhin zählbare Muscheln statt abstrakter Punkte. */
.shell{width:16px;height:16px;flex:none;border-radius:0;background:transparent url("/assets/lighthouse/muschel.svg") center/contain no-repeat}

/* Missions are acknowledged once per station, with a clear route back to them. */
.mission-view{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin:.25rem 0 .8rem;padding:.6rem .9rem;border:1px solid #a8ccc3;border-radius:10px;background:#f3faf6;color:#205f56;font:inherit;font-size:.9rem;font-weight:750;cursor:pointer}
.mission-view:hover{background:#e1f2e9}.mission-view:focus-visible,.mission-dialog button:focus-visible{outline:3px solid #09849d;outline-offset:3px}
.mission-dialog{width:min(100% - 2rem,34rem);max-height:min(85vh,40rem);padding:clamp(1.3rem,4vw,2rem);border:1px solid #a8d6c5;border-radius:20px;background:#fffdf7;color:#173e4c;box-shadow:0 22px 80px #102f3c55;overflow:auto}
.mission-dialog::backdrop{background:#102c38a8}.mission-dialog__eyebrow{margin:0 0 .5rem;color:#a56a16;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:800}.mission-dialog h2{margin:0 0 .9rem;color:#173e4c;font-size:clamp(1.5rem,3vw,2rem)}.mission-dialog__text{line-height:1.6;margin:0 0 1.5rem}.mission-dialog__text p{margin:.75rem 0}.mission-dialog__actions{display:flex;justify-content:flex-end}.mission-dialog__actions button{min-height:48px}
@media(max-width:480px){.mission-dialog__actions button{width:100%}}