:root {
  color-scheme: dark;
  --page: #080a0f;
  --panel: #151923;
  --edge: #ffffff20;
  --ink: #f5f6fa;
  --muted: #b3bbc8;
  --gold: #efc37e;
  --gold-soft: #c9aa77;
  --heading: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; color: var(--ink); font-family: var(--body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button:focus-visible, .verein-home:focus-visible { outline: 2px solid #9ed1ff; outline-offset: 4px; }
button:disabled { opacity: .42; cursor: default; }
.app { width: min(100%, 1336px); margin: auto; padding: 0 32px 30px; }
.mast { min-height: 81px; display: flex; align-items: center; }
.mast img { display: block; flex: none; object-fit: contain; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 999px; background: #ffffff0d; color: var(--ink); font-size: 12px; font-weight: 640; }
.icon-button:hover { background: #253143; border-color: #586579; }
.icon-button svg { width: 20px; height: 20px; flex: none; }
#intro { width: min(100%, 1020px); margin: 0 auto; }
.audio-start {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #ffffff36;
  border-radius: 999px;
  background: #0a101ada;
  color: #e2e9f8;
  font-size: 12px;
}
.audio-start svg { width: 19px; height: 19px; }
.audio-start:hover { background: #253143; }
.gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 23px; border: 1px solid #ffffff60; border-radius: 999px; background: #f3f6ff; color: #101724; font-size: 14px; font-weight: 750; box-shadow: 0 4px 20px #0004; }
.gold:hover { background: #dae6fd; }
.gold:active { transform: translateY(1px); }
.gold svg { width: 19px; height: 19px; }
.guide { margin-top: 13px; border-top: 1px solid var(--edge); }
.guide summary { cursor: pointer; padding: 14px 6px; color: #b9c4d6; font-size: 13px; }
.finder-record { margin: 12px 6px 0; color: #b9c4d6; font-size: 13px; }
.eyebrow { margin: 0; color: #e6bb79; font-size: 13px; font-weight: 690; line-height: 1.35; letter-spacing: .04em; }
.briefing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.briefing article { padding: 16px; background: var(--panel); border: 1px solid var(--edge); border-radius: 17px; }
.briefing h2 { margin: 0 0 4px; font-size: 14px; font-weight: 720; }
.briefing p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.game { width: min(100%, 1060px); margin: auto; }
.hud { display: grid; grid-template-columns: 72px minmax(100px, 1fr) 105px 76px 42px; align-items: center; gap: 17px; margin-bottom: 10px; }
.hud-item { min-width: 0; }
.hud-item span { color: var(--muted); font-weight: 680; font-size: 10px; letter-spacing: .12em; }
.score-block strong, .health-block strong { display: block; margin-top: 1px; font-size: 21px; font-variant-numeric: tabular-nums; }
.health-block strong { color: #f5a491; white-space: nowrap; font-size: 16px; }
.progress-block > div { display: flex; align-items: end; justify-content: space-between; gap: 6px; }
.progress-block span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); letter-spacing: -.01em; font-size: 18px; }
.progress-block strong { flex: none; color: var(--gold); font-size: 10px; font-variant-numeric: tabular-nums; }
progress { display: block; margin-top: 7px; width: 100%; height: 5px; border: 0; border-radius: 10px; overflow: hidden; appearance: none; background: #323d49; color: var(--gold); }
progress::-webkit-progress-bar { background: #323d49; }
progress::-webkit-progress-value { background: var(--gold); }
progress::-moz-progress-bar { background: var(--gold); }
.icon-button { width: 42px; padding: 0; }
.stage { position: relative; width: 100%; height: clamp(335px, calc(100svh - 159px), 710px); overflow: hidden; isolation: isolate; border: 1px solid #46505c; border-radius: 21px; background: #131f2b; }
.stage-scenery, .scenery, #track, .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-scenery { overflow: hidden; }
.scenery { opacity: 0; background-color: #182637; background-position: var(--scene-position, center); background-repeat: no-repeat; background-size: cover; transition: opacity 850ms ease; }
.scenery.active { opacity: 1; }
.chapter-kapellplatz { background-image: linear-gradient(#111a2214, #0f17205c), url("assets/kapellplatz.webp"); --scene-position: 39% 32%; }
.chapter-weinmarkt { background-image: linear-gradient(#0f182519, #111a2255), url("assets/weinmarkt.webp"); --scene-position: 60% 26%; }
.chapter-muehlenplatz { background-image: linear-gradient(#0f182510, #111a2250), url("assets/muehlenplatz.webp"); }
.chapter-egg { background-image: linear-gradient(#19151b10, #111a2254), url("assets/unter-der-egg.webp"); --scene-position: 42% 37%; }
.chapter-kapellbruecke { background-image: linear-gradient(#18151a10, #17131757), url("assets/kapellbruecke-innen.webp"); --scene-position: center 39%; }
.chapter-theaterplatz { background-image: linear-gradient(#121e2810, #121a2860), url("assets/theaterplatz.webp"); --scene-position: 68% 38%; }
.chapter-jesuitenplatz { background-image: linear-gradient(#12203510, #121c2b80), url("assets/jesuitenplatz.webp"); --scene-position: 44% top; }
#track { touch-action: none; user-select: none; display: block; }
.stage-notice, .countdown { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; text-align: center; }
.stage-notice { top: 13px; z-index: 2; padding: 6px 10px; color: #ffe6af; font-size: 12px; font-weight: 750; background: #101620e8; border: 1px solid #d4b17265; border-radius: 20px; white-space: nowrap; }
.stage-notice:empty { display: none; }
.chapter-title {
  position: absolute;
  top: 23%;
  inset-inline: 0;
  z-index: 1;
  padding: 8px 14px;
  opacity: 0;
  color: #fff5e6;
  font: 800 clamp(29px, 6.8vw, 67px)/1.12 var(--heading);
  letter-spacing: -.05em;
  text-align: center;
  text-shadow: 0 2px 12px #000, 0 4px 32px #060913;
  pointer-events: none;
}
.overlay { z-index: 4; display: grid; place-items: center; padding: 13px; background: #0b1018a0; }
.overlay-card { width: min(100%, 410px); max-height: 100%; overflow: auto; text-align: center; border: 1px solid #b1976c70; border-radius: 12px; padding: 22px 18px 12px; background: #131b26f5; box-shadow: 0 12px 65px #0008; }
.overlay-card .eyebrow { justify-content: center; }
.overlay-card h2 { margin: 8px 0 7px; color: #f7dfb7; font: 500 clamp(30px, 5vw, 53px)/1.02 var(--heading); }
.overlay-card p:not(.eyebrow) { margin: 0 auto 13px; max-width: 285px; font-size: 13px; line-height: 1.5; color: #c4cedb; }
.overlay-card .gold { min-height: 44px; }
.text-button { display: block; margin: 3px auto 0; min-height: 38px; padding: 2px 10px; border: 0; background: none; color: #ccd3dc; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.results { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 15px; padding: 9px 0; border-block: 1px solid #445064; }
.results span { display: block; color: #b6c0ce; font-size: 9px; letter-spacing: .11em; }
.results strong { color: #f7d49a; font-size: 17px; }
.balance { min-width: 0; align-self: center; }
.balance > span { color: var(--muted); font-size: 9px; letter-spacing: .03em; font-weight: 700; white-space: nowrap; }
.balance progress { margin-top: 4px; height: 4px; }
.balance progress::-webkit-progress-value { background: #eec378; }
.balance progress::-moz-progress-bar { background: #eec378; }
body.playing { overscroll-behavior: none; }
@media (max-width: 700px) {
  .mast img { width: 88px; height: 42px; }
  .briefing { grid-template-columns: 1fr; gap: 6px; }
  .briefing article { padding: 11px 12px; }
}
@media (orientation: portrait) {
  .chapter-kapellplatz { --scene-position: 24% center; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .mast img { width: 78px; height: 37px; }
  .overlay-card { padding-block: 12px 4px; }
  .overlay-card h2 { font-size: 27px; }
  .results { margin-bottom: 7px; padding-block: 5px; }
}
@media (prefers-reduced-motion: reduce) { .scenery { transition: none; } }
.health-block strong { color: #f2aa97; font-size: 14px; }
.health-block progress { margin-top: 4px; height: 4px; color: #f2a08e; }
.health-block progress::-webkit-progress-value { background: #f2a08e; }
.health-block progress::-moz-progress-bar { background: #f2a08e; }
.countdown {
  top: 12%;
  z-index: 3;
  width: min(88%, 345px);
  padding: 10px 13px 15px;
  border: 1px solid #e0e9ff37;
  border-radius: 19px;
  background: #141c2bea;
  backdrop-filter: blur(12px);
  color: #f5ead5;
  font: 600 13px/1.35 var(--body);
  text-shadow: none;
  box-shadow: 0 10px 40px #0a1017ad;
}
.countdown-number { margin-bottom: 4px; color: var(--gold); font: 600 clamp(33px, 8vw, 62px)/1 var(--heading); }
.countdown p { margin: 6px 0 0; }
.countdown strong { color: var(--gold); }
.stage.arrival { height: clamp(235px, calc(100svh - 245px - env(safe-area-inset-bottom)), 620px); }
.stage.arrival .chapter-title {
  max-width: 24ch;
  margin-inline: auto;
  color: #ffedbd;
  font-size: clamp(29px, 5.5vw, 53px);
  text-wrap: balance;
}
.party-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 9px;
  border: 1px solid #897449;
  border-radius: 10px;
  background: linear-gradient(118deg, #293449, #1d2635 51%, #242933);
}
.party-banner h2 { margin: 3px 0; font: 500 clamp(22px, 4.5vw, 41px)/1 var(--heading); }
.party-banner p:last-child { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.party-actions { flex: none; text-align: center; }
.party-actions .gold { min-height: 43px; padding-inline: 13px; }
.party-actions .text-button { min-height: 29px; }
@media (max-width: 420px) {
  .health-block strong { font-size: 12px; }
  .party-banner { padding: 10px 9px 7px; gap: 6px; }
  .party-banner .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .party-actions .gold { min-height: 40px; font-size: 12px; padding-inline: 8px; }
  .party-actions .text-button { font-size: 10px; padding-inline: 2px; }
}

@media (max-width: 700px), (max-height: 540px) and (orientation: landscape) {
  .app { padding: 0; }
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
    border: 0;
    border-radius: 0;
  }
  .guide { margin: 0 max(17px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(17px, env(safe-area-inset-left)); }
  .guide summary { padding-block: 12px; }
  body.playing { overflow: hidden; }
  body.playing .mast { display: none; }
  .game { position: relative; isolation: isolate; height: 100svh; height: 100dvh; }
  .stage, .stage.arrival { position: absolute; inset: 0; z-index: -1; height: auto; border: 0; border-radius: 0; }
  .stage .audio-start { top: calc(106px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .hud {
    grid-template-columns: minmax(50px, 1fr) minmax(72px, 1.25fr) minmax(45px, .8fr) 42px;
    grid-template-areas: "score balance health pause" "progress progress progress progress";
    gap: 9px 13px;
    margin: 0;
    padding: calc(9px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 16px max(14px, env(safe-area-inset-left));
    background: linear-gradient(#070b13f5, #080d17e0 80%, #080d1700);
  }
  .score-block { grid-area: score; }
  .balance { grid-area: balance; }
  .health-block { grid-area: health; }
  #pause { grid-area: pause; }
  .progress-block { grid-area: progress; }
  .hud-item span { font-size: 10px; }
  .progress-block span { font-size: 19px; }
  .progress-block progress { margin-top: 4px; }
  .score-block strong { font-size: 19px; }
  .stage-notice { top: calc(112px + env(safe-area-inset-top)); }
  .chapter-title { top: max(25%, calc(148px + env(safe-area-inset-top))); font-size: clamp(31px, 9vw, 49px); }
  .countdown { top: max(24%, calc(139px + env(safe-area-inset-top))); }
  .party-banner {
    position: absolute;
    inset: auto max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    margin: 0;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  .hud { grid-template-columns: 57px minmax(100px, 1fr) 82px 54px 42px; grid-template-areas: "score progress balance health pause"; }
  .stage-notice { top: calc(65px + env(safe-area-inset-top)); }
  .stage .audio-start { top: calc(62px + env(safe-area-inset-top)); }
  .chapter-title, .countdown { top: max(27%, calc(76px + env(safe-area-inset-top))); }
}