/* ===== 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}}

/* 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}
.title{font-family:var(--serif);font-size:50px;line-height:.95;color:var(--green-deep);margin:4px 0}
.subtitle{font-size:14px;color:var(--ink);opacity:.85;margin-bottom: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-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:left}
.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{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}
/* 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)}

/* 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:popIn .4s ease}
.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:popIn .4s ease}
.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}
.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:var(--gold);width:32px;flex:none;text-align:center}.lb-rank.top{color:var(--green-deep)}
.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}
}