/* Main de cartes pendant la partie. La carte vient de carte-base.css (même carte que l'album) ; ici : sa taille réduite, le glisser-déposer, les cibles. */
@font-face { font-family: Columna; src: url('natif/Columna.ttf'); }
:root { --z: .45; --or: #e2c98f; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; color: #f6ead0; font: 15px Columna, serif; user-select: none; }
.jeu { position: fixed; inset: 0; pointer-events: none; }
.jeu[hidden] { display: none; }
/* Cartes de la main, au-dessus de l'encart du bas. */
.main { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; align-items: flex-end; gap: calc(320px * var(--z) * .3); }
.entree { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; cursor: grab; touch-action: none; transition: transform .18s ease-out, filter .18s; }
.entree.inerte { cursor: default; filter: saturate(.6) brightness(.8); }
.entree.glisse { cursor: grabbing; z-index: 20; transition: none; filter: drop-shadow(0 14px 18px #000c); }
.entree.retour { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.entree:not(.inerte):not(.glisse).chaud { transform: translateY(-12px); }
.entree .carte-chocogrenouille { zoom: var(--z); margin: 0 !important; animation: none !important; transition: none; opacity: 1 !important; pointer-events: none; }
.entree .nom { max-width: calc(320px * var(--z)); text-align: center; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; line-height: 1.15; text-shadow: 0 0 3px #000, 0 1px 5px #000; }
.entree .stats { font-size: 12px; color: #d9cba7; text-shadow: 0 0 3px #000, 0 1px 5px #000; }
.boutons { position: absolute; left: 2.5%; top: 9.5%; display: flex; gap: 10px; pointer-events: auto; }
button { padding: 8px 14px; color: #f6ead0; background: #0a111ecc; border: 1px solid #b89a63aa; border-radius: 4px; font: inherit; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
button:hover { background: #b89a6340; }
button.principal { background: #6b5630cc; border-color: #e2c98f; }
button[hidden] { display: none; }
.carte-chocogrenouille { --rarete: #b89a63; }
.rarete-peu_commune { --rarete: #c3ccd3; }
.rarete-rare { --rarete: #e6bb43; }
.rarete-epique { --rarete: #b46ae6; }
.rarete-legendaire { --rarete: #ff6a4d; }
.rarete-peu_commune .cg-pentagone::after, .rarete-rare .cg-pentagone::after, .rarete-epique .cg-pentagone::after, .rarete-legendaire .cg-pentagone::after {
    filter: drop-shadow(0 18px 22px #000b) drop-shadow(0 0 9px var(--rarete));
}
.rarete-epique .cg-halo::before, .rarete-legendaire .cg-halo::before { border-color: var(--rarete); box-shadow: 0 0 18px var(--rarete), inset 0 0 22px #ffffff22; }

/* ---- Statistiques : trois objets 3D par carte, comme dans l'album (touche K) : sur le bord droit de la carte ---- */
.cg-stat {
    position: absolute; z-index: 12; left: 268px; height: 84px; display: flex; align-items: center; gap: 0; pointer-events: auto;
    transform: perspective(500px) translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 34px) rotateY(calc(var(--px) * 24deg)) rotateX(calc(var(--py) * -20deg));
}
.cg-stat-1 { top: 92px; --c: #ff5a6a; }   /* vie (cœur) : rouge, la plus haute */
.cg-stat-2 { top: 168px; --c: #ffe14d; }  /* puissance (éclair) : jaune, dessous */
.ecran.visible .cg-stat-1 { animation: blason-pose .7s .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.ecran.visible .cg-stat-2 { animation: blason-pose .7s .62s cubic-bezier(.2, .9, .3, 1.3) both; }
.ecran.visible .cg-stat-3 { animation: blason-pose .7s .74s cubic-bezier(.2, .9, .3, 1.3) both; }
/* Halo au survol : un disque de la couleur du rôle derrière l'objet, dont seule l'opacité change (un filtre animé entre deux listes
   d'effets différentes interpolait mal la couleur au premier survol). Le filtre du canevas, lui, ne change jamais. */
.cg-stat::before {
    content: ""; position: absolute; left: 0; top: 0; width: 84px; height: 84px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 75%, transparent) 0, color-mix(in srgb, var(--c) 30%, transparent) 38%, transparent 68%);
}
.cg-stat:hover::before { opacity: 1; }
.cg-stat canvas { position: relative; z-index: 1; width: 84px; height: 84px; flex: none; filter: drop-shadow(calc(var(--px) * -6px) calc(8px - var(--py) * 5px) 8px #000c) drop-shadow(0 0 10px color-mix(in srgb, var(--c) 30%, transparent)); }
.cg-stat svg { width: 40px; height: 40px; margin: 22px; fill: var(--c); filter: drop-shadow(0 2px 3px #000c); }
.cg-stat svg[hidden], .cg-stat canvas[hidden] { display: none; }
.cg-stat b {
    position: relative; z-index: 1; margin-left: -6px; color: var(--c); font: 34px/1 CharmColumna, serif; text-shadow: 0 2px 0 #000, 0 0 12px color-mix(in srgb, var(--c) 55%, transparent), 0 4px 10px #000c;
    transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 4px), 0);
}
/* Nom de la statistique, au survol : même petite plaque que l'étiquette de la boîte, à droite du chiffre. */
.cg-stat-nom {
    position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%; white-space: nowrap; padding: 5px 12px; opacity: 0; pointer-events: none;
    border: 1px solid #b89a6380; background: linear-gradient(145deg, #13203a, #0a111e); color: #f0dca6; font: 11px CharmColumna, serif; letter-spacing: .14em; text-transform: uppercase;
    transition: opacity .2s ease;
}
.cg-stat:hover .cg-stat-nom { opacity: 1; }



/* ---- Table : silhouettes des emplacements (dessinées dans l'écran, pas dans le monde) et cartes posées ---- */
.posees { position: absolute; inset: 0; }
.posee { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
.posee .carte-chocogrenouille { margin: 0 !important; animation: none; transition: none; opacity: 1 !important; pointer-events: none; }
.posee .nom { white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; text-shadow: 0 0 3px #000, 0 1px 5px #000; }
/* Dépôt : la carte se pose sur la table d'un petit rebond ; la fumée, elle, est un effet natif du jeu lancé sur l'emplacement (client de hmp-cartes). */
.posee.depot .carte-chocogrenouille { animation: depot .35s cubic-bezier(.3, .9, .35, 1) both !important; }
@keyframes depot {
  0% { transform: translateY(-26px) scale(1.18); }
  60% { transform: translateY(0) scale(.97); }
  100% { transform: none; }
}

/* ---- Fond de carte selon la RARETÉ (la maison n'apparaît pas pendant la partie) : mêmes deux règles que carte-base.css par maison ---- */
.carte-chocogrenouille.fond-commune .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #6b5128, #3a2c14 55%, #1c1507); }
.carte-chocogrenouille.fond-commune .cg-fond::before, .carte-chocogrenouille.fond-commune .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(-5deg) saturate(1.8) brightness(.62) contrast(1.1); }
.carte-chocogrenouille.fond-peu_commune .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #6f7d89, #3b454e 55%, #1b2228); }
.carte-chocogrenouille.fond-peu_commune .cg-fond::before, .carte-chocogrenouille.fond-peu_commune .cg-fond::after { filter: grayscale(1) brightness(.78) contrast(1.1); }
.carte-chocogrenouille.fond-rare .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #8d6d12, #4e3a08 55%, #241a03); }
.carte-chocogrenouille.fond-rare .cg-fond::before, .carte-chocogrenouille.fond-rare .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(10deg) saturate(3.2) brightness(.74) contrast(1.1); }
.carte-chocogrenouille.fond-epique .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #5d3190, #301749 55%, #160a25); }
.carte-chocogrenouille.fond-epique .cg-fond::before, .carte-chocogrenouille.fond-epique .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(245deg) saturate(2.8) brightness(.68) contrast(1.1); }
.carte-chocogrenouille.fond-legendaire .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #93391a, #491a0b 55%, #230b04); }
.carte-chocogrenouille.fond-legendaire .cg-fond::before, .carte-chocogrenouille.fond-legendaire .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(-18deg) saturate(3.6) brightness(.7) contrast(1.1); }

/* ---- Niveaux d'une carte (niv-1 à niv-5), cumulatifs : 1 plate, fond figé ; 2 fond animé ; 3 personnage au-dessus de l'ornement ; 4 hologramme ; 5 négatif (copie de cartes.css) ---- */
/* Personnage derrière l'ornement (niveaux 1 et 2) : sous le cadre doré et découpé à la forme de la fenêtre, comme le fond. */
.niv-1 .cg-perso, .niv-2 .cg-perso { z-index: 3; -webkit-mask: url('natif/cg-forme.png') center / 100% 100% no-repeat; mask: url('natif/cg-forme.png') center / 100% 100% no-repeat; }
.niv-1 .cg-perso img, .niv-2 .cg-perso img { animation: none; }
.jeu .niv-1 .cg-etincelles i, .jeu .niv-2 .cg-etincelles i { animation: none; opacity: 0; }
.jeu .niv-1 .cg-reflet i, .jeu .niv-2 .cg-reflet i { animation: none; opacity: 0; }

/* Niveau 1 : fond figé. */
.niv-1 .cg-fond::before, .niv-1 .cg-fond::after, .niv-1 .cg-rayons::before, .niv-1 .cg-anneaux > i::before,
.niv-1 .cg-halo::before, .niv-1 .cg-halo::after, .niv-1 .cg-spores::before { animation: none; }

/* Niveau 4 : hologramme discret sur le FOND seulement (la fenêtre, derrière le personnage ; ni cadre ni personnage) : bande
   arc-en-ciel douce qui suit la souris, fines rayures de diffraction et quelques paillettes. Mélange « screen ». */
.cg-holo {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
    -webkit-mask: url('natif/cg-forme.png') center / 100% 100% no-repeat; mask: url('natif/cg-forme.png') center / 100% 100% no-repeat;
    background:
        radial-gradient(circle, #ffffff80 0 1px, transparent 1.6px) 0 0 / 27px 33px,
        repeating-linear-gradient(60deg, #ffffff08 0 2px, transparent 2px 8px),
        linear-gradient(115deg, transparent 18%, #ff5c8a40 30%, #ffd75c40 40%, #5cffb240 50%, #5cb4ff40 60%, #c05cff40 70%, transparent 82%) calc(50% + var(--px) * 40%) calc(50% + var(--py) * 40%) / 300% 300%;
    animation: cg-holo-brille 6s ease-in-out infinite alternate;
}
.niv-4 .cg-holo, .niv-5 .cg-holo { opacity: .55; }
@keyframes cg-holo-brille { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(50deg); } }

/* Niveau 5 : négatif. Ornement noir cerclé d'un fin liseré blanc, fenêtre sombre, tous les traits intérieurs en blanc. */
.niv-5 .cg-pentagone::after { filter: brightness(.06) contrast(1.3) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #ffffffb0) drop-shadow(0 18px 22px #000b); }
.niv-5 .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #2b2b30, #0d0d10 58%, #000); }
.niv-5 .cg-fond { opacity: .3; }
.niv-5 .cg-fond::before, .niv-5 .cg-fond::after { filter: grayscale(1) brightness(.7) contrast(1.2); }
.niv-5 .cg-rayons::before { background: repeating-conic-gradient(from 160deg at 50% 0%, #ffffff33 0deg 2.5deg, transparent 2.5deg 9deg); }
.niv-5 .cg-anneaux > i:nth-child(1)::before { border-color: transparent #ffffffe0 #ffffffe0 #ffffffe0; box-shadow: 0 0 10px #ffffff66; }
.niv-5 .cg-anneaux > i:nth-child(2)::before { border-color: #ffffffb8; }
.niv-5 .cg-anneaux > i:nth-child(3)::before { border-color: #ffffff66 transparent #ffffff66 transparent; }
.niv-5 .cg-halo::before { border-color: #fff; box-shadow: 0 0 14px #ffffff88, inset 0 0 18px #ffffff33, 0 0 0 6px #ffffff10; }
.niv-5 .cg-halo::after { border-color: #ffffffcc; }
.niv-5 .cg-spores::before {
    background-image: radial-gradient(circle, #fff 0 1.2px, transparent 2px), radial-gradient(circle, #fff 0 1px, transparent 1.8px), radial-gradient(circle, #fff 0 .8px, transparent 1.4px);
}
.niv-5 .cg-spores-pres::before { filter: drop-shadow(0 0 3px #fff); }
.niv-5 .cg-etincelles i { color: #fff; text-shadow: 0 0 8px #fff; }

/* ---- Légèreté : les animations internes des cartes (fond, rayons, anneaux, spores, hologramme…) sont suspendues au repos et ne tournent que sur la carte
   survolée ; la carte garde son aspect de niveau, seule l'animation attend. Une dizaine de cartes animées en continu coûtent cher en images par seconde. ---- */
.entree .carte-chocogrenouille *, .entree .carte-chocogrenouille *::before, .entree .carte-chocogrenouille *::after,
.posee .carte-chocogrenouille *, .posee .carte-chocogrenouille *::before, .posee .carte-chocogrenouille *::after { animation-play-state: paused; }
.entree.chaud .carte-chocogrenouille *, .entree.chaud .carte-chocogrenouille *::before, .entree.chaud .carte-chocogrenouille *::after,
.posee.chaud .carte-chocogrenouille *, .posee.chaud .carte-chocogrenouille *::before, .posee.chaud .carte-chocogrenouille *::after { animation-play-state: running; }

/* ---- Statistiques FIXES dans la partie : pas de décalage à la souris, pas de halo ni d'infobulle au survol, pas d'événements souris. ---- */
.entree .cg-stat, .posee .cg-stat { transform: none !important; pointer-events: none; }
.entree .cg-stat::before, .posee .cg-stat::before { display: none; }
.entree .cg-stat canvas, .posee .cg-stat canvas { filter: drop-shadow(0 8px 8px #000c) drop-shadow(0 0 10px color-mix(in srgb, var(--c) 30%, transparent)); }
.entree .cg-stat b, .posee .cg-stat b { transform: none !important; }
.entree .cg-stat-nom, .posee .cg-stat-nom { display: none; }

/* ---- L'écran de jeu porte la classe « ecran » comme l'album : le plan du personnage est calé sur la carte (inset: 0, règle de carte-base.css) et grossit donc
   exactement avec le cadre au survol, sans jamais dépasser en niveaux 1 et 2 (où il est de plus découpé à la forme de la carte). ---- */
.jeu.ecran { perspective: none; }

/* Pioche : la carte arrive dans la main en montant et en grossissant. */
.entree.neuve { animation: pioche .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes pioche { 0% { transform: translateY(60px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ======================================================================================================================================================
   Emplacements, combat
   ====================================================================================================================================================== */
/* Emplacement : une carte COMPLÈTE vide (ornement et fond), fond gris, à 20 % d'opacité : on comprend que c'est un emplacement ; aucun personnage. */
.vides { position: absolute; inset: 0; }
.slot { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.slot .carte-chocogrenouille { margin: 0 !important; animation: none; transition: none; opacity: .2 !important; transform: none; pointer-events: none; }
.carte-chocogrenouille.fond-vide .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #707070, #3e3e3e 55%, #1e1e1e); }
.carte-chocogrenouille.fond-vide .cg-fond::before, .carte-chocogrenouille.fond-vide .cg-fond::after { filter: grayscale(1) brightness(.6) contrast(1.05); }
.slot .cg-perso, .slot .cg-stat, .slot .cg-etincelles, .slot .cg-holo { display: none; }
.slot .carte-chocogrenouille *, .slot .carte-chocogrenouille *::before, .slot .carte-chocogrenouille *::after { animation-play-state: paused; }
/* Emplacement visé pendant qu'on glisse une carte de la main. */
.slot.cible .carte-chocogrenouille { opacity: .5 !important; filter: drop-shadow(0 0 10px #f3dd9a); }
.slot.proche .carte-chocogrenouille { opacity: .9 !important; filter: drop-shadow(0 0 16px #f3dd9a); }

/* Personnage prêt à attaquer (mon tour) ; en cours de glissement ; cible possible puis cible visée. */
.posee.pret { cursor: grab; }
.posee.glisse { z-index: 30; cursor: grabbing; }
.posee .carte-chocogrenouille { will-change: auto; }
/* Pas d'ombre floue sur un texte qui s'anime en opacité (les chiffres de dégâts, le bandeau) : dans la vue transparente, cela fait apparaître un encadré noir derrière. */
.posee .halo, .posee .eclair { position: absolute; pointer-events: none; opacity: 0; }
.posee .halo { inset: -16%; z-index: -1; background: radial-gradient(closest-side, var(--halo, #f3dd9a) 52%, transparent 100%); transition: opacity .15s; }
.posee.pret .halo { opacity: .55; }
.posee.glisse .halo { opacity: .8; }
.posee.cible-attaque .halo { --halo: #ff6b4a; opacity: .7; }
.posee.cible-attaque.proche .halo { --halo: #ff4a2a; opacity: .95; }
.posee .eclair { inset: 0; z-index: 6; background: #ff5a3c; clip-path: polygon(50% 0, 100% 44%, 85% 100%, 15% 100%, 0 44%); }
.posee.impact .eclair { animation: eclair .38s ease-out; }
@keyframes eclair { 0% { opacity: .75; } 100% { opacity: 0; } }

/* Dégâts : le nombre de points de défense perdus monte et s'efface. */
.degats { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 0); font: 700 clamp(26px, 2.4vw, 40px) CharmColumna, serif; color: #ff6b4a; -webkit-text-stroke: 3px #000; paint-order: stroke fill; pointer-events: none; animation: monte .95s ease-out both; z-index: 40; }
@keyframes monte { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -64px) scale(1); } }

/* Destruction : la carte rétrécit jusqu'à disparaître (la fumée est un effet natif du jeu, lancé par le client). */
.posee.meurt .carte-chocogrenouille { animation: meurt .8s ease-in both !important; }
.posee.meurt .nom { opacity: 0; transition: opacity .3s; }
@keyframes meurt { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.04) rotate(-3deg); } 100% { transform: scale(0) rotate(8deg); } }

/* Fin de partie. */
.bandeau { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 700 clamp(44px, 6vw, 100px) CharmColumna, serif; letter-spacing: .22em; text-transform: uppercase; pointer-events: none; -webkit-text-stroke: 6px #000; paint-order: stroke fill; animation: bandeau .8s cubic-bezier(.2, .9, .3, 1.2) both; }
.bandeau[hidden] { display: none; }
.bandeau.gagne { color: #f6e3a6; }
.bandeau.perdu { color: #ff8a70; }
@keyframes bandeau { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---- Cartes de l'adversaire : retournées (posées dans le sens de son personnage) ; son nom reste lisible, au-dessus de la carte. ---- */
.posee.adverse > .carte-chocogrenouille, .slot.adverse .carte-chocogrenouille { rotate: 180deg; }

/* ---- Attaque directe : zone au-dessus des emplacements adverses ; confirmation d'abandon ---- */
.zone-directe { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: 3px dashed #ff6b4acc; border-radius: 10px; background: #ff6b4a22; color: #ffb09e; font: 700 clamp(18px, 1.8vw, 30px) CharmColumna, serif; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 6px #000, 0 2px 0 #000; pointer-events: none; }
.zone-directe[hidden] { display: none; }
.zone-directe.proche { background: #ff6b4a55; border-style: solid; border-color: #ff4a2a; }
.confirme { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 22px 30px; text-align: center; background: #0a111ef2; border: 1px solid #b89a63; border-radius: 6px; box-shadow: 0 12px 50px #000c; pointer-events: auto; z-index: 60; }
.confirme[hidden] { display: none; }
.confirme p { margin: 0 0 6px; font-size: 20px; letter-spacing: .05em; }
.confirme .detail { font-size: 14px; color: #cdbf9b; margin-bottom: 16px; }
.confirme .choix { display: flex; gap: 12px; justify-content: center; }
button.danger { border-color: #e5483c; color: #ff9a8a; }

/* ======================================================================================================================================================
   Crânes (sacrifices), sortilèges (extension de carte), statuts
   ====================================================================================================================================================== */
/* Sous la carte : l'extension (sortilège passif) puis le nom. Pour les cartes de l'adversaire, retournées, c'est au-dessus de la carte et à l'endroit. */
.sous { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.entree .sous { width: calc(320px * var(--z)); }
.posee .sous { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 100%; margin-top: 1px; }
.posee.adverse .sous { top: auto; bottom: 100%; flex-direction: column-reverse; margin: 0 0 1px; }
.extension { box-sizing: border-box; width: 100%; padding: 4px 8px 5px; text-align: center; background: linear-gradient(180deg, #1a2540f2, #0d1426f2); border: 1px solid #b89a63; border-top: 2px solid #e2c98f; border-radius: 0 0 8px 8px; box-shadow: 0 3px 8px #000a; }
.posee.adverse .extension { border-radius: 8px 8px 0 0; border-top: 1px solid #b89a63; border-bottom: 2px solid #e2c98f; }
.extension .tete { display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.extension b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #f3dd9a; }
.extension span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #9fb4d9; }
.extension p { margin: 2px 0 0; font-size: 10.5px; line-height: 1.25; color: #e8dcc0; text-transform: none; letter-spacing: 0; white-space: normal; }

/* Crânes : un par sacrifice exigé, sous les statistiques (bord droit de la carte). */
.cg-crane { position: absolute; left: 268px; top: 252px; z-index: 12; display: flex; gap: 2px; pointer-events: none; filter: drop-shadow(0 2px 3px #000c); }
.cg-crane svg { width: 26px; height: 26px; fill: #efe7d2; }
.posee.adverse .cg-stat, .posee.adverse .cg-crane { rotate: 180deg; }   /* cartes retournées : statistiques et crânes restent lisibles */

/* Statuts : pastilles sur la carte. */
.statuts { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); display: flex; gap: 3px; z-index: 20; pointer-events: none; }
.statut { padding: 1px 7px; border-radius: 9px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; border: 1px solid #000a; box-shadow: 0 1px 4px #000a; white-space: nowrap; }
.statut.st-feu { background: linear-gradient(180deg, #ff9a3c, #d4521a); }
.statut.st-desarme { background: linear-gradient(180deg, #8fb3d9, #4a6f9c); }
.statut.st-ridicule { background: linear-gradient(180deg, #d9a8ff, #8a4fc4); }
.degats.feu { color: #ff9a3c; }
.degats.sort { top: 8%; font-size: clamp(16px, 1.5vw, 24px); color: #e8c7ff; letter-spacing: .08em; text-transform: uppercase; }

/* Carte de la main que je ne peux pas poser (pas assez de personnages à sacrifier, ou plus de place). */
.entree.impossible { filter: saturate(.35) brightness(.7); cursor: not-allowed; }
.entree.impossible .cg-crane svg { fill: #ff8a70; }

/* Choix des sacrifices : mes personnages se cliquent ; bandeau d'instruction. */
.posee.sacrifiable { cursor: pointer; }
.posee.sacrifiable .carte-chocogrenouille { filter: drop-shadow(0 0 10px #ff6b4acc); }
.posee.sacrifie .carte-chocogrenouille { filter: drop-shadow(0 0 16px #ff3a1a) brightness(.7) saturate(1.4); }
.posee.sacrifie::after { content: '☠'; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: clamp(40px, 5vw, 80px); color: #fff3e0; text-shadow: 0 0 10px #000, 0 0 24px #ff3a1a; pointer-events: none; z-index: 25; }
.sacrifice { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 22px; text-align: center; background: #0a111ef0; border: 1px solid #ff6b4a; border-radius: 6px; box-shadow: 0 8px 30px #000b; pointer-events: auto; z-index: 55; }
.sacrifice[hidden] { display: none; }
.sacrifice p { margin: 0; font-size: 16px; letter-spacing: .04em; }
.sacrifice .cranes { display: flex; gap: 6px; }
.sacrifice .cranes svg { width: 30px; height: 30px; fill: #5a4f45; }
.sacrifice .cranes svg.plein { fill: #ff6b4a; filter: drop-shadow(0 0 6px #ff3a1a); }

/* ======================================================================================================================================================
   Icônes de statut, pastilles, extension compacte, zoom
   ====================================================================================================================================================== */
.ico { display: inline-flex; width: 1.25em; height: 1.25em; vertical-align: -.28em; margin: 0 .12em; }
.ico svg { width: 100%; height: 100%; overflow: visible; }
.ico-feu .f1 { fill: #ff7a1a; } .ico-feu .f2 { fill: #ffd34a; }
.ico-desarme .d1 { fill: none; stroke: #ff6b6b; stroke-width: 2; } .ico-desarme .d2 { fill: none; stroke: #cfe0ff; stroke-width: 2.4; stroke-linecap: round; } .ico-desarme .d3 { fill: #ffe9a0; }
.ico-ridicule .r1 { fill: #b46ae6; } .ico-ridicule .r2 { fill: #ffd9b0; } .ico-ridicule .r3 { fill: #2b1b3a; } .ico-ridicule .r4 { fill: none; stroke: #2b1b3a; stroke-width: 1.4; stroke-linecap: round; } .ico-ridicule .r5 { fill: #ff5a6a; }
/* Pastille de statut : l'icône et le nombre de tours restants. */
.statut { display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px 1px 3px; border-radius: 11px; }
.statut .ico { width: 1.5em; height: 1.5em; margin: 0; vertical-align: 0; }
.statut b { font-size: 12px; font-weight: 700; }
/* Extension compacte : nom du sortilège et une phrase courte avec l'icône du statut. */
.extension .phrase { margin: 2px 0 0; font-size: 10.5px; line-height: 1.3; color: #efe5cb; text-transform: none; letter-spacing: 0; white-space: normal; }
.extension { padding: 3px 7px 4px; }
.entree .nom, .posee .nom { font-size: 11px; }
.entree .sous { width: calc(320px * var(--z) * 1.12); }
.entree { padding: 0 calc(320px * var(--z) * .06); }

/* Zoom : la carte au centre, le reste de la page assombri et flouté (le décor du jeu est assombri par le tableau de bord, qui reçoit le même signal). */
.zoom { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: auto; cursor: zoom-out; }
.zoom[hidden] { display: none; }
.zoom-carte { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 320px; flex: none; }
.zoom-carte .carte-chocogrenouille { margin: 0 !important; animation: none; transition: none; opacity: 1 !important; transform: none !important; }
.zoom-carte .sous { width: 320px; }
.zoom-carte .nom { max-width: 320px; text-align: center; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; line-height: 1.15; text-shadow: 0 0 3px #000, 0 1px 5px #000; }

/* Animations 3D désactivées (réglage du menu Échap) : les animations en boucle s'arrêtent (celles d'entrée finissent aussitôt, dans leur état final). */
.sans-3d *, .sans-3d *::before, .sans-3d *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

/* ---- Cartes d'objets (grimoires d'apprentissage, charmes) : une icône au lieu du portrait ; cartes attachées ; sortilège bloqué ---- */
.carte-objet.objet-grimoire { --couleur-objet: #f3d48c; }
.carte-objet.objet-charme { --couleur-objet: #8fe3ff; }
.cg-perso.cg-objet { display: grid; place-items: center; }
.cg-perso.cg-objet .obj-icone { position: static; margin: 0; max-width: none; animation: none; -webkit-mask: none; mask: none; box-sizing: border-box; width: 52%; height: 52%; padding: 7%; border-radius: 50%; border: 3px solid var(--couleur-objet, #f3d48c); background: radial-gradient(circle at 50% 40%, #fbf3dc, #e0cf9f 78%); object-fit: contain; box-shadow: 0 0 14px color-mix(in srgb, var(--couleur-objet, #f3d48c) 55%, transparent), 0 6px 8px #000a; }
.extension.objet span { color: #8fe3ff; }
/* Sortilège d'un personnage : bloqué tant que son grimoire n'est pas attaché. */
.extension.verrou { border-color: #6b6b73; border-top-color: #8c8c95; }
.extension.verrou b { color: #a8a8b0; }
.extension.verrou .phrase { color: #9a9aa6; }
.extension.verrou span { color: #ff8a70; }
/* Cartes attachées à un personnage posé : pastilles sur le bord gauche de la carte. */
.attaches { position: absolute; left: -10px; top: 14%; z-index: 21; display: flex; flex-direction: column; gap: 5px; }
.attache { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0a111ef2; border: 1.5px solid #b89a63; box-shadow: 0 2px 5px #000a; cursor: help; }
.attache .obj-icone { width: 20px; height: 20px; border-radius: 50%; background: #efe3c2; object-fit: contain; }
.attache-charme { border-color: #6fc3dd; }
/* Personnage qui peut recevoir la carte d'objet glissée. */
.posee.cible-objet .halo { --halo: #8fe3ff; opacity: .7; }
.posee.cible-objet.proche .halo { --halo: #b8f0ff; opacity: .95; }