/* =====================================================================
   Cartes à collectionner
   Cadre en métal selon la rareté (étain, vert-de-gris, cobalt, aubergine,
   cuivre, or), face en papier, titres en serif. Pas de néon.
   ===================================================================== */
:root {
  --r-common: linear-gradient(160deg, #b3b0a6, #858278 55%, #a29f95);
  --r-uncommon: linear-gradient(160deg, #86ad8b, #3f6b48 55%, #6f9a76);
  --r-rare: linear-gradient(160deg, #7ea3cf, #2b4f7e 55%, #5b83b3);
  --r-superrare: linear-gradient(160deg, #a888c2, #553a74 55%, #8d6aa8);
  --r-ultrarare: linear-gradient(160deg, #e39b6c, #9b4a22 55%, #d08354);
  --r-legendary: linear-gradient(160deg, #f1d78c, #b08328 40%, #f4dc95 58%, #8f6519);
  --c-common: #6f6c63; --c-uncommon: #3f6b48; --c-rare: #2b4f7e; --c-superrare: #5b3f7c; --c-ultrarare: #9b4a22; --c-legendary: #96691a;
  --card-face: #fbf7ec; --card-ink: #1f1c17; --card-muted: #6d665a; --card-line: #e4dbc6;
  --kraft: linear-gradient(170deg, #d3b483, #b58f5a);
}
.tcg {
  /* .tcg est le conteneur des unités cqw de ses enfants ; ses propres marges sont en % (sinon cqw viserait la fenêtre). */
  --rc: var(--c-common);
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%;
  padding: 3%; background: var(--r-common); box-shadow: 0 1px 0 rgb(0 0 0 / .12), 0 10px 22px -10px rgb(0 0 0 / .45);
  color: var(--card-ink); font-family: var(--font); user-select: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tcg.r-uncommon { background: var(--r-uncommon); --rc: var(--c-uncommon); }
.tcg.r-rare { background: var(--r-rare); --rc: var(--c-rare); }
.tcg.r-superrare { background: var(--r-superrare); --rc: var(--c-superrare); }
.tcg.r-ultrarare { background: var(--r-ultrarare); --rc: var(--c-ultrarare); }
.tcg.r-legendary { background: var(--r-legendary); --rc: var(--c-legendary); box-shadow: 0 1px 0 rgb(0 0 0 / .12), 0 12px 26px -10px rgb(120 80 10 / .6); }
.tcg-face {
  position: relative; height: 100%; border-radius: 2.6cqw; background: var(--card-face); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: inset 0 0 0 .5cqw rgb(255 255 255 / .6), inset 0 0 0 .9cqw color-mix(in srgb, var(--rc) 35%, transparent);
}
.tcg-head { display: flex; align-items: flex-start; gap: 2cqw; padding: 3.4cqw 3.6cqw 2cqw; }
.tcg-title {
  flex: 1; font-family: var(--serif); font-weight: 700; font-size: 6.8cqw; line-height: 1.08;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcg-gem {
  flex: none; font: 700 3.3cqw/1 var(--mono); color: #fff; padding: 1.1cqw 1.8cqw; border-radius: 1cqw;
  background: var(--rc); letter-spacing: .06em; margin-top: .8cqw;
}
.r-legendary .tcg-gem { background: linear-gradient(90deg, #8f6519, #c9992f, #8f6519); }
.tcg-art {
  position: relative; margin: 0 3.6cqw; aspect-ratio: 4 / 3; border-radius: 1.2cqw; overflow: hidden;
  background: var(--card-line); box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--rc) 55%, transparent); flex: none;
}
.tcg-art img { width: 100%; height: 100%; object-fit: cover; }
/* Illustration de repli : une icône gravée sur papier hachuré, teintée par la rareté. */
.tcg-art .ph {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--rc);
  background:
    repeating-linear-gradient(135deg, transparent 0 2cqw, color-mix(in srgb, var(--rc) 12%, transparent) 2cqw 2.4cqw),
    color-mix(in srgb, var(--rc) 10%, var(--card-face));
}
.tcg-art .ph svg { width: 30cqw; height: 30cqw; stroke-width: 1.4; }
.tcg-type {
  margin: 2.2cqw 3.6cqw 0; font-family: var(--serif); font-size: 3.8cqw; font-style: italic; color: var(--card-muted);
  border-bottom: .3cqw solid var(--card-line); padding-bottom: 1.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcg-text {
  margin: 1.6cqw 3.6cqw 0; font-family: var(--serif); font-size: 3.6cqw; line-height: 1.35; color: var(--card-ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.tcg-stats { display: flex; align-items: center; gap: 2cqw; padding: 2cqw 3.6cqw 1cqw; border-top: .3cqw solid var(--card-line); margin: 0 3.6cqw; padding-inline: 0; }
.tcg-stat { display: flex; align-items: baseline; gap: 1.2cqw; font: 700 5.8cqw/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.tcg-stat small { font: 700 2.8cqw/1 var(--mono); letter-spacing: .08em; color: var(--card-muted); }
.tcg-stat.atk { color: #9c2a1d; }
.tcg-stat.def { color: #24508a; margin-inline-start: auto; }
.tcg-stars { display: inline-flex; gap: .5cqw; color: #b07d1c; }
.tcg-stars svg { width: 3.8cqw; height: 3.8cqw; stroke-width: 2.2; }
.tcg-stars .on svg { fill: currentColor; }
.tcg-foot {
  display: flex; gap: 1.5cqw; justify-content: space-between; padding: 1.2cqw 3.6cqw 2.6cqw; font: 2.6cqw/1.2 var(--mono); color: var(--card-muted);
  white-space: nowrap; overflow: hidden; letter-spacing: .02em;
}
.tcg-foot span { overflow: hidden; text-overflow: ellipsis; }
.tcg.mini .tcg-text { -webkit-line-clamp: 3; }

/* Brillante : reflet holographique discret */
.tcg.shiny::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: .42;
  background: linear-gradient(115deg, transparent 22%, #ff9ac9 34%, #8fd8ff 46%, #c2ff9a 58%, #ffe89a 70%, transparent 82%);
  background-size: 250% 250%; animation: holo 5s linear infinite;
}
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 250% 50%; } }
.tcg .flag-shiny {
  position: absolute; top: -2.6cqw; left: -2.6cqw; z-index: 3; width: 10cqw; height: 10cqw; border-radius: 50%;
  display: grid; place-items: center; background: #1f1c17; color: #f1d27a; box-shadow: 0 0 0 .7cqw #f1d27a, 0 2px 6px #0005;
}
.tcg .flag-shiny svg { width: 6cqw; height: 6cqw; }
.r-legendary .tcg-face::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgb(255 246 210 / .5) 50%, transparent 58%); background-size: 300% 100%;
  animation: sweep 4.5s ease-in-out infinite;
}
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.tcg .new-badge, .tcg .count-badge, .tcg .wish-badge, .tcg .lock-badge {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 1cqw; font: 700 max(8.5px, 3.8cqw)/1 var(--mono);
  letter-spacing: .06em; padding: 1.4cqw 2.4cqw; border-radius: 1cqw; box-shadow: 0 2px 5px #0004; white-space: nowrap;
}
.tcg .new-badge { top: -2.4cqw; right: -2cqw; background: #b23a1e; color: #fff8f0; text-transform: uppercase; transform: rotate(4deg); }
.tcg .count-badge { bottom: -2.4cqw; right: -2cqw; background: #1f1c17; color: #f6f2e9; }
.tcg .wish-badge { top: -2.4cqw; left: 50%; transform: translateX(-50%); background: #1f1c17; color: #f6f2e9; }
.tcg .wish-badge svg { width: 3.6cqw; height: 3.6cqw; color: #e2735b; fill: currentColor; }
.tcg .fav-badge {
  position: absolute; z-index: 3; top: 21%; right: 7%; width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center;
  background: #1f1c17; color: #f1d27a; box-shadow: 0 1px 4px #0005;
}
.tcg .fav-badge svg { width: 5cqw; height: 5cqw; fill: currentColor; }
.tcg .lock-badge { bottom: 24%; left: 50%; transform: translateX(-50%); background: #1f1c17; color: #f6f2e9; font-family: var(--font); letter-spacing: 0; }
.tcg .lock-badge svg { width: 4cqw; height: 4cqw; }

/* Dos de carte : bleu encre, hachures fines, double filet doré */
.tcg.back { background: linear-gradient(160deg, #34415a, #1b2333); }
.tcg-back-face {
  height: 100%; border-radius: 2.6cqw; display: grid; place-items: center; overflow: hidden; position: relative;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .045) 0 .6cqw, transparent .6cqw 2.4cqw),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .045) 0 .6cqw, transparent .6cqw 2.4cqw),
    #1f2839;
}
.tcg-back-face .logo { width: 34cqw; height: 34cqw; position: relative; z-index: 1; }
.tcg-back-face .logo svg { width: 100%; height: 100%; display: block; }
.tcg-back-face::before { content: ""; position: absolute; inset: 3cqw; border: .5cqw solid #c9a44f; border-radius: 1.6cqw; }
.tcg-back-face::after { content: ""; position: absolute; inset: 4.6cqw; border: .25cqw solid #c9a44f99; border-radius: 1.2cqw; }

/* Retournement */
.flip { perspective: 1200px; }
.flip .flip-inner { position: relative; width: 100%; aspect-ratio: 63 / 88; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .side.front-side { transform: rotateY(180deg); }

/* Grilles */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 18px 12px; }
.cardbtn { all: unset; cursor: pointer; display: block; border-radius: 10px; }
.cardbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cardbtn:hover .tcg { transform: translateY(-3px); box-shadow: 0 1px 0 rgb(0 0 0 / .12), 0 16px 26px -12px rgb(0 0 0 / .5); }

/* --- Boosters : enveloppe en papier kraft, sceau vermillon ---------------------------- */
.pack-zone { display: grid; justify-items: center; gap: 14px; padding: 10px 0 4px; }
.pack {
  position: relative; width: min(210px, 56vw); aspect-ratio: 5 / 8; border-radius: 5px; cursor: pointer; border: 0; padding: 0;
  background: radial-gradient(120% 70% at 28% 18%, rgb(255 240 210 / .45), transparent 60%), var(--kraft);
  box-shadow: inset 0 0 0 1px rgb(60 40 15 / .25), 0 1px 0 rgb(0 0 0 / .1), 0 28px 40px -24px rgb(60 40 15 / .8);
  overflow: hidden; color: #2a2016; transition: transform .2s ease;
}
.pack::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 1; pointer-events: none; mix-blend-mode: multiply; }
.pack:hover:not([disabled]) { transform: translateY(-4px) rotate(-1deg); }
.pack[disabled] { filter: grayscale(.8); opacity: .55; cursor: not-allowed; }
.pack::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgb(255 248 230 / .35) 50%, transparent 62%);
  background-size: 260% 100%; animation: sweep 4s ease-in-out infinite;
}
.pack .crimp { position: absolute; left: 0; right: 0; height: 7%; background: repeating-linear-gradient(90deg, rgb(60 40 15 / .2) 0 2px, transparent 2px 6px); }
.pack .crimp.top { top: 0; border-bottom: 1px dashed rgb(60 40 15 / .35); }
.pack .crimp.bottom { bottom: 0; border-top: 1px dashed rgb(60 40 15 / .35); }
.pack .inside { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 16px; }
.pack .seal {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; color: #fff3e6;
  background: radial-gradient(circle at 36% 30%, #d9603f, #a3311a 62%, #7e2412);
  box-shadow: 0 2px 0 rgb(0 0 0 / .18), inset 0 0 0 5px rgb(255 255 255 / .1), inset 0 0 0 6px rgb(0 0 0 / .12);
}
.pack .seal .logo { width: 44px; height: 44px; }
.pack .seal .logo svg { width: 100%; height: 100%; display: block; }
.pack .inside strong { font: 700 1.35rem/1.1 var(--serif); letter-spacing: .01em; }
.pack .inside > span:last-child { font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.pack.loading { animation: wobble .9s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(2deg) scale(1.02); } }
.pack.tear { animation: tear .5s ease-in forwards; }
@keyframes tear { 40% { transform: scale(1.06) rotate(2deg); } 100% { transform: scale(.6) translateY(-40px); opacity: 0; } }
.pack.theme { width: 100%; aspect-ratio: auto; min-height: 72px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(60 40 15 / .25), 0 10px 20px -16px rgb(60 40 15 / .8); }
.pack.theme::before { animation: none; background: none; }
.pack.theme .inside { position: relative; grid-template-columns: auto 1fr auto; text-align: start; padding: 12px 14px; justify-items: start; gap: 14px; }
.pack.theme .seal { width: 44px; height: 44px; margin: 0; color: #fff3e6; }
.pack.theme .seal svg { width: 22px; height: 22px; }
.pack.theme .inside strong { font-size: 1.05rem; }
.pack.theme .inside .count { font: 600 .74rem/1.4 var(--mono); opacity: .75; }
.pack.theme .chip { background: rgb(255 250 240 / .6); border-color: rgb(60 40 15 / .25); color: #2a2016; }
.stock { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.stock i { width: 10px; height: 16px; border-radius: 2px; border: 1px solid var(--rule); background: transparent; }
.stock i.on { background: var(--kraft); border-color: #9a7848; }
.reveal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; }
@media (max-width: 760px) { .reveal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 440px) { .reveal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reveal .flip { cursor: pointer; animation: deal .35s ease backwards; }
.reveal .flip:nth-child(2) { animation-delay: .07s; }
.reveal .flip:nth-child(3) { animation-delay: .14s; }
.reveal .flip:nth-child(4) { animation-delay: .21s; }
.reveal .flip:nth-child(5) { animation-delay: .28s; }
@keyframes deal { from { opacity: 0; transform: translateY(30px) scale(.9); } }
/* Mise en valeur : un filet net de la couleur de la rareté (un filter sur .flip-inner aplatirait la 3D). */
.reveal .flip.flipped.glow-superrare .front-side .tcg { box-shadow: 0 0 0 2px var(--c-superrare), 0 16px 30px -12px rgb(0 0 0 / .55); }
.reveal .flip.flipped.glow-ultrarare .front-side .tcg { box-shadow: 0 0 0 2px var(--c-ultrarare), 0 16px 30px -12px rgb(0 0 0 / .55); }
.reveal .flip.flipped.glow-legendary .front-side .tcg { box-shadow: 0 0 0 3px #d4ad4f, 0 0 28px rgb(212 173 79 / .55); }
.pity { font-size: .86rem; color: var(--muted); text-align: center; display: inline-flex; gap: 6px; align-items: center; }
.pity .i { color: var(--accent); }
.coins { color: var(--gold); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }

/* --- Détail d'une carte ------------------------------------------------------- */
dialog.card-dialog { width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 20px; overflow-y: auto; }
.detail-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 640px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > div:first-child { max-width: 280px; margin: 0 auto; width: 100%; }
}
.statline { display: grid; grid-template-columns: 7em 1fr auto; gap: 10px; align-items: center; margin: 8px 0; font-size: .9rem; }
.statline .track { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.statline .track div { height: 100%; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .88rem; margin: 10px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.tilt { transition: transform .12s ease; will-change: transform; }

/* --- Filtres ---------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }
.filters input[type="search"] { flex: 1 1 180px; min-height: 38px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--surface); }
.filters select { min-height: 38px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--surface); }
.rchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: var(--surface); border-radius: 4px; padding: 6px 10px; font-size: .8rem; font-weight: 650; cursor: pointer; }
.rchip .i { width: 14px; height: 14px; }
.rchip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs button {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 10px 12px; font-weight: 650; font-size: .94rem;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button .i { width: 16px; height: 16px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.setrow { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.setrow:last-child { border-bottom: 0; }
.setrow .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule); color: var(--accent); background: var(--surface-2); }
.setrow .ico svg { width: 20px; height: 20px; }

/* --- Duels -------------------------------------------------------------------- */
.arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.arena .side-col { display: grid; gap: 8px; justify-items: center; }
.arena .side-col .tcg { max-width: 180px; }
.arena .vs { font: italic 600 1.5rem var(--serif); color: var(--muted); align-self: center; }
.hp { width: 100%; max-width: 180px; }
.hp .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.hp .bar div { height: 100%; background: var(--ok); transition: width .6s ease; }
.hp.low .bar div { background: var(--ko); }
.hp .lbl { display: flex; justify-content: space-between; font: 600 .74rem var(--mono); margin-bottom: 4px; gap: 6px; color: var(--muted); }
.hit { animation: hit .45s ease; }
@keyframes hit { 25% { transform: translateX(-8px) rotate(-2deg); } 50% { transform: translateX(8px) rotate(2deg); } 75% { transform: translateX(-4px); } }
.deck-pick .cardbtn[aria-pressed="true"] .tcg { outline: 3px solid var(--ink); outline-offset: 3px; }
.duel-log { font-size: .9rem; display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--border); }
.duel-log div { padding: 8px 0 8px 12px; border-bottom: 1px solid var(--border); border-inline-start: 3px solid var(--rule); }
.duel-log .me { border-inline-start-color: var(--ok); }
.duel-log .them { border-inline-start-color: var(--ko); }
.opponents { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.opponent { text-align: start; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; }
.opponent:hover { border-color: var(--text); }
.opponent[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.opponent .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule); margin-bottom: 8px; color: var(--accent); background: var(--surface); }
.opponent .av svg { width: 20px; height: 20px; }
@media (max-width: 520px) {
  .arena .side-col .tcg { max-width: 140px; }
  .arena .vs { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flip .flip-inner { transition: none; }
}

/* Tableau des seuils : reste un vrai tableau sur téléphone. */
@media (max-width: 600px) {
  .compare.thresholds thead { display: table-header-group; }
  .compare.thresholds tr { display: table-row; }
  .compare.thresholds td, .compare.thresholds th { display: table-cell; padding: 6px 4px; font-size: .8rem; }
}