/* =========================================================================
   Systemchen · Modul schwimmen · „Schwimmen und Sinken“
   Material wie in der Pfütze: Holz, Papier, Filz; Wasserblau als Modulfarbe
   ========================================================================= */
:root {
  --green-dark: #2d5016; --green: #4a7c23; --green-light: #7ab648;
  --cream: #faf6ee; --paper: #f8f1e2; --paper-edge: #e4d5b7;
  --ink: #3b3026; --ink-soft: #6d5d4c;
  --wood-light: #c08b57; --wood: #9a6738; --wood-dark: #5e3c20;
  --water: #3f8fae; --water-dark: #23607a; --water-light: #dcecf3;
  --float: #2f7fa0; --sink: #8a5a2e; --hover: #6a5fb0;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(30, 22, 10, .28), 0 2px 6px rgba(30, 22, 10, .2);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Lora', Georgia, serif;
  --tap: 60px;
  --tip-bg: #fff8ea; --tip-fg: #3b3026; --tip-border: #c9b58f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #e8dcc4; color: var(--ink); font-family: var(--font);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
.ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #f6d77a; outline-offset: 3px; }

/* ---------- Knöpfe ---------- */
.btn { min-width: var(--tap); min-height: var(--tap); border-radius: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: 1.12rem; font-weight: 800; padding: .4rem 1.1rem; border: 2px solid var(--paper-edge); background: var(--paper); color: var(--ink);
  box-shadow: 0 3px 8px rgba(40,30,10,.2); transition: transform .12s ease, filter .12s ease; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(2px) scale(.98); }
.btn[disabled] { opacity: .45; cursor: default; filter: grayscale(.6); }
.btn.round { border-radius: 50%; padding: 0; width: var(--tap); height: var(--tap); }
.btn.small { --tap: 50px; font-size: 1rem; }
.btn.green { background: linear-gradient(180deg, #8cbf5a, var(--green) 60%, #3d6a1c); border-color: #2f5414; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(20,30,5,.35); }
.btn.wood { background: linear-gradient(180deg, var(--wood-light), var(--wood) 55%, #855730); border-color: var(--wood-dark); color: #fff8ea;
  box-shadow: inset 0 2px 0 rgba(255,235,200,.35), inset 0 -3px 0 rgba(40,20,5,.25), 0 4px 10px rgba(20,12,4,.35); }

/* ---------- Kopfzeile ---------- */
.hud-top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top)); pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-title { display: flex; flex-direction: column; background: rgba(248,241,226,.92); border: 1px solid var(--paper-edge); border-radius: 14px; padding: 6px 14px; box-shadow: 0 3px 10px rgba(40,30,10,.18); }
.hud-title b { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; color: var(--water-dark); }
.hud-title span { font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.hud-right { margin-left: auto; display: flex; gap: 10px; }

/* Aufgabe (oben mittig) */
.task { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 15; max-width: min(620px, calc(100vw - 32px));
  background: rgba(255,250,240,.94); border: 2px solid var(--paper-edge); border-radius: 14px; padding: 6px 16px; text-align: center; box-shadow: 0 4px 12px rgba(40,30,10,.18); }
.task b { display: block; font-family: var(--font-title); color: var(--water-dark); font-size: 1.05rem; }
.task span { font-weight: 700; font-size: 1rem; }

/* ---------- Korb ---------- */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; }
.tray-in { pointer-events: auto; display: flex; gap: 10px; padding: 10px 14px; overflow-x: auto; max-width: 100%;
  background: linear-gradient(180deg, #d9b07c, #b98552); border: 3px solid #7a5028; border-radius: 20px; box-shadow: 0 8px 20px rgba(40,20,5,.35), inset 0 2px 0 rgba(255,240,210,.4); }
.item { position: relative; flex: 0 0 auto; width: 96px; min-height: 104px; border-radius: 14px; border: 2px solid #efe0c2; background: #fffaf0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 4px 6px; box-shadow: 0 3px 0 #c9b083;
  font-size: .82rem; font-weight: 800; line-height: 1.1; text-align: center; transition: transform .15s ease; }
.item:hover { transform: translateY(-3px); }
.item .pic { width: 74px; height: 62px; object-fit: contain; }
.item.done { opacity: .72; cursor: default; transform: none; }
.item .mark { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: #fff; }
.item .mark .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.item.done .mark { display: flex; }
.item.is-f .mark { background: var(--float); } .item.is-s .mark { background: var(--sink); } .item.is-h .mark { background: var(--hover); }

/* ---------- Tafel (rechts) ---------- */
.board { position: fixed; right: 14px; top: calc(140px + env(safe-area-inset-top, 0px)); z-index: 12; width: 230px; max-height: calc(100vh - 320px); overflow: auto;
  background: #3e5a48; color: #f3efe2; border: 6px solid #9a6738; border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 20px rgba(30,20,5,.35);
  font-family: var(--font); }
.board h3 { margin: 0 0 6px; font-family: var(--font-title); font-weight: 600; display: flex; align-items: center; gap: 6px; font-size: 1.05rem; }
.board .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board .col b { display: block; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px dashed rgba(243,239,226,.5); padding-bottom: 2px; margin-bottom: 4px; }
.board .col.f b { color: #bfe4f2; } .board .col.s b { color: #f2d3b0; } .board .col.h b { color: #d8d0ff; }
.board ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board li { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; }
.board li.pop { animation: pop .4s ease; }
.board .bpic { width: 30px; height: 26px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
@media (max-width: 1199px) { .board { display: none; } }

/* ---------- Ergebnis (nicht modal) ---------- */
.result { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(148px + env(safe-area-inset-bottom, 0px)); z-index: 16; width: min(640px, calc(100vw - 32px));
  display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 18px;
  background: #fffaf0; border: 3px solid var(--paper-edge); box-shadow: var(--shadow); animation: rin .35s cubic-bezier(.2,.9,.25,1.15) both; }
.result.f { border-color: #8fc6da; } .result.s { border-color: #d6b38c; } .result.h { border-color: #b9b0ea; }
.result .rpic { width: 72px; height: 64px; object-fit: contain; }
.result b { font-size: 1.2rem; display: block; color: var(--water-dark); }
.result.s b { color: #6b3f16; }
.result p { margin: 4px 0 0; font-size: 1.02rem; line-height: 1.4; }
.r-guess { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 10px 2px 6px; border-radius: 20px; font-weight: 800; font-size: .9rem; }
.r-guess .ico { width: 18px; height: 18px; }
.r-guess.ok { background: #e6f3da; color: #2f5414; } .r-guess.no { background: #fdf0d8; color: #8a5208; }

/* ---------- Aktionsleiste (halten, Murmel, Salz) ---------- */
.action { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 17; display: flex; align-items: center; gap: 12px;
  background: rgba(255,250,240,.95); border: 2px solid var(--paper-edge); border-radius: 16px; padding: 8px 12px 8px 16px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.action p { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; }
.action p .ico { color: var(--water); }
.tray[hidden] ~ .action, .tray[hidden] ~ .result { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Karten ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20,25,10,.12), rgba(15,18,8,.45)); animation: fade .3s ease both; }
.overlay.out { opacity: 0; transition: opacity .25s; }
.overlay.start { background-size: cover; background-position: center; }
.card { position: relative; width: min(680px, 100%); max-height: calc(100% - 8px); overflow: auto;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%), var(--paper);
  border-radius: 22px 26px 20px 24px; border: 1px solid var(--paper-edge); box-shadow: var(--shadow), inset 0 0 0 6px rgba(255,255,255,.35);
  padding: 24px 28px 22px; animation: cardIn .45s cubic-bezier(.2,.9,.25,1.15) both; user-select: text; }
.card.wide { width: min(820px, 100%); }
.card::before { content: ''; position: absolute; top: -12px; left: 50%; width: 120px; height: 26px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(236,222,180,.85); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.card h1 { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin: 0 56px .3rem 0; color: var(--water-dark); line-height: 1.15; }
.card h2 { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.35rem, 3.2vw, 1.9rem); margin: 0 56px .4rem 0; color: var(--water-dark); line-height: 1.2; }
.card .kicker { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.card p.say { font-size: clamp(1.08rem, 2.3vw, 1.3rem); line-height: 1.45; margin: .25rem 0 .7rem; }
.card .speak { position: absolute; top: 16px; right: 16px; }
.card .hero { display: flex; justify-content: center; margin: 4px 0 12px; }
.card .hero img { max-width: 100%; max-height: 260px; border-radius: 14px; box-shadow: 0 6px 16px rgba(40,30,10,.22); }
.card .hero.photo { flex-direction: column; align-items: center; }
.card .hero.photo img { width: auto; height: auto; }
.card .hero.photo figcaption { margin-top: 6px; font-size: 11px; line-height: 1.2; color: #8a8177; }
.card .hero.obj .big { width: auto; max-width: 240px; height: 150px; object-fit: contain; box-shadow: none; filter: drop-shadow(0 8px 10px rgba(40,30,10,.25)); }
.card .hero.obj svg.big { width: 170px; height: 150px; }
.card .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.choice { flex: 1 1 170px; max-width: 240px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 12px 14px; cursor: pointer;
  background: #fffaf0; border: 3px solid var(--paper-edge); border-radius: 20px; box-shadow: 0 4px 0 #dccaa4, 0 6px 14px rgba(50,35,10,.15);
  font-size: 1.12rem; font-weight: 800; text-align: center; line-height: 1.25; transition: transform .15s ease, border-color .15s ease; }
.choice .ico { width: 46px; height: 46px; color: var(--water); }
.choice:hover { transform: translateY(-3px); border-color: #8fc6da; }
.choice[data-v="sinkt"] .ico { color: var(--sink); }
.scale { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 6px 14px; border-radius: 12px; background: #eef3f5; border: 2px solid #c9dbe2; }
.scale .ico { color: var(--water-dark); }
.scale b { font-size: 1.3rem; }
.scale small { font-size: .9rem; color: var(--ink-soft); font-weight: 700; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 20px; background: #fdf0d8; color: #8a5208; font-weight: 800; }
.badge.ok { background: #e6f3da; color: #2f5414; }
.count { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 10px; color: var(--water-dark); }
.count .ico { width: 44px; height: 44px; }
.count b { font-size: 3rem; font-family: var(--font-title); }
.count span { font-size: 1.2rem; font-weight: 800; }
.game { display: flex; gap: 8px; align-items: flex-start; background: #fff4d6; border: 2px dashed #e0c070; border-radius: 14px; padding: 10px 12px; font-weight: 700; line-height: 1.4; }
.game .ico { color: #b8860b; margin-top: 2px; }

/* Startbildschirm */
.start .card { width: min(720px, 100%); }
.start .note { font-size: .95rem; color: var(--ink-soft); }
.levels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.lvl-wrap { position: relative; flex: 1 1 180px; }
.lvl { width: 100%; min-height: 96px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; cursor: pointer;
  padding: 10px 14px; border-radius: 18px; border: 3px solid #8fc6da; background: #f2f8fb; box-shadow: 0 4px 0 #b7d6e3; }
.lvl .ico { grid-row: 1 / 3; width: 40px; height: 40px; color: var(--water-dark); }
.lvl b { font-family: var(--font-title); font-size: 1.4rem; color: var(--water-dark); }
.lvl span { font-weight: 800; }
.lvl.locked { opacity: .6; border-color: var(--paper-edge); background: #f4efe4; box-shadow: 0 4px 0 #dccaa4; }
.lvl.locked .ico:last-child { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; }
.lvl-reset { position: absolute; top: -10px; right: -8px; --tap: 40px; }
.feedback-btn { position: fixed; right: 16px; bottom: 16px; }

/* Forscherheft */
table.book { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 1rem; }
table.book th { text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); border-bottom: 2px solid var(--paper-edge); padding: 4px 6px; }
table.book td { padding: 5px 6px; border-bottom: 1px dashed var(--paper-edge); vertical-align: middle; font-weight: 700; }
table.book td:first-child { display: flex; align-items: center; gap: 8px; }
table.book .tpic { width: 40px; height: 32px; object-fit: contain; }
table.book td.ok .ico { width: 18px; height: 18px; color: var(--green); vertical-align: -3px; margin-left: 4px; }
.card h3 { font-family: var(--font-title); font-weight: 600; color: var(--water-dark); display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; }
ul.rules { margin: 0; padding-left: 1.2rem; font-size: 1.05rem; line-height: 1.45; }

/* Untertitel (audio.js) */
.sc-sub { position: fixed; left: 50%; bottom: calc(var(--sc-sub-bottom, 18px) + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); z-index: 9000;
  width: max-content; max-width: min(46rem, calc(100vw - 32px)); pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }
.sc-sub.on { opacity: 1; transform: translate(-50%, 0); }
.sc-sub-in { display: block; padding: 10px 18px; border-radius: 14px; background: rgba(28, 32, 26, .86); color: #fff;
  font: 700 1.12rem/1.4 'Nunito', system-ui, sans-serif; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); text-wrap: balance; }
body:has(.overlay) .sc-sub { --sc-sub-bottom: 18px; }
body:not(:has(.overlay)) .sc-sub { top: calc(130px + env(safe-area-inset-top, 0px)); bottom: auto; }

@keyframes fade { from { opacity: 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes rin { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } }
@media (max-width: 600px) {
  .card { padding: 20px 18px 18px; }
  .item { width: 80px; min-height: 92px; } .item .pic { width: 60px; height: 50px; }
  .result { grid-template-columns: 52px 1fr auto; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } .result .rpic { width: 52px; height: 46px; }
  .hud-title b { font-size: 1rem; } .hud-title span { font-size: .8rem; }
  .sc-sub-in { font-size: 1rem; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) { .card, .overlay, .result, .board li.pop { animation: none; } .sc-sub { transition: none; } }
.overlay.start { align-items: flex-start; padding-top: max(3vh, 16px); background-position: center 70%; }
/* breit: Ergebnis links neben dem Becken (verdeckt nie den Beckenboden) */
body.wide .result { left: 14px; transform: none; top: calc(140px + env(safe-area-inset-top, 0px)); bottom: auto; width: 296px; grid-template-columns: 1fr auto; animation-name: rinL; }
body.wide .result .r-pic { grid-column: 1; grid-row: 1; }
body.wide .result .speak { grid-column: 2; grid-row: 1; }
body.wide .result .r-txt { grid-column: 1 / 3; grid-row: 2; }
body.wide .result .rpic { width: auto; max-width: 160px; height: 70px; }
@keyframes rinL { from { opacity: 0; transform: translateX(-12px); } }
body:not(:has(.overlay)) .sc-sub { top: calc(146px + env(safe-area-inset-top, 0px)); }
body.wide .tray[hidden] ~ .result, body.wide .result { bottom: auto; }
/* Fähre: Gewicht im Korb, Warnfarbe über der Ladelinie */
.item.good em { font-style: normal; font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
.item.good.boot { border-color: #8fc6da; background: #eef7fb; } .item.good.boot .mark { display: flex; background: var(--water); }
.item.good.insel .mark { background: var(--green); }
.action.warn { border-color: #e25b2a; background: #fff1e6; }
.action.warn p { color: #a03a10; }

@media (max-width: 600px) {
  .hud-title { display: none; }
  .task { top: calc(70px + env(safe-area-inset-top, 0px)); padding: 4px 12px; }
  .task b { font-size: .95rem; } .task span { font-size: .88rem; }
  body:not(:has(.overlay)) .sc-sub { top: calc(128px + env(safe-area-inset-top, 0px)); }
  .result p { font-size: .95rem; }
}

/* ---------- Hafen am See (am Ende jedes Levels) ---------- */
.hf-panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 17; width: min(1180px, calc(100vw - 20px));
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 10px; background: rgba(250,246,238,.95); border: 2px solid var(--paper-edge); border-radius: var(--radius); box-shadow: var(--shadow); }
.hf-wares { display: flex; flex-wrap: wrap; gap: 8px; flex: 3 1 540px; }
.hf-ware { display: flex; align-items: center; gap: 4px; padding: 3px 5px; background: #fff; border: 2px solid var(--paper-edge); border-radius: 14px; flex: 1 1 160px; }
.hf-ware img { width: 38px; height: 34px; object-fit: contain; }
.hf-ware span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hf-ware b { font-size: .98rem; } .hf-ware small { color: var(--ink-soft); font-weight: 700; font-size: .8rem; }
.hf-ware em { font-style: normal; font-weight: 900; font-size: 1.3rem; min-width: 1.6em; text-align: center; color: var(--water-dark); }
.hf-ware .btn.small { --tap: 42px; }
.hf-mid { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hf-bar { position: relative; height: 22px; border-radius: 11px; background: #e8dcc4; overflow: visible; box-shadow: inset 0 2px 4px rgba(60,40,20,.2); }
.hf-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; background: linear-gradient(90deg, #7ab648, #4a7c23); transition: width .25s ease; }
.hf-bar.over i { background: linear-gradient(90deg, #f0a35a, #d6501f); }
.hf-bar b { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: #d62f22; border-radius: 2px; }
.hf-cap { margin: 0; font-weight: 800; font-size: .92rem; }
.hf-wx { display: flex; gap: 8px; flex: 0 1 auto; }
.hf-wx > div { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; border: 2px solid var(--paper-edge); border-radius: 14px; }
.hf-wx > div.warn { border-color: #e25b2a; background: #fff1e6; color: #a03a10; }
.hf-wx span { display: flex; flex-direction: column; line-height: 1.1; } .hf-wx small { font-size: .75rem; font-weight: 700; color: var(--ink-soft); } .hf-wx b { font-size: 1rem; }
.hf-btns { display: flex; gap: 8px; align-items: center; flex: 0 1 auto; }
.hf-btns:empty { display: none; }
.hf-info { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(118px + env(safe-area-inset-bottom, 0px)); z-index: 16; max-width: min(640px, calc(100vw - 32px));
  padding: 8px 16px; background: rgba(255,255,255,.94); border: 2px solid #8fc6da; border-radius: 14px; font-weight: 800; font-size: 1.08rem; text-align: center; box-shadow: var(--shadow); }

/* Werft-Leiste im Hafen: lange Hinweise umbrechen statt Knöpfe abzuschneiden */
.action { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }