:root {
  --bg: #090b0e;
  --panel: #11151a;
  --panel-2: #171c22;
  --line: rgba(231, 225, 208, .13);
  --line-strong: rgba(231, 225, 208, .24);
  --text: #eee9db;
  --muted: #aaa698;
  --accent: #c87845;
  --accent-2: #e0a16f;
  --danger: #b84d4d;
  --ok: #86a884;
  --shadow: 0 28px 80px rgba(0,0,0,.38);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(200,120,69,.15), transparent 36%),
    radial-gradient(circle at 100% 20%, rgba(79,94,110,.11), transparent 30%),
    linear-gradient(180deg, #0d1014 0%, #080a0d 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
a { color: inherit; text-decoration: none; }

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
}

.hidden { display: none !important; }

.app-shell {
  position: relative; z-index: 1; width: min(100%, 680px); margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(94px + env(safe-area-inset-bottom));
}

.game-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 2px 16px;
}

.brand-block, .brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--accent-2); font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.brand-mark.large { width: 54px; height: 54px; font-size: 1.1rem; }
.brand { font-size: .78rem; letter-spacing: .18em; font-weight: 800; }
.case-title { margin-top: 3px; color: var(--muted); font-size: .72rem; letter-spacing: .09em; }

.icon-button {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); color: var(--text);
  background: rgba(255,255,255,.025); font-size: 1.15rem;
}
.icon-button:active { transform: scale(.98); }

.progress-area { margin-bottom: 14px; padding: 12px 2px 2px; }
.progress-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.progress-row strong { display: block; margin-top: 4px; font-size: .88rem; font-weight: 750; }
.micro-label, .eyebrow { color: var(--accent-2); font-size: .64rem; font-weight: 800; letter-spacing: .16em; }
.progress-track { height: 4px; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.07); }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .45s ease; }
.sync-state { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .62rem; letter-spacing: .12em; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px rgba(134,168,132,.55); }
.sync-dot.busy { background: var(--accent-2); animation: pulse 1s infinite; }
.sync-dot.error { background: var(--danger); box-shadow: 0 0 12px rgba(184,77,77,.5); }

.stage { min-height: 420px; }
.boot-screen { min-height: 55vh; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--muted); }
.boot-ring { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.08); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }

.case-card, .onboarding-card, .monitor-card {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(24,29,35,.96), rgba(14,18,22,.98));
  box-shadow: var(--shadow);
}
.case-card::before, .onboarding-card::before, .monitor-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,161,111,.65), transparent);
}
.case-card { padding: 24px 20px 22px; }
.onboarding-card { margin-top: 5vh; padding: 28px 20px 24px; }

.case-stamp {
  display: inline-block; margin: 26px 0 14px; padding: 6px 8px; transform: rotate(-1deg);
  border: 1px solid rgba(200,120,69,.45); color: var(--accent-2); font-size: .62rem; font-weight: 800; letter-spacing: .13em;
}
.onboarding-card h1, .case-card h1, .monitor-card h1 { margin: 8px 0 12px; line-height: 1.03; letter-spacing: -.035em; font-size: clamp(2rem, 8vw, 3.25rem); }
.lede { color: #c9c4b7; line-height: 1.62; font-size: 1rem; }

.scene-head { margin-bottom: 18px; }
.scene-head h1 { margin-top: 9px; }
.location-chip {
  display: inline-flex; margin-top: 12px; padding: 7px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: #c9c5b9; background: rgba(255,255,255,.025); font-size: .72rem; letter-spacing: .04em;
}
.body-copy { color: #cec9bc; line-height: 1.68; }
.body-copy p { margin: 0 0 12px; }
.body-copy p:last-child { margin-bottom: 0; }

.callout, .alert, .research-badge, .rule-strip, .coordinate-box, .route-visual {
  margin: 20px 0; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 13px;
}
.callout { padding: 16px; line-height: 1.55; }
.callout span { display: block; margin-bottom: 7px; color: var(--accent-2); font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.rule-strip { display: grid; gap: 8px; padding: 13px; color: var(--muted); font-size: .72rem; }
.rule-strip span { color: var(--accent-2); font-weight: 900; margin-right: 5px; }
.research-badge { display: inline-block; padding: 8px 10px; margin-top: 0; color: var(--accent-2); font-size: .67rem; font-weight: 800; letter-spacing: .1em; }
.alert { padding: 13px 14px; line-height: 1.5; font-size: .84rem; }
.alert.error { border-color: rgba(184,77,77,.45); color: #f1b2b2; background: rgba(184,77,77,.08); }
.alert.warning { border-color: rgba(200,120,69,.42); color: #efc39f; background: rgba(200,120,69,.08); }

.stack-form, .answer-form { display: grid; gap: 14px; margin-top: 22px; }
.stack-form label, .answer-form label { display: grid; gap: 8px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .05em; }
input {
  width: 100%; min-height: 53px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  outline: none; color: var(--text); background: #0b0e12; font-size: 1rem;
}
input:focus { border-color: rgba(224,161,111,.7); box-shadow: 0 0 0 3px rgba(200,120,69,.09); }
.form-note, .muted { color: var(--muted); font-size: .77rem; line-height: 1.5; }

.primary, .secondary, .ghost-button, .danger-button {
  min-height: 52px; padding: 0 16px; border-radius: 12px; font-weight: 800; letter-spacing: .02em;
}
.primary { border: 1px solid #d79162; color: #17100a; background: linear-gradient(180deg, #e0a16f, #c97846); box-shadow: 0 10px 28px rgba(200,120,69,.16); }
.primary:active { transform: translateY(1px); }
.secondary { display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text); background: rgba(255,255,255,.04); }
.ghost-button { border: 1px solid var(--line); color: #cbc6ba; background: transparent; }
.danger-button { border: 1px solid rgba(184,77,77,.35); color: #e5a4a4; background: rgba(184,77,77,.06); }
.wide { width: 100%; }

.tab-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(0,0,0,.2); }
.tab { min-height: 42px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 800; }
.tab.active { color: var(--text); background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.tab-panel { margin-top: 8px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.feature-grid div { padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: rgba(255,255,255,.018); }
.feature-grid strong, .feature-grid span { display: block; }
.feature-grid strong { font-size: 1rem; }
.feature-grid span { margin-top: 4px; color: var(--muted); font-size: .63rem; }

.unknown-target { display: flex; gap: 8px; align-items: center; margin: 2px 0 20px; padding: 14px; border: 1px dashed rgba(224,161,111,.34); border-radius: 13px; }
.unknown-target span { margin-right: auto; color: var(--muted); font-size: .63rem; letter-spacing: .12em; }
.unknown-target strong { display: grid; place-items: center; width: 27px; height: 31px; border-radius: 6px; background: #0a0d10; color: var(--accent-2); }

.feedback { min-height: 0; margin-top: 12px; font-size: .86rem; line-height: 1.5; }
.feedback.ok { min-height: 42px; padding: 11px 12px; border-radius: 10px; color: #bdd4ba; background: rgba(134,168,132,.08); border: 1px solid rgba(134,168,132,.22); }
.feedback.bad { min-height: 42px; padding: 11px 12px; border-radius: 10px; color: #e1a2a2; background: rgba(184,77,77,.08); border: 1px solid rgba(184,77,77,.22); }

.hint-zone { display: grid; gap: 9px; margin-top: 18px; }
.hint-card { padding: 13px 14px; border-left: 2px solid var(--accent); background: rgba(200,120,69,.055); border-radius: 0 10px 10px 0; }
.hint-card span { color: var(--accent-2); font-size: .6rem; font-weight: 800; letter-spacing: .13em; }
.hint-card p { margin: 7px 0 0; color: #d0cabd; line-height: 1.5; font-size: .84rem; }

.audio-panel { margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0a0d10; }
.audio-display > span { display: block; margin-bottom: 11px; color: var(--muted); font-size: .6rem; letter-spacing: .14em; }
.wave-bars { height: 52px; display: flex; align-items: center; gap: 3px; margin-bottom: 14px; }
.wave-bars i { flex: 1; height: var(--h); min-height: 6px; max-height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--accent-2), rgba(200,120,69,.25)); opacity: .72; }
.audio-panel small { display: block; margin-top: 8px; color: var(--muted); font-size: .66rem; text-align: center; }

.cipher-block { margin: 22px 0; padding: 15px; border: 1px solid rgba(200,120,69,.25); border-radius: 12px; background: #090c0f; }
.cipher-block span { display: block; margin-bottom: 10px; color: var(--accent-2); font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.cipher-block code { display: block; color: #d9d2c2; font-size: .8rem; line-height: 1.7; word-break: break-word; letter-spacing: .06em; }
.decoder-panel { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 9px; }
.inline-form .secondary { min-width: 118px; }
.decoded-output { margin-top: 9px; padding: 14px; border: 1px solid rgba(134,168,132,.26); border-radius: 10px; background: rgba(134,168,132,.055); }
.decoded-output span { color: #a8c2a6; font-size: .61rem; font-weight: 800; letter-spacing: .12em; }
.decoded-output p { margin: 8px 0 0; line-height: 1.6; color: #d8d4c7; }

.route-visual { display: flex; align-items: center; gap: 12px; padding: 15px; }
.route-pulse { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(224,161,111,.45); position: relative; }
.route-pulse::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px rgba(200,120,69,.4); }
.route-visual strong { display: block; margin-top: 4px; font-size: .88rem; }
.nav-link { margin-bottom: 9px; }

.scan-box { position: relative; overflow: hidden; margin: 24px 0 18px; padding: 22px 16px; border: 1px solid rgba(200,120,69,.42); border-radius: 14px; background: #090c0f; text-align: center; }
.scan-box > span, .scan-box small { display: block; color: var(--accent-2); font-size: .62rem; letter-spacing: .14em; }
.scan-box strong { display: block; margin: 15px 0 10px; font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: .04em; }
.scan-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); animation: scan 2.3s infinite; }

.extract-grid { margin: 22px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.extract-row { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); }
.extract-row:last-child { border-bottom: 0; }
.extract-row span { color: var(--muted); text-align: center; font-size: .68rem; }
.extract-row strong { padding: 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; font-size: .82rem; }
.extract-row b { display: grid; place-items: center; height: 100%; border-left: 1px solid var(--line); color: var(--accent-2); }

.coordinate-box { padding: 20px 14px; text-align: center; background: #090c0f; }
.coordinate-box span, .coordinate-box small { display: block; }
.coordinate-box span { color: var(--accent-2); font-size: .63rem; font-weight: 800; letter-spacing: .14em; }
.coordinate-box strong { display: block; margin: 14px 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.08rem; letter-spacing: .06em; }
.coordinate-box small { color: var(--muted); }

.finale-card { text-align: center; padding-top: 30px; }
.finale-card .body-copy { text-align: left; }
.final-seal { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border: 1px solid rgba(134,168,132,.4); border-radius: 50%; color: #b4cfb1; font-size: 1.7rem; background: rgba(134,168,132,.06); box-shadow: 0 0 50px rgba(134,168,132,.08); }
.final-lines { display: grid; gap: 8px; margin: 24px 0; text-align: left; }
.final-lines div { opacity: 0; transform: translateY(6px); padding: 11px 12px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.025); animation: reveal .5s forwards; animation-delay: var(--d); }
.final-instruction { margin-top: 26px; color: var(--muted); font-size: .84rem; }
.final-big { margin-top: 17px; padding: 20px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 850; line-height: 1.3; }
.final-small { margin-top: 12px; color: var(--accent-2); font-size: .82rem; }

.bottom-nav {
  position: fixed; z-index: 20; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 24px), 650px); height: 68px; display: grid; grid-template-columns: 86px 1fr 86px; align-items: stretch;
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(12,15,19,.92); backdrop-filter: blur(18px); box-shadow: 0 16px 50px rgba(0,0,0,.38);
}
.nav-button { border: 0; color: var(--muted); background: transparent; display: grid; place-items: center; align-content: center; gap: 3px; }
.nav-button span { color: var(--text); font-size: 1.05rem; }
.nav-button small { font-size: .61rem; }
.case-code { display: grid; place-items: center; align-content: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.case-code span { color: var(--muted); font-size: .56rem; letter-spacing: .13em; }
.case-code strong { margin-top: 3px; letter-spacing: .16em; font-size: .86rem; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.sheet {
  position: fixed; z-index: 80; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 680px); max-height: 82vh;
  overflow: auto; padding: 9px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 22px 22px 0 0;
  background: #11151a; box-shadow: 0 -30px 80px rgba(0,0,0,.45); animation: sheetUp .22s ease-out;
}
.sheet-handle { width: 42px; height: 4px; margin: 2px auto 16px; border-radius: 9px; background: rgba(255,255,255,.15); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet-head h2 { margin: 4px 0 0; font-size: 1.4rem; }
.archive-list { display: grid; gap: 9px; margin-top: 18px; }
.evidence-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.022); }
.evidence-card span, .evidence-card small { display: block; }
.evidence-card span { color: var(--accent-2); font-size: .59rem; font-weight: 800; letter-spacing: .12em; }
.evidence-card strong { display: block; margin: 6px 0 4px; font-size: 1rem; letter-spacing: .04em; }
.evidence-card small, .empty-state { color: var(--muted); font-size: .72rem; }
.empty-state { padding: 18px; text-align: center; }
.team-summary { margin: 18px 0 12px; }
.team-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); text-align: center; }
.team-card p { margin: 7px 0; }
.team-card small { color: var(--muted); }
.team-code-big { display: block; margin: 5px 0; font-size: 1.55rem; letter-spacing: .18em; }
.menu-sheet .wide, #menu-sheet .wide { margin-top: 9px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 36px); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); background: #171c22; box-shadow: var(--shadow); font-size: .82rem; }

.monitor-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.monitor-card { width: min(100%, 620px); padding: 26px 20px; }
.monitor-result { margin-top: 24px; }
.monitor-live { display: flex; align-items: center; gap: 8px; color: #b9cfb6; font-size: .7rem; letter-spacing: .15em; }
.monitor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.monitor-grid div { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.monitor-grid span, .monitor-grid strong { display: block; }
.monitor-grid span { color: var(--muted); font-size: .62rem; }
.monitor-grid strong { margin-top: 5px; font-size: .82rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes scan { 0% { top: 22%; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { top: 82%; opacity: 0; } }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes sheetUp { from { transform: translate(-50%, 20px); opacity: 0; } }

@media (min-width: 700px) {
  .app-shell { padding-top: 30px; }
  .case-card, .onboarding-card { padding-left: 30px; padding-right: 30px; }
  .rule-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 390px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .case-card, .onboarding-card { padding-left: 17px; padding-right: 17px; }
  .unknown-target { gap: 5px; }
  .unknown-target strong { width: 24px; }
  .inline-form { grid-template-columns: 1fr; }
  .monitor-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v2: Vor-Ort- und Schnitzeljagd-Modus */
.onsite-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid rgba(134,168,132,.25);
  border-radius: 10px;
  color: #b9cfb6;
  background: rgba(134,168,132,.055);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.trail-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: -70px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(224,161,111,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(224,161,111,.025), 0 0 0 52px rgba(224,161,111,.015);
  pointer-events: none;
}
.trail-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 13px 14px;
  border: 1px dashed rgba(224,161,111,.34);
  border-radius: 13px;
  background: rgba(200,120,69,.035);
}
.trail-status > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(224,161,111,.35);
  border-radius: 50%;
  color: var(--accent-2);
}
.trail-status b, .trail-status small { display: block; }
.trail-status b { color: var(--accent-2); font-size: .69rem; letter-spacing: .14em; }
.trail-status small { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.trail-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: 24px 4px;
  position: relative;
}
.trail-line::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  border-top: 1px dashed rgba(224,161,111,.28);
}
.trail-line i {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #171c22;
  border: 1px solid rgba(224,161,111,.55);
}
.trail-line i:first-child, .trail-line i:last-child { background: var(--accent); }

/* ===== CASE 07 V3 // cinematic home finale ===== */
body.finale-active {
  background: #000;
  overflow: hidden;
}
body.finale-active .noise { opacity: .06; }
body.finale-active .app-shell { max-width: none; min-height: 100dvh; padding: 0; }
body.finale-active .stage { min-height: 100dvh; padding: 0; }
.cinematic-finale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  background: #000;
  color: #f2eee4;
  text-align: center;
  overflow: hidden;
}
.cinematic-grain {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  opacity: .11;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.3px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.045) 0 1px, transparent 1.4px);
  background-size: 19px 23px, 31px 29px;
  animation: finaleGrain 6s steps(8) infinite;
}
.cinematic-message {
  position: relative;
  z-index: 1;
  width: min(88vw, 680px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s ease, transform .8s ease;
}
.cinematic-message.visible { opacity: 1; transform: translateY(0); }
.cinematic-message strong,
.cinematic-message p,
.cinematic-message small,
.cinematic-message span { display: block; }
.cinematic-message strong {
  margin-top: 15px;
  font-size: clamp(2rem, 8vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 830;
}
.cinematic-kicker {
  color: #d99457;
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 800;
  text-transform: uppercase;
}
.cinematic-message p {
  margin: 0 auto;
  max-width: 620px;
  font-size: clamp(1.35rem, 5.4vw, 2.55rem);
  line-height: 1.28;
  font-weight: 650;
}
.cinematic-message .profile-line {
  color: #d99457;
  font-size: clamp(1.05rem, 4.6vw, 2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cinematic-message .status-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.15rem, 4.8vw, 2rem);
  font-weight: 650;
}
.cinematic-message .instruction-line {
  color: #d8d4ca;
  font-size: clamp(1.35rem, 5.4vw, 2.5rem);
}
.cinematic-message .put-phone-down {
  margin: 0;
  font-size: clamp(2.1rem, 9vw, 5rem);
}
.cinematic-message small {
  margin-top: 20px;
  color: #d99457;
  font-size: clamp(.78rem, 3.5vw, 1.05rem);
  letter-spacing: .07em;
}
.finale-debug {
  position: fixed;
  z-index: 220;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  opacity: .4;
}
.finale-debug button { font-size: .62rem; padding: 7px 9px; }
@keyframes finaleGrain {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-1.5%,1%,0); }
  50% { transform: translate3d(1%,-1%,0); }
  75% { transform: translate3d(.6%,1.4%,0); }
  100% { transform: translate3d(0,0,0); }
}

.qr-checkpoint-card { border-color: rgba(217,148,87,.38); box-shadow: 0 24px 75px rgba(0,0,0,.34), inset 0 0 0 1px rgba(217,148,87,.04); }
.qr-scan-panel,
.physical-handoff {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 22px;
  padding: 14px;
  border: 1px dashed rgba(217,148,87,.42);
  border-radius: 14px;
  background: rgba(217,148,87,.055);
}
.qr-scan-panel b,
.physical-handoff b { display: block; color: var(--accent-2); font-size: .76rem; letter-spacing: .09em; }
.qr-scan-panel small,
.physical-handoff small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.4; }
.physical-handoff > span { color: var(--accent); font-size: 1.8rem; line-height: 1; }
.qr-symbol { position: relative; flex: 0 0 46px; width: 46px; height: 46px; border: 2px solid var(--accent); border-radius: 5px; opacity: .95; }
.qr-symbol i { position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent-2); }
.qr-symbol i:nth-child(1) { left: 5px; top: 5px; }
.qr-symbol i:nth-child(2) { right: 5px; top: 5px; }
.qr-symbol i:nth-child(3) { left: 5px; bottom: 5px; }
.qr-symbol i:nth-child(4) { right: 7px; bottom: 7px; width: 7px; height: 7px; border: 0; background: var(--accent); }

/* ===== CASE 07 V4 // link-based physical QR checkpoints ===== */
.cinematic-message .finale-endmark {
  margin: 0;
  font-size: clamp(2rem, 8.2vw, 4.8rem);
  letter-spacing: .015em;
}
.checkpoint-wait-panel { margin-top: 24px; }
.checkpoint-lock {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(217,148,87,.22);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(0,0,0,.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-align: center;
}
.qr-confirmed-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 4px 0 22px;
  padding: 13px 14px;
  border-left: 2px solid #8fb286;
  background: rgba(143,178,134,.075);
  border-radius: 0 10px 10px 0;
}
.qr-confirmed-banner > span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(143,178,134,.45);
  border-radius: 50%;
  color: #a9c9a1;
  font-weight: 900;
}
.qr-confirmed-banner b { display: block; color: #c5dcc0; font-size: .72rem; letter-spacing: .08em; }
.qr-confirmed-banner small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.35; }

/* ===== CASE 07 V5 // Chemnitz color refresh ===== */
:root {
  --bg: #08111f;
  --panel: #0d1828;
  --panel-2: #13243a;
  --line: rgba(207, 223, 255, .12);
  --line-strong: rgba(207, 223, 255, .24);
  --text: #f7f3ec;
  --muted: #b7c4d2;
  --accent: #8b5cf6;      /* purple path */
  --accent-2: #34c8ff;    /* cool cyan */
  --accent-3: #ff8c5a;    /* industrial copper */
  --accent-4: #ffd166;    /* warm signal */
  --danger: #ff6478;
  --ok: #86e0b2;
  --shadow: 0 30px 90px rgba(0, 0, 0, .36);
}

html { background: #08111f; }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(139, 92, 246, .24), transparent 31%),
    radial-gradient(circle at 88% 12%, rgba(52, 200, 255, .18), transparent 26%),
    radial-gradient(circle at 82% 88%, rgba(255, 140, 90, .16), transparent 28%),
    radial-gradient(circle at 20% 86%, rgba(255, 209, 102, .10), transparent 22%),
    linear-gradient(180deg, #0b1627 0%, #09111e 48%, #070d18 100%);
}

.noise {
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(52,200,255,.012) 0, rgba(52,200,255,.012) 1px, transparent 1px, transparent 4px);
}

.brand-mark {
  color: #f8f4ed;
  border-color: rgba(255,255,255,.18);
  background:
    linear-gradient(145deg, rgba(139,92,246,.68), rgba(52,200,255,.38) 45%, rgba(255,140,90,.34) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 26px rgba(52,200,255,.14),
    0 12px 36px rgba(139,92,246,.18);
}
.brand,
.case-title {
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.brand {
  color: #f9f3ea;
  letter-spacing: .2em;
}
.case-title {
  color: #c5d0dd;
}
.icon-button {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.14);
}
.icon-button:hover { border-color: rgba(52,200,255,.35); }

.micro-label, .eyebrow {
  color: #ffd58a;
  text-shadow: 0 0 18px rgba(255, 209, 102, .08);
}
.progress-track {
  height: 6px;
  background: rgba(255,255,255,.08);
}
.progress-bar {
  background: linear-gradient(90deg, #8b5cf6 0%, #34c8ff 42%, #ffd166 72%, #ff8c5a 100%);
  box-shadow: 0 0 18px rgba(52,200,255,.18);
}
.sync-dot { box-shadow: 0 0 14px rgba(134,224,178,.65); }
.sync-dot.busy { background: var(--accent-4); box-shadow: 0 0 14px rgba(255,209,102,.55); }

.case-card, .onboarding-card, .monitor-card, .sheet {
  background:
    linear-gradient(180deg, rgba(16, 29, 47, .92), rgba(8, 18, 31, .98)),
    linear-gradient(130deg, rgba(139,92,246,.09), transparent 34%),
    linear-gradient(320deg, rgba(52,200,255,.07), transparent 32%);
  border-color: rgba(205, 220, 248, .12);
  box-shadow:
    0 30px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.case-card::before, .onboarding-card::before, .monitor-card::before {
  height: 2px;
  background: linear-gradient(90deg, rgba(139,92,246,0), rgba(139,92,246,.9) 18%, rgba(52,200,255,.9) 52%, rgba(255,140,90,.9) 82%, rgba(255,209,102,0));
}
.case-card::after, .onboarding-card::after, .monitor-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -80px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,200,255,.12) 0%, rgba(52,200,255,.03) 38%, transparent 68%);
  pointer-events: none;
}
.story-card::after {
  background: radial-gradient(circle, rgba(139,92,246,.15) 0%, rgba(139,92,246,.03) 44%, transparent 70%);
}
.travel-card::after, .trail-card::after {
  background: radial-gradient(circle, rgba(52,200,255,.14) 0%, rgba(52,200,255,.03) 44%, transparent 70%);
}
.cipher-card::after, .meta-card::after {
  background: radial-gradient(circle, rgba(255,209,102,.13) 0%, rgba(255,140,90,.05) 45%, transparent 72%);
}
.anomaly-card::after, .destination-card::after, .qr-checkpoint-card::after {
  background: radial-gradient(circle, rgba(255,140,90,.14) 0%, rgba(139,92,246,.03) 45%, transparent 72%);
}

.case-stamp {
  color: #ffe0a9;
  border-color: rgba(255,209,102,.42);
  background: linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,209,102,.03));
  box-shadow: 0 0 0 1px rgba(255,209,102,.08) inset;
}
.onboarding-card h1, .case-card h1, .monitor-card h1 {
  color: #fff8ef;
  text-shadow: 0 3px 18px rgba(0,0,0,.2);
}
.lede, .body-copy, .body-copy p, .monitor-card, .team-card p { color: #d5dee8; }
.location-chip {
  color: #dceaf8;
  border-color: rgba(52,200,255,.22);
  background: linear-gradient(180deg, rgba(52,200,255,.10), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.callout, .alert, .research-badge, .rule-strip, .coordinate-box, .route-visual, .team-card, .monitor-grid div, .evidence-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-color: rgba(207,223,255,.12);
}
.callout {
  background:
    linear-gradient(180deg, rgba(139,92,246,.10), rgba(52,200,255,.05)),
    rgba(255,255,255,.02);
}
.callout span, .research-badge, .cipher-block span, .evidence-card span, .coordinate-box span, .decoded-output span {
  color: #86e0ff;
}
.rule-strip {
  color: #c8d5e2;
  background:
    linear-gradient(90deg, rgba(139,92,246,.08), rgba(52,200,255,.04) 55%, rgba(255,140,90,.05));
}
.rule-strip span { color: #ffd58a; }
.research-badge {
  border-color: rgba(52,200,255,.24);
  color: #93e7ff;
  background: rgba(52,200,255,.08);
}
.alert.warning {
  border-color: rgba(255,209,102,.28);
  color: #ffe0a3;
  background: rgba(255,209,102,.08);
}
.alert.error {
  border-color: rgba(255,100,120,.34);
  color: #ffb4c1;
  background: rgba(255,100,120,.08);
}

input {
  background: linear-gradient(180deg, rgba(7,13,22,.95), rgba(10,18,31,.96));
  border-color: rgba(255,255,255,.12);
}
input:focus {
  border-color: rgba(52,200,255,.65);
  box-shadow: 0 0 0 3px rgba(52,200,255,.10), 0 0 0 1px rgba(52,200,255,.18) inset;
}
.primary {
  color: #10131c;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(135deg, #8b5cf6 0%, #34c8ff 54%, #ffd166 100%);
  box-shadow: 0 14px 30px rgba(52,200,255,.18), 0 10px 24px rgba(139,92,246,.12);
}
.secondary {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.ghost-button {
  border-color: rgba(255,255,255,.11);
  color: #dce5ef;
  background: rgba(255,255,255,.015);
}
.danger-button {
  border-color: rgba(255,100,120,.26);
  color: #ffc0ca;
  background: rgba(255,100,120,.08);
}
.tab-switch {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14));
  border-color: rgba(255,255,255,.1);
}
.tab.active {
  background: linear-gradient(180deg, rgba(139,92,246,.18), rgba(52,200,255,.08));
}
.feature-grid div {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.08);
}
.feature-grid strong { color: #fff5e6; }
.feature-grid span { color: #b6c2d0; }

.unknown-target {
  border-color: rgba(255,209,102,.32);
  background: linear-gradient(90deg, rgba(255,209,102,.07), rgba(255,255,255,.02));
}
.unknown-target strong {
  color: #ffd58a;
  background: linear-gradient(180deg, rgba(13,20,34,.96), rgba(8,12,20,.98));
  border: 1px solid rgba(255,209,102,.15);
}
.feedback.ok {
  color: #d6ffea;
  background: rgba(134,224,178,.10);
  border-color: rgba(134,224,178,.28);
}
.feedback.bad {
  color: #ffd4dc;
  background: rgba(255,100,120,.08);
  border-color: rgba(255,100,120,.26);
}
.hint-card {
  border-left-color: #ffd166;
  background: linear-gradient(90deg, rgba(255,209,102,.11), rgba(255,255,255,.02));
}
.hint-card span { color: #ffd58a; }
.hint-card p { color: #d7e2ed; }

.audio-panel, .cipher-block, .decoder-panel, .scan-box, .coordinate-box {
  background: linear-gradient(180deg, rgba(6,11,19,.94), rgba(9,14,24,.98));
  border-color: rgba(207,223,255,.14);
}
.wave-bars i {
  background: linear-gradient(180deg, #34c8ff, #8b5cf6 55%, rgba(255,140,90,.45));
}
.cipher-block {
  border-color: rgba(139,92,246,.22);
  box-shadow: inset 0 0 0 1px rgba(52,200,255,.05);
}
.decoded-output {
  border-color: rgba(52,200,255,.25);
  background: linear-gradient(180deg, rgba(52,200,255,.08), rgba(255,255,255,.02));
}
.decoded-output p { color: #e5f3fb; }
.route-pulse {
  border-color: rgba(52,200,255,.4);
  background: radial-gradient(circle, rgba(52,200,255,.08), transparent 70%);
}
.route-pulse::after {
  background: linear-gradient(180deg, #34c8ff, #8b5cf6);
  box-shadow: 0 0 20px rgba(52,200,255,.35);
}

.bottom-nav {
  background: linear-gradient(180deg, rgba(12,19,33,.92), rgba(8,13,24,.96));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-button span { color: #f5f1eb; }
.case-code strong { color: #fff4e1; }
.sheet {
  background:
    linear-gradient(180deg, rgba(12,21,36,.98), rgba(7,14,25,.98)),
    linear-gradient(145deg, rgba(139,92,246,.08), transparent 34%),
    linear-gradient(320deg, rgba(52,200,255,.06), transparent 30%);
}
.sheet-handle { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,209,102,.35), rgba(255,255,255,.06)); }

.archive-list .evidence-card:nth-child(4n+1) { border-left: 2px solid #8b5cf6; }
.archive-list .evidence-card:nth-child(4n+2) { border-left: 2px solid #34c8ff; }
.archive-list .evidence-card:nth-child(4n+3) { border-left: 2px solid #ff8c5a; }
.archive-list .evidence-card:nth-child(4n+4) { border-left: 2px solid #ffd166; }
.team-code-big { color: #fff1d8; }
.toast {
  background: linear-gradient(180deg, rgba(15,24,40,.98), rgba(11,18,31,.98));
  border-color: rgba(255,255,255,.12);
}

.onsite-badge {
  border-color: rgba(134,224,178,.24);
  color: #cffff0;
  background: rgba(134,224,178,.08);
}
.trail-card::after {
  border-color: rgba(52,200,255,.10);
  box-shadow: 0 0 0 26px rgba(52,200,255,.03), 0 0 0 52px rgba(139,92,246,.02);
}
.trail-status {
  border-color: rgba(52,200,255,.28);
  background: linear-gradient(90deg, rgba(52,200,255,.08), rgba(255,255,255,.02));
}
.trail-status > span {
  border-color: rgba(52,200,255,.36);
  color: #99ecff;
}
.trail-status b { color: #a7eeff; }
.trail-line::before { border-top-color: rgba(255,209,102,.28); }
.trail-line i { border-color: rgba(255,209,102,.5); }
.trail-line i:first-child, .trail-line i:last-child {
  background: linear-gradient(180deg, #ffd166, #ff8c5a);
}

.qr-checkpoint-card { border-color: rgba(52,200,255,.26); }
.qr-scan-panel,
.physical-handoff {
  border-color: rgba(52,200,255,.28);
  background: linear-gradient(180deg, rgba(52,200,255,.07), rgba(139,92,246,.04));
}
.qr-scan-panel b,
.physical-handoff b { color: #9eeeff; }
.qr-symbol {
  border-color: rgba(52,200,255,.55);
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.18);
}
.qr-symbol i { border-color: #ffd166; }
.qr-symbol i:nth-child(4) { background: linear-gradient(180deg, #34c8ff, #8b5cf6); }
.checkpoint-lock {
  border-color: rgba(255,209,102,.18);
  color: #c4d2df;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
}
.qr-confirmed-banner {
  border-left-color: #86e0b2;
  background: linear-gradient(90deg, rgba(134,224,178,.12), rgba(255,255,255,.02));
}
.qr-confirmed-banner > span {
  border-color: rgba(134,224,178,.42);
  color: #d7ffea;
}
.qr-confirmed-banner b { color: #d9ffea; }

body.finale-active {
  background:
    radial-gradient(circle at 50% 20%, rgba(139,92,246,.10), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(52,200,255,.08), transparent 28%),
    #000;
}
.cinematic-kicker { color: #ffd58a; }
.cinematic-message .profile-line { color: #86e0ff; }
.cinematic-message small { color: #ffd58a; }
.cinematic-grain {
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.09) 0 1px, transparent 1.3px),
    radial-gradient(circle at 70% 65%, rgba(52,200,255,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 38% 74%, rgba(139,92,246,.05) 0 1px, transparent 1.4px);
}

/* ===== CASE 07 V6 // Chemnitz watermark landmarks ===== */
.app-shell > * { position: relative; z-index: 1; }
body:not(.finale-active) .app-shell::before,
body:not(.finale-active) .app-shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: saturate(1.05) blur(.15px);
}
body:not(.finale-active) .app-shell::before {
  top: 84px;
  right: max(8px, calc((100vw - 680px) / 2 + 10px));
  width: min(44vw, 290px);
  height: min(34vh, 240px);
}
body:not(.finale-active) .app-shell::after {
  left: max(6px, calc((100vw - 680px) / 2 + 4px));
  bottom: 88px;
  width: min(52vw, 360px);
  height: min(26vh, 170px);
  opacity: .12;
}
@media (max-width: 640px) {
  body:not(.finale-active) .app-shell::before {
    top: 108px;
    right: 6px;
    width: 44vw;
    height: 20vh;
    opacity: .16;
  }
  body:not(.finale-active) .app-shell::after {
    left: -18px;
    bottom: 86px;
    width: 60vw;
    height: 15vh;
    opacity: .11;
  }
}

/* Generic Chemnitz skyline */
body[data-landmark="skyline"] .app-shell::before,
body[data-landmark="skyline"] .app-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220'%3E%3Cg fill='none' stroke='%23bfefff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='.95'%3E%3Cpath d='M15 190H70V120H105V190H170V95H210V190H248V62H290V190H346V140H390V190H452V105H496V190H585'/%3E%3Cpath d='M70 120V92H88V120M170 95l21-26 19 26M248 62l22-32 20 32M452 105l22-20 22 20'/%3E%3Cpath d='M520 190V46H544V190M532 46V24M526 70h12M526 92h12M526 114h12' stroke='%23ffd58a'/%3E%3C/g%3E%3C/svg%3E");
}

/* Rathaus / Markt */
body[data-landmark="rathaus"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 240'%3E%3Cg fill='none' stroke='%23c7b0ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 204H294M54 204V94H120V204M120 204V124H178V204M178 204V82H266V204'/%3E%3Cpath d='M74 94V64H98V94M204 82V34H242V82M207 34l15-18 15 18M86 64l-8-12M98 64l8-12'/%3E%3Cpath d='M72 122h30M72 144h30M72 166h30M194 114h18M194 136h18M194 158h18M228 114h18M228 136h18M228 158h18' stroke='%23bfefff'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="rathaus"] .app-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 160'%3E%3Cg fill='none' stroke='%23ffd58a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 138H420'/%3E%3Cpath d='M70 138V44H136V138M136 138V58H194V138M194 138V26H276V138M276 138V62H354V138'/%3E%3C/g%3E%3C/svg%3E");
}

/* Karl Marx Monument */
body[data-landmark="marx"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 260'%3E%3Cg fill='none' stroke='%23bfefff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 226H260M110 214c-8-22-4-44 5-62 10-20 24-34 48-42 28-9 52-1 66 17 11 14 16 33 10 57-7 27-31 44-63 49-27 5-50-1-66-19Z'/%3E%3Cpath d='M147 119c-7-10-9-23-4-35 6-13 18-19 33-19 20 0 38 14 45 36M92 172c20 10 52 16 89 5'/%3E%3Cpath d='M26 92h66M26 114h66M26 136h66M26 158h66' stroke='%23ffd58a'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="marx"] .app-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 160'%3E%3Cg fill='none' stroke='%23c7b0ff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M30 124H430'/%3E%3Cpath d='M50 60h52M50 82h52M50 104h52M50 126h52M354 60h52M354 82h52M354 104h52M354 126h52'/%3E%3Cpath d='M175 120c-12-16-11-43 0-60 11-17 30-28 54-28 22 0 39 8 50 22 11 14 15 34 10 54-9 34-34 48-62 48-22 0-40-10-52-36Z' stroke='%23bfefff'/%3E%3C/g%3E%3C/svg%3E");
}

/* Luxor / venue */
body[data-landmark="luxor"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23ffd58a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 188H284M54 188V62H266V188'/%3E%3Cpath d='M74 62l20-26h132l20 26M86 96h148M86 122h148M86 148h148' stroke='%23bfefff'/%3E%3Cpath d='M120 32h80M134 20h52' stroke='%23c7b0ff'/%3E%3Cpath d='M98 110l20 18 34-36M188 110h22'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="luxor"] .app-shell::after { background-image: none; }

/* Water / Rabenstein */
body[data-landmark="water"] .app-shell::before,
body[data-landmark="schlossteich"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23bfefff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 166c16-10 34-10 50 0s34 10 50 0 34-10 50 0 34 10 50 0 34-10 50 0'/%3E%3Cpath d='M50 192c16-10 34-10 50 0s34 10 50 0 34-10 50 0 34 10 50 0' stroke='%23c7b0ff'/%3E%3Cpath d='M108 146c0-22 16-38 42-38 18 0 33 8 45 24 9 12 14 28 14 46'/%3E%3Cpath d='M78 140c24-22 50-33 78-33 18 0 36 5 54 15M133 126l-20-18M177 120l11-22' stroke='%23ffd58a'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="schlossteich"] .app-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 170'%3E%3Cg fill='none' stroke='%23ffd58a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 128c20-10 40-10 60 0s40 10 60 0 40-10 60 0 40 10 60 0 40-10 60 0 40 10 60 0'/%3E%3Cpath d='M162 110l18-26 26 26zM174 84v-18M210 110h26M226 110l18-22'/%3E%3C/g%3E%3C/svg%3E");
}

/* Schlosskirche */
body[data-landmark="schlosskirche"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 240'%3E%3Cg fill='none' stroke='%23bfefff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 204H284M62 204V112H126V204M126 204V154H184V204M184 204V86H268V204'/%3E%3Cpath d='M214 86V28M214 28l-17 20M214 28l17 20M108 112V66M108 66l-12 14M108 66l12 14' stroke='%23ffd58a'/%3E%3Cpath d='M80 138h28M80 164h28M202 116h18M230 116h18M202 142h18M230 142h18M202 168h18M230 168h18' stroke='%23c7b0ff'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="schlosskirche"] .app-shell::after { background-image: none; }

/* Schönherrfabrik */
body[data-landmark="fabrik"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cg fill='none' stroke='%23ffb183' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 202H310M42 202V112H120V202M120 202V132H196V202M196 202V76H292V202'/%3E%3Cpath d='M232 76V32H256V76M214 100h60M226 46h12M250 46h12' stroke='%23ffd58a'/%3E%3Cpath d='M60 136h18M88 136h18M60 162h18M88 162h18M146 156h18M174 156h18M220 112h18M248 112h18M220 138h18M248 138h18M220 164h18M248 164h18' stroke='%23bfefff'/%3E%3Ccircle cx='244' cy='54' r='14' stroke='%23c7b0ff'/%3E%3Cpath d='M244 54V46M244 54l7 5' stroke='%23c7b0ff'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="fabrik"] .app-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 170'%3E%3Cg fill='none' stroke='%23bfefff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M22 132H418M46 132V88H116V132M116 132V66H190V132M190 132V98H260V132M260 132V48H340V132'/%3E%3Cpath d='M56 148c18-8 34-8 52 0s34 8 52 0 34-8 52 0 34 8 52 0 34-8 52 0' stroke='%23c7b0ff'/%3E%3C/g%3E%3C/svg%3E");
}

/* ZUHAUSE / Brühl */
body[data-landmark="zuhause"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%23ffd58a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 182H324'/%3E%3Cpath d='M56 146l26-60h22l24 60M70 122h20M126 146V86h44M126 116h44M192 146V86h34M192 116h26M242 86h42l-26 60h26M312 86v60' stroke='%23bfefff'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="zuhause"] .app-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 170'%3E%3Cg fill='none' stroke='%23c7b0ff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M22 132H402'/%3E%3Cpath d='M44 132V88H98V132M120 132V72H170V132M190 132V58H248V132M270 132V82H324V132M346 132V68H396V132'/%3E%3C/g%3E%3C/svg%3E");
}

/* Esse */
body[data-landmark="esse"] .app-shell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 280'%3E%3Cg fill='none' stroke='%23bfefff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 240H216M116 240V26H148V240'/%3E%3Cpath d='M116 58h32M116 92h32M116 126h32M116 160h32M116 194h32' stroke='%23ffd58a'/%3E%3Cpath d='M88 222H176M64 240c10-9 20-9 30 0 10-9 20-9 30 0 10-9 20-9 30 0 10-9 20-9 30 0' stroke='%23c7b0ff'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-landmark="esse"] .app-shell::after { background-image: none; }

/* ===== CASE 07 V9 // Admin UI ===== */
.admin-body { min-height: 100vh; }
.admin-shell { position: relative; z-index: 1; width: min(100% - 28px, 980px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 0 50px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:28px; }
.admin-home { min-height:42px; padding:0 14px; }
.admin-login-card, .admin-dashboard { border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(16,29,47,.95), rgba(8,18,31,.98)); box-shadow:var(--shadow); }
.admin-login-card { width:min(100%, 620px); margin:7vh auto 0; padding:28px; position:relative; overflow:hidden; }
.admin-login-card::before, .admin-dashboard::before { content:""; display:block; height:2px; background:linear-gradient(90deg,#8b5cf6,#34c8ff,#ffd166,#ff8c5a); }
.admin-login-card h1, .admin-toolbar h1 { margin:8px 0 12px; font-size:clamp(2rem,6vw,3rem); letter-spacing:-.035em; }
.admin-dashboard { padding:0 22px 24px; overflow:hidden; }
.admin-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:24px 0 18px; }
.admin-toolbar h1 { margin-bottom:0; }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.admin-stats > div { padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.admin-stats span, .admin-stats strong { display:block; }
.admin-stats span { color:var(--muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.12em; }
.admin-stats strong { margin-top:6px; color:var(--text); font-size:1.1rem; }
.admin-search { display:grid; gap:8px; margin:18px 0; color:var(--muted); font-size:.75rem; font-weight:700; }
.admin-games { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-game-card { position:relative; overflow:hidden; padding:18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018)); }
.admin-game-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#8b5cf6,#34c8ff); opacity:.85; }
.admin-game-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.admin-game-head h2 { margin:5px 0 0; font-size:1.15rem; line-height:1.25; }
.admin-revision { color:var(--muted); font-size:.6rem; letter-spacing:.1em; }
.admin-progress-chip { display:inline-flex; margin:14px 0 9px; padding:7px 9px; border-radius:999px; color:#bfefff; background:rgba(52,200,255,.08); border:1px solid rgba(52,200,255,.18); font-size:.7rem; }
.admin-scene-title { display:block; min-height:2.5em; line-height:1.35; }
.admin-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:15px 0; }
.admin-meta-grid div { padding:10px; border-radius:10px; background:rgba(0,0,0,.14); border:1px solid rgba(255,255,255,.05); }
.admin-meta-grid span, .admin-meta-grid b { display:block; }
.admin-meta-grid span { color:var(--muted); font-size:.61rem; }
.admin-meta-grid b { margin-top:4px; font-size:.72rem; font-weight:700; line-height:1.25; }
.admin-danger-zone { margin-top:24px; padding:18px; border:1px solid rgba(255,100,120,.2); border-radius:16px; background:rgba(255,100,120,.045); }
.admin-danger-zone h2 { margin:7px 0 8px; }
.admin-danger-zone p { color:var(--muted); line-height:1.55; }
.admin-empty { grid-column:1/-1; padding:34px 18px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; }
@media (max-width:720px) { .admin-games { grid-template-columns:1fr; } .admin-toolbar { align-items:stretch; flex-direction:column; } .admin-stats { grid-template-columns:1fr; } .admin-header { align-items:flex-start; } }