/* Paar-Expedition – Aquarell-Abendstimmung */
:root{
  --ink:#fdf4e3; --ink2:#e9dcc6; --muted:#c9bfd6;
  --night:#1d2340; --dusk:#3a3560; --plum:#4a3a63; --amber:#f2b866; --amber2:#ffd27a;
  --sea:#2c4a66; --card:rgba(32,30,58,.78); --line:rgba(255,231,160,.22);
  --radius:20px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5}
body{overscroll-behavior:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:3px solid var(--amber2);outline-offset:3px;border-radius:12px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hintergrund */
.bg{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#151a33 0%,#272a52 38%,#4a3a63 70%,#b77b62 100%);transition:filter .8s}
.bg .stars{position:absolute;inset:0 0 40% 0;background-image:
  radial-gradient(1.4px 1.4px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 8%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 46% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 62% 12%,#fff 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 78% 26%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 6%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 8% 40%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 36% 44%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 70% 46%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 54% 36%,#fff 50%,transparent 51%);
  opacity:.75;animation:twinkle 6s ease-in-out infinite alternate}
.bg .hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:28vh}
body:has(.screen.sea) .bg{filter:hue-rotate(-12deg) saturate(.9)}
body:has(.screen.night) .bg{filter:brightness(.82)}
@keyframes twinkle{from{opacity:.45}to{opacity:.9}}

/* Bildschirm */
.screen{position:relative;z-index:1;min-height:100vh;min-height:100dvh;padding:calc(10px + var(--safe-t)) 16px calc(24px + var(--safe-b));max-width:560px;margin:0 auto;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.narrow{max-width:460px;margin:0 auto}
.center{text-align:center}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.2px;color:#fff6e4;margin:.4em 0 .5em}
h2{font-size:1.6rem;line-height:1.2} h3{font-size:1.2rem}
.lead{color:var(--ink2);font-size:1.05rem}
.hint{color:var(--ink2);font-size:.95rem}
.fine{color:var(--muted);font-size:.82rem;margin-top:14px}
.small{font-size:.92rem;color:var(--ink2)}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.row>.btn{flex:1}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-bottom:6px}
.tb-title{font-family:var(--serif);font-size:1.05rem;color:var(--ink2);text-align:center;flex:1;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:1.6rem;line-height:1;display:grid;place-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.07);font-weight:600;transition:transform .12s,background .2s,box-shadow .2s;width:100%;margin:6px 0}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#ffd68a,#f0a85c);color:#3a2418;border:none;box-shadow:0 6px 22px rgba(242,168,92,.35),inset 0 -3px 0 rgba(0,0,0,.12)}
.btn.primary:disabled{opacity:.45;box-shadow:none}
.btn.big{min-height:58px;font-size:1.1rem}
.btn.small{min-height:44px;padding:8px 14px;font-size:.92rem;width:auto;margin:0}
.btn.ghost{background:rgba(255,255,255,.05)}
.btn.danger{border-color:#d98080;color:#ffd0d0;background:rgba(217,128,128,.08)}
.linkbtn{background:none;border:none;color:var(--amber2);text-decoration:underline;padding:4px 0;min-height:44px}
.pill{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:999px;background:rgba(255,210,122,.18);color:var(--amber2);vertical-align:middle}

/* Karten */
.card{border-radius:var(--radius);padding:18px;margin:12px auto}
.glass{background:var(--card);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* Titel */
.title-wrap{text-align:center;padding-top:4vh;display:flex;flex-direction:column;align-items:center}
.title-art .lh{width:70px;height:140px;margin-bottom:-10px}
.logo{font-size:3rem;line-height:1;margin:.2em 0;color:#fff3d6;text-shadow:0 0 30px rgba(255,210,122,.35)}
.tagline{color:var(--ink2);font-size:1.08rem;margin:0 0 6px}
.title-pilo .pilo-sm{width:150px;height:160px}
.title-wrap .stack{width:100%;max-width:360px}

/* Pilo */
.pilo-row{display:flex;gap:10px;align-items:flex-end;margin:6px 0 12px}
.pilo-xs{width:72px;height:78px;flex:none}
.bubble{position:relative;background:#fbf1de;color:#3a2a22;border-radius:18px;padding:12px 14px;margin:0;font-size:1rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pilo-row .bubble{border-bottom-left-radius:4px}
.bubble.wide{margin:10px 0}
.bubble.soft{background:#e8e2f3}
.flicker{animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.9}45%{opacity:.6}60%{opacity:1}}

/* Einwilligung */
.checks{padding:0;list-style:none;margin:8px 0 16px}
.checks li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line);color:var(--ink2)}
.checks li::before{content:"✦";position:absolute;left:4px;top:10px;color:var(--amber2)}
.checks b{color:#fff6e4}

/* Auswahl */
.choice{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;padding:16px;margin:10px 0;border-radius:var(--radius);border:2px solid var(--line);background:var(--card)}
.choice small{color:var(--ink2)}
.choice.selected{border-color:var(--amber2);box-shadow:0 0 0 4px rgba(255,210,122,.15)}
.choice.disabled{opacity:.6}
.ci{font-size:1.8rem;line-height:1}

/* Setup */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pcard{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column}
.pav{display:grid;place-items:center}
.av-lg{width:96px;height:106px}
.lbl{display:block;font-size:.85rem;color:var(--muted);margin:10px 0 4px}
.input{width:100%;min-height:48px;border-radius:14px;border:1.5px solid var(--line);background:rgba(0,0,0,.25);padding:10px 12px;font-size:1rem;color:var(--ink)}
.input::placeholder{color:#a79fb6}
textarea.input{resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:40px;padding:6px 9px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.05);font-size:.88rem}
.chip.on{background:var(--amber2);color:#3a2418;border-color:var(--amber2);font-weight:600}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sw{aspect-ratio:1;min-height:32px;width:100%;padding:0;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.sw.on{border-color:#fff6e4;transform:scale(1.08)}
.role{margin-top:12px;padding:10px;border-radius:14px;background:rgba(255,210,122,.1);font-size:.92rem;text-align:center}
.role-bruecke{background:rgba(143,183,201,.14)}
.role small{color:var(--ink2)}
@media (max-width:360px){.setup{grid-template-columns:1fr}}

/* Wetter */
.weather{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:10px 0}
.wh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.av-xs{width:42px;height:46px;flex:none}
.av-md{width:70px;height:78px}
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mood{min-height:64px;border-radius:14px;border:2px solid var(--line);background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px}
.mood span{font-size:1.5rem}
.mood small{font-size:.68rem;color:var(--ink2)}
.mood.on{border-color:var(--amber2);background:rgba(255,210,122,.16)}
.mline{min-height:1.4em;margin:8px 0 0;font-size:.9rem;color:var(--ink2)}

/* Hub */
.islands{display:flex;flex-direction:column;gap:10px}
.island{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px 10px 6px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--card)}
.island:first-child{border-color:rgba(255,210,122,.6);box-shadow:0 0 0 4px rgba(255,210,122,.08)}
.isl-art svg{width:104px;height:70px;display:block}
.isl-txt{display:flex;flex-direction:column}
.isl-txt small{color:var(--muted);font-size:.78rem}
.isl-txt b{font-family:var(--serif);font-size:1.25rem}
.isl-txt span{color:var(--ink2);font-size:.88rem}
.island.locked .isl-txt b{color:#d9d0e4}
.lock{margin-top:2px;font-size:.8rem!important;color:var(--amber2)!important}
.prog{display:flex;gap:5px;margin-top:6px}
.prog i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.prog i.on{background:var(--amber2);box-shadow:0 0 10px var(--amber2)}
.hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--card)}
.tile span{font-size:1.6rem}
.tile small{color:var(--ink2);font-size:.8rem}

/* Kapitelkarte */
.chapter{display:flex;flex-direction:column;align-items:center}
.islandmap{width:100%;max-width:400px;max-height:62vh}
.stop{cursor:pointer}
.stop:not(.lit):not(.cur){cursor:default;opacity:.85}
.stopnum{fill:#fff6e4;font:700 13px var(--sans)}
.pulse{animation:pulse 2s ease-in-out infinite;transform-origin:center}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.chap-foot{width:100%;max-width:420px}

/* Spiel */
.play-screen{padding-left:10px;padding-right:10px}
.play{display:flex;flex-direction:column;align-items:stretch}
.say{min-height:3.1em;margin:0 4px 8px;padding:8px 12px;border-radius:14px;background:rgba(251,241,222,.95);color:#3a2a22;font-size:.95rem;display:flex;align-items:center}
.say.warn{background:#f7ddd0}
.board{width:100%;display:flex;justify-content:center}
.boardsvg{width:100%;max-width:470px;max-height:56vh;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.tpos{transition:transform .19s ease-in-out}
.tchar .ring{opacity:0;transition:opacity .2s}
.tchar.active .ring{opacity:1;animation:ring 1.4s ease-in-out infinite}
@keyframes ring{0%,100%{stroke-opacity:.95}50%{stroke-opacity:.4}}
.reveal{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.tapfx{fill:none;stroke-width:5;animation:tapfx .6s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes tapfx{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.1)}}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.who{display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:60px;border-radius:16px;border:2px solid var(--line);background:var(--card);text-align:left}
.who small{display:block;color:var(--ink2);font-size:.78rem}
.who.on{border-color:var(--amber2);background:rgba(255,210,122,.15);box-shadow:0 0 0 4px rgba(255,210,122,.12)}
.tools{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:8px}
.planks{margin-right:auto;color:var(--ink2);font-size:.95rem;padding-left:4px}
.roles{display:flex;flex-direction:column;gap:8px}
.rolecard{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px}
.rolecard small{display:block;color:var(--ink2);font-size:.86rem}

/* Overlay */
.overlay{position:fixed;inset:0;z-index:20;background:rgba(10,10,25,.55);display:grid;place-items:center;padding:20px;animation:fade .3s}
.overlay .card{max-width:420px;width:100%}
.lamps{font-size:2.4rem;filter:drop-shadow(0 0 12px rgba(255,200,90,.8))}

/* Lagerfeuer */
.fire-scene{position:relative;height:170px;max-width:420px;margin:0 auto}
.fs-fire{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:170px}
.fs-fire .cf{width:170px;height:128px}
.fs-a{position:absolute;left:4%;bottom:6px}
.fs-b{position:absolute;right:4%;bottom:6px;transform:scaleX(-1)}
.fs-pilo{position:absolute;right:28%;top:-4px;opacity:.95}
.fs-pilo .pilo-xs{width:56px;height:60px}
.flame{transform-origin:100px 110px;animation:flame 1.1s ease-in-out infinite alternate}
@keyframes flame{from{transform:scale(1,1) skewX(0)}to{transform:scale(1.05,.94) skewX(3deg)}}
.sparks circle{animation:spark 2s linear infinite}
.sparks circle:nth-child(2){animation-delay:.7s}.sparks circle:nth-child(3){animation-delay:1.3s}
@keyframes spark{from{transform:translateY(10px);opacity:1}to{transform:translateY(-24px);opacity:0}}
.qcard{max-width:440px;margin:14px auto 0;background:#fbf1de;color:#33241d;border-radius:22px;padding:22px 20px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 0 0 6px #f1e2c3;position:relative}
.qcard::after{content:"";position:absolute;inset:12px;border:1.5px dashed #d8bf94;border-radius:14px;pointer-events:none}
.qcard .q{font-family:var(--serif);font-size:1.45rem;line-height:1.3;margin:8px 0 2px}
.qmeta{color:#9a7c5c;font-size:.8rem;letter-spacing:.4px;text-transform:uppercase}
.card .qmeta{color:var(--muted)}
.flip{animation:flip .6s cubic-bezier(.2,.9,.3,1)}
@keyframes flip{from{transform:perspective(800px) rotateY(90deg);opacity:0}to{transform:none;opacity:1}}
.turn{display:flex;gap:10px;align-items:flex-start}
.turn p{margin:0}
.listen{color:var(--ink2);display:block;margin-top:6px}
.notebox{margin:12px 0 6px}
.notebox summary{cursor:pointer;color:var(--amber2);min-height:44px;display:flex;align-items:center}
.note{background:#fbf1de;color:#33241d;border-radius:14px;padding:14px;font-family:var(--serif);font-size:1.15rem;margin:10px 0}

/* Himmel & Tagebuch */
.sky{width:100%;border-radius:20px;background:linear-gradient(180deg,#0f1430,#262a55);margin:8px 0;box-shadow:inset 0 0 0 1px var(--line)}
.tw{animation:twinkle 3s ease-in-out infinite alternate}
.bigstar{cursor:pointer}
.bigstar.born{animation:born 1.6s cubic-bezier(.2,1.2,.4,1)}
@keyframes born{0%{transform-box:fill-box;opacity:0;translate:0 140px}60%{opacity:1}100%{translate:0 0}}
.diary{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.entry{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;transition:box-shadow .3s}
.entry.hl{box-shadow:0 0 0 3px var(--amber2)}
.eq{font-family:var(--serif);font-size:1.12rem;margin:4px 0 6px;color:#fff6e4}
.eq.sm{font-size:1rem;color:var(--ink2);margin-top:10px}
.en{margin:4px 0;color:var(--ink2)}

/* Paywall */
.islet-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.islet-row svg{width:100%;height:auto}
.feat,.promise{list-style:none;padding:0;margin:10px 0}
.feat li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;margin:6px 0;background:var(--card);border:1px solid var(--line)}
.feat li.hl{border-color:var(--amber2)}
.feat small{display:block;color:var(--ink2)}
.dot{width:14px;height:14px;border-radius:50%;margin-top:6px;flex:none}
.promise{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:.9rem;color:var(--ink2)}

/* Einstellungen */
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow small{display:block;color:var(--ink2);font-size:.85rem}
.switch{width:58px;height:34px;border-radius:999px;border:none;background:rgba(255,255,255,.2);position:relative;flex:none}
.switch i{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on{background:#e9a85c}.switch.on i{left:27px}
.help{list-style:none;padding:0}
.help li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.help a{color:var(--amber2);font-weight:700;white-space:nowrap;min-height:24px}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translate(-50%,30px);opacity:0;z-index:30;max-width:min(92vw,440px);background:#fbf1de;color:#3a2a22;padding:12px 16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:all .3s;pointer-events:none;font-size:.95rem;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-height:800px){.boardsvg{max-height:58vh}}

/* ===== Kapitel 2–5: Spielfeld-Effekte ===== */
.gust{animation:gust 1.8s linear infinite}
@keyframes gust{from{transform:translateX(-26px);opacity:0}40%{opacity:1}to{transform:translateX(30px);opacity:0}}
.rain line{animation:rain 1.1s linear infinite}
@keyframes rain{from{transform:translate(0,-30px);opacity:0}30%{opacity:1}to{transform:translate(-10px,40px);opacity:0}}
.flies circle{animation:flicker 3s ease-in-out infinite}
.spin{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pop-in{animation:popin .45s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes popin{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sparkle{animation:sparkle .9s ease-out forwards}
@keyframes sparkle{from{opacity:1}to{opacity:0;transform:translateY(-14px)}}
.drift{animation:drift 7s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.gust,.rain line,.spin,.drift,.flies circle{animation:none}}

/* Kapitel-Stimmungen (Himmel) */
body[data-ch="2"] .bg{filter:saturate(.55) brightness(.8) hue-rotate(8deg)}
body[data-ch="3"] .bg{filter:hue-rotate(-18deg) saturate(1.1)}
body[data-ch="4"] .bg{filter:hue-rotate(38deg) saturate(.8) brightness(.9)}
body[data-ch="5"] .bg{filter:brightness(.7) saturate(1.15) hue-rotate(-8deg)}

/* Mechanik-Karte, Sicherheitsnotiz, Sternzähler */
.mechcard{display:flex;gap:12px;align-items:flex-start;text-align:left;background:rgba(255,231,160,.09);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:10px 0}
.mechcard .mi{font-size:1.8rem;line-height:1}
.mechcard b{display:block;color:#fff6e4;font-family:var(--serif)}
.safety{background:rgba(160,190,230,.1);border:1px solid rgba(160,190,230,.3);border-radius:14px;padding:10px 12px;font-size:.9rem;color:var(--ink2);text-align:left;margin:10px 0}
.chip.star{background:rgba(200,182,255,.15)}
.chlist{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.chitem{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;text-align:left;padding:8px 12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05);width:100%}
.chitem svg{width:96px;height:64px}
.chitem.locked{opacity:.75}
.chitem .cht{font-family:var(--serif);font-size:1.05rem;color:#fff6e4}
.chitem .chs{font-size:.85rem;color:var(--muted)}
.chitem .chp{font-size:.85rem;color:var(--amber2);white-space:nowrap}
.diary-ch{font-family:var(--serif);color:var(--amber2);margin:18px 0 4px;font-size:1.05rem}
.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.summary div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.summary b{display:block;font-size:1.5rem;color:var(--amber2);font-family:var(--serif)}
.testflag{display:inline-block;font-size:.78rem;padding:3px 10px;border-radius:999px;background:rgba(160,190,230,.18);color:#dce6f5;margin-bottom:6px}
.lh-sm svg{width:110px;height:auto;margin:0 auto;display:block}
.constl{font-family:var(--serif)}
.tools .btn{white-space:nowrap}
.planks{white-space:nowrap;font-size:.88rem}
@media (max-width:400px){.tools{gap:6px}.tools .btn.small{padding-left:10px;padding-right:10px}}

/* ---------- 0.3: Expeditionen, Wertung, Ruhige Bucht ---------- */
body[data-ch="6"] .bg{filter:brightness(1.02) saturate(1.05) hue-rotate(-18deg) sepia(.12)}
body[data-ch="7"] .bg{filter:brightness(.98) saturate(1.05) sepia(.22)}
body[data-ch="8"] .bg,body[data-ch="gate"] .bg{filter:brightness(.9) saturate(.75) hue-rotate(8deg)}
.sec-h{font-family:var(--serif);font-size:1.15rem;margin:18px 4px 8px;color:#fff6e4}
.sec-h small{font-family:inherit;font-size:.8rem;color:var(--ink2);font-weight:400;margin-left:6px}
.islands.packs .island{border-color:color-mix(in srgb,var(--hue) 45%,transparent);box-shadow:none}
.islands.packs .island:first-child{box-shadow:none}
.moves{font-size:.85rem;color:var(--ink2);white-space:nowrap}
.tools{flex-wrap:wrap}
.shells{font-size:2rem;letter-spacing:.2em;margin:2px 0 4px}
.shells span{display:inline-block;opacity:.22;filter:grayscale(1);transform:scale(.85)}
.shells span.on{opacity:1;filter:none;transform:none;animation:shellpop .5s both}
.shells span.on:nth-child(2){animation-delay:.15s}.shells span.on:nth-child(3){animation-delay:.3s}
@keyframes shellpop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.rate-line{font-family:var(--serif);font-size:1.15rem;color:#fff6e4;margin:4px 0}
.newrec{color:var(--amber2)}
.muted{color:var(--ink2)}
.linkbtn.alt{display:block;margin:10px auto 0;font-size:.85rem}
.ritual-icon{font-size:3rem;margin:6px 0}
.choices{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.entry.left{text-align:left}
.gate-art{width:150px;margin:0 auto}
.gate-art svg{width:100%;height:auto}
.gate-box{background:rgba(160,190,230,.1);border:1px solid rgba(160,190,230,.3);border-radius:16px;padding:12px 14px;margin:12px 0;font-size:.92rem}
.gate-box p{margin:6px 0}
.gate-warn{background:rgba(255,190,160,.1);border-radius:12px;padding:8px 10px}
.gate-warn a{color:#ffd9c4;font-weight:700}
.pausefab{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;border-radius:999px;padding:10px 16px;font:600 .95rem/1 var(--sans,system-ui);color:#14223a;background:#e6eef1;border:2px solid #8fb3c4;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.breathe{width:90px;height:90px;margin:8px auto;display:grid;place-items:center}
.breathe i{display:block;width:40px;height:40px;border-radius:50%;background:radial-gradient(#e6eef1,#8fb3c4);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}45%,55%{transform:scale(2)}}
@media (prefers-reduced-motion:reduce){.breathe i,.shells span.on{animation:none}}
body[data-ch="8"] #app{padding-bottom:84px}

/* ---------- 0.4: Online zu zweit ---------- */
.onl{font-size:.9em}
.roomcode{font:700 2.6rem/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.28em;margin:.3em 0 .4em;padding-left:.28em;color:#ffe7a0;text-shadow:0 0 18px rgba(255,210,120,.35)}
.qr{width:190px;max-width:60vw;margin:.4rem auto .2rem;background:#fff;border-radius:14px;padding:8px}
.qr svg{display:block;width:100%;height:auto}
.input.code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-size:1.4rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.err{color:#ffb4a8;font-size:.9rem;margin:.5rem 0 0}
.waiting{display:flex;align-items:center;justify-content:center;gap:.5rem}
.dots{display:inline-flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:#ffe7a0;opacity:.3;animation:dotp 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dotp{50%{opacity:1;transform:translateY(-3px)}}
.lobby{display:flex;justify-content:center;gap:1.4rem;margin:1rem 0}
.lob{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem 1rem;border-radius:18px;background:rgba(255,255,255,.06)}
.lob.me{outline:2px solid rgba(255,214,140,.7)}
.lob small{opacity:.7}
.pcard.remote{opacity:.75}
.who-tag{display:block;text-align:center;font-size:.75rem;opacity:.75;margin-bottom:.3rem}
.who.remote{opacity:.7}
.who:disabled{cursor:default}
.mood:disabled{opacity:.55;cursor:default}
.mood.on:disabled{opacity:.9}
.readies{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.35rem}
.readies li{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.reveal{display:grid;gap:.6rem;margin:.8rem 0;text-align:left}
.rv{display:flex;gap:.6rem;align-items:flex-start;background:rgba(255,255,255,.07);border-radius:14px;padding:.6rem .7rem}
.rv p{margin:.15rem 0 0}
.q.sm{font-size:1.05rem}
.netbar{position:fixed;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);z-index:60;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:center;
  width:min(94vw,460px);padding:.55rem .7rem;border-radius:16px;background:#3b2c4f;color:#fff3dc;box-shadow:0 6px 24px rgba(0,0,0,.35);font-size:.88rem;text-align:center}