/* =====================================================================
   SCOUNDREL — cards.css
   Spielkarten · Typ-Einfärbung · Zustände · Animationen · Kampfmenü
   ──────────────────────────────────────────────────────────────────
   Die FARBEN der Karten stehen gebündelt in css/tokens.css
   (Abschnitt "2) KARTEN-FARBEN"). Hier nur Form & Verhalten.
   ===================================================================== */

.card{
  --c:var(--ink);
  width:clamp(82px,18.5vw,120px); aspect-ratio:5/7;
  border-radius:9px; position:relative; cursor:grab;
  background:linear-gradient(160deg, var(--card-face-1) 0%, var(--card-face-2) 100%);
  border:1px solid var(--card-face-edge);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.18);
  color:var(--c);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s;
  transform-origin:center bottom;
  user-select:none;
  touch-action:none;          /* Touch-Drag statt Scrollen */
  overflow:hidden;
}
.card .pip{
  position:absolute; font-family:var(--display); font-weight:700; line-height:.9;
  display:flex; flex-direction:column; align-items:center;
}
.card .pip .r{ font-size:clamp(13px,3vw,18px); }
.card .pip .s{ font-size:clamp(11px,2.6vw,15px); }
.card .pip.tl{ top:6px; left:7px; }
.card .pip.br{ bottom:6px; right:7px; transform:rotate(180deg); }
.card .watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(46px,11vw,78px); opacity:.10; pointer-events:none;
}
.card .center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; padding:4px;
}
.card .val{ font-family:var(--display); font-weight:900; font-size:clamp(22px,5.4vw,34px); line-height:1; }
.card .kindlabel{
  font-size:clamp(8px,1.9vw,10px); letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; opacity:.7; margin-top:3px;
}

/* ---------- Typ-Einfärbung (Tokens aus tokens.css) ---------- */
.card[data-kind="monster"]{
  --c:var(--card-monster-ink);
  background:linear-gradient(160deg, var(--card-monster-bg-1) 0%, var(--card-monster-bg-2) 100%);
  border-color:var(--card-monster-edge);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.7), inset 0 0 0 2px rgba(214,73,44,.12), inset 0 0 22px var(--card-monster-glow);
}
.card[data-kind="monster"] .kindlabel{ color:var(--card-monster-ink); }

.card[data-kind="weapon"]{ --c:var(--card-weapon-ink); border-color:var(--card-weapon-edge); }
.card[data-kind="weapon"] .watermark,
.card[data-kind="weapon"] .val{ color:var(--card-weapon-ink); }

.card[data-kind="potion"]{ --c:var(--card-potion-ink); border-color:var(--card-potion-edge); }
.card[data-kind="potion"] .watermark,
.card[data-kind="potion"] .val{ color:var(--card-potion-ink); }

/* ---------- Zustände ---------- */
.card:hover{ transform:translateY(-10px) scale(1.03); box-shadow:0 18px 30px -8px rgba(0,0,0,.7), 0 0 0 2px var(--gold), 0 0 22px rgba(201,168,74,.4); }
.card:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:2px; }

/* ---------- Drag & Drop ---------- */
/* Während eines Ziehvorgangs fangen Karten keine Maus-Ereignisse ab,
   damit elementFromPoint die Zone darunter findet. */
body.is-dragging{ cursor:grabbing; }
body.is-dragging .card{ pointer-events:none; }
.card.drag-src{ opacity:.28; filter:grayscale(.35); }
.card.drag-src:hover{ transform:none; box-shadow:0 8px 18px -6px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.18); }
.drag-ghost{
  position:fixed; left:0; top:0; z-index:80; margin:0; pointer-events:none;
  transform:rotate(-4deg) scale(1.06);
  box-shadow:0 24px 44px -10px rgba(0,0,0,.85), 0 0 0 2px var(--gold), 0 0 28px rgba(201,168,74,.5);
}

/* ---------- Animationen ---------- */
.card.dealing{ animation:dealIn .5s cubic-bezier(.2,.9,.3,1.2) backwards; }
@keyframes dealIn{
  0%{ opacity:0; transform:translateY(-46px) rotateX(85deg) scale(.9); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) rotateX(0) scale(1); }
}
.card.clang{ animation:clang .4s ease; }
@keyframes clang{ 0%,100%{transform:translateY(0)} 25%{transform:translateY(-6px) rotate(-3deg)} 55%{transform:translateY(0) rotate(2deg)} }