:root {
  --bg: #04121c;
  --bg2: #06192a;
  --panel: #0a2032;
  --panel2: #0e2a40;
  --line: #15384f;
  --line2: #1f4b68;
  --text: #e2f1fa;
  --muted: #86a8bd;
  --dim: #4d6e85;
  --sea: #34e0c0;
  --sea-d: #179c86;
  --coral: #ff8a5c;
  --money: #ffc94d;
  --cool: #8fdcff;
  --xp: #c9a2ff;
  --data: #a6e35a;
  --pearl: #ffd6ea;
  --red: #ff5d73;
  --radius: 14px;
  --font: 'Nunito', system-ui, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, #0e3b4a55, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #10305a44, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #031019 100%);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.5 var(--font);
  min-height: 100vh;
  overflow-x: hidden;
}
body::after {
  /* dezente Lichtreflexe wie unter Wasser */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    radial-gradient(60px 18px at 20% 30%, #34e0c00a, transparent 70%),
    radial-gradient(90px 22px at 70% 60%, #8fdcff0a, transparent 70%),
    radial-gradient(70px 20px at 40% 85%, #34e0c008, transparent 70%);
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
b, strong { font-weight: 800; }

/* --- Kopfzeile --------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: #04121ce6; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: .5px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 14px #34e0c033; }
.brand em { font-style: normal; color: var(--sea); text-shadow: 0 0 14px #34e0c055; }
.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: 12px;
  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: #ff9aa8; }
.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); font-family: var(--display); font-weight: 600; }
.res-xp b { color: var(--xp); }
.res-data b { color: var(--data); }
.res-cool b { color: var(--cool); font-size: 14px; }
.res-cool .bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin-top: 4px; overflow: hidden; width: 120px; }
.res-cool .bar i { display: block; height: 100%; width: 0; background: var(--cool); transition: width .3s; }
.res-cool.short { border-color: var(--red); animation: pulse-red 1.2s infinite; }
.res-cool.short b { color: var(--red); }
.res-cool.short .bar i { background: var(--red); }
@keyframes pulse-red { 50% { box-shadow: 0 0 0 3px #ff5d7333; } }

.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(--sea); 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: 10px;
  padding: 7px 14px; font-weight: 800; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--sea-d); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--sea); color: #03241e; border-color: var(--sea); }
.btn.primary:hover { background: #6cf0d6; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #ff5d7388; color: var(--red); background: transparent; }
.btn.danger:hover { background: #ff5d7318; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- Layout ------------------------------------------------------------ */
.layout {
  position: relative; z-index: 1;
  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: 12px; }
.main { padding: 0; min-width: 0; overflow: hidden; }

.era { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--sea); }
.era small { font-family: var(--font); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }

/* --- Angelplatz (Szene) ---------------------------------------------------- */
.spot {
  display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0;
  background: linear-gradient(#123650, #0b2438); border: 1px solid #23506e; border-radius: 18px;
  padding: 8px 8px 9px; box-shadow: 0 10px 30px #0008, inset 0 1px 0 #ffffff14;
  user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .06s;
}
.spot:active { transform: scale(.985); }
.spot-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.spot-foot b { color: var(--money); font-size: 15px; letter-spacing: 0; text-transform: none; font-family: var(--display); font-weight: 600; }

.scene {
  --sky1: #ffd59e; --sky2: #a7dcea; --water1: #3a8a73; --water2: #173f34; --sun: #fff1b8;
  position: relative; display: block; width: 100%; height: 200px; overflow: hidden; border-radius: 12px;
  contain: layout paint; text-align: left; isolation: isolate;
}
.scene[data-era="1"] { --sky1: #8fd0ff; --sky2: #def3ff; --water1: #2f86b6; --water2: #15496d; --sun: #fffbe0; }
.scene[data-era="2"] { --sky1: #6dbdf0; --sky2: #eaf7ff; --water1: #1d72a0; --water2: #0b3a5a; --sun: #fffbe0; }
.scene[data-era="3"] { --sky1: #4a86ba; --sky2: #b4d9f2; --water1: #10527f; --water2: #05264a; --sun: #f6fbff; }
.scene[data-era="4"] { --sky1: #ff8f6b; --sky2: #ffd98a; --water1: #1c5a85; --water2: #08203c; --sun: #fff0c2; }
.scene[data-era="5"] { --sky1: #0c2d48; --sky2: #16557c; --water1: #082842; --water2: #010a13; --sun: #9fe8ff; }
.scene[data-era="6"] { --sky1: #170b33; --sky2: #47308a; --water1: #1c1550; --water2: #06041a; --sun: #ffe6ff; }

.scene .sky { position: absolute; inset: 0 0 48% 0; background: linear-gradient(var(--sky1), var(--sky2)); transition: background .8s; }
.scene .sun {
  position: absolute; right: 14%; top: 18%; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 30px 8px color-mix(in srgb, var(--sun) 55%, transparent); transition: opacity .6s;
}
.scene[data-era="5"] .sun, .scene[data-era="6"] .sun { width: 24px; height: 24px; right: 20%; box-shadow: 0 0 22px 4px color-mix(in srgb, var(--sun) 40%, transparent); }
.scene .cloud { position: absolute; height: 14px; border-radius: 10px; background: #ffffffd0; filter: blur(1px); opacity: 0; transition: opacity .8s; }
.scene .cloud::before { content: ''; position: absolute; left: 22%; bottom: 6px; width: 46%; height: 16px; border-radius: 50%; background: inherit; }
.scene .cloud.c1 { left: 8%; top: 16%; width: 70px; animation: drift 38s linear infinite; }
.scene .cloud.c2 { left: 46%; top: 30%; width: 54px; animation: drift 52s linear infinite reverse; }
@keyframes drift { 50% { transform: translateX(40px); } }
.scene[data-weather="cloudy"] .cloud, .scene[data-weather="drizzle"] .cloud, .scene[data-weather="fog"] .cloud, .scene[data-weather="breeze"] .cloud { opacity: .9; }
.scene[data-weather="storm"] .cloud { opacity: 1; background: #5a6a7a; }
.scene[data-weather="cloudy"] .sun, .scene[data-weather="drizzle"] .sun { opacity: .35; }
.scene[data-weather="storm"] .sun, .scene[data-weather="fog"] .sun { opacity: 0; }
.scene[data-weather="breeze"] .cloud { animation-duration: 9s; }

.scene .water {
  position: absolute; inset: 52% 0 0 0; overflow: hidden;
  background: linear-gradient(var(--water1), var(--water2)); transition: background .8s;
}
.scene .water::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #ffffff55; }
.scene .wave {
  position: absolute; left: -50%; width: 200%; height: 12px; opacity: .35;
  background: radial-gradient(14px 4px at 50% 50%, #ffffff 30%, transparent 60%) 0 0 / 46px 12px repeat-x;
  animation: waves 7s linear infinite;
}
.scene .wave.w1 { top: 10%; }
.scene .wave.w2 { top: 38%; opacity: .22; animation-duration: 11s; animation-direction: reverse; }
.scene .wave.w3 { top: 70%; opacity: .14; animation-duration: 15s; }
.scene[data-weather="breeze"] .wave, .scene[data-weather="storm"] .wave { animation-duration: 2.5s; opacity: .5; }
@keyframes waves { to { transform: translateX(46px); } }

/* Wetter-Overlays */
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; transition: opacity .6s, background .6s; opacity: 0; }
.scene[data-weather="drizzle"]::after, .scene[data-weather="storm"]::after {
  opacity: 1;
  background: repeating-linear-gradient(105deg, transparent 0 9px, #ffffff2e 9px 10px, transparent 10px 23px) 0 0 / 120px 120px;
  animation: rain .5s linear infinite;
}
.scene[data-weather="storm"]::after { background-color: #0a142466; animation-duration: .3s; }
.scene[data-weather="fog"]::after { opacity: 1; background: linear-gradient(180deg, #e6eef599, #d3e0ea66 60%, #c8d6e033); }
.scene[data-weather="sun"]::after { opacity: 1; background: radial-gradient(160px 90px at 86% 20%, #fff3c255, transparent 70%); }
@keyframes rain { to { background-position: -24px 120px; } }
.scene[data-weather="storm"] .sky { animation: flash 7s infinite; }
@keyframes flash { 0%, 91%, 95%, 100% { filter: none; } 92%, 94% { filter: brightness(2.2); } }

/* Rute, Schnur, Pose */
.scene .rod { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; }
.scene .rod-pole { stroke: #6b4523; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; fill: none; }
.scene .rod-line { stroke: #ffffffaa; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.scene .bobber {
  position: absolute; left: 64%; top: 60%; width: 12px; height: 18px; margin: -9px 0 0 -6px; z-index: 5;
  border-radius: 50% 50% 45% 45%; background: linear-gradient(#ff4d4d 0 50%, #fff 50%);
  box-shadow: 0 2px 4px #0006; animation: bob 2.4s ease-in-out infinite;
}
.scene .bobber.bite { animation: bite .5s ease-out, bob 2.4s ease-in-out .5s infinite; }
@keyframes bob { 50% { transform: translateY(2px) rotate(4deg); } }
@keyframes bite { 30% { transform: translateY(9px) scaleY(.7); opacity: .6; } }
.scene .ripple { position: absolute; left: 64%; top: 61%; width: 30px; height: 9px; margin: -4px 0 0 -15px; border: 2px solid #ffffffaa; border-radius: 50%; opacity: 0; z-index: 4; }
.scene .ripple.go { animation: ripple .8s ease-out; }
@keyframes ripple { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.6); } }
.scene .jumps { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.scene .jump { position: absolute; top: 58%; font-size: 24px; line-height: 1; animation: jump .9s ease-out forwards; filter: drop-shadow(0 3px 4px #0007); }
@keyframes jump {
  0% { transform: translate(0, 10px) rotate(30deg) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translate(-14px, -58px) rotate(-12deg) scale(1.15); }
  100% { transform: translate(-28px, 6px) rotate(-60deg) scale(.8); opacity: 0; }
}

.scene .catchlog {
  position: absolute; left: 7px; top: 7px; margin: 0; padding: 4px 8px; list-style: none; z-index: 7;
  display: flex; flex-direction: column; gap: 1px; max-width: 74%;
  background: #04121c99; border-radius: 9px; backdrop-filter: blur(2px);
  font-size: 11.5px; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px #000c;
}
.scene .catchlog:empty { display: none; }
.scene .catchlog li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .6; }
.scene .catchlog li:nth-last-child(2) { opacity: .75; }
.scene .catchlog li:last-child { opacity: 1; animation: log-in .3s ease-out; }
.scene .catchlog b { font-weight: 800; }
.scene .catchlog em { font-style: normal; font-size: 9px; font-weight: 800; margin-left: 5px; padding: 0 4px; border-radius: 3px; vertical-align: 1px; }
.scene .catchlog em.new { background: var(--money); color: #3a2a00; text-shadow: none; }
.scene .catchlog em.rec { background: var(--sea); color: #03241e; text-shadow: none; }
@keyframes log-in { from { transform: translateX(-8px); opacity: 0; } }
.scene .weather-chip { position: absolute; right: 7px; bottom: 7px; z-index: 7; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 9px; background: #04121caa; color: #dff3ff; }

/* Rolle */
.reel {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 8px 12px;
  border-radius: 14px; border: 1px solid #23506e; text-align: left;
  background: linear-gradient(#123650, #0b2438); 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;
}
.reel:hover { box-shadow: 0 6px 18px #0008, 0 0 0 1px var(--sea-d), inset 0 1px 0 #ffffff12; }
.reel:active { transform: translateY(1px); }
.reel-disc {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8f3fa, #8aa4b6 45%, #3c5466 75%, #24394a);
  box-shadow: inset 0 0 0 3px #1c2f3d, 0 3px 8px #0008; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.reel-disc::before { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: #2a4152; box-shadow: inset 0 1px 2px #000a; }
.reel-handle { position: absolute; left: 50%; top: -3px; width: 4px; height: 20px; margin-left: -2px; background: #c9d6df; border-radius: 2px; }
.reel-handle::after { content: ''; position: absolute; left: -5px; top: -6px; width: 14px; height: 10px; border-radius: 5px; background: var(--coral); box-shadow: 0 1px 3px #0008; }
.reel-text { display: flex; flex-direction: column; line-height: 1.2; }
.reel-text b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--sea); }
.reel-text small { color: var(--muted); font-size: 11px; }

/* Wetter */
.weather { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); font-size: 12px; }
.weather .wx-now b { color: var(--cool); }
.weather .wx-next { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }

.hint {
  border: 1px dashed var(--sea-d); border-radius: 12px; padding: 10px 12px;
  background: #34e0c00a; font-size: 12.5px; color: #bff3e8;
}
.hint:empty { display: none; }
.hint b { color: var(--sea); }

.buffs { display: flex; flex-direction: column; gap: 6px; }
.buffs:empty { display: none; }
.buff { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; 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(--sea); }
.buff.bad { border-color: #ff5d7377; }
.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: 800; white-space: nowrap; border-radius: 10px 10px 0 0;
}
.tabs button:hover { color: var(--text); background: #ffffff06; }
.tabs button.active { color: var(--sea); border-bottom-color: var(--sea); }
.tabs .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--sea); color: #03241e; 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 14px; color: var(--muted); font-size: 12.5px; }

/* --- Ausrüstung -------------------------------------------------------- */
.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: 8px; padding: 4px 10px; font-weight: 800; }
.buymode button.active { background: var(--sea); color: #03241e; border-color: var(--sea); }

.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 {
  position: relative;
  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: 13px; padding: 12px;
  transition: border-color .15s, background .15s;
}
.card .ico { grid-row: 1 / 3; font-size: 28px; width: 46px; height: 46px; display: grid; place-items: center; background: #0006; border-radius: 12px; }
.cat-cool .card .ico { background: linear-gradient(#8fdcff22, #0006); }
.cat-fish .card .ico { background: linear-gradient(#34e0c01f, #0006); }
.cat-trade .card .ico { background: linear-gradient(#a6e35a1c, #0006); }
.cat-xp .card .ico { background: linear-gradient(#c9a2ff1f, #0006); }
.card .name { font-weight: 800; font-size: 14px; align-self: end; }
.card .owned { grid-row: 1 / 3; grid-column: 3; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--sea); align-self: center; text-align: right; min-width: 40px; margin-right: 18px; }
.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(--cool); } .card .prod .neg { color: #ff9aa8; }
.card .prod .r { color: var(--xp); } .card .prod .d { color: var(--data); }
.card .prod .qty { display: inline-block; color: var(--text); background: #ffffff10; border-radius: 4px; padding: 0 5px; margin-right: 2px; font-weight: 800; }
.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(--sea-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: 10px; padding: 7px 10px; font-weight: 800; font-size: 12.5px;
}
.card .buy .c { color: var(--money); font-variant-numeric: tabular-nums; }
.card.can .buy { border-color: var(--sea-d); background: #34e0c012; }
.card.can .buy:hover { background: #34e0c024; border-color: var(--sea); }
.card:not(.can) .buy { cursor: not-allowed; color: var(--dim); }
.card:not(.can) .buy .c { color: #ffc94d77; }
.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: #ff9aa8; }
.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.pop { animation: pop .25s; }
@keyframes pop { 40% { transform: scale(1.02); border-color: var(--sea); } }
.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: 6px; color: var(--dim); font-size: 13px; opacity: 0;
  transition: opacity .15s;
}
.card:hover .sell:not(:disabled) { opacity: 1; }
.card .sell:hover { color: #ff9aa8; border-color: #ff5d7388; }
.card .sell:disabled { display: none; }
.card.blocked .buy { border-color: #ff5d7366; background: #ff5d7310; color: #ff9aa8; cursor: not-allowed; }
.card.blocked .buy .c { color: #ff9aa8; }

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

/* --- Techtree als Seekarte ------------------------------------------------ */
.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: #e9dcb90d; border: 1px solid #3a4b52; border-radius: 10px;
}
.net-status .prompt { color: #f0d9a0; font-weight: 800; }
.net-status .ns-item b { color: var(--text); }
.net-status .ns-item.ready { color: var(--sea); }
.net-status .ns-hint { margin-left: auto; color: var(--dim); }
.techtree-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: 12px; max-height: calc(100vh - 220px);
  background:
    linear-gradient(#ffffff06 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 60px 60px,
    radial-gradient(400px 220px at 20% 30%, #12415a55, transparent 70%),
    radial-gradient(500px 260px at 70% 70%, #0f3a5655, transparent 70%),
    linear-gradient(180deg, #05182a, #031220);
  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: #1d3d55; stroke-width: 2; stroke-linejoin: round; }
.techtree .links path.idle { stroke: #3a6280; stroke-dasharray: 2 5; }
.techtree .links path.ready { stroke: var(--sea); stroke-opacity: .75; stroke-dasharray: 7 6; animation: dash .9s linear infinite; }
.techtree .links path.up { stroke: #2a8fb0; stroke-width: 3; stroke-dasharray: 10 4; filter: drop-shadow(0 0 3px #8fdcff55); }
@keyframes dash { to { stroke-dashoffset: -13; } }
.techtree .packets circle { fill: var(--money); filter: drop-shadow(0 0 4px var(--money)); }
.techtree .packets .fishdot { filter: drop-shadow(0 1px 2px #000a); }

.subnet {
  position: absolute; top: 14px; border: 1px dashed #2a4e66; border-radius: 18px;
  background: linear-gradient(180deg, #0c2b42cc, #071c2e88);
}
.subnet.z0 { background: linear-gradient(180deg, #123f3acc, #0a2a2788); border-color: #2c6a5c; }
.subnet.z1 { background: linear-gradient(180deg, #0f3a52cc, #0a263a88); }
.subnet.z4 { background: linear-gradient(180deg, #14304acc, #0a1d3088); }
.subnet.z5 { background: linear-gradient(180deg, #06182acc, #020a1488); border-color: #1d3a54; }
.subnet.z6 { background: linear-gradient(180deg, #1b1340cc, #0c0824aa); border-color: #4a3a86; }
.sn-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 0; font-family: var(--display); font-weight: 600; font-size: 19px; color: #cfe6f5; }
.sn-head small { font-family: var(--font); font-size: 11px; color: var(--dim); margin-left: auto; text-transform: uppercase; letter-spacing: 1px; }
.sn-sw { font-family: var(--font); font-weight: 800; font-size: 10.5px; color: #03241e; background: var(--sea-d); border-radius: 5px; padding: 1px 6px; 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, #0f2a40, #0b2032); border: 1px solid #22506e; border-radius: 12px; 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: 10px; height: 10px; margin-top: -5px; background: #1d3d55; border: 2px solid #3a6280; border-radius: 50%; }
.tnode .port.l { left: -6px; } .tnode .port.r { right: -6px; }
.tnode .tn-head { display: flex; gap: 7px; align-items: center; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.tnode .tn-name { overflow: hidden; text-overflow: ellipsis; }
.tnode .tn-ico { font-size: 15px; }
.tnode .led { width: 8px; height: 8px; border-radius: 50%; background: #3a2030; flex: none; }
.tnode .tn-ip { color: var(--dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }
.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; font-weight: 700; }
.tnode .tn-cost .r { color: var(--xp); } .tnode .tn-cost .d { color: var(--data); }
.tnode .tn-cost .short { color: #ff9aa8; }
.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(--sea); box-shadow: 0 0 0 1px var(--sea), 0 0 22px #34e0c040; cursor: pointer; }
.tnode.affordable .led { background: var(--sea); box-shadow: 0 0 8px var(--sea); animation: blink .8s steps(1) infinite; }
.tnode.affordable .port { border-color: var(--sea); }
.tnode.affordable:hover { transform: translateY(-2px); }
.tnode.done { background: linear-gradient(180deg, #0f3446, #0a2534); border-color: #2a8fb0; cursor: default; }
.tnode.done .led { background: var(--cool); box-shadow: 0 0 8px var(--cool); }
.tnode.done .port { background: #2a8fb0; border-color: var(--cool); }
.tnode.done .tn-cost { display: none; }
.tnode.done::after { content: '⚓ ERREICHT'; position: absolute; top: -9px; right: 12px; font-size: 9px; font-weight: 800; line-height: 15px; color: #03202e; background: var(--cool); padding: 0 6px; border-radius: 4px; box-shadow: 0 0 8px #8fdcff55; }
.tnode.ping { animation: ping .9s ease-out; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #34e0c0aa; } 100% { box-shadow: 0 0 0 26px #34e0c000; } }
@keyframes blink { 50% { opacity: 0; } }

/* Perlenriff */
.subnet.meta { border-color: #7a4a72; background: linear-gradient(180deg, #2a1430cc, #1a0c22aa); }
.subnet.meta .sn-sw { background: var(--pearl); color: #3a1030; }
.subnet.meta .sn-head b { color: #ffd6ea; }
.tnode.meta { border-color: #6a3f66; background: linear-gradient(180deg, #2a1632, #1d0f24); }
.tnode.meta.affordable { border-color: var(--pearl); box-shadow: 0 0 0 1px var(--pearl), 0 0 22px #ffd6ea40; }
.tnode.meta.affordable .led { background: var(--pearl); box-shadow: 0 0 8px var(--pearl); }
.tnode.meta.done { background: linear-gradient(180deg, #3a1e44, #2a1432); border-color: var(--pearl); }
.tnode.meta.done .led { background: var(--pearl); box-shadow: 0 0 8px var(--pearl); }
.tnode.meta.done::after { content: '🦪 GEBORGEN'; background: var(--pearl); color: #3a1030; box-shadow: 0 0 8px #ffd6ea66; }
.tnode .tn-cost .q { color: var(--pearl); }
.tnode .tn-cost .q.short { color: #ff9aa8; }
.tnode .tn-cost .cyc { color: var(--dim); }
.net-status .ns-item.omega { color: var(--pearl); }

/* Raubfischerei & Meeresschutz */
.subnet.meta.poach { border-color: #7a2a3a; background: linear-gradient(180deg, #2a0f18cc, #1a0a10aa); }
.subnet.meta.poach .sn-sw { background: var(--red); color: #1a0508; }
.subnet.meta.poach .sn-head b { color: #ffb3c0; }
.tnode.meta.poach { border-color: #7a2a3a; background: linear-gradient(180deg, #2a1220, #1d0d16); }
.tnode.meta.poach.affordable { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 22px #ff5d7340; }
.tnode.meta.poach.affordable .led, .tnode.meta.poach.done .led { background: var(--red); box-shadow: 0 0 8px var(--red); }
.tnode.meta.poach.done { border-color: var(--red); background: linear-gradient(180deg, #3a1424, #2a0f1a); }
.tnode.meta.poach.done::after { content: '☠️ AKTIV'; background: var(--red); color: #1a0508; box-shadow: 0 0 8px #ff5d7366; }
.tnode.sec { border-color: #3a7a4a; }
.tnode.sec.done { border-color: var(--data); background: linear-gradient(180deg, #13301e, #0c2416); }
.tnode.sec.done::after { background: var(--data); color: #142a04; }

/* --- 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; }
.harbor-card { 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; font-weight: 800; }
.cc-head b { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--sea); line-height: 1.05; text-shadow: 0 0 14px #34e0c044; }
.cc-head b small { font-size: 15px; color: var(--sea-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: #ff9aa8 !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(--cool); transition: width .3s; }
.cc-bar.short i { background: var(--red); }
.cc-sub { font-size: 11px; color: var(--dim); }

#quests { display: flex; flex-direction: column; gap: 10px; }
.quest { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; 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: #2a5a6a; background: linear-gradient(180deg, #0f3340, #0d2a3a); }
.quest.done { border-color: var(--sea); box-shadow: 0 0 18px #34e0c026; }
.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: 5px; background: #ffffff0d; color: var(--dim); white-space: nowrap; }
.quest.story .q-tag { background: #34e0c022; color: var(--sea); }
.q-reroll { border: 1px solid var(--line2); background: none; border-radius: 6px; width: 22px; height: 20px; padding: 0; line-height: 1; color: var(--muted); }
.q-reroll:hover:not(:disabled) { color: var(--sea); border-color: var(--sea-d); }
.q-reroll:disabled { opacity: .35; cursor: not-allowed; }
.q-title { font-size: 14px; font-family: var(--display); font-weight: 600; }
.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(--sea-d), var(--sea)); 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 #34e0c033; } }
.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(--sea); } }
.quest.done-all { text-align: center; color: var(--sea); border-style: dashed; }

.q-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--sea); color: #03241e; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.q-badge:empty { display: none; }
.q-badge.inline { position: static; flex: none; }

/* Rechte Leiste ein-/ausklappen */
.right-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 -6px; }
.right-head > span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; }
.right-toggle { border: 1px solid var(--line2); background: var(--panel2); border-radius: 7px; width: 28px; height: 24px; padding: 0; color: var(--muted); font-size: 14px; line-height: 1; }
.right-toggle:hover { color: var(--sea); border-color: var(--sea-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; }
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: 9px; color: var(--muted);
}
.right-strip button:hover { border-color: var(--sea-d); color: var(--text); }
.right-strip button.active { border-color: var(--sea-d); }
.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); font-weight: 800; }

/* Seitenleiste als Akkordeon */
.acc { border: 1px solid var(--line); border-radius: 12px; 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: 800; 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(--sea); 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); } }

/* Auftragsübersicht */
.ql-open { align-self: flex-end; border: 1px solid var(--line2); background: none; border-radius: 7px; padding: 2px 8px; font-size: 11px; color: var(--muted); }
.ql-open:hover { color: var(--sea); border-color: var(--sea-d); }
.ql-seg { max-width: 360px; }
.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(240px, 1fr)); gap: 10px; }
.ql-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg2); margin-bottom: 6px; font-size: 12px; }
.ql-row.next { opacity: .55; }
.ql-row.done { border-color: #179c8655; }
.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(--sea); font-weight: 800; }
.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; }

/* --- Legende (Neustart) ---------------------------------------------------- */
.prestige { max-width: 640px; margin: 10px auto; text-align: center; }
.prestige .orb { font-size: 70px; filter: drop-shadow(0 0 22px #8fdcffaa); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.prestige h2 { font-family: var(--display); font-size: 34px; font-weight: 600; margin: 8px 0; color: var(--cool); }
.prestige p { color: var(--muted); }
.prestige .gain { font-size: 22px; margin: 16px 0; font-family: var(--display); }
.prestige .gain b { color: var(--pearl); }
.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: 9px; background: var(--panel2); font-size: 12px; cursor: pointer; }
.bot-toggle input { accent-color: var(--sea); }

/* --- Fangbuch, Erfolge & Statistik ------------------------------------- */
.ach-summary { margin: 0 0 10px; color: var(--muted); }
.ach-summary b { color: var(--sea); }
.ach-grid, .fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ach, .fb-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.ach .ai, .fb-card .fi { font-size: 26px; }
.ach b, .fb-card b { display: block; font-size: 12.5px; }
.ach small, .fb-card small { color: var(--muted); font-size: 11px; }
.ach.locked { opacity: .4; }
.ach.locked .ai { filter: grayscale(1); }
.ach.got { border-color: var(--sea-d); }
.fb-era h3 { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.fb-era h3 small { text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; }
.fb-card .fi { filter: brightness(0) opacity(.45); }
.fb-card:not(.got) b { color: var(--dim); }
.fb-card.got { border-color: #2a6f88; background: linear-gradient(180deg, #10334a, #0c283a); }
.fb-card.got .fi { filter: drop-shadow(0 2px 4px #0008); }

.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: 12px; padding: 10px 12px; }
.stat small { color: var(--muted); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.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: 12px; padding: 12px; }
.acct-box p { margin: 0; flex: 1 1 260px; color: var(--muted); font-size: 12.5px; }

/* --- 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: 46px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 14px #ffc94d);
  animation: ev-in .4s ease-out, swim 2s ease-in-out .4s infinite;
}
.event.goldfish::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #ffc94d88; animation: ring 1.4s ease-out infinite; }
.event.gull { filter: drop-shadow(0 0 14px #ff5d73); animation: ev-in .4s ease-out, flap .35s ease-in-out .4s infinite; }
.event.crisis { filter: drop-shadow(0 0 16px #ff5d73); animation: ev-in .4s ease-out, flap .3s ease-in-out .4s infinite; font-size: 50px; }
.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 swim { 50% { transform: translate(8px, -10px) rotate(-8deg); } }
@keyframes flap { 50% { transform: rotate(-12deg) translateY(-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: 12px;
  background: #0e2a40f2; 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(--sea-d); }
.toast.bad { border-color: #ff5d7399; }
.toast.gold { border-color: #ffc94daa; }
.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: 16px; padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px #000c; }
.modal::backdrop { background: #010a12cc; backdrop-filter: blur(3px); }
.modal h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--sea); }
.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: 10px; color: var(--text); font: inherit; }
.modal input:focus { outline: none; border-color: var(--sea); }
.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: 11px; padding: 3px; margin-bottom: 16px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px; border-radius: 8px; color: var(--muted); font-weight: 800; }
.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; }
.form-gate { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--sea-d); background: #34e0c00d; border-radius: 10px; font-size: 12.5px; color: #bff3e8; }
.form-gate:empty { display: none; }
.form-gate b { color: var(--sea); }
.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: 10px; border: 1px solid var(--line); }
.offline-list b { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 12.5px; }

/* --- Profil -------------------------------------------------------------- */
.pf-card { display: flex; gap: 12px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.pf-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 22px; color: #03241e; background: var(--sea); box-shadow: 0 0 14px #34e0c055; 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: 12px; 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 #ff5d7355; background: #ff5d730a; border-radius: 12px; 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: #ff9aa8; }
.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(--sea); border-color: var(--sea); }
.pf-confirm { margin-top: 12px; }

/* --- Landing ------------------------------------------------------------ */
.landing { display: none; }
body.landing-open .landing { display: flex; }
body.landing-open > .topbar, body.landing-open > .layout { display: none; }
.landing {
  position: relative; z-index: 1; 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%, #34e0c018, transparent 70%), radial-gradient(500px 300px at 15% 10%, #8fdcff14, transparent 70%);
}
.ld-top { display: flex; justify-content: space-between; align-items: center; }
.ld-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 20px; }
.ld-copy { min-width: 0; }
.ld-kicker { color: var(--sea); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 14px; font-weight: 800; }
.ld-copy h1 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.8vw, 70px); line-height: 1; margin: 0 0 20px; letter-spacing: -.5px; }
.ld-copy h1 span { color: var(--sea); text-shadow: 0 0 26px #34e0c055; }
.ld-lead { color: var(--muted); font-size: 16px; 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: 12px; }
.btn.primary.big { box-shadow: 0 0 0 0 #34e0c055; animation: glow 1.8s ease-in-out infinite; }
.ld-note { color: var(--dim); font-size: 12.5px; margin: 16px 0 0; max-width: 520px; }
.ld-note b { color: var(--muted); }

.ld-scene { min-width: 0; display: flex; justify-content: center; }
.ld-scene .scene {
  height: auto; aspect-ratio: 4 / 3; width: min(100%, 470px); border-radius: 22px;
  border: 10px solid #123650; box-shadow: 0 30px 70px #000c, 0 0 0 1px #23506e;
}
.ld-scene .scene .catchlog { font-size: 14px; left: 14px; top: 12px; }
.ld-scene .scene .bobber { transform-origin: center; width: 15px; height: 22px; margin: -11px 0 0 -7px; }
.ld-scene .scene .jump { font-size: 32px; }

.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, #3a8a73, var(--cool), #10527f, #47308a); opacity: .8; }
.ld-eras li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); position: relative; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.ld-eras li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--sea); box-shadow: 0 0 10px #34e0c066; margin-bottom: 6px; }
.ld-eras b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }

.ld-h2, .ld-faq h2 { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--text); margin: 0 0 -26px; }
.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: 14px; padding: 18px; }
.ld-features span { font-size: 28px; }
.ld-features h3 { margin: 10px 0 6px; font-size: 15px; font-family: var(--display); font-weight: 600; }
.ld-features p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.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: 12px; padding: 0 16px; }
.ld-faq details[open] { border-color: var(--line2); }
.ld-faq summary { cursor: pointer; padding: 12px 0; font-weight: 800; font-size: 14px; 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(--sea); font-weight: 800; }
.ld-faq details[open] summary::after { content: '−'; }
.ld-faq p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.ld-faq a { color: var(--sea); }
.ld-foot { text-align: center; color: var(--dim); font-size: 12px; margin-top: auto; }
.ld-foot p { margin: 0 0 8px; }
.ld-foot b { color: var(--muted); }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 200; padding: 12px 16px; border-radius: 12px; background: #ff5d7322; border: 1px solid var(--red); color: var(--text); text-align: center; }

@media (max-width: 900px) {
  .ld-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 0; }
  .ld-scene { order: -1; }
  .ld-scene .scene { width: min(100%, 360px); border-width: 8px; }
  .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%; }
  .ld-eras { grid-template-columns: repeat(2, 1fr); }
}

/* --- Responsiv --------------------------------------------------------- */
.side, .main, .right { min-width: 0; }
@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); }
  .scene { height: 160px; }
  .mini-stats { display: none; }
  .topbar { padding: 8px 16px; gap: 10px; }
  .brand { font-size: 21px; }
  .res { padding: 5px 8px; gap: 6px; }
  .res-cool .bar { width: 100%; }
  .res b { font-size: 14px; }
  .grid { grid-template-columns: 1fr; }
  .techtree-wrap { max-height: 70vh; }
}

/* --- Rechtsseiten ---------------------------------------------------------- */
.legal { position: relative; z-index: 1; 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: 14px; }
.legal-main h1 { font-family: var(--display); font-weight: 600; font-size: 36px; color: var(--sea); margin: 0 0 12px; }
.legal-main h2 { font-size: 16px; margin: 26px 0 8px; color: var(--text); }
.legal-main p, .legal-main li { color: #bcd2e0; }
.legal-main ul { padding-left: 20px; }
.legal-main a { color: var(--sea); }
.legal-main code { background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.legal-badge { background: #34e0c00d; border: 1px dashed var(--sea-d); border-radius: 12px; padding: 10px 14px; }
.legal-badge b { color: var(--sea); }
mark.todo { background: #ffc94d2b; color: var(--money); border-radius: 4px; padding: 0 4px; }
.legal-foot { margin-top: 18px; text-align: center; color: var(--dim); font-size: 12px; }
.legal-foot p { margin: 8px 0 0; }
@media (max-width: 600px) { .legal { padding: 16px; } .legal-main { padding: 18px 16px; } .legal-main h1 { font-size: 30px; } }

/* --- Spielhandbuch ---------------------------------------------------------- */
.legal.hb { max-width: 1180px; }
.hb-lead { font-size: 15px; }
.hb-search input { width: 100%; padding: 11px 14px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px; color: var(--text); font: inherit; margin: 6px 0 14px; }
.hb-search input:focus { outline: none; border-color: var(--sea); }
.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: 12.5px; color: var(--muted) !important; }
.hb-toc a:hover { border-color: var(--sea); color: var(--sea) !important; }
.hb-part { margin-top: 34px; }
.hb-part > h2 { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--sea); margin: 0 0 8px; }
.hb-group h3 { font-size: 16px; margin: 22px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.hb-group h3 small { color: var(--dim); font-weight: 400; font-size: 12px; }
.hb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 13px; 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: #bcd2e0; }
.hb-table tr:last-child td { border-bottom: 0; }
.hb-table tr:target td { background: #34e0c012; }
.hb-table td b { color: var(--text); display: block; }
.hb-table td small { display: block; color: var(--dim); font-size: 11.5px; 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: #a6e35a22; 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: #bcd2e0; }
.hb-cta { text-align: center; margin-top: 30px; }
.hb-cta .btn, .legal-top .btn.primary { text-decoration: none; color: #03241e !important; }
@media (max-width: 700px) { .hb-facts { grid-template-columns: 1fr; gap: 4px; } .hb-facts dd { margin-bottom: 10px; } }