/* ============================================================
   IVANN 64 — Avatar customizable (cosmetiques stylises)
   Sentinel : AV_V15
   ============================================================ */
/* AV_V15 */

.ivann-av {
    --rar-commun: #9aa1ba;
    --rar-rare: #60a5fa;
    --rar-epique: #c084fc;
    --rar-legendaire: #fbbf24;
    background: linear-gradient(160deg, #16122e 0%, #0a0e14 70%);
    color: #f8fafc;
    border-radius: 16px;
    padding: 26px;
    margin: 32px 0;
    border: 1px solid rgba(124, 92, 255, 0.25);
    font-family: 'Inter', system-ui, sans-serif;
}
.ivann-av__head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 22px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ivann-av__title {
    margin: 0; font-family: 'Rajdhani', sans-serif;
    font-size: 30px; font-weight: 800; letter-spacing: 2px;
    background: linear-gradient(90deg, #67e8f9, #c084fc);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ivann-av__head-hint { font-size: 12px; color: #8b93ad; }

.ivann-av__layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
@media (max-width: 760px) { .ivann-av__layout { grid-template-columns: 1fr; } }

/* --- Preview --- */
.ivann-av__preview {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 34px 20px; text-align: center; align-self: start;
    position: sticky; top: 16px;
}
.ivann-av__preview-label {
    font-size: 10px; color: #8b93ad;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px;
}
.ivann-av__preview-stage { display: grid; place-items: center; min-height: 190px; }
.ivann-av__preview-name { margin-top: 30px; font-size: 14px; font-weight: 700; color: #e8eaf3; }
.ivann-av__save-btn {
    margin-top: 18px; width: 100%; padding: 12px;
    background: linear-gradient(135deg, #7c5cff, #c084fc);
    color: #fff; border: none; border-radius: 10px; cursor: pointer;
    font: 800 13px/1 'Inter', sans-serif; letter-spacing: 0.5px;
    box-shadow: 0 10px 26px -10px rgba(124, 92, 255, 0.8);
    transition: transform 140ms ease, filter 140ms ease;
}
.ivann-av__save-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }

/* --- Sections --- */
.ivann-av__sections { display: flex; flex-direction: column; gap: 16px; }
.ivann-av__section {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px; padding: 16px 18px;
}
.ivann-av__section-title {
    margin: 0 0 14px; font: 800 12px/1 monospace;
    letter-spacing: 1.5px; text-transform: uppercase; color: #c4b5fd;
    display: flex; align-items: center; gap: 8px;
}
.ivann-av__section-title svg { width: 15px; height: 15px; }
.ivann-av__opts {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px;
}
.ivann-av__series {
    font: 800 9.5px/1 monospace; letter-spacing: 1.6px;
    text-transform: uppercase; color: #8b93ad;
    margin: 18px 0 10px; display: flex; align-items: center; gap: 9px;
}
.ivann-av__series:first-of-type { margin-top: 4px; }
.ivann-av__series::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
}

/* --- Carte d'option --- */
.ivann-av__opt {
    position: relative; cursor: pointer;
    border-radius: 12px; padding: 18px 6px 9px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--rar, #9aa1ba);
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.ivann-av__opt:hover { transform: translateY(-3px); }
.ivann-av__opt.is-selected {
    box-shadow: 0 0 0 2px var(--rar, #c084fc), 0 8px 22px -6px var(--rar, #c084fc);
}
.ivann-av__opt.is-locked { cursor: not-allowed; }
.ivann-av__opt.is-locked .ivann-av__opt-visual { filter: grayscale(1) brightness(0.5); }
.ivann-av__opt-visual {
    width: 78px; height: 78px; display: grid; place-items: center; overflow: visible;
}
.ivann-av__bg-swatch { width: 50px; height: 50px; border-radius: 50%; }
.ivann-av__opt-name { font-size: 10.5px; font-weight: 700; color: #e8eaf3; text-align: center; line-height: 1.2; }
.ivann-av__opt-rarity {
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--rar, #9aa1ba);
}
.ivann-av__opt-lock { font-size: 8.5px; font-weight: 700; color: #fb7185; display: flex; align-items: center; gap: 3px; }
.ivann-av__opt-lock svg { width: 9px; height: 9px; }
.ivann-av__opt-check {
    position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #22c55e; color: #06281a;
    display: none; place-items: center; font-size: 12px; font-weight: 900;
    border: 2px solid #0a0e14; z-index: 5;
}
.ivann-av__opt.is-selected .ivann-av__opt-check { display: grid; }

/* === AVATAR RE-UTILISABLE (Plaza, Hub, Leaderboard, Spectator...) === */
/* wrapper transparent : le disque opaque est par-dessus la deco -> la deco
   ne se voit que la ou elle deborde du disque. */
.ivann-av-render {
    position: relative; display: inline-block;
    vertical-align: middle; flex-shrink: 0;
    --aura-inset: 4px;
}
.ivann-av-render__disc {
    position: absolute; inset: 0; z-index: 1;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--av-from, #67e8f9), var(--av-to, #c4b5fd));
    display: grid; place-items: center;
    color: #ffffff; font-weight: 900;
}
.ivann-av-render__bg { position: absolute; inset: 0; }
.ivann-av-render__bg svg { width: 100%; height: 100%; display: block; }

/* --- Animation subtile des fonds SVG (SVG Forge) --- */
@keyframes ivann-bg-rot  { to { transform: rotate(360deg); } }
@keyframes ivann-bg-rotr { to { transform: rotate(-360deg); } }
@keyframes ivann-bg-tw   { 0%,100% { opacity: 0.4; }  50% { opacity: 1; } }
@keyframes ivann-bg-gl   { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ivann-bg-br   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ivann-bg-dr   { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4px,-3px); } }
@keyframes ivann-bg-fl   { 0%,88%,100% { opacity: 1; } 90% { opacity: 0.2; } 92% { opacity: 1; } 95% { opacity: 0.5; } 97% { opacity: 1; } }
.ivann-av-render__bg svg .a-spin,
.ivann-av-render__bg svg .a-spinf,
.ivann-av-render__bg svg .a-spinr,
.ivann-av-render__bg svg .a-br {
    transform-box: view-box; transform-origin: 50% 50%;
}
.ivann-av-render__bg svg .a-spin  { animation: ivann-bg-rot  58s linear infinite; }
.ivann-av-render__bg svg .a-spinf { animation: ivann-bg-rot  32s linear infinite; }
.ivann-av-render__bg svg .a-spinr { animation: ivann-bg-rotr 70s linear infinite; }
.ivann-av-render__bg svg .a-tw    { animation: ivann-bg-tw   5.5s ease-in-out infinite; }
.ivann-av-render__bg svg .a-gl    { animation: ivann-bg-gl   6s ease-in-out infinite; }
.ivann-av-render__bg svg .a-br    { animation: ivann-bg-br   8s ease-in-out infinite; }
.ivann-av-render__bg svg .a-dr    { animation: ivann-bg-dr   13s ease-in-out infinite; transform-box: view-box; }
.ivann-av-render__bg svg .a-fl    { animation: ivann-bg-fl   7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .ivann-av-render__bg svg * { animation: none !important; }
}
.ivann-av-render__initial {
    line-height: 1; position: relative; z-index: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
}
.ivann-av-render__deco {
    position: absolute; z-index: 0; pointer-events: none;
}
/* couronnes : posees au-dessus du disque, bien visibles */
.ivann-av-render__deco--top {
    left: 0; right: 0; top: -56%; bottom: 44%; z-index: 2;
}
.ivann-av-render__deco svg { width: 100% !important; height: 100% !important; display: block; }

/* --- AURAS (halo lumineux) --- */
@keyframes ivann-av-spin { to { transform: rotate(360deg); } }
@keyframes ivann-av-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--gl, #67e8f9), 0 0 8px 0 var(--gl, #67e8f9); }
    50%      { box-shadow: 0 0 0 3px var(--gl, #67e8f9), 0 0 22px 4px var(--gl, #67e8f9); }
}
@keyframes ivann-av-flicker { 0%,100%{opacity:1;} 45%{opacity:0.82;} 70%{opacity:1;} 85%{opacity:0.9;} }
.ivann-av-render--aura-cyan   { box-shadow: 0 0 0 2px #67e8f9, 0 0 16px rgba(103,232,249,0.6); }
.ivann-av-render--aura-violet { box-shadow: 0 0 0 2px #c084fc, 0 0 18px rgba(192,132,252,0.7); }
.ivann-av-render--aura-gold   { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251,191,36,0.7); }
.ivann-av-render--aura-pulse  { --gl: #67e8f9; animation: ivann-av-pulse 1.8s ease-in-out infinite; }
.ivann-av-render--aura-rotating::after,
.ivann-av-render--aura-rainbow::after,
.ivann-av-render--aura-inferno::after,
.ivann-av-render--aura-celestial::after {
    content: ''; position: absolute; inset: calc(-1 * var(--aura-inset, 4px));
    border-radius: 50%; z-index: 0;
}
.ivann-av-render--aura-rotating::after {
    background: conic-gradient(from 0deg, #67e8f9, #c084fc, #fbbf24, #4ade80, #67e8f9);
    animation: ivann-av-spin 3.4s linear infinite;
}
.ivann-av-render--aura-rainbow::after {
    background: conic-gradient(from 0deg, #f43f5e,#fb923c,#fbbf24,#4ade80,#06b6d4,#6366f1,#c084fc,#f43f5e);
    animation: ivann-av-spin 2.4s linear infinite; filter: saturate(1.4);
}
.ivann-av-render--aura-rainbow { box-shadow: 0 0 16px rgba(192,132,252,0.55); }
.ivann-av-render--aura-inferno::after {
    background: conic-gradient(from 0deg, #7c2d12,#f97316,#fbbf24,#ef4444,#7c2d12);
    animation: ivann-av-spin 2.8s linear infinite, ivann-av-flicker 0.9s ease-in-out infinite;
}
.ivann-av-render--aura-inferno { box-shadow: 0 0 22px rgba(249,115,22,0.7); }
.ivann-av-render--aura-celestial::after {
    background: conic-gradient(from 0deg, rgba(255,255,255,0.95),#fde68a,rgba(255,255,255,0.6),#c4b5fd,rgba(255,255,255,0.95));
    animation: ivann-av-spin 6s linear infinite;
}
.ivann-av-render--aura-celestial { box-shadow: 0 0 26px rgba(253,230,138,0.65), 0 0 8px rgba(255,255,255,0.5); }

/* --- EMBLEME (medaillon RPG au coin de l'avatar) --- */
.ivann-av-render__emblem {
    position: absolute; right: -8%; bottom: -8%;
    border-radius: 50%; box-sizing: border-box;
    display: grid; place-items: center;
    background: radial-gradient(circle at 36% 30%, #2a2640, #07060e 78%);
    z-index: 3;
}
.ivann-av-render__emblem svg {
    width: 62%; height: 62%; display: block; overflow: visible;
    fill: var(--em, #c084fc);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
.ivann-av-render__emblem--rare       { box-shadow: 0 0 7px -1px var(--em); }
.ivann-av-render__emblem--epique     { box-shadow: 0 0 9px -1px var(--em), 0 2px 6px rgba(0,0,0,0.5); }
.ivann-av-render__emblem--legendaire {
    box-shadow: 0 0 10px -1px var(--em), 0 0 22px -4px var(--em);
    animation: ivann-av-em-glow 2.8s ease-in-out infinite;
}
@keyframes ivann-av-em-glow {
    0%, 100% { box-shadow: 0 0 8px -2px var(--em),  0 0 16px -6px var(--em); }
    50%      { box-shadow: 0 0 13px 0   var(--em),  0 0 28px -2px var(--em); }
}

@media (prefers-reduced-motion: reduce) {
    .ivann-av-render::after,
    .ivann-av-render__emblem { animation: none !important; }
}