:root {
  --bg: #070b12;
  --bg2: #0b111c;
  --panel: #0f1624;
  --panel2: #141d2f;
  --line: #1f2b42;
  --line2: #2a3a58;
  --text: #d7e3f4;
  --muted: #7d8fae;
  --dim: #4b5b78;
  --green: #39ff88;
  --green-d: #1c9c55;
  --money: #ffc547;
  --power: #ffe14d;
  --rp: #b98cff;
  --data: #4cc9f0;
  --red: #ff4d6d;
  --radius: 12px;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --retro: 'VT323', 'JetBrains Mono', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, #0f2a2033, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #1b1a4433, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--mono);
  min-height: 100vh;
  overflow-x: hidden;
}
body::after {
  /* dezente Scanlines */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #0000000d 2px 3px);
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* --- Kopfzeile --------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: #070b12e6; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--retro); font-size: 30px; letter-spacing: 2px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.brand-mark { color: var(--green); text-shadow: 0 0 12px var(--green); }
.brand em { font-style: normal; color: var(--green); text-shadow: 0 0 10px #39ff8866; }
.resources { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.res {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 12px; min-width: 150px;
}
.res > div { display: flex; flex-direction: column; line-height: 1.2; }
.res b { font-size: 16px; font-variant-numeric: tabular-nums; }
.res small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.res small.neg { color: #ff8fa3; }
.res-data.short { border-color: var(--red); }
.res-ico { font-size: 18px; width: 22px; text-align: center; }
.res-money b, .res-money .res-ico { color: var(--money); }
.res-rp b { color: var(--rp); }
.res-data b { color: var(--data); }
.res-power b { color: var(--power); font-size: 14px; }
.res-power .bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin-top: 4px; overflow: hidden; width: 120px; }
.res-power .bar i { display: block; height: 100%; width: 0; background: var(--power); transition: width .3s; }
.res-power.short { border-color: var(--red); animation: pulse-red 1.2s infinite; }
.res-power.short b { color: var(--red); }
.res-power.short .bar i { background: var(--red); }
@keyframes pulse-red { 50% { box-shadow: 0 0 0 3px #ff4d6d33; } }

.account { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.account .who { color: var(--muted); font-size: 12px; text-align: right; line-height: 1.25; }
.account .who b { color: var(--text); display: block; font-size: 13px; }
.save-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: middle; }
.save-dot.saving { background: var(--money); }
.save-dot.error { background: var(--red); }

.btn {
  border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px;
  padding: 7px 14px; font-weight: 600; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--green-d); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--green); color: #04150b; border-color: var(--green); }
.btn.primary:hover { background: #6bffa6; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #ff4d6d88; color: var(--red); background: transparent; }
.btn.danger:hover { background: #ff4d6d18; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- Layout ------------------------------------------------------------ */
.layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 310px; gap: 16px;
  padding: 16px 18px 40px; max-width: 1800px; margin: 0 auto;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.side { padding: 16px; align-self: start; position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.main { padding: 0; min-width: 0; overflow: hidden; }

.era { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--retro); font-size: 22px; color: var(--green); }
.era small { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Monitor-Klicker */
.monitor {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  background: linear-gradient(#2a3346, #1a2131); border: 1px solid #36425c; border-radius: 16px;
  padding: 12px 12px 10px; box-shadow: 0 10px 30px #0008, inset 0 1px 0 #ffffff14;
  user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .06s;
}
.monitor:active { transform: scale(.985); }
.screen {
  display: block; height: 190px; overflow: hidden; text-align: left;
  background: radial-gradient(ellipse at center, #072314 0%, #03100a 80%);
  border-radius: 10px; padding: 10px 12px; position: relative;
  font-family: var(--retro); font-size: 19px; line-height: 1.05; color: var(--green);
  text-shadow: 0 0 6px #39ff88aa; box-shadow: inset 0 0 30px #000c;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.screen::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 2px, #00000040 2px 3px); pointer-events: none; }
.code { white-space: pre-wrap; word-break: break-all; }
.cursor { animation: blink 1s steps(1) infinite; display: inline; }
@keyframes blink { 50% { opacity: 0; } }
.monitor-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.monitor-foot b { color: var(--money); font-size: 14px; letter-spacing: 0; text-transform: none; }
.monitor.flash .screen { box-shadow: inset 0 0 30px #000c, 0 0 0 2px #39ff8855; }

.hint {
  border: 1px dashed var(--green-d); border-radius: 10px; padding: 10px 12px;
  background: #39ff880a; font-size: 12.5px; color: #b8f5d0;
}
.hint:empty { display: none; }
.hint b { color: var(--green); }

.buffs { display: flex; flex-direction: column; gap: 6px; }
.buff { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line2); font-size: 12px; position: relative; overflow: hidden; }
.buff .t { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.buff .prog { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--green); }
.buff.bad { border-color: #ff4d6d77; }
.buff.bad .prog { background: var(--red); }

.mini-stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 12px; color: var(--muted); }
.mini-stats dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* --- Tabs -------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; color: var(--muted); font-weight: 600; white-space: nowrap; border-radius: 8px 8px 0 0;
}
.tabs button:hover { color: var(--text); background: #ffffff06; }
.tabs button.active { color: var(--green); border-bottom-color: var(--green); }
.tabs .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #04150b; font-size: 11px; line-height: 18px; text-align: center; }
.tabs .badge:empty { display: none; }
.tabs .count { color: var(--dim); font-size: 12px; }
.tab-body { padding: 16px; }
.tab-intro { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }

/* --- Hardware ---------------------------------------------------------- */
.buymode { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.buymode span { margin-right: 4px; }
.buymode button { border: 1px solid var(--line2); background: var(--panel2); border-radius: 7px; padding: 4px 10px; font-weight: 600; }
.buymode button.active { background: var(--green); color: #04150b; border-color: var(--green); }

.cat { margin-bottom: 22px; }
.cat h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.cat h3 small { text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

.card {
  display: grid; grid-template-columns: 46px 1fr auto; grid-template-rows: auto auto auto; gap: 2px 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 12px;
  transition: border-color .15s, background .15s;
}
.card .ico { grid-row: 1 / 3; font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; background: #0007; border-radius: 10px; }
.card .name { font-weight: 800; font-size: 14px; align-self: end; }
.card .owned { grid-row: 1 / 3; grid-column: 3; font-family: var(--retro); font-size: 34px; line-height: 1; color: var(--green); align-self: center; text-align: right; min-width: 40px; }
.card .owned.zero { color: var(--dim); }
.card .prod { font-size: 11.5px; color: var(--muted); }
.card .prod .m { color: var(--money); } .card .prod .p { color: var(--power); } .card .prod .neg { color: #ff8fa3; }
.card .prod .r { color: var(--rp); } .card .prod .d { color: var(--data); }
.card .ms { grid-column: 1 / 4; display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--dim); margin-top: 6px; }
.card .ms .track { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.card .ms .track i { display: block; height: 100%; background: var(--green-d); }
.card .buy {
  grid-column: 1 / 4; margin-top: 8px; display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line2); background: #0005; border-radius: 8px; padding: 7px 10px; font-weight: 600; font-size: 12.5px;
}
.card .buy .c { color: var(--money); font-variant-numeric: tabular-nums; }
.card.can .buy { border-color: var(--green-d); background: #39ff8812; }
.card.can .buy:hover { background: #39ff8822; border-color: var(--green); }
.card:not(.can) .buy { cursor: not-allowed; color: var(--dim); }
.card:not(.can) .buy .c { color: #ffc54777; }
.card .need { grid-column: 1 / 4; font-size: 10.5px; color: var(--dim); margin-top: 4px; }
.card .need:empty { display: none; }
.card .need.over { color: #ff8fa3; }
.card.locked { opacity: .55; grid-template-rows: auto auto; border-style: dashed; }
.card.locked .ico { filter: grayscale(1) brightness(.6); }
.card.locked .prod { color: var(--dim); }
.card.locked .name, .card.locked .prod { grid-column: 2 / 4; }
.card .desc { font-size: 11px; color: var(--dim); grid-column: 2 / 3; }
.card.pop { animation: pop .25s; }
@keyframes pop { 40% { transform: scale(1.02); border-color: var(--green); } }

/* --- Techtree als Netzwerk-Topologie ----------------------------------- */
.net-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px;
  font-size: 12px; color: var(--muted); padding: 8px 12px; background: #03100a; border: 1px solid #12301f; border-radius: 8px;
}
.net-status .prompt { color: var(--green); }
.net-status .ns-item b { color: var(--text); }
.net-status .ns-item.ready { color: var(--green); }
.net-status .ns-hint { margin-left: auto; color: var(--dim); }
.techtree-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: calc(100vh - 220px);
  background:
    radial-gradient(circle, #1b2a40 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, #060a11, #08101b);
  cursor: grab; user-select: none;
}
.techtree-wrap.dragging { cursor: grabbing; }
.techtree-wrap.dragging .tnode { pointer-events: none; }
.techtree { position: relative; }
.techtree svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.techtree .links path { fill: none; stroke: #22314a; stroke-width: 2; stroke-linejoin: round; }
.techtree .links path.idle { stroke: #3b4f70; stroke-dasharray: 2 5; }
.techtree .links path.ready { stroke: var(--green); stroke-opacity: .7; stroke-dasharray: 7 6; animation: dash .9s linear infinite; }
.techtree .links path.up { stroke: var(--green-d); stroke-width: 2.5; filter: drop-shadow(0 0 3px #39ff8866); }
@keyframes dash { to { stroke-dashoffset: -13; } }
.techtree .packets circle { fill: #b6ffd5; filter: drop-shadow(0 0 4px var(--green)); }
.techtree .packets circle.probe { fill: var(--money); filter: drop-shadow(0 0 4px var(--money)); }

.subnet {
  position: absolute; top: 14px; border: 1px dashed #24344f; border-radius: 14px;
  background: linear-gradient(180deg, #0c1524cc, #0a111c88);
}
.sn-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 0; font-family: var(--retro); font-size: 21px; color: var(--muted); letter-spacing: 1px; }
.sn-head b { font-weight: 400; color: #9fb4d6; }
.sn-head small { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-left: auto; }
.sn-sw { font-family: var(--mono); font-size: 10.5px; color: #0b1a12; background: var(--green-d); border-radius: 4px; padding: 1px 6px; letter-spacing: 0; align-self: center; }
.sn-net { padding: 2px 14px; font-size: 10.5px; color: var(--dim); }

.tnode {
  position: absolute; text-align: left; padding: 8px 11px 7px 12px;
  background: linear-gradient(180deg, #131c2e, #0f1726); border: 1px solid #2a3a58; border-radius: 9px; font-size: 11px;
  display: flex; flex-direction: column; gap: 2px; overflow: visible;
  box-shadow: 0 6px 18px #0008; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tnode .port { position: absolute; top: 50%; width: 7px; height: 11px; margin-top: -5.5px; background: #22314a; border: 1px solid #3b4f70; border-radius: 2px; }
.tnode .port.l { left: -5px; } .tnode .port.r { right: -5px; }
.tnode .tn-head { display: flex; gap: 7px; align-items: center; font-weight: 800; font-size: 12px; white-space: nowrap; }
.tnode .tn-name { overflow: hidden; text-overflow: ellipsis; }
.tnode .tn-ico { font-size: 15px; }
.tnode .led { width: 7px; height: 7px; border-radius: 50%; background: #5a2030; flex: none; }
.tnode .tn-ip { color: var(--dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnode .tn-fx { color: var(--muted); font-size: 10.5px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.tnode .tn-cost { display: flex; gap: 10px; font-variant-numeric: tabular-nums; margin-top: auto; }
.tnode .tn-cost .r { color: var(--rp); } .tnode .tn-cost .d { color: var(--data); }
.tnode .tn-cost .short { color: #ff8fa3; }
.tnode.locked { opacity: .42; cursor: default; filter: saturate(.4); }
.tnode.available { cursor: default; }
.tnode.available .led { background: var(--money); box-shadow: 0 0 6px var(--money); }
.tnode.affordable { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 22px #39ff8840; cursor: pointer; }
.tnode.affordable .led { background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 0.8s steps(1) infinite; }
.tnode.affordable .port { border-color: var(--green); }
.tnode.affordable:hover { transform: translateY(-2px); }
.tnode.done { background: linear-gradient(180deg, #0f2a1d, #0b1f16); border-color: var(--green-d); cursor: default; }
.tnode.done .led { background: var(--green); box-shadow: 0 0 8px var(--green); }
.tnode.done .port { background: var(--green-d); border-color: var(--green); }
.tnode.done .tn-cost { display: none; }
.tnode.done::after { content: 'UP'; position: absolute; top: -8px; right: 12px; font-size: 9px; font-weight: 800; line-height: 14px; color: #04150b; background: var(--green); padding: 0 5px; border-radius: 3px; box-shadow: 0 0 8px #39ff8866; }
.tnode.ping { animation: ping .9s ease-out; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #39ff88aa; } 100% { box-shadow: 0 0 0 26px #39ff8800; } }

/* --- Rechte Spalte ----------------------------------------------------- */
.right { padding: 14px; align-self: start; position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; }
.compute-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cc-head { display: flex; flex-direction: column; gap: 2px; }
.cc-head span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; }
.cc-head b { font-family: var(--retro); font-size: 32px; font-weight: 400; color: var(--green); line-height: 1; text-shadow: 0 0 10px #39ff8855; }
.cc-head b small { font-size: 16px; color: var(--green-d); }
.cc-rows { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 0; font-size: 12px; }
.cc-rows dt { color: var(--muted); }
.cc-rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cc-rows small { color: var(--dim); }
.m { color: var(--money); }
.neg { color: #ff8fa3 !important; }
.cc-grid { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.cc-label { display: flex; justify-content: space-between; font-size: 12px; }
.cc-label span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.cc-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.cc-bar i { display: block; height: 100%; background: var(--power); transition: width .3s; }
.cc-bar.short i { background: var(--red); }
.cc-sub { font-size: 11px; color: var(--dim); }

.quests-title { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.quests-title small { text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; font-size: 11px; }
#quests { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.quest { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; animation: q-in .35s ease-out; }
@keyframes q-in { from { opacity: 0; transform: translateX(14px); } }
.quest.story { border-color: #3a3060; background: linear-gradient(180deg, #171a33, #131b2d); }
.quest.done { border-color: var(--green); box-shadow: 0 0 18px #39ff8826; }
.q-from { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.q-tag { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #ffffff0d; color: var(--dim); white-space: nowrap; }
.quest.story .q-tag { background: #b98cff22; color: var(--rp); }
.q-reroll { border: 1px solid var(--line2); background: none; border-radius: 5px; width: 22px; height: 20px; padding: 0; line-height: 1; color: var(--muted); }
.q-reroll:hover:not(:disabled) { color: var(--green); border-color: var(--green-d); }
.q-reroll:disabled { opacity: .35; cursor: not-allowed; }
.q-title { font-size: 14px; }
.q-text { margin: 0; color: var(--muted); font-size: 11.5px; font-style: italic; }
.q-goal { color: var(--text); }
.q-prog { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.q-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-d), var(--green)); transition: width .3s; }
.q-num { font-size: 10.5px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; margin-top: -3px; }
.q-reward { color: var(--money); font-size: 11.5px; }
.q-est { color: var(--dim); }
.q-claim { margin-top: 3px; animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px #39ff8833; } }
.quest.waiting { color: var(--dim); border-style: dashed; }
.q-wait { font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.q-wait b { color: var(--muted); font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 3px; margin-left: auto; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); animation: dots 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 50% { background: var(--green); } }
.quest.done-all { text-align: center; color: var(--green); border-style: dashed; }


/* --- Auftrags-Badge ------------------------------------------------------ */
.q-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--green); color: #04150b; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.q-badge:empty { display: none; }

/* --- Rechte Leiste ein-/ausklappen ------------------------------------- */
.right-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1.5px; margin: -4px 0 -6px; }
.right-toggle { border: 1px solid var(--line2); background: var(--panel2); border-radius: 6px; width: 28px; height: 24px; padding: 0; color: var(--muted); font-size: 14px; line-height: 1; }
.right-toggle:hover { color: var(--green); border-color: var(--green-d); }
.right-strip { display: none; }
body.right-collapsed .layout { grid-template-columns: 300px minmax(0, 1fr) 48px; }
body.right-collapsed .right { padding: 8px 6px; gap: 10px; align-items: center; overflow: visible; }
body.right-collapsed .right .acc, body.right-collapsed .right-head > span { display: none !important; }
body.right-collapsed .right-head { margin: 0; }
.rs-ico { font-size: 18px; }
.rs-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* --- Auftragsübersicht -------------------------------------------------- */
.modal-wide { width: min(780px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto; }
.ql-head { display: flex; justify-content: space-between; align-items: center; }
.ql-head h2 { margin: 0 0 12px; }
.ql-close { padding: 4px 10px; }
.ql-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 9px; background: #ffffff12; font-size: 11px; margin-left: 4px; }
.ql-sec { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 18px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.ql-sec small { text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; }
.ql-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ql-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); margin-bottom: 6px; font-size: 12px; }
.ql-row.next { opacity: .55; }
.ql-row.done { border-color: #1c9c5555; }
.ql-ico { font-size: 15px; line-height: 1.3; }
.ql-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ql-title { font-weight: 800; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ql-title small { font-weight: 400; color: var(--dim); font-size: 11px; }
.ql-nr { color: var(--rp); font-weight: 600; }
.ql-goal { color: var(--muted); }
.ql-reward { color: var(--money); font-size: 11.5px; }
.ql-time { color: var(--dim); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }


/* --- Verkaufen & Verlustschutz ----------------------------------------- */
.card { position: relative; }
.card .sell {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; padding: 0; line-height: 1;
  border: 1px solid var(--line2); background: #0006; border-radius: 5px; color: var(--dim); font-size: 13px; opacity: 0;
  transition: opacity .15s;
}
.card:hover .sell:not(:disabled) { opacity: 1; }
.card .sell:hover { color: #ff8fa3; border-color: #ff4d6d88; }
.card .sell:disabled { display: none; }
.card .owned { margin-right: 18px; }
.card.blocked .buy { border-color: #ff4d6d66; background: #ff4d6d10; color: #ff8fa3; cursor: not-allowed; }
.card.blocked .buy .c { color: #ff8fa3; }

.ql-open { margin-left: auto; margin-right: 0; border: 1px solid var(--line2); background: none; border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ql-open:hover { color: var(--green); border-color: var(--green-d); }
.quests-title small { margin-left: 8px; }

/* --- Ω-Netz (erweiterter Techtree) ------------------------------------- */
.subnet.meta { border-color: #4a3a7a; background: linear-gradient(180deg, #160f2acc, #0f0b1e99); }
.subnet.meta .sn-sw { background: var(--rp); color: #14082a; }
.subnet.meta .sn-head b { color: #cdb6ff; }
.tnode.meta { border-color: #4a3a7a; background: linear-gradient(180deg, #1a1430, #130f24); }
.tnode.meta.affordable { border-color: var(--rp); box-shadow: 0 0 0 1px var(--rp), 0 0 22px #b98cff40; }
.tnode.meta.affordable .led { background: var(--rp); box-shadow: 0 0 8px var(--rp); }
.tnode.meta.done { background: linear-gradient(180deg, #23173f, #1a1230); border-color: var(--rp); }
.tnode.meta.done .led { background: var(--rp); box-shadow: 0 0 8px var(--rp); }
.tnode.meta.done::after { background: var(--rp); box-shadow: 0 0 8px #b98cff66; }
.tnode .tn-cost .q { color: var(--rp); }
.tnode .tn-cost .q.short { color: #ff8fa3; }
.tnode .tn-cost .cyc { color: var(--dim); }
.net-status .ns-item.omega { color: var(--rp); }

/* --- Singularitäts-Tab --------------------------------------------------- */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 16px 0; text-align: left; }
.pr-grid .stat b { font-size: 14px; }
.bot-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bot-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2); font-size: 12px; cursor: pointer; }
.bot-toggle input { accent-color: var(--green); }

/* --- Erfolge & Statistik ----------------------------------------------- */
.ach-summary { margin: 0 0 14px; color: var(--muted); }
.ach-summary b { color: var(--green); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.ach .ai { font-size: 26px; }
.ach b { display: block; font-size: 12.5px; }
.ach small { color: var(--muted); font-size: 11px; }
.ach.locked { opacity: .4; }
.ach.locked .ai { filter: grayscale(1); }
.ach.got { border-color: var(--green-d); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stat small { color: var(--muted); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 22px 0 10px; }
.acct-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.acct-box p { margin: 0; flex: 1 1 260px; color: var(--muted); font-size: 12.5px; }

/* --- Singularität ------------------------------------------------------ */
.prestige { max-width: 640px; margin: 10px auto; text-align: center; }
.prestige .orb { font-size: 64px; filter: drop-shadow(0 0 20px #b98cffaa); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.prestige h2 { font-family: var(--retro); font-size: 34px; font-weight: 400; margin: 8px 0; color: var(--rp); }
.prestige p { color: var(--muted); }
.prestige .gain { font-size: 22px; margin: 16px 0; }
.prestige .gain b { color: var(--rp); }

/* --- Ereignisse -------------------------------------------------------- */
#events { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.event {
  position: absolute; pointer-events: auto; border: 0; background: none; padding: 0;
  font-size: 44px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 14px #ffc547);
  animation: ev-in .4s ease-out, bob 2s ease-in-out .4s infinite;
}
.event.disk::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #ffc54788; animation: ring 1.4s ease-out infinite; }
.event.virus { filter: drop-shadow(0 0 14px #ff4d6d); animation: ev-in .4s ease-out, wiggle .35s ease-in-out .4s infinite; }
.event.leaving { animation: ev-out .4s forwards; }
@keyframes ev-in { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
@keyframes ev-out { to { transform: scale(0); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes wiggle { 50% { transform: rotate(-12deg) translateX(4px); } }
@keyframes ring { to { transform: scale(1.6); opacity: 0; } }

#floaters { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.floater { position: absolute; font-weight: 800; color: var(--money); text-shadow: 0 2px 8px #000; animation: rise 1s ease-out forwards; white-space: nowrap; font-size: 15px; }
@keyframes rise { to { transform: translateY(-60px); opacity: 0; } }

#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 70; max-width: min(360px, calc(100vw - 32px)); }
.toast {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px;
  background: #141d2ff2; border: 1px solid var(--line2); box-shadow: 0 10px 30px #0009;
  animation: toast-in .3s ease-out; font-size: 12.5px;
}
.toast .ti { font-size: 22px; }
.toast b { display: block; font-size: 13px; }
.toast.good { border-color: var(--green-d); }
.toast.bad { border-color: #ff4d6d99; }
.toast.gold { border-color: #ffc547aa; }
.toast.out { animation: toast-out .3s forwards; }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(30px); opacity: 0; } }

/* --- Dialoge ----------------------------------------------------------- */
.modal { background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: 14px; padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px #000c; }
.modal::backdrop { background: #02050acc; backdrop-filter: blur(3px); }
.modal h2 { margin: 0 0 14px; font-family: var(--retro); font-weight: 400; font-size: 30px; color: var(--green); }
.modal label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.modal input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; color: var(--text); font: inherit; }
.modal input:focus { outline: none; border-color: var(--green); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.seg { display: flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-bottom: 16px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px; border-radius: 6px; color: var(--muted); font-weight: 600; }
.seg button.active { background: var(--panel2); color: var(--text); }
.form-note { font-size: 11.5px; color: var(--muted); margin: 0; }
.form-error { color: var(--red); font-size: 12.5px; min-height: 1em; margin: 8px 0 0; }
.offline-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.offline-list li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--bg2); border-radius: 8px; border: 1px solid var(--line); }
.offline-list b { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 12.5px; }


/* --- Landing ------------------------------------------------------------ */
.landing { display: none; }
body.landing-open .landing { display: flex; }
body.landing-open > .topbar, body.landing-open > .layout { display: none; }
.landing {
  position: relative; flex-direction: column; gap: 44px; min-height: 100vh; overflow: hidden;
  max-width: 1200px; margin: 0 auto; padding: 22px 24px 30px;
}
.ld-glow {
  position: absolute; inset: -20% -10% auto; height: 700px; pointer-events: none; z-index: -1;
  background: radial-gradient(600px 340px at 70% 30%, #39ff8818, transparent 70%), radial-gradient(500px 300px at 15% 10%, #4cc9f014, transparent 70%);
}
.ld-top { display: flex; justify-content: space-between; align-items: center; }
.ld-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding-top: 20px; }
.ld-kicker { color: var(--green); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 14px; }
.ld-copy h1 { font-family: var(--retro); font-weight: 400; font-size: clamp(44px, 6.4vw, 78px); line-height: .95; margin: 0 0 20px; letter-spacing: 1px; }
.ld-copy h1 span { color: var(--green); text-shadow: 0 0 22px #39ff8866; }
.ld-lead { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 540px; margin: 0 0 26px; }
.ld-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.big { padding: 13px 22px; font-size: 15px; border-radius: 10px; }
.btn.primary.big { box-shadow: 0 0 0 0 #39ff8855; animation: glow 1.8s ease-in-out infinite; }
.ld-note { color: var(--dim); font-size: 12px; margin: 16px 0 0; max-width: 520px; }
.ld-note b { color: var(--muted); }

.ld-monitor { display: flex; flex-direction: column; align-items: center; }
.ld-screen {
  width: 100%; aspect-ratio: 4 / 3; max-width: 460px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at center, #072314 0%, #03100a 80%);
  border: 14px solid #232c3f; border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 30px 70px #000c, inset 0 0 40px #000d, 0 0 0 1px #36425c;
  font-family: var(--retro); font-size: 21px; line-height: 1.05; color: var(--green); text-shadow: 0 0 6px #39ff88aa;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ld-screen::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 2px, #00000040 2px 3px); pointer-events: none; }
.ld-screen pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-all; display: inline; }
.ld-stand { width: 120px; height: 34px; background: linear-gradient(#2a3346, #1a2131); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }

.ld-eras { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.ld-eras::before { content: ''; position: absolute; left: 7%; right: 7%; top: 7px; height: 2px; background: linear-gradient(90deg, var(--green-d), var(--rp)); opacity: .6; }
.ld-eras li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); position: relative; text-align: center; }
.ld-eras li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--green); box-shadow: 0 0 10px #39ff8866; margin-bottom: 6px; }
.ld-eras b { font-family: var(--retro); font-size: 20px; font-weight: 400; color: var(--text); }

.ld-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ld-features article { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.ld-features span { font-size: 28px; }
.ld-features h3 { margin: 10px 0 6px; font-size: 14px; }
.ld-features p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.ld-foot { text-align: center; color: var(--dim); font-size: 11.5px; margin-top: auto; }

.form-gate { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--green-d); background: #39ff880d; border-radius: 9px; font-size: 12.5px; color: #b8f5d0; }
.form-gate:empty { display: none; }
.form-gate b { color: var(--green); }

@media (max-width: 900px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 0; }
  .ld-monitor { order: -1; }
  .ld-screen { width: min(100%, 340px); font-size: 16px; border-width: 10px; }
  .ld-features { grid-template-columns: 1fr 1fr; }
  .ld-eras { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
  .ld-eras::before { display: none; }
}
@media (max-width: 520px) {
  .landing { padding: 16px 16px 24px; gap: 32px; }
  .ld-features { grid-template-columns: 1fr; }
  .ld-cta .btn { flex: 1 1 100%; }
}


/* --- Feste Bildschirmgrößen: Code-Inhalt darf die Monitore nie aufdehnen --- */
.side, .main, .right { min-width: 0; }
.monitor { min-width: 0; }
.screen {
  width: 100%; min-width: 0; height: 190px; flex: none;
  contain: inline-size layout paint;
}
.code { min-width: 0; overflow-wrap: anywhere; }
.ld-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ld-copy, .ld-monitor { min-width: 0; }
.ld-monitor { width: 100%; }
.ld-screen {
  width: min(100%, 460px); max-width: none; height: auto; flex: none;
  contain: inline-size layout paint;
}
.ld-screen pre { min-width: 0; overflow-wrap: anywhere; }


/* --- Reiter rechts ------------------------------------------------------- */
.right-head { gap: 8px; }
.rtabs { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; flex: 1; min-width: 0; }
.rtabs button { flex: 1; border: 0; background: none; border-radius: 6px; padding: 5px 6px; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; font-weight: 600; }
.rtabs button.active { background: var(--panel2); color: var(--green); }
.rtab-body { display: flex; flex-direction: column; gap: 14px; }

/* --- Profil -------------------------------------------------------------- */
.pf-card { display: flex; gap: 12px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.pf-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--retro); font-size: 28px; color: #04150b; background: var(--green); box-shadow: 0 0 14px #39ff8855; flex: none; }
.pf-name { display: block; font-size: 15px; }
.pf-card small { color: var(--dim); font-size: 11px; }
.pf-note { margin: 0; font-size: 12px; color: var(--muted); }
.pf-sec { margin: 4px 0 -6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); }
.pf-rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pf-rows dt { color: var(--muted); }
.pf-rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-actions .btn { flex: 1 1 auto; font-size: 12px; padding: 7px 10px; }
.pf-danger { border: 1px solid #ff4d6d55; background: #ff4d6d0a; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-danger h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #ff8fa3; }
.pf-danger p { margin: 0; font-size: 11.5px; color: var(--muted); }
.pf-legal, .ld-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 11.5px; }
.pf-legal a, .ld-legal a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--dim); }
.pf-legal a:hover, .ld-legal a:hover { color: var(--green); border-color: var(--green); }
.pf-confirm { margin-top: 12px; }
.ld-foot p { margin: 0 0 8px; }
.ld-foot b { color: var(--muted); }

/* --- Tastatur ------------------------------------------------------------ */
.keyboard {
  width: 100%; min-width: 0; padding: 8px; border-radius: 12px; border: 1px solid #36425c;
  background: linear-gradient(#232b3d, #171e2c); box-shadow: 0 6px 18px #0008, inset 0 1px 0 #ffffff12;
  user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .06s, box-shadow .15s;
}
.keyboard:hover { box-shadow: 0 6px 18px #0008, 0 0 0 1px var(--green-d), inset 0 1px 0 #ffffff12; }
.keyboard:active { transform: translateY(1px); }
.kb-rows { display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.kb-row { display: flex; gap: 3px; justify-content: center; }
.kb-row:nth-child(3) { padding-left: 6px; } .kb-row:nth-child(4) { padding-left: 14px; }
.key {
  flex: 1 1 0; min-width: 0; height: 18px; display: grid; place-items: center; border-radius: 4px;
  background: linear-gradient(#3a4560, #2c3549); border-bottom: 2px solid #11161f; color: #9fb0cc;
  font-size: 9.5px; font-weight: 600; line-height: 1; transition: background .2s, color .2s, box-shadow .2s;
}
.key.wide { flex: 1.6 1 0; }
.key.space { flex: 6 1 0; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--green); }
.key.hit { animation: keyhit .28s ease-out; }
@keyframes keyhit {
  0% { background: var(--green); color: #04150b; box-shadow: 0 0 10px var(--green); transform: translateY(1px); border-bottom-width: 1px; }
  100% { }
}


/* --- Seitenleiste als Akkordeon ------------------------------------------- */
.right-head > span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1.5px; }
.acc { border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); overflow: hidden; flex: none; }
.acc.open { border-color: var(--line2); background: transparent; }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: var(--panel2);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); text-align: left;
}
.acc-head > span:first-child { flex: 1; min-width: 0; }
.acc-head small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); margin-left: 6px; }
.acc-head:hover { color: var(--text); }
.acc.open .acc-head { color: var(--green); cursor: default; }
.acc-chev { transition: transform .2s; font-size: 11px; }
.acc.open .acc-chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 12px; flex-direction: column; gap: 12px; }
.acc.open .acc-body { display: flex; animation: acc-in .2s ease-out; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }
.acc .compute-card { border: 0; padding: 0; background: none; }
.acc .ql-open { margin: 0; align-self: flex-end; }
.q-badge.inline { position: static; flex: none; }
#quests { margin-top: 0; }

.right-strip { display: none; }
body.right-collapsed .right-strip { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.right-strip button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 34px; padding: 10px 0;
  border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px; color: var(--muted);
}
.right-strip button:hover { border-color: var(--green-d); color: var(--text); }
.right-strip button.active { border-color: var(--green-d); }

/* Auftragsübersicht als Reiter */
.ql-seg { max-width: 360px; }
#tab-quests .ql-active { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card .prod .qty { display: inline-block; color: var(--text); background: #ffffff10; border-radius: 4px; padding: 0 5px; margin-right: 2px; font-weight: 700; }


/* --- Landing: Überschriften & FAQ ------------------------------------------ */
.ld-h2, .ld-faq h2 { font-family: var(--retro); font-weight: 400; font-size: 30px; color: var(--text); margin: 0 0 -26px; letter-spacing: 1px; }
.ld-faq { display: flex; flex-direction: column; gap: 8px; max-width: 820px; width: 100%; margin: 0 auto; }
.ld-faq h2 { margin: 0 0 6px; }
.ld-faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; }
.ld-faq details[open] { border-color: var(--line2); }
.ld-faq summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 13.5px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: '+'; color: var(--green); font-weight: 800; }
.ld-faq details[open] summary::after { content: '−'; }
.ld-faq p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 200; padding: 12px 16px; border-radius: 10px; background: #ff4d6d22; border: 1px solid var(--red); color: var(--text); text-align: center; }

.deficit-banner { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--red); background: #ff4d6d14; font-size: 12.5px; color: #ffd0d8; animation: pulse-red 1.6s infinite; }
.deficit-banner b { color: #fff; }

/* --- Hacking & Cyber-Security ------------------------------------------- */
.subnet.meta.hack { border-color: #7a2a3a; background: linear-gradient(180deg, #2a0f18cc, #1a0a10aa); }
.subnet.meta.hack .sn-sw { background: var(--red); color: #1a0508; }
.subnet.meta.hack .sn-head b { color: #ffb3c0; }
.tnode.meta.hack { border-color: #7a2a3a; background: linear-gradient(180deg, #2a1220, #1d0d16); }
.tnode.meta.hack.affordable { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 22px #ff4d6d40; }
.tnode.meta.hack.affordable .led, .tnode.meta.hack.done .led { background: var(--red); box-shadow: 0 0 8px var(--red); }
.tnode.meta.hack.done { border-color: var(--red); background: linear-gradient(180deg, #3a1424, #2a0f1a); }
.tnode.meta.hack.done::after { background: var(--red); box-shadow: 0 0 8px #ff4d6d66; }
.tnode.sec { border-color: #2a5a7a; }
.tnode.sec.done { border-color: var(--data); background: linear-gradient(180deg, #0f2233, #0b1a26); }
.tnode.sec.done::after { background: var(--data); }
.event.grid { filter: drop-shadow(0 0 16px #ff4d6d); animation: ev-in .4s ease-out, wiggle .3s ease-in-out .4s infinite; font-size: 50px; }

.event.bug { filter: drop-shadow(0 0 14px #b98cff); animation: ev-in .4s ease-out, wiggle .45s ease-in-out .4s infinite; }

/* --- Responsiv --------------------------------------------------------- */
@media (max-width: 1320px) {
  .layout { grid-template-columns: 290px minmax(0, 1fr); }
  .side { grid-column: 1; grid-row: 1; position: static; }
  .right { grid-column: 1; grid-row: 2; position: static; max-height: none; }
  .main { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  body.right-collapsed .layout { grid-template-columns: 290px minmax(0, 1fr); }
  body.right-collapsed .right { flex-direction: row; justify-content: space-between; padding: 8px; }
  body.right-collapsed .right-strip { flex-direction: row; order: -1; }
  body.right-collapsed .right-strip button { flex-direction: row; width: auto; padding: 6px 12px; }
  body.right-collapsed .rs-label { writing-mode: horizontal-tb; transform: none; }
}
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
  .resources { order: 3; flex-basis: 100%; }
  .res { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 40px; }
  .side, .right, .main { grid-column: 1; grid-row: auto; }
  body.right-collapsed .layout { grid-template-columns: minmax(0, 1fr); }
  .res-quests { flex: 0 0 auto; }
  .screen { height: 130px; }
  .mini-stats { display: none; }
  .topbar { padding: 8px 16px; gap: 10px; }
  .brand { font-size: 24px; }
  .res { padding: 5px 8px; gap: 6px; }
  .res-power .bar { width: 100%; }
  .res b { font-size: 14px; }
  .grid { grid-template-columns: 1fr; }
  .techtree-wrap { max-height: 70vh; }
}

/* --- Rechtsseiten ---------------------------------------------------------- */
.legal { max-width: 820px; margin: 0 auto; padding: 22px 24px 40px; }
.legal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
.legal-top .brand { color: var(--text); text-decoration: none; }
.legal-top .btn { text-decoration: none; }
.legal-main { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; line-height: 1.65; font-size: 13.5px; }
.legal-main h1 { font-family: var(--retro); font-weight: 400; font-size: 40px; color: var(--green); margin: 0 0 12px; }
.legal-main h2 { font-size: 15px; margin: 26px 0 8px; color: var(--text); }
.legal-main p, .legal-main li { color: #b9c6db; }
.legal-main ul { padding-left: 20px; }
.legal-main a { color: var(--green); }
.legal-main code { background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.legal-badge { background: #39ff880d; border: 1px dashed var(--green-d); border-radius: 10px; padding: 10px 14px; }
.legal-badge b { color: var(--green); }
mark.todo { background: #ffc5472b; color: var(--money); border-radius: 4px; padding: 0 4px; }
.legal-foot { margin-top: 18px; text-align: center; color: var(--dim); font-size: 11.5px; }
.legal-foot p { margin: 8px 0 0; }
@media (max-width: 600px) { .legal { padding: 16px; } .legal-main { padding: 18px 16px; } .legal-main h1 { font-size: 32px; } }

/* --- Spielhandbuch ---------------------------------------------------------- */
.legal.hb { max-width: 1180px; }
.hb-lead { font-size: 14px; }
.hb-search input { width: 100%; padding: 11px 14px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); font: inherit; margin: 6px 0 14px; }
.hb-search input:focus { outline: none; border-color: var(--green); }
.hb-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hb-toc a { padding: 5px 12px; border: 1px solid var(--line2); border-radius: 20px; text-decoration: none; font-size: 12px; color: var(--muted) !important; }
.hb-toc a:hover { border-color: var(--green); color: var(--green) !important; }
.hb-part { margin-top: 34px; }
.hb-part > h2 { font-family: var(--retro); font-weight: 400; font-size: 32px; color: var(--green); margin: 0 0 8px; }
.hb-group h3 { font-size: 15px; margin: 22px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.hb-group h3 small { color: var(--dim); font-weight: 400; font-size: 11.5px; }
.hb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.hb-table th { text-align: left; padding: 9px 12px; background: var(--panel2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); }
.hb-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: #b9c6db; }
.hb-table tr:last-child td { border-bottom: 0; }
.hb-table tr:target td { background: #39ff8812; }
.hb-table td b { color: var(--text); display: block; }
.hb-table td small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.hb-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-tag { display: inline-block; font-size: 10px; padding: 0 6px; border-radius: 4px; margin-top: 3px; }
.hb-tag.sec { background: #4cc9f022; color: var(--data); }
.hb-facts { display: grid; grid-template-columns: 220px 1fr; gap: 10px 18px; margin: 12px 0 18px; }
.hb-facts dt { font-weight: 800; color: var(--text); }
.hb-facts dd { margin: 0; color: #b9c6db; }
.hb-cta { text-align: center; margin-top: 30px; }
.hb-cta .btn, .legal-top .btn.primary { text-decoration: none; color: #04150b !important; }
@media (max-width: 700px) { .hb-facts { grid-template-columns: 1fr; gap: 4px; } .hb-facts dd { margin-bottom: 10px; } }