/* Graveyard Digger – Design V3 „Mondlicht“ (im Aufbau, umschaltbar; Plan: docs/design/v3/PLAN.md).
 * Wirkt nur mit der Klasse "v3" am <html> (setzt app/v3.js). Ohne sie bleibt V2 unverändert – bis auf den Knopf .v3-try ganz unten.
 * Grundidee: fast schwarzer Grund, hauchdünne Ränder, Tiefe über Helligkeitsstufen; Pixel-Nachtszene als Kopf, Glas-Seitenleiste;
 * Farbe = Bedeutung (Gold Geld · Grün Hof/erledigt · Blau Kirche · Violett Quests · Orange Warnung). */

/* ---------------------------------------------------------------- V2: Knopf zum Ausprobieren */
.v3-try { display: grid; gap: 2px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); font: 600 .85rem/1.2 var(--f-body); text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.v3-try small { font-weight: 500; font-size: .75rem; color: var(--ink-soft); }
.v3-try:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-style: solid; }
@media (max-width: 820px) { .v3-try { display: none; } }

/* ---------------------------------------------------------------- Farben und Schriften */
:root.v3 {
  color-scheme: dark;
  --bg: #07090d; --surface: #0c1016; --surface-2: #151b24; --surface-hi: #10151d; --line: rgba(255, 255, 255, .085);
  --ink: #eef1f5; --ink-soft: #a7b1bf; --accent: #f2c46d; --accent-ink: #1a1408; --moss: #9fd46b;
  --tech-red: #ff8f7a; --tech-green: #9fd46b; --tech-blue: #7fb6ff; --done: #9fd46b; --spoiler: #1b1f26;
  --shadow: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -32px rgba(0, 0, 0, .9);
  --bg-art: none;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 20px;
  --f-body: "Geist", "Segoe UI", system-ui, sans-serif;
  /* Zahlen (Wunsch Nutzer 03.10.: Pixelify war schlecht lesbar): groß in Rubik, in Tabellen und Listen in JetBrains Mono */
  --f-num: "Rubik", "Geist", system-ui, sans-serif; --f-tab: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --v3-gold: #f2c46d; --v3-moss: #9fd46b; --v3-church: #7fb6ff; --v3-violet: #b39dff; --v3-ember: #ff8f5e;
  --v3-ease: cubic-bezier(.2, .8, .2, 1); --v3-spring: cubic-bezier(.34, 1.56, .64, 1);
  --v3-glass: rgba(12, 16, 22, .58);
}
:root.v3 body { background: #07090d; font-size: 16px; }
.v3 h1 { color: #f6f2e6; text-shadow: 0 3px 0 #05070b; }
.v3 ::selection { background: rgba(242, 196, 109, .3); }

/* ---------------------------------------------------------------- Nachtszene als Kopf */
#v3-scene { position: absolute; left: 0; right: 0; top: 0; height: 380px; overflow: hidden; background: #111a2c; pointer-events: none; z-index: 0; }
#v3-scene .v3-sc-img, #v3-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; image-rendering: pixelated; display: block; }
#v3-scene .v3-sc-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 13, .4) 0%, rgba(7, 9, 13, 0) 24%, rgba(7, 9, 13, 0) 48%, rgba(7, 9, 13, .85) 82%, #07090d 100%); }
.v3 .topbar, .v3 .shell, .v3 .footer { position: relative; z-index: 1; }
@keyframes v3-tw { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes v3-cloud { 0% { transform: translateX(-36px); } 100% { transform: translateX(36px); } }
@keyframes v3-batx { 0% { left: -6%; } 100% { left: 106%; } }
@keyframes v3-baty { 0%, 100% { transform: translateY(0) scaleY(1); } 25% { transform: translateY(-8px) scaleY(.55); } 50% { transform: translateY(2px) scaleY(1); } 75% { transform: translateY(-6px) scaleY(.55); } }
@keyframes v3-fog { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } }
@keyframes v3-fly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(18px, -14px); } 80% { opacity: 1; } 100% { transform: translate(-6px, -26px); opacity: 0; } }
#v3-scene .m-tw { animation: v3-tw 2.8s ease-in-out infinite; }
#v3-scene .v3-cloud { animation: v3-cloud 26s ease-in-out infinite alternate; }
.v3-bat { position: absolute; animation: v3-batx 15s linear infinite; }
.v3-bat > svg { display: block; animation: v3-baty .9s ease-in-out infinite; }
.v3-fog { position: absolute; left: -20%; width: 140%; height: 50px; background: rgba(170, 190, 220, .08); filter: blur(12px); border-radius: 50%; animation: v3-fog 16s ease-in-out infinite alternate; }
.v3-ff { position: absolute; width: 4px; height: 4px; background: #e8f59a; box-shadow: 0 0 8px 2px rgba(232, 245, 154, .6); animation: v3-fly 5s ease-in-out infinite; }

/* ---------------------------------------------------------------- Kopfzeile aus Glas */
.v3 .topbar { background: rgba(7, 9, 13, .35); border-bottom-color: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.v3 .wordmark { display: none; }
.v3 .search input { background: var(--v3-glass); border-color: rgba(255, 255, 255, .1); border-radius: 14px; min-height: 42px; }
.v3 .search input:focus { border-color: rgba(207, 227, 255, .45); box-shadow: 0 0 0 3px rgba(207, 227, 255, .12); }
.v3 .pages-btn, .v3 .dlc-filter .chip { background: var(--v3-glass); border-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------------------------------------------------------------- Seitenleiste aus Glas mit 8 Bereichen */
.v3 .sidenav { background: var(--v3-glass); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); padding: 12px 10px; gap: 2px; margin-right: 0; scrollbar-gutter: auto; }
.v3 .v3-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; line-height: 1.1; }
.v3 .v3-brand b { display: block; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink); }
.v3 .v3-brand small { font: 400 .72rem/1.2 "Silkscreen", monospace; letter-spacing: .05em; text-transform: uppercase; color: #78838f; }
.v3 .v3-logo svg { display: block; width: 32px; height: 32px; }
.v3 .sidenav a.v3-g, .v3 .sidenav button.v3-g { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 14px;
  background: transparent; color: #c3cbd6; font: 500 .98rem/1.2 var(--f-body); text-align: left; cursor: pointer; box-shadow: none; transition: background .2s, color .2s; }
.v3 .sidenav .v3-g:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.v3 .v3-ic { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 255, 255, .04); transition: transform .3s var(--v3-spring), background .2s, box-shadow .2s; }
.v3 .v3-ic svg { display: block; width: 26px; height: 26px; }
.v3 .v3-ic.sm { width: 26px; height: 26px; background: none; }
.v3 .v3-g:hover .v3-ic { transform: scale(1.1) rotate(-5deg); }
.v3 .v3-l { flex: 1; min-width: 0; }
.v3 .v3-g.on, .v3 .sidenav a.v3-g[aria-current="page"] { background: rgba(207, 227, 255, .08); color: #fff; box-shadow: none; }
.v3 .v3-g.on .v3-ic { background: rgba(207, 227, 255, .12); box-shadow: 0 0 18px rgba(207, 227, 255, .18); }
.v3 .v3-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .3s var(--v3-ease); }
.v3 .v3-grp.open > .v3-g .v3-chev { transform: rotate(90deg); }
.v3 .v3-kids { display: none; flex-direction: column; gap: 1px; margin: 2px 0 8px 26px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.v3 .v3-grp.open > .v3-kids { display: flex; animation: v3-kids .3s var(--v3-ease) both; }
@keyframes v3-kids { from { opacity: 0; transform: translateY(-4px); } }
.v3 .sidenav .v3-kids a, .v3 .sidenav a.v3-kid { padding: 7px 10px; border-radius: 10px; color: var(--ink-soft); font-size: .92rem; font-weight: 500; background: none; box-shadow: none; transition: background .15s, color .15s, transform .15s; }
.v3 .sidenav .v3-kids a:hover, .v3 .sidenav a.v3-kid:hover { background: rgba(255, 255, 255, .05); color: #fff; transform: translateX(3px); }
.v3 .sidenav .v3-kids a[aria-current="page"], .v3 .sidenav a.v3-kid[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: none; }
.v3 .sidenav a .count { font: 400 .72rem/1 var(--f-tab); padding: 3px 7px; border-radius: 7px; background: rgba(255, 255, 255, .06); color: #c3cbd6; }
.v3 .sidenav a.v3-kid { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.v3 .sidenav a.v3-kid > span:nth-child(2) { flex: 1; }
.v3 .v3-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 6px; }
.v3 .v3-switch { margin: 2px 6px 0; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--ink-soft); font: 500 .82rem/1.2 var(--f-body); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.v3 .v3-switch:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.v3 .sidenav .save-stamp { background: rgba(255, 255, 255, .04); border-radius: 12px; }

/* ---------------------------------------------------------------- Kacheln, Knöpfe, Tabellen */
.v3 .panel { background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 42%), repeating-conic-gradient(rgba(255, 255, 255, .011) 0 25%, transparent 0 50%) 0 0 / 4px 4px, var(--surface);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-md); transition: border-color .25s; }
.v3 .panel:hover { border-color: rgba(255, 255, 255, .12); }
.v3 .eyebrow { font: 400 .74rem/1.3 "Silkscreen", monospace; letter-spacing: .05em; color: var(--v3-gold); }
.v3 .btn { border-radius: 12px; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: background .2s, transform .2s var(--v3-spring), border-color .2s; }
.v3 .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.v3 .btn.primary { background: var(--v3-gold); color: #1a1408; border-color: var(--v3-gold); }
.v3 table.data th { background: #121822; font-family: "Silkscreen", monospace; font-weight: 400; font-size: .7rem; letter-spacing: .05em; color: #8d98a6; }
.v3 table.data tbody tr:hover { background: rgba(255, 255, 255, .035); }
.v3 .toast { background: #eef1f5; color: #07090d; }
.v3 .footer { border-top-color: rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------- Tablet hochkant: Bereiche als Raster, Unterseiten darunter */
@media (max-width: 820px) {
  .v3 .sidenav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 8px; }
  .v3 .v3-brand { display: none; }
  .v3 .v3-grp { display: contents; }
  .v3 .sidenav a.v3-g, .v3 .sidenav button.v3-g { flex-direction: column; gap: 4px; min-height: 64px; padding: 6px 2px; justify-content: center; text-align: center; font-size: .78rem; white-space: normal; }
  .v3 .v3-g .v3-chev, .v3 .v3-g .count { display: none; }
  .v3 .v3-l { flex: none; }
  .v3 .v3-kids { grid-column: 1 / -1; order: 50; margin: 4px 0 0; padding: 6px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .v3 .sidenav .v3-kids a { white-space: nowrap; background: rgba(255, 255, 255, .04); }
  .v3 .v3-foot { grid-column: 1 / -1; order: 60; margin-top: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; }
}
/* Handy: Seiten liegen in der unteren Leiste und im Menü (wie V2), oben bleibt nur der Spielstand-Stempel */
@media (max-width: 640px) {
  .v3 .wordmark { display: inline; font-size: 1.3rem; }
  .v3 .sidenav { display: flex; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .v3 .sidenav > .v3-grp, .v3 .sidenav > a.v3-g, .v3 .sidenav .v3-foot > :not(.save-stamp) { display: none; }
  .v3 .v3-foot { margin: 0; padding: 0; border: 0; width: 100%; }
  .v3 .tabbar { background: rgba(7, 9, 13, .82); border-top-color: rgba(255, 255, 255, .08); }
  #v3-scene { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  #v3-scene *, .v3 .v3-kids, .v3 .v3-ic { animation: none !important; transition: none !important; }
}

/* ================================================================ Startseite „Heute“ (Etappe 2, app/v3home.js) */
.v3h { display: flex; flex-direction: column; gap: 12px; }
.v3h-hero { min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 6px 4px 12px; }
.v3h-daynum { font: 400 104px/.95 var(--f-display); letter-spacing: .01em; color: #f6f2e6; filter: drop-shadow(0 5px 0 #05070b) drop-shadow(0 0 22px rgba(207, 227, 255, .28)); }
.v3h-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: #c3cbd6; font-size: .95rem; text-shadow: 0 2px 0 #05070b; animation: v3h-fade .5s .5s var(--v3-ease) both; }
.v3h-sub a { color: #cfe3ff; }
.v3h-wd { font: 700 18px/1.2 "Alegreya Sans", var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--wk) 45%, #e6eefc); }
.v3h-stamp { color: #8d98a6; font-size: .85rem; }
.v3h-eyebrow { font: 400 .74rem/1.3 "Silkscreen", monospace; letter-spacing: .05em; color: var(--v3-gold); text-transform: uppercase; }
.v3h-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.v3h-tile { --c: #cfe3ff; grid-column: span 6; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 16px 14px; border-radius: 20px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 42%), repeating-conic-gradient(rgba(255, 255, 255, .011) 0 25%, transparent 0 50%) 0 0 / 4px 4px, var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -32px rgba(0, 0, 0, .9);
  animation: v3h-in .7s calc(var(--i, 0) * 70ms + 80ms) var(--v3-ease) both; transition: transform .25s var(--v3-ease), border-color .25s; }
.v3h-tile::before { content: ""; position: absolute; left: 10%; right: 10%; top: -60px; height: 120px; background: radial-gradient(closest-side, var(--c), transparent); opacity: .1; pointer-events: none; transition: opacity .3s; }
.v3h-tile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .13); }
.v3h-tile:hover::before { opacity: .22; }
.v3h-tile.s4 { grid-column: span 4; }
.v3h-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.v3h-label { font: 400 .78rem/1.3 "Silkscreen", monospace; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
a.v3h-label:hover { text-decoration: underline; }
.v3h-count { color: var(--ink-soft); font-size: .9rem; }
.v3h-count b { font: 600 1.1rem/1 var(--f-num); color: var(--ink); }
.v3h-slot { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .07), transparent 65%), #171d27; transition: border-color .2s; }
.v3h-slot img { max-width: 40px; max-height: 40px; image-rendering: pixelated; transition: transform .35s var(--v3-spring); }
.v3h-slot svg { width: 26px; height: 26px; display: block; transition: transform .35s var(--v3-spring); }
.v3h-slot.sm { width: 44px; height: 44px; }
.v3h-slot.xs { width: 32px; height: 32px; border-radius: 10px; }
.v3h-slot.xs img { max-width: 24px; max-height: 24px; }
.v3h-slot.face { align-items: flex-start; }
.v3h-slot.face img { max-width: none; max-height: none; width: 52px; margin-top: 2px; }
.v3h-row:hover .v3h-slot img, .v3h-row:hover .v3h-slot svg { transform: translateY(-3px) scale(1.05); }
.v3h-slot.float { animation: v3h-float 3.2s ease-in-out infinite; }
.v3h-imgs { display: flex; gap: 6px; }
.v3h-imgs .v3h-slot:nth-child(2) { animation-delay: .6s; }
/* Geld */
.v3h-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 600 1rem/1 var(--f-num); }
.v3h-coin { display: inline-flex; align-items: center; gap: 6px; }
.v3h-coin img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.v3h-coin.g { font-size: 44px; color: var(--v3-gold); }
.v3h-coin.s { font-size: 32px; color: #e3e8ee; }
.v3h-coin.k { font-size: 26px; color: #e8a57a; }
.v3h-delta { align-self: flex-start; padding: 6px 10px; border-radius: 10px; background: rgba(159, 212, 107, .1); color: var(--v3-moss); font-size: .88rem; font-weight: 600; }
.v3h-delta.neg { background: rgba(255, 143, 94, .1); color: var(--v3-ember); }
/* Ruf und Balken */
.v3h-rate { display: flex; flex-direction: column; gap: 6px; }
.v3h-rate-top { display: flex; align-items: center; gap: 10px; }
.v3h-rate-l { font-weight: 600; }
.v3h-rate-v { margin-left: auto; font: 600 24px/1 var(--f-num); }
.v3h-rate-v small { font-size: 15px; color: #78838f; }
.v3h-seg { display: block; height: 14px; border-radius: 5px; background: rgba(255, 255, 255, .05); padding: 3px; }
.v3h-seg > i { display: block; height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--seg, var(--v3-moss)) 0 9px, rgba(0, 0, 0, .3) 9px 11px); }
.v3h-grow { transform-origin: left center; animation: v3h-grow 1.3s var(--v3-ease) both; }
.v3h-note { font-size: .85rem; color: var(--ink-soft); }
/* Garten */
.v3h-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.v3h-num { padding: 10px 4px; border-radius: 14px; background: #171d27; border: 1px solid var(--line); }
.v3h-num b { display: block; font: 600 30px/1 var(--f-num); color: var(--ink-soft); }
.v3h-num > span { font-size: .82rem; color: var(--ink-soft); }
.v3h-num.on { background: rgba(159, 212, 107, .1); border-color: rgba(159, 212, 107, .25); }
.v3h-num.on b { color: var(--v3-moss); }
/* Zeilen: Als Nächstes, Quests */
.v3h-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 5px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background .2s; }
.v3h-row:hover { background: rgba(255, 255, 255, .03); }
.v3h-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.v3h-ttl { position: relative; align-self: flex-start; font-weight: 600; line-height: 1.3; transition: color .3s; }
.v3h-meta { font-size: .86rem; color: var(--ink-soft); line-height: 1.35; }
.v3h-tag { flex: none; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font: 400 .7rem/1 "Silkscreen", monospace; letter-spacing: .05em; text-transform: uppercase; }
.v3h-tag.hot { background: rgba(159, 212, 107, .12); border-color: transparent; color: var(--v3-moss); }
.v3h-chk { position: relative; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .16); background: transparent; color: var(--v3-moss); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.v3h-chk:hover { border-color: var(--v3-moss); }
.v3h-chk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0); }
.v3h-chk i { position: absolute; left: 12px; top: 12px; width: 5px; height: 5px; background: var(--v3-moss); opacity: 0; pointer-events: none; }
.v3h-todo.done .v3h-chk { border-color: var(--v3-moss); background: rgba(159, 212, 107, .12); }
.v3h-todo.done .v3h-chk svg { opacity: 1; transform: none; animation: v3h-pop .45s var(--v3-spring) both; }
.v3h-todo.done .v3h-chk i { animation: v3h-burst .6s var(--v3-ease) both; }
.v3h-ttl::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 2px; background: var(--v3-moss); transform: scaleX(0); transform-origin: left center; transition: transform .45s .1s var(--v3-ease); }
.v3h-todo.done .v3h-ttl { color: #78838f; }
.v3h-todo.done .v3h-ttl::after { transform: scaleX(1); }
.v3h-todo.done .v3h-slot { opacity: .45; filter: grayscale(.6); }
.v3h-empty, .v3h-small { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.v3h-muted { color: var(--ink-soft); }
.v3h-btn { align-self: flex-start; margin: 4px 8px 2px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink); font-weight: 600; text-decoration: none; transition: background .2s, transform .2s var(--v3-spring); }
.v3h-btn:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
/* Woche */
.v3h-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.v3h-day { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 8px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background .2s; }
.v3h-day:hover { background: rgba(255, 255, 255, .04); }
.v3h-stage { position: relative; width: 100%; max-width: 72px; height: 86px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse 60% 22% at 50% 88%, color-mix(in srgb, var(--wk) 35%, transparent), transparent 70%), linear-gradient(180deg, #141a24, #0e131a);
  transition: transform .35s var(--v3-spring), border-color .25s, box-shadow .25s; }
.v3h-stage > img:first-child { width: 64px; height: auto; image-rendering: pixelated; margin-bottom: -2px; }
.v3h-sym { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; image-rendering: pixelated; opacity: .9; }
.v3h-day:hover .v3h-stage { transform: translateY(-3px); }
.v3h-day.on .v3h-stage { border-color: rgba(179, 157, 255, .7); box-shadow: 0 0 0 3px rgba(179, 157, 255, .15), 0 12px 30px -10px rgba(179, 157, 255, .45); transform: translateY(-4px); }
.v3h-day.today .v3h-stage { border-color: rgba(242, 196, 109, .45); }
.v3h-when { font: 400 .7rem/1 "Silkscreen", monospace; letter-spacing: .05em; text-transform: uppercase; color: #78838f; }
.v3h-day.today .v3h-when { color: var(--v3-gold); }
.v3h-sin { font-weight: 600; font-size: .86rem; }
.v3h-dets { border-radius: 16px; background: #11161e; border: 1px solid var(--line); padding: 12px 14px; }
.v3h-det { display: flex; flex-direction: column; gap: 8px; animation: v3h-fade .35s var(--v3-ease) both; }
.v3h-det[hidden] { display: none; }
.v3h-det-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.v3h-who { font: italic 400 26px/1 "Instrument Serif", Georgia, serif; color: var(--ink); text-decoration: none; }
.v3h-who:hover { text-decoration: underline; }
.v3h-where { color: var(--ink-soft); font-size: .9rem; }
.v3h-quests { margin: 0; padding-left: 18px; font-size: .92rem; color: #d3d9e2; display: flex; flex-direction: column; gap: 4px; }
.v3h-need-l { color: #78838f; }
.v3h-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v3h-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 11px 3px 4px; border-radius: 11px; background: #171d27; border: 1px solid var(--line); color: var(--ink); font-size: .88rem; text-decoration: none; transition: border-color .2s; }
.v3h-chip:hover { border-color: rgba(255, 255, 255, .2); }
.v3h-chip-ic { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.v3h-chip-ic img { max-width: 22px; max-height: 22px; image-rendering: pixelated; }
/* Fortschritt */
.v3h-big { font: 600 34px/1 var(--f-num); color: var(--v3-moss); }
.v3h-prog { display: grid; grid-template-columns: 32px minmax(0, 1fr) 76px; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 2px 4px; border-radius: 10px; transition: background .2s; }
.v3h-prog:hover { background: rgba(255, 255, 255, .03); }
.v3h-prog-m { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.v3h-prog-l { font-size: .9rem; }
.v3h-prog-v { font: 500 15px/1 var(--f-num); color: var(--ink-soft); text-align: right; }
.v3h-prog-v small { color: #78838f; }
.v3h-sum { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #11161e; border: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }
.v3h-sum b { font: 600 22px/1 var(--f-num); color: var(--ink); }
.v3h-sum small { font-size: 15px; color: #78838f; }
.v3h-hint { margin: 0; color: var(--ink-soft); font-size: .9rem; }
/* Zählwerk */
/* Ziffernzelle etwas höher als 1em: Zier- und Pixelschrift ragen sonst in die Nachbarziffer */
.v3o { --oh: 1.2em; display: inline-flex; height: var(--oh); line-height: var(--oh); overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.v3o-w { display: inline-block; height: var(--oh); overflow: hidden; }
.v3o-c { display: flex; flex-direction: column; transition: transform 1.25s var(--v3-ease); }
.v3o-c > span { display: block; height: var(--oh); line-height: var(--oh); text-align: center; }
@keyframes v3h-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes v3h-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v3h-grow { from { transform: scaleX(0); } }
@keyframes v3h-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes v3h-pop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes v3h-burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) scale(.4); opacity: 0; } }
@media (max-width: 1060px) { .v3h-tile.s4 { grid-column: span 6; } .v3h-tile { grid-column: span 12; } }
@media (max-width: 640px) {
  .v3h-tile.s4, .v3h-tile { grid-column: span 12; }
  .v3h-daynum { font-size: 72px; }
  .v3h-hero { min-height: 170px; }
  .v3h-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3h-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v3h *, .v3h-tile { animation: none !important; transition: none !important; }
}

/* ================================================================ Aufräumen (Etappe 3) */
/* Navigation nur noch über die Seitenleiste (am Handy untere Leiste + Menü): kein „Alle Seiten“, kein DLC-Filter */
.v3 .pages-btn, .v3 #dlc-filter, .v3 .menu-dlc, .v3 .menu-dlc-l { display: none !important; }
/* DLC nur als kleiner Hinweis am Inhalt */
.v3 .dlc-tag { font: 400 .6rem/1 "Silkscreen", monospace; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; border: 0; background: rgba(255, 255, 255, .05); vertical-align: middle; opacity: .9; }
.v3 .dlc-tag[data-dlc="Breaking Dead"] { color: var(--v3-moss); }
.v3 .dlc-tag[data-dlc="Stranger Sins"] { color: #ff9c8a; }
.v3 .dlc-tag[data-dlc="Game of Crone"] { color: var(--v3-gold); }
.v3 .dlc-tag[data-dlc="Better Save Soul"] { color: var(--v3-church); }
/* Einleitung: ein Satz, ruhig */
.v3 .lede { max-width: 72ch; color: #b4bdc9; font-size: 1rem; }
/* Verweis statt doppelter Quest-Liste */
.v3 .v3-livelink { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(179, 157, 255, .07); color: var(--ink-soft); }
.v3 .v3-livelink a { color: var(--v3-violet); font-weight: 600; }
.v3 .v3-livelink .nav-ic { color: var(--v3-violet); opacity: 1; }
/* Handy-Menü: die 8 Bereiche wie in der Seitenleiste */
.v3 .menu-sheet { background: #0c1016; border-color: rgba(255, 255, 255, .1); }
.v3 .menu-sheet .menu-group .eyebrow { display: flex; align-items: center; gap: 8px; font: 400 .74rem/1.3 "Silkscreen", monospace; letter-spacing: .05em; color: var(--v3-gold); }
.v3 .v3-menu-ic svg { display: block; width: 26px; height: 26px; }
.v3 .menu-grid a { background: #11161e; border-color: rgba(255, 255, 255, .08); border-radius: 12px; }
.v3 .menu-grid a[aria-current="page"] { border-color: rgba(207, 227, 255, .4); background: rgba(207, 227, 255, .08); }

/* ================================================================ Nachschlage-Tabellen (Etappe 4): ein Aussehen für alle 7 Seiten */
.v3 .lookup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.v3 .lookup-bar input[type="search"], .v3 .lookup-bar select { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background-color: #11161e; color: var(--ink); font: inherit; font-size: .95rem; }
.v3 .lookup-bar input[type="search"] { flex: 1 1 240px; padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23a7b1bf' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M17 17l-4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 50%; }
.v3 .lookup-bar input[type="search"]:focus, .v3 .lookup-bar select:focus { outline: none; border-color: rgba(207, 227, 255, .45); box-shadow: 0 0 0 3px rgba(207, 227, 255, .12); }
.v3 .lookup-tg { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: #11161e; color: var(--ink-soft); cursor: pointer; }
.v3 .lookup-tg input { accent-color: var(--v3-moss); }
.v3 .lookup-count { margin-left: auto; font: 400 .95rem/1 var(--f-tab); color: var(--ink-soft); }
.v3 .lookup-wrap { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: auto; }
.v3 table.lookup { font-size: .93rem; }
.v3 table.lookup th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: #121822; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 400 .68rem/1.2 "Silkscreen", monospace; letter-spacing: .05em; color: #8d98a6; cursor: pointer; user-select: none; transition: color .15s; }
.v3 table.lookup th:hover { color: var(--ink); }
.v3 table.lookup th::after { content: "↕"; margin-left: 6px; opacity: .35; font-family: var(--f-body); }
.v3 table.lookup th.sorted { color: var(--v3-gold); }
.v3 table.lookup th.sorted::after { content: "▲"; opacity: 1; font-size: .6rem; }
.v3 table.lookup th.sorted.desc::after { content: "▼"; }
.v3 table.lookup td { padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .055); vertical-align: middle; }
.v3 table.lookup tbody tr:hover { background: rgba(255, 255, 255, .035); }
.v3 table.lookup td:first-child { font-weight: 600; }
.v3 table.lookup td:first-child a { color: var(--ink); text-decoration: none; }
.v3 table.lookup td:first-child a:hover { color: #fff; text-decoration: underline; }
.v3 table.lookup td img { width: 34px; height: 34px; padding: 3px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .07), transparent 65%), #171d27; image-rendering: pixelated; vertical-align: middle; }
.v3 table.lookup td .rec-in img, .v3 table.lookup td .ing img { width: 28px; height: 28px; padding: 2px; border-radius: 8px; }
.v3 table.lookup .num { font-family: var(--f-tab); font-size: .95rem; }
.v3 table.lookup .pill { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.v3 table.lookup a.pill:hover { border-color: rgba(255, 255, 255, .2); }
.v3 .lookup-sum { display: block; max-width: 56ch; line-height: 1.4; }
.v3 .lookup-empty { padding: 28px 12px !important; text-align: center; color: var(--ink-soft); font-weight: 400 !important; }
.v3 .pager { justify-content: center; gap: 12px; margin-top: 12px; }
.v3 .pager .num { font-family: var(--f-tab); }
/* Handy: jede Zeile eine Karte, Spaltennamen davor */
@media (max-width: 640px) {
  .v3 .lookup-count { margin-left: 0; width: 100%; }
  .v3 .lookup-bar select, .v3 .lookup-tg { flex: 1 1 140px; }
  .v3 .lookup-wrap { border: 0; background: none; overflow: visible; }
  .v3 table.lookup, .v3 table.lookup tbody { display: block; width: 100%; }
  .v3 table.lookup thead { display: none; }
  .v3 table.lookup tr { display: block; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .v3 table.lookup td { display: block; position: relative; min-height: 22px; padding: 4px 0 4px 102px; border: 0; }
  .v3 table.lookup td:empty { display: none; }
  .v3 table.lookup td::before { content: attr(data-label); position: absolute; left: 0; top: 7px; width: 92px; font: 400 .62rem/1.3 "Silkscreen", monospace; letter-spacing: .04em; color: #78838f; text-transform: uppercase; }
  .v3 table.lookup td:first-child { padding: 0 0 8px; font-size: 1rem; }
  .v3 table.lookup td:first-child::before { display: none; }
  .v3 table.lookup td.lookup-empty { display: block; }
  .v3 table.lookup td.lookup-empty::before { display: none; }
  /* lange Namen in Zutaten-Chips dürfen umbrechen, sonst wird die Karte breiter als der Bildschirm */
  .v3 table.lookup .ing { white-space: normal; max-width: 100%; }
}

/* ================================================================ Bauprojekte (Etappe 5): kompakte Quer-Liste */
.v3 .bp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.v3 .bp-own { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink-soft); font: 400 .68rem/1 "Silkscreen", monospace; letter-spacing: .04em; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.v3 .bp-own svg { display: block; width: 24px; height: 24px; }
.v3 .bp-own .num { padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 400 .8rem/1 var(--f-num); letter-spacing: 0; }
.v3 .bp-own:hover { border-color: rgba(255, 255, 255, .22); color: var(--ink); }
.v3 .bp-own[aria-pressed="true"] { border-color: rgba(255, 143, 94, .6); background: rgba(255, 143, 94, .1); color: var(--ink); }
.v3 .bp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.v3 .bp-chip { flex: 1 1 auto; min-width: 150px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--v3-spring); }
.v3 .bp-chip svg { display: block; width: 26px; height: 26px; grid-row: span 2; }
.v3 .bp-chip-l { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3 .bp-chip .num { font: 400 .9rem/1 var(--f-num); color: var(--ink-soft); }
.v3 .bp-chip .num small { color: #78838f; }
.v3 .bp-chip:hover { border-color: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.v3 .bp-chip[aria-pressed="true"] { border-color: rgba(255, 143, 94, .55); background: rgba(255, 143, 94, .08); }
.v3 .bp-seg { grid-column: 2 / 4; display: block; height: 9px; padding: 2px; border-radius: 4px; background: rgba(255, 255, 255, .05); }
.v3 .bp-seg > i { display: block; height: 100%; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--v3-ember) 0 6px, rgba(0, 0, 0, .3) 6px 8px); transition: width .6s var(--v3-ease); }
.v3 .bp-wrap { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.v3 table.bp-list { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .92rem; }
.v3 .bp-list [hidden] { display: none !important; }
.v3 .bp-list thead th { padding: 9px 10px; background: #121822; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 400 .66rem/1.2 "Silkscreen", monospace; letter-spacing: .05em; color: #8d98a6; text-align: left; white-space: nowrap; }
.v3 .bp-list thead th:nth-child(1) { width: 46px; }
.v3 .bp-list thead th:nth-child(2) { width: 31%; }
.v3 .bp-list thead th:nth-child(4) { width: 76px; }
.v3 .bp-list thead th:nth-child(5) { width: 118px; }
.v3 .bp-list thead th:nth-child(4), .v3 .bp-list thead th:nth-child(5) { text-align: right; }
.v3 .bp-list td { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.v3 .bp-list tr[data-p]:hover { background: rgba(255, 255, 255, .025); }
.v3 .bp-grp th { padding: 16px 12px 7px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .015); font: 400 .72rem/1.2 "Silkscreen", monospace; letter-spacing: .05em; color: var(--v3-ember); text-align: left; }
.v3 .bp-grp th svg { width: 22px; height: 22px; margin-right: 8px; vertical-align: -6px; }
.v3 .bp-grp .num { margin-left: 10px; font: 400 .85rem/1 var(--f-num); letter-spacing: 0; color: var(--ink-soft); }
.v3 .bp-c { padding-right: 0 !important; }
.v3 .bp-n b a { color: var(--ink); text-decoration: none; }
.v3 .bp-n b a:hover { color: #fff; text-decoration: underline; }
.v3 .bp-n .dlc-tag { vertical-align: 1px; }
.v3 .bp-sub { display: block; margin-top: 2px; overflow: hidden; color: #78838f; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.v3 .bp-sub.open { white-space: normal; }
.v3 .bp-n .proj-parts { gap: 4px; margin-top: 5px; }
.v3 .bp-n .part-cb { min-height: 28px; padding: 1px 9px 1px 5px; font-size: .76rem; background: rgba(255, 255, 255, .03); }
.v3 .bp-m { line-height: 1; }
.v3 .bp-mat { display: inline-flex; align-items: center; gap: 4px; margin: 2px 5px 2px 0; padding: 2px 8px 2px 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); color: var(--ink); font-size: .8rem; text-decoration: none; white-space: nowrap; transition: border-color .15s; }
.v3 .bp-mat img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.v3 .bp-mat .num { font: 400 .82rem/1 var(--f-tab); color: var(--v3-gold); }
.v3 .bp-mat:hover { border-color: rgba(255, 255, 255, .22); }
.v3 .bp-e { overflow: hidden; color: var(--ink-soft); font: 400 .9rem/1.2 var(--f-tab); text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.v3 .bp-p { text-align: right; }
.v3 .bp-p .stepper { gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .2); transition: border-color .2s, background .2s; }
.v3 .bp-p .stepper .btn { min-width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 1.05rem; line-height: 1; }
.v3 .bp-p .stepper .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.v3 .bp-p .stepper .btn:disabled { opacity: .3; }
.v3 .bp-p .stepper .num { min-width: 20px; color: #78838f; font: 400 .95rem/1 var(--f-tab); text-align: center; }
.v3 .bp-list tr[data-plan="1"] .stepper { border-color: rgba(242, 196, 109, .45); background: rgba(242, 196, 109, .08); }
.v3 .bp-list tr[data-plan="1"] .stepper .num { color: var(--v3-gold); }
.v3 .bp-list tr[data-done="1"] .bp-n, .v3 .bp-list tr[data-done="1"] .bp-m, .v3 .bp-list tr[data-done="1"] .bp-e { opacity: .5; }
.v3 .bp-add td { padding: 12px; font-size: .9rem; }
/* Haken wie auf der Startseite: Pixel springen beim Abhaken heraus */
.v3 .bp-list td > .cb-cell.bp-cb { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; min-width: 0; height: 30px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .16); color: var(--v3-moss); cursor: pointer; transition: border-color .2s, background .2s; }
.v3 .bp-list .bp-cb > input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v3 .bp-cb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0); pointer-events: none; }
.v3 .bp-cb i { position: absolute; left: 11px; top: 11px; width: 5px; height: 5px; background: var(--v3-moss); opacity: 0; pointer-events: none; }
.v3 .bp-cb:hover { border-color: var(--v3-moss); }
.v3 .bp-cb:focus-within { outline: 2px solid rgba(207, 227, 255, .5); outline-offset: 2px; }
.v3 .bp-list tr[data-done="1"] .bp-cb { border-color: var(--v3-moss); background: rgba(159, 212, 107, .12); }
.v3 .bp-cb input:checked ~ svg { opacity: 1; transform: none; }
.v3 .bp-cb.pop input:checked ~ svg { animation: v3h-pop .45s var(--v3-spring) both; }
.v3 .bp-cb.pop input:checked ~ i { animation: v3h-burst .6s var(--v3-ease) both; }
@media (pointer: coarse) {
  .v3 .bp-list td > .cb-cell.bp-cb { width: 36px; height: 36px; }
  .v3 .bp-p .stepper .btn { min-width: 38px; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3 .bp-cb *, .v3 .bp-chip, .v3 .bp-seg > i { animation: none !important; transition: none !important; }
}
/* Tablet hochkant und Handy: Bereiche als waagerechte Leiste, jede Zeile zweistufig (Name + Plan, darunter Materialien + Energie) */
@media (max-width: 900px) {
  .v3 .bp-cats { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; }
  .v3 .bp-cats::-webkit-scrollbar { display: none; }
  .v3 .bp-chip { flex: 0 0 auto; scroll-snap-align: start; }
  .v3 .bp-chip-l { overflow: visible; }
  .v3 table.bp-list, .v3 .bp-list tbody { display: block; width: 100%; }
  .v3 .bp-list thead { display: none; }
  .v3 .bp-list tr.bp-grp, .v3 .bp-list tr.bp-add, .v3 .bp-list tr.bp-empty { display: block; }
  .v3 .bp-list tr.bp-grp th, .v3 .bp-list tr.bp-add td, .v3 .bp-list tr.bp-empty td { display: block; }
  .v3 .bp-list tr[data-p] { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "c n p" "c n e" "c m m"; align-items: start; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  .v3 .bp-list tr[data-p] > td { display: block; width: auto; min-width: 0; padding: 0 !important; border: 0; overflow: visible; }
  .v3 .bp-c { grid-area: c; }
  .v3 .bp-n { grid-area: n; }
  .v3 .bp-p { grid-area: p; }
  .v3 .bp-m { grid-area: m; }
  .v3 .bp-e { grid-area: e; font-size: .8rem; }
  .v3 .bp-e::before { content: "Energie"; margin-right: 5px; color: #78838f; font: 400 .56rem/1 "Silkscreen", monospace; letter-spacing: .04em; vertical-align: 1px; }
  .v3 .bp-mat { white-space: normal; }
}

/* ================================================================ Übrige Seiten (Etappe 6): gemeinsame Bausteine im Mondlicht-Stil */
/* Überschriften: Seitentitel bleibt Pirata One, Abschnitte und Kacheln einheitlich in Geist */
.v3 main h2, .v3 .panel-head h2, .v3 .chapter h2, .v3 .mod-head h2, .v3 .tt-head h2, .v3 .gy-head h2,
.v3 .lg-search-l, .v3 .lg-area-h, .v3 .map-lg-h, .v3 .map-list > summary h2 { font: 650 1.3rem/1.2 var(--f-body); letter-spacing: -.01em; color: #f3f5f8; }
.v3 main h3, .v3 .gy-detail h3 { font: 600 1.05rem/1.25 var(--f-body); letter-spacing: -.005em; }
.v3 .chapter h2 { font-size: 1.45rem; }
.v3 .panel-head { border-bottom-color: rgba(255, 255, 255, .06); }
/* Zahlen in Tabellen und Listen in JetBrains Mono, Abzeichen und Notizen in den Bedeutungsfarben */
.v3 main .num, .v3 .badge { font-family: var(--f-tab); }
.v3 .badge { font-weight: 400; background: rgba(255, 255, 255, .08); }
.v3 .warn-note { color: var(--v3-ember); }
.v3 .pill { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
.v3 mark { background: rgba(242, 196, 109, .24); color: inherit; border-radius: 3px; }
/* Fortschritt als Pixel-Balken wie auf der Startseite */
.v3 .progress { height: 12px; padding: 2px; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.v3 .progress > span, .v3 .gy-goal.done .progress span { border-radius: 2px; background: repeating-linear-gradient(90deg, var(--seg, var(--v3-moss)) 0 7px, rgba(0, 0, 0, .32) 7px 9px); }
.v3 .tt-tab .progress, .v3 .tt-head .progress { height: 8px; padding: 1px; border-radius: 3px; }
.v3 .tt-tab .progress > span, .v3 .tt-head .progress > span { background: repeating-linear-gradient(90deg, var(--seg, var(--v3-moss)) 0 4px, rgba(0, 0, 0, .32) 4px 5px); }
.v3 .gy-goal .progress, .v3 .gy-fresh .progress, .v3 .prog-panel .stat .progress { height: 12px; }
/* Kennzahl-Kacheln */
.v3 .stat { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: none; }
.v3 .stat:hover { border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.v3 .stat .v, .v3 .fact .v { font-family: var(--f-num); font-weight: 500; font-variant-numeric: tabular-nums; }
.v3 .stat .v { font-size: 1.35rem; }
.v3 .stat .v b, .v3 .fact .v b { font-weight: 600; }
.v3 .stat .v .muted { font-size: .72em; }
/* Umschalter und Filter-Chips */
.v3 .seg { gap: 2px; padding: 3px; border-color: rgba(255, 255, 255, .1); background: #11161e; }
.v3 .seg button { border-radius: 999px; color: var(--ink-soft); transition: background .2s, color .2s; }
.v3 .seg button:hover { color: var(--ink); }
.v3 .seg button[aria-selected="true"], .v3 .seg button[aria-pressed="true"] { background: var(--v3-gold); color: #1a1408; }
.v3 .chip { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.v3 .chip:hover { border-color: rgba(255, 255, 255, .26); }
.v3 .chip[aria-pressed="true"] { border-color: rgba(242, 196, 109, .55); background: rgba(242, 196, 109, .14); color: var(--v3-gold); }
/* Eingabefelder wie in der Nachschlage-Leiste */
.v3 main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .v3 main select, .v3 main textarea { background-color: #11161e; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; color: var(--ink); }
.v3 main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, .v3 main select:focus, .v3 main textarea:focus { outline: none; border-color: rgba(207, 227, 255, .45); box-shadow: 0 0 0 3px rgba(207, 227, 255, .12); }
.v3 main input[type="checkbox"], .v3 main input[type="radio"] { accent-color: var(--v3-moss); }
/* Aufklapper (Quests, Mods, Wirtschaft) */
.v3 details.quest { border-color: var(--line); border-radius: 12px; background: var(--surface); }
.v3 details.quest > summary { border-radius: 12px; transition: background .15s; }
.v3 details.quest > summary:hover { background: rgba(255, 255, 255, .025); }
.v3 details.quest[open] { border-color: rgba(255, 255, 255, .14); }
.v3 details.quest .body { border-top-color: rgba(255, 255, 255, .06); }
/* Herstellungsplan im Bauplaner: Spalte darf nicht breiter als die Kachel werden */
.v3 .ct, .v3 .cn-kids, .v3 .cn-eq { grid-template-columns: minmax(0, 1fr); }
.v3 .cn .perk-tag { max-width: 100%; white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .v3 .seg button, .v3 details.quest > summary { transition: none !important; }
}
/* Garten-Raster: Felder dürfen bis 42 px schrumpfen, damit weniger seitlich gescrollt werden muss */
.v3 .gd-plan { width: auto; min-width: min-content; }
/* Weitere Balken (Lager-Kategorien, Kaufmann-Beziehung, Truhen im Garten) ebenfalls als Pixel-Balken */
.v3 .lg-bar, .v3 .gd-chest-bar { padding: 2px; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.v3 .lg-bar { height: 12px; }
.v3 .gd-chest-bar { height: 8px; padding: 1px; border-radius: 3px; }
.v3 .lg-bar > span { border-radius: 2px; background: repeating-linear-gradient(90deg, var(--v3-gold) 0 7px, rgba(0, 0, 0, .32) 7px 9px); }
.v3 .kf-rel-bar { border-radius: 5px; background: rgba(255, 255, 255, .05); }
.v3 .kf-rel-bar > span { inset: 2px auto 2px 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--v3-moss) 0 7px, rgba(0, 0, 0, .32) 7px 9px); }
/* Auswahllisten mit langen Einträgen nie breiter als ihr Feld (z. B. Kisten-Rechner am Handy) */
.v3 main select { max-width: 100%; }
.v3 main .field { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
/* Lager „Wo liegt …?“: Vorschläge als Kacheln wie die Rucksack-Felder (Bild im Rahmen, Name, Menge als Abzeichen) */
.v3 .lg-picks-l { margin: 12px 0 8px; }
.v3 .lg-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.v3 .lg-pick { position: relative; flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 96px; padding: 12px 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: center; font-size: .82rem; line-height: 1.2; transition: border-color .2s, background .2s, transform .2s var(--v3-spring); }
.v3 .lg-pick:hover { border-color: rgba(242, 196, 109, .5); background: rgba(242, 196, 109, .06); transform: translateY(-2px); }
.v3 .lg-pick img { width: 44px; height: 44px; padding: 5px; border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .08), transparent 65%), #171d27; }
.v3 .lg-pick span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.v3 .lg-pick .num { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(242, 196, 109, .14); color: var(--v3-gold); font-size: .72rem; font-weight: 600; }
@media (max-width: 640px) { .v3 .lg-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Spielstand-Ampel: immer sichtbar als Kapsel in der Kopfzeile (die Kopfzeile klebt oben), Farbe nach Alter des Spielstands */
.v3 .topbar { position: sticky; top: 0; z-index: 30; }
.v3 .sidenav .save-stamp { display: none !important; }
.v3 .save-pill { --sp: #8d98a6; --sp-bg: rgba(255, 255, 255, .05); --sp-line: rgba(255, 255, 255, .14);
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 38px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--sp-line); background: var(--sp-bg);
  color: var(--ink); font: 500 .85rem/1 var(--f-body); text-decoration: none; white-space: nowrap; transition: background .3s, border-color .3s; }
.v3 .save-pill:hover { filter: brightness(1.15); }
.v3 .save-pill .dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--sp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp) 28%, transparent); }
.v3 .save-pill .sp-day { font-family: var(--f-num); font-weight: 600; }
.v3 .save-pill .sp-ago { color: var(--ink-soft); }
.v3 .save-pill[data-age="fresh"] { --sp: var(--v3-moss); --sp-bg: rgba(159, 212, 107, .12); --sp-line: rgba(159, 212, 107, .45); }
.v3 .save-pill[data-age="stale"] { --sp: var(--v3-violet); --sp-bg: rgba(179, 157, 255, .12); --sp-line: rgba(179, 157, 255, .45); }
.v3 .save-pill[data-age="old"] { --sp: #ff6b6b; --sp-bg: rgba(255, 107, 107, .12); --sp-line: rgba(255, 107, 107, .45); }
.v3 .save-pill[data-age="busy"] { --sp: var(--v3-ember); --sp-bg: rgba(255, 143, 94, .14); --sp-line: rgba(255, 143, 94, .5); }
.v3 .save-pill[data-age="busy"] .dot { animation: v3-sp-pulse 1.1s ease-in-out infinite; }
@keyframes v3-sp-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sp) 10%, transparent); opacity: .6; } }
@media (max-width: 640px) {
  .v3 .save-pill { min-height: 34px; padding: 0 10px; gap: 6px; font-size: .8rem; }
  .v3 .save-pill .sp-ago { display: none; }
  .v3 .topbar .wordmark { display: none; }  /* Platz für Suche und Spielstand; der Name steht in der Nachtszene bzw. im Menü */
}
@media (prefers-reduced-motion: reduce) { .v3 .save-pill .dot { animation: none !important; } }

/* ================================================================ Bauplaner, Layouts (Agent C) */
/* Bauplaner: Kopf mit Knöpfen, schmale Leiste „Geplant“, Materialliste als Kachelraster über die volle Breite, darunter Herstellung */
.v3 .pl3-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.v3 .pl3-head h1 { margin-right: auto; }
.v3 .pl3-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.v3 .pl3-acts .btn { min-height: 38px; padding: 0 12px; font-size: .88rem; background: rgba(12, 16, 22, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v3 .pl3-acts .btn:hover:not(:disabled) { background: rgba(30, 37, 48, .9); }
.v3 .pl3-acts .btn:disabled { opacity: 1; color: #5d6672; cursor: default; }
.v3 .pl3-acts .pl3-own { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; }
.v3 .pl3-own svg { display: block; width: 24px; height: 24px; }
.v3 .pl3-own[aria-expanded="true"] { border-color: rgba(242, 196, 109, .55); background: rgba(242, 196, 109, .1); }
.v3 .pl3-head + .lede { margin-top: 8px; }
/* Formular „Eigenes Projekt“ (aufklappbar) */
.v3 .pl3-form { margin: 0 0 16px; padding: 14px 16px; }
.v3 .pl3-form[hidden] { display: none; }
.v3 .pl3-form-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.v3 .pl3-form-h h2 { margin: 0; font-size: 1.1rem; }
.v3 .pl3-form-b { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
.v3 .pl3-form-b .toolbar { margin-bottom: 0; }
.v3 .pl3-own-list { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .07); }
.v3 .pl3-own-list h3 { margin-top: 0; font-size: .95rem; }
@media (max-width: 900px) { .v3 .pl3-form-b { grid-template-columns: minmax(0, 1fr); } .v3 .pl3-own-list { padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); } }
/* Geplant: kleine Karten nebeneinander – Haken, Name, Material in einer Zeile, Zähler */
.v3 .pl3-plan { margin: 6px 0 22px; }
.v3 .pl3-lbl { margin: 0 0 8px; font: 400 .74rem/1.3 "Silkscreen", monospace; letter-spacing: .05em; color: var(--v3-gold); text-transform: uppercase; }
.v3 .pl3-lbl .num { margin-left: 6px; color: var(--ink-soft); letter-spacing: 0; }
.v3 table.pl3-pt { display: block; width: 100%; }
.v3 .pl3-pt tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 6px; }
.v3 .pl3-pt tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; min-height: 52px; padding: 5px 6px 5px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .2s; }
.v3 .pl3-pt tr:hover { border-color: rgba(255, 255, 255, .16); }
.v3 .pl3-pt td { display: block; min-width: 0; padding: 0; border: 0; }
.v3 .pl3-pt td > .cb-cell { display: flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; margin: 0; cursor: pointer; }
.v3 .pl3-pn b { display: block; overflow: hidden; font-size: .9rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.v3 .pl3-pn b a { color: var(--ink); text-decoration: none; }
.v3 .pl3-pn b a:hover { text-decoration: underline; }
.v3 .pl3-pm { display: block; overflow: hidden; margin-top: 1px; color: #78838f; font-size: .74rem; white-space: nowrap; text-overflow: ellipsis; }
.v3 .pl3-pn .proj-parts { gap: 4px; margin-top: 4px; }
.v3 .pl3-pn .part-cb { min-height: 26px; padding: 1px 8px 1px 4px; font-size: .72rem; background: rgba(255, 255, 255, .03); }
.v3 .pl3-pt tr[data-done="1"] .pl3-pn { opacity: .5; }
.v3 .pl3-pt tr[data-done="1"] .pl3-pn b a { text-decoration: line-through; }
.v3 .pl3-ps .stepper { gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid rgba(242, 196, 109, .35); background: rgba(242, 196, 109, .06); }
.v3 .pl3-ps .stepper .btn, .v3 .pl3-ps > .btn { min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 1rem; line-height: 1; }
.v3 .pl3-ps > .btn { border: 1px solid rgba(255, 255, 255, .12); }
.v3 .pl3-ps .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.v3 .pl3-ps .stepper .num { min-width: 18px; color: var(--v3-gold); text-align: center; }
.v3 .pl3-lyic svg { display: block; width: 26px; height: 26px; margin: 0 auto; }
@media (pointer: coarse) { .v3 .pl3-ps .stepper .btn, .v3 .pl3-ps > .btn { min-width: 36px; min-height: 36px; } }
/* Materialliste: Kopf, Hinweis, Voraussetzungen, Kacheln je Materialart */
.v3 .pl3-mhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.v3 .pl3-mhead h2 { margin: 0; font-size: 1.5rem; }
.v3 .pl3-msum { color: var(--ink-soft); font-size: .92rem; }
.v3 .pl3-msum .num { font-size: 1.05rem; color: var(--ink); }
.v3 .pl3-msum .num.miss { color: var(--v3-ember); }
.v3 .pl3-tg { flex: none; margin-left: auto; min-height: 36px; font-size: .85rem; }
.v3 .pl3-hint { margin: 6px 0 4px; }
.v3 .pl3-mats .prereq { margin: 10px 0 4px; border-radius: 14px; border-color: var(--line); border-left-color: var(--v3-gold); background: rgba(255, 255, 255, .02); }
.v3 .pl3-gh { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 8px; font: 400 .74rem/1.3 "Silkscreen", monospace; letter-spacing: .05em; color: var(--v3-ember); text-transform: uppercase; }
.v3 .pl3-gh::after { content: ""; flex: 1; align-self: center; height: 1px; background: rgba(255, 255, 255, .06); }
.v3 .pl3-gh .num { color: var(--ink-soft); font-size: .9rem; letter-spacing: 0; }
.v3 .pl3-gh .num.ok { color: var(--v3-moss); }
.v3 .pl3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.v3 .pl3-tile { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "ic t q" "row row row" "st st st"; align-items: center; gap: 8px 10px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 50%), var(--surface); transition: border-color .2s; }
.v3 .pl3-tile:hover { border-color: rgba(255, 255, 255, .16); }
.v3 .pl3-ic { grid-area: ic; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .07), transparent 65%), #171d27; }
.v3 .pl3-ic img { max-width: 36px; max-height: 36px; image-rendering: pixelated; }
.v3 .pl3-t { grid-area: t; min-width: 0; }
.v3 .pl3-n { display: block; color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.v3 .pl3-n:hover { text-decoration: underline; }
.v3 .pl3-for { display: block; overflow: hidden; margin-top: 2px; color: #78838f; font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.v3 .pl3-q { grid-area: q; align-self: start; line-height: 1; text-align: right; }
.v3 .pl3-q .num { display: block; color: var(--v3-gold); font-size: 1.7rem; }
.v3 .pl3-q small, .v3 .pl3-l { font: 400 .58rem/1.2 "Silkscreen", monospace; letter-spacing: .04em; color: #78838f; text-transform: uppercase; }
.v3 .pl3-row { grid-area: row; display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
.v3 .pl3-row .cn-have { margin: 0; gap: 4px; }
.v3 .pl3-row input.have { width: 64px; min-height: 34px; padding: 4px 8px; text-align: right; }
.v3 .pl3-row .cn-ok { padding-block: 3px; }
.v3 .pl3-miss { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.v3 .pl3-miss.miss { color: var(--v3-ember); }
.v3 .pl3-miss .num { font-size: 1.15rem; font-weight: 400; }
.v3 .pl3-miss.ok { color: var(--v3-moss); }
.v3 .pl3-stock { grid-area: st; display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: .8rem; }
.v3 .pl3-stock > .pl3-l { flex: none; padding-top: 4px; }
.v3 .pl3-stock > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.v3 .pl3-stock .pl-stock-n { min-height: 0; }
.v3 .pl3-stock .pl-stock-at { display: -webkit-box; overflow: hidden; color: #78838f; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v3 .pl3-tile.done { border-color: rgba(159, 212, 107, .25); background: rgba(159, 212, 107, .035); }
.v3 .pl3-tile.done .pl3-ic, .v3 .pl3-tile.done .pl3-t, .v3 .pl3-tile.done .pl3-q, .v3 .pl3-tile.done .pl3-stock { opacity: .5; }
.v3 .pl3-tile.done .pl3-q .num { color: var(--ink-soft); }
.v3 .pl3-mats.only-miss .pl3-tile.done, .v3 .pl3-mats.only-miss .pl3-grp:not(:has(.pl3-tile:not(.done))) { display: none; }
/* Herstellung: mit Abstand darunter, volle Breite – Karten dürfen nebeneinander stehen */
.v3 .pl3-flow { margin-top: 36px; padding: 4px 18px 18px; }
.v3 .pl3-flow .flow-head { margin-top: 14px; }
.v3 .pl3-flow .flow-h { font-size: 1.5rem; }
.v3 .pl3-flow .view-baum > .cg > .ct { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); align-items: start; }
.v3 .pl3-flow .view-stufe .ct, .v3 .pl3-flow .view-station .ct { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
@media (max-width: 640px) { .v3 .pl3-flow { padding: 2px 12px 12px; } .v3 .pl3-tg { margin-left: 0; } }
/* Layouts: „Zusatzinfos aus der Tabelle“ als dunkle Tabellen (statt hellem Excel-Nachbau); Farben der Tabelle nur als Punkt */
.v3 .lyt-grid { columns: 280px; column-gap: 10px; margin: 0 0 16px; }
.v3 .lyt { min-width: 0; margin: 0 0 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); break-inside: avoid; -webkit-column-break-inside: avoid; }
.v3 .lyt-wide { column-span: all; -webkit-column-span: all; }
.v3 table.lyt-t { font-size: .88rem; }
.v3 .lyt-t caption { padding: 10px 12px 9px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--ink); font-size: .95rem; font-weight: 600; text-align: left; }
.v3 table.lyt-t th { position: static; padding: 7px 8px; font: 600 .74rem/1.25 var(--f-body); letter-spacing: .01em; text-transform: none; white-space: normal; vertical-align: bottom; cursor: default; }
.v3 .lyt-t td { padding: 6px 8px; border-bottom-color: rgba(255, 255, 255, .05); color: #d3d9e2; white-space: pre-line; vertical-align: middle; }
.v3 .lyt-t td.num { color: var(--ink); text-align: right; white-space: nowrap; }
.v3 .lyt-t td.lyt-nil { color: #5d6672; text-align: center; }
.v3 .lyt-t .lyt-long { color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
.v3 .lyt-t tr.lyt-sub th { padding-top: 12px; background: rgba(255, 255, 255, .02); color: var(--v3-gold); }
.v3 .lyt-t tbody tr:hover { background: rgba(255, 255, 255, .03); }
.v3 .lyt-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); vertical-align: -1px; }
.v3 .lyt-notes { padding: 10px 14px 12px; }
.v3 .lyt-notes h3 { margin: 0 0 8px; font-size: .95rem; }
.v3 .lyt-notes ul { margin: 0; padding-left: 1.2em; columns: 340px 2; column-gap: 32px; color: #d3d9e2; font-size: .9rem; line-height: 1.45; }
.v3 .lyt-notes li { margin-bottom: 6px; break-inside: avoid; }
/* Tabellen-Blätter (Fische, Events, Studien …): ganze Seite aus dunklen Tabellen, Einträge antippen = erledigt */
.v3 .lyt-lead { column-span: all; -webkit-column-span: all; margin: 0 0 12px; color: var(--ink); font-size: 1rem; font-weight: 600; }
.v3 .lyt-t .lyt-i { color: var(--ink-soft); font-style: italic; }
.v3 .lyt-t .ck { cursor: pointer; transition: background .15s; }
.v3 .lyt-t .ck:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.v3 .lyt-t .ck:focus-visible { outline: 2px solid rgba(207, 227, 255, .5); outline-offset: -2px; }
.v3 .lyt-t .ck.done { background: rgba(159, 212, 107, .1); color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(159, 212, 107, .7); }
.v3 .lyt-t .ck.done::after { content: "✓"; display: inline-block; margin-left: 5px; color: var(--v3-moss); font-weight: 700; text-decoration: none; }
/* Farbpunkt in Datenzellen links außen, damit er nicht allein in einer Zeile steht (Zellen behalten ihre Zeilenumbrüche) */
.v3 .lyt-t td.lyt-dc { position: relative; padding-left: 24px; }
.v3 .lyt-t td.lyt-dc > .lyt-dot { position: absolute; top: 50%; left: 8px; margin: -5px 0 0; }
/* Tabellen-Blätter sind dichter (Fische: 11 Spalten) – etwas kleiner setzen, damit sie auf dem iPad quer ohne Querscrollen passen */
.v3 .lyt-page table.lyt-t { font-size: .82rem; }
.v3 .lyt-page table.lyt-t th, .v3 .lyt-page .lyt-t td { padding: 5px 6px; }
.v3 .lyt-page .lyt-t td.lyt-dc { padding-left: 20px; }
.v3 .lyt-page .lyt-t td.lyt-dc > .lyt-dot { left: 6px; }
/* V3 ist immer dunkel: die Plan-Farben schaltet style.css nur bei dunklem System-Thema um – bei hellem iPad-Thema war der Plan weiß */
html:root.v3 { --paper: #1B2022; --grid: #2B3336; --wall: #B5BEB7; --obj-line: rgb(230 235 228 / .55); --tile-mix: 42%; --obj-ink: #E6EAE2; }

/* ================================================================ Garten, Taverne, Wirtschaft (Agent A) */
/* Garten: Liste neben den Feldern (Angepflanzt, Düngen möglich) im Mondlicht-Stil */
.v3 .gd-fc { border-color: rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.v3 .gd-fc-free { border-color: rgba(255, 255, 255, .12); background: transparent; }
.v3 .gd-fc-h > .num { color: #f3f5f8; }
.v3 .gd-cap li { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.v3 .gd-cap li:last-child { border-bottom: 0; }
.v3 .gd-cap li:not(.gd-cap-none) > b.num { color: var(--v3-moss); }
/* Taverne: Ware nur gelagert (nicht in der Taverne) gestrichelt in Gold */
.v3 .tv-item.has-out { border-color: rgba(242, 196, 109, .35); }
.v3 .tv-place b.num { color: var(--v3-gold); }

/* ==================================================================== Automatisierung, Angeln (Agent B) */
/* Zombie-Posten und Lieferketten: Karten im Mondlicht-Stil, Zustand als farbige Kante (Moos = bemannt/belegt, Gold = ohne Zombie) */
.v3 .auto-post, .v3 .auto-leg { border-radius: 14px; border-color: var(--line); background: rgba(255, 255, 255, .025); }
.v3 .auto-post.is-ok, .v3 .auto-leg.is-ok { border-left-color: var(--v3-moss); background: linear-gradient(90deg, rgba(159, 212, 107, .08), rgba(255, 255, 255, .02) 45%); }
.v3 .auto-post.is-idle, .v3 .auto-post.is-off, .v3 .auto-leg.is-idle { border-left-color: var(--v3-gold); }
.v3 .auto-post.is-plan, .v3 .auto-leg.is-none { border-left-color: rgba(255, 255, 255, .28); }
.v3 .auto-post-ic { border-radius: 10px; background: rgba(255, 255, 255, .04); }
.v3 .auto-post .pill-ok, .v3 .auto-leg .pill-ok, .v3 .auto-card .pill-ok { color: var(--v3-moss); background: rgba(159, 212, 107, .1); box-shadow: inset 0 0 0 1px rgba(159, 212, 107, .32); }
.v3 .auto-post .pill-warn, .v3 .auto-leg .pill-warn, .v3 .auto-card .pill-warn { color: var(--v3-gold); background: rgba(242, 196, 109, .1); box-shadow: inset 0 0 0 1px rgba(242, 196, 109, .32); }
.v3 .pill-plan { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: var(--ink-soft); }
.v3 .auto-zone { background: #11161e; border-color: rgba(255, 255, 255, .1); }
.v3 .auto-arrow.is-ok .auto-items { color: var(--v3-moss); }
.v3 .auto-arrow.is-ok .auto-line { background: var(--v3-moss); }
.v3 .auto-arrow.is-ok .auto-line::after { border-left-color: var(--v3-moss); }
.v3 .auto-arrow.is-idle .auto-items { color: var(--v3-gold); }
.v3 .auto-arrow.is-idle .auto-line { background: repeating-linear-gradient(90deg, var(--v3-gold) 0 6px, transparent 6px 10px); }
.v3 .auto-arrow.is-idle .auto-line::after { border-left-color: var(--v3-gold); }
.v3 .auto-goods > summary { border-radius: 10px; }
.v3 .auto-goods > summary:hover { color: var(--ink); }
/* Angeln: Wahl (Tageszeit, Angel, Köder) klebt unter der Kopfzeile – deckender Grund, damit die Tabellen nicht durchscheinen */
.v3 .fi-ctl { border-color: rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(12, 16, 22, .96); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9); }
@media (max-width: 640px) { .v3 .fi-ctl { border-radius: 14px; } }