/* ============================================
	   CINEMATICS.CSS — Scènes, Neko Art, Boss
	   ============================================ */

	/* --- KEN BURNS DYNAMIQUE (une classe par scène) --- */
	.ken-burns { transform-origin: center 70%; }
	.kb-voyage { animation: kb-voyage 15s linear forwards; }
	@keyframes kb-voyage { 0% { transform: scale(1) translateX(-2%); } 100% { transform: scale(1.1) translateX(2%); } }
	.kb-decouverte { animation: kb-decouverte 15s linear forwards; }
	@keyframes kb-decouverte { 0% { transform: scale(1); } 100% { transform: scale(1.15) translateY(-3%); } }
	.kb-sacre { animation: kb-sacre 15s linear forwards; }
	@keyframes kb-sacre { 0% { transform: scale(1.1); } 100% { transform: scale(1); } }
	.kb-neko { animation: kb-neko 10s linear forwards; }
	@keyframes kb-neko { 0% { transform: scale(0.95); } 100% { transform: scale(1.05); } }
	.kb-rupture { animation: kb-rupture 8s linear forwards; }
	@keyframes kb-rupture { 0% { transform: scale(1); } 100% { transform: scale(1.25) translateY(-2%); } }

	/* --- LAYERS & TRANSITIONS PAR SCÈNE --- */
	#cinematic-anchor { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; min-height: min(450px, 50dvh); margin-top: 40px; margin-bottom: 10px; }
	.cinematic-layer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; opacity: 0; pointer-events: none; z-index: 5; }
	.show-layer { display: flex !important; opacity: 1 !important; }

	/* Entrées spécifiques par scène — TOUTES avec forwards pour garder l'état final */
	#layer-boat.show-layer { animation: enter-slide-right 1.2s ease-out forwards; }
	@keyframes enter-slide-right { 0% { opacity: 0; transform: translate(-60%, -50%); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
	#layer-koi.show-layer { animation: enter-scale-up 1s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards; }
	@keyframes enter-scale-up { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); filter: blur(10px); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
	#layer-castle.show-layer { animation: enter-rise 1.5s ease-out forwards; }
	@keyframes enter-rise { 0% { opacity: 0; transform: translate(-50%, -20%) scale(0.8); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
	#layer-torii.show-layer { animation: enter-fade-blur 1.2s ease-out forwards; }
	@keyframes enter-fade-blur { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); filter: blur(8px); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
	#layer-noface.show-layer { animation: enter-fade-slow 2s ease-out forwards; }
	@keyframes enter-fade-slow { 0% { opacity: 0; } 100% { opacity: 1; } }
	#layer-daruma.show-layer { animation: enter-darkness 2s ease-out forwards; }
	@keyframes enter-darkness { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); filter: blur(15px) brightness(2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1); } }

	/* --- BATEAU --- */
	.boat-scene { position: relative; width: 250px; height: 150px; display: flex; justify-content: center; align-items: center; }
	.boat-svg { animation: rock-boat 4s ease-in-out infinite alternate; filter: drop-shadow(0 15px 10px rgba(0,0,0,0.8)); position: relative; }
	/* Reflet du bateau dans l'eau */
	.boat-scene::after {
	    content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%) scaleY(-0.3) scaleX(0.9);
	    width: 250px; height: 125px;
	    background: radial-gradient(ellipse at center, rgba(8,11,20,0.4) 0%, transparent 70%);
	    filter: blur(4px); opacity: 0.4;
	    animation: rock-boat 4s ease-in-out infinite alternate;
	}
	@keyframes rock-boat { 0% { transform: translateY(5px) rotate(-2deg); } 100% { transform: translateY(-5px) rotate(2deg); } }
	.water-waves { position: absolute; bottom: 0; width: 150%; height: 20px; display: flex; overflow: hidden; opacity: 0.5; }
	.wave { width: 100%; height: 10px; background: rgba(12, 18, 34, 0.8); border-radius: 50%; animation: wave-move 3s linear infinite; }
	.wave-offset { animation-direction: reverse; animation-duration: 4s; margin-top: 5px; }
	@keyframes wave-move { 0% { transform: translateX(-20px); } 100% { transform: translateX(20px); } }

	/* --- LANTERNES FLOTTANTES (tōrō nagashi) --- */
	.toro-lantern {
	    position: absolute; width: 16px; height: 22px; z-index: 2;
	    background: radial-gradient(ellipse at center, #ffd700 0%, #f39c12 40%, rgba(255,165,0,0.3) 80%, transparent 100%);
	    border-radius: 3px 3px 0 0;
	    box-shadow: 0 0 10px rgba(255,215,0,0.7), 0 0 25px rgba(255,165,0,0.4);
	    animation: lantern-drift 8s ease-in-out infinite alternate, lantern-glow 3s ease-in-out infinite alternate;
	}
	.toro-lantern::after {
	    content: ''; position: absolute; bottom: -3px; left: 1px; right: 1px; height: 4px;
	    background: #3d2f2d; border-radius: 0 0 2px 2px;
	}
	@keyframes lantern-drift {
	    0% { transform: translateX(0) translateY(0) rotate(-2deg); }
	    100% { transform: translateX(15px) translateY(-3px) rotate(2deg); }
	}
	@keyframes lantern-glow {
	    0% { box-shadow: 0 0 6px rgba(255,215,0,0.5), 0 0 15px rgba(255,165,0,0.2); }
	    100% { box-shadow: 0 0 12px rgba(255,215,0,0.8), 0 0 30px rgba(255,165,0,0.4); }
	}

	/* --- KOI --- */
	.koi-scene { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; }
	.koi-spinner { animation: spin-slow 15s linear infinite; filter: drop-shadow(0 0 20px rgba(255,255,255,0.1)); }
	.water-ripple { position: absolute; width: 100px; height: 100px; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; animation: ripple-expand 4s linear infinite; }
	.ripple-2 { animation-delay: -1.3s; width: 60px; height: 60px; left: 30%; top: 20%; border-color: rgba(255,255,255,0.15); }
	.ripple-3 { animation-delay: -2.6s; width: 80px; height: 80px; left: -20%; top: 60%; border-color: rgba(255,255,255,0.1); }
	@keyframes ripple-expand { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

	/* --- HALO DORÉ KOI --- */
	.koi-halo {
	    position: absolute; width: 140px; height: 140px;
	    border-radius: 50%;
	    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, rgba(255,183,197,0.05) 50%, transparent 70%);
	    animation: koi-halo-pulse 4s ease-in-out infinite alternate;
	    z-index: -1; pointer-events: none;
	}
	@keyframes koi-halo-pulse { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0.9; } }

	/* --- CHÂTEAU --- */
	.castle-scene { position: relative; width: 240px; height: 300px; filter: drop-shadow(0 0 30px rgba(255, 183, 197, 0.3)); }
	.etage { opacity: 0; transform: translateY(30px); transform-origin: bottom center; }
	.castle-window { opacity: 0; }
	.show-layer .etage-1 { animation: popEtage 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards 0.2s; }
	.show-layer .etage-2 { animation: popEtage 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards 0.5s; }
	.show-layer .etage-3 { animation: popEtage 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards 0.8s; }
	.show-layer .etage-4 { animation: popEtage 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards 1.1s; }
	.show-layer .castle-window { animation: fadeInWindow 0.5s ease forwards 1.8s; }
	@keyframes popEtage { to { opacity: 1; transform: translateY(0); } }
	@keyframes fadeInWindow { to { opacity: 1; } }

	/* --- NUAGES UKIYO-E (château) --- */
	.ukiyo-cloud {
	    position: absolute; z-index: 2; pointer-events: none;
	    width: 120px; height: 25px;
	    background: radial-gradient(ellipse at center, rgba(180,160,200,0.12) 0%, rgba(140,120,170,0.06) 50%, transparent 80%);
	    border-radius: 50%;
	    filter: blur(3px);
	}
	.cloud-1 { top: 30%; left: -30%; animation: cloud-drift 18s linear infinite; }
	.cloud-2 { top: 50%; left: -50%; animation: cloud-drift 24s linear infinite; animation-delay: -8s; width: 90px; height: 18px; opacity: 0.7; }
	.cloud-3 { top: 15%; left: -40%; animation: cloud-drift 20s linear infinite; animation-delay: -14s; width: 70px; height: 15px; opacity: 0.5; }
	@keyframes cloud-drift { 0% { transform: translateX(0); } 100% { transform: translateX(380px); } }

	/* --- GRUES JAPONAISES (silhouettes qui s'envolent) --- */
	.crane {
	    position: absolute; z-index: 3; pointer-events: none;
	    opacity: 0; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
	}
	.crane-1 { top: 10%; right: 15%; animation: crane-fly 12s ease-in-out infinite; animation-delay: 1s; }
	.crane-2 { top: 20%; right: 25%; animation: crane-fly 15s ease-in-out infinite; animation-delay: 3s; }
	.crane-3 { top: 5%; right: 10%; animation: crane-fly 18s ease-in-out infinite; animation-delay: 6s; }
	@keyframes crane-fly {
	    0% { transform: translate(0, 0) scaleX(1); opacity: 0; }
	    10% { opacity: 0.7; }
	    50% { transform: translate(-120px, -60px) scaleX(0.9); opacity: 0.5; }
	    90% { opacity: 0.2; }
	    100% { transform: translate(-200px, -100px) scaleX(0.8); opacity: 0; }
	}

	/* --- TORII --- */
	.torii-scene-svg { position: relative; width: 220px; height: 220px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;}
	.moon-rising { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; background: #fff9c4; border-radius: 50%; box-shadow: 0 0 30px #fff9c4, 0 0 60px #fff9c4, 0 0 100px rgba(255,183,197,0.3); animation: moon-rise 10s ease-out forwards; z-index:-1; }
	.moon-rising::after {
	    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	    width: 130px; height: 130px; border-radius: 50%;
	    border: 1.5px solid rgba(255,183,197,0.15);
	    box-shadow: 0 0 20px rgba(255,183,197,0.1);
	    animation: moon-halo-pulse 4s ease-in-out infinite alternate;
	}
	@keyframes moon-halo-pulse { 0% { transform: translate(-50%,-50%) scale(0.95); opacity: 0.5; } 100% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; } }
	@keyframes moon-rise { 0% { top: 120px; opacity: 0; } 100% { top: 30px; opacity: 1; } }
	.torii-reflection { animation: water-shimmer 3s ease-in-out infinite alternate; transform-origin: center; }
	@keyframes water-shimmer { 0% { transform: scale(1, -0.3) translate(0, -500px) skewX(-5deg); } 100% { transform: scale(1, -0.35) translate(0, -480px) skewX(5deg); } }

	/* --- OFUDA (talismans papier sur le torii) --- */
	.ofuda {
	    position: absolute; width: 8px; height: 22px; z-index: 3;
	    background: linear-gradient(to bottom, #f4f4f0 0%, #f4f4f0 60%, #d32f2f 60%, #d32f2f 100%);
	    border-radius: 1px;
	    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	    transform-origin: top center;
	    animation: ofuda-sway 3s ease-in-out infinite alternate;
	}
	.ofuda::before {
	    content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
	    width: 4px; height: 3px; background: #3d2f2d; border-radius: 1px 1px 0 0;
	}
	@keyframes ofuda-sway { 0% { transform: rotate(-8deg); } 100% { transform: rotate(8deg); } }

	/* --- L'OMBRE MILLÉNAIRE — Silhouette de fumée organique + Éclipse --- */
	.shadow-smoke {
	    position: absolute; inset: -100px; z-index: 1;
	    pointer-events: none;
	    filter: url(#goo-filter);
	}
	.smoke-particle {
	    position: absolute;
	    background: radial-gradient(circle at 40% 40%, rgba(10,0,8,0.9), rgba(10,0,8,0.4), transparent);
	    opacity: 0;
	    border-radius: 50%;
	}
	.noface-container.awake .smoke-particle { opacity: 1; }

	/* FOND — géante invisible qui fond dans l'atmosphère WebGL */
	.sp-bg { width: 500px; height: 500px; top: 30px; left: -30px; filter: blur(65px); border-radius: 50%;
	.is-mobile .sp-bg { filter: blur(28px) !important; width: 380px !important; height: 380px !important; }
	    background: radial-gradient(circle, rgba(10,0,8,0.5), rgba(10,0,8,0.15), transparent);
	    animation: sh-bg 12s ease-in-out infinite alternate; }

	/* TÊTE — masse dense, blur serré, quasi opaque + reflet bordeaux */
	.sp-head-1 { width: 260px; height: 230px; top: 30px; left: 90px; filter: blur(18px);
	    border-radius: 55% 45% 50% 50%;
	    box-shadow: inset 0 0 50px rgba(40, 2, 8, 0.35);
	    animation: sh-1 9s ease-in-out infinite alternate; }
	.sp-head-2 { width: 200px; height: 190px; top: 45px; left: 120px; filter: blur(22px);
	    border-radius: 50% 50% 45% 55%;
	    box-shadow: inset 0 0 40px rgba(40, 2, 8, 0.3);
	    animation: sh-2 10s ease-in-out infinite alternate; animation-delay: -3s; }
	.sp-head-3 { width: 300px; height: 210px; top: 15px; left: 70px; filter: blur(40px);
	    border-radius: 48% 52% 55% 45%;
	    background: radial-gradient(circle at 45% 35%, rgba(10,0,8,0.7), rgba(10,0,8,0.25), transparent);
	    animation: sh-3 11s ease-in-out infinite alternate; animation-delay: -5s; }

	/* ÉPAULES — ovales allongés, irréguliers + reflet bordeaux */
	.sp-shoulder-l { width: 170px; height: 240px; top: 150px; left: 15px; filter: blur(30px);
	    border-radius: 60% 40% 55% 45%;
	    box-shadow: inset 0 0 35px rgba(35, 2, 6, 0.25);
	    animation: sh-sl 8s ease-in-out infinite alternate; animation-delay: -1s; }
	.sp-shoulder-r { width: 160px; height: 230px; top: 160px; right: 15px; left: auto; filter: blur(30px);
	    border-radius: 40% 60% 45% 55%;
	    box-shadow: inset 0 0 35px rgba(35, 2, 6, 0.25);
	    animation: sh-sr 8.5s ease-in-out infinite alternate; animation-delay: -4s; }

	/* TRONC — s'effile, plus transparent */
	.sp-body-1 { width: 130px; height: 190px; top: 290px; left: 140px; filter: blur(28px);
	    border-radius: 45% 55% 50% 50%;
	    animation: sh-b1 7s ease-in-out infinite alternate; animation-delay: -2s; }
	.sp-body-2 { width: 110px; height: 170px; top: 310px; left: 165px; filter: blur(24px);
	    border-radius: 50% 50% 40% 60%;
	    animation: sh-b2 6.5s ease-in-out infinite alternate; animation-delay: -5s; }

	/* PIEDS — wisps qui se dissolvent vite */
	.sp-fade-1 { width: 100px; height: 70px; top: 430px; left: 150px; filter: blur(35px);
	    border-radius: 60% 40% 50% 50%;
	    animation: sh-f1 6s ease-in-out infinite alternate; animation-delay: -2s; }
	.sp-fade-2 { width: 80px; height: 55px; top: 450px; left: 200px; filter: blur(40px);
	    border-radius: 50% 50% 60% 40%;
	    animation: sh-f2 7s ease-in-out infinite alternate; animation-delay: -4s; }
	.sp-fade-3 { width: 65px; height: 45px; top: 470px; left: 170px; filter: blur(40px);
	    border-radius: 55% 45% 45% 55%;
	    animation: sh-f3 6.5s ease-in-out infinite alternate; animation-delay: -3s; }

	/* SANG — particules rouge sombre qui coulent de l'éclipse */
	.sp-blood-1 { width: 80px; height: 100px; top: 180px; left: 160px; filter: blur(25px);
	    border-radius: 50% 50% 40% 60%;
	    background: radial-gradient(circle at 50% 30%, rgba(60,5,15,0.5), rgba(30,2,8,0.2), transparent);
	    animation: sh-bl1 7s ease-in-out infinite alternate; animation-delay: -1s; }
	.sp-blood-2 { width: 60px; height: 90px; top: 200px; left: 200px; filter: blur(20px);
	    border-radius: 45% 55% 55% 45%;
	    background: radial-gradient(circle at 50% 30%, rgba(70,8,18,0.4), rgba(35,3,10,0.15), transparent);
	    animation: sh-bl2 6s ease-in-out infinite alternate; animation-delay: -3s; }
	.sp-blood-3 { width: 50px; height: 70px; top: 220px; left: 180px; filter: blur(22px);
	    border-radius: 50%;
	    background: radial-gradient(circle at 50% 30%, rgba(55,5,12,0.35), rgba(25,2,6,0.1), transparent);
	    animation: sh-bl3 8s ease-in-out infinite alternate; animation-delay: -5s; }

	/* ANIMATIONS — border-radius morphing + mouvement organique */
	@keyframes sh-bg { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.04); opacity: 0.55; } }
	@keyframes sh-1 { 0% { transform: translate(0,0) scale(1); opacity: 0.82; border-radius: 55% 45% 50% 50%; } 100% { transform: translate(8px,-6px) scale(1.04); opacity: 0.88; border-radius: 48% 52% 58% 42%; } }
	@keyframes sh-2 { 0% { transform: translate(0,0) scale(1); opacity: 0.78; border-radius: 50% 50% 45% 55%; } 100% { transform: translate(-6px,4px) scale(1.03); opacity: 0.72; border-radius: 56% 44% 52% 48%; } }
	@keyframes sh-3 { 0% { transform: translate(0,0) scale(1); opacity: 0.55; border-radius: 48% 52% 55% 45%; } 100% { transform: translate(10px,5px) scale(1.04); opacity: 0.7; border-radius: 52% 48% 42% 58%; } }
	@keyframes sh-sl { 0% { transform: translate(0,0) scale(1); opacity: 0.6; border-radius: 60% 40% 55% 45%; } 100% { transform: translate(-12px,8px) scale(1.06); opacity: 0.72; border-radius: 45% 55% 48% 52%; } }
	@keyframes sh-sr { 0% { transform: translate(0,0) scale(1); opacity: 0.55; border-radius: 40% 60% 45% 55%; } 100% { transform: translate(12px,6px) scale(1.05); opacity: 0.68; border-radius: 55% 45% 52% 48%; } }
	@keyframes sh-b1 { 0% { transform: translate(0,0) scale(1); opacity: 0.45; border-radius: 45% 55% 50% 50%; } 100% { transform: translate(-4px,10px) scale(1.04); opacity: 0.55; border-radius: 52% 48% 58% 42%; } }
	@keyframes sh-b2 { 0% { transform: translate(0,0) scale(1); opacity: 0.4; border-radius: 50% 50% 40% 60%; } 100% { transform: translate(6px,8px) scale(1.05); opacity: 0.5; border-radius: 42% 58% 55% 45%; } }
	@keyframes sh-f1 { 0% { transform: translate(0,0) scale(1); opacity: 0.2; border-radius: 60% 40% 50% 50%; } 100% { transform: translate(-8px,18px) scale(1.12); opacity: 0.08; border-radius: 45% 55% 55% 45%; } }
	@keyframes sh-f2 { 0% { transform: translate(0,0) scale(1); opacity: 0.15; border-radius: 50% 50% 60% 40%; } 100% { transform: translate(10px,15px) scale(1.1); opacity: 0.05; border-radius: 55% 45% 40% 60%; } }
	@keyframes sh-f3 { 0% { transform: translate(0,0) scale(1); opacity: 0.12; border-radius: 55% 45% 45% 55%; } 100% { transform: translate(-4px,20px) scale(1.15); opacity: 0.03; border-radius: 40% 60% 55% 45%; } }
	@keyframes sh-bl1 { 0% { transform: translate(0,0) scale(1); opacity: 0.5; border-radius: 50% 50% 40% 60%; } 100% { transform: translate(-5px,15px) scale(1.06); opacity: 0.7; border-radius: 55% 45% 55% 45%; } }
	@keyframes sh-bl2 { 0% { transform: translate(0,0) scale(1); opacity: 0.4; border-radius: 45% 55% 55% 45%; } 100% { transform: translate(8px,12px) scale(1.08); opacity: 0.55; border-radius: 50% 50% 42% 58%; } }
	@keyframes sh-bl3 { 0% { transform: translate(0,0) scale(1); opacity: 0.3; border-radius: 50%; } 100% { transform: translate(-3px,18px) scale(1.1); opacity: 0.45; border-radius: 55% 45% 48% 52%; } }

	/* --- L'ÉCLIPSE — plus grosse, plus intense --- */
	.eclipse-core {
	    position: absolute; z-index: 2;
	    left: 50%; top: 26%;
	    transform: translate(-50%, -50%);
	    width: 160px; height: 160px;
	}

	/* Anneau de lumière mourante — épais et brûlant */
	.eclipse-ring {
	    position: absolute; inset: 0;
	    border-radius: 50%;
	    border: 4px solid rgba(180, 30, 50, 0.6);
	    box-shadow: 0 0 25px rgba(180,30,50,0.5), 0 0 60px rgba(120,10,25,0.3), 0 0 120px rgba(80,5,15,0.18), inset 0 0 30px rgba(0,0,0,0.8), inset 0 0 8px rgba(180,30,50,0.3);
	    animation: ring-pulse 3s ease-in-out infinite alternate;
	}
	@keyframes ring-pulse {
	    0% { border-color: rgba(180,30,50,0.4); box-shadow: 0 0 20px rgba(180,30,50,0.35), 0 0 50px rgba(120,10,25,0.2), 0 0 100px rgba(80,5,15,0.12), inset 0 0 25px rgba(0,0,0,0.85), inset 0 0 6px rgba(180,30,50,0.2); transform: scale(0.96); }
	    100% { border-color: rgba(210,45,65,0.8); box-shadow: 0 0 35px rgba(210,45,65,0.6), 0 0 80px rgba(150,15,35,0.4), 0 0 140px rgba(100,8,20,0.22), inset 0 0 35px rgba(0,0,0,0.75), inset 0 0 10px rgba(210,45,65,0.35); transform: scale(1.04); }
	}

	/* Disque noir absolu */
	.eclipse-void {
	    position: absolute; inset: 10px;
	    border-radius: 50%;
	    background: radial-gradient(circle, #000000 0%, #030002 60%, #0a0008 100%);
	}

	/* Halo rouge qui pulse — vertical pour suivre la silhouette */
	.eclipse-pulse {
	    position: absolute; left: -25px; top: -30px; right: -25px; bottom: -40px;
	    border-radius: 45% 45% 50% 50%;
	    background: radial-gradient(ellipse at 50% 45%, rgba(180,20,40,0.3) 0%, rgba(140,12,28,0.18) 25%, rgba(100,5,15,0.08) 50%, transparent 75%);
	    animation: eclipse-breathe 4s ease-in-out infinite alternate;
	    pointer-events: none;
	}
	@keyframes eclipse-breathe {
	    0% { transform: scale(0.88); opacity: 0.5; }
	    100% { transform: scale(1.18); opacity: 0.95; }
	}

	/* Deuxième halo — plus large, plus doux, lumière qui meurt dans le vide */
	.eclipse-pulse-deep {
	    position: absolute; left: -60px; top: -70px; right: -60px; bottom: -90px;
	    border-radius: 45% 45% 50% 50%;
	    background: radial-gradient(ellipse at 50% 42%, rgba(120,10,25,0.12) 0%, rgba(60,3,10,0.05) 45%, transparent 75%);
	    animation: eclipse-breathe-deep 5s ease-in-out infinite alternate;
	    pointer-events: none;
	    z-index: -1;
	}
	@keyframes eclipse-breathe-deep {
	    0% { transform: scale(0.85); opacity: 0.4; }
	    100% { transform: scale(1.25); opacity: 0.75; }
	}

	/* Braises — naissent, hésitent, s'étirent, tombent */
	.ember {
	    position: absolute; width: 5px; height: 5px;
	    border-radius: 50%;
	    background: #cc1133;
	    box-shadow: 0 0 6px #ff2244, 0 0 15px #aa0020, 0 0 30px rgba(120,5,20,0.4);
	    opacity: 0;
	    z-index: 4;
	}
	.noface-container.awake .ember { opacity: 1; }
	.em-1 { left: 30%; bottom: -5px; animation: ember-fall-1 5s cubic-bezier(0.55, 0, 1, 0.4) infinite; animation-delay: 0s; }
	.em-2 { left: 65%; bottom: -8px; animation: ember-fall-2 6s cubic-bezier(0.55, 0, 1, 0.4) infinite; animation-delay: -1.5s; }
	.em-3 { left: 45%; bottom: -3px; animation: ember-fall-3 7s cubic-bezier(0.55, 0, 1, 0.4) infinite; animation-delay: -3s; }
	.em-4 { left: 55%; bottom: -6px; animation: ember-fall-4 5.5s cubic-bezier(0.55, 0, 1, 0.4) infinite; animation-delay: -4s; width: 4px; height: 4px; }

	@keyframes ember-fall-1 {
	    0% { transform: translate(0, 0) scaleY(1); opacity: 0; }
	    10% { transform: translate(0, 2px) scaleY(1); opacity: 0.9; }
	    25% { transform: translate(2px, 5px) scaleY(1.5); opacity: 0.85; }
	    40% { transform: translate(5px, 30px) scaleY(1); opacity: 0.7; }
	    100% { transform: translate(-5px, 200px) scale(0.5) scaleY(0.8); opacity: 0; }
	}
	@keyframes ember-fall-2 {
	    0% { transform: translate(0, 0) scaleY(1); opacity: 0; }
	    10% { transform: translate(0, 3px) scaleY(1); opacity: 0.8; }
	    25% { transform: translate(-3px, 6px) scaleY(1.6); opacity: 0.75; }
	    40% { transform: translate(-8px, 35px) scaleY(1); opacity: 0.6; }
	    100% { transform: translate(8px, 220px) scale(0.5) scaleY(0.7); opacity: 0; }
	}
	@keyframes ember-fall-3 {
	    0% { transform: translate(0, 0) scaleY(1); opacity: 0; }
	    10% { transform: translate(0, 2px) scaleY(1); opacity: 0.7; }
	    25% { transform: translate(2px, 4px) scaleY(1.4); opacity: 0.65; }
	    40% { transform: translate(6px, 25px) scaleY(1); opacity: 0.5; }
	    100% { transform: translate(-12px, 180px) scale(0.5) scaleY(0.8); opacity: 0; }
	}
	@keyframes ember-fall-4 {
	    0% { transform: translate(0, 0) scaleY(1); opacity: 0; }
	    10% { transform: translate(0, 1px) scaleY(1); opacity: 0.85; }
	    25% { transform: translate(-2px, 5px) scaleY(1.5); opacity: 0.8; }
	    40% { transform: translate(-5px, 28px) scaleY(1); opacity: 0.6; }
	    100% { transform: translate(15px, 210px) scale(0.5) scaleY(0.7); opacity: 0; }
	}

	/* Kanji 封 — visible, with synced glow */
	.eclipse-kanji {
	    position: absolute;
	    left: 50%; top: 50%; transform: translate(-50%, -50%);
	    font-family: 'Ma Shan Zheng', cursive;
	    font-size: 34px;
	    color: rgba(200, 30, 50, 0.4);
	    text-shadow: 0 0 15px rgba(180,20,40,0.3), 0 0 30px rgba(120,10,25,0.15);
	    z-index: 3;
	}
	.dying-kanji {
	    animation: kanji-die 3s ease-in-out infinite alternate;
	}
	@keyframes kanji-die {
	    0% { opacity: 0.25; transform: translate(-50%, -50%) rotate(0deg); text-shadow: 0 0 10px rgba(180,20,40,0.2), 0 0 20px rgba(120,10,25,0.1); }
	    50% { opacity: 0.65; transform: translate(calc(-50% + 1px), -50%) rotate(0.5deg); text-shadow: 0 0 25px rgba(220,40,60,0.6), 0 0 50px rgba(150,15,30,0.3); }
	    100% { opacity: 0.2; transform: translate(calc(-50% - 1px), calc(-50% + 1px)) rotate(-0.3deg); text-shadow: 0 0 8px rgba(180,20,40,0.15), 0 0 15px rgba(120,10,25,0.08); }
	}

	/* --- COMPTEUR D'ACTE KANJI --- */
	#act-counter {
	    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
	    font-family: 'Ma Shan Zheng', cursive; font-size: 24px;
	    color: rgba(255,215,0,0.35); letter-spacing: 8px;
	    z-index: 100; pointer-events: none;
	    opacity: 0; transition: opacity 1.5s ease;
	    text-shadow: 0 0 20px rgba(255,215,0,0.2), 0 0 40px rgba(255,215,0,0.08);
	}
	#act-counter.visible { opacity: 1; }

	/* --- MIYAZAKI / KODAMAS --- */
	.miyazaki-scene { 
	    position: relative; width: 100vw; max-width: none; height: 400px; 
	    display: flex; justify-content: center; align-items: center; 
	    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 75%, transparent 100%);
	    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 75%, transparent 100%);
	    animation: float-island 6s ease-in-out infinite alternate;
	}
	@keyframes float-island { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }
	.tree-branch { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; min-width: 800px; height: 100%; z-index: 1; pointer-events: none; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.9)); }
	.firefly { position: absolute; width: 5px; height: 5px; background: #a8ffb2; border-radius: 50%; box-shadow: 0 0 5px #a8ffb2, 0 0 10px #a8ffb2, 0 0 20px #a8ffb2, 0 0 30px #a8ffb2; z-index: 6; opacity: 0; }
	.kd-container { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; animation: fade-k 1s forwards; filter: drop-shadow(0 0 20px rgba(138, 184, 120, 0.4)); transform-origin: bottom center; }
	.kd-container::after {
	    content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
	    width: 120px; height: 30px; border-radius: 50%;
	    background: radial-gradient(ellipse, rgba(168,213,162,0.25) 0%, rgba(138,184,120,0.1) 50%, transparent 80%);
	    filter: blur(8px); pointer-events: none; z-index: -1;
	    animation: puddle-pulse 5s ease-in-out infinite alternate;
	}
	@keyframes puddle-pulse { 0% { opacity: 0.6; transform: translateX(-50%) scaleX(0.9); } 100% { opacity: 1; transform: translateX(-50%) scaleX(1.1); } }
	@keyframes fade-k { from { opacity: 0; } to { opacity: 0.9; } }
	.kodama-new-head { position: relative; background: #8ab878; height: 200px; width: 200px; border-radius: 35% 65% 55% 45% / 75% 55% 42% 58%; animation: rotate-kodama 6s infinite; z-index: 10; box-shadow: 0px 0px 15px 5px rgba(168, 213, 162, 0.5), 0 0 40px rgba(168, 213, 162, 0.3), 0 0 80px rgba(168, 213, 162, 0.15), 0 0 120px rgba(168, 213, 162, 0.06), inset 0 -15px 25px rgba(0, 50, 0, 0.2); }
	.kodama-new-left-eye { position: absolute; background: rgba(0, 0, 0, 0.4); top: 28%; left: 18%; height: 8px; width: 45px; border-radius: 50%; transform: rotateZ(5deg); }
	.kodama-new-right-eye { position: absolute; background: rgba(0, 0, 0, 0.4); top: 48%; right: 12%; height: 8px; width: 42px; border-radius: 50%; transform: rotateZ(-3deg); }
	.kodama-new-mouth { display: none; }
	.kodama-new-body { position: relative; background: #8ab878; height: 200px; width: 100px; border-radius: 33% 33% 0 0; box-shadow: 0px 50px 20px 5px rgba(168, 213, 162, 0.35); opacity: 0.7; -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 70%, transparent 100%); }
	.kodama-new-left-arm { position: absolute; background: #8ab878; left: -16%; top: 10%; height: 140px; width: 30px; border-radius: 50% 0% 80% 80%; transform: rotateZ(18deg); box-shadow: 0px 0px 10px 2px rgba(168, 213, 162, 0.4); z-index: -10; }
	.kodama-new-right-arm { position: absolute; background: #8ab878; right: -16%; top: 10%; height: 140px; width: 30px; border-radius: 0% 50% 80% 80%; transform: rotateZ(-18deg); box-shadow: 0px 0px 10px 2px rgba(168, 213, 162, 0.4); z-index: -10; }
	@keyframes rotate-kodama { 0% { transform: rotateZ(0deg) } 25% { transform: rotateZ(140deg) } 35% { transform: rotateZ(-70deg) } 36% { transform: rotateZ(-60deg) } 37% { transform: rotateZ(-65deg) } 38% { transform: rotateZ(-55deg) } 39% { transform: rotateZ(-60deg) } 40% { transform: rotateZ(-50deg) } 41% { transform: rotateZ(-55deg) } 42% { transform: rotateZ(-45deg) } 43% { transform: rotateZ(-50deg) } 44% { transform: rotateZ(-40deg) } 45% { transform: rotateZ(-45deg) } 46% { transform: rotateZ(-35deg) } 47% { transform: rotateZ(-40deg) } 48% { transform: rotateZ(-30deg) } 49% { transform: rotateZ(-35deg) } 50% { transform: rotateZ(-25deg) } 51% { transform: rotateZ(-30deg) } 52% { transform: rotateZ(-20deg) } 53% { transform: rotateZ(-25deg) } 54% { transform: rotateZ(-15deg) } 55% { transform: rotateZ(-20deg) } 56% { transform: rotateZ(-10deg) } 57% { transform: rotateZ(-15deg) } 58% { transform: rotateZ(-5deg) } 59% { transform: rotateZ(-10deg) } 60% { transform: rotateZ(0deg) } 61% { transform: rotateZ(-5deg) } 62% { transform: rotateZ(5deg) } 63% { transform: rotateZ(0deg) } 64% { transform: rotateZ(10deg) } 65% { transform: rotateZ(5deg) } 66% { transform: rotateZ(15deg) } 85%, 100% { transform: rotateZ(0deg) } }

	/* Pulsation lumineuse désynchronisée par kodama */
	.kd-rhythm-1 .kodama-new-head { animation: rotate-kodama 6s infinite, pulse-kodama 7s infinite; }
	.kd-rhythm-2 .kodama-new-head { animation: rotate-kodama 6s infinite, pulse-kodama 6s infinite -2.5s; }
	.kd-rhythm-3 .kodama-new-head { animation: rotate-kodama 6s infinite, pulse-kodama 8s infinite -4s; }
	@keyframes pulse-kodama {
	    0% { box-shadow: 0px 0px 20px 8px rgba(168,213,162,0.5), 0 0 50px rgba(168,213,162,0.15), inset 0 -15px 25px rgba(0,50,0,0.2); }
	    35% { box-shadow: 0px 0px 15px 5px rgba(168,213,162,0.3), 0 0 35px rgba(168,213,162,0.1), inset 0 -15px 25px rgba(0,50,0,0.2); }
	    55% { box-shadow: 0px 0px 12px 4px rgba(168,213,162,0.25), 0 0 30px rgba(168,213,162,0.08), inset 0 -15px 25px rgba(0,50,0,0.15); }
	    70% { box-shadow: 0px 0px 28px 12px rgba(168,213,162,0.65), 0 0 60px rgba(200,230,180,0.2), 0 0 90px rgba(168,213,162,0.08), inset 0 -15px 25px rgba(0,50,0,0.25); }
	    85% { box-shadow: 0px 0px 18px 6px rgba(168,213,162,0.4), 0 0 40px rgba(168,213,162,0.12), inset 0 -15px 25px rgba(0,50,0,0.2); }
	    100% { box-shadow: 0px 0px 20px 8px rgba(168,213,162,0.5), 0 0 50px rgba(168,213,162,0.15), inset 0 -15px 25px rgba(0,50,0,0.2); }
	}

	/* --- BROUILLARD AU SOL (forêt des kodamas) --- */
	.ground-fog { position: absolute; bottom: 0; left: -10%; width: 120%; height: 40%; z-index: 8; pointer-events: none; overflow: hidden; }
	.fog-layer {
	    position: absolute; bottom: 0; width: 200%; height: 100%;
	    background: linear-gradient(to top, rgba(168,213,162,0.06) 0%, rgba(138,184,120,0.03) 30%, transparent 70%);
	    animation: fog-crawl 12s ease-in-out infinite alternate;
	    filter: blur(8px);
	}
	.fog-2 { animation-delay: -4s; animation-duration: 15s; opacity: 0.7; }
	.fog-3 { animation-delay: -8s; animation-duration: 18s; opacity: 0.5; height: 60%; }
	@keyframes fog-crawl { 0% { transform: translateX(-5%) scaleY(1); } 100% { transform: translateX(5%) scaleY(1.2); } }

	/* --- POLLEN / LUCIOLES VIVANTES (forêt vivante) --- */
	.pollen {
	    position: absolute; width: 3px; height: 3px;
	    background: #d4e8a0;
	    border-radius: 50%; z-index: 7; pointer-events: none;
	    opacity: 0;
	    box-shadow: 0 0 6px rgba(200,230,150,0.7), 0 0 14px rgba(180,220,130,0.4), 0 0 30px rgba(200,230,150,0.15);
	    animation: pollen-rise 6s ease-in-out infinite, pollen-flicker 2.5s ease-in-out infinite;
	}
	.pollen:nth-child(odd) { animation-delay: -2s, -0.8s; animation-duration: 7s, 1.8s; width: 2px; height: 2px; }
	.pollen:nth-child(3n) { animation-delay: -4s, -1.5s; animation-duration: 8s, 3.2s; }
	.pollen:nth-child(4n) { background: #ffe47a; box-shadow: 0 0 6px #ffd700, 0 0 14px rgba(255,215,0,0.4), 0 0 30px rgba(255,200,0,0.15); }
	@keyframes pollen-rise {
	    0% { opacity: 0; transform: translateY(0) translateX(0); }
	    15% { opacity: 0.8; }
	    50% { opacity: 0.5; transform: translateY(-60px) translateX(12px); }
	    80% { opacity: 0.6; }
	    100% { opacity: 0; transform: translateY(-120px) translateX(20px); }
	}
	@keyframes pollen-flicker {
	    0%, 100% { opacity: 0.15; box-shadow: 0 0 3px rgba(200,230,150,0.2), 0 0 6px rgba(200,230,150,0.08); }
	    35% { opacity: 0.9; box-shadow: 0 0 8px rgba(210,235,160,0.9), 0 0 22px rgba(200,230,150,0.5), 0 0 40px rgba(200,230,150,0.2); }
	    65% { opacity: 0.5; }
	}

	/* --- KANJI MAUDITS (scène de l'Ombre) --- */
	.cursed-kanji-container { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
	.cursed-kanji {
	    position: absolute; font-family: 'Ma Shan Zheng', cursive;
	    font-size: 120px; color: rgba(107,26,48,0.08);
	    opacity: 0; pointer-events: none;
	    animation: kanji-flash 8s ease-in-out infinite;
	}
	.ck-1 { top: 10%; left: 15%; animation-delay: 0s; font-size: 150px; }
	.ck-2 { top: 60%; right: 10%; animation-delay: 1.6s; }
	.ck-3 { top: 20%; right: 25%; animation-delay: 3.2s; font-size: 100px; }
	.ck-4 { bottom: 15%; left: 20%; animation-delay: 4.8s; font-size: 90px; }
	.ck-5 { top: 40%; left: 5%; animation-delay: 6.4s; font-size: 130px; }
	@keyframes kanji-flash {
	    0%, 85%, 100% { opacity: 0; transform: scale(0.9); }
	    90% { opacity: 1; transform: scale(1.05); filter: blur(0); }
	    95% { opacity: 0.5; transform: scale(1); filter: blur(2px); }
	}

	/* --- MANDALA RITUEL (sous le neko assemblée) --- */
	.ritual-mandala {
	    position: absolute; left: 50%; top: 55%;
	    transform: translate(-50%, -50%) rotateX(35deg);
	    transform-style: preserve-3d;
	    width: 500px; height: 500px;
	    z-index: 1; pointer-events: none;
	    perspective: 800px;
	    animation: mandala-spin 60s linear infinite, mandala-breathe 5s ease-in-out infinite alternate;
	    filter: drop-shadow(0 0 8px rgba(255,215,0,0.2));
	}
	.mandala-svg { width: 100%; height: 100%; }
	.mandala-shide rect { animation: shide-sway 4s ease-in-out infinite alternate; transform-origin: center top; }
	.mandala-shide rect:nth-child(odd) { animation-delay: -1.5s; animation-duration: 3.5s; }
	@keyframes shide-sway { 0% { opacity: 0.15; } 50% { opacity: 0.3; } 100% { opacity: 0.15; } }
	@keyframes mandala-spin { 0% { transform: translate(-50%, -50%) rotateX(35deg) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotateX(35deg) rotate(360deg); } }
	@keyframes mandala-breathe { 0% { opacity: 0.65; } 100% { opacity: 0.95; } }

	/* --- GARDIENS FANTÔMES (Vrais Mini Nekos Ombragés) --- */
	.ghost-guardian {
	    position: absolute;
	    z-index: 5;
	    pointer-events: none;
	    /* opacity et transform contrôlés par JS pour le pop-in */
	}
	.ghost-guardian.popped {
	    animation: float-ghost 3s infinite alternate ease-in-out;
	}
	@keyframes float-ghost {
	    0% { transform: translate(-50%,-50%) translate(var(--ox), var(--oy)) scale(1) translateY(0); opacity: 0.5; }
	    100% { transform: translate(-50%,-50%) translate(var(--ox), var(--oy)) scale(1) translateY(-10px); opacity: 0.7; }
	}

	/* Mini neko ombre : assombri, pas de doré, glow cyan */
	.ghost-neko {
	    filter: brightness(0.35) drop-shadow(0 0 6px rgba(255,215,0,0.15));
	    transform-origin: center center;
	}
	/* Yeux dorés lumineux sur les gardiens */
	.ghost-neko .eye-left,
	.ghost-neko .eye-right {
	    opacity: 1 !important;
	    height: 4px !important; width: 16px !important;
	    background: #ffd700 !important;
	    border: none !important; border-radius: 50% !important;
	    box-shadow: 0 0 5px #ffd700, 0 0 10px rgba(255,215,0,0.6) !important;
	    transform: rotate(0deg) !important;
	}
	/* Bobbing désynchronisé */
	.ghost-guardian.popped:nth-child(1) { animation-duration: 3.2s; }
	.ghost-guardian.popped:nth-child(2) { animation-duration: 3.8s; animation-delay: -0.5s; }
	.ghost-guardian.popped:nth-child(3) { animation-duration: 3.5s; animation-delay: -1.2s; }
	.ghost-guardian.popped:nth-child(4) { animation-duration: 4s; animation-delay: -2s; }
	.ghost-guardian.popped:nth-child(5) { animation-duration: 3.3s; animation-delay: -0.8s; }
	.ghost-guardian.popped:nth-child(6) { animation-duration: 3.7s; animation-delay: -1.5s; }
	.ghost-guardian.popped:nth-child(7) { animation-duration: 3.6s; animation-delay: -2.5s; }
	.ghost-guardian.popped:nth-child(8) { animation-duration: 4.1s; animation-delay: -1s; }
	/* Cacher la pièce d'or et son contenu sur les gardiens ombres */
	.ghost-neko .gold,
	.ghost-neko .carving,
	.ghost-neko .gold::after { 
	    display: none !important; 
	}
	/* Le bell/collier reste mais tout noir */
	.ghost-neko .bell,
	.ghost-neko .reflect,
	.ghost-neko .bell::before,
	.ghost-neko .bell::after {
	    background: #04060a !important;
	    box-shadow: none !important;
	}
	/* Arrêter le bras qui bouge sur les ombres */
	.ghost-neko .arm-top-right { animation: none !important; }
	.ghost-neko .arm-top-right-tip { animation: none !important; top: 128px !important; }

	/* --- NEKO ART (MANEKI-NEKO CSS PUR) --- */
	.neko-stage { position: relative; width: 140px; height: 200px; margin: 80px auto 20px auto; z-index: 10; transition: transform 1.5s ease, filter 0.8s ease, opacity 0.5s ease; animation: breathe 3s ease-in-out infinite; display: flex; justify-content: center; align-items: center; pointer-events: none; }
	@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
	.cinematic-mode .neko-stage { transform: scale(1.1); animation: head-tilt 4s ease-in-out infinite alternate; }
	@keyframes head-tilt { 0% { transform: scale(1.1) rotate(0deg); } 100% { transform: scale(1.1) rotate(6deg); } }
	.neko-aura-relic { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 400px; height: 150px; background: linear-gradient(to top, rgba(160, 240, 255, 0.35) 0%, rgba(255, 200, 80, 0.1) 30%, rgba(160, 240, 255, 0.05) 50%, transparent 100%); border-radius: 50% 50% 0 0; z-index: -1; animation: aura-blade-pulse 3s infinite alternate ease-in-out; pointer-events: none; filter: blur(15px); }
	@keyframes aura-blade-pulse { 0% { opacity: 0.5; transform: translateX(-50%) scaleY(0.9); } 100% { opacity: 0.7; transform: translateX(-50%) scaleY(1.1); } }

	/* --- POUSSIÈRE D'OR SACRÉE --- */
	.sacred-dust { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
	.gold-mote {
	    position: absolute; width: 3px; height: 3px; border-radius: 50%;
	    background: #ffe47a;
	    box-shadow: 0 0 6px #ffd700, 0 0 14px rgba(255,215,0,0.5), 0 0 28px rgba(255,200,0,0.2);
	    opacity: 0;
	}
	.neko-stage:not(.sleeping) .gold-mote { opacity: 1; }
	.gm-1 { top: 15%; left: 20%; animation: mote-drift 8s ease-in-out infinite alternate, firefly-flicker 2.3s ease-in-out infinite; }
	.gm-2 { top: 25%; right: 18%; animation: mote-drift 9s ease-in-out infinite alternate, firefly-flicker 1.8s ease-in-out infinite; animation-delay: -3s, -0.5s; }
	.gm-3 { top: 40%; left: 12%; animation: mote-drift 7s ease-in-out infinite alternate, firefly-flicker 2.6s ease-in-out infinite; animation-delay: -5s, -1.2s; }
	.gm-4 { top: 55%; right: 15%; animation: mote-drift 10s ease-in-out infinite alternate, firefly-flicker 2.1s ease-in-out infinite; animation-delay: -2s, -0.8s; }
	.gm-5 { top: 10%; left: 45%; animation: mote-drift 8.5s ease-in-out infinite alternate, firefly-flicker 3s ease-in-out infinite; animation-delay: -4s, -1.5s; width: 2px; height: 2px; }
	.gm-6 { top: 65%; left: 25%; animation: mote-drift 9.5s ease-in-out infinite alternate, firefly-flicker 2.4s ease-in-out infinite; animation-delay: -6s, -0.3s; width: 2px; height: 2px; }
	.gm-7 { top: 30%; right: 30%; animation: mote-drift 7.5s ease-in-out infinite alternate, firefly-flicker 1.9s ease-in-out infinite; animation-delay: -1s, -1.8s; }
	.gm-8 { top: 50%; left: 35%; animation: mote-drift 11s ease-in-out infinite alternate, firefly-flicker 2.7s ease-in-out infinite; animation-delay: -7s, -0.7s; width: 2px; height: 2px; }
	@keyframes mote-drift {
	    0% { transform: translate(0, 0); }
	    50% { transform: translate(15px, -20px); }
	    100% { transform: translate(-10px, 15px); }
	}
	@keyframes firefly-flicker {
	    0% { opacity: 0.15; box-shadow: 0 0 4px #ffd700, 0 0 8px rgba(255,215,0,0.2); }
	    40% { opacity: 0.9; box-shadow: 0 0 8px #ffe47a, 0 0 18px rgba(255,215,0,0.6), 0 0 35px rgba(255,200,0,0.25); }
	    60% { opacity: 0.7; }
	    100% { opacity: 0.15; box-shadow: 0 0 4px #ffd700, 0 0 8px rgba(255,215,0,0.2); }
	}

	/* --- RAYONS DIVINS DEPUIS LA MÉDAILLE --- */
	.divine-rays { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 0; height: 0; z-index: 2; pointer-events: none; opacity: 0; }
	.neko-stage:not(.sleeping) .divine-rays { opacity: 1; transition: opacity 2s ease-in; }
	.ray {
	    position: absolute; left: 0; top: 0;
	    width: 250px; height: 2px;
	    background: linear-gradient(to right, rgba(255,215,0,0.35) 0%, rgba(255,215,0,0.1) 50%, transparent 100%);
	    filter: blur(3px);
	    transform-origin: left center;
	    animation: ray-pulse 4s ease-in-out infinite alternate;
	}
	.ray-1 { transform: rotate(0deg); }
	.ray-2 { transform: rotate(60deg); animation-delay: -0.7s; width: 220px; }
	.ray-3 { transform: rotate(120deg); animation-delay: -1.4s; width: 200px; }
	.ray-4 { transform: rotate(180deg); animation-delay: -2.1s; }
	.ray-5 { transform: rotate(240deg); animation-delay: -2.8s; width: 210px; }
	.ray-6 { transform: rotate(300deg); animation-delay: -3.5s; width: 230px; }
	@keyframes ray-pulse {
	    0% { opacity: 0.3; width: 200px; }
	    50% { opacity: 0.6; }
	    100% { opacity: 0.2; width: 280px; }
	}
	.neko-scale-wrapper { width: 340px; height: 520px; transform: scale(0.38); transform-origin: center center; position: relative; flex-shrink: 0; z-index: 10;}
	.neko-art-container { position: relative; width: 340px; height: 100%; display: flex; justify-content: space-between; flex-direction: column; }
	.neko-art-container * { box-sizing: content-box !important; font-family: 'Ma Shan Zheng', cursive; }
	.ears { display: flex; width: 100%; justify-content: space-between; }
	.ear-left-out { height: 110px; width: 110px; border: solid 8px black; background-color: white; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; position: relative; transform: rotate(3deg); }
	.ear-left-inner { height: 60px; position: absolute; top: 30px; left: 30px; width: 60px; background-color: #DF4A63; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; border: solid 8px black; }
	.ear-right-out { height: 110px; width: 110px; border: solid 8px black; background-color: white; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; position: relative; transform: rotate(84deg); }
	.ear-right-inner { height: 60px; position: absolute; top: 30px; right: 30px; width: 60px; background-color: #DF4A63; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; transform: rotate(88deg); border: solid 8px black; }
	.head { height: 250px; width: 300px; top: 10px; left: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: solid 8px black; background-color: white; position: absolute; z-index: 2; }
	.eyes { display: flex; justify-content: space-around; padding-top: 85px; height: 35px; }
	.eye-left::after { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; left: 1px; top: 0px; background-color: black; border-radius: 61%; }
	.eye-left::before { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; right: 1px; top: 0px; background-color: black; border-radius: 61%; }
	.eye-left { z-index: 1; width: 74px; height: 74px; border: 12px solid; border-color: black transparent transparent transparent; border-radius: 50%; transform: rotate(3deg); transition: 0.3s; }
	.eye-right::after { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; left: 1px; top: 0px; background-color: black; border-radius: 61%; }
	.eye-right::before { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; right: 1px; top: 0px; background-color: black; border-radius: 61%; }
	.eye-right { z-index: 1; width: 74px; height: 74px; border: 12px solid; border-color: black transparent transparent transparent; border-radius: 50%; transform: rotate(-3deg); transition: 0.3s; }
	.face-center { display: flex; width: 100%; }
	.mustache-left { background-color: black; width: 50px; height: 8px; border-radius: 7% 93% 93% 7% / 47% 53% 47% 53%; position: absolute; top: 140px; left: 14px; }
	.mustache-right-bottom { background-color: black; width: 50px; height: 8px; border-radius: 93% 7% 7% 93% / 53% 47% 53% 47%; position: absolute; top: 155px; left: 240px; transform: rotate(8deg); }
	.mustache-right { background-color: black; width: 50px; height: 8px; border-radius:93% 7% 7% 93% / 53% 47% 53% 47%; position: absolute; top: 140px; left: 240px; }
	.mustache-left-bottom { background-color: black; width: 50px; height: 8px; border-radius: 7% 93% 93% 7% / 47% 53% 47% 53%; position: absolute; top: 155px; left: 14px; transform: rotate(-8deg); }
	.nose { position: absolute; top: 130px; left: 135px; height: 20px; width: 35px; background-color: black; border-radius: 46% 54% 49% 51% / 66% 65% 35% 34%; }
	.mouth { position: absolute; z-index: 1; top: 110px; left: 80px; width: 60px; height: 60px; border: 8px solid; border-color: transparent black black transparent; border-radius: 50%; transform: rotate(45deg); }
	.mouth-right { position: absolute; z-index: 1; top: 110px; left: 147px; width: 60px; height: 60px; border: 8px solid; border-color: transparent black black transparent; border-radius: 50%; transform: rotate(45deg); }
	.necklace { height: 95px; background-color: #DF4A63; margin-top: 70px; border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%; width: 250px; align-self: center; border: solid 8px black; position: relative; z-index: 1; }
	.bell { background-color: #F9D552; border-radius: 50%; position: absolute; top: 82px; left: 90px; height: 50px; width: 50px; border: solid 8px black; }
	.reflect { height: 13px; width: 20px; background-color: white; border-radius: 50%; position: absolute; top: 5px; right: 9px; transform: rotate(25deg); }
	.bell:before { content: ''; height: 16px; width: 16px; border-radius: 50%; background: white; position: absolute; bottom: 3px; left: 18px; }
	.bell:after { content: ''; height: 15px; width: 8px; background: white; position: absolute; bottom: 0px; left: 22px; }
	.arm-top-left-wrapper { z-index: 0; }
	.arm-top-left { position: absolute; display: flex; top: 200px; width: 220px; left: 6px; height: 240px; background: #fff; border: 8px solid black; transform: rotate(50deg); border-radius: 50%; border-color: transparent transparent black black; }
	.arm-top-left-tip:after { content: ''; position: absolute; height: 67px; width: 49px; background: white; border-radius: 50%; bottom: -21px; left: 17px; transform: rotate(17deg); }
	.arm-top-left-tip { left: 70px; bottom: 132px; position: absolute; display: flex; z-index: 1; background: white; width: 68px; height: 60px; border: 8px solid black; transform: rotate(92deg); border-radius: 50%; border-color: black black transparent black; }
	@keyframes arm-right { 0% { transform: rotate(35deg); transform-origin: center; } 50% { transform-origin: left; transform: rotate(35deg) translateY(-10px) translateX(-10px) scaleY(0.8); } 100% { transform-origin: center; transform: rotate(35deg); } }
	.arm-top-right { position: absolute; display: flex; z-index: -1; top: 132px; width: 106px; right: -26px; height: 200px; background: #fff; border: 8px solid black; transform: rotate(35deg); border-radius: 50%; border-color: transparent black transparent transparent; animation: arm-right 1.5s both infinite; }
	@keyframes arm-tip-right { 0% { top: 128px; } 50% { top: 175px; } 100% { top: 128px; } }
	.arm-top-right-tip { position: absolute; display: flex; z-index: 0; top: 175px; right: -66px; width: 85px; background: white; height: 60px; border: 8px solid black; border-radius: 50%; border-color: black black black transparent; animation: arm-tip-right 1.5s both infinite; }
	.back-legs { width: 100%; height: 200px; position: relative; display: flex; justify-content: space-between; }
	.back-leg-left { width: 120px; height: 180px; z-index: -2; border-radius: 53% 47% 50% 50% / 59% 61% 39% 41%; background-color: white; position: relative; padding-top: 30px; border: solid 8px black; border-color: transparent transparent transparent black; transform: rotate(10deg); }
	.back-leg-right { width: 120px; height: 180px; z-index: -2; border-radius: 47% 53% 50% 50% / 61% 59% 41% 39%; background-color: white; position: relative; padding-top: 30px; border: solid 8px black; border-color: black black transparent transparent; transform: rotate(-10deg); }
	.paws { position: relative; width: 100%; height: 100px; margin-top: -28px; display: flex; justify-content: space-between; }
	.paw-left { height: 60px; width: 100px; margin-right: 4px; border-radius: 47% 53% 50% 50% / 60% 60% 40% 40% ; border: solid 8px black; background-color: white; }
	.paw-right { height: 60px; width: 100px; margin-left: 4px; border-radius: 47% 53% 50% 50% / 60% 60% 40% 40%; border: solid 8px black; background-color: white; }
	.gold { height: 217px; width: 136px; background: #F9D552; border: solid 8px black; left: 115px; bottom: 8px; border-radius: 61px; position: absolute; transform: rotate(45deg); }
	.gold:after { content: ''; height: 50px; width: 22px; border-radius: 50%; background: white; position: absolute; transform: rotate(45deg); top: 4px; left: 17px; }
	.carving { position: absolute; display: inline-block; z-index: 1; top: 15px; left: 25px; width: 60px; font-size: 65px; font-weight: 600; line-height: 70px; color: black; text-align: center; }

	/* --- NEKO ANIMATIONS --- */
	.neko-stage.sleeping .arm-top-right { animation: none !important; }
	.neko-stage.sleeping .arm-top-right-tip { animation: none !important; top: 128px !important; } 
	.neko-stage.happy .arm-top-right { animation: arm-right 0.8s both infinite; }
	.neko-stage.happy .arm-top-right-tip { animation: arm-tip-right 0.8s both infinite; }
	@keyframes super-saiyan { 0% { filter: drop-shadow(0 0 20px var(--gold)); transform: scale(1.1) translateY(0); } 50% { filter: drop-shadow(0 0 45px #ffaa00) drop-shadow(0 0 20px var(--white)); transform: scale(1.15) translateY(-10px); } 100% { filter: drop-shadow(0 0 20px var(--gold)); transform: scale(1.1) translateY(0); } }
	#final-neko-hero { margin-top: 0 !important; animation: super-saiyan 1.5s infinite !important; }

	/* --- OBSIDIAN MODE --- */
	.obsidian-mode .head, .obsidian-mode .arm-top-left, .obsidian-mode .arm-top-right, .obsidian-mode .paw-left, .obsidian-mode .paw-right, .obsidian-mode .back-leg-left, .obsidian-mode .back-leg-right, .obsidian-mode .ear-left-out, .obsidian-mode .ear-right-out { background: linear-gradient(to bottom, #111520 0%, #04060a 100%) !important; border-color: #020305 !important; box-shadow: inset 0px 8px 12px rgba(255,255,255,0.08), inset 0px -15px 25px rgba(160, 240, 255, 0.4) !important; }
	.obsidian-mode .arm-top-left-tip::after, .obsidian-mode .arm-top-left-tip, .obsidian-mode .arm-top-right-tip { background: #04060a !important; border-color: #020305 !important; box-shadow: inset 0px -10px 15px rgba(160, 240, 255, 0.3) !important; }
	.obsidian-mode .ear-left-inner, .obsidian-mode .ear-right-inner, .obsidian-mode .necklace { background-color: #080c14 !important; border-color: #020305 !important; box-shadow: inset 0 5px 10px rgba(0,0,0,0.8) !important; }
	.obsidian-mode .eye-left, .obsidian-mode .eye-right { opacity: 1 !important; height: 4px !important; width: 25px !important; background: #c9fffe !important; border: none !important; border-radius: 10px !important; box-shadow: 0 0 15px #c9fffe, 0 0 30px #c9fffe !important; transform: rotate(0deg) !important; margin-top: 15px !important; }
	.obsidian-mode .eye-left { margin-left: 20px !important; }
	.obsidian-mode .eye-right { margin-right: 20px !important; }
	.obsidian-mode .eye-left::after, .obsidian-mode .eye-left::before, .obsidian-mode .eye-right::after, .obsidian-mode .eye-right::before { display: none !important; }
	.obsidian-mode .mustache-left, .obsidian-mode .mustache-right, .obsidian-mode .mustache-left-bottom, .obsidian-mode .mustache-right-bottom, .obsidian-mode .nose, .obsidian-mode .mouth, .obsidian-mode .mouth-right { opacity: 0 !important; }
	.obsidian-mode .gold, .obsidian-mode .bell { background: radial-gradient(circle at center, #ffd700 0%, #f39c12 60%, #d35400 100%) !important; box-shadow: 0 0 25px rgba(243, 156, 18, 0.8), 0 0 60px rgba(255, 180, 0, 0.5), 0 0 100px rgba(255, 150, 0, 0.25), inset 0 0 15px rgba(255, 255, 255, 0.5) !important; border-color: #3e2723 !important; animation: koban-glow 3s ease-in-out infinite alternate; }
	@keyframes koban-glow {
	    0% { box-shadow: 0 0 25px rgba(243,156,18,0.7), 0 0 50px rgba(255,180,0,0.4), 0 0 80px rgba(255,150,0,0.2), inset 0 0 15px rgba(255,255,255,0.4); }
	    100% { box-shadow: 0 0 30px rgba(243,156,18,0.9), 0 0 70px rgba(255,180,0,0.55), 0 0 120px rgba(255,150,0,0.3), inset 0 0 20px rgba(255,255,255,0.6); }
	}
	.obsidian-mode .gold::after { background: #f39c12 !important; }
	.obsidian-mode .carving { color: #4a2311 !important; text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important; }

	/* --- KUSANAGI --- */
	.kusanagi-throne { position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 450px; z-index: 5; display: flex; align-items: center; justify-content: center; }
	.kusanagi-throne::after {
	    content: ''; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
	    width: 320px; height: 18px; border-radius: 50%;
	    background: radial-gradient(ellipse, rgba(201,255,254,0.35) 0%, rgba(201,255,254,0.12) 40%, transparent 80%);
	    filter: blur(12px); pointer-events: none;
	    animation: blade-halo 3.5s ease-in-out infinite alternate;
	}
	.kusanagi-throne::before {
	    content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
	    width: 85vw; height: 2px;
	    background: linear-gradient(to right, transparent 0%, rgba(201,255,254,0.08) 15%, rgba(201,255,254,0.2) 40%, rgba(201,255,254,0.3) 50%, rgba(201,255,254,0.2) 60%, rgba(201,255,254,0.08) 85%, transparent 100%);
	    filter: blur(3px); pointer-events: none;
	    animation: light-line 4s ease-in-out infinite alternate;
	}
	@keyframes blade-halo { 0% { opacity: 0.5; width: 300px; } 100% { opacity: 0.95; width: 350px; } }
	@keyframes light-line { 0% { opacity: 0.4; } 100% { opacity: 0.8; } }
	.kusanagi-svg {
	    animation: blade-pulse 3.5s ease-in-out infinite alternate;
	}
	@keyframes blade-pulse {
	    0% { filter: drop-shadow(0 0 10px #c9fffe) drop-shadow(0 0 25px rgba(201,255,254,0.4)) drop-shadow(0 0 50px rgba(201,255,254,0.15)); }
	    100% { filter: drop-shadow(0 0 16px #c9fffe) drop-shadow(0 0 40px rgba(201,255,254,0.55)) drop-shadow(0 0 70px rgba(201,255,254,0.25)); }
	}
	.kusanagi-break { animation: break-throne 0.8s forwards !important; }
	@keyframes break-throne { 0% { filter: drop-shadow(0 0 30px red) brightness(2); transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.2) rotate(-15deg); } 100% { filter: drop-shadow(0 0 0 red) brightness(0); transform: translateX(-50%) scale(0) rotate(90deg); opacity: 0; } }

	/* --- ÉCLIPSE TOTALE --- */
	.dark-eclipse-overlay {
	    position: absolute;
	    top: 50%; left: 50%; 
	    transform: translate(-50%, -50%);
	    width: 300vw; height: 300vh;
	    background: radial-gradient(ellipse at center, rgba(10,5,8,0.55) 0%, rgba(2,1,4,0.45) 60%);
	    z-index: -5;
	    pointer-events: none;
	}

	/* --- BOSS OMBRE MILLÉNAIRE --- */
	.noface-container { 
	    position: relative; width: 420px; height: 520px; margin: 0 auto; 
	    transform-origin: center center;
	    z-index: 20; 
	    overflow: visible;
	}
	.crimson-aura {
	    position: absolute;
	    top: 45%; left: 50%;
	    transform: translate(-50%, -50%) scaleY(1.6) scaleX(0.7);
	    width: 500px; height: 500px; 
	    background: radial-gradient(ellipse at center, rgba(220, 0, 30, 0.5) 0%, rgba(120, 0, 15, 0.15) 30%, transparent 65%);
	    border-radius: 50%;
	    z-index: 0;
	    opacity: 0;
	    transition: opacity 3s ease-in;
	    pointer-events: none;
	}
	.noface-container.awake .crimson-aura {
	    opacity: 1;
	    animation: breathe-aura 4s infinite;
	}
	@keyframes breathe-aura {
	    0% { transform: translate(-50%, -50%) scaleY(1.5) scaleX(0.65); opacity: 0.7; }
	    70% { transform: translate(-50%, -50%) scaleY(1.65) scaleX(0.72); opacity: 0.95; }
	    85% { transform: translate(-50%, -50%) scaleY(1.75) scaleX(0.78); opacity: 1; }
	    100% { transform: translate(-50%, -50%) scaleY(1.5) scaleX(0.65); opacity: 0.7; }
	}

	/* --- RELIQUES BLAST --- */
	.relics-blast { 
	    position: absolute; inset: 0; pointer-events: none; z-index: 200; 
	}

	/* --- MIKO CIRCLE --- */
	#miko-circle-container { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; display: none; pointer-events: none; z-index: 30; animation: spin-slow 25s linear infinite; margin-left: -180px; margin-top: -180px; transform-origin: center center; }
	@keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
	#magic-portal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 2s ease; z-index: 0; }
	.portal-ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(255, 183, 197, 0.6); box-shadow: 0 0 25px rgba(255, 183, 197, 0.8), inset 0 0 15px rgba(255, 183, 197, 0.5); }
	.ring-1 { width: 100%; height: 100%; animation: spin-portal 8s linear infinite; border-width: 4px; }
	.ring-2 { width: 70%; height: 70%; animation: spin-portal-reverse 5s linear infinite; border-style: dotted; }
	.portal-core { width: 25%; height: 25%; background: #fff; border-radius: 50%; box-shadow: 0 0 50px 25px var(--sakura), 0 0 100px 40px #fff; animation: pulse-core 2s infinite alternate ease-in-out; }
	@keyframes spin-portal { 100% { transform: rotate(360deg); } }
	@keyframes spin-portal-reverse { 100% { transform: rotate(-360deg); } }
	@keyframes pulse-core { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.3); opacity: 1; } }
	.miko-node { position: absolute; width: 120px; display: flex; align-items: center; justify-content: center; opacity: 0; z-index: 10; animation: float-up-fade 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
	.miko-content { display: flex; flex-direction: column; align-items: center; animation: counter-spin 25s linear infinite; }
	@keyframes counter-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
	@keyframes float-up-fade { 0% { opacity: 0; transform: translateY(40px) scale(0.5); filter: blur(5px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
	.miko-emoji { font-size: 28px; filter: drop-shadow(0 0 15px var(--sakura)); animation: float-emoji 2s ease-in-out infinite alternate; }
	@keyframes float-emoji { 0% { transform: translateY(0px) scale(0.9); } 100% { transform: translateY(-8px) scale(1.1); } }
	.miko-label { text-align: center; font-weight: 900; font-size: 19px; color: #fff; text-shadow: 0 0 10px var(--sakura), 0 0 20px var(--sakura), 0 0 35px #ffb7c5; letter-spacing: 2px; white-space: nowrap; margin-top: 5px; }

	/* ═══════════════════════════════════════════════════
	   CINÉMATIQUE FINALE — Dissolution + Aube + Miroir + Bateau
	   ═══════════════════════════════════════════════════ */

	/* --- PHASE 1 : DISSOLUTION DE L'OMBRE --- */
	.noface-container.dissolving .smoke-particle {
	    animation-duration: 1.5s !important;
	    animation-direction: reverse !important;
	    opacity: 0 !important;
	    transition: opacity 3s ease-out;
	}
	.noface-container.dissolving .eclipse-ring {
	    border-color: rgba(255,215,0,0.4) !important;
	    box-shadow: 0 0 20px rgba(255,215,0,0.3), 0 0 50px rgba(255,200,0,0.15), inset 0 0 20px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,215,0,0.2) !important;
	    transition: all 3s ease;
	}
	.noface-container.dissolving .eclipse-void {
	    background: radial-gradient(circle, #1a1008 0%, #0a0504 60%, #030002 100%) !important;
	    transition: background 3s ease;
	}
	.noface-container.dissolving .eclipse-kanji {
	    color: rgba(255,215,0,0.7) !important;
	    text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,200,0,0.3) !important;
	    animation: kanji-restore 3s ease forwards !important;
	}
	@keyframes kanji-restore {
	    0% { opacity: 0.3; color: rgba(200,30,50,0.4); }
	    100% { opacity: 0.9; color: rgba(255,215,0,0.8); transform: translate(-50%, -50%) scale(1.2); }
	}
	.noface-container.dissolving .ember { opacity: 0 !important; transition: opacity 1s; }
	.noface-container.dissolving .eclipse-pulse,
	.noface-container.dissolving .eclipse-pulse-deep { opacity: 0 !important; transition: opacity 2s; }
	.noface-container.dissolving .crimson-aura {
	    background: radial-gradient(ellipse at center, rgba(255,215,0,0.3) 0%, rgba(200,180,0,0.1) 30%, transparent 65%) !important;
	    transition: all 3s ease;
	}

	/* --- PHASE 2 : APPARITION DIVINE DU NEKO BLANC --- */
	.divine-rise {
	    opacity: 1 !important;
	    animation: neko-divine-enter 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
	}
	/* Halo radial — lumière divine ambiante derrière le neko */
	.divine-rise::before {
	    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	    width: 350px; height: 350px; border-radius: 50%;
	    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,215,0,0.06) 30%, rgba(255,200,100,0.03) 55%, transparent 75%);
	    pointer-events: none; z-index: -1;
	    animation: divine-halo-pulse 5s ease-in-out infinite alternate;
	}
	@keyframes divine-halo-pulse {
	    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
	    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
	}
	/* Soft glow cotonneux — lumière qui "bave" doucement */
	.divine-rise .neko-art-container {
	    filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)) drop-shadow(0 0 50px rgba(255,215,0,0.3)) drop-shadow(0 0 90px rgba(255,200,100,0.15));
	    animation: divine-soft-breathe 4s ease-in-out infinite alternate;
	}
	@keyframes divine-soft-breathe {
	    0% { filter: drop-shadow(0 0 18px rgba(255,255,255,0.5)) drop-shadow(0 0 45px rgba(255,215,0,0.25)) drop-shadow(0 0 80px rgba(255,200,100,0.12)); }
	    100% { filter: drop-shadow(0 0 28px rgba(255,255,255,0.7)) drop-shadow(0 0 65px rgba(255,215,0,0.35)) drop-shadow(0 0 110px rgba(255,200,100,0.18)); }
	}
	@keyframes neko-divine-enter {
	    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); filter: brightness(3) blur(10px); }
	    40% { opacity: 0.7; filter: brightness(1.8) blur(3px); }
	    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); filter: brightness(1) blur(0); }
	}
	.divine-rise .gold {
	    animation: medal-ignite 1.5s ease 1s forwards !important;
	}
	@keyframes medal-ignite {
	    0% { box-shadow: 0 0 10px rgba(243,156,18,0.3); }
	    100% { box-shadow: 0 0 30px rgba(243,156,18,0.9), 0 0 70px rgba(255,180,0,0.6), 0 0 120px rgba(255,150,0,0.3); }
	}

	/* --- PHASE 3 : MIROIR DES ESPRITS (plein écran) --- */
	#mirror-overlay {
	    position: fixed; inset: 0;
	    background: rgba(5,0,10,0.92);
	    z-index: 9000; display: none;
	    flex-direction: column; align-items: center; justify-content: center;
	    opacity: 0; transition: opacity 1.5s ease;
	}
	#mirror-overlay.active { display: flex !important; opacity: 1 !important; }

	.mirror-circle {
	    width: 75vmin; height: 75vmin; max-width: 500px; max-height: 500px;
	    border-radius: 50%; overflow: hidden;
	    position: relative;
	    border: 4px solid rgba(20,10,10,0.6);
	    box-shadow: 0 0 40px rgba(161,196,253,0.3), 0 0 80px rgba(161,196,253,0.1), inset 0 0 60px rgba(0,0,0,0.8);
	}
	.mirror-circle video {
	    width: 100%; height: 100%; object-fit: cover;
	    filter: sepia(0.5) hue-rotate(190deg) brightness(0.85) contrast(1.2) saturate(1.3);
	    transform: scaleX(-1);
	}
	.mirror-shader {
	    position: absolute; inset: 0;
	    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(161,196,253,0.15) 40%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 60%);
	    background-size: 200% 200%; animation: mirror-ripple 5s infinite linear;
	    pointer-events: none; mix-blend-mode: overlay; border-radius: 50%;
	}
	@keyframes mirror-ripple { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
	@keyframes mirror-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

	.mirror-frame {
	    position: absolute; inset: -8px; border-radius: 50%;
	    border: 3px solid rgba(15,10,10,0.7);
	    box-shadow: 0 0 15px rgba(0,0,0,0.5);
	    pointer-events: none;
	}

	.mirror-instruction {
	    margin-top: 25px; font-size: 18px; color: rgba(161,196,253,0.8);
	    text-shadow: 0 0 15px rgba(161,196,253,0.4);
	    font-family: 'Ma Shan Zheng', cursive; letter-spacing: 2px;
	}

	#btn-capture {
	    margin-top: 20px; padding: 16px 40px; border-radius: 50px;
	    border: 2px solid rgba(255,215,0,0.4); color: #ffd700;
	    font-weight: 900; background: rgba(0,0,0,0.6); font-size: 18px;
	    font-family: 'Fredoka One', cursive;
	    box-shadow: 0 0 25px rgba(255,215,0,0.15);
	    cursor: pointer; text-transform: uppercase; letter-spacing: 2px;
	    transition: all 0.4s ease;
	}
	#btn-capture:hover { background: rgba(255,215,0,0.15); box-shadow: 0 0 40px rgba(255,215,0,0.3); }

	/* --- PHASE 5 : BATEAU FINAL --- */
	#scene-boat-final {
	    position: absolute; inset: 0; display: none;
	    align-items: center; justify-content: center;
	    z-index: 15; opacity: 0; transition: opacity 3s ease;
	}
	#scene-boat-final.active { display: flex !important; opacity: 1 !important; }

	.final-boat-container {
	    position: absolute; bottom: 35%; width: 100%; height: 200px;
	    pointer-events: none; overflow: visible;
	}
	.final-boat {
	    position: absolute; left: -200px;
	    width: 160px; height: 45px;
	    background: #020002;
	    border-radius: 0 0 60px 60px;
	    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
	}
	.final-boat::after {
	    content: ''; position: absolute; top: 50px; left: 10%; width: 80%; height: 35px;
	    background: linear-gradient(to bottom, rgba(100,80,120,0.15), transparent);
	    border-radius: 0 0 50% 50%; filter: blur(4px);
	    transform: scaleY(-1); opacity: 0.5;
	}
	.final-boat-cabin {
	    position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%);
	    width: 55px; height: 38px; background: #020002;
	    border-radius: 6px 6px 0 0;
	}
	.final-boat-pole {
	    position: absolute; right: 20px; bottom: 25px;
	    width: 3px; height: 65px; background: #020002;
	    transform: rotate(15deg); transform-origin: bottom;
	}
	.sail-final { animation: sail-away 30s linear forwards; }
	@keyframes sail-away { 0% { left: -200px; } 100% { left: 110vw; } }

	.final-lantern {
	    position: absolute; width: 16px; height: 22px;
	    background: #ffca28; border-radius: 3px;
	    box-shadow: 0 0 20px #ffca28, 0 0 45px #ff6f00;
	    display: flex; justify-content: center; align-items: center;
	    color: #8A1C1C; font-size: 10px; font-weight: bold; font-family: sans-serif;
	    z-index: 6;
	}
	.final-lantern::after {
	    content: ''; position: absolute; top: 28px;
	    width: 12px; height: 16px; border-radius: 50%;
	    background: rgba(255,202,40,0.15); filter: blur(6px);
	    pointer-events: none;
	}

	.final-fog-container {
	    position: absolute; bottom: 25%; width: 120%; left: -10%; height: 15%;
	    pointer-events: none; overflow: hidden;
	}
	.final-fog-layer {
	    position: absolute; bottom: 0; width: 200%; height: 100%;
	    background: linear-gradient(to top, rgba(80,60,120,0.08) 0%, rgba(40,30,60,0.03) 40%, transparent 80%);
	}
	.final-fog-1 { animation: fog-crawl 12s ease-in-out infinite alternate; }
	.final-fog-2 { animation: fog-crawl 16s ease-in-out infinite alternate-reverse; opacity: 0.7; }
	.final-fog-3 { animation: fog-crawl 20s ease-in-out infinite alternate; opacity: 0.5; width: 250%; }

	.final-water-line {
	    position: absolute; bottom: 33%; left: 0; width: 100%; height: 1px;
	    background: linear-gradient(to right, transparent 5%, rgba(161,196,253,0.08) 30%, rgba(161,196,253,0.12) 50%, rgba(161,196,253,0.08) 70%, transparent 95%);
	    pointer-events: none;
	}

	@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

	/* =========================================
	   GLOW-UP MAGICAL GIRL : L'ASSEMBLÉE DES NEKOS
	   ========================================= */

	/* 1. Le Neko Suprême : Halo Magenta et Médaille qui bat comme un cœur */
	.obsidian-mode {
	    filter: drop-shadow(0 0 30px rgba(255, 20, 147, 0.6)) drop-shadow(0 0 60px rgba(255, 105, 180, 0.4)) !important;
	}
	.obsidian-mode .gold {
	    animation: heart-beat-gold 1.5s infinite alternate ease-in-out !important;
	}
	@keyframes heart-beat-gold {
	    0% { box-shadow: 0 0 15px #ffd700, 0 0 30px #ff69b4; transform: scale(1) rotate(45deg); }
	    100% { box-shadow: 0 0 40px #ffd700, 0 0 80px #ff1493; transform: scale(1.15) rotate(45deg); }
	}

	/* 2. Le Cercle Sacré : Un vrai Mandala lumineux (on cache l'ancien canvas) */
	#guardian-constellation { display: none !important; }

	#ghost-guardians-container::before {
	    content: ''; position: absolute; top: 50%; left: 50%;
	    width: 440px; height: 440px; transform: translate(-50%, -50%);
	    border-radius: 50%; border: 3px dashed rgba(255, 183, 197, 0.8);
	    box-shadow: 0 0 30px rgba(255, 105, 180, 0.5), inset 0 0 30px rgba(255, 105, 180, 0.4);
	    background: radial-gradient(circle, rgba(255, 105, 180, 0.15) 0%, transparent 60%);
	    animation: magic-circle-spin 25s linear infinite; z-index: -1; pointer-events: none;
	}
	#ghost-guardians-container::after {
	    content: ''; position: absolute; top: 50%; left: 50%;
	    width: 390px; height: 390px; transform: translate(-50%, -50%);
	    border-radius: 50%; border: 2px solid rgba(201, 255, 254, 0.8);
	    box-shadow: 0 0 20px rgba(201, 255, 254, 0.6), inset 0 0 15px rgba(201, 255, 254, 0.3);
	    animation: magic-circle-spin-reverse 15s linear infinite; z-index: -1; pointer-events: none;
	}
	@keyframes magic-circle-spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
	@keyframes magic-circle-spin-reverse { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }

	/* 3. Les 8 Gardiens : Des hologrammes de cristal au lieu de fantômes sombres */
	.ghost-neko {
	    filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 183, 197, 0.8)) !important;
	    opacity: 0.9 !important;
	}
	.ghost-neko .head, .ghost-neko .arm-top-left, .ghost-neko .arm-top-right, 
	.ghost-neko .paw-left, .ghost-neko .paw-right, .ghost-neko .back-leg-left, 
	.ghost-neko .back-leg-right, .ghost-neko .ear-left-out, .ghost-neko .ear-right-out {
	    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 183, 197, 0.3) 100%) !important;
	    border-color: rgba(255, 255, 255, 0.8) !important;
	    box-shadow: inset 0px 0px 15px rgba(255, 255, 255, 0.9) !important;
	    backdrop-filter: blur(2px);
	}
	/* Leurs yeux brillent de couleurs pastel différentes (bleu, rose, jaune) */
	.ghost-guardian:nth-child(3n+1) .eye-left, .ghost-guardian:nth-child(3n+1) .eye-right { background: #ff99cc !important; box-shadow: 0 0 15px #ff99cc !important; }
	.ghost-guardian:nth-child(3n+2) .eye-left, .ghost-guardian:nth-child(3n+2) .eye-right { background: #99ccff !important; box-shadow: 0 0 15px #99ccff !important; }
	.ghost-guardian:nth-child(3n+3) .eye-left, .ghost-guardian:nth-child(3n+3) .eye-right { background: #ffff99 !important; box-shadow: 0 0 15px #ffff99 !important; }

	/* 4. L'Épée Kusanagi : Le Pilier de Lumière céleste */
	.kusanagi-throne::before {
	    content: ''; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
	    width: 120px; height: 500px; /* Le rayon descend jusqu'au Neko central */
	    background: linear-gradient(to bottom, rgba(201, 255, 254, 0.9) 0%, rgba(255, 183, 197, 0.4) 60%, transparent 100%);
	    filter: blur(15px); z-index: -1;
	    animation: beam-pulse 3s infinite alternate ease-in-out;
	}
	@keyframes beam-pulse {
	    0% { opacity: 0.6; width: 100px; }
	    100% { opacity: 1; width: 160px; }
	}

	/* =======================================================
	   PACK FINAL KAWAI-BANGER : KODAMAS MAGICAL GIRL V2
	   ======================================================= */

	/* 1. Taille & Espace : On réduit pour la finesse */
	.kd-container {
	    /* On les réduit d'environ 50% pour qu'ils fassent "petits esprits" */
	    transform: scale(0.35); /* pas de !important : le JS override individuel */
	    /* Aura multicouche : Cœur blanc intense + Halo Sakura diffus */
	    filter: drop-shadow(0 0 10px #ffffff) 
		    drop-shadow(0 0 30px rgba(255, 183, 197, 0.8)) !important;
	    animation: fade-k 1s forwards !important;
	    z-index: 10;
	}

	/* 2. Matière : Blanc Guimauve Pur (Fini le vert !) */
	.kodama-new-head, 
	.kodama-new-body, 
	.kodama-new-left-arm, 
	.kodama-new-right-arm {
	    background: #ffffff !important; /* Blanc pur laiteux */
	    border: none !important;
	    /* Volume glossy interne */
	    box-shadow: inset -10px -20px 30px rgba(255, 183, 197, 0.3), 
		        inset 10px 10px 20px rgba(255, 255, 255, 1) !important;
	}

	/* 3. Visage : Le Look "Puppy Dog Eyes" Banger */
	.kodama-new-left-eye, 
	.kodama-new-right-eye {
	    background: #3a0a1a !important; /* Bordeaux ultra-sombre (presque noir) */
	    width: 35px !important;  /* Yeux plus larges/ovales verticaux */
	    height: 50px !important;
	    border-radius: 50% !important;
	    top: 35% !important;
	    opacity: 1 !important;
	    overflow: visible !important; /* Pour laisser sortir les reflets */
	}

	/* Catch-lights (Les étincelles Sailor Moon dans les yeux) */
	.kodama-new-left-eye::before, 
	.kodama-new-right-eye::before {
	    content: ''; position: absolute;
	    top: 15%; left: 20%; width: 12px; height: 18px;
	    background: #ffffff; border-radius: 50%;
	}
	.kodama-new-left-eye::after, 
	.kodama-new-right-eye::after {
	    content: ''; position: absolute;
	    bottom: 15%; right: 25%; width: 7px; height: 7px;
	    background: #ffffff; border-radius: 50%;
	}

	/* 4. Blush : Joues hautes et colorées */
	.kodama-new-head::after {
	    content: '●   ●';
	    position: absolute;
	    top: 60%; left: 50%;
	    transform: translateX(-50%);
	    color: #ff69b4; /* Fuchsia vif mais doux */
	    font-size: 28px;
	    letter-spacing: 50px; /* Écartement précis sous les yeux */
	    filter: blur(4px);
	    opacity: 0.9;
	    z-index: 20;
	}

	/* 5. Fix de la découpe : On élargit le masque de scène */
	.miyazaki-scene {
	    /* On évite que les têtes soient coupées en haut */
	    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%) !important;
	    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%) !important;
	}

	/* On ajuste la tête pour qu'elle soit plus ronde/mignonne */
	.kodama-new-head {
	    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40% !important;
	    animation: rotate-kodama 6s infinite, kd-head-float 3.5s ease-in-out infinite alternate !important;
	}
	@keyframes kd-head-float { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
	
/* =======================================================
   V26 : L'ÉVEIL DE L'ENCRE (OPTIMISATION ÉLITE)
   Zéro Rouge - Morphing Liquide - Regard Ghibli
   ======================================================= */

/* 1. RESET GLOBAL & PERFORMANCE */
/* On nettoie tout d'un coup et on prépare le GPU */
.eclipse-core, .eclipse-pulse, .eclipse-pulse-deep, .eclipse-void, .eclipse-ring {
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    will-change: transform, filter; /* Optimisation GPU */
}

/* 2. LE MOTEUR DE FUSION (Metaball) */
.noface-container {
    position: relative;
    width: 100%; height: 450px;
    display: flex; justify-content: center; align-items: center;
    filter: contrast(25) brightness(1.1); /* Plus de contraste pour une fusion plus nette */
    z-index: 100;
}

/* 3. LE CORPS : Morphing de Goutte d'Encre */
.eclipse-void {
    position: absolute;
    width: 140px; height: 140px;
    background: #000 !important;
    filter: blur(12px); /* Blur augmenté pour une fusion plus organique */
    /* Animation combinée : Respiration + Morphing de forme */
    animation: ink-life 10s ease-in-out infinite alternate !important;
    display: block !important;
}

/* Texture de grain celluloïd optimisée */
.eclipse-void::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E") !important;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

/* 4. LES YEUX : Le Regard Perçant (Susuwatari Style) */
.eclipse-void::after {
    content: ''; position: absolute;
    top: 35%; left: 50%; transform: translateX(-50%);
    width: 90px; height: 35px;
    /* On crée deux yeux distincts avec un seul gradient pour la performance */
    background: 
        radial-gradient(circle at 25% 50%, #000 12%, transparent 15%), 
        radial-gradient(circle at 75% 50%, #000 12%, transparent 15%),
        #fff !important;
    /* Découpe chirurgicale des deux yeux */
    -webkit-mask-image: 
        radial-gradient(circle at 25% 50%, black 30%, transparent 32%), 
        radial-gradient(circle at 75% 50%, black 30%, transparent 32%);
    
    animation: ghibli-eyes 8s steps(1) infinite !important;
    filter: blur(0.4px) !important;
    z-index: 150 !important;
}

/* 5. L'INVASION : Les Satellites d'Ombre */
.eclipse-ring {
    position: absolute !important;
    width: 170px; height: 170px;
    box-shadow: 
        -110px -60px 25px #000, 
        120px 40px 35px #000, 
        30px 130px 45px #000 !important;
    filter: blur(15px);
    animation: swarm-orbit 30s linear infinite !important;
    display: block !important;
}

/* 6. LES ÉCLATS INTERNES (Givre Menthe) */
.eclipse-core::before {
    display: block !important;
    content: '✦'; color: #c1f0c1 !important;
    font-size: 12px;
    position: absolute; top: 50%; left: 50%;
    text-shadow: 20px -25px 3px #fff, -25px 25px 5px #c1f0c1 !important;
    animation: sparkle-vibration 4s ease-in-out infinite alternate !important;
    filter: blur(1px);
    z-index: 110 !important;
    opacity: 0.6;
}

/* --- ANIMATIONS OPTIMISÉES --- */

/* L'encre respire et change de forme (Morphing) */
@keyframes ink-life {
    0% { transform: scale(0.9) rotate(-2deg); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
    50% { border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%; } /* Morphing liquide */
    100% { transform: scale(1.1) rotate(2deg); border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; }
}

/* Clignement des yeux avec micro-vibration */
@keyframes ghibli-eyes {
    0%, 94%, 100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
    95% { opacity: 0; transform: translateX(-50%) scaleY(0); } /* Fermeture */
    97% { opacity: 1; transform: translateX(-50%) scaleY(1.1); } /* Réouverture nerveuse */
}

@keyframes sparkle-vibration {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
    100% { transform: translate(-45%, -55%) scale(1.1); opacity: 0.8; }
}

@keyframes swarm-orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════
   L'AUBE DE NACRE — Points 2-5 de la cinématique fin
   ═══════════════════════════════════════════════════ */

/* --- FISSURES DE LUMIÈRE MENTHE (Dissolution V26) --- */
.noface-container.dissolving .eclipse-void {
    animation: ink-fracture 3s ease forwards !important;
}
.noface-container.dissolving .eclipse-void::after {
    background: none !important;
    animation: none !important;
}
/* Fissures menthe qui déchirent l'encre */
.noface-container.dissolving::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 160px; height: 160px;
    background:
        linear-gradient(35deg, transparent 45%, #c1f0c1 47%, #c1f0c1 48%, transparent 50%),
        linear-gradient(155deg, transparent 42%, #e0fff0 44%, #e0fff0 46%, transparent 48%),
        linear-gradient(85deg, transparent 48%, #c1f0c1 49.5%, #c1f0c1 50.5%, transparent 52%),
        linear-gradient(120deg, transparent 44%, #e0fff0 46%, #e0fff0 47%, transparent 49%);
    opacity: 0;
    z-index: 200;
    filter: blur(1px);
    animation: fracture-appear 2s ease-in forwards;
    pointer-events: none;
}
@keyframes fracture-appear {
    0% { opacity: 0; filter: blur(4px); transform: translate(-50%, -50%) scale(0.5); }
    40% { opacity: 0.7; filter: blur(1px); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2); filter: blur(8px) brightness(3); }
}
@keyframes ink-fracture {
    0% { transform: scale(1); filter: blur(12px); }
    50% { transform: scale(1.1); filter: blur(8px) brightness(1.5); }
    100% { transform: scale(0); filter: blur(25px) brightness(5); opacity: 0; }
}
/* Musique coupée = l'Ombre se fige */
.noface-container.dissolving .eclipse-ring {
    animation: none !important;
    box-shadow: none !important;
    transition: all 2s ease;
    opacity: 0 !important;
}

/* --- CLIGNEMENT GHIBLI DU NEKO BLANC --- */
.divine-rise .eye-left,
.divine-rise .eye-right {
    animation: ghibli-neko-blink 6s steps(1) infinite !important;
}
@keyframes ghibli-neko-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    93% { transform: scaleY(0.05); }
    95% { transform: scaleY(1.15); }
    96% { transform: scaleY(1); }
}

/* --- ONDE DE CHOC ROSE DEPUIS LA CLOCHETTE --- */
.divine-rise .bell::after {
    content: ''; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0);
    width: 300px; height: 300px; border-radius: 50%;
    border: 2px solid rgba(255,183,197,0.5);
    box-shadow: 0 0 20px rgba(255,183,197,0.2);
    animation: bell-shockwave 4s ease-out infinite;
    pointer-events: none;
}
@keyframes bell-shockwave {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; border-width: 3px; }
    70% { opacity: 0.15; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; border-width: 0.5px; }
}

/* --- BALLET DES NOMS — ÉTOILES FILANTES --- */
.final-node.falling-star {
    opacity: 0 !important;
    transform: translateY(-300px) scale(0.5) !important;
    animation: star-fall 1.2s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards !important;
    text-shadow: 0 0 10px var(--sakura), 0 0 25px rgba(255,183,197,0.4);
}
@keyframes star-fall {
    0% { opacity: 0; transform: translateY(-300px) scale(0.3); filter: blur(5px); }
    30% { opacity: 0.5; filter: blur(2px); }
    70% { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Traînée dorée derrière chaque étoile */
.final-node.falling-star::before {
    content: '✦'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #ffd700;
    opacity: 0;
    animation: trail-sparkle 1.2s ease forwards;
}
@keyframes trail-sparkle {
    0% { opacity: 0; transform: translateX(-50%) translateY(-200px); }
    50% { opacity: 0.8; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* --- SCEAU BATTANT (bouton capture miroir) --- */
#btn-capture {
    animation: seal-heartbeat 2s ease-in-out infinite;
}
@keyframes seal-heartbeat {
    0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(255,215,0,0.15); }
    15% { transform: scale(1.06); box-shadow: 0 0 35px rgba(255,215,0,0.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.04); box-shadow: 0 0 30px rgba(255,215,0,0.25); }
}

/* --- DERNIER PÉTALE QUI TOMBE SUR LE BATEAU --- */
@keyframes last-petal-fall {
    0% { transform: translateX(0) rotate(0deg); top: -20px; opacity: 0.9; }
    25% { transform: translateX(30px) rotate(90deg); opacity: 0.8; }
    50% { transform: translateX(-20px) rotate(200deg); opacity: 0.7; }
    75% { transform: translateX(15px) rotate(300deg); opacity: 0.6; }
    100% { top: 65vh; transform: translateX(5px) rotate(380deg); opacity: 0; }
}

/* ═══════════════════════════════════════════
   OPTIMISATIONS KAWAII — Cinématique de fin
   ═══════════════════════════════════════════ */

/* --- 1. COUCOU DU NEKO (Maneki-neko qui agite la patte) --- */
.divine-rise .arm-top-right {
    animation: neko-coucou 0.8s ease-in-out infinite !important;
    transform-origin: top center;
}
.divine-rise .arm-top-right-tip {
    animation: neko-coucou-tip 0.8s ease-in-out infinite !important;
}
@keyframes neko-coucou {
    0%, 100% { transform: rotate(35deg); }
    50% { transform: rotate(-5deg); }
}
@keyframes neko-coucou-tip {
    0%, 100% { top: 175px; }
    50% { top: 130px; }
}

/* --- 3. PLUIE D'ÉTOILES DORÉES --- */

@keyframes star-rain-fall {
    0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.5); }
    10% { opacity: 0.8; }
    80% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(80vh) rotate(360deg) scale(0.3); }
}

/* --- 4. TEXTES SLIDE-UP (panache) --- */
#final-story-box {
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#screen-final #final-story-box {
    transform: translateY(0);
}

/* --- 6. CERTIFICAT KAWAII --- */

/* @keyframes cert-glow-pulse: deduped — kept later definition */

    100% { box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 40px rgba(255,183,197,0.25), 0 0 80px rgba(255,215,0,0.08); }
}
/* Pétales décoratifs aux coins */
.certificate::before {
    content: '🌸'; position: absolute; top: -12px; left: -12px;
    font-size: 22px; filter: drop-shadow(0 0 5px rgba(255,183,197,0.5));
    animation: cert-petal-spin 6s linear infinite;
}
.certificate::after {
    content: '🌸'; position: absolute; bottom: -12px; right: -12px;
    font-size: 22px; filter: drop-shadow(0 0 5px rgba(255,183,197,0.5));
    animation: cert-petal-spin 6s linear infinite reverse;
}
@keyframes cert-petal-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* --- 8. BOUTON MIROIR SCINTILLANT --- */
#btn-download {
    position: relative; overflow: visible;
}
#btn-download::before,
#btn-download::after {
    content: '✦'; position: absolute; font-size: 10px; color: #ffd700;
    pointer-events: none; opacity: 0.7;
}
#btn-download::before {
    animation: orbit-sparkle 3s linear infinite;
    top: 50%; left: -5px;
}
#btn-download::after {
    animation: orbit-sparkle 3s linear infinite reverse;
    top: 50%; right: -5px;
    animation-delay: -1.5s;
}
/* @keyframes orbit-sparkle: deduped — kept later definition */

    25% { transform: translate(15px, 0) scale(1.2); opacity: 0.9; }
    50% { transform: translate(0, 20px) scale(0.8); opacity: 0.3; }
    75% { transform: translate(-15px, 0) scale(1.2); opacity: 0.9; }
    100% { transform: translate(0, -20px) scale(0.8); opacity: 0.3; }
}

/* --- NEKO FAIT COUCOU (Maneki-neko wave) --- */
.divine-rise .arm-top-right {
    animation: maneki-wave 0.8s ease-in-out infinite !important;
    transform-origin: bottom center;
}
.divine-rise .arm-top-right-tip {
    animation: maneki-wave-tip 0.8s ease-in-out infinite !important;
}
/* @keyframes maneki-wave: deduped — kept later definition */

    50% { transform: rotate(-5deg); }
}
/* @keyframes maneki-wave-tip: deduped — kept later definition */

    50% { top: 130px; }
}

/* --- TEXTES SLIDE-UP PANACHE --- */
#final-story-box {
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#final-story-box.text-enter {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* --- PLUIE D'ÉTOILES DORÉES --- */
.victory-star {
    position: fixed;
    color: #ffd700;
    font-size: 14px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    animation: star-rain 3s ease-in forwards;
    text-shadow: 0 0 6px rgba(255,215,0,0.6);
}
/* @keyframes star-rain: deduped — kept later definition */

    15% { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(80vh) rotate(180deg); }
}

/* --- CERTIFICAT KAWAII --- */

.certificate::before {
    content: ''; position: absolute; inset: -4px;
    border-radius: 18px;
    background: linear-gradient(45deg, #ffb7c5, #ffd700, #ffb7c5, #ffd700);
    background-size: 300% 300%;
    animation: cert-shimmer 4s ease infinite;
    z-index: -1;
    filter: blur(3px);
    opacity: 0.6;
}
@keyframes cert-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- BOUTON MIROIR SCINTILLANT --- */
#btn-download {
    position: relative;
    overflow: visible;
}
#btn-download::before,
#btn-download::after {
    content: '✦'; position: absolute;
    font-size: 10px; color: #ffd700;
    pointer-events: none;
    animation: orbit-btn 3s linear infinite;
    filter: drop-shadow(0 0 3px #ffd700);
}
#btn-download::before {
    top: -8px; left: 50%;
}
#btn-download::after {
    bottom: -8px; right: 20%;
    animation-delay: -1.5s;
    animation-direction: reverse;
}
@keyframes orbit-btn {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); opacity: 0.4; }
    50% { opacity: 1; }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); opacity: 0.4; }
}

/* --- COUCOU MANEKI-NEKO (bras qui agite) --- */
.divine-rise .arm-top-right {
    animation: maneki-wave 0.8s ease-in-out infinite !important;
    transform-origin: top center;
}
.divine-rise .arm-top-right-tip {
    animation: maneki-wave-tip 0.8s ease-in-out infinite !important;
}
@keyframes maneki-wave {
    0%, 100% { transform: rotate(35deg); }
    50% { transform: rotate(-5deg); }
}
@keyframes maneki-wave-tip {
    0%, 100% { top: 175px; }
    50% { top: 140px; }
}

/* --- PLUIE D'ÉTOILES DORÉES --- */
.golden-star {
    position: fixed; pointer-events: none; z-index: 400;
    color: #ffd700; font-size: 14px;
    text-shadow: 0 0 6px rgba(255,215,0,0.6);
    opacity: 0;
    animation: star-rain 3s ease-in forwards;
}
@keyframes star-rain {
    0% { opacity: 0; transform: translateY(-20px) rotate(0deg) scale(0.5); }
    15% { opacity: 0.9; }
    80% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(80vh) rotate(180deg) scale(0.3); }
}

/* --- TEXTE SLIDE-UP PANACHE --- */
#final-story-box {
    transition: opacity 0.4s ease, transform 0.5s ease !important;
}
#final-story-box.text-enter {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* --- CERTIFICAT KAWAII GLOW --- */
.certificate {
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(255,183,197,0.15) !important;
    animation: cert-glow-pulse 3s ease-in-out infinite alternate;
}
@keyframes cert-glow-pulse {
    0% { box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 20px rgba(255,183,197,0.1); }
    100% { box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 40px rgba(255,183,197,0.25), 0 0 80px rgba(255,215,0,0.1); }
}
.certificate::before {
    content: '🌸'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    font-size: 24px; filter: drop-shadow(0 0 8px rgba(255,183,197,0.5));
    animation: cert-sakura-bob 2s ease-in-out infinite alternate;
}
@keyframes cert-sakura-bob {
    0% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    100% { transform: translateX(-50%) translateY(-5px) rotate(10deg); }
}

/* --- BOUTON MIROIR SCINTILLANT --- */
#btn-download {
    position: relative; overflow: visible;
}
#btn-download::before, #btn-download::after {
    content: '✦'; position: absolute; font-size: 10px; color: #ffd700;
    pointer-events: none; opacity: 0.7;
}
#btn-download::before {
    animation: orbit-sparkle 3s linear infinite;
    top: 50%; left: 50%;
}
#btn-download::after {
    animation: orbit-sparkle 3s linear infinite reverse;
    animation-delay: -1.5s;
    top: 50%; left: 50%;
}
@keyframes orbit-sparkle {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(70px) rotate(0deg); opacity: 0.4; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(70px) rotate(-360deg); opacity: 0.4; }
}

/* ═══════════════════════════════════════════
   GUMMY PAWS ULTIMATE — Serment Kawaii Pop
   ═══════════════════════════════════════════ */

.gummy-paw {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2.5px solid rgba(255,255,255,0.65);
    box-shadow:
        inset -6px -6px 16px rgba(0,0,0,0.18),
        inset 6px 6px 16px rgba(255,255,255,0.55),
        0 6px 18px rgba(0,0,0,0.28),
        0 0 15px var(--paw-color);
    cursor: pointer;
    z-index: 200;
    pointer-events: auto !important;
    touch-action: none !important;
    overflow: visible;
    animation: float-paw 3s ease-in-out infinite alternate, glow-pulse 2.5s ease-in-out infinite alternate;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Reflet glossy */
.gummy-paw::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 10px;
    width: 38px;
    height: 14px;
    background: rgba(255,255,255,0.72);
    border-radius: 50%;
    transform: rotate(-18deg);
    pointer-events: none;
    z-index: 3;
}

/* Luciole orbitale */
.paw-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255,255,255,0.9);
    pointer-events: none;
    z-index: 4;
    animation: orbit-spark 4s linear infinite;
    top: 50%; left: 50%;
    transform-origin: 42px 0;
}

@keyframes orbit-spark {
    0%   { transform: rotate(0deg) translateX(42px) scale(1); opacity: 0.9; }
    25%  { opacity: 0.4; }
    50%  { transform: rotate(180deg) translateX(42px) scale(0.7); opacity: 0.9; }
    75%  { opacity: 0.4; }
    100% { transform: rotate(360deg) translateX(42px) scale(1); opacity: 0.9; }
}

@keyframes float-paw {
    0%   { transform: translate(-50%, -50%) translateY(0) scale(1); }
    100% { transform: translate(-50%, -50%) translateY(-9px) scale(1.06); }
}

@keyframes glow-pulse {
    0%   { box-shadow: inset -6px -6px 16px rgba(0,0,0,0.18), inset 6px 6px 16px rgba(255,255,255,0.55), 0 6px 18px rgba(0,0,0,0.28), 0 0 10px var(--paw-color); }
    100% { box-shadow: inset -6px -6px 16px rgba(0,0,0,0.18), inset 6px 6px 16px rgba(255,255,255,0.55), 0 6px 18px rgba(0,0,0,0.28), 0 0 28px var(--paw-color), 0 0 50px var(--paw-color); }
}

/* État : maintien en cours */
.gummy-paw.holding {
    animation: hold-shake 0.12s ease-in-out infinite;
    transform: translate(-50%, -50%) scale(0.88) translateY(5px) !important;
    filter: brightness(1.3) drop-shadow(0 0 18px var(--paw-color));
}

@keyframes hold-shake {
    0%   { transform: translate(calc(-50% - 2px), -50%) scale(0.88) translateY(5px); }
    50%  { transform: translate(calc(-50% + 2px), -50%) scale(0.88) translateY(5px); }
    100% { transform: translate(calc(-50% - 2px), -50%) scale(0.88) translateY(5px); }
}

/* Anneau de charge SVG */
.paw-charge-ring {
    position: absolute;
    top: -15px; left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gummy-paw.holding .paw-charge-ring { opacity: 1; }
.charge-arc { transition: stroke-dashoffset 2s linear; }

/* État : cristallisé */
.gummy-paw.locked {
    animation: locked-pulse 0.8s ease-in-out infinite alternate !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
    background: #ffffff !important;
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow:
        0 0 20px var(--paw-color),
        0 0 45px var(--paw-color),
        0 0 80px var(--paw-color),
        inset 0 0 25px var(--paw-color) !important;
}
.gummy-paw.locked::before { display: none; }
.gummy-paw.locked .paw-spark { animation: orbit-spark 1.5s linear infinite; }

@keyframes locked-pulse {
    0%   { box-shadow: 0 0 20px var(--paw-color), 0 0 45px var(--paw-color), inset 0 0 20px var(--paw-color); }
    100% { box-shadow: 0 0 30px var(--paw-color), 0 0 70px var(--paw-color), 0 0 100px var(--paw-color), inset 0 0 30px var(--paw-color); }
}

/* Lasers */
.laser-beam {
    position: absolute;
    height: 5px;
    border-radius: 3px;
    transform-origin: left center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255,183,197,0.8), 0 0 22px rgba(255,215,0,0.5);
    animation: laser-fire 0.4s ease-out forwards;
    width: 0;
}
@keyframes laser-fire {
    0%   { width: 0; opacity: 0; }
    100% { width: var(--length); opacity: 1; }
}
.laser-beam.super-blast {
    animation: beam-blast 0.6s ease-in forwards;
}
@keyframes beam-blast {
    0%   { height: 5px; filter: brightness(1); opacity: 1; }
    60%  { height: 28px; filter: brightness(4); }
    100% { height: 40px; filter: brightness(6); box-shadow: 0 0 60px #fff; opacity: 0; }
}

/* Particules laser */
.laser-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pcolor, #fff);
    box-shadow: 0 0 8px 3px var(--pcolor, #fff);
    transform-origin: left center;
    pointer-events: none;
    z-index: 11;
    animation: laser-travel 1.2s linear infinite;
    opacity: 0;
}
@keyframes laser-travel {
    0%   { width: 0; opacity: 0; transform: translateY(-50%) rotate(0deg) translateX(0); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50%) translateX(var(--length)); }
}

/* Supernova */
.supernova-wave {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    pointer-events: none;
    opacity: 0.85;
    animation: nova-expand 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    filter: blur(2px);
}
@keyframes nova-expand {
    0%   { width: 0; height: 0; opacity: 0.9; filter: blur(0px); }
    40%  { opacity: 0.7; filter: blur(4px); }
    100% { width: 280vw; height: 280vw; opacity: 0; filter: blur(20px); }
}

/* touch-count transition */
#touch-count {
    transition: transform 0.3s cubic-bezier(0.17,0.89,0.32,1.49), color 0.5s ease;
    display: inline-block;
}