/* ===== Kräuterjagd im Gesäuse - Styles (v3 expedition) ===== */
:root{
  --cream:#f6efe2; --green-deep:#1d3325; --gold:#c08a3b; --ink:#211c14; --green-mid:#3a5742;
  --cream-80:rgba(246,239,226,0.92); --shadow:0 10px 40px rgba(33,28,20,0.35);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-touch-callout:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden;background:var(--green-deep);color:var(--ink);font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#app{position:fixed;inset:0;width:100%;height:100%;height:100dvh}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none}
.hidden{display:none!important}

.fx-overlay{position:absolute;inset:0;z-index:15;pointer-events:none}
#drunkOverlay{opacity:0;transition:opacity .6s;background:radial-gradient(ellipse at center,transparent 36%,rgba(120,80,160,.3) 100%);will-change:opacity,transform}
#drunkOverlay.on{opacity:1;animation:drunkSway 3.2s ease-in-out infinite}
/* GPU-cheap sway (opacity+transform). NO backdrop-filter - it blurs the whole canvas every frame and tanks FPS. */
@keyframes drunkSway{0%,100%{opacity:.8;transform:scale(1.03) rotate(-0.4deg)}50%{opacity:1;transform:scale(1.07) rotate(0.4deg)}}
#flashOverlay{background:rgba(180,60,40,0);transition:background .08s}
.breakdown li.discount{background:linear-gradient(90deg,rgba(232,181,60,.18),rgba(232,181,60,.06));border-radius:8px;padding:6px 8px;margin-top:4px;color:#8a5a12;font-weight:700}
.breakdown li.discount strong{color:#b5780f;letter-spacing:.5px}
#flashOverlay.on{background:rgba(180,60,40,.42)}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;z-index:20;padding:max(10px,env(safe-area-inset-top)) 12px 10px;color:var(--cream);pointer-events:none}
#hud button{pointer-events:auto}
.hud-row{display:flex;align-items:center;gap:10px}
.hud-top{justify-content:space-between}
.hud-pill{display:flex;align-items:center;gap:6px;background:var(--cream-80);color:var(--ink);border-radius:999px;padding:5px 14px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.pill-ico{font-size:16px}
.daylight{display:flex;align-items:center;gap:6px;flex:1;max-width:230px}
.daylight-ico{font-size:15px}
.daylight-track{flex:1;height:9px;background:rgba(246,239,226,.25);border-radius:999px;overflow:hidden}
.daylight-fill{height:100%;width:100%;background:linear-gradient(90deg,#ffd479,#e8893a);border-radius:999px;transition:width .25s linear}
.daylight-fill.low{background:linear-gradient(90deg,#e8893a,#b4452f)}
.hud-right{display:flex;align-items:center;gap:8px}
.lives{display:flex;align-items:center;gap:2px;font-size:16px;white-space:nowrap}
.life-x{font-weight:800;font-size:14px;color:#fff;margin-left:1px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.score{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.icon-btn{background:rgba(33,28,20,.3);border:none;color:var(--cream);width:36px;height:36px;border-radius:10px;font-size:17px;cursor:pointer}
.minimap{position:absolute;right:12px;top:60px;width:110px;height:110px;border-radius:10px;border:2px solid var(--cream-80);box-shadow:var(--shadow);opacity:.92}

/* action button */
.action-btn{position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:22;
  background:var(--gold);color:#2a1d08;border:none;border-radius:999px;padding:14px 26px;font-family:var(--sans);font-weight:700;font-size:16px;
  box-shadow:var(--shadow);cursor:pointer;animation:popIn .2s ease}
@keyframes popIn{from{transform:translateX(-50%) scale(.7);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
/* fuer NICHT zentrierte Elemente - kein translateX, sonst springen sie von links herein */
@keyframes softIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.action-btn2{bottom:calc(max(26px,env(safe-area-inset-bottom)) + 64px);background:#3a5a3e;color:var(--cream);border:1px solid rgba(216,176,106,.5);font-size:15px;padding:12px 22px}
.action-btn2 img{height:1em;vertical-align:-0.15em}
.action-btn3{bottom:calc(max(26px,env(safe-area-inset-bottom)) + 122px);background:#5a4326;color:var(--cream);border:1px solid rgba(216,176,106,.5);font-size:15px;padding:12px 22px}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translateX(-50%);z-index:21;background:rgba(33,28,20,.8);color:var(--cream);
  padding:8px 15px;border-radius:11px;font-size:13px;font-weight:600;box-shadow:var(--shadow);pointer-events:none;max-width:80%;text-align:center;border:1.5px solid var(--gold);animation:toastIn .25s ease}
.toast.bad{border-color:#d9684a}.toast.ok{border-color:#7aa86a}
@keyframes toastIn{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

.lookback-btn{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 84px);z-index:35;background:rgba(29,51,37,.92);color:var(--cream);border:1px solid rgba(216,176,106,.55);border-radius:999px;font:600 14px var(--sans);padding:10px 18px;box-shadow:var(--shadow);cursor:pointer}
.lookback-btn:active{transform:translateX(-50%) scale(.97)}

/* overlays / panels */
.overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 50% 30%,rgba(29,51,37,.82),rgba(29,51,37,.95));backdrop-filter:blur(3px);overflow-y:auto}
.overlay-clear{position:absolute;inset:0;z-index:42;pointer-events:none}
.overlay-clear button{pointer-events:auto}
.panel{width:100%;max-width:430px;background:var(--cream);border-radius:22px;box-shadow:var(--shadow);padding:22px;text-align:center;border:1px solid rgba(192,138,59,.4);margin:auto}
.brand-logo{max-width:118px;height:auto;margin:0 auto 4px;display:block}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.menu-panel .eyebrow{font-size:14.5px;letter-spacing:.02em;text-transform:none;color:var(--green-deep);font-weight:700;margin:2px 0 0}.menu-panel .eyebrow strong{color:var(--gold)}
.bz-link{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:2px}
.bz-link strong{color:var(--gold)}
.save-confirm{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--green-deep);background:rgba(111,196,111,.14);border:1px solid rgba(111,196,111,.5);border-radius:12px;padding:12px 14px;text-align:center}
.save-confirm .bz-link strong{color:var(--gold)}
.input-need{border-color:#d9534f !important;background:#fff6f5 !important;box-shadow:0 0 0 3px rgba(217,83,79,.16);animation:needPulse 1.4s ease-in-out infinite}
@keyframes needPulse{0%,100%{box-shadow:0 0 0 3px rgba(217,83,79,.16)}50%{box-shadow:0 0 0 4px rgba(217,83,79,.32)}}
.title{font-family:var(--serif);font-size:50px;line-height:.95;color:var(--green-deep);margin:4px 0 2px}
.subtitle{font-size:14px;color:var(--ink);opacity:.85;margin:6px 0 14px}.subtitle strong{color:var(--gold)}
.field-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--green-mid);font-weight:600;margin-bottom:8px}
.hint{font-size:12px;color:var(--ink);opacity:.62;margin-top:12px}

.legend{text-align:left;background:rgba(29,51,37,.05);border-radius:14px;padding:11px 14px;margin-bottom:14px}
.legend-item{display:flex;align-items:center;gap:9px;font-size:13px;padding:3px 0}
.legend-dot{width:14px;height:14px;border-radius:50%;flex:none}
.legend-dot.good{background:#6f9a4f;box-shadow:0 0 0 2px rgba(192,138,59,.5)}
.legend-dot.bad{background:#b6402f;box-shadow:0 0 0 2px rgba(180,40,40,.4)}
.legend-dot.trash{background:#9aa0a6}.legend-dot.boost{background:linear-gradient(90deg,#c0392b,#d99a3a,#5a3a1e)}

.avatar-select,.diff-select{margin-bottom:14px}
.avatar-options{display:flex;gap:14px;justify-content:center}
.avatar-option{display:flex;flex-direction:column;align-items:center;gap:5px;background:#fff;border:3px solid transparent;border-radius:16px;padding:7px 16px;cursor:pointer;font-family:var(--sans);font-weight:600;color:var(--ink)}
.avatar-option.is-selected{border-color:var(--gold);box-shadow:0 4px 14px rgba(192,138,59,.3)}
.avatar-canvas{width:62px;height:76px}
.diff-label{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--green-deep);text-align:center;margin:0 0 7px;letter-spacing:.01em}
.diff-options{display:flex;gap:6px}
.diff-option{flex:1;background:rgba(33,28,20,.06);border:2px solid transparent;border-radius:10px;padding:9px 4px;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--green-mid);cursor:pointer}
.diff-option.is-selected{background:#fff;border-color:var(--gold);color:var(--green-deep)}
.mode-hint{font-size:12px;color:var(--green-mid);margin-top:8px;line-height:1.45;text-align:center}
.mode-detail{font-size:12px;color:var(--green-mid);margin-top:6px;line-height:1.45;text-align:left;background:rgba(33,28,20,.05);border-radius:8px;padding:8px 10px}
.link-btn{background:none;border:none;padding:0;color:var(--gold);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* Spielfigur-Popup vor dem Start */
.avatarpick-panel{text-align:center}
.avatarpick-title{font-family:var(--serif);font-size:26px;color:var(--green-deep);margin:0 0 2px}
.avatarpick-sub{font-size:13px;color:var(--ink);opacity:.8;margin:0 0 16px;line-height:1.45}
.avatar-name-label{display:block;text-align:left;font-size:12.5px;font-weight:700;color:var(--green-deep);margin:16px 0 6px}
.avatar-name-input{width:100%;box-sizing:border-box;padding:12px 14px;border:2px solid rgba(33,28,20,.15);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.avatar-name-input:focus{outline:none;border-color:var(--gold)}
.avatar-name-hint{font-size:12px;color:var(--green-mid);margin:8px 0 16px;line-height:1.4;text-align:left}
.avatar-name-hint strong{color:var(--gold)}
.lbl-opt{font-weight:500;color:var(--green-mid);opacity:.8}
/* Menü-Hero-Grafik */
.hero-wrap{position:relative;margin:0 0 2px}
.hero-art{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 6px 18px rgba(33,28,20,.18)}
.hero-logo{position:absolute;top:8px;left:8px;width:52px;height:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
/* Avatar-Vorschau + Presets */
.avatar-preview{display:block;margin:0 auto 8px;width:150px;height:auto}
.preset-row{display:flex;gap:8px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.preset-btn{background:rgba(33,28,20,.06);border:2px solid transparent;border-radius:10px;padding:8px 14px;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--green-mid);cursor:pointer}
.preset-btn.is-selected{background:#fff;border-color:var(--gold);color:var(--green-deep)}
.custom-toggle{display:inline-block;margin:0 auto 10px;text-align:center}
.custom-panel{background:rgba(33,28,20,.04);border-radius:12px;padding:10px 12px;margin-bottom:6px}
.swatch-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.swatch-label{flex:0 0 62px;text-align:left;font-size:12.5px;font-weight:700;color:var(--green-deep)}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:8px;border:2px solid rgba(0,0,0,.12);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.sw.is-sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(192,138,59,.35)}
.sw-txt{width:auto;min-width:44px;height:30px;background:#fff;font-family:var(--sans);font-weight:700;font-size:12px;color:var(--green-mid)}
.sw-txt.is-sel{color:var(--green-deep)}
.sw-face{width:34px;height:34px;background:#fff;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.sw-face canvas{width:30px;height:30px}
.avatar-consent{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:12px;line-height:1.4;color:var(--ink);margin:10px 0 0;cursor:pointer}
.avatar-consent input{margin-top:2px;flex:0 0 auto}
.avatar-consent a{color:var(--gold)}
.goal-box{background:rgba(29,51,37,.06);border:1px solid rgba(29,51,37,.15);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.45;color:var(--ink);margin-bottom:14px;text-align:left}
.goal-box strong{color:var(--gold)}
.prize-banner{background:linear-gradient(135deg,rgba(192,138,59,.18),rgba(192,138,59,.06));border:1px solid rgba(192,138,59,.5);border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.4;color:var(--ink);margin-bottom:14px}
.prize-banner strong{color:var(--gold)}
.age-note{font-weight:700;color:var(--gold)}
/* ===== Stift Admont library — FULL-SCREEN baroque hall ===== */
#library.overlay{padding:0;align-items:stretch;justify-content:stretch}
.library-panel{
  max-width:none;width:100vw;height:100dvh;min-height:100dvh;border:none;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:0;overflow-y:auto;position:relative;text-align:center;
  /* the ACTUAL Admont Stiftsbibliothek photographed hall */
  background:#2a2018 url('assets/landscape/library.jpg') center/cover no-repeat fixed;
}
/* readability scrim over the photo so text/grid stay legible */
.library-panel::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, rgba(20,14,8,.12) 0%, rgba(20,14,8,.42) 70%, rgba(20,14,8,.6) 100%);}
.lib-floor{display:none}
/* keep content above floor/shelves, centered in the nave */
.lib-entrance,.lib-room,.lib-detail{position:relative;z-index:2;width:100%;max-width:580px;margin:auto;padding:max(26px,4vh) 22px 34px;box-sizing:border-box}
.lib-entrance,.lib-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(26,18,10,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:20px;border:1px solid rgba(231,200,140,.35);box-shadow:0 12px 40px rgba(0,0,0,.4);margin-top:max(28px,6vh);margin-bottom:max(28px,6vh)}
.lib-room{background:rgba(26,18,10,.46);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:20px;border:1px solid rgba(231,200,140,.35);box-shadow:0 12px 40px rgba(0,0,0,.4);margin-top:max(20px,4vh);margin-bottom:max(20px,4vh)}
.lib-title{font-family:var(--serif);font-size:clamp(34px,7vw,52px);color:#fbeccb;line-height:1;margin:6px 0;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.lib-intro{font-size:15px;color:#ecdcc0;margin:6px auto 18px;max-width:440px;line-height:1.5}
#library .eyebrow{color:#eac15f;letter-spacing:.14em;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* entrance hall icon */
.lib-hall{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.lib-shelf{width:52px;height:74px;border-radius:4px;background:repeating-linear-gradient(90deg,#7c4a26 0,#7c4a26 5px,#9a5e30 5px,#9a5e30 9px,#5e3a20 9px,#5e3a20 13px);border:2px solid #f3ead5;box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.3)}
.lib-shelf:nth-child(2){height:86px}
/* room grid */
.lib-room-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;justify-content:center}
.lib-back{background:rgba(255,250,238,.7);border:1px solid #c9aa72;border-radius:10px;font-family:var(--sans);font-weight:600;font-size:14px;color:#7a5a30;cursor:pointer;padding:8px 12px}
.lib-back:active{transform:scale(.96)}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px;margin-bottom:14px}
@media(min-width:620px){.lib-grid{grid-template-columns:repeat(4,1fr)}}
.lib-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,252,244,.82);border:1px solid #cbad78;border-radius:12px;padding:10px 4px 8px;cursor:pointer;transition:transform .1s,box-shadow .15s;box-shadow:0 2px 5px rgba(80,55,25,.18)}
.lib-cell:hover{box-shadow:0 5px 14px rgba(80,55,25,.3)}.lib-cell:active{transform:scale(.96)}
.lib-cell-canvas{width:62px;height:62px}
.lib-cell-name{font-family:var(--serif);font-weight:700;font-size:13px;color:#4a3320;line-height:1.1;text-align:center}
.lib-cell-tick{display:none;position:absolute;top:5px;right:6px;width:20px;height:20px;border-radius:50%;background:#3f8a49;color:#fff;font-size:13px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.lib-cell.collected{background:rgba(228,222,210,.7);border-color:#b7ac93;box-shadow:none}
.lib-cell.collected .lib-cell-canvas{filter:grayscale(1) opacity(.42)}
.lib-cell.collected .lib-cell-name{color:#8a7d68}
.lib-cell.collected .lib-cell-tick{display:block}
.lib-count{font-family:var(--serif);font-weight:700;font-size:15px;color:#d9c79a;width:100%;text-align:center;margin-top:-2px}
.lb-delete{font-size:13px;opacity:.72;color:#e0736a;border-color:rgba(224,115,106,.35);padding-top:8px;padding-bottom:8px}
.lb-delete:hover{opacity:1}
.record-banner{position:fixed;left:50%;top:20%;transform:translate(-50%,-14px) scale(.85);z-index:210;pointer-events:none;text-align:center;opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.3,.4,1)}
.record-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
.record-banner .rb-head{font-family:var(--serif,"Cormorant Garamond",serif);font-weight:700;font-size:34px;color:#f3e6c8;text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 22px rgba(232,181,60,.45);white-space:nowrap}
.record-banner .rb-sub{font-weight:700;font-size:15px;color:#fff;margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.record-banner.big .rb-head{font-size:46px;color:#ffe08a;text-shadow:0 2px 14px rgba(0,0,0,.6),0 0 30px rgba(232,181,60,.7)}
.record-banner.big .rb-sub{font-size:17px}
@media(max-width:480px){.record-banner .rb-head{font-size:28px}.record-banner.big .rb-head{font-size:34px}}
.mute-fixed{position:fixed;top:calc(max(10px,env(safe-area-inset-top,0px)) + 82px);left:12px;z-index:80;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(29,51,37,.55);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(2px)}
.mute-fixed:active{transform:scale(.92)}
/* ===== Vollbild-Rekord-Feier ===== */
.rec-ov{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 42%, rgba(30,52,37,.86), rgba(10,17,12,.96));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s ease;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rec-ov.show{opacity:1}
.rec-ov.hide{opacity:0}
.rec-rays{position:absolute;left:50%;top:42%;width:200vmax;height:200vmax;transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease .1s;
  background:repeating-conic-gradient(from 0deg, var(--rec-accent,#e8b53c) 0deg 0.6deg, transparent 0.6deg 9deg);mix-blend-mode:screen;filter:opacity(.16);animation:rec-spin 22s linear infinite}
.rec-ov.show .rec-rays{opacity:1}
@keyframes rec-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.rec-card{position:relative;text-align:center;color:#f6efe2;padding:24px;transform:scale(.6);opacity:0}
.rec-ov.show .rec-card{animation:rec-pop .6s cubic-bezier(.2,1.35,.4,1) forwards}
@keyframes rec-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
.rec-badge{font-size:96px;line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.55));animation:rec-bob 2.4s ease-in-out infinite}
@keyframes rec-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(5deg)}}
.rec-kicker{margin-top:10px;font-weight:800;letter-spacing:.24em;font-size:13px;color:var(--rec-accent,#e8b53c);text-shadow:0 0 14px color-mix(in srgb, var(--rec-accent,#e8b53c) 60%, transparent)}
.rec-head{font-family:var(--serif,"Cormorant Garamond",serif);font-weight:700;font-size:46px;line-height:1.02;margin:4px 0 2px;
  background:linear-gradient(180deg,#fff 0%,var(--rec-accent,#e8b53c) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px color-mix(in srgb, var(--rec-accent,#e8b53c) 45%, transparent))}
.rec-score{font-family:var(--sans,Inter,sans-serif);font-weight:800;font-size:66px;line-height:1;margin:8px 0 2px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 6px 26px rgba(0,0,0,.55)}
.rec-sub{font-size:15px;opacity:.9;max-width:300px;margin:2px auto 0;line-height:1.4}
.rec-tap{margin-top:24px;font-size:12px;letter-spacing:.08em;opacity:.5;animation:rec-blink 1.6s ease-in-out infinite}
@keyframes rec-blink{0%,100%{opacity:.22}50%{opacity:.7}}
.rec-ov.big .rec-badge{font-size:124px}
.rec-ov.big .rec-head{font-size:56px}
.rec-ov.big .rec-score{font-size:80px}
@media(max-width:430px){.rec-badge{font-size:82px}.rec-ov.big .rec-badge{font-size:104px}.rec-head{font-size:38px}.rec-ov.big .rec-head{font-size:44px}.rec-score{font-size:56px}.rec-ov.big .rec-score{font-size:64px}}
#muteBtn{display:none}
/* Cookie-Consent-Banner - schlanke einzeilige Leiste, verdeckt den CTA nicht */
#cookieBanner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(20,34,25,.94);color:#f6efe2;border-top:1px solid rgba(255,255,255,.12);padding:calc(env(safe-area-inset-bottom,0px) + 7px) 12px 7px;backdrop-filter:blur(4px)}
#cookieBanner .cb-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:nowrap}
#cookieBanner p{margin:0;font-size:12px;line-height:1.35;opacity:.9;flex:1;min-width:0}
#cookieBanner a{color:#e8c06a;text-decoration:underline;white-space:nowrap}
#cookieBanner .cb-btns{display:flex;gap:7px;flex:0 0 auto}
#cookieBanner button{font:inherit;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;white-space:nowrap;-webkit-tap-highlight-color:transparent}
#cbDeny{background:transparent;color:#f6efe2;border-color:rgba(255,255,255,.28)}
#cbAccept{background:#b6863b;color:#fff}
#cbAccept:active,#cbDeny:active{transform:scale(.96)}
/* detail */
.lib-detail{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:100dvh;justify-content:center}
.lib-detail .lib-back{align-self:center;margin-bottom:8px}
.lib-detail-canvas{width:170px;height:155px;margin:6px 0}
.lib-lore-big{font-size:17px;color:#f1e6d0;line-height:1.55;max-width:420px;margin:10px auto 6px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
#libShowMap:disabled{opacity:.5;cursor:default}
.library-panel .btn{max-width:420px;margin-left:auto;margin-right:auto}

.btn{display:block;width:100%;font-family:var(--sans);font-weight:600;font-size:16px;border:none;border-radius:14px;padding:14px 18px;cursor:pointer;margin-top:10px;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green-deep);color:var(--cream)}.btn-primary:hover{filter:brightness(1.12)}
.btn-gold{background:var(--gold);color:#2a1d08}.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--green-deep);border:2px solid rgba(29,51,37,.25)}
/* Menue-Hierarchie: EIN grosser CTA, darunter ein dezenter Link, dann zwei ruhige Sekundaer-Buttons */
.btn-hero{font-size:18px;font-weight:800;padding:17px 18px;margin-top:14px;box-shadow:0 4px 0 rgba(20,40,26,.3),0 8px 22px rgba(29,51,37,.25)}
.btn-hero:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(20,40,26,.3),0 4px 12px rgba(29,51,37,.2)}
.personalize-link{display:block;width:100%;background:none;border:none;margin:9px 0 2px;padding:4px;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--green-mid);opacity:.75;text-decoration:none}
.personalize-link:hover{opacity:1;color:var(--gold)}
.menu-secondary{display:flex;gap:9px;margin-top:12px}
.menu-secondary .btn{margin-top:0;flex:1;font-size:14px;font-weight:600;padding:12px 8px;border-width:1.5px;opacity:.9}
.feedback-btn{text-decoration:none;text-align:center;box-sizing:border-box;color:#2f7a3a;border-color:rgba(47,122,58,.4);margin-top:14px}
/* over the busy library photo a transparent green ghost button is unreadable → give it a dark backing + cream text */
.library-panel .btn-ghost{background:rgba(20,28,20,.6);color:#ecdcc0;border-color:rgba(236,220,192,.45);backdrop-filter:blur(2px)}
/* ===== Spielanleitung (game instructions) ===== */
.howto-panel{max-width:560px;text-align:left;max-height:88dvh;display:flex;flex-direction:column;padding-bottom:14px}
.howto-title{text-align:center;margin:2px 0 10px;font-size:26px;color:var(--forest,#2d5a3d)}
.howto-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:6px;margin-bottom:12px;flex:1 1 auto}
.howto-body h4{margin:14px 0 4px;font-size:16px;color:var(--gold,#a9772b);border-bottom:1px solid rgba(169,119,43,.25);padding-bottom:3px}
.howto-body h4:first-child{margin-top:2px}
.howto-body p{margin:4px 0;line-height:1.5;font-size:14.5px}
.howto-body ul,.howto-body ol{margin:4px 0 4px;padding-left:20px}
.howto-body li{margin:3px 0;line-height:1.45;font-size:14.5px}
.howto-body strong{color:#2d3a2d}
.howto-panel #howtoClose{margin-top:2px}
/* in-page desktop share popover (branded, never touches the OS share sheet) */
.share-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(15,22,18,.74);backdrop-filter:blur(4px);padding:16px}
.share-card{background:#f7f0e3;border:2px solid var(--gold);border-radius:20px;padding:18px;max-width:340px;width:100%;box-shadow:0 18px 55px rgba(0,0,0,.45);text-align:center}
.share-card h3{margin:0 0 12px;font-family:var(--serif);color:var(--green-deep);font-size:21px}
.share-card img{width:100%;max-height:300px;object-fit:contain;border-radius:12px;margin-bottom:14px;background:#26331f}
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-btns .btn{margin:0;font-size:14px;padding:11px 8px;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px}
.share-full{grid-column:1 / -1}
.share-wa{background:#25D366;color:#fff}.share-fb{background:#1877F2;color:#fff}.share-x{background:#111;color:#fff}
.share-hint{font-size:12.5px;opacity:.8;text-align:center;margin:8px 4px 10px;line-height:1.4}
.share-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:#fff;border:none}
.share-wa:hover,.share-ig:hover,.share-fb:hover{filter:brightness(1.08)}

/* inspection */
.inspect-panel{max-width:360px}
.inspect-plant{width:200px;height:164px;margin:6px auto;display:block}
.inspect-name{font-family:var(--serif);font-size:26px;color:var(--green-deep);margin:2px 0 8px}
.inspect-trait{display:flex;align-items:center;gap:10px;text-align:left;background:rgba(29,51,37,.05);border-radius:12px;padding:10px 12px;margin-bottom:6px}
#inspectTrait{width:54px;height:54px;flex:none}
.inspect-clue{font-size:13px;line-height:1.4;color:var(--ink)}
.inspect-clue .cmp{display:block;margin:3px 0;line-height:1.34}
.inspect-clue .cmp.good{color:#3a7a3a}
.inspect-clue .cmp.bad{color:#b4452f}
.inspect-clue .cmp.tip{color:var(--green-mid);font-style:italic;margin-top:5px}
.inspect-clue .cmp b{font-weight:700}
.inspect-actions{display:flex;gap:10px;margin-top:12px}.inspect-actions .btn{margin-top:0}
.finale-next{position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;min-width:200px;margin:0;animation:popIn .4s ease}

/* dialog (talk to animals) */
.dialog-panel{max-width:390px}
.dialog-portrait{width:84px;height:84px;margin:0 auto 2px;display:block}
.dialog-name{font-family:var(--serif);font-size:27px;color:var(--green-deep);margin:2px 0 2px}
.dialog-trait{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin:0 0 8px}
.dialog-text{font-size:14.5px;line-height:1.5;color:var(--ink);min-height:92px;max-height:38vh;overflow-y:auto;background:rgba(29,51,37,.05);border-radius:12px;padding:13px 15px;text-align:left;white-space:pre-line}
.dialog-tones{display:flex;gap:6px;margin:8px 0}
.tone-btn{flex:1;background:rgba(33,28,20,.06);border:2px solid transparent;border-radius:10px;padding:9px 4px;font-family:var(--sans);font-weight:600;font-size:12px;color:var(--green-mid);cursor:pointer;line-height:1.2}
.tone-btn:hover{border-color:var(--gold)}.tone-btn:active{transform:scale(.97)}
.dialog-extra{display:flex;gap:8px;margin-bottom:2px}.dialog-extra .btn{margin-top:0}

/* gameover */
.final-score-wrap{display:flex;flex-direction:column;margin:10px 0 4px}
.final-score-label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--green-mid)}
.final-score{font-family:var(--serif);font-size:60px;font-weight:700;color:var(--gold);line-height:1}
.highscore-badge{display:inline-block;margin:6px auto 0;background:var(--gold);color:#2a1d08;font-weight:700;padding:6px 16px;border-radius:999px;animation:softIn .28s ease-out both}
.voucher-card{margin:12px 0;padding:12px 14px;background:linear-gradient(135deg,rgba(192,138,59,.18),rgba(29,51,37,.06));border:1.5px dashed var(--gold);border-radius:14px;animation:softIn .28s ease-out both}
.voucher-head{font-weight:800;color:var(--green-deep);font-size:15px}
.voucher-sub{font-size:12.5px;color:rgba(33,28,20,.75);margin:4px 0 8px}
.voucher-coderow{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.voucher-coderow code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:18px;letter-spacing:1px;color:#2a1d08;background:#fff;border:1px solid rgba(192,138,59,.5);border-radius:8px;padding:6px 12px;user-select:all}
.voucher-coderow .btn{padding:8px 14px;font-size:13px}
.breakdown{list-style:none;text-align:left;margin:14px 0 4px;border-top:1px solid rgba(33,28,20,.12);padding-top:12px}
.breakdown li{display:flex;justify-content:space-between;font-size:14px;padding:4px 2px}
.breakdown li span:last-child{font-weight:700;font-variant-numeric:tabular-nums}.breakdown li.muted{opacity:.6}
.score-form{margin-top:16px;text-align:left;border-top:1px solid rgba(33,28,20,.12);padding-top:16px}
/* prominent, hard-to-miss save-your-score card */
.save-card{margin-top:14px;text-align:center;background:linear-gradient(180deg,#fff8e8,#fbeecd);border:2px solid var(--gold,#c08a3b);border-radius:16px;padding:16px 14px 14px;box-shadow:0 4px 16px rgba(120,90,40,.16)}
.save-cta-head{font-family:var(--serif,'Cormorant Garamond',serif);font-size:22px;font-weight:700;color:var(--green-deep,#264f34);margin:0 0 4px}
.save-cta-sub{font-size:13px;line-height:1.45;color:#5a4a30;margin:0 0 4px}
.save-card .score-form{margin-top:12px;border-top:none;padding-top:0}
.btn-save{width:100%;font-size:16px;font-weight:800;padding:14px;margin-top:4px;box-shadow:0 3px 0 rgba(20,40,26,.35)}
.btn-save:hover{filter:brightness(1.06)}
.input{width:100%;font-family:var(--sans);font-size:15px;padding:12px 14px;margin-bottom:10px;border:1.5px solid rgba(33,28,20,.2);border-radius:10px;background:#fff;color:var(--ink)}
.input:focus{outline:none;border-color:var(--gold)}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.4;margin-bottom:4px}
.checkbox input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--gold)}.checkbox a{color:var(--gold)}
.form-status{font-size:13px;margin-top:8px;min-height:18px;text-align:center;font-weight:600}.form-status.ok{color:var(--green-mid)}.form-status.err{color:#b4452f}
.cta-card{margin-top:16px;padding:16px;background:linear-gradient(135deg,rgba(192,138,59,.14),rgba(29,51,37,.06));border:1px solid rgba(192,138,59,.4);border-radius:14px;text-align:center}
.cta-card p{font-family:var(--serif);font-size:18px;color:var(--green-deep);margin-bottom:10px}.cta-card strong{color:var(--gold)}
.gameover-actions{margin-top:16px;display:flex;gap:10px}.gameover-actions .btn{margin-top:0}

/* leaderboard */
.lb-title{font-family:var(--serif);font-size:34px;color:var(--green-deep);margin-bottom:14px}
.tabs{display:flex;gap:6px;background:rgba(33,28,20,.08);padding:4px;border-radius:12px;margin-bottom:14px}
.tab{flex:1;border:none;background:transparent;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--green-mid);padding:9px 4px;border-radius:9px}
.tab.is-active{background:#fff;color:var(--green-deep);box-shadow:0 2px 6px rgba(33,28,20,.1)}
.lb-list{list-style:none;text-align:left;max-height:46vh;overflow-y:auto;margin-bottom:14px}
.lb-list li{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid rgba(33,28,20,.08);font-size:15px}
.lb-rank{font-family:var(--serif);font-weight:700;font-size:18px;color:#1d2b20;width:34px;flex:none;text-align:center}
.lb-rank.medal{font-family:inherit;font-size:22px;line-height:1}
.lb-podium .lb-name,.lb-podium .lb-score{font-weight:800}
.lb-p1 .lb-name,.lb-p1 .lb-score{color:#b8860b}
.lb-p2 .lb-name,.lb-p2 .lb-score{color:#727a86}
.lb-p3 .lb-name,.lb-p3 .lb-score{color:#a76a2c}
.lb-p1{background:linear-gradient(90deg,rgba(214,175,64,.16),rgba(214,175,64,0))}
.lb-p2{background:linear-gradient(90deg,rgba(150,150,160,.14),rgba(150,150,160,0))}
.lb-p3{background:linear-gradient(90deg,rgba(180,120,70,.14),rgba(180,120,70,0))}
/* your own score pinned at the bottom when it's outside the visible top-50 */
.lb-gap{text-align:center;opacity:.4;letter-spacing:4px;padding:2px 0 4px;font-weight:700}
.lb-me{background:linear-gradient(90deg,rgba(58,110,165,.18),rgba(58,110,165,.04));border:1.5px dashed rgba(58,110,165,.5);border-radius:10px;margin-top:2px}
.lb-me .lb-rank,.lb-me .lb-name,.lb-me .lb-score{color:#2f6b9a;font-weight:800}
/* all-time champion stands out far more than the daily/month #1 */
.lb-champion{background:linear-gradient(90deg,rgba(214,175,64,.34),rgba(214,175,64,.08));border:1.5px solid rgba(214,175,64,.6);border-radius:12px;box-shadow:0 3px 14px rgba(184,134,11,.28);padding-top:4px;padding-bottom:4px;margin:2px 0}
.lb-champion .lb-rank.medal{font-size:26px;filter:drop-shadow(0 1px 2px rgba(120,80,0,.4))}
.lb-champion .lb-name,.lb-champion .lb-score{color:#9a6c07;font-size:17px}
.lb-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-score{font-weight:700;font-variant-numeric:tabular-nums;color:var(--green-deep)}
.lb-empty{justify-content:center;color:var(--ink);opacity:.55;font-style:italic}
@media (min-width:600px){.title{font-size:60px}}
@media (prefers-reduced-motion:reduce){#drunkOverlay.on{animation:none}}

/* ===== mobile text & popup safety (no cut-off) ===== */
.panel,.toast,.dialog-text,.inspect-clue,.mode-hint,.goal-box,.breakdown li,.lb-list li{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.menu-panel{display:flex;flex-direction:column}
/* keyboard hint chips on the inspection buttons (desktop only) */
.kbd{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:5px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);font-size:11px;font-weight:700;vertical-align:middle;line-height:1.4}
.btn-ghost .kbd{background:rgba(33,28,20,.1);border-color:rgba(33,28,20,.28);color:var(--green-deep)}
@media (pointer:coarse){ .kbd{display:none} }
/* collapsible save/leaderboard on the death screen */
.save-details{margin-top:14px;text-align:left;border-top:1px solid rgba(33,28,20,.12);padding-top:6px}
.save-summary{cursor:pointer;list-style:none;text-align:center;font-weight:600;font-size:14px;color:var(--green-mid);background:rgba(33,28,20,.05);border-radius:10px;padding:11px 6px;margin-top:6px}
.save-summary::-webkit-details-marker{display:none}
.save-details[open] .save-summary{color:var(--green-deep);margin-bottom:6px}
.save-details .score-form{border-top:none;padding-top:8px}
@media (max-height:780px){
  .panel{padding:16px;border-radius:18px}
  .title{font-size:42px}
  .subtitle{font-size:13px;margin-bottom:10px}
  .avatar-canvas{width:54px;height:66px}
  .avatar-option{padding:6px 14px}
  .prize-banner{padding:9px 12px;font-size:12.5px;margin-bottom:10px}
  .btn{padding:12px 16px;font-size:15px;margin-top:8px}
  .inspect-plant{width:160px;height:128px}
  .inspect-name{font-size:22px}
  .dialog-text{min-height:64px;max-height:34vh}
  .final-score{font-size:48px}
}
@media (max-width:380px){
  .panel{padding:14px}
  .title{font-size:36px}
  .subtitle{font-size:12.5px}
  .toast{font-size:13px;padding:9px 13px;max-width:92%}
  .hud-pill{padding:4px 10px;font-size:13px}
  .pill-ico{font-size:14px}
  .score{font-size:17px;min-width:40px}
  .daylight{max-width:120px}
  .lives{font-size:14px}
  .minimap{width:92px;height:92px;top:54px}
  .inspect-actions{gap:8px}
  .btn{font-size:14.5px;padding:12px 14px}
  .action-btn{font-size:15px;padding:12px 22px}
}