/* 1025DEX Community v0.31.35 · css/base.css · ausgelagert aus index.html */
:root{
  --red:#d13b32; --red-dark:#a82a22; --lens:#3b82f6;
  --bg:#ece9e4; --panel:#ffffff; --panel-2:#f6f4f1;
  --ink:#16161c; --ink-soft:#5d5d68; --line:#16161c;
  --line-soft:#d6d2cc;
  --empty:#b7b2ab; --owned:#2e9e4f; --wish:#8b4fbf; --art:#2f72c9;
  --shadow:0 2px 0 var(--line), 0 7px 14px rgba(22,22,28,.10);
  --radius:18px;
  --ease-fluid:cubic-bezier(.22,1,.36,1);
  /* Fuers Gleiten der Reiter-Markierung: sanft anfahren, sanft ausrollen.
     --ease-fluid schnappt fast sofort auf 80% und wirkt dadurch hart. */
  --ease-glide:cubic-bezier(.42,0,.2,1);
  --glide:420ms;
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --motion-fast:160ms;
  --motion-base:280ms;
  --motion-slow:420ms;
}
html[data-theme="dark"]{
  --red:#c23a31; --red-dark:#8e241e; --lens:#4f8ef7;
  --bg:#0f0f15; --panel:#1d1d26; --panel-2:#262631;
  --ink:#f4f3f7; --ink-soft:#b4b3c0; --line:#4a4a58;
  --line-soft:#33333f;
  --empty:#42424f; --owned:#3cbe63; --wish:#a86ce0; --art:#5aa0ea;
  --shadow:0 2px 0 rgba(0,0,0,.65), 0 7px 14px rgba(0,0,0,.38);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/* scrollbar-gutter: Platz für die Scrollleiste bleibt immer reserviert -
   sonst springt beim Reiterwechsel die Breite und die Übergänge wackeln */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;transition:transform var(--motion-fast) var(--ease-fluid),box-shadow var(--motion-fast) ease,filter var(--motion-fast) ease}
button:active{filter:brightness(.96);transform:translateY(1px) scale(.975)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Pokédex-Kopf ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:var(--red);
  border-bottom:4px solid var(--line);
  padding:calc(12px + env(safe-area-inset-top)) max(15px, calc((100% - 760px)/2)) 11px;
  display:flex; align-items:center; gap:12px;
}
header::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.3)}
.lens{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;position:relative;
  background:radial-gradient(circle at 33% 28%, #eaf4ff 0%, #7db2f7 30%, var(--lens) 62%, #16386e 100%);
  border:3px solid var(--line);
  box-shadow:0 2px 5px rgba(0,0,0,.22), inset 0 0 0 3px rgba(255,255,255,.28);
}
.lens::after{content:"";position:absolute;left:7px;top:6px;width:9px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.9);transform:rotate(-24deg)}
.brand{flex:1 1 auto;min-width:0}
.brand b{display:block;font-family:'Archivo Black','Archivo',sans-serif;font-weight:normal;font-size:16px;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{display:block;font-size:9px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hbtn{
  background:var(--panel);border:3px solid var(--line);border-radius:12px;
  padding:7px 11px;font-size:13px;font-weight:800;line-height:1;
}
.hbtn:active{transform:translateY(2px)}
#whoBtn{white-space:nowrap;padding:7px 10px}
.hbtn{flex:0 0 auto}

/* ---------- Layout ---------- */
main{padding:12px;max-width:760px;margin:0 auto}
.view{display:none}
.view.on{display:block}
.view.flow-in{animation:mainViewIn 360ms var(--ease-fluid) both}
.view.flow-in.von-rechts{animation:schubRein 380ms var(--ease-glide) both}
.view.flow-in.von-links {animation:schubReinR 380ms var(--ease-glide) both}
.panel{
  background:var(--panel);border:3px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow); padding:15px 16px 14px; margin-bottom:13px;
}
.panel h2{margin:0 0 11px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:800;display:flex;align-items:center;gap:8px}
.panel h2::after{content:"";flex:1 1 auto;height:3px;background:var(--panel-2);border-radius:3px}
.row{display:flex;gap:8px;align-items:center}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.muted{color:var(--ink-soft)}
.tiny{font-size:12px}

/* ---------- Nav ---------- */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  background:var(--panel);border-top:4px solid var(--line);
  padding:8px max(9px, calc((100% - 760px)/2)) calc(10px + env(safe-area-inset-bottom));
}
nav button{
  background:none;border:0;border-radius:13px;padding:7px 2px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:8.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:800;
  color:var(--ink-soft);
}
nav button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Die rote Markierung ist ein eigenes Element und wandert zum neuen Reiter,
   statt dort aufzupoppen. Sie liegt hinter den Knoepfen; die Knoepfe selbst
   aendern beim Wechsel nur noch ihre Farbe, damit sich die Groesse der
   Flaeche nicht mitten in der Bewegung aendert. */
.navpille{
  position:absolute;z-index:0;left:0;top:0;width:0;height:0;
  border-radius:13px;background:var(--red);border:3px solid var(--line);
  transition:left var(--glide) var(--ease-glide),
             top var(--glide) var(--ease-glide),
             width var(--glide) var(--ease-glide),
             height var(--glide) var(--ease-glide);
  pointer-events:none;
  /* Beim Reiterwechsel laeuft ein Ansichtsuebergang, waehrenddessen die Nav
     eingefroren ist - eine CSS-Bewegung darin waere unsichtbar. Mit eigenem
     Namen wird die Pille aus dem Schnappschuss herausgeloest und vom
     Uebergang selbst von der alten zur neuen Stelle bewegt. */
  view-transition-name:nav-pille;
}
nav button{position:relative;z-index:1}
nav button.on{color:#fff}
@media (prefers-reduced-motion:reduce){ .navpille{transition:none} }
nav button.nav-catch svg{animation:navCatch 620ms var(--ease-fluid) both}