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

    :root {
      --bg: #faf6ee;
      --bg-image: url('../altes_Papier.png');
      --text: #2a1a0e;
      --accent: #8b5a2b;
      --accent-dark: #654321;
      --accent-muted: #5c3a1e;
      --border: #c9a87c;
      --border-light: #e5d5c0;
      --surface: rgba(250, 246, 238, 0.8);
      --surface-strong: rgba(240, 232, 213, 0.82);
      --field-bg: rgba(250, 246, 238, 0.6);
      --disabled-bg: rgba(240, 232, 213, 0.7);
      --button-bg: #8b5a2b;
      --button-text: #faf6ee;
      --button-inactive-bg: rgba(240, 232, 213, 0.8);
      --button-inactive-text: #5c3a1e;
      --mini-button-hover-bg: rgba(230, 214, 191, 0.8);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #1b1410;
        --bg-image: linear-gradient(rgba(27, 20, 16, 0.8), rgba(27, 20, 16, 0.8)), url('../altes_Papier.png');
        --text: #f3e9db;
        --accent: #d6a670;
        --accent-dark: #b07b46;
        --accent-muted: #d1b38f;
        --border: #6a4a31;
        --border-light: #3d2b1d;
        --surface: rgba(34, 25, 19, 0.85);
        --surface-strong: rgba(44, 32, 24, 0.85);
        --field-bg: rgba(55, 41, 30, 0.6);
        --disabled-bg: rgba(55, 41, 30, 0.45);
        --button-bg: #7a5332;
        --button-text: #f9f1e7;
        --button-inactive-bg: rgba(60, 44, 32, 0.7);
        --button-inactive-text: #d3b89a;
        --mini-button-hover-bg: rgba(86, 61, 43, 0.7);
      }
    }

    body { font-family: 'Crimson Text', serif; background-color: var(--bg); background-image: var(--bg-image); color: var(--text); padding: 20px; }

    .container { max-width: 1000px; margin: 0 auto; }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .header h1 {
      font-family: 'Cinzel', serif;
      font-size: 26px;
      color: var(--accent);
      letter-spacing: 2px;
    }

    .buttons { display: flex; gap: 8px; flex-wrap: wrap; }

    .version-tag {
      font-family: 'Cinzel', serif;
      font-size: 9px;
      color: var(--accent-muted);
      align-self: center;
      padding: 0 4px;
      letter-spacing: 1px;
    }

    .slot-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 16px;
      border: 1px solid var(--border-light);
      background: var(--surface);
      padding: 8px 10px;
    }

    .slot-bar select { max-width: 240px; width: auto; }

    button {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      padding: 8px 16px;
      background: var(--button-bg);
      color: var(--button-text);
      border: 2px solid var(--accent);
      cursor: pointer;
      transition: background 0.2s;
    }

    button:hover { background: var(--accent-dark); }
    button.inactive { background: var(--button-inactive-bg); color: var(--button-inactive-text); }

    .nav { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }

    .page { display: none; }
    .page.active { display: block; }

    .box {
      border: 2px solid var(--accent);
      background: var(--surface);
      padding: 15px;
      margin-bottom: 15px;
    }

    label {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 1px;
      display: block;
      margin-bottom: 4px;
    }

    input[type="text"],
    input[type="search"],
    input[type="number"],
    textarea,
    select {
      font-family: 'Crimson Text', serif;
      font-size: 14px;
      color: var(--text);
      background: var(--field-bg);
      border: none;
      border-bottom: 1px solid var(--border);
      padding: 4px 6px;
      width: 100%;
      outline: none;
    }

    input:disabled,
    textarea:disabled {
      background: var(--disabled-bg);
      cursor: not-allowed;
      opacity: 0.8;
    }

    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
    .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .grid6 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 8px; }

    .attr-tile {
      border: 2px solid var(--accent);
      background: var(--surface-strong);
      text-align: center;
      padding: 10px 6px;
    }

    .attr-tile-name {
      font-family: 'Cinzel', serif;
      font-size: 9px;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .attr-tile-mod {
      font-family: 'Cinzel', serif;
      font-size: 20px;
      font-weight: bold;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .attr-tile input {
      border: 1px solid var(--border);
      background: var(--field-bg);
      font-family: 'Cinzel', serif;
      font-size: 14px;
      text-align: center;
      padding: 2px;
      width: 50px;
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 12px 0 8px;
    }

    .divider-line { flex: 1; border-top: 1px solid var(--border); }

    .divider-title {
      font-family: 'Cinzel', serif;
      font-size: 9px;
      color: var(--accent);
      letter-spacing: 1px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .skill-item {
      display: flex;
      align-items: center;
      padding: 4px 2px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
      font-size: 13px;
    }

    .skill-item .dot {
      width: 10px;
      height: 10px;
      border: 1.5px solid var(--accent);
      border-radius: 50%;
      margin-right: 6px;
      flex-shrink: 0;
    }

    .skill-item .dot.checked { background: var(--accent); }

    .skill-name { flex: 1; }
    .skill-attr { font-size: 10px; color: var(--accent); margin: 0 6px; }
    .skill-bonus { font-weight: bold; color: var(--accent-muted); min-width: 30px; text-align: right; }
    .skill-expert {
      font-family: 'Cinzel', serif;
      font-size: 9px;
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: 1px 4px;
      border-radius: 2px;
      margin-left: 6px;
      opacity: 0.2;
    }
    .skill-expert.active { background: var(--accent); color: var(--button-text); opacity: 1; }

    .checkbox-field {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
    }
    .checkbox-field input { width: 16px; height: 16px; }

    #inspiration-box {
      border: 2px solid var(--accent);
      background: var(--field-bg);
    }
    #inspiration-box.active { background: var(--accent); }

    .display-value {
      border: 1px solid var(--accent);
      background: var(--surface-strong);
      padding: 4px 6px;
      text-align: center;
    }

    .display-value input {
      background: transparent;
      border: none;
      font-family: 'Cinzel', serif;
      font-size: 14px;
      font-weight: bold;
      color: var(--accent);
      text-align: center;
    }

    .display-value-label {
      font-family: 'Cinzel', serif;
      font-size: 8px;
      color: var(--accent);
    }

    .weight-field { position: relative; width: 100%; }
    .weight-field input { padding-right: 18px; }
    .weight-field::after {
      content: "kg";
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 10px;
      color: var(--accent);
      pointer-events: none;
    }

    .textarea-field textarea {
      min-height: 60px;
      resize: vertical;
    }

    .field-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .field-header label { margin-bottom: 0; }

    .field-actions { display: flex; gap: 6px; }

    .mini-button {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      padding: 4px 8px;
      background: var(--surface-strong);
      color: var(--accent-muted);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.2s;
    }

    .mini-button:hover { background: var(--mini-button-hover-bg); }
    .mini-button:disabled { opacity: 0.6; cursor: not-allowed; }

    #page1 .grid6 {
      margin-bottom: 15px;
    }

    .notes-column {
      display: flex;
      flex-direction: column;
    }

    .notes-column textarea:not(#notizen),
    .notes-column .rich-field:not(#notizen) {
      margin-bottom: 12px;
    }

    .notes-column #notizen {
      flex: 1;
      min-height: 415px;
      resize: vertical;
    }

    .rich-field {
      display: block;
      font-family: 'Crimson Text', serif;
      font-size: 14px;
      color: var(--text);
      background: var(--field-bg);
      border: none;
      border-bottom: 1px solid var(--border);
      padding: 4px 6px;
      width: 100%;
      outline: none;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-word;
      min-height: 60px;
    }

    .rich-field:focus {
      background: var(--surface-strong);
    }

    .rich-field h1, .editor-body h1,
    .rich-field h2, .editor-body h2,
    .rich-field h3, .editor-body h3 {
      font-family: 'Cinzel', serif;
      color: var(--accent);
      margin: 4px 0 2px;
      line-height: 1.2;
    }

    .rich-field h1, .editor-body h1 { font-size: 20px; }
    .rich-field h2, .editor-body h2 { font-size: 17px; }
    .rich-field h3, .editor-body h3 { font-size: 15px; }

    .rich-field ul, .editor-body ul,
    .rich-field ol, .editor-body ol {
      padding-left: 20px;
      margin: 4px 0;
    }

    .rich-field hr, .editor-body hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 8px 0;
    }

    .rich-field p, .editor-body p {
      margin: 0 0 4px;
    }

    .editor-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 10, 5, 0.75);
      backdrop-filter: blur(2px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 15px;
    }

    .editor-overlay.active {
      display: flex;
    }

    .editor-modal {
      background-color: var(--bg);
      background-image: var(--bg-image);
      border: 2px solid var(--accent);
      box-shadow: 0 0 0 3px var(--surface-strong), 0 20px 50px rgba(0,0,0,0.6);
      width: 100%;
      max-width: 820px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      overflow: hidden;
    }

    .editor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 2px solid var(--accent);
      background: var(--surface);
    }

    .editor-header-title {
      font-family: 'Cinzel', serif;
      font-size: 16px;
      color: var(--accent);
      letter-spacing: 2px;
      font-weight: bold;
    }

    .editor-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 12px;
      background: var(--surface-strong);
      border-bottom: 1px solid var(--border);
      align-items: center;
    }

    .editor-select {
      width: auto;
      padding: 4px 8px;
      font-family: 'Cinzel', serif;
      font-size: 11px;
      border: 1px solid var(--border);
      background: var(--field-bg);
      color: var(--text);
      cursor: pointer;
    }

    .editor-sep {
      border-left: 1px solid var(--border);
      height: 18px;
      margin: 0 2px;
    }

    .editor-body {
      flex: 1;
      min-height: 280px;
      max-height: 55vh;
      overflow-y: auto;
      padding: 16px;
      font-family: 'Crimson Text', serif;
      font-size: 16px;
      line-height: 1.5;
      color: var(--text);
      background: var(--field-bg);
      outline: none;
      border: none;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .editor-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 16px;
      background: var(--surface);
      border-top: 1px solid var(--border-light);
    }

    .spell-grid .box {
      margin-bottom: 0;
    }

    .image-preview {
      margin-top: 12px;
      height: 160px;
      border: 1px dashed var(--border);
      background: var(--surface-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: var(--accent);
      font-size: 11px;
    }

    .image-preview img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .notes-box textarea {
      min-height: 180px;
      resize: vertical;
    }

    .spell-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    /* ===== DUNGEON MASTER BEREICH ===== */
    .dm-badge {
      font-family: 'Cinzel', serif;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--button-text);
      background: linear-gradient(135deg, var(--accent-dark), var(--accent));
      border: 1px solid var(--border);
      padding: 2px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .nav button.dm-btn { border-style: double; border-width: 3px; }
    /* Reiter */
    .dm-tabs {
      display: flex; gap: 6px; margin-bottom: 15px; flex-wrap: wrap;
      position: sticky; top: 0; z-index: 50;
      background-color: var(--bg); background-image: var(--bg-image);
      padding: 8px 0;
      border-bottom: 1px solid var(--border-light);
    }
    .dm-tab {
      font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 1px;
      padding: 8px 14px; background: var(--surface-strong); color: var(--accent-muted);
      border: 1px solid var(--border); transition: background .2s, color .2s;
    }
    .dm-tab:hover { background: var(--mini-button-hover-bg); }
    .dm-tab.active { background: var(--button-bg); color: var(--button-text); border-color: var(--accent); }
    .dm-panel { display: none; }
    .dm-panel.active { display: block; }
    .dm-panel > .box:last-child { margin-bottom: 0; }
    /* Wiederverwendbare Bausteine */
    .dm-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
    .dm-spacer { flex: 1; }
    .dm-search { flex: 1 1 240px; min-width: 0; }
    .dm-count { font-family: 'Cinzel', serif; font-size: 10px; color: var(--accent-muted); letter-spacing: 1px; white-space: nowrap; }
    .dm-hint { font-size: 12px; color: var(--accent-muted); margin-top: auto; }
    .dm-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .dm-subhead label { margin-bottom: 0; }
    .dm-subbox { border: 1px solid var(--border); background: var(--surface-strong); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
    .dm-field { flex: 1 1 auto; min-width: 0; }
    .dm-field-sm { flex: 0 0 84px; }
    .dm-empty { font-size: 13px; color: var(--accent-muted); font-style: italic; }
    .dm-result { font-size: 14px; line-height: 1.6; }
    .dm-col { display: flex; flex-direction: column; min-width: 0; }
    .dm-list { max-height: 460px; overflow-y: auto; border: 1px solid var(--border-light); background: var(--surface-strong); padding: 4px; }
    .dm-list-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-bottom: 1px solid var(--border-light); cursor: pointer; font-size: 13px; }
    .dm-list-item:last-child { border-bottom: none; }
    .dm-list-item:hover { background: var(--mini-button-hover-bg); }
    .dm-list-item.active { background: var(--accent); color: var(--button-text); }
    .dm-list-item .dm-list-emoji { font-size: 17px; flex-shrink: 0; }
    .dm-list-item .dm-list-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dm-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
    .dm-row:last-child { border-bottom: none; }
    .dm-row .dm-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row label, label.dm-row { font-family: 'Crimson Text', serif; font-size: 13px; font-weight: normal; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: 0; cursor: pointer; }
    .dm-row select { flex: 1; min-width: 0; }
    .dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .dm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
    .dm-card {
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent);
      background: var(--surface);
      padding: 12px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .dm-card-head { display: flex; align-items: center; gap: 8px; }
    .dm-card-head > div { flex: 1; min-width: 0; }
    .dm-card-head .dm-chip { margin-left: auto; }
    .dm-card .emoji { font-size: 30px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
    .dm-card h3 { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); }
    .dm-card .sub { font-size: 12px; color: var(--accent-muted); }
    .dm-card .text { font-size: 13px; line-height: 1.45; }
    .dm-card-plain { border: none; border-top: none; padding: 0; background: transparent; }
    .dm-card .stat-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .dm-card .stat-row .dm-chip { margin-left: 0; }
    .dm-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-light); }
    .dm-chip {
      font-family: 'Cinzel', serif; font-size: 10px;
      border: 1px solid var(--border); background: var(--surface-strong);
      padding: 2px 6px; color: var(--accent-muted); white-space: nowrap;
    }
    .hp-tracker { display: flex; align-items: center; gap: 4px; background: var(--surface-strong); border: 1px solid var(--border); padding: 4px; }
    .hp-tracker button { flex: 1; padding: 4px 0; font-size: 12px; }
    .hp-val { font-family: 'Cinzel', serif; font-weight: bold; font-size: 15px; color: var(--accent); min-width: 62px; text-align: center; }
    .hp-bar { height: 7px; background: var(--border-light); border: 1px solid var(--border); }
    .hp-bar > div { height: 100%; background: linear-gradient(90deg, #7a2e2e, #b0413e); transition: width .3s; }
    /* 3D Würfel */
    .dice-select { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
    .dice-select button.picked { background: var(--accent-dark); box-shadow: 0 0 0 2px var(--border); }
.dice-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: stretch; }
.dice-main { border: 1px solid var(--border-light); background: var(--surface-strong); padding: 12px; display: flex; align-items: center; justify-content: center; }
.dice-stage { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
    .dice-visual { width: 240px; max-width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; }
    .dice-scene { width: 150px; height: 150px; perspective: 600px; display: flex; align-items: center; justify-content: center; }
    #dice3d { display: none; width: 100%; }
    #dice3d canvas { width: 100%; height: auto; display: block; }
    .dice-readout { text-align: center; }
    .dice-result-label { font-family: 'Cinzel', serif; font-size: 12px; color: var(--accent-muted); letter-spacing: 1px; }
.dice-log-col { min-width: 0; display: flex; flex-direction: column; }
.dice-log { flex: 1; overflow-y: auto; font-size: 13px; border: 1px solid var(--border-light); background: var(--surface-strong); padding: 4px 8px; }
    .dice-log div { padding: 4px 0; border-bottom: 1px solid var(--border-light); }
    .dice-log div:last-child { border-bottom: none; }
    .dice-cube {
      width: 110px; height: 110px; position: relative;
      display: flex; align-items: center; justify-content: center;
      transition: transform .3s;
    }
    .dice-cube.rolling { animation: diceTumble .9s ease-in-out; }
    @keyframes diceTumble {
      0% { transform: rotate(0) scale(1); }
      25% { transform: rotate(200deg) scale(1.18) skewX(6deg); }
      55% { transform: rotate(420deg) scale(.92) skewX(-5deg); }
      80% { transform: rotate(620deg) scale(1.05); }
      100% { transform: rotate(720deg) scale(1); }
    }
    .dice-shape {
      width: 104px; height: 104px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-weight: bold; font-size: 30px; color: var(--accent);
      background-color: var(--bg); background-image: var(--bg-image);
      box-shadow: inset 0 0 16px rgba(139,90,43,.4);
      filter: drop-shadow(0 0 0 var(--accent)) drop-shadow(0 3px 4px rgba(0,0,0,.35));
      position: relative;
    }
    .dice-shape::before {
      content: ""; position: absolute; inset: 6px; pointer-events: none;
      border: 1px solid var(--border);
    }
    .dice-shape.d4 { clip-path: polygon(50% 2%, 98% 96%, 2% 96%); }
    .dice-shape.d4::before { clip-path: polygon(50% 2%, 98% 96%, 2% 96%); inset: 0; border: none; background: transparent; box-shadow: inset 0 0 0 2px var(--border); }
    .dice-shape.d6 { clip-path: none; border: 3px solid var(--accent); border-radius: 10px; }
    .dice-shape.d8 { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
    .dice-shape.d10 { clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%); }
    .dice-shape.d12 { clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%); }
    .dice-shape.d20 { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); font-size: 28px; }
    .dice-shape.d100 { clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%); }
    .dice-shape span { position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
    .dice-shape small { position: absolute; bottom: 12px; font-size: 9px; letter-spacing: 1px; color: var(--accent-muted); z-index: 1; }
    .dice-result-big {
      font-family: 'Cinzel', serif; font-size: 52px; font-weight: bold; color: var(--accent);
      min-width: 90px; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.15);
    }
    /* Creator */
    .creator-steps { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .creator-dot {
      font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
      padding: 6px 12px; border: 1px solid var(--border); background: var(--surface-strong);
      color: var(--accent-muted); cursor: pointer; transition: background .2s;
    }
    .creator-dot:hover { background: var(--mini-button-hover-bg); }
    .creator-dot.active { background: var(--accent); color: var(--button-text); border-color: var(--accent); }
    .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .pick-card { border: 2px solid var(--border); background: var(--surface-strong); padding: 10px; cursor: pointer; text-align: center; transition: border-color .2s; }
    .pick-card:hover { border-color: var(--accent); }
    .pick-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--surface); }
    .pick-card b { font-family: 'Cinzel', serif; font-size: 12px; color: var(--accent); display: block; }
    .pick-card span { font-size: 12px; }
    .attr-list { margin-bottom: 10px; }
    .attr-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-light); }
    .attr-row .attr-key { min-width: 42px; font-family: 'Cinzel', serif; color: var(--accent); }
    .attr-row .attr-val { min-width: 74px; text-align: center; font-weight: bold; }
    .attr-row .mini-button { min-width: 30px; }
    /* Kampfplaner */
    .encounter-verdict { font-family: 'Cinzel', serif; font-size: 19px; text-align: center; padding: 12px; border: 2px solid var(--accent); margin-top: 12px; line-height: 1.4; }
.encounter-verdict .advice { font-family: 'Crimson Text', serif; font-size: 14px; color: var(--text); margin-top: 6px; }
    .count-stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .count-stepper button { padding: 2px 8px; }
    .count-stepper span { font-family: 'Cinzel', serif; font-size: 12px; min-width: 30px; text-align: center; }
    /* Wiki */
    .wiki-article h2 { font-family: 'Cinzel', serif; color: var(--accent); margin-bottom: 6px; }
    .dm-article-pane { border: 1px solid var(--border-light); background: var(--surface-strong); padding: 12px; max-height: 460px; overflow-y: auto; }
    .wiki-article .stat-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
    .wiki-link { color: var(--accent-dark); text-decoration: underline dotted; cursor: pointer; }
    .wiki-popup-overlay {
      position: fixed; inset: 0; background: rgba(15,10,5,.7); z-index: 10000;
      display: none; align-items: center; justify-content: center; padding: 15px;
    }
    .wiki-popup-overlay.active { display: flex; }
    .wiki-popup {
      background-color: var(--bg); background-image: var(--bg-image);
      border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--surface-strong), 0 20px 50px rgba(0,0,0,.6);
      max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 18px;
    }

    @media (max-width: 720px) {
      body { padding: 10px; }
      .header h1 { font-size: 20px; }
      button { padding: 7px 10px; font-size: 11px; }
      .grid4, .grid5 { grid-template-columns: 1fr 1fr; }
      .grid6 { grid-template-columns: repeat(3, 1fr); }
      .spell-grid { grid-template-columns: 1fr; }
      .dm-grid, .dice-layout { grid-template-columns: 1fr; }
      .dm-tabs { gap: 4px; }
      .dm-tab { flex: 1 1 30%; font-size: 11px; padding: 7px 6px; letter-spacing: 0; }
      .slot-bar select { max-width: none; flex: 1; }
    }

    @media (max-width: 430px) {
      .grid2 { grid-template-columns: 1fr; }
      .grid3 { grid-template-columns: 1fr; }
      .grid6 { grid-template-columns: 1fr 1fr; }
    }

/* ---- Auth / Cloud-Sync ---- */
.auth-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.auth-user {
  font-size: 11px;
  color: var(--accent-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-modal { max-width: 400px; }
.auth-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.auth-body label { font-size: 11px; }
.auth-body input {
  width: 100%;
  box-sizing: border-box;
}
.auth-actions { display: flex; gap: 8px; margin-top: 6px; }
.auth-actions button { flex: 1; }
.auth-error {
  background: rgba(150, 40, 40, 0.12);
  border: 1px solid rgba(150, 40, 40, 0.35);
  color: #a33;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
}
.auth-hint {
  font-size: 11px;
  color: var(--accent-muted);
  margin: 4px 0 0 0;
  line-height: 1.4;
}