/* Fließtext: Jersey 10 (lokal, OFL) – klare Ziffern, 2 ≠ 8, B ≠ 8, Fi ≠ A. Etwas größer gerechnet, damit alle px-Größen passen. */
/* Überschriften & Zahlen: Press Start 2P (lokal, OFL) – keine Anfrage bei Google, die den ersten Bildaufbau blockiert */
@font-face { font-family: 'Press Start 2P'; src: url(../fonts/pressstart2p-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bierschrift'; src: url(../fonts/jersey10-latin.woff2) format('woff2'); font-display: swap; size-adjust: 122%; }
:root {
  --bg: #140a05;
  --panel: #24140b;
  --panel2: #2f1b0e;
  --wood: #5c3a1e;
  --wood-l: #8a5a32;
  --gold: #f4c23c;
  --gold-d: #b37a18;
  --gold-l: #fff09a;
  --red: #c8202a;
  --red-d: #7a0d18;
  --cream: #fff5dc;
  --muted: #cbb393;
  --beer: #f5a623;
  --radler: #a6e05a;
  --kirche: #c8202a;
  --brau: #d9803e;
  --aprostel: #f4c23c;
  --ink: #241008;
  --pix: 'Press Start 2P', monospace;
  --ui: 'Bierschrift', 'Trebuchet MS', system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --tabs-h: 0px;
  --head-h: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; touch-action: manipulation; }
img { -webkit-touch-callout: none; -webkit-user-drag: none; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 16px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
.px { image-rendering: pixelated; image-rendering: crisp-edges; display: inline-block; vertical-align: middle; }
button { font-family: var(--ui); cursor: pointer; }
b { color: var(--gold-l); font-weight: 500; }
body { font-synthesis-weight: none; } /* Jersey 10 hat nur eine Stärke – kein verschmiertes Kunst-Fett */
.radler, .radler b { color: var(--radler) !important; }
.muted { color: var(--muted); font-size: 14px; }

/* ---------- Layout ---------- */
#game {
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(240px, 1fr) minmax(290px, 330px);
  height: 100vh; height: 100dvh;
}
.panel { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#left { background: var(--panel); border-right: 6px solid var(--wood); box-shadow: inset -2px 0 0 var(--gold-d); }
#middle { background: #1a0e07; }
#right { background: var(--panel2); border-left: 6px solid var(--wood); box-shadow: inset 2px 0 0 var(--gold-d); }

/* ---------- Links: Logo, Zähler, Altar ---------- */
#logo {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 4px;
  cursor: pointer; background: linear-gradient(#3a0d12, #24140b);
  border-bottom: 3px solid var(--gold-d);
}
#logo img { width: 46px; height: 60px; filter: drop-shadow(0 2px 0 #000); }
.logo-text h1 { margin: 0; font-family: var(--pix); font-size: 17px; color: var(--gold); text-shadow: 2px 2px 0 var(--red-d), 4px 4px 0 #000; letter-spacing: 1px; }
.logo-text span { font-family: var(--pix); font-size: 10px; color: var(--cream); letter-spacing: 3px; }
#version { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
/* Zähler kompakt (Wunsch 06.10.2026): Bier | pro Sekunde + Engpass nebeneinander, darunter Ziel und Mission nebeneinander */
#counter { text-align: center; padding: 8px 8px 6px; background: rgba(0,0,0,.35); position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 6px; }
#counter > * { flex: 1 1 100%; }
.count-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; }
.count-row #beerCount { word-break: normal; overflow-wrap: normal; }
.count-main { min-width: 0; }
.count-row #bpsCount { margin: 0; padding-left: 14px; border-left: 2px solid #3a2212; text-align: left; line-height: 1.4; }
#counter > #nextGoal, #counter > #mission { flex: 1 1 150px; margin: 0; max-width: none; }
#counter > [hidden] { display: none !important; }
#counter > #zeltBtn { flex: 0 0 auto; margin: 2px auto 0; }
#counter > #nextGoal { display: flex; align-items: center; justify-content: center; }
#beerCount { font-family: var(--pix); font-size: clamp(16px, 2.1vw, 26px); color: var(--cream); text-shadow: 3px 3px 0 #000; line-height: 1.3; word-break: break-word; }
.beer-unit { font-family: var(--pix); font-size: 11px; color: var(--gold); margin-top: 2px; }
#bpsCount { font-size: 15px; color: var(--muted); margin-top: 4px; }
#bpsCount > b { font-family: var(--pix); font-size: 12px; }
#buffs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 0; padding: 0 6px; position: relative; z-index: 2; }
#buffs:not(:empty) { padding: 6px; background: rgba(0,0,0,.35); }
.buff { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: radial-gradient(#6a1a1f, #2a0a0c); border: 2px solid var(--gold); box-shadow: 0 0 10px rgba(244,194,60,.6); animation: buffGlow 1s ease-in-out infinite alternate; }
.buff img { width: 34px; height: auto; max-height: 40px; object-fit: contain; }
.buff.radler { border-color: var(--radler); background: radial-gradient(#2e4a12, #0f1a06); box-shadow: 0 0 10px rgba(166,224,90,.6); }
.buff i { position: absolute; left: 0; bottom: -6px; height: 4px; background: var(--gold); }
.buff.radler i { background: var(--radler); }
@keyframes buffGlow { to { box-shadow: 0 0 18px rgba(244,194,60,.9); } }
#altar { position: relative; flex: 1; overflow: hidden; min-height: 260px; cursor: pointer; touch-action: manipulation; }
#altarCanvas { position: absolute; left: 0; top: 0; z-index: 1; }
#altar .bg-layer { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; image-rendering: pixelated; } /* HD-Hintergrund (hd.js) */
#altar .jg-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; image-rendering: pixelated; }
#mascot { position: absolute; left: 6px; bottom: 4px; z-index: 3; cursor: pointer; }
#mascot img { width: 70px; height: 92px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.5)); }
#mascot.hop { animation: hop .45s ease-out; }
@keyframes hop { 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
#bubble {
  position: absolute; bottom: 96px; left: 10px; width: max-content; max-width: 210px;
  background: var(--cream); color: var(--ink); padding: 8px 10px; font-size: 14px; line-height: 1.25;
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom left; transition: .2s; pointer-events: none;
}
#bubble::after { content: ''; position: absolute; left: 18px; bottom: -11px; border: 8px solid transparent; border-top-color: var(--ink); }
#bubble.show { opacity: 1; transform: none; }

/* ---------- Mitte: Menü, Ticker, Reihen ---------- */
#menuBar { display: flex; gap: 4px; padding: 8px; background: var(--wood); border-bottom: 3px solid var(--gold-d); flex-wrap: wrap; }
#menuBar button {
  flex: 1 1 auto; padding: 7px 8px; font-size: 14px; font-weight: 500; color: var(--cream);
  background: linear-gradient(#8a5a32, #5c3a1e); border: 2px solid #2a170b; box-shadow: inset 0 2px 0 rgba(255,255,255,.2);
}
#menuBar button.on { background: linear-gradient(#b07a46, #7a4c26); color: #fff; }
#menuBar .asc-btn { background: linear-gradient(#e0b040, #9a6a14); color: var(--ink); }
#menuBar .asc-btn.on { background: linear-gradient(#fff09a, #d9a030); color: var(--ink); }
/* A-179: oben die Orte des Spiels (groß), darunter die Verwaltung (klein) – egal, in welcher Reihenfolge die Knöpfe im DOM stehen.
   Neue Knöpfe landen automatisch unten; was ein Ort ist, steht in der Liste hier. */
#menuBar { row-gap: 5px; }
#menuBar > button { order: 3; flex: 1 1 auto; white-space: nowrap; font-size: 12px; padding: 4px 8px; background: linear-gradient(#6e4826, #4a2e17); color: #e8d5b0; }
#menuBar > button[data-menu=""], #menuBar > button[data-menu="mis"], #menuBar > button[data-menu="spiele"], #menuBar > button.asc-btn {
  order: 1; flex: 1 1 0; font-size: 14px; padding: 7px 8px; background: linear-gradient(#8a5a32, #5c3a1e); color: var(--cream); }
#menuBar > button.asc-btn { flex-grow: 1.3; background: linear-gradient(#e0b040, #9a6a14); color: var(--ink); }
#menuBar > button.on { background: linear-gradient(#b07a46, #7a4c26); color: #fff; }
#menuBar > button.asc-btn.on { background: linear-gradient(#fff09a, #d9a030); color: var(--ink); }
#menuBar > .mb-umbruch { order: 2; flex: 0 0 100%; height: 0; }
.badge { background: var(--red); color: #fff; padding: 1px 5px; font-size: 12px; margin-left: 3px; }
/* Ticker „Bier-Bote“: Zeitungsband mit Stempel links, Laufbalken unten, Eilmeldungen in Rot */
#ticker {
  position: relative; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; overflow: hidden; cursor: pointer;
  background: linear-gradient(#1c0f07, #0e0703); border-bottom: 2px solid #3a2212; box-shadow: inset 0 1px 0 rgba(244,194,60,.18);
}
#tickerTag {
  flex: none; position: relative; padding: 6px 8px 5px; font-family: var(--pix); font-size: 9px; line-height: 1; letter-spacing: 1px;
  color: var(--ink); background: linear-gradient(var(--gold-l), var(--gold)); border: 2px solid var(--ink); box-shadow: 2px 2px 0 #000; transform: rotate(-3deg);
}
#tickerTag::before { content: 'BIER-BOTE'; }
#tickerText { flex: 1; min-width: 0; font-size: 16px; color: var(--cream); line-height: 1.2; text-shadow: 1px 1px 0 #000; opacity: 0; }
#tickerText b { color: var(--gold); }
#tickerText.in { animation: tick .55s cubic-bezier(.2,.9,.3,1.2) forwards; }
#tickerText.out { animation: tickOut .3s ease-in forwards; }
@keyframes tick { from { opacity: 0; transform: translateX(24px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tickOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-24px); } }
#tickerBar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold-d); opacity: .7; transform-origin: left; transform: scaleX(0); }
@keyframes tickBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#ticker.eil { background: linear-gradient(#3a0a0e, #1a0405); border-bottom-color: var(--red); }
#ticker.eil #tickerTag { color: #fff; background: linear-gradient(#e8323c, var(--red)); animation: eilBlink .7s steps(2) 4; }
#ticker.eil #tickerTag::before { content: 'EILMELDUNG'; }
#ticker.eil #tickerBar { background: var(--red); opacity: 1; }
@keyframes eilBlink { 50% { background: var(--gold-l); color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { #tickerText.in, #tickerText.out, #ticker.eil #tickerTag { animation-duration: .01s; } }
#rowsWrap { position: relative; flex: 1; min-height: 0; }
#rows { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-color: var(--wood-l) #140a05; }
.rows-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 18px; line-height: 1.6; }
.row { position: relative; height: 96px; border-bottom: 4px solid #0e0703; box-shadow: inset 0 -2px 0 var(--wood); overflow: hidden; }
.row canvas { display: block; image-rendering: pixelated; }
.row-label { position: absolute; left: 6px; top: 4px; background: rgba(20,10,5,.75); padding: 2px 7px; font-size: 13px; color: var(--cream); pointer-events: none; border: 1px solid rgba(244,194,60,.4); }
.row-label b { font-family: var(--pix); font-size: 10px; margin-left: 4px; }
#menuOverlay { position: absolute; inset: 0; background: rgba(20,10,5,.97); z-index: 5; display: flex; flex-direction: column; }
#menuOverlay[hidden] { display: none; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 3px solid var(--gold-d); background: linear-gradient(#3a0d12, #24140b); }
.menu-head h2 { margin: 0; font-family: var(--pix); font-size: 15px; color: var(--gold); }
#menuClose { background: none; border: 2px solid var(--gold-d); color: var(--gold); font-size: 16px; width: 34px; height: 34px; }
#menuBody { flex: 1; overflow-y: auto; padding: 14px 16px 30px; }
#menuBody h3 { font-family: var(--pix); font-size: 12px; color: var(--gold); margin: 20px 0 10px; }
table.stats { width: 100%; border-collapse: collapse; font-size: 15px; }
table.stats td { padding: 5px 6px; border-bottom: 1px dashed #4a2e17; }
table.stats td:last-child { text-align: right; color: var(--gold-l); }
table.stats small { color: var(--muted); }
.owned-ups, .achs { display: flex; flex-wrap: wrap; gap: 4px; }
.ach-ico { width: 34px; height: 34px; display: grid; place-items: center; background: radial-gradient(color-mix(in srgb, var(--ac) 55%, #000), #1a0e07); border: 2px solid var(--ac); color: var(--muted); font-family: var(--pix); font-size: 12px; }
.ach-ico img { max-width: 28px; max-height: 28px; object-fit: contain; }
.ach-ico.locked { background: #140a05; border-color: #3a2212; }
.ach-ico.locked img { filter: brightness(0) opacity(.5); }
.ach-gr { margin: 10px 0 14px; } .ach-gr h4 { margin: 0 0 6px; font-family: var(--pix); font-size: 11px; color: var(--gold); } .ach-gr h4 small { color: var(--muted); font-family: inherit; margin-left: 6px; }
.ach-reihe { margin: 6px 0; } .ach-rt { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.ach-verb { font-size: 12px; color: var(--muted); margin-top: 4px; opacity: .8; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.toggle { display: flex; gap: 8px; align-items: center; padding: 8px; background: #2a170b; border: 2px solid #3a2212; cursor: pointer; }
.toggle input { accent-color: var(--gold); width: 18px; height: 18px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.btn { padding: 9px 14px; font-size: 15px; font-weight: 500; color: var(--cream); background: linear-gradient(#8a5a32, #5c3a1e); border: 2px solid #2a170b; box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 0 #000; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2); }
.btn.primary { background: linear-gradient(#f4c23c, #b37a18); color: var(--ink); }
.btn.danger { background: linear-gradient(#c8202a, #7a0d18); }
.btn.big { font-size: 18px; padding: 12px 22px; }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
#saveBox { width: 100%; height: 90px; background: #0e0703; color: var(--cream); border: 2px solid #3a2212; font-family: monospace; font-size: 12px; padding: 8px; user-select: text; -webkit-user-select: text; }
.info ul { padding-left: 20px; line-height: 1.5; }
.info li { margin-bottom: 6px; }
.info-hero { display: flex; gap: 14px; align-items: center; }
.info-hero h3 { margin-top: 0 !important; }
.asc { text-align: center; }
.asc p { line-height: 1.5; }
.asc table { margin: 14px 0 20px; text-align: left; }

/* ---------- Rechts: Laden ---------- */
.chip { flex: 1; padding: 5px 4px; font-size: 13px; color: var(--muted); background: #1a0e07; border: 2px solid #3a2212; }
.chip.on { color: var(--ink); background: var(--gold); border-color: var(--gold-l); font-weight: 500; }
.chip .cnt { font-size: 11px; opacity: .8; }
.chip .cnt:empty { display: none; }
.up {
  --tc: #5c3a1e;
  width: 56px; height: 56px; display: grid; place-items: center; cursor: pointer; position: relative;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc) 70%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 40%, #000) 100%);
  border: 3px solid #140a05; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
  opacity: .5; filter: saturate(.5);
}
.up img { width: 52px; height: 52px; }
.up.cat-aprostel { --tc: #c8942a; }
.up.cat-kirche:not([style]) { --tc: #8a1019; }
.up.cat-klick { --tc: #e0701a; }
.up.cat-kleidung { --tc: #b070e0; }
.up.cat-brau:not([style]) { --tc: #9a4f1f; }
.up.research { --tc: #a0b02a; }
.up.can { opacity: 1; filter: none; border-color: var(--gold); }
.up.can:active { transform: scale(.94); }
.up.small { width: 34px; height: 34px; border-width: 2px; }
.up.small img { width: 26px; height: 26px; }
.up-empty { color: var(--muted); font-size: 14px; padding: 12px 4px; }
#buildings { flex: 1; overflow-y: auto; scrollbar-color: var(--wood-l) #140a05; }
.bld {
  display: grid; grid-template-columns: 58px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; cursor: pointer;
  background: linear-gradient(90deg, #5c3a1e, #3e2512); border-bottom: 3px solid #1a0e07; box-shadow: inset 0 2px 0 rgba(255,255,255,.08);
  opacity: .55;
}
.bld.can { opacity: 1; }
.bld.can:active { filter: brightness(1.25); }
.bld.sell.can { background: linear-gradient(90deg, #5a1a1a, #3a1010); }
.bld.pulse { animation: pulse .25s; }
@keyframes pulse { 50% { transform: scale(.97); filter: brightness(1.4); } }
.bld-ico img { width: 52px; height: 52px; }
.bld.locked { cursor: default; opacity: .6; }
.bld.locked .bld-ico img { filter: brightness(0) opacity(.6); }
.bld.locked .bld-name { color: var(--muted); }
.bld-name { font-size: 18px; font-weight: 500; color: var(--cream); text-shadow: 2px 2px 0 #000; line-height: 1.1; }
.bld-price { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.bld.can .bld-price { color: #9ef08a; }
.bld-price .pi { width: 14px; height: 16px; }
.bld-own { font-family: var(--pix); font-size: 22px; color: rgba(255,245,220,.35); text-shadow: 2px 2px 0 #000; }

#lockPanel { padding: 22px 18px; text-align: center; color: var(--muted); font-size: 16px; line-height: 1.4; }
#lockPanel .lock-ico { font-size: 34px; filter: grayscale(.3); }
#lockPanel b { color: var(--gold-l); }
.lock-bar { position: relative; height: 24px; margin-top: 12px; background: #140a05; border: 2px solid var(--wood); }
.lock-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-d), var(--gold)); }
.lock-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cream); text-shadow: 1px 1px 0 #000; font-size: 15px; }
#buyBar[hidden], #buildings[hidden], #juenger[hidden], .store-list[hidden] { display: none; }
.store-list { flex: 1; overflow-y: auto; scrollbar-color: var(--wood-l) #140a05; }
#juenger { flex: 1; overflow-y: auto; scrollbar-color: var(--wood-l) #140a05; }
.j-intro { padding: 8px 10px; font-size: 13px; color: var(--muted); background: #1a0e07; border-bottom: 3px solid #0e0703; }
.bld.jg { background: linear-gradient(90deg, #3a1a3a, #24102a); }
.bld.jg .bld-name { font-size: 16px; }
.j-sub { font-size: 12px; color: #c9a8e8; }
/* Aprostel- und Sakristei-Tab (die Abendmahl-Tafel selbst: css/aprostel.css) */
.ap-head { padding: 8px 10px 4px; background: #1a0e07; border-bottom: 1px solid #3a2212; }
.ap-head b { display: block; font-family: var(--pix); font-size: 9px; color: var(--gold); }
.ap-head span { font-size: 13px; color: var(--muted); }
.bld.ap { background: linear-gradient(90deg, #4a3014, #2e1c0c); }
.bld.ap .bld-name { font-size: 16px; }
.bld.ap .j-sub { color: var(--muted); }
.bld.jg.next { opacity: .85; }
.bld.jg.next .j-sub { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.j-next { color: var(--muted); font-size: 12px; }
.j-bar { display: block; height: 6px; background: #1a0a1e; border: 1px solid #5a2a6a; }
.j-bar i { display: block; height: 100%; background: #c080ff; }
/* Übersicht „Deine Jünger“ */
#jTeam { padding: 10px 10px 8px; background: linear-gradient(#2a1030, #1a0a1e); border-bottom: 3px solid #0e0703; box-shadow: inset 0 -1px 0 #5a2a6a; }
.jt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 8px; }
.jt-head > b { font-family: var(--pix); font-size: 11px; color: #e0b8ff; }
.jt-sum { font-size: 13px; color: var(--cream); }
.jt-sum small { color: var(--muted); }
.jt-hall { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Biertisch: die Plätze stoßen aneinander, jede Tischplatte-Scheibe gehört zu einem Jünger → eine durchgehende Platte */
.jt-table { position: relative; display: flex; padding: 0 6px; }
.jt-table::before, .jt-table::after { content: ''; position: absolute; top: 66px; width: 6px; height: 18px; background: #4a2c14; box-shadow: inset -2px 0 0 #2a170b; }
.jt-table::before { left: 14px; } .jt-table::after { right: 14px; }
.jt { position: relative; width: 70px; display: flex; flex-direction: column; align-items: center; cursor: help; }
.jt-fig { width: 72px; height: 72px; margin-bottom: -18px; position: relative; z-index: 1; animation: jtHop 2.4s ease-in-out infinite; }
.jt-plank { position: relative; z-index: 2; width: 100%; height: 12px; background: linear-gradient(#b07a46 0 3px, #8a5a32 3px 9px, #5c3a1e 9px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.jt:first-child .jt-plank { margin-left: -6px; width: calc(100% + 6px); } .jt:last-child .jt-plank { width: calc(100% + 6px); }
.jt-mug { position: absolute; left: 50%; bottom: 9px; width: 21px; height: 24px; margin-left: 6px; transform-origin: 20% 100%; animation: jtProst 4.8s ease-in-out infinite; }
.jt:nth-child(2n) .jt-fig, .jt:nth-child(2n) .jt-mug { animation-delay: -1.6s; }
.jt:nth-child(3n) .jt-fig, .jt:nth-child(3n) .jt-mug { animation-delay: -3.1s; }
@keyframes jtHop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-4px); } 80% { transform: none; } }
@keyframes jtProst { 0%, 70%, 100% { transform: none; } 78%, 86% { transform: translate(-10px, -14px) rotate(-25deg); } }
.jt-lvl { position: absolute; top: 0; right: 4px; z-index: 3; min-width: 18px; padding: 2px 3px; font-family: var(--pix); font-size: 8px; text-align: center; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
.jt.dark .jt-lvl { background: #d06070; }
.jt.radler .jt-lvl { background: var(--radler); }
.jt small { margin-top: 5px; font-size: 11px; color: #c9a8e8; white-space: nowrap; position: relative; z-index: 1; }
.jt-bar { display: block; width: 44px; height: 4px; margin-top: 2px; background: #3a1a40; position: relative; z-index: 1; }
.jt-bar i { display: block; height: 100%; background: #c080ff; }
.jt-foot { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.jt-foot b { color: #e0b8ff; }
@media (prefers-reduced-motion: reduce) { .jt-fig, .jt-mug { animation: none; } }
.dark-tag { color: #ff7a6a; }
.floater.jfloat { color: #d8b0ff; font-size: 11px; }
a.btn.link { display: inline-block; margin-top: 6px; text-decoration: none; font-size: 14px; }
#rain { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 45; opacity: .6; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 44; transition: box-shadow 2s; }
body[data-dark="1"] #vignette { box-shadow: inset 0 0 120px rgba(0,0,0,.55); }
body[data-dark="2"] #vignette { box-shadow: inset 0 0 180px rgba(20,0,10,.75); }
body[data-dark="3"] #vignette { box-shadow: inset 0 0 240px rgba(40,0,0,.9); }
body[data-dark="3"] .row-label { color: #ff8a6a; border-color: rgba(255,50,20,.6); }
body[data-dark="3"] .logo-text h1 { color: #ff5a3a; text-shadow: 2px 2px 0 #000, 0 0 12px #ff2000; }

@media (hover: hover) {
  #menuBar button:hover { background: linear-gradient(#b07a46, #7a4c26); color: #fff; }
  #menuBar .asc-btn:hover { background: linear-gradient(#fff09a, #d9a030); color: var(--ink); }
  .btn:hover { filter: brightness(1.15); }
  .up.can:hover { transform: translateY(-2px); box-shadow: 0 0 12px rgba(244,194,60,.8); }
  .bld.can:hover { background: linear-gradient(90deg, #7a4c26, #5c3a1e); }
  .bld.jg.can:hover { background: linear-gradient(90deg, #5a2a5a, #3a1a3a); }
  .jt:hover .jt-fig { filter: brightness(1.2); }
  #mission:hover { border-color: var(--gold); }
  #viewBtn:hover { opacity: 1; }
  #cheat button:hover { background: #5fae3a; color: #000; }
}

/* ---------- Tooltip ---------- */
#tooltip {
  position: fixed; z-index: 100; max-width: min(360px, calc(100vw - 16px)); pointer-events: none;
  background: #1c0f07; border: 3px solid var(--gold-d); box-shadow: 0 0 0 2px #000, 6px 6px 0 rgba(0,0,0,.5);
  padding: 10px 12px; font-size: 14px; line-height: 1.35;
}
#tooltip[hidden] { display: none; }
.tt-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.tt-head > div:nth-child(2) { flex: 1; }
.tt-name { font-size: 17px; font-weight: 500; color: var(--gold); }
.tt-sub { font-size: 12px; color: var(--muted); }
.tt-price { text-align: right; font-size: 14px; white-space: nowrap; }
.tt-price small { display: block; color: var(--muted); font-size: 11px; }
.tt-price.owned { color: #9ef08a; }
.price { display: inline-flex; align-items: center; gap: 3px; }
.price .pi { width: 7px; height: 8px; transform: scale(2); margin-right: 5px; }
.price.ok { color: #9ef08a; }
.price.no { color: #ff8a7a; }
.tt-desc { margin: 4px 0; }
.tt-stats { margin: 6px 0; padding-left: 16px; color: var(--cream); font-size: 13px; }
.tt-quote { margin-top: 6px; font-style: italic; color: var(--muted); font-size: 13px; }
.tt-hint { margin-top: 6px; color: var(--gold); font-size: 13px; }
.tt-ico { --tc: #5c3a1e; width: 54px; height: 54px; display: grid; place-items: center; background: radial-gradient(color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); border: 2px solid #000; }
.tt-ico.cat-aprostel { --tc: #c8942a; }
.tt-ico.cat-kirche:not([style]) { --tc: #8a1019; }
.tt-ico.cat-klick { --tc: #e0701a; }
.tt-ico.cat-kleidung { --tc: #b070e0; }
.tt-ico.cat-brau:not([style]) { --tc: #9a4f1f; }
.tag { font-size: 11px; padding: 1px 5px; color: #fff; font-weight: 500; }
.tag-aprostel { background: #a07010; }
.tag-brau { background: #9a4f1f; }
.tag-klick { background: #c05a10; }
.tag-kleidung { background: #7a3fb0; }
.tag-kirche { background: var(--red); }

/* ---------- Bierschoff-Erscheinung ---------- */
#shimmers { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
/* Jagdrevier: nur über Braustube und Bierreich; contain: paint schneidet ab und macht es zum Bezugsrahmen der Ziele */
#jagd { position: fixed; pointer-events: none; z-index: 52; overflow: hidden; contain: paint; }
#jagd[hidden] { display: none; }
.shimmer { position: absolute; pointer-events: auto; cursor: pointer; animation: popIn .5s cubic-bezier(.3,1.6,.5,1); touch-action: manipulation; }
/* B-025: etwas größere Trefferfläche, damit ein knapper Tipp nicht den Knopf dahinter trifft */
.shimmer::after, .sticker::after { content: ''; position: absolute; inset: -14px; }
.shimmer img { position: relative; display: block; filter: drop-shadow(0 0 6px #fff6b0) drop-shadow(3px 4px 0 rgba(0,0,0,.4)); animation: floaty 1.6s ease-in-out infinite; }
.shimmer .glow {
  position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: repeating-conic-gradient(rgba(255,230,120,.45) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%);
  animation: spin 6s linear infinite; pointer-events: none;
}
.shimmer.radler .glow { background: repeating-conic-gradient(rgba(166,224,90,.5) 0 10deg, transparent 10deg 30deg); }
.shimmer.radler img { filter: drop-shadow(0 0 6px #d8ff90) drop-shadow(3px 4px 0 rgba(0,0,0,.4)); }
.shimmer.st-walk img { animation: walk .5s steps(2) infinite; }
.shimmer.from-left { animation: peekL .7s ease-out; }
.shimmer.from-right { animation: peekR .7s ease-out; }
.shimmer.from-left img { transform: rotate(12deg); }
.shimmer.from-right img { transform: rotate(-12deg); }
.shimmer.fade { opacity: 0 !important; transition: opacity .6s; pointer-events: none; }
.shimmer.caught { animation: caught .35s ease-out forwards; pointer-events: none; }
.shimmer.gone { display: none; }
@keyframes popIn { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
@keyframes peekL { from { transform: translateX(-120%); } }
@keyframes peekR { from { transform: translateX(120%); } }
@keyframes floaty { 50% { translate: 0 -6px; } }
@keyframes walk { 50% { translate: 0 -4px; } }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes caught { to { transform: scale(1.6); opacity: 0; } }
.drop { position: fixed; left: 0; top: 0; pointer-events: auto; cursor: pointer; z-index: 51; filter: drop-shadow(0 0 4px #ffd35c); }
.drop.flamme { filter: drop-shadow(0 0 6px #ff4a1a); }
.shimmer.anti .glow { background: repeating-conic-gradient(rgba(200,20,10,.55) 0 10deg, transparent 10deg 30deg); }
.shimmer.anti img { filter: drop-shadow(0 0 7px #ff2a2a) drop-shadow(3px 4px 0 rgba(0,0,0,.5)); }
.popup {
  position: fixed; z-index: 60; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  animation: popup 2.6s ease-out forwards;
}
.popup b { display: block; font-family: var(--pix); font-size: clamp(14px, 2.4vw, 22px); color: var(--gold); text-shadow: 3px 3px 0 var(--red-d), 5px 5px 0 #000; white-space: nowrap; }
.popup small { display: block; margin-top: 8px; font-size: 16px; color: var(--cream); text-shadow: 2px 2px 0 #000; font-weight: 500; }
.popup.bad b { color: var(--radler); text-shadow: 3px 3px 0 #2e4a12, 5px 5px 0 #000; }
@keyframes popup { 0% { transform: translate(-50%, -30%) scale(.5); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -110%); opacity: 0; } }
.floater { position: fixed; z-index: 55; pointer-events: none; font-family: var(--pix); font-size: 13px; color: #fff; text-shadow: 2px 2px 0 #000; animation: floatUp 1s ease-out forwards; white-space: nowrap; }
.floater.wasp { color: var(--radler); font-size: 15px; }
@keyframes floatUp { to { transform: translateY(-70px); opacity: 0; } }

/* ---------- Toasts ---------- */
#toasts { position: fixed; left: 50%; top: calc(var(--head-h) + 10px); transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 6px; align-items: center; width: min(380px, calc(100vw - 20px)); pointer-events: none; }
.toast {
  pointer-events: auto; cursor: pointer; display: flex; gap: 10px; align-items: center; width: 100%;
  background: #1c0f07; border: 3px solid var(--gold-d); box-shadow: 0 0 0 2px #000, 4px 4px 0 rgba(0,0,0,.5);
  padding: 8px 12px; font-size: 14px; animation: toastIn .35s ease-out;
}
.toast b { color: var(--gold); font-size: 15px; }
.toast.ach { border-color: var(--gold); background: linear-gradient(#3a2408, #1c0f07); }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .5s; }
.toast.go { cursor: pointer; }
.toast.go::after { content: '›'; margin-left: auto; font-family: var(--pix); font-size: 14px; color: var(--gold); }
.toast-ico img { max-width: 48px; max-height: 52px; }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } }

/* ---------- Modal & Himmel ---------- */
#modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 16px; }
#modal[hidden] { display: none; }
.modal-box { background: #1c0f07; border: 4px solid var(--gold-d); box-shadow: 0 0 0 3px #000, 8px 8px 0 rgba(0,0,0,.5); padding: 18px 22px; max-width: 460px; }
.modal-box h2 { font-family: var(--pix); font-size: 15px; color: var(--gold); margin: 0 0 12px; }
.modal-box p { line-height: 1.45; }
#heaven {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(ellipse at 50% 0%, #fff6d0 0%, #9fd6ff 35%, #5a8ad8 70%, #2a3a8a 100%);
}
#heaven[hidden] { display: none; }
#heaven::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 22% 9% at 15% 78%, rgba(255,255,255,.85), transparent 70%), radial-gradient(ellipse 18% 7% at 24% 72%, rgba(255,255,255,.8), transparent 70%), radial-gradient(ellipse 25% 10% at 82% 84%, rgba(255,255,255,.85), transparent 70%), radial-gradient(ellipse 16% 6% at 72% 20%, rgba(255,255,255,.6), transparent 70%), radial-gradient(ellipse 14% 5% at 30% 18%, rgba(255,255,255,.55), transparent 70%), repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,250,210,.25) 0 6deg, transparent 6deg 18deg); }
.heaven-box { position: relative; text-align: center; max-width: 720px; background: rgba(255,250,235,.92); color: var(--ink); border: 4px solid var(--gold-d); box-shadow: 0 0 0 3px #fff, 0 0 60px rgba(255,240,160,.9); padding: 22px; }
.heaven-box h2 { font-family: var(--pix); font-size: 22px; color: var(--gold-d); margin: 0 0 8px; text-shadow: 2px 2px 0 #fff; }
.heaven-box b { color: var(--red-d); }
.heaven-sub { margin: 0 0 12px; }
#heavenHalos { font-size: 20px; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; }
#heavenUps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.hv { position: absolute; width: 76px; padding: 6px 4px; background: #fff; border: 3px solid #cdbb95; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; }
.hv.can { border-color: var(--gold); box-shadow: 0 0 12px rgba(244,194,60,.9); }
.hv.got { background: #fff3c0; border-color: var(--gold-d); }
.hv.locked { opacity: .45; filter: grayscale(1); }
.hv img { width: 52px; height: 52px; object-fit: contain; }

/* ---------- Radler-Stimmung ---------- */
body[data-radler="2"] #left, body[data-radler="3"] #left { box-shadow: inset -2px 0 0 var(--radler); }
body[data-radler="3"] .logo-text h1 { color: var(--radler); }

/* ---------- Mobile ---------- */
#mobileTabs, #mobileTop { display: none; }
@media (max-width: 900px) {
  :root { --tabs-h: 54px; --top-h: 0px; }
  /* --head-h auf body, damit es --top-h vom body sieht */
  body { --head-h: calc(var(--sat) + var(--tabs-h) + var(--top-h)); padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  body:not([data-tab="left"]) { --top-h: 30px; }
  #game { display: block; height: calc(100vh - var(--head-h)); height: calc(100dvh - var(--head-h)); margin-top: var(--head-h); }
  .panel { height: 100%; border: none !important; box-shadow: none !important; }
  #middle, #right { padding-bottom: var(--sab); }
  body[data-tab="left"] #middle, body[data-tab="left"] #right,
  body[data-tab="middle"] #left, body[data-tab="middle"] #right,
  body[data-tab="right"] #left, body[data-tab="right"] #middle { display: none; }
  /* Kopf: Tabs ganz oben, darunter der Bier-Zähler (außer in der Braustube, die hat ihren eigenen) */
  #mobileTabs { display: flex; gap: 4px; position: fixed; left: 0; right: 0; top: 0; height: calc(var(--sat) + var(--tabs-h)); z-index: 40;
    padding: calc(var(--sat) + 6px) calc(env(safe-area-inset-right, 0px) + 6px) 0 calc(env(safe-area-inset-left, 0px) + 6px);
    background: linear-gradient(#3a0d12, #24140b); border-bottom: 3px solid var(--gold-d); box-shadow: 0 3px 0 #000; }
  body:not([data-tab="left"]) #mobileTop { display: block; }
  #mobileTop { position: fixed; top: calc(var(--sat) + var(--tabs-h)); left: 0; right: 0; height: var(--top-h); z-index: 39; background: #0e0703; border-bottom: 2px solid #3a2212; text-align: center; line-height: 28px; font-size: 15px; white-space: nowrap; overflow: hidden; }
  #mBeer { font-family: var(--pix); font-size: 12px; color: var(--gold-l); }
  #mBps { color: var(--muted); }
  #mobileTabs button {
    position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: -3px;
    font-size: 15px; font-weight: 500; color: var(--cream); background: linear-gradient(#6a4424, #4a2e17);
    border: 2px solid #1a0e07; border-bottom: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.15);
  }
  #mobileTabs .tab-ico { font-size: 17px; line-height: 1; }
  #mobileTabs button.on { background: linear-gradient(var(--gold-l), var(--gold)); color: var(--ink); border-color: var(--gold-l); z-index: 1; }
  #mobileTabs button.on::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -8px; border: 8px solid transparent; border-bottom: none; border-top-color: var(--gold); }
  /* Hinweise an den Tabs: Zahl = kaufbar, NEU = Neues entdeckt, ! = schnell hin */
  .tab-ind { position: absolute; top: -4px; right: -2px; min-width: 20px; padding: 2px 5px; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center; border: 2px solid var(--ink); pointer-events: none; }
  .tab-ind:empty, #mobileTabs button.on .tab-ind { display: none; }
  .tab-ind[data-k="count"] { background: var(--red); color: #fff; }
  .tab-ind[data-k="neu"] { background: var(--gold); color: var(--ink); font-family: var(--pix); font-size: 8px; padding: 3px 4px; animation: indNeu 1.2s ease-in-out infinite alternate; }
  .tab-ind[data-k="alert"] { background: var(--red); color: #fff; font-family: var(--pix); font-size: 10px; border-radius: 50%; min-width: 22px; height: 22px; padding: 2px 0 0; animation: indAlert .8s ease-out infinite; }
  #mobileTabs button.has:not(.on) { box-shadow: inset 0 2px 0 rgba(255,255,255,.15), inset 0 -3px 0 var(--gold); }
  #mobileTabs button.urgent:not(.on) { box-shadow: inset 0 2px 0 rgba(255,255,255,.15), inset 0 -3px 0 var(--red); }
  #mobileTabs button.nudge:not(.on) { animation: tabNudge .7s ease-out; }
  @keyframes indAlert { 0% { box-shadow: 0 0 0 0 rgba(200,32,42,.9); } 100% { box-shadow: 0 0 0 10px rgba(200,32,42,0); } }
  @keyframes tabNudge { 15% { transform: translateY(3px) rotate(-3deg); } 35% { transform: translateY(-2px) rotate(3deg); } 55% { transform: rotate(-2deg); } 75% { transform: rotate(1deg); } 0%, 100% { filter: brightness(1.5); } }
  .logo-text h1 { font-size: 15px; }
  .opt-grid { grid-template-columns: 1fr; }
  #menuBar button { font-size: 13px; padding: 8px 6px; }
  #menuClose { width: 42px; height: 42px; }
  .chip { padding: 8px 4px; font-size: 14px; }
  .bld { min-height: 62px; }
  .ach-ico { width: 40px; height: 40px; }
  #tooltip { font-size: 15px; }
  /* kompakte Toasts oben unter dem Kopf */
  #toasts { top: calc(var(--head-h) + 6px); gap: 4px; }
  .toast { padding: 5px 10px; font-size: 13px; gap: 8px; }
  .toast b { font-size: 13px; }
  .toast-ico img { max-width: 32px; max-height: 34px; }
}
/* Handy quer: Zähler links, Maß rechts, flachere Tabs */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  :root { --tabs-h: 42px; }
  #mobileTabs { padding-top: calc(var(--sat) + 4px); }
  #mobileTabs button { font-size: 14px; }
  #left { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; grid-template-rows: auto auto 1fr; }
  #logo, #counter, #buffs { grid-column: 1; }
  #logo { padding: 6px 10px 4px; }
  #logo img { width: 34px; height: 44px; }
  .logo-text h1 { font-size: 12px; }
  .logo-text span { font-size: 8px; letter-spacing: 2px; }
  #counter { padding: 14px 6px 10px; }
  #buffs { align-content: flex-start; }
  #buffs:not(:empty) { background: none; }
  #altar { grid-column: 2; grid-row: 1 / span 3; min-height: 0; }
  .bld { min-height: 54px; }
  .chip { font-size: 12px; padding: 6px 2px; }
  #menuBar { flex-wrap: nowrap; padding: 5px; }
  #menuBar button { font-size: 12px; padding: 6px 4px; }
  #ticker { height: 40px; gap: 8px; padding: 0 8px 0 6px; }
  #tickerTag { font-size: 7px; padding: 4px 5px 3px; }
  #tickerTag::before { content: 'BOTE'; }
  #ticker.eil #tickerTag::before { content: 'EIL!'; }
  #tickerText { font-size: 13px; }
  .rows-empty { padding: 24px 20px; }
  body[data-tab="left"] #toasts { left: 8px; transform: none; width: calc(34% - 16px); min-width: 170px; top: calc(var(--head-h) + 60px); }
  #beerCount { font-size: 15px; }
}

/* ---------- Bierjagd ---------- */
#combo { margin: 6px auto 0; width: min(240px, 90%); }
#counter > #combo { flex: 0 0 min(240px, 90%); margin: 0 auto; }
#counter > #combo[hidden] { display: none; }
#combo b { display: block; font-family: var(--pix); font-size: 11px; color: #ffb060; text-shadow: 2px 2px 0 #000; }
#combo i { display: block; height: 4px; margin-top: 3px; background: linear-gradient(90deg, #e0701a, #ffd35c); transition: width .1s linear; }
#combo.max b { color: #fff09a; animation: comboPulse .5s ease-in-out infinite alternate; }
@keyframes comboPulse { to { text-shadow: 2px 2px 0 #000, 0 0 10px #ffb000; } }
/* Sonnwendfeuer (A-016): Flammenwand steigt vom Boden bis unters Zeltdach */
/* Barabass’ Glocken, samstags 15:16 (A-152) */
.glocke-fall { position: fixed; top: -60px; z-index: 62; cursor: pointer; touch-action: manipulation; animation: glockeFall 6s linear forwards; filter: drop-shadow(0 0 8px rgba(255,210,90,.9)); }
@keyframes glockeFall { 0% { transform: translateY(0) rotate(-18deg); } 25% { transform: translateY(28vh) rotate(18deg); } 50% { transform: translateY(56vh) rotate(-18deg); } 75% { transform: translateY(84vh) rotate(18deg); } 100% { transform: translateY(calc(100vh + 80px)) rotate(-18deg); } }
.flammenwand { position: fixed; left: 0; right: 0; bottom: 0; height: 120px; z-index: 53; pointer-events: none; animation: flammenwand 1.6s linear forwards;
  background: var(--flamme) repeat-x 0 0 / 30px 39px, linear-gradient(to bottom, rgba(255,220,90,.85), rgba(255,110,20,.75) 45%, rgba(200,30,10,0) 100%);
  filter: drop-shadow(0 -6px 14px rgba(255,120,20,.9)); image-rendering: pixelated; }
@keyframes flammenwand { from { transform: translateY(100%); } to { transform: translateY(calc(-100vh + 48px)); opacity: .3; } }
.tg { position: fixed; left: 0; top: 0; z-index: 52; pointer-events: auto; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tg img { display: block; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.45)); transform-origin: 50% 50%; pointer-events: none; }
.tg-label { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; white-space: nowrap; font-family: var(--pix); font-size: 8px; padding: 2px 4px; background: rgba(20,10,5,.85); color: var(--cream); border: 1px solid rgba(244,194,60,.5); pointer-events: none; }
.tg-frozen img { filter: hue-rotate(170deg) saturate(.5) brightness(1.25) drop-shadow(0 0 4px #c4e8fb); }
.tg-kreisel .tg-label { bottom: auto; top: 110%; background: #b37a18; color: #fff; border-color: #fff09a; }
.tg-kreisel.tg-rad .tg-label { background: #4f8a22; border-color: #c4ef7e; }
.tg-note .tg-label { bottom: auto; top: -4px; left: auto; right: -12px; transform: none; background: #8a3fd1; color: #fff; }
.tg-ranke .tg-label, .tg-exen .tg-label { background: #3a7424; color: #fff; }
.tg-exen .tg-label { background: #b37a18; }
.tg-lobby .tg-label { background: #2e3140; border-color: #ffe93b; color: #ffe93b; }
.tg-lobby.tg-open img { filter: drop-shadow(0 0 8px #ffd35c) drop-shadow(0 0 3px #fff); }
.tg-gold img { filter: drop-shadow(0 0 8px #fff09a) drop-shadow(0 0 3px #fff); }
.tg-glocke img { filter: drop-shadow(0 0 10px #ffd35c); }
.tg-radler img { filter: drop-shadow(0 0 6px #c4ef7e) drop-shadow(2px 3px 0 rgba(0,0,0,.45)); }
.tg-geist img { filter: drop-shadow(0 0 6px #fffbef); }
.tg-shake { animation: tgShake .2s; }
@keyframes tgShake { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
.tg-blink { animation: tgBlink .2s steps(2) infinite; }
@keyframes tgBlink { 50% { visibility: hidden; } }
.tg-hit img { animation: tgHit .35s ease-out forwards; }
@keyframes tgHit { to { transform: scale(1.8); opacity: 0; } }
.tg-bad img { animation: tgBad .4s ease-in forwards; }
@keyframes tgBad { to { transform: scale(.3) rotate(90deg); opacity: 0; } }
.tg-gone { opacity: 0 !important; transition: opacity .3s; }
.tg-spritz { position: fixed; z-index: 53; width: 6px; height: 6px; pointer-events: none; animation: spritz .55s ease-out forwards; }
@keyframes spritz { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.floater.jagd { color: #ffb060; font-size: 14px; }

/* Bierjagd: Treffsicherheit */
.tg-spot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
  background: radial-gradient(circle, #ffffff 0 25%, #fff09a 45%, #ffb000); animation: spotGlint 1.3s ease-in-out infinite;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes spotGlint { 0%, 50%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 72% { transform: scale(1.5) rotate(45deg); opacity: 1; } }
.tg-lobby:not(.tg-open) .tg-spot, .tg-hit .tg-spot, .tg-bad .tg-spot { display: none; }
.hm { position: fixed; z-index: 56; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; animation: hm .35s ease-out forwards; }
.hm::before, .hm::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: linear-gradient(#fff 0 32%, transparent 32% 68%, #fff 68%); transform: rotate(45deg); }
.hm::after { transform: rotate(-45deg); }
.hm-crit { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.hm-crit::before, .hm-crit::after { width: 3px; background: linear-gradient(#ffd35c 0 32%, transparent 32% 68%, #ffd35c 68%); box-shadow: 0 0 6px #ffb000; }
.hm-reflex::before, .hm-reflex::after { background: linear-gradient(#7fe0ff 0 32%, transparent 32% 68%, #7fe0ff 68%); box-shadow: 0 0 5px #3cf; }
.hm-master { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
.hm-master::before, .hm-master::after { width: 4px; background: linear-gradient(#fff09a 0 32%, transparent 32% 68%, #fff09a 68%); box-shadow: 0 0 10px #ff8a00; }
@keyframes hm { from { transform: scale(1.6); opacity: 1; } to { transform: scale(.8); opacity: 0; } }
.jfx-ring { position: fixed; z-index: 54; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; border: 3px solid #ffd35c; box-shadow: 0 0 12px #ffb000; animation: jfxRing .6s ease-out forwards; }
.jfx-ring.jfx-reflex { border-color: #7fe0ff; box-shadow: 0 0 12px #3cf; animation-duration: .4s; }
.jfx-ring.jfx-master { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: none; box-shadow: none;
  background: repeating-conic-gradient(rgba(255,240,150,.85) 0 8deg, transparent 8deg 24deg); animation: jfxRays .85s ease-out forwards; }
@keyframes jfxRing { to { transform: scale(5); opacity: 0; } }
@keyframes jfxRays { from { transform: scale(.4) rotate(0); opacity: 1; } to { transform: scale(7) rotate(60deg); opacity: 0; } }
.jfx-word { position: fixed; z-index: 57; transform: translate(-50%, -100%); pointer-events: none; text-align: center; white-space: nowrap;
  font-family: var(--pix); font-size: 16px; color: #ffd35c; text-shadow: 2px 2px 0 #8a1019, 4px 4px 0 #000; animation: jfxWord 1.25s ease-out forwards; }
.jfx-word em { font-style: normal; color: #fff; }
.jfx-word span { display: block; margin-top: 5px; font-size: 13px; color: #fff; text-shadow: 2px 2px 0 #000; }
.jfx-word small { display: block; margin-top: 4px; font-size: 10px; color: #ff9a40; }
.jfx-word.jfx-reflex { color: #7fe0ff; text-shadow: 2px 2px 0 #134a6a, 4px 4px 0 #000; font-size: 14px; }
.jfx-word.jfx-master { font-size: 22px; color: #fff09a; text-shadow: 2px 2px 0 #c8202a, 4px 4px 0 #000, 0 0 18px #ffb000; }
@keyframes jfxWord { 0% { transform: translate(-50%, -100%) scale(.2); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.35); opacity: 1; }
  28% { transform: translate(-50%, -100%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0; } }
.jfx-flash { position: fixed; inset: 0; z-index: 49; pointer-events: none; background: radial-gradient(circle, rgba(255,250,210,.55), rgba(255,180,0,.15) 60%, transparent); animation: jfxFlash .4s ease-out forwards; }
@keyframes jfxFlash { to { opacity: 0; } }
.jfx-shake { animation: jfxShake .3s; }
@keyframes jfxShake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 1px); } }

/* ---------- Jenseits: Skill-Bäume ---------- */
#heavenTreeWrap { overflow-x: auto; margin: 0 -10px 16px; padding: 4px 10px; }
.tree { position: relative; margin: 0 auto; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.tree-lines line { stroke: rgba(120,90,40,.35); stroke-width: 4; stroke-dasharray: 6 5; }
.tree-lines line.open { stroke: #d9a030; stroke-dasharray: none; }
.tree-lines line.got { stroke: #f4c23c; stroke-width: 5; stroke-dasharray: none; filter: drop-shadow(0 0 4px #ffe080); }
.hv { z-index: 1; }
.heaven-box .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#heaven[data-layer="keller"] { background: radial-gradient(ellipse at 50% 100%, #6a4a10 0%, #2a1606 45%, #0a0503 100%); }
#heaven[data-layer="keller"]::before { background: radial-gradient(circle 6px at 12% 80%, rgba(255,230,140,.8), transparent), radial-gradient(circle 4px at 22% 60%, rgba(255,230,140,.6), transparent), radial-gradient(circle 8px at 80% 70%, rgba(255,230,140,.7), transparent), radial-gradient(circle 5px at 70% 30%, rgba(255,230,140,.5), transparent), radial-gradient(circle 3px at 40% 20%, rgba(255,230,140,.5), transparent), repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 22px), repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 2px, transparent 2px 44px); }
#heaven[data-layer="keller"] .heaven-box { background: rgba(28,16,6,.94); color: var(--cream); border-color: #c9a040; box-shadow: 0 0 0 3px #000, 0 0 60px rgba(255,200,80,.35); }
#heaven[data-layer="keller"] .heaven-box h2 { color: #ffd35c; text-shadow: 2px 2px 0 #000; }
#heaven[data-layer="keller"] .heaven-box b { color: #ffd35c; }
/* Nur ansehen (aus dem Jenseits-Menü): Modal über dem Spiel statt ganzer Himmels-Seite */
#hvClose { display: none; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: none; border: 2px solid var(--gold-d); color: var(--gold-d); font-size: 16px; }
#heaven.view, #heaven.view[data-layer] { background: rgba(0,0,0,.7); }
#heaven.view::before { display: none; }
#heaven.view #hvClose { display: block; }
#heaven .heaven-box { width: min(720px, 100%); box-sizing: border-box; min-width: 0; } /* der Baum scrollt in sich, nicht die Seite */
#heaven.view .heaven-box { padding-top: 26px; animation: hvPop .2s ease-out; }
#heaven.view .heaven-box h2 { padding: 0 40px; }
#heaven.view:not([data-layer="keller"]) .heaven-box { background: linear-gradient(#fff6d0, #e6f3ff); }
#heaven[data-layer="keller"] #hvClose { color: #ffd35c; border-color: #c9a040; }
@keyframes hvPop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
#heaven[data-layer="keller"] .hv { background: #2a1a0a; border-color: #5a4020; color: var(--cream); }
#heaven[data-layer="keller"] .hv.got { background: #4a3410; border-color: #c9a040; }
#heaven[data-layer="zelt"] { background: linear-gradient(#f6f1e6 0 0) top / 100% 0 no-repeat, repeating-linear-gradient(90deg, #f6f1e6 0 40px, #c8202a 40px 80px); } /* A-185: Zeltplane fränkisch rot-weiß */
#heaven[data-layer="zelt"]::before { background: radial-gradient(circle 5px at 10% 12%, #ffd35c, transparent), radial-gradient(circle 5px at 30% 16%, #ff6a5a, transparent), radial-gradient(circle 5px at 50% 12%, #fff09a, transparent), radial-gradient(circle 5px at 70% 16%, #7fe0ff, transparent), radial-gradient(circle 5px at 90% 12%, #ffd35c, transparent), linear-gradient(transparent 70%, rgba(90,52,24,.9) 70%); }
#heaven[data-layer="zelt"] .heaven-box { background: #fff8e8; border: 6px solid transparent; border-image: repeating-linear-gradient(90deg, #c8202a 0 6px, #f6f1e6 6px 12px) 6 / 6px; box-shadow: 0 10px 0 #5a3418, 0 0 60px rgba(255,220,120,.8); }
#heaven[data-layer="zelt"] .heaven-box h2 { color: #c8202a; }

/* ---------- Bierokalypse ---------- */
#doomBar { padding: 10px 12px; background: linear-gradient(#3a0000, #1a0000); border-bottom: 3px solid #b0141a; box-shadow: inset 0 0 30px rgba(255,40,0,.35); }
#doomBar[hidden] { display: none; }
.doom-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.doom-head b { font-family: var(--pix); font-size: 14px; color: #ff5a3a; text-shadow: 2px 2px 0 #000, 0 0 10px #ff2000; animation: doomPulse 1.2s ease-in-out infinite alternate; }
.doom-head span { color: #ffb0a0; font-size: 14px; }
@keyframes doomPulse { to { color: #ffd35c; text-shadow: 2px 2px 0 #000, 0 0 16px #ff6000; } }
.doom-fass { margin: 8px 0; font-size: 13px; color: var(--cream); }
.doom-track { height: 10px; background: #140404; border: 2px solid #000; margin-bottom: 4px; }
.doom-track i { display: block; height: 100%; background: linear-gradient(90deg, #c9700e, #ffd35c); box-shadow: 0 0 8px #ffb000; }
#doomBar .btns { display: flex; gap: 8px; flex-wrap: wrap; }
body[data-doom="1"] #vignette { box-shadow: inset 0 0 200px rgba(160,0,0,.8); animation: doomVig 2s ease-in-out infinite alternate; }
@keyframes doomVig { to { box-shadow: inset 0 0 260px rgba(220,30,0,.9); } }
body[data-doom="1"] .logo-text h1 { color: #ff5a3a; }
.asc .layer { border: 2px solid rgba(244,194,60,.3); padding: 10px 14px; margin-bottom: 14px; background: rgba(0,0,0,.2); }
.asc .layer h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.asc .layer.l2 { border-color: rgba(200,30,20,.5); }
.asc .layer.l3 { border-color: rgba(60,120,220,.6); }
.asc .layer.teaser { opacity: .75; }
.asc .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-box.avert { border-color: #c8202a; box-shadow: 0 0 0 3px #f6f1e6, 0 0 60px rgba(255,220,140,.8); }
.modal-box.avert h2 { color: #ffd35c; }

/* ---------- Bierhimmel: Bierzelt ---------- */
/* A-185: das himmlische Bierzelt ist fränkisch – rot-weiße Zeltplane statt weiß-blauer Rauten */
body[data-bh="1"] #menuBar { background: repeating-linear-gradient(90deg, #c8202a 0 16px, #f6f1e6 16px 32px); }
body[data-bh="1"] #ticker { background: #f6f1e6; color: #4a1010; }
body[data-bh="1"] .store-title { color: #c8202a; text-shadow: 2px 2px 0 #fff; }
body[data-bh="1"] .logo-text h1 { color: #ffd35c; text-shadow: 1px 1px 0 #8a1019, 2px 2px 0 #000, 0 0 8px rgba(255,240,180,.7); }
body[data-bh="1"] #tickerText { color: #4a1010; text-shadow: none; }
body[data-bh="1"] #tickerText b { color: #c8202a; }

/* ---------- Braustube ---------- */
.st-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.st-label { position: absolute; transform: translate(-50%, 0); pointer-events: none; text-align: center; font-size: 11px; line-height: 1.15; color: var(--cream);
  background: rgba(20,10,5,.72); border: 1px solid color-mix(in srgb, var(--sc) 60%, transparent); padding: 1px 5px 2px; white-space: nowrap; }
.st-label.side { transform: translate(0, -50%); text-align: left; }
.st-label[hidden] { display: none; }
.st-label.hand { transform: translate(-100%, -50%); text-align: right; }
.st-labels.big .st-label b { font-size: 10px; }
.st-labels.big .st-label .st-stock, .st-labels.big .st-label .st-rate { font-size: 17px; }
.st-label b { display: block; font-family: var(--pix); font-size: 8px; color: var(--sc); }
.st-label span { display: block; }
.st-label .st-rate { color: #9ad85e; font-size: 10px; }
/* Zahlen in der Fließtext-Schrift: Jersey 10 bleibt auch klein gut lesbar */
.st-label .st-stock, .st-label .st-rate { font-family: var(--ui); font-size: 14px; line-height: 1; }
.st-label .st-rate:empty { display: none; }
.st-label.neck { border-color: #ff4a2a; box-shadow: 0 0 8px rgba(255,60,30,.7); animation: neckPulse 1s ease-in-out infinite alternate; }
.st-label.full .st-stock { color: #ffb060; }
@keyframes neckPulse { to { box-shadow: 0 0 2px rgba(255,60,30,.3); } }
.neck-info { font-size: 12px; }
.floater.st { font-size: 11px; color: #d8f0ff; }
.floater.st.bad { color: #ff9a80; }
.bld { position: relative; }
.bld-st { display: flex; gap: 2px; margin-right: 6px; }
.stb { width: 8px; height: 8px; background: var(--sc); border: 1px solid #000; display: block; }
.stb.all { width: 10px; background: conic-gradient(#5aa8e8 0 60deg, #e0a030 0 120deg, #5fae3a 0 180deg, #d8c890 0 240deg, #b07a46 0 300deg, #f5a623 0); }
.area-teaser { margin: 6px 8px; padding: 8px 10px; border: 2px dashed rgba(244,194,60,.45); color: var(--muted); font-size: 13px; }
.area-teaser b { display: block; color: var(--gold); font-family: var(--pix); font-size: 10px; margin-bottom: 3px; }
.area-teaser[hidden] { display: none; }
.tz-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tz-b { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tz-b img { width: 36px; height: 36px; filter: brightness(0) opacity(.55); }
.tz-b small { font-size: 12px; color: #9a7a5a; }
.tz-bar { margin-top: 8px; }
.tz-bar[hidden] { display: none; }
/* ---------- Geschichte: Filme & Missionen ---------- */
#film { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.88); display: grid; place-items: center; padding: 12px; }
#film[hidden] { display: none; }
.film-box { position: relative; width: min(960px, 100%); }
.film-box canvas { display: block; width: 100%; aspect-ratio: 240 / 135; image-rendering: pixelated; border: 4px solid var(--gold-d); box-shadow: 0 0 0 3px #000, 0 0 40px rgba(244,194,60,.25); cursor: pointer; background: #000; }
.film-title { position: absolute; left: 0; right: 0; top: 10%; text-align: center; pointer-events: none; animation: hvPop .5s ease-out; }
.film-title[hidden] { display: none; }
.film-title small { display: block; font-family: var(--pix); font-size: 11px; color: var(--gold-l); letter-spacing: 3px; text-shadow: 2px 2px 0 #000; }
.film-title b { display: block; font-family: var(--pix); font-size: clamp(16px, 3.4vw, 30px); color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 20px rgba(0,0,0,.8); margin: 6px 0; }
.film-title span { font-size: 18px; color: var(--cream); text-shadow: 2px 2px 0 #000; }
.film-text { min-height: 74px; margin-top: 10px; padding: 10px 14px; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--gold); font-size: 19px; line-height: 1.3; }
.film-text b { display: block; font-family: var(--pix); font-size: 9px; color: var(--red); margin-bottom: 4px; letter-spacing: 1px; }
.film-text b:empty { display: none; }
.film-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
#mission { margin: 6px auto 0; max-width: 92%; padding: 5px 9px; background: rgba(40,20,8,.85); border: 2px solid var(--gold-d); cursor: pointer; text-align: left; font-size: 14px; line-height: 1.25; }
#mission[hidden] { display: none; }
#mission small { display: block; color: var(--gold); font-size: 12px; }
#mission em { font-style: normal; color: var(--muted); }
.story .plaketten { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 14px; }
.plak { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-family: var(--pix); font-size: 9px; color: #6a5040; background: #2a1a0e; border: 2px dashed #5a4030; }
.plak.on { color: var(--ink); background: radial-gradient(circle at 35% 35%, var(--gold-l), var(--gold-d)); border: 2px solid var(--ink); box-shadow: 0 0 8px rgba(244,194,60,.6); }
.story .plaketten b { margin-left: 8px; color: var(--gold); }
.kap { margin-bottom: 10px; padding: 10px 12px; background: rgba(0,0,0,.25); border: 1px solid #3a2212; }
.kap.cur { border: 2px solid var(--gold-d); background: rgba(60,30,10,.4); }
.kap.fin h3 { color: #9ef08a; }
.kap h3 { margin: 0 0 4px; font-size: 18px; font-weight: 400; color: var(--gold); }
.kap h3 small { color: var(--muted); font-size: 14px; margin-left: 6px; }
.kap p { margin: 4px 0 8px; color: var(--cream); }
.kap .mis { list-style: none; margin: 0 0 8px; padding: 0; }
.kap .mis li { padding: 3px 0; color: var(--cream); }
.kap .mis li.ok { color: #9ef08a; }
.kap .mis small { margin-left: 6px; color: var(--muted); }
.misbar { display: inline-block; vertical-align: middle; width: 90px; height: 6px; margin-left: 8px; background: #140a05; border: 1px solid var(--wood); }
.misbar i { display: block; height: 100%; background: var(--gold); }
.kap-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.kap-btns .btn { padding: 5px 10px; font-size: 14px; }
/* ---------- Anzeige: Dinge ausblenden (Auge-Knopf in der Braustube) ---------- */
body.hideStock .st-label.roh, body.hideTicker #ticker { display: none; }
#viewBtn { position: absolute; right: 8px; top: 8px; z-index: 4; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: rgba(28,16,6,.85); border: 2px solid var(--gold-d); box-shadow: 2px 2px 0 #000; cursor: pointer; opacity: .75; }
#viewBtn.on { opacity: 1; }
#viewBtn .eye { position: relative; width: 18px; height: 10px; border: 2px solid var(--gold); border-radius: 50% / 60%; }
#viewBtn .eye::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 4px; background: var(--gold); }
#viewBtn.on .eye::before { content: ''; position: absolute; left: -4px; top: 3px; width: 26px; height: 2px; background: var(--red); transform: rotate(-30deg); }
#viewPop { position: absolute; right: 8px; top: 48px; z-index: 5; display: grid; gap: 6px; min-width: 190px; padding: 10px; background: #1a0e07; border: 2px solid var(--gold-d); box-shadow: 3px 3px 0 #000; cursor: default; }
#viewPop[hidden] { display: none; }
#viewPop > b { font-family: var(--pix); font-size: 10px; color: var(--gold); }
#viewPop .toggle { padding: 5px 8px; font-size: 14px; }
#menuBody .opt-h { margin: 4px 0 8px; }
.opt-h small { font-family: var(--ui); font-size: 14px; color: var(--muted); font-weight: normal; }
/* ---------- Sakristei ---------- */
#skBtn { position: absolute; left: 80px; bottom: 8px; z-index: 3; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; background: rgba(28,16,6,.85); border: 2px solid var(--gold-d); box-shadow: 2px 2px 0 #000; cursor: pointer; }
#skBtn[hidden] { display: none; }
#skBtn img { width: 40px; height: 40px; }
#skBtn .tab-ind { position: absolute; top: -8px; right: -10px; background: var(--gold); color: var(--ink); font-family: var(--pix); font-size: 7px; padding: 2px 3px; border: 2px solid var(--ink); }
#skBtn .tab-ind[hidden] { display: none; }
#sakristei[hidden] { display: none; }
.sk-box { position: relative; width: min(1020px, 100%); background: linear-gradient(#2a1810, #1a0e07); border: 4px solid var(--gold-d); box-shadow: 0 0 0 3px #000, 0 0 50px rgba(244,194,60,.25); padding: 18px 20px; animation: hvPop .2s ease-out; }
.sk-box h2 { margin: 0 44px 4px 0; font-family: var(--pix); font-size: 18px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.sk-sub { margin: 0 0 12px; color: var(--muted); }
.sk-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: none; border: 2px solid var(--gold-d); color: var(--gold); font-size: 16px; }
.sk-grid { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.sk-fig { position: relative; height: 330px; background: radial-gradient(ellipse at 50% 60%, #3a2414, #1a0e07 70%); border: 2px solid #3a2212; }
.sk-body { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); }
.sk-body img { width: 132px; height: 176px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.5)); }
.sk-body.full::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,220,100,.55), transparent 65%); animation: buffGlow 1.2s ease-in-out infinite alternate; z-index: -1; }
.sk-slot { position: absolute; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px; background: #140a05; border: 2px solid var(--rc, #3a2212); cursor: pointer; }
.sk-slot img { width: 36px; height: 36px; }
.sk-slot small { font-size: 11px; color: var(--muted); }
.s-kopf { left: 8px; top: 8px; } .s-gewand { right: 8px; top: 8px; } .s-haende { left: 8px; top: 120px; }
.s-stab { right: 8px; top: 120px; } .s-amulett { left: 8px; bottom: 8px; } .s-fuesse { right: 8px; bottom: 8px; }
.sk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sk-count { color: var(--muted); }
.sk-sets { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.sk-set { padding: 8px 10px; background: rgba(0,0,0,.25); border: 1px solid #3a2212; }
.sk-set.cursed { border-color: #8fd14b; background: rgba(143,209,75,.08); }
.sk-set h3 { margin: 0 0 6px; font-size: 16px; font-weight: 400; color: var(--cream); }
.sk-set h3 small { color: var(--muted); font-size: 13px; margin-left: 6px; }
.sk-set h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sk-wear { margin-left: auto; padding: 3px 9px; font-size: 13px; }
.sk-items { display: flex; flex-wrap: wrap; gap: 5px; }
.sk-item { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: #140a05; border: 2px solid var(--rc); cursor: pointer; }
.sk-item img { width: 36px; height: 36px; }
.sk-item.missing { border-color: #3a2212; border-style: dashed; cursor: help; }
.sk-item.missing img { filter: brightness(0) opacity(.45); }
.sk-item.worn { box-shadow: 0 0 0 2px var(--gold-l), 0 0 10px var(--gold); }
.sk-item.worn::after { content: '✓'; position: absolute; right: 1px; bottom: -2px; color: var(--gold-l); font-size: 13px; text-shadow: 1px 1px 0 #000; }
.sk-item.neu::before { content: 'NEU'; position: absolute; top: -7px; left: -4px; font-family: var(--pix); font-size: 6px; background: var(--gold); color: var(--ink); padding: 1px 2px; border: 1px solid var(--ink); }
.sk-bonus { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: #7a6048; }
.sk-bonus li { padding: 1px 0; }
.sk-bonus li b { display: inline-block; min-width: 18px; color: inherit; }
.sk-bonus li.on { color: var(--cream); }
.sk-bonus li.on b { color: var(--gold); }
@media (max-width: 900px) {
  .sk-grid { grid-template-columns: 1fr; }
  .sk-fig { height: 290px; }
  .sk-sets { max-height: none; }
}
#beute { position: fixed; left: 50%; top: 38%; z-index: 86; transform: translateX(-50%); width: min(380px, calc(100vw - 20px)); padding: 10px 14px 12px; background: linear-gradient(#2a1810, #1a0e07); border: 3px solid var(--gold); box-shadow: 0 0 0 3px #000, 0 0 40px rgba(244,194,60,.5); }
#beute[hidden] { display: none; }
#beute.show { animation: hvPop .25s ease-out; }
#beute > small { display: block; font-family: var(--pix); font-size: 10px; color: var(--gold); letter-spacing: 3px; margin-bottom: 6px; }
.bt-row { display: flex; gap: 12px; align-items: center; }
.bt-row img { width: 60px; height: 60px; }
.bt-row b { display: block; font-size: 20px; font-weight: 400; }
.bt-row span { display: block; color: var(--muted); font-size: 14px; }
.bt-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.bt-btns .btn { padding: 6px 12px; font-size: 14px; }
.bt-on { color: #9ef08a; margin-right: auto; }
/* Tipp-Schild: dieses Gebäude behebt den Engpass am günstigsten */
.bld.tipp::after { content: 'TIPP'; position: absolute; top: 4px; left: 4px; padding: 2px 4px; font-family: var(--pix); font-size: 7px; color: var(--ink); background: #9ef08a; border: 2px solid var(--ink); z-index: 2; pointer-events: none; }
#nextGoal { margin-top: 5px; padding: 3px 8px; display: inline-block; font-size: 14px; color: var(--muted); background: rgba(0,0,0,.35); border: 1px solid #3a2212; }
#nextGoal[hidden] { display: none; }
#nextGoal b { color: var(--gold); }
.row-teaser { margin: 0; padding: 22px 14px; text-align: center; color: var(--muted); font-size: 14px; background: repeating-linear-gradient(135deg, #1a0e07 0 14px, #140a05 14px 28px); border-top: 3px solid #0e0703; }
.row-teaser b { display: block; font-family: var(--pix); font-size: 11px; color: var(--gold-d); margin-bottom: 4px; }
.row-teaser[hidden] { display: none; }
.up.cat-lager { --tc: #5a7a9a; }
.tt-ico.cat-lager { --tc: #5a7a9a; }
.tag-lager { background: #4a6a8a; }

/* ---------- Brotzeit, Keller, Kombos, Ereignisse ---------- */
.bz-cool { font-size: 12px; color: var(--muted); margin-right: 8px; }
.bld.bz.locked { opacity: .55; }
.reife { margin: 8px; padding: 10px; border: 2px solid #5c3a1e; background: rgba(0,0,0,.25); }
.reife-head { font-family: var(--pix); font-size: 10px; color: var(--gold); margin-bottom: 6px; }
.reife-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.reife-btns .btn { font-size: 13px; padding: 5px; }
.reife-btns small { display: block; font-size: 11px; color: var(--muted); }
.reife-frac { margin-top: 6px; display: flex; gap: 4px; align-items: center; font-size: 12px; }
.reife-info { margin: 5px 0; font-size: 13px; }
.reife .btn { width: 100%; }
#kombo { position: fixed; left: 50%; top: 22%; z-index: 58; transform: translate(-50%, -50%) scale(0); pointer-events: none; text-align: center; padding: 14px 28px;
  background: linear-gradient(#8a1019, #c8202a); border: 4px solid #fff09a; box-shadow: 0 0 0 3px #000, 0 0 40px #ffb000; color: #fff; }
#kombo.show { animation: komboIn 2.8s ease-out forwards; }
#kombo small { display: block; font-family: var(--pix); font-size: 10px; color: #ffd35c; letter-spacing: 3px; }
#kombo b { display: block; font-family: var(--pix); font-size: clamp(16px, 3vw, 26px); color: #fff09a; text-shadow: 3px 3px 0 #000; margin: 4px 0; }
#kombo span { font-size: 14px; }
@keyframes komboIn { 0% { transform: translate(-50%, -50%) scale(0) rotate(-8deg); } 12% { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); } 20% { transform: translate(-50%, -50%) scale(1) rotate(0); } 85% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9); opacity: 0; } }
#eventBar { padding: 7px 12px; background: linear-gradient(#1e3a5a, #122436); border-bottom: 3px solid #5aa8e8; font-size: 14px; position: relative; }
#eventBar.bad { background: linear-gradient(#4a2a0a, #2a1604); border-bottom-color: #ff8a30; }
#eventBar[hidden] { display: none; }
#eventBar b { font-family: var(--pix); font-size: 11px; color: #ffd35c; margin-right: 6px; }
#eventBar em { position: absolute; right: 10px; top: 7px; font-style: normal; color: var(--muted); }
#eventBar .doom-track { margin: 5px 0 2px; height: 7px; }
#eventBar small { color: var(--muted); }

/* ---------- Cheat-Modus (?cheat=1) ---------- */
#cheat { position: fixed; left: 8px; bottom: 8px; z-index: 95; background: rgba(10,20,10,.94); border: 2px solid #5fae3a; padding: 6px; font-size: 12px; color: #c4ef7e; max-width: 290px; }
#cheat .ch-head { display: flex; justify-content: space-between; font-family: var(--pix); font-size: 10px; margin-bottom: 4px; }
#cheat .ch-row { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 3px; align-items: center; }
#cheat .ch-row span { width: 44px; }
#cheat button { background: #1e3a1e; color: #c4ef7e; border: 1px solid #3a7424; padding: 3px 6px; font-size: 12px; cursor: pointer; }
#cheat button.on { background: #5fae3a; color: #000; }

/* ---------- Neu entdeckt: kleine Marke an Laden-Einträgen, Reihen & Menüs ---------- */
.fresh { position: relative; }
.fresh::before { content: 'NEU'; position: absolute; z-index: 2; top: 2px; right: 2px; padding: 2px 3px; font-family: var(--pix); font-size: 7px; line-height: 1; color: var(--ink); background: var(--gold); border: 1px solid var(--ink); pointer-events: none; animation: indNeu 1.2s ease-in-out infinite alternate; }
.bld.fresh::before { top: 4px; right: auto; left: 44px; }
.row.fresh::before { top: 4px; right: 6px; font-size: 8px; padding: 3px 4px; }
.bld.fresh, .up.fresh { box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(244,194,60,.5); }
@keyframes indNeu { to { box-shadow: 0 0 10px var(--gold); transform: scale(1.08); } }

/* ---------- Tutorial: der Bierschoff erklärt ---------- */
#coachSpot { position: fixed; z-index: 73; pointer-events: none; border-radius: 8px; transition: left .35s, top .35s, width .35s, height .35s, opacity .3s; }
#coachSpot[hidden] { display: none; }
#coachSpot.dim { box-shadow: 0 0 0 200vmax rgba(10,4,2,.55); }
#coachSpot::before { content: ''; position: absolute; inset: -4px; border: 3px solid var(--gold-l); border-radius: 10px; box-shadow: 0 0 0 2px #000, 0 0 16px var(--gold); animation: spotRing 1s ease-in-out infinite alternate; }
#coachSpot i { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 26px; height: 22px; margin-left: -13px; background: var(--gold); filter: drop-shadow(0 0 0 #000) drop-shadow(2px 2px 0 #000);
  clip-path: polygon(30% 0, 70% 0, 70% 45%, 100% 45%, 50% 100%, 0 45%, 30% 45%); animation: spotArrow .6s ease-in-out infinite alternate; }
#coachSpot.below i { bottom: auto; top: calc(100% + 8px); transform: rotate(180deg); animation-name: spotArrowUp; }
@keyframes spotRing { to { inset: -9px; box-shadow: 0 0 0 2px #000, 0 0 26px var(--gold-l); } }
@keyframes spotArrow { to { translate: 0 -8px; } }
@keyframes spotArrowUp { to { translate: 0 8px; } }
#coach {
  position: fixed; left: 50%; bottom: calc(12px + var(--sab)); z-index: 76; width: min(470px, calc(100vw - 20px)); transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 4px; pointer-events: none; transition: top .3s, bottom .3s;
}
#coach[hidden] { display: none; }
#coach.top { bottom: auto; top: calc(var(--head-h) + 10px); }
#coach > img { width: 70px; height: 92px; flex: none; margin-bottom: -4px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.6)); pointer-events: auto; }
#coach.hop > img { animation: hop .45s ease-out; }
.coach-box {
  position: relative; flex: 1; pointer-events: auto; background: var(--cream); color: var(--ink); border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px var(--gold), 5px 5px 0 3px rgba(0,0,0,.55); padding: 9px 12px 8px; font-size: 16px; line-height: 1.3;
}
.coach-box::before { content: ''; position: absolute; left: -13px; bottom: 16px; border: 8px solid transparent; border-right: 10px solid var(--ink); border-left: none; }
.coach-box b { color: var(--red-d); }
.coach-who { font-family: var(--pix); font-size: 8px; letter-spacing: 1px; color: var(--red); margin-bottom: 5px; display: flex; justify-content: space-between; gap: 8px; }
.coach-dots { display: flex; gap: 3px; }
.coach-dots[hidden] { display: none; }
.coach-dots i { width: 7px; height: 7px; background: #d8c8a8; border: 1px solid var(--ink); }
.coach-dots i.on { background: var(--gold); }
.coach-text { min-height: 42px; }
.coach-text.in { animation: coachIn .35s ease-out; }
@keyframes coachIn { from { opacity: 0; transform: translateY(4px); } }
.coach-prog { position: relative; height: 24px; margin: 8px 0 2px; background: #d8c8a8; border: 2px solid var(--ink); }
.coach-prog[hidden] { display: none; }
.coach-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-d), var(--gold)); transition: width .3s; }
.coach-prog span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink); white-space: nowrap; }
.coach-prog span:empty { display: none; }
/* zurückgetreten: kleine Karte, nur Satz + Zähler */
#coach.mini { width: min(360px, calc(100vw - 20px)); }
#coach.mini > img { width: 42px; height: 55px; }
#coach.mini .coach-who, #coach.mini .coach-foot { display: none; }
#coach.mini .coach-text { min-height: 0; font-size: 14px; }
#coach.mini .coach-box { padding: 6px 9px 6px; }
#coach.mini .coach-prog span { font-size: 14px; }
.coach-chain { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 7px; font-size: 14px; }
.coach-chain span { display: flex; align-items: center; gap: 5px; opacity: .55; }
.coach-chain span::after { content: '\2610'; margin-left: auto; }
.coach-chain span.ok { opacity: 1; }
.coach-chain span.ok::after { content: '\2713'; color: #2a8a2a; }
.coach-chain img { width: 22px; height: 22px; }
.coach-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.coach-foot:empty { display: none; }
.coach-skip { background: none; border: none; padding: 6px 2px; font-size: 13px; color: #7a5a3a; text-decoration: underline; }
.coach-foot .btn { padding: 7px 14px; font-size: 15px; }
.coach-legend { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: 14px; }
.coach-legend .tab-ind { position: static; display: inline-block; justify-self: center; }
@media (max-width: 900px) {
  #coach > img { width: 53px; height: 69px; }
  .coach-box { font-size: 15px; padding: 8px 10px 7px; }
}
/* die Legende nutzt die Tab-Hinweise auch auf dem Desktop */
.coach-legend .tab-ind { min-width: 20px; padding: 2px 5px; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center; border: 2px solid var(--ink); }
.coach-legend .tab-ind[data-k="count"] { background: var(--red); color: #fff; }
.coach-legend .tab-ind[data-k="neu"] { background: var(--gold); color: var(--ink); font-family: var(--pix); font-size: 8px; padding: 3px 4px; }
.coach-legend .tab-ind[data-k="alert"] { background: var(--red); color: #fff; font-family: var(--pix); font-size: 10px; border-radius: 50%; width: 22px; height: 22px; padding: 3px 0 0; }
/* Handy quer: Sprechkarte links über dem Zähler, die Braustube rechts bleibt frei */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #coach { left: calc(8px + env(safe-area-inset-left, 0px)); transform: none; width: min(430px, 46vw); }
  .coach-box { font-size: 14px; }
}

/* ---------- Festzelt: eigener Bildschirm für die Bierjagd ---------- */
#zelt { position: fixed; inset: 0; z-index: 43; background: #3a2210; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#zelt[hidden] { display: none; }
#zelt canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
#zelt canvas.zelt-bg { pointer-events: none; } /* gemalte Szene (hd.js) unter der Leinwand */
.zelt-hud { position: absolute; left: 0; right: 0; top: 0; height: 48px; padding: calc(4px + var(--sat, 0px)) 8px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.zelt-hud > * { pointer-events: auto; }
.zelt-beer { font-family: var(--pix); font-size: 12px; color: var(--gold-l); text-shadow: 2px 2px 0 #000; margin-top: 4px; padding: 6px 8px; background: rgba(28,16,6,.78); border: 2px solid rgba(244,194,60,.5); }
.zelt-hud .btn { font-size: 13px; padding: 6px 10px; background: rgba(28,16,6,.8); }
.zelt-hud #combo { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); margin: 0; pointer-events: none; }
.zelt-hahn { position: absolute; cursor: default; z-index: 1; }
.zelt-hint { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-family: var(--pix); font-size: 14px; color: #fff; text-shadow: 2px 2px 0 #000; text-align: center; opacity: 0; pointer-events: none; width: min(90vw, 760px); line-height: 1.6; }
.zelt-hint.show { animation: zeltHint 3s ease-out forwards; }
@keyframes zeltHint { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 70% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }
#zeltBtn { display: block; margin: 8px auto 0; font-size: 14px; }
#zeltBtn[hidden] { display: none; }
body.im-zelt #mascot { visibility: hidden; }

/* Auskatern zwischen den Kapiteln */
.misbar.kater { display: block; width: 100%; margin: 4px 0 0; }
.misbar.kater i { background: linear-gradient(90deg, #8a6a9a, #f4c23c); }
.kater-note { padding: 6px 10px; background: rgba(90,60,110,.25); border-left: 3px solid #8a6a9a; }

/* Bierstil-Baum im Himmelreich */
.tree-label { position: absolute; left: 12px; right: 0; text-align: left; font-family: var(--pix); font-size: 11px; color: var(--gold-l); text-shadow: 2px 2px 0 #000; pointer-events: none; }
.tree-label b { color: #fff09a; }
@media (max-width: 900px) { #zeltBtn { margin-top: 5px; padding: 5px 10px; font-size: 12px; } }
/* Radler-Trinker im Festzelt: steht kurz im Weg */
.zelt-radler { position: fixed; bottom: 0; z-index: 53; pointer-events: auto; cursor: pointer; animation: zrIn .4s ease-out; transform-origin: bottom center; touch-action: manipulation; }
.zelt-radler img { display: block; filter: drop-shadow(0 0 8px rgba(166,224,90,.6)); }
.zelt-radler.stups { animation: zrStups .25s; }
.zelt-radler.weg { transition: transform .45s ease-in, opacity .45s; transform: translateY(40%) scale(.8); opacity: 0; pointer-events: none; }
.zr-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; margin-bottom: 6px; padding: 6px 9px; background: #f6f1e6; color: #241008; border: 2px solid #8fd14b; font-size: 13px; line-height: 1.25; }
@keyframes zrIn { from { transform: translateY(60%); } to { transform: none; } }
@keyframes zrStups { 50% { transform: rotate(-6deg) translateX(-8px); } }
/* Braustube aufgeräumt: Zahlen lassen Klicks durch (Wespen, Glas), nur der Name zeigt die Info */
.st-label b { pointer-events: auto; cursor: help; }
.st-labels.compact .st-label:not(.side) .st-stock { display: none; }
.st-labels.compact .st-label .st-rate { font-size: 9px; }
#buffs { flex-wrap: nowrap; overflow: hidden; }
.buff.more { font-family: var(--pix); font-size: 11px; color: var(--gold-l); animation: none; }
@media (max-width: 900px) { .buff { width: 36px; height: 36px; } .buff img { width: 28px; max-height: 32px; } #buffs:not(:empty) { padding: 4px 6px 8px; } }
/* Feedback-Formular */
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-kind { display: flex; gap: 6px; }
.fb-form textarea, .fb-form input:not([type]) { width: 100%; background: #0e0703; color: var(--cream); border: 2px solid #3a2212; font: inherit; font-size: 15px; padding: 8px; user-select: text; -webkit-user-select: text; }
.fb-form textarea { min-height: 120px; resize: vertical; }
.fb-img { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.fb-img .btn { pointer-events: none; }

/* ---------- Quest und Zeitreise: Minispiel-Fenster (minispiel.js) ---------- */
#mini { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 10px; }
#mini[hidden] { display: none; }
.mini-box { background: #1c0f07; border: 4px solid var(--gold-d); box-shadow: 0 0 0 3px #000, 8px 8px 0 rgba(0,0,0,.5); width: min(960px, 100%); max-height: 100%; overflow: auto; padding: 10px 12px; }
.mini-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mini-titel { font-family: var(--pix); font-size: 13px; color: var(--gold); flex: 1; line-height: 1.4; }
.mini-bild canvas { display: block; width: 100%; aspect-ratio: 16 / 10; image-rendering: pixelated; background: #000; touch-action: none; cursor: pointer; }
.mini-tasten { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 8px 0 0; padding: 0 6%; }
.mini-tasten:empty { display: none; }
.mini-pfeile, .mini-aktion { display: flex; gap: 14px; }
.mini-pfeile:empty { visibility: hidden; }
.mini-pfeile.kreuz { display: grid; grid-template-columns: repeat(3, auto); grid-template-areas: ". u ." "l . r" ". d ."; gap: 6px; }
.mini-pfeile.kreuz [data-k="u"] { grid-area: u; } .mini-pfeile.kreuz [data-k="d"] { grid-area: d; }
.mini-pfeile.kreuz [data-k="l"] { grid-area: l; } .mini-pfeile.kreuz [data-k="r"] { grid-area: r; }
.mini-k { min-width: 54px; min-height: 44px; font-size: 18px; touch-action: none; user-select: none; }
@media (pointer: coarse) { .mini-k { min-width: 62px; min-height: 56px; font-size: 22px; } .mini-aktion .mini-k { min-width: 76px; min-height: 64px; } }
.mini-text { margin-top: 8px; line-height: 1.45; }
.mini-wissen { margin: 8px 0; padding: 6px 10px; background: #fbf3dc; color: #3a2410; border-left: 4px solid #c8952a; font-size: 13px; } /* Bierwissen (A-131) */
.mini-wissen b { display: block; font-family: var(--pix); font-size: 9px; color: #8a2a10; margin-bottom: 3px; }
.mini-text h3 { font-family: var(--pix); font-size: 12px; color: var(--gold); margin: 4px 0 8px; }
.mini-text .btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.mini-liste { list-style: none; padding: 0; margin: 6px 0 0; columns: 2 260px; }
.mini-liste li { padding: 3px 0; break-inside: avoid; }
.mini-liste li.ok { color: #9ef08a; }
.mini-liste li.dran { color: #fff09a; }
.mini-go { padding: 1px 8px; font-size: 11px; margin-left: 6px; }
.mini-bier a { color: #9ef0ff; }

.mis-akt { margin: 4px 0 2px 18px; }

/* Büttner-Reiter: css/buettner.css */


/* ---------- Schritt für Schritt enthüllen (enthuellen.js) ---------- */
body.ohne-laden #right > *, body.ohne-reich #middle > * { visibility: hidden; }
body.ohne-laden #right::after, body.ohne-reich #middle::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px;
  text-align: center; color: var(--muted, #c8b596); font-size: 15px; line-height: 1.5; opacity: .75; }
body.ohne-laden #right::after { content: '🔒 Der Laden öffnet, sobald du dir den ersten Helfer leisten kannst.'; }
body.ohne-reich #middle::after { content: '🔒 Hier entsteht bald dein Bierreich.'; }
body.ohne-laden #mobileTabs [data-tab="right"], body.ohne-reich #mobileTabs [data-tab="middle"] { display: none; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) scale(.98); filter: brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
.panel.enthuellt, #mobileTabs button.enthuellt { animation: auftauchen .9s ease-out; }

/* Laden: Alle kaufen, Automatik an/aus, Max für Jünger (30.09.2026) */
.j-bar-kauf { display: flex; gap: 3px; align-items: center; padding: 6px 8px; font-size: 13px; color: var(--muted); }
.j-bar-kauf button { padding: 4px 10px; font-size: 13px; color: var(--muted); background: #2a170b; border: 2px solid #3a2212; }
.j-bar-kauf button.on { color: var(--ink); background: var(--gold); border-color: var(--gold-l); font-weight: 500; }

/* ---------- Himmelreich: mystischer Nachthimmel (Cookie-Clicker-Stimmung), 30.09.2026 ---------- */
#heaven[data-layer="himmel"]:not(.view) { background: radial-gradient(ellipse at 50% 0%, #6a5aa8 0%, #2a2466 35%, #120f33 70%, #07061a 100%); }
#heaven[data-layer="himmel"]:not(.view)::before {
  background:
    radial-gradient(circle 1.5px at 8% 12%, #fff, transparent), radial-gradient(circle 1px at 18% 40%, #fff, transparent), radial-gradient(circle 2px at 27% 8%, #fff8c0, transparent),
    radial-gradient(circle 1px at 36% 28%, #fff, transparent), radial-gradient(circle 1.5px at 44% 62%, #cfe0ff, transparent), radial-gradient(circle 1px at 53% 18%, #fff, transparent),
    radial-gradient(circle 2px at 61% 44%, #fff8c0, transparent), radial-gradient(circle 1px at 70% 9%, #fff, transparent), radial-gradient(circle 1.5px at 79% 33%, #fff, transparent),
    radial-gradient(circle 1px at 88% 58%, #cfe0ff, transparent), radial-gradient(circle 2px at 94% 14%, #fff, transparent), radial-gradient(circle 1px at 12% 76%, #fff, transparent),
    radial-gradient(circle 1.5px at 33% 88%, #fff8c0, transparent), radial-gradient(circle 1px at 66% 80%, #fff, transparent), radial-gradient(circle 1.5px at 85% 90%, #fff, transparent),
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,230,150,.10) 0 5deg, transparent 5deg 15deg);
  animation: hvFunkeln 6s ease-in-out infinite alternate;
}
@keyframes hvFunkeln { from { opacity: .75; } to { opacity: 1; } }
#heaven[data-layer="himmel"]:not(.view) .heaven-box { background: rgba(18,14,48,.82); color: #ece6ff; border-color: #c9a040; box-shadow: 0 0 0 3px #000, 0 0 80px rgba(160,140,255,.45), inset 0 0 40px rgba(120,100,220,.25); }
#heaven[data-layer="himmel"]:not(.view) .heaven-box h2 { color: #ffe9a0; text-shadow: 0 0 12px rgba(255,220,120,.8), 2px 2px 0 #000; }
#heaven[data-layer="himmel"]:not(.view) .heaven-box b { color: #ffd35c; }
#heaven[data-layer="himmel"] .hv { border-radius: 50%; width: 76px; height: 76px; padding: 4px; justify-content: center; background: radial-gradient(circle, #3a3270 0%, #1a1640 75%); color: #e8e0ff; border-color: #5a50a0; }
#heaven[data-layer="himmel"] .hv img { width: 40px; height: 40px; }
#heaven[data-layer="himmel"] .hv span { font-size: 12px; }
#heaven[data-layer="himmel"] .hv.can { border-color: #ffd35c; box-shadow: 0 0 16px rgba(255,211,92,.9), 0 0 36px rgba(160,140,255,.6); animation: hvPuls 1.6s ease-in-out infinite; }
#heaven[data-layer="himmel"] .hv.got { background: radial-gradient(circle, #fff6c8 0%, #e0b040 80%); color: #3a2410; border-color: #fff09a; box-shadow: 0 0 18px rgba(255,230,140,.8); }
#heaven[data-layer="himmel"] .tree-lines line { stroke: rgba(160,150,230,.35); }
#heaven[data-layer="himmel"] .tree-lines line.open { stroke: #b8a8ff; }
@keyframes hvPuls { 50% { box-shadow: 0 0 26px rgba(255,211,92,1), 0 0 50px rgba(160,140,255,.8); } }
.hv-nebel { font-size: 13px; opacity: .8; font-style: italic; }
.tree-label.zutat { text-align: center; }

/* ---------- Sakristei als eigener Raum in der Mitte (A-077) ---------- */
#sakristei { position: absolute; inset: 0; z-index: 6; background: #140a05; overflow-y: auto; display: block; place-items: center; padding: 0; }
#sakristei .sk-box { width: auto; min-height: 100%; box-sizing: border-box; border: none; box-shadow: none; padding: 14px 16px; }
.sk-pause { margin-left: 8px; padding: 2px 6px; font-size: 8px; vertical-align: middle; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
#skBtn.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 2px 2px 0 #000; }
@media (max-width: 1200px) and (min-width: 901px) { .sk-grid { grid-template-columns: 1fr; } }
.sk-back { display: block; margin: 10px auto; }
body.sk-offen #right > :not(.store-title):not(#skTab) { display: none !important; }
body.sk-offen #skTab { display: block !important; }

/* ---------- Festzelt: die lästigen Leute (A-016) ---------- */
.zelt-radler img { image-rendering: pixelated; }
.zelt-radler .zr-bubble { max-width: 300px; font-size: 15px; padding: 8px 11px; border-width: 3px; box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.zelt-radler .zr-bubble.neu { animation: zrSprech .25s ease-out; }
@keyframes zrSprech { from { transform: translateX(-50%) scale(.8); } to { transform: translateX(-50%) scale(1); } }
.zr-name { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); white-space: nowrap; padding: 2px 6px; font-size: 11px; color: #fffbef; background: rgba(26,14,7,.75); pointer-events: none; }
.zr-rauch { position: absolute; top: 18%; right: 8%; width: 26px; height: 26px; border-radius: 50%; background: rgba(210,210,210,.7); animation: zrRauch 2.4s ease-out infinite; pointer-events: none; }
.zr-rauch.r2 { animation-delay: 1.2s; }
@keyframes zrRauch { from { transform: translate(0, 0) scale(.4); opacity: .9; } to { transform: translate(24px, -70px) scale(1.8); opacity: 0; } }
.zelt-kotze { position: fixed; z-index: 54; width: 190px; height: 120px; transform: rotate(var(--r, 0deg)); cursor: pointer; animation: zkRein .3s ease-out, zkWeg 7s linear forwards;
  background: radial-gradient(circle 22px at 30% 40%, #b8d84a 90%, transparent), radial-gradient(circle 30px at 55% 55%, #e8c040 90%, transparent), radial-gradient(circle 18px at 75% 35%, #8fbf3a 90%, transparent),
    radial-gradient(circle 14px at 20% 70%, #d8a030 90%, transparent), radial-gradient(circle 10px at 45% 25%, #ff8a5a 90%, transparent), radial-gradient(circle 8px at 82% 70%, #f06a8a 90%, transparent),
    radial-gradient(ellipse 48% 40% at 50% 50%, #c8c040 80%, transparent); filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
@keyframes zkRein { from { transform: rotate(var(--r, 0deg)) scale(.2); } to { transform: rotate(var(--r, 0deg)) scale(1); } }
@keyframes zkWeg { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Brauerei-Stickeralbum (A-099) ---------- */
.kw-wrap { position: relative; margin: 8px 0; border: 3px solid #3a2212; box-shadow: 0 0 0 2px var(--gold-d); background: #e8dcc0; }
.kw-karte { display: block; width: 100%; touch-action: none; cursor: grab; }
.kw-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.kw-zoom .btn { min-width: 36px; padding: 4px 8px; font-size: 18px; }
.kw-karte-info { padding: 8px 10px; background: rgba(255,255,255,.06); border: 2px solid #3a2212; }
.kw-karte-info h3 { margin: 0 0 4px; }
.kw-badge { display: inline-block; font-size: 12px; padding: 2px 6px; border-radius: 3px; vertical-align: middle; color: #2a1508; }
.kw-badge.laeuft { background: #f4c23c; } .kw-badge.we { background: #ff8a2a; } .kw-badge.bald { background: #7fb0ff; } .kw-badge.ok { background: #6fd05a; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip small { opacity: .75; } .kw-chip.ok { border-color: #6fd05a; }
#menuBar button.kw-live { animation: kwLeucht 1.6s ease-in-out infinite; }
@keyframes kwLeucht { 50% { box-shadow: 0 0 12px 2px rgba(244,194,60,.9); color: var(--gold-l); } }
.sticker { position: fixed; z-index: 75; /* über den Toasts (70): wer ihn sieht, soll ihn auch antippen können */ cursor: pointer; animation: stkRein .5s ease-out, stkWackel 1.2s ease-in-out .5s infinite; filter: drop-shadow(0 0 10px rgba(255,220,120,.9)); touch-action: manipulation; }
@keyframes stkRein { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@keyframes stkWackel { 50% { transform: rotate(8deg) scale(1.06); } }
.album-bez h3 { margin: 14px 0 6px; }
.album-bez h3 small { color: var(--muted); font-weight: normal; }
.album-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.album-st { display: flex; gap: 8px; align-items: flex-start; padding: 6px; background: rgba(255,255,255,.05); border: 2px solid #3a2212; }
.album-st > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.album-st span { color: var(--muted); }
.album-st a { color: var(--gold); }
.album-st.leer { opacity: .5; }
.album-st.leer i { display: grid; place-items: center; width: 60px; height: 68px; border: 2px dashed #5a4020; font-style: normal; font-size: 24px; color: #5a4020; }

/* ---------- Schafkopf auf der Bergkirchweih (A-060, A-164, schafkopf-ui.js) ----------
   Vollbild wie das Festzelt. Karten = Ausschnitte aus img/schafkopf/<deck>.png (9×4 Karten à 80×124 Pixel),
   vergrößert nur in ganzen Stufen: --zh (Hand), --zm (Tisch), --zp (Porträts). */
#skTisch { --zh: 2; --zm: 1; --zp: 2; --deck: url(../img/schafkopf/klassik.png);
  position: fixed; inset: 0; z-index: 96; display: flex; flex-direction: column; overflow: hidden; color: #f6f1e6;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,230,160,.18) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(ellipse at 50% 45%, #2f7438 0%, #1e5226 55%, #10301a 100%);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#skTisch[hidden] { display: none; }
#skTisch::before { content: ""; position: absolute; inset: 6px; border: 4px solid #6a4020; box-shadow: inset 0 0 0 3px #3a2210, inset 0 0 0 6px #8a5a32, 0 0 0 2px #000; pointer-events: none; }
body.sk-offen { overflow: hidden; }
.skt-kopf { position: relative; display: flex; align-items: center; gap: 6px; padding: 12px 14px 4px; z-index: 5; }
.skt-titel { font-family: var(--pix); font-size: 12px; color: var(--gold); flex: 1; text-shadow: 2px 2px 0 #000; display: flex; align-items: center; gap: 2px; min-width: 0; }
.skt-kopf .btn.on { background: var(--gold); color: #2a1608; }
.sk-sym { display: inline-block; width: 22px; height: 22px; background: url(../img/schafkopf/tisch.png) calc(var(--i) * -24px) -96px; image-rendering: pixelated; vertical-align: middle; flex: none; font-style: normal; }
.btn .sk-sym { width: 15px; height: 15px; background-position: calc(-96px - var(--i) * 17px) -96px; margin: -3px 2px 0 0; }

.skt-feld { position: relative; flex: 1; min-height: 0; }
.skt-sitz { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; z-index: 2; }
.skt-sitz.s-oben { left: 50%; top: 2px; transform: translateX(-50%); flex-direction: row; gap: 10px; }
.skt-sitz.s-links { left: 18px; top: 50%; transform: translateY(-58%); }
.skt-sitz.s-rechts { right: 18px; top: 50%; transform: translateY(-58%); }
.skt-sitz.s-unten { left: 50%; bottom: 4px; transform: translateX(-50%); }
.skt-bild { width: calc(72px * var(--zp)); height: calc(96px * var(--zp)); background: url(../img/schafkopf/tisch.png) calc(var(--i) * -72px * var(--zp)) 0 / calc(288px * var(--zp)) calc(118px * var(--zp)) no-repeat; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.45)); flex: none; }
.skt-sitz.dran .skt-bild { animation: sktAtmen 1s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255,220,120,.9)) drop-shadow(4px 4px 0 rgba(0,0,0,.45)); }
.skt-sitz.hupf .skt-bild, .skt-unten.hupf .skt-bild { animation: sktHupf .45s ease-out; }
@keyframes sktAtmen { 50% { transform: translateY(-3px); } }
@keyframes sktHupf { 30% { transform: translateY(-14px) scale(1.05); } }
.skt-name { font-family: var(--pix); font-size: 10px; background: rgba(0,0,0,.55); padding: 4px 7px; border: 2px solid #3a2210; white-space: nowrap; }
.skt-sitz.dran .skt-name { color: var(--gold-l); border-color: var(--gold); }
.skt-sitz.spieler .skt-name::before { content: "★ "; color: var(--gold); }
.skt-stiche { color: #bfe7a8; }
.skt-verdeckt { display: flex; min-height: 40px; }
.skt-verdeckt .skk { margin-left: -64px; } .skt-verdeckt .skk:first-child { margin-left: 0; }
.skt-blase { position: absolute; top: -8px; left: 50%; transform: translate(-50%, -100%); white-space: nowrap; background: #fbf8f0; color: #2a1608; padding: 5px 9px; border: 3px solid #2a1608; font-size: 13px; font-weight: 700; z-index: 8; box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.skt-blase::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top-color: #2a1608; }
.skt-blase.neu { animation: sktBlase .3s steps(4) both; }
@keyframes sktBlase { from { opacity: 0; } }
.s-oben .skt-blase { top: auto; bottom: -10px; transform: translate(-50%, 100%); } .s-oben .skt-blase::after { bottom: auto; top: -9px; border-top-color: transparent; border-bottom-color: #2a1608; }
.s-unten .skt-blase { top: -14px; }

/* Karten: Ausschnitt aus dem Bogen */
.skk { --z: 1; position: relative; display: inline-block; flex: none; width: calc(80px * var(--z)); height: calc(124px * var(--z)); font-style: normal;
  background: var(--deck) calc(var(--sx) * -80px * var(--z)) calc(var(--sy) * -124px * var(--z)) / calc(720px * var(--z)) calc(496px * var(--z)) no-repeat;
  image-rendering: pixelated; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4)); transition: transform .3s ease, opacity .3s ease, filter .2s; }
.skk.rueck { --sx: 8; --sy: 0; }
.skt-hand .skk { --z: var(--zh); }
.skt-mitte .skk { --z: var(--zm); }

.skt-info { position: relative; z-index: 3; margin: 0 18px; font-size: 13px; line-height: 1.5; text-align: center; background: rgba(0,0,0,.42); padding: 4px 10px; border: 2px solid rgba(0,0,0,.4); }
.skt-info .sep { opacity: .45; margin: 0 7px; }
.skt-unten { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 0 14px; height: calc(124px * var(--zh) * .8 + 16px); }
.skt-unten > .skt-bild { flex: none; align-self: flex-end; margin-bottom: 8px; }
.skt-unten.dran > .skt-bild { animation: sktAtmen 1s ease-in-out infinite; }
.skt-hand { display: flex; justify-content: center; align-items: flex-start; align-self: flex-start; padding-top: 16px; min-width: 0; }
.skt-hand .skk + .skk { margin-left: calc(min(6px, (100vw - 40px - 80px * var(--zh) * var(--n, 6)) / max(1, var(--n, 6) - 1))); }
#skTisch:not(.schmal) .skt-hand .skk + .skk { margin-left: calc(min(6px, (100vw - 220px - 80px * var(--zh) * var(--n, 6)) / max(1, var(--n, 6) - 1))); }
.skt-hand .skk.kann { cursor: pointer; animation: sktGlanz 1.6s ease-in-out infinite; }
.skt-hand .skk.kann:hover { transform: translateY(calc(-14px * var(--zh))) rotate(-2deg); z-index: 5; }
.skt-hand .skk.nicht { filter: brightness(.5) saturate(.5) drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.skt-hand .skk.trumpf::after { content: ""; position: absolute; left: 14%; top: 4%; width: 6px; height: 6px; background: #fff7c0; box-shadow: 0 0 6px 2px rgba(255,220,100,.9); opacity: 0; animation: sktFunkeln 2.4s steps(6) infinite; animation-delay: calc(var(--i) * .37s); }
.skt-hand .skk.ausgeteilt { animation: sktAusteilen .45s cubic-bezier(.2,.8,.3,1.2) backwards; }
.skt-verdeckt .skk.ausgeteilt { animation: sktRein .3s ease-out backwards; }
@keyframes sktGlanz { 50% { filter: drop-shadow(0 0 5px rgba(255,230,120,.95)) drop-shadow(2px 3px 0 rgba(0,0,0,.4)); } }
@keyframes sktFunkeln { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes sktAusteilen { from { transform: translate(0, -60vh) rotate(-30deg) scale(.6); opacity: 0; } }
@keyframes sktRein { from { opacity: 0; } }

.skt-mitte { position: absolute; left: 50%; top: 54%; width: 0; height: 0; z-index: 3; }
.skk.im-stich { position: absolute; left: calc(-40px * var(--z)); top: calc(-62px * var(--z)); animation: sktRein .25s ease-out; }
.skk.im-stich.von-unten { transform: translate(0, calc(50px * var(--z))) rotate(2deg); } .skk.im-stich.von-oben { transform: translate(0, calc(-50px * var(--z))) rotate(-3deg); }
.skk.im-stich.von-links { transform: translate(calc(-56px * var(--z)), 0) rotate(-10deg); } .skk.im-stich.von-rechts { transform: translate(calc(56px * var(--z)), 0) rotate(9deg); }
.skk.im-stich.sieger { filter: drop-shadow(0 0 8px rgba(255,230,120,1)) drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.skk.im-stich.rueckblick { opacity: .85; }
.skk.weg-unten { transform: translate(0, 300px) scale(.4) rotate(20deg) !important; opacity: 0; } .skk.weg-oben { transform: translate(0, -300px) scale(.4) rotate(-20deg) !important; opacity: 0; }
.skk.weg-links { transform: translate(-400px, 0) scale(.4) rotate(-30deg) !important; opacity: 0; } .skk.weg-rechts { transform: translate(400px, 0) scale(.4) rotate(30deg) !important; opacity: 0; }
.skt-konfetti { position: absolute; left: 0; top: 0; width: 6px; height: 6px; animation: sktKonfetti 1.2s cubic-bezier(.2,.7,.4,1) forwards; z-index: 9; }
@keyframes sktKonfetti { to { transform: translate(var(--dx), calc(var(--dy) + 260px)) rotate(400deg); opacity: 0; } }
#skTisch.wackeln { animation: sktWackeln .5s steps(8); }
@keyframes sktWackeln { 25% { transform: translate(-6px, 3px); } 50% { transform: translate(5px, -4px); } 75% { transform: translate(-3px, -2px); } }

.skt-aktion { position: relative; z-index: 6; padding: 6px 14px 16px; min-height: 56px; text-align: center; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5) 40%); }
.skt-text { margin: 4px 0; line-height: 1.45; } .skt-text.klein { font-size: 13px; opacity: .92; } .skt-text.warn { color: #ffd27a; }
.skt-ansage { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .skt-ansage .btn.dim { opacity: .6; }
.skt-wahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; } .skt-wahl span { min-width: 160px; }
.skt-ergebnis { background: rgba(0,0,0,.4); padding: 6px 12px; border-left: 4px solid #9ef08a; margin: 6px auto; max-width: 760px; text-align: left; } .skt-ergebnis.nied { border-color: #ff8a7a; }
.skt-ergebnis h3 { font-family: var(--pix); font-size: 12px; color: var(--gold); margin: 2px 0 4px; }
.skt-stat { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; background: rgba(0,0,0,.3); padding: 6px 10px; margin: 6px 0; }
.btn.klein { padding: 2px 8px; font-size: 12px; }

/* Fenster über dem Tisch (Lobby, Regeln, Decks) */
.skt-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; width: min(860px, calc(100% - 24px)); max-height: calc(100% - 70px); overflow: auto;
  background: linear-gradient(#3a2414, #24150b); border: 4px solid var(--gold-d); box-shadow: 0 0 0 3px #000, 8px 8px 0 rgba(0,0,0,.5); padding: 12px 16px; }
.skt-panel[hidden] { display: none; }
.skt-panel.neu { animation: sktPanel .25s steps(5) both; }
@keyframes sktPanel { from { opacity: 0; } }
.skt-panel h2 { font-family: var(--pix); font-size: 15px; color: var(--gold); margin: 2px 0 8px; text-shadow: 2px 2px 0 #000; }
.skt-regeln { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 6px 0; }
.skt-regel { text-align: left; background: rgba(0,0,0,.3); border: 2px solid #5a3a1e; color: #f6f1e6; padding: 6px 8px; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.35; }
.skt-regel b { display: block; font-size: 13px; margin-bottom: 2px; } .skt-regel.on { border-color: var(--gold); background: rgba(244,194,60,.14); }
.skt-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; }
.skt-deck { display: flex; flex-direction: column; gap: 4px; text-align: left; background: rgba(0,0,0,.3); border: 2px solid #5a3a1e; color: #f6f1e6; padding: 8px; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.35; }
.skt-deck.on { border-color: var(--gold); background: rgba(244,194,60,.14); } .skt-deck b { font-size: 13px; }
.skt-deck.zu .skt-deck-karten { filter: grayscale(1) brightness(.35); } .skt-deck.zu { cursor: default; }
.skt-deck-karten { display: flex; justify-content: center; padding: 4px 0 8px; }
.skt-deck-karten .skk:nth-child(1) { transform: rotate(-7deg); } .skt-deck-karten .skk:nth-child(3) { transform: rotate(7deg); }
.skt-deck-karten .skk + .skk { margin-left: -40px; }

/* schmale Bildschirme (Handy): Gegner kleiner, oben in einer Reihe */
#skTisch.schmal .skt-titel { font-size: 0; } #skTisch.schmal .skt-kopf .btn { padding: 4px 7px; font-size: 11px; }
#skTisch.schmal .skt-sitz.s-links, #skTisch.schmal .skt-sitz.s-rechts, #skTisch.schmal .skt-sitz.s-oben { top: 2px; transform: none; flex-direction: column; gap: 2px; }
#skTisch.schmal .skt-sitz.s-links { left: 10px; } #skTisch.schmal .skt-sitz.s-rechts { right: 10px; } #skTisch.schmal .skt-sitz.s-oben { left: 50%; transform: translateX(-50%); }
#skTisch.schmal .skt-sitz .skt-bild { --zp: 1; }
#skTisch.schmal .skt-verdeckt { min-height: 0; } #skTisch.schmal .skt-verdeckt .skk { display: none; }
#skTisch.schmal .skt-verdeckt::after { content: attr(data-n); font-family: var(--pix); font-size: 8px; color: #cfe8c0; }
#skTisch.schmal .skt-name { font-size: 8px; padding: 3px 4px; }
#skTisch.schmal .skt-unten > .skt-bild { display: none; }
#skTisch.schmal .skt-info { font-size: 11px; margin: 0 8px; }
#skTisch.schmal .skt-mitte { top: 62%; }
#skTisch.schmal .skt-blase { font-size: 11px; padding: 3px 6px; }
#skTisch.schmal .s-links .skt-blase { left: 0; transform: translate(0, 100%); top: auto; bottom: -6px; } #skTisch.schmal .s-rechts .skt-blase { left: auto; right: 0; transform: translate(0, 100%); top: auto; bottom: -6px; }
#skTisch.schmal .s-oben .skt-blase { bottom: -6px; }
#skTisch.schmal .s-links .skt-blase::after, #skTisch.schmal .s-rechts .skt-blase::after { display: none; }
#skTisch.schmal .skt-aktion { padding: 4px 8px 12px; font-size: 13px; }
#skTisch.schmal .skt-wahl span { min-width: 0; width: 100%; }

/* ---------- Hopfen- und Gerstengarten (A-061, garten-ui.js) ---------- */
.gt-intro { display: flex; gap: 14px; align-items: flex-start; } .gt-intro img { flex: none; }
.gt-kopf { margin: 0 0 8px; }
.gt-szene { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #6aa83a url(../img/hd/mini_garten.png) center / cover no-repeat; image-rendering: pixelated; border: 4px solid #3a2410; box-shadow: 0 0 0 2px #000, 6px 6px 0 rgba(0,0,0,.4); overflow: hidden; }
.gt-feld { position: absolute; left: 3%; right: 3%; bottom: 4%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2% 2%; align-items: end; }
.gt-beet { position: relative; aspect-ratio: 48 / 44; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.gt-erde { width: 100%; aspect-ratio: 48 / 22; image-rendering: pixelated; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.gt-pflanze { position: absolute; bottom: 28%; left: 50%; transform: translateX(-50%); width: 84%; image-rendering: pixelated; transform-origin: 50% 100%; animation: gtWiegen 3s ease-in-out infinite; pointer-events: none; }
.gt-pflanze.hopfen { width: 76%; }
@keyframes gtWiegen { 50% { transform: translateX(-50%) rotate(1.5deg); } }
.gt-tag { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-family: var(--pix); font-size: 8px; white-space: nowrap; color: #fbf8f0; background: rgba(26,12,4,.75); padding: 2px 4px; pointer-events: none; }
.gt-beet.leer .gt-tag { top: auto; bottom: 18%; background: rgba(26,12,4,.45); }
.gt-beet.reif .gt-tag { background: #f4c23c; color: #3a2410; animation: kwLeucht 1.2s ease-in-out infinite; }
.gt-beet.durst .gt-tag { background: #3d78c8; }
.gt-beet:hover .gt-erde { filter: brightness(1.15) drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.gt-kanne { position: absolute; top: 10%; right: 0; width: 40%; image-rendering: pixelated; animation: gtGiessen .9s ease-out forwards; pointer-events: none; }
@keyframes gtGiessen { 0% { transform: translate(20%, -30%) rotate(10deg); opacity: 0; } 30% { opacity: 1; transform: rotate(-30deg); } 100% { transform: rotate(-35deg); opacity: 0; } }
.gt-wahl { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; background: rgba(36,20,10,.92); border: 3px solid var(--gold-d); padding: 8px 10px; z-index: 3; }
.gt-wahl[hidden] { display: none; } .gt-wahl b { width: 100%; text-align: center; color: var(--gold); } .gt-wahl small { opacity: .75; margin-left: 4px; } .gt-wahl img { vertical-align: middle; }
.gt-stat { margin: 8px 0 0; }
.gt-wissen { display: flex; gap: 12px; align-items: flex-start; } .gt-wissen img { width: 72px; flex: none; image-rendering: pixelated; }
@media (max-width: 600px) { .gt-feld { grid-template-columns: repeat(4, 1fr); } .gt-szene { aspect-ratio: 4 / 5; } .gt-tag { font-size: 7px; } }
/* Tutorial: das Prinzip eines Clickers in einer Zeile (tutorial.js) */
.coach-loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 8px 0; font-size: 12px; line-height: 1.3; text-align: center; }
.coach-loop span { background: rgba(244,194,60,.15); border: 2px solid rgba(244,194,60,.5); padding: 4px 6px; }
.coach-loop i { font-style: normal; color: var(--gold); font-weight: 700; }

/* „So geht’s“-Boxen (A-174): oben im Menü, aufklappbar */
.sogehts { background: #1a0e07; border-bottom: 3px solid #0e0703; font-size: 13px; color: var(--cream); }
.sogehts summary { cursor: pointer; padding: 8px 10px; color: var(--gold); font-weight: bold; list-style: none; user-select: none; }
.sogehts summary::-webkit-details-marker { display: none; }
.sogehts summary::after { content: '▾'; float: right; color: var(--gold-d); transition: transform .15s; }
.sogehts:not([open]) summary::after { transform: rotate(-90deg); }
.sogehts ul { margin: 0; padding: 0 12px 10px 28px; line-height: 1.4; }
.sogehts li + li { margin-top: 4px; }
.modal-body .sogehts, #menuBody .sogehts { border: 2px solid #3a2212; margin-bottom: 10px; }

/* Kerwa-Karte: Fortschritt, Legende, alle Feste (A-175) */
.kw-fort { margin: 0 0 10px; display: grid; gap: 6px; }
.kw-gesamt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kw-gesamt .kw-bar { flex: 1 1 120px; }
.kw-bar { display: inline-block; height: 8px; background: #2a1508; border: 1px solid #5c3a1e; position: relative; overflow: hidden; vertical-align: middle; }
.kw-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3aa83a, #9ad85e); }
.kw-bezirke { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 12px; }
.kw-bez { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.kw-bez .kw-bar { width: 100%; }
.kw-bez.voll span, .kw-bez.voll b { color: #9ad85e; }
.kw-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.kw-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin-right: 5px; border: 1px solid #2a1508; vertical-align: -1px; }
.kw-alle { margin-top: 12px; border: 2px solid #3a2212; background: #1a0e07; }
.kw-alle summary { cursor: pointer; padding: 8px 10px; color: var(--gold); font-weight: bold; }
.kw-alle h4 { margin: 8px 10px 4px; color: var(--cream); }
.kw-alle h4 small { color: var(--muted); font-weight: normal; }
.kw-zeile { display: grid; grid-template-columns: 18px 1fr; gap: 0 6px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid #2a1508; padding: 5px 10px; color: var(--cream); font: inherit; font-size: 13px; cursor: pointer; }
.kw-zeile span { grid-row: span 2; color: var(--muted); }
.kw-zeile small { color: var(--muted); }
.kw-zeile.ok span, .kw-zeile.ok b { color: #9ad85e; }
.kw-zeile:hover { background: #24140a; }

/* A-179 Statistik: Kennzahlen als Kacheln, darunter Gruppen */
.st-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.st-kacheln > div { background: #1a0e07; border: 2px solid #3a2212; box-shadow: inset 0 0 0 1px rgba(244,194,60,.12); padding: 8px 10px; display: grid; gap: 2px; }
.st-kacheln span { font-size: 12px; color: var(--muted); }
.st-kacheln b { font-size: 17px; color: var(--gold-l); line-height: 1.25; }
.st-kacheln small { font-size: 12px; color: var(--muted); }
table.stats tr.st-gruppe th { text-align: left; padding: 14px 6px 5px; font-family: var(--pix); font-size: 11px; letter-spacing: 1px; color: var(--gold); border-bottom: 2px solid var(--gold-d); }
table.stats tr.st-gruppe:first-child th { padding-top: 2px; }
@media (max-width: 900px) {
  /* Handy: Finger-taugliche Knöpfe, beide Ebenen */
  #menuBar > button { padding: 7px 6px; font-size: 12px; }
  #menuBar > button[data-menu=""], #menuBar > button[data-menu="mis"], #menuBar > button[data-menu="spiele"], #menuBar > button.asc-btn { padding: 9px 4px; font-size: 13px; }
  #tickerText { font-size: 13px; line-height: 1.25; }
}

/* ================= A-180 „Ruhige Bühne“: pro Spalte eine schmale Kopfzeile ================= */
/* --- links: Logo klein, Zähler kompakt, Mission statt „Nächstes Gebäude“ --- */
@media (min-width: 0px) { /* A-180: auch am Handy nur eine schmale Logo-Zeile */
  #logo { padding: 6px 12px; gap: 10px; }
  #logo img { width: 26px; height: 34px; }
  .logo-text h1 { font-size: 13px; text-shadow: 1px 1px 0 var(--red-d), 2px 2px 0 #000; }
  .logo-text span { display: none; }
  #version { display: inline; margin: 0 0 0 8px; font-size: 10px; }
  .logo-text { display: flex; align-items: baseline; flex-wrap: wrap; }
}
#counter { padding: 6px 10px 8px; gap: 6px; }
.count-row { gap: 2px 12px; }
.count-row .beer-unit { display: inline; margin: 0 0 0 6px; font-size: 10px; }
.count-row .count-main { display: flex; align-items: baseline; }
.count-row #bpsCount { padding-left: 12px; font-size: 13px; line-height: 1.35; }
.count-row #bpsCount > b { font-family: var(--pix); font-size: 12px; color: var(--cream); }
.count-row #bpsCount .neck-info { display: block; font-size: 12px; color: var(--muted); }
/* Mission ist die Begleitung – „Nächstes Gebäude“ nur, wenn gerade keine Mission läuft (der Laden zeigt den TIPP ohnehin) */
#counter:has(> #mission:not([hidden])) > #nextGoal { display: none !important; }
#counter > #mission { flex-basis: 100%; }
#counter > #nextGoal { flex-basis: 100%; padding: 4px 8px; font-size: 13px; }
/* Festzelt: kleiner Knopf auf der Bühne, gegenüber vom Auge */
#altar .zelt-auf { position: absolute; left: 8px; top: 8px; z-index: 6; margin: 0; padding: 5px 9px; font-size: 13px; }
#altar .zelt-auf[hidden] { display: none; }
@media (max-width: 900px) { #altar .zelt-auf span { display: none; } #altar .zelt-auf { padding: 6px 8px; font-size: 16px; } }

/* --- Mitte: eine Menüreihe, Verwaltung hinter ☰ --- */
#menuBar { padding: 6px; gap: 4px; }
#menuBar > button { padding: 6px 8px; }
#menuBar > button[data-menu=""], #menuBar > button[data-menu="mis"], #menuBar > button[data-menu="spiele"], #menuBar > button.asc-btn { padding: 7px 8px; font-size: 13px; }
#menuBar > button.asc-btn.neben { order: 3; flex: 1 1 auto; font-size: 12px; padding: 6px 8px; background: linear-gradient(#6e4826, #4a2e17); color: #e8d5b0; }
#menuBar > .mb-mehr { order: 1; flex: 0 0 auto; font-size: 13px; padding: 7px 10px; position: relative; background: linear-gradient(#5c3a1e, #3a2212); color: var(--gold); }
#menuBar.mehr > .mb-mehr { background: linear-gradient(#b07a46, #7a4c26); color: #fff; }
#menuBar > .mb-mehr .mb-punkt { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px #2a170b; }
#menuBar > .mb-mehr .mb-punkt[hidden] { display: none; }
/* zugeklappt: Umbruch und alles aus der zweiten Reihe weg (die Knöpfe bleiben im DOM, Code und Tests finden sie) */
#menuBar:not(.mehr) > .mb-umbruch, #menuBar:not(.mehr) > button:not(.mb-mehr):not([data-menu=""]):not([data-menu="mis"]):not([data-menu="spiele"]):not(.asc-btn),
#menuBar:not(.mehr) > button.asc-btn.neben { display: none; }
#menuBar > button[hidden] { display: none !important; }
/* Bote: schlank, höchstens zwei Zeilen */
#ticker { height: auto; min-height: 34px; padding: 4px 10px 4px 8px; gap: 10px; }
#tickerTag { font-size: 7px; padding: 4px 6px 3px; }
#tickerText { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Menütitel schmal */
.menu-head { padding: 6px 10px 6px 14px; }
.menu-head h2 { font-size: 13px; }
#menuClose { width: 30px; height: 30px; font-size: 14px; }
/* „So geht’s“ zugeklappt: nur eine kleine Zeile */
.sogehts:not([open]) { background: none; border: 0; margin-bottom: 4px; }
.sogehts:not([open]) summary { display: inline-block; padding: 4px 8px; font-size: 12px; color: var(--gold-d); border: 1px solid #3a2212; }
/* Kerwa-Karte: eine Fortschrittszeile, Details aufklappbar */
details.kw-fort { margin-bottom: 8px; }
details.kw-fort > summary { list-style: none; cursor: pointer; }
details.kw-fort > summary::-webkit-details-marker { display: none; }
details.kw-fort .kw-mehr { font-style: normal; font-size: 12px; color: var(--gold-d); }
details.kw-fort[open] .kw-mehr { display: none; }
details.kw-fort[open] > .kw-bezirke { margin: 8px 0 6px; }

/* ================= A-185 „Fränkisch statt bayerisch“: Frankenrechen und rot-weißes Zackenband ================= */
/* Kleiner Frankenrechen (rot, drei weiße Spitzen von unten) hinter dem Namen */
.logo-text h1::after { content: ''; display: inline-block; width: 15px; height: 17px; margin-left: 7px; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17' shape-rendering='crispEdges'%3E%3CclipPath id='s'%3E%3Cpath d='M0 0H15V11L13 13.5L10 15.5L7.5 17L5 15.5L2 13.5L0 11Z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Crect width='15' height='17' fill='%23c8202a'/%3E%3Cpath d='M0 17V9L2.5 2L5 9L7.5 2L10 9L12.5 2L15 9V17Z' fill='%23f6f1e6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 #000); }
/* Unter dem Logo ein Zackenband wie der Rechen: rot oben, weiße Spitzen von unten */
#logo { border-bottom: 2px solid var(--gold-d); padding-bottom: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' shape-rendering='crispEdges'%3E%3Crect width='8' height='5' fill='%23c8202a'/%3E%3Cpath d='M0 5V4H1V3H2V2H3V1H5V2H6V3H7V4H8V5Z' fill='%23f6f1e6'/%3E%3C/svg%3E") left bottom / 16px 10px repeat-x, linear-gradient(#3a0d12, #24140b); }