/* ══════════════════════════════════════════════════════════════════
   kompendium.css — Kartenregal und Kartenschrein (js/kompendium.js)

   Für die Seite kompendium.html und für die Fenster „Sammlung“ und
   „Deck bauen“ im Hauptmenü (seit 417). Was nur die Seite braucht
   (Kopfzeile, Rollen), steht in kompendium.html selbst.
   ══════════════════════════════════════════════════════════════════ */
/* ─── Besitz ────────────────────────────────────────────────────
   Das Kompendium zeigt **alle** Karten — auch die, die man noch nicht
   hat. Die liegen grau und mit einem Schloss da: man sieht, was es
   gibt, und weiß, wofür der Laden gut ist. Wer eine Karte nur einmal
   besitzt, sieht auch das. */
.raster .kartenfach{position:relative;}

.kartenfach.fehlt .karte{filter:grayscale(1) brightness(.55) contrast(.9);}
.kartenfach.fehlt::after{content:"🔒";position:absolute;right:7px;top:7px;z-index:3;
  font-size:14px;opacity:.7;filter:drop-shadow(0 1px 2px #000);}
.kartenfach.einzeln:not(.drin)::after{content:"1×";position:absolute;right:7px;top:7px;z-index:3;
  font-family:var(--display);font-size:13px;color:rgba(238,220,171,.55);}
/* Zwei Exemplare: hinter der Karte lugt ein zweites Blatt hervor, nach
   rechts oben versetzt und leicht gedreht, wie ein kleiner Stapel. So
   sieht man ohne Zahl, dass die Karte doppelt da ist (423, Max), auch
   im Deckbau. */
.kartenfach.doppelt::before{content:"";position:absolute;inset:0;z-index:0;border-radius:9px;
  background:linear-gradient(160deg,var(--parch) 0%,var(--parch-sh) 60%,#7a5a33 100%);
  border:2.5px solid var(--ink);box-sizing:border-box;
  translate:9px -8px;rotate:3deg;transform-origin:50% 100%;
  box-shadow:0 2px 4px rgba(0,0,0,.45);}
.kartenfach.doppelt > .karte{z-index:1;}
.raster .kartenfach.drin .karte{box-shadow:0 0 0 3px var(--gold-hi);}
.raster .kartenfach.voll:not(.drin) .karte{filter:brightness(.55) saturate(.5);}
.bauanzahl{position:absolute;right:-5px;top:-7px;z-index:9;
  min-width:24px;height:24px;padding:0 6px;border-radius:12px;
  background:linear-gradient(var(--gold-hi),var(--gold-dk));
  border:2.5px solid var(--ink);color:#3a2a08;
  font-family:var(--display);font-size:14px;line-height:1;padding-top:.35em;
  text-align:center;}
/* Die Marke hängt fest im Fach und wird nur beschriftet, statt bei
   jedem Klick neu gebaut zu werden — leer bleibt sie unsichtbar. */
.bauanzahl[hidden]{display:none;}

/* ─── Kartenraster ────────────────────────────────────────────────
   Zwei Dinge waren schuld daran, dass hier kaum etwas zu erkennen war.

   Erstens hatte die Karte eine **feste** Breite von 124 Punkten. Das
   Raster gab den Spalten zwar `1fr` und machte sie breiter, aber die
   Karte darin blieb, wie sie war — bei 1440 Punkten Fensterbreite
   standen zehn Karten je Reihe, jede 124 Punkte schmal. Jetzt füllt
   die Karte ihre Spalte aus.

   Zweitens ist die Schriftgröße auf der Karte ein fester Wert, an dem
   alles andere als Anteil hängt. Wächst die Karte, muss die Schrift
   mitwachsen. Genau dafür gibt es Behälterabfragen: `cqw` ist ein
   Prozent der Behälterbreite. 10,7 von 124 sind 8,63 Prozent — mit
   `8.63cqw` sieht die Karte bei jeder Größe genau so aus wie vorher
   bei 124 Punkten, nur größer.

   Die Mindestbreite von 186 Punkten trifft ungefähr das, was 150
   Prozent Vergrößerung ergaben: rund 190 Punkte je Karte. Auf 1440
   sind das sieben je Reihe, auf 1920 neun. */
/* Das Raster steht mittig: bei wenigen Karten klebten sie sonst links,
   weil die Spalten die volle Breite füllen. */
.raster{display:grid;gap:18px;padding:12px 20px 40px;margin:0 auto;
  width:min(1360px,100%);box-sizing:border-box;
  grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  justify-content:center;justify-items:stretch;}
.raster .kartenfach{container-type:inline-size;width:100%;}
.raster .kartenfach[hidden]{display:none;}
/* Der Weg in den Shop (384): ein gestrichelter Umriss in Kartengröße
   als letzter Platz im Regal, mittig ein kurzer Hinweis. */
.raster .kartenfach.luecke{
  appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;display:block;
}
.lueckerahmen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;
  width:100%;aspect-ratio:124/174;box-sizing:border-box;padding:10cqw;
  border:2px dashed rgba(238,220,171,.32);border-radius:7cqw;
  background:rgba(20,16,11,.28);text-align:center;
  transition:border-color .18s ease,background .18s ease;
}
.lueckerahmen b{font-family:var(--display);font-weight:400;font-size:11cqw;line-height:1.1;
  color:rgba(238,220,171,.6);padding-top:.15em;}
.lueckerahmen em{font-style:normal;font-size:8cqw;line-height:1.3;color:rgba(238,220,171,.45);}
.kartenfach.luecke:hover .lueckerahmen,
.kartenfach.luecke:focus-visible .lueckerahmen{border-color:var(--gold-hi);background:rgba(58,40,22,.45);}
.kartenfach.luecke:hover .lueckerahmen b{color:var(--gold-hi);}
.kartenfach.luecke:focus-visible{outline:none;}
.raster .karte{
  position:relative;left:auto;top:auto;
  width:100%;height:auto;aspect-ratio:124/174;
  font-size:8.63cqw;
  /* Im Regal ohne Tiefenachse (426): 135 Karten mit `perspective` und
     `preserve-3d` hießen 135 eigene 3D-Ebenen, auf dem Telefon der
     Grund fürs Ruckeln. Das Kippen unter dem Zeiger geht auch flach. */
  perspective:none;
}
.raster .karte .koerper{transform-style:flat;}
/* Was nicht im Bild ist, wird nicht gezeichnet (426): der Browser
   überspringt Aufbau und Malen der Fächer außerhalb des Sichtfelds und
   rechnet mit der geschätzten Höhe weiter. Bei 135 Karten sind das
   rund 110 weniger je Bild. */
.raster .kartenfach{content-visibility:auto;contain-intrinsic-size:auto 260px;}
/* Die weichen Schatten an den Steinen (drei Filter je Karte) nur bei
   hoher Qualität (js/qualitaet.js); im Regal sieht man sie kaum. */
html:not([data-qualitaet="hoch"]) .raster .karte .stein svg,
html:not([data-qualitaet="hoch"]) .raster .karte .steinbild,
html:not([data-qualitaet="hoch"]) .raster .karte .steinschwert{filter:none;}

/* Auf dem Telefon bleibt es bei zwei Karten je Reihe — eine einzelne
   Riesenkarte je Zeile hieße endloses Blättern. */
/* Telefon (423, Max): vier Karten je Reihe statt fünf, dafür größer,
   damit Name und Text ohne Lupe zu lesen sind. */
@media (max-width:560px),(max-height:560px){
  .raster{gap:12px;padding:10px 12px 40px;
    grid-template-columns:repeat(auto-fill,minmax(176px,1fr));}
}
/* Browser ohne Behälterabfragen bekommen wenigstens die alte,
   verlässliche Größe statt einer Karte ohne Schrift. */
@supports not (container-type:inline-size){
  .raster{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
    justify-items:center;}
  .raster .karte{width:124px;height:174px;aspect-ratio:auto;font-size:10.7px;}
}

/* ═══ Der Kartenschrein ════════════════════════════════════════════
   Die Karte groß im schwarzen Raum, daneben ihre Aufgabe als
   Questtafel — sonst nichts. Der Raum tritt ganz zurück: fast schwarz,
   ein kaum merklicher grauer Lichtkegel, damit die Karte nicht im
   Nichts steht, und dunkle Ränder. Nur Legendäre tragen einen goldenen
   Schein — der gehört zur Karte, nicht zum Raum.

   Die Größe hängt an `--kh`, der Höhe der Karte; daraus folgen Breite
   und Schriftgröße. Sie ist in em gebaut und bleibt scharf. */
body.lupe-offen{overflow:hidden;}
.lupe{position:fixed;inset:0;z-index:90;display:none;overflow:hidden;--kh:min(76vh,760px);}
.lupe.an{display:block;}
.lupe.geht{animation:lupeGeht .22s ease-in forwards;}
@keyframes lupeGeht{to{opacity:0;}}
.lupe-grund{position:absolute;inset:0;background:#050404;animation:lupeAuf .35s ease-out both;}
@keyframes lupeAuf{from{opacity:0;}}
.lupe-licht{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 36% 56% at 38% 47%,rgba(160,160,160,.12),transparent 72%),
    radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.92) 100%);}

/* Karte links, rechts das Kartenblatt (css/ui.css → .kartenblatt, 423):
   so wie im Duell, mit Werten, Schlüsselwörtern, Text, Heldenkraft und
   Besitz. Hochkant steht das Blatt unter der Karte. */
.lupe-buehne{position:relative;height:100%;display:flex;align-items:center;justify-content:center;
  gap:clamp(30px,5vw,80px);padding:4vh 96px 9vh;box-sizing:border-box;}
.lupe-sockel{position:relative;flex:0 0 auto;}
.lupe-blatt{flex:0 1 auto;animation:lupeAuf .4s ease-out both;}
.lupe-blatt .kartenblatt{max-width:min(380px,40vw);}
.lupe-sockel.da{animation:sockelAuf .6s cubic-bezier(.2,.9,.3,1.15) both;}
.lupe-sockel.rein-links.da{animation-name:reinLinks;}
.lupe-sockel.rein-rechts.da{animation-name:reinRechts;}
.lupe-sockel.raus-links{animation:rausLinks .19s ease-in forwards;}
.lupe-sockel.raus-rechts{animation:rausRechts .19s ease-in forwards;}
@keyframes sockelAuf{from{opacity:0;transform:translateY(28px) scale(.92);}}
@keyframes reinLinks{from{opacity:0;transform:translateX(-70px) rotate(-3deg);}}
@keyframes reinRechts{from{opacity:0;transform:translateX(70px) rotate(3deg);}}
@keyframes rausLinks{to{opacity:0;transform:translateX(-70px) rotate(-3deg);}}
@keyframes rausRechts{to{opacity:0;transform:translateX(70px) rotate(3deg);}}
/* Schweben: am Behälter, nicht an der Karte — die kippt ja schon. */
.lupe-sockel.da #lupeKarte{animation:schweben 6s ease-in-out .6s infinite;}
@keyframes schweben{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.lupe .karte{position:relative;left:auto;top:auto;
  width:calc(var(--kh) * .716);height:var(--kh);aspect-ratio:auto;
  font-size:calc(var(--kh) * .0612);cursor:default;}
.lupe-schatten{position:absolute;left:12%;right:12%;bottom:calc(var(--kh) * -.06);height:calc(var(--kh) * .05);
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.8),transparent 70%);
  filter:blur(6px);animation:schattenAtmet 6s ease-in-out .6s infinite;}
@keyframes schattenAtmet{0%,100%{transform:scaleX(1);opacity:1;}50%{transform:scaleX(.9);opacity:.75;}}
.lupe-aura{display:none;}
.lupe[data-rar="legendär"] .lupe-aura{display:block;position:absolute;inset:-10%;border-radius:28px;
  pointer-events:none;filter:blur(30px);opacity:.8;
  background:conic-gradient(from 0deg,rgba(255,210,110,0),rgba(255,214,120,.6),rgba(255,240,190,0) 30%,
    rgba(255,196,80,.45) 55%,rgba(255,210,110,0) 78%,rgba(255,214,120,.55));
  animation:auraKreist 10s linear infinite;}
@keyframes auraKreist{to{transform:rotate(360deg);}}
/* Der Thron unter der Karte — nur für Karten im Set. */

/* Rahmen: Schließen, Blättern, Zähler */
/* Schließen: derselbe Symbolknopf wie überall (css/ui.css), hier nur
   seine Lage und die Drehung beim Überfahren, die ihn als „zu“
   kenntlich macht. */
/* Schließen trägt dieselbe gemalte Banderole wie das Löschen an den
   Decks — sie hängt oben rechts in der Ecke. */
.lupe-zu{position:absolute;top:18px;right:22px;z-index:6;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;transition:transform .18s ease,filter .18s ease;}
.lupe-zu img{height:40px;width:auto;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8));}
.lupe-zu:hover{transform:scale(1.1);}
.lupe-zu:hover img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(255,200,90,.7));}
.lupe-pfeil{position:absolute;top:50%;z-index:3;width:62px;height:62px;padding:0;margin-top:-31px;
  border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));
  transition:transform .16s ease,opacity .2s;}
.lupe-pfeil img{width:100%;height:100%;object-fit:contain;display:block;}
.lupe-pfeil.zurueck{left:18px;} .lupe-pfeil.vor{right:18px;}
.lupe-pfeil:hover:not(:disabled){transform:scale(1.08);}
.lupe-pfeil:disabled{opacity:.18;filter:grayscale(1);cursor:default;}
.lupe-zaehler{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:11.5px;letter-spacing:.24em;color:rgba(210,200,185,.5);}

/* Telefon quer: die Karte so hoch, wie die Bühne hergibt, das Blatt
   daneben rollt bei Bedarf. */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  .lupe{--kh:min(78vh,760px);}
  .lupe-buehne{gap:26px;padding:3vh 64px 7vh;align-items:center;}
  .lupe-blatt{max-height:88vh;overflow-y:auto;scrollbar-width:none;padding:6px 2px;}
  .lupe-blatt .kartenblatt{max-width:min(400px,48vw);}
  .lupe-pfeil{width:46px;height:46px;margin-top:-23px;}
  .lupe-pfeil.zurueck{left:8px;} .lupe-pfeil.vor{right:8px;}
}
/* Hochkant: untereinander, die Seite rollt. */
@media (max-aspect-ratio:1/1){
  .lupe{--kh:min(52vh,118vw);}
  .lupe-buehne{flex-direction:column;justify-content:flex-start;gap:calc(var(--kh) * .12);
    padding:66px 16px 48px;overflow:auto;}
  .lupe-blatt .kartenblatt{max-width:min(420px,92vw);}
  .lupe-pfeil{top:calc(66px + var(--kh) / 2);width:46px;height:46px;margin-top:-23px;}
  .lupe-pfeil.zurueck{left:6px;} .lupe-pfeil.vor{right:6px;}
  .lupe-zaehler{position:fixed;}
}
@media (prefers-reduced-motion:reduce){
  .lupe-aura,.lupe-sockel.da #lupeKarte,.lupe-schatten{animation:none;}
}