:root {
  --bg: #10131c;
  --bg-deep: #070910;
  --panel: #171d2c;
  --panel-2: #20283c;
  --panel-3: #2a344d;
  --line: #3d4865;
  --ink: #f3ecdf;
  --muted: #aeb4c3;
  --gold: #d4a017;
  --gold-shadow: #7a5800;
  --red: #b63a31;
  --red-deep: #6f211c;
  --blue: #3558a1;
  --blue-deep: #1d3567;
  --green: #2d8a5c;
  --green-deep: #1b5639;
  --orange: #c97528;
  --orange-deep: #874815;
  --wood: #8b5e3c;
  --wood-light: #a87952;
  --floor-a: #cab89b;
  --floor-b: #b6a283;
}

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

html, body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top, rgba(212,160,23,0.09), transparent 25%),
    linear-gradient(180deg, #090b11 0%, #121722 52%, #0b0e14 100%);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

button {
  font: inherit;
}

a {
  color: inherit;
}

#game-container {
  width: min(100%, 1120px);
  min-height: 100vh;
  position: relative;
}

#title-screen,
#courtroom {
  width: 100%;
  min-height: 100vh;
}

#title-screen {
  position: relative;
  overflow: hidden;
  padding: 34px 20px 50px;
}

.title-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  opacity: 0.9;
  animation: twinkle 2.2s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.2; }
}

.title-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  margin: 0 auto;
}

.hero {
  border: 4px solid var(--gold);
  background: linear-gradient(180deg, rgba(22,27,40,0.96), rgba(9,12,19,0.96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  padding: 28px 24px;
  text-align: center;
}

.title-main {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(28px, 6vw, 52px);
  line-height: 1.35;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--gold-shadow), 8px 8px 0 rgba(61,44,0,0.85);
  animation: pulse 2.1s ease-in-out infinite;
}

.title-sub {
  margin-top: 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.7vw, 10px);
  line-height: 1.9;
}

.hero-copy {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  max-width: 760px;
  margin-inline: auto;
}

.hero-strip {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-chip {
  border: 1px solid rgba(212,160,23,0.35);
  background: rgba(212,160,23,0.08);
  padding: 12px;
  font-size: 14px;
  color: var(--ink);
}

.section-title {
  margin-top: 24px;
  margin-bottom: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--gold);
}

.case-card {
  background: linear-gradient(180deg, rgba(32,40,60,0.95), rgba(18,22,34,0.95));
  border: 2px solid var(--line);
  padding: 18px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.case-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}

.case-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.case-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.8;
  color: var(--ink);
}

.case-badge {
  flex-shrink: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.5;
  color: var(--gold);
  border: 1px solid currentColor;
  padding: 4px 6px;
}

.case-copy {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.case-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  padding: 6px 8px;
}

.title-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.case-brief {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.brief-item {
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  padding: 12px 10px;
}

.brief-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.7;
  color: var(--gold);
}

.brief-value {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink);
}

/* ── Spielmodi-Teaser-Banner (unterhalb der Hero-Box) ── */
.spielmodi-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(212,160,23,0.25);
  border-left: 4px solid var(--gold);
  background: rgba(212,160,23,0.05);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.spielmodi-teaser:hover {
  background: rgba(212,160,23,0.10);
  border-color: var(--gold);
}

.spielmodi-teaser-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--gold);
  line-height: 1.7;
  margin-bottom: 5px;
}

.spielmodi-teaser-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.spielmodi-teaser-arrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--gold);
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.spielmodi-teaser:hover .spielmodi-teaser-arrow {
  transform: translateX(4px);
  opacity: 1;
}

.pixel-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  border: none;
  cursor: pointer;
  padding: 14px 18px;
  transition: transform 0.08s ease;
  border-right: 4px solid;
  border-bottom: 4px solid;
}

.pixel-btn:active {
  transform: translate(2px, 2px);
  border-right-width: 2px;
  border-bottom-width: 2px;
}

.pixel-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.pixel-btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-shadow);
}

.pixel-btn-secondary {
  background: var(--panel-2);
  color: var(--ink);
  border-color: #111722;
}

.pixel-btn-accent {
  background: var(--green);
  color: white;
  border-color: var(--green-deep);
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.08; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

#courtroom {
  display: none;
  flex-direction: column;
  position: relative;
}

#scene {
  width: 100%;
  height: min(36vh, 320px);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.bg-wall {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2b2010 0%, #20160a 70%, #1a1108 100%);
}

.window {
  position: absolute;
  top: 34px;
  width: 70px;
  height: 92px;
  background: linear-gradient(180deg, #8bc5db 0%, #76a8c0 100%);
  border: 4px solid #5a3a20;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.25);
}

.window::before,
.window::after {
  content: '';
  position: absolute;
  background: #5a3a20;
}

.window::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
}

.window::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
}

.bg-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 126px;
  background: repeating-linear-gradient(
    180deg,
    var(--wood) 0px, var(--wood) 18px,
    var(--wood-light) 18px, var(--wood-light) 20px
  );
  border-top: 4px solid #5a3a20;
}

.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82px;
  background: repeating-linear-gradient(
    90deg,
    var(--floor-a) 0px, var(--floor-a) 39px,
    var(--floor-b) 39px, var(--floor-b) 40px
  );
  border-top: 4px solid #856e54;
}

.judge-bench,
.witness-stand,
.desk {
  position: absolute;
  background: var(--wood);
  border: 4px solid #5a3a20;
  border-bottom: 6px solid #3d1f00;
  z-index: 10;
}

.judge-bench {
  width: 200px;
  height: 60px;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
}

.judge-bench::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -4px;
  right: -4px;
  height: 8px;
  background: var(--wood-light);
  border: 4px solid #5a3a20;
  border-bottom: none;
}

.witness-stand {
  right: 10%;
  bottom: 82px;
  width: 110px;
  height: 42px;
}

.desk {
  width: 120px;
  height: 42px;
  bottom: 82px;
}

.desk-left { left: 5%; }
.desk-right { right: 28%; }

.character {
  position: absolute;
  bottom: 112px;
  z-index: 20;
  image-rendering: pixelated;
}

#judge-char {
  left: 50%;
  transform: translateX(-50%);
}

#plaintiff-char { left: 7%; }
#defendant-char { right: 30%; }
#witness-char { right: 11%; display: none; }

svg.pixel-char {
  width: 58px;
  height: 87px;
  overflow: visible;
}

.talking rect.mouth {
  animation: talk 0.28s step-end infinite;
}

@keyframes talk {
  0% { height: 2px; y: 28px; }
  50% { height: 4px; y: 27px; }
  100% { height: 2px; y: 28px; }
}

.scene-zoom {
  animation: scene-zoom 0.32s ease-out;
}

@keyframes scene-zoom {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.scene-shake {
  animation: scene-shake 0.32s ease-in-out;
}

@keyframes scene-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

#moment-mal-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(16px, 3.5vw, 24px);
  color: white;
  padding: 14px 22px;
  background: var(--orange);
  text-shadow: 3px 3px 0 var(--orange-deep);
  white-space: nowrap;
}


@keyframes char-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-1deg); }
  40% { transform: translateX(4px) rotate(1deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.character-shake {
  animation: char-shake 0.4s ease-in-out 3;
}

.richtergunst-hud {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.richtergunst-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.rg-heart {
  font-size: 14px;
  line-height: 1;
  transition: color 0.25s, transform 0.25s;
}

.rg-heart-full { color: #ff6b6b; }
.rg-heart-empty { color: #3a3f52; }

.rg-heart-lost {
  animation: heart-lose 0.35s ease-out forwards;
}

@keyframes heart-lose {
  0%   { transform: scale(1.4); color: #ff6b6b; }
  100% { transform: scale(0.7); color: #3a3f52; }
}

.wort-entzogen-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 30px);
  color: var(--red);
  text-shadow: 3px 3px 0 var(--red-deep);
  padding: 20px 0 12px;
  line-height: 1.8;
}

.wort-entzogen-sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 8px;
}

.bar-btn-press {
  color: #c8aaff;
  border-color: #c8aaff;
  font-size: 7px;
}

.bar-btn-press:hover { background: #c8aaff; color: var(--bg); }

.bar-btn-mute {
  color: var(--muted);
  border-color: var(--muted);
  font-size: 7px;
  flex-shrink: 0;
}

.bar-btn-mute:hover { background: var(--muted); color: var(--bg); }

#objection-flash,
#deduction-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 26px);
  color: white;
  padding: 14px 20px;
  border: 4px solid white;
}

@keyframes objection-pop {
  0% { transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); opacity: 0; }
  40% { transform: translate(-50%, -50%) scale(1.08) rotate(2deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

#objection-flash,
#deduction-flash,
#moment-mal-flash {
  white-space: nowrap;
}

#objection-flash {
  background: var(--red);
  text-shadow: 3px 3px 0 var(--red-deep);
}

#deduction-flash {
  background: var(--blue);
  text-shadow: 3px 3px 0 var(--blue-deep);
}

#contradict-found-flash {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 7px 14px;
  background: #c97528;
  color: #fff;
  border: 2px solid #f1b16a;
  white-space: nowrap;
  pointer-events: none;
  image-rendering: pixelated;
}

@keyframes contradict-found-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

#screen-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 400;
  transition: opacity 0.12s;
}

#hud {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
  background: rgba(7,9,14,0.95);
  border-top: 4px solid var(--gold);
}

#dialogue-area {
  min-height: 240px;
  padding: 18px 18px 16px;
  border-right: 1px solid var(--line);
}

#speaker-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--bg);
  border: 2px solid rgba(0,0,0,0.3);
}

#dialogue-box {
  min-height: 118px;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.72;
  color: white;
}

#dialogue-controls {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}

#inline-sketch-panel {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.inline-sketch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.inline-sketch-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.8;
  color: var(--gold);
}

.inline-sketch-toggle {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.2s;
}

.inline-sketch-toggle:hover {
  color: var(--gold);
}

.inline-sketch-content {
  margin-top: 8px;
}

#inline-sketch-panel.collapsed .inline-sketch-content {
  display: none;
}

#inline-sketch-panel.collapsed .inline-sketch-toggle {
  content: '▶';
}

#inline-sketch-container {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

#inline-sketch-container svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 220px;
}

.inline-sketch-caption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

#hint-text {
  max-width: 78%;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.next-arrow {
  color: var(--gold);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  animation: blink 0.8s step-end infinite;
}

#sidebar {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  padding: 14px;
}

.sidebar-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.sidebar-card-header:hover .sidebar-toggle-icon {
  color: var(--gold);
}

.sidebar-toggle-icon {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
  transition: color 0.2s;
  flex-shrink: 0;
}

.sidebar-card-content {
  margin-top: 10px;
}

.sidebar-card.collapsed .sidebar-card-content {
  display: none;
}

/* ── Gesetze-Panel ───────────────────────────────────────────────────────── */
.law-item {
  border-left: 2px solid var(--gold);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.law-item:last-child { margin-bottom: 0; }

.law-norm {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--gold);
  margin-bottom: 4px;
}

.law-title-text {
  font-size: 11px;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 6px;
}

.law-text {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

.sidebar-title {
  font-family: 'Press Start 2P', monospace;
  color: var(--gold);
  font-size: 9px;
  line-height: 1.8;
}

.shortcuts-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.shortcuts-help-btn {
  font-size: 9px;
  padding: 6px 10px;
}

.shortcuts-wrap .shortcuts-strip {
  flex-basis: 100%;
  margin-top: 4px;
}

.shortcuts-wrap.collapsed .shortcuts-strip {
  display: none;
}

.sidebar-copy {
  font-size: 14px;
  line-height: 1.58;
  color: var(--muted);
}

.sidebar-subcopy {
  margin-top: 12px;
}

.issue-list,
.score-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.issue-item,
.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(8,10,18,0.5);
  border: 1px solid var(--line);
  padding: 8px 10px;
}

@keyframes notebook-pulse {
  0%   { background: rgba(8,10,18,0.5); box-shadow: none; }
  25%  { background: rgba(212,160,23,0.18); box-shadow: inset 0 0 0 1px rgba(212,160,23,0.55); }
  100% { background: rgba(8,10,18,0.5); box-shadow: none; }
}

.issue-item.notebook-pulse {
  animation: notebook-pulse 0.9s ease-out forwards;
}

@keyframes contradict-glow {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 10px 3px rgba(241,177,106,0.55); }
}

.bar-btn-contradict.pulse-active {
  animation: contradict-glow 1.1s ease-in-out infinite;
}

.issue-item.clickable {
  cursor: pointer;
}

.issue-item.clickable:hover {
  border-color: var(--gold);
  background: rgba(212,160,23,0.08);
}

.issue-label,
.score-label {
  font-size: 14px;
  line-height: 1.35;
}

.issue-status,
.score-value {
  flex-shrink: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 4px 6px;
  border: 1px solid currentColor;
}

.status-offen { color: var(--muted); }
.status-pro { color: #90d8aa; }
.status-contra { color: #ff9d96; }

#bottom-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: rgba(5,7,12,0.98);
  border-top: 1px solid var(--line);
  padding: 10px 14px 14px;
}

.bar-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border: 2px solid;
  background: transparent;
}

.bar-btn-evidence { color: var(--gold); border-color: var(--gold); }
.bar-btn-evidence:hover { background: var(--gold); color: var(--bg); }
.bar-btn-notebook { color: #8ec5ff; border-color: #8ec5ff; }
.bar-btn-notebook:hover { background: #8ec5ff; color: var(--bg); }
.bar-btn-contradict { color: #f1b16a; border-color: #f1b16a; }
.bar-btn-contradict:hover { background: #f1b16a; color: var(--bg); }
.bar-btn-verdict { color: #ff9386; border-color: #ff9386; }
.bar-btn-verdict:hover { background: #ff9386; color: var(--bg); }

.phase-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4c556b;
}

.phase-dot.active {
  background: var(--gold);
}

.overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,0.9);
  padding: 20px;
  overflow-y: auto;
}

.overlay-card {
  width: min(100%, 920px);
  margin: 0 auto;
  background: linear-gradient(180deg, #151a28 0%, #0f131d 100%);
  border: 2px solid var(--gold);
  padding: 18px;
}

.overlay-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.question-gunst-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon-close-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--line);
  padding: 8px 10px;
  cursor: pointer;
}

.icon-close-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.overlay-title {
  font-family: 'Press Start 2P', monospace;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(212,160,23,0.35);
}

.evidence-grid,
.reason-grid,
.question-options {
  display: grid;
  gap: 12px;
}

.evidence-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.evidence-card,
.reason-card,
.option-btn {
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.evidence-card {
  cursor: pointer;
  transition: border-color 0.1s ease, transform 0.1s ease, background 0.1s ease;
}

.evidence-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.evidence-card.used {
  border-color: #6fa6ff;
  background: rgba(111,166,255,0.08);
}

.evidence-card.presentation-target {
  border-color: #f1b16a;
  background: rgba(241,177,106,0.08);
}

.evidence-card.hint {
  border-color: #90d8aa;
  background: rgba(144,216,170,0.07);
  box-shadow: 0 0 0 1px rgba(144,216,170,0.25);
}

.evidence-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.evidence-icon {
  font-size: 30px;
  line-height: 1;
}

.evidence-name,
.reason-title,
.option-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.8;
}

.evidence-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-transform: uppercase;
}

.evidence-label {
  margin-top: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.8;
  color: var(--muted);
}

.evidence-copy,
.reason-copy,
.option-copy,
.question-copy,
.verdict-copy,
.result-copy,
.teaching-copy {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.62;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.close-btn {
  width: 100%;
  max-width: 320px;
  margin: 18px auto 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  background: var(--red);
  color: white;
  border: none;
  border-bottom: 4px solid var(--red-deep);
  padding: 12px 14px;
  cursor: pointer;
}

#question-screen,
#verdict-screen,
#result-screen,
#wort-entzogen-screen {
  z-index: 180;
}

.question-prompt {
  font-size: 21px;
  line-height: 1.52;
  color: var(--ink);
  margin-bottom: 8px;
}

.question-options {
  grid-template-columns: 1fr;
}

.option-btn {
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.option-btn:hover {
  border-color: var(--gold);
}

.feedback-box {
  display: none;
  margin-top: 16px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
  padding: 14px;
}

.feedback-box.show {
  display: block;
}

.feedback-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.8;
  margin-bottom: 8px;
}

.verdict-summary {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  padding: 14px;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.verdict-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}

.verdict-btn {
  min-width: 180px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 16px 14px;
  border: none;
  cursor: pointer;
  border-right: 4px solid;
  border-bottom: 4px solid;
}

.verdict-btn:active {
  transform: translate(2px, 2px);
  border-right-width: 2px;
  border-bottom-width: 2px;
}

.btn-klage { background: var(--red); color: white; border-color: var(--red-deep); }
.btn-teilweise { background: var(--orange); color: white; border-color: var(--orange-deep); }
.btn-abweis { background: var(--blue); color: white; border-color: var(--blue-deep); }
.verdict-btn.selected { outline: 3px solid white; }

.reason-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.reason-card {
  cursor: pointer;
}

.reason-card:hover,
.reason-card.selected {
  border-color: var(--gold);
}

.reason-card.selected {
  background: rgba(212,160,23,0.1);
}

.verdict-hint {
  margin-top: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}

.verdict-hint.verdict-hint-warn {
  color: #f1b16a;
}

#result-screen .overlay-card {
  text-align: center;
}

.result-header {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 24px);
  line-height: 1.8;
}

.result-stamp {
  display: inline-block;
  margin-top: 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 36px);
  border: 8px solid;
  padding: 10px 20px;
  transform: rotate(-8deg);
  animation: stamp-in 0.5s cubic-bezier(0.17,0.67,0.83,0.67);
}

@keyframes stamp-in {
  0% { transform: rotate(-8deg) scale(3); opacity: 0; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

.result-correct { color: var(--green); border-color: var(--green); }
.result-wrong { color: var(--red); border-color: var(--red); }
.result-partial { color: var(--orange); border-color: var(--orange); }

.result-block {
  margin-top: 18px;
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: 16px;
}

.block-title {
  font-family: 'Press Start 2P', monospace;
  color: var(--gold);
  font-size: 9px;
  line-height: 1.8;
  margin-bottom: 10px;
}

.result-score {
  margin-top: 18px;
  font-family: 'Press Start 2P', monospace;
  color: var(--gold);
  font-size: 11px;
  line-height: 1.8;
}

.result-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  min-width: 90px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  text-align: center;
}

.stat-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 6px;
}

.stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--ink);
}

.stat-value.stat-good {
  color: #90d8aa;
}

.result-bonus {
  margin-top: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--gold);
  border: 1px solid var(--gold);
  background: rgba(212,160,23,0.08);
  padding: 8px 14px;
  text-align: center;
  letter-spacing: 0.04em;
}

.result-link {
  margin-top: 14px;
  font-size: 14px;
  color: #9ec5ff;
}

.play-again-btn {
  margin-top: 18px;
}

@media (max-width: 940px) {
  #hud {
    grid-template-columns: 1fr;
  }

  #dialogue-area {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .phase-indicator {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .hero-strip {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 720px) {
  #title-screen,
  #tatort-screen {
    padding: 20px 12px 28px;
  }

  .hero,
  .tatort-card {
    padding: 18px 14px;
    border-width: 3px;
  }

  .title-actions,
  .tatort-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pixel-btn {
    width: 100%;
    padding: 14px 12px;
    font-size: 9px;
  }

  #scene {
    height: 250px;
    min-height: 250px;
  }

  .window {
    width: 38px;
    height: 56px;
    top: 22px;
  }

  .judge-bench {
    width: 130px;
    height: 46px;
    bottom: 76px;
  }

  .witness-stand,
  .desk {
    height: 32px;
    bottom: 76px;
  }

  .witness-stand {
    width: 62px;
    right: 7%;
  }

  .desk {
    width: 72px;
  }

  .desk-right { right: 24%; }

  svg.pixel-char {
    width: 44px;
    height: 66px;
  }

  .character {
    bottom: 100px;
  }

  #plaintiff-char { left: 4%; }
  #defendant-char { right: 22%; }
  #witness-char { right: 8%; }

  #dialogue-area,
  #sidebar {
    padding: 14px 12px;
  }

  #dialogue-box {
    min-height: 84px;
    font-size: 15px;
    line-height: 1.6;
  }

  #dialogue-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  #hint-text {
    max-width: none;
    font-size: 13px;
  }

  #inline-sketch-container svg {
    max-height: 170px;
  }

  .sidebar-title,
  .inline-sketch-title,
  .overlay-title,
  .block-title {
    font-size: 8px;
  }

  .sidebar-copy,
  .case-copy,
  .question-copy,
  .verdict-copy,
  .result-copy,
  .teaching-copy {
    font-size: 14px;
  }

  #bottom-bar {
    gap: 10px;
    padding: 10px 12px 16px;
  }

  .bar-btn {
    flex: 1 1 calc(50% - 10px);
    min-height: 42px;
    font-size: 7px;
    padding: 10px 8px;
  }

  .phase-indicator {
    width: 100%;
    justify-content: space-between;
    margin-top: 4px;
  }

  .overlay {
    padding: 10px;
  }

  .overlay-card {
    padding: 14px 12px;
  }

  .question-prompt {
    font-size: 18px;
  }

  .verdict-buttons {
    flex-direction: column;
  }

  .verdict-btn {
    min-width: 100%;
    width: 100%;
  }

  .reason-grid,
  .evidence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body {
    display: block;
  }

  #game-container {
    width: 100%;
  }

  .title-main {
    font-size: 26px;
    line-height: 1.5;
    text-shadow: 3px 3px 0 var(--gold-shadow), 6px 6px 0 rgba(61,44,0,0.85);
  }

  .title-sub {
    font-size: 7px;
  }

  .hero-copy {
    font-size: 14px;
    line-height: 1.6;
  }

  .hero-chip,
  .meta-pill {
    font-size: 12px;
  }

  #scene {
    height: 220px;
    min-height: 220px;
  }

  .window:nth-of-type(2),
  .window:nth-of-type(4) {
    display: none;
  }

  .judge-bench {
    width: 108px;
    height: 40px;
  }

  .desk-left {
    left: 2%;
  }

  .desk-right {
    right: 20%;
  }

  .desk,
  .witness-stand {
    width: 58px;
  }

  svg.pixel-char {
    width: 38px;
    height: 58px;
  }

  .character {
    bottom: 96px;
  }

  #speaker-tag {
    font-size: 8px;
    padding: 5px 8px;
  }

  #dialogue-box {
    font-size: 14px;
    min-height: 72px;
  }

  #inline-sketch-panel {
    padding: 8px;
  }

  #inline-sketch-container svg {
    max-height: 145px;
  }

  .inline-sketch-caption {
    font-size: 11px;
  }

  .bar-btn {
    flex-basis: 100%;
  }

  .phase-indicator {
    gap: 6px;
    font-size: 11px;
  }

  .phase-dot {
    width: 8px;
    height: 8px;
  }

  .question-prompt {
    font-size: 16px;
  }

  .option-copy,
  .evidence-copy,
  .reason-copy {
    font-size: 14px;
  }

  .result-stamp {
    font-size: 22px;
    border-width: 6px;
    padding: 8px 14px;
  }
}

/* ===== TATORT SCREEN ===== */
#tatort-screen {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 28px 20px 50px;
  min-height: 100vh;
}
.tatort-stars { position: absolute; inset: 0; pointer-events: none; }
.tatort-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  margin: 0 auto;
}
.tatort-card {
  border: 4px solid var(--gold);
  background: linear-gradient(180deg,rgba(22,27,40,.96),rgba(9,12,19,.96));
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 24px;
}
.tatort-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px,1.8vw,12px);
  color: var(--gold);
  line-height: 1.9;
  margin-bottom: 6px;
}
.tatort-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 760px;
}

/* V1 – Pixel-Art-Karte */
.v1-wrap {
  background: #0e1a08;
  border: 2px solid var(--line);
  overflow: hidden;
}
.v1-caption {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.8;
  color: var(--gold);
  padding: 10px 14px;
  background: rgba(0,0,0,.55);
  border-top: 1px solid var(--line);
}


.tatort-actions {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  justify-content: center;
  flex-wrap: wrap;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.category-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
}

.category-select {
  min-width: 220px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: rgba(16, 21, 34, 0.95);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
}

.category-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-shadow);
}

/* ===== CASE SELECTION GRID ===== */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .case-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .case-brief { grid-template-columns: 1fr 1fr; } }
.case-card-select {
  cursor: pointer;
  background: linear-gradient(180deg,rgba(32,40,60,.95),rgba(18,22,34,.95));
  border: 2px solid var(--line);
  padding: 16px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  text-align: left;
}
.case-card-select:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
.case-card-select.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg,rgba(40,34,8,.95),rgba(20,16,4,.95));
  box-shadow: 0 0 0 1px var(--gold-shadow);
}

.case-empty-state {
  grid-column: 1 / -1;
  padding: 18px;
  border: 2px dashed var(--line);
  background: rgba(18,22,34,.65);
  color: var(--muted);
  text-align: center;
}

/* ── Filter row ─────────────────────────────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.filter-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.filter-btn.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-shadow);
}

/* ── Played badge on case cards ─────────────────────────── */
.played-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.5;
  border: 1px solid currentColor;
}

.played-correct {
  color: #90d8aa;
}

.played-wrong {
  color: #ff9d96;
}

/* ── Shortcuts strip in bottom bar ──────────────────────── */
.shortcuts-strip {
  width: 100%;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}

/* ===== PORTFOLIO SECTION ===== */

.portfolio-section {
  margin-top: 8px;
}

.portfolio-intro {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-card {
  background: linear-gradient(180deg, rgba(32,40,60,0.97), rgba(16,19,28,0.97));
  border: 2px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.portfolio-card:hover {
  border-color: var(--accent, var(--gold));
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.portfolio-card-accent {
  height: 4px;
  background: var(--accent);
}

.portfolio-card-inner {
  padding: 18px 18px 16px;
}

.portfolio-icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--icon-bg, rgba(255,255,255,0.07));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  image-rendering: pixelated;
}

.portfolio-canvas {
  image-rendering: pixelated;
  width: 48px;
  height: 48px;
}

.portfolio-badge {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.5;
  padding: 4px 7px;
  margin-bottom: 10px;
}

.portfolio-badge.coming-soon {
  background: rgba(180,50,40,0.18);
  color: #e06050;
  border: 1px solid #b63a31;
}

.portfolio-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 4px;
}

.portfolio-ref {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 12px;
}

.portfolio-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 14px;
}

.portfolio-decision {
  margin-bottom: 12px;
}

.decision-label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--gold);
  margin-bottom: 7px;
}

.decision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.5;
  padding: 4px 7px;
  border: 1px solid;
}

.chip-green  { color: #5edb97; border-color: #2d8a5c; background: rgba(45,138,92,0.12); }
.chip-red    { color: #e07068; border-color: #b63a31; background: rgba(182,58,49,0.12); }
.chip-orange { color: #e8a05a; border-color: #c97528; background: rgba(201,117,40,0.12); }
.chip-blue   { color: #8db5ff; border-color: #3558a1; background: rgba(53,88,161,0.12); }

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ptag {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  padding: 3px 7px;
}

/* ===== FEATURED CARD (retro-pc-repair) ===== */

.portfolio-card-featured {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .portfolio-card-featured {
    grid-column: span 1;
  }
}

.portfolio-card-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.portfolio-header-text {
  flex: 1;
}

.portfolio-header-text .portfolio-title {
  margin-bottom: 2px;
}

/* ===== SCENARIO CARDS ===== */

.scenario-section {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scenario-section > .decision-label {
  margin-bottom: 2px;
}

.scenario-card {
  display: flex;
  gap: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: 12px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.scenario-card:hover {
  border-color: var(--orange);
  background: rgba(201,117,40,0.06);
}

.scenario-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.scenario-canvas {
  image-rendering: pixelated;
}

.scenario-nr {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--orange);
  line-height: 1.5;
  white-space: nowrap;
}

.scenario-body {
  flex: 1;
  min-width: 0;
}

.scenario-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 4px;
}

.scenario-complaint {
  font-size: 12px;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.5;
}

.scenario-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 6px;
}

.scenario-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pixel-btn-retro {
  background: var(--orange);
  color: var(--bg);
  border-color: var(--orange-deep);
  font-size: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
}

.pixel-btn-retro:hover {
  background: #e8a05a;
}


/* ===== RETRO-REPAIR THEME ===== */

#courtroom[data-theme="retro-repair"] .bg-wall {
  background: linear-gradient(180deg, #1e1008 0%, #160c04 70%, #120a02 100%);
}

#courtroom[data-theme="retro-repair"] .window {
  background: linear-gradient(180deg, #2a1a08 0%, #1a1004 100%);
  border-color: #3a2210;
  box-shadow: inset 2px 2px 0 rgba(255,180,80,0.1);
}

/* Regal-Bretter statt Fenster-Quersteg */
#courtroom[data-theme="retro-repair"] .window::before {
  background: #3a2210;
  height: 3px;
  top: 30%;
}

#courtroom[data-theme="retro-repair"] .window::after {
  display: none;
}

/* Tresen statt Richterbank */
#courtroom[data-theme="retro-repair"] .judge-bench {
  background: linear-gradient(180deg, #7a5228 0%, #5a3a18 100%);
  border-top: 4px solid #9a6a38;
}

/* Kundentische statt Anwaltspulte */
#courtroom[data-theme="retro-repair"] .desk-left,
#courtroom[data-theme="retro-repair"] .desk-right {
  background: linear-gradient(180deg, #5a3a18 0%, #3a2210 100%);
  border-top-color: #7a5228;
}

/* Werkzeugbrett statt Zeugenstand */
#courtroom[data-theme="retro-repair"] .witness-stand {
  background: linear-gradient(180deg, #4a2e10 0%, #2a1a08 100%);
  border-top-color: #6a4020;
}

/* Holzfußboden-Textur */
#courtroom[data-theme="retro-repair"] .floor {
  background: repeating-linear-gradient(
    90deg,
    #3a2210 0px,
    #3a2210 48px,
    #2e1a0c 48px,
    #2e1a0c 50px
  );
}

/* Neon-Schild statt Adler */
#courtroom[data-theme="retro-repair"] #eagle-canvas {
  opacity: 0.7;
  filter: hue-rotate(30deg) saturate(2);
}

/* ===== /RETRO-REPAIR THEME ===== */

/* ===== /PORTFOLIO SECTION ===== */

/* ══════════════════════════════════════════════════════════════════════════
   REPAIR SHOP GAME ENGINE
   ══════════════════════════════════════════════════════════════════════════ */

#repair-shop {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: #100804;
  color: #e8d8b0;
  font-family: 'Press Start 2P', monospace;
  overflow-y: auto;
  z-index: 50;
}

/* ── Header ── */
.rs-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #1e0e04;
  border-bottom: 3px solid #c97528;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rs-quit-btn {
  background: #2a1408;
  border: 2px solid #5a3018;
  color: #c97528;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.rs-quit-btn:hover {
  background: #c97528;
  color: #1e0e04;
}

.rs-header-center {
  flex: 1;
  min-width: 0;
}

.rs-badge-label {
  display: inline-block;
  background: #c97528;
  color: #1e0e04;
  font-size: 7px;
  padding: 3px 8px;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.rs-title {
  font-size: 11px;
  color: #ffcc66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Szene ── */
.rs-scene-wrap {
  position: relative;
  background: #100804;
  border-bottom: 3px solid #3a2010;
  overflow: hidden;
  flex-shrink: 0;
}

#rs-scene, #bg-scene {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
}

.rs-speech-bubble {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 8, 2, 0.88);
  border: 2px solid #c97528;
  padding: 10px 16px;
  max-width: 560px;
  width: calc(100% - 40px);
  box-sizing: border-box;
}

.rs-bubble-name {
  font-size: 8px;
  color: #c97528;
  margin-bottom: 4px;
}

.rs-bubble-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #e8d8b0;
}

/* ── Workspace ── */
.rs-workspace {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  flex: 1;
  min-height: 340px;
}

/* ── Aktions-Panel ── */
.rs-actions-panel {
  padding: 16px;
  border-right: 2px solid #3a2010;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-tabs {
  display: flex;
  gap: 4px;
}

.rs-tab {
  flex: 1;
  background: #2a1408;
  border: 2px solid #5a3018;
  color: #9a7040;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 10px 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  line-height: 1.5;
}

.rs-tab.active {
  background: #3a2010;
  border-color: #c97528;
  color: #ffcc66;
}

.rs-tab:not(.active):hover {
  background: #2e1808;
  border-color: #8a5020;
  color: #c89040;
}

.rs-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.rs-tab-pane.rs-hidden {
  display: none;
}

.rs-action-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e1008;
  border: 2px solid #5a3018;
  color: #e8d8b0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  line-height: 1.5;
}

.rs-action-btn:hover:not(:disabled) {
  background: #2e1808;
  border-color: #c97528;
  color: #ffcc66;
  transform: translateX(2px);
}

.rs-action-btn.rs-done {
  background: #0e0804;
  border-color: #3a2010;
  color: #5a4020;
  cursor: default;
}

.rs-action-icon {
  font-size: 14px;
  flex-shrink: 0;
  min-width: 20px;
}

/* ── Diagnose-Button ── */
.rs-diagnose-btn {
  margin-top: auto;
  background: #1e0e04;
  border: 3px solid #3a2010;
  color: #5a4020;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 14px;
  cursor: not-allowed;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rs-diagnose-btn.rs-diagnose-ready {
  background: #2a1408;
  border-color: #c97528;
  color: #ffcc66;
  cursor: pointer;
  box-shadow: 0 0 12px #c9752855, inset 0 0 8px #c9752818;
  animation: rs-pulse 1.5s ease-in-out infinite;
}

@keyframes rs-pulse {
  0%, 100% { box-shadow: 0 0 12px #c9752855; }
  50%       { box-shadow: 0 0 24px #c97528bb; }
}

.rs-diagnose-btn.rs-diagnose-ready:hover {
  background: #c97528;
  color: #1e0e04;
  box-shadow: 0 0 24px #c97528aa;
  transform: scale(1.02);
}

/* ── Hinweis-Panel ── */
.rs-clues-panel {
  background: #0e0804;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-panel-title {
  font-size: 8px;
  color: #c97528;
  border-bottom: 2px solid #3a2010;
  padding-bottom: 8px;
}

.rs-no-clues {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: #5a4020;
  line-height: 1.6;
  text-align: center;
  padding: 12px 0;
}

.rs-clue {
  background: #1e1008;
  border: 1px solid #3a2010;
  border-left: 3px solid #8a6030;
  padding: 8px 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: #c8b080;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rs-clue.rs-clue-key {
  border-left-color: #c97528;
  background: #2a1808;
  color: #ffcc66;
  box-shadow: 0 0 8px #c9752822;
}

.rs-key-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  background: #c97528;
  color: #1e0e04;
  padding: 2px 5px;
  display: inline-block;
  margin-bottom: 2px;
  width: fit-content;
}

/* ── Overlays ── */
.rs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 3, 1, 0.88);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

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

.rs-overlay-card {
  background: #1e1008;
  border: 3px solid #c97528;
  padding: 28px 24px;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 40px #c9752844;
}

.rs-overlay-title {
  font-size: 11px;
  color: #c97528;
  border-bottom: 2px solid #3a2010;
  padding-bottom: 10px;
}

.rs-overlay-hint {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: #a08050;
  margin: 0;
  line-height: 1.5;
}

.rs-overlay-speaker {
  font-size: 9px;
  color: #c97528;
}

.rs-overlay-bubble {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: #e8d8b0;
  line-height: 1.6;
  background: #120a04;
  border: 1px solid #3a2010;
  padding: 14px 16px;
}

.rs-clue-found-key {
  background: #3a2008;
  border: 2px solid #c97528;
  padding: 12px 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: #ffcc66;
  line-height: 1.6;
  box-shadow: 0 0 12px #c9752833;
}

.rs-clue-found-normal {
  background: #1a1008;
  border: 1px solid #5a3018;
  padding: 10px 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: #c8b080;
  line-height: 1.5;
}

.rs-clue-unlock-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #c97528;
}

/* ── Diagnose-Optionen ── */
.rs-diagnose-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-diagnose-option {
  background: #120a04;
  border: 2px solid #3a2010;
  color: #c8b080;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  transition: all 0.15s;
}

.rs-diagnose-option:hover {
  border-color: #8a5020;
  background: #1e1008;
  color: #e8d8b0;
}

.rs-diagnose-option.selected {
  border-color: #c97528;
  background: #2a1808;
  color: #ffcc66;
  box-shadow: 0 0 8px #c9752833;
}

/* ── Moral-Optionen ── */
.rs-moral-question {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #e8d8b0;
  line-height: 1.6;
  background: #120a04;
  border: 1px solid #3a2010;
  padding: 12px 14px;
}

.rs-moral-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-moral-option {
  background: #120a04;
  border: 2px solid #3a2010;
  cursor: pointer;
  text-align: left;
  padding: 14px 16px;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-moral-option:hover {
  border-color: #8a5020;
  background: #1a1008;
}

.rs-moral-option.selected {
  border-color: #c97528;
  background: #2a1808;
  box-shadow: 0 0 10px #c9752833;
}

.rs-moral-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: #e8d8b0;
  line-height: 1.5;
}

.rs-moral-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rs-dm {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #c8a050;
}

.rs-rep {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
}
.rs-rep.pos { color: #66cc66; }
.rs-rep.neg { color: #e04040; }
.rs-rep.neu { color: #999; }

/* ── Overlay Footer ── */
.rs-overlay-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Ergebnis ── */
.rs-result-card {
  text-align: center;
}

.rs-result-stamp {
  font-size: 14px;
  border: 4px solid #c97528;
  display: inline-block;
  padding: 10px 24px;
  letter-spacing: 2px;
  transform: rotate(-3deg);
  color: #c97528;
  margin-bottom: 8px;
  box-shadow: 0 0 16px #c9752844;
}

.rs-result-title {
  font-size: 11px;
  color: #ffcc66;
  margin-bottom: 4px;
}

.rs-result-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #e8d8b0;
  line-height: 1.6;
  background: #120a04;
  border: 1px solid #3a2010;
  padding: 14px 16px;
  text-align: left;
}

.rs-result-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.rs-result-rep,
.rs-result-dm,
.rs-result-wrong {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 6px 12px;
  background: #0e0804;
  border: 1px solid #3a2010;
}

.rs-result-rep.pos { color: #66cc66; border-color: #336633; }
.rs-result-rep.neg { color: #e04040; border-color: #662222; }
.rs-result-rep.neu { color: #999; }

.rs-result-dm  { color: #c8a050; }
.rs-result-wrong { color: #8888aa; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .rs-workspace {
    grid-template-columns: 1fr;
  }
  .rs-clues-panel {
    border-top: 2px solid #3a2010;
  }
  .rs-title {
    font-size: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════ */

.shortcut-key {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--gold);
  vertical-align: middle;
  margin-right: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   DER GRENZPOSTEN  — Spezifische Stile
   Nutzt das rs-* Grundgerüst aus dem Repair-Shop, ergänzt grenzposten-spezifische
   Klassen mit einem blau-grauen Farbschema.
   ══════════════════════════════════════════════════════════════════════════ */

/* Layout-Anpassungen für das Grenzposten-Layout */
#border-game {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg-deep);
}

.bg-workspace {
  gap: 14px;
}

.bg-docs-panel {
  flex: 1.2;
}

.bg-req-panel {
  flex: 1;
}

/* Sprechblase leicht anders positioniert (Reisender ist links) */
.bg-speech-bubble {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  max-width: 480px;
  width: calc(100% - 40px);
}

/* ── Dokument-Karten ──────────────────────────────────────────────────────── */
.bg-docs-hint {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.bg-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bg-doc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid #3e6fd4;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
}

.bg-doc-card:hover {
  background: var(--panel-3);
  border-color: #5588ff;
}

.bg-doc-card.bg-doc-examined {
  border-left-color: #444;
  opacity: 0.8;
}

.bg-doc-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.bg-doc-name {
  font-size: 11px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  flex: 1;
  color: var(--ink);
}

.bg-doc-status {
  font-size: 14px;
  flex-shrink: 0;
}

.bg-doc-ok      { color: #4caf50; }
.bg-doc-issue   { color: #e05540; }
.bg-doc-unknown { color: #666; font-size: 18px; line-height: 1; }

.bg-doc-badge {
  font-size: 7px;
  font-family: 'Press Start 2P', monospace;
  background: #2a3a4a;
  color: var(--muted);
  padding: 2px 5px;
  border: 1px solid var(--line);
  margin-left: 4px;
}

/* ── Anforderungsliste ────────────────────────────────────────────────────── */
.bg-requirements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bg-req-item {
  padding: 8px 12px;
  border-left: 3px solid;
  background: var(--panel-2);
  font-size: 11px;
}

.bg-req-met     { border-color: #4caf50; }
.bg-req-fail    { border-color: #e05540; }
.bg-req-unknown { border-color: #444; opacity: 0.6; }

.bg-req-icon {
  font-size: 14px;
  margin-right: 6px;
}

.bg-req-met     .bg-req-icon { color: #4caf50; }
.bg-req-fail    .bg-req-icon { color: #e05540; }
.bg-req-unknown .bg-req-icon { color: #666; }

.bg-req-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  color: var(--ink);
}

.bg-req-issue {
  margin-top: 5px;
  font-size: 10px;
  color: #ff8866;
  line-height: 1.4;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ── Urteilszeile ─────────────────────────────────────────────────────────── */
.bg-verdict-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: #0d1018;
  border-top: 2px solid #3e6fd4;
  align-items: center;
  justify-content: center;
}

.bg-verdict-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 12px 18px;
  border: 2px solid;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
  min-width: 160px;
}

.bg-verdict-btn.selected {
  filter: brightness(1.3);
  outline: 2px solid #ffffff55;
  outline-offset: 2px;
}

.bg-verdict-einreise {
  background: #1e4d2a;
  border-color: #2d8a5c;
  color: #7effc4;
}
.bg-verdict-einreise:hover   { background: #2d7040; }

.bg-verdict-zurueck {
  background: #3a2800;
  border-color: #c97528;
  color: #ffcc66;
}
.bg-verdict-zurueck:hover    { background: #553800; }

.bg-verdict-verhaften {
  background: #3a1010;
  border-color: #b63a31;
  color: #ff9988;
}
.bg-verdict-verhaften:hover  { background: #551818; }

.bg-verdict-confirm-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 12px 20px;
  background: #1a1a3a;
  border: 2px solid #3e6fd4;
  color: #aaccff;
  cursor: pointer;
  transition: background 0.12s;
}
.bg-verdict-confirm-btn:hover:not(:disabled) {
  background: #2a2a5a;
}
.bg-verdict-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Dokument-Detail-Overlay ─────────────────────────────────────────────── */
.bg-doc-overlay-card {
  max-width: 600px;
}

.bg-doc-issuer {
  font-size: 9px;
  color: var(--muted);
  font-weight: normal;
}

.bg-overlay-status {
  display: inline-block;
  margin: 8px 0 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 4px 10px;
}

.bg-overlay-status-ok {
  background: #1e4d2a;
  color: #7effc4;
  border: 1px solid #2d8a5c;
}

.bg-overlay-status-issue {
  background: #3a1010;
  color: #ff9988;
  border: 1px solid #b63a31;
}

.bg-fields-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
}

.bg-fields-table tr {
  border-bottom: 1px solid var(--line);
}

.bg-fields-table tr:last-child {
  border-bottom: none;
}

.bg-field-label {
  color: var(--muted);
  padding: 6px 10px 6px 0;
  white-space: nowrap;
  width: 38%;
  vertical-align: top;
}

.bg-field-value {
  color: var(--ink);
  padding: 6px 0;
  line-height: 1.4;
}

.bg-field-warn .bg-field-value {
  color: #ff9966;
  font-weight: 600;
}

.bg-doc-note {
  background: #2a0a0a;
  border: 1px solid #b63a31;
  border-left: 4px solid #b63a31;
  color: #ff9988;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  padding: 10px 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ── Falsches-Urteil-Overlay ─────────────────────────────────────────────── */
.bg-wrong-attempts {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #ff8866;
  margin-top: 10px;
}

/* ── Moralische Entscheidung (nutzt rs-moral-* Stile, leicht überschrieben) ─ */
/* bg-moral-text: Angezeigte Optionstext-Zeile (analog rs-moral-text) */
.bg-moral-text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 4px;
}

#bg-moral-list .bg-moral-rep {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  margin-top: 6px;
}

#bg-moral-list .bg-moral-rep.pos { color: #4caf50; }
#bg-moral-list .bg-moral-rep.neg { color: #e05540; }
#bg-moral-list .bg-moral-rep.neu { color: var(--muted); }

/* Wiederverwendung der rs-moral-option Klasse mit Grenzposten-Akzentfarbe */
#border-game .rs-moral-option {
  border-left-color: #3e6fd4;
}
#border-game .rs-moral-option.selected {
  border-color: #3e6fd4;
  background: rgba(62,111,212,0.12);
}

/* ── Ergebnis-Overlay (nutzt rs-result-* Stile) ───────────────────────────── */
#bg-result-rep.pos   { color: #4caf50; font-family: 'Press Start 2P', monospace; font-size: 11px; }
#bg-result-rep.neg   { color: #e05540; font-family: 'Press Start 2P', monospace; font-size: 11px; }
#bg-result-rep.neu   { color: var(--muted); font-family: 'Press Start 2P', monospace; font-size: 11px; }
#bg-result-wrong     { font-size: 10px; color: var(--muted); margin-top: 6px; }


/* ══════════════════════════════════════════════════════════════════════════════
   DER CYBER-DETEKTIV  —  Vollständiges Stylesheet
   Farb-Palette: near-black (#080c10), neon-green (#00ff41), cyan (#00b4d8),
                 dark-purple (#1a0a2e), warning-red (#e05050)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Basis ────────────────────────────────────────────────────────────────── */
#cyber-game {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 50;
  background: #080c10;
  color: #c8d8e8;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.cg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #0a0e14;
  border-bottom: 2px solid #00b4d8;
  flex-shrink: 0;
}
.cg-quit-btn {
  background: #0d1820;
  color: #00b4d8;
  border: 1px solid #00b4d8;
  padding: 6px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.cg-quit-btn:hover { background: #1a2a3a; }
.cg-header-center { flex: 1; text-align: center; }
.cg-badge {
  display: inline-block;
  background: #00b4d8;
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 2px 8px;
  margin-bottom: 4px;
}
.cg-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #00ff41;
  text-shadow: 0 0 8px #00ff41;
}
.cg-drive {
  font-size: 9px;
  color: #556677;
  text-align: right;
  max-width: 220px;
}

/* ── Pixel-Art Szene ──────────────────────────────────────────────────────── */
.cg-scene-wrap {
  position: relative;
  flex-shrink: 0;
  background: #080c10;
  border-bottom: 1px solid #1a2a3a;
}
.cg-scene-wrap canvas { display: block; width: 100%; height: auto; }
.cg-intro-bubble {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,12,16,0.92);
  border: 1px solid #00b4d8;
  border-radius: 4px;
  padding: 10px 16px;
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 0 16px rgba(0,180,216,0.2);
}
.cg-bubble-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #00b4d8;
  margin-bottom: 4px;
}
.cg-bubble-text { font-size: 11px; color: #a0b8c8; line-height: 1.5; }

/* ── Verdächtigen-Karte ───────────────────────────────────────────────────── */
.cg-suspect-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  background: #0a1018;
  border-bottom: 1px solid #1a2a3a;
}
.cg-suspect-info { flex: 1; }
.cg-suspect-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #e8e0d0;
  margin-bottom: 4px;
}
.cg-suspect-age { font-size: 10px; color: #778899; margin-bottom: 2px; }
.cg-suspect-charge {
  font-size: 10px;
  color: #e05050;
  font-weight: bold;
  margin-bottom: 6px;
}
.cg-case-context { font-size: 10px; color: #8899aa; line-height: 1.5; }

/* ── Hauptarbeitsbereich ──────────────────────────────────────────────────── */
.cg-workspace {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 0;
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) {
  .cg-workspace { grid-template-columns: 1fr; }
}

/* ── Panel-Basisstile ─────────────────────────────────────────────────────── */
.cg-left-panel,
.cg-center-panel,
.cg-right-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1a2a3a;
  overflow: hidden;
}
.cg-right-panel { border-right: none; }
.cg-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #0d1520;
  border-bottom: 1px solid #1a2a3a;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #00b4d8;
  flex-shrink: 0;
}
.cg-drive-tag { font-size: 6px; color: #445566; }

/* ── Dateibaum ────────────────────────────────────────────────────────────── */
.cg-file-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  background: #080e14;
}
.cg-file-tree::-webkit-scrollbar { width: 4px; }
.cg-file-tree::-webkit-scrollbar-track { background: #060a0e; }
.cg-file-tree::-webkit-scrollbar-thumb { background: #1a2a3a; }

.cg-folder-wrapper { margin-bottom: 2px; }
.cg-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 11px;
  color: #8899aa;
  user-select: none;
  transition: background 0.1s;
}
.cg-folder-header:hover { background: #0d1824; }
.cg-folder-header.cg-folder-open { color: #00b4d8; }
.cg-folder-icon { font-size: 14px; }
.cg-folder-name { flex: 1; font-weight: bold; }
.cg-folder-count { font-size: 9px; color: #445566; }

.cg-folder-children { border-left: 1px solid #1a2a3a; margin-left: 20px; }

.cg-file-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 10px;
  color: #8899aa;
  user-select: none;
  transition: background 0.1s;
  border-bottom: 1px solid #0d1218;
}
.cg-file-node:hover { background: #0d1824; color: #c8d8e8; }
.cg-file-node.cg-file-seen { color: #556677; }
.cg-file-node.cg-file-active { background: #0d1a2a; color: #00b4d8; border-left: 2px solid #00b4d8; }
.cg-file-node.cg-file-secured { color: #00ff41; }
.cg-file-icon { font-size: 14px; flex-shrink: 0; }
.cg-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-file-badge {
  font-size: 7px;
  background: #003322;
  color: #00ff41;
  border: 1px solid #00ff41;
  padding: 1px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cg-badge-seen {
  background: #1a2020;
  color: #445566;
  border-color: #223344;
}

/* ── Privacy-Meter ────────────────────────────────────────────────────────── */
.cg-privacy-meter {
  padding: 10px 12px;
  background: #080e14;
  border-top: 1px solid #1a2a3a;
  flex-shrink: 0;
}
.cg-privacy-label {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #778899;
  margin-bottom: 5px;
}
.cg-privacy-score { font-weight: bold; }
.cg-privacy-over { color: #e05050 !important; text-shadow: 0 0 4px #e05050; }
.cg-privacy-track {
  position: relative;
  height: 10px;
  background: #0d1824;
  border: 1px solid #1a2a3a;
  border-radius: 2px;
  overflow: visible;
}
.cg-privacy-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px currentColor;
}
.cg-privacy-threshold-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #e05050;
  box-shadow: 0 0 4px #e05050;
}
.cg-privacy-alert {
  margin-top: 5px;
  font-size: 8px;
  color: #e05050;
  text-shadow: 0 0 4px #e05050;
}

/* ── File Viewer ──────────────────────────────────────────────────────────── */
.cg-file-viewer {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #060c12;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cg-viewer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #223344;
  text-align: center;
  gap: 8px;
}
.cg-viewer-empty-icon { font-size: 40px; opacity: 0.4; }
.cg-viewer-empty-text { font-family: 'Press Start 2P', monospace; font-size: 9px; }
.cg-viewer-empty-sub { font-size: 10px; }

.cg-viewer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a2a3a;
}
.cg-viewer-icon { font-size: 20px; }
.cg-viewer-path { flex: 1; font-size: 10px; color: #778899; font-family: monospace; }
.cg-relevance-badge {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.cg-rel-evidence { background: #003322; color: #00ff41; border: 1px solid #00ff41; }
.cg-rel-private   { background: #2a1020; color: #cc4488; border: 1px solid #cc4488; }
.cg-rel-ambiguous { background: #2a2000; color: #f0a030; border: 1px solid #f0a030; }

.cg-privacy-warning {
  background: #2a1020;
  border: 1px solid #cc4488;
  border-left: 3px solid #cc4488;
  color: #cc4488;
  padding: 6px 10px;
  font-size: 9px;
}
.cg-privacy-mild {
  background: #2a2008;
  border-color: #f0a030;
  color: #f0a030;
}

/* ── Terminal Box ─────────────────────────────────────────────────────────── */
.cg-terminal-box {
  background: #040810;
  border: 1px solid #1a2a3a;
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
}
.cg-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #0a1018;
  border-bottom: 1px solid #1a2a3a;
}
.cg-terminal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cg-dot-red    { background: #e05050; }
.cg-dot-yellow { background: #f0a030; }
.cg-dot-green  { background: #00ff41; box-shadow: 0 0 4px #00ff41; }
.cg-terminal-title { font-size: 8px; color: #445566; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-preview-content {
  padding: 12px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #00ff41;
  min-height: 80px;
}
.cg-preview-line { color: #a0c8a0; }
.cg-preview-line:first-child { color: #00b4d8; font-weight: bold; }
.cg-cursor-blink {
  color: #00ff41;
  animation: cgBlink 1s step-end infinite;
  display: inline;
}
@keyframes cgBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Viewer Actions ───────────────────────────────────────────────────────── */
.cg-viewer-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #1a2a3a;
  flex-shrink: 0;
}
.cg-btn {
  padding: 8px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.05s;
}
.cg-btn:active { transform: translateY(1px); }
.cg-btn:disabled { opacity: 0.4; cursor: default; }
.cg-btn-secure {
  background: #003322;
  color: #00ff41;
  border: 1px solid #00ff41;
  box-shadow: 0 0 8px rgba(0,255,65,0.2);
}
.cg-btn-secure:hover { background: #005533; }
.cg-btn-private {
  background: #2a1020;
  color: #cc4488;
  border: 1px solid #cc4488;
}
.cg-btn-private:hover { background: #3a1830; }
.cg-btn-secured {
  background: #001a11;
  color: #446644;
  border: 1px solid #2a4a2a;
}
.cg-btn-close {
  background: #1a1a2e;
  color: #778899;
  border: 1px solid #2a3a4a;
}
.cg-btn-close:hover { background: #252538; color: #aabbcc; }

/* ── Beweis-Tasche ────────────────────────────────────────────────────────── */
.cg-evidence-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: #060c12;
}
.cg-evidence-empty {
  color: #334455;
  font-size: 9px;
  text-align: center;
  padding: 20px 8px;
  line-height: 1.7;
}
.cg-evidence-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #0a1424;
  border: 1px solid #1a2a3a;
  border-left: 3px solid #1a2a3a;
  font-size: 9px;
  color: #8899aa;
}
.cg-evidence-item.cg-evidence-key {
  border-left-color: #00ff41;
  background: #0a1a14;
  color: #a0c8a0;
}
.cg-evidence-icon { font-size: 14px; flex-shrink: 0; }
.cg-evidence-text { flex: 1; line-height: 1.4; }
.cg-key-badge {
  font-size: 7px;
  background: #003322;
  color: #00ff41;
  border: 1px solid #00ff41;
  padding: 1px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Anklage-Button ───────────────────────────────────────────────────────── */
.cg-verdict-btn {
  margin: 10px;
  padding: 12px 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  text-align: center;
  border-radius: 2px;
  transition: all 0.2s;
}
.cg-btn-locked {
  background: #0d1218;
  color: #334455;
  border: 1px solid #1a2a3a;
  cursor: not-allowed;
}
.cg-btn-unlocked {
  background: #003322;
  color: #00ff41;
  border: 1px solid #00ff41;
  box-shadow: 0 0 12px rgba(0,255,65,0.3);
  cursor: pointer;
  animation: cgPulse 2s ease-in-out infinite;
}
.cg-btn-unlocked:hover { background: #005533; box-shadow: 0 0 20px rgba(0,255,65,0.5); }
@keyframes cgPulse {
  0%,100% { box-shadow: 0 0 8px rgba(0,255,65,0.3); }
  50%     { box-shadow: 0 0 20px rgba(0,255,65,0.6); }
}

/* ── Overlays ─────────────────────────────────────────────────────────────── */
.cg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,8,12,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}
.cg-overlay-card {
  background: #0a1018;
  border: 1px solid #00b4d8;
  box-shadow: 0 0 40px rgba(0,180,216,0.25);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cg-result-card {
  border-color: #00ff41;
  box-shadow: 0 0 40px rgba(0,255,65,0.2);
}
.cg-overlay-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #00b4d8;
  text-align: center;
  text-shadow: 0 0 8px #00b4d8;
  margin-bottom: 4px;
}
.cg-overlay-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 8px;
  border-top: 1px solid #1a2a3a;
}
.cg-btn-confirm {
  background: #003322;
  color: #00ff41;
  border: 1px solid #00ff41;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  cursor: pointer;
}
.cg-btn-confirm:hover:not(:disabled) { background: #005533; }
.cg-btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.cg-btn-back {
  background: #1a1a2e;
  color: #778899;
  border: 1px solid #2a3a4a;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  cursor: pointer;
}
.cg-btn-back:hover { background: #252538; }

/* ── Urteil-Overlay ───────────────────────────────────────────────────────── */
.cg-verdict-summary {
  background: #060c12;
  border: 1px solid #1a2a3a;
  padding: 12px;
  font-size: 10px;
}
.cg-vsummary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #0d1824;
  color: #778899;
}
.cg-vsummary-row:last-child { border-bottom: none; }
.cg-vsummary-warn { color: #e05050 !important; }
.cg-verdict-list { display: flex; flex-direction: column; gap: 8px; }
.cg-verdict-option {
  padding: 12px 16px;
  background: #0d1824;
  border: 1px solid #1a2a3a;
  border-left: 3px solid #1a2a3a;
  cursor: pointer;
  transition: all 0.15s;
}
.cg-verdict-option:hover { background: #1a2a3a; border-left-color: #00b4d8; }
.cg-verdict-option.cg-verdict-selected {
  background: #0a1a2a;
  border-color: #00b4d8;
  border-left-color: #00b4d8;
  box-shadow: 0 0 8px rgba(0,180,216,0.2);
}
.cg-verdict-label { font-size: 11px; color: #c8d8e8; }

/* ── Urteil-Feedback ──────────────────────────────────────────────────────── */
.cg-vf-stamp {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  text-align: center;
  padding: 12px;
  border: 3px solid;
  margin: 0 auto;
  max-width: 360px;
}
.cg-vf-text {
  font-size: 11px;
  color: #8899aa;
  line-height: 1.6;
  text-align: center;
}

/* ── Moral-Overlay ────────────────────────────────────────────────────────── */
.cg-moral-question {
  font-size: 11px;
  color: #a0c0d0;
  line-height: 1.6;
  background: #060c12;
  border: 1px solid #1a2a3a;
  border-left: 3px solid #00b4d8;
  padding: 10px 14px;
}
.cg-moral-list { display: flex; flex-direction: column; gap: 8px; }
.cg-moral-option {
  padding: 12px 14px;
  background: #0d1824;
  border: 1px solid #1a2a3a;
  cursor: pointer;
  transition: all 0.15s;
}
.cg-moral-option:hover { background: #1a2a3a; }
.cg-moral-option.cg-moral-selected {
  background: #0a1a2a;
  border-color: #00b4d8;
}
.cg-moral-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cg-moral-label { font-size: 10px; font-weight: bold; color: #c8d8e8; }
.cg-moral-rep { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #f0a030; }
.cg-moral-text { font-size: 10px; color: #778899; line-height: 1.5; }

/* ── Ergebnis-Overlay ─────────────────────────────────────────────────────── */
.cg-result-stamp {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  text-align: center;
  padding: 14px;
  border: 3px solid;
  margin: 0 auto;
  max-width: 380px;
  letter-spacing: 2px;
}
.cg-result-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #c8d8e8;
  text-align: center;
}
.cg-result-text {
  font-size: 11px;
  color: #8899aa;
  line-height: 1.6;
  text-align: center;
}
.cg-result-moral {
  background: #0d1824;
  border: 1px solid #1a2a3a;
  border-left: 3px solid #00b4d8;
  padding: 12px;
}
.cg-result-block-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #00b4d8;
  margin-bottom: 8px;
}
.cg-result-moral-label { font-size: 10px; font-weight: bold; color: #c8d8e8; margin-bottom: 4px; }
.cg-result-moral-outcome { font-size: 10px; color: #778899; line-height: 1.5; }
.cg-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cg-stat {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: #060c12;
  border: 1px solid #1a2a3a;
  font-size: 9px;
  color: #778899;
}
.cg-stat-warn { border-color: #e05050; color: #e05050; }

/* ── Scrollbar global für cyber-game ─────────────────────────────────────── */
#cyber-game ::-webkit-scrollbar { width: 4px; height: 4px; }
#cyber-game ::-webkit-scrollbar-track { background: #060c12; }
#cyber-game ::-webkit-scrollbar-thumb { background: #1a2a3a; border-radius: 2px; }
#cyber-game ::-webkit-scrollbar-thumb:hover { background: #2a3a4a; }

/* ══════════════════════════════════════════════════════════════════════════
   DER MUSEUMS-KURATOR GAME
   ══════════════════════════════════════════════════════════════════════════ */

#museum-game {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: #12081e;
  color: #f0e8d0;
  font-family: 'Press Start 2P', monospace;
  overflow-y: auto;
  z-index: 50;
}

.mg-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #1a0d2a;
  border-bottom: 3px solid #9455c8;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mg-quit-btn {
  background: #1a0d2a;
  border: 2px solid #4a2068;
  color: #9455c8;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.mg-quit-btn:hover { background: #9455c8; color: #12081e; }

.mg-header-center { flex: 1; min-width: 0; }

.mg-badge-label {
  display: inline-block;
  background: #9455c8;
  color: #12081e;
  font-size: 7px;
  padding: 3px 8px;
  margin-bottom: 4px;
}

.mg-title { font-size: 11px; color: #ffd700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mg-scene-wrap {
  position: relative;
  background: #12081e;
  border-bottom: 3px solid #2a1040;
  flex-shrink: 0;
}

#mg-scene { display: block; width: 100%; max-width: 700px; height: auto; margin: 0 auto; }

.mg-intro-bubble {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 8, 30, 0.9);
  border: 2px solid #9455c8;
  padding: 10px 16px;
  max-width: 560px;
  width: calc(100% - 40px);
  box-sizing: border-box;
}
.mg-bubble-name { font-size: 8px; color: #9455c8; margin-bottom: 4px; }
.mg-bubble-text { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #f0e8d0; }

.mg-artwork-panel {
  background: #1a0d2a;
  border-bottom: 2px solid #2a1040;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.mg-artwork-name { font-size: 11px; color: #ffd700; width: 100%; }
.mg-artwork-meta { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; color: #c8b8e0; }
.mg-donor-block { width: 100%; margin-top: 4px; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; color: #c8b8e0; }
.mg-donor-label { font-size: 7px; color: #9455c8; margin-right: 4px; }
.mg-donor-role { font-size: 9px; color: #c8b8e0; margin-left: 4px; }
.mg-donor-desc { font-size: 11px; color: #a090b8; margin-top: 2px; }

.mg-workspace {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  min-height: 280px;
}

.mg-tools-panel {
  padding: 16px;
  border-right: 2px solid #2a1040;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mg-clues-panel {
  background: #0e0818;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mg-panel-title { font-size: 8px; color: #9455c8; border-bottom: 2px solid #2a1040; padding-bottom: 8px; }

.mg-tools-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.mg-tool-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a0d2a;
  border: 2px solid #4a2068;
  color: #f0e8d0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  line-height: 1.5;
}
.mg-tool-btn:hover:not(:disabled) { background: #2a1040; border-color: #9455c8; color: #ffd700; transform: translateX(2px); }
.mg-tool-btn.mg-used { background: #0e0818; border-color: #2a1040; color: #4a3060; cursor: default; }
.mg-tool-icon { font-size: 18px; flex-shrink: 0; min-width: 24px; }

.mg-verdict-btn {
  margin-top: auto;
  background: #0e0818;
  border: 3px solid #2a1040;
  color: #4a3060;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 14px;
  cursor: not-allowed;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mg-verdict-btn.mg-ready {
  background: #1a0d2a;
  border-color: #9455c8;
  color: #ffd700;
  cursor: pointer;
  box-shadow: 0 0 14px #9455c855;
  animation: mg-pulse 1.5s ease-in-out infinite;
}
@keyframes mg-pulse {
  0%, 100% { box-shadow: 0 0 14px #9455c855; }
  50%       { box-shadow: 0 0 28px #9455c8aa; }
}
.mg-verdict-btn.mg-ready:hover { background: #9455c8; color: #12081e; }

.mg-no-clues { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; color: #4a3060; line-height: 1.6; text-align: center; padding: 12px 0; }

.mg-clue {
  background: #1a0d2a;
  border: 1px solid #2a1040;
  border-left: 3px solid #6a3088;
  padding: 8px 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: #c8b8e0;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mg-clue.mg-clue-key { border-left-color: #ffd700; background: #221030; color: #ffd700; box-shadow: 0 0 8px #ffd70022; }
.mg-key-badge { font-family: 'Press Start 2P', monospace; font-size: 6px; background: #ffd700; color: #12081e; padding: 2px 5px; display: inline-block; margin-bottom: 2px; width: fit-content; }

/* Overlays */
.mg-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 15, 0.9);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.mg-overlay.active { display: flex; }

.mg-overlay-card {
  background: #1a0d2a;
  border: 3px solid #9455c8;
  padding: 28px 24px;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 40px #9455c844;
}

.mg-overlay-title { font-size: 11px; color: #9455c8; border-bottom: 2px solid #2a1040; padding-bottom: 10px; }
.mg-overlay-hint { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: #8070a0; margin: 0; line-height: 1.5; }
.mg-overlay-footer { display: flex; gap: 10px; flex-wrap: wrap; }

.mg-finding-header { display: flex; align-items: center; gap: 12px; }
.mg-finding-tool-name { font-size: 10px; color: #9455c8; }
.mg-finding-text { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: #f0e8d0; line-height: 1.6; background: #0e0818; border: 1px solid #2a1040; padding: 14px 16px; }

.mg-clue-found-key { background: #2a1040; border: 2px solid #ffd700; padding: 12px 14px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: #ffd700; line-height: 1.6; }
.mg-clue-found-normal { background: #1a0d2a; border: 1px solid #4a2068; padding: 10px 12px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: #c8b8e0; }

.mg-verdict-list { display: flex; flex-direction: column; gap: 8px; }
.mg-verdict-option {
  background: #0e0818;
  border: 2px solid #2a1040;
  color: #c8b8e0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  transition: all 0.15s;
}
.mg-verdict-option:hover { border-color: #6a3088; background: #1a0d2a; color: #f0e8d0; }
.mg-verdict-option.selected { border-color: #9455c8; background: #221030; color: #ffd700; }

.mg-moral-question { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: #f0e8d0; line-height: 1.6; background: #0e0818; border: 1px solid #2a1040; padding: 12px 14px; }
.mg-moral-list { display: flex; flex-direction: column; gap: 8px; }
.mg-moral-option {
  background: #0e0818;
  border: 2px solid #2a1040;
  cursor: pointer;
  text-align: left;
  padding: 14px 16px;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-moral-option:hover { border-color: #6a3088; background: #1a0d2a; }
.mg-moral-option.selected { border-color: #9455c8; background: #221030; }
.mg-moral-text { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: #f0e8d0; line-height: 1.5; }
.mg-moral-meta { display: flex; gap: 12px; }
.mg-moral-rep { font-family: 'Press Start 2P', monospace; font-size: 7px; }
.mg-moral-rep.pos { color: #66cc66; }
.mg-moral-rep.neg { color: #e04040; }
.mg-moral-rep.neu { color: #999; }

.mg-result-card { text-align: center; }
.mg-result-stamp {
  font-size: 13px;
  border: 4px solid #9455c8;
  display: inline-block;
  padding: 10px 24px;
  letter-spacing: 2px;
  transform: rotate(-3deg);
  color: #9455c8;
  margin-bottom: 8px;
}
.mg-result-title { font-size: 11px; color: #ffd700; margin-bottom: 4px; }
.mg-result-text { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: #f0e8d0; line-height: 1.6; background: #0e0818; border: 1px solid #2a1040; padding: 14px 16px; text-align: left; }
.mg-result-stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mg-result-rep, .mg-result-wrong { font-family: 'Press Start 2P', monospace; font-size: 8px; padding: 6px 12px; background: #0e0818; border: 1px solid #2a1040; }
.mg-result-rep.pos { color: #66cc66; border-color: #336633; }
.mg-result-rep.neg { color: #e04040; border-color: #662222; }
.mg-result-rep.neu { color: #999; }
.mg-result-wrong { color: #8888aa; }

@media (max-width: 700px) {
  .mg-workspace { grid-template-columns: 1fr; }
  .mg-clues-panel { border-top: 2px solid #2a1040; }
}


/* ===== PROGRESSION SYSTEM ===== */
#case-progression-slot {
  width: 100%;
  margin-bottom: 4px;
}
.case-progression-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  margin-bottom: 10px;
  background: rgba(212,160,23,0.06);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: 4px;
}
.case-progress-info {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.prog-done { color: #90d8aa; }
.prog-total { color: var(--ink); }
.prog-label { color: var(--ink); font-size: 8px; }

.case-toggle-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 5px 9px;
  background: #1a1a2a;
  border: 2px solid #444;
  border-bottom: 3px solid #222;
  color: #aaa;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.case-toggle-btn:hover {
  background: #2a2a3a;
  color: #ccc;
  border-color: #666;
}
.case-toggle-btn.active {
  background: rgba(212,160,23,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.case-card-select.case-done {
  border-color: rgba(144,216,170,0.35);
  background: rgba(144,216,170,0.04);
}
.case-card-select.case-done .case-name {
  color: #90d8aa;
}
.case-card-select.case-locked {
  opacity: 0.45;
  border-color: rgba(100,100,120,0.3);
  background: rgba(20,20,30,0.5);
  pointer-events: none;
}
.case-card-select.case-locked .case-name {
  color: #666;
}
.case-locked-msg {
  color: #555 !important;
  font-style: italic;
  font-size: 11px;
}

/* ===== COLLAPSIBLE PORTFOLIO CARDS ===== */
.portfolio-card-header--toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.15s;
}
.portfolio-card-header--toggle:hover {
  opacity: 0.85;
}
.portfolio-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.15s;
  flex-shrink: 0;
}
.portfolio-card-inner:not(.portfolio-collapsed) .portfolio-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}
.portfolio-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 1200px;
  opacity: 1;
}
.portfolio-collapsed .portfolio-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEWPORT-SKALIERUNG — SUB-GAMES
   JS setzt --sg-scale = min(1, innerWidth / 640).
   Unterhalb der Design-Breite (640 px) skaliert das gesamte Sub-Game-UI
   proportional herunter, damit das Pixel-Art-Layout auf schmalen Viewports
   erhalten bleibt statt zu überlaufen.
   ═══════════════════════════════════════════════════════════════════════════ */
#repair-shop,
#border-game,
#museum-game,
#cyber-game {
  transform-origin: top left;
  transform: scale(var(--sg-scale, 1));
  /* Logische Abmessungen kompensieren, damit nach der Skalierung der gesamte
     Viewport visuell ausgefüllt wird. */
  width: calc(100vw / var(--sg-scale, 1));
  height: calc(100vh / var(--sg-scale, 1));
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN – Fallreihenfolge-Editor
   ═══════════════════════════════════════════════════════════════════════════ */

/* Trigger-Button auf dem Titelscreen */
.title-admin-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.admin-trigger-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 6px 12px;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.admin-trigger-btn:hover {
  opacity: 1;
  color: var(--gold);
}

/* Overlay */
#admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 16, 0.82);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-panel {
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 4px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(212, 160, 23, 0.18);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 2px solid var(--line);
  background: var(--panel-2);
  flex-shrink: 0;
}

.admin-header-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.admin-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.admin-close-btn:hover {
  color: var(--ink);
  background: var(--panel-3);
}

.admin-hint {
  font-size: 11px;
  color: var(--muted);
  padding: 12px 18px 8px;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Liste */
.admin-case-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 6px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.admin-case-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  margin-bottom: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: grab;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.admin-case-item:hover {
  background: var(--panel-3);
  border-color: var(--gold);
}
.admin-case-item.admin-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.admin-case-item.admin-drag-over {
  border-color: var(--gold);
  background: rgba(212, 160, 23, 0.1);
  transform: translateY(-1px);
}

.admin-handle {
  font-size: 14px;
  color: var(--muted);
  cursor: grab;
  flex-shrink: 0;
}

.admin-number {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--gold);
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.admin-title {
  font-size: 12px;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #fff;
  padding: 3px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* Footer */
.admin-footer {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 2px solid var(--line);
  background: var(--panel-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.admin-footer .pixel-btn {
  flex: 1;
  min-width: 120px;
  font-size: 8px;
}

/* Toast */
.admin-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel-3);
  border: 1px solid var(--gold);
  color: var(--ink);
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 3px;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.admin-toast.admin-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Indikator im Titelscreen wenn custom order aktiv */
.admin-trigger-btn.admin-active {
  color: var(--gold);
  opacity: 0.85;
}
.admin-trigger-btn.admin-active::before {
  content: '● ';
  color: var(--gold);
}