/* Wallerer Trading Cards – Kartendesign (Format 63 x 88 mm) */
.card {
  --c1:#9ca3af; --c2:#6b7280; --c3:#e5e7eb; --glow:transparent; --w:252px;
  width:var(--w); aspect-ratio:63/88; border-radius:calc(var(--w) * .055); padding:calc(var(--w) * .036);
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 26px var(--glow);
  position:relative; transition: transform .15s ease-out; transform-style:preserve-3d;
  color:#1b1d22; user-select:none; font-size:calc(var(--w) / 252 * 16px); flex-shrink:0;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.card-inner {
  height:100%; border-radius:.5em; background: linear-gradient(180deg, var(--c3), #fff 55%);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.card .top { display:flex; align-items:center; justify-content:space-between; padding:.45em .55em .3em; }
.card .rarity-tag { font-size:.62em; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:.3em .8em; border-radius:2em; color:#fff; background: linear-gradient(90deg, var(--c2), var(--c1)); }
.card .gems { display:flex; gap:.13em; }
.card .gem { width:.56em; height:.56em; transform:rotate(45deg); background:var(--c2); border:1px solid rgba(0,0,0,.25); }
.card .gem.off { background:transparent; border-color:rgba(0,0,0,.18); }

.card .photo { margin:0 .56em; height:52%; border-radius:.38em; overflow:hidden; position:relative;
  border:.19em solid var(--c2); background: radial-gradient(circle at 50% 35%, #fff, var(--c3)); }
.card .photo img, .card .photo svg { width:100%; height:100%; object-fit:cover; display:block; }
/* Porträtfotos (Hochformat): Ausschnitt nach oben schieben, damit der Kopf nicht abgeschnitten wird */
.card .photo img { object-position:50% 22%; }

.card .name { margin:.5em .62em 0; font-size:1.19em; font-weight:800; line-height:1.1; }
.card .subject { margin:.18em .9em 0; font-size:.69em; font-weight:600; color:#555b66; text-transform:uppercase; letter-spacing:.1em; }
.card .ability { margin:.44em .62em 0; padding:.38em .5em; font-size:.66em; line-height:1.35; background:rgba(0,0,0,.05);
  border-left:.2em solid var(--c2); border-radius:.25em; flex:1; overflow:hidden; }
.card .ability b { display:block; font-size:.95em; text-transform:uppercase; letter-spacing:.08em; color:var(--c2); margin-bottom:.15em; }
.card .bottom { display:flex; justify-content:space-between; align-items:center; padding:.35em .62em .45em; font-size:.53em; color:#6b7280; font-weight:600; white-space:nowrap; gap:.5em; }
.card .brand { font-weight:900; letter-spacing:.02em; color:var(--c2); font-size:.9em; }

.card .holo { position:absolute; inset:0; border-radius:inherit; pointer-events:none; mix-blend-mode:color-dodge; opacity:0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,0,180,.35) 35%, rgba(0,220,255,.35) 45%, rgba(255,255,0,.35) 55%, transparent 70%);
  background-size:250% 250%; background-position: var(--hx,50%) var(--hy,50%); }

/* Seltenheitsstufen */
.r-common    { --c1:#c4c8cf; --c2:#7b818c; --c3:#eceef1; }
.r-uncommon  { --c1:#6ee7a0; --c2:#16a34a; --c3:#e3f8ea; }
.r-rare      { --c1:#7cc4ff; --c2:#1d6fe0; --c3:#e1efff; --glow:rgba(29,111,224,.35); }
.r-epic      { --c1:#c79bff; --c2:#7c3aed; --c3:#f0e6ff; --glow:rgba(124,58,237,.5); }
.r-mythic    { --c1:#ff8a7a; --c2:#dc2626; --c3:#ffe7e3; --glow:rgba(220,38,38,.55); }
.r-legendary { --c1:#ffe27a; --c2:#c58a00; --c3:#fff6d6; --glow:rgba(255,200,40,.7); }
.card.r-legendary { background: linear-gradient(135deg, #fff3b0, #d4a017 25%, #fff3b0 50%, #b8860b 75%, #fff3b0);
  background-size:300% 300%; animation: wtc-gold 6s linear infinite; }
@keyframes wtc-gold { to { background-position: 300% 300%; } }

.r-rare .holo { opacity:.25; }
.r-epic .holo { opacity:.45; }
.r-mythic .holo { opacity:.55; }
.r-legendary .holo { opacity:.7; }
.r-mythic .photo, .r-legendary .photo { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.r-legendary .name { background: linear-gradient(90deg,#8a5a00,#d4a017,#8a5a00); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Verdeckte Karte (noch nicht enthüllt) */
.card.locked .card-inner { background: repeating-linear-gradient(45deg, #2a2d38 0 10px, #252833 10px 20px); align-items:center; justify-content:center; }
.card.locked .lock { color:#8b90a0; font-weight:800; font-size:2.6em; }
.card.locked .lock small { display:block; font-size:.25em; letter-spacing:.15em; text-align:center; margin-top:.4em; }