/* Règles propres au site (ajoutées à jeu.css par outils/copier-ui-joute.cjs). */
#cinema { display: none !important; }   /* pas de mode cinéma : il n'y a pas de monde derrière */
.apercu-deck { position: absolute; inset: 0; display: none; flex-wrap: wrap; gap: 18px 14px; align-content: flex-start; justify-content: flex-start; padding: 10px 14px; overflow-y: auto; pointer-events: auto; }
.groupe-titre { flex: 0 0 100%; display: flex; align-items: center; gap: 11px; margin: 10px 0 0; color: #d9c08e; font: 11px CharmColumna, serif; letter-spacing: .2em; text-transform: uppercase; }
.groupe-titre::before { content: ''; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, #d9c08e); }
.groupe-titre:first-child { margin-top: 0; }
/* Hologramme (niveaux 4 et 5) : sur TOUTE la carte (fenêtre, cadre et personnage, sous les statistiques et le nom), bien visible ; une bande arc-en-ciel suit la souris, un reflet balaie la carte en permanence. */
.niv-4 .cg-holo, .niv-5 .cg-holo { z-index: 10; opacity: .6; mix-blend-mode: overlay; -webkit-mask: url('natif/cg-forme.png') center / 100% 100% no-repeat, url('natif/UI_T_AppearanceBorder_Special.png') center / 100% 100% no-repeat; -webkit-mask-composite: source-over; mask: url('natif/cg-forme.png') center / 100% 100% no-repeat, url('natif/UI_T_AppearanceBorder_Special.png') center / 100% 100% no-repeat; mask-composite: add;
    background: radial-gradient(circle, #ffffffb0 0 1.2px, transparent 1.9px) 0 0 / 27px 33px, repeating-linear-gradient(60deg, #ffffff14 0 2px, transparent 2px 8px),
        linear-gradient(115deg, transparent 10%, #ff5c8aee 25%, #ffd75cee 37%, #5cffb2ee 50%, #5cb4ffee 63%, #c05cffee 75%, transparent 90%) calc(50% + var(--px) * 40%) calc(50% + var(--py) * 40%) / 300% 300%; }
.niv-4 .cg-holo::after, .niv-5 .cg-holo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, #ffffff40 44%, #ffffff90 50%, #ffffff40 56%, transparent 68%) 160% 0 / 260% 100% no-repeat; animation: cg-holo-balaie 3.4s ease-in-out infinite; }
@keyframes cg-holo-balaie { from { background-position: 160% 0; } 60%, to { background-position: -70% 0; } }
/* Les animations propres au niveau de chaque carte (fond, rayons, anneaux, éclat, hologramme…) tournent en permanence, pas seulement au survol. */
.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: running; }
.apercu #jeu { z-index: 60; }
.attaches { left: -64px; top: 0; gap: 0; }
.attache { width: 100px; height: 100px; border: 0; border-radius: 0; background: none; box-shadow: none; animation: objet-vole 4s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px #ffffffaa) drop-shadow(0 6px 6px #000b); }
.attache-grimoire { filter: drop-shadow(0 6px 6px #000b); animation-duration: 5s; }
.attache .obj-icone { width: 92px; height: 92px; border-radius: 0; background: none; }
.infobulle { position: fixed; z-index: 120; width: 270px; padding: 12px 14px 13px; pointer-events: none; border: 1px solid #b89a6366; background: linear-gradient(160deg, #0f1b31f5, #070c16f5); box-shadow: 0 14px 40px #000c; color: #eadfc6; }
.infobulle[hidden] { display: none; }
.ib-nom { display: block; font: 17px CharmColumna, serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ib-rarete, #e6bb43); }
.ib-meta { display: block; margin-top: 3px; font: 11px CharmColumna, serif; letter-spacing: .14em; text-transform: uppercase; color: #a9a08c; }
.ib-stats { margin: 9px 0 0; font: 15px CharmHybrid, Georgia, serif; color: #cfc6b0; }
.ib-stats .vie { color: #ff7a86; } .ib-stats .puissance { color: #ffe14d; }
.ib-texte { margin: 8px 0 0; font: 15px/1.35 CharmHybrid, Georgia, serif; color: #cfc6b0; }
.infobulle .extension { width: auto; margin-top: 9px; }
.apercu .zoom { background: #05080fe6; }
.amelio { width: 320px; margin-top: 14px; padding: 14px 18px 16px; text-align: center; border: 1px solid #b89a6340; background: linear-gradient(160deg, #0f1b31ee, #070c16ee); }
.amelio p { margin: 0; }
.amelio-niveau { color: #d9c08e; font: 12px CharmColumna, serif; letter-spacing: .2em; text-transform: uppercase; }
.amelio-info { margin-top: 6px !important; color: #cfc6b0; font: 15px CharmHybrid, Georgia, serif; }
.amelio-cout { margin-top: 4px !important; color: #a9a08c; font: 14px CharmHybrid, Georgia, serif; }
.amelio-bouton { margin-top: 12px; padding: 12px 26px; border: 0; cursor: pointer; font: 14px CharmColumna, serif; letter-spacing: .1em; text-transform: uppercase; color: #111723; background: linear-gradient(140deg, #d3bb84, #886d3c); box-shadow: 0 8px 32px #b89a6328; }
.amelio-bouton:hover:not(:disabled) { filter: brightness(1.12); }
.amelio-bouton:disabled { opacity: .4; cursor: default; }
.cg-perso img.haut { width: 262px; margin-left: -131px; }
.apercu-deck .entree.non-possede { opacity: .45; }
.apercu-deck .entree { cursor: default; }

/* ===== Cartes « à illustration » : le personnage occupe la carte, son nom en grosses lettres natives sur le bord bas, la vie et la puissance sur les épaules du pentagone ===== */
/* Raretés : le cadre et le fond de la carte prennent la couleur de la rareté — commune grise, peu commune bleue, rare violette, épique jaune, légendaire rouge. */
.carte-chocogrenouille { --rarete: #aab1ba; --cadre: grayscale(1) brightness(.92); }
.rarete-commune { --rarete: #aab1ba; --cadre: grayscale(1) brightness(.92); --nom-degrade: linear-gradient(180deg, #ffffff 0%, #d5dae0 45%, #7f8791 100%); }
.rarete-peu_commune { --rarete: #3f93ff; --cadre: grayscale(1) sepia(1) hue-rotate(172deg) saturate(3.2) brightness(1.05); --nom-degrade: linear-gradient(180deg, #e9f4ff 0%, #7cbaff 45%, #2468c8 100%); }
.rarete-rare { --rarete: #aa5cf2; --cadre: grayscale(1) sepia(1) hue-rotate(238deg) saturate(3) brightness(1.05); --nom-degrade: linear-gradient(180deg, #f7e9ff 0%, #c58cff 45%, #7a3fc0 100%); }
.rarete-epique { --rarete: #f7c92a; --cadre: saturate(1.5) brightness(1.15); --nom-degrade: linear-gradient(180deg, #fffbd0 0%, #ffe14d 45%, #c58f00 100%); }
.rarete-legendaire { --rarete: #ff3b3b; --cadre: grayscale(1) sepia(1) hue-rotate(-42deg) saturate(4.2) brightness(1); --nom-degrade: linear-gradient(180deg, #ffe3dc 0%, #ff7a64 42%, #d11a1a 100%); }
.carte-chocogrenouille .cg-pentagone::after { filter: var(--cadre) drop-shadow(0 18px 22px #000b) drop-shadow(0 0 9px var(--rarete)); }
.carte-chocogrenouille.fond-commune .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #5d6269, #34383d 55%, #181a1d); }
.carte-chocogrenouille.fond-commune .cg-fond::before, .carte-chocogrenouille.fond-commune .cg-fond::after { filter: grayscale(1) brightness(.72) contrast(1.1); }
.carte-chocogrenouille.fond-peu_commune .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #2d62b0, #163868 55%, #0a1a36); }
.carte-chocogrenouille.fond-peu_commune .cg-fond::before, .carte-chocogrenouille.fond-peu_commune .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(172deg) saturate(2.6) brightness(.72) contrast(1.1); }
.carte-chocogrenouille.fond-rare .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #5d3190, #301749 55%, #160a25); }
.carte-chocogrenouille.fond-rare .cg-fond::before, .carte-chocogrenouille.fond-rare .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(245deg) saturate(2.8) brightness(.68) contrast(1.1); }
.carte-chocogrenouille.fond-epique .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #8d6d12, #4e3a08 55%, #241a03); }
.carte-chocogrenouille.fond-epique .cg-fond::before, .carte-chocogrenouille.fond-epique .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(10deg) saturate(3.2) brightness(.78) contrast(1.1); }
.carte-chocogrenouille.fond-legendaire .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #a02222, #4d0f0f 55%, #230505); }
.carte-chocogrenouille.fond-legendaire .cg-fond::before, .carte-chocogrenouille.fond-legendaire .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(-42deg) saturate(3.6) brightness(.7) contrast(1.1); }
.carte-chocogrenouille .cg-pentagone { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rarete, #b89a63) 60%, transparent)); }
.cg-enseigne { position: absolute; left: -16px; right: -16px; bottom: -4px; z-index: 14; text-align: center; pointer-events: none; font: calc(56px * var(--ln, 1) * var(--ech, 1)) / 1 CharmColumna, Georgia, serif; text-transform: uppercase; letter-spacing: var(--espace, .01em); white-space: nowrap; }
.cg-enseigne::before { content: attr(data-nom); position: absolute; inset: 0; z-index: 0; color: #05080f; -webkit-text-stroke: calc(var(--trait, 13px) * var(--ln, 1)) #05080f; text-shadow: 0 calc(var(--trait, 13px) * .3) 0 #05080f, 0 0 var(--lueur, 22px) color-mix(in srgb, var(--rarete, #b89a63) 80%, transparent); }
.cg-enseigne span { position: relative; z-index: 1; background-image: var(--nom-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #0008); }
/* Plus la rareté monte, plus l'écriture est travaillée : commune sobre, peu commune cernée de bleu, rare espacée et lumineuse, épique ornée d'un filet et d'un éclat permanent, légendaire en braise avec double filet. */
.rarete-commune { --trait: 7px; --lueur: 0px; --espace: 0; }
.rarete-peu_commune { --trait: 10px; --lueur: 10px; --espace: .02em; --ech: .99; }
.rarete-rare { --trait: 13px; --lueur: 22px; --espace: .04em; --ech: .97; }
.rarete-epique { --trait: 15px; --lueur: 30px; --espace: .06em; --ech: .94; }
.rarete-legendaire { --trait: 17px; --lueur: 40px; --espace: .08em; --ech: .91; }
.rarete-rare .cg-enseigne span, .rarete-epique .cg-enseigne span, .rarete-legendaire .cg-enseigne span { filter: drop-shadow(0 2px 0 #0008) drop-shadow(0 0 2px color-mix(in srgb, var(--rarete) 85%, transparent)); }
.rarete-peu_commune .cg-enseigne::after, .rarete-rare .cg-enseigne::after, .rarete-epique .cg-enseigne::after, .rarete-legendaire .cg-enseigne::after { content: ""; position: absolute; left: 50%; bottom: -9px; translate: -50% 0; height: 3px; width: 34%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--rarete), transparent); opacity: .9; }
.rarete-peu_commune .cg-enseigne::after { display: none; }
.rarete-epique .cg-enseigne::after { width: 62%; height: 4px; background: linear-gradient(90deg, transparent, var(--rarete) 30%, #fff8d0 50%, var(--rarete) 70%, transparent); box-shadow: 0 0 10px var(--rarete); }
.rarete-legendaire .cg-enseigne::after { width: 78%; height: 6px; bottom: -12px; background: radial-gradient(circle at 50% 50%, #fff3d8 0 3px, transparent 4px), linear-gradient(90deg, transparent, var(--rarete) 22%, #ffb08a 50%, var(--rarete) 78%, transparent) center / 100% 2px no-repeat, linear-gradient(90deg, transparent 10%, var(--rarete) 50%, transparent 90%) center bottom / 100% 1px no-repeat; box-shadow: 0 0 14px var(--rarete); }
.rarete-epique .cg-enseigne { animation: cg-enseigne-lueur 3.2s ease-in-out infinite alternate; }
.rarete-legendaire .cg-enseigne { animation: cg-enseigne-braise 2.2s ease-in-out infinite alternate; }
@keyframes cg-enseigne-lueur { from { filter: drop-shadow(0 0 2px #f7c92a55); } to { filter: drop-shadow(0 0 9px #f7c92acc); } }
@keyframes cg-enseigne-braise { from { filter: drop-shadow(0 0 4px #ff3b3b66) brightness(1); } to { filter: drop-shadow(0 0 14px #ff5a2fee) brightness(1.18); } }
/* Épique et légendaire : l'éclat traverse le nom quel que soit le niveau. */
.rarete-epique .cg-enseigne span, .rarete-legendaire .cg-enseigne span { background-image: linear-gradient(105deg, transparent 36%, #fffffff0 50%, transparent 64%), var(--nom-degrade); background-size: 280% 100%, 100% 100%; background-repeat: no-repeat; background-position: 180% 0, 0 0; animation: cg-enseigne-brille 4.2s ease-in-out infinite; }
.rarete-legendaire .cg-enseigne span { animation-duration: 2.6s; }
/* Niveaux d'amélioration (cumulatifs) : 1 carte neutre et figée ; 2 le fond bouge ; 3 le personnage sort du cadre ; 4 effet holographique ; 5 encadré noir et fond violet.
   La couleur de rareté (cadre, fond) vaut pour les niveaux 1 à 4 ; le niveau 5 la remplace par l'encadré noir cerclé de blanc et le fond violet. */
.carte-chocogrenouille.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); }
.carte-chocogrenouille.niv-5.niv-5 .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #6a2fb0, #331467 55%, #120628); }
.carte-chocogrenouille.niv-5.niv-5 .cg-fond { opacity: .4; }
.carte-chocogrenouille.niv-5.niv-5 .cg-fond::before, .carte-chocogrenouille.niv-5.niv-5 .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(245deg) saturate(3) brightness(.85) contrast(1.15); }

/* Cartes d'objets (charmes et grimoires) : ni carte, ni cadre, ni fond. Seulement l'image qui flotte (icône blanche du sort pour un charme, grimoire du site pour un grimoire)
   et, dessous, « Charme » ou « Grimoire d'apprentissage » en petit puis le nom du charme ou le sortilège, en doré classique. */
.carte-chocogrenouille.carte-objet { --rarete: #e6bb43; --cadre: none; --nom-degrade: linear-gradient(180deg, #ffe9bd 0%, #e6bb43 45%, #8b6026 100%); --trait: 12px; --lueur: 16px; --espace: .02em; --ech: 1; }
.carte-objet .cg-pentagone { filter: none; }
.carte-objet .cg-pentagone::after, .carte-objet .cg-fenetre, .carte-objet .cg-reflet, .carte-objet .cg-holo, .carte-objet .cg-etincelles { display: none; }
.carte-objet .cg-perso { -webkit-mask: none; mask: none; }
.carte-objet .cg-enseigne::after { display: none; }
.carte-objet .cg-enseigne { animation: none; bottom: 10px; }
.carte-objet .cg-enseigne span { filter: drop-shadow(0 2px 0 #0008); }
.carte-objet .cg-enseigne.titre-grim { bottom: 62px; }
.carte-objet .cg-perso.cg-objet { transform: translateY(-9%); }
.carte-objet .cg-perso.cg-objet .obj-icone { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: objet-vole 4s ease-in-out infinite alternate; }
.carte-objet.objet-charme .cg-perso.cg-objet .obj-icone { width: 66%; height: 66%; filter: drop-shadow(0 0 12px #ffffffaa) drop-shadow(0 12px 10px #000b); }
.carte-objet.objet-grimoire .cg-perso.cg-objet .obj-grimoire { width: 78%; height: 78%; filter: drop-shadow(0 12px 10px #000b); animation-duration: 5s; }
@keyframes objet-vole { from { transform: translateY(8px) rotate(-5deg); } to { transform: translateY(-12px) rotate(5deg); } }
.apercu-deck .entree:has(.carte-objet) .nombre { left: 50%; margin-left: calc(320px * var(--z) * .2); top: calc(320px * var(--z) * .08); }
/* Niveaux 3 à 5 : un éclat traverse le nom, de plus en plus souvent. */
.niv-3 .cg-enseigne span, .niv-4 .cg-enseigne span, .niv-5 .cg-enseigne span { background-image: linear-gradient(105deg, transparent 36%, #fffffff0 50%, transparent 64%), var(--nom-degrade); background-size: 280% 100%, 100% 100%; background-repeat: no-repeat; background-position: 180% 0, 0 0; animation: cg-enseigne-brille 5.5s ease-in-out infinite; }
.niv-4 .cg-enseigne span { animation-duration: 4s; } .niv-5 .cg-enseigne span { animation-duration: 2.8s; }
@keyframes cg-enseigne-brille { 0%, 55% { background-position: 180% 0, 0 0; } 100% { background-position: -80% 0, 0 0; } }
.cg-stat { height: 96px; left: auto; }
.cg-stat-1 { top: 78px; left: -36px; }
.cg-stat-2 { top: 78px; left: 260px; }
.cg-stat canvas { width: 96px; height: 96px; }
.carte-chocogrenouille .cg-stat b { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -46%) !important; font-size: 36px; color: #fff; -webkit-text-stroke: 5px #05080f; paint-order: stroke fill; text-shadow: 0 3px 0 #05080f; z-index: 3; }
.cg-crane { left: -8px; top: 178px; flex-direction: column; gap: 0; }   /* sacrifices : une colonne de crânes sous le cœur, hors du cadre doré */
.cg-crane svg { width: 30px; height: 30px; filter: drop-shadow(0 0 5px #ff3b3b99); }
.cg-sort { position: absolute; right: -14px; top: 4px; z-index: 12; display: flex; align-items: center; gap: 5px; max-width: 150px; padding: 5px 14px 5px 12px; overflow: hidden; white-space: nowrap; font: 14px CharmColumna, serif; letter-spacing: .12em; text-transform: uppercase; color: #fff1cc; pointer-events: none;
    background: linear-gradient(100deg, #05080fe6 0%, #0e1a30e6 85%, #0e1a30aa 100%); border-left: 3px solid var(--rarete, #b89a63); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); text-shadow: 0 1px 3px #000; }
.cg-sort span { overflow: hidden; text-overflow: ellipsis; }
.cg-sort .ico { width: 17px; height: 17px; margin: 0; flex: none; }
.sort-texte { position: fixed; z-index: 120; max-width: 250px; pointer-events: none; color: #f6ead0; font: 16px/1.3 CharmHybrid, Georgia, serif; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 2px 10px #000; }
.sort-texte[hidden] { display: none; }
.sort-texte.a-gauche { text-align: right; }
.st-nom { display: block; margin-bottom: 3px; color: #ffd98a; font: 13px CharmColumna, serif; letter-spacing: .16em; text-transform: uppercase; }
.sort-texte.verrou .st-nom { color: #ff9a85; }
.sort-texte .phrase { margin: 0; }
/* Carte agrandie : le personnage reste DANS le cadre à tous les niveaux et ne grossit pas de son côté ; il suit exactement le zoom du cadre (ni parallaxe, ni respiration, ni grossissement propre). */
.zoom-carte .cg-perso { -webkit-mask: url('natif/cg-forme.png') center / 100% 100% no-repeat; mask: url('natif/cg-forme.png') center / 100% 100% no-repeat; z-index: 3; --grandit: 0; transform: none !important; transition: none !important; }
.zoom-carte .cg-perso img { animation: none !important; }
/* Carte agrandie : pleine qualité et vivante (elle flotte et s'incline avec la souris, animations en cours), avec une entrée en douceur. */
.zoom-carte { animation: zoom-entre .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes zoom-entre { from { opacity: 0; scale: .78; } }
.zoom-carte .carte-chocogrenouille { transform: perspective(900px) rotateX(calc(var(--py) * -16deg)) rotateY(calc(var(--px) * 20deg)) scale(calc(1 + var(--actif) * .03)) !important; animation: carte-flotte 6s ease-in-out infinite alternate !important; transition: transform .12s linear !important; will-change: transform; }
.entree .sous, .posee .sous, .entree .nom, .entree .stats, .posee .nom { display: none; }
.entree { margin-bottom: 16px; }
.apercu-deck .entree .nombre { position: absolute; top: 2px; left: 2px; padding: 1px 8px; border-radius: 10px; background: #05080fe6; border: 1px solid #e2c98f99; color: #e2c98f; font-size: 14px; z-index: 5; }