/* Oberfläche im Stil der Spielwelt: dunkles, gebürstetes Blech mit Nieten, Warnstreifen wie an den Gebäuden,
   Überschriften als Leuchtschrift (Farbe je Gebäude wie SignGlow in den Modellen), Zahlen als LCD-Anzeige. */
:root {
  --text: #eee3d3;
  --muted: #a4968a;
  --accent: #ffae34;      /* Leuchtschrift, je Oberfläche überschrieben */
  --good: #7ddc6a;
  --bad: #ff5a4a;
  --steel-hi: #342e29;
  --steel: #221e1b;
  --steel-lo: #141210;
  --edge: #4f443a;
  --edge-dark: #0b0908;
  --stripe: #c99a1c;
  --font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Trebuchet MS", sans-serif;
  --mono: "Consolas", "Lucida Console", "Courier New", monospace;
}
/* Leuchten aus der jeweiligen Akzentfarbe (dort berechnen, wo --accent überschrieben wird) */
:root, .panel, .shop, button, label.opt { --glow: color-mix(in srgb, var(--accent) 60%, transparent); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: var(--font); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px; margin: 0 1px; font-family: var(--mono); font-size: 0.85em;
  line-height: 1.35; text-align: center; color: var(--text); background: linear-gradient(#2c2622, #171411);
  border: 1px solid var(--edge); border-bottom-width: 3px; border-bottom-color: var(--edge-dark); border-radius: 3px; }

/* LCD-Anzeigen für Geld, Tiefe und Summen */
.lcd { font-family: var(--mono); font-weight: bold; font-variant-numeric: tabular-nums; color: var(--good);
  text-shadow: 0 0 6px color-mix(in srgb, var(--good) 65%, transparent); background: #060806;
  border: 1px solid #000; box-shadow: inset 0 0 8px #000, 0 0 0 1px #2e2924; border-radius: 2px; padding: 1px 8px; }

/* Blechplatte: Grundlage für HUD-Elemente und Panels */
.plate, .panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 5px),
    linear-gradient(var(--steel-hi), var(--steel-lo));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.55);
  border-radius: 3px;
}

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
.gauges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; }
.gauge { display: grid; grid-template-columns: 52px 180px auto; align-items: center; gap: 8px; }
.gauge .label { font-weight: bold; font-size: 13px; letter-spacing: 2px; color: var(--muted); }
.gauge .val { font-family: var(--mono); font-size: 13px; min-width: 78px; font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 12px; background: #080706; border: 1px solid #000; border-radius: 2px; overflow: hidden;
  box-shadow: inset 0 1px 3px #000, 0 0 0 1px #2e2924; }
.bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,0.5) 7px 9px); }
.fill { height: 100%; width: 50%; transition: width 0.15s linear; }
.fill.fuel { background: linear-gradient(#ffd24a, #d88a12); box-shadow: 0 0 8px rgba(255,190,60,0.5); }
.fill.hull { background: linear-gradient(#8ef07a, #3d9b3a); box-shadow: 0 0 8px rgba(120,230,100,0.45); }
.fill.cargo { background: linear-gradient(#7ab8ff, #3a6fc8); box-shadow: 0 0 8px rgba(110,170,255,0.45); }
.fill.low { background: linear-gradient(#ff6a5a, #a01810); }
.money { position: absolute; top: 14px; right: 16px; text-align: right; padding: 8px 12px; }
.cash { font-size: 24px; display: inline-block; }
.score { color: var(--muted); font-size: 13px; margin-top: 4px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.depth { font-family: var(--mono); font-size: 22px;
  font-weight: bold; padding: 4px 16px; color: #ffc45a; text-shadow: 0 0 6px rgba(255,180,60,0.6); font-variant-numeric: tabular-nums; }
.warn { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); color: var(--bad); font-weight: bold;
  font-size: 28px; letter-spacing: 3px; text-shadow: 0 0 12px rgba(255,60,40,0.8), 0 2px 0 #000; animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* schwebende Texte */
#floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.floater { position: absolute; transform: translate(-50%, -50%); font-weight: bold; font-size: 18px; white-space: nowrap;
  text-shadow: 0 2px 3px #000, 0 0 6px #000; animation: floatUp 1.6s ease-out forwards; }
.floater.points { color: #fff; font-size: 15px; }
.floater.mineral { color: var(--accent); }
.floater.bonus { color: var(--good); font-size: 24px; }
.floater.warning { color: var(--bad); font-size: 22px; }
.floater.damage { color: var(--bad); font-size: 16px; }
.floater.item { color: #9fe3ff; font-size: 20px; }
@keyframes floatUp { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -70px; } }

/* ---------------------------------------------------------------- Overlays & Panels */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 100%); }
.panel { position: relative; max-width: 760px; width: 100%; text-align: center; padding: 30px 30px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(0,0,0,0.55), 0 0 0 1px #000, 0 14px 44px rgba(0,0,0,0.75); }
/* Warnstreifen oben und Nieten in den Ecken */
.panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-bottom: 1px solid #000;
  background: repeating-linear-gradient(-45deg, var(--stripe) 0 11px, #15110e 11px 22px); opacity: 0.9; }
.panel::after { content: ''; position: absolute; inset: 15px 7px 7px; pointer-events: none;
  --rivet: radial-gradient(circle at 40% 40%, #857868 0 1.5px, #3d352f 2.2px, #0d0b0a 3.2px, transparent 3.8px);
  background: var(--rivet) 0 0 / 8px 8px no-repeat, var(--rivet) 100% 0 / 8px 8px no-repeat,
    var(--rivet) 0 100% / 8px 8px no-repeat, var(--rivet) 100% 100% / 8px 8px no-repeat; }
.panel.small { max-width: 480px; }

/* Überschriften als Leuchtschrift auf dunkler Tafel */
.panel h1 { margin: 6px 0 4px; font-size: 54px; letter-spacing: 6px; color: var(--accent); font-stretch: condensed;
  text-shadow: 0 0 10px var(--glow), 0 0 28px var(--glow), 0 3px 0 #3a1a04; }
/* Logo: CORE leuchtet in der Akzentfarbe, BUSINESS in hellem Blech daneben */
.panel h1 span { color: var(--text); text-shadow: 0 0 8px rgba(255, 240, 220, 0.25), 0 3px 0 #2a1a0e; }
.panel h2 { display: inline-block; margin: 4px 0 14px; padding: 5px 20px; font-size: 22px; letter-spacing: 4px;
  color: var(--accent); text-shadow: 0 0 8px var(--glow), 0 0 20px var(--glow); background: #0a0908;
  border: 1px solid #000; border-radius: 2px; box-shadow: inset 0 0 14px #000, 0 0 0 2px #3a3029, 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.panel.danger { --accent: #ff4a36; --stripe: #b3261a; }
.sub { color: var(--muted); margin-top: 0; letter-spacing: 0.5px; }
.hint { color: var(--muted); font-size: 14px; line-height: 1.5; }
.keys { margin: 14px auto 6px; border-collapse: collapse; text-align: left; font-size: 14px; }
.keys td { padding: 3px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.keys td:first-child { color: var(--accent); font-weight: bold; white-space: nowrap; text-align: right; }

/* Tastenleiste unten in jedem Panel */
.keyhints { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.6); box-shadow: 0 -1px 0 rgba(255,255,255,0.05); font-size: 12px; color: var(--muted);
  letter-spacing: 0.5px; }
.keyhints:empty { display: none; }

/* ---------------------------------------------------------------- Knöpfe */
button { font-family: var(--font); font-weight: bold; font-size: 15px; letter-spacing: 2px; color: var(--text);
  background: linear-gradient(#3d3630, #25201c); border: 1px solid #5c5046; border-bottom-color: #15110e;
  border-radius: 3px; padding: 9px 18px; cursor: pointer; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 2px 0 #0a0807; transition: box-shadow 0.08s, background 0.08s; }
button:disabled { opacity: 0.45; cursor: default; }
button.small { font-size: 13px; padding: 6px 12px; }
/* ausgewählt (Tastatur oder Maus): leuchtet in der Farbe der Oberfläche */
button.sel, label.opt.sel { color: #120c06; border-color: var(--accent);
  background: linear-gradient(color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  box-shadow: 0 0 0 1px #000, 0 0 14px var(--glow), 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent); }
.menu { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px auto 8px; max-width: 320px; }
.menu button { width: 100%; font-size: 17px; padding: 11px 18px; }
.menu button.sel::before { content: '\25B6\00A0'; font-size: 0.75em; vertical-align: 1px; }
/* Sprachwahl: zwei Flaggen nebeneinander, die gewählte Sprache ist umrandet */
.menu .langs { display: flex; gap: 8px; width: 100%; margin-top: 18px; }
.menu .langs button { flex: 1; padding: 8px; line-height: 0; }
.menu .langs button.sel::before { content: none; }
.menu .langs button.active:not(.sel) { border-color: var(--accent); box-shadow: 0 0 10px var(--glow); }
.menu .langs svg { box-shadow: 0 0 0 1px #000; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }

/* ---------------------------------------------------------------- Shops */
.panel.shop { text-align: left; max-width: 860px; max-height: calc(100vh - 32px); overflow-y: auto; }
.panel.shop > h2 { display: table; margin-left: auto; margin-right: auto; }
.shop[data-shop="fuel"] { --accent: #ff7a2a; }
.shop[data-shop="sell"] { --accent: #73e6ff; }
.shop[data-shop="upgrade"] { --accent: #9cff4a; }
.shop[data-shop="repair"] { --accent: #ff5a42; }
.savePanel { --accent: #5cff80; }
.msg { min-height: 24px; margin: 10px 0 2px; text-align: center; font-weight: bold; letter-spacing: 1px; }
.msg.ok { color: var(--good); }
.msg.err { color: var(--bad); }
.shopFoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.wallet { color: var(--muted); letter-spacing: 2px; font-size: 13px; }
.wallet .lcd { font-size: 20px; margin-left: 6px; }
.section { margin: 6px 0 4px; }
.panel.shop h3 { margin: 16px 0 8px; color: var(--accent); letter-spacing: 3px; text-align: center; font-size: 15px;
  text-shadow: 0 0 8px var(--glow); }

/* Anzeigen in Tankstelle und Werkstatt */
.meter { margin: 8px auto 14px; max-width: 460px; }
.meter .bar { height: 22px; }
.meter .caption { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; color: var(--muted); }
.meter .caption .lcd { font-size: 16px; }
.options-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.options-row button { min-width: 84px; font-family: var(--mono); }
.options-row button.big { font-family: var(--font); min-width: 150px; }

/* Frachtliste der Mineralverarbeitung */
table.list { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: rgba(0,0,0,0.25);
  border: 1px solid #000; box-shadow: 0 0 0 1px #2e2924; }
table.list td, table.list th { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
table.list th { color: var(--muted); font-weight: normal; text-align: left; letter-spacing: 1px; font-size: 13px; background: rgba(0,0,0,0.35); }
table.list td.num, table.list th.num { text-align: right; font-family: var(--mono); }
table.list tr.total td { border-bottom: none; background: rgba(0,0,0,0.35); }
table.list .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; vertical-align: 0;
  box-shadow: 0 0 6px currentColor; }
.emptyNote { text-align: center; color: var(--muted); padding: 14px; }

/* Upgrade-Kategorien und Karten */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.tabs button { font-size: 13px; padding: 7px 12px; letter-spacing: 1px; }
.tabs button.active:not(.sel) { color: var(--accent); border-color: var(--accent); text-shadow: 0 0 8px var(--glow);
  box-shadow: inset 0 -3px 0 var(--accent), 0 2px 0 #0a0807; }
.upgrades { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.upgrades.items { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
button.up { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; padding: 10px;
  letter-spacing: 0; font-weight: normal; font-size: 14px; background: linear-gradient(#2a2521, #191613); }
button.up > img { width: 84px; height: 84px; object-fit: contain; align-self: center; filter: drop-shadow(0 3px 4px #000); }
.up .name { font-weight: bold; letter-spacing: 0.5px; }
.up .stat { color: var(--muted); font-size: 13px; }
.up .price { font-family: var(--mono); font-weight: bold; color: var(--good); }
.up.poor .price { color: var(--bad); }
.up .status { font-size: 12px; letter-spacing: 2px; font-weight: bold; color: var(--muted); }
.up.owned { border-color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent), 0 2px 0 #0a0807; }
.up.owned .status { color: var(--good); }
.up.lower { opacity: 0.55; }
.up .have { color: var(--text); font-family: var(--mono); margin-left: 6px; }
/* ausgewählte Karte: leuchtender Rahmen statt Füllung, damit Bild und Text lesbar bleiben */
button.up.sel { color: var(--text); background: linear-gradient(color-mix(in srgb, var(--accent) 16%, #2a2521), #191613);
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--glow); }
button.up.sel .name { color: var(--accent); text-shadow: 0 0 6px var(--glow); }
.upgrades.items button.up { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.upgrades.items button.up > img { width: 56px; height: 56px; }
.upgrades.items .info { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }

/* ---------------------------------------------------------------- Lade- und Startbildschirm */
.overlay.solid { background: radial-gradient(ellipse at center, #2a1510 0%, #0b0605 75%); }
.panel.loading { max-width: 520px; }
.loadbar { position: relative; height: 16px; margin: 22px auto 10px; max-width: 380px; background: #080706; border: 1px solid #000;
  border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #2e2924; }
.loadbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,0.5) 9px 11px); }
#loadBar { height: 100%; width: 0%; background: linear-gradient(#ffc45a, #c9772f); transition: width 0.2s ease-out; box-shadow: 0 0 10px rgba(255,180,60,0.5); }
#loadText.bad { color: var(--bad); }
#loadInfo { margin: 4px 0 0; }
#loadInfo:empty { display: none; }
#loadInfo.bad { color: var(--bad); }

/* Items: Leiste im HUD, Teleport-Blitz */
/* unten links: Item-Leiste, rechts daneben die Tiefe (unten bündig, etwas mehr Abstand als zwischen den Items) */
.hudbottom { position: absolute; bottom: 14px; left: 14px; display: flex; align-items: flex-end; gap: 14px; }
.itembar { display: flex; gap: 6px; }
.itembar .slot { position: relative; width: 58px; height: 58px; border-radius: 3px; border: 1px solid var(--edge);
  background: linear-gradient(var(--steel-hi), var(--steel-lo)); box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.5); }
.itembar .slot img { width: 100%; height: 100%; object-fit: contain; }
.itembar .slot.empty img { filter: grayscale(1) brightness(0.45); opacity: 0.6; }
.itembar .key { position: absolute; top: 2px; left: 3px; font-family: var(--mono); font-size: 11px; font-weight: bold; color: var(--accent);
  background: rgba(0,0,0,0.6); padding: 0 3px; border-radius: 2px; }
.itembar .count { position: absolute; bottom: 1px; right: 4px; font-family: var(--mono); font-size: 14px; font-weight: bold;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; font-variant-numeric: tabular-nums; }
/* Tablet/Smartphone (src/touch.js): nur mit body.touch sichtbar */
.touchui { display: none; }
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch #view { touch-action: none; }
body.touch .touchui { display: block; position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: 14px;
  --pad: 168px; width: var(--pad); pointer-events: auto; }
body.touch .itembar .slot { pointer-events: auto; cursor: pointer; touch-action: none; }
body.touch .itembar { flex-wrap: wrap; }
body.touch .itembar .key { display: none; }
/* Item-Leiste und Tiefe weichen dem Steuerkreuz aus (notfalls rutscht die Tiefe in eine zweite Zeile) */
body.touch .hudbottom { flex-wrap: wrap; max-width: calc(100% - var(--pad, 168px) - 60px); left: calc(14px + env(safe-area-inset-left)); }
#touchPause { display: flex; align-items: center; justify-content: center; margin: 0 0 12px auto; padding: 8px 11px; }
#touchPad { position: relative; width: var(--pad); height: var(--pad); border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, rgba(30,26,22,0.55) 0 58%, rgba(15,12,10,0.7) 70%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 2px var(--edge), 0 6px 18px rgba(0,0,0,0.5); }
#touchPad svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#touchPad .ring { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1; }
#touchPad path { fill: rgba(232,220,200,0.45); transition: fill 0.08s; }
#touchPad path.on { fill: var(--accent); filter: drop-shadow(0 0 4px var(--glow)); }
#touchKnob { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a5048, #2a2420); border: 1px solid #6a5c50;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6); pointer-events: none; }
#touchPad.held #touchKnob { border-color: var(--accent); box-shadow: 0 0 0 1px #000, 0 0 12px var(--glow); }
/* Leertaste: links auf halber Höhe, über Menüs und Funksprüchen (bestätigt dort die Auswahl) */
#touchSpace { display: none; }
body.touch #touchSpace { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 40;
  left: calc(16px + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); width: 76px; height: 76px; padding: 0;
  border-radius: 50%; touch-action: none; }
#touchSpace.on { color: #120c06; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px var(--glow); }
@media (max-height: 480px), (max-width: 480px) { body.touch .touchui { --pad: 132px; } body.touch .hudbottom { --pad: 132px; }
  body.touch #touchSpace { width: 60px; height: 60px; } }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
#flash.go { animation: flash 0.7s ease-out; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- Testszenarien */
.panel.scenarios { max-width: 940px; text-align: left; max-height: calc(100vh - 32px); overflow-y: auto; }
.panel.scenarios > h2 { display: table; margin-left: auto; margin-right: auto; }
.panel.scenarios h3 { margin: 14px 0 6px; color: var(--accent); letter-spacing: 2px; font-size: 14px; text-shadow: 0 0 8px var(--glow); }
.scenarios .options { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px;
  background: rgba(0,0,0,0.3); border: 1px solid #000; box-shadow: 0 0 0 1px #2e2924; border-radius: 2px; }
label.opt { cursor: pointer; white-space: nowrap; padding: 5px 10px; border: 1px solid #5c5046; border-radius: 3px;
  background: linear-gradient(#3d3630, #25201c); font-size: 13px; letter-spacing: 1px; }
label.opt input { accent-color: var(--accent); margin: 0 6px 0 0; vertical-align: -2px; pointer-events: none; }
.scenarios .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.scenarios .scn { text-align: left; font-weight: normal; letter-spacing: 0; padding: 8px 10px; }
.scenarios .scn b { display: block; color: var(--accent); margin-bottom: 2px; letter-spacing: 0.5px; }
.scenarios .scn span { font-size: 12px; color: var(--muted); }
.scenarios .scn.sel { color: var(--text); background: linear-gradient(color-mix(in srgb, var(--accent) 18%, #2a2521), #191613); }
.scenarios .scn.sel span { color: var(--text); }

/* Lautstärke: Symbol immer sichtbar (auch über Menüs und Shops), oben links neben der Geldanzeige (deren Breite
   setzt src/main.js als --money-w, ohne HUD 0), Regler klappen darunter auf.
   Symbol: zwei Wellen = alles an, eine Welle = Musik oder Effekte stumm, Kreuz = alles stumm */
#volume { position: fixed; top: 14px; right: calc(16px + var(--money-w, 0px)); z-index: 50; display: flex; flex-direction: column-reverse;
  align-items: flex-end; gap: 8px; transition: right 0.15s; }
#volBtn, .volMute { display: flex; align-items: center; justify-content: center; }
#volBtn { padding: 6px 9px; }
#volBtn.open { border-color: var(--accent); box-shadow: 0 0 0 1px #000, 0 0 12px var(--glow); }
#volume .off, #volume .part .w2, #volume .silent .w1, #volume .silent .w2 { display: none; }
#volume .silent .off { display: inline; }
#volume .silent, #volume .part { color: var(--muted); }
#volPanel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,0.7); }
.volRow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
.volRow.silent .volName, .volRow.silent .volVal { color: var(--muted); }
.volMute { padding: 4px 6px; }
.volName { width: 76px; }
.volRow input { width: 150px; accent-color: var(--accent); cursor: pointer; }
.volVal { width: 40px; text-align: right; font-family: var(--mono); color: var(--good); font-variant-numeric: tabular-nums; }
.volRow kbd { font-size: 10px; }
.volRow kbd.spacer { visibility: hidden; }

/* ---------------------------------------------------------------- Funksprüche (Bildschirm mit CRT-Effekt) */
.panel.trans { --accent: #7fd4ff; --stripe: #3a5566; max-width: 820px; text-align: left; }
.panel.trans > h2 { display: table; margin: 4px auto 14px; animation: blink 1.2s steps(2) 3; }
.transBody { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.transAvatar { position: relative; width: 220px; height: 257px; border-radius: 4px; overflow: hidden;
  border: 2px solid #1d2c35; box-shadow: 0 0 0 2px #3a3029, 0 0 18px rgba(80, 170, 220, 0.25); background: #0b141c; }
#transImage, #transImage svg { width: 100%; height: 100%; display: block; }
#transImage { animation: crtFlicker 0.12s infinite alternate; }
.transAvatar .crt { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); }
.transAvatar .crtBar { position: absolute; left: 0; right: 0; height: 26px; top: -30px; pointer-events: none;
  background: linear-gradient(transparent, rgba(160, 220, 255, 0.12), transparent); animation: crtBar 3.2s linear infinite; }
@keyframes crtFlicker { from { opacity: 0.93; filter: saturate(0.85) brightness(1.02); } to { opacity: 1; filter: saturate(0.9); } }
@keyframes crtBar { to { top: 260px; } }
.transText { background: #060a0d; border: 1px solid #000; box-shadow: inset 0 0 18px #000, 0 0 0 1px #2e2924; padding: 12px 14px; border-radius: 2px; }
.transSender b { color: var(--accent); font-size: 18px; letter-spacing: 1px; text-shadow: 0 0 8px var(--glow); }
.transSender span { color: var(--muted); font-size: 13px; margin-left: 10px; }
.transText p { white-space: pre-line; line-height: 1.55; margin: 10px 0 0; font-size: 15px; color: #d6eefa;
  /* feste Höhe (so hoch wie das Porträt): lange Funksprüche scrollen (Mausrad, Pfeiltasten), das Fenster wächst nicht mit */
  height: clamp(120px, calc(100vh - 330px), 210px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, #000) transparent; }
.transText p::-webkit-scrollbar { width: 6px; }
.transText p::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 55%, #000); border-radius: 3px; }
.transText p::-webkit-scrollbar-track { background: transparent; }
.transText p.typing::after { content: '\258C'; color: var(--accent); animation: blink 0.8s steps(2) infinite; }
/* Fundbericht: gleiches Fenster in Gold, Bildschirm mit warmem Laborlicht */
.panel.trans.find { --accent: #ffc44a; --stripe: #8a6a1e; }
.panel.trans.find .transAvatar { border-color: #3a2c12; box-shadow: 0 0 0 2px #3a3029, 0 0 18px rgba(255, 190, 70, 0.25); background: #140e08; }
.panel.trans.find .transText { background: #0c0906; }
.panel.trans.find .transText p { color: #f3e6cc; }
/* Hinweis des Bordcomputers: Warnfarbe, Warnstreifen wie an den Gebäuden */
.panel.trans.notice { --accent: #ff9a3a; --stripe: #c99a1c; }
.panel.trans.notice .transAvatar { border-color: #3a2410; box-shadow: 0 0 0 2px #3a3029, 0 0 18px rgba(255, 150, 60, 0.25); background: #120c08; }
.panel.trans.notice .transText { background: #0d0907; }
.panel.trans.notice .transText p { color: #f3e2d0; }
#transOk:not(:disabled) { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--glow); }

/* ---------------------------------------------------------------- Endkampf und Sieg */
.bossbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(460px, 60vw);
  padding: 6px 12px; text-align: center; border-color: rgba(255,90,60,0.6); }
.bossbar .bossName { color: #ff6a50; font-weight: bold; letter-spacing: 3px; font-size: 14px; text-shadow: 0 0 8px rgba(255,80,50,0.7); }
.bossbar .bar { height: 14px; margin: 4px 0; }
.fill.boss { background: linear-gradient(#ff4a20, #7a0a04); width: 100%; }
.bossbar .bossHp { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel.victory { --accent: #ffd24a; max-width: 620px; }
#lootList { margin: 10px auto; }
#lootList tr { animation: lootIn 0.5s ease-out; }
@keyframes lootIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lootTotal { font-size: 15px; letter-spacing: 2px; color: var(--muted); }
.lootTotal .lcd { font-size: 22px; margin-left: 6px; }

/* Speicherdialog am Save-Pod */
#saveText { line-height: 1.5; font-size: 17px; }
#saveText .note { color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  .gauge { grid-template-columns: 44px 100px auto; }
  .panel h1 { font-size: 34px; }
  .itembar .slot { width: 44px; height: 44px; }
  /* schmal: Lautstärke unter die Geldanzeige statt daneben (sonst stößt sie an die Tankanzeige) */
  #volume { right: 16px; top: calc(14px + var(--money-h, 0px)); }
  .transBody { grid-template-columns: 1fr; }
  .transAvatar { margin: 0 auto; }
}