*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Large screens (WQHD / 4K) ──
   The design is built in px for ~1920px wide screens. Above that the whole UI is scaled with CSS
   `zoom` so it keeps the FullHD look. `zoom` multiplies viewport units too, so every `Nvh` in the
   code is written as `calc(var(--vh, 1vh) * N)`; --vh is divided by the zoom factor here.
   Use that form for new vh values. */
:root { --vh: 1vh; }
@media (min-width: 2200px) { html { zoom: 1.33; } :root { --vh: calc(1vh / 1.33); } }
@media (min-width: 3000px) { html { zoom: 1.6; }  :root { --vh: calc(1vh / 1.6); } }
@media (min-width: 3600px) { html { zoom: 2; }    :root { --vh: calc(1vh / 2); } }

:root {
  --bg: #05040f;
  --white: #f0eeff;
  --silver: #c8c0e8;
  --font-display: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --nav-bg: rgba(5,4,15,0.92);
  --nav-border: rgba(160,140,255,0.1);
  --nav-text: rgba(200,190,240,0.7);
  --nav-btn-border: rgba(160,140,255,0.15);
  --nav-btn-hover-bg: rgba(124,77,255,0.1);
  --nav-btn-hover-border: rgba(160,140,255,0.45);
  --nav-dropdown-bg: rgba(8,6,22,0.96);
  --nav-dropdown-border: rgba(160,140,255,0.2);
  --nav-item-text: rgba(200,190,240,0.65);
  --nav-item-border: rgba(160,140,255,0.08);
  --nav-item-hover-bg: rgba(124,77,255,0.12);
  /* RGB triplets for theme-aware rgba() in inline styles and page CSS.
     text = body ink, accent = borders/glows, purple = brand fills, bg = page, bg2/panel = raised surfaces */
  --text-rgb: 200,190,240;
  --accent-rgb: 160,140,255;
  --purple-rgb: 124,77,255;
  --text2-rgb: 200,192,232;
  --text-hi-rgb: 240,238,255; /* near-white text variant */
  --bg-rgb: 5,4,15;
  --bg2-rgb: 8,6,22;
  --panel-rgb: 10,8,28;
  --shadow-rgb: 0,0,0;
  --shadow-k: 1;
  /* alpha multipliers for text / accent / purple tints: 1 in dark, stronger in light (low alphas wash out on white) */
  --dk: 100%; /* how much of a very dark data colour (division card gradients …) is kept; light theme fades it to a faint tint */
  --tb: 0; /* extra alpha for text colours (light theme only) */
  --cm: 0%; /* share of dark ink mixed into bright literal text colours (light theme only) */
  --ink-rgb: 30,21,64;
  --kt: 1;
  --ka: 1;
  --kp: 1;
  /* light lavender text/accent colours that must turn dark in the light theme */
  --lav: #c9b8ff;
  --lav2: #a78bff;
}

/* ── Light theme (Lavendel-weiß) ──
   Page #f6f4fc, cards/nav white, sidebar #efebfa, ink #1e1540, accent #6a3de8.
   All page CSS and inline styles use the tokens above, so only these values change. */
[data-theme="light"] {
  --bg: #f6f4fc;
  --white: #1e1540;
  --silver: #4a4170;
  --lav: #5b3bc4;
  --lav2: #6a3de8;
  --nav-bg: rgba(255,255,255,0.94);
  --nav-border: rgba(90,60,180,0.15);
  --nav-text: #3d2b7a;
  --nav-btn-border: rgba(90,60,180,0.25);
  --nav-btn-hover-bg: rgba(106,61,232,0.08);
  --nav-btn-hover-border: rgba(106,61,232,0.5);
  --nav-dropdown-bg: #ffffff;
  --nav-dropdown-border: rgba(90,60,180,0.2);
  --nav-item-text: #4a4170;
  --nav-item-border: rgba(90,60,180,0.1);
  --nav-item-hover-bg: rgba(106,61,232,0.08);
}

/* Higher specificity to override per-page :root variable re-declarations */
html[data-theme="light"] {
  --bg2: #efebfa;
  --border: rgba(90,60,180,0.16);
  --muted: #6a5c99;
  --purple-dim: rgba(106,61,232,0.08);
  --purple: #6a3de8;
  --text-rgb: 30,21,64;
  --accent-rgb: 90,60,180;
  --purple-rgb: 98,52,222;
  --text2-rgb: 74,65,112;
  --text-hi-rgb: 30,21,64;
  --bg-rgb: 246,244,252;
  --bg2-rgb: 241,238,251;
  --panel-rgb: 255,255,255;
  --shadow-rgb: 50,35,110;
  --shadow-k: 0.3;
  --dk: 7%;
  --tb: 0.28;
  --cm: 55%;
  --kt: 1.9;
  --ka: 1.55;
  --kp: 1.65;
}

/* regions that stay dark in the light theme (artwork banners): restore the dark token values inside */
html[data-theme="light"] .dark-scope {
  --bg: #05040f; --white: #f0eeff; --silver: #c8c0e8; --lav: #c9b8ff; --lav2: #a78bff;
  --text-rgb: 200,190,240; --accent-rgb: 160,140,255; --purple-rgb: 124,77,255; --text2-rgb: 200,192,232; --text-hi-rgb: 240,238,255;
  --bg-rgb: 5,4,15; --bg2-rgb: 8,6,22; --panel-rgb: 10,8,28; --shadow-rgb: 0,0,0; --shadow-k: 1;
  --kt: 1; --ka: 1; --kp: 1; --dk: 100%; --tb: 0; --cm: 0%;
  color: var(--white);
}

/* division pages: per-division text tints are light-on-dark values, switch to ink */
html[data-theme="light"] {
  --dv-aside: rgba(239,235,250,0.97);
  --dv-toc-indent: rgba(var(--text-rgb),calc(0.6*var(--kt)));
  --dv-toc: rgba(var(--text-rgb),calc(0.8*var(--kt)));
  --dv-divider: rgba(var(--accent-rgb),calc(0.6*var(--ka)));
  --dv-text: rgba(var(--text-rgb),calc(0.85*var(--kt)));
  --dv-dim: 30,21,64;
}

html[data-theme="light"] body::after, html[data-theme="light"] .rez-root::after { display: none !important; }
/* neon glows around text are a dark-theme effect; on a light page they only smear the ink */
html[data-theme="light"] * { text-shadow: none !important; }

/* ── Sidebars — inline styles require !important ── */
[data-theme="light"] .div-aside { background: rgba(239,235,250,0.97) !important; }
[data-theme="light"] .page-root aside {
  background: rgba(239,235,250,0.97) !important;
  border-right-color: rgba(90,60,180,0.14) !important;
}

/* ── Page header banner ── */
[data-theme="light"] .ph-root {
  background: linear-gradient(180deg, rgba(106,61,232,0.10) 0%, rgba(106,61,232,0.03) 100%) !important;
  border-bottom-color: rgba(90,60,180,0.16) !important;
}

/* ── Float nav buttons ── */
[data-theme="light"] .float-nav-btn { background: #ffffff; color: #5b30d6; border-color: rgba(90,60,180,0.25); }
[data-theme="light"] .float-nav-btn:hover { background: rgba(106,61,232,0.12); color: var(--white); }

/* ── Sort / filter buttons ── */
[data-theme="light"] .sort-btn { color: rgba(74,65,112,0.7) !important; }
[data-theme="light"] .sort-btn.active { background: rgba(106,61,232,0.1) !important; border-color: rgba(106,61,232,0.4) !important; color: var(--white) !important; }
[data-theme="light"] .sort-btn:hover:not(.active) { color: #4a2db0 !important; background: rgba(106,61,232,0.06) !important; }

/* ── Home page ── */
[data-theme="light"] .home-title { color: var(--white); text-shadow: none; }
[data-theme="light"] .home-subtitle { color: #4a4170; }
[data-theme="light"] .home-eyebrow { color: #5b30d6; }
[data-theme="light"] .home-link { color: #4a2db0; border-color: rgba(106,61,232,0.4); background: rgba(106,61,232,0.06); }
[data-theme="light"] .home-link:hover { background: rgba(106,61,232,0.14); color: var(--white); }

/* ── Race/class stat tables ── */
[data-theme="light"] .stat-table td { border-bottom-color: rgba(90,60,180,0.12); }
[data-theme="light"] .stat-table td:first-child { color: #6a5c99; }
[data-theme="light"] .stat-table td:last-child { color: var(--white); }
[data-theme="light"] .stat-table tr:hover td { background: rgba(106,61,232,0.05); }
[data-theme="light"] .roll-table td { border-bottom-color: rgba(90,60,180,0.1); }
[data-theme="light"] .roll-table td:last-child { color: var(--white); }
[data-theme="light"] .roll-table tr.highlight td { color: var(--white); }

/* ── Race/class feature blocks and labels ── */
[data-theme="light"] .feature-text { color: #2e2456; }
[data-theme="light"] .name-cell { color: #4a4170; border-bottom-color: rgba(90,60,180,0.1); border-right-color: rgba(90,60,180,0.08); }
[data-theme="light"] .name-cell:hover { color: var(--white); }
[data-theme="light"] .name-cell .num { color: #7a6cb0; }
[data-theme="light"] .relation-pill { color: #4a4170; }
[data-theme="light"] .relation-pill:hover { color: var(--white); }
[data-theme="light"] .back-btn { color: #5b4d8c; }
[data-theme="light"] .back-btn:hover { color: var(--white); }

/* ── Monster page ── */
[data-theme="light"] .section-label { color: #5b30d6; border-bottom-color: rgba(90,60,180,0.22); }
[data-theme="light"] .stat-divider { background: rgba(90,60,180,0.2); }

html { scrollbar-gutter: stable; }
html, body { width: 100%; min-height: 100%; background: var(--bg); color: var(--white); font-family: var(--font-body); overflow-x: hidden; }
#root { width: 100%; min-height: calc(var(--vh, 1vh) * 100); }

body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--purple-rgb),calc(0.3*var(--kp))); border-radius: 2px; }

.reveal-up   { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal-up.visible   { opacity: 1; transform: translateY(0); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.page-root { position: relative; min-height: calc(var(--vh, 1vh) * 100); }
.page-body { display: flex; align-items: flex-start; position: relative; z-index: 5; min-height: calc(calc(var(--vh, 1vh) * 100) - var(--nav-h)); padding-left: var(--sidebar-w); }

.float-nav-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--panel-rgb),0.88); border: 1px solid rgba(var(--purple-rgb),calc(0.25*var(--kp))); color: rgba(var(--purple-rgb),calc(0.7*var(--kp) + var(--tb))); cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); }
.float-nav-btn:hover { background: rgba(var(--purple-rgb),calc(0.18*var(--kp))); border-color: rgba(var(--purple-rgb),calc(0.55*var(--kp))); color: var(--white); box-shadow: 0 0 14px rgba(var(--purple-rgb),calc(0.25*var(--kp))); }

.sort-btn { width: 100%; text-align: left; padding: 5px 8px; background: transparent; border: 1px solid transparent; border-radius: 2px; color: rgba(var(--text-rgb),calc(0.45*var(--kt) + var(--tb))); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; cursor: pointer; transition: all 0.15s; }
.sort-btn.active { background: rgba(var(--accent-rgb),calc(0.1*var(--ka))); border-color: rgba(var(--accent-rgb),calc(0.35*var(--ka))); color: var(--white); }
.sort-btn:hover:not(.active) { color: rgba(var(--text-rgb),calc(0.72*var(--kt) + var(--tb))); background: rgba(var(--accent-rgb),calc(0.04*var(--ka))); }

/* ── Responsive ──
   Breakpoints: 480 (phone) / 768 (tablet) / 1100 (small desktop), mobile-first where possible. */
img, video, canvas, svg { max-width: 100%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }

.meruria-sidebar-toggle { display: none; }

@media (max-width: 1024px) {
  /* three-panel layouts (filters | content | detail) stack on tablet and phone */
  [style*="grid-template-columns: 240px 1fr 240px"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 768px) {
  /* No fixed sidebar below 768px; `html:root` outranks the per-page `:root { --sidebar-w }` declarations */
  html:root { --sidebar-w: 0px; }
  .page-body { padding-left: 0 !important; }
  .page-root aside, .div-aside, aside[style*="--sidebar-w"], [data-mobile-drawer] { display: none !important; }

  /* Sidebar drawer: opened by SidebarToggle (src/components/nav.jsx) via html.sidebar-open */
  /* Floating round button, always on screen while scrolling. It is portalled to <body> (nav.jsx) and
     anchored with `top: 100dvh - …` because `bottom` is measured from the layout viewport on mobile
     and ends up behind the browser toolbar until it collapses; dvh follows the visible area. */
  .meruria-sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 200;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--nav-dropdown-bg); color: var(--nav-text);
    border: 1px solid var(--nav-btn-border); font-size: 18px; cursor: pointer;
    backdrop-filter: blur(12px); box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  }
  @supports (height: 100dvh) {
    .meruria-sidebar-toggle { bottom: auto; top: calc(100dvh - 62px - env(safe-area-inset-bottom, 0px)); }
  }
  /* Content hardening: wide tables scroll inside themselves, long words wrap */
  table { max-width: 100%; }
  /* only tables that really overflow their container scroll sideways (class set by TableStacker in nav.jsx);
     a bare `display:block` table would shrink to its content and not fill the container */
  table.rt-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* compact cells so 3-4 column tables fit a phone; header cells may wrap (inline nowrap needs !important) */
  table th { white-space: normal !important; letter-spacing: 0.04em !important; font-size: 9.5px !important; }
  table td { font-size: 12px !important; }
  table th, table td { padding-left: 6px !important; padding-right: 6px !important; }
  /* Wide tables (5+ columns, class set by the Table component): each row becomes a card, the
     column label (data-label) is shown in front of every value. */
  table.rt-stack, table.rt-stack tbody, table.rt-stack tr { display: block !important; width: 100%; }
  table.rt-stack thead { display: none !important; }
  table.rt-stack tr { padding: 10px 0; border-bottom: 1px solid rgba(var(--purple-rgb),calc(0.18*var(--kp))) !important; }
  table.rt-stack td { display: grid !important; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr); gap: 10px;
    width: 100%; text-align: left !important; padding: 4px 12px !important; }
  table.rt-stack td::before {
    content: attr(data-label); font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--purple-rgb),calc(0.7*var(--kp) + var(--tb))); padding-top: 3px;
  }
  table.rt-stack td > * { justify-self: start; min-width: 0; } /* e.g. rarity pills keep their own width */
  table.rt-stack td:first-child { display: flex !important; align-items: center; gap: 10px; font-size: 14px !important; padding-bottom: 6px !important; }
  table.rt-stack td:first-child::before { display: none; }
  /* cells without a label (colspan detail rows) use the full width */
  table.rt-stack td:not([data-label]), table.rt-stack td[data-label=""] { display: block !important; }
  table.rt-stack td:not([data-label])::before, table.rt-stack td[data-label=""]::before { display: none; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  /* Inline-style grids (set via style={{ gridTemplateColumns }} in JSX): card grids with 3+ equal
     columns become 2 columns, uneven/paired layouts stack. Already fluid grids (auto-fit/auto-fill) stay. */
  [style*="grid-template-columns: repeat("]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1fr auto 1fr"],
  [style*="grid-template-columns: 280px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: minmax("], /* two-pane tool layouts: minmax(260px, 1fr) minmax(280px, 1fr) */
  [style*="grid-template-columns: 170px 1fr 1fr"],
  [style*="grid-template-columns: 220px 1fr 290px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Card grids with a large minimum column width (minmax(360px+, 1fr)) cannot fit a phone */
  [style*="minmax(360px"], [style*="minmax(380px"], [style*="minmax(400px"], [style*="minmax(420px"], [style*="minmax(440px"], [style*="minmax(480px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Tab / button rows that were built as one non-wrapping flex line */
  .rez-tabs, [role="tablist"] { flex-wrap: wrap; }
  button, select, input, textarea { max-width: 100%; }
  input, select, textarea { font-size: max(16px, 1em); } /* iOS Safari zooms into smaller fields */

  /* .page-body is a stacking context (z-index 5), so lift it above the page header (10) and nav (100) */
  html.sidebar-open .page-body { z-index: 150 !important; }
  html.sidebar-open .page-body::before {
    content: ''; position: fixed; inset: 0; z-index: 1; background: rgba(0,0,0,0.55);
  }
  html.sidebar-open .page-root aside,
  html.sidebar-open .div-aside,
  html.sidebar-open aside[style*="--sidebar-w"],
  html.sidebar-open [data-mobile-drawer] {
    display: block !important;
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(86vw, 320px) !important; height: auto !important; max-height: none !important;
    padding-top: 20px !important; overflow-y: auto !important; z-index: 2 !important;
    background-image: linear-gradient(rgba(var(--bg-rgb), 0.96), rgba(var(--bg-rgb), 0.96)) !important;
    box-shadow: 6px 0 28px rgba(0,0,0,0.5);
  }
  /* Pages without .page-body (e.g. Informationen): no stacking-context lift or ::before overlay,
     so raise the drawer itself above the nav and dim the page with a huge shadow spread */
  html.sidebar-open aside[style*="--sidebar-w"],
  html.sidebar-open [data-mobile-drawer] {
    z-index: 150 !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55) !important;
  }
}
@media (max-width: 480px) {
  /* Page wrappers with desktop side padding (inline `padding: 46px 36px 80px` etc.) */
  [style*="max-width: 1380px"], [style*="max-width: 1280px"], [style*="max-width: 1200px"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  html.sidebar-open .page-root aside,
  html.sidebar-open .div-aside,
  html.sidebar-open aside[style*="--sidebar-w"],
  html.sidebar-open [data-mobile-drawer] { width: 88vw !important; }
}

/* ── Card rows (races, classes, deities …) ──
   Rows of text-heavy cards are laid out as `repeat(N, 1fr)` with a `scroll-margin-top` (used by the TOC jump
   links). Below 1100px they switch to a fluid grid with a 260px minimum, so phones get one card per row.
   Placed last and with extra attribute selectors so it beats the generic inline-grid rules above. */
@media (max-width: 1100px) {
  [style*="grid-template-columns: repeat("][style*="scroll-margin-top"][style*="display: grid"][style] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }
}

/* ── Master/detail pages on phones (talente, zauber, hintergruende, monster …) ──
   Desktop: filter | list | detail side by side. Below 768px: the filter becomes the drawer
   ([data-mobile-drawer], opened by the round button) and list and detail alternate. MasterDetailMobile
   (src/components/nav.jsx) sets data-pane="detail" when a row is tapped and shows the "← Liste" button. */
.meruria-pane-back { display: none; }
@media (max-width: 768px) {
  /* Bigger UI on phones for the master/detail pages: lists, details and the header strip are scaled up
     (zoom is applied to the children, never to the vh-sized containers, so heights stay correct). */
  .md-list > *, .md-detail > *, .md-head-title, .md-head-title + div, [data-mobile-drawer] > * { zoom: 1.25; }
  .md-head-title[style] { width: auto !important; flex: 0 0 auto !important; padding: 10px 14px !important; border-right: none !important; }
  /* Header with many filter chips (e.g. spell classes): title on its own row, chips wrap below instead of
     a swipe strip that looks cut off. Headers with few chips (talente) stay as they are. */
  div:has(> .md-head-title + div > :nth-child(5)), div:has(> .md-head-title + div > p:only-child) { flex-wrap: wrap !important; }
  div:has(> .md-head-title + div > :nth-child(5)) > .md-head-title, div:has(> .md-head-title + div > p:only-child) > .md-head-title { flex: 1 0 100% !important; flex-direction: row !important; align-items: baseline; justify-content: flex-start !important; gap: 12px !important; padding-bottom: 2px !important; }
  .md-head-title + div:has(> p:only-child) { flex: 1 0 100% !important; padding: 0 14px 10px !important; } /* description blurb (hintergruende) */
  .md-head-title + div:has(> :nth-child(5)) { flex: 1 0 100% !important; flex-wrap: wrap !important; overflow: visible !important; padding: 2px 14px 12px !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .md-body > .md-list[style] { width: 100% !important; flex: 1 1 auto !important; border-right: none !important; min-width: 0; }
  .md-body > .md-detail { width: 100% !important; flex: 1 1 auto !important; min-width: 0; }
  .md-body:not([data-pane="detail"]) > .md-detail { display: none !important; }
  .md-body[data-pane="detail"] > .md-list { display: none !important; }
  html.sidebar-open .md-body { z-index: 150 !important; } /* lift the pane row above the nav when the drawer is open */
  .meruria-pane-back {
    display: flex; align-items: center; position: fixed; left: 72px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 200;
    height: 48px; padding: 0 18px; border-radius: 24px; cursor: pointer;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--nav-dropdown-bg); color: var(--nav-text); border: 1px solid var(--nav-btn-border);
    backdrop-filter: blur(12px); box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  }
  @supports (height: 100dvh) {
    .meruria-pane-back { bottom: auto; top: calc(100dvh - 62px - env(safe-area-inset-bottom, 0px)); }
  }
}

/* Detailansicht Klassen/Gottheiten: Portrait über dem Text statt daneben */
@media (max-width: 768px) {
  .detail-topbar.detail-topbar {
    padding: 12px 16px !important;
    gap: 10px;
    flex-wrap: wrap;
  }
  .detail-topbar > div { min-width: 0; overflow-wrap: break-word; }
  .detail-split.detail-split {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0;
  }
  .detail-portrait.detail-portrait {
    width: 100% !important;
    flex: 0 0 calc(var(--vh, 1vh) * 55) !important;
    height: calc(var(--vh, 1vh) * 55);
    min-height: 280px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(160, 140, 255, 0.12);
  }
  .detail-content.detail-content {
    flex: 0 0 auto !important;
    overflow: visible !important;
    padding: 24px 18px 40px !important;
  }
}
@media (max-width: 768px) {
  .detail-content.detail-content { padding-right: 52px !important; }
}

/* Charakterbogen (SteckbriefView): the inline sizes are 6-12px, too small to read on a phone */
@media (max-width: 768px) {
  .steckbrief-root [style*="font-size: 6px"],
  .steckbrief-root [style*="font-size: 6.5px"],
  .steckbrief-root [style*="font-size: 7px"],
  .steckbrief-root [style*="font-size: 7.5px"] { font-size: 11px !important; }
  .steckbrief-root [style*="font-size: 8px"],
  .steckbrief-root [style*="font-size: 8.5px"],
  .steckbrief-root [style*="font-size: 9px"] { font-size: 12px !important; }
  .steckbrief-root [style*="font-size: 10px"],
  .steckbrief-root [style*="font-size: 10.5px"],
  .steckbrief-root [style*="font-size: 11px"] { font-size: 14px !important; }
  .steckbrief-root [style*="font-size: 11.5px"],
  .steckbrief-root [style*="font-size: 12px"],
  .steckbrief-root [style*="font-size: 12.5px"],
  .steckbrief-root [style*="font-size: 13px"] { font-size: 15px !important; line-height: 1.6; }
}
@media (max-width: 768px) {
  .steckbrief-root .attr-row[style] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Charakterbogen header on phones: back/edit in one row, name, tags, XP as a labelled row */
@media (max-width: 768px) {
  .steckbrief-root .sb-head[style] { padding: 16px 16px 16px !important; }
  .steckbrief-root .sb-crumb { display: none !important; }
  .steckbrief-root .sb-top[style] { margin-bottom: 14px !important; }
  .steckbrief-root .sb-top button { padding: 10px 16px !important; min-height: 40px; }
  .steckbrief-root .sb-main[style] { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 14px !important; }
  .steckbrief-root .sb-name { font-size: 26px !important; letter-spacing: 0.14em !important; line-height: 1.2; overflow-wrap: break-word; }
  .steckbrief-root .sb-tags[style] { gap: 8px !important; margin-top: 12px !important; }
  .steckbrief-root .sb-tags > span { letter-spacing: 0.04em !important; padding: 4px 10px !important; line-height: 1.4; }
  .steckbrief-root .sb-xp[style] { display: flex; justify-content: space-between; align-items: baseline; text-align: left !important; padding-top: 12px; border-top: 1px solid rgba(var(--purple-rgb), calc(0.15*var(--kp))); }
  .steckbrief-root .sb-xp > div { margin: 0 !important; }
}

/* NSC detail panel: full screen on phones (no slide-in from the right); overall progress block left-aligned and full width */
@media (max-width: 768px) {
  .nsc-panel[style] { width: 100% !important; border-left: 0 !important; box-shadow: none !important; animation: fadeIn 0.2s ease !important; }
  .nsc-panel-head[style] { padding: 12px 16px !important; gap: 12px; }
  .nsc-panel-head button { padding: 10px 14px !important; font-size: 12px !important; }
  .nsc-panel-hero[style] { padding: 20px 18px 12px !important; gap: 16px !important; }
  .nsc-progress[style] { text-align: left !important; min-width: 0 !important; width: 100%; }
  .nsc-progress-legend[style] { justify-content: flex-start !important; flex-wrap: wrap; gap: 8px 16px !important; font-size: 11px !important; }
}

/* Spielercharakter cards: player chip sits in the flow above the portrait instead of overlapping the name */
@media (max-width: 768px) {
  .sc-card .sc-chip[style] { position: relative !important; top: auto !important; right: auto !important; align-self: flex-start; width: fit-content; max-width: 100%; margin: 0 0 14px; }
  .sc-card .sc-headtext[style] { padding-right: 0 !important; }
  .sc-card [style*="font-size: 7px"], .sc-card [style*="font-size: 7.5px"] { font-size: 10px !important; }
  .sc-card [style*="font-size: 8px"], .sc-card [style*="font-size: 8.5px"], .sc-card [style*="font-size: 9px"] { font-size: 11px !important; }
}