/* =========================================================
   Lorcana PL - znaczniki kart w tresci
   Link do karty plus dymek z podgladem grafiki.
   ========================================================= */

.card-tag{
  color:var(--amethyst);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px dotted var(--amethyst);
  white-space:nowrap;
}
.card-tag:hover,
.card-tag:focus-visible{border-bottom-style:solid;}
.card-tag:focus-visible{outline:2px solid var(--amethyst);outline-offset:2px;border-radius:3px;}

/* Znacznik, ktorego nie udalo sie dopasowac do zadnej karty. Zostaje tekstem,
   zeby zdanie dalo sie przeczytac, ale widac, ze cos wymaga poprawki. */
.card-tag.is-missing{
  color:var(--muted);
  border-bottom:1px dashed var(--muted);
  cursor:help;
}

/* Dymek jest jeden na strone i przesuwany, wiec nie mnozy sie z kazdym
   znacznikiem i nie wplywa na uklad tresci. */
.card-bubble{
  position:absolute;
  z-index:60;
  width:260px;
  padding:6px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
  pointer-events:none;
}
.card-bubble.is-open{opacity:1;transform:translateY(0);}

.card-bubble img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  background:var(--bg-soft);
}
.card-bubble span{
  display:block;
  padding:7px 6px 3px;
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  text-align:center;
}

@media (prefers-reduced-motion:reduce){
  .card-bubble{transition:none;}
}

/* ---------- ikony inkow w tekscie (:ink-amber: itd.) ----------
   Wielkosc w em, wiec ikona rosnie razem z tekstem (akapit, naglowek, lista).
   Selektory z .prose, zeby wygraly z regulami dla obrazkow w artykulach
   (display:block, margines, zaokraglenie). */
.ink-icon,
.prose img.ink-icon,
.e-content img.ink-icon{
  display:inline-block;
  width:auto;
  height:1.25em;
  margin:0 .08em;
  vertical-align:-.28em;
  border-radius:0;
  box-shadow:none;
}
.ink-icon--dot{
  width:.9em;
  height:.9em;
  vertical-align:-.08em;
  border-radius:50%;
  background:#7b8699;
  border:0;
}
.ink-icon--dot.ink-amber{background:#d29a2a}
.ink-icon--dot.ink-amethyst{background:#8a5cd1}
.ink-icon--dot.ink-emerald{background:#2f9e6b}
.ink-icon--dot.ink-ruby{background:#d2453f}
.ink-icon--dot.ink-sapphire{background:#2b86c5}
.ink-icon--dot.ink-steel{background:#7b8699}