/* Layout: Kopfleiste mit Kasse, Nadeln und Heuhaufen-Pegel · Reiter mit Warnstreifen · Arbeitsfläche je Reiter · Heu-Ticker am Fuß.
   Bewusst eine einzige Optik: Scheune bei Nacht, Heu-Gold als Signalfarbe, Stahl für alles, was mit Nadeln zu tun hat. */
:root {
  --bg: #16130e;
  --panel: #211c15;
  --panel-2: #2b241b;
  --line: #3e3427;
  --fg: #f1e8d4;
  --muted: #a8997c;
  --hay: #e9b949;
  --hay-deep: #b8861f;
  --steel: #c9d3da;
  --alert: #e0613f;
  --good: #9ccc6a;
  --gold: #f5d16b;
  --ink: #1a140c;
  --f-display: 'Bungee', Impact, 'Arial Black', sans-serif;
  --f-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --r: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 500 15px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
kbd {
  font: 600 10px var(--f-mono); padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg);
}
h2 {
  font: 400 15px/1.2 var(--f-display); letter-spacing: .04em; color: var(--hay);
  margin: 0 0 10px; text-wrap: balance;
}
.muted { color: var(--muted); }
.lbl { font: 600 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
:focus-visible { outline: 2px solid var(--hay); outline-offset: 2px; }

#app { min-height: 100%; display: flex; flex-direction: column; }

/* ---------- Kopfleiste ---------- */
.top {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1e1912, var(--bg));
}
.logo { margin: 0; font: 400 30px/1 var(--f-display); letter-spacing: .01em; }
.logo .hay { color: var(--hay); }
.logo .needle { color: var(--steel); position: relative; }
.logo .needle::after {
  content: ''; position: absolute; left: -4%; right: -6%; top: 52%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--steel) 12%, var(--steel) 90%, transparent);
  transform: rotate(-8deg); opacity: .8;
}
.claim { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.meters { display: flex; flex-wrap: wrap; gap: 10px; }
.meter {
  display: grid; gap: 1px; min-width: 150px; padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.meter b { font: 600 20px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.meter small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.meter.stack { min-width: 230px; }
.gauge { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin: 4px 0 2px; }
.gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--hay-deep), var(--hay)); }

/* ---------- Reiter ---------- */
.tab-fs { margin-left: 8px; align-self: center; flex: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--muted); cursor: pointer; font: 600 12px var(--f-body); }
.tab-fs:hover { color: var(--fg); }
.tabs {
  display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tabs button {
  background: none; border: 0; padding: 12px 16px 11px; cursor: pointer; position: relative;
  font: 400 13px var(--f-display); letter-spacing: .05em; color: var(--muted); white-space: nowrap;
}
.tabs button:hover { color: var(--fg); }
.tabs button.on { color: var(--fg); }
.tabs button.on::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 4px;
  background: repeating-linear-gradient(-45deg, var(--hay) 0 7px, var(--ink) 7px 14px);
}
.tabs button.locked { opacity: .45; }
.tabs button.locked::before { content: '🔒 '; font-family: sans-serif; }
.tabs button.ping::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px;
  background: var(--hay); box-shadow: 0 0 0 0 var(--hay); animation: ping 1.6s infinite; vertical-align: 1px;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(233,185,73,.6); } 100% { box-shadow: 0 0 0 9px rgba(233,185,73,0); } }

main { flex: 1; padding: 18px 20px 24px; }
.view { display: grid; gap: 18px; }
.view[hidden] { display: none !important; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 14px; border-radius: var(--r); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 3px;
  font-weight: 600; font-size: 14px; transition: background .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: #362d22; }
.btn:active:not(:disabled) { transform: translateY(1px); border-bottom-width: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--hay); color: var(--ink); border-color: var(--hay-deep); }
.btn.primary:hover:not(:disabled) { background: #f2c85c; }
.btn.danger { color: #ffb4a0; border-color: #6b3526; }
.btn.on { background: #4a2a20; border-color: var(--alert); }

/* ---------- Heuhaufen ---------- */
.view-heap { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.heap-stage { display: grid; gap: 12px; min-width: 0; }
.heap-canvas-wrap {
  position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #15121c;
}
#cv-heap { display: block; width: 100%; touch-action: manipulation; }
.heap-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 99px; background: rgba(22,19,14,.8); border: 1px solid var(--line);
  font-size: 13px; color: var(--fg); pointer-events: none; animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, -4px); } }
.loose {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.loose-txt { display: grid; }
.loose-txt b { font: 600 18px var(--f-mono); font-variant-numeric: tabular-nums; }
.loose-txt small { color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--f-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
#hand-stats { padding: 0 4px; grid-template-columns: repeat(2, max-content 1fr); }

.shop { min-width: 0; }
.tool-list { display: grid; gap: 8px; }
.tool-owned { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -2px 0 10px; }
.tool-owned .lbl { margin-right: 4px; }
.owned-ico { font-size: 20px; line-height: 1; padding: 4px 5px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); cursor: default;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.tool {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.tool[hidden] { display: none; }
.tool-ico { font-size: 26px; text-align: center; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.tool-txt { display: grid; gap: 1px; min-width: 0; }
.tool-txt strong { font-size: 15px; }
.tool-txt .eff { color: var(--hay); font-size: 13px; font-weight: 600; }
.tool-txt .desc { color: var(--muted); font-size: 12.5px; }
.tool.milestone { border-color: var(--hay-deep); background: linear-gradient(90deg, #2e2515, var(--panel)); }
.tool.owned { opacity: .55; }
.tool.owned .buy { border-color: transparent; background: none; }
.buy { min-width: 96px; font-family: var(--f-mono); font-size: 13px; }

/* ---------- Fabrik ---------- */
.view-factory { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.palette { position: sticky; top: 60px; }
.build-list { display: grid; gap: 4px; }
.bp {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 6px 10px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.bp:hover { background: var(--panel-2); }
.bp.on { border-color: var(--hay); background: #33291a; box-shadow: inset 3px 0 0 var(--hay); }
.bp.locked { opacity: .4; }
.bp.poor small { color: #d98b73; }
.bp-ico { font-size: 20px; text-align: center; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.belt-ico { width: 28px; height: 28px; }
.bp-txt { display: grid; min-width: 0; }
.bp-txt strong { font-size: 14px; }
.bp-txt small { color: var(--muted); font: 500 11.5px var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab-main { display: grid; gap: 10px; min-width: 0; }
.fab-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fab-bar .btn { padding: 6px 12px; font-size: 13px; }
.fab-msg { flex: 1 1 220px; color: var(--muted); font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: #1a1611; max-width: 100%; max-height: max(320px, calc(100vh - 230px)); overscroll-behavior: contain; }
.fab-scroll.panning, .fab-scroll.panning canvas { cursor: grabbing !important; }
.zoom-grp { display: inline-flex; gap: 2px; }
.zoom-grp .btn { min-width: 34px; padding-inline: 8px; }
.zoom-val { font: 600 12px var(--f-mono); min-width: 64px !important; }
/* Hof im Vollbild: Ansicht deckt das ganze Fenster ab, Meldungen und Dialoge liegen darüber */
body.iso-full { overflow: hidden; }
/* Vollbild: Kopfzeile (Kasse, Nadeln, Haufen) und Reiter bleiben oben stehen, in jedem Reiter */
body.fs .top { position: sticky; top: 0; z-index: 22; background: #1a1610; }
body.fs .tabs { top: var(--top-h, 0px); z-index: 22; }
body.iso-full #v-iso { position: fixed; inset: var(--head-h, 150px) 0 var(--foot-h, 42px) 0; z-index: 20; margin: 0; padding: 10px 12px; background: var(--bg); grid-template-rows: auto minmax(0, 1fr); }
body.iso-full .iso-stage { height: auto; min-height: 0; }
body.iso-full .iso-hint { display: none; }
#cv-fab { display: block; touch-action: pan-x pan-y; }
.fab-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.tutorial, .inspect { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.tutorial h3 { margin: 0 0 6px; font: 400 13px var(--f-display); color: var(--hay); letter-spacing: .04em; }
.step { padding: 2px 0 2px 24px; position: relative; font-size: 14px; }
.step::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 3px; }
.step.done { color: var(--muted); text-decoration: line-through; }
.step.done::before { background: var(--good); border-color: var(--good); }
.inspect p { margin: 0; }
.insp-head { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.insp-head small { display: block; color: var(--muted); font-size: 12.5px; }
.insp-status { margin: 8px 0 !important; font: 500 13px var(--f-mono); color: var(--steel); }
.insp-actions, .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.port-wrap { display: grid; gap: 8px; margin: 4px 0 8px; }
.port-grid { display: grid; grid-template-columns: repeat(3, 84px); grid-template-rows: repeat(3, 32px); gap: 4px; }
.port-grid .pos3 { grid-column: 2; grid-row: 1; }
.port-grid .pos2 { grid-column: 1; grid-row: 2; }
.port-grid .port-mid { grid-column: 2; grid-row: 2; display: grid; place-items: center; font-size: 20px; border-radius: var(--r); background: #463d31;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.port-grid .pos0 { grid-column: 3; grid-row: 2; }
.port-grid .pos1 { grid-column: 2; grid-row: 3; }
/* Hof: Seiten als Raute, passend zur schrägen Ansicht */
.port-grid.iso { grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 28px); }
.port-grid.iso .pos2 { grid-column: 1; grid-row: 1; }
.port-grid.iso .pos3 { grid-column: 3; grid-row: 1; }
.port-grid.iso .pos1 { grid-column: 1; grid-row: 3; }
.port-grid.iso .pos0 { grid-column: 3; grid-row: 3; }
.iso-info .port-wrap { margin: 2px 0 0; }
.iso-info .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.port-btn { border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); cursor: pointer; font: 600 12.5px var(--f-body); }
.port-btn.out { border-color: var(--hay-deep); color: var(--hay); background: #2e2515; }
.port-btn.in { border-color: #4d7890; color: #a9d3ea; background: #1b2830; }
.port-btn.off { color: var(--muted); border-style: dashed; }
.port-btn:hover { filter: brightness(1.15); }
.chip-btn { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 12.5px; }
.chip-btn.on { background: var(--hay); color: var(--ink); border-color: var(--hay); }

/* ---------- Hof (isometrisch, Pixeloptik) ---------- */
.new-badge { font: 400 9px 'Silkscreen', var(--f-mono); background: var(--hay); color: var(--ink); padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: 2px; letter-spacing: 0; }
.view-iso { gap: 10px; }
/* Auftragsbuch und Anleitung schweben im Hof oben links, einklappbar */
.iso-side { position: absolute; left: 12px; top: 12px; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); display: grid; gap: 6px; align-content: start; pointer-events: none; }
.iso-side > * { pointer-events: auto; }
#iso-side-btn { justify-self: start; font-family: 'Silkscreen', var(--f-mono); font-size: 11px; background: rgba(22,19,14,.94); border: 2px solid var(--hay-deep); border-radius: 0; }
.iso-side-body { display: grid; gap: 6px; max-height: min(420px, 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.iso-side .orders, .iso-side .tutorial { background: rgba(22,19,14,.94); border: 2px solid var(--hay-deep); border-radius: 0; padding: 10px 12px; font-size: 12.5px; }
.iso-info .row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.opt-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; margin-bottom: 8px; }
.opt-sel { align-items: center; justify-content: space-between; cursor: default; }
.opt-sel select { flex: none; padding: 6px 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); font: 500 13px var(--f-body); }
.opt-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--hay); }
.opt-row span { display: grid; gap: 2px; }
.opt-row small { color: var(--muted); font-size: 12.5px; }
.opt-code { cursor: default; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.code-in { display: flex !important; gap: 6px; grid-auto-flow: column; flex: none; }
.code-in input { width: 150px; height: auto; margin: 0; padding: 6px 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); font: 600 13px var(--f-mono); accent-color: auto; }
.code-msg:empty { display: none; }
.code-msg.ok { color: #cfe7b3 !important; } .code-msg.bad { color: #ffb4a0 !important; }
.iso-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.iso-day { font: 600 12px var(--f-mono); color: var(--muted); white-space: nowrap; }
.iso-jams { font: 600 12px var(--f-mono); color: #ffd9cf; background: #5a2419; border: 1px solid #c8452f; padding: 2px 8px; border-radius: 99px; }
.iso-title { font: 400 16px 'Silkscreen', var(--f-display); color: var(--hay); letter-spacing: .02em; }
.iso-hint { flex: 1 1 320px; color: var(--muted); font-size: 13px; min-width: 0; }
.iso-stage { position: relative; height: max(360px, calc(100vh - 250px)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #120f0b; }
.iso-stage canvas { display: block; cursor: grab; }
.iso-stage.panning canvas { cursor: grabbing; }
.iso-info { position: absolute; left: 12px; bottom: 12px; max-width: min(360px, calc(100% - 24px)); display: grid; gap: 4px; padding: 10px 12px;
  background: rgba(22,19,14,.94); border: 2px solid var(--hay-deep); border-radius: 0; box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.iso-info strong { font: 400 13px 'Silkscreen', var(--f-display); color: var(--hay); }
.iso-info span { font-size: 13px; color: var(--steel); font-family: var(--f-mono); }
.iso-info .btn { justify-self: start; margin-top: 4px; padding: 4px 10px; font-size: 12.5px; }

.iso-hotbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px;
  background: rgba(22,19,14,.92); border: 2px solid #4a3b24; box-shadow: 4px 4px 0 rgba(0,0,0,.45); max-width: calc(100% - 24px); overflow-x: auto; }
.iso-hotbar:empty { display: none; }
.slot { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: #1f1a13; border: 2px solid #3e3427; cursor: pointer;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-size: 22px; padding: 0; }
.slot:hover { border-color: var(--hay-deep); }
.slot.on { border-color: var(--hay); background: #33291a; }
.slot .cnt { position: absolute; right: 2px; bottom: 0; font: 400 10px 'Silkscreen', var(--f-mono); color: var(--fg); text-shadow: 1px 1px 0 #000; }
.slot .key { position: absolute; left: 3px; top: 1px; font: 400 8px 'Silkscreen', var(--f-mono); color: var(--muted); }
.slot .belt-ico { width: 26px; height: 26px; }
.slot.empty-hint { width: auto; padding: 0 10px; font: 400 10px 'Silkscreen', var(--f-mono); color: var(--muted); cursor: default; }
.iso-shop { position: absolute; right: 12px; top: 12px; bottom: 70px; width: min(380px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain;
  padding: 12px; background: rgba(22,19,14,.97); border: 2px solid var(--hay-deep); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.iso-shop h3 { margin: 0; font: 400 14px 'Silkscreen', var(--f-display); color: var(--hay); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.iso-shop p { margin: 0; font-size: 12.5px; color: var(--muted); }
.shop-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 4px; align-content: start; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--hay-deep) transparent; }
.iso-shop > :not(.shop-list) { flex: none; }
.hinz-wish { display: grid; gap: 4px; padding: 8px 10px; background: #2a2212; border: 1px solid var(--hay-deep); }
.hinz-wish strong { font-size: 13px; color: var(--gold); }
.hinz-wish small { color: var(--muted); font-size: 12px; }
.hinz-wish .gauge { margin: 2px 0 0; }
.shop-sec { font: 400 10px 'Silkscreen', var(--f-mono); color: var(--muted); letter-spacing: .06em; margin-top: 4px; }
.shop-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; background: #1f1a13; border: 1px solid #3e3427; }
.shop-row.locked { opacity: .45; }
.shop-row .ico { font-size: 20px; text-align: center; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.shop-row .txt { display: grid; min-width: 0; }
.shop-row .txt strong { font-size: 13.5px; }
.shop-row .txt small { color: var(--muted); font: 500 11.5px var(--f-mono); }
.shop-row .buy-grp { display: flex; gap: 3px; }
/* eigene Zeile, immer reserviert: erscheint der Link, verschiebt sich nichts */
.shop-ret { display: block; font: 500 11.5px var(--f-mono); color: var(--hay); padding: 0; text-align: left; }
.shop-loose { border-color: var(--hay-deep); }
.shop-row .buy-grp .btn { padding: 3px 7px; font-size: 12px; border-bottom-width: 2px; }

/* ---------- Forschung ---------- */
.research-head p { margin: 0; color: var(--muted); max-width: 70ch; }
.tree-scroll { overflow-x: auto; padding-bottom: 8px; }
.tree { position: relative; display: flex; gap: 46px; width: max-content; padding: 4px 2px; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tree-lines .ln { fill: none; stroke: var(--line); stroke-width: 2; }
.tree-lines .ln.on { stroke: var(--hay-deep); }
.tier { display: flex; flex-direction: column; gap: 10px; width: 210px; position: relative; z-index: 1; }
.tier-lbl { font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tech {
  display: grid; gap: 3px; text-align: left; padding: 10px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.tech strong { font-size: 14.5px; }
.tech .eff { font-size: 12.5px; color: var(--hay); font-weight: 600; }
.tech .desc { font-size: 12px; color: var(--muted); }
.tech .cost { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font: 500 12px var(--f-mono); color: var(--steel); }
.tech .cost .short { color: #e08a72; }
.tech.ready { border-color: var(--hay); box-shadow: 0 0 0 1px var(--hay), 0 0 18px rgba(233,185,73,.18); }
.tech.ready:hover { background: #33291a; }
.tech.done { border-color: #4f6a35; background: #1f2617; cursor: default; }
.tech.done .cost { display: none; }
.tech.done strong::after { content: '  ✓'; color: var(--good); }
.tech.locked { opacity: .42; cursor: not-allowed; }
.tech.poor { cursor: not-allowed; }
.tech:disabled { color: inherit; }
.tech.final { border-style: dashed; border-color: var(--steel); }
.tech.final strong { font: 400 14px var(--f-display); letter-spacing: .03em; color: var(--steel); }

/* ---------- Nähkästchen ---------- */
.perk-head { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 12px; }
.bank {
  display: grid; align-content: center; gap: 2px; padding: 16px 18px; border-radius: var(--r);
  background: linear-gradient(135deg, #2c2a2e, var(--panel)); border: 1px solid #4b4f55;
}
.bank b { font: 600 34px/1.1 var(--f-mono); color: var(--steel); font-variant-numeric: tabular-nums; }
.bank small { color: var(--muted); }
.run-box { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.run-box p { margin: 0 0 10px; max-width: 70ch; }
.perk-intro { margin: 0; max-width: 80ch; }
.perk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.perk { display: grid; gap: 4px; align-content: start; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.perk-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.perk-top strong { font-size: 15px; }
.perk-lvl { font: 500 11.5px var(--f-mono); color: var(--muted); white-space: nowrap; }
.perk-eff { color: var(--steel); font-size: 13px; font-weight: 600; }
.perk .desc { color: var(--muted); font-size: 12.5px; }
.perk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.perk-tag { font: 600 10.5px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.perk.ready { border-color: #6f7780; box-shadow: 0 0 0 1px #6f7780; }
.perk.max { border-color: #4f6a35; background: #1f2617; }
.perk.max .perk-lvl { color: var(--good); }
.perk.locked { opacity: .45; }
.perk .buy { min-width: 110px; }
@media (max-width: 640px) { .perk-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Effekte, Aufträge, Sammlung ---------- */
.linkbtn { background: none; border: 0; padding: 0 0 0 8px; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 12px; }
.linkbtn:hover { color: var(--fg); }
.mods { display: flex; gap: 6px; align-items: center; margin-left: auto; padding-left: 12px; flex: none; }
.mod-list { display: flex; gap: 6px; }
.mod.challenge { background: #2b1f33; border-color: #6a4b80; color: #e3c9f5; }
.mod.challenge.failed { background: #3a2119; border-color: #6b3526; color: #ffb4a0; }
.offer.challenge { border-color: #4a3a55; }
.offer.challenge.done { border-color: #4f6a35; }
.ch-head { margin: 18px 0 4px; font: 400 14px var(--f-display); color: var(--hay); letter-spacing: .04em; }
.ch-wrap { margin-top: 18px; }
.ch-wrap p { margin: 0 0 10px; }
.ch-result { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r); margin: 10px 0; }
.ch-result.ok { background: #1f2617; border: 1px solid #4f6a35; }
.ch-result.bad { background: #2a1a14; border: 1px solid #6b3526; }
.mod.quirk { background: #25262c; border-color: #4b4f55; color: var(--steel); }
.modal-card.wide { width: min(980px, 100%); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.offer { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.offer > .btn { margin-top: auto; }
.offer.plain { border-style: dashed; }
.offer-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.offer-top strong { font-size: 15px; }
.offer-reward { font: 600 12px var(--f-mono); color: var(--muted); white-space: nowrap; }
.offer-reward.up { color: var(--good); }
.offer-size { font: 500 12.5px var(--f-mono); color: var(--steel); }
.quirk-row { display: grid; gap: 2px; font-size: 13.5px; }
.quirk-row b { color: var(--hay); }
.quirk-row span { color: var(--muted); }
.mod.swing { background: #3a2a14; border-color: var(--hay-deep); color: var(--gold); }
.swing { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.swing .gauge { margin: 0; height: 10px; }
.swing-gauge i { background: linear-gradient(90deg, #b8861f, #f5d16b, #fff1b0); transition: width .25s linear; }
.swing b { font: 600 14px var(--f-mono); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.swing small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.mod { font: 600 12px var(--f-body); padding: 3px 9px; border-radius: 99px; white-space: nowrap; border: 1px solid var(--line); }
.mod b { font: 500 11px var(--f-mono); margin-left: 2px; }
.mod.good { background: #2c3a1f; border-color: #4f6a35; color: #cfe7b3; }
.mod.bad { background: #3a2119; border-color: #6b3526; color: #ffb4a0; }
.tabs button.glint { color: var(--gold); }
.tabs button.glint::after { content: ''; position: absolute; right: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.toast { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.toast-txt { display: grid; gap: 2px; min-width: 0; }
.toast.needle { border-left-color: var(--steel); }
.toast.rare { border-left-color: var(--gold); background: linear-gradient(90deg, #3a3018, var(--panel-2)); }
.toast.rare strong { color: var(--gold); }
.needle-ico { display: block; flex: none; }
.first-needle { display: grid; place-items: center; padding: 6px 0 10px; }
.got-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; }
.got { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.orders { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; display: grid; gap: 8px; align-content: start; }
.orders h3 { margin: 0; font: 400 13px var(--f-display); color: var(--hay); letter-spacing: .04em; }
.orders p { margin: 0; }
.order { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; }
.order.active { border-color: var(--hay-deep); }
.order-top { display: flex; justify-content: space-between; gap: 8px; }
.order-reward { font: 600 13px var(--f-mono); color: var(--good); white-space: nowrap; }
.order-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-foot small { color: var(--muted); font-family: var(--f-mono); }
.order .gauge { margin: 2px 0; }
.btn.small { padding: 4px 10px; font-size: 12.5px; border-bottom-width: 2px; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.album-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 18px; margin-top: 8px; }
.album-col, .finds-col { min-width: 0; }
.album-col p { margin: 0 0 10px; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.album-card { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 12px 10px; border-radius: var(--r); border: 1px dashed var(--line); }
.album-card.got { border-style: solid; border-color: #4b4f55; background: linear-gradient(180deg, #26252a, var(--panel)); }
.album-card strong { font-size: 14px; }
.album-card small { color: var(--muted); font-size: 11.5px; }
.album-q { width: 44px; height: 44px; display: grid; place-items: center; font: 400 22px var(--f-display); color: var(--line); }
.album-bonus { font-size: 12.5px; color: var(--steel); font-weight: 600; }
.album-card:not(.got) .album-bonus { color: var(--muted); font-weight: 500; }
.album-count { font-family: var(--f-mono); }
.finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.finds li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: var(--r); background: var(--panel); font-size: 13.5px; }
.finds li.muted { display: block; background: none; }
.finds small { color: var(--muted); font-family: var(--f-mono); font-size: 11.5px; }
@media (max-width: 800px) { .album-wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Statistik ---------- */
.view-stats { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.hist-wrap { display: grid; gap: 6px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
#cv-hist { display: block; width: 100%; height: 190px; }
.hist-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 12px var(--f-mono); color: var(--muted); }
.hist-legend i { display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.stats-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.stats-col h2:not(:first-child) { margin-top: 14px; }
.ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.ach { padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r); display: grid; gap: 2px; }
.ach strong { font-size: 14px; color: var(--muted); }
.ach span { font-size: 12.5px; color: var(--muted); }
.ach.got { border-style: solid; border-color: var(--hay-deep); background: #2a2214; }
.ach.got strong { color: var(--gold); }
textarea {
  width: 100%; resize: vertical; padding: 8px 10px; border-radius: var(--r);
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); font: 500 12px var(--f-mono);
}

/* ---------- Heubörse ---------- */
.view-market { gap: 14px; }
.mk-board { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, #16120c, #0f0c08); box-shadow: inset 0 1px 0 rgba(255,228,170,.06); }
.mk-head { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(150px, 1fr)); gap: 1px; background: #2a2318; }
.mk-head > * { background: #120f0a; padding: 12px 16px; min-width: 0; }
.mk-title { display: flex; gap: 12px; align-items: center; }
.mk-title h2 { margin: 0; font: 400 16px 'Silkscreen', var(--f-display); color: var(--hay); letter-spacing: .03em; }
.mk-title small { color: var(--muted); font: 500 12px var(--f-mono); }
.mk-logo { font-size: 26px; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; filter: drop-shadow(0 0 6px rgba(127,220,106,.35)); }
.mk-stat { display: grid; gap: 2px; align-content: center; }
.mk-stat small { font: 400 9.5px 'Silkscreen', var(--f-mono); color: var(--muted); letter-spacing: .06em; }
.mk-stat b { font: 700 20px var(--f-mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stat em { font: 600 12.5px var(--f-mono); font-style: normal; }
.mk-capbox .gauge { margin: 3px 0 0; }
.up { color: #7fdc6a; } .down { color: #ff7a66; } .flat { color: var(--muted); }
.mk-tape { border-top: 1px solid #2a2318; background: #0b0906; overflow: hidden; white-space: nowrap; height: 26px; }
.mk-tape-in { display: inline-flex; gap: 28px; padding: 5px 0; animation: mktape 60s linear infinite; font: 600 12.5px var(--f-mono); }
.mk-tape-in span { display: inline-flex; gap: 6px; }
.mk-tape-in b { color: var(--hay); font-weight: 700; }
@keyframes mktape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mk-tape-in { animation: none; } }
.mk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .mk-main { grid-template-columns: 1fr; } .mk-head { grid-template-columns: 1fr 1fr; } }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mk-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; gap: 2px 8px; align-items: center; text-align: left;
  padding: 9px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; color: var(--fg);
  transition: background-color .6s, border-color .2s; position: relative; }
.mk-card:hover { border-color: var(--hay-deep); }
.mk-card.sel { border-color: var(--hay); box-shadow: 0 0 0 1px var(--hay) inset; }
.mk-card.fl-up { background-color: #1e2a17; transition: none; } .mk-card.fl-down { background-color: #2e1812; transition: none; }
.mk-card .ic { grid-row: span 2; font-size: 22px; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.mk-card .nm { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card .tk { font: 400 9.5px 'Silkscreen', var(--f-mono); color: var(--muted); letter-spacing: .05em; }
.mk-card .px { font: 700 14px var(--f-mono); text-align: right; }
.mk-card .ch { font: 600 11.5px var(--f-mono); text-align: right; }
.mk-card canvas { grid-column: 1 / -1; width: 100%; height: 34px; display: block; }
.mk-card .own { position: absolute; top: -6px; right: 8px; font: 400 9px 'Silkscreen', var(--f-mono); background: var(--hay); color: var(--ink); padding: 1px 5px; border-radius: 3px; }
.mk-side { display: grid; gap: 10px; }
.mk-detail, .mk-news { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 8px; }
.mk-dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mk-dhead h3 { margin: 0; font-size: 16px; } .mk-dhead small { color: var(--muted); }
.mk-dhead .big { font: 700 22px var(--f-mono); }
#cv-mk { width: 100%; height: 210px; display: block; cursor: crosshair; }
.mk-hold { font: 500 12.5px var(--f-mono); color: var(--muted); display: grid; gap: 2px; }
.mk-hold b { color: var(--fg); }
.mk-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-btns .btn { padding: 5px 10px; font-size: 12.5px; }
.mk-btns .btn.buy { background: #2c4a22; border-color: #4f7a3a; color: #d8f5c8; }
.mk-btns .btn.sell { background: #4a2219; border-color: #7a3a2c; color: #ffd6cc; }
.mk-news h3 { margin: 0; font: 400 13px var(--f-display); color: var(--hay); letter-spacing: .04em; }
.mk-news-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.mk-new { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; font: inherit; font-size: 12.5px; padding: 4px 6px 6px; border: 0; border-bottom: 1px dashed #3a3226;
  border-radius: 3px; background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
.mk-new:hover { background: rgba(255,240,210,.05); }
.mk-new .kd { grid-row: span 3; font-size: 14px; }
.mk-new .fx { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-new .fx em { font: 700 11px var(--f-mono); font-style: normal; padding: 0 5px; border-radius: 3px; background: rgba(255,255,255,.05); }
.mk-new small { color: var(--muted); font: 500 11px var(--f-mono); }
.mk-new.k-rumor .tx { font-style: italic; color: #d9cdb5; }
.mk-new.k-deny .tx { color: var(--muted); }
.mk-new.fresh { animation: mkfresh 1.6s ease-out; }
@keyframes mkfresh { 0% { background: rgba(233,185,73,.35); } 100% { background: transparent; } }
.mk-card .rum { position: absolute; top: -6px; left: 10px; font: 400 9px 'Silkscreen', var(--f-mono); background: #6f5aa8; color: #f1ecff; padding: 1px 5px; border-radius: 3px; animation: mkbob 1.4s ease-in-out infinite; }
@keyframes mkbob { 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .mk-card .rum, .mk-new.fresh { animation: none; } }

/* ---------- Ticker ---------- */
.ticker {
  position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; overflow: hidden;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px)); background: #0f0d09; border-top: 1px solid var(--line);
}
.ticker-lbl {
  flex: none; font: 400 11px var(--f-display); letter-spacing: .06em; color: var(--ink);
  background: var(--hay); padding: 3px 8px; border-radius: 3px;
}
.ticker-text { flex: 1 1 auto; font-size: 13.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Meldungen laufen in der Ticker-Leiste statt als Kästchen über dem Inhalt */
.toast-slot { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; text-align: left;
  padding: 3px 10px; border: 0; border-left: 3px solid var(--steel); border-radius: 3px; background: rgba(255,240,210,.05); color: var(--fg); cursor: pointer; animation: slidein .35s ease-out; font: inherit; }
.toast-slot strong { flex: none; font-size: 13.5px; }
.toast-slot span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toast-slot canvas { width: 20px !important; height: 20px !important; flex: none; }
.toast-slot.good { border-left-color: var(--good); } .toast-slot.good strong { color: #cfe7b3; }
.toast-slot.bad { border-left-color: var(--alert); } .toast-slot.bad strong { color: #ffb4a0; }
.toast-slot.gold, .toast-slot.rare { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(233,185,73,.16), rgba(233,185,73,.02)); } .toast-slot.gold strong, .toast-slot.rare strong { color: var(--gold); }
.toast-slot .more { margin-left: auto; flex: none; font: 600 11px var(--f-mono); color: var(--hay); }
.msg-btn { flex: none; margin-left: auto; padding: 3px 9px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font: 600 12px var(--f-body); cursor: pointer; white-space: nowrap; }
.msg-btn:hover, .msg-btn[aria-expanded="true"] { color: var(--fg); border-color: var(--hay-deep); }
.msg-btn b { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: var(--hay); color: var(--ink); font: 700 10.5px var(--f-mono); text-align: center; }
.msg-pop { position: fixed; right: 12px; bottom: calc(50px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: min(400px, calc(100vw - 24px)); max-height: 55vh; overflow-y: auto;
  display: grid; gap: 6px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.msg-pop h3 { margin: 0 0 2px; font: 400 13px var(--f-display); color: var(--hay); letter-spacing: .04em; }
.msg-item { display: grid; gap: 1px; padding: 4px 8px; border-left: 3px solid var(--steel); font-size: 12.5px; }
.msg-item small { color: var(--muted); font: 500 11px var(--f-mono); }
.msg-item span { color: var(--muted); }
.msg-item.good { border-left-color: var(--good); } .msg-item.bad { border-left-color: var(--alert); } .msg-item.gold, .msg-item.rare { border-left-color: var(--gold); }
body.iso-full .ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; }
.ticker-text.in { animation: slidein .5s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Hinweise & Dialoge ---------- */
/* Bildrate unten links, klein und halb durchsichtig, fängt keine Klicks */
.fps { position: fixed; left: 8px; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); z-index: 29; pointer-events: none; padding: 1px 6px; border-radius: 3px; background: rgba(10,8,5,.45); font: 600 10.5px var(--f-mono); opacity: .6; letter-spacing: .02em; }
.fps.ok { color: #a7d77a; } .fps.mid { color: #f3d77f; } .fps.low { color: #ff9a85; }
.toast {
  display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--steel);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 12.5px; animation: slidein .25s ease-out; opacity: .96;
  transition: opacity .4s, transform .4s;
}
.toast strong { font-size: 13px; }
.toast span { color: var(--muted); }
.toast.good { border-left-color: var(--good); }
.toast.bad { border-left-color: var(--alert); }
.toast.gold { border-left-color: var(--gold); }
.toast.out { opacity: 0; transform: translateX(20px); }
.modal {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(8,6,4,.72);
}
.modal-card {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 22px 24px 20px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal-card h2 { font-size: 22px; margin-bottom: 12px; }
.modal-body p { margin: 0 0 10px; max-width: 60ch; }
.modal-body .kv.end { margin: 12px 0; padding: 10px 12px; background: var(--bg); border-radius: var(--r); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- Schmal ---------- */
@media (max-width: 1000px) {
  .view-heap { grid-template-columns: minmax(0, 1fr); }
  .view-factory { grid-template-columns: minmax(0, 1fr); }
  .palette { position: static; }
  .build-list { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .bp { flex: none; width: 190px; }
}
@media (max-width: 640px) {
  .top { padding: 12px 16px; }
  .tabs { padding: 0 8px; }
  main { padding: 14px 16px 20px; }
  .logo { font-size: 24px; }
  .meters { width: 100%; }
  .meter { flex: 1 1 140px; min-width: 0; }
  .meter b { font-size: 17px; }
  #hand-stats { grid-template-columns: max-content 1fr; }
  .tool { grid-template-columns: 30px 1fr; }
  .tool .buy { grid-column: 1 / -1; }
  .ticker { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Heu-Imperium ---------- */
.view-empire { gap: 14px; }
.em-logo { filter: drop-shadow(0 0 6px rgba(233,185,73,.45)); }
.em-map { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #1a2014; box-shadow: inset 0 0 0 3px #120f0a, 0 8px 24px rgba(0,0,0,.35); }
.em-map canvas { display: block; width: 100%; }
.em-tip { position: absolute; z-index: 3; max-width: 230px; padding: 5px 9px; background: rgba(18,14,8,.94); border: 1px solid var(--hay-deep); border-radius: 4px; font-size: 12.5px; color: var(--fg); pointer-events: none; }
.em-card { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 8px; }
.em-card h3 { margin: 0; font: 400 13px var(--f-display); color: var(--hay); letter-spacing: .04em; }
.em-card h4 { margin: 4px 0 0; font: 600 12px var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.em-card p { margin: 0; font-size: 13px; line-height: 1.45; }
.em-top { display: grid; gap: 2px; }
.em-top strong { font: 700 16px var(--f-body); }
.em-top small { color: var(--muted); font-size: 12.5px; }
.em-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.em-chip { font: 600 11.5px var(--f-body); padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.em-chip.good { color: #cfe7b3; border-color: rgba(127,220,106,.4); } .em-chip.bad { color: #ffb4a0; border-color: rgba(255,122,102,.4); } .em-chip.mix { color: var(--gold); border-color: rgba(233,185,73,.4); }
.em-traits { margin: 0; padding-left: 16px; font-size: 12.5px; display: grid; gap: 2px; }
.em-traits li.good::marker { color: var(--good); } .em-traits li.bad::marker { color: var(--alert); }
.em-kv { font-size: 12.5px; }
.em-kv dd.good { color: #cfe7b3; } .em-kv dd.bad { color: #ffb4a0; }
.em-flows { display: grid; gap: 3px; font: 500 12px var(--f-mono); }
.em-flow.ramsch { color: var(--muted); } .em-flow.feed { color: #d9cdb5; }
.em-list, .em-demand { display: grid; gap: 4px; }
.em-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 5px 7px; border: 0; border-radius: 3px; background: rgba(255,240,210,.03); color: var(--fg); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.em-row:hover { background: rgba(255,240,210,.08); }
.em-row small { color: var(--muted); }
.em-num { font: 600 11.5px var(--f-mono); color: var(--muted); } .em-num.good { color: #cfe7b3; }
.em-dem { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12.5px; }
.em-dem .gauge { grid-column: 1 / -1; }
@media (max-width: 1000px) { .em-main { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .em-board .mk-head { grid-template-columns: 1fr 1fr; }
  .em-board .mk-title, .em-board .mk-stat:last-child { grid-column: 1 / -1; }
  .em-board .mk-stat b { font-size: 17px; }
  .em-row { grid-template-columns: 1fr auto; } .em-row .em-num.good { grid-column: 2; }
  .em-card .btn { min-height: 44px; }
}