/* cosmetics.css — badges, cadres d'avatar et section « Collection » (scripts/cosmetics.js). */

/* Pastilles de badges à côté d'un pseudo : icône seule, nom au survol (title). */
.wc-badges { display: inline-flex; gap: 3px; margin-inline-start: 4px; vertical-align: middle; }
.wc-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #ffb36b;
}
.wc-badge svg { width: 13px; height: 13px; }
.wc-badge.rarity-uncommon { color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.wc-badge.rarity-rare { color: #60a5fa; border-color: rgba(96, 165, 250, .4); }
.wc-badge.rarity-secret { color: #c7d2fe; border-color: rgba(199, 210, 254, .5); }
/* Premium : seul badge qui affiche son nom, c'est l'information que le support doit voir d'un coup d'œil. */
.wc-badge.rarity-premium { width: auto; gap: 3px; padding: 0 6px 0 4px; color: #e9d5ff; border-color: rgba(192, 132, 252, .6); background: linear-gradient(135deg, rgba(168, 85, 247, .28), rgba(236, 72, 153, .18)); }
.wc-badge-label { font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.wc-badge.rarity-legendary, .wc-badge.rarity-unique { color: #ffd166; border-color: rgba(255, 209, 102, .6); background: rgba(255, 209, 102, .1); }

/* Cadres d'avatar : un <span data-frame> autour de l'<img> (une image n'a pas de pseudo-éléments).
   Même rendu partout : communauté, Collection et navbar (scripts/navbar.js). */
.wc-av { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.wc-av > img { display: block; }
.wc-av::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; }

.wc-av[data-frame="frame_hw_web"] > img { box-shadow: 0 0 0 2px rgba(203, 184, 255, .75); }
.wc-av[data-frame="frame_hw_web"]::after {
    inset: -5px; background-size: 60%; background-position: top left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23cbb8ff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M1 1l22 22M1 1l26 6M1 1l6 26'/%3E%3Cpath d='M1 10c5 0 9-4 9-9M1 17c9 0 16-7 16-16M1 24c13 0 23-10 23-23'/%3E%3C/svg%3E");
}
.wc-av[data-frame="frame_hw_pumpkin"] > img { box-shadow: 0 0 0 2px #f07a1a, 0 0 10px rgba(240, 122, 26, .45); }
.wc-av[data-frame="frame_hw_pumpkin"]::after {
    width: 46%; height: 46%; right: -14%; bottom: -12%; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 12c-2-4 0-7 3-8' stroke='%235a7d2e' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='24' cy='28' rx='18' ry='15' fill='%23f07a1a'/%3E%3Cpath d='M15 24l4 3-5 1zM33 24l-4 3 5 1zM16 33c4 3 12 3 16 0l-3 3h-2l-2-2-1 2h-2l-2-2-1 2h-2z' fill='%232a1408'/%3E%3C/svg%3E");
}
.wc-av[data-frame="frame_hw_spectral"] > img { box-shadow: 0 0 0 2px #a5b4fc, 0 0 14px 2px rgba(165, 180, 252, .65); animation: wc-spectral 3.2s ease-in-out infinite; }
@keyframes wc-spectral {
    0%, 100% { box-shadow: 0 0 0 2px #a5b4fc, 0 0 12px 2px rgba(165, 180, 252, .55); }
    50% { box-shadow: 0 0 0 2px #67e8f9, 0 0 18px 4px rgba(103, 232, 249, .55); }
}

/* Section « Collection » (account.html) : compacte, pastilles sur une ligne, détails au survol. */
.wc-preview { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-color, rgba(255, 255, 255, .1)); }
.wc-preview-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.wc-preview-name { font-weight: 600; font-size: .9rem; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.wc-preview-hint { font-size: .72rem; color: var(--text-muted, #9ca3af); }
.wc-group { margin-top: 10px; }
.wc-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.wc-group-head h4 { margin: 0; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #9ca3af); }
.wc-count { font-size: .72rem; color: var(--text-muted, #9ca3af); }
.wc-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.wc-tile {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; min-height: 26px;
    border-radius: 999px; cursor: pointer; color: inherit; font: inherit; font-size: .76rem; line-height: 1.2;
    background: var(--tertiary-bg, rgba(0, 0, 0, .2)); border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    transition: border-color .15s, background .15s;
}
.wc-tile:hover:not(:disabled) { border-color: var(--primary-color, #38b1ed); }
.wc-tile.selected { border-color: var(--primary-color, #38b1ed); background: rgba(56, 177, 237, .14); }
.wc-tile.locked { opacity: .4; cursor: default; }
.wc-tile:focus-visible { outline: 2px solid var(--primary-color, #38b1ed); outline-offset: 1px; }
.wc-tile-ic { width: 14px; height: 14px; flex: none; display: inline-flex; color: #ffb36b; }
.wc-tile-ic svg { width: 100%; height: 100%; }
.wc-tile.rarity-rare .wc-tile-ic { color: #60a5fa; }
.wc-tile.rarity-uncommon .wc-tile-ic { color: #4ade80; }
.wc-tile.rarity-secret .wc-tile-ic { color: #c7d2fe; }
.wc-tile.rarity-legendary .wc-tile-ic, .wc-tile.rarity-unique .wc-tile-ic { color: #ffd166; }
.wc-tile-name { white-space: nowrap; }
.wc-feedback { min-height: 1em; margin-top: 6px; font-size: .74rem; color: var(--text-muted, #9ca3af); }
.wc-admin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-color, rgba(255, 255, 255, .12)); font-size: .74rem; color: var(--text-muted, #9ca3af); }
.wc-admin-btn { padding: 3px 9px; border-radius: 6px; font: inherit; font-size: .74rem; cursor: pointer; color: inherit; background: transparent; border: 1px solid #7c3aed; }
.wc-admin-btn:hover { background: rgba(124, 58, 237, .18); }

/* Animations continues des cadres d'Halloween (même principe que les cadres des 3 ans). */
/* Toile : la toile se balance, une petite araignée monte et descend au bout de son fil. */
.wc-av[data-frame="frame_hw_web"]::after { transform-origin: top left; animation: wc-hw-sway 4s ease-in-out infinite alternate; }
@keyframes wc-hw-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.wc-av[data-frame="frame_hw_web"]::before {
    content: ""; position: absolute; pointer-events: none; left: 2%; top: -6%; width: 26%; height: 70%;
    background: no-repeat top center / 100% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M10 0v38' stroke='%23cbb8ff' stroke-width='.8'/%3E%3Cg fill='%231a1024' stroke='%23cbb8ff' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M4 38l-3-3M4 41H0M4 44l-3 3M16 38l3-3M16 41h4M16 44l3 3' fill='none'/%3E%3Cellipse cx='10' cy='41' rx='5' ry='5.5'/%3E%3C/g%3E%3Ccircle cx='8.4' cy='40' r='.9' fill='%23ff7a1a'/%3E%3Ccircle cx='11.6' cy='40' r='.9' fill='%23ff7a1a'/%3E%3C/svg%3E");
    transform-origin: top center; animation: wc-hw-spider 3.6s ease-in-out infinite;
}
@keyframes wc-hw-spider {
    0%, 100% { transform: translateY(-38%) scaleY(.6); }
    50% { transform: translateY(0) scaleY(1); }
}

/* Citrouille : la bougie vacille (lueur orange irrégulière sur la citrouille et l'anneau). */
.wc-av[data-frame="frame_hw_pumpkin"]::after { animation: wc-hw-candle 2.2s steps(1, end) infinite; }
@keyframes wc-hw-candle {
    0%   { filter: drop-shadow(0 0 2px rgba(255, 150, 40, .9)) brightness(1.05); }
    18%  { filter: drop-shadow(0 0 4px rgba(255, 170, 60, 1)) brightness(1.18); }
    31%  { filter: drop-shadow(0 0 1px rgba(255, 140, 30, .6)) brightness(.92); }
    47%  { filter: drop-shadow(0 0 3px rgba(255, 160, 50, .95)) brightness(1.1); }
    64%  { filter: drop-shadow(0 0 5px rgba(255, 180, 70, 1)) brightness(1.22); }
    82%  { filter: drop-shadow(0 0 2px rgba(255, 140, 30, .7)) brightness(.98); }
}
.wc-av[data-frame="frame_hw_pumpkin"] > img { animation: wc-hw-ring 2.2s ease-in-out infinite; }
@keyframes wc-hw-ring {
    0%, 100% { box-shadow: 0 0 0 2px #f07a1a, 0 0 8px rgba(240, 122, 26, .35); }
    40% { box-shadow: 0 0 0 2px #ff9a3c, 0 0 14px rgba(255, 140, 40, .6); }
    70% { box-shadow: 0 0 0 2px #e06a10, 0 0 6px rgba(240, 122, 26, .3); }
}

/* Flammes spectrales : en plus de la lueur, une volute pâle tourne autour de l'avatar. */
.wc-av[data-frame="frame_hw_spectral"]::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 58%, rgba(165, 180, 252, .2) 68%, #c7d2fe 88%, #67e8f9 96%, transparent 98%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    animation: wc-b3-spin 3.4s linear infinite;
}
/* Un petit fantôme vole en tête de la volute (tête vers l'avant, traîne vers la volute). */
.wc-av[data-frame="frame_hw_spectral"]::after {
    inset: -28%; background-size: 34% 34%; background-position: top center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a7 7 0 0 1-7 7H6l2-2.3L4 15l3-1.7L3 12l4-1.3L4 9l4-1.7L6 5h8a7 7 0 0 1 7 7Z' fill='%23eef2ff' stroke='%23a5b4fc' stroke-width='.8' stroke-linejoin='round'/%3E%3Cellipse cx='15' cy='10.4' rx='1' ry='1.4' fill='%231e1b4b'/%3E%3Cellipse cx='18.2' cy='10.4' rx='1' ry='1.4' fill='%231e1b4b'/%3E%3Cellipse cx='16.8' cy='14.2' rx='1.1' ry='.8' fill='%231e1b4b'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 2px rgba(165, 180, 252, .9));
    animation: wc-b3-spin 3.4s linear infinite, wc-b3-twinkle 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .wc-av[data-frame="frame_hw_spectral"] > img { animation: none; }
    .wc-av[data-frame^="frame_hw_"]::before, .wc-av[data-frame^="frame_hw_"]::after,
    .wc-av[data-frame="frame_hw_pumpkin"] > img { animation: none; }
}

/* Navbar : avatar plus petit, le cadre suit ses proportions. */
.wc-av.wc-nav-frame { vertical-align: middle; }
.wc-empty { font-size: .74rem; color: var(--text-muted, #9ca3af); padding: 4px 0; }
.wc-more { margin-top: 8px; padding: 0; background: none; border: 0; font: inherit; font-size: .74rem; color: var(--primary-color, #38b1ed); cursor: pointer; text-decoration: underline; }
.wc-tile.rarity-premium .wc-tile-ic { color: #c084fc; }
.wc-tile.wc-tile-auto.selected { border-color: rgba(192, 132, 252, .7); background: rgba(168, 85, 247, .14); }

/* ── 3 ans de Waifly (16/12/2026) — modèles en test (?b3test=1, scripts/anniversary-preview.js) ── */
/* Ancienneté : un métal par année, l'icône porte le chiffre (scripts/icons.js year-1/2/3). */
.wc-badge.rarity-bronze { color: #f0b48a; border-color: rgba(205, 127, 70, .6); background: linear-gradient(160deg, rgba(205, 127, 70, .22), rgba(205, 127, 70, .06)); }
.wc-badge.rarity-silver { color: #e5e9f0; border-color: rgba(203, 213, 225, .6); background: linear-gradient(160deg, rgba(226, 232, 240, .2), rgba(226, 232, 240, .05)); }
.wc-badge.rarity-gold { color: #f6d77a; border-color: rgba(234, 192, 84, .7); background: linear-gradient(160deg, rgba(234, 192, 84, .24), rgba(234, 192, 84, .06)); }
.wc-badge.rarity-founder { color: #fff3c4; border-color: rgba(250, 204, 21, .8); background: linear-gradient(135deg, rgba(250, 204, 21, .3), rgba(56, 177, 237, .22)); box-shadow: 0 0 6px rgba(250, 204, 21, .25); }
.wc-badge.rarity-rising { color: #86efac; border-color: rgba(134, 239, 172, .5); background: rgba(134, 239, 172, .09); }
.wc-tile.rarity-bronze .wc-tile-ic { color: #f0b48a; }
.wc-tile.rarity-silver .wc-tile-ic { color: #e5e9f0; }
.wc-tile.rarity-gold .wc-tile-ic, .wc-tile.rarity-founder .wc-tile-ic { color: #f6d77a; }
.wc-tile.rarity-rising .wc-tile-ic { color: #86efac; }
/* Supporter Diamond (top 1 % des soutiens, 3 ans de Waifly). */
.wc-badge.rarity-diamond { color: #cffafe; border-color: rgba(34, 211, 238, .75); background: linear-gradient(135deg, rgba(34, 211, 238, .26), rgba(56, 177, 237, .12)); box-shadow: 0 0 6px rgba(34, 211, 238, .3); }
.wc-tile.rarity-diamond .wc-tile-ic { color: #67e8f9; }

/* Cadres : ::before = anneau, ::after = motif. Animés en continu (transform/opacity seulement),
   coupés par prefers-reduced-motion. Tracés pour rester lisibles de 18 à 52 px. */
.wc-av[data-frame^="frame_b3_"]::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
@keyframes wc-b3-spin { to { transform: rotate(360deg); } }
@keyframes wc-b3-spin-rev { to { transform: rotate(-360deg); } }

/* Liftoff (jeunes membres) : une fusée fait le tour de l'avatar, sa traînée la suit. */
.wc-av[data-frame="frame_b3_liftoff"]::before {
    background: conic-gradient(from 72deg, transparent 0 20%, rgba(56, 177, 237, .15) 30%, #38b1ed 62%, #a5f3fc 79%, transparent 80%);
    animation: wc-b3-spin 5s linear infinite;
}
.wc-av[data-frame="frame_b3_liftoff"]::after {
    inset: -28%; background-size: 34% 34%; background-position: top center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(90 12 12)'%3E%3Cpath d='M12 2c2.6 2 3.6 5 3.6 8.4V16H8.4v-5.6C8.4 7 9.4 4 12 2Z' fill='%23e0f2fe'/%3E%3Ccircle cx='12' cy='9' r='1.6' fill='%2338b1ed'/%3E%3Cpath d='M8.4 12.5 6 15v2.5l2.4-1.5ZM15.6 12.5 18 15v2.5l-2.4-1.5Z' fill='%2338b1ed'/%3E%3Cpath d='M10 16.5h4L12 22Z' fill='%23fb923c'/%3E%3C/g%3E%3C/svg%3E");
    animation: wc-b3-spin 5s linear infinite;
}

/* Confettis (palier 2 du coffre d'équipe) : anneau multicolore qui tourne, confettis qui
   tournent dans l'autre sens et scintillent. */
.wc-av[data-frame="frame_b3_confetti"]::before {
    background: conic-gradient(#38b1ed 0 25%, #f472b6 0 50%, #facc15 0 75%, #4ade80 0);
    animation: wc-b3-spin 6s linear infinite;
}
.wc-av[data-frame="frame_b3_confetti"]::after {
    inset: -9px; background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect x='6' y='9' width='4' height='2' rx='1' fill='%23f472b6' transform='rotate(-30 8 10)'/%3E%3Crect x='47' y='6' width='4' height='2' rx='1' fill='%23facc15' transform='rotate(25 49 7)'/%3E%3Ccircle cx='54' cy='30' r='1.6' fill='%2338b1ed'/%3E%3Crect x='46' y='50' width='4' height='2' rx='1' fill='%234ade80' transform='rotate(-20 48 51)'/%3E%3Ccircle cx='5' cy='44' r='1.6' fill='%23facc15'/%3E%3Crect x='27' y='1' width='4' height='2' rx='1' fill='%2338b1ed' transform='rotate(40 29 2)'/%3E%3Crect x='24' y='56' width='4' height='2' rx='1' fill='%23f472b6' transform='rotate(-35 26 57)'/%3E%3C/svg%3E");
    animation: wc-b3-spin-rev 14s linear infinite, wc-b3-twinkle 2.4s ease-in-out infinite;
}
@keyframes wc-b3-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Trois ans (participants du 16) : un reflet fait le tour de l'anneau doré, le médaillon « 3 » luit. */
.wc-av[data-frame="frame_b3_three"]::before {
    background: conic-gradient(#b98a2c 0 55%, #f6d77a 70%, #fffbe6 76%, #f6d77a 82%, #b98a2c 100%);
    animation: wc-b3-spin 4s linear infinite;
}
.wc-av[data-frame="frame_b3_three"]::after {
    width: 40%; height: 40%; right: -12%; bottom: -12%; background-size: contain; border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2314110a' stroke='%23f6d77a' stroke-width='1.5'/%3E%3Cpath d='M9.4 7.6h5l-2.7 3.3a2.6 2.6 0 1 1-2.4 4.1' stroke='%23f6d77a' stroke-width='2'/%3E%3C/svg%3E");
    animation: wc-b3-glow 2.6s ease-in-out infinite;
}
@keyframes wc-b3-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 215, 122, 0); } 50% { box-shadow: 0 0 7px 1px rgba(246, 215, 122, .7); } }

@media (prefers-reduced-motion: reduce) {
    .wc-av[data-frame^="frame_b3_"]::before, .wc-av[data-frame^="frame_b3_"]::after { animation: none; }
}

/* ══ Cadres standard (hors événement) — en test dans le panneau ?b3test=1, section « Everyday frames ». ══
   Même principe : ::before / ::after + l'ombre de l'<img>, animations continues, coupées par
   prefers-reduced-motion. Lisibles de 18 à 52 px. */

/* Néon : tube cyan à halo magenta, avec un petit grésillement de temps en temps. */
.wc-av[data-frame="frame_std_neon"] > img { animation: wc-std-neon 4s linear infinite; }
@keyframes wc-std-neon {
    0%, 100%, 9%, 13%, 62%, 65% { box-shadow: 0 0 0 2px #67e8f9, 0 0 6px 1px #22d3ee, 0 0 12px 2px rgba(232, 121, 249, .55); }
    8%, 12%, 64% { box-shadow: 0 0 0 2px rgba(103, 232, 249, .45), 0 0 2px rgba(34, 211, 238, .3); }
}

/* Orbite : deux satellites tournent sur un anneau fin, à des vitesses différentes. */
.wc-av[data-frame="frame_std_orbit"] > img { box-shadow: 0 0 0 1.5px rgba(226, 232, 240, .28); }
.wc-av[data-frame="frame_std_orbit"]::before,
.wc-av[data-frame="frame_std_orbit"]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; background-size: 100% 100%; }
.wc-av[data-frame="frame_std_orbit"]::after { background-image: radial-gradient(circle at 50% 3px, #7dd3fc 0 2.6px, rgba(56, 177, 237, .5) 3.2px, transparent 4.6px); animation: wc-b3-spin 2.6s linear infinite; }
.wc-av[data-frame="frame_std_orbit"]::before { background-image: radial-gradient(circle at 50% calc(100% - 3px), #f9a8d4 0 2px, rgba(244, 114, 182, .45) 2.6px, transparent 4px); animation: wc-b3-spin-rev 4.2s linear infinite; }

/* Aurore : dégradé cyan / violet / rose / vert qui tourne lentement, halo doux. */
.wc-av[data-frame="frame_std_aurora"] > img { box-shadow: 0 0 10px rgba(167, 139, 250, .45); }
.wc-av[data-frame="frame_std_aurora"]::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(#22d3ee, #a78bfa, #f472b6, #4ade80, #22d3ee);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: wc-b3-spin 8s linear infinite;
}

/* Circuit : anneau pointillé vert qui défile comme des données, puce aux voyants clignotants. */
.wc-av[data-frame="frame_std_circuit"]::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(#4ade80 0 9deg, rgba(74, 222, 128, .18) 9deg 15deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: wc-b3-spin 9s linear infinite;
}
.wc-av[data-frame="frame_std_circuit"]::after {
    width: 40%; height: 40%; right: -12%; bottom: -12%; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%2306140c' stroke='%234ade80' stroke-width='1.2'/%3E%3Cpath d='M5 8h5l3 3h6M5 16h4l2-2h8' stroke='%234ade80' stroke-width='1.4'/%3E%3Ccircle cx='19' cy='11' r='1.6' fill='%23bbf7d0'%3E%3Canimate attributeName='opacity' values='1%3B.2%3B1' dur='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='19' cy='14' r='1.6' fill='%23bbf7d0'%3E%3Canimate attributeName='opacity' values='.2%3B1%3B.2' dur='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}

/* Brasier : anneau de feu qui tourne vite, lueur qui danse. */
.wc-av[data-frame="frame_std_blaze"]::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(#f97316, #facc15, #ef4444, #fb923c, #fde047, #dc2626, #f97316);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: wc-b3-spin 2.2s linear infinite;
}
.wc-av[data-frame="frame_std_blaze"] > img { animation: wc-std-blaze 1.3s ease-in-out infinite alternate; }
@keyframes wc-std-blaze { from { box-shadow: 0 0 6px 1px rgba(249, 115, 22, .45); } to { box-shadow: 0 0 12px 3px rgba(250, 204, 21, .5); } }

/* Galaxie : anneau nuit étoilée qui tourne, étoiles qui scintillent autour. */
.wc-av[data-frame="frame_std_galaxy"]::after {
    inset: -3px; border-radius: 50%;
    background: conic-gradient(#1e1b4b, #7c3aed, #38bdf8, #c4b5fd, #1e1b4b);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: wc-b3-spin 10s linear infinite;
}
.wc-av[data-frame="frame_std_galaxy"]::before {
    content: ""; position: absolute; inset: -9px; pointer-events: none; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='%23e0e7ff'%3E%3Ccircle cx='8' cy='12' r='1'/%3E%3Ccircle cx='50' cy='8' r='.8'/%3E%3Ccircle cx='55' cy='36' r='1.1'/%3E%3Ccircle cx='44' cy='54' r='.8'/%3E%3Ccircle cx='6' cy='44' r='.9'/%3E%3Ccircle cx='28' cy='2.5' r='.7'/%3E%3Ccircle cx='22' cy='57' r='1'/%3E%3Cpath d='M52 20l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8Z' fill='%23c4b5fd'/%3E%3Cpath d='M10 28l.7 1.7 1.7.7-1.7.7-.7 1.7-.7-1.7-1.7-.7 1.7-.7Z' fill='%237dd3fc'/%3E%3C/svg%3E");
    animation: wc-b3-spin-rev 40s linear infinite, wc-b3-twinkle 2.8s ease-in-out infinite;
}

/* Laurier : couronne dorée en bas, reflet qui fait le tour de l'anneau. */
.wc-av[data-frame="frame_std_laurel"]::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(#a16207 0 55%, #eab308 70%, #fef9c3 76%, #eab308 82%, #a16207 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: wc-b3-spin 4.5s linear infinite;
}
.wc-av[data-frame="frame_std_laurel"]::after { inset: -14%; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23eab308'%3E%3Cellipse cx='43.7' cy='31.2' rx='3.2' ry='1.5' transform='rotate%28170 43.7 31.2%29'/%3E%3Cellipse cx='41.6' cy='35.4' rx='3.2' ry='1.5' transform='rotate%28183 41.6 35.4%29'/%3E%3Cellipse cx='38.6' cy='39.1' rx='3.2' ry='1.5' transform='rotate%28196 38.6 39.1%29'/%3E%3Cellipse cx='34.8' cy='42.0' rx='3.2' ry='1.5' transform='rotate%28209 34.8 42.0%29'/%3E%3Cellipse cx='30.5' cy='44.0' rx='3.2' ry='1.5' transform='rotate%28222 30.5 44.0%29'/%3E%3Cellipse cx='25.8' cy='44.9' rx='3.2' ry='1.5' transform='rotate%28235 25.8 44.9%29'/%3E%3Cellipse cx='22.2' cy='44.9' rx='3.2' ry='1.5' transform='rotate%28125 22.2 44.9%29'/%3E%3Cellipse cx='17.5' cy='44.0' rx='3.2' ry='1.5' transform='rotate%28138 17.5 44.0%29'/%3E%3Cellipse cx='13.2' cy='42.0' rx='3.2' ry='1.5' transform='rotate%28151 13.2 42.0%29'/%3E%3Cellipse cx='9.4' cy='39.1' rx='3.2' ry='1.5' transform='rotate%28164 9.4 39.1%29'/%3E%3Cellipse cx='6.4' cy='35.4' rx='3.2' ry='1.5' transform='rotate%28177 6.4 35.4%29'/%3E%3Cellipse cx='4.3' cy='31.2' rx='3.2' ry='1.5' transform='rotate%28190 4.3 31.2%29'/%3E%3Cpath d='M24 45.5l-2 2.2M24 45.5l2 2.2' stroke='%23eab308' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); }

/* Pixel : anneau 8 bits multicolore qui tourne par crans. */
.wc-av[data-frame="frame_std_pixel"]::before {
    content: ""; position: absolute; inset: -14%; pointer-events: none; image-rendering: pixelated;
    background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Crect x='21' y='11' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='21' y='13' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='20' y='15' width='2' height='2' fill='%23facc15'/%3E%3Crect x='19' y='17' width='2' height='2' fill='%234ade80'/%3E%3Crect x='17' y='19' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='15' y='20' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='13' y='21' width='2' height='2' fill='%23facc15'/%3E%3Crect x='11' y='21' width='2' height='2' fill='%234ade80'/%3E%3Crect x='9' y='21' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='7' y='20' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='5' y='19' width='2' height='2' fill='%23facc15'/%3E%3Crect x='3' y='17' width='2' height='2' fill='%234ade80'/%3E%3Crect x='2' y='15' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='1' y='13' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='1' y='11' width='2' height='2' fill='%23facc15'/%3E%3Crect x='1' y='9' width='2' height='2' fill='%234ade80'/%3E%3Crect x='2' y='7' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='3' y='5' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='5' y='3' width='2' height='2' fill='%23facc15'/%3E%3Crect x='7' y='2' width='2' height='2' fill='%234ade80'/%3E%3Crect x='9' y='1' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='11' y='1' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='13' y='1' width='2' height='2' fill='%23facc15'/%3E%3Crect x='15' y='2' width='2' height='2' fill='%234ade80'/%3E%3Crect x='17' y='3' width='2' height='2' fill='%2338b1ed'/%3E%3Crect x='19' y='5' width='2' height='2' fill='%23f472b6'/%3E%3Crect x='20' y='7' width='2' height='2' fill='%23facc15'/%3E%3Crect x='21' y='9' width='2' height='2' fill='%234ade80'/%3E%3C/svg%3E");
    animation: wc-b3-spin 4s steps(14) infinite;
}

/* Terminal : liseré vert, balayage d'écran sur l'avatar, invite « > _ » au curseur clignotant. */
.wc-av[data-frame="frame_std_terminal"] > img { box-shadow: 0 0 0 2px #22c55e, 0 0 8px rgba(34, 197, 94, .4); }
.wc-av[data-frame="frame_std_terminal"]::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(transparent 44%, rgba(74, 222, 128, .28) 50%, transparent 56%) 0 0 / 100% 220% no-repeat;
    animation: wc-std-scan 2.8s linear infinite;
}
@keyframes wc-std-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }
.wc-av[data-frame="frame_std_terminal"]::after {
    width: 40%; height: 40%; right: -12%; bottom: -12%; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%23050a06' stroke='%2322c55e' stroke-width='1.2'/%3E%3Cpath d='M6 8l4 4-4 4' stroke='%2322c55e' stroke-width='2'/%3E%3Crect x='12' y='15' width='6' height='2' fill='%2322c55e'%3E%3Canimate attributeName='opacity' values='1%3B0' dur='1s' calcMode='discrete' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .wc-av[data-frame^="frame_std_"] > img, .wc-av[data-frame^="frame_std_"]::before, .wc-av[data-frame^="frame_std_"]::after { animation: none; }
}