/* Identité permanente de la carte. Les variantes dessinent la matière en dessous. */
.t-common {
  --rarity-primary:#59616c; --rarity-secondary:#303640; --rarity-highlight:#c5cbd0;
  --rarity-border:1px; --rarity-shadow:0 0 0 transparent; --rarity-tint:4%;
}
.t-uncommon {
  --rarity-primary:#287f72; --rarity-secondary:#203d3d; --rarity-highlight:#8fc9b5;
  --rarity-border:2px; --rarity-shadow:0 0 0 transparent; --rarity-tint:7%;
}
.t-rare {
  --rarity-primary:#347cab; --rarity-secondary:#203b67; --rarity-highlight:#93d7dc;
  --rarity-border:2px; --rarity-shadow:0 0 9px rgba(90,166,199,.13); --rarity-tint:9%;
}
.t-epic {
  --rarity-primary:#8564c2; --rarity-secondary:#342960; --rarity-highlight:#cfaae4;
  --rarity-border:3px; --rarity-shadow:0 0 11px rgba(126,93,187,.16); --rarity-tint:11%;
}
.t-legendary {
  --rarity-primary:#bc744c; --rarity-secondary:#573529; --rarity-highlight:#f2dfbd;
  --rarity-border:3px; --rarity-shadow:0 0 12px rgba(172,105,63,.15); --rarity-tint:12%;
}

.card { box-shadow:0 0 0 var(--rarity-border) var(--rarity-primary), var(--rarity-shadow), var(--shadow) }
.card .body { border-top:1px solid var(--rarity-primary);
  background:linear-gradient(180deg, color-mix(in srgb, var(--rarity-secondary) var(--rarity-tint), var(--surface)), var(--surface)) }
.card.t-common .body { border-top-color:var(--rarity-primary) }
.card .kind { color:var(--muted) }

/* La couche de cadre est un enfant réel : elle reste visible quand fx.js cache les pseudo-éléments de la matière. */
.card > .rarity-frame, .bigcard > .rarity-frame {
  position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  border:var(--rarity-border) solid var(--rarity-primary);
  box-shadow:inset 0 0 0 1px var(--rarity-secondary);
}
.card > .rarity-frame::before, .bigcard > .rarity-frame::before,
.card > .rarity-frame::after, .bigcard > .rarity-frame::after {
  content:""; position:absolute; pointer-events:none; border-radius:inherit;
}
.t-common > .rarity-frame::before, .t-common > .rarity-frame::after { display:none }
.t-uncommon > .rarity-frame::before { inset:3px; border:1px solid color-mix(in srgb, var(--rarity-primary) 64%, transparent) }
.t-rare > .rarity-frame::before { inset:3px; border:1px solid var(--rarity-highlight); opacity:.62 }
.t-epic > .rarity-frame::before, .t-legendary > .rarity-frame::before {
  inset:4px; border:1px solid var(--rarity-highlight); opacity:.65;
  box-shadow:0 0 0 2px var(--rarity-secondary);
}
.t-legendary > .rarity-frame::before { inset:5px; opacity:.8; box-shadow:0 0 0 2px var(--rarity-secondary), inset 0 0 0 2px color-mix(in srgb, var(--rarity-primary) 55%, transparent) }
/* Petites entailles aux quatre coins : quatre ornements, sans image ni canvas. */
.t-epic > .rarity-frame::after, .t-legendary > .rarity-frame::after {
  inset:2px; border-radius:inherit;
  background:
    linear-gradient(135deg, transparent 34%, var(--rarity-highlight) 35% 54%, transparent 55%) top left / 13px 13px no-repeat,
    linear-gradient(225deg, transparent 34%, var(--rarity-highlight) 35% 54%, transparent 55%) top right / 13px 13px no-repeat,
    linear-gradient(45deg, transparent 34%, var(--rarity-highlight) 35% 54%, transparent 55%) bottom left / 13px 13px no-repeat,
    linear-gradient(315deg, transparent 34%, var(--rarity-highlight) 35% 54%, transparent 55%) bottom right / 13px 13px no-repeat;
}
.t-legendary > .rarity-frame::after { inset:3px; background-size:17px 17px, 17px 17px, 17px 17px, 17px 17px }
.card.mystery { box-shadow:0 0 0 var(--rarity-border) var(--rarity-primary), var(--rarity-shadow), var(--shadow) }
/* En grille, les ornements intérieurs s'arrêtent avant les textes du bas. */
.card .body { padding-bottom:12px }
.card.t-uncommon > .rarity-frame::before, .card.t-rare > .rarity-frame::before,
.card.t-epic > .rarity-frame::before, .card.t-legendary > .rarity-frame::before {
  inset:3px 3px auto; height:18px; border-width:1px 1px 0; border-radius:9px 9px 0 0; box-shadow:none;
}
.card.t-legendary > .rarity-frame::before { inset:5px 5px auto }
/* Les entailles de la grande carte ne s'adaptent pas aux coins des miniatures. */
.card.t-epic > .rarity-frame::after, .card.t-legendary > .rarity-frame::after { display:none }
/* La vignette mystère de 64 px garde aussi un filet intérieur complet. */
.emyst .card.t-legendary > .rarity-frame::before { inset:5px; height:auto; border:1px solid var(--rarity-highlight);
  border-radius:8px; opacity:.8 }
@media (hover:hover) {
  .card:hover > .rarity-frame, .bigcard:hover > .rarity-frame { border-color:var(--rarity-highlight) }
  .card:hover .rarity-icon, .bigcard:hover .rarity-icon { filter:brightness(1.25) }
  .t-uncommon:hover > .rarity-frame::before, .t-rare:hover > .rarity-frame::before,
  .t-epic:hover > .rarity-frame::before, .t-legendary:hover > .rarity-frame::before { opacity:1 }
}

.bigcard { background:linear-gradient(150deg, var(--rarity-secondary), var(--rarity-primary) 55%, var(--rarity-secondary));
  box-shadow:0 14px 40px rgba(0,0,0,.35), var(--rarity-shadow) }
.bigcard .face { border:1px solid color-mix(in srgb, var(--rarity-highlight) 35%, transparent) }
.bigcard .head { justify-content:flex-start }
.bigcard .head .ttl { flex:1; min-width:0 }
.bigcard .rarity-emblem { display:grid; place-items:center; flex:none; width:29px; height:29px; border-radius:8px;
  color:var(--rarity-highlight); background:var(--rarity-secondary); border:1px solid var(--rarity-primary) }
.bigcard .rarity-emblem .rarity-icon { display:block }
.bigcard .art { border-top-color:var(--rarity-primary); border-bottom-color:var(--rarity-primary) }
.bigcard .band { background:color-mix(in srgb, var(--rarity-secondary) 12%, var(--surface)) }
.bigcard .band .tr { color:var(--rarity-primary) }
.bigcard.t-legendary .band .tr { color:var(--rarity-primary) }

/* Le canvas WebGL reste derrière la bordure et le pictogramme. */
.card.fx-on > .rarity-frame, .bigcard.fx-on > .rarity-frame { position:absolute; z-index:5 }
.card.fx-on .ctop { z-index:6 }
.bigcard.fx-on .rarity-emblem { position:relative; z-index:6; background:var(--rarity-secondary) !important;
  border-color:var(--rarity-primary) !important }
.card.fx-on > .rarity-frame, .bigcard.fx-on > .rarity-frame { box-shadow:inset 0 0 0 1px var(--rarity-secondary), var(--rarity-shadow) }
/* Le texte de Dorée garde une matière claire tant que son canvas n'a pas été repeint. */
.card.fx-on.v-gold .body { background:linear-gradient(115deg, #80521c, #d4a84c 34%, #f6dea0 52%, #c08b33 76%, #80521c) !important }
.card.fx-on.v-gold .body .name, .card.fx-on.v-gold .body .kind { color:#33230a }
/* Sur les matières riches, le dessin reste présent mais plus calme. */
.v-galaxy { --rarity-shadow:0 0 0 transparent }
.v-obsidian { --rarity-shadow:0 0 0 transparent }
.t-legendary.v-gold { --rarity-primary:#a65f43; --rarity-secondary:#58352c; --rarity-highlight:#fff0d6 }
.t-legendary.v-obsidian { --rarity-primary:#875740; --rarity-secondary:#342525; --rarity-highlight:#dfccb2 }
.t-epic.v-obsidian { --rarity-primary:#624c93; --rarity-highlight:#baa3d2 }
.t-rare.v-obsidian { --rarity-primary:#315b78; --rarity-highlight:#a1c8d1 }

.thumb { position:relative; box-shadow:0 0 0 var(--rarity-border) var(--rarity-primary) }

/* Une lumière courte sur l'arête haute d'une grande légendaire ; les grilles restent immobiles. */
.rarity-glint { display:none }
.bigcard.t-legendary > .rarity-frame .rarity-glint { display:block; position:absolute; top:1px; left:10%; width:36px; height:2px;
  border-radius:2px; background:linear-gradient(90deg, transparent, var(--rarity-highlight), transparent);
  opacity:0; animation:rarity-glint 11s ease-in-out infinite }
@keyframes rarity-glint { 0%, 70%, 100% { opacity:0; transform:translateX(0) }
  73% { opacity:.75 } 79% { opacity:.8; transform:translateX(95px) } 82% { opacity:0; transform:translateX(115px) } }
@media (prefers-reduced-motion:reduce) {
  .bigcard.t-legendary > .rarity-frame .rarity-glint { animation:none; display:none }
  .card, .card .rarity-icon, .bigcard .rarity-icon { transition:none }
}