/* ======================================================================
   home.css · Startseite. Der Waldweg des Seitenhintergrunds (theme.css) ist
   die Bühne: oben laufen Charaktere darauf, darunter wird er abgedunkelt.
   ====================================================================== */
body.home{--scene-clear:420px}

/* ---------- Hero: Titel im Spiel-Look, Charaktere auf dem Weg ---------- */
.hero{position:relative;min-height:clamp(460px,calc(70 * var(--vh)),620px);display:flex;align-items:center;overflow:hidden}

.walkers{position:absolute;left:calc(50% + 40px);top:clamp(48px,calc(12 * var(--vh)),110px);width:0;height:0}
.walkers img{position:absolute;left:var(--x);top:var(--y);max-width:none;transform:translateX(-50%);filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.hero-inner{position:relative;width:100%;padding-block:var(--s7)}
.hero-title{margin:0 0 var(--s4);color:var(--title);font-size:clamp(2.6rem,8vw,5.4rem);line-height:.95;text-transform:uppercase;
  letter-spacing:.02em;text-shadow:4px 0 0 var(--edge),-4px 0 0 var(--edge),0 4px 0 var(--edge),0 -4px 0 var(--edge),
  4px 4px 0 var(--edge),-4px -4px 0 var(--edge),4px -4px 0 var(--edge),-4px 4px 0 var(--edge),8px 8px 0 rgba(0,0,0,.35)}
.hero-tag{max-width:34ch;margin:0 0 var(--s5);padding:var(--s3) var(--s4);font-size:var(--fs-4);line-height:1.45;
  background:rgba(10,18,13,.72);border:3px solid var(--edge);border-radius:var(--radius);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero-meta{display:inline-block;margin:var(--s4) 0 0;padding:var(--s1) var(--s2);color:var(--text);font:var(--fs-2) var(--font-pixel);
  background:rgba(10,18,13,.72);border-radius:var(--radius-sm)}
.feed .pic.none{display:grid;place-items:center}
.feed .pic.none img{width:28px;height:auto;opacity:.6}
@media(max-width:860px){
  /* Handy: die Läufer bekommen einen eigenen Bereich über dem Text */
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .walkers{position:relative;left:auto;top:auto;width:100%;height:320px;flex:0 0 auto;margin-top:var(--s3)}
  .walkers img{left:calc(50% + var(--x) - 20px)}
  .hero-inner{padding-block:0 var(--s6)}
}
.swipe-hint{margin:var(--s2) 0 0;color:var(--text);font:var(--fs-2) var(--font-pixel);text-shadow:2px 2px 0 var(--edge)}

/* ---------- Persönlicher Bereich ---------- */
.me{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.me img{width:64px;height:64px}
.me b{display:block;font:700 var(--fs-4) var(--font-pixel)}
.me .stats{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.me .btn{margin-left:auto}

/* ---------- Das Dorf: Gebäude auf einer Lichtung, Wegweiser darunter ---------- */
/* Volle Seitenbreite, mittig; ist das Fenster schmaler als das Dorf, wird gewischt. */
.village-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:0 var(--s4) var(--s3)}
.village{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:clamp(var(--s2),1vw,var(--s5));
  width:max-content;margin-inline:auto;padding:var(--s6) var(--s5) 0;
  /* Lichtung mit Pixel-Treppen-Ecken */
  clip-path:polygon(0 24px,8px 24px,8px 16px,16px 16px,16px 8px,24px 8px,24px 0,calc(100% - 24px) 0,calc(100% - 24px) 8px,
    calc(100% - 16px) 8px,calc(100% - 16px) 16px,calc(100% - 8px) 16px,calc(100% - 8px) 24px,100% 24px,100% calc(100% - 24px),
    calc(100% - 8px) calc(100% - 24px),calc(100% - 8px) calc(100% - 16px),calc(100% - 16px) calc(100% - 16px),calc(100% - 16px) calc(100% - 8px),
    calc(100% - 24px) calc(100% - 8px),calc(100% - 24px) 100%,24px 100%,24px calc(100% - 8px),16px calc(100% - 8px),16px calc(100% - 16px),
    8px calc(100% - 16px),8px calc(100% - 24px),0 calc(100% - 24px))}
/* Grasrand und Dorfweg (die Gebäude stehen mit der Tür am Weg) */
/* Boden: Dorfplatz-Streifen 1280×320 (Weg bei y 192–272), darüber Wiese in derselben Farbe */
.village{background:var(--plaza) 0 100%/1280px 320px repeat-x,var(--grass);--plaza:url(/assets/0.3/scenery/dorfplatz_tag_x2.png)}
:root[data-theme="night"] .village{--plaza:url(/assets/0.3/scenery/dorfplatz_nacht_x2.png)}
.village::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:inset 0 0 0 10px var(--grass-dark)}
.bld{display:flex;flex-direction:column;align-items:center;color:var(--text);scroll-snap-align:center;padding-bottom:56px}
.bld:hover,.bld:focus-visible{text-decoration:none}
.bld-art{width:calc(var(--w) * var(--k,1));height:calc(var(--h) * var(--k,1));image-rendering:pixelated;
  background:var(--day) 0 0/calc(var(--frames,1) * 100%) 100% no-repeat;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.25))}
:root[data-theme="night"] .bld-art{background-image:var(--night)}
.bld:hover .bld-art,.bld:focus-visible .bld-art{animation:door .28s steps(3) forwards}
.bld[data-frames="1"]:hover .bld-art,.bld[data-frames="1"]:focus-visible .bld-art{animation:none}
@keyframes door{to{background-position:100% 0}}
/* Holz-Wegweiser auf dem Weg */
.sign{display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;margin-top:8px}
.sign span{padding:4px 12px;font-size:var(--fs-2);line-height:1.2;transition:transform .12s}
.sign small{display:block;font:var(--fs-1)/1.3 var(--font-body);text-transform:none;color:#f6e2c2}
.bld:hover .sign span,.bld:focus-visible .sign span{transform:translateY(-3px);box-shadow:inset 0 0 0 2px #e0a25c,3px 6px 0 rgba(0,0,0,.3)}

/* ---------- Diese Woche ---------- */
.week .runner{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s3)}
.week .runner img{flex:0 0 auto}
.week .runner b{display:block;font:700 var(--fs-4) var(--font-pixel)}
.mini-top{list-style:none;margin:var(--s3) 0 0;padding:0;font-size:var(--fs-2)}
.mini-top li{display:flex;gap:var(--s2);padding:var(--s1) 0;border-top:2px solid var(--panel-2)}
.mini-top .r{font-family:var(--font-pixel);color:var(--accent-2);min-width:2.2em}
.mini-top .v{margin-left:auto;font-family:var(--font-pixel);color:var(--dim)}
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.offer{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s2) var(--s1);text-align:center;
  background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.offer img{width:64px;height:64px}
.offer .n{font-size:var(--fs-1);line-height:1.25;min-height:2.5em}
.offer .p{font:700 var(--fs-1) var(--font-pixel);color:var(--accent-2);display:flex;align-items:center;gap:3px}
.offer .p img{width:20px;height:23px}
.offer.owned{border-color:var(--accent)}
.offer s{color:var(--faint)}
.recipe{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin:var(--s3) 0;font:700 var(--fs-4) var(--font-pixel);color:var(--faint)}
.recipe figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:84px}
.recipe img{width:64px;height:64px;background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.recipe figcaption{font:var(--fs-1)/1.25 var(--font-body);color:var(--dim);text-align:center}
.recipe .evo img{border-color:var(--accent-2)}
.evo-name{font:700 var(--fs-4) var(--font-pixel);color:var(--accent-2);text-align:center;margin:0 0 var(--s2)}

/* ---------- Neu in 0.3 ---------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s3)}
.feat{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);background:var(--panel);border:3px solid var(--edge);
  border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 var(--shadow)}
.feat img{flex:0 0 auto;width:auto;max-height:72px}
.feat b{display:block;font:700 var(--fs-3) var(--font-pixel);color:var(--accent)}
.feat span{color:var(--dim);font-size:var(--fs-2)}
.numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;color:var(--text);font:var(--fs-2) var(--font-pixel);
  text-shadow:2px 2px 0 var(--edge)}
.numbers b{color:var(--accent-2);font-size:var(--fs-4);margin-right:6px}

/* ---------- Charaktere: 4 Spielerfarben auf dem Weg, darunter die Karten ---------- */
/* Waldweg in Seitenansicht: 4 Ebenen (Himmel, ferne Bäume, nahe Bäume, Weg), je 1280×400, waagerecht kachelbar.
   Die Ebenen ziehen unterschiedlich schnell vorbei, die Charaktere laufen auf der Stelle (Füße bei y 340–376). */
.koop{position:relative;height:400px;margin:0 0 var(--s5);overflow:hidden;border:3px solid var(--edge);border-radius:var(--radius);
  box-shadow:inset 0 0 0 2px var(--line),4px 4px 0 var(--shadow);
  --sky:url(/assets/0.3/scenery/waldweg/himmel_tag_x2.png);--far:url(/assets/0.3/scenery/waldweg/ferne_baeume_tag_x2.png);
  --near:url(/assets/0.3/scenery/waldweg/nahe_baeume_tag_x2.png);--path:url(/assets/0.3/scenery/waldweg/weg_tag_x2.png)}
:root[data-theme="night"] .koop{--sky:url(/assets/0.3/scenery/waldweg/himmel_nacht_x2.png);--far:url(/assets/0.3/scenery/waldweg/ferne_baeume_nacht_x2.png);
  --near:url(/assets/0.3/scenery/waldweg/nahe_baeume_nacht_x2.png);--path:url(/assets/0.3/scenery/waldweg/weg_nacht_x2.png)}
.layer{position:absolute;inset:0;background:0 0/1280px 400px repeat-x;animation:walk linear infinite}
.layer.sky{background-image:var(--sky);animation-duration:80s}
.layer.far{background-image:var(--far);animation-duration:27s}
.layer.near{background-image:var(--near);animation-duration:13s}
.layer.path{background-image:var(--path);animation-duration:8s}
@keyframes walk{to{background-position-x:-1280px}}
.runners{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;align-items:flex-end;gap:clamp(var(--s3),5vw,var(--s7))}
.runners img{max-width:none}
.koop-label{position:absolute;left:var(--s3);top:var(--s3);z-index:1;font:700 var(--fs-2) var(--font-pixel);background:var(--bg-2);color:var(--text);
  border:3px solid var(--edge);padding:2px var(--s2);border-radius:var(--radius-sm)}
@media(max-width:600px){.koop{height:300px}.layer{background-position-y:-100px}.runners{bottom:28px}}
@media(prefers-reduced-motion:reduce){.layer{animation:none}}
.chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.char{background:var(--panel);border:3px solid var(--edge);border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 var(--shadow)}
.char summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s3) var(--s2)}
.char summary::-webkit-details-marker{display:none}
.char .stage{height:116px;display:flex;align-items:flex-end}
.char summary b{font:700 var(--fs-2) var(--font-pixel)}
.char summary span{font-size:var(--fs-1);color:var(--accent-2)}
.char[open]{grid-column:span 2;box-shadow:inset 0 0 0 2px var(--accent),3px 3px 0 var(--shadow)}
.char .more{padding:0 var(--s3) var(--s3);font-size:var(--fs-2)}
.char .more p{margin:0 0 var(--s1)}
.unlock{color:var(--faint)}

/* ---------- Gegner ---------- */
.foes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s3)}
.foe{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s1);padding:var(--s3) var(--s2);text-align:center}
.foe .art{height:128px;display:flex;align-items:flex-end}
.foe img{width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k))}
.foe b{font:700 var(--fs-2) var(--font-pixel)}
.foe span{font-size:var(--fs-1);color:var(--faint)}

/* ---------- Eindrücke + Lightbox ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)}
.shots button{padding:0;border:3px solid var(--edge);border-radius:var(--radius);overflow:hidden;cursor:zoom-in;background:var(--bg-2);
  box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 var(--shadow);line-height:0}
.shots button:hover img{transform:scale(1.04)}
.shots img{width:100%;height:auto;aspect-ratio:16/9;transition:transform .3s var(--ease)}
.lightbox{width:min(96vw,1300px);max-width:none;background:var(--bg-2)}
.lightbox::backdrop{background:rgba(0,0,0,.82)}
.lightbox img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.lightbox p{margin:0;padding:var(--s2) var(--s4);font:var(--fs-2) var(--font-pixel);color:var(--dim)}
.lightbox button{position:absolute;min-width:44px;min-height:44px;border:3px solid var(--edge);border-radius:var(--radius);
  background:var(--panel);color:var(--text);font:700 var(--fs-3) var(--font-pixel);cursor:pointer}
.lightbox button:hover{background:var(--panel-3)}
.lb-prev{left:var(--s2);top:45%} .lb-next{right:var(--s2);top:45%} .lb-close{right:var(--s2);top:var(--s2)}

/* ---------- Community: Karten mit Kopfleiste, Medaillen, Porträts, großen Zahlen ---------- */
.lb-group{margin:0 0 var(--s3)}
.lb-group:last-child{margin:0}
.lb-group .chip{margin-bottom:var(--s1)}
.lb-row{display:flex;align-items:center;gap:var(--s2);padding:5px 0}
.medal{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;font:700 var(--fs-2) var(--font-pixel);color:#1b1305;
  border:3px solid var(--edge);border-radius:var(--radius-sm);box-shadow:inset -3px -3px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.35)}
.medal.r1{background:var(--rank1)} .medal.r2{background:var(--rank2)} .medal.r3{background:var(--rank3)}
.lb-row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lb-row .val{font:700 var(--fs-2) var(--font-pixel);color:var(--accent-2);white-space:nowrap}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.feed li{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s2);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.feed .pic{flex:0 0 auto;width:64px;height:64px;background:var(--bg-2);border:2px solid var(--edge);border-radius:var(--radius-sm);overflow:hidden}
.feed .pic img{display:block;width:64px;height:64px}
.feed .txt{flex:1;min-width:0}
.feed .who{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .meta{display:block;font-size:var(--fs-1);color:var(--dim)}
.feed .when{font:700 var(--fs-1) var(--font-pixel);color:var(--faint);white-space:nowrap}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.totals div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s3) var(--s2);text-align:center;
  background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.totals img{width:auto;height:auto;max-width:64px;max-height:64px}
.totals b{font:700 var(--fs-4) var(--font-pixel);color:var(--accent-2);font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 var(--edge)}
.totals span{font-size:var(--fs-1);color:var(--dim)}

/* Discord: Holzschild mit laufenden Haustieren */
.discord{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4) var(--s5);margin-top:var(--s5);padding:var(--s5) var(--s6);
  color:#fff1d6;border:4px solid #3b2414;border-radius:var(--radius);box-shadow:inset 0 0 0 3px #b07a49,6px 6px 0 var(--shadow);
  background:repeating-linear-gradient(180deg,#8a5a34 0 22px,#7b4f2d 22px 25px)}
.discord:hover{text-decoration:none;box-shadow:inset 0 0 0 3px #e0a25c,6px 6px 0 var(--shadow)}
.discord-text{flex:1;min-width:220px;color:#f6e2c2;text-shadow:2px 2px 0 #3b2414}
.discord-text b{display:block;font:700 var(--fs-5)/1.1 var(--font-pixel);color:#fff1d6;text-transform:uppercase;margin-bottom:var(--s1)}
.pets{display:flex;gap:var(--s3);align-items:flex-end}
.pet{display:block;width:96px;height:84px;background:var(--pet) 0 0/384px 84px no-repeat;image-rendering:pixelated;animation:pet-walk .55s steps(4) infinite}
@keyframes pet-walk{to{background-position:-384px 0}}
@media(max-width:600px){.pet{width:64px;height:56px;background-size:256px 56px;animation-name:pet-walk-s}.discord{padding:var(--s4)}}
@keyframes pet-walk-s{to{background-position:-256px 0}}

/* ---------- Fragen: Gelehrter als Gastgeber (Bausteine in theme.css), auf der Startseite zweispaltig ---------- */
.home .faq{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.faq details p{margin:0}

/* ---------- Download ---------- */
a.card.dlcard{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.dlcard b{font:700 var(--fs-4) var(--font-pixel)}
.dlcard .btn{margin-top:var(--s2)}
.dlcard.recommended{box-shadow:inset 0 0 0 2px var(--accent-2),4px 4px 0 var(--shadow)}
.dlcard.recommended::after{content:"Dein System";align-self:flex-start;order:-1;font:700 var(--fs-1) var(--font-pixel);
  color:var(--accent-2-ink);background:var(--accent-2);padding:2px 6px;border-radius:var(--radius-sm)}