/* Boitajeux — cartes à collectionner (cadre, raretés, séries). Taille : --cw (largeur), tout le reste suit. */

.tc {
  --cw: 180px;
  --frame: linear-gradient(160deg, #4a3a2c, #241a12);
  --plaque: #f3e6c8; --plaque-ink: #2b1d14; --paper: #f7efdd;
  --metal: #a39a8a; --metal-hi: #e6dfd2; --gem: #ece6da;
  position: relative; flex: none;
  width: var(--cw); aspect-ratio: 5 / 7;
  font-size: calc(var(--cw) / 18);
  border-radius: 1.1em;
  user-select: none; -webkit-user-select: none;
  color: var(--plaque-ink);
}
.tc-in {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%), var(--frame);
  border: .22em solid var(--metal);
  box-shadow: inset 0 0 0 .1em var(--metal-hi), inset 0 0 0 .32em rgba(0, 0, 0, .35), 0 .25em .8em rgba(0, 0, 0, .45);
}
.tc-in::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: .9em .9em; pointer-events: none; }

/* Illustration */
.tc-art {
  position: absolute; left: .55em; right: .55em; top: .55em; height: 10.9em;
  border-radius: .9em .9em .3em .3em; overflow: hidden; background: #111;
  box-shadow: 0 0 0 .14em var(--metal), inset 0 0 0 .1em rgba(0, 0, 0, .4);
}
.tc-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -.8em 1.2em -.6em rgba(0, 0, 0, .55), inset 0 .1em .3em rgba(255, 255, 255, .25); pointer-events: none; }
.ta-wrap { position: absolute; inset: 0; overflow: hidden; }
.ta-wrap > svg.ta, .ta-wrap > svg.rp-ill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ta-pt .rp-pt { position: absolute; left: 50%; top: 5%; height: 98%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 .25em .3em rgba(0, 0, 0, .55)); }
.ta-em-in { --sf: #fff6e4; --sk: #1b2026; --cc: #cfdde2; position: absolute; left: 50%; top: 2%; height: 98%; aspect-ratio: 1; transform: translateX(-50%); }
.ta-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ta-ini { display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #ffcf8a, #d9773f 55%, #8e3b1f); }
.ta-ini::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#fff6 1.4px, transparent 1.8px), radial-gradient(#ffe06a88 1.2px, transparent 1.6px); background-size: 2.2em 2.2em, 1.6em 1.6em; background-position: 0 0, .8em .6em; }
.ta-ini span { position: relative; font: 400 4.6em/1 "Bagel Fat One", system-ui, sans-serif; color: #fff8ec; text-shadow: 0 .06em 0 #6b2a12, 0 .12em .3em rgba(0, 0, 0, .35); letter-spacing: .02em; }

/* Plaque du nom, gemme de rareté, texte */
.tc-name {
  position: absolute; left: .3em; right: .3em; top: 10.45em; height: 2.45em;
  display: flex; align-items: center; justify-content: center; padding: 0 .9em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--plaque) 100%, #fff 30%), var(--plaque));
  border: .14em solid var(--metal); border-radius: .45em;
  box-shadow: 0 .18em .3em rgba(0, 0, 0, .45), inset 0 -.15em 0 rgba(0, 0, 0, .12);
  clip-path: polygon(0 0, 100% 0, 100% 30%, calc(100% - .5em) 50%, 100% 70%, 100% 100%, 0 100%, 0 70%, .5em 50%, 0 30%);
}
.tc-name span { font: 400 1.32em/1 "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif; color: var(--plaque-ink); white-space: nowrap; letter-spacing: .01em; }
.tc-name.l span { font-size: 1.12em; }
.tc-name.xl span { font-size: .96em; }
.tc-gem {
  position: absolute; top: 12.55em; left: 50%; width: 1.2em; height: 1.2em; z-index: 1;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 30% 30%, #fff 0 12%, var(--gem) 45%, color-mix(in srgb, var(--gem) 60%, #000) 100%);
  border: .12em solid #1b1410; box-shadow: 0 .1em .25em rgba(0, 0, 0, .5);
}
.tc-text {
  position: absolute; left: .95em; right: .95em; top: 13.35em; bottom: 1.55em;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35em;
  padding: .75em .85em .55em; border-radius: .6em; text-align: center;
  background: radial-gradient(120% 90% at 50% 40%, var(--paper), color-mix(in srgb, var(--paper) 86%, #8a6d4a));
  box-shadow: inset 0 0 0 .1em rgba(0, 0, 0, .18), 0 .1em 0 rgba(255, 255, 255, .15);
  color: #2a2018; overflow: hidden;
}
.tc-text p { margin: 0; font: 600 1.02em/1.2 "Figtree", system-ui, sans-serif; text-wrap: balance; }
.tc-text p b { font-weight: 800; }
.tc-text .tc-f { font: italic 400 .98em/1.15 "IM Fell English", Georgia, serif; color: #6a5a4a; }
.tc-text.s p { font-size: .9em; }
.tc-text.xs p { font-size: .8em; }
.tc-set { position: absolute; left: 50%; bottom: .32em; transform: translateX(-50%); width: 1.15em; height: 1.15em; color: var(--metal-hi); opacity: .9; }
.ts-ico { display: block; width: 100%; height: 100%; }

/* Coût (jeton), attaque (écu) et PV (cœur) */
.tc-cost, .tc-atk, .tc-hp { position: absolute; display: grid; place-items: center; z-index: 2; }
.tc-cost b, .tc-atk b, .tc-hp b {
  font: 400 2em/1 "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 .05em 0 #000, .05em 0 0 #000, -.05em 0 0 #000, 0 -.05em 0 #000, .04em .04em 0 #000, -.04em .04em 0 #000, .04em -.04em 0 #000, -.04em -.04em 0 #000, 0 .12em .12em rgba(0, 0, 0, .5);
}
.tc-cost {
  top: -.4em; left: -.4em; width: 3.7em; height: 3.7em; border-radius: 50%;
  background: radial-gradient(circle, #3a7fe0 0 47%, #1c4f9c 48% 55%, transparent 56%), repeating-conic-gradient(#f4efe4 0 14deg, #2563bd 14deg 45deg);
  border: .16em solid #0f2650; box-shadow: 0 .18em .35em rgba(0, 0, 0, .55), inset 0 0 0 .1em rgba(255, 255, 255, .25);
}
.tc-cost b { padding-top: .06em; }
.tc-atk {
  left: -.45em; bottom: -.5em; width: 3.7em; height: 4.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cpath d='M3 4h34v16c0 12-8 19-17 22C11 39 3 32 3 20Z' fill='%23f0a43a' stroke='%233b2208' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M8 8.5h24v11.5c0 8.6-5.6 13.6-12 16' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='2'/%3E%3Cpath d='M30 33l-6-6M10 10l3 3' stroke='%233b2208' stroke-opacity='.35' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .15em .2em rgba(0, 0, 0, .55));
}
.tc-atk b { margin-top: -.25em; }
.tc-hp {
  right: -.45em; bottom: -.45em; width: 3.9em; height: 3.9em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 37C8 28 2 21 2 13 2 7 7 3 12 3c4 0 6.6 2.2 8 5 1.4-2.8 4-5 8-5 5 0 10 4 10 10 0 8-6 15-18 24Z' fill='%23d8463c' stroke='%233b0d0a' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M7 12c0-3 2.4-5 5-5' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .15em .2em rgba(0, 0, 0, .55));
}
.tc-hp b { margin-top: -.2em; }
.tc .up b { color: #8cff9a; }
.tc .down b { color: #ff8f84; }
.tc.token .tc-gem { display: none; }

.tc-count { position: absolute; top: .55em; right: .55em; z-index: 3; font: 800 1.15em/1 "Figtree", system-ui, sans-serif; color: #fff; background: #1b1410; border: .1em solid var(--metal); border-radius: 1em; padding: .25em .5em .2em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .5); }
.tc-new { position: absolute; top: 9.2em; right: -.5em; z-index: 3; font: 800 .95em/1 "Figtree", system-ui, sans-serif; color: #3a2400; background: #ffd34d; border-radius: .4em; padding: .35em .6em; transform: rotate(6deg); box-shadow: 0 .15em .4em rgba(0, 0, 0, .5); }

/* Raretés : métal du cadre et couleur de la gemme */
.tc.r-rare { --metal: #7ea9da; --metal-hi: #d6e8fb; --gem: #3d8cf0; }
.tc.r-epique { --metal: #a87ad8; --metal-hi: #ead9ff; --gem: #a855f7; }
.tc.r-epique .tc-in { box-shadow: inset 0 0 0 .1em var(--metal-hi), inset 0 0 0 .32em rgba(0, 0, 0, .35), 0 .25em .8em rgba(0, 0, 0, .45), 0 0 1em rgba(168, 85, 247, .35); }
.tc.r-legendaire { --metal: #e2ad3a; --metal-hi: #fff0b8; --gem: #ff9d1c; }
.tc.r-legendaire .tc-in { border-color: transparent; background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%) padding-box, var(--frame) padding-box, linear-gradient(135deg, #fff2b0, #e2ad3a 30%, #9a6a12 55%, #ffe38a 80%, #c08a1e) border-box; box-shadow: inset 0 0 0 .1em var(--metal-hi), inset 0 0 0 .32em rgba(0, 0, 0, .35), 0 .25em .8em rgba(0, 0, 0, .45), 0 0 1.2em rgba(255, 166, 48, .45); }
.tc.r-legendaire .tc-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 190, .42) 48%, rgba(255, 255, 255, .15) 52%, transparent 62%) 0 0 / 260% 100% no-repeat;
  animation: tc-shine 5s ease-in-out infinite;
}
@keyframes tc-shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
.tc-crest {
  position: absolute; top: -.1em; left: 50%; width: 6em; height: 2.2em; transform: translateX(-50%); z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'%3E%3Cpath d='M30 3l3 7 7-5-2 9H22l-2-9 7 5Z' fill='%23f6cd57' stroke='%233b2208' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M20 15c-6 0-12-2-16-7 5 1 9 1 13 4M40 15c6 0 12-2 16-7-5 1-9 1-13 4' fill='%23f6cd57' stroke='%233b2208' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='30' cy='14' r='2' fill='%23c8473a' stroke='%233b2208'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .1em .15em rgba(0, 0, 0, .6));
}

/* Séries : bois du cadre, plaque et papier */
.tc.s-remparts { --frame: linear-gradient(160deg, #4a3568, #1f1630); --plaque: #efe0bd; --plaque-ink: #2a1d36; --paper: #f5ecd8; }
.tc.s-embruns { --frame: linear-gradient(160deg, #23707e, #0d323b); --plaque: #fff6e4; --plaque-ink: #13252b; --paper: #f6f1e4; }
.tc.s-fayots { --frame: linear-gradient(160deg, #75892f, #2e3c15); --plaque: #f8e8bf; --plaque-ink: #33240c; --paper: #f8f0da; }
.tc.s-fiefs { --frame: linear-gradient(160deg, #5c6a76, #252d34); --plaque: #ecdfc6; --plaque-ink: #262019; --paper: #f2eadb; }
.tc.s-vinchy { --frame: linear-gradient(160deg, #8a2a99, #2a0e4a); --plaque: #fff1c9; --plaque-ink: #3a0f4a; --paper: #fbf3df; }
.tc.s-potes { --frame: linear-gradient(160deg, #a65c36, #4a2414); --plaque: #fde9cf; --plaque-ink: #3a1d12; --paper: #fdf3e3; }

/* Pas encore dans la collection */
.tc.missing .tc-art > * { filter: grayscale(1) brightness(.5) contrast(.9); }
.tc.missing .tc-in { filter: saturate(.35) brightness(.8); }
.tc.missing .tc-cost, .tc.missing .tc-atk, .tc.missing .tc-hp { filter: grayscale(.8) brightness(.8) drop-shadow(0 .15em .2em rgba(0, 0, 0, .55)); }

/* Dos de carte */
.tc-back {
  --cw: 120px; position: relative; flex: none; width: var(--cw); aspect-ratio: 5 / 7; font-size: calc(var(--cw) / 18); border-radius: 1.1em;
  background: repeating-linear-gradient(45deg, rgba(242, 196, 109, .09) 0 .5em, transparent .5em 1em), repeating-linear-gradient(-45deg, rgba(242, 196, 109, .09) 0 .5em, transparent .5em 1em), radial-gradient(circle at 50% 45%, #5a2c1c, #2a140c 75%);
  border: .22em solid #b88a3a; box-shadow: inset 0 0 0 .12em #f2c46d55, 0 .25em .8em rgba(0, 0, 0, .45); color: #f2c46d;
}
.tcb-in { position: absolute; inset: .7em; border: .12em solid #f2c46d88; border-radius: .7em; display: grid; place-items: center; }
.tcb-in svg { width: 70%; height: auto; }

@media (prefers-reduced-motion: reduce) { .tc.r-legendaire .tc-in::after { animation: none; } }