/* ============================================
   Retro SVG Icons - Theme-aware
   Uses mask-image for dynamic coloring
   ============================================ */

:root {
    --icon-size: 1.2em;
}

/* Base icon style using mask for theme coloring */
.icon-retro {
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--phosphor-bright);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px var(--phosphor-glow));
}

/* === GENERATORS (Lightning bolt) === */
.icon-generators,
.mobile-nav__tab[data-panel="generators"] .mobile-nav__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 0L4 9h3v7l5-9H9V0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 0L4 9h3v7l5-9H9V0z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === STATS (Bar chart) === */
.icon-stats,
.mobile-nav__tab[data-panel="stats"] .mobile-nav__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 14h2V8H1v6zm4 0h2V4H5v10zm4 0h2V6H9v8zm4 0h2V2h-2v12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 14h2V8H1v6zm4 0h2V4H5v10zm4 0h2V6H9v8zm4 0h2V2h-2v12z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === ERAS (Star) === */
.icon-eras,
.mobile-nav__tab[data-panel="eras"] .mobile-nav__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === ACHIEVEMENTS / TROPHY === */
.icon-trophy,
.mobile-nav__tab[data-panel="achievements"] .mobile-nav__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1h8v2h3v4c0 1-1 2-2 2h-1c0 2-1 3-2 3v2h3v2H3v-2h3v-2c-1 0-2-1-2-3H3c-1 0-2-1-2-2V3h3V1zm-2 4v2h1V5H2zm11 0v2h1V5h-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1h8v2h3v4c0 1-1 2-2 2h-1c0 2-1 3-2 3v2h3v2H3v-2h3v-2c-1 0-2-1-2-3H3c-1 0-2-1-2-2V3h3V1zm-2 4v2h1V5H2zm11 0v2h1V5h-1z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === PRESTIGE (Cycle arrows) === */
.icon-prestige,
.mobile-nav__tab[data-panel="prestige"] .mobile-nav__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 2V0l4 3-4 3V4C5.8 4 4 5.8 4 8h-2c0-3.3 2.7-6 6-6zm0 12v2l-4-3 4-3v2c2.2 0 4-1.8 4-4h2c0 3.3-2.7 6-6 6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 2V0l4 3-4 3V4C5.8 4 4 5.8 4 8h-2c0-3.3 2.7-6 6-6zm0 12v2l-4-3 4-3v2c2.2 0 4-1.8 4-4h2c0 3.3-2.7 6-6 6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === LEADERBOARD / CROWN === */
.icon-crown,
.mobile-nav__tab[data-panel="leaderboard"] .mobile-nav__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 12h12v2H2v-2zM1 5l3 5h8l3-5-3 3-3-5-3 5-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 12h12v2H2v-2zM1 5l3 5h8l3-5-3 3-3-5-3 5-3-3z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === USER (Person silhouette) === */
.icon-user,
.header__user-icon {
    font-size: 0 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 2a3 3 0 100 6 3 3 0 000-6zM4 14c0-2.2 1.8-4 4-4s4 1.8 4 4H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 2a3 3 0 100 6 3 3 0 000-6zM4 14c0-2.2 1.8-4 4-4s4 1.8 4 4H4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

.header__user-icon--disconnected {
    opacity: 0.4;
    filter: drop-shadow(0 0 2px var(--phosphor-glow));
}

.header__user-icon--connected {
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--phosphor-glow));
}

/* === SETTINGS (Gear) - Engrenage parfaitement symétrique === */
.icon-settings {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 1h2v2.1c.6.1 1.1.4 1.6.7l1.5-1.5 1.4 1.4-1.5 1.5c.3.5.5 1 .7 1.6H15v2h-2.3c-.1.6-.4 1.1-.7 1.6l1.5 1.5-1.4 1.4-1.5-1.5c-.5.3-1 .5-1.6.7V15H7v-2.3c-.6-.1-1.1-.4-1.6-.7l-1.5 1.5-1.4-1.4 1.5-1.5c-.3-.5-.5-1-.7-1.6H1V7h2.3c.1-.6.4-1.1.7-1.6L2.5 3.9l1.4-1.4 1.5 1.5c.5-.3 1-.5 1.6-.7V1zm1 5a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 1h2v2.1c.6.1 1.1.4 1.6.7l1.5-1.5 1.4 1.4-1.5 1.5c.3.5.5 1 .7 1.6H15v2h-2.3c-.1.6-.4 1.1-.7 1.6l1.5 1.5-1.4 1.4-1.5-1.5c-.5.3-1 .5-1.6.7V15H7v-2.3c-.6-.1-1.1-.4-1.6-.7l-1.5 1.5-1.4-1.4 1.5-1.5c-.3-.5-.5-1-.7-1.6H1V7h2.3c.1-.6.4-1.1.7-1.6L2.5 3.9l1.4-1.4 1.5 1.5c.5-.3 1-.5 1.6-.7V1zm1 5a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* Bouton paramètres - icône centrée */
#btn-settings {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: 1px solid var(--phosphor-dim);
    position: relative;
}

#btn-settings::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 1h2v2.1c.6.1 1.1.4 1.6.7l1.5-1.5 1.4 1.4-1.5 1.5c.3.5.5 1 .7 1.6H15v2h-2.3c-.1.6-.4 1.1-.7 1.6l1.5 1.5-1.4 1.4-1.5-1.5c-.5.3-1 .5-1.6.7V15H7v-2.3c-.6-.1-1.1-.4-1.6-.7l-1.5 1.5-1.4-1.4 1.5-1.5c-.3-.5-.5-1-.7-1.6H1V7h2.3c.1-.6.4-1.1.7-1.6L2.5 3.9l1.4-1.4 1.5 1.5c.5-.3 1-.5 1.6-.7V1zm1 5a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 1h2v2.1c.6.1 1.1.4 1.6.7l1.5-1.5 1.4 1.4-1.5 1.5c.3.5.5 1 .7 1.6H15v2h-2.3c-.1.6-.4 1.1-.7 1.6l1.5 1.5-1.4 1.4-1.5-1.5c-.5.3-1 .5-1.6.7V15H7v-2.3c-.6-.1-1.1-.4-1.6-.7l-1.5 1.5-1.4-1.4 1.5-1.5c-.3-.5-.5-1-.7-1.6H1V7h2.3c.1-.6.4-1.1.7-1.6L2.5 3.9l1.4-1.4 1.5 1.5c.5-.3 1-.5 1.6-.7V1zm1 5a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#btn-settings:hover {
    border-color: var(--phosphor-bright);
}

#btn-settings:hover::before {
    filter: drop-shadow(0 0 6px var(--phosphor-bright));
}

/* === JOIN / ARROW RIGHT (pour bouton Rejoindre) === */
.icon-join,
#btn-mp-join {
    font-size: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    width: 40px;
    padding: 0 !important;
}

#btn-mp-join::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 8h10M8 4l4 4-4 4M12 2h3v12h-3'/%3E%3Cpath stroke='white' stroke-width='2' fill='none' d='M1 8h10M8 4l4 4-4 4'/%3E%3Cpath fill='white' d='M12 2h3v12h-3v-2h1V4h-1V2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 8h10M8 4l4 4-4 4M12 2h3v12h-3'/%3E%3Cpath stroke='white' stroke-width='2' fill='none' d='M1 8h10M8 4l4 4-4 4'/%3E%3Cpath fill='white' d='M12 2h3v12h-3v-2h1V4h-1V2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 3px var(--phosphor-glow));
}

/* === DNA / SYNTHESIZE === */
.icon-dna,
.prestige-btn--icon-only {
    font-size: 0 !important;
}

.prestige-btn--icon-only::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1v1h8V1h2v2c0 2-1 3-3 4 2 1 3 2 3 4v2h-2v-1H4v1H2v-2c0-2 1-3 3-4-2-1-3-2-3-4V1h2zm0 4h8c0-1-.5-2-1-2H5c-.5 0-1 1-1 2zm0 6c0 1 .5 2 1 2h6c.5 0 1-1 1-2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1v1h8V1h2v2c0 2-1 3-3 4 2 1 3 2 3 4v2h-2v-1H4v1H2v-2c0-2 1-3 3-4-2-1-3-2-3-4V1h2zm0 4h8c0-1-.5-2-1-2H5c-.5 0-1 1-1 2zm0 6c0 1 .5 2 1 2h6c.5 0 1-1 1-2H4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
    vertical-align: middle;
    margin-right: 4px;
}

/* === SOUND ON (Speaker) === */
.icon-sound-on,
.sound-toggle__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 5h3l4-3v12l-4-3H2V5zm9 1v4c1 0 2-1 2-2s-1-2-2-2zm0-2v1c2 0 3 1.5 3 3s-1 3-3 3v1c2.5 0 4-2 4-4s-1.5-4-4-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 5h3l4-3v12l-4-3H2V5zm9 1v4c1 0 2-1 2-2s-1-2-2-2zm0-2v1c2 0 3 1.5 3 3s-1 3-3 3v1c2.5 0 4-2 4-4s-1.5-4-4-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* Sound off state */
.sound-toggle--off .sound-toggle__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 5h3l4-3v12l-4-3H2V5zm10 1l2 2-2 2 1 1 2-2 2 2 1-1-2-2 2-2-1-1-2 2-2-2-1 1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 5h3l4-3v12l-4-3H2V5zm10 1l2 2-2 2 1 1 2-2 2 2 1-1-2-2 2-2-1-1-2 2-2-2-1 1z'/%3E%3C/svg%3E");
    opacity: 0.5;
}

/* === LINK (Chain) === */
.icon-link,
.share-btn--copy {
    font-size: 0 !important;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.5 9.5L5 11c-1 1-3 1-4 0s-1-3 0-4l3-3c1-1 3-1 4 0l.5.5-1.5 1.5-.5-.5c-.5-.5-1-.5-1.5 0l-3 3c-.5.5-.5 1 0 1.5s1 .5 1.5 0l1.5-1.5zm3-3L11 5c1-1 3-1 4 0s1 3 0 4l-3 3c-1 1-3 1-4 0l-.5-.5 1.5-1.5.5.5c.5.5 1 .5 1.5 0l3-3c.5-.5.5-1 0-1.5s-1-.5-1.5 0l-1.5 1.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.5 9.5L5 11c-1 1-3 1-4 0s-1-3 0-4l3-3c1-1 3-1 4 0l.5.5-1.5 1.5-.5-.5c-.5-.5-1-.5-1.5 0l-3 3c-.5.5-.5 1 0 1.5s1 .5 1.5 0l1.5-1.5zm3-3L11 5c1-1 3-1 4 0s1 3 0 4l-3 3c-1 1-3 1-4 0l-.5-.5 1.5-1.5.5.5c.5.5 1 .5 1.5 0l3-3c.5-.5.5-1 0-1.5s-1-.5-1.5 0l-1.5 1.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === OFFLINE / SLEEP (Zzz) === */
.icon-offline {
    font-size: 0 !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M10 2h4l-4 4h4v1h-5V6l4-4h-3V2zm-4 5h3l-3 3h3v1H5V10l3-3H5V7zm-3 4h2l-2 2h2v1H2v-1l2-2H2v-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M10 2h4l-4 4h4v1h-5V6l4-4h-3V2zm-4 5h3l-3 3h3v1H5V10l3-3H5V7zm-3 4h2l-2 2h2v1H2v-1l2-2H2v-1z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 3px var(--phosphor-glow));
    vertical-align: middle;
}

/* === ARROW UP === */
.icon-arrow-up,
.mobile-nav-indicator__arrow {
    font-size: 0 !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 2l6 6h-4v6H6V8H2l6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 2l6 6h-4v6H6V8H2l6-6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* === LOCK (for locked items) === */
.icon-lock {
    font-size: 0 !important;
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 7V5c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1v7H3V7h1zm2 0h4V5c0-1.1-.9-2-2-2s-2 .9-2 2v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 7V5c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1v7H3V7h1zm2 0h4V5c0-1.1-.9-2-2-2s-2 .9-2 2v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 2px var(--phosphor-glow));
}

/* === Share buttons - X/Twitter === */
.share-btn--x {
    font-size: 0 !important;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 1l5.5 7L1 15h2l4-5 3.5 5H15l-5.5-7L14 1h-2l-4 5L4.5 1H1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 1l5.5 7L1 15h2l4-5 3.5 5H15l-5.5-7L14 1h-2l-4 5L4.5 1H1z'/%3E%3C/svg%3E");
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    border: 2px solid var(--phosphor-dim) !important;
    filter: drop-shadow(0 0 3px var(--phosphor-glow));
}

.share-btn--x:hover {
    border-color: var(--phosphor-bright) !important;
    filter: drop-shadow(0 0 6px var(--phosphor-glow));
}

/* === Share buttons - Facebook === */
.share-btn--facebook {
    font-size: 0 !important;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 3v2h2l-1 3H9v7H6V8H4V5h2V3c0-2 1-3 3-3h2v3H9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 3v2h2l-1 3H9v7H6V8H4V5h2V3c0-2 1-3 3-3h2v3H9z'/%3E%3C/svg%3E");
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    border: 2px solid var(--phosphor-dim) !important;
    filter: drop-shadow(0 0 3px var(--phosphor-glow));
}

.share-btn--facebook:hover {
    border-color: var(--phosphor-bright) !important;
    filter: drop-shadow(0 0 6px var(--phosphor-glow));
}

/* === Modal title alignment === */
.modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Prestige modal DNA icon */
.prestige-modal__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--phosphor-bright);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1v1h8V1h2v2c0 2-1 3-3 4 2 1 3 2 3 4v2h-2v-1H4v1H2v-2c0-2 1-3 3-4-2-1-3-2-3-4V1h2zm0 4h8c0-1-.5-2-1-2H5c-.5 0-1 1-1 2zm0 6c0 1 .5 2 1 2h6c.5 0 1-1 1-2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1v1h8V1h2v2c0 2-1 3-3 4 2 1 3 2 3 4v2h-2v-1H4v1H2v-2c0-2 1-3 3-4-2-1-3-2-3-4V1h2zm0 4h8c0-1-.5-2-1-2H5c-.5 0-1 1-1 2zm0 6c0 1 .5 2 1 2h6c.5 0 1-1 1-2H4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
    flex-shrink: 0;
}

/* === Generator emoji icons override === */
.gen-btn__emoji {
    font-size: 0 !important;
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: var(--phosphor-bright);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 4px var(--phosphor-glow));
}

/* Stem Cell - Microscope */
[data-generator-id="stem_cell"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6 1h4v2H6V1zM7 3h2v3h2v2h-1v1h1v2H7v-2h1V9H7V7h2V3H7zm-3 9h8v1H4v-1zm1 2h6v2H5v-2z'/%3E%3Ccircle cx='8' cy='5' r='1' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6 1h4v2H6V1zM7 3h2v3h2v2h-1v1h1v2H7v-2h1V9H7V7h2V3H7zm-3 9h8v1H4v-1zm1 2h6v2H5v-2z'/%3E%3Ccircle cx='8' cy='5' r='1' fill='black'/%3E%3C/svg%3E");
}

/* Axon - Lightning bolt */
[data-generator-id="axon"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 0L4 8h3v8l5-10H9V0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 0L4 8h3v8l5-10H9V0z'/%3E%3C/svg%3E");
}

/* Dendrite - Branch/tree */
[data-generator-id="dendrite"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 16V8L4 5V2l3 3V0h2v5l3-3v3l-3 3v8H7zM4 8l-2-2v2l2 2V8zm8 0v2l2-2V6l-2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 16V8L4 5V2l3 3V0h2v5l3-3v3l-3 3v8H7zM4 8l-2-2v2l2 2V8zm8 0v2l2-2V6l-2 2z'/%3E%3C/svg%3E");
}

/* Synapse - Star burst */
[data-generator-id="synapse"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0v5L5 2v2l3 3H3v2h5L5 12v2l3-3v5h2v-5l3 3v-2l-3-3h5V7h-5l3-3V2l-3 3V0H8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0v5L5 2v2l3 3H3v2h5L5 12v2l3-3v5h2v-5l3 3v-2l-3-3h5V7h-5l3-3V2l-3 3V0H8z'/%3E%3C/svg%3E");
}

/* Network - Web/mesh */
[data-generator-id="network"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='3' r='2' fill='white'/%3E%3Ccircle cx='3' cy='8' r='2' fill='white'/%3E%3Ccircle cx='13' cy='8' r='2' fill='white'/%3E%3Ccircle cx='8' cy='13' r='2' fill='white'/%3E%3Cpath fill='white' d='M7.5 5v6h1V5zM5 7l1.5-2.5h1L6 7zM10 7l1.5-2.5h-1L9 7zM5 9l1.5 2.5h1L6 9zM10 9l1.5 2.5h-1L9 9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='3' r='2' fill='white'/%3E%3Ccircle cx='3' cy='8' r='2' fill='white'/%3E%3Ccircle cx='13' cy='8' r='2' fill='white'/%3E%3Ccircle cx='8' cy='13' r='2' fill='white'/%3E%3Cpath fill='white' d='M7.5 5v6h1V5zM5 7l1.5-2.5h1L6 7zM10 7l1.5-2.5h-1L9 7zM5 9l1.5 2.5h1L6 9zM10 9l1.5 2.5h-1L9 9z'/%3E%3C/svg%3E");
}

/* Cortex - Brain */
[data-generator-id="cortex"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1C5 1 3 3 3 5c0 1 0 2 1 2-1 1-1 2-1 3 0 2 2 4 5 5 3-1 5-3 5-5 0-1 0-2-1-3 1 0 1-1 1-2 0-2-2-4-5-4zm-2 3c1 0 1 1 1 2H6c0-1 0-2 1-2h-1zm4 0c1 0 1 1 1 2h-1c0-1 0-2 1-2h-1zM6 8h4c0 1-1 3-2 4-1-1-2-3-2-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1C5 1 3 3 3 5c0 1 0 2 1 2-1 1-1 2-1 3 0 2 2 4 5 5 3-1 5-3 5-5 0-1 0-2-1-3 1 0 1-1 1-2 0-2-2-4-5-4zm-2 3c1 0 1 1 1 2H6c0-1 0-2 1-2h-1zm4 0c1 0 1 1 1 2h-1c0-1 0-2 1-2h-1zM6 8h4c0 1-1 3-2 4-1-1-2-3-2-4z'/%3E%3C/svg%3E");
}

/* Hemisphere - Globe */
[data-generator-id="hemisphere"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='white' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='8' cy='8' rx='2.5' ry='6' stroke='white' stroke-width='1' fill='none'/%3E%3Cpath stroke='white' stroke-width='1' d='M2 8h12M3 5h10M3 11h10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='white' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='8' cy='8' rx='2.5' ry='6' stroke='white' stroke-width='1' fill='none'/%3E%3Cpath stroke='white' stroke-width='1' d='M2 8h12M3 5h10M3 11h10'/%3E%3C/svg%3E");
}

/* Consciousness - Star/atom */
[data-generator-id="consciousness"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='8' rx='6' ry='2' stroke='white' stroke-width='1' fill='none' transform='rotate(45 8 8)'/%3E%3Cellipse cx='8' cy='8' rx='6' ry='2' stroke='white' stroke-width='1' fill='none' transform='rotate(-45 8 8)'/%3E%3Cellipse cx='8' cy='8' rx='6' ry='2' stroke='white' stroke-width='1' fill='none'/%3E%3Ccircle cx='8' cy='8' r='2' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='8' rx='6' ry='2' stroke='white' stroke-width='1' fill='none' transform='rotate(45 8 8)'/%3E%3Cellipse cx='8' cy='8' rx='6' ry='2' stroke='white' stroke-width='1' fill='none' transform='rotate(-45 8 8)'/%3E%3Cellipse cx='8' cy='8' rx='6' ry='2' stroke='white' stroke-width='1' fill='none'/%3E%3Ccircle cx='8' cy='8' r='2' fill='white'/%3E%3C/svg%3E");
}

/* Singularity - Spiral/vortex */
[data-generator-id="singularity"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.5' d='M8 8c0-1 1-2 2-2s2 1 2 2-1 3-3 3-4-1-4-3 2-5 5-5 6 2 6 5'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.5' d='M8 8c0-1 1-2 2-2s2 1 2 2-1 3-3 3-4-1-4-3 2-5 5-5 6 2 6 5'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='white'/%3E%3C/svg%3E");
}

/* Transcendence - Crystal/diamond */
[data-generator-id="transcendence"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1L3 5l5 10 5-10-5-4zM5 5l3-2 3 2-3 7-3-7z'/%3E%3Cpath fill='none' stroke='white' stroke-width='0.5' d='M3 5h10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1L3 5l5 10 5-10-5-4zM5 5l3-2 3 2-3 7-3-7z'/%3E%3Cpath fill='none' stroke='white' stroke-width='0.5' d='M3 5h10'/%3E%3C/svg%3E");
}

/* Omniscience - Eye */
[data-generator-id="omniscience"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 3C4 3 1 8 1 8s3 5 7 5 7-5 7-5-3-5-7-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 3C4 3 1 8 1 8s3 5 7 5 7-5 7-5-3-5-7-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='white'/%3E%3C/svg%3E");
}

/* Universe - Galaxy/stars */
[data-generator-id="universe"] .gen-btn__emoji {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='8' rx='7' ry='3' stroke='white' stroke-width='1' fill='none' transform='rotate(-20 8 8)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='white'/%3E%3Ccircle cx='3' cy='4' r='1' fill='white'/%3E%3Ccircle cx='12' cy='5' r='0.75' fill='white'/%3E%3Ccircle cx='4' cy='11' r='0.75' fill='white'/%3E%3Ccircle cx='13' cy='10' r='1' fill='white'/%3E%3Ccircle cx='6' cy='3' r='0.5' fill='white'/%3E%3Ccircle cx='11' cy='13' r='0.5' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='8' rx='7' ry='3' stroke='white' stroke-width='1' fill='none' transform='rotate(-20 8 8)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='white'/%3E%3Ccircle cx='3' cy='4' r='1' fill='white'/%3E%3Ccircle cx='12' cy='5' r='0.75' fill='white'/%3E%3Ccircle cx='4' cy='11' r='0.75' fill='white'/%3E%3Ccircle cx='13' cy='10' r='1' fill='white'/%3E%3Ccircle cx='6' cy='3' r='0.5' fill='white'/%3E%3Ccircle cx='11' cy='13' r='0.5' fill='white'/%3E%3C/svg%3E");
}

/* ============================================
   ACHIEVEMENT ICONS
   ============================================ */

.achievement__icon {
    font-size: 0 !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--phosphor-bright);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 0 3px var(--phosphor-glow));
}

/* Locked achievements - dimmed lock icon */
.achievement--locked .achievement__icon {
    background-color: var(--phosphor-dim);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 7V5c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1v7H3V7h1zm2 0h4V5c0-1.1-.9-2-2-2s-2 .9-2 2v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 7V5c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1v7H3V7h1zm2 0h4V5c0-1.1-.9-2-2-2s-2 .9-2 2v2z'/%3E%3C/svg%3E");
    opacity: 0.4;
    filter: none;
}

/* Unlocked achievements - bright star */
.achievement--unlocked .achievement__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0l2 5h5l-4 3 2 5-5-3-5 3 2-5-4-3h5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0l2 5h5l-4 3 2 5-5-3-5 3 2-5-4-3h5z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 6px var(--phosphor-glow));
}

/* Neuron milestones */
[data-achievement-id^="neurons_"] .achievement__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0l2 5h5l-4 3 2 5-5-3-5 3 2-5-4-3h5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 0l2 5h5l-4 3 2 5-5-3-5 3 2-5-4-3h5z'/%3E%3C/svg%3E");
}

.achievement--locked[data-achievement-id^="neurons_"] .achievement__icon {
    background-color: var(--phosphor-dim);
}

/* Generator milestones */
[data-achievement-id^="gen_"] .achievement__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 4l6-3 6 3v8l-6 3-6-3V4zm1 1v6l5 2V7L3 5zm10 0l-5 2v6l5-2V5zM8 2.5L4 4.5l4 2 4-2-4-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 4l6-3 6 3v8l-6 3-6-3V4zm1 1v6l5 2V7L3 5zm10 0l-5 2v6l5-2V5zM8 2.5L4 4.5l4 2 4-2-4-2z'/%3E%3C/svg%3E");
}

.achievement--locked[data-achievement-id^="gen_"] .achievement__icon {
    background-color: var(--phosphor-dim);
}

/* Era milestones */
[data-achievement-id^="era_"] .achievement__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='1.5' fill='none' d='M8 4V1M4 5L2 3m10 2l2-2M1 9h3m8 0h3M3 13l2-2m8 2l-2-2'/%3E%3Cpath fill='white' d='M4 15h8v-1c0-2-1.8-4-4-4s-4 2-4 4v1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='1.5' fill='none' d='M8 4V1M4 5L2 3m10 2l2-2M1 9h3m8 0h3M3 13l2-2m8 2l-2-2'/%3E%3Cpath fill='white' d='M4 15h8v-1c0-2-1.8-4-4-4s-4 2-4 4v1z'/%3E%3C/svg%3E");
}

.achievement--locked[data-achievement-id^="era_"] .achievement__icon {
    background-color: var(--phosphor-dim);
}

/* Trophy achievements */
[data-achievement-id$="_10"] .achievement__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1h8v2h3v4c0 1-1 2-2 2h-1c0 2-1 3-2 3v2h3v2H3v-2h3v-2c-1 0-2-1-2-3H3c-1 0-2-1-2-2V3h3V1zm-2 4v2h1V5H2zm11 0v2h1V5h-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1h8v2h3v4c0 1-1 2-2 2h-1c0 2-1 3-2 3v2h3v2H3v-2h3v-2c-1 0-2-1-2-3H3c-1 0-2-1-2-2V3h3V1zm-2 4v2h1V5H2zm11 0v2h1V5h-1z'/%3E%3C/svg%3E");
}

.achievement--locked[data-achievement-id$="_10"] .achievement__icon {
    background-color: var(--phosphor-dim);
}

/* ============================================
   LEADERBOARD RANK ICONS
   ============================================ */

.leaderboard-rank,
.mobile-leaderboard__rank {
    font-family: var(--font-body), 'VT323', monospace !important;
    color: var(--phosphor-bright);
    text-shadow: 0 0 4px var(--phosphor-glow);
}

.leaderboard-item--top1 .leaderboard-rank,
.mobile-leaderboard__item--top1 .mobile-leaderboard__rank {
    font-size: 1.4rem !important;
    font-weight: bold;
    color: var(--phosphor-bright);
    text-shadow: 0 0 10px var(--phosphor-glow), 0 0 20px var(--phosphor-glow);
}

.leaderboard-item--top2 .leaderboard-rank,
.mobile-leaderboard__item--top2 .mobile-leaderboard__rank {
    font-size: 1.3rem !important;
    font-weight: bold;
    color: var(--phosphor-medium);
    text-shadow: 0 0 8px var(--phosphor-glow), 0 0 15px var(--phosphor-glow);
}

.leaderboard-item--top3 .leaderboard-rank,
.mobile-leaderboard__item--top3 .mobile-leaderboard__rank {
    font-size: 1.2rem !important;
    font-weight: bold;
    color: var(--phosphor-dim);
    text-shadow: 0 0 6px var(--phosphor-glow);
}