/* style.css – erdiges Dunkel-Theme, angelehnt an Astro Miners */
:root {
  --font-head: 'Fredoka', system-ui, sans-serif;
  --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-head); }
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); }
.game-icon { vertical-align: middle; display: inline-block; }

.loading { display: grid; place-items: center; height: 100vh; font-family: var(--font-head); 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 */
/* Terrarien: senkrechte Liste links, scrollt bei vielen Einträgen */
.tabs { display: flex; flex-direction: column; gap: 4px; padding: 8px; min-height: 0; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.tabs button { text-align: left; display: flex; align-items: center; }
.tabs button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; gap: 6px; }
.tabs button > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.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: 58px 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; } .tabs { flex-direction: row; overflow-x: auto; } }
.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-head); 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; width: 100%; height: 100%; }
.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; }
.sw.dot { border-radius: 50%; border-width: 2px; border-color: #000a; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.link-row select { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px 6px; font: inherit; }

.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-head); }
.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; }
/* Tab-Leiste bleibt beim Scrollen des Inhalts sichtbar */
.panel-tabs { position: sticky; top: -10px; z-index: 2; background: var(--panel); margin: -10px -10px 10px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); }
.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-head); 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.current { border: 1px solid var(--accent); border-radius: var(--radius); padding: 0 8px 8px; background: rgba(156,204,101,0.07); scroll-margin-top: 110px; }
.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 img.game-icon, .tabs img.game-icon, .item img.game-icon, .wiki img.game-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; display: flex; align-items: center; gap: 10px; 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); cursor: pointer; animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.order-bar { margin-top: 4px; }
.order-bar .track { height: 6px; }
.track i.prog { background: var(--gold); }

/* Erfolge: erreichte golden hervorgehoben, offene gedämpft mit Fortschritt */
.ach-filter { display: flex; gap: 4px; margin-bottom: 8px; }
.ach-filter button { font-size: 11px; padding: 2px 8px; }
.ach { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border-radius: var(--radius); border: 1px solid var(--border); }
.ach.done { background: linear-gradient(90deg, rgba(242,194,48,0.22), rgba(242,194,48,0.06)); border-color: var(--gold); }
.ach.done b { color: var(--gold); }
.ach.open { background: var(--panel-2); opacity: 0.7; }
.ach-badge { width: 36px; display: flex; justify-content: center; }
.ach.open .ach-badge { filter: grayscale(1); opacity: 0.6; }
.ach-progress { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ach-progress .track { flex: 1; height: 6px; }
.ach-reward { font-size: 12px; color: var(--accent); white-space: nowrap; }
.ach.done .ach-reward { color: var(--gold); }

.setting { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.setting input[type=range] { width: 100%; accent-color: var(--accent); }

/* Terrarien-Liste: schmale Spalte nur mit Art-Icon und Warn-Abzeichen; Name als Tooltip */
.tab-icon { position: relative; display: inline-flex; flex-shrink: 0; }
.tab-icon .tab-alert { position: absolute; top: -6px; right: -8px; margin: 0; }
.tabs { padding: 8px 4px; }
.tabs button { justify-content: center; padding: 6px 4px; }
.tabs button.linked { box-shadow: inset 4px 0 0 var(--link); } /* Farbe = Gruppe verbundener Völker */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tooltip der Terrarien-Leiste (fixed, damit die scrollende Leiste ihn nicht abschneidet) */
.tab-tip { position: fixed; z-index: 50; transform: translateY(-50%); max-width: 260px; padding: 5px 9px; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px #0008; pointer-events: none; }
.tab-tip.below { transform: none; }
.tabs button[draggable="true"] { cursor: grab; }