/* Dungeon v2 – style.css */
:root {
  --bg: #07080d;
  --panel: #0e1220;
  --panel2: #131a2c;
  --line: #1c2436;
  --line2: #2a3654;
  --ink: #c9d4e8;
  --dim: #8592b0;
  --accent: #55ff33;
  --accent2: #33ffcc;
  --warm: #ffb347;
  --hp: #ff4d5e;
  --torch: #ffa53a;
  --xp: #33e6c0;
  --gold: #ffd23a;
  --bad: #ff7a7a;
  --good: #8cff86;
  --info: #9cc8ff;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --topbar: 52px;
  --focus: 0 0 0 3px rgba(85, 255, 51, 0.55);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; }
body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(51, 255, 204, 0.06), transparent 60%),
    linear-gradient(rgba(28, 36, 54, 0.45) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(28, 36, 54, 0.45) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--mono);
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0 4px; border: 1px solid var(--line2); border-bottom-width: 2px;
  border-radius: 4px; background: #101527; font: 11px/1.5 var(--mono); color: var(--ink); text-align: center;
}
code { color: var(--accent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.small { font-size: 12px; }
.dim { color: var(--dim); }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------------- Kopfleiste ---------------- */
.topbar {
  position: relative; z-index: 30;
  height: calc(var(--topbar) + var(--sat));
  padding: var(--sat) calc(10px + var(--sar)) 0 calc(10px + var(--sal));
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(14, 18, 32, 0.96), rgba(9, 11, 20, 0.96));
  border-bottom: 1px solid var(--line);
}
.navslot { flex: 0 1 auto; min-width: 0; display: flex; }
.brand { flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; }
.brand .b1 { font-weight: 800; letter-spacing: 0.32em; color: var(--accent); text-shadow: 0 0 16px rgba(85, 255, 51, 0.45); font-size: 17px; }
.brand .b2 { margin-left: 6px; font-size: 11px; color: var(--warm); letter-spacing: 0.1em; border: 1px solid rgba(255, 179, 71, 0.5); border-radius: 4px; padding: 0 4px; vertical-align: 2px; }
.tools { flex: 0 0 auto; display: flex; gap: 6px; }
.ibtn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0;
  background: #121829; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; color: var(--ink);
  transition: border-color .12s, background .12s, color .12s;
}
.ibtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ibtn svg .fill { fill: currentColor; stroke: none; }
.ibtn:hover { border-color: var(--accent); color: #fff; }
.ibtn:disabled { opacity: 0.35; cursor: default; border-color: var(--line2); color: var(--ink); }
.ibtn:focus-visible, .btn:focus-visible, .tbtn:focus-visible, .dpad button:focus-visible, .xbtn:focus-visible,
.qslot:focus-visible, .invlist button:focus-visible, .seg button:focus-visible, .tabs button:focus-visible,
.lvlopt:focus-visible, .minibtn:focus-visible, .setgrid button:focus-visible, input:focus-visible { outline: none; box-shadow: var(--focus); }
#btnSound .ico-off { display: none; }
#btnSound[aria-pressed="false"] .ico-on { display: none; }
#btnSound[aria-pressed="false"] .ico-off { display: block; }
#btnSound[aria-pressed="false"] { color: var(--bad); }

/* ---------------- Bühne ---------------- */
.stage {
  position: relative;
  height: calc(100vh - var(--topbar) - var(--sat));
  height: calc(100dvh - var(--topbar) - var(--sat));
  min-height: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  padding: 10px calc(10px + var(--sar)) 10px calc(10px + var(--sal));
}
.playwrap {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  background: #000; border: 1px solid var(--line);
  box-shadow: 0 0 0 1px #05060a, 0 0 34px rgba(85, 255, 51, 0.08), 0 18px 60px rgba(0, 0, 0, 0.6);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.corners i { position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); opacity: 0.55; pointer-events: none; z-index: 3; }
.corners .tl { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.corners .tr { top: 3px; right: 3px; border-left: 0; border-bottom: 0; }
.corners .bl { bottom: 3px; left: 3px; border-right: 0; border-top: 0; }
.corners .br { bottom: 3px; right: 3px; border-left: 0; border-top: 0; }
html[data-scheme="term"] .playwrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* ---------------- Seitenleiste ---------------- */
.side { min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.card { background: linear-gradient(180deg, rgba(16, 21, 37, 0.95), rgba(11, 14, 26, 0.95)); border: 1px solid var(--line); border-radius: 10px; }
.hud { padding: 10px 12px; }
.hudhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hudhead b { color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
.hudhead span { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { position: relative; height: 20px; margin: 5px 0; background: #0a0d18; border: 1px solid #222b44; border-radius: 6px; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .25s ease; }
.bar.hp > i { background: linear-gradient(180deg, #ff6b78, #c8283a); }
.bar.hp.low > i { animation: pulse 0.9s infinite alternate; }
.bar.torch > i { background: linear-gradient(180deg, #ffc46a, #d8701a); }
.bar.torch.low > i { background: linear-gradient(180deg, #ff8a5a, #a83a1a); animation: pulse 0.6s infinite alternate; }
.bar.xp > i { background: linear-gradient(180deg, #5cf5d2, #1a9e86); }
.bar > span { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 7px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.bar svg { width: 13px; height: 13px; fill: #fff; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
.bar em { font-style: normal; white-space: nowrap; }
@keyframes pulse { from { filter: brightness(0.75); } to { filter: brightness(1.25); } }
.hudstats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 12.5px; }
.hudstats span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hudstats b { color: #fff; font-weight: 700; }
.ic { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ic.gold { background: var(--gold); border-radius: 50%; box-shadow: inset -2px -2px 0 #a87a10; }
.ic.atk { background: linear-gradient(135deg, transparent 40%, #d0dbe6 40% 60%, transparent 60%); }
.ic.def { background: #8ea0b4; border-radius: 2px 2px 6px 6px; }
.ic.turn { background: transparent; border: 2px solid var(--dim); border-radius: 50%; }
.hudstatus { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; min-height: 0; }
.hudstatus:empty { display: none; }
.chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.chip.poison { color: #9cff7a; border-color: rgba(108, 194, 74, 0.6); background: rgba(108, 194, 74, 0.12); }
.chip.burn { color: #ffb070; border-color: rgba(240, 140, 42, 0.6); background: rgba(240, 140, 42, 0.12); }
.chip.haste { color: #ffe27a; border-color: rgba(245, 205, 58, 0.6); background: rgba(245, 205, 58, 0.1); }
.chip.invis { color: #d6a8ff; border-color: rgba(176, 114, 224, 0.6); background: rgba(176, 114, 224, 0.12); }
.chip.resist { color: #a8f0c0; border-color: rgba(120, 220, 160, 0.5); background: rgba(120, 220, 160, 0.08); }
.chip.dark { color: #ff9a9a; border-color: rgba(255, 90, 90, 0.6); background: rgba(255, 90, 90, 0.12); }
.chip.key { color: var(--gold); border-color: rgba(255, 210, 58, 0.5); background: rgba(255, 210, 58, 0.08); }

.minibox { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.minibtn { display: block; width: 100%; padding: 0; border: 1px solid #1a2134; background: #05060a; border-radius: 6px; cursor: zoom-in; overflow: hidden; }
#mini { display: block; width: 100%; height: auto; image-rendering: pixelated; aspect-ratio: 3 / 2; }
.miniinfo { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); letter-spacing: 0.06em; }
.miniinfo span:last-child { color: var(--warm); }

.equip { padding: 8px 10px; display: grid; gap: 6px; }
.eqrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eqrow img { width: 32px; height: 32px; image-rendering: pixelated; background: #0a0d18; border: 1px solid #222b44; border-radius: 6px; flex: none; }
.eqrow div { display: flex; flex-direction: column; min-width: 0; }
.eqrow small { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.eqrow b { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqrow em { font-style: normal; font-size: 11.5px; color: var(--dim); }

.quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.qslot {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; display: grid; place-items: center;
  background: #0e1322; border: 1px solid var(--line2); border-radius: 8px; cursor: pointer;
}
.qslot:hover { border-color: var(--accent); }
.qslot img { width: 70%; height: 70%; image-rendering: pixelated; pointer-events: none; }
.qslot .qn { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.qslot .qk { position: absolute; left: 3px; top: 1px; font-size: 10px; color: var(--dim); }
.qslot.empty { opacity: 0.35; cursor: default; }

.logbox { flex: 1 1 auto; min-height: 90px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
.log { list-style: none; margin: 0; padding: 8px 10px; overflow-y: auto; font-size: 12.5px; line-height: 1.4; flex: 1; scrollbar-width: thin; }
.log li { padding: 1px 0; color: var(--ink); }
.log li.dim, .log li.miss { color: var(--dim); }
.log li.bad { color: var(--bad); }
.log li.warn { color: #ffc46a; }
.log li.good { color: var(--good); }
.log li.gold { color: var(--gold); }
.log li.crit { color: #ffe26a; }
.log li.kill { color: #e8d8ff; }
.log li.level { color: var(--accent); font-weight: 700; }
.log li.info { color: var(--info); }
.log li.win { color: var(--gold); font-weight: 700; }
.log li .x { color: var(--dim); font-size: 11px; }

/* ---------------- Overlays im Spielfeld ---------------- */
.hudlayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bossbar {
  position: absolute; z-index: 5; left: 50%; top: 10px; transform: translateX(-50%); width: min(380px, 70%);
  text-align: center; pointer-events: none;
}
.bossbar b { display: block; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #e2b6ff; text-shadow: 0 0 10px rgba(176, 114, 224, 0.8), 0 1px 2px #000; }
.bbar { height: 10px; margin-top: 3px; border: 1px solid #6a3aa0; background: rgba(10, 6, 18, 0.85); border-radius: 5px; overflow: hidden; }
.bbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8a2ad0, #e04a9a); transition: width .3s; }
.banner {
  position: absolute; z-index: 6; left: 0; right: 0; top: 26%; text-align: center; pointer-events: none; opacity: 0;
}
.banner b { display: block; font-size: clamp(26px, 6vw, 48px); letter-spacing: 0.3em; color: #fff; text-shadow: 0 0 22px rgba(255, 179, 71, 0.75), 0 3px 0 #000; padding-left: 0.3em; }
.banner span { display: block; margin-top: 4px; font-size: clamp(12px, 2.4vw, 16px); letter-spacing: 0.2em; color: var(--warm); text-shadow: 0 2px 2px #000; text-transform: uppercase; }
.banner.show { animation: banner 2.6s ease forwards; }
.banner.boss b { text-shadow: 0 0 22px rgba(176, 114, 224, 0.9), 0 3px 0 #000; color: #f3e6ff; }
@keyframes banner { 0% { opacity: 0; transform: translateY(10px) scale(0.96); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.ctxbar {
  position: absolute; z-index: 5; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 5px 12px; border-radius: 999px; background: rgba(8, 10, 18, 0.82); border: 1px solid var(--line2);
  font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  transition: opacity .2s;
}
.ctxbar:empty { opacity: 0; }
.ctxbar b { color: var(--accent); }
.tooltip {
  position: absolute; z-index: 8; max-width: 280px; padding: 8px 10px; pointer-events: none;
  background: rgba(10, 12, 22, 0.95); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  font-size: 12.5px; line-height: 1.4;
}
.tooltip b { display: block; color: #fff; font-size: 13px; margin-bottom: 2px; }
.tooltip b.monster { color: #ff9a8a; }
.tooltip b.item { color: var(--gold); }
.tooltip b.trap { color: #ffc46a; }
.tooltip span { display: block; color: var(--dim); }

/* Sandbox-Panel */
.sbpanel {
  position: absolute; z-index: 6; right: 10px; bottom: 10px; width: 300px; padding: 10px; pointer-events: auto;
  background: rgba(7, 10, 16, 0.9); border: 1px solid #1f3a1f; border-radius: 10px; box-shadow: 0 0 24px rgba(85, 255, 51, 0.12);
  font-size: 12px; color: #b8f5a8;
}
.sbhead { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: 800; letter-spacing: 0.3em; color: var(--accent); text-shadow: 0 0 10px rgba(85, 255, 51, 0.5); }
.sbhead .sbtog { font: inherit; color: var(--accent); background: none; border: 1px solid #2f5a2a; border-radius: 6px; padding: 0 7px; cursor: pointer; letter-spacing: 0; }
.sbpanel.collapsed > :not(.sbhead) { display: none; }
.sbhead span { color: #5d8c5d; letter-spacing: 0.1em; font-weight: 400; }
.sbinfo { color: #5d8c5d; font-size: 10.5px; letter-spacing: 0.12em; margin: 4px 0 8px; }
.sbrow { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sbrow .btn { flex: 1 1 auto; }
.sbrange { align-items: center; color: #8fcf8f; }
.sbrange input { flex: 1; accent-color: var(--accent); }
.sbpos { justify-content: space-between; color: #5d8c5d; letter-spacing: 0.1em; }
.sbpos b { color: var(--accent2); font-weight: 400; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 40px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: #131a2c; border: 1px solid #2a3654; color: var(--ink);
  font: 700 13px/1.2 var(--mono); letter-spacing: 0.06em; text-align: center;
  transition: border-color .12s, color .12s, box-shadow .12s, transform .05s, background .12s;
}
.btn:hover { border-color: var(--accent); color: #fff; box-shadow: 0 0 14px rgba(85, 255, 51, 0.18); }
.btn:active { transform: translateY(1px); }
.btn small { font-weight: 400; font-size: 11px; color: var(--dim); letter-spacing: 0.02em; }
.btn.big { min-height: 54px; font-size: 15px; }
.btn.primary { background: linear-gradient(180deg, #1f3a18, #142a10); border-color: #3e8a2a; color: #d8ffcc; }
.btn.primary:hover { border-color: var(--accent); }
.btn.primary small { color: #9fd68f; }
.btn.danger { border-color: #6a2a34; color: #ffb0b0; }
.btn.danger:hover { border-color: #ff5a6a; box-shadow: 0 0 14px rgba(255, 90, 106, 0.2); }
.btn.sm { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.btn[aria-pressed="true"] { background: var(--accent); color: #0a1502; border-color: var(--accent); }
.btn kbd { margin-left: 4px; }
.btn.sandbox { flex-direction: row; gap: 8px; border-style: dashed; border-color: #2f5a2a; color: var(--accent); }
.btn.sandbox small { color: #6f9c6a; }

/* ---------------- Touch ---------------- */
.touch { display: none; }
html.touchui .touch {
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 4px calc(4px + var(--sab));
}
.dpad { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(3, 54px); gap: 4px; flex: none; }
.dpad button {
  display: grid; place-items: center; padding: 0; border-radius: 12px; cursor: pointer;
  background: rgba(19, 26, 44, 0.92); border: 1px solid #2a3654; color: #dfe8ff; touch-action: none;
}
.dpad button.dg { background: rgba(14, 19, 34, 0.85); border-color: #222b44; color: #9aa6c4; }
.dpad button.wait { border-radius: 50%; color: var(--accent); }
.dpad button:active, .dpad button.on { background: #24304e; border-color: var(--accent); color: #fff; }
.dpad svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dpad .dg svg { width: 20px; height: 20px; }
.dpad .wait svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.tacts { display: grid; grid-template-columns: repeat(2, minmax(76px, 1fr)); gap: 6px; flex: 1 1 auto; max-width: 260px; }
.tbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 4px 6px;
  border-radius: 12px; background: rgba(19, 26, 44, 0.92); border: 1px solid #2a3654; cursor: pointer; touch-action: none;
}
.tbtn b { font-size: 13px; color: #fff; }
.tbtn small { font-size: 10px; color: var(--dim); letter-spacing: 0.04em; }
.tbtn.main { border-color: #3e8a2a; background: linear-gradient(180deg, #1f3a18, #142a10); }
.tbtn.main b { color: #d8ffcc; }
.tbtn.hot { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 210, 58, 0.35); }
.tbtn:active { background: #24304e; }
.tbtn[disabled] { opacity: 0.4; }

html.touchui:not(.compact) .stage { grid-template-rows: minmax(0, 1fr) auto; }
html.touchui:not(.compact) .side { grid-row: 1 / span 2; grid-column: 2; }
html.touchui:not(.compact) .touch { grid-column: 1; grid-row: 2; }

/* ---------------- Kompakte Darstellung (Handy / schmal) ---------------- */
html.compact .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 0 var(--sar) 0 var(--sal); }
html.compact .side { display: none; }
html.compact .playwrap { border-left: 0; border-right: 0; }
html.compact .hudlayer .hud {
  position: absolute; left: 6px; top: 6px; width: min(230px, 56%); padding: 6px 8px; pointer-events: auto;
  background: rgba(8, 10, 18, 0.72); border-color: rgba(42, 54, 84, 0.7); backdrop-filter: blur(2px);
}
html.compact .hudlayer .hud .hudhead { margin-bottom: 3px; }
html.compact .hudlayer .hud .hudhead b { font-size: 11.5px; }
html.compact .hudlayer .hud .hudhead span { font-size: 10.5px; }
html.compact .hudlayer .bar { height: 15px; margin: 3px 0; }
html.compact .hudlayer .bar > span { font-size: 10.5px; padding: 0 5px; }
html.compact .hudlayer .bar svg { width: 10px; height: 10px; }
html.compact .hudlayer .hudstats { font-size: 11px; margin-top: 4px; }
html.compact .hudlayer .hudstats span:last-child { display: none; }
html.compact .hudlayer .hudstats { grid-template-columns: repeat(3, auto); }
html.compact .hudlayer .minibox {
  position: absolute; right: 6px; top: 6px; width: min(118px, 30%); padding: 3px; pointer-events: auto;
  background: rgba(8, 10, 18, 0.72); border-color: rgba(42, 54, 84, 0.7);
}
html.compact .hudlayer .miniinfo { display: none; }
html.compact .hudlayer .quick {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(300px, 84%); pointer-events: auto;
}
html.compact .hudlayer .qslot { background: rgba(14, 19, 34, 0.85); }
html.compact .hudlayer .logbox {
  position: absolute; left: 6px; right: 6px; bottom: calc(6px + min(50px, 14vw) + 6px); min-height: 0; pointer-events: auto;
  background: none; border: 0; flex: none;
}
html.compact .hudlayer .log { padding: 0 4px; overflow: hidden; max-height: 4.4em; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11.5px; }
html.compact .hudlayer .log li { text-shadow: 0 1px 2px #000, 0 0 4px #000; display: none; }
html.compact .hudlayer .log li:nth-last-child(-n+3) { display: block; }
html.compact .hudlayer .log li.old { opacity: 0; transition: opacity 1.2s; }
html.compact .ctxbar { bottom: calc(6px + min(50px, 14vw) + 6px + 4.8em); font-size: 11.5px; }
html.compact.land .ctxbar { bottom: auto; top: 8px; }
html.compact .sbpanel { left: 6px; right: 6px; width: auto; bottom: 6px; }
html.compact .bossbar { top: 72px; }

/* Querformat auf dem Handy: Steuerung als Overlay */
html.compact.land .stage { grid-template-rows: minmax(0, 1fr); }
html.compact.land.touchui .touch {
  position: absolute; left: calc(6px + var(--sal)); right: calc(6px + var(--sar)); bottom: calc(4px + var(--sab)); z-index: 7; padding: 0;
  pointer-events: none;
}
html.compact.land.touchui .touch > * { pointer-events: auto; }
html.compact.land .dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 3px; opacity: 0.88; }
html.compact.land .tacts { grid-template-columns: repeat(3, 70px); max-width: none; flex: none; opacity: 0.92; }
html.compact.land .tbtn { min-height: 44px; }
html.compact.land.touchui .hudlayer .quick { bottom: 8px; width: min(260px, 36%); }
html.compact.land.touchui .hudlayer .logbox { left: 160px; right: 230px; bottom: 60px; }
html.compact.land .hudlayer .hud { width: min(220px, 30%); }

/* ---------------- Dialoge ---------------- */
.ov {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 16px calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  background: rgba(4, 5, 9, 0.72); backdrop-filter: blur(3px); animation: ovin .18s ease-out;
}
.ov[hidden] { display: none; }
@keyframes ovin { from { opacity: 0; } to { opacity: 1; } }
.dlg { width: 100%; max-width: 480px; max-height: 100%; overflow: auto; padding: 18px 18px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: pop .22s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pop { from { transform: translateY(10px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg h2, .inv h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.dlg p { margin: 0 0 10px; color: var(--ink); }
.dlgfoot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.dlgfoot.two .btn { flex: 1; }
.dlgfoot.wrap { flex-wrap: wrap; }
.dlgfoot.wrap .btn { flex: 1 1 40%; }
.col { display: flex; flex-direction: column; gap: 8px; }
.invhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.invhead h2 { margin: 0; }
.xbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: #121829; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.xbtn:hover { border-color: var(--accent); color: #fff; }

/* Menü */
.ov-menu { background: radial-gradient(ellipse at 50% 40%, rgba(4, 5, 9, 0.35), rgba(4, 5, 9, 0.82) 70%); backdrop-filter: none; }
.menucard { width: 100%; max-width: 440px; max-height: 100%; overflow: auto; text-align: center; padding: 8px 6px; scrollbar-width: thin; }
.logo {
  margin: 0; white-space: nowrap; font-size: clamp(34px, 8vw, 60px); font-weight: 900; letter-spacing: 0.2em; padding-left: 0.2em; color: var(--accent);
  text-shadow: 0 0 24px rgba(85, 255, 51, 0.55), 0 0 2px #b8ffa0, 0 4px 0 #0a2a06;
}
.logo span { display: inline-block; margin-left: 4px; vertical-align: super; font-size: 0.28em; letter-spacing: 0.1em; padding: 1px 6px; color: var(--warm); border: 1px solid rgba(255, 179, 71, 0.6); border-radius: 6px; text-shadow: 0 0 10px rgba(255, 179, 71, 0.6); }
.tagline { margin: 6px auto 18px; max-width: 360px; color: #b9c6dd; font-size: 13.5px; text-shadow: 0 1px 3px #000; }
.menubtns { display: flex; flex-direction: column; gap: 8px; }
.menurow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menufoot { margin: 14px 0 0; font-size: 12px; color: var(--dim); text-shadow: 0 1px 2px #000; }
.menufoot b { color: var(--gold); }

/* Seed */
.seedform { display: flex; gap: 8px; }
.seedform input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); background: #0a0d18; color: #fff; font: 15px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Pause */
.pausecard { max-width: 380px; }
.pinfo { color: var(--dim) !important; font-size: 12.5px; }

/* Inventar */
.inv { width: 100%; max-width: 640px; max-height: 100%; display: flex; flex-direction: column; padding: 14px; overflow: hidden; }
.invequip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.invequip .eqrow { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 13, 24, 0.7); }
.invbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-height: 0; flex: 1; }
.invlist { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.invlist button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; cursor: pointer; text-align: left;
  background: #0e1322; border: 1px solid #1f2840; color: var(--ink); font-size: 13px;
}
.invlist button:hover { border-color: #3e5a8a; }
.invlist button[aria-selected="true"] { border-color: var(--accent); background: #142016; color: #fff; }
.invlist img { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.invlist kbd { flex: none; }
.invlist .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invlist .empty { color: var(--dim); padding: 10px; font-size: 13px; }
.invdetail { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: rgba(10, 13, 24, 0.7); overflow-y: auto; min-height: 0; }
.invdetail .dh { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.invdetail .dh img { width: 48px; height: 48px; image-rendering: pixelated; background: #05060a; border-radius: 8px; border: 1px solid #222b44; }
.invdetail h3 { margin: 0; font-size: 15px; color: #fff; }
.invdetail .st { color: var(--accent2); font-size: 12.5px; margin: 0 0 6px; }
.invdetail p { font-size: 13px; color: var(--ink); margin: 0 0 10px; }
.invdetail .cmp { font-size: 12px; margin: -4px 0 10px; }
.invdetail .cmp.up { color: var(--good); }
.invdetail .cmp.down { color: var(--bad); }
.invdetail .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.invdetail .acts .btn { flex: 1 1 auto; }
.invhint { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); }

/* Händlerin */
.shopcard { max-width: 560px; }
.shophead { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.shophead img { width: 56px; height: 56px; image-rendering: pixelated; background: #0a0d18; border: 1px solid #2a3654; border-radius: 10px; flex: none; }
.shophead p { margin: 0 !important; color: #e2c8ff !important; font-style: italic; }
.shopgold { font-size: 13px; }
.shopgold b { color: var(--gold); font-size: 16px; }
.shopgold small { display: block; color: var(--dim); font-size: 11.5px; }
.shoplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shoplist li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid #1f2840; border-radius: 10px; background: rgba(10, 13, 24, 0.7); }
.shoplist li.sold { opacity: 0.45; }
.shoplist img { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.shoplist .si { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shoplist .si b { color: #fff; font-size: 13.5px; }
.shoplist .si em { font-style: normal; color: var(--accent2); font-size: 11.5px; }
.shoplist .si span { color: #aab6d0; font-size: 11.5px; }
.shoplist .btn { flex: none; min-width: 108px; }
.shoplist .btn .pr { color: var(--gold); }

/* Stufenaufstieg */
.lvlcard { max-width: 560px; text-align: center; }
.lvlopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.lvlopt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #151d33, #0e1424); border: 1px solid #2a3654; color: var(--ink); text-align: center;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.lvlopt:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 210, 58, 0.15); }
.lvlopt .lk { font-size: 11px; color: var(--dim); }
.lvlopt > div { display: flex; flex-direction: column; align-items: inherit; gap: 4px; }
.lvlopt .li { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 58, 0.22), rgba(255, 210, 58, 0) 70%); }
.lvlopt .li svg { width: 30px; height: 30px; fill: var(--gold); }
.lvlopt b { font-size: 14px; color: #fff; }
.lvlopt span { font-size: 12px; color: #aab6d0; }
.lvlopt .lv { font-size: 11px; color: var(--accent); }

/* Ende */
.endcard { max-width: 520px; text-align: center; }
.endcard.won h2 { color: var(--gold); text-shadow: 0 0 18px rgba(255, 210, 58, 0.5); }
.endcard.dead h2 { color: #ff6b6b; }
.endcause { color: #d8c8c8 !important; }
.endscore { display: flex; flex-direction: column; align-items: center; margin: 4px 0 12px; }
.endscore span { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
.endscore b { font-size: 40px; color: var(--gold); text-shadow: 0 0 18px rgba(255, 210, 58, 0.35); line-height: 1.1; }
.endscore em { font-style: normal; font-size: 12.5px; color: var(--accent); min-height: 1em; }
.endstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; margin: 0 0 10px; text-align: left; font-size: 13px; }
.endstats div { display: flex; justify-content: space-between; border-bottom: 1px dashed #1f2840; padding: 2px 0; }
.endstats dt { color: var(--dim); }
.endstats dd { margin: 0; color: #fff; font-weight: 700; }
.endkills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 4px; }
.endkills span { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border: 1px solid #1f2840; border-radius: 8px; font-size: 12px; background: #0b0f1c; }
.endkills img { width: 24px; height: 24px; image-rendering: pixelated; }

/* Bestenliste */
.scorecard { max-width: 560px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: #0e1322; color: var(--dim); cursor: pointer; font-size: 12.5px; }
.tabs button[aria-selected="true"] { color: #0a1502; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.sclist table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sclist th, .sclist td { padding: 5px 6px; text-align: left; border-bottom: 1px solid #1a2134; }
.sclist th { color: var(--dim); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.sclist td.num { text-align: right; color: var(--gold); font-weight: 700; }
.sclist tr.me td { background: rgba(85, 255, 51, 0.08); }
.sclist tr.won td:nth-child(2)::after { content: " ★"; color: var(--gold); }
.sclist .none { padding: 18px; text-align: center; color: var(--dim); }

/* Karte */
.mapcard { max-width: 900px; }
.bigmap { background: #05060a; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
#bigmap { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.legend { margin: 8px 0 0 !important; font-size: 12px; color: var(--dim) !important; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; }
.lg-p { background: #55ff33; } .lg-s { background: #33ffcc; } .lg-m { background: #ff4a4a; } .lg-i { background: #e8b628; border-radius: 50% !important; } .lg-d { background: #c48a4a; }

/* Log-Overlay */
.logcard { max-width: 620px; height: min(560px, 100%); display: flex; flex-direction: column; }
.log.full { border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 13, 24, 0.7); }

/* Einstellungen */
.setcard { max-width: 560px; }
.setgrid { display: grid; gap: 10px; }
.setrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.setrow > span { font-size: 13px; color: var(--ink); }
.setrow > span small { display: block; font-size: 11px; color: var(--dim); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { flex: 1 1 auto; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line2); background: #0e1322; color: var(--dim); cursor: pointer; font-size: 12px; min-height: 34px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #0a1502; border-color: var(--accent); font-weight: 700; }
.setrow input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Hilfe */
.helpcard { max-width: 680px; height: min(640px, 100%); display: flex; flex-direction: column; }
.helpbody { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; font-size: 13px; scrollbar-width: thin; }
.helpbody h3 { margin: 12px 0 6px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm); }
.helpbody h3:first-child { margin-top: 0; }
.helpbody p, .helpbody li { color: var(--ink); }
.helpbody ul { margin: 0 0 8px; padding-left: 18px; }
.helpbody table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.helpbody td { padding: 4px 6px; border-bottom: 1px solid #1a2134; vertical-align: top; }
.helpbody td:first-child { white-space: nowrap; color: #fff; }
.bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.beast { display: flex; gap: 10px; padding: 8px; border: 1px solid #1f2840; border-radius: 10px; background: rgba(10, 13, 24, 0.6); }
.beast img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.beast b { color: #fff; font-size: 13px; }
.beast em { display: block; font-style: normal; color: var(--warm); font-size: 11.5px; }
.beast span { display: block; color: #aab6d0; font-size: 12px; }
.beast.unknown img { filter: brightness(0); opacity: 0.5; }

/* Menü-Modus: Demo-Dungeon über die volle Breite */
html.menu .stage { grid-template-columns: minmax(0, 1fr); }
html.menu .side, html.menu .hudlayer, html.menu .ctxbar, html.menu .touch, html.menu .bossbar { display: none !important; }

html.sandbox .equip, html.sandbox .quick, html.sandbox .hud .bar.xp, html.sandbox .hud .bar.hp, html.sandbox .hudstats { display: none !important; }

html.sandbox .logbox { display: none !important; }
.side .sbpanel { position: static; width: auto; flex: 0 0 auto; }

/* Footer etwas Luft */
.app > .s05-footer { margin-top: 0; }

/* Mobil */
@media (max-width: 899px) {
  :root { --topbar: 48px; }
  .brand { display: none; }
  .tools { margin-left: auto; gap: 4px; }
  .ibtn { width: 36px; height: 36px; }
}
@media (max-width: 440px) {
  #btnHelp, #btnFull { display: none; }
}
@media (max-width: 420px) {
  .ibtn { width: 34px; height: 34px; border-radius: 9px; }
  .ibtn svg { width: 20px; height: 20px; }
  .dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); }
  .tacts { grid-template-columns: repeat(2, minmax(70px, 1fr)); }
  .tbtn { min-height: 48px; }
  .invbody { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .invdetail { max-height: 42vh; }
  .lvlopts { grid-template-columns: 1fr; }
  .lvlopt { flex-direction: row; text-align: left; padding: 10px; }
  .lvlopt > div { align-items: flex-start; }
  .setrow { grid-template-columns: 1fr; gap: 4px; }
  .endstats { grid-template-columns: 1fr; }
}
@media (max-height: 700px) and (min-width: 900px) {
  .side .equip { display: none; }
}
@media (max-height: 520px) {
  :root { --topbar: 44px; }
  .ibtn { width: 34px; height: 34px; }
  .menucard .tagline { display: none; }
  .logo { font-size: 34px; }
  .btn.big { min-height: 44px; }
  .menubtns { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov, .dlg, .banner.show, .bar > i, .lvlopt { animation: none !important; transition: none !important; }
  .banner.show { opacity: 1; }
  .bar.hp.low > i, .bar.torch.low > i { animation: none; }
}