:root {
  --bg: #140e0a;
  --panel: #2a1f17;
  --panel2: #3a2b20;
  --line: #5c4532;
  --text: #f1e6d6;
  --muted: #b39d84;
  --red: #d8423a;
  --blue: #5aa0e6;
  --gold: #e8c45a;
  --green: #6fbf5f;
  --purple: #a070d0;
  --paper: #efe2c8;
  --ink: #2a1d14;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  /* --floor-bg setzt game.js je nach Etage */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(16, 10, 7, .58) 0%, rgba(8, 5, 3, .9) 100%) fixed,
    var(--floor-bg, none) center / cover no-repeat fixed #140e0a;
  color: var(--text);
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
  font-size: 18px;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0.3em 0; font-weight: normal; }
.title-font { font-family: 'Creepster', cursive; letter-spacing: 2px; color: #e9d3b5; }
.muted { color: var(--muted); }

button {
  font-family: inherit; font-size: 17px;
  background: var(--panel2); color: var(--text);
  border: 2px solid var(--line); border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
button:hover:not(:disabled) { border-color: var(--gold); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: #5a2e22; border-color: #a0503a; }

#app { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }

/* ---------- HUD ---------- */
#hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  padding: 10px 0; border-bottom: 2px solid var(--line); margin-bottom: 14px;
}
#hud:empty { display: none; }
.hud-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hud-block.items { font-size: 22px; gap: 4px; }
.hud-block.right { margin-left: auto; }
/* HUD-Knöpfe oben rechts: Pixel-Symbol + Zahl wie die Zähler im Spiel, ohne Kasten */
.hud-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; background: none; border: none; box-shadow: none;
  font-family: 'Creepster', cursive; font-size: 24px; letter-spacing: 1px; color: #fff; line-height: 1;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
}
.hud-btn:hover:not(:disabled) { background: none; border: none; transform: translateY(-2px); color: #ffd27a; }
.hud-btn:hover .hud-icon { filter: drop-shadow(0 0 6px rgba(255, 210, 122, .6)) drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.hud-icon { width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.floor { color: var(--gold); }
.hpnum { color: var(--muted); font-size: 15px; }
.hearts { display: inline-flex; gap: 1px; font-size: 24px; line-height: 1; }
.heart { color: #3a2a22; -webkit-text-stroke: 1px #120b08; }
.heart.full { color: var(--red); }
.heart.half {
  background: linear-gradient(90deg, var(--red) 50%, #3a2a22 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hud-active { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; border-right: 1px solid var(--line); margin-right: 4px; }
.hud-active-btn { background: none; border: 1px solid transparent; border-right-color: var(--line); border-radius: 0; cursor: pointer; color: inherit; font: inherit; }
.hud-active-btn:hover { border-color: currentColor; }
.pips { font-size: 12px; color: var(--gold); letter-spacing: -1px; }
.pdot { display: inline-block; width: 18px; height: 11px; border-radius: 6px; border: 2px solid #111; vertical-align: middle; }
/* Deal-Chance im HUD (wie die Statistik-Anzeige im Original) */
.deal-odds { gap: 10px; font-size: 17px; padding: 2px 10px; border-radius: 8px; background: rgba(0, 0, 0, .35); cursor: help; }
.deal-odds .odds { display: inline-flex; align-items: center; gap: 4px; }
.deal-odds .devil { color: #ff6a4a; }
.deal-odds .angel { color: #a8d4ff; }
.deal-odds .off { opacity: .35; }
.deal-odds-icon { image-rendering: pixelated; height: 18px; width: auto; }
.deal-odds.hot { box-shadow: 0 0 0 2px #e8c45a, 0 0 12px rgba(232, 196, 90, .5); }

/* Isaac-Pickups (Münze, Bombe, Schlüssel, Herz, Pille) im Fließtext */
.ui-icon { image-rendering: pixelated; height: 1.2em; width: auto; vertical-align: -.25em; }
.hud-block.res .ui-icon { height: 26px; vertical-align: -6px; margin-right: 2px; }
.pill-img { height: 22px; vertical-align: -5px; }
.pill-btn .pill-img { height: 26px; }
.heart-img { image-rendering: pixelated; height: 24px; width: auto; }
.char-stats .heart-img { height: 26px; }
.bar .blk .ui-icon { height: 15px; vertical-align: -2px; }

.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.center-panel { max-width: 720px; margin: 20px auto; text-align: center; }
.center-panel.wide { max-width: 900px; }
.actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.big-icon { font-size: 64px; }

/* ---------- Titel ---------- */
/* Auswahlbogen: Papier mit Tinte, Figuren-Rad wie im Original */
.title-screen { text-align: center; padding-top: 18px; }
.menu-sheet { position: relative; max-width: 900px; margin: 0 auto 18px; color: #2b1a0f; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .8)); }
.sheet-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sheet-content { position: relative; padding: 30px 40px 26px; }
.logo { font-family: 'Creepster', cursive; color: #2b1a0f; margin: 22px 0 0; letter-spacing: 3px; transform: rotate(-2deg); line-height: .95; }   /* unter Sprachwahl und Version */
.logo-main { display: block; font-size: clamp(30px, 5.2vw, 56px); }
.logo-sub { display: block; font-size: clamp(22px, 3.4vw, 36px); color: #8e1c12; letter-spacing: 5px; margin-top: 2px; }
.fan-tag { font-family: 'Permanent Marker', cursive; font-size: 17px; color: #8e1c12; margin: -4px 0 4px; transform: rotate(-2deg); opacity: .85; }
.fan-tag i { font-style: normal; }
.wheel { position: relative; height: 290px; max-width: 660px; margin: 0 auto; }
.wheel-char {
  position: absolute; left: 50%; top: 50%; cursor: pointer;
  transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), opacity .4s, filter .4s;
}
.wheel-char img { display: block; width: 168px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(43, 26, 15, .35)); }
.wheel-char::after {   /* Schatten auf dem Papier */
  content: ''; display: block; width: 60%; height: 18px; margin: -8px auto 0;
  background: radial-gradient(ellipse, rgba(43, 26, 15, .45), transparent 70%);
}
.wheel-char.pos-center { transform: translate(-50%, -50%) scale(1.1); z-index: 2; }
.wheel-char.pos-left   { transform: translate(-50%, -50%) translateX(calc(-1 * min(220px, 28vw))) translateY(-14px) scale(.58) rotate(-6deg); opacity: .5; filter: blur(.5px); }
.wheel-char.pos-right  { transform: translate(-50%, -50%) translateX(min(220px, 28vw)) translateY(-14px) scale(.58) rotate(6deg); opacity: .5; filter: blur(.5px); }
.wheel-char.pos-back   { transform: translate(-50%, -50%) translateY(-40px) scale(.4); opacity: 0; pointer-events: none; }
.wheel-char.pos-left:hover, .wheel-char.pos-right:hover { opacity: .8; }
/* Gesperrte Figur: nur als Tusche-Silhouette wie im Original */
.wheel-char.locked img, .wheel-char.locked svg { filter: brightness(0) opacity(.75); }
.char-locked { font-size: 1.2em; margin: 6px 0; display: flex; justify-content: center; align-items: center; gap: 8px; }
.ink-lock { filter: url(#ink-rough); overflow: visible; }
.char-item.locked { opacity: .7; display: inline-flex; align-items: center; gap: 4px; }
.char-item.locked .ink-lock { width: 18px; height: 21px; }
.ink-lock path, .ink-lock circle { fill: none; stroke: #2b1a0f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ink-lock .body { fill: rgba(43, 26, 15, .14); }
.ink-lock circle { fill: #2b1a0f; stroke: none; }
.start-btn:disabled { opacity: .45; cursor: not-allowed; }
.wheel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  background: none; border: none; color: #2b1a0f; font-size: 42px; padding: 4px 10px;
}
.wheel-arrow:hover:not(:disabled) { color: #8e1c12; }
/* Der allgemeine button:active-Ruck würde translateY(-50%) überschreiben – der Pfeil spränge unter der Maus weg und der Klick ginge verloren */
.wheel-arrow:active:not(:disabled) { transform: translateY(calc(-50% + 1px)); }
.wheel { user-select: none; }
.wheel-arrow.left { left: 0; }
.wheel-arrow.right { right: 0; }
.char-info { min-height: 150px; }
.char-name { font-size: 40px; line-height: 1; }
.char-stats { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 22px; margin: 6px 0; }
.char-stats .heart.empty { color: #8a7458; }
.char-items { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 19px; }
.char-item { display: inline-flex; align-items: center; gap: 4px; }
.char-item .sprite-img { width: 34px; height: 34px; }
.char-desc { margin: 6px 0 0; font-size: 19px; opacity: .85; }
/* Gesperrte Figur: Bedingung wie im Original, Zähler und (The Lost) Schritt für Schritt */
.unlock-how b { color: #8e1c12; }
.unlock-progress { font-family: 'Permanent Marker', cursive; color: #8e1c12; margin-left: 4px; }
.unlock-steps { text-align: left; max-width: 520px; margin: 8px auto 0; font-size: 17px; line-height: 1.3; padding-left: 26px; }
.unlock-steps li { opacity: .7; }
.unlock-steps li.next { opacity: 1; }
.unlock-steps li.done { text-decoration: line-through; opacity: .5; }
.unlock-steps b { color: #2b1a0f; }
.start-btn {
  font-size: 28px; padding: 6px 34px; margin-top: 8px; transform: rotate(-1.5deg);
  background: #2b1a0f; color: #ecdcbc; border: 3px solid #2b1a0f; border-radius: 10px;
}
.start-btn:hover:not(:disabled) { background: #8e1c12; border-color: #2b1a0f; }
.start-btn.hard { background: #6a0f08; }

/* Normal / Schwer wie im Original: „Schwer“ blutrot mit Tropfen */
.mode-pick { display: flex; justify-content: center; gap: 30px; margin: 4px 0 2px; }
.mode-opt { font-size: 22px; opacity: .45; }
.mode-opt.on { opacity: 1; text-decoration: underline wavy rgba(43, 26, 15, .5); text-underline-offset: 6px; }
.mode-opt.on::before { opacity: 1; }
.mode-opt.hard { color: #8e1c12; }
.mode-opt.hard.on { text-shadow: 0 2px 0 rgba(142, 28, 18, .25); text-decoration-color: rgba(142, 28, 18, .6); }
.mode-opt.hard.on::after {   /* Blutstropfen */
  content: ''; position: absolute; left: 62%; top: 82%; width: 5px; height: 9px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: #8e1c12; animation: drip 1.6s ease-in infinite;
}
@keyframes drip { 0% { transform: translateY(0) scaleY(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(12px) scaleY(1); opacity: 0; } }
.hard-tag {
  font-family: 'Permanent Marker', cursive; color: #ff5a4a; border: 2px solid #8e1c12; border-radius: 4px;
  padding: 0 6px; transform: rotate(-3deg); background: rgba(80, 6, 4, .5); cursor: help;
}
/* Extrem: dunkles Lila, zittert leicht – darüber gibt es nichts mehr */
.mode-opt.extreme { color: #4b0d63; }
.mode-opt.extreme.on { text-decoration-color: rgba(75, 13, 99, .7); text-shadow: 0 0 8px rgba(150, 40, 200, .55); animation: extreme-shake .35s steps(2) infinite; }
@keyframes extreme-shake { 0% { transform: translate(0, 0) rotate(-1deg); } 50% { transform: translate(1px, -1px) rotate(1deg); } }
.start-btn.extreme { background: #3a0a4a; box-shadow: 0 0 14px rgba(150, 40, 200, .6); }
.hard-tag.extreme { color: #e2a4ff; border-color: #6a1a8a; background: rgba(40, 6, 60, .65); text-shadow: 0 0 6px #b04cff; }
.sprite-img.mark-extreme { filter: hue-rotate(275deg) saturate(1.6) drop-shadow(0 0 3px #b04cff); }
.boss-entry.extreme { box-shadow: inset 0 0 0 2px #7a2aa8, 0 0 10px rgba(150, 40, 200, .5); }
.boss-entry.extreme::after { content: 'extrem'; position: absolute; top: 4px; right: 4px; font-size: 11px; color: #d58cff; font-family: 'Permanent Marker', cursive; transform: rotate(8deg); }

/* Abschluss-Zettel: Figur in der Mitte, Marken im Kreis (wie die Notiz auf Isaacs Figurenwahl) */
.mark-note {
  position: absolute; left: 34px; top: 350px; width: 156px; height: 156px; transform: rotate(-4deg); cursor: help;
  background: radial-gradient(ellipse at 30% 25%, rgba(255, 250, 235, .5), transparent 60%), #d9c39c;
  border: 3px solid #2b1a0f; border-radius: 6px 12px 8px 14px; box-shadow: 3px 5px 0 rgba(43, 26, 15, .35);
}
.mark-face { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mark-face img { height: 50px; width: auto; image-rendering: pixelated; }
.mark { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); }
.mark .sprite-img { width: 34px; height: 34px; image-rendering: pixelated; }
.mark.open { opacity: .16; filter: grayscale(1); }
.mark.m0 { left: 50%; top: 16%; } .mark.m1 { left: 84%; top: 32%; } .mark.m2 { left: 84%; top: 68%; }
.mark.m3 { left: 50%; top: 85%; } .mark.m4 { left: 16%; top: 68%; } .mark.m5 { left: 16%; top: 32%; }
@media (max-width: 900px) { .mark-note { position: relative; left: auto; top: auto; margin: 6px auto; } }

/* Boss-Sammlung */
.boss-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; max-height: 62vh; overflow-y: auto; padding: 6px; }
.boss-entry { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: rgba(0, 0, 0, .25); font-size: 14px; text-align: center; cursor: help; }
.boss-entry img { height: 70px; width: auto; max-width: 100px; object-fit: contain; image-rendering: pixelated; }
.boss-entry.unknown img { filter: brightness(0); opacity: .45; }
.boss-entry.unknown span { opacity: .5; }
.boss-entry.hard { box-shadow: inset 0 0 0 2px #8e1c12; }
.boss-entry.hard::after { content: 'schwer'; position: absolute; top: 4px; right: 4px; font-size: 11px; color: #ff6a5a; font-family: 'Permanent Marker', cursive; transform: rotate(8deg); }
.boss-count { font-family: 'Permanent Marker', cursive; font-size: 17px; color: var(--gold); line-height: 1; }
.boss-count.old { font-family: inherit; font-size: 12px; color: var(--muted); }
.boss-chars { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.boss-char { display: inline-flex; align-items: flex-end; gap: 1px; font-size: 12px; }
.boss-char img { height: 20px; width: auto; image-rendering: pixelated; }
.boss-char b { color: #e6d3ad; }
.sheet-hint { margin-top: 10px; font-size: 16px; opacity: .65; }
.howto {
  max-width: 720px; margin: 0 auto; text-align: left; transform: rotate(.8deg);
  background: #c4ab84; color: #2b1a0f; border: 3px solid #2b1a0f; border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .7);
}
.howto .muted { color: #5a4128; }

/* ---------- Karte ---------- */
/* Kartenbildschirm füllt genau das Fenster: nur die Karte selbst scrollt (nach oben schauen) */
body[data-screen="map"] #app { height: 100vh; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 8px; }
body[data-screen="map"] #hud { margin-bottom: 8px; padding: 6px 0; }
body[data-screen="map"] #screen { flex: 1; min-height: 0; }
.map-screen { display: flex; gap: 20px; justify-content: center; align-items: flex-start; height: 100%; }
.map-screen .side { max-height: 100%; overflow-y: auto; box-sizing: border-box; }
.map-scroll {
  flex: 0 1 620px; max-height: 100%; overflow-y: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .75));
}
.map-svg { display: block; width: 100%; height: auto; }

/* ---------- Bildlaufleisten: Tinte auf Papier statt Windows-Grau ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 6px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #a98b61, #c6aa80 50%, #a98b61); border: 2px solid #2b1a0f; border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #c6aa80, #e0c89e 50%, #c6aa80); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
/* Karte: schmaler, Leiste schwebt ohne Spur neben dem Papier */
.map-scroll::-webkit-scrollbar { width: 10px; }
.map-scroll::-webkit-scrollbar-track { background: transparent; }
/* Firefox kennt nur Farben */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #c6aa80 rgba(0, 0, 0, .25); }
  .map-scroll { scrollbar-color: #c6aa80 transparent; }
}
/* Papier-Karte: Tinte statt Gold */
.paper-ink { fill: none; stroke: #2b1a0f; stroke-width: 5; }
.paper-ink.thin { stroke-width: 2; opacity: .5; }
.paper-title { font-family: 'Patrick Hand', cursive; font-size: 34px; fill: #2b1a0f; opacity: .8; }
.edge { stroke: #5a4128; stroke-width: 3; stroke-dasharray: 1 9; stroke-linecap: round; }
.edge.open { stroke: #2b1a0f; stroke-width: 3.5; }
.edge.taken { stroke: #8e1c12; stroke-width: 4; stroke-dasharray: none; }
.node circle { fill: #d8c3a0; stroke: #3a2616; stroke-width: 3; transition: fill .15s; }
.node .nicon { font-size: 22px; text-anchor: middle; dominant-baseline: central; }
.node .gate { font-size: 15px; text-anchor: middle; dominant-baseline: central; }
.node .pix { image-rendering: pixelated; }
.node:not(.avail):not(.current):not(.visited) { opacity: .8; }
.node.visited circle { fill: #a88d68; stroke: #5a4128; }
.node.visited .nicon { opacity: .45; }
.node.current circle { fill: #f0e2c4; stroke: #8e1c12; stroke-width: 4; }
.node.avail { cursor: pointer; }
.node.avail circle { stroke: #8e1c12; animation: pulse 1.1s ease-in-out infinite; }
.node.avail:hover circle { fill: #f3e6cc; }
.node.has-drop { cursor: pointer; }
.node g.drop-mark circle { fill: #f3e6cc; stroke: #c9a227; stroke-width: 2.5; animation: none; }   /* liegengelassenes aktives Item */
.node.has-drop:hover g.drop-mark circle { fill: #fff6dc; }
.drops { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.drop-btn { display: flex; align-items: center; gap: 8px; text-align: left; }
.drop-btn .sprite-img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.drop-btn small { opacity: .7; }
.side-mini .drop-btn { margin-top: 6px; }
.node.t-boss circle { fill: #b89470; stroke: #2b1a0f; stroke-width: 4; }
@keyframes pulse { 50% { stroke-width: 7; } }
.side { flex: 1 1 280px; max-width: 380px; position: relative; }
.side h2 { padding-right: 34px; }
.side-close, .side-open {
  padding: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.side-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; }
.side-open { align-self: flex-start; width: 34px; height: 64px; border-radius: 10px; }
/* Raum-Betreten-Knopf bleibt auch bei eingeklappter Leiste erreichbar */
.side-mini { align-self: flex-start; }
.btn-col { display: flex; flex-direction: column; gap: 6px; }
.legend { font-size: 15px; color: var(--muted); line-height: 1.6; }
.legend[hidden] { display: none; }
.legend-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; margin: 14px 0 6px; padding: 4px 0;
  background: none; border: none; border-bottom: 2px solid var(--line); border-radius: 0;
  font-size: 1.17em; font-weight: bold; color: inherit; text-align: left; cursor: pointer;
}
.legend-toggle:hover:not(:disabled) { border: none; border-bottom: 2px solid var(--gold); color: var(--gold); }
.legend-arrow { width: 14px; display: inline-block; }

/* ---------- Kampf ---------- */
/* Kampf passt immer ins Fenster: Arena nimmt den Rest der Höhe, Hand bleibt unten sichtbar */
body[data-screen="combat"] #app { height: 100vh; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 6px; }
body[data-screen="combat"] #hud { margin-bottom: 8px; padding: 6px 0; }
body[data-screen="combat"] #screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.combat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arena {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex: 1 1 auto; min-height: 200px; max-height: 420px; padding: 16px 28px 12px; flex-wrap: wrap;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(0, 0, 0, .7) 100%),
    var(--floor-bg, none) center 55% / cover no-repeat #1a120d;
  border: 2px solid #000; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
.arena .ename, .arena .statuses { text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 180px; }
/* Figur mit Item-Kostümen: Grundsprite + Kostüm-Ebenen pixelgenau darüber */
.costumed { position: relative; flex: none; }
.costumed > img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.costumed > img.costume { position: absolute; width: auto; height: auto; pointer-events: none; }
.enemies { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; flex: 1; }
.enemy {
  width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; border-radius: 12px; border: 2px solid transparent; transition: border-color .15s, background .15s;
}
.enemy .sprite { font-size: 64px; line-height: 1.1; filter: drop-shadow(0 6px 4px rgba(0,0,0,.6)); }
.enemy.elite .sprite { font-size: 80px; }
.enemy.boss { width: 190px; }
.enemy.boss .sprite { font-size: 110px; }
/* Champions wie im Original: eingefärbt, 15 % größer; schwarz verblasst, durchscheinend halb sichtbar */
.enemy.champ .sprite { filter: var(--champ-filter) drop-shadow(0 6px 4px rgba(0, 0, 0, .6)); opacity: var(--champ-op); transform: scale(1.15); transform-origin: bottom center; }
.enemy.champ-white .sprite, .enemy.champ-translucent .sprite { animation: champ-glow 1.6s ease-in-out infinite; }
.enemy.champ.faded .sprite { opacity: .25; }
.enemy.champ-black .sprite { transition: opacity .4s; }
@keyframes champ-glow { 50% { filter: var(--champ-filter) drop-shadow(0 0 10px rgba(255, 255, 255, .8)); } }
.champ-chip { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.champ-chip i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #000; display: inline-block; }
.enemy.targetable { cursor: crosshair; border-color: #7a5a40; background: rgba(255, 200, 120, .05); }
.enemy.targetable:hover { border-color: var(--gold); background: rgba(255, 200, 120, .12); }
.ename { font-size: 17px; }
.enemy.elite .ename { color: #e89a5a; }
.enemy.boss .ename { color: #ff7a6a; font-size: 20px; }
.intent {
  min-height: 30px; padding: 2px 10px; border-radius: 12px;
  background: rgba(0,0,0,.4); font-size: 18px; white-space: nowrap;
}
.intent.hostile { color: #ffb0a0; }

.bar {
  position: relative; width: 100%; height: 18px; background: #1a0f0b;
  border: 2px solid #000; border-radius: 9px; overflow: visible;
}
.bar .fill { height: 100%; background: linear-gradient(#e0554c, #a8231c); border-radius: 7px; transition: width .25s; }
.bar.has-block { border-color: var(--blue); }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 14px; line-height: 14px; text-shadow: 0 1px 2px #000; }
.bar .blk {
  position: absolute; left: -14px; top: -8px; background: #1d3f66; border: 2px solid var(--blue);
  border-radius: 10px; padding: 0 6px; font-size: 14px;
}
.statuses { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 26px; }
.chip { background: rgba(0,0,0,.45); border-radius: 10px; padding: 1px 8px; font-size: 15px; white-space: nowrap; }
.chip.power { background: rgba(160, 112, 208, .3); }

.hint { text-align: center; min-height: 24px; line-height: 24px; color: var(--gold); flex: none; }
.controls { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 2px 0; flex: none; }
/* Energie als große Pixel-Träne, Zahl wie die Zähler im Spiel (weiß mit schwarzem Rand) */
.energy { position: relative; width: 70px; height: 90px; flex: none; margin: -12px 4px -8px 0; }
.energy .hud-icon { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(95, 143, 216, .55)) drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.energy-num {
  position: absolute; left: 0; right: 0; top: 44%; text-align: center; line-height: 1;
  font-family: 'Creepster', cursive; font-size: 34px; letter-spacing: 1px; color: #fff;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000;
}
.energy small { font-size: 15px; opacity: .85; }
.energy.empty .hud-icon { filter: grayscale(.85) brightness(.55) drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.energy.empty .energy-num { color: #b9b0a4; }
.end { margin-left: 8px; }
.active-btn.ready { border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 196, 90, .45); }
.pill-btn { padding: 6px 8px; }

/* Nachziehstapel | Hand | Ablagestapel */
.hand-row { display: flex; align-items: flex-end; gap: 14px; flex: none; padding-bottom: 30px; }
/* niedrige Fenster: Hand und Stapel etwas kleiner */
@media (max-height: 860px) { .hand-row { zoom: .88; } }
@media (max-height: 740px) { .hand-row { zoom: .76; } .energy { width: 56px; height: 72px; } .energy-num { font-size: 27px; } }
.hand-row .hand { flex: 1; min-width: 0; }
.pile {
  position: relative; flex: none; width: 92px; height: 128px; margin: 0 8px 40px;
  padding: 0; border: none; background: none;
}
.pile:hover:not(:disabled) { border: none; }
.pile-card {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 3px solid #2b1a0f; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 40%, #d6bf98 0%, #c6aa80 65%, #a98b61 100%);
  transition: transform .15s;
}
.pile-card::after {   /* Innenrahmen wie auf einer Kartenrückseite */
  content: ''; position: absolute; inset: 6px; border: 2px solid rgba(43, 26, 15, .55); border-radius: 5px;
}
.pile-discard .pile-card { transform: rotate(5deg); background: radial-gradient(ellipse at 50% 40%, #c9b18a 0%, #b39770 65%, #957853 100%); }
.pile:hover .pile-card { transform: translateY(-5px); }
.pile-discard:hover .pile-card { transform: translateY(-5px) rotate(5deg); }
.pile.empty .pile-card { opacity: .3; border-style: dashed; }
.pile-count {
  position: absolute; bottom: -12px; min-width: 36px; height: 36px; padding: 0 4px; border-radius: 18px;
  background: #2b1a0f; color: #ecdcbc; border: 3px solid #c6aa80;
  font-family: 'Permanent Marker', cursive; font-size: 17px; line-height: 30px;
}
.pile-draw .pile-count { left: -12px; }
.pile-discard .pile-count { right: -12px; }
.pile-label { position: absolute; left: -10px; right: -10px; bottom: -36px; font-size: 15px; color: var(--muted); }

/* Hand als Kartenfächer (--rot/--lift setzt game.js pro Karte) */
.hand { display: flex; justify-content: center; padding: 40px 20px 0; min-height: 236px; }
.hand .card { margin: 0 -7px; transform: translateY(var(--lift, 0)) rotate(var(--rot, 0)); transform-origin: 50% 120%; }
.hand .card:hover { transform: translateY(-26px) rotate(0) scale(1.08); z-index: 5; }
.hand .card.selected { transform: translateY(-38px) rotate(0) scale(1.1); z-index: 6; }
.hand .card.unplayable:hover { transform: translateY(calc(var(--lift, 0) - 6px)) rotate(var(--rot, 0)); }

/* ---------- Karten (Isaac-Zettel-Look: braunes Papier, Tinte) ---------- */
.card {
  --ink: #2b1a0f;
  position: relative; isolation: isolate; width: 136px; height: 196px; flex: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 7px 8px 8px; color: var(--ink); cursor: pointer;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .6));
  transition: transform .14s ease-out, filter .14s;
}
/* Papier + Tuschrand als eigene Ebene: nur sie wird krakelig verzerrt, die Schrift bleibt scharf */
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 3px solid var(--ink); border-radius: 9px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='200'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .11  1.5 0 0 0 -.6'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .17  0 0 0 0 .09  0 0 0 .3 -.06'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    radial-gradient(ellipse at 50% 38%, #d6bf98 0%, #c6aa80 65%, #a98b61 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 238, 205, .22), inset 0 0 18px rgba(70, 42, 18, .5);
  filter: url(#ink-rough);
}
.card:hover { transform: translateY(-8px) rotate(-1deg); }
.card.selected { filter: drop-shadow(0 0 9px rgba(142, 28, 18, .9)) drop-shadow(0 6px 7px rgba(0, 0, 0, .6)); }
.card.selected::before { border-color: #8e1c12; }
.card.unplayable { filter: grayscale(.7) brightness(.68) drop-shadow(0 6px 7px rgba(0, 0, 0, .6)); }
.card.unplayable:hover { transform: none; }
.card.ghost { opacity: .15; cursor: default; }

.card-title {
  font-family: 'Permanent Marker', 'Patrick Hand', cursive; font-size: 14px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .3px; min-height: 30px; width: 100%;
  display: flex; align-items: center; justify-content: center; padding: 0 14px 0 18px;
}
.card-title.long { font-size: 11.5px; letter-spacing: 0; padding: 0 8px 0 16px; }
/* Bildfenster: hellerer Papierfleck mit Tuschrahmen, der Kartentyp färbt das Papier nur leicht ein */
.card-art {
  position: relative; width: 100%; height: 78px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.card-art::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border: 2.5px solid var(--ink); border-radius: 7px; filter: url(#ink-rough);
  box-shadow: inset 0 0 10px rgba(60, 35, 15, .35);
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 246, 225, .55) 0%, rgba(255, 240, 210, .15) 75%);
}
.card.attack .card-art::before { background-color: rgba(160, 40, 20, .22); }
.card.skill  .card-art::before { background-color: rgba(40, 85, 150, .2); }
.card.power  .card-art::before { background-color: rgba(105, 50, 150, .22); }
.card-art .sprite-img { width: 90px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(43, 26, 15, .3)); }
/* Kosten als gezeichneter Tintenkreis oben links */
.cost {
  position: absolute; left: -10px; top: -10px; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--ink); background: radial-gradient(circle at 40% 35%, #f0e2c2, #d2b88e);
  font-family: 'Permanent Marker', cursive; font-size: 17px; line-height: 26px; color: var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.card-type {
  margin-top: -3px; padding: 0 9px; border-radius: 3px; background: var(--ink); color: #e6d3ad;
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase; line-height: 16px; transform: rotate(-1.5deg);
}
/* Angriffe: Nahkampf (Dolch, blutrot) oder Fernkampf (Reichweite, tintenblau) */
.card-type.melee, .card-type.ranged { display: inline-flex; align-items: center; gap: 3px; padding-left: 4px; cursor: help; white-space: nowrap; max-width: 100%; }
.card-type.ranged { letter-spacing: .2px; }
.card-type.melee { background: #6e1910; }
.card-type.ranged { background: #1f3b5c; }
.card-type.melee::before, .card-type.ranged::before {
  content: ''; width: 13px; height: 13px; background: center / contain no-repeat; image-rendering: pixelated; filter: brightness(1.6);
}
.card-type.melee::before { background-image: url(sprites/ui/statDamage.png); }
.card-type.ranged::before { background-image: url(sprites/ui/statRange.png); }
.card-text { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14.5px; line-height: 1.12; padding: 3px 2px 6px; }
.card-text.long { font-size: 12.5px; line-height: 1.05; }
.card-text b { color: #7a1a10; }
/* Seltenheit als kleine Tinten-Raute unten rechts */
.card-gem { position: absolute; right: 7px; bottom: 6px; width: 10px; height: 10px; transform: rotate(45deg); border: 2px solid var(--ink); }
/* Seltenheit: leichte farbige Umrandung um den Tuschrand + passender Edelstein (Farben wie CARD_RARITIES in data.js) */
.card.r-starter .card-gem { display: none; }
.card.r-common    { --rar: #f2eee6; --rar-glow: rgba(255, 255, 255, .28); }
.card.r-rare      { --rar: #4aa8ff; --rar-glow: rgba(74, 168, 255, .5); }
.card.r-epic      { --rar: #b660ff; --rar-glow: rgba(182, 96, 255, .55); }
.card.r-legendary { --rar: #ffae1a; --rar-glow: rgba(255, 174, 26, .75); }
.card:not(.r-starter)::before {
  box-shadow: inset 0 0 0 2px rgba(255, 238, 205, .22), inset 0 0 18px rgba(70, 42, 18, .5), 0 0 0 2px var(--rar), 0 0 8px 1px var(--rar-glow);
}
.card.r-legendary::before {
  box-shadow: inset 0 0 0 2px rgba(255, 238, 205, .22), inset 0 0 18px rgba(70, 42, 18, .5), 0 0 0 2px var(--rar), 0 0 14px 3px var(--rar-glow);
}
.card:not(.r-starter) .card-gem { background: var(--rar); box-shadow: 0 0 6px var(--rar-glow); }

.sprite-img { image-rendering: pixelated; width: 1.4em; height: 1.4em; vertical-align: middle; }
.item-icon .sprite-img { width: 64px; height: 64px; }
.hud-block.items .sprite-img { width: 32px; height: 32px; }
.pix { image-rendering: pixelated; width: auto; }
/* Gegner: Größe setzt fitPix() in ganzzahligen Pixel-Schritten; bis dahin unsichtbar klein */
.enemy .sprite .enemy-img { width: 0; height: 0; max-width: none; }
.enemy .sprite { min-height: 60px; display: flex; align-items: flex-end; justify-content: center; }

.card-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.card-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-height: 60vh; overflow-y: auto; padding: 14px 8px; }

/* ---------- Belohnung, Laden, Items ---------- */
.loot { list-style: none; padding: 0; font-size: 20px; }
.tip-ref { cursor: help; border-bottom: 1px dotted currentColor; }   /* Item, Trinket oder Tarotkarte im Text: Drüberfahren zeigt den Info-Zettel */
.item {
  display: flex; gap: 12px; align-items: center; text-align: left;
  background: rgba(0,0,0,.25); border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px auto; max-width: 480px;
}
.item-icon { font-size: 40px; }

/* ---------- Verwandlungen ---------- */
.tf-icon { height: 26px; vertical-align: middle; }
.hud-block.items .tf-badge { filter: drop-shadow(0 0 4px rgba(232, 196, 90, .8)); }
.tf-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tf-chip { font-size: 13px; background: rgba(232, 196, 90, .15); border: 1px solid rgba(232, 196, 90, .5); border-radius: 6px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; }
.tf-chip .tf-icon { height: 18px; }
.tf-chip.done { background: rgba(232, 196, 90, .4); }
.tf-reveal { text-align: center; }
.tf-reveal .tf-big { height: 120px; font-size: 90px; display: inline-block; }
.tf-reveal h2 { color: var(--gold); font-size: 2.2em; margin: 6px 0; }
.tf-list { max-height: 62vh; overflow-y: auto; text-align: left; }
.tf-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px; border-bottom: 1px solid var(--line); }
.tf-row > .tf-icon { height: 40px; min-width: 36px; font-size: 30px; }
.tf-row.done { background: rgba(232, 196, 90, .12); }
.tf-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 13px; }
.tf-item { opacity: .45; display: inline-flex; align-items: center; gap: 2px; }
.tf-item.got { opacity: 1; color: var(--gold); }
.tf-item .sprite-img { width: 20px; height: 20px; }
.tag { font-size: 13px; background: #5a2e22; border-radius: 6px; padding: 0 6px; }
.pedestal { margin: 16px auto; }
.shop-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.price { font-size: 18px; }
.price.poor { color: #c06050; }
.price.sold { color: var(--muted); }
.shop-item { margin: 10px 0; }
.goods { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.event-msg { background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; color: var(--gold); }
/* ---------- Offene Deal-Tür nach dem Boss ---------- */
.deal-door-screen { max-width: 640px; margin: 30px auto; text-align: center; padding: 26px 24px; border-radius: 16px; }
.deal-door-screen h1 { font-size: 34px; margin: 6px 0; }
.big-door { width: 245px; image-rendering: pixelated; animation: door-glow 2.2s ease-in-out infinite; }
.deal-door-screen.is-devil { background: radial-gradient(ellipse at 50% 30%, rgba(110, 14, 6, .6), rgba(12, 2, 2, .9) 75%); border: 2px solid #6e120c; color: #f6d3c6; --glow: rgba(255, 60, 20, .85); }
.deal-door-screen.is-angel { background: radial-gradient(ellipse at 50% 30%, rgba(200, 228, 255, .3), rgba(8, 24, 44, .9) 75%); border: 2px solid #9cc6f0; color: #eaf4ff; --glow: rgba(190, 225, 255, .95); }
@keyframes door-glow { 0%, 100% { filter: drop-shadow(0 0 8px var(--glow)); } 50% { filter: drop-shadow(0 0 26px var(--glow)); } }

/* ---------- Teufels- & Engelsraum ---------- */
body[data-screen="deal"] {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .82) 100%) fixed,
    var(--floor-bg, none) center / cover no-repeat fixed #000;
  image-rendering: pixelated;
}
.deal { max-width: 900px; margin: 6px auto 20px; text-align: center; padding: 18px 24px 24px; border-radius: 16px; }
.deal .pix { image-rendering: pixelated; }
.deal-head { display: flex; align-items: center; justify-content: center; gap: 18px; }
.deal-head h1 { font-size: clamp(42px, 7vw, 66px); margin: 0; letter-spacing: 2px; }
.deal-icon { width: 45px; }
.deal-quote { font-size: 21px; margin: 2px 0 6px; font-style: italic; }
.deal-altar { height: 190px; display: flex; align-items: flex-end; justify-content: center; }
.deal-statue { width: 200px; }
.peds { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.ped { width: 230px; padding: 10px 12px 14px; border-radius: 14px; transition: opacity .3s, filter .3s; }
.ped-item { height: 84px; display: flex; align-items: flex-end; justify-content: center; }
.ped-item .sprite-img { width: 76px; height: 76px; animation: hover 2.4s ease-in-out infinite; }
.ped-stone { width: 92px; height: 26px; margin: 2px auto 8px; border-radius: 50%; }
.ped-name { font-size: 22px; }
.ped-desc { font-size: 16px; opacity: .85; min-height: 60px; margin: 2px 0 8px; }
.ped-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; padding: 6px 16px; }
.ped-btn small { font-size: 14px; opacity: .85; }
.ped-heart { font-size: 26px; line-height: 1; }
.ped-state { font-size: 18px; opacity: .8; min-height: 38px; line-height: 38px; }
.ped.taken .ped-item { visibility: hidden; }
.ped.gone { opacity: .3; filter: grayscale(1) blur(.5px); }
.deal-exit { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; padding: 6px 20px 6px 8px; }
.deal-door { width: 74px; }
@keyframes hover { 50% { transform: translateY(-7px); } }

/* Teufel: Glut und Schwefel */
.deal-devil {
  color: #f6d3c6; border: 2px solid #6e120c;
  background: radial-gradient(ellipse at 50% 30%, rgba(110, 14, 6, .55), rgba(12, 2, 2, .88) 75%);
  box-shadow: 0 0 50px rgba(220, 40, 10, .35), inset 0 0 70px rgba(0, 0, 0, .85);
}
.deal-devil h1 { font-family: 'Creepster', cursive; color: #ff4b24; text-shadow: 0 0 22px rgba(255, 70, 20, .8), 0 3px 0 #300; }
.deal-devil .deal-quote { color: #e89a86; }
.deal-devil .deal-statue {
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 52%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 48%, #000 52%, transparent 70%);
  animation: brimstone 2.6s ease-in-out infinite;
}
.deal-devil .ped { background: rgba(20, 3, 2, .94); border: 2px solid #4e0d08; }
.deal-devil .ped-stone { background: radial-gradient(ellipse, #3a2a26 0%, #1a1110 60%, transparent 72%); }
.deal-devil .ped-btn { background: #3c0805; border-color: #b52a16; color: #ffd6c8; }
.deal-devil .ped-btn:hover:not(:disabled) { background: #6e120c; border-color: #ff6a3a; }
.deal-devil .ped-heart { color: #e0281c; text-shadow: 0 0 8px rgba(255, 40, 20, .7); }
.deal-devil .deal-exit { background: #1e0403; border-color: #7a160e; color: #ffd6c8; }
@keyframes brimstone { 50% { filter: brightness(1.25) drop-shadow(0 0 18px rgba(255, 60, 10, .8)); } }

/* Engel: Licht und Kirchenfenster */
.deal-angel {
  color: #eaf4ff; border: 2px solid #9cc6f0;
  background: radial-gradient(ellipse at 50% 25%, rgba(200, 228, 255, .32), rgba(8, 24, 44, .86) 75%);
  box-shadow: 0 0 50px rgba(150, 200, 255, .4), inset 0 0 70px rgba(0, 10, 30, .7);
}
.deal-angel h1 { color: #fff; text-shadow: 0 0 22px rgba(170, 215, 255, .95), 0 2px 0 #1a3a5a; }
.deal-angel .deal-quote { color: #bcdcff; }
.deal-angel .deal-statue { filter: drop-shadow(0 0 18px rgba(200, 230, 255, .9)); animation: hover 3.2s ease-in-out infinite; }
.deal-angel .ped { background: rgba(10, 30, 55, .94); border: 2px solid #4f7ca8; }
.deal-angel .ped-stone { background: radial-gradient(ellipse, #6e7f90 0%, #3a4858 60%, transparent 72%); }
.deal-angel .ped-btn { background: #1f4468; border-color: #bfe0ff; color: #fff; }
.deal-angel .ped-btn:hover:not(:disabled) { background: #2f6496; }
.deal-angel .deal-exit { background: #0e2440; border-color: #6a9ccc; color: #eaf4ff; }

/* ---------- Overlay ---------- */
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
#modal.hidden { display: none; }
/* Zettel-Popup (Release Notes): Papier wie die Menüs, Tinte, Inhalt scrollt im Zettel */
.modal-box.paper-modal { position: relative; max-width: 640px; background: none; border: none; border-radius: 0; padding: 0; text-align: left;
  color: #2b1a0f; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .8)); display: flex; flex-direction: column; max-height: 88vh; }
.paper-scroll { position: relative; overflow-y: auto; padding: 28px 40px 6px; font-family: 'Patrick Hand', cursive; font-size: 17px; line-height: 1.3; }
.paper-scroll::-webkit-scrollbar-thumb { background: rgba(43, 26, 15, .45); }
.paper-close { position: relative; align-self: center; margin: 4px 0 18px; }
.notes-title { font-family: 'Permanent Marker', cursive; font-size: 34px; text-align: center; margin: 0 0 6px; color: #2b1a0f; }
.notes-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 2px dashed rgba(43, 26, 15, .4); padding-bottom: 4px; }
.notes-v { font-family: 'Permanent Marker', cursive; font-size: 24px; color: #8e1c12; transform: rotate(-3deg); }
.notes-name { font-family: 'Permanent Marker', cursive; font-size: 20px; }
.notes-date { margin-left: auto; opacity: .6; font-size: 15px; }
.notes-intro { margin: 8px 0 2px; }
.notes-version + .notes-version { margin-top: 26px; }
.notes-version h3 { font-family: 'Permanent Marker', cursive; font-size: 18px; margin: 12px 0 2px; color: #2b1a0f; }
.notes-version ul { margin: 0; padding-left: 22px; }
.notes-version li { margin: 2px 0; }
.notes-version li::marker { content: '✗  '; color: #8e1c12; }
.notes-version b { color: #7a1a10; }
/* Version unten rechts auf den Menü-Zetteln */
.ink-btn.version-tag { position: absolute; right: 36px; top: 24px; font-size: 19px; color: #2b1a0f; transform: rotate(2deg); }
.ink-btn.version-tag:active { transform: rotate(2deg) translateY(1px); }
.ink-btn.version-tag:hover { color: #8e1c12; }
.ink-btn.version-tag::before { right: calc(100% + 2px); }
.modal-box { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 16px; max-width: 980px; width: 100%; text-align: center; }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

/* ---------- Kartenanimationen (anim.js) ---------- */
.anim { position: fixed; pointer-events: none; will-change: transform, opacity; }
.anim img { display: block; image-rendering: pixelated; }
/* Tränen: Kugel mit Glanzpunkt und dunklem Rand */
.tear { border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(10, 15, 30, .55), 0 5px 6px rgba(0, 0, 0, .35); }
.tear-blue   { background: radial-gradient(circle at 34% 30%, #fff 0 13%, #b7dcff 24%, #4a8ad8 66%, #1f437e 100%); }
.tear-blood  { background: radial-gradient(circle at 34% 30%, #ffd0c8 0 12%, #e2453a 26%, #a3160f 68%, #4e0805 100%); }
.tear-tooth  { background: radial-gradient(circle at 34% 30%, #fff 0 18%, #efe6d2 35%, #c9b996 80%, #8a7a5a 100%); border-radius: 45% 45% 50% 50%; }
.tear-poison { background: radial-gradient(circle at 34% 30%, #f4ffe0 0 12%, #9be05a 28%, #4f9a2a 70%, #24501a 100%); }
.tear-ipecac { background: radial-gradient(circle at 34% 30%, #f4ffe0 0 12%, #b6e04a 28%, #6d9a1f 70%, #33500e 100%); }
.drop { border-radius: 50%; transform: translate(-50%, -50%); }
.splash { border-radius: 50%; transform: translate(-50%, -50%); border: 4px solid; background: none; }
.splash-blue   { border-color: rgba(150, 205, 255, .9); }
.splash-blood  { border-color: rgba(230, 60, 45, .9); }
.splash-tooth  { border-color: rgba(240, 232, 210, .9); }
.splash-poison, .splash-ipecac { border-color: rgba(150, 225, 90, .9); }
/* Explosionen */
.boom { border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.boom-fire   { background: radial-gradient(circle, #fff6c8 0 12%, #ffd23a 25%, #ff7a1a 48%, rgba(200, 40, 10, .6) 66%, transparent 72%); }
.boom-ipecac { background: radial-gradient(circle, #f6ffd8 0 12%, #c8f04a 28%, #6fae22 52%, rgba(40, 90, 10, .5) 66%, transparent 72%); }
.smoke { border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(70, 60, 55, .8), rgba(40, 32, 28, .5) 50%, transparent 70%); }
/* Brimstone */
.brim-charge {
  width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 38%, #ff6a5a 0 10%, #e00 30%, #a00000 58%, #5a0000 70%, transparent 73%);
  box-shadow: 0 0 22px 6px rgba(220, 0, 0, .55);
}
.brim-beam {
  height: 46px; transform-origin: left center; border-radius: 23px;
  background: linear-gradient(180deg, transparent 0%, rgba(140, 0, 0, .75) 14%, #e8281a 34%, #ffd0c0 50%, #e8281a 66%, rgba(140, 0, 0, .75) 86%, transparent 100%);
  box-shadow: 0 0 26px 8px rgba(255, 30, 10, .55);
  animation: brim-flicker .08s linear infinite alternate;
}
@keyframes brim-flicker { to { filter: brightness(1.25); } }
/* Ingame-Strahl: Anfang | kachelndes, fließendes Mittelstück | Einschlag; der ganze Strahl zittert wie im Spiel */
.brim-ray { transform-origin: left center; filter: drop-shadow(0 0 10px rgba(255, 20, 0, .55)); }
.brim-ray.flip { transform-origin: right center; }
.brim-inner { display: flex; align-items: center; width: 100%; height: 100%; animation: brim-wobble .07s steps(1) infinite alternate; }
.brim-ray.flip .brim-inner { transform: scaleX(-1); animation-name: brim-wobble-flip; }
.brim-inner img { height: auto; flex: none; image-rendering: pixelated; }
.brim-start { margin-right: -2px; }
.brim-mid {
  flex: 1; height: 100%; background-repeat: repeat-x; background-size: var(--tile) 100%; image-rendering: pixelated;
  animation: brim-flow .22s linear infinite;
}
.brim-end { margin-left: -14px; animation: brim-splat .1s steps(1) infinite alternate; }
@keyframes brim-flow { from { background-position-x: 0; } to { background-position-x: var(--tile); } }
@keyframes brim-wobble { from { transform: scaleY(1); } to { transform: scaleY(1.1); } }
@keyframes brim-wobble-flip { from { transform: scaleX(-1) scaleY(1); } to { transform: scaleX(-1) scaleY(1.1); } }
@keyframes brim-splat { from { transform: scale(1); } to { transform: scale(1.08) rotate(4deg); } }
/* Messer, Schnitt, Bombe */
.knife { transform: translate(-50%, -50%); }
.knife img { width: 64px; height: 64px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); }
.slash {
  width: 110px; height: 8px; border-radius: 4px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #fff 40%, #ffe0d8 60%, transparent); box-shadow: 0 0 10px #fff;
}
.thrown-bomb { transform: translate(-50%, -50%); }
.thrown-bomb img { width: 46px; height: auto; }
/* Verteidigung, Wolken, Auren, Icons */
.shield-ring { width: 150px; height: 150px; border-radius: 50%; transform: translate(-50%, -50%); }
.shield-soul { border: 5px solid rgba(120, 160, 230, .95); box-shadow: 0 0 22px rgba(120, 170, 255, .8), inset 0 0 22px rgba(120, 170, 255, .6); }
.shield-holy { border: 5px solid rgba(255, 245, 200, .95); box-shadow: 0 0 26px rgba(255, 240, 170, .9), inset 0 0 22px rgba(255, 240, 170, .7); }
.puff { width: 90px; height: 70px; border-radius: 50%; transform: translate(-50%, -50%); }
.puff-poop { background: radial-gradient(ellipse, rgba(120, 80, 40, .85), rgba(90, 60, 30, .5) 55%, transparent 72%); }
.aura {
  width: 190px; height: 190px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 35%, var(--aura) 60%, transparent 72%); mix-blend-mode: screen;
}
.fx-icon { transform: translate(-50%, -50%); font-size: 30px; }
.fx-icon img { width: 34px; height: auto; }
.fx-icon.big img, .fx-icon.big .sprite-img { width: 56px; height: 56px; }
/* Gegner-Effekte */
.enemy .sprite { will-change: transform; }
.beam-left { transform-origin: right center; }
.tear-curse { background: radial-gradient(circle at 34% 30%, #f3e0ff 0 12%, #b56ae8 28%, #6a2aa0 70%, #2e0c4a 100%); }
.splash-curse { border-color: rgba(190, 120, 240, .9); }
.shield-stone { width: 130px; height: 130px; border: 5px solid rgba(190, 190, 200, .9); box-shadow: 0 0 16px rgba(220, 220, 235, .6), inset 0 0 16px rgba(220, 220, 235, .4); }
.shockwave { border-radius: 50%; transform: translate(-50%, -50%); border: 5px solid rgba(230, 200, 160, .85); box-shadow: 0 0 14px rgba(255, 220, 170, .6); }
.stomp-shadow { width: 240px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .85), rgba(0, 0, 0, .5) 55%, transparent 72%); }

/* gespielte Karte, die aus der Hand fliegt */
.played-ghost { position: fixed; z-index: 41; pointer-events: none; }
.float {
  position: fixed; transform: translate(-50%, 0); font-size: 26px; font-weight: bold;
  text-shadow: 0 2px 0 #000, 0 0 6px #000; animation: rise 1s ease-out forwards; white-space: nowrap;
}
.float.dmg { color: #ff5a4a; }
.float.blk { color: #8ac4ff; font-size: 20px; }
.float.heal { color: #7aea6a; }
.float.buff, .float.gold { color: var(--gold); font-size: 20px; }
.float.debuff { color: #d0a0ff; font-size: 20px; }
.float.crit { color: #ffd23a; font-size: 30px; font-family: 'Creepster', cursive; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255, 120, 0, .9), 2px 2px 0 #3a0a00; }
@keyframes rise { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -60px; } }

.shake { animation: shake .3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px);
  background: #000c; border: 2px solid var(--gold); border-radius: 10px; padding: 8px 18px;
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; pointer-events: none; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .card { width: 112px; height: 170px; }
  .card-art { height: 62px; }
  .card-art .sprite-img { width: 72px; height: 50px; }
  .card-title { font-size: 12px; }
  .card-text { font-size: 12.5px; }
  .hand { flex-wrap: wrap; }
  .hand-row { gap: 4px; }
  .pile { width: 58px; height: 82px; margin: 0 4px 40px; }
  .pile-card svg { width: 26px; }
  .hand .card { margin: 0 -10px 8px; }
  .enemy { width: 120px; }
  .enemy .sprite { font-size: 48px; }
  .enemy.boss .sprite { font-size: 72px; }
  .arena { justify-content: center; }
}

/* ---------- Rebirth-Erweiterung ---------- */
.tear-fire { background: radial-gradient(circle at 34% 30%, #fff6c8 0 12%, #ffb340 28%, #e2451a 70%, #6e1405 100%); }
.tear-bone { background: radial-gradient(circle at 34% 30%, #fff 0 18%, #ece4d0 35%, #bfb090 80%, #7a6a4a 100%); border-radius: 40%; }
.heart-img.soul { filter: drop-shadow(0 0 2px rgba(120, 160, 255, .5)); }
.heart.soul { color: #7f9cff; }
.soulnum { color: #9db4ff; }
.hud-block.items { flex-wrap: wrap; max-width: 46vw; row-gap: 2px; }
.hud-block.items .sprite-img { width: 28px; height: 28px; }
.item-choices { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 8px 0 14px; }
.item-choice { text-align: left; max-width: 340px; padding: 8px 12px; }
.item-choice:hover { transform: translateY(-2px); }
.route-choices { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.route-btn { display: flex; flex-direction: column; gap: 6px; width: 240px; padding: 16px; text-align: center; }
.route-btn b { font-size: 22px; }
.route-btn span { font-size: 14px; opacity: .85; }
.route-btn.sheol { background: linear-gradient(#4a1010, #220606); color: #ffd9cc; }
.route-btn.cathedral { background: linear-gradient(#f4f0de, #c9c0a0); color: #2b1a0f; }
.deal-guard { display: flex; justify-content: center; margin: 18px 0; }
.deal-guard .sprite-img { width: auto; height: 180px; }.inv-tag { font-size: 13px; color: #c9c0b0; border: 1px dashed rgba(201, 192, 176, .5); border-radius: 6px; padding: 1px 8px; margin-top: 2px; }

/* ---------- Herzen & Werte ---------- */
.hud-block.stats { gap: 10px; font-size: 15px; }
.player-hearts { display: flex; justify-content: center; margin-bottom: 4px; }
.player-hearts .heart-img { height: 18px; }
.heart.soul { color: #7f9cff; } .heart.black { color: #111; text-shadow: 0 0 2px #fff; } .heart.eternal { color: #fff; }
.no-hearts { font-size: 13px; opacity: .7; font-style: italic; }
.card-text .dmg { font-weight: bold; color: #7a1208; }
.card-text .dmg-x { font-size: .78em; opacity: .75; margin-left: 2px; white-space: nowrap; }
.char-numbers { flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 15px; }

/* Auswahlzettel: Isaac-Werte-Symbole mit Tuschestrichen */
.char-statbars { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 34px; justify-content: center; margin: 6px 0 2px; }
.stat-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.stat-icon { width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(43, 26, 15, .35)); }
.strokes path { fill: none; stroke: #2b1a0f; stroke-width: 3.2; stroke-linecap: round; }
.strokes { filter: url(#ink-rough); }
.stat-unknown, .stat-none { font-family: 'Permanent Marker', cursive; font-size: 20px; color: #2b1a0f; min-width: 20px; }
.char-trait { font-family: 'Permanent Marker', cursive; font-size: 15px; color: #2b1a0f; opacity: .8; margin-top: 2px; }

/* ---------- Isaac-Symbole statt Emojis ---------- */
.big-sprite { display: block; margin: 0 auto 6px; height: 96px; width: auto; image-rendering: pixelated; }
img.shopkeeper { display: block; margin: 0 auto 4px; height: 90px; width: auto; }
.ui-icon.icon-ui-statusPoison, .ui-icon.icon-ui-statusWeak, .ui-icon.icon-ui-statusVuln, .ui-icon.icon-ui-statusStun { height: 1.5em; vertical-align: -.45em; }
.ui-icon.icon-cards-duck { height: 1.05em; vertical-align: -.18em; }
.card-text .ui-icon { height: 1.15em; vertical-align: -.22em; }
.intent .ui-icon { height: 18px; vertical-align: -3px; }
.chip .ui-icon { height: 18px; vertical-align: -4px; }
.node .nicon.ink { font-family: 'Permanent Marker', cursive; fill: #2b1a0f; font-size: 26px; }
.legend-row { display: flex; align-items: center; gap: 8px; }
.legend-row .ui-icon { height: 22px; min-width: 22px; object-fit: contain; }
.legend-q { font-family: 'Permanent Marker', cursive; font-size: 20px; width: 22px; text-align: center; }
.hud-block.stats .ui-icon { height: 22px; vertical-align: -5px; margin-right: 1px; }
.secret-wall .secret-icon { height: 80px; } .secret-wall.super h1 { color: #ffcf70; }

/* ---------- Boss: unbekannt auf der Karte, Intro beim Betreten ---------- */
.node .nicon.boss-q { font-size: 64px; }

/* Versus-Bildschirm wie im Original: dunkler Vorhang, schräges Band, Figur links, Boss rechts */
#boss-intro {
  position: fixed; inset: 0; z-index: 200; cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(40, 10, 8, .88), rgba(0, 0, 0, .97) 70%);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center;
  animation: bi-fade-in .25s ease-out;
}
#boss-intro.out { animation: bi-fade-out .3s ease-in forwards; }
.bi-band {
  position: absolute; left: -10%; right: -10%; top: 50%; height: 42%;
  background: linear-gradient(90deg, #3a1410, #7a2418 40%, #7a2418 60%, #3a1410);
  box-shadow: 0 0 0 4px #1a0805, 0 0 60px rgba(160, 30, 20, .6);
  transform: translateY(-50%) rotate(-4deg) scaleX(0); transform-origin: left center;
  animation: bi-band .35s .05s cubic-bezier(.2, .9, .3, 1) forwards;
}
.bi-player, .bi-boss { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bi-player { animation: bi-from-left .45s .25s cubic-bezier(.2, 1.2, .4, 1) both; }
.bi-boss   { animation: bi-from-right .45s .35s cubic-bezier(.2, 1.2, .4, 1) both; }
.bi-player img { image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .5)); }
.bi-boss img { width: min(340px, 34vw); image-rendering: pixelated; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .55)); }
.bi-vs {
  position: relative; z-index: 1; font-size: clamp(60px, 9vw, 120px); color: #f4e4c8;
  text-shadow: 4px 4px 0 #1a0805, 0 0 30px rgba(255, 120, 60, .5);
  animation: bi-pop .4s .55s cubic-bezier(.3, 1.8, .5, 1) both;
}
.bi-pname { font-size: clamp(22px, 3vw, 34px); }
.bi-name {
  font-size: clamp(30px, 4.5vw, 58px); color: #f4e4c8; text-align: center; max-width: 40vw;
  text-shadow: 3px 3px 0 #1a0805;
  animation: bi-drop .4s .8s cubic-bezier(.3, 1.6, .5, 1) both, bi-shake .3s 1.2s;
}
@keyframes bi-fade-in  { from { opacity: 0; } }
@keyframes bi-fade-out { to { opacity: 0; } }
@keyframes bi-band { to { transform: translateY(-50%) rotate(-4deg) scaleX(1); } }
@keyframes bi-from-left  { from { transform: translateX(-60vw); opacity: 0; } }
@keyframes bi-from-right { from { transform: translateX(60vw); opacity: 0; } }
@keyframes bi-pop  { from { transform: scale(3) rotate(-10deg); opacity: 0; } }
@keyframes bi-drop { from { transform: translateY(-80px); opacity: 0; } }
@keyframes bi-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (max-width: 700px) {
  #boss-intro { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  .bi-boss img { width: 55vw; }
  .bi-name { max-width: 90vw; }
}

/* ---------- Laden wie im Original (Raumbild sprites/rooms/shopRoom, Waren auf dem Holzboden) ---------- */
body[data-screen="shop"] {
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .92) 80%) fixed,
    var(--floor-bg, none) center / cover no-repeat fixed #000;
}
.shop-room {
  position: relative; max-width: 1100px; margin: 6px auto 20px; aspect-ratio: 442 / 286;
  background: var(--shop-bg) center / 100% 100% no-repeat #4a2e1c; image-rendering: pixelated;
  /* Innenmaße = Holzboden (Wände sind im Bild ~12 % breit) */
  padding: 9% 12.5% 11.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .8);
}
/* Kaminfeuer: Bildstreifen aus tools/make-shop-fire.ps1 (6 Bilder, Zeile 0 links, Zeile 1 rechts) liegt genau über dem Feuer im Hintergrund */
.shop-fire {
  position: absolute; top: 20.979%; width: 5.882%; height: 11.888%; pointer-events: none;
  background: var(--shop-fire) 0 0 / 600% 200% no-repeat; image-rendering: pixelated;
  animation: shop-fire .66s steps(6, jump-none) infinite;
}
.shop-fire.left { left: 17.647%; }
.shop-fire.right { left: 76.471%; --row: 100%; animation-duration: .6s; animation-delay: -.25s; }
.shop-fire::after {   /* warmer Lichtschein, flackert unregelmäßig */
  content: ''; position: absolute; inset: -90% -160% -40%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 170, 60, .32), rgba(255, 120, 30, .12) 45%, transparent 70%);
  animation: shop-glow 1.7s ease-in-out infinite;
}
.shop-fire.right::after { animation-duration: 1.9s; animation-delay: -.8s; }
@keyframes shop-fire { from { background-position: 0% var(--row, 0%); } to { background-position: 100% var(--row, 0%); } }
@keyframes shop-glow { 0%, 100% { opacity: .75; } 30% { opacity: 1; } 55% { opacity: .6; } 80% { opacity: .95; } }
.shopkeeper-hang { position: absolute; left: 50%; top: 5.5%; transform-origin: 50% -40px; animation: shop-swing 3.2s ease-in-out infinite; margin-left: -42px; }
.shopkeeper-hang .shopkeeper { width: 84px; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
@keyframes shop-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.shop-floor { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3vw, 38px); flex-wrap: wrap; width: 100%; }
/* Waren-Reihe bleibt zwischen den beiden Kaminen (die liegen bei 17–24 % und 76–83 %), auch mit 7 Waren */
.shop-floor:not(.cards) { width: 52%; margin: 70px auto 0; justify-content: space-evenly; gap: 2px; flex-wrap: nowrap; }
.shop-floor.cards { gap: clamp(10px, 2.5vw, 30px); }
.shop-ware { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.shop-ware.is-card .card { transform: scale(.9); transform-origin: bottom center; margin-top: -14px; }
.shop-ware.is-card .card:hover { transform: scale(.95) translateY(-6px); }
.shop-pick {
  position: relative; background: none; border: none; padding: 0; width: 64px; height: 64px;
  display: flex; align-items: flex-end; justify-content: center; cursor: pointer;
}
.shop-pick::after {   /* Schatten auf den Dielen */
  content: ''; position: absolute; bottom: -4px; left: 14%; width: 72%; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .35); z-index: -1;
}
.shop-pick:hover:not(:disabled) { border: none; transform: translateY(-3px); }
.shop-pick .sprite-img, .shop-pick .shop-pickup { width: auto; height: 42px; image-rendering: pixelated; animation: hover 2.4s ease-in-out infinite; }
.shop-ware.is-item .shop-pick { width: 84px; height: 84px; }
.shop-ware.is-item .shop-pick .sprite-img { height: 70px; width: 70px; }
.shop-ware.sold .shop-pick { opacity: 0; pointer-events: none; }
.shop-ware.is-service { align-self: center; }
.shop-ware.is-service .shop-pick { width: 96px; height: 96px; }
.shop-ware.is-service .shop-pick .sprite-img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
/* Preis wie im Spiel: weiße Zahl mit Cent-Zeichen und schwarzem Rand */
.shop-price {
  font-family: 'Creepster', cursive; font-size: 26px; letter-spacing: 1px; color: #fff; line-height: 1.1;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000;
}
.shop-price.poor { color: #ff8a7a; }
.shop-price.sold { opacity: .5; }

/* ---------- Info-Zettel beim Überfahren (wie Isaacs Notizzettel: Papier, Tuscherand, leicht schief) ---------- */
#tip {
  position: fixed; z-index: 300; pointer-events: none; max-width: min(360px, calc(100vw - 16px)); min-width: 200px;
  padding: 12px 16px 14px; color: #2b1a0f; text-align: left; font-size: 17px; line-height: 1.35;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 250, 235, .55), transparent 60%),
    radial-gradient(ellipse at 85% 90%, rgba(120, 80, 40, .25), transparent 55%),
    #d9c39c;
  border: 3px solid #2b1a0f; border-radius: 6px 10px 7px 12px;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 240, 210, .3) inset, 0 0 22px rgba(80, 40, 10, .35) inset;
  opacity: 0; transform: rotate(-1deg) translateY(6px) scale(.97); transition: opacity .12s, transform .12s;
}
#tip.show { opacity: 1; transform: rotate(-1deg) translateY(0) scale(1); }
.tip-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.tip-icon { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 70%); }
.tip-icon .sprite-img, .tip-icon .tip-tf { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; font-size: 48px; }
.tip-name { font-family: 'Permanent Marker', cursive; font-size: 24px; line-height: 1.05; }
.tip-name.small { font-size: 20px; margin-bottom: 2px; }
.tip-q { color: #8e1c12; letter-spacing: 1px; font-size: 15px; }
.tip-tag { display: inline-block; font-size: 13px; background: #2b1a0f; color: #ecdcbc; border-radius: 4px; padding: 0 6px; margin-top: 2px; }
.tip-desc { font-size: 17px; }
#tip .tf-chips { margin-top: 8px; }
#tip .tf-chip { background: rgba(43, 26, 15, .12); border-color: rgba(43, 26, 15, .5); color: #2b1a0f; }
#tip .dmg { color: #8e1c12; font-weight: bold; }
/* Spendenautomat = der Automat im Ladenbild (x 123–163, y 32–79 von 442×286); Rollen zeigen die gespendete Summe */
.shop-donate {
  position: absolute; left: 27.828%; top: 11.189%; width: 9.05%; height: 16.434%; padding: 0;
  background: none; border: none; border-radius: 4px; cursor: pointer;
}
.shop-donate:hover:not(:disabled) { border: none; background: radial-gradient(ellipse, rgba(255, 220, 140, .22), transparent 70%); }
.shop-donate:active .donate-wheel { transform: translateY(8%); }
.donate-wheel { position: absolute; top: 40.43%; width: 17.5%; height: 19.15%; display: block; }
.donate-wheel svg { display: block; width: 100%; height: 100%; }
.donate-wheel.w0 { left: 20%; } .donate-wheel.w1 { left: 42.5%; } .donate-wheel.w2 { left: 65%; }
.shop-donate.jammed { cursor: not-allowed; filter: grayscale(.6) brightness(.75); }
.shop-donate.jammed::after {   /* rotes Kreuz über dem Zählwerk */
  content: '✕'; position: absolute; left: 0; right: 0; top: 30%; text-align: center;
  font-family: 'Permanent Marker', cursive; font-size: 28px; color: #c2271a; text-shadow: 0 2px 0 #000;
}
.shop-sale { display: inline-block; margin-right: 4px; color: #ffd23a; transform: rotate(-8deg); }

/* Erfolgs-Zettel (Freischaltung) wie im Original: Papierstreifen unten in der Mitte */
.achievement {
  position: fixed; left: 50%; bottom: 26px; z-index: 400; display: flex; align-items: center; gap: 14px;
  min-width: 320px; max-width: calc(100vw - 32px); padding: 12px 20px 12px 14px; color: #2b1a0f;
  background: radial-gradient(ellipse at 20% 15%, rgba(255, 250, 235, .55), transparent 60%), #d9c39c;
  border: 3px solid #2b1a0f; border-radius: 6px 10px 7px 12px; box-shadow: 4px 6px 0 rgba(0, 0, 0, .5);
  transform: translateX(-50%) rotate(-1deg); animation: achv-in .35s cubic-bezier(.2, 1.4, .4, 1);
}
.achievement.out { transition: transform .4s ease-in, opacity .4s; transform: translate(-50%, 160%) rotate(-1deg); opacity: 0; }
@keyframes achv-in { from { transform: translate(-50%, 160%) rotate(-1deg); } }
.achv-icon { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.achv-icon .sprite-img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.achv-head { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #8e1c12; }
.achv-name { font-family: 'Permanent Marker', cursive; font-size: 24px; line-height: 1.05; }
.achv-text { font-size: 16px; }
/* Geheimnisse: Liste der sperrbaren Items */
.paper-modal .muted { color: #2b1a0f; opacity: .75; }
.secrets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; text-align: left; }
.secret { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-bottom: 1px dashed rgba(43, 26, 15, .25); }
.secret-icon { flex: none; width: 40px; text-align: center; font-size: 28px; }
.secret-icon .sprite-img { width: 40px; height: 40px; }
.secret.locked .secret-icon { filter: brightness(0) opacity(.55); }
.secret-name { font-family: 'Permanent Marker', cursive; font-size: 16px; line-height: 1.1; }
.secret-how { font-size: 15px; opacity: .85; line-height: 1.2; }
/* Großer Freischalt-Zettel wie Isaacs Geheimnis-Papiere: wirbelt in die Mitte, fällt danach raus */
.unlock-pop { position: fixed; inset: 0; z-index: 450; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10, 6, 3, .45); animation: unlock-dim .3s ease-out; cursor: pointer; }
.unlock-paper { position: relative; width: min(460px, 100%); color: #2b1a0f; text-align: center;
  filter: drop-shadow(6px 10px 0 rgba(0, 0, 0, .45)); animation: unlock-in .6s cubic-bezier(.2, 1.35, .45, 1); transform: rotate(-2deg); }
.unlock-content { position: relative; padding: 34px 36px 32px; }
.unlock-head { font-family: 'Permanent Marker', cursive; font-size: 17px; color: #8e1c12; letter-spacing: .5px; }
.unlock-art { height: 150px; display: flex; align-items: center; justify-content: center; margin: 6px 0 4px; }
.unlock-art .sprite-img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(43, 26, 15, .35)); }
.unlock-char { height: 138px; filter: drop-shadow(0 4px 0 rgba(43, 26, 15, .35)); animation: unlock-bob 1.6s ease-in-out infinite; }
.unlock-name { font-family: 'Creepster', cursive; font-size: 38px; line-height: 1.05; letter-spacing: 1px; }
.unlock-text { font-size: 18px; margin-top: 8px; opacity: .85; }
.unlock-pop.out { animation: unlock-dim .45s ease-in reverse forwards; }
.unlock-pop.out .unlock-paper { transition: transform .45s ease-in, opacity .45s; transform: translateY(70vh) rotate(14deg); opacity: 0; }
@keyframes unlock-in { from { transform: scale(.15) rotate(-200deg); opacity: 0; } 60% { opacity: 1; } }
@keyframes unlock-dim { from { background: rgba(10, 6, 3, 0); } }
@keyframes unlock-bob { 50% { transform: translateY(-6px); } }

/* Ausgang = die echte Tür unten im Ladenbild (Ausschnitt x 198–244, y 222–266 von 442×286) */
.shop-door {
  position: absolute; left: 44.8%; width: 10.4%; top: 77.6%; height: 15.4%; padding: 0;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: center;
}
.shop-door:hover:not(:disabled) { border: none; background: radial-gradient(ellipse at 50% 70%, rgba(255, 220, 160, .28), transparent 70%); }
/* kleiner Pixel-Pfeil wie die Raumhinweise im Spiel */
.shop-door-arrow {
  font-family: 'Creepster', cursive; font-size: 26px; color: #fff; margin-top: 18%;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; opacity: .75;
  animation: door-bob 1.2s ease-in-out infinite;
}
.shop-door:hover .shop-door-arrow { opacity: 1; color: #ffd27a; }
@keyframes door-bob { 50% { transform: translateY(6px); } }
@media (max-width: 800px) {
  .shop-room { aspect-ratio: auto; padding: 70px 14% 60px; }
  .shop-floor:not(.cards) { margin-top: 40px; }
}

/* Aufgewertete Karten: grüner Name wie in Slay the Spire */
.card.upgraded .card-title { color: #2f7a1c; }
/* Vorschau vor dem Aufwerten: vorher → nachher */
.upgrade-preview { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 16px 0 6px; }
.upgrade-preview .card { cursor: default; transform: scale(1.15); margin: 14px 10px; }
.upgrade-preview .card:hover { transform: scale(1.15); }
.up-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.up-label { font-family: 'Permanent Marker', cursive; font-size: 18px; color: var(--muted); }
.up-label.new { color: #7fcf5f; }
.up-arrow { font-size: 40px; color: var(--gold); }
.up-arrow .sprite-img { width: 52px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); animation: up-nudge 1.2s ease-in-out infinite; }
@keyframes up-nudge { 50% { transform: translateX(5px); } }
.up-changes { list-style: none; padding: 0; margin: 6px 0; text-align: center; font-size: 17px; }
/* grüner Pixel-Pfeil nach oben vor jeder Verbesserung */
.up-changes li::before { content: ''; display: inline-block; width: 16px; height: 14px; margin-right: 6px; vertical-align: -1px;
  background: url(sprites/ui/arrowGreen.svg) center / contain no-repeat; image-rendering: pixelated; transform: rotate(-90deg); }
/* Knöpfe mit Pixel-Symbol */
.icon-btn { display: inline-flex; align-items: center; gap: 8px; }
.btn-ico { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.btn-ico.flip { transform: scaleX(-1); width: 20px; height: 17px; }
.up-changes b { color: #7fcf5f; }

/* ---------- Spielstände (3 Dateien wie im Original) ---------- */
.save-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 6px; }
.save-file {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px;
  border: 3px solid #2b1a0f; border-radius: 10px; background: rgba(255, 245, 225, .18);
  box-shadow: 3px 4px 0 rgba(43, 26, 15, .35); transform: rotate(-1deg);
}
.save-file:nth-child(2) { transform: rotate(1deg); }
.save-file:nth-child(3) { transform: rotate(-.5deg); }
.save-no { font-family: 'Permanent Marker', cursive; font-size: 28px; }
.save-empty { font-size: 20px; opacity: .6; margin: 30px 0; }
.save-chars { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 30px; }
.save-chars img { height: 28px; width: auto; image-rendering: pixelated; }
.save-stat { font-size: 14px; opacity: .75; text-align: center; }
.save-run { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 76px; text-align: left; }
.save-run img { height: 64px; width: auto; image-rendering: pixelated; }
.save-run.none { opacity: .55; justify-content: center; }
.save-run .hearts img { width: 16px; height: 16px; }
.save-actions { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: auto; }
.file-nav { display: flex; flex-wrap: wrap; gap: 2px 26px; justify-content: center; margin-top: 10px; }
.file-nav .ink-btn { white-space: nowrap; }   /* umbrechen nur zwischen den Knöpfen */
/* Einstellungen (Animationen, Ton): kleinere Zeile unter der Navigation */
.settings-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; margin-top: 4px; }
.settings-row .ink-btn { font-size: 16px; white-space: nowrap; opacity: .8; }
.settings-row .ink-btn:hover { opacity: 1; }
.settings-row > span { opacity: .45; }
/* Menüpunkte wie im Isaac-Menü: Tinte auf dem Papier, beim Zeigen erscheint ein Pfeil davor */
.ink-btn {
  position: relative; background: none; border: none; border-radius: 0; box-shadow: none; padding: 2px 6px;
  font-family: 'Permanent Marker', cursive; font-size: 20px; color: #2b1a0f; line-height: 1.25; cursor: pointer;
}
.ink-btn.main { font-size: 25px; }
a.ink-btn { text-decoration: none; display: inline-block; }
.ink-btn::before {
  content: '▶'; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); font-size: .7em;
  opacity: 0; transition: opacity .1s;
}
.ink-btn:hover:not(:disabled), .ink-btn:focus-visible { background: none; border: none; color: #8e1c12; }
.ink-btn:hover:not(:disabled)::before, .ink-btn:focus-visible::before { opacity: 1; animation: ink-point .6s ease-in-out infinite; }
@keyframes ink-point { 50% { transform: translate(-4px, -50%); } }
/* Bett: Zettel mit drei Tinten-Einträgen */
.bed-sheet { max-width: 620px; margin-top: 10px; text-align: center; }
.bed-sheet .big-sprite, .bed-sheet .sprite-img.big { margin: 0 auto; }
.bed-title { font-family: 'Permanent Marker', cursive; font-size: 40px; margin: 4px 0 0; }
.bed-intro { font-size: 19px; margin: 2px 0 14px; opacity: .8; }
.bed-opts { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bed-opt { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 24px; width: 380px; max-width: 100%; }
.bed-opt::before { right: calc(100% + 4px); }
.bed-icon { flex: none; width: 56px; display: flex; justify-content: center; align-items: center; gap: 0; }
.bed-icon .sprite-img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.bed-icon .sprite-img + .sprite-img { margin-left: -14px; margin-top: 14px; }
.bed-label, .bed-note { display: block; }
.bed-note { font-family: 'Patrick Hand', cursive; font-size: 16px; opacity: .7; }
.bed-opt:disabled { opacity: .4; cursor: default; }
/* Dialog-Ereignisse: Zettel mit Tinten-Entscheidungen; Flug-Wahl mit Flügeln */
.ev-sheet { max-width: 620px; margin-top: 10px; text-align: center; }
.ev-sheet .big-sprite { height: 84px; }
.ev-sheet .bed-intro { max-width: 470px; margin-left: auto; margin-right: auto; }
.ev-msg { font-family: 'Patrick Hand', cursive; font-size: 20px; margin: 0 auto 12px; max-width: 480px; padding: 4px 10px;
  border-top: 2px dashed rgba(43, 26, 15, .35); border-bottom: 2px dashed rgba(43, 26, 15, .35); }
.ev-msg.hurt { color: #8e1c12; }
.ev-choices { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ev-choice { display: flex; flex-direction: column; align-items: center; font-size: 23px; max-width: 100%; }
.ev-label { display: inline-flex; align-items: center; gap: 8px; }
.ev-note { font-family: 'Patrick Hand', cursive; font-size: 15px; opacity: .7; }
.ev-choice.leave { font-size: 19px; opacity: .75; margin-top: 6px; }
.ev-wing { height: 30px; width: auto; image-rendering: pixelated; }
.ev-choice.fly .ev-label { color: #1d4f8a; }
.ev-choice.locked { opacity: .38; cursor: not-allowed; }
/* Teufels- und Engels-Ereignisse: rote bzw. goldene Tinte, das Bild glüht */
.ev-devil .bed-title { color: #7a1208; }
.ev-devil .big-sprite { filter: drop-shadow(0 0 10px rgba(160, 20, 10, .75)); }
.ev-devil .ev-choice:not(.leave) .ev-label { color: #7a1208; }
.ev-angel .bed-title { color: #8a6a12; }
.ev-angel .big-sprite { filter: drop-shadow(0 0 12px rgba(255, 230, 140, .95)); }
.ev-angel .ev-choice:not(.leave) .ev-label { color: #6b5210; }
.ev-choice.locked .ev-wing { filter: grayscale(1); }
.ev-choice.locked:hover::before { opacity: 0; animation: none; }
.ev-choice.locked:hover { color: #2b1a0f; }
/* Fliegend: Figur schwebt über ihrem Schatten */
.player.flying .player-body { animation: hover-bob 1.8s ease-in-out infinite; }
/* Begleiter: Follower hüpfen an Isaacs Füßen, kreisende Begleiter drehen sich um ihn (Bild bleibt aufrecht) */
.player-body { position: relative; }
.fam { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: help; }
.fam img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.fam span { font-size: 24px; }
/* Stapelbare Begleiter: Meat Boy / Bandage Girl ab Stufe 3 größer, Stufe als Zahl am Item in der Leiste */
.fam.lv3 img { transform: scale(1.25); }
.fam.lv4 img { transform: scale(1.5); filter: drop-shadow(0 0 6px rgba(255, 90, 70, .7)) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.hud-block.items .has-lv { position: relative; }
.hud-block.items .has-lv::after {
  content: attr(data-lv); position: absolute; right: -4px; bottom: -4px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 7px;
  background: #8e1c12; color: #fff; font-size: 11px; line-height: 14px; text-align: center; font-weight: bold; border: 1px solid #000;
}
.lv-tag { background: #8e1c12; color: #fff; }
.fam-train { position: absolute; left: calc(100% - 4px); top: 30px; display: grid; grid-template-columns: repeat(2, 48px); gap: 4px 6px; z-index: 1; }
.fam-train.many { grid-template-columns: repeat(3, 40px); }
.fam-train.many .fam { width: 40px; height: 40px; }
.fam-train .fam:nth-child(even) { margin-top: 18px; }   /* versetzt wie eine kleine Gruppe */
.fam.follower { animation: fam-hop 1.1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes fam-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
.fam-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: orbit-spin 6s linear infinite; z-index: 2; }
.fam.orbital { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; transform: rotate(var(--a)) translateX(84px) rotate(calc(-1 * var(--a))); }
.fam.orbital img, .fam.orbital span { animation: orbit-spin 6s linear infinite reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
/* Blaue Fliegen: schwirren um Isaac, jede mit eigenem Takt; beim Angriff fliegt ein Sprite zum Gegner (anim.js) */
.fly-swarm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; cursor: help; }
.blue-fly { position: absolute; width: 32px; height: 17px; margin: -8px 0 0 -16px; animation: fly-buzz var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
.blue-fly img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .6)); animation: fly-wing .12s steps(2) infinite; }
@keyframes fly-buzz { 0% { transform: translate(-3px, 2px); } 50% { transform: translate(4px, -3px); } 100% { transform: translate(-2px, -5px); } }
@keyframes fly-wing { 50% { transform: scaleY(.8); } }
.anim.blue-fly-dash { position: fixed; width: 30px; height: 16px; pointer-events: none; z-index: 60; }
.anim.blue-fly-dash img { width: 100%; height: 100%; image-rendering: pixelated; }
.hud-flies { display: inline-flex; align-items: center; gap: 3px; cursor: help; }
.hud-flies img { height: 12px; image-rendering: pixelated; }
/* Kann abfangen: dezenter heller Rand · hat gerade abgefangen: weißer Ring platzt auf */
.fam.guard img { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55)) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.fam.pretty-fly { width: 32px; height: 32px; left: -16px; top: -16px; }
.fam.pretty-fly img { height: 55%; filter: saturate(0) brightness(1.9) drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 2px 1px rgba(0, 0, 0, .6)); }   /* weiß schimmernd statt blau */
.fam.blocked::after { content: ''; position: absolute; inset: -4px; border: 3px solid #fff; border-radius: 50%; pointer-events: none;
  animation: fam-burst .6s ease-out forwards; }
@keyframes fam-burst { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.player.flying .player-shadow { display: block; }
.player-shadow { display: none; width: 70px; height: 12px; margin-top: -6px; border-radius: 50%; background: rgba(0, 0, 0, .45);
  animation: hover-shadow 1.8s ease-in-out infinite; }
@keyframes hover-bob { 50% { transform: translateY(-10px); } }
@keyframes hover-shadow { 50% { transform: scaleX(.75); opacity: .7; } }
.fly-chip { display: inline-flex; align-items: center; gap: 4px; font-family: 'Patrick Hand', cursive; font-size: 15px; color: #cfe3ff;
  background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 0 8px 0 4px; }
.fly-chip img { height: 20px; image-rendering: pixelated; }
.ink-btn.save-del { font-size: 16px; color: rgba(43, 26, 15, .55); margin-top: 4px; }
.ink-btn.save-del:hover { color: #8e1c12; }
.ink-btn.save-del.confirm { color: #8e1c12; font-size: 18px; animation: del-shake .35s ease-in-out; }
@keyframes del-shake { 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }
@media (max-width: 760px) { .save-files { grid-template-columns: 1fr; } }

/* Werte-Zettel (Stärke, Geschick, Glück, Krit) */
.hud-block.stats > span[data-stat] { cursor: help; }
.tip-value { font-family: 'Creepster', cursive; font-size: 30px; line-height: 1; color: #8e1c12; letter-spacing: 1px; }
.tip-rows { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 15px; }
.tip-rows td { padding: 2px 0; border-top: 1px dashed rgba(43, 26, 15, .35); }
.tip-rows td:last-child { text-align: right; font-weight: bold; white-space: nowrap; padding-left: 12px; }

/* ---------- Trinkets & Tarotkarten ---------- */
.hud-block.trinkets { gap: 4px; }
.hud-trinket { width: 38px; height: 38px; padding: 2px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .25); border: 2px solid rgba(232, 196, 90, .55); border-radius: 50%; }
.hud-trinket.empty { border-style: dashed; opacity: .45; }
.hud-trinket .sprite-img { width: 30px; height: 30px; }
.hud-tarot, .tarot-btn { padding: 2px 4px; line-height: 0; }
.hud-tarot .sprite-img { width: 20px; height: 26px; object-fit: contain; }
.tarot-btn .sprite-img { width: 24px; height: 32px; object-fit: contain; }
.hud-tarot.off, .tarot-btn.off { opacity: .45; }
.hud-pill { padding: 2px 3px; line-height: 0; background: none; border-color: transparent; }
.hud-pill:hover { border-color: currentColor; }
.pocket-note { min-width: 260px; max-width: 420px; margin: 0 auto; }
.pocket-note .tip-head { justify-content: center; }
.pocket-note .tip-icon .sprite-img { width: 40px; height: 48px; object-fit: contain; }
.pocket-note .tip-icon .pill-img { height: 40px; }
.pocket-note p { margin: 10px 0 0; }
.item.trinket .item-icon .sprite-img { width: 56px; height: 56px; }
.trinket-swap { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.trinket-swap button { display: flex; align-items: center; gap: 8px; justify-content: center; }
.trinket-swap .sprite-img { width: 28px; height: 28px; }
/* Absicht „ruft Verstärkung“: kleines Sprite des gerufenen Gegners mit Anzahl */
.intent-spawn { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.intent-spawn img { height: 24px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 0 2px rgba(120, 220, 120, .8)); }
.intent-spawn b { font-size: 15px; color: #9be59b; }
/* Technology: dünner Laser – roter Rand, weißer Kern, flackert kurz (kein Blutstrahl wie Brimstone) */
.tech-laser {
  height: 9px; transform-origin: left center; border-radius: 5px;
  background: linear-gradient(180deg, transparent 0%, #ff2a1a 22%, #fff4f0 50%, #ff2a1a 78%, transparent 100%);
  box-shadow: 0 0 10px 3px rgba(255, 40, 20, .7), 0 0 22px 6px rgba(255, 60, 30, .3);
  animation: brim-flicker .05s linear infinite alternate;
}
.splash-laser { border-color: rgba(255, 90, 70, .95); }
.tear-laser { background: radial-gradient(circle, #fff 0 25%, #ff3a2a 60%, transparent 100%); }

/* ---------- Geheimraum: Höhle aus dem Wiki (442×286), Boden x 55–388 / y 55–232, Feuer bei 33 % und 68 %, Tür unten ---------- */
.secret-room {
  position: relative; max-width: 1100px; margin: 6px auto 20px; aspect-ratio: 442 / 286;
  background: var(--secret-bg) center / 100% 100% no-repeat #2a221d; image-rendering: pixelated;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .8);
}
.secret-room.super { filter: hue-rotate(-12deg) saturate(1.25); }
.secret-glow {   /* Feuerschein, flackert wie im Laden */
  position: absolute; top: 18%; width: 12%; height: 22%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 170, 60, .38), rgba(255, 120, 30, .12) 45%, transparent 70%);
  animation: shop-glow 1.7s ease-in-out infinite;
}
.secret-glow.left { left: 26.8%; }
.secret-glow.right { left: 62%; animation-duration: 1.9s; animation-delay: -.8s; }
.secret-title {
  position: absolute; left: 0; right: 0; top: 4.5%; text-align: center; pointer-events: none;
  font-family: 'Creepster', cursive; font-size: clamp(20px, 3vw, 34px); color: #e8d6b8; letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}
.secret-room.super .secret-title { color: #ffd27a; }
/* Beute links und rechts, Sockel in der Mitte – alles unterhalb der Feuer */
.secret-floor {
  position: absolute; left: 14%; right: 14%; top: 40%; height: 38%;
  display: flex; align-items: center; justify-content: space-between; gap: 2%;
}
.secret-loot { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(6px, 2vw, 26px); }
.secret-loot .shop-pick { position: relative; }
.secret-loot .is-trinket .sprite-img { height: 56px; width: 56px; }
.loot-count {
  position: absolute; right: -6px; bottom: -2px; font-family: 'Creepster', cursive; font-size: 18px; color: #fff;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
}
.secret-ped { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 110px; }
.secret-ped .ped-pick { width: 96px; height: 96px; z-index: 1; }
.secret-ped .ped-pick .sprite-img { width: 88px; height: 88px; }
.secret-ped .ped-pick::after { display: none; }
.secret-stone {   /* Steinsockel wie im Geheimraum */
  width: 64px; height: 26px; margin-top: -10px; border-radius: 8px 8px 50% 50%;
  background: linear-gradient(180deg, #8a7c70 0%, #5c5048 45%, #3a302a 100%); box-shadow: 0 6px 8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .15);
}
.secret-ped .d6-btn { margin-top: 8px; font-size: 14px; padding: 3px 10px; }
.secret-ped.taken .secret-stone { opacity: .85; }
.secret-hint {
  position: absolute; left: 0; right: 0; bottom: 21%; text-align: center; pointer-events: none;
  font-size: 15px; color: #d8c8b0; opacity: .8; text-shadow: 1px 1px 0 #000;
}
.secret-door { top: 81.5%; height: 12.5%; }
@media (max-width: 800px) {
  .secret-room { aspect-ratio: auto; min-height: 420px; }
  .secret-floor { top: 30%; height: 50%; }
}
/* Datenschutzerklärung (Spiel-Zettel und Handbuch) */
.privacy { text-align: left; font-size: 16px; line-height: 1.4; }
.privacy h3 { font-size: 18px; margin: 14px 0 4px; }
.privacy ul { margin: 4px 0; padding-left: 20px; }
.privacy a { color: #8e1c12; }
/* Rechte-Hinweis unter den Menü-Zetteln (Dateiauswahl, Figurenwahl) */
.disclaimer {
  max-width: 760px; margin: 14px auto 24px; padding: 0 16px; text-align: center;
  font-size: 14px; line-height: 1.45; color: #b8a890; opacity: .8; text-shadow: 1px 1px 0 #000;
}
/* Einstellungen: Knopf oben links auf den Menü-Zetteln, gegenüber der Version */
.ink-btn.settings-btn { position: absolute; left: 36px; top: 24px; font-size: 19px; color: #2b1a0f; transform: rotate(-2deg); }
.ink-btn.settings-btn:active { transform: rotate(-2deg) translateY(1px); }
.ink-btn.settings-btn:hover { color: #8e1c12; }
.ink-btn.settings-btn::before { display: none; }
.gear-ico { width: 1.05em; height: 1.05em; vertical-align: -.15em; image-rendering: pixelated; }
/* Einstellungs-Zettel: je Zeile Name, Wahlmöglichkeiten (gewählte unterstrichen), kurzer Hinweis */
.settings { display: flex; flex-direction: column; gap: 16px; margin: 10px 0 4px; }
.set-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 2px 14px; text-align: left; }
.set-label { font-family: 'Permanent Marker', cursive; font-size: 20px; }
.set-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.set-opts > span { opacity: .45; }
.set-opt { font-size: 19px; opacity: .55; padding: 0 2px; }
.set-opt.on { opacity: 1; color: #8e1c12; text-decoration: underline wavy #8e1c12; text-underline-offset: 5px; }
.set-opt:hover { opacity: 1; }
.set-opt::before { display: none; }
.set-hint { grid-column: 2; font-size: 14px; opacity: .7; line-height: 1.3; }

/* ---------- Handy (schmale Bildschirme) ---------- */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }   /* gedrehte Randkarten der Hand erzeugen keine Querbildlaufleiste */
  #app { padding: 0 8px 16px; }
  /* HUD kompakter: kleinere Symbole und Abstände */
  #hud { gap: 4px 12px; padding: 6px 0; margin-bottom: 8px; }
  body[data-screen="combat"] #hud, body[data-screen="map"] #hud { padding: 4px 0; margin-bottom: 6px; }
  .hud-icon { width: 28px; height: 28px; }
  .hud-btn { font-size: 20px; }
  .hearts { font-size: 20px; }
  .heart-img { height: 20px; }
  .hud-block { gap: 6px; }
  .hud-block.stats { gap: 7px; font-size: 13px; }
  .hud-block.stats .ui-icon { height: 18px; vertical-align: -4px; }
  .hud-block.res .ui-icon { height: 22px; }
  .hud-block.items { max-width: none; }
  .hud-block.items .sprite-img { width: 24px; height: 24px; }
  .hud-trinket { width: 32px; height: 32px; }
  .hud-trinket .sprite-img { width: 24px; height: 24px; }
  .deal-odds { font-size: 14px; padding: 1px 8px; }

  /* Menü-Zettel: Sprachwahl und Version in einer Zeile über dem Logo */
  .sheet-content { padding: 44px 14px 36px; }
  .ink-btn.settings-btn { left: 18px; top: 18px; font-size: 14px; }
  .set-row { grid-template-columns: 1fr; }
  .set-hint { grid-column: 1; }
  .ink-btn.version-tag { right: 18px; top: 18px; font-size: 14px; }
  .logo { margin-top: 6px; letter-spacing: 1px; }
  .logo-main { font-size: 30px; }
  .logo-sub { font-size: 21px; letter-spacing: 3px; }
  .fan-tag { font-size: 14px; }
  .wheel { height: 230px; }
  .wheel-char img { zoom: .75; }
  .char-name { font-size: 32px; }
  .char-desc { font-size: 16px; }
  .char-info { min-height: 0; }
  .mode-pick { gap: 14px; }
  .mode-opt { font-size: 19px; }
  .file-nav { flex-wrap: wrap; gap: 4px 18px; }
  .ink-btn { font-size: 18px; }
  .howto { transform: none; }

  /* Karte: Papier oben (scrollt), Seitenleiste darunter */
  .map-screen { flex-direction: column; align-items: stretch; gap: 8px; }
  .map-scroll { flex: 1 1 auto; min-height: 0; }
  .map-screen .side { flex: none; max-width: none; max-height: 34%; padding: 10px 14px; }
  .side h2 { font-size: 20px; margin: 0 0 4px; }
  .side-open { width: 64px; height: 30px; align-self: center; }
  .side-mini { align-self: center; }

  /* Kampf: Figur und Gegner kleiner nebeneinander, Hand als überlappender Fächer in einer Reihe */
  .arena { flex-wrap: nowrap; gap: 4px; padding: 8px 6px 6px; min-height: 0; border-radius: 10px; }
  .player { width: 104px; flex: none; gap: 3px; }
  .player-body { zoom: .62; }
  .enemies { gap: 2px; justify-content: center; min-width: 0; }
  .enemy { width: 92px; padding: 3px; gap: 2px; }
  .enemy.boss { width: 150px; }
  .enemy .sprite { zoom: .6; }
  .ename { font-size: 13px; line-height: 1.1; }
  .enemy.boss .ename { font-size: 15px; }
  .intent { font-size: 14px; min-height: 24px; padding: 1px 6px; }
  .bar { height: 15px; }
  .bar span { font-size: 12px; line-height: 11px; }
  .chip { font-size: 12px; padding: 0 5px; }
  .statuses { min-height: 0; }
  .controls { gap: 6px; }
  .controls button { padding: 5px 8px; font-size: 15px; }
  .energy { width: 50px; height: 64px; margin: -6px 2px -4px 0; }
  .energy-num { font-size: 24px; }
  .hand-row { position: relative; gap: 0; padding-bottom: 16px; zoom: 1; }
  .hand { flex-wrap: nowrap; padding: 22px 0 0; min-height: 0; }
  /* Karten überlappen je nach Anzahl so, dass die Hand (samt gedrehter Randkarten) genau in die Breite passt */
  .hand .card { margin: 0 min(-6px, calc((100vw - 44px - var(--n, 5) * 112px) / (2 * var(--n, 5) - 2))); }
  .hand .card:first-child { margin-left: 0; }
  .hand .card:last-child { margin-right: 0; }
  .hand .card:hover { transform: translateY(var(--lift, 0)) rotate(var(--rot, 0)); }
  .hand .card.selected { transform: translateY(-22px) rotate(0) scale(1.06); z-index: 5; }
  /* Stapel als kleine Marken in den unteren Ecken */
  .pile { position: absolute; bottom: 4px; z-index: 6; width: 40px; height: 54px; margin: 0; }
  .pile-draw { left: 8px; }
  .pile-discard { right: 8px; }
  .pile-draw .pile-count { left: -6px; }
  .pile-discard .pile-count { right: -6px; }
  .pile-card svg { width: 18px; }
  .pile-label { display: none; }
  .pile-count { min-width: 26px; height: 26px; line-height: 20px; font-size: 13px; bottom: -8px; border-width: 2px; }

  /* Laden: Waren dürfen umbrechen */
  .shop-room { padding: 120px 8% 84px; }
  .shopkeeper-hang { top: 22px; }
  .shop-door { top: auto; bottom: 6px; height: 64px; }
  .shop-floor:not(.cards) { width: 100%; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin-top: 0; }
  .shop-ware.is-item .shop-pick { width: 64px; height: 64px; }
  .shop-ware.is-item .shop-pick .sprite-img { width: 54px; height: 54px; }
  .shop-ware.is-service .shop-pick { width: 72px; height: 72px; }
  .shop-ware.is-service .shop-pick .sprite-img { width: 68px; height: 68px; }
  .shop-price { font-size: 21px; }
  .shop-floor.cards { gap: 6px; }
  .shop-ware.is-card .card { transform: scale(.82); margin: -20px -10px 0; }

  /* langes Drücken öffnet den Info-Zettel – kein Text markieren, kein Systemmenü */
  #app { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .secret-hint { font-size: 13px; padding: 0 16px; }

  .card-row { gap: 6px; }
  /* Zettel und Panels nutzen die Breite */
  .panel { padding: 12px 8px; }
  .center-panel { margin: 10px auto; }
}
/* Touch-Geräte ohne Tastatur: Tasten-Hinweise ausblenden */
@media (hover: none) and (pointer: coarse) { .keys-hint { display: none; } }
/* Einstellung „Animationen: Aus“: Dauerschleifen (Schweben, Pulsieren, Feuer …) stehen still, Übergänge sind sofort fertig */
body[data-anim="off"] *, body[data-anim="off"] *::before, body[data-anim="off"] *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
}
/* Sicherung je Datei: kleine Tinten-Knöpfe unter Fortsetzen/Neuer Run */
.save-io { display: flex; gap: 10px; justify-content: center; }
.ink-btn.save-small { font-size: 15px; opacity: .75; }
.ink-btn.save-small:hover { opacity: 1; }
.ink-btn.save-small.confirm { color: #8e1c12; opacity: 1; }

/* ---------- Todeszettel / Sieges-Zettel (wie Isaacs Zettel nach dem Run) ---------- */
.end-note { max-width: 760px; }
.end-note .sheet-content { padding: 34px 48px 30px; }
.note-title { font-family: 'Creepster', cursive; font-size: 54px; letter-spacing: 3px; color: #8e1c12; margin: 0 0 8px; transform: rotate(-2deg); font-weight: normal; }
.end-note.won .note-title { color: #2b1a0f; font-size: 44px; }
.note-grid { display: flex; gap: 26px; align-items: center; justify-content: center; text-align: left; margin: 6px 0 4px; }
.note-char { flex: none; text-align: center; }
.note-char img, .note-char svg { width: 96px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(43, 26, 15, .35)); }
.note-char.dead img, .note-char.dead svg { transform: rotate(-90deg) translateX(-14px); filter: grayscale(.7) drop-shadow(0 3px 0 rgba(43, 26, 15, .35)); opacity: .85; }
.note-name { font-family: 'Permanent Marker', cursive; font-size: 20px; }
.note-facts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.note-row { display: flex; align-items: center; gap: 12px; font-size: 18px; flex-wrap: wrap; }
.note-label { font-family: 'Permanent Marker', cursive; font-size: 15px; color: #5a4128; min-width: 104px; }
.killer { display: inline-flex; align-items: center; gap: 8px; }
.killer-img { height: 46px; width: auto; max-width: 90px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(43, 26, 15, .3)); }
.killer-emo { font-size: 30px; line-height: 1; }
.note-line { font-size: 17px; margin: 8px 0 0; opacity: .85; }
.note-sub { font-family: 'Permanent Marker', cursive; font-size: 18px; margin: 14px 0 6px; border-top: 2px dashed rgba(43, 26, 15, .35); padding-top: 10px; }
.note-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.note-items > span { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.note-items .sprite-img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.note-items .has-lv::after { content: attr(data-lv); position: absolute; right: -2px; bottom: -2px; min-width: 14px; height: 14px; border-radius: 7px;
  background: #8e1c12; color: #fff; font-size: 11px; line-height: 14px; text-align: center; font-weight: bold; }
.note-actions { display: flex; justify-content: center; gap: 24px; margin-top: 14px; }

/* ---------- Run-Verlauf (Zettel auf der Figurenwahl) ---------- */
.hist-summary { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin: 6px 0 12px; }
.hist-char { display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 1.1; }
.hist-char img, .hist-char svg { height: 40px; width: auto; image-rendering: pixelated; }
.hist-char small { font-size: 12px; opacity: .7; }
.hist-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; text-align: left; }
.hist-row { display: grid; grid-template-columns: 52px 34px 24px minmax(0, 1fr) minmax(0, 1.2fr) 44px; align-items: center; gap: 6px; padding: 3px 4px;
  border-bottom: 1px dashed rgba(43, 26, 15, .3); font-size: 15px; }
.hist-row.won { background: rgba(232, 196, 90, .18); }
.hist-date { font-size: 13px; opacity: .7; }
.hist-who img, .hist-who svg { height: 30px; width: auto; image-rendering: pixelated; }
.hist-res { font-size: 18px; text-align: center; }
.hist-killer .killer-img { height: 28px; max-width: 48px; }
.hist-killer .killer-emo { font-size: 20px; }
.hist-killer b { font-weight: normal; }
.hist-items { font-size: 13px; text-align: right; }

@media (max-width: 640px) {
  .end-note .sheet-content { padding: 30px 16px 34px; }
  .note-title { font-size: 40px; }
  .end-note.won .note-title { font-size: 30px; }
  .note-grid { flex-direction: column; gap: 6px; }
  .note-char.dead img, .note-char.dead svg { transform: rotate(-90deg); }
  .note-row { font-size: 15px; gap: 8px; }
  .note-label { min-width: 0; width: 100%; font-size: 13px; }
  .killer-img { height: 38px; }
  .hist-row { grid-template-columns: 30px 22px minmax(0, 1fr) 34px; grid-template-areas: 'who res where items' 'who res killer items'; font-size: 13px; }
  .hist-date { display: none; }
  .hist-who { grid-area: who; } .hist-res { grid-area: res; } .hist-where { grid-area: where; } .hist-killer { grid-area: killer; } .hist-items { grid-area: items; }
  .hist-who img, .hist-who svg { height: 24px; }
}
@media (max-width: 640px) {
  .settings-row { gap: 2px 14px; }
  .settings-row > span { display: none; }   /* kein einzelner Punkt am Zeilenende */
  .settings-row .ink-btn { font-size: 14px; }
}

/* ---------- Login (account.js) ---------- */
.account-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 6px 0 2px; }
.account-name { font-weight: bold; overflow-wrap: anywhere; }   /* lange E-Mail-Adressen brechen um */
.account-state { font-size: 14px; opacity: .8; }
.account-state.error { color: #a32014; opacity: 1; }
.account-state.busy { font-style: italic; }
.login-form { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 12px auto 0; text-align: left; }
.login-form label { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.login-form input { font: inherit; font-size: 18px; padding: 6px 8px; border: 2px solid var(--line, #5a4128); border-radius: 6px; background: #f6ecd6; color: #2b1a0f; }
.login-msg { min-height: 1.3em; margin: 0; color: #e08a6a; }
.muted.small { font-size: 13px; }
.sync-diff { text-align: left; font-size: 15px; }
.sync-pick { flex-wrap: wrap; }
@media (max-width: 640px) {
  .account-bar .ink-btn { font-size: 14px; }
  .login-form input { font-size: 16px; }   /* iOS zoomt sonst beim Antippen */
}