:root{--ink:#102a32;--muted:#5b7077;--paper:#fffdf7;--navy:#12343b;--blue:#1c6b80;--cyan:#55b7c5;--green:#2f806b;--orange:#e28b35;--line:#bdd0d3;--shadow:0 14px 30px #17333a20}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(#dcebee,#eef4f1 45%,#d7e6e5);color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{border:0;border-radius:11px;background:var(--blue);color:#fff;padding:.7rem 1rem;cursor:pointer;font-weight:750}button:hover:not(:disabled){filter:brightness(.94);transform:translateY(-1px)}button:disabled{cursor:not-allowed;background:#d9e0e1;color:#68777b}button.secondary{background:#fff;color:var(--navy);border:1px solid #9eb7bb}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #efaa2e;outline-offset:3px}[hidden]{display:none!important}.world{max-width:1500px;margin:auto;padding:24px 22px 50px}.hero{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:26px 6px}.eyebrow,.section-kicker,.station-kicker{margin:0 0 7px;font-size:.72rem;letter-spacing:.16em;font-weight:850;color:var(--blue)}.hero h1{margin:0;font-size:clamp(2.3rem,5vw,4.2rem);line-height:1;letter-spacing:-.045em}.hero-text{max-width:760px;color:var(--muted);font-size:1.08rem}.mission-badge{background:var(--navy);color:#fff;border-radius:20px;padding:18px 22px;min-width:190px;box-shadow:var(--shadow);transform:rotate(2deg)}.mission-badge span{display:block;font-size:.65rem;letter-spacing:.16em;opacity:.7}.mission-badge strong{display:block;margin-top:5px}.player-panel{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:var(--paper);padding:22px 24px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.player-panel h2{margin:0 0 4px}.player-panel p,.player-panel small{color:var(--muted);font-size:.88rem}label{display:block;font-weight:750;font-size:.9rem;margin-bottom:6px}.input-row{display:flex;gap:8px}input{min-width:0;flex:1;border:1px solid #91adb2;border-radius:10px;padding:.65rem .8rem}.notice{margin:18px 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#edf5f2;color:var(--ink)}.notice.error{background:#fff0eb;border-color:#e5b9ad;color:#963b2e}.notice button{margin-left:12px}.map-intro{display:flex;justify-content:space-between;align-items:end;margin:34px 2px 14px}.map-intro h2{margin:0;font-size:1.9rem}.map-intro p:last-child{color:var(--muted)}.progress-summary{font-size:.85rem}.expedition-map{margin:0 0 22px;background:#062b3a;border-radius:24px;overflow:hidden;border:2px solid #78b9c4;box-shadow:var(--shadow)}.expedition-map img{display:block;width:100%;height:auto}.expedition-map figcaption{padding:8px 14px;color:#d9f5f6;background:#062b3a;font-size:.75rem}.start-panel{background:linear-gradient(135deg,#fffdf7,#eef9f8);border:2px solid var(--cyan);border-radius:22px;padding:20px 22px;box-shadow:0 10px 24px #17333a18}.start-copy{display:flex;gap:16px;align-items:flex-start}.big-icon{font-size:2.8rem;line-height:1}.start-panel h2{margin:0 0 4px}.start-panel p{margin:0;color:var(--muted)}.choice-label{display:flex;justify-content:center;margin:18px 0}.choice-label span{background:var(--navy);color:#fff;border-radius:999px;padding:7px 15px;font-size:.68rem;letter-spacing:.12em;font-weight:850}.station-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.station{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:17px;box-shadow:0 10px 24px #17333a18;min-width:0}.station-number{font-size:.72rem;font-weight:900;color:#779096;letter-spacing:.1em}.station-icon{font-size:2.2rem;line-height:1;margin:6px 0 9px}.station h3{margin:0 0 5px;font-size:1.1rem;line-height:1.2}.station-desc{color:var(--muted);font-size:.82rem;min-height:76px;margin:0}.active-station{border-color:#9ec6c8}.empty-station{opacity:.82}.station-games{margin-top:13px}.game-mini{border-top:1px solid var(--line);padding-top:12px}.mini-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.mini-status{font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;color:#75868a}.game-mini.available .mini-status{color:var(--green)}.game-mini.completed .mini-status{color:var(--blue)}.mini-score{font-weight:850;color:var(--blue);font-size:.8rem}.mini-help{font-size:.77rem;color:var(--muted);min-height:38px;margin:6px 0}.mini-button{width:100%;font-size:.8rem;padding:.6rem .7rem}.coming-soon{padding:9px;border:1px dashed #aabfc2;border-radius:10px;color:#718489;text-align:center;font-size:.76rem;background:#f3f6f4}.future-zone{display:flex;justify-content:center;align-items:center;gap:15px;margin:32px auto 0;max-width:900px}.future-card{flex:1;display:flex;align-items:center;gap:12px;background:#e9efed;border:2px dashed #9db1b3;border-radius:18px;padding:15px;color:#61757a}.future-card>span{font-size:1.7rem}.future-card strong{display:block;font-size:.85rem}.future-card p{margin:2px 0 0;font-size:.75rem}.future-arrow{font-size:1.5rem;color:#758d91}footer{margin:22px 2px 0;color:#60757b;font-size:.82rem;text-align:center}.skip-link{position:absolute;top:-100px;left:12px;background:#fff;padding:10px;z-index:20}.skip-link:focus{top:12px}dialog{padding:0;border:0;border-radius:16px;width:min(1180px,96vw);max-width:96vw;max-height:96dvh;box-shadow:0 20px 90px #0006}dialog::backdrop{background:#102930d1}dialog[open]{display:flex;flex-direction:column}.game-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line)}.game-toolbar h2{margin:0}.game-toolbar small{color:var(--muted);font-size:.75rem}.round-notice{padding:12px 20px;background:#edf6f3;font-size:.9rem}.round-notice button{margin-left:10px;font-size:.82rem}#frame-host{min-height:180px;flex:1;display:flex}iframe{width:100%;height:72dvh;border:0;background:#fff}body:has(dialog[open]){overflow:hidden}
@media(max-width:1100px){.station-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.station-grid .station:nth-child(4){grid-column:1/2}.station-grid .station:nth-child(5){grid-column:2/3}.station-desc{min-height:auto}}
@media(max-width:800px){.hero{align-items:flex-start;flex-direction:column}.mission-badge{align-self:flex-start}.player-panel{grid-template-columns:1fr}.station-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.expedition-map{overflow-x:auto}.expedition-map img{min-width:900px;max-width:none}.future-zone{flex-direction:column}.future-arrow{transform:rotate(90deg)}}
@media(max-width:560px){.world{padding:16px 12px 35px}.hero{padding:18px 4px}.hero h1{font-size:2.35rem}.player-panel{padding:18px}.input-row{flex-direction:column}.map-intro{display:block}.station-grid{grid-template-columns:1fr}.station{padding:16px}.station-desc{min-height:0}.game-toolbar{padding:11px}.game-toolbar h2{font-size:1rem}.round-notice{padding:10px 12px}iframe{height:68dvh}}


/* V7: de afbeelding is zelf de interactieve skilltree. */
.map-canvas{position:relative;line-height:0;isolation:isolate}
.map-actions{position:absolute;inset:0;z-index:3;pointer-events:none}
.skill-paths{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.skill-paths path{fill:none;stroke:#d9faff;stroke-width:.62;stroke-linecap:round;stroke-linejoin:round;opacity:.08;transition:stroke .25s ease,opacity .25s ease,filter .25s ease}
.skill-paths path.rating-red{stroke:#ff343d;opacity:1;filter:drop-shadow(0 0 3px #ff242e) drop-shadow(0 0 8px #ff242e)}
.skill-paths path.rating-orange{stroke:#ff9f16;opacity:1;filter:drop-shadow(0 0 3px #ff9a12) drop-shadow(0 0 8px #ff9a12)}
.skill-paths path.rating-green{stroke:#19e982;opacity:1;filter:drop-shadow(0 0 3px #13d477) drop-shadow(0 0 8px #13d477)}
.skill-rating-lamp{position:absolute;top:18%;right:12%;display:block;width:19px;height:19px;border:3px solid #fff;border-radius:50%;z-index:2;box-shadow:0 0 0 2px #102a32b8,0 0 14px currentColor}
.skill-rating-lamp.rating-red{background:#ff343d;color:#ff343d}
.skill-rating-lamp.rating-orange{background:#ff9f16;color:#ff9f16}
.skill-rating-lamp.rating-green{background:#19e982;color:#19e982}
.map-zone{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:transparent;box-shadow:none;line-height:1;min-width:0;transform:none;cursor:pointer;pointer-events:auto}
.map-zone.shape-island{clip-path:polygon(25% 0,75% 0,91% 8%,100% 27%,96% 70%,83% 89%,67% 100%,27% 100%,10% 89%,2% 68%,0 31%,9% 12%)}
.map-zone.shape-start{clip-path:polygon(12% 0,88% 0,100% 17%,97% 88%,82% 100%,16% 100%,3% 85%,0 20%)}
.map-zone:hover:not(:disabled){background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 3px rgba(111,238,255,.75),0 0 22px rgba(79,225,255,.35);transform:none}
.map-zone:focus-visible{outline:4px solid #ffcf48;outline-offset:-4px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 3px rgba(255,207,72,.8);transform:none}
.map-zone:disabled{opacity:1;background:transparent;color:transparent;cursor:not-allowed}
.map-zone.available{cursor:pointer}
.map-zone.completed{box-shadow:inset 0 0 0 3px rgba(79,220,130,.0)}
.map-zone-status{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:block;white-space:nowrap;border-radius:999px;padding:.3rem .6rem;background:rgba(4,35,47,.84);color:#fff;font-size:clamp(.58rem,.75vw,.78rem);font-weight:800;line-height:1.1;box-shadow:0 3px 10px rgba(0,0,0,.3);opacity:.88}
.map-zone.future .map-zone-status,.map-zone.waiting .map-zone-status{opacity:.72}
.map-zone.locked .map-zone-status{background:rgba(66,54,31,.88)}
.map-zone.completed .map-zone-status{background:rgba(25,112,74,.9)}
.map-zone.available .map-zone-status{background:rgba(5,77,101,.92)}
.map-only-note{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:11px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,253,247,.78);color:var(--ink)}
.map-only-note p{margin:1px 0 0;color:var(--muted);font-size:.82rem}
.map-note-icon{font-size:1.45rem;line-height:1}
.station-grid,.start-panel{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:800px){.map-zone-status{font-size:.58rem;padding:.24rem .42rem}.expedition-map{overflow:hidden}.expedition-map img{min-width:0;max-width:100%;width:100%}}
.skill-rating-lamp{width:17px;height:17px}
.placeholder-note{margin:0 auto 22px;max-width:900px;text-align:center;color:var(--muted);font-size:.88rem}
.path-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;margin:-9px 0 18px;color:var(--ink);font-size:.8rem}
.path-legend span{display:inline-flex;align-items:center;gap:7px}
.path-legend i{width:22px;height:5px;border-radius:9px;display:inline-block}
.path-legend .legend-red{background:#f0444a}.path-legend .legend-orange{background:#f3a12d}.path-legend .legend-green{background:#20bd73}
button.future-card:disabled{opacity:.88;cursor:not-allowed;background:#e9efed;color:#61757a}
button.future-card.is-open{border-style:solid;border-color:#20bd73;background:#effaf3;color:#15563a;cursor:pointer}
.final-copy{display:flex;flex-direction:column;text-align:left;gap:3px}.final-copy span{font-size:.75rem}