/* ── Base ── */
.cos-pp{position:relative;flex-shrink:0;border-radius:8px;background:#1a1a1a;border:2px solid var(--cos-primary,#a855f7);display:flex;align-items:center;justify-content:center;font-family:'Orbitron','Arial Black',sans-serif;color:var(--cos-primary,#a855f7);font-weight:700;text-transform:uppercase;}
.cos-pp img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;position:relative;z-index:0;}
.cos-name{font-family:'Orbitron','Arial Black',sans-serif;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:2px;line-height:1.3;}
.cos-plate{display:inline-flex;align-items:center;border-radius:4px;position:relative;max-width:100%;}
.cos-banner{position:absolute;inset:0;pointer-events:none;}

@property --cos-holo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cosSpin { to { --cos-holo-a: 360deg; } }
@keyframes cosSpinBack { to { --cos-holo-a: -360deg; } }
@keyframes cosSlide { to { background-position: 300% 0; } }
@keyframes cosEclat { 0% { background-position: 120% 0; } 55%, 100% { background-position: -130% 0; } }

/* ── Cadres de PP ── */
.cos-f-acier{border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(160deg,#5a5f6a,#c9ced8 35%,#7a8090 55%,#dfe3ea 75%,#5a5f6a) border-box;box-shadow:0 0 10px #c9ced822;}
.cos-f-double{--c:var(--tint,var(--cos-primary,#a855f7));border-color:var(--c);box-shadow:0 0 0 3px var(--cos-bg,#04050a),0 0 0 5px color-mix(in srgb,var(--c) 45%,transparent);}
.cos-f-neon{--c:var(--tint,var(--cos-primary,#a855f7));border-color:var(--c);animation:cosNeonPulse 2.2s ease-in-out infinite;}
@keyframes cosNeonPulse{0%,100%{box-shadow:0 0 8px color-mix(in srgb,var(--c) 35%,transparent);}50%{box-shadow:0 0 24px color-mix(in srgb,var(--c) 75%,transparent),0 0 46px color-mix(in srgb,var(--c) 30%,transparent);}}
.cos-f-or{border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(140deg,#8a6a1e,#ffd76a 30%,#fff3c4 50%,#ffd76a 70%,#8a6a1e) border-box;box-shadow:0 0 16px #ffd76a2e;color:#ffd76a;}
.cos-f-holo{border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,conic-gradient(from var(--cos-holo-a),#26f0e0,#6a8dff,#c86aff,#ff6ad5,#ffd76a,#26f0e0) border-box;animation:cosSpin 3.5s linear infinite;box-shadow:0 0 18px #6a8dff33;}
.cos-f-glitch{border-color:#d8d8e0;animation:cosFrameGlitch 2.8s steps(1) infinite;}
@keyframes cosFrameGlitch{0%,78%{box-shadow:0 0 0 transparent;transform:translate(0);}80%{box-shadow:-3px 0 0 #0ff9,3px 0 0 #f0f9;transform:translate(1px,0);}83%{box-shadow:3px 0 0 #0ff9,-3px 0 0 #f0f9;transform:translate(-1px,1px);}86%{box-shadow:-2px 2px 0 #0ff9,2px -2px 0 #f0f9;transform:translate(0,-1px);}89%{box-shadow:0 0 0 transparent;transform:translate(0);}94%{box-shadow:2px 0 0 #f0f9,-2px 0 0 #0ff9;transform:translate(-1px,0);}96%{box-shadow:0 0 0 transparent;transform:translate(0);}}
.cos-f-braise{--c:var(--tint,#ff6a2a);border-color:var(--c);animation:cosBraise 1.6s ease-in-out infinite;}
@keyframes cosBraise{0%,100%{box-shadow:0 6px 18px -4px color-mix(in srgb,var(--c) 60%,transparent),0 2px 30px -6px color-mix(in srgb,var(--c) 40%,transparent),inset 0 -10px 16px -12px color-mix(in srgb,var(--c) 80%,transparent);}50%{box-shadow:0 8px 26px -4px color-mix(in srgb,var(--c) 80%,transparent),0 4px 44px -6px color-mix(in srgb,var(--c) 55%,transparent),inset 0 -14px 20px -12px color-mix(in srgb,var(--c) 60%,#fff);}}
.cos-f-tactique{--c:var(--tint,var(--cos-primary,#a855f7));border-style:dashed;border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:none;}
.cos-f-tactique::before,.cos-f-tactique::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none;z-index:2;}
.cos-f-tactique::before{top:-4px;left:-4px;border-top:3px solid var(--c);border-left:3px solid var(--c);}
.cos-f-tactique::after{bottom:-4px;right:-4px;border-bottom:3px solid var(--c);border-right:3px solid var(--c);}
.cos-f-sentinelle{--c:var(--tint,#26c9f0);border-color:var(--c);overflow:hidden;box-shadow:0 0 14px color-mix(in srgb,var(--c) 20%,transparent);}
.cos-f-sentinelle::before{content:'';position:absolute;left:0;right:0;height:34%;top:-34%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 27%,transparent) 55%,color-mix(in srgb,var(--c) 73%,transparent));animation:cosScanline 2.4s linear infinite;z-index:1;pointer-events:none;}
@keyframes cosScanline{to{top:134%;}}
.cos-f-radar{--c:var(--tint,#59f07a);border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 20%,transparent);}
.cos-f-radar::before{content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;z-index:1;background:conic-gradient(from var(--cos-holo-a),transparent 0deg,transparent 295deg,color-mix(in srgb,var(--c) 7%,transparent) 315deg,color-mix(in srgb,var(--c) 33%,transparent) 350deg,color-mix(in srgb,var(--c) 80%,transparent) 360deg);animation:cosSpin 2.6s linear infinite;}
.cos-f-orage{--c:var(--tint,#7fd4ff);border-color:var(--c);animation:cosOrage 3.4s steps(1) infinite;}
@keyframes cosOrage{0%,55%{box-shadow:0 0 10px color-mix(in srgb,var(--c) 27%,transparent);}57%{box-shadow:0 0 22px color-mix(in srgb,var(--c) 60%,#fff),0 0 40px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 33%,transparent);}59%{box-shadow:0 0 8px color-mix(in srgb,var(--c) 20%,transparent);}62%{box-shadow:0 0 26px #ffffffcc,0 0 50px color-mix(in srgb,var(--c) 80%,transparent);}64%,76%{box-shadow:0 0 10px color-mix(in srgb,var(--c) 27%,transparent);}78%{box-shadow:0 0 18px color-mix(in srgb,var(--c) 70%,#fff),inset 0 0 10px color-mix(in srgb,var(--c) 27%,transparent);}80%{box-shadow:0 0 10px color-mix(in srgb,var(--c) 27%,transparent);}}
.cos-f-vortex{border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,conic-gradient(from var(--cos-holo-a),#ff4d4d,#ffd76a,#ff4d4d,#ffd76a,#ff4d4d) border-box;animation:cosSpinBack 1.2s linear infinite;box-shadow:0 0 22px #ff4d4d44;}
.cos-f-prisme{border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(120deg,#ff4d4d,#ffd76a,#59f07a,#26c9f0,#b26cff,#ff4d4d) border-box;animation:cosPrisme 5s linear infinite;}
@keyframes cosPrisme{to{filter:hue-rotate(360deg);}}

/* ── Styles de nom ── */
.cos-n-couleur{--c:var(--tint,var(--cos-primary,#a855f7));color:var(--c);}
.cos-n-toxique{--c:var(--tint,#59f07a);color:var(--c);}
.cos-n-ombre{--c:var(--tint,var(--cos-primary,#a855f7));color:#fff;text-shadow:3px 3px 0 #000,4px 4px 0 color-mix(in srgb,var(--c) 70%,transparent);}
.cos-n-givre{--c:var(--tint,#8fdcff);background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 75%,#fff) 55%,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 27%,transparent));}
.cos-n-or{background:linear-gradient(120deg,#8a6a1e,#ffd76a 35%,#fff3c4 50%,#ffd76a 65%,#8a6a1e);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cos-n-chrome{background:linear-gradient(180deg,#fdfdfe 15%,#b8bcc8 45%,#6d7280 50%,#d4d8e2 55%,#f4f5f8 90%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cos-n-feu{background:linear-gradient(0deg,#ff3d00,#ff9800 45%,#ffd76a 75%,#fff3c4);background-size:100% 220%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cosFeu 1.1s ease-in-out infinite alternate;filter:drop-shadow(0 2px 6px #ff6a2a55);}
@keyframes cosFeu{from{background-position:0 0;}to{background-position:0 55%;}}
.cos-n-nebula{background:linear-gradient(90deg,#26c9f0,#b26cff,#ff6ad5,#26c9f0);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cosSlide 4s linear infinite;}
.cos-n-spectre{background:linear-gradient(90deg,#ff4d4d,#ffd76a,#59f07a,#26c9f0,#b26cff,#ff4d4d);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cosSlide 3s linear infinite;}
.cos-n-eclat{background:linear-gradient(110deg,#fff 40%,#ffd76a 50%,#fff 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cosEclat 3.2s ease-in-out infinite;}
.cos-n-neon{--c:var(--tint,var(--cos-primary,#a855f7));color:#fff;text-shadow:0 0 6px var(--c),0 0 18px color-mix(in srgb,var(--c) 60%,transparent);}

/* ── Corrompu ── Le pseudo est recopié dans data-glitch (voir PlayerName) : les
   deux pseudo-éléments en sont des CLONES, décalés et découpés en tranches.
   C'est ce qui fait la différence avec un simple text-shadow — la corruption
   déchire vraiment le mot au lieu de le doubler en bloc.
   Les deux couches tournent sur des périodes premières entre elles (3,1 s et
   3,7 s) : elles ne retombent jamais en phase, donc rien ne se répète à l'œil.
   Au repos, la frange cyan/magenta reste — le nom n'est JAMAIS propre, même
   entre deux rafales. C'est ça, un nom corrompu. */
.cos-n-glitch{position:relative;display:inline-block;color:#fff;text-shadow:0 0 14px #ffffff24;animation:cosGlitchBody 6.1s steps(1) infinite;}
.cos-n-glitch::before,.cos-n-glitch::after{content:attr(data-glitch);position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:screen;}
.cos-n-glitch::before{color:#00e9ff;animation:cosGlitchCyan 3.1s steps(1) infinite;}
.cos-n-glitch::after{color:#ff2d95;animation:cosGlitchMag 3.7s steps(1) infinite;}
@keyframes cosGlitchBody{0%,74%{transform:none;opacity:1;}75%{transform:translate(-2px,1px) skewX(-7deg);opacity:.86;}76%{transform:translate(2px,-1px) skewX(6deg);}77%{transform:none;opacity:1;}92%{transform:translate(1px,0) skewX(-3deg);opacity:.9;}93%{transform:none;opacity:1;}}
@keyframes cosGlitchCyan{0%,33%{clip-path:inset(0);transform:translateX(-2px);}35%{clip-path:inset(10% 0 64% 0);transform:translateX(-8px);}37%{clip-path:inset(70% 0 6% 0);transform:translateX(6px);}39%{clip-path:inset(36% 0 46% 0);transform:translateX(-5px);}41%{clip-path:inset(0);transform:translateX(-2px);}74%{clip-path:inset(52% 0 24% 0);transform:translateX(7px);}76%{clip-path:inset(16% 0 60% 0);transform:translateX(-6px);}78%{clip-path:inset(0);transform:translateX(-2px);}}
@keyframes cosGlitchMag{0%,26%{clip-path:inset(0);transform:translateX(2px);}28%{clip-path:inset(58% 0 18% 0);transform:translateX(8px);}30%{clip-path:inset(22% 0 58% 0);transform:translateX(-7px);}32%{clip-path:inset(0);transform:translateX(2px);}61%{clip-path:inset(4% 0 72% 0);transform:translateX(5px);}63%{clip-path:inset(66% 0 10% 0);transform:translateX(-6px);}65%{clip-path:inset(0);transform:translateX(2px);}88%{clip-path:inset(40% 0 38% 0);transform:translateX(6px);}90%{clip-path:inset(0);transform:translateX(2px);}}

/* ── Corrompu · Système (pièce unique) ── Le même moteur, poussé : la matière du
   nom est un dégradé matrice zébré de scanlines (le dégradé est découpé par le
   texte lui-même), les tranches sont deux fois plus fréquentes et vont plus
   loin, et le tout papillote. */
.cos-n-glitchx{position:relative;display:inline-block;color:transparent;background:repeating-linear-gradient(0deg,#00000059 0 2px,transparent 2px 4px),linear-gradient(180deg,#fff 0%,#d8ffe9 32%,#3dff8a 62%,#0d6c3c 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px #3dff8a5c) drop-shadow(0 0 18px #3dff8a2e);animation:cosGxBody 5.9s steps(1) infinite;}
.cos-n-glitchx::before,.cos-n-glitchx::after{content:attr(data-glitch);position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:screen;}
.cos-n-glitchx::before{color:#00fff0;animation:cosGxCyan 2.3s steps(1) infinite;}
.cos-n-glitchx::after{color:#ff2d95;animation:cosGxMag 3.1s steps(1) infinite;}
@keyframes cosGxBody{0%,40%{transform:none;opacity:1;}41%{transform:translate(-3px,1px) skewX(-9deg);opacity:.7;}42%{transform:translate(3px,-1px) skewX(8deg);}43%{transform:none;opacity:1;}59%{transform:translateY(-1px) scaleY(1.07);opacity:.85;}60%{transform:none;opacity:1;}77%{opacity:.5;}78%{opacity:1;}79%{opacity:.72;transform:translateX(-2px);}80%{transform:none;opacity:1;}93%{transform:skewX(-5deg);opacity:.8;}94%{transform:none;opacity:1;}}
@keyframes cosGxCyan{0%,33%{clip-path:inset(0);transform:translateX(-1px);}35%{clip-path:inset(6% 0 70% 0);transform:translateX(-9px);}37%{clip-path:inset(74% 0 4% 0);transform:translateX(7px);}39%{clip-path:inset(30% 0 48% 0);transform:translateX(-5px);}41%{clip-path:inset(0);transform:translateX(-1px);}72%{clip-path:inset(48% 0 28% 0);transform:translateX(8px);}74%{clip-path:inset(14% 0 66% 0);transform:translateX(-6px);}76%{clip-path:inset(0);transform:translateX(-1px);}}
@keyframes cosGxMag{0%,26%{clip-path:inset(0);transform:translateX(1px);}28%{clip-path:inset(62% 0 12% 0);transform:translateX(9px);}30%{clip-path:inset(18% 0 62% 0);transform:translateX(-7px);}32%{clip-path:inset(0);transform:translateX(1px);}55%{clip-path:inset(40% 0 40% 0);transform:translateX(6px);}57%{clip-path:inset(0);transform:translateX(1px);}86%{clip-path:inset(80% 0 2% 0);transform:translateX(-8px);}88%{clip-path:inset(2% 0 80% 0);transform:translateX(5px);}90%{clip-path:inset(0);transform:translateX(1px);}}

/* ── Plaques de nom ── */
.cos-p-plaque{background:#000000b8;border:1px solid #2a2a2a;padding:3px 12px;}
.cos-p-carbone{background:repeating-linear-gradient(45deg,#101014 0 4px,#1d1d24 4px 8px);border:1px solid #3a3a44;padding:3px 12px;}
.cos-p-degrade{--c:var(--tint,var(--cos-primary,#a855f7));background:linear-gradient(90deg,color-mix(in srgb,var(--c) 28%,transparent),transparent 85%);border-left:3px solid var(--c);padding:3px 14px 3px 10px;border-radius:2px;}
/* Noir franc à gauche, qui se dissout vers la droite : la plaque tient le nom
   sans jamais l'encadrer. Pas de teinte — c'est du noir, c'est tout. */
.cos-p-noir{background:linear-gradient(100deg,#000000f2 0%,#0a0a0fef 36%,#15151ccc 66%,#15151c00 100%);border:1px solid #ffffff12;border-left:2px solid #ffffff33;padding:3px 18px 3px 11px;border-radius:3px;box-shadow:inset 0 1px 0 #ffffff0f,0 3px 12px #00000080;}
.cos-p-scan{background:repeating-linear-gradient(0deg,#000000c9 0 2px,#14141ac9 2px 4px);border:1px solid #3a3a44;padding:3px 12px;}
.cos-p-pulse{--c:var(--tint,var(--cos-primary,#a855f7));background:#000000b8;border:1px solid var(--c);padding:3px 12px;animation:cosPlatePulse 2s ease-in-out infinite;}
@keyframes cosPlatePulse{0%,100%{box-shadow:0 0 4px color-mix(in srgb,var(--c) 30%,transparent);}50%{box-shadow:0 0 16px color-mix(in srgb,var(--c) 80%,transparent);}}
.cos-p-danger{background:#000000b8;border-top:2px solid transparent;border-bottom:2px solid transparent;border-image:repeating-linear-gradient(45deg,#ffd76a 0 6px,#000 6px 12px) 2;padding:3px 12px;}
.cos-p-lave{background:linear-gradient(90deg,#2a0b06,#7a1c08,#c2410c,#7a1c08,#2a0b06);background-size:250% 100%;animation:cosSlide 4s linear infinite;border:1px solid #ff6a2a66;padding:3px 12px;}
.cos-p-holo{background:linear-gradient(100deg,#26c9f01f,#b26cff1f,#ff6ad51f);border:1px solid #6a8dff55;padding:3px 12px;}

/* ── Bannières (dossier + ligne leaderboard) ── */
.cos-b-rayures{--c:var(--tint,var(--cos-primary,#a855f7));background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 17%,transparent) 0 12px,transparent 12px 24px);}
.cos-b-grille{--c:var(--tint,var(--cos-primary,#a855f7));background-image:linear-gradient(color-mix(in srgb,var(--c) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent) 1px,transparent 1px);background-size:22px 22px;box-shadow:inset 0 0 26px color-mix(in srgb,var(--c) 10%,transparent);}
.cos-b-losanges{--c:var(--tint,var(--cos-primary,#a855f7));background-image:repeating-linear-gradient(60deg,transparent 0 22px,color-mix(in srgb,var(--c) 13%,transparent) 22px 23px),repeating-linear-gradient(-60deg,transparent 0 22px,color-mix(in srgb,var(--c) 13%,transparent) 22px 23px);}
.cos-b-carbone{background:repeating-linear-gradient(45deg,#17171d 0 5px,#23232c 5px 10px),repeating-linear-gradient(-45deg,transparent 0 5px,#0a0a0e66 5px 10px);background-color:#17171d;}
.cos-b-camo{background:radial-gradient(ellipse 60px 30px at 12% 35%,#262e23 60%,transparent 61%),radial-gradient(ellipse 78px 36px at 40% 72%,#1a201a 60%,transparent 61%),radial-gradient(ellipse 68px 32px at 66% 25%,#2a3226 60%,transparent 61%),radial-gradient(ellipse 58px 28px at 90% 62%,#202721 60%,transparent 61%),#141811;}
.cos-b-circuit{--c:var(--tint,#26c9f0);background-image:repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--c) 10%,transparent) 38px 40px),repeating-linear-gradient(0deg,transparent 0 30px,color-mix(in srgb,var(--c) 8%,transparent) 30px 32px),radial-gradient(circle 3px at 40px 32px,color-mix(in srgb,var(--c) 40%,transparent) 98%,transparent),radial-gradient(circle 3px at 118px 64px,color-mix(in srgb,var(--c) 30%,transparent) 98%,transparent);}
.cos-b-flux{--c:var(--tint,var(--cos-primary,#a855f7));background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--c) 45%,transparent) 50%,transparent 75%);background-size:300% 100%;animation:cosEclat 2.4s linear infinite;}
.cos-b-lave{background:linear-gradient(90deg,#1a0602,#6a1804,#ff6a2a,#ffd76a,#ff6a2a,#6a1804,#1a0602);background-size:300% 100%;animation:cosSlide 5s linear infinite;}
.cos-b-etoiles{background-image:radial-gradient(circle 1.2px at 12% 30%,#fff8 98%,transparent),radial-gradient(circle 1px at 28% 68%,#fff5 98%,transparent),radial-gradient(circle 1.4px at 45% 22%,#ffda 98%,transparent),radial-gradient(circle 1px at 58% 55%,#fff6 98%,transparent),radial-gradient(circle 1.6px at 72% 35%,#fffb 98%,transparent),radial-gradient(circle 1px at 84% 70%,#fff5 98%,transparent),radial-gradient(circle 1.2px at 93% 25%,#fff8 98%,transparent),linear-gradient(180deg,#0d1024,#0a0a12);animation:cosScintille 3s ease-in-out infinite alternate;}
@keyframes cosScintille{from{opacity:0.55;}to{opacity:0.9;}}
.cos-b-royal{background:repeating-linear-gradient(45deg,#ffd76a12 0 10px,transparent 10px 20px),linear-gradient(90deg,#3a2c08,#8a6a1e 30%,#b98f2e 50%,#8a6a1e 70%,#3a2c08);}
.cos-b-royal::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,#fff3c455 50%,transparent 60%);background-size:250% 100%;animation:cosEclat 2.8s ease-in-out infinite;}

/* ── Sous tension : base CSS + halo (les arcs viennent de <ElectricOverlay/>) ── */
.cos-f-tension{--c:var(--tint,#5ad8ff);border-color:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 32%,transparent);}
.cos-p-tension{--c:var(--tint,#5ad8ff);background:#000000b8;border:1px solid var(--c);padding:3px 12px;overflow:hidden;}
.cos-b-tension{--c:var(--tint,#5ad8ff);background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--c) 12%,transparent),transparent 72%);}

/* ── Pluie de billets : liseré fin doré + fond discret (les billets viennent de <MoneyRainOverlay/>) ── */
.cos-f-billets{--c:var(--tint,#e7c877);border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--c) 55%,#000),var(--c) 50%,color-mix(in srgb,var(--c) 55%,#000)) border-box;box-shadow:0 0 8px color-mix(in srgb,var(--c) 25%,transparent);}
.cos-p-billets{--c:var(--tint,#e7c877);background:#000000b8;border:1px solid color-mix(in srgb,var(--c) 70%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-billets{--c:var(--tint,#3fa96b);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--c) 12%,transparent),transparent 72%);}

/* ── Effets à moteur : base CSS SOBRE (liseré + halo), l'effet vient du calque
      monté par <CosmeticFx/>. Aurore / Brume / Or liquide = shaders WebGL,
      Matrice = pluie de glyphes canvas, Intrusion = terminal canvas (bannière
      seulement — un terminal dans une vignette ne dit rien). ── */
.cos-f-aurore{--c:var(--tint,#59f0b0);border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,#000),color-mix(in srgb,var(--c) 90%,#fff) 55%,color-mix(in srgb,var(--c) 45%,#000)) border-box;box-shadow:0 0 10px color-mix(in srgb,var(--c) 26%,transparent);}
.cos-p-aurore{--c:var(--tint,#59f0b0);background:#000000b8;border:1px solid color-mix(in srgb,var(--c) 60%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-aurore{--c:var(--tint,#59f0b0);background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--c) 12%,transparent),transparent 72%);}

.cos-f-brume{--c:var(--tint,#8f7dff);border-color:color-mix(in srgb,var(--c) 70%,#000);box-shadow:0 0 12px color-mix(in srgb,var(--c) 22%,transparent);}
.cos-p-brume{--c:var(--tint,#8f7dff);background:#000000b8;border:1px solid color-mix(in srgb,var(--c) 55%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-brume{--c:var(--tint,#8f7dff);background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--c) 14%,transparent),transparent 68%);}

.cos-f-orliquide{--c:var(--tint,#ffc94d);border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--c) 40%,#000),color-mix(in srgb,var(--c) 95%,#fff) 50%,color-mix(in srgb,var(--c) 40%,#000)) border-box;box-shadow:0 0 14px color-mix(in srgb,var(--c) 30%,transparent);}
.cos-p-orliquide{--c:var(--tint,#ffc94d);background:#000000b8;border:1px solid color-mix(in srgb,var(--c) 65%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-orliquide{--c:var(--tint,#ffc94d);background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%);}

.cos-f-matrix{--c:var(--tint,#59f07a);border-color:color-mix(in srgb,var(--c) 75%,#000);box-shadow:0 0 10px color-mix(in srgb,var(--c) 24%,transparent);}
.cos-p-matrix{--c:var(--tint,#59f07a);background:#000000c4;border:1px solid color-mix(in srgb,var(--c) 55%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-matrix{--c:var(--tint,#59f07a);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 65%);}

.cos-b-intrusion{--c:var(--tint,#26c9f0);background:#03060ab8;box-shadow:inset 0 0 24px color-mix(in srgb,var(--c) 10%,transparent);}

/* ── Corruption (pièce unique) ── Le fond : une salle noire, verte au sol, déjà
   zébrée. Ce qui la peuple (brume verte, matrice, déchirures) est une PILE de
   trois moteurs — voir FX_STACK. */
.cos-b-corruption{--c:#3dff8a;background:linear-gradient(180deg,#04160cd9,#020a06b3 55%,#000000d9),repeating-linear-gradient(0deg,#0000004d 0 2px,transparent 2px 4px);box-shadow:inset 0 0 46px #3dff8a1f,inset 0 0 0 1px #3dff8a1a;}

/* Le cadre : liseré NET (les déchirures du signal ont besoin de contraste pour
   avoir quelque chose à déchirer), et la photo elle-même se corrompt — elle
   saute, se dédouble en rouge/cyan et déteint en vert par à-coups. Les tranches
   du moteur de signal, par-dessus, la décalent pour de vrai. */
.cos-f-corruption{--c:#3dff8a;border-color:var(--c);background:#04160c;overflow:hidden;box-shadow:0 0 0 1px #000,0 0 14px #3dff8a3d;}
.cos-f-corruption img{animation:cosCorruptPhoto 5.3s steps(1) infinite;}
/* Image arrêtée (budget des effets animés, ligne 51) : la photo ne glitche plus
   quand la matrice et le signal du cadre sont figés. */
.cos-f-corruption:has([data-fx-state="still"]) img{animation:none;}
@keyframes cosCorruptPhoto{0%,58%{transform:none;filter:none;}59%{transform:translateX(-3px);filter:saturate(1.5) drop-shadow(2px 0 #ff2d95b3) drop-shadow(-2px 0 #00e9ffb3);}61%{transform:translateX(3px) scaleY(1.04);filter:contrast(1.35) drop-shadow(-3px 0 #00e9ffcc);}62%{transform:none;filter:none;}84%{transform:translateY(1px);filter:brightness(1.2) hue-rotate(72deg) saturate(1.4);}85%{transform:none;filter:none;}95%{transform:translateX(2px);filter:drop-shadow(-2px 0 #3dff8acc);}96%{transform:none;filter:none;}}

/* ── Perte de signal : un liseré NET (le contraste est ce qui rend la déchirure
      lisible — un cadre flou n'a rien à déchirer). Les rafales et le grain
      viennent de <SignalOverlay/>. ── */
.cos-f-signal{--c:var(--tint,#26c9f0);border-color:var(--c);box-shadow:0 0 0 1px #000,0 0 12px color-mix(in srgb,var(--c) 28%,transparent);}
.cos-p-signal{--c:var(--tint,#26c9f0);background:#000000c4;border:1px solid color-mix(in srgb,var(--c) 65%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-signal{--c:var(--tint,#26c9f0);background:repeating-linear-gradient(0deg,#00000038 0 2px,transparent 2px 4px),radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%);}

/* ── Sakura : liseré fin rose + halo floral (branche + pétales viennent de <SakuraOverlay/>) ── */
.cos-f-sakura{--c:var(--tint,#ff9ec7);border-color:transparent;background:linear-gradient(#1a1a1a,#1a1a1a) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--c) 50%,#000),color-mix(in srgb,var(--c) 86%,#fff) 55%,color-mix(in srgb,var(--c) 50%,#000)) border-box;box-shadow:0 0 9px color-mix(in srgb,var(--c) 26%,transparent);}
.cos-p-sakura{--c:var(--tint,#ff9ec7);background:#000000b8;border:1px solid color-mix(in srgb,var(--c) 60%,#000);padding:3px 12px;overflow:hidden;}
.cos-b-sakura{--c:var(--tint,#ff9ec7);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--c) 13%,transparent),transparent 72%);}

@media (prefers-reduced-motion: reduce) {
  [class*="cos-f-"],[class*="cos-n-"],[class*="cos-p-"],[class*="cos-b-"],
  [class*="cos-f-"]::before,[class*="cos-b-"]::before,
  [class*="cos-n-"]::before,[class*="cos-n-"]::after,
  [class*="cos-f-"] img{animation:none !important;}
}