/* Einstellbare Darstellungswerte */
:root {
  --zombie-size: 120px;        /* Größe des Zombie-Symbols (Schrift, bei Grafik ohne Wirkung) */
  --zombie-img-h: 130px;       /* Höhe der Zombie-Grafik */
  --zombie-hp-width: 100px;    /* Breite des Lebensbalkens unter dem Zombie */
  --zombie-far-opacity: .22;   /* Deckkraft von Zombies außerhalb des Aktionsradius */
  --close-size: 60px;           /* Größe des Schließen-Knopfs (X) der Menü-Ansichten */
  --close-font: 34px;           /* Größe des X darin */
  --sheet-max-h: 90vh;         /* Höchste Höhe der Menü-Ansichten (Statistik, Rucksack, Ausrüstung …) */
  --dock-btn-size: 105px;      /* Kantenlänge der Menü-Buttons unten (vorher ca. 70 px) */
  --dock-font: 15px;           /* Beschriftung der Menü-Buttons */
  --dock-icon: 39px;           /* Symbolgröße der Menü-Buttons */
  --navtarget-size: 102px;     /* Größe des Ziel-Symbols auf der Karte, z. B. Apotheke (vorher 34 px) */
  --home-icon-size: 60px;      /* Größe des Home-Base-Symbols auf der Karte */
  --safe-color: #3ddc6a;       /* Farbe von Rand und Hinweis in der Home Base */
  --safe-tint: rgba(61,220,106,.22);  /* Grünfärbung der ganzen Karte in der Home Base */
  --safe-border: 8px;          /* Breite des leuchtenden Randes */
  --safe-glow: rgba(61,220,106,.6);   /* Leuchten am Rand */
  --safe-off-color: #f2c230;   /* Farbe von Rand und Hinweis in der Home Base, wenn das Feuer nicht brennt */
  --safe-off-tint: rgba(242,194,48,.22);  /* Gelbfärbung der ganzen Karte */
  --safe-off-glow: rgba(242,194,48,.6);   /* Leuchten am Rand */
  --safe-font: 18px;           /* Schriftgröße des Hinweises */
}

html, body { touch-action: none; -webkit-user-select: none; user-select: none; margin: 0; height: 100%; background: #111418; font-family: system-ui, sans-serif; overscroll-behavior: none; }
#map { position: fixed; inset: 0; }
/* dunkler Look für die OSM-Rasterkacheln (nur Test) */
#map .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
#status { position: fixed; left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); z-index: 5;
  background: rgba(17,20,24,.85); color: #cfd6dd; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.z { font-size: var(--zombie-size); padding: 10px; line-height: 1; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; text-align: center; filter: drop-shadow(0 2px 3px #000); }
.z .hp { display: block; height: 12px; margin: 0 auto; width: var(--zombie-hp-width); background: #400; border-radius: 6px; overflow: hidden; }
.z .hp i { display: block; height: 100%; background: #e33; }
.z .e { display: inline-block; }
.z .e img { display: block; height: var(--zombie-img-h); width: auto; margin: 0 auto; pointer-events: none; -webkit-user-drag: none; }
.z.hit .e { animation: hit .15s; }
@keyframes hit { 50% { transform: scale(1.25) rotate(-8deg); } }
.me { width: 18px; height: 18px; border-radius: 50%; background: #4aa3ff; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(74,163,255,.6); animation: p 2s infinite; }
@keyframes p { 70% { box-shadow: 0 0 0 18px rgba(74,163,255,0); } 100% { box-shadow: 0 0 0 0 rgba(74,163,255,0); } }
/* Breite der Startseite: Textspalte und Anmeldeformular (am Handy füllen sie fast die ganze Breite) */
:root { --login-width: 760px; --login-form-width: 560px; --login-pad: 14px; }
#login { position: fixed; inset: 0; z-index: 20; background: #111418; overflow-y: auto; touch-action: pan-y; padding: 20px var(--login-pad); }
#login .loginbox { width: 100%; max-width: var(--login-width); margin: 0 auto; color: #cfd6dd; }
#login form { text-align: center; max-width: var(--login-form-width); margin: 0 auto; }
#login h1 { font-size: 34px; margin: 0 0 18px; text-align: center; }
/* Startseitentext (Story und Spielprinzip) */
#login .intro { font-size: 18px; line-height: 1.6; margin-bottom: 26px; -webkit-user-select: text; user-select: text; }   /* Text darf markiert und kopiert werden (sonst global gesperrt) */
#login .intro h2 { font-size: 24px; margin: 22px 0 10px; color: #e6edf3; }
#login .intro p { margin: 0 0 14px; }
#login .intro .closing { font-size: 20px; font-weight: 600; color: #e6edf3; margin-top: 20px; }
#login .intro .closing small { display: block; margin-top: 8px; font-size: 15px; font-weight: 400; color: #9aa6b2; }
#login .intro .alpha { background: #3a2f12; border: 1px solid #6a5a1a; color: #ffe9a8; border-radius: 10px; padding: 10px 12px; font-size: 15px; line-height: 1.4; }
#login .intro a { color: #6cb6ff; font-weight: 600; }
#login input, #login button { width: 100%; box-sizing: border-box; font-size: 18px; padding: 14px; border-radius: 10px; border: 0; margin-bottom: 12px; }
#login input { background: #222a33; color: #e6edf3; -webkit-user-select: text; user-select: text; }
#login button { background: #3a7d44; color: #fff; }
#login [hidden] { display: none; }
#login .tabs { display: flex; gap: 8px; max-width: var(--login-form-width); margin: 0 auto 14px; }
#login .tabs button { flex: 1; margin: 0; background: #222a33; color: #cfd6dd; }
#login .tabs button.on { background: #3a7d44; color: #fff; }
#login .pwnote { max-width: var(--login-form-width); margin: 4px auto 0; font-size: 14px; line-height: 1.4; color: #9aa6b2; text-align: left; }
#login .pwnote a { color: #6cb6ff; font-weight: 600; }
#login label.accept { display: flex; gap: 12px; align-items: flex-start; text-align: left; font-size: 15px; line-height: 1.4; color: #cfd6dd; margin-bottom: 14px; }
#login label.accept input { width: 28px; height: 28px; flex: none; margin: 0; padding: 0; accent-color: #3a7d44; }   /* große Checkbox fürs Handy */
#login label.accept a, #login .legal a { color: #6cb6ff; font-weight: 600; }
#login .legal { text-align: center; font-size: 14px; color: #8b97a3; margin: 18px 0 0; }
#login .err { color: #e66; min-height: 1.2em; font-size: 14px; }
#who { float: right; text-decoration: underline; cursor: pointer; }
/* untere Button-Leiste */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 8px; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(17,20,24,.92) 35%); }
#dock button { flex: 0 0 var(--dock-btn-size); width: var(--dock-btn-size); height: var(--dock-btn-size); border: 1px solid #3a444f; border-radius: 12px; background: #1b2128; color: #cfd6dd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--dock-font); padding: 0; min-width: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#dock button svg { width: var(--dock-icon); height: var(--dock-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#dock button.on { background: #3a7d44; border-color: #5fb36c; color: #fff; }
/* Flyer über der Karte */
#backdrop { position: fixed; inset: 0; z-index: 11; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; max-height: var(--sheet-max-h); background: #171c22; color: #dfe6ed; border-radius: 18px 18px 0 0; border-top: 1px solid #3a444f; box-shadow: 0 -8px 30px rgba(0,0,0,.6); transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
body.sheet-open #sheet { transform: translateY(0); }
body.sheet-open #backdrop { opacity: 1; pointer-events: auto; }
#sheet .grip { width: 44px; height: 5px; border-radius: 3px; background: #3a444f; margin: 8px auto 0; flex: none; }
#sheet header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; flex: none; }
#sheet h2 { margin: 0; font-size: 24px; }
#sheet .x { background: #2a323b; border: 1px solid #3a444f; border-radius: 14px; color: #e6edf3; font-size: var(--close-font); width: var(--close-size); height: var(--close-size); line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; flex: none; }
#sheetbody { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(var(--dock-btn-size) + 40px + env(safe-area-inset-bottom)); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: #212932; border: 1px solid #2f3945; border-radius: 12px; padding: 12px; }
.tile b { display: block; font-size: 28px; line-height: 1.1; color: #fff; }
.tile span { font-size: 12px; color: #9aa6b2; }
.tile.wide { grid-column: 1 / -1; }
.bar { height: 8px; border-radius: 4px; background: #3a1c1c; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: #5fb36c; }
.soon { text-align: center; color: #9aa6b2; padding: 24px 0 8px; }
.soon .big { font-size: 56px; }

/* Zombie außerhalb des Aktionsradius */
.z.far { opacity: var(--zombie-far-opacity); filter: grayscale(.7); }

/* kurzer Hinweis */
#toast { position: fixed; left: 50%; bottom: calc(var(--dock-btn-size) + 40px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(10px); z-index: 15; background: rgba(17,20,24,.95); color: #fff; border: 1px solid #5a2a2a; border-radius: 10px; padding: 10px 16px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Entfernungsanzeige an Zombies außerhalb der Reichweite */
.z .dist { display: none; margin-top: 2px; font-size: 20px; font-weight: 600; color: #ffb4a0; text-shadow: 0 1px 3px #000; }
.z.far .dist { display: block; }
.z.far { cursor: default; }

/* Richtungsanzeige zum nächsten Ort */
#navarrow { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; transform: rotate(var(--bearing, 0deg)); }
#navarrow[hidden] { display: none; }
#navarrow svg { position: absolute; left: -16px; top: calc(-1 * var(--nav-radius, 120px) - 16px); width: 32px; height: 32px; fill: #ffd24a; stroke: #1b1500; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
/* Hinweise unter den Lebensbalken: ein Stapel, der von oben nach unten wächst (Entfernung, Home Base, Ohnmacht) – so überdeckt nichts etwas anderes */
:root { --topstack-gap: 8px; }   /* Abstand zwischen den gestapelten Hinweisen */
#topstack { position: fixed; left: 0; right: 0; top: calc(var(--vital-top) + var(--navlabel-gap) + env(safe-area-inset-top)); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: var(--topstack-gap); pointer-events: none; }
#navlabel { pointer-events: auto; background: rgba(17,20,24,.9); color: #ffe9a8; border: 1px solid #6a5a1a; border-radius: 18px; padding: 8px 14px; font-size: 14px; }
#navlabel[hidden] { display: none; }
.navtarget { font-size: var(--navtarget-size); line-height: 1; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }

/* Orte-Liste im Flyer */
.hint { color: #9aa6b2; font-size: 13px; margin: 4px 0 10px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 14px; background: #212932; color: #dfe6ed; border: 1px solid #2f3945; border-radius: 12px; font-size: 16px; text-align: left; }
.row.on { border-color: #5fb36c; }
.row .ico { font-size: 26px; }
.row .name { flex: 1; }
.row .n { color: #9aa6b2; font-size: 13px; }
.row.stop { margin-top: 10px; justify-content: center; color: #ffb4a0; }
#dock::-webkit-scrollbar { display: none; }

/* Home Base: ganze Karte grün, solange man in der sicheren Zone steht */
#safetint { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: var(--safe-tint); box-shadow: inset 0 0 0 var(--safe-border) var(--safe-color), inset 0 0 70px var(--safe-glow); }
body.in-home #safetint { opacity: 1; }
body.in-home.fire-off { --safe-color: var(--safe-off-color); --safe-tint: var(--safe-off-tint); --safe-glow: var(--safe-off-glow); }
#safe { white-space: nowrap;
  background: var(--safe-color); color: #062b12; font-weight: 800; font-size: var(--safe-font); letter-spacing: .5px;
  padding: 10px 20px; border-radius: 26px; box-shadow: 0 4px 16px rgba(0,0,0,.55); animation: safepulse 2.4s ease-in-out infinite; }
#safe[hidden] { display: none; }
@keyframes safepulse { 50% { transform: scale(1.06); } }
.homemarker { font-size: var(--home-icon-size); line-height: 1; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }

/* Basis-Panel */
.row.primary { justify-content: center; background: #2f6b3a; border-color: #5fb36c; color: #fff; font-weight: 600; }
.warnbox { margin-top: 10px; padding: 12px; border: 1px solid #8a6a1a; background: #2a2412; border-radius: 12px; color: #ffe9a8; }
.warnbox .btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.err { color: #ff8a8a; margin: 10px 0; font-size: 14px; }

/* Inventar-Ansichten */
.card { background: #212932; border: 1px solid #2f3945; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.cardhead { display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #fff; }
.cardhead b { color: #cfd6dd; font-weight: 600; }
.card .hint { margin: 8px 0 0; }
.bar.water { background: #12222e; }
.bar.water i { background: #3aa0ff; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.slot { position: relative; aspect-ratio: 1 / 1; border: 2px dashed #3a444f; border-radius: 10px; background: #1b2128; display: flex; align-items: center; justify-content: center; }
.slot.filled { border-style: solid; border-color: #5fb36c; flex-direction: column; }
.slot .ico { font-size: 66px; line-height: 1.1; margin-bottom: 8px; }
.slot .qty { position: absolute; right: 5px; top: 2px; font-size: 17px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.slot .nm { font-size: 26px; line-height: 1.05; hyphens: auto; color: #dfe6ed; text-align: center; padding: 0 2px; overflow-wrap: anywhere; }

/* Lebensbalken unter der Statusleiste */
:root {
  --vital-top: 52px;           /* Abstand von oben (unter der Statusleiste) */
  --navlabel-gap: 36px;        /* Abstand der Entfernungsanzeige unter den Lebensbalken */
  --vital-height: 12px;        /* Höhe eines Balkens */
  --vital-thirst: #3aa0ff;     /* Farbe Durst */
  --vital-hunger: #e8a33a;     /* Farbe Hunger */
  --vital-health: #e04a4a;     /* Farbe Verletzung */
}
#vitals { position: fixed; left: 8px; right: 8px; top: calc(var(--vital-top) + env(safe-area-inset-top)); z-index: 5; display: flex; gap: 8px; pointer-events: none; }
.vital { flex: 1; display: flex; align-items: center; gap: 4px; background: rgba(17,20,24,.85); border-radius: 8px; padding: 4px 6px; }
.vital .vi { font-size: 16px; line-height: 1; }
.vital .vb { flex: 1; height: var(--vital-height); background: #2a2f36; border-radius: 6px; overflow: hidden; }
.vital .vb i { display: block; height: 100%; width: 100%; background: var(--vital-color); border-radius: 6px; transition: width .4s; }
.vital.thirst { --vital-color: var(--vital-thirst); }
.vital.hunger { --vital-color: var(--vital-hunger); }
.vital.health { --vital-color: var(--vital-health); }
.vital.low .vb i { animation: vital-pulse 1s infinite alternate; }
@keyframes vital-pulse { from { opacity: 1; } to { opacity: .35; } }

/* Level-Abzeichen (Spieler) und Ruf-Fortschritt */
:root { --level-color: #9be36b; }   /* Farbe des Ruf-Balkens */
.vital.lvl { flex: 0 0 34%; }
.vital.lvl b { color: #fff; font-size: 14px; white-space: nowrap; }
.vital.lvl .vb i { background: var(--level-color); }
/* Level-Abzeichen am Zombie; rot ab ZOMBIE_DANGER_DIFF Level über dem Spieler */
:root { --zombie-lv-color: #ff4d4d; --zombie-lv-danger: #ff1a1a; --zombie-lv-size: 24px; --zombie-lv-danger-size: 30px; }   /* Farbe und Größe des Zombie-Levels; Danger = ab ZOMBIE_DANGER_DIFF Level über dem Spieler */
.z .lv { display: block; font-size: var(--zombie-lv-size); font-weight: 800; color: var(--zombie-lv-color); text-shadow: 0 0 3px #000, 0 1px 4px #000; margin-bottom: 2px; }
.z .lv.danger { color: var(--zombie-lv-danger); font-size: var(--zombie-lv-danger-size); text-shadow: 0 0 3px #fff, 0 0 6px #000, 0 1px 4px #000; }

/* Trinken-Knopf im Rucksack */
.drinkbtn { width: 100%; margin-top: 10px; padding: 12px; font-size: 16px; font-weight: 600; border-radius: 10px; border: 1px solid #2f6a9e; background: #1d4a73; color: #fff; }
.drinkbtn:disabled { opacity: .4; }
.slot.usable { cursor: pointer; border-color: #5fb36c; }   /* antippbar: Gegenstand lässt sich benutzen */

/* Ohnmacht-Hinweis */
:root { --faint-color: #b3261e; }   /* Farbe der Ohnmacht-Plakette */
#faint { white-space: nowrap;
  background: var(--faint-color); color: #fff; font-weight: 800; font-size: 18px; padding: 10px 20px; border-radius: 26px; box-shadow: 0 4px 16px rgba(0,0,0,.55); pointer-events: none; }
#faint[hidden] { display: none; }
:root { --speedblock-color: #c26a00; }   /* Farbe der Tempo-Sperre-Plakette */
#speedblock { white-space: nowrap; background: var(--speedblock-color); color: #fff; font-weight: 800; font-size: 18px; padding: 10px 20px; border-radius: 26px; box-shadow: 0 4px 16px rgba(0,0,0,.55); pointer-events: none; }
#speedblock[hidden] { display: none; }

/* Roter Blitz am Bildrand bei Schaden durch Zombies */
:root { --hurt-color: rgba(220,30,30,.55); }   /* Farbe des Randes */
#hurt { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; box-shadow: inset 0 0 90px 30px var(--hurt-color); }
#hurt.on { animation: hurtflash .6s ease-out; }
@keyframes hurtflash { from { opacity: 1; } to { opacity: 0; } }


/* Ausrüstung: große Ansicht (alle Größen hier einstellbar) */
:root {
  --eq-figure-w: 460px;     /* Höchstbreite der Figur (auf dem Handy füllt sie die ganze Breite) */
  --eq-slot-w: 31%;         /* Breite eines Slots in Prozent der Figur */
  --eq-slot-min: 104px;     /* Mindestgröße eines Slots */
  --eq-icon: 48px;          /* Symbol im Slot */
  --eq-text: 13px;          /* Wertetext im Slot */
  --eq-label: 14px;         /* Beschriftung unter dem Slot (Helm, Jacke …) */
  --tier-0: #8a96a3; --tier-1: #4aa3ff; --tier-2: #ffb02e;   /* Farben: einfach / stark / außergewöhnlich */
}
.eqnote { text-align: center; font-size: 15px; color: #9aa6b2; margin: 4px 0 12px; line-height: 1.35; }
.eqnote.ok { color: #7be08f; }
.eqfigure { position: relative; width: min(100%, var(--eq-figure-w)); aspect-ratio: 2 / 3; margin: 0 auto 34px; }
.eqfigure .figure { position: absolute; inset: 0; width: 100%; height: 100%; }
.eqslot { position: absolute; transform: translate(-50%, -50%); width: var(--eq-slot-w); aspect-ratio: 1 / 1; min-width: var(--eq-slot-min); cursor: pointer; border: 2px dashed #4b5866; border-radius: 14px; background: rgba(23,28,34,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; box-sizing: border-box; }
.eqslot.filled { border-style: solid; border-color: #5fb36c; }
.eqslot .ico { font-size: var(--eq-icon); line-height: 1; }
.eqslot .ico.ghost { opacity: .35; filter: grayscale(1); }
.eqslot .dsc { font-size: var(--eq-text); color: #e6edf3; text-align: center; line-height: 1.15; font-weight: 600; }
.eqslot .lbl { position: absolute; bottom: -24px; font-size: var(--eq-label); color: #b3bdc7; white-space: nowrap; }
.tier { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 9px; color: #10151a; background: var(--tier-0); white-space: nowrap; }
.tier.t1 { background: var(--tier-1); }
.tier.t2 { background: var(--tier-2); }
.eqstats { text-align: center; font-size: 16px; line-height: 1.5; color: #e6edf3; margin: 6px 0 16px; }
.gearrow { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 14px; border-radius: 12px; border: 1px solid #3a444f; background: #1b2128; color: #fff; font-size: 18px; text-align: left; }
.gearrow:disabled { opacity: .55; }
.gearrow .ico { font-size: 38px; line-height: 1; }
.gearrow .nm { flex: 1; font-weight: 600; }
.gearrow .nm small { display: block; font-size: 15px; font-weight: 400; color: #b3bdc7; margin-top: 2px; }
.matrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 18px; }
.matrow .ico { font-size: 34px; line-height: 1; }
.matrow .nm { flex: 1; }
.matrow .qty { color: #b3bdc7; }

/* „Zentrieren“-Knopf: erscheint, wenn die Karte verschoben wurde */
:root { --recenter-bottom: 110px; }   /* Abstand vom unteren Rand (über dem Menü) */
#recenter { position: fixed; right: 12px; bottom: calc(var(--recenter-bottom) + env(safe-area-inset-bottom)); z-index: 7; padding: 14px 18px; font-size: 17px; font-weight: 600; border-radius: 28px; border: 1px solid #2f6a9e; background: #1d4a73; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
#recenter[hidden] { display: none; }

/* Orte-Symbole auf der Karte (Apotheke, Wasser …) */
:root { --poi-size: 40px; }   /* Größe der Symbole */
.poimark { font-size: var(--poi-size); line-height: 1; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }

/* Rechtstexte als Layer über dem Spiel */
#legal { position: fixed; inset: 0; z-index: 30; background: #111418; display: flex; flex-direction: column; }
#legal[hidden] { display: none; }
#legal header { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid #2a333d; color: #e6edf3; }
#legal header h2 { margin: 0; font-size: 19px; }
#legal header button { width: 56px; height: 56px; font-size: 28px; background: #222a33; color: #e6edf3; border: 0; border-radius: 12px; }   /* großes Schließen-X */
#legal iframe { flex: 1; width: 100%; border: 0; background: #111418; }
#sheetbody .legal { text-align: center; font-size: 17px; margin: 22px 0 0; padding: 8px 0; }
#sheetbody .legal a { color: #6cb6ff; font-weight: 600; display: inline-block; padding: 10px 6px; }   /* großzügige Tippfläche */

/* Panel „Melden“ */
#sheetbody textarea { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 12px; font-size: 16px; font-family: inherit; background: #222a33; color: #e6edf3; border: 1px solid #2f3945; border-radius: 12px; resize: vertical; -webkit-user-select: text; user-select: text; }
#sheetbody .btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#sheetbody .err { color: #e66; margin-top: 10px; font-size: 14px; }

/* Basteln */
.recipe { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2f3945; }
.recipe:first-of-type { border-top: 0; padding-top: 0; }
.rname { font-weight: 600; }
.rline { margin-top: 4px; font-size: 18px; }
.ing small { color: #9aa6b2; font-size: 12px; }
.ing.lack small { color: #ffb4a0; }
.row .step { width: 48px; height: 44px; font-size: 24px; border-radius: 10px; border: 1px solid #3a444f; background: #2a333d; color: #fff; }
.row .cnt { min-width: 28px; text-align: center; }
.row .rm { padding: 8px 12px; font-size: 14px; border-radius: 8px; border: 1px solid #8a3a2a; background: #3a1f1a; color: #ffb4a0; }

/* Symbole als Grafik (ico() in js/util.js): so groß wie die Schrift an der Stelle, Seitenverhältnis bleibt */
.pic { width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: -.2em; pointer-events: none; -webkit-user-drag: none; }
.ico.ghost .pic { opacity: .5; }
#navlabel .pic, #safe .pic { width: 1.5em; height: 1.5em; vertical-align: -.35em; }   /* Symbol in der Entfernungsanzeige und in der Home-Base-Plakette etwas größer */
.drinkbtn .pic { width: 1.3em; height: 1.3em; vertical-align: -.3em; }
#sheet .x .pic, #legal header button .pic { width: 70%; height: 70%; }   /* Knochen-X zum Schließen */
#recenter .pic { width: 1.4em; height: 1.4em; vertical-align: -.35em; }
.loginbox h1 .pic { width: 1.2em; height: 1.2em; vertical-align: -.2em; }
#faint .pic, #who .pic { width: 1.3em; height: 1.3em; vertical-align: -.3em; }
.loginbox h1 { line-height: 1.15; }
.loginbox .tagline { margin: -6px 0 14px; text-align: center; color: #9aa7b3; font-size: 15px; letter-spacing: .04em; }
.loginbox .hero { display: block; margin: 4px auto 14px; height: min(42vh, 320px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); pointer-events: none; }
.intro .deco { height: 1.6em; width: auto; vertical-align: -.4em; margin-right: .4em; opacity: .9; pointer-events: none; }
.intro h2 .deco { height: 1.4em; }
.loginbox .intro .hero { float: right; height: auto; width: min(38%, 220px); max-height: none; margin: 4px 0 8px 14px; }   /* Zombie neben dem Langtext */
.loginbox .intro h2, .loginbox .intro .closing { clear: none; }
.intro .candlerow { display: flex; align-items: flex-end; justify-content: space-between; clear: both; margin-bottom: 6px; }   /* Kopf links, Kerze Mitte, Schädel rechts am Textrand */
.intro .candlerow .deco { display: block; height: 3.2em; margin: 0; }
.intro .candlerow .deco:nth-child(2) { height: 4em; }
.intro .closing .candlerow .deco:nth-child(2) { filter: drop-shadow(0 0 10px rgba(255,160,60,.45)); }
.intro .closing { text-align: center; }
#login .appdl { text-align: center; margin: 10px 0 0; font-size: 14px; }
#login .appdl a { color: #8b97a3; text-decoration: underline; padding: 10px 6px; display: inline-block; }   /* kleiner, unauffälliger Link unten */
#login .apphelp { font-size: 14px; line-height: 1.5; color: #cfd6dd; background: #1c232b; border: 1px solid #2f3a45; border-radius: 12px; padding: 12px 14px; margin: 6px 0 0; }