/* 1025DEX Community v0.31.35 · css/pokedex.css · ausgelagert aus index.html */
/* ---------- Pokédex ---------- */
.filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--panel);border:3px solid var(--line);border-radius:99px;
  padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap;
}
.chip.on{background:var(--red);color:#fff}
.search{
  width:100%;background:var(--panel);border:3px solid var(--line);border-radius:12px;
  padding:10px 12px;box-shadow:var(--shadow);
  font-size:16px; /* unter 16px zoomt iOS beim Antippen ins Feld hinein */
}
textarea.note{font-size:16px}
/* ---- Pokédex-Liste ---- */
.gensec{margin-bottom:10px}
.genhead{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--panel);border:3px solid var(--line);border-radius:12px;
  padding:9px 11px;box-shadow:var(--shadow);
}
.genhead.open{border-radius:12px 12px 0 0;box-shadow:none}
.genhead .gnum{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--red);color:#fff;
  border:2px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;
}
.genhead .grow b{display:block;font-size:14px;line-height:1.1}
.genhead .grow small{display:block;font-size:11px;color:var(--ink-soft)}
.genhead .gcount{margin-left:auto;font-size:12px;font-weight:800;color:var(--ink-soft)}
.genhead .gcount.done{color:var(--owned)}
.genhead .caret{font-size:13px;color:var(--ink-soft)}
.genlist{border:3px solid var(--line);border-top:0;border-radius:0 0 12px 12px;overflow:hidden;box-shadow:var(--shadow)}
.prow{
  width:100%;display:flex;align-items:center;gap:7px;text-align:left;
  background:var(--panel);border:0;border-top:1px solid var(--line-soft);padding:2px 9px;
}
.prow.status-pop{animation:rowConfirm 760ms var(--ease-soft) both}
.prow.status-pop .dot{animation:statusPop 680ms var(--ease-fluid) both}
.genlist .prow:first-child{border-top:0}
.prow.open{background:var(--panel-2)}
.prow .psprite{width:34px;height:34px;flex:0 0 34px;object-fit:contain}
/* Pokémon-Grafiken: eine Quelle, feste Bühne, gleiche visuelle Behandlung */
.ui-pokemon-sprite{object-fit:contain!important;object-position:center!important;image-rendering:auto!important;filter:none!important;opacity:1!important}
.detail-pokemon-sprite{width:82px!important;height:82px!important;flex:0 0 82px!important;transform:scale(1.08);transform-origin:center}
.dex-detail-hero{align-items:center!important}
.prow .ui-pokemon-sprite{transform:scale(1.08);transform-origin:center}
.cell .ui-pokemon-sprite{padding:5px;transform:scale(1.04);transform-origin:center}
.prow .pnum{font-size:9px;color:var(--ink-soft);flex:0 0 34px}
.prow .pname{flex:1 1 auto;min-width:0;overflow:hidden}
.prow .pname b{display:block;font-size:13px;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pname small{display:block;font-size:9px;line-height:1.15;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .ptypes{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.ptype{font-size:7px;font-weight:800;color:#fff;border-radius:3px;padding:1px 3px;letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.prow .dot{position:static;width:11px;height:11px;flex:0 0 11px;border-radius:50%;border:2px solid var(--line)}
.prow .caret{font-size:12px;color:var(--ink-soft);flex:0 0 10px}
.pdet{background:var(--panel-2);border-top:2px solid var(--line-soft);padding:11px;transform-origin:top;animation:detailOpen var(--motion-base) var(--ease-fluid) both;will-change:transform,opacity}
.pdet{position:relative;overflow:hidden;isolation:isolate}
.pdet::before,.dex-detail-hero::before{
  content:attr(data-number);position:absolute;right:4px;top:-12px;z-index:0;
  font-size:clamp(54px,18vw,104px);font-weight:900;letter-spacing:-.08em;
  color:var(--ink);opacity:.045;line-height:1;pointer-events:none;white-space:nowrap;
}
.pdet>*{position:relative;z-index:1}
.pdet .slotcards{grid-template-columns:1fr 1fr}
.dex-detail-hero{position:relative;isolation:isolate;overflow:hidden;min-height:76px;border-radius:12px}
.dex-detail-hero>*{position:relative;z-index:1}
/* Suchleiste bleibt beim Scrollen unter dem Kopf stehen */
:root,#v-scan{--muted:var(--ink-soft);--soft:var(--panel-2);--paper:var(--panel)}
:root{--hh:64px}
.stickybar{position:sticky;top:var(--hh);z-index:30;background:var(--bg);
  margin:-12px -12px 10px;padding:10px 12px 8px}
.stickybar::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;
  background:linear-gradient(var(--bg),transparent);pointer-events:none}
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
/* Galerie: vier Pokemon nebeneinander. Damit bei 390 Bildpunkten
   Breite noch etwas uebrig bleibt, sind Abstand und Innenrand kleiner
   als in der Listenansicht. */
.dexgallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dexgallery .cell{padding:4px;background:var(--panel);transition:transform var(--motion-fast) var(--ease-fluid),box-shadow var(--motion-fast) ease}
.dexgallery .cell:active{transform:scale(.975)}
.dexgallery .cell img{border-radius:8px;background:var(--panel-2)}
.dexgallery .cell.card img{aspect-ratio:.72}
.dexgallery .cell .nm{font-size:10px;padding:4px 1px 2px}
.dexgallery .cell.s-owned{border-color:var(--owned)}
.dexgallery .cell.s-wish{border-color:var(--wish)}
@media (min-width:620px){.dexgallery{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}}
.cell{
  position:relative;background:var(--panel-2);border:3px solid var(--line);border-radius:12px;
  padding:4px;text-align:center;overflow:hidden;
}
.cell .num{position:absolute;top:3px;left:5px;font-size:9px;font-weight:800;color:var(--ink-soft)}
.cell img{width:100%;aspect-ratio:1;object-fit:contain;display:block}
.cell.card img{aspect-ratio:.72;object-fit:cover;border-radius:6px}
.cell .nm{font-size:10px;font-weight:700;line-height:1.15;padding:2px 1px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .dot{position:absolute;top:3px;right:4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--line)}
.d-owned{background:var(--owned)}.d-wish{background:var(--wish)}.d-empty{background:var(--empty)}.d-art{background:var(--art)}
/* In der Galerie sitzt der Statuspunkt oben rechts. Der Artwork-Punkt
   rueckt genau eine Punktbreite nach links, damit sich beide nicht
   ueberdecken. */
.cell .dot.d-art{right:17px}
.layout-switch{display:flex;gap:3px;border:2px solid var(--line);border-radius:9px;padding:2px;background:var(--panel-2)}
.layout-switch button{border:0;border-radius:6px;background:transparent;color:var(--ink-soft);padding:4px 8px;font-size:11px;font-weight:800}
.layout-switch button.on{background:var(--red);color:#fff}