/* ===================================================================
   Edahnien — Haupt-CSS v2
   Vereint: styles-v2.css + screens.css + wizard.css
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=VT323&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── CSS-Variablen ─────────────────────────────────────────────── */
:root {
  /* Primärpalette (styles-v2) */
  --ink:          #e8efe2;
  --ink-dim:      #9aa896;
  --ink-faint:    #5d6b59;
  --moss:         #2a3a1d;
  --moss-deep:    #0f1608;
  --moss-black:   #060904;
  --jade:         #4ade80;
  --jade-bright:  #86efac;
  --jade-glow:    #22c55e;
  --emerald:      #10b981;
  --gold:         #c9a368;
  --gold-bright:  #e8c98c;
  --line:         rgba(232, 239, 226, 0.08);
  --line-strong:  rgba(232, 239, 226, 0.18);

  /* Alias-Variablen für screens.css (altes System) */
  --copper-1:     var(--gold);
  --copper-2:     var(--line-strong);
  --copper-3:     var(--ink-faint);
  --copper-bright:var(--gold-bright);
  --swamp-1:      var(--moss);
  --swamp-2:      var(--moss-deep);
  --swamp-3:      var(--moss-deep);
  --swamp-glow:   var(--jade-glow);
  --bg-panel:     var(--moss-deep);
  --bg-deep:      var(--moss-black);
  --bone-1:       var(--ink);
  --bone-2:       var(--ink-dim);
  --bone-3:       var(--ink-faint);
  --blood:        #dc2626;
  --blood-bright: #f87171;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #000;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[data-font="serif"] { font-family: 'Cormorant Garamond', Georgia, serif; }
body[data-font="pixel"]  { font-family: 'VT323', monospace; }
body[data-font="mono"]   { font-family: 'JetBrains Mono', monospace; }
button, input { font-family: inherit; }

/* Farbakzente per Dragon-Farbe */
body[data-dragon="red"] {
  --jade:        #f87171;
  --jade-bright: #fca5a5;
  --jade-glow:   #ef4444;
  --emerald:     #dc2626;
}
body[data-dragon="black"] {
  --jade:        #9aa5b8;
  --jade-bright: #cbd5e1;
  --jade-glow:   #64748b;
  --emerald:     #475569;
}

/* ===================================================================
   HERO / LANDING
   =================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.hero-art {
  position: absolute; inset: 0;
  background-image: url('assets/dragon-keyart-green.png');
  background-size: cover;
  background-position: center 22%;
  z-index: -3;
  animation: ken-burns 30s ease-in-out infinite alternate;
  filter: saturate(1.1) contrast(1.05);
}
body[data-dragon="red"]   .hero-art { background-image: url('assets/dragon-keyart-red.png'); }
body[data-dragon="black"] .hero-art { filter: saturate(0.15) contrast(1.2) brightness(0.7); }
@keyframes ken-burns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.15) translate(-1%, -2%); }
}
.hero-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 35% 40%, transparent 0%, rgba(6,9,4,0.55) 70%, rgba(6,9,4,0.92) 100%),
    linear-gradient(180deg, rgba(6,9,4,0.55) 0%, transparent 25%, transparent 60%, rgba(6,9,4,0.85) 100%),
    linear-gradient(90deg, rgba(6,9,4,0) 50%, rgba(6,9,4,0.65) 100%);
  z-index: -2; pointer-events: none;
}
.hero-grain {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: overlay;
  z-index: -1; pointer-events: none;
  animation: grain-shift 1.2s steps(6) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, -1%); }
}
.hero-rays {
  position: absolute; top: -10%; left: 50%;
  width: 60%; height: 80%;
  transform: translateX(-50%) rotate(8deg);
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg, rgba(155,201,74,0.08) 4deg, transparent 8deg,
    transparent 16deg, rgba(155,201,74,0.05) 20deg, transparent 24deg);
  mix-blend-mode: screen; z-index: -1; pointer-events: none;
  animation: rays-shimmer 8s ease-in-out infinite;
}
@keyframes rays-shimmer { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Embers */
.embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.embers .e {
  position: absolute; bottom: -10px;
  width: 2px; height: 2px;
  background: var(--jade-bright); border-radius: 50%;
  box-shadow: 0 0 6px var(--jade-bright), 0 0 12px var(--jade-glow);
  animation: ember-up linear infinite;
}
@keyframes ember-up {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translate(20px, -110vh); opacity: 0; }
}

/* ─── Login Float (Landing-Karte rechts) ────────────────────────── */
.login-float {
  width: 400px;
  min-height: 500px;
  flex-shrink: 0;
  z-index: 6;
  margin-left: auto;
  position: relative;
  background: #0a0f0a;
  border: 1px solid transparent;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.login-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    var(--moss)      0%,
    var(--jade-glow) 50%,
    var(--moss)      100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.lf-header { text-align: center; margin-bottom: 20px; }
.lf-form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lf-bottom { margin-top: 6px; display: flex; flex-direction: column; gap: 0; }

#lf-email-group {
  overflow: hidden;
  max-height: 80px;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}
#lf-email-group.lf-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -12px; /* gap cancellen — kein Leerraum wenn verborgen */
}

/* Consent-Gruppe & Remember-Gruppe — kleine Checkbox-Zeile */
.lf-consent {
  overflow: hidden;
  max-height: 40px;
  opacity: 1;
  padding: 2px 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}
.lf-consent.lf-hidden {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin-top: -12px; /* gap cancellen — kein Leerraum wenn verborgen */
}
.lf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
}
.lf-checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 3px;
  background: rgba(10,15,10,0.9);
  cursor: pointer;
  margin: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.lf-checkbox-label input[type="checkbox"]:checked {
  background: var(--jade);
  border-color: var(--jade);
}
.lf-checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #0a0f0a;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.lf-checkbox-label input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(74,222,128,0.25);
}
.lf-checkbox-label a {
  color: var(--jade-bright);
  text-decoration: none;
}
.lf-checkbox-label a:hover {
  text-decoration: underline;
}
.login-divider { height: 1px; background: rgba(74,222,128,0.1); margin: 14px 0 12px; }
.footer-links {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-faint);
  margin: 12px 0 0;
}
.footer-links a { color: var(--ink-faint); text-decoration: none; }
.footer-links a:hover, .footer-links span:hover { color: var(--ink); }
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

/* ─── Login Card (transparent — Box liegt auf .login-float) ─────── */
.login-card {
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
}
.login-corner { position: absolute; width: 14px; height: 14px; opacity: 0.6; }
.login-corner.tl { top: 12px; left: 12px;   border-top: 1px solid var(--jade-bright); border-left:  1px solid var(--jade-bright); }
.login-corner.tr { top: 12px; right: 12px;  border-top: 1px solid var(--jade-bright); border-right: 1px solid var(--jade-bright); }
.login-corner.bl { bottom: 12px; left: 12px;  border-bottom: 1px solid var(--jade-bright); border-left:  1px solid var(--jade-bright); }
.login-corner.br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--jade-bright); border-right: 1px solid var(--jade-bright); }
.login-head {
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--jade-bright); margin: 0 0 4px;
}
.login-title {
  font-family: 'Cinzel', serif; font-size: 28px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink); margin: 0 0 6px;
}
.login-sub {
  font-size: 13px; color: var(--ink-faint); font-style: italic; margin: 0 0 20px; line-height: 1.5;
}

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab {
  appearance: none; background: transparent; border: 0;
  color: var(--ink-faint); font-size: 11px; letter-spacing: 0.25em;
  text-transform: uppercase; padding: 10px 16px 12px;
  cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: all 0.2s;
}
.tab.active { color: var(--jade-bright); border-bottom-color: var(--jade-bright); }
.tab:hover { color: var(--ink); }

/* Form fields */
/* field-group: Definition weiter unten (Zeile ~828) ist maßgeblich */

/* Buttons */
.cta-primary {
  appearance: none; display: flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%; padding: 14px 20px; margin-top: 18px;
  background: linear-gradient(180deg, var(--jade-bright), var(--jade-glow));
  color: var(--moss-black); border: 0; font-size: 13px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer;
  position: relative; overflow: hidden; transition: all 0.2s;
  box-shadow: 0 0 0 1px rgba(74,222,128,0.4), 0 8px 24px rgba(74,222,128,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}
.cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.5), 0 12px 32px rgba(74,222,128,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.cta-primary::before {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s;
}
.cta-primary:hover::before { left: 100%; }
.cta-ghost {
  appearance: none; background: rgba(15,22,8,0.5); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); color: var(--ink);
  padding: 14px 24px; font-size: 13px; letter-spacing: 0.25em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.cta-ghost:hover { background: rgba(15,22,8,0.7); border-color: var(--jade); color: var(--jade-bright); }

.login-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; font-size: 11px; color: var(--ink-faint);
}
.login-foot a { color: var(--ink-dim); text-decoration: none; letter-spacing: 0.1em; transition: color 0.2s; }
.login-foot a:hover { color: var(--jade-bright); }

/* Topbar */
.topbar {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; padding: 22px 40px; z-index: 5;
}
.brand-mark { display: flex; align-items: center; gap: 14px; }
.brand-glyph {
  width: 36px; height: 36px; border: 1px solid var(--jade);
  display: flex; align-items: center; justify-content: center;
  color: var(--jade-bright); font-size: 18px;
  background: rgba(15,22,8,0.5); backdrop-filter: blur(8px); position: relative;
}
.brand-glyph::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(74,222,128,0.3); }
.brand-name {
  font-family: 'Cinzel', 'Cormorant SC', serif; font-size: 20px;
  letter-spacing: 0.32em; color: var(--ink); text-shadow: 0 0 24px rgba(74,222,128,0.3);
}
.brand-name b { color: var(--jade-bright); font-weight: 600; }
.brand-tag { font-size: 10px; letter-spacing: 0.4em; color: var(--ink-dim); text-transform: uppercase; margin-top: 2px; }

/* Impressum-Link + Versionsnummer (alle Templates) */
.impressum-link {
  font-size: 11px;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.2s;
}
.impressum-link:hover { color: var(--ink); }

.game-version {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* Container für Version + Impressum + Feedback */
.impressum-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Landing + Public: absolut über Ticker */
.hero .impressum-bar {
  position: absolute;
  bottom: 48px;
  right: 2%;
  z-index: 7;
}

/* Info/Interactive/Combat: im Footer-Bereich */
#footer .impressum-bar,
.wiz-foot .impressum-bar,
.page-footer .impressum-bar {
  margin-left: auto;
}

/* Ticker */
.ticker {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  background: linear-gradient(180deg, transparent, rgba(6,9,4,0.95));
  backdrop-filter: blur(8px); border-top: 1px solid var(--line-strong);
  padding: 14px 60px; display: flex; align-items: center; gap: 24px; font-size: 12px;
}
.ticker-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; background: var(--jade-bright); color: var(--moss-black);
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; white-space: nowrap;
}
.ticker-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--moss-black); animation: pulse-dot 1.2s ease-in-out infinite;
}
.ticker-track { flex: 1; overflow: hidden; position: relative; height: 18px; }
.ticker-track-inner {
  display: inline-flex; gap: 60px; white-space: nowrap;
  position: absolute; animation: tick 50s linear infinite; color: var(--ink-dim);
}
.ticker-track-inner span b  { color: var(--jade-bright); font-weight: 500; }
.ticker-track-inner span em { color: #f87171; font-style: normal; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse-dot { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ===================================================================
   TOWN VIEW (info-Seiten)
   =================================================================== */

.town-banner {
  border: 1px solid var(--copper-2);
  background:
    radial-gradient(ellipse at center, rgba(74,107,31,0.25), transparent 70%),
    linear-gradient(180deg, var(--swamp-1), var(--bg-panel));
  padding: 20px 24px; text-align: center; margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 40px rgba(155,201,74,0.1);
}
.town-banner-title {
  font-family: 'Cinzel', serif; font-size: 22px; letter-spacing: 0.15em;
  color: var(--jade-bright);
  text-shadow: 0 0 16px rgba(155,201,74,0.4), 0 1px 0 #000; margin-bottom: 4px;
}
.town-banner-sub { color: var(--ink-dim); font-size: 14px; }
.town-banner-sub.italic { font-style: italic; }

/* 3-Spalten-Grid: nav | content | stats */
.town-grid {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: 18px;
  align-items: start;
  padding: 0 18px 60px;
}
@media (max-width: 1300px) { .town-grid { grid-template-columns: 180px 1fr 240px; } }
@media (max-width: 1100px) { .town-grid { grid-template-columns: 1fr 1fr; } .town-grid .stats-col { grid-column: 1 / -1; } }
@media (max-width: 720px)  { .town-grid { grid-template-columns: 1fr; } }

/* Nav column */
.nav-col { position: sticky; top: 16px; }

/* ─── Nav-Links (aus evo.htm Slots) ─────────────────────────────── */
.navhead {
  display: block; padding: 12px 0 4px;
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--jade-bright);
  border-bottom: 1px solid var(--line);
}
a.nav {
  display: block; color: var(--ink-dim); text-decoration: none;
  font-size: 13px; padding: 4px 0 4px 10px;
  border-left: 2px solid transparent; transition: all 0.15s; line-height: 1.35;
}
a.nav:hover {
  color: var(--jade-bright); border-left-color: var(--jade-bright); padding-left: 14px;
  text-shadow: 0 0 12px rgba(74,222,128,0.3);
}
.navhelp { display: block; color: var(--ink-faint); font-size: 11px; font-style: italic; padding: 2px 0; }

/* ─── Action rows (nav list-like links) ─────────────────────────── */
.action-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: all 0.15s; text-decoration: none; color: inherit;
}
.action-row:last-child { border-bottom: 0; }
.action-row:hover {
  background: linear-gradient(90deg, rgba(74,107,31,0.18), transparent); padding-left: 18px;
}
.action-row.danger:hover { background: linear-gradient(90deg, rgba(138,26,20,0.2), transparent); }
.action-icon {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--bg-deep); border: 1px solid var(--copper-1); color: var(--copper-bright);
}
.action-row.danger .action-icon { color: var(--blood-bright); border-color: var(--blood); }
.action-title {
  font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.06em; color: var(--bone-1);
}
.action-row.danger .action-title { color: var(--blood-bright); }
.action-desc { font-size: 12px; color: var(--bone-3); margin-top: 1px; }
.action-meta {
  font-size: 11px; color: var(--copper-bright); letter-spacing: 0.05em;
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}

/* ─── Boss panel ─────────────────────────────────────────────────── */
.boss-panel { border-color: var(--blood); }
.boss-panel .panel-h { background: linear-gradient(180deg, #3a0a08, #1a0504); border-bottom-color: var(--blood); color: var(--blood-bright); }
.boss-summary { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
.boss-portrait {
  position: relative; width: 120px; height: 120px;
  background: radial-gradient(circle at 50% 40%, var(--swamp-3), var(--bg-deep) 70%), var(--bg-deep);
  border: 1px dashed rgba(184,168,122,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.boss-portrait::after { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(184,168,122,0.12); }
.boss-eye {
  position: absolute; top: 35%; left: 32%; width: 8px; height: 8px;
  background: var(--swamp-glow); border-radius: 50%; box-shadow: 0 0 10px var(--swamp-glow);
  animation: eye-blink 4s ease-in-out infinite;
}
.boss-eye.right { left: auto; right: 32%; animation-delay: 0.1s; }
@keyframes eye-blink { 0%, 45%, 55%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
.boss-glyph { font-size: 36px; color: var(--swamp-glow); opacity: 0.4; margin-top: 30px; animation: glyph-spin 30s linear infinite; }
@keyframes glyph-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.boss-portrait-tag { position: absolute; bottom: 6px; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.15em; color: var(--bone-3); opacity: 0.6; }
.boss-stats { font-size: 13px; }

/* ─── News rows ──────────────────────────────────────────────────── */
.news-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: 13px;
}
.news-row:last-child { border-bottom: 0; }
.news-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--copper-3); letter-spacing: 0.05em; padding-top: 1px; }
.news-text { color: var(--bone-2); }
.news-text::before { content: "› "; color: var(--copper-2); }

/* ─── Char sidebar card ──────────────────────────────────────────── */
.char-card {
  background: rgba(15,22,8,0.5); border: 1px solid var(--line);
  padding: 20px; margin-bottom: 16px; position: sticky; top: 20px;
}
.char-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.char-portrait {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--moss), var(--moss-deep));
  border: 1px solid var(--jade); display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 600; color: var(--jade-bright);
}
.char-name { font-family: 'Cinzel', serif; font-size: 16px; letter-spacing: 0.06em; color: var(--ink); }
.char-class { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.char-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.char-row .k { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.char-row .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.char-row .v.green { color: var(--jade-bright); }
.char-row .v.gold  { color: var(--gold-bright); }
.char-row .v.blood { color: #f87171; }
.char-bar { margin: 10px 0; }
.char-bar-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.char-bar-head .pct { font-family: 'JetBrains Mono', monospace; }
.char-bar-track { height: 4px; background: rgba(0,0,0,0.5); position: relative; overflow: hidden; }
.char-bar-track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--jade-glow), var(--jade-bright)); box-shadow: 0 0 8px rgba(74,222,128,0.5); }
.char-bar-track.hp > span { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 8px rgba(248,113,113,0.5); }
.char-bar-track.xp > span { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 8px rgba(232,201,140,0.5); }
/* MP-Ressource: Mana = blau, Ausdauer = bernstein/gelb */
.char-bar-track.mp          > span { background: linear-gradient(90deg, #2563eb, #93c5fd); box-shadow: 0 0 8px rgba(147,197,253,0.5); }
.char-bar-track.mp.ausdauer > span { background: linear-gradient(90deg, #d97706, #fcd34d); box-shadow: 0 0 8px rgba(252,211,77,0.45); }

/* ── Inventar-Trenner + Ressourcen-Farben ──────────────────────────────── */
.char-divider {
  border: none; border-top: 1px solid var(--line);
  margin: 4px 0;
}
.char-row .gold-val { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.char-row .gem-val  { color: #7dd3fc; font-variant-numeric: tabular-nums; }

/* ── Buff-Anzeige in der Seitenleiste ─────────────────────────────────── */
.char-section-title {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); border-top: 1px solid var(--line);
  margin-top: 8px; padding-top: 8px;
}
.char-buff-row { padding: 3px 0; }
.char-buff-row .buff-label { font-size: 11px; color: var(--ink-dim); }

/* ── Aktiver Set-Bonus in der Charakter-Sidebar ─────────────────────── */
.char-set-row { padding: 3px 0; }
.char-set-row .set-name { font-size: 11px; color: var(--ink-dim); }
.char-set-bonus { padding: 0 0 4px 2px; }
.char-set-bonus .set-bonus-detail { font-size: 10px; color: rgba(100,200,120,.65); font-style: italic; }

/* ── VFX: Trunkenheits-Unschärfe ─────────────────────────────────────── */
/* Nur .content-col verschwimmt — Header, Nav und Char-Sidebar bleiben scharf.
   body.no-vfx (Admin-Seiten) ist explizit ausgeschlossen.                    */
body:not(.no-vfx).blur-leicht .content-col {
  filter: blur(0.8px);
  transition: filter 1.5s ease;
}
body:not(.no-vfx).blur-stark .content-col {
  filter: blur(2.5px);
  transition: filter 1.5s ease;
}

/* ── Buff-Tooltip ─────────────────────────────────────────────────────── */
.char-buff-row { position: relative; }
.char-buff-row[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: rgba(6,9,4,0.97);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;          /* \n im data-Attribut → Zeilenumbrüche */
  padding: 6px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 200;
  min-width: 120px;
  max-width: 220px;
  white-space: normal;
  text-align: left;
}
.char-buff-row[data-tooltip]:hover::after { opacity: 1; }

/* ── Inn-Toast (AJAX-Aktions-Feedback) ──────────────────────────────────── */
.inn-toast {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--panel-bg, #0f1608);
  border: 1px solid var(--border-dim, #2a3a1d);
  color: var(--ink-main, #c8c8a0);
  padding: 0.55rem 1.3rem;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 8500;
  pointer-events: none;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.inn-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.inn-toast--err {
  border-color: #a83232;
  color: #f87171;
}

/* Panel (legacy) */
.panel {
  background: rgba(15,22,8,0.5); border: 1px solid var(--line); margin-bottom: 16px;
}
.panel-h {
  background: linear-gradient(180deg, rgba(42,58,29,0.6), rgba(15,22,8,0.8));
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--jade-bright);
}
.panel-body { padding: 14px 16px; }

/* Sektion-Überschrift */
.section-title {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--jade-bright); margin: 0 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

/* Legacy $output / $content content normalization */
.content-col { line-height: 1.6; }
.content-col a { color: var(--jade-bright); text-decoration: none; transition: color 0.15s; }
.content-col a:hover { color: var(--ink); }
.content-col b  { color: var(--ink); }
.content-col hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.content-col table { width: 100%; border-collapse: collapse; font-size: 13px; }
.content-col td, .content-col th { padding: 6px 10px; border: 1px solid var(--line); }
.content-col th { background: rgba(15,22,8,0.7); color: var(--jade-bright); }
.content-col input[type="text"],
.content-col input[type="password"],
.content-col select {
  background: rgba(6,9,4,0.6); border: 1px solid var(--line-strong);
  color: var(--ink); padding: 8px 12px; outline: none; transition: border-color 0.2s;
}
.content-col input[type="submit"],
.content-col button, .content-col .button {
  appearance: none; background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.4);
  color: var(--jade-bright); padding: 8px 18px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; transition: all 0.2s; margin: 4px 2px;
}
.content-col input[type="submit"]:hover,
.content-col button:hover, .content-col .button:hover {
  background: rgba(74,222,128,0.25); border-color: var(--jade-bright);
}

/* ===================================================================
   Newday
   =================================================================== */

.newday-panel {
  background: var(--panel-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.newday-race-flavor,
.newday-weather-flavor {
  font-size: .92em;
  color: var(--ink-faint, #aaa);
  border-style: dashed;
}

.newday-summary {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 10px;
  font-size: .88em;
}

.newday-weather {
  margin: 0 0 4px;
  color: var(--ink-faint, #aaa);
}

.newday-bonus-line {
  margin: 0;
  color: var(--gold, #c9a84c);
  letter-spacing: .02em;
}

/* Footer */
#footer {
  padding: 10px 18px; font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.1em; border-top: 1px solid var(--line);
}

/* ===================================================================
   WIZARD (interactive-Seiten / Charaktererstellung)
   =================================================================== */

.wiz {
  position: relative; min-height: 100vh; width: 100%;
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
}
.wiz-art {
  position: absolute; inset: 0;
  background-image: url('assets/dragon-keyart-green.png');
  background-size: cover; background-position: center 30%;
  z-index: -3; filter: blur(6px) saturate(0.9) brightness(0.55); transform: scale(1.08);
  transition: filter 1.2s ease;
}
.wiz-tint {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 50% 50%, transparent 0%, rgba(6,9,4,0.55) 60%, rgba(6,9,4,0.92) 100%),
    linear-gradient(180deg, rgba(6,9,4,0.55) 0%, transparent 30%, rgba(6,9,4,0.85) 100%);
  transition: background 0.8s ease;
}
.wiz-grain {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4; mix-blend-mode: overlay; z-index: -1; pointer-events: none;
}

/* Tints per Rasse */
.wiz[data-tint="mensch"]    .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(232,201,140,0.18), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.85) 100%); }
.wiz[data-tint="elf"]       .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(134,239,172,0.22), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.85) 100%); }
.wiz[data-tint="zwerg"]     .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(248,113,113,0.18), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.85) 100%); }
.wiz[data-tint="halbelf"]   .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(196,181,253,0.20), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.85) 100%); }
.wiz[data-tint="dunkelelf"] .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(139,92,246,0.22), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.95) 100%); }
.wiz[data-tint="halbling"]  .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(251,191,36,0.18), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.85) 100%); }
.wiz[data-tint="ork"]       .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(220,38,38,0.20), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.9) 100%); }
.wiz[data-tint="fee"]       .wiz-tint { background: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(244,114,182,0.22), transparent 60%), radial-gradient(ellipse at center, transparent 0%, rgba(6,9,4,0.85) 100%); }

/* Topbar — .wiz-top bleibt für Abwärtskompatibilität, .cs-head wird jetzt verwendet */
.wiz-top {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; padding: 20px 40px; z-index: 5;
}
.wiz-top .step-tag {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--ink-faint);
}
.wiz-top .step-tag b { color: var(--jade-bright); font-weight: 600; }

/* cs-head im Wizard-Kontext */
.wiz .cs-head { position: relative; z-index: 10001; flex-shrink: 0; }

/* Progress dots */
.wiz-progress { display: flex; align-items: center; gap: 0; }
.wiz-progress .dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(6,9,4,0.55); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 11px; color: var(--ink-faint);
  cursor: pointer; transition: all 0.25s;
}
.wiz-progress .seg { width: 32px; height: 1px; background: var(--line-strong); }
.wiz-progress .dot.done { color: var(--jade-bright); border-color: var(--jade); background: rgba(15,22,8,0.7); }
.wiz-progress .dot.active {
  border-color: var(--jade-bright); background: var(--jade-bright); color: var(--moss-black);
  box-shadow: 0 0 0 4px rgba(74,222,128,0.18), 0 0 20px rgba(74,222,128,0.4); font-weight: 600;
}

/* Stage */
.wiz-stage {
  position: relative; flex: 1;
  display: grid; grid-template-columns: 1fr;
  align-items: center; justify-items: center;
  padding: 0 80px; z-index: 4;
}

/* Step caption */
.wiz-caption { text-align: center; margin-bottom: 12px; }
.wiz-caption .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid rgba(74,222,128,0.35); border-radius: 999px;
  background: rgba(15,22,8,0.5); backdrop-filter: blur(8px);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jade-bright); margin-bottom: 14px;
}
.wiz-caption .eyebrow::before {
  content: ""; width: 5px; height: 5px; background: var(--jade); border-radius: 50%;
  box-shadow: 0 0 8px var(--jade); animation: pulse-dot 2s ease-in-out infinite;
}
.wiz-caption h1 {
  font-family: 'Cinzel', serif; font-size: clamp(28px, 4vw, 48px); font-weight: 600;
  margin: 0; color: var(--ink); letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(0,0,0,0.7);
}
.wiz-caption h1 em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--jade-bright); }
.wiz-caption .sub { font-size: 14px; color: var(--ink-dim); font-style: italic; margin-top: 4px; text-shadow: 0 1px 8px rgba(0,0,0,0.9); }

/* Character SVG */
.wiz-char-wrap {
  position: relative; display: flex; align-items: center;
  justify-content: center; gap: 60px; margin: 0 auto;
}
.wiz-char {
  position: relative; width: 320px; height: 480px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.7)) drop-shadow(0 0 40px rgba(74,222,128,0.15));
  animation: char-breathe 5s ease-in-out infinite;
}
@keyframes char-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.wiz-char svg { width: 100%; height: 100%; overflow: visible; }
.wiz-char-svg { position: relative; width: 100%; height: 100%; }
.wiz-char-svg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.wiz-char::after {
  content: ""; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 60px;
  background: radial-gradient(ellipse at center, rgba(74,222,128,0.25) 0%, transparent 70%); z-index: -1;
}
.wiz-char img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Arrows */
.wiz-arrow {
  appearance: none; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(15,22,8,0.6); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 22px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0; text-decoration: none;
}
.wiz-arrow:hover { background: rgba(15,22,8,0.85); border-color: var(--jade); color: var(--jade-bright); box-shadow: 0 0 24px rgba(74,222,128,0.25); }

/* Info below char */
.wiz-info { margin-top: 30px; text-align: center; max-width: 600px; }
.wiz-info-name {
  font-family: 'Cinzel', serif; font-size: 32px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink); margin: 0 0 8px;
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(0,0,0,0.7);
}
.wiz-info-name em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--jade-bright); font-size: 0.7em; display: block; margin-top: 2px; letter-spacing: 0.1em; }
.wiz-info-desc { font-size: 14px; color: var(--ink-dim); font-style: italic; line-height: 1.6; margin: 0 0 16px; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }

/* Stat pills */
.stat-icons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(15,22,8,0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink); font-family: 'JetBrains Mono', monospace;
}
.stat-pill .gl { font-size: 14px; }
.stat-pill.up   { color: var(--jade-bright); border-color: rgba(74,222,128,0.3); }
.stat-pill.up .v { color: var(--jade-bright); }
.stat-pill.down { color: #f87171; border-color: rgba(248,113,113,0.3); }

/* Step 1: Gender + Name */
.gender-cards { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.gender-card {
  appearance: none; background: rgba(15,22,8,0.55); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); color: var(--ink); padding: 18px 28px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 8px; min-width: 140px; transition: all 0.2s;
}
.gender-card .gico { font-size: 32px; color: var(--ink-dim); }
.gender-card .glbl { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.gender-card:hover { border-color: var(--jade); }
.gender-card.active { background: rgba(74,222,128,0.12); border-color: var(--jade-bright); box-shadow: 0 0 0 1px var(--jade-bright), 0 0 30px rgba(74,222,128,0.2); }
.gender-card.active .gico { color: var(--jade-bright); }
.gender-card.locked { opacity: 0.4; cursor: not-allowed; border-color: rgba(255,255,255,0.1); position: relative; }
.gender-card.locked:hover { border-color: rgba(255,255,255,0.1); }
.gender-soon { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-dim); margin-top: 2px; }

.name-row { display: flex; gap: 8px; max-width: 420px; margin: 18px auto 0; }
.name-row .nfield {
  flex: 1; appearance: none; background: rgba(6,9,4,0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); color: var(--ink); padding: 14px 16px;
  font-family: 'Cinzel', serif; font-size: 16px; letter-spacing: 0.06em;
  outline: none; text-align: center; transition: all 0.2s;
}
.name-row .nfield:focus { border-color: var(--jade); background: rgba(15,22,8,0.85); box-shadow: 0 0 0 3px rgba(74,222,128,0.12); }
.name-row .nfield::placeholder { color: var(--ink-faint); font-style: italic; }
.dice-btn {
  appearance: none; background: rgba(15,22,8,0.7); border: 1px solid var(--line-strong);
  color: var(--gold-bright); padding: 0 18px; font-size: 22px;
  cursor: pointer; transition: all 0.2s;
}
.dice-btn:hover { border-color: var(--gold); background: rgba(15,22,8,0.9); transform: rotate(15deg); }

/* Step 4: Style grid */
.style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 700px; margin: 18px auto 0; }
.style-card {
  appearance: none; background: rgba(15,22,8,0.55); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); color: var(--ink); padding: 14px 10px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 6px; transition: all 0.2s;
}
.style-card .sico { font-size: 26px; }
.style-card .slbl { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
.style-card:hover { border-color: var(--jade); transform: translateY(-2px); }
.style-card.active { background: rgba(74,222,128,0.12); border-color: var(--jade-bright); box-shadow: 0 0 0 1px var(--jade-bright), 0 0 20px rgba(74,222,128,0.2); }

/* Step 5: Appearance */
.palette-block { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.palette-block .plbl { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); min-width: 90px; text-align: right; }
.swatch-row { display: flex; gap: 8px; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: all 0.2s; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-color: var(--jade-bright); box-shadow: 0 0 0 1px var(--moss-black), 0 0 0 3px var(--jade-bright), inset 0 0 0 1px rgba(0,0,0,0.4); }
.hair-row { display: flex; gap: 8px; justify-content: center; }
.hair-pick {
  width: 56px; height: 56px; background: rgba(15,22,8,0.6); border: 1px solid var(--line-strong);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; border-radius: 4px;
}
.hair-pick:hover { border-color: var(--jade); }
.hair-pick.active { border-color: var(--jade-bright); box-shadow: 0 0 0 1px var(--jade-bright), 0 0 16px rgba(74,222,128,0.2); }
.hair-pick svg { width: 70%; height: 70%; }
.appearance-panel { background: rgba(6,9,4,0.6); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); padding: 18px 24px; max-width: 540px; margin: 18px auto 0; }

/* Step 6: Summary (legacy — überschrieben durch neues Layout weiter unten) */
.summary-portrait { width: 320px; height: 480px; position: relative; }
.summary-data { display: flex; flex-direction: column; gap: 18px; }
.summary-name { font-family: 'Cinzel', serif; font-size: 42px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; margin: 0; text-shadow: 0 2px 0 #000, 0 0 30px rgba(0,0,0,0.7); }
.summary-name em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--jade-bright); display: block; font-size: 0.45em; letter-spacing: 0.1em; margin-top: 4px; }
.summary-traits { display: flex; flex-wrap: wrap; gap: 8px; }
.trait-chip {
  padding: 6px 14px; background: rgba(15,22,8,0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink); font-family: 'Cinzel', serif;
}
.trait-chip b { color: var(--jade-bright); font-weight: 600; margin-left: 8px; }
.stat-block { background: rgba(6,9,4,0.6); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); padding: 20px 24px; }
.stat-block h3 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--jade-bright); margin: 0 0 14px; }
.stat-line { display: grid; grid-template-columns: 100px 1fr 60px; gap: 12px; align-items: center; padding: 6px 0; }
.stat-line .lbl { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-dim); }
.stat-line .stat-bar { height: 6px; background: rgba(0,0,0,0.6); position: relative; }
.stat-line .stat-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--jade-glow), var(--jade-bright)); box-shadow: 0 0 8px rgba(74,222,128,0.4); }
.stat-line.hp  .stat-bar > span { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 8px rgba(248,113,113,0.4); }
.stat-line.atk .stat-bar > span { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 8px rgba(232,201,140,0.4); }
.stat-line.def .stat-bar > span { background: linear-gradient(90deg, #3b82f6, #93c5fd); box-shadow: 0 0 8px rgba(147,197,253,0.4); }
.stat-line.mag .stat-bar > span { background: linear-gradient(90deg, #a855f7, #d8b4fe); box-shadow: 0 0 8px rgba(216,180,254,0.4); }
.stat-line .v { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* Wizard footer */
.wiz-foot {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 40px 32px; gap: 16px;
}
.wiz-foot .center-hint { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.wiz-btn {
  appearance: none; background: rgba(15,22,8,0.6); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); color: var(--ink); padding: 12px 28px;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.25em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s; text-decoration: none;
  display: inline-block;
}
.wiz-btn:hover { border-color: var(--jade); color: var(--jade-bright); }
.wiz-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.wiz-btn.primary {
  background: linear-gradient(180deg, var(--jade-bright), var(--jade-glow));
  color: var(--moss-black); border-color: rgba(74,222,128,0.5); font-weight: 600;
  box-shadow: 0 0 0 1px rgba(74,222,128,0.4), 0 8px 24px rgba(74,222,128,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}
.wiz-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(74,222,128,0.5), 0 12px 32px rgba(74,222,128,0.35), inset 0 1px 0 rgba(255,255,255,0.5); color: var(--moss-black); }
.wiz-btn.huge { padding: 16px 40px; font-size: 14px; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wiz-stage { padding: 0 20px; }
  .wiz-char  { width: 240px; height: 360px; }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .summary   { grid-template-columns: 1fr; gap: 24px; }
  .summary-portrait { margin: 0 auto; }
  .login-float { position: static; width: 100%; margin: 80px auto 80px; max-width: 440px; }
  .ticker { padding: 12px 24px; }
}
@media (max-width: 600px) {
  .wiz-top { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .wiz-foot { padding: 16px; }
  .gender-cards { gap: 8px; }
  .gender-card { padding: 12px 16px; min-width: 100px; }
}

/* ─── Login-Float Innenstruktur ─────────────────────────────────────── */

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0;
}
.tab {
  flex: 1;
  background: rgba(6,9,4,0.5);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-dim);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(6,9,4,0.7);
}

.login-card {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 8px 14px 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-group:focus-within {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(74,222,128,0.12);
}
.field-group label {
  position: static;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  pointer-events: none;
}
.field-group input {
  appearance: none;
  width: 100%;
  background: transparent !important;
  border: none;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 0;
  outline: none;
}

.btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--btn-gradient, linear-gradient(90deg, #5dfd9b, #22c55e));
  border: none;
  color: #050a06;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 24px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0,255,136,0.2);
  transition: opacity 0.2s, transform 0.1s;
  box-sizing: border-box;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.forgot-link {
  color: var(--ink-faint);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s;
}
.forgot-link:hover { color: var(--ink-dim); }

.login-flash {
  background: rgba(220,38,38,0.15);
  border: 1px solid rgba(220,38,38,0.4);
  border-radius: 6px;
  color: var(--blood-bright);
  font-size: 13px;
  padding: 10px 14px;
}

.register-intro {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ─── Wizard Identity-Step ──────────────────────────────────────────── */

.wiz-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}
.name-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 420px;
  width: 100%;
}
.name-row label {
  display: none; /* shown via ::before on wrapper */
}
.name-row input[type="text"] {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  padding: 10px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.name-row input[type="text"]:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(74,222,128,0.12);
}
.random-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 18px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.random-btn:hover { background: rgba(255,255,255,0.12); color: var(--ink); }

/* ─── Wizard Info-Text ──────────────────────────────────────────────── */

.wiz-info-epitheton {
  color: var(--gold);
  font-size: 15px;
  margin: 0 0 8px;
}
.wiz-info.compact { max-width: 480px; margin: 16px auto 0; text-align: center; }

/* ─── Color Swatches ────────────────────────────────────────────────── */

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  text-decoration: none;
  display: block;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: var(--jade); transform: scale(1.1); }

/* ─── Style Pills (Hair Style etc.) ────────────────────────────────── */

.style-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.style-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 6px 16px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.style-pill:hover { background: rgba(255,255,255,0.1); color: var(--ink); }
.style-pill.active { background: rgba(74,222,128,0.15); border-color: var(--jade); color: var(--jade-bright); }

/* ─── Option Group ──────────────────────────────────────────────────── */

.option-group { margin-bottom: 16px; }
.option-group label {
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* ─── Summary (Zusammenfassung-Step) ───────────────────────────────── */

.summary-char { position: relative; width: 280px; height: 420px; flex-shrink: 0; filter: drop-shadow(0 8px 30px rgba(0,0,0,0.7)) drop-shadow(0 0 40px rgba(74,222,128,0.15)); }
.summary-info { display: flex; flex-direction: column; gap: 14px; }
.summary-sub  { color: var(--gold); font-size: 14px; margin: 0; }
.summary-stats {
  border-collapse: collapse;
  width: 100%;
  max-width: 260px;
}
.summary-stats th, .summary-stats td {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
}
.summary-stats th { color: var(--ink-dim); font-weight: 500; }
.summary-stats td { color: var(--jade-bright); font-weight: 600; }
.summary-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-label {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 12px;
  padding: 4px 12px;
}

/* ─── Appearance Panel ──────────────────────────────────────────────── */

.appearance-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  background: rgba(6,9,4,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  padding: 20px 24px;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 8px;
}
.wiz-char-preview {
  position: relative; width: 220px; height: 330px; flex-shrink: 0;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.7));
}
.appearance-options { display: flex; flex-direction: column; gap: 4px; }

/* ─── Wiz-Dot Progress ──────────────────────────────────────────────── */

.wiz-progress { display: flex; gap: 6px; align-items: center; }
.wiz-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  border: 1px solid var(--line-strong);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.wiz-dot.done { background: var(--jade); border-color: var(--jade-glow); }
.wiz-dot.active {
  background: var(--gold);
  border-color: var(--gold-bright);
  transform: scale(1.4);
  box-shadow: 0 0 6px rgba(201,163,104,0.5);
}

/* ─── Wizard: Neu-Layout (3-Step-Rebuild) ───────────────────────────── */

/* Step-Container — JS schaltet display:none / '' */
.wiz-step { width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px 0 24px; }

/* Name-Zeile oben in Step 1 */
.wiz-name-row {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 480px;
  margin: 0 auto 24px;
}
.wiz-name-row input[type="text"] {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  padding: 10px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}
.wiz-name-row input[type="text"]:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(74,222,128,0.12);
}

/* 2-Spalten-Hauptbereich */
.wiz-main-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
  width: 100%;
}

/* Linke Spalte: Portrait + Karussell-Pfeile + Info */
.wiz-portrait-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Rechte Spalte: Steuerelemente (Geschlecht, Aussehen, Kampfstil) */
.wiz-controls-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Varianten-Navigation (erscheint wenn Rasse mehrere Avatare hat) */
.wiz-variant-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
}
.wiz-variant-label {
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wiz-arrow.small {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

/* Abschnitts-Label ("Kampfkunst") */
.wiz-section-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--jade-bright);
  margin-bottom: -8px;
}

/* Stil-Beschreibungstext unter Stil-Karten */
.wiz-style-desc {
  font-size: 13px;
  color: var(--ink-dim);
  font-style: italic;
  line-height: 1.6;
  margin: 4px 0 0;
  min-height: 2.8em;
}

/* Stil-Karten-Grid (Step 2) */
.style-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Klassen-spezifische style-card Span-Klassen */
.style-card .style-icon { font-size: 24px; display: block; }
.style-card .style-name {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

/* Geschlechts-Karte: gender-icon */
.gender-card .gender-icon { font-size: 28px; line-height: 1; }

/* Zusammenfassung: 2-Spalten-Grid */
.summary {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

/* ─── Responsive: Wizard neu ────────────────────────────────────────── */
@media (max-width: 860px) {
  .wiz-main-row { grid-template-columns: 1fr; gap: 24px; }
  .wiz-portrait-col { max-width: 320px; margin: 0 auto; }
  .style-cards { grid-template-columns: repeat(2, 1fr); }
  .summary { grid-template-columns: 1fr; gap: 24px; }
  .summary-char { margin: 0 auto; }
}

/* ─── Info-Seite: Full-Height Layout + Hintergrundbild ─────────────── */

/* Vollbild-Hintergrund — Bild + Opacity werden von info.php injiziert */
.info-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Flex-Column damit Footer immer unten ist */
.info-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Hauptinhalt wächst, Footer bleibt unten */
.info-page main.town-grid {
  flex: 1;
}

.info-page #footer {
  margin-top: auto;
}

/* ─── Info-Topbar ────────────────────────────────────────────────────── */

.info-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(8,13,6,0.72) 0%, rgba(8,13,6,0.40) 100%);
  border-bottom: 1px solid rgba(160,200,120,0.08);
  backdrop-filter: blur(14px) saturate(1.2);
}
/* Hamburger: nur auf Mobile sichtbar */
.nav-hamburger { display: none; }

.info-topbar-left {
  display: flex;
  align-items: center;
}
.info-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.info-logo {
  height: 70px;
  width: auto;
  display: block;
}

/* Icon-Buttons rechts in der Topbar */
.info-icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  min-width: 52px;
  color: var(--ink-dim);
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-size: 20px;
  line-height: 1;
}
.info-icon-btn .btn-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  line-height: 1;
}
.info-icon-btn:hover {
  color: var(--jade-bright);
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.3);
}
/* Hilfe-Icon: Fragezeichen im Kreis */
.info-icon-btn .icon-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  line-height: 1;
}

/* Burgplatz-Chat */
.village-chat {
    margin-top: 20px;
}
.village-chat .chat-shell {
    max-width: 100%;
}

/* Burgplatz / Ortsbeschreibung */
.village-intro {
  padding: 14px 18px 12px;
  margin-bottom: 16px;
  background: rgba(8,12,8,0.55);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-dim);
  font-style: italic;
}

/* Optionaler Untertitel unter der Topbar */
.info-subtitle {
  background: rgba(15,22,8,0.6);
  border-bottom: 1px solid var(--line);
  padding: 6px 24px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-dim);
  text-align: center;
}

/* ─── Town Banner ───────────────────────────────────────────────────── */

/* .town-banner wird nicht mehr als eigenständiges Block-Element gerendert,
   der Titel ist jetzt in der Topbar zentriert. Klassen bleiben aber
   für eventuelle direkte Nutzung erhalten. */
.town-banner {
  background: linear-gradient(135deg, var(--moss-deep) 0%, rgba(15,22,8,0.95) 100%);
  border-bottom: 1px solid var(--line-strong);
  padding: 16px 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.info-topbar .town-banner-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.town-banner-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.town-banner-sub {
  color: var(--ink-dim);
  font-size: 13px;
  margin-top: 2px;
}

/* ─── Nav Column ────────────────────────────────────────────────────── */

a.nav {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 5px 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.nav:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.navhead {
  display: block;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px 4px;
  margin-top: 4px;
}
.navhelp {
  display: block;
  color: var(--ink-faint);
  font-size: 11px;
  font-style: italic;
  padding: 2px 12px;
}

/* ─── Footer ────────────────────────────────────────────────────────── */

#footer {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
  padding: 8px 24px;
  text-align: right;
}

/* ─── Flash Messages ────────────────────────────────────────────────── */

.flash-info {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 6px;
  color: var(--jade-bright);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.flash-error {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 6px;
  color: var(--blood-bright);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 10px 16px;
}

/* ─── Charakter-Reset Bestätigung ───────────────────────────────────── */

.reset-confirm {
  background: rgba(6, 9, 4, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  max-width: 540px;
  margin: 32px auto;
  padding: 32px 36px;
}
.reset-confirm h2 {
  color: var(--blood-bright);
  font-family: 'Cinzel', serif;
  font-size: 20px;
  margin: 0 0 16px;
}
.reset-confirm p {
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 12px;
}
.reset-warn {
  color: var(--jade-bright) !important;
  font-size: 13px;
}
.reset-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.btn-danger {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 22px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-danger:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink-dim);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }

/* ─── Wiz disabled button ───────────────────────────────────────────── */

.wiz-btn.disabled, .wiz-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.wiz-btn.primary {
  background: linear-gradient(135deg, var(--jade-glow), var(--emerald));
  color: #000;
  font-weight: 600;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   Landing Page Overhaul — Topbar, Hero-Content, Login-Panel
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Topbar ─────────────────────────────────────────────────────── */
.landing-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2%;
  height: 90px;
  background: linear-gradient(180deg, rgba(4,8,4,0.85) 0%, transparent 100%);
}
.topbar-brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.topbar-logo { height: 70px; width: auto; display: block; }
.topbar-glyph {
  width: 36px; height: 36px;
  border: 1px solid var(--jade);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--jade-bright);
  border-radius: 4px;
  flex-shrink: 0;
}
.topbar-name {
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.topbar-sub {
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: 1px;
}
.topbar-nav {
  display: flex; align-items: center; gap: 4px;
  background: rgba(15, 22, 8, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(4px);
}
.topbar-link {
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-dim);
  text-decoration: none;
  padding: 6px 16px; border-radius: 20px;
  transition: color 0.2s, background 0.2s;
}
.topbar-link:hover { color: var(--ink); }
.topbar-link.active {
  background: var(--jade-bright); color: var(--moss-black);
  font-weight: 600;
}
.topbar-stats {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.05em;
  background: rgba(15, 22, 8, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(4px);
}
.topbar-online { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); }
.online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jade-bright);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.topbar-sep { opacity: 0.3; }

/* ─── Hero Layout ────────────────────────────────────────────────── */
.hero-layout {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 80px 2%;
  gap: 40px;
  z-index: 5;
}

/* ─── Hero Content (links) ───────────────────────────────────────── */
.hero-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 28px;
  max-width: 620px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jade-bright);
  padding: 6px 14px;
  border: 1px solid var(--jade-bright);
  border-radius: 20px;
  background: rgba(74,222,128,0.06);
  width: fit-content;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade-bright);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-headline {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.05;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 40px rgba(0,0,0,0.8);
}
.hero-headline-em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  color: var(--jade);
  font-size: clamp(48px, 7vw, 90px);
}
.hero-desc {
  font-size: 15px; line-height: 1.7;
  color: rgba(232,239,226,0.65);
  max-width: 480px;
  margin: 0;
}
.hero-stats {
  display: flex; gap: 40px; align-items: flex-start;
  padding: 16px 28px;
  background: rgba(15, 22, 8, 0.5);
  border: none;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  width: fit-content;
  backdrop-filter: blur(8px);
}
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 28px; font-weight: 700;
  color: var(--jade-bright);
  letter-spacing: 0.02em;
}
.hero-stat.danger .hero-stat-val { color: #f87171; }
.hero-stat.gold .hero-stat-val { color: var(--gold); }
.hero-stat-label {
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.btn-outline {
  display: inline-flex; align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none;
  background: rgba(15, 22, 8, 0.6);
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-outline:hover {
  border-color: var(--jade-bright); color: var(--jade-bright);
  background: rgba(42, 58, 29, 0.8);
}

/* ─── Login Panel Header ─────────────────────────────────────────── */
.login-panel-header {
  text-align: center;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 4px;
}
.login-panel-eyebrow {
  font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 10px;
}
.login-welcome {
  font-family: 'Cinzel', serif;
  font-size: 22px; font-weight: 700;
  color: var(--ink); margin: 0 0 6px;
}
.login-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 13px;
  color: var(--ink-faint); margin: 0;
}

/* ─── JS-Tabs ────────────────────────────────────────────────────── */
.login-tabs {
  display: flex;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  margin-bottom: 20px;
}
.login-tab {
  flex: 1; cursor: pointer;
  font-size: 11px; font-weight: bold; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 12px 0; text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  user-select: none;
}
.login-tab:hover { color: var(--ink); }
.login-tab.active { color: var(--jade-bright); border-bottom-color: var(--jade-bright); }

/* ─── Public Page ───────────────────────────────────────────────── */
.public-main {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 20px 80px;
  z-index: 6;
}
.public-panel {
  width: 100%;
  max-width: 760px;
  background: rgba(10, 16, 6, 0.88);
  border: 1px solid transparent;
  backdrop-filter: blur(8px);
  position: relative;
}
.public-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    90deg,
    var(--moss)      0%,
    var(--jade-glow) 50%,
    var(--moss)      100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.public-panel.wide { max-width: 1000px; }
.public-panel-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line);
}
.public-panel-sub {
  color: var(--ink-dim);
  font-size: 13px;
  margin-top: 4px;
  font-style: italic;
}
.public-panel-body {
  padding: 24px 28px;
  line-height: 1.7;
  color: var(--ink);
}

/* ─── Register Page ─────────────────────────────────────────────── */
/* Outer public-panel unsichtbar wenn register-panel drin ist */
.public-panel:has(.register-panel) {
  max-width: 520px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.public-panel:has(.register-panel)::before { display: none; }
.public-panel:has(.register-panel) .public-panel-header { display: none; }
.public-panel:has(.register-panel) .public-panel-body { padding: 0; }

/* Register Panel — gleicher Stil wie .login-float */
.register-panel {
  position: relative;
  background: #0a0f0a;
  border: 1px solid transparent;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.register-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(90deg, var(--moss) 0%, var(--jade-glow) 50%, var(--moss) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.register-corner { position: absolute; width: 14px; height: 14px; opacity: 0.6; }
.register-corner.tl { top:12px; left:12px;   border-top:1px solid var(--jade-bright); border-left:1px solid var(--jade-bright); }
.register-corner.tr { top:12px; right:12px;  border-top:1px solid var(--jade-bright); border-right:1px solid var(--jade-bright); }
.register-corner.bl { bottom:12px; left:12px;  border-bottom:1px solid var(--jade-bright); border-left:1px solid var(--jade-bright); }
.register-corner.br { bottom:12px; right:12px; border-bottom:1px solid var(--jade-bright); border-right:1px solid var(--jade-bright); }

/* Fehler-Box */
.register-error {
  background: rgba(180, 30, 20, 0.1);
  border-left: 3px solid var(--blood);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--blood-bright, #f87171);
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* Erfolgs-Anzeige */
.register-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px 0;
}
.register-success p {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.success-icon {
  font-size: 52px;
  line-height: 1;
}

/* ─── Bestiary ──────────────────────────────────────────────────── */
.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.bestiary-card {
  border: 1px solid var(--line-strong);
  background: rgba(15, 22, 8, 0.6);
  display: flex;
  gap: 12px;
  padding: 12px;
}
.bestiary-name {
  font-family: 'Cinzel', serif;
  color: var(--jade-bright);
  font-size: 14px;
  margin-bottom: 2px;
}
.bestiary-level { color: var(--gold); font-size: 11px; margin-bottom: 6px; }
.bestiary-desc  { color: var(--ink-dim); font-size: 12px; line-height: 1.6; }

/* ─── Hall of Fame ──────────────────────────────────────────────── */
.hof-table { width: 100%; border-collapse: collapse; }
.hof-table th {
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 12px; text-align: left;
}
.hof-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.hof-rank  { font-size: 18px; width: 48px; }
.hof-name  { font-family: 'Cinzel', serif; color: var(--jade-bright); }
.hof-kills { color: var(--gold); font-weight: 600; }
.hof-empty { text-align: center; color: var(--ink-dim); padding: 32px; font-style: italic; }
.hof-table tbody tr:nth-child(1) { background: rgba(201, 163, 104, 0.08); }
.hof-table tbody tr:nth-child(2) { background: rgba(201, 163, 104, 0.05); }
.hof-table tbody tr:nth-child(3) { background: rgba(201, 163, 104, 0.03); }

/* ─── Lore / Reich ──────────────────────────────────────────────── */
.public-lore { line-height: 1.8; }
.public-lore b  { color: var(--jade-bright); }
.public-lore i  { color: var(--ink-dim); }

/* ─── Online-Avatare ─────────────────────────────────────────────── */
.online-avatars {
  display: flex; align-items: center; gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  margin-top: 8px;
  flex-wrap: wrap;
}
.online-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--moss), var(--moss-deep));
  border: 1px solid var(--jade);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 600;
  color: var(--jade-bright);
  flex-shrink: 0;
}
.online-more {
  font-size: 11px; color: var(--ink-faint); margin-left: 4px;
}

/* ─── Browser Autofill Fix ──────────────────────────────────────── */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 9999px rgba(6, 9, 4, 0.95) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--jade-bright);
  transition: background-color 99999s ease-in-out 0s;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea {
  background: rgba(6, 9, 4, 0.7) !important;
  color: var(--ink) !important;
  caret-color: var(--jade-bright);
  -webkit-text-fill-color: var(--ink);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus {
  background: rgba(10, 15, 8, 0.85) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  outline: none;
}

/* Override der globalen !important-Regel — muss danach stehen */
.field-group input,
.field-group input:focus {
  background: transparent !important;
}
.field-group input:-webkit-autofill,
.field-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 9999px rgba(255,255,255,0.06) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

/* ─── Charakterauswahl ──────────────────────────────────────────── */

.char-select-page {
    position: relative; z-index: 5;
    height: 100vh;
    display: flex; flex-direction: column;
}

.cs-head {
    flex-shrink: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px;
    height: 90px;
    background: linear-gradient(180deg, rgba(4,8,4,0.35) 0%, rgba(4,8,4,0.08) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(74,222,128,0.12);
    z-index: 10;
}
.cs-logo { height: 70px; width: auto; display: block; }
.cs-head-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    text-align: center; pointer-events: none;
}
.cs-head-eyebrow {
    font-family: 'Cinzel', serif; font-size: 11px;
    letter-spacing: 0.4em; color: var(--jade-bright);
    text-transform: uppercase; margin-bottom: 4px;
}
.cs-head-label {
    font-family: 'Cinzel', serif; font-size: 16px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.cs-head-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ink-faint);
    background: rgba(15,22,8,0.6);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 14px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.cs-head-meta b { color: var(--jade-bright); font-weight: 500; }
.cs-logout {
    background: none; border: none; color: var(--ink-faint);
    text-decoration: underline; cursor: pointer; font: inherit; padding: 0;
    font-size: 12px;
}
.cs-logout:hover { color: var(--gold); }

.cs-intro {
    flex-shrink: 0;
    text-align: center; padding: 10px 48px 6px;
    max-width: 820px; margin: 0 auto; width: 100%;
}
.cs-eyebrow {
    font-family: 'Cinzel', serif; font-size: 11px;
    letter-spacing: 0.4em; color: var(--jade-bright);
    margin-bottom: 10px; text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0,0,0,0.9);
}
.cs-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.1; font-weight: 500; color: var(--ink);
    margin: 0 0 4px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
}
.cs-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(14px, 1.5vw, 17px);
    font-style: italic; line-height: 1.5; color: var(--ink-dim);
    margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}

/* Carousel */
.cs-carousel-wrap {
    flex: 1; min-height: 0;
    display: flex; align-items: stretch;
    gap: 8px; padding: 8px 8px;
    position: relative;
}
.cs-carousel {
    flex: 1;
    overflow-x: clip;   /* clippt nur horizontal (für slide) */
    overflow-y: visible; /* erlaubt hover translateY nach oben */
    display: flex;
    align-items: center;
}
.cs-carousel-track {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 16px) / 4);
    align-items: stretch;
    gap: 16px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-arrow {
    appearance: none; flex-shrink: 0;
    align-self: stretch;
    width: 40px;
    background: linear-gradient(180deg, rgba(8,14,6,0.85) 0%, rgba(4,8,4,0.9) 100%);
    border: 1px solid rgba(74,222,128,0.2);
    color: rgba(74,222,128,0.5); font-size: 16px;
    cursor: pointer; transition: all 0.25s;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.cs-arrow::before,
.cs-arrow::after {
    content: '';
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(74,222,128,0.3), transparent);
}
.cs-arrow::before { top: 0; height: 30%; }
.cs-arrow::after  { bottom: 0; height: 30%; }
.cs-arrow:hover {
    background: linear-gradient(180deg, rgba(12,22,10,0.95) 0%, rgba(6,12,6,0.95) 100%);
    border-color: rgba(74,222,128,0.5);
    color: var(--jade-bright);
    box-shadow: inset 0 0 20px rgba(74,222,128,0.06), 0 0 12px rgba(74,222,128,0.1);
}
.cs-arrow:disabled { opacity: 0.15; cursor: default; }
.cs-arrow.hidden { visibility: hidden; }

.char-slot {
    position: relative;
    background: linear-gradient(180deg,
        rgba(20,32,16,0.88) 0%, rgba(10,18,8,0.92) 100%);
    border: 1px solid rgba(74,222,128,0.18);
    padding: 0 18px clamp(10px,1.2vh,16px);
    cursor: pointer;
    min-height: clamp(380px, 72vh, 680px);
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.char-slot::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%,
        rgba(74,222,128,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.char-slot:hover {
    transform: translateY(-3px);
    border-color: var(--jade-bright);
    box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(74,222,128,0.3);
}
.char-slot.favorite { border-color: rgba(232,201,140,0.35); }
.char-slot.favorite:hover { border-color: var(--gold-bright); }
.char-slot.fallen { opacity: 0.85; filter: saturate(0.5); }
.char-slot.fallen:hover { border-color: rgba(180,80,60,0.5); filter: saturate(0.6); }
.char-slot.admin {
    background: linear-gradient(180deg, rgba(40,30,8,0.9), rgba(20,15,4,0.95));
    border-color: rgba(201,163,104,0.35);
}
.char-slot.admin:hover { border-color: var(--gold-bright); }
.char-slot.admin .cs-level-badge { background: var(--gold); color: #1a0e00; }

.cs-overlay-badges {
    position: absolute; top: 0; right: 0;
    display: flex; flex-direction: row; z-index: 10;
}
.cs-favorite, .cs-admin-badge {
    font-family: 'Cinzel', serif; font-size: 9px;
    letter-spacing: 0.15em; padding: 5px 10px;
    font-weight: 600;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #1a0e00;
    white-space: nowrap;
}

.cs-fallen-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(120,20,20,0.3) 0%, rgba(10,5,5,0.65) 70%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; z-index: 6; padding: 16px;
    pointer-events: none;
}
.cs-fallen-glyph {
    font-size: 36px; color: #b85c4a;
    text-shadow: 0 0 20px rgba(180,80,60,0.6); margin-bottom: 8px;
}
.cs-fallen-text {
    font-family: 'Cinzel', serif; font-size: 12px;
    letter-spacing: 0.2em; color: #f3d7c0;
    text-transform: uppercase; margin-bottom: 4px;
}
.cs-fallen-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 12px; color: rgba(243,215,192,0.7);
}

.cs-portrait-frame {
    position: relative;
    width: calc(100% + 36px);
    margin: 0 -18px clamp(10px,1.2vh,14px);
    height: clamp(220px, 42vh, 380px);
    flex-shrink: 0;
    overflow: visible;
}
.cs-portrait-glow {
    position: absolute; inset: 0;
    opacity: 0.25; filter: blur(20px); border-radius: 0;
}
.cs-portrait {
    position: relative; width: 100%; height: 100%;
    border-radius: 0; overflow: hidden;
    background: #060c06;
    display: flex; align-items: flex-end; justify-content: center;
}
.cs-portrait::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(10,18,8,0.92));
    pointer-events: none;
}
.cs-portrait-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center bottom;
    mix-blend-mode: screen;
}
.cs-init {
    font-family: 'Cinzel', serif; font-size: 36px; font-weight: 600;
    color: var(--jade-bright); opacity: 0.5; z-index: 1; padding-bottom: 16px;
}
.cs-level-badge {
    position: absolute; bottom: 8px; left: 50%;
    transform: translateX(-50%);
    background: var(--jade-glow); color: var(--moss-black);
    font-family: 'Cinzel', serif; font-size: 9px;
    font-weight: 700; letter-spacing: 0.12em;
    padding: 3px 10px; white-space: nowrap; z-index: 2;
}

.cs-name {
    font-family: 'Cinzel', serif; font-size: clamp(14px, 1.4vw, 17px);
    color: var(--ink); text-align: center; margin-bottom: 2px;
}
.cs-class {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-faint); text-align: center; margin-bottom: 8px;
}
.cs-badges {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    margin-bottom: 8px;
}
.cs-badge {
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 7px;
    border: 1px solid rgba(74,222,128,0.25);
    background: rgba(10,18,8,0.6);
    color: var(--jade-bright); white-space: nowrap;
}
.cs-badge.b-dragon { border-color: rgba(201,163,104,0.4); color: var(--gold-bright); }
.cs-badge.b-hero   { border-color: rgba(180,80,60,0.35); color: #e8a0a0; }
.cs-badge.b-gold   { border-color: rgba(201,163,104,0.3); color: var(--gold); }

.cs-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cs-bar-head {
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.cs-bar-track { height: 3px; background: rgba(0,0,0,0.5); overflow: hidden; }
.cs-bar-track span { display: block; height: 100%; }
.cs-bar-track.hp span {
    background: linear-gradient(90deg, #dc2626, #f87171);
    box-shadow: 0 0 6px rgba(248,113,113,0.4);
}
.cs-bar-track.xp span {
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    box-shadow: 0 0 6px rgba(232,201,140,0.4);
}

.cs-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px;
    margin-bottom: 10px;
    padding: 8px 0; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.cs-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cs-stat .v { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; }
.cs-stat .v.gold  { color: var(--gold-bright); }
.cs-stat .v.green { color: var(--jade-bright); }
.cs-stat .v.blue  { color: #7ab8d4; }
.cs-stat .v.gem   { color: #c0a0e0; }
.cs-stat .l { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

.cs-delete {
    position: absolute; top: 8px; left: 10px;
    appearance: none; background: none; border: none;
    color: var(--ink-faint); font-size: 16px; cursor: pointer;
    padding: 2px 6px; transition: color 0.2s; z-index: 5;
}
.cs-delete:hover { color: var(--blood-bright); }

.cs-foot {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: auto; padding-top: 10px;
}
.cs-last { font-size: 10px; color: var(--ink-faint); }
.cs-foot-actions { display: flex; align-items: center; gap: 6px; }
.char-slot .cs-delete-btn {
    appearance: none;
    background: linear-gradient(180deg, #c0392b, #922b21) !important;
    border: none !important; color: #f5b7b1 !important;
    font-family: 'Cinzel', serif; font-size: 10px;
    font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 7px 13px; cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(180,30,20,.45);
}
.char-slot .cs-delete-btn:hover  { filter: brightness(1.2) !important; background: linear-gradient(180deg, #c0392b, #922b21) !important; }
.char-slot .cs-delete-btn:active { transform: translateY(1px); filter: brightness(0.9) !important; }
.cs-enter {
    appearance: none;
    background: linear-gradient(180deg, var(--jade-bright), var(--jade-glow));
    border: none; color: var(--moss-black);
    font-family: 'Cinzel', serif; font-size: 10px;
    font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 7px 16px; cursor: pointer; transition: opacity 0.2s;
}
.cs-enter:hover { opacity: 0.85; }

.new-slot {
    cursor: pointer; align-items: center; justify-content: center;
    text-align: center;
    background: rgba(10,18,8,0.5) !important;
    border-style: dashed !important;
    min-height: 200px;
}
.new-slot:hover { border-color: var(--jade) !important; transform: translateY(-3px); }
.cs-new-icon {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(74,222,128,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--jade-bright); margin-bottom: 12px;
    transition: transform 0.22s, border-color 0.22s;
}
.new-slot:hover .cs-new-icon { transform: rotate(90deg); border-color: var(--jade-bright); }
.cs-new-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.cs-new-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: var(--ink-dim); max-width: 200px; line-height: 1.5; margin-bottom: 16px; }
.cs-new-meta { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding: 5px 12px; background: rgba(10,18,8,0.6); border: 1px solid rgba(74,222,128,0.15); }

/* Premium-Slot */
.char-slot.premium-slot {
    border-color: rgba(201,163,104,0.25);
    background: linear-gradient(180deg,
        rgba(30,22,8,0.7) 0%, rgba(15,10,4,0.8) 100%);
    cursor: default;
    align-items: center; justify-content: center;
    text-align: center;
    opacity: 0.85;
}
.cs-premium-badge {
    position: absolute; top: 0; right: 0;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #1a0e00; font-family: 'Cinzel', serif;
    font-size: 9px; letter-spacing: 0.2em;
    padding: 5px 12px; font-weight: 600;
}
.cs-premium-icon {
    font-size: 36px; margin-bottom: 12px; opacity: 0.6;
}
.cs-premium-cost {
    display: flex; align-items: center; gap: 6px;
    margin-top: 16px; padding: 8px 16px;
    border: 1px solid rgba(201,163,104,0.3);
    background: rgba(10,8,4,0.5);
}
.cs-dp-icon   { color: var(--gold); font-size: 16px; }
.cs-dp-amount { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold-bright); font-weight: 600; }
.cs-dp-label  { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); }

.cs-foot-nav {
    flex-shrink: 0;
    display: flex; justify-content: center; align-items: center;
    gap: 14px; flex-wrap: wrap;
    padding: 8px 48px;
    border-top: 1px solid var(--line);
    background: rgba(6,9,4,0.5);
    font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-faint);
}
.cs-foot-nav .dot { color: rgba(74,222,128,0.3); }

.char-select-page .impressum-bar {
    position: fixed; bottom: 14px; right: 20px; z-index: 20;
}

@media (max-width: 720px) {
    .cs-head { padding: 14px 20px; flex-direction: column; gap: 8px; }
    .cs-intro { padding: 8px 20px 4px; }
    .cs-grid { padding: 16px 20px; }
    .cs-foot-nav { padding: 8px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════ *
 *  FEEDBACK LINK (alle Templates)
 * ═══════════════════════════════════════════════════════════════════ */

.feedback-link {
    font-size: 11px;
    color: var(--ink-faint);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color 0.2s;
    white-space: nowrap;
}
.feedback-link:hover { color: var(--jade); }

/* Landing + Public: Positionierung übernimmt .hero .impressum-bar */

/* Info + Interactive + Combat: im Footer-Bereich */
#footer .feedback-link,
.wiz-foot .feedback-link,
.page-footer .feedback-link {
    margin-left: 0;
}

/* Charselect: neben Impressum */
.char-select-page .feedback-link {
    position: fixed; bottom: 14px; right: 110px; z-index: 20;
}

/* ═══════════════════════════════════════════════════════════════════ *
 *  FEEDBACK PAGE
 * ═══════════════════════════════════════════════════════════════════ */

.fb-page {
    min-height: 100vh;
    background: var(--bg-deep);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px 80px;
}

.fb-wrap {
    width: 100%; max-width: 560px;
}

.fb-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 40px 40px 32px;
    position: relative;
}

.fb-head { margin-bottom: 28px; text-align: center; }

.fb-head-eyebrow {
    font-size: 10px; letter-spacing: 0.4em;
    text-transform: uppercase; color: var(--jade);
    margin-bottom: 8px;
}

.fb-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(18px, 3vw, 26px);
    color: var(--ink-strong);
    margin: 0 0 8px;
    letter-spacing: 0.05em;
}

.fb-sub { font-size: 13px; color: var(--ink-faint); margin: 0; }

.fb-from {
    color: var(--jade);
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

.fb-errors {
    background: rgba(220,50,50,0.08);
    border: 1px solid rgba(220,50,50,0.3);
    padding: 10px 14px;
    margin-bottom: 20px;
}
.fb-error-line { font-size: 12px; color: #e87070; margin: 2px 0; }

.fb-form { display: flex; flex-direction: column; gap: 18px; }

.fb-field { display: flex; flex-direction: column; gap: 6px; }

.fb-label {
    font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--ink-faint);
}

.fb-type-btns { display: flex; gap: 8px; }

.fb-type-btn {
    flex: 1; cursor: pointer;
}
.fb-type-btn input[type="radio"] { display: none; }
.fb-type-btn span {
    display: block; padding: 8px 0; text-align: center;
    border: 1px solid var(--line);
    font-size: 12px; letter-spacing: 0.1em;
    color: var(--ink-faint); background: var(--bg-deep);
    transition: all 0.15s;
}
.fb-type-btn input:checked + span {
    border-color: var(--jade);
    color: var(--jade-bright);
    background: rgba(74,222,128,0.06);
}
.fb-type-btn:hover span { border-color: var(--line-strong); color: var(--ink); }

.fb-input,
.fb-textarea {
    background: rgba(6,9,4,0.6);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: inherit; font-size: 14px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.15s;
    resize: vertical;
    width: 100%; box-sizing: border-box;
}
.fb-input:focus,
.fb-textarea:focus { border-color: var(--jade); }
.fb-input::placeholder,
.fb-textarea::placeholder { color: var(--ink-faint); }

.fb-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 16px; margin-top: 4px;
}

.fb-btn {
    appearance: none;
    background: linear-gradient(180deg, var(--jade), #16a34a);
    border: none; color: #051505;
    font-family: 'Cinzel', serif; font-size: 12px;
    letter-spacing: 0.12em; font-weight: 600;
    padding: 10px 24px; cursor: pointer;
    text-decoration: none; display: inline-block;
    transition: opacity 0.15s;
}
.fb-btn:hover { opacity: 0.85; }

.fb-cancel {
    font-size: 12px; color: var(--ink-faint);
    text-decoration: none; letter-spacing: 0.05em;
    transition: color 0.15s;
}
.fb-cancel:hover { color: var(--ink); }

/* Success state */
.fb-success-icon {
    font-size: 48px; color: var(--jade);
    text-align: center; margin-bottom: 16px;
    font-family: 'Cinzel', serif;
}

.fb-card > .impressum-bar {
    display: flex; justify-content: center;
    margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════════ *
 *  FEEDBACK MODAL  (<dialog> overlay — kein Seitennavigation nötig)
 * ═══════════════════════════════════════════════════════════════════ */

dialog.fb-modal {
    padding: 0;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    width: min(540px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}
dialog.fb-modal::backdrop {
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(3px);
}
.fb-modal-inner {
    padding: 32px 36px 28px;
    position: relative;
}
.fb-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; cursor: pointer;
    color: var(--ink-faint); font-size: 20px; line-height: 1;
    padding: 4px 8px;
    transition: color 0.15s;
}
.fb-modal-close:hover { color: var(--ink); }

.fb-modal-msg {
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
}
.fb-modal-ok {
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.3);
    color: var(--jade-bright);
    text-align: center; font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}
.fb-modal-err {
    background: rgba(220,50,50,0.08);
    border: 1px solid rgba(220,50,50,0.3);
    color: #e87070;
}
.fb-modal-err div { margin: 2px 0; }

/* ═══════════════════════════════════════════════════════════════════ *
 *  CHANGELOG MODAL
 * ═══════════════════════════════════════════════════════════════════ */
#changelog-modal {
    display: none;
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
}
#changelog-modal.open { display: flex; }
#changelog-modal .cl-box {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 28px 32px;
    width: min(560px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
#changelog-modal .cl-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none;
    color: var(--ink-faint); font-size: 20px;
    cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
#changelog-modal .cl-close:hover { color: var(--ink); }
#changelog-modal h2 {
    font-family: 'Cinzel', serif;
    font-size: 15px; letter-spacing: 0.15em;
    color: var(--jade-bright); margin: 0 0 18px;
    text-transform: uppercase;
}
#changelog-modal h3 {
    font-family: 'Cinzel', serif;
    font-size: 13px; color: var(--ink-dim);
    margin: 18px 0 6px; letter-spacing: 0.08em;
}
#changelog-modal h4 {
    font-size: 11px; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin: 12px 0 4px;
}
#changelog-modal ul {
    margin: 0 0 8px 16px; padding: 0;
}
#changelog-modal li {
    font-size: 12px; color: var(--ink-dim);
    line-height: 1.6; margin-bottom: 2px;
}
#changelog-modal hr {
    border: none; border-top: 1px solid var(--line);
    margin: 14px 0;
}
.game-version {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}
.game-version:hover { color: var(--jade); }

/* ── Patchnotes-Popup ─────────────────────────────────────────────────────── */
.pn-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity .3s;
    padding: 20px;
}
.pn-modal {
    position: relative;
    background: var(--panel, #0e1a14);
    border: 1px solid var(--jade, #3a7c56);
    max-width: 640px; width: 100%;
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
.pn-corner {
    position: absolute; width: 10px; height: 10px;
    border-color: var(--jade, #3a7c56); border-style: solid;
}
.pn-corner.tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.pn-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.pn-corner.bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.pn-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.pn-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.pn-eyebrow {
    display: block;
    font-size: .7rem; letter-spacing: .15em; color: var(--jade, #3a7c56);
    text-transform: uppercase; margin-bottom: 6px;
}
.pn-title {
    margin: 0; font-size: 1.3rem; color: var(--gold, #c9a227);
    font-weight: 700; letter-spacing: .03em;
}
.pn-body {
    padding: 20px 28px; overflow-y: auto; flex: 1;
    font-size: .88rem; line-height: 1.65;
    color: var(--text-muted, #b0b8b4);
}
.pn-body .pn-h2 {
    font-size: .95rem; color: var(--gold, #c9a227);
    margin: 18px 0 4px; font-weight: 700; letter-spacing: .05em;
}
.pn-body .pn-h3 {
    font-size: .82rem; color: var(--jade, #3a7c56);
    margin: 14px 0 4px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
}
.pn-body .pn-list {
    margin: 4px 0 8px 16px; padding: 0;
    list-style: none;
}
.pn-body .pn-list li {
    padding: 2px 0 2px 14px; position: relative;
}
.pn-body .pn-list li::before {
    content: '›'; position: absolute; left: 0;
    color: var(--jade, #3a7c56); font-weight: 700;
}
.pn-body code {
    font-family: monospace; font-size: .83em;
    background: rgba(255,255,255,.06); padding: 1px 4px;
    border-radius: 2px; color: var(--text, #d4ddd8);
}
.pn-footer {
    padding: 16px 28px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex; justify-content: flex-end;
    flex-shrink: 0;
}
.pn-close-btn { min-width: 200px; }

/* ── Generische Popups (Profil, Hilfe …) ──────────────────────────────── */
.popup-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
}
.popup-overlay[hidden] { display: none; }

.popup-box {
    background: var(--surface, #1a2520);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    width: min(540px, 92vw);
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

.popup-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 700; letter-spacing: .04em;
    font-size: .95rem; color: var(--accent, #7ecfa0);
}

.popup-close {
    background: none; border: none; cursor: pointer;
    color: var(--ink-dim, #7a9085); font-size: 1rem;
    padding: 2px 6px; border-radius: 4px;
    transition: color .15s;
}
.popup-close:hover { color: var(--text, #d4ddd8); }

.popup-body {
    padding: 20px; overflow-y: auto;
    flex: 1; font-size: .9rem; line-height: 1.6;
}

/* ── Einstellungs-Sektion im Profil-Popup ───────────────────────────────── */
.settings-section { display: flex; flex-direction: column; gap: 18px; }
.settings-title {
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold, #e8c98c); border-bottom: 1px solid rgba(232,201,140,.15);
  padding-bottom: 8px;
}
.settings-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.settings-label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 160px; }
.settings-label-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; color: var(--ink);
}
.settings-label-desc { font-size: 12px; color: var(--ink-faint); font-style: italic; }
.settings-toggle-wrap { display: flex; gap: 4px; flex-shrink: 0; }
.settings-opt {
  font-family: 'Cinzel', serif;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 3px; cursor: pointer;
  background: rgba(10,16,10,.60);
  border: 1px solid rgba(74,222,128,.20);
  color: var(--ink-faint);
  transition: all .14s ease;
}
.settings-opt.active {
  background: rgba(20,50,20,.80);
  border-color: rgba(74,222,128,.55);
  color: #aff4c4;
}
.settings-opt:hover:not(.active) {
  border-color: rgba(74,222,128,.38);
  color: var(--ink);
}
.settings-note {
  font-size: 12px; color: var(--ink-faint); font-style: italic; margin: 0;
}
.settings-msg { font-size: 12px; margin: 0; }
.settings-msg--ok  { color: #7ce87c; }
.settings-msg--err { color: #e87c7c; }

/* button in Topbar ohne Button-Optik */
.info-icon-btn[type="button"] {
    background: none; border: none; cursor: pointer;
    font: inherit;
}

/* ── Badnav ─────────────────────────────────────────────────────────────── */
.badnav-wrap {
    padding: 1.5rem 1rem;
    text-align: center;
}
.badnav-title {
    color: var(--jade);
    font-size: 1.1rem;
    margin-bottom: .5rem;
}
.badnav-msg {
    color: var(--text-muted);
    font-size: .9rem;
    margin-bottom: 1.2rem;
}
.badnav-back {
    font-weight: bold;
}

/* ── Dialog-System ─────────────────────────────────────────────────────── */

.dlg-wrap {
  max-width: 100%;
  margin: 0;
  padding: 4px 0 16px;
  font-family: 'Cormorant Garamond', serif;
  position: relative;
}
.dlg-controls {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; gap: 5px;
  z-index: 2;
}
.dlg-reset-icon,
.dlg-speed-icon {
  position: static;
  background: rgba(20,50,20,0.70);
  border: 1px solid rgba(74,222,128,0.45);
  border-radius: 4px;
  color: #aff4c4;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dlg-reset-icon { font-size: 12px; }
.dlg-speed-icon {
  font-size: 12px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.dlg-reset-icon:hover,
.dlg-speed-icon:hover {
  background: rgba(40,90,36,0.90);
  border-color: var(--jade, #4ade80);
  color: #fff;
}

.dlg-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  position: relative;
}
.dlg-panel::before { display: none; }
.dlg-location { display: none; }
/* Heldenausweis eingebettet im Dialog-Widget (wizard op=ausweis) */
.dlg-panel .id-card {
  width: min(260px, 82%);
  margin: .75rem auto .5rem;
}
.dlg-location-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: dlg-pulse 2s ease-in-out infinite;
}
.dlg-location-name {
  font-family: 'Bangers', cursive;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dlg-stage {
  min-height: 160px;
  max-height: 420px;      /* ≈ 3 Zeilen à ~130px + Luft */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 8px;
  position: relative;
  scroll-behavior: smooth;
}
/* Scrollbar dezent halten */
.dlg-stage::-webkit-scrollbar { width: 4px; }
.dlg-stage::-webkit-scrollbar-track { background: transparent; }
.dlg-stage::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
/* Scene-Dialog-Overlay: dlg-wrap ist der Scroll-Container */
.scene-dlg-slot .dlg-wrap::-webkit-scrollbar { width: 5px; }
.scene-dlg-slot .dlg-wrap::-webkit-scrollbar-track { background: rgba(6,9,4,0.6); border-radius: 3px; }
.scene-dlg-slot .dlg-wrap::-webkit-scrollbar-thumb { background: rgba(74,222,128,0.45); border-radius: 3px; }
.scene-dlg-slot .dlg-wrap::-webkit-scrollbar-thumb:hover { background: rgba(74,222,128,0.70); }
.dlg-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}
.dlg-row.player-row { flex-direction: row-reverse; }
.dlg-avatar {
  width: 92px; height: 116px;
  border-radius: 4px;
  border: 2px solid var(--line);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0a0f0a;
  box-shadow: none;
}
.dlg-avatar--player {
  background: #050a0f;
  box-shadow: none;
}
/* Doppel-NPC (z.B. Avara & Sevra) — breiteres Bild, goldener Rahmen */
.dlg-avatar--dual {
  width: 148px;
  border-color: #b07cc0;
  box-shadow: 0 0 8px rgba(176,124,192,0.25);
}
.dlg-avatar img { width:100%; height:100%; object-fit:cover; }
.av-wrap { display:flex; flex-direction:column; align-items:center; }
.dlg-avname {
  font-family: 'Bangers', cursive;
  font-size: 11px; letter-spacing: 2px;
  text-align: center; margin-top: 4px;
  text-transform: uppercase; color: var(--ink-dim);
}
.dlg-avname--player { color: var(--ink-dim); }
.dlg-row .bubble {
  position: relative;
  background: rgba(8,12,8,.88);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 12px 16px;
  max-width: 78%; min-height: 48px;
  box-shadow: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.dlg-row .bubble.shown { opacity:1; transform:none; }
.dlg-row .bubble.npc-bubble { border-color: var(--line-strong); }
.dlg-row .bubble.npc-bubble::before {
  content:''; position:absolute; left:-10px; bottom:36px;
  border:5px solid transparent; border-right-color:var(--line-strong);
}
.dlg-row .bubble.npc-bubble::after {
  content:''; position:absolute; left:-8px; bottom:37px;
  border:4px solid transparent; border-right-color:rgba(8,12,8,.88);
}
.dlg-row .bubble.player-bubble { background:rgba(5,10,20,.88); border-color:var(--line-strong); }
.dlg-row .bubble.player-bubble::before {
  content:''; position:absolute; right:-10px; bottom:36px;
  border:5px solid transparent; border-left-color:var(--line-strong);
}
.dlg-row .bubble.player-bubble::after {
  content:''; position:absolute; right:-8px; bottom:37px;
  border:4px solid transparent; border-left-color:rgba(5,10,20,.88);
}
.bubble-text {
  font-size:18px; color:var(--ink); line-height:1.5;
  font-style:italic; min-height:24px;
}
.bubble-speaker {
  font-family:'Bangers',cursive; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:5px; color:var(--gold);
}
.bubble-speaker.dlg-spk-player { color:var(--ink-dim); }
.emotion-tag {
  display:inline-block; font-family:'Bangers',cursive;
  font-size:12px; letter-spacing:1px; padding:2px 8px;
  border-radius:4px; border:1px solid; margin-bottom:6px;
  text-transform:uppercase;
}
.em-neutral { color:var(--ink-dim); border-color:var(--line-strong); background:rgba(255,255,255,.04); }
.em-stern   { color:#e05020;       border-color:#8b2a00;             background:rgba(139,42,0,.12); }
.em-warm    { color:#4ade80;       border-color:#2a5a00;             background:rgba(74,222,128,.08); }
.em-freudig { color:#7aa8e0;       border-color:#2a4a8b;             background:rgba(42,74,139,.12); }
.dlg-cursor {
  display:inline-block; width:2px; height:16px;
  background:var(--ink-dim); vertical-align:middle; margin-left:2px;
  animation:dlg-blink .7s infinite;
}
.dlg-divider { border:none; border-top:1px solid var(--line); margin:0; }
.dlg-choices { padding:10px 0 16px; }
.choices-label {
  font-family:'Bangers',cursive; font-size:11px; letter-spacing:2px;
  color:rgba(232,201,140,.6); text-transform:uppercase;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.choices-label::after { content:''; flex:1; height:1px; background:var(--line-strong); }
.choice-btn {
  display:flex; align-items:center; width:100%;
  background:rgba(8,12,8,.9); border:2px solid var(--line-strong);
  border-radius:8px; padding:10px 14px; margin-bottom:8px;
  color:var(--ink-dim); font-family:'Cormorant Garamond',serif;
  font-size:16px; font-style:italic; text-align:left;
  cursor:pointer; transition:all .15s ease;
  opacity:0; transform:translateX(-12px);
}
.choice-text { flex:1; }
.dlg-cost {
  margin-left:auto; padding-left:14px; flex-shrink:0;
  font-family:'Bangers',cursive; font-size:10px; letter-spacing:1px;
  color:#c0922a; font-style:normal; opacity:.75;
}
.choice-btn.visible { opacity:1; transform:none; }
.choice-btn::before { content:'▶'; font-size:10px; margin-right:10px; color:var(--ink-faint); font-style:normal; flex-shrink:0; }
.choice-btn:hover { background:rgba(74,222,128,.06); border-color:var(--jade); color:var(--ink); }
.choice-btn:hover::before { color:var(--jade); }
.choice-btn:active { transform:scale(.98); }
.choice-btn:disabled { opacity:.4; cursor:default; }
.dlg-sfx {
  font-family:'Bangers',cursive; font-size:22px;
  color:var(--gold); letter-spacing:2px; text-align:center;
  padding:8px 0 4px;
  animation:dlg-sfxpop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  transform:scale(0);
}
@keyframes dlg-pulse  { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes dlg-blink  { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes dlg-sfxpop { to{transform:scale(1)} }

/* ── Dialog-System: Eingabefeld (node.input) ─────────────────────────────── */

.dlg-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.dlg-input-wrap--visible { opacity: 1; transform: none; }

/* Zeile: Feld + Submit-Button nebeneinander */
.dlg-input-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.dlg-input-row:focus-within { border-color: var(--jade); }

.dlg-input-field {
  flex: 1;
  min-width: 80px;
  background: rgba(6,9,4,0.85);
  border: none;
  border-right: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  padding: 10px 14px;
  outline: none;
  -moz-appearance: textfield;
}
.dlg-input-field::-webkit-inner-spin-button,
.dlg-input-field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dlg-input-field::placeholder { color: var(--ink-faint); }

/* Submit-Button: sieht aus wie ein choice-btn, aber passend zur Zeile */
.dlg-input-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: rgba(8,12,8,.9);
  border: none;
  padding: 10px 18px;
  color: var(--ink-dim);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.dlg-input-btn::before {
  content: '▶';
  font-size: 10px;
  color: var(--ink-faint);
  font-style: normal;
  flex-shrink: 0;
  transition: color .15s ease;
}
.dlg-input-btn:hover {
  background: rgba(74,222,128,.08);
  color: var(--ink);
}
.dlg-input-btn:hover::before { color: var(--jade); }
.dlg-input-btn:active { background: rgba(74,222,128,.14); }
.dlg-input-btn:disabled { opacity: .4; cursor: default; }

/* Abbrechen-Button: eigene Zeile, schmaler */
.dlg-input-cancel {
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(8,12,8,.7);
  color: var(--ink-faint);
  font-size: 14px;
  padding: 7px 14px;
  width: 100%;
  justify-content: flex-start;
}
.dlg-input-cancel::before { content: '✕'; font-size: 10px; }
.dlg-input-cancel:hover { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.06); }
.dlg-input-cancel:hover::before { color: #f87171; }

.dlg-input-error {
  color: #f87171;
  font-size: 11px;
  padding: 2px 2px;
  min-height: 16px;
}

/* ── Schließfach-Panel ─────────────────────────────────────────────────── */
.sf-panel {
  background: rgba(6,9,4,0.85);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 24px;
}
.sf-panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.sf-title {
  font-family: 'Cinzel', serif; font-size: 14px;
  letter-spacing: 0.08em; color: var(--ink);
}
.sf-gems-display {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #7dd3fc;
}
.sf-bar {
  height: 4px; background: var(--line-strong); border-radius: 2px;
  overflow: hidden; margin-bottom: 16px;
}
.sf-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
  border-radius: 2px;
  transition: width .4s ease;
}
.sf-actions { display: flex; gap: 20px; flex-wrap: wrap; }
.sf-action-block { flex: 1; min-width: 160px; }
.sf-label {
  display: block; font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.sf-input-row { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.sf-input {
  flex: 1; min-width: 60px;
  background: rgba(6,9,4,0.7); border: none;
  color: var(--ink); font-family: 'Cormorant Garamond',serif;
  font-size: 15px; font-style: italic; padding: 8px 10px; outline: none;
  -moz-appearance: textfield;
}
.sf-input::-webkit-inner-spin-button,
.sf-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sf-btn {
  background: rgba(8,12,8,.9); border: none; border-left: 1px solid var(--line-strong);
  color: var(--ink-dim); font-family: 'Cormorant Garamond',serif;
  font-size: 14px; font-style: italic; padding: 8px 12px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sf-btn:hover { background: rgba(56,189,248,.08); color: #7dd3fc; }
.sf-btn:active { background: rgba(56,189,248,.15); }
.sf-hint {
  font-size: 11px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.sf-msg { margin-top: 10px; font-size: 13px; padding: 6px 0; }
.sf-msg--ok    { color: var(--jade-bright); }
.sf-msg--error { color: #f87171; }

/* ── Schließfach-Widget im Dialog-Bubble ───────────────────────────────── */
.sf-widget-bubble { padding: 0 !important; overflow: hidden; }
.sf-widget {
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
}
.sf-widget-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.sf-widget-title {
  font-family: 'Cinzel', serif; font-size: 13px;
  letter-spacing: 0.07em; color: var(--ink);
}
.sf-widget-gems { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #7dd3fc; }
.sf-widget-bar {
  height: 3px; background: var(--line-strong); border-radius: 2px;
  overflow: hidden; margin-bottom: 12px;
}
.sf-widget-bar > .sf-w-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
  border-radius: 2px; transition: width .4s ease;
}
.sf-widget-rows { display: flex; gap: 14px; flex-wrap: wrap; }
.sf-widget-row  { flex: 1; min-width: 140px; }
.sf-w-label {
  display: block; font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}
.sf-w-hint { font-size: 13px; color: var(--ink-dim); margin-top: 6px; line-height: 1.4; }
.sf-w-msg { font-size: 13px; margin-top: 10px; padding: 4px 0; }
.sf-w-msg--ok  { color: var(--jade-bright); }
.sf-w-msg--err { color: #f87171; }

/* ── Ruhmesliste-Widget im Dialog-Bubble ───────────────────────────────── */
.rl-widget { padding: 18px 20px; min-width: 320px; }
.rl-head {
  font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--jade-bright); margin-bottom: 14px;
}
.rl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rl-table thead th {
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); border-bottom: 1px solid rgba(232,239,226,.15);
  padding: 4px 8px 8px; text-align: left;
}
.rl-table th:last-child, .rl-table td:last-child { text-align: right; }
.rl-table tbody tr { border-bottom: 1px solid rgba(232,239,226,.07); }
.rl-table tbody tr:last-child { border-bottom: none; }
.rl-table td { padding: 8px 8px; color: var(--ink); }
.rl-rank { color: var(--ink-dim); font-size: 14px; width: 36px; }
.rl-name { font-weight: 500; font-size: 15px; }
.rl-lv   { color: var(--ink-dim); font-size: 14px; width: 36px; }
.rl-bp   { color: var(--jade-bright); font-size: 15px; font-weight: 600; }
.rl-self td { color: var(--jade-bright) !important; }
.rl-sep  td { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 4px; border: none; letter-spacing: .2em; }
.rl-empty   { color: var(--ink-faint); font-style: italic; font-size: 14px; padding: 16px 8px; }

/* ── Formular-Grundklassen (Buttons + Inputs) ──────────────────────────── */
.btn-evo {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(159,173,120,.15);
  border: 1px solid var(--jade-bright, #9fad78);
  border-radius: 5px;
  color: var(--jade-bright, #9fad78);
  font-size: 0.9em;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.btn-evo:hover {
  background: rgba(159,173,120,.28);
  color: #c8d9a8;
  text-decoration: none;
}
.btn-evo--sm  { padding: 4px 10px; font-size: 0.82em; }
.btn-evo--danger {
  border-color: #f87171;
  color: #f87171;
  background: rgba(248,113,113,.08);
}
.btn-evo--danger:hover { background: rgba(248,113,113,.22); color: #fca5a5; }

.input-evo {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border, rgba(255,255,255,.15));
  border-radius: 4px;
  color: var(--ink);
  padding: 5px 9px;
  font-size: 0.9em;
  outline: none;
  transition: border-color .15s;
}
.input-evo:focus { border-color: var(--jade-bright, #9fad78); }

/* ── Haussystem ────────────────────────────────────────────────────────── */
.house-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.house-room-link {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 5px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92em;
  background: rgba(255,255,255,.03);
  transition: border-color .15s, background .15s;
}
.house-room-link:hover {
  border-color: var(--jade-bright, #9fad78);
  background: rgba(159,173,120,.07);
  color: var(--jade-bright, #9fad78);
  text-decoration: none;
}
.house-room-locked {
  color: var(--ink-faint);
  cursor: default;
  opacity: .55;
}
.house-room-locked:hover {
  border-color: var(--border, rgba(255,255,255,.12));
  background: rgba(255,255,255,.03);
  color: var(--ink-faint);
}

/* ── Meilenstein-Overlay (Fullscreen Scene) ─────────────────────────────────── */
#milestone-overlay {
  display: none; /* toggled to flex via JS — resets CSS animations automatically */
  position: fixed;
  inset: 0;
  z-index: 9990;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at center,
      rgba(20,8,0,.18),
      rgba(0,0,0,.96) 80%);
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #f3d9a2;
}

/* ── Rising ember particles ─────────────────────────────────────────────────── */
.ms-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.ms-particles span {
  position: absolute;
  width: 4px; height: 4px;
  background: #ffcc73;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffb347, 0 0 24px rgba(255,160,50,.55);
  opacity: 0;
  animation: ms-float-up linear infinite;
}
.ms-particles span:nth-child(1) { left:  8%; bottom:  -6%; animation-duration: 11s; animation-delay: 0.0s; }
.ms-particles span:nth-child(2) { left: 22%; bottom:  -4%; animation-duration:  8s; animation-delay: 1.2s; }
.ms-particles span:nth-child(3) { left: 38%; bottom: -12%; animation-duration: 10s; animation-delay: 0.6s; }
.ms-particles span:nth-child(4) { left: 51%; bottom:  -8%; animation-duration: 12s; animation-delay: 2.1s; }
.ms-particles span:nth-child(5) { left: 64%; bottom: -15%; animation-duration:  9s; animation-delay: 0.3s; }
.ms-particles span:nth-child(6) { left: 78%; bottom:  -4%; animation-duration: 13s; animation-delay: 1.6s; }
.ms-particles span:nth-child(7) { left: 90%; bottom: -10%; animation-duration: 10s; animation-delay: 2.8s; }
.ms-particles span:nth-child(8) { left: 32%; bottom:  -2%; animation-duration: 14s; animation-delay: 3.4s; width: 3px; height: 3px; }
.ms-particles span:nth-child(9) { left: 70%; bottom:  -6%; animation-duration: 11s; animation-delay: 4.1s; width: 3px; height: 3px; }

/* ── Header block (upper ~1/3) ──────────────────────────────────────────────── */
.ms-header {
  flex: 0 0 32vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  position: relative;
  z-index: 3;
}

.ms-kicker {
  font-family: 'IM Fell English SC', 'Cinzel', serif;
  font-size: clamp(11px, 1.3vh, 18px);
  letter-spacing: .55em;
  text-transform: uppercase;
  color: #c9a76a;
  text-shadow: 0 0 14px rgba(255,200,100,.4);
  opacity: 0;
  animation: ms-fade-up 1.5s ease forwards 1s;
}
.ms-kicker::before,
.ms-kicker::after {
  content: '❖';
  margin: 0 .9em;
  color: #a9863a;
  font-size: .7em;
  letter-spacing: 0;
}

.ms-main-title {
  margin-top: 1.4vh;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(28px, 6.2vh, 84px);
  line-height: .98;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f4d18f;
  text-shadow:
    0 0 14px rgba(255,220,120,.55),
    0 0 36px rgba(255,180,50,.30),
    0 0 90px rgba(255,140,0,.18);
  opacity: 0;
  transform: scale(.92);
  animation: ms-title-reveal 2s cubic-bezier(.2,.7,.2,1) forwards 1.7s;
}

.ms-header-divider {
  width: clamp(160px, 22vw, 320px);
  height: 2px;
  margin: 2vh auto 1.6vh;
  background: linear-gradient(to right, transparent, #d8b16b, transparent);
  opacity: 0;
  animation: ms-fade-in 2s ease forwards 2.5s;
}

#ms-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 2.1vh, 26px);
  line-height: 1.4;
  color: #d8bf8d;
  max-width: 820px;
  opacity: 0;
  animation: ms-fade-up 2s ease forwards 3.0s;
}

/* ── Stage block (lower ~2/3 — parchment or plain card) ────────────────────── */
.ms-stage {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 7vh;
  position: relative;
  min-height: 0;
}

/* ── Parchment certificate ──────────────────────────────────────────────────── */
.ms-parchment {
  position: relative;
  height: min(62vh, calc(86vw * 1448 / 1086));
  aspect-ratio: 1086 / 1448;
  /* background-image wird dynamisch per JS gesetzt (artworkPath aus milestone_definitions) */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.7));
  opacity: 0;
  transform: scale(1.08);
  animation: ms-parchment-appear 2.5s cubic-bezier(.2,.7,.2,1) forwards 3.6s;
}

.ms-magic-light {
  position: absolute;
  left: 50%; top: 50%;
  width: 62%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255,220,140,.35),
      rgba(255,180,80,.08) 45%,
      transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  animation:
    ms-fade-in    2.5s ease              forwards 4.4s,
    ms-pulse-light 4.5s ease-in-out infinite      6.5s;
}

/* 8-row grid overlaid on the parchment artwork */
#ms-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 25% 3% 14% 3% 22% 1% 18% 14%;
  padding: 0 20%;
  text-align: center;
  color: #5a3a1a;
  opacity: 0;
  animation: ms-fade-in 1.6s ease forwards 4.6s;
}

.ms-pg-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Titel über dem Siegel (row 1) */
.ms-urk-header-row {
  justify-content: flex-end;
  padding-bottom: .8vh;
  gap: .3vh;
}

/* Urkunde body (row 5) */
.ms-urkunde { gap: 1vh; overflow: hidden; }

.ms-urk-label {
  font-family: 'IM Fell English SC', serif;
  font-size: clamp(10px, 1.05vh, 16px);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #7a4a1e;
}
.ms-urk-title {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: clamp(12px, 2.0vh, 28px);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2a1808;
  max-width: 100%;
  overflow-wrap: break-word;
  text-shadow:
    0 1px 0 rgba(255,240,200,.6),
    0 0 16px rgba(255,200,110,.5),
    0 0 32px rgba(255,160,50,.3);
}
.ms-urk-rule {
  width: 55%;
  height: 1px;
  margin: .4vh 0;
  background: linear-gradient(to right,
      transparent, #8a5a25 20%, #c8973b 50%, #8a5a25 80%, transparent);
  opacity: .7;
}
.ms-urk-flavor {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(12px, 1.7vh, 22px);
  line-height: 1.4;
  color: #4a2c10;
  max-width: 100%;
  overflow-wrap: break-word;
}
.ms-urk-flavor strong {
  font-weight: 600;
  font-style: normal;
  color: #2a1808;
}

/* Banner ribbon (row 7) */
.ms-banner-row { transform: translateY(-.4vh); }
.ms-banner-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(13px, 2.1vh, 28px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3a2410;
  text-shadow: 0 1px 0 rgba(255,235,180,.5);
}
.ms-banner-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(10px, 1.2vh, 16px);
  color: #5a3a1a;
  margin-top: .2vh;
  letter-spacing: .04em;
}
.ms-banner-titles {
  font-family: 'IM Fell English SC', serif;
  font-size: clamp(9px, 1.0vh, 14px);
  color: #7a4a1e;
  letter-spacing: .2em;
  margin-top: .3vh;
  opacity: .85;
}

/* Signatures row (row 7) */
.ms-signatures-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5vh;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.ms-sig-names {
  display: flex;
  gap: 4vw;
  justify-content: center;
}
.ms-sig-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(12px, 1.7vh, 21px);
  color: #1a2a4a;
  letter-spacing: .03em;
  border-top: 1px solid rgba(20,40,80,.4);
  padding-top: .4vh;
  text-shadow: 0 1px 2px rgba(180,200,255,.3);
  min-width: 30%;
  text-align: center;
}

/* ── Plain card (non-parchment milestones) ──────────────────────────────────── */
.ms-plain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3vh 8vw;
  opacity: 0;
  animation: ms-fade-up 2s ease forwards 2.8s;
}

.ms-icon {
  font-size: clamp(52px, 9vh, 96px);
  line-height: 1;
  margin-bottom: 2vh;
  display: block;
  filter: drop-shadow(0 0 18px rgba(201,163,104,.6));
  animation: ms-icon-pulse 2.5s ease-in-out infinite 3.5s;
}

.ms-subtitle {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: clamp(12px, 1.6vh, 20px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #c9a76a;
  opacity: .9;
}

/* ── Continue hint ──────────────────────────────────────────────────────────── */
.ms-continue {
  position: absolute;
  bottom: 2vh;
  width: 100%;
  text-align: center;
  color: #c7a875;
  font-family: 'IM Fell English SC', serif;
  font-size: .95rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,0,0,.6);
  opacity: 0;
  animation:
    ms-fade-in   2s ease          forwards 6.0s,
    ms-pulse-text 2s ease infinite          7.2s;
  pointer-events: none;
  z-index: 4;
}

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes ms-parchment-appear {
  from { transform: scale(1.08); opacity: 0; filter: blur(10px) drop-shadow(0 24px 50px rgba(0,0,0,.7)); }
  to   { transform: scale(1);    opacity: 1; filter: blur(0)     drop-shadow(0 24px 50px rgba(0,0,0,.7)); }
}
@keyframes ms-title-reveal {
  to { opacity: 1; transform: scale(1); }
}
@keyframes ms-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ms-fade-in {
  to { opacity: 1; }
}
@keyframes ms-pulse-light {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: .85; }
  50%     { transform: translate(-50%,-50%) scale(1.07); opacity: 1;   }
}
@keyframes ms-float-up {
  0%   { transform: translateY(0)       scale(0);   opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110vh)  scale(1.4); opacity: 0; }
}
@keyframes ms-pulse-text {
  0%,100% { opacity: .4; }
  50%     { opacity: 1; }
}
@keyframes ms-icon-pulse {
  0%,100% { filter: drop-shadow(0 0 12px rgba(201,163,104,.45)); transform: scale(1); }
  50%     { filter: drop-shadow(0 0 28px rgba(201,163,104,.8));  transform: scale(1.06); }
}

@media (max-width: 720px) {
  .ms-header { flex-basis: 28vh; padding: 0 4vw; }
  #ms-desc   { max-width: 96%; }
}

/* Rucksack-Badge (item_added) */
.info-icon-btn .item-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  background: var(--jade-bright, #9fad78);
  border-radius: 50%;
  border: 1px solid var(--bg, #111);
  animation: badge-pulse 1.8s ease-in-out infinite;
}
.info-icon-btn { position: relative; }
@keyframes badge-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.3); }
}

/* Neue Item-Karte im Inventar */
.iv-D-card.iv-new {
  border-color: var(--jade-bright, #9fad78);
  box-shadow: 0 0 0 1px var(--jade-bright, #9fad78), inset 0 0 12px rgba(159,173,120,.1);
}
.iv-D-card.iv-new::after {
  content: 'NEU';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--jade-bright, #9fad78);
  opacity: .85;
}

/* Angelegtes Item — grüner Rahmen + kleines E-Badge */
.iv-D-card[data-equipped="1"] {
  border-color: rgba(74,222,128,.55);
  box-shadow: 0 0 0 1px rgba(74,222,128,.25), inset 0 0 14px rgba(74,222,128,.06);
}
.iv-D-card[data-equipped="1"]::before {
  content: 'E';
  position: absolute;
  top: 4px; right: 6px;
  font-family: 'Cinzel', serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: .06em;
  color: #7ec87e;
  opacity: .9;
}

/* Ausrüstungs-Unterfilter-Leiste */
.iv-subfilter {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 18px 6px;
  border-bottom: 1px solid var(--inv-line);
  background: rgba(0,0,0,.15);
}
.iv-subcat {
  padding: 2px 9px;
  font-family: 'Cormorant SC', serif; font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--inv-ink-faint);
  background: transparent;
  border: 1px solid var(--inv-line);
  border-radius: 3px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.iv-subcat:hover  { color: var(--inv-ink); border-color: var(--inv-line-strong); }
.iv-subcat.active {
  color: var(--inv-gold-bright);
  border-color: var(--inv-gold);
  background: rgba(201,163,104,.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   Inventar / Rucksack — Redesign (Variant D)
   Fonts: Cinzel · Cormorant Garamond · Cormorant SC · Inter
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CSS-Variablen (scoped, kein Konflikt mit Game-Palette) ─────────────── */
:root {
  --inv-bg:         #0a0f06;
  --inv-bg-elev:    #0e160a;
  --inv-bg-card:    #131c0e;
  --inv-bg-slot:    #0a1106;
  --inv-line:       rgba(232,239,226,.10);
  --inv-line-strong:rgba(232,239,226,.20);
  --inv-ink:        #e8efe2;
  --inv-ink-dim:    #9aa896;
  --inv-ink-faint:  #5d6b59;
  --inv-gold:       #c9a368;
  --inv-gold-bright:#e8c98c;
  --inv-jade:       #4ade80;
  --inv-jade-bright:#86efac;
  --rar-common:     #9aa896;
  --rar-uncommon:   #4ade80;
  --rar-rare:       #5aa6ff;
  --rar-epic:       #c084fc;
  --rar-legendary:  #e8c98c;
  --rar-quest:      #ff6b6b;
}

/* ── Overlay-Anpassung für Inventar-Popup ───────────────────────────────── */
#popup-inventar {
  padding: 12px;
  overflow: auto;
  z-index: 910;
}

/* ── Basis-Fenster ──────────────────────────────────────────────────────── */
.iv-window {
  position: relative;
  background: linear-gradient(180deg,rgba(14,22,10,.99) 0%,rgba(8,12,5,.995) 100%);
  border: 1px solid var(--inv-line-strong);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 80px -10px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.04);
  color: var(--inv-ink);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  flex-shrink: 0;
}
.iv-window::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent 0%,var(--inv-gold) 20%,var(--inv-gold-bright) 50%,var(--inv-gold) 80%,transparent 100%);
  opacity: .5;
}

/* ── Ecken-Ornamente ────────────────────────────────────────────────────── */
.iv-corner {
  position: absolute; width: 18px; height: 18px;
  pointer-events: none; opacity: .65; color: var(--inv-gold);
}
.iv-corner.tl { top: 6px; left: 6px; }
.iv-corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.iv-corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.iv-corner.br { bottom: 6px; right: 6px; transform: scale(-1,-1); }

/* ── Titelzeile ─────────────────────────────────────────────────────────── */
.iv-titlebar {
  grid-row: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 12px;
  border-bottom: 1px solid var(--inv-line);
  background: linear-gradient(180deg,rgba(201,163,104,.06) 0%,transparent 100%);
}
.iv-title {
  display: flex; align-items: baseline; gap: 12px;
  font-family: 'Cinzel', serif;
  letter-spacing: .24em; font-weight: 600;
  color: var(--inv-gold-bright); font-size: 14px; text-transform: uppercase;
}
.iv-title-glyph { font-size: 20px; color: var(--inv-jade-bright); letter-spacing: 0; }
.iv-title small {
  font-family: 'Cormorant SC', serif;
  font-size: 11px; letter-spacing: .22em;
  color: var(--inv-ink-faint); text-transform: uppercase;
}
.iv-titlebar-tools { display: flex; align-items: center; gap: 10px; }

.iv-capacity {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cormorant SC', serif;
  letter-spacing: .16em; font-size: 11px; color: var(--inv-ink-faint);
}
.iv-capacity b {
  color: var(--inv-ink); font-family: 'Inter', sans-serif;
  letter-spacing: 0; font-weight: 600;
}

.iv-iconbtn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--inv-line);
  border-radius: 3px; color: var(--inv-ink-dim); cursor: pointer; transition: all .15s;
}
.iv-iconbtn:hover { color: var(--inv-gold-bright); border-color: var(--inv-gold); }

.iv-close {
  background: transparent; border: 1px solid var(--inv-line);
  color: var(--inv-ink-dim); width: 28px; height: 28px;
  border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .15s;
}
.iv-close:hover { color: var(--rar-quest); border-color: var(--rar-quest); }

.iv-search {
  background: var(--inv-bg-slot); border: 1px solid var(--inv-line);
  border-radius: 3px; padding: 6px 10px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: var(--inv-ink-dim); font-size: 13px; width: 180px;
}
.iv-search:focus { outline: none; border-color: var(--inv-jade); color: var(--inv-ink); }

/* ── Kategorie-Sidebar (shared A + D) ────────────────────────────────────── */
.iv-cat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
  font-family: 'Cormorant SC', serif; letter-spacing: .18em;
  font-size: 12px; color: var(--inv-ink-dim);
  border-left: 2px solid transparent; transition: all .15s;
  text-transform: uppercase; user-select: none;
}
.iv-cat:hover  { color: var(--inv-ink); background: rgba(74,222,128,.04); }
.iv-cat.active { color: var(--inv-gold-bright); border-left-color: var(--inv-gold);
  background: linear-gradient(90deg,rgba(201,163,104,.10),transparent); }
.iv-cat-glyph {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 13px; color: var(--inv-jade);
  border: 1px solid var(--inv-line-strong); border-radius: 3px;
  background: var(--inv-bg-slot); flex: 0 0 auto;
}
.iv-cat.active .iv-cat-glyph { color: var(--inv-gold-bright); border-color: var(--inv-gold); background: rgba(201,163,104,.06); }
.iv-cat-label { flex: 1; }
.iv-cat-count {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0; color: var(--inv-ink-faint);
  background: var(--inv-bg-slot); padding: 2px 6px;
  border-radius: 8px; min-width: 18px; text-align: center;
}
.iv-cat.active .iv-cat-count { color: var(--inv-gold-bright); background: rgba(201,163,104,.15); }
.iv-cat-section {
  padding: 14px 18px 6px;
  font-family: 'Cormorant SC', serif; letter-spacing: .22em;
  font-size: 10px; color: var(--inv-ink-faint); text-transform: uppercase;
}

/* ── Variant D — Layout ──────────────────────────────────────────────────── */
.iv-D {
  width: min(1240px, 96vw);
  height: min(760px, 90vh);
  display: grid; grid-template-rows: auto 1fr auto;
}
.iv-D-body {
  display: grid; grid-template-columns: 210px 1fr 320px; min-height: 0;
}

/* Quest- und Profil-Panel belegen dieselbe Grid-Zeile wie iv-D-body (Zeile 2 = 1fr).
   Ohne diese Regel werden sie als extra Zeilen 3/4 eingeschoben und verschieben
   die Fußzeile — das erzeugt das "Spring"-Problem beim Tab-Wechsel. */
.iv-quest-panel,
.iv-profil-panel {
  grid-row: 2;
  min-height: 0;
}
/* Quest-Panel: 3-Spalten-Layout identisch zu iv-D-body */
.iv-quest-panel {
  overflow: hidden;
  grid-template-columns: 210px 1fr 320px;
}

/* D — linke Kategorie-Spalte */
.iv-D-cats {
  border-right: 1px solid var(--inv-line); padding: 14px 0;
  background: linear-gradient(180deg,rgba(0,0,0,.3),transparent);
  overflow-y: auto; min-height: 0;
}

/* D — mittlere Karten-Spalte */
.iv-D-center { display: flex; flex-direction: column; min-height: 0; }
.iv-D-center-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 16px 22px 12px; gap: 14px;
  border-bottom: 1px solid var(--inv-line);
}
.iv-D-center-head h3 {
  margin: 0; font-family: 'Cinzel', serif;
  font-size: 16px; letter-spacing: .18em;
  color: var(--inv-gold-bright); font-weight: 600;
}
.iv-D-center-head p {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: var(--inv-ink-faint); line-height: 1.4;
}
.iv-D-filters { display: flex; gap: 6px; flex-shrink: 0; }
.iv-D-chip {
  padding: 5px 11px; border: 1px solid var(--inv-line);
  border-radius: 99px; font-family: 'Cormorant SC', serif;
  font-size: 10px; letter-spacing: .18em; color: var(--inv-ink-dim);
  background: transparent; cursor: pointer; text-transform: uppercase; transition: all .15s;
}
.iv-D-chip:hover { color: var(--inv-ink); border-color: var(--inv-line-strong); }
.iv-D-chip.active { color: var(--inv-gold-bright); border-color: var(--inv-gold); background: rgba(201,163,104,.08); }

.iv-D-cards {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 18px;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
  align-content: start;
}

/* D — Karte */
.iv-D-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px; row-gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg,rgba(74,222,128,.02),rgba(0,0,0,.4));
  border: 1px solid var(--inv-line);
  border-radius: 4px; cursor: pointer; transition: all .15s; position: relative;
}
.iv-D-card:hover {
  border-color: var(--inv-line-strong);
  transform: translateY(-1px);
  background: linear-gradient(180deg,rgba(74,222,128,.05),rgba(0,0,0,.4));
}
.iv-D-card.iv-selected {
  border-color: var(--inv-gold);
  background: linear-gradient(180deg,rgba(201,163,104,.06),rgba(0,0,0,.4));
  box-shadow: 0 0 0 1px rgba(201,163,104,.4), 0 0 24px -8px rgba(201,163,104,.4);
}
.iv-D-card[data-rar="legendary"] { border-color: rgba(232,201,140,.4); box-shadow: 0 0 22px -10px rgba(232,201,140,.35); }
.iv-D-card[data-rar="epic"]      { border-color: rgba(192,132,252,.32); }
.iv-D-card[data-rar="rare"]      { border-color: rgba(90,166,255,.32); }
.iv-D-card[data-rar="uncommon"]  { border-color: rgba(74,222,128,.32); }
.iv-D-card[data-rar="quest"]     { border-color: rgba(255,107,107,.32); }
.iv-D-card.iv-hidden             { display: none; }

.iv-D-card-icon {
  grid-row: 1 / span 2;
  width: 52px; height: 52px; border-radius: 3px;
  background: var(--inv-bg-slot); border: 1px solid var(--inv-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 20px; color: var(--inv-ink);
}
.iv-D-card[data-rar="legendary"] .iv-D-card-icon { color: var(--rar-legendary); border-color: var(--rar-legendary); box-shadow: 0 0 14px -4px rgba(232,201,140,.5); }
.iv-D-card[data-rar="epic"]      .iv-D-card-icon { color: var(--rar-epic);      border-color: var(--rar-epic); }
.iv-D-card[data-rar="rare"]      .iv-D-card-icon { color: var(--rar-rare);      border-color: var(--rar-rare); }
.iv-D-card[data-rar="uncommon"]  .iv-D-card-icon { color: var(--rar-uncommon);  border-color: var(--rar-uncommon); }
.iv-D-card[data-rar="quest"]     .iv-D-card-icon { color: var(--rar-quest);     border-color: var(--rar-quest); }
/* Kachel-Icon mit Bild */
.iv-D-card-icon--img { padding: 0; overflow: hidden; }
.iv-D-card-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }

.iv-D-card-name {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; color: var(--inv-ink); line-height: 1.2;
  align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.iv-D-card.iv-selected .iv-D-card-name,
.iv-D-card[data-rar="legendary"] .iv-D-card-name { color: var(--rar-legendary); }
.iv-D-card[data-rar="epic"]      .iv-D-card-name { color: var(--rar-epic); }
.iv-D-card[data-rar="rare"]      .iv-D-card-name { color: var(--rar-rare); }
.iv-D-card[data-rar="uncommon"]  .iv-D-card-name { color: var(--rar-uncommon); }
.iv-D-card[data-rar="quest"]     .iv-D-card-name { color: var(--rar-quest); }

.iv-D-card-meta {
  font-family: 'Cormorant SC', serif; font-size: 9px;
  letter-spacing: .2em; color: var(--inv-ink-faint); text-transform: uppercase;
  align-self: start;
}
.iv-D-card-qty {
  grid-column: 3; grid-row: 1 / span 2;
  align-self: start; justify-self: end;
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600;
  color: var(--inv-gold-bright); letter-spacing: .02em;
  text-align: right; line-height: 1; margin-top: 4px;
}
.iv-D-card-qty span { color: var(--inv-ink-faint); font-size: 10px; }
.iv-D-card-flavor {
  grid-column: 1 / -1;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; color: var(--inv-ink-dim); line-height: 1.4;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--inv-line);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ── Stat-Chips direkt auf der Kachel ─────────────────────────────────── */
.iv-D-card-stats {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 5px;
}
.iv-stat-chip {
  font-family: 'Cormorant SC', serif;
  font-size: 9px; letter-spacing: .06em;
  padding: 1px 5px;
  border: 1px solid rgba(201,163,104,.3);
  border-radius: 2px;
  color: rgba(201,163,104,.75);
  background: rgba(201,163,104,.07);
}

/* D — rechte Detail-Spalte */
.iv-D-detail {
  border-left: 1px solid var(--inv-line);
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.25));
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.iv-D-detail-section {
  padding: 14px 16px; border-bottom: 1px solid var(--inv-line);
}
.iv-D-detail-section.iv-detail-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  border-bottom: 0; display: flex; flex-direction: column;
}
.iv-D-detail-h {
  font-family: 'Cormorant SC', serif; font-size: 10px;
  letter-spacing: .24em; color: var(--inv-ink-faint); text-transform: uppercase; margin-bottom: 10px;
}

/* ── Paper-Doll ───────────────────────────────────────────────────────────── */
.iv-pd {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--inv-line);
}
.iv-pd-body {
  display: flex; gap: 6px;
  align-items: center; justify-content: center;
  margin-bottom: 7px;
}
.iv-pd-slots { display: flex; flex-direction: column; gap: 4px; }

/* Avatar */
.iv-pd-avatar {
  background: #060c06;
  border: 1px solid var(--inv-line-strong);
  border-radius: 3px; overflow: hidden;
  width: 100px; height: 148px;
  position: relative; flex-shrink: 0;
}
.iv-pd-avatar-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  mix-blend-mode: screen;
}

/* Einzelner Ausrüstungsslot */
.iv-pd-slot {
  width: 58px; height: 50px;
  border: 1px solid var(--inv-line);
  border-radius: 3px;
  background: var(--inv-bg-slot);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  cursor: default; transition: border-color .15s;
}
.iv-pd-slot:hover { border-color: var(--inv-line-strong); }
.iv-pd-slot.occupied {
  border-color: rgba(201,163,104,.45);
  background: rgba(201,163,104,.06);
}
.iv-pd-slot-glyph {
  font-size: 17px; line-height: 1;
  color: var(--inv-ink-faint);
  pointer-events: none;
}
.iv-pd-slot-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 2px;
  pointer-events: none;
}
.iv-pd-slot.occupied .iv-pd-slot-glyph {
  color: var(--inv-gold-bright);
  font-size: 20px;
  font-family: 'Cormorant SC', serif;
  letter-spacing: .04em;
}
/* Label ausblenden wenn Slot belegt */
.iv-pd-slot.occupied .iv-pd-slot-lbl { display: none; }
/* Foot-Slots: etwas kleiner damit zwei Zeichen reinpassen */
.iv-pd-foot .iv-pd-slot.occupied .iv-pd-slot-glyph { font-size: 16px; }
.iv-pd-slot-lbl {
  font-family: 'Cormorant SC', serif;
  font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--inv-ink-faint);
  margin-top: 3px; white-space: nowrap; pointer-events: none;
}
/* Hover-Tooltip: Name des ausgerüsteten Items */
.iv-pd-slot-val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant SC', serif; font-size: 7px;
  color: var(--inv-gold-bright); padding: 2px;
  text-align: center; line-height: 1.15;
  background: rgba(6,12,6,.82);
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
.iv-pd-slot.occupied:hover .iv-pd-slot-val { opacity: 1; }

/* Untere Slots-Reihe (Waffe + Schild — breiter) */
.iv-pd-foot { display: flex; gap: 6px; justify-content: center; }
.iv-pd-foot .iv-pd-slot { width: 112px; height: 40px; flex-direction: row; gap: 6px; }
.iv-pd-foot .iv-pd-slot .iv-pd-slot-glyph { font-size: 16px; }
.iv-pd-foot .iv-pd-slot .iv-pd-slot-lbl { margin-top: 0; }

/* Drag & Drop */
.iv-D-card[draggable="true"] { cursor: grab; user-select: none; }
.iv-D-card[draggable="true"]:active { cursor: grabbing; }
.iv-D-card.iv-drag-source { opacity: 0.35; box-shadow: none !important; }

.iv-pd-slot.drag-target {
  border-color: rgba(201,163,104,.6);
  background: rgba(201,163,104,.12);
  animation: ivSlotPulse .9s ease-in-out infinite alternate;
}
.iv-pd-slot.drag-over {
  border-color: var(--inv-gold-bright) !important;
  background: rgba(201,163,104,.28) !important;
  box-shadow: inset 0 0 0 1px rgba(201,163,104,.5), 0 0 10px rgba(201,163,104,.3);
  animation: none;
}
.iv-pd-slot.drag-invalid {
  border-color: rgba(140,60,60,.3) !important;
  background: rgba(140,60,60,.03) !important;
  opacity: 0.45;
}
.iv-pd-avatar.drag-target {
  border-color: rgba(201,163,104,.55);
  box-shadow: 0 0 14px rgba(201,163,104,.25);
  animation: ivSlotPulse .9s ease-in-out infinite alternate;
}
.iv-pd-avatar.drag-over {
  border-color: var(--inv-gold-bright) !important;
  box-shadow: 0 0 18px rgba(201,163,104,.5) !important;
  animation: none;
}
@keyframes ivSlotPulse {
  from { box-shadow: 0 0 0 0 rgba(201,163,104,.15); }
  to   { box-shadow: 0 0 8px 2px rgba(201,163,104,.35); }
}

/* Kampfwerte-Panel unter dem Paper-Doll */
.iv-pds-section { padding: 10px 14px 8px; }
.iv-pds { display: flex; flex-direction: column; gap: 4px; }
.iv-pds-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
}
.iv-pds-ico {
  font-size: 11px; color: var(--inv-ink-faint);
  text-align: center; line-height: 1;
}
.iv-pds-lbl {
  font-family: 'Cormorant SC', serif;
  font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--inv-ink-dim);
}
.iv-pds-val {
  font-family: 'Cinzel', serif;
  font-size: 11px; color: var(--inv-ink);
  text-align: right; min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.iv-pds-delta {
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 700;
  text-align: right; min-width: 28px;
  font-variant-numeric: tabular-nums;
  transition: color .15s;
}
.iv-pds-delta.iv-pds-pos { color: #7ec87e; }
.iv-pds-delta.iv-pds-neg { color: #d97a7a; }

/* ── Set-Bonus-Panel im Charakter-Bereich (aktive Sets) ──────────────── */
.iv-set-panel {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(80,180,100,.25);
  border-bottom: none;
  background: rgba(80,180,100,.04);
}
.iv-set-panel .iv-D-detail-h {
  font-family: 'Cormorant SC', serif;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(100,220,130,.65); margin-bottom: 8px;
}
.iv-set-panel-row {
  margin-bottom: 6px;
}
.iv-set-panel-row:last-child { margin-bottom: 0; }
.iv-set-panel-name {
  font-family: 'Cormorant SC', serif;
  font-size: 11px; letter-spacing: .07em;
  color: rgba(100,220,130,.9);
  display: block; margin-bottom: 1px;
}
.iv-set-panel-bonus {
  font-size: 10px; font-style: italic;
  color: rgba(100,220,130,.65);
  padding-left: 14px;
}

/* Ausrüsten/Ausziehen-Button im Detail-Panel */
.iv-equip-btn {
  display: block; width: 100%; margin-top: 12px;
  padding: 9px 0;
  font-family: 'Cormorant SC', serif; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  color: #150e00;
  background: linear-gradient(180deg, #d4aa6a 0%, #a87940 100%);
  border: 1px solid #b8883a;
  border-radius: 3px; cursor: pointer;
  transition: filter .15s, opacity .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.4);
}
.iv-equip-btn:hover { filter: brightness(1.13); }
.iv-equip-btn.iv-unequip-btn {
  color: rgba(255,160,140,.75);
  background: rgba(160,55,55,.1);
  border-color: rgba(180,70,70,.35);
  box-shadow: none; font-weight: 400;
}
.iv-equip-btn.iv-unequip-btn:hover { background: rgba(160,55,55,.2); border-color: rgba(200,80,80,.55); }
.iv-equip-btn:disabled { opacity: .4; cursor: default; filter: none; }

/* ── Set-Bonus-Block im Detail-Panel ──────────────────────────────────── */
.iv-set-block {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(180,140,60,.07);
  border: 1px solid rgba(180,140,60,.22);
  border-radius: 3px;
}
.iv-set-block.iv-set-complete {
  background: rgba(80,180,100,.07);
  border-color: rgba(80,200,100,.25);
}
.iv-set-title {
  font-family: 'Cormorant SC', serif;
  font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,160,80,.75);
  margin-bottom: 3px;
}
.iv-set-complete .iv-set-title { color: rgba(100,220,130,.9); }
.iv-set-pieces {
  font-size: 10px;
  color: var(--inv-ink-dim);
  margin-bottom: 2px;
}
.iv-set-bonus-list {
  font-size: 10px; font-style: italic;
  color: rgba(200,160,80,.65);
}
.iv-set-complete .iv-set-bonus-list { color: rgba(100,220,130,.8); }

/* ── Set-Badge auf Kacheln ────────────────────────────────────────────── */
.iv-D-card-set {
  position: absolute; top: 4px; right: 6px;
  font-size: 9px;
  color: rgba(200,160,80,.5);
  pointer-events: none;
  line-height: 1;
}

/* ── Qualitätsstufen-Badge ────────────────────────────────────────────── */
.iv-quality-badge {
  font-family: 'Cormorant SC', serif;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 4px 1px; border-radius: 2px; margin-right: 2px;
  vertical-align: middle; display: inline-block; line-height: 1.5;
}
.iv-quality-badge.iq-fine       { color: var(--rar-uncommon); border: 1px solid rgba(74,222,128,.30); background: rgba(74,222,128,.06); }
.iv-quality-badge.iq-superior   { color: var(--rar-rare);     border: 1px solid rgba(90,166,255,.30); background: rgba(90,166,255,.06); }
.iv-quality-badge.iq-masterwork { color: var(--rar-epic);     border: 1px solid rgba(192,132,252,.30); background: rgba(192,132,252,.06); }
.iv-quality-badge.iq-legendary  { color: var(--rar-legendary); border: 1px solid rgba(232,201,140,.40); background: rgba(232,201,140,.06); box-shadow: 0 0 8px -3px rgba(232,201,140,.3); }

/* Qualitätslinie im Detail-Panel (unter Seltenheit-Zeile) */
.iv-quality-line {
  font-family: 'Cormorant SC', serif;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  margin-top: 2px; opacity: .85;
}
.iv-quality-line.iq-fine       { color: var(--rar-uncommon); }
.iv-quality-line.iq-superior   { color: var(--rar-rare); }
.iv-quality-line.iq-masterwork { color: var(--rar-epic); }
.iv-quality-line.iq-legendary  { color: var(--rar-legendary); }

/* Geboostete Stats (Qualitäts-Multiplikator aktiv) */
.iv-stat-chip.iv-stat-chip-boosted { color: var(--inv-jade-bright); }
.iv-stat.iv-stat-boosted b { color: var(--rar-uncommon); }

/* ── Bonus-Anzahl-Badge auf Kacheln ──────────────────────────────────── */
.iv-bonus-count {
  position: absolute; bottom: 4px; right: 6px;
  font-family: 'Cinzel', serif; font-size: 8px; font-weight: 700;
  line-height: 1; pointer-events: none; letter-spacing: .04em;
}
.iv-bonus-count.iq-fine       { color: var(--rar-uncommon); }
.iv-bonus-count.iq-superior   { color: var(--rar-rare); }
.iv-bonus-count.iq-masterwork { color: var(--rar-epic); }
.iv-bonus-count.iq-legendary  { color: var(--rar-legendary); }

/* ── Bonus-Effekte-Block im Detail-Panel ─────────────────────────────── */
.iv-bonus-block {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(74,222,128,.04);
  border: 1px solid rgba(74,222,128,.18);
  border-radius: 3px;
}
.iv-bonus-title {
  font-family: 'Cormorant SC', serif;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(74,222,128,.5); margin-bottom: 5px;
}
.iv-bonus-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 4px; padding: 2px 0;
}
.iv-bonus-icon {
  font-size: 10px; color: var(--inv-ink-dim);
  text-align: center; line-height: 1;
}
.iv-bonus-label {
  font-size: 10px; color: var(--inv-ink-dim); line-height: 1.3;
}
.iv-bonus-val {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  color: var(--inv-jade-bright); text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Item-Bild in Detail-Panel */
.iv-item-img-wrap {
  width: 100%; height: 90px;
  background: #060c06; border: 1px solid var(--inv-line-strong);
  border-radius: 3px; overflow: hidden; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
}
.iv-item-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; mix-blend-mode: screen;
}

/* Vergleichspanel (Ausrüstungs-Items) */
.iv-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 10px;
}
.iv-compare-col { display: flex; flex-direction: column; gap: 4px; }
.iv-compare-head {
  font-family: 'Cormorant SC', serif; font-size: 8px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--inv-ink-faint); margin-bottom: 4px;
}
.iv-compare-col.equipped .iv-compare-head { color: var(--inv-gold); }

/* D — Item-Detail-Inhalt */
.iv-item-head { display: flex; gap: 12px; align-items: flex-start; }
.iv-item-icon {
  width: 48px; height: 48px; border-radius: 3px;
  border: 1px solid var(--inv-line-strong); background: var(--inv-bg-slot);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 20px; flex: 0 0 auto;
}
.iv-item-icon[data-rar="legendary"] { border-color: var(--rar-legendary); color: var(--rar-legendary); box-shadow: 0 0 20px -5px rgba(232,201,140,.6); }
.iv-item-icon[data-rar="epic"]      { border-color: var(--rar-epic);      color: var(--rar-epic); }
.iv-item-icon[data-rar="rare"]      { border-color: var(--rar-rare);      color: var(--rar-rare); }
.iv-item-icon[data-rar="uncommon"]  { border-color: var(--rar-uncommon);  color: var(--rar-uncommon); }
.iv-item-icon[data-rar="quest"]     { border-color: var(--rar-quest);     color: var(--rar-quest); }
.iv-item-name {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  letter-spacing: .06em; color: var(--inv-gold-bright); line-height: 1.2;
}
.iv-item-rarity {
  font-family: 'Cormorant SC', serif; font-size: 10px;
  letter-spacing: .22em; margin-top: 4px; text-transform: uppercase;
}
.iv-item-rarity[data-rar="legendary"] { color: var(--rar-legendary); }
.iv-item-rarity[data-rar="epic"]      { color: var(--rar-epic); }
.iv-item-rarity[data-rar="rare"]      { color: var(--rar-rare); }
.iv-item-rarity[data-rar="uncommon"]  { color: var(--rar-uncommon); }
.iv-item-rarity[data-rar="common"]    { color: var(--rar-common); }
.iv-item-rarity[data-rar="quest"]     { color: var(--rar-quest); }
.iv-item-flavor {
  margin-top: 12px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: var(--inv-ink-dim); line-height: 1.5;
  border-left: 2px solid var(--inv-gold); padding-left: 10px;
}
.iv-item-stats { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.iv-stat {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--inv-ink-dim); padding: 4px 0; border-bottom: 1px dashed var(--inv-line);
}
.iv-stat b { color: var(--inv-jade-bright); font-weight: 600; font-family: 'Inter', sans-serif; }
.iv-stat.iv-stat-neg b { color: var(--rar-quest); }
.iv-item-desc {
  margin-top: 12px; font-size: 13px; color: var(--inv-ink-dim); line-height: 1.5;
}
.iv-item-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 14px; }
.iv-btn {
  flex: 1;
  background: linear-gradient(180deg,rgba(74,222,128,.08),rgba(74,222,128,.02));
  border: 1px solid rgba(74,222,128,.35); color: var(--inv-jade-bright);
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .16em;
  padding: 8px 10px; cursor: pointer; text-transform: uppercase; transition: all .15s;
}
.iv-btn:hover { background: rgba(74,222,128,.15); }
.iv-btn.ghost { background: transparent; border-color: var(--inv-line-strong); color: var(--inv-ink-dim); }
.iv-btn.ghost:hover { color: var(--inv-ink); border-color: var(--inv-ink-faint); }

/* D — Fußzeile */
.iv-D-foot {
  grid-row: 3; /* explizit fixieren — sonst rutscht Footer in Zeile 2 wenn Body hidden */
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px; border-top: 1px solid var(--inv-line);
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.4));
  font-family: 'Cormorant SC', serif; letter-spacing: .18em;
  font-size: 11px; color: var(--inv-ink-faint); text-transform: uppercase;
}
.iv-D-foot-money { display: flex; gap: 22px; }
.iv-D-foot-money span {
  display: inline-flex; gap: 6px; align-items: center;
  color: var(--inv-ink); font-family: 'Inter', sans-serif;
  letter-spacing: 0; font-size: 13px; font-weight: 500;
}
.iv-coin {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,#f6d68d,#b88842);
  border: 1px solid rgba(0,0,0,.4);
}
.iv-gem {
  display: inline-block; width: 10px; height: 10px;
  background: linear-gradient(135deg,#7dd3fc,#2563eb);
  transform: rotate(45deg); border: 1px solid rgba(0,0,0,.4);
}

/* ── Leer-Zustand ────────────────────────────────────────────────────────── */
.iv-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center; gap: 10px;
}
.iv-empty-glyph {
  font-size: 36px; opacity: .3; color: var(--inv-jade);
  font-family: 'Cinzel', serif;
}
.iv-empty-text {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 15px; color: var(--inv-ink-faint);
}

/* ── Kein-Auswahl Placeholder im Detail-Panel ────────────────────────────── */
.iv-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; padding: 24px; text-align: center; gap: 8px; opacity: .5;
}
.iv-detail-empty-glyph {
  font-size: 28px; color: var(--inv-jade); font-family: 'Cinzel', serif;
}
.iv-detail-empty-text {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: var(--inv-ink-faint);
}

/* ── Responsiv: schmale Bildschirme ──────────────────────────────────────── */
@media (max-width: 900px) {
  .iv-D { grid-template-columns: 1fr; }
  .iv-D-body { grid-template-columns: 1fr; }
  .iv-D-cats { display: none; }
  .iv-D-detail { display: none; }
  .iv-D-cards { grid-template-columns: 1fr; }
}

/* ── Inventar-Tabs (Gegenstände / Aufträge / Profil) ──────────────────────── */
.iv-tab {
  padding: 4px 14px;
  font-family: 'Cormorant SC', serif;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--inv-line); border-radius: 3px;
  background: transparent; color: var(--inv-ink-dim);
  cursor: pointer; transition: all .15s;
}
.iv-tab:hover { color: var(--inv-ink); border-color: var(--inv-line-strong); }
.iv-tab.iv-tab-active {
  color: var(--inv-gold-bright); border-color: var(--inv-gold);
  background: rgba(201,163,104,.08);
}

/* ── Einstellungen-Panel (ehemals Profil) ──────────────────────────────────── */
/* display:grid wird per JS gesetzt (ivSwitchTab → "grid") */
.iv-profil-panel {
  overflow: hidden;
  grid-template-columns: 210px 1fr;
}

/* Rechter Inhaltsbereich — scrollbar */
.iv-st-content { overflow-y: auto; min-height: 0; }

/* Sections: nur aktive sichtbar */
.iv-st-sec { display: none; padding: 18px 22px; }
.iv-st-sec.iv-st-active { display: block; }

/* Section-Überschrift */
.iv-st-head {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
  color: var(--inv-gold-bright); margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--inv-line);
  letter-spacing: .06em;
}

/* Charakter-Section: Avatar + Info nebeneinander */
.iv-stc-top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.iv-stc-avatar { width: 110px !important; height: 148px !important; flex: 0 0 110px; }
.iv-stc-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* Biografie-Section */
.iv-st-desc {
  font-size: 11px; color: var(--inv-ink-dim);
  margin: 0 0 10px; line-height: 1.55;
}
.iv-st-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 140px;
  background: var(--inv-bg-slot); border: 1px solid var(--inv-line);
  border-radius: 3px; padding: 10px 12px;
  color: var(--inv-ink); font-family: 'Cormorant Garamond', serif;
  font-size: 13px; line-height: 1.55;
}
.iv-st-textarea:focus { outline: none; border-color: var(--inv-gold); }
.iv-st-bio-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.iv-st-charcount {
  font-family: 'Cinzel', serif; font-size: 9px;
  color: var(--inv-ink-faint); letter-spacing: .08em;
}
.iv-st-save-btn {
  padding: 5px 16px; background: transparent;
  border: 1px solid var(--inv-gold); border-radius: 2px;
  color: var(--inv-gold-bright); font-family: 'Cormorant SC', serif;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .15s;
}
.iv-st-save-btn:hover { background: rgba(201,163,104,.15); }

/* Placeholder-Text für noch nicht implementierte Sections */
.iv-st-placeholder {
  font-size: 12px; color: var(--inv-ink-faint); font-style: italic;
  padding: 28px 0; text-align: center;
}
/* ── Quest-Karten & Detail ───────────────────────────────────────────────── */
.iv-q-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--inv-line);
  background: var(--inv-bg-slot);
  transition: border-color .15s, background .15s;
  flex-shrink: 0;
}
.iv-q-card:hover { border-color: var(--inv-line-strong); background: rgba(255,255,255,.03); }
.iv-q-card.iv-selected { border-color: var(--inv-gold); background: rgba(201,163,104,.08); }
.iv-q-card.completed { opacity: .55; }
.iv-q-card-ico { font-size: 15px; flex: 0 0 20px; text-align: center; color: var(--inv-ink-dim); }
.iv-q-card.iv-selected .iv-q-card-ico { color: var(--inv-gold-bright); }
.iv-q-card-body { flex: 1; min-width: 0; }
.iv-q-card-name {
  font-family: 'Cormorant SC', serif; font-size: 12px; color: var(--inv-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-q-card-meta { margin-top: 2px; }

/* Category badges */
.iv-q-badge {
  font-family: 'Cormorant SC', serif; font-size: 9px; letter-spacing: .07em;
  padding: 1px 5px; border-radius: 2px; border: 1px solid; text-transform: uppercase;
}
.iv-q-badge.story   { color: #c8922a; border-color: #c8922a; background: rgba(200,146,42,.10); }
.iv-q-badge.legend  { color: #a87fd8; border-color: #a87fd8; background: rgba(168,127,216,.10); }
.iv-q-badge.faction { color: #7ec87e; border-color: #7ec87e; background: rgba(126,200,126,.10); }
.iv-q-badge.side    { color: var(--inv-ink-dim); border-color: var(--inv-line-strong); background: rgba(255,255,255,.04); }
.iv-q-badge.daily   { color: #7baadb; border-color: #7baadb; background: rgba(123,170,219,.10); }

/* Status dots — on cards + in detail */
.iv-q-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 7px; display: inline-block;
}
.iv-q-dot.active    { background: var(--inv-gold-bright); box-shadow: 0 0 4px var(--inv-gold); }
.iv-q-dot.completed { background: var(--inv-ink-faint); }
.iv-q-dot.all       { background: var(--inv-line-strong); }

/* Quest detail panel */
.iv-q-detail-empty {
  font-size: 12px; color: var(--inv-ink-faint); padding: 24px 0;
  text-align: center; font-style: italic;
}
.iv-q-detail-title {
  font-family: 'Cinzel', serif; font-size: 13px; color: var(--inv-gold-bright);
  margin: 6px 0 5px; line-height: 1.35;
}
.iv-q-detail-desc {
  font-size: 11px; color: var(--inv-ink-dim); line-height: 1.55; margin-bottom: 8px;
}
.iv-q-detail-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--inv-ink-dim); margin-bottom: 6px;
}
.iv-q-detail-shead {
  font-family: 'Cormorant SC', serif; font-size: 10px; letter-spacing: .12em;
  color: var(--inv-ink-faint); text-transform: uppercase;
  padding: 8px 0 4px; border-top: 1px solid var(--inv-line); margin-top: 4px;
}
.iv-q-obj {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px; color: var(--inv-ink-dim); padding: 2px 0;
}
.iv-q-obj.met { color: var(--inv-ink); }
.iv-q-obj-ico { flex: 0 0 14px; text-align: center; font-size: 10px; }
.iv-q-obj.met .iv-q-obj-ico { color: #7ec87e; }
.iv-q-obj-label { flex: 1; }
.iv-q-obj-prog {
  font-family: 'Cinzel', serif; font-size: 10px;
  color: var(--inv-ink-faint); white-space: nowrap;
}
.iv-q-rewards {
  font-size: 11px; color: var(--inv-gold); padding: 4px 0; line-height: 1.5;
}
.iv-q-empty {
  font-size: 12px; color: var(--inv-ink-faint);
  padding: 32px 16px; text-align: center; font-style: italic;
}

/* Status-filter buttons in quest sidebar */
.iv-q-sf { padding-left: 20px; }

.iv-pf-body {
  display: grid; grid-template-columns: 160px 1fr 1fr;
  gap: 20px 28px; align-items: start;
}
.iv-pf-avatar-wrap {
  position: relative; width: 160px; height: 200px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(74,222,128,.08), transparent 70%),
    linear-gradient(180deg, rgba(20,32,14,.9), rgba(4,8,2,.95));
  border: 1px solid var(--inv-line-strong); border-radius: 4px; overflow: hidden;
}
.iv-pf-avatar-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; mix-blend-mode: screen;
}
.iv-pf-avatar-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .2em;
  color: var(--inv-gold-bright); text-align: center; text-transform: uppercase;
}
.iv-pf-col { display: flex; flex-direction: column; gap: 14px; }
.iv-pf-name {
  font-family: 'Cinzel', serif; font-size: 17px; font-weight: 600;
  color: var(--inv-gold-bright); letter-spacing: .06em;
}
.iv-pf-title-txt {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: var(--inv-ink-faint); margin-top: -10px;
}
.iv-pf-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.iv-pf-badge {
  padding: 3px 10px; border: 1px solid var(--inv-line); border-radius: 99px;
  font-family: 'Cormorant SC', serif; font-size: 10px; letter-spacing: .15em;
  color: var(--inv-ink-dim); text-transform: uppercase;
}
.iv-pf-badge.level  { border-color: rgba(232,201,140,.5); color: var(--inv-gold-bright); background: rgba(201,163,104,.1); }
.iv-pf-badge.race   { border-color: rgba(74,222,128,.35); color: var(--inv-jade-bright); }
.iv-pf-badge.class  { border-color: rgba(201,163,104,.35); color: var(--inv-gold); }
.iv-pf-section-head {
  font-family: 'Cormorant SC', serif; font-size: 9px; letter-spacing: .24em;
  color: var(--inv-ink-faint); text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid var(--inv-line);
}
.iv-pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.iv-pf-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--inv-bg-slot);
  border: 1px solid var(--inv-line); border-radius: 3px;
  font-family: 'Cormorant SC', serif; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--inv-ink-dim);
}
.iv-pf-stat b {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0; color: var(--inv-ink);
}
.iv-pf-stat.gold b  { color: var(--inv-gold-bright); }
.iv-pf-stat.turns b { color: var(--inv-jade-bright); }
.iv-pf-stat.hp b    { color: #c084fc; }
.iv-pf-stat.full    { grid-column: 1 / -1; }

/* ── Stat-Breakdown (Einstellungen → Charakter → Kampfwerte) ── */
.iv-sb-list { display: flex; flex-direction: column; gap: 6px; }
.iv-sb-group {
  background: var(--inv-bg-slot);
  border: 1px solid var(--inv-line);
  border-radius: 3px;
  overflow: hidden;
}
.iv-sb-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--inv-line);
  background: var(--inv-bg-card);
}
.iv-sb-ico  { font-size: 11px; color: var(--inv-ink-dim); width: 14px; text-align: center; }
.iv-sb-name { flex: 1; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-ink-dim); }
.iv-sb-total {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--inv-ink); letter-spacing: 0;
}
.iv-sb-hp-val { color: #c084fc; font-size: 13px; }
.iv-sb-rows { display: flex; flex-direction: column; }
.iv-sb-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 10px 3px 24px;
  font-size: 10px; letter-spacing: .06em; color: var(--inv-ink-dim);
  border-bottom: 1px solid rgba(232,239,226,.04);
}
.iv-sb-row:last-child { border-bottom: none; }
.iv-sb-row span:last-child {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--inv-ink);
}
.iv-sb-row.iv-sb-zero span:last-child { color: var(--inv-ink-faint); }
.iv-sb-row.iv-sb-pos  span:last-child { color: var(--inv-jade-bright); }
.iv-sb-row.iv-sb-neg  span:last-child { color: #f87171; }
.iv-sb-hp .iv-sb-head { border-bottom: none; }

.iv-pf-xp-wrap {
  grid-column: 1 / -1;
  padding: 8px 10px; background: var(--inv-bg-slot);
  border: 1px solid var(--inv-line); border-radius: 3px;
}
.iv-pf-xp-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Cormorant SC', serif; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--inv-ink-dim);
  margin-bottom: 6px;
}
.iv-pf-xp-head b {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0; color: var(--inv-ink);
}
.iv-pf-xp-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.iv-pf-xp-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--inv-jade), var(--inv-jade-bright));
}

/* ==========================================================================
   GameTime — Zeitsystem
   Tageszeit · Wetter · Mondphasen · Jahreszeiten
   ========================================================================== */

/* ── GameTime-Strip (unter Topbar) ───────────────────────────────────────── */
.gt-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 5px 20px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: var(--ink-dim, #888);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.gt-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gt-item-date {
  color: var(--ink, #ccc);
  font-size: 11px;
}
.gt-sep {
  color: rgba(255,255,255,0.18);
  font-size: 10px;
}
.gt-moon-label {
  display: none; /* Mondphasenname nur per Tooltip — Icon genug */
}

/* Tageszeit-Farben */
.gt-morgen { color: #c8a050; }
.gt-mittag { color: #e0c060; }
.gt-abend  { color: #c06030; }
.gt-nacht  { color: #7090c8; }

/* Wetter-Farben */
.gt-w-sonnig   { color: #e0b840; }
.gt-w-heiss    { color: #e07820; }
.gt-w-bewoelkt { color: #8898a8; }
.gt-w-regen    { color: #6090b8; }
.gt-w-sturm    { color: #5070a0; }
.gt-w-nebel    { color: #909898; }
.gt-w-schnee   { color: #a8c8e8; }

/* Mondphase: Vollmond etwas heller */
.gt-item-moon { font-size: 14px; }
body.gt-moon-4 .gt-item-moon { color: #e8e0b0; text-shadow: 0 0 8px rgba(240,230,160,0.6); }

/* ── Nacht: Gesamtatmosphäre ─────────────────────────────────────────────── */
body.gt-nacht {
  background-color: #080c1a; /* dunkler Hint wenn Hintergrund transparent */
}
body.gt-nacht .gt-strip {
  background: rgba(5,8,20,0.65);
  border-bottom-color: rgba(60,80,160,0.15);
}
body.gt-nacht .newday-panel,
body.gt-nacht .content-panel {
  background: rgba(5,8,20,0.55);
}

/* ── Morgen: leicht warme Tönung ─────────────────────────────────────────── */
body.gt-morgen .newday-panel,
body.gt-morgen .content-panel {
  background: rgba(20,12,4,0.55);
}

/* ── Mittag: leicht hellere Atmosphäre ───────────────────────────────────── */
body.gt-mittag {
  background-color: #0e1018; /* etwas heller als Nacht */
}
body.gt-mittag .newday-panel,
body.gt-mittag .content-panel {
  background: rgba(14,12,8,0.52);
}

/* ── Abend: warme Orangetöne ─────────────────────────────────────────────── */
body.gt-abend {
  background-color: #0f0b08;
}
body.gt-abend .newday-panel,
body.gt-abend .content-panel {
  background: rgba(22,12,5,0.52);
}

/* ── Wetter: Animationen ─────────────────────────────────────────────────── */

/* Regen — vertikale Striche im Hintergrund */
@keyframes gt-rain {
  0%   { background-position: 0 -100px; }
  100% { background-position: -20px 100vh; }
}
body.gt-regen .info-page::after,
body.gt-sturm .info-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    175deg,
    transparent,
    transparent 3px,
    rgba(120,160,220,0.06) 3px,
    rgba(120,160,220,0.06) 4px
  );
  background-size: 8px 120px;
  animation: gt-rain 0.8s linear infinite;
}
body.gt-sturm .info-page::after {
  background-image: repeating-linear-gradient(
    170deg,
    transparent,
    transparent 2px,
    rgba(100,130,210,0.09) 2px,
    rgba(100,130,210,0.09) 3px
  );
  background-size: 6px 90px;
  animation: gt-rain 0.4s linear infinite;
}

/* Schnee — unruhig fallende Flocken, 5 Ebenen, Zickzack-Drift */
@keyframes gt-snow {
  0%   { background-position:   0px  -60px,  33px -120px,  67px  -30px,  12px  -90px,  55px  -15px; }
  20%  { background-position:  18px   18vh,   8px   14vh,  85px   20vh,  -6px   16vh,  72px   22vh; }
  40%  { background-position:  -4px   38vh,  50px   34vh,  52px   40vh,  22px   36vh,  38px   42vh; }
  60%  { background-position:  22px   57vh,  24px   54vh,  74px   59vh,   2px   55vh,  62px   61vh; }
  80%  { background-position:   6px   78vh,  44px   75vh,  58px   80vh,  16px   76vh,  48px   82vh; }
  100% { background-position:  14px  110vh,  58px  110vh,  42px  110vh,  30px  110vh,  78px  110vh; }
}
body.gt-schnee .info-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(220,235,255,0.60) 2px,   transparent 2px),
    radial-gradient(circle, rgba(220,235,255,0.40) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(220,235,255,0.50) 1px,   transparent 1px),
    radial-gradient(circle, rgba(220,235,255,0.35) 2px,   transparent 2px),
    radial-gradient(circle, rgba(220,235,255,0.45) 1px,   transparent 1px);
  background-size: 130px 130px, 90px 90px, 70px 70px, 160px 160px, 55px 55px;
  animation: gt-snow 10s linear infinite;
}

/* Nebel — leichtes Pulsieren */
@keyframes gt-fog {
  0%, 100% { opacity: 0.18; }
  50%       { opacity: 0.30; }
}
body.gt-nebel .info-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(180,185,190,0.25) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 40%, rgba(180,185,190,0.20) 0%, transparent 55%);
  animation: gt-fog 4s ease-in-out infinite;
}

/* ── Responsive: Datum kürzen auf kleinen Screens ────────────────────────── */
@media (max-width: 800px) {
  .gt-item-date { display: none; }
  .gt-sep:nth-child(4),
  .gt-sep:nth-child(5) { display: none; }
}

/* ── Shop-Widget (dialog-embedded) ──────────────────────────────────────── */

.shop-widget {
  margin-top: 14px;
  border-top: 1px dashed rgba(74,222,128,0.20);
  padding-top: 14px;
}

/* Head: title + wallet row */
.sw-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sw-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--gold-bright, #f5d896);
  font-weight: 600;
  text-transform: uppercase;
}
.sw-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim, #b9a982);
  margin-top: 2px;
}
.sw-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold, #e8c98c);
  padding: 6px 12px;
  border: 1px solid rgba(232,201,140,0.30);
  background: rgba(40,28,8,0.40);
  border-radius: 2px;
}
.sw-wallet-val {
  color: var(--gold-bright, #f5d896);
  font-weight: 700;
}

/* Coin dot (shared by wallet + price) */
.sw-coin {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6d68d, #b88842);
  box-shadow: 0 0 5px rgba(232,201,140,0.5);
  flex-shrink: 0;
}

/* Loading / empty state */
.sw-loading, .sw-empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-faint, #8a7a5c);
  font-size: 14px;
  padding: 18px 0;
  text-align: center;
}

/* Tabs */
.sw-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
}
.sw-tab {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-dim, #b9a982);
  padding: 6px 12px 7px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.sw-tab:hover { color: var(--ink, #e9dcc0); }
.sw-tab.active {
  color: var(--jade, #4ade80);
  border-color: rgba(74,222,128,0.35);
  background: rgba(20,40,18,0.45);
}
.sw-tab-count {
  font-size: 10px;
  color: var(--ink-faint, #8a7a5c);
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  letter-spacing: 0.05em;
}
.sw-tab.active .sw-tab-count {
  color: var(--jade, #4ade80);
  background: rgba(74,222,128,0.10);
}

/* Card grid */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

/* Individual card */
.sw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(6,14,6,0.75);
  border: 1px solid rgba(74,222,128,0.18);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.sw-card:hover {
  border-color: rgba(74,222,128,0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 0 1px rgba(74,222,128,0.10);
}

/* Unaffordable */
.sw-card.broke {
  opacity: 0.32;
  filter: saturate(0.4);
  pointer-events: none;
}
.sw-card.broke::after {
  content: "ZU TEUER";
  position: absolute;
  top: 10px; right: 10px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #ff9090;
  background: rgba(40,8,8,0.85);
  border: 1px solid rgba(220,90,90,0.45);
  padding: 3px 7px;
  border-radius: 1px;
  z-index: 2;
}

/* Card image area */
.sw-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg,
      rgba(232,220,192,0.06) 0 8px,
      rgba(232,220,192,0.02) 8px 16px),
    linear-gradient(180deg, #1a1408, #0a0604);
  border-bottom: 1px solid rgba(74,222,128,0.12);
  overflow: hidden;
}

/* Rarity stripe at top of image */
.sw-rar-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #9aa896;
  opacity: 0.7;
}
.sw-card[data-rar="uncommon"]  .sw-rar-stripe { background: #4ade80; }
.sw-card[data-rar="rare"]      .sw-rar-stripe { background: #5aa6ff; }
.sw-card[data-rar="epic"]      .sw-rar-stripe { background: #c084fc; }
.sw-card[data-rar="legendary"] .sw-rar-stripe { background: #e8c98c; }

/* Level badge */
.sw-lvl-badge {
  position: absolute;
  top: 7px; left: 7px;
  font-family: 'Cinzel', serif;
  font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink);
  background: rgba(6,9,4,0.82);
  border: 1px solid var(--line-strong);
  padding: 2px 6px;
  pointer-events: none;
  z-index: 1;
}

/* Image placeholder */
.sw-card-img-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 10px; text-align: center;
}
.sw-ph-tag {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-faint, #8a7a5c);
  text-transform: uppercase;
}
.sw-ph-what {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-dim, #b9a982);
  text-transform: uppercase;
  border: 1px dashed rgba(232,220,192,0.30);
  padding: 4px 8px;
}

/* Card body */
.sw-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
}

/* Buy-Error */
.sw-buy-err {
  min-height: 16px;
  font-size: 11px;
  color: #ff9090;
  margin-top: 4px;
  text-align: right;
}
.sw-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--ink, #e9dcc0);
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.2;
}
.sw-card[data-rar="uncommon"]  .sw-name { color: #aff4c4; }
.sw-card[data-rar="rare"]      .sw-name { color: #b8d6ff; }
.sw-card[data-rar="epic"]      .sw-name { color: #dbc1ff; }
.sw-card[data-rar="legendary"] .sw-name { color: var(--gold-bright, #f5d896); }

.sw-flavor {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-dim, #b9a982);
  min-height: 3.6em;
  flex: 1 1 auto;
}

/* Stats pills */
.sw-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.sw-stat {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid rgba(232,220,192,0.14);
  color: var(--ink-dim, #b9a982);
  background: rgba(255,255,255,0.03);
}
.sw-stat-att { color: #f4a07c; border-color: rgba(244,160,124,0.25); }
.sw-stat-def { color: #7ccff4; border-color: rgba(124,207,244,0.25); }
.sw-stat-iq  { color: #c4a8e8; border-color: rgba(196,168,232,0.25); }
.sw-stat-hp  { color: #7ce87c; border-color: rgba(124,232,124,0.25); }

/* Card footer: price + buy button */
.sw-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(74,222,128,0.10);
  flex-shrink: 0;
}
.sw-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Cinzel', serif;
  color: var(--gold-bright, #f5d896);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.sw-price-num {
  white-space: nowrap;
}
.sw-price-unit {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold-dim, #b5965c);
  font-weight: 500;
}
.sw-buy-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #aff4c4;
  background: rgba(20,50,20,0.70);
  border: 1px solid rgba(74,222,128,0.50);
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: all 0.14s ease;
}
.sw-buy-btn::before { content: "\25b6\00a0"; font-size: 9px; opacity: 0.8; }
.sw-buy-btn:hover {
  background: rgba(40,90,36,0.90);
  color: #fff;
  border-color: var(--jade, #4ade80);
  box-shadow: 0 0 10px rgba(74,222,128,0.22);
}
.sw-buy-btn:active { transform: scale(0.97); }
.sw-buy-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Buy flash animation */
@keyframes sw-bought-flash {
  0%   { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.0); }
  25%  { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.7); background: rgba(20,50,20,0.65); }
  100% { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.0); }
}
.sw-card.sw-bought {
  animation: sw-bought-flash 0.9s ease forwards;
}

/* Inline error/success below card foot */
.sw-buy-err {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: #f47c7c;
  padding-top: 4px;
  display: none;
}
.sw-buy-ok { color: #7ce87c; }

/* Shop footer */
.sw-foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(74,222,128,0.18);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint, #8a7a5c);
}

/* Responsive */
@media (max-width: 720px) {
  .sw-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .sw-tab  { font-size: 10px; padding: 5px 9px; }
}

/* ── Arachnophobie-Platzhalter ────────────────────────────────────────────
   Ersetzte das Kreatur-Portrait wenn der Arachnophobie-Modus aktiv ist.
   Kein Bild nötig — rein CSS.
   Verwendung: <div class="arachno-ph"><div class="arachno-ph__blob"></div>
               <div class="arachno-ph__label">???</div></div>
────────────────────────────────────────────────────────────────────────── */
.arachno-ph {
  width: 100%; height: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* leichte grüne Hintergrund-Aura damit es sich ins Portrait-Frame einfügt */
  background: radial-gradient(ellipse at 50% 45%,
    rgba(50, 90, 48, 0.35) 0%,
    transparent 70%);
}

/* der Blob selbst */
.arachno-ph__blob {
  width: 62px; height: 62px;
  position: relative;
  flex-shrink: 0;
  background: radial-gradient(
    ellipse at 36% 28%,
    #b8daa8 0%,
    #52965a 45%,
    #2d6030 80%,
    #1a4020 100%
  );
  border-radius: 48% 52% 58% 42% / 42% 58% 44% 56%;
  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.60),
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    0 0 12px rgba(80, 180, 80, 0.10);
  animation: arachno-wobble 3.2s ease-in-out infinite;
}

/* × × Augen */
.arachno-ph__blob::before {
  content: '×\00a0\00a0\00a0×';   /* × + 3× NBSP + × */
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: #1a3818;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* ~ Mund */
.arachno-ph__blob::after {
  content: '∿';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #1a3818;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* kleines Fragezeichen-Ausrufer über dem Blob */
.arachno-ph__label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(140, 190, 120, 0.55);
  font-family: 'Cinzel', serif;
  user-select: none;
}

/* Wabbel-Animation — organisch, kein perfektes Loop */
@keyframes arachno-wobble {
  0%   { border-radius: 48% 52% 58% 42% / 42% 58% 44% 56%; transform: scaleY(1.00) scaleX(1.00); }
  15%  { border-radius: 52% 48% 50% 50% / 50% 50% 52% 48%; transform: scaleY(1.03) scaleX(0.97); }
  30%  { border-radius: 44% 56% 54% 46% / 56% 44% 48% 52%; transform: scaleY(0.97) scaleX(1.03); }
  50%  { border-radius: 56% 44% 46% 54% / 48% 52% 56% 44%; transform: scaleY(1.04) scaleX(0.96); }
  65%  { border-radius: 46% 54% 56% 44% / 54% 46% 44% 56%; transform: scaleY(0.98) scaleX(1.02); }
  80%  { border-radius: 52% 48% 44% 56% / 44% 56% 52% 48%; transform: scaleY(1.01) scaleX(0.99); }
  100% { border-radius: 48% 52% 58% 42% / 42% 58% 44% 56%; transform: scaleY(1.00) scaleX(1.00); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   KAMPFSYSTEM — Jade Skin  ·  Vollbild-Variante
   Seitentyp: combat  →  templates/layout/combat.php
   ══════════════════════════════════════════════════════════════════════════════ */

/* combat braucht overflow:hidden — gesetzt via body-Klasse 'combat-page' */
body.combat-page { overflow: hidden; }
body.combat-page .info-topbar { position: relative; z-index: 60; flex-shrink: 0; }

/* ── Screens (Intro / Battle / End als fixed-fullscreen Overlays) ── */
.combat-screen {
  position: fixed; inset: 0; display: none;
  flex-direction: column; z-index: 150;
  background: var(--bg-deep, #060904);
}
.combat-screen.active { display: flex; }

/* ── Battle-Layout ─────────────────────────────────────────────────── */
.combat-wrap {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  position: relative; z-index: 1;
}
/* Subtiles Hintergrundbild — identisches Muster wie .info-page::before.
   Gibt dem backdrop-filter der Topbar etwas Warmes zum Einblenden
   und lässt die Nav-Spalte genauso "durchscheinen" wie im info-template. */
.combat-wrap::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: url('assets/poi/wald_normal.png') center top / cover no-repeat;
  opacity: 0.18;
}
.battle-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* ── Nav-Sidebar — transparent wie info nav-col ────────────────────── */
.battle-nav {
  width: 200px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: transparent;
  border-right: 1px solid var(--line, rgba(134,239,172,0.10));
  padding: 8px 0 16px; overflow-y: auto; z-index: 20;
}
/* Navhead: identisch zu info-template */
.battle-nav .navhead {
  display: block;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px 4px;
  margin-top: 4px;
}
/* Standard-Links: identisch zu a.nav */
.battle-nav a.nav,
.battle-nav span.nav {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 4px 0 4px 10px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.battle-nav a.nav:hover,
.battle-nav span.nav:not(.dim):hover {
  color: var(--jade-bright);
  border-left-color: var(--jade-bright);
  padding-left: 14px;
  text-shadow: 0 0 12px rgba(74,222,128,0.3);
}
/* Dim — Phase-2-Placeholder oder JS-busy-State */
.battle-nav span.nav.dim { opacity: .30; cursor: default; pointer-events: none; }
/* Aktive Span-Buttons: cursor + accessibility */
.battle-nav span.nav:not(.dim) {
  cursor: pointer;
  user-select: none;
}
.battle-nav span.nav:not(.dim):focus-visible {
  outline: 1px dashed var(--jade-bright);
  outline-offset: 2px;
}
/* Abort — Flucht/Abbrechen (für <a> UND <span>-Buttons) */
.battle-nav a.nav.abort,
.battle-nav span.nav.abort:not(.dim) { color: rgba(248,113,113,0.65); }
.battle-nav a.nav.abort:hover,
.battle-nav span.nav.abort:not(.dim):hover {
  color: var(--danger);
  background: rgba(248,113,113,0.06);
  border-left-color: var(--danger);
}
/* Laufende Aktion (Phase 2) */
.battle-nav a.nav.running { color: var(--jade); background: rgba(134,239,172,0.06); animation: nav-pulse 1.2s ease-in-out infinite; }
/* Trennlinie */
.battle-nav-sep { height: 1px; background: var(--line, rgba(134,239,172,0.08)); margin: 6px 12px; }
@keyframes nav-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── Combat Frame ──────────────────────────────────────────────────── */
.combat-frame { position: relative; flex: 1; overflow: hidden; }

/* Hintergrundbild-Container */
.combat-bg {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden;
}
.combat-bg__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    user-select: none; pointer-events: none;
    /* leicht abdunkeln damit Panels + Portraits gut lesbar bleiben */
    filter: brightness(0.45) saturate(1.15);
}
.combat-bg__overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Corner ornaments — gleicher Abstand rundum */
.combat-corner { position: absolute; width: 26px; height: 26px; z-index: 50; pointer-events: none; color: var(--gold-dim, rgba(232,201,140,0.45)); }
.combat-corner.tl { top: 12px;  left: 12px; }
.combat-corner.tr { top: 12px;  right: 12px;  transform: scaleX(-1); }
.combat-corner.bl { bottom: 12px; left: 12px;  transform: scaleY(-1); }
.combat-corner.br { bottom: 12px; right: 12px; transform: scale(-1,-1); }

/* Scene label — versteckt (jetzt im Topbar als combat-topbar-loc) */
.combat-scene-label { display: none; }

/* Scene-Subtitle im Topbar — zentriert über volle Viewport-Breite,
   sitzt direkt unter .town-banner-title, selber Mittelpunkt */
.combat-topbar-loc {
  position: absolute;
  /* Topbar = 90px; Titel sitzt ~mittig; Subtitle direkt darunter */
  top: 62px; left: 0; right: 0;
  z-index: 11; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .28em;
  color: var(--ink-faint); text-transform: uppercase; white-space: nowrap;
}
.combat-topbar-loc::before, .combat-topbar-loc::after {
  content: ''; flex: 0 0 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(134,239,172,0.18));
}
.combat-topbar-loc::after { background: linear-gradient(90deg, rgba(134,239,172,0.18), transparent); }

/* ── Panel ─────────────────────────────────────────────────────────── */
.combat-panel {
  position: absolute; z-index: 10;
  background: rgba(6,9,4,0.86);
  border: 1px solid rgba(134,239,172,0.20);
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 0 0 1px rgba(0,0,0,0.55), 0 10px 30px rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.combat-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.94  0 0 0 0 0.67  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.3;
}
/* notch corners */
.cnotch { position: absolute; width: 8px; height: 8px; border: 1px solid rgba(134,239,172,0.35); background: var(--bg-deep,#060904); z-index: 2; }
.cnotch.tl { top:-1px; left:-1px;   border-right:none; border-bottom:none; }
.cnotch.tr { top:-1px; right:-1px;  border-left:none;  border-bottom:none; }
.cnotch.bl { bottom:-1px; left:-1px;  border-right:none; border-top:none; }
.cnotch.br { bottom:-1px; right:-1px; border-left:none;  border-top:none; }
/* panel head / body */
.combat-panel-head {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .28em;
  color: var(--jade-dim); text-transform: uppercase;
  padding: 10px 16px 8px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(134,239,172,0.09); position: relative; z-index: 2;
}
.combat-panel-head .ph-lvl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: .05em; text-transform: none; }
.combat-panel-body { padding: 10px 16px 13px; position: relative; z-index: 2; }

/* ── Stat Name ─────────────────────────────────────────────────────── */
.combat-stat-name { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--jade-bright); text-shadow: 0 0 14px rgba(134,239,172,0.20), 0 1px 0 #000; margin-bottom: 3px; }
.combat-stat-name.enemy { color: #f3dba6; text-shadow: 0 0 14px rgba(232,201,140,0.20), 0 1px 0 #000; }
.combat-stat-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(134,239,172,0.18) 25%, rgba(134,239,172,0.18) 75%, transparent); margin: 8px 0 9px; opacity: 0.55; }

/* ── HP Bar ────────────────────────────────────────────────────────── */
.hp-wrap {
  position: relative; height: 13px;
  background: #020402; border: 1px solid rgba(0,0,0,0.65); border-radius: 1px;
  padding: 2px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(134,239,172,0.18), 0 0 0 1px rgba(0,0,0,0.4);
  margin-bottom: 6px;
}
.hp-fill { position: relative; height: 100%; transition: width .45s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.4); }
.hp-fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 5px, rgba(0,0,0,0.12) 5px, rgba(0,0,0,0.12) 6px); }
.hp-fill.pl      { background: linear-gradient(180deg, #b0f5ca 0%, #86efac 55%, #3a7854 100%); }
.hp-fill.pl.warn { background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #92400e 100%); }
.hp-fill.pl.crit { background: linear-gradient(180deg, #fca5a5 0%, #f87171 55%, #7f1d1d 100%); animation: hp-pulse .8s ease-in-out infinite; }
.hp-fill.en      { background: linear-gradient(180deg, #fca5a5 0%, #f87171 55%, #7f1d1d 100%); }
.hp-fill.en.warn { background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #78350f 100%); }
.hp-fill.en.crit { background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #450a0a 100%); animation: hp-pulse .7s ease-in-out infinite; }
.hp-fill.flash   { animation: hp-flash .4s ease forwards; }
@keyframes hp-pulse { 0%,100%{filter:none} 50%{filter:brightness(1.45)} }
@keyframes hp-flash { 0%,100%{filter:none} 50%{filter:brightness(2.2) saturate(2)} }
.hp-pips { position: absolute; inset: 2px; display: flex; pointer-events: none; }
.hp-pips .pip { flex: 1; border-right: 1px solid rgba(0,0,0,0.18); }
.hp-pips .pip:last-child { border-right: none; }
.hp-numbers { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); display: flex; justify-content: space-between; margin-bottom: 4px; }

/* ── Portrait ──────────────────────────────────────────────────────── */
.combat-portrait { position: absolute; z-index: 15; }
.portrait-ring {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(134,239,172,0.50);
  box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(134,239,172,0.50), 0 18px 38px rgba(0,0,0,0.72);
  overflow: hidden; position: relative;
  background: radial-gradient(circle at 38% 32%, #0c1c0c 0%, #060904 70%);
  animation: portrait-breathe 4s ease-in-out infinite;
}
.portrait-ring::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.94  0 0 0 0 0.67  0 0 0 0.20 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.3;
}
.portrait-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; animation: portrait-float 5s ease-in-out infinite; }
.portrait-inner img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
/* Kreatur-Portrait mit echtem Bild: weißen HG per SVG-Filter entfernen, kein screen-blend */
.creature-portrait-img { mix-blend-mode: normal !important; filter: url(#crt-white-remove); }
.portrait-inner svg { width: 65%; height: 65%; }
.portrait-eyes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.portrait-eye { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 8px var(--jade), 0 0 18px rgba(134,239,172,0.18); animation: eye-blink 5s ease-in-out infinite; }
@keyframes portrait-breathe {
  0%,100% { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(134,239,172,0.50), 0 18px 38px rgba(0,0,0,0.72); }
  50%     { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px var(--jade), 0 18px 38px rgba(0,0,0,0.72), 0 0 24px rgba(134,239,172,0.16); }
}
@keyframes portrait-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes eye-blink { 0%,84%,100%{transform:scaleY(1);opacity:1} 87%,95%{transform:scaleY(0.1);opacity:0.4} }
/* Enemy portrait — red ring */
.portrait-enemy-ring .portrait-ring { border-color: rgba(248,113,113,0.40); animation-name: portrait-breathe-enemy; animation-delay:.7s; }
.portrait-enemy-ring .portrait-eye  { background: #f87171; box-shadow: 0 0 8px #f87171, 0 0 18px rgba(248,113,113,0.15); }
@keyframes portrait-breathe-enemy {
  0%,100% { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(248,113,113,0.38), 0 18px 38px rgba(0,0,0,0.72); }
  50%     { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(248,113,113,0.65), 0 18px 38px rgba(0,0,0,0.72), 0 0 22px rgba(248,113,113,0.12); }
}
/* Sizing */
.portrait-enemy-wrap  { width: 158px; height: 158px; top: 32px; right: calc(2.4% + 310px + 18px); }
.portrait-player-wrap { width: 148px; height: 148px; bottom: 262px; left: calc(2.4% + 320px + 18px); }
/* Shake / lunge animations */
@keyframes portrait-shake { 0%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 75%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
.combat-portrait.hit .portrait-ring { animation: portrait-shake .45s ease, portrait-breathe 4s ease-in-out infinite 1s; }
.combat-portrait.portrait-enemy-ring.hit .portrait-ring { animation: portrait-shake .45s ease, portrait-breathe-enemy 4s ease-in-out infinite 1s; }
@keyframes player-lunge { 0%{transform:translate(0,0)} 30%{transform:translate(22px,-8px) scale(1.06)} 60%{transform:translate(8px,-3px)} 100%{transform:translate(0,0)} }
@keyframes enemy-lunge  { 0%{transform:translate(0,0)} 30%{transform:translate(-20px,6px) scale(1.05)} 60%{transform:translate(-6px,2px)} 100%{transform:translate(0,0)} }
.portrait-player-wrap.lunge .portrait-ring { animation: player-lunge .42s ease, portrait-breathe 4s ease-in-out infinite .5s; }
.portrait-enemy-wrap.lunge  .portrait-ring { animation: enemy-lunge  .42s ease, portrait-breathe-enemy 4s ease-in-out infinite .5s; }

/* ── Enemy / Player Info Panels ────────────────────────────────────── */
.combat-enemy-info  { top: 24px;    right: 2.4%; width: 310px; }
.combat-player-info { bottom: 258px; left: 2.4%;  width: 320px; }
/* Tags */
.combat-tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.combat-tag-row span { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .14em; padding: 2px 7px; border: 1px solid rgba(134,239,172,0.18); color: var(--ink-faint); text-transform: uppercase; }
.combat-tag-row span.danger { border-color: rgba(248,113,113,0.25); color: rgba(248,113,113,0.65); }
/* Weapon line */
.combat-weapon-line { margin-top: 8px; font-style: italic; font-size: 13px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
.combat-weapon-line .sigil { font-style: normal; font-family: 'Cinzel', serif; color: var(--jade-dim); font-size: 12px; }

/* ── Bottom Dock ───────────────────────────────────────────────────── */
.combat-dock-wrap {
  position: absolute; left: 60px; right: 60px; bottom: 30px; z-index: 12;
  height: 220px;
  background: linear-gradient(180deg, transparent 0%, rgba(6,9,4,0.55) 25%, rgba(6,9,4,0.94) 100%);
}
.combat-dock {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 30% 50% 20%;
  gap: 8px; align-items: stretch; padding: 8px 0 0;
}
.combat-dock > .combat-panel { position: relative; z-index: auto; box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 0 0 1px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.55); }
#combat-action-panel { display: flex; flex-direction: column; }
#combat-action-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.combat-action-grid { flex: 1; min-height: 0; }

/* Companion panel */
#combat-companion-panel { display: flex; flex-direction: column; }
.combat-companion-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 10px; position: relative; z-index: 2; }
.combat-companion-slot { width: 72px; height: 72px; border-radius: 50%; border: 1px dashed rgba(134,239,172,0.20); background: rgba(6,9,4,0.55); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 22px; }
.combat-companion-label { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .22em; color: var(--ink-faint); text-transform: uppercase; text-align: center; line-height: 1.5; }
.combat-companion-hint { font-style: italic; font-size: 11px; color: rgba(134,239,172,0.22); text-align: center; line-height: 1.4; padding: 0 6px; }

/* ── Combat Log ────────────────────────────────────────────────────── */
#combat-log-panel { display: flex; flex-direction: column; overflow: hidden; }
.combat-log-box { flex: 1; min-height: 0; padding: 10px 16px 10px; display: flex; flex-direction: column; overflow: hidden; }
.combat-log-head { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .28em; color: var(--jade-dim); text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-shrink: 0; }
.combat-log-head::before, .combat-log-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(134,239,172,0.18)); }
.combat-log-head::after { background: linear-gradient(90deg, rgba(134,239,172,0.18), transparent); }
.combat-log-head .dh-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-faint); text-transform: none; letter-spacing: .04em; }
.combat-log-lines { font-size: 14px; line-height: 1.5; color: var(--ink); flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow-y: auto; }
.combat-log-lines::-webkit-scrollbar { width: 3px; }
.combat-log-lines::-webkit-scrollbar-track { background: transparent; }
.combat-log-lines::-webkit-scrollbar-thumb { background: rgba(134,239,172,0.18); border-radius: 2px; }
.clog-line { display: flex; gap: 9px; align-items: baseline; }
.clog-line .clog-m,
.clog-line .m { flex-shrink: 0; width: 11px; font-family: 'Cinzel', serif; font-size: 10px; color: var(--jade-dim); transform: translateY(-1px); }
.clog-line.faded  { color: rgba(134,239,172,0.28); font-size: 12px; }
.clog-line.faded .clog-m,
.clog-line.faded .m { color: rgba(134,239,172,0.18); }
.clog-line.active { color: var(--ink); }
/* Typ-Farben */
.clog-line.clog-player        { color: rgba(134,239,172,0.92); }
.clog-line.clog-player .clog-m{ color: rgba(134,239,172,0.55); }
.clog-line.clog-enemy         { color: rgba(248,113,113,0.85); }
.clog-line.clog-enemy  .clog-m{ color: rgba(248,113,113,0.50); }
.clog-line.clog-good          { color: rgba(232,201,140,0.95); }
.clog-line.clog-good   .clog-m{ color: rgba(232,201,140,0.60); }
.clog-line.clog-crit          { color: #f3dba6; font-weight: 600; }
.clog-line.clog-crit   .clog-m{ color: rgba(243,219,166,0.55); }
.clog-line.clog-status        { color: rgba(192,132,252,0.80); font-style: italic; }
.clog-line.clog-status .clog-m{ color: rgba(192,132,252,0.45); }
.clog-line.clog-system        { color: rgba(200,220,200,0.38); font-style: italic; font-size: 12px; }
.clog-line.clog-system .clog-m{ color: rgba(200,220,200,0.22); }
.combat-log-lines em        { color: #f3dba6; font-style: italic; }
.combat-log-lines em.dmg    { color: #f87171; }
.combat-log-lines em.heal   { color: #b0f5ca; }
.combat-log-prompt { margin-top: 8px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; color: var(--jade-dim); font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: 0.65; }
.combat-caret { margin-left: 6px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ── Admin Debug Panel ─────────────────────────────────────────────── */
.combat-debug-panel {
  position: absolute;
  top: 210px;
  right: 2.4%;
  width: 310px;
  z-index: 20;
  background: rgba(4,10,5,0.92);
  border: 1px solid rgba(134,239,172,0.18);
  border-left: 2px solid rgba(134,239,172,0.45);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  color: var(--ink);
  max-height: calc(100% - 230px);
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.08), 0 8px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.combat-debug-panel::-webkit-scrollbar { width: 3px; }
.combat-debug-panel::-webkit-scrollbar-track { background: transparent; }
.combat-debug-panel::-webkit-scrollbar-thumb { background: rgba(134,239,172,0.2); border-radius: 2px; }
.cdbg-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(134,239,172,0.05);
  border-bottom: 1px solid rgba(134,239,172,0.10);
  cursor: pointer;
  user-select: none;
}
.cdbg-title {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--jade-dim, #4ade80);
  opacity: 0.75;
}
.cdbg-slug {
  font-size: 10px;
  color: var(--ink-faint);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdbg-toggle {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 9px;
  color: rgba(134,239,172,0.4);
  cursor: pointer;
  transition: color .15s, transform .2s;
  line-height: 1;
}
.cdbg-toggle:hover { color: rgba(134,239,172,0.75); }
.cdbg-toggle.open { transform: rotate(180deg); }
.cdbg-body { padding: 8px 10px 10px; }
.cdbg-section {
  display: block;
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(134,239,172,0.45);
  border-bottom: 1px solid rgba(134,239,172,0.08);
  padding-bottom: 3px;
  margin: 10px 0 6px;
}
.cdbg-body > .cdbg-grid:first-of-type { margin-top: 0; }
.cdbg-grid + .cdbg-section { margin-top: 12px; }
.cdbg-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1px 8px;
}
.cdbg-grid span:nth-child(odd) {
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.65;
}
.cdbg-grid span:nth-child(even),
.cdbg-grid code {
  color: var(--ink-dim);
  font-size: 10px;
  background: none;
  padding: 0;
  line-height: 1.65;
}
.cdbg-grid code em { color: rgba(134,239,172,0.6); font-style: normal; }
.cdbg-grid code b  { color: rgba(134,239,172,0.95); }
.cdbg-sep {
  height: 1px;
  background: rgba(134,239,172,0.06);
  margin: 6px 0;
}

/* ── Action Panel ──────────────────────────────────────────────────── */
.combat-action-head { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .28em; color: var(--jade-dim); text-transform: uppercase; padding: 9px 14px 8px; flex-shrink: 0; border-bottom: 1px solid rgba(134,239,172,0.09); display: flex; align-items: center; gap: 10px; }
.combat-action-head::before, .combat-action-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(134,239,172,0.12)); }
.combat-action-head::after { background: linear-gradient(90deg, rgba(134,239,172,0.12), transparent); }
/* Action buttons */
.combat-action-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 10px; }
.combat-btn {
  position: relative; background: linear-gradient(180deg, rgba(8,14,8,0.90) 0%, rgba(4,8,4,0.96) 100%);
  border: 1px solid rgba(134,239,172,0.18); color: var(--ink);
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, border-color .15s, transform .05s;
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 -2px 6px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.45);
  overflow: hidden;
}
.combat-btn::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(134,239,172,0.10); pointer-events: none; }
.combat-btn svg { width: 20px; height: 20px; color: var(--jade-dim); opacity: 0.85; }
.combat-btn .btn-sub { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; color: var(--ink-faint); text-transform: none; font-weight: 400; }
.combat-btn:hover { background: linear-gradient(180deg, rgba(14,28,14,0.95) 0%, rgba(8,16,8,0.98) 100%); border-color: var(--jade); color: #b0f5ca; box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 -2px 6px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.5), 0 0 20px rgba(134,239,172,0.10); }
.combat-btn:hover svg { color: var(--jade); opacity: 1; }
.combat-btn:hover::before { border-color: rgba(134,239,172,0.28); }
.combat-btn:active { transform: translateY(1px); }
.combat-btn.selected { background: linear-gradient(180deg, var(--jade) 0%, #3ea86a 100%); border-color: #b0f5ca; color: var(--bg-deep,#060904); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 24px rgba(134,239,172,0.32), 0 4px 10px rgba(0,0,0,0.55); }
.combat-btn.selected svg { color: var(--bg-deep,#060904); opacity: 1; }
.combat-btn.selected .btn-sub { color: rgba(6,9,4,0.6); }
.combat-btn.danger:hover { border-color: #f87171; color: #f87171; box-shadow: inset 0 1px 0 rgba(248,113,113,0.15), 0 0 20px rgba(248,113,113,0.15), 0 4px 10px rgba(0,0,0,0.5); }
/* ── Attack Grid (Kampfkunst-basierte Angriffe) ─── */
.combat-attack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 4px; flex-shrink: 0; }
.combat-attack-grid .combat-btn { padding: 8px 8px; gap: 3px; min-height: 0; }
/* Unlocked attack button */
.combat-btn.ca-attack { flex-direction: column; text-align: center; position: relative; }
.ca-ap { position: absolute; top: 5px; right: 6px; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .04em; color: #86efac; background: rgba(134,239,172,0.10); border: 1px solid rgba(134,239,172,0.20); padding: 1px 5px; border-radius: 2px; font-weight: 600; }
.ca-ap.free { color: rgba(134,239,172,0.45); background: transparent; border-color: transparent; }
.ca-name { font-size: 12px; letter-spacing: .10em; font-weight: 600; color: #b0f5ca; margin-top: 2px; }
.ca-mult { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(134,239,172,0.45); letter-spacing: .04em; }
/* Locked attack button */
.combat-btn.ca-locked { opacity: .38; cursor: not-allowed; flex-direction: column; gap: 2px; }
.combat-btn.ca-locked:hover { border-color: rgba(134,239,172,0.18); color: var(--ink); box-shadow: none; background: linear-gradient(180deg, rgba(8,14,8,0.90) 0%, rgba(4,8,4,0.96) 100%); }
.ca-lock { font-size: 11px; line-height: 1; }
.ca-unlock { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: rgba(134,239,172,0.38); letter-spacing: .04em; text-transform: none; font-weight: 400; }
/* Bottom action row (Item / Fähigkeit / Flüchten) */
.combat-action-row2 { display: flex; gap: 6px; padding: 0 10px 8px; flex-shrink: 0; }
.combat-action-row2 .combat-btn { flex: 1; flex-direction: row; gap: 6px; padding: 6px 8px; font-size: 11px; letter-spacing: .10em; }
.combat-action-row2 .combat-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
/* AP display in panel head */
.combat-ap-display { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--jade-dim); letter-spacing: .04em; }
.combat-ap-display .ap-val { color: #86efac; font-weight: 600; }
.combat-ap-display .ap-sep { color: rgba(134,239,172,0.38); margin-left: 2px; }
/* Submenu */
.combat-sub-bar { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .22em; color: var(--jade-dim); text-transform: uppercase; padding: 0 2px 5px; display: flex; justify-content: space-between; align-items: center; }
.combat-sub-back { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .14em; color: var(--ink-dim); background: none; border: none; cursor: pointer; padding: 3px 8px; text-transform: uppercase; }
.combat-sub-back:hover { color: var(--jade); }
/* Skill grid */
.combat-skill-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 7px; padding: 10px; }
.combat-skill-grid .combat-sub-bar { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid rgba(134,239,172,0.09); margin-bottom: 2px; }
.combat-skill-btn { position: relative; background: linear-gradient(180deg, rgba(8,14,8,0.90) 0%, rgba(4,8,4,0.96) 100%); border: 1px solid rgba(134,239,172,0.18); color: var(--ink); font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; transition: all .15s; }
.combat-skill-btn:hover { border-color: var(--jade); background: linear-gradient(180deg, rgba(14,28,14,0.95) 0%, rgba(8,16,8,0.98) 100%); }
.combat-skill-btn .sk-n { color: #b0f5ca; font-weight: 600; font-size: 13px; }
.combat-skill-btn .sk-m { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); display: flex; justify-content: space-between; text-transform: none; letter-spacing: .04em; }
.combat-skill-btn .sk-m .cost { color: var(--jade-dim); }
.combat-skill-btn .sk-m .dmg  { color: rgba(248,113,113,0.7); }
.combat-skill-btn .sk-d { font-family: 'IM Fell English', serif; font-style: italic; font-size: 13px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; line-height: 1.4; }
.combat-skill-btn.locked { opacity: 0.32; cursor: not-allowed; }
/* Item list */
.combat-item-list { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.combat-item-list .combat-sub-bar { padding-bottom: 6px; border-bottom: 1px solid rgba(134,239,172,0.09); margin-bottom: 2px; }
.combat-item-rows { display: flex; flex-direction: column; gap: 4px; }
.combat-item-row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 9px; padding: 6px 9px; background: rgba(6,9,4,0.55); cursor: pointer; font-size: 13px; color: var(--ink); border: 1px solid transparent; transition: all .12s; }
.combat-item-row:hover { border-color: rgba(134,239,172,0.18); background: rgba(14,28,14,0.65); }
.combat-item-row .glyph  { font-family: 'Cinzel', serif; font-size: 12px; color: var(--jade-dim); text-align: center; }
.combat-item-row .effect { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--jade); letter-spacing: .04em; }
.combat-item-row .qty    { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #e8c98c; }
/* Confirm panel */
.combat-confirm { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.combat-confirm-title { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .22em; color: var(--jade-dim); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid rgba(134,239,172,0.09); margin-bottom: 2px; }
.combat-confirm-body  { font-style: italic; font-size: 15px; color: var(--ink-dim); line-height: 1.6; flex: 1; }
.combat-confirm-cta   { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 10px; cursor: pointer; background: linear-gradient(180deg, var(--jade) 0%, #3ea86a 100%); border: 1px solid #b0f5ca; color: var(--bg-deep,#060904); transition: box-shadow .15s; }
.combat-confirm-cta:hover { box-shadow: 0 0 28px rgba(134,239,172,0.3); }
.combat-confirm-cta.danger { background: linear-gradient(180deg, #ef4444 0%, #7f1d1d 100%); border-color: #f87171; color: #fff; }

/* ── Combat Animations ─────────────────────────────────────────────── */
.combat-frame::after { content: ''; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(134,239,172,0.18) 42%, rgba(255,255,255,0.06) 44%, transparent 48%, transparent 100%); opacity: 0; transform: translateX(-120%); }
.combat-frame.slash::after { animation: slash-sweep .38s ease-out forwards; }
@keyframes slash-sweep { 0%{opacity:0;transform:translateX(-120%)} 20%{opacity:1} 100%{opacity:0;transform:translateX(120%)} }
.combat-frame.slash-enemy::after { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(248,113,113,0.22) 42%, rgba(255,255,255,0.06) 44%, transparent 48%, transparent 100%); animation: slash-sweep .38s ease-out forwards; }
@keyframes shake-enemy  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px) rotate(-.6deg)} 40%{transform:translateX(8px) rotate(.4deg)} 60%{transform:translateX(-6px) rotate(-.3deg)} 80%{transform:translateX(4px)} }
@keyframes shake-player { 0%,100%{transform:translateX(0)} 20%{transform:translateX(8px) rotate(.5deg)} 40%{transform:translateX(-6px) rotate(-.4deg)} 60%{transform:translateX(5px)} 80%{transform:translateX(-3px)} }
.combat-frame.shake-e { animation: shake-enemy  .42s ease; }
.combat-frame.shake-p { animation: shake-player .42s ease; }
.impact-ring  { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--jade); pointer-events: none; z-index: 20; animation: ring-burst .55s ease-out forwards; }
.impact-ring2 { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--jade); pointer-events: none; z-index: 19; animation: ring-burst .75s .12s ease-out forwards; }
.impact-ring.enemy, .impact-ring2.enemy { border-color: #f87171; }
@keyframes ring-burst { 0%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(1.9)} }
.combat-bg-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; animation: bg-flash .5s ease-out forwards; }
.combat-bg-flash.hit  { background: radial-gradient(ellipse at 72% 20%, rgba(248,113,113,0.22) 0%, transparent 60%); }
.combat-bg-flash.heal { background: radial-gradient(ellipse at 28% 70%, rgba(134,239,172,0.18) 0%, transparent 60%); }
@keyframes bg-flash { 0%{opacity:1} 100%{opacity:0} }
/* Damage floats */
.dmg-float { position: fixed; font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; letter-spacing: .06em; pointer-events: none; z-index: 200; animation: dmg-rise .9s ease forwards; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.dmg-float.enemy  { color: #f87171; }
.dmg-float.player { color: #b0f5ca; }
.dmg-float.heal   { color: var(--jade); }
@keyframes dmg-rise { 0%{opacity:1;transform:translateY(0) scale(1)} 30%{transform:translateY(-24px) scale(1.1)} 100%{opacity:0;transform:translateY(-60px) scale(0.8)} }

/* ── Intro Screen (Overlay) ────────────────────────────────────────── */
.combat-intro-frame { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
/* Im Intro etwas heller — Kreatur soll vor Waldkulisse dramatisch wirken */
.combat-intro-frame .combat-bg__img { filter: brightness(0.35) saturate(1.2); }
.combat-intro-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6,9,4,0.6) 0%, rgba(6,9,4,0.10) 35%, rgba(6,9,4,0.10) 65%, rgba(6,9,4,0.65) 100%); }
.combat-intro-fog  { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(134,239,172,0.05) 0%, transparent 70%); animation: fog-breathe 5s ease-in-out infinite; }
@keyframes fog-breathe { 0%,100%{opacity:.5} 50%{opacity:1} }
.combat-intro-content { position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; }
.combat-intro-sprite { width: 230px; height: 230px; opacity: 0; animation: intro-rise .9s .4s ease both; }
.combat-intro-sprite svg { width: 100%; height: 100%; }
.combat-intro-sprite img { width: 100%; height: 100%; object-fit: contain; }
@keyframes intro-rise { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
.combat-intro-loc  { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .32em; color: var(--jade-dim); text-transform: uppercase; margin-top: 10px; opacity: 0; animation: fade-up .8s .9s ease both; }
.combat-intro-name { font-family: 'Cinzel', serif; font-size: 38px; font-weight: 600; letter-spacing: .22em; color: #b0f5ca; text-transform: uppercase; text-shadow: 0 0 30px rgba(134,239,172,0.42), 0 1px 0 #000; margin-top: 6px; opacity: 0; animation: fade-up .9s 1.1s ease both; }
.combat-intro-sub  { font-style: italic; font-size: 16px; color: var(--ink-dim); max-width: 480px; line-height: 1.5; margin-top: 10px; opacity: 0; animation: fade-up .8s 1.5s ease both; }
.combat-intro-skip { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .20em; color: var(--ink-faint); text-transform: uppercase; margin-top: 28px; opacity: 0; animation: fade-up .6s 2.2s ease both; }
@keyframes fade-up { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.combat-intro-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 5; background: rgba(134,239,172,0.08); }
.combat-intro-bar { height: 100%; background: var(--jade); transform-origin: left; animation: bar-drain 3.4s linear .8s both; }
@keyframes bar-drain { from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ── End Screen (Overlay) ──────────────────────────────────────────── */
.combat-end { background: var(--bg-deep,#060904); }
.combat-end-frame { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; position: relative; overflow: hidden; }
.combat-end-glow { position: absolute; inset: 0; pointer-events: none; z-index: 2; animation: end-pulse 3s ease-in-out infinite; }
.combat-end-glow.v { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(134,239,172,0.14) 0%, transparent 70%); }
.combat-end-glow.d { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(248,113,113,0.10) 0%, transparent 70%); }
@keyframes end-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.combat-end-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
/* Wald-Hintergrund im End-Screen — combat-bg liegt auf z-index 1 */
.combat-end-frame .combat-bg { z-index: 1; }
.combat-end-glyph { font-size: 60px; animation: fade-up .8s ease both; }
.combat-end-title { font-family: 'Cinzel', serif; font-size: 42px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; animation: fade-up .9s .15s ease both; }
.combat-end-title.v { color: #b0f5ca; text-shadow: 0 0 30px rgba(134,239,172,0.38), 0 1px 0 #000; }
.combat-end-title.d { color: #f87171; text-shadow: 0 0 30px rgba(248,113,113,0.28), 0 1px 0 #000; }
.combat-end-sub { font-style: italic; font-size: 16px; color: var(--ink-dim); max-width: 520px; line-height: 1.6; animation: fade-up .8s .3s ease both; }
/* Loot box */
.combat-loot-box { border: 1px solid rgba(134,239,172,0.18); padding: 14px 18px; width: 360px; background: rgba(6,9,4,0.86); animation: fade-up .8s .5s ease both; }
.combat-loot-title { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .26em; color: var(--jade-dim); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.combat-loot-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(134,239,172,0.18), transparent); }
.combat-loot-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(134,239,172,0.06); font-size: 13px; color: var(--ink); }
.combat-loot-row:last-child { border-bottom: none; }
.combat-loot-gl { font-family: 'Cinzel', serif; font-size: 15px; text-align: center; color: var(--jade-dim); }
.combat-loot-row em { display: block; font-style: italic; font-size: 10px; color: var(--ink-faint); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
.combat-loot-q { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--jade); }
.combat-loot-q.loss { color: var(--danger); }
/* Verlust-Box (Niederlage) */
.combat-loss-box { border-color: rgba(248,113,113,0.22); }
.combat-loss-box .combat-loot-title { color: rgba(248,113,113,0.55); }
.combat-loss-box .combat-loot-title::after { background: linear-gradient(90deg, rgba(248,113,113,0.18), transparent); }
.combat-loss-box .combat-loot-gl { color: rgba(248,113,113,0.55); }
/* CTA row */
.combat-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: fade-up .7s .65s ease both; }
.combat-cta-btn { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 12px 28px; cursor: pointer; transition: transform .15s, box-shadow .15s; text-decoration: none; border: 1px solid; display: inline-block; }
.combat-cta-btn:hover { transform: translateY(-2px); }
.combat-cta-btn.primary { background: linear-gradient(180deg, var(--jade) 0%, #3ea86a 100%); border-color: #b0f5ca; color: var(--bg-deep,#060904); box-shadow: 0 6px 18px rgba(74,197,94,0.22); }
.combat-cta-btn.danger  { background: linear-gradient(180deg, #ef4444 0%, #7f1d1d 100%); border-color: #f87171; color: #fff; box-shadow: 0 6px 18px rgba(248,113,113,0.18); }
.combat-cta-btn.sec     { background: rgba(134,239,172,0.06); border-color: rgba(134,239,172,0.18); color: var(--ink-dim); }

/* ── Chat-System (Burgplatz-Variante A · Sprechblasen) ────────────────────── */

/* Shell — gleiche Glasoptik wie .stat-block / Nav */
.chat-shell {
    position: relative;
    width: 100%; max-width: 760px;
    display: flex; flex-direction: column;
    background: rgba(6,9,4,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    overflow: hidden;
    font-family: 'IM Fell English', Georgia, serif;
}

/* Kopf — leicht abgesetzt, wie .navhead */
.chat-head {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--line);
    background: rgba(6,9,4,0.4);
    padding: 9px 14px;
    display: flex; align-items: center; gap: 12px;
}
.chat-head .head-text { flex: 1; min-width: 0; }
.chat-head .title {
    font-family: 'Cinzel', serif;
    font-size: 10px; letter-spacing: 0.3em;
    color: var(--jade-bright); text-transform: uppercase;
}
.chat-head .head-row {
    display: flex; align-items: center; gap: 8px; margin-top: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--ink-faint);
    letter-spacing: 0.14em; text-transform: uppercase;
}
.chat-head .head-row .sep   { opacity: 0.4; }
.chat-head .head-row .grow  { flex: 1; }
.chat-head .head-row .online { color: var(--jade); }
.online-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--jade);
    box-shadow: 0 0 5px var(--jade-glow);
    animation: ch-pulse 2s ease-in-out infinite;
    display: inline-block; flex-shrink: 0;
}
@keyframes ch-pulse {
    0%,100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* Avatar — kleiner, dezenter Kreis */
.chat-shell .avatar {
    border-radius: 50%;
    background: rgba(15,22,8,0.7);
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; overflow: hidden;
}
.chat-shell .avatar .glyph {
    font-family: 'Cinzel', serif;
    color: var(--jade-bright); font-size: 11px; user-select: none;
}
.chat-shell .avatar.lg { width: 36px; height: 36px; }
.chat-shell .avatar.lg .glyph { font-size: 13px; }
.chat-shell .avatar.md { width: 28px; height: 28px; }
.chat-shell .avatar.npc { border-color: rgba(201,163,104,0.3); }
.chat-shell .avatar.npc .glyph { color: var(--gold-bright); }

/* Nachrichten-Scroll */
.chat-scroll {
    flex: 1; overflow-y: auto; position: relative;
    min-height: 180px; max-height: 420px;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.chat-scroll::-webkit-scrollbar { width: 4px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
.stack {
    display: flex; flex-direction: column;
    padding: 12px 10px; gap: 8px;
}

/* Nachrichten-Gruppen */
.group { display: flex; gap: 8px; align-items: flex-end; }
.group .col {
    display: flex; flex-direction: column; gap: 2px;
    max-width: calc(100% - 64px); min-width: 0;
}
.name-row {
    display: flex; gap: 6px; align-items: baseline;
    font-family: 'Cinzel', serif;
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 0 3px; color: var(--ink-faint);
}
.name-row .name { color: var(--jade-bright); }
.name-row .stamp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--ink-faint); opacity: 0.7;
}
.group.own .name-row .name { color: var(--gold-bright); }
.group.npc .name-row .name { color: var(--gold-bright); }

/* Sprechblasen — wie .stat-block, aber leichter */
.bubble {
    padding: 7px 12px 8px;
    border: 1px solid var(--line-strong);
    background: rgba(6,9,4,0.88);
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 14px; line-height: 1.5;
    color: #e8efe2; border-radius: 2px; max-width: 100%;
    word-break: break-word;
    opacity: 1; transform: none;
}
.group.own .bubble {
    border-color: rgba(201,163,104,0.3);
    background: rgba(18,12,4,0.92);
    color: #e8efe2;
}
.bubble.npc {
    border-color: rgba(201,163,104,0.3);
    background: rgba(18,12,4,0.88);
    color: #e8efe2;
}
.bubble.me {
    background: transparent; border-style: dashed;
    border-color: var(--line-strong);
    color: var(--jade-bright); font-style: italic;
}
.bubble strong { font-weight: 700; }

/* Gate-Overlay (Beitritt) */
.chat-shell.locked .chat-scroll {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}
.chat-shell.locked .chat-dock {
    filter: blur(3px);
    pointer-events: none;
    opacity: 0.35;
}
.chat-gate {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}
.chat-shell:not(.locked) .chat-gate { display: none; }
.chat-gate-inner {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 26px 38px;
    background: rgba(6,9,4,0.86);
    border: 1px solid var(--line-strong);
    text-align: center;
}
.chat-gate-icon { font-size: 26px; opacity: 0.45; line-height: 1; }
.chat-gate-title {
    font-family: 'Cinzel', serif;
    font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--jade-bright);
}
.chat-gate-sub {
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 12px; color: var(--ink-faint); font-style: italic;
    margin-top: -6px;
}
.chat-gate-btn {
    font-family: 'Cinzel', serif;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink);
    background: rgba(74,222,128,0.07);
    border: 1px solid var(--jade);
    padding: 9px 22px; cursor: pointer;
    transition: background .15s, color .15s;
    margin-top: 4px;
}
.chat-gate-btn:hover {
    background: rgba(74,222,128,0.18);
    color: var(--jade-bright);
}

/* Szenen-Trenner */
.scene-wrap { display: contents; }
.scene-divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-faint);
    font-family: 'Cinzel', serif;
    font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase;
    padding: 4px 2px 0; margin: 4px 0 -4px;
}
.scene-divider::before, .scene-divider::after {
    content: ""; flex: 1; height: 1px;
    background: var(--line-strong);
}
.scene-divider .marker { color: var(--jade); opacity: 0.5; }
.scene-line {
    align-self: center; max-width: 88%;
    padding: 5px 12px; margin: 0 auto; text-align: center;
    font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 13px;
    color: var(--jade-bright);
    background: rgba(74,222,128,0.04);
    border: 1px solid var(--line); border-radius: 2px;
    word-break: break-word;
}

/* Dock — identisch zum Nav-Hintergrund */
.chat-dock {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    background: rgba(6,9,4,0.65);
}
.fmt-row {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.fmt-row .lbl {
    font-family: 'Cinzel', serif;
    font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-faint); margin-right: 3px;
}
.fmt-row .grow { flex: 1; }

/* Format-Chips */
.fmt-chip {
    appearance: none;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-dim);
    width: 20px; height: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 2px;
    transition: border-color .12s, background .12s;
}
.fmt-chip:hover { border-color: var(--jade); background: rgba(74,222,128,0.08); }
.fmt-chip.c1 { color: var(--ink); }
.fmt-chip.c2 { color: var(--jade); }
.fmt-chip.c3 { color: var(--gold-bright); }
.fmt-chip.c4 { color: var(--blood-bright); }
.fmt-chip.c5 { color: #8aa9ff; }
.fmt-chip.c6 { color: #c293ff; }
.fmt-chip.c7 { color: #62d3b3; }
.fmt-chip.b  { font-weight: 800; color: var(--ink); }

/* Tag-Chips — wie nav-Links */
.tag-chip {
    appearance: none;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-dim);
    font-family: 'Cinzel', serif;
    font-size: 8.5px; letter-spacing: 0.18em;
    padding: 3px 7px; cursor: pointer; text-transform: uppercase;
    border-radius: 2px;
    transition: color .12s, border-color .12s, background .12s;
}
.tag-chip:hover { border-color: var(--jade-bright); color: var(--jade-bright); background: rgba(74,222,128,0.06); }
.tag-chip.me { color: var(--gold); font-style: italic; }
.tag-chip.me.ct-active { border-color: var(--gold); color: var(--gold-bright); background: rgba(201,163,104,0.08); }
.chat-refresh-chip { font-size: 12px; line-height: 1; }
.chat-leave-btn {
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--ink-faint);
    cursor: pointer; padding: 2px;
    opacity: 0.45;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
}
.chat-leave-btn svg { width: 13px; height: 13px; }
.chat-leave-btn:hover { opacity: 1; color: #e87070; }

/* Live-Vorschau */
.chat-dock .chat-preview {
    display: none; padding: 3px 12px; font-size: 12px;
    color: rgba(232,239,226,0.35); font-style: italic;
    border-bottom: 1px solid var(--line); word-break: break-word;
}
.chat-dock .chat-preview--visible { display: block; }
.chat-dock .chat-preview .prev-emote { color: rgba(232,200,140,0.6); }
.chat-dock .chat-preview .prev-scene  { color: rgba(74,222,128,0.45); }
.chat-dock .chat-preview .prev-npc    { color: rgba(232,200,140,0.65); }

/* Eingabe-Zeile */
.input-row { display: flex; align-items: stretch; padding: 7px 10px 9px; }
.input-field {
    flex: 1; background: rgba(0,0,0,0.35);
    border: 1px solid var(--line-strong);
    color: var(--ink); padding: 7px 12px;
    font-family: inherit; font-size: 13px;
    outline: none; border-radius: 2px 0 0 2px;
    transition: border-color .15s;
}
.input-field::placeholder { color: var(--ink-faint); font-style: italic; }
.input-field:focus { border-color: rgba(74,222,128,0.4); }
.input-field:disabled { opacity: .5; cursor: not-allowed; }
.input-field.chat-input-err { border-color: rgba(248,113,113,0.55); animation: ch-shake .28s ease; }
@keyframes ch-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
.send-btn {
    appearance: none;
    background: rgba(74,222,128,0.07);
    border: 1px solid var(--line-strong); border-left: none;
    color: var(--jade); width: 40px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0 2px 2px 0; transition: background .12s, color .12s;
}
.send-btn:hover { background: rgba(74,222,128,0.15); color: var(--jade-bright); }
.send-btn svg { width: 16px; height: 16px; }
.combat-cta-btn.sec:hover { background: rgba(134,239,172,0.12); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE & TABLET
   Breakpoints: 768px (Tablet/Landscape), 480px (Portrait-Phone)
   Landscape-Phone: max-height 500px + orientation:landscape
   ═══════════════════════════════════════════════════════════════════ */

/* ── 768px: Tablet + Landscape-Phone ──────────────────────────────── */
@media (max-width: 768px) {

  /* ── Info/Interactive Layout ────────────────────────────────────── */

  /* Town-Grid: nav-col ausblenden, 2-Spalten → 1-Spalte */
  .town-grid {
    grid-template-columns: 1fr !important;
    padding: 0 12px 60px;
    gap: 12px;
  }
  /* Nav-Spalte: Drawer (von links einfahrbar) */
  .town-col.nav-col {
    position: fixed;
    top: 0;
    left: -270px;
    width: 250px;
    height: 100vh;
    z-index: 300;
    background: var(--panel-bg, #0e1a14);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    padding: 72px 0 24px;
    transition: left 0.25s ease;
    /* verhindert sticky oben */
    top: 0;
  }
  body.nav-open .town-col.nav-col {
    left: 0;
  }
  .town-col.nav-col .navhead { display: block; padding: 12px 16px 4px; }
  .town-col.nav-col a.nav    { display: block; padding: 6px 16px; }
  .town-col.nav-col .navhelp { display: block; font-size: 11px; padding: 4px 16px 12px; }

  /* Nav-Overlay: abdunkelnde Fläche wenn Drawer offen */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 299;
  }
  body.nav-open .nav-overlay {
    display: block;
  }

  /* Hamburger-Button: sichtbar auf Mobile */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--jade, #3a7a5a);
    border-radius: 2px;
    transition: background 0.2s;
  }
  .nav-hamburger:hover span { background: var(--jade-light, #5aaa8a); }

  /* Stats-Spalte ganz nach unten */
  .town-col.stats-col { order: 3; }
  .town-col.content-col { order: 2; }

  /* Char-Card: kompakter */
  .char-card { padding: 14px; margin-bottom: 10px; position: static; top: unset; }
  .char-head { gap: 10px; margin-bottom: 14px; padding-bottom: 12px; }
  .char-portrait { width: 40px; height: 40px; font-size: 15px; }
  .char-name { font-size: 14px; }

  /* Info-Topbar: kompakter, Logo kleiner */
  .info-topbar { height: 68px; padding: 0 16px; }
  .info-logo { height: 50px; }
  .info-topbar .town-banner-title { font-size: 14px; letter-spacing: 0.04em; }
  .info-icon-btn { min-width: 40px; padding: 4px 6px; font-size: 17px; }
  .info-icon-btn .btn-label { font-size: 8px; letter-spacing: 0.06em; }

  /* GameTime-Strip: kompakter */
  .gt-strip { padding: 4px 12px; gap: 3px 10px; font-size: 10px; }

  /* ── Wizard (interactive) ────────────────────────────────────────── */
  .cs-head  { padding: 0 16px; height: 68px; }
  .cs-logo  { height: 50px; }
  .cs-head-center { position: static; transform: none; text-align: left; }
  .wiz-foot { padding: 16px 20px 24px; }
  .wiz-stage { padding: 0 16px; }
  .wiz-char  { width: 200px; height: 300px; }
  .summary   { grid-template-columns: 1fr; gap: 20px; }
  .summary-portrait { margin: 0 auto; }
  .appearance-panel { grid-template-columns: 1fr; gap: 16px; }
  .wiz-char-preview { width: 180px; height: 270px; margin: 0 auto; }

  /* ── Landing Page ────────────────────────────────────────────────── */
  .hero-layout {
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 16px 80px;
    gap: 24px;
    /* kein absolute mehr — scrollbarer Flow */
    position: relative;
    min-height: 100vh;
  }
  .hero-content {
    max-width: 100%;
    gap: 16px;
  }
  .hero-headline { font-size: clamp(1.6rem, 5vw, 2.6rem); }
  .hero-headline-em { font-size: clamp(32px, 8vw, 56px); }
  .hero-desc { font-size: 13px; max-width: 100%; }
  .hero-stats { gap: 20px; padding: 12px 16px; width: 100%; flex-wrap: wrap; }
  .hero-stat-val { font-size: 22px; }
  .hero-ctas { gap: 8px; }
  .btn-outline { padding: 9px 14px; font-size: 10px; }

  /* Login-Panel: volle Breite unten */
  .login-float {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 20px 20px;
  }
  .login-title { font-size: 22px; }

  /* Topbar (Landing/Public) */
  .landing-topbar { height: 68px; padding: 0 16px; }
  .topbar-logo { height: 50px; }
  .topbar-name { font-size: 12px; letter-spacing: 0.14em; }
  .topbar-nav  { padding: 5px 10px; }
  .topbar-link { padding: 5px 10px; font-size: 10px; }
  .topbar-stats { padding: 5px 10px; font-size: 11px; }

  /* Ticker: kompakter */
  .ticker { padding: 10px 16px; }

  /* ── Public Pages ────────────────────────────────────────────────── */
  .public-main { padding: 80px 12px 60px; }
  .public-panel { max-width: 100% !important; }
  .public-panel-header { padding: 16px 18px 12px; }
  .public-panel-body   { padding: 16px 18px; }

  /* Bestiary-Grid: 1-spaltig */
  .bestiary-grid { grid-template-columns: 1fr; }

  /* Hall of Fame Tabelle: scrollbar */
  .hof-table { font-size: 12px; }
  .hof-table th, .hof-table td { padding: 7px 8px; }
  .hof-rank { width: 32px; font-size: 16px; }

  /* ── Gemeinsame Elemente ─────────────────────────────────────────── */

  /* Popup-Overlay: volle Breite auf kleinen Screens */
  .popup-overlay .popup-box {
    width: 92vw;
    max-height: 85vh;
  }

  /* Inventar-Popup */
  #popup-inventar { padding: 8px; }
  .iv-D {
    width: 96vw;
    height: 88vh;
  }
  .iv-D-body { grid-template-columns: 1fr; }
  .iv-D-cats   { display: none; }
  .iv-D-detail { display: none; }
  .iv-D-cards  { grid-template-columns: 1fr; padding: 10px 12px; }
  .iv-titlebar { padding: 10px 14px 8px; }
  .iv-search   { width: 140px; }

  /* Dialog-System: Avatare kleiner */
  .dlg-avatar { width: 72px; height: 90px; }
  .dlg-avatar--dual { width: 116px; }
  .bubble-text { font-size: 16px; }
  .choice-btn  { font-size: 15px; padding: 9px 12px; }

  /* Schließfach */
  .sf-actions { flex-direction: column; gap: 12px; }

  /* ── Combat Layout ───────────────────────────────────────────────── */

  /* Combat: vollständiger Umbau auf flow-Layout */
  body.combat-page { overflow: auto; }

  /* Topbar fix */
  .combat-wrap .info-topbar { height: 60px; padding: 0 12px; flex-shrink: 0; }

  /* Haupt-Wrap: Flex-Column, scroll */
  .combat-wrap {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* battle-body: keine Side-by-Side mehr */
  .battle-body { flex-direction: column; overflow: visible; }

  /* Battle-Nav: als schmale horizontale Leiste oben */
  .battle-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    flex-wrap: wrap;
    padding: 4px 8px;
    overflow-x: auto;
    gap: 0;
  }
  .battle-nav .navhead      { padding: 4px 8px 2px; display: inline-block; }
  .battle-nav a.nav,
  .battle-nav span.nav      { display: inline-block; padding: 4px 8px; white-space: nowrap; }
  .battle-nav-sep           { display: none; }

  /* Combat-Frame: Höhe begrenzt, kein absolute mehr für Panels */
  .combat-frame {
    position: relative;
    flex: none;
    height: 220px; /* Wald-Szene als atmosphärisches Band */
    overflow: hidden;
  }
  /* Combat-Hintergrund-Overlay bleibt, Bild wird gezoomt */
  .combat-bg__img { object-position: center 30%; }

  /* Eck-Ornamente auf Mobile ausblenden */
  .combat-corner { display: none; }
  .combat-topbar-loc { top: 48px; font-size: 8px; }

  /* Info-Panels: aus absolute herauslösen → flow nach dem Frame */
  .combat-enemy-info,
  .combat-player-info {
    position: relative !important;
    top: unset !important; bottom: unset !important;
    left: unset !important; right: unset !important;
    width: 100% !important;
    margin: 0;
    border-radius: 0;
    border-left: none; border-right: none;
  }

  /* Portraits: relativ, kompakter */
  .combat-portrait,
  .portrait-enemy-wrap,
  .portrait-player-wrap {
    position: relative !important;
    top: unset !important; bottom: unset !important;
    left: unset !important; right: unset !important;
    width: 80px !important;
    height: 80px !important;
    display: inline-block;
    vertical-align: middle;
    margin: 8px 10px;
  }

  /* Dock: nicht mehr absolute, volle Breite, flache Höhe */
  .combat-dock-wrap {
    position: relative !important;
    left: unset !important; right: unset !important;
    bottom: unset !important;
    width: 100% !important;
    height: auto !important;
    background: rgba(6,9,4,0.96);
    border-top: 1px solid rgba(134,239,172,0.14);
  }
  .combat-dock {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
    padding: 0;
  }
  /* Dock-Panels: stapeln vertikal */
  .combat-dock > .combat-panel { border-left: none; border-right: none; border-top: none; }
  #combat-action-panel  { order: 1; }
  #combat-log-panel     { order: 2; }
  #combat-companion-panel { display: none; } /* Companion Phase 2, auf Mobile weglassen */

  /* Action-Grid: 2×2 auf voller Breite */
  .combat-action-grid { grid-template-columns: 1fr 1fr; padding: 8px; }
  .combat-attack-grid { grid-template-columns: 1fr 1fr; padding: 6px 8px 4px; }

  /* Log: begrenzte Höhe */
  .combat-log-box { max-height: 140px; }

  /* Debug-Panel: aus absolute heraus */
  .combat-debug-panel {
    position: relative !important;
    top: unset !important; right: unset !important;
    width: 100% !important;
    max-height: 200px;
    border-left: none; border-right: none;
  }

  /* Intro-Screen anpassen */
  .combat-intro-name { font-size: 26px; letter-spacing: 0.14em; }
  .combat-intro-sprite { width: 160px; height: 160px; }

  /* End-Screen */
  .combat-end-title { font-size: 28px; letter-spacing: 0.14em; }
  .combat-loot-box  { width: 94vw; }

} /* end @media 768px */


/* ── 480px: Portrait-Phone ────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Topbar noch kompakter */
  .info-topbar { height: 58px; padding: 0 10px; }
  .info-logo   { height: 42px; }
  .info-topbar .town-banner-title { font-size: 12px; display: none; }
  .info-icon-btn { min-width: 36px; padding: 3px 5px; font-size: 16px; }
  .info-icon-btn .btn-label { display: none; }

  /* Town-Grid: enger */
  .town-grid { padding: 0 8px 50px; gap: 10px; }

  /* Nav: noch kompakter */
  .town-col.nav-col { font-size: 12px; }
  .town-col.nav-col a.nav { padding: 3px 8px; font-size: 12px; }

  /* Char-Card: minimal */
  .char-card { padding: 10px; }
  .char-portrait { width: 36px; height: 36px; font-size: 13px; }
  .char-name  { font-size: 13px; }
  .char-class { font-size: 10px; }
  .char-row   { font-size: 12px; }
  .char-row .k { font-size: 10px; }
  .char-bar-head { font-size: 9px; }

  /* Landing: enger */
  .hero-layout { padding: 68px 12px 68px; gap: 16px; }
  .landing-topbar { height: 60px; padding: 0 12px; }
  .topbar-logo { height: 42px; }
  .topbar-glyph { width: 28px; height: 28px; font-size: 13px; }
  .topbar-name  { font-size: 11px; letter-spacing: 0.12em; }
  .topbar-nav   { display: none; } /* Platz sparen — Login-Form reicht */
  .topbar-stats { padding: 4px 8px; font-size: 10px; }

  .hero-headline    { font-size: clamp(1.4rem, 6vw, 2rem); }
  .hero-headline-em { font-size: clamp(26px, 9vw, 44px); }
  .hero-badge       { font-size: 9px; padding: 4px 10px; }
  .hero-stats       { gap: 12px; padding: 10px 12px; }
  .hero-stat-val    { font-size: 18px; }
  .hero-stat-label  { font-size: 9px; }
  .hero-ctas        { display: none; } /* zu eng */

  .login-float  { padding: 18px 14px 16px; }
  .login-title  { font-size: 18px; }
  .login-sub    { font-size: 12px; margin-bottom: 14px; }
  .login-tabs   { margin-bottom: 14px; }
  .login-tab    { font-size: 10px; padding: 10px 0; }
  .btn-primary  { padding: 13px 16px; font-size: 12px; }

  /* Public */
  .public-main        { padding: 68px 8px 50px; }
  .public-panel-body  { padding: 12px 14px; }
  .public-panel-header { padding: 12px 14px 10px; }

  /* Bestiary-Card: enger */
  .bestiary-card { padding: 8px; gap: 8px; }
  .bestiary-name { font-size: 13px; }
  .bestiary-desc { font-size: 11px; }

  /* HOF-Tabelle: Rang + Name + Kills */
  .hof-table { font-size: 11px; }
  .hof-table th, .hof-table td { padding: 5px 6px; }

  /* Popup: schmaler */
  .popup-overlay .popup-box { width: 98vw; }

  /* Inventar */
  .iv-D { width: 98vw; height: 90vh; }
  .iv-D-foot { flex-direction: column; gap: 6px; align-items: flex-start; }
  .iv-D-foot-money { gap: 12px; }
  .iv-titlebar { flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
  .iv-search   { width: 100%; order: 3; }

  /* Dialog: enger */
  .dlg-avatar { width: 60px; height: 76px; }
  .dlg-avatar--dual { width: 94px; }
  .bubble { max-width: 85%; padding: 9px 12px; }
  .bubble-text { font-size: 15px; }
  .bubble-speaker { font-size: 12px; }
  .choice-btn { font-size: 14px; padding: 8px 10px; }
  .dlg-stage { max-height: 340px; }

  /* Wizard: enger */
  .cs-head { padding: 0 12px; height: 60px; flex-direction: row; }
  .cs-head-center { display: none; }
  .cs-head-meta   { display: none; }
  .wiz-foot { padding: 12px 14px 20px; gap: 10px; }
  .wiz-btn  { padding: 9px 18px; font-size: 11px; }

  /* Combat: noch kompakter */
  .combat-wrap .info-topbar { height: 54px; padding: 0 8px; }
  .combat-topbar-loc { top: 42px; display: none; }
  .combat-frame { height: 160px; }
  .combat-panel-head { padding: 7px 10px 6px; font-size: 9px; }
  .combat-panel-body { padding: 8px 10px 10px; }
  .combat-stat-name { font-size: 14px; }
  .hp-wrap { height: 11px; }
  .combat-action-grid { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .combat-btn { padding: 9px 8px; font-size: 12px; }
  .combat-btn .btn-sub { font-size: 8px; }
  .combat-intro-name { font-size: 20px; }
  .combat-intro-sprite { width: 120px; height: 120px; }
  .combat-end-title  { font-size: 22px; }
  .combat-end-sub    { font-size: 14px; }
  .combat-loot-box   { width: 98vw; padding: 10px 12px; }

  /* Char-Select-Page */
  .cs-head    { height: 60px; padding: 0 12px; }
  .cs-intro   { padding: 6px 12px 4px; }
  .cs-carousel-wrap { padding: 4px; gap: 4px; }
  .cs-arrow   { width: 28px; }
  .char-slot  { min-height: clamp(300px, 65vh, 550px); padding: 0 12px clamp(8px,1vh,12px); }
  .cs-portrait-frame { height: clamp(180px, 38vh, 320px); }

  /* Ticker: ausblenden auf Portrait-Phone — zu wenig Platz */
  .hero .ticker { display: none; }

} /* end @media 480px */


/* ── Landscape-Phone (kurze Höhe) ─────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

  /* Topbar: flacher */
  .info-topbar   { height: 52px; padding: 0 12px; }
  .info-logo     { height: 38px; }
  .landing-topbar { height: 52px; }
  .topbar-logo   { height: 38px; }
  .cs-head       { height: 52px; }
  .cs-logo       { height: 38px; }

  /* GameTime-Strip: ausblenden */
  .gt-strip { display: none; }

  /* Hero: kürzer */
  .hero-layout { padding: 56px 16px 56px; gap: 12px; flex-direction: row; align-items: center; }
  .hero-content { gap: 8px; }
  .hero-headline { font-size: 1.5rem; }
  .hero-headline-em { font-size: 2rem; }
  .hero-desc  { display: none; }
  .hero-stats { display: none; }
  .hero-ctas  { display: none; }
  .login-float { min-height: auto; padding: 16px 20px 14px; }
  .lf-header  { margin-bottom: 12px; }
  .lf-form    { gap: 8px; }
  .login-sub  { display: none; }

  /* Public-Main: volle Viewport-Höhe nutzen */
  .public-main { padding: 56px 12px 40px; }

  /* Town-Grid */
  .town-grid { padding: 0 12px 20px; gap: 10px; }

  /* Inventar-Popup: kleinere max-height */
  .iv-D { height: min(360px, 88vh); }

  /* Combat: Landschaft → wir haben Breite, nutzen sie */
  body.combat-page .battle-body { flex-direction: row; }
  .battle-nav {
    width: 120px;
    flex-direction: column;
    flex-wrap: nowrap;
    border-right: 1px solid var(--line);
    border-bottom: none;
    padding: 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .battle-nav .navhead    { display: block; }
  .battle-nav a.nav,
  .battle-nav span.nav    { display: block; }
  .battle-nav-sep         { display: block; }

  .combat-frame { height: auto; flex: 1; min-height: 0; }
  .combat-wrap  { height: 100vh; overflow: hidden; }
  .battle-body  { overflow: hidden; }

  /* Dock: schmaler am Boden */
  .combat-dock-wrap {
    position: absolute !important;
    left: 120px !important; right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 180px !important;
  }
  .combat-dock { grid-template-columns: 28% 52% 20%; }

  /* Info-Panels: zurück zu absolute für Landschaft */
  .combat-enemy-info {
    position: absolute !important;
    top: 16px !important; right: 2% !important;
    width: 260px !important;
  }
  .combat-player-info {
    position: absolute !important;
    bottom: 195px !important; left: 2% !important;
    width: 260px !important;
  }
  .portrait-enemy-wrap {
    position: absolute !important;
    top: 20px !important;
    right: calc(2% + 268px + 14px) !important;
    width: 100px !important; height: 100px !important;
  }
  .portrait-player-wrap {
    position: absolute !important;
    bottom: 196px !important;
    left: calc(2% + 268px + 14px) !important;
    width: 92px !important; height: 92px !important;
  }

  /* Topbar-Loc etwas höher wegen kleinerer Topbar */
  .combat-topbar-loc { top: 48px; display: flex; }

  /* Milestone-Overlay: Header kleiner */
  .ms-header { flex-basis: 22vh; }

  /* Wiz */
  .wiz-foot  { padding: 12px 24px 16px; }
  .wiz-stage { padding: 0 24px; }

} /* end landscape */

/* ── Wizard Intro ─────────────────────────────────────────────────────────────
   4-Phasen-Intro: Video → NPC-Dialog (schwarz) → Augen-Blink → Frage+Name
   Schichten innerhalb .wiz-intro (position:fixed → eigener Stacking Context):
     WICHTIG: z-index:-1 wäre hinter background:#000 des Containers → unsichtbar!
     z-index  0  → .wiz-intro-bg   (Hintergrundbild, opacity:0 bis Phase 3)
     z-index  1  → .wiz-intro-video
     z-index  2  → .wiz-intro-veil (schwarzer Schleier)
     z-index  3  → .wiz-intro-dlg / .wiz-intro-question / .wiz-intro-portrait
     z-index  4  → .wiz-intro-skip
     z-index 10001 → .cs-head (Header immer sichtbar, außerhalb des Overlays)
   ─────────────────────────────────────────────────────────────────────────── */
.wiz-intro {
  position: absolute;   /* relativ zu .wiz (position:relative, min-height:100vh) = fullscreen */
  inset: 0;
  min-height: 100vh;    /* falls .wiz kürzer als Viewport sein sollte */
  z-index: 9999;
  background: #000;
  overflow: hidden;
}

/* Hintergrundbild — startet unsichtbar, taucht in Phase 3 auf */
.wiz-intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;                                    /* NICHT -1 — wäre hinter #000-bg */
  background-image: url('assets/poi/intro_lazarett.png');
  background-size: cover;
  background-position: center center;
  opacity: 0;
  filter: blur(22px) saturate(0.85) brightness(0.45);
  transition: opacity 0.4s;
  transform: scale(1.06); /* oversized → kein sichtbarer Blur-Rand */
}

/* NPC-Portrait — VN-Stil, unten rechts, blendet in Phase 2 ein */
.wiz-intro-portrait {
  position: absolute;
  bottom: 0;
  right: 8%;
  z-index: 3;
  height: 72vh;
  max-height: 580px;
  width: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
  /* Unterkante sanft ausblenden */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 14%);
  mask-image: linear-gradient(to top, transparent 0%, black 14%);
}
.wiz-intro-portrait.visible {
  opacity: 1;
}

.wiz-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Schwarzer Schleier */
.wiz-intro-veil {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

/* Phase 2: NPC-Dialog-Panel auf schwarzem Hintergrund */
.wiz-intro-dlg {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  max-width: 600px;
}

/* NPC-Name — groß, Jade */
.wiz-intro-speaker {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--jade-bright);
  text-transform: uppercase;
  margin-bottom: 28px;
  text-shadow: 0 0 40px rgba(74,222,128,.35);
}

/* Dialog-Zeilen-Text */
.wiz-intro-text {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(20px, 3vw, 30px);
  color: rgba(220,220,210,.9);
  line-height: 1.7;
  min-height: 1.8em;
  letter-spacing: .04em;
}

/* Phase 4: Namens-Frage-Container — wie dlg aber eigene Klasse */
.wiz-intro-question {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  max-width: 560px;
  opacity: 0;
}

/* Frage-Text etwas kleiner als Speaker-Name */
.wiz-intro-qtext {
  font-size: clamp(16px, 2.4vw, 22px) !important;
  color: #ddddd0 !important;
  margin-bottom: 0;
}

/* Dunkler Halo hinter Frage-Text für Lesbarkeit */
.wiz-intro-question::before {
  content: '';
  position: absolute;
  inset: -30% -40%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.40) 50%,
    transparent 75%
  );
  pointer-events: none;
  z-index: -1;
}

/* Name-Eingabe-Zeile */
.wiz-intro-input {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: wiz-intro-fadein .7s ease both;
}
@keyframes wiz-intro-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Input-Feld — Browser-Defaults deaktiviert */
.wiz-intro-name-inp {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(74,222,128,.45);
  border-radius: 0;
  box-shadow: none !important;
  color: #e8e8d8;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(15px, 1.9vw, 20px);
  text-align: center;
  padding: 8px 4px;
  width: 240px;
  outline: none;
  transition: border-color .25s;
  caret-color: transparent;
}
.wiz-intro-name-inp:focus {
  border-bottom-color: var(--jade);
  background: transparent !important;
  caret-color: transparent;
}
.wiz-intro-name-inp::placeholder {
  color: rgba(200,200,220,.25);
  font-size: .82em;
  letter-spacing: .06em;
}
.wiz-intro-name-inp:-webkit-autofill,
.wiz-intro-name-inp:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #060a06 inset !important;
  -webkit-text-fill-color: #e8e8d8 !important;
}

/* Bestätigungs-Button */
.wiz-intro-btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(74,222,128,.45);
  color: var(--jade);
  font-size: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.wiz-intro-btn:hover {
  background: rgba(74,222,128,.12);
  border-color: rgba(74,222,128,.8);
  box-shadow: 0 0 12px rgba(74,222,128,.18);
}

/* Skip-Button — unten rechts */
.wiz-intro-skip {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  bottom: 28px;
  right: 36px;
  z-index: 4;
  background: transparent;
  border: none;
  color: rgba(200,200,220,.22);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
  transition: color .2s;
}
.wiz-intro-skip:hover {
  color: rgba(200,200,220,.6);
}

/* Schritt-Counter im Header während Intro ausblenden */
body.wiz-intro-active .cs-head-meta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
body.wiz-intro-active .wiz-progress {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}