/* ======================================================================
   account.css · Konto/Profil: Banner-Kopf, Reiter, Übersicht (Werte,
   Charaktere, Rekorde, Woche), Sammlung, Herausforderungen, Vergleich,
   Folge ich, Meldungen, Einstellungen, Login. Baut auf theme.css auf.
   ====================================================================== */
.acct{padding-top:var(--s5)}
.acct section + section{margin-top:var(--s5)}
.sect{margin:0 0 var(--s5)}
.sect h2{margin:0 0 var(--s3);font-size:var(--fs-4);text-transform:uppercase;letter-spacing:.02em;text-shadow:2px 2px 0 var(--edge)}
.private{display:flex;align-items:center;gap:var(--s3);color:var(--dim)}
.private img{width:32px;height:32px;opacity:.7}

/* ---------- Banner-Kopf ---------- */
.pbanner{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4);min-height:220px;padding:var(--s5);margin-bottom:var(--s4);
  border:3px solid var(--edge);border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 2px var(--line),4px 4px 0 var(--shadow);
  background:var(--banner,url(/assets/0.3/scenery/loading_forest.png)) 50% 50%/cover var(--bg-2);image-rendering:pixelated}
.pbanner[data-banner="wald"]{background-size:640px auto;background-repeat:repeat}
.pbanner[data-banner="weg"],.pbanner[data-banner^="dorf"],.pick[data-banner="weg"],.pick[data-banner^="dorf"]{image-rendering:auto}   /* Screenshots weich, Szenerie bleibt pixelig */
.pbanner::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,14,10,.88) 0%,rgba(8,14,10,.35) 55%,rgba(8,14,10,.1) 100%)}
.pbanner > *{position:relative}
.pavatar{width:128px;height:128px;background:var(--bg-2);border:3px solid var(--edge);border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--line),4px 4px 0 var(--shadow)}
.pinfo{flex:1;min-width:220px}
.pinfo h1{margin:0 0 var(--s2);font-size:clamp(1.6rem,4vw,2.4rem);text-shadow:3px 3px 0 var(--edge);word-break:break-word}
.pchips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pchips .chip{background:rgba(8,14,10,.8)}
.pbadges{display:flex;gap:var(--s2);margin-top:var(--s2)}
.pbadges span{display:grid;place-items:center;width:44px;height:44px;background:rgba(8,14,10,.8);border:2px solid var(--accent-2);border-radius:var(--radius-sm)}
.pbadges img{width:32px;height:32px}
.pactions{display:flex;flex-wrap:wrap;gap:var(--s2)}
@media(max-width:600px){.pavatar{width:64px;height:64px}.pbanner{min-height:180px;padding:var(--s4)}}


.ptabs{margin-bottom:var(--s4)}

/* ---------- Übersicht ---------- */
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.ptile{display:flex;flex-direction:column;gap:2px;padding:var(--s3);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.ptile b{font:700 var(--fs-4) var(--font-pixel);color:var(--accent-2);font-variant-numeric:tabular-nums}
.ptile span{font-size:var(--fs-1);color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-pixel)}
.ptile.fav{flex-direction:row;align-items:center;gap:var(--s2)}
.ptile.fav img{width:64px;height:64px}
.ptile.fav div{display:flex;flex-direction:column;gap:2px}
.pilots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--s2)}
.pilot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s2);text-align:center;background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.pilot img{width:64px;height:64px}
.pilot b{font:700 var(--fs-1) var(--font-pixel)}
.pilot small{font-size:var(--fs-1);color:var(--faint);line-height:1.3}
.pilot.locked img{filter:grayscale(1) brightness(.4)}
.pilot.locked b{color:var(--dim)}
.records td.best{color:var(--accent-2);font-family:var(--font-pixel)}
.records td.none{color:var(--faint)}
.records .who{display:flex;align-items:center;gap:var(--s2)}
.records .who img{width:32px;height:32px}
.weeks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.weeks li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s2) var(--s3);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.weeks img{width:32px;height:32px}
.weeks .w{font:700 var(--fs-2) var(--font-pixel);min-width:7em}
.weeks .r{margin-left:auto;font-family:var(--font-pixel);color:var(--accent-2)}

/* ---------- Sammlung ---------- */
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s3);color:var(--dim);font-size:var(--fs-2)}
.legend b{color:var(--text)}
.crystals{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2);margin-bottom:var(--s4)}
.crystal{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.crystal img{width:40px;height:46px}
.crystal b{display:block;font:700 var(--fs-4) var(--font-pixel);color:var(--accent-2)}
.crystal span{font-size:var(--fs-1);color:var(--dim)}
.clshead{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 var(--s2);font:700 var(--fs-2) var(--font-pixel);text-transform:uppercase;color:var(--accent)}
.clshead img{width:32px;height:32px}
.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2)}
.col-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s2) var(--s1);cursor:pointer;text-align:center;
  background:var(--panel-2);border:2px solid var(--line);border-top:4px solid var(--rar,var(--line));border-radius:var(--radius-sm)}
.col-card:hover,.col-card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.col-card img{width:64px;height:64px}
.col-card .nm{font-size:var(--fs-1);line-height:1.2;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-card.locked img{filter:grayscale(1) brightness(.35)}
.col-card.locked .nm{color:var(--faint)}
.col-card .lvl{font:700 var(--fs-1) var(--font-pixel);color:#fff;padding:1px 6px;border-radius:var(--radius-sm)}
.lvl.lv-1{background:var(--lv1)} .lvl.lv-2{background:var(--lv2)} .lvl.lv-3{background:var(--lv3)} .lvl.lv-4{background:var(--lv4)} .lvl.lv-5{background:var(--lv5)}
.lvl.spe{background:var(--c-spe);color:#05231a}
.r-gew{--rar:var(--c-gew)} .r-sel{--rar:var(--c-sel)} .r-epi{--rar:var(--c-epi)} .r-myt{--rar:var(--c-myt)} .r-leg{--rar:var(--c-leg)} .r-spe{--rar:var(--c-spe)}

/* ---------- Info-Fenster ---------- */
.itemdlg{width:min(94vw,560px)}
#itemBody{padding:var(--s4)}
.ii-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.ii-head img{width:64px;height:64px}
.ii-meta{font-size:var(--fs-2);color:var(--dim)}
.ii-tab tr.cur td{background:var(--gold-soft);color:var(--text);font-weight:700}

/* ---------- Herausforderungen ---------- */
.chals{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s2)}
.chal{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.chal.done{border-color:var(--ok)}
.chal img{width:48px;height:auto;max-height:56px;flex:0 0 auto}
.chal .t{flex:1;min-width:0;font-size:var(--fs-2)}
.chal .rw{display:block;font-size:var(--fs-1);color:var(--accent-2);font-family:var(--font-pixel)}
.bar{height:10px;margin-top:6px;background:var(--bg-2);border:2px solid var(--edge);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:var(--p)}
.chal.done .bar i{background:var(--ok)}
.chal .n{font:var(--fs-1) var(--font-pixel);color:var(--faint)}

/* ---------- Vergleich + Folge ich ---------- */
.cmp td.win{color:var(--ok);font-weight:700}
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:right}
.follows{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.follows li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s3);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.follows img{width:48px;height:48px}
.follows .who{font:700 var(--fs-3) var(--font-pixel)}
.follows .meta{color:var(--dim);font-size:var(--fs-2)}
.follows .btn{margin-left:auto;min-height:36px;padding:6px var(--s3)}

/* ---------- Meldungen ---------- */
.mr-card{padding:var(--s3);margin:0 0 var(--s2);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius-sm)}
.mr-card.sub{margin-left:var(--s5);border-left:4px solid var(--accent)}
.mr-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.mrlabel{font:700 var(--fs-2) var(--font-pixel);color:var(--dim)}
.mrtype{font:700 var(--fs-1) var(--font-pixel);padding:1px 6px;border-radius:var(--radius-sm);text-transform:uppercase}
.mrtype.bug{background:var(--c-myt);color:#fff} .mrtype.suggestion{background:var(--c-spe);color:#05231a} .mrtype.baukasten{background:var(--c-epi);color:#fff}
.mrstatus{font:700 var(--fs-1) var(--font-pixel);padding:1px 6px;border:2px solid;border-radius:var(--radius-sm)}

/* ---------- Einstellungen ---------- */
.set{margin:0 0 var(--s4)}
.set h3{margin:0 0 var(--s2);font-size:var(--fs-3);color:var(--accent-2);text-transform:uppercase}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:var(--s2)}
.pick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s1);cursor:pointer;color:var(--text);background:var(--panel-2);
  border:2px solid var(--line);border-radius:var(--radius-sm);font:700 var(--fs-1) var(--font-pixel)}
.pick img{width:64px;height:64px}
.pick[aria-pressed="true"]{border-color:var(--accent-2);box-shadow:inset 0 0 0 2px var(--accent-2)}
.pick:disabled{cursor:not-allowed;opacity:.45}
.colors{display:flex;gap:var(--s2);margin-top:var(--s2)}
.banners{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.banners .pick{height:84px;justify-content:flex-end;background:var(--b) 50% 50%/cover;image-rendering:pixelated}
.banners .pick span{background:rgba(8,14,10,.85);padding:1px 6px;border-radius:var(--radius-sm)}
.toggle{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;cursor:pointer}
.toggle input{width:22px;height:22px}
.toggle small{display:block;color:var(--dim);font-size:var(--fs-1)}
.danger-zone{border-left:4px solid var(--danger);padding-left:var(--s3)}
.email-ok{color:var(--ok)} .email-warn{color:var(--accent-2)} .email-none{color:var(--dim)}

/* ---------- Login ---------- */
.authwrap{max-width:560px;margin:0 auto}
.authwrap .page-head{margin-top:0} /* .acct bringt den Abstand schon mit */
.authcard .tabs{margin-bottom:var(--s4)}
.authcard .tabs .tab{flex:1}
.check{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);color:var(--dim);cursor:pointer}
.forgot{margin:var(--s3) 0 0;font-size:var(--fs-2)}