/* style.css – erdiges Dunkel-Theme, angelehnt an Astro Miners */
:root {
  --font-pixel: 'Pixelify Sans', 'Courier New', monospace;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #17110d;
  --panel: #241a14;
  --panel-2: #2f231b;
  --border: #4a3628;
  --text: #f1e6d2;
  --muted: #a8957c;
  --accent: #9ccc65;
  --accent-dark: #558b2f;
  --gold: #f2c230;
  --danger: #ef5350;
  --warn: #ffb74d;
  --water: #4fc3f7;
  --radius: 6px;
}

* { box-sizing: border-box; }
[ng-cloak] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font-body); }
h1, h2, h3, button, .chip { font-family: var(--font-pixel); }
h3 { margin: 14px 0 6px; color: var(--accent); font-weight: 600; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.good { color: var(--accent); }
.bad { color: var(--danger); }
.warn { color: var(--warn); }
.pixel-icon { image-rendering: pixelated; vertical-align: middle; }

.loading { display: grid; place-items: center; height: 100vh; font-family: var(--font-pixel); font-size: 20px; padding: 16px; text-align: center; }

/* Kopfzeile */
.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 16px; background: var(--panel); border-bottom: 2px solid var(--border); }
.topbar h1 { margin: 0 auto 0 0; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.money { color: var(--gold); font-size: 16px; }

button { cursor: pointer; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 10px; font-size: 14px; }
button:hover:not([disabled]) { border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.active { background: var(--accent-dark); border-color: var(--accent); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn { background: var(--accent-dark); border-color: var(--accent); white-space: nowrap; }
.btn-danger { background: #7f1d1d; border-color: var(--danger); }
.btn-ghost { background: transparent; }
.btn-row { display: flex; gap: 4px; }
.btn-row.wrap { flex-wrap: wrap; margin-top: 4px; }
.speed { display: flex; gap: 2px; }

/* Terrarium-Tabs */
.tabs { display: flex; gap: 6px; padding: 6px 16px; flex-shrink: 0; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tabs button { white-space: nowrap; }
.tabs button.dead { opacity: 0.6; text-decoration: line-through; }
.tabs small { color: var(--muted); margin-left: 4px; }
.tab-alert { display: inline-block; min-width: 16px; margin-left: 4px; border-radius: 8px; background: var(--warn); color: #241a14; font-size: 11px; text-align: center; }

/* Layout */
/* Desktop: alles auf einen Bildschirm, nur die Seitenleiste scrollt intern */
.app { height: 100vh; display: flex; flex-direction: column; }
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; padding: 10px; }
.view { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
@media (max-width: 960px) { .app { height: auto; } .layout { grid-template-columns: 1fr; } .terrarium-frame { min-height: 50vw; } }
.view, .side { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-width: 0; }
.view.empty { text-align: center; padding: 48px 16px; }
.view-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.name-input { font: 600 17px var(--font-pixel); color: var(--text); background: transparent; border: 1px dashed transparent; border-radius: var(--radius); padding: 2px 4px; max-width: 100%; }
.name-input:hover, .name-input:focus { border-color: var(--border); outline: none; }

.terrarium-frame { position: relative; flex: 1; min-height: 120px; }
/* Sichtfenster mit Glasrahmen; render.js zoomt/verschiebt das Canvas darin */
terrarium-view { position: absolute; inset: 0; overflow: hidden; border: 6px solid #5a6b73; border-top-color: #78909c; border-radius: 4px; background: #120c09; cursor: grab; touch-action: none; }
terrarium-view:active { cursor: grabbing; }
.terrarium-canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.cam-controls { position: absolute; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: calc(100% - 24px); }
.cam-controls button { font-size: 11px; padding: 2px 7px; background: rgba(36, 26, 20, 0.85); }
.fills { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.btn-fill { font: 11px var(--font-body); text-align: left; padding: 3px 6px; }
.dead-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; }

.legend-row { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; margin: 4px 0; }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 1px solid #0006; }

.warnings { position: absolute; top: 14px; left: 14px; right: 14px; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; z-index: 1; }
.warnings li { background: rgba(61, 36, 18, 0.92); border: 1px solid var(--warn); border-radius: var(--radius); padding: 2px 8px; color: var(--warn); font-size: 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 4px; margin: 6px 0; }
.card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.card b { font: 600 16px var(--font-pixel); }
.card span { font-size: 11px; color: var(--muted); text-align: center; }

.bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.bar label { font-size: 11px; color: var(--muted); }
.track { height: 10px; background: #120c09; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.track i { display: block; height: 100%; background: var(--accent); }
.track i.water { background: var(--water); }
.track i.wb { background: #ce93d8; }
.track i.warn { background: var(--warn); }
.track i.bad { background: var(--danger); }

/* Seitenleiste */
.side { overflow-y: auto; min-height: 0; }
.panel-tabs, .sub-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sub-tabs button { font-size: 12px; padding: 4px 8px; }
.item { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); }
.item.disabled { opacity: 0.75; }
.item-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.stats { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.stats th { text-align: left; color: var(--accent); font-family: var(--font-pixel); padding: 10px 0 4px; border-bottom: 1px solid var(--border); }
.stats td { padding: 3px 0; border-bottom: 1px solid #ffffff0d; }
.stats td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.pop-chart { width: 100%; height: auto; background: #120c09; border: 1px solid var(--border); border-radius: var(--radius); }
.pop-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pop-chart .axis { stroke: var(--border); }
.pop-chart .tick { fill: var(--muted); font-size: 9px; }
.line-a { stroke: var(--accent); color: var(--accent); }
.line-b { stroke: #ef8a5a; color: #ef8a5a; }
.line-c { stroke: #ffe0b2; color: #ffe0b2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; margin: 4px 0 8px; }
.legend .line-a::before, .legend .line-b::before, .legend .line-c::before { content: ''; display: inline-block; width: 10px; height: 3px; background: currentColor; margin-right: 4px; vertical-align: middle; }

.wiki { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.wiki ul { margin: 4px 0; padding-left: 18px; }

.log { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.log li { padding: 4px 0; border-bottom: 1px solid #ffffff0d; }
.log li.bad { color: var(--danger); }
.log li.good { color: var(--accent); }
/* helle Kontur, damit dunkle Ameisen-Sprites auf dunklem Grund lesbar bleiben */
.card .pixel-icon, .tabs .pixel-icon, .item .pixel-icon, .wiki .pixel-icon { filter: drop-shadow(0 0 1px #d9c8a6) drop-shadow(0 0 1px #d9c8a6); }

.link-mark { margin-left: 4px; color: var(--accent); }
.toast { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 10; background: var(--panel-2); border: 1px solid var(--gold); border-radius: var(--radius); padding: 8px 14px; box-shadow: 0 4px 16px #0008; max-width: calc(100% - 32px); }