/* Voizoo – unified adventure glass design system */
.ic { fill: none; }
:root {
 --ink: #173746; --ink-2: #365764; --ink-3: #496570;
 --paper: #fff; --cream: #f8fcfa; --cream-2: #e8f7f3; --line: #c4dedc;
 --lagoon: #12b8c6; --lagoon-deep: #087d8b; --lagoon-soft: #d0f4f2;
 --coral: #ff654c; --coral-deep: #b83426; --coral-soft: #ffe4de;
 --saffron: #ffca43; --saffron-deep: #946719; --saffron-soft: #fff0c1;
 --leaf: #49d779; --leaf-deep: #187a3d; --leaf-soft: #d5f7e1; --tile: #368ac2;
 --primary: var(--lagoon); --primary-deep: var(--lagoon-deep); --primary-soft: var(--lagoon-soft);
 --bg: #91ced5; --surface: #f5fbf8; --surface-2: #eaf5ee; --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
 --glass: rgba(241,252,250,.7); --glass-strong: rgba(245,253,251,.86); --glass-line: rgba(255,255,255,.7); --glass-shadow: 0 12px 40px rgba(17,58,61,.17), inset 0 1px 0 rgba(255,255,255,.65);
 --scene-shadow: 0 2px 12px rgba(10,40,48,.7); --art-shadow: drop-shadow(0 12px 12px rgba(14,54,58,.3));
 --overlay: rgba(16,49,56,.42); --route: #d6ffff; --route-glow: rgba(118,249,255,.68);
 --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Figtree", sans-serif;
 --fs-2xs:.72rem; --fs-xs:.8rem; --fs-s:.9rem; --fs-m:1rem; --fs-l:1.2rem; --fs-xl:1.55rem; --fs-2xl:2.1rem; --fs-3xl:2.9rem;
 --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
 --r-xs:10px; --r-s:14px; --r-m:18px; --r-l:24px; --r-xl:28px; --r-round:999px;
 --shadow-1: var(--glass-shadow); --shadow-2: var(--glass-shadow); --shadow-3:0 24px 70px rgba(10,40,48,.35);
 --edge:4px; --tabbar-h:72px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px); --ease:cubic-bezier(.2,.8,.2,1);
}
body.theme-tulpe { --primary:#e75082; --primary-deep:#a9305a; --primary-soft:#ffe1ec; }
body.theme-sonne { --primary:#ed8e39; --primary-deep:#a25420; --primary-soft:#fff0d4; }
body.theme-wald { --primary:#29ab6e; --primary-deep:#177b4b; --primary-soft:#d5f5df; }
body.theme-nacht { --primary:#479ab2; --primary-deep:#276879; --primary-soft:#d6edf4; --glass:rgba(228,245,252,.78); --glass-strong:rgba(231,247,252,.9); }
* {box-sizing:border-box;} html,body {margin:0;min-height:100%;}
body {font:500 16px/1.45 var(--font-body);color:var(--text);background:var(--bg) url(../img/abenteuer-meer.webp) center / cover fixed no-repeat; -webkit-font-smoothing:antialiased;}
body.layer-open {overflow:hidden;}
h1,h2,h3,h4 {font-family:var(--font-display);font-weight:800;line-height:1.12;margin:0;letter-spacing:0;}
button,input {font:inherit;} button {cursor:pointer;color:inherit;} button:disabled {cursor:default;} img {display:block;max-width:100%;} a {color:var(--lagoon-deep);}
.is-hidden {display:none!important;} .ic {width:1.25em;height:1.25em;flex:none;vertical-align:-.2em;}
.muted {color:var(--text-3);} .eyebrow {font-size:.68rem;font-weight:800;color:var(--text-2);letter-spacing:0;}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid var(--lagoon-deep);outline-offset:3px;}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border:1px solid var(--glass-line);border-radius:999px;font-weight:800;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 70%,var(--paper)),var(--primary));color:var(--paper);box-shadow:inset 0 2px 1px var(--glass-line),0 4px 0 var(--primary-deep),var(--shadow-1);transition:transform .15s,filter .2s;}
.btn:hover:not(:disabled) {filter:brightness(1.07);transform:translateY(-2px);} .btn:active:not(:disabled) {transform:translateY(3px);}
.btn-leaf {background:linear-gradient(180deg,color-mix(in srgb,var(--leaf) 72%,var(--paper)),var(--leaf));color:var(--ink);box-shadow:inset 0 2px 1px var(--glass-line),0 4px 0 var(--leaf-deep),var(--shadow-1);}
.btn-saffron {background:linear-gradient(180deg,var(--saffron-soft),var(--saffron));color:var(--ink);box-shadow:inset 0 2px 1px var(--glass-line),0 4px 0 var(--saffron-deep),var(--shadow-1);}
.btn-coral {background:linear-gradient(180deg,var(--coral-soft),var(--coral));color:var(--ink);}
.btn-ghost {background:var(--glass-strong);color:var(--ink);box-shadow:inset 0 2px 1px var(--glass-line),0 3px 0 var(--line);}
.btn-small {min-height:38px;padding:8px 14px;font-size:.83rem;} .btn-block {width:100%;}
.btn:disabled {filter:saturate(.25);opacity:.65;box-shadow:none;} .shop-card.is-active .btn:disabled {opacity:1;filter:none;}
.icon-btn {width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--glass-line);border-radius:50%;background:var(--glass-strong);box-shadow:var(--shadow-1);}
.icon-btn:disabled {opacity:.4;}
.login-screen {position:relative;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:32px;padding:24px 8%;isolation:isolate;}
.login-art {position:absolute;inset:0;z-index:-1;pointer-events:none;}
.login-art .claim {position:absolute;left:5%;top:6%;max-width:370px;color:var(--paper);text-shadow:var(--scene-shadow);}
.claim h2 {font-size:2.4rem;} .claim p {max-width:310px;font-size:1rem;}
.login-art .mascot {position:absolute;left:9%;bottom:4%;height:53%;max-width:40%;object-fit:contain;filter:var(--art-shadow);animation:float 5s ease-in-out infinite;}
.login-ship {position:absolute;width:16%;left:41%;top:42%;filter:var(--art-shadow);animation:sail 7s ease-in-out infinite;}
.wave {position:absolute;inset:48% 0 0;opacity:.18;background:repeating-linear-gradient(175deg,transparent 0 38px,var(--glass-line) 39px 40px,transparent 41px 62px);mask-image:linear-gradient(transparent,var(--paper));animation:water 12s linear infinite;}
.login-panel {grid-column:2;min-width:0;}
.login-card {padding:26px 28px;width:100%;background:var(--glass);border:1px solid var(--glass-line);border-radius:28px;backdrop-filter:blur(24px) saturate(1.3);box-shadow:var(--glass-shadow);}
.login-brand img {width:174px;height:100px;object-fit:contain;margin:0 auto 14px;}
.login-mobile-mascot {display:none;}
.login-card h1 {font-size:1.9rem;} .login-card>p {font-size:.9rem;margin:8px 0 20px;}
.field {display:block;font-size:.8rem;font-weight:700;margin-bottom:16px;}
.field input {width:100%;height:44px;border:1px solid var(--glass-line);background:rgba(239,252,255,.45);box-shadow:inset 0 2px 6px rgba(21,63,71,.1);color:var(--ink);padding:10px 12px;border-radius:12px;margin-top:6px;}
.password-field {position:relative;display:block;} .password-field input {padding-right:42px;}
.password-toggle {position:absolute;right:5px;top:10px;width:34px;height:34px;display:grid;place-items:center;border:0;background:none;}
.check-row {display:flex;gap:8px;align-items:center;font-size:.8rem;margin-bottom:18px;} .check-row input {accent-color:var(--leaf-deep);width:17px;height:17px;}
.login-links {display:flex;justify-content:space-between;gap:10px;font-size:.74rem;margin-top:18px;} .login-links a {color:var(--ink);text-decoration:none;}
.app-shell {min-height:100dvh;display:grid;grid-template-columns:188px minmax(0,1fr);grid-template-rows:82px minmax(0,1fr);}
.center-col {display:contents;}
.side-nav {grid-column:1;grid-row:1/3;position:sticky;top:0;height:100dvh;background:var(--glass);backdrop-filter:blur(24px);border-right:1px solid var(--glass-line);z-index:25;display:flex;flex-direction:column;padding:0 12px 18px;}
.side-brand {height:82px;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center;border-bottom:1px solid var(--glass-line);margin-bottom:24px;}
.side-logo img {width:130px;} .nav-collapse {width:24px;height:24px;box-shadow:none;} .nav-collapse .ic {width:14px;transform:rotate(180deg);}
.side-section {font-size:.61rem;font-weight:800;padding:0 12px;margin-bottom:12px;}
#side-tabs {display:grid;gap:8px;}
.tab-btn {display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;border:0;background:none;border-radius:12px;padding:8px 12px;text-align:left;font-size:.82rem;font-weight:700;transition:background .2s,transform .2s;}
.tab-btn.is-active {background:var(--glass-strong);color:var(--lagoon-deep);box-shadow:var(--glass-shadow);} .tab-btn:hover {background:var(--glass);}
.nav-icon {width:26px;flex-shrink:0;display:grid;place-items:center;} .tab-btn.is-active .nav-icon {color:var(--lagoon-deep);}
.side-companion {margin-top:auto;text-align:center;padding:14px 0;}
.side-companion img {width:80px;height:86px;object-fit:contain;margin:auto;animation:float 5s ease-in-out infinite;}
.side-companion strong {display:block;font-size:.73rem;} .side-companion span {display:block;font-size:.66rem;}
.side-parent {display:flex;justify-content:center;align-items:center;gap:8px;border-top:1px solid var(--glass-line);padding-top:14px;color:var(--text-2);text-decoration:none;font-size:.73rem;}
.topbar {grid-column:2/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;position:sticky;top:0;z-index:20;padding:12px 24px;background:var(--glass);border-bottom:1px solid var(--glass-line);backdrop-filter:blur(24px);}
.topbar-location {min-width:0;} .topbar-location strong {display:block;font:800 1.2rem var(--font-display);margin-top:4px;} .topbar-location .eyebrow {font-size:.6rem;}
.topbar-account {display:flex;align-items:center;gap:10px;min-width:0;}
.avatar {width:40px;height:40px;flex-shrink:0;object-fit:cover;object-position:top;border-radius:50%;background:var(--glass-strong);border:2px solid var(--saffron);}
.kid-meta {min-width:0;} .kid-name {font-weight:800;font-size:.86rem;} .kid-level {font-size:.63rem;white-space:nowrap;}
.xp-bar {height:5px;background:var(--line);border-radius:10px;width:96px;margin-top:5px;overflow:hidden;} .xp-bar span {display:block;height:100%;background:var(--leaf);}
.stat-chips {display:flex;gap:6px;flex-shrink:0;} .stat-chip {display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-line);border-radius:12px;padding:9px;font-size:.85rem;font-weight:800;line-height:1.1;background:var(--glass-strong);}
.stat-chip .ic {width:19px;height:19px;} .stat-chip small {display:block;font-size:.57rem;margin-top:4px;font-weight:600;} .stat-chip.is-fire {background:var(--coral-soft);} .stat-chip.is-coin {background:var(--saffron-soft);} .stat-chip.is-money {background:var(--leaf-soft);}
.main-area {grid-column:2;grid-row:2;min-width:0;width:100%;max-width:1060px;margin:0 auto;padding:26px;}
.tabbar {display:none;} .info-col {display:none;}
.view-head {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:20px;} .view-title {font-size:1.9rem;margin-top:4px;}
.panel {background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:20px;backdrop-filter:blur(22px);box-shadow:var(--glass-shadow);padding:22px;margin-bottom:18px;}
.panel-title {font-size:1.1rem;display:flex;gap:8px;align-items:center;margin-bottom:16px;}
.map-goals {display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;}
.goal-ring {width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--lagoon) calc(var(--p)*1%),var(--glass-line) 0);}
.goal-ring>div {width:52px;height:52px;border-radius:50%;background:var(--glass-strong);display:grid;place-content:center;text-align:center;font-weight:800;font-size:.8rem;}
.goal-ring small {font-size:.55rem;} .goal-label {display:flex;justify-content:space-between;gap:8px;font-size:.73rem;font-weight:700;margin-bottom:8px;}
.goal-reward {font-size:.7rem;margin-top:8px;} .bar {height:9px;background:var(--line);border-radius:99px;overflow:hidden;} .bar>span {height:100%;display:block;background:var(--leaf);border-radius:inherit;} .bar.is-saffron>span {background:var(--saffron);}
.app-shell[data-view="map"] {height:100dvh;min-height:600px;} .app-shell[data-view="map"] .main-area {padding:0;max-width:none;}
.world-scene {height:100%;min-height:0;position:relative;display:grid;grid-template-rows:88px minmax(0,1fr) 58px;}
.journey-head {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 30px 6px;color:var(--paper);text-shadow:var(--scene-shadow);}
.journey-head .eyebrow {color:var(--paper);} .journey-head h1 {font-size:1.55rem;margin-top:4px;} .journey-head p {margin:4px 0 0;font-size:.8rem;} .journey-head .btn {text-shadow:none;}
.sea-map {position:relative;min-height:0;width:100%;}
.sea-route {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.sea-route path {fill:none;} .route-line {stroke:var(--route);stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round;animation:routeFlow 35s linear infinite;} .route-glow {stroke:var(--route-glow);stroke-width:1.4;filter:blur(.5px);}
.island {position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:210px;border:0;background:none;padding:0;text-align:center;z-index:3;}
.island-shape {width:100%;height:158px;display:grid;place-items:center;}
.island-ground {width:100%;height:100%;object-fit:contain;filter:var(--art-shadow);animation:float 5s ease-in-out infinite;animation-delay:var(--delay);transition:filter .25s;}
.island:hover .island-ground {filter:drop-shadow(0 14px 12px var(--lagoon-soft));}
.island.is-current .island-ground {animation:float 3.5s ease-in-out infinite;} .island.is-locked .island-ground {filter:saturate(.75) var(--art-shadow);}
.island-label {position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:7px;align-items:center;padding:7px 14px 7px 6px;background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:14px;backdrop-filter:blur(16px);box-shadow:var(--glass-shadow);text-align:left;}
.island-guardian {width:30px;height:30px;object-fit:cover;object-position:top;border-radius:50%;background:var(--paper);}
.island-name {font-size:.83rem;font-weight:800;min-width:0;} .island-name small {display:block;font-size:.57rem;font-weight:600;margin-top:2px;}
.island-badge {position:absolute;right:-6px;top:-9px;border:2px solid var(--glass-line);background:var(--surface);border-radius:50%;width:23px;height:23px;display:grid;place-items:center;}
.island-badge .ic {width:12px;height:12px;} .is-done .island-badge {background:var(--leaf);} .is-current .island-badge {background:var(--saffron);}
.island-stars {display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:0 0 9px 9px;background:var(--glass-strong);font-size:.65rem;font-weight:800;}
.island-stars .ic {width:12px;height:12px;fill:var(--saffron);color:var(--saffron-deep);}
.map-lighthouse {position:absolute;right:5%;top:8%;width:57px;filter:var(--art-shadow);}
.map-ship-wrap {position:absolute;left:56%;top:63%;width:95px;z-index:2;animation:sail 8s ease-in-out infinite;}
.map-ship {width:100%;filter:var(--art-shadow);} .map-avatar {position:absolute;bottom:-4px;left:-12px;width:34px;height:34px;border:2px solid var(--saffron);background:var(--glass-strong);border-radius:50%;object-fit:cover;object-position:top;}
.sea-compass {position:absolute;right:8%;bottom:6%;color:var(--glass-line);} .sea-compass .ic {width:60px;height:60px;stroke-width:1;}
.world-controls {display:flex;align-items:center;justify-content:center;gap:14px;z-index:5;padding-bottom:12px;}
.world-controls>.icon-btn:first-child .ic {transform:rotate(180deg);} .world-dots {display:flex;gap:8px;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(16px);padding:6px;border-radius:99px;}
.world-dot {width:30px;height:30px;border:0;border-radius:50%;background:none;font-weight:800;} .world-dot.is-active {background:var(--saffron);box-shadow:0 2px 0 var(--saffron-deep);}
.world-goals {position:absolute;right:18px;bottom:72px;z-index:10;width:min(340px,calc(100% - 36px));padding:18px;border-radius:18px;background:var(--glass-strong);backdrop-filter:blur(22px);box-shadow:var(--glass-shadow);}
.nav-collapsed {grid-template-columns:76px minmax(0,1fr);} .nav-collapsed .side-section,.nav-collapsed .nav-label,.nav-collapsed .side-companion {display:none;} .nav-collapsed .side-brand {grid-template-columns:1fr;gap:2px;justify-items:center;} .nav-collapsed .side-logo img {width:55px;} .nav-collapsed .nav-collapse .ic {transform:none;} .nav-collapsed .side-parent {font-size:0;margin-top:auto;} .nav-collapsed .side-parent .ic {font-size:18px;}
/* ---------- Sheet / Dialog ---------- */


.sheet-grip { width: 44px; height: 6px; border-radius: 3px; background: var(--line); margin: 0 auto var(--sp-4); }
.sheet-head { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 2px dashed var(--line); }
.sheet-head img { width: 86px; height: 86px; border-radius: var(--r-l); object-fit: cover; object-position: top; background: var(--lagoon-soft); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--line); }
.sheet-head h2 { font-size: var(--fs-xl); }
.progress-line { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-s); font-weight: 700; }
.progress-line .bar { flex: 1; height: 10px; }
.station-path { list-style: none; margin: 0; padding: 0; position: relative; }
.station-path::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 3px; background: repeating-linear-gradient(var(--line) 0 7px, transparent 7px 14px); }
.station { position: relative; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-m); }
.station-dot { position: relative; z-index: 1; width: 56px; height: 56px; flex: none; border-radius: 20px; border: 0; display: grid; place-items: center; background: linear-gradient(180deg, #67E38F, var(--leaf)); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--leaf-deep); }
.station-dot .ic { width: 24px; height: 24px; }
.station.is-next { background: var(--saffron-soft); }
.station.is-next .station-dot { background: linear-gradient(180deg, #FFD964, var(--saffron)); color: var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--saffron-deep); }
.station.is-locked .station-dot { background: #EDE3CB; color: var(--text-3); box-shadow: 0 4px 0 #D8CFBC; }
.station-info { flex: 1; } .station-info strong { font-family: var(--font-display); font-size: var(--fs-l); display: block; font-weight: 800; }
.station-sub { font-size: var(--fs-s); color: var(--text-3); font-weight: 600; display: flex; align-items: center; gap: 2px; }
.stars-inline .ic { width: 15px; height: 15px; color: var(--saffron); fill: var(--saffron); }
.stars-inline .ic.is-off { color: #E4D9C0; fill: #E4D9C0; }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Bildkarten ---------- */
.word-art { --s: 112px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); display: inline-grid; place-items: center; flex: none; background: var(--lagoon-soft); color: var(--lagoon-deep); box-shadow: inset 0 0 0 3px #fff, 0 4px 0 rgba(10,138,153,.25); }
.word-art .ic { width: 46%; height: 46%; stroke-width: 1.6; }
.word-art.is-s { --s: 52px; } .word-art.is-m { --s: 76px; } .word-art.is-l { --s: 140px; }
.word-art.tint-coral { background: var(--coral-soft); color: var(--coral-deep); box-shadow: inset 0 0 0 3px #fff, 0 4px 0 rgba(214,58,40,.25); }
.word-art.tint-saffron { background: var(--saffron-soft); color: var(--saffron-deep); box-shadow: inset 0 0 0 3px #fff, 0 4px 0 rgba(224,160,0,.25); }
.word-art.tint-leaf { background: var(--leaf-soft); color: var(--leaf-deep); box-shadow: inset 0 0 0 3px #fff, 0 4px 0 rgba(34,162,78,.25); }
.word-art.tint-ink { background: #E6ECF3; color: var(--ink-2); }
.word-art.is-number { background: linear-gradient(180deg, #2B5A7E, var(--ink)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: calc(var(--s) * .5); }
.word-art.is-color { background: var(--surface-2); }
.word-art.is-color i { width: 58%; height: 58%; border-radius: 34% 66% 58% 42% / 44% 40% 60% 56%; background: var(--swatch); box-shadow: inset 0 -8px 16px rgba(0,0,0,.15), inset 0 4px 8px rgba(255,255,255,.35), 0 0 0 2px rgba(0,0,0,.06); }

/* ---------- Lern-Spieler ---------- */

body.theme-nacht .player { background-image: linear-gradient(rgba(14,22,38,.9), rgba(14,22,38,.9)), url(../img/meer-hintergrund.webp); }

.player-progress { flex: 1; height: 16px; border-radius: var(--r-round); background: rgba(255,255,255,.85); overflow: hidden; box-shadow: inset 0 2px 4px rgba(20,50,74,.2), 0 2px 0 rgba(255,255,255,.4); }
.player-progress span { display: block; height: 100%; background: linear-gradient(180deg, #6FE39A, var(--leaf)); border-radius: inherit; transition: width .4s var(--ease); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }

body.theme-nacht .player-round { color: var(--text-3); text-shadow: none; }



.player-foot-inner .btn { flex: 1; }

body.theme-nacht .q-title { color: var(--text); }

body.theme-nacht .q-kicker { color: var(--primary); text-shadow: none; }




.word-hint .ic { color: var(--saffron-deep); }
.audio-row { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.audio-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; background: linear-gradient(180deg, #3CD3E0, var(--lagoon)); color: #fff; display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 var(--lagoon-deep); transition: transform .1s; }
.audio-btn .ic { width: 26px; height: 26px; }
.audio-btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
.audio-btn.is-slow { background: linear-gradient(180deg, #fff, #FFF3D1); color: var(--saffron-deep); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 4px 0 var(--line); border: 2px solid var(--line); }
.audio-btn.is-big { width: 132px; height: 132px; border-radius: 50%; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), 0 6px 0 var(--lagoon-deep), 0 18px 30px -10px rgba(10,60,80,.4); }
.audio-btn.is-big .ic { width: 56px; height: 56px; }
.audio-btn.is-mini { width: 38px; height: 38px; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 var(--lagoon-deep); }
.audio-btn.is-mini .ic { width: 18px; height: 18px; }

.prompt-card img.voizy { width: 96px; filter: drop-shadow(0 10px 12px rgba(10,60,80,.3)); }


.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.choice-grid.is-list { grid-template-columns: 1fr; }
.choice { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); border: 3px solid var(--line); background: var(--cream); border-radius: var(--r-l); padding: var(--sp-4); font-weight: 800; font-size: var(--fs-l); box-shadow: 0 5px 0 var(--line); min-height: 68px; transition: transform .1s, border-color .15s, background .15s; text-align: center; color: var(--ink); }
.choice-grid.is-list .choice { justify-content: flex-start; text-align: left; }
.choice.has-art { flex-direction: column; padding: var(--sp-4) var(--sp-3); font-size: var(--fs-m); }
.choice:hover { border-color: #E8C96E; }
.choice:active { transform: translateY(5px); box-shadow: 0 0 0 var(--line); }
.choice-key { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line); display: grid; place-items: center; font-size: var(--fs-xs); color: var(--text-3); font-weight: 800; flex: none; background: #fff; }
.choice.is-selected { border-color: var(--lagoon); box-shadow: 0 5px 0 var(--lagoon-deep); background: var(--lagoon-soft); }
.choice.is-correct { border-color: var(--leaf); background: linear-gradient(180deg, #8FEFB0, var(--leaf)); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 var(--leaf-deep); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); animation: hop .45s var(--ease); }
.choice.is-wrong { border-color: var(--coral); background: linear-gradient(180deg, #FF9A8A, var(--coral)); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 var(--coral-deep); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); animation: wobble .45s; }
@keyframes hop { 40% { transform: translateY(-8px); } }
@keyframes wobble { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.puzzle-answer { min-height: 76px; border-bottom: 3px dashed var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) 0; margin-bottom: var(--sp-5); }
.puzzle-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.tile { min-width: 50px; height: 54px; padding: 0 14px; border: 2px solid var(--line); border-radius: var(--r-s); background: var(--cream); font-family: var(--font-display); font-size: var(--fs-l); font-weight: 800; box-shadow: 0 4px 0 var(--line); color: var(--ink); }
.tile.is-used { visibility: hidden; }
.charbar { display: flex; gap: 6px; margin-top: var(--sp-3); flex-wrap: wrap; }
.charbar button { width: 46px; height: 46px; border-radius: var(--r-s); border: 2px solid var(--line); background: var(--cream); font-weight: 800; font-size: var(--fs-l); box-shadow: 0 3px 0 var(--line); }
.type-input { font-size: var(--fs-xl); font-family: var(--font-display); padding: 18px; background: var(--cream); }
.link-btn { border: 0; background: none; color: #fff; text-shadow: 0 1px 6px rgba(10,60,80,.5); font-weight: 800; padding: var(--sp-4) 0; font-size: var(--fs-s); }
body.theme-nacht .link-btn { color: var(--lagoon-deep); text-shadow: none; }
.pairs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.pairs-col { display: grid; gap: var(--sp-3); }
.pairs-col .choice { font-size: var(--fs-m); min-height: 62px; }
.timer-bar { height: 10px; border-radius: var(--r-round); background: rgba(255,255,255,.85); overflow: hidden; margin-bottom: var(--sp-4); box-shadow: inset 0 1px 3px rgba(20,50,74,.2); }
.timer-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #FF8371, var(--coral)); transform-origin: left; }

/* Rückmeldung */


.feedback-inner img { width: 80px; }
.feedback-inner .btn { grid-column: 1 / -1; }
.feedback.is-good { background: linear-gradient(180deg, #7FE89F, #45C874); color: #0D5A2C; }
.feedback.is-bad { background: linear-gradient(180deg, #FFB4A6, #FF8A76); color: #7E1F10; }
.feedback h3 { font-size: var(--fs-xl); display: flex; align-items: center; gap: var(--sp-2); }
.feedback h3 small { font-family: var(--font-body); font-size: var(--fs-m); font-weight: 700; opacity: .8; }
.feedback-solution { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; margin-top: 6px; }

/* Start & Ergebnis */

.stage-badge { width: 112px; height: 112px; margin: 0 auto; border-radius: 34px; display: grid; place-items: center; background: linear-gradient(180deg, #3CD3E0, var(--lagoon)); color: #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--lagoon-deep), 0 18px 30px -10px rgba(10,60,80,.4); }
.stage-badge .ic { width: 52px; height: 52px; }
.stage-badge.is-saffron { background: linear-gradient(180deg, #FFD964, var(--saffron)); color: var(--ink); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 6px 0 var(--saffron-deep); }
.stage-badge.is-coral { background: linear-gradient(180deg, #FF8371, var(--coral)); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 var(--coral-deep); }
.stage-img { width: 180px; margin: 0 auto; filter: drop-shadow(0 18px 22px rgba(10,50,70,.3)); }
.stage-img.is-round { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--lagoon-soft); box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--saffron), 0 18px 30px -10px rgba(10,50,70,.4); }


body.theme-nacht .stage h2, body.theme-nacht .stage p { color: var(--text); text-shadow: none; }
.stage-facts { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

.fact strong { display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text); }
.guardian-speech { position: relative; background: var(--cream); border: 3px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4) var(--sp-5); font-weight: 600; max-width: 400px; margin: var(--sp-4) auto; box-shadow: var(--shadow-1); text-align: left; }
.guardian-speech::before { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; background: var(--cream); border-left: 3px solid var(--line); border-top: 3px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.result-stars { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.result-stars .ic { width: 58px; height: 58px; color: var(--saffron); fill: var(--saffron); stroke-width: 1.5; animation: starIn .5s var(--ease) both; filter: drop-shadow(0 6px 0 var(--saffron-deep)); }
.result-stars .ic:nth-child(2) { animation-delay: .3s; transform: translateY(-12px); width: 70px; height: 70px; } .result-stars .ic:nth-child(3) { animation-delay: .6s; }
.result-stars .ic.is-off { color: rgba(255,255,255,.5); fill: rgba(255,255,255,.5); filter: none; }
@keyframes starIn { from { transform: scale(0) rotate(-60deg); opacity: 0; } 70% { transform: scale(1.2); } }
.result-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.result-tile { border-radius: var(--r-m); padding: var(--sp-4) var(--sp-2); background: var(--cream); border: 3px solid var(--line); box-shadow: var(--shadow-1); }
.result-tile .ic { width: 26px; height: 26px; }
.result-tile b { display: block; font-family: var(--font-display); font-size: var(--fs-xl); margin-top: 4px; }
.result-tile small { color: var(--text-3); font-weight: 700; font-size: var(--fs-xs); }
.result-tile.is-xp .ic { color: var(--saffron-deep); } .result-tile.is-coins .ic { color: var(--coral); } .result-tile.is-words .ic { color: var(--leaf-deep); }
.big-percent { font-family: var(--font-display); font-size: 5.4rem; font-weight: 800; line-height: 1; letter-spacing: 0; margin-top: var(--sp-4); color: #fff; text-shadow: 0 3px 14px rgba(10,60,80,.5); }
.big-percent.is-pass { color: #B8F5C9; } .big-percent.is-fail { color: #FFD3C8; }

/* Popups */
.popup-overlay { align-items: center; }
.popup { width: min(380px, 92vw); margin: auto; background: var(--cream); border: 3px solid var(--line); border-radius: var(--r-xl); padding: 0 var(--sp-5) var(--sp-5); text-align: center; box-shadow: var(--shadow-3); animation: popIn .4s var(--ease); overflow: hidden; }
.popup-hero { margin: 0 calc(var(--sp-5) * -1) var(--sp-4); padding: var(--sp-5) 0 0; background: radial-gradient(80% 90% at 50% 100%, var(--saffron-soft), transparent), var(--surface-2); }
.popup-hero img { width: 170px; margin: 0 auto; }
.popup .popup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-round); background: var(--saffron-soft); border: 2px solid #F0C96A; color: var(--saffron-deep); font-weight: 800; font-size: var(--fs-s); margin-bottom: var(--sp-3); }
.popup h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.popup p { color: var(--text-3); font-weight: 600; margin: 0 0 var(--sp-5); }
.tr-title { display: inline-block; background: linear-gradient(180deg, #3CD3E0, var(--lagoon)); color: #fff; border-radius: var(--r-s); padding: 5px 16px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-l); margin-bottom: var(--sp-3); box-shadow: 0 3px 0 var(--lagoon-deep); }
@keyframes popIn { from { transform: scale(.85) translateY(10px); opacity: 0; } }
.confetti { position: fixed; top: -20px; width: 8px; height: 14px; z-index: 200; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Schatzsuche ---------- */
.feature-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); color: #fff; background: linear-gradient(160deg, #2BC0DC, #0E8FB4); box-shadow: var(--shadow-2), inset 0 0 0 3px rgba(255,255,255,.3); }
.feature-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 80% 0%, rgba(255,255,255,.25), transparent 70%); pointer-events: none; }
.feature-card .eyebrow { color: rgba(255,255,255,.85); }
.feature-card h2 { font-size: var(--fs-2xl); margin: var(--sp-2) 0 var(--sp-5); max-width: 70%; position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(10,60,80,.4); }
.feature-card .btn { position: relative; z-index: 1; }
.feature-card img { position: absolute; right: -10px; bottom: -10px; width: 46%; max-width: 220px; z-index: 1; filter: drop-shadow(0 14px 20px rgba(0,0,0,.3)); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat-box { background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4) var(--sp-3); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.stat-box strong { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text); }
.word-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.word-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-m); background: var(--surface-2); border: 2px solid var(--line); font-weight: 700; font-size: var(--fs-s); }
.word-item small { display: block; color: var(--text-3); font-weight: 600; }

/* ---------- Laden ---------- */


.segmented button.is-active { background: linear-gradient(180deg, #FFD964, var(--saffron)); color: var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 var(--saffron-deep); }


.shop-card:hover { transform: translateY(-2px); }

.shop-visual img { height: 92%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(15,34,51,.18)); }
.shop-visual .ic { width: 48px; height: 48px; stroke-width: 1.5; }
.shop-visual.is-theme { padding: 14%; }
.theme-preview { width: 100%; height: 100%; border-radius: var(--r-s); display: grid; grid-template-rows: 1fr 30%; overflow: hidden; box-shadow: var(--shadow-1); }
.theme-preview i:first-child { background: var(--a); } .theme-preview i:last-child { background: var(--b); }
.shop-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.shop-card h3 { font-size: var(--fs-m); font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
.shop-card small { color: var(--text-3); font-size: var(--fs-xs); }
.price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: var(--fs-s); color: var(--saffron-deep); }
.price .ic { width: 16px; height: 16px; }
.shop-card.is-active { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf); }
.shop-card.is-too-expensive .shop-visual { opacity: .5; filter: grayscale(.6); }

/* ---------- Belohnungen ---------- */

.chest::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 80% 0%, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.chest-amount { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: 0; text-shadow: 0 3px 10px rgba(10,60,80,.4); }
.chest .eyebrow { color: rgba(255,255,255,.85); }
.chest .btn { position: relative; z-index: 1; }
.chest-img { width: 150px; margin: 0 auto; filter: drop-shadow(0 14px 18px rgba(0,30,50,.4)); position: relative; z-index: 1; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 2px dashed var(--line); font-weight: 600; }
.list li:last-child { border-bottom: 0; }
.list-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--lagoon-soft); color: var(--lagoon-deep); flex: none; }
.list-ic .ic { width: 18px; height: 18px; }
.li-main { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.amount-plus { color: var(--leaf-deep); font-weight: 800; font-variant-numeric: tabular-nums; } .amount-minus { color: var(--coral-deep); font-weight: 800; font-variant-numeric: tabular-nums; }

.reward-row:last-child { border-bottom: 0; }
.reward-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral-deep); }
.reward-ic .ic { width: 24px; height: 24px; }
.reward-row .bar { height: 8px; margin-top: 8px; }
.status-pill { font-size: var(--fs-2xs); font-weight: 800; padding: 5px 11px; border-radius: var(--r-round); text-transform: uppercase; letter-spacing: 0; }
.status-wartet { background: var(--saffron-soft); color: var(--saffron-deep); } .status-erledigt { background: var(--leaf-soft); color: var(--leaf-deep); } .status-abgelehnt { background: var(--coral-soft); color: var(--coral-deep); }

/* ---------- Rangliste ---------- */
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: var(--sp-2); margin-bottom: var(--sp-4); text-align: center; }


.podium-step { border-radius: var(--r-m) var(--r-m) 0 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: #fff; padding-top: var(--sp-3); background: var(--medal); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); }
.podium-place:nth-child(1) { --medal: #9AA9B8; } .podium-place:nth-child(2) { --medal: var(--saffron); } .podium-place:nth-child(3) { --medal: #D08A5B; }
.podium-place:nth-child(1) .podium-step { height: 84px; } .podium-place:nth-child(2) .podium-step { height: 124px; color: var(--ink); text-shadow: none; } .podium-place:nth-child(3) .podium-step { height: 64px; }


body.theme-nacht .podium-name, body.theme-nacht .podium-xp { color: var(--text); text-shadow: none; }
.rank-row { display: grid; grid-template-columns: 24px 44px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-2); border-bottom: 2px dashed var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--lagoon-soft); }
.rank-row.is-me { background: var(--lagoon-soft); border-radius: var(--r-m); border-bottom-color: transparent; }
.rank-num { font-family: var(--font-display); font-weight: 800; color: var(--text-3); }
.rank-meta { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; }
.rank-meta span { display: inline-flex; align-items: center; gap: 3px; }
.rank-meta .ic { width: 13px; height: 13px; }

/* ---------- Profil ---------- */



.profile-head .eyebrow, .profile-head .muted { color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(10,60,80,.45); }
body.theme-nacht .profile-head h2 { color: var(--text); }
body.theme-nacht .profile-head .eyebrow, body.theme-nacht .profile-head .muted { color: var(--text-3); text-shadow: none; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.kpi { border-radius: var(--r-m); padding: var(--sp-4); background: var(--surface-2); border: 2px solid var(--line); }
.kpi .ic { width: 22px; height: 22px; }
.kpi strong { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; margin-top: var(--sp-2); }
.kpi small { color: var(--text-3); font-weight: 700; }
.kpi.is-fire .ic { color: var(--coral); } .kpi.is-words .ic { color: var(--lagoon-deep); } .kpi.is-island .ic { color: var(--leaf-deep); } .kpi.is-coin .ic { color: var(--saffron-deep); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; font-size: .62rem; font-weight: 700; color: var(--text-3); }
.chart-col i { display: block; width: 100%; border-radius: 6px; background: var(--lagoon-soft); min-height: 4px; }
.chart-col.is-filled i { background: linear-gradient(180deg, #3CD3E0, var(--lagoon)); }
.chart-col.is-today i { background: linear-gradient(180deg, #FFD964, var(--saffron)); }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.badge-item { text-align: center; font-size: var(--fs-xs); font-weight: 700; }
.badge-medal { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(160deg, #FFD964, var(--saffron)); color: var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--saffron-deep); transform: rotate(-4deg); }
.badge-medal .ic { width: 28px; height: 28px; }
.badge-item:nth-child(even) .badge-medal { transform: rotate(4deg); background: linear-gradient(160deg, #3CD3E0, var(--lagoon)); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--lagoon-deep); }
.badge-item.is-locked .badge-medal { background: #EDE3CB; color: var(--text-3); box-shadow: 0 4px 0 #D8CFBC; }
.badge-item.is-locked { color: var(--text-3); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0 var(--sp-4); font-weight: 700; }
.toggle-row span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #EDE3CB; border-radius: 30px; transition: .2s; box-shadow: inset 0 1px 3px rgba(20,50,74,.15); }
.switch span::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s var(--ease); box-shadow: var(--shadow-1); }
.switch input:checked + span { background: var(--leaf); }
.switch input:checked + span::before { transform: translateX(22px); }

/* ---------- Info-Spalte ---------- */
.voizy-tip { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-3); align-items: center; }
.phrase-tr { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 800; }

/* ---------- Toast & Demo ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px); transform: translateX(-50%); z-index: 300; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-round); font-weight: 700; font-size: var(--fs-s); animation: slideUp .25s var(--ease); max-width: 90vw; text-align: center; box-shadow: var(--shadow-2); }
.demo-toggle { position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + 14px + var(--safe-b)); z-index: 400; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--cream); color: var(--text-2); display: grid; place-items: center; opacity: .9; box-shadow: var(--shadow-2); }
.demo-toggle:hover { opacity: 1; }
.demo-panel { position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + 68px + var(--safe-b)); z-index: 400; width: min(320px, calc(100vw - 28px)); max-height: 70vh; overflow: auto; background: var(--cream); color: var(--ink); border: 3px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); font-size: var(--fs-s); box-shadow: var(--shadow-3); }
.demo-panel h4 { font-family: var(--font-body); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0; color: var(--ink-3); margin: var(--sp-4) 0 6px; }
.demo-panel h4:first-child { margin-top: 0; }
.demo-links { display: flex; flex-wrap: wrap; gap: 4px; }
.demo-panel button, .demo-panel a { border: 2px solid var(--line); background: #fff; border-radius: 9px; padding: 5px 9px; font-size: .78rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.demo-panel button:hover, .demo-panel a:hover { background: var(--lagoon-soft); border-color: var(--lagoon); }


/* Unified dialog and task surfaces */
.overlay {position:fixed;inset:0;z-index:60;background:var(--overlay);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;}
.sheet {width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--glass-strong);backdrop-filter:blur(24px);border:1px solid var(--glass-line);border-radius:24px;padding:22px;box-shadow:var(--shadow-3);}
.sheet-grip {display:none;}
.popup {background:var(--glass-strong);backdrop-filter:blur(24px);border:1px solid var(--glass-line);}
.player {position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;background:var(--bg) url(../img/aufgaben-abend.webp) center / cover;isolation:isolate;padding:calc(12px + var(--safe-t)) 0 0;}
.player-top {display:grid;grid-template-columns:36px minmax(0,1fr) 60px;gap:14px;align-items:center;flex-shrink:0;width:min(720px,calc(100% - 32px));padding:7px 14px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(22px);border-radius:99px;box-shadow:var(--glass-shadow);}
.player-top .icon-btn {width:34px;height:34px;box-shadow:none;}
.player-progress {height:10px;background:var(--glass-line);border-radius:99px;overflow:hidden;} .player-progress span {height:100%;display:block;background:linear-gradient(180deg,var(--leaf-soft),var(--leaf));border-radius:inherit;transition:width .3s;}
.player-count {font-size:.73rem;text-align:right;font-weight:700;}
.player-round {flex-shrink:0;background:var(--overlay);color:var(--paper);border-radius:99px;padding:5px 14px;margin:10px 16px 0;text-align:center;font-size:.63rem;}
.player-body {flex:1;min-height:0;width:100%;max-width:650px;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;align-items:stretch;overscroll-behavior:contain;}
.glass-panel {margin:auto 0;padding:24px 28px;border:1px solid var(--glass-line);border-radius:24px;background:var(--glass);backdrop-filter:blur(28px) saturate(1.25);box-shadow:var(--glass-shadow);animation:taskArrival .3s var(--ease);}
.player-foot {position:relative;flex-shrink:0;width:min(650px,100%);padding:8px 20px calc(20px + var(--safe-b));}
.player-foot-inner {display:flex;gap:12px;} .player-foot-inner .btn {flex:1;}
.player-companion {position:absolute;left:4%;bottom:12%;width:125px;pointer-events:none;animation:float 5s ease-in-out infinite;z-index:-1;}
.stage {text-align:center;} .stage h2 {font-size:1.9rem;margin:14px 0 8px;color:var(--ink);text-shadow:none;}
.stage p {margin:0 auto;font-size:.9rem;color:var(--ink-2);text-shadow:none;max-width:400px;}
.stage-img,.intro-voizy {width:130px;height:135px;object-fit:contain;margin:0 auto;filter:var(--art-shadow);animation:float 5s ease-in-out infinite;}
.stage-facts {display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap;}
.fact {min-width:85px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);padding:9px 14px;font-size:.75rem;} .fact strong {font-size:1.3rem;}
.q-title {font-size:1.5rem;margin-bottom:16px;text-shadow:none;color:var(--ink);}
.q-kicker {display:flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;color:var(--lagoon-deep);margin-bottom:9px;text-shadow:none;}
.word-hero {text-align:center;} .word-tr {font:800 2.6rem/1.1 var(--font-display);margin:10px 0 4px;color:var(--ink);} .word-de {font-size:1.1rem;color:var(--ink-2);font-weight:700;}
.word-hint {display:flex;align-items:center;gap:8px;margin:16px auto 0;font-size:.82rem;text-align:left;padding:10px 14px;border-radius:12px;background:var(--glass);max-width:460px;}
.word-art.is-l {--s:108px;} .word-art {border-radius:24%;}
.prompt-card {display:flex;gap:16px;align-items:center;margin-bottom:16px;min-width:0;} .prompt-card img.voizy {width:76px;height:90px;object-fit:contain;}
.speech {display:flex;gap:8px;align-items:center;min-width:0;overflow-wrap:anywhere;padding:12px 16px;background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:16px;font:800 1.25rem var(--font-display);}
.speech::before {display:none;}
.choice {background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:14px;box-shadow:0 3px 0 var(--line);min-height:54px;padding:12px;font-size:1rem;overflow-wrap:anywhere;}
.choice-grid,.pairs-grid,.pairs-col {gap:10px;} .choice-key {background:var(--glass);border:0;}
.choice:hover {border-color:var(--lagoon);background:var(--lagoon-soft);} .choice.is-correct {background:var(--leaf-soft);color:var(--ink);text-shadow:none;border-color:var(--leaf);}
.choice.is-wrong {background:var(--coral-soft);color:var(--ink);text-shadow:none;border-color:var(--coral);}
.choice.has-art {min-height:100px;padding:10px;gap:6px;} .audio-btn.is-big {width:86px;height:86px;} .audio-btn.is-big .ic {width:40px;height:40px;}
.type-input {font-size:1.2rem;padding:12px;background:var(--glass-strong);} .tile,.charbar button {background:var(--glass-strong);height:44px;min-width:40px;}
.puzzle-answer {min-height:56px;margin-bottom:14px;padding:8px 0;} .puzzle-pool {gap:7px;} .link-btn {color:var(--ink-2);text-shadow:none;padding:12px 0;}
.feedback {position:relative;flex-shrink:0;width:min(650px,calc(100% - 24px));left:auto;right:auto;bottom:auto;padding:14px 18px;margin:0 0 calc(14px + var(--safe-b));border:1px solid var(--glass-line);border-radius:20px;backdrop-filter:blur(22px);box-shadow:var(--glass-shadow);}
.feedback-inner {display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;max-width:none;margin:0;}
.feedback-inner img {width:48px;height:60px;object-fit:contain;} .feedback-inner .btn {grid-column:auto;font-size:.9rem;padding:10px 16px;}
.feedback h3 {font-size:1.2rem;flex-wrap:wrap;} .feedback h3 small {font-size:.8rem;} .feedback-solution {font-size:.85rem;flex-wrap:wrap;}
.feedback.is-good {background:var(--leaf-soft);color:var(--ink);} .feedback.is-bad {background:var(--coral-soft);color:var(--ink);}
.player:has(.feedback) .player-foot {display:none;}
.big-percent {font-size:3.7rem;text-shadow:none;} .big-percent.is-pass {color:var(--leaf-deep);} .big-percent.is-fail {color:var(--coral-deep);}
.guardian-speech {background:var(--glass-strong);border:1px solid var(--glass-line);font-size:.85rem;padding:12px 16px;margin:12px auto;}
.result-tile {background:var(--glass);border:1px solid var(--glass-line);padding:10px;} .result-stars {margin-top:0;}
/* Market, rewards and character views */
.segmented {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--glass);backdrop-filter:blur(24px);padding:5px;border:1px solid var(--glass-line);border-radius:16px;margin-bottom:18px;}
.segmented button {border:0;background:none;display:flex;gap:6px;align-items:center;justify-content:center;padding:10px 6px;border-radius:12px;font-size:.8rem;font-weight:800;min-width:0;}
.segmented button.is-active {background:var(--saffron);box-shadow:0 2px 0 var(--saffron-deep);}
.shop-showcase {display:grid;grid-template-columns:100px minmax(0,1fr) 120px;gap:18px;align-items:center;padding:0 14px 18px;}
.shop-showcase>img {width:100px;height:105px;object-fit:contain;filter:var(--art-shadow);animation:float 5s ease-in-out infinite;}
.shop-showcase .showcase-ship {width:120px;animation:sail 7s ease-in-out infinite;}
.shop-showcase h2 {font-size:1.5rem;}
.shop-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.shop-card {min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:18px;background:var(--glass);backdrop-filter:blur(22px);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);}
.shop-visual {aspect-ratio:1.3;display:grid;place-items:center;min-height:0;}
.shop-visual img {width:100%;height:140px;object-fit:contain;filter:var(--art-shadow);transition:transform .3s;}
.shop-card:hover .shop-visual img {transform:translateY(-5px) rotate(-3deg);} .shop-card .btn {margin-top:auto;}
.shop-card.is-too-expensive .shop-visual {opacity:.8;filter:none;} .shop-card.is-active {border:2px solid var(--leaf);box-shadow:var(--glass-shadow);}
.theme-preview {height:110px;background:var(--a);}
.chest {display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px;color:var(--ink);border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);backdrop-filter:blur(24px);box-shadow:var(--glass-shadow);}
.chest::after {display:none;} .chest .eyebrow {color:var(--ink-2);} .chest-amount {font-size:2.6rem;text-shadow:none;}
.chest-img {width:130px;animation:float 5s ease-in-out infinite;} .chest .btn {width:auto;}
.reward-row {display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.reward-ic.has-art {width:68px;height:68px;background:none;} .reward-ic.has-art img {width:66px;height:66px;object-fit:contain;filter:var(--art-shadow);transition:transform .25s;}
.reward-row:hover img {transform:rotate(-5deg) scale(1.07);} .reward-row strong {font-size:.95rem;}
.wish-art {width:42px;height:42px;object-fit:contain;} .list-ic:has(.wish-art) {background:none;width:44px;height:44px;}
.feature-card {background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-line);color:var(--ink);box-shadow:var(--glass-shadow);}
.feature-card h2 {font-size:1.7rem;text-shadow:none;} .feature-card .eyebrow {color:var(--text-2);}
.podium-place img {height:110px;width:110px;object-fit:contain;margin:0 auto;filter:var(--art-shadow);animation:float 5s ease-in-out infinite;}
.podium-place:nth-child(2) img {width:140px;height:140px;} .podium-name {color:var(--ink);font-weight:800;text-shadow:none;} .podium-xp {color:var(--ink-2);font-size:.8rem;text-shadow:none;margin-bottom:8px;}
.profile-head {display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:20px;}
.profile-head img {width:150px;height:160px;object-fit:contain;filter:var(--art-shadow);animation:float 5s ease-in-out infinite;}
.profile-head h2 {font-size:2rem;color:var(--ink);text-shadow:none;} .profile-head .eyebrow,.profile-head .muted {color:var(--ink-2);text-shadow:none;}
.demo-toggle {width:30px;height:30px;right:10px;bottom:10px;opacity:.75;} .demo-panel {bottom:50px;} .toast {bottom:22px;}
@keyframes float {0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes sail {0%,100%{transform:translate(0,0) rotate(-2deg);}50%{transform:translate(6px,-4px) rotate(2deg);}}
@keyframes water {to{background-position:80px 62px;}} @keyframes routeFlow {to{stroke-dashoffset:-100;}}
@keyframes taskArrival {from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes voicePulse {50%{box-shadow:0 0 0 7px var(--lagoon-soft);}}
.audio-btn.is-speaking {animation:voicePulse .8s ease-in-out infinite;}
@media(min-width:1280px) {
 .app-shell {grid-template-columns:188px minmax(0,1fr) 244px;} .nav-collapsed {grid-template-columns:76px minmax(0,1fr) 244px;}
 .info-col {display:block;grid-column:3;grid-row:2;padding:26px 18px 0 0;min-width:0;}
 .info-col .panel {padding:16px;} .info-col .map-goals {grid-template-columns:1fr;} .info-col .goal-label {font-size:.7rem;}
 .voizy-tip {grid-template-columns:50px minmax(0,1fr);} .voizy-tip img {width:50px;}
 .goal-toggle {display:none;}
}
@media(min-width:1600px) { .island {width:270px;} .island-shape {height:210px;} .island-name {font-size:1rem;} .island-name small {font-size:.7rem;} }
@media(max-width:1050px) { .topbar-location {display:none;} .topbar {grid-template-columns:minmax(0,1fr) auto;} .app-shell {grid-template-columns:166px minmax(0,1fr);} .side-logo img {width:114px;} .nav-collapsed {grid-template-columns:76px minmax(0,1fr);} }
@media(max-width:760px) {
 .login-screen {display:flex;align-items:center;justify-content:center;padding:24px 18px;min-height:100dvh;} .login-panel {width:min(370px,100%);margin-left:auto;}
 .login-art .claim {display:none;} .login-art .mascot {left:0;bottom:1%;height:32%;max-width:30%;opacity:.8;}
 .login-ship {left:6%;top:12%;width:25%;} .login-card {padding:22px;} .login-brand img {height:80px;width:150px;}
 .app-shell {grid-template-columns:minmax(0,1fr);grid-template-rows:72px minmax(0,1fr);padding-bottom:calc(var(--tabbar-h) + var(--safe-b));}
 .side-nav {display:none;} .topbar {grid-column:1;padding:10px 12px;gap:8px;top:0;} .main-area {grid-column:1;padding:20px 16px;}
 .topbar-account {gap:8px;} .avatar {width:34px;height:34px;} .xp-bar {width:70px;} .kid-level {font-size:.58rem;}
 .stat-chip {padding:8px 6px;font-size:.75rem;gap:4px;} .stat-chip small {display:none;} .stat-chip .ic {width:16px;height:16px;}
 .tabbar {position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:6px 4px calc(6px + var(--safe-b));background:var(--glass-strong);backdrop-filter:blur(22px);border-top:1px solid var(--glass-line);height:calc(var(--tabbar-h) + var(--safe-b));}
 .tabbar .tab-btn {flex-direction:column;justify-content:center;gap:4px;padding:4px 0;font-size:.59rem;min-height:0;} .tabbar .nav-icon {width:24px;} .tabbar .nav-label {max-width:100%;}
 .app-shell[data-view="map"] {height:100dvh;min-height:620px;} .world-scene {grid-template-rows:110px minmax(0,1fr) 56px;}
 .journey-head {padding:16px 18px 0;gap:10px;} .journey-head h1 {font-size:1.2rem;} .journey-head p {font-size:.7rem;} .journey-head .btn {padding:9px;font-size:.7rem;}
 .island {width:155px;} .island-shape {height:118px;} .island-name {font-size:.69rem;} .island-name small {font-size:.5rem;} .island-label {grid-template-columns:23px minmax(0,1fr);padding:5px 7px;gap:5px;border-radius:10px;}
 .island-guardian {width:23px;height:23px;} .map-ship-wrap {width:64px;left:58%;top:68%;} .map-lighthouse {width:35px;top:9%;right:8%;} .sea-compass .ic {width:40px;height:40px;}
 .island:first-of-type {--x:25%!important;} .island:nth-of-type(2) {--x:73%!important;} .island:nth-of-type(3) {--x:30%!important;}
 .world-controls {gap:10px;} .world-controls .icon-btn {width:34px;height:34px;} .demo-toggle {bottom:calc(var(--tabbar-h) + 8px);} .demo-panel {bottom:calc(var(--tabbar-h) + 46px);} .toast {bottom:calc(var(--tabbar-h) + 18px);}
 .player-companion {display:none;} .player-body {padding:14px 16px;} .glass-panel {padding:20px 18px;} .player-round {font-size:.58rem;}
 .player-foot {padding:8px 16px calc(18px + var(--safe-b));} .stage h2 {font-size:1.6rem;} .stage-img,.intro-voizy {width:110px;height:115px;}
 .q-title {font-size:1.3rem;} .speech {font-size:1.1rem;} .pairs-col .choice {font-size:.85rem;min-height:54px;padding:10px 5px;}
 .feedback-inner {grid-template-columns:42px minmax(0,1fr);gap:8px;} .feedback-inner .btn {grid-column:1/-1;min-height:42px;} .feedback h3 {font-size:1rem;} .feedback-inner img {width:42px;height:45px;}
 .shop-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .shop-card {padding:12px;gap:8px;} .shop-visual img {height:120px;}
 .segmented button {flex-direction:column;gap:4px;font-size:.7rem;padding:8px 2px;} .shop-showcase {grid-template-columns:70px minmax(0,1fr) 76px;gap:10px;padding:0 0 16px;}
 .shop-showcase>img {width:70px;height:80px;} .shop-showcase .showcase-ship {width:76px;} .shop-showcase h2 {font-size:1.1rem;}
 .chest {grid-template-columns:90px minmax(0,1fr);gap:12px;padding:18px;} .chest-img {width:90px;} .chest .btn {grid-column:1/-1;width:100%;}
 .reward-row {grid-template-columns:48px minmax(0,1fr);gap:10px;} .reward-row>.btn {grid-column:2;justify-self:start;min-height:34px;}
 .reward-ic.has-art {width:48px;height:48px;} .reward-ic.has-art img {width:48px;height:48px;} .reward-row strong {font-size:.85rem;}
 .panel {padding:18px;} .profile-head {grid-template-columns:105px minmax(0,1fr);gap:18px;} .profile-head img {width:105px;height:120px;}
 .podium-place img {width:80px;height:90px;} .podium-place:nth-child(2) img {width:100px;height:110px;}
 .rank-row {grid-template-columns:20px 34px minmax(0,1fr) auto;gap:8px;font-size:.85rem;} .rank-row img {width:34px;height:34px;}
}
@media(max-height:700px) and (min-width:761px) {
 .login-card {padding:20px 24px;} .login-brand img {height:80px;margin-bottom:8px;} .login-card>p {margin-bottom:14px;} .login-screen {padding-top:18px;padding-bottom:18px;}
 .glass-panel {padding:18px 24px;} .player-body {padding-top:12px;padding-bottom:12px;} .stage-img,.intro-voizy {width:110px;height:110px;} .stage h2 {margin-top:10px;font-size:1.7rem;}
 .stage-facts {margin-top:14px;} .choice {min-height:48px;padding:10px;} .prompt-card {margin-bottom:12px;} .player-foot {padding-bottom:16px;}
 .island-shape {height:132px;} .island {width:186px;} .side-companion img {width:64px;height:68px;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
/* ===== Freie Weltkarte (ziehen zum Segeln) ===== */
.world-scene {grid-template-rows:auto minmax(0,1fr)!important;}
.journey-actions {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.sea-map {overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;}
.sea-map.is-dragging {cursor:grabbing;} .sea-map.is-dragging .island {pointer-events:none;}
.world-track {position:absolute;top:0;bottom:0;left:0;will-change:transform;}
.world-track.is-gliding {transition:transform 1.1s var(--ease);}
.world-track .island {transform:translate(-50%,-50%);}
.island-world {display:inline-block;margin-bottom:-6px;padding:3px 10px;border-radius:99px;background:var(--saffron);box-shadow:0 2px 0 var(--saffron-deep);font-size:.62rem;font-weight:800;position:relative;z-index:2;}
.island.is-locked .island-world {background:var(--glass-strong);box-shadow:none;}
.island.is-current .island-ground {filter:drop-shadow(0 0 18px rgba(255,236,150,.85)) var(--art-shadow);}
.route-line.is-done {stroke:var(--saffron);} .route-glow.is-done {stroke:rgba(255,214,90,.7);}
.far-layer {position:absolute;inset:0;pointer-events:none;will-change:transform;}
.far-boat {position:absolute;width:56px;opacity:.75;filter:blur(.3px);animation:sail 9s ease-in-out infinite;} .far-boat.is-a {left:40%;top:8%;} .far-boat.is-b {left:110%;top:82%;width:64px;animation-delay:-3s;}
.far-light {position:absolute;left:75%;top:4%;width:46px;opacity:.85;}
.map-ship-wrap {animation:none!important;transition:left 1.1s var(--ease),top 1.1s var(--ease);width:110px;}
.ship-bob {animation:sail 6s ease-in-out infinite;position:relative;} .map-ship-wrap.is-left .map-ship {transform:scaleX(-1);}
.map-ship-wrap.is-sailing .ship-bob {animation:shipRock .5s ease-in-out infinite alternate;}
.ship-wake {position:absolute;left:10%;right:10%;bottom:-6px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent);opacity:.5;}
.map-ship-wrap.is-sailing .ship-wake {opacity:1;transform:scaleX(1.5);transition:.3s;}
@keyframes shipRock {from {transform:rotate(-4deg) translateY(0);} to {transform:rotate(4deg) translateY(-4px);}}
.map-coin {position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;border:2px solid var(--glass-line);background:radial-gradient(circle at 35% 30%,var(--saffron-soft),var(--saffron) 60%,var(--saffron-deep));display:grid;place-items:center;z-index:4;box-shadow:0 0 18px rgba(255,220,90,.8);animation:coinBob 2.2s ease-in-out infinite;}
.map-coin .ic {width:22px;height:22px;color:var(--saffron-deep);} .map-coin.is-collected {animation:coinGrab .6s forwards;}
@keyframes coinBob {50% {transform:translate(-50%,-62%) rotateY(180deg);}} @keyframes coinGrab {to {transform:translate(-50%,-260%) scale(1.4);opacity:0;}}
.sea-compass {position:absolute;bottom:8%;right:auto!important;}
.map-hud {position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;z-index:8;padding:6px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow);}
.map-hud .hud-left .ic {transform:rotate(180deg);}
.hud-ship {display:inline-flex;gap:6px;align-items:center;border:0;border-radius:99px;padding:9px 16px;font-weight:800;font-size:.8rem;background:var(--saffron);box-shadow:0 3px 0 var(--saffron-deep);}
.drag-hint {position:absolute;left:50%;bottom:76px;transform:translateX(-50%);z-index:7;padding:8px 14px;border-radius:99px;background:var(--overlay);color:var(--paper);font-size:.78rem;font-weight:700;display:flex;gap:6px;align-items:center;pointer-events:none;animation:hintNudge 2s ease-in-out infinite;transition:opacity .4s;}
.drag-hint.is-gone {opacity:0;} @keyframes hintNudge {50% {transform:translateX(calc(-50% + 14px));}}
.world-goals {bottom:76px;}
/* ===== Menü & Kopfleiste ===== */
.side-nav {background:linear-gradient(180deg,rgba(246,253,252,.82),rgba(226,246,244,.68));box-shadow:8px 0 30px rgba(17,58,61,.12);}
.tab-btn {position:relative;font-size:.86rem;}
.tab-btn .nav-icon {width:34px;height:34px;border-radius:11px;background:var(--glass-strong);box-shadow:inset 0 -2px 0 var(--line);transition:transform .25s var(--ease);}
#side-tabs .tab-btn:nth-child(1) .nav-icon {color:var(--lagoon-deep);} #side-tabs .tab-btn:nth-child(2) .nav-icon {color:var(--coral-deep);} #side-tabs .tab-btn:nth-child(3) .nav-icon {color:var(--tile);} #side-tabs .tab-btn:nth-child(4) .nav-icon {color:var(--saffron-deep);} #side-tabs .tab-btn:nth-child(5) .nav-icon {color:var(--coral-deep);} #side-tabs .tab-btn:nth-child(6) .nav-icon {color:var(--leaf-deep);}
.tab-btn:hover .nav-icon {transform:translateY(-2px) rotate(-6deg);}
.tab-btn.is-active {background:linear-gradient(90deg,var(--paper),var(--glass-strong));color:var(--ink);}
.tab-btn.is-active::before {content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:5px;border-radius:0 6px 6px 0;background:var(--saffron);}
.tab-btn.is-active .nav-icon {background:linear-gradient(180deg,var(--saffron-soft),var(--saffron));color:var(--ink);box-shadow:0 3px 0 var(--saffron-deep);}
.topbar {background:linear-gradient(180deg,rgba(246,253,252,.85),rgba(232,248,246,.7));box-shadow:0 8px 30px rgba(17,58,61,.1);}
.topbar-account {padding:5px 14px 5px 5px;border-radius:99px;background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);}
.topbar .avatar {width:44px;height:44px;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--leaf);border:0;}
.stat-chip {border-radius:99px;padding:6px 14px 6px 6px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06),var(--glass-shadow);}
.stat-chip>.ic {width:30px;height:30px;padding:6px;border-radius:50%;background:var(--paper);}
.stat-chip.is-coin>.ic {animation:coinSpin 4s ease-in-out infinite;} @keyframes coinSpin {85% {transform:none;} 100% {transform:rotateY(360deg);}}
/* ===== Belohnungen ===== */
.next-reward {display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;} .next-reward .bar {margin:8px 0 4px;}
.chip-row {display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none;} .chip-row::-webkit-scrollbar {display:none;}
.cat-chip {flex:none;display:inline-flex;gap:6px;align-items:center;border:1px solid var(--glass-line);background:var(--paper);border-radius:99px;padding:8px 14px;font-weight:800;font-size:.8rem;}
.cat-chip.is-active {background:var(--saffron);box-shadow:0 3px 0 var(--saffron-deep);}
.reward-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;}
.reward-card {display:grid;gap:6px;justify-items:center;text-align:center;padding:14px 12px;border-radius:18px;background:var(--paper);border:1px solid var(--line);transition:transform .2s;}
.reward-card:hover {transform:translateY(-3px);} .reward-card.is-ready {border-color:var(--leaf);box-shadow:0 0 0 3px var(--leaf-soft);}
.reward-card strong {font-size:.86rem;min-height:2.4em;display:grid;place-items:center;} .reward-card .bar {width:100%;height:7px;}
.reward-symbol {width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg,var(--coral-soft),var(--saffron-soft));color:var(--coral-deep);box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);} .reward-symbol .ic {width:30px;height:30px;}
.wish-art-wrap img,.wish-art-wrap .reward-symbol {width:34px;height:34px;object-fit:contain;border-radius:10px;} .wish-art-wrap .reward-symbol .ic {width:18px;height:18px;}
/* ===== Münzsprung ===== */
.game-intro {display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:center;padding:30px;}
.game-intro-art {position:relative;height:240px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(180deg,var(--lagoon-soft),var(--saffron-soft));}
.game-intro-art img {width:170px;animation:gameHop 1.2s ease-in-out infinite;} @keyframes gameHop {50% {transform:translateY(-26px) rotate(-6deg);}}
.game-coin {position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--saffron);color:var(--saffron-deep);box-shadow:0 3px 0 var(--saffron-deep);animation:coinBob 2s ease-in-out infinite;} .game-coin.c1 {left:14%;top:16%;} .game-coin.c2 {right:12%;top:26%;animation-delay:-.6s;} .game-coin.c3 {right:24%;bottom:12%;animation-delay:-1.2s;}
.game-intro p {margin:8px 0 14px;max-width:52ch;}
.game-rules {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} .game-rules span {display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border-radius:99px;background:var(--paper);font-size:.78rem;font-weight:700;}
.game-meta {display:flex;gap:8px;margin-bottom:18px;}
.game-layer {position:fixed;inset:0;z-index:100;background:var(--ink);}
#game-canvas {width:100%;height:100%;display:block;touch-action:none;}
.game-hud {position:absolute;top:calc(12px + var(--safe-t));left:12px;right:12px;display:flex;gap:10px;align-items:center;}
.hud-pill {display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:99px;background:var(--glass-strong);font-weight:800;box-shadow:var(--glass-shadow);}
.hud-pill .ic.is-full {fill:var(--coral);color:var(--coral-deep);} .hud-pill .ic.is-off {opacity:.3;}
.game-hint {position:absolute;left:50%;top:40%;transform:translateX(-50%);padding:12px 20px;border-radius:99px;background:var(--overlay);color:var(--paper);font-weight:800;pointer-events:none;transition:opacity .4s;} .game-hint.is-gone {opacity:0;}
.game-word {position:absolute;left:50%;top:18%;transform:translateX(-50%);padding:12px 22px;border-radius:18px;background:var(--glass-strong);font-size:1.2rem;box-shadow:var(--glass-shadow);pointer-events:none;animation:pop .3s var(--ease);} .game-word b {color:var(--lagoon-deep);}
.game-end {position:absolute;inset:0;display:grid;place-items:center;background:var(--overlay);padding:20px;}
.game-end-card {width:min(380px,100%);text-align:center;padding:24px;border-radius:24px;background:var(--glass-strong);backdrop-filter:blur(20px);box-shadow:var(--shadow-3);display:grid;gap:8px;justify-items:center;}
.game-end-card img {width:120px;} .game-end-card h2 {font-size:2rem;} .game-end-actions {display:flex;gap:10px;margin-top:8px;}
@keyframes pop {from {transform:translateX(-50%) scale(.6);opacity:0;}}
@media(max-width:760px) {
 .tabbar {grid-template-columns:repeat(7,minmax(0,1fr))!important;} .tabbar .tab-btn {font-size:.54rem!important;}
 .journey-actions .btn-saffron {display:none;} .stat-chip>.ic {width:24px;height:24px;padding:4px;} .stat-chip {padding:4px 10px 4px 4px;} .tabbar .tab-btn .nav-icon {width:28px;height:28px;} .tab-btn.is-active::before {display:none;} .map-hud .hud-ship {font-size:.72rem;padding:8px 12px;}
 .game-intro {grid-template-columns:1fr;padding:20px;} .game-intro-art {height:180px;} .game-intro-art img {width:120px;}
 .reward-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;}}
.hud-pill .ic.is-full, .hud-pill .ic.is-full * {fill:var(--coral);}
.hud-ship,.drag-hint {white-space:nowrap;}
@media(max-width:760px) { .drag-hint {font-size:.7rem;} .map-hud {gap:6px;} }

/* ===================== Abenteuer-Update: Rahmen, Weltkarte, Spielhafen ===================== */
:root { --wood:#9a5a2c; --wood-deep:#5e3416; --wood-soft:#f4d9b0; --rope:#d8b47a; --frame:linear-gradient(180deg,#fff7e8 0%,#fbe9c9 100%); }
.app-shell,.app-shell.nav-collapsed {grid-template-columns:212px minmax(0,1fr)!important;} .app-shell.nav-collapsed {grid-template-columns:84px minmax(0,1fr)!important;}
.info-col {display:none!important;}
/* Menü links: Holzrahmen mit Seilkante */
.side-nav {background:var(--frame);border-right:0;box-shadow:inset -6px 0 0 var(--wood),inset -9px 0 0 var(--rope),8px 0 30px rgba(40,20,5,.25);padding:0 14px 14px 10px;}
.side-brand {border-bottom:2px dashed var(--rope);margin-bottom:14px;}
.side-section {color:var(--wood);font-weight:900;letter-spacing:.08em;font-size:.62rem;margin:0 0 8px 8px;}
#side-tabs {display:grid;gap:6px;}
.side-nav .tab-btn {display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:6px 10px;border:2px solid transparent;border-radius:16px;background:transparent;font:800 .95rem var(--font-display);color:var(--wood-deep);text-align:left;transition:transform .2s var(--ease),background .2s;position:relative;}
.side-nav .tab-btn:hover {background:rgba(255,255,255,.65);transform:translateX(3px);}
.side-nav .tab-btn.is-active {background:linear-gradient(180deg,#fff,#fff3d6);border-color:var(--rope);box-shadow:0 4px 0 var(--rope),0 8px 18px rgba(94,52,22,.18);}
.side-nav .tab-btn.is-active::before {content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:6px;border-radius:0 6px 6px 0;background:var(--saffron);}
.nav-icon {width:42px;height:42px;flex:none;display:grid;place-items:center;background:none!important;box-shadow:none!important;border:0!important;}
.nav-icon img {width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(60,30,5,.3));transition:transform .25s var(--ease);}
.tab-btn:hover .nav-icon img,.tab-btn.is-active .nav-icon img {transform:scale(1.12) rotate(-4deg);}
.nav-badge {margin-left:auto;min-width:22px;height:22px;border-radius:99px;background:var(--coral);color:var(--paper);font:900 .75rem/22px var(--font-body);text-align:center;animation:pulse 1.6s infinite;}
.side-companion {margin-top:auto;background:rgba(255,255,255,.7);border:2px solid var(--rope);border-radius:18px;padding:10px;display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:center;font-size:.75rem;color:var(--wood-deep);}
.side-companion img {width:52px;} .side-companion strong {display:block;font:800 .85rem var(--font-display);} 
.side-parent {color:var(--wood);font-weight:800;}
/* Kopfleiste: Kapitänsleiste */
.topbar {background:var(--frame)!important;border-bottom:0!important;box-shadow:inset 0 -5px 0 var(--wood),inset 0 -8px 0 var(--rope),0 8px 24px rgba(40,20,5,.2)!important;grid-template-columns:minmax(0,1fr) auto!important;padding:10px 22px 14px!important;}
.topbar-location {display:flex;align-items:center;gap:12px;} .topbar-location img {width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(60,30,5,.3));}
.topbar-location .eyebrow {color:var(--wood);letter-spacing:.06em;} .topbar-location strong {color:var(--wood-deep);font-size:1.35rem;}
.captain-bar {display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;background:rgba(255,255,255,.75);border:2px solid var(--rope);border-radius:99px;box-shadow:0 3px 0 var(--rope);}
.cb-avatar {position:relative;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,var(--lagoon-soft));border:3px solid var(--saffron);overflow:visible;}
.cb-avatar img {width:100%;height:100%;object-fit:cover;object-position:top;border-radius:50%;}
.cb-level {position:absolute;right:-6px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--coral);color:var(--paper);font:900 .7rem/22px var(--font-body);text-align:center;border:2px solid var(--paper);}
.cb-meta {min-width:118px;} .cb-meta .kid-name {font:800 .95rem var(--font-display);color:var(--wood-deep);} .cb-meta .kid-level {font-size:.66rem;font-weight:800;color:var(--wood);}
.star-bar {position:relative;height:16px;border-radius:99px;background:var(--wood-soft);overflow:hidden;margin-top:3px;box-shadow:inset 0 2px 3px rgba(94,52,22,.25);}
.star-bar span {position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#ffe27a,var(--saffron));border-radius:99px;}
.star-bar b {position:relative;display:flex;align-items:center;justify-content:center;gap:3px;font-size:.6rem;font-weight:900;color:var(--wood-deep);line-height:16px;} .star-bar .ic {width:10px;height:10px;fill:var(--wood-deep);}
.star-bar.is-big {height:24px;max-width:340px;} .star-bar.is-big b {line-height:24px;font-size:.75rem;}
.cb-sep {width:2px;height:34px;background:var(--rope);border-radius:2px;}
.cb-stat {position:relative;display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:99px;background:var(--paper);border:0;font-weight:800;color:var(--ink);overflow:hidden;}
.cb-stat b {display:block;font:900 .95rem var(--font-display);line-height:1;} .cb-stat small {display:block;font-size:.58rem;color:var(--ink-3);font-weight:800;}
.cb-stat .ic {width:26px;height:26px;} .cb-stat.is-fire .ic {color:var(--coral);fill:var(--saffron);} .cb-stat.is-coin .ic {color:var(--saffron-deep);fill:var(--saffron);}
.cb-stat.is-time img {width:30px;height:30px;object-fit:contain;position:relative;z-index:1;} .cb-stat.is-time > span {position:relative;z-index:1;}
.cb-time-fill {position:absolute;left:0;bottom:0;height:4px;width:var(--p);background:var(--leaf);}
.cb-stat.is-full {background:linear-gradient(180deg,#fff2b8,var(--saffron));animation:pulse 1.8s infinite;}
/* Weltkarte */
.app-shell[data-view="map"] .main-area {padding:0!important;max-width:none!important;height:100%;overflow:hidden;}
.world-scene {display:block!important;height:100%;position:relative;}
.journey-head {position:absolute!important;inset:14px 18px auto 18px;z-index:12;display:flex!important;justify-content:space-between;align-items:center;gap:12px;padding:0!important;pointer-events:none;text-shadow:none!important;color:var(--ink)!important;}
.journey-head > * {pointer-events:auto;}
.jh-card {display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;background:var(--glass-strong);backdrop-filter:blur(14px);border:2px solid var(--glass-line);border-radius:22px;box-shadow:var(--glass-shadow);}
.jh-guardian {width:54px;height:54px;object-fit:cover;object-position:top;border-radius:50%;background:var(--saffron-soft);border:3px solid var(--saffron);}
.jh-card .eyebrow {color:var(--ink-3)!important;} .jh-card h1 {font-size:1.25rem!important;color:var(--ink);} .jh-card p {margin:2px 0 0;font-size:.8rem;color:var(--ink-2);}
.journey-actions .btn {min-height:56px;font-size:1.05rem;padding:12px 26px;animation:pulse 2.4s infinite;}
.sea-map {position:absolute!important;inset:0;overflow:hidden;touch-action:none;cursor:grab;background-color:#1fb7c4;background-repeat:repeat;background-position:var(--px,0) var(--py,0);background-size:420px;}
.sea-map::before {content:"";position:absolute;inset:-50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.14),transparent 40%),radial-gradient(circle at 70% 70%,rgba(255,255,255,.1),transparent 40%);animation:caustic 14s ease-in-out infinite alternate;pointer-events:none;}
.sea-map::after {content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(4,60,80,.45);}
.sea-map.is-dragging {cursor:grabbing;}
.world-track {position:absolute;left:0;top:0;will-change:transform;}
.world-track.is-gliding {transition:transform .9s var(--ease);}
.sea-route {position:absolute;inset:0;overflow:visible;pointer-events:none;}
.route-glow {fill:none;stroke:rgba(255,255,255,.25);stroke-width:16;stroke-linecap:round;}
.route-line {fill:none;stroke:rgba(255,255,255,.75);stroke-width:5;stroke-dasharray:2 14;stroke-linecap:round;}
.route-line.is-done {stroke:var(--saffron);} .route-glow.is-done {stroke:rgba(255,214,90,.35);}
.route-line.is-next {stroke:#fff;animation:dash 1.2s linear infinite;} .route-glow.is-next {stroke:rgba(255,255,255,.45);}
.island {width:calc(240px * var(--k,1))!important;cursor:pointer;}
.island-water {position:absolute;left:50%;top:calc(150px * var(--k,1));width:90%;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(4,70,90,.35),transparent 70%);}
.island-water::before,.island-water::after {content:"";position:absolute;inset:-6px -14px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ripple 3.2s ease-out infinite;animation-delay:var(--delay);}
.island-water::after {animation-delay:calc(var(--delay) + 1.6s);}
.island-shape {height:calc(190px * var(--k,1))!important;position:relative;z-index:1;}
.island-ground {animation:bob 4.5s ease-in-out infinite!important;animation-delay:var(--delay)!important;filter:drop-shadow(0 10px 8px rgba(4,60,80,.35))!important;}
.island:hover .island-ground {transform:scale(1.06);filter:drop-shadow(0 0 18px rgba(255,255,255,.8))!important;}
.island.is-locked .island-ground {filter:saturate(.35) brightness(.9) drop-shadow(0 10px 8px rgba(4,60,80,.35))!important;}
.island-label {display:inline-flex!important;align-items:center;gap:8px;margin-top:-6px;padding:5px 12px 5px 5px!important;border-radius:99px!important;background:var(--glass-strong);border:2px solid var(--glass-line);box-shadow:0 4px 12px rgba(4,60,80,.3);position:relative;z-index:2;}
.island-num {width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--lagoon-deep);color:var(--paper);font:900 .75rem var(--font-body);}
.is-done .island-num {background:var(--leaf-deep);} .is-current .island-num {background:var(--coral);}
.island-name {text-align:left;font-size:calc(.85rem * max(var(--k,1),.85))!important;}
.island-badge {position:static!important;width:auto!important;height:24px!important;padding:0 7px;border-radius:99px!important;display:inline-flex!important;gap:2px;align-items:center;font:900 .7rem var(--font-body);}
.island.is-current .island-label {background:linear-gradient(180deg,#fff,#fff1c4);border-color:var(--saffron);}
.island.is-current::after {content:"";position:absolute;left:50%;top:-10px;width:0;height:0;border:12px solid transparent;border-top-color:var(--coral);transform:translateX(-50%);animation:arrow-bounce 1s ease-in-out infinite;}
.island > .island-guardian {position:absolute;right:0;top:calc(40px * var(--k,1));width:calc(70px * var(--k,1))!important;height:auto!important;border-radius:0!important;background:none!important;object-fit:contain;z-index:2;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));animation:hop 2.6s ease-in-out infinite;}
.region-sign {position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;padding:8px 18px;border-radius:14px;background:linear-gradient(180deg,#c98a4e,var(--wood));border:3px solid var(--wood-deep);color:#fff6e3;box-shadow:0 6px 0 var(--wood-deep),0 14px 22px rgba(4,60,80,.4);transform:rotate(-2deg);}
.region-sign::after {content:"";position:absolute;left:50%;top:100%;width:8px;height:40px;margin-left:-4px;background:var(--wood-deep);border-radius:0 0 4px 4px;}
.region-sign span {font-size:.65rem;font-weight:900;letter-spacing:.1em;color:var(--tint);} .region-sign b {font:800 1.1rem var(--font-display);}
.region-fog {position:absolute;top:0;bottom:0;z-index:6;background:linear-gradient(90deg,rgba(235,245,250,0),rgba(235,245,250,.88) 18%,rgba(235,245,250,.94));backdrop-filter:blur(3px);display:grid;place-items:center;pointer-events:none;}
.region-fog:not(.is-near) {background:rgba(235,245,250,.94);}
.region-fog span {display:inline-flex;gap:8px;align-items:center;padding:10px 18px;border-radius:99px;background:var(--paper);font-weight:800;color:var(--ink-2);box-shadow:var(--glass-shadow);max-width:80%;text-align:center;}
.sea-prop {position:absolute;z-index:2;pointer-events:none;}
.sea-prop img {width:110px;filter:drop-shadow(0 8px 6px rgba(4,60,80,.35));animation:rock 5s ease-in-out infinite;transform-origin:50% 90%;}
.sea-prop.is-light img {width:84px;animation:none;}
.sea-prop::after {content:"";position:absolute;left:50%;bottom:-4px;width:120%;height:20px;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ripple 3s ease-out infinite;}
.sea-prop.is-boat {animation:drift 26s linear infinite alternate;} .sea-prop.is-b {animation-duration:34s;animation-direction:alternate-reverse;}
.sea-dolphin {position:absolute;width:70px;z-index:2;pointer-events:none;opacity:0;animation:dolphin 9s ease-in-out infinite;} .sea-dolphin.is-late {animation-delay:4.5s;}
.gull {position:absolute;z-index:7;width:26px;height:10px;pointer-events:none;animation:gull 18s linear infinite;animation-delay:calc(var(--i) * -6s);}
.gull::before,.gull::after {content:"";position:absolute;top:0;width:14px;height:8px;border-top:3px solid #fff;border-radius:50% 50% 0 0;animation:flap .5s ease-in-out infinite alternate;}
.gull::before {left:0;transform-origin:right bottom;} .gull::after {right:0;transform-origin:left bottom;animation-direction:alternate-reverse;}
.map-coin {position:absolute;z-index:5;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:0;padding:0;background:radial-gradient(circle at 35% 30%,#fff6b8,var(--saffron) 55%,#d9921a);box-shadow:0 0 0 3px rgba(255,255,255,.6),0 6px 12px rgba(4,60,80,.35);display:grid;place-items:center;color:var(--saffron-deep);animation:bob 2s ease-in-out infinite;}
.map-coin.is-collected {animation:coin-up .6s forwards;}
.bottle {position:absolute;z-index:8;width:78px;border:0;padding:0;background:none;animation:rock 3s ease-in-out infinite;}
.bottle::before {content:"";position:absolute;left:-14px;right:-14px;top:42%;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ripple 2.4s ease-out infinite;}
.bottle::after {content:"!";position:absolute;right:-6px;top:-10px;width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;font:900 .9rem/24px var(--font-body);animation:pulse 1.4s infinite;}
.map-ship-wrap {position:absolute;z-index:9;width:calc(150px * var(--k,1));transition:left 1.1s var(--ease),top 1.1s var(--ease);pointer-events:none;}
.map-ship-wrap .map-ship {width:100%;}
.ship-ripple {position:absolute;left:-10%;right:-10%;bottom:4%;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.5),transparent 70%);}
.ship-bob {animation:rock 3.2s ease-in-out infinite;transform-origin:50% 85%;}
.map-avatar {position:absolute;left:38%;top:12%;width:38%!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));}
.map-ship-wrap.is-left .ship-bob {transform:scaleX(-1);}
.map-compass {position:absolute;right:16px;bottom:16px;z-index:12;width:62px;height:62px;border-radius:50%;border:4px solid var(--rope);background:var(--frame);color:var(--wood-deep);display:grid;place-items:center;box-shadow:0 5px 0 var(--wood),0 10px 20px rgba(0,0,0,.25);}
.map-compass .ic {width:32px;height:32px;animation:spin-slow 12s linear infinite;}
.mini-map {position:absolute;left:16px;bottom:16px;z-index:12;display:flex;height:20px;width:min(240px,40vw);border-radius:99px;overflow:hidden;border:3px solid var(--rope);background:var(--frame);box-shadow:0 4px 0 var(--wood);}
.mini-map i {flex:1;background:rgba(150,170,180,.5);border-right:1px solid rgba(255,255,255,.6);} .mini-map i.is-open {background:var(--tint);}
.mini-map b {position:absolute;top:0;bottom:0;border:2px solid var(--ink);border-radius:99px;background:rgba(255,255,255,.3);}
.drag-hint {position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:12;padding:10px 18px;border-radius:99px;background:var(--glass-strong);font-weight:800;display:flex;gap:8px;align-items:center;transition:opacity .4s;}
.drag-hint.is-gone {opacity:0;pointer-events:none;}
.map-hud,.far-layer,.world-goals {display:none!important;}
/* Markt, Wünsche, Spielhafen, Crew */
.shop-card.is-locked {opacity:.7;} .shop-card.is-locked .shop-visual img {filter:grayscale(.8) brightness(1.1);}
.shop-card.is-owned:not(.is-active) .shop-visual::after {content:"";position:absolute;}
.shop-visual {position:relative;} .shop-visual img {max-height:120px;object-fit:contain;margin:auto;}
.owned-count {display:block;font-weight:800;color:var(--lagoon-deep);margin-top:4px;}
.shop-showcase p {margin:4px 0 0;font-size:.85rem;color:var(--ink-2);max-width:420px;}
.reward-card.is-soon {opacity:.75;} .reward-card.is-soon img {filter:grayscale(.7);}
.family-goal {display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center;} .family-goal img {width:80px;}
.harbor-banner {display:grid;grid-template-columns:100px 1fr auto;gap:18px;align-items:center;padding:18px;border-radius:24px;background:var(--glass-strong);border:2px solid var(--glass-line);box-shadow:var(--glass-shadow);margin-bottom:18px;}
.harbor-banner img {width:100px;} .harbor-banner h2 {font-size:1.3rem;} .harbor-banner p {margin:4px 0 0;color:var(--ink-2);}
.harbor-banner.is-ready {background:linear-gradient(180deg,#fff,#fff1c4);border-color:var(--saffron);}
.harbor-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.harbor-card {padding:16px;border-radius:22px;background:var(--glass-strong);border:2px solid var(--glass-line);box-shadow:var(--glass-shadow);display:grid;gap:10px;text-align:center;}
.harbor-card img {width:110px;height:110px;object-fit:contain;margin:0 auto;filter:grayscale(.5);} .harbor-card.is-ready img {filter:none;animation:hop 2s infinite;}
.harbor-card small {color:var(--ink-3);} .harbor-card.is-off {opacity:.55;} .harbor-card.is-ready {border-color:var(--saffron);}
.harbor-state {display:inline-flex;gap:6px;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:var(--ink-2);}
.game-unlock {display:flex;gap:12px;align-items:center;margin-top:16px;padding:10px 16px;border-radius:18px;background:linear-gradient(180deg,#fff,#fff1c4);border:2px solid var(--saffron);animation:pop-in .5s var(--ease);}
.game-unlock img {width:64px;}
.surprise-banner {display:flex;gap:12px;align-items:center;margin-bottom:12px;padding:8px 14px 8px 8px;border-radius:18px;background:linear-gradient(90deg,#fff1c4,#fff);border:2px solid var(--saffron);animation:pop-in .5s var(--ease);}
.surprise-banner img {width:54px;height:54px;object-fit:contain;} .surprise-banner b {display:block;font:800 1.05rem var(--font-display);} .surprise-banner small {color:var(--ink-2);}
.surprise-banner.is-duel {background:linear-gradient(90deg,var(--coral-soft),#fff);border-color:var(--coral);}
.crew-row {display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;}
.crew-item {flex:none;width:96px;display:grid;gap:4px;justify-items:center;padding:8px;border-radius:16px;border:2px solid transparent;background:var(--paper);font-size:.72rem;font-weight:800;text-align:center;}
.crew-item img {width:70px;height:70px;object-fit:contain;} .crew-item.is-active {border-color:var(--saffron);background:#fff8e0;} .crew-item.is-more {color:var(--lagoon-deep);}
/* Minispiele */
.mg-layer {position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:auto auto 1fr;background:linear-gradient(180deg,#5fc6e0,#ffd29a 70%,#ff9e7a);overflow:hidden;}
.mg-hud {display:flex;gap:10px;align-items:center;padding:12px 16px;}
.mg-title {display:flex;gap:8px;align-items:center;font:800 1.1rem var(--font-display);color:var(--ink);margin-right:auto;padding:4px 14px 4px 4px;border-radius:99px;background:var(--glass-strong);} .mg-title img {width:36px;height:36px;object-fit:contain;}
.hud-pill {display:inline-flex;gap:6px;align-items:center;padding:6px 14px;border-radius:99px;background:var(--glass-strong);font-weight:900;}
.mg-task {justify-self:center;display:flex;gap:12px;align-items:center;padding:10px 20px;border-radius:99px;background:var(--paper);box-shadow:var(--glass-shadow);font-size:1.05rem;font-weight:700;margin:0 12px;max-width:calc(100% - 24px);}
.mg-task b {font-family:var(--font-display);color:var(--coral-deep);}
.mg-stage {position:relative;overflow:hidden;}
.mg-hint {position:absolute;left:50%;top:20px;transform:translateX(-50%);padding:8px 16px;border-radius:99px;background:var(--glass-strong);font-weight:800;transition:opacity .4s;} .mg-hint.is-gone {opacity:0;}
.mg-flycoin {position:fixed;z-index:90;width:34px;height:34px;margin:-17px;color:var(--saffron-deep);animation:coin-up .9s forwards;pointer-events:none;} .mg-flycoin .ic {width:34px;height:34px;fill:var(--saffron);}
.is-good {animation:pop-good .5s var(--ease) forwards!important;} .is-bad {animation:shake .4s!important;}
.ms-sea {position:absolute;left:0;right:0;bottom:22%;height:16%;background:#1aa8b8;} .ms-ground {position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(#ffe2a6,#e9b86e);}
.ms-hero {position:absolute;left:12%;bottom:22%;width:min(120px,22vw);z-index:3;transition:none;}
#ms-objs {position:absolute;inset:0;}
.ms-gate {position:absolute;left:12%;padding:16px 24px;min-width:120px;text-align:center;border-radius:20px;background:var(--paper);border:5px solid var(--lagoon);font:800 1.4rem var(--font-display);box-shadow:0 8px 18px rgba(0,0,0,.2);}
.ms-gate.is-high {bottom:62%;} .ms-gate.is-low {bottom:24%;}
.ms-coin {position:absolute;left:calc(12% + 160px + var(--i) * 46px);bottom:48%;width:30px;height:30px;color:var(--saffron-deep);} .ms-coin .ic {width:30px;height:30px;fill:var(--saffron);}
.ff-water {position:absolute;inset:0;background:linear-gradient(180deg,#58d0e0,#0a7f98);}
.ff-fish {position:absolute;left:-200px;top:calc(8% + var(--lane) * 22%);display:flex;align-items:center;gap:10px;padding:10px 22px 10px 50px;border:0;border-radius:50px 30px 30px 50px;background:linear-gradient(180deg,#ffb36b,#ff7a3d);box-shadow:0 8px 16px rgba(0,0,0,.25);font:800 1.25rem var(--font-display);color:var(--ink);animation:swim var(--d) linear infinite;animation-delay:var(--delay);}
.ff-fish.is-rtl {animation-name:swim-rtl;background:linear-gradient(180deg,#8be0ff,#3aa8e8);}
.ff-body {position:absolute;left:10px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:inset -6px 0 0 #173746;}
#bl-box {position:absolute;inset:0;}
.bl-ballon {position:absolute;left:var(--x);bottom:-180px;width:min(150px,22vw);aspect-ratio:.85;border:0;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),var(--c) 45%);display:grid;place-items:center;align-content:center;gap:4px;color:var(--ink);font:800 1rem var(--font-display);box-shadow:inset -10px -14px 0 rgba(0,0,0,.12);animation:rise var(--d) linear infinite;animation-delay:var(--delay);}
.bl-ballon::after {content:"";position:absolute;top:100%;left:50%;width:2px;height:60px;background:rgba(0,0,0,.35);}
.bl-ballon b {background:rgba(255,255,255,.85);padding:2px 8px;border-radius:8px;}
.kn-ship {position:absolute;right:6%;top:6%;width:min(260px,40vw);animation:rock 3s ease-in-out infinite;}
.kn-word {position:absolute;left:50%;top:10%;transform:translateX(-50%);display:flex;gap:8px;}
.kn-word i {width:46px;height:56px;border-radius:12px;background:var(--glass-strong);border:3px dashed var(--lagoon-deep);display:grid;place-items:center;font:800 1.6rem var(--font-display);font-style:normal;}
#kn-letters {position:absolute;left:0;right:0;top:36%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 20px;}
.kn-letter {width:64px;height:64px;border-radius:50%;border:4px solid var(--paper);background:radial-gradient(circle at 35% 30%,#fff,var(--saffron));font:900 1.6rem var(--font-display);box-shadow:0 6px 0 var(--saffron-deep);animation:bob 2s ease-in-out infinite;animation-delay:calc(var(--k) * .2s);}
.kn-letter.is-shot {animation:shot .4s forwards;}
.kn-cannon {position:absolute;left:4%;bottom:4%;width:min(180px,30vw);}
.mm-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:640px;margin:10px auto;padding:0 16px;}
.mm-card {aspect-ratio:.8;border:0;padding:0;background:none;perspective:600px;position:relative;}
.mm-card > span {position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;align-content:center;gap:4px;backface-visibility:hidden;transition:transform .45s var(--ease);box-shadow:0 6px 14px rgba(0,0,0,.2);}
.mm-back {background:linear-gradient(180deg,#2ab3c4,#0b7f91);border:3px solid #fff;} .mm-back img {width:70%;}
.mm-front {background:var(--paper);transform:rotateY(180deg);font:800 1.15rem var(--font-display);}
.mm-card.is-open .mm-back {transform:rotateY(180deg);} .mm-card.is-open .mm-front {transform:rotateY(360deg);}
.mm-card.is-match .mm-front {background:var(--leaf-soft);box-shadow:0 0 0 4px var(--leaf);}
@keyframes bob {0%,100% {transform:translateY(0);} 50% {transform:translateY(-5px);}}
@keyframes rock {0%,100% {transform:rotate(-2.5deg) translateY(0);} 50% {transform:rotate(2.5deg) translateY(-3px);}}
@keyframes ripple {0% {transform:scale(.8);opacity:.8;} 100% {transform:scale(1.35);opacity:0;}}
@keyframes caustic {to {transform:translate(6%,4%) rotate(8deg);}}
@keyframes dash {to {stroke-dashoffset:-32;}}
@keyframes drift {to {transform:translateX(320px);}}
@keyframes dolphin {0%,60%,100% {opacity:0;transform:translate(0,30px) rotate(-30deg);} 70% {opacity:1;transform:translate(40px,-40px) rotate(0deg);} 82% {opacity:1;transform:translate(90px,0) rotate(40deg);} 88% {opacity:0;transform:translate(110px,30px) rotate(60deg);}}
@keyframes gull {from {transform:translateX(-200px);} to {transform:translateX(2400px);}}
@keyframes flap {from {transform:rotate(-18deg);} to {transform:rotate(18deg);}}
@keyframes arrow-bounce {0%,100% {transform:translate(-50%,0);} 50% {transform:translate(-50%,8px);}}
@keyframes hop {0%,100% {transform:translateY(0);} 40% {transform:translateY(-10px);} 60% {transform:translateY(0);}}
@keyframes spin-slow {to {transform:rotate(360deg);}}
@keyframes pulse {0%,100% {box-shadow:0 0 0 0 rgba(255,202,67,.6);} 50% {box-shadow:0 0 0 10px rgba(255,202,67,0);}}
@keyframes coin-up {to {transform:translateY(-80px) scale(1.4);opacity:0;}}
@keyframes pop-in {from {transform:scale(.8);opacity:0;} to {transform:none;opacity:1;}}
@keyframes pop-good {50% {transform:scale(1.15);} 100% {transform:scale(1.05);box-shadow:0 0 0 6px var(--leaf);}}
@keyframes shake {25% {transform:translateX(-8px);} 75% {transform:translateX(8px);}}
@keyframes swim {from {left:-260px;} to {left:110%;}}
@keyframes swim-rtl {from {left:110%;transform:scaleX(1);} to {left:-260px;}}
@keyframes rise {from {bottom:-200px;} to {bottom:110%;}}
@keyframes shot {to {transform:translate(30vw,-40vh) scale(.3);opacity:0;}}
@media (max-width:900px) {
  .app-shell,.app-shell.nav-collapsed {grid-template-columns:1fr!important;}
  .topbar {grid-template-columns:1fr!important;padding:8px 12px 12px!important;} .topbar-location {display:none;}
  .captain-bar {justify-content:space-between;} .cb-meta {min-width:0;flex:1;} .cb-stat small {display:none;} .cb-sep {display:none;}
  .jh-card {padding:6px 12px 6px 6px;} .jh-guardian {width:42px;height:42px;} .jh-card h1 {font-size:1rem!important;} .jh-card p {font-size:.72rem;}
  .journey-head {flex-direction:column;align-items:stretch;} .journey-actions .btn {width:100%;min-height:48px;}
  .harbor-banner {grid-template-columns:70px 1fr;} .harbor-banner img {width:70px;} .harbor-banner .btn {grid-column:1/-1;}
  .mm-grid {grid-template-columns:repeat(3,1fr);} .mini-map {display:none;}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;}}

/* ===================== Pixar-Weltkarte & Spielrahmen (Referenz Bild 4) ===================== */
/* Menü: helle Creme-Leiste, jeder Punkt als eigene glänzende Karte */
.side-nav {background:linear-gradient(180deg,#fffaf0,#fdf0d8)!important;box-shadow:4px 0 0 #f1d9ad,10px 0 30px rgba(94,52,22,.18)!important;padding:0 14px 14px!important;}
.side-brand {border-bottom:2px solid #f1dcb6!important;padding:14px 4px 12px!important;}
.side-brand .side-logo img {height:62px!important;width:auto;filter:drop-shadow(0 4px 4px rgba(94,52,22,.25));}
.side-section {color:var(--wood)!important;font-size:.7rem!important;margin:4px 0 10px 8px!important;}
#side-tabs {gap:9px!important;}
.side-nav .tab-btn {min-height:52px!important;padding:5px 12px 5px 8px!important;background:linear-gradient(180deg,#fff,#fff6e6)!important;border:2px solid #f6e4c4!important;border-radius:18px!important;box-shadow:0 3px 0 #efd8b0,0 6px 14px rgba(94,52,22,.08);font:800 1.02rem var(--font-display)!important;color:#3d2410!important;}
.side-nav .tab-btn:hover {transform:translateX(4px) scale(1.02)!important;box-shadow:0 4px 0 #e9cc98,0 10px 18px rgba(94,52,22,.14);}
.side-nav .tab-btn.is-active {background:linear-gradient(180deg,#fff3c4,#ffd76a)!important;border-color:#f3b83a!important;box-shadow:0 4px 0 #d8962a,0 0 0 4px rgba(255,210,80,.35),0 10px 22px rgba(216,150,42,.35)!important;}
.side-nav .tab-btn.is-active::before {left:-16px!important;background:#f3a51e!important;top:10px!important;bottom:10px!important;}
.side-nav .nav-icon,.side-nav .nav-icon img {width:46px!important;height:46px!important;}
.side-nav .tab-btn.is-active .nav-icon img {animation:navBounce 1.6s var(--ease) infinite;}
@keyframes navBounce {0%,100% {transform:scale(1.12) rotate(-4deg);} 50% {transform:scale(1.2) rotate(4deg) translateY(-2px);}}
.side-companion {background:linear-gradient(180deg,#fff,#fff7e4)!important;border:2px solid #f3c45a!important;box-shadow:0 4px 0 #e9b448,0 10px 20px rgba(216,150,42,.2);grid-template-columns:64px 1fr!important;border-radius:20px!important;}
.side-companion img {width:64px!important;animation:hop 2.4s ease-in-out infinite;}
.side-companion strong {font-size:.98rem!important;color:#3d2410;}
.side-parent {display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:16px;background:#fff;border:2px solid #f1dcb6;box-shadow:0 3px 0 #efd8b0;margin-top:10px;}

/* Kopfleiste schwebt auf der Karte */
.app-shell[data-view="map"] .topbar {grid-row:1!important;z-index:30;background:transparent!important;box-shadow:none!important;pointer-events:none;padding:16px 22px 0!important;align-items:start;}
.app-shell[data-view="map"] .topbar > * {pointer-events:auto;}
.app-shell[data-view="map"] .main-area {grid-row:1/3!important;}
.app-shell[data-view="map"] .topbar-location {padding:8px 30px 8px 12px;border-radius:24px;background:linear-gradient(180deg,#fffdf6,#fff1d6);border:2px solid #fff;box-shadow:0 5px 0 #e8cf9f,0 14px 30px rgba(60,30,5,.25);}
.app-shell[data-view="map"] .topbar-location img {width:64px;height:64px;}
.app-shell[data-view="map"] .topbar-location strong {font-size:1.9rem!important;color:#173746!important;line-height:1;}
.app-shell[data-view="map"] .captain-bar {background:linear-gradient(180deg,#fffdf6,#fff1d6);border:2px solid #fff;box-shadow:0 5px 0 #e8cf9f,0 14px 30px rgba(60,30,5,.25);padding:8px 10px 8px 8px;}
.app-shell[data-view="map"] .cb-avatar {width:58px;height:58px;}
.cb-stat.is-time.is-full {background:linear-gradient(180deg,#ffe58a,#f5a623)!important;box-shadow:0 3px 0 #c97d0e;}
.app-shell[data-view="map"] .journey-head {top:118px!important;}
.jh-card {background:linear-gradient(180deg,#fffdf6,#fff1d6)!important;border:3px solid #ffd76a!important;box-shadow:0 5px 0 #e8b94a,0 14px 30px rgba(60,30,5,.25)!important;padding:10px 22px 10px 10px!important;}
.jh-guardian {width:66px!important;height:66px!important;}
.jh-card h1 {font-size:1.6rem!important;}
.journey-actions .btn {min-height:66px!important;font-size:1.35rem!important;padding:12px 34px!important;border-radius:22px!important;background:linear-gradient(180deg,#7ee35a,#2fae2a)!important;box-shadow:0 6px 0 #1d7e1b,0 0 0 4px rgba(255,255,255,.6),0 16px 30px rgba(20,90,20,.35)!important;color:#fff!important;text-shadow:0 2px 0 rgba(0,60,0,.35)!important;}
.journey-actions .btn .ic {width:28px;height:28px;}

/* Meer, Horizont, Wolken, Deko */
.sea-map {background-color:#2cc6d6!important;background-repeat:repeat!important;background-size:520px!important;}
.sea-map::after {box-shadow:inset 0 0 90px rgba(4,80,100,.3)!important;z-index:5;}
.world-horizon {position:absolute;left:0;top:0;right:0;background:url(../img/horizont.webp) repeat-x left top;background-size:auto 100%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);pointer-events:none;}
.world-body {position:absolute;left:0;}
.sea-cloud {position:absolute;width:calc(260px * var(--s));height:calc(90px * var(--s));border-radius:99px;background:radial-gradient(circle at 30% 40%,#fff 40%,transparent 41%),radial-gradient(circle at 60% 35%,#fff 45%,transparent 46%),radial-gradient(ellipse at 50% 75%,#fff 55%,transparent 56%);opacity:.85;filter:drop-shadow(0 8px 10px rgba(255,160,120,.3));animation:cloudDrift 40s linear infinite alternate;pointer-events:none;}
@keyframes cloudDrift {to {transform:translateX(160px);}}
.deko {position:absolute;bottom:-12px;z-index:6;pointer-events:none;width:min(300px,28vw);filter:drop-shadow(0 -6px 18px rgba(0,40,40,.25));transform-origin:bottom center;animation:sway 6s ease-in-out infinite;}
.deko.is-left {left:-30px;} .deko.is-right {right:-40px;transform:scaleX(-1);animation-name:swayR;width:min(330px,30vw);}
@keyframes sway {0%,100% {transform:rotate(-1.5deg);} 50% {transform:rotate(1.5deg);}}
@keyframes swayR {0%,100% {transform:scaleX(-1) rotate(-1.5deg);} 50% {transform:scaleX(-1) rotate(1.5deg);}}
.map-compass {z-index:8!important;} .mini-map,.drag-hint {z-index:8!important;}
.region-sign {z-index:3;}
/* Aktuelle Insel: Glanz, Funkeln und hüpfender Pfeil */
.island.is-current .island-shape::before {content:"";position:absolute;inset:-10% -6%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,170,.75),transparent 62%);animation:glow 2.4s ease-in-out infinite;z-index:-1;}
@keyframes glow {50% {opacity:.45;transform:scale(1.08);}}
.island-arrow {position:absolute;left:50%;top:calc(-28px * var(--k,1));width:30px;height:24px;background:linear-gradient(180deg,#ff6a5a,#e2332a);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));animation:arrow-bounce 1s ease-in-out infinite;z-index:4;}
.island-sparkles i {position:absolute;width:16px;height:16px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);left:calc(10% + var(--n) * 26%);top:calc(10% + (var(--n) * 37%) - (var(--n) * var(--n) * 9%));animation:twinkle 1.8s ease-in-out infinite;animation-delay:calc(var(--n) * .45s);z-index:4;filter:drop-shadow(0 0 6px #fff7b0);}
@keyframes twinkle {0%,100% {transform:scale(0) rotate(0);opacity:0;} 50% {transform:scale(1.2) rotate(90deg);opacity:1;}}
.island-label {background:linear-gradient(180deg,#fff,#f2fbfb)!important;border:2px solid #fff!important;box-shadow:0 4px 0 rgba(4,80,100,.25),0 10px 18px rgba(4,60,80,.28)!important;}
.is-current .island-label {background:linear-gradient(180deg,#fffdf2,#ffefc4)!important;border-color:#ffc94a!important;box-shadow:0 4px 0 #e2a22c,0 0 0 4px rgba(255,210,80,.35),0 12px 22px rgba(60,30,5,.3)!important;transform:scale(1.08);}
@media (max-width:760px) {
  .app-shell[data-view="map"] .topbar {padding:8px 10px 0!important;}
  .app-shell[data-view="map"] .topbar-location {display:none;}
  .app-shell[data-view="map"] .journey-head {top:84px!important;}
  .jh-card h1 {font-size:1.1rem!important;} .jh-guardian {width:46px!important;height:46px!important;}
  .journey-actions .btn {min-height:52px!important;font-size:1rem!important;padding:10px 18px!important;}
  .deko {width:150px;} .deko.is-right {width:160px;}
}

/* ===================== Minispiele mit Wow-Effekt ===================== */
.mg-layer {grid-template-rows:auto auto 1fr!important;background:#4cc3dc!important;}
.mg-bg {position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}
.mg-layer > *:not(.mg-bg) {position:relative;z-index:1;}
.mg-layer > .mg-buddy {position:absolute;z-index:6;}
.mg-muenzsprung .mg-bg {background-image:url(../img/spiel-strand.webp);display:none;}
.mg-fischfang .mg-bg {background-image:url(../img/spiel-unterwasser.webp);animation:bgFloat 16s ease-in-out infinite alternate;}
.mg-ballon .mg-bg {background-image:url(../img/spiel-himmel.webp);animation:bgFloat 20s ease-in-out infinite alternate;}
.mg-kanone .mg-bg {background-image:url(../img/spiel-piratenmeer.webp);}
.mg-memory .mg-bg {background-image:linear-gradient(rgba(10,40,60,.35),rgba(10,40,60,.5)),url(../img/szene-schatz.webp);}
@keyframes bgFloat {to {transform:scale(1.06) translate(-1%,1%);}}
.mg-hud {padding:14px 18px!important;}
.mg-quit {background:#fff!important;box-shadow:0 4px 0 rgba(0,0,0,.18);}
.mg-title {background:linear-gradient(180deg,#fffdf6,#fff1d6)!important;border:2px solid #fff;box-shadow:0 4px 0 #e8cf9f,0 10px 20px rgba(0,0,0,.18);font-size:1.25rem!important;padding:4px 18px 4px 4px!important;} .mg-title img {width:46px!important;height:46px!important;}
.mg-layer .hud-pill {background:linear-gradient(180deg,#fffdf6,#fff1d6);border:2px solid #fff;box-shadow:0 4px 0 #e8cf9f;font-size:1.1rem;padding:8px 16px;}
.hud-pill.is-coin .ic {fill:var(--saffron);color:var(--saffron-deep);width:24px;height:24px;}
.mg-combo {display:none;align-items:center;gap:4px;padding:6px 14px;border-radius:99px;background:linear-gradient(180deg,#ffb24a,#ff5a3a);color:#fff;font:900 1.15rem var(--font-display);box-shadow:0 4px 0 #b8381f;}
.mg-combo.is-on {display:inline-flex;animation:pop-in .35s var(--ease);} .mg-combo .ic {width:22px;height:22px;fill:#ffe27a;}
.mg-task {background:linear-gradient(180deg,#fff,#fff8ea)!important;border:3px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.12),0 16px 30px rgba(0,0,0,.18)!important;font-size:1.2rem!important;padding:10px 24px 10px 10px!important;animation:pop-in .4s var(--ease);}
.mg-task b {font-size:1.35rem;}
/* Voizy als Spielbegleiter */
.mg-buddy {right:18px;bottom:10px;display:flex;align-items:flex-end;gap:6px;pointer-events:none;}
.mg-buddy img {width:min(130px,20vw);filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));}
.mg-bubble {opacity:0;transform:scale(.6);transform-origin:bottom right;margin-bottom:90px;padding:10px 16px;border-radius:20px 20px 4px 20px;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.1),0 12px 24px rgba(0,0,0,.2);text-align:center;transition:.25s var(--ease);}
.mg-bubble b {display:block;font:900 1.4rem var(--font-display);color:var(--leaf-deep);} .mg-bubble small {display:block;font-weight:800;color:var(--ink-2);} .mg-bubble em {font-style:normal;color:var(--coral-deep);font-weight:900;}
.mg-buddy.is-talking .mg-bubble {opacity:1;transform:none;animation:bubbleOut 1.6s 1s forwards;}
.mg-buddy.is-talking img {animation:gameHop .6s var(--ease) 2;}
@keyframes bubbleOut {to {opacity:0;transform:scale(.8);}}
/* Countdown */
.mg-count {position:absolute!important;inset:0;z-index:20!important;display:grid;place-items:center;background:rgba(10,40,60,.25);pointer-events:none;}
.mg-count b {font:900 clamp(5rem,16vw,10rem) var(--font-display);color:#fff;-webkit-text-stroke:6px #f3a51e;paint-order:stroke fill;text-shadow:0 10px 0 #c97d0e,0 20px 40px rgba(0,0,0,.35);animation:countPop .6s var(--ease);}
.mg-count b.is-go {color:#7ee35a;-webkit-text-stroke-color:#1d7e1b;text-shadow:0 10px 0 #1d7e1b,0 20px 40px rgba(0,0,0,.35);}
@keyframes countPop {from {transform:scale(2.2);opacity:0;} 60% {transform:scale(.9);opacity:1;} to {transform:scale(1);}}
/* Effekte */
.mg-spark {position:fixed;z-index:95;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--c);pointer-events:none;animation:spark .75s cubic-bezier(.2,.8,.3,1) forwards;}
.mg-spark.is-star {width:18px;height:18px;margin:-9px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
@keyframes spark {to {transform:translate(var(--dx),var(--dy)) scale(.2) rotate(200deg);opacity:0;}}
.mg-flycoin {animation:coinFly 1s cubic-bezier(.3,.7,.4,1) forwards!important;}
@keyframes coinFly {0% {transform:scale(.5);} 30% {transform:translateY(-60px) scale(1.4) rotateY(180deg);} 100% {transform:translate(calc(100vw - 260px - var(--x0,0px)),-120vh) scale(.6) rotateY(540deg);opacity:.2;}}
.mg-layer.is-shaking .mg-stage {animation:screenShake .4s;}
@keyframes screenShake {20% {transform:translate(-8px,3px);} 40% {transform:translate(7px,-3px);} 60% {transform:translate(-5px,2px);} 80% {transform:translate(3px,0);}}
/* Münzsprung */
.ms-world {position:absolute;inset:0;background:url(../img/spiel-strand.webp) repeat-x;background-size:auto 100%;}
.ms-sea,.ms-ground {display:none!important;}
.ms-runner {position:absolute;left:12%;bottom:15%;width:min(130px,22vw);z-index:4;}
.ms-runner img {width:100%;display:block;animation:run .32s ease-in-out infinite alternate;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25));}
.ms-runner.is-jumping img {animation:spinJump .6s ease-out;}
@keyframes run {from {transform:translateY(0) rotate(-3deg);} to {transform:translateY(-8px) rotate(3deg);}}
@keyframes spinJump {50% {transform:rotate(-20deg) scale(1.08);}}
.ms-gate {background:none!important;border:0!important;box-shadow:none!important;padding:0!important;width:min(210px,30vw);min-width:0!important;left:12%;}
.ms-gate img {width:100%;display:block;filter:drop-shadow(0 10px 8px rgba(0,0,0,.25));}
.ms-gate span {position:absolute;left:18%;right:18%;top:12%;height:18%;display:grid;place-items:center;font:900 clamp(1rem,2.2vw,1.5rem) var(--font-display);color:#fff;text-shadow:0 2px 0 #5e3416,0 0 6px rgba(0,0,0,.4);}
.ms-gate.is-low {bottom:13%!important;} .ms-gate.is-high {bottom:47%!important;}
.ms-platform {position:absolute;left:-8%;right:-8%;bottom:-26px;height:32px;border-radius:16px;background:linear-gradient(180deg,#7ed957 0 35%,#9a5a2c 36%,#6b3b1a);box-shadow:0 8px 12px rgba(0,0,0,.25);}
.ms-gate.is-good img {filter:drop-shadow(0 0 22px #fff59a) brightness(1.15);}
.ms-coin {bottom:28%!important;left:calc(12% + 50px + var(--i) * 48px)!important;width:40px!important;height:40px!important;animation:coinSpin 1s linear infinite;}
.ms-coin.is-up {bottom:62%!important;}
.ms-coin .ic {width:40px!important;height:40px!important;filter:drop-shadow(0 3px 0 #b77a00);}
.ms-coin.is-taken {animation:coinGrab .5s forwards;}
@keyframes coinSpin {50% {transform:rotateY(180deg);}} @keyframes coinGrab {to {transform:translateY(-90px) scale(1.6);opacity:0;}}
/* Fischfang */
.ff-water {display:none;}
.ff-bubbles i {position:absolute;left:var(--x);bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;border:2px solid rgba(255,255,255,.8);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.1) 40%);animation:bubbleUp var(--d) linear infinite;animation-delay:var(--delay);}
@keyframes bubbleUp {to {transform:translate(20px,-110vh);}}
.ff-fish {padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;display:block!important;width:min(190px,26vw);top:calc(4% + var(--lane) * 21%)!important;}
.ff-fish img {width:100%;display:block;filter:hue-rotate(var(--hue)) drop-shadow(0 10px 8px rgba(0,30,60,.35));animation:wiggle .5s ease-in-out infinite alternate;}
.ff-fish.is-rtl img {transform:scaleX(-1);animation-name:wiggleR;}
@keyframes wiggle {to {transform:rotate(6deg) translateY(-4px);}} @keyframes wiggleR {from {transform:scaleX(-1);} to {transform:scaleX(-1) rotate(6deg) translateY(-4px);}}
.ff-fish b {position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;padding:6px 16px;border-radius:99px;background:#fff;color:var(--ink);font:900 1.2rem var(--font-display);box-shadow:0 4px 0 rgba(0,40,80,.2),0 8px 16px rgba(0,40,80,.25);}
.ff-fish:hover b {background:#fff8d6;}
.ff-fish.is-caught {animation-play-state:paused!important;} .ff-fish.is-caught img {animation:caught .9s var(--ease) forwards;}
.ff-fish.is-caught b {background:var(--leaf);color:#fff;}
.ff-fish.is-hint b {box-shadow:0 0 0 4px var(--leaf),0 8px 16px rgba(0,40,80,.25);}
@keyframes caught {40% {transform:translateY(-40px) scale(1.3) rotate(-20deg);} 100% {transform:translateY(-140vh) scale(.6) rotate(360deg);}}
/* Ballon */
.bl-ballon {background:none!important;box-shadow:none!important;width:min(160px,21vw)!important;}
.bl-skin {position:absolute;inset:0;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.35) 14%,var(--c) 42%,color-mix(in oklab,var(--c) 70%,#000) 100%);box-shadow:inset -10px -16px 20px rgba(0,0,0,.18),0 14px 20px rgba(0,0,0,.18);display:grid;place-items:center;align-content:center;gap:4px;}
.bl-skin::after {content:"";position:absolute;bottom:-10px;left:50%;width:18px;height:14px;margin-left:-9px;background:color-mix(in oklab,var(--c) 75%,#000);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);}
.bl-string {position:absolute;top:calc(100% + 4px);left:50%;width:2px;height:70px;background:rgba(255,255,255,.85);transform-origin:top;animation:sway 1.4s ease-in-out infinite;}
.bl-ballon::after {display:none;}
.bl-ballon.is-popped {animation-play-state:paused!important;} .bl-ballon.is-popped .bl-skin {animation:popBoom .35s forwards;} .bl-ballon.is-popped .bl-string {animation:fall 1s forwards;}
@keyframes popBoom {50% {transform:scale(1.35);} to {transform:scale(1.6);opacity:0;}}
.bl-ballon.is-hint .bl-skin {box-shadow:0 0 0 5px #fff,0 0 30px #fff59a;}
/* Kanone */
.kn-ship {display:none;}
.kn-word {top:6%!important;padding:12px 16px;border-radius:22px;background:rgba(255,255,255,.35);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.7);}
.kn-word i {background:#fff!important;border:3px dashed #9a5a2c!important;color:var(--ink);transition:.2s;}
.kn-word i.is-filled {border-style:solid!important;border-color:var(--saffron)!important;background:linear-gradient(180deg,#fff,#fff4c4)!important;animation:pop-in .3s var(--ease);}
.kn-word.is-done i {background:var(--leaf)!important;color:#fff;border-color:#fff!important;animation:hop .5s var(--ease);}
#kn-letters {top:auto!important;bottom:26%;}
.kn-letter {width:72px!important;height:72px!important;border:0!important;background:radial-gradient(circle at 35% 30%,#7b8794,#2b3440 60%,#11161c)!important;color:#fff!important;box-shadow:0 6px 0 #0b0f14,0 10px 16px rgba(0,0,0,.35)!important;text-shadow:0 2px 0 #000;animation:waveBob 2.2s ease-in-out infinite!important;animation-delay:calc(var(--k) * .25s)!important;}
.kn-letter:hover {background:radial-gradient(circle at 35% 30%,#ffe27a,#f5a623 60%,#b8700a)!important;}
@keyframes waveBob {0%,100% {transform:translateY(0) rotate(-4deg);} 50% {transform:translateY(-12px) rotate(4deg);}}
.kn-letter.is-shot {animation:none!important;visibility:hidden;}
.kn-ball {position:fixed;z-index:95;width:56px;height:56px;margin:-28px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffe27a,#f5a623 60%,#b8700a);color:#3d2410;font:900 1.5rem var(--font-display);font-style:normal;animation:ballFly .38s cubic-bezier(.3,.6,.5,1) forwards;pointer-events:none;}
@keyframes ballFly {to {transform:translate(var(--dx),var(--dy)) scale(.8) rotate(360deg);}}
.kn-cannon {width:min(200px,28vw)!important;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35));transform-origin:30% 80%;}
.kn-cannon.is-fire {animation:recoil .35s var(--ease);}
@keyframes recoil {30% {transform:translateX(-14px) rotate(-6deg) scale(1.05);}}
/* Memory */
.mm-grid {max-width:720px!important;gap:14px!important;}
.mm-card {animation:dealIn .5s var(--ease) both;animation-delay:calc(var(--i) * .05s);}
@keyframes dealIn {from {transform:translateY(-60px) rotate(-12deg) scale(.6);opacity:0;}}
.mm-back {background:linear-gradient(180deg,#ffd76a,#f3a51e)!important;border:4px solid #fff!important;box-shadow:0 6px 0 #c97d0e,0 12px 20px rgba(0,0,0,.3)!important;}
.mm-front {border:4px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.15),0 12px 20px rgba(0,0,0,.3)!important;}
.mm-card:hover:not(.is-open) .mm-back {transform:translateY(-4px) rotate(-2deg);}
.mm-card.is-match .mm-front {animation:hop .5s var(--ease);}
/* Endbildschirm */
.game-end-card {position:relative;overflow:hidden;}
.ge-rays {position:absolute;inset:-50%;background:repeating-conic-gradient(rgba(255,215,90,.25) 0 12deg,transparent 12deg 24deg);animation:spin-slow 18s linear infinite;z-index:0;}
.game-end-card > *:not(.ge-rays) {position:relative;z-index:1;}
.ge-stars {display:flex;justify-content:center;gap:8px;margin:-6px 0 6px;}
.ge-stars span .ic {width:52px;height:52px;fill:#e6dccb;color:#c9b99a;}
.ge-stars span.is-on .ic {fill:#ffd23f;color:#c97d0e;filter:drop-shadow(0 3px 0 #c97d0e);}
.ge-stars span {animation:starIn .5s var(--ease) both;animation-delay:calc(var(--i) * .25s + .2s);} .ge-stars span:nth-child(2) {transform:translateY(-10px);}
@media (prefers-reduced-motion: reduce) { .deko,.sea-cloud,.mg-bg,.ms-runner img,.ff-fish img,.kn-letter,.ge-rays,.island-sparkles i {animation:none!important;} }
/* Spielfläche füllt den ganzen Bildschirm, Leisten schweben darüber */
.mg-layer > .mg-stage {position:absolute!important;inset:0;z-index:1;}
.mg-layer > .mg-hud,.mg-layer > .mg-task {z-index:3;}
.mg-layer {grid-template-rows:auto auto 1fr!important;align-content:start;}
.ff-fish {top:calc(20% + var(--lane) * 18%)!important;}
.kn-word {top:20%!important;}
.mm-grid {margin-top:150px!important;}
.mg-hint {top:auto!important;bottom:40%;}
.mm-grid {max-width:min(600px,calc((100vh - 190px) * 1.0))!important;}

/* ===================== Feinschliff: Abstände, kein Seiten-Scrollen ===================== */
html,body {overflow-x:hidden;}
.app-shell[data-view="map"] {height:100dvh!important;min-height:0!important;overflow:hidden;}
body:has(.app-shell[data-view="map"]:not(.is-hidden)) {overflow:hidden;}
.side-nav {height:100dvh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}
.side-nav::-webkit-scrollbar {display:none;}
#side-tabs {display:grid;gap:clamp(4px,.8vh,8px);}
.side-nav .tab-btn {min-height:clamp(40px,6.4vh,54px)!important;padding:4px 10px!important;font-size:clamp(.84rem,1.6vh,.95rem)!important;}
.side-nav .nav-icon,.side-nav .nav-icon img {width:clamp(30px,4.6vh,42px)!important;height:clamp(30px,4.6vh,42px)!important;}
.side-section {margin:clamp(6px,1.2vh,14px) 0 clamp(4px,.8vh,10px)!important;}
.side-companion {margin-top:auto;padding:8px!important;}
.side-parent {padding:10px 0 2px!important;}
@media (max-height:760px) {.side-companion {display:none!important;} .side-parent {margin-top:auto;}}
/* Kopfleiste über der Karte kompakter */
.app-shell[data-view="map"] .topbar {padding:10px 16px!important;gap:12px!important;}
.topbar-location {padding:6px 16px 6px 8px!important;}
.topbar-location img {width:clamp(34px,5vh,46px)!important;height:clamp(34px,5vh,46px)!important;}
.topbar-location strong {font-size:clamp(1.05rem,2.6vh,1.5rem)!important;margin-top:0!important;}
.captain-bar {gap:6px!important;}
.cb-avatar img {width:clamp(38px,5.4vh,52px)!important;height:clamp(38px,5.4vh,52px)!important;}
.journey-head {top:clamp(8px,1.4vh,16px)!important;}
.jh-card {padding:6px 16px 6px 6px!important;}
.jh-card h1 {font-size:clamp(1.1rem,2.6vh,1.5rem)!important;}
.jh-guardian {width:clamp(44px,7vh,64px)!important;height:clamp(44px,7vh,64px)!important;}
.journey-actions .btn {min-height:clamp(44px,6.4vh,58px)!important;font-size:clamp(.95rem,2vh,1.15rem)!important;padding:8px 22px!important;}
/* Deko: kleiner, keine Klicks abfangen, nie über den Rand */
.deko {pointer-events:none;bottom:-6px!important;width:clamp(120px,15vw,240px)!important;max-height:38vh;object-fit:contain;object-position:bottom;}
.deko.is-right {width:clamp(130px,16vw,260px)!important;}
.mini-map {left:clamp(130px,16vw,250px)!important;}
.drag-hint {bottom:16px!important;}
.island-label {white-space:nowrap;}
.map-coin {z-index:3;}

/* ===================== Insel-Abenteuer (begehbare Insel) ===================== */
.isle-scene {position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background-color:#3bb7c9;background-position:center;background-size:cover;background-repeat:no-repeat;animation:isleIn .45s var(--ease);overflow:hidden;}
.isle-scene::before {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,40,60,.35),transparent 30%,transparent 70%,rgba(10,40,60,.35));pointer-events:none;}
@keyframes isleIn {from {opacity:0;transform:scale(1.04);}}
.isle-top {position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:14px 20px;}
.isle-back {width:46px;height:46px;border-radius:50%;background:var(--paper);box-shadow:0 4px 0 rgba(0,0,0,.15);}
.isle-title {display:flex;align-items:center;gap:10px;padding:6px 20px 6px 6px;border-radius:99px;background:var(--glass-strong);backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);}
.isle-title img {width:52px;height:52px;object-fit:contain;}
.isle-title strong {display:block;font:800 1.35rem var(--font-display);color:var(--ink);}
.isle-words {margin-left:auto;min-width:150px;padding:8px 16px;border-radius:18px;background:var(--glass-strong);backdrop-filter:blur(12px);box-shadow:var(--glass-shadow);}
.isle-words b {font:800 1.1rem var(--font-display);color:var(--ink);} .isle-words small {margin-left:4px;font-weight:700;color:var(--text-2);} .isle-words .bar {margin-top:4px;}
.isle-stage {position:relative;z-index:1;margin:0 auto;width:min(100%,calc((100dvh - 160px) * 1.5),1100px);aspect-ratio:3/2;align-self:center;}
.isle-ground {position:absolute;inset:4% 6%;width:88%;height:92%;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,40,60,.35));animation:isleBob 6s ease-in-out infinite;}
@keyframes isleBob {50% {transform:translateY(-6px);}}
.isle-path {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.isle-path path {fill:none;stroke:#fff8dc;stroke-width:.9;stroke-dasharray:.1 2.4;stroke-linecap:round;vector-effect:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));animation:pathMove 1.4s linear infinite;}
@keyframes pathMove {to {stroke-dashoffset:-2.5;}}
.isle-station {position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;background:none;padding:0;display:grid;justify-items:center;gap:6px;cursor:pointer;z-index:3;animation:pop-in .5s var(--ease) both;animation-delay:calc(var(--i) * .08s + .2s);}
.st-medal {width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#ffeec4);border:3px solid #fff;box-shadow:0 5px 0 #d9a93a,0 10px 18px rgba(0,0,0,.25);color:var(--wood-deep);transition:transform .2s var(--ease);}
.st-medal .ic {width:28px;height:28px;}
.isle-station:hover:not(:disabled) .st-medal {transform:translateY(-4px) scale(1.06);}
.isle-station.is-done .st-medal {background:linear-gradient(180deg,#8ee66b,#3fae3a);color:#fff;box-shadow:0 5px 0 #23802a,0 10px 18px rgba(0,0,0,.25);}
.isle-station.is-next .st-medal {background:linear-gradient(180deg,#ffe27a,#ffb320);box-shadow:0 5px 0 #c27b0b,0 0 0 8px rgba(255,226,122,.45),0 10px 18px rgba(0,0,0,.25);animation:nextPulse 1.6s ease-in-out infinite;}
@keyframes nextPulse {50% {box-shadow:0 5px 0 #c27b0b,0 0 0 16px rgba(255,226,122,0),0 10px 18px rgba(0,0,0,.25);}}
.isle-station.is-locked {cursor:not-allowed;} .isle-station.is-locked .st-medal {background:linear-gradient(180deg,#e4e8ec,#b9c2ca);color:#5e6a75;box-shadow:0 5px 0 #8894a0;}
.st-card {padding:5px 12px;border-radius:12px;background:var(--glass-strong);backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(0,0,0,.18);text-align:center;white-space:nowrap;}
.st-card b {display:block;font:800 .92rem var(--font-display);color:var(--ink);} .st-card small {display:block;font-size:.7rem;font-weight:700;color:var(--text-2);}
.isle-guardian {position:absolute;left:var(--x);top:var(--y);width:clamp(70px,9vw,120px);transform:translate(45%,-120%);z-index:2;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3));animation:float 4s ease-in-out infinite;pointer-events:none;}
.isle-hero {position:absolute;left:var(--x);top:var(--y);width:clamp(60px,7.5vw,96px);transform:translate(-50%,-105%);z-index:4;transition:left .9s cubic-bezier(.45,.05,.4,1),top .9s cubic-bezier(.45,.05,.4,1);pointer-events:none;}
.isle-hero img {width:100%;display:block;filter:drop-shadow(0 6px 4px rgba(0,0,0,.3));}
.isle-hero i {position:absolute;left:15%;right:15%;bottom:-4px;height:10px;border-radius:50%;background:rgba(0,0,0,.25);filter:blur(2px);z-index:-1;}
.isle-hero.is-left img {transform:scaleX(-1);}
.isle-hero.is-walking img {animation:heroWalk .22s ease-in-out infinite alternate;}
.isle-hero.is-left.is-walking img {animation-name:heroWalkL;}
@keyframes heroWalk {from {transform:translateY(0) rotate(-5deg);} to {transform:translateY(-10px) rotate(5deg);}}
@keyframes heroWalkL {from {transform:scaleX(-1) translateY(0) rotate(-5deg);} to {transform:scaleX(-1) translateY(-10px) rotate(5deg);}}
.isle-hint {position:relative;z-index:2;justify-self:center;margin:0 0 18px;display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:99px;background:var(--glass-strong);font-weight:800;font-size:.85rem;color:var(--ink);box-shadow:var(--glass-shadow);}
.harbor-state .btn {pointer-events:auto;}
@media (max-width:700px) {
  .isle-top {padding:10px;gap:8px;flex-wrap:wrap;} .isle-words {min-width:0;} .isle-title strong {font-size:1.05rem;} .isle-title img {width:40px;height:40px;}
  .isle-stage {width:100%;aspect-ratio:3/4;} .isle-ground {inset:8% 0;width:100%;height:84%;}
  .st-medal {width:46px;height:46px;} .st-card small {display:none;} .st-card {padding:3px 8px;}
}
@media (prefers-reduced-motion:reduce) {.isle-scene,.isle-ground,.isle-path path,.isle-station,.isle-hero img {animation:none!important;} .isle-hero {transition:none;}}

.region-sign.is-first {display:none!important;}
.isle-hero {transform:translate(-125%,-70%)!important;}
@media (max-width:700px) {.isle-station {left:min(max(var(--x),16%),82%);} .isle-guardian {display:none;} .isle-hero {left:min(max(var(--x),16%),82%);}}

/* ===== Nebel, Wolken, Menü fest, Logo-Icon ===== */
html,body {overflow-x:clip!important;}
.side-nav {position:sticky!important;top:0!important;align-self:start;}
.logo-icon {display:none;}
.nav-collapsed .logo-full {display:none!important;}
.nav-collapsed .logo-icon {display:block;width:52px!important;height:52px;object-fit:contain;margin:6px auto 0;filter:drop-shadow(0 3px 4px rgba(60,30,5,.3));}
.region-fog {background:none!important;backdrop-filter:none!important;z-index:5!important;overflow:visible;}
.region-fog::before {content:"";position:absolute;inset:-6% -2% -6% 0;background:url(../img/nebel-wolken.webp) 0 0/560px auto repeat;filter:saturate(.45) brightness(1.08) drop-shadow(0 0 30px rgba(255,255,255,.7));-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%);animation:fogDrift 40s linear infinite;}
.region-fog::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,246,236,.55) 30%,rgba(255,246,236,.75));pointer-events:none;}
.region-fog:not(.is-near)::after {background:rgba(255,246,236,.75);}
.region-fog:not(.is-near)::before {-webkit-mask-image:none;mask-image:none;}
.region-fog span {position:relative;z-index:2;}
.region-fog:not(.is-near) span {display:none!important;}
@keyframes fogDrift {to {background-position:560px 0;}}
.region-sign {z-index:8!important;}
.sea-cloud {background:url(../img/wolke.webp) center/contain no-repeat!important;border-radius:0!important;box-shadow:none!important;width:calc(220px * var(--s))!important;height:calc(140px * var(--s))!important;opacity:.95;}
.sea-cloud::before,.sea-cloud::after {display:none!important;}
.map-coin {display:none!important;}
.region-fog {-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 90%,transparent);}
.region-fog::before {background-size:640px auto;background-position:0 40px;}

/* ===== Welten wie im Abenteuerspiel ===== */
.region-fog {display:none!important;}
.region-zone {position:absolute;top:-4%;bottom:-4%;z-index:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 50%,color-mix(in oklab,var(--tint) 30%,transparent),transparent 72%);mix-blend-mode:soft-light;}
.region-zone.is-locked {background:radial-gradient(60% 55% at 50% 50%,rgba(20,40,70,.32),transparent 75%);mix-blend-mode:multiply;}
.sea-prop.is-mark img {width:calc(210px * var(--k));animation:rock 7s ease-in-out infinite;}
.sea-prop.is-mark.is-light img {width:calc(90px * var(--k));animation:none;}
.sea-prop.is-mark.is-locked img {filter:grayscale(.55) brightness(.85) drop-shadow(0 8px 6px rgba(4,60,80,.35));}
.sea-prop.is-mark::after {display:none;}
.island.is-far .island-shape {filter:grayscale(.65) brightness(.82) saturate(.7);}
.island.is-far .island-label {display:none;}
.island.is-locked:not(.is-far) .island-label {opacity:.85;}
.world-gate {position:absolute;z-index:7;pointer-events:none;display:grid;justify-items:center;gap:6px;}
.world-gate img {width:calc(230px * var(--k));filter:drop-shadow(0 14px 14px rgba(4,40,60,.4));animation:rock 6s ease-in-out infinite;}
.world-gate:not(.is-near) img {width:calc(170px * var(--k));filter:grayscale(.4) brightness(.85) drop-shadow(0 10px 10px rgba(4,40,60,.35));}
.world-gate span {display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:99px;background:var(--paper);color:var(--ink-2);font-weight:700;font-size:13px;box-shadow:var(--glass-shadow);white-space:nowrap;}
.world-gate.is-near img {animation:rock 6s ease-in-out infinite, gateGlow 2.4s ease-in-out infinite;}
@keyframes gateGlow {50% {filter:drop-shadow(0 0 22px rgba(255,214,90,.9)) drop-shadow(0 14px 14px rgba(4,40,60,.4));}}
@media (prefers-reduced-motion:reduce){.world-gate img,.sea-prop.is-mark img{animation:none!important;}}
.island.is-far .island-shape {filter:saturate(.45) brightness(.9)!important;}
.island.is-far .island-label {display:none!important;}
.island.is-far::after {content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:var(--glass-shadow);opacity:.9;}
.island.is-locked .island-ground {filter:saturate(.8) brightness(.97) drop-shadow(0 10px 8px rgba(4,60,80,.35))!important;}
.island.is-far .island-shape {filter:saturate(.75) brightness(.92)!important;}

/* ---- Welten: eigener Horizont, eigenes Meer, lebendiges Wasser ---- */
.world-horizon {background-repeat:no-repeat!important;background-size:cover!important;background-position:center top!important;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;}
.world-horizon:first-child {-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent);}
.region-water {position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;background:var(--sea) repeat;background-size:460px;opacity:.75;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);animation:seaDrift 40s linear infinite;}
.sea-map::before {background-image:inherit!important;background-repeat:repeat!important;background-size:520px!important;opacity:.35;mix-blend-mode:screen;inset:-20%!important;animation:seaDrift 30s linear infinite, seaBreath 6s ease-in-out infinite alternate!important;z-index:0;}
.world-body::before {content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(3px 3px at 20% 30%,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 70% 60%,rgba(255,255,255,.8),transparent),radial-gradient(3px 3px at 45% 80%,rgba(255,255,255,.85),transparent),radial-gradient(2px 2px at 85% 20%,rgba(255,255,255,.8),transparent);background-size:380px 300px;animation:glint 3.2s ease-in-out infinite;}
@keyframes seaDrift {to {background-position:520px 260px;}}
@keyframes seaBreath {from {opacity:.22;} to {opacity:.45;}}
@keyframes glint {0%,100% {opacity:.2;} 50% {opacity:1;}}
.world-gate span {font-size:12px;padding:6px 12px;}
/* Seitenleiste: Voizy immer sichtbar, bei wenig Höhe kompakt */
@media (max-height:760px) {.side-companion {display:grid!important;grid-template-columns:40px 1fr!important;padding:6px 8px!important;gap:6px!important;} .side-companion img {width:40px!important;height:44px!important;} .side-companion strong {font-size:.78rem!important;} .side-companion span {font-size:.62rem!important;}}
/* Inseln: jede Insel bekommt eine eigene Stimmung */
.isle-scene {isolation:isolate;}
.isle-scene::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,40,60,.3),transparent 30%,transparent 70%,rgba(10,40,60,.3));pointer-events:none;}
.isle-scene[data-look="1"]::before {transform:scaleX(-1);filter:saturate(1.1);}
.isle-scene[data-look="2"]::before {filter:brightness(1.08) saturate(1.2) hue-rotate(16deg);}
.isle-scene[data-look="3"]::before {transform:scaleX(-1);filter:hue-rotate(-26deg) brightness(1.03);}
.isle-scene[data-look="4"]::before {filter:brightness(.92) saturate(1.3) hue-rotate(-40deg);}
.isle-hint {display:flex;align-items:center;gap:12px;}
.isle-go {padding:8px 18px!important;min-height:0!important;font-size:.95rem!important;}
@media (prefers-reduced-motion:reduce){.region-water,.sea-map::before,.world-body::before{animation:none!important;}}

/* ---- Eine durchgehende, gemalte Weltkarte ---- */
.sea-map {background:#1aa9c0!important;}
.world-horizon,.region-water,.region-zone {display:none!important;}
.world-panel {position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);animation:panelBreath 14s ease-in-out infinite alternate;}
.world-panel.is-first {-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
.world-panel.is-last {-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%);}
@keyframes panelBreath {from {background-position:center top;} to {background-position:center 6px;}}
.sea-map::before {opacity:.14!important;z-index:1!important;pointer-events:none;animation:seaDrift 36s linear infinite!important;}
.world-body {z-index:2;}
@media (prefers-reduced-motion:reduce){.world-panel{animation:none;}}
.sea-map::before {display:none!important;}
.world-track::after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url(../img/meer-wasser.webp) repeat;background-size:520px;opacity:.16;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 30%);mask-image:linear-gradient(180deg,transparent 14%,#000 30%);animation:seaDrift 36s linear infinite;}

/* Ruhige Karte + Tor-Hinweis unter dem Tor */
.deko {display:none!important;}
.world-gate span {position:absolute!important;left:50%!important;right:auto!important;top:100%!important;bottom:auto!important;transform:translate(-50%,6px)!important;white-space:nowrap;z-index:3;}

/* Handy: wie ein Spiel – große Daumen-Ziele, kompakte HUD, Icon-Tabs */
@media (max-width:760px){
 .tabbar {grid-template-columns:repeat(7,minmax(0,1fr))!important;}
 .tabbar .tab-btn {font-size:0!important;gap:0!important;border-radius:16px;}
 .tabbar .nav-icon {width:30px!important;height:30px!important;}
 .tabbar .tab-btn.is-active,.tabbar .tab-btn[aria-current]{font-size:.56rem!important;gap:2px!important;}
 .topbar-account .kid-meta,.topbar-account .kid-name,.topbar-account .kid-level,.topbar-account .xp-bar{display:none!important;}
 .topbar {grid-template-columns:auto minmax(0,1fr)!important;}
 .world-gate span {font-size:.6rem;padding:4px 8px;}
}

/* Einheitlicher Abstands-Rhythmus auf allen Seiten */
.main-area {padding-top:32px!important;padding-bottom:40px!important;}
.main-area > * + * {margin-top:22px!important;}
.main-area > .view-head {margin-bottom:4px;}
.reward-grid,.shop-grid {gap:18px!important;}
.reward-card {padding:20px 16px!important;gap:10px!important;}
.reward-card.is-soon {opacity:1!important;background:rgba(255,250,240,.82)!important;}
.reward-card.is-soon strong,.reward-card.is-soon .price {color:#5a4630!important;}
.panel {padding:24px!important;}
.list li {padding:12px 0;}
@media (max-width:760px){
 .main-area {padding:20px 14px calc(var(--tabbar-h) + 28px)!important;}
 .main-area > * + * {margin-top:16px!important;}
 .reward-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
 .reward-card {padding:14px 10px!important;}
 .panel {padding:18px!important;}
 .view-title {font-size:1.6rem!important;}
}
@media (max-width:760px){
 .cb-meta,.cb-sep{display:none!important;}
 .feature-card h2{padding-right:38%;font-size:1.25rem!important;}
 .feature-card > img{max-width:38%!important;height:auto!important;}
}
.world-gate span {top:auto!important;bottom:100%!important;transform:translate(-50%,-6px)!important;}

/* ===== Handy-Erlebnis (Candy-Crush-Stil): kompakte Kopfzeile, volle Spielfläche ===== */
@media (max-width:760px){
  .app-shell[data-view="map"] .journey-head{top:76px!important;left:10px!important;right:10px!important;flex-direction:row!important;align-items:center!important;gap:8px!important;}
  .jh-card{flex:1;min-width:0;padding:4px 10px 4px 4px!important;border-width:2px!important;border-radius:18px!important;box-shadow:0 3px 0 #e8b94a,0 8px 18px rgba(60,30,5,.2)!important;}
  .jh-card .jh-guardian{width:38px!important;height:38px!important;flex-shrink:0;}
  .jh-card > div{min-width:0;}
  .jh-card .eyebrow{font-size:.58rem!important;}
  .jh-card h1{font-size:1rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0!important;}
  .jh-card p{display:none!important;}
  .journey-actions{flex-shrink:0;}
  .journey-actions .btn{width:auto!important;min-height:46px!important;padding:0 16px!important;font-size:.85rem!important;border-radius:16px!important;}
  .drag-hint{left:12px!important;right:auto!important;transform:none!important;max-width:calc(100% - 90px);font-size:.72rem!important;bottom:14px!important;}
  .map-compass{width:52px!important;height:52px!important;right:12px!important;bottom:10px!important;}
  .mini-map{display:none!important;}
  .demo-toggle{top:auto!important;bottom:auto!important;top:calc(env(safe-area-inset-top) + 8px)!important;right:auto!important;left:50%!important;opacity:.35!important;width:26px!important;height:26px!important;}
  .island-label{transform:scale(.9);transform-origin:left center;}
  /* Insel-Szene */
  .isle-station{left:min(max(var(--x),18%),80%)!important;}
  .isle-station span,.isle-station b{font-size:.78rem!important;padding:4px 10px!important;white-space:nowrap;}
  .isle-hint{margin:0 10px 14px!important;padding:6px 6px 6px 14px!important;font-size:.78rem!important;gap:8px!important;}
  /* Wünsche */
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .reward-card{padding:12px 8px!important;gap:6px!important;}
  .reward-card .reward-ic.has-art,.reward-card .reward-ic.has-art img{width:72px!important;height:72px!important;}
  .reward-card strong{font-size:.8rem!important;min-height:2.2em;}
  .reward-card .btn{min-height:38px!important;padding:0 14px!important;font-size:.8rem!important;}
}
@media (max-width:760px){
  .isle-station{translate:-50% -30%;left:min(max(var(--x),17%),83%)!important;}
  .app-shell[data-view="map"] .journey-head{top:92px!important;}
  .demo-toggle{display:none!important;}
}

/* ===== Apple-Glas (klar, ohne Weichzeichner) ===== */
.topbar{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;}
.topbar-location,.captain-bar,.tabbar{
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 45%,rgba(255,255,255,.38))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 10px 30px -12px rgba(10,40,60,.45),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35)!important;}
.topbar-location strong,.captain-bar .kid-name{text-shadow:0 1px 2px rgba(255,255,255,.8);}
.cb-stat{background:rgba(255,255,255,.6)!important;}
/* ===== Handy: unteres Menü immer sichtbar & wischbar ===== */
@media (max-width:759px){
  .topbar,.journey-head,.tabbar{opacity:1!important;pointer-events:auto!important;transform:none!important;}
  .tabbar{display:flex!important;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;justify-content:flex-start!important;gap:6px!important;padding:8px 10px!important;}
  .tabbar::-webkit-scrollbar{display:none;}
  .tabbar > *{flex:0 0 auto!important;min-width:68px;scroll-snap-align:center;}
  .map-compass{bottom:calc(100px + env(safe-area-inset-bottom))!important;z-index:60;}
}

/* ===== Neue Minispiele ===== */
.mg-kokos .mg-bg{background-image:url(../img/spiel-strand.webp);animation:bgFloat 18s ease-in-out infinite alternate;}
.mg-krabbe .mg-bg{background-image:url(../img/welt-sonne.webp);}
.mg-lava .mg-bg{background-image:linear-gradient(rgba(60,10,0,.15),rgba(60,10,0,.35)),url(../img/szene-vulkan.webp);}
.mg-echo .mg-bg{background-image:linear-gradient(rgba(0,40,20,.2),rgba(0,40,20,.4)),url(../img/szene-dschungel.webp);}
.mg-seile .mg-bg{background-image:linear-gradient(rgba(60,30,0,.25),rgba(60,30,0,.45)),url(../img/szene-schatz.webp);}
.kk-nut{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;pointer-events:none;}
.kk-nut i{width:clamp(56px,9vw,80px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b77a4a,#6b3b1a 70%);box-shadow:inset -6px -8px 0 rgba(0,0,0,.25),0 8px 12px rgba(0,0,0,.3);animation:spinSlow 2.4s linear infinite;}
.kk-nut b{padding:5px 14px;border-radius:99px;background:#fff;font:900 1.1rem var(--font-display);box-shadow:0 4px 10px rgba(0,0,0,.25);white-space:nowrap;}
.kk-nut.is-caught{opacity:0;transition:opacity .3s;} .kk-nut.is-bad b{background:var(--coral);color:#fff;}
@keyframes spinSlow{to{transform:rotate(360deg);}}
.kk-basket{position:absolute;bottom:4%;width:clamp(120px,18vw,190px);transform:translateX(-50%);pointer-events:none;transition:left .06s linear;}
.kk-basket img{width:100%;display:block;filter:drop-shadow(0 10px 10px rgba(0,0,0,.3));}
.mg-kokos .mg-stage{touch-action:none;cursor:grab;}
.kr-track{position:absolute;left:4%;right:4%;top:4%;height:34%;display:grid;grid-template-rows:1fr 1fr;gap:8px;}
.kr-lane{position:relative;border-radius:22px;background:linear-gradient(90deg,#ffe7b0,#f6c97a);box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.18);}
.kr-lane span{position:absolute;left:12px;top:8px;font:800 .8rem var(--font-display);opacity:.6;}
.kr-crab{position:absolute;bottom:4px;height:90%;transition:left .5s var(--ease);animation:run .25s ease-in-out infinite alternate;}
.kr-goal{position:absolute;right:0;top:0;bottom:0;width:18px;border-radius:0 22px 22px 0;background:repeating-conic-gradient(#222 0 25%,#fff 0 50%) 0 0/12px 12px;}
.kr-card{position:absolute;left:50%;top:42%;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;padding:18px 34px;border-radius:26px;background:var(--paper);box-shadow:var(--shadow-3);min-width:220px;}
.kr-card.is-in{animation:pop-in .35s var(--ease);} .kr-card b{font:900 2rem var(--font-display);color:var(--coral-deep);} .kr-card small{font-weight:700;opacity:.7;}
.kr-btns{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;gap:14px;}
.kr-btn{display:inline-flex;gap:8px;align-items:center;padding:16px 28px;border:0;border-radius:22px;font:900 1.2rem var(--font-display);color:#fff;cursor:pointer;}
.kr-btn .ic{width:26px;height:26px;fill:currentColor;}
.kr-btn.is-yes{background:linear-gradient(#5fd77d,#2ea84f);box-shadow:0 6px 0 #1e7a37;} .kr-btn.is-no{background:linear-gradient(#ff8a8a,#e5484d);box-shadow:0 6px 0 #a42b30;}
.kr-btn:active{transform:translateY(4px);box-shadow:none;}
.lv-lava{position:absolute;left:0;right:0;bottom:0;height:45%;background:radial-gradient(ellipse at 30% 40%,#ffd23f,transparent 40%),radial-gradient(ellipse at 70% 60%,#ffb12e,transparent 45%),linear-gradient(#ff7a2e,#c8260e);animation:lavaFlow 4s ease-in-out infinite alternate;opacity:.95;}
@keyframes lavaFlow{to{background-position:40px 0,-40px 10px,0 0;filter:brightness(1.15);}}
.lv-path{position:absolute;top:4%;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.lv-path i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.4);} .lv-path i.is-done{background:var(--leaf);} .lv-path i.is-now{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.4);}
.lv-stones{position:absolute;left:0;right:0;bottom:22%;display:flex;justify-content:space-around;padding:0 4%;}
.lv-stone{position:relative;width:clamp(100px,24vw,200px);aspect-ratio:2.2;border:0;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#8a7a8e,#4a3d4f 70%);box-shadow:0 10px 0 #2d232f,0 0 30px rgba(255,140,0,.6);cursor:pointer;animation:stoneBob 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s);}
.lv-stone b{font:900 clamp(1rem,2.4vw,1.4rem) var(--font-display);color:#fff;text-shadow:0 2px 0 #000;}
@keyframes stoneBob{50%{transform:translateY(-8px);}}
.lv-stone.is-sink{animation:sink 1s forwards!important;} @keyframes sink{to{transform:translateY(80px) scale(.8);opacity:0;}}
.lv-stone.is-hint{box-shadow:0 10px 0 #2d232f,0 0 0 5px var(--leaf),0 0 30px var(--leaf);}
.lv-hero{position:absolute;bottom:34%;width:clamp(80px,12vw,120px);transform:translateX(-50%);transition:left .4s var(--ease);z-index:3;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));}
.lv-hero.is-hop{animation:hop .42s ease-out;} .lv-hero.is-fall{animation:fallLava 1s .3s forwards;}
@keyframes hop{50%{transform:translate(-50%,-90px) rotate(-12deg);}} @keyframes fallLava{to{transform:translate(-50%,60px);opacity:.2;}}
.ec-drums{position:absolute;inset:6% 4% 22%;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center;}
.ec-drum{display:grid;justify-items:center;gap:6px;padding:20px 8px 24px;border:0;border-radius:30px 30px 46px 46px;background:linear-gradient(180deg,color-mix(in oklab,var(--c) 70%,#fff),var(--c));box-shadow:0 10px 0 color-mix(in oklab,var(--c) 60%,#000),0 16px 24px rgba(0,0,0,.25);color:#fff;cursor:pointer;transition:transform .12s;}
.ec-drum b{font:900 1.25rem var(--font-display);text-shadow:0 2px 0 rgba(0,0,0,.25);} .ec-drum small{font-weight:700;opacity:.9;}
.ec-drum.is-beat{transform:translateY(8px) scale(.97);box-shadow:0 2px 0 color-mix(in oklab,var(--c) 60%,#000),0 0 40px #fff;filter:brightness(1.2);}
.sl-map{position:absolute;inset:4% 6% 20%;display:grid;grid-template-columns:1fr 1fr;gap:22%;padding:20px;border-radius:28px;background:linear-gradient(#f9e4b7,#e9c98a);box-shadow:inset 0 0 40px rgba(120,70,20,.35),0 14px 30px rgba(0,0,0,.3);}
.sl-ropes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.sl-ropes path{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:14 6;} .sl-ropes .is-ok{stroke:#8a4b1c;} .sl-ropes .is-bad{stroke:var(--coral);}
.sl-col{display:grid;gap:12px;align-content:center;z-index:1;}
.sl-pin{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 14px;border:3px solid #b7864a;border-radius:18px;background:#fffaf0;font:800 1rem var(--font-display);cursor:pointer;box-shadow:0 4px 0 #b7864a;}
.sl-pin b{font-size:1.2rem;color:var(--coral-deep);} .sl-pin.is-sel{border-color:var(--saffron);box-shadow:0 0 0 4px var(--saffron);} .sl-pin.is-done{opacity:.6;border-color:var(--leaf);box-shadow:0 4px 0 var(--leaf);}
@media (max-width:759px){
  .ec-drums{grid-template-columns:1fr 1fr;inset:4% 4% 18%;} .kr-btn{padding:14px 18px;font-size:1rem;} .sl-map{inset:3% 3% 16%;gap:14%;padding:12px;} .sl-pin{padding:8px;font-size:.85rem;} .sl-pin small{display:none;}
  .lv-stones{bottom:24%;} .kr-card{top:44%;padding:14px 22px;}
}
.harbor-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.kr-track{top:19%!important;height:28%!important;} .kr-card{top:52%!important;} .lv-path{top:19%!important;} .sl-map{top:18%!important;} .ec-drums{top:18%!important;}
.sl-pin small{font-size:.85rem;}

/* ===== Handy: schwebendes Dock + schlanke Kopfzeile ===== */
@media (max-width:759px){

  .tabbar{left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;height:68px!important;border-radius:26px!important;
    background:linear-gradient(180deg,#167f96,#0b5a70)!important;border:2px solid rgba(255,255,255,.35)!important;
    box-shadow:0 12px 28px -8px rgba(4,30,45,.6),inset 0 1px 0 rgba(255,255,255,.35)!important;padding:6px 8px!important;}
  .tabbar .tab-btn{color:#fff!important;background:transparent!important;border-radius:20px!important;}
  .tabbar .tab-btn.is-active,.tabbar .tab-btn[aria-current]{background:linear-gradient(#ffd45e,#f5a623)!important;color:#5a3300!important;box-shadow:0 4px 0 #c27a10!important;}
  .main,.app-main,.sea-viewport,.sea-map-wrap{padding-bottom:0!important;}
  /* Kopfzeile schlank */
  .topbar{padding:8px 10px!important;}
  .captain-bar{padding:4px 6px!important;gap:6px!important;border-radius:999px!important;min-height:0!important;}
  .cb-avatar,.app-shell[data-view="map"] .cb-avatar{width:40px!important;height:40px!important;border-width:2px!important;}
  .cb-avatar img{width:36px!important;height:36px!important;}
  .cb-stat{padding:4px 10px 4px 6px!important;font-size:.85rem!important;min-height:0!important;gap:4px!important;}
  .cb-stat img,.cb-stat .ic{width:20px!important;height:20px!important;}
  .cb-stat .bar,.cb-stat progress{display:none!important;}
  .app-shell[data-view="map"] .journey-head{top:64px!important;left:auto!important;right:10px!important;width:auto!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;}
  .app-shell[data-view="map"] .journey-head > :not(.journey-actions){display:none!important;}
  .app-shell[data-view="map"] .journey-head .btn{padding:10px 16px!important;font-size:.9rem!important;min-height:0!important;border-radius:999px!important;}
  .app-shell[data-view="map"] .journey-head .btn .ic{width:18px!important;height:18px!important;}
}
@media (max-width:759px){
  .app-shell[data-view="map"] .main-area,.app-shell[data-view="map"] .world-scene,.app-shell[data-view="map"] .sea-map{height:100dvh!important;max-height:none!important;bottom:0!important;}
  .app-shell[data-view="map"] .main-area{position:fixed!important;inset:0!important;padding:0!important;}
  .app-shell[data-view="map"] .drag-hint{display:none!important;}
  .app-shell[data-view="map"] .journey-actions{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;backdrop-filter:none!important;}
  .app-shell[data-view="map"] .map-compass{bottom:calc(92px + env(safe-area-inset-bottom))!important;width:54px!important;height:54px!important;}
}
@media (max-width:759px){
  .app-shell[data-view="map"] .world-scene::after{content:"";position:fixed;left:0;right:0;bottom:0;height:200px;pointer-events:none;z-index:5;background:linear-gradient(to bottom,transparent,rgba(11,90,112,.55) 55%,#0b5a70);}
  .app-shell[data-view="map"] .journey-head .btn{box-shadow:0 5px 0 #1e7a37,0 10px 20px -6px rgba(0,0,0,.35)!important;outline:0!important;}
  .app-shell[data-view="map"] .journey-head .btn::before,.app-shell[data-view="map"] .journey-head .btn::after{display:none!important;}
  .app-shell[data-view="map"] .journey-head,.app-shell[data-view="map"] .journey-head *{backdrop-filter:none!important;}
}