/* Deus : la carte-monnaie en métal. Le fond dépend de l'Offrande (1 Fer, 2 Bronze, 3 Argent, 4 Or, 5 Orichalque),
   la frise et la teinte dépendent de la culture. Toutes les tailles internes sont en cqw : la carte s'adapte à sa largeur. */
.carte {
  --cw: 180px;
  --m-a: #8d9196; --m-b: #d8dade; --m-c: #3a3c40; --m-ink: #f6f1e6; --m-grave: rgba(0, 0, 0, .45); --m-lum: rgba(255, 255, 255, .5);
  --cu: #d9a441; --cu-glow: #ffd27a;
  position: relative; width: var(--cw); aspect-ratio: 5 / 7; container-type: inline-size; flex: none;
  border-radius: calc(var(--cw) * .065); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(0 calc(var(--cw) * .018) calc(var(--cw) * .026) rgba(0, 0, 0, .55));
}
.carte.m-fer { --m-a: #55595e; --m-b: #9ba0a6; --m-c: #232528; --m-ink: #f3efe7; --m-lum: rgba(220, 230, 240, .35); }
.carte.m-bronze { --m-a: #8a5a2b; --m-b: #d39a5c; --m-c: #3f240e; --m-ink: #fff2df; --m-lum: rgba(255, 220, 170, .45); }
.carte.m-argent { --m-a: #9aa1a9; --m-b: #f4f6f8; --m-c: #555b62; --m-ink: #171a1f; --m-grave: rgba(30, 36, 44, .5); --m-lum: rgba(255, 255, 255, .8); }
.carte.m-or { --m-a: #b8862a; --m-b: #fbe39a; --m-c: #6a470c; --m-ink: #2a1a03; --m-grave: rgba(70, 40, 0, .55); --m-lum: rgba(255, 250, 220, .8); }
.carte.m-orichalque { --m-a: #a8456e; --m-b: #ffd6c2; --m-c: #3e1030; --m-ink: #2a0718; --m-grave: rgba(70, 10, 40, .55); --m-lum: rgba(200, 255, 245, .85); }

.carte.cu-grec { --cu: #d9a441; --cu-glow: #ffd27a; }
.carte.cu-nordique { --cu: #7fa6c0; --cu-glow: #bfe3ff; }
.carte.cu-egypte { --cu: #3f6fb5; --cu-glow: #7fb2ff; }
.carte.cu-japon { --cu: #c8452e; --cu-glow: #ff9b7a; }
.carte.cu-inde { --cu: #e08a1e; --cu-glow: #ffc36b; }
.carte.cu-chine { --cu: #2f9c85; --cu-glow: #7fe6cc; }

.carte-face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .05) 0 .35cqw, rgba(0, 0, 0, .05) .35cqw .8cqw),
    radial-gradient(130% 70% at 25% 0%, var(--m-lum), transparent 55%),
    linear-gradient(150deg, var(--m-c) 0%, var(--m-a) 18%, var(--m-b) 42%, var(--m-a) 62%, var(--m-c) 100%);
  box-shadow: inset 0 0 0 .7cqw rgba(255, 255, 255, .28), inset 0 0 0 1.6cqw rgba(0, 0, 0, .22), inset 0 0 6cqw rgba(0, 0, 0, .35);
}
.carte.m-orichalque .carte-face { /* l'orichalque, métal mythique, a des reflets irisés */
  background:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .05) 0 .35cqw, rgba(0, 0, 0, .05) .35cqw .8cqw),
    conic-gradient(from 210deg at 70% 30%, rgba(90, 230, 210, .45), rgba(255, 140, 200, .35), rgba(170, 120, 255, .38), rgba(255, 230, 150, .3), rgba(90, 230, 210, .45)),
    radial-gradient(130% 70% at 25% 0%, var(--m-lum), transparent 55%),
    linear-gradient(150deg, var(--m-c) 0%, var(--m-a) 18%, var(--m-b) 42%, var(--m-a) 62%, var(--m-c) 100%);
}
.carte-face::after { /* rivets aux quatre coins */
  content: ''; position: absolute; inset: 2.6cqw; pointer-events: none; border-radius: 4cqw;
  background:
    radial-gradient(circle at 1.4cqw 1.4cqw, var(--m-b) .7cqw, var(--m-c) 1cqw, transparent 1.2cqw) top left / 3cqw 3cqw no-repeat,
    radial-gradient(circle at 1.6cqw 1.4cqw, var(--m-b) .7cqw, var(--m-c) 1cqw, transparent 1.2cqw) top right / 3cqw 3cqw no-repeat,
    radial-gradient(circle at 1.4cqw 1.6cqw, var(--m-b) .7cqw, var(--m-c) 1cqw, transparent 1.2cqw) bottom left / 3cqw 3cqw no-repeat,
    radial-gradient(circle at 1.6cqw 1.6cqw, var(--m-b) .7cqw, var(--m-c) 1cqw, transparent 1.2cqw) bottom right / 3cqw 3cqw no-repeat;
}

/* Illustration : une niche en arc, comme dans un temple */
.carte-art {
  position: absolute; z-index: 0; left: 5cqw; right: 5cqw; top: 5cqw; height: 86cqw; overflow: hidden;
  border-radius: 44cqw 44cqw 2cqw 2cqw / 30cqw 30cqw 2cqw 2cqw;
  background: radial-gradient(80% 70% at 50% 35%, color-mix(in srgb, var(--cu) 55%, #2a1d12), #120c08);
  box-shadow: 0 0 0 .8cqw var(--m-c), 0 0 0 1.5cqw var(--m-b), 0 0 0 2.1cqw var(--m-c);
}
.carte-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.carte-art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 7cqw rgba(0, 0, 0, .65); background: linear-gradient(180deg, transparent 60%, rgba(10, 6, 3, .5)); }
.carte-art .art-vide { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cu-glow); opacity: .5; }
.carte-art .art-vide svg { width: 40cqw; height: 40cqw; }

/* Coût en Foi (haut gauche) et valeur d'Offrande (haut droite) */
.carte-cout, .carte-offrande, .carte-ray, .carte-fer {
  position: absolute; display: grid; place-items: center; width: 21cqw; height: 21cqw; border-radius: 50%;
  font-family: var(--titre); font-weight: 900; font-size: 11cqw; line-height: 1; z-index: 2;
}
.carte-cout { left: 2.5cqw; top: 2.5cqw; color: #fff4dc; background: radial-gradient(circle at 35% 30%, #ffcb6b, #c85a12 55%, #5b1d04); box-shadow: 0 0 0 .8cqw #2a1206, 0 0 0 1.4cqw #f3c46a, 0 1cqw 2cqw rgba(0, 0, 0, .6); text-shadow: 0 .4cqw 0 rgba(0, 0, 0, .6); }
.carte-cout svg { position: absolute; width: 74%; height: 74%; opacity: .32; color: #fff0c0; }
.carte-cout b { position: relative; }
.carte-offrande { right: 2.5cqw; top: 2.5cqw; color: var(--m-ink);
  background: radial-gradient(circle at 35% 30%, var(--m-b), var(--m-a) 55%, var(--m-c));
  box-shadow: 0 0 0 .8cqw var(--m-c), 0 0 0 1.4cqw var(--m-b), 0 1cqw 2cqw rgba(0, 0, 0, .6); text-shadow: 0 .3cqw 0 var(--m-lum); }
.carte-offrande::before { content: ''; position: absolute; inset: 2.2cqw; border-radius: 50%; border: .5cqw dashed var(--m-grave); }

/* Plaque gravée : nom, type, effets */
.carte-plaque {
  position: absolute; left: 4cqw; right: 4cqw; top: 84cqw; bottom: 4cqw; padding: 5.5cqw 4cqw 4cqw; border-radius: 2.5cqw 2.5cqw 5cqw 5cqw; color: var(--m-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .12)), linear-gradient(160deg, var(--m-a), var(--m-b) 50%, var(--m-a));
  box-shadow: inset 0 .5cqw 0 rgba(255, 255, 255, .35), inset 0 -.6cqw 0 rgba(0, 0, 0, .25), 0 -1cqw 3cqw rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.carte-frise { position: absolute; left: 0; right: 0; top: 0; height: 4.4cqw; border-radius: 2.5cqw 2.5cqw 0 0; opacity: .9;
  background-color: color-mix(in srgb, var(--cu) 70%, #000); background-size: auto 100%; background-repeat: repeat-x; box-shadow: inset 0 -.4cqw 0 rgba(0, 0, 0, .35); }
.cu-grec .carte-frise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 9.2h6V1.5h8v5H9.5V4' fill='none' stroke='%23ffe7a8' stroke-width='1.5'/%3E%3Cpath d='M14 9.2h6' stroke='%23ffe7a8' stroke-width='1.5'/%3E%3C/svg%3E"); }
.cu-nordique .carte-frise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 5c5-6 5 6 10 0s5 6 10 0M0 5c5 6 5-6 10 0s5-6 10 0' fill='none' stroke='%23e2f2ff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.cu-japon .carte-frise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cg fill='none' stroke='%23ffe4d6' stroke-width='1'%3E%3Ccircle cx='6' cy='11' r='8'/%3E%3Ccircle cx='6' cy='11' r='5'/%3E%3Ccircle cx='6' cy='11' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); }
.cu-inde .carte-frise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cg fill='%23fff0c8'%3E%3Cpath d='M8 1c2 2.5 2 5.5 0 8-2-2.5-2-5.5 0-8z'/%3E%3Cpath d='M8 9C6 6 3 5 1 6c1.5 2 4 3 7 3zM8 9c2-3 5-4 7-3-1.5 2-4 3-7 3z' opacity='.75'/%3E%3C/g%3E%3C/svg%3E"); }
.cu-chine .carte-frise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M1 8c0-4 5-4 5-1 0 2-3 2-3 0M7 8h4c0-4 5-4 5-1 0 2-3 2-3 0M16 8h4' fill='none' stroke='%23d9fff4' stroke-width='1.2'/%3E%3C/svg%3E"); }
.cu-egypte .carte-frise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M6 9V4M6 4 3 1M6 4l3-3M6 4V1' fill='none' stroke='%23f5e2a8' stroke-width='1.2'/%3E%3C/svg%3E"); }
.carte-nom { font-family: var(--titre); font-weight: 900; font-size: 7.6cqw; letter-spacing: .02em; line-height: 1.05; text-shadow: 0 .3cqw 0 var(--m-lum); margin-bottom: 1cqw; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-type { font-family: var(--titre); font-weight: 700; font-size: 4.2cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .78; margin-bottom: 1.6cqw; }
.carte-texte { font-family: var(--texte); font-weight: 600; font-size: 5.2cqw; line-height: 1.16; padding: 0 9cqw; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .6cqw; }
.carte-texte p { margin: 0; }
.carte-texte b { font-family: var(--titre); font-size: .86em; letter-spacing: .02em; }
.carte-texte .citation { font-family: var(--ancien); font-style: italic; font-weight: 400; opacity: .75; }

/* Rayonnement (bas gauche) et Ferveur (bas droite) */
.carte-ray { left: 1.5cqw; bottom: 1.5cqw; color: #3a1c00; background: radial-gradient(circle at 40% 35%, #fff6c9, #ffcf4a 45%, #c27a07 80%);
  box-shadow: 0 0 0 .8cqw #5a3200, 0 0 0 1.4cqw #ffe28a, 0 0 4cqw rgba(255, 200, 80, .55); }
.carte-ray::before { content: ''; position: absolute; inset: -3.5cqw; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, #ffd34f 0 7deg, transparent 7deg 22.5deg); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.carte-fer { right: 1.5cqw; bottom: 1.5cqw; color: #0b1d2c; border-radius: 4cqw 4cqw 11cqw 11cqw; background: linear-gradient(180deg, #e6f4ff, #8fc3e6 55%, #3d6f94);
  box-shadow: 0 0 0 .8cqw #10283a, 0 0 0 1.4cqw #cfe9ff, 0 1cqw 2cqw rgba(0, 0, 0, .5); }
.carte-ray b, .carte-fer b { position: relative; }
.carte-typeicone { position: absolute; left: 3cqw; bottom: 3cqw; width: 17cqw; height: 17cqw; display: grid; place-items: center; border-radius: 50%; color: var(--m-ink);
  background: radial-gradient(circle at 35% 30%, var(--m-b), var(--m-a) 60%, var(--m-c)); box-shadow: 0 0 0 .7cqw var(--m-c); z-index: 2; }
.carte-typeicone svg { width: 62%; height: 62%; }
.carte-bonus { position: absolute; left: 22cqw; bottom: 4cqw; z-index: 3; font-family: var(--titre); font-weight: 900; font-size: 8cqw; color: #fff3b0; text-shadow: 0 0 2cqw #ff9a1a, 0 .4cqw 0 #6b3500; }

/* Reflet métallique qui balaie la carte */
.carte-reflet { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; mix-blend-mode: overlay; }
.carte-reflet::before { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, .15) 53%, transparent 60%);
  transform: translateX(-70%); animation: reflet 7s ease-in-out infinite; animation-delay: var(--delai, 0s); }
@keyframes reflet { 0%, 70% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }

/* Petites cartes (main sur téléphone) : on garde l'essentiel */
@container (max-width: 125px) {
  .carte-texte, .carte-type { display: none; }
  .carte-nom { font-size: 10.5cqw; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 3cqw; }
  .carte-cout, .carte-offrande, .carte-ray, .carte-fer { width: 27cqw; height: 27cqw; font-size: 15cqw; }
  .carte-art { height: 92cqw; }
  .carte-plaque { top: 90cqw; padding: 5cqw 2cqw 2cqw; }
}

/* Dos de carte : métal sombre frappé du sceau */
.carte.dos .carte-face {
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(255, 210, 120, .25), transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 .6cqw, transparent .6cqw 2.4cqw),
    linear-gradient(150deg, #20160c, #5b4128 40%, #2b1d10 70%, #120c06);
}
.carte.dos .sceau { position: absolute; inset: 18cqw 12cqw; color: #e5bf6e; filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 4cqw rgba(255, 200, 100, .35)); }
.carte.dos .sceau svg { width: 100%; height: 100%; }

/* États */
.carte.inactive { filter: grayscale(.65) brightness(.62) drop-shadow(0 calc(var(--cw) * .018) calc(var(--cw) * .026) rgba(0, 0, 0, .55)); }
.carte.choisie { filter: drop-shadow(0 0 calc(var(--cw) * .03) var(--cu-glow)) drop-shadow(0 0 calc(var(--cw) * .012) #fff3c4); }
.carte.jouable::before { content: ''; position: absolute; inset: -1.6cqw; border-radius: 8cqw; pointer-events: none; box-shadow: 0 0 0 .9cqw rgba(255, 213, 107, .9), 0 0 5cqw rgba(255, 190, 80, .7); animation: pulse 1.8s ease-in-out infinite; }
.carte.opposee::before { content: ''; position: absolute; inset: -1.6cqw; border-radius: 8cqw; pointer-events: none; box-shadow: 0 0 0 1.2cqw #8fd0ff, 0 0 6cqw rgba(140, 200, 255, .8); }
.carte.payee::before { content: ''; position: absolute; inset: -1.6cqw; border-radius: 8cqw; pointer-events: none; box-shadow: 0 0 0 1.2cqw #ffb547, 0 0 6cqw rgba(255, 170, 60, .7); }
.carte .etiquette { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5; white-space: nowrap; padding: 1cqw 4cqw; border-radius: 999px; font-family: var(--titre); font-weight: 700; font-size: max(10px, 7cqw); letter-spacing: .06em; background: #10283a; color: #cfe9ff; border: 1px solid #8fd0ff; }
.carte.payee .etiquette { background: #3a1e05; color: #ffd9a0; border-color: #ffb547; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Arme d'un dieu : pas d'Offrande ni de Ferveur */
.carte.arme .carte-offrande, .carte.arme .carte-fer { display: none; }
.carte.arme .carte-face { background: repeating-linear-gradient(93deg, rgba(255,255,255,.05) 0 .35cqw, rgba(0,0,0,.05) .35cqw .8cqw), radial-gradient(130% 70% at 25% 0%, rgba(255,240,200,.5), transparent 55%), linear-gradient(150deg, #2a1a08, #6b4a1c 25%, #e9c46a 45%, #6b4a1c 65%, #1a1005); }

/* L'illustration passe devant le sceau de remplacement */
.art-vide + img { position: relative; z-index: 1; }
.carte-texte .quand { font-style: italic; font-weight: 500; opacity: .8; }

/* Texte des cartes : court en taille normale, complet en grand ; jamais sous les icônes du bas */
.carte-texte { padding: 0 16cqw 15cqw; }
.carte-texte .fx-court { font-family: var(--titre); font-weight: 700; font-size: 5.6cqw; line-height: 1.2; letter-spacing: .01em; }
.carte-texte .fx-court i { font-family: var(--texte); font-weight: 600; opacity: .8; }
.carte-texte .fx-long { display: none; }
@container (min-width: 220px) {
  .carte-texte { padding: 0 7cqw 16cqw; justify-content: flex-start; }
  .carte-texte .fx-court { display: none; }
  .carte-texte .fx-long { display: flex; flex-direction: column; gap: .8cqw; }
  .carte-texte .fx-long p { font-size: 5cqw; }
}

.carte-nom, .carte-type { flex: none; }
@container (min-width: 220px) {
  .carte-art { height: 72cqw; }
  .carte-plaque { top: 70cqw; }
}
@container (min-width: 220px) { .carte-texte { padding: 0 9cqw 22cqw; } }