/* Perennial – Oberfläche. Pergament, Messing, Moosgrün; Farben aus KONZEPT.md */
:root {
  --ink: #FFF4D6; --paper: #F1E4C0; --paper-ink: #5B4630; --brass: #D9A441; --moss: #5E8F4A; --ribbon: #D93A3A; --deep: #1F2E4F;
  --panel: rgba(31, 46, 79, .94); --btn: rgba(31, 46, 79, .42); --ring: rgba(255, 244, 214, .28);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #3A5788; color: var(--ink); font-family: var(--sans); overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
/* Overlays, die nur zeitweise sichtbar sind, dürfen sonst keine Klicks abfangen (die Regel oben schlägt ihr eigenes pointer-events) */
#ui > .scrim:not(.on), #ui > .endcard:not(.on), #ui > .touch-ui, #ui > .hud { pointer-events: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { position: fixed; inset: 0; margin: 0; display: grid; place-items: center; background: #1F2E4F; color: #FFF4D6; padding: 24px; text-align: center; }
.only-browser { display: inline-flex; }
.standalone .only-browser { display: none !important; }
@media (display-mode: standalone) { .only-browser { display: none !important; } }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---- Knöpfe ---- */
.ibtn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ring); background: var(--btn); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 0; }
.ibtn svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ibtn.small { width: 36px; height: 36px; }
.ibtn .dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--ribbon); border: 2px solid #FFF4D6; animation: blink .7s ease-in-out infinite alternate; }
@keyframes blink { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
.ibtn.blink { animation: blink .5s ease-in-out 6 alternate; }

/* ---- HUD ---- */
.hud { position: fixed; top: calc(10px + var(--safe-t)); left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.hud > * { pointer-events: auto; }
.turnwrap { display: flex; align-items: center; gap: 10px; }
.spiral { width: 96px; height: 96px; filter: drop-shadow(0 1px 3px rgba(20, 30, 60, .5)); pointer-events: none; }
.keybtn { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--brass); background: rgba(31, 46, 79, .55); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 0; }
.keybtn svg { width: 34px; height: 34px; fill: none; stroke: var(--brass); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.keybtn.back svg { transform: scaleX(-1); }
.keybtn .kbd { position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 6px; background: #FFF4D6; color: #1F2E4F; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
body.touch .keybtn .kbd { display: none; }
.keybtn.pulse { animation: keypulse 1.1s ease-in-out infinite; }
@keyframes keypulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, .0); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(217, 164, 65, .35); transform: scale(1.1); } }
.keybtn.on { background: rgba(217, 164, 65, .35); }
/* Spirale: Zeit vor t=-8. locked = blass, hint = golden und pulsierend (nach dem Glockenschlag), open = wie der Rest */
.spiral .sp-pale { stroke: #FFF4D6; stroke-width: 1.6; opacity: .28; }
.spiral .sp-pale.open { stroke-width: 1.9; opacity: .9; }
.spiral .sp-pale.hint { stroke: #FFD54A; stroke-width: 2.6; opacity: 1; animation: sphint 1.1s ease-in-out infinite alternate; }
@keyframes sphint { from { opacity: .45; filter: drop-shadow(0 0 1px rgba(255, 213, 74, .5)); } to { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 213, 74, 1)); } }

/* ---- Titel ---- */
.screen { position: fixed; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.3s ease, visibility 0s 1.3s; }
.screen.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
/* Beim Ausblenden bleibt der Titel 1,3 s lang sichtbar (visibility verzögert), darf aber keine Klicks mehr abfangen (HUD darunter) */
#ui > .screen:not(.on) { pointer-events: none; }
#ui > .screen:not(.on) * { pointer-events: none; }
.title-bg { position: absolute; inset: 0; background: url(img/title.webp) center / cover no-repeat, linear-gradient(180deg, #3A5788 0%, #E89A5C 55%, #FBE9D0 100%); }
.title-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 46, 79, .22), rgba(31, 46, 79, 0) 45%); }
.title-inner { position: absolute; left: 0; top: 0; bottom: 0; width: min(100%, 560px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding: calc(7vh + var(--safe-t)) 0 calc(24px + var(--safe-b)) calc(6vw + var(--safe-l)); gap: 6px; }
.logo { margin: 0; font-weight: 300; font-size: clamp(34px, 6.2vw, 78px); letter-spacing: .24em; text-indent: 0; text-transform: none; color: #FFF4D6; text-shadow: 0 2px 18px rgba(31, 46, 79, .65); }
.tagline { margin: 0 0 22px; font-size: clamp(14px, 2.2vw, 19px); letter-spacing: .14em; color: #FFF4D6; opacity: .9; text-shadow: 0 1px 8px rgba(31, 46, 79, .7); }
.title-ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mainbtn { min-height: 52px; padding: 0 38px; border-radius: 26px; border: 1.5px solid #FFF4D6; background: rgba(255, 244, 214, .16); backdrop-filter: blur(8px); color: #FFF4D6; font-size: 17px; letter-spacing: .12em; text-shadow: 0 1px 6px rgba(31, 46, 79, .5); transition: background .2s, transform .2s; }
.mainbtn:hover { background: rgba(255, 244, 214, .3); transform: translateY(-1px); }
.linkbtn { background: none; border: 0; padding: 8px 10px; font-size: 14px; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 244, 214, .4); align-items: center; color: #FFF4D6; text-shadow: 0 1px 6px rgba(31, 46, 79, .7); }
.keys-hint { margin: 18px 0 0; font-size: 12px; letter-spacing: .05em; opacity: .75; max-width: 280px; text-shadow: 0 1px 6px rgba(31, 46, 79, .8); }
body.touch .keys-hint { display: none; }
.title-foot { position: absolute; left: calc(6vw - 10px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); display: flex; justify-content: flex-start; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 16px; }
.note { margin: 8px 0 0; font-size: 13px; max-width: 300px; }
.seg { display: inline-flex; border: 1px solid var(--ring); border-radius: 999px; overflow: hidden; background: rgba(31, 46, 79, .35); }
.seg button { background: none; border: 0; padding: 6px 12px; font-size: 13px; letter-spacing: .08em; }
.seg button[aria-pressed="true"] { background: #FFF4D6; color: #1F2E4F; }

/* ---- Handbuch ---- */
.book { position: fixed; inset: 0; background: rgba(24, 34, 60, .88); backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.book:not([hidden]) { opacity: 1; }
.book .close { position: absolute; top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
.book .nav { position: absolute; top: 50%; transform: translateY(-50%); }
.book .prev { left: calc(10px + var(--safe-l)); } .book .next { right: calc(10px + var(--safe-r)); }
.bookpages { position: relative; width: min(90vw, 900px); height: min(78vh, 700px); touch-action: pan-y; }
.bpage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(30px) rotate(1.2deg); transition: opacity .3s, transform .35s; pointer-events: none; }
.bpage.cur { opacity: 1; transform: rotate(-1.2deg); pointer-events: auto; }
.bpage.before { transform: translateX(-30px) rotate(-1.2deg); }
.bpage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 6px; box-shadow: 0 12px 38px rgba(0, 0, 0, .5); }
.bpage.empty img, .bpage.noimg img { display: none; }
.bpage.empty::before, .bpage.noimg::before { content: ""; position: absolute; top: 4%; bottom: 4%; left: 50%; aspect-ratio: 3 / 4; transform: translateX(-50%); border-radius: 6px; box-shadow: 0 12px 38px rgba(0, 0, 0, .5); background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(91, 70, 48, .16) 34px 35px), var(--paper); }
.bpage.noimg::after { content: ""; position: absolute; top: 18%; bottom: 18%; left: 50%; aspect-ratio: 1; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%235B4630' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 70C25 40 40 40 50 60S75 80 90 30'/%3E%3Ccircle cx='28' cy='30' r='9'/%3E%3Cpath d='M28 12v-5M28 48v5M10 30H5M46 30h5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .55; }
.bookdots { position: absolute; bottom: calc(18px + var(--safe-b)); display: flex; gap: 10px; }
.bookdots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 244, 214, .3); }
.bookdots i.found { background: rgba(255, 244, 214, .7); } .bookdots i.cur { background: var(--brass); transform: scale(1.3); }

/* ---- Menü ---- */
.scrim { position: fixed; inset: 0; background: rgba(15, 22, 44, .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; width: min(100%, 440px); max-height: 86vh; overflow: auto; transform: translate(-50%, 105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); background: var(--panel); border: 1px solid var(--ring); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 14px 18px calc(20px + var(--safe-b)); }
.sheet.on { transform: translate(-50%, 0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet-head h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid rgba(255, 244, 214, .1); font-size: 15px; }
.row input[type=range] { flex: 1; max-width: 190px; accent-color: var(--brass); }
.item { display: block; width: 100%; text-align: left; background: rgba(255, 244, 214, .08); border: 1px solid rgba(255, 244, 214, .14); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 15px; }
.item:hover { background: rgba(255, 244, 214, .15); }
.item.danger { border-color: rgba(217, 58, 58, .5); }
.newbox { margin-top: 8px; padding: 6px 2px; font-size: 14px; } .btnrow { display: flex; gap: 10px; } .btnrow .item { text-align: center; }
.small { font-size: 12px; opacity: .7; margin: 14px 0 0; }

/* ---- Touch ---- */
.touch-ui { position: fixed; inset: 0; pointer-events: none; display: none; }
body.touch .touch-ui { display: block; }
.touch-ui > * { pointer-events: auto; }
.touch-stick { position: absolute; left: calc(18px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); width: 38vw; max-width: 260px; height: 38vh; max-height: 220px; display: grid; place-items: center; touch-action: none; }
.touch-stick::before { content: ""; width: 112px; height: 112px; border-radius: 50%; border: 1.5px solid var(--ring); background: rgba(31, 46, 79, .25); }
.touch-stick .knob { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 244, 214, .35); border: 1.5px solid var(--ring); }
.touch-btn { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid var(--ring); background: rgba(31, 46, 79, .4); display: grid; place-items: center; padding: 0; touch-action: none; }
.touch-btn svg { width: 36px; height: 36px; fill: none; stroke: #FFF4D6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.touch-btn.jump { right: calc(22px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); }
.touch-btn.plant { right: calc(112px + var(--safe-r)); bottom: calc(60px + var(--safe-b)); width: 64px; height: 64px; background: rgba(94, 143, 74, .55); }

/* ---- Ende, Warnungen ---- */
.endcard { position: fixed; inset: 0; background: #0b1020; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; z-index: 5; }
.endcard.on { opacity: 1; pointer-events: auto; }
.endcard p { margin: 10px 0 0; letter-spacing: .5em; text-indent: .5em; font-size: 15px; opacity: .8; text-transform: uppercase; }
.warnbox { position: fixed; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(31, 46, 79, .9); font-size: 12px; max-width: 90vw; }
@media (max-height: 460px) { .spiral { width: 76px; height: 76px; } .keybtn { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .keybtn.pulse, .ibtn .dot, .spiral .sp-pale.hint { animation: none; } .screen, .screen.on { transition-duration: .01s; } }

@media (max-aspect-ratio: 1/1) { .title-inner { width: 100%; align-items: center; text-align: center; padding: calc(8vh + var(--safe-t)) 16px 0; } .title-ctl { align-items: center; } .logo { letter-spacing: .22em; text-indent: .22em; } .title-foot { left: 0; right: 0; justify-content: center; } .title-shade { background: linear-gradient(180deg, rgba(31, 46, 79, .22), rgba(31, 46, 79, 0) 45%); } }
body.intitle .touch-ui { display: none !important; }

/* ---- Weltkarte (atlas.js): Canvas-Ebenen, Insel-Buttons ---- */
.atlas { position: fixed; inset: 0; background: #E8D9B5; opacity: 0; visibility: hidden; overflow: hidden; touch-action: pan-y; transition: opacity .8s ease, visibility 0s .8s; }
.atlas.on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
/* Unsichtbare Overlays duerfen keine Klicks abfangen (die Regel "#ui > *" oben schlaegt sonst ihr eigenes pointer-events) */
#ui > .atlas:not(.on), #ui > .atlas:not(.on) *, #ui > .endimg:not(.on), #ui > .endimg:not(.on) * { pointer-events: none; }
.atlas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.atlas .afog { filter: blur(6px); transform: scale(1.04); }
.atlas .isl { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; padding: 0; cursor: pointer; }
.atlas .isl.locked { pointer-events: none; }
.atlas .isl:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.atlas .playbtn { position: absolute; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 2px solid #FFF4D6; background: rgba(94, 143, 74, .92); display: grid; place-items: center; padding: 0; box-shadow: 0 3px 12px rgba(40, 30, 10, .45); animation: keypulse 1.3s ease-in-out infinite; }
.atlas .playbtn svg { width: 26px; height: 26px; fill: #FFF4D6; }
.atlas .amenu { position: absolute; top: calc(10px + var(--safe-t)); left: calc(12px + var(--safe-l)); background: rgba(31, 46, 79, .55); }

/* ---- Finale: Endbild (end.webp, sonst Farbverlauf), das Band weht dezent ---- */
.endimg { position: fixed; inset: 0; background: #0b1020; overflow: hidden; opacity: 0; transition: opacity 1.6s ease; z-index: 4; }
.endimg.on { opacity: 1; }
.endimg-pic { position: absolute; inset: -3%; background: url(img/end.webp) center / cover no-repeat, linear-gradient(180deg, #7FC8E8 0%, #FBE9D0 58%, #E8CF9F 100%); animation: endsway 7s ease-in-out infinite alternate; }
@keyframes endsway { from { transform: translate(-.6%, .2%) scale(1.01) rotate(-.1deg); } to { transform: translate(.6%, -.2%) scale(1.03) rotate(.1deg); } }
/* Titel nach dem Durchspielen: title-2.webp, wenn vorhanden (sonst bleibt das erste Bild) */
.screen.finale .title-bg { background: url(img/title-2.webp) center / cover no-repeat, url(img/title.webp) center / cover no-repeat, linear-gradient(180deg, #3A5788 0%, #E89A5C 55%, #FBE9D0 100%); }
@media (prefers-reduced-motion: reduce) { .endimg-pic { animation: none; } .atlas .playbtn { animation: none; } }
body.nolevel .touch-ui { display: none !important; }