/*
  Carta del Corso di Capire.
  Tutte le misure sono in "unità carta" (--u = larghezza / 300): la carta si scala
  impostando solo --larghezza sull'elemento .carta (default calc(300 * var(--u))).
  Font necessari: Anton, Archivo 400/500/700, Fraunces italic 400.
*/
.carta {
  --larghezza: 300px;
  --u: calc(var(--larghezza) / 300);
  --px: 50%; --py: 50%; --forza: .5;
  --fondo: #141518; --ink: #fff; --tenue: rgba(255,255,255,.62); --riga: rgba(255,255,255,.2); --accento: #ff4436;
  --metallo: linear-gradient(calc(var(--forza) * 40deg + 120deg), #6b6f78, #23252b 30%, #8e939d 50%, #1b1d22 75%, #5c606a);
  --arcobaleno: #ff3cac 0%, #ffd33d 6%, #3dffb0 12%, #3dc8ff 18%, #b43dff 24%, #ff3cac 30%;
  position: relative; width: var(--larghezza); aspect-ratio: 63 / 88; border-radius: calc(14 * var(--u)); overflow: hidden; transform-style: preserve-3d;
  background: var(--fondo); color: var(--ink); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,.9); font-family: Archivo, sans-serif;
  -webkit-user-select: none; user-select: none; text-align: left;
}
.carta * { box-sizing: border-box; }
.carta .grana { position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.carta .cornice { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: calc(14 * var(--u)); border: calc(8 * var(--u)) solid transparent; background: var(--metallo) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.carta .numero { position: absolute; bottom: calc(-38 * var(--u)); right: calc(-14 * var(--u)); margin: 0; font: 400 calc(200 * var(--u))/1 Anton; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: calc(1.2 * var(--u)) var(--accento); opacity: .16; pointer-events: none; }
.carta .dentro { position: relative; height: 100%; padding: calc(16 * var(--u)) calc(19 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; }
.carta .su { display: flex; justify-content: space-between; align-items: center; }
.carta .etichetta { font: 700 calc(9 * var(--u)) Archivo; letter-spacing: .18em; color: var(--accento); }
.carta .qc { font: 400 calc(26 * var(--u))/1 Anton; color: var(--accento); }
.carta .foto { position: relative; margin-top: calc(7 * var(--u)); flex: none; }
.carta .ft { position: relative; height: calc(256 * var(--u)); border-radius: calc(4 * var(--u)); overflow: hidden; background: #000; }
/* Foto e sagoma dello shiny stanno nello stesso contenitore: inquadratura e zoom le spostano insieme */
.carta .ft-in { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); }
.carta .ft-in img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; -webkit-user-drag: none; pointer-events: none; }
.carta .ft::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(transparent 55%, rgba(0,0,0,.8)); pointer-events: none; }
.carta .nome { position: absolute; z-index: 4; left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); margin: 0; font: 400 calc(34 * var(--u))/.9 Anton; text-transform: uppercase; color: #fff; }
/* Il testo fuori dalla foto rientra quanto il nome, così tutto sta sulla stessa linea */
.carta .su, .carta .mossa, .carta .descr, .carta .piede { margin-left: calc(12 * var(--u)); margin-right: calc(12 * var(--u)); }
.carta .mossa { margin-top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); }
.carta .punti { display: flex; gap: calc(3 * var(--u)); }
.carta .punti i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--accento); }
.carta .mossa b { flex: 1; font: 700 calc(13.5 * var(--u)) Archivo; }
.carta .danno { font: 400 calc(22 * var(--u))/1 Anton; color: var(--accento); }
.carta .descr { margin-top: calc(8 * var(--u)); margin-bottom: 0; padding-top: calc(8 * var(--u)); border-top: calc(1 * var(--u)) solid var(--riga); font: italic 400 calc(11.5 * var(--u))/1.35 Fraunces; }
.carta .piede { margin-top: auto; display: flex; justify-content: space-between; gap: calc(8 * var(--u)); font: 500 calc(7.5 * var(--u)) Archivo; letter-spacing: .06em; color: var(--tenue); }
.carta .credito { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.carta .serie { white-space: nowrap; }
.carta .luce { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.3), transparent 50%); mix-blend-mode: soft-light; }

/* Shiny: ritagliato sulla sagoma del soggetto, contenuto diverso per rarità */
.carta .shiny { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--maschera) var(--pos, 50% 50%) / cover no-repeat; mask: var(--maschera) var(--pos, 50% 50%) / cover no-repeat; }

/* ── Comune: canna di fucile, niente shiny ── */
.carta.comune .shiny { display: none; }

/* ── Rara: oro, shiny solo lucido ── */
.carta.rara { --accento: #f3d27a; --fondo: #0f0d09;
  --metallo: linear-gradient(calc(var(--forza) * 40deg + 120deg), #fff2b0, #a8780a 30%, #ffe68a 50%, #7a5608 75%, #f7dc8a); }
.carta.rara .cornice { border-width: calc(6 * var(--u)); }
.carta.rara .shiny {
  background: linear-gradient(115deg, transparent 38%, rgba(255,214,120,.25) 44%, rgba(255,248,225,.95) 49%, rgba(255,230,160,.55) 52%, rgba(255,214,120,.18) 57%, transparent 63%);
  background-size: 260% 260%; background-position: var(--px) var(--py);
  mix-blend-mode: screen; opacity: calc(.25 + var(--forza) * .6); }

/* ── Leggendaria: cornice arcobaleno, shiny arcobaleno, numero gigante bordato arcobaleno, QC in pillola ── */
.carta.leggendaria { --accento: #ffffff;
  --metallo: repeating-linear-gradient(115deg, #ff3cac 0%, #ffd33d 8%, #3dffb0 16%, #3dc8ff 24%, #b43dff 32%, #ff3cac 40%) var(--px) var(--py) / 300% 300%; }
.carta.leggendaria .cornice { border-width: calc(6 * var(--u)); filter: saturate(.85) brightness(1.05); }
.carta.leggendaria .shiny {
  background: repeating-linear-gradient(115deg, var(--arcobaleno));
  background-size: 300% 300%; background-position: var(--px) var(--py);
  mix-blend-mode: color-dodge; opacity: calc(.35 + var(--forza) * .55); filter: brightness(.6) contrast(1.3) saturate(1.4); }
.carta.leggendaria .numero { display: none; }
.carta .numero-svg { position: absolute; right: calc(-14 * var(--u)); bottom: calc(-2 * var(--u)); width: calc(230 * var(--u)); height: calc(190 * var(--u)); overflow: visible; pointer-events: none; opacity: .28; }
.carta.leggendaria .qc { color: #fff; font-size: calc(20 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)); border-radius: calc(99 * var(--u)); border: calc(2 * var(--u)) solid transparent;
  background: linear-gradient(#141518, #141518) padding-box, repeating-linear-gradient(115deg, #ff3cac 0%, #ffd33d 8%, #3dffb0 16%, #3dc8ff 24%, #b43dff 32%, #ff3cac 40%) var(--px) var(--py) / 300% 300% border-box; }