/* Pokédex als Ladenposter.
   Der Pokédex bildet ausschließlich das Gen-1-Poster ab, das im Laden hängt
   (static/assets/pokedex-poster.webp). Aufbau: ein graues Grundposter, darüber
   je ein farbiger Ausschnitt für jedes gefangene Pokémon und ein dauerhaft
   farbiger Ausschnitt für das Logo. Alle Maße sind Prozentwerte der
   Posterfläche, damit das Raster bei jeder Breite sitzt. */

/* Das Poster ist die einzige Bildquelle fuer Pokémon-Funde - auch ausserhalb
   des Pokédex (Fang-Einblendung, Kassenbonus). */
:root { --poster: url("/static/assets/pokedex-poster.webp?v=20260904-poster-kopf-v2"); }

.poster-panel { margin-bottom: .8rem; }

/* Einzelner Fund ausserhalb des Posters. Breite steht hier, das
   Seitenverhaeltnis setzt app.js aus dem Posterfeld. */
.poster-fund {
  display: block; background-image: var(--poster); background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 66%, transparent 99%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 66%, transparent 99%);
}
.poster-fund-toast { width: 132px; margin: .35rem auto .1rem; }
.scan-bonus-content > .poster-fund-bonus { width: 3.4rem; flex: none; }
#overlay.is-pack-opening .scan-bonus-content > .poster-fund-bonus { width: 3rem; }

.poster-frame {
  position: relative; overflow: auto; border-radius: var(--r-card);
  background: var(--mist); -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-x pan-y;
  height: min(62vh, 600px);
  display: flex; align-items: flex-start; justify-content: center;
}

.poster-stage { position: relative; flex: none; width: 100%; }

/* Nur teilweise entsättigt: das Papier behält seinen Ton, damit ein farbiger
   Ausschnitt nicht als heller Kasten auf grauem Grund auffällt. */
.poster-base {
  display: block; width: 100%; height: auto;
  filter: grayscale(.88) contrast(.92);
}

.poster-cut {
  position: absolute; background-image: var(--poster);
  background-repeat: no-repeat; pointer-events: none;
}

/* Das Logo gehört zum Poster und bleibt immer farbig. */
/* Lage und Groesse kommen aus POSTER_LOGO in app.js, damit Ausschnitt und
   Kasten nicht auseinanderlaufen. Das Logo bleibt Teil des grauen Posters und
   bekommt seine Farbe erst, wenn alle 151 Felder gefangen sind. */
.poster-logo {
  background-image: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 66%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 66%, transparent 100%);
}
.poster-logo.is-voll {
  background-image: var(--poster);
  animation: poster-auf 1.4s cubic-bezier(.2, .8, .2, 1) 1;
}

.poster-cell {
  position: absolute; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.poster-cell::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s;
}
.poster-cell:focus-visible::after { box-shadow: inset 0 0 0 2px var(--black); }

/* Weicher Ausschnitt statt Kasten: das Pokémon und ein Stueck Poster darum
   blenden zum Rand hin aus, damit keine Kante auf dem Papier steht. */
.poster-cell .poster-cut {
  inset: 0; width: 100%; height: 100%; background-image: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 44%, #000 56%, transparent 92%);
  mask-image: radial-gradient(ellipse at 50% 44%, #000 56%, transparent 92%);
}
.poster-cell.is-caught .poster-cut { background-image: var(--poster); }

/* Neuzugang seit dem letzten Öffnen: kommt einmal ruhig herein, kein Blitz. */
.poster-cell.is-new .poster-cut { animation: poster-auf 1.1s cubic-bezier(.2, .8, .2, 1) 1; }
@keyframes poster-auf {
  0% { opacity: 0; transform: scale(.82); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: none; }
}

.poster-cell.is-hit::after { box-shadow: inset 0 0 0 2px var(--black); border-radius: 50%; }
.poster-cell.is-hit { animation: poster-pulse 1.1s ease-in-out infinite; }
@keyframes poster-pulse { 50% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  .poster-cell.is-new .poster-cut, .poster-cell.is-hit { animation: none; }
  .poster-stage { transition: none; }
}

.poster-bar {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
}
/* Tippziele bleiben bei mindestens 44 Pixeln, auch auf schmalen Geraeten. */
.poster-bar button {
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ash);
  background: var(--cloud); border: 0; border-radius: var(--r-pill);
  min-width: 44px; min-height: 44px; padding: 0 .9rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.poster-bar button:disabled { opacity: .4; cursor: default; }
.poster-zoom-val {
  font-size: .74rem; font-weight: 700; color: var(--ash); min-width: 3.2em;
  text-align: center;
}
.poster-note { margin-left: auto; font-size: .7rem; color: var(--pebble); font-weight: 600; }

.poster-info {
  display: flex; align-items: center; gap: .75rem; margin-top: .6rem;
  background: var(--mist); border-radius: var(--r-card); padding: .7rem .85rem;
}
.poster-info .poster-thumb {
  flex: none; width: 62px; height: 62px; border-radius: 14px;
  background-color: var(--white); background-image: var(--poster);
  background-repeat: no-repeat;
}
.poster-info.is-locked .poster-thumb { filter: grayscale(1) contrast(.86) brightness(1.1); }
.poster-info-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.poster-info-text strong {
  font-family: "Bebas Neue", Inter, sans-serif; font-weight: 400;
  text-transform: uppercase; font-size: 1.35rem; line-height: 1;
}
.poster-info-text small { color: var(--ash); font-size: .74rem; font-weight: 600; }
.poster-info-num {
  margin-left: auto; flex: none; font-size: .74rem; font-weight: 700;
  color: var(--white); background: var(--black);
  border-radius: var(--r-pill); padding: .3rem .7rem;
}
.poster-info-num.t0 { background: var(--tier1); }
.poster-info-num.t1 { background: var(--tier2); }
.poster-info-num.t2 { background: var(--tier3); }
.poster-info-num.t3 { background: var(--tier4); }
.poster-info-num.t4 { background: var(--gold); }

.poster-empty {
  margin-top: .6rem; font-size: .78rem; color: var(--ash); font-weight: 600;
}