/* ══════════════════════════════════════════════
   NINJO'S BOTC APP — STYLESHEET
   Ninjo Expressive (dark scheme) × Gothic BotC
   ══════════════════════════════════════════════ */

:root {
  /* ── Ninjo brand anchors (locked) ─────────── */
  --ninjo-red:        #8B0000;
  --ninjo-red-deep:   #600000;
  --ninjo-red-glow:   #B12626;
  --ninjo-gold:       #D4AF37;
  --ninjo-gold-light: #F1DFBA;
  --ninjo-gold-dim:   #8A7028;
  --ninjo-gold-glow:  rgba(212,175,55,.35);

  /* ── BotC gothic dark surfaces (warm embers, never pure black) ── */
  --bg-0:    #14100E;   /* App background — warm dark ember */
  --bg-1:    #1A1411;   /* Surface */
  --bg-2:    #221915;   /* Surface elevation 1 */
  --bg-card: #2A1D17;   /* Card / surface elevation 2 */
  --bg-hover:#372218;   /* Hover state */

  --border:    #3A2A21;
  --border-md: #523828;

  --text-1: #F4E8DD;   /* On-surface */
  --text-2: #BFA68F;   /* On-surface variant */
  --text-3: #6E5A48;   /* Disabled / hint */

  /* Legacy alias (kept so existing rules work) */
  --gold:       var(--ninjo-gold);
  --gold-light: var(--ninjo-gold-light);
  --gold-dim:   var(--ninjo-gold-dim);
  --gold-glow:  var(--ninjo-gold-glow);

  /* ── Role / team colours (BotC accents) ────── */
  --townsfolk: #5BA0EB;   /* heavenly blue */
  --outsider:  #4FC4C4;   /* teal */
  --minion:    #E58446;   /* ember orange */
  --demon:     #C82C2C;   /* blood red */
  --traveller: #B07AC8;   /* royal violet */
  --unknown:   #8C7C6E;

  /* Relation colours */
  --rel-note:       #8C7C6E;
  --rel-trust:      #4DB370;
  --rel-suspect:    #E58446;
  --rel-accusation: #F05A3D;
  --rel-nomination: #F05A3D;
  --rel-ally:       #5BA0EB;
  --rel-evilAlly:   #5A1028;
  --rel-custom:     var(--ninjo-gold);

  /* ── Shape (Ninjo MD3 scale) ─────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ── Elevation + Cinema (Ninjo signature) ─── */
  --shadow-sm:    0 1px 2px  rgba(0,0,0,.45), 0 1px 3px 1px rgba(0,0,0,.30);
  --shadow-md:    0 2px 4px  rgba(0,0,0,.55), 0 4px 12px 2px rgba(0,0,0,.40);
  --shadow-lg:    0 4px 8px  rgba(0,0,0,.60), 0 12px 28px 6px rgba(0,0,0,.55);
  --shadow-cinema:0 24px 56px rgba(0,0,0,.70),
                  0 0 28px var(--ninjo-gold-glow);
  --glow-gold-soft:   0 0 0 3px var(--ninjo-gold-glow);
  --glow-gold-strong: 0 0 12px rgba(212,175,55,.85),
                      0 0 24px rgba(212,175,55,.50);
  --glow-red-strong:  0 0 16px rgba(176,38,38,.55);

  /* ── Motion ─────────────────────────────── */
  --ease:        cubic-bezier(.2, 0, 0, 1.0);   /* MD3 emphasized */
  --ease-cinema: cubic-bezier(.16, 1, .3, 1);   /* Ninjo cinema */
  --dur:    200ms;
  --dur-md: 300ms;

  /* ── Section header (Ninjo signature) ─── */
  --section-size:    .75rem;
  --section-weight:  800;
  --section-tracking:1.6px;

  --touch: 48px;
}

/* ── Reset ─────────────────────────────────── */

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  background: var(--bg-0);
  color: var(--text-1);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  overscroll-behavior: none;
}

/* Verhindert Bild-Speichern-Menü und Drag bei Touch */
img, svg image, .player-char-img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ── Utility ────────────────────────────────── */

.hidden { display: none !important; }

.view {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}

/* ── Buttons ────────────────────────────────── */

button {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  border: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
  touch-action: manipulation;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  min-height: var(--touch);
  padding: 0 18px;
}

.btn-primary {
  background: var(--ninjo-red);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: .3px;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover  { background: var(--ninjo-red-glow); }
.btn-primary:active { background: var(--ninjo-red-deep); }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
}
.btn-ghost:hover  { color: var(--text-1); border-color: var(--border-md); }

.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; }

.btn-tool {
  background: var(--bg-card);
  color: var(--text-2);
  border: 1px solid var(--border);
  min-height: var(--touch);
  width: var(--touch);
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-full);
}
.btn-tool:hover  { border-color: var(--ninjo-gold); color: var(--ninjo-gold); }
.btn-tool.active {
  background: var(--ninjo-red);
  color: #FFFFFF;
  border-color: var(--ninjo-red);
  box-shadow: var(--glow-red-strong);
}

.btn-icon-sm {
  background: transparent;
  color: var(--text-3);
  width: 34px; height: 34px; min-height: 34px;
  padding: 0; justify-content: center;
  border-radius: var(--radius-full);
  font-size: 15px;
}
.btn-icon-sm:hover { background: var(--bg-card); color: var(--text-1); }

.btn-danger-outline {
  background: transparent;
  color: var(--demon);
  border: 1px solid var(--demon);
  min-height: 40px;
}
.btn-danger-outline:hover { background: rgba(192,57,43,.15); }

.btn-full { width: 100%; justify-content: center; }

/* Google sign-in button */
.btn-google {
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border-md);
  width: 100%; justify-content: center;
  min-height: 56px;
  border-radius: var(--radius-md);
  font-size: 16px; font-weight: 600;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-google:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ── Forms ──────────────────────────────────── */

.form-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-2);
}

.form-input {
  font-family: inherit; font-size: 15px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-1);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  min-height: var(--touch);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  user-select: text;
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%239395ae'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.checkbox-row {
  display: flex; gap: 20px; flex-wrap: wrap;
}

.checkbox-label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; min-height: 36px;
}
.checkbox-label input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
}
.checkbox-text { font-size: 14px; color: var(--text-1); }

/* ── LOGIN VIEW ─────────────────────────────── */

#view-loading,
#view-login {
  justify-content: center; align-items: center;
  background: radial-gradient(ellipse at 50% 30%, #1a1c36 0%, var(--bg-0) 70%);
}

.loading-card {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: .4px;
}

.loading-card .header-clock {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 14px var(--gold-glow));
}

.login-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  text-align: center;
  max-width: 520px; width: 92%;
  box-shadow: var(--shadow-lg);
}

.login-logo .clock-svg {
  width: 80px; height: 80px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px var(--gold-glow));
}

.login-card h1 {
  font-size: 26px; font-weight: 800;
  color: var(--gold);
  letter-spacing: .4px;
  margin-bottom: 6px;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
}
@media (max-width: 520px) {
  .login-card h1 { font-size: 22px; white-space: normal; }
}

.login-subtitle {
  font-size: 14px; color: var(--text-2);
  margin-bottom: 18px;
}

/* ── APP HEADER ─────────────────────────────── */

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 60px; flex-shrink: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
/* Ninjo signature: 2px gold rule beneath app bar */
.app-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ninjo-gold) 20%, var(--ninjo-gold) 80%, transparent);
  pointer-events: none;
}

.header-left { display: flex; align-items: center; gap: 10px; }

.header-clock { width: 30px; height: 30px; }

.header-title {
  font-size: 20px; font-weight: 800; color: var(--gold);
  letter-spacing: .5px;
}

.header-right { display: flex; align-items: center; gap: 8px; }

.user-name { font-size: 13px; color: var(--text-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* ── DASHBOARD ──────────────────────────────── */

.dashboard-main {
  flex: 1; overflow-y: auto; padding: 28px 24px;
}

.dashboard-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}

.dashboard-toolbar h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ninjo-gold);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.games-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 64px 20px;
  color: var(--text-3); font-size: 15px;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  cursor: pointer; position: relative;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  touch-action: manipulation;
}
.game-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.game-card-icon { font-size: 28px; margin-bottom: 10px; }

.game-card-title {
  font-size: 17px; font-weight: 700; color: var(--text-1);
  margin-bottom: 8px;
}

.game-card-meta {
  font-size: 12px; color: var(--text-2);
  display: flex; gap: 14px;
}

.game-card-del {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.35);
  color: var(--text-2);
  width: 36px; height: 36px; min-height: 36px;
  padding: 0; justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-full); font-size: 16px;
  opacity: .85;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  z-index: 2;
}
.game-card:hover .game-card-del,
.game-card-del:focus { opacity: 1; }
.game-card-del:hover,
.game-card-del:active {
  color: #fff;
  background: var(--demon, #c0392b);
  border-color: var(--demon, #c0392b);
}

/* ── EDITOR HEADER ──────────────────────────── */

.editor-header {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 60px; flex-shrink: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.editor-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ninjo-gold) 20%, var(--ninjo-gold) 80%, transparent);
  pointer-events: none;
}

.btn-back-btn { min-height: 40px; padding: 0 12px; }

.game-title-display {
  flex: 1;
  font-size: 18px; font-weight: 700;
  color: var(--ninjo-gold);
  letter-spacing: .3px;
  padding: 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.editor-actions { display: flex; align-items: center; gap: 8px; }

/* ── EDITOR BODY ────────────────────────────── */

.editor-body {
  flex: 1; display: flex; overflow: hidden;
}

/* ── CIRCLE WRAP ────────────────────────────── */

.circle-wrap {
  flex: 1; position: relative; overflow: hidden;
  touch-action: none;
  /* BotC-Wiki Twilight + ornamentale Struktur (subtiles Damask-Muster) */
  background:
    /* Vignette für Tiefe */
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
    /* Subtiles Stoff-/Damask-Muster aus SVG */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23E8C97C' stroke-width='1' opacity='0.07'><circle cx='40' cy='40' r='14'/><circle cx='40' cy='40' r='6'/><path d='M40 26 L40 14 M40 54 L40 66 M26 40 L14 40 M54 40 L66 40' stroke-linecap='round'/><path d='M30 30 Q40 20 50 30 M30 50 Q40 60 50 50 M30 30 Q20 40 30 50 M50 30 Q60 40 50 50'/></g></svg>"),
    /* Korn für Tiefe */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.5  0 0 0 0 0.9  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    /* Twilight-Verlauf */
    radial-gradient(ellipse at 50% 30%, #3A2868 0%, #2A1F4A 30%, #1F1838 65%, #15102A 100%);
  background-size: auto, 80px 80px, 220px 220px, auto;
  background-blend-mode: normal, overlay, normal, normal;
}

/* Guide-Circle deutlich sichtbarer auf dem hellen Twilight-BG */
.guide-circle {
  stroke: rgba(232, 201, 124, .35) !important;
  stroke-width: 1.5 !important;
}

#botc-circle { width: 100%; height: 100%; }

.circle-hint {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 22px; font-size: 13px; color: var(--text-3);
  pointer-events: none;
  transition: opacity .3s;
}

.circle-tip {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  background: rgba(201,168,76,.12);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-full);
  padding: 6px 16px; font-size: 12px; color: var(--gold-light);
  pointer-events: none;
  transition: opacity .4s;
}

.modal-hint {
  font-size: 13px; color: var(--text-2);
  background: rgba(201,168,76,.08);
  border-left: 3px solid var(--gold);
  padding: 10px 12px; border-radius: var(--radius-xs);
  line-height: 1.5;
}
.modal-hint strong { color: var(--gold); }

.added-list {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 120px; overflow-y: auto;
  margin: 0; padding: 0;
}
.added-list:empty { display: none; }
.added-list li {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-1);
  animation: pop .25s var(--ease);
}

/* Spielerverwaltung-Modal: Liste + Add-Zeile + Confirm */
.modal-players {
  max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.modal-players .modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden; /* Scroll passiert in der Liste, nicht hier */
}
.modal-players .player-roster {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.modal-players .add-player-row {
  flex-shrink: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.modal-new-game { max-width: 420px; }
.player-roster {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.player-roster:empty { display: none; }
.player-roster li {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px 8px 14px;
  min-height: 48px;
}
.player-roster .roster-name {
  flex: 1;
  color: var(--text-1);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-roster .roster-meta {
  font-size: 12px; color: var(--text-3);
  margin-right: 6px;
}
.btn-roster-del {
  background: transparent;
  color: var(--demon);
  border: 1px solid transparent;
  width: 36px; height: 36px; min-height: 36px;
  padding: 0; justify-content: center;
  border-radius: var(--radius-full);
}
.btn-roster-del:hover { background: rgba(200,44,44,.18); border-color: var(--demon); }

.add-player-row {
  display: flex; gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.add-player-row .form-input { flex: 1; }
.add-player-row .btn-primary {
  width: 48px; padding: 0; font-size: 22px;
  justify-content: center;
}

/* Confirm-Dialog */
.modal-confirm { max-width: 380px; text-align: center; }
.modal-confirm .modal-header { justify-content: center; }
.confirm-message {
  font-size: 15px; color: var(--text-1);
  line-height: 1.5;
}
.btn-danger-filled {
  background: var(--demon);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: var(--radius-full);
}
.btn-danger-filled:hover { background: #E14040; }

/* Panel-Divider in Settings */
.panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}
@keyframes pop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── SIDE PANEL ─────────────────────────────── */

.side-panel {
  position: fixed;
  top: 60px; right: 0; bottom: 0;
  width: 340px; max-width: 90vw;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  z-index: 60;
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  box-shadow: -8px 0 30px rgba(0,0,0,.55);
}
.side-panel.open { transform: translateX(0); }

.panel-section { border-bottom: 1px solid var(--border); }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
}

/* Ninjo signature: ALL-CAPS-800 section headers in gold */
.panel-header h3 {
  font-size: var(--section-size);
  font-weight: var(--section-weight);
  letter-spacing: var(--section-tracking);
  text-transform: uppercase;
  color: var(--ninjo-gold);
}

.panel-body {
  padding: 0 18px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.panel-footer {
  padding: 12px 18px 16px;
  display: flex; gap: 10px;
  border-top: 1px solid var(--border);
}
.panel-footer .btn-primary { flex: 1; justify-content: center; }

/* ── MODAL ──────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 700; }

.modal-body {
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 16px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ── RELATION BAR ───────────────────────────── */

.relation-bar {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  padding: 10px 18px;
  display: flex; align-items: center; gap: 14px;
  z-index: 100;
  box-shadow: 0 0 0 4px var(--gold-glow), var(--shadow-md);
  font-size: 14px; font-weight: 600; color: var(--gold);
  animation: barSlideIn .2s var(--ease);
}

@keyframes barSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.relation-bar-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

/* ── CHARACTER PICKER ───────────────────────── */

.modal-picker {
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.picker-toolbar {
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.picker-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.picker-tabs.picker-scripts { opacity: .85; }

.picker-tab {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-full);
}
.picker-tab:hover { color: var(--text-1); border-color: var(--border-md); }
.picker-tab.active {
  background: var(--gold);
  color: #0d0e14;
  border-color: var(--gold);
  font-weight: 700;
}

.picker-grid[hidden] { display: none !important; }
.picker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  min-height: 260px;
}

.char-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  transition: border-color var(--dur), transform var(--dur);
  text-align: center;
}
.char-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.char-card.selected { border-color: var(--gold); background: rgba(201,168,76,.1); }

.char-card-img {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: #F1DFBA;             /* solides Pergament wie auf den Tokens */
  border: 2px solid currentColor;
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.char-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Deutscher Charaktername primär (groß, weiß) */
.char-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.2;
}
/* Englischer Originalname klein und gedämpft als Untertitel */
.char-card-name-en {
  font-size: 11.5px;
  font-weight: 650;
  color: #bda98c;
  font-style: italic;
  line-height: 1.15;
  margin-top: -2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

.picker-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 40px 20px;
  color: var(--text-3);
}

/* Andere behaupten — Liste + Inline-Form */
.others-claim-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.others-claim-list:empty { display: none; }
.others-claim-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px; align-items: center;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13px;
}
.others-claim-list img {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid currentColor;
  object-fit: contain;
  background: #F1DFBA;
}
.others-claim-text {
  color: var(--text-1);
  display: flex; flex-direction: column;
  min-width: 0;
}
.others-claim-text .o-from { font-weight: 700; }
.others-claim-text .o-char { color: var(--text-2); font-size: 12px; }
.others-claim-text .o-reason {
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.others-claim-del {
  background: transparent;
  color: var(--text-3);
  width: 28px; height: 28px; min-height: 28px;
  padding: 0; justify-content: center;
  border-radius: 50%; font-size: 12px;
}
.others-claim-del:hover { color: var(--demon); background: rgba(200,44,44,.15); }

.btn-add-others {
  background: transparent;
  color: var(--text-2);
  border: 1px dashed var(--border-md);
  border-radius: var(--radius-sm);
  width: 100%;
  min-height: 40px;
  font-size: 13px;
  margin-top: 4px;
  justify-content: center;
}
.btn-add-others:hover { border-color: var(--ninjo-gold); color: var(--ninjo-gold); }

.others-claim-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-0);
  border: 1px solid var(--ninjo-gold);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 4px;
}
.others-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ── ADMIN-VIEW (Charakter-Editor) ──────────── */

.admin-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-tab {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--radius-full);
  padding: 0 16px; min-height: 38px;
  font-size: 13px;
}
.admin-tab:hover { border-color: var(--ninjo-gold); color: var(--ninjo-gold); }
.admin-tab.active {
  background: var(--ninjo-gold);
  color: #0d0e14;
  border-color: var(--ninjo-gold);
  font-weight: 700;
}

.admin-headers {
  display: grid;
  grid-template-columns: 44px 130px 1fr 1fr 36px;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ninjo-gold);
}

.admin-grid {
  display: flex; flex-direction: column; gap: 4px;
}

.admin-row {
  display: grid;
  grid-template-columns: 44px 130px 1fr 1fr 36px;
  gap: 10px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  transition: border-color var(--dur);
}
.admin-row:hover { border-color: var(--border-md); }
.admin-row.modified { border-left: 3px solid var(--ninjo-gold); }

.admin-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: var(--bg-0);
  object-fit: contain;
}
.admin-meta {
  font-size: 11px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.admin-meta .admin-id {
  color: var(--text-3);
  font-family: 'Consolas', monospace;
  overflow: hidden; text-overflow: ellipsis;
}
.admin-meta .admin-type {
  color: currentColor;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.admin-row .form-input {
  font-size: 13px;
  min-height: 36px;
  padding: 6px 10px;
}

.admin-reset {
  background: transparent;
  color: var(--text-3);
  border: 1px solid transparent;
  width: 32px; height: 32px; min-height: 32px;
  padding: 0; justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}
.admin-reset:hover {
  color: var(--ninjo-gold);
  border-color: var(--ninjo-gold);
}

@media (max-width: 700px) {
  .admin-headers, .admin-row {
    grid-template-columns: 40px 1fr 36px;
  }
  .admin-headers > :nth-child(3),
  .admin-headers > :nth-child(4) { display: none; }
  .admin-row .admin-meta { display: none; }
  .admin-row .form-input:nth-of-type(2) { display: none; }
}

/* Auto-Save Hinweis */
.autosave-hint {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  font-style: italic;
  margin: 6px 0 0;
}

/* Token-Anzeige: kleine Icons früherer Behauptungen */
.prev-claim-mini {
  pointer-events: none;
}

/* Read-only Spieler-Name im Panel */
.player-name-readonly {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-1);
  padding: 12px 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  min-height: var(--touch);
  display: flex; align-items: center;
}

/* Inline-Edit Name in der Spielerverwaltung */
.player-roster .roster-name-input {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-1);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 8px;
  min-height: 36px;
  outline: none;
  user-select: text;
}
.player-roster .roster-name-input:hover { border-color: var(--border-md); }
.player-roster .roster-name-input:focus {
  border-color: var(--ninjo-gold);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px var(--gold-glow);
}

/* Behauptungs-Historie — frühere Claims als Chips */
.claim-history {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 0; padding: 0;
}
.claim-history:empty { display: none; }
.claim-history li {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 3px 4px 3px 8px;
  font-size: 12px; color: var(--text-2);
  font-style: italic;
}
.claim-history li:hover { border-color: var(--ninjo-gold); color: var(--text-1); cursor: pointer; }
.claim-history li img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: contain;
  background: #F1DFBA;
  border: 1px solid currentColor;
}
.claim-history-hint {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
  width: 100%;
}
.claim-del {
  background: transparent;
  color: var(--text-3);
  width: 22px; height: 22px; min-height: 22px;
  padding: 0; justify-content: center;
  border-radius: 50%;
  font-size: 12px;
}
.claim-del:hover { color: var(--demon); background: rgba(200,44,44,.15); }

/* Status row (Tot / Geister-Stimme) */
.status-row {
  display: flex; flex-direction: column; gap: 6px;
}
.status-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-0);
  min-height: 48px;
  transition: border-color var(--dur), background var(--dur);
}
.status-toggle:has(input:checked) {
  border-color: var(--ninjo-red);
  background: rgba(139,0,0,.12);
}
.status-toggle input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--ninjo-red);
}
.status-toggle-label {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  font-size: 14px;
  color: var(--text-1);
}
.status-icon {
  width: 24px; height: 24px;
  filter: invert(1) opacity(.85);
}
#ghost-vote-row.locked {
  opacity: .35;
  pointer-events: none;
}

/* Character pick button in player panel */
.char-pick-btn {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-1);
  width: 100%;
  min-height: var(--touch);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  text-align: left;
}
.char-pick-btn:hover { border-color: var(--gold); }
.char-pick-empty { color: var(--text-3); font-style: italic; }

.char-pick-display {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.char-pick-display img {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
  object-fit: contain;
  background: #F1DFBA;
}
.char-pick-names { display: flex; flex-direction: column; min-width: 0; }
.char-pick-name-de { font-size: 14px; font-weight: 700; }
.char-pick-name-en { font-size: 11px; color: var(--text-3); }
.char-pick-arrow { color: var(--text-3); }

/* Claim-Linien (Andere behaupten über Spieler) */
.claim-group { cursor: pointer; }
.claim-link {
  fill: none;
  stroke: #D4AF37;
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
  opacity: .65;
  transition: opacity .15s, stroke-width .15s;
}
.claim-group:hover .claim-link { opacity: 1; stroke-width: 2.5; }
.claim-icon-bg {
  fill: #F1DFBA;            /* warmes Pergament — heller Kontrast für die Token */
  stroke: #D4AF37;
  stroke-width: 2.5;
  opacity: 1;
  transition: filter .15s, stroke-width .15s;
}
.claim-group:hover .claim-icon-bg {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.9));
}
.claim-label-bg {
  fill: #15102A;
  stroke: rgba(212,175,55,.65);
  stroke-width: 1;
}
.claim-label-text {
  text-anchor: middle;
  dominant-baseline: hanging;
  pointer-events: none;
}
.cl-char {
  fill: #F1DFBA;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
}
.cl-from {
  fill: var(--text-2);
  font-size: 10px;
  font-weight: 600;
}

/* Kontextmenü „Behauptung verwalten" */
.claim-menu {
  max-width: 380px;
}
.claim-menu-summary {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg-0);
  border: 1px solid var(--ninjo-gold);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}
.claim-menu-summary img {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid currentColor;
  object-fit: contain;
  background: #F1DFBA;
  flex-shrink: 0;
}
.claim-menu-info {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.claim-menu-info .cm-arrow {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
}
.claim-menu-info .cm-char {
  font-size: 16px;
  font-weight: 800;
  color: var(--ninjo-gold);
}
.claim-menu-info .cm-type {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.claim-menu-reason {
  background: var(--bg-0);
  border-left: 3px solid var(--ninjo-gold);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  color: var(--text-1);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 12px;
}
.claim-menu-reason.empty {
  color: var(--text-3);
  font-style: italic;
}

/* ── D3 SVG ELEMENTS ────────────────────────── */

/* Guide circle */
.guide-circle {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: none;
}

/* Kerzen-Glühen — kein Pulsieren, statischer warmer Halo */
.candle-glow { /* nur Filter + dezenter Stroke, keine Animation */ }

/* Player group */
.player-group { cursor: pointer; }
.player-group.dragging { cursor: grabbing; }

.player-hit {
  fill: #000;
  opacity: 0;
  pointer-events: all;
}

.player-ring {
  fill: none;
  stroke-width: 4;
  transition: stroke-width .12s;
}

.player-token {
  stroke-width: 2;
  transition: filter .15s, stroke-width .15s;
}

.player-group.selected .player-ring  { stroke-width: 5; }
.player-group.selected .player-token {
  filter: drop-shadow(0 0 10px currentColor);
}

.player-group.rel-source .player-ring {
  stroke-dasharray: 6 4;
  animation: rotDash 3s linear infinite;
}
@keyframes rotDash {
  to { stroke-dashoffset: -40; }
}

.player-dead-x {
  font-size: 26px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.player-group.dead .player-dead-x { opacity: 1; }
.player-group.dead .player-token   { opacity: 1; }

.player-icon {
  font-size: 19px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.player-name {
  text-anchor: middle;
  fill: var(--text-1);
  font-size: 12px; font-weight: 700;
  pointer-events: none;
}

.player-role-label {
  text-anchor: middle;
  font-size: 11px;
  pointer-events: none;
}
.rl-name {
  fill: var(--ninjo-gold);
  font-weight: 700;
  letter-spacing: .3px;
}

/* Ghost-vote pip */
.ghost-pip {
  fill: var(--text-3);
  transition: opacity .15s;
}

/* Relation line */
.rel-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 22;
  pointer-events: stroke;
  cursor: pointer;
}

.rel-path {
  fill: none;
  stroke-width: 2;
  opacity: .75;
  cursor: pointer;
  transition: stroke-width .12s, opacity .12s;
}
.rel-path:hover { stroke-width: 3; opacity: 1; }
.rel-path.selected { stroke-width: 3; opacity: 1; stroke-dasharray: 6 4; }

@media (pointer: coarse) {
  .rel-hit { stroke-width: 32; }
}

.rel-label-bg { fill: var(--bg-0); }
.rel-label-text {
  fill: var(--text-2);
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* ── Scrollbar ──────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-md); }

/* ── Responsive (narrow tablets / mobile) ───── */

/* Backdrop hinter dem Panel — schließt bei Tap aufs Dunkle */
.panel-backdrop {
  position: fixed; inset: 60px 0 0 0;
  background: rgba(0,0,0,.35);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 700px) {
  .user-name { display: none; }
  .games-grid { grid-template-columns: 1fr; }
  .side-panel { width: 320px; }
}

/* ══════════════════════════════════════════════
   AKTIONS-HUB (oben links im Canvas)
   ══════════════════════════════════════════════ */
.action-hub-wrap {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 30;
}
.action-hub-btn {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  color: #e8c97c;
  border: 1.5px solid #c9a84c;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(201,168,76,.15);
  cursor: pointer;
  font-size: 20px;
  transition: transform .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.action-hub-btn:hover { transform: translateY(-1px); }
.action-hub-btn.is-disabled-tt { opacity: .35; pointer-events: none; }
.action-hub-icon { line-height: 1; }
.action-hub-menu {
  position: absolute;
  top: 56px; left: 0;
  min-width: 260px;
  background: #1a1410;
  border: 1.5px solid #c9a84c;
  border-radius: 14px;
  box-shadow:
    0 16px 40px rgba(0,0,0,.75),
    0 0 0 1px rgba(201,168,76,.3),
    0 0 24px rgba(212,175,55,.18);
  padding: 8px;
  z-index: 60;
}
/* Backdrop-Dimming wenn Menü offen ist (außerhalb antippen schließt schon via JS) */
.action-hub-menu:not([hidden])::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: -1;
  pointer-events: none;
}
.action-hub-menu[hidden] { display: none; }
.ahm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #e8c97c;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ahm-item:hover { background: rgba(201,168,76,.12); }
.ahm-item:disabled { opacity: .4; cursor: not-allowed; }
.ahm-icon { font-size: 18px; flex: 0 0 auto; }
.ahm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ahm-title { font-weight: 700; font-size: 14px; }
.ahm-sub { font-size: 11px; color: #8a7a64; }

/* ══════════════════════════════════════════════
   SPIELER-KONTEXTMENÜ (Long-Press / Right-Click)
   ══════════════════════════════════════════════ */
.player-ctx-menu {
  position: absolute;
  min-width: 200px;
  background: linear-gradient(135deg, #1a1410, #221a14);
  border: 1px solid #c9a84c;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.18);
  padding: 6px;
  z-index: 35;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.player-ctx-menu[hidden] { display: none; }
.pcm-header {
  padding: 6px 10px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a7a64;
  font-weight: 700;
  border-bottom: 1px solid rgba(201,168,76,.15);
  margin-bottom: 4px;
}
.pcm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #e8c97c;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}
.pcm-item:hover { background: rgba(201,168,76,.12); }
.pcm-icon { font-size: 16px; flex: 0 0 auto; }

/* ══════════════════════════════════════════════
   AKTIONS-WIZARD MODAL
   ══════════════════════════════════════════════ */
.modal-wizard {
  width: min(560px, 95vw);
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .modal-wizard {
    width: 100vw;
    height: 100vh; height: 100dvh;
    max-width: 100vw;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
}
.modal-wizard .modal-header { gap: 12px; }
.aw-step-progress {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #c9a84c;
  font-weight: 700;
  margin-left: auto;
  margin-right: 8px;
}
.aw-step-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 12px;
}
.aw-step-title {
  margin: 0 0 12px;
  font-size: 16px;
  color: #e8c97c;
  font-weight: 700;
}
.aw-step-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aw-overrides {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  border-radius: 8px;
  color: #c8b78c;
  font-size: 13px;
}
.aw-overrides[hidden] { display: none; }
.aw-overrides summary {
  cursor: pointer;
  font-weight: 700;
  color: #c9a84c;
  list-style: none;
  font-size: 13px;
}
.aw-overrides summary::-webkit-details-marker { display: none; }
.aw-overrides-content {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aw-footer {
  align-items: center;
  gap: 12px;
}
.aw-step-summary {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #c8b78c;
}

/* Player-Picker-Step: Liste mit Spieler-Items */
.aw-player-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.aw-player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #c8b78c;
  font-weight: 600;
  transition: background .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.aw-player-list li:hover { background: rgba(201,168,76,.12); }
.aw-player-list li.selected {
  background: linear-gradient(135deg, #2a1d10, #3a2818);
  border-color: #c9a84c;
  color: #ffe0a0;
  box-shadow: 0 0 0 1px rgba(201,168,76,.4);
}
.aw-player-list li.is-dead .pl-name { opacity: .55; text-decoration: line-through; }
.aw-player-list li.is-disabled-by-rule {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.aw-player-list li .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aw-player-list li .pl-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #8a7a64;
}
.aw-player-list li.is-disabled-by-rule .pl-badge { color: #c9a84c; }

/* Vote-Collector-Step */
.aw-vote-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  margin-bottom: 10px;
}
.aw-vote-count {
  font-size: 24px;
  font-weight: 800;
  color: #e8c97c;
}
.aw-vote-count.is-met { color: #4DB370; }
.aw-vote-need { font-size: 12px; color: #8a7a64; }
.aw-vote-list {
  list-style: none; margin: 0; padding: 0;
  /* Liste wächst — modal-body scrollt bei Bedarf */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aw-vote-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(0,0,0,.2);
  border: 1px solid #3a2c1f;
  border-radius: 6px;
  min-height: 44px;
}
.aw-vote-list li.is-yes {
  background: rgba(77,179,112,.12);
  border-color: rgba(77,179,112,.35);
}
.aw-vote-list li.is-disabled {
  opacity: .45;
}
.aw-vote-toggle {
  width: 40px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid #4a3a2c;
  background: rgba(0,0,0,.3);
  color: #c8b78c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.aw-vote-toggle.is-yes {
  background: #4DB370; color: #fff; border-color: #fff;
  box-shadow: 0 0 0 2px rgba(77,179,112,.25);
}
.aw-vote-name { flex: 1; min-width: 0; font-weight: 600; color: #e8c97c; }
.aw-vote-name.is-dead { color: #8a7a64; }
.aw-vote-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #c9a84c;
}

/* Review-Step */
.aw-review-card {
  padding: 12px 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  border-radius: 8px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 14px;
}
.aw-review-card dt { color: #8a7a64; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.aw-review-card dd { margin: 0; color: #e8c97c; font-weight: 600; }
.aw-review-card dd.is-met { color: #4DB370; }
.aw-review-card dd.is-not-met { color: #C82C2C; }
.aw-review-note {
  margin-top: 12px;
}
.aw-review-note label { font-size: 12px; color: #8a7a64; }
.aw-review-note textarea {
  width: 100%;
  min-height: 60px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════
   PICKER: Modus-Switch (Charakter / Kategorie) + Kategorie-Grid
   ══════════════════════════════════════════════ */
.picker-mode {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin: 8px 12px 0;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  border-radius: 999px;
}
.picker-mode[hidden] { display: none; }
.pm-btn {
  flex: 1;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: #c8b78c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-btn.active {
  background: #c9a84c;
  color: #1a1410;
}

.picker-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px;
}
.picker-category-grid[hidden] { display: none; }
.pcg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  background: rgba(0,0,0,.25);
  border: 2px solid #4a3a2c;
  border-radius: 10px;
  color: #c8b78c;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.pcg-card:hover { transform: translateY(-2px); }
.pcg-card[data-cat="townsfolk"] { color: #4a90e2; }
.pcg-card[data-cat="outsider"]  { color: #41b0b0; }
.pcg-card[data-cat="minion"]    { color: #e0793a; }
.pcg-card[data-cat="demon"]     { color: #c0392b; }
.pcg-card[data-cat="townsfolk"]:hover { border-color: #4a90e2; background: rgba(74,144,226,.08); }
.pcg-card[data-cat="outsider"]:hover  { border-color: #41b0b0; background: rgba(65,176,176,.08); }
.pcg-card[data-cat="minion"]:hover    { border-color: #e0793a; background: rgba(224,121,58,.08); }
.pcg-card[data-cat="demon"]:hover     { border-color: #c0392b; background: rgba(192,57,43,.08); }
.pcg-card.selected { border-width: 2.5px; box-shadow: 0 0 0 2px currentColor inset; }
.pcg-icon  { font-size: 32px; line-height: 1; }
.pcg-label { font-size: 14px; font-weight: 800; letter-spacing: .04em; margin-top: 4px; }
.pcg-sub   { font-size: 11px; color: #8a7a64; font-weight: 500; }

/* Vorschau im Spieler-Panel: Kategorie-Pille */
.char-pick-display.is-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.char-pick-display.is-category .cpc-glyph {
  font-size: 22px;
  line-height: 1;
}
.char-pick-display.is-category .cpc-label {
  font-weight: 700;
  font-size: 14px;
}
.char-pick-display.is-category .cpc-sub {
  font-size: 11px;
  color: #8a7a64;
  font-weight: 500;
}

/* ══════════════════════════════════════════════
   GAME-OVER (Spielende) — Banner + Locks
   ══════════════════════════════════════════════ */
.game-over-banner {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  border: 1.5px solid #c9a84c;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.2);
  z-index: 41;
  color: #ffe0a0;
  font-size: 13px;
  font-weight: 600;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
}
.game-over-banner[hidden] { display: none; }
.game-over-banner .gob-icon { font-size: 18px; line-height: 1; }
.game-over-banner .gob-text {
  display: inline-flex; align-items: center; gap: 6px;
}
.game-over-banner .gob-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: #c8b78c;
}
.game-over-banner .gob-side {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}
.game-over-banner.is-good { border-color: #4a90e2; }
.game-over-banner.is-good .gob-side { color: #d2e6ff; }
.game-over-banner.is-evil { border-color: #C82C2C; box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 0 1px rgba(200,44,44,.3); }
.game-over-banner.is-evil .gob-side { color: #ff9a9a; }
.game-over-banner.is-draw { border-color: #c9a84c; }
.game-over-banner.is-draw .gob-side { color: #ffe0a0; }
.game-over-banner .gob-reason {
  font-size: 11px;
  color: #8a7a64;
  border-left: 1px solid #4a3a2c;
  padding-left: 12px;
}
.gob-reason:empty { display: none; }
.game-over-banner .gob-resume {
  margin-left: 4px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #c9a84c, #b08a3c);
  color: #1a1410;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.game-over-banner .gob-resume:hover { filter: brightness(1.1); }

/* Wenn Game-Over und Time-Travel-Banner gleichzeitig: stack */
.circle-wrap.is-game-over .time-travel-banner {
  top: 70px;
}

/* Game-Over-Locks: Canvas tinted, FAB versteckt, Edits blockiert */
.circle-wrap.is-game-over #botc-circle,
.circle-wrap.is-game-over .phase-scrubber,
.circle-wrap.is-game-over .circle-tip,
.circle-wrap.is-game-over .circle-hint {
  filter: saturate(.7) brightness(.9) contrast(.95);
}
.circle-wrap.is-game-over .phase-fab { display: none !important; }
.circle-wrap.is-game-over .action-hub-btn,
.circle-wrap.is-game-over .action-hub-wrap { opacity: .35; pointer-events: none; }

.is-game-over-readonly,
.is-game-over-readonly button,
.is-game-over-readonly input,
.is-game-over-readonly select,
.is-game-over-readonly textarea {
  pointer-events: none;
  opacity: .55;
  cursor: not-allowed;
}
/* Banner-Button bleibt klickbar */
.game-over-banner,
.game-over-banner * { pointer-events: auto !important; opacity: 1 !important; }

@media (max-width: 700px) {
  .game-over-banner {
    top: 8px;
    padding: 8px 12px;
    font-size: 12px;
    gap: 8px;
  }
  .game-over-banner .gob-reason { display: none; }
  .circle-wrap.is-game-over .time-travel-banner { top: 60px; }
}

/* Settings-Panel: "Spiel beenden..."-Button oben — gold-akzentuiert, nicht rot
   (rote Bestätigung kommt erst im Wizard) */
.btn-game-end {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.06));
  border: 1px solid #c9a84c;
  color: #e8c97c;
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.btn-game-end:hover { background: rgba(201,168,76,.25); }
.btn-game-end[hidden] { display: none; }
.btn-game-end .bge-icon { font-size: 22px; flex: 0 0 auto; line-height: 1; }
.btn-game-end .bge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn-game-end .bge-title { font-weight: 700; font-size: 14px; }
.btn-game-end .bge-sub { font-size: 11px; color: #8a7a64; font-weight: 500; }

/* Settings-Panel: "Spiel fortsetzen"-Button (gold-Akzent statt rot) */
.btn-resume-outline {
  background: transparent;
  border: 1px solid #c9a84c;
  color: #e8c97c;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
}
.btn-resume-outline:hover {
  background: rgba(201,168,76,.12);
}
.btn-resume-outline[hidden] { display: none; }

/* ══════════════════════════════════════════════
   WIZARD: Zusatz-Step-Types (side-picker, reason-picker, multi-pick)
   ══════════════════════════════════════════════ */
.aw-step-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(200,44,44,.15), rgba(200,44,44,.08));
  border: 1px solid rgba(200,44,44,.4);
  border-radius: 8px;
  color: #ffb3b3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.aw-step-hint[hidden] { display: none; }

/* Sieger-Seiten-Karten */
.aw-side-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.aw-side-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  background: rgba(0,0,0,.25);
  border: 2px solid #4a3a2c;
  border-radius: 10px;
  color: #c8b78c;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.aw-side-card:hover { transform: translateY(-2px); }
.aw-side-card .aw-side-icon { font-size: 32px; line-height: 1; }
.aw-side-card .aw-side-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  margin-top: 4px;
}
.aw-side-card .aw-side-sub {
  font-size: 11px;
  color: #8a7a64;
  font-weight: 500;
}
.aw-side-card[data-side="good"]:hover { border-color: #4a90e2; }
.aw-side-card[data-side="evil"]:hover { border-color: #C82C2C; }
.aw-side-card[data-side="draw"]:hover { border-color: #c9a84c; }
.aw-side-card.selected[data-side="good"] {
  background: linear-gradient(135deg, rgba(74,144,226,.18), rgba(74,144,226,.08));
  border-color: #4a90e2;
  color: #d2e6ff;
  box-shadow: 0 0 0 2px rgba(74,144,226,.3);
}
.aw-side-card.selected[data-side="evil"] {
  background: linear-gradient(135deg, rgba(200,44,44,.18), rgba(200,44,44,.08));
  border-color: #C82C2C;
  color: #ff9a9a;
  box-shadow: 0 0 0 2px rgba(200,44,44,.3);
}
.aw-side-card.selected[data-side="draw"] {
  background: linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.08));
  border-color: #c9a84c;
  color: #ffe0a0;
  box-shadow: 0 0 0 2px rgba(201,168,76,.3);
}

/* Reason-Picker: Preset-Buttons + Freitext */
.aw-reason-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aw-reason-btn {
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  color: #c8b78c;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aw-reason-btn:hover { background: rgba(201,168,76,.12); }
.aw-reason-btn.selected {
  background: linear-gradient(135deg, #2a1d10, #3a2818);
  border-color: #c9a84c;
  color: #ffe0a0;
}
.aw-reason-text {
  margin-top: 8px;
}
.aw-reason-text label {
  display: block;
  font-size: 12px;
  color: #8a7a64;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Multi-Player-Picker */
.aw-multi-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.aw-multi-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #c8b78c;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.aw-multi-list li:hover { background: rgba(201,168,76,.12); }
.aw-multi-list li.selected {
  background: linear-gradient(135deg, #2a1d10, #3a2818);
  border-color: #c9a84c;
  color: #ffe0a0;
}
.aw-multi-list .pl-check { font-size: 14px; flex: 0 0 auto; }
.aw-multi-list li:not(.selected) .pl-check { opacity: .35; }

/* Dangerous Confirm-Button im Wizard-Footer */
.btn-danger-filled {
  background: linear-gradient(135deg, #C82C2C, #8e1414);
  border: 1px solid #ff9a9a;
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent;
}
.btn-danger-filled:hover { filter: brightness(1.1); }
.btn-danger-filled:disabled { opacity: .5; cursor: not-allowed; }

/* Game-End-Karte im Verlaufslog */
.timeline-game-end {
  display: block;
  padding: 0;
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
  border: 1.5px solid #c9a84c;
}
.timeline-game-end.is-good { border-color: #4a90e2; background: linear-gradient(135deg, rgba(74,144,226,.12), rgba(74,144,226,.04)); }
.timeline-game-end.is-evil { border-color: #C82C2C; background: linear-gradient(135deg, rgba(200,44,44,.12), rgba(200,44,44,.04)); }
.tge-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.tge-side-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
}
.timeline-game-end.is-good .tge-side-pill { background: rgba(74,144,226,.25); color: #d2e6ff; }
.timeline-game-end.is-evil .tge-side-pill { background: rgba(200,44,44,.25); color: #ff9a9a; }
.timeline-game-end.is-draw .tge-side-pill { background: rgba(201,168,76,.25); color: #ffe0a0; }
.tge-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(201,168,76,.18);
  font-size: 13px;
  color: #c8b78c;
}
.timeline-game-end:not(.is-open) .tge-body { display: none; }
.tge-row { padding: 4px 0; }
.tge-row strong { color: #e8c97c; }
.tge-toggle {
  font-size: 14px;
  color: #c9a84c;
  margin-left: auto;
  transition: transform .18s ease;
}
.timeline-game-end.is-open .tge-toggle { transform: rotate(180deg); }

/* ══════════════════════════════════════════════
   NOMINATION-KARTE (im Timeline-Modal)
   ══════════════════════════════════════════════ */
.timeline-nomination {
  display: block;
  padding: 0;
  background: linear-gradient(135deg, rgba(155, 89, 182, .10), rgba(155, 89, 182, .04));
  border: 1px solid rgba(155, 89, 182, .35);
}
.timeline-nomination .tn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.timeline-nomination .tn-head .timeline-event-text { flex: 1; min-width: 0; }
.timeline-nomination .tn-toggle {
  font-size: 14px;
  color: #c9a84c;
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.timeline-nomination.is-open .tn-toggle { transform: rotate(180deg); }
.timeline-nomination .tn-body {
  display: none;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(155, 89, 182, .25);
  margin-top: 2px;
}
.timeline-nomination.is-open .tn-body { display: block; }
.timeline-nomination .tn-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 0 8px;
  font-size: 13px;
  color: #c8b78c;
}
.tns-pair strong { color: #e8c97c; }
.tns-self { color: #9b59b6; font-weight: 700; font-size: 11px; }
.tns-counts { display: inline-flex; align-items: baseline; gap: 4px; }
.tns-count {
  font-size: 18px; font-weight: 800;
}
.tns-count.is-met     { color: #4DB370; }
.tns-count.is-not-met { color: #C82C2C; }
.tns-count-need { font-size: 11px; color: #8a7a64; }
.tns-otb {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(201,168,76,.18);
  color: #e8c97c;
  font-weight: 700;
}
.tn-votes {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;
  background: rgba(0,0,0,.18);
  border-radius: 6px;
  overflow: hidden;
}
.tn-votes th, .tn-votes td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tn-votes th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a7a64;
  font-weight: 700;
}
.tn-votes tr.is-yes  td.tnv-vote { color: #4DB370; font-weight: 700; }
.tn-votes tr.is-yes  { background: rgba(77,179,112,.06); }
.tn-votes tr:not(.is-yes) td.tnv-vote { color: #8a7a64; }
.tn-votes tr.is-dead td:first-child { color: #8a7a64; font-style: italic; }
.tn-votes td.tnv-status { color: #a89986; white-space: nowrap; }
.tn-note {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
  font-size: 13px;
  color: #c8b78c;
}
.tn-note strong { color: #e8c97c; }
.tn-subwrap { margin-top: 10px; }
.tn-subtitle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a7a64;
  margin-bottom: 4px;
}

/* Sub-Events: eingerückt unter Top-Level-Events (außerhalb der Nomination-Card) */
.timeline-subevents {
  list-style: none;
  margin: 4px 0 0 24px;
  padding: 0;
  border-left: 2px solid rgba(201,168,76,.18);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.timeline-subevents .timeline-event {
  background: rgba(0,0,0,.15);
  font-size: 12px;
  padding: 6px 8px;
}

/* ══════════════════════════════════════════════
   ZEITREISE-MODUS (Time-Travel)
   ══════════════════════════════════════════════ */
.circle-wrap.is-time-travel #botc-circle,
.circle-wrap.is-time-travel .phase-scrubber,
.circle-wrap.is-time-travel .circle-tip,
.circle-wrap.is-time-travel .circle-hint {
  filter: saturate(.7) brightness(.92);
}
.circle-wrap.is-time-travel .phase-fab { display: none !important; }

.time-travel-banner {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  border: 1px solid #c9a84c;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.18);
  z-index: 40;
  color: #e8c97c;
  font-size: 13px;
  font-weight: 600;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
}
.time-travel-banner[hidden] { display: none; }
.time-travel-banner .ttb-icon { font-size: 16px; line-height: 1; }
.time-travel-banner .ttb-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.time-travel-banner .ttb-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: #b89a4c;
}
.time-travel-banner .ttb-phase {
  font-size: 14px;
  font-weight: 700;
  color: #ffe0a0;
}
.time-travel-banner.is-night .ttb-phase { color: #d8e8ff; }
.time-travel-banner.is-night { border-color: #6a8cc8; }
.time-travel-banner.is-day   { border-color: #d4a040; }
.time-travel-banner .ttb-readonly {
  font-size: 11px;
  color: #8a7a64;
  border-left: 1px solid #4a3a2c;
  padding-left: 12px;
}
.time-travel-banner .ttb-exit {
  margin-left: 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #c9a84c, #b08a3c);
  color: #1a1410;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.time-travel-banner .ttb-exit:hover { filter: brightness(1.1); }

/* Disabled-Stil für Buttons & Inputs während Zeitreise */
.is-time-travel-readonly,
.is-time-travel-readonly button,
.is-time-travel-readonly input,
.is-time-travel-readonly select,
.is-time-travel-readonly textarea {
  pointer-events: none;
  opacity: .55;
  cursor: not-allowed;
}
/* Banner-Knöpfe bleiben klickbar. Fläche + Beschriftungen lassen Taps aber
   DURCH — sonst verdeckt das Banner den darunterliegenden Aktions-Hub
   (Banner z-index 40 > Hub z-index 30) und schluckt dessen Taps. */
.time-travel-banner,
.time-travel-banner * { pointer-events: none; opacity: 1 !important; }
.time-travel-banner button { pointer-events: auto !important; }

@media (max-width: 700px) {
  .time-travel-banner {
    /* unter Aktions-Hub + Verbindungs-Filter, nicht darüber */
    top: 68px;
    padding: 6px 10px;
    font-size: 12px;
    gap: 8px;
  }
  .time-travel-banner .ttb-readonly { display: none; }
}

/* ══════════════════════════════════════════════
   TEAM-MARKIERUNG (Panel + Token-Badge)
   ══════════════════════════════════════════════ */
.team-mark-row { min-width: 0; overflow: hidden; }
.team-mark-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
  width: 100%;
}
.tm-btn {
  --tm-color: #6c7080;
  min-width: 0;
  width: 100%;
  min-height: 56px;
  padding: 6px 4px;
  border: 1px solid #4a3a2c;
  background: rgba(0,0,0,.25);
  color: var(--tm-color);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tm-btn .tm-icon  { font-size: 18px; line-height: 1; font-weight: 700; }
.tm-btn .tm-label { font-size: 10px; line-height: 1.1; font-weight: 600; letter-spacing: .2px; }
.tm-btn:hover { background: rgba(201,168,76,.12); transform: translateY(-1px); }
.tm-btn[data-kind="good"]      { --tm-color: #4DB370; }
.tm-btn[data-kind="evil"]      { --tm-color: #C82C2C; }
.tm-btn[data-kind="townsfolk"] { --tm-color: #4a90e2; }
.tm-btn[data-kind="outsider"]  { --tm-color: #41b0b0; }
.tm-btn[data-kind="minion"]    { --tm-color: #e0793a; }
.tm-btn[data-kind="demon"]     { --tm-color: #c0392b; }
.tm-btn.tm-clear { --tm-color: #8a7a64; font-size: 22px; }
.tm-btn.active {
  background: var(--tm-color);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}

.team-mark-conf {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding: 3px;
  background: rgba(0,0,0,.25);
  border: 1px solid #4a3a2c;
  border-radius: 999px;
}
.tmc-btn {
  flex: 1;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: #c8b78c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tmc-btn.active {
  background: #c9a84c;
  color: #1a1410;
}

.team-mark-summary {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,168,76,.25);
  color: #e8c97c;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-mark-summary.hidden { display: none; }
.team-mark-summary .tms-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════
   SCREENSAVER / DIM-OVERLAY
   ══════════════════════════════════════════════ */
.screensaver {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #14100E 0%, #06030F 75%, #000 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: screensaverFade .35s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.screensaver.hidden { display: none; }
.screensaver-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.screensaver-logo {
  width: clamp(140px, 30vmin, 260px);
  height: clamp(140px, 30vmin, 260px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 22px rgba(201,168,76,.25));
  animation: screensaverPulse 5s ease-in-out infinite;
}
.screensaver-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .85;
}
.screensaver-hint {
  color: #6f6253;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0;
  animation: screensaverPulse 3.5s ease-in-out infinite;
}
@keyframes screensaverFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes screensaverPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

/* Fullscreen-Button im Settings-Panel */
.settings-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.settings-fullscreen-btn.is-active {
  border-color: #c9a84c;
  color: #e8c97c;
  background: rgba(201,168,76,.08);
}

/* ══════════════════════════════════════════════
   PHASEN-ZEITLEISTE (unten links im Canvas)
   ══════════════════════════════════════════════ */
.phase-scrubber {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  border: 1px solid #c9a84c;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(201,168,76,.15);
  z-index: 30;
  max-width: min(60vw, 520px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.phase-scrubber[hidden] { display: none; }

.phase-scrubber-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid #4a3a2c;
  background: rgba(0,0,0,.3);
  color: #e8c97c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.phase-scrubber-arrow:hover { background: rgba(201,168,76,.15); }
.phase-scrubber-arrow:disabled { opacity: .35; cursor: default; }

.phase-scrubber-track-wrap {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.phase-scrubber-track {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
}
.phase-scrubber-track::-webkit-scrollbar { display: none; }

.phase-scrubber-pill {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #4a3a2c;
  background: rgba(0,0,0,.25);
  color: #c8b78c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.phase-scrubber-pill:hover { background: rgba(201,168,76,.12); transform: translateY(-1px); }
.phase-scrubber-pill.is-night { color: #b8d0ee; border-color: #3d4d70; }
.phase-scrubber-pill.is-day   { color: #f0c878; border-color: #6a4f24; }
.phase-scrubber-pill.is-current {
  background: linear-gradient(135deg, #2a1d10, #3a2818);
  border-color: #c9a84c;
  color: #ffe0a0;
  box-shadow: 0 0 0 1px rgba(201,168,76,.4);
}
.phase-scrubber-pill.is-night.is-current {
  background: linear-gradient(135deg, #0f1424, #1a2040);
  border-color: #6a8cc8;
  color: #d8e8ff;
  box-shadow: 0 0 0 1px rgba(106,140,200,.4);
}
.phase-scrubber-pill .ps-icon { font-size: 14px; line-height: 1; }
.phase-scrubber-pill .ps-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c9a84c;
  margin-left: 2px;
  box-shadow: 0 0 4px rgba(201,168,76,.6);
}

/* Filter-Status: aktive Filter-Phase + abgedunkelte Restpills */
.phase-scrubber-pill.is-filter-active {
  border-color: #ff9a3c;
  color: #ffd6a4;
  background: linear-gradient(135deg, #2a160a, #3a1f0e);
  box-shadow: 0 0 0 2px rgba(255,154,60,.45), 0 0 12px rgba(255,154,60,.3);
  animation: scrubFilterPulse 1.8s ease-in-out infinite;
}
.phase-scrubber-pill.is-filter-active.is-night {
  border-color: #6ad0ff;
  color: #d8efff;
  background: linear-gradient(135deg, #0a1c2a, #0e2a3f);
  box-shadow: 0 0 0 2px rgba(106,208,255,.45), 0 0 12px rgba(106,208,255,.3);
}
.phase-scrubber-pill.is-dimmed { opacity: .45; }
.phase-scrubber-pill.is-dimmed:hover { opacity: .85; }
@keyframes scrubFilterPulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(-1px); filter: brightness(1.15); }
}

/* Filter-Chip im Timeline-Modal-Header */
.timeline-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 8px;
  padding: 4px 8px 4px 10px;
  background: linear-gradient(135deg, #2a160a, #3a1f0e);
  border: 1px solid #ff9a3c;
  border-radius: 999px;
  color: #ffd6a4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.timeline-filter-chip[hidden] { display: none; }
.timeline-filter-chip:hover {
  background: linear-gradient(135deg, #3a1f0e, #4a2a14);
  border-color: #ffb060;
}
.timeline-filter-chip .tfc-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,154,60,.2);
  font-size: 11px;
  line-height: 1;
}
.timeline-filter-chip:hover .tfc-x { background: rgba(255,154,60,.35); }

@media (max-width: 700px) {
  .phase-scrubber {
    left: 10px;
    bottom: 10px;
    max-width: min(70vw, 380px);
    padding: 4px 6px;
  }
  .phase-scrubber-arrow { width: 24px; height: 24px; font-size: 16px; }
  .phase-scrubber-pill { padding: 5px 8px; font-size: 12px; }
}

/* Hervorhebung im Timeline-Modal beim Springen aus dem Scrubber */
.timeline-phase.is-flash {
  animation: phaseFlash 1.2s ease;
}
@keyframes phaseFlash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(201,168,76,.55); }
}

/* ══════════════════════════════════════════════
   PHASEN-FAB (unten rechts im Canvas)
   ══════════════════════════════════════════════ */
.phase-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  color: #e8c97c;
  border: 1px solid #c9a84c;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(201,168,76,.15);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 30;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.phase-fab:hover { transform: translateY(-2px); }
.phase-fab:active { transform: translateY(0); }
.phase-fab .phase-fab-current,
.phase-fab .phase-fab-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.phase-fab .phase-fab-next {
  opacity: .7;
  font-size: 13px;
}
.phase-fab .phase-fab-icon { font-size: 16px; }
.phase-fab .phase-fab-arrow {
  color: #8c7c5c;
  font-weight: 400;
}
.phase-fab.is-night {
  background: linear-gradient(135deg, #0f1424, #1a2040);
  border-color: #6a8cc8;
  color: #b8d0ee;
}
.phase-fab.is-day {
  background: linear-gradient(135deg, #2a1d10, #3a2818);
  border-color: #d4a040;
  color: #f0c878;
}

@media (max-width: 700px) {
  .phase-fab {
    right: 10px;
    bottom: 10px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .phase-fab .phase-fab-arrow { color: transparent; width: 8px; }
  .phase-fab .phase-fab-arrow::before {
    content: '›';
    color: #c9a84c;
    font-size: 18px;
    line-height: 1;
  }
}

/* ══════════════════════════════════════════════
   TIMELINE-OVERLAY
   ══════════════════════════════════════════════ */
.modal-timeline {
  /* Stand auf 560px und liess auf einem 1400px-Schirm zwei Drittel leer.
     Die Filter brachen dadurch auf drei Reihen um und die Ereignisse
     standen gequetscht darunter. */
  width: min(1080px, 95vw);
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-timeline .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.timeline-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.25);
  font-weight: 600;
  color: #e8c97c;
}
.timeline-current.is-night {
  background: rgba(106,140,200,.1);
  border-color: rgba(106,140,200,.3);
  color: #b8d0ee;
}
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.timeline-phase {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.2);
  overflow: hidden;
}
.timeline-phase.is-active {
  border-color: rgba(201,168,76,.5);
  box-shadow: 0 0 0 1px rgba(201,168,76,.25);
}
.timeline-phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  font-weight: 600;
  font-size: 14px;
  color: #ddd;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.timeline-phase-head .ph-name { display: inline-flex; align-items: center; gap: 8px; }
.timeline-phase.is-night .timeline-phase-head { color: #b8d0ee; }
.timeline-phase.is-day   .timeline-phase-head { color: #f0c878; }
.timeline-phase-events {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.timeline-phase-events:empty::after {
  content: 'Keine Ereignisse';
  display: block;
  padding: 8px 14px;
  color: #888;
  font-size: 13px;
  font-style: italic;
}
.timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14px;
  color: #ddd;
  border-top: 1px solid rgba(255,255,255,.04);
}
.timeline-event:first-child { border-top: none; }
.timeline-event-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
/* Ohne min-width: 0 kann ein Flex-Kind nicht unter seine Inhaltsbreite
   schrumpfen — ein langer Name oder Notiztext schob die Zeile deshalb ueber
   den Rand hinaus, statt umzubrechen. */
.timeline-event-text {
  flex: 1; min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.timeline-event.kind-death .timeline-event-text { color: #e88a8a; }
.timeline-event.kind-revive .timeline-event-text { color: #8ad0a0; }
.timeline-event-del {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
}
.timeline-event-del:hover { color: #e88a8a; }
.timeline-empty {
  text-align: center;
  padding: 24px;
  color: #888;
  font-style: italic;
}

/* ══════════════════════════════════════════════
   PHASEN-ENDE-DIALOG (wer ist gestorben?)
   ══════════════════════════════════════════════ */
.modal-phase-end { width: min(440px, 95vw); max-width: 95vw; }
.phase-end-question {
  margin: 0 0 12px;
  color: #ddd;
  font-size: 15px;
}
.phase-end-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.phase-end-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.phase-end-list li:hover { background: rgba(255,255,255,.05); }
.phase-end-list li.selected {
  background: rgba(232,138,138,.12);
  border-color: rgba(232,138,138,.55);
}
.phase-end-list li .pe-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: transparent;
}
.phase-end-list li.selected .pe-check {
  border-color: #e88a8a;
  color: #e88a8a;
}
.phase-end-list li .pe-name { flex: 1; font-weight: 500; color: #ddd; }
.phase-end-list li .pe-role { font-size: 12px; color: #888; }
.phase-end-empty { color: #888; text-align: center; font-style: italic; }

/* ══════════════════════════════════════════════
   NOTE-MODAL
   ══════════════════════════════════════════════ */
.modal-note { width: min(440px, 95vw); max-width: 95vw; }

.phase-end-list li.is-dead { opacity: .65; }
.phase-end-list li.is-dead .pe-name { color: #aaa; }
.phase-end-list li.selected.is-dead {
  opacity: 1;
  background: rgba(232,138,138,.18);
  border-color: rgba(232,138,138,.7);
}
.pe-dead-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: #888;
  font-size: 11px;
  font-weight: 500;
}

/* History-Einträge: Phase + Zeitstempel */
.claim-history li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.claim-history .hist-name { flex: 1; min-width: 0; }
.claim-history .hist-phase {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(201,168,76,.15);
  color: #c9a84c;
  white-space: nowrap;
}
.claim-history .hist-time {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
}

/* Timeline Event Farb-Hints */
.timeline-event.kind-claim   .timeline-event-text { color: #d8c890; }
.timeline-event.kind-suspect .timeline-event-text { color: #d8a890; }
.timeline-event.kind-others_claim .timeline-event-text { color: #b0c8d8; }

/* ══════════════════════════════════════════════
   SPIELNOTIZEN-MODAL (Tablet-optimiert)
   ══════════════════════════════════════════════ */
.modal-notes {
  width: min(720px, 96vw);
  height: min(820px, 92vh);
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.modal-notes .notes-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal-notes .notes-view.hidden { display: none; }
.modal-notes .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.notes-new-btn {
  font-size: 16px;
  padding: 14px;
  margin-bottom: 14px;
  min-height: 52px;
}
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes-empty {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-style: italic;
}
.note-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}
.note-card:hover { background: rgba(255,255,255,.06); border-color: rgba(201,168,76,.3); }
.note-card:active { transform: scale(.98); }
.note-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}
.note-card-phase {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(201,168,76,.18);
  color: #d4af37;
  font-weight: 600;
  font-size: 11px;
}
.note-card-phase.is-night { background: rgba(106,140,200,.18); color: #b8d0ee; }
.note-card-phase.is-day   { background: rgba(212,160,64,.18);  color: #f0c878; }
.note-card-time { color: #888; }
.note-card-text {
  font-size: 15px;
  line-height: 1.45;
  color: #e0e0e0;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-card-empty { color: #666; font-style: italic; }

/* Editor-Ansicht */
.notes-back-btn {
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.notes-edit-meta {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #888;
  padding: 0 12px;
}
.notes-edit-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px !important;
}
.notes-edit-input {
  flex: 1;
  min-height: 0;
  resize: none;
  font-size: 17px;
  line-height: 1.5;
  padding: 16px;
  font-family: inherit;
}
.notes-edit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.notes-save-hint {
  font-size: 12px;
  color: #888;
}
.notes-save-hint.saving { color: #c9a84c; }
.notes-save-hint.saved  { color: #6da06d; }

@media (max-width: 700px) {
  .modal-notes {
    width: 100vw;
    height: 100vh; height: 100dvh;
    max-width: 100vw;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
  .notes-edit-input { font-size: 16px; }
}

/* Klickbare Timeline-Events (verlinken zur Notiz) */
.timeline-event.is-jumpable {
  cursor: pointer;
  transition: background .15s;
}
.timeline-event.is-jumpable:hover {
  background: rgba(201,168,76,.06);
}
.timeline-event .jump-hint {
  display: inline-block;
  margin-left: 6px;
  color: #c9a84c;
  font-weight: 700;
  opacity: .7;
}

/* Notiz-Titel (optional) */
.notes-edit-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  flex-shrink: 0;
}
.note-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0e0c0;
  margin-bottom: 4px;
  word-break: break-word;
}

/* Confirm-Dialog muss IMMER über allen anderen Modals liegen */
#confirm-backdrop { z-index: 9999 !important; }
#confirm-backdrop .modal { z-index: 10000 !important; }

/* Notizen: Toggle-Button "Alles lesen" im Header */
.notes-toggle-btn {
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
}

/* Read-Mode: alle Notizen am Stück */
.notes-list.is-read-mode {
  gap: 0;
}
.note-read {
  padding: 16px 4px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.note-read:last-child { border-bottom: none; }
.note-read:hover { background: rgba(255,255,255,.02); }
.note-read-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}
.note-read-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0e0c0;
  margin: 0 0 8px 0;
  word-break: break-word;
}
.note-read-text {
  font-size: 15px;
  line-height: 1.55;
  color: #e0e0e0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ══════════════════════════════════════════════
   APP-LOGO (Loading / Login / Dashboard-Header)
   ══════════════════════════════════════════════ */
.brand-logo {
  display: inline-block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--ninjo-gold);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.25),
    0 0 16px rgba(212,175,55,.35),
    0 6px 18px rgba(0,0,0,.55);
  position: relative;
  flex-shrink: 0;
}
.brand-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.brand-logo-sm {
  width: 44px; height: 44px;
  border-radius: 12px;
  border-width: 1.5px;
}
.brand-logo-lg {
  width: 96px; height: 96px;
  border-radius: 22px;
}
.brand-logo-xl {
  width: 128px; height: 128px;
  border-radius: 28px;
}

/* Login-Logo soll mittig ein bisschen "schweben" */
.login-logo.brand-logo {
  margin: 0 auto 18px;
  display: block;
  animation: brandFloat 6s ease-in-out infinite;
}
@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Loading-Logo dezent pulsen */
.loading-card .brand-logo {
  margin-bottom: 12px;
  animation: brandPulse 2.4s ease-in-out infinite;
}
@keyframes brandPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 0 16px rgba(212,175,55,.30), 0 6px 18px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 0 1px rgba(212,175,55,.40), 0 0 28px rgba(212,175,55,.65), 0 6px 22px rgba(0,0,0,.55); }
}

/* Login-Beschreibung */
.login-desc {
  margin: 8px 0 14px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}
.login-hint {
  margin: 0 0 16px;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

/* Loading-Untertitel */
.loading-subtitle {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .4px;
  font-style: italic;
}

/* Längerer App-Name darf auf kleinen Screens kleiner werden */
.header-title {
  font-size: 16px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .header-title { font-size: 14px; }
}
@media (max-width: 480px) {
  .header-title { font-size: 13px; max-width: 60vw; }
}

/* Add-Player-Row wird via flex-Layout fixiert — siehe oben */

/* Spielerzähler im Header der Spielerverwaltung */
.roster-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(201,168,76,.15);
  color: #c9a84c;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}

/* Range-Slider (Kreis-Größe) */
.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
}
.form-range:focus { outline: none; }
.form-range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(to right, var(--ninjo-gold-dim), var(--ninjo-gold));
  border-radius: 3px;
}
.form-range::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, var(--ninjo-gold-dim), var(--ninjo-gold));
  border-radius: 3px;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ninjo-gold);
  border: 2px solid var(--bg-0);
  margin-top: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  cursor: grab;
}
.form-range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ninjo-gold);
  border: 2px solid var(--bg-0);
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  cursor: grab;
}
.scale-value {
  margin-left: 8px;
  color: var(--ninjo-gold);
  font-weight: 700;
  font-size: 12px;
}

/* Notiz-Editor Footer: Trash links, Auto-Save mittig, OK rechts */
.notes-edit-foot { gap: 10px; }
.notes-edit-trash {
  color: #c8736b;
  flex-shrink: 0;
}
.notes-edit-trash:hover {
  color: #fff;
  background: var(--demon);
}
.notes-edit-foot .notes-save-hint {
  flex: 1;
  text-align: left;
}

/* Eigene Token (Custom-Charaktere) im Settings-Panel */
.custom-chars-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.custom-chars-empty {
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.custom-char-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 13px;
}
.custom-char-item .cc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.custom-char-item .cc-name { flex: 1; color: var(--text-1); font-weight: 600; }
.custom-char-item .cc-type { font-size: 11px; color: var(--text-3); margin-right: 4px; }
.custom-char-item .cc-del {
  background: transparent;
  color: var(--text-3);
  border: none;
  width: 24px; height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  justify-content: center;
}
.custom-char-item .cc-del:hover { color: var(--demon); background: rgba(192,57,43,.12); }
.custom-char-form {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.custom-char-form .btn-primary { align-self: flex-end; }

/* Custom-Token im Picker als Text */
.char-card-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .5px;
}

/* Mini-Text-Pille für Custom-Token überall wo sonst ein <img> stünde */
.char-mini-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  border: 2px solid currentColor;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .5px;
  flex-shrink: 0;
}

/* Pro-Spieler-Notizen-Liste im Player-Panel */
.player-notes-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.player-notes-empty {
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.player-note-item {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.player-note-item:hover {
  background: var(--bg-card);
  border-color: rgba(201,168,76,.3);
}
.player-note-item .pn-meta {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}
.player-note-item .pn-title {
  font-weight: 700;
  color: #f0e0c0;
  font-size: 13px;
  margin-bottom: 2px;
  word-break: break-word;
}
.player-note-item .pn-text {
  font-size: 12px;
  color: var(--text-1);
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.player-note-item .pn-empty { color: var(--text-3); font-style: italic; }

/* Player-Note Modal nutzt Auto-Save-Layout vom game-notes Editor */
.modal-note .notes-edit-foot { padding-top: 8px; }

/* ══════════════════════════════════════════════
   PLAYER-CARD MODAL (ehemals Side-Panel)
   ══════════════════════════════════════════════ */
.modal-player-card {
  width: min(560px, 96vw);
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.modal-player-card .modal-body.player-card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card-Header mit Prev/Next/Mini-Token */
.player-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.player-card-header .pc-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.player-card-header .pc-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.pc-mini-token {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #6c7080;
  background: #F1DFBA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 800;
  font-size: 14px;
  color: #6c7080;
  transition: border-color .15s ease;
}
.pc-mini-token.is-dead { opacity: .6; filter: grayscale(.6); }
.pc-mini-token #pc-mini-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}
.pc-nav {
  background: rgba(255,255,255,.04);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px; height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.pc-nav:hover { border-color: var(--ninjo-gold); color: var(--ninjo-gold); }
.pc-close { margin-left: 4px; }

/* Mobile: Vollbild */
@media (max-width: 700px) {
  .modal-player-card {
    width: 100vw;
    height: 100vh; height: 100dvh;
    max-width: 100vw;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
  .player-card-header {
    padding: 8px 10px;
  }
  .pc-nav { width: 40px; height: 40px; min-height: 40px; }
}

/* ══════════════════════════════════════════════
   PWA: OFFLINE-INDIKATOR + UPDATE-BANNER
   ══════════════════════════════════════════════ */

.offline-indicator {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(40, 25, 20, 0.92);
  border: 1px solid #b07a4c;
  color: #f0d9bf;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  pointer-events: none;
  user-select: none;
  letter-spacing: .2px;
}
.offline-indicator .oi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f0a040;
  box-shadow: 0 0 8px rgba(240,160,64,.7);
  animation: oi-pulse 2s ease-in-out infinite;
}
@keyframes oi-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
@media (max-width: 480px) {
  .offline-indicator { font-size: 11px; padding: 6px 10px; top: 8px; right: 8px; }
  .offline-indicator span:nth-child(2) {
    display: inline-block;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Update-Banner */
.pwa-update-banner {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: linear-gradient(135deg, #2a1d17, #3a2820);
  border: 1px solid var(--ninjo-gold);
  color: var(--text-1);
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 16px rgba(212,175,55,.25);
  max-width: calc(100vw - 24px);
}
.pub-icon  { color: var(--ninjo-gold); font-size: 16px; }
.pub-text  { font-weight: 600; }
.pub-btn {
  background: var(--ninjo-gold);
  color: #14100E;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
}
.pub-btn:hover { background: var(--ninjo-gold-light); }
.pub-dismiss {
  background: transparent;
  color: var(--text-3);
  border: none;
  width: 28px; height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.pub-dismiss:hover { color: var(--text-1); background: rgba(255,255,255,.06); }

/* ══════════════════════════════════════════════
   MODAL-Z-HIERARCHIE
   Player-Card unten, alles was DARÜBER aufpoppt höher.
   ══════════════════════════════════════════════ */
#player-card-backdrop  { z-index: 200; }
#picker-backdrop       { z-index: 260; }
#claim-menu-backdrop   { z-index: 280; }
#timeline-backdrop     { z-index: 240; }
#notes-backdrop        { z-index: 270; }
#player-note-backdrop  { z-index: 285; }
#note-backdrop         { z-index: 290; }
/* #confirm-backdrop bleibt bei 9999 — höchste Stufe */

/* ══════════════════════════════════════════════
   PHASE A1 — Eigene Rolle, Demon-Bluffs, Setup-Helfer
   ══════════════════════════════════════════════ */

/* Demon-Bluff Slots */
.demon-bluffs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.bluff-slot {
  background: rgba(0,0,0,.3);
  border: 1.5px dashed #4a3a2c;
  border-radius: 8px;
  padding: 8px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bluff-slot:hover { border-color: var(--ninjo-gold); }
.bluff-slot .bluff-slot-preview {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.bluff-slot .char-pick-display { font-size: 11px; }
.bluff-slot .char-pick-display img,
.bluff-slot .char-pick-display .char-mini-text {
  width: 28px; height: 28px;
}

/* Setup-Helfer */
.setup-helper { display: flex; flex-direction: column; gap: 6px; }
.setup-helper .form-label-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-2);
}
.setup-dist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 4px 0;
}
.setup-dist .sd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--c, #4a3a2c);
  border-radius: 8px;
  min-height: 60px;
  justify-content: center;
}
.setup-dist .sd-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--c);
  line-height: 1;
}
.setup-dist .sd-lbl {
  font-size: 10px;
  color: var(--text-2);
  margin-top: 4px;
  letter-spacing: .3px;
}
.setup-helper-hint {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
  margin: 0;
}

/* Phase A2: Verlauf-Suche */
.timeline-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.timeline-search-wrap input {
  padding-right: 40px;
}
#btn-timeline-search-clear {
  position: absolute;
  right: 4px;
  width: 32px; height: 32px;
  min-height: 32px;
}

/* Phase A3: Status-Flags */
.status-flags-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.status-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
}
.status-flag input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 18px; height: 18px;
}
.status-flag .sf-label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 600;
}
.status-flag input:checked ~ .sf-label {
  color: #f0c878;
}
.status-flag input:checked {
  accent-color: var(--ninjo-gold);
}

/* Phase B — Polished empty states */
.games-empty {
  display: block;
  max-width: 520px;
  margin: 40px auto;
  padding: 32px 24px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: var(--radius-lg);
  text-align: center;
}
.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(212,175,55,.4));
}
.empty-state-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ninjo-gold);
  margin: 0 0 12px;
  letter-spacing: .3px;
}
.empty-state-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 16px;
}
.empty-state-list {
  text-align: left;
  display: inline-block;
  margin: 0;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.empty-state-list li::marker { color: var(--ninjo-gold); }
.empty-state-list strong { color: var(--text-1); }

/* Editor Empty-State (Kreis ohne Spieler) */
.circle-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  background: rgba(20,16,14,.85);
  border: 1px dashed rgba(201,168,76,.3);
  border-radius: var(--radius-lg);
  max-width: 320px;
  pointer-events: none;
}
.circle-hint .ch-icon { font-size: 36px; }
.circle-hint .ch-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ninjo-gold);
}
.circle-hint .ch-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}

/* Phase C — Skript-Builder Modal */
.modal-script-builder {
  width: min(720px, 96vw);
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .modal-script-builder {
    width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; border-radius: 0;
  }
}
.modal-script-builder .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.sb-counter {
  margin-left: auto;
  margin-right: 8px;
  font-size: 12px;
  color: var(--ninjo-gold);
  font-weight: 700;
}
.sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.sb-card {
  background: rgba(0,0,0,.25);
  border: 1.5px solid #3a2c1f;
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  font-family: inherit;
}
.sb-card:hover { border-color: #c9a84c; }
.sb-card.selected {
  background: rgba(212,175,55,.18);
  border-color: var(--ninjo-gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,.3);
}
.sb-card-img {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-card-img img { width: 48px; height: 48px; border-radius: 50%; }
.sb-card-name { font-size: 12px; font-weight: 700; }
.sb-card-type { font-size: 10px; color: var(--text-3); }

/* ST-Mode Hint im Body */
body.is-storyteller .editor-header::after {
  content: '👑 ST-Mode';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--ninjo-gold);
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.3);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
  letter-spacing: .3px;
}

/* Phase D2 — Charakter-Abilities */
.char-card-ability {
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: left;
  font-style: italic;
  /* Auf 4 Zeilen begrenzen */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.char-pick-ability {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,.08);
  white-space: normal;
}

/* Phase D3 — Onboarding Toast */
.onboarding-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  width: min(420px, calc(100vw - 24px));
  background: linear-gradient(135deg, #2a1d17, #3a2820);
  border: 1.5px solid var(--ninjo-gold);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.7), 0 0 24px rgba(212,175,55,.25);
  padding: 16px 18px;
  animation: ot-in .35s cubic-bezier(.2,.9,.3,1.2);
}
.onboarding-toast.is-dismissing {
  animation: ot-out .25s ease-out forwards;
}
@keyframes ot-in {
  from { transform: translate(-50%, 60px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}
@keyframes ot-out {
  to { transform: translate(-50%, 60px); opacity: 0; }
}
.onboarding-toast .ot-title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ninjo-gold);
  margin-bottom: 8px;
}
.onboarding-toast .ot-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-1);
  margin: 0 0 12px;
}
.onboarding-toast .ot-dismiss {
  background: var(--ninjo-gold);
  color: #14100E;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  font-size: 13px;
}
.onboarding-toast .ot-dismiss:hover { background: var(--ninjo-gold-light); }

/* ══════════════════════════════════════════════
   CAT-QUICK-GRID — Kategorie-Buttons in claim/suspect Sektionen
   ══════════════════════════════════════════════ */
.cat-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.cq-btn {
  --cq-color: #6c7080;
  min-width: 0;
  width: 100%;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid #4a3a2c;
  background: rgba(0,0,0,.25);
  color: var(--cq-color);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cq-btn:hover { background: rgba(201,168,76,.1); transform: translateY(-1px); }
.cq-btn[data-cat="townsfolk"] { --cq-color: #4a90e2; }
.cq-btn[data-cat="outsider"]  { --cq-color: #41b0b0; }
.cq-btn[data-cat="minion"]    { --cq-color: #e0793a; }
.cq-btn[data-cat="demon"]     { --cq-color: #c0392b; }
.cq-btn.cq-clear              { --cq-color: #8a7a64; }
.cq-btn.active {
  background: var(--cq-color);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.cq-btn .cq-icon  { font-size: 18px; line-height: 1; font-weight: 700; }
.cq-btn .cq-label { font-size: 10px; line-height: 1.1; font-weight: 600; letter-spacing: .2px; }

.status-flags-reset {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.status-flag .sf-label {
  display: inline-block;
  font-size: 13px;
  color: var(--text-1);
  font-weight: 600;
}

/* On-The-Block Banner über dem Canvas */
.otb-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 32;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #2a1d17, #3a2820);
  border: 1.5px solid #c9a84c;
  color: #f0d9bf;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 16px rgba(212,175,55,.18);
  pointer-events: none;
}
.otb-banner[hidden] { display: none; }
.otb-banner .otb-icon  { font-size: 16px; }
.otb-banner .otb-text  { display: inline-flex; flex-direction: column; line-height: 1.1; }
.otb-banner .otb-title { font-size: 10px; color: #c9a84c; letter-spacing: .4px; text-transform: uppercase; }
.otb-banner .otb-name  { font-size: 14px; font-weight: 800; color: #fff; }
.otb-banner .otb-votes {
  font-size: 11px;
  color: var(--text-2);
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.15);
}
@media (max-width: 480px) {
  .otb-banner { font-size: 11px; padding: 6px 10px; }
  .otb-banner .otb-name { font-size: 12px; }
}

/* SVG: Emoji-Glyphen brauchen eine Color-Emoji-Schriftart, sonst werden
   manche Symbole als unsichtbarer Text gerendert. */
#botc-circle .sf-icon,
#botc-circle .team-mark-icon,
#botc-circle .player-suspect-cat {
  font-family:
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Noto Color Emoji',
    'Twemoji Mozilla',
    sans-serif;
}

.sf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.5);
  letter-spacing: 0;
}

/* Status-Pille mit echtem BotC-Charakter-Icon */
.sf-pill-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #F1DFBA;
  border: 2px solid var(--ring, #c9a84c);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.sf-pill-img img {
  width: 36px; height: 36px;
  object-fit: cover;
  margin-top: -3px; /* BotC-PNG zentrieren — Symbol sitzt im oberen Drittel */
  pointer-events: none;
}

/* Relation-Card Modal */
.modal-relation-card {
  width: min(420px, 96vw);
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .modal-relation-card {
    width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; border-radius: 0;
  }
}
#relation-card-backdrop { z-index: 220; }

.sf-pill-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  flex-shrink: 0;
}
.sf-pill-svg svg {
  width: 18px; height: 18px;
}

/* ══════════════════════════════════════════════
   PHASE E — Timeline 2.0
   ══════════════════════════════════════════════ */

/* Kategorie-Filter-Chips (E-1) */
.timeline-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-md);
  margin-bottom: 10px;
}
.tcf-chip {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tcf-chip:hover {
  border-color: var(--ninjo-gold);
  color: var(--ninjo-gold);
}
.tcf-chip.is-active {
  background: rgba(201,168,76,.18);
  border-color: var(--ninjo-gold);
  color: var(--ninjo-gold);
}
.tcf-chip.is-inactive {
  opacity: .35;
}
.tcf-chip.tcf-pin.is-active {
  background: rgba(255,154,60,.2);
  border-color: #ff9a3c;
  color: #ffb87a;
}

/* Pin-Sektion oben (E-4) */
.timeline-pinned {
  border: 1px solid rgba(255,154,60,.4);
  background: rgba(255,154,60,.06);
  border-radius: 10px;
  padding: 8px 10px 4px;
  margin-bottom: 12px;
}
.timeline-pinned.hidden { display: none; }
.tlp-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffb87a;
  margin-bottom: 6px;
}
.tlp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tlp-list .timeline-event {
  background: transparent;
  border-top: 1px dashed rgba(255,154,60,.18);
}
.tlp-list .timeline-event:first-child { border-top: none; }

/* Tageszusammenfassung (E-5) */
.timeline-phase-summary {
  font-size: 11.5px;
  color: #a89986;
  font-style: italic;
  padding: 4px 0 8px 28px;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  margin-bottom: 4px;
}

/* Pin-Button + Phase-Jump (E-4 / E-6) */
.timeline-event-pin,
.timeline-event-jump {
  background: transparent;
  border: none;
  color: #6a5d4c;
  font-size: 14px;
  width: 24px; height: 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: color .15s, background .15s;
  flex: 0 0 auto;
}
.timeline-event-pin:hover     { color: #ffb87a; background: rgba(255,154,60,.12); }
.timeline-event-jump:hover    { color: #c9a84c; background: rgba(201,168,76,.12); }
.timeline-event.is-pinned {
  background: rgba(255,154,60,.05);
  border-left: 2px solid rgba(255,154,60,.5);
}
.timeline-event.is-pinned .timeline-event-pin {
  color: #ffb87a;
}

/* Footer mit zwei Buttons */
.modal-footer.timeline-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* flex: 0 0 auto liess den Knopf nicht schrumpfen; im schmalen Fenster
   wurde "Verlauf exportieren" am linken Rand abgeschnitten. Jetzt darf er
   schrumpfen, und wenn es eng wird, rutscht er in die naechste Zeile. */
.modal-footer.timeline-footer .btn-ghost { flex: 0 1 auto; white-space: nowrap; }
.modal-footer.timeline-footer .btn-primary { flex: 1 1 200px; }

/* ══════════════════════════════════════════════
   PHASE G — Hosted Sessions
   ══════════════════════════════════════════════ */

.dashboard-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.active-session-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 8px 0 14px;
  background: linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.04));
  border: 1px solid rgba(201,168,76,.4);
  border-radius: 10px;
}
.active-session-banner.hidden { display: none; }
.asb-icon { font-size: 26px; }
.asb-text { flex: 1; min-width: 0; }
.asb-title { font-weight: 700; color: var(--ninjo-gold); }
.asb-title #asb-code {
  font-family: 'Courier New', monospace;
  letter-spacing: .15em;
  font-size: 16px;
  color: #ffe0a0;
}
.asb-sub { font-size: 12px; color: #a89986; margin-top: 2px; }
.asb-actions { display: flex; gap: 6px; }

/* Host-Session-Modal */
.modal-host-session,
.modal-join-session { max-width: 560px; }
.modal-host-panel   { max-width: 520px; }

.modal-intro {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-fieldset {
  border: 1px solid var(--border-md);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0 0;
}
.form-fieldset legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--ninjo-gold);
  font-weight: 600;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
}
.form-check input { cursor: pointer; }

.hs-seat-list {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.hs-seat-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.hs-seat-num {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  font-size: 12px;
  font-weight: 700;
  color: var(--ninjo-gold);
  flex-shrink: 0;
}
.hs-seat-row .hs-seat-name { flex: 1; min-height: 30px; padding: 0 8px; font-size: 13px; }

/* Join-Modal */
.js-code-input {
  font-family: 'Courier New', monospace;
  letter-spacing: .3em;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.js-preview {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
}
.js-preview.hidden { display: none; }
.jsp-title { font-weight: 700; color: var(--ninjo-gold); }
.jsp-meta  { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.js-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(200,44,44,.15);
  border: 1px solid rgba(200,44,44,.4);
  color: #ff9a9a;
  font-size: 13px;
}
.js-error.hidden { display: none; }

/* Host-Panel */
.hp-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.02));
  border: 1px solid rgba(201,168,76,.4);
  border-radius: 8px;
  margin-bottom: 12px;
}
.hp-code-label { font-size: 12px; color: #a89986; }
.hp-code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .25em;
  color: #ffe0a0;
  text-align: center;
}
.hp-joined-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.hp-joined-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  font-size: 13px;
}
.hp-joined-row:last-child { border-bottom: none; }
.hp-joined-empty {
  color: #8a7a64;
  font-style: italic;
  font-size: 12.5px;
  padding: 6px 0;
  margin: 0;
}
.modal-host-panel .form-fieldset .btn-full {
  margin-top: 6px;
}

/* ══════════════════════════════════════════════
   USER-FREIGABE — Wartebildschirm + Admin-Modal
   ══════════════════════════════════════════════ */

/* Wartebildschirm */
.pending-wrap {
  max-width: 480px;
  margin: 8vh auto;
  padding: 32px 28px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.pending-logo { margin: 0 auto 18px; }
.pending-title {
  font-size: 22px;
  color: var(--ninjo-gold);
  margin: 6px 0 14px;
}
.pending-text {
  color: var(--text-2);
  line-height: 1.5;
  font-size: 14px;
  margin: 0 0 18px;
}
.pending-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 16px;
  text-align: left;
  font-size: 13px;
}
.pending-info-label { color: var(--text-2); margin-right: 6px; }
.pending-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(201,168,76,.18);
  border: 1px solid rgba(201,168,76,.4);
  color: var(--ninjo-gold);
  font-weight: 700;
  font-size: 12px;
}
.pending-status-pill.is-rejected {
  background: rgba(200,44,44,.18);
  border-color: rgba(200,44,44,.5);
  color: #ff9a9a;
}
.pending-hint {
  font-size: 12.5px;
  color: #a89986;
  line-height: 1.5;
  margin: 0 0 18px;
}

/* Admin-Button mit Wartend-Badge */
.approvals-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #C82C2C;
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.approvals-badge.hidden { display: none; }

/* Approvals-Modal */
.modal-approvals { max-width: 640px; }
.approvals-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 10px;
  overflow-x: auto;
}
.approvals-tab {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 6px 6px 0 0;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.approvals-tab:hover { color: var(--ninjo-gold); }
.approvals-tab.is-active {
  background: rgba(201,168,76,.14);
  color: var(--ninjo-gold);
  border-bottom: 2px solid var(--ninjo-gold);
}
.approvals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 56vh;
  overflow-y: auto;
}
.approvals-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.approvals-row:last-child { border-bottom: none; }
.appr-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border-md);
}
.appr-avatar-fallback {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(201,168,76,.18);
  color: var(--ninjo-gold);
  font-weight: 700;
  font-size: 18px;
}
.appr-info { flex: 1; min-width: 0; }
.appr-name { font-weight: 700; font-size: 14px; }
.appr-email { font-size: 12px; color: var(--text-2); word-break: break-all; }
.appr-meta { font-size: 11px; color: #8a7a64; margin-top: 2px; }
.appr-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  margin-right: 4px;
}
.appr-pill.is-pending  { background: rgba(201,168,76,.18); color: var(--ninjo-gold); }
.appr-pill.is-approved { background: rgba(77,179,112,.18); color: #8fdca0; }
.appr-pill.is-rejected { background: rgba(200,44,44,.18); color: #ff9a9a; }
.appr-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.approvals-empty {
  text-align: center;
  padding: 24px;
  color: #8a7a64;
  font-style: italic;
  font-size: 13px;
}
.approvals-empty.hidden { display: none; }

.appr-self-hint {
  font-size: 11.5px;
  color: #8a7a64;
  font-style: italic;
  padding: 4px 10px;
}

.form-fieldset .form-hint {
  font-size: 12px;
  color: #a89986;
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid var(--ninjo-gold);
  border-radius: 0 4px 4px 0;
}
.form-fieldset .form-hint strong { color: var(--ninjo-gold); }

/* ══════════════════════════════════════════════
   KONZEPT 1 — Verbindungs-Filter-Chip + Dim
   ══════════════════════════════════════════════ */

.rel-filter-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
}
.rel-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 20, 26, 0.75);
  border: 1px solid var(--border-md);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color .15s, color .15s;
}
.rel-filter-chip:hover {
  border-color: var(--ninjo-gold);
  color: var(--ninjo-gold);
}
.rfc-icon { font-size: 14px; }
.rel-filter-menu {
  position: absolute;
  top: 38px;
  right: 0;
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 30;
}
.rel-filter-menu[hidden] { display: none; }
.rfm-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-1);
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
}
.rfm-item:hover { background: rgba(255,255,255,.04); }
.rfm-item.is-active { background: rgba(201,168,76,.12); color: var(--ninjo-gold); }
.rfm-radio {
  font-size: 14px;
  color: var(--ninjo-gold);
  margin-top: 1px;
}
.rfm-text { display: flex; flex-direction: column; gap: 2px; }
.rfm-title { font-weight: 700; font-size: 13px; }
.rfm-sub   { font-size: 11px; color: var(--text-2); }

/* Gedimmte Verbindungen — vergangene phasen-gebundene Linien im „Bis hier"-Modus */
#botc-circle .rel-group.is-dimmed .rel-path { opacity: .18 !important; }
#botc-circle .rel-group.is-dimmed .rel-label-text { opacity: .35; }
#botc-circle .rel-group.is-dimmed .rel-label-bg { opacity: .35; }

/* ══════════════════════════════════════════════
   KONZEPT 2 — Mobile-Optimierung (Phone < 540px)
   Tablet & Desktop bleiben unverändert.
   ══════════════════════════════════════════════ */

@media (max-width: 540px) {

  /* M1: Toolbar zusammenklappen */
  .editor-header .editor-actions {
    gap: 4px;
  }
  /* Tools-Knopfgruppe als ⋮-Menü zeigen */
  #editor-tools-menu-btn {
    display: inline-flex !important;
  }
  .editor-header .btn-tool.is-mobile-hidden {
    display: none !important;
  }
  /* Der Trenner vor der Geraete-Gruppe faellt weg — die Gruppe ist auf dem
     Handy komplett im ⋮-Menue, ein Strich vor nichts sieht nach Fehler aus.
     Der Trenner zwischen Spielen und Nachschlagen bleibt: dort stehen auf
     beiden Seiten Knoepfe, und er zeigt dieselbe Einteilung wie das Menue. */
  .editor-header .tool-sep-system {
    display: none;
  }
  .editor-header .btn-add-player-text {
    display: none;
  }
  /* Spieler-Knopf nur als Icon */
  #btn-add-player {
    padding: 0 10px;
    min-width: 44px;
  }
  /* Game-Title abkürzen */
  .game-title-display {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  /* Home-Knopf kompakter */
  #btn-back .btn-back-text { display: none; }

  /* M2: Verbindungs-Labels kompakter — kein langer Text auf der Linie */
  #botc-circle .rel-label-text {
    font-size: 9px;
  }
  /* Lange Labels (>14 Zeichen) als Punkt mit Tooltip — nicht über CSS möglich,
     daher Trick: rel-label-text via attr(data-truncated) prüfen.
     Hier nur die Schriftgröße — der Truncate passiert in JS (siehe circle.js). */

  /* M3: Token-Beschriftung kompakter — auf Phone wird der deutsche
     Rolle-Name UNTER dem Token komplett ausgeblendet, weil das Charakter-
     Icon ON dem Token bereits die Rolle anzeigt. Nur der Spielername
     bleibt sichtbar. */
  #botc-circle .player-name {
    font-size: 11px;
  }
  #botc-circle .player-role-label { display: none; }
  /* Behauptungs-Indikator-Zeile dezenter */
  #botc-circle .rl-claim-count { display: none; }
  /* Relations-Labels dezenter und kleiner */
  #botc-circle .rel-label-text { font-size: 9px; opacity: .85; }
  #botc-circle .rel-label-bg { opacity: .75; }

  /* M4: Aktions-Hub etwas kleiner */
  .action-hub-btn {
    width: 40px; height: 40px;
    font-size: 18px;
  }
  .action-hub-wrap { top: 8px; left: 8px; }

  /* M5: Verbindungs-Filter-Chip dichter */
  .rel-filter-wrap { top: 8px; right: 8px; }
  .rel-filter-chip { padding: 5px 10px; font-size: 11px; }
  .rfc-label { display: none; }   /* nur Icon zeigen */
  .rel-filter-chip::after {
    content: '▾';
    font-size: 8px;
    margin-left: 2px;
  }

  /* M7: Modale als Bottom-Sheet */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh;
    border-radius: 16px 16px 0 0 !important;
    animation: slide-up-mobile .22s ease-out;
  }
  @keyframes slide-up-mobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Notfall-Confirm-Dialog bleibt zentriert */
  #confirm-backdrop {
    align-items: center;
    padding: 20px;
  }
  #confirm-backdrop .modal {
    border-radius: 12px !important;
    max-width: 360px !important;
  }

  /* M8: Timeline-Kategorie-Chips touch-freundlicher */
  .timeline-cat-filters {
    gap: 4px;
    padding-bottom: 8px;
  }
  .tcf-chip {
    font-size: 12px;
    padding: 7px 11px;
    min-height: 32px;
  }

  /* M9: Bottom-Phase-Scrubber kompakt */
  .phase-scrubber-pill .phase-scrubber-num {
    font-size: 11px;
  }

  /* Game-Notes-Toolbar-Knopf weglassen, Notes wandern in ⋮-Menü */
  .editor-actions { flex-wrap: nowrap; }

  /* Dashboard-Toolbar besser stapeln */
  .dashboard-toolbar { flex-wrap: wrap; gap: 8px; }
  .dashboard-toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .dashboard-toolbar-actions .btn-ghost {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Active-Session-Banner umschaltbar auf Phone */
  .active-session-banner {
    flex-wrap: wrap;
  }
  .asb-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ══════════════════════════════════════════════
   M1 — Editor-Tools-Menü (Phone)
   ══════════════════════════════════════════════ */

.editor-tools-menu {
  position: absolute;
  top: 56px;
  right: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 220px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.editor-tools-menu[hidden] { display: none; }
.etm-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-1);
  text-align: left;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
}
.etm-item:hover { background: rgba(255,255,255,.06); color: var(--ninjo-gold); }
/* Das Symbol traegt die Gruppenfarbe, die Schrift bleibt lesbar hell —
   dieselbe Zuordnung wie in der Leiste auf dem Tablet. */
.etm-icon { display: inline-flex; flex-shrink: 0; }
.etm-play   .etm-icon { color: #e8c97c; }
.etm-system .etm-icon { color: var(--text-2); }
.etm-sep {
  height: 1px; margin: 4px 8px;
  background: rgba(255,255,255,.12);
}

/* Phase-FAB kompakter auf Phone */
@media (max-width: 540px) {
  .phase-fab {
    right: 8px;
    bottom: 8px;
    height: 50px;
    min-height: 50px;
    padding: 0 12px;
    font-size: 12px;
    gap: 6px;
  }
  .phase-fab .phase-fab-label,
  .phase-fab .phase-fab-next-label { display: none; }
  .phase-fab .phase-fab-next { display: inline-flex; }
  .phase-fab .phase-fab-icon {
    font-size: 16px;
  }
  .phase-fab .phase-fab-arrow {
    width: 8px;
    font-size: 14px;
  }
  .phase-scrubber {
    bottom: 8px;
    left: 8px;
    right: auto;
    max-width: calc(100% - 124px);
  }
  .phase-scrubber-pill {
    padding: 4px 8px;
    font-size: 11px;
  }
  #botc-circle .guide-circle {
    stroke-dasharray: none !important;
    stroke-width: 1.2 !important;
    stroke: rgba(232, 201, 124, .30) !important;
  }
}

/* Filter-Chip + Cat-Filter Feinabstimmung auf Phone */
@media (max-width: 540px) {
  .rel-filter-chip {
    min-height: 32px;
    height: 32px;
    line-height: 1;
    border-radius: var(--radius-full);
  }
  .rfc-icon { font-size: 16px; line-height: 1; }
  /* Action-Hub kleiner und schlanker */
  .action-hub-btn {
    width: 42px; height: 42px;
  }
  .action-hub-icon { font-size: 18px; }
  .action-hub-wrap { top: 10px; left: 10px; }
  .rel-filter-wrap { top: 10px; right: 10px; }
  /* Cat-Filter-Chips in Timeline-Modal */
  .timeline-cat-filters {
    gap: 5px;
  }
  /* Modal-Body kompakter (Padding) */
  .modal-body { padding: 14px 14px; }
  .modal-header { padding: 14px 14px 10px; }
  .modal-footer { padding: 10px 14px; gap: 6px; }
  /* Buttons im Footer auf Phone hochkompakt */
  .modal-footer .btn-primary,
  .modal-footer .btn-ghost,
  .modal-footer .btn-danger-outline {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 36px;
  }
  /* Player-Card-spezifisch: Sticky-Header für Spielername */
  .modal-player-card .modal-header { position: sticky; top: 0; z-index: 5; background: var(--bg-card); }
  /* Verhindert dass Spielername im Bottom-Sheet abgeschnitten wird */
  .player-tabs { flex-wrap: wrap; }
}

/* Icon-Varianten: zeige Auge auf Phone, Clock auf Tablet/Desktop */
.btn-tool .icon-mobile-only { display: none; }
.btn-tool .icon-tablet-only { display: inline-block; }
@media (max-width: 540px) {
  .btn-tool .icon-mobile-only { display: inline-block; }
  .btn-tool .icon-tablet-only { display: none; }
}

/* Mobile polish: calmer top bars, safer overlays, no horizontal squeeze. */
.app-header,
.editor-header {
  position: relative;
  min-width: 0;
}

.header-left,
.header-right,
.editor-actions {
  min-width: 0;
}

@media (max-width: 820px) {
  .app-header {
    gap: 10px;
    padding: 0 14px;
  }

  .header-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-right {
    flex: 0 1 auto;
    justify-content: flex-end;
  }

  .dashboard-main {
    padding: 22px 18px;
  }

  .dashboard-toolbar {
    align-items: flex-start;
    gap: 12px;
  }

  .dashboard-toolbar-actions {
    justify-content: flex-end;
  }

  .modal {
    max-width: calc(100vw - 28px);
  }

  .modal-host-session,
  .modal-join-session,
  .modal-host-panel {
    width: min(560px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
  }
}

@media (max-width: 700px) {
  .app-header {
    height: auto;
    min-height: 60px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  }

  .app-header .brand-logo-sm {
    width: 34px;
    height: 34px;
  }

  .header-title {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .header-right .btn-ghost {
    min-height: 40px;
    padding: 0 11px;
    font-size: 12px;
  }

  .dashboard-toolbar h2 {
    line-height: 1.25;
  }

  .dashboard-toolbar-actions .btn-primary,
  .dashboard-toolbar-actions .btn-ghost {
    min-height: 44px;
  }

  .active-session-banner {
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .asb-actions {
    flex-wrap: wrap;
  }

  .form-row {
    flex-direction: column;
  }

  .approvals-tabs,
  .picker-tabs,
  .picker-scripts {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 540px) {
  .view {
    min-width: 0;
  }

  /* Dashboard-Header: Logo+Titel links, Avatar rechts, IMMER in einer Reihe.
     (Frühere Version hatte hier flex-wrap + 100%-Breite — überholt seitdem
     im Header nur noch ein Avatar-Knopf statt 4 Textknöpfe steht.) */
  .app-header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .header-clock {
    width: 26px;
    height: 26px;
  }

  .header-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-title {
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-right {
    flex: 0 0 auto;
    gap: 4px;
  }

  .header-right .btn-ghost {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 0 8px;
    max-width: none;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.025);
  }

  .dashboard-main {
    padding: 18px 14px;
  }

  .dashboard-toolbar {
    margin-bottom: 16px;
  }

  .dashboard-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .dashboard-toolbar-actions .btn-primary,
  .dashboard-toolbar-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 0 12px;
    font-size: 13px;
  }

  .dashboard-toolbar-actions .btn-ghost {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.08);
  }

  #btn-new-game {
    grid-column: 1 / -1;
    min-height: 52px;
    margin-top: 2px;
  }

  .editor-header {
    height: auto;
    min-height: 58px;
    gap: 6px;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  }

  .btn-back-btn {
    width: 42px;
    min-width: 42px;
    padding: 0;
    justify-content: center;
  }

  .game-title-display {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .editor-actions {
    flex: 0 0 auto;
    gap: 5px;
  }

  .editor-actions .btn-tool,
  #btn-add-player {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  #btn-add-player {
    padding: 0;
    justify-content: center;
  }

  .editor-tools-menu {
    top: calc(100% + 6px);
    right: 8px;
    max-width: calc(100vw - 16px);
  }

  .circle-wrap {
    min-height: 0;
  }

  .action-hub-wrap {
    top: 12px;
    left: 12px;
  }

  .rel-filter-wrap {
    top: 12px;
    right: 12px;
  }

  .action-hub-menu,
  .rel-filter-menu {
    max-width: calc(100vw - 24px);
  }

  .action-hub-menu {
    min-width: min(260px, calc(100vw - 24px));
  }

  .phase-scrubber {
    left: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: calc(100% - 118px);
  }

  .phase-fab {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    height: 50px;
    min-height: 50px;
    padding: 0 12px;
  }

  .modal-backdrop {
    width: 100vw;
    overflow: hidden;
  }

  .modal {
    max-height: calc(100dvh - env(safe-area-inset-top));
  }

  .modal-player-card {
    height: 100dvh;
    max-height: 100dvh;
  }

  .player-card-header {
    gap: 6px;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  }

  .pc-mini-token {
    width: 34px;
    height: 34px;
  }

  .player-card-header .pc-name {
    font-size: 15px;
  }

  .pc-close {
    margin-left: 0;
  }

  .modal-player-card .modal-body.player-card-body {
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    gap: 14px;
  }

  .onboarding-toast {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-height: 34dvh;
    overflow-y: auto;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .onboarding-toast .ot-title {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .onboarding-toast .ot-text {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .onboarding-toast .ot-dismiss {
    min-height: 40px;
    padding: 0 16px;
  }
}

@media (max-width: 380px) {
  .header-title,
  .game-title-display {
    font-size: 12px;
  }

  .editor-header {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .editor-actions {
    gap: 4px;
  }

  .editor-actions .btn-tool,
  #btn-add-player,
  .btn-back-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

/* Phase E-3 (Event-Edit) und E-9 (Event-Kommentar) wurden entfernt — CSS
   für die Modale und den Edit-Marker auf den Events ist hier raus. */


/* ══════════════════════════════════════════════
   PROFIL-SHEET — Avatar im Header + konsolidiertes Menü
   ══════════════════════════════════════════════ */

/* Avatar-Knopf im Dashboard-Header */
.btn-profile {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .1s ease;
}
.btn-profile:hover { transform: scale(1.05); }
.btn-profile:active { transform: scale(0.97); }
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201,168,76,.18);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201,168,76,.4);
  color: var(--ninjo-gold);
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
}
.profile-avatar.has-photo .profile-avatar-initial { display: none; }
.profile-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #C82C2C;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}
.profile-badge.hidden { display: none; }

/* Profile-Sheet (Backdrop + Container) */
#profile-sheet-backdrop {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
  z-index: 250;
}
.profile-sheet {
  width: min(360px, 100vw);
  max-height: 92vh;
  margin: 64px 12px 0 0;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ps-drag-handle { display: none; }

/* Phone: Bottom-Sheet von unten */
@media (max-width: 540px) {
  #profile-sheet-backdrop {
    align-items: flex-end;
    justify-content: center;
  }
  .profile-sheet {
    width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: 16px 16px 0 0;
    animation: ps-slide-up .22s ease-out;
  }
  .ps-drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-md);
    border-radius: 999px;
    margin: 10px auto 0;
  }
}
@keyframes ps-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Header (Avatar + Name + Mail + Close) */
.ps-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border-md);
}
.ps-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201,168,76,.18);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201,168,76,.4);
  color: var(--ninjo-gold);
  font-weight: 700;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ps-avatar-lg.has-photo .ps-avatar-initial { display: none; }
.ps-id { flex: 1; min-width: 0; }
.ps-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-email {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sektionen */
.ps-section {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-md);
}
.ps-section.hidden { display: none; }
.ps-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a89986;
  font-weight: 700;
  margin-bottom: 8px;
}
.ps-section-logout {
  border-bottom: none;
  margin-top: auto;
}

/* Theme-Toggle */
.ps-theme-toggle {
  display: flex;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.ps-theme-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 12px;
  padding: 7px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ps-theme-btn:hover { color: var(--ninjo-gold); }
.ps-theme-btn.is-active {
  background: rgba(201,168,76,.2);
  color: var(--ninjo-gold);
  font-weight: 600;
}
.ps-theme-hint {
  font-size: 10.5px;
  color: #8a7a64;
  margin: 6px 0 0;
  font-style: italic;
}

/* Rows */
.ps-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  border-radius: 6px;
  color: var(--text-1);
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.ps-row:hover { background: rgba(255,255,255,.04); }
.ps-row-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.ps-row-label { flex: 1; min-width: 0; }
.ps-row-title { font-weight: 600; }
.ps-row-sub   { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.ps-row-text  { flex: 1; min-width: 0; }
.ps-row-chevron {
  color: var(--text-2);
  font-size: 16px;
  margin-left: 4px;
  opacity: .5;
}
.ps-row-badge {
  background: #C82C2C;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
}
.ps-row-badge.hidden { display: none; }
.ps-row-danger {
  color: #ff7a7a;
}
.ps-row-danger:hover { background: rgba(200,44,44,.10); }

/* Aktive Sitzung Block */
.ps-session-active {
  padding: 10px 0 4px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 4px;
}
.ps-session-active.hidden { display: none; }
.ps-row-actions {
  display: flex;
  gap: 6px;
  padding: 2px 0 8px 40px;
}
.ps-code {
  font-family: 'Courier New', monospace;
  letter-spacing: .15em;
  color: #ffe0a0;
}

.ps-footer {
  padding: 12px 16px 14px;
  text-align: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6a5d4c;
}

/* About-Modal */
.modal-about { max-width: 520px; }
.about-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 14px;
}
.about-logo img { border-radius: 12px; }
.about-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ninjo-gold);
}
.about-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.about-version { font-size: 11.5px; color: #a89986; margin-top: 4px; }
.about-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1);
  margin: 0 0 14px;
}
.about-text-sm { font-size: 12px; color: var(--text-2); line-height: 1.45; margin: 0; }
.about-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.about-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ninjo-gold);
  margin-bottom: 6px;
}
.about-libs {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.about-libs li {
  padding: 3px 0;
  border-bottom: 1px dashed var(--border);
}
.about-libs li:last-child { border-bottom: none; }
.about-libs strong { color: var(--text-1); }

/* Legacy-Knöpfe (Proxy-Targets für ProfileSheet) immer ausblenden —
   das HTML hidden-Attribut allein reicht nicht, falls flexbox children
   doch noch Platz bekommen. */
.header-right > #user-display-name,
.header-right > #btn-approvals,
.header-right > #btn-admin,
.header-right > #btn-logout,
.header-right > #btn-approvals-badge {
  display: none !important;
}

/* Header-Layout-Garantie: Brand+Titel links, Avatar rechts — IMMER in
   einer Reihe, nie wrapping. */
.app-header {
  flex-wrap: nowrap;
}
.app-header .header-left {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.app-header .header-right {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.app-header .brand-logo {
  flex: 0 0 auto;
}
.app-header .header-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Dashboard-Toolbar: „Neues Spiel" oben, „Sitzung beitreten" direkt darunter.
   „Sitzung erstellen" ist absichtlich raus (jetzt nur im Profil-Sheet). */
.dashboard-toolbar-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.dashboard-toolbar-actions .btn-primary,
.dashboard-toolbar-actions .btn-ghost.btn-join-under-new {
  width: 100%;
  justify-content: center;
}
.btn-join-under-new {
  font-size: 12.5px;
  padding: 6px 10px;
  opacity: .92;
}

/* Auf breiteren Screens nebeneinander ist zwar denkbar, aber der User
   wollte explizit untereinander → bleibt auch auf Desktop column. */

/* Versteckter btn-host-session (Profil-Proxy) */
.dashboard-toolbar-actions > #btn-host-session {
  display: none !important;
}

/* ══════════════════════════════════════════════
   WIKI-MODAL — lokal gerenderte Charakter-Infos im Dark-Theme
   ══════════════════════════════════════════════ */

#wiki-backdrop { z-index: 270; padding: 12px; }
.modal-wiki {
  width: min(640px, 100vw);
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-wiki .modal-header { flex: 0 0 auto; }
.wiki-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.wiki-modal-body {
  flex: 1 1 auto;
  padding: 16px 18px 12px;
  overflow-y: auto;
}

/* Hero */
.wiki-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.wiki-hero-img {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  object-fit: cover;
  flex-shrink: 0;
}
.wiki-hero-text { flex: 1; min-width: 0; }
.wiki-hero-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ninjo-gold);
}
.wiki-hero-type {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
}

/* Sektionen */
.wiki-section {
  margin-bottom: 16px;
}
.wiki-section.hidden { display: none; }
.wiki-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89986;
  margin-bottom: 6px;
}

/* Ability — prominent */
.wiki-ability {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
  padding: 10px 12px;
  background: rgba(201,168,76,.06);
  border-left: 3px solid rgba(201,168,76,.6);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
}

/* Tips & Tricks */
.wiki-tips {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
  padding-left: 4px;
}

/* Jinxes */
.wiki-jinx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wiki-jinx-item {
  padding: 8px 12px;
  background: rgba(192,57,43,.07);
  border-left: 3px solid rgba(192,57,43,.5);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.5;
}
.wiki-jinx-with {
  display: block;
  font-weight: 700;
  color: #ff9a9a;
  margin-bottom: 2px;
  font-size: 12.5px;
}
.wiki-jinx-rule { color: var(--text-1); }

/* No-Data-Banner */
.wiki-no-data {
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--border-md);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 14px;
}
.wiki-no-data.hidden { display: none; }

/* Source-Sticker — sichtbarer „verlässt die App"-Button */
.wiki-source-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 10px;
  color: var(--text-1);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  cursor: pointer;
}
.wiki-source-btn:hover {
  background: linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.08));
  border-color: var(--ninjo-gold);
  transform: translateY(-1px);
}
.wiki-source-btn:active { transform: translateY(0); }
.wsb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(201,168,76,.18);
  color: var(--ninjo-gold);
  border: 1px solid rgba(201,168,76,.4);
}
.wsb-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wsb-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ninjo-gold);
  line-height: 1.2;
}
.wsb-sub {
  font-size: 11px;
  color: #a89986;
  line-height: 1.2;
}
.wsb-arrow {
  font-size: 22px;
  color: var(--ninjo-gold);
  opacity: .55;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  #wiki-backdrop { padding: 0; align-items: flex-end; }
  .modal-wiki {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  .wiki-hero-img { width: 52px; height: 52px; }
  .wiki-hero-name { font-size: 16px; }
  .wiki-ability { font-size: 13px; padding: 8px 10px; }
  .wiki-tips { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════
   CHARAKTER-ÜBERSICHT (📋)
   ══════════════════════════════════════════════ */

#char-overview-backdrop { z-index: 245; }
.modal-char-overview {
  width: min(720px, 100vw);
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.cov-body { padding: 12px 16px 18px; overflow-y: auto; }
.cov-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
}
.cov-content { display: flex; flex-direction: column; gap: 18px; }
.cov-section {}
.cov-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cov-section-icon { font-size: 16px; font-weight: 700; }
.cov-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cov-section-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--border);
}
.cov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.cov-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.cov-card:hover {
  background: rgba(201,168,76,.08);
  border-color: rgba(201,168,76,.4);
  transform: translateY(-1px);
}
.cov-card:active { transform: translateY(0); }
.cov-card-img {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  overflow: hidden;
}
.cov-card-img img {
  width: 48px; height: 48px;
  object-fit: cover;
}
.cov-card-fallback {
  font-weight: 700;
  font-size: 14px;
}
.cov-card-name {
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cov-card-badge {
  position: absolute;
  top: 2px; right: 2px;
  font-size: 8px;
  font-weight: 700;
  background: rgba(201,168,76,.25);
  color: var(--ninjo-gold);
  padding: 1px 5px;
  border-radius: 999px;
}
.cov-empty {
  padding: 24px;
  text-align: center;
  color: #8a7a64;
  font-style: italic;
}
.cov-empty.hidden { display: none; }

@media (max-width: 540px) {
  #char-overview-backdrop { align-items: flex-end; padding: 0; }
  .modal-char-overview {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  .cov-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .cov-card-img { width: 40px; height: 40px; }
  .cov-card-img img { width: 40px; height: 40px; }
  .cov-card-name { font-size: 10.5px; }
}

/* Wiki-Sprach-Umschalter (DE/EN) — kompakt im Header */
.wiki-lang-toggle {
  display: inline-flex;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-md);
  border-radius: 999px;
  padding: 1px;
  gap: 0;
  margin-right: 4px;
}
.wiki-lang-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 7px;
  min-height: 0;
  line-height: 1.2;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.wiki-lang-btn:hover { color: var(--ninjo-gold); }
.wiki-lang-btn.is-active {
  background: rgba(201,168,76,.22);
  color: var(--ninjo-gold);
}

/* Wiki-Disclaimer (oben im Modal) */
.wiki-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  margin-bottom: 12px;
  background: rgba(255,154,60,.08);
  border: 1px solid rgba(255,154,60,.35);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #d8c890;
}
.wd-icon {
  color: #ffb87a;
  font-size: 14px;
  line-height: 1.3;
  flex-shrink: 0;
}
.wd-text strong { color: #ffd89a; }

/* Sehr schmale Phones (< 380px): Spieltitel ausblenden — Toolbar wäre
   sonst überfüllt. Titel bleibt via Settings-Panel zugänglich. */
@media (max-width: 380px) {
  .editor-header .game-title-display { display: none; }
}

/* ⋮-Menü „Spieler hinzufügen" hervorheben (Primär-Aktion am Spielstart) */
.editor-tools-menu .etm-item.etm-primary {
  background: rgba(192,57,43,.18);
  color: #ffb87a;
  border-bottom: 1px solid var(--border-md);
  margin-bottom: 4px;
  font-weight: 600;
}
.editor-tools-menu .etm-item.etm-primary:hover {
  background: rgba(192,57,43,.28);
  color: #ffd89a;
}

/* Empty-State-Hinweis je nach Geräteklasse anderer Text */
.ch-text-phone { display: none; }
.ch-text-tablet { display: block; }
@media (max-width: 540px) {
  .ch-text-phone { display: block; }
  .ch-text-tablet { display: none; }
}

/* Mini-Disclaimer direkt überhalb der Fähigkeit — keine Box, nur dezenter
   Fußnoten-Stil mit kleinem ⚠-Präfix */
.wiki-disclaimer-compact {
  padding: 0;
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 1.25;
  color: #8a7a64;
  background: none;
  border: none;
  font-style: italic;
}
.wiki-disclaimer-compact .wd-icon {
  font-size: 10px;
  color: #b48a40;
  margin-right: 2px;
}
.wiki-disclaimer-compact .wd-text strong {
  color: #c9a84c;
  font-weight: 600;
  font-style: normal;
}

/* Verlauf-Filter: Spieler + Tag */
.timeline-extra-filters {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.tef-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
  font-weight: 600;
  min-width: 0;
}
.tef-select {
  font-size: 12px;
  padding: 5px 8px;
  min-height: 32px;
}
.timeline-extra-filters .btn-sm {
  flex-shrink: 0;
  font-size: 11px;
  padding: 6px 9px;
}

/* Phasen-Ende-Dialog: Status-Effekt-Sektion */
.phase-end-flags-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.phase-end-flags-wrap.hidden { display: none; }
.phase-end-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #a89986;
  font-weight: 700;
  margin-bottom: 4px;
}
.phase-end-flags-hint {
  font-size: 11.5px;
  color: var(--text-2);
  margin: 0 0 8px;
  line-height: 1.4;
}
.phase-end-flags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pef-row {
  background: rgba(255,255,255,.02);
  border-radius: 6px;
}
.pef-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.pef-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pef-player { font-weight: 600; flex: 1; }
.pef-flag {
  color: var(--text-2);
  font-size: 11.5px;
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Dashboard: Spiel-Suche */
.games-search-wrap {
  position: relative;
  margin: 8px 0 12px;
}
.games-search-wrap.hidden { display: none; }
.games-search-input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  font-size: 14px;
}
.games-search-input::placeholder { color: #8a7a64; }
.games-search-wrap .btn-icon-sm {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.games-no-match {
  padding: 24px;
  text-align: center;
  color: #8a7a64;
  font-style: italic;
  font-size: 13px;
}

/* Neues-Spiel-Modal: Charakter-Pool */
.new-game-pool {
  margin-top: 14px;
  padding: 0;
}
.new-game-pool > summary {
  cursor: pointer;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.new-game-pool > summary::-webkit-details-marker { display: none; }
.new-game-pool > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform .12s;
}
.new-game-pool[open] > summary::before { transform: rotate(90deg); }
.new-game-pool > summary .ngp-summary-title { font-weight: 600; }
.new-game-pool > summary .ngp-optional {
  color: var(--text-2);
  font-weight: 400;
  font-size: 11px;
}
.ngp-count {
  font-size: 11px;
  color: var(--ninjo-gold);
  background: rgba(201,168,76,.14);
  padding: 2px 8px;
  border-radius: 999px;
}
.ngp-body {
  padding: 10px 4px 4px;
}
.ngp-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ngp-template { flex: 1; min-height: 32px; font-size: 12px; }
.ngp-toolbar .btn-sm { flex-shrink: 0; font-size: 11px; padding: 6px 9px; }
.ngp-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.ngp-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  margin-bottom: 4px;
}
.ngp-cat-count {
  font-size: 10px;
  color: var(--text-2);
}
.ngp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ngp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 11.5px;
  cursor: pointer;
  transition: all .12s;
}
.ngp-chip img { width: 22px; height: 22px; border-radius: 50%; }
.ngp-chip:hover {
  border-color: rgba(201,168,76,.5);
  color: var(--text-1);
}
.ngp-chip.is-on {
  background: rgba(201,168,76,.18);
  border-color: var(--ninjo-gold);
  color: var(--ninjo-gold);
}
.ngp-save {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ngp-save input { flex: 1; min-height: 32px; font-size: 12px; }
.ngp-save .btn-sm { flex-shrink: 0; }

/* Profil-Sheet: Templates-Liste */
.ps-templates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-templates-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border);
}
.ps-templates-row:last-child { border-bottom: none; }
.pstpl-info { flex: 1; min-width: 0; }
.pstpl-name { font-weight: 600; font-size: 13px; }
.pstpl-meta { font-size: 11px; color: var(--text-2); }
.pstpl-del { flex-shrink: 0; }
.ps-templates-empty {
  font-size: 11px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}
.ps-templates-empty.hidden { display: none; }

/* Skript-Import direkt im Neues-Spiel-Dialog (vorher nur versteckt
   in der zugeklappten Charakter-Pool-Sektion erreichbar) */
.ng-import-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px dashed rgba(201,168,76,.45);
  border-radius: 8px;
  background: rgba(201,168,76,.06);
}
.ng-import-btn:hover {
  background: rgba(201,168,76,.13);
  border-color: rgba(201,168,76,.7);
}
.ng-import-btn .ngi-icon { font-size: 18px; flex-shrink: 0; }
.ng-import-btn .ngi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ng-import-btn .ngi-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.ng-import-btn .ngi-sub { font-size: 11px; color: var(--text-2); line-height: 1.3; white-space: normal; }
.ng-import-info {
  margin: -4px 0 10px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(63,162,94,.14);
  border: 1px solid rgba(63,162,94,.4);
  color: #9ce0b3;
  font-size: 12px;
}
.ng-import-info.hidden { display: none; }

/* ══════════════════════════════════════════════
   Skript-JSON-Import-Modal
   ══════════════════════════════════════════════ */
/* Wird AUS dem Neues-Spiel-Dialog geöffnet — muss darüber liegen. Beide
   hatten z-index 200, und da dieses Backdrop früher im DOM steht, lag es
   unsichtbar dahinter ("es öffnet sich kein Fenster"). */
#script-import-backdrop { z-index: 295; }

.modal-script-import { max-width: 560px; width: 92vw; }
.modal-script-import .modal-intro { font-size: 12px; color: var(--text-2); margin: 0 0 10px; line-height: 1.4; }
.modal-script-import .modal-intro a { color: var(--accent); text-decoration: none; }
.modal-script-import .modal-intro a:hover { text-decoration: underline; }
.si-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.si-file-label { cursor: pointer; }
.si-file-name { font-size: 12px; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-text { font-family: ui-monospace, Menlo, monospace; font-size: 11px; resize: vertical; min-height: 80px; }
.si-preview {
  margin-top: 10px; padding: 10px; border-radius: 8px;
  background: rgba(74,144,226,.08); border: 1px solid rgba(74,144,226,.25);
}
.si-preview.hidden { display: none; }
.si-preview-head { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.si-preview-stats { font-size: 12px; color: var(--text-2); }
.si-preview-warnings { margin-top: 8px; }
.si-warn { font-size: 11px; color: #ffb84d; line-height: 1.4; }

/* Inhalts-Vorschau: welche Rollen kommen tatsächlich? */
.si-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.si-group-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 3px;
}
.si-group-n { opacity: .65; font-weight: 600; }
.si-group-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.si-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 11px; line-height: 1.5;
}
.si-chip.is-placeholder {
  background: rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.4);
  border-style: dashed;
  color: #e8c97c;
}
.si-chip-mark { font-weight: 700; opacity: .75; }
.si-note {
  margin-top: 8px; font-size: 11px; color: var(--text-2);
  font-style: italic; line-height: 1.4;
}

/* Skript-Zeile im Neues-Spiel-Dialog: Import + Meine Skripte nebeneinander */
.ng-script-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ng-script-row .ng-import-btn { flex: 1 1 0; margin-bottom: 0; min-width: 0; }
@media (max-width: 540px) { .ng-script-row { flex-direction: column; } }
.ngi-count { opacity: .6; font-weight: 500; }

/* Werkzeugleiste im Charakter-Admin */
.admin-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; flex-wrap: wrap;
}
.admin-search { flex: 1 1 220px; max-width: 340px; }
.admin-count { font-size: 12px; color: var(--text-2); white-space: nowrap; }

/* „Skript merken"-Haken im Import-Fenster */
.si-save-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: auto; font-size: 12px; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.si-save-toggle input { cursor: pointer; }

/* ══════════════════════════════════════════════
   Skript-Manager
   ══════════════════════════════════════════════ */
#script-manager-backdrop { z-index: 296; }
.modal-script-manager { max-width: 520px; width: 92vw; }
.sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.sm-info { flex: 1; min-width: 0; cursor: default; }
.sm-name { font-size: 13px; font-weight: 600; }
.sm-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.sm-rename, .sm-del { flex-shrink: 0; }
.sm-del:hover { color: #ff9a9a; }
.sm-empty {
  font-size: 12px; color: var(--text-2); font-style: italic;
  line-height: 1.5; margin: 0;
}
.sm-empty.hidden { display: none; }

/* Platzhalter im Charakter-Pool des Wizards */
.ngp-chip.is-placeholder {
  border-style: dashed;
  border-color: rgba(201,168,76,.45);
}
.ngp-chip-mark {
  margin-left: 3px; font-weight: 700; font-size: 10px;
  color: #e8c97c; opacity: .8;
}
.si-error {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: rgba(200,44,44,.12); border: 1px solid rgba(200,44,44,.35);
  color: #ff9a9a; font-size: 12px;
}
.si-error.hidden { display: none; }

/* ══════════════════════════════════════════════
   Spiel-Statistik-Modal
   ══════════════════════════════════════════════ */
.modal-game-stats { max-width: 480px; width: 92vw; }
.gs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 480px) { .gs-grid { grid-template-columns: repeat(2, 1fr); } }
.gs-tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 10px 8px; text-align: center;
}
.gs-tile-wide { grid-column: span 2; }
.gs-num { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.gs-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.gs-win-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.25);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 10px;
}
.gs-win-lbl { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.gs-win-val { font-size: 18px; font-weight: 700; }
.gs-foot { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--text-2); }
.gs-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2); margin: 16px 0 6px;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px;
}
.gs-phase-list { display: flex; flex-direction: column; gap: 4px; }
.gs-phase-row {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,.03);
  border-left: 3px solid transparent;
}
.gs-phase-row.is-night { border-left-color: #5b6a8a; }
.gs-phase-row.is-day { border-left-color: #c9a84c; }
.gs-phase-lbl { font-size: 12px; font-weight: 600; min-width: 70px; }
.gs-phase-bits { font-size: 12px; color: var(--text-2); flex: 1; }
.gs-phase-empty { font-style: italic; opacity: .5; }

.gs-pin-list {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.gs-pin-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(201,168,76,.08);
  border-left: 3px solid #c9a84c;
  font-size: 12px; line-height: 1.4;
}
.gs-pin-phase {
  font-weight: 600; min-width: 50px; flex-shrink: 0; color: var(--text-2);
  font-size: 11px;
}
.gs-pin-icon { flex-shrink: 0; }
.gs-pin-text { flex: 1; min-width: 0; word-wrap: break-word; }

/* ══════════════════════════════════════════════
   Nachtrag-Modus (rückwirkende Einträge in einer besuchten Phase)
   ══════════════════════════════════════════════ */
.ttb-backfill {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ttb-backfill:hover { background: rgba(255,255,255,.16); }
.ttb-backfill.is-on {
  background: #2e7d46;
  border-color: #3fa25e;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(63,162,94,.25);
}
.ttb-backfill[hidden] { display: none; }

/* Banner deutlich einfärben wenn Nachtragen aktiv */
.time-travel-banner.is-backfill {
  border-color: #3fa25e;
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(63,162,94,.35);
}
.time-travel-banner.is-backfill .ttb-readonly { color: #9ce0b3; font-weight: 600; }

/* Canvas-Rahmen signalisiert „du schreibst in die Vergangenheit" */
.circle-wrap.is-backfill::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px dashed rgba(63,162,94,.55);
  border-radius: 10px;
}

/* Aktions-Hub im Nachtrag-Modus hervorheben */
.action-hub-btn.is-backfill {
  box-shadow: 0 0 0 2px rgba(63,162,94,.6);
}

/* Verlauf: nachgetragene Einträge kennzeichnen */
/* Nichts im Banner darf unsichtbar abgeschnitten werden — lieber umbrechen.
   (Der Nachtragen-Knopf sprengte sonst die Breite und "Zurück zu jetzt"
   verschwand hinter overflow:hidden.) */
.time-travel-banner {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  overflow: visible;
  white-space: normal;
}
@media (max-width: 700px) {
  .time-travel-banner { border-radius: 18px; }
}

.timeline-event.is-backfilled { border-left: 3px solid rgba(63,162,94,.6); }
.tl-backfill-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(63,162,94,.18);
  border: 1px solid rgba(63,162,94,.4);
  color: #9ce0b3;
  font-size: 10px;
  font-style: italic;
  vertical-align: middle;
  white-space: nowrap;
}

/* Stats-Button im Game-Over-Banner */
.game-over-banner .gob-stats {
  margin-left: auto; padding: 6px 12px;
  background: rgba(255,255,255,.08); color: var(--text-1);
  border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
  font-size: 12px; cursor: pointer;
}
.game-over-banner .gob-stats:hover { background: rgba(255,255,255,.14); }
.game-over-banner .gob-stats + .gob-resume { margin-left: 8px; }

/* „Dieses Spiel"-Reiter im Charakter-Picker */
.picker-tab-game {
  border-color: rgba(201,168,76,.55) !important;
  color: #e8c97c;
}
.picker-tab-game.hidden { display: none; }
.picker-tab .pt-count { opacity: .65; font-weight: 500; margin-left: 2px; }

/* Globale Skripte im Manager — für alle Nutzer sichtbar */
.sm-row.is-global {
  background: rgba(201,168,76,.08);
  border-color: rgba(201,168,76,.3);
}
.sm-row.is-global .sm-name { color: #e8c97c; }
.sm-global:hover { color: #e8c97c; }

/* ══════════════════════════════════════════════
   Abstimmung am Kreis
   ══════════════════════════════════════════════ */
.vote-bar {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  border: 1.5px solid #c9a84c;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,.6);
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
}
.vote-bar.hidden { display: none; }
.vb-head { display: inline-flex; align-items: center; gap: 7px; }
.vb-icon { font-size: 17px; }
.vb-nominee { font-size: 15px; font-weight: 700; color: #ffe0a0; }
.vb-count { display: inline-flex; align-items: baseline; gap: 4px; }
.vb-yes { font-size: 22px; font-weight: 800; color: #e8c97c; line-height: 1; }
.vb-sep { color: var(--text-2); }
.vb-need { font-size: 15px; font-weight: 700; color: var(--text-2); }
.vb-label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.vb-hint { font-size: 11px; color: var(--text-2); font-style: italic; }
.vb-actions { display: inline-flex; gap: 7px; }
/* Schwelle erreicht — deutlich sichtbar */
.vote-bar.is-met { border-color: #3fa25e; box-shadow: 0 6px 22px rgba(0,0,0,.6), 0 0 0 2px rgba(63,162,94,.3); }
.vote-bar.is-met .vb-yes { color: #7fe0a0; }

/* Token-Markierungen im Kreis */
.circle-wrap.is-voting .player-group { cursor: pointer; }
.player-group.is-nominee .player-ring {
  stroke: #ffe0a0; stroke-width: 5;
  filter: drop-shadow(0 0 7px rgba(255,224,160,.85));
}
.player-group.is-vote-yes .player-ring {
  stroke: #3fa25e; stroke-width: 5;
  filter: drop-shadow(0 0 6px rgba(63,162,94,.8));
}
.player-group.is-vote-ghost .player-ring {
  stroke: #9a7fd0; stroke-width: 5;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 6px rgba(154,127,208,.8));
}
.aw-vote-canvas { margin-bottom: 12px; }

@media (max-width: 700px) {
  .vote-bar { top: 68px; border-radius: 18px; gap: 10px; padding: 7px 12px; }
  .vb-hint { display: none; }
}

/* Hinweis unter dem Dreh-Regler */
.rot-hint {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.4;
  margin-top: 4px;
}
/* Während der Abstimmung nichts versehentlich verschieben */
.circle-wrap.is-voting .player-group { cursor: pointer; }
.circle-wrap.is-voting .rel-line,
.circle-wrap.is-voting .claim-line { pointer-events: none; opacity: .35; }

/* Spielerliste: Sitzreihenfolge umsortieren */
#player-roster li { position: relative; touch-action: pan-y; }
#player-roster li.is-dragging { opacity: .5; }
#player-roster li.is-drop-target { outline: 2px dashed rgba(201,168,76,.75); outline-offset: 2px; }
/* Ohne min-width:0 kann das Namensfeld nicht schrumpfen — die Zeile
   brach dann um und Greifer, Pfeile und ✕ rutschten unter den Namen. */
.player-roster .roster-name-input { min-width: 0; }
.roster-grip {
  flex-shrink: 0;
  cursor: grab;
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  width: 30px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  user-select: none;
  touch-action: none;   /* sonst scrollt die Liste statt zu sortieren */
}
.roster-grip:active { cursor: grabbing; background: rgba(201,168,76,.18); }
.roster-move { display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.roster-move button {
  /* Die globale Regel button{min-height:var(--touch)} macht die Pfeile
     sonst 48px hoch — die Zeile wuchs dadurch auf ueber 100px. */
  width: 30px; height: 21px; min-height: 21px;
  padding: 0; line-height: 1;
  font-size: 11px;
  justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  color: var(--text-2);
  cursor: pointer;
}
.roster-move button:active { background: rgba(201,168,76,.28); color: #e8c97c; }
.roster-move button:disabled { opacity: .3; cursor: default; }
@media (max-width: 540px) {
  .player-roster li { gap: 6px; padding-left: 8px; }
  .roster-grip { width: 26px; font-size: 18px; }
  .roster-move button { width: 26px; }
  .roster-grip { height: 40px; }
}

/* Vollbild-Knopf in der Werkzeugleiste im aktiven Zustand */
.btn-tool.is-active {
  background: rgba(201,168,76,.22);
  border-color: rgba(201,168,76,.6);
  color: #e8c97c;
}

/* ══════════════════════════════════════════════
   Rollen-Leiste — welche Charaktere sind im Spiel?
   ══════════════════════════════════════════════ */
.role-bar {
  position: absolute;
  top: 12px; right: 12px; bottom: 12px;
  width: 230px;
  z-index: 35;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(26,20,16,.97), rgba(20,16,13,.97));
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.55);
  overflow: hidden;
}
.role-bar.hidden { display: none; }
.rb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rb-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #e8c97c; flex: 1; }
.rb-count { font-size: 11px; color: var(--text-2); }
.rb-hint { margin: 0; padding: 6px 12px; font-size: 10px; color: var(--text-2); font-style: italic; }
.rb-hint b { color: var(--text-1); font-style: normal; }
.rb-list { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.rb-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  margin: 8px 0 3px 4px;
}
.rb-item {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-height: 34px; height: 34px;
  padding: 0 8px; margin-bottom: 3px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: var(--text-1);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.rb-item img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.rb-noicon { width: 22px; text-align: center; color: var(--text-2); flex-shrink: 0; }
.rb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-mark { font-weight: 700; flex-shrink: 0; }
/* Zustände */
.rb-item.is-in {
  background: rgba(63,162,94,.18); border-color: rgba(63,162,94,.55); color: #9ce0b3;
}
.rb-item.is-raus {
  background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.07);
  color: var(--text-3); opacity: .5;
}
.rb-item.is-raus .rb-name { text-decoration: line-through; }
.rb-item.is-auto { border-style: dashed; cursor: default; }
.rb-item.is-blink { animation: rbBlink .5s ease; }
@keyframes rbBlink { 0%,100%{ transform:none } 50%{ transform: translateX(3px) } }

/* Auf schmalen Schirmen unten statt rechts */
@media (max-width: 700px) {
  .role-bar {
    top: auto; left: 12px; right: 12px; bottom: 74px;
    width: auto; max-height: 46vh;
  }
}

/* ══════════════════════════════════════════════
   Sichtschutz — Inhalte unscharf, ein Token auf Tipp scharf
   ══════════════════════════════════════════════ */
.privacy-bar {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 44;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #1a1410, #2a1f18);
  border: 1.5px solid #9a7fd0;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
  font-size: 12px;
  max-width: calc(100% - 24px);
  flex-wrap: wrap; justify-content: center; row-gap: 5px;
  pointer-events: none;
}
.privacy-bar.hidden { display: none; }
.privacy-bar button { pointer-events: auto; }
.pv-icon { font-size: 15px; }
.pv-text { color: #cbb8ea; }

/* Alles, was verraten koennte, wird unscharf. Die Token selbst bleiben
   erkennbar, damit man sie noch treffen kann.

   Ohne Uebergang: D3 zeichnet die Elemente haeufig neu, dadurch startete
   eine Filter-Transition staendig bei 0 und die Unschaerfe kam nie an. */
/* Namen bleiben scharf. Man muss die Leute am Tisch weiter zuordnen koennen —
   verdeckt wird nur, was etwas ueber ihre Rolle verraet.

   Unschaerfe allein reicht dafuer nicht: sie nimmt die Schaerfe, nicht die
   Farbe. Ein rot umrandeter Token blieb auch verwaschen rot, ein gruener
   Haken ein gruener Fleck — wen man als gut oder boese markiert hat, war
   also weiter ablesbar. Genau das hatten zwei Leute gemeldet.

   Deshalb dreistufig: Graustufe fuer das, was unscharf bleibt; neutrale
   Faerbung fuer Ring und Token; und ganz weg, was auch als Graufleck noch
   etwas sagt. Ohne Uebergang, weil D3 die Elemente haeufig neu zeichnet und
   eine Filter-Transition dadurch staendig bei 0 neu ansetzte. */
.circle-wrap.is-private .player-role-label,
.circle-wrap.is-private .prev-claims-row,
.circle-wrap.is-private .status-flags-layer,
.circle-wrap.is-private .player-icon {
  filter: blur(7px) grayscale(1);
}

/* Die Behauptungen und Linien in der Mitte erst in Stufe 2. Was dort steht,
   wurde am Tisch laut gesagt — das muss der Nachbar nicht erst abschreiben. */
.circle-wrap.is-private-max .layer-claims,
.circle-wrap.is-private-max .layer-rel {
  filter: blur(7px) grayscale(1);
}

/* Ring und Token einheitlich neutral. CSS schlaegt die Praesentations-
   attribute, die D3 setzt, also genuegt die Regel hier; der kurz gezeigte
   Token faellt ueber :not(.is-revealed) heraus und behaelt seine Farben. */
.circle-wrap.is-private .player-group:not(.is-revealed) .player-ring,
.circle-wrap.is-private .player-group:not(.is-revealed) .player-token {
  stroke: #8d8378;
}
.circle-wrap.is-private .player-group:not(.is-revealed) .player-icon {
  fill: #8d8378;
}

/* Ganz weg statt unscharf: Rollenbild, Gut/Boese-Marke und das
   Vermutungs-Abzeichen. Graustufe laesst die Helligkeit uebrig, und ein
   dunkler Fleck gegen einen hellen an fester Stelle ist auch schon eine
   Auskunft. Der Token bleibt als leere Scheibe stehen — treffen und
   antippen kann man ihn weiterhin. */
.circle-wrap.is-private .player-group:not(.is-revealed) .player-char-img,
.circle-wrap.is-private .player-group:not(.is-revealed) .team-mark-bg,
.circle-wrap.is-private .player-group:not(.is-revealed) .team-mark-icon,
.circle-wrap.is-private .player-group:not(.is-revealed) .team-mark-q,
.circle-wrap.is-private .player-group:not(.is-revealed) .suspect-bg,
.circle-wrap.is-private .player-group:not(.is-revealed) .player-suspect-img,
.circle-wrap.is-private .player-group:not(.is-revealed) .player-suspect-cat {
  opacity: 0;
}
/* Der kurz gezeigte Token wird wieder scharf */
.circle-wrap.is-private .player-group.is-revealed .player-name,
.circle-wrap.is-private .player-group.is-revealed .player-name-title,
.circle-wrap.is-private .player-group.is-revealed .player-role-label,
.circle-wrap.is-private .player-group.is-revealed .prev-claims-row,
.circle-wrap.is-private .player-group.is-revealed .player-char-img,
.circle-wrap.is-private .player-group.is-revealed .player-suspect-img,
.circle-wrap.is-private .player-group.is-revealed .player-suspect-cat,
.circle-wrap.is-private .player-group.is-revealed .suspect-bg,
.circle-wrap.is-private .player-group.is-revealed .team-mark-bg,
.circle-wrap.is-private .player-group.is-revealed .team-mark-icon,
.circle-wrap.is-private .player-group.is-revealed .team-mark-q,
.circle-wrap.is-private .player-group.is-revealed .status-flags-layer,
.circle-wrap.is-private .player-group.is-revealed .player-icon {
  filter: none;
}
.circle-wrap.is-private .player-group.is-revealed .player-ring {
  stroke: #9a7fd0; stroke-width: 4;
  filter: drop-shadow(0 0 7px rgba(154,127,208,.8));
}
/* Rollen-Leiste im Sichtschutz ebenfalls verdecken */
.circle-wrap.is-private .role-bar .rb-list { filter: blur(7px); }
.circle-wrap.is-private .role-bar:hover .rb-list,
.circle-wrap.is-private .role-bar:focus-within .rb-list { filter: none; }

/* ══════════════════════════════════════════════
   Handy-Feinschliff
   Die zuletzt ergaenzten Bausteine hatten keine eigenen Regeln fuer
   schmale Schirme und liefen dort aus dem Rahmen.
   ══════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Sichtschutz-Hinweis: der lange Text sprengt die Zeile */
  .privacy-bar { top: 68px; border-radius: 18px; padding: 6px 12px; gap: 8px; }
  .privacy-bar .pv-text { display: none; }
  .privacy-bar::after {
    content: 'Sichtschutz'; color: #cbb8ea; font-size: 12px; font-weight: 600;
  }

  /* Rollen-Leiste als flache Schublade unten, zwei Spalten */
  .role-bar { bottom: 78px; max-height: 42vh; }
  .rb-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px;
    align-content: start;
  }
  .rb-group { grid-column: 1 / -1; margin: 6px 0 1px 2px; }
  .rb-item { margin-bottom: 0; font-size: 11px; padding: 0 6px; gap: 5px; }
  .rb-item img, .rb-noicon { width: 18px; height: 18px; }
  .rb-hint { display: none; }

  /* Skript-Manager: Knoepfe brauchen sonst mehr Platz als da ist */
  .sm-row { flex-wrap: wrap; row-gap: 6px; }
  .sm-info { flex: 1 1 100%; }
  .sm-row .btn-sm { flex: 0 0 auto; }

  /* Import-Vorschau kompakter */
  .si-list { max-height: 34vh; }
  .si-chip { font-size: 10px; padding: 2px 6px; }

  /* Statistik: Kacheln und Phasenzeilen enger */
  .gs-phase-row { padding: 5px 8px; gap: 8px; }
  .gs-phase-lbl { min-width: 58px; font-size: 11px; }
  .gs-phase-bits, .gs-pin-item { font-size: 11px; }
  .gs-pin-phase { min-width: 42px; }

  /* Charakter-Admin: Suche und Zaehler untereinander */
  .admin-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .admin-search { max-width: none; }

  /* Seiten-Panel darf nicht breiter als der Schirm sein */
  .side-panel { width: min(340px, calc(100vw - 24px)); }
}

/* Sehr schmale Geraete */
@media (max-width: 380px) {
  .rb-list { grid-template-columns: 1fr; }
  .editor-header .btn-tool { width: 42px; height: 42px; }
}

/* ══════════════════════════════════════════════
   Werkzeugleiste: Gruppen statt Icon-Reihe

   Zehn gleich aussehende Outline-Icons waren nicht auseinanderzuhalten.
   Drei Gruppen mit Trenner und eigenem Farbton geben Orientierung, noch
   bevor man das einzelne Symbol erkennt.
   ══════════════════════════════════════════════ */
.tool-group { display: inline-flex; align-items: center; gap: 4px; }
.tool-sep {
  width: 1px; height: 24px; flex-shrink: 0;
  background: rgba(255,255,255,.14);
  margin: 0 4px;
}
/* Spielen — gold, das Handwerkszeug der Runde */
.tool-group-play .btn-tool { color: #e8c97c; }
.tool-group-play .btn-tool:hover { background: rgba(201,168,76,.18); }
/* Nachschlagen — blau */
.tool-group-look .btn-tool { color: #8fbdf0; }
.tool-group-look .btn-tool:hover { background: rgba(91,160,235,.18); }
/* Geraet — zurueckhaltend grau */
.tool-group-system .btn-tool { color: var(--text-2); }
.tool-group-system .btn-tool:hover { background: rgba(255,255,255,.1); }

/* Knoepfe, die nur noch ueber das ⋮-Menue erreichbar sind */
.is-tool-hidden { display: none !important; }

/* Ab Tablet: kurze Beschriftung unter dem Icon — loest das
   Auseinanderhalten endgueltig, Platz ist dort vorhanden. */
@media (min-width: 820px) {
  .editor-header .tool-group .btn-tool {
    flex-direction: column; gap: 1px;
    width: auto; min-width: 56px; height: 46px;
    padding: 0 6px;
  }
  .editor-header .tool-group .btn-tool::after {
    content: attr(data-label);
    font-size: 9px; line-height: 1;
    letter-spacing: .02em;
    opacity: .8;
  }
  .tool-sep { height: 30px; }
}


/* Sichtschutz Stufe 2 am Knopf sichtbar — sonst sieht man dem Auge-Symbol
   nicht an, ob noch eine Stufe kommt. */
.editor-header .btn-tool.is-max {
  background: rgba(154,127,208,.28);
  color: #d7c4f5;
}


/* ══════════════════════════════════════════════
   Spielverlauf: Steuerung neben den Strom

   Ab 900px steht die Steuerung in einer eigenen Spalte links und bleibt
   beim Blaettern stehen. Die Ereignisse bekommen den Rest — rund 700px
   statt 530px, und keine drei Reihen Filter-Chips mehr ueber sich.
   Darunter bleibt alles untereinander, wie es war.
   ══════════════════════════════════════════════ */
@media (min-width: 900px) {
  .modal-timeline .modal-body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0 22px;
    align-items: start;
  }
  .timeline-controls {
    position: sticky;
    top: 0;
    align-self: start;
    padding-right: 20px;
    border-right: 1px solid var(--border);
    background: var(--bg-card);
    z-index: 1;
  }
  /* Die Trennlinien der einzelnen Bloecke waren fuer den Stapel gedacht und
     zerschneiden die Spalte sonst quer. */
  .timeline-controls .timeline-cat-filters,
  .timeline-controls .timeline-extra-filters {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
  }
  /* Spieler und Tag untereinander — nebeneinander sind die Auswahlfelder in
     300px zu schmal fuer die Namen. */
  .timeline-controls .timeline-extra-filters {
    flex-wrap: wrap;
  }
  .timeline-controls .tef-label { flex: 1 1 100%; }
  .timeline-stream { min-width: 0; }
}


/* Sprung-Knopf sitzt jetzt im Phasen-Kopf statt in einer eigenen Zeile. */
.timeline-phase-head { gap: 10px; }
.timeline-phase-head .ph-name { flex: 1; min-width: 0; }
.timeline-phase-jump {
  background: none; border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.timeline-phase-jump:hover { background: rgba(255,255,255,.08); color: var(--ninjo-gold); }
/* Phasen ohne Eintrag sollen sich nicht wichtiger machen als sie sind. */
.timeline-phase-head .ph-count { font-weight: 400; opacity: .7; }


/* Waehrend Verbindung-Zeichnen und Abstimmung ist der Kreis gesperrt — der
   Zeiger soll das auch zeigen, sonst versucht man es weiter. */
.circle-wrap.is-relation-mode .player-group,
.circle-wrap.is-vote-mode .player-group { cursor: pointer; }


/* ══════════════════════════════════════════════
   Anmeldung mit E-Mail — Google ist nicht mehr der einzige Weg
   ══════════════════════════════════════════════ */
.login-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.login-tab {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.login-tab.is-active {
  background: rgba(201,168,76,.18);
  color: var(--ninjo-gold);
}

.login-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field > span {
  font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2);
}
.login-field[hidden] { display: none; }
.login-error, .login-info {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 6px;
}
.login-error { color: #e88a8a; background: rgba(200,44,44,.12); border: 1px solid rgba(200,44,44,.3); }
.login-info  { color: #8ad0a0; background: rgba(77,179,112,.12); border: 1px solid rgba(77,179,112,.3); }
.btn-link-sm {
  background: none; border: none;
  color: var(--text-2);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px;
  align-self: center;
  min-height: 0;
}
.btn-link-sm:hover { color: var(--ninjo-gold); }
.btn-link-sm[hidden] { display: none; }

/* Trennlinie mit Wort in der Mitte */
.login-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px;
  color: var(--text-2);
  font-size: 12px;
}
.login-sep::before, .login-sep::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-md);
}