/* Flex-MMORPG Unified Stylesheet Bundle */

/* --- BEGIN fonts.css --- */
/* Flex-MMORPG Local Fonts (Inter & Outfit) */
/* Mode hors-ligne PWA 100% autonome - Zero dependance externe */

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- END fonts.css --- */

/* --- BEGIN core/variables.css --- */
/* =========================
   THEME & VARIABLES
========================= */
:root{
  --char-color:#c94f4f;
  --ui-bg:#070a12;
  --ui-panel: var(--window-surface-soft, rgba(255, 255, 255, 0.03));
  --ui-panel-2: var(--window-body-bg, transparent);
  --ui-border: var(--window-border, rgba(255, 255, 255, 0.09));
  --ui-border-dark: var(--window-border, rgba(255, 255, 255, 0.09));
  --ui-gold: var(--window-accent, #f59e0b);
  --ui-text: var(--window-text, #f8fafc);
  --ui-green:#10b981;
  --ui-red:#ef4444;
  --ui-blue:#38bdf8;

  --shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35));

  --panel-gradient: var(--window-surface, rgba(14, 18, 27, 0.82));
  --radius:14px;

  --ui-gap: clamp(8px, 0.6vw, 16px);
  --panel-padding: clamp(8px, 1.2vw, 18px);
  --font-base: clamp(13px, 1.1vw, 16px);
}

/* Performance Mode Overrides for Low-End GPUs / Mobile Devices */
body.perf-no-blur *,
body.perf-no-blur .panel,
body.perf-no-blur .audio-controls-floating,
body.perf-no-blur .modal-content,
body.perf-no-blur .hud-panel,
body.perf-no-blur .chat-window,
body.perf-no-blur .party-panel,
body.perf-no-blur .overlay-window,
body.perf-no-blur #mapLoading {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.perf-low *,
body.perf-low .charSprite,
body.perf-low .monsterEntity,
body.perf-low .npcEntity,
body.perf-low .cosmetic-particle {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (max-width: 960px) {
  body:not(.perf-high-blur) *,
  body:not(.perf-high-blur) .panel,
  body:not(.perf-high-blur) .audio-controls-floating,
  body:not(.perf-high-blur) .modal-content,
  body:not(.perf-high-blur) .hud-panel,
  body:not(.perf-high-blur) .chat-window,
  body:not(.perf-high-blur) .party-panel,
  body:not(.perf-high-blur) .overlay-window {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =========================
   RESET / GLOBAL
========================= */
*{box-sizing:border-box}
html,body,ion-app,ion-content{
  height:100%;
  margin:0;
  padding:0;
  font-family:'Inter', sans-serif;
  background: radial-gradient(ellipse at 50% 15%, #182032 0%, #0d121f 55%, #060810 100%) !important;
  --background: radial-gradient(ellipse at 50% 15%, #182032 0%, #0d121f 55%, #060810 100%) !important;
  color:var(--ui-text);
  font-size:var(--font-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
a{color:var(--ui-gold);text-decoration:none;transition:color 0.2s}
a:hover{color:#ffd700}
button{
  font-family:inherit;
  cursor:pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Generic panel */
.panel{
  background: var(--window-surface, rgba(14, 18, 27, 0.82));
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09));
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 28px 24px;
  width: 90%;
  max-width: 480px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.panel h2 {
  margin: 0 0 8px 0;
  text-align: center;
  font-size: 1.5rem;
  color: var(--window-text, #f8fafc);
  font-weight: 700;
}

/* Premium Form Inputs */
.panel input[type="text"],
.panel input[type="password"],
.panel select,
.panel input:not([type="color"]) {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #f8fafc;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: none;
}

.panel input:focus,
.panel select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

/* Modern 2026 Theme-Reactive Buttons */
button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.stat-plus-btn):not(.step-btn):not(.statsCloseBtn):not(.statsNavTab):not(.spellsCloseBtn):not(.elem-filter-chip):not(.clear-search-btn):not(.clear-search):not([class*="clear-search"]):not(.reset-filters-btn):not(.alloc-btn):not(.boost-action-btn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.joinBtn):not(.deleteCharacterCross):not(.closeCardBtn):not([class*="CloseBtn"]):not([class*="closeBtn"]):not([class*="NavTab"]):not([class*="navTab"]):not([class*="TabBtn"]):not([class*="tab-btn"]):not([class*="tabBtn"]):not(.teleport-dest-btn):not(.teleporterButton):not(.tracker-expand-btn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn):not(.bug-icon-btn):not(.rot-btn):not(.destroyQtyControls button):not(.joinSpectatorBtn) {
  min-height: 38px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: var(--window-text, #f8fafc) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(8px) !important;
}

button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.stat-plus-btn):not(.step-btn):not(.statsCloseBtn):not(.statsNavTab):not(.spellsCloseBtn):not(.elem-filter-chip):not(.clear-search-btn):not(.clear-search):not([class*="clear-search"]):not(.reset-filters-btn):not(.alloc-btn):not(.boost-action-btn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.joinBtn):not(.deleteCharacterCross):not(.closeCardBtn):not([class*="CloseBtn"]):not([class*="closeBtn"]):not([class*="NavTab"]):not([class*="navTab"]):not([class*="TabBtn"]):not([class*="tab-btn"]):not([class*="tabBtn"]):not(.teleport-dest-btn):not(.teleporterButton):not(.tracker-expand-btn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn):not(.bug-icon-btn):not(.rot-btn):not(.destroyQtyControls button):hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.stat-plus-btn):not(.step-btn):not(.statsCloseBtn):not(.statsNavTab):not(.spellsCloseBtn):not(.elem-filter-chip):not(.clear-search-btn):not(.clear-search):not([class*="clear-search"]):not(.reset-filters-btn):not(.alloc-btn):not(.boost-action-btn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.joinBtn):not(.deleteCharacterCross):not(.closeCardBtn):not([class*="CloseBtn"]):not([class*="closeBtn"]):not([class*="NavTab"]):not([class*="navTab"]):not([class*="TabBtn"]):not([class*="tab-btn"]):not([class*="tabBtn"]):not(.teleport-dest-btn):not(.teleporterButton):not(.tracker-expand-btn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn):not(.bug-icon-btn):not(.rot-btn):not(.destroyQtyControls button):active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

button.dangerBtn {
  background: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  box-shadow: none !important;
}

button.dangerBtn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

button.successBtn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid #34d399 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

button.successBtn:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.55) !important;
}

.panel button {
  width: 100%;
  min-height: 46px;
  font-size: 14px;
}

.panel p {
  text-align: center;
  font-size: 13px;
  color: #a7977c;
  margin: 4px 0 0 0;
}

/* Utility */
.min-width-zero{min-width:0}
.hidden{display:none!important}
.center{display:flex;align-items:center;justify-content:center}

/* Service Health Status Indicators */
.server-status-container {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(216, 180, 106, 0.1);
  align-self: center;
}

.server-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: rgba(239, 230, 210, 0.7);
}

.server-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.server-status-dot.online {
  background-color: #4cd964;
  box-shadow: 0 0 10px #4cd964;
}

.server-status-dot.offline {
  background-color: #ff3b30;
  box-shadow: 0 0 10px #ff3b30;
}
/* --- END core/variables.css --- */

/* --- BEGIN core/layout.css --- */
/* =========================
   LAYOUT PRINCIPAL
========================= */
body:not(.in-game) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
}

body:not(.in-game) #gamePanel,
body:not(.in-game) #bottomUI {
  display: none !important;
}

#authView {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 1000 !important;
}

body.in-game {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1 {
  margin: 12px 16px;
  color: var(--ui-gold);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(216, 180, 106, 0.25)
}

/* =========================
   GAME AREA
========================= */
#gamePanel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  gap: var(--ui-gap);
  position: relative;
  overflow: hidden;
}

#mapContainer {
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

#gameWorld {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  flex: none;
  pointer-events: none;
}

#gameWorld > * {
  pointer-events: auto;
}

/* Floating overlay mount containers - prevent flex flow gap interference in #gamePanel */
#partyPanel,
#questTracker,
#colosseumTracker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 990;
}

#partyPanel > *,
#questTracker > *,
#colosseumTracker > * {
  pointer-events: auto;
}

#mapContainer.isometric-mode {
  padding: 0;
}

/* Audio controls floating widget */
.audio-controls-floating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30, 24, 20, 0.9);
  border: 1px solid rgba(216, 180, 106, 0.35);
  padding: 6px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.audio-controls-floating:hover {
  border-color: rgba(216, 180, 106, 0.6);
}

.audio-controls-floating .slider-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.audio-controls-floating .audio-slider-label {
  font-size: 11px;
  color: var(--ui-gold);
  cursor: default;
  user-select: none;
}

#audioMuteBtn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: var(--ui-gold);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
}

#audioMuteBtn:hover {
  transform: scale(1.15);
}

#audioMusicVolumeSlider,
#audioSFXVolumeSlider {
  width: 45px;
  height: 4px;
  accent-color: var(--ui-gold);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   GLOBAL RICH FLOATING GAME ITEM TOOLTIP STYLING
   ========================================================================== */
.game-rich-tooltip {
  position: fixed;
  z-index: 9999999;
  pointer-events: none;
  background: rgba(16, 19, 13, 0.95);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--window-border, rgba(216, 180, 106, 0.25));
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  max-width: 300px;
  min-width: 230px;
  color: #efe6d2;
  font-family: 'Outfit', sans-serif;
  transition: opacity 0.15s ease;
}

.game-rich-tooltip.rarity-legendary {
  border-color: #ffd700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
}
.game-rich-tooltip.rarity-epic {
  border-color: #a29bfe;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
}
.game-rich-tooltip.rarity-rare {
  border-color: #74b9ff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
}
.game-rich-tooltip.rarity-uncommon {
  border-color: #55efc4;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
}

.tooltip-card-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tooltip-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.2);
}

.tooltip-item-icon-box {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(216, 180, 106, 0.4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   UNIVERSAL DEAD-CENTER OVERRIDE FOR ITEM SPRITES IN SLOTS & TOOLTIPS
   ========================================================================== */
.tradeItemIcon .equipment-css-render,
.tooltip-item-icon-box .equipment-css-render,
.tradeItem .equipment-css-render,
.equipment-css-render {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tradeItemIcon .equipment-css-render .charSprite,
.tooltip-item-icon-box .equipment-css-render .charSprite,
.tradeItem .equipment-css-render .charSprite {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(1.3) !important;
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
}

.tradeItemIcon .equipment-css-render .charSprite > div,
.tooltip-item-icon-box .equipment-css-render .charSprite > div,
.tradeItem .equipment-css-render .charSprite > div {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.tradeItemIcon .equipment-css-render .charSprite > div:not(.charHeadgear):not(.charCape):not(.charAmulet):not(.charRing):not(.charBelt):not(.charBoots):not(.charWeapon):not(.charShield):not(.charPet):not(.charAxe):not(.charShovel):not(.item-custom-icon),
.tooltip-item-icon-box .equipment-css-render .charSprite > div:not(.charHeadgear):not(.charCape):not(.charAmulet):not(.charRing):not(.charBelt):not(.charBoots):not(.charWeapon):not(.charShield):not(.charPet):not(.charAxe):not(.charShovel):not(.item-custom-icon) {
  display: none !important;
}

.tradeItemIcon .equipment-css-render .charSprite > div.charWeapon,
.tooltip-item-icon-box .equipment-css-render .charSprite > div.charWeapon,
.tradeItemIcon .equipment-css-render .charSprite > div.charStaff,
.tooltip-item-icon-box .equipment-css-render .charSprite > div.charStaff,
.tradeItemIcon .equipment-css-render .charSprite > div.charBow,
.tooltip-item-icon-box .equipment-css-render .charSprite > div.charBow,
.tradeItemIcon .equipment-css-render .charSprite > div.charAxe,
.tooltip-item-icon-box .equipment-css-render .charSprite > div.charAxe,
.tradeItemIcon .equipment-css-render .charSprite > div.charShovel,
.tooltip-item-icon-box .equipment-css-render .charSprite > div.charShovel {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) rotate(-15deg) !important;
}

.tooltip-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tooltip-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ui-gold, #ffd700);
  line-height: 1.2;
  word-break: break-word;
}
.game-rich-tooltip.rarity-legendary .tooltip-item-name { color: #ffeaa7; text-shadow: 0 0 8px rgba(255,215,0,0.6); }
.game-rich-tooltip.rarity-epic .tooltip-item-name { color: #d6a2e8; text-shadow: 0 0 8px rgba(162,155,254,0.6); }
.game-rich-tooltip.rarity-rare .tooltip-item-name { color: #81ecec; text-shadow: 0 0 8px rgba(116,185,255,0.6); }
.game-rich-tooltip.rarity-uncommon .tooltip-item-name { color: #55efc4; }

.tooltip-item-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
}

.tooltip-stats-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tooltip-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d8b46a;
  font-weight: 700;
  margin-bottom: 2px;
}

.tooltip-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #efe6d2;
}

.tooltip-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.tooltip-description {
  font-size: 0.78rem;
  font-style: italic;
  color: #cbd5e1;
  line-height: 1.3;
}

.tooltip-quantity {
  font-size: 0.78rem;
  color: #ffd700;
  text-align: right;
}

.tooltip-footer-hint {
  font-size: 0.68rem;
  color: #64748b;
  text-align: center;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 4px;
  margin-top: 2px;
}
/* --- END core/layout.css --- */

/* --- BEGIN ui/bottom-ui.css --- */
/* =========================
   BOTTOM UI GRID
========================= */
#bottomUI {
  position: relative;
  width: 100%;
  height: 220px;
  display: grid;
  grid-template-columns: minmax(320px, 2.2fr) minmax(230px, 270px) minmax(360px, 460px) minmax(140px, 175px);
  gap: var(--ui-gap, 8px);
  padding: 8px;
  background: var(--window-surface-strong, rgba(10, 14, 22, 0.85)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--window-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  align-items: stretch;
  z-index: 1000;
  box-sizing: border-box;
}

#chatSection, #minimapContainer, #hudSection, #optionsSection {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  background: var(--window-surface, rgba(14, 18, 27, 0.75)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--window-radius-sm, 10px) !important;
}

@media (min-width: 1025px) {
  #bottomUI {
    height: 220px;
    max-height: 228px;
    grid-template-columns: minmax(320px, 2.2fr) minmax(230px, 270px) minmax(360px, 460px) minmax(140px, 175px);
    gap: 8px;
    padding: 8px;
  }
}

/* ====================================================
   SPECTATOR MODE PILL (ACTIVE COMBATS ON CURRENT MAP)
   Placed in Bottom-Left, resting right above the Chat
   ==================================================== */
.map-spectator-pill {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1a1325;
  background: linear-gradient(180deg, #241b35 0%, #160f22 100%);
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.6);
  border-radius: 14px;
  padding: 4px 10px;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.70rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  animation: spectatorPillPopIn 0.25s ease-out forwards;
}

.map-spectator-pill:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: #fde68a;
  color: #fff;
  background: linear-gradient(180deg, #302447 0%, #1e152e 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.95), 0 0 8px rgba(245, 158, 11, 0.6);
}

.map-spectator-pill:active {
  transform: scale(0.96);
}

.spectator-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
  flex-shrink: 0;
  animation: spectatorDotPulse 1.2s infinite ease-in-out;
}

@keyframes spectatorDotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.45;
  }
}

@keyframes spectatorPillPopIn {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* --- END ui/bottom-ui.css --- */

/* --- BEGIN ui/chat.css --- */
/* =========================
   CHAT PANEL
========================= */
#chatSection{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:var(--panel-gradient);
  border:1px solid var(--window-border, rgba(255, 255, 255, 0.08));
  border-radius:var(--radius);
  min-height:120px;
}

#chatBox{
  background: var(--window-body-bg, rgba(10, 14, 23, 0.8)) !important;
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--window-radius-sm, 10px);
  padding: 10px;
  color: var(--window-text, #f8fafc);
  font-size: 0.84rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
  max-height: none;
}

#chatControls{display:flex;gap:8px;align-items:center;margin-top:6px}
#chatControls select{
  width:140px;
  background: var(--window-surface-soft, rgba(18, 22, 34, 0.92)) !important;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35)) !important;
  color: var(--window-text, #f8fafc) !important;
  border-radius: var(--window-radius-sm, 10px);
  padding: 8px;
  font-family: 'Outfit', sans-serif;
}
#chatControls input{
  flex:1;
  padding:10px;
  border-radius: var(--window-radius-sm, 10px);
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35)) !important;
  background: var(--window-surface-soft, rgba(18, 22, 34, 0.92)) !important;
  color: var(--window-text, #f8fafc) !important;
  font-family: 'Outfit', sans-serif;
}
#chatControls button{
  width:96px;
  min-height:40px;
  background: linear-gradient(135deg, var(--window-accent, #f59e0b) 0%, #d97706 100%) !important;
  border: 1px solid var(--window-border, rgba(251, 191, 36, 0.5)) !important;
  color: #0b0f19 !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif;
  border-radius: var(--window-radius-sm, 10px);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* chat message classes */
.chat-msg{margin-bottom:4px;line-height:1.2;word-break:break-word}
.chat-clickable{
  cursor:pointer;
  border-radius:8px;
  padding:4px 6px;
  transition:background 0.15s ease, color 0.15s ease;
}
.chat-clickable:hover{
  background:rgba(216,180,106,0.12);
  color:#fff1cd;
}
.chat-sender-link{
  display:inline-flex;
  align-items:center;
  margin-left:2px;
}
.chat-position-link{
  display:inline-flex;
  align-items:center;
  margin-left:4px;
  font-weight:bold;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  color:#ffe09b;
}
.chat-quest-link{
  display:inline-flex;
  align-items:center;
  font-weight:bold;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  color:#d8b46a;
}
.chat-sender{font-weight:bold}
.chat-global, .chat-general{color:#ffffff}
.chat-guild{color:#7fc6ff}
.chat-party{color:#3a6cff}
.chat-trade{color:#d88a2b}
.chat-recruit{color:#7aff7a}
.chat-local{color:#7dd3fc}
.chat-private{color:#ff9cff}
.chat-combat{color:#ffa801}
.chat-msg.chat-critical,
.chat-combat.chat-critical {
  color: #ff5252 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(255, 23, 68, 0.4) !important;
}
.chat-msg .tag{font-weight:bold;color:rgba(255,255,255,0.85);margin-right:6px;font-size:0.9em}
.chat-time{font-family:monospace;font-size:0.85em;color:rgba(255,255,255,0.45);margin-right:6px}

/* =========================
   IN-GAME SPEECH BUBBLES
   ========================= */
.playerSpeechBubble {
  position: absolute;
  bottom: calc(100% + 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  max-width: 220px;
  min-width: 50px;
  width: max-content;
  padding: 6px 12px;
  border-radius: 9px;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  word-break: break-word;
  white-space: pre-wrap;
  color: #fbf7ee;
  background: linear-gradient(135deg, rgba(20, 16, 28, 0.95) 0%, rgba(32, 26, 44, 0.95) 100%);
  border: 1px solid rgba(216, 180, 106, 0.75);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 10px rgba(216, 180, 106, 0.25);
  backdrop-filter: blur(8px);
  animation: speechBubblePopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Pointer arrow */
.playerSpeechBubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(216, 180, 106, 0.85) transparent transparent transparent;
  display: block;
  width: 0;
  height: 0;
}

/* General-channel bubbles should stay legible over the isometric map. */
.playerSpeechBubble.bubble--general {
  max-width: 280px;
  padding: 8px 14px;
  font-size: 16px;
  line-height: 1.4;
}

/* Local channel variation (cyan/blue-ice accent) */
.playerSpeechBubble.bubble--local {
  background: linear-gradient(135deg, rgba(14, 24, 38, 0.95) 0%, rgba(20, 35, 54, 0.95) 100%);
  border: 1px solid rgba(125, 211, 252, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 10px rgba(125, 211, 252, 0.25);
  color: #f0fdf4;
}

.playerSpeechBubble.bubble--local::after {
  border-color: rgba(125, 211, 252, 0.85) transparent transparent transparent;
}

/* Fade out animation on expiration */
.playerSpeechBubble.bubble--fade-out {
  animation: speechBubbleFadeOut 0.4s ease-out forwards;
}

@keyframes speechBubblePopIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes speechBubbleFadeOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.9);
  }
}
/* --- END ui/chat.css --- */

/* --- BEGIN ui/minimap.css --- */
/* =========================
   MINIMAP
========================= */
#minimapContainer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px;
  border-radius:var(--radius);
  border:1px solid var(--window-border, rgba(255, 255, 255, 0.08));
  background:var(--panel-gradient);
  box-shadow:var(--shadow);
  width:100%;
  max-width:320px;
}

#minimapCoords{color:var(--ui-gold);font-size:0.95rem;text-align:center}
#minimap{
  width:clamp(150px,18vw,220px);
  height:clamp(150px,18vw,220px);
  border-radius:6px;
  border:1px solid rgba(216, 180, 106, 0.45);
  background:rgba(0,0,0,0.35);
  image-rendering:pixelated;
  box-shadow:inset 0 0 12px rgba(0,0,0,0.6);
}

.worldMapModal{
  position:fixed;
  inset:0;
  background:rgba(8,6,4,0.85);
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:3000;
}

.worldMapPanel{
  width:min(96vw, 1400px);
  height:min(92vh, 900px);
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border:2px solid rgba(216,180,106,0.72);
  background:linear-gradient(180deg, rgba(42,34,27,0.96), rgba(17,13,10,0.94));
  box-shadow:0 20px 45px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
}

.worldMapHeader{
  flex:none;
}

.worldMapToolbar{
  flex:none;
}

.worldMapViewport{
  flex:1;
  overflow:auto;
  border-top:1px solid rgba(216, 180, 106, 0.15);
  background: #0c2b45;
  padding:0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.worldMapViewport:active{cursor:grabbing;}

#worldMapCanvas{
  display:block;
  width:100%;
  height:100%;
  transform:none !important;
  box-shadow:none;
}

/* Dynamic Biome Themes for World Map Panel */
body.biome-plaine .worldMapPanel {
  border-color: rgba(168, 207, 69, 0.72) !important;
  background: linear-gradient(180deg, rgba(30, 42, 23, 0.98), rgba(16, 22, 10, 0.99)) !important;
}
body.biome-foret .worldMapPanel {
  border-color: rgba(125, 167, 68, 0.72) !important;
  background: linear-gradient(180deg, rgba(22, 33, 18, 0.98), rgba(11, 17, 9, 0.99)) !important;
}
body.biome-jungle .worldMapPanel {
  border-color: rgba(46, 139, 87, 0.72) !important;
  background: linear-gradient(180deg, rgba(14, 33, 23, 0.98), rgba(7, 17, 11, 0.99)) !important;
}
body.biome-montagne .worldMapPanel {
  border-color: rgba(125, 130, 138, 0.72) !important;
  background: linear-gradient(180deg, rgba(32, 33, 35, 0.98), rgba(16, 17, 18, 0.99)) !important;
}
body.biome-desert .worldMapPanel {
  border-color: rgba(243, 212, 130, 0.72) !important;
  background: linear-gradient(180deg, rgba(42, 35, 25, 0.98), rgba(21, 18, 13, 0.99)) !important;
}
body.biome-neige .worldMapPanel {
  border-color: rgba(203, 220, 230, 0.72) !important;
  background: linear-gradient(180deg, rgba(23, 28, 32, 0.98), rgba(12, 14, 16, 0.99)) !important;
}
body.biome-noel .worldMapPanel {
  border-color: rgba(255, 71, 87, 0.72) !important;
  background: linear-gradient(180deg, rgba(33, 14, 16, 0.98), rgba(17, 7, 8, 0.99)) !important;
}
body.biome-dinosaures .worldMapPanel {
  border-color: rgba(61, 106, 54, 0.72) !important;
  background: linear-gradient(180deg, rgba(18, 28, 16, 0.98), rgba(9, 14, 8, 0.99)) !important;
}
body.biome-volcan .worldMapPanel {
  border-color: rgba(255, 51, 0, 0.72) !important;
  background: linear-gradient(180deg, rgba(33, 15, 15, 0.98), rgba(17, 8, 8, 0.99)) !important;
}
body.biome-celeste .worldMapPanel {
  border-color: rgba(162, 155, 254, 0.72) !important;
  background: linear-gradient(180deg, rgba(22, 20, 31, 0.98), rgba(11, 10, 16, 0.99)) !important;
}
body.biome-minotor .worldMapPanel {
  border-color: rgba(160, 107, 62, 0.72) !important;
  background: linear-gradient(180deg, rgba(28, 22, 18, 0.98), rgba(14, 11, 9, 0.99)) !important;
}
body.biome-cimetiere .worldMapPanel {
  border-color: rgba(155, 89, 182, 0.72) !important;
  background: linear-gradient(180deg, rgba(22, 16, 25, 0.98), rgba(11, 8, 13, 0.99)) !important;
}
body.biome-eveilam .worldMapPanel {
  border-color: rgba(142, 197, 74, 0.72) !important;
  background: linear-gradient(180deg, rgba(24, 31, 18, 0.98), rgba(12, 16, 9, 0.99)) !important;
}
/* --- END ui/minimap.css --- */

/* --- BEGIN ui/hud.css --- */
/* =========================
   HUD
========================= */
#hudSection{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--ui-border);
  background:var(--panel-gradient);
  min-width:220px;
}
#hudSection button,
#optionsSection button {
  width: 100%;
  min-height: 44px;
  background: var(--window-surface-soft, rgba(18, 22, 34, 0.92)) !important;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.22)) !important;
  color: var(--window-text, #f8fafc) !important;
  border-radius: var(--window-radius-sm, 10px) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#hudSection button:hover,
#optionsSection button:hover:not(#openShopBtn):not(#exitDungeonBtn) {
  border-color: var(--window-accent, #f59e0b) !important;
  color: #ffffff !important;
  background: var(--window-accent-soft, rgba(245, 158, 11, 0.18)) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px var(--window-accent-soft, rgba(245, 158, 11, 0.25)) !important;
}

@media (min-width: 1025px) {
  #hudSection {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-content: stretch;
    gap: 5px;
    padding: 6px;
    overflow: hidden;
  }

  #hudSection button {
    min-height: 0;
    height: 100%;
    font-size: 0.74rem;
    padding: 2px 4px;
    margin: 0;
    border-radius: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
#hudShortcutHint,
#optionsShortcutHint{margin:0;font-size:0.9rem;color:#d7ccb4;line-height:1.35;}
#optionsShortcutHint{margin-top:auto;}

#hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#hud > div{
  background:linear-gradient(180deg,#1d1813,#15110d);
  border:1px solid #5f4827;
  border-radius:10px;
  padding:8px;
  color:#e5dcc9;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.95rem;
}

.statsCard{
  width:min(560px, calc(100vw - 24px));
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}

.statsCard .overlayCardHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:8px 12px;
  padding:14px 16px 10px;
}

.statsCard .overlayCardHeader > div{
  min-width:0;
  display:grid;
  gap:4px;
}

.statsCard .overlayCardHeader h2{
  font-size:clamp(0.98rem,1.3vw,1.3rem);
  line-height:1.08;
}

.statsCard .overlayCardHeader p{
  font-size:clamp(0.7rem,0.85vw,0.84rem);
  line-height:1.28;
  max-width:42ch;
}

#closeStatsPanelBtn{
  min-height:32px !important;
  padding:6px 12px !important;
  border-radius:8px !important;
  font-size:0.7rem !important;
  line-height:1 !important;
  align-self:start;
  justify-self:end;
}

.overlayStatsGrid{
  flex:1;
  overflow-y:auto;
  min-height:0;
  padding:0 16px 16px;
}

.statItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#1d1813;
  border:1px solid #5f4827;
  border-radius:14px;
  font-size:0.84rem;
}
.statItem span{margin-left:auto;color:var(--ui-gold);font-weight:bold}

.xpBarContainer{
  grid-column:1 / -1;
  display:block !important;
  margin-top:6px !important;
  margin-bottom:8px !important;
  padding:10px 12px;
  background:#1d1813;
  border:1px solid #5f4827;
  border-radius:14px;
}

#hud > .xpBarContainer{
  display:grid !important;
  gap:7px;
  align-items:stretch;
  justify-content:initial;
  min-height:72px;
}

.xpBarHeader{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}

.xpBarBadge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#7a5a23,#4f3916);
  border:1px solid rgba(216,180,106,0.5);
  color:#fff0c8;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.08em;
}

.xpBarLabel{
  color:#d7ccb4;
  font-size:0.82rem;
  font-weight:600;
}

.xpBarOuter{
  width:100%;
  background:#0d0a07;
  border:1.5px solid #d8b46a;
  border-radius:999px;
  height:16px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.85), 0 2px 4px rgba(0,0,0,0.5);
}

.xpBarInner{
  background:linear-gradient(90deg,#1b7ba9,#3498db,#00d2ff);
  height:100%;
  width:0%;
  transition:width 0.4s cubic-bezier(0.1,0.8,0.2,1);
  position:absolute;
  left:0;
  top:0;
  box-shadow:0 0 10px rgba(52,152,219,0.6);
}

.xpBarGloss{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%);
  pointer-events:none;
  z-index:1;
}

.xpBarValue{
  position:relative;
  font-size:0.68rem;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 1px 3px #000, 0 0 5px #000, 0 0 8px #000;
  z-index:2;
  font-family:'Outfit', 'Inter', monospace;
  letter-spacing:0.03em;
}

.statItem--allocatable{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
}

.statItem--allocatable > span{
  margin-left:0;
}

.statAllocGroup{
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  flex:0 0 auto;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(34,24,15,0.96), rgba(20,14,9,0.96)) !important;
  border:1px solid rgba(221, 190, 118, 0.45) !important;
  padding:2px 3px !important;
  border-radius:999px !important;
  min-height:auto !important;
}

.statAllocInput{
  width:32px !important;
  height:24px !important;
  text-align:center;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  color:#fff !important;
  font-size:0.78rem !important;
  padding:0 2px !important;
  appearance:textfield;
  -moz-appearance:textfield;
}

.statAllocInput::-webkit-outer-spin-button,
.statAllocInput::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.statAllocGroup .statPlusBtn{
  width:24px;
  height:24px;
  border:none;
  border-left:1px solid rgba(221, 190, 118, 0.32);
  border-radius:999px;
  background:transparent;
}

/* =========================
   OPTIONS
========================= */
#optionsSection{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--ui-border);
  background:var(--panel-gradient);
  align-items:stretch;
}


/* --- END ui/hud.css --- */

/* --- BEGIN ui/friends.css --- */
/* =========================
   FRIENDS LIST
   ========================= */

.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(216, 180, 106, 0.12);
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

.friend-row:hover {
  background: rgba(216, 180, 106, 0.05);
  border-color: rgba(216, 180, 106, 0.25);
}

.friend-avatar {
  flex-shrink: 0;
}

.friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.friend-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.friend-name {
  color: var(--ui-text);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.friend-status-badge.online {
  color: #8fa677;
}

.friend-status-badge.offline {
  color: #a7977c;
}

.friend-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.friend-status-dot.online {
  background-color: #8fa677;
  box-shadow: 0 0 6px #8fa677;
}

.friend-status-dot.offline {
  background-color: #554a3c;
}

.friend-meta {
  color: #a7977c;
  font-size: 0.8rem;
}

.friend-location {
  color: var(--ui-gold);
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scrollbar styling inside list */
#friendsList::-webkit-scrollbar {
  width: 6px;
}
#friendsList::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
#friendsList::-webkit-scrollbar-thumb {
  background: rgba(216, 180, 106, 0.3);
  border-radius: 3px;
}
#friendsList::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 180, 106, 0.5);
}

/* --- END ui/friends.css --- */

/* --- BEGIN ui/guild.css --- */
/* =========================
   GUILD INTERFACE STYLING
   ========================= */

.guild-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(216, 180, 106, 0.05);
  border: 1px solid rgba(216, 180, 106, 0.2);
  border-radius: 8px;
  margin-bottom: 12px;
}

.guild-title-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guild-display-name {
  color: #efe6d2;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.guild-members-count {
  font-size: 0.8rem;
  color: var(--ui-gold, #d8b46a);
  font-weight: 600;
}

.guild-view-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guild-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.guild-form-title {
  color: #efe6d2;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.15);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.guild-form-description {
  font-size: 0.78rem;
  color: #a7977c;
  line-height: 1.3;
}

.guild-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(216, 180, 106, 0.12);
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

.guild-member-row:hover {
  background: rgba(216, 180, 106, 0.05);
  border-color: rgba(216, 180, 106, 0.25);
}

.guild-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guild-member-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.guild-member-name {
  color: var(--ui-text, #efe6d2);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-rank-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.guild-rank-badge.owner {
  background: rgba(184, 134, 11, 0.2);
  border: 1px solid rgba(218, 165, 32, 0.4);
  color: #ffd700;
}

.guild-rank-badge.member {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #efe6d2;
}

.guild-member-meta {
  color: #a7977c;
  font-size: 0.8rem;
}

.guild-member-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guild-member-status.online {
  color: #8fa677;
}

.guild-member-status.offline {
  color: #a7977c;
}

.guild-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.guild-status-dot.online {
  background-color: #8fa677;
  box-shadow: 0 0 6px #8fa677;
}

.guild-status-dot.offline {
  background-color: #554a3c;
}

/* Scrollbar styling inside list */
#guildMemberList::-webkit-scrollbar {
  width: 6px;
}
#guildMemberList::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
#guildMemberList::-webkit-scrollbar-thumb {
  background: rgba(216, 180, 106, 0.3);
  border-radius: 3px;
}
#guildMemberList::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 180, 106, 0.5);
}

/* --- END ui/guild.css --- */

/* --- BEGIN ui/quests.css --- */
/* =========================
   QUEST BOOK
   ========================= */

.questsContent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 18px;
  overflow-y: auto;
  flex: 1;
}

/* Quest Item Container */
.quest-item {
  background: rgba(26, 21, 17, 0.7);
  border: 1px solid #5f4827;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.quest-item:hover {
  border-color: var(--ui-gold);
  background: rgba(38, 30, 24, 0.85);
  box-shadow: 0 6px 12px rgba(216, 180, 106, 0.15);
}

/* Header (Title & Level tag) */
.quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.quest-title {
  color: var(--ui-gold);
  font-weight: 700;
  font-size: 1.02rem;
  font-family: 'Outfit', sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.quest-level {
  font-size: 0.76rem;
  font-weight: 700;
  color: #d7ccb4;
  background: rgba(167, 151, 124, 0.15);
  border: 1px solid rgba(216, 180, 106, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Description */
.quest-desc {
  font-size: 0.86rem;
  color: #ddd3bf;
  line-height: 1.4;
  font-family: 'Inter', sans-serif;
}

/* Progress bar container */
.quest-progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.quest-progress-bar {
  flex: 1;
  height: 8px;
  background: #0d0a07;
  border-radius: 999px;
  border: 1px solid rgba(216, 180, 106, 0.3);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.quest-progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #b8860b, #d8b46a, #ffd700);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  transition: width 0.3s ease;
}

.quest-progress-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Outfit', monospace;
  min-width: 32px;
  text-align: right;
  text-shadow: 0 1px 2px #000;
}

/* Rewards section */
.quest-rewards {
  font-size: 0.82rem;
  color: #7aff7a;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  border-top: 1px dashed rgba(216, 180, 106, 0.18);
  padding-top: 8px;
}

.quest-reward-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Tab button customizations (matching variables.css/hud.css) */
.socialTabs .tabBtn,
.questsTabs .tabBtn {
  background: transparent;
  border: none;
  color: #a7977c;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 4px;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.socialTabs .tabBtn:hover,
.questsTabs .tabBtn:hover {
  color: #fff1cd;
  background: rgba(216, 180, 106, 0.05);
}

.socialTabs .tabBtn.active,
.questsTabs .tabBtn.active {
  color: var(--ui-gold);
  border-bottom-color: var(--ui-gold);
  background: rgba(216, 180, 106, 0.08);
}

/* =========================
   TUTORIAL HELPER SYSTEM
   ========================= */

.tutorial-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #ffcd38;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 4px #ffcd38);
  z-index: 99999;
  pointer-events: none;
  animation: tuto-arrow-float-down 0.8s infinite alternate ease-in-out;
}

.tutorial-arrow.arrow-up {
  border-top: none;
  border-bottom: 15px solid #ffcd38;
  animation: tuto-arrow-float-up 0.8s infinite alternate ease-in-out;
}

.tutorial-arrow.arrow-left {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: none;
  border-right: 15px solid #ffcd38;
  animation: tuto-arrow-float-left 0.8s infinite alternate ease-in-out;
}

.tutorial-arrow.arrow-right {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: none;
  border-left: 15px solid #ffcd38;
  animation: tuto-arrow-float-right 0.8s infinite alternate ease-in-out;
}

@keyframes tuto-arrow-float-down {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

@keyframes tuto-arrow-float-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(6px); }
}

@keyframes tuto-arrow-float-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(6px); }
}

@keyframes tuto-arrow-float-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(-6px); }
}

/* Pulsing outline highlight for target elements */
.tutorial-highlight {
  position: relative;
}
.tutorial-highlight::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #ffcd38;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 8px #ffcd38;
  animation: tuto-pulse 1.2s infinite ease-in-out;
  z-index: 99998;
}

@keyframes tuto-pulse {
  0% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* --- END ui/quests.css --- */

/* --- BEGIN ui/overlays.css --- */
/* =========================
   OVERLAYS
========================= */
.overlayPanel{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  pointer-events:none;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:3200;
}

.overlayPanel.hidden {
  display: none !important;
  pointer-events: none !important;
}

.overlayPanel:not(.hidden) {
  pointer-events: auto !important;
  background: rgba(3, 6, 12, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================
   UNIVERSAL WINDOW HEADER (GAME GRAPHIC CHARTER + INVENTORY STRUCTURE)
   ========================= */
.overlayCard:not(.statsModalWindow):not(.spellsModalWindow):not(.craftCard),
.optionsCard,
.optionsVueCard,
.inventoryCard,
.bankCard,
.merchantCard,
.socialCard,
.questsCard,
.encyclopediaCard,
.ladderCard,
[class*="Card"]:not(.statsCard):not(.statsModalWindow):not(.spellsCard):not(.spellsModalWindow):not(.craftCard):not(.stat-row-card):not(.res-card-chip):not(.spell-row-card-container):not(.mapCombatsCard) {
  width: min(540px, calc(100vw - 16px));
  max-height: calc(100vh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  pointer-events: auto;
  border-radius: var(--window-radius, 14px);
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09)) !important;
  background: var(--window-surface, rgba(14, 18, 27, 0.82)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
  color: var(--window-text, #f8fafc) !important;
}

#colosseumModal,
#systemMenuModal,
.systemMenuOverlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.overlayCardHeader,
.inventoryCard .overlayCardHeader,
.statsCard .overlayCardHeader,
.spellsCard .overlayCardHeader,
.craftCard .overlayCardHeader,
.bankCard .overlayCardHeader,
.merchantCard .overlayCardHeader,
.optionsVueCard .overlayCardHeader,
.socialCard .overlayCardHeader,
.questsCard .overlayCardHeader,
.encyclopediaCard .overlayCardHeader,
.ladderCard .overlayCardHeader {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 20px 10px !important;
  background: var(--window-header-bg, transparent) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 0 !important;
  border-radius: var(--window-radius, 14px) var(--window-radius, 14px) 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.overlayCardHeader > div {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

.overlayCardHeader h2,
.overlayCardHeader .header-title,
.inventoryCard .overlayCardHeader h2,
.statsCard .overlayCardHeader h2,
.spellsCard .overlayCardHeader h2,
.craftCard .overlayCardHeader h2,
#spellsModal .overlayCardHeader h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--window-text, #f8fafc) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  font-family: 'Outfit', sans-serif !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.overlayCardHeader p,
.inventoryCard .overlayCardHeader p,
.statsCard .overlayCardHeader p,
.spellsCard .overlayCardHeader p,
#spellsModal .overlayCardHeader p {
  display: none !important;
}

/* Universal Top Right Close Cross Button */
.closeCardBtn,
.overlayCardHeader .closeCardBtn,
[class*="CloseBtn"],
#closeInventoryPanelBtn,
#closeSpellsPanelBtn,
#closeStatsPanelBtn {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.closeCardBtn,
.overlayCardHeader .closeCardBtn,
#closeInventoryPanelBtn,
#closeSpellsPanelBtn,
#closeStatsPanelBtn {
  position: absolute !important;
  right: 16px !important;
  top: 12px !important;
  left: auto !important;
  transform: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--window-text-muted, #94a3b8) !important;
  font-size: 20px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  line-height: 1 !important;
}

.closeCardBtn:hover,
.overlayCardHeader .closeCardBtn:hover,
#closeInventoryPanelBtn:hover,
#closeSpellsPanelBtn:hover,
#closeStatsPanelBtn:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
}

/* Universal Tab Bar Header (Gold Active Indicator) */
.tabHeader,
.bagTabs,
.sheet-tabs,
.enc-tabs,
.socialTabs,
.optionsVueTabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #241d17;
  border-bottom: 1px solid rgba(216, 180, 106, 0.2);
  padding: 0 12px;
}

.tabBtn,
.bagTabBtn,
.sheet-tab-btn,
.enc-tab-btn,
.cat-tab,
.socialTabBtn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #a7977c !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-radius: 0 !important;
}

.tabBtn.active,
.bagTabBtn.active,
.sheet-tab-btn.active,
.enc-tab-btn.active,
.cat-tab.active,
.socialTabBtn.active {
  color: var(--ui-gold, #d8b46a) !important;
  border-bottom: 2px solid var(--ui-gold, #d8b46a) !important;
  background: rgba(216, 180, 106, 0.08) !important;
}
.statsCard{width:min(520px, calc(100vw - 24px));}
.spellsCard{width:min(920px, calc(100vw - 24px));}
.overlayStatsGrid{padding:0 18px 18px;}
.overlaySpellsContent{padding:0 18px 18px;display:grid;gap:12px;}

/* Spells panel */
.spellsPanelSummary{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(216,180,106,0.24);
  background:linear-gradient(180deg, rgba(23,17,13,0.92), rgba(16,11,9,0.88));
  color:#e5d8bc;
  line-height:1.4;
}
.spellsPanelList{display:grid;gap:10px;}
.spellsPanelItem{
  --spell-accent: rgba(216,180,106,0.32);
  padding:14px;
  border-radius:14px;
  border:2px solid var(--spell-accent);
  background:linear-gradient(180deg, rgba(24,18,14,0.94), rgba(15,11,8,0.92));
  display:grid;
  gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.18);
}
.spellsPanelItem--force{
  --spell-accent: rgba(233, 195, 78, 0.72);
}
.spellsPanelItem--intelligence{
  --spell-accent: rgba(210, 74, 74, 0.76);
}
.spellsPanelItem--chance{
  --spell-accent: rgba(62, 130, 219, 0.76);
}
.spellsPanelItem--agilite{
  --spell-accent: rgba(122, 138, 71, 0.78);
}
.spellsPanelItem--neutral{
  --spell-accent: rgba(216,180,106,0.42);
}
.spellsPanelItem--locked{
  opacity:0.72;
  background:linear-gradient(180deg, rgba(28,26,28,0.94), rgba(16,14,18,0.92));
}
.spellsPanelItemHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.spellsPanelItemTitleWrap,
.combatSpellTitleWrap{display:inline-flex;align-items:center;gap:10px;}
.spellsPanelItemName{color:#ffe5b2;font-weight:bold;}
.spellsPanelItemMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:#d7ccb4;
  font-size:0.92rem;
}
.spellsPanelItemDescription{
  color:#d7ccb4;
  font-size:0.92rem;
  line-height:1.4;
}

/* Stats overlay */
.overlayStatsGrid .statItem,
.overlayStatsGrid > div{min-height:44px;}
.statItem--allocatable{justify-content:space-between;}
.statPlusBtn{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(221, 190, 118, 0.4);
  background:linear-gradient(180deg, rgba(69,47,19,0.96), rgba(38,24,11,0.94));
  color:#ffe4ab;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.statPlusBtn:disabled{opacity:0.45;cursor:not-allowed;}

/* System menu */
.systemMenuCard{width:min(360px, calc(100vw - 24px));}
.systemMenuActions{
  display:grid;
  gap:12px;
  padding:0 18px 18px;
}
.systemMenuActions button{min-height:48px;}

/* =======================================
   NPC SYSTEM & DIALOGUE WINDOW
   ======================================= */
.npcDialogueModal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  z-index: 4000;
  pointer-events: auto;
}

.npcDialogueModal.hidden {
  display: none !important;
}

.npcDialogueContainer {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  background: var(--window-surface, rgba(14, 18, 27, 0.85)) !important;
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 14px;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
  font-family: 'Outfit', sans-serif;
  color: var(--window-text, #f8fafc);
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  min-height: 200px;
}

.npcDialogueHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.npcDialogueName {
  font-size: 1.25rem;
  font-weight: bold;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.npcDialogueCloseBtn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 0.8;
  transition: color 0.15s ease;
}

.npcDialogueCloseBtn:hover {
  color: #ff4d4d;
}

.npcDialogueContent {
  display: flex;
  gap: 24px;
  flex: 1;
}

.npcDialogueVisualContainer {
  width: 90px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.npcDialogueSprite {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%) scale(2.2);
  transform-origin: bottom center;
}

.npcDialogueTextContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.npcDialogueText {
  margin: 0 0 16px 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #e5dcc9;
}

.npcDialogueChoices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.npcChoiceBtn {
  background: rgba(216, 180, 106, 0.06);
  border: 1px solid rgba(216, 180, 106, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
  color: #ffe5b2;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
}

.npcChoiceBtn:hover {
  background: rgba(216, 180, 106, 0.15);
  border-color: #d8b46a;
  color: #fff;
  transform: translateX(4px);
}

/* =======================================
   NPC MAP ENTITY
   ======================================= */
.npcEntity {
  position: absolute;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  pointer-events: auto;
  cursor: pointer;
  z-index: 44;
}

.npcEntity.npc-character {
  height: 96px;
}
.npcEntity.npc-character .npcSprite {
  height: 96px;
}

.npcName {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(10, 15, 26, 0.88);
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Outfit', 'Inter', sans-serif;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.npcEntity:hover .npcName {
  border-color: #38bdf8;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.6);
  transform: translateX(-50%) translateY(-2px);
  color: #7dd3fc;
}

.npcSprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
}

/* NPC Feet & Boots Base */
.npcSprite .charFeet {
  display: block;
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  top: 45px;
  z-index: 1;
}

.npcSprite .charFeet::before,
.npcSprite .charFeet::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 9px;
  background: #3e2723;
  border: 1.5px solid #1c1511;
  border-radius: 2px 2px 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.npcSprite .charFeet::before {
  left: 1px;
}

.npcSprite .charFeet::after {
  right: 1px;
}

.npcEntity:hover {
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));
}

/* =======================================
   FAIRY CSS SPRITE (FÉE RISETTE)
   ======================================= */
@keyframes fairyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.npc-sprite-fairy {
  animation: fairyFloat 2.5s ease-in-out infinite;
}

/* Aura Glow */
.npc-sprite-fairy .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.45) 0%, rgba(255, 105, 180, 0.2) 55%, transparent 75%);
  filter: blur(4px);
  animation: fairyAuraPulse 2s ease-in-out infinite alternate;
  border: none;
  box-shadow: none;
  z-index: 0;
}

@keyframes fairyAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

/* Fairy Wings */
.npc-sprite-fairy .fairyWings {
  position: absolute;
  width: 50px;
  height: 30px;
  left: 7px;
  top: 22px;
  z-index: 1;
  pointer-events: none;
}

.npc-sprite-fairy .fairyWings::before,
.npc-sprite-fairy .fairyWings::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 25px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(0, 229, 255, 0.5) 60%, rgba(255, 105, 180, 0.4) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50% 50% 10% 50%;
  transform-origin: bottom right;
}

.npc-sprite-fairy .fairyWings::before {
  left: 4px;
  transform: rotate(-15deg);
  animation: fairyFlutterLeft 0.15s ease-in-out infinite alternate;
}

.npc-sprite-fairy .fairyWings::after {
  right: 4px;
  border-radius: 50% 50% 50% 10%;
  transform-origin: bottom left;
  transform: rotate(15deg);
  animation: fairyFlutterRight 0.15s ease-in-out infinite alternate;
}

@keyframes fairyFlutterLeft {
  0% { transform: rotate(-15deg) scaleX(0.8); }
  100% { transform: rotate(-45deg) scaleX(1.15); }
}

@keyframes fairyFlutterRight {
  0% { transform: rotate(15deg) scaleX(0.8); }
  100% { transform: rotate(45deg) scaleX(1.15); }
}

/* Fairy Body */
.npc-sprite-fairy .charBody {
  display: block;
  position: absolute;
  width: 14px;
  height: 22px;
  left: 25px;
  top: 25px;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #ff79c6 0%, #bd93f9 100%);
  border: 1.5px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.45);
  z-index: 2;
}

/* Fairy Head */
.npc-sprite-fairy .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 3;
}

/* Hair styling */
.npc-sprite-fairy .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  width: 20px;
  height: 12px;
  background: #ff92bd;
  border: 1.5px solid #1c1511;
  border-radius: 8px 8px 3px 3px;
}

/* Eyes */
.npc-sprite-fairy .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* Magic Wand */
.npc-sprite-fairy .fairyWand {
  position: absolute;
  width: 3px;
  height: 16px;
  left: 42px;
  top: 18px;
  background: #f1c40f;
  border: 1px solid #1c1511;
  border-radius: 1px;
  transform: rotate(25deg);
  z-index: 4;
}

.npc-sprite-fairy .fairyWand::before {
  content: "★";
  position: absolute;
  left: -6px;
  top: -12px;
  color: #fffb00;
  font-size: 12px;
  text-shadow: 0 0 6px #fffb00, 0 0 12px #fffb00;
  animation: fairyStarGlow 0.8s ease-in-out infinite alternate;
}

@keyframes fairyStarGlow {
  0% { opacity: 0.6; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.3); }
}


/* =======================================
   ALCHEMIST NPC SPRITE
   ======================================= */
.npc-sprite-alchemist {
  animation: fairyFloat 3s ease-in-out infinite;
}

.npc-sprite-alchemist .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 24px;
  left: 24px;
  top: 24px;
  background: linear-gradient(180deg, #6c5ce7 0%, #341f97 100%);
  border: 1.5px solid #1c1511;
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.npc-sprite-alchemist .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Alchemist Pointed Hat */
.npc-sprite-alchemist .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -8px;
  width: 20px;
  height: 12px;
  background: #341f97;
  border: 1.5px solid #1c1511;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 2px 0 #fdcb6e;
}

/* Face Eyes */
.npc-sprite-alchemist .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* Glowing Glass Flask */
.npc-sprite-alchemist::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 12px;
  left: 41px;
  top: 25px;
  background: radial-gradient(circle at 40% 40%, #55efc4 0%, #00cec9 70%, #0984e3 100%);
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 3px 3px;
  animation: potionGlow 1.5s ease-in-out infinite alternate;
  z-index: 4;
}

@keyframes potionGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 4px #00cec9; }
  100% { transform: scale(1.15); box-shadow: 0 0 10px #55efc4, 0 0 15px #00cec9; }
}

/* =======================================
   GUARDIAN NPC SPRITE
   ======================================= */
.npc-sprite-guardian {
  animation: guardianIdle 2.5s ease-in-out infinite;
  filter: drop-shadow(0 3px 2px rgba(14, 25, 39, 0.55));
}

@keyframes guardianIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.npc-sprite-guardian .charAura {
  position: absolute;
  width: 38px;
  height: 18px;
  left: 13px;
  top: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(251, 191, 36, 0.28), transparent 68%);
  z-index: 0;
}

.npc-sprite-guardian .fairyWings,
.npc-sprite-guardian .fairyWand,
.npc-sprite-guardian .charBoots {
  display: none !important;
}

.npc-sprite-guardian .charFeet {
  width: 18px;
  height: 10px;
  left: 23px;
  top: 45px;
  z-index: 2;
}

.npc-sprite-guardian .charFeet::before,
.npc-sprite-guardian .charFeet::after {
  width: 7px;
  height: 10px;
  background: linear-gradient(180deg, #283845, #101820) !important;
  border: 1.5px solid #101820;
  border-radius: 2px 2px 5px 5px;
}

.npc-sprite-guardian .charBody {
  display: block;
  position: absolute;
  width: 20px;
  height: 22px;
  left: 22px;
  top: 24px;
  background: linear-gradient(90deg, #17263a 0 18%, #46749e 20% 72%, #17263a 74%);
  border: 2px solid #1c1511;
  border-radius: 5px 5px 3px 3px;
  box-shadow: inset 2px 1px 2px rgba(255, 255, 255, 0.42), inset -3px 0 2px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.npc-sprite-guardian .charBody::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  left: 2px;
  top: 8px;
  background: #e6bd42;
  border: 1px solid #6b4210;
  box-shadow: 0 5px 0 #e6bd42;
}

.npc-sprite-guardian .charBody::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 15px;
  left: -7px;
  top: 3px;
  background: linear-gradient(180deg, #69849b, #243845);
  border: 1.5px solid #111a20;
  border-radius: 4px;
  box-shadow: 27px 0 0 -1.5px #243845, 27px 0 0 0 #111a20;
}

.npc-sprite-guardian .charHead {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 23px;
  top: 7px;
  border-radius: 7px 7px 50% 50%;
  background: #c7d4d9;
  border: 2px solid #111a20;
  z-index: 3;
}

/* Guardian Helmet Visor */
.npc-sprite-guardian .charHead::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -5px;
  width: 21px;
  height: 14px;
  background: linear-gradient(180deg, #dce8ee, #60707a 68%, #27333b 70%);
  border: 1.5px solid #1c1511;
  border-radius: 9px 9px 2px 2px;
  box-shadow: inset 0 3px 0 #fff0a3, 0 1px 0 #dba928;
}

/* Visor Slit */
.npc-sprite-guardian .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 12px;
  height: 3px;
  background: linear-gradient(90deg, #1c2730 0 25%, #ffdd65 28% 72%, #1c2730 75%);
  box-shadow: 0 0 5px #fdcb6e;
}

/* Shield */
.npc-sprite-guardian::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 16px;
  left: 9px;
  top: 29px;
  background: linear-gradient(135deg, #e6bd42 0 12%, #b51f30 14% 74%, #63121d 76%);
  border: 2px solid #1c1511;
  border-radius: 4px 4px 9px 9px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.45), inset 2px 1px 1px rgba(255,255,255,0.35);
  z-index: 4;
}

.npc-sprite-guardian::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 20px;
  left: 43px;
  top: 26px;
  background: linear-gradient(90deg, #6e4212 0 35%, #e8bd4b 38% 65%, #70430e 68%);
  border: 1px solid #24170d;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(255, 218, 88, 0.5);
  transform: rotate(20deg);
  z-index: 1;
}

/* =======================================
   PRIEST NPC SPRITE
   ======================================= */
.npc-sprite-priest {
  animation: priestFloat 2.5s ease-in-out infinite;
}

@keyframes priestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.npc-sprite-priest .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 26px;
  left: 24px;
  top: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fdcb6e 40%, #e17055 100%);
  border: 1.5px solid #1c1511;
  border-radius: 6px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.npc-sprite-priest .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Golden Halo */
.npc-sprite-priest .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -7px;
  width: 20px;
  height: 6px;
  border: 2px solid #fdcb6e;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffeaa7, inset 0 0 4px #fdcb6e;
  animation: haloGlow 1.8s ease-in-out infinite alternate;
}

@keyframes haloGlow {
  0% { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 12px #ffeaa7; }
}

/* Eyes */
.npc-sprite-priest .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* Divine Aura */
.npc-sprite-priest::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 234, 167, 0.5) 0%, rgba(253, 203, 110, 0.2) 60%, transparent 75%);
  filter: blur(4px);
  animation: auraPulse 2s ease-in-out infinite alternate;
  z-index: 0;
}

/* =======================================
   HUNTER NPC SPRITE
   ======================================= */
.npc-sprite-hunter {
  animation: npcIdle 2s infinite;
}

.npc-sprite-hunter .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 24px;
  left: 24px;
  top: 24px;
  background: linear-gradient(180deg, #00b894 0%, #2d3436 100%);
  border: 1.5px solid #1c1511;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.npc-sprite-hunter .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
  z-index: 3;
}

/* Ranger Feather Cap */
.npc-sprite-hunter .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -4px;
  width: 20px;
  height: 8px;
  background: #00b894;
  border: 1px solid #1c1511;
  border-radius: 4px 4px 0 0;
  box-shadow: -3px -3px 0 #d63031; /* Feather plume */
}

/* Eyes */
.npc-sprite-hunter .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* Bow */
.npc-sprite-hunter::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 22px;
  left: 42px;
  top: 20px;
  background: #634735;
  border: 1px solid #1c1511;
  border-radius: 3px;
  transform: rotate(-10deg);
  box-shadow: inset 1px 0 0 #d63031;
  z-index: 4;
}

/* =======================================
   MERCHANT / BROCANTEUR NPC SPRITE
   ======================================= */
.npc-sprite-merchant {
  animation: merchantIdle 3s ease-in-out infinite;
  filter: drop-shadow(0 3px 2px rgba(60, 31, 15, 0.5));
}

@keyframes merchantIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(-0.5deg); }
}

.npc-sprite-merchant .charAura {
  position: absolute;
  width: 35px;
  height: 14px;
  left: 14px;
  top: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(226, 113, 85, 0.3), transparent 70%);
  z-index: 0;
}

.npc-sprite-merchant .fairyWings,
.npc-sprite-merchant .fairyWand,
.npc-sprite-merchant .charBoots {
  display: none !important;
}

.npc-sprite-merchant .charFeet {
  width: 18px;
  height: 10px;
  left: 23px;
  top: 45px;
  z-index: 2;
}

.npc-sprite-merchant .charFeet::before,
.npc-sprite-merchant .charFeet::after {
  width: 7px;
  height: 10px;
  background: linear-gradient(180deg, #5a3420, #21130d) !important;
  border: 1.5px solid #21130d;
  border-radius: 2px 2px 5px 5px;
}

.npc-sprite-merchant .charBody {
  display: block;
  position: absolute;
  width: 20px;
  height: 22px;
  left: 22px;
  top: 24px;
  background: linear-gradient(90deg, #7c241d 0 20%, #e17055 22% 70%, #a72e22 72%);
  border: 2px solid #1c1511;
  border-radius: 5px 5px 3px 3px;
  box-shadow: inset 2px 1px 2px rgba(255, 255, 255, 0.38), inset -2px 0 2px rgba(55, 15, 10, 0.35);
  z-index: 2;
}

.npc-sprite-merchant .charBody::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 3px;
  left: 2px;
  top: 10px;
  background: #f2c55c;
  border-top: 1px solid #6e3515;
  border-bottom: 1px solid #6e3515;
}

.npc-sprite-merchant .charBody::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 14px;
  left: -7px;
  top: 4px;
  background: linear-gradient(180deg, #ffd5af, #c77959);
  border: 1.5px solid #51251a;
  border-radius: 4px;
  box-shadow: 27px 0 0 -1.5px #c77959, 27px 0 0 0 #51251a;
}

.npc-sprite-merchant .charHead {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 23px;
  top: 7px;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
  z-index: 3;
}

/* Merchant Turban */
.npc-sprite-merchant .charHead::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -5px;
  width: 23px;
  height: 11px;
  background: linear-gradient(180deg, #23a6f0, #1266b1);
  border: 1.5px solid #1c1511;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -2px 0 #fdcb6e, 0 1px 0 rgba(255,255,255,0.35);
}

/* Eyes */
.npc-sprite-merchant .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 9px;
  height: 11px;
  left: 43px;
  top: 31px;
  border-radius: 50%;
}

/* Detailed Leather Coin Pouch */
.npc-sprite-merchant::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 13px;
  left: 42px;
  top: 29px;
  background: radial-gradient(circle at 40% 40%, #fdcb6e 0%, #e67e22 70%, #d35400 100%);
  border: 1.5px solid #1c1511;
  border-radius: 4px 4px 7px 7px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 1px 1px 1px rgba(255,255,255,0.45);
  z-index: 4;
}

/* =======================================
   BLACKSMITH GROM CSS SPRITE
   ======================================= */
.npc-sprite-grom {
  animation: fairyFloat 3s ease-in-out infinite;
}

.npc-sprite-grom .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 126, 34, 0.4) 0%, rgba(231, 76, 60, 0.15) 60%, transparent 75%);
  filter: blur(3px);
  animation: gromAuraPulse 1.8s ease-in-out infinite alternate;
  border: none;
  box-shadow: none;
  z-index: 0;
}

@keyframes gromAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.npc-sprite-grom .charBody {
  display: block;
  position: absolute;
  width: 22px;
  height: 24px;
  left: 21px;
  top: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d35400 0%, #3e2723 100%);
  border: 2px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.npc-sprite-grom .charHead {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 23px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-grom .charHead::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -5px;
  width: 17px;
  height: 12px;
  background: #e67e22;
  border: 1.5px solid #1c1511;
  border-radius: 0 0 8px 8px;
}

.npc-sprite-grom .charHead::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-grom .fairyWand {
  position: absolute;
  width: 4px;
  height: 18px;
  left: 42px;
  top: 22px;
  background: #7f8c8d;
  border: 1.5px solid #1c1511;
  border-radius: 1px;
  transform: rotate(-15deg);
  z-index: 4;
}

.npc-sprite-grom .fairyWand::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -4px;
  width: 13px;
  height: 8px;
  background: #34495e;
  border: 1.5px solid #1c1511;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
  animation: none;
  opacity: 1;
  transform: none;
  color: transparent;
  text-shadow: none;
}

/* =======================================
   ARCHMAGE ELION CSS SPRITE
   ======================================= */
.npc-sprite-mage {
  animation: fairyFloat 3.5s ease-in-out infinite;
}

.npc-sprite-mage .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 89, 182, 0.4) 0%, rgba(52, 152, 219, 0.15) 60%, transparent 75%);
  filter: blur(4px);
  animation: mageAuraPulse 2.2s ease-in-out infinite alternate;
  border: none;
  box-shadow: none;
  z-index: 0;
}

@keyframes mageAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

.npc-sprite-mage .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 24px;
  left: 24px;
  top: 24px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #2980b9 0%, #2c3e50 100%);
  border: 1.5px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.npc-sprite-mage .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-mage .charHead::before {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -7px;
  width: 12px;
  height: 14px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 0 0 6px 6px;
}

.npc-sprite-mage .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-mage .fairyWings {
  position: absolute;
  width: 26px;
  height: 18px;
  left: 19px;
  top: 1px;
  z-index: 4;
  pointer-events: none;
  background: transparent;
}

.npc-sprite-mage .fairyWings::before {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  background: #1b4f72;
  border: 1.5px solid #1c1511;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: bottom center;
  animation: none;
}

.npc-sprite-mage .fairyWings::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 24px;
  height: 4px;
  background: #154360;
  border: 1.5px solid #1c1511;
  border-radius: 2px;
  transform-origin: bottom center;
  animation: none;
  transform: none;
}

.npc-sprite-mage .fairyWand {
  position: absolute;
  width: 3px;
  height: 28px;
  left: 43px;
  top: 10px;
  background: #8e44ad;
  border: 1px solid #1c1511;
  border-radius: 1px;
  transform: rotate(5deg);
  z-index: 4;
}

.npc-sprite-mage .fairyWand::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -6px;
  width: 7px;
  height: 7px;
  background: #5dade2;
  border: 1px solid #154360;
  border-radius: 50%;
  box-shadow: 0 0 8px #5dade2, 0 0 15px #3498db;
  animation: wizardOrbGlow 1.2s ease-in-out infinite alternate;
  color: transparent;
  text-shadow: none;
}

@keyframes wizardOrbGlow {
  0% { transform: scale(0.9); filter: brightness(1); }
  100% { transform: scale(1.35); filter: brightness(1.3); }
}

/* =======================================
   BLACKSMITH DURGAN CSS SPRITE
   ======================================= */
.npc-sprite-blacksmith {
  animation: fairyFloat 2.8s ease-in-out infinite;
}

.npc-sprite-blacksmith .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 82, 34, 0.45) 0%, rgba(243, 156, 18, 0.15) 60%, transparent 75%);
  filter: blur(3px);
  animation: gromAuraPulse 1.5s ease-in-out infinite alternate;
  z-index: 0;
}

.npc-sprite-blacksmith .charBody {
  display: block;
  position: absolute;
  width: 22px;
  height: 24px;
  left: 21px;
  top: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, #7f8c8d 0%, #3e2723 100%);
  border: 2px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.npc-sprite-blacksmith .charBody::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 14px;
  background: #d35400;
  border: 1px solid #1c1511;
  border-radius: 1px;
}

.npc-sprite-blacksmith .charHead {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 23px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-blacksmith .charHead::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -5px;
  width: 17px;
  height: 12px;
  background: #2c3e50;
  border: 1.5px solid #1c1511;
  border-radius: 0 0 8px 8px;
}

.npc-sprite-blacksmith .charHead::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-blacksmith .fairyWand {
  position: absolute;
  width: 4px;
  height: 18px;
  left: 42px;
  top: 22px;
  background: #95a5a6;
  border: 1.5px solid #1c1511;
  border-radius: 1px;
  transform: rotate(-20deg);
  z-index: 4;
}

.npc-sprite-blacksmith .fairyWand::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -4px;
  width: 14px;
  height: 9px;
  background: #2c3e50;
  border: 1.5px solid #1c1511;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
}

/* =======================================
   BANKER LORIS CSS SPRITE
   ======================================= */
.npc-sprite-banker {
  animation: fairyFloat 3.2s ease-in-out infinite;
}

.npc-sprite-banker .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.4) 0%, rgba(243, 156, 18, 0.1) 60%, transparent 75%);
  filter: blur(4px);
  animation: bankerAuraPulse 2s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes bankerAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.9; }
}

.npc-sprite-banker .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 24px;
  left: 23px;
  top: 25px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
  border: 2.5px solid #1c1511;
  z-index: 2;
}

.npc-sprite-banker .charBody::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 4px;
  height: 10px;
  background: #fff;
  box-shadow: 0 4px 0 #f1c40f;
}

.npc-sprite-banker .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-banker .charHead::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 5px;
  height: 5px;
  border: 1.5px solid #f1c40f;
  border-radius: 50%;
}

.npc-sprite-banker .charHead::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
}

.npc-sprite-banker .fairyWand {
  position: absolute;
  width: 6px;
  height: 12px;
  left: 43px;
  top: 24px;
  background: #f1c40f;
  border: 1px solid #1c1511;
  border-radius: 1px;
  z-index: 4;
}

.npc-sprite-banker .fairyWand::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -6px;
  width: 6px;
  height: 4px;
  background: #f39c12;
  border: 1px solid #1c1511;
  border-radius: 1px;
  box-shadow: 0 -4px 0 #f1c40f;
}

/* =======================================
   TAMER LENA CSS SPRITE
   ======================================= */
.npc-sprite-tamer {
  animation: fairyFloat 2.6s ease-in-out infinite;
}

.npc-sprite-tamer .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.4) 0%, rgba(39, 174, 96, 0.1) 60%, transparent 75%);
  filter: blur(4px);
  animation: tamerAuraPulse 1.7s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes tamerAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}

.npc-sprite-tamer .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 23px;
  left: 24px;
  top: 25px;
  border-radius: 5px;
  background: linear-gradient(180deg, #27ae60 0%, #8e44ad 100%);
  border: 1.5px solid #1c1511;
  z-index: 2;
}

.npc-sprite-tamer .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-tamer .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  width: 20px;
  height: 10px;
  background: #e67e22;
  border: 1px solid #1c1511;
  border-radius: 4px 4px 0 0;
  box-shadow: -2px -2px 0 #d35400, 2px -2px 0 #d35400;
}

.npc-sprite-tamer .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-tamer .fairyWand {
  position: absolute;
  width: 2px;
  height: 14px;
  left: 42px;
  top: 22px;
  background: #a04000;
  border: 1px solid #1c1511;
  transform: rotate(45deg);
  z-index: 4;
}

.npc-sprite-tamer .fairyWand::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 10px;
  width: 10px;
  height: 8px;
  border: 1.5px solid #1c1511;
  border-color: transparent transparent #1c1511 #1c1511;
  border-radius: 50%;
  transform: rotate(-45deg);
}

/* =======================================
   COOK MARCO CSS SPRITE
   ======================================= */
.npc-sprite-cook {
  animation: fairyFloat 2.9s ease-in-out infinite;
}

.npc-sprite-cook .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 240, 241, 0.4) 0%, rgba(189, 195, 199, 0.1) 60%, transparent 75%);
  filter: blur(4px);
  animation: cookAuraPulse 1.9s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes cookAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.npc-sprite-cook .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 23px;
  left: 23px;
  top: 25px;
  border-radius: 4px;
  background: #ecf0f1;
  border: 2px solid #1c1511;
  z-index: 2;
}

.npc-sprite-cook .charBody::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 10px;
  height: 4px;
  background: #e74c3c;
  border-radius: 2px;
}

.npc-sprite-cook .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-cook .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -10px;
  width: 18px;
  height: 12px;
  background: #ffffff;
  border: 1.5px solid #1c1511;
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
}

.npc-sprite-cook .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-cook .fairyWand {
  position: absolute;
  width: 3px;
  height: 18px;
  left: 42px;
  top: 20px;
  background: #bdc3c7;
  border: 1px solid #1c1511;
  border-radius: 1px;
  transform: rotate(15deg);
  z-index: 4;
}

.npc-sprite-cook .fairyWand::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -4px;
  width: 7px;
  height: 7px;
}

/* =======================================
   FARMER (PAYSAN) NPC SPRITE
   ======================================= */
.npc-sprite-farmer {
  animation: npcIdle 2.5s ease-in-out infinite;
}

.npc-sprite-farmer .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 24px;
  left: 24px;
  top: 24px;
  background: linear-gradient(180deg, #d35400 0%, #27ae60 100%);
  border: 1.5px solid #1c1511;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.npc-sprite-farmer .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Straw Hat */
.npc-sprite-farmer .charHead::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 24px;
  height: 6px;
  background: #f1c40f;
  border: 1.5px solid #1c1511;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 2px 0 #f39c12;
}

.npc-sprite-farmer .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* Pitchfork / Scythe */
.npc-sprite-farmer::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 26px;
  left: 43px;
  top: 18px;
  background: #7f8c8d;
  border: 1px solid #1c1511;
  transform: rotate(-10deg);
  box-shadow: inset 0 -4px 0 #f1c40f;
  z-index: 4;
}

/* =======================================
   LUMBERJACK (BÛCHERON) NPC SPRITE
   ======================================= */
.npc-sprite-lumberjack {
  animation: npcIdle 2.7s ease-in-out infinite;
}

.npc-sprite-lumberjack .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 24px;
  left: 23px;
  top: 24px;
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 60%, #2c3e50 100%);
  border: 1.5px solid #1c1511;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.npc-sprite-lumberjack .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Flannel Cap */
.npc-sprite-lumberjack .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -4px;
  width: 20px;
  height: 8px;
  background: #c0392b;
  border: 1.5px solid #1c1511;
  border-radius: 6px 6px 0 0;
}

/* Lumberjack Beard */
.npc-sprite-lumberjack .charHead::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 8px;
  width: 14px;
  height: 8px;
  background: #795548;
  border: 1px solid #1c1511;
  border-radius: 0 0 6px 6px;
}

/* Woodcutter Axe */
.npc-sprite-lumberjack::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 24px;
  left: 42px;
  top: 20px;
  background: #5d4037;
  border: 1px solid #1c1511;
  border-radius: 2px;
  transform: rotate(15deg);
  box-shadow: inset 0 -6px 0 #95a5a6;
  z-index: 4;
}

/* =======================================
   GUARD (GARDE) NPC SPRITE
   ======================================= */
.npc-sprite-guard {
  animation: npcIdle 2.4s ease-in-out infinite;
}

.npc-sprite-guard .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 26px;
  left: 23px;
  top: 24px;
  background: linear-gradient(180deg, #95a5a6 0%, #34495e 100%);
  border: 2px solid #1c1511;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
  z-index: 2;
}

.npc-sprite-guard .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #ecf0f1;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Guard Helmet with Red Plume */
.npc-sprite-guard .charHead::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -3px;
  width: 18px;
  height: 12px;
  background: #7f8c8d;
  border: 1.5px solid #1c1511;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -4px 0 #e74c3c;
}

/* Helmet Visor Slit */
.npc-sprite-guard .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 2px;
  background: #1c1511;
  box-shadow: 0 0 3px #f1c40f;
}

/* Halberd / Spear */
.npc-sprite-guard::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  left: 10px;
  top: 14px;
  background: #95a5a6;
  border: 1px solid #1c1511;
  box-shadow: inset 0 -8px 0 #e74c3c;
  z-index: 4;
}

/* =======================================
   🏰 DUNGEON BOSS PANOPLY GUARDIANS (CSS DOM)
   ======================================= */
@keyframes bossBreathing {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

@keyframes bossCapeWave {
  0%, 100% { transform: rotate(-4deg) skewY(0deg); }
  50% { transform: rotate(-8deg) skewY(-2deg); }
}

@keyframes bossSealPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.npcEntity.npc-dungeon-boss-entity {
  width: 76px;
  height: 86px;
  z-index: 48;
}

.npc-dungeon-boss-guardian {
  position: absolute;
  left: 0;
  top: 0;
  width: 76px;
  height: 86px;
  animation: bossBreathing 3.2s ease-in-out infinite;
}

/* 1. Ground Magic Summoning Seal */
.npcBossGroundSeal {
  position: absolute;
  left: 50%;
  top: 74px;
  width: 66px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56, 189, 248, 0.4) 0%, rgba(56, 189, 248, 0.1) 60%, transparent 80%);
  border: 1.5px solid rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6), inset 0 0 8px rgba(56, 189, 248, 0.4);
  animation: bossSealPulse 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* 2. Flowing Boss Cape */
.npcBossCape {
  position: absolute;
  left: 14px;
  top: 24px;
  width: 38px;
  height: 46px;
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  border: 2px solid #111827;
  border-radius: 4px 18px 24px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 -4px 0 #38bdf8;
  z-index: 1;
  transform-origin: top left;
  animation: bossCapeWave 3s ease-in-out infinite;
}

/* 3. Armored Legs & Heavy Sabatons */
.npcBossBoots {
  position: absolute;
  left: 20px;
  top: 50px;
  width: 36px;
  height: 22px;
  z-index: 2;
}
.npcBossBoots::before,
.npcBossBoots::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 13px;
  height: 18px;
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
  border: 1.8px solid #0f172a;
  border-radius: 4px 4px 6px 6px;
  box-shadow: inset 0 -4px 0 #f59e0b, 0 2px 4px rgba(0,0,0,0.5);
}
.npcBossBoots::before { left: 0; }
.npcBossBoots::after { right: 0; }

/* 4. Heavy Boss Cuirass */
.npcBossCuirass {
  position: absolute;
  left: 23px;
  top: 28px;
  width: 30px;
  height: 28px;
  background: linear-gradient(135deg, #64748b 0%, #334155 50%, #1e293b 100%);
  border: 2px solid #0f172a;
  border-radius: 6px;
  box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), 0 3px 6px rgba(0,0,0,0.6);
  z-index: 3;
}
.npcBossEmblem {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: #f59e0b;
  border: 1px solid #fff;
  box-shadow: 0 0 6px #f59e0b;
}
.npcBossTassets {
  position: absolute;
  left: -2px;
  bottom: -6px;
  width: 30px;
  height: 8px;
  background: #1e293b;
  border: 1.5px solid #0f172a;
  border-radius: 0 0 4px 4px;
}

/* 5. Giant Pauldrons */
.npcBossPauldrons {
  position: absolute;
  left: 12px;
  top: 24px;
  width: 52px;
  height: 16px;
  z-index: 4;
}
.npcBossPauldrons::before,
.npcBossPauldrons::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 16px;
  background: linear-gradient(135deg, #94a3b8 0%, #334155 100%);
  border: 2px solid #0f172a;
  border-radius: 6px 8px 2px 4px;
  box-shadow: inset 0 -3px 0 #f59e0b, 0 2px 6px rgba(0,0,0,0.6);
}
.npcBossPauldrons::before {
  left: 0;
  transform: rotate(-12deg);
}
.npcBossPauldrons::after {
  right: 0;
  transform: rotate(12deg);
}

/* 6. Planted Tower Shield */
.npcBossShield {
  position: absolute;
  left: 8px;
  top: 26px;
  width: 18px;
  height: 40px;
  background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
  border: 2px solid #0f172a;
  border-radius: 4px 4px 14px 14px;
  box-shadow: inset 0 0 0 2px #f59e0b, 0 4px 8px rgba(0,0,0,0.7);
  z-index: 5;
}
.npcBossShield::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 4px;
  height: 20px;
  transform: translateX(-50%);
  background: #f59e0b;
}
.npcBossShield::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 10px;
  height: 4px;
  background: #f59e0b;
}

/* 7. Colossal Boss Weapon */
.npcBossWeapon {
  position: absolute;
  right: 6px;
  top: 2px;
  width: 14px;
  height: 64px;
  z-index: 6;
}
.npcBossWeapon::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 0;
  width: 4px;
  height: 64px;
  background: #334155;
  border: 1px solid #0f172a;
}
.npcBossWeapon::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 0;
  width: 12px;
  height: 44px;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border: 1.5px solid #0f172a;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

/* 8. Head & Boss Helm */
.npcBossHead {
  position: absolute;
  left: 26px;
  top: 10px;
  width: 24px;
  height: 24px;
  z-index: 7;
}
.npcBossFace {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #ffdcb6;
  border-radius: 50%;
  border: 1.5px solid #0f172a;
}
.npcBossFace::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 3px;
  height: 3px;
  background: #111;
  border-radius: 50%;
  box-shadow: 6px 0 0 #111;
}
.npcBossHelm {
  position: absolute;
  left: -4px;
  top: -12px;
  width: 32px;
  height: 32px;
  pointer-events: none;
}
.npcBossHelm::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 28px;
  height: 16px;
  background: #334155;
  border: 1.8px solid #0f172a;
  border-radius: 8px 8px 2px 2px;
  box-shadow: inset 0 -3px 0 #f59e0b;
}
.npcBossHelm::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 36px;
  height: 12px;
  border-top: 5px solid #38bdf8;
  border-left: 4px solid #38bdf8;
  border-right: 4px solid #38bdf8;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}

/* ----------------------------------------------------
   SPECIFIC BIOME BOSS PANOPLIES (CSS THEMING)
   ---------------------------------------------------- */
/* Neige (Dragon de Givre) */
.npc-boss-neige .npcBossGroundSeal { border-color: #38bdf8; box-shadow: 0 0 16px #38bdf8; background: radial-gradient(circle, rgba(56,189,248,0.4), transparent); }
.npc-boss-neige .npcBossCape { background: linear-gradient(135deg, #1e3a8a, #93c5fd); box-shadow: inset 0 -4px 0 #fff; }
.npc-boss-neige .npcBossWeapon::after { background: linear-gradient(180deg, #e0f2fe, #38bdf8); box-shadow: 0 0 10px #38bdf8; }

/* Volcan (Seigneur des Flammes) */
.npc-boss-volcan .npcBossGroundSeal { border-color: #ff3b00; box-shadow: 0 0 16px #ff3b00; background: radial-gradient(circle, rgba(255,59,0,0.4), transparent); }
.npc-boss-volcan .npcBossCape { background: linear-gradient(135deg, #7f1d1d, #ff4500); box-shadow: inset 0 -4px 0 #f59e0b; }
.npc-boss-volcan .npcBossCuirass { background: linear-gradient(135deg, #1e293b, #0f172a); }
.npc-boss-volcan .npcBossEmblem { background: #ff4500; box-shadow: 0 0 8px #ff4500; }
.npc-boss-volcan .npcBossWeapon::after { background: linear-gradient(180deg, #ff4500, #b91c1c); box-shadow: 0 0 12px #ff4500; }
.npc-boss-volcan .npcBossHelm::after { border-color: #ff4500; box-shadow: 0 0 10px #ff4500; }

/* Minotaure / Labyrinthe (Minotot) */
.npc-boss-minotor .npcBossGroundSeal { border-color: #f59e0b; box-shadow: 0 0 16px #f59e0b; background: radial-gradient(circle, rgba(245,158,11,0.4), transparent); }
.npc-boss-minotor .npcBossCape { background: linear-gradient(135deg, #7c2d12, #b45309); box-shadow: inset 0 -4px 0 #facc15; }
.npc-boss-minotor .npcBossCuirass { background: linear-gradient(135deg, #78350f, #451a03); }
.npc-boss-minotor .npcBossWeapon::after { width: 22px; height: 32px; right: -4px; border-radius: 8px; background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 0 10px #f59e0b; }
.npc-boss-minotor .npcBossHelm::after { border-color: #f59e0b; border-width: 6px; box-shadow: 0 0 10px #f59e0b; }

/* Céleste (Archange Déchu) */
.npc-boss-celeste .npcBossGroundSeal { border-color: #38bdf8; box-shadow: 0 0 18px #38bdf8; background: radial-gradient(circle, rgba(56,189,248,0.4), transparent); }
.npc-boss-celeste .npcBossCape { background: linear-gradient(135deg, #0284c7, #e0f2fe); box-shadow: inset 0 -4px 0 #facc15; }
.npc-boss-celeste .npcBossCuirass { background: linear-gradient(135deg, #f8fafc, #cbd5e1); }
.npc-boss-celeste .npcBossHelm::after { border-color: #facc15; border-radius: 50%; height: 16px; top: -6px; }

/* Cimetière / Crypte (Maître des Squelettes) */
.npc-boss-cimetiere .npcBossGroundSeal { border-color: #a855f7; box-shadow: 0 0 16px #a855f7; background: radial-gradient(circle, rgba(168,85,247,0.4), transparent); }
.npc-boss-cimetiere .npcBossCape { background: linear-gradient(135deg, #3b0764, #7e22ce); box-shadow: inset 0 -4px 0 #c084fc; }
.npc-boss-cimetiere .npcBossCuirass { background: linear-gradient(135deg, #18181b, #27272a); }
.npc-boss-cimetiere .npcBossWeapon::after { width: 20px; height: 26px; right: -4px; border-radius: 12px 0 0 0; background: linear-gradient(135deg, #a855f7, #581c87); box-shadow: 0 0 10px #a855f7; }
.npc-boss-cimetiere .npcBossFace { background: #f8fafc; }
.npc-boss-cimetiere .npcBossFace::before { background: #a855f7; box-shadow: 6px 0 0 #a855f7, 0 0 4px #a855f7; }

/* Jungle (Roi Singe) */
.npc-boss-jungle .npcBossGroundSeal { border-color: #10b981; box-shadow: 0 0 16px #10b981; }
.npc-boss-jungle .npcBossCape { background: linear-gradient(135deg, #064e3b, #059669); }
.npc-boss-jungle .npcBossWeapon::after { background: linear-gradient(180deg, #34d399, #059669); }

/* Dinosaures (T-Rex) */
.npc-boss-dinosaures .npcBossGroundSeal { border-color: #d97706; box-shadow: 0 0 16px #d97706; }
.npc-boss-dinosaures .npcBossCape { background: linear-gradient(135deg, #451a03, #92400e); }
.npc-boss-dinosaures .npcBossWeapon::after { width: 18px; height: 30px; right: -2px; background: #f8fafc; }

/* Noël (Père Fouettard) */
.npc-boss-noel .npcBossGroundSeal { border-color: #e74c3c; box-shadow: 0 0 16px #e74c3c; }
.npc-boss-noel .npcBossCape { background: linear-gradient(135deg, #991b1b, #ef4444); box-shadow: inset 0 -4px 0 #fff; }

/* Désert (Sphinx) */
.npc-boss-desert .npcBossGroundSeal { border-color: #f59e0b; box-shadow: 0 0 16px #f59e0b; }
.npc-boss-desert .npcBossCape { background: linear-gradient(135deg, #713f12, #d97706); }
.npc-boss-desert .npcBossWeapon::after { background: linear-gradient(180deg, #fbbf24, #b45309); }

/* Mer (Léviathan) */
.npc-boss-mer .npcBossGroundSeal { border-color: #00d2d3; box-shadow: 0 0 16px #00d2d3; }
.npc-boss-mer .npcBossCape { background: linear-gradient(135deg, #0c4a6e, #0284c7); }
.npc-boss-mer .npcBossWeapon::after { background: linear-gradient(180deg, #00d2d3, #0284c7); }

/* Plaine (Grand Groin) */
.npc-boss-plaine .npcBossGroundSeal { border-color: #22c55e; box-shadow: 0 0 16px #22c55e; }
.npc-boss-plaine .npcBossCape { background: linear-gradient(135deg, #14532d, #16a34a); }

/* Forêt (Arbre Ancestral) */
.npc-boss-foret .npcBossGroundSeal { border-color: #16a34a; box-shadow: 0 0 16px #16a34a; }
.npc-boss-foret .npcBossCape { background: linear-gradient(135deg, #1c1917, #15803d); }

/* Montagne (Golem de Cristal) */
.npc-boss-montagne .npcBossGroundSeal { border-color: #3b82f6; box-shadow: 0 0 16px #3b82f6; }
.npc-boss-montagne .npcBossCape { background: linear-gradient(135deg, #1e293b, #3b82f6); }

/* Eveilam (Titan de Brume) */
.npc-boss-eveilam .npcBossGroundSeal { border-color: #f472b6; box-shadow: 0 0 16px #f472b6; }
.npc-boss-eveilam .npcBossCape { background: linear-gradient(135deg, #0f172a, #f472b6); }

/* =======================================
   DRYAD (DRYADE) NPC SPRITE
   ======================================= */
.npc-sprite-dryad {
  animation: fairyFloat 3.2s ease-in-out infinite;
}

.npc-sprite-dryad .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.5) 0%, rgba(39, 174, 96, 0.15) 60%, transparent 75%);
  filter: blur(4px);
  animation: auraPulse 2s ease-in-out infinite alternate;
  z-index: 0;
}

.npc-sprite-dryad .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 25px;
  left: 24px;
  top: 24px;
  background: linear-gradient(180deg, #2ecc71 0%, #27ae60 50%, #1e8449 100%);
  border: 1.5px solid #1c1511;
  border-radius: 8px 8px 3px 3px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
  z-index: 2;
}

.npc-sprite-dryad .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Floral Vine Crown */
.npc-sprite-dryad .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -5px;
  width: 20px;
  height: 8px;
  background: #27ae60;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
  box-shadow: -3px 0 0 #e74c3c, 3px 0 0 #f1c40f;
}

.npc-sprite-dryad .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* =======================================
   HERMIT (ERMITE) NPC SPRITE
   ======================================= */
.npc-sprite-hermit {
  animation: npcIdle 3s ease-in-out infinite;
}

.npc-sprite-hermit .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 26px;
  left: 23px;
  top: 24px;
  background: linear-gradient(180deg, #795548 0%, #4e342e 100%);
  border: 1.5px solid #1c1511;
  border-radius: 6px;
  z-index: 2;
}

.npc-sprite-hermit .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Rustic Cloak Hood */
.npc-sprite-hermit .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -6px;
  width: 20px;
  height: 12px;
  background: #5d4037;
  border: 1.5px solid #1c1511;
  border-radius: 8px 8px 0 0;
}

/* Long Hermit Beard */
.npc-sprite-hermit .charHead::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 16px;
  height: 12px;
  background: #ecf0f1;
  border: 1.5px solid #1c1511;
  border-radius: 0 0 8px 8px;
}

/* Walking Stick */
.npc-sprite-hermit::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 28px;
  left: 42px;
  top: 18px;
  background: #5d4037;
  border: 1px solid #1c1511;
  border-radius: 2px;
  transform: rotate(-10deg);
  z-index: 4;
}

/* =======================================
   GUILD MASTER (GUILDE) NPC SPRITE
   ======================================= */
.npc-sprite-guild {
  animation: fairyFloat 3.1s ease-in-out infinite;
}

.npc-sprite-guild .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.4) 0%, rgba(211, 84, 0, 0.15) 60%, transparent 75%);
  filter: blur(4px);
  animation: auraPulse 2s ease-in-out infinite alternate;
  z-index: 0;
}

.npc-sprite-guild .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 26px;
  left: 23px;
  top: 24px;
  background: linear-gradient(180deg, #8e44ad 0%, #2c3e50 100%);
  border: 2px solid #1c1511;
  border-radius: 5px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
  z-index: 2;
}

.npc-sprite-guild .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

/* Regal Crown */
.npc-sprite-guild .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -7px;
  width: 20px;
  height: 9px;
  background: #f1c40f;
  border: 1.5px solid #1c1511;
  clip-path: polygon(0% 100%, 0% 0%, 25% 40%, 50% 0%, 75% 40%, 100% 0%, 100% 100%);
  box-shadow: 0 0 6px #f39c12;
}

.npc-sprite-guild .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

/* =======================================
   MESSENGER ELO CSS SPRITE
   ======================================= */
.npc-sprite-messenger {
  animation: fairyFloat 2.4s ease-in-out infinite;
}

.npc-sprite-messenger .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 152, 219, 0.35) 0%, rgba(41, 128, 185, 0.1) 60%, transparent 75%);
  filter: blur(4px);
  animation: messengerAuraPulse 1.6s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes messengerAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.2) rotate(15deg); opacity: 0.9; }
}

.npc-sprite-messenger .charBody {
  display: block;
  position: absolute;
  width: 16px;
  height: 23px;
  left: 24px;
  top: 25px;
  border-radius: 4px;
  background: #2980b9;
  border: 1.5px solid #1c1511;
  z-index: 2;
}

.npc-sprite-messenger .charBody::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 2px;
  width: 18px;
  height: 3px;
  background: #85929e;
  transform: rotate(35deg);
}

.npc-sprite-messenger .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-messenger .charHead::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -4px;
  width: 16px;
  height: 6px;
  background: #1f618d;
  border: 1px solid #1c1511;
  border-radius: 3px 3px 0 0;
  box-shadow: 3px 0 0 #f1c40f;
}

.npc-sprite-messenger .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-messenger .fairyWand {
  position: absolute;
  width: 6px;
  height: 14px;
  left: 42px;
  top: 24px;
  background: #f5b041;
  border: 1px solid #1c1511;
  border-radius: 2px;
  transform: rotate(45deg);
  z-index: 4;
}

.npc-sprite-messenger .fairyWand::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 4px;
  height: 4px;
  background: #e74c3c;
  border-radius: 50%;
}

/* =======================================
   GUILD MASTER ARTHUS CSS SPRITE
   ======================================= */
.npc-sprite-guild {
  animation: fairyFloat 3.1s ease-in-out infinite;
}

.npc-sprite-guild .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 196, 15, 0.45) 0%, rgba(41, 128, 185, 0.15) 60%, transparent 75%);
  filter: blur(4px);
  animation: guildAuraPulse 2.1s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes guildAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.95; }
}

.npc-sprite-guild .charBody {
  display: block;
  position: absolute;
  width: 20px;
  height: 25px;
  left: 22px;
  top: 25px;
  border-radius: 4px;
  background: linear-gradient(180deg, #7f8c8d 0%, #bdc3c7 100%);
  border: 2px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
  z-index: 2;
}

.npc-sprite-guild .charBody::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 4px;
  height: 21px;
  background: #c0392b;
  box-shadow: -2px 0 0 #f1c40f, 2px 0 0 #f1c40f;
}

.npc-sprite-guild .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-guild .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -5px;
  width: 18px;
  height: 7px;
  background: #f1c40f;
  border: 1px solid #1c1511;
  clip-path: polygon(0% 100%, 0% 0%, 25% 50%, 50% 0%, 75% 50%, 100% 0%, 100% 100%);
}

.npc-sprite-guild .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-guild .fairyWand {
  position: absolute;
  width: 3px;
  height: 28px;
  left: 44px;
  top: 11px;
  background: #7f8c8d;
  border: 1px solid #1c1511;
  z-index: 4;
}

.npc-sprite-guild .fairyWand::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 10px;
  background: #c0392b;
  border: 1px solid #1c1511;
  border-radius: 1px;
  box-shadow: inset 2px 0 0 #f1c40f;
}


/* =======================================
   DRYAD SYLVA CSS SPRITE
   ======================================= */
.npc-sprite-dryad {
  animation: fairyFloat 2.7s ease-in-out infinite;
}

.npc-sprite-dryad .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 188, 156, 0.4) 0%, rgba(255, 105, 180, 0.15) 60%, transparent 75%);
  filter: blur(4px);
  animation: dryadAuraPulse 1.8s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes dryadAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.9; }
}

.npc-sprite-dryad .charBody {
  display: block;
  position: absolute;
  width: 14px;
  height: 23px;
  left: 25px;
  top: 25px;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #1abc9c 0%, #27ae60 100%);
  border: 1.5px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.npc-sprite-dryad .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #f5cba7;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-dryad .charHead::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 22px;
  height: 12px;
  background: #2ecc71;
  border: 1px solid #1c1511;
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
}

.npc-sprite-dryad .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-dryad .fairyWand {
  position: absolute;
  width: 3px;
  height: 16px;
  left: 42px;
  top: 19px;
  background: #8e44ad;
  border: 1px solid #1c1511;
  border-radius: 1px;
  transform: rotate(20deg);
  z-index: 4;
}

.npc-sprite-dryad .fairyWand::before {
  content: "🌸";
  position: absolute;
  left: -7px;
  top: -11px;
  font-size: 11px;
  text-shadow: 0 0 6px rgba(255,105,180,0.8);
}

/* =======================================
   HERMIT RONAN CSS SPRITE
   ======================================= */
.npc-sprite-hermit {
  animation: fairyFloat 3.4s ease-in-out infinite;
}

.npc-sprite-hermit .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 165, 166, 0.4) 0%, rgba(127, 140, 141, 0.1) 60%, transparent 75%);
  filter: blur(4px);
  animation: hermitAuraPulse 2s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes hermitAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.npc-sprite-hermit .charBody {
  display: block;
  position: absolute;
  width: 18px;
  height: 23px;
  left: 23px;
  top: 25px;
  border-radius: 4px;
  background: #7f8c8d;
  border: 1.5px solid #1c1511;
  z-index: 2;
}

.npc-sprite-hermit .charHead {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 11px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
  z-index: 3;
}

.npc-sprite-hermit .charHead::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  width: 20px;
  height: 16px;
  background: #ecf0f1;
  border: 1px solid #1c1511;
  border-radius: 6px 6px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 70%, 50% 100%, 15% 70%, 0 100%);
}

.npc-sprite-hermit .charHead::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 2px;
  height: 2px;
  background: #1c1511;
  box-shadow: 6px 0 #1c1511;
  border-radius: 50%;
}

.npc-sprite-hermit .fairyWand {
  position: absolute;
  width: 3px;
  height: 28px;
  left: 42px;
  top: 12px;
  background: #a04000;
  border: 1.5px solid #1c1511;
  border-radius: 2px;
  transform: rotate(-5deg);
  z-index: 4;
}

.npc-sprite-hermit .fairyWand::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  background: #a04000;
  border: 1px solid #1c1511;
  border-radius: 50%;
}

/* =======================================
   BANK SYSTEM MODAL STYLES
   ======================================= */
.bankCard {
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09)) !important;
  background: var(--window-surface, rgba(14, 18, 27, 0.85)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
}

.bankGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .bankGrid {
    grid-template-columns: 1fr;
  }
}

.bankLeftPanel, .bankRightPanel {
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid #3d2f1d;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.bankLeftPanel h3, .bankRightPanel h3 {
  margin: 0 0 12px 0;
  font-family: 'Outfit', sans-serif;
  color: #f39c12;
  font-size: 1.1rem;
  border-bottom: 1px dashed #3d2f1d;
  padding-bottom: 6px;
}

.bankGoldMgmt {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(216, 180, 106, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Outfit', sans-serif;
}

.bankItemRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.15);
  transition: background 0.2s;
  border-radius: 4px;
}

.bankItemRow:hover {
  background: rgba(216, 180, 106, 0.08);
}

.bankItemLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bankItemRowIcon {
  font-size: 1.25rem;
}

.bankItemRowName {
  font-weight: 500;
  color: #fff;
  font-size: 0.9rem;
}

.bankItemRowQty {
  color: #a7977c;
  font-size: 0.85rem;
  margin-left: 6px;
}

.bankItemRowActions {
  display: flex;
  gap: 6px;
}

.bankActionBtn {
  background: #3d2f1d;
  color: #d8b46a;
  border: 1px solid #d8b46a;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.bankActionBtn:hover {
  background: #d8b46a;
  color: #0d0a07;
}

/* =======================================
   CENTERED BANK MODAL STYLES (LIST LAYOUT)
   ======================================= */
#bankModal {
  justify-content: center !important;
  align-items: center !important;
  padding: 24px 12px !important;
}

/* Force all text in bank modal to be white for high visibility */
#bankModal .overlayCardHeader h2,
#bankModal .overlayCardHeader p,
#bankModal .bankLeftPanel h3,
#bankModal .bankRightPanel h3,
#bankModal .bankGoldMgmt,
#bankModal .bankGoldMgmt span,
#bankModal .bankGoldMgmt strong,
#bankModal .bankItemRowName,
#bankModal .bankItemRowStats,
#bankModal .bankItemRowQty {
  color: #ffffff !important;
}

.bankCard {
  width: min(900px, calc(100vw - 24px)) !important;
  max-height: min(85vh, 800px) !important;
  background: var(--window-surface, rgba(14, 18, 27, 0.85)) !important;
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
}

.bankGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 15px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .bankGrid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .bankItemsScroll {
    height: 200px !important;
  }
}

.bankLeftPanel, .bankRightPanel {
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid #3d2f1d;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.bankLeftPanel h3, .bankRightPanel h3 {
  margin: 0 0 12px 0;
  font-family: 'Outfit', sans-serif;
  color: #efe6d2;
  font-size: 1.1rem;
  border-bottom: 1px dashed #3d2f1d;
  padding-bottom: 6px;
  text-shadow: 0 0 8px rgba(216, 180, 106, 0.2);
}

.bankGoldMgmt {
  background: rgba(13, 10, 7, 0.6);
  border: 1px solid rgba(216, 180, 106, 0.2);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 10px;
}

.bankItemsScroll {
  height: 350px;
  overflow-y: auto;
  border: 1.5px solid #3d2f1d;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 6px;
  padding: 8px;
}

/* Scrollbars */
.bankItemsScroll::-webkit-scrollbar {
  width: 6px;
}
.bankItemsScroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.bankItemsScroll::-webkit-scrollbar-thumb {
  background: #3d2f1d;
  border-radius: 3px;
}
.bankItemsScroll::-webkit-scrollbar-thumb:hover {
  background: #d8b46a;
}

.bankItemRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.1);
  transition: background 0.2s;
  border-radius: 4px;
  background: rgba(13, 10, 7, 0.3);
  margin-bottom: 4px;
}

.bankItemRow:hover {
  background: rgba(216, 180, 106, 0.08);
}

.bankItemInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bankItemRowIcon {
  font-size: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #3d2f1d;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bankItemText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bankItemRowName {
  font-weight: bold;
  color: #efe6d2;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bankItemRowStats {
  font-size: 0.72rem;
  color: #a7977c;
  margin-top: 2px;
}

.bankItemRowQty {
  color: #d8b46a;
  font-weight: bold;
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(216, 180, 106, 0.15);
}

.bankItemRowActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.bankActionBtn {
  background: #3d2f1d;
  color: #d8b46a;
  border: 1.5px solid #d8b46a;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.bankActionBtn:hover {
  background: #d8b46a;
  color: #0d0a07;
  transform: translateY(-1px);
}

.bankActionBtn:active {
  transform: translateY(0);
}

/* =======================================
   MERCHANT SYSTEM & SHOP MODAL STYLES
   ======================================= */
#merchantModal,
#shopModal,
#consumableShopModal {
  justify-content: center !important;
  align-items: center !important;
  padding: 24px 12px !important;
}

#merchantModal .overlayCardHeader h2,
#merchantModal .overlayCardHeader p,
#merchantModal .merchantGoldDisplay,
#merchantModal .merchantGoldDisplay span,
#merchantModal .merchantGoldDisplay strong,
#merchantModal .bankItemRowName,
#merchantModal .bankItemRowStats,
#merchantModal .bankItemRowQty,
#shopModal .overlayCardHeader h2,
#shopModal .overlayCardHeader p,
#shopModal .merchantGoldDisplay,
#shopModal .merchantGoldDisplay span,
#shopModal .merchantGoldDisplay strong,
#shopModal .bankItemRowName,
#shopModal .bankItemRowStats,
#shopModal .bankItemRowQty,
#consumableShopModal .overlayCardHeader h2,
#consumableShopModal .overlayCardHeader p,
#consumableShopModal .merchantGoldDisplay,
#consumableShopModal .merchantGoldDisplay span,
#consumableShopModal .merchantGoldDisplay strong,
#consumableShopModal .bankItemRowName,
#consumableShopModal .bankItemRowStats,
#consumableShopModal .bankItemRowQty {
  color: #ffffff !important;
}

.merchantCard {
  width: min(600px, calc(100vw - 24px)) !important;
  max-height: min(85vh, 800px) !important;
  background: var(--window-surface, rgba(14, 18, 27, 0.85)) !important;
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
}

.merchantContent {
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid #3d2f1d;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.merchantGoldDisplay {
  background: rgba(13, 10, 7, 0.6);
  border: 1px solid rgba(216, 180, 106, 0.2);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 10px;
}

/* Stats panel tabs styling */
.statsTabs .tabBtn {
  background: transparent;
  border: none;
  color: #a7977c;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}
.statsTabs .tabBtn:hover {
  color: #fff;
  background: rgba(216, 180, 106, 0.08);
}
.statsTabs .tabBtn.active {
  color: var(--ui-gold) !important;
  border-bottom: 2px solid var(--ui-gold);
}

/* Harvest Action Bubble overlay */
.harvest-action-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--window-surface-strong, rgba(18, 14, 11, 0.96));
  border: 1.5px solid var(--window-border-strong, #d8b46a);
  border-radius: var(--window-radius-sm, 10px);
  padding: 6px 14px;
  color: var(--window-text, #ffe2aa);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 12px var(--window-accent-soft, rgba(216, 180, 106, 0.18));
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 999;
  white-space: nowrap;
  animation: bubblePop 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  pointer-events: auto;
  margin-top: -8px;
}

.harvest-action-bubble:hover {
  background: var(--window-accent-soft, rgba(216, 180, 106, 0.18));
  color: var(--window-accent-hover, #ffe2aa);
  border-color: var(--window-accent, #d8b46a);
  transform: translate(-50%, -100%) scale(1.06);
}

.harvest-action-bubble .bubble-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.harvest-action-bubble .harvest-icon {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}

.harvest-action-bubble:hover .harvest-icon path {
  stroke: #120e0b !important;
}

.harvest-action-bubble:hover .harvest-icon [fill]:not([fill="none"]) {
  fill: #120e0b !important;
}

@keyframes bubblePop {
  0% { transform: translate(-50%, -80%) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* Harvest Progress Bar */
.harvest-progress-bar-container {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 6px;
  background: rgba(0,0,0,0.85);
  border: 1px solid #d8b46a;
  border-radius: 4px;
  overflow: hidden;
  z-index: 100;
}

.harvest-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  transition: width 1s linear;
}

/* Floating Gathering indicators */
.gather-floating-indicator {
  position: absolute;
  color: #2ecc71;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 1000;
  animation: floatUpGather 1.5s forwards ease-out;
  transform: translateX(-50%);
}

@keyframes floatUpGather {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -15px) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -40px) scale(0.9);
    opacity: 0;
  }
}

/* Harvesting Tile Animations */
.harvesting-shake {
  animation: harvestShake 0.15s infinite alternate !important;
}

.harvesting-rustle {
  animation: harvestRustle 0.25s infinite alternate !important;
}

@keyframes harvestShake {
  0% { transform: translate(-1px, 0) rotate(-1.5deg); }
  100% { transform: translate(1.5px, 0.5px) rotate(1.5deg); }
}

@keyframes harvestRustle {
  0% { transform: rotate(-3deg) scale(0.98); }
  100% { transform: rotate(3deg) scale(1.02); }
}

/* Floating Harvesting Particles */
.harvest-particle {
  display: none !important;
}

@keyframes floatParticle {
  0% {
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.2) rotate(15deg);
  }
  100% {
    transform: var(--drift-translate) scale(0.7) rotate(var(--drift-rotate));
    opacity: 0;
  }
}

/* Fishing Concentric Ripple */
.fishing-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(135, 206, 250, 0.95);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: fishingRipple 1s ease-out infinite;
}

@keyframes fishingRipple {
  0% {
    width: 6px;
    height: 6px;
    border-color: rgba(135, 206, 250, 0.95);
    opacity: 1;
  }
  100% {
    width: 32px;
    height: 32px;
    border-color: rgba(255, 255, 255, 0);
    opacity: 0;
  }
}

/* -------------------------------------------------
   CHARACTER HARVESTING TOOLS & ANIMATIONS
   ------------------------------------------------- */

/* 1. PÊCHEUR (FULL BODY CAST, SWAY & REEL) */
#player.harvesting-player-pecheur,
.remotePlayer.harvesting-player-pecheur {
  animation: characterPecheurAction 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-pecheur .charSprite,
.remotePlayer.harvesting-player-pecheur .charSprite {
  animation: pecheurTorsoSway 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-pecheur .charHead,
.remotePlayer.harvesting-player-pecheur .charHead {
  animation: pecheurHeadWatch 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-pecheur .charCape,
.remotePlayer.harvesting-player-pecheur .charCape {
  animation: pecheurCapeSway 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* 2. BÛCHERON (FULL BODY AXE CHOP SLAM) */
#player.harvesting-player-bucheron,
.remotePlayer.harvesting-player-bucheron {
  animation: characterBucheronChop 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-bucheron .charSprite,
.remotePlayer.harvesting-player-bucheron .charSprite {
  animation: bucheronTorsoTwist 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-bucheron .charHead,
.remotePlayer.harvesting-player-bucheron .charHead {
  animation: bucheronHeadBalance 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-bucheron .charCape,
.remotePlayer.harvesting-player-bucheron .charCape {
  animation: bucheronCapeSwell 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* 3. PAYSAN / CÉRÉALES (FULL BODY & SCYTHE SWEEP RIGHT TO LEFT) */
#player.harvesting-player-paysant,
.remotePlayer.harvesting-player-paysant {
  animation: characterPaysantSwivel 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-paysant .charSprite,
.remotePlayer.harvesting-player-paysant .charSprite {
  animation: charSpriteTorsoTwist 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-paysant .charHead,
.remotePlayer.harvesting-player-paysant .charHead {
  animation: charHeadCounterBalance 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#player.harvesting-player-paysant .charCape,
.remotePlayer.harvesting-player-paysant .charCape {
  animation: charCapeWindSwell 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* --- KEYFRAME ANIMATIONS: PÊCHEUR --- */
@keyframes characterPecheurAction {
  0% { transform: translate(-50%, -100%) rotate(-6deg); }
  20% { transform: translate(-50%, -100%) rotate(8deg) translateY(-2px); } /* Cast */
  45% { transform: translate(-50%, -100%) rotate(-3deg) translateY(1px); }  /* Hold line */
  75% { transform: translate(-50%, -100%) rotate(4deg) translateY(3px); }   /* Tension bite */
  90% { transform: translate(-50%, -100%) rotate(-18deg) translateY(-8px); }/* Reel & pull up! */
  100% { transform: translate(-50%, -100%) rotate(0deg); }
}

@keyframes pecheurTorsoSway {
  0% { transform: scale(1) rotate(-8deg); }
  20% { transform: scale(1) rotate(10deg); }
  45% { transform: scale(1) rotate(-3deg); }
  75% { transform: scale(1) rotate(6deg) translateY(1px); }
  90% { transform: scale(1) rotate(-22deg) scaleY(0.97); } /* Heave back on reel */
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes pecheurHeadWatch {
  0% { transform: translateX(-50%) rotate(5deg); }
  20% { transform: translateX(-50%) rotate(-8deg); }
  45% { transform: translateX(-50%) rotate(4deg); }
  75% { transform: translateX(-50%) rotate(8deg); }
  90% { transform: translateX(-50%) rotate(-14deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes pecheurCapeSway {
  0% { transform: translateX(-50%) rotate(-4deg); }
  45% { transform: translateX(-50%) rotate(6deg); }
  90% { transform: translateX(-50%) rotate(-18deg) scaleX(1.1); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

/* --- KEYFRAME ANIMATIONS: BÛCHERON --- */
@keyframes characterBucheronChop {
  0% { transform: translate(-50%, -100%) rotate(0deg); }
  25% { transform: translate(-50%, -100%) rotate(-16deg) translateY(-4px); } /* Windup Back */
  45% { transform: translate(-50%, -100%) rotate(18deg) translateY(2px) scaleY(0.96); } /* Impact Chop! */
  65% { transform: translate(-50%, -100%) rotate(-10deg) translateY(-2px); } /* Rebound */
  85% { transform: translate(-50%, -100%) rotate(18deg) translateY(2px) scaleY(0.96); } /* 2nd Chop! */
  100% { transform: translate(-50%, -100%) rotate(0deg); }
}

@keyframes bucheronTorsoTwist {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1) rotate(-18deg) skewY(-3deg); }
  45% { transform: scale(1) rotate(22deg) skewY(4deg) translateY(2px); }
  65% { transform: scale(1) rotate(-12deg) skewY(-2deg); }
  85% { transform: scale(1) rotate(22deg) skewY(4deg) translateY(2px); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes bucheronHeadBalance {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-12deg); }
  45% { transform: translateX(-50%) rotate(15deg); }
  65% { transform: translateX(-50%) rotate(-8deg); }
  85% { transform: translateX(-50%) rotate(15deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes bucheronCapeSwell {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-14deg) scaleX(0.85); }
  45% { transform: translateX(-50%) rotate(24deg) scaleX(1.2); }
  65% { transform: translateX(-50%) rotate(-8deg) scaleX(0.9); }
  85% { transform: translateX(-50%) rotate(24deg) scaleX(1.2); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

/* --- KEYFRAME ANIMATIONS: PAYSAN --- */
@keyframes characterPaysantSwivel {
  0% { transform: translate(-50%, -100%) rotate(0deg); }
  20% { transform: translate(-50%, -100%) rotate(12deg) translateX(4px); } /* Windup Right */
  45% { transform: translate(-50%, -100%) rotate(-18deg) translateX(-6px); } /* Sweep Left! */
  70% { transform: translate(-50%, -100%) rotate(12deg) translateX(4px); } /* Windup Right */
  90% { transform: translate(-50%, -100%) rotate(-18deg) translateX(-6px); } /* Sweep Left! */
  100% { transform: translate(-50%, -100%) rotate(0deg); }
}

@keyframes charSpriteTorsoTwist {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1) rotate(15deg) skewX(-4deg); }
  45% { transform: scale(1) rotate(-22deg) skewX(6deg); }
  70% { transform: scale(1) rotate(15deg) skewX(-4deg); }
  90% { transform: scale(1) rotate(-22deg) skewX(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes charHeadCounterBalance {
  0% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-50%) rotate(-10deg); }
  45% { transform: translateX(-50%) rotate(14deg); }
  70% { transform: translateX(-50%) rotate(-10deg); }
  90% { transform: translateX(-50%) rotate(14deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes charCapeWindSwell {
  0% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-50%) rotate(-12deg) scaleX(0.9); }
  45% { transform: translateX(-50%) rotate(20deg) scaleX(1.15); }
  70% { transform: translateX(-50%) rotate(-12deg) scaleX(0.9); }
  90% { transform: translateX(-50%) rotate(20deg) scaleX(1.15); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

/* Tool Base Container */
.player-harvest-tool {
  position: absolute;
  top: 30%;
  right: -12px;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Fishing Rod Container & Vector Model (Pêcheur) */
.player-harvest-tool-pecheur {
  position: absolute;
  top: 10%;
  right: -25px;
  width: 85px;
  height: 85px;
  pointer-events: none;
  z-index: 100;
}

.fishing-rod-model {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 30% 80%;
  animation: fishingRodCastAndReel 2.0s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes fishingRodCastAndReel {
  0% {
    transform: rotate(-65deg) translate(-12px, -8px) scale(0.8);
    opacity: 0;
  }
  20% {
    /* Cast Forward */
    transform: rotate(30deg) translate(12px, -15px) scale(1.2);
    opacity: 1;
  }
  45% {
    /* Holding line in water */
    transform: rotate(12deg) translate(5px, -5px) scale(1.0);
  }
  75% {
    /* Water tension / bite */
    transform: rotate(20deg) translate(8px, -2px) scale(1.05);
  }
  90% {
    /* Reel back hard & pull up! */
    transform: rotate(-75deg) translate(-18px, -22px) scale(1.15);
    opacity: 1;
  }
  100% {
    transform: rotate(-65deg) scale(0.8);
    opacity: 0;
  }
}

.fishing-line-container {
  position: absolute;
  top: 5px;
  right: -20px;
  width: 60px;
  height: 60px;
  pointer-events: none;
}

.fishing-line-string {
  position: absolute;
  top: 5px;
  left: 0;
  width: 50px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(56, 189, 248, 0.7));
  transform-origin: 0% 0%;
  transform: rotate(38deg);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  animation: lineVibrate 0.6s ease-in-out infinite alternate;
}

.fishing-float {
  position: absolute;
  top: 36px;
  right: 2px;
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #ef4444, #991b1b);
  border: 1px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
  animation: floatBobbing 0.7s ease-in-out infinite alternate;
}

@keyframes lineVibrate {
  0% { transform: rotate(35deg); }
  100% { transform: rotate(41deg); }
}

@keyframes floatBobbing {
  0% { transform: translateY(-4px) scale(0.9); }
  100% { transform: translateY(5px) scale(1.1); }
}

/* 2. Woodcutter Axe Container & Vector Model (Bûcheron) */
.player-harvest-tool-bucheron {
  position: absolute;
  top: 10%;
  right: -25px;
  width: 85px;
  height: 85px;
  pointer-events: none;
  z-index: 100;
}

.axe-model {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 30% 80%;
  animation: axeRightSwingChop 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes axeRightSwingChop {
  0% {
    transform: rotate(-80deg) translate(-18px, -22px) scale(0.8);
    opacity: 0;
  }
  25% {
    /* Windup Back */
    transform: rotate(-95deg) translate(-22px, -28px) scale(1.1);
    opacity: 1;
  }
  45% {
    /* Downward Impact Chop! */
    transform: rotate(48deg) translate(28px, 14px) scale(1.3);
  }
  65% {
    /* Rebound Back */
    transform: rotate(-65deg) translate(-12px, -18px) scale(1.0);
  }
  85% {
    /* Second Impact Chop! */
    transform: rotate(48deg) translate(28px, 14px) scale(1.3);
  }
  100% {
    transform: rotate(-80deg) scale(0.8);
    opacity: 0;
  }
}

.wood-chop-spark {
  position: absolute;
  right: -22px;
  top: 14px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #ffffff, #fde047, #f59e0b);
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  animation: sparkFlash 0.85s infinite;
}

@keyframes sparkFlash {
  0%, 35%, 55%, 75%, 100% { opacity: 0; transform: scale(0); }
  45%, 85% { opacity: 1; transform: scale(1.5) rotate(45deg); }
}

/* 3. Scythe Tool Container & Vector Model (Paysan / Céréales) */
.player-harvest-tool-paysant {
  position: absolute;
  top: 10%;
  right: -28px;
  width: 90px;
  height: 90px;
  pointer-events: none;
  z-index: 100;
}

.scythe-model {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 65% 75%;
  animation: scytheRightToLeftSwing 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Scythe Right to Left Sweep Keyframes */
@keyframes scytheRightToLeftSwing {
  0% {
    transform: rotate(60deg) translate(20px, -15px) scale(0.8);
    opacity: 0;
  }
  20% {
    /* Windup Right */
    transform: rotate(85deg) translate(28px, -20px) scale(1.1);
    opacity: 1;
  }
  45% {
    /* Sweep Right to Left! */
    transform: rotate(-110deg) translate(-35px, 8px) scale(1.25);
    opacity: 1;
  }
  70% {
    /* Return Windup Right */
    transform: rotate(85deg) translate(28px, -20px) scale(1.05);
  }
  90% {
    /* Second Sweep Right to Left! */
    transform: rotate(-110deg) translate(-35px, 8px) scale(1.25);
  }
  100% {
    transform: rotate(60deg) scale(0.8);
    opacity: 0;
  }
}

/* Slash Arc Trail (Right to Left Slash) */
.scythe-slash-sweep-arc {
  position: absolute;
  top: -10px;
  left: -20px;
  width: 90px;
  height: 90px;
  border-left: 4px solid rgba(255, 235, 150, 0.95);
  border-top: 3px solid rgba(241, 168, 10, 0.8);
  border-radius: 50%;
  box-shadow: -4px 0 15px rgba(241, 168, 10, 0.7), inset -2px 0 8px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  opacity: 0;
  transform: rotate(20deg);
  animation: scytheArcTrailRightToLeft 1.2s infinite;
}

@keyframes scytheArcTrailRightToLeft {
  0%, 25%, 55%, 75%, 95%, 100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.5);
  }
  45%, 90% {
    opacity: 1;
    transform: rotate(-75deg) scale(1.35);
  }
}

/* Non-emoji particle shapes */
.cereal-stalk-shape {
  width: 16px;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #d97706);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
  transform: rotate(25deg);
}

.wood-chip-shape {
  width: 10px;
  height: 7px;
  background: linear-gradient(135deg, #b45309, #78350f);
  border-radius: 1px 3px 1px 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.water-drop-shape {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #38bdf8, #0284c7);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}


/* -------------------------------------------------
   CUSTOM NPC SPRITES (SKINS) FOR LEVEL 40-60
   ------------------------------------------------- */

/* Ulrich the Mountaineer */
.npc-sprite-mountaineer {
  animation: mountaineerBreath 2.5s ease-in-out infinite;
}

@keyframes mountaineerBreath {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-2px) scaleY(0.97); }
}

.npc-sprite-mountaineer .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 185, 255, 0.35) 0%, rgba(9, 132, 227, 0.1) 60%, transparent 80%);
  filter: blur(3px);
  z-index: 0;
  animation: mountaineerAura 3s ease-in-out infinite alternate;
}

@keyframes mountaineerAura {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
}

.npc-sprite-mountaineer .charBody {
  position: absolute;
  width: 18px;
  height: 24px;
  left: 23px;
  top: 24px;
  background: #795548;
  border: 1.5px solid #1c1511;
  border-radius: 6px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
}

.npc-sprite-mountaineer .charHead {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #f5cd79;
  border: 1.5px solid #1c1511;
}

/* Red beanie hat */
.npc-sprite-mountaineer .charHead::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 6px;
  left: -1.5px;
  top: -3px;
  background: #e74c3c;
  border: 1.5px solid #1c1511;
  border-radius: 4px 4px 1px 1px;
}

/* Beanie pompom */
.npc-sprite-mountaineer .charHead::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  left: 4px;
  top: -6px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 50%;
}

/* Backpack on body */
.npc-sprite-mountaineer::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 14px;
  left: 17px;
  top: 28px;
  background: #3e2723;
  border: 1.2px solid #1c1511;
  border-radius: 2px;
}


/* Balthazar the Archaeologist */
.npc-sprite-archaeologist {
  animation: mountaineerBreath 2.8s ease-in-out infinite;
}

.npc-sprite-archaeologist .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 202, 87, 0.3) 0%, rgba(243, 156, 18, 0.08) 60%, transparent 80%);
  filter: blur(4px);
  z-index: 0;
}

.npc-sprite-archaeologist .charBody {
  position: absolute;
  width: 16px;
  height: 24px;
  left: 24px;
  top: 24px;
  background: #d2b48c;
  border: 1.5px solid #1c1511;
  border-radius: 4px;
}

/* Khaki vest lines */
.npc-sprite-archaeologist .charBody::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 24px;
  left: 6px;
  top: 0;
  background: #f3a683;
  border-left: 1px solid #1c1511;
  border-right: 1px solid #1c1511;
}

.npc-sprite-archaeologist .charHead {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
}

/* Fedora Hat Brim */
.npc-sprite-archaeologist .charHead::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 3px;
  left: -4.5px;
  top: -1px;
  background: #855E42;
  border: 1.2px solid #1c1511;
  border-radius: 2px;
}

/* Fedora Hat Crown */
.npc-sprite-archaeologist .charHead::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  left: 0.5px;
  top: -6px;
  background: #855E42;
  border: 1.2px solid #1c1511;
  border-radius: 3px 3px 0 0;
}


/* Lyra the Herbalist */
.npc-sprite-herbalist {
  animation: herbalistFloat 3s ease-in-out infinite;
}

@keyframes herbalistFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.npc-sprite-herbalist .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.4) 0%, rgba(39, 174, 96, 0.1) 60%, transparent 80%);
  filter: blur(3px);
  z-index: 0;
  animation: mountaineerAura 2s ease-in-out infinite alternate;
}

.npc-sprite-herbalist .charBody {
  position: absolute;
  width: 14px;
  height: 22px;
  left: 25px;
  top: 25px;
  background: #2ecc71;
  border: 1.5px solid #1c1511;
  border-radius: 8px 8px 4px 4px;
}

/* Herbalist apron */
.npc-sprite-herbalist .charBody::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  left: 3px;
  top: 6px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 1px;
}

.npc-sprite-herbalist .charHead {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
}

/* Hair */
.npc-sprite-herbalist .charHead::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 12px;
  left: -2.5px;
  top: -2px;
  background: #e84393;
  border: 1.2px solid #1c1511;
  border-radius: 8px 8px 0 0;
  z-index: -1;
}

/* Flower crown */
.npc-sprite-herbalist .charHead::after {
  content: "🌸🌸";
  position: absolute;
  font-size: 8px;
  left: 0px;
  top: -6px;
  text-shadow: 0 1px 0 #1c1511;
  pointer-events: none;
}


/* Elidor the Druid */
.npc-sprite-druid {
  animation: mountaineerBreath 2.2s ease-in-out infinite;
}

.npc-sprite-druid .charAura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(162, 155, 254, 0.3) 0%, rgba(27, 77, 62, 0.08) 60%, transparent 80%);
  filter: blur(4px);
  z-index: 0;
}

.npc-sprite-druid .charBody {
  position: absolute;
  width: 18px;
  height: 26px;
  left: 23px;
  top: 23px;
  background: #1b4d3e;
  border: 1.5px solid #1c1511;
  border-radius: 5px;
}

/* Druid belt */
.npc-sprite-druid .charBody::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 3px;
  left: -1.5px;
  top: 12px;
  background: #5c4033;
  border: 1px solid #1c1511;
}

.npc-sprite-druid .charHead {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 24px;
  top: 9px;
  border-radius: 50%;
  background: #ffdcb6;
  border: 1.5px solid #1c1511;
}

/* Druid White Beard */
.npc-sprite-druid .charHead::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 14px;
  left: 2px;
  top: 8px;
  background: #ffffff;
  border: 1.2px solid #1c1511;
  border-radius: 0 0 6px 6px;
}

/* Antler Horns */
.npc-sprite-druid .charHead::after {
  content: "🦌";
  position: absolute;
  font-size: 11px;
  left: 2px;
  top: -12px;
  filter: drop-shadow(0 1px 0 #1c1511);
  transform: rotate(-10deg);
}

/* =======================================
   NPC QUEST INDICATORS
   ======================================= */
.npc-quest-indicator {
  position: absolute;
  bottom: calc(100% + 36px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2000 !important;
  animation: questIndicatorFloat 1.8s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
}

.npc-quest-indicator .quest-svg-icon {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(255, 214, 0, 0.8)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9));
}

.npc-quest-indicator.turn-in .quest-svg-icon {
  filter: drop-shadow(0 0 10px rgba(118, 255, 3, 0.85)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9));
}

@keyframes questIndicatorFloat {
  0% {
    transform: translateX(-50%) translateY(0) scale(0.95);
  }
  100% {
    transform: translateX(-50%) translateY(-6px) scale(1.12);
  }
}

/* ==========================================
   TRANSPARENCY MODE (ENTITIES, PLAYERS & PWA)
   ========================================== */
body.transparency-mode .remotePlayer,
body.transparency-mode #player,
body.transparency-mode .monsterEntity,
body.transparency-mode .npcEntity,
body.transparency-mode .charSprite,
body.transparency-mode .monsterSprite,
body.transparency-mode .npcSprite,
.transparency-mode .remotePlayer,
.transparency-mode #player,
.transparency-mode .monsterEntity,
.transparency-mode .npcEntity,
.transparency-mode .charSprite,
.transparency-mode .monsterSprite,
.transparency-mode .npcSprite,
#gameWorld.transparency-mode .remotePlayer,
#gameWorld.transparency-mode #player,
#gameWorld.transparency-mode .monsterEntity,
#gameWorld.transparency-mode .npcEntity {
  opacity: 0.35 !important;
  -webkit-opacity: 0.35 !important;
  transition: opacity 0.2s ease;
}

body.transparency-mode .remotePlayer:hover,
body.transparency-mode #player:hover,
body.transparency-mode .monsterEntity:hover,
body.transparency-mode .npcEntity:hover,
.transparency-mode .remotePlayer:hover,
.transparency-mode #player:hover,
.transparency-mode .monsterEntity:hover,
.transparency-mode .npcEntity:hover {
  opacity: 0.9 !important;
  -webkit-opacity: 0.9 !important;
}

/* ==========================================
   PLAYER CONTEXT MENU (CLICK & TOUCH)
   ========================================== */
.player-context-menu {
  position: fixed !important;
  z-index: 100000 !important;
  min-width: 180px;
  background: rgba(23, 17, 13, 0.95);
  border: 1px solid var(--window-border, rgba(216, 180, 106, 0.25));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: contextFadeIn 0.15s ease-out;
}

.player-context-menu.hidden {
  display: none !important;
}

.context-menu-title {
  color: var(--ui-gold, #d8b46a);
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.2);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.context-btn {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 180, 106, 0.25);
  color: #efe6d2;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-btn:hover, .context-btn:active {
  background: rgba(216, 180, 106, 0.2);
  border-color: var(--ui-gold, #d8b46a);
  color: #fff;
}

.context-btn.secondary {
  background: rgba(50, 50, 50, 0.4);
  border-color: rgba(250, 250, 250, 0.2);
  color: #a7977c;
}

.context-btn.danger {
  background: rgba(183, 28, 28, 0.3);
  border-color: rgba(229, 115, 115, 0.4);
  color: #ffcdd2;
}

/* =======================================
   HOT AIR BALLOON (MONTGOLFIERE) CSS SPRITE
   ======================================= */
.npc-sprite-mongolfiere {
  width: 64px;
  height: 64px;
  position: relative;
  animation: balloonFloat 4s ease-in-out infinite;
}

@keyframes balloonFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

.npc-sprite-mongolfiere .fairyWings,
.npc-sprite-mongolfiere .fairyWand,
.npc-sprite-mongolfiere .charHeadgear,
.npc-sprite-mongolfiere .charCape {
  display: none !important;
}

/* 1. Wicker Basket, Ropes & Sandbags */
.npc-sprite-mongolfiere .charBody {
  display: block !important;
  position: absolute !important;
  width: 18px !important;
  height: 14px !important;
  left: 23px !important;
  top: 46px !important;
  background: #8b5a2b !important; /* Wicker brown base */
  /* Grid pattern representing the wicker texture */
  background-image: 
    linear-gradient(90deg, rgba(0,0,0,0.12) 50%, transparent 50%), 
    linear-gradient(rgba(0,0,0,0.12) 50%, transparent 50%) !important;
  background-size: 3px 3px !important;
  border: 1.8px solid #1c1511 !important;
  border-top: 3px solid #cd853f !important; /* Thick rim */
  border-radius: 2px !important;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,0.2) !important;
  z-index: 4 !important;
}

/* Left Ropes & Sandbag pouch */
.npc-sprite-mongolfiere .charBody::before {
  content: "" !important;
  position: absolute !important;
  width: 1.5px !important;
  height: 12px !important;
  left: 2px !important;
  top: -12px !important;
  background: #1c1511 !important;
  display: block !important;
  transform: none !important;
  box-shadow: 
    3.5px 0 0 0 #1c1511, /* Second left rope */
    -4px 13px 0 1px #d8c3a5, /* Sandbag canvas */
    -4px 14px 0 1px #d8c3a5,
    -4px 13px 0 2px #1c1511 !important; /* Sandbag outline */
}

/* Right Ropes & Sandbag pouch */
.npc-sprite-mongolfiere .charBody::after {
  content: "" !important;
  position: absolute !important;
  width: 1.5px !important;
  height: 12px !important;
  right: 2px !important;
  top: -12px !important;
  background: #1c1511 !important;
  display: block !important;
  transform: none !important;
  box-shadow: 
    -3.5px 0 0 0 #1c1511, /* Second right rope */
    4px 13px 0 1px #d8c3a5, /* Sandbag canvas */
    4px 14px 0 1px #d8c3a5,
    4px 13px 0 2px #1c1511 !important; /* Sandbag outline */
}

/* 2. Burner Fire Effect */
.npc-sprite-mongolfiere .charAura {
  display: block !important;
  position: absolute !important;
  left: 28px !important;
  top: 36px !important;
  width: 8px !important;
  height: 12px !important;
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40% !important;
  transform: none !important;
  background: linear-gradient(to top, rgba(255,255,255,0.9) 20%, #ffeb3b 50%, #e67e22 80%, transparent) !important;
  filter: blur(0.5px) !important;
  animation: burnerFlame 0.1s ease-in-out infinite alternate !important;
  z-index: 2 !important;
}

@keyframes burnerFlame {
  0% { transform: scaleX(0.9) translateY(1px); opacity: 0.8; }
  100% { transform: scaleX(1.1) scaleY(1.1) translateY(0); opacity: 1.0; }
}

/* 3. Teardrop Balloon Envelope */
.npc-sprite-mongolfiere .charHead {
  display: block !important;
  position: absolute !important;
  width: 42px !important;
  height: 46px !important;
  left: 11px !important;
  top: -2px !important;
  /* Authentic teardrop hot air balloon shape */
  border-radius: 50% 50% 25% 25% / 45% 45% 55% 55% !important;
  border: 1.8px solid #1c1511 !important;
  /* Multi-layered background: 3D specular shine, bottom shadow, lateral shading, and colorful stripes */
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45) 5%, transparent 55%),
    radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.5) 10%, transparent 75%),
    linear-gradient(to right, rgba(0,0,0,0.25) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.4) 100%),
    linear-gradient(90deg, #e74c3c 16.6%, #f1c40f 16.6%, #f1c40f 33.3%, #e74c3c 33.3%, #e74c3c 50%, #f1c40f 50%, #f1c40f 66.6%, #e74c3c 66.6%, #e74c3c 83.3%, #f1c40f 83.3%) !important;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.15), 0 5px 8px rgba(0,0,0,0.15) !important;
  z-index: 3 !important;
}

/* Top crown/valve cap of the balloon */
.npc-sprite-mongolfiere .charHead::before {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 4px !important;
  left: 16px !important;
  top: -4px !important;
  background: #1c1511 !important;
  border-radius: 3px 3px 0 0 !important;
  display: block !important;
}

/* Bottom burner collar / opening skirt */
.npc-sprite-mongolfiere .charHead::after {
  content: "" !important;
  position: absolute !important;
  width: 18px !important;
  height: 6px !important;
  left: 12px !important;
  bottom: -6px !important;
  background: #e74c3c !important; /* matches bottom envelope */
  border: 1.8px solid #1c1511 !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  display: block !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important;
  z-index: 5 !important;
}


/* ─── Sailor / Passeur (Old Sea Captain / Ferryman) ─── */
.npc-sprite-sailor {
  width: 32px;
  height: 48px;
  position: relative;
}
.npc-sprite-sailor .charBody {
  background: #1e3a8a !important; /* Navy Blue Coat */
  border: 1.5px solid #0f172a !important;
  border-radius: 4px !important;
}
.npc-sprite-sailor .charBody::after {
  content: "⚓";
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 8px;
  color: #f59e0b;
}
.npc-sprite-sailor .charHead {
  background: #f1f5f9 !important; /* White Captain Beard */
  border: 1.5px solid #0f172a !important;
  border-radius: 50% !important;
}
.npc-sprite-sailor .charHead::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  width: 16px;
  height: 8px;
  background: #1e3a8a;
  border: 1.2px solid #0f172a;
  border-radius: 6px 6px 0 0;
}

/* --- END ui/overlays.css --- */

/* --- BEGIN ui/characters.css --- */
/* =========================
   CHARACTER LIST & SELECTION
========================= */
.character-selection-panel {
  max-width: min(960px, 95vw);
  width: 95%;
  padding: 20px 24px;
}

#characterPanel .panel-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.18);
}

#characterPanel .panel-header-title h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, #fff2d0 0%, #ffd700 45%, #d8b46a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 14px rgba(216, 180, 106, 0.3);
  letter-spacing: 0.02em;
}

.char-count-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #efe6d2;
  background: linear-gradient(135deg, rgba(216, 180, 106, 0.15), rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(216, 180, 106, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.characterList,
#charList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 16px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 180, 106, 0.35) rgba(0, 0, 0, 0.2);
}

.characterList::-webkit-scrollbar,
#charList::-webkit-scrollbar {
  width: 5px;
}

.characterList::-webkit-scrollbar-thumb,
#charList::-webkit-scrollbar-thumb {
  background: rgba(216, 180, 106, 0.35);
  border-radius: 3px;
}

.characterItem {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(42, 34, 27, 0.92) 0%, rgba(20, 16, 12, 0.96) 100%);
  border: 1px solid rgba(216, 180, 106, 0.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 88px;
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.characterItem:hover {
  background: linear-gradient(135deg, rgba(54, 44, 34, 0.95) 0%, rgba(28, 22, 16, 0.98) 100%);
  border-color: rgba(216, 180, 106, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(216, 180, 106, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.characterItem.selectedCharacter {
  border-color: #ffd700 !important;
  background: linear-gradient(135deg, rgba(62, 50, 36, 0.95) 0%, rgba(32, 24, 17, 0.98) 100%);
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(216, 180, 106, 0.15);
}

/* Sprite Frame Box */
.characterSpriteFrame {
  width: 68px;
  height: 80px;
  border-radius: 12px;
  background: radial-gradient(circle at bottom center, rgba(216, 180, 106, 0.28) 0%, rgba(15, 12, 9, 0.9) 75%);
  border: 1px solid rgba(216, 180, 106, 0.35);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.characterItem:hover .characterSpriteFrame {
  border-color: rgba(216, 180, 106, 0.65);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(216, 180, 106, 0.25);
}

.characterMiniSprite {
  width: 48px;
  height: 72px;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.characterMiniSprite .charSprite {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -44%) scale(0.68) !important;
  transform-origin: center !important;
}

.spritePedestal {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 7px;
  background: radial-gradient(ellipse at center, rgba(216, 180, 106, 0.45) 0%, rgba(0, 0, 0, 0) 75%);
  border-radius: 50%;
  pointer-events: none;
}

/* Character Details */
.characterDetails,
.characterText {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 36px;
}

.charHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.characterName {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff2d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.charLevelBadge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffd700;
  background: rgba(216, 180, 106, 0.15);
  border: 1px solid rgba(216, 180, 106, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.charMetaRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.characterClassBadge,
.characterClass {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #dcd3bf;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  width: fit-content;
}

.classIconWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.classIconWrap svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.classNameText {
  font-weight: 600;
  color: #efe6d2;
}

/* XP Bar Container */
.charXpContainer,
.charLevelLine {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 1px;
}

.xpTextRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #a7977c;
  font-weight: 600;
}

.xpLabel {
  color: #d8b46a;
  font-weight: 700;
}

.xpValue {
  color: rgba(239, 230, 210, 0.75);
}

.charXpContainer .xpBar,
.charLevelLine .xpBar {
  width: 100%;
  height: 7px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(216, 180, 106, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  position: relative;
  margin-top: 0;
}

.charXpContainer .xpFill,
.charLevelLine .xpFill {
  height: 100%;
  background: linear-gradient(90deg, #c59b56 0%, #ffd700 100%);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  transition: width 0.3s ease;
}



/* Delete Button */
.deleteCharacterCross {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  transform: none !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 77, 77, 0.3) !important;
  color: #ff6b6b !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0.65 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
  padding: 0 !important;
}

.characterItem:hover .deleteCharacterCross {
  opacity: 0.95 !important;
  border-color: rgba(255, 77, 77, 0.5) !important;
}

.deleteCharacterCross:hover {
  opacity: 1 !important;
  background: rgba(237, 66, 69, 0.4) !important;
  border-color: #ff4d4d !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.4) !important;
}

/* Empty Slot Card */
.empty-slot-card {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px dashed rgba(216, 180, 106, 0.3) !important;
  min-height: 88px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.empty-slot-card:hover {
  background: rgba(216, 180, 106, 0.08) !important;
  border-color: #ffd700 !important;
  transform: translateY(-2px) !important;
}

.slot-plus-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(216, 180, 106, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.slot-text-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.slot-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffd700;
}

.slot-sub {
  font-size: 0.8rem;
  color: #a7977c;
}

/* Empty State */
.empty-characters-box {
  text-align: center;
  padding: 32px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(216, 180, 106, 0.25);
  border-radius: 14px;
  margin: 12px 0;
}

.empty-characters-box .empty-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.empty-characters-box p {
  margin: 0;
  color: #efe6d2;
  font-weight: 600;
}

.empty-characters-box .empty-sub {
  color: #a7977c;
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Actions Footer */
.panel-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.create-char-btn {
  background: linear-gradient(180deg, #e5b967 0%, #b8860b 100%) !important;
  border: 1px solid #ffe2aa !important;
  color: #120e0b !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(216, 180, 106, 0.2) !important;
}

.create-char-btn:hover:not(.disabled-btn) {
  background: linear-gradient(180deg, #fff0c4 0%, #d49b18 100%) !important;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35) !important;
}

.create-char-btn.disabled-btn {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
}

.logout-btn {
  margin-top: 2px;
}

@media (max-width: 480px) {
  .characterItem {
    gap: 10px;
    padding: 10px 12px;
  }
  .characterSpriteFrame {
    width: 58px;
    height: 72px;
  }
}

/* =========================
   INSTANCES & REALMS SELECTION
========================= */
.instance-selection-panel {
  max-width: min(880px, 96vw) !important;
  width: 95% !important;
  padding: 22px 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .instance-selection-panel {
    max-width: min(920px, 96vw) !important;
    padding: 24px 22px !important;
  }
}

.instance-selection-panel .panel-header-title {
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.18);
  width: 100%;
  box-sizing: border-box;
}

.instance-selection-panel .panel-header-title h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  background: linear-gradient(135deg, #fff2d0 0%, #ffd700 45%, #d8b46a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 14px rgba(216, 180, 106, 0.3);
  letter-spacing: 0.02em;
}

.instance-selection-panel .panel-subtitle {
  font-size: 0.85rem;
  color: #a7977c;
  margin: 0;
}

/* Search Bar */
.instance-search-container {
  position: relative;
  margin: 12px 0 8px 0;
  width: 100%;
  box-sizing: border-box;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.6;
  pointer-events: none;
}

.instance-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 36px 10px 36px !important;
  background: rgba(10, 8, 6, 0.6);
  border: 1px solid rgba(216, 180, 106, 0.25);
  border-radius: 10px;
  color: #efe6d2;
  font-size: 0.85rem;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.instance-search-input:focus {
  border-color: #ffd700;
  background: rgba(15, 12, 9, 0.85);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.clear-search-btn {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #a7977c !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 4px !important;
  width: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

.clear-search-btn:hover {
  color: #fff !important;
}

/* Instance List Container */
#instanceList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  max-height: min(60vh, 580px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 6px 4px 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 180, 106, 0.35) rgba(0, 0, 0, 0.2);
  scrollbar-gutter: stable;
}

#instanceList::-webkit-scrollbar {
  width: 5px;
}

#instanceList::-webkit-scrollbar-thumb {
  background: rgba(216, 180, 106, 0.35);
  border-radius: 3px;
}

/* Instance Card */
.instanceBox {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(32, 26, 20, 0.94) 0%, rgba(18, 14, 10, 0.97) 100%) !important;
  border: 1px solid rgba(216, 180, 106, 0.30) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.instanceBox:hover {
  background: linear-gradient(135deg, rgba(46, 36, 28, 0.96) 0%, rgba(24, 18, 14, 0.98) 100%) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(216, 180, 106, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

.instanceBox.is-full {
  opacity: 0.85;
}

/* Realm Card Top Row */
.realmCardTop {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Small SVG Logo Emblem Frame */
.realmEmblemFrame {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: radial-gradient(circle at center, rgba(216, 180, 106, 0.22) 0%, rgba(14, 18, 28, 0.95) 80%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.45) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.instanceBox:hover .realmEmblemFrame {
  border-color: #ffd700 !important;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, rgba(20, 26, 38, 0.98) 80%) !important;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3), 0 0 12px rgba(255, 215, 0, 0.4) !important;
  transform: scale(1.06) !important;
}

.realmEmblem {
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.realmEmblem svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  filter: drop-shadow(0 0 4px rgba(216, 180, 106, 0.5)) !important;
  transition: transform 0.25s ease !important;
}

.instanceBox:hover .realmEmblem svg {
  transform: scale(1.08) !important;
}

.instanceHeader {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.realmTitleRow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.instanceTitle {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff2d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  min-width: 0;
}

.realmIdBadge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(216, 180, 106, 0.15);
  color: #ffd700;
  border: 1px solid rgba(216, 180, 106, 0.3);
  flex-shrink: 0;
}

.realmSubtitle {
  font-size: 0.76rem;
  color: #a7977c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ping Badge */
.instancePing {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

.pingDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.instancePing.ping-low {
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.25);
}
.instancePing.ping-low .pingDot {
  background: #2ecc71;
  box-shadow: 0 0 6px #2ecc71;
}

.instancePing.ping-medium {
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.25);
}
.instancePing.ping-medium .pingDot {
  background: #f1c40f;
  box-shadow: 0 0 6px #f1c40f;
}

.instancePing.ping-high {
  color: #e74c3c;
  border-color: rgba(231, 76, 60, 0.25);
}
.instancePing.ping-high .pingDot {
  background: #e74c3c;
  box-shadow: 0 0 6px #e74c3c;
}

/* Instance Stats & Progress */
.instanceStats {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.instanceStatsHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.instanceStatusBadge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0 !important;
}

.statusDotPulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: pulseDot 1.5s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.instanceStatusBadge.fluid {
  background: rgba(46, 204, 113, 0.14);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.35);
}
.instanceStatusBadge.fluid .statusDotPulse {
  background: #2ecc71;
  box-shadow: 0 0 6px #2ecc71;
}

.instanceStatusBadge.busy {
  background: rgba(241, 196, 15, 0.14);
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, 0.35);
}
.instanceStatusBadge.busy .statusDotPulse {
  background: #f1c40f;
  box-shadow: 0 0 6px #f1c40f;
}

.instanceStatusBadge.full {
  background: rgba(231, 76, 60, 0.14);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.35);
}
.instanceStatusBadge.full .statusDotPulse {
  background: #e74c3c;
  box-shadow: 0 0 6px #e74c3c;
}

.instancePlayersCount {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(239, 230, 210, 0.85);
  white-space: nowrap;
}

.instanceProgress {
  height: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(216, 180, 106, 0.15) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.instanceProgressBar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.instanceProgressBar.fluid {
  background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.instanceProgressBar.busy {
  background: linear-gradient(90deg, #e67e22 0%, #f1c40f 100%);
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}

.instanceProgressBar.full {
  background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

/* Back Button */

.instance-back-btn {
  margin-top: 10px;
  width: 100% !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(216, 180, 106, 0.25) !important;
  border-radius: 10px !important;
  color: #a7977c !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.instance-back-btn:hover {
  color: #efe6d2 !important;
  border-color: rgba(216, 180, 106, 0.5) !important;
  background: rgba(216, 180, 106, 0.12) !important;
}

@media (max-width: 480px) {
  .instance-selection-panel {
    width: 95% !important;
    padding: 18px 12px !important;
  }
  #instanceList {
    padding: 2px 4px 2px 2px !important;
  }
  .instanceBox {
    padding: 12px 10px !important;
  }
  .realmEmblemFrame {
    width: 36px;
    height: 36px;
  }
  .realmEmblem svg {
    width: 18px;
    height: 18px;
  }
  .instanceTitle {
    font-size: 0.95rem;
  }
  .instancePlayersCount {
    font-size: 0.72rem;
  }
}

.disabled-btn {
  opacity: 0.55;
  cursor: not-allowed !important;
}
/* --- END ui/characters.css --- */

/* --- BEGIN ui/preview.css --- */
/* =========================
   PREVIEW BOX
   ========================= */
#previewBox {
  margin-top: 15px;
  padding: 15px;
  background: linear-gradient(180deg,#1d1813,#16110d);
  border: 2px solid #5a4325;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 120px;
  position: relative;
}

.character-creator-panel {
  max-width: 680px !important;
}

.creator-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: start;
}

.creator-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
  text-align: left;
}

/* Scrollbar styling for options */
.creator-options::-webkit-scrollbar {
  width: 6px;
}
.creator-options::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.creator-options::-webkit-scrollbar-thumb {
  background: var(--ui-gold);
  border-radius: 4px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-group label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ui-gold, #f59e0b);
  letter-spacing: 0.5px;
  font-weight: bold;
}

.option-group select {
  background: rgba(18, 22, 34, 0.95) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  padding: 8px 12px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 13px !important;
  outline: none !important;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.option-group select:focus,
.option-group select:hover {
  border-color: var(--ui-gold, #f59e0b) !important;
}

.option-group select option {
  background: #121622 !important;
  color: #f8fafc !important;
  padding: 8px !important;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 22, 34, 0.95) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
}

.color-picker-wrapper input[type="color"] {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
}

.color-picker-wrapper span {
  font-size: 13px;
  color: #dcd3bf;
  font-family: monospace;
}
/* --- END ui/preview.css --- */

/* --- BEGIN combat/combat.css --- */
/* =========================
   COMBAT MODE
========================= */
body.combat-mode #gameWorld,
body.combat-mode #player,
body.combat-mode .monsterEntity,
body.combat-mode .remotePlayer {
  pointer-events: none;
}

body.combat-mode #mapContainer {
  align-items: stretch;
  justify-content: stretch;
  background: #0b0907;
  overflow: hidden;
}

.combatScene {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: none;
  border-radius: 0;
  background: var(--window-bg, radial-gradient(circle at 50% 30%, rgba(20, 24, 38, 0.98) 0%, rgba(10, 12, 20, 0.99) 100%));
  backdrop-filter: none;
  box-shadow: none;
}

.combatSceneBoardPanel {
  order: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.combatSceneHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35));
  background: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.95) 0%, rgba(11, 14, 23, 0.98) 100%));
  box-shadow: var(--window-shadow, 0 4px 16px rgba(0, 0, 0, 0.4));
}

.combatSceneHeader h2 {
  margin: 0;
  color: var(--window-accent, #f59e0b);
}

.combatSceneHeader p {
  margin: 6px 0 0;
  color: var(--window-text, #efe6d2);
}

.combatSceneSidebar {
  order: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

/* Combat Grid */
.combatGrid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
  padding: 0 18px 14px;
}

.combatSection {
  padding: 0 18px 14px;
}

.combatSceneSidebar .combatSection {
  padding: 0;
  min-width: 220px;
}

.combatSceneSidebar .combatMonsterList,
.combatSceneSidebar .combatInitiativeList,
.combatSceneSidebar .combatLog {
  max-height: 180px;
  overflow: auto;
}

.combatSection h3 {
  margin: 0 0 10px;
  color: var(--window-accent, #f59e0b);
}

.combatActorCard,
.combatMonsterCard,
.combatInitiativeList,
.combatLog {
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35));
  border-radius: 14px;
  background: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.95) 0%, rgba(11, 14, 23, 0.98) 100%));
  box-shadow: var(--window-shadow, 0 4px 14px rgba(0, 0, 0, 0.4));
}

.combatActorCard {
  padding: 14px;
  display: grid;
  gap: 8px;
}

.combatActorName {
  font-size: 1rem;
  font-weight: bold;
  color: #fff1cd;
}

.combatActorMeta,
.combatActorResources,
.combatActorStats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.92rem;
  color: #dfd1b3;
}

.combatPill {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.combatStatInline,
.combatStatIcon,
.combatStatIcon--res {
  display: inline-flex;
  align-items: center;
}

.combatStatInline,
.combatStatIcon--res {
  gap: 4px;
}

.combatStatIcon--res {
  margin-right: 2px;
}

.combatActionRow {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.combatActionRow button {
  min-height: 44px;
  width: 100%;
}

#combatTimer {
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(27, 20, 15, 0.96), rgba(48, 37, 26, 0.92));
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}

.combatMapSummary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 180, 106, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 17, 13, 0.9), rgba(16, 11, 9, 0.82));
  color: #e7dbc1;
  font-size: 0.92rem;
  line-height: 1.4;
}

.combatMonsterCastState {
  margin-top: 4px;
}

.combatRangeBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(216, 180, 106, 0.24);
}

.combatRangeBadge--in {
  color: #dff7bf;
  background: rgba(112, 179, 72, 0.18);
  border-color: rgba(156, 214, 91, 0.35);
}

.combatRangeBadge--out {
  color: #e7d6b8;
  background: rgba(255, 255, 255, 0.05);
}

.combatTargetEstimate {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.combatTargetEstimateLine {
  font-size: 0.86rem;
  line-height: 1.35;
  color: #f0e1c2;
}

.combatTargetEstimateLine--outcome {
  margin-top: 4px;
  color: #d8c6a3;
}

/* Timeline Custom Styles */
.combatInitiativeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.95rem;
  color: #dfd1b3;
  transition: all 0.2s ease-in-out;
}

.timeline-item.active {
  background: linear-gradient(90deg, rgba(216, 180, 106, 0.25) 0%, rgba(216, 180, 106, 0.05) 100%);
  border-color: rgba(216, 180, 106, 0.6);
  color: #fff1cd;
  font-weight: bold;
  box-shadow: inset 0 0 8px rgba(216, 180, 106, 0.15);
}

.timeline-item.monster {
  border-left: 4px solid #f66666;
}

.timeline-item.player {
  border-left: 4px solid #66ccff;
}

.timeline-item.active.monster {
  border-left-width: 6px;
  border-left-color: #ff3333;
}

.timeline-item.active.player {
  border-left-width: 6px;
  border-left-color: #33aaff;
}

.timeline-item.ko {
  opacity: 0.4;
  text-decoration: line-through;
}

.timeline-badge {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.1);
}

.timeline-item.player .timeline-badge {
  color: #66ccff;
  background: rgba(102, 204, 255, 0.15);
}

.timeline-item.monster .timeline-badge {
  color: #f66666;
  background: rgba(246, 102, 102, 0.15);
}

.timeline-item.active .timeline-badge {
  background: #d8b46a;
  color: #17110d;
}

/* =========================
   COMBAT CHAT LAYOUT
   ========================= */

/* Hide sidebar during combat */
body.combat-mode .combatSceneSidebar {
  display: none !important;
}

@media (min-width: 1025px) {
  /* Restructure combat scene into 2 columns: board (left) + chat (right) */
  body.combat-mode .combatScene {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    grid-template-rows: 1fr !important;
    gap: 16px !important;
  }

  body.combat-mode .combatSceneBoardPanel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Style chatSection and chatBox inside combat scene */
  body.combat-mode #chatSection {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, rgba(28, 21, 17, 0.94) 0%, rgba(18, 14, 11, 0.92) 100%) !important;
    border: 1px solid rgba(216, 180, 106, 0.22) !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }

  body.combat-mode #chatBox {
    flex: 1 !important;
    max-height: none !important;
  }

  body.combat-mode #chatControls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body.combat-mode #chatControls select {
    width: 110px !important;
    box-sizing: border-box !important;
    padding: 8px !important;
  }

  body.combat-mode #chatControls input#chatInput {
    flex: 1 1 150px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px !important;
  }

  body.combat-mode #chatControls input#chatPrivateTo {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin-bottom: 4px !important;
  }

  body.combat-mode #chatControls button {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin: 0 !important;
  }
}

/* ====================================================
   SPECTATOR MODE IN-COMBAT BANNER & LAYOUT
   ==================================================== */
.combat-spectator-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: #ffffff;
  padding: 8px 14px;
  font-weight: 700;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(96, 165, 250, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 100;
  flex-shrink: 0;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  box-sizing: border-box;
  width: 100%;
}

.spectator-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #f1f5f9;
  white-space: nowrap;
}

.spectator-banner-quit-btn {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1px solid #f87171 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.spectator-banner-quit-btn:hover {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-1px) !important;
}

/* En mode spectateur : masquer le HUD inutile (orbes de PV/PA/PM à 0 et sorts non utilisables) pour donner un max d'espace à l'arène */
body.combat-mode.is-spectator #combatHUD,
body.combat-mode.is-spectator .combatSceneBoardPanel > .combat-hud-panel {
  display: none !important;
}

body.combat-mode.is-spectator #combatPositionBoard {
  flex: 1 1 0 !important;
  height: 100% !important;
}
/* --- END combat/combat.css --- */

/* --- BEGIN combat/hud.css --- */
/* ==========================================================================
   STYLE COMBAT HUD
   ========================================================================== */

@keyframes heartPulse {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.15);
  }
}

@keyframes turnGlow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
  }

  50% {
    box-shadow: 0 0 18px rgba(46, 204, 113, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.2);
  }
}

/* Base Panel */
.combat-hud-panel {
  display: none;
  /* Hidden by default */
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  gap: 16px;
  align-items: center;
  height: auto;
  padding: 16px;
  background: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.95) 0%, rgba(11, 14, 23, 0.98) 100%));
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35));
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: var(--window-shadow, 0 8px 24px rgba(0, 0, 0, 0.5));
}

/* Combat mode: hide nav sections, show combatHUD */
body.combat-mode #minimapContainer,
body.combat-mode #hudSection,
body.combat-mode #optionsSection {
  display: none !important;
}

/* Show combatHUD when tab is active OR in combat mode */
body.combat-mode #combatHUD,
.combat-hud-panel.mobile-visible {
  display: grid;
  flex: 1;
}



/* HP Orb & Badges */
.status-container {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 110px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.heart-orb {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 3px solid #5f4827;
  background: #180909;
  overflow: hidden;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
  cursor: help;
}

.heart-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  /* Dynamic */
  background: linear-gradient(0deg, #700000 0%, #c01010 60%, #e74c3c 100%);
  box-shadow: 0 -2px 8px rgba(231, 76, 60, 0.6);
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: heartPulse 3s ease-in-out infinite;
}

.heart-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 1px 3px #000, 0 -1px 3px #000;
  pointer-events: none;
  z-index: 10;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.badges {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 15;
}

.badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-family: monospace;
}

.badge-ap {
  background: radial-gradient(circle at 35% 35%, #54a0ff, #2e86de);
}

.badge-mp {
  background: radial-gradient(circle at 35% 35%, #1dd1a1, #10ac84);
}

/* Spell Bar Grid */
.spell-bar {
  display: grid;
  grid-template-rows: 46px; /* 1 row */
  grid-template-columns: repeat(10, 46px);
  grid-auto-flow: row;
  gap: 6px;
  padding: 4px;
  box-sizing: border-box;
  align-content: center;
  justify-content: center;
  height: auto;
  scrollbar-width: thin;
  scrollbar-color: #5f4827 #1c1511;
}

/* Combat Spell Bar Pagination */
.combat-spell-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  box-sizing: border-box;
}

#combatSpellPagePrevBtn {
  grid-column: 1;
  grid-row: 1;
}

#combatSpellBar {
  grid-column: 2;
  grid-row: 1;
}

#combatSpellPageNextBtn {
  grid-column: 3;
  grid-row: 1;
}

.combat-spell-page-btn {
  background: var(--window-surface, linear-gradient(180deg, #1c1511 0%, #120e0b 100%));
  border: 1.5px solid var(--window-border, rgba(245, 158, 11, 0.35));
  border-radius: 6px;
  color: var(--window-accent, #f59e0b);
  width: 32px;
  height: 46px;
  min-height: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  flex-shrink: 0;
  box-sizing: border-box;
}

.combat-spell-page-btn:hover:not(:disabled) {
  border-color: var(--window-accent, #f59e0b);
  color: #ffffff;
  background: var(--window-accent-soft, rgba(245, 158, 11, 0.25));
  transform: scale(1.05);
}

.combat-spell-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.combat-spell-pages {
  grid-column: 1 / span 3;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 0;
}

.combat-spell-page-dot {
  background: rgba(15, 23, 42, 0.8);
  border: 1.5px solid var(--window-border, rgba(245, 158, 11, 0.35));
  border-radius: 4px;
  color: var(--window-text, #a7977c);
  min-width: 24px;
  height: 18px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', 'Inter', sans-serif;
  padding: 0 4px;
}

.combat-spell-page-dot:hover {
  border-color: var(--window-accent, #f59e0b);
  color: var(--window-accent, #f59e0b);
}

.combat-spell-page-dot.active {
  background: var(--window-accent, #f59e0b);
  border-color: var(--window-accent, #f59e0b);
  color: #0f172a;
  box-shadow: 0 0 8px var(--window-accent-soft, rgba(245, 158, 11, 0.6));
}

.spell-slot {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.22));
  background: var(--window-surface, linear-gradient(135deg, #2b211a 0%, #140e0b 100%));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, box-shadow 0.15s, filter 0.15s;
  flex-shrink: 0;
}

.spell-slot>* {
  pointer-events: none;
}

.spell-slot:hover {
  border-color: var(--window-accent, #f59e0b);
  box-shadow: 0 0 10px var(--window-accent-soft, rgba(245, 158, 11, 0.6));
  filter: brightness(1.15);
  z-index: 10;
}

.spell-slot.is-selected {
  border-color: var(--window-accent, #f59e0b);
  box-shadow: 0 0 14px var(--window-accent, #f59e0b), inset 0 0 6px var(--window-accent-soft, rgba(245, 158, 11, 0.35));
  filter: brightness(1.2);
  z-index: 10;
}

.spell-slot.is-unavailable {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.spell-slot.is-locked {
  opacity: 0.25;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* AP and Hotkey indicators */
.spell-ap {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #2e86de;
  border: 1px solid #54a0ff;
  color: #ffffff;
  border-radius: 4px;
  padding: 0px 3px;
  font-size: 8px;
  font-weight: bold;
  font-family: monospace;
  z-index: 5;
  text-shadow: 0 0 2px #000;
}

.spell-hotkey {
  position: absolute;
  top: 2px;
  left: 3px;
  color: rgba(255, 222, 159, 0.6);
  font-size: 9px;
  font-weight: bold;
  font-family: monospace;
  z-index: 5;
}

/* Sigil adjustments */
.spell-slot .spellSigil {
  transform: scale(0.65);
}

/* Tooltip Description on Hover */
.spell-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  background: rgba(22, 17, 13, 0.98);
  border: 1.5px solid #d8b46a;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #ffe2aa;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  z-index: 3300;
}

.spell-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #d8b46a transparent transparent transparent;
}

.spell-slot:hover .spell-tooltip {
  display: block;
}

/* Action buttons area */
.action-bar {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: stretch;
  width: 160px;
}

.pass-turn-btn {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--window-border, #f59e0b);
  background: linear-gradient(135deg, var(--window-accent, #f59e0b) 0%, var(--window-accent-hover, #d97706) 100%);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px var(--window-accent-soft, rgba(245, 158, 11, 0.35));
  font-family: 'Outfit', 'Inter', sans-serif;
  text-align: center;
}

.pass-turn-btn:hover:not(:disabled) {
  transform: scale(1.02);
  filter: brightness(1.12);
  box-shadow: 0 6px 18px var(--window-accent-soft, rgba(245, 158, 11, 0.5));
}

.pass-turn-btn.is-active {
  background: linear-gradient(135deg, var(--window-accent, #f59e0b) 0%, var(--window-accent-hover, #d97706) 100%);
  border-color: var(--window-accent, #f59e0b);
  box-shadow: 0 0 18px var(--window-accent-soft, rgba(245, 158, 11, 0.7));
  animation: turnGlow 1.5s ease-in-out infinite;
}

.pass-turn-btn.is-ready {
  background: linear-gradient(135deg, var(--window-accent, #f59e0b) 0%, var(--window-accent-hover, #d97706) 100%);
  border-color: var(--window-border, #f59e0b);
  box-shadow: 0 0 12px var(--window-accent-soft, rgba(245, 158, 11, 0.6));
}

.pass-turn-btn.is-ready:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 0 16px var(--window-accent-soft, rgba(245, 158, 11, 0.8));
}

.pass-turn-btn:disabled {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

.surrender-btn {
  width: 100%;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #721c24;
  background: linear-gradient(180deg, #c82333 0%, #bd2130 100%);
  color: #f5c6cb;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.surrender-btn:hover {
  background: #bd2130;
  color: #ffffff;
}

/* Spell Central Zone & Description */
.combat-spell-zone {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: auto;
  min-width: 530px;
}

.combat-spell-desc-inline {
  height: 48px;
  width: 100%;
  max-width: 680px;
  background: rgba(12, 9, 7, 0.82);
  border: 1.5px solid #5f4827;
  border-radius: 6px;
  padding: 4px 12px;
  box-sizing: border-box;
  color: #ffe2aa;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85);
}

.combat-spell-desc-empty {
  text-align: center;
  color: #a7977c;
  font-style: italic;
  font-size: 10.5px;
}

.combat-spell-desc-content-horizontal {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}

.spell-desc-header-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.spell-desc-header-inline .spellSigil {
  transform: scale(0.4);
  transform-origin: center;
  margin: -16px;
  flex-shrink: 0;
}

.spell-name-inline {
  font-weight: bold;
  color: #ffd700;
  font-size: 12px;
}

.spell-lvl-inline {
  font-size: 9px;
  color: #a7977c;
}

.spell-stats-inline {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.spell-stat-pill {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 9.5px;
}

.spell-damage-inline {
  color: #a2dd7c;
  font-size: 10px;
  background: rgba(162, 221, 124, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(162, 221, 124, 0.12);
  flex-shrink: 0;
  font-weight: 500;
}

.spell-text-inline {
  color: #dcd3bf;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  text-align: left;
  margin-left: 8px;
}

.combat-spell-target-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  margin-left: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(216, 180, 106, 0.14);
}

.combat-spell-target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #ffe2aa;
  font-size: 10px;
}

.combat-spell-target-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.combat-spell-target-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.combat-spell-target-outcome {
  margin-left: 0;
}

.close-spell-desc-btn {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES (MOBILE & TABLET <= 768px)
   ========================================================================== */

@media (max-width: 768px) {
  .combatSceneBoardPanel>.combat-hud-panel {
    display: grid !important;
  }

  .combat-hud-panel {
    grid-column: 1;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    padding: 6px 8px;
    height: auto !important;
    min-height: 0;
    overflow: hidden !important;
    align-items: center;
    justify-content: stretch;
    border-left: none;
    border-top: 1px solid rgba(216, 180, 106, 0.18);
    border-radius: 12px;
  }

  /* Sur mobile, le descripteur de sort est un bandeau compact inline au-dessus des sorts dans le HUD */
  #combatSpellDesc {
    display: none !important;
  }

  .combat-hud-panel #combatSpellDesc.combat-spell-desc-visible {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    max-height: none !important;
    padding: 2px 6px !important;
    margin: 0 0 3px 0 !important;
    background: rgba(18, 14, 11, 0.95) !important;
    border: 1px solid rgba(216, 180, 106, 0.35) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
  }

  .combat-hud-panel #combatSpellDesc .combat-spell-desc-content-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px 6px !important;
    width: 100% !important;
    padding-right: 0 !important;
    position: relative !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-desc-header-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-desc-header-inline .spell-slot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-width: 1px !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-desc-header-inline .spell-slot .spell-graphic-icon {
    transform: translate(-50%, -50%) scale(0.28) !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-name-inline {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffd700 !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-lvl-inline {
    font-size: 8.5px !important;
    color: #a7977c !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-stats-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-stat-pill {
    font-size: 8.5px !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-damage-inline {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    color: #a2dd7c !important;
    background: rgba(162, 221, 124, 0.12) !important;
  }

  .combat-hud-panel #combatSpellDesc .spell-text-inline {
    display: none !important;
  }

  .combat-hud-panel #combatSpellDesc .close-spell-desc-btn {
    display: inline-flex !important;
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    font-size: 12px !important;
    border-radius: 50% !important;
    margin-left: auto !important;
  }

  .status-container {
    grid-column: 1;
    grid-row: 1;
    width: 66px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 0;
  }

  .heart-orb {
    width: 44px;
    height: 44px;
  }

  .badges {
    right: 0px;
    gap: 4px;
  }

  .badge {
    width: 17px;
    height: 17px;
    font-size: 8px;
  }

  .action-bar {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    width: 100%;
    gap: 6px;
    margin-top: 0;
    align-items: center;
  }

  .hud-timer-badge {
    font-size: 13px !important;
    height: 30px !important;
    padding: 0 6px !important;
    min-width: 38px !important;
  }

  .pass-turn-btn {
    flex: 2;
    height: 30px;
    font-size: 11px;
    padding: 0 8px;
  }

  .surrender-btn {
    flex: 1;
    height: 30px;
    font-size: 10px;
    padding: 0 6px;
  }

  .combat-spell-zone {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
  }

  .combat-spell-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 3px 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #combatSpellPagePrevBtn,
  #combatSpellPageNextBtn {
    width: 26px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .spell-bar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 2px 2px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .spell-bar::-webkit-scrollbar {
    display: none !important;
  }

  .spell-slot {
    width: 40px !important;
    height: 40px !important;
    border-width: 1.5px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    touch-action: manipulation;
  }

  .spell-slot .spellSigil {
    transform: scale(0.44) !important;
  }

  .spell-slot .spell-hotkey {
    position: absolute !important;
    top: 1px !important;
    left: 3px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    color: #ffd700 !important;
    text-shadow: 0 1px 2px #000 !important;
    opacity: 0.75 !important;
    pointer-events: none !important;
    z-index: 6 !important;
    line-height: 1 !important;
  }

  .spell-slot .spell-ap {
    position: absolute !important;
    bottom: 1px !important;
    right: 2px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 3px !important;
    padding: 0 2.5px !important;
    line-height: 1.1 !important;
    pointer-events: none !important;
    z-index: 6 !important;
    text-shadow: 0 1px 2px #000 !important;
  }

  .combat-spell-pages {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
  }

  .combat-spell-page-dot {
    width: 22px !important;
    height: 16px !important;
    min-height: 16px !important;
    font-size: 9px !important;
    padding: 0 !important;
    border-radius: 3px !important;
  }

  /* Disable hover tooltips on touch devices */
  .spell-tooltip {
    display: none !important;
  }
}

/* ==========================================================================
   ADAPTATION DU MOTEUR VISUEL DE SORTS AU HUD DE COMBAT (46px)
   ========================================================================== */

/* Ajustement des variables globales pour la taille mini 46px */
.spell-slot[class*="vkey-"] {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  /* Force l'activation des hovers */
}

/* Forcer le rendu du fond radial propre au sort */
.spell-slot[class*="vkey-"] .spell-inner-frame {
  position: absolute;
  inset: 1.5px;
  border-radius: 4px;
  border: 1.5px solid var(--neon-color, #ffd700);
  background: radial-gradient(circle at center, var(--bg-soft, #151515) 0%, #050505 100%) !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  display: block !important;
}

/* Gérer les vagues d'énergie en arrière-plan */
.spell-slot[class*="vkey-"] .spell-energy-waves {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--wave-color, transparent) 15%, transparent 85%) !important;
  filter: blur(3px);
  opacity: 0.65;
  display: block !important;
}

/* REDIMENSIONNEMENT DYNAMIQUE DES ICONES (Adaptation au slot de 46px) */
.spell-slot[class*="vkey-"] .spell-graphic-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Calcule un scale automatique pour que l'icône rentre dans le slot de 46px */
  transform: translate(-50%, -50%) scale(0.65) !important;
  background: linear-gradient(to bottom, #ffffff, var(--core-bright, #fff)) !important;
  filter: drop-shadow(0 0 calc(var(--glow-radius, 12px) * 0.6) var(--neon-color, #fff)) !important;
  display: block !important;
  visibility: visible !important;
}

/* ==========================================================================
   RESPONSIVE MOBILE (Slots à 38px)
   ========================================================================== */
@media (max-width: 768px) {
  .spell-slot[class*="vkey-"] .spell-inner-frame {
    inset: 1px;
    border-width: 1px;
  }

  .spell-slot[class*="vkey-"] .spell-graphic-icon {
    /* Échelle encore plus petite pour le mode mobile à 38px */
    transform: translate(-50%, -50%) scale(0.48) !important;
    filter: drop-shadow(0 0 4px var(--neon-color, #fff)) !important;
  }
}

/* ==========================================================================
   HORIZONTAL TIMELINE WIDGET
   ========================================================================== */
.combat-timeline-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.95) 0%, rgba(11, 14, 23, 0.98) 100%));
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35));
  border-radius: 12px;
  padding: 8px 16px;
  box-sizing: border-box;
  height: 76px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
  z-index: 100;
  width: 100%;
  box-shadow: var(--window-shadow, 0 4px 14px rgba(0, 0, 0, 0.4));
}

.combat-timeline-bar.collapsed {
  height: 48px;
  padding: 6px 12px;
}

.combat-timeline-bar.collapsed .timeline-bar-track {
  display: none !important;
}

.timeline-bar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-right: 1px dashed var(--window-border, rgba(245, 158, 11, 0.35));
  padding-right: 12px;
  height: 100%;
}

.timeline-bar-collapse-btn {
  background: var(--window-accent-soft, rgba(245, 158, 11, 0.15));
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35));
  border-radius: 4px;
  color: var(--window-accent, #f59e0b);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  transition: all 0.2s;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-bar-collapse-btn:hover {
  background: var(--window-accent-soft, rgba(245, 158, 11, 0.3));
  border-color: var(--window-accent, #f59e0b);
}

.timeline-bar-round {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--window-text, #efe6d2);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: bold;
}

.timeline-bar-round #combatTimelineRoundText {
  font-size: 16px;
  color: var(--window-accent, #f59e0b);
}

.timeline-bar-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  padding: 4px 2px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--window-border, rgba(245, 158, 11, 0.35)) rgba(0, 0, 0, 0.2);
}

/* Timeline Cards */
.timeline-card {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.22));
  background: var(--window-surface, radial-gradient(circle at center, #261f18 0%, #0d0a07 100%));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: help;
}

.timeline-card:hover {
  border-color: var(--window-accent, #f59e0b);
  transform: translateY(-2px);
}

.timeline-card.active {
  border-color: var(--window-accent, #f59e0b);
  box-shadow: 0 0 14px var(--window-accent-soft, rgba(245, 158, 11, 0.75)), inset 0 0 4px rgba(255, 255, 255, 0.15);
  transform: scale(1.08);
  z-index: 5;
  animation: activeCardPulse 1.5s infinite alternate;
}

@keyframes activeCardPulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 63, 52, 0.4);
  }
  100% {
    box-shadow: 0 0 14px rgba(255, 63, 52, 0.9);
  }
}

.timeline-card.ko {
  opacity: 0.35;
  filter: grayscale(0.9) brightness(0.5);
  border-color: #2b211a;
}

.timeline-card.can-target {
  cursor: pointer;
}
.timeline-card.can-target:hover {
  border-color: #2ecc71 !important;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.8), inset 0 0 6px rgba(46, 204, 113, 0.3);
  transform: translateY(-3px) scale(1.05);
}
.timeline-card.out-of-range-target {
  opacity: 0.75;
}

/* Damage Preview Badge on Timeline Card */
.timeline-card-dmg-badge {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.95);
  color: #ff4757;
  border: 1px solid #ff4757;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 2px 5px rgba(0,0,0,0.7);
  font-family: monospace, sans-serif;
}
.timeline-card-dmg-badge.out-range {
  color: #a4b0be;
  border-color: #747d8c;
  font-size: 8px;
  opacity: 0.8;
}
.timeline-card-dmg-badge.lethal {
  color: #ffffff;
  background: #651b1b;
  border-color: #fca5a5;
  font-size: 8px;
  padding: 2px 4px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.75), 0 0 6px rgba(239, 68, 68, 0.3);
  animation: none;
}

.timeline-card-hover-preview {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

/* Left HP bar inside timeline card */
.timeline-card-hp-bar {
  position: absolute;
  left: 2px;
  top: 4px;
  bottom: 4px;
  width: 3.5px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  overflow: hidden;
  z-index: 15;
}

.timeline-card-hp-fill {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #2ecc71;
  transition: height 0.25s ease-out;
}

/* Red turn timer overlay for currently active card */
.timeline-card-time-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background: rgba(255, 215, 0, 0.25);
  pointer-events: none;
  z-index: 3;
}

/* Avatar content scaling */
.timeline-card-avatar {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

body.isometric-mode .timeline-card-avatar .charSprite,
.timeline-card-avatar .charSprite {
  position: absolute !important;
  top: 55% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.38) !important;
  transform-origin: center center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.isometric-mode .timeline-card-avatar .monsterEntity,
.timeline-card-avatar .monsterEntity {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.isometric-mode .timeline-card-avatar .monsterEntity .monsterName,
body.isometric-mode .timeline-card-avatar .monsterEntity .monsterJoinCombatBtn,
body.isometric-mode .timeline-card-avatar .monsterEntity .monsterHpBarContainer,
.timeline-card-avatar .monsterEntity .monsterName,
.timeline-card-avatar .monsterEntity .monsterJoinCombatBtn,
.timeline-card-avatar .monsterEntity .monsterHpBarContainer {
  display: none !important;
}

body.isometric-mode .timeline-card-avatar .monsterEntity .monsterSprite,
.timeline-card-avatar .monsterEntity .monsterSprite {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.58) !important;
  transform-origin: center center !important;
  width: 64px !important;
  height: 64px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}


/* Boss specific scaling inside timeline cards to prevent cut-offs */
body.isometric-mode .timeline-card-avatar .monsterEntity.is-boss .monsterSprite,
.timeline-card-avatar .monsterEntity.is-boss .monsterSprite {
  transform: translate(-50%, -50%) scale(0.4) !important;
}

/* Timer Badge at bottom */
.hud-timer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 900;
  height: 38px;
  border-radius: 8px;
  box-sizing: border-box;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  margin-bottom: 4px;
}

.hud-timer-badge.is-player-turn {
  background: linear-gradient(135deg, #1e3d29 0%, #0c1c11 100%);
  border: 2px solid #2ecc71;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

.hud-timer-badge.is-enemy-turn {
  background: linear-gradient(135deg, #3a1515 0%, #1a0808 100%);
  border: 2px solid #e74c3c;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

/* Hide original initiative section on sidebar */
body.combat-mode .combatInitiativeSection {
  display: none !important;
}

/* Responsive tweaks for timeline */
@media (max-width: 768px) {
  .combat-timeline-bar {
    height: 68px;
    padding: 3px 8px 6px;
  }
  .timeline-bar-track {
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px 4px 6px;
  }
  .timeline-card {
    width: 40px;
    height: 40px;
    overflow: visible;
  }
  .timeline-card-dmg-badge {
    bottom: -6px;
    font-size: 7.5px;
    padding: 1px 3px;
  }
  .timeline-card-avatar .charSprite {
    transform: translate(-50%, -50%) scale(0.3);
  }
  body.isometric-mode .timeline-card-avatar .monsterEntity,
  .timeline-card-avatar .monsterEntity {
    transform: none !important;
  }
  body.isometric-mode .timeline-card-avatar .monsterEntity .monsterSprite,
  .timeline-card-avatar .monsterEntity .monsterSprite {
    transform: translate(-50%, -50%) scale(0.44) !important;
  }
  body.isometric-mode .timeline-card-avatar .monsterEntity.is-boss .monsterSprite,
  .timeline-card-avatar .monsterEntity.is-boss .monsterSprite {
    transform: translate(-50%, -50%) scale(0.3) !important;
  }
}

/* Floating Damage Indicators */
.combat-damage-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #ff2a2a;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 900;
  text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 3px 6px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 1000;
  animation-duration: 1.45s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.combat-damage-indicator.float-up {
  bottom: 80%;
  animation-name: floatUpDamage;
}

.combat-damage-indicator.float-down {
  top: 80%;
  animation-name: floatDownDamage;
}

@keyframes floatUpDamage {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -25px) scale(1.35);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -65px) scale(0.8);
    opacity: 0;
  }
}

@keyframes floatDownDamage {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, 25px) scale(1.35);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 50px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 65px) scale(0.8);
    opacity: 0;
  }
}

/* Instant Hover Damage Preview Card (Desktop) */
.combat-cell-hover-preview {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1f1814 0%, #0d0a07 100%);
  border: 1px solid #d8b46a;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.8), 0 0 8px rgba(216,180,106,0.25);
  pointer-events: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 11px;
  color: #efe6d2;
  white-space: nowrap;
  opacity: 0;
  animation: fadeInQuick 0.15s forwards ease-out;
}

@keyframes fadeInQuick {
  to {
    opacity: 1;
    transform: translate(-50%, -4px);
  }
}

.combat-cell-hover-preview .preview-damage-value {
  color: #ff4d4d;
  font-weight: 800;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.combat-cell-hover-preview .preview-hp-change {
  color: #a7977c;
  font-weight: 500;
}

.combat-cell-hover-preview .preview-lethal {
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 1px;
}

.combat-cell-hover-preview.out-of-range {
  border-color: #ff3333;
  box-shadow: 0 6px 16px rgba(0,0,0,0.8), 0 0 8px rgba(255, 50, 50, 0.2);
}

.combat-cell-hover-preview.out-of-range .preview-damage-value {
  color: #ff3333;
}

.combat-cell-hover-preview .preview-title {
  color: #d8b46a;
  font-weight: bold;
  border-bottom: 1px dashed rgba(216, 180, 106, 0.3);
  padding-bottom: 2px;
  margin-bottom: 4px;
  width: 100%;
  text-align: center;
}

.combat-cell-hover-preview .preview-target-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2px 0;
}

.combat-cell-hover-preview .preview-target-row:last-child {
  border-bottom: none;
}

.combat-cell-hover-preview .preview-target-name {
  font-weight: bold;
  color: #efe6d2;
}


/* --- END combat/hud.css --- */

/* --- BEGIN combat/spells.css --- */
/* ==========================================================================
   ICÔNES ET VISUELS UNIQUES POUR TOUS LES SORTS (161 SORTS - 4 CLASSES)
   Chaque sort dispose d'une silhouette figurative propre liée à son nom
   et de variables chromatiques élémentaires néon.
   ========================================================================== */

/* ==========================================================================
   CLASSE : GUERRIER (41 SORTS)
   ========================================================================== */

/* 1. Tranchant d'Air (Guerrier - agilite) */
.vkey-warrior-tranchant-air, .vkey-tranchant-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-tranchant-air .spell-graphic-icon, .vkey-tranchant-air .spell-graphic-icon {
  width: 22px;
  height: 50px;
  clip-path: polygon(75% 0%, 85% 10%, 75% 70%, 85% 72%, 85% 78%, 55% 78%, 55% 100%, 45% 100%, 45% 78%, 20% 78%, 20% 72%, 45% 70%, 55% 10%);
}

/* 2. Pression (Guerrier - force) */
.vkey-warrior-pression, .vkey-pression {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-pression .spell-graphic-icon, .vkey-pression .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(5% 5%, 95% 5%, 95% 35%, 60% 35%, 60% 95%, 40% 95%, 40% 35%, 5% 35%);
}

/* 3. Posture du Berserker (Guerrier - force) */
.vkey-warrior-berserker, .vkey-posture-du-berserker {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-berserker .spell-graphic-icon, .vkey-posture-du-berserker .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(0% 15%, 20% 0%, 30% 25%, 50% 15%, 70% 25%, 80% 0%, 100% 15%, 85% 60%, 70% 55%, 65% 95%, 35% 95%, 30% 55%, 15% 60%);
}

/* Posture Défensive (Guerrier - Défense / Résistance) */
.vkey-warrior-posture-defensive, .vkey-posture-defensive {
  --border-color: #64B5F6;
  --neon-color: #1E88E5;
  --bg-soft: #0A1929;
  --wave-color: #1565C0;
  --core-bright: #E3F2FD;
  --glow-radius: 12px;
}
.vkey-warrior-posture-defensive .spell-graphic-icon, .vkey-posture-defensive .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(50% 0%, 90% 12%, 100% 42%, 85% 78%, 50% 100%, 15% 78%, 0% 42%, 10% 12%);
}

/* 4. Vague Tranchante (Guerrier - chance) */
.vkey-warrior-vague-tranchante, .vkey-vague-tranchante {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-vague-tranchante .spell-graphic-icon, .vkey-vague-tranchante .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(0% 50%, 30% 15%, 75% 5%, 100% 25%, 70% 40%, 85% 70%, 50% 95%, 25% 80%, 35% 55%);
}

/* 5. Lame de Feu (Guerrier - intelligence) */
.vkey-warrior-lame-feu, .vkey-lame-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-lame-feu .spell-graphic-icon, .vkey-lame-feu .spell-graphic-icon {
  width: 26px;
  height: 50px;
  clip-path: polygon(50% 0%, 75% 18%, 60% 32%, 85% 48%, 60% 64%, 80% 78%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 20% 78%, 40% 64%, 15% 48%, 40% 32%, 25% 18%);
}

/* 6. Impact Brutal (Guerrier - force) */
.vkey-warrior-impact-brutal, .vkey-impact-brutal {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-impact-brutal .spell-graphic-icon, .vkey-impact-brutal .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(50% 0%, 65% 25%, 100% 35%, 75% 65%, 85% 100%, 50% 80%, 15% 100%, 25% 65%, 0% 35%, 35% 25%);
}

/* 7. Tornade d'Épées (Guerrier - agilite) */
.vkey-warrior-tornade-epees, .vkey-tornade-epees {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-tornade-epees .spell-graphic-icon, .vkey-tornade-epees .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 65% 62%, 50% 100%, 38% 65%, 0% 50%, 35% 38%);
}

/* 8. Coup Handicapant (Guerrier - force) */
.vkey-warrior-coup-handicapant, .vkey-coup-handicapant {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-coup-handicapant .spell-graphic-icon, .vkey-coup-handicapant .spell-graphic-icon {
  width: 42px;
  height: 40px;
  clip-path: polygon(15% 15%, 45% 15%, 45% 35%, 30% 35%, 30% 65%, 45% 65%, 45% 85%, 15% 85%, 15% 60%, 5% 50%, 15% 40%, 85% 15%, 85% 40%, 95% 50%, 85% 60%, 85% 85%, 55% 85%, 55% 65%, 70% 65%, 70% 35%, 55% 35%, 55% 15%);
}

/* 9. Courroux Aqueux (Guerrier - chance) */
.vkey-warrior-courroux-aqueux, .vkey-courroux-aqueux {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-courroux-aqueux .spell-graphic-icon, .vkey-courroux-aqueux .spell-graphic-icon {
  width: 38px;
  height: 48px;
  clip-path: polygon(50% 0%, 62% 20%, 58% 35%, 82% 15%, 90% 25%, 75% 50%, 58% 50%, 58% 100%, 42% 100%, 42% 50%, 25% 50%, 10% 25%, 18% 15%, 42% 35%, 38% 20%);
}

/* 10. Couperet Enflammé (Guerrier - intelligence) */
.vkey-warrior-couperet-enflamme, .vkey-couperet-enflamme {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-couperet-enflamme .spell-graphic-icon, .vkey-couperet-enflamme .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(0% 10%, 95% 5%, 100% 50%, 60% 65%, 60% 95%, 45% 95%, 45% 65%, 0% 60%);
}

/* 11. Bond Héroïque (Guerrier - force) */
.vkey-warrior-bond-heroique, .vkey-bond-heroique {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-bond-heroique .spell-graphic-icon, .vkey-bond-heroique .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(0% 40%, 20% 10%, 60% 20%, 100% 0%, 85% 40%, 95% 60%, 75% 70%, 80% 95%, 45% 95%, 40% 75%, 20% 75%, 10% 60%);
}

/* 12. Bourrasque (Guerrier - agilite) */
.vkey-warrior-bourrasque, .vkey-bourrasque {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-bourrasque .spell-graphic-icon, .vkey-bourrasque .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 70% 15%, 55% 35%, 95% 50%, 75% 75%, 55% 60%, 40% 95%, 15% 85%, 35% 55%, 5% 40%, 25% 15%, 45% 35%);
}

/* 13. Séisme (Guerrier - force) */
.vkey-warrior-seisme, .vkey-seisme {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-seisme .spell-graphic-icon, .vkey-seisme .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(35% 0%, 65% 0%, 55% 30%, 85% 40%, 60% 65%, 90% 85%, 65% 100%, 35% 100%, 45% 70%, 15% 60%, 40% 35%, 10% 15%);
}

/* 14. Fracas de Vagues (Guerrier - chance) */
.vkey-warrior-fracas-vagues, .vkey-fracas-vagues {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-fracas-vagues .spell-graphic-icon, .vkey-fracas-vagues .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(0% 70%, 20% 35%, 40% 50%, 60% 10%, 85% 30%, 100% 65%, 75% 65%, 60% 85%, 35% 85%, 25% 65%);
}

/* 15. Fauchage de Tendon (Guerrier - force) */
.vkey-warrior-fauchage-tendon, .vkey-fauchage-de-tendon {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-fauchage-tendon .spell-graphic-icon, .vkey-fauchage-de-tendon .spell-graphic-icon {
  width: 46px;
  height: 44px;
  clip-path: polygon(10% 5%, 85% 0%, 100% 18%, 50% 35%, 45% 60%, 55% 100%, 40% 100%, 32% 55%, 20% 30%);
}

/* 16. Cercle de Feu (Guerrier - intelligence) */
.vkey-warrior-cercle-feu, .vkey-cercle-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-cercle-feu .spell-graphic-icon, .vkey-cercle-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 5%, 62% 22%, 80% 10%, 78% 30%, 95% 35%, 82% 50%, 95% 65%, 78% 70%, 80% 90%, 62% 78%, 50% 95%, 38% 78%, 20% 90%, 22% 70%, 5% 65%, 18% 50%, 5% 35%, 22% 30%, 20% 10%, 38% 22%);
}

/* 17. Assaut Céleste (Guerrier - agilite) */
.vkey-warrior-assaut-celeste, .vkey-assaut-celeste {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-assaut-celeste .spell-graphic-icon, .vkey-assaut-celeste .spell-graphic-icon {
  width: 44px;
  height: 50px;
  clip-path: polygon(50% 100%, 42% 65%, 10% 50%, 0% 25%, 30% 35%, 42% 10%, 50% 0%, 58% 10%, 70% 35%, 100% 25%, 90% 50%, 58% 65%);
}

/* 18. Colère Divine (Guerrier - force) */
.vkey-warrior-colere-divine, .vkey-colere-divine {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-colere-divine .spell-graphic-icon, .vkey-colere-divine .spell-graphic-icon {
  width: 46px;
  height: 52px;
  clip-path: polygon(50% 0%, 62% 15%, 58% 60%, 95% 60%, 95% 72%, 58% 72%, 58% 100%, 42% 100%, 42% 72%, 5% 72%, 5% 60%, 42% 60%, 38% 15%);
}

/* 19. Déluge de Lames (Guerrier - chance) */
.vkey-warrior-deluge-lames, .vkey-deluge-lames {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-deluge-lames .spell-graphic-icon, .vkey-deluge-lames .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(15% 0%, 30% 20%, 25% 70%, 30% 100%, 20% 75%, 5% 25%, 45% 0%, 55% 0%, 60% 60%, 50% 100%, 40% 60%, 85% 0%, 95% 25%, 80% 75%, 70% 100%, 75% 70%, 70% 20%);
}

/* 20. Jugement de Feu (Guerrier - intelligence) */
.vkey-warrior-jugement-feu, .vkey-jugement-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-jugement-feu .spell-graphic-icon, .vkey-jugement-feu .spell-graphic-icon {
  width: 46px;
  height: 50px;
  clip-path: polygon(50% 0%, 80% 10%, 95% 25%, 75% 28%, 56% 22%, 56% 75%, 70% 80%, 50% 100%, 30% 80%, 44% 75%, 44% 22%, 25% 28%, 5% 25%, 20% 10%);
}

/* 21. Maîtrise du Bastion Air (Guerrier - agilite) */
.vkey-warrior-bastion-air, .vkey-maitrise-bastion-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-bastion-air .spell-graphic-icon, .vkey-maitrise-bastion-air .spell-graphic-icon {
  width: 42px;
  height: 48px;
  clip-path: polygon(50% 0%, 85% 15%, 95% 45%, 75% 75%, 50% 100%, 25% 75%, 5% 45%, 15% 15%);
}

/* 22. Maîtrise du Bastion Terre (Guerrier - force) */
.vkey-warrior-bastion-terre, .vkey-maitrise-bastion-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-bastion-terre .spell-graphic-icon, .vkey-maitrise-bastion-terre .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(10% 0%, 30% 0%, 30% 10%, 50% 10%, 50% 0%, 70% 0%, 70% 10%, 90% 10%, 90% 0%, 100% 20%, 85% 75%, 50% 100%, 15% 75%, 0% 20%);
}

/* 23. Maîtrise du Bastion Eau (Guerrier - chance) */
.vkey-warrior-bastion-eau, .vkey-maitrise-bastion-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-bastion-eau .spell-graphic-icon, .vkey-maitrise-bastion-eau .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 15%, 100% 45%, 85% 85%, 50% 100%, 15% 85%, 0% 45%, 20% 15%);
}

/* 24. Maîtrise du Bastion Feu (Guerrier - intelligence) */
.vkey-warrior-bastion-feu, .vkey-maitrise-bastion-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-bastion-feu .spell-graphic-icon, .vkey-maitrise-bastion-feu .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 0%, 65% 12%, 85% 5%, 82% 25%, 100% 35%, 85% 55%, 90% 80%, 68% 82%, 50% 100%, 32% 82%, 10% 80%, 15% 55%, 0% 35%, 18% 25%, 15% 5%, 35% 12%);
}

/* 25. Fracture Tactique Air (Guerrier - agilite) */
.vkey-warrior-fracture-air, .vkey-fracture-tactique-air-retrait-pm {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-fracture-air .spell-graphic-icon, .vkey-fracture-tactique-air-retrait-pm .spell-graphic-icon {
  width: 24px;
  height: 50px;
  clip-path: polygon(50% 0%, 80% 20%, 60% 30%, 85% 45%, 55% 55%, 80% 70%, 55% 75%, 55% 100%, 45% 100%, 45% 75%, 20% 70%, 45% 55%, 15% 45%, 40% 30%, 20% 20%);
}

/* 26. Fracture Tactique Terre (Guerrier - force) */
.vkey-warrior-fracture-terre, .vkey-fracture-tactique-terre-retrait-pm {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-fracture-terre .spell-graphic-icon, .vkey-fracture-tactique-terre-retrait-pm .spell-graphic-icon {
  width: 32px;
  height: 48px;
  clip-path: polygon(50% 0%, 85% 35%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 15% 35%);
}

/* 27. Fracture Tactique Eau (Guerrier - chance) */
.vkey-warrior-fracture-eau, .vkey-fracture-tactique-eau-retrait-pa {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-fracture-eau .spell-graphic-icon, .vkey-fracture-tactique-eau-retrait-pa .spell-graphic-icon {
  width: 30px;
  height: 48px;
  clip-path: polygon(20% 0%, 60% 0%, 90% 30%, 65% 45%, 85% 65%, 55% 75%, 55% 100%, 40% 100%, 40% 75%, 20% 65%, 40% 45%, 10% 30%);
}

/* 28. Fracture Tactique Feu (Guerrier - intelligence) */
.vkey-warrior-fracture-feu, .vkey-fracture-tactique-feu-retrait-pa {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-fracture-feu .spell-graphic-icon, .vkey-fracture-tactique-feu-retrait-pa .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(50% 0%, 75% 25%, 55% 35%, 85% 60%, 60% 70%, 60% 100%, 40% 100%, 40% 70%, 15% 60%, 45% 35%, 25% 25%);
}

/* 29. Onde du Carnage Air (Guerrier - agilite) */
.vkey-warrior-carnage-air, .vkey-onde-carnage-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-carnage-air .spell-graphic-icon, .vkey-onde-carnage-air .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 68% 18%, 100% 20%, 82% 50%, 100% 80%, 68% 82%, 50% 100%, 32% 82%, 0% 80%, 18% 50%, 0% 20%, 32% 18%);
}

/* 30. Onde du Carnage Terre (Guerrier - force) */
.vkey-warrior-carnage-terre, .vkey-onde-carnage-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-carnage-terre .spell-graphic-icon, .vkey-onde-carnage-terre .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(25% 5%, 75% 5%, 95% 25%, 95% 45%, 65% 55%, 65% 95%, 35% 95%, 35% 55%, 5% 45%, 5% 25%);
}

/* 31. Onde du Carnage Eau (Guerrier - chance) */
.vkey-warrior-carnage-eau, .vkey-onde-carnage-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-carnage-eau .spell-graphic-icon, .vkey-onde-carnage-eau .spell-graphic-icon {
  width: 42px;
  height: 48px;
  clip-path: polygon(50% 0%, 90% 15%, 60% 35%, 95% 55%, 60% 65%, 60% 100%, 40% 100%, 40% 65%, 5% 55%, 40% 35%, 10% 15%);
}

/* 32. Onde du Carnage Feu (Guerrier - intelligence) */
.vkey-warrior-carnage-feu, .vkey-onde-carnage-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-carnage-feu .spell-graphic-icon, .vkey-onde-carnage-feu .spell-graphic-icon {
  width: 46px;
  height: 44px;
  clip-path: polygon(50% 10%, 75% 0%, 100% 20%, 80% 50%, 100% 80%, 75% 100%, 50% 90%, 25% 100%, 0% 80%, 20% 50%, 0% 20%, 25% 0%);
}

/* 33. Percée Royale Air (Guerrier - agilite) */
.vkey-warrior-percee-air, .vkey-percee-royale-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-percee-air .spell-graphic-icon, .vkey-percee-royale-air .spell-graphic-icon {
  width: 20px;
  height: 52px;
  clip-path: polygon(50% 0%, 90% 25%, 65% 40%, 75% 55%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 25% 55%, 35% 40%, 10% 25%);
}

/* 34. Percée Royale Terre (Guerrier - force) */
.vkey-warrior-percee-terre, .vkey-percee-royale-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-percee-terre .spell-graphic-icon, .vkey-percee-royale-terre .spell-graphic-icon {
  width: 30px;
  height: 50px;
  clip-path: polygon(50% 0%, 95% 30%, 70% 45%, 65% 100%, 35% 100%, 30% 45%, 5% 30%);
}

/* 35. Percée Royale Eau (Guerrier - chance) */
.vkey-warrior-percee-eau, .vkey-percee-royale-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-percee-eau .spell-graphic-icon, .vkey-percee-royale-eau .spell-graphic-icon {
  width: 38px;
  height: 50px;
  clip-path: polygon(50% 0%, 70% 20%, 60% 45%, 90% 50%, 60% 65%, 60% 100%, 40% 100%, 40% 65%, 10% 50%, 40% 45%, 30% 20%);
}

/* 36. Percée Royale Feu (Guerrier - intelligence) */
.vkey-warrior-percee-feu, .vkey-percee-royale-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-percee-feu .spell-graphic-icon, .vkey-percee-royale-feu .spell-graphic-icon {
  width: 34px;
  height: 52px;
  clip-path: polygon(50% 0%, 75% 15%, 55% 30%, 80% 45%, 60% 60%, 90% 68%, 60% 75%, 60% 100%, 40% 100%, 40% 75%, 10% 68%, 40% 60%, 20% 45%, 45% 30%, 25% 15%);
}

/* 37. Cataclysme d'Acier Air (Guerrier - agilite) */
.vkey-warrior-cataclysme-air, .vkey-cataclysme-acier-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-warrior-cataclysme-air .spell-graphic-icon, .vkey-cataclysme-acier-air .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 60% 15%, 75% 5%, 80% 25%, 100% 25%, 90% 45%, 100% 60%, 85% 70%, 85% 90%, 65% 85%, 50% 100%, 35% 85%, 15% 90%, 15% 70%, 0% 60%, 10% 45%, 0% 25%, 20% 25%, 25% 5%, 40% 15%);
}

/* 38. Cataclysme d'Acier Terre (Guerrier - force) */
.vkey-warrior-cataclysme-terre, .vkey-cataclysme-acier-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-warrior-cataclysme-terre .spell-graphic-icon, .vkey-cataclysme-acier-terre .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 70% 15%, 95% 10%, 85% 35%, 95% 60%, 70% 65%, 75% 95%, 50% 80%, 25% 95%, 30% 65%, 5% 60%, 15% 35%, 5% 10%, 30% 15%);
}

/* 39. Cataclysme d'Acier Eau (Guerrier - chance) */
.vkey-warrior-cataclysme-eau, .vkey-cataclysme-acier-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-warrior-cataclysme-eau .spell-graphic-icon, .vkey-cataclysme-acier-eau .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 5%, 85% 0%, 95% 35%, 65% 45%, 90% 75%, 60% 95%, 45% 65%, 15% 90%, 5% 55%, 35% 45%, 10% 15%, 40% 25%);
}

/* 40. Cataclysme d'Acier Feu (Guerrier - intelligence) */
.vkey-warrior-cataclysme-feu, .vkey-cataclysme-acier-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-warrior-cataclysme-feu .spell-graphic-icon, .vkey-cataclysme-acier-feu .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(40% 10%, 60% 10%, 65% 25%, 90% 20%, 80% 45%, 100% 60%, 85% 75%, 90% 100%, 10% 100%, 15% 75%, 0% 60%, 20% 45%, 10% 20%, 35% 25%);
}

/* 41. Coup d'Arme (Guerrier - force) */
.vkey-weapon-strike, .vkey-coup-arme {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-weapon-strike .spell-graphic-icon, .vkey-coup-arme .spell-graphic-icon {
  width: 22px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 20%, 70% 65%, 95% 70%, 95% 78%, 60% 78%, 60% 100%, 40% 100%, 40% 78%, 5% 78%, 5% 70%, 30% 65%, 20% 20%);
}

/* ==========================================================================
   CLASSE : MAGE (41 SORTS)
   ========================================================================== */

/* 1. Glace Rapide (Mage - agilite) */
.vkey-mage-glace-rapide, .vkey-glace-rapide {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-glace-rapide .spell-graphic-icon, .vkey-glace-rapide .spell-graphic-icon {
  width: 18px;
  height: 50px;
  clip-path: polygon(50% 100%, 25% 60%, 15% 25%, 35% 0%, 65% 0%, 85% 25%, 75% 60%);
}

/* 2. Roc Écraseur (Mage - force) */
.vkey-mage-roc-ecraseur, .vkey-roc-ecraseur {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-roc-ecraseur .spell-graphic-icon, .vkey-roc-ecraseur .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(25% 5%, 75% 5%, 95% 35%, 85% 95%, 15% 95%, 5% 35%);
}

/* 3. Méditation Astrale (Mage - intelligence) */
.vkey-mage-meditation-astrale, .vkey-concentration-arcanique {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-mage-meditation-astrale .spell-graphic-icon, .vkey-concentration-arcanique .spell-graphic-icon {
  width: 44px;
  height: 36px;
  clip-path: polygon(50% 0%, 80% 25%, 100% 50%, 80% 75%, 50% 100%, 20% 75%, 0% 50%, 20% 25%);
}

/* 4. Jet d'Eau (Mage - chance) */
.vkey-mage-jet-eau, .vkey-jet-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-jet-eau .spell-graphic-icon, .vkey-jet-eau .spell-graphic-icon {
  width: 32px;
  height: 48px;
  clip-path: polygon(50% 0%, 75% 35%, 65% 60%, 90% 100%, 10% 100%, 35% 60%, 25% 35%);
}

/* 5. Projectile de Feu (Mage - intelligence) */
.vkey-mage-projectile-feu, .vkey-projectile-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-projectile-feu .spell-graphic-icon, .vkey-projectile-feu .spell-graphic-icon {
  width: 36px;
  height: 46px;
  clip-path: polygon(50% 0%, 85% 25%, 90% 60%, 75% 100%, 50% 80%, 25% 100%, 10% 60%, 15% 25%);
}

/* 6. Souffle Répulsif (Mage - agilite) */
.vkey-mage-souffle-repulsif, .vkey-souffle-repulsif {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-souffle-repulsif .spell-graphic-icon, .vkey-souffle-repulsif .spell-graphic-icon {
  width: 44px;
  height: 38px;
  clip-path: polygon(10% 10%, 40% 25%, 85% 0%, 100% 50%, 85% 100%, 40% 75%, 10% 90%, 25% 50%);
}

/* 7. Glace Entravante (Mage - agilite) */
.vkey-mage-glace-entravante, .vkey-glace-entravante {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-glace-entravante .spell-graphic-icon, .vkey-glace-entravante .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(50% 0%, 60% 25%, 85% 15%, 75% 40%, 100% 50%, 75% 60%, 85% 85%, 60% 75%, 50% 100%, 40% 75%, 15% 85%, 25% 60%, 0% 50%, 25% 40%, 15% 15%, 40% 25%);
}

/* 8. Gravité Accrue (Mage - force) */
.vkey-mage-gravite-accrue, .vkey-gravite-accrue {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-gravite-accrue .spell-graphic-icon, .vkey-gravite-accrue .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(50% 15%, 75% 0%, 95% 30%, 85% 70%, 100% 75%, 50% 100%, 0% 75%, 15% 70%, 5% 30%, 25% 0%);
}

/* 9. Déluge Entravant (Mage - chance) */
.vkey-mage-deluge-entravant, .vkey-deluge-entravant {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-deluge-entravant .spell-graphic-icon, .vkey-deluge-entravant .spell-graphic-icon {
  width: 38px;
  height: 46px;
  clip-path: polygon(15% 0%, 85% 0%, 95% 20%, 70% 35%, 85% 55%, 60% 75%, 70% 95%, 45% 100%, 30% 80%, 45% 60%, 20% 40%, 35% 20%);
}

/* 10. Flamme Étouffante (Mage - intelligence) */
.vkey-mage-flamme-etouffante, .vkey-flamme-etouffante {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-flamme-etouffante .spell-graphic-icon, .vkey-flamme-etouffante .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(30% 0%, 70% 0%, 85% 30%, 60% 45%, 95% 70%, 50% 100%, 5% 70%, 40% 45%, 15% 30%);
}

/* 11. Faille Temporelle (Mage - intelligence) */
.vkey-mage-faille-temporelle, .vkey-distorsion-spatiale {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-faille-temporelle .spell-graphic-icon, .vkey-distorsion-spatiale .spell-graphic-icon {
  width: 36px;
  height: 46px;
  clip-path: polygon(15% 5%, 85% 5%, 70% 35%, 85% 45%, 55% 50%, 85% 55%, 70% 65%, 85% 95%, 15% 95%, 30% 65%, 15% 55%, 45% 50%, 15% 45%, 30% 35%);
}

/* 12. Tornade Arcane (Mage - agilite) */
.vkey-mage-tornade-arcane, .vkey-tornade-arcane {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-tornade-arcane .spell-graphic-icon, .vkey-tornade-arcane .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(0% 10%, 100% 5%, 80% 30%, 95% 50%, 70% 65%, 80% 85%, 55% 100%, 40% 85%, 50% 65%, 25% 50%, 40% 30%);
}

/* 13. Tremblement de Terre (Mage - force) */
.vkey-mage-tremblement-terre, .vkey-tremblement-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-tremblement-terre .spell-graphic-icon, .vkey-tremblement-terre .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(5% 10%, 40% 15%, 30% 45%, 45% 65%, 35% 95%, 5% 95%, 55% 95%, 65% 65%, 50% 45%, 60% 15%, 95% 10%, 95% 95%);
}

/* 14. Geyser Majeur (Mage - chance) */
.vkey-mage-geyser-majeur, .vkey-geyser-majeur {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-geyser-majeur .spell-graphic-icon, .vkey-geyser-majeur .spell-graphic-icon {
  width: 38px;
  height: 48px;
  clip-path: polygon(50% 0%, 70% 15%, 60% 35%, 85% 40%, 65% 70%, 80% 95%, 20% 95%, 35% 70%, 15% 40%, 40% 35%, 30% 15%);
}

/* 15. Prison de Givre (Mage - chance) */
.vkey-mage-prison-givre, .vkey-prison-glacee {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-prison-givre .spell-graphic-icon, .vkey-prison-glacee .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(30% 5%, 70% 5%, 95% 30%, 95% 70%, 70% 95%, 30% 95%, 5% 70%, 5% 30%, 20% 35%, 20% 65%, 35% 80%, 65% 80%, 80% 65%, 80% 35%, 65% 20%, 35% 20%);
}

/* 16. Nova de Feu (Mage - intelligence) */
.vkey-mage-nova-feu, .vkey-nova-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-nova-feu .spell-graphic-icon, .vkey-nova-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0% 50%, 38% 35%);
}

/* 17. Ouragan Cosmique (Mage - agilite) */
.vkey-mage-ouragan-cosmique, .vkey-ouragan-cosmique {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-ouragan-cosmique .spell-graphic-icon, .vkey-ouragan-cosmique .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 15%, 80% 0%, 100% 35%, 75% 60%, 85% 95%, 50% 85%, 20% 100%, 0% 65%, 25% 40%, 15% 5%);
}

/* 18. Écrasement Météore (Mage - force) */
.vkey-mage-ecrasement-meteore, .vkey-ecrasement-meteore {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-ecrasement-meteore .spell-graphic-icon, .vkey-ecrasement-meteore .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 0%, 75% 15%, 90% 45%, 70% 70%, 95% 95%, 55% 85%, 50% 100%, 45% 85%, 5% 95%, 30% 70%, 10% 45%, 25% 15%);
}

/* 19. Tsunami Arcane (Mage - chance) */
.vkey-mage-tsunami-arcane, .vkey-tsunami-arcane {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-tsunami-arcane .spell-graphic-icon, .vkey-tsunami-arcane .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(0% 85%, 15% 45%, 45% 15%, 85% 5%, 100% 25%, 80% 35%, 95% 55%, 70% 65%, 85% 85%, 50% 85%);
}

/* 20. Supernova (Mage - intelligence) */
.vkey-mage-supernova, .vkey-supernova {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-supernova .spell-graphic-icon, .vkey-supernova .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 60% 28%, 85% 15%, 72% 40%, 100% 50%, 72% 60%, 85% 85%, 60% 72%, 50% 100%, 40% 72%, 15% 85%, 28% 60%, 0% 50%, 28% 40%, 15% 15%, 40% 28%);
}

/* 21. Comète Savante Air (Mage - agilite) */
.vkey-mage-comete-air, .vkey-comete-savante-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-comete-air .spell-graphic-icon, .vkey-comete-savante-air .spell-graphic-icon {
  width: 44px;
  height: 40px;
  clip-path: polygon(0% 0%, 35% 25%, 70% 15%, 100% 50%, 70% 85%, 35% 75%, 0% 100%, 15% 60%, 5% 50%, 15% 40%);
}

/* 22. Comète Savante Terre (Mage - force) */
.vkey-mage-comete-terre, .vkey-comete-savante-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-comete-terre .spell-graphic-icon, .vkey-comete-savante-terre .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(30% 5%, 80% 15%, 95% 55%, 75% 95%, 25% 85%, 5% 45%);
}

/* 23. Comète Savante Eau (Mage - chance) */
.vkey-mage-comete-eau, .vkey-comete-savante-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-comete-eau .spell-graphic-icon, .vkey-comete-savante-eau .spell-graphic-icon {
  width: 36px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 30%, 85% 65%, 65% 95%, 50% 80%, 35% 95%, 15% 65%, 20% 30%);
}

/* 24. Comète Savante Feu (Mage - intelligence) */
.vkey-mage-comete-feu, .vkey-comete-savante-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-comete-feu .spell-graphic-icon, .vkey-comete-savante-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(10% 10%, 45% 20%, 90% 0%, 100% 50%, 90% 100%, 45% 80%, 10% 90%, 25% 50%);
}

/* 25. Sceau d'Entrave Air (Mage - agilite) */
.vkey-mage-sceau-air, .vkey-sceau-entrave-air-retrait-pm {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-sceau-air .spell-graphic-icon, .vkey-sceau-entrave-air-retrait-pm .spell-graphic-icon {
  width: 44px;
  height: 36px;
  clip-path: polygon(25% 10%, 75% 10%, 95% 50%, 75% 90%, 25% 90%, 5% 50%, 30% 35%, 70% 35%, 80% 50%, 70% 65%, 30% 65%, 20% 50%);
}

/* 26. Sceau d'Entrave Terre (Mage - force) */
.vkey-mage-sceau-terre, .vkey-sceau-entrave-terre-retrait-pm {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-sceau-terre .spell-graphic-icon, .vkey-sceau-entrave-terre-retrait-pm .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(10% 15%, 90% 15%, 85% 45%, 65% 50%, 65% 85%, 80% 95%, 20% 95%, 35% 85%, 35% 50%, 15% 45%);
}

/* 27. Sceau d'Entrave Eau (Mage - chance) */
.vkey-mage-sceau-eau, .vkey-sceau-entrave-eau-retrait-pa {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-sceau-eau .spell-graphic-icon, .vkey-sceau-entrave-eau-retrait-pa .spell-graphic-icon {
  width: 40px;
  height: 44px;
  clip-path: polygon(50% 5%, 85% 20%, 95% 55%, 75% 90%, 35% 95%, 10% 70%, 15% 35%, 45% 25%, 70% 40%, 65% 65%, 45% 70%, 35% 55%);
}

/* 28. Sceau d'Entrave Feu (Mage - intelligence) */
.vkey-mage-sceau-feu, .vkey-sceau-entrave-feu-retrait-pa {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-sceau-feu .spell-graphic-icon, .vkey-sceau-entrave-feu-retrait-pa .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(45% 0%, 75% 15%, 55% 40%, 90% 50%, 60% 75%, 85% 100%, 55% 100%, 25% 85%, 45% 60%, 10% 50%, 45% 25%, 25% 0%);
}

/* 29. Prisme Runique Air (Mage - agilite) */
.vkey-mage-prisme-air, .vkey-prisme-runique-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-prisme-air .spell-graphic-icon, .vkey-prisme-runique-air .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 10%, 75% 5%, 65% 35%, 95% 50%, 65% 65%, 75% 95%, 50% 90%, 25% 95%, 35% 65%, 5% 50%, 35% 35%, 25% 5%);
}

/* 30. Prisme Runique Terre (Mage - force) */
.vkey-mage-prisme-terre, .vkey-prisme-runique-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-prisme-terre .spell-graphic-icon, .vkey-prisme-runique-terre .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(50% 0%, 95% 25%, 80% 75%, 50% 100%, 20% 75%, 5% 25%, 35% 30%, 65% 30%, 60% 70%, 40% 70%);
}

/* 31. Prisme Runique Eau (Mage - chance) */
.vkey-mage-prisme-eau, .vkey-prisme-runique-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-prisme-eau .spell-graphic-icon, .vkey-prisme-runique-eau .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(20% 10%, 80% 5%, 95% 40%, 80% 85%, 40% 95%, 10% 75%, 5% 35%, 40% 25%, 70% 45%, 55% 75%, 30% 60%);
}

/* 32. Prisme Runique Feu (Mage - intelligence) */
.vkey-mage-prisme-feu, .vkey-prisme-runique-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-prisme-feu .spell-graphic-icon, .vkey-prisme-runique-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 5%, 75% 10%, 90% 35%, 85% 70%, 60% 95%, 25% 90%, 10% 65%, 15% 30%, 40% 15%, 65% 35%, 55% 65%, 35% 55%);
}

/* 33. Rupture Astrale Air (Mage - agilite) */
.vkey-mage-rupture-air, .vkey-rupture-astrale-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-rupture-air .spell-graphic-icon, .vkey-rupture-astrale-air .spell-graphic-icon {
  width: 38px;
  height: 50px;
  clip-path: polygon(50% 0%, 75% 15%, 60% 30%, 90% 35%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 10% 35%, 40% 30%, 25% 15%);
}

/* 34. Rupture Astrale Terre (Mage - force) */
.vkey-mage-rupture-terre, .vkey-rupture-astrale-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-rupture-terre .spell-graphic-icon, .vkey-rupture-astrale-terre .spell-graphic-icon {
  width: 38px;
  height: 48px;
  clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);
}

/* 35. Rupture Astrale Eau (Mage - chance) */
.vkey-mage-rupture-eau, .vkey-rupture-astrale-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-rupture-eau .spell-graphic-icon, .vkey-rupture-astrale-eau .spell-graphic-icon {
  width: 44px;
  height: 40px;
  clip-path: polygon(50% 5%, 85% 10%, 100% 40%, 80% 65%, 90% 95%, 50% 85%, 10% 95%, 20% 65%, 0% 40%, 15% 10%);
}

/* 36. Rupture Astrale Feu (Mage - intelligence) */
.vkey-mage-rupture-feu, .vkey-rupture-astrale-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-rupture-feu .spell-graphic-icon, .vkey-rupture-astrale-feu .spell-graphic-icon {
  width: 46px;
  height: 42px;
  clip-path: polygon(50% 0%, 65% 20%, 85% 10%, 85% 35%, 100% 50%, 85% 65%, 85% 90%, 65% 80%, 50% 100%, 35% 80%, 15% 90%, 15% 65%, 0% 50%, 15% 35%, 15% 10%, 35% 20%);
}

/* 37. Cataclysme Arcane Air (Mage - agilite) */
.vkey-mage-cataclysme-air, .vkey-cataclysme-arcane-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-mage-cataclysme-air .spell-graphic-icon, .vkey-cataclysme-arcane-air .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(20% 0%, 80% 0%, 95% 25%, 70% 35%, 90% 60%, 60% 70%, 75% 95%, 45% 100%, 35% 75%, 50% 60%, 25% 45%, 40% 30%, 10% 20%);
}

/* 38. Cataclysme Arcane Terre (Mage - force) */
.vkey-mage-cataclysme-terre, .vkey-cataclysme-arcane-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-mage-cataclysme-terre .spell-graphic-icon, .vkey-cataclysme-arcane-terre .spell-graphic-icon {
  width: 46px;
  height: 44px;
  clip-path: polygon(50% 0%, 65% 30%, 85% 15%, 100% 70%, 80% 100%, 20% 100%, 0% 70%, 15% 15%, 35% 30%);
}

/* 39. Cataclysme Arcane Eau (Mage - chance) */
.vkey-mage-cataclysme-eau, .vkey-cataclysme-arcane-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-mage-cataclysme-eau .spell-graphic-icon, .vkey-cataclysme-arcane-eau .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(0% 10%, 25% 0%, 50% 10%, 75% 0%, 100% 10%, 90% 50%, 100% 100%, 75% 85%, 50% 100%, 25% 85%, 0% 100%, 10% 50%);
}

/* 40. Cataclysme Arcane Feu (Mage - intelligence) */
.vkey-mage-cataclysme-feu, .vkey-cataclysme-arcane-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-mage-cataclysme-feu .spell-graphic-icon, .vkey-cataclysme-arcane-feu .spell-graphic-icon {
  width: 46px;
  height: 48px;
  clip-path: polygon(25% 0%, 75% 0%, 95% 25%, 75% 50%, 65% 75%, 85% 100%, 15% 100%, 35% 75%, 25% 50%, 5% 25%);
}

/* 41. Coup d'Arme (Mage - force) */
.vkey-weapon-strike, .vkey-coup-arme {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-weapon-strike .spell-graphic-icon, .vkey-coup-arme .spell-graphic-icon {
  width: 22px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 20%, 70% 65%, 95% 70%, 95% 78%, 60% 78%, 60% 100%, 40% 100%, 40% 78%, 5% 78%, 5% 70%, 30% 65%, 20% 20%);
}

/* ==========================================================================
   CLASSE : ARCHER (41 SORTS)
   ========================================================================== */

/* 1. Flèche de Vent (Archer - agilite) */
.vkey-archer-fleche-vent, .vkey-fleche-vent {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-fleche-vent .spell-graphic-icon, .vkey-fleche-vent .spell-graphic-icon {
  width: 22px;
  height: 50px;
  clip-path: polygon(50% 0%, 75% 25%, 58% 25%, 58% 70%, 85% 85%, 85% 100%, 50% 90%, 15% 100%, 15% 85%, 42% 70%, 42% 25%, 25% 25%);
}

/* 2. Flèche de Pierre (Archer - force) */
.vkey-archer-fleche-pierre, .vkey-fleche-pierre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-fleche-pierre .spell-graphic-icon, .vkey-fleche-pierre .spell-graphic-icon {
  width: 32px;
  height: 48px;
  clip-path: polygon(50% 0%, 90% 35%, 65% 45%, 65% 90%, 75% 100%, 25% 100%, 35% 90%, 35% 45%, 10% 35%);
}

/* 3. Œil de Faucon (Archer - agilite) */
.vkey-archer-oeil-faucon, .vkey-oeil-de-faucon {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-oeil-faucon .spell-graphic-icon, .vkey-oeil-de-faucon .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(50% 0%, 65% 15%, 85% 15%, 100% 50%, 85% 85%, 65% 85%, 50% 100%, 35% 85%, 15% 85%, 0% 50%, 15% 15%, 35% 15%);
}

/* 4. Flèche de Glace (Archer - chance) */
.vkey-archer-fleche-glace, .vkey-fleche-glace {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-fleche-glace .spell-graphic-icon, .vkey-fleche-glace .spell-graphic-icon {
  width: 26px;
  height: 50px;
  clip-path: polygon(50% 0%, 80% 20%, 65% 30%, 85% 45%, 60% 55%, 60% 80%, 80% 95%, 50% 85%, 20% 95%, 40% 80%, 40% 55%, 15% 45%, 35% 30%, 20% 20%);
}

/* 5. Flèche de Feu (Archer - intelligence) */
.vkey-archer-fleche-feu, .vkey-fleche-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-fleche-feu .spell-graphic-icon, .vkey-fleche-feu .spell-graphic-icon {
  width: 28px;
  height: 50px;
  clip-path: polygon(50% 0%, 85% 25%, 60% 35%, 85% 55%, 58% 70%, 58% 100%, 42% 100%, 42% 70%, 15% 55%, 40% 35%, 15% 25%);
}

/* 6. Flèche Répulsive (Archer - chance) */
.vkey-archer-fleche-repulsive, .vkey-fleche-repulsive {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-fleche-repulsive .spell-graphic-icon, .vkey-fleche-repulsive .spell-graphic-icon {
  width: 34px;
  height: 48px;
  clip-path: polygon(25% 0%, 75% 0%, 90% 25%, 60% 35%, 60% 70%, 95% 85%, 60% 85%, 50% 100%, 40% 85%, 5% 85%, 40% 70%, 40% 35%, 10% 25%);
}

/* 7. Tir Entravant d'Air (Archer - agilite) */
.vkey-archer-tir-entravant-air, .vkey-tir-entravant-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-tir-entravant-air .spell-graphic-icon, .vkey-tir-entravant-air .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);
}

/* 8. Tir Entravant de Terre (Archer - force) */
.vkey-archer-tir-entravant-terre, .vkey-tir-entravant-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-tir-entravant-terre .spell-graphic-icon, .vkey-tir-entravant-terre .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(50% 5%, 65% 20%, 85% 20%, 95% 35%, 85% 50%, 65% 50%, 55% 40%, 65% 70%, 80% 75%, 75% 95%, 55% 90%, 45% 70%, 35% 90%, 15% 95%, 10% 75%, 25% 70%, 35% 40%, 15% 35%, 25% 20%);
}

/* 9. Tir Entravant d'Eau (Archer - chance) */
.vkey-archer-tir-entravant-eau, .vkey-tir-entravant-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-tir-entravant-eau .spell-graphic-icon, .vkey-tir-entravant-eau .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(50% 0%, 85% 30%, 60% 35%, 60% 65%, 90% 75%, 85% 90%, 58% 80%, 58% 100%, 42% 100%, 42% 80%, 15% 90%, 10% 75%, 40% 65%, 40% 35%, 15% 30%);
}

/* 10. Tir Entravant de Feu (Archer - intelligence) */
.vkey-archer-tir-entravant-feu, .vkey-tir-entravant-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-tir-entravant-feu .spell-graphic-icon, .vkey-tir-entravant-feu .spell-graphic-icon {
  width: 32px;
  height: 50px;
  clip-path: polygon(50% 0%, 85% 25%, 65% 35%, 90% 55%, 60% 65%, 60% 100%, 40% 100%, 40% 65%, 10% 55%, 35% 35%, 15% 25%);
}

/* 11. Roulade d'Évasion (Archer - agilite) */
.vkey-archer-repli-tactique, .vkey-repli-tactique {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-repli-tactique .spell-graphic-icon, .vkey-repli-tactique .spell-graphic-icon {
  width: 42px;
  height: 40px;
  clip-path: polygon(10% 30%, 35% 10%, 75% 20%, 95% 45%, 70% 60%, 85% 85%, 50% 95%, 25% 75%, 40% 55%, 15% 60%);
}

/* 12. Pluie de Flèches d'Air (Archer - agilite) */
.vkey-archer-pluie-air, .vkey-pluie-fleches-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-pluie-air .spell-graphic-icon, .vkey-pluie-fleches-air .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(15% 100%, 25% 75%, 20% 75%, 20% 0%, 10% 0%, 10% 75%, 5% 75%, 50% 100%, 60% 70%, 55% 70%, 55% 0%, 45% 0%, 45% 70%, 40% 70%, 85% 100%, 95% 75%, 90% 75%, 90% 0%, 80% 0%, 80% 75%, 75% 75%);
}

/* 13. Pluie de Flèches de Terre (Archer - force) */
.vkey-archer-pluie-terre, .vkey-pluie-fleches-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-pluie-terre .spell-graphic-icon, .vkey-pluie-fleches-terre .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(30% 100%, 40% 70%, 35% 70%, 35% 10%, 25% 10%, 25% 70%, 20% 70%, 70% 100%, 80% 70%, 75% 70%, 75% 10%, 65% 10%, 65% 70%, 60% 70%, 50% 85%, 60% 55%, 55% 55%, 55% 0%, 45% 0%, 45% 55%, 40% 55%);
}

/* 14. Pluie de Flèches d'Eau (Archer - chance) */
.vkey-archer-pluie-eau, .vkey-pluie-fleches-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-pluie-eau .spell-graphic-icon, .vkey-pluie-fleches-eau .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(50% 100%, 65% 65%, 58% 65%, 75% 20%, 95% 10%, 80% 40%, 60% 50%, 55% 0%, 45% 0%, 40% 50%, 20% 40%, 5% 10%, 25% 20%, 42% 65%, 35% 65%);
}

/* 15. Flèche Entravante (Archer - force) */
.vkey-archer-fleche-harpon, .vkey-fleche-harpon {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-fleche-harpon .spell-graphic-icon, .vkey-fleche-harpon .spell-graphic-icon {
  width: 32px;
  height: 50px;
  clip-path: polygon(50% 0%, 90% 25%, 65% 35%, 90% 50%, 65% 60%, 65% 100%, 35% 100%, 35% 60%, 10% 50%, 35% 35%, 10% 25%);
}

/* 16. Pluie de Flèches de Feu (Archer - intelligence) */
.vkey-archer-pluie-feu, .vkey-pluie-fleches-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-pluie-feu .spell-graphic-icon, .vkey-pluie-fleches-feu .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 100%, 65% 70%, 85% 60%, 70% 40%, 90% 20%, 60% 15%, 50% 0%, 40% 15%, 10% 20%, 30% 40%, 15% 60%, 35% 70%);
}

/* 17. Œil du Cyclone (Archer - agilite) */
.vkey-archer-oeil-cyclone, .vkey-oeil-cyclone {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-oeil-cyclone .spell-graphic-icon, .vkey-oeil-cyclone .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 70% 20%, 100% 25%, 80% 50%, 95% 80%, 65% 80%, 50% 100%, 35% 80%, 5% 80%, 20% 50%, 0% 25%, 30% 20%);
}

/* 18. Flèche Perforante (Archer - force) */
.vkey-archer-fleche-perforante, .vkey-fleche-perforante {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-fleche-perforante .spell-graphic-icon, .vkey-fleche-perforante .spell-graphic-icon {
  width: 26px;
  height: 52px;
  clip-path: polygon(50% 0%, 85% 20%, 65% 35%, 85% 50%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 15% 50%, 35% 35%, 15% 20%);
}

/* 19. Flèche de Tsunami (Archer - chance) */
.vkey-archer-fleche-tsunami, .vkey-fleche-tsunami {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-fleche-tsunami .spell-graphic-icon, .vkey-fleche-tsunami .spell-graphic-icon {
  width: 38px;
  height: 48px;
  clip-path: polygon(50% 0%, 80% 15%, 95% 45%, 65% 55%, 65% 100%, 35% 100%, 35% 55%, 5% 45%, 20% 15%);
}

/* 20. Flèche d'Apocalypse (Archer - intelligence) */
.vkey-archer-fleche-apocalypse, .vkey-fleche-apocalypse {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-fleche-apocalypse .spell-graphic-icon, .vkey-fleche-apocalypse .spell-graphic-icon {
  width: 42px;
  height: 52px;
  clip-path: polygon(50% 0%, 85% 25%, 65% 35%, 95% 55%, 65% 65%, 75% 95%, 50% 85%, 25% 95%, 35% 65%, 5% 55%, 35% 35%, 15% 25%);
}

/* 21. Salve Magistrale Air (Archer - agilite) */
.vkey-archer-salve-air, .vkey-salve-magistrale-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-salve-air .spell-graphic-icon, .vkey-salve-magistrale-air .spell-graphic-icon {
  width: 46px;
  height: 42px;
  clip-path: polygon(50% 100%, 10% 30%, 0% 15%, 20% 20%, 50% 70%, 35% 10%, 45% 0%, 50% 15%, 55% 0%, 65% 10%, 50% 70%, 80% 20%, 100% 15%, 90% 30%);
}

/* 22. Salve Magistrale Terre (Archer - force) */
.vkey-archer-salve-terre, .vkey-salve-magistrale-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-salve-terre .spell-graphic-icon, .vkey-salve-magistrale-terre .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 65% 25%, 58% 25%, 58% 100%, 42% 100%, 42% 25%, 35% 25%, 15% 15%, 30% 35%, 22% 35%, 10% 75%, 20% 75%, 25% 50%, 85% 15%, 70% 35%, 78% 35%, 90% 75%, 80% 75%, 75% 50%);
}

/* 23. Salve Magistrale Eau (Archer - chance) */
.vkey-archer-salve-eau, .vkey-salve-magistrale-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-salve-eau .spell-graphic-icon, .vkey-salve-magistrale-eau .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(50% 0%, 65% 20%, 58% 25%, 85% 20%, 95% 40%, 65% 55%, 60% 100%, 40% 100%, 35% 55%, 5% 40%, 15% 20%, 42% 25%, 35% 20%);
}

/* 24. Salve Magistrale Feu (Archer - intelligence) */
.vkey-archer-salve-feu, .vkey-salve-magistrale-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-salve-feu .spell-graphic-icon, .vkey-salve-magistrale-feu .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 0%, 65% 15%, 60% 40%, 90% 30%, 85% 60%, 60% 65%, 60% 100%, 40% 100%, 40% 65%, 15% 60%, 10% 30%, 40% 40%, 35% 15%);
}

/* 25. Tir de Harcèlement Air (Archer - agilite) */
.vkey-archer-harcelement-air, .vkey-tir-harcelement-air-retrait-pm {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-harcelement-air .spell-graphic-icon, .vkey-tir-harcelement-air-retrait-pm .spell-graphic-icon {
  width: 30px;
  height: 50px;
  clip-path: polygon(70% 0%, 90% 15%, 60% 30%, 75% 50%, 55% 65%, 55% 100%, 45% 100%, 45% 65%, 25% 50%, 40% 30%, 10% 15%, 30% 0%);
}

/* 26. Tir de Harcèlement Terre (Archer - force) */
.vkey-archer-harcelement-terre, .vkey-tir-harcelement-terre-retrait-pm {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-harcelement-terre .spell-graphic-icon, .vkey-tir-harcelement-terre-retrait-pm .spell-graphic-icon {
  width: 42px;
  height: 40px;
  clip-path: polygon(10% 20%, 30% 10%, 50% 30%, 70% 10%, 90% 20%, 85% 55%, 95% 75%, 70% 90%, 50% 75%, 30% 90%, 5% 75%, 15% 55%);
}

/* 27. Tir de Harcèlement Eau (Archer - chance) */
.vkey-archer-harcelement-eau, .vkey-tir-harcelement-eau-retrait-pa {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-harcelement-eau .spell-graphic-icon, .vkey-tir-harcelement-eau-retrait-pa .spell-graphic-icon {
  width: 32px;
  height: 48px;
  clip-path: polygon(30% 0%, 70% 0%, 85% 20%, 60% 35%, 60% 75%, 80% 95%, 20% 95%, 40% 75%, 40% 35%, 15% 20%);
}

/* 28. Tir de Harcèlement Feu (Archer - intelligence) */
.vkey-archer-harcelement-feu, .vkey-tir-harcelement-feu-retrait-pa {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-harcelement-feu .spell-graphic-icon, .vkey-tir-harcelement-feu-retrait-pa .spell-graphic-icon {
  width: 38px;
  height: 48px;
  clip-path: polygon(50% 0%, 70% 20%, 95% 25%, 75% 50%, 90% 75%, 60% 70%, 60% 100%, 40% 100%, 40% 70%, 10% 75%, 25% 50%, 5% 25%, 30% 20%);
}

/* 29. Pluie Prédatrice Air (Archer - agilite) */
.vkey-archer-predatrice-air, .vkey-pluie-predatrice-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-predatrice-air .spell-graphic-icon, .vkey-pluie-predatrice-air .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(20% 0%, 50% 25%, 80% 0%, 90% 35%, 70% 70%, 80% 100%, 50% 85%, 20% 100%, 30% 70%, 10% 35%);
}

/* 30. Pluie Prédatrice Terre (Archer - force) */
.vkey-archer-predatrice-terre, .vkey-pluie-predatrice-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-predatrice-terre .spell-graphic-icon, .vkey-pluie-predatrice-terre .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(15% 10%, 30% 0%, 40% 25%, 55% 0%, 70% 25%, 85% 5%, 95% 30%, 80% 80%, 50% 100%, 20% 80%, 5% 30%);
}

/* 31. Pluie Prédatrice Eau (Archer - chance) */
.vkey-archer-predatrice-eau, .vkey-pluie-predatrice-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-predatrice-eau .spell-graphic-icon, .vkey-pluie-predatrice-eau .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(50% 0%, 85% 25%, 95% 70%, 75% 100%, 50% 80%, 25% 100%, 5% 70%, 15% 25%);
}

/* 32. Pluie Prédatrice Feu (Archer - intelligence) */
.vkey-archer-predatrice-feu, .vkey-pluie-predatrice-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-predatrice-feu .spell-graphic-icon, .vkey-pluie-predatrice-feu .spell-graphic-icon {
  width: 46px;
  height: 42px;
  clip-path: polygon(0% 15%, 25% 20%, 50% 0%, 75% 20%, 100% 15%, 85% 60%, 65% 75%, 50% 100%, 35% 75%, 15% 60%);
}

/* 33. Percée Impériale Air (Archer - agilite) */
.vkey-archer-imperiale-air, .vkey-percee-imperiale-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-imperiale-air .spell-graphic-icon, .vkey-percee-imperiale-air .spell-graphic-icon {
  width: 46px;
  height: 48px;
  clip-path: polygon(10% 0%, 30% 5%, 50% 20%, 70% 5%, 90% 0%, 80% 25%, 95% 50%, 80% 75%, 90% 100%, 70% 95%, 50% 80%, 30% 95%, 10% 100%, 20% 75%, 5% 50%, 20% 25%);
}

/* 34. Percée Impériale Terre (Archer - force) */
.vkey-archer-imperiale-terre, .vkey-percee-imperiale-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-imperiale-terre .spell-graphic-icon, .vkey-percee-imperiale-terre .spell-graphic-icon {
  width: 46px;
  height: 44px;
  clip-path: polygon(5% 20%, 50% 10%, 95% 20%, 90% 35%, 60% 40%, 60% 90%, 75% 95%, 25% 95%, 40% 90%, 40% 40%, 10% 35%);
}

/* 35. Percée Impériale Eau (Archer - chance) */
.vkey-archer-imperiale-eau, .vkey-percee-imperiale-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-imperiale-eau .spell-graphic-icon, .vkey-percee-imperiale-eau .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 15%, 90% 35%, 65% 45%, 70% 90%, 50% 100%, 30% 90%, 35% 45%, 10% 35%, 20% 15%);
}

/* 36. Percée Impériale Feu (Archer - intelligence) */
.vkey-archer-imperiale-feu, .vkey-percee-imperiale-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-imperiale-feu .spell-graphic-icon, .vkey-percee-imperiale-feu .spell-graphic-icon {
  width: 44px;
  height: 48px;
  clip-path: polygon(50% 0%, 75% 15%, 85% 35%, 65% 50%, 90% 75%, 60% 80%, 50% 100%, 40% 80%, 10% 75%, 35% 50%, 15% 35%, 25% 15%);
}

/* 37. Orage Balistique Air (Archer - agilite) */
.vkey-archer-balistique-air, .vkey-orage-balistique-air {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #002428;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}
.vkey-archer-balistique-air .spell-graphic-icon, .vkey-orage-balistique-air .spell-graphic-icon {
  width: 36px;
  height: 52px;
  clip-path: polygon(60% 0%, 90% 25%, 55% 40%, 85% 50%, 35% 100%, 45% 65%, 15% 60%, 45% 35%, 20% 25%);
}

/* 38. Orage Balistique Terre (Archer - force) */
.vkey-archer-balistique-terre, .vkey-orage-balistique-terre {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-archer-balistique-terre .spell-graphic-icon, .vkey-orage-balistique-terre .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(30% 5%, 70% 5%, 85% 35%, 95% 70%, 70% 95%, 30% 95%, 5% 70%, 15% 35%);
}

/* 39. Orage Balistique Eau (Archer - chance) */
.vkey-archer-balistique-eau, .vkey-orage-balistique-eau {
  --border-color: #29B6F6;
  --neon-color: #0288D1;
  --bg-soft: #001D38;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}
.vkey-archer-balistique-eau .spell-graphic-icon, .vkey-orage-balistique-eau .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 0%, 85% 20%, 70% 45%, 95% 70%, 65% 85%, 50% 100%, 35% 85%, 5% 70%, 30% 45%, 15% 20%);
}

/* 40. Orage Balistique Feu (Archer - intelligence) */
.vkey-archer-balistique-feu, .vkey-orage-balistique-feu {
  --border-color: #FF7043;
  --neon-color: #FF5722;
  --bg-soft: #2D0D03;
  --wave-color: #BF360C;
  --core-bright: #FBE9E7;
  --glow-radius: 12px;
}
.vkey-archer-balistique-feu .spell-graphic-icon, .vkey-orage-balistique-feu .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 65% 20%, 95% 15%, 80% 45%, 100% 70%, 70% 80%, 75% 100%, 50% 85%, 25% 100%, 30% 80%, 0% 70%, 20% 45%, 5% 15%, 35% 20%);
}

/* 41. Coup d'Arme (Archer - force) */
.vkey-weapon-strike, .vkey-coup-arme {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-weapon-strike .spell-graphic-icon, .vkey-coup-arme .spell-graphic-icon {
  width: 22px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 20%, 70% 65%, 95% 70%, 95% 78%, 60% 78%, 60% 100%, 40% 100%, 40% 78%, 5% 78%, 5% 70%, 30% 65%, 20% 20%);
}

/* ==========================================================================
   CLASSE : NÉCROMANCIEN (41 SORTS)
   ========================================================================== */

/* 1. Souffle Spectral (Nécromancien - agilite) */
.vkey-necro-souffle-spectral, .vkey-souffle-spectral {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-souffle-spectral .spell-graphic-icon, .vkey-souffle-spectral .spell-graphic-icon {
  width: 38px;
  height: 44px;
  clip-path: polygon(25% 0%, 75% 0%, 95% 30%, 85% 65%, 65% 75%, 65% 100%, 35% 100%, 35% 75%, 15% 65%, 5% 30%);
}

/* 2. Poing du Fossoyeur (Nécromancien - force) */
.vkey-necro-poing-fossoyeur, .vkey-poing-fossoyeur {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-poing-fossoyeur .spell-graphic-icon, .vkey-poing-fossoyeur .spell-graphic-icon {
  width: 38px;
  height: 44px;
  clip-path: polygon(20% 15%, 40% 5%, 60% 5%, 80% 15%, 90% 40%, 85% 70%, 70% 80%, 70% 100%, 30% 100%, 30% 80%, 15% 70%, 10% 40%);
}

/* 3. Pacte des Âmes (Nécromancien - intelligence) */
.vkey-necro-pacte-ames, .vkey-pacte-funeste {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-pacte-ames .spell-graphic-icon, .vkey-pacte-funeste .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 100%, 35% 65%, 0% 65%, 28% 40%, 15% 0%, 50% 25%, 85% 0%, 72% 40%, 100% 65%, 65% 65%);
}

/* 4. Drain Aquatique (Nécromancien - chance) */
.vkey-necro-drain-aquatique, .vkey-drain-aquatique {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-drain-aquatique .spell-graphic-icon, .vkey-drain-aquatique .spell-graphic-icon {
  width: 34px;
  height: 48px;
  clip-path: polygon(50% 0%, 80% 35%, 90% 70%, 70% 100%, 50% 85%, 30% 100%, 10% 70%, 20% 35%);
}

/* 5. Trait d'Ombre (Nécromancien - intelligence) */
.vkey-necro-trait-ombre, .vkey-trait-ombre {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-trait-ombre .spell-graphic-icon, .vkey-trait-ombre .spell-graphic-icon {
  width: 26px;
  height: 50px;
  clip-path: polygon(50% 0%, 75% 20%, 65% 45%, 85% 70%, 60% 80%, 60% 100%, 40% 100%, 40% 80%, 15% 70%, 35% 45%, 25% 20%);
}

/* 6. Onde Funèbre (Nécromancien - intelligence) */
.vkey-necro-onde-funebre, .vkey-onde-funebre {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-onde-funebre .spell-graphic-icon, .vkey-onde-funebre .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(40% 5%, 60% 5%, 65% 25%, 85% 60%, 95% 80%, 70% 85%, 60% 100%, 40% 100%, 30% 85%, 5% 80%, 15% 60%, 35% 25%);
}

/* 7. Vent Tombal (Nécromancien - agilite) */
.vkey-necro-vent-tombal, .vkey-vent-tombal {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-vent-tombal .spell-graphic-icon, .vkey-vent-tombal .spell-graphic-icon {
  width: 38px;
  height: 46px;
  clip-path: polygon(30% 5%, 70% 5%, 85% 20%, 85% 65%, 95% 80%, 85% 100%, 15% 100%, 5% 80%, 15% 65%, 15% 20%);
}

/* 8. Emprise Osseuse (Nécromancien - force) */
.vkey-necro-emprise-osseuse, .vkey-emprise-osseuse {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-emprise-osseuse .spell-graphic-icon, .vkey-emprise-osseuse .spell-graphic-icon {
  width: 40px;
  height: 48px;
  clip-path: polygon(10% 30%, 25% 10%, 40% 25%, 55% 5%, 70% 25%, 85% 15%, 95% 40%, 80% 75%, 65% 100%, 35% 100%, 20% 75%);
}

/* 9. Drain d'Âme (Nécromancien - chance) */
.vkey-necro-drain-ame, .vkey-drain-ame {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-drain-ame .spell-graphic-icon, .vkey-drain-ame .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(35% 5%, 65% 5%, 65% 20%, 90% 45%, 85% 85%, 50% 100%, 15% 85%, 10% 45%, 35% 20%);
}

/* 10. Malédiction de Feu (Nécromancien - intelligence) */
.vkey-necro-malediction-feu, .vkey-malediction-feu {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-malediction-feu .spell-graphic-icon, .vkey-malediction-feu .spell-graphic-icon {
  width: 42px;
  height: 46px;
  clip-path: polygon(50% 0%, 70% 15%, 85% 10%, 90% 40%, 75% 65%, 85% 95%, 50% 85%, 15% 95%, 25% 65%, 10% 40%, 15% 10%, 30% 15%);
}

/* 11. Forme Spectrale (Nécromancien - intelligence) */
.vkey-necro-forme-spectrale, .vkey-passage-spectral {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-forme-spectrale .spell-graphic-icon, .vkey-passage-spectral .spell-graphic-icon {
  width: 38px;
  height: 48px;
  clip-path: polygon(40% 0%, 60% 0%, 85% 25%, 70% 50%, 90% 75%, 70% 100%, 50% 85%, 30% 100%, 10% 75%, 30% 50%, 15% 25%);
}

/* 12. Nuage Toxique (Nécromancien - agilite) */
.vkey-necro-nuage-toxique, .vkey-nuage-toxique {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-nuage-toxique .spell-graphic-icon, .vkey-nuage-toxique .spell-graphic-icon {
  width: 44px;
  height: 40px;
  clip-path: polygon(25% 20%, 50% 5%, 75% 20%, 95% 35%, 85% 75%, 65% 95%, 35% 95%, 15% 75%, 5% 35%);
}

/* 13. Éruption d'Os (Nécromancien - force) */
.vkey-necro-eruption-os, .vkey-eruption-os {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-eruption-os .spell-graphic-icon, .vkey-eruption-os .spell-graphic-icon {
  width: 44px;
  height: 46px;
  clip-path: polygon(50% 0%, 65% 35%, 85% 15%, 75% 60%, 95% 75%, 80% 100%, 20% 100%, 5% 75%, 25% 60%, 15% 15%, 35% 35%);
}

/* 14. Explosion de Cadavres (Nécromancien - chance) */
.vkey-necro-explosion-cadavres, .vkey-explosion-cadavres {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-explosion-cadavres .spell-graphic-icon, .vkey-explosion-cadavres .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 65% 30%, 95% 15%, 75% 50%, 100% 75%, 65% 75%, 50% 100%, 35% 75%, 0% 75%, 25% 50%, 5% 15%, 35% 30%);
}

/* 15. Entrave Tombale (Nécromancien - force) */
.vkey-necro-entrave-tombale, .vkey-sarcophage-osseux {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-entrave-tombale .spell-graphic-icon, .vkey-sarcophage-osseux .spell-graphic-icon {
  width: 36px;
  height: 50px;
  clip-path: polygon(30% 5%, 70% 5%, 90% 25%, 80% 85%, 65% 100%, 35% 100%, 20% 85%, 10% 25%);
}

/* 16. Nova d'Ombre (Nécromancien - intelligence) */
.vkey-necro-nova-ombre, .vkey-nova-ombre {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-nova-ombre .spell-graphic-icon, .vkey-nova-ombre .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 65% 20%, 90% 10%, 80% 35%, 100% 50%, 80% 65%, 90% 90%, 65% 80%, 50% 100%, 35% 80%, 10% 90%, 20% 65%, 0% 50%, 20% 35%, 10% 10%, 35% 20%);
}

/* 17. Apocalypse Spectrale (Nécromancien - agilite) */
.vkey-necro-apocalypse-spectrale, .vkey-apocalypse-spectrale {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-apocalypse-spectrale .spell-graphic-icon, .vkey-apocalypse-spectrale .spell-graphic-icon {
  width: 46px;
  height: 48px;
  clip-path: polygon(25% 0%, 85% 0%, 100% 20%, 65% 35%, 60% 65%, 75% 100%, 40% 100%, 35% 65%, 10% 80%, 0% 50%, 20% 30%);
}

/* 18. Golem d'Os (Nécromancien - force) */
.vkey-necro-golem-os, .vkey-golem-os {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-golem-os .spell-graphic-icon, .vkey-golem-os .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(35% 5%, 65% 5%, 75% 20%, 95% 30%, 85% 65%, 95% 100%, 65% 90%, 50% 100%, 35% 90%, 5% 100%, 15% 65%, 5% 30%, 25% 20%);
}

/* 19. Déluge de Sang (Nécromancien - chance) */
.vkey-necro-deluge-sang, .vkey-deluge-sang {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-deluge-sang .spell-graphic-icon, .vkey-deluge-sang .spell-graphic-icon {
  width: 40px;
  height: 48px;
  clip-path: polygon(10% 10%, 90% 10%, 80% 45%, 58% 60%, 58% 85%, 80% 100%, 20% 100%, 42% 85%, 42% 60%, 20% 45%);
}

/* 20. Jugement Dernier (Nécromancien - intelligence) */
.vkey-necro-jugement-dernier, .vkey-jugement-dernier {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-jugement-dernier .spell-graphic-icon, .vkey-jugement-dernier .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 85% 15%, 95% 35%, 75% 40%, 56% 30%, 56% 85%, 75% 100%, 25% 100%, 44% 85%, 44% 30%, 25% 40%, 5% 35%, 15% 15%);
}

/* 21. Morsure Profane Air (Nécromancien - agilite) */
.vkey-necro-morsure-air, .vkey-morsure-profane-air {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-morsure-air .spell-graphic-icon, .vkey-morsure-profane-air .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(10% 20%, 50% 0%, 90% 20%, 85% 50%, 70% 35%, 60% 60%, 50% 35%, 40% 60%, 30% 35%, 15% 50%);
}

/* 22. Morsure Profane Terre (Nécromancien - force) */
.vkey-necro-morsure-terre, .vkey-morsure-profane-terre {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-morsure-terre .spell-graphic-icon, .vkey-morsure-profane-terre .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(5% 30%, 40% 5%, 85% 15%, 95% 45%, 75% 65%, 85% 95%, 50% 85%, 15% 95%, 25% 65%);
}

/* 23. Morsure Profane Eau (Nécromancien - chance) */
.vkey-necro-morsure-eau, .vkey-morsure-profane-eau {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-morsure-eau .spell-graphic-icon, .vkey-morsure-profane-eau .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(30% 0%, 65% 5%, 85% 30%, 65% 55%, 80% 80%, 55% 100%, 35% 85%, 50% 60%, 35% 35%, 15% 20%);
}

/* 24. Morsure Profane Feu (Nécromancien - intelligence) */
.vkey-necro-morsure-feu, .vkey-morsure-profane-feu {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-morsure-feu .spell-graphic-icon, .vkey-morsure-profane-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(10% 0%, 30% 20%, 50% 10%, 70% 20%, 90% 0%, 95% 45%, 75% 65%, 85% 100%, 50% 85%, 15% 100%, 25% 65%, 5% 45%);
}

/* 25. Lien Funeste Air (Nécromancien - agilite) */
.vkey-necro-lien-air, .vkey-lien-funeste-air-retrait-pm {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-lien-air .spell-graphic-icon, .vkey-lien-funeste-air-retrait-pm .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(15% 15%, 50% 35%, 85% 15%, 95% 40%, 75% 60%, 90% 85%, 65% 95%, 45% 70%, 15% 95%, 5% 70%, 25% 50%, 5% 30%);
}

/* 26. Lien Funeste Terre (Nécromancien - force) */
.vkey-necro-lien-terre, .vkey-lien-funeste-terre-retrait-pm {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-lien-terre .spell-graphic-icon, .vkey-lien-funeste-terre-retrait-pm .spell-graphic-icon {
  width: 44px;
  height: 38px;
  clip-path: polygon(10% 15%, 40% 15%, 45% 35%, 55% 35%, 60% 15%, 90% 15%, 100% 50%, 90% 85%, 60% 85%, 55% 65%, 45% 65%, 40% 85%, 10% 85%, 0% 50%);
}

/* 27. Lien Funeste Eau (Nécromancien - chance) */
.vkey-necro-lien-eau, .vkey-lien-funeste-eau-retrait-pa {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-lien-eau .spell-graphic-icon, .vkey-lien-funeste-eau-retrait-pa .spell-graphic-icon {
  width: 38px;
  height: 46px;
  clip-path: polygon(40% 0%, 60% 0%, 85% 30%, 65% 50%, 85% 75%, 60% 100%, 40% 100%, 15% 75%, 35% 50%, 15% 30%);
}

/* 28. Lien Funeste Feu (Nécromancien - intelligence) */
.vkey-necro-lien-feu, .vkey-lien-funeste-feu-retrait-pa {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-lien-feu .spell-graphic-icon, .vkey-lien-funeste-feu-retrait-pa .spell-graphic-icon {
  width: 42px;
  height: 44px;
  clip-path: polygon(20% 5%, 60% 10%, 85% 30%, 70% 55%, 95% 75%, 70% 95%, 40% 90%, 15% 70%, 30% 45%, 5% 25%);
}

/* 29. Miasme Mortel Air (Nécromancien - agilite) */
.vkey-necro-miasme-air, .vkey-miasme-mortel-air {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-miasme-air .spell-graphic-icon, .vkey-miasme-mortel-air .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(30% 10%, 60% 5%, 85% 25%, 75% 55%, 95% 75%, 65% 95%, 40% 80%, 15% 95%, 5% 65%, 25% 45%, 10% 25%);
}

/* 30. Miasme Mortel Terre (Nécromancien - force) */
.vkey-necro-miasme-terre, .vkey-miasme-mortel-terre {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-miasme-terre .spell-graphic-icon, .vkey-miasme-mortel-terre .spell-graphic-icon {
  width: 44px;
  height: 40px;
  clip-path: polygon(15% 15%, 50% 5%, 85% 15%, 95% 45%, 80% 85%, 50% 95%, 20% 85%, 5% 45%);
}

/* 31. Miasme Mortel Eau (Nécromancien - chance) */
.vkey-necro-miasme-eau, .vkey-miasme-mortel-eau {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-miasme-eau .spell-graphic-icon, .vkey-miasme-mortel-eau .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(25% 15%, 75% 10%, 95% 40%, 80% 70%, 90% 95%, 50% 85%, 10% 95%, 20% 70%, 5% 40%);
}

/* 32. Miasme Mortel Feu (Nécromancien - intelligence) */
.vkey-necro-miasme-feu, .vkey-miasme-mortel-feu {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-miasme-feu .spell-graphic-icon, .vkey-miasme-mortel-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 5%, 70% 20%, 90% 15%, 80% 50%, 95% 80%, 60% 85%, 50% 100%, 40% 85%, 5% 80%, 20% 50%, 10% 15%, 30% 20%);
}

/* 33. Déferlante Funèbre Air (Nécromancien - agilite) */
.vkey-necro-deferlante-air, .vkey-deferlante-funebre-air {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-deferlante-air .spell-graphic-icon, .vkey-deferlante-funebre-air .spell-graphic-icon {
  width: 46px;
  height: 44px;
  clip-path: polygon(10% 20%, 35% 5%, 60% 20%, 85% 5%, 100% 30%, 80% 65%, 90% 95%, 55% 85%, 45% 100%, 20% 85%, 5% 50%);
}

/* 34. Déferlante Funèbre Terre (Nécromancien - force) */
.vkey-necro-deferlante-terre, .vkey-deferlante-funebre-terre {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-deferlante-terre .spell-graphic-icon, .vkey-deferlante-funebre-terre .spell-graphic-icon {
  width: 46px;
  height: 44px;
  clip-path: polygon(5% 10%, 95% 10%, 90% 45%, 100% 80%, 75% 100%, 25% 100%, 0% 80%, 10% 45%);
}

/* 35. Déferlante Funèbre Eau (Nécromancien - chance) */
.vkey-necro-deferlante-eau, .vkey-deferlante-funebre-eau {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-deferlante-eau .spell-graphic-icon, .vkey-deferlante-funebre-eau .spell-graphic-icon {
  width: 44px;
  height: 42px;
  clip-path: polygon(0% 75%, 20% 40%, 45% 20%, 80% 10%, 100% 30%, 85% 55%, 95% 80%, 60% 90%, 30% 80%);
}

/* 36. Déferlante Funèbre Feu (Nécromancien - intelligence) */
.vkey-necro-deferlante-feu, .vkey-deferlante-funebre-feu {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-deferlante-feu .spell-graphic-icon, .vkey-deferlante-funebre-feu .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(20% 10%, 50% 0%, 80% 10%, 95% 40%, 80% 70%, 90% 100%, 50% 85%, 10% 100%, 20% 70%, 5% 40%);
}

/* 37. Apocalypse Sépulcrale Air (Nécromancien - agilite) */
.vkey-necro-sepulcrale-air, .vkey-apocalypse-sepulcrale-air {
  --border-color: #69F0AE;
  --neon-color: #00E676;
  --bg-soft: #002414;
  --wave-color: #00897B;
  --core-bright: #E8F5E9;
  --glow-radius: 12px;
}
.vkey-necro-sepulcrale-air .spell-graphic-icon, .vkey-apocalypse-sepulcrale-air .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 75% 15%, 95% 35%, 75% 60%, 100% 85%, 65% 85%, 50% 100%, 35% 85%, 0% 85%, 25% 60%, 5% 35%, 25% 15%);
}

/* 38. Apocalypse Sépulcrale Terre (Nécromancien - force) */
.vkey-necro-sepulcrale-terre, .vkey-apocalypse-sepulcrale-terre {
  --border-color: #CFD8DC;
  --neon-color: #B0BEC5;
  --bg-soft: #1F2326;
  --wave-color: #455A64;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}
.vkey-necro-sepulcrale-terre .spell-graphic-icon, .vkey-apocalypse-sepulcrale-terre .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(20% 0%, 80% 0%, 95% 30%, 85% 70%, 100% 100%, 65% 90%, 50% 100%, 35% 90%, 0% 100%, 15% 70%, 5% 30%);
}

/* 39. Apocalypse Sépulcrale Eau (Nécromancien - chance) */
.vkey-necro-sepulcrale-eau, .vkey-apocalypse-sepulcrale-eau {
  --border-color: #E53935;
  --neon-color: #D50000;
  --bg-soft: #2B0002;
  --wave-color: #880E4F;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
.vkey-necro-sepulcrale-eau .spell-graphic-icon, .vkey-apocalypse-sepulcrale-eau .spell-graphic-icon {
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 25%, 95% 60%, 80% 95%, 50% 80%, 20% 95%, 5% 60%, 20% 25%);
}

/* 40. Apocalypse Sépulcrale Feu (Nécromancien - intelligence) */
.vkey-necro-sepulcrale-feu, .vkey-apocalypse-sepulcrale-feu {
  --border-color: #B388FF;
  --neon-color: #7C4DFF;
  --bg-soft: #1A0933;
  --wave-color: #4A148C;
  --core-bright: #EDE7F6;
  --glow-radius: 13px;
}
.vkey-necro-sepulcrale-feu .spell-graphic-icon, .vkey-apocalypse-sepulcrale-feu .spell-graphic-icon {
  width: 46px;
  height: 48px;
  clip-path: polygon(50% 0%, 70% 15%, 90% 10%, 85% 40%, 100% 65%, 75% 80%, 85% 100%, 50% 85%, 15% 100%, 25% 80%, 0% 65%, 15% 40%, 10% 10%, 30% 15%);
}

/* 41. Coup d'Arme (Nécromancien - force) */
.vkey-weapon-strike, .vkey-coup-arme {
  --border-color: #A1887F;
  --neon-color: #BCAAA4;
  --bg-soft: #241812;
  --wave-color: #5D4037;
  --core-bright: #EFEBE9;
  --glow-radius: 9px;
}
.vkey-weapon-strike .spell-graphic-icon, .vkey-coup-arme .spell-graphic-icon {
  width: 22px;
  height: 46px;
  clip-path: polygon(50% 0%, 80% 20%, 70% 65%, 95% 70%, 95% 78%, 60% 78%, 60% 100%, 40% 100%, 40% 78%, 5% 78%, 5% 70%, 30% 65%, 20% 20%);
}


/* ==========================================================================
   AGRANDISSEMENT POUR LES SLOTS D'APERÇU DU GRIMOIRE (large-slot)
   ========================================================================== */
.spell-slot.large-slot[class*="vkey-"] .spell-graphic-icon {
  transform: translate(-50%, -50%) scale(0.85) !important;
}

/* ==========================================
   VISUALS FOR BASIC ATTACKS / WEAPONS
   ========================================== */

/* Unarmed / Punch (vkey-punch) */
.vkey-punch {
  --border-color: #ff9f43;
  --neon-color: #ff5252;
  --bg-soft: #2d0000;
  --wave-color: #b71c1c;
  --core-bright: #ffebeb;
  --glow-radius: 12px;
}
.vkey-punch .spell-graphic-icon {
  width: 36px;
  height: 30px;
  clip-path: polygon(
    0% 40%, 20% 20%, 40% 20%, 45% 10%, 60% 10%, 65% 20%, 80% 20%, 85% 35%, 100% 40%, 95% 65%, 80% 90%, 20% 90%, 5% 65%
  );
}

/* Sword (vkey-sword) */
.vkey-sword {
  --border-color: #b0bec5;
  --neon-color: #cfd8dc;
  --bg-soft: #1c272c;
  --wave-color: #37474f;
  --core-bright: #ffffff;
  --glow-radius: 10px;
}
.vkey-sword .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(
    50% 0%, 80% 15%, 80% 75%, 100% 75%, 100% 82%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 0% 82%, 0% 75%, 20% 75%, 20% 15%
  );
}

/* Bow (vkey-bow) */
.vkey-bow {
  --border-color: #aed581;
  --neon-color: #8bc34a;
  --bg-soft: #1b2e10;
  --wave-color: #33691e;
  --core-bright: #f1f8e9;
  --glow-radius: 11px;
}
.vkey-bow .spell-graphic-icon {
  width: 36px;
  height: 44px;
  clip-path: polygon(
    15% 0%, 50% 10%, 85% 0%, 75% 20%, 90% 45%, 75% 70%, 85% 100%, 50% 90%, 15% 100%, 25% 70%, 10% 45%, 25% 20%
  );
}

/* Staff (vkey-staff) */
.vkey-staff {
  --border-color: #80deea;
  --neon-color: #00e5ff;
  --bg-soft: #002635;
  --wave-color: #006064;
  --core-bright: #e0f7fa;
  --glow-radius: 14px;
}
.vkey-staff .spell-graphic-icon {
  width: 22px;
  height: 50px;
  clip-path: polygon(
    50% 0%, 80% 15%, 50% 30%, 60% 30%, 60% 100%, 40% 100%, 40% 30%, 50% 30%, 20% 15%
  );
}

/* Hammer (vkey-hammer) */
.vkey-hammer {
  --border-color: #bcaaa4;
  --neon-color: #8d6e63;
  --bg-soft: #2d1810;
  --wave-color: #4e342e;
  --core-bright: #d7ccc8;
  --glow-radius: 10px;
}
.vkey-hammer .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(
    10% 10%, 90% 10%, 90% 40%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 10% 40%
  );
}

/* Axe (vkey-axe) */
.vkey-axe {
  --border-color: #ffcc80;
  --neon-color: #ffa726;
  --bg-soft: #3e2723;
  --wave-color: #e65100;
  --core-bright: #fff3e0;
  --glow-radius: 12px;
}
.vkey-axe .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(
    50% 0%, 80% 10%, 95% 25%, 80% 40%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 20% 40%, 5% 25%, 20% 10%
  );
}

/* Shovel (vkey-shovel) */
.vkey-shovel {
  --border-color: #ffe082;
  --neon-color: #ffb300;
  --bg-soft: #2e1a00;
  --wave-color: #ff6f00;
  --core-bright: #fff8e1;
  --glow-radius: 11px;
}
.vkey-shovel .spell-graphic-icon {
  width: 22px;
  height: 48px;
  clip-path: polygon(
    50% 0%, 90% 15%, 80% 45%, 60% 45%, 60% 90%, 80% 90%, 80% 100%, 20% 100%, 20% 90%, 40% 90%, 40% 45%, 20% 45%, 10% 15%
  );
}

/* Custom visuals for new spells */
.vkey-amplification {
  --border-color: #FFD700;
  --neon-color: #FF8C00;
  --bg-soft: #301800;
  --wave-color: #FF4500;
  --core-bright: #FFFFFF;
  --glow-radius: 16px;
}
.vkey-amplification .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

.vkey-pushback {
  --border-color: #40E0D0;
  --neon-color: #00F5FF;
  --bg-soft: #00222b;
  --wave-color: #008b8b;
  --core-bright: #E0FFFF;
  --glow-radius: 14px;
}
.vkey-pushback .spell-graphic-icon {
  width: 40px;
  height: 40px;
  clip-path: polygon(0% 20%, 40% 20%, 40% 0%, 100% 50%, 40% 100%, 40% 80%, 0% 80%);
}

.vkey-teleport {
  --border-color: #E040FB;
  --neon-color: #D500F9;
  --bg-soft: #1b002c;
  --wave-color: #8E24AA;
  --core-bright: #F5F5F5;
  --glow-radius: 15px;
}
.vkey-teleport .spell-graphic-icon {
  width: 38px;
  height: 44px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.vkey-entrave {
  --border-color: #CDDC39;
  --neon-color: #8BC34A;
  --bg-soft: #1B2E0F;
  --wave-color: #33691E;
  --core-bright: #DCEDC8;
  --glow-radius: 13px;
}
.vkey-entrave .spell-graphic-icon {
  width: 36px;
  height: 45px;
  clip-path: polygon(30% 40%, 30% 0%, 70% 0%, 70% 40%, 100% 40%, 100% 100%, 0% 100%, 0% 40%);
}

/* Pacte des Âmes (vkey-soul-pact) - Nécromancien lvl 10 */
.vkey-soul-pact {
  --border-color: #AA00FF;
  --neon-color: #2ECC71;
  --bg-soft: #120021;
  --wave-color: #1B5E20;
  --core-bright: #EDE7F6;
  --glow-radius: 18px;
}
.vkey-soul-pact .spell-graphic-icon {
  width: 44px;
  height: 44px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 35%, 72% 58%, 82% 100%, 50% 75%, 18% 100%, 28% 58%, 0% 35%, 35% 35%);
}

/* Forme Spectrale (vkey-shadow-phase) - Nécromancien lvl 50 */
.vkey-shadow-phase {
  --border-color: #7C4DFF;
  --neon-color: #00E676;
  --bg-soft: #0A0019;
  --wave-color: #311B92;
  --core-bright: #E8F5E9;
  --glow-radius: 16px;
}
.vkey-shadow-phase .spell-graphic-icon {
  width: 40px;
  height: 48px;
  clip-path: polygon(50% 0%, 75% 15%, 85% 45%, 70% 70%, 85% 100%, 50% 85%, 15% 100%, 30% 70%, 15% 45%, 25% 15%);
}

/* Entrave Tombale (vkey-bone-coffin) - Nécromancien lvl 65 */
.vkey-bone-coffin {
  --border-color: #B0BEC5;
  --neon-color: #78909C;
  --bg-soft: #12181B;
  --wave-color: #37474F;
  --core-bright: #ECEFF1;
  --glow-radius: 15px;
}
.vkey-bone-coffin .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(30% 0%, 70% 0%, 90% 25%, 80% 100%, 20% 100%, 10% 25%);
}

/* Inherited color mappings for lvl classes */
[class*="vkey-storm-"] {
  --border-color: #90CAF9;
  --neon-color: #42A5F5;
  --bg-soft: #0d2b45;
  --wave-color: #1565C0;
  --core-bright: #E3F2FD;
  --glow-radius: 13px;
}
[class*="vkey-quake-"] {
  --border-color: #ffcc80;
  --neon-color: #ffa726;
  --bg-soft: #2e1a00;
  --wave-color: #e65100;
  --core-bright: #fff3e0;
  --glow-radius: 13px;
}
[class*="vkey-deluge-"] {
  --border-color: #80deea;
  --neon-color: #26c6da;
  --bg-soft: #002d33;
  --wave-color: #006064;
  --core-bright: #e0f7fa;
  --glow-radius: 13px;
}
[class*="vkey-supernova-"] {
  --border-color: #ffab91;
  --neon-color: #ff7043;
  --bg-soft: #3e1b0f;
  --wave-color: #d84315;
  --core-bright: #fbe9e7;
  --glow-radius: 14px;
}
[class*="vkey-shadow-"] {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 13px;
}
[class*="vkey-bone-spike-"] {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 11px;
}
[class*="vkey-drain_vital-"] {
  --border-color: #4DB6AC;
  --neon-color: #00897B;
  --bg-soft: #002621;
  --wave-color: #004D40;
  --core-bright: #E0F2F1;
  --glow-radius: 12px;
}
[class*="vkey-curse-"] {
  --border-color: #D32F2F;
  --neon-color: #F44336;
  --bg-soft: #2c0b0b;
  --wave-color: #B71C1C;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
[class*="vkey-bone-lance-"] {
  --border-color: #BA68C8;
  --neon-color: #AA00FF;
  --bg-soft: #1A0033;
  --wave-color: #7B1FA2;
  --core-bright: #E8EAF6;
  --glow-radius: 15px;
}
[class*="vkey-soul-drain-"] {
  --border-color: #4FC3F7;
  --neon-color: #0288D1;
  --bg-soft: #002738;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 13px;
}
[class*="vkey-poison-cloud-"] {
  --border-color: #AED581;
  --neon-color: #689F38;
  --bg-soft: #1e2f11;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 12px;
}
[class*="vkey-bone-rain-"] {
  --border-color: #FFB74D;
  --neon-color: #F57C00;
  --bg-soft: #2f1905;
  --wave-color: #E65100;
  --core-bright: #FFF3E0;
  --glow-radius: 13px;
}
[class*="vkey-corpse-"] {
  --border-color: #D32F2F;
  --neon-color: #C2185B;
  --bg-soft: #2c0b16;
  --wave-color: #880E4F;
  --core-bright: #FCE4EC;
  --glow-radius: 14px;
}
[class*="vkey-death-aura-"] {
  --border-color: #CE93D8;
  --neon-color: #AB47BC;
  --bg-soft: #2a0835;
  --wave-color: #4A148C;
  --core-bright: #F3E5F5;
  --glow-radius: 14px;
}
[class*="vkey-apocalypse-"] {
  --border-color: #FF1744;
  --neon-color: #D50000;
  --bg-soft: #2d0000;
  --wave-color: #B71C1C;
  --core-bright: #FFEBEE;
  --glow-radius: 16px;
}
[class*="vkey-doom-"] {
  --border-color: #FF3D00;
  --neon-color: #DD2C00;
  --bg-soft: #3a0a00;
  --wave-color: #5D4037;
  --core-bright: #FFECE7;
  --glow-radius: 15px;
}

/* Tier Shapes */
[class*="-lvl100"] .spell-graphic-icon {
  width: 32px;
  height: 40px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important; /* Pentagon */
}

[class*="-lvl120"] .spell-graphic-icon {
  width: 38px;
  height: 42px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important; /* Hexagon */
}

[class*="-lvl140"] .spell-graphic-icon {
  width: 40px;
  height: 40px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%) !important; /* 8-Pointed Star */
}

[class*="-lvl160"] .spell-graphic-icon {
  width: 36px;
  height: 44px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important; /* Diamond Shield */
}

[class*="-lvl180"] .spell-graphic-icon {
  width: 38px;
  height: 42px;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%) !important; /* Octagon */
}

/* ==========================================================================
   VISUELS DE SORTS DES BOSS ET ARCHÉTYPES DE MONSTRES
   ========================================================================== */

/* Boss Grand Groin */
.vkey-boss_grand_groin,
[class*="vkey-boss_grand_groin"] {
  --border-color: #FFA000;
  --neon-color: #FF6F00;
  --bg-soft: #2E1B00;
  --wave-color: #E65100;
  --core-bright: #FFF9C4;
  --glow-radius: 16px;
}
.vkey-boss_grand_groin .spell-graphic-icon,
[class*="vkey-boss_grand_groin"] .spell-graphic-icon {
  width: 44px; height: 38px;
  clip-path: polygon(0% 20%, 30% 0%, 100% 50%, 30% 100%, 0% 80%, 35% 50%);
}

/* Boss Léviathan */
.vkey-boss_leviathan,
[class*="vkey-boss_leviathan"] {
  --border-color: #00E5FF;
  --neon-color: #0091EA;
  --bg-soft: #001738;
  --wave-color: #0D47A1;
  --core-bright: #E0F7FA;
  --glow-radius: 18px;
}
.vkey-boss_leviathan .spell-graphic-icon,
[class*="vkey-boss_leviathan"] .spell-graphic-icon {
  width: 44px; height: 44px;
  clip-path: polygon(50% 0%, 100% 30%, 80% 50%, 100% 70%, 50% 100%, 0% 70%, 20% 50%, 0% 30%);
}

/* Boss Seigneur des Flammes */
.vkey-boss_seigneur_flammes,
[class*="vkey-boss_seigneur_flammes"] {
  --border-color: #FF3D00;
  --neon-color: #FF1744;
  --bg-soft: #300600;
  --wave-color: #B71C1C;
  --core-bright: #FFF3E0;
  --glow-radius: 20px;
}
.vkey-boss_seigneur_flammes .spell-graphic-icon,
[class*="vkey-boss_seigneur_flammes"] .spell-graphic-icon {
  width: 44px; height: 46px;
  clip-path: polygon(50% 0%, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0% 50%, 25% 25%);
}

/* Boss Dragon de Givre */
.vkey-boss_dragon_givre,
[class*="vkey-boss_dragon_givre"] {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001F29;
  --wave-color: #006064;
  --core-bright: #FFFFFF;
  --glow-radius: 18px;
}
.vkey-boss_dragon_givre .spell-graphic-icon,
[class*="vkey-boss_dragon_givre"] .spell-graphic-icon {
  width: 46px; height: 46px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

/* Boss Comte Heure */
.vkey-boss_comte_heure,
[class*="vkey-boss_comte_heure"] {
  --border-color: #FFD700;
  --neon-color: #FF8F00;
  --bg-soft: #241C00;
  --wave-color: #FF6F00;
  --core-bright: #FFFDE7;
  --glow-radius: 16px;
}
.vkey-boss_comte_heure .spell-graphic-icon,
[class*="vkey-boss_comte_heure"] .spell-graphic-icon {
  width: 42px; height: 42px;
  clip-path: polygon(50% 0%, 65% 10%, 75% 2%, 80% 16%, 95% 15%, 93% 30%, 100% 50%, 93% 70%, 95% 85%, 80% 84%, 75% 98%, 65% 90%, 50% 100%, 35% 90%, 25% 98%, 20% 84%, 5% 85%, 7% 70%, 0% 50%, 7% 30%, 5% 15%, 20% 16%, 25% 2%, 35% 10%);
}

/* Boss Maître des Squelettes */
.vkey-boss_maitre_squelettes,
[class*="vkey-boss_maitre_squelettes"] {
  --border-color: #7C4DFF;
  --neon-color: #AA00FF;
  --bg-soft: #120026;
  --wave-color: #311B92;
  --core-bright: #EDE7F6;
  --glow-radius: 18px;
}
.vkey-boss_maitre_squelettes .spell-graphic-icon,
[class*="vkey-boss_maitre_squelettes"] .spell-graphic-icon {
  width: 44px; height: 44px;
  clip-path: polygon(0% 0%, 100% 15%, 85% 65%, 100% 100%, 40% 70%, 0% 100%);
}

/* Boss Arbre Ancestral */
.vkey-boss_arbre_ancestral,
[class*="vkey-boss_arbre_ancestral"] {
  --border-color: #4CAF50;
  --neon-color: #76FF03;
  --bg-soft: #081C09;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 16px;
}
.vkey-boss_arbre_ancestral .spell-graphic-icon,
[class*="vkey-boss_arbre_ancestral"] .spell-graphic-icon {
  width: 44px; height: 44px;
  clip-path: polygon(50% 0%, 70% 30%, 90% 20%, 75% 60%, 100% 75%, 65% 80%, 50% 100%, 35% 80%, 0% 75%, 25% 60%, 10% 20%, 30% 30%);
}

/* Boss Titan de Brume */
.vkey-boss_titan_brume,
[class*="vkey-boss_titan_brume"] {
  --border-color: #00E5FF;
  --neon-color: #FFD600;
  --bg-soft: #001E2E;
  --wave-color: #00838F;
  --core-bright: #FFFFFF;
  --glow-radius: 20px;
}
.vkey-boss_titan_brume .spell-graphic-icon,
[class*="vkey-boss_titan_brume"] .spell-graphic-icon {
  width: 44px; height: 44px;
  clip-path: polygon(0% 45%, 40% 10%, 45% 35%, 100% 50%, 55% 65%, 60% 90%);
}

/* Boss Golem de Cristal */
.vkey-boss_golem_cristal,
[class*="vkey-boss_golem_cristal"] {
  --border-color: #BA68C8;
  --neon-color: #E040FB;
  --bg-soft: #1E002E;
  --wave-color: #7B1FA2;
  --core-bright: #F3E5F5;
  --glow-radius: 18px;
}
.vkey-boss_golem_cristal .spell-graphic-icon,
[class*="vkey-boss_golem_cristal"] .spell-graphic-icon {
  width: 42px; height: 46px;
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}

/* Boss Père Fouettard */
.vkey-boss_pere_fouettard,
[class*="vkey-boss_pere_fouettard"] {
  --border-color: #D50000;
  --neon-color: #FFD700;
  --bg-soft: #240004;
  --wave-color: #B71C1C;
  --core-bright: #FFF9C4;
  --glow-radius: 16px;
}
.vkey-boss_pere_fouettard .spell-graphic-icon,
[class*="vkey-boss_pere_fouettard"] .spell-graphic-icon {
  width: 42px; height: 42px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* Boss Générique & Frigost */
[class*="vkey-boss_"] {
  --border-color: #FFD700;
  --neon-color: #FF9100;
  --bg-soft: #1F1500;
  --wave-color: #E65100;
  --core-bright: #FFFFFF;
  --glow-radius: 18px;
}
[class*="vkey-boss_"] .spell-graphic-icon {
  width: 42px; height: 42px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

/* Archétypes de Monstres */
.vkey-dino_bite, .vkey-bite {
  --border-color: #EF5350; --neon-color: #D32F2F; --bg-soft: #260505; --wave-color: #B71C1C; --core-bright: #FFEBEE; --glow-radius: 14px;
}
.vkey-dino_bite .spell-graphic-icon, .vkey-bite .spell-graphic-icon {
  width: 42px; height: 38px; clip-path: polygon(0% 0%, 20% 100%, 40% 0%, 60% 100%, 80% 0%, 100% 100%, 50% 50%);
}

.vkey-horn_charge, .vkey-headbutt {
  --border-color: #FFA726; --neon-color: #FB8C00; --bg-soft: #2E1B00; --wave-color: #E65100; --core-bright: #FFF3E0; --glow-radius: 14px;
}
.vkey-horn_charge .spell-graphic-icon, .vkey-headbutt .spell-graphic-icon {
  width: 40px; height: 42px; clip-path: polygon(50% 0%, 90% 40%, 80% 100%, 20% 100%, 10% 40%);
}

.vkey-feline_slash, .vkey-claw {
  --border-color: #FFB300; --neon-color: #FF8F00; --bg-soft: #261A00; --wave-color: #FF6F00; --core-bright: #FFF8E1; --glow-radius: 14px;
}
.vkey-feline_slash .spell-graphic-icon, .vkey-claw .spell-graphic-icon {
  width: 44px; height: 36px; clip-path: polygon(0% 60%, 20% 0%, 35% 60%, 50% 0%, 65% 60%, 80% 0%, 100% 60%, 50% 100%);
}

.vkey-tentacle, .vkey-water {
  --border-color: #00E5FF; --neon-color: #0288D1; --bg-soft: #001C2B; --wave-color: #01579B; --core-bright: #E0F7FA; --glow-radius: 15px;
}
.vkey-tentacle .spell-graphic-icon, .vkey-water .spell-graphic-icon {
  width: 38px; height: 44px; clip-path: polygon(40% 0%, 60% 0%, 80% 40%, 60% 70%, 70% 100%, 30% 100%, 40% 70%, 20% 40%);
}

.vkey-venom, .vkey-poison_sting {
  --border-color: #76FF03; --neon-color: #00E676; --bg-soft: #061F03; --wave-color: #1B5E20; --core-bright: #F1F8E9; --glow-radius: 15px;
}
.vkey-venom .spell-graphic-icon, .vkey-poison_sting .spell-graphic-icon {
  width: 36px; height: 46px; clip-path: polygon(50% 0%, 80% 30%, 70% 60%, 100% 80%, 50% 100%, 0% 80%, 30% 60%, 20% 30%);
}

.vkey-nature_root, .vkey-primate_smash {
  --border-color: #8D6E63; --neon-color: #6D4C41; --bg-soft: #211511; --wave-color: #3E2723; --core-bright: #EFEBE9; --glow-radius: 13px;
}
.vkey-nature_root .spell-graphic-icon, .vkey-primate_smash .spell-graphic-icon {
  width: 42px; height: 42px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.vkey-crystal_earth, .vkey-radiant {
  --border-color: #FFD700; --neon-color: #00E5FF; --bg-soft: #1B1800; --wave-color: #FFB300; --core-bright: #FFFFFF; --glow-radius: 16px;
}
.vkey-crystal_earth .spell-graphic-icon, .vkey-radiant .spell-graphic-icon {
  width: 40px; height: 44px; clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%);
}

.vkey-festive {
  --border-color: #FF1744; --neon-color: #00E676; --bg-soft: #1C0206; --wave-color: #B71C1C; --core-bright: #FFF9C4; --glow-radius: 16px;
}
.vkey-festive .spell-graphic-icon {
  width: 42px; height: 42px; clip-path: polygon(50% 0%, 65% 35%, 100% 35%, 75% 60%, 85% 100%, 50% 75%, 15% 100%, 25% 60%, 0% 35%, 35% 35%);
}

.vkey-warrior-strike {
  --border-color: #90A4AE; --neon-color: #CFD8DC; --bg-soft: #1C2327; --wave-color: #37474F; --core-bright: #ECEFF1; --glow-radius: 12px;
}
.vkey-warrior-strike .spell-graphic-icon {
  width: 36px; height: 46px; clip-path: polygon(50% 0%, 80% 20%, 65% 25%, 75% 75%, 50% 100%, 25% 75%, 35% 25%, 20% 20%);
}

.vkey-gnaw {
  --border-color: #8D6E63; --neon-color: #A1887F; --bg-soft: #231612; --wave-color: #4E342E; --core-bright: #D7CCC8; --glow-radius: 12px;
}
.vkey-gnaw .spell-graphic-icon {
  width: 38px; height: 40px; clip-path: polygon(20% 0%, 80% 0%, 100% 30%, 85% 100%, 50% 75%, 15% 100%, 0% 30%);
}

.vkey-peck {
  --border-color: #FFE082; --neon-color: #FFD54F; --bg-soft: #26200B; --wave-color: #FF8F00; --core-bright: #FFFDE7; --glow-radius: 13px;
}
.vkey-peck .spell-graphic-icon {
  width: 44px; height: 36px; clip-path: polygon(0% 50%, 40% 15%, 100% 50%, 40% 85%);
}

/* Bosses spécifiques */
.vkey-boss_minotaure_geant {
  --border-color: #FF9800; --neon-color: #FF5722; --bg-soft: #2E1500; --wave-color: #BF360C; --core-bright: #FFF3E0; --glow-radius: 18px;
}
.vkey-boss_roi_singe {
  --border-color: #8D6E63; --neon-color: #FFB300; --bg-soft: #241708; --wave-color: #5D4037; --core-bright: #FFE0B2; --glow-radius: 17px;
}
.vkey-boss_sphinx_desert {
  --border-color: #FFD700; --neon-color: #FFC107; --bg-soft: #2D2200; --wave-color: #FFA000; --core-bright: #FFFDE7; --glow-radius: 18px;
}
.vkey-boss_t_rex_affame {
  --border-color: #D32F2F; --neon-color: #FF5252; --bg-soft: #2A0505; --wave-color: #B71C1C; --core-bright: #FFCDD2; --glow-radius: 18px;
}
.vkey-boss_archange_dechu {
  --border-color: #E040FB; --neon-color: #00E5FF; --bg-soft: #19002B; --wave-color: #7C4DFF; --core-bright: #FFFFFF; --glow-radius: 20px;
}
.vkey-boss_obsidien_brulegivre {
  --border-color: #FF3D00; --neon-color: #00E5FF; --bg-soft: #210A14; --wave-color: #D50000; --core-bright: #E0F7FA; --glow-radius: 19px;
}
.vkey-boss_capitaine_frigorn {
  --border-color: #00E5FF; --neon-color: #7C4DFF; --bg-soft: #051A2E; --wave-color: #0288D1; --core-bright: #E1F5FE; --glow-radius: 18px;
}
.vkey-boss_glours_celeste {
  --border-color: #FFD700; --neon-color: #FFAB00; --bg-soft: #2A1F02; --wave-color: #FF6F00; --core-bright: #FFF9C4; --glow-radius: 19px;
}
.vkey-boss_mansot_royal {
  --border-color: #80DEEA; --neon-color: #00E5FF; --bg-soft: #002229; --wave-color: #00838F; --core-bright: #E0F7FA; --glow-radius: 18px;
}
.vkey-boss_tengu_polaire {
  --border-color: #81D4FA; --neon-color: #B388FF; --bg-soft: #0F1C2E; --wave-color: #0277BD; --core-bright: #EDE7F6; --glow-radius: 18px;
}
.vkey-boss_korriandre_fongoide {
  --border-color: #76FF03; --neon-color: #AA00FF; --bg-soft: #121D05; --wave-color: #2E7D32; --core-bright: #F1F8E9; --glow-radius: 18px;
}
.vkey-boss_colosse_glaces {
  --border-color: #B2EBF2; --neon-color: #00E5FF; --bg-soft: #082430; --wave-color: #006064; --core-bright: #FFFFFF; --glow-radius: 20px;
}

/* --- END combat/spells.css --- */

/* --- BEGIN combat/board.css --- */
/* =========================
   COMBAT POSITION BOARD
========================= */
.combatBoardSection {
  padding-top: 0;
}

.combatPositionBoard {
  --board-pattern: none;
  --board-spark: rgba(255, 247, 214, 0.34);
  --board-bloom: rgba(255, 220, 149, 0.14);
  --board-sheen-a: rgba(255, 241, 208, 0.08);
  --board-sheen-b: rgba(66, 42, 20, 0.06);
  --board-shadow: rgba(22, 12, 6, 0.18);
  --board-top: #dcb76a;
  --board-mid: #bf9147;
  --board-bottom: #8c5d24;
  --frame-border: rgba(213, 171, 96, 0.54);
  --frame-inner: rgba(120, 74, 26, 0.28);
  --frame-highlight: rgba(255, 244, 214, 0.48);
  --frame-shade: rgba(104, 55, 20, 0.16);
  --frame-drop: rgba(84, 47, 16, 0.38);
  --cell-border: rgba(132, 82, 31, 0.18);
  --cell-light-a: rgba(255, 243, 212, 0.72);
  --cell-light-b: rgba(235, 205, 150, 0.72);
  --cell-top: rgba(255, 244, 214, 0.92);
  --cell-bottom: rgba(218, 177, 112, 0.94);
  --cell-highlight: rgba(255, 252, 235, 0.78);
  --cell-highlight-hover: rgba(255, 252, 235, 0.82);
  --cell-shadow-inset: rgba(167, 118, 57, 0.24);
  --cell-shadow-inset-hover: rgba(167, 118, 57, 0.22);
  --cell-drop: rgba(139, 92, 40, 0.16);
  --cell-hover-drop: rgba(89, 49, 17, 0.18);
  --cell-diagonal-shadow: rgba(120, 72, 29, 0.06);
  --label-color: rgba(102, 67, 26, 0.72);
  --cell-pattern: none;
  --obstacle-tile-a: rgba(238, 206, 150, 0.56);
  --obstacle-tile-b: rgba(212, 170, 111, 0.56);
  --obstacle-tile-top: rgba(246, 228, 190, 0.86);
  --obstacle-tile-bottom: rgba(203, 158, 96, 0.88);
  --obstacle-tile-border: rgba(130, 84, 38, 0.20);
  --obstacle-pattern: none;
  --obstacle-shadow: rgba(45, 31, 23, 0.18);
  --obstacle-outline: rgba(182, 244, 255, 0.76);
  --obstacle-top-a: rgba(141, 229, 255, 0.98);
  --obstacle-top-b: rgba(87, 182, 210, 0.96);
  --obstacle-top-c: rgba(47, 127, 160, 0.98);
  --obstacle-top-highlight: rgba(255, 255, 255, 0.74);
  --obstacle-top-shadow: rgba(21, 83, 109, 0.34);
  --obstacle-front-a: #3da3c4;
  --obstacle-front-b: #1c6078;
  --obstacle-front-c: #16485c;
  --obstacle-front-highlight: rgba(183, 241, 255, 0.28);
  --obstacle-side-a: #2c86a6;
  --obstacle-side-b: #155366;
  --obstacle-side-c: #103d4b;
  --obstacle-glow: rgba(77, 214, 255, 0.42);
  --obstacle-top-pattern: none;
  --obstacle-face-pattern: var(--obstacle-top-pattern);
  display: grid;
  width: min(100%, calc(min(68vh, 720px) * (var(--combat-grid-width, 10) / var(--combat-grid-height, 8))));
  max-width: 100%;
  gap: 7px;
  margin-inline: auto;
  padding: 18px;
  border: 2px solid var(--frame-border);
  border-radius: 22px;
  background:
    var(--board-pattern),
    radial-gradient(circle at 18% 18%, var(--board-spark), transparent 28%),
    radial-gradient(circle at 78% 22%, var(--board-bloom), transparent 30%),
    linear-gradient(135deg, var(--board-sheen-a), var(--board-sheen-b) 62%, var(--board-shadow)),
    linear-gradient(180deg, var(--board-top) 0%, var(--board-mid) 52%, var(--board-bottom) 100%);
  min-height: 120px;
  position: relative;
  align-self: start;
  overflow: hidden;
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 var(--frame-highlight),
    inset 0 -14px 24px rgba(73, 36, 11, 0.28);
}

.combatPositionBoard::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 15px;
  border: 2px solid var(--frame-inner);
  box-shadow:
    inset 0 1px 0 var(--frame-highlight),
    inset 0 -6px 12px var(--frame-shade);
  pointer-events: none;
}

.combatPositionBoard::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 18px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(84, 47, 16, 0), var(--frame-drop));
  filter: blur(1px);
  pointer-events: none;
}

.combatBattlefield {
  min-height: 100%;
  align-content: stretch;
  grid-auto-rows: auto;
}

.combatPositionBoard[data-base-theme="default"],
.combatPositionBoard[data-base-theme="plaine"] {
  --board-pattern:
    radial-gradient(circle at 16% 30%, rgba(122, 157, 74, 0.16) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 70%, rgba(142, 171, 93, 0.14) 0 4px, transparent 5px);
  --board-spark: rgba(255, 244, 210, 0.30);
  --board-bloom: rgba(192, 224, 151, 0.16);
  --board-sheen-a: rgba(255, 241, 208, 0.12);
  --board-sheen-b: rgba(88, 97, 51, 0.10);
  --board-shadow: rgba(28, 34, 18, 0.20);
  --board-top: #d9b36c;
  --board-mid: #bf8c47;
  --board-bottom: #905c29;
  --cell-light-a: rgba(248, 236, 201, 0.78);
  --cell-light-b: rgba(221, 204, 149, 0.76);
  --cell-top: rgba(249, 240, 209, 0.96);
  --cell-bottom: rgba(204, 182, 121, 0.94);
  --label-color: rgba(92, 69, 29, 0.76);
  --cell-pattern:
    radial-gradient(circle at 72% 26%, rgba(122, 157, 74, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 28% 72%, rgba(91, 129, 55, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(222, 214, 164, 0.62);
  --obstacle-tile-b: rgba(182, 170, 115, 0.62);
  --obstacle-tile-top: rgba(224, 229, 181, 0.90);
  --obstacle-tile-bottom: rgba(154, 151, 94, 0.90);
  --obstacle-tile-border: rgba(101, 103, 56, 0.26);
  --obstacle-pattern:
    radial-gradient(circle at 72% 28%, rgba(165, 189, 112, 0.22) 0 4px, transparent 5px),
    radial-gradient(circle at 32% 68%, rgba(118, 145, 74, 0.18) 0 3px, transparent 4px);
  --obstacle-outline: rgba(214, 231, 186, 0.78);
  --obstacle-top-a: rgba(219, 231, 176, 0.98);
  --obstacle-top-b: rgba(173, 198, 126, 0.96);
  --obstacle-top-c: rgba(145, 180, 106, 0.98);
  --obstacle-top-shadow: rgba(68, 97, 39, 0.32);
  --obstacle-front-a: #9fba77;
  --obstacle-front-b: #6f8a4d;
  --obstacle-front-c: #51663a;
  --obstacle-front-highlight: rgba(239, 248, 216, 0.26);
  --obstacle-side-a: #819b5f;
  --obstacle-side-b: #5a7442;
  --obstacle-side-c: #425633;
  --obstacle-glow: rgba(189, 229, 133, 0.30);
  --obstacle-top-pattern:
    radial-gradient(circle at 64% 36%, rgba(244, 255, 220, 0.42) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(112, 148, 67, 0.12), transparent 58%);
}

.combatPositionBoard[data-base-theme="foret"] {
  --board-pattern:
    radial-gradient(circle at 20% 22%, rgba(77, 109, 57, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 62%, rgba(52, 94, 37, 0.16) 0 6px, transparent 7px),
    linear-gradient(42deg, transparent 0 46%, rgba(57, 92, 40, 0.10) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(207, 255, 197, 0.18);
  --board-bloom: rgba(118, 185, 90, 0.12);
  --board-sheen-a: rgba(255, 241, 208, 0.10);
  --board-sheen-b: rgba(58, 81, 36, 0.12);
  --board-shadow: rgba(22, 38, 18, 0.24);
  --board-top: #c7a56b;
  --board-mid: #ac7f45;
  --board-bottom: #815826;
  --cell-light-a: rgba(234, 241, 202, 0.78);
  --cell-light-b: rgba(184, 204, 129, 0.76);
  --cell-top: rgba(227, 238, 199, 0.96);
  --cell-bottom: rgba(133, 169, 94, 0.94);
  --label-color: rgba(53, 79, 34, 0.82);
  --cell-pattern:
    linear-gradient(42deg, transparent 0 44%, rgba(72, 110, 49, 0.12) 44% 56%, transparent 56% 100%),
    radial-gradient(circle at 34% 68%, rgba(52, 87, 40, 0.18) 0 3px, transparent 4px);
  --obstacle-tile-a: rgba(161, 193, 116, 0.62);
  --obstacle-tile-b: rgba(117, 148, 82, 0.62);
  --obstacle-tile-top: rgba(176, 214, 127, 0.90);
  --obstacle-tile-bottom: rgba(93, 127, 63, 0.90);
  --obstacle-tile-border: rgba(58, 87, 40, 0.28);
  --obstacle-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(56, 95, 40, 0.12) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 76% 30%, rgba(165, 204, 118, 0.18) 0 3px, transparent 4px);
  --obstacle-outline: rgba(215, 250, 192, 0.72);
  --obstacle-top-a: rgba(154, 201, 110, 0.98);
  --obstacle-top-b: rgba(105, 151, 76, 0.96);
  --obstacle-top-c: rgba(73, 113, 53, 0.98);
  --obstacle-top-shadow: rgba(31, 68, 29, 0.34);
  --obstacle-front-a: #6e9850;
  --obstacle-front-b: #456633;
  --obstacle-front-c: #2f4824;
  --obstacle-front-highlight: rgba(220, 246, 204, 0.22);
  --obstacle-side-a: #567e41;
  --obstacle-side-b: #39572b;
  --obstacle-side-c: #273e1f;
  --obstacle-glow: rgba(137, 205, 114, 0.24);
  --obstacle-top-pattern:
    linear-gradient(35deg, transparent 0 44%, rgba(226, 247, 204, 0.18) 44% 56%, transparent 56% 100%),
    radial-gradient(circle at 36% 34%, rgba(83, 133, 55, 0.16) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="jungle"] {
  --board-pattern:
    radial-gradient(circle at 18% 24%, rgba(46, 139, 87, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 80% 64%, rgba(107, 142, 35, 0.18) 0 6px, transparent 7px),
    linear-gradient(58deg, transparent 0 45%, rgba(58, 107, 74, 0.12) 45% 55%, transparent 55% 100%);
  --board-spark: rgba(141, 235, 188, 0.20);
  --board-bloom: rgba(107, 142, 35, 0.16);
  --board-sheen-a: rgba(236, 248, 214, 0.14);
  --board-sheen-b: rgba(46, 91, 64, 0.16);
  --board-shadow: rgba(13, 39, 30, 0.28);
  --board-top: #b5a168;
  --board-mid: #8b7a42;
  --board-bottom: #5d4a25;
  --cell-light-a: rgba(210, 235, 188, 0.80);
  --cell-light-b: rgba(126, 170, 86, 0.78);
  --cell-top: rgba(191, 223, 159, 0.96);
  --cell-bottom: rgba(81, 121, 56, 0.96);
  --label-color: rgba(33, 73, 46, 0.82);
  --cell-pattern:
    radial-gradient(circle at 68% 28%, rgba(53, 111, 74, 0.22) 0 3px, transparent 4px),
    linear-gradient(58deg, transparent 0 45%, rgba(40, 96, 68, 0.14) 45% 55%, transparent 55% 100%);
  --obstacle-tile-a: rgba(139, 181, 108, 0.64);
  --obstacle-tile-b: rgba(73, 118, 74, 0.64);
  --obstacle-tile-top: rgba(155, 205, 120, 0.92);
  --obstacle-tile-bottom: rgba(48, 92, 60, 0.92);
  --obstacle-tile-border: rgba(35, 74, 51, 0.28);
  --obstacle-pattern:
    radial-gradient(circle at 74% 24%, rgba(183, 221, 120, 0.20) 0 3px, transparent 4px),
    linear-gradient(58deg, transparent 0 44%, rgba(39, 95, 64, 0.14) 44% 56%, transparent 56% 100%);
  --obstacle-outline: rgba(196, 248, 207, 0.72);
  --obstacle-top-a: rgba(127, 186, 95, 0.98);
  --obstacle-top-b: rgba(79, 137, 71, 0.96);
  --obstacle-top-c: rgba(45, 92, 64, 0.98);
  --obstacle-top-shadow: rgba(21, 66, 47, 0.34);
  --obstacle-front-a: #67a168;
  --obstacle-front-b: #386d4c;
  --obstacle-front-c: #234735;
  --obstacle-side-a: #4f8b5c;
  --obstacle-side-b: #2f6344;
  --obstacle-side-c: #1e4330;
  --obstacle-glow: rgba(111, 212, 160, 0.24);
  --obstacle-top-pattern:
    radial-gradient(circle at 32% 36%, rgba(213, 247, 198, 0.24) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(59, 113, 80, 0.16), transparent 62%);
}

.combatPositionBoard[data-base-theme="montagne"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(105, 116, 130, 0.12) 0 4px, transparent 4px 16px),
    linear-gradient(22deg, transparent 0 48%, rgba(79, 90, 103, 0.10) 48% 52%, transparent 52% 100%);
  --board-spark: rgba(255, 255, 255, 0.34);
  --board-bloom: rgba(183, 195, 216, 0.18);
  --board-sheen-a: rgba(255, 255, 255, 0.12);
  --board-sheen-b: rgba(40, 50, 55, 0.10);
  --board-shadow: rgba(12, 16, 20, 0.22);
  --board-top: #d8b27b;
  --board-mid: #ba8a4d;
  --board-bottom: #8d6030;
  --cell-light-a: rgba(231, 233, 237, 0.80);
  --cell-light-b: rgba(191, 199, 209, 0.78);
  --cell-top: rgba(240, 243, 247, 0.96);
  --cell-bottom: rgba(155, 164, 178, 0.96);
  --label-color: rgba(63, 71, 83, 0.80);
  --cell-pattern:
    linear-gradient(22deg, transparent 0 47%, rgba(89, 101, 114, 0.14) 47% 53%, transparent 53% 100%),
    radial-gradient(circle at 72% 68%, rgba(140, 152, 171, 0.18) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(205, 210, 218, 0.66);
  --obstacle-tile-b: rgba(136, 145, 158, 0.66);
  --obstacle-tile-top: rgba(215, 223, 234, 0.92);
  --obstacle-tile-bottom: rgba(102, 111, 124, 0.92);
  --obstacle-tile-border: rgba(84, 93, 106, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(140deg, rgba(92, 102, 117, 0.14) 0 4px, transparent 4px 14px),
    radial-gradient(circle at 28% 74%, rgba(216, 223, 236, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(232, 238, 249, 0.74);
  --obstacle-top-a: rgba(194, 204, 219, 0.98);
  --obstacle-top-b: rgba(136, 148, 164, 0.96);
  --obstacle-top-c: rgba(88, 97, 111, 0.98);
  --obstacle-top-shadow: rgba(51, 59, 70, 0.32);
  --obstacle-front-a: #9da8b7;
  --obstacle-front-b: #687382;
  --obstacle-front-c: #495360;
  --obstacle-side-a: #7b8796;
  --obstacle-side-b: #55606c;
  --obstacle-side-c: #39424d;
  --obstacle-glow: rgba(185, 203, 229, 0.24);
  --obstacle-top-pattern:
    linear-gradient(22deg, transparent 0 46%, rgba(238, 243, 251, 0.18) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 68% 34%, rgba(108, 121, 141, 0.16) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="desert"] {
  --board-pattern:
    repeating-linear-gradient(-18deg, rgba(186, 132, 60, 0.12) 0 5px, transparent 5px 14px),
    radial-gradient(circle at 76% 26%, rgba(248, 217, 156, 0.14) 0 4px, transparent 5px);
  --board-spark: rgba(255, 245, 210, 0.18);
  --board-bloom: rgba(240, 195, 109, 0.18);
  --board-sheen-a: rgba(255, 241, 208, 0.12);
  --board-sheen-b: rgba(150, 101, 39, 0.12);
  --board-shadow: rgba(76, 45, 13, 0.22);
  --board-top: #e0bb73;
  --board-mid: #c79049;
  --board-bottom: #9b6329;
  --cell-light-a: rgba(247, 227, 184, 0.80);
  --cell-light-b: rgba(233, 194, 114, 0.78);
  --cell-top: rgba(251, 232, 188, 0.96);
  --cell-bottom: rgba(211, 163, 84, 0.96);
  --label-color: rgba(121, 75, 33, 0.82);
  --cell-pattern:
    repeating-linear-gradient(-18deg, rgba(171, 120, 53, 0.10) 0 4px, transparent 4px 11px),
    radial-gradient(circle at 28% 74%, rgba(255, 229, 180, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(236, 197, 126, 0.66);
  --obstacle-tile-b: rgba(197, 146, 78, 0.66);
  --obstacle-tile-top: rgba(247, 211, 148, 0.92);
  --obstacle-tile-bottom: rgba(174, 117, 58, 0.92);
  --obstacle-tile-border: rgba(125, 81, 39, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(-18deg, rgba(163, 108, 48, 0.12) 0 4px, transparent 4px 12px),
    radial-gradient(circle at 72% 24%, rgba(255, 236, 195, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(255, 232, 175, 0.76);
  --obstacle-top-a: rgba(245, 202, 121, 0.98);
  --obstacle-top-b: rgba(216, 163, 83, 0.96);
  --obstacle-top-c: rgba(180, 117, 52, 0.98);
  --obstacle-top-shadow: rgba(116, 72, 27, 0.32);
  --obstacle-front-a: #d6985d;
  --obstacle-front-b: #a96933;
  --obstacle-front-c: #7c461d;
  --obstacle-side-a: #bc7f45;
  --obstacle-side-b: #8b5628;
  --obstacle-side-c: #613919;
  --obstacle-glow: rgba(248, 201, 112, 0.24);
  --obstacle-top-pattern:
    repeating-linear-gradient(-18deg, rgba(255, 241, 204, 0.14) 0 4px, transparent 4px 12px),
    linear-gradient(180deg, rgba(201, 140, 58, 0.12), transparent 60%);
}

.combatPositionBoard[data-base-theme="minotor"] {
  --board-pattern:
    repeating-linear-gradient(90deg, rgba(111, 74, 43, 0.12) 0 5px, transparent 5px 16px),
    linear-gradient(0deg, transparent 0 46%, rgba(73, 48, 29, 0.14) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(198, 150, 99, 0.20);
  --board-bloom: rgba(77, 58, 45, 0.18);
  --board-sheen-a: rgba(232, 210, 185, 0.12);
  --board-sheen-b: rgba(77, 58, 45, 0.16);
  --board-shadow: rgba(28, 19, 11, 0.28);
  --board-top: #b68854;
  --board-mid: #8a5f35;
  --board-bottom: #54351d;
  --cell-light-a: rgba(226, 203, 169, 0.80);
  --cell-light-b: rgba(177, 127, 81, 0.78);
  --cell-top: rgba(226, 203, 169, 0.96);
  --cell-bottom: rgba(125, 87, 54, 0.96);
  --label-color: rgba(77, 51, 32, 0.82);
  --cell-pattern:
    linear-gradient(0deg, transparent 0 46%, rgba(96, 63, 39, 0.16) 46% 54%, transparent 54% 100%),
    repeating-linear-gradient(90deg, rgba(140, 98, 62, 0.10) 0 4px, transparent 4px 12px);
  --obstacle-tile-a: rgba(176, 129, 81, 0.66);
  --obstacle-tile-b: rgba(107, 73, 45, 0.66);
  --obstacle-tile-top: rgba(193, 145, 97, 0.92);
  --obstacle-tile-bottom: rgba(82, 53, 31, 0.92);
  --obstacle-tile-border: rgba(68, 42, 23, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(90deg, rgba(99, 66, 40, 0.14) 0 4px, transparent 4px 11px),
    linear-gradient(0deg, transparent 0 46%, rgba(68, 43, 27, 0.14) 46% 54%, transparent 54% 100%);
  --obstacle-outline: rgba(224, 183, 128, 0.68);
  --obstacle-top-a: rgba(184, 132, 79, 0.98);
  --obstacle-top-b: rgba(131, 86, 48, 0.96);
  --obstacle-top-c: rgba(81, 50, 30, 0.98);
  --obstacle-top-shadow: rgba(53, 31, 18, 0.34);
  --obstacle-front-a: #9f6a3e;
  --obstacle-front-b: #6b4327;
  --obstacle-front-c: #442917;
  --obstacle-side-a: #855632;
  --obstacle-side-b: #5b381f;
  --obstacle-side-c: #382113;
  --obstacle-glow: rgba(188, 132, 79, 0.18);
  --obstacle-top-pattern:
    linear-gradient(0deg, transparent 0 44%, rgba(235, 205, 171, 0.14) 44% 56%, transparent 56% 100%),
    repeating-linear-gradient(90deg, rgba(111, 73, 45, 0.10) 0 4px, transparent 4px 12px);
}

.combatPositionBoard[data-base-theme="neige"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(188, 214, 235, 0.12) 0 3px, transparent 3px 16px),
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 68%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px);
  --board-spark: rgba(255, 255, 255, 0.48);
  --board-bloom: rgba(216, 235, 247, 0.22);
  --board-sheen-a: rgba(255, 246, 226, 0.22);
  --board-sheen-b: rgba(122, 136, 156, 0.12);
  --board-shadow: rgba(59, 72, 89, 0.22);
  --board-top: #e4c792;
  --board-mid: #cfaa72;
  --board-bottom: #a77c47;
  --cell-light-a: rgba(248, 250, 252, 0.84);
  --cell-light-b: rgba(215, 229, 240, 0.82);
  --cell-top: rgba(252, 253, 255, 0.98);
  --cell-bottom: rgba(190, 208, 224, 0.96);
  --label-color: rgba(83, 101, 119, 0.78);
  --cell-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(207, 226, 241, 0.18) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(223, 235, 245, 0.68);
  --obstacle-tile-b: rgba(179, 198, 214, 0.68);
  --obstacle-tile-top: rgba(236, 245, 251, 0.94);
  --obstacle-tile-bottom: rgba(136, 160, 180, 0.94);
  --obstacle-tile-border: rgba(103, 123, 143, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(193, 214, 234, 0.14) 0 3px, transparent 3px 12px),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(239, 247, 255, 0.86);
  --obstacle-top-a: rgba(235, 244, 251, 0.98);
  --obstacle-top-b: rgba(191, 215, 235, 0.96);
  --obstacle-top-c: rgba(137, 176, 204, 0.98);
  --obstacle-top-shadow: rgba(72, 104, 129, 0.28);
  --obstacle-front-a: #bed6e6;
  --obstacle-front-b: #7fa8c5;
  --obstacle-front-c: #57778f;
  --obstacle-side-a: #a4c0d5;
  --obstacle-side-b: #6d92ad;
  --obstacle-side-c: #476477;
  --obstacle-glow: rgba(194, 232, 255, 0.30);
  --obstacle-top-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.22) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 62% 34%, rgba(207, 236, 255, 0.22) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="noel"] {
  --board-pattern:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 68%, rgba(46, 213, 115, 0.16) 0 5px, transparent 6px),
    linear-gradient(45deg, transparent 0 46%, rgba(255, 71, 87, 0.10) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(255, 255, 255, 0.42);
  --board-bloom: rgba(116, 185, 255, 0.20);
  --board-sheen-a: rgba(255, 250, 245, 0.22);
  --board-sheen-b: rgba(255, 71, 87, 0.10);
  --board-shadow: rgba(46, 93, 68, 0.22);
  --board-top: #dec48a;
  --board-mid: #c5965b;
  --board-bottom: #8f653b;
  --cell-light-a: rgba(251, 252, 255, 0.84);
  --cell-light-b: rgba(211, 234, 248, 0.82);
  --cell-top: rgba(252, 253, 255, 0.98);
  --cell-bottom: rgba(172, 215, 233, 0.96);
  --label-color: rgba(67, 109, 90, 0.80);
  --cell-pattern:
    radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 0 46%, rgba(255, 91, 104, 0.12) 46% 54%, transparent 54% 100%);
  --obstacle-tile-a: rgba(225, 242, 232, 0.68);
  --obstacle-tile-b: rgba(158, 209, 191, 0.68);
  --obstacle-tile-top: rgba(238, 250, 244, 0.94);
  --obstacle-tile-bottom: rgba(102, 173, 143, 0.92);
  --obstacle-tile-border: rgba(67, 139, 110, 0.28);
  --obstacle-pattern:
    radial-gradient(circle at 28% 70%, rgba(255, 255, 255, 0.20) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 0 46%, rgba(97, 191, 150, 0.14) 46% 54%, transparent 54% 100%);
  --obstacle-outline: rgba(255, 255, 255, 0.82);
  --obstacle-top-a: rgba(246, 251, 253, 0.98);
  --obstacle-top-b: rgba(188, 237, 219, 0.96);
  --obstacle-top-c: rgba(92, 182, 138, 0.98);
  --obstacle-top-shadow: rgba(45, 118, 85, 0.28);
  --obstacle-front-a: #bfe9d7;
  --obstacle-front-b: #5cab84;
  --obstacle-front-c: #2f6c54;
  --obstacle-side-a: #95d1bd;
  --obstacle-side-b: #49926f;
  --obstacle-side-c: #2b5c46;
  --obstacle-glow: rgba(208, 247, 233, 0.32);
  --obstacle-top-pattern:
    radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.26) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(115, 206, 167, 0.14), transparent 58%);
}

.combatPositionBoard[data-base-theme="lac"],
.combatPositionBoard[data-base-theme="mer"] {
  --board-pattern:
    repeating-linear-gradient(0deg, rgba(110, 201, 190, 0.10) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 24% 32%, rgba(203, 248, 244, 0.16) 0 4px, transparent 5px);
  --board-spark: rgba(255, 255, 255, 0.28);
  --board-bloom: rgba(125, 211, 216, 0.20);
  --board-sheen-a: rgba(255, 241, 208, 0.12);
  --board-sheen-b: rgba(111, 134, 128, 0.10);
  --board-shadow: rgba(35, 44, 42, 0.22);
  --board-top: #dfbb74;
  --board-mid: #c18d49;
  --board-bottom: #945f2b;
  --cell-light-a: rgba(231, 242, 230, 0.80);
  --cell-light-b: rgba(170, 214, 198, 0.78);
  --cell-top: rgba(237, 248, 239, 0.96);
  --cell-bottom: rgba(108, 177, 166, 0.94);
  --label-color: rgba(49, 98, 106, 0.80);
  --cell-pattern:
    repeating-linear-gradient(0deg, rgba(102, 182, 175, 0.10) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 74% 30%, rgba(216, 250, 245, 0.18) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(166, 214, 209, 0.66);
  --obstacle-tile-b: rgba(102, 171, 168, 0.66);
  --obstacle-tile-top: rgba(192, 234, 229, 0.92);
  --obstacle-tile-bottom: rgba(68, 135, 133, 0.92);
  --obstacle-tile-border: rgba(44, 101, 112, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(0deg, rgba(77, 155, 151, 0.12) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 32% 68%, rgba(218, 251, 248, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(220, 249, 249, 0.78);
  --obstacle-top-a: rgba(183, 234, 228, 0.98);
  --obstacle-top-b: rgba(110, 201, 190, 0.96);
  --obstacle-top-c: rgba(51, 143, 145, 0.98);
  --obstacle-top-shadow: rgba(25, 94, 102, 0.30);
  --obstacle-front-a: #88c9c3;
  --obstacle-front-b: #43979a;
  --obstacle-front-c: #29656b;
  --obstacle-side-a: #68b0af;
  --obstacle-side-b: #327f84;
  --obstacle-side-c: #20555a;
  --obstacle-glow: rgba(123, 225, 233, 0.28);
  --obstacle-top-pattern:
    repeating-linear-gradient(0deg, rgba(220, 251, 246, 0.14) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 68% 34%, rgba(137, 233, 222, 0.18) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="volcan"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(255, 94, 43, 0.16) 0 2px, transparent 2px 15px),
    radial-gradient(circle at 74% 26%, rgba(255, 167, 90, 0.18) 0 4px, transparent 5px);
  --board-spark: rgba(255, 125, 78, 0.26);
  --board-bloom: rgba(255, 51, 0, 0.14);
  --board-sheen-a: rgba(255, 233, 197, 0.08);
  --board-sheen-b: rgba(95, 43, 20, 0.16);
  --board-shadow: rgba(16, 8, 5, 0.36);
  --board-top: #9d6933;
  --board-mid: #6d431f;
  --board-bottom: #3f2410;
  --cell-light-a: rgba(88, 72, 62, 0.84);
  --cell-light-b: rgba(54, 34, 29, 0.80);
  --cell-top: rgba(110, 84, 70, 0.96);
  --cell-bottom: rgba(39, 23, 19, 0.96);
  --cell-border: rgba(108, 54, 33, 0.28);
  --label-color: rgba(255, 189, 147, 0.72);
  --cell-diagonal-shadow: rgba(255, 120, 80, 0.10);
  --cell-pattern:
    repeating-linear-gradient(135deg, rgba(201, 84, 41, 0.14) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 28% 72%, rgba(255, 176, 112, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(87, 45, 33, 0.70);
  --obstacle-tile-b: rgba(43, 20, 16, 0.70);
  --obstacle-tile-top: rgba(112, 57, 39, 0.92);
  --obstacle-tile-bottom: rgba(28, 12, 10, 0.94);
  --obstacle-tile-border: rgba(205, 88, 47, 0.24);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(173, 64, 30, 0.16) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 28%, rgba(255, 181, 105, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(255, 168, 108, 0.72);
  --obstacle-top-a: rgba(182, 78, 35, 0.98);
  --obstacle-top-b: rgba(124, 43, 22, 0.96);
  --obstacle-top-c: rgba(69, 22, 14, 0.98);
  --obstacle-top-shadow: rgba(31, 8, 6, 0.38);
  --obstacle-front-a: #9f4c2d;
  --obstacle-front-b: #622817;
  --obstacle-front-c: #33130d;
  --obstacle-side-a: #7f3a21;
  --obstacle-side-b: #4f2113;
  --obstacle-side-c: #2c110b;
  --obstacle-glow: rgba(255, 101, 41, 0.30);
  --obstacle-top-pattern:
    repeating-linear-gradient(135deg, rgba(255, 205, 151, 0.14) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(255, 111, 51, 0.18), transparent 58%);
}

.combatPositionBoard[data-base-theme="cimetiere"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(155, 89, 182, 0.14) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 24% 26%, rgba(215, 176, 245, 0.12) 0 4px, transparent 5px);
  --board-spark: rgba(155, 89, 182, 0.18);
  --board-bloom: rgba(75, 26, 75, 0.18);
  --board-sheen-a: rgba(228, 215, 241, 0.08);
  --board-sheen-b: rgba(52, 73, 94, 0.14);
  --board-shadow: rgba(20, 16, 30, 0.34);
  --board-top: #79638c;
  --board-mid: #5c476f;
  --board-bottom: #35273f;
  --cell-light-a: rgba(119, 111, 135, 0.82);
  --cell-light-b: rgba(74, 66, 92, 0.80);
  --cell-top: rgba(137, 127, 154, 0.96);
  --cell-bottom: rgba(52, 44, 66, 0.96);
  --cell-border: rgba(120, 88, 158, 0.24);
  --label-color: rgba(224, 206, 248, 0.72);
  --cell-diagonal-shadow: rgba(196, 149, 255, 0.10);
  --cell-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(164, 118, 205, 0.14) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 72% 30%, rgba(214, 175, 244, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(96, 77, 115, 0.70);
  --obstacle-tile-b: rgba(47, 33, 61, 0.70);
  --obstacle-tile-top: rgba(116, 90, 138, 0.92);
  --obstacle-tile-bottom: rgba(38, 24, 49, 0.94);
  --obstacle-tile-border: rgba(162, 106, 201, 0.26);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(143, 89, 188, 0.16) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 30% 68%, rgba(226, 190, 251, 0.12) 0 2px, transparent 3px);
  --obstacle-outline: rgba(215, 176, 245, 0.72);
  --obstacle-top-a: rgba(137, 96, 173, 0.98);
  --obstacle-top-b: rgba(93, 56, 127, 0.96);
  --obstacle-top-c: rgba(53, 27, 72, 0.98);
  --obstacle-top-shadow: rgba(24, 12, 34, 0.36);
  --obstacle-front-a: #8259a2;
  --obstacle-front-b: #503267;
  --obstacle-front-c: #2e1a3d;
  --obstacle-side-a: #684481;
  --obstacle-side-b: #402854;
  --obstacle-side-c: #24142f;
  --obstacle-glow: rgba(186, 124, 232, 0.24);
  --obstacle-top-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(228, 197, 252, 0.18) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 66% 36%, rgba(166, 106, 207, 0.14) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="celeste"] {
  --board-pattern:
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.20) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 66%, rgba(210, 240, 154, 0.16) 0 5px, transparent 6px),
    linear-gradient(60deg, transparent 0 46%, rgba(187, 220, 136, 0.10) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(255, 255, 255, 0.52);
  --board-bloom: rgba(116, 185, 255, 0.20);
  --board-sheen-a: rgba(255, 247, 229, 0.18);
  --board-sheen-b: rgba(181, 208, 221, 0.12);
  --board-shadow: rgba(83, 100, 117, 0.22);
  --board-top: #dec48a;
  --board-mid: #c79f62;
  --board-bottom: #967041;
  --cell-light-a: rgba(244, 248, 232, 0.82);
  --cell-light-b: rgba(215, 232, 179, 0.80);
  --cell-top: rgba(247, 250, 236, 0.96);
  --cell-bottom: rgba(180, 212, 144, 0.96);
  --label-color: rgba(94, 108, 69, 0.76);
  --cell-pattern:
    radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px),
    linear-gradient(60deg, transparent 0 46%, rgba(169, 207, 117, 0.12) 46% 54%, transparent 54% 100%);
  --obstacle-tile-a: rgba(198, 218, 164, 0.66);
  --obstacle-tile-b: rgba(145, 178, 116, 0.66);
  --obstacle-tile-top: rgba(210, 231, 178, 0.92);
  --obstacle-tile-bottom: rgba(105, 140, 82, 0.92);
  --obstacle-tile-border: rgba(109, 138, 85, 0.26);
  --obstacle-pattern:
    radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    linear-gradient(60deg, transparent 0 46%, rgba(170, 205, 117, 0.14) 46% 54%, transparent 54% 100%);
  --obstacle-outline: rgba(246, 255, 222, 0.82);
  --obstacle-top-a: rgba(225, 239, 184, 0.98);
  --obstacle-top-b: rgba(173, 204, 127, 0.96);
  --obstacle-top-c: rgba(126, 168, 90, 0.98);
  --obstacle-top-shadow: rgba(66, 112, 49, 0.28);
  --obstacle-front-a: #b4cf83;
  --obstacle-front-b: #7aa05a;
  --obstacle-front-c: #54703f;
  --obstacle-side-a: #97b86d;
  --obstacle-side-b: #69864d;
  --obstacle-side-c: #465c35;
  --obstacle-glow: rgba(219, 248, 158, 0.28);
  --obstacle-top-pattern:
    radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(192, 223, 142, 0.12), transparent 58%);
}

.combatPositionBoard[data-base-theme="dinosaures"] {
  --board-pattern:
    repeating-linear-gradient(30deg, rgba(56, 113, 46, 0.14) 0 3px, transparent 3px 14px),
    radial-gradient(circle at 74% 30%, rgba(132, 185, 89, 0.18) 0 5px, transparent 6px);
  --board-spark: rgba(75, 138, 92, 0.20);
  --board-bloom: rgba(46, 139, 87, 0.14);
  --board-sheen-a: rgba(219, 237, 189, 0.12);
  --board-sheen-b: rgba(30, 63, 32, 0.16);
  --board-shadow: rgba(14, 31, 17, 0.30);
  --board-top: #9b8752;
  --board-mid: #6f5f36;
  --board-bottom: #45381d;
  --cell-light-a: rgba(195, 222, 164, 0.80);
  --cell-light-b: rgba(96, 146, 75, 0.78);
  --cell-top: rgba(184, 214, 148, 0.96);
  --cell-bottom: rgba(55, 101, 50, 0.96);
  --label-color: rgba(34, 70, 29, 0.82);
  --cell-pattern:
    repeating-linear-gradient(30deg, rgba(57, 107, 50, 0.12) 0 3px, transparent 3px 11px),
    radial-gradient(circle at 30% 70%, rgba(164, 209, 111, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(102, 151, 84, 0.66);
  --obstacle-tile-b: rgba(46, 86, 41, 0.66);
  --obstacle-tile-top: rgba(121, 176, 96, 0.92);
  --obstacle-tile-bottom: rgba(30, 63, 32, 0.92);
  --obstacle-tile-border: rgba(32, 71, 31, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(30deg, rgba(48, 96, 44, 0.14) 0 3px, transparent 3px 10px),
    radial-gradient(circle at 72% 26%, rgba(179, 224, 119, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(206, 238, 167, 0.70);
  --obstacle-top-a: rgba(120, 178, 92, 0.98);
  --obstacle-top-b: rgba(69, 121, 65, 0.96);
  --obstacle-top-c: rgba(33, 77, 44, 0.98);
  --obstacle-top-shadow: rgba(15, 52, 23, 0.34);
  --obstacle-front-a: #699b5a;
  --obstacle-front-b: #396a38;
  --obstacle-front-c: #214428;
  --obstacle-side-a: #54824b;
  --obstacle-side-b: #2f5832;
  --obstacle-side-c: #1b3b22;
  --obstacle-glow: rgba(132, 205, 102, 0.22);
  --obstacle-top-pattern:
    linear-gradient(30deg, transparent 0 46%, rgba(208, 239, 151, 0.14) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 34% 36%, rgba(91, 149, 67, 0.18) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="articost_chateau"],
.combatPositionBoard[data-base-theme="chateau"],
.combatPositionBoard[data-base-theme="harebourg"],
.combatPositionBoard[data-base-theme="comte_heure"] {
  --board-pattern:
    repeating-linear-gradient(45deg, rgba(8, 145, 178, 0.14) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 60% 30%, rgba(245, 158, 11, 0.16) 0 4px, transparent 6px);
  --board-spark: rgba(34, 211, 238, 0.30);
  --board-bloom: rgba(8, 145, 178, 0.24);
  --board-sheen-a: rgba(103, 232, 249, 0.10);
  --board-sheen-b: rgba(15, 23, 42, 0.20);
  --board-shadow: rgba(3, 7, 18, 0.45);
  --board-top: #222a38;
  --board-mid: #171d28;
  --board-bottom: #090d16;
  --cell-light-a: rgba(30, 36, 48, 0.92);
  --cell-light-b: rgba(20, 24, 34, 0.92);
  --cell-top: rgba(40, 50, 68, 0.98);
  --cell-bottom: rgba(12, 16, 24, 0.98);
  --cell-border: rgba(8, 145, 178, 0.38);
  --label-color: rgba(103, 232, 249, 0.88);
  --cell-diagonal-shadow: rgba(8, 145, 178, 0.12);
  --cell-pattern:
    repeating-linear-gradient(45deg, rgba(8, 145, 178, 0.10) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 30% 70%, rgba(245, 158, 11, 0.12) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(34, 42, 56, 0.75);
  --obstacle-tile-b: rgba(15, 20, 30, 0.75);
  --obstacle-tile-top: rgba(48, 60, 80, 0.95);
  --obstacle-tile-bottom: rgba(8, 12, 18, 0.96);
  --obstacle-tile-border: rgba(8, 145, 178, 0.35);
  --obstacle-pattern:
    repeating-linear-gradient(45deg, rgba(8, 145, 178, 0.12) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 70% 30%, rgba(245, 158, 11, 0.14) 0 2px, transparent 3px);
  --obstacle-outline: rgba(103, 232, 249, 0.70);
  --obstacle-top-a: #475569;
  --obstacle-top-b: #334155;
  --obstacle-top-c: #1e293b;
  --obstacle-top-shadow: rgba(2, 6, 23, 0.45);
  --obstacle-front-a: #1e293b;
  --obstacle-front-b: #0f172a;
  --obstacle-front-c: #020617;
  --obstacle-side-a: #334155;
  --obstacle-side-b: #1e293b;
  --obstacle-side-c: #0f172a;
  --obstacle-glow: rgba(34, 211, 238, 0.35);
  --obstacle-top-pattern:
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.25) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(34, 211, 238, 0.18), transparent 60%);
}

.combatPositionBoard[data-base-theme="articost_obsidien"],
.combatPositionBoard[data-base-theme="obsidien"],
.combatPositionBoard[data-base-theme="brulegivre"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 70% 30%, rgba(249, 115, 22, 0.18) 0 4px, transparent 5px);
  --board-spark: rgba(239, 68, 68, 0.30);
  --board-bloom: rgba(220, 38, 38, 0.22);
  --board-sheen-a: rgba(254, 202, 202, 0.08);
  --board-sheen-b: rgba(69, 10, 10, 0.18);
  --board-shadow: rgba(10, 8, 7, 0.45);
  --board-top: #262220;
  --board-mid: #171412;
  --board-bottom: #0a0807;
  --cell-light-a: rgba(38, 34, 32, 0.92);
  --cell-light-b: rgba(23, 20, 18, 0.92);
  --cell-top: rgba(50, 42, 38, 0.98);
  --cell-bottom: rgba(16, 12, 10, 0.98);
  --cell-border: rgba(239, 68, 68, 0.35);
  --label-color: rgba(254, 202, 202, 0.85);
  --cell-diagonal-shadow: rgba(239, 68, 68, 0.10);
  --cell-pattern:
    repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 28% 72%, rgba(249, 115, 22, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(42, 34, 32, 0.75);
  --obstacle-tile-b: rgba(20, 16, 14, 0.75);
  --obstacle-tile-top: rgba(58, 44, 40, 0.94);
  --obstacle-tile-bottom: rgba(14, 10, 9, 0.96);
  --obstacle-tile-border: rgba(239, 68, 68, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 28%, rgba(249, 115, 22, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(248, 113, 113, 0.70);
  --obstacle-top-a: #3f3f46;
  --obstacle-top-b: #27272a;
  --obstacle-top-c: #18181b;
  --obstacle-top-shadow: rgba(10, 8, 7, 0.45);
  --obstacle-front-a: #27272a;
  --obstacle-front-b: #18181b;
  --obstacle-front-c: #09090b;
  --obstacle-side-a: #3f3f46;
  --obstacle-side-b: #27272a;
  --obstacle-side-c: #18181b;
  --obstacle-glow: rgba(239, 68, 68, 0.35);
  --obstacle-top-pattern:
    repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(249, 115, 22, 0.20), transparent 60%);
}

.combatPositionBoard[data-base-theme="articost_glours"],
.combatPositionBoard[data-base-theme="glours"],
.combatPositionBoard[data-base-theme="ruche"] {
  --board-pattern:
    repeating-linear-gradient(60deg, rgba(254, 240, 138, 0.16) 0 3px, transparent 3px 12px),
    radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.22) 0 4px, transparent 6px);
  --board-spark: rgba(254, 240, 138, 0.32);
  --board-bloom: rgba(245, 158, 11, 0.25);
  --board-sheen-a: rgba(254, 243, 199, 0.14);
  --board-sheen-b: rgba(120, 53, 15, 0.20);
  --board-shadow: rgba(40, 18, 5, 0.35);
  --board-top: #d97706;
  --board-mid: #b45309;
  --board-bottom: #78350f;
  --cell-light-a: rgba(217, 119, 6, 0.88);
  --cell-light-b: rgba(180, 83, 9, 0.88);
  --cell-top: rgba(245, 158, 11, 0.96);
  --cell-bottom: rgba(120, 53, 15, 0.98);
  --cell-border: rgba(120, 53, 15, 0.40);
  --label-color: rgba(254, 243, 199, 0.90);
  --cell-diagonal-shadow: rgba(120, 53, 15, 0.14);
  --cell-pattern:
    repeating-linear-gradient(60deg, rgba(254, 240, 138, 0.12) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 30% 70%, rgba(251, 191, 36, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(217, 119, 6, 0.70);
  --obstacle-tile-b: rgba(146, 64, 14, 0.70);
  --obstacle-tile-top: rgba(245, 158, 11, 0.92);
  --obstacle-tile-bottom: rgba(120, 53, 15, 0.94);
  --obstacle-tile-border: rgba(120, 53, 15, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(60deg, rgba(254, 240, 138, 0.14) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(251, 191, 36, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(254, 240, 138, 0.72);
  --obstacle-top-a: #fde047;
  --obstacle-top-b: #f59e0b;
  --obstacle-top-c: #d97706;
  --obstacle-top-shadow: rgba(69, 26, 3, 0.35);
  --obstacle-front-a: #f59e0b;
  --obstacle-front-b: #d97706;
  --obstacle-front-c: #b45309;
  --obstacle-side-a: #d97706;
  --obstacle-side-b: #b45309;
  --obstacle-side-c: #78350f;
  --obstacle-glow: rgba(251, 191, 36, 0.40);
  --obstacle-top-pattern:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.30) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(254, 240, 138, 0.22), transparent 58%);
}

.combatPositionBoard[data-base-theme="articost_korriandre"],
.combatPositionBoard[data-base-theme="korriandre"],
.combatPositionBoard[data-base-theme="foret_petrifiee"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 65% 25%, rgba(34, 211, 238, 0.20) 0 4px, transparent 6px);
  --board-spark: rgba(34, 211, 238, 0.30);
  --board-bloom: rgba(168, 85, 247, 0.24);
  --board-sheen-a: rgba(216, 180, 254, 0.10);
  --board-sheen-b: rgba(30, 27, 75, 0.20);
  --board-shadow: rgba(15, 10, 36, 0.45);
  --board-top: #2e1065;
  --board-mid: #1e1b4b;
  --board-bottom: #0f0a24;
  --cell-light-a: rgba(35, 21, 61, 0.90);
  --cell-light-b: rgba(23, 12, 42, 0.92);
  --cell-top: rgba(58, 25, 95, 0.96);
  --cell-bottom: rgba(15, 7, 28, 0.98);
  --cell-border: rgba(6, 182, 212, 0.35);
  --label-color: rgba(233, 213, 255, 0.88);
  --cell-diagonal-shadow: rgba(6, 182, 212, 0.12);
  --cell-pattern:
    repeating-linear-gradient(135deg, rgba(168, 85, 247, 0.10) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 30% 70%, rgba(34, 211, 238, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(45, 25, 75, 0.75);
  --obstacle-tile-b: rgba(25, 12, 45, 0.75);
  --obstacle-tile-top: rgba(65, 32, 105, 0.94);
  --obstacle-tile-bottom: rgba(18, 8, 32, 0.96);
  --obstacle-tile-border: rgba(6, 182, 212, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(34, 211, 238, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(192, 132, 252, 0.70);
  --obstacle-top-a: #c084fc;
  --obstacle-top-b: #a855f7;
  --obstacle-top-c: #7e22ce;
  --obstacle-top-shadow: rgba(15, 10, 36, 0.40);
  --obstacle-front-a: #7e22ce;
  --obstacle-front-b: #581c87;
  --obstacle-front-c: #3b0764;
  --obstacle-side-a: #581c87;
  --obstacle-side-b: #3b0764;
  --obstacle-side-c: #1e1b4b;
  --obstacle-glow: rgba(34, 211, 238, 0.35);
  --obstacle-top-pattern:
    radial-gradient(circle at 30% 40%, rgba(34, 211, 238, 0.30) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(168, 85, 247, 0.20), transparent 58%);
}

.combatPositionBoard[data-base-theme="articost_mansot"],
.combatPositionBoard[data-base-theme="mansot"],
.combatPositionBoard[data-base-theme="articost"] {
  --board-pattern:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 3px, transparent 3px 14px),
    radial-gradient(circle at 75% 30%, rgba(56, 189, 248, 0.22) 0 5px, transparent 6px);
  --board-spark: rgba(255, 255, 255, 0.40);
  --board-bloom: rgba(14, 165, 233, 0.22);
  --board-sheen-a: rgba(255, 255, 255, 0.25);
  --board-sheen-b: rgba(2, 132, 199, 0.16);
  --board-shadow: rgba(2, 44, 67, 0.30);
  --board-top: #bae6fd;
  --board-mid: #7dd3fc;
  --board-bottom: #0284c7;
  --cell-light-a: rgba(224, 242, 254, 0.90);
  --cell-light-b: rgba(186, 230, 253, 0.88);
  --cell-top: rgba(240, 249, 255, 0.98);
  --cell-bottom: rgba(125, 211, 252, 0.96);
  --cell-border: rgba(14, 165, 233, 0.35);
  --label-color: rgba(3, 105, 161, 0.88);
  --cell-diagonal-shadow: rgba(14, 165, 233, 0.12);
  --cell-pattern:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 30% 70%, rgba(56, 189, 248, 0.18) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(186, 230, 253, 0.70);
  --obstacle-tile-b: rgba(125, 211, 252, 0.70);
  --obstacle-tile-top: rgba(224, 242, 254, 0.92);
  --obstacle-tile-bottom: rgba(2, 132, 199, 0.94);
  --obstacle-tile-border: rgba(14, 165, 233, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.20) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(56, 189, 248, 0.20) 0 2px, transparent 3px);
  --obstacle-outline: rgba(255, 255, 255, 0.85);
  --obstacle-top-a: #f0f9ff;
  --obstacle-top-b: #e0f2fe;
  --obstacle-top-c: #bae6fd;
  --obstacle-top-shadow: rgba(3, 105, 161, 0.30);
  --obstacle-front-a: #7dd3fc;
  --obstacle-front-b: #38bdf8;
  --obstacle-front-c: #0284c7;
  --obstacle-side-a: #38bdf8;
  --obstacle-side-b: #0284c7;
  --obstacle-side-c: #0369a1;
  --obstacle-glow: rgba(56, 189, 248, 0.35);
  --obstacle-top-pattern:
    linear-gradient(45deg, rgba(255, 255, 255, 0.35), transparent 60%);
}

.combatPositionBoard[data-base-theme="articost_frigorn"],
.combatPositionBoard[data-base-theme="frigorn"],
.combatPositionBoard[data-base-theme="forban"] {
  --board-pattern:
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0 2px, transparent 2px 16px),
    radial-gradient(circle at 60% 25%, rgba(14, 165, 233, 0.16) 0 4px, transparent 6px);
  --board-spark: rgba(56, 189, 248, 0.25);
  --board-bloom: rgba(3, 105, 161, 0.18);
  --board-sheen-a: rgba(186, 230, 253, 0.10);
  --board-sheen-b: rgba(15, 23, 42, 0.20);
  --board-shadow: rgba(2, 6, 23, 0.40);
  --board-top: #1e293b;
  --board-mid: #0f172a;
  --board-bottom: #020617;
  --cell-light-a: rgba(36, 50, 71, 0.90);
  --cell-light-b: rgba(22, 32, 48, 0.92);
  --cell-top: rgba(48, 66, 92, 0.96);
  --cell-bottom: rgba(15, 23, 42, 0.98);
  --cell-border: rgba(3, 105, 161, 0.35);
  --label-color: rgba(186, 230, 253, 0.85);
  --cell-diagonal-shadow: rgba(3, 105, 161, 0.12);
  --cell-pattern:
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.10) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 30% 70%, rgba(14, 165, 233, 0.12) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(36, 50, 71, 0.75);
  --obstacle-tile-b: rgba(15, 23, 42, 0.75);
  --obstacle-tile-top: rgba(51, 65, 85, 0.94);
  --obstacle-tile-bottom: rgba(10, 15, 28, 0.96);
  --obstacle-tile-border: rgba(3, 105, 161, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(14, 165, 233, 0.14) 0 2px, transparent 3px);
  --obstacle-outline: rgba(147, 197, 253, 0.70);
  --obstacle-top-a: #64748b;
  --obstacle-top-b: #475569;
  --obstacle-top-c: #334155;
  --obstacle-top-shadow: rgba(2, 6, 23, 0.40);
  --obstacle-front-a: #475569;
  --obstacle-front-b: #334155;
  --obstacle-front-c: #1e293b;
  --obstacle-side-a: #334155;
  --obstacle-side-b: #1e293b;
  --obstacle-side-c: #0f172a;
  --obstacle-glow: rgba(56, 189, 248, 0.28);
  --obstacle-top-pattern:
    linear-gradient(90deg, rgba(56, 189, 248, 0.18), transparent 60%);
}

.combatPositionBoard[data-base-theme="articost_tengu"],
.combatPositionBoard[data-base-theme="tengu"],
.combatPositionBoard[data-base-theme="village_givre"] {
  --board-pattern:
    repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.14) 0 3px, transparent 3px 14px),
    radial-gradient(circle at 70% 30%, rgba(56, 189, 248, 0.18) 0 5px, transparent 6px);
  --board-spark: rgba(255, 255, 255, 0.35);
  --board-bloom: rgba(56, 189, 248, 0.16);
  --board-sheen-a: rgba(255, 255, 255, 0.20);
  --board-sheen-b: rgba(148, 163, 184, 0.16);
  --board-shadow: rgba(15, 23, 42, 0.30);
  --board-top: #f8fafc;
  --board-mid: #e2e8f0;
  --board-bottom: #cbd5e1;
  --cell-light-a: rgba(248, 250, 252, 0.92);
  --cell-light-b: rgba(226, 232, 240, 0.90);
  --cell-top: rgba(255, 255, 255, 0.98);
  --cell-bottom: rgba(203, 213, 225, 0.96);
  --cell-border: rgba(56, 189, 248, 0.32);
  --label-color: rgba(51, 65, 85, 0.88);
  --cell-diagonal-shadow: rgba(56, 189, 248, 0.10);
  --cell-pattern:
    repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.10) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 30% 70%, rgba(56, 189, 248, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(226, 232, 240, 0.70);
  --obstacle-tile-b: rgba(203, 213, 225, 0.70);
  --obstacle-tile-top: rgba(241, 245, 249, 0.92);
  --obstacle-tile-bottom: rgba(148, 163, 184, 0.94);
  --obstacle-tile-border: rgba(56, 189, 248, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.12) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(56, 189, 248, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(255, 255, 255, 0.80);
  --obstacle-top-a: #cbd5e1;
  --obstacle-top-b: #94a3b8;
  --obstacle-top-c: #64748b;
  --obstacle-top-shadow: rgba(30, 41, 59, 0.30);
  --obstacle-front-a: #94a3b8;
  --obstacle-front-b: #64748b;
  --obstacle-front-c: #475569;
  --obstacle-side-a: #64748b;
  --obstacle-side-b: #475569;
  --obstacle-side-c: #334155;
  --obstacle-glow: rgba(56, 189, 248, 0.25);
  --obstacle-top-pattern:
    linear-gradient(135deg, rgba(255, 255, 255, 0.30), transparent 60%);
}

.combatPositionBoard[data-base-theme="articost_colosse"],
.combatPositionBoard[data-base-theme="colosse"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 65% 35%, rgba(14, 165, 233, 0.18) 0 4px, transparent 6px);
  --board-spark: rgba(56, 189, 248, 0.25);
  --board-bloom: rgba(2, 132, 199, 0.18);
  --board-sheen-a: rgba(186, 230, 253, 0.10);
  --board-sheen-b: rgba(30, 41, 59, 0.16);
  --board-shadow: rgba(15, 23, 42, 0.35);
  --board-top: #475569;
  --board-mid: #334155;
  --board-bottom: #1e293b;
  --cell-light-a: rgba(59, 76, 99, 0.90);
  --cell-light-b: rgba(39, 52, 69, 0.92);
  --cell-top: rgba(71, 91, 118, 0.96);
  --cell-bottom: rgba(30, 41, 59, 0.98);
  --cell-border: rgba(2, 132, 199, 0.35);
  --label-color: rgba(186, 230, 253, 0.85);
  --cell-diagonal-shadow: rgba(2, 132, 199, 0.12);
  --cell-pattern:
    repeating-linear-gradient(135deg, rgba(56, 189, 248, 0.10) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 30% 70%, rgba(14, 165, 233, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(51, 65, 85, 0.70);
  --obstacle-tile-b: rgba(30, 41, 59, 0.70);
  --obstacle-tile-top: rgba(71, 85, 105, 0.92);
  --obstacle-tile-bottom: rgba(15, 23, 42, 0.94);
  --obstacle-tile-border: rgba(2, 132, 199, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(14, 165, 233, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(186, 230, 253, 0.70);
  --obstacle-top-a: #94a3b8;
  --obstacle-top-b: #64748b;
  --obstacle-top-c: #475569;
  --obstacle-top-shadow: rgba(15, 23, 42, 0.35);
  --obstacle-front-a: #64748b;
  --obstacle-front-b: #475569;
  --obstacle-front-c: #334155;
  --obstacle-side-a: #475569;
  --obstacle-side-b: #334155;
  --obstacle-side-c: #1e293b;
  --obstacle-glow: rgba(56, 189, 248, 0.28);
  --obstacle-top-pattern:
    linear-gradient(135deg, rgba(56, 189, 248, 0.16), transparent 60%);
}

.combatPositionBoard[data-base-theme="eveilam"] {
  --board-pattern:
    repeating-linear-gradient(45deg, rgba(244, 114, 182, 0.14) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 60% 30%, rgba(251, 207, 232, 0.25) 0 4px, transparent 6px);
  --board-spark: rgba(244, 114, 182, 0.25);
  --board-bloom: rgba(125, 206, 160, 0.22);
  --board-sheen-a: rgba(251, 207, 232, 0.14);
  --board-sheen-b: rgba(39, 174, 96, 0.16);
  --board-shadow: rgba(14, 60, 30, 0.25);
  --board-top: #a9dfbf;
  --board-mid: #7dcea0;
  --board-bottom: #52be80;
  --cell-light-a: rgba(169, 223, 191, 0.90);
  --cell-light-b: rgba(130, 214, 165, 0.90);
  --cell-top: rgba(195, 237, 212, 0.96);
  --cell-bottom: rgba(82, 190, 128, 0.96);
  --cell-border: rgba(39, 174, 96, 0.35);
  --label-color: rgba(20, 90, 50, 0.88);
  --cell-diagonal-shadow: rgba(244, 114, 182, 0.10);
  --cell-pattern:
    repeating-linear-gradient(45deg, rgba(244, 114, 182, 0.10) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 30% 70%, rgba(251, 207, 232, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(130, 214, 165, 0.65);
  --obstacle-tile-b: rgba(82, 190, 128, 0.65);
  --obstacle-tile-top: rgba(169, 223, 191, 0.92);
  --obstacle-tile-bottom: rgba(46, 139, 87, 0.94);
  --obstacle-tile-border: rgba(39, 174, 96, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(45deg, rgba(244, 114, 182, 0.12) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 26%, rgba(251, 207, 232, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(251, 207, 232, 0.75);
  --obstacle-top-a: #94a3b8;
  --obstacle-top-b: #64748b;
  --obstacle-top-c: #475569;
  --obstacle-top-shadow: rgba(20, 60, 30, 0.30);
  --obstacle-front-a: #64748b;
  --obstacle-front-b: #475569;
  --obstacle-front-c: #334155;
  --obstacle-side-a: #475569;
  --obstacle-side-b: #334155;
  --obstacle-side-c: #1e293b;
  --obstacle-glow: rgba(244, 114, 182, 0.28);
  --obstacle-top-pattern:
    radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.25) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(251, 207, 232, 0.20), transparent 60%);
}

.combatBoardCell {
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 11px;
  border: 1px solid var(--cell-border);
  background:
    var(--cell-pattern),
    linear-gradient(135deg, var(--cell-light-a) 0 50%, var(--cell-light-b) 50% 100%),
    linear-gradient(180deg, var(--cell-top), var(--cell-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  color: var(--label-color);
  font-size: 0.78rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  box-shadow:
    inset 0 1px 0 var(--cell-highlight),
    inset 0 -2px 0 var(--cell-shadow-inset),
    0 3px 0 var(--cell-drop);
}

.combatBoardCell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0 49%, transparent 49% 51%, var(--cell-diagonal-shadow) 51% 100%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.combatBoardCell:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--cell-highlight-hover),
    inset 0 -2px 0 var(--cell-shadow-inset-hover),
    0 8px 14px var(--cell-hover-drop);
}

.combatBoardCellLabel {
  color: var(--label-color);
  opacity: 0.58;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: absolute;
  left: 6px;
  top: 5px;
  z-index: 3;
}

.combatBoardCell.reachable-move {
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(233, 255, 217, 0.86) 0 50%, rgba(188, 224, 141, 0.86) 50% 100%),
    linear-gradient(180deg, rgba(220, 250, 194, 0.94), rgba(161, 207, 106, 0.92));
  border-color: rgba(119, 165, 61, 0.42);
}

.combatBoardCell.move-preview {
  background:
    linear-gradient(135deg, rgba(255, 241, 187, 0.92) 0 50%, rgba(241, 193, 92, 0.92) 50% 100%),
    linear-gradient(180deg, rgba(255, 231, 153, 0.96), rgba(236, 170, 61, 0.94));
  border-color: rgba(214, 149, 33, 0.54);
}

.combatBoardCell.start-player {
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, 0.22);
}

.combatBoardCell.start-monster {
  box-shadow: inset 0 0 0 1px rgba(255, 129, 129, 0.18);
}

.combatBoardCell.in-range {
  background:
    linear-gradient(135deg, rgba(217, 244, 255, 0.88) 0 50%, rgba(139, 212, 241, 0.88) 50% 100%),
    linear-gradient(180deg, rgba(195, 236, 255, 0.96), rgba(110, 194, 227, 0.94));
  border-color: rgba(61, 153, 190, 0.42);
}

.combatBoardCell.is-obstacle {
  background:
    var(--obstacle-pattern),
    linear-gradient(135deg, var(--obstacle-tile-a) 0 50%, var(--obstacle-tile-b) 50% 100%),
    linear-gradient(180deg, var(--obstacle-tile-top), var(--obstacle-tile-bottom));
  border-color: var(--obstacle-tile-border);
}

.combatObstacleRelief {
  position: relative;
  width: 82%;
  height: 66%;
  z-index: 2;
  transform: translateY(3px);
  filter: drop-shadow(0 9px 9px var(--obstacle-shadow));
}

.combatObstacleTop,
.combatObstacleFace,
.combatObstacleGlow {
  position: absolute;
  display: block;
  pointer-events: none;
}

.combatObstacleTop {
  left: 8%;
  right: 17%;
  top: 10%;
  height: 34%;
  border-radius: 7px;
  background:
    var(--obstacle-top-pattern),
    linear-gradient(135deg, var(--obstacle-top-a), var(--obstacle-top-b) 54%, var(--obstacle-top-c));
  border: 1px solid var(--obstacle-outline);
  box-shadow:
    inset 0 1px 0 var(--obstacle-top-highlight),
    inset 0 -3px 5px var(--obstacle-top-shadow);
  transform: skewX(-18deg);
}

.combatObstacleFace--front {
  left: 11%;
  right: 19%;
  top: 36%;
  bottom: 14%;
  border-radius: 0 0 7px 7px;
  background:
    var(--obstacle-face-pattern),
    linear-gradient(180deg, var(--obstacle-front-a), var(--obstacle-front-b) 54%, var(--obstacle-front-c));
  box-shadow: inset 0 1px 0 var(--obstacle-front-highlight);
  transform: skewX(-18deg);
}

.combatObstacleFace--side {
  top: 13%;
  right: 6%;
  width: 18%;
  bottom: 15%;
  border-radius: 0 7px 7px 0;
  background: linear-gradient(180deg, var(--obstacle-side-a), var(--obstacle-side-b) 58%, var(--obstacle-side-c));
  transform: skewY(-22deg);
  transform-origin: top;
}

.combatObstacleGlow {
  inset: auto 18% 4px 14%;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--obstacle-glow), rgba(77, 214, 255, 0));
  filter: blur(2px);
}

.combatObstacleRelief[data-variant="1"] {
  transform: scale(0.94) translateY(4px);
}

.combatObstacleRelief[data-variant="2"] {
  transform: scale(1.02) translateY(2px);
}

.combatBoardCell.aoe-preview {
  background: rgba(230, 126, 34, 0.25) !important;
  border-color: rgba(230, 126, 34, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(230, 126, 34, 0.5), 0 0 8px rgba(230, 126, 34, 0.3) !important;
}

.combatBoardCell.has-player {
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, 0.4);
}

.combatBoardCell.has-monster {
  box-shadow: inset 0 0 0 1px rgba(255, 129, 129, 0.28);
}

.combatBoardCell.has-player,
.combatBoardCell.has-monster {
  cursor: help;
}

.combatBoardBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: bold;
  font-size: 0.78rem;
}

.combatBoardBadge.player {
  background: rgba(255, 226, 170, 0.18);
  color: #ffe2aa;
}

.combatBoardBadge.monster {
  background: rgba(255, 129, 129, 0.16);
  color: #ffb3b3;
}

.combatBoardBadge--token {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.combatBoardBadge--token.player {
  background: radial-gradient(circle at 30% 30%, #f7e1b6, #7f5cd6 54%, #2c173f 100%);
}

.combatBoardBadge--token.ally {
  background: radial-gradient(circle at 30% 30%, #d9f7d6, #3c8a6d 54%, #17312b 100%);
}

.combatBoardBadge--token.monster {
  background: radial-gradient(circle at 30% 30%, #ffd8d8, #8f5b3f 54%, #311713 100%);
}

.combatBoardName {
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combatMonsterList {
  display: grid;
  gap: 10px;
  padding: 10px;
  max-height: 300px;
  overflow: auto;
}

.combatMonsterCard {
  width: 100%;
  padding: 12px;
  display: grid;
  gap: 8px;
  text-align: left;
  color: var(--ui-text);
  cursor: pointer;
}

.combatMonsterCard[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.combatMonsterHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.combatMonsterHeader strong {
  color: #ffe2aa;
}

.combatMonsterDead {
  color: #ff9b9b;
  font-weight: bold;
}

.combatMonsterCard--inRange {
  border-color: rgba(94, 200, 255, 0.45);
}

.combatMonsterCard--outOfRange {
  opacity: 0.78;
}

.combatMonsterCard--effectActive {
  position: relative;
  overflow: hidden;
}

.combatMonsterCard--effectActive::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 58%);
  animation: spellTargetPulse 0.9s ease-out forwards;
  pointer-events: none;
}

.combatHpTrack {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 10, 9, 0.9);
}

.combatHpTrack span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #79df72, #d7f173);
}

.combatInitiativeSection {
  padding-top: 0;
}

.combatInitiativeList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.combatLog {
  padding: 12px;
  min-height: 150px;
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.combatLogEntry {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e9dcc0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.combatLogEntry.combatLogEntry--critical {
  background: rgba(255, 23, 68, 0.16) !important;
  border-left: 3px solid #ff1744 !important;
  color: #ff5252 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.6) !important;
}

.combatSpellImpact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}

.combatSpellImpact.combatSpellImpact--critical {
  background: rgba(255, 23, 68, 0.22) !important;
  border: 1px solid rgba(255, 23, 68, 0.7) !important;
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.5) !important;
}

.combatSpellImpactLabel--critical {
  color: #ff1744 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.8) !important;
}

/* Combat cell actors styling */
.combatActorSpriteContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

/* Override and scale player sprite */
.combatActorSpriteContainer .charSprite {
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translate(-50%, 0) scale(0.48) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
}

/* Override and scale monster sprite container */
.combatActorSpriteContainer .monsterEntity {
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  width: 64px !important;
  height: 64px !important;
  transform: translate(-50%, 0) scale(0.58) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.combatActorSpriteContainer .monsterEntity .monsterName,
.combatActorSpriteContainer .monsterEntity .monsterJoinCombatBtn {
  display: none !important;
  /* Hide map elements inside combat board */
}

.combatActorSpriteContainer .monsterEntity .monsterSprite {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  transform-origin: center bottom !important;
}

/* Ensure the combat cell doesn't hide the overflow of the sprite */
.combatBoardCell {
  overflow: visible !important;
}

.combatBoardCellLabel {
  position: absolute;
  top: 2px;
  left: 4px;
  opacity: 0.5;
  font-size: 0.65rem;
  z-index: 2;
  pointer-events: none;
}

/* Damage Preview Badge on Board Cell */
.combat-cell-dmg-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.95);
  color: #ff4757;
  border: 1px solid #ff4757;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50; /* Display above the actor sprite */
  box-shadow: 0 2px 5px rgba(0,0,0,0.7);
  font-family: monospace, sans-serif;
}
.combat-cell-dmg-badge.lethal {
  color: #ffffff;
  background: linear-gradient(135deg, #e74c3c, #8e44ad);
  border-color: #f1c40f;
  animation: pulseLethal 0.8s infinite alternate;
}

/* =======================================================
   ANIMATIONS DE SORTS — Projectile / Impact / Shake
   ======================================================= */

/* Traînée du projectile : grandit depuis 0 à 100% de largeur */
@keyframes spellTrailGrow {
  from { clip-path: inset(0 100% 0 0); opacity: 0.9; }
  to   { clip-path: inset(0 0%   0 0); opacity: 0.5; }
}

/* Tête du projectile : se déplace du point de départ à la cible via CSS vars */
@keyframes spellHeadTravel {
  from { translate: 0 0;                   opacity: 1;   scale: 1; }
  80%  { translate: var(--dx) var(--dy);   opacity: 1;   scale: 1.2; }
  to   { translate: var(--dx) var(--dy);   opacity: 0;   scale: 2;   }
}

/* Flash d'impact : explose puis disparaît */
@keyframes spellImpactFlash {
  0%   { opacity: 0;   scale: 0.4; }
  20%  { opacity: 1;   scale: 1.1; }
  70%  { opacity: 0.8; scale: 1; }
  100% { opacity: 0;   scale: 1.3; }
}

/* Anneaux d'énergie qui s'élargissent */
@keyframes spellRingExpand {
  from { width: 4px;  height: 4px;  opacity: 1; }
  to   { width: 60px; height: 60px; opacity: 0; }
}

/* Particules qui partent en étoile */
@keyframes spellParticle {
  from { translate: 0 0;                   opacity: 1; scale: 1; }
  to   { translate: var(--px) var(--py);   opacity: 0; scale: 0.3; }
}

/* Shake de la cellule touchée */
@keyframes spellCellShake {
  0%,100% { translate: 0 0; }
  20%     { translate: -4px -2px; }
  40%     { translate: 4px 2px; }
  60%     { translate: -3px 3px; }
  80%     { translate: 3px -3px; }
}

.spell-anim-shake {
  animation: spellCellShake 320ms ease-in-out;
}

.monster-elemental-projectile {
  border-radius: 50%;
  pointer-events: none;
  z-index: 2000 !important;
  background: radial-gradient(circle, #fff 0 12%, var(--spell-glow) 25%, var(--spell-color) 58%, transparent 72%);
  box-shadow: 0 0 14px var(--spell-glow), 0 0 30px var(--spell-color);
  animation: monsterElementalTravel 360ms ease-in forwards;
}

.monster-elemental-projectile--venom-strike { filter: hue-rotate(75deg); }
.monster-elemental-projectile--fire-burst { filter: saturate(1.5); }
.monster-elemental-projectile--frost-burst { filter: brightness(1.3) saturate(0.7); }
.monster-elemental-projectile--earth-smash { border-radius: 25%; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
.monster-elemental-projectile--shadow-wisp { filter: hue-rotate(235deg); animation-timing-function: ease-out; }
.monster-elemental-projectile--radiant-bolt { filter: sepia(0.6) saturate(1.8); }

@keyframes monsterElementalTravel {
  0% { translate: 0 0; opacity: 0; scale: .45; rotate: 0deg; }
  18% { opacity: 1; scale: 1.1; }
  80% { translate: var(--dx) var(--dy); opacity: 1; scale: .85; rotate: 240deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.8; rotate: 360deg; }
}

.monster-elemental-impact {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 19;
  background: radial-gradient(circle, #fff 0 8%, var(--spell-glow) 18%, var(--spell-color) 42%, transparent 70%);
  box-shadow: 0 0 18px var(--spell-glow), inset 0 0 14px var(--spell-color);
  animation: monsterElementalImpact 700ms ease-out forwards;
}

.monster-elemental-impact--venom-strike { filter: hue-rotate(75deg); }
.monster-elemental-impact--frost-burst { filter: brightness(1.35) saturate(.7); }
.monster-elemental-impact--earth-smash { border-radius: 20%; }
.monster-elemental-impact--shadow-wisp { filter: hue-rotate(235deg); }
.monster-elemental-impact--radiant-bolt { filter: sepia(.6) saturate(1.8); }

@keyframes monsterElementalImpact {
  0% { opacity: 0; scale: .25; }
  25% { opacity: .95; scale: 1; }
  100% { opacity: 0; scale: 1.45; }
}

/* Les éléments d'animation sont positionnés sur le board (overflow: visible) */
.combatPositionBoard {
  overflow: visible !important;
}

/* Damage indicator flottant */
@keyframes floatUp {
  0%   { translate: 0 0;     opacity: 1; scale: 1; }
  70%  { translate: 0 -28px; opacity: 1; scale: 1.1; }
  100% { translate: 0 -44px; opacity: 0; scale: 0.9; }
}

.combat-damage-indicator.float-up {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 30;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 8px #ff5722, 0 2px 4px rgba(0,0,0,0.7);
  pointer-events: none;
  animation: floatUp 1.4s ease-out forwards;
  white-space: nowrap;
}

/* =======================================================
   ANIMATIONS DE GESTES DU LANCEUR (CASTER CAST GESTURES)
   ======================================================= */

@keyframes casterWarriorSlash {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(-4px, 2px) rotate(-12deg) scale(1.05); }
  50%  { transform: translate(12px, -6px) rotate(18deg) scale(1.15); filter: brightness(1.6); }
  75%  { transform: translate(6px, -2px) rotate(6deg) scale(1.05); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: none; }
}

@keyframes casterWarriorLeap {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-18px) scale(1.2) rotate(-8deg); filter: brightness(1.8); }
  65%  { transform: translateY(4px) scale(1.1, 0.9) rotate(4deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes casterMageRaise {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-12px) scale(1.1); filter: brightness(2.2) drop-shadow(0 0 12px #9c64ff); }
  70%  { transform: translateY(-10px) scale(1.08); filter: brightness(1.8) drop-shadow(0 0 16px #00e5ff); }
  100% { transform: translateY(0) scale(1); filter: none; }
}

@keyframes casterArcherShoot {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(-6px, 1px) scale(0.95, 1.05); filter: brightness(1.4); }
  50%  { transform: translate(8px, -2px) scale(1.08, 0.95); }
  70%  { transform: translate(-3px, 0) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}

@keyframes casterNecroSummon {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(0.92, 1.08) translateY(4px); filter: brightness(0.6) drop-shadow(0 0 14px #aa00ff); }
  60%  { transform: scale(1.12, 0.95) translateY(-8px); filter: brightness(2.0) drop-shadow(0 0 20px #e040fb); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

/* Monster Caster Gestures */
@keyframes casterMonsterHeadbutt {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-8px, 4px) rotate(-15deg) scale(0.95); }
  55%  { transform: translate(16px, -4px) rotate(12deg) scale(1.2); filter: brightness(1.5); }
  80%  { transform: translate(6px, 0) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: none; }
}

@keyframes casterMonsterPeck {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.15) rotate(-10deg); }
  60%  { transform: translate(10px, 4px) scale(1.1) rotate(15deg); filter: brightness(1.6); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}

@keyframes casterMonsterSquish {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.35, 0.45); }
  60%  { transform: scale(0.85, 1.4) translateY(-14px); filter: brightness(1.8) drop-shadow(0 0 10px #76ff03); }
  100% { transform: scale(1, 1) translateY(0); filter: none; }
}

@keyframes casterMonsterHowl {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translateY(-10px) rotate(-14deg) scale(1.18); filter: brightness(1.8); }
  65%  { transform: translate(12px, -2px) rotate(8deg) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}

@keyframes casterMonsterPincer {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.15) rotate(-12deg); }
  45%  { transform: scale(1.2) rotate(12deg); filter: brightness(1.7); }
  70%  { transform: scale(1.08) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); filter: none; }
}

@keyframes casterMonsterPound {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.25) translateY(-16px); filter: brightness(1.6); }
  60%  { transform: scale(1.3, 0.8) translateY(6px); filter: brightness(2.2) drop-shadow(0 0 16px #8d6e63); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

@keyframes casterMonsterScythe {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.1) rotate(-20deg) translateY(-6px); }
  60%  { transform: scale(1.2) rotate(25deg) translate(10px, 4px); filter: brightness(2.0) drop-shadow(0 0 14px #ba68c8); }
  100% { transform: scale(1) rotate(0deg); filter: none; }
}

@keyframes casterMonsterSlide {
  0%   { transform: scale(1) translateY(0); }
  25%  { transform: scale(1.2, 0.6) rotate(15deg) translateY(6px); }
  65%  { transform: scale(1.1, 0.8) translate(16px, 4px); filter: brightness(1.8) drop-shadow(0 0 12px #00e5ff); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

@keyframes casterMonsterRoar {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25) rotate(-10deg) translateY(-8px); filter: brightness(2.0) drop-shadow(0 0 18px #ff3d00); }
  65%  { transform: scale(1.15) rotate(10deg) translate(10px, -2px); }
  100% { transform: scale(1); filter: none; }
}

@keyframes casterMonsterStomp {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.15) translateY(-12px) rotate(6deg); }
  60%  { transform: scale(1.25, 0.85) translateY(4px); filter: brightness(1.8) drop-shadow(0 0 14px #ff9800); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

@keyframes casterMonsterSting {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.1) rotate(-15deg); }
  60%  { transform: scale(1.2) rotate(20deg) translate(8px, -6px); filter: brightness(1.9) drop-shadow(0 0 14px #e040fb); }
  100% { transform: scale(1) rotate(0deg); filter: none; }
}

@keyframes casterMonsterBreath {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.25) translateY(-6px); filter: brightness(2.2) drop-shadow(0 0 20px #ff3d00); }
  70%  { transform: scale(1.1) translate(10px, 0); filter: drop-shadow(0 0 16px #ff9800); }
  100% { transform: scale(1); filter: none; }
}

.caster-anim-warrior-slash { animation: casterWarriorSlash 450ms ease-out forwards !important; }
.caster-anim-warrior-leap  { animation: casterWarriorLeap 480ms ease-out forwards !important; }
.caster-anim-mage-raise    { animation: casterMageRaise 500ms ease-out forwards !important; }
.caster-anim-archer-shoot  { animation: casterArcherShoot 420ms ease-out forwards !important; }
.caster-anim-necro-summon  { animation: casterNecroSummon 520ms ease-out forwards !important; }

.caster-anim-monster-headbutt { animation: casterMonsterHeadbutt 450ms ease-out forwards !important; }
.caster-anim-monster-peck     { animation: casterMonsterPeck 420ms ease-out forwards !important; }
.caster-anim-monster-squish   { animation: casterMonsterSquish 460ms ease-out forwards !important; }
.caster-anim-monster-howl     { animation: casterMonsterHowl 480ms ease-out forwards !important; }
.caster-anim-monster-pincer   { animation: casterMonsterPincer 420ms ease-out forwards !important; }
.caster-anim-monster-pound    { animation: casterMonsterPound 500ms ease-out forwards !important; }
.caster-anim-monster-scythe   { animation: casterMonsterScythe 460ms ease-out forwards !important; }
.caster-anim-monster-slide    { animation: casterMonsterSlide 480ms ease-out forwards !important; }
.caster-anim-monster-roar     { animation: casterMonsterRoar 520ms ease-out forwards !important; }
.caster-anim-monster-stomp    { animation: casterMonsterStomp 480ms ease-out forwards !important; }
.caster-anim-monster-sting    { animation: casterMonsterSting 440ms ease-out forwards !important; }
.caster-anim-monster-breath   { animation: casterMonsterBreath 520ms ease-out forwards !important; }

/* =======================================================
   ANIMATIONS SPÉCIFIQUES DE SORTS RÉALISTES
   ======================================================= */

/* --- Colère Divine / Colère de Iop --- */
@keyframes divineSwordPlunge {
  0%   { transform: translateY(-160px) scale(0.4) rotate(0deg); opacity: 0; filter: brightness(3); }
  25%  { opacity: 1; transform: translateY(-80px) scale(1.3) rotate(0deg); filter: brightness(2.5) drop-shadow(0 0 25px #ffd700); }
  55%  { transform: translateY(0px) scale(1.1) rotate(0deg); filter: brightness(3) drop-shadow(0 0 35px #ff6d00); }
  75%  { transform: translateY(2px) scale(1.05) rotate(0deg); opacity: 0.95; }
  100% { transform: translateY(0) scale(1); opacity: 0; filter: brightness(1); }
}

@keyframes holyWrathCrater {
  0%   { transform: scale(0.2); opacity: 0; }
  35%  { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 20px #ffd700); }
  70%  { transform: scale(1.1); opacity: 0.85; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* --- Pression / Marteau Broyeur --- */
@keyframes pressureClaymoreFall {
  0%   { transform: translateY(-100px) rotate(-25deg) scale(0.6); opacity: 0; }
  40%  { transform: translateY(0px) rotate(15deg) scale(1.2); opacity: 1; filter: brightness(2.2); }
  70%  { transform: translateY(2px) rotate(5deg) scale(1.05); opacity: 0.9; }
  100% { transform: translateY(0) rotate(0deg) scale(0.9); opacity: 0; }
}

/* --- Séisme / Rupture Tectonique --- */
@keyframes seismicShockRupture {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  30%  { transform: scale(1.2) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 16px #8d6e63); }
  65%  { transform: scale(1.0) rotate(-5deg); opacity: 0.85; }
  100% { transform: scale(1.35) rotate(5deg); opacity: 0; }
}

/* --- Projectile de Feu / Boule de Feu réaliste --- */
@keyframes fireballTravel {
  0%   { translate: 0 0; scale: 0.5; rotate: 0deg; opacity: 0.7; }
  50%  { scale: 1.25; opacity: 1; filter: drop-shadow(0 0 14px #ff3d00); }
  100% { translate: var(--dx) var(--dy); scale: 1.4; rotate: 720deg; opacity: 1; }
}

@keyframes fireballBloomDetonation {
  0%   { transform: scale(0.4); opacity: 1; filter: brightness(2.5); }
  40%  { transform: scale(1.4); opacity: 1; filter: brightness(2.0) drop-shadow(0 0 22px #ff3d00); }
  75%  { transform: scale(1.2); opacity: 0.75; }
  100% { transform: scale(1.6); opacity: 0; filter: brightness(0.8); }
}

/* --- Glace Rapide / Éclats de Givre --- */
@keyframes frostShardTravel {
  0%   { translate: 0 0; scale: 0.6; opacity: 0; }
  25%  { opacity: 1; scale: 1.1; filter: drop-shadow(0 0 10px #00e5ff); }
  100% { translate: var(--dx) var(--dy); scale: 1.2; opacity: 1; }
}

@keyframes frostShatterNova {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 1; }
  45%  { transform: scale(1.3) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 18px #00e5ff); }
  100% { transform: scale(1.5) rotate(90deg); opacity: 0; }
}

/* --- Tornade Arcane / Vortex --- */
@keyframes arcaneVortexSpin {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.2) rotate(360deg); opacity: 1; filter: drop-shadow(0 0 20px #aa00ff); }
  70%  { transform: scale(1.1) rotate(720deg); opacity: 0.9; }
  100% { transform: scale(1.4) rotate(1080deg); opacity: 0; }
}

/* --- Écrasement Météore --- */
@keyframes meteorPlunge {
  0%   { transform: translate(-80px, -120px) scale(0.5); opacity: 0; }
  35%  { opacity: 1; filter: drop-shadow(0 0 24px #ff3d00); }
  70%  { transform: translate(0, 0) scale(1.3); opacity: 1; filter: brightness(2.5); }
  100% { transform: translate(0, 0) scale(1.5); opacity: 0; }
}

/* --- Pluie de Flèches / Barrage Balistique --- */
@keyframes arrowRainDrop {
  0%   { transform: translateY(-90px) rotate(45deg); opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: translateY(0) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 10px #ffd700); }
  100% { transform: translateY(0) rotate(45deg); opacity: 0; }
}

/* --- Drain Vital / Âme --- */
@keyframes soulSiphonTravel {
  0%   { translate: var(--dx) var(--dy); scale: 0.6; opacity: 1; filter: drop-shadow(0 0 14px #00e5ff); }
  50%  { scale: 1.2; opacity: 0.9; }
  100% { translate: 0 0; scale: 0.4; opacity: 0; }
}

/* --- Apocalypse Spectrale / Golem d'Os --- */
@keyframes spectralReaperSlash {
  0%   { transform: scale(0.5) rotate(-35deg); opacity: 0; }
  35%  { transform: scale(1.3) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 25px #aa00ff) invert(0.2); }
  70%  { transform: scale(1.1) rotate(45deg); opacity: 0.85; }
  100% { transform: scale(1.4) rotate(60deg); opacity: 0; }
}

@keyframes boneTitanFistSlam {
  0%   { transform: translateY(-110px) scale(0.6); opacity: 0; }
  40%  { transform: translateY(0) scale(1.3); opacity: 1; filter: brightness(2.0) drop-shadow(0 0 20px #ede7f6); }
  75%  { transform: translateY(4px) scale(1.1, 0.9); opacity: 0.9; }
  100% { transform: translateY(0) scale(1.4); opacity: 0; }
}

/* --- Mansot Torpedo Belly Slide --- */
@keyframes mansotTorpedoSlide {
  0%   { translate: 0 0; scale: 0.8; opacity: 0.9; }
  50%  { scale: 1.15; filter: drop-shadow(0 0 14px #00e5ff); }
  100% { translate: var(--dx) var(--dy); scale: 1.3; opacity: 1; }
}

/* =======================================================
   ANIMATIONS THÉMATIQUES PAR CLASSE
   ======================================================= */

/* --- Guerrier (Sword / Slash Strike) --- */
@keyframes warriorSwordSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes warriorSlashCut1 {
  0%   { transform: translateY(-50%) rotate(35deg) scaleX(0); opacity: 1; }
  40%  { transform: translateY(-50%) rotate(35deg) scaleX(1.15); opacity: 1; }
  100% { transform: translateY(-50%) rotate(35deg) scaleX(1); opacity: 0; }
}

@keyframes warriorSlashCut2 {
  0%   { transform: translateY(-50%) rotate(-35deg) scaleX(0); opacity: 1; }
  40%  { transform: translateY(-50%) rotate(-35deg) scaleX(1.15); opacity: 1; }
  100% { transform: translateY(-50%) rotate(-35deg) scaleX(1); opacity: 0; }
}

/* --- Archer Realistic Ballistic Arrows & VFX --- */
.archer-arrow-projectile {
  position: absolute;
  pointer-events: none;
  z-index: 2200;
  will-change: transform;
}

.archer-stuck-arrow {
  position: absolute;
  pointer-events: none;
  z-index: 2200;
  will-change: transform;
}

.archer-bow-release-snap {
  position: absolute;
  pointer-events: none;
  z-index: 2250;
  border-radius: 50%;
  will-change: transform, opacity;
}

.archer-spark {
  position: absolute;
  pointer-events: none;
  z-index: 2210;
  border-radius: 50%;
  will-change: transform, opacity;
}

.archer-impact-ring {
  position: absolute;
  pointer-events: none;
  z-index: 2205;
  border-radius: 50%;
  will-change: transform, opacity;
}

@keyframes archerArrowQuiver {
  0%   { transform: rotate(var(--arrow-angle, -45deg)) scale(1); opacity: 1; }
  25%  { transform: rotate(calc(var(--arrow-angle, -45deg) - 6deg)) scale(1); }
  50%  { transform: rotate(calc(var(--arrow-angle, -45deg) + 5deg)) scale(1); }
  75%  { transform: rotate(calc(var(--arrow-angle, -45deg) - 2deg)) scale(1); opacity: 0.95; }
  100% { transform: rotate(var(--arrow-angle, -45deg)) scale(1); opacity: 0; }
}

/* --- Nécromancien (Miasma Float & Cloud Spread) --- */
@keyframes necroMiasmaFloat {
  0%   { translate: 0 0;                                                   scale: 0.8; opacity: 0.7; }
  40%  { translate: calc(var(--dx) * 0.4 + 12px) calc(var(--dy) * 0.4 - 12px); scale: 1.25; opacity: 0.95; }
  100% { translate: var(--dx) var(--dy);                                   scale: 1.5; opacity: 0.6; }
}

@keyframes necroCloudSpread {
  0%   { transform: scale(0.5); opacity: 0; }
  25%  { transform: scale(1.15); opacity: 0.9; }
  60%  { transform: scale(1.0); opacity: 0.75; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes necroBubbleFloat {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-36px) scale(0.35); opacity: 0; }
}

/* --- Mage (Rune Expansion) --- */
@keyframes mageRuneExpand {
  from { width: 0px;  height: 0px;  transform: translate(-50%, -50%) rotate(0deg);   opacity: 1; }
  to   { width: var(--rune-max-size, 72px); height: var(--rune-max-size, 72px); transform: translate(-50%, -50%) rotate(180deg); opacity: 0; }
}

/* --- Crabe (Claw strike / Pincer pinch) --- */
@keyframes crabPincerLeft {
  0% { transform: rotate(-55deg); opacity: 0; }
  20% { opacity: 1; }
  45% { transform: rotate(0deg); opacity: 1; }
  75% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}

@keyframes crabPincerRight {
  0% { transform: rotate(55deg); opacity: 0; }
  20% { opacity: 1; }
  45% { transform: rotate(0deg); opacity: 1; }
  75% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}

/* --- Loup / Rat (Bite / Jaw closing) --- */
@keyframes jawBiteTop {
  0% { transform: translateY(-25px); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}

@keyframes jawBiteBottom {
  0% { transform: translateY(25px); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-5px); opacity: 0; }
}

/* --- Oiseau (Beak Peck strike) --- */
@keyframes beakPeck {
  0% { transform: scaleY(0.2) translateY(-30px); opacity: 0; }
  25% { transform: scaleY(1.3) translateY(10px); opacity: 1; }
  40% { transform: scaleY(0.8) translateY(-5px); opacity: 1; }
  55% { transform: scaleY(1.1) translateY(5px); opacity: 1; }
  75% { transform: scaleY(1.0) translateY(0px); opacity: 1; }
  100% { transform: scaleY(0.5) translateY(-20px); opacity: 0; }
}

/* --- Champignon (Mushroom slam cap) --- */
@keyframes mushroomSlam {
  0% { transform: scale(0.4) translateY(-20px); opacity: 0; }
  30% { transform: scale(1.1) translateY(12px); opacity: 1; }
  50% { transform: scale(1.0) translateY(8px); opacity: 1; }
  100% { transform: scale(1.2) translateY(15px); opacity: 0; }
}

/* =======================================================
   ANIMATIONS DE DÉGÂTS ET ATTAQUES SPÉCIFIQUES PAR MONSTRE
   ======================================================= */

/* --- 1. Dinosaures (Dino Rend / Primal Claw & Roar) --- */
@keyframes dinoRoarTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  20%  { opacity: 1; scale: 1.2; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.6; }
}

@keyframes dinoClawSlash1 {
  0%   { transform: translate(-30%, -60%) rotate(25deg) scaleX(0); opacity: 0; }
  25%  { transform: translate(-10%, -20%) rotate(25deg) scaleX(1.2); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(10%, 10%) rotate(25deg) scaleX(0.9); opacity: 0; }
}

@keyframes dinoClawSlash2 {
  0%   { transform: translate(30%, -60%) rotate(-25deg) scaleX(0); opacity: 0; }
  35%  { transform: translate(10%, -20%) rotate(-25deg) scaleX(1.2); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-10%, 10%) rotate(-25deg) scaleX(0.9); opacity: 0; }
}

@keyframes dinoBiteClench {
  0%   { transform: scale(1.6); opacity: 0; }
  30%  { transform: scale(0.95); opacity: 1; }
  60%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* --- 2. Minotaures (Horn Charge / Earth Shatter) --- */
@keyframes hornChargeTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  20%  { opacity: 1; scale: 1.1; }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.3; }
}

@keyframes minotaurHornLeft {
  0%   { transform: translate(-40px, -20px) rotate(30deg); opacity: 0; }
  30%  { transform: translate(-5px, 0) rotate(15deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(0, 5px) rotate(10deg); opacity: 0; }
}

@keyframes minotaurHornRight {
  0%   { transform: translate(40px, -20px) rotate(-30deg); opacity: 0; }
  30%  { transform: translate(5px, 0) rotate(-15deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(0, 5px) rotate(-10deg); opacity: 0; }
}

@keyframes earthFissureShock {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { transform: scale(1.0); opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* --- 3. Félins (Cat Pounce / Swift Claw Laceration) --- */
@keyframes catPounceTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.2; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.9; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes felineClawSwipe {
  0%   { transform: scaleX(0) rotate(var(--angle, 0deg)); opacity: 0; }
  30%  { transform: scaleX(1.2) rotate(var(--angle, 0deg)); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: scaleX(1.0) rotate(var(--angle, 0deg)); opacity: 0; }
}

/* --- 4. Céphalopodes / Kraken (Tentacle Crush) --- */
@keyframes tentacleCrushTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  30%  { opacity: 1; scale: 1.1; }
  80%  { translate: var(--dx) var(--dy); opacity: 0.9; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes tentacleSlamVertical {
  0%   { transform: translateY(-70px) scaleY(0.4) rotate(15deg); opacity: 0; }
  35%  { transform: translateY(0) scaleY(1.1) rotate(-5deg); opacity: 1; }
  55%  { transform: translateY(-4px) scaleY(0.95) rotate(0deg); opacity: 1; }
  75%  { opacity: 0.9; }
  100% { transform: translateY(10px) scale(0.9); opacity: 0; }
}

/* --- 5. Poissons & Faune Aquatique (Water Geyser / Torrent) --- */
@keyframes waterJetTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  25%  { opacity: 1; scale: 1.1; }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.5; }
}

@keyframes waterGeyserErupt {
  0%   { transform: scaleY(0.1) translateY(40px); opacity: 0; }
  30%  { transform: scaleY(1.2) translateY(-10px); opacity: 1; }
  60%  { transform: scaleY(1.0) translateY(0); opacity: 0.95; }
  100% { transform: scaleY(1.3) translateY(-15px); opacity: 0; }
}

/* --- 6. Arachnides & Scorpions (Web Net & Venom Stinger) --- */
@keyframes webStingTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  30%  { opacity: 1; scale: 1.1; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.9; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.3; }
}

@keyframes spiderWebExpand {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.05) rotate(45deg); opacity: 1; }
  70%  { transform: scale(1.0) rotate(45deg); opacity: 0.9; }
  100% { transform: scale(1.15) rotate(50deg); opacity: 0; }
}

@keyframes scorpionStingerPlunge {
  0%   { transform: translateY(-35px) scale(0.5); opacity: 0; }
  40%  { transform: translateY(0) scale(1.15); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(6px) scale(0.9); opacity: 0; }
}

/* --- 7. Primates & Singes (Gorilla Ground Slam) --- */
@keyframes gorillaTossTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  25%  { opacity: 1; scale: 1.1; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.9; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes gorillaDualFistImpact {
  0%   { transform: scale(0.3) translateY(-30px); opacity: 0; }
  30%  { transform: scale(1.1) translateY(8px); opacity: 1; }
  60%  { transform: scale(1.0) translateY(4px); opacity: 0.95; }
  100% { transform: scale(1.2) translateY(12px); opacity: 0; }
}

/* --- 8. Flore & Racines (Thorn Brambles Eruption) --- */
@keyframes rootThornTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.1; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes brambleRootsBurst {
  0%   { transform: scaleY(0.2) translateY(30px); opacity: 0; }
  35%  { transform: scaleY(1.15) translateY(-5px); opacity: 1; }
  65%  { transform: scaleY(1.0) translateY(0); opacity: 0.9; }
  100% { transform: scaleY(1.2) translateY(-10px); opacity: 0; }
}

/* --- 9. Cristaux & Golems (Crystal Shatter Radial) --- */
@keyframes crystalShardTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.1; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 180deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; rotate: 240deg; }
}

@keyframes crystalSpireErupt {
  0%   { transform: scale(0.2) translateY(25px); opacity: 0; }
  30%  { transform: scale(1.1) translateY(-6px); opacity: 1; }
  60%  { transform: scale(1.0) translateY(0); opacity: 0.9; }
  100% { transform: scale(1.2) translateY(-8px); opacity: 0; }
}

/* --- 10. Volcan & Magma (Magma Fissure Pillar) --- */
@keyframes magmaPillarErupt {
  0%   { transform: scaleY(0.2) translateY(40px); opacity: 0; filter: brightness(2); }
  30%  { transform: scaleY(1.25) translateY(-8px); opacity: 1; filter: brightness(1.5); }
  60%  { transform: scaleY(1.0) translateY(0); opacity: 0.95; }
  100% { transform: scaleY(1.35) translateY(-15px); opacity: 0; }
}

/* --- 11. Givre & Neige (Ice Nova Blast) --- */
@keyframes iceNovaExpand {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  30%  { transform: scale(1.15) rotate(45deg); opacity: 1; }
  65%  { transform: scale(1.0) rotate(60deg); opacity: 0.9; }
  100% { transform: scale(1.3) rotate(90deg); opacity: 0; }
}

/* --- 12. Spectres & Morts-vivants (Soul Vortex & Grasp) --- */
@keyframes soulVortexSpin {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.15) rotate(180deg); opacity: 0.95; }
  70%  { transform: scale(1.0) rotate(320deg); opacity: 0.85; }
  100% { transform: scale(1.4) rotate(450deg); opacity: 0; }
}

@keyframes skeletalHandGrasp {
  0%   { transform: translateY(35px) scale(0.4); opacity: 0; }
  35%  { transform: translateY(0) scale(1.1); opacity: 1; }
  65%  { opacity: 0.9; }
  100% { transform: translateY(-5px) scale(0.9); opacity: 0; }
}

/* --- 13. Célestes (Divine Sunbeam Strike) --- */
@keyframes celestialPillarStrike {
  0%   { transform: scaleY(0.1) translateY(-60px); opacity: 0; }
  30%  { transform: scaleY(1.2) translateY(0); opacity: 1; }
  60%  { transform: scaleY(1.0) translateY(0); opacity: 0.95; }
  100% { transform: scaleY(1.3) translateY(5px); opacity: 0; }
}

/* --- 14. Festifs (Gift Box Pop & Confetti) --- */
@keyframes festiveGiftTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  30%  { opacity: 1; scale: 1.15; }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 360deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; rotate: 480deg; }
}

@keyframes giftBoxPop {
  0%   { transform: scale(0.3) translateY(-10px); opacity: 0; }
  35%  { transform: scale(1.2) translateY(4px); opacity: 1; }
  65%  { transform: scale(1.0); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --- 15. Rongeurs (Rat Plague Gnaw) --- */
@keyframes ratPlagueTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  30%  { opacity: 1; scale: 1.1; }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.3; }
}

@keyframes ratTeethSnap {
  0%   { transform: scale(0.4); opacity: 0; }
  25%  { transform: scale(1.2); opacity: 1; }
  45%  { transform: scale(0.85); opacity: 1; }
  65%  { transform: scale(1.1); opacity: 0.9; }
  100% { transform: scale(1.0); opacity: 0; }
}

/* --- 16. Bouftous & Sangliers (Horn Charge & Upward Gore Scoop) --- */
@keyframes bouftouChargeTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  25%  { opacity: 1; scale: 1.15; filter: drop-shadow(0 0 10px #ffb300); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes bouftouHornScoop {
  0%   { transform: translateY(20px) scale(0.4) rotate(-15deg); opacity: 0; }
  35%  { transform: translateY(-16px) scale(1.25) rotate(12deg); opacity: 1; filter: drop-shadow(0 0 14px #ff9800); }
  65%  { transform: translateY(-4px) scale(1.05) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(0) scale(1.3) rotate(5deg); opacity: 0; }
}

/* --- 17. Larves & Gelées (Viscous Acid Spit & Splatter) --- */
@keyframes larveAcidSpitTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.4; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 12px #76ff03); }
  85%  { translate: var(--dx) var(--dy); opacity: 0.95; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes larveAcidSplatter {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { transform: scale(1.3) rotate(20deg); opacity: 1; filter: drop-shadow(0 0 16px #00e676); }
  65%  { transform: scale(1.1) rotate(45deg); opacity: 0.85; }
  100% { transform: scale(1.4) rotate(60deg); opacity: 0; }
}

/* --- 18. Craqueleurs & Golems de Pierre (Heavy Boulder & Ground Shatter) --- */
@keyframes craqueleurBoulderTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 12px #8d6e63); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 360deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; rotate: 480deg; }
}

@keyframes craqueleurGroundSmash {
  0%   { transform: scale(0.3) translateY(-30px); opacity: 0; }
  35%  { transform: scale(1.25) translateY(4px); opacity: 1; filter: drop-shadow(0 0 20px #5d4037) contrast(1.5); }
  70%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* --- 19. Chafers & Squelettes (Spinning Scythe & Necrotic Cross Slash) --- */
@keyframes chaferScytheTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 12px #e040fb); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 540deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; rotate: 720deg; }
}

@keyframes chaferScytheCross {
  0%   { transform: scale(0.2) rotate(-45deg); opacity: 0; }
  35%  { transform: scale(1.2) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 18px #ba68c8); }
  70%  { transform: scale(1.05) rotate(30deg); opacity: 0.85; }
  100% { transform: scale(1.35) rotate(45deg); opacity: 0; }
}

/* --- 20. Projectiles & Impacts Additionnels des Monstres --- */
@keyframes frostSpearTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; filter: drop-shadow(0 0 6px #e0f7fa); }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 16px #00e5ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.45; filter: drop-shadow(0 0 22px #80deea); }
}

@keyframes iceSpikeErupt {
  0%   { transform: scale(0.2) translateY(22px) rotate(var(--rot, 0deg)); opacity: 0; }
  35%  { transform: scale(1.2) translateY(-6px) rotate(var(--rot, 0deg)); opacity: 1; filter: drop-shadow(0 0 16px #00e5ff); }
  70%  { transform: scale(1.0) translateY(0) rotate(var(--rot, 0deg)); opacity: 0.95; }
  100% { transform: scale(1.15) translateY(-2px) rotate(var(--rot, 0deg)); opacity: 0; }
}

@keyframes frostShatterBurst {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  30%  { transform: scale(1.25) rotate(30deg); opacity: 1; filter: drop-shadow(0 0 18px #00e5ff); }
  70%  { transform: scale(1.05) rotate(60deg); opacity: 0.9; }
  100% { transform: scale(1.35) rotate(90deg); opacity: 0; }
}

@keyframes venomSpitTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 14px #76ff03); }
  85%  { translate: var(--dx) var(--dy); opacity: 0.95; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes venomPuddleBubbles {
  0%   { transform: scale(0.3); opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 14px #00e676); }
  70%  { transform: scale(1.0); opacity: 0.85; }
  100% { transform: scale(1.2); opacity: 0; }
}

@keyframes magmaBreathTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; filter: drop-shadow(0 0 10px #ff5722); }
  25%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 20px #ff9800); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.45; }
}

@keyframes wolfDashTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 14px #ff5252); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes birdDiveTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 12px #ffe082); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes crabPincerTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 14px #ff7043); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes sporePodTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 14px #8bc34a); }
  85%  { translate: var(--dx) var(--dy); opacity: 0.95; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes celestialBoltTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; filter: drop-shadow(0 0 10px #fff59d); }
  20%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 20px #ffd600); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.45; }
}

@keyframes soulWispTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; filter: drop-shadow(0 0 12px #ba68c8); }
  30%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 18px #e040fb); }
  85%  { translate: var(--dx) var(--dy); opacity: 0.95; scale: 0.95; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

/* =======================================================
   RÉACTIONS AUX DÉGÂTS SUR LE SPRITE DU MONSTRE (HIT REACTION)
   ======================================================= */

@keyframes monsterHitTremble {
  0%   { transform: translate(0, 0) scale(1); filter: brightness(2.2); }
  20%  { transform: translate(-6px, 2px) scale(0.92, 1.08); filter: brightness(2.0); }
  40%  { transform: translate(6px, -2px) scale(1.08, 0.92); }
  60%  { transform: translate(-4px, 1px) scale(0.96, 1.04); }
  80%  { transform: translate(3px, -1px) scale(1.02, 0.98); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1.0); }
}

@keyframes monsterHitFire {
  0%   { transform: scale(1.1); filter: brightness(2.5) drop-shadow(0 0 16px #ff5722); }
  35%  { transform: translate(-5px, 2px) scale(0.93); filter: saturate(2.2) drop-shadow(0 0 10px #ff9800); }
  70%  { transform: translate(4px, -1px) scale(1.04); }
  100% { transform: scale(1); filter: none; }
}

@keyframes monsterHitFrost {
  0%   { transform: scale(0.94); filter: brightness(2.2) drop-shadow(0 0 16px #00e5ff); }
  35%  { transform: translate(3px, -2px) scale(1.02); filter: hue-rotate(160deg) contrast(1.4); }
  70%  { transform: translate(-2px, 1px) scale(0.98); }
  100% { transform: scale(1); filter: none; }
}

@keyframes monsterHitVenom {
  0%   { transform: scale(1.06); filter: brightness(2.0) drop-shadow(0 0 14px #2ecc71); }
  30%  { transform: skewX(-14deg) scale(0.92); filter: hue-rotate(85deg) contrast(1.3); }
  60%  { transform: skewX(8deg) scale(1.04); }
  100% { transform: scale(1); filter: none; }
}

@keyframes monsterHitEarth {
  0%   { transform: scale(1.12); filter: contrast(2.2) drop-shadow(0 0 14px #8d6e63); }
  30%  { transform: translate(0, 6px) scale(1.14, 0.86); }
  60%  { transform: translate(0, -4px) scale(0.92, 1.08); }
  100% { transform: scale(1); filter: none; }
}

@keyframes monsterHitSpectral {
  0%   { opacity: 0.15; transform: scale(1.18); filter: drop-shadow(0 0 20px #aa00ff) invert(0.6); }
  40%  { opacity: 0.85; transform: translate(-6px, -4px) scale(0.9); }
  70%  { opacity: 0.95; transform: translate(4px, 2px) scale(1.03); }
  100% { opacity: 1.0; transform: scale(1); filter: none; }
}

@keyframes monsterHitAquatic {
  0%   { transform: scale(1.15, 0.85); filter: drop-shadow(0 0 16px #0091ea) brightness(2.0); }
  35%  { transform: translate(-4px, 4px) scale(0.88, 1.12); }
  70%  { transform: translate(3px, -2px) scale(1.06, 0.94); }
  100% { transform: scale(1); filter: none; }
}

@keyframes monsterHitCelestial {
  0%   { transform: scale(1.12); filter: brightness(2.8) drop-shadow(0 0 22px #ffd700); }
  35%  { transform: scale(0.94); filter: saturate(2) drop-shadow(0 0 12px #ffeb3b); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); filter: none; }
}

@keyframes monsterHitFestive {
  0%   { transform: rotate(-8deg) scale(1.15); filter: brightness(2.0) drop-shadow(0 0 16px #ff1744); }
  35%  { transform: rotate(8deg) scale(0.92); }
  70%  { transform: rotate(-3deg) scale(1.04); }
  100% { transform: scale(1) rotate(0deg); filter: none; }
}

.monster-hit-anim-tremble  { animation: monsterHitTremble 450ms ease-out forwards !important; }
.monster-hit-anim-fire     { animation: monsterHitFire 500ms ease-out forwards !important; }
.monster-hit-anim-frost    { animation: monsterHitFrost 500ms ease-out forwards !important; }
.monster-hit-anim-venom    { animation: monsterHitVenom 500ms ease-out forwards !important; }
.monster-hit-anim-earth    { animation: monsterHitEarth 500ms ease-out forwards !important; }
.monster-hit-anim-spectral { animation: monsterHitSpectral 550ms ease-out forwards !important; }
.monster-hit-anim-aquatic  { animation: monsterHitAquatic 500ms ease-out forwards !important; }
.monster-hit-anim-celestial{ animation: monsterHitCelestial 500ms ease-out forwards !important; }
.monster-hit-anim-festive  { animation: monsterHitFestive 480ms ease-out forwards !important; }

/* =======================================================
   STYLES THÉMATIQUES DES INDICATEURS DE DÉGÂTS (POPUP PV)
   ======================================================= */

.combat-damage-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: inherit !important;
  letter-spacing: -0.02em !important;
}

.combat-damage-indicator .damage-badge-icon {
  font-size: 0.85em !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}

.combat-damage-indicator.damage-theme--dino {
  color: #ffccbc !important;
  text-shadow: 0 0 10px #d32f2f, 0 0 20px #ff3d00, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--minotaur {
  color: #ffe0b2 !important;
  text-shadow: 0 0 10px #e65100, 0 0 18px #ff9800, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--felin {
  color: #fff9c4 !important;
  text-shadow: 0 0 10px #ff8f00, 0 0 18px #ffc107, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--aquatic {
  color: #e1f5fe !important;
  text-shadow: 0 0 10px #0288d1, 0 0 20px #00e5ff, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--arachnid {
  color: #f3e5f5 !important;
  text-shadow: 0 0 10px #8e24aa, 0 0 20px #e040fb, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--flora {
  color: #f1f8e9 !important;
  text-shadow: 0 0 10px #558b2f, 0 0 18px #76ff03, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--primate {
  color: #fff3e0 !important;
  text-shadow: 0 0 10px #bf360c, 0 0 18px #ff6d00, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--crystal {
  color: #ede7f6 !important;
  text-shadow: 0 0 10px #512da8, 0 0 20px #b388ff, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--magma {
  color: #ffebee !important;
  text-shadow: 0 0 10px #b71c1c, 0 0 22px #ff1744, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--frost {
  color: #e0f7fa !important;
  text-shadow: 0 0 10px #0097a7, 0 0 20px #00e5ff, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--spectre {
  color: #f3e5f5 !important;
  text-shadow: 0 0 10px #4a148c, 0 0 22px #aa00ff, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--celestial {
  color: #fffde7 !important;
  text-shadow: 0 0 10px #f57f17, 0 0 22px #ffd600, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--festive {
  color: #ffebee !important;
  text-shadow: 0 0 10px #c2185b, 0 0 20px #ff4081, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--canis {
  color: #eceff1 !important;
  text-shadow: 0 0 10px #546e7a, 0 0 20px #90a4ae, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--rodent {
  color: #dcedc8 !important;
  text-shadow: 0 0 10px #33691e, 0 0 18px #7cb342, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--crab {
  color: #ffccbc !important;
  text-shadow: 0 0 10px #bf360c, 0 0 18px #ff7043, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--avian {
  color: #e0f7fa !important;
  text-shadow: 0 0 10px #0277bd, 0 0 20px #29b6f6, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--serpent {
  color: #c8e6c9 !important;
  text-shadow: 0 0 10px #1b5e20, 0 0 20px #00e676, 0 2px 4px rgba(0,0,0,0.9) !important;
}
.combat-damage-indicator.damage-theme--champignon {
  color: #f3e5f5 !important;
  text-shadow: 0 0 10px #6a1b9a, 0 0 18px #ab47bc, 0 2px 4px rgba(0,0,0,0.9) !important;
}

/* --- Critical Hit Intense Crimson/Red Burst Indicator --- */
.combat-damage-indicator.damage-is-crit,
.combat-damage-indicator.damage-is-crit[class*="damage-theme--"] {
  font-size: 1.45em !important;
  font-weight: 900 !important;
  color: #ff1744 !important;
  text-shadow: 0 0 10px #ff1744, 0 0 22px #d50000, 0 0 36px #b71c1c, 0 2px 6px rgba(0, 0, 0, 0.95) !important;
  animation: floatUpCrit 1450ms cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
  filter: drop-shadow(0 0 10px rgba(255, 23, 68, 0.95)) !important;
  letter-spacing: 0.5px !important;
}

@keyframes floatUpCrit {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  18%  { transform: translateY(-18px) scale(1.4); opacity: 1; }
  32%  { transform: translateY(-28px) scale(1.2); opacity: 1; }
  75%  { transform: translateY(-50px) scale(1.05); opacity: 0.95; }
  100% { transform: translateY(-75px) scale(0.9); opacity: 0; }
}

/* ==========================================================================
   PIXI.JS ISOMETRIC COMBAT BOARD (HYBRID MODE OVERRIDES)
   ========================================================================== */

#combatPositionBoard.pixi-isometric-mode {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
}

/* Hide inner frame decoration that might conflict with isometric perspective */
#combatPositionBoard.pixi-isometric-mode::before,
#combatPositionBoard.pixi-isometric-mode::after {
  display: none !important;
}

/* Hide legacy DOM obstacle relief (rendered beautifully in PixiJS) */
#combatPositionBoard.pixi-isometric-mode .combatObstacleRelief {
  display: none !important;
}

/* Hide legacy DOM cell coordinate labels (rendered in PixiJS) */
#combatPositionBoard.pixi-isometric-mode .combatBoardCellLabel {
  display: none !important;
}

/* Make DOM cells absolute positioned, transparent, and pointer-event transparent */
#combatPositionBoard.pixi-isometric-mode .combatBoardCell,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.reachable-move,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.move-preview,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.in-range,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.is-obstacle,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.aoe-preview,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.start-player,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.start-monster,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.has-player,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.has-monster {
  position: absolute !important;
  aspect-ratio: auto !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important; /* disable hover transition since PixiJS handles hover highlights */
  pointer-events: none !important;
}

/* Use the ::before pseudo-element as the exact geometric diamond interaction mask */
#combatPositionBoard.pixi-isometric-mode .combatBoardCell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: auto !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  background: transparent !important;
  z-index: 1 !important;
  cursor: pointer;
}

/* Adjust player and monster sprite vertical anchoring to sit nicely on the tile center */
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important; /* align feet to the bottom center of the absolute cell */
  justify-content: center !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform-style: flat !important;
}

#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer > * {
  pointer-events: auto !important;
  cursor: pointer;
}


/* Force flat rendering for any 3D map transforms inherited on the combat board */
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .charSprite,
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .monsterEntity {
  position: absolute !important;
  left: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-style: flat !important;
  transform-origin: center bottom !important;
}

/* Make character sprite stand upright relative to the bottom center of the cell and scale with tile size */
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .charSprite {
  bottom: calc(50% - 6px) !important;
  transform: translate(-50%, 0) scale(var(--player-scale, 0.53)) !important;
}

#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .monsterEntity {
  bottom: calc(50% - 4px) !important;
  width: 64px !important;
  height: 64px !important;
  transform: translate(-50%, 0) scale(var(--monster-scale, 0.61)) !important;
}

/* Adjust damage preview badges to float nicely above the isometric character */
#combatPositionBoard.pixi-isometric-mode .combat-cell-dmg-badge {
  position: absolute !important;
  bottom: calc(var(--combat-tile-width, 100) * 0.93 * 1px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 150 !important;
  pointer-events: none !important;
  background: rgba(10, 7, 5, 0.98) !important;
  color: #ff4757 !important;
  border: 1.5px solid rgba(255, 71, 87, 0.85) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 10px !important;
  min-width: 58px !important;
  text-align: center !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4), 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  text-shadow: 0 0 4px rgba(255, 71, 87, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Adjust combat damage indicator popup */
#combatPositionBoard.pixi-isometric-mode .combat-damage-indicator {
  position: absolute !important;
  bottom: calc(var(--combat-tile-width, 100) * 1.05 * 1px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 160 !important;
  pointer-events: none !important;
}

/* Walking / running animation for monsters in combat */
.monsterSprite.walking {
  animation: runBob 0.34s linear infinite !important;
}

/* Ready overhead badge above character during prep phase */
.combat-prep-ready-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #15803d, #166534);
  color: #ffffff;
  border: 1.5px solid #22c55e;
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.6);
  white-space: nowrap;
  pointer-events: none;
  z-index: 25;
  animation: prepReadyPulse 2s infinite ease-in-out;
}

#combatPositionBoard.pixi-isometric-mode .combat-prep-ready-badge {
  position: absolute !important;
  bottom: calc(50% + 42px) !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@keyframes prepReadyPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
    border-color: #22c55e;
  }
  50% {
    box-shadow: 0 2px 14px rgba(34, 197, 94, 0.9);
    border-color: #4ade80;
  }
}

/* Ensure all combat projectiles and impact VFX are rendered above isometric board cells and actors */
.spell-anim-projectile,
.spell-anim-head,
.mage-trail,
.mage-head,
.monster-elemental-projectile,
.monster-elemental-impact {
  z-index: 2000 !important;
  pointer-events: none !important;
}

#combatPositionBoard .combatActorSpriteContainer.walking-animation {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1000 !important;
}

/* =======================================================
   ANIMATIONS SPÉCIFIQUES DES SORTS DE CLASSE UNIQUES
   ======================================================= */

/* --- Posture du Berserker (Guerrier Stance) --- */
@keyframes berserkerRagePulse {
  0%   { transform: scale(0.4); opacity: 0; filter: brightness(2.5); }
  35%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 24px #ff1744); }
  70%  { transform: scale(1.15); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; filter: brightness(1.2); }
}

@keyframes berserkerFlamesAscend {
  0%   { transform: translateY(12px) scale(0.5); opacity: 0; }
  40%  { opacity: 1; filter: drop-shadow(0 0 14px #ff3d00); }
  100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

/* --- Concentration Arcanique (Mage Stance) --- */
@keyframes arcaneConcentrationSpin {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  40%  { transform: scale(1.2) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 20px #00e5ff); }
  75%  { transform: scale(1.05) rotate(300deg); opacity: 0.9; }
  100% { transform: scale(1.35) rotate(420deg); opacity: 0; }
}

@keyframes arcaneMoteRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  30%  { opacity: 1; filter: drop-shadow(0 0 8px #aa00ff); }
  100% { transform: translateY(-38px) scale(1.1); opacity: 0; }
}

/* --- Œil de Faucon (Archer Stance) --- */
@keyframes falconEyeLock {
  0%   { transform: scale(2.2) rotate(-45deg); opacity: 0; }
  45%  { transform: scale(0.95) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 20px #ffd700); }
  75%  { transform: scale(1.05) rotate(0deg); opacity: 0.95; }
  100% { transform: scale(1.1) rotate(0deg); opacity: 0; }
}

@keyframes falconWindSpiral {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  40%  { transform: scale(1.2) rotate(360deg); opacity: 0.8; filter: drop-shadow(0 0 14px #00e5ff); }
  100% { transform: scale(1.4) rotate(720deg); opacity: 0; }
}

/* --- Pacte Funeste (Nécromancien Stance) --- */
@keyframes soulPactOrbit {
  0%   { transform: rotate(0deg) translateX(28px) rotate(0deg) scale(0.7); opacity: 0.2; }
  50%  { transform: rotate(180deg) translateX(36px) rotate(-180deg) scale(1.2); opacity: 1; filter: drop-shadow(0 0 16px #00e676); }
  100% { transform: rotate(360deg) translateX(44px) rotate(-360deg) scale(0.5); opacity: 0; }
}

@keyframes soulPactAuraPulse {
  0%   { transform: scale(0.3); opacity: 0; }
  35%  { transform: scale(1.3); opacity: 0.95; filter: drop-shadow(0 0 22px #aa00ff); }
  75%  { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* --- Bond Héroïque (Guerrier Leap) --- */
@keyframes heroicLeapArc {
  0%   { translate: 0 0; transform: scale(1) translateY(0); opacity: 1; }
  35%  { transform: scale(1.4) translateY(-60px); filter: drop-shadow(0 0 20px #ff9800); }
  70%  { transform: scale(1.2) translateY(-30px); }
  100% { translate: var(--dx) var(--dy); transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes heroicLeapSlam {
  0%   { transform: scale(0.3); opacity: 0; }
  30%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 24px #ff6f00); }
  70%  { transform: scale(1.1); opacity: 0.85; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- Distorsion Spatiale (Mage Blink) --- */
@keyframes spatialRiftCollapse {
  0%   { transform: scale(1.2) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 18px #00e5ff); }
  50%  { transform: scale(0.1) rotate(360deg); opacity: 0.8; filter: drop-shadow(0 0 25px #aa00ff); }
  100% { transform: scale(0) rotate(720deg); opacity: 0; }
}

@keyframes spatialRiftErupt {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  40%  { transform: scale(1.3) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 25px #00e5ff); }
  75%  { transform: scale(1.05) rotate(90deg); opacity: 0.85; }
  100% { transform: scale(1.4) rotate(180deg); opacity: 0; }
}

/* --- Repli Tactique (Archer Escape) --- */
@keyframes tacticalDashStreak {
  0%   { translate: 0 0; opacity: 0.9; scale: 0.8; }
  50%  { scale: 1.15; filter: drop-shadow(0 0 14px #00e5ff); }
  100% { translate: var(--dx) var(--dy); opacity: 1; scale: 1; }
}

@keyframes tacticalLandingGust {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  40%  { transform: scale(1.2) rotate(120deg); opacity: 1; filter: drop-shadow(0 0 12px #a7ffeb); }
  100% { transform: scale(1.4) rotate(240deg); opacity: 0; }
}

/* --- Passage Spectral (Nécromancien Step) --- */
@keyframes shadowPuddleSink {
  0%   { transform: scale(1.1); opacity: 1; }
  60%  { transform: scale(0.3); opacity: 0.7; filter: drop-shadow(0 0 16px #aa00ff); }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes shadowWellRise {
  0%   { transform: scale(0.2) translateY(20px); opacity: 0; }
  45%  { transform: scale(1.25) translateY(-5px); opacity: 1; filter: drop-shadow(0 0 22px #e040fb); }
  75%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --- Fauchage de Tendon (Guerrier Entrave) --- */
@keyframes tendonBladeTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 14px #d32f2f); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes tendonChainsClamp {
  0%   { transform: scale(1.6) rotate(-20deg); opacity: 0; }
  35%  { transform: scale(0.95) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 16px #b71c1c); }
  70%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* --- Prison Glacée (Mage Entrave) --- */
@keyframes frostPillarFall {
  0%   { transform: translateY(-70px) scaleY(0.3); opacity: 0; }
  40%  { transform: translateY(0) scaleY(1.1); opacity: 1; filter: drop-shadow(0 0 18px #00e5ff); }
  75%  { transform: translateY(0) scaleY(1.0); opacity: 0.95; }
  100% { transform: translateY(4px) scaleY(0.9); opacity: 0; }
}

@keyframes frostMistFreeze {
  0%   { transform: scale(0.3); opacity: 0; }
  35%  { transform: scale(1.2); opacity: 0.9; filter: drop-shadow(0 0 14px #80deea); }
  75%  { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --- Flèche Harpon (Archer Entrave) --- */
@keyframes harpoonArrowTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  20%  { opacity: 1; scale: 1.15; filter: drop-shadow(0 0 12px #cfd8dc); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.35; }
}

@keyframes harpoonAnchorSlam {
  0%   { transform: translateY(-50px) scale(0.5); opacity: 0; }
  35%  { transform: translateY(0) scale(1.2); opacity: 1; filter: drop-shadow(0 0 18px #ffb300); }
  65%  { transform: translateY(2px) scale(1.0); opacity: 0.95; }
  100% { transform: translateY(0) scale(1.1); opacity: 0; }
}

/* --- Sarcophage Osseux (Nécromancien Entrave) --- */
@keyframes boneSarcophagusLeft {
  0%   { transform: translateX(-40px) scaleX(0.4); opacity: 0; }
  40%  { transform: translateX(0) scaleX(1.1); opacity: 1; filter: drop-shadow(0 0 18px #ba68c8); }
  70%  { transform: translateX(0) scaleX(1.0); opacity: 0.95; }
  100% { transform: translateX(4px) scaleX(0.9); opacity: 0; }
}

@keyframes boneSarcophagusRight {
  0%   { transform: translateX(40px) scaleX(0.4); opacity: 0; }
  40%  { transform: translateX(0) scaleX(1.1); opacity: 1; filter: drop-shadow(0 0 18px #ba68c8); }
  70%  { transform: translateX(0) scaleX(1.0); opacity: 0.95; }
  100% { transform: translateX(-4px) scaleX(0.9); opacity: 0; }
}

/* =======================================================
   ANIMATIONS DÉDIÉES DES SORTS DE MONSTRES ET BOSS
   ======================================================= */

/* --- Horlogerie & Comte Heure (Gear spin & Dial ripple) --- */
@keyframes clockworkGearSpin {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 16px #ffd700); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 720deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; rotate: 900deg; }
}

@keyframes clockworkTimeRipple {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.2) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 20px #ffd700); }
  70%  { transform: scale(1.05) rotate(180deg); opacity: 0.85; }
  100% { transform: scale(1.35) rotate(270deg); opacity: 0; }
}

/* --- Tempête & Foudre (Lightning bolt & Plasma burst) --- */
@keyframes stormLightningZigzag {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  20%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 20px #00e5ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.45; filter: drop-shadow(0 0 30px #ffffff); }
}

@keyframes lightningImpactBurst {
  0%   { transform: scale(0.3); opacity: 0; filter: brightness(3); }
  30%  { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 24px #ffd600); }
  65%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; filter: brightness(1); }
}

/* --- Ténèbres & Spectres (Ghost skull & Shadow well) --- */
@keyframes spectralSkullTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; filter: drop-shadow(0 0 10px #aa00ff); }
  30%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 20px #e040fb); }
  85%  { translate: var(--dx) var(--dy); opacity: 0.95; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes shadowGraveErupt {
  0%   { transform: scale(0.2) translateY(30px); opacity: 0; }
  35%  { transform: scale(1.2) translateY(0); opacity: 1; filter: drop-shadow(0 0 22px #aa00ff); }
  70%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1.35) translateY(-6px); opacity: 0; }
}

/* --- Abysses & Léviathan (Ocean maw & Tidal whirlpool) --- */
@keyframes abyssalMawTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.3; filter: drop-shadow(0 0 20px #00e5ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.05; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.5; }
}

@keyframes whirlpoolVortexImpact {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 0; }
  35%  { transform: scale(1.25) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 24px #0091ea); }
  70%  { transform: scale(1.05) rotate(360deg); opacity: 0.9; }
  100% { transform: scale(1.4) rotate(540deg); opacity: 0; }
}

/* --- Fongoïde & Toxique (Spore pulse & Toxic cloud) --- */
@keyframes fungalSporePulse {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  30%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 16px #76ff03); }
  85%  { translate: var(--dx) var(--dy); opacity: 0.95; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes sporeCloudBurst {
  0%   { transform: scale(0.3); opacity: 0; }
  35%  { transform: scale(1.3); opacity: 0.95; filter: drop-shadow(0 0 20px #64dd17); }
  70%  { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* --- Défense & Grand Groin (Tusk slam & Seismic rupture) --- */
@keyframes tuskChargeSlam {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.3; filter: drop-shadow(0 0 18px #ffd700); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.05; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes grandGroinSeismicQuake {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 25px #ff9800); }
  65%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* --- Fouet Obscur & Père Fouettard (Whip crack & Ember burst) --- */
@keyframes shadowWhipCrack {
  0%   { transform: scaleX(0.2) rotate(-35deg); opacity: 0; }
  35%  { transform: scaleX(1.3) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 18px #ff1744); }
  70%  { transform: scaleX(1.05) rotate(5deg); opacity: 0.9; }
  100% { transform: scaleX(1.2) rotate(0deg); opacity: 0; }
}

@keyframes explosiveGiftDetonate {
  0%   { transform: scale(0.3); opacity: 0; }
  30%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 24px #ffd700); }
  70%  { transform: scale(1.1); opacity: 0.85; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- L'Arbre Ancestral (Racines géantes & Sève toxique) --- */
@keyframes ancestralRootsTravel {
  0%   { translate: 0 0; opacity: 0; scaleY(0.3); }
  25%  { opacity: 1; scaleY(1.2); filter: drop-shadow(0 0 16px #4caf50); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scaleY(1.0); }
  100% { translate: var(--dx) var(--dy); opacity: 0; scaleY(1.4); }
}

@keyframes ancestralThornBurst {
  0%   { transform: scale(0.2) translateY(20px); opacity: 0; }
  35%  { transform: scale(1.25) translateY(0); opacity: 1; filter: drop-shadow(0 0 22px #2e7d32); }
  70%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.4) translateY(-6px); opacity: 0; }
}

/* --- Le Titan de Brume (Éther titan & Onde de choc) --- */
@keyframes titanStormBolt {
  0%   { translate: 0 0; opacity: 0; scale: 0.4; }
  20%  { opacity: 1; scale: 1.3; filter: drop-shadow(0 0 24px #00e5ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.5; }
}

@keyframes titanThunderWrath {
  0%   { transform: scale(0.2); opacity: 0; filter: brightness(3); }
  30%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 30px #ffffff); }
  65%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; filter: brightness(1); }
}

/* --- Golem de Cristal (Prisme diamantin & Éclatement) --- */
@keyframes crystalDiamantPrism {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 20px #e040fb); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 360deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; rotate: 480deg; }
}

@keyframes crystalShatterBurst {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 24px #aa00ff); }
  65%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* --- Maître des Squelettes (Faux Spectrale & Moisson) --- */
@keyframes skeletonMasterScythe {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: -45deg; }
  25%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 20px #7c4dff); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 360deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.45; rotate: 450deg; }
}

@keyframes soulReaperErupt {
  0%   { transform: scale(0.2) translateY(20px); opacity: 0; }
  35%  { transform: scale(1.25) translateY(0); opacity: 1; filter: drop-shadow(0 0 24px #651fff); }
  70%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1.4) translateY(-8px); opacity: 0; }
}

/* --- Seigneur des Flammes (Météore Ardent & Cataclysme Lave) --- */
@keyframes seigneurMagmaMeteor {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.35; filter: drop-shadow(0 0 25px #ff3d00); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.6; }
}

@keyframes infernoCataclysmNova {
  0%   { transform: scale(0.2); opacity: 0; filter: brightness(2.5); }
  30%  { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 32px #ff1744); }
  65%  { transform: scale(1.1); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* --- Sphinx du Désert (Vortex de sable & Rafale) --- */
@keyframes sphinxSandWhirlwind {
  0%   { translate: 0 0; opacity: 0; scale: 0.4; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 18px #ffd54f); }
  80%  { translate: var(--dx) var(--dy); opacity: 1; rotate: 540deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.45; rotate: 720deg; }
}

/* --- Dragon de Givre (Souffle Zéro Absolu & Pergélisol) --- */
@keyframes frostDragonBreathBeam {
  0%   { translate: 0 0; opacity: 0; scaleX(0.2); }
  25%  { opacity: 1; scaleX(1.3); filter: drop-shadow(0 0 24px #00e5ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scaleX(1.05); }
  100% { translate: var(--dx) var(--dy); opacity: 0; scaleX(1.5); }
}

@keyframes absoluteZeroPermafrost {
  0%   { transform: scale(0.2); opacity: 0; filter: brightness(2); }
  30%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 26px #80deea); }
  65%  { transform: scale(1.1); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- Venin & Serpents (Goutte d'acide & Éclaboussure) --- */
@keyframes venomFangTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 16px #00e676); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.0; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.4; }
}

@keyframes acidSplatterBurst {
  0%   { transform: scale(0.3); opacity: 0; }
  35%  { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 20px #00c853); }
  70%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ==========================================================================
   ANIMATIONS DE TIRS & IMPACTS POUR L'ARCHER
   ========================================================================== */

/* Sceau de déclenchement au tir (départ flèche) */
.archer-bow-release-snap {
  position: absolute;
  pointer-events: none;
  z-index: 2240;
}

/* Particules de traînée élémentaire */
.archer-trail-mote {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 2190;
  animation: archerTrailMoteFade 240ms ease-out forwards;
}

@keyframes archerTrailMoteFade {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* Onde de recul cinétique (Flèche Répulsive) */
@keyframes archerRepulsiveShockwave {
  0% {
    transform: scale(0.3) rotate(var(--angle, 0deg));
    opacity: 1;
    filter: drop-shadow(0 0 14px #00E5FF);
  }
  60% {
    transform: scale(1.6) rotate(var(--angle, 0deg));
    opacity: 0.8;
  }
  100% {
    transform: scale(2.4) rotate(var(--angle, 0deg));
    opacity: 0;
  }
}

/* ==========================================================================
   ANIMATIONS DE LANCER DE PLUME (CORBEAU)
   ========================================================================== */

/* Souffle au départ du lancer de plume */
.feather-launch-gust {
  position: absolute;
  pointer-events: none;
  z-index: 2240;
}

/* Particules de duvet et traînée d'air en vol */
.feather-trail-wisp {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 2190;
  animation: featherTrailWispFade 240ms ease-out forwards;
}

@keyframes featherTrailWispFade {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* Projectile physique de plume en vol */
.feather-projectile {
  pointer-events: none;
  z-index: 2200;
  will-change: transform;
}

/* Plume fichée dans la cible avec vibration élastique */
.feather-stuck-projectile {
  pointer-events: none;
  z-index: 2200;
}

/* Onde d'impact d'air au point d'impact de la plume */
.feather-impact-ring {
  position: absolute;
  pointer-events: none;
  z-index: 2205;
}

/* ==========================================================================
   ANIMATIONS DÉDIÉES PAR CLASSE (GUERRIER, MAGE, NÉCROMANCIEN)
   ========================================================================== */

/* --- Guerrier : Lame et Vague d Eau --- */
@keyframes warriorWaterWaveTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.6; }
  20%  { opacity: 1; scale: 1.1; filter: drop-shadow(0 0 16px #00e5ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.25; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.5; }
}

@keyframes warriorWaterWaveImpact {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 1; }
  45%  { transform: scale(1.4) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 22px #00e5ff); }
  100% { transform: scale(1.8) rotate(30deg); opacity: 0; }
}

/* --- Guerrier : Lame et Cercle de Feu --- */
@keyframes warriorFireCrescentTravel {
  0%   { translate: 0 0; opacity: 0.3; scale: 0.6; rotate: 0deg; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 18px #ff3d00); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.35; rotate: 360deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.6; rotate: 450deg; }
}

@keyframes warriorFireRingExpand {
  0%   { transform: scale(0.2) rotate(0deg); opacity: 1; border-width: 8px; }
  50%  { transform: scale(1.3) rotate(180deg); opacity: 0.95; filter: drop-shadow(0 0 26px #ff3d00); border-width: 4px; }
  100% { transform: scale(1.9) rotate(360deg); opacity: 0; border-width: 1px; }
}

@keyframes warriorFireSlashImpact {
  0%   { transform: scale(0.4) rotate(-30deg); opacity: 1; filter: brightness(2.5); }
  45%  { transform: scale(1.3) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 24px #ff3d00); }
  100% { transform: scale(1.6) rotate(30deg); opacity: 0; }
}

/* --- Guerrier : Vent et Tornades --- */
@keyframes warriorWindCyclone {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: 0deg; }
  20%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 16px #00e676); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.3; rotate: 720deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.6; rotate: 900deg; }
}

@keyframes warriorWindImpact {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 1; }
  40%  { transform: scale(1.35) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 20px #00e676); }
  100% { transform: scale(1.7) rotate(90deg); opacity: 0; }
}

/* --- Mage : Roc Écraseur & Gravité --- */
@keyframes mageBoulderTravel {
  0%   { translate: 0 0; opacity: 0.7; scale: 0.6; rotate: 0deg; }
  30%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 14px #8d6e63); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.3; rotate: 540deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.5; rotate: 720deg; }
}

@keyframes mageBoulderSmash {
  0%   { transform: scale(0.4); opacity: 1; filter: brightness(2.0); }
  40%  { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 20px #8d6e63); }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes mageGravitySingularity {
  0%   { transform: scale(1.6) rotate(0deg); opacity: 0.4; }
  50%  { transform: scale(0.7) rotate(360deg); opacity: 1; filter: drop-shadow(0 0 22px #4e342e); }
  80%  { transform: scale(1.2) rotate(540deg); opacity: 0.9; }
  100% { transform: scale(1.5) rotate(720deg); opacity: 0; }
}

/* --- Mage : Jet d Eau & Geyser Majeur --- */
@keyframes mageWaterBeamSurge {
  0%   { opacity: 0; transform: scaleY(0.3); }
  25%  { opacity: 1; transform: scaleY(1.3); filter: drop-shadow(0 0 18px #00e5ff); }
  75%  { opacity: 0.9; transform: scaleY(1.0); }
  100% { opacity: 0; transform: scaleY(0.4); }
}

@keyframes mageGeyserEruption {
  0%   { transform: scaleY(0.1) translateY(40px); opacity: 0; }
  35%  { transform: scaleY(1.3) translateY(-10px); opacity: 1; filter: drop-shadow(0 0 25px #00e5ff); }
  70%  { transform: scaleY(1.0) translateY(0); opacity: 0.85; }
  100% { transform: scaleY(0.6) translateY(20px); opacity: 0; }
}

/* --- Mage : Flamme Étouffante & Nova --- */
@keyframes mageSuffocatingFlame {
  0%   { transform: scale(1.5); opacity: 0.3; }
  50%  { transform: scale(0.6); opacity: 1; filter: drop-shadow(0 0 20px #ff3d00); }
  75%  { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes mageNovaExpand {
  0%   { transform: scale(0.2); opacity: 1; filter: brightness(3.0); }
  50%  { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 30px #ff6d00); }
  100% { transform: scale(2.0); opacity: 0; filter: brightness(0.6); }
}

/* --- Nécromancien : Ossements & Poing Fossoyeur --- */
@keyframes necroBoneFistTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; }
  25%  { opacity: 1; scale: 1.25; filter: drop-shadow(0 0 18px #ede7f6); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.35; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.6; }
}

@keyframes necroBoneSpikeCluster {
  0%   { transform: scaleY(0.1) translateY(30px); opacity: 0; }
  35%  { transform: scaleY(1.3) translateY(-8px); opacity: 1; filter: drop-shadow(0 0 20px #ba68c8); }
  70%  { transform: scaleY(1.0) translateY(0); opacity: 0.9; }
  100% { transform: scaleY(0.5) translateY(15px); opacity: 0; }
}

/* --- Nécromancien : Siphon Sanguin & Âmes --- */
@keyframes necroSoulStream {
  0%   { translate: var(--dx) var(--dy); opacity: 0; scale: 0.6; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 16px #e91e63); }
  80%  { translate: calc(var(--dx) * 0.2) calc(var(--dy) * 0.2); opacity: 0.9; scale: 1.0; }
  100% { translate: 0 0; opacity: 0; scale: 0.4; }
}

@keyframes necroCorpseDetonation {
  0%   { transform: scale(0.3); opacity: 1; filter: brightness(2.5); }
  45%  { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 24px #d32f2f); }
  100% { transform: scale(1.8); opacity: 0; }
}

/* --- Nécromancien : Crâne d Ombre & Sceau d Hex --- */
@keyframes necroShadowSkullTravel {
  0%   { translate: 0 0; opacity: 0; scale: 0.5; rotate: -15deg; }
  25%  { opacity: 1; scale: 1.2; filter: drop-shadow(0 0 18px #aa00ff); }
  85%  { translate: var(--dx) var(--dy); opacity: 1; scale: 1.3; rotate: 15deg; }
  100% { translate: var(--dx) var(--dy); opacity: 0; scale: 1.6; rotate: 30deg; }
}

@keyframes necroHexBrand {
  0%   { transform: scale(1.6) rotate(0deg); opacity: 0.2; }
  40%  { transform: scale(1.0) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 22px #e040fb); }
  80%  { transform: scale(1.05) rotate(270deg); opacity: 0.85; }
  100% { transform: scale(1.3) rotate(360deg); opacity: 0; }
}
/* --- END combat/board.css --- */

/* --- BEGIN map/tiles.css --- */
/* =========================
   TILES / CARTE STYLES (TACTICAL RPG)
   ========================= */

#mapContainer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 10%, rgba(255, 245, 210, 0.4), transparent 70%);
  mix-blend-mode: overlay;
  z-index: 10;
}

#mapContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 40%, rgba(15, 20, 30, 0.6) 100%);
  z-index: 11;
}

#mapContainer.isometric-mode::before,
#mapContainer.isometric-mode::after {
  display: none;
}

.tile {
  position: absolute !important;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  filter: brightness(var(--b, 1)) saturate(var(--s, 1));

  border-bottom: 4px solid rgba(0, 0, 0, 0.3);
  border-right: 3px solid rgba(0, 0, 0, 0.2);

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.25),
    inset -1px -2px 3px rgba(0, 0, 0, 0.2),
    1px 3px 5px rgba(0, 0, 0, 0.35);
  transform-style: preserve-3d;
}

.tile::before,
.tile::after,
.wall::before,
.wall::after,
.tree::before,
.tree::after,
.water::before,
.water::after {
  pointer-events: none !important;
}

/* =========================
   BIOMES - SOLS (GROUND)
   ========================= */

/* Plaine / Herbe classique */
.ground {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    linear-gradient(135deg, #7ebd42 0%, #5ca12b 100%);
  border-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: #3f731a;
  border-right-color: #4a871f;
}

/* Biome désert */
.biome-desert .ground,
.biome-donjon_desert .ground,
.biome-boss_desert .ground {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, transparent 2px, transparent 6px),
    linear-gradient(135deg, #fce093 0%, #e8bc51 100%);
  border-color: rgba(100, 75, 25, 0.2);
  border-bottom-color: #b58c30;
  border-right-color: #c99c38;
}

/* Biome mer */
.biome-mer .ground,
.biome-donjon_mer .ground,
.biome-boss_mer .ground {
  background: linear-gradient(135deg, #fff0b3 0%, #e6cb73 100%) !important;
  border-color: rgba(100, 80, 40, 0.2) !important;
  border-bottom-color: #b39a49 !important;
  border-right-color: #ccb154 !important;
}

/* Biome neige / noel */
.biome-noel .ground,
.biome-donjon_noel .ground,
.biome-boss_noel .ground,
.biome-neige .ground,
.biome-donjon_neige .ground,
.biome-boss_neige .ground {
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0%, #e6f0fa 100%) !important;
  border-color: rgba(180, 200, 220, 0.3) !important;
  border-bottom-color: #aebfd1 !important;
  border-right-color: #c0d1e3 !important;
}

/* Biome forêt */
.biome-foret .ground,
.biome-donjon_foret .ground,
.biome-boss_foret .ground {
  background: linear-gradient(135deg, #3a6b28 0%, #204513 100%);
  border-color: #172a11;
  border-bottom-color: #122909;
  border-right-color: #16330b;
}

/* Biome dinosaures */
.biome-dinosaures .ground,
.biome-donjon_dinosaures .ground,
.biome-boss_dinosaures .ground {
  background:
    radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 30%),
    linear-gradient(135deg, #1e3f20 0%, #0e1e10 100%) !important;
  border-color: #0b1a0d !important;
  border-bottom-color: #061007 !important;
  border-right-color: #081409 !important;
}

/* Biome minotor */
.biome-minotor .ground,
.biome-donjon_minotor .ground,
.biome-boss_minotor .ground {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.15), transparent 60%),
    linear-gradient(135deg, #4d3a2d 0%, #1f1610 100%) !important;
  border-color: #1f1610 !important;
  border-bottom-color: #150e0a !important;
  border-right-color: #100a07 !important;
}

/* Biome cimetière */
.biome-cimetiere .ground,
.biome-donjon_cimetiere .ground,
.biome-boss_cimetiere .ground {
  background:
    radial-gradient(circle at 10% 20%, rgba(155, 89, 182, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #1a171d 0%, #141115 100%) !important;
  border-color: #0d0c0e !important;
  border-bottom-color: #070607 !important;
  border-right-color: #09080a !important;
}

/* Biome montagne */
.biome-montagne .ground,
.biome-donjon_montagne .ground,
.biome-boss_montagne .ground {
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.15), transparent 45%),
    linear-gradient(135deg, #bdc3c7 0%, #7f8c8d 100%) !important;
  border-color: #7f8c8d !important;
  border-bottom-color: #5c6266 !important;
  border-right-color: #4a4f52 !important;
}

/* Biome volcan */
[class*="biome-volcan"] .ground {
  background:
    radial-gradient(circle at 70% 30%, rgba(231, 76, 60, 0.3) 0%, transparent 40%),
    linear-gradient(135deg, #2c1111 0%, #0a0a0a 100%);
  border-color: rgba(231, 76, 60, 0.2);
  border-bottom-color: #1a0808;
  border-right-color: #200a0a;
}

/* Biome céleste */
[class*="biome-celeste"] .ground {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
    linear-gradient(135deg, #ffffff 0%, #dfe4ea 100%) !important;
  border-color: rgba(220, 220, 220, 0.4) !important;
  border-bottom-color: #a4b0be !important;
  border-right-color: #ced6e0 !important;
}

/* =========================
   ELEMENTS COMMUNS (MURS, EAU, ARBRES)
   ========================= */

/* Murs par défaut */
.wall {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%),
    #828f99;
  border-bottom: 5px solid #4a545c !important;
  border-right: 4px solid #5a6670 !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -2px 0 rgba(0, 0, 0, 0.2),
    2px 4px 6px rgba(0, 0, 0, 0.4) !important;
  border-radius: 2px;
}

/* Eau par défaut */
.water {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
    linear-gradient(180deg, #3498db, #2980b9);
  border-bottom: 3px solid #1a5276 !important;
  border-right: 3px solid #21618c;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  animation: waterBreeze 3s ease-in-out infinite alternate;
}

@keyframes waterBreeze {
  0% {
    filter: brightness(1) contrast(1);
  }

  100% {
    filter: brightness(1.1) contrast(1.05);
  }
}

/* Nenuphars decoratifs pour les cases de peche */
.water {
  position: relative;
  overflow: hidden;
}

.water-bubble {
  position: absolute;
  width: 12px;
  height: 8px;
  background: radial-gradient(ellipse at 35% 30%, #a8d85c 0%, #508b32 55%, #254d20 100%);
  border: 1px solid rgba(28, 70, 30, 0.75);
  border-radius: 50% 50% 45% 45%;
  box-shadow: inset 1px 1px 1px rgba(220, 245, 144, 0.5), 0 1px 2px rgba(0, 40, 70, 0.35);
  pointer-events: none;
  z-index: 1;
  transform: rotate(-12deg);
}

.water-bubble::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 4px;
  height: 4px;
  background: #e9d56c;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(88, 89, 33, 0.5);
}


/* Arbres par défaut */
.tree {
  background: radial-gradient(circle at 30% 30%, #a4e067 0%, #5ca12b 50%, #2b5c10 100%);
  border-radius: 50% 50% 40% 40%;
  border-bottom: 5px solid #1c3d0b !important;
  border-right: 3px solid #244f0e !important;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
    0 6px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Biome forêt (Oak with brown trunk) */
.biome-foret .tree,
.biome-donjon_foret .tree,
.biome-boss_foret .tree {
  background: radial-gradient(circle at 35% 35%, #2ecc71 0%, #27ae60 60%, #153c11 100%) !important;
  border-radius: 50% 50% 45% 45% !important;
  border-bottom: 5px solid #196f3d !important;
  border-right: 3px solid #229954 !important;
  height: 26px !important;
  margin-top: 1px;
}
.biome-foret .tree::before,
.biome-donjon_foret .tree::before,
.biome-boss_foret .tree::before {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 13px !important;
  width: 6px !important;
  height: 8px !important;
  background: #7e5109 !important;
  border-radius: 1px !important;
  z-index: -1 !important;
}

/* Biome jungle (Bamboo) */
.biome-jungle .tree,
.biome-donjon_jungle .tree,
.biome-boss_jungle .tree {
  background: repeating-linear-gradient(180deg, #2ecc71 0px, #2ecc71 6px, #27ae60 6px, #27ae60 8px) !important;
  border-radius: 4px !important;
  border-bottom: 4px solid #1e824c !important;
  border-right: 2px solid #2ecc71 !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}
.biome-jungle .tree::before,
.biome-donjon_jungle .tree::before,
.biome-boss_jungle .tree::before {
  content: "" !important;
  position: absolute !important;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateX(-50%);
}

/* Biome désert (Cactus) */
.biome-desert .tree,
.biome-donjon_desert .tree,
.biome-boss_desert .tree {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 50%, #1e824c 100%) !important;
  clip-path: polygon(35% 100%, 35% 65%, 10% 65%, 10% 25%, 25% 25%, 25% 50%, 35% 50%, 35% 15%, 50% 5%, 65% 15%, 65% 45%, 75% 45%, 75% 20%, 90% 20%, 90% 60%, 65% 60%, 65% 100%) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Biome mer (Driftwood) */
.biome-mer .tree,
.biome-donjon_mer .tree,
.biome-boss_mer .tree {
  background: linear-gradient(180deg, #d2b48c 0%, #a67c52 50%, #704d2e 100%) !important;
  border-radius: 4px 12px 10px 4px !important;
  border-bottom: 4px solid #4a2c17 !important;
  border-right: 3px solid #5c381f !important;
  width: 28px !important;
  height: 14px !important;
  margin-top: 10px;
  margin-left: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Biome neige (Frozen Pine) */
.biome-neige .tree,
.biome-donjon_neige .tree,
.biome-boss_neige .tree {
  background: linear-gradient(135deg, #16a085 0%, #0e6251 100%) !important;
  clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4) !important;
}
.biome-neige .tree::after,
.biome-donjon_neige .tree::after,
.biome-boss_neige .tree::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 25% !important;
  right: 25% !important;
  height: 40% !important;
  background: #ffffff !important;
  clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
}

/* =========================
   DECLINAISONS MURS, EAU, ARBRES (PAR BIOME)
   ========================= */

.biome-mer .wall,
.biome-donjon_mer .wall,
.biome-boss_mer .wall {
  background: #5c6266 !important;
  border-bottom-color: #2d3133 !important;
  border-right-color: #35393c !important;
}

.biome-mer .water,
.biome-donjon_mer .water,
.biome-boss_mer .water {
  background: linear-gradient(180deg, #00cec9, #0984e3) !important;
  border-bottom-color: #0652dd !important;
}

.biome-noel .wall,
.biome-donjon_noel .wall,
.biome-boss_noel .wall {
  background: repeating-linear-gradient(45deg, #ff4757 0px, #ff4757 8px, #ffffff 8px, #ffffff 16px) !important;
  border-bottom-color: #cf2534 !important;
  border-right-color: #e83a4b !important;
}

.biome-noel .tree,
.biome-donjon_noel .tree,
.biome-boss_noel .tree {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #2ed573 55%, #0c2461 100%) !important;
  border-bottom-color: #081a44 !important;
  border-right-color: #091e4d !important;
}

.biome-noel .water,
.biome-donjon_noel .water,
.biome-boss_noel .water {
  background: linear-gradient(135deg, #74b9ff, #0984e3) !important;
  border-bottom-color: #0984e3 !important;
}

.biome-dinosaures .wall,
.biome-donjon_dinosaures .wall,
.biome-boss_dinosaures .wall {
  background: linear-gradient(135deg, #34495e 0%, #1a252f 100%) !important;
  border-bottom: 4px solid #0f171e !important;
  border-right: 3px solid #141e28 !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset -1px -2px 0 rgba(0, 0, 0, 0.3), 2px 4px 6px rgba(0, 0, 0, 0.4) !important;
  border-radius: 3px !important;
}

.biome-dinosaures .tree,
.biome-donjon_dinosaures .tree,
.biome-boss_dinosaures .tree {
  background: linear-gradient(135deg, #10ac84 0%, #06523f 100%) !important;
  border-radius: 100% 0 100% 0 !important;
  transform: rotate(-45deg);
  border: 2px solid #000 !important;
  border-bottom: 4px solid #063c2e !important;
  border-right: 3px solid #084c3c !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}

.biome-dinosaures .water,
.biome-donjon_dinosaures .water,
.biome-boss_dinosaures .water {
  background: linear-gradient(180deg, #1f2d1b, #0a1009) !important;
  border-bottom-color: #030503 !important;
  border-right-color: #030503 !important;
}

.biome-minotor .wall,
.biome-donjon_minotor .wall,
.biome-boss_minotor .wall {
  background: linear-gradient(180deg, #444b54, #15181b) !important;
  border-bottom-color: #111315 !important;
  border-right-color: #1c2024 !important;
}

.biome-minotor .tree,
.biome-donjon_minotor .tree,
.biome-boss_minotor .tree {
  background: radial-gradient(circle at 35% 35%, #2d1f3d 0%, #172b1a 60%, #0d120e 100%) !important;
  border-bottom-color: #060a07 !important;
  border-right-color: #080d09 !important;
}

.biome-minotor .water,
.biome-donjon_minotor .water,
.biome-boss_minotor .water {
  background: linear-gradient(180deg, #3d2314, #140b06) !important;
  border-bottom-color: #060302 !important;
  border-right-color: #080403 !important;
}

.biome-cimetiere .wall,
.biome-donjon_cimetiere .wall,
.biome-boss_cimetiere .wall {
  background: linear-gradient(180deg, #7f8c8d 0%, #2c3e50 100%) !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom-color: #1a252f !important;
  border-right-color: #25313d !important;
}

.biome-cimetiere .tree,
.biome-donjon_cimetiere .tree,
.biome-boss_cimetiere .tree {
  background: linear-gradient(135deg, #120917 0%, #09040c 100%) !important;
  border-radius: 50% 50% 10% 10% / 70% 70% 30% 30% !important;
  border-bottom-color: #040206 !important;
  border-right-color: #060308 !important;
}

.biome-cimetiere .water,
.biome-donjon_cimetiere .water,
.biome-boss_cimetiere .water {
  background: linear-gradient(180deg, #4b1a4b, #120512) !important;
  border-bottom-color: #060206 !important;
  border-right-color: #090309 !important;
}

.biome-montagne .wall,
.biome-donjon_montagne .wall,
.biome-boss_montagne .wall {
  background: repeating-linear-gradient(0deg, #2c3e50 0px, #2c3e50 6px, #1a252f 6px, #1a252f 12px) !important;
  border-bottom-color: #0e141a !important;
  border-right-color: #151e26 !important;
}

.biome-montagne .tree,
.biome-donjon_montagne .tree,
.biome-boss_montagne .tree {
  background: radial-gradient(circle at 30% 30%, #ffbe76 0%, #ff7f50 40%, #ff4757 100%) !important;
  border-radius: 50% 20% 50% 20% / 50% 20% 50% 20% !important; /* Pointy autumn leaf shape */
  border-bottom: 4px solid #b33939 !important;
  border-right: 3px solid #cd6133 !important;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.45) !important;
}

.biome-montagne .water,
.biome-donjon_montagne .water,
.biome-boss_montagne .water {
  background: linear-gradient(180deg, #10ac84, #06523f) !important;
  border-bottom-color: #02291f !important;
  border-right-color: #033025 !important;
}

[class*="biome-volcan"] .wall {
  background: repeating-linear-gradient(45deg, #e74c3c 0px, #2c0e0e 8px, #1c0505 16px) !important;
  border-bottom-color: #78281f !important;
  border-right-color: #943126 !important;
}

[class*="biome-volcan"] .tree {
  background: linear-gradient(135deg, #111 0%, #222 50%, #000 100%) !important;
  border-radius: 35% 35% 10% 10% !important;
  border-bottom: 5px solid #ff4500 !important;
  border-right: 3px solid #b32d00 !important;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.4) !important;
}
/* Volcan Ebony tree glowing core animation */
[class*="biome-volcan"] .tree::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  left: 14px !important;
  width: 3px !important;
  background: linear-gradient(180deg, #ff4500, #ff8c00, #ff4500) !important;
  box-shadow: 0 0 4px #ff4500 !important;
  animation: lavaPulse 1.5s infinite alternate !important;
}
@keyframes lavaPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

[class*="biome-volcan"] .water {
  background: linear-gradient(180deg, #ff4d4d, #990000) !important;
  border-bottom-color: #800000 !important;
  border-right-color: #660000 !important;
  animation: lavaFlow 3s ease-in-out infinite alternate !important;
}

@keyframes lavaFlow {
  0% {
    filter: brightness(1) contrast(1.1);
  }

  100% {
    filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 4px #ff6633);
  }
}

[class*="biome-celeste"] .wall {
  background: repeating-linear-gradient(0deg, #f1c40f 0px, #ffffff 6px, #f5f6fa 12px) !important;
  border-bottom-color: #d4ac0d !important;
  border-right-color: #b7950b !important;
}

[class*="biome-celeste"] .tree {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dcdde1 80%, #7f8c8d 100%) !important;
  border-bottom-color: #7f8c8d !important;
  border-right-color: #dcdde1 !important;
  border-radius: 50% 50% 45% 45% !important;
}

[class*="biome-celeste"] .water {
  background: linear-gradient(180deg, #a5b1c2, #4b6584) !important;
  border-bottom-color: #2b3b4e !important;
  border-right-color: #374b62 !important;
}

/* =========================
   DETAILS & DECORATIONS
   ========================= */

.pontoon {
  background: linear-gradient(135deg, #a66e44 0%, #7d4e2d 100%) !important;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 6px, rgba(0, 0, 0, 0.2) 6px, rgba(0, 0, 0, 0.2) 7px) !important;
  border-bottom: 4px solid #4a2c17 !important;
  border-right: 3px solid #5c381f !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2), 1px 3px 5px rgba(0, 0, 0, 0.4) !important;
  border-radius: 2px;
  z-index: 2;
}

.beach {
  background: linear-gradient(135deg, #f5e6b3 0%, #d8c585 100%) !important;
  border-bottom-color: #9c8e5e !important;
  border-right-color: #84774c !important;
}

.boat-travel {
  background: linear-gradient(135deg, #d19a66 0%, #a66e44 100%) !important;
  border-bottom: 4px solid #5c381f !important;
  border-right: 3px solid #6b4327 !important;
  border-radius: 8px 8px 20px 20px !important;
  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.boat-travel::after {
  content: "⛵";
  font-size: 16px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
  animation: boatBobbing 2s infinite ease-in-out !important;
}

@keyframes boatBobbing {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-3px) rotate(3deg);
  }
}

.boat-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #b8860b 0%, #996515 100%);
  border: 1px solid #d8b46a;
  color: #efe6d2;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 6px;
  padding: 1px 3px;
  border-radius: 3px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* =========================
   ETATS SPECIFIQUES
   ========================= */

.tile.far {
  filter: blur(0.7px) brightness(0.85);
  transform: scale(0.97);
}

.tile.near {
  filter: brightness(1.08);
}

.tile[data-pastille] {
  background: radial-gradient(circle, #ff5252 0%, #b30000 100%) !important;
  border-bottom: 4px solid #7a0000 !important;
  border-right: 3px solid #990000 !important;
  box-shadow:
    0 0 15px rgba(255, 82, 82, 0.8),
    inset 1px 1px 4px rgba(255, 255, 255, 0.4) !important;
}

/* =========================
   PORTAILS ET TRANSITIONS
   ========================= */

/* Sorties de carte */
.tile.map-exit {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.8)) !important;
  border-bottom: 4px solid #cc7000 !important;
  border-right: 3px solid #e67e00 !important;
  box-shadow:
    0 0 15px rgba(255, 165, 0, 0.6),
    inset 1px 1px 6px rgba(255, 255, 255, 0.6) !important;
  animation: mapExitBreathe 2s ease-in-out infinite;
}

@keyframes mapExitBreathe {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(255, 200, 0, 0.8), inset 0 0 10px #fff !important;
  }
}

/* Entrée de donjon (Grottes adaptées aux biomes) */
.tile.dungeon-entrance {
  position: absolute !important;
  background: var(--cave-rock-color, #4a4a4a) !important;
  border-radius: 50% 50% 6px 6px !important;
  border: 2px solid var(--cave-edge-color, #333) !important;
  border-bottom: 5px solid var(--cave-bottom-color, #222) !important;
  border-right: 4px solid var(--cave-right-color, #2b2b2b) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 0 10px var(--cave-glow-color, rgba(255, 255, 255, 0.1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  animation: cavePulse 2.5s ease-in-out infinite alternate !important;
}

.tile.dungeon-entrance::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 0 !important;
  background: #000000 !important;
  border-radius: 50% 50% 4px 4px !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 6px var(--cave-glow-color, rgba(255, 255, 255, 0.3)) !important;
  z-index: 1 !important;
}

@keyframes cavePulse {
  0% {
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.4),
      0 0 6px var(--cave-glow-color, rgba(255, 255, 255, 0.2)) !important;
  }
  100% {
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.4),
      0 0 16px var(--cave-glow-color, rgba(255, 255, 255, 0.6)) !important;
  }
}

/* Variables de Grottes par Biome */

/* Plaine */
.biome-plaine, .biome-donjon_plaine, .biome-boss_plaine {
  --cave-rock-color: #5ca12b;
  --cave-edge-color: #3f731a;
  --cave-bottom-color: #2b5310;
  --cave-right-color: #356515;
  --cave-glow-color: rgba(126, 189, 66, 0.7);
}

/* Forêt / Jungle / Dinosaures */
.biome-foret, .biome-donjon_foret, .biome-boss_foret,
.biome-jungle, .biome-donjon_jungle, .biome-boss_jungle,
.biome-dinosaures, .biome-donjon_dinosaures, .biome-boss_dinosaures {
  --cave-rock-color: #27461f;
  --cave-edge-color: #1c3316;
  --cave-bottom-color: #12230e;
  --cave-right-color: #162a12;
  --cave-glow-color: rgba(46, 139, 87, 0.85);
}

/* Désert */
.biome-desert, .biome-donjon_desert, .biome-boss_desert {
  --cave-rock-color: #e8bc51;
  --cave-edge-color: #b58c30;
  --cave-bottom-color: #82621c;
  --cave-right-color: #9a7524;
  --cave-glow-color: rgba(232, 188, 81, 0.85);
}

/* Neige / Noël */
.biome-neige, .biome-donjon_neige, .biome-boss_neige,
.biome-noel, .biome-donjon_noel, .biome-boss_noel {
  --cave-rock-color: #d8ebf7;
  --cave-edge-color: #aebfd1;
  --cave-bottom-color: #7d93a8;
  --cave-right-color: #94abbf;
  --cave-glow-color: rgba(0, 180, 216, 0.85);
}

/* Montagne */
.biome-montagne, .biome-donjon_montagne, .biome-boss_montagne {
  --cave-rock-color: #7f8c8d;
  --cave-edge-color: #5c6266;
  --cave-bottom-color: #3a3e40;
  --cave-right-color: #4a4f52;
  --cave-glow-color: rgba(149, 165, 166, 0.7);
}

/* Volcan */
[class*="biome-volcan"] {
  --cave-rock-color: #2c1111;
  --cave-edge-color: #ff3300;
  --cave-bottom-color: #1a0808;
  --cave-right-color: #200a0a;
  --cave-glow-color: rgba(255, 69, 0, 0.95);
}

/* Céleste */
[class*="biome-celeste"] {
  --cave-rock-color: #dfe4ea;
  --cave-edge-color: #a4b0be;
  --cave-bottom-color: #747d8c;
  --cave-right-color: #8f9aa8;
  --cave-glow-color: rgba(0, 229, 255, 0.9);
}

/* Eveilam — Lac d'Incarnam (Nature) */
[class*="biome-eveilam"] .ground {
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, #8ec54a 0%, #6ba832 100%) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  border-bottom-color: #4d8020 !important;
  border-right-color: #5a9228 !important;
}

[class*="biome-eveilam"] .wall {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #c4b89a 0%, #9a8e7c 100%) !important;
  border-radius: 6px !important;
  border-bottom: 5px solid #7a6e5c !important;
  border-right: 4px solid #8a7e6a !important;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.3),
    2px 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[class*="biome-eveilam"] .tree {
  background: radial-gradient(circle at 30% 30%, #a4e067 0%, #5ca12b 55%, #3a7818 100%) !important;
  border-radius: 50% 45% 50% 45% !important;
  border-bottom: 5px solid #2b5c10 !important;
  border-right: 3px solid #387212 !important;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.25),
    0 5px 8px rgba(0, 0, 0, 0.35) !important;
}

[class*="biome-eveilam"] .water {
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #4db8e8 0%, #2e7ec0 60%, #1a5c96 100%) !important;
  border-bottom: 3px solid #14507a !important;
  border-right: 3px solid #1a6090 !important;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Eveilam cave variables */
[class*="biome-eveilam"] {
  --cave-rock-color: #9a8e7c;
  --cave-edge-color: #7a6e5c;
  --cave-bottom-color: #5a5040;
  --cave-right-color: #6a604c;
  --cave-glow-color: rgba(78, 184, 232, 0.8);
}

/* Cimetière */
.biome-cimetiere, .biome-donjon_cimetiere, .biome-boss_cimetiere {
  --cave-rock-color: #1a171d;
  --cave-edge-color: #4a3754;
  --cave-bottom-color: #0d0c0e;
  --cave-right-color: #121014;
  --cave-glow-color: rgba(155, 89, 182, 0.9);
}

/* Sortie de donjon */
.tile.dungeon-exit {
  background: radial-gradient(circle at 30% 30%, #ffffff 10%, #fff9c4 40%, #fbc02d 75%, #f57f17 100%) !important;
  border-radius: 50% !important;
  border-bottom: 4px solid #f57f17 !important;
  border-right: 3px solid #e65100 !important;
  box-shadow:
    1px 4px 8px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(253, 216, 53, 0.8),
    inset 1px 1px 6px rgba(255, 255, 255, 0.6) !important;
  animation: exitPulse 2s ease-in-out infinite;
}

@keyframes exitPulse {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1.1);
  }

  50% {
    transform: scale(1.05);
    filter: brightness(1.2) saturate(1.2);
  }
}

/* Badge au dessus des entrées */
.dungeon-badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 5, 25, 0.9);
  color: #ffd700;
  border: 1px solid #ba68c8;
  padding: 1px 5px;
  font-size: 8px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: bold;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow:
    0 0 8px rgba(186, 104, 200, 0.6),
    0 0 4px rgba(255, 215, 0, 0.4);
  pointer-events: none;
  letter-spacing: 0.8px;
  animation: badgeFloat 2s ease-in-out infinite;
  z-index: 100;
}

@keyframes badgeFloat {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -3px);
  }
}

/* Assombrissement ambiant des donjons */
[class^="biome-donjon_"] .tile,
[class^="biome-boss_"] .tile {
  filter: brightness(0.75) contrast(1.1) saturate(1.15);
}

/* =========================
   DETAILS DES SORTIES DE CARTE (FLECHES)
   ========================= */

.tile.map-exit::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: rgba(255, 255, 255, 0.4);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.5));
}

.tile.map-exit.exit-up {
  background: linear-gradient(180deg, #fff4b0 0%, #f1c40f 45%, #d35400 100%) !important;
}

.tile.map-exit.exit-down {
  background: linear-gradient(0deg, #fff4b0 0%, #f1c40f 45%, #d35400 100%) !important;
}

.tile.map-exit.exit-left {
  background: linear-gradient(90deg, #fff4b0 0%, #f1c40f 45%, #d35400 100%) !important;
}

.tile.map-exit.exit-right {
  background: linear-gradient(270deg, #fff4b0 0%, #f1c40f 45%, #d35400 100%) !important;
}

/* Découpe des flèches selon la direction */
.tile.map-exit.exit-up::after {
  clip-path: polygon(50% 0, 100% 72%, 68% 72%, 68% 100%, 32% 100%, 32% 72%, 0 72%);
}

.tile.map-exit.exit-down::after {
  clip-path: polygon(32% 0, 68% 0, 68% 28%, 100% 28%, 50% 100%, 0 28%, 32% 28%);
}

.tile.map-exit.exit-left::after {
  clip-path: polygon(0 50%, 72% 0, 72% 32%, 100% 32%, 100% 68%, 72% 68%, 72% 100%);
}

.tile.map-exit.exit-right::after {
  clip-path: polygon(0 32%, 28% 32%, 28% 0, 100% 50%, 28% 100%, 28% 68%, 0 68%);
}

/* Éclat spécifique pour la montagne */
.biome-montagne .tile.map-exit,
.biome-donjon_montagne .tile.map-exit,
.biome-boss_montagne .tile.map-exit {
  border-color: #fff5b2 !important;
  box-shadow:
    0 0 20px rgba(255, 230, 140, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

/* =========================
   DETAILS ET ANIMATIONS DES BIOMES
   ========================= */

/* --- BIOME NOEL --- */
.biome-noel .wall::after,
.biome-donjon_noel .wall::after,
.biome-boss_noel .wall::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #2ed573;
  border-radius: 50%;
  border: 1px solid #10ac84;
  left: 4px;
  bottom: 2px;
  box-shadow: inset 2px 0 #ffd200, inset -2px 0 #ffd200, 0 2px 4px rgba(0, 0, 0, 0.3);
}

.biome-noel .tree::after,
.biome-donjon_noel .tree::after,
.biome-boss_noel .tree::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-image:
    radial-gradient(circle, #ff4757 2px, transparent 3px),
    radial-gradient(circle, #ffa502 2px, transparent 3px),
    radial-gradient(circle, #1e90ff 2px, transparent 3px);
  background-size: 10px 10px;
  background-position: 2px 2px, 8px 6px, 5px 10px;
  animation: xmasLights 2s infinite steps(2);
}

@keyframes xmasLights {

  0%,
  100% {
    filter: hue-rotate(0deg) brightness(1.1);
  }

  50% {
    filter: hue-rotate(45deg) brightness(1.3);
  }
}

.biome-noel .water::after,
.biome-donjon_noel .water::after,
.biome-boss_noel .water::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0.3) 52%, transparent 55%);
  mix-blend-mode: overlay;
}

/* --- BIOME DINOSAURES --- */
.biome-dinosaures .wall::after,
.biome-donjon_dinosaures .wall::after,
.biome-boss_dinosaures .wall::after {
  content: none !important;
  display: none !important;
}

@keyframes alertPulse {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
    filter: brightness(1.2);
  }
}

/* --- BIOME MINOTOR --- */
.biome-minotor .tree::after,
.biome-donjon_minotor .tree::after,
.biome-boss_minotor .tree::after {
  content: "";
  position: absolute;
  inset: 3px;
  background-image: radial-gradient(circle, #ff5e57 1px, transparent 1.5px);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: 0.5;
}

/* --- BIOME CIMETIERE --- */
.biome-cimetiere .ground::after,
.biome-donjon_cimetiere .ground::after,
.biome-boss_cimetiere .ground::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.04) 1px, transparent 2px);
  opacity: 0.2;
}

.biome-cimetiere .wall::before,
.biome-donjon_cimetiere .wall::before,
.biome-boss_cimetiere .wall::before {
  content: "R.I.P.";
  position: absolute;
  font-size: 6px;
  color: #1a252f;
  font-weight: bold;
  width: 100%;
  text-align: center;
  top: 25%;
  left: 0;
}

.biome-cimetiere .wall::after,
.biome-donjon_cimetiere .wall::after,
.biome-boss_cimetiere .wall::after {
  content: "†";
  position: absolute;
  font-size: 10px;
  font-weight: bold;
  color: #1a252f;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
}

.biome-cimetiere .tree::before,
.biome-donjon_cimetiere .tree::before,
.biome-boss_cimetiere .tree::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 10%;
  right: 10%;
  height: 6px;
  background: linear-gradient(90deg, transparent 20%, #120917 20%, #120917 40%, transparent 40%, transparent 60%, #120917 60%, #120917 80%, transparent 80%);
}

.biome-cimetiere .tree::after,
.biome-donjon_cimetiere .tree::after,
.biome-boss_cimetiere .tree::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ff5722;
  border-radius: 50%;
  left: 35%;
  top: 45%;
  box-shadow: 0 0 3px #ff5722, 8px 0 0 #ff5722, 8px 0 3px #ff5722;
  /* Yeux brillants */
  animation: scaryGaze 2.5s infinite ease-in-out;
}

@keyframes scaryGaze {

  0%,
  40%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }

  45%,
  95% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* =========================
   CORRECTION DE POSITIONNEMENT (BADGES)
   ========================= */

.tile.dungeon-entrance {
}

/* --- BIOME DINOSAURES (Détail texture du sol) --- */
.biome-dinosaures .ground::after,
.biome-donjon_dinosaures .ground::after,
.biome-boss_dinosaures .ground::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.15) 2px, transparent 3px);
  opacity: 0.4;
}

/* =========================
   VILLAGE BUILDINGS (BIOME PLAINE)
   ========================= */

.biome-plaine .house-roof {
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%) !important;
  border-bottom: 5px solid #78281f !important;
  border-right: 4px solid #943126 !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset -1px -2px 0 rgba(0, 0, 0, 0.2),
    2px 4px 6px rgba(0, 0, 0, 0.4) !important;
}

.biome-plaine .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 2px, transparent 2px, transparent 8px);
  opacity: 0.8;
}

.biome-plaine .house-wall {
  background: linear-gradient(135deg, #a06b3e 0%, #7d4e2d 100%) !important;
  border-bottom: 5px solid #4d3018 !important;
  border-right: 4px solid #5c3b1e !important;
  border-radius: 2px !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -2px 0 rgba(0, 0, 0, 0.3),
    2px 4px 6px rgba(0, 0, 0, 0.4) !important;
}

.biome-plaine .house-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, transparent 85%, rgba(0, 0, 0, 0.2) 85%);
  background-size: 100% 8px;
}

.biome-plaine .house-window {
  background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%) !important;
  border: 3px solid #4d3018 !important;
  border-bottom: 5px solid #4d3018 !important;
  border-right: 4px solid #5c3b1e !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 12px rgba(241, 196, 15, 0.85),
    inset 1px 1px 3px rgba(255, 255, 255, 0.4) !important;
}

.biome-plaine .house-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(90deg, transparent 46%, #4d3018 46%, #4d3018 54%, transparent 54%),
    linear-gradient(180deg, transparent 46%, #4d3018 46%, #4d3018 54%, transparent 54%);
  opacity: 0.85;
}

.biome-plaine .house-door {
  background: linear-gradient(180deg, #5c3a21 0%, #3e2716 100%) !important;
  border: 3px solid #2d1c10 !important;
  border-bottom: 5px solid #2d1c10 !important;
  border-right: 4px solid #3d2615 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.25),
    2px 4px 6px rgba(0, 0, 0, 0.4) !important;
}

.biome-plaine .house-door::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #f1c40f;
  border-radius: 50%;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* =========================
   FOREST & JUNGLE BUILDINGS (WOOD CABINS)
   ========================= */
.biome-foret .house-roof,
.biome-jungle .house-roof,
.biome-dinosaures .house-roof {
  background: linear-gradient(180deg, #27ae60 0%, #1e8449 100%) !important;
  border-bottom: 5px solid #145a32 !important;
  border-right: 4px solid #196f3d !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset -1px -2px 0 rgba(0, 0, 0, 0.2),
    2px 4px 6px rgba(0, 0, 0, 0.4) !important;
}
.biome-foret .house-roof::after,
.biome-jungle .house-roof::after,
.biome-dinosaures .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 10px);
  opacity: 0.7;
}

.biome-foret .house-wall,
.biome-jungle .house-wall,
.biome-dinosaures .house-wall {
  background: linear-gradient(135deg, #8e5a32 0%, #6e4222 100%) !important;
  border-bottom: 5px solid #4a2b16 !important;
  border-right: 4px solid #573319 !important;
  border-radius: 2px !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -2px 0 rgba(0, 0, 0, 0.3),
    2px 4px 6px rgba(0, 0, 0, 0.4) !important;
}
.biome-foret .house-wall::after,
.biome-jungle .house-wall::after,
.biome-dinosaures .house-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, transparent 80%, rgba(0, 0, 0, 0.25) 80%);
  background-size: 100% 6px;
}

.biome-foret .house-window,
.biome-jungle .house-window,
.biome-dinosaures .house-window {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%) !important;
  border: 3px solid #4a2b16 !important;
  border-bottom: 5px solid #4a2b16 !important;
  border-right: 4px solid #573319 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(253, 203, 110, 0.8), inset 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.biome-foret .house-door,
.biome-jungle .house-door,
.biome-dinosaures .house-door {
  background: linear-gradient(180deg, #4d2b14 0%, #301b0c 100%) !important;
  border: 3px solid #241308 !important;
  border-bottom: 5px solid #241308 !important;
  border-right: 4px solid #2e180a !important;
  border-radius: 6px 6px 0 0 !important;
}

/* =========================
   DESERT BUILDINGS (CLAY & SANDSTONE ADOBE)
   ========================= */
.biome-desert .house-roof {
  background: linear-gradient(180deg, #e5a93b 0%, #c68923 100%) !important;
  border-bottom: 5px solid #82540c !important;
  border-right: 4px solid #9c6712 !important;
  border-radius: 2px !important;
}
.biome-desert .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 4px, transparent 4px, transparent 12px);
}

.biome-desert .house-wall {
  background: linear-gradient(135deg, #ecc588 0%, #d8b070 100%) !important;
  border-bottom: 5px solid #9b7741 !important;
  border-right: 4px solid #b28b50 !important;
  border-radius: 1px !important;
}

.biome-desert .house-window {
  background: linear-gradient(135deg, #00d2d3 0%, #00a8ff 100%) !important;
  border: 3px solid #82540c !important;
  border-bottom: 5px solid #82540c !important;
  border-right: 4px solid #9c6712 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px rgba(0, 210, 211, 0.7) !important;
}

.biome-desert .house-door {
  background: linear-gradient(180deg, #c0392b 0%, #78281f 100%) !important;
  border: 3px solid #5c1811 !important;
  border-bottom: 5px solid #5c1811 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* =========================
   NEIGE & NOEL BUILDINGS (IGLOOS & ICE HOUSES)
   ========================= */
.biome-neige .house-roof,
.biome-noel .house-roof {
  background: linear-gradient(180deg, #ffffff 0%, #e1f5fe 100%) !important;
  border-bottom: 5px solid #b0bec5 !important;
  border-right: 4px solid #cfd8dc !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 
    inset 0 3px 5px rgba(255, 255, 255, 0.9),
    0 4px 6px rgba(0,0,0,0.15) !important;
}
.biome-neige .house-roof::after,
.biome-noel .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(0, 180, 216, 0.1) 8px, rgba(0, 180, 216, 0.1) 9px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 12px, rgba(0, 180, 216, 0.1) 12px, rgba(0, 180, 216, 0.1) 13px);
}

.biome-neige .house-wall,
.biome-noel .house-wall {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%) !important;
  border-bottom: 5px solid #80deea !important;
  border-right: 4px solid #4dd0e1 !important;
  border-radius: 4px !important;
}
.biome-neige .house-wall::after,
.biome-noel .house-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(255,255,255,0.4) 10px, rgba(255,255,255,0.4) 12px);
}

.biome-neige .house-window,
.biome-noel .house-window {
  background: linear-gradient(135deg, #fff9c4 0%, #fbc02d 100%) !important;
  border: 3px solid #80deea !important;
  border-bottom: 5px solid #80deea !important;
  border-right: 4px solid #4dd0e1 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 12px rgba(251, 192, 45, 0.9) !important;
}

.biome-neige .house-door,
.biome-noel .house-door {
  background: linear-gradient(180deg, #cfd8dc 0%, #90a4ae 100%) !important;
  border: 3px solid #546e7a !important;
  border-bottom: 5px solid #546e7a !important;
  border-right: 4px solid #78909c !important;
  border-radius: 50% 50% 0 0 !important;
}

/* =========================
   MONTAGNE BUILDINGS (STONE CHALETS)
   ========================= */
.biome-montagne .house-roof {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important;
  border-bottom: 5px solid #111827 !important;
  border-right: 4px solid #1f2937 !important;
  border-radius: 3px 3px 0 0 !important;
}
.biome-montagne .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 3px, transparent 3px, transparent 9px);
}

.biome-montagne .house-wall {
  background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
  border-bottom: 5px solid #2d3748 !important;
  border-right: 4px solid #1a202c !important;
}
.biome-montagne .house-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(0deg, transparent 0px, transparent 6px, rgba(0,0,0,0.15) 6px, rgba(0,0,0,0.15) 7px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(0,0,0,0.15) 10px, rgba(0,0,0,0.15) 11px);
}

.biome-montagne .house-window {
  background: linear-gradient(135deg, #ffbe0b 0%, #fb5607 100%) !important;
  border: 3px solid #2d3748 !important;
  border-bottom: 5px solid #2d3748 !important;
  border-radius: 2px !important;
  box-shadow: 0 0 10px rgba(255, 190, 11, 0.8) !important;
}

.biome-montagne .house-door {
  background: linear-gradient(180deg, #8b5a2b 0%, #5c3a21 100%) !important;
  border: 3px solid #2d3748 !important;
  border-bottom: 5px solid #2d3748 !important;
  border-radius: 4px 4px 0 0 !important;
}

/* =========================
   VOLCAN BUILDINGS (BASALT RUINS)
   ========================= */
.biome-volcan .house-roof {
  background: linear-gradient(180deg, #261c1c 0%, #0f0a0a 100%) !important;
  border-bottom: 5px solid #ff3300 !important;
  border-right: 4px solid #b30000 !important;
  border-radius: 1px !important;
}
.biome-volcan .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 51, 0, 0.15) 0px, rgba(255, 51, 0, 0.15) 2px, transparent 2px, transparent 12px);
}

.biome-volcan .house-wall {
  background: linear-gradient(135deg, #1c1919 0%, #0d0c0c 100%) !important;
  border-bottom: 5px solid #3a0a0a !important;
  border-right: 4px solid #4a1010 !important;
  border-left: 1px solid rgba(255, 51, 0, 0.25) !important;
  border-top: 1px solid rgba(255, 51, 0, 0.25) !important;
}

.biome-volcan .house-window {
  background: linear-gradient(135deg, #ff5722 0%, #ff3d00 100%) !important;
  border: 3px solid #1c1919 !important;
  border-bottom: 5px solid #3a0a0a !important;
  box-shadow: 0 0 15px #ff3d00, inset 0 0 4px #ffffff !important;
}

.biome-volcan .house-door {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important;
  border: 3px solid #111827 !important;
  border-bottom: 5px solid #111827 !important;
  border-radius: 2px !important;
}

/* =========================
   CELESTE BUILDINGS (WHITE MARBLE TEMPLES)
   ========================= */
.biome-celeste .house-roof {
  background: linear-gradient(180deg, #ffffff 0%, #f1f2f6 80%, #ffd700 100%) !important;
  border-bottom: 5px solid #d4af37 !important;
  border-right: 4px solid #f1c40f !important;
  border-radius: 50% 50% 0 0 !important;
  box-shadow: 
    inset 0 2px 4px rgba(255,255,255,1),
    0 0 10px rgba(255, 215, 0, 0.5) !important;
}

.biome-celeste .house-wall {
  background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 30%, #e9ecef 70%, #f8f9fa 100%) !important;
  border-bottom: 5px solid #cfd8dc !important;
  border-right: 4px solid #eceff1 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.biome-celeste .house-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0px, rgba(212, 175, 55, 0.2) 2px, transparent 2px, transparent 10px);
}

.biome-celeste .house-window {
  background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%) !important;
  border: 3px solid #cfd8dc !important;
  border-bottom: 5px solid #cfd8dc !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px rgba(128, 222, 234, 0.9) !important;
}

.biome-celeste .house-door {
  background: linear-gradient(180deg, #ffe066 0%, #f5b041 100%) !important;
  border: 3px solid #d4af37 !important;
  border-bottom: 5px solid #d4af37 !important;
  border-radius: 12px 12px 0 0 !important;
}

/* =========================
   CIMETIERE BUILDINGS (CRYPT & TOMBS)
   ========================= */
.biome-cimetiere .house-roof {
  background: linear-gradient(180deg, #322c37 0%, #1f1b24 100%) !important;
  border-bottom: 5px solid #141117 !important;
  border-right: 4px solid #1a171e !important;
  border-radius: 4px 4px 0 0 !important;
}
.biome-cimetiere .house-roof::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 2px, transparent 2px, transparent 8px);
}

.biome-cimetiere .house-wall {
  background: linear-gradient(135deg, #443c4a 0%, #2f2933 100%) !important;
  border-bottom: 5px solid #1c181f !important;
  border-right: 4px solid #231f27 !important;
  border-left: 1px solid rgba(155, 89, 182, 0.15) !important;
}
.biome-cimetiere .house-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(0,0,0,0.2) 8px, rgba(0,0,0,0.2) 9px);
}

.biome-cimetiere .house-window {
  background: linear-gradient(135deg, #b76eff 0%, #7b2cbf 100%) !important;
  border: 3px solid #231f27 !important;
  border-bottom: 5px solid #1c181f !important;
  border-radius: 3px !important;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.8) !important;
}

.biome-cimetiere .house-door {
  background: linear-gradient(180deg, #1c181f 0%, #0d0b0f 100%) !important;
  border: 2px solid #2c3e50 !important;
  border-bottom: 4px solid #1c181f !important;
  border-radius: 8px 8px 0 0 !important;
}
.biome-cimetiere .house-door::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, #2c3e50 2px, #2c3e50 4px);
  opacity: 0.6;
}

/* Champ de blé (tile 9 / dungeon-exit) dans le village plaine */
.biome-plaine .tile.dungeon-exit {
  background: 
    repeating-linear-gradient(90deg, rgba(62, 39, 35, 0.35) 0px, rgba(62, 39, 35, 0.35) 3px, transparent 3px, transparent 8px),
    linear-gradient(180deg, #8d6e63 0%, #5d4037 100%) !important;
  border-radius: 4px !important;
  border-bottom: 4px solid #3e2723 !important;
  border-right: 3px solid #2e1c19 !important;
  box-shadow: 
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    1px 3px 5px rgba(0, 0, 0, 0.35) !important;
  animation: none !important;
}

.biome-plaine .tile.dungeon-exit::after {
  content: "🌾" !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  background: none !important;
  opacity: 0.96 !important;
  animation: wheatSway 2s ease-in-out infinite alternate !important;
}

/* Champ d'orge (tile 9 / dungeon-exit) dans le biome foret */
.biome-foret .tile.dungeon-exit {
  background: 
    repeating-linear-gradient(90deg, rgba(62, 39, 35, 0.35) 0px, rgba(62, 39, 35, 0.35) 3px, transparent 3px, transparent 8px),
    linear-gradient(180deg, #7d5c4c 0%, #4e3629 100%) !important;
  border-radius: 4px !important;
  border-bottom: 4px solid #3e2723 !important;
  border-right: 3px solid #2e1c19 !important;
  box-shadow: 
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    1px 3px 5px rgba(0, 0, 0, 0.35) !important;
  animation: none !important;
}

.biome-foret .tile.dungeon-exit::after {
  content: "🌾" !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  background: none !important;
  opacity: 0.96 !important;
  animation: wheatSway 2s ease-in-out infinite alternate !important;
}

/* Champ de houblon (tile 9 / dungeon-exit) dans le biome montagne */
.biome-montagne .tile.dungeon-exit {
  background: 
    repeating-linear-gradient(90deg, rgba(44, 62, 80, 0.25) 0px, rgba(44, 62, 80, 0.25) 3px, transparent 3px, transparent 8px),
    linear-gradient(180deg, #7f8c8d 0%, #2c3e50 100%) !important;
  border-radius: 4px !important;
  border-bottom: 4px solid #2c3e50 !important;
  border-right: 3px solid #1a252f !important;
  box-shadow: 
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    1px 3px 5px rgba(0, 0, 0, 0.35) !important;
  animation: none !important;
}

.biome-montagne .tile.dungeon-exit::after {
  content: "🌿" !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  background: none !important;
  opacity: 0.96 !important;
  animation: wheatSway 2s ease-in-out infinite alternate !important;
}

/* Champ de riz (tile 9 / dungeon-exit) dans les autres biomes */
.biome-desert .tile.dungeon-exit,
.biome-neige .tile.dungeon-exit,
.biome-jungle .tile.dungeon-exit,
.biome-volcan .tile.dungeon-exit,
.biome-celeste .tile.dungeon-exit,
.biome-mer .tile.dungeon-exit,
.biome-minotor .tile.dungeon-exit,
.biome-cimetiere .tile.dungeon-exit,
.biome-dinosaures .tile.dungeon-exit,
.biome-noel .tile.dungeon-exit {
  background: 
    repeating-linear-gradient(90deg, rgba(139, 119, 86, 0.35) 0px, rgba(139, 119, 86, 0.35) 3px, transparent 3px, transparent 8px),
    linear-gradient(180deg, #d2b48c 0%, #8b5a2b 100%) !important;
  border-radius: 4px !important;
  border-bottom: 4px solid #8b5a2b !important;
  border-right: 3px solid #5c3a1c !important;
  box-shadow: 
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    1px 3px 5px rgba(0, 0, 0, 0.35) !important;
  animation: none !important;
}

.biome-desert .tile.dungeon-exit::after,
.biome-neige .tile.dungeon-exit::after,
.biome-jungle .tile.dungeon-exit::after,
.biome-volcan .tile.dungeon-exit::after,
.biome-celeste .tile.dungeon-exit::after,
.biome-mer .tile.dungeon-exit::after,
.biome-minotor .tile.dungeon-exit::after,
.biome-cimetiere .tile.dungeon-exit::after,
.biome-dinosaures .tile.dungeon-exit::after,
.biome-noel .tile.dungeon-exit::after {
  content: "🌾" !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  background: none !important;
  opacity: 0.96 !important;
  animation: wheatSway 2s ease-in-out infinite alternate !important;
}

@keyframes wheatSway {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}

/* Le Sphinx du Désert (tile 13) */
.tile.sphinx {
  background: radial-gradient(circle at 35% 35%, #fce093 0%, #d8b46a 55%, #8c6d30 100%) !important;
  border-radius: 8px !important;
  border-bottom: 4px solid #5d471b !important;
  border-right: 3px solid #705722 !important;
  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tile.sphinx::after {
  content: "🦁" !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(216, 180, 106, 0.5));
}

/* Spot de Chasse (tile 14) */
.tile.hunting-spot {
  background: 
    radial-gradient(circle at 50% 50%, rgba(139, 69, 19, 0.12), transparent 70%),
    linear-gradient(180deg, #1e272c, #0f1418) !important;
  border-radius: 4px !important;
  border-bottom: 4px solid #080a0c !important;
  border-right: 3px solid #0b0e11 !important;
  box-shadow: 
    inset 1px 1px 2px rgba(255, 255, 255, 0.05),
    1px 3px 5px rgba(0, 0, 0, 0.45) !important;
}

.tile.hunting-spot::after {
  content: "🐾" !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  background: none !important;
  opacity: 0.8 !important;
  animation: animalTracksSway 3s ease-in-out infinite alternate !important;
}

@keyframes animalTracksSway {
  0% { transform: scale(0.85) rotate(-6deg); }
  100% { transform: scale(1.05) rotate(6deg); }
}

/* ==========================================================================
   RESSOURCES ÉPUISÉES (DEPLETED RESOURCES)
   ========================================================================== */

/* Arbre coupé (Souche d'arbre / Tree stump) */
.tile.tree.depleted {
  background: radial-gradient(circle at 50% 50%, #8b5a2b 0%, #5c3a1a 100%) !important;
  border-radius: 4px !important;
  border-bottom: 3px solid #3d2511 !important;
  border-right: 2px solid #3d2511 !important;
  box-shadow: none !important;
  animation: none !important;
}

.tile.tree.depleted::after {
  content: "🪵" !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.75 !important;
  animation: none !important;
  position: absolute !important;
  inset: 0 !important;
}

.tile.tree.depleted::before {
  display: none !important;
  content: "" !important;
}

/* Blé coupé (Champ fauché / Harvested wheat field) */
.biome-plaine .tile.dungeon-exit.depleted {
  background: 
    repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(139, 69, 19, 0.15) 4px, rgba(139, 69, 19, 0.15) 6px),
    linear-gradient(180deg, #3e2723, #1b0c07) !important;
  border-bottom: 4px solid #1b0c07 !important;
  border-right: 3px solid #1b0c07 !important;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}

.biome-plaine .tile.dungeon-exit.depleted::after {
  content: "" !important;
  display: none !important;
}

.biome-plaine .tile.dungeon-exit.depleted::before {
  display: none !important;
  content: "" !important;
}

/* Eau épuisée (Poissons pêchés / Depleted water) */
.tile.water.depleted .water-bubble {
  display: none !important;
}

.tile.water.depleted {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, #1f4e5b, #0f2e37) !important;
  border-bottom: 3px solid #0b1a20 !important;
  border-right: 3px solid #0d2127 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  animation: none !important;
}

.tile.water.depleted::after {
  content: "" !important;
  display: none !important;
}

.tile.water.depleted::before {
  display: none !important;
  content: "" !important;
}

/* Spot de chasse épuisé (Gibier chassé / Depleted hunting spot) */
.tile.hunting-spot.depleted::after {
  content: "" !important;
  display: none !important;
}

.tile.hunting-spot.depleted::before {
  display: none !important;
  content: "" !important;
}

/* ==========================================================================
   NEW DECORATIVE & INTERACTIVE WORLD TILES (TRANSPARENT BACKGROUNDS)
   ========================================================================== */

/* Puits / Well (18) */
.tile.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.well::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: radial-gradient(circle, #2e7ec0 30%, #5d4037 30%, #5d4037 40%, #7d6556 40%, #4e4a46 100%) !important;
  border-radius: 50% !important;
  border: 2px solid #332b24 !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.5), inset 0 0 3px rgba(0,0,0,0.8) !important;
}
.tile.well::before {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  height: 4px !important;
  background: #5d4037 !important;
  top: calc(50% - 2px) !important;
  left: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
  z-index: 2 !important;
}

/* Rocher Décoratif / Decor Rock (19) */
.tile.decor-rock {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.decor-rock::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  background: linear-gradient(135deg, #b0bec5 0%, #78909c 50%, #455a64 100%) !important;
  border-radius: 60% 40% 60% 40% / 40% 60% 40% 60% !important;
  border-top: 2px solid #cfd8dc !important;
  border-left: 2px solid #b0bec5 !important;
  border-right: 2px solid #546e7a !important;
  border-bottom: 3px solid #263238 !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}

/* Barrière / Fence (20) */
.tile.fence {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.fence::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 20%, #8d6e63 20%, #8d6e63 30%, transparent 30%, transparent 70%, #8d6e63 70%, #8d6e63 80%, transparent 80%),
              linear-gradient(0deg, transparent 40%, #5d4037 40%, #5d4037 60%, transparent 60%) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Cabane / Hut (21) */
.tile.hut {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.hut::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  width: 28px !important;
  height: 14px !important;
  background: linear-gradient(135deg, #ffe082 0%, #ffb300 100%) !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
  z-index: 2 !important;
}
.tile.hut::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 5px !important;
  width: 22px !important;
  height: 16px !important;
  background: #8d6e63 !important;
  border-radius: 0 0 2px 2px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  border-left: 2px solid #5d4037 !important;
  border-right: 2px solid #5d4037 !important;
  border-bottom: 2px solid #3e2723 !important;
}

/* Panneau indicateur / Signpost (22) */
.tile.signpost {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.signpost::before {
  content: "" !important;
  position: absolute !important;
  width: 4px !important;
  height: 22px !important;
  background: #5d4037 !important;
  bottom: 2px !important;
  left: calc(50% - 2px) !important;
}
.tile.signpost::after {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 10px !important;
  background: linear-gradient(135deg, #a1887f 0%, #8d6e63 100%) !important;
  border: 1px solid #4e342e !important;
  top: 6px !important;
  left: calc(50% - 11px) !important;
  border-radius: 1px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Coffre / Chest (23) */
.tile.chest {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.chest::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%) !important;
  border: 2px solid #ffd54f !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.tile.chest::before {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  background: #ffd54f !important;
  border: 1px solid #ffb300 !important;
  border-radius: 50% !important;
  top: calc(50% - 3px) !important;
  left: calc(50% - 3px) !important;
  z-index: 2 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Herbe haute / Tall grass (24) */
.tile.tall-grass {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.tall-grass::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 4px !important;
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(75deg, #66bb6a 20%, transparent 20%),
              linear-gradient(-75deg, #4caf50 20%, transparent 20%),
              linear-gradient(85deg, #81c784 20%, transparent 20%) !important;
  background-size: 8px 24px, 8px 24px, 8px 24px !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 8px 0, 16px 0 !important;
}

/* Fleurs sauvages / Wild flowers (25) */
.tile.wild-flowers {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.wild-flowers::after {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  background: #e91e63 !important;
  border-radius: 50% !important;
  box-shadow: 14px 4px 0 #ff4081, 4px 14px 0 #f50057, 14px 14px 0 #ff80ab !important;
  top: 4px;
  left: 4px;
}
.tile.wild-flowers::before {
  content: "" !important;
  position: absolute !important;
  width: 2px !important;
  height: 2px !important;
  background: #ffd54f !important;
  border-radius: 50% !important;
  box-shadow: 14px 4px 0 #ffd54f, 4px 14px 0 #ffd54f, 14px 14px 0 #ffd54f !important;
  top: 6px;
  left: 6px;
  z-index: 2 !important;
}

/* Feu de camp / Campfire (26) */
.tile.campfire {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.campfire::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: radial-gradient(circle at 50% 50%, #ff4500 10%, #d84315 30%, #4e342e 60%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.6) !important;
  animation: campfireGlow 1.5s ease-in-out infinite alternate !important;
}
.tile.campfire::after {
  content: "" !important;
  position: absolute !important;
  width: 12px !important;
  height: 16px !important;
  background: linear-gradient(0deg, #ff3d00 20%, #ffea00 100%) !important;
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40% !important;
  top: 6px;
  left: calc(50% - 6px);
  filter: drop-shadow(0 0 4px #ff3d00);
  animation: campfireBurn 1s ease-in-out infinite alternate !important;
}

/* Lanterne / Lightpost (27) */
.tile.lightpost {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.lightpost::before {
  content: "" !important;
  position: absolute !important;
  width: 2px !important;
  height: 24px !important;
  background: #263238 !important;
  bottom: 2px;
  left: calc(50% - 1px);
}
.tile.lightpost::after {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffeb3b !important;
  border: 1px solid #ff9800 !important;
  top: 4px;
  left: calc(50% - 5px);
  border-radius: 50% !important;
  box-shadow: 0 0 8px #ffeb3b !important;
}

/* Banc / Bench (28) */
.tile.bench {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.bench::before {
  content: "" !important;
  position: absolute !important;
  width: 26px !important;
  height: 6px !important;
  background: linear-gradient(180deg, #a1887f 0%, #8d6e63 100%) !important;
  border: 1px solid #4e342e !important;
  top: 12px;
  left: 3px;
  border-radius: 1px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
.tile.bench::after {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 8px !important;
  border-left: 2px solid #37474f !important;
  border-right: 2px solid #37474f !important;
  top: 18px;
  left: 4px;
}

/* Tombe / Grave (29) */
.tile.grave {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.grave::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 2px !important;
  background: linear-gradient(180deg, #b0bec5 0%, #78909c 100%) !important;
  border-radius: 6px 6px 0 0 !important;
  border: 2px solid #455a64 !important;
  border-bottom: none !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4) !important;
}
.tile.grave::before {
  content: "†" !important;
  position: absolute !important;
  top: 6px !important;
  width: 100% !important;
  text-align: center !important;
  color: #37474f !important;
  font-family: serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  z-index: 2 !important;
}

/* Statue (30) */
.tile.statue {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.statue::before {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 4px !important;
  width: 24px !important;
  height: 8px !important;
  background: #455a64 !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.4) !important;
}
.tile.statue::after {
  content: "" !important;
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  background: #cfd8dc !important;
  border: 2px solid #546e7a !important;
  border-radius: 50% !important;
  top: 6px !important;
  left: calc(50% - 8px) !important;
}

/* Tente / Tent (31) */
.tile.tent {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.tent::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  background: linear-gradient(135deg, #0288d1 0%, #01579b 100%) !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3) !important;
}
.tile.tent::before {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: calc(50% - 4px) !important;
  width: 8px !important;
  height: 10px !important;
  background: #004d40 !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
  z-index: 2 !important;
}

/* Minerai / Ore Vein (32) */
.tile.ore-vein {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.ore-vein::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  background: radial-gradient(circle at 30% 30%, #ffd54f 20%, transparent 25%),
              radial-gradient(circle at 70% 60%, #ffd54f 15%, transparent 20%),
              linear-gradient(135deg, #546e7a 0%, #263238 100%) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4) !important;
}

/* Botte de foin / Hay bale (33) */
.tile.hay-bale {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.hay-bale::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: linear-gradient(180deg, #ffeb3b 0%, #fbc02d 100%) !important;
  border: 1px solid #f57f17 !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
.tile.hay-bale::before {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 2px !important;
  background: #8d6e63 !important;
  top: 10px !important;
  left: 4px !important;
  box-shadow: 0 10px 0 #8d6e63 !important;
  z-index: 2 !important;
}

/* Cactus (34) */
.tile.cactus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.cactus::before {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 22px !important;
  background: linear-gradient(90deg, #4caf50 0%, #2e7d32 100%) !important;
  border-radius: 3px !important;
  left: calc(50% - 3px);
  bottom: 2px;
}
.tile.cactus::after {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 8px;
  border-left: 3px solid #2e7d32 !important;
  border-bottom: 3px solid #2e7d32 !important;
  border-radius: 0 0 0 3px !important;
  left: 5px;
  top: 8px;
}

/* Nénuphar / Lilypad (35) */
.tile.lilypad {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.lilypad::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #00897b !important;
  border-radius: 50% !important;
  clip-path: polygon(0 0, 80% 0, 50% 50%, 100% 30%, 100% 100%, 0 100%) !important;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3) !important;
}

/* Champignons / Mushrooms (36) */
.tile.mushrooms {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.mushrooms::before {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  background: #e53935 !important;
  border-radius: 4px 4px 0 0 !important;
  top: 8px;
  left: 4px;
  box-shadow: 12px 6px 0 #d81b60 !important;
}
.tile.mushrooms::after {
  content: "" !important;
  position: absolute !important;
  width: 3px !important;
  height: 6px !important;
  background: #eceff1 !important;
  top: 15px;
  left: 6px;
  box-shadow: 12px 4px 0 #eceff1 !important;
}

/* Ossements / Skeleton (37) */
.tile.skeleton {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.skeleton::before {
  content: "" !important;
  position: absolute !important;
  width: 18px !important;
  height: 4px !important;
  background: #cfd8dc !important;
  transform: rotate(35deg) !important;
  top: 14px;
  left: 7px;
  border-radius: 2px !important;
}
.tile.skeleton::after {
  content: "" !important;
  position: absolute !important;
  width: 18px;
  height: 4px;
  background: #cfd8dc !important;
  transform: rotate(-35deg) !important;
  top: 14px;
  left: 7px;
  border-radius: 2px !important;
}

/* Tonneau / Barrel (38) */
.tile.barrel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.barrel::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px 5px !important;
  background: linear-gradient(90deg, #5d4037 0%, #8d6e63 50%, #5d4037 100%) !important;
  border-radius: 4px !important;
  border-top: 1.5px solid #3e2723 !important;
  border-bottom: 1.5px solid #3e2723 !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4) !important;
}
.tile.barrel::before {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 2px !important;
  background: #78909c !important;
  top: 8px;
  left: 5px;
  box-shadow: 0 12px 0 #78909c !important;
  z-index: 2 !important;
}

/* Caisse / Crate (39) */
.tile.crate {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.crate::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #a1887f !important;
  border: 2px solid #5d4037 !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4) !important;
}
.tile.crate::before {
  content: "" !important;
  position: absolute !important;
  width: 18px;
  height: 2px;
  background: #5d4037 !important;
  top: calc(50% - 1px);
  left: 7px;
  transform: rotate(45deg) !important;
  box-shadow: 0 0 0 1px #5d4037 !important;
  z-index: 2 !important;
}

/* Ruines / Ruins (40) */
.tile.ruins {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.ruins::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #78909c !important;
  border: 2px solid #455a64 !important;
  border-bottom: 3px solid #263238 !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3) !important;
}
.tile.ruins::before {
  content: "" !important;
  position: absolute !important;
  width: 4px;
  height: 14px;
  background: #37474f !important;
  left: 8px;
  top: 8px;
  box-shadow: 12px 0 0 #37474f !important;
  z-index: 2 !important;
}

/* Sac / Sack (41) */
.tile.sack {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.sack::before {
  content: "" !important;
  position: absolute !important;
  width: 18px;
  height: 18px;
  background: #d7ccc8 !important;
  border-radius: 50% 50% 40% 40% !important;
  bottom: 2px;
  left: calc(50% - 9px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  border: 1px solid #bcaaa4 !important;
}
.tile.sack::after {
  content: "" !important;
  position: absolute !important;
  width: 6px;
  height: 4px;
  background: #8d6e63 !important;
  bottom: 18px;
  left: calc(50% - 3px);
  border-radius: 2px !important;
}

/* Épave / Shipwreck (42) */
.tile.shipwreck {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.shipwreck::before {
  content: "" !important;
  position: absolute !important;
  width: 4px !important;
  height: 20px;
  background: #78909c !important;
  top: 4px;
  left: calc(50% - 2px);
}
.tile.shipwreck::after {
  content: "" !important;
  position: absolute !important;
  width: 18px;
  height: 10px;
  border-bottom: 4px solid #78909c !important;
  border-left: 4px solid #78909c !important;
  border-right: 4px solid #78909c !important;
  border-radius: 0 0 8px 8px !important;
  top: 12px;
  left: calc(50% - 9px);
}

/* Toile Araignée / Spiderweb (43) */
.tile.spiderweb {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.spiderweb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, transparent 10%, rgba(207, 216, 220, 0.4) 15%, transparent 20%, rgba(207, 216, 220, 0.4) 35%, transparent 40%, rgba(207, 216, 220, 0.4) 55%, transparent 60%) !important;
}

/* Flaque Sang / Blood Pool (44) */
.tile.blood-pool {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.blood-pool::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: radial-gradient(circle at 50% 50%, rgba(211, 47, 47, 0.6) 0%, rgba(183, 28, 28, 0.8) 40%, transparent 70%) !important;
}

/* Cristaux Magiques / Crystals (45) */
.tile.crystals {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.crystals::after {
  content: "" !important;
  position: absolute !important;
  width: 14px;
  height: 24px;
  background: linear-gradient(135deg, #e040fb 0%, #6a1b9a 100%) !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  top: 4px;
  left: calc(50% - 7px);
  box-shadow: 0 0 8px #e040fb !important;
  animation: crystalGlow 1.5s ease-in-out infinite alternate !important;
}

/* Magic Statue (46) */
.tile.magic-statue {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.magic-statue::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #311b92 !important;
  border-radius: 4px !important;
  border: 2px solid #b388ff !important;
  box-shadow: 0 0 8px #b388ff !important;
}
.tile.magic-statue::before {
  content: "" !important;
  position: absolute !important;
  width: 8px;
  height: 8px;
  background: #00e5ff !important;
  border-radius: 50% !important;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  z-index: 2 !important;
  box-shadow: 0 0 4px #00e5ff !important;
}

/* Bedroll (47) */
.tile.bedroll {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.bedroll::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #bcaaa4 !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
.tile.bedroll::before {
  content: "" !important;
  position: absolute !important;
  width: 6px;
  height: 24px;
  background: #8d6e63 !important;
  left: 4px;
  top: 4px;
  border-radius: 3px 0 0 3px !important;
  z-index: 2 !important;
}

/* Spring / Trampoline (48) */
.tile.spring {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.spring::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: radial-gradient(circle, #eceff1 20%, #78909c 30%, transparent 35%, #78909c 45%, transparent 50%, #78909c 60%, #455a64 70%) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Autumn Leaves (49) */
.tile.autumn-leaves {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.autumn-leaves::after {
  content: "" !important;
  position: absolute !important;
  width: 6px;
  height: 6px;
  background: #ff5722 !important;
  border-radius: 3px 0 3px 0 !important;
  top: 8px;
  left: 8px;
  box-shadow: 8px 6px 0 #ff9800, -4px 10px 0 #e64a19, 4px -4px 0 #f57c00 !important;
}

/* Footprints (50) */
.tile.footprints {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.footprints::after {
  content: "" !important;
  position: absolute !important;
  width: 3px;
  height: 5px;
  background: rgba(0,0,0,0.15) !important;
  border-radius: 50% !important;
  top: 8px;
  left: 10px;
  box-shadow: 6px 8px 0 rgba(0,0,0,0.15) !important;
}

/* Ice Patch (51) */
.tile.ice-patch {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.ice-patch::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  background: rgba(179, 229, 252, 0.6) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.9) !important;
}

/* Mud Puddle (52) */
.tile.mud-puddle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.mud-puddle::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: radial-gradient(circle at center, rgba(141, 110, 99, 0.8) 0%, transparent 80%) !important;
}

/* Tent Wall (53) */
.tile.tent-wall {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.tent-wall::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  background: #0288d1 !important;
  border: 2px solid #01579b !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.2) !important;
}

/* Scaffolding (54) */
.tile.scaffolding {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.scaffolding::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  background: linear-gradient(90deg, #5d4037 10%, transparent 10%, transparent 90%, #5d4037 90%),
              linear-gradient(0deg, #5d4037 10%, transparent 10%, transparent 90%, #5d4037 90%) !important;
}
.tile.scaffolding::before {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  height: 2px !important;
  background: #5d4037 !important;
  top: calc(50% - 1px) !important;
  left: 0 !important;
}

/* Cactus Fleuri (55) */
.tile.cactus-flowered {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.cactus-flowered::before {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 22px !important;
  background: linear-gradient(90deg, #4caf50 0%, #2e7d32 100%) !important;
  border-radius: 3px !important;
  left: calc(50% - 3px);
  bottom: 2px;
}
.tile.cactus-flowered::after {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  background: #e91e63 !important;
  border-radius: 50% !important;
  top: 0;
  left: calc(50% - 3px);
  box-shadow: 0 0 4px #e91e63 !important;
}

/* Glowing Flower (56) */
.tile.glowing-flower {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.glowing-flower::before {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  background: #00e5ff !important;
  border-radius: 50% !important;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  animation: glowFlower 1.2s ease-in-out infinite alternate !important;
}

/* Giant Skull (57) */
.tile.giant-skull {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.giant-skull::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #eceff1 !important;
  border-radius: 50% 50% 30% 30% !important;
  border: 2px solid #cfd8dc !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3) !important;
}
.tile.giant-skull::before {
  content: "" !important;
  position: absolute !important;
  width: 4px !important;
  height: 6px !important;
  background: #37474f !important;
  border-radius: 50% !important;
  top: 12px;
  left: 9px;
  box-shadow: 10px 0 0 #37474f !important;
  z-index: 2 !important;
}

/* Giant Bone (58) */
.tile.giant-bone {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.giant-bone::before {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 6px !important;
  background: #eceff1 !important;
  top: calc(50% - 3px);
  left: 4px;
  border-radius: 2px !important;
}
.tile.giant-bone::after {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 12px !important;
  background: #eceff1 !important;
  border-radius: 3px !important;
  top: calc(50% - 6px);
  left: 2px;
  box-shadow: 24px 0 0 #eceff1 !important;
}

/* Ruined Grave (59) */
.tile.ruined-grave {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.ruined-grave::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: linear-gradient(135deg, #78909c 0%, #37474f 100%) !important;
  border-radius: 4px 0 0 0 !important;
  border: 2px solid #263238 !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4) !important;
}

/* Altar (60) */
.tile.altar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tile.altar::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: linear-gradient(180deg, #37474f 0%, #212121 100%) !important;
  border: 2px solid #546e7a !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
}
.tile.altar::before {
  content: "" !important;
  position: absolute !important;
  width: 4px !important;
  height: 8px !important;
  background: #ffffff !important;
  top: 8px;
  left: calc(50% - 2px);
  z-index: 2 !important;
}

/* --- END map/tiles.css --- */

/* --- BEGIN map/isometric.css --- */
/* ==========================================================================
   ISOMETRIC MAP VIEW (PIXIJS REPLACEMENT)
   ========================================================================== */

#mapContainer.isometric-mode {
  perspective: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1c3d32 0%, #102620 55%, #091714 100%);
}

#gameWorld.isometric-mode {
  transform-style: flat !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2 !important;
}

/* 2D Isometric DOM click targets */
#gameWorld.isometric-mode .tile {
  position: absolute !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#gameWorld.isometric-mode .tile:not(.map-exit)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hide all DOM visual obstacles and decorative textures except map exits */
#gameWorld.isometric-mode .tile:not(.map-exit)::after {
  display: none !important;
}

/* Glowing 2.5D Map exits */
#gameWorld.isometric-mode .tile.map-exit {
  background: rgba(255, 140, 0, 0.45) !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(255, 190, 0, 0.9)) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 7 !important;
  animation: exitGlowIso 1.5s infinite alternate ease-in-out !important;
}

#gameWorld.isometric-mode .tile.map-exit::after {
  display: block !important;
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: #fff8d6 !important;
  opacity: 0.95 !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
  z-index: 8 !important;
  clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%) !important;
  transform-origin: center center !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-up::after {
  transform: rotate(45deg) !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-right::after {
  transform: rotate(135deg) !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-down::after {
  transform: rotate(225deg) !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-left::after {
  transform: rotate(315deg) !important;
}

@keyframes exitGlowIso {
  0% {
    background: rgba(255, 140, 0, 0.25) !important;
    filter: drop-shadow(0 0 4px rgba(255, 160, 0, 0.6)) !important;
  }
  100% {
    background: rgba(255, 160, 0, 0.65) !important;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1)) !important;
  }
}

/* Glowing 2.5D Dungeon Exit Portal */
#gameWorld.isometric-mode .tile.dungeon-exit {
  display: block !important;
  background: radial-gradient(circle at 50% 50%, #ffffff 15%, #67e8f9 45%, #0284c7 75%, #0369a1 100%) !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.95)) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 7 !important;
  animation: exitPortalGlowIso 1.5s infinite alternate ease-in-out !important;
}

#gameWorld.isometric-mode .tile.dungeon-exit::after {
  display: block !important;
  content: "" !important;
  width: 22px !important;
  height: 22px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin-left: -11px !important;
  margin-top: -11px !important;
  background: radial-gradient(circle, #ffffff 25%, #38bdf8 65%, transparent 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px #38bdf8 !important;
  z-index: 8 !important;
  clip-path: none !important;
  animation: spinPortalIso 3s linear infinite !important;
}

@keyframes exitPortalGlowIso {
  0% {
    filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.6)) !important;
  }
  100% {
    filter: drop-shadow(0 0 14px rgba(56, 189, 248, 1)) !important;
  }
}

@keyframes spinPortalIso {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(0.9); }
}

/* 2. Flat scaled entities (no counter-rotation, matches combat dimensions) */
body.isometric-mode #player,
body.isometric-mode .remotePlayer,
body.isometric-mode .npcEntity {
  transform: translate(-50%, -100%) scale(0.53) !important;
  transform-origin: center bottom !important;
  transform-style: flat !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

body.isometric-mode .monsterEntity {
  transform: translate(-50%, -100%) scale(0.61) !important;
  transform-origin: center bottom !important;
  transform-style: flat !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Keep flat styling for nameplates since parent scale is clean */
body.isometric-mode .playerName,
body.isometric-mode .monsterName,
body.isometric-mode .npcName {
  white-space: nowrap !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

body.isometric-mode .npcName {
  bottom: calc(100% + 10px) !important;
  font-size: 15px !important;
}

body.isometric-mode .npc-quest-indicator {
  bottom: calc(100% + 42px) !important;
  top: auto !important;
  z-index: 2000 !important;
  white-space: nowrap !important;
}

/* Shadows are positioned flat on the floor naturally */
body.isometric-mode .charSprite::after,
body.isometric-mode .charAura,
body.isometric-mode .monsterShadow {
  transform: translateX(-50%) scaleY(0.5) !important; /* squashed horizontally for isometric shadow look */
  transform-origin: center bottom !important;
}

/* 3. Harvesting bubbles and indicators */
body.isometric-mode .harvest-action-bubble {
  position: absolute !important;
  z-index: 999 !important;
  transform: translate(-50%, -100%) !important;
  transform-style: flat !important;
  pointer-events: auto !important;
}

body.isometric-mode .harvest-action-bubble:hover {
  transform: translate(-50%, -100%) scale(1.08) !important;
}

body.isometric-mode .gather-floating-indicator {
  animation: floatUpGatherIso 1.4s forwards ease-out !important;
  z-index: 999 !important;
}

@keyframes floatUpGatherIso {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -20px) scale(1.05);
    opacity: 1;
  }
  85% {
    transform: translate(-50%, -50px) scale(0.9);
    opacity: 0;
  }
}


/* --- END map/isometric.css --- */

/* --- BEGIN sprites/player.css --- */
/* =========================
   SPRITES / PLAYER (PREMIUM GRAPHICS)
   ========================= */

@keyframes idleBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes walkBob {

  0%,
  50%,
  100% {
    transform: translateY(0);
  }

  25%,
  75% {
    transform: translateY(-1.5px);
  }
}

@keyframes walkTorso {

  0%,
  100% {
    transform: translateX(-50%) rotate(-2deg) translateY(0.5px);
  }

  50% {
    transform: translateX(-50%) rotate(2deg) translateY(0.5px);
  }
}

@keyframes walkHead {

  0%,
  100% {
    transform: translateX(-50%) rotate(1deg) translateY(0);
  }

  50% {
    transform: translateX(-50%) rotate(-1deg) translateY(0.5px);
  }
}

@keyframes walkArmLeft {

  0%,
  100% {
    transform: rotate(30deg) translateY(0);
  }

  50% {
    transform: rotate(-25deg) translateY(0.5px);
  }
}

@keyframes walkArmRight {

  0%,
  100% {
    transform: rotate(-25deg) translateY(0.5px);
  }

  50% {
    transform: rotate(30deg) translateY(0);
  }
}

@keyframes walkFeet {

  0%,
  50%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  25%,
  75% {
    transform: translateX(-50%) translateY(-1px);
  }
}

@keyframes walkFootLeft {

  0%,
  100% {
    transform: rotate(24deg) translateY(0.5px) translateX(1px);
  }

  25% {
    transform: rotate(0deg) translateY(-2px) translateX(0px);
  }

  50% {
    transform: rotate(-18deg) translateY(0) translateX(-2px);
  }

  75% {
    transform: rotate(-8deg) translateY(-1px) translateX(-1px);
  }
}

@keyframes walkFootRight {

  0%,
  100% {
    transform: rotate(-18deg) translateY(0) translateX(-2px);
  }

  25% {
    transform: rotate(-8deg) translateY(-1px) translateX(-1px);
  }

  50% {
    transform: rotate(24deg) translateY(0.5px) translateX(1px);
  }

  75% {
    transform: rotate(0deg) translateY(-2px) translateX(0px);
  }
}

@keyframes walkCape {

  0%,
  100% {
    transform: translateX(-50%) rotate(-1.5deg);
  }

  50% {
    transform: translateX(-50%) rotate(1.5deg);
  }
}

@keyframes runBob {

  0%,
  50%,
  100% {
    transform: translateY(0);
  }

  25%,
  75% {
    transform: translateY(-3.5px);
  }
}

@keyframes runTorso {

  0%,
  100% {
    transform: translateX(-50%) rotate(-4deg) translateY(1px);
  }

  50% {
    transform: translateX(-50%) rotate(4deg) translateY(1.5px);
  }
}

@keyframes runHead {

  0%,
  100% {
    transform: translateX(-50%) rotate(2deg) translateY(0);
  }

  50% {
    transform: translateX(-50%) rotate(-2deg) translateY(1px);
  }
}

@keyframes runArmLeft {

  0%,
  100% {
    transform: rotate(55deg) translateY(-1px) scaleY(0.9);
  }

  50% {
    transform: rotate(-45deg) translateY(1px) scaleY(1.05);
  }
}

@keyframes runArmRight {

  0%,
  100% {
    transform: rotate(-45deg) translateY(1px) scaleY(1.05);
  }

  50% {
    transform: rotate(55deg) translateY(-1px) scaleY(0.9);
  }
}

@keyframes runFeet {

  0%,
  50%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  25%,
  75% {
    transform: translateX(-50%) translateY(-2px);
  }
}

@keyframes runFootLeft {

  0%,
  100% {
    transform: rotate(45deg) translateY(2px) translateX(3px) scaleY(0.85);
  }

  25% {
    transform: rotate(10deg) translateY(-5px) translateX(1px) scaleY(1.05);
  }

  50% {
    transform: rotate(-35deg) translateY(0px) translateX(-4px) scaleY(0.95);
  }

  75% {
    transform: rotate(-15deg) translateY(-2px) translateX(-2px) scaleY(1.1);
  }
}

@keyframes runFootRight {

  0%,
  100% {
    transform: rotate(-35deg) translateY(0px) translateX(-4px) scaleY(0.95);
  }

  25% {
    transform: rotate(-15deg) translateY(-2px) translateX(-2px) scaleY(1.1);
  }

  50% {
    transform: rotate(45deg) translateY(2px) translateX(3px) scaleY(0.85);
  }

  75% {
    transform: rotate(10deg) translateY(-5px) translateX(1px) scaleY(1.05);
  }
}

@keyframes runCape {

  0%,
  100% {
    transform: translateX(-50%) rotate(-5deg) scaleY(0.9);
  }

  50% {
    transform: translateX(-50%) rotate(8deg) scaleY(1.1);
  }
}

@keyframes runBoots {

  0%,
  100% {
    margin-top: 0px;
  }

  50% {
    margin-top: -2px;
  }
}

@keyframes runShadow {

  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.95;
  }

  50% {
    transform: translateX(-50%) scaleX(0.88);
    opacity: 0.7;
  }
}

@keyframes weaponSway {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

@keyframes orbPulse {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.15);
    filter: brightness(1.3);
  }
}

.remotePlayer,
#player {
  position: absolute;
  width: 64px;
  height: 96px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%);
  z-index: 50;
}

.remotePlayer {
  pointer-events: auto;
  cursor: pointer;
}

#player {
  pointer-events: none !important;
}

#player .charSprite {
  pointer-events: auto !important;
  cursor: pointer;
}

.playerName {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--ui-gold);
  font-weight: bold;
  font-size: 18px;
  text-shadow:
    -1px 0 rgba(255, 0, 80, 0.4),
    1px 0 rgba(0, 255, 200, 0.4),
    0 2px 4px #000;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: rgba(13, 10, 7, 0.7);
  border: 1px solid rgba(216, 180, 106, 0.35);
  border-radius: 4px;
  transition: all 0.25s ease;
}

.playerTitle {
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #bfa17a;
  margin-top: 0px;
  white-space: nowrap;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

.playerGuild {
  font-size: 14px;
  font-weight: 600;
  color: #3498db;
  margin-top: 0px;
  white-space: nowrap;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 3px;
}

.playerGuildEmblem {
  font-size: 14px;
}

#player .playerTitle,
#player .playerGuild,
.remotePlayer:hover .playerTitle,
.remotePlayer.active-hover .playerTitle,
#player:hover .playerTitle,
#player.active-hover .playerTitle,
.remotePlayer:hover .playerGuild,
.remotePlayer.active-hover .playerGuild,
#player:hover .playerGuild,
#player.active-hover .playerGuild {
  opacity: 1;
  max-height: 26px;
  margin-top: 2px;
}

/* ==========================================
   PRESTIGIOUS & IMPOSING ORNAMENTS SYSTEM
   ========================================== */

/* Tier 1 - Common Ornaments (Bronze, Explorateur, Gardien du Lore) */
.playerName--ornament-Bronze {
  border: 1.5px solid #cd7f32 !important;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.5) !important;
  background: rgba(13, 10, 7, 0.8) !important;
}

.playerName--ornament-Bronze::before,
.playerName--ornament-Bronze::after {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpolygon points='12,2 20,12 12,22 4,12' fill='%23cd7f32' stroke='%23ffa726' stroke-width='1.5'/%3E%3Cpolygon points='12,6 16,12 12,18 8,12' fill='%238d4f1d'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23ffe0b2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.playerName--ornament-Bronze::before {
  left: -18px;
}

.playerName--ornament-Bronze::after {
  right: -18px;
}

.playerName--ornament-Explorateur {
  border: 1.5px solid #4caf50 !important;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.55) !important;
  background: linear-gradient(180deg, rgba(16, 32, 20, 0.9) 0%, rgba(8, 16, 10, 0.9) 100%) !important;
}

.playerName--ornament-Explorateur::before,
.playerName--ornament-Explorateur::after {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c5.5 0 10 4.5 10 10 5.5 0 10-4.5 10-10C22 6.5 17.5 2 12 2z' fill='%234caf50' stroke='%2381c784' stroke-width='1.5'/%3E%3Cpath d='M12 2v20M2 12h20' stroke='%23a5d6a7' stroke-width='1' stroke-dasharray='2,2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23c8e6c9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.playerName--ornament-Explorateur::before {
  left: -18px;
}

.playerName--ornament-Explorateur::after {
  right: -18px;
}

.playerName--ornament-GardienduLore {
  border: 1.5px solid #7e57c2 !important;
  box-shadow: 0 0 9px rgba(126, 87, 194, 0.6) !important;
  background: linear-gradient(180deg, rgba(22, 16, 36, 0.9) 0%, rgba(10, 8, 18, 0.9) 100%) !important;
}

.playerName--ornament-GardienduLore::before,
.playerName--ornament-GardienduLore::after {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d8b46a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2z' fill='rgba(216,180,106,0.2)'/%3E%3Cline x1='8' y1='9' x2='14' y2='9'/%3E%3Cline x1='8' y1='13' x2='12' y2='13'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.playerName--ornament-GardienduLore::before {
  left: -18px;
}

.playerName--ornament-GardienduLore::after {
  right: -18px;
}

.playerName--ornament-GardienduLore::after {
  right: -16px;
}


/* Tier 2 - Uncommon Ornaments (Argent, Maître des Quêtes, Seigneur des Flammes) */
.playerName--ornament-Argent {
  border: 1.5px solid #e0e0e0 !important;
  box-shadow: 0 0 11px rgba(224, 224, 224, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(180deg, rgba(27, 33, 38, 0.92) 0%, rgba(13, 16, 19, 0.92) 100%) !important;
  animation: silverPulse 3.5s infinite ease-in-out;
}

.playerName--ornament-Argent::before,
.playerName--ornament-Argent::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpolygon points='12,2 15,9 22,12 15,15 12,22 9,15 2,12 9,9' fill='%23e0e0e0' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpolygon points='12,6 13.5,10.5 18,12 13.5,13.5 12,18 10.5,13.5 6,12 10.5,10.5' fill='%239e9e9e'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 4px #ffffff);
}

.playerName--ornament-Argent::before {
  left: -22px;
}

.playerName--ornament-Argent::after {
  right: -22px;
}

@keyframes silverPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(224, 224, 224, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.1);
  }

  50% {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.4);
  }
}

.playerName--ornament-Maitre-des-Quetes {
  border: 1.5px solid #b388ff !important;
  box-shadow: 0 0 12px rgba(179, 136, 255, 0.7), inset 0 0 4px rgba(179, 136, 255, 0.3) !important;
  background: linear-gradient(135deg, rgba(28, 14, 42, 0.92) 0%, rgba(10, 6, 18, 0.92) 100%) !important;
  animation: questMasterGlow 3s infinite ease-in-out;
}

.playerName--ornament-Maitre-des-Quetes::before,
.playerName--ornament-Maitre-des-Quetes::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' fill='%23311b92' stroke='%23b388ff' stroke-width='1.5'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h5' stroke='%23ea80fc' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpolygon points='15,14 16.5,17 19.5,17.5 17.2,19.5 18,22.5 15,21 12,22.5 12.8,19.5 10.5,17.5 13.5,17' fill='%23ffd700'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 5px #b388ff);
}

.playerName--ornament-Maitre-des-Quetes::before {
  left: -22px;
}

.playerName--ornament-Maitre-des-Quetes::after {
  right: -22px;
}

@keyframes questMasterGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(179, 136, 255, 0.6);
  }

  50% {
    box-shadow: 0 0 18px rgba(179, 136, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.4);
  }
}

.playerName--ornament-SeigneurdesFlammes {
  border: 1.5px solid #ff5722 !important;
  box-shadow: 0 0 13px rgba(255, 87, 34, 0.75), inset 0 0 4px rgba(255, 87, 34, 0.3) !important;
  background: linear-gradient(135deg, rgba(42, 14, 8, 0.92) 0%, rgba(18, 6, 3, 0.92) 100%) !important;
  animation: flameGlow 3s infinite ease-in-out;
}

.playerName--ornament-SeigneurdesFlammes::before,
.playerName--ornament-SeigneurdesFlammes::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='M12 2c-2 4-6 6-6 11 0 4.4 3.6 8 8 8s8-3.6 8-8c0-5-4-7-6-11-1 3-3 4-4 0z' fill='%23ff3d00' stroke='%23ff9100' stroke-width='1.5'/%3E%3Cpath d='M12 8c-1.5 2.5-4 4-4 7 0 2.8 2.2 5 5 5s5-2.2 5-5c0-3-2.5-4.5-4-7z' fill='%23ffea00'/%3E%3Cpath d='M12 14c-.8 1-2 2-2 3.5 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0-1.5-1.2-2.5-2-3.5z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 5px #ff5722);
}

.playerName--ornament-SeigneurdesFlammes::before {
  left: -22px;
}

.playerName--ornament-SeigneurdesFlammes::after {
  right: -22px;
}

@keyframes flameGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 87, 34, 0.6);
  }

  50% {
    box-shadow: 0 0 20px rgba(255, 87, 34, 0.95), 0 0 7px rgba(255, 152, 0, 0.5);
  }
}


/* Tier 3 - Rare Ornaments (Or, Seigneur des Abysses, Tueur de Légendes, Aura d'Éveil) */
.playerName--ornament-Or {
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.8), inset 0 0 5px rgba(255, 215, 0, 0.35) !important;
  background: linear-gradient(180deg, rgba(42, 34, 18, 0.94) 0%, rgba(18, 14, 8, 0.94) 100%) !important;
  animation: goldPulse 2.5s infinite ease-in-out;
}

.playerName--ornament-Or::before,
.playerName--ornament-Or::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M12 2c1.5 3 4 5 4 8 0 2.5-1.8 4.5-4 4.8-2.2-.3-4-2.3-4-4.8 0-3 2.5-5 4-8z' fill='%23ffd700' stroke='%23fff59d' stroke-width='1.2'/%3E%3Cpath d='M6 10c2.5 0 4.5 1.5 5 3.5-2.5.5-4.5 2-5 4-1-1.5-1.5-3.5 0-7.5z' fill='%23ffb300'/%3E%3Cpath d='M18 10c-2.5 0-4.5 1.5-5 3.5 2.5.5 4.5 2 5 4 1-1.5 1.5-3.5 0-7.5z' fill='%23ffb300'/%3E%3Cpath d='M4 16h16v2H4z' fill='%23ff8f00'/%3E%3Cpath d='M12 18l-3 4h6l-3-4z' fill='%23ffd700'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 6px #ffd700);
}

.playerName--ornament-Or::before {
  left: -25px;
}

.playerName--ornament-Or::after {
  right: -25px;
}

@keyframes goldPulse {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.65), inset 0 0 4px rgba(255, 215, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 22px rgba(255, 215, 0, 1), inset 0 0 7px rgba(255, 255, 255, 0.4);
  }
}

.playerName--ornament-SeigneurdesAbysses {
  border: 2px solid #00b0ff !important;
  box-shadow: 0 0 16px rgba(0, 176, 255, 0.8), inset 0 0 5px rgba(0, 176, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(6, 28, 48, 0.94) 0%, rgba(3, 12, 22, 0.94) 100%) !important;
  animation: abyssAura 2.5s infinite ease-in-out;
}

.playerName--ornament-SeigneurdesAbysses::before,
.playerName--ornament-SeigneurdesAbysses::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M12 2l2 4v8h-4V6l2-4zm-6 3l2 3v6H6V8l0-3zm12 0l2 3v6h-2V8l0-3z' fill='%2300e5ff' stroke='%2380d8ff' stroke-width='1'/%3E%3Cpath d='M6 14c0 3.3 2.7 6 6 6s6-2.7 6-6H6z' fill='%2300b0ff'/%3E%3Cpath d='M11 16h2v6h-2v-6z' fill='%2300838f'/%3E%3Ccircle cx='12' cy='10' r='1.5' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 6px #00b0ff);
}

.playerName--ornament-SeigneurdesAbysses::before {
  left: -25px;
}

.playerName--ornament-SeigneurdesAbysses::after {
  right: -25px;
}

@keyframes abyssAura {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(0, 176, 255, 0.6), inset 0 0 3px rgba(0, 176, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 24px rgba(0, 176, 255, 0.95), inset 0 0 7px rgba(255, 255, 255, 0.4);
  }
}

.playerName--ornament-Tueur-de-Legendes {
  border: 2px solid #d50000 !important;
  box-shadow: 0 0 17px rgba(213, 0, 0, 0.85), inset 0 0 6px rgba(139, 0, 0, 0.4) !important;
  background: linear-gradient(135deg, rgba(42, 8, 12, 0.94) 0%, rgba(18, 3, 5, 0.94) 100%) !important;
  animation: slayerFire 2.5s infinite ease-in-out;
}

.playerName--ornament-Tueur-de-Legendes::before,
.playerName--ornament-Tueur-de-Legendes::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 3 2 5.5 4 7v3h6v-3c2-1.5 4-4 4-7 0-4-3-7-7-7z' fill='%23d50000' stroke='%23ff5252' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23000000'/%3E%3Ccircle cx='15' cy='9' r='2' fill='%23000000'/%3E%3Ccircle cx='9' cy='9' r='0.8' fill='%23ff5252'/%3E%3Ccircle cx='15' cy='9' r='0.8' fill='%23ff5252'/%3E%3Cpolygon points='12,12 10,15 14,15' fill='%23000000'/%3E%3Cpath d='M8 19h8v2H8z' fill='%23ff8a80'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 7px #d50000);
}

.playerName--ornament-Tueur-de-Legendes::before {
  left: -27px;
}

.playerName--ornament-Tueur-de-Legendes::after {
  right: -27px;
}

@keyframes slayerFire {

  0%,
  100% {
    box-shadow: 0 0 13px rgba(213, 0, 0, 0.65), inset 0 0 4px rgba(139, 0, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 26px rgba(213, 0, 0, 0.95), 0 0 8px rgba(255, 152, 0, 0.6);
  }
}

.playerName--ornament-AuradEveil,
.playerName--ornament-Aura-d-Eveil,
.playerName--ornament-Aurad’Eveil,
.playerName--ornament-Auradéveil {
  border: 2px solid #e040fb !important;
  box-shadow: 0 0 17px rgba(224, 64, 251, 0.85), inset 0 0 6px rgba(224, 64, 251, 0.4) !important;
  background: linear-gradient(135deg, rgba(32, 10, 42, 0.94) 0%, rgba(12, 5, 18, 0.94) 100%) !important;
  animation: awakeningSoulAura 2.5s infinite ease-in-out;
}

.playerName--ornament-AuradEveil::before,
.playerName--ornament-AuradEveil::after,
.playerName--ornament-Aura-d-Eveil::before,
.playerName--ornament-Aura-d-Eveil::after,
.playerName--ornament-Aurad’Eveil::before,
.playerName--ornament-Aurad’Eveil::after,
.playerName--ornament-Auradéveil::before,
.playerName--ornament-Auradéveil::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='24' height='24'%3E%3Ccircle cx='16' cy='16' r='6' fill='%23ea80fc' stroke='%23e040fb' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='2.5' fill='%23ffffff'/%3E%3Cellipse cx='16' cy='16' rx='14' ry='5' fill='none' stroke='%2300e5ff' stroke-width='1.2' stroke-dasharray='3,1' transform='rotate(-25 16 16)'/%3E%3Cg transform='translate(5, 7)'%3E%3Ccircle cx='0' cy='0' r='3' fill='%23ffd700'/%3E%3Cellipse cx='0' cy='0' rx='5' ry='1.8' fill='none' stroke='%23ffea00' stroke-width='1' transform='rotate(20)'/%3E%3C/g%3E%3Ccircle cx='26' cy='11' r='2.5' fill='%2300b0ff' stroke='%2380d8ff' stroke-width='0.8'/%3E%3Ccircle cx='9' cy='25' r='2' fill='%23ff4081' stroke='%23ff80ab' stroke-width='0.8'/%3E%3Ccircle cx='23' cy='23' r='1.2' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 8px #e040fb) drop-shadow(0 0 4px #00e5ff);
}

.playerName--ornament-AuradEveil::before,
.playerName--ornament-Aura-d-Eveil::before,
.playerName--ornament-Aurad’Eveil::before,
.playerName--ornament-Auradéveil::before {
  left: -32px;
}

.playerName--ornament-AuradEveil::after,
.playerName--ornament-Aura-d-Eveil::after,
.playerName--ornament-Aurad’Eveil::after,
.playerName--ornament-Auradéveil::after {
  right: -32px;
}

@keyframes awakeningSoulAura {

  0%,
  100% {
    box-shadow: 0 0 13px rgba(224, 64, 251, 0.65), inset 0 0 4px rgba(224, 64, 251, 0.3);
  }

  50% {
    box-shadow: 0 0 25px rgba(224, 64, 251, 0.95), 0 0 8px rgba(0, 229, 255, 0.5);
  }
}


/* Tier 4 - Epic Ornaments (Grand Maître, Couronne de Brume, Champion Céleste) */
.playerName--ornament-Grand-Maitre {
  border: 2px solid #ff9100 !important;
  border-image: linear-gradient(135deg, #ff9100, #ffea00) 1 !important;
  box-shadow: 0 0 22px rgba(255, 145, 0, 0.9), inset 0 0 8px rgba(255, 215, 0, 0.4) !important;
  background: linear-gradient(135deg, rgba(48, 28, 10, 0.96) 0%, rgba(20, 12, 5, 0.96) 100%) !important;
  animation: grandMasterShimmer 2.2s infinite ease-in-out;
}

.playerName--ornament-Grand-Maitre::before,
.playerName--ornament-Grand-Maitre::after {
  content: "";
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Cpath d='M3 17l2-10 4 4 3-7 3 7 4-4 2 10H3z' fill='%23ff9100' stroke='%23ffd700' stroke-width='1.5'/%3E%3Ccircle cx='5' cy='7' r='1.5' fill='%23ff1744'/%3E%3Ccircle cx='12' cy='4' r='2' fill='%23ffd700'/%3E%3Ccircle cx='19' cy='7' r='1.5' fill='%23ff1744'/%3E%3Crect x='3' y='17' width='18' height='3' rx='1' fill='%23ff6d00' stroke='%23ffd700' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 8px #ff9100);
}

.playerName--ornament-Grand-Maitre::before {
  left: -30px;
}

.playerName--ornament-Grand-Maitre::after {
  right: -30px;
}

@keyframes grandMasterShimmer {

  0%,
  100% {
    box-shadow: 0 0 16px rgba(255, 145, 0, 0.75), inset 0 0 6px rgba(255, 215, 0, 0.35);
  }

  50% {
    box-shadow: 0 0 28px rgba(255, 145, 0, 1), 0 0 12px rgba(255, 255, 255, 0.8);
  }
}

.playerName--ornament-CouronnodeBrume,
.playerName--ornament-Couronne-de-Brume,
.playerName--ornament-Couronnodebrume {
  border: 2px solid #00e5ff !important;
  border-image: linear-gradient(135deg, #00e5ff, #aa00ff) 1 !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.9), 0 0 10px rgba(156, 39, 176, 0.7), inset 0 0 6px rgba(0, 229, 255, 0.4) !important;
  background: linear-gradient(135deg, rgba(10, 20, 42, 0.96) 0%, rgba(32, 8, 48, 0.96) 100%) !important;
  animation: mistCrownAura 2.2s infinite ease-in-out;
}

.playerName--ornament-CouronnodeBrume::before,
.playerName--ornament-CouronnodeBrume::after,
.playerName--ornament-Couronne-de-Brume::before,
.playerName--ornament-Couronne-de-Brume::after,
.playerName--ornament-Couronnodebrume::before,
.playerName--ornament-Couronnodebrume::after {
  content: "";
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='26' height='26'%3E%3Cpath d='M4 22l3-12 5 5 4-10 4 10 5-5 3 12H4z' fill='%23ffd700' stroke='%23ffb300' stroke-width='1.5'/%3E%3Crect x='4' y='22' width='24' height='4' rx='1.5' fill='%23ff8f00' stroke='%23ffd700' stroke-width='1'/%3E%3Ccircle cx='7' cy='10' r='2.5' fill='%23ff1744' stroke='%23ffffff' stroke-width='0.8'/%3E%3Cpolygon points='16,2 18,5 16,8 14,5' fill='%2300e5ff' stroke='%23ffffff' stroke-width='0.8'/%3E%3Ccircle cx='25' cy='10' r='2.5' fill='%2300e676' stroke='%23ffffff' stroke-width='0.8'/%3E%3Ccircle cx='8' cy='24' r='1.5' fill='%2300e5ff'/%3E%3Ccircle cx='12' cy='24' r='1.5' fill='%23ff1744'/%3E%3Ccircle cx='16' cy='24' r='1.8' fill='%23ffd700'/%3E%3Ccircle cx='20' cy='24' r='1.5' fill='%23ff1744'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%2300e5ff'/%3E%3Cpolygon points='2,14 4,12 2,10 0,12' fill='%23ff1744'/%3E%3Cpolygon points='30,14 32,12 30,10 28,12' fill='%2300e676'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 9px #ffd700) drop-shadow(0 0 4px #00e5ff);
}

.playerName--ornament-CouronnodeBrume::before,
.playerName--ornament-Couronne-de-Brume::before,
.playerName--ornament-Couronnodebrume::before {
  left: -34px;
}

.playerName--ornament-CouronnodeBrume::after,
.playerName--ornament-Couronne-de-Brume::after,
.playerName--ornament-Couronnodebrume::after {
  right: -34px;
}

@keyframes mistCrownAura {

  0%,
  100% {
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.7), 0 0 8px rgba(156, 39, 176, 0.45);
  }

  50% {
    box-shadow: 0 0 30px rgba(0, 229, 255, 1), 0 0 15px rgba(156, 39, 176, 0.85);
  }
}

.playerName--ornament-ChampionCeleste,
.playerName--ornament-ChampionCéleste {
  border: 2px solid #ffd700 !important;
  border-image: linear-gradient(135deg, #ffd700, #ffffff) 1 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 255, 255, 0.7), inset 0 0 7px rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(135deg, rgba(46, 38, 14, 0.96) 0%, rgba(18, 14, 5, 0.96) 100%) !important;
  animation: celestialChampionAura 2s infinite ease-in-out;
}

.playerName--ornament-ChampionCeleste::before,
.playerName--ornament-ChampionCeleste::after,
.playerName--ornament-ChampionCéleste::before,
.playerName--ornament-ChampionCéleste::after {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='28' height='28'%3E%3Cpolygon points='16,2 19,11 28,12 20,17 23,26 16,21 9,26 12,17 4,12 13,11' fill='%23ffffff' stroke='%23ffd700' stroke-width='1.5'/%3E%3Cpolygon points='16,7 18,12 23,13 19,16 20,21 16,18 12,21 13,16 9,13 14,12' fill='%23fff59d'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23ffd700'/%3E%3Cpath d='M6 6l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM26 6l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM4 24l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM26 24l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM16 0l.8 1.6L18 2l-1.2.8L16 4.4l-.8-1.6L14 2l1.2-.8zM16 27l.8 1.6L18 29l-1.2.8L16 31.4l-.8-1.6L14 29l1.2-.8z' fill='%23ffd700'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 4px #ffffff);
}

.playerName--ornament-ChampionCeleste::before,
.playerName--ornament-ChampionCéleste::before {
  left: -36px;
}

.playerName--ornament-ChampionCeleste::after,
.playerName--ornament-ChampionCéleste::after {
  right: -36px;
}

@keyframes celestialChampionAura {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.75), 0 0 8px rgba(255, 255, 255, 0.5);
  }

  50% {
    box-shadow: 0 0 32px rgba(255, 215, 0, 1), 0 0 16px rgba(255, 255, 255, 1);
  }
}

.playerName--ornament-Heros-Epique {
  border: 2px solid #00e5ff !important;
  border-image: linear-gradient(135deg, #00e5ff, #ffffff) 1 !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.9), inset 0 0 7px rgba(0, 229, 255, 0.4) !important;
  background: linear-gradient(135deg, rgba(10, 32, 42, 0.96) 0%, rgba(5, 14, 20, 0.96) 100%) !important;
  animation: heroPulse 2s infinite ease-in-out;
}

.playerName--ornament-Heros-Epique::before,
.playerName--ornament-Heros-Epique::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z' fill='%2300b0ff' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M12 5l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z' fill='%23ffd700'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 8px #00e5ff);
}

.playerName--ornament-Heros-Epique::before {
  left: -32px;
}

.playerName--ornament-Heros-Epique::after {
  right: -32px;
}

@keyframes heroPulse {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.75);
  }

  50% {
    box-shadow: 0 0 28px rgba(0, 229, 255, 1), 0 0 12px rgba(255, 255, 255, 0.85);
  }
}


/* Tier 5 - Legendary/Divine Ornaments (Divin, Demi-Dieu) */
.playerName--ornament-Divin {
  border: 2.5px solid #e040fb !important;
  border-image: linear-gradient(135deg, #e040fb, #ff4081, #00e5ff) 1 !important;
  box-shadow: 0 0 30px rgba(224, 64, 251, 0.95), inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(135deg, rgba(42, 10, 50, 0.98) 0%, rgba(15, 4, 25, 0.98) 100%) !important;
  animation: divineGlow 2.2s infinite ease-in-out;
}

.playerName--ornament-Divin::before,
.playerName--ornament-Divin::after {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28'%3E%3Cellipse cx='12' cy='4' rx='7' ry='2' fill='none' stroke='%23ffd700' stroke-width='1.5'/%3E%3Cpath d='M12 8c-3-3-8-3-10 1 0 5 4 9 10 12 6-3 10-7 10-12-2-4-7-4-10-1z' fill='%23e040fb' stroke='%23ffffff' stroke-width='1.2'/%3E%3Cpath d='M12 10c-2-2-5-2-7 1 0 3 2.5 6 7 8 4.5-2 7-5 7-8-2-3-5-3-7-1z' fill='%23ff4081'/%3E%3Ccircle cx='12' cy='13' r='2' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 10px #e040fb) drop-shadow(0 0 5px #ff4081);
}

.playerName--ornament-Divin::before {
  left: -36px;
}

.playerName--ornament-Divin::after {
  right: -36px;
}

@keyframes divineGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(224, 64, 251, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 36px rgba(224, 64, 251, 1), 0 0 16px rgba(255, 64, 129, 0.8), inset 0 0 12px rgba(255, 255, 255, 0.7);
  }
}

.playerName--ornament-Demi-Dieu {
  border: 2.5px solid #ff007f !important;
  border-image: linear-gradient(45deg, #ff007f, #00f0ff, #ffeb3b, #ff007f) 1 !important;
  box-shadow: 0 0 32px rgba(255, 0, 127, 0.95), 0 0 16px rgba(0, 240, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.7) !important;
  background: linear-gradient(135deg, rgba(50, 6, 28, 0.98) 0%, rgba(8, 3, 20, 0.98) 100%) !important;
  animation: demiGodCosmic 1.8s infinite linear;
}

.playerName--ornament-Demi-Dieu::before,
.playerName--ornament-Demi-Dieu::after {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='30' height='30'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23ff007f' stroke='%2300f0ff' stroke-width='1.5'/%3E%3Cpolygon points='13,3 7,12 12,12 11,21 17,10 12,10' fill='%23ffeb3b' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 12px #ff007f) drop-shadow(0 0 6px #00f0ff);
}

.playerName--ornament-Demi-Dieu::before {
  left: -38px;
}

.playerName--ornament-Demi-Dieu::after {
  right: -38px;
}

@keyframes demiGodCosmic {
  0% {
    box-shadow: 0 0 22px rgba(255, 0, 127, 0.9), 0 0 10px rgba(0, 240, 255, 0.5), inset 0 0 6px rgba(255, 255, 255, 0.5);
    filter: hue-rotate(0deg);
  }

  50% {
    box-shadow: 0 0 38px rgba(255, 0, 127, 1), 0 0 22px rgba(0, 240, 255, 0.95), inset 0 0 12px rgba(255, 255, 255, 0.85);
    filter: hue-rotate(180deg);
  }

  100% {
    box-shadow: 0 0 22px rgba(255, 0, 127, 0.9), 0 0 10px rgba(0, 240, 255, 0.5), inset 0 0 6px rgba(255, 255, 255, 0.5);
    filter: hue-rotate(360deg);
  }
}

/* Sprite container with idle breathing & stereoscopic 3D offset */
.charSprite {
  --char-color: var(--body-color, #c94f4f);
  --char-skin-start: var(--skin-color, #ffdcb6);
  --char-skin-stop: var(--skin-color, #d8a06c);
  --char-hair-color-start: var(--hair-color, #704326);
  --char-hair-color-stop: var(--hair-color, #392115);
  --char-eyes-color: var(--eyes-color, #2e1b12);
  position: relative;
  width: 64px;
  height: 96px;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 3px 0 rgba(44, 22, 9, 0.35)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 1;
  animation: idleBob 3s ease-in-out infinite;
}

.charSprite.walking {
  animation: walkBob 0.34s linear infinite;
}

.charSprite.walking::after {
  animation: runShadow 0.34s linear infinite;
}

.charSprite.in-world::before,
.charSprite.character-avatar::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 28px;
  left: 50%;
  top: 47px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 35%),
    linear-gradient(180deg, #7b1f1f, #461111 70%, #2f0b0b 100%);
  clip-path: polygon(10% 0%, 90% 0%, 100% 75%, 76% 100%, 50% 88%, 24% 100%, 0% 75%);
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.18);
  opacity: 0.98;
  z-index: 0;
}

.charSprite.equipment-standalone-render::before,
.charSprite.equipment-standalone-render::after,
.charSprite[data-headgear]::before,
.charSprite[data-headgear]::after,
.charSprite[data-cape]::before,
.charSprite[data-cape]::after,
.charSprite[data-boots]::before,
.charSprite[data-boots]::after,
.charSprite[data-belt]::before,
.charSprite[data-belt]::after,
.charSprite[data-ring-left]::before,
.charSprite[data-ring-left]::after,
.charSprite[data-amulet]::before,
.charSprite[data-amulet]::after,
.charSprite[data-relic]::before,
.charSprite[data-relic]::after,
.charSprite[data-weapon]::before,
.charSprite[data-weapon]::after,
.charSprite[data-staff]::before,
.charSprite[data-staff]::after,
.charSprite[data-bow]::before,
.charSprite[data-bow]::after,
.charSprite[data-shovel]::before,
.charSprite[data-shovel]::after,
.charSprite[data-axe]::before,
.charSprite[data-axe]::after,
.charSprite[data-shield]::before,
.charSprite[data-shield]::after,
.charSprite[data-pet]::before,
.charSprite[data-pet]::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.charSprite::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 32px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}

.charBody {
  position: absolute;
  width: 30px;
  height: 36px;
  left: 50%;
  top: 36px;
  transform: translateX(-50%);
  border-radius: 13px 13px 10px 10px;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.34) 0%, transparent 28%),
    linear-gradient(90deg, transparent 0 28%, rgba(255, 238, 210, 0.22) 28% 50%, transparent 50% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(42, 17, 8, 0.28) 100%),
    var(--char-color, #c94f4f);
  border: 2px solid #1c1511;
  box-shadow:
    inset 0 3px 5px rgba(255, 255, 255, 0.28),
    inset 0 -7px 10px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.charSprite.walking .charBody {
  animation: walkTorso 0.34s ease-in-out infinite;
  transform-origin: 50% 18%;
}

.charHead {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  border-radius: 48% 48% 46% 46%;
  background: radial-gradient(circle at 36% 28%, #fff2e3 0%, var(--char-skin-start, #ffdcb6) 34%, var(--char-skin-stop, #d8a06c) 72%, var(--char-skin-shadow, #996742) 100%);
  border: 2px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.34), inset -1px -3px 4px rgba(0, 0, 0, 0.22);
  z-index: 3;
}

.charSprite.walking .charHead {
  animation: walkHead 0.34s ease-in-out infinite;
  transform-origin: 50% 85%;
}

.charHead::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: -1px;
  height: 10px;
  background: linear-gradient(180deg, #704326, #392115);
  border-radius: 50% 50% 40% 40%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.charHead::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 11px;
  height: 6px;
  background:
    radial-gradient(circle at 25% 45%, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 45%, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 100%, rgba(168, 86, 64, 0.7) 0 1px, transparent 1.6px);
  opacity: 0.75;
}

.charBody::before,
.charBody::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 23px;
  top: 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--char-skin-start, #f7d2b0), var(--char-skin-stop, #c78d62) 68%, #a56b44 100%);
  border: 1.5px solid #1c1511;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  z-index: 1;
}

.charBody::before {
  left: -5px;
  transform: rotate(14deg);
  transform-origin: top center;
}

.charBody::after {
  right: -5px;
  transform: rotate(-14deg);
  transform-origin: top center;
}

.charSprite.walking .charBody::before {
  animation: walkArmLeft 0.34s ease-in-out infinite;
}

.charSprite.walking .charBody::after {
  animation: walkArmRight 0.34s ease-in-out infinite;
}

/* Class theme text colors */
.class-guerrier .classText {
  color: #d2a35c;
}

.class-mage .classText {
  color: #6aa8ff;
}

.class-archer .classText {
  color: #7fd06a;
}

.class-necromancien .classText {
  color: #b56cff;
}

.class-guerrier.charSprite::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #7f2b24, #4a1613 72%, #2e0d0c 100%);
}

.class-mage.charSprite::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #3f5fa7, #243d7a 72%, #142347 100%);
}

.class-archer.charSprite::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #5b6f2d, #39481e 72%, #233013 100%);
}

.class-necromancien.charSprite::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #5c2b75, #341747 72%, #1d0d28 100%);
}

.class-guerrier {
  --char-hair-color-start: #6d4024;
  --char-hair-color-stop: #392115;
}

.class-mage {
  --char-hair-color-start: #d7edf8;
  --char-hair-color-stop: #8cb2d7;
}

.class-archer {
  --char-hair-color-start: #7a4c2d;
  --char-hair-color-stop: #402414;
}

.class-necromancien {
  --char-hair-color-start: #d9d2e9;
  --char-hair-color-stop: #8b79a8;
}

.charHead::before {
  background: linear-gradient(180deg, var(--char-hair-color-start, #704326), var(--char-hair-color-stop, #392115)) !important;
}

/* =========================
   EQUIPMENT VISUAL LAYERS
   ========================= */

.charCape,
.charFeet,
.charBoots,
.charBelt,
.charRingLeft,
.charRingRight,
.charAmulet,
.charHeadgear {
  position: absolute;
  pointer-events: none;
  transition: all 0.25s ease;
}

.charFeet {
  left: 50%;
  top: 64px;
  width: 30px;
  height: 16px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent 0 19%, var(--char-skin-start, #d7a378) 19% 35%, transparent 35% 65%, var(--char-skin-start, #d7a378) 65% 81%, transparent 81% 100%),
    linear-gradient(180deg, transparent 0 24%, rgba(144, 91, 58, 0.22) 24% 100%);
  z-index: 3;
}

.charSprite.walking .charFeet {
  animation: walkFeet 0.34s ease-in-out infinite;
}

.charFeet::before,
.charFeet::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 11px;
  height: 8px;
  background: linear-gradient(180deg, var(--char-skin-start, #e4b187), var(--char-skin-stop, #986140));
  border: 1.5px solid #1c1511;
  border-radius: 7px 7px 4px 4px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.charFeet::before {
  left: 2px;
  transform: rotate(4deg);
}

.charFeet::after {
  right: 2px;
  transform: rotate(-4deg);
}

.charSprite.walking .charFeet::before {
  animation: walkFootLeft 0.34s ease-in-out infinite;
}

.charSprite.walking .charFeet::after {
  animation: walkFootRight 0.34s ease-in-out infinite;
}

/* Generic fallback when equipped but no named skin defined */
.charHeadgear.equipped {
  background: linear-gradient(180deg, rgba(200, 150, 80, 0.8), rgba(120, 80, 40, 0.8));
  border: 1.5px solid rgba(255, 200, 100, 0.6);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 4px rgba(255, 180, 60, 0.4);
}

.charCape.equipped {
  background: linear-gradient(180deg, rgba(100, 80, 160, 0.75), rgba(50, 40, 100, 0.75));
  border: 1.5px solid rgba(180, 150, 255, 0.5);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 2px 5px rgba(120, 80, 200, 0.3);
}

.charAmulet.equipped {
  background: radial-gradient(circle, #ffe066 0%, #e6ac00 60%);
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 6px rgba(255, 220, 0, 0.7);
  z-index: 4 !important;
  top: 45px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  /* Devant le corps et la tête quand le perso est de face */
}

.charBoots.equipped {
  background: linear-gradient(180deg, rgba(100, 70, 40, 0.85), rgba(60, 40, 20, 0.85));
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.charBelt.equipped {
  width: 28px !important;
  height: 6px !important;
  top: 61px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  z-index: 3 !important;
  background: linear-gradient(180deg, rgba(120, 80, 35, 0.95), rgba(70, 40, 18, 0.95));
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  z-index: 6 !important;
  background: radial-gradient(circle, #ffe082 0%, #d4a017 70%);
  border: 1px solid rgba(98, 67, 16, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.65);
}

.charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  z-index: 6 !important;
  background: radial-gradient(circle, #ffe082 0%, #d4a017 70%);
  border: 1px solid rgba(98, 67, 16, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.65);
}

/* --- GENERATED_EQUIPMENT_STYLES --- */
.charSprite[data-cape="aile-glaciale-du-dragon-de-givre"] .charCape,
.charSprite[data-cape="aile-glaciale-du-dragon-de-givre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-amulet="amulette-celeste"] .charAmulet,
.charSprite[data-amulet="amulette-celeste"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-celeste"] .charAmulet::after,
.charSprite[data-amulet="amulette-celeste"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-cornue"] .charAmulet,
.charSprite[data-amulet="amulette-cornue"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-cornue"] .charAmulet::after,
.charSprite[data-amulet="amulette-cornue"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-daigle-des-sommets"] .charAmulet,
.charSprite[data-amulet="amulette-daigle-des-sommets"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-daigle-des-sommets"] .charAmulet::after,
.charSprite[data-amulet="amulette-daigle-des-sommets"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-aigle-des-sommets"] .charAmulet,
.charSprite[data-amulet="amulette-d-aigle-des-sommets"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-aigle-des-sommets"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-aigle-des-sommets"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-daraignee-sylvestre"] .charAmulet,
.charSprite[data-amulet="amulette-daraignee-sylvestre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 20px 20px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-daraignee-sylvestre"] .charAmulet::after,
.charSprite[data-amulet="amulette-daraignee-sylvestre"] .charAmulet.equipped::after {
  content: "🕸️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-araignee-sylvestre"] .charAmulet,
.charSprite[data-amulet="amulette-d-araignee-sylvestre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 20px 20px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-araignee-sylvestre"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-araignee-sylvestre"] .charAmulet.equipped::after {
  content: "🕸️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-darchimage-supreme"] .charAmulet,
.charSprite[data-amulet="amulette-darchimage-supreme"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-darchimage-supreme"] .charAmulet::after,
.charSprite[data-amulet="amulette-darchimage-supreme"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-archimage-supreme"] .charAmulet,
.charSprite[data-amulet="amulette-d-archimage-supreme"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-archimage-supreme"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-archimage-supreme"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-blours"] .charAmulet,
.charSprite[data-amulet="amulette-de-blours"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-blours"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-blours"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-bouc-hargneux"] .charAmulet,
.charSprite[data-amulet="amulette-de-bouc-hargneux"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-bouc-hargneux"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-bouc-hargneux"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-brochet-mutant"] .charAmulet,
.charSprite[data-amulet="amulette-de-brochet-mutant"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-brochet-mutant"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-brochet-mutant"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-brumelin"] .charAmulet,
.charSprite[data-amulet="amulette-de-brumelin"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-brumelin"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-brumelin"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-cendre"] .charAmulet,
.charSprite[data-amulet="amulette-de-cendre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-cendre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-cendre"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-chenille"] .charAmulet,
.charSprite[data-amulet="amulette-de-chenille"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-chenille"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-chenille"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-cobra"] .charAmulet,
.charSprite[data-amulet="amulette-de-cobra"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-cobra"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-cobra"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-cobra-des-dunes"] .charAmulet,
.charSprite[data-amulet="amulette-de-cobra-des-dunes"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-cobra-des-dunes"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-cobra-des-dunes"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-corbeau-des-plaines"] .charAmulet,
.charSprite[data-amulet="amulette-de-corbeau-des-plaines"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #2d3436, #000000) !important;
  border: 1.5px solid #1e272e !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-corbeau-des-plaines"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-corbeau-des-plaines"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-crabe-des-plaines"] .charAmulet,
.charSprite[data-amulet="amulette-de-crabe-des-plaines"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-crabe-des-plaines"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-crabe-des-plaines"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-crabe-des-roseaux"] .charAmulet,
.charSprite[data-amulet="amulette-de-crabe-des-roseaux"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-crabe-des-roseaux"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-crabe-des-roseaux"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-feu"] .charAmulet,
.charSprite[data-amulet="amulette-de-feu"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-feu"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-feu"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-fongus"] .charAmulet,
.charSprite[data-amulet="amulette-de-fongus"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-fongus"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-fongus"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-fossoyeur"] .charAmulet,
.charSprite[data-amulet="amulette-de-fossoyeur"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-fossoyeur"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-fossoyeur"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-foudre"] .charAmulet,
.charSprite[data-amulet="amulette-de-foudre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f1c40f, #8e44ad) !important;
  border: 1.5px solid #d35400 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 16px 16px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-foudre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-foudre"] .charAmulet.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-fumerolle"] .charAmulet,
.charSprite[data-amulet="amulette-de-fumerolle"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-fumerolle"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-fumerolle"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-golem-de-roc"] .charAmulet,
.charSprite[data-amulet="amulette-de-golem-de-roc"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-golem-de-roc"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-golem-de-roc"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-golem-de-sable"] .charAmulet,
.charSprite[data-amulet="amulette-de-golem-de-sable"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-golem-de-sable"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-golem-de-sable"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-gorille"] .charAmulet,
.charSprite[data-amulet="amulette-de-gorille"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #303030, #151515) !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-gorille"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-gorille"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-harpie"] .charAmulet,
.charSprite[data-amulet="amulette-de-harpie"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-harpie"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-harpie"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-jaguar"] .charAmulet,
.charSprite[data-amulet="amulette-de-jaguar"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f39c12, #d35400) !important;
  border: 1.5px solid #3e2723 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-jaguar"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-jaguar"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-korriandre"] .charAmulet,
.charSprite[data-amulet="amulette-de-korriandre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-korriandre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-korriandre"] .charAmulet.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-labeille-de-givre"] .charAmulet,
.charSprite[data-amulet="amulette-de-labeille-de-givre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-labeille-de-givre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-labeille-de-givre"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-l-abeille-de-givre"] .charAmulet,
.charSprite[data-amulet="amulette-de-l-abeille-de-givre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-l-abeille-de-givre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-l-abeille-de-givre"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-la-bestiole"] .charAmulet,
.charSprite[data-amulet="amulette-de-la-bestiole"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-la-bestiole"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-la-bestiole"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-la-chenille-rampante"] .charAmulet,
.charSprite[data-amulet="amulette-de-la-chenille-rampante"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-la-chenille-rampante"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-la-chenille-rampante"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-larbre-ancestral"] .charAmulet,
.charSprite[data-amulet="amulette-de-larbre-ancestral"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-larbre-ancestral"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-larbre-ancestral"] .charAmulet.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-l-arbre-ancestral"] .charAmulet,
.charSprite[data-amulet="amulette-de-l-arbre-ancestral"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-l-arbre-ancestral"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-l-arbre-ancestral"] .charAmulet.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-larchange-dechu"] .charAmulet,
.charSprite[data-amulet="amulette-de-larchange-dechu"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-larchange-dechu"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-larchange-dechu"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-l-archange-dechu"] .charAmulet,
.charSprite[data-amulet="amulette-de-l-archange-dechu"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-l-archange-dechu"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-l-archange-dechu"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-lautomate"] .charAmulet,
.charSprite[data-amulet="amulette-de-lautomate"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-lautomate"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-lautomate"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-l-automate"] .charAmulet,
.charSprite[data-amulet="amulette-de-l-automate"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-l-automate"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-l-automate"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-la-vigie"] .charAmulet,
.charSprite[data-amulet="amulette-de-la-vigie"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-la-vigie"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-la-vigie"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-lesprit"] .charAmulet,
.charSprite[data-amulet="amulette-de-lesprit"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-lesprit"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-lesprit"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-l-esprit"] .charAmulet,
.charSprite[data-amulet="amulette-de-l-esprit"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-l-esprit"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-l-esprit"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-lhorloge"] .charAmulet,
.charSprite[data-amulet="amulette-de-lhorloge"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-lhorloge"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-lhorloge"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-l-horloge"] .charAmulet,
.charSprite[data-amulet="amulette-de-l-horloge"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-l-horloge"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-l-horloge"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-liche"] .charAmulet,
.charSprite[data-amulet="amulette-de-liche"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-liche"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-liche"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-lievre-givre"] .charAmulet,
.charSprite[data-amulet="amulette-de-lievre-givre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-lievre-givre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-lievre-givre"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-loup-blanc"] .charAmulet,
.charSprite[data-amulet="amulette-de-loup-blanc"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-loup-blanc"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-loup-blanc"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-loup-des-bois"] .charAmulet,
.charSprite[data-amulet="amulette-de-loup-des-bois"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-loup-des-bois"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-loup-des-bois"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-loup-maigre"] .charAmulet,
.charSprite[data-amulet="amulette-de-loup-maigre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-loup-maigre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-loup-maigre"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-lutin"] .charAmulet,
.charSprite[data-amulet="amulette-de-lutin"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-lutin"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-lutin"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-magma"] .charAmulet,
.charSprite[data-amulet="amulette-de-magma"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-magma"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-magma"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-mamansot"] .charAmulet,
.charSprite[data-amulet="amulette-de-mamansot"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-mamansot"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-mamansot"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-mansot-frigorifie"] .charAmulet,
.charSprite[data-amulet="amulette-de-mansot-frigorifie"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-mansot-frigorifie"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-mansot-frigorifie"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-mansotinet"] .charAmulet,
.charSprite[data-amulet="amulette-de-mansotinet"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-mansotinet"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-mansotinet"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-mansot-timide"] .charAmulet,
.charSprite[data-amulet="amulette-de-mansot-timide"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-mansot-timide"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-mansot-timide"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-marmouset"] .charAmulet,
.charSprite[data-amulet="amulette-de-marmouset"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-marmouset"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-marmouset"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-melours"] .charAmulet,
.charSprite[data-amulet="amulette-de-melours"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-melours"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-melours"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-minotocure"] .charAmulet,
.charSprite[data-amulet="amulette-de-minotocure"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-minotocure"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-minotocure"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-minotor"] .charAmulet,
.charSprite[data-amulet="amulette-de-minotor"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-minotor"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-minotor"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-neige-hargneuse"] .charAmulet,
.charSprite[data-amulet="amulette-de-neige-hargneuse"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-neige-hargneuse"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-neige-hargneuse"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-dent-jeune"] .charAmulet,
.charSprite[data-amulet="amulette-dent-jeune"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-dent-jeune"] .charAmulet::after,
.charSprite[data-amulet="amulette-dent-jeune"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-ent-jeune"] .charAmulet,
.charSprite[data-amulet="amulette-d-ent-jeune"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-ent-jeune"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-ent-jeune"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-pendule"] .charAmulet,
.charSprite[data-amulet="amulette-de-pendule"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-pendule"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-pendule"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-pillard-du-sable"] .charAmulet,
.charSprite[data-amulet="amulette-de-pillard-du-sable"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1.5px solid #b7950b !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-pillard-du-sable"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-pillard-du-sable"] .charAmulet.equipped::after {
  content: "⏳";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-pterodactyle"] .charAmulet,
.charSprite[data-amulet="amulette-de-pterodactyle"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-pterodactyle"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-pterodactyle"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-racineau"] .charAmulet,
.charSprite[data-amulet="amulette-de-racineau"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 1.5px solid #1a0f0a !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 24px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-racineau"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-racineau"] .charAmulet.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-raptor"] .charAmulet,
.charSprite[data-amulet="amulette-de-raptor"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-raptor"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-raptor"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-renne"] .charAmulet,
.charSprite[data-amulet="amulette-de-renne"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-renne"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-renne"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-roc-gele"] .charAmulet,
.charSprite[data-amulet="amulette-de-roc-gele"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-roc-gele"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-roc-gele"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-sanglier"] .charAmulet,
.charSprite[data-amulet="amulette-de-sanglier"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-sanglier"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-sanglier"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-sanglier-des-bois"] .charAmulet,
.charSprite[data-amulet="amulette-de-sanglier-des-bois"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-sanglier-des-bois"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-sanglier-des-bois"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-scorpion"] .charAmulet,
.charSprite[data-amulet="amulette-de-scorpion"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-scorpion"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-scorpion"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-serpent-liane"] .charAmulet,
.charSprite[data-amulet="amulette-de-serpent-liane"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-serpent-liane"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-serpent-liane"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-spectre"] .charAmulet,
.charSprite[data-amulet="amulette-de-spectre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-spectre"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-spectre"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-spore"] .charAmulet,
.charSprite[data-amulet="amulette-de-spore"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-spore"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-spore"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-tengu"] .charAmulet,
.charSprite[data-amulet="amulette-de-tengu"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f8fafc, #38bdf8) !important;
  border: 2.0px solid #0284c7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-tengu"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-tengu"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-dether"] .charAmulet,
.charSprite[data-amulet="amulette-dether"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-dether"] .charAmulet::after,
.charSprite[data-amulet="amulette-dether"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-ether"] .charAmulet,
.charSprite[data-amulet="amulette-d-ether"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-ether"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-ether"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-thymus"] .charAmulet,
.charSprite[data-amulet="amulette-de-thymus"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-thymus"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-thymus"] .charAmulet.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-titan-eternel"] .charAmulet,
.charSprite[data-amulet="amulette-de-titan-eternel"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-titan-eternel"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-titan-eternel"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-tortue-deau"] .charAmulet,
.charSprite[data-amulet="amulette-de-tortue-deau"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-tortue-deau"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-tortue-deau"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-tortue-d-eau"] .charAmulet,
.charSprite[data-amulet="amulette-de-tortue-d-eau"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-tortue-d-eau"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-tortue-d-eau"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-triceratops"] .charAmulet,
.charSprite[data-amulet="amulette-de-triceratops"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-triceratops"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-triceratops"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-yeti-de-noel"] .charAmulet,
.charSprite[data-amulet="amulette-de-yeti-de-noel"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-yeti-de-noel"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-yeti-de-noel"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-yeti-mineur"] .charAmulet,
.charSprite[data-amulet="amulette-de-yeti-mineur"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-yeti-mineur"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-yeti-mineur"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-de-yomi"] .charAmulet,
.charSprite[data-amulet="amulette-de-yomi"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-de-yomi"] .charAmulet::after,
.charSprite[data-amulet="amulette-de-yomi"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-dobsidien"] .charAmulet,
.charSprite[data-amulet="amulette-dobsidien"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-dobsidien"] .charAmulet::after,
.charSprite[data-amulet="amulette-dobsidien"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-obsidien"] .charAmulet,
.charSprite[data-amulet="amulette-d-obsidien"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-obsidien"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-obsidien"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-dours-des-glaces"] .charAmulet,
.charSprite[data-amulet="amulette-dours-des-glaces"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-dours-des-glaces"] .charAmulet::after,
.charSprite[data-amulet="amulette-dours-des-glaces"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-d-ours-des-glaces"] .charAmulet,
.charSprite[data-amulet="amulette-d-ours-des-glaces"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-d-ours-des-glaces"] .charAmulet::after,
.charSprite[data-amulet="amulette-d-ours-des-glaces"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-belier"] .charAmulet,
.charSprite[data-amulet="amulette-du-belier"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #dcdde1, #7f8c8d) !important;
  border: 1.5px solid #2f3640 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-belier"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-belier"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-canonnier"] .charAmulet,
.charSprite[data-amulet="amulette-du-canonnier"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-canonnier"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-canonnier"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-champion-eternel"] .charAmulet,
.charSprite[data-amulet="amulette-du-champion-eternel"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-champion-eternel"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-champion-eternel"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-colosse"] .charAmulet,
.charSprite[data-amulet="amulette-du-colosse"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #334155, #1e293b) !important;
  border: 2.0px solid #7dd3fc !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-colosse"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-colosse"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-comte-darticost"] .charAmulet,
.charSprite[data-amulet="amulette-du-comte-darticost"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-comte-darticost"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-comte-darticost"] .charAmulet.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-comte-d-articost"] .charAmulet,
.charSprite[data-amulet="amulette-du-comte-d-articost"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-comte-d-articost"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-comte-d-articost"] .charAmulet.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-cracglace"] .charAmulet,
.charSprite[data-amulet="amulette-du-cracglace"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-cracglace"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-cracglace"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-craqueleur"] .charAmulet,
.charSprite[data-amulet="amulette-du-craqueleur"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-craqueleur"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-craqueleur"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-dragon-de-givre"] .charAmulet,
.charSprite[data-amulet="amulette-du-dragon-de-givre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-dragon-de-givre"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-dragon-de-givre"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-forban"] .charAmulet,
.charSprite[data-amulet="amulette-du-forban"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 2.0px solid #f59e0b !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-forban"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-forban"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-garde-glours"] .charAmulet,
.charSprite[data-amulet="amulette-du-garde-glours"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-garde-glours"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-garde-glours"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-gardien-des-berges"] .charAmulet,
.charSprite[data-amulet="amulette-du-gardien-des-berges"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-gardien-des-berges"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-gardien-des-berges"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-givrefoux"] .charAmulet,
.charSprite[data-amulet="amulette-du-givrefoux"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-givrefoux"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-givrefoux"] .charAmulet.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-gladiateur-des-flammes"] .charAmulet,
.charSprite[data-amulet="amulette-du-gladiateur-des-flammes"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-gladiateur-des-flammes"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-gladiateur-des-flammes"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-gladiateur-des-marees"] .charAmulet,
.charSprite[data-amulet="amulette-du-gladiateur-des-marees"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-gladiateur-des-marees"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-gladiateur-des-marees"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-gladiateur-de-terre"] .charAmulet,
.charSprite[data-amulet="amulette-du-gladiateur-de-terre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-gladiateur-de-terre"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-gladiateur-de-terre"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-gladiateur-du-vent"] .charAmulet,
.charSprite[data-amulet="amulette-du-gladiateur-du-vent"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-gladiateur-du-vent"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-gladiateur-du-vent"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-gladiateur-supreme"] .charAmulet,
.charSprite[data-amulet="amulette-du-gladiateur-supreme"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-gladiateur-supreme"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-gladiateur-supreme"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-glours-glouton"] .charAmulet,
.charSprite[data-amulet="amulette-du-glours-glouton"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-glours-glouton"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-glours-glouton"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-golem-de-cristal"] .charAmulet,
.charSprite[data-amulet="amulette-du-golem-de-cristal"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #70a1ff, #1e90ff) !important;
  border: 2.0px solid #2f3542 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-golem-de-cristal"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-golem-de-cristal"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-grand-groin"] .charAmulet,
.charSprite[data-amulet="amulette-du-grand-groin"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 2.0px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-grand-groin"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-grand-groin"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-leviathan"] .charAmulet,
.charSprite[data-amulet="amulette-du-leviathan"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 2.0px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-leviathan"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-leviathan"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-magmaroc"] .charAmulet,
.charSprite[data-amulet="amulette-du-magmaroc"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-magmaroc"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-magmaroc"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-maitre-des-squelettes"] .charAmulet,
.charSprite[data-amulet="amulette-du-maitre-des-squelettes"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 2.0px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-maitre-des-squelettes"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-maitre-des-squelettes"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-mansot-royal"] .charAmulet,
.charSprite[data-amulet="amulette-du-mansot-royal"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 2.0px solid #00bcd4 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-mansot-royal"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-mansot-royal"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-matelot"] .charAmulet,
.charSprite[data-amulet="amulette-du-matelot"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-matelot"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-matelot"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-mecanurgiste"] .charAmulet,
.charSprite[data-amulet="amulette-du-mecanurgiste"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-mecanurgiste"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-mecanurgiste"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-minotot"] .charAmulet,
.charSprite[data-amulet="amulette-du-minotot"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 2.0px solid #190a02 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-minotot"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-minotot"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-pere-fouettard"] .charAmulet,
.charSprite[data-amulet="amulette-du-pere-fouettard"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 2.0px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-pere-fouettard"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-pere-fouettard"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-pirate-givre"] .charAmulet,
.charSprite[data-amulet="amulette-du-pirate-givre"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-pirate-givre"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-pirate-givre"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-renard-polaire"] .charAmulet,
.charSprite[data-amulet="amulette-du-renard-polaire"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-renard-polaire"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-renard-polaire"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-roc-ebreche"] .charAmulet,
.charSprite[data-amulet="amulette-du-roc-ebreche"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-roc-ebreche"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-roc-ebreche"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-roi-des-mers"] .charAmulet,
.charSprite[data-amulet="amulette-du-roi-des-mers"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-roi-des-mers"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-roi-des-mers"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-roi-singe"] .charAmulet,
.charSprite[data-amulet="amulette-du-roi-singe"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-amulet="amulette-du-roi-singe"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-roi-singe"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-scribe-celeste"] .charAmulet,
.charSprite[data-amulet="amulette-du-scribe-celeste"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 10px 14px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-scribe-celeste"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-scribe-celeste"] .charAmulet.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-seigneur-des-flammes"] .charAmulet,
.charSprite[data-amulet="amulette-du-seigneur-des-flammes"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-seigneur-des-flammes"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-seigneur-des-flammes"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-sphinx"] .charAmulet,
.charSprite[data-amulet="amulette-du-sphinx"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-sphinx"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-sphinx"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-titan-de-brume"] .charAmulet,
.charSprite[data-amulet="amulette-du-titan-de-brume"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-titan-de-brume"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-titan-de-brume"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-t-rex"] .charAmulet,
.charSprite[data-amulet="amulette-du-t-rex"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 2.0px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-t-rex"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-t-rex"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-du-yokai"] .charAmulet,
.charSprite[data-amulet="amulette-du-yokai"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-du-yokai"] .charAmulet::after,
.charSprite[data-amulet="amulette-du-yokai"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-en-crabe"] .charAmulet,
.charSprite[data-amulet="amulette-en-crabe"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-en-crabe"] .charAmulet::after,
.charSprite[data-amulet="amulette-en-crabe"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-eveillee"] .charAmulet,
.charSprite[data-amulet="amulette-eveillee"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-eveillee"] .charAmulet::after,
.charSprite[data-amulet="amulette-eveillee"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-glourseleste"] .charAmulet,
.charSprite[data-amulet="amulette-glourseleste"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-glourseleste"] .charAmulet::after,
.charSprite[data-amulet="amulette-glourseleste"] .charAmulet.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-magmatique"] .charAmulet,
.charSprite[data-amulet="amulette-magmatique"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-magmatique"] .charAmulet::after,
.charSprite[data-amulet="amulette-magmatique"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-prehistorique"] .charAmulet,
.charSprite[data-amulet="amulette-prehistorique"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-prehistorique"] .charAmulet::after,
.charSprite[data-amulet="amulette-prehistorique"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-scintillante"] .charAmulet,
.charSprite[data-amulet="amulette-scintillante"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-scintillante"] .charAmulet::after,
.charSprite[data-amulet="amulette-scintillante"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-amulet="amulette-squelettique"] .charAmulet,
.charSprite[data-amulet="amulette-squelettique"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe066, #e6ac00) !important;
  border: 1.5px solid rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="amulette-squelettique"] .charAmulet::after,
.charSprite[data-amulet="amulette-squelettique"] .charAmulet.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-celeste"] .charRingLeft,
.charSprite[data-ring-left="anneau-celeste"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-celeste"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-celeste"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-celeste"] .charRingRight,
.charSprite[data-ring-right="anneau-celeste"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-celeste"] .charRingRight::after,
.charSprite[data-ring-right="anneau-celeste"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-cornue"] .charRingLeft,
.charSprite[data-ring-left="anneau-cornue"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-cornue"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-cornue"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-cornue"] .charRingRight,
.charSprite[data-ring-right="anneau-cornue"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-cornue"] .charRingRight::after,
.charSprite[data-ring-right="anneau-cornue"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-daigle-des-sommets"] .charRingLeft,
.charSprite[data-ring-left="anneau-daigle-des-sommets"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-daigle-des-sommets"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-daigle-des-sommets"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-daigle-des-sommets"] .charRingRight,
.charSprite[data-ring-right="anneau-daigle-des-sommets"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-daigle-des-sommets"] .charRingRight::after,
.charSprite[data-ring-right="anneau-daigle-des-sommets"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-aigle-des-sommets"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-aigle-des-sommets"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-d-aigle-des-sommets"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-aigle-des-sommets"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-aigle-des-sommets"] .charRingRight,
.charSprite[data-ring-right="anneau-d-aigle-des-sommets"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-d-aigle-des-sommets"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-aigle-des-sommets"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-daraignee-sylvestre"] .charRingLeft,
.charSprite[data-ring-left="anneau-daraignee-sylvestre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1px solid #bdc3c7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-ring-left="anneau-daraignee-sylvestre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-daraignee-sylvestre"] .charRingLeft.equipped::after {
  content: "🕸️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-daraignee-sylvestre"] .charRingRight,
.charSprite[data-ring-right="anneau-daraignee-sylvestre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1px solid #bdc3c7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-ring-right="anneau-daraignee-sylvestre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-daraignee-sylvestre"] .charRingRight.equipped::after {
  content: "🕸️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-araignee-sylvestre"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-araignee-sylvestre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1px solid #bdc3c7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-ring-left="anneau-d-araignee-sylvestre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-araignee-sylvestre"] .charRingLeft.equipped::after {
  content: "🕸️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-araignee-sylvestre"] .charRingRight,
.charSprite[data-ring-right="anneau-d-araignee-sylvestre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1px solid #bdc3c7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-ring-right="anneau-d-araignee-sylvestre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-araignee-sylvestre"] .charRingRight.equipped::after {
  content: "🕸️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-darchimage-supreme"] .charRingLeft,
.charSprite[data-ring-left="anneau-darchimage-supreme"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-darchimage-supreme"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-darchimage-supreme"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-darchimage-supreme"] .charRingRight,
.charSprite[data-ring-right="anneau-darchimage-supreme"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-darchimage-supreme"] .charRingRight::after,
.charSprite[data-ring-right="anneau-darchimage-supreme"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-archimage-supreme"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-archimage-supreme"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-d-archimage-supreme"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-archimage-supreme"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-archimage-supreme"] .charRingRight,
.charSprite[data-ring-right="anneau-d-archimage-supreme"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-d-archimage-supreme"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-archimage-supreme"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-blours"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-blours"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-blours"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-blours"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-blours"] .charRingRight,
.charSprite[data-ring-right="anneau-de-blours"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-blours"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-blours"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-bouc"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-bouc"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-bouc"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-bouc"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-bouc"] .charRingRight,
.charSprite[data-ring-right="anneau-de-bouc"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-bouc"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-bouc"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-bouc-hargneux"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-bouc-hargneux"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-bouc-hargneux"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-bouc-hargneux"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-bouc-hargneux"] .charRingRight,
.charSprite[data-ring-right="anneau-de-bouc-hargneux"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-bouc-hargneux"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-bouc-hargneux"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-brochet-mutant"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-brochet-mutant"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-de-brochet-mutant"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-brochet-mutant"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-brochet-mutant"] .charRingRight,
.charSprite[data-ring-right="anneau-de-brochet-mutant"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-de-brochet-mutant"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-brochet-mutant"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-brumelin"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-brumelin"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-brumelin"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-brumelin"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-brumelin"] .charRingRight,
.charSprite[data-ring-right="anneau-de-brumelin"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-brumelin"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-brumelin"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-cendre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-cendre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-cendre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-cendre"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-cendre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-cendre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-cendre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-cendre"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-chenille"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-chenille"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-chenille"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-chenille"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-chenille"] .charRingRight,
.charSprite[data-ring-right="anneau-de-chenille"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-chenille"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-chenille"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-cobra-des-dunes"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-cobra-des-dunes"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1px solid #112233 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-cobra-des-dunes"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-cobra-des-dunes"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-cobra-des-dunes"] .charRingRight,
.charSprite[data-ring-right="anneau-de-cobra-des-dunes"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1px solid #112233 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-cobra-des-dunes"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-cobra-des-dunes"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-corbeau-des-plaines"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-corbeau-des-plaines"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #2d3436, #000000) !important;
  border: 1px solid #1e272e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-corbeau-des-plaines"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-corbeau-des-plaines"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-corbeau-des-plaines"] .charRingRight,
.charSprite[data-ring-right="anneau-de-corbeau-des-plaines"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #2d3436, #000000) !important;
  border: 1px solid #1e272e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-corbeau-des-plaines"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-corbeau-des-plaines"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-crabe-des-plaines"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-crabe-des-plaines"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-crabe-des-plaines"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-crabe-des-plaines"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-crabe-des-plaines"] .charRingRight,
.charSprite[data-ring-right="anneau-de-crabe-des-plaines"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-crabe-des-plaines"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-crabe-des-plaines"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-crabe-des-roseaux"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-crabe-des-roseaux"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-crabe-des-roseaux"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-crabe-des-roseaux"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-crabe-des-roseaux"] .charRingRight,
.charSprite[data-ring-right="anneau-de-crabe-des-roseaux"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-crabe-des-roseaux"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-crabe-des-roseaux"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-feu"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-feu"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-feu"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-feu"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-feu"] .charRingRight,
.charSprite[data-ring-right="anneau-de-feu"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-feu"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-feu"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-fongus"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-fongus"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-fongus"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-fongus"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-fongus"] .charRingRight,
.charSprite[data-ring-right="anneau-de-fongus"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-fongus"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-fongus"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-fossoyeur"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-fossoyeur"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-fossoyeur"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-fossoyeur"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-fossoyeur"] .charRingRight,
.charSprite[data-ring-right="anneau-de-fossoyeur"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-fossoyeur"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-fossoyeur"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-foudre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-foudre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f1c40f, #8e44ad) !important;
  border: 1px solid #d35400 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 16px 16px !important;
}

.charSprite[data-ring-left="anneau-de-foudre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-foudre"] .charRingLeft.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-foudre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-foudre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f1c40f, #8e44ad) !important;
  border: 1px solid #d35400 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 16px 16px !important;
}

.charSprite[data-ring-right="anneau-de-foudre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-foudre"] .charRingRight.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-fumerolle"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-fumerolle"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-fumerolle"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-fumerolle"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-fumerolle"] .charRingRight,
.charSprite[data-ring-right="anneau-de-fumerolle"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-fumerolle"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-fumerolle"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-golem-de-roc"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-golem-de-roc"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-de-golem-de-roc"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-golem-de-roc"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-golem-de-roc"] .charRingRight,
.charSprite[data-ring-right="anneau-de-golem-de-roc"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-de-golem-de-roc"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-golem-de-roc"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-golem-de-sable"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-golem-de-sable"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-de-golem-de-sable"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-golem-de-sable"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-golem-de-sable"] .charRingRight,
.charSprite[data-ring-right="anneau-de-golem-de-sable"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-de-golem-de-sable"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-golem-de-sable"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-gorille"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-gorille"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #303030, #151515) !important;
  border: 1px solid #000000 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-gorille"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-gorille"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-gorille"] .charRingRight,
.charSprite[data-ring-right="anneau-de-gorille"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #303030, #151515) !important;
  border: 1px solid #000000 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-gorille"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-gorille"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-harpie"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-harpie"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-harpie"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-harpie"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-harpie"] .charRingRight,
.charSprite[data-ring-right="anneau-de-harpie"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-harpie"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-harpie"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-jaguar"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-jaguar"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f39c12, #d35400) !important;
  border: 1px solid #3e2723 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-jaguar"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-jaguar"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-jaguar"] .charRingRight,
.charSprite[data-ring-right="anneau-de-jaguar"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f39c12, #d35400) !important;
  border: 1px solid #3e2723 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-jaguar"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-jaguar"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-korriandre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-korriandre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-left="anneau-de-korriandre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-korriandre"] .charRingLeft.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-korriandre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-korriandre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-right="anneau-de-korriandre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-korriandre"] .charRingRight.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-labeille-de-givre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-labeille-de-givre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-de-labeille-de-givre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-labeille-de-givre"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-labeille-de-givre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-labeille-de-givre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-de-labeille-de-givre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-labeille-de-givre"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-l-abeille-de-givre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-l-abeille-de-givre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-de-l-abeille-de-givre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-l-abeille-de-givre"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-l-abeille-de-givre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-l-abeille-de-givre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-de-l-abeille-de-givre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-l-abeille-de-givre"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-la-bestiole"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-la-bestiole"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-la-bestiole"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-la-bestiole"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-la-bestiole"] .charRingRight,
.charSprite[data-ring-right="anneau-de-la-bestiole"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-la-bestiole"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-la-bestiole"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-la-chenille-rampante"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-la-chenille-rampante"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-la-chenille-rampante"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-la-chenille-rampante"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-la-chenille-rampante"] .charRingRight,
.charSprite[data-ring-right="anneau-de-la-chenille-rampante"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-la-chenille-rampante"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-la-chenille-rampante"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-larbre-ancestral"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-larbre-ancestral"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-left="anneau-de-larbre-ancestral"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-larbre-ancestral"] .charRingLeft.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-larbre-ancestral"] .charRingRight,
.charSprite[data-ring-right="anneau-de-larbre-ancestral"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-right="anneau-de-larbre-ancestral"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-larbre-ancestral"] .charRingRight.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-l-arbre-ancestral"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-l-arbre-ancestral"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-left="anneau-de-l-arbre-ancestral"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-l-arbre-ancestral"] .charRingLeft.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-l-arbre-ancestral"] .charRingRight,
.charSprite[data-ring-right="anneau-de-l-arbre-ancestral"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-right="anneau-de-l-arbre-ancestral"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-l-arbre-ancestral"] .charRingRight.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-larchange-dechu"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-larchange-dechu"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-larchange-dechu"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-larchange-dechu"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-larchange-dechu"] .charRingRight,
.charSprite[data-ring-right="anneau-de-larchange-dechu"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-larchange-dechu"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-larchange-dechu"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-l-archange-dechu"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-l-archange-dechu"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-l-archange-dechu"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-l-archange-dechu"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-l-archange-dechu"] .charRingRight,
.charSprite[data-ring-right="anneau-de-l-archange-dechu"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-l-archange-dechu"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-l-archange-dechu"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-lautomate"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-lautomate"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-lautomate"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-lautomate"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-lautomate"] .charRingRight,
.charSprite[data-ring-right="anneau-de-lautomate"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-lautomate"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-lautomate"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-l-automate"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-l-automate"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-l-automate"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-l-automate"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-l-automate"] .charRingRight,
.charSprite[data-ring-right="anneau-de-l-automate"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-l-automate"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-l-automate"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-la-vigie"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-la-vigie"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-la-vigie"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-la-vigie"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-la-vigie"] .charRingRight,
.charSprite[data-ring-right="anneau-de-la-vigie"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-la-vigie"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-la-vigie"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-lesprit"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-lesprit"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-lesprit"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-lesprit"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-lesprit"] .charRingRight,
.charSprite[data-ring-right="anneau-de-lesprit"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-lesprit"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-lesprit"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-l-esprit"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-l-esprit"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-l-esprit"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-l-esprit"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-l-esprit"] .charRingRight,
.charSprite[data-ring-right="anneau-de-l-esprit"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-l-esprit"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-l-esprit"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-lhorloge"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-lhorloge"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-lhorloge"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-lhorloge"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-lhorloge"] .charRingRight,
.charSprite[data-ring-right="anneau-de-lhorloge"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-lhorloge"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-lhorloge"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-l-horloge"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-l-horloge"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-l-horloge"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-l-horloge"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-l-horloge"] .charRingRight,
.charSprite[data-ring-right="anneau-de-l-horloge"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-l-horloge"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-l-horloge"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-liche"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-liche"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-liche"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-liche"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-liche"] .charRingRight,
.charSprite[data-ring-right="anneau-de-liche"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-liche"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-liche"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-lievre-givre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-lievre-givre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-de-lievre-givre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-lievre-givre"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-lievre-givre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-lievre-givre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-de-lievre-givre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-lievre-givre"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-loup-blanc"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-loup-blanc"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-loup-blanc"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-loup-blanc"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-loup-blanc"] .charRingRight,
.charSprite[data-ring-right="anneau-de-loup-blanc"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-loup-blanc"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-loup-blanc"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-loup-des-bois"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-loup-des-bois"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-loup-des-bois"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-loup-des-bois"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-loup-des-bois"] .charRingRight,
.charSprite[data-ring-right="anneau-de-loup-des-bois"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-loup-des-bois"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-loup-des-bois"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-loup-maigre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-loup-maigre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-loup-maigre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-loup-maigre"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-loup-maigre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-loup-maigre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-loup-maigre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-loup-maigre"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-lutin"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-lutin"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-lutin"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-lutin"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-lutin"] .charRingRight,
.charSprite[data-ring-right="anneau-de-lutin"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-lutin"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-lutin"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-magma"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-magma"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-magma"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-magma"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-magma"] .charRingRight,
.charSprite[data-ring-right="anneau-de-magma"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-magma"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-magma"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-mamansot"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-mamansot"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-mamansot"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-mamansot"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-mamansot"] .charRingRight,
.charSprite[data-ring-right="anneau-de-mamansot"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-mamansot"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-mamansot"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-mansot-frigorifie"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-mansot-frigorifie"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-mansot-frigorifie"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-mansot-frigorifie"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-mansot-frigorifie"] .charRingRight,
.charSprite[data-ring-right="anneau-de-mansot-frigorifie"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-mansot-frigorifie"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-mansot-frigorifie"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-mansotinet"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-mansotinet"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-mansotinet"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-mansotinet"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-mansotinet"] .charRingRight,
.charSprite[data-ring-right="anneau-de-mansotinet"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-mansotinet"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-mansotinet"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-mansot-timide"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-mansot-timide"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-de-mansot-timide"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-mansot-timide"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-mansot-timide"] .charRingRight,
.charSprite[data-ring-right="anneau-de-mansot-timide"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-de-mansot-timide"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-mansot-timide"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-marmouset"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-marmouset"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-marmouset"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-marmouset"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-marmouset"] .charRingRight,
.charSprite[data-ring-right="anneau-de-marmouset"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-marmouset"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-marmouset"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-melours"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-melours"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-melours"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-melours"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-melours"] .charRingRight,
.charSprite[data-ring-right="anneau-de-melours"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-melours"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-melours"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-minotocure"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-minotocure"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1px solid #190a02 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-minotocure"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-minotocure"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-minotocure"] .charRingRight,
.charSprite[data-ring-right="anneau-de-minotocure"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1px solid #190a02 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-minotocure"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-minotocure"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-minotor"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-minotor"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1px solid #190a02 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-minotor"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-minotor"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-minotor"] .charRingRight,
.charSprite[data-ring-right="anneau-de-minotor"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1px solid #190a02 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-minotor"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-minotor"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-neige-hargneuse"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-neige-hargneuse"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-de-neige-hargneuse"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-neige-hargneuse"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-neige-hargneuse"] .charRingRight,
.charSprite[data-ring-right="anneau-de-neige-hargneuse"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-de-neige-hargneuse"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-neige-hargneuse"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-dent-jeune"] .charRingLeft,
.charSprite[data-ring-left="anneau-dent-jeune"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-dent-jeune"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-dent-jeune"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-dent-jeune"] .charRingRight,
.charSprite[data-ring-right="anneau-dent-jeune"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-dent-jeune"] .charRingRight::after,
.charSprite[data-ring-right="anneau-dent-jeune"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-ent-jeune"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-ent-jeune"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-d-ent-jeune"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-ent-jeune"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-ent-jeune"] .charRingRight,
.charSprite[data-ring-right="anneau-d-ent-jeune"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-d-ent-jeune"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-ent-jeune"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-pendule"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-pendule"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-pendule"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-pendule"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-pendule"] .charRingRight,
.charSprite[data-ring-right="anneau-de-pendule"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-pendule"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-pendule"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-pillard-du-sable"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-pillard-du-sable"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1px solid #b7950b !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-de-pillard-du-sable"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-pillard-du-sable"] .charRingLeft.equipped::after {
  content: "⏳";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-pillard-du-sable"] .charRingRight,
.charSprite[data-ring-right="anneau-de-pillard-du-sable"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1px solid #b7950b !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-de-pillard-du-sable"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-pillard-du-sable"] .charRingRight.equipped::after {
  content: "⏳";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-pterodactyle"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-pterodactyle"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-pterodactyle"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-pterodactyle"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-pterodactyle"] .charRingRight,
.charSprite[data-ring-right="anneau-de-pterodactyle"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-pterodactyle"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-pterodactyle"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-racineau"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-racineau"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 1px solid #1a0f0a !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-left="anneau-de-racineau"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-racineau"] .charRingLeft.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-racineau"] .charRingRight,
.charSprite[data-ring-right="anneau-de-racineau"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 1px solid #1a0f0a !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-right="anneau-de-racineau"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-racineau"] .charRingRight.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-raptor"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-raptor"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-raptor"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-raptor"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-raptor"] .charRingRight,
.charSprite[data-ring-right="anneau-de-raptor"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-raptor"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-raptor"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-renne"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-renne"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-renne"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-renne"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-renne"] .charRingRight,
.charSprite[data-ring-right="anneau-de-renne"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-renne"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-renne"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-roc-gele"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-roc-gele"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-de-roc-gele"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-roc-gele"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-roc-gele"] .charRingRight,
.charSprite[data-ring-right="anneau-de-roc-gele"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-de-roc-gele"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-roc-gele"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-sanglier"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-sanglier"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-sanglier"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-sanglier"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-sanglier"] .charRingRight,
.charSprite[data-ring-right="anneau-de-sanglier"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-sanglier"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-sanglier"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-sanglier-des-bois"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-sanglier-des-bois"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-sanglier-des-bois"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-sanglier-des-bois"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-sanglier-des-bois"] .charRingRight,
.charSprite[data-ring-right="anneau-de-sanglier-des-bois"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-sanglier-des-bois"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-sanglier-des-bois"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-scorpion"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-scorpion"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-scorpion"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-scorpion"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-scorpion"] .charRingRight,
.charSprite[data-ring-right="anneau-de-scorpion"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-scorpion"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-scorpion"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-serpent-liane"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-serpent-liane"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1px solid #112233 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-serpent-liane"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-serpent-liane"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-serpent-liane"] .charRingRight,
.charSprite[data-ring-right="anneau-de-serpent-liane"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1px solid #112233 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-serpent-liane"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-serpent-liane"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-spectre"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-spectre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-spectre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-spectre"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-spectre"] .charRingRight,
.charSprite[data-ring-right="anneau-de-spectre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-spectre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-spectre"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-spore"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-spore"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-spore"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-spore"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-spore"] .charRingRight,
.charSprite[data-ring-right="anneau-de-spore"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-spore"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-spore"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-tengu"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-tengu"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f8fafc, #38bdf8) !important;
  border: 2.0px solid #0284c7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-de-tengu"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-tengu"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-tengu"] .charRingRight,
.charSprite[data-ring-right="anneau-de-tengu"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f8fafc, #38bdf8) !important;
  border: 2.0px solid #0284c7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-de-tengu"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-tengu"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-dether"] .charRingLeft,
.charSprite[data-ring-left="anneau-dether"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1px solid #a29bfe !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-dether"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-dether"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-dether"] .charRingRight,
.charSprite[data-ring-right="anneau-dether"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1px solid #a29bfe !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-dether"] .charRingRight::after,
.charSprite[data-ring-right="anneau-dether"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-ether"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-ether"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1px solid #a29bfe !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-d-ether"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-ether"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-ether"] .charRingRight,
.charSprite[data-ring-right="anneau-d-ether"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1px solid #a29bfe !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-d-ether"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-ether"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-thymus"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-thymus"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-left="anneau-de-thymus"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-thymus"] .charRingLeft.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-thymus"] .charRingRight,
.charSprite[data-ring-right="anneau-de-thymus"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-ring-right="anneau-de-thymus"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-thymus"] .charRingRight.equipped::after {
  content: "🪵";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-titan-eternel"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-titan-eternel"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-titan-eternel"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-titan-eternel"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-titan-eternel"] .charRingRight,
.charSprite[data-ring-right="anneau-de-titan-eternel"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-titan-eternel"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-titan-eternel"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-tortue-deau"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-tortue-deau"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1px solid #0e3a1f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-tortue-deau"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-tortue-deau"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-tortue-deau"] .charRingRight,
.charSprite[data-ring-right="anneau-de-tortue-deau"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1px solid #0e3a1f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-tortue-deau"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-tortue-deau"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-tortue-d-eau"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-tortue-d-eau"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1px solid #0e3a1f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-de-tortue-d-eau"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-tortue-d-eau"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-tortue-d-eau"] .charRingRight,
.charSprite[data-ring-right="anneau-de-tortue-d-eau"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1px solid #0e3a1f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-de-tortue-d-eau"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-tortue-d-eau"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-triceratops"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-triceratops"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-triceratops"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-triceratops"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-triceratops"] .charRingRight,
.charSprite[data-ring-right="anneau-de-triceratops"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-triceratops"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-triceratops"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-yeti-de-noel"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-yeti-de-noel"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1px solid #7f8c8d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-yeti-de-noel"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-yeti-de-noel"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-yeti-de-noel"] .charRingRight,
.charSprite[data-ring-right="anneau-de-yeti-de-noel"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1px solid #7f8c8d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-yeti-de-noel"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-yeti-de-noel"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-yeti-mineur"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-yeti-mineur"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1px solid #7f8c8d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-yeti-mineur"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-yeti-mineur"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-yeti-mineur"] .charRingRight,
.charSprite[data-ring-right="anneau-de-yeti-mineur"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1px solid #7f8c8d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-yeti-mineur"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-yeti-mineur"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-de-yomi"] .charRingLeft,
.charSprite[data-ring-left="anneau-de-yomi"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-de-yomi"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-de-yomi"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-de-yomi"] .charRingRight,
.charSprite[data-ring-right="anneau-de-yomi"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-de-yomi"] .charRingRight::after,
.charSprite[data-ring-right="anneau-de-yomi"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-dobsidien"] .charRingLeft,
.charSprite[data-ring-left="anneau-dobsidien"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-dobsidien"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-dobsidien"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-dobsidien"] .charRingRight,
.charSprite[data-ring-right="anneau-dobsidien"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-dobsidien"] .charRingRight::after,
.charSprite[data-ring-right="anneau-dobsidien"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-obsidien"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-obsidien"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-d-obsidien"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-obsidien"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-obsidien"] .charRingRight,
.charSprite[data-ring-right="anneau-d-obsidien"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-d-obsidien"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-obsidien"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-dours-des-glaces"] .charRingLeft,
.charSprite[data-ring-left="anneau-dours-des-glaces"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-dours-des-glaces"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-dours-des-glaces"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-dours-des-glaces"] .charRingRight,
.charSprite[data-ring-right="anneau-dours-des-glaces"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-dours-des-glaces"] .charRingRight::after,
.charSprite[data-ring-right="anneau-dours-des-glaces"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-d-ours-des-glaces"] .charRingLeft,
.charSprite[data-ring-left="anneau-d-ours-des-glaces"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-d-ours-des-glaces"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-d-ours-des-glaces"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-d-ours-des-glaces"] .charRingRight,
.charSprite[data-ring-right="anneau-d-ours-des-glaces"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-d-ours-des-glaces"] .charRingRight::after,
.charSprite[data-ring-right="anneau-d-ours-des-glaces"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-belier"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-belier"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #dcdde1, #7f8c8d) !important;
  border: 1px solid #2f3640 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-belier"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-belier"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-belier"] .charRingRight,
.charSprite[data-ring-right="anneau-du-belier"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #dcdde1, #7f8c8d) !important;
  border: 1px solid #2f3640 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-belier"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-belier"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-canonnier"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-canonnier"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-canonnier"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-canonnier"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-canonnier"] .charRingRight,
.charSprite[data-ring-right="anneau-du-canonnier"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-canonnier"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-canonnier"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-champion-eternel"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-champion-eternel"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-champion-eternel"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-champion-eternel"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-champion-eternel"] .charRingRight,
.charSprite[data-ring-right="anneau-du-champion-eternel"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-champion-eternel"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-champion-eternel"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-colosse"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-colosse"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #334155, #1e293b) !important;
  border: 2.0px solid #7dd3fc !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-du-colosse"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-colosse"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-colosse"] .charRingRight,
.charSprite[data-ring-right="anneau-du-colosse"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #334155, #1e293b) !important;
  border: 2.0px solid #7dd3fc !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-du-colosse"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-colosse"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-comte-darticost"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-comte-darticost"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
}

.charSprite[data-ring-left="anneau-du-comte-darticost"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-comte-darticost"] .charRingLeft.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-comte-darticost"] .charRingRight,
.charSprite[data-ring-right="anneau-du-comte-darticost"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
}

.charSprite[data-ring-right="anneau-du-comte-darticost"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-comte-darticost"] .charRingRight.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-comte-d-articost"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-comte-d-articost"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
}

.charSprite[data-ring-left="anneau-du-comte-d-articost"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-comte-d-articost"] .charRingLeft.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-comte-d-articost"] .charRingRight,
.charSprite[data-ring-right="anneau-du-comte-d-articost"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
}

.charSprite[data-ring-right="anneau-du-comte-d-articost"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-comte-d-articost"] .charRingRight.equipped::after {
  content: "⚡";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-cracglace"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-cracglace"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-du-cracglace"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-cracglace"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-cracglace"] .charRingRight,
.charSprite[data-ring-right="anneau-du-cracglace"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-du-cracglace"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-cracglace"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-craqueleur"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-craqueleur"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-craqueleur"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-craqueleur"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-craqueleur"] .charRingRight,
.charSprite[data-ring-right="anneau-du-craqueleur"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-craqueleur"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-craqueleur"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-dragon-de-givre"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-dragon-de-givre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="anneau-du-dragon-de-givre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-dragon-de-givre"] .charRingLeft.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-dragon-de-givre"] .charRingRight,
.charSprite[data-ring-right="anneau-du-dragon-de-givre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-right="anneau-du-dragon-de-givre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-dragon-de-givre"] .charRingRight.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-forban"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-forban"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 2.0px solid #f59e0b !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-forban"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-forban"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-forban"] .charRingRight,
.charSprite[data-ring-right="anneau-du-forban"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 2.0px solid #f59e0b !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-forban"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-forban"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-garde-glours"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-garde-glours"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-garde-glours"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-garde-glours"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-garde-glours"] .charRingRight,
.charSprite[data-ring-right="anneau-du-garde-glours"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-garde-glours"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-garde-glours"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-gardien-des-berges"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-gardien-des-berges"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-gardien-des-berges"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-gardien-des-berges"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-gardien-des-berges"] .charRingRight,
.charSprite[data-ring-right="anneau-du-gardien-des-berges"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-gardien-des-berges"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-gardien-des-berges"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-givrefoux"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-givrefoux"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-left="anneau-du-givrefoux"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-givrefoux"] .charRingLeft.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-givrefoux"] .charRingRight,
.charSprite[data-ring-right="anneau-du-givrefoux"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
}

.charSprite[data-ring-right="anneau-du-givrefoux"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-givrefoux"] .charRingRight.equipped::after {
  content: "❄️";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-gladiateur-des-flammes"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-gladiateur-des-flammes"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-gladiateur-des-flammes"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-gladiateur-des-flammes"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-gladiateur-des-flammes"] .charRingRight,
.charSprite[data-ring-right="anneau-du-gladiateur-des-flammes"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-gladiateur-des-flammes"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-gladiateur-des-flammes"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-gladiateur-des-marees"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-gladiateur-des-marees"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-gladiateur-des-marees"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-gladiateur-des-marees"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-gladiateur-des-marees"] .charRingRight,
.charSprite[data-ring-right="anneau-du-gladiateur-des-marees"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-gladiateur-des-marees"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-gladiateur-des-marees"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-gladiateur-de-terre"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-gladiateur-de-terre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-gladiateur-de-terre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-gladiateur-de-terre"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-gladiateur-de-terre"] .charRingRight,
.charSprite[data-ring-right="anneau-du-gladiateur-de-terre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-gladiateur-de-terre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-gladiateur-de-terre"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-gladiateur-du-vent"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-gladiateur-du-vent"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-gladiateur-du-vent"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-gladiateur-du-vent"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-gladiateur-du-vent"] .charRingRight,
.charSprite[data-ring-right="anneau-du-gladiateur-du-vent"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-gladiateur-du-vent"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-gladiateur-du-vent"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-gladiateur-supreme"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-gladiateur-supreme"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-gladiateur-supreme"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-gladiateur-supreme"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-gladiateur-supreme"] .charRingRight,
.charSprite[data-ring-right="anneau-du-gladiateur-supreme"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-gladiateur-supreme"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-gladiateur-supreme"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-glours-glouton"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-glours-glouton"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-glours-glouton"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-glours-glouton"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-glours-glouton"] .charRingRight,
.charSprite[data-ring-right="anneau-du-glours-glouton"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-glours-glouton"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-glours-glouton"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-golem-de-cristal"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-golem-de-cristal"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #70a1ff, #1e90ff) !important;
  border: 2.0px solid #2f3542 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-du-golem-de-cristal"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-golem-de-cristal"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-golem-de-cristal"] .charRingRight,
.charSprite[data-ring-right="anneau-du-golem-de-cristal"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #70a1ff, #1e90ff) !important;
  border: 2.0px solid #2f3542 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-du-golem-de-cristal"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-golem-de-cristal"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-grand-groin"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-grand-groin"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-grand-groin"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-grand-groin"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-grand-groin"] .charRingRight,
.charSprite[data-ring-right="anneau-du-grand-groin"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-grand-groin"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-grand-groin"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-leviathan"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-leviathan"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-leviathan"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-leviathan"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-leviathan"] .charRingRight,
.charSprite[data-ring-right="anneau-du-leviathan"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-leviathan"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-leviathan"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-magmaroc"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-magmaroc"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-du-magmaroc"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-magmaroc"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-magmaroc"] .charRingRight,
.charSprite[data-ring-right="anneau-du-magmaroc"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-du-magmaroc"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-magmaroc"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-maitre-des-squelettes"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-maitre-des-squelettes"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-maitre-des-squelettes"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-maitre-des-squelettes"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-maitre-des-squelettes"] .charRingRight,
.charSprite[data-ring-right="anneau-du-maitre-des-squelettes"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-maitre-des-squelettes"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-maitre-des-squelettes"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-mansot-royal"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-mansot-royal"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 2.0px solid #00bcd4 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-du-mansot-royal"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-mansot-royal"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-mansot-royal"] .charRingRight,
.charSprite[data-ring-right="anneau-du-mansot-royal"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 2.0px solid #00bcd4 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-du-mansot-royal"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-mansot-royal"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-matelot"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-matelot"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-matelot"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-matelot"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-matelot"] .charRingRight,
.charSprite[data-ring-right="anneau-du-matelot"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-matelot"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-matelot"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-mecanurgiste"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-mecanurgiste"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-mecanurgiste"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-mecanurgiste"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-mecanurgiste"] .charRingRight,
.charSprite[data-ring-right="anneau-du-mecanurgiste"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-mecanurgiste"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-mecanurgiste"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-minotot"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-minotot"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 2.0px solid #190a02 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-minotot"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-minotot"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-minotot"] .charRingRight,
.charSprite[data-ring-right="anneau-du-minotot"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 2.0px solid #190a02 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-minotot"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-minotot"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-pere-fouettard"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-pere-fouettard"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-pere-fouettard"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-pere-fouettard"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-pere-fouettard"] .charRingRight,
.charSprite[data-ring-right="anneau-du-pere-fouettard"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-pere-fouettard"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-pere-fouettard"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-pirate-givre"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-pirate-givre"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-pirate-givre"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-pirate-givre"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-pirate-givre"] .charRingRight,
.charSprite[data-ring-right="anneau-du-pirate-givre"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-pirate-givre"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-pirate-givre"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-rat"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-rat"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-rat"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-rat"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-rat"] .charRingRight,
.charSprite[data-ring-right="anneau-du-rat"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-rat"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-rat"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-renard-polaire"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-renard-polaire"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-renard-polaire"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-renard-polaire"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-renard-polaire"] .charRingRight,
.charSprite[data-ring-right="anneau-du-renard-polaire"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-renard-polaire"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-renard-polaire"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-roc-ebreche"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-roc-ebreche"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-du-roc-ebreche"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-roc-ebreche"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-roc-ebreche"] .charRingRight,
.charSprite[data-ring-right="anneau-du-roc-ebreche"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-du-roc-ebreche"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-roc-ebreche"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-roi-des-mers"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-roi-des-mers"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-roi-des-mers"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-roi-des-mers"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-roi-des-mers"] .charRingRight,
.charSprite[data-ring-right="anneau-du-roi-des-mers"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-roi-des-mers"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-roi-des-mers"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-roi-singe"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-roi-singe"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-ring-left="anneau-du-roi-singe"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-roi-singe"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-roi-singe"] .charRingRight,
.charSprite[data-ring-right="anneau-du-roi-singe"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-ring-right="anneau-du-roi-singe"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-roi-singe"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-scribe-celeste"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-scribe-celeste"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-left="anneau-du-scribe-celeste"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-scribe-celeste"] .charRingLeft.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-scribe-celeste"] .charRingRight,
.charSprite[data-ring-right="anneau-du-scribe-celeste"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-ring-right="anneau-du-scribe-celeste"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-scribe-celeste"] .charRingRight.equipped::after {
  content: "🪶";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-seigneur-des-flammes"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-seigneur-des-flammes"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-seigneur-des-flammes"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-seigneur-des-flammes"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-seigneur-des-flammes"] .charRingRight,
.charSprite[data-ring-right="anneau-du-seigneur-des-flammes"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-seigneur-des-flammes"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-seigneur-des-flammes"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-sphinx"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-sphinx"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-left="anneau-du-sphinx"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-sphinx"] .charRingLeft.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-sphinx"] .charRingRight,
.charSprite[data-ring-right="anneau-du-sphinx"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-ring-right="anneau-du-sphinx"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-sphinx"] .charRingRight.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-titan-de-brume"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-titan-de-brume"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-titan-de-brume"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-titan-de-brume"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-titan-de-brume"] .charRingRight,
.charSprite[data-ring-right="anneau-du-titan-de-brume"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-titan-de-brume"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-titan-de-brume"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-t-rex"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-t-rex"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-du-t-rex"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-t-rex"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-t-rex"] .charRingRight,
.charSprite[data-ring-right="anneau-du-t-rex"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 2.0px solid #624310 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-du-t-rex"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-t-rex"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-du-yokai"] .charRingLeft,
.charSprite[data-ring-left="anneau-du-yokai"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-du-yokai"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-du-yokai"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-du-yokai"] .charRingRight,
.charSprite[data-ring-right="anneau-du-yokai"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-du-yokai"] .charRingRight::after,
.charSprite[data-ring-right="anneau-du-yokai"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-eveillee"] .charRingLeft,
.charSprite[data-ring-left="anneau-eveillee"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-eveillee"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-eveillee"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-eveillee"] .charRingRight,
.charSprite[data-ring-right="anneau-eveillee"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-eveillee"] .charRingRight::after,
.charSprite[data-ring-right="anneau-eveillee"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-glourseleste"] .charRingLeft,
.charSprite[data-ring-left="anneau-glourseleste"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-left="anneau-glourseleste"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-glourseleste"] .charRingLeft.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-glourseleste"] .charRingRight,
.charSprite[data-ring-right="anneau-glourseleste"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-ring-right="anneau-glourseleste"] .charRingRight::after,
.charSprite[data-ring-right="anneau-glourseleste"] .charRingRight.equipped::after {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-magmatique"] .charRingLeft,
.charSprite[data-ring-left="anneau-magmatique"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-magmatique"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-magmatique"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-magmatique"] .charRingRight,
.charSprite[data-ring-right="anneau-magmatique"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-magmatique"] .charRingRight::after,
.charSprite[data-ring-right="anneau-magmatique"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-prehistorique"] .charRingLeft,
.charSprite[data-ring-left="anneau-prehistorique"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-prehistorique"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-prehistorique"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-prehistorique"] .charRingRight,
.charSprite[data-ring-right="anneau-prehistorique"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-prehistorique"] .charRingRight::after,
.charSprite[data-ring-right="anneau-prehistorique"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-scintillante"] .charRingLeft,
.charSprite[data-ring-left="anneau-scintillante"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-scintillante"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-scintillante"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-scintillante"] .charRingRight,
.charSprite[data-ring-right="anneau-scintillante"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-scintillante"] .charRingRight::after,
.charSprite[data-ring-right="anneau-scintillante"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-left="anneau-squelettique"] .charRingLeft,
.charSprite[data-ring-left="anneau-squelettique"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="anneau-squelettique"] .charRingLeft::after,
.charSprite[data-ring-left="anneau-squelettique"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="anneau-squelettique"] .charRingRight,
.charSprite[data-ring-right="anneau-squelettique"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #ffe082, #d4a017) !important;
  border: 1px solid #624310 !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="anneau-squelettique"] .charRingRight::after,
.charSprite[data-ring-right="anneau-squelettique"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-headgear="bonnet-fongoide"] .charHeadgear,
.charSprite[data-headgear="bonnet-fongoide"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-boots="bottes-celestes"] .charBoots,
.charSprite[data-boots="bottes-celestes"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-cornues"] .charBoots,
.charSprite[data-boots="bottes-cornues"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-daigle-des-sommets"] .charBoots,
.charSprite[data-boots="bottes-daigle-des-sommets"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-d-aigle-des-sommets"] .charBoots,
.charSprite[data-boots="bottes-d-aigle-des-sommets"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-daraignee-sylvestre"] .charBoots,
.charSprite[data-boots="bottes-daraignee-sylvestre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-boots="bottes-d-araignee-sylvestre"] .charBoots,
.charSprite[data-boots="bottes-d-araignee-sylvestre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-boots="bottes-darchimage-supreme"] .charBoots,
.charSprite[data-boots="bottes-darchimage-supreme"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-d-archimage-supreme"] .charBoots,
.charSprite[data-boots="bottes-d-archimage-supreme"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-blours"] .charBoots,
.charSprite[data-boots="bottes-de-blours"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-bouc-hargneux"] .charBoots,
.charSprite[data-boots="bottes-de-bouc-hargneux"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-brochet-mutant"] .charBoots,
.charSprite[data-boots="bottes-de-brochet-mutant"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-de-brumelin"] .charBoots,
.charSprite[data-boots="bottes-de-brumelin"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-cendre"] .charBoots,
.charSprite[data-boots="bottes-de-cendre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-chenille"] .charBoots,
.charSprite[data-boots="bottes-de-chenille"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-cobra-des-dunes"] .charBoots,
.charSprite[data-boots="bottes-de-cobra-des-dunes"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-corbeau-des-plaines"] .charBoots,
.charSprite[data-boots="bottes-de-corbeau-des-plaines"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #2d3436, #000000) !important;
  border: 1.5px solid #1e272e !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-crabe-des-plaines"] .charBoots,
.charSprite[data-boots="bottes-de-crabe-des-plaines"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-crabe-des-roseaux"] .charBoots,
.charSprite[data-boots="bottes-de-crabe-des-roseaux"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-feu"] .charBoots,
.charSprite[data-boots="bottes-de-feu"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-fongus"] .charBoots,
.charSprite[data-boots="bottes-de-fongus"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-fossoyeur"] .charBoots,
.charSprite[data-boots="bottes-de-fossoyeur"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-foudre"] .charBoots,
.charSprite[data-boots="bottes-de-foudre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f1c40f, #8e44ad) !important;
  border: 1.5px solid #d35400 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 16px 16px !important;
}

.charSprite[data-boots="bottes-de-fumerolle"] .charBoots,
.charSprite[data-boots="bottes-de-fumerolle"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-golem-de-roc"] .charBoots,
.charSprite[data-boots="bottes-de-golem-de-roc"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-de-golem-de-sable"] .charBoots,
.charSprite[data-boots="bottes-de-golem-de-sable"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-de-gorille"] .charBoots,
.charSprite[data-boots="bottes-de-gorille"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #303030, #151515) !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-harpie"] .charBoots,
.charSprite[data-boots="bottes-de-harpie"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-jaguar"] .charBoots,
.charSprite[data-boots="bottes-de-jaguar"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f39c12, #d35400) !important;
  border: 1.5px solid #3e2723 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-labeille-de-givre"] .charBoots,
.charSprite[data-boots="bottes-de-labeille-de-givre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-de-l-abeille-de-givre"] .charBoots,
.charSprite[data-boots="bottes-de-l-abeille-de-givre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-de-la-bestiole"] .charBoots,
.charSprite[data-boots="bottes-de-la-bestiole"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-la-chenille-rampante"] .charBoots,
.charSprite[data-boots="bottes-de-la-chenille-rampante"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-larbre-ancestral"] .charBoots,
.charSprite[data-boots="bottes-de-larbre-ancestral"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-boots="bottes-de-l-arbre-ancestral"] .charBoots,
.charSprite[data-boots="bottes-de-l-arbre-ancestral"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-boots="bottes-de-larchange-dechu"] .charBoots,
.charSprite[data-boots="bottes-de-larchange-dechu"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-l-archange-dechu"] .charBoots,
.charSprite[data-boots="bottes-de-l-archange-dechu"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-lautomate"] .charBoots,
.charSprite[data-boots="bottes-de-lautomate"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-l-automate"] .charBoots,
.charSprite[data-boots="bottes-de-l-automate"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-la-vigie"] .charBoots,
.charSprite[data-boots="bottes-de-la-vigie"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-lesprit"] .charBoots,
.charSprite[data-boots="bottes-de-lesprit"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-l-esprit"] .charBoots,
.charSprite[data-boots="bottes-de-l-esprit"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-lhorloge"] .charBoots,
.charSprite[data-boots="bottes-de-lhorloge"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-l-horloge"] .charBoots,
.charSprite[data-boots="bottes-de-l-horloge"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-liche"] .charBoots,
.charSprite[data-boots="bottes-de-liche"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-lievre-givre"] .charBoots,
.charSprite[data-boots="bottes-de-lievre-givre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-de-loup-blanc"] .charBoots,
.charSprite[data-boots="bottes-de-loup-blanc"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-loup-des-bois"] .charBoots,
.charSprite[data-boots="bottes-de-loup-des-bois"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-loup-maigre"] .charBoots,
.charSprite[data-boots="bottes-de-loup-maigre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-lutin"] .charBoots,
.charSprite[data-boots="bottes-de-lutin"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-magma"] .charBoots,
.charSprite[data-boots="bottes-de-magma"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-mamansot"] .charBoots,
.charSprite[data-boots="bottes-de-mamansot"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-mansot-frigorifie"] .charBoots,
.charSprite[data-boots="bottes-de-mansot-frigorifie"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-mansotinet"] .charBoots,
.charSprite[data-boots="bottes-de-mansotinet"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-mansot-timide"] .charBoots,
.charSprite[data-boots="bottes-de-mansot-timide"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-marmouset"] .charBoots,
.charSprite[data-boots="bottes-de-marmouset"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-melours"] .charBoots,
.charSprite[data-boots="bottes-de-melours"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-minotocure"] .charBoots,
.charSprite[data-boots="bottes-de-minotocure"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-minotor"] .charBoots,
.charSprite[data-boots="bottes-de-minotor"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-neige-hargneuse"] .charBoots,
.charSprite[data-boots="bottes-de-neige-hargneuse"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-dent-jeune"] .charBoots,
.charSprite[data-boots="bottes-dent-jeune"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-d-ent-jeune"] .charBoots,
.charSprite[data-boots="bottes-d-ent-jeune"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-pendule"] .charBoots,
.charSprite[data-boots="bottes-de-pendule"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-pillard-du-sable"] .charBoots,
.charSprite[data-boots="bottes-de-pillard-du-sable"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1.5px solid #b7950b !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-de-pterodactyle"] .charBoots,
.charSprite[data-boots="bottes-de-pterodactyle"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-racineau"] .charBoots,
.charSprite[data-boots="bottes-de-racineau"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 1.5px solid #1a0f0a !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 24px !important;
}

.charSprite[data-boots="bottes-de-raptor"] .charBoots,
.charSprite[data-boots="bottes-de-raptor"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-renne"] .charBoots,
.charSprite[data-boots="bottes-de-renne"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-roc-gele"] .charBoots,
.charSprite[data-boots="bottes-de-roc-gele"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-de-roc-glace"] .charBoots,
.charSprite[data-boots="bottes-de-roc-glace"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-de-sanglier"] .charBoots,
.charSprite[data-boots="bottes-de-sanglier"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-sanglier-des-bois"] .charBoots,
.charSprite[data-boots="bottes-de-sanglier-des-bois"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-scorpion"] .charBoots,
.charSprite[data-boots="bottes-de-scorpion"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-serpent-liane"] .charBoots,
.charSprite[data-boots="bottes-de-serpent-liane"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-spectre"] .charBoots,
.charSprite[data-boots="bottes-de-spectre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-spore"] .charBoots,
.charSprite[data-boots="bottes-de-spore"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-dether"] .charBoots,
.charSprite[data-boots="bottes-dether"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-d-ether"] .charBoots,
.charSprite[data-boots="bottes-d-ether"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-de-titan-eternel"] .charBoots,
.charSprite[data-boots="bottes-de-titan-eternel"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-tortue-deau"] .charBoots,
.charSprite[data-boots="bottes-de-tortue-deau"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-tortue-d-eau"] .charBoots,
.charSprite[data-boots="bottes-de-tortue-d-eau"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-de-triceratops"] .charBoots,
.charSprite[data-boots="bottes-de-triceratops"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-yeti-de-noel"] .charBoots,
.charSprite[data-boots="bottes-de-yeti-de-noel"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-yeti-mineur"] .charBoots,
.charSprite[data-boots="bottes-de-yeti-mineur"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-de-yomi"] .charBoots,
.charSprite[data-boots="bottes-de-yomi"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-dours-des-glaces"] .charBoots,
.charSprite[data-boots="bottes-dours-des-glaces"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-d-ours-des-glaces"] .charBoots,
.charSprite[data-boots="bottes-d-ours-des-glaces"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-du-belier"] .charBoots,
.charSprite[data-boots="bottes-du-belier"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #dcdde1, #7f8c8d) !important;
  border: 1.5px solid #2f3640 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-canonnier"] .charBoots,
.charSprite[data-boots="bottes-du-canonnier"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-champion-eternel"] .charBoots,
.charSprite[data-boots="bottes-du-champion-eternel"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-cracglace"] .charBoots,
.charSprite[data-boots="bottes-du-cracglace"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-du-craqueleur"] .charBoots,
.charSprite[data-boots="bottes-du-craqueleur"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-dragon-de-givre"] .charBoots,
.charSprite[data-boots="bottes-du-dragon-de-givre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
}

.charSprite[data-boots="bottes-du-forban"] .charBoots,
.charSprite[data-boots="bottes-du-forban"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 2.0px solid #f59e0b !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-garde-glours"] .charBoots,
.charSprite[data-boots="bottes-du-garde-glours"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-gardien-des-berges"] .charBoots,
.charSprite[data-boots="bottes-du-gardien-des-berges"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-givrefoux"] .charBoots,
.charSprite[data-boots="bottes-du-givrefoux"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-du-gladiateur-des-flammes"] .charBoots,
.charSprite[data-boots="bottes-du-gladiateur-des-flammes"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-gladiateur-des-marees"] .charBoots,
.charSprite[data-boots="bottes-du-gladiateur-des-marees"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-gladiateur-de-terre"] .charBoots,
.charSprite[data-boots="bottes-du-gladiateur-de-terre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-gladiateur-du-vent"] .charBoots,
.charSprite[data-boots="bottes-du-gladiateur-du-vent"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-gladiateur-supreme"] .charBoots,
.charSprite[data-boots="bottes-du-gladiateur-supreme"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-glours-glouton"] .charBoots,
.charSprite[data-boots="bottes-du-glours-glouton"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-golem-de-cristal"] .charBoots,
.charSprite[data-boots="bottes-du-golem-de-cristal"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #70a1ff, #1e90ff) !important;
  border: 2.0px solid #2f3542 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-du-grand-groin"] .charBoots,
.charSprite[data-boots="bottes-du-grand-groin"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 2.0px solid #1c1511 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-leviathan"] .charBoots,
.charSprite[data-boots="bottes-du-leviathan"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 2.0px solid #1c1511 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-magmaroc"] .charBoots,
.charSprite[data-boots="bottes-du-magmaroc"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-du-maitre-des-squelettes"] .charBoots,
.charSprite[data-boots="bottes-du-maitre-des-squelettes"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 2.0px solid #1c1511 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-mansot-royal"] .charBoots,
.charSprite[data-boots="bottes-du-mansot-royal"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 2.0px solid #00bcd4 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-du-matelot"] .charBoots,
.charSprite[data-boots="bottes-du-matelot"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-mecanurgiste"] .charBoots,
.charSprite[data-boots="bottes-du-mecanurgiste"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-minotot"] .charBoots,
.charSprite[data-boots="bottes-du-minotot"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 2.0px solid #190a02 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-pere-fouettard"] .charBoots,
.charSprite[data-boots="bottes-du-pere-fouettard"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 2.0px solid #1c1511 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-pillard"] .charBoots,
.charSprite[data-boots="bottes-du-pillard"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-pirate-givre"] .charBoots,
.charSprite[data-boots="bottes-du-pirate-givre"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-renard-polaire"] .charBoots,
.charSprite[data-boots="bottes-du-renard-polaire"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-roc-ebreche"] .charBoots,
.charSprite[data-boots="bottes-du-roc-ebreche"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-du-roi-des-mers"] .charBoots,
.charSprite[data-boots="bottes-du-roi-des-mers"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-roi-singe"] .charBoots,
.charSprite[data-boots="bottes-du-roi-singe"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-boots="bottes-du-scribe-celeste"] .charBoots,
.charSprite[data-boots="bottes-du-scribe-celeste"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-boots="bottes-du-seigneur-des-flammes"] .charBoots,
.charSprite[data-boots="bottes-du-seigneur-des-flammes"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-sphinx"] .charBoots,
.charSprite[data-boots="bottes-du-sphinx"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-du-titan-de-brume"] .charBoots,
.charSprite[data-boots="bottes-du-titan-de-brume"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-du-t-rex"] .charBoots,
.charSprite[data-boots="bottes-du-t-rex"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 2.0px solid #1c1511 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-du-yokai"] .charBoots,
.charSprite[data-boots="bottes-du-yokai"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-en-golem"] .charBoots,
.charSprite[data-boots="bottes-en-golem"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="bottes-eveillees"] .charBoots,
.charSprite[data-boots="bottes-eveillees"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-givrees"] .charBoots,
.charSprite[data-boots="bottes-givrees"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-boots="bottes-glourseleste"] .charBoots,
.charSprite[data-boots="bottes-glourseleste"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-boots="bottes-magmatiques"] .charBoots,
.charSprite[data-boots="bottes-magmatiques"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-petrifiees"] .charBoots,
.charSprite[data-boots="bottes-petrifiees"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-boots="bottes-prehistoriques"] .charBoots,
.charSprite[data-boots="bottes-prehistoriques"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-scintillantes"] .charBoots,
.charSprite[data-boots="bottes-scintillantes"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-squelettiques"] .charBoots,
.charSprite[data-boots="bottes-squelettiques"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #644628, #3c2814) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 3px rgba(0,0,0,0.3) !important;
}

.charSprite[data-boots="bottes-temporelles"] .charBoots,
.charSprite[data-boots="bottes-temporelles"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
}

.charSprite[data-cape="cape-brulegivre"] .charCape,
.charSprite[data-cape="cape-brulegivre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-celeste"] .charCape,
.charSprite[data-cape="cape-celeste"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-cornue"] .charCape,
.charSprite[data-cape="cape-cornue"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-daigle-des-sommets"] .charCape,
.charSprite[data-cape="cape-daigle-des-sommets"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-d-aigle-des-sommets"] .charCape,
.charSprite[data-cape="cape-d-aigle-des-sommets"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-daraignee-sylvestre"] .charCape,
.charSprite[data-cape="cape-daraignee-sylvestre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 20px 20px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-d-araignee-sylvestre"] .charCape,
.charSprite[data-cape="cape-d-araignee-sylvestre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 20px 20px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-darchimage-supreme"] .charCape,
.charSprite[data-cape="cape-darchimage-supreme"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-d-archimage-supreme"] .charCape,
.charSprite[data-cape="cape-d-archimage-supreme"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-blours"] .charCape,
.charSprite[data-cape="cape-de-blours"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-bouc-hargneux"] .charCape,
.charSprite[data-cape="cape-de-bouc-hargneux"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-brochet-mutant"] .charCape,
.charSprite[data-cape="cape-de-brochet-mutant"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-brumelin"] .charCape,
.charSprite[data-cape="cape-de-brumelin"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-cendre"] .charCape,
.charSprite[data-cape="cape-de-cendre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-chenille"] .charCape,
.charSprite[data-cape="cape-de-chenille"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-cobra-des-dunes"] .charCape,
.charSprite[data-cape="cape-de-cobra-des-dunes"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-corbeau-des-plaines"] .charCape,
.charSprite[data-cape="cape-de-corbeau-des-plaines"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #2d3436, #000000) !important;
  border: 1.5px solid #1e272e !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-crabe-des-plaines"] .charCape,
.charSprite[data-cape="cape-de-crabe-des-plaines"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-crabe-des-roseaux"] .charCape,
.charSprite[data-cape="cape-de-crabe-des-roseaux"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-feu"] .charCape,
.charSprite[data-cape="cape-de-feu"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-fongus"] .charCape,
.charSprite[data-cape="cape-de-fongus"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-fossoyeur"] .charCape,
.charSprite[data-cape="cape-de-fossoyeur"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-foudre"] .charCape,
.charSprite[data-cape="cape-de-foudre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f1c40f, #8e44ad) !important;
  border: 1.5px solid #d35400 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 16px 16px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-fumerolle"] .charCape,
.charSprite[data-cape="cape-de-fumerolle"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-golem"] .charCape,
.charSprite[data-cape="cape-de-golem"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-golem-de-roc"] .charCape,
.charSprite[data-cape="cape-de-golem-de-roc"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-golem-de-sable"] .charCape,
.charSprite[data-cape="cape-de-golem-de-sable"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-gorille"] .charCape,
.charSprite[data-cape="cape-de-gorille"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #303030, #151515) !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-harpie"] .charCape,
.charSprite[data-cape="cape-de-harpie"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-jaguar"] .charCape,
.charSprite[data-cape="cape-de-jaguar"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f39c12, #d35400) !important;
  border: 1.5px solid #3e2723 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-korriandre"] .charCape,
.charSprite[data-cape="cape-de-korriandre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-labeille-de-givre"] .charCape,
.charSprite[data-cape="cape-de-labeille-de-givre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-l-abeille-de-givre"] .charCape,
.charSprite[data-cape="cape-de-l-abeille-de-givre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-la-bestiole"] .charCape,
.charSprite[data-cape="cape-de-la-bestiole"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-la-chenille-rampante"] .charCape,
.charSprite[data-cape="cape-de-la-chenille-rampante"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-larbre-ancestral"] .charCape,
.charSprite[data-cape="cape-de-larbre-ancestral"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-l-arbre-ancestral"] .charCape,
.charSprite[data-cape="cape-de-l-arbre-ancestral"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-larchange-dechu"] .charCape,
.charSprite[data-cape="cape-de-larchange-dechu"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-l-archange-dechu"] .charCape,
.charSprite[data-cape="cape-de-l-archange-dechu"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-lautomate"] .charCape,
.charSprite[data-cape="cape-de-lautomate"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-l-automate"] .charCape,
.charSprite[data-cape="cape-de-l-automate"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-la-vigie"] .charCape,
.charSprite[data-cape="cape-de-la-vigie"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-lesprit"] .charCape,
.charSprite[data-cape="cape-de-lesprit"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-l-esprit"] .charCape,
.charSprite[data-cape="cape-de-l-esprit"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-lhorloge"] .charCape,
.charSprite[data-cape="cape-de-lhorloge"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-l-horloge"] .charCape,
.charSprite[data-cape="cape-de-l-horloge"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-liche"] .charCape,
.charSprite[data-cape="cape-de-liche"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-lievre-givre"] .charCape,
.charSprite[data-cape="cape-de-lievre-givre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-loup-blanc"] .charCape,
.charSprite[data-cape="cape-de-loup-blanc"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-loup-des-bois"] .charCape,
.charSprite[data-cape="cape-de-loup-des-bois"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-loup-maigre"] .charCape,
.charSprite[data-cape="cape-de-loup-maigre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-lutin"] .charCape,
.charSprite[data-cape="cape-de-lutin"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-magma"] .charCape,
.charSprite[data-cape="cape-de-magma"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-mamansot"] .charCape,
.charSprite[data-cape="cape-de-mamansot"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-mansot-frigorifie"] .charCape,
.charSprite[data-cape="cape-de-mansot-frigorifie"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-mansotinet"] .charCape,
.charSprite[data-cape="cape-de-mansotinet"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-mansot-timide"] .charCape,
.charSprite[data-cape="cape-de-mansot-timide"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-marmouset"] .charCape,
.charSprite[data-cape="cape-de-marmouset"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-melours"] .charCape,
.charSprite[data-cape="cape-de-melours"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-minotocure"] .charCape,
.charSprite[data-cape="cape-de-minotocure"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-minotor"] .charCape,
.charSprite[data-cape="cape-de-minotor"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-neige-hargneuse"] .charCape,
.charSprite[data-cape="cape-de-neige-hargneuse"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-dent-jeune"] .charCape,
.charSprite[data-cape="cape-dent-jeune"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-d-ent-jeune"] .charCape,
.charSprite[data-cape="cape-d-ent-jeune"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-pendule"] .charCape,
.charSprite[data-cape="cape-de-pendule"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-pillard-du-sable"] .charCape,
.charSprite[data-cape="cape-de-pillard-du-sable"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1.5px solid #b7950b !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-pterodactyle"] .charCape,
.charSprite[data-cape="cape-de-pterodactyle"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-racineau"] .charCape,
.charSprite[data-cape="cape-de-racineau"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 1.5px solid #1a0f0a !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 24px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-raptor"] .charCape,
.charSprite[data-cape="cape-de-raptor"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-renne"] .charCape,
.charSprite[data-cape="cape-de-renne"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-roc-gele"] .charCape,
.charSprite[data-cape="cape-de-roc-gele"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-sanglier"] .charCape,
.charSprite[data-cape="cape-de-sanglier"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-sanglier-des-bois"] .charCape,
.charSprite[data-cape="cape-de-sanglier-des-bois"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-scorpion"] .charCape,
.charSprite[data-cape="cape-de-scorpion"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-serpent-liane"] .charCape,
.charSprite[data-cape="cape-de-serpent-liane"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-spectre"] .charCape,
.charSprite[data-cape="cape-de-spectre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-spore"] .charCape,
.charSprite[data-cape="cape-de-spore"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-des-sables"] .charCape,
.charSprite[data-cape="cape-des-sables"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1.5px solid #b7950b !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-dether"] .charCape,
.charSprite[data-cape="cape-dether"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-d-ether"] .charCape,
.charSprite[data-cape="cape-d-ether"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-thymus"] .charCape,
.charSprite[data-cape="cape-de-thymus"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #3b0764, #1e1b4b) !important;
  border: 2.0px solid #a855f7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-titan-eternel"] .charCape,
.charSprite[data-cape="cape-de-titan-eternel"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-tortue-deau"] .charCape,
.charSprite[data-cape="cape-de-tortue-deau"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-tortue-d-eau"] .charCape,
.charSprite[data-cape="cape-de-tortue-d-eau"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-triceratops"] .charCape,
.charSprite[data-cape="cape-de-triceratops"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-yeti-de-noel"] .charCape,
.charSprite[data-cape="cape-de-yeti-de-noel"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-yeti-mineur"] .charCape,
.charSprite[data-cape="cape-de-yeti-mineur"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-de-yomi"] .charCape,
.charSprite[data-cape="cape-de-yomi"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-dours-des-glaces"] .charCape,
.charSprite[data-cape="cape-dours-des-glaces"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-d-ours-des-glaces"] .charCape,
.charSprite[data-cape="cape-d-ours-des-glaces"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-belier"] .charCape,
.charSprite[data-cape="cape-du-belier"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #dcdde1, #7f8c8d) !important;
  border: 1.5px solid #2f3640 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-canonnier"] .charCape,
.charSprite[data-cape="cape-du-canonnier"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-capitaine-frigorn"] .charCape,
.charSprite[data-cape="cape-du-capitaine-frigorn"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 2.0px solid #f59e0b !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-champion-eternel"] .charCape,
.charSprite[data-cape="cape-du-champion-eternel"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-cracglace"] .charCape,
.charSprite[data-cape="cape-du-cracglace"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-craqueleur"] .charCape,
.charSprite[data-cape="cape-du-craqueleur"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-dragon-de-givre"] .charCape,
.charSprite[data-cape="cape-du-dragon-de-givre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-garde-glours"] .charCape,
.charSprite[data-cape="cape-du-garde-glours"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-gardien-des-berges"] .charCape,
.charSprite[data-cape="cape-du-gardien-des-berges"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-givrefoux"] .charCape,
.charSprite[data-cape="cape-du-givrefoux"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-gladiateur-des-flammes"] .charCape,
.charSprite[data-cape="cape-du-gladiateur-des-flammes"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-gladiateur-des-marees"] .charCape,
.charSprite[data-cape="cape-du-gladiateur-des-marees"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-gladiateur-de-terre"] .charCape,
.charSprite[data-cape="cape-du-gladiateur-de-terre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-gladiateur-du-vent"] .charCape,
.charSprite[data-cape="cape-du-gladiateur-du-vent"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-gladiateur-supreme"] .charCape,
.charSprite[data-cape="cape-du-gladiateur-supreme"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-glours-glouton"] .charCape,
.charSprite[data-cape="cape-du-glours-glouton"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-golem-de-cristal"] .charCape,
.charSprite[data-cape="cape-du-golem-de-cristal"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #70a1ff, #1e90ff) !important;
  border: 2.0px solid #2f3542 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-grand-groin"] .charCape,
.charSprite[data-cape="cape-du-grand-groin"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 2.0px solid #b496ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-leviathan"] .charCape,
.charSprite[data-cape="cape-du-leviathan"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 2.0px solid #b496ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-magmaroc"] .charCape,
.charSprite[data-cape="cape-du-magmaroc"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-maitre-des-squelettes"] .charCape,
.charSprite[data-cape="cape-du-maitre-des-squelettes"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 2.0px solid #b496ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-mansot-royal"] .charCape,
.charSprite[data-cape="cape-du-mansot-royal"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 2.0px solid #00bcd4 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-matelot"] .charCape,
.charSprite[data-cape="cape-du-matelot"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-mecanurgiste"] .charCape,
.charSprite[data-cape="cape-du-mecanurgiste"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-minotot"] .charCape,
.charSprite[data-cape="cape-du-minotot"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 2.0px solid #190a02 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-pere-fouettard"] .charCape,
.charSprite[data-cape="cape-du-pere-fouettard"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 2.0px solid #b496ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-pirate-givre"] .charCape,
.charSprite[data-cape="cape-du-pirate-givre"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-renard-polaire"] .charCape,
.charSprite[data-cape="cape-du-renard-polaire"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-roc-ebreche"] .charCape,
.charSprite[data-cape="cape-du-roc-ebreche"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-roi-des-mers"] .charCape,
.charSprite[data-cape="cape-du-roi-des-mers"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-roi-singe"] .charCape,
.charSprite[data-cape="cape-du-roi-singe"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-cape="cape-du-scribe-celeste"] .charCape,
.charSprite[data-cape="cape-du-scribe-celeste"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  background-size: 10px 14px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-seigneur-des-flammes"] .charCape,
.charSprite[data-cape="cape-du-seigneur-des-flammes"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-sphinx"] .charCape,
.charSprite[data-cape="cape-du-sphinx"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-titan-de-brume"] .charCape,
.charSprite[data-cape="cape-du-titan-de-brume"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-t-rex"] .charCape,
.charSprite[data-cape="cape-du-t-rex"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 2.0px solid #b496ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-du-yokai"] .charCape,
.charSprite[data-cape="cape-du-yokai"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-en-peau-de-loup"] .charCape,
.charSprite[data-cape="cape-en-peau-de-loup"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-eveillee"] .charCape,
.charSprite[data-cape="cape-eveillee"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-givrefoux"] .charCape,
.charSprite[data-cape="cape-givrefoux"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-glourseleste"] .charCape,
.charSprite[data-cape="cape-glourseleste"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-magmatique"] .charCape,
.charSprite[data-cape="cape-magmatique"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-prehistorique"] .charCape,
.charSprite[data-cape="cape-prehistorique"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-scintillante"] .charCape,
.charSprite[data-cape="cape-scintillante"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="cape-squelettique"] .charCape,
.charSprite[data-cape="cape-squelettique"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 1.5px solid #b496ff !important;
  box-shadow: 0 0 5px rgba(120,80,200,0.3) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-headgear="casque-du-colosse"] .charHeadgear,
.charSprite[data-headgear="casque-du-colosse"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #334155, #1e293b) !important;
  border: 2.0px solid #7dd3fc !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="casque-en-golem"] .charHeadgear,
.charSprite[data-headgear="casque-en-golem"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-belt="ceinture-de-cobra"] .charBelt,
.charSprite[data-belt="ceinture-de-cobra"] .charBelt.equipped {
  width: 28px !important;
  height: 6px !important;
  top: 51px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 4px rgba(0,0,0,0.25) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-belt="ceinture-de-crabe"] .charBelt,
.charSprite[data-belt="ceinture-de-crabe"] .charBelt.equipped {
  width: 28px !important;
  height: 6px !important;
  top: 51px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(0,0,0,0.25) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-belt="ceinture-en-sanglier"] .charBelt,
.charSprite[data-belt="ceinture-en-sanglier"] .charBelt.equipped {
  width: 28px !important;
  height: 6px !important;
  top: 51px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(0,0,0,0.25) !important;
}

.charSprite[data-headgear="chapeau-dent"] .charHeadgear,
.charSprite[data-headgear="chapeau-dent"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="chapeau-d-ent"] .charHeadgear,
.charSprite[data-headgear="chapeau-d-ent"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="chapeau-de-tengu"] .charHeadgear,
.charSprite[data-headgear="chapeau-de-tengu"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f8fafc, #38bdf8) !important;
  border: 2.0px solid #0284c7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="chapeau-du-comte"] .charHeadgear,
.charSprite[data-headgear="chapeau-du-comte"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
}

.charSprite[data-amulet="cur-invariable-du-golem"] .charAmulet,
.charSprite[data-amulet="cur-invariable-du-golem"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 6px 6px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="cur-invariable-du-golem"] .charAmulet::after,
.charSprite[data-amulet="cur-invariable-du-golem"] .charAmulet.equipped::after {
  content: "🪨";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-headgear="coiffe-celeste"] .charHeadgear,
.charSprite[data-headgear="coiffe-celeste"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-cornue"] .charHeadgear,
.charSprite[data-headgear="coiffe-cornue"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-daigle-des-sommets"] .charHeadgear,
.charSprite[data-headgear="coiffe-daigle-des-sommets"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-d-aigle-des-sommets"] .charHeadgear,
.charSprite[data-headgear="coiffe-d-aigle-des-sommets"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #7e5109, #4a2704) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-daraignee-sylvestre"] .charHeadgear,
.charSprite[data-headgear="coiffe-daraignee-sylvestre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-headgear="coiffe-d-araignee-sylvestre"] .charHeadgear,
.charSprite[data-headgear="coiffe-d-araignee-sylvestre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20 M10,0 L10,20 M0,10 L20,10' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #2c3e50, #1a252f) !important;
  border: 1.5px solid #bdc3c7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 20px 20px !important;
}

.charSprite[data-headgear="coiffe-darchimage-supreme"] .charHeadgear,
.charSprite[data-headgear="coiffe-darchimage-supreme"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-d-archimage-supreme"] .charHeadgear,
.charSprite[data-headgear="coiffe-d-archimage-supreme"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-blours"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-blours"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-bouc-hargneux"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-bouc-hargneux"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-brochet-mutant"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-brochet-mutant"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-de-brumelin"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-brumelin"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-cendre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-cendre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-chenille"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-chenille"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-cobra-des-dunes"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-cobra-des-dunes"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-corbeau-des-plaines"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-corbeau-des-plaines"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #2d3436, #000000) !important;
  border: 1.5px solid #1e272e !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-crabe-des-plaines"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-crabe-des-plaines"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-crabe-des-roseaux"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-crabe-des-roseaux"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ff6b6b, #ee5253) !important;
  border: 1.5px solid #b33939 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-feu"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-feu"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-fongus"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-fongus"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-fossoyeur"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-fossoyeur"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-foudre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-foudre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f1c40f, #8e44ad) !important;
  border: 1.5px solid #d35400 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 16px 16px !important;
}

.charSprite[data-headgear="coiffe-de-fumerolle"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-fumerolle"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-golem-de-roc"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-golem-de-roc"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-de-golem-de-sable"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-golem-de-sable"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-de-gorille"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-gorille"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #303030, #151515) !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-harpie"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-harpie"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-jaguar"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-jaguar"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f39c12, #d35400) !important;
  border: 1.5px solid #3e2723 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-labeille-de-givre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-labeille-de-givre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-de-l-abeille-de-givre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-l-abeille-de-givre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-de-la-bestiole"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-la-bestiole"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-la-chenille-rampante"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-la-chenille-rampante"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-larbre-ancestral"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-larbre-ancestral"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-headgear="coiffe-de-l-arbre-ancestral"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-l-arbre-ancestral"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 2.0px solid #1a0f0a !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 24px !important;
}

.charSprite[data-headgear="coiffe-de-larchange-dechu"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-larchange-dechu"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-l-archange-dechu"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-l-archange-dechu"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 2.0px solid #fdcb6e !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-lautomate"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-lautomate"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-l-automate"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-l-automate"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-la-vigie"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-la-vigie"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-lesprit"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-lesprit"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-l-esprit"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-l-esprit"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-lhorloge"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-lhorloge"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-l-horloge"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-l-horloge"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-liche"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-liche"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-lievre-givre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-lievre-givre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-de-loup-blanc"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-loup-blanc"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-loup-des-bois"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-loup-des-bois"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-loup-maigre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-loup-maigre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #4b5257, #2c3033) !important;
  border: 1.5px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-lutin"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-lutin"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-magma"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-magma"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-mamansot"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-mamansot"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-mansot-frigorifie"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-mansot-frigorifie"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-mansotinet"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-mansotinet"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-mansot-timide"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-mansot-timide"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 1.5px solid #00bcd4 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-marmouset"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-marmouset"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-melours"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-melours"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-minotocure"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-minotocure"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-minotor"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-minotor"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 1.5px solid #190a02 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-neige-hargneuse"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-neige-hargneuse"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-dent-jeune"] .charHeadgear,
.charSprite[data-headgear="coiffe-dent-jeune"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-d-ent-jeune"] .charHeadgear,
.charSprite[data-headgear="coiffe-d-ent-jeune"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-pendule"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-pendule"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-pillard-du-sable"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-pillard-du-sable"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0.6px, transparent 0.6px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15) 0.8px, transparent 0.8px), linear-gradient(180deg, #f4d03f, #ca6f1e) !important;
  border: 1.5px solid #b7950b !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-de-pterodactyle"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-pterodactyle"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-racineau"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-racineau"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M2,0 C3,6 1,12 2,18 C3,20 1,22 2,24 M6,0 C5,8 7,16 6,24 M10,0 C9,6 11,12 10,18 C11,20 9,22 10,24' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(180deg, #5c4033, #3d2b1f) !important;
  border: 1.5px solid #1a0f0a !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 24px !important;
}

.charSprite[data-headgear="coiffe-de-raptor"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-raptor"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-renne"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-renne"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-roc-gele"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-roc-gele"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-de-sanglier"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-sanglier"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-sanglier-des-bois"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-sanglier-des-bois"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-scorpion"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-scorpion"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-serpent-liane"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-serpent-liane"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  border: 1.5px solid #112233 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-spectre"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-spectre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-spore"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-spore"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-dether"] .charHeadgear,
.charSprite[data-headgear="coiffe-dether"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-d-ether"] .charHeadgear,
.charSprite[data-headgear="coiffe-d-ether"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #a29bfe, #6c5ce7) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-de-titan-eternel"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-titan-eternel"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-tortue-deau"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-tortue-deau"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-tortue-d-eau"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-tortue-d-eau"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #27ae60, #145a32) !important;
  border: 1.5px solid #0e3a1f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-de-triceratops"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-triceratops"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-yeti-de-noel"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-yeti-de-noel"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-yeti-mineur"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-yeti-mineur"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #ffffff, #dcdde1) !important;
  border: 1.5px solid #7f8c8d !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-de-yomi"] .charHeadgear,
.charSprite[data-headgear="coiffe-de-yomi"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-dours-des-glaces"] .charHeadgear,
.charSprite[data-headgear="coiffe-dours-des-glaces"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-d-ours-des-glaces"] .charHeadgear,
.charSprite[data-headgear="coiffe-d-ours-des-glaces"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-du-belier"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-belier"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #dcdde1, #7f8c8d) !important;
  border: 1.5px solid #2f3640 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-canonnier"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-canonnier"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-champion-eternel"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-champion-eternel"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-cracglace"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-cracglace"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 1.5px solid #8cb2d7 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-du-craqueleur"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-craqueleur"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-dragon-de-givre"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-dragon-de-givre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #ffffff, #74b9ff) !important;
  border: 2.0px solid #70a1ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 8px 8px !important;
}

.charSprite[data-headgear="coiffe-du-garde-glours"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-garde-glours"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-gardien-des-berges"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-gardien-des-berges"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-givrefoux"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-givrefoux"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.5) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1.6px, transparent 1.6px), linear-gradient(180deg, #ffffff, #d7edf8) !important;
  border: 2.0px solid #8cb2d7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 12px 12px !important;
}

.charSprite[data-headgear="coiffe-du-gladiateur-des-flammes"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-gladiateur-des-flammes"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-gladiateur-des-marees"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-gladiateur-des-marees"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-gladiateur-de-terre"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-gladiateur-de-terre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-gladiateur-du-vent"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-gladiateur-du-vent"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-gladiateur-supreme"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-gladiateur-supreme"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-glours-glouton"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-glours-glouton"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-golem-de-cristal"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-golem-de-cristal"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #70a1ff, #1e90ff) !important;
  border: 2.0px solid #2f3542 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-du-grand-groin"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-grand-groin"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 2.0px solid #ffc864 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-leviathan"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-leviathan"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 2.0px solid #ffc864 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-magmaroc"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-magmaroc"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-du-maitre-des-squelettes"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-maitre-des-squelettes"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 2.0px solid #ffc864 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-mansot-royal"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-mansot-royal"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #e0f7fa, #00838f) !important;
  border: 2.0px solid #00bcd4 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-du-matelot"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-matelot"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-mecanurgiste"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-mecanurgiste"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-minotot"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-minotot"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #5c4033, #2b1a0a) !important;
  border: 2.0px solid #190a02 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-pere-fouettard"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-pere-fouettard"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 2.0px solid #ffc864 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-pirate-givre"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-pirate-givre"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d8d8d, #4a4a4a) !important;
  border: 1.5px solid #2d2d2d !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-renard-polaire"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-renard-polaire"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-roc-ebreche"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-roc-ebreche"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 1.5px solid #2c3e50 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-du-roi-des-mers"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-roi-des-mers"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-roi-singe"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-roi-singe"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-headgear="coiffe-du-sanglier"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-sanglier"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #8d5e3a, #5c3a21) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-scribe-celeste"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-scribe-celeste"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.2) 30%, transparent 35%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.1) 60%, transparent 65%), linear-gradient(180deg, #ffffff, #ffeaa7) !important;
  border: 1.5px solid #fdcb6e !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 10px 14px !important;
}

.charSprite[data-headgear="coiffe-du-seigneur-des-flammes"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-seigneur-des-flammes"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-sphinx"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-sphinx"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #95a5a6, #7f8c8d) !important;
  border: 2.0px solid #2c3e50 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="coiffe-du-titan-de-brume"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-titan-de-brume"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-du-t-rex"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-t-rex"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 2.0px solid #ffc864 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-du-yokai"] .charHeadgear,
.charSprite[data-headgear="coiffe-du-yokai"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-eveillee"] .charHeadgear,
.charSprite[data-headgear="coiffe-eveillee"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-glourseleste"] .charHeadgear,
.charSprite[data-headgear="coiffe-glourseleste"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #fef08a, #d97706) !important;
  border: 2.0px solid #fbbf24 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="coiffe-magmatique"] .charHeadgear,
.charSprite[data-headgear="coiffe-magmatique"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-prehistorique"] .charHeadgear,
.charSprite[data-headgear="coiffe-prehistorique"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-scintillante"] .charHeadgear,
.charSprite[data-headgear="coiffe-scintillante"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-headgear="coiffe-squelettique"] .charHeadgear,
.charSprite[data-headgear="coiffe-squelettique"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
}

.charSprite[data-amulet="collier-de-harpie"] .charAmulet,
.charSprite[data-amulet="collier-de-harpie"] .charAmulet.equipped {
  width: 8px !important;
  height: 8px !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 6px rgba(255,220,0,0.7) !important;
  background-size: 8px 8px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

.charSprite[data-amulet="collier-de-harpie"] .charAmulet::after,
.charSprite[data-amulet="collier-de-harpie"] .charAmulet.equipped::after {
  content: "🐍";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-headgear="couronne-divine-du-roi-singe"] .charHeadgear,
.charSprite[data-headgear="couronne-divine-du-roi-singe"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f1c40f, #e67e22) !important;
  border: 2.0px solid #d35400 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(0% 100%, 0% 30%, 20% 10%, 50% 0%, 80% 10%, 100% 30%, 100% 100%) !important;
}

.charSprite[data-cape="fourrure-du-colosse"] .charCape,
.charSprite[data-cape="fourrure-du-colosse"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #334155, #1e293b) !important;
  border: 2.0px solid #7dd3fc !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-boots="geta-de-tengu"] .charBoots,
.charSprite[data-boots="geta-de-tengu"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(180deg, #f8fafc, #38bdf8) !important;
  border: 2.0px solid #0284c7 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-headgear="heaume-dobsidien"] .charHeadgear,
.charSprite[data-headgear="heaume-dobsidien"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="heaume-d-obsidien"] .charHeadgear,
.charSprite[data-headgear="heaume-d-obsidien"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="machoire-titanesque-du-t-rex"] .charHeadgear,
.charSprite[data-headgear="machoire-titanesque-du-t-rex"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #c89650, #785028) !important;
  border: 2.0px solid #ffc864 !important;
  box-shadow: 0 0 8px #ffd700 !important;
}

.charSprite[data-cape="manteau-du-temps-glace"] .charCape,
.charSprite[data-cape="manteau-du-temps-glace"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon points='10,0 3,9 8,9 6,16 13,7 8,7' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E"), linear-gradient(180deg, #312e81, #1e1b4b) !important;
  border: 2.0px solid #d4af37 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 16px 16px !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-cape="manteau-obscur-du-pere-fouettard"] .charCape,
.charSprite[data-cape="manteau-obscur-du-pere-fouettard"] .charCape.equipped {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #6450a0, #322864) !important;
  border: 2.0px solid #b496ff !important;
  box-shadow: 0 0 8px #ffd700 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 80%, 75% 65%, 50% 100%, 25% 65%, 0% 80%) !important;
}

.charSprite[data-headgear="masque-de-harpie"] .charHeadgear,
.charSprite[data-headgear="masque-de-harpie"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 24%, transparent 26%), radial-gradient(circle at 0% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 100% 50%, rgba(0,0,0,0.08) 24%, transparent 26%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.12) 24%, transparent 26%), linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #1e824c !important;
  box-shadow: 0 0 4px rgba(255,180,60,0.4) !important;
  background-size: 8px 8px !important;
}

.charSprite[data-ring-left="orbe-de-magma-du-seigneur-des-flammes"] .charRingLeft,
.charSprite[data-ring-left="orbe-de-magma-du-seigneur-des-flammes"] .charRingLeft.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-left="orbe-de-magma-du-seigneur-des-flammes"] .charRingLeft::after,
.charSprite[data-ring-left="orbe-de-magma-du-seigneur-des-flammes"] .charRingLeft.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-ring-right="orbe-de-magma-du-seigneur-des-flammes"] .charRingRight,
.charSprite[data-ring-right="orbe-de-magma-du-seigneur-des-flammes"] .charRingRight.equipped {
  width: 14px !important;
  height: 4px !important;
  top: 53px !important;
  left: 80% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #e74c3c, #c0392b) !important;
  border: 1px solid #f1c40f !important;
  box-shadow: 0 0 4px rgba(255,215,0,0.65) !important;
}

.charSprite[data-ring-right="orbe-de-magma-du-seigneur-des-flammes"] .charRingRight::after,
.charSprite[data-ring-right="orbe-de-magma-du-seigneur-des-flammes"] .charRingRight.equipped::after {
  content: "💎";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.charSprite[data-boots="solerets-dobsidien"] .charBoots,
.charSprite[data-boots="solerets-dobsidien"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-boots="solerets-d-obsidien"] .charBoots,
.charSprite[data-boots="solerets-d-obsidien"] .charBoots.equipped {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%), linear-gradient(225deg, rgba(0,0,0,0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.25) 25%, transparent 25%), linear-gradient(180deg, #0f172a, #1c1917) !important;
  border: 2.0px solid #ff5722 !important;
  box-shadow: 0 0 8px #ffd700 !important;
  background-size: 6px 6px !important;
}

.charSprite[data-headgear="tricorne-du-forban"] .charHeadgear,
.charSprite[data-headgear="tricorne-du-forban"] .charHeadgear.equipped {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  background: linear-gradient(180deg, #1e293b, #0f172a) !important;
  border: 2.0px solid #f59e0b !important;
  box-shadow: 0 0 8px #ffd700 !important;
}
/* --- END_GENERATED_EQUIPMENT_STYLES --- */

/* --- Back-Facing (Perspective) Overrides --- */
.charSprite.facing-back .charCape {
  z-index: 5 !important;
}

.charSprite.facing-back .charBody {
  z-index: 2 !important;
}

.charSprite.facing-back .charFeet {
  z-index: 2 !important;
}

.charSprite.facing-back .charBoots {
  z-index: 3 !important;
}

.charSprite.facing-back .charBelt {
  z-index: 3 !important;
}

.charSprite.facing-back .charAmulet {
  z-index: 1 !important;
  /* Derrière le corps et la tête quand le perso est de dos */
}

.charSprite.facing-back .charRingLeft {
  z-index: 6 !important;
}

.charSprite.facing-back .charRingRight {
  z-index: 6 !important;
}

.charSprite.facing-back .charHead {
  z-index: 4 !important;
}

.charSprite.facing-back .charHeadgear {
  z-index: 7 !important;
}

.charSprite.facing-back .charWeapon {
  z-index: 6 !important;
}

.charSprite.facing-back .charHead::after {
  display: none !important;
}

.charSprite.facing-back .charAmulet::after {
  display: none !important;
}

/* --- Custom Keyframe Animations --- */
@keyframes fireFlicker {

  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 4px #ff793f);
  }

  50% {
    filter: brightness(1.2) drop-shadow(0 0 8px #ff5252);
  }
}

@keyframes lightningFlicker {

  0%,
  100% {
    filter: brightness(1);
    opacity: 0.95;
  }

  50% {
    filter: brightness(1.4) drop-shadow(0 0 6px #00e5ff);
    opacity: 1;
  }
}


/* =========================
   WEAPONS & CLASS DESIGN (3D METALLIC SHEEN & SHADOWS)
   ========================= */

/* Guerrier - Épée médiévale effilée avec garde dorée et pommeau */
.charSprite.class-guerrier .charWeapon {
  position: absolute;
  width: 6px;
  height: 42px;
  right: -2px;
  top: 32px;
  background: linear-gradient(90deg, #dcdde1 0%, #ffffff 30%, #718093 70%, #2f3640 100%);
  /* Lame chromée avec reflet */
  clip-path: polygon(50% 0%, 100% 12%, 100% 100%, 0% 100%, 0% 12%);
  /* Pointe de lame affûtée */
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.65),
    -1px 0 rgba(255, 0, 80, 0.3),
    1px 0 rgba(0, 255, 200, 0.3);
  transform-origin: 50% 90%;
  animation: weaponSway 4s ease-in-out infinite;
  z-index: 5;
}

.charSprite.class-guerrier .charWeapon::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 5px;
  bottom: 8px;
  /* Séparation entre la lame et la poignée */
  left: -7px;
  background: linear-gradient(180deg, #ffd700, #b8860b);
  /* Garde dorée */
  border: 1px solid #1c1511;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.charSprite.class-guerrier .charWeapon::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 10px;
  bottom: -2px;
  /* Poignée */
  left: 1px;
  background: #5c3a21;
  /* Manche en cuir/bois */
  border: 1px solid #1c1511;
  border-radius: 1px;
  box-shadow: 0 2px 0 #ffd700;
  /* Pommeau doré au bout */
}

/* Mage - Sceptre antique runique */
.charSprite.class-mage .charStaff {
  position: absolute;
  width: 6px;
  height: 46px;
  right: -4px;
  top: 28px;
  background: linear-gradient(90deg, #784212, #fad7a0 40%, #784212 80%);
  /* Bois sculpté verni */
  border: 1.5px solid #1c1511;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 90%;
  animation: weaponSway 3.6s ease-in-out infinite;
  z-index: 5;
}

.charSprite.class-mage .charStaff::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: -14px;
  left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #a29bfe 40%, #6c5ce7 80%, #32107c 100%);
  /* Orbe runique brillant */
  box-shadow:
    0 0 14px #6c5ce7,
    0 0 25px rgba(108, 92, 231, 0.7),
    -2px 0 rgba(255, 0, 80, 0.4),
    2px 0 rgba(0, 255, 200, 0.4);
  animation: orbPulse 1.8s ease-in-out infinite;
}

.charSprite.class-mage .charAura {
  position: absolute;
  width: 68px;
  height: 68px;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(162, 155, 254, 0.3) 0%, rgba(108, 92, 231, 0.08) 50%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* Archer - Arc de guerre elfe en if */
.charSprite.class-archer .charBow {
  position: absolute;
  width: 18px;
  height: 38px;
  right: -8px;
  top: 36px;
  border: 4px solid #e58e26;
  border-left: 0;
  border-radius: 0 40px 40px 0;
  background: linear-gradient(180deg, #d35400, #a04000 60%, #5e2700 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    -1px 0 rgba(255, 0, 80, 0.25),
    1px 0 rgba(0, 255, 200, 0.25);
  transform-origin: 20% 90%;
  animation: weaponSway 3.8s ease-in-out infinite;
  z-index: 5;
}

.charSprite.class-archer .charBow::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 28px;
  right: -6px;
  top: 5px;
  background: linear-gradient(180deg, #fff, #fad390, #e58e26);
  /* Corde tendue réfléchissante */
  transform: rotate(-10deg);
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Nécromancien - Aura spectrale et ornement de mort */
.charSprite.class-necromancien .charAura {
  position: absolute;
  width: 76px;
  height: 76px;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(162, 0, 255, 0.4) 0%, rgba(76, 0, 112, 0.12) 55%, transparent 75%);
  box-shadow:
    0 0 24px rgba(162, 0, 255, 0.25),
    inset 0 0 12px rgba(255, 255, 255, 0.03),
    -3px 0 rgba(255, 0, 80, 0.3),
    3px 0 rgba(0, 255, 200, 0.3);
  filter: blur(1px);
  pointer-events: none;
}

.charSprite.class-necromancien .charHead::after {
  content: "";
}

/* =========================
   MOVEMENT VISUALS OVERHAUL OVERRIDES
   ========================= */

/* Horizontal Flip Support */
.charSprite.facing-left {
  scale: -1 1;
}

/* Active walking animations for equipment */
.charSprite.walking .charCape {
  animation: walkCape 0.34s ease-in-out infinite;
  transform-origin: 50% 0%;
}

.charSprite.walking .charBoots {
  animation: walkFeet 0.34s ease-in-out infinite;
}

.charSprite.walking .charHeadgear {
  animation: walkHead 0.34s ease-in-out infinite;
  transform-origin: 50% 85%;
}

.charSprite.walking .charAmulet,
.charSprite.walking .charBelt,
.charSprite.walking .charWeapon,
.charSprite.walking .charStaff,
.charSprite.walking .charBow {
  animation: walkTorso 0.34s ease-in-out infinite;
  transform-origin: 50% 18%;
}

/* Active running animations for equipment and dynamic tilt */
.charSprite.running {
  animation: runBob 0.22s linear infinite !important;
  transform: rotate(6deg) !important;
}

.charSprite.running.facing-left {
  transform: rotate(-6deg) !important;
}

.charSprite.running::after {
  animation: runShadow 0.22s linear infinite !important;
}

.charSprite.running .charCape {
  animation: runCape 0.22s ease-in-out infinite !important;
}

.charSprite.running .charBoots {
  animation: runBoots 0.22s ease-in-out infinite !important;
}

.charSprite.running .charHeadgear {
  animation: runHead 0.22s ease-in-out infinite !important;
}

.charSprite.running .charAmulet,
.charSprite.running .charBelt,
.charSprite.running .charWeapon,
.charSprite.running .charStaff,
.charSprite.running .charBow {
  animation: runTorso 0.22s ease-in-out infinite !important;
}

.charSprite.running .charBody {
  animation: runTorso 0.22s ease-in-out infinite !important;
}

.charSprite.running .charHead {
  animation: runHead 0.22s ease-in-out infinite !important;
}

.charSprite.running .charBody::before {
  animation: runArmLeft 0.22s ease-in-out infinite !important;
}

.charSprite.running .charBody::after {
  animation: runArmRight 0.22s ease-in-out infinite !important;
}

.charSprite.running .charFeet {
  animation: runFeet 0.22s ease-in-out infinite !important;
}

.charSprite.running .charFeet::before {
  animation: runFootLeft 0.22s ease-in-out infinite !important;
}

.charSprite.running .charFeet::after {
  animation: runFootRight 0.22s ease-in-out infinite !important;
}

/* Back-Facing (Perspective) Overrides - Hair Color */
.charSprite.facing-back.class-guerrier .charHead {
  background: linear-gradient(180deg, #6d4024, #392115) !important;
}

.charSprite.facing-back.class-mage .charHead {
  background: linear-gradient(180deg, #d7edf8, #8cb2d7) !important;
}

.charSprite.facing-back.class-archer .charHead {
  background: linear-gradient(180deg, #7a4c2d, #402414) !important;
}

.charSprite.facing-back.class-necromancien .charHead {
  background: linear-gradient(180deg, #d9d2e9, #8b79a8) !important;
}

/* Headgear layer priority when facing front (must sit on top of the head which has z-index 3) */
.charHeadgear {
  z-index: 4;
}

/* ==========================================================================
   COSMETIC APPEARANCE SETS & CSS PARTICLE EFFECTS OVERRIDES
   ========================================================================== */

/* Style Resets for Cosmetic Items */
[data-headgear="coiffe-cosmique"] .charHeadgear.equipped,
[data-cape="cape-cosmique"] .charCape.equipped,
[data-boots="bottes-cosmiques"] .charBoots.equipped,
[data-ring-left="anneau-cosmique"] .charRingLeft.equipped,
[data-ring-right="anneau-cosmique"] .charRingRight.equipped,
[data-belt="ceinture-cosmique"] .charBelt.equipped,
[data-headgear="coiffe-du-neant"] .charHeadgear.equipped,
[data-cape="cape-du-neant"] .charCape.equipped,
[data-boots="bottes-du-neant"] .charBoots.equipped,
[data-ring-left="anneau-du-neant"] .charRingLeft.equipped,
[data-ring-right="anneau-du-neant"] .charRingRight.equipped,
[data-belt="ceinture-du-neant"] .charBelt.equipped,
[data-headgear="coiffe-solaire"] .charHeadgear.equipped,
[data-cape="cape-solaire"] .charCape.equipped,
[data-boots="bottes-solaires"] .charBoots.equipped,
[data-ring-left="anneau-solaire"] .charRingLeft.equipped,
[data-ring-right="anneau-solaire"] .charRingRight.equipped,
[data-belt="ceinture-solaire"] .charBelt.equipped,
[data-headgear="coiffe-ombrale"] .charHeadgear.equipped,
[data-cape="cape-ombrale"] .charCape.equipped,
[data-boots="bottes-ombrales"] .charBoots.equipped,
[data-ring-left="anneau-ombrale"] .charRingLeft.equipped,
[data-ring-right="anneau-ombrale"] .charRingRight.equipped,
[data-belt="ceinture-ombrale"] .charBelt.equipped,
[data-headgear="coiffe-printaniere"] .charHeadgear.equipped,
[data-cape="cape-printaniere"] .charCape.equipped,
[data-boots="bottes-printanieres"] .charBoots.equipped,
[data-ring-left="anneau-printaniere"] .charRingLeft.equipped,
[data-ring-right="anneau-printaniere"] .charRingRight.equipped,
[data-belt="ceinture-printaniere"] .charBelt.equipped,
[data-headgear="coiffe-arcanique"] .charHeadgear.equipped,
[data-cape="cape-arcanique"] .charCape.equipped,
[data-boots="bottes-arcaniques"] .charBoots.equipped,
[data-ring-left="anneau-arcanique"] .charRingLeft.equipped,
[data-ring-right="anneau-arcanique"] .charRingRight.equipped,
[data-belt="ceinture-arcanique"] .charBelt.equipped,
[data-headgear="coiffe-cybernetique"] .charHeadgear.equipped,
[data-cape="cape-cybernetique"] .charCape.equipped,
[data-boots="bottes-cybernetiques"] .charBoots.equipped,
[data-ring-left="anneau-cybernetique"] .charRingLeft.equipped,
[data-ring-right="anneau-cybernetique"] .charRingRight.equipped,
[data-belt="ceinture-cybernetique"] .charBelt.equipped,
[data-headgear="coiffe-du-faucheur"] .charHeadgear.equipped,
[data-cape="cape-du-faucheur"] .charCape.equipped,
[data-boots="bottes-du-faucheur"] .charBoots.equipped,
[data-ring-left="anneau-du-faucheur"] .charRingLeft.equipped,
[data-ring-right="anneau-du-faucheur"] .charRingRight.equipped,
[data-belt="ceinture-du-faucheur"] .charBelt.equipped,
[data-headgear="coiffe-gladiateur"] .charHeadgear.equipped,
[data-cape="cape-gladiateur"] .charCape.equipped,
[data-boots="bottes-gladiateur"] .charBoots.equipped,
[data-belt="ceinture-gladiateur"] .charBelt.equipped,
[data-headgear="coiffe-champion"] .charHeadgear.equipped,
[data-cape="cape-champion"] .charCape.equipped,
[data-boots="bottes-champion"] .charBoots.equipped,
[data-belt="ceinture-champion"] .charBelt.equipped,
[data-ring-left="anneau-champion"] .charRingLeft.equipped,
[data-ring-right="anneau-champion"] .charRingRight.equipped {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Colosseum Gladiator Set: practical iron and leather arena equipment. */
.charSprite[data-headgear="coiffe-gladiateur"] .charHeadgear {
  width: 30px !important;
  height: 17px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #c8ced0 0 38%, #6f777b 40% 65%, #323a3d 67%) !important;
  border: 2px solid #30383b !important;
  border-radius: 8px 8px 3px 3px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 2px 3px rgba(0, 0, 0, 0.45) !important;
}

.charSprite[data-cape="cape-gladiateur"] .charCape {
  width: 40px !important;
  height: 36px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, #5d1518, #9b2c2c 50%, #4a1013) !important;
  border: 1px solid #c4903c !important;
  clip-path: polygon(14% 0, 86% 0, 95% 86%, 50% 100%, 5% 86%) !important;
}

.charSprite[data-boots="bottes-gladiateur"] .charBoots,
.charSprite[data-belt="ceinture-gladiateur"] .charBelt {
  background: linear-gradient(180deg, #9d7443, #432c1f) !important;
  border: 1px solid #d2b06b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Colosseum Champion Set: royal regalia with a luminous victory mantle. */
.charSprite[data-headgear="coiffe-champion"] .charHeadgear {
  width: 34px !important;
  height: 22px !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #fff4a6 0 22%, #d9a52b 24% 50%, #9e5d0b 52% 74%, #f7dc73 76%) !important;
  border: 1.5px solid #fff2a1 !important;
  border-radius: 5px 5px 9px 9px !important;
  box-shadow: 0 0 10px rgba(255, 207, 65, 0.9), inset 0 2px 2px rgba(255, 255, 255, 0.75) !important;
}

.charSprite[data-headgear="coiffe-champion"] .charHeadgear::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: -9px !important;
  width: 17px !important;
  height: 11px !important;
  background: #e3b12c !important;
  clip-path: polygon(0 100%, 0 28%, 24% 55%, 35% 0, 50% 55%, 68% 0, 77% 55%, 100% 28%, 100% 100%) !important;
  filter: drop-shadow(0 0 3px rgba(255, 229, 123, 0.9)) !important;
}

.charSprite[data-cape="cape-champion"] .charCape {
  width: 48px !important;
  height: 43px !important;
  top: 34px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(circle at 50% 18%, #ffe99a 0 5%, transparent 7%), linear-gradient(90deg, #091d52, #184799 48%, #07183d) !important;
  border: 2px solid #e6bd42 !important;
  box-shadow: 0 0 13px rgba(251, 191, 36, 0.6), inset 0 0 14px rgba(255, 255, 255, 0.2) !important;
  clip-path: polygon(12% 0, 88% 0, 100% 83%, 74% 100%, 50% 88%, 26% 100%, 0 83%) !important;
  animation: championMantle 2.2s ease-in-out infinite !important;
}

.charSprite[data-boots="bottes-champion"] .charBoots,
.charSprite[data-belt="ceinture-champion"] .charBelt {
  background: linear-gradient(180deg, #fff0a3, #c98b16 48%, #713f0a) !important;
  border: 1.5px solid #fff1a6 !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.7) !important;
}

.charSprite[data-ring-left="anneau-champion"] .charRingLeft,
.charSprite[data-ring-right="anneau-champion"] .charRingRight {
  background: radial-gradient(circle, #fff9c4 0 20%, #eab308 42%, #854d0e 78%) !important;
  border: 1px solid #fff1a6 !important;
  box-shadow: 0 0 7px rgba(250, 204, 21, 0.9) !important;
}

@keyframes championMantle {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18);
  }
}

/* Custom Sprite Styling - Cosmic Set */
.charSprite[data-headgear="coiffe-cosmique"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #1e0b36, #00d2ff) !important;
  border: 1.5px solid #00d2ff !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.8) !important;
  border-radius: 8px 8px 4px 4px !important;
}

.charSprite[data-cape="cape-cosmique"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #120024, #8e2de2) !important;
  border: 1.5px solid #00d2ff !important;
  box-shadow: 0 0 10px rgba(142, 45, 226, 0.6) !important;
  clip-path: polygon(15% 0%, 85% 0%, 100% 90%, 50% 100%, 0% 90%) !important;
}

.charSprite[data-boots="bottes-cosmiques"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #8e2de2, #00d2ff) !important;
  border: 1.5px solid #00d2ff !important;
  box-shadow: 0 0 5px rgba(0, 210, 255, 0.5) !important;
  border-radius: 2px !important;
}

/* Custom Sprite Styling - Void Set */
.charSprite[data-headgear="coiffe-du-neant"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #090514, #4a0e4e) !important;
  border: 1.5px solid #9b59b6 !important;
  box-shadow: 0 0 8px rgba(155, 89, 182, 0.8) !important;
  border-radius: 50% 50% 0 0 !important;
}

.charSprite[data-cape="cape-du-neant"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #090514, #2c0c30) !important;
  border: 1.5px solid #9b59b6 !important;
  box-shadow: 0 0 10px rgba(74, 14, 78, 0.7) !important;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 50% 80%, 0% 100%) !important;
}

.charSprite[data-boots="bottes-du-neant"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #2c0c30, #090514) !important;
  border: 1.5px solid #9b59b6 !important;
  border-radius: 2px !important;
}

/* Custom Sprite Styling - Solar Set */
.charSprite[data-headgear="coiffe-solaire"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #d35400, #f1c40f) !important;
  border: 1.5px solid #f39c12 !important;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.8) !important;
  border-radius: 8px 8px 0 0 !important;
}

.charSprite[data-cape="cape-solaire"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #e67e22, #e74c3c) !important;
  border: 1.5px solid #f1c40f !important;
  box-shadow: 0 0 10px rgba(230, 126, 34, 0.7) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 70%, 50% 100%, 0% 70%) !important;
}

.charSprite[data-boots="bottes-solaires"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #f1c40f, #d35400) !important;
  border: 1.5px solid #f39c12 !important;
  border-radius: 2px !important;
}

/* Custom Sprite Styling - Shadow Set */
.charSprite[data-headgear="coiffe-ombrale"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #111, #333) !important;
  border: 1.5px solid #555 !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8) !important;
  border-radius: 6px 6px 0 0 !important;
}

.charSprite[data-cape="cape-ombrale"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #111, #222) !important;
  border: 1.5px solid #444 !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 90%, 80% 80%, 65% 100%, 50% 75%, 35% 100%, 20% 80%, 0% 90%) !important;
}

.charSprite[data-boots="bottes-ombrales"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #333, #111) !important;
  border: 1.5px solid #444 !important;
  border-radius: 2px !important;
}

/* Custom Sprite Styling - Spring Set */
.charSprite[data-headgear="coiffe-printaniere"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #2ecc71, #ff7675) !important;
  border: 1.5px solid #2ecc71 !important;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6) !important;
  border-radius: 12px 12px 0 0 !important;
}

.charSprite[data-cape="cape-printaniere"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #ff7675 !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.4) !important;
  clip-path: polygon(30% 0%, 70% 0%, 100% 70%, 50% 100%, 0% 70%) !important;
}

.charSprite[data-boots="bottes-printanieres"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #27ae60, #2ecc71) !important;
  border: 1.5px solid #ff7675 !important;
  border-radius: 4px !important;
}

/* Custom Sprite Styling - Arcane Set */
.charSprite[data-headgear="coiffe-arcanique"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
  border: 1.5px solid #fd79a8 !important;
  box-shadow: 0 0 8px rgba(253, 121, 168, 0.8) !important;
  border-radius: 10px 10px 2px 2px !important;
}

.charSprite[data-cape="cape-arcanique"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #6c5ce7, #e84393) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 10px rgba(108, 92, 231, 0.6) !important;
  clip-path: polygon(15% 0%, 85% 0%, 100% 80%, 75% 100%, 50% 80%, 25% 100%, 0% 80%) !important;
}

.charSprite[data-boots="bottes-arcaniques"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #e84393, #6c5ce7) !important;
  border: 1.5px solid #fd79a8 !important;
  border-radius: 2px !important;
}

/* Custom Sprite Styling - Cyber Set */
.charSprite[data-headgear="coiffe-cybernetique"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #00f2fe, #4facfe) !important;
  border: 1.5px solid #00f2fe !important;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.9) !important;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%) !important;
}

.charSprite[data-cape="cape-cybernetique"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #00f2fe, #000000) !important;
  border: 1.5px solid #4facfe !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.7) !important;
  clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 70% 60%, 50% 100%, 30% 60%, 0% 50%) !important;
}

.charSprite[data-boots="bottes-cybernetiques"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #000, #4facfe) !important;
  border: 1.5px solid #00f2fe !important;
  border-radius: 0px !important;
}

/* Custom Sprite Styling - Reaper Set */
.charSprite[data-headgear="coiffe-du-faucheur"] .charHeadgear {
  width: 32px !important;
  height: 18px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #1e272e, #dcdde1) !important;
  border: 1.5px solid #2ecc71 !important;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.7) !important;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%) !important;
}

.charSprite[data-cape="cape-du-faucheur"] .charCape {
  width: 44px !important;
  height: 40px !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #1e272e, #0f1418) !important;
  border: 1.5px solid #27ae60 !important;
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.5) !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 85%, 85% 75%, 70% 90%, 50% 70%, 30% 95%, 15% 75%, 0% 85%) !important;
}

.charSprite[data-boots="bottes-du-faucheur"] .charBoots {
  width: 32px !important;
  height: 8px !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #1e272e, #2ecc71) !important;
  border: 1.5px solid #27ae60 !important;
  border-radius: 1px !important;
}

/* --- COSMETIC SET BELTS & RINGS STYLING --- */
/* Cosmic Set */
.charSprite[data-belt="ceinture-cosmique"] .charBelt {
  background: linear-gradient(180deg, #120024, #8e2de2) !important;
  border: 1.5px solid #00d2ff !important;
  box-shadow: 0 0 6px rgba(0, 210, 255, 0.7) !important;
}

.charSprite[data-ring-left="anneau-cosmique"] .charRingLeft {
  background: radial-gradient(circle, #00d2ff 0%, #8e2de2 70%) !important;
  border: 1px solid #00d2ff !important;
  box-shadow: 0 0 5px rgba(0, 210, 255, 0.8) !important;
}

.charSprite[data-ring-right="anneau-cosmique"] .charRingRight {
  background: radial-gradient(circle, #00d2ff 0%, #8e2de2 70%) !important;
  border: 1px solid #00d2ff !important;
  box-shadow: 0 0 5px rgba(0, 210, 255, 0.8) !important;
}

/* Void Set */
.charSprite[data-belt="ceinture-du-neant"] .charBelt {
  background: linear-gradient(180deg, #090514, #4a0e4e) !important;
  border: 1.5px solid #9b59b6 !important;
  box-shadow: 0 0 6px rgba(155, 89, 182, 0.7) !important;
}

.charSprite[data-ring-left="anneau-du-neant"] .charRingLeft {
  background: radial-gradient(circle, #e0a3ff 0%, #4a0e4e 70%) !important;
  border: 1px solid #9b59b6 !important;
  box-shadow: 0 0 5px rgba(155, 89, 182, 0.8) !important;
}

.charSprite[data-ring-right="anneau-du-neant"] .charRingRight {
  background: radial-gradient(circle, #e0a3ff 0%, #4a0e4e 70%) !important;
  border: 1px solid #9b59b6 !important;
  box-shadow: 0 0 5px rgba(155, 89, 182, 0.8) !important;
}

/* Solar Set */
.charSprite[data-belt="ceinture-solaire"] .charBelt {
  background: linear-gradient(180deg, #d35400, #f1c40f) !important;
  border: 1.5px solid #f39c12 !important;
  box-shadow: 0 0 6px rgba(241, 196, 15, 0.7) !important;
}

.charSprite[data-ring-left="anneau-solaire"] .charRingLeft {
  background: radial-gradient(circle, #ffd700 0%, #d35400 70%) !important;
  border: 1px solid #f39c12 !important;
  box-shadow: 0 0 5px rgba(241, 196, 15, 0.8) !important;
}

.charSprite[data-ring-right="anneau-solaire"] .charRingRight {
  background: radial-gradient(circle, #ffd700 0%, #d35400 70%) !important;
  border: 1px solid #f39c12 !important;
  box-shadow: 0 0 5px rgba(241, 196, 15, 0.8) !important;
}

/* Shadow Set */
.charSprite[data-belt="ceinture-ombrale"] .charBelt {
  background: linear-gradient(180deg, #111, #333) !important;
  border: 1.5px solid #555 !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8) !important;
}

.charSprite[data-ring-left="anneau-ombrale"] .charRingLeft {
  background: radial-gradient(circle, #666 0%, #111 70%) !important;
  border: 1px solid #555 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

.charSprite[data-ring-right="anneau-ombrale"] .charRingRight {
  background: radial-gradient(circle, #666 0%, #111 70%) !important;
  border: 1px solid #555 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

/* Spring Set */
.charSprite[data-belt="ceinture-printaniere"] .charBelt {
  background: linear-gradient(180deg, #2ecc71, #27ae60) !important;
  border: 1.5px solid #ff7675 !important;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.5) !important;
}

.charSprite[data-ring-left="anneau-printaniere"] .charRingLeft {
  background: radial-gradient(circle, #ff7675 0%, #27ae60 70%) !important;
  border: 1px solid #2ecc71 !important;
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.7) !important;
}

.charSprite[data-ring-right="anneau-printaniere"] .charRingRight {
  background: radial-gradient(circle, #ff7675 0%, #27ae60 70%) !important;
  border: 1px solid #2ecc71 !important;
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.7) !important;
}

/* Arcane Set */
.charSprite[data-belt="ceinture-arcanique"] .charBelt {
  background: linear-gradient(180deg, #6c5ce7, #e84393) !important;
  border: 1.5px solid #a29bfe !important;
  box-shadow: 0 0 6px rgba(108, 92, 231, 0.6) !important;
}

.charSprite[data-ring-left="anneau-arcanique"] .charRingLeft {
  background: radial-gradient(circle, #fd79a8 0%, #6c5ce7 70%) !important;
  border: 1px solid #a29bfe !important;
  box-shadow: 0 0 5px rgba(108, 92, 231, 0.7) !important;
}

.charSprite[data-ring-right="anneau-arcanique"] .charRingRight {
  background: radial-gradient(circle, #fd79a8 0%, #6c5ce7 70%) !important;
  border: 1px solid #a29bfe !important;
  box-shadow: 0 0 5px rgba(108, 92, 231, 0.7) !important;
}

/* Cyber Set */
.charSprite[data-belt="ceinture-cybernetique"] .charBelt {
  background: linear-gradient(180deg, #00f2fe, #000000) !important;
  border: 1.5px solid #4facfe !important;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.8) !important;
}

.charSprite[data-ring-left="anneau-cybernetique"] .charRingLeft {
  background: radial-gradient(circle, #4facfe 0%, #00f2fe 70%) !important;
  border: 1px solid #00f2fe !important;
  box-shadow: 0 0 6px rgba(0, 242, 254, 0.9) !important;
}

.charSprite[data-ring-right="anneau-cybernetique"] .charRingRight {
  background: radial-gradient(circle, #4facfe 0%, #00f2fe 70%) !important;
  border: 1px solid #00f2fe !important;
  box-shadow: 0 0 6px rgba(0, 242, 254, 0.9) !important;
}

/* Reaper Set */
.charSprite[data-belt="ceinture-du-faucheur"] .charBelt {
  background: linear-gradient(180deg, #1e272e, #0f1418) !important;
  border: 1.5px solid #27ae60 !important;
  box-shadow: 0 0 6px rgba(39, 174, 96, 0.6) !important;
}

.charSprite[data-ring-left="anneau-du-faucheur"] .charRingLeft {
  background: radial-gradient(circle, #dcdde1 0%, #1e272e 70%) !important;
  border: 1px solid #2ecc71 !important;
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.7) !important;
}

.charSprite[data-ring-right="anneau-du-faucheur"] .charRingRight {
  background: radial-gradient(circle, #dcdde1 0%, #1e272e 70%) !important;
  border: 1px solid #2ecc71 !important;
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.7) !important;
}

/* Particle Effects Activation on Sprite elements */
.charSprite[data-headgear="coiffe-cosmique"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: cosmicStars 2s linear infinite !important;
}

.charSprite[data-cape="cape-cosmique"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: cosmicStars 2.5s linear infinite !important;
}

.charSprite[data-headgear="coiffe-du-neant"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: voidSwirls 2s ease-in-out infinite !important;
}

.charSprite[data-cape="cape-du-neant"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: voidSwirls 2.4s ease-in-out infinite !important;
}

.charSprite[data-headgear="coiffe-solaire"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: solarEmbers 1.8s linear infinite !important;
}

.charSprite[data-cape="cape-solaire"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: solarEmbers 2.2s linear infinite !important;
}

.charSprite[data-headgear="coiffe-ombrale"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: blur(1px) !important;
  animation: shadowSmoke 2.2s ease-in-out infinite !important;
}

.charSprite[data-cape="cape-ombrale"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: blur(1px) !important;
  animation: shadowSmoke 2.6s ease-in-out infinite !important;
}

.charSprite[data-headgear="coiffe-printaniere"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: springLeaves 2.5s linear infinite !important;
}

.charSprite[data-cape="cape-printaniere"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: springLeaves 3s linear infinite !important;
}

.charSprite[data-headgear="coiffe-arcanique"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: arcaneRunes 2s linear infinite !important;
}

.charSprite[data-cape="cape-arcanique"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: arcaneRunes 2.4s linear infinite !important;
}

.charSprite[data-headgear="coiffe-cybernetique"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  width: 3px !important;
  height: 3px !important;
  pointer-events: none !important;
  animation: cyberGlitch 1.5s step-end infinite !important;
}

.charSprite[data-cape="cape-cybernetique"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 3px !important;
  height: 3px !important;
  pointer-events: none !important;
  animation: cyberGlitch 1.8s step-end infinite !important;
}

.charSprite[data-headgear="coiffe-du-faucheur"] .charHeadgear::after {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  width: 2px !important;
  height: 3px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: reaperSouls 2.2s linear infinite !important;
}

.charSprite[data-cape="cape-du-faucheur"] .charCape::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 2px !important;
  height: 3px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: reaperSouls 2.6s linear infinite !important;
}

/* Keyframes animations for Particle Effects */
@keyframes cosmicStars {
  0% {
    box-shadow:
      -12px 10px rgba(0, 242, 254, 0),
      8px 25px rgba(255, 255, 255, 0),
      -5px 30px rgba(0, 242, 254, 0),
      14px 5px rgba(255, 255, 255, 0);
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    box-shadow:
      -16px -25px rgba(0, 242, 254, 0.85),
      12px -10px rgba(255, 255, 255, 0.85),
      -2px -5px rgba(0, 242, 254, 0.85),
      18px -30px rgba(255, 255, 255, 0.85);
    transform: translateY(-25px) scale(1.2);
    opacity: 0;
  }
}

@keyframes voidSwirls {
  0% {
    box-shadow:
      -6px 15px rgba(155, 89, 182, 0),
      6px 20px rgba(74, 14, 78, 0),
      0px 30px rgba(155, 89, 182, 0);
    transform: translateY(0) scale(0.7) rotate(0deg);
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }

  80% {
    opacity: 0.9;
  }

  100% {
    box-shadow:
      -10px -20px rgba(155, 89, 182, 0.8),
      10px -15px rgba(74, 14, 78, 0.8),
      -2px -35px rgba(155, 89, 182, 0.8);
    transform: translateY(-20px) scale(1.3) rotate(360deg);
    opacity: 0;
  }
}

@keyframes solarEmbers {
  0% {
    box-shadow:
      -8px 8px #f1c40f,
      8px 18px #e67e22,
      -3px 25px #e74c3c,
      10px 4px #f39c12;
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    box-shadow:
      -12px -5px #f39c12,
      12px 2px #f1c40f,
      -1px 8px #e67e22,
      6px -8px #e74c3c;
  }

  90% {
    opacity: 1;
  }

  100% {
    box-shadow:
      -15px -20px rgba(241, 196, 15, 0),
      15px -12px rgba(230, 126, 34, 0),
      2px -30px rgba(231, 76, 60, 0),
      8px -25px rgba(243, 156, 18, 0);
    transform: translateY(-25px) scale(1.1);
    opacity: 0;
  }
}

@keyframes shadowSmoke {
  0% {
    box-shadow:
      -5px 12px rgba(50, 50, 50, 0.6),
      5px 18px rgba(20, 20, 20, 0.6),
      -1px 28px rgba(80, 80, 80, 0.6);
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }

  15% {
    opacity: 0.8;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    box-shadow:
      -12px -18px rgba(50, 50, 50, 0),
      12px -12px rgba(20, 20, 20, 0),
      4px -28px rgba(80, 80, 80, 0);
    transform: translateY(-22px) scale(2.2);
    opacity: 0;
  }
}

@keyframes springLeaves {
  0% {
    box-shadow:
      -10px 15px #2ecc71,
      8px 22px #ff7675,
      -3px 32px #27ae60;
    transform: translateY(0) rotate(0deg) scale(0.6);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  50% {
    transform: translateY(-12px) rotate(90deg) scale(1);
    box-shadow:
      -14px 2px #2ecc71,
      4px 8px #ff7675,
      -7px 18px #27ae60;
  }

  85% {
    opacity: 1;
  }

  100% {
    box-shadow:
      -18px -25px rgba(46, 204, 113, 0),
      12px -15px rgba(255, 118, 117, 0),
      -10px -35px rgba(39, 174, 96, 0);
    transform: translateY(-28px) rotate(180deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes arcaneRunes {
  0% {
    box-shadow:
      -8px 12px #fd79a8,
      8px 24px #6c5ce7,
      -1px 30px #a29bfe,
      12px 10px #e84393;
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.95;
  }

  50% {
    box-shadow:
      -10px -2px #fd79a8,
      10px 10px #6c5ce7,
      3px 15px #a29bfe,
      10px -4px #e84393;
  }

  80% {
    opacity: 0.95;
  }

  100% {
    box-shadow:
      -12px -20px rgba(253, 121, 168, 0),
      12px -16px rgba(108, 92, 231, 0),
      5px -32px rgba(162, 155, 254, 0),
      8px -22px rgba(232, 67, 147, 0);
    transform: translateY(-26px) scale(1.1);
    opacity: 0;
  }
}

@keyframes cyberGlitch {
  0% {
    box-shadow:
      -12px 8px #00f2fe,
      8px 20px #00e676,
      -4px 28px #00f2fe;
    transform: translate(0, 0);
    opacity: 0;
  }

  20% {
    opacity: 1;
    transform: translate(-2px, -5px);
    box-shadow:
      -10px 2px #00e676,
      10px 12px #00f2fe,
      -2px 18px #00e676;
  }

  40% {
    transform: translate(3px, -10px);
    box-shadow:
      -14px -4px #00f2fe,
      6px 4px #00f2fe,
      -6px 8px #00e676;
  }

  60% {
    transform: translate(-3px, -15px);
    box-shadow:
      -8px -10px #00e676,
      12px -4px #00e676,
      -1px -2px #00f2fe;
  }

  80% {
    opacity: 1;
    transform: translate(2px, -20px);
    box-shadow:
      -15px -16px #00f2fe,
      8px -12px #00f2fe,
      -5px -12px #00e676;
  }

  100% {
    box-shadow:
      -18px -26px rgba(0, 242, 254, 0),
      10px -22px rgba(0, 230, 118, 0),
      -8px -24px rgba(0, 242, 254, 0);
    transform: translate(0, -25px);
    opacity: 0;
  }
}

@keyframes reaperSouls {
  0% {
    box-shadow:
      -7px 14px rgba(46, 204, 113, 0.7),
      7px 22px rgba(46, 204, 113, 0.4),
      -2px 30px rgba(39, 174, 96, 0.7);
    transform: translateY(0) scale(0.6) skewX(5deg);
    opacity: 0;
  }

  15% {
    opacity: 0.95;
  }

  50% {
    transform: translateY(-12px) scale(1) skewX(-5deg);
  }

  85% {
    opacity: 0.95;
  }

  100% {
    box-shadow:
      -12px -20px rgba(46, 204, 113, 0),
      12px -16px rgba(46, 204, 113, 0),
      4px -32px rgba(39, 174, 96, 0);
    transform: translateY(-26px) scale(1.4) skewX(5deg);
    opacity: 0;
  }
}

/* ==========================================================================
   THEMED SHOP COSMETIC CARDS
   ========================================================================== */
.shopCosmeticCard {
  position: relative !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  background: rgba(30, 30, 40, 0.6) !important;
  backdrop-filter: blur(10px) !important;
}

.shopCosmeticCard:hover {
  transform: translateY(-4px) !important;
}

.shopCosmeticCard-cosmic {
  background: radial-gradient(circle at top right, rgba(162, 0, 255, 0.2), rgba(0, 255, 255, 0.05)), rgba(20, 20, 35, 0.95) !important;
  border: 1.5px solid rgba(0, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.15) !important;
}

.shopCosmeticCard-cosmic:hover {
  box-shadow: 0 8px 25px rgba(0, 255, 255, 0.35) !important;
  border-color: rgba(0, 255, 255, 0.6) !important;
}

.shopCosmeticCard-void {
  background: radial-gradient(circle at top right, rgba(76, 0, 112, 0.4), rgba(15, 10, 25, 0.95)) !important;
  border: 1.5px solid rgba(162, 0, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(162, 0, 255, 0.15) !important;
}

.shopCosmeticCard-void:hover {
  box-shadow: 0 8px 25px rgba(162, 0, 255, 0.35) !important;
  border-color: rgba(162, 0, 255, 0.6) !important;
}

.shopCosmeticCard-solar {
  background: radial-gradient(circle at top right, rgba(230, 126, 34, 0.3), rgba(30, 15, 10, 0.95)) !important;
  border: 1.5px solid rgba(230, 126, 34, 0.4) !important;
  box-shadow: 0 4px 15px rgba(230, 126, 34, 0.2) !important;
}

.shopCosmeticCard-solar:hover {
  box-shadow: 0 8px 25px rgba(230, 126, 34, 0.4) !important;
  border-color: rgba(230, 126, 34, 0.7) !important;
}

.shopCosmeticCard-shadow {
  background: radial-gradient(circle at top right, rgba(40, 40, 40, 0.5), rgba(15, 15, 15, 0.95)) !important;
  border: 1.5px solid rgba(100, 100, 100, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.shopCosmeticCard-shadow:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8) !important;
  border-color: rgba(150, 150, 150, 0.5) !important;
}

.shopCosmeticCard-spring {
  background: radial-gradient(circle at top right, rgba(46, 204, 113, 0.2), rgba(15, 30, 20, 0.95)) !important;
  border: 1.5px solid rgba(46, 204, 113, 0.3) !important;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.15) !important;
}

.shopCosmeticCard-spring:hover {
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.35) !important;
  border-color: rgba(46, 204, 113, 0.6) !important;
}

.shopCosmeticCard-arcane {
  background: radial-gradient(circle at top right, rgba(155, 89, 182, 0.25), rgba(20, 15, 30, 0.95)) !important;
  border: 1.5px solid rgba(155, 89, 182, 0.4) !important;
  box-shadow: 0 4px 15px rgba(155, 89, 182, 0.2) !important;
}

.shopCosmeticCard-arcane:hover {
  box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4) !important;
  border-color: rgba(155, 89, 182, 0.7) !important;
}

.shopCosmeticCard-cyber {
  background: radial-gradient(circle at top right, rgba(26, 188, 156, 0.2), rgba(10, 20, 25, 0.95)) !important;
  border: 1.5px solid rgba(26, 188, 156, 0.4) !important;
  box-shadow: 0 4px 15px rgba(26, 188, 156, 0.2) !important;
}

.shopCosmeticCard-cyber:hover {
  box-shadow: 0 8px 25px rgba(26, 188, 156, 0.4) !important;
  border-color: rgba(26, 188, 156, 0.7) !important;
}

.shopCosmeticCard-reaper {
  background: radial-gradient(circle at top right, rgba(39, 174, 96, 0.15), rgba(15, 20, 15, 0.95)) !important;
  border: 1.5px solid rgba(39, 174, 96, 0.3) !important;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.15) !important;
}

.shopCosmeticCard-reaper:hover {
  box-shadow: 0 8px 25px rgba(39, 174, 96, 0.35) !important;
  border-color: rgba(39, 174, 96, 0.6) !important;
}

/* Custom Overrides for Boots to Align and Fit on Feet Layer */
.charSprite[data-boots] .charBoots {
  z-index: 4 !important;
  top: 64px !important;
  height: 16px !important;
  width: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: none !important;
  background-clip: padding-box !important;
  clip-path: path('M 5 0 H 11 V 8 H 13 V 16 H 2 V 8 H 5 Z M 19 0 H 25 V 8 H 28 V 16 H 17 V 8 H 19 Z') !important;
  filter: drop-shadow(1px 0 0 #1c1511) drop-shadow(-1px 0 0 #1c1511) drop-shadow(0 1px 0 #1c1511) drop-shadow(0 -1px 0 #1c1511) !important;
}

/* Hide bare feet skin and ankles when boots are equipped */
.charSprite[data-boots] .charFeet {
  background: none !important;
}

.charSprite[data-boots] .charFeet::before,
.charSprite[data-boots] .charFeet::after {
  opacity: 0 !important;
}

/* ==========================================
   SYSTEME DE MONTURES (DRAGOINDES RENDERING)
   ========================================== */

/* Base container for Mount overlay */
.charPet {
  display: none;
}

.charPet.equipped {
  display: none;
}

/* When non-mount pet (familier) is equipped */
.charSprite[data-pet-type="pet"] .charPet.equipped,
.charSprite[data-pet]:not([data-pet-type="mount"]) .charPet.equipped {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 56px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  z-index: 6;
  border-radius: 50%;
  border: 1.5px solid #1c1511;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25);
  background: var(--pet-color, linear-gradient(180deg, #3b82f6, #1d4ed8));
}

/* When mount is equipped (Front view by default) */
.charSprite[data-pet-type="mount"] .charPet.equipped {
  display: block !important;
  left: 50%;
  top: 50px;
  width: 32px;
  /* narrow for front view */
  height: 28px;
  transform: translateX(-50%);
  z-index: 3;
  /* In front of cloak/shadow and body to show neck/head and saddle */
  position: absolute;
  background: var(--mount-color, #e05c34);
  border-radius: 12px 12px 8px 8px;
  border: 2px solid #2c1609;
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Legs of the mount (Symmetric front view) */
.charSprite[data-pet-type="mount"] .charPet.equipped::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 3px;
  width: 6px;
  height: 10px;
  background: var(--mount-color, #e05c34);
  border: 2px solid #2c1609;
  border-top: none;
  box-shadow: 16px 0 0 var(--mount-color, #e05c34), 16px 0 0 #2c1609;
  z-index: 1;
}

/* Neck & Head of the mount (Centered in front of character) */
.charSprite[data-pet-type="mount"] .charPet.equipped::after {
  content: "";
  position: absolute;
  top: -18px;
  /* extends up in front of character's torso */
  left: 50%;
  width: 16px;
  height: 24px;
  transform: translateX(-50%);
  background:
    /* left eye */
    radial-gradient(circle at 3px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    /* right eye */
    radial-gradient(circle at 13px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    /* nostrils */
    radial-gradient(circle at 5px 19px, #2c1609 1px, transparent 1.5px),
    radial-gradient(circle at 11px 19px, #2c1609 1px, transparent 1.5px),
    /* snout outline */
    linear-gradient(180deg, transparent 60%, #2c1609 61%, #2c1609 85%, transparent 86%),
    /* ear cutout border */
    radial-gradient(circle at 8px -2px, transparent 3px, #2c1609 3.5px, #2c1609 5.5px, transparent 6px),
    /* ear cutout base shape */
    radial-gradient(circle at 8px -2px, transparent 5px, var(--mount-color, #e05c34) 5.5px) !important;
  border: 2px solid #2c1609;
  border-top: none;
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25);
  z-index: 10;
  /* in front of character's chest */
}

/* Specific Mount Colors */
.charSprite[data-pet="monture-rousse"] {
  --mount-color: #e05c34;
}

.charSprite[data-pet="monture-amande"] {
  --mount-color: #8ac082;
}

.charSprite[data-pet="monture-doree"] {
  --mount-color: #e5b33a;
}

.charSprite[data-pet="monture-cameleon"] {
  --mount-color: var(--char-color, #06b6d4);
}

.charSprite[data-pet="belier-de-selle"] {
  --mount-color: #f1f5f9;
}

.charSprite[data-pet="licorne-sauvage"] {
  --mount-color: #c084fc;
}

.charSprite[data-pet="hippocampe-d-ebene"] {
  --mount-color: #1e293b;
}

.charSprite[data-pet="escargot-de-monte"] {
  --mount-color: #a3e635;
}

.charSprite[data-pet="monture-en-armure"] {
  --mount-color: #94a3b8;
}

.charSprite[data-pet="monture-squelette"] {
  --mount-color: #022c22;
}

/* Custom details for mounts (making them look spectacular) */

/* Saddle and Harness straps for Montures (Centered front view) */
.charSprite[data-pet^="monture-"] .charPet.equipped {
  background:
    linear-gradient(90deg, transparent 0%, transparent 20%, #78350f 21%, #78350f 79%, transparent 80%),
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 4px,
      transparent 4px,
      transparent 10px),
    linear-gradient(180deg, var(--mount-color) 0%, var(--mount-color) 100%) !important;
}

/* Front View Neck & Head (Bulging eyes + zebra stripes) */
.charSprite[data-pet^="monture-"] .charPet.equipped::after {
  content: "" !important;
  position: absolute !important;
  top: -24px !important;
  /* longer neck */
  left: 50% !important;
  width: 24px !important;
  /* wider for bulging eyes */
  height: 28px !important;
  transform: translateX(-50%) !important;
  background:
    /* Pupil Left */
    radial-gradient(circle at 4px 7px, #000 1.2px, transparent 1.8px),
    /* Eyeball Left (white bulging circle with black outline) */
    radial-gradient(circle at 4px 7px, #fff 3.5px, #2c1609 4.5px, transparent 5px),
    /* Pupil Right */
    radial-gradient(circle at 20px 7px, #000 1.2px, transparent 1.8px),
    /* Eyeball Right (white bulging circle with black outline) */
    radial-gradient(circle at 20px 7px, #fff 3.5px, #2c1609 4.5px, transparent 5px),
    /* Rounded top of the head */
    radial-gradient(circle at 12px 10px, var(--mount-color) 6px, #2c1609 7.5px, transparent 8px),
    /* Nostril Left */
    radial-gradient(circle at 9px 23px, #2c1609 1px, transparent 1.5px),
    /* Nostril Right */
    radial-gradient(circle at 15px 23px, #2c1609 1px, transparent 1.5px),
    /* Mouth line */
    linear-gradient(180deg, transparent 24px, #2c1609 24px, #2c1609 26px, transparent 26px),
    /* Zebra stripes on neck */
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 3px,
      transparent 3px,
      transparent 8px),
    /* Neck / Face Body background */
    linear-gradient(90deg, transparent 5px, #2c1609 5px, var(--mount-color) 7px, var(--mount-color) 17px, #2c1609 17px, transparent 19px) !important;
  background-position:
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    5px 0,
    /* position for neck stripes */
    0 0 !important;
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    14px 100%,
    /* size for neck stripes */
    100% 100% !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

/* Monture Caméléon (takes character color + diagonal shadow stripes) */
.charSprite[data-pet="monture-cameleon"] .charPet.equipped {
  background:
    linear-gradient(90deg, transparent 0%, transparent 20%, #78350f 21%, #78350f 79%, transparent 80%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 4px,
      transparent 4px,
      transparent 10px),
    linear-gradient(180deg, var(--mount-color) 0%, var(--mount-color) 100%) !important;
}

/* Bélier de selle (fluffy wool texture and curly horns) */
.charSprite[data-pet="belier-de-selle"] .charPet.equipped {
  border-radius: 14px 14px 8px 8px !important;
  background: radial-gradient(circle, #f8fafc 40%, #e2e8f0 100%) !important;
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.05),
    0 3px 6px rgba(0, 0, 0, 0.2),
    -4px -2px 0 #f8fafc, 4px -2px 0 #f8fafc;
  /* puffiness! */
}

/* Bélier curly horns on sides of the head */
.charSprite[data-pet="belier-de-selle"] .charPet.equipped::after {
  background:
    radial-gradient(circle at 1px 4px, #451a03 2.5px, transparent 3.5px),
    radial-gradient(circle at 15px 4px, #451a03 2.5px, transparent 3.5px),
    /* left eye */
    radial-gradient(circle at 4px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    /* right eye */
    radial-gradient(circle at 12px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    /* nostrils */
    radial-gradient(circle at 5px 19px, #2c1609 0.8px, transparent 1.2px),
    radial-gradient(circle at 11px 19px, #2c1609 0.8px, transparent 1.2px),
    #f1f5f9 !important;
}

/* Licorne sauvage (licorne violette avec corne dorée lumineuse et crinière rose) */
.charSprite[data-pet="licorne-sauvage"] .charPet.equipped::after {
  background:
    /* gold horn */
    linear-gradient(0deg, #eab308 0%, #eab308 30%, transparent 31%),
    /* pink mane on side */
    linear-gradient(90deg, #f472b6 25%, transparent 26%),
    /* left eye */
    radial-gradient(circle at 4px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    /* right eye */
    radial-gradient(circle at 12px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    /* nostrils */
    radial-gradient(circle at 5px 19px, #2c1609 0.8px, transparent 1.2px),
    radial-gradient(circle at 11px 19px, #2c1609 0.8px, transparent 1.2px),
    #c084fc !important;
  box-shadow: 0 -4px 10px #facc15, inset 0 2px 4px rgba(255, 255, 255, 0.25);
}

/* Hippocampe d'ébène (Obsidian seahorse with glowing cyan fins) */
.charSprite[data-pet="hippocampe-d-ebene"] .charPet.equipped,
.charSprite[data-pet="hippocampe-debene"] .charPet.equipped {
  background: #1e293b !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5), inset 0 -4px 6px rgba(0, 0, 0, 0.4);
}

.charSprite[data-pet="hippocampe-d-ebene"] .charPet.equipped::after,
.charSprite[data-pet="hippocampe-debene"] .charPet.equipped::after {
  background:
    /* cyan glowing eyes */
    radial-gradient(circle at 4px 8px, #22d3ee 1.5px, transparent 2.5px),
    /* right eye */
    radial-gradient(circle at 12px 8px, #22d3ee 1.5px, transparent 2.5px),
    /* nostrils */
    radial-gradient(circle at 5px 19px, #22d3ee 0.8px, transparent 1.2px),
    radial-gradient(circle at 11px 19px, #22d3ee 0.8px, transparent 1.2px),
    #1e293b !important;
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.7);
}

/* Escargot de monte (Riding snail with slime trail) */
.charSprite[data-pet="escargot-de-monte"] .charPet.equipped {
  border-radius: 50% !important;
  /* spiral shell */
  background: radial-gradient(circle, #78350f 45%, #451a03 100%) !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 0 3px 6px rgba(0, 0, 0, 0.2);
}

.charSprite[data-pet="escargot-de-monte"] .charPet.equipped::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 40px;
  height: 6px;
  transform: translateX(-50%);
  background: rgba(217, 249, 157, 0.95);
  border-radius: 4px;
  border: 1.5px solid #2c1609;
  box-shadow: 0 0 6px #d9f99d;
}

.charSprite[data-pet="escargot-de-monte"] .charPet.equipped::after {
  background:
    /* feelers/eyes */
    radial-gradient(circle at 4px 6px, #000 1px, #a3e635 2px, transparent 3px),
    radial-gradient(circle at 12px 6px, #000 1px, #a3e635 2px, transparent 3px),
    #a3e635 !important;
}

/* Monture en armure (Silver armored plate mount with steel helmet and gold crest) */
.charSprite[data-pet="monture-en-armure"] .charPet.equipped {
  background:
    /* metallic armor reflection */
    linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 45%, transparent 50%),
    /* gold straps */
    linear-gradient(90deg, #94a3b8 0%, #94a3b8 20%, #eab308 21%, #eab308 79%, #94a3b8 80%) !important;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

.charSprite[data-pet="monture-en-armure"] .charPet.equipped::after {
  background:
    /* gold crest helmet line */
    linear-gradient(90deg, transparent 45%, #eab308 45%, #eab308 55%, transparent 55%),
    /* left glowing blue eye slot */
    radial-gradient(circle at 4px 8px, #38bdf8 1.5px, transparent 2px),
    /* right glowing blue eye slot */
    radial-gradient(circle at 12px 8px, #38bdf8 1.5px, transparent 2px),
    #64748b !important;
  /* dark iron helmet */
  border: 2px solid #334155;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* Monture squelette (Spooky skeletal mount with glowing green rib cage and red eyes) */
.charSprite[data-pet="monture-squelette"] .charPet.equipped {
  background:
    /* glowing green ribs */
    repeating-linear-gradient(90deg, #10b981, #10b981 3px, transparent 3px, transparent 8px),
    /* saddle strap */
    linear-gradient(90deg, #022c22 0%, #022c22 20%, #78350f 21%, #78350f 79%, #022c22 80%) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), inset 0 -4px 6px rgba(0, 0, 0, 0.6);
}

.charSprite[data-pet="monture-squelette"] .charPet.equipped::after {
  background:
    /* red glowing skeleton eyes */
    radial-gradient(circle at 4px 8px, #ef4444 1.5px, transparent 2.5px),
    radial-gradient(circle at 12px 8px, #ef4444 1.5px, transparent 2.5px),
    /* nasal bone cavity */
    radial-gradient(circle at 8px 14px, #000 1.5px, transparent 2px),
    /* green bone shading */
    radial-gradient(circle, #022c22 20%, #115e59 100%) !important;
  border: 2.5px solid #0f172a;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

/* Dragodinde caméléon */
.charSprite[data-pet="dragodinde-cameleon"] {
  --mount-color: var(--char-color, #06b6d4);
}

.charSprite[data-pet="dragodinde-cameleon"] .charPet.equipped {
  background:
    linear-gradient(90deg, transparent 0%, transparent 20%, #eab308 21%, #eab308 79%, transparent 80%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.3) 0,
      rgba(255, 255, 255, 0.3) 4px,
      transparent 4px,
      transparent 10px),
    linear-gradient(180deg, var(--mount-color, #06b6d4) 0%, var(--mount-color, #06b6d4) 100%) !important;
  box-shadow: 0 0 8px var(--mount-color, #06b6d4), inset 0 -4px 6px rgba(0, 0, 0, 0.2);
}

.charSprite[data-pet="dragodinde-cameleon"] .charPet.equipped::after {
  background:
    radial-gradient(circle at 4px 7px, #000 1.2px, transparent 1.8px),
    radial-gradient(circle at 4px 7px, #fff 3.5px, #2c1609 4.5px, transparent 5px),
    radial-gradient(circle at 20px 7px, #000 1.2px, transparent 1.8px),
    radial-gradient(circle at 20px 7px, #fff 3.5px, #2c1609 4.5px, transparent 5px),
    radial-gradient(circle at 12px 10px, var(--mount-color, #06b6d4) 6px, #2c1609 7.5px, transparent 8px),
    radial-gradient(circle at 9px 23px, #2c1609 1px, transparent 1.5px),
    radial-gradient(circle at 15px 23px, #2c1609 1px, transparent 1.5px),
    linear-gradient(180deg, transparent 24px, #eab308 24px, #eab308 26px, transparent 26px),
    linear-gradient(90deg, transparent 5px, #2c1609 5px, var(--mount-color, #06b6d4) 7px, var(--mount-color, #06b6d4) 17px, #2c1609 17px, transparent 19px) !important;
}

/* Kramkram de lave */
.charSprite[data-pet="kramkram-de-lave"] {
  --mount-color: #1c1917;
}

.charSprite[data-pet="kramkram-de-lave"] .charPet.equipped {
  background:
    repeating-linear-gradient(135deg, #ef4444, #f97316 3px, transparent 3px, transparent 8px),
    linear-gradient(180deg, #1c1917 0%, #292524 100%) !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.7), inset 0 -4px 6px rgba(0, 0, 0, 0.8);
  border-color: #78350f !important;
}

.charSprite[data-pet="kramkram-de-lave"] .charPet.equipped::after {
  background:
    radial-gradient(circle at 4px 8px, #facc15 1.5px, transparent 2.5px),
    radial-gradient(circle at 12px 8px, #facc15 1.5px, transparent 2.5px),
    linear-gradient(0deg, #ea580c 0%, #ef4444 40%, transparent 41%),
    #1c1917 !important;
  border-color: #78350f !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

/* Rhinocéros de combat (Massive battle rhino mount with dual horns & steel plate armor) */
.charSprite[data-pet="rhinoceros-de-combat"],
.charSprite[data-pet="rhinoceras-de-combat"] {
  --mount-color: #334155;
}

.charSprite[data-pet="rhinoceros-de-combat"] .charPet.equipped,
.charSprite[data-pet="rhinoceras-de-combat"] .charPet.equipped {
  width: 36px !important;
  height: 30px !important;
  background:
    /* Red battle saddle blanket */
    linear-gradient(90deg, transparent 20%, #991b1b 21%, #dc2626 30%, #eab308 31%, #eab308 69%, #dc2626 70%, #991b1b 79%, transparent 80%),
    /* Steel armor plates with rivets */
    linear-gradient(180deg, #475569 0%, #334155 60%, #1e293b 100%) !important;
  border: 2.5px solid #0f172a !important;
  border-radius: 14px 14px 10px 10px !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

.charSprite[data-pet="rhinoceros-de-combat"] .charPet.equipped::before,
.charSprite[data-pet="rhinoceras-de-combat"] .charPet.equipped::before {
  content: "" !important;
  position: absolute !important;
  bottom: -9px !important;
  left: 2px !important;
  width: 8px !important;
  height: 11px !important;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border: 2px solid #0f172a !important;
  border-radius: 2px 2px 4px 4px !important;
  box-shadow: 20px 0 0 #334155, 20px 0 0 #0f172a !important;
}

.charSprite[data-pet="rhinoceros-de-combat"] .charPet.equipped::after,
.charSprite[data-pet="rhinoceras-de-combat"] .charPet.equipped::after {
  content: "" !important;
  position: absolute !important;
  top: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 24px !important;
  height: 22px !important;
  background:
    /* Front Main Curved Horn (Ivory/Gold) */
    radial-gradient(ellipse at 50% 15%, #fef08a 0%, #eab308 40%, transparent 45%),
    /* Secondary Small Horn */
    radial-gradient(circle at 50% 35%, #fef08a 0%, #ca8a04 30%, transparent 35%),
    /* Glowing yellow eye visor slit */
    radial-gradient(circle at 5px 12px, #facc15 1.5px, transparent 2px),
    radial-gradient(circle at 19px 12px, #facc15 1.5px, transparent 2px),
    /* Armored snout & helmet */
    linear-gradient(180deg, #475569 0%, #334155 60%, #1e293b 100%) !important;
  border: 2px solid #0f172a !important;
  border-radius: 12px 12px 6px 6px !important;
  box-shadow: 0 -3px 8px rgba(234, 179, 8, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

/* Muldo céleste */
.charSprite[data-pet="muldo-celeste"] {
  --mount-color: #06b6d4;
}

.charSprite[data-pet="muldo-celeste"] .charPet.equipped {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 60%),
    linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%) !important;
  box-shadow: 0 0 14px #38bdf8, inset 0 0 8px #e0f2fe;
  border-color: #0284c7 !important;
}

.charSprite[data-pet="muldo-celeste"] .charPet.equipped::after {
  background:
    radial-gradient(circle at 4px 8px, #fff 1.8px, transparent 2.5px),
    radial-gradient(circle at 12px 8px, #fff 1.8px, transparent 2.5px),
    linear-gradient(90deg, #38bdf8 0%, #818cf8 100%) !important;
  box-shadow: 0 0 10px #38bdf8;
}

/* Volkorne de givre */
.charSprite[data-pet="volkorne-de-givre"] {
  --mount-color: #38bdf8;
}

.charSprite[data-pet="volkorne-de-givre"] .charPet.equipped {
  background:
    linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.7) 45%, transparent 50%),
    linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  box-shadow: 0 0 16px #7dd3fc, inset 0 2px 6px #fff;
  border-color: #0369a1 !important;
}

.charSprite[data-pet="volkorne-de-givre"] .charPet.equipped::after {
  background:
    linear-gradient(0deg, #e0f2fe 0%, #7dd3fc 60%, transparent 61%),
    radial-gradient(circle at 4px 8px, #e0f2fe 1.5px, transparent 2px),
    radial-gradient(circle at 12px 8px, #e0f2fe 1.5px, transparent 2px),
    #38bdf8 !important;
  box-shadow: 0 -5px 12px #38bdf8, inset 0 2px 4px #fff;
}

/* Behavior when facing back (Upwards) */
.charSprite.facing-back[data-pet-type="mount"] .charPet.equipped::after {
  display: none !important;
  /* hide head */
}

.charSprite.facing-back[data-pet-type="mount"] .charFeet,
.charSprite.facing-back[data-pet-type="mount"] .charBoots {
  display: none !important;
  /* hide riding legs from behind */
}

/* Shift player body and head upwards to look like riding */
.charSprite[data-pet-type="mount"] .charBody,
.charSprite[data-pet-type="mount"] .charCape,
.charSprite[data-pet-type="mount"] .charHead,
.charSprite[data-pet-type="mount"] .charHeadgear,
.charSprite[data-pet-type="mount"] .charWeapon,
.charSprite[data-pet-type="mount"] .charStaff,
.charSprite[data-pet-type="mount"] .charBow,
.charSprite[data-pet-type="mount"] .charAmulet,
.charSprite[data-pet-type="mount"] .charBelt,
.charSprite[data-pet-type="mount"] .charRingLeft,
.charSprite[data-pet-type="mount"] .charRingRight {
  margin-top: -14px !important;
}

/* Belt should be layered behind the mount body & head/neck */
.charSprite[data-pet-type="mount"] .charBelt {
  z-index: 2 !important;
}

/* Hide walking legs/boots of the character while on mount */
.charSprite[data-pet-type="mount"] .charFeet,
.charSprite[data-pet-type="mount"] .charBoots {
  display: none !important;
}

/* Walking animations for the mount (legs bobbing) */
@keyframes mountWalk {

  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }

  50% {
    transform: translateY(-2px) translateX(-50%);
  }
}

.charSprite.walking[data-pet-type="mount"] .charPet.equipped {
  animation: mountWalk 0.17s linear infinite;
}

/* ==========================================
   SYSTEME DE FAMILIERS (PETS RENDERING)
   ========================================== */

/* When pet (non-mount) is equipped */
.charSprite[data-pet-type="pet"] .charPet.equipped {
  display: block;
  left: -20px;
  top: 60px;
  width: 20px;
  height: 18px;
  position: absolute;
  z-index: 5;
  background: var(--pet-color, #94a3b8);
  border: 1.5px solid #1e293b;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

/* Adjust position based on player direction */
.charSprite.facing-left[data-pet-type="pet"] .charPet.equipped {
  left: auto;
  right: -20px;
}

.charSprite.facing-back[data-pet-type="pet"] .charPet.equipped {
  left: -16px;
  z-index: 1;
}

/* Bobbing animation for walking pets */
@keyframes petFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.charSprite.walking[data-pet-type="pet"] .charPet.equipped {
  animation: petFloat 0.3s ease-in-out infinite;
}

/* Floating animation for ghost pet (Spectre) */
@keyframes ghostFloat {

  0%,
  100% {
    transform: translateY(0) scale(0.95);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-5px) scale(1);
    opacity: 0.95;
  }
}

.charSprite[data-pet="spectre"] .charPet.equipped {
  animation: ghostFloat 1.8s ease-in-out infinite !important;
}

/* Specific Pet Styles (Spectacular pure CSS rendering) */

/* Félin tigré (Orange cat with dark stripes, eyes, ears and tail) */
.charSprite[data-pet="felin-tigre"] {
  --pet-color: #f97316;
}

.charSprite[data-pet="felin-tigre"] .charPet.equipped {
  background:
    /* left eye */
    radial-gradient(circle at 5px 6px, #000 1px, transparent 1.5px),
    /* right eye */
    radial-gradient(circle at 13px 6px, #000 1px, transparent 1.5px),
    /* nose */
    radial-gradient(circle at 9px 8px, #ea580c 0.8px, #fff 1.2px, transparent 1.5px),
    /* stripes */
    repeating-linear-gradient(90deg, #f97316, #f97316 4px, #ea580c 4px, #ea580c 6px) !important;
}

/* Cat ears */
.charSprite[data-pet="felin-tigre"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 4px;
  height: 4px;
  background: #ea580c;
  border: 1px solid #1e293b;
  border-bottom: none;
  box-shadow: 10px 0 0 #ea580c, 10px 0 0 #1e293b;
}

/* Cat tail */
.charSprite[data-pet="felin-tigre"] .charPet.equipped::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: -5px;
  width: 6px;
  height: 6px;
  background: #f97316;
  border: 1px solid #1e293b;
  border-radius: 50%;
}

.charSprite.facing-left[data-pet="felin-tigre"] .charPet.equipped::after {
  right: auto;
  left: -5px;
}

/* Oisillon obèse (Fat round yellow bird with orange beak, eyes and wings) */
.charSprite[data-pet="oisillon-obese"] {
  --pet-color: #facc15;
}

/* Default right eye look */
.charSprite[data-pet="oisillon-obese"] .charPet.equipped {
  border-radius: 50% !important;
  width: 18px;
  height: 18px;
  background:
    /* big eye looking forward/right */
    radial-gradient(circle at 4px 6px, #000 1.2px, #fff 2px, transparent 2.2px),
    radial-gradient(circle, #facc15 50%, #eab308 100%) !important;
}

/* Facing left eye look */
.charSprite.facing-left[data-pet="oisillon-obese"] .charPet.equipped {
  background:
    /* big eye looking left */
    radial-gradient(circle at 14px 6px, #000 1.2px, #fff 2px, transparent 2.2px),
    radial-gradient(circle, #facc15 50%, #eab308 100%) !important;
}

/* Tiny orange beak */
.charSprite[data-pet="oisillon-obese"] .charPet.equipped::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -3px;
  width: 5px;
  height: 4px;
  background: #f97316;
  border-radius: 2px;
  border: 1px solid #1e293b;
}

.charSprite.facing-left[data-pet="oisillon-obese"] .charPet.equipped::after {
  left: auto;
  right: -3px;
}

/* Small wings */
.charSprite[data-pet="oisillon-obese"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: 6px;
  right: -2px;
  width: 4px;
  height: 6px;
  background: #eab308;
  border: 1px solid #1e293b;
  border-radius: 50%;
}

.charSprite.facing-left[data-pet="oisillon-obese"] .charPet.equipped::before {
  right: auto;
  left: -2px;
}

/* Feu follet (Glowing cyan wisp spirit with cute eyes and flame trail) */
.charSprite[data-pet="feu-follet"] {
  --pet-color: #22d3ee;
}

.charSprite[data-pet="feu-follet"] .charPet.equipped {
  border-radius: 50% !important;
  box-shadow: 0 0 12px #06b6d4, 0 0 4px #22d3ee, inset 0 0 6px #fff;
  border: 1.5px solid #0891b2;
  width: 14px;
  height: 14px;
  background:
    /* glowing eyes */
    radial-gradient(circle at 4px 5px, #fff 1.2px, transparent 1.6px),
    radial-gradient(circle at 10px 5px, #fff 1.2px, transparent 1.6px),
    radial-gradient(circle, #fff 10%, #22d3ee 80%) !important;
}

/* Flame spirit trail */
.charSprite[data-pet="feu-follet"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: #22d3ee;
  filter: blur(1px);
  transform: rotate(45deg);
  box-shadow: 0 0 8px #06b6d4;
  border-radius: 50% 0 50% 50%;
}

/* Marcassin (Little brown wild boar with white tusks, eyes and snout) */
.charSprite[data-pet="marcassin"] {
  --pet-color: #78350f;
}

.charSprite[data-pet="marcassin"] .charPet.equipped {
  background:
    /* left eye */
    radial-gradient(circle at 4px 5px, #000 1.2px, #fff 1.8px, transparent 2px),
    /* snout */
    radial-gradient(circle at -1px 8px, #451a03 2px, transparent 2.5px),
    linear-gradient(135deg, #78350f 70%, #451a03 100%) !important;
}

.charSprite.facing-left[data-pet="marcassin"] .charPet.equipped {
  background:
    /* right eye */
    radial-gradient(circle at 14px 5px, #000 1.2px, #fff 1.8px, transparent 2px),
    /* snout */
    radial-gradient(circle at 19px 8px, #451a03 2px, transparent 2.5px),
    linear-gradient(135deg, #78350f 70%, #451a03 100%) !important;
}

/* White tusks */
.charSprite[data-pet="marcassin"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -3px;
  width: 3px;
  height: 3px;
  background: #f8fafc;
  border: 1px solid #1e293b;
  border-radius: 50%;
}

.charSprite.facing-left[data-pet="marcassin"] .charPet.equipped::before {
  left: auto;
  right: -3px;
}

/* Mini-taure (Tiny red/brown minotaur with white horns, eyes, nose ring) */
.charSprite[data-pet="mini-taure"] {
  --pet-color: #b91c1c;
}

.charSprite[data-pet="mini-taure"] .charPet.equipped {
  background:
    /* left eye */
    radial-gradient(circle at 4px 6px, #000 1px, transparent 1.5px),
    /* right eye */
    radial-gradient(circle at 12px 6px, #000 1px, transparent 1.5px),
    /* nose ring area */
    radial-gradient(circle at 8px 11px, #7f1d1d 2px, transparent 2.5px),
    linear-gradient(180deg, #b91c1c 70%, #7f1d1d 100%) !important;
}

/* White horns */
.charSprite[data-pet="mini-taure"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 2px;
  height: 4px;
  background: #f8fafc;
  border: 1px solid #1e293b;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  box-shadow: 10px 0 0 #f8fafc, 10px 0 0 #1e293b;
}

/* Golden nose ring */
.charSprite[data-pet="mini-taure"] .charPet.equipped::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border: 1px solid #eab308;
  border-radius: 50%;
}

.charSprite.facing-left[data-pet="mini-taure"] .charPet.equipped::after {
  left: auto;
  right: -2px;
}

/* Chiot peluche (Extremely fluffy pink pup with cute floppy ears and eyes/snout) */
.charSprite[data-pet="chiot-peluche"] {
  --pet-color: #f472b6;
}

.charSprite[data-pet="chiot-peluche"] .charPet.equipped {
  border-radius: 10px 10px 6px 6px !important;
  background:
    /* left eye */
    radial-gradient(circle at 4px 6px, #000 1.5px, transparent 2px),
    /* right eye */
    radial-gradient(circle at 12px 6px, #000 1.5px, transparent 2px),
    /* snout */
    radial-gradient(circle at 8px 10px, #1e293b 1px, transparent 1.5px),
    radial-gradient(circle, #f472b6 40%, #db2777 100%) !important;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Fluffy pup ears */
.charSprite[data-pet="chiot-peluche"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -2px;
  width: 4px;
  height: 8px;
  background: #db2777;
  border: 1px solid #1e293b;
  border-radius: 3px;
  box-shadow: 18px 0 0 #db2777, 18px 0 0 #1e293b;
}

/* Spectre (floating white ghost with glowing red eyes and spooky mouth/tail) */
.charSprite[data-pet="spectre"] {
  --pet-color: #f8fafc;
}

.charSprite[data-pet="spectre"] .charPet.equipped {
  border-radius: 12px 12px 0 0 !important;
  background:
    /* open mouth */
    radial-gradient(circle at 8px 8px, #1e293b 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(248, 250, 252, 0.4) 100%) !important;
  border-bottom: none;
  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.4);
}

/* Glowing red eyes */
.charSprite[data-pet="spectre"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 2px;
  height: 2px;
  background: #ef4444;
  box-shadow: 6px 0 0 #ef4444, 0 0 4px #ef4444, 6px 0 4px #ef4444;
}

/* Wavy ghost tail */
.charSprite[data-pet="spectre"] .charPet.equipped::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background:
    radial-gradient(circle at 4px 0, rgba(248, 250, 252, 0.4) 3px, transparent 4px),
    radial-gradient(circle at 12px 0, rgba(248, 250, 252, 0.4) 3px, transparent 4px);
}

/* Capucin (Little brown monkey with cute ears, face mask, belt and banana) */
.charSprite[data-pet="capucin"] {
  --pet-color: #a16207;
}

.charSprite[data-pet="capucin"] .charPet.equipped {
  background:
    /* left eye */
    radial-gradient(circle at 6px 6px, #000 1px, transparent 1.5px),
    /* right eye */
    radial-gradient(circle at 14px 6px, #000 1px, transparent 1.5px),
    /* mouth */
    radial-gradient(circle at 10px 10px, #713f12 0.8px, transparent 1.2px),
    /* face mask */
    radial-gradient(ellipse at 10px 8px, #fed7aa 6px, transparent 7px),
    /* yellow belt */
    linear-gradient(180deg, transparent 14px, #eab308 14px, #eab308 16px, transparent 16px),
    radial-gradient(circle, #a16207 60%, #713f12 100%) !important;
}

/* Monkey ears */
.charSprite[data-pet="capucin"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -3px;
  width: 4px;
  height: 4px;
  background: #a16207;
  border: 1.5px solid #1c1917;
  border-radius: 50%;
  box-shadow: 20px 0 0 #a16207, 20px 0 2px #1c1917;
}

/* Little banana near head */
.charSprite[data-pet="capucin"] .charPet.equipped::after {
  content: "🍌";
  font-size: 8px;
  line-height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
}

.charSprite.facing-left[data-pet="capucin"] .charPet.equipped::after {
  left: auto;
  right: -4px;
}

/* Petit dragon (Fire-red baby dragon with yellow horns and tiny wings) */
.charSprite[data-pet="petit-dragon"] {
  --pet-color: #ef4444;
}

.charSprite[data-pet="petit-dragon"] .charPet.equipped {
  border-radius: 8px 8px 4px 4px !important;
  background:
    /* cute glowing yellow eyes */
    radial-gradient(circle at 4px 6px, #facc15 1.5px, transparent 2px),
    /* right eye */
    radial-gradient(circle at 12px 6px, #facc15 1.5px, transparent 2px),
    /* scales */
    linear-gradient(135deg, #ef4444 80%, #b91c1c 100%) !important;
}

/* Dragon horns and tail */
.charSprite[data-pet="petit-dragon"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 2px;
  height: 4px;
  background: #facc15;
  /* gold horns */
  border: 1px solid #78350f;
  border-bottom: none;
  box-shadow: 10px 0 0 #facc15, 10px 0 0 #78350f;
}

/* Tiny dragon wing or fire breath */
.charSprite[data-pet="petit-dragon"] .charPet.equipped::after {
  content: "🔥";
  font-size: 7px;
  line-height: 7px;
  position: absolute;
  bottom: 1px;
  left: -5px;
}

.charSprite.facing-left[data-pet="petit-dragon"] .charPet.equipped::after {
  left: auto;
  right: -5px;
}

/* Gélutin (Bouncing jelly-blue slime with tiny antenna and big cute eyes) */
.charSprite[data-pet="gelutin"] {
  --pet-color: #3b82f6;
}

.charSprite[data-pet="gelutin"] .charPet.equipped {
  border-radius: 50% 50% 40% 40% !important;
  width: 14px;
  height: 14px;
  box-shadow: inset 0 -3px 6px rgba(29, 78, 216, 0.6), 0 2px 4px rgba(0, 0, 0, 0.15);
  background:
    /* big shiny eyes */
    radial-gradient(circle at 4px 5px, #fff 0.8px, #000 1.6px, transparent 2.2px),
    radial-gradient(circle at 10px 5px, #fff 0.8px, #000 1.6px, transparent 2.2px),
    /* body color */
    radial-gradient(circle, #60a5fa 30%, #2563eb 100%) !important;
}

/* Bouncing animation for slime */
@keyframes slimeBounce {

  0%,
  100% {
    transform: scale(1, 1) translateY(0);
  }

  50% {
    transform: scale(1.08, 0.92) translateY(1px);
  }
}

.charSprite[data-pet="gelutin"] .charPet.equipped {
  animation: slimeBounce 1.2s ease-in-out infinite !important;
}

/* Gelutin antenna */
.charSprite[data-pet="gelutin"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 6px;
  width: 2px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  border: 1px solid #1d4ed8;
}

/* Souris électrique */
.charSprite[data-pet="souris-electrique"] {
  --pet-color: #facc15;
}

.charSprite[data-pet="souris-electrique"] .charPet.equipped {
  border-radius: 50% 50% 40% 40% !important;
  background:
    radial-gradient(circle at 4px 6px, #ffffff 0.8px, #000000 1.5px, transparent 2px),
    radial-gradient(circle at 12px 6px, #ffffff 0.8px, #000000 1.5px, transparent 2px),
    radial-gradient(circle at 2px 10px, #ef4444 1.8px, transparent 2.4px),
    radial-gradient(circle at 14px 10px, #ef4444 1.8px, transparent 2.4px),
    radial-gradient(circle at 8px 9px, #000000 0.8px, transparent 1.2px),
    #facc15 !important;
  border: 1.5px solid #854d0e !important;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
}

.charSprite[data-pet="souris-electrique"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 2px;
  width: 4px;
  height: 7px;
  background: linear-gradient(180deg, #000 0%, #000 35%, #facc15 36%, #facc15 100%);
  border-radius: 4px 4px 0 0;
  border: 1px solid #854d0e;
  border-bottom: none;
  box-shadow: 8px 0 0 #facc15;
}

.charSprite[data-pet="souris-electrique"] .charPet.equipped::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -5px;
  width: 5px;
  height: 10px;
  background: #facc15;
  clip-path: polygon(0% 0%, 100% 25%, 40% 50%, 100% 75%, 20% 100%, 0% 60%);
  border: 1px solid #854d0e;
}

/* Phénix flamboyant (Majestic fiery phoenix bird with glowing wings and tail feathers) */
.charSprite[data-pet="phenix-flamboyant"],
.charSprite[data-pet="phoenix-flamboyant"] {
  --pet-color: #f97316;
}

.charSprite[data-pet="phenix-flamboyant"] .charPet.equipped,
.charSprite[data-pet="phoenix-flamboyant"] .charPet.equipped {
  border-radius: 50% 50% 40% 40% !important;
  background:
    /* glowing ruby eye left */
    radial-gradient(circle at 4px 5px, #ffffff 0.8px, #dc2626 1.8px, transparent 2.4px),
    /* glowing ruby eye right */
    radial-gradient(circle at 12px 5px, #ffffff 0.8px, #dc2626 1.8px, transparent 2.4px),
    /* golden beak */
    linear-gradient(180deg, transparent 7px, #eab308 7px, #ca8a04 11px, transparent 11px),
    linear-gradient(180deg, #ef4444 0%, #f97316 60%, #eab308 100%) !important;
  border: 1.5px solid #991b1b !important;
  box-shadow: 0 0 14px #f97316, 0 0 6px #ef4444, inset 0 2px 4px #fef08a !important;
  animation: phoenixAura 1.5s ease-in-out infinite alternate !important;
}

@keyframes phoenixAura {
  0% {
    box-shadow: 0 0 10px #f97316, 0 0 4px #ef4444;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    box-shadow: 0 0 18px #facc15, 0 0 8px #f97316;
    transform: translateX(-50%) translateY(-2px);
  }
}

/* Fiery wing plumes left and right */
.charSprite[data-pet="phenix-flamboyant"] .charPet.equipped::before,
.charSprite[data-pet="phoenix-flamboyant"] .charPet.equipped::before {
  content: "" !important;
  position: absolute !important;
  top: -4px !important;
  left: 4px !important;
  width: 8px !important;
  height: 6px !important;
  background: linear-gradient(180deg, #facc15 0%, #f97316 60%, #dc2626 100%) !important;
  clip-path: polygon(50% 0%, 100% 70%, 75% 100%, 25% 100%, 0% 70%) !important;
  box-shadow: 0 0 6px #facc15 !important;
}

/* Fiery tail feathers */
.charSprite[data-pet="phenix-flamboyant"] .charPet.equipped::after,
.charSprite[data-pet="phoenix-flamboyant"] .charPet.equipped::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 3px !important;
  width: 10px !important;
  height: 8px !important;
  background: radial-gradient(ellipse at 50% 0%, #facc15 10%, #f97316 50%, #dc2626 100%) !important;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 50% 75%, 0% 100%) !important;
}

/* Bébé minotaure */
.charSprite[data-pet="bebe-minotaure"] {
  --pet-color: #78350f;
}

.charSprite[data-pet="bebe-minotaure"] .charPet.equipped {
  border-radius: 40% 40% 45% 45% !important;
  background:
    radial-gradient(circle at 4px 6px, #fff 0.5px, #000 1.5px, transparent 2px),
    radial-gradient(circle at 12px 6px, #fff 0.5px, #000 1.5px, transparent 2px),
    radial-gradient(circle at 8px 10px, #451a03 2.5px, transparent 3px),
    linear-gradient(180deg, #78350f 0%, #451a03 100%) !important;
  border: 1.5px solid #292524 !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.charSprite[data-pet="bebe-minotaure"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 3px;
  height: 6px;
  background: #f8fafc;
  border: 1px solid #1e293b;
  border-radius: 3px 3px 0 0;
  box-shadow: 9px 0 0 #f8fafc;
}

.charSprite[data-pet="bebe-minotaure"] .charPet.equipped::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 6px;
  width: 4px;
  height: 4px;
  border: 1.5px solid #eab308;
  border-radius: 50%;
  box-shadow: 0 0 4px #facc15;
}

/* Panda gourmand */
.charSprite[data-pet="panda-gourmand"] {
  --pet-color: #f8fafc;
}

.charSprite[data-pet="panda-gourmand"] .charPet.equipped {
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 4px 6px, #fff 0.6px, #000 2px, transparent 2.5px),
    radial-gradient(circle at 12px 6px, #fff 0.6px, #000 2px, transparent 2.5px),
    radial-gradient(circle at 8px 10px, #000 1.2px, transparent 1.6px),
    #f8fafc !important;
  border: 1.5px solid #0f172a !important;
}

.charSprite[data-pet="panda-gourmand"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 1px;
  width: 4px;
  height: 4px;
  background: #000000;
  border-radius: 50%;
  box-shadow: 10px 0 0 #000000;
}

.charSprite[data-pet="panda-gourmand"] .charPet.equipped::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 3px;
  height: 10px;
  background: linear-gradient(180deg, #22c55e, #15803d);
  border: 1px solid #14532d;
  border-radius: 2px;
}

/* Chouette de magie */
.charSprite[data-pet="chouette-de-magie"] {
  --pet-color: #1e1b4b;
}

.charSprite[data-pet="chouette-de-magie"] .charPet.equipped {
  border-radius: 50% 50% 40% 40% !important;
  background:
    radial-gradient(circle at 4px 6px, #000 1px, #facc15 2px, transparent 2.5px),
    radial-gradient(circle at 12px 6px, #000 1px, #facc15 2px, transparent 2.5px),
    radial-gradient(circle at 8px 9px, #ea580c 1.2px, transparent 1.6px),
    #1e1b4b !important;
  border: 1.5px solid #0f172a !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
}

.charSprite[data-pet="chouette-de-magie"] .charPet.equipped::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 3px;
  width: 10px;
  height: 7px;
  background: linear-gradient(180deg, #facc15 0%, #6b21a8 40%, #581c87 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Leg rendering for riding character (draped legs on the sides of the mount) */
.charSprite[data-pet-type="mount"] .charFeet {
  display: block !important;
  left: 50% !important;
  top: 48px !important;
  width: 44px !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  background: none !important;
  z-index: 5 !important;
  /* draw in front of mount body */
}

.charSprite[data-pet-type="mount"] .charFeet::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 0px !important;
  width: 8px !important;
  height: 16px !important;
  background: var(--char-skin-start, #d7a378) !important;
  border: 2px solid #1c1511 !important;
  border-radius: 4px !important;
  transform: rotate(20deg) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.charSprite[data-pet-type="mount"] .charFeet::after {
  content: "" !important;
  position: absolute !important;
  right: 4px !important;
  top: 0px !important;
  width: 8px !important;
  height: 16px !important;
  background: var(--char-skin-start, #d7a378) !important;
  border: 2px solid #1c1511 !important;
  border-radius: 4px !important;
  transform: rotate(-20deg) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Same for boots if equipped */
.charSprite[data-pet-type="mount"] .charBoots {
  display: block !important;
  left: 50% !important;
  top: 48px !important;
  width: 44px !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  background: none !important;
  z-index: 5 !important;
}

.charSprite[data-pet-type="mount"] .charBoots::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 4px !important;
  width: 10px !important;
  height: 14px !important;
  background: inherit !important;
  /* inherits boot colors */
  border: 2px solid #1c1511 !important;
  border-radius: 4px !important;
  transform: rotate(20deg) !important;
}

.charSprite[data-pet-type="mount"] .charBoots::after {
  content: "" !important;
  position: absolute !important;
  right: 3px !important;
  top: 4px !important;
  width: 10px !important;
  height: 14px !important;
  background: inherit !important;
  border: 2px solid #1c1511 !important;
  border-radius: 4px !important;
  transform: rotate(-20deg) !important;
}

/* =============================================================================
   PURE CSS EQUIPMENT ITEM ICON RENDERING SYSTEM (Encyclopédie Gold Standard)
   ============================================================================= */
.equipment-css-render-box,
.equipment-css-render,
.item-visual-slot-render,
.item-visual-detail-render,
.item-grid-box {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.equipment-css-render-box .charSprite,
.equipment-css-render .charSprite,
.item-visual-slot-render .charSprite,
.item-visual-detail-render .charSprite {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 64px !important;
  height: 96px !important;
  pointer-events: none !important;
  transform-origin: center center !important;
  background: none !important;
}

/* 1. Hide base player body & shadow for equipment icons and large details */
body .equipment-css-render-box .charSprite::before,
body .equipment-css-render-box .charSprite::after,
body .equipment-large-box .charSprite::before,
body .equipment-large-box .charSprite::after,
body .equipment-css-render .charSprite::before,
body .equipment-css-render .charSprite::after,
body .item-visual-slot-render .charSprite::before,
body .item-visual-slot-render .charSprite::after,
body .item-visual-detail-render .charSprite::before,
body .item-visual-detail-render .charSprite::after,
body .equipment-standalone-render::before,
body .equipment-standalone-render::after {
  display: none !important;
  content: "" !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide human skin and body layers in standalone item slots */
body .equipment-css-render-box .charSprite>div:not(.charHeadgear):not(.charCape):not(.charBoots):not(.charBelt):not(.charRingLeft):not(.charRingRight):not(.charAmulet):not(.charWeapon):not(.charStaff):not(.charBow):not(.charAxe):not(.charShovel):not(.charShield):not(.charPet):not(.item-custom-icon),
body .equipment-css-render .charSprite>div:not(.charHeadgear):not(.charCape):not(.charBoots):not(.charBelt):not(.charRingLeft):not(.charRingRight):not(.charAmulet):not(.charWeapon):not(.charStaff):not(.charBow):not(.charAxe):not(.charShovel):not(.charShield):not(.charPet):not(.item-custom-icon),
body .item-visual-slot-render .charSprite>div:not(.charHeadgear):not(.charCape):not(.charBoots):not(.charBelt):not(.charRingLeft):not(.charRingRight):not(.charAmulet):not(.charWeapon):not(.charStaff):not(.charBow):not(.charAxe):not(.charShovel):not(.charShield):not(.charPet):not(.item-custom-icon),
body .item-visual-detail-render .charSprite>div:not(.charHeadgear):not(.charCape):not(.charBoots):not(.charBelt):not(.charRingLeft):not(.charRingRight):not(.charAmulet):not(.charWeapon):not(.charStaff):not(.charBow):not(.charAxe):not(.charShovel):not(.charShield):not(.charPet):not(.item-custom-icon) {
  display: none !important;
}

/* Centering offsets for each slot */

/* HEADGEAR: center is at (32px, 23px) */
.equipment-css-render-box .charSprite[data-headgear]:not([data-headgear=""]),
.equipment-css-render .charSprite[data-headgear]:not([data-headgear=""]),
.item-visual-slot-render .charSprite[data-headgear]:not([data-headgear=""]) {
  transform-origin: 32px 23px !important;
  transform: translate(-32px, -23px) scale(1.7) !important;
}

.equipment-large-box .charSprite[data-headgear]:not([data-headgear=""]),
.item-visual-detail-render .charSprite[data-headgear]:not([data-headgear=""]) {
  transform-origin: 32px 23px !important;
  transform: translate(-32px, -23px) scale(2.4) !important;
}

/* CAPE: center is at (32px, 56px) */
.equipment-css-render-box .charSprite[data-cape]:not([data-cape=""]),
.equipment-css-render .charSprite[data-cape]:not([data-cape=""]),
.item-visual-slot-render .charSprite[data-cape]:not([data-cape=""]) {
  transform-origin: 32px 56px !important;
  transform: translate(-32px, -56px) scale(0.95) !important;
}

.equipment-large-box .charSprite[data-cape]:not([data-cape=""]),
.item-visual-detail-render .charSprite[data-cape]:not([data-cape=""]) {
  transform-origin: 32px 56px !important;
  transform: translate(-32px, -56px) scale(1.4) !important;
}

/* BOOTS: center is at (32px, 72px) */
.equipment-css-render-box .charSprite[data-boots]:not([data-boots=""]),
.equipment-css-render .charSprite[data-boots]:not([data-boots=""]),
.item-visual-slot-render .charSprite[data-boots]:not([data-boots=""]) {
  transform-origin: 32px 72px !important;
  transform: translate(-32px, -72px) scale(1.4) !important;
}

.equipment-large-box .charSprite[data-boots]:not([data-boots=""]),
.item-visual-detail-render .charSprite[data-boots]:not([data-boots=""]) {
  transform-origin: 32px 72px !important;
  transform: translate(-32px, -72px) scale(2.0) !important;
}

/* BELT: center is at (32px, 60px) */
.equipment-css-render-box .charSprite[data-belt]:not([data-belt=""]),
.equipment-css-render .charSprite[data-belt]:not([data-belt=""]),
.item-visual-slot-render .charSprite[data-belt]:not([data-belt=""]) {
  transform-origin: 32px 60px !important;
  transform: translate(-32px, -60px) scale(1.4) !important;
}

.equipment-large-box .charSprite[data-belt]:not([data-belt=""]),
.item-visual-detail-render .charSprite[data-belt]:not([data-belt=""]) {
  transform-origin: 32px 60px !important;
  transform: translate(-32px, -60px) scale(2.0) !important;
}

/* RINGS, AMULETS & RELICS: center is at (32px, 48px) */
.equipment-css-render-box .charSprite[data-ring-left]:not([data-ring-left=""]),
.equipment-css-render-box .charSprite[data-amulet]:not([data-amulet=""]),
.equipment-css-render-box .charSprite[data-relic]:not([data-relic=""]),
.equipment-css-render .charSprite[data-ring-left]:not([data-ring-left=""]),
.equipment-css-render .charSprite[data-amulet]:not([data-amulet=""]),
.equipment-css-render .charSprite[data-relic]:not([data-relic=""]),
.item-visual-slot-render .charSprite[data-ring-left]:not([data-ring-left=""]),
.item-visual-slot-render .charSprite[data-amulet]:not([data-amulet=""]),
.item-visual-slot-render .charSprite[data-relic]:not([data-relic=""]) {
  transform-origin: 32px 48px !important;
  transform: translate(-32px, -48px) scale(1.4) !important;
}

.equipment-large-box .charSprite[data-ring-left]:not([data-ring-left=""]),
.equipment-large-box .charSprite[data-amulet]:not([data-amulet=""]),
.equipment-large-box .charSprite[data-relic]:not([data-relic=""]),
.item-visual-detail-render .charSprite[data-ring-left]:not([data-ring-left=""]),
.item-visual-detail-render .charSprite[data-amulet]:not([data-amulet=""]),
.item-visual-detail-render .charSprite[data-relic]:not([data-relic=""]) {
  transform-origin: 32px 48px !important;
  transform: translate(-32px, -48px) scale(2.0) !important;
}

/* WEAPON: center is at (60px, 53px) */
.equipment-css-render-box .charSprite[data-weapon]:not([data-weapon=""]),
.equipment-css-render-box .charSprite[data-shovel]:not([data-shovel=""]),
.equipment-css-render-box .charSprite[data-axe]:not([data-axe=""]),
.equipment-css-render .charSprite[data-weapon]:not([data-weapon=""]),
.equipment-css-render .charSprite[data-shovel]:not([data-shovel=""]),
.equipment-css-render .charSprite[data-axe]:not([data-axe=""]),
.item-visual-slot-render .charSprite[data-weapon]:not([data-weapon=""]),
.item-visual-slot-render .charSprite[data-shovel]:not([data-shovel=""]),
.item-visual-slot-render .charSprite[data-axe]:not([data-axe=""]) {
  transform-origin: 60px 53px !important;
  transform: translate(-60px, -53px) scale(1.1) !important;
}

.equipment-css-render-box .charSprite[data-staff]:not([data-staff=""]),
.equipment-css-render-box .charSprite[data-bow]:not([data-bow=""]),
.equipment-css-render .charSprite[data-staff]:not([data-staff=""]),
.equipment-css-render .charSprite[data-bow]:not([data-bow=""]),
.item-visual-slot-render .charSprite[data-staff]:not([data-staff=""]),
.item-visual-slot-render .charSprite[data-bow]:not([data-bow=""]) {
  transform-origin: 60px 53px !important;
  transform: translate(-60px, -53px) scale(0.72) !important;
}

.equipment-large-box .charSprite[data-weapon]:not([data-weapon=""]),
.equipment-large-box .charSprite[data-shovel]:not([data-shovel=""]),
.equipment-large-box .charSprite[data-axe]:not([data-axe=""]),
.item-visual-detail-render .charSprite[data-weapon]:not([data-weapon=""]),
.item-visual-detail-render .charSprite[data-shovel]:not([data-shovel=""]),
.item-visual-detail-render .charSprite[data-axe]:not([data-axe=""]) {
  transform-origin: 60px 53px !important;
  transform: translate(-60px, -53px) scale(1.5) !important;
}

.equipment-large-box .charSprite[data-staff]:not([data-staff=""]),
.equipment-large-box .charSprite[data-bow]:not([data-bow=""]),
.item-visual-detail-render .charSprite[data-staff]:not([data-staff=""]),
.item-visual-detail-render .charSprite[data-bow]:not([data-bow=""]) {
  transform-origin: 60px 53px !important;
  transform: translate(-60px, -53px) scale(1.0) !important;
}

/* Staff & Bow size clamp inside equipment slots */
body .equipment-css-render-box .charSprite .charStaff.equipped,
body .equipment-css-render .charSprite .charStaff.equipped,
body .item-visual-slot-render .charSprite .charStaff.equipped,
body .equipment-large-box .charSprite .charStaff.equipped,
body .item-visual-detail-render .charSprite .charStaff.equipped {
  height: 28px !important;
  width: 5px !important;
}

body .equipment-css-render-box .charSprite .charStaff.equipped::before,
body .equipment-css-render .charSprite .charStaff.equipped::before,
body .item-visual-slot-render .charSprite .charStaff.equipped::before,
body .equipment-large-box .charSprite .charStaff.equipped::before,
body .item-visual-detail-render .charSprite .charStaff.equipped::before {
  width: 12px !important;
  height: 12px !important;
  top: -10px !important;
  left: -4px !important;
}

body .equipment-css-render-box .charSprite .charBow.equipped,
body .equipment-css-render .charSprite .charBow.equipped,
body .item-visual-slot-render .charSprite .charBow.equipped,
body .equipment-large-box .charSprite .charBow.equipped,
body .item-visual-detail-render .charSprite .charBow.equipped {
  height: 26px !important;
  width: 13px !important;
}

body .equipment-css-render-box .charSprite .charBow.equipped::after,
body .equipment-css-render .charSprite .charBow.equipped::after,
body .item-visual-slot-render .charSprite .charBow.equipped::after,
body .equipment-large-box .charSprite .charBow.equipped::after,
body .item-visual-detail-render .charSprite .charBow.equipped::after {
  height: 18px !important;
  top: 4px !important;
}

/* SHIELD: center is at (4px, 53px) */
.equipment-css-render-box .charSprite[data-shield]:not([data-shield=""]),
.equipment-css-render .charSprite[data-shield]:not([data-shield=""]),
.item-visual-slot-render .charSprite[data-shield]:not([data-shield=""]) {
  transform-origin: 4px 53px !important;
  transform: translate(-4px, -53px) scale(1.1) !important;
}

.equipment-large-box .charSprite[data-shield]:not([data-shield=""]),
.item-visual-detail-render .charSprite[data-shield]:not([data-shield=""]) {
  transform-origin: 4px 53px !important;
  transform: translate(-4px, -53px) scale(1.5) !important;
}

/* MOUNT: center is at (32px, 60px) */
.equipment-css-render-box .charSprite[data-pet-type="mount"]:not([data-pet=""]),
.equipment-css-render .charSprite[data-pet-type="mount"]:not([data-pet=""]),
.item-visual-slot-render .charSprite[data-pet-type="mount"]:not([data-pet=""]) {
  transform-origin: 32px 60px !important;
  transform: translate(-32px, -60px) scale(0.7) !important;
}

.equipment-large-box .charSprite[data-pet-type="mount"]:not([data-pet=""]),
.item-visual-detail-render .charSprite[data-pet-type="mount"]:not([data-pet=""]) {
  transform-origin: 32px 60px !important;
  transform: translate(-32px, -60px) scale(1.15) !important;
}

/* PET (Familier): center is at (32px, 60px) */
.equipment-css-render-box .charSprite[data-pet][data-pet-type="pet"]:not([data-pet=""]),
.equipment-css-render-box .charSprite[data-pet]:not([data-pet-type="mount"]):not([data-pet=""]),
.equipment-css-render .charSprite[data-pet][data-pet-type="pet"]:not([data-pet=""]),
.equipment-css-render .charSprite[data-pet]:not([data-pet-type="mount"]):not([data-pet=""]),
.item-visual-slot-render .charSprite[data-pet][data-pet-type="pet"]:not([data-pet=""]),
.item-visual-slot-render .charSprite[data-pet]:not([data-pet-type="mount"]):not([data-pet=""]) {
  transform-origin: 32px 60px !important;
  transform: translate(-32px, -60px) scale(1.5) !important;
}

.equipment-large-box .charSprite[data-pet][data-pet-type="pet"]:not([data-pet=""]),
.equipment-large-box .charSprite[data-pet]:not([data-pet-type="mount"]):not([data-pet=""]),
.item-visual-detail-render .charSprite[data-pet][data-pet-type="pet"]:not([data-pet=""]),
.item-visual-detail-render .charSprite[data-pet]:not([data-pet-type="mount"]):not([data-pet=""]) {
  transform-origin: 32px 60px !important;
  transform: translate(-32px, -60px) scale(2.4) !important;
}

/* Force display of weapons & pets in visual containers */
body .equipment-css-render-box .charSprite .charWeapon,
body .equipment-css-render-box .charSprite .charStaff,
body .equipment-css-render-box .charSprite .charBow,
body .equipment-css-render-box .charSprite .charShovel,
body .equipment-css-render-box .charSprite .charAxe,
body .equipment-css-render-box .charSprite .charPet,
body .equipment-css-render .charSprite .charWeapon,
body .equipment-css-render .charSprite .charStaff,
body .equipment-css-render .charSprite .charBow,
body .equipment-css-render .charSprite .charShovel,
body .equipment-css-render .charSprite .charAxe,
body .equipment-css-render .charSprite .charPet,
body .item-visual-slot-render .charSprite .charWeapon,
body .item-visual-slot-render .charSprite .charStaff,
body .item-visual-slot-render .charSprite .charBow,
body .item-visual-slot-render .charSprite .charShovel,
body .item-visual-slot-render .charSprite .charAxe,
body .item-visual-slot-render .charSprite .charPet,
body .equipment-large-box .charSprite .charWeapon,
body .equipment-large-box .charSprite .charStaff,
body .equipment-large-box .charSprite .charBow,
body .equipment-large-box .charSprite .charShovel,
body .equipment-large-box .charSprite .charAxe,
body .equipment-large-box .charSprite .charPet,
body .item-visual-detail-render .charSprite .charWeapon,
body .item-visual-detail-render .charSprite .charStaff,
body .item-visual-detail-render .charSprite .charBow,
body .item-visual-detail-render .charSprite .charShovel,
body .item-visual-detail-render .charSprite .charAxe,
body .item-visual-detail-render .charSprite .charPet {
  display: block !important;
}

/* =============================================================================
   CUSTOM ITEM ICONS (Rings, Amulets, Relics Procedural Visuals)
   ============================================================================= */
.charSprite .item-custom-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.equipment-large-box .charSprite .item-custom-icon,
.item-visual-detail-render .charSprite .item-custom-icon {
  transform: translate(-50%, -50%) scale(1.6) !important;
}

.item-custom-icon {
  position: relative;
  box-sizing: border-box;
}

/* Ring Styling */
.item-custom-icon.ring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3.5px solid transparent;
  background: var(--metal-gradient, radial-gradient(circle, #fff3e0 0%, #ffb300 70%, #ff8f00 100%)) padding-box,
    var(--metal-gradient, radial-gradient(circle, #fff3e0 0%, #ffb300 70%, #ff8f00 100%)) border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-custom-icon.ring::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a1a24;
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.7);
}

.item-custom-icon.ring .gem-stone {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--gem-color, #ff3366);
  border-radius: 1.5px;
  box-shadow: 0 0 5px var(--gem-shadow, rgba(255, 51, 102, 0.8)), 0 1px 1px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* Amulet Styling */
.item-custom-icon.amulet {
  width: 20px;
  height: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.item-custom-icon.amulet::before {
  content: '';
  width: 16px;
  height: 10px;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--metal-gradient, radial-gradient(circle, #fff3e0 0%, #ffb300 70%, #ff8f00 100%)) padding-box,
    var(--metal-gradient, radial-gradient(circle, #fff3e0 0%, #ffb300 70%, #ff8f00 100%)) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.item-custom-icon.amulet::after {
  content: '';
  width: 3.5px;
  height: 3.5px;
  background: var(--metal-gradient, radial-gradient(circle, #fff3e0 0%, #ffb300 70%, #ff8f00 100%));
  border-radius: 50%;
  margin-top: -2px;
  z-index: 1;
}

.item-custom-icon.amulet .gem-stone {
  width: 8px;
  height: 8px;
  background: var(--gem-color, #ff3366);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  box-shadow: 0 0 6px var(--gem-shadow, rgba(255, 51, 102, 0.8)), 0 1.5px 2px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: -1px;
  z-index: 2;
}

/* Custom Relic Styles */
.item-custom-icon.relic {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.item-custom-icon.relic .relic-glow {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--relic-glow, rgba(255, 215, 0, 0.4));
  filter: blur(6px);
  z-index: 1;
  opacity: 0.8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.item-custom-icon.relic .relic-shape {
  position: relative;
  width: 18px;
  height: 18px;
  background: var(--relic-bg, linear-gradient(135deg, #ffd700, #ff8c00));
  border: var(--relic-border, 1.5px solid #ffffff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  z-index: 2;
  box-sizing: border-box;
}

.item-custom-icon.relic .relic-shape.relic-oct {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.item-custom-icon.relic .relic-shape.relic-diamond {
  transform: rotate(45deg);
  width: 15px;
  height: 15px;
}

.item-custom-icon.relic .relic-shape.relic-tri {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 20px;
  height: 18px;
}

.item-custom-icon.relic .relic-shape.relic-teardrop {
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
}

.item-custom-icon.relic .relic-shape.relic-sphere {
  border-radius: 50%;
}

.item-custom-icon.relic .relic-shape.relic-heart {
  background: var(--relic-bg, #e74c3c);
  transform: rotate(-45deg);
  width: 14px;
  height: 14px;
}

.item-custom-icon.relic .relic-shape.relic-heart::before,
.item-custom-icon.relic .relic-shape.relic-heart::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: inherit;
}

.item-custom-icon.relic .relic-shape.relic-heart::before {
  top: -7px;
  left: 0;
}

.item-custom-icon.relic .relic-shape.relic-heart::after {
  left: 7px;
  top: 0;
}

/* =============================================================================
   SIDE PROFILE VIEW OVERRIDES (facing-side)
   ============================================================================= */
.charSprite.facing-side .charBody {
  transform: translateX(-50%) scaleX(0.65) !important;
}

.charSprite.facing-side .charHead {
  transform: translateX(-50%) scaleX(0.85) !important;
  /* Aligned with centered body */
  background: radial-gradient(circle at 36% 28%, #fff2e3 0%, var(--char-skin-start, #ffdcb6) 34%, var(--char-skin-stop, #d8a06c) 72%, var(--char-skin-shadow, #996742) 100%) !important;
}

.charSprite.facing-side .charHead::after {
  left: auto !important;
  right: 1px !important;
  width: 9px !important;
  background:
    radial-gradient(circle at 65% 45%, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 100%, rgba(168, 86, 64, 0.7) 0 1px, transparent 1.6px) !important;
}

.charSprite.facing-side .charFeet::before,
.charSprite.facing-side .charBoots::before {
  left: 4px !important;
  right: auto !important;
  transform: rotate(6deg) skewX(3deg) !important;
}

.charSprite.facing-side .charFeet::after,
.charSprite.facing-side .charBoots::after {
  left: 15px !important;
  right: auto !important;
  transform: rotate(6deg) skewX(3deg) !important;
}

.charSprite.facing-side .charBody::before {
  left: -2px !important;
  z-index: -1 !important;
  /* Back arm placed behind the body */
  transform: rotate(18deg) scale(0.85) !important;
}

.charSprite.facing-side .charBody::after {
  left: 50% !important;
  right: auto !important;
  top: 20px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--char-skin-start, #ffdcb6) !important;
  border: 1.5px solid #1c1511 !important;
  box-shadow: none !important;
  z-index: 4 !important;
  transform: translateX(4px) !important;
}

.charSprite.facing-side .charCape {
  transform: translateX(-70%) scaleX(0.7) !important;
}

.npcSprite.facing-left {
  scale: -1 1 !important;
}

/* =======================================================
   MOUNTS & PETS ORIENTATION OVERRIDES (FACING BACK & SIDE)
   ======================================================= */

/* --- 1. Mounts facing back (Upwards) head overrides --- */
.charSprite.facing-back[data-pet-type="mount"] .charPet.equipped::after {
  display: block !important;
  background: var(--mount-color, #e05c34) !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
}

/* Back View Mount Body (Vertical tail shadow) */
.charSprite.facing-back[data-pet^="monture-"] .charPet.equipped {
  box-shadow:
    /* Vertical tail hanging down */
    0 12px 0 -11px var(--mount-color, #e05c34),
    0 12px 0 -10px #2c1609,
    /* Body shadows */
    inset 0 -4px 6px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

.charSprite.facing-back[data-pet="belier-de-selle"] .charPet.equipped::after {
  background:
    radial-gradient(circle at 1px 4px, #451a03 2.5px, transparent 3.5px),
    radial-gradient(circle at 15px 4px, #451a03 2.5px, transparent 3.5px),
    #f1f5f9 !important;
}

.charSprite.facing-back[data-pet="licorne-sauvage"] .charPet.equipped::after {
  background:
    linear-gradient(90deg, #f472b6 25%, transparent 26%),
    #c084fc !important;
}

.charSprite.facing-back[data-pet="hippocampe-d-ebene"] .charPet.equipped::after {
  background: #1e293b !important;
  box-shadow: none !important;
}

.charSprite.facing-back[data-pet="escargot-de-monte"] .charPet.equipped::after {
  background: #fef08a !important;
}

.charSprite.facing-back[data-pet="monture-en-armure"] .charPet.equipped::after {
  background: #475569 !important;
  box-shadow: none !important;
}

.charSprite.facing-back[data-pet="monture-squelette"] .charPet.equipped::after {
  background: radial-gradient(circle, #022c22 20%, #115e59 100%) !important;
  box-shadow: none !important;
}

/* --- 2. Pets facing back overrides (Hide faces) --- */
.charSprite.facing-back[data-pet-type="pet"] .charPet.equipped::before,
.charSprite.facing-back[data-pet-type="pet"] .charPet.equipped::after {
  display: none !important;
}

/* --- 3. Mounts facing side overrides --- */
.charSprite.facing-side[data-pet-type="mount"] .charPet.equipped {
  width: 44px !important;
  height: 28px !important;
  left: -2px !important;
  transform: none !important;
  border-radius: 12px 6px 6px 12px !important;
}

.charSprite.facing-side[data-pet-type="mount"] .charPet.equipped::before {
  left: 6px !important;
  width: 6px !important;
  box-shadow: 26px 0 0 var(--mount-color, #e05c34), 26px 0 0 #2c1609 !important;
}

.charSprite.facing-side[data-pet-type="mount"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    radial-gradient(circle at 10px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    radial-gradient(circle at 12px 19px, #2c1609 1px, transparent 1.5px),
    linear-gradient(180deg, transparent 60%, #2c1609 61%, #2c1609 85%, transparent 86%),
    var(--mount-color, #e05c34) !important;
}

.charSprite.facing-side[data-pet="belier-de-selle"] .charPet.equipped::before {
  box-shadow: 26px 0 0 #f1f5f9, 26px 0 0 #2c1609 !important;
}

.charSprite.facing-side[data-pet="belier-de-selle"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    radial-gradient(circle at 10px 4px, #451a03 2.5px, transparent 3.5px),
    radial-gradient(circle at 10px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    radial-gradient(circle at 12px 19px, #2c1609 0.8px, transparent 1.2px),
    #f1f5f9 !important;
}

.charSprite.facing-side[data-pet="licorne-sauvage"] .charPet.equipped::before {
  box-shadow: 26px 0 0 #c084fc, 26px 0 0 #2c1609 !important;
}

.charSprite.facing-side[data-pet="licorne-sauvage"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    linear-gradient(0deg, #eab308 0%, #eab308 30%, transparent 31%),
    linear-gradient(90deg, #f472b6 25%, transparent 26%),
    radial-gradient(circle at 10px 8px, #fff 0.5px, #000 1.5px, transparent 2px),
    radial-gradient(circle at 12px 19px, #2c1609 0.8px, transparent 1.2px),
    #c084fc !important;
}

.charSprite.facing-side[data-pet="hippocampe-d-ebene"] .charPet.equipped::before {
  box-shadow: 26px 0 0 #1e293b, 26px 0 0 #2c1609 !important;
}

.charSprite.facing-side[data-pet="hippocampe-d-ebene"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    radial-gradient(circle at 10px 8px, #22d3ee 1.5px, transparent 2.5px),
    radial-gradient(circle at 12px 19px, #22d3ee 0.8px, transparent 1.2px),
    #1e293b !important;
}

.charSprite.facing-side[data-pet="escargot-de-monte"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    radial-gradient(circle at 10px 5px, #000 1.5px, transparent 2px),
    radial-gradient(circle at 10px 5px, #fff 3px, transparent 3.5px),
    #fef08a !important;
}

.charSprite.facing-side[data-pet="monture-en-armure"] .charPet.equipped::before {
  box-shadow: 26px 0 0 #94a3b8, 26px 0 0 #2c1609 !important;
}

.charSprite.facing-side[data-pet="monture-en-armure"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    linear-gradient(180deg, transparent 7px, #e11d48 7px, #e11d48 10px, transparent 10px),
    #475569 !important;
}

.charSprite.facing-side[data-pet="monture-squelette"] .charPet.equipped::before {
  box-shadow: 26px 0 0 #022c22, 26px 0 0 #2c1609 !important;
}

.charSprite.facing-side[data-pet="monture-squelette"] .charPet.equipped::after {
  left: auto !important;
  right: -6px !important;
  transform: none !important;
  background:
    radial-gradient(circle at 10px 8px, #ef4444 1.5px, transparent 2.5px),
    radial-gradient(circle at 12px 14px, #000 1.5px, transparent 2px),
    radial-gradient(circle, #022c22 20%, #115e59 100%) !important;
}

/* --- 4. Pets facing side overrides --- */
.charSprite.facing-side[data-pet-type="pet"] .charPet.equipped {
  top: 66px !important;
  left: -14px !important;
}

.charSprite.facing-side.facing-left[data-pet-type="pet"] .charPet.equipped {
  left: auto !important;
  right: -14px !important;
}

/* =======================================================
   ENTITIES RELIEF & DEPTH ENHANCEMENT SYSTEM
   ======================================================= */

/* Side-profile weapon alignment to prevent floating weapon bug */
.charSprite.facing-side .charWeapon,
.charSprite.facing-side .charStaff,
.charSprite.facing-side .charBow {
  right: 12px !important;
  z-index: 5 !important;
}

/* Layered depth for mounts: casts clean, soft physical shadows onto the player behind it */
.charSprite[data-pet-type="mount"] .charPet.equipped {
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)) !important;
}

/* Layered depth for pets: casts small shadow next to player */
.charSprite[data-pet-type="pet"] .charPet.equipped {
  filter:
    drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.4)) !important;
}

/* --- 5. Mount riding legs side-profile overrides --- */
.charSprite.facing-side[data-pet-type="mount"] .charFeet,
.charSprite.facing-side[data-pet-type="mount"] .charBoots {
  display: block !important;
  left: 50% !important;
  top: 46px !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateX(-50%) !important;
  background: none !important;
  z-index: 5 !important;
}

/* Hide the back leg/boot to avoid flat overlapping paper look */
.charSprite.facing-side[data-pet-type="mount"] .charFeet::after,
.charSprite.facing-side[data-pet-type="mount"] .charBoots::after {
  display: none !important;
}

/* Style the front leg/boot to drop naturally over the side profile mount body */
.charSprite.facing-side[data-pet-type="mount"] .charFeet::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 0px !important;
  width: 10px !important;
  height: 22px !important;
  background: var(--char-skin-start, #d7a378) !important;
  border: 2px solid #1c1511 !important;
  border-radius: 4px !important;
  transform: rotate(5deg) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

.charSprite.facing-side[data-pet-type="mount"] .charBoots::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 4px !important;
  width: 12px !important;
  height: 18px !important;
  background: inherit !important;
  border: 2px solid #1c1511 !important;
  border-radius: 4px !important;
  transform: rotate(5deg) !important;
}

/* --- 6. Mount side-profile background details for thickness and 3D volume --- */
.charSprite.facing-side[data-pet^="monture-"] .charPet.equipped {
  background:
    /* Brown leather seat */
    linear-gradient(180deg, transparent 4px, #451a03 4px, #451a03 10px, transparent 10px),
    /* Red saddle blanket */
    linear-gradient(180deg, transparent 6px, #b91c1c 6px, #b91c1c 14px, transparent 14px),
    /* Vertical harness strap */
    linear-gradient(90deg, transparent 18px, #78350f 18px, #78350f 24px, transparent 24px),
    /* Zebra Stripes */
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 4px,
      transparent 4px,
      transparent 10px),
    /* Base mount color */
    linear-gradient(180deg, var(--mount-color, #e05c34), var(--mount-color, #e05c34)) !important;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0 !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow:
    /* Tail Tip */
    -22px 6px 0 -11px var(--mount-color, #e05c34),
    -22px 6px 0 -10px #2c1609,
    /* Tail Stem */
    -12px 6px 0 -11px var(--mount-color, #e05c34),
    -12px 6px 0 -10px #2c1609,
    /* Body shadows */
    inset 0 -4px 6px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Side View Neck & Head (Bulging eye + zebra stripes) */
.charSprite.facing-side[data-pet^="monture-"] .charPet.equipped::after {
  content: "" !important;
  position: absolute !important;
  top: -22px !important;
  /* height offset */
  left: auto !important;
  right: -10px !important;
  width: 22px !important;
  height: 28px !important;
  transform: none !important;
  background:
    /* Pupil */
    radial-gradient(circle at 8px 8px, #000 1.5px, transparent 2.2px),
    /* Eyeball (Bulging white sphere with outline) */
    radial-gradient(circle at 8px 8px, #fff 4.5px, #2c1609 5.5px, transparent 6px),
    /* Nostril */
    radial-gradient(circle at 16px 20px, #2c1609 1px, transparent 1.5px),
    /* Mouth */
    linear-gradient(180deg, transparent 21px, #2c1609 21px, #2c1609 23px, transparent 23px),
    /* Zebra Stripes on neck */
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 3px,
      transparent 3px,
      transparent 8px),
    /* Head/Neck Body base */
    linear-gradient(90deg, transparent 4px, #2c1609 4px, var(--mount-color, #e05c34) 6px, var(--mount-color, #e05c34) 18px, #2c1609 18px, transparent 20px) !important;
  background-position:
    0 0, 0 0, 0 0, 0 0,
    6px 8px,
    /* position for neck stripes */
    0 0 !important;
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    12px 20px,
    /* size for neck stripes */
    100% 100% !important;
  background-repeat: no-repeat !important;
  border: none !important;
  /* remove default border to use custom gradient borders */
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

.charSprite.facing-side[data-pet="belier-de-selle"] .charPet.equipped {
  background:
    /* Brown leather seat */
    linear-gradient(180deg, transparent 4px, #451a03 4px, #451a03 10px, transparent 10px),
    /* Girth strap */
    linear-gradient(90deg, transparent 18px, #78350f 18px, #78350f 24px, transparent 24px),
    radial-gradient(circle, #f8fafc 40%, #e2e8f0 100%) !important;
}

.charSprite.facing-side[data-pet="licorne-sauvage"] .charPet.equipped {
  background:
    /* Gold saddle */
    linear-gradient(180deg, transparent 4px, #eab308 4px, #eab308 10px, transparent 10px),
    /* Girth strap */
    linear-gradient(90deg, transparent 18px, #854d0e 18px, #854d0e 24px, transparent 24px),
    #c084fc !important;
}

.charSprite.facing-side[data-pet="hippocampe-d-ebene"] .charPet.equipped {
  background:
    /* Glowing cyan dorsal fin */
    linear-gradient(180deg, #22d3ee 3px, transparent 4px),
    #1e293b !important;
}

.charSprite.facing-side[data-pet="escargot-de-monte"] .charPet.equipped {
  background:
    /* Saddle strap around shell */
    linear-gradient(90deg, transparent 18px, #451a03 18px, #451a03 24px, transparent 24px),
    radial-gradient(circle, #78350f 45%, #451a03 100%) !important;
}

.charSprite.facing-side[data-pet="monture-en-armure"] .charPet.equipped {
  background:
    /* Dark saddle */
    linear-gradient(180deg, transparent 4px, #1e293b 4px, #1e293b 10px, transparent 10px),
    /* Armor plates */
    linear-gradient(90deg, transparent 14px, #475569 14px, #475569 16px, transparent 16px),
    linear-gradient(90deg, transparent 28px, #475569 28px, #475569 30px, transparent 30px),
    #94a3b8 !important;
}

.charSprite.facing-side[data-pet="monture-squelette"] .charPet.equipped {
  background:
    /* Skeleton rib cage lines */
    repeating-linear-gradient(90deg, transparent, transparent 6px, #f1f5f9 6px, #f1f5f9 8px),
    radial-gradient(circle, #022c22 20%, #115e59 100%) !important;
}

/* =======================================================
   QUALITY-SPECIFIC SHADOW ADAPTATIONS (MEDIUM & LOW)
   ======================================================= */

/* --- Medium Quality (Simplified Shadows) --- */
body.quality-medium .charSprite,
body.quality-medium .npcSprite {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)) !important;
}

body.quality-medium .monsterSprite {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)) !important;
}

body.quality-medium .charPet.equipped {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* --- Low Quality (No Shadows) --- */
body.quality-low .charSprite,
body.quality-low .npcSprite,
body.quality-low .monsterSprite {
  filter: none !important;
}

body.quality-low .charSprite::after,
body.quality-low .npcSprite::after,
body.quality-low .monsterShadow {
  display: none !important;
}

body.quality-low .charPet.equipped {
  filter: none !important;
  box-shadow: none !important;
}

/* =======================================================
   CLASS DISTINCTIVENESS VISUALS SYSTEM (NO WEAPONS)
   ======================================================= */

/* --- 1. Remove weapons from sprite visuals --- */
.charSprite .charWeapon,
.charSprite .charStaff,
.charSprite .charBow,
.charSprite .charShovel,
.charSprite .charAxe {
  display: none !important;
}

/* --- 2. Mage: Long wizard beard --- */
.charSprite.class-mage .charHead::after {
  left: 4px !important;
  top: 9px !important;
  width: 17px !important;
  height: 18px !important;
  background:
    /* eyes */
    radial-gradient(circle at 4.5px 3px, #2e1b12 0 1px, transparent 1.5px),
    radial-gradient(circle at 12.5px 3px, #2e1b12 0 1px, transparent 1.5px),
    /* beard */
    linear-gradient(180deg, transparent 6px, #f8fafc 6px, #cbd5e1 100%) !important;
  border-radius: 0 0 6px 6px !important;
  border: 1.5px solid #1c1511 !important;
  border-top: none !important;
  z-index: 10 !important;
}

/* Hide beard from behind */
.charSprite.facing-back.class-mage .charHead::after {
  display: none !important;
}

/* Side view beard */
.charSprite.facing-side.class-mage .charHead::after {
  left: auto !important;
  right: 4px !important;
  width: 10px !important;
  height: 16px !important;
  background:
    /* one eye */
    radial-gradient(circle at 6px 3px, #2e1b12 0 1px, transparent 1.5px),
    /* beard profile */
    linear-gradient(180deg, transparent 6px, #f8fafc 6px, #cbd5e1 100%) !important;
  border-radius: 0 0 4px 4px !important;
  border: 1.5px solid #1c1511 !important;
  border-top: none !important;
}

/* --- 3. Archer: Forest hood & quiver --- */
/* --- 3. Archer: Forest Ranger look --- */
.charSprite.class-archer .charHead {
  background: radial-gradient(circle at 36% 28%, #fff2e3 0%, var(--char-skin-start, #ffdcb6) 34%, var(--char-skin-stop, #d8a06c) 72%, var(--char-skin-shadow, #996742) 100%) !important;
  border: 2px solid #1c1511 !important;
}

/* Archer Ranger Headband & Centered Hair */
.charSprite.class-archer[data-hair-style="ponytail"] .charHead::before {
  border-radius: 8px 8px 2px 2px !important;
  height: 12px !important;
  top: -2px !important;
  left: 1px !important;
  right: 1px !important;
  background:
    /* Green Ranger Headband across forehead */
    linear-gradient(180deg, #15803d 0%, #15803d 4px, var(--char-hair-color-start, #d97706) 4px, var(--char-hair-color-stop, #92400e) 100%) !important;
  box-shadow:
    0 -5px 0 3px var(--char-hair-color-start, #d97706),
    0 -9px 0 1px var(--char-hair-color-stop, #92400e) !important;
}

.class-archer.charSprite::before {
  content: "" !important;
  position: absolute !important;
  width: 12px !important;
  height: 28px !important;
  left: 12px !important;
  top: 32px !important;
  background:
    /* Arrow fletchings */
    linear-gradient(45deg, transparent 40%, #d97706 40%, #d97706 45%, transparent 45%),
    linear-gradient(45deg, transparent 50%, #d97706 50%, #d97706 55%, transparent 55%),
    /* Quiver body */
    #78350f !important;
  border: 1.5px solid #1c1511 !important;
  border-radius: 3px !important;
  transform: rotate(-15deg) !important;
  z-index: 1 !important;
}

.charSprite.class-archer .charBody {
  background: linear-gradient(180deg, var(--char-color, #15803d) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
}

/* --- 4. Necromancer: Bone Skull head --- */
.charSprite.class-necromancien .charHead {
  background:
    /* Nose cavity */
    radial-gradient(circle at 50% 65%, #0f172a 1.5px, transparent 2px),
    /* Skull bone */
    radial-gradient(circle at 35% 35%, #ffffff 30%, #e2e8f0 100%) !important;
  border: 2px solid #0f172a !important;
}

.charSprite.class-necromancien .charHead::after {
  left: 4px !important;
  top: 6px !important;
  width: 17px !important;
  height: 12px !important;
  background:
    /* Hollow sockets */
    radial-gradient(circle at 4.5px 4px, #0f172a 2.5px, transparent 3px),
    radial-gradient(circle at 12.5px 4px, #0f172a 2.5px, transparent 3px),
    /* Teeth */
    linear-gradient(90deg, transparent 2px, #0f172a 2px, #0f172a 3px, transparent 3px, transparent 6px, #0f172a 6px, #0f172a 7px, transparent 7px, transparent 10px, #0f172a 10px, #0f172a 11px, transparent 11px) !important;
  background-size: 100% 100% !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

/* Hide skull face from behind */
.charSprite.facing-back.class-necromancien .charHead::after {
  display: none !important;
}

/* Side view skull */
.charSprite.facing-side.class-necromancien .charHead::after {
  left: auto !important;
  right: 2px !important;
  width: 9px !important;
  background:
    /* Single hollow socket */
    radial-gradient(circle at 4px 4px, #0f172a 2.5px, transparent 3px) !important;
}

/* --- 5. Warrior: Heavy muscular build (Grosse corpulence) --- */
.charSprite.class-guerrier .charBody {
  width: 38px !important;
  height: 38px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--char-color, #b91c1c) 20%, rgba(0, 0, 0, 0.3) 80%) !important;
}

.charSprite.class-guerrier .charBody::before {
  width: 11px !important;
  height: 24px !important;
  left: -3px !important;
  transform: rotate(8deg) !important;
}

.charSprite.class-guerrier .charBody::after {
  width: 11px !important;
  height: 24px !important;
  right: -3px !important;
  transform: rotate(-8deg) !important;
}

/* Side profile warrior corpulence adjustment */
.charSprite.facing-side.class-guerrier .charBody {
  transform: translateX(-50%) scaleX(0.65) !important;
}


/* Warrior side profile feet overrides (adjusts for wider 36px base) */
.charSprite.facing-side.class-guerrier .charFeet::before,
.charSprite.facing-side.class-guerrier .charBoots::before {
  left: 5px !important;
  right: auto !important;
  transform: rotate(6deg) skewX(3deg) !important;
}

.charSprite.facing-side.class-guerrier .charFeet::after,
.charSprite.facing-side.class-guerrier .charBoots::after {
  left: 20px !important;
  right: auto !important;
  transform: rotate(6deg) skewX(3deg) !important;
}

/* Warrior feet and boots adjustments for heavy corpulence */
.charSprite.class-guerrier .charFeet,
.charSprite.class-guerrier .charBoots {
  width: 36px !important;
  top: 69px !important;
  z-index: 3 !important;
}

/* =======================================================
   HAIR AND BEARD STYLE OVERRIDES SYSTEM
   ======================================================= */

/* --- Hair Styles --- */
/* Classic / Default Style */
.charSprite[data-hair-style="classic"] .charHead::before {
  border-radius: 50% 50% 30% 30% !important;
  height: 11px !important;
  top: -2px !important;
  left: 1px !important;
  right: 1px !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, var(--char-hair-color-start, #704326) 0%, var(--char-hair-color-stop, #392115) 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Spiky Style */
.charSprite[data-hair-style="spiky"] .charHead::before {
  border-radius: 4px 4px 0 0 !important;
  clip-path: polygon(0% 100%, 15% 15%, 35% 85%, 50% 0%, 65% 85%, 85% 15%, 100% 100%) !important;
  height: 18px !important;
  top: -9px !important;
  left: 1px !important;
  right: 1px !important;
  background:
    linear-gradient(180deg, var(--char-hair-color-start, #f59e0b) 0%, var(--char-hair-color-stop, #b45309) 100%) !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Punk / Mohawk Style (Real Tall Crest) */
.charSprite[data-hair-style="punk"] .charHead::before,
.charSprite[data-hair-style="mohawk"] .charHead::before {
  border-radius: 4px 4px 0 0 !important;
  clip-path: polygon(32% 100%, 36% 40%, 42% 5%, 50% 0%, 58% 5%, 64% 40%, 68% 100%) !important;
  height: 22px !important;
  top: -14px !important;
  left: 0px !important;
  right: 0px !important;
  background:
    linear-gradient(180deg, var(--char-hair-color-start, #f59e0b) 0%, var(--char-hair-color-stop, #b45309) 100%) !important;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Long Style */
.charSprite[data-hair-style="long"] .charHead::before {
  border-radius: 12px 12px 4px 4px !important;
  height: 20px !important;
  top: -3px !important;
  left: -1px !important;
  right: -1px !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, var(--char-hair-color-start, #704326) 0%, var(--char-hair-color-stop, #392115) 100%) !important;
  box-shadow:
    -3px 8px 0 -1px var(--char-hair-color-stop, #392115),
    3px 8px 0 -1px var(--char-hair-color-stop, #392115) !important;
}

/* Bald Style */
.charSprite[data-hair-style="bald"] .charHead::before {
  display: none !important;
}

/* --- Beard Styles (Mage specific but generic styling) --- */
/* Short Beard style */
.charSprite[data-beard-style="short"] .charHead::after {
  left: 4px !important;
  top: 9px !important;
  width: 17px !important;
  height: 12px !important;
  background:
    /* eyes */
    radial-gradient(circle at 4.5px 3px, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12.5px 3px, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    /* short beard shadow */
    linear-gradient(180deg, transparent 4px, var(--char-beard-color, #cbd5e1) 4px) !important;
  border-radius: 0 0 4px 4px !important;
  border: 1.5px solid #1c1511 !important;
  border-top: none !important;
  z-index: 10 !important;
}

/* No Beard style override */
.charSprite[data-beard-style="none"] .charHead::after {
  left: 7px !important;
  top: 9px !important;
  width: 11px !important;
  height: 6px !important;
  background:
    radial-gradient(circle at 25% 45%, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 45%, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 100%, rgba(168, 86, 64, 0.7) 0 1px, transparent 1.6px) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 4 !important;
}

/* Adjust Mage's default beard to support custom colors */
.charSprite.class-mage:not([data-beard-style="none"]):not([data-beard-style="short"]) .charHead::after,
.charSprite.class-mage[data-beard-style="long"] .charHead::after {
  background:
    /* eyes */
    radial-gradient(circle at 4.5px 3px, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12.5px 3px, var(--char-eyes-color, #2e1b12) 0 1px, transparent 1.5px),
    /* beard */
    linear-gradient(180deg, transparent 6px, var(--char-beard-color, #f8fafc) 6px, var(--char-beard-color-dark, #cbd5e1) 100%) !important;
}

/* Saiyan Style */
.charSprite[data-hair-style="saiyan"] .charHead::before {
  border-radius: 4px 4px 0 0 !important;
  clip-path: polygon(0% 100%, 10% 40%, 25% 10%, 40% 70%, 55% 0%, 75% 60%, 90% 15%, 100% 100%) !important;
  height: 22px !important;
  top: -12px !important;
  left: -2px !important;
  right: -2px !important;
  background:
    linear-gradient(180deg, var(--char-hair-color-start, #f1c40f) 0%, var(--char-hair-color-stop, #d35400) 100%) !important;
}

/* Afro Style */
.charSprite[data-hair-style="afro"] .charHead::before {
  border-radius: 50% 50% 45% 45% !important;
  height: 20px !important;
  top: -10px !important;
  left: -3px !important;
  right: -3px !important;
  background:
    radial-gradient(circle at 50% 30%, var(--char-hair-color-start, #362215) 50%, var(--char-hair-color-stop, #1a0f08) 100%) !important;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Dreadlocks / Braids Style - Real Long Dreadlocks Strands */
.charSprite[data-hair-style="dreads"] .charHead::before {
  border-radius: 12px 12px 0 0 !important;
  height: 14px !important;
  top: -3px !important;
  left: 1px !important;
  right: 1px !important;
  background:
    repeating-linear-gradient(90deg,
      var(--char-hair-color-start, #64748b) 0px,
      var(--char-hair-color-start, #64748b) 3px,
      var(--char-hair-color-stop, #334155) 3px,
      var(--char-hair-color-stop, #334155) 5px) !important;
  box-shadow:
    -5px 6px 0 1px var(--char-hair-color-stop, #334155),
    -6px 14px 0 0px var(--char-hair-color-start, #64748b),
    5px 6px 0 1px var(--char-hair-color-stop, #334155),
    6px 14px 0 0px var(--char-hair-color-start, #64748b) !important;
}

/* Princess Buns Style */
.charSprite[data-hair-style="buns"] .charHead::before {
  border-radius: 50% 50% 40% 40% !important;
  height: 10px !important;
  top: -1px !important;
  left: 2px !important;
  right: 2px !important;
  box-shadow:
    -5px -1px 0 3px var(--char-hair-color-start, #704326),
    5px -1px 0 3px var(--char-hair-color-start, #704326) !important;
}

/* Ponytail Style (Centered) */
.charSprite[data-hair-style="ponytail"] .charHead::before {
  border-radius: 8px 8px 2px 2px !important;
  height: 11px !important;
  top: -2px !important;
  left: 1px !important;
  right: 1px !important;
  background:
    linear-gradient(180deg, var(--char-hair-color-start, #704326) 0%, var(--char-hair-color-stop, #392115) 100%) !important;
  box-shadow:
    0 -5px 0 3px var(--char-hair-color-start, #704326),
    0 -9px 0 1px var(--char-hair-color-stop, #392115) !important;
}

/* Topknot Style */
.charSprite[data-hair-style="topknot"] .charHead::before {
  border-radius: 6px 6px 40% 40% !important;
  height: 10px !important;
  top: -1px !important;
  left: 2px !important;
  right: 2px !important;
  box-shadow:
    0 -5px 0 2px var(--char-hair-color-start, #704326) !important;
}

/* =======================================================
   BASE RENDER & CUSTOMIZATIONS FOR SHOVELS AND AXES
   ======================================================= */

/* --- Shovel Base Style --- */
body .charSprite .charShovel.equipped {
  display: block !important;
  position: absolute;
  width: 4px;
  height: 44px;
  right: -1px;
  top: 30px;
  background: linear-gradient(90deg, #8d6e63, #5d4037);
  border: 1px solid #1c1511;
  border-radius: 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 90%;
  animation: weaponSway 4s ease-in-out infinite;
  z-index: 5;
}

body .charSprite .charShovel.equipped::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 16px;
  top: -12px;
  left: -6px;
  background: var(--shovel-blade-color, linear-gradient(135deg, #dcdde1 0%, #718093 100%));
  border: 1.5px solid #1c1511;
  clip-path: polygon(50% 100%, 100% 50%, 100% 0%, 0% 0%, 0% 50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body .charSprite .charShovel.equipped::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 8px;
  bottom: -6px;
  left: -5px;
  border: 2px solid #5d4037;
  border-radius: 3px;
  background: #1c1511;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
}

/* --- Axe Base Style --- */
body .charSprite .charAxe.equipped {
  display: block !important;
  position: absolute;
  width: 4px;
  height: 44px;
  right: -1px;
  top: 30px;
  background: linear-gradient(90deg, #8d6e63, #5d4037);
  border: 1px solid #1c1511;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 90%;
  animation: weaponSway 3.8s ease-in-out infinite;
  z-index: 5;
}

body .charSprite .charAxe.equipped::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 20px;
  top: -4px;
  left: 1px;
  background: var(--axe-blade-color, linear-gradient(90deg, #718093 0%, #dcdde1 50%, #ffffff 80%, #2f3640 100%));
  border: 1.5px solid #1c1511;
  border-left: none;
  border-radius: 0 100% 100% 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body .charSprite .charAxe.equipped::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 3px;
  left: -7px;
  background: #718093;
  border: 1.5px solid #1c1511;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

/* --- Biome Customizations: Ice / Frost --- */
.charSprite[data-weapon*="gel"] .charWeapon.equipped,
.charSprite[data-weapon*="givre"] .charWeapon.equipped,
.charSprite[data-shovel*="gel"] .charShovel.equipped,
.charSprite[data-shovel*="givre"] .charShovel.equipped,
.charSprite[data-axe*="gel"] .charAxe.equipped,
.charSprite[data-axe*="givre"] .charAxe.equipped {
  --shovel-blade-color: linear-gradient(135deg, #e0f7fa 0%, #80deea 30%, #26c6da 70%, #0097a7 100%);
  --axe-blade-color: linear-gradient(90deg, #e0f7fa 0%, #80deea 30%, #26c6da 70%, #0097a7 100%);
  background: linear-gradient(90deg, #e0f7fa, #80deea) !important;
  box-shadow: 0 0 10px rgba(0, 151, 167, 0.8) !important;
}

/* --- Biome Customizations: Fire / Magma / Lava --- */
.charSprite[data-weapon*="lave"] .charWeapon.equipped,
.charSprite[data-weapon*="feu"] .charWeapon.equipped,
.charSprite[data-weapon*="magma"] .charWeapon.equipped,
.charSprite[data-staff*="lave"] .charStaff.equipped,
.charSprite[data-staff*="feu"] .charStaff.equipped,
.charSprite[data-axe*="lave"] .charAxe.equipped,
.charSprite[data-axe*="enflammee"] .charAxe.equipped {
  --axe-blade-color: linear-gradient(90deg, #ff7675 0%, #ff7675 30%, #d63031 70%, #2d3436 100%);
  --staff-head-color: radial-gradient(circle, #ff7675 20%, #ff0000 70%);
  background: linear-gradient(90deg, #d63031, #2d3436) !important;
  box-shadow: 0 0 10px rgba(235, 94, 40, 0.9) !important;
}

/* --- Biome Customizations: Celestial / Gold --- */
.charSprite[data-weapon*="celeste"] .charWeapon.equipped,
.charSprite[data-weapon*="foudroyant"] .charWeapon.equipped,
.charSprite[data-bow*="celeste"] .charBow.equipped,
.charSprite[data-shovel*="celeste"] .charShovel.equipped,
.charSprite[data-axe*="celeste"] .charAxe.equipped {
  --shovel-blade-color: linear-gradient(135deg, #ffeaa7 0%, #ffe066 30%, #f1c40f 70%, #ffd700 100%);
  --axe-blade-color: linear-gradient(90deg, #ffeaa7 0%, #ffe066 30%, #f1c40f 70%, #ffd700 100%);
  --bow-limb-color: #ffd700;
  background: linear-gradient(90deg, #ffe066, #b8860b) !important;
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.8) !important;
}

/* --- Biome Customizations: Dark / Obsidian / Bone / Cemetery --- */
.charSprite[data-weapon*="obsidian"] .charWeapon.equipped,
.charSprite[data-weapon*="tenebres"] .charWeapon.equipped,
.charSprite[data-weapon*="mort"] .charWeapon.equipped,
.charSprite[data-weapon*="fosse"] .charWeapon.equipped,
.charSprite[data-shovel*="os"] .charShovel.equipped {
  --shovel-blade-color: linear-gradient(135deg, #6c5ce7 0%, #2d3436 70%, #000000 100%);
  background: #cbd5e1 !important;
  box-shadow: 0 0 8px rgba(108, 92, 231, 0.6) !important;
}


/* ==========================================================================
   DYNAMIC STYLING SYSTEM FOR RINGS, AMULETS, AND BELTS
   ========================================================================== */

.charSprite {
  --ring-metal-color: #ffd700;
  --ring-glow-color: rgba(255, 215, 0, 0.35);
  --ring-gem-color: #ff3366;
  --ring-gem-glow: rgba(255, 51, 102, 0.8);

  --amulet-chain-color: #ffd700;
  --amulet-gem-color: #ff3366;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8);

  --belt-border-color: #624310;
  --belt-bg: linear-gradient(180deg, #785023, #462812);
  --belt-buckle-color: #ffd700;
  --belt-buckle-border: #b7950b;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4);
}


/* Amulette Cornue */
.charSprite[data-ring-left="amulette-cornue"],
.charSprite[data-ring-right="amulette-cornue"],
.charSprite[data-amulet="amulette-cornue"],
.charSprite[data-belt="amulette-cornue"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette Céleste */
.charSprite[data-ring-left="amulette-celeste"],
.charSprite[data-ring-right="amulette-celeste"],
.charSprite[data-amulet="amulette-celeste"],
.charSprite[data-belt="amulette-celeste"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette Magmatique */
.charSprite[data-ring-left="amulette-magmatique"],
.charSprite[data-ring-right="amulette-magmatique"],
.charSprite[data-amulet="amulette-magmatique"],
.charSprite[data-belt="amulette-magmatique"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Amulette Préhistorique */
.charSprite[data-ring-left="amulette-prehistorique"],
.charSprite[data-ring-right="amulette-prehistorique"],
.charSprite[data-amulet="amulette-prehistorique"],
.charSprite[data-belt="amulette-prehistorique"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette Scintillante */
.charSprite[data-ring-left="amulette-scintillante"],
.charSprite[data-ring-right="amulette-scintillante"],
.charSprite[data-amulet="amulette-scintillante"],
.charSprite[data-belt="amulette-scintillante"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette Squelettique */
.charSprite[data-ring-left="amulette-squelettique"],
.charSprite[data-ring-right="amulette-squelettique"],
.charSprite[data-amulet="amulette-squelettique"],
.charSprite[data-belt="amulette-squelettique"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette d'Aigle des sommets */
.charSprite[data-ring-left="amulette-daigle-des-sommets"],
.charSprite[data-ring-right="amulette-daigle-des-sommets"],
.charSprite[data-amulet="amulette-daigle-des-sommets"],
.charSprite[data-belt="amulette-daigle-des-sommets"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette d'Araignée sylvestre */
.charSprite[data-ring-left="amulette-daraignee-sylvestre"],
.charSprite[data-ring-right="amulette-daraignee-sylvestre"],
.charSprite[data-amulet="amulette-daraignee-sylvestre"],
.charSprite[data-belt="amulette-daraignee-sylvestre"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette d'Ent jeune */
.charSprite[data-ring-left="amulette-dent-jeune"],
.charSprite[data-ring-right="amulette-dent-jeune"],
.charSprite[data-amulet="amulette-dent-jeune"],
.charSprite[data-belt="amulette-dent-jeune"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette d'Ours des glaces */
.charSprite[data-ring-left="amulette-dours-des-glaces"],
.charSprite[data-ring-right="amulette-dours-des-glaces"],
.charSprite[data-amulet="amulette-dours-des-glaces"],
.charSprite[data-belt="amulette-dours-des-glaces"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette d'Éther */
.charSprite[data-ring-left="amulette-dether"],
.charSprite[data-ring-right="amulette-dether"],
.charSprite[data-amulet="amulette-dether"],
.charSprite[data-belt="amulette-dether"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette de Bouc hargneux */
.charSprite[data-ring-left="amulette-de-bouc-hargneux"],
.charSprite[data-ring-right="amulette-de-bouc-hargneux"],
.charSprite[data-amulet="amulette-de-bouc-hargneux"],
.charSprite[data-belt="amulette-de-bouc-hargneux"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Brochet mutant */
.charSprite[data-ring-left="amulette-de-brochet-mutant"],
.charSprite[data-ring-right="amulette-de-brochet-mutant"],
.charSprite[data-amulet="amulette-de-brochet-mutant"],
.charSprite[data-belt="amulette-de-brochet-mutant"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Brumelin */
.charSprite[data-ring-left="amulette-de-brumelin"],
.charSprite[data-ring-right="amulette-de-brumelin"],
.charSprite[data-amulet="amulette-de-brumelin"],
.charSprite[data-belt="amulette-de-brumelin"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Cendre */
.charSprite[data-ring-left="amulette-de-cendre"],
.charSprite[data-ring-right="amulette-de-cendre"],
.charSprite[data-amulet="amulette-de-cendre"],
.charSprite[data-belt="amulette-de-cendre"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Amulette de Cobra */
.charSprite[data-ring-left="amulette-de-cobra"],
.charSprite[data-ring-right="amulette-de-cobra"],
.charSprite[data-amulet="amulette-de-cobra"],
.charSprite[data-belt="amulette-de-cobra"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Cobra des dunes */
.charSprite[data-ring-left="amulette-de-cobra-des-dunes"],
.charSprite[data-ring-right="amulette-de-cobra-des-dunes"],
.charSprite[data-amulet="amulette-de-cobra-des-dunes"],
.charSprite[data-belt="amulette-de-cobra-des-dunes"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Corbeau des plaines */
.charSprite[data-ring-left="amulette-de-corbeau-des-plaines"],
.charSprite[data-ring-right="amulette-de-corbeau-des-plaines"],
.charSprite[data-amulet="amulette-de-corbeau-des-plaines"],
.charSprite[data-belt="amulette-de-corbeau-des-plaines"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Crabe des plaines */
.charSprite[data-ring-left="amulette-de-crabe-des-plaines"],
.charSprite[data-ring-right="amulette-de-crabe-des-plaines"],
.charSprite[data-amulet="amulette-de-crabe-des-plaines"],
.charSprite[data-belt="amulette-de-crabe-des-plaines"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Crabe des roseaux */
.charSprite[data-ring-left="amulette-de-crabe-des-roseaux"],
.charSprite[data-ring-right="amulette-de-crabe-des-roseaux"],
.charSprite[data-amulet="amulette-de-crabe-des-roseaux"],
.charSprite[data-belt="amulette-de-crabe-des-roseaux"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Feu */
.charSprite[data-ring-left="amulette-de-feu"],
.charSprite[data-ring-right="amulette-de-feu"],
.charSprite[data-amulet="amulette-de-feu"],
.charSprite[data-belt="amulette-de-feu"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Amulette de Fossoyeur */
.charSprite[data-ring-left="amulette-de-fossoyeur"],
.charSprite[data-ring-right="amulette-de-fossoyeur"],
.charSprite[data-amulet="amulette-de-fossoyeur"],
.charSprite[data-belt="amulette-de-fossoyeur"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette de Foudre */
.charSprite[data-ring-left="amulette-de-foudre"],
.charSprite[data-ring-right="amulette-de-foudre"],
.charSprite[data-amulet="amulette-de-foudre"],
.charSprite[data-belt="amulette-de-foudre"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette de Golem de roc */
.charSprite[data-ring-left="amulette-de-golem-de-roc"],
.charSprite[data-ring-right="amulette-de-golem-de-roc"],
.charSprite[data-amulet="amulette-de-golem-de-roc"],
.charSprite[data-belt="amulette-de-golem-de-roc"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Golem de sable */
.charSprite[data-ring-left="amulette-de-golem-de-sable"],
.charSprite[data-ring-right="amulette-de-golem-de-sable"],
.charSprite[data-amulet="amulette-de-golem-de-sable"],
.charSprite[data-belt="amulette-de-golem-de-sable"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Gorille */
.charSprite[data-ring-left="amulette-de-gorille"],
.charSprite[data-ring-right="amulette-de-gorille"],
.charSprite[data-amulet="amulette-de-gorille"],
.charSprite[data-belt="amulette-de-gorille"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Harpie */
.charSprite[data-ring-left="amulette-de-harpie"],
.charSprite[data-ring-right="amulette-de-harpie"],
.charSprite[data-amulet="amulette-de-harpie"],
.charSprite[data-belt="amulette-de-harpie"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Jaguar */
.charSprite[data-ring-left="amulette-de-jaguar"],
.charSprite[data-ring-right="amulette-de-jaguar"],
.charSprite[data-amulet="amulette-de-jaguar"],
.charSprite[data-belt="amulette-de-jaguar"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Liche */
.charSprite[data-ring-left="amulette-de-liche"],
.charSprite[data-ring-right="amulette-de-liche"],
.charSprite[data-amulet="amulette-de-liche"],
.charSprite[data-belt="amulette-de-liche"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette de Lièvre givré */
.charSprite[data-ring-left="amulette-de-lievre-givre"],
.charSprite[data-ring-right="amulette-de-lievre-givre"],
.charSprite[data-amulet="amulette-de-lievre-givre"],
.charSprite[data-belt="amulette-de-lievre-givre"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Loup blanc */
.charSprite[data-ring-left="amulette-de-loup-blanc"],
.charSprite[data-ring-right="amulette-de-loup-blanc"],
.charSprite[data-amulet="amulette-de-loup-blanc"],
.charSprite[data-belt="amulette-de-loup-blanc"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Loup des bois */
.charSprite[data-ring-left="amulette-de-loup-des-bois"],
.charSprite[data-ring-right="amulette-de-loup-des-bois"],
.charSprite[data-amulet="amulette-de-loup-des-bois"],
.charSprite[data-belt="amulette-de-loup-des-bois"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Loup maigre */
.charSprite[data-ring-left="amulette-de-loup-maigre"],
.charSprite[data-ring-right="amulette-de-loup-maigre"],
.charSprite[data-amulet="amulette-de-loup-maigre"],
.charSprite[data-belt="amulette-de-loup-maigre"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Lutin */
.charSprite[data-ring-left="amulette-de-lutin"],
.charSprite[data-ring-right="amulette-de-lutin"],
.charSprite[data-amulet="amulette-de-lutin"],
.charSprite[data-belt="amulette-de-lutin"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Magma */
.charSprite[data-ring-left="amulette-de-magma"],
.charSprite[data-ring-right="amulette-de-magma"],
.charSprite[data-amulet="amulette-de-magma"],
.charSprite[data-belt="amulette-de-magma"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Amulette de Marmouset */
.charSprite[data-ring-left="amulette-de-marmouset"],
.charSprite[data-ring-right="amulette-de-marmouset"],
.charSprite[data-amulet="amulette-de-marmouset"],
.charSprite[data-belt="amulette-de-marmouset"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Minotocure */
.charSprite[data-ring-left="amulette-de-minotocure"],
.charSprite[data-ring-right="amulette-de-minotocure"],
.charSprite[data-amulet="amulette-de-minotocure"],
.charSprite[data-belt="amulette-de-minotocure"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Minotor */
.charSprite[data-ring-left="amulette-de-minotor"],
.charSprite[data-ring-right="amulette-de-minotor"],
.charSprite[data-amulet="amulette-de-minotor"],
.charSprite[data-belt="amulette-de-minotor"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Neige Hargneuse */
.charSprite[data-ring-left="amulette-de-neige-hargneuse"],
.charSprite[data-ring-right="amulette-de-neige-hargneuse"],
.charSprite[data-amulet="amulette-de-neige-hargneuse"],
.charSprite[data-belt="amulette-de-neige-hargneuse"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Pillard du sable */
.charSprite[data-ring-left="amulette-de-pillard-du-sable"],
.charSprite[data-ring-right="amulette-de-pillard-du-sable"],
.charSprite[data-amulet="amulette-de-pillard-du-sable"],
.charSprite[data-belt="amulette-de-pillard-du-sable"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Ptérodactyle */
.charSprite[data-ring-left="amulette-de-pterodactyle"],
.charSprite[data-ring-right="amulette-de-pterodactyle"],
.charSprite[data-amulet="amulette-de-pterodactyle"],
.charSprite[data-belt="amulette-de-pterodactyle"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Racineau */
.charSprite[data-ring-left="amulette-de-racineau"],
.charSprite[data-ring-right="amulette-de-racineau"],
.charSprite[data-amulet="amulette-de-racineau"],
.charSprite[data-belt="amulette-de-racineau"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Raptor */
.charSprite[data-ring-left="amulette-de-raptor"],
.charSprite[data-ring-right="amulette-de-raptor"],
.charSprite[data-amulet="amulette-de-raptor"],
.charSprite[data-belt="amulette-de-raptor"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Renne */
.charSprite[data-ring-left="amulette-de-renne"],
.charSprite[data-ring-right="amulette-de-renne"],
.charSprite[data-amulet="amulette-de-renne"],
.charSprite[data-belt="amulette-de-renne"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Sanglier */
.charSprite[data-ring-left="amulette-de-sanglier"],
.charSprite[data-ring-right="amulette-de-sanglier"],
.charSprite[data-amulet="amulette-de-sanglier"],
.charSprite[data-belt="amulette-de-sanglier"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de Sanglier des bois */
.charSprite[data-ring-left="amulette-de-sanglier-des-bois"],
.charSprite[data-ring-right="amulette-de-sanglier-des-bois"],
.charSprite[data-amulet="amulette-de-sanglier-des-bois"],
.charSprite[data-belt="amulette-de-sanglier-des-bois"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Scorpion */
.charSprite[data-ring-left="amulette-de-scorpion"],
.charSprite[data-ring-right="amulette-de-scorpion"],
.charSprite[data-amulet="amulette-de-scorpion"],
.charSprite[data-belt="amulette-de-scorpion"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette de Serpent liane */
.charSprite[data-ring-left="amulette-de-serpent-liane"],
.charSprite[data-ring-right="amulette-de-serpent-liane"],
.charSprite[data-amulet="amulette-de-serpent-liane"],
.charSprite[data-belt="amulette-de-serpent-liane"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de Spectre */
.charSprite[data-ring-left="amulette-de-spectre"],
.charSprite[data-ring-right="amulette-de-spectre"],
.charSprite[data-amulet="amulette-de-spectre"],
.charSprite[data-belt="amulette-de-spectre"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette de Tortue d'eau */
.charSprite[data-ring-left="amulette-de-tortue-deau"],
.charSprite[data-ring-right="amulette-de-tortue-deau"],
.charSprite[data-amulet="amulette-de-tortue-deau"],
.charSprite[data-belt="amulette-de-tortue-deau"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette de Tricératops */
.charSprite[data-ring-left="amulette-de-triceratops"],
.charSprite[data-ring-right="amulette-de-triceratops"],
.charSprite[data-amulet="amulette-de-triceratops"],
.charSprite[data-belt="amulette-de-triceratops"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette de Yéti de Noël */
.charSprite[data-ring-left="amulette-de-yeti-de-noel"],
.charSprite[data-ring-right="amulette-de-yeti-de-noel"],
.charSprite[data-amulet="amulette-de-yeti-de-noel"],
.charSprite[data-belt="amulette-de-yeti-de-noel"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette de Yéti mineur */
.charSprite[data-ring-left="amulette-de-yeti-mineur"],
.charSprite[data-ring-right="amulette-de-yeti-mineur"],
.charSprite[data-amulet="amulette-de-yeti-mineur"],
.charSprite[data-belt="amulette-de-yeti-mineur"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette de l'Arbre Ancestral */
.charSprite[data-ring-left="amulette-de-larbre-ancestral"],
.charSprite[data-ring-right="amulette-de-larbre-ancestral"],
.charSprite[data-amulet="amulette-de-larbre-ancestral"],
.charSprite[data-belt="amulette-de-larbre-ancestral"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette de l'Archange Déchu */
.charSprite[data-ring-left="amulette-de-larchange-dechu"],
.charSprite[data-ring-right="amulette-de-larchange-dechu"],
.charSprite[data-amulet="amulette-de-larchange-dechu"],
.charSprite[data-belt="amulette-de-larchange-dechu"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette de l'Esprit */
.charSprite[data-ring-left="amulette-de-lesprit"],
.charSprite[data-ring-right="amulette-de-lesprit"],
.charSprite[data-amulet="amulette-de-lesprit"],
.charSprite[data-belt="amulette-de-lesprit"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette du Bélier */
.charSprite[data-ring-left="amulette-du-belier"],
.charSprite[data-ring-right="amulette-du-belier"],
.charSprite[data-amulet="amulette-du-belier"],
.charSprite[data-belt="amulette-du-belier"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette du Dragon de Givre */
.charSprite[data-ring-left="amulette-du-dragon-de-givre"],
.charSprite[data-ring-right="amulette-du-dragon-de-givre"],
.charSprite[data-amulet="amulette-du-dragon-de-givre"],
.charSprite[data-belt="amulette-du-dragon-de-givre"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette du Gardien des berges */
.charSprite[data-ring-left="amulette-du-gardien-des-berges"],
.charSprite[data-ring-right="amulette-du-gardien-des-berges"],
.charSprite[data-amulet="amulette-du-gardien-des-berges"],
.charSprite[data-belt="amulette-du-gardien-des-berges"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette du Golem de Cristal */
.charSprite[data-ring-left="amulette-du-golem-de-cristal"],
.charSprite[data-ring-right="amulette-du-golem-de-cristal"],
.charSprite[data-amulet="amulette-du-golem-de-cristal"],
.charSprite[data-belt="amulette-du-golem-de-cristal"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Amulette du Grand Groin */
.charSprite[data-ring-left="amulette-du-grand-groin"],
.charSprite[data-ring-right="amulette-du-grand-groin"],
.charSprite[data-amulet="amulette-du-grand-groin"],
.charSprite[data-belt="amulette-du-grand-groin"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette du Léviathan */
.charSprite[data-ring-left="amulette-du-leviathan"],
.charSprite[data-ring-right="amulette-du-leviathan"],
.charSprite[data-amulet="amulette-du-leviathan"],
.charSprite[data-belt="amulette-du-leviathan"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette du Maître des Squelettes */
.charSprite[data-ring-left="amulette-du-maitre-des-squelettes"],
.charSprite[data-ring-right="amulette-du-maitre-des-squelettes"],
.charSprite[data-amulet="amulette-du-maitre-des-squelettes"],
.charSprite[data-belt="amulette-du-maitre-des-squelettes"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette du Minotot */
.charSprite[data-ring-left="amulette-du-minotot"],
.charSprite[data-ring-right="amulette-du-minotot"],
.charSprite[data-amulet="amulette-du-minotot"],
.charSprite[data-belt="amulette-du-minotot"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette du Père Fouettard */
.charSprite[data-ring-left="amulette-du-pere-fouettard"],
.charSprite[data-ring-right="amulette-du-pere-fouettard"],
.charSprite[data-amulet="amulette-du-pere-fouettard"],
.charSprite[data-belt="amulette-du-pere-fouettard"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette du Roi Singe */
.charSprite[data-ring-left="amulette-du-roi-singe"],
.charSprite[data-ring-right="amulette-du-roi-singe"],
.charSprite[data-amulet="amulette-du-roi-singe"],
.charSprite[data-belt="amulette-du-roi-singe"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Amulette du Seigneur des Flammes */
.charSprite[data-ring-left="amulette-du-seigneur-des-flammes"],
.charSprite[data-ring-right="amulette-du-seigneur-des-flammes"],
.charSprite[data-amulet="amulette-du-seigneur-des-flammes"],
.charSprite[data-belt="amulette-du-seigneur-des-flammes"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Amulette du Sphinx */
.charSprite[data-ring-left="amulette-du-sphinx"],
.charSprite[data-ring-right="amulette-du-sphinx"],
.charSprite[data-amulet="amulette-du-sphinx"],
.charSprite[data-belt="amulette-du-sphinx"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette du T-Rex */
.charSprite[data-ring-left="amulette-du-t-rex"],
.charSprite[data-ring-right="amulette-du-t-rex"],
.charSprite[data-amulet="amulette-du-t-rex"],
.charSprite[data-belt="amulette-du-t-rex"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Amulette du Titan de Brume */
.charSprite[data-ring-left="amulette-du-titan-de-brume"],
.charSprite[data-ring-right="amulette-du-titan-de-brume"],
.charSprite[data-amulet="amulette-du-titan-de-brume"],
.charSprite[data-belt="amulette-du-titan-de-brume"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Amulette en Crabe */
.charSprite[data-ring-left="amulette-en-crabe"],
.charSprite[data-ring-right="amulette-en-crabe"],
.charSprite[data-amulet="amulette-en-crabe"],
.charSprite[data-belt="amulette-en-crabe"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Amulette Éveillée */
.charSprite[data-ring-left="amulette-eveillee"],
.charSprite[data-ring-right="amulette-eveillee"],
.charSprite[data-amulet="amulette-eveillee"],
.charSprite[data-belt="amulette-eveillee"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau Cornue */
.charSprite[data-ring-left="anneau-cornue"],
.charSprite[data-ring-right="anneau-cornue"],
.charSprite[data-amulet="anneau-cornue"],
.charSprite[data-belt="anneau-cornue"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau Céleste */
.charSprite[data-ring-left="anneau-celeste"],
.charSprite[data-ring-right="anneau-celeste"],
.charSprite[data-amulet="anneau-celeste"],
.charSprite[data-belt="anneau-celeste"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau Magmatique */
.charSprite[data-ring-left="anneau-magmatique"],
.charSprite[data-ring-right="anneau-magmatique"],
.charSprite[data-amulet="anneau-magmatique"],
.charSprite[data-belt="anneau-magmatique"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Anneau Préhistorique */
.charSprite[data-ring-left="anneau-prehistorique"],
.charSprite[data-ring-right="anneau-prehistorique"],
.charSprite[data-amulet="anneau-prehistorique"],
.charSprite[data-belt="anneau-prehistorique"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau Scintillante */
.charSprite[data-ring-left="anneau-scintillante"],
.charSprite[data-ring-right="anneau-scintillante"],
.charSprite[data-amulet="anneau-scintillante"],
.charSprite[data-belt="anneau-scintillante"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau Squelettique */
.charSprite[data-ring-left="anneau-squelettique"],
.charSprite[data-ring-right="anneau-squelettique"],
.charSprite[data-amulet="anneau-squelettique"],
.charSprite[data-belt="anneau-squelettique"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau d'Aigle des sommets */
.charSprite[data-ring-left="anneau-daigle-des-sommets"],
.charSprite[data-ring-right="anneau-daigle-des-sommets"],
.charSprite[data-amulet="anneau-daigle-des-sommets"],
.charSprite[data-belt="anneau-daigle-des-sommets"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau d'Araignée sylvestre */
.charSprite[data-ring-left="anneau-daraignee-sylvestre"],
.charSprite[data-ring-right="anneau-daraignee-sylvestre"],
.charSprite[data-amulet="anneau-daraignee-sylvestre"],
.charSprite[data-belt="anneau-daraignee-sylvestre"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau d'Ent jeune */
.charSprite[data-ring-left="anneau-dent-jeune"],
.charSprite[data-ring-right="anneau-dent-jeune"],
.charSprite[data-amulet="anneau-dent-jeune"],
.charSprite[data-belt="anneau-dent-jeune"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau d'Ours des glaces */
.charSprite[data-ring-left="anneau-dours-des-glaces"],
.charSprite[data-ring-right="anneau-dours-des-glaces"],
.charSprite[data-amulet="anneau-dours-des-glaces"],
.charSprite[data-belt="anneau-dours-des-glaces"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau d'Éther */
.charSprite[data-ring-left="anneau-dether"],
.charSprite[data-ring-right="anneau-dether"],
.charSprite[data-amulet="anneau-dether"],
.charSprite[data-belt="anneau-dether"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau de Bouc */
.charSprite[data-ring-left="anneau-de-bouc"],
.charSprite[data-ring-right="anneau-de-bouc"],
.charSprite[data-amulet="anneau-de-bouc"],
.charSprite[data-belt="anneau-de-bouc"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Bouc hargneux */
.charSprite[data-ring-left="anneau-de-bouc-hargneux"],
.charSprite[data-ring-right="anneau-de-bouc-hargneux"],
.charSprite[data-amulet="anneau-de-bouc-hargneux"],
.charSprite[data-belt="anneau-de-bouc-hargneux"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Brochet mutant */
.charSprite[data-ring-left="anneau-de-brochet-mutant"],
.charSprite[data-ring-right="anneau-de-brochet-mutant"],
.charSprite[data-amulet="anneau-de-brochet-mutant"],
.charSprite[data-belt="anneau-de-brochet-mutant"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Brumelin */
.charSprite[data-ring-left="anneau-de-brumelin"],
.charSprite[data-ring-right="anneau-de-brumelin"],
.charSprite[data-amulet="anneau-de-brumelin"],
.charSprite[data-belt="anneau-de-brumelin"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Cendre */
.charSprite[data-ring-left="anneau-de-cendre"],
.charSprite[data-ring-right="anneau-de-cendre"],
.charSprite[data-amulet="anneau-de-cendre"],
.charSprite[data-belt="anneau-de-cendre"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Anneau de Cobra des dunes */
.charSprite[data-ring-left="anneau-de-cobra-des-dunes"],
.charSprite[data-ring-right="anneau-de-cobra-des-dunes"],
.charSprite[data-amulet="anneau-de-cobra-des-dunes"],
.charSprite[data-belt="anneau-de-cobra-des-dunes"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Corbeau des plaines */
.charSprite[data-ring-left="anneau-de-corbeau-des-plaines"],
.charSprite[data-ring-right="anneau-de-corbeau-des-plaines"],
.charSprite[data-amulet="anneau-de-corbeau-des-plaines"],
.charSprite[data-belt="anneau-de-corbeau-des-plaines"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Crabe des plaines */
.charSprite[data-ring-left="anneau-de-crabe-des-plaines"],
.charSprite[data-ring-right="anneau-de-crabe-des-plaines"],
.charSprite[data-amulet="anneau-de-crabe-des-plaines"],
.charSprite[data-belt="anneau-de-crabe-des-plaines"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Crabe des roseaux */
.charSprite[data-ring-left="anneau-de-crabe-des-roseaux"],
.charSprite[data-ring-right="anneau-de-crabe-des-roseaux"],
.charSprite[data-amulet="anneau-de-crabe-des-roseaux"],
.charSprite[data-belt="anneau-de-crabe-des-roseaux"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Feu */
.charSprite[data-ring-left="anneau-de-feu"],
.charSprite[data-ring-right="anneau-de-feu"],
.charSprite[data-amulet="anneau-de-feu"],
.charSprite[data-belt="anneau-de-feu"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Anneau de Fossoyeur */
.charSprite[data-ring-left="anneau-de-fossoyeur"],
.charSprite[data-ring-right="anneau-de-fossoyeur"],
.charSprite[data-amulet="anneau-de-fossoyeur"],
.charSprite[data-belt="anneau-de-fossoyeur"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau de Foudre */
.charSprite[data-ring-left="anneau-de-foudre"],
.charSprite[data-ring-right="anneau-de-foudre"],
.charSprite[data-amulet="anneau-de-foudre"],
.charSprite[data-belt="anneau-de-foudre"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau de Golem de roc */
.charSprite[data-ring-left="anneau-de-golem-de-roc"],
.charSprite[data-ring-right="anneau-de-golem-de-roc"],
.charSprite[data-amulet="anneau-de-golem-de-roc"],
.charSprite[data-belt="anneau-de-golem-de-roc"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Golem de sable */
.charSprite[data-ring-left="anneau-de-golem-de-sable"],
.charSprite[data-ring-right="anneau-de-golem-de-sable"],
.charSprite[data-amulet="anneau-de-golem-de-sable"],
.charSprite[data-belt="anneau-de-golem-de-sable"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Gorille */
.charSprite[data-ring-left="anneau-de-gorille"],
.charSprite[data-ring-right="anneau-de-gorille"],
.charSprite[data-amulet="anneau-de-gorille"],
.charSprite[data-belt="anneau-de-gorille"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Harpie */
.charSprite[data-ring-left="anneau-de-harpie"],
.charSprite[data-ring-right="anneau-de-harpie"],
.charSprite[data-amulet="anneau-de-harpie"],
.charSprite[data-belt="anneau-de-harpie"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Jaguar */
.charSprite[data-ring-left="anneau-de-jaguar"],
.charSprite[data-ring-right="anneau-de-jaguar"],
.charSprite[data-amulet="anneau-de-jaguar"],
.charSprite[data-belt="anneau-de-jaguar"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Liche */
.charSprite[data-ring-left="anneau-de-liche"],
.charSprite[data-ring-right="anneau-de-liche"],
.charSprite[data-amulet="anneau-de-liche"],
.charSprite[data-belt="anneau-de-liche"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau de Lièvre givré */
.charSprite[data-ring-left="anneau-de-lievre-givre"],
.charSprite[data-ring-right="anneau-de-lievre-givre"],
.charSprite[data-amulet="anneau-de-lievre-givre"],
.charSprite[data-belt="anneau-de-lievre-givre"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Loup blanc */
.charSprite[data-ring-left="anneau-de-loup-blanc"],
.charSprite[data-ring-right="anneau-de-loup-blanc"],
.charSprite[data-amulet="anneau-de-loup-blanc"],
.charSprite[data-belt="anneau-de-loup-blanc"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Loup des bois */
.charSprite[data-ring-left="anneau-de-loup-des-bois"],
.charSprite[data-ring-right="anneau-de-loup-des-bois"],
.charSprite[data-amulet="anneau-de-loup-des-bois"],
.charSprite[data-belt="anneau-de-loup-des-bois"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Loup maigre */
.charSprite[data-ring-left="anneau-de-loup-maigre"],
.charSprite[data-ring-right="anneau-de-loup-maigre"],
.charSprite[data-amulet="anneau-de-loup-maigre"],
.charSprite[data-belt="anneau-de-loup-maigre"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Lutin */
.charSprite[data-ring-left="anneau-de-lutin"],
.charSprite[data-ring-right="anneau-de-lutin"],
.charSprite[data-amulet="anneau-de-lutin"],
.charSprite[data-belt="anneau-de-lutin"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Magma */
.charSprite[data-ring-left="anneau-de-magma"],
.charSprite[data-ring-right="anneau-de-magma"],
.charSprite[data-amulet="anneau-de-magma"],
.charSprite[data-belt="anneau-de-magma"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Anneau de Marmouset */
.charSprite[data-ring-left="anneau-de-marmouset"],
.charSprite[data-ring-right="anneau-de-marmouset"],
.charSprite[data-amulet="anneau-de-marmouset"],
.charSprite[data-belt="anneau-de-marmouset"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Minotocure */
.charSprite[data-ring-left="anneau-de-minotocure"],
.charSprite[data-ring-right="anneau-de-minotocure"],
.charSprite[data-amulet="anneau-de-minotocure"],
.charSprite[data-belt="anneau-de-minotocure"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Minotor */
.charSprite[data-ring-left="anneau-de-minotor"],
.charSprite[data-ring-right="anneau-de-minotor"],
.charSprite[data-amulet="anneau-de-minotor"],
.charSprite[data-belt="anneau-de-minotor"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Neige Hargneuse */
.charSprite[data-ring-left="anneau-de-neige-hargneuse"],
.charSprite[data-ring-right="anneau-de-neige-hargneuse"],
.charSprite[data-amulet="anneau-de-neige-hargneuse"],
.charSprite[data-belt="anneau-de-neige-hargneuse"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Pillard du sable */
.charSprite[data-ring-left="anneau-de-pillard-du-sable"],
.charSprite[data-ring-right="anneau-de-pillard-du-sable"],
.charSprite[data-amulet="anneau-de-pillard-du-sable"],
.charSprite[data-belt="anneau-de-pillard-du-sable"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Ptérodactyle */
.charSprite[data-ring-left="anneau-de-pterodactyle"],
.charSprite[data-ring-right="anneau-de-pterodactyle"],
.charSprite[data-amulet="anneau-de-pterodactyle"],
.charSprite[data-belt="anneau-de-pterodactyle"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Racineau */
.charSprite[data-ring-left="anneau-de-racineau"],
.charSprite[data-ring-right="anneau-de-racineau"],
.charSprite[data-amulet="anneau-de-racineau"],
.charSprite[data-belt="anneau-de-racineau"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Raptor */
.charSprite[data-ring-left="anneau-de-raptor"],
.charSprite[data-ring-right="anneau-de-raptor"],
.charSprite[data-amulet="anneau-de-raptor"],
.charSprite[data-belt="anneau-de-raptor"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Renne */
.charSprite[data-ring-left="anneau-de-renne"],
.charSprite[data-ring-right="anneau-de-renne"],
.charSprite[data-amulet="anneau-de-renne"],
.charSprite[data-belt="anneau-de-renne"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Sanglier */
.charSprite[data-ring-left="anneau-de-sanglier"],
.charSprite[data-ring-right="anneau-de-sanglier"],
.charSprite[data-amulet="anneau-de-sanglier"],
.charSprite[data-belt="anneau-de-sanglier"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de Sanglier des bois */
.charSprite[data-ring-left="anneau-de-sanglier-des-bois"],
.charSprite[data-ring-right="anneau-de-sanglier-des-bois"],
.charSprite[data-amulet="anneau-de-sanglier-des-bois"],
.charSprite[data-belt="anneau-de-sanglier-des-bois"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Scorpion */
.charSprite[data-ring-left="anneau-de-scorpion"],
.charSprite[data-ring-right="anneau-de-scorpion"],
.charSprite[data-amulet="anneau-de-scorpion"],
.charSprite[data-belt="anneau-de-scorpion"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau de Serpent liane */
.charSprite[data-ring-left="anneau-de-serpent-liane"],
.charSprite[data-ring-right="anneau-de-serpent-liane"],
.charSprite[data-amulet="anneau-de-serpent-liane"],
.charSprite[data-belt="anneau-de-serpent-liane"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de Spectre */
.charSprite[data-ring-left="anneau-de-spectre"],
.charSprite[data-ring-right="anneau-de-spectre"],
.charSprite[data-amulet="anneau-de-spectre"],
.charSprite[data-belt="anneau-de-spectre"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau de Tortue d'eau */
.charSprite[data-ring-left="anneau-de-tortue-deau"],
.charSprite[data-ring-right="anneau-de-tortue-deau"],
.charSprite[data-amulet="anneau-de-tortue-deau"],
.charSprite[data-belt="anneau-de-tortue-deau"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau de Tricératops */
.charSprite[data-ring-left="anneau-de-triceratops"],
.charSprite[data-ring-right="anneau-de-triceratops"],
.charSprite[data-amulet="anneau-de-triceratops"],
.charSprite[data-belt="anneau-de-triceratops"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau de Yéti de Noël */
.charSprite[data-ring-left="anneau-de-yeti-de-noel"],
.charSprite[data-ring-right="anneau-de-yeti-de-noel"],
.charSprite[data-amulet="anneau-de-yeti-de-noel"],
.charSprite[data-belt="anneau-de-yeti-de-noel"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau de Yéti mineur */
.charSprite[data-ring-left="anneau-de-yeti-mineur"],
.charSprite[data-ring-right="anneau-de-yeti-mineur"],
.charSprite[data-amulet="anneau-de-yeti-mineur"],
.charSprite[data-belt="anneau-de-yeti-mineur"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau de l'Arbre Ancestral */
.charSprite[data-ring-left="anneau-de-larbre-ancestral"],
.charSprite[data-ring-right="anneau-de-larbre-ancestral"],
.charSprite[data-amulet="anneau-de-larbre-ancestral"],
.charSprite[data-belt="anneau-de-larbre-ancestral"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau de l'Archange Déchu */
.charSprite[data-ring-left="anneau-de-larchange-dechu"],
.charSprite[data-ring-right="anneau-de-larchange-dechu"],
.charSprite[data-amulet="anneau-de-larchange-dechu"],
.charSprite[data-belt="anneau-de-larchange-dechu"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau de l'Esprit */
.charSprite[data-ring-left="anneau-de-lesprit"],
.charSprite[data-ring-right="anneau-de-lesprit"],
.charSprite[data-amulet="anneau-de-lesprit"],
.charSprite[data-belt="anneau-de-lesprit"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau du Bélier */
.charSprite[data-ring-left="anneau-du-belier"],
.charSprite[data-ring-right="anneau-du-belier"],
.charSprite[data-amulet="anneau-du-belier"],
.charSprite[data-belt="anneau-du-belier"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau du Dragon de Givre */
.charSprite[data-ring-left="anneau-du-dragon-de-givre"],
.charSprite[data-ring-right="anneau-du-dragon-de-givre"],
.charSprite[data-amulet="anneau-du-dragon-de-givre"],
.charSprite[data-belt="anneau-du-dragon-de-givre"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau du Gardien des berges */
.charSprite[data-ring-left="anneau-du-gardien-des-berges"],
.charSprite[data-ring-right="anneau-du-gardien-des-berges"],
.charSprite[data-amulet="anneau-du-gardien-des-berges"],
.charSprite[data-belt="anneau-du-gardien-des-berges"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau du Golem de Cristal */
.charSprite[data-ring-left="anneau-du-golem-de-cristal"],
.charSprite[data-ring-right="anneau-du-golem-de-cristal"],
.charSprite[data-amulet="anneau-du-golem-de-cristal"],
.charSprite[data-belt="anneau-du-golem-de-cristal"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Anneau du Grand Groin */
.charSprite[data-ring-left="anneau-du-grand-groin"],
.charSprite[data-ring-right="anneau-du-grand-groin"],
.charSprite[data-amulet="anneau-du-grand-groin"],
.charSprite[data-belt="anneau-du-grand-groin"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau du Léviathan */
.charSprite[data-ring-left="anneau-du-leviathan"],
.charSprite[data-ring-right="anneau-du-leviathan"],
.charSprite[data-amulet="anneau-du-leviathan"],
.charSprite[data-belt="anneau-du-leviathan"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #f39c12 !important;
  --ring-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #f39c12 !important;
  --amulet-gem-glow: rgba(243, 156, 18, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Anneau du Maître des Squelettes */
.charSprite[data-ring-left="anneau-du-maitre-des-squelettes"],
.charSprite[data-ring-right="anneau-du-maitre-des-squelettes"],
.charSprite[data-amulet="anneau-du-maitre-des-squelettes"],
.charSprite[data-belt="anneau-du-maitre-des-squelettes"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau du Minotot */
.charSprite[data-ring-left="anneau-du-minotot"],
.charSprite[data-ring-right="anneau-du-minotot"],
.charSprite[data-amulet="anneau-du-minotot"],
.charSprite[data-belt="anneau-du-minotot"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau du Père Fouettard */
.charSprite[data-ring-left="anneau-du-pere-fouettard"],
.charSprite[data-ring-right="anneau-du-pere-fouettard"],
.charSprite[data-amulet="anneau-du-pere-fouettard"],
.charSprite[data-belt="anneau-du-pere-fouettard"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau du Rat */
.charSprite[data-ring-left="anneau-du-rat"],
.charSprite[data-ring-right="anneau-du-rat"],
.charSprite[data-amulet="anneau-du-rat"],
.charSprite[data-belt="anneau-du-rat"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau du Roi Singe */
.charSprite[data-ring-left="anneau-du-roi-singe"],
.charSprite[data-ring-right="anneau-du-roi-singe"],
.charSprite[data-amulet="anneau-du-roi-singe"],
.charSprite[data-belt="anneau-du-roi-singe"] {
  --ring-metal-color: #8d6e63 !important;
  --ring-glow-color: rgba(141, 110, 99, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #8d6e63 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #3e2723 !important;
  --belt-bg: linear-gradient(180deg, #8d6e63, #4e342e) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.3) !important;
}

/* Anneau du Seigneur des Flammes */
.charSprite[data-ring-left="anneau-du-seigneur-des-flammes"],
.charSprite[data-ring-right="anneau-du-seigneur-des-flammes"],
.charSprite[data-amulet="anneau-du-seigneur-des-flammes"],
.charSprite[data-belt="anneau-du-seigneur-des-flammes"] {
  --ring-metal-color: #d35400 !important;
  --ring-glow-color: rgba(211, 84, 0, 0.5) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #e67e22 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #7f0000 !important;
  --belt-bg: linear-gradient(180deg, #e74c3c, #2c0000) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #e67e22 !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.5) !important;
}

/* Anneau du Sphinx */
.charSprite[data-ring-left="anneau-du-sphinx"],
.charSprite[data-ring-right="anneau-du-sphinx"],
.charSprite[data-amulet="anneau-du-sphinx"],
.charSprite[data-belt="anneau-du-sphinx"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau du T-Rex */
.charSprite[data-ring-left="anneau-du-t-rex"],
.charSprite[data-ring-right="anneau-du-t-rex"],
.charSprite[data-amulet="anneau-du-t-rex"],
.charSprite[data-belt="anneau-du-t-rex"] {
  --ring-metal-color: #353b48 !important;
  --ring-glow-color: rgba(0, 0, 0, 0.6) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #2f3640 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #111111 !important;
  --belt-bg: linear-gradient(180deg, #2f3640, #1e272e) !important;
  --belt-buckle-color: #718093 !important;
  --belt-buckle-border: #353b48 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Anneau du Titan de Brume */
.charSprite[data-ring-left="anneau-du-titan-de-brume"],
.charSprite[data-ring-right="anneau-du-titan-de-brume"],
.charSprite[data-amulet="anneau-du-titan-de-brume"],
.charSprite[data-belt="anneau-du-titan-de-brume"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #ff3366 !important;
  --ring-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #ff3366 !important;
  --amulet-gem-glow: rgba(255, 51, 102, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Anneau Éveillée */
.charSprite[data-ring-left="anneau-eveillee"],
.charSprite[data-ring-right="anneau-eveillee"],
.charSprite[data-amulet="anneau-eveillee"],
.charSprite[data-belt="anneau-eveillee"] {
  --ring-metal-color: #dcdde1 !important;
  --ring-glow-color: rgba(220, 221, 225, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #dcdde1 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #2f3640 !important;
  --belt-bg: linear-gradient(180deg, #7f8c8d, #353b48) !important;
  --belt-buckle-color: #dcdde1 !important;
  --belt-buckle-border: #7f8c8d !important;
  --belt-buckle-glow: rgba(220, 221, 225, 0.3) !important;
}

/* Ceinture de Cobra */
.charSprite[data-ring-left="ceinture-de-cobra"],
.charSprite[data-ring-right="ceinture-de-cobra"],
.charSprite[data-amulet="ceinture-de-cobra"],
.charSprite[data-belt="ceinture-de-cobra"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Ceinture de Crabe */
.charSprite[data-ring-left="ceinture-de-crabe"],
.charSprite[data-ring-right="ceinture-de-crabe"],
.charSprite[data-amulet="ceinture-de-crabe"],
.charSprite[data-belt="ceinture-de-crabe"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #3498db !important;
  --ring-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #3498db !important;
  --amulet-gem-glow: rgba(52, 152, 219, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}

/* Ceinture en Sanglier */
.charSprite[data-ring-left="ceinture-en-sanglier"],
.charSprite[data-ring-right="ceinture-en-sanglier"],
.charSprite[data-amulet="ceinture-en-sanglier"],
.charSprite[data-belt="ceinture-en-sanglier"] {
  --ring-metal-color: #ffd700 !important;
  --ring-glow-color: rgba(255, 215, 0, 0.35) !important;
  --ring-gem-color: #e74c3c !important;
  --ring-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --amulet-chain-color: #ffd700 !important;
  --amulet-gem-color: #e74c3c !important;
  --amulet-gem-glow: rgba(231, 76, 60, 0.8) !important;
  --belt-border-color: #624310 !important;
  --belt-bg: linear-gradient(180deg, #785023, #462812) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #b7950b !important;
  --belt-buckle-glow: rgba(255, 215, 0, 0.4) !important;
}

/* Collier de Harpie */
.charSprite[data-ring-left="collier-de-harpie"],
.charSprite[data-ring-right="collier-de-harpie"],
.charSprite[data-amulet="collier-de-harpie"],
.charSprite[data-belt="collier-de-harpie"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.35) !important;
  --ring-gem-color: #2ecc71 !important;
  --ring-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #2ecc71 !important;
  --amulet-gem-glow: rgba(46, 204, 113, 0.8) !important;
  --belt-border-color: #1b4f72 !important;
  --belt-bg: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 50%), linear-gradient(180deg, #2ecc71, #1b4f72) !important;
  --belt-buckle-color: #e67e22 !important;
  --belt-buckle-border: #d35400 !important;
  --belt-buckle-glow: rgba(230, 126, 34, 0.3) !important;
}


/* Cosmetic Sets Variable Mappings */

/* Cosmetic Set: anneau-cosmique */
.charSprite[data-ring-left="anneau-cosmique"],
.charSprite[data-ring-right="anneau-cosmique"],
.charSprite[data-belt="ceinture-cosmique"] {
  --ring-metal-color: #00d2ff !important;
  --ring-glow-color: rgba(0, 210, 255, 0.4) !important;
  --ring-gem-color: #00d2ff !important;
  --ring-gem-glow: rgba(0, 210, 255, 0.8) !important;
  --amulet-chain-color: #8e2de2 !important;
  --amulet-gem-color: #8e2de2 !important;
  --amulet-gem-glow: rgba(142, 45, 226, 0.8) !important;
  --belt-border-color: #00d2ff !important;
  --belt-bg: linear-gradient(180deg, #120024, #8e2de2) !important;
  --belt-buckle-color: #00d2ff !important;
  --belt-buckle-border: #00d2ff !important;
  --belt-buckle-glow: rgba(0, 210, 255, 0.6) !important;
}

/* Cosmetic Set: anneau-du-neant */
.charSprite[data-ring-left="anneau-du-neant"],
.charSprite[data-ring-right="anneau-du-neant"],
.charSprite[data-belt="ceinture-du-neant"] {
  --ring-metal-color: #9b59b6 !important;
  --ring-glow-color: rgba(155, 89, 182, 0.4) !important;
  --ring-gem-color: #e0a3ff !important;
  --ring-gem-glow: rgba(224, 163, 255, 0.8) !important;
  --amulet-chain-color: #4a0e4e !important;
  --amulet-gem-color: #4a0e4e !important;
  --amulet-gem-glow: rgba(74, 14, 78, 0.8) !important;
  --belt-border-color: #9b59b6 !important;
  --belt-bg: linear-gradient(180deg, #090514, #4a0e4e) !important;
  --belt-buckle-color: #e0a3ff !important;
  --belt-buckle-border: #9b59b6 !important;
  --belt-buckle-glow: rgba(155, 89, 182, 0.6) !important;
}

/* Cosmetic Set: anneau-solaire */
.charSprite[data-ring-left="anneau-solaire"],
.charSprite[data-ring-right="anneau-solaire"],
.charSprite[data-belt="ceinture-solaire"] {
  --ring-metal-color: #f39c12 !important;
  --ring-glow-color: rgba(243, 156, 18, 0.4) !important;
  --ring-gem-color: #ffd700 !important;
  --ring-gem-glow: rgba(255, 215, 0, 0.8) !important;
  --amulet-chain-color: #d35400 !important;
  --amulet-gem-color: #d35400 !important;
  --amulet-gem-glow: rgba(211, 84, 0, 0.8) !important;
  --belt-border-color: #f39c12 !important;
  --belt-bg: linear-gradient(180deg, #d35400, #f1c40f) !important;
  --belt-buckle-color: #ffd700 !important;
  --belt-buckle-border: #f39c12 !important;
  --belt-buckle-glow: rgba(243, 156, 18, 0.6) !important;
}

/* Cosmetic Set: anneau-ombrale */
.charSprite[data-ring-left="anneau-ombrale"],
.charSprite[data-ring-right="anneau-ombrale"],
.charSprite[data-belt="ceinture-ombrale"] {
  --ring-metal-color: #555555 !important;
  --ring-glow-color: rgba(255, 255, 255, 0.1) !important;
  --ring-gem-color: #666666 !important;
  --ring-gem-glow: rgba(255, 255, 255, 0.2) !important;
  --amulet-chain-color: #111111 !important;
  --amulet-gem-color: #111111 !important;
  --amulet-gem-glow: rgba(0, 0, 0, 0.8) !important;
  --belt-border-color: #555555 !important;
  --belt-bg: linear-gradient(180deg, #111111, #333333) !important;
  --belt-buckle-color: #666666 !important;
  --belt-buckle-border: #555555 !important;
  --belt-buckle-glow: rgba(0, 0, 0, 0.4) !important;
}

/* Cosmetic Set: anneau-printaniere */
.charSprite[data-ring-left="anneau-printaniere"],
.charSprite[data-ring-right="anneau-printaniere"],
.charSprite[data-belt="ceinture-printaniere"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.4) !important;
  --ring-gem-color: #ff7675 !important;
  --ring-gem-glow: rgba(255, 118, 117, 0.8) !important;
  --amulet-chain-color: #27ae60 !important;
  --amulet-gem-color: #27ae60 !important;
  --amulet-gem-glow: rgba(39, 174, 96, 0.8) !important;
  --belt-border-color: #ff7675 !important;
  --belt-bg: linear-gradient(180deg, #2ecc71, #27ae60) !important;
  --belt-buckle-color: #ff7675 !important;
  --belt-buckle-border: #2ecc71 !important;
  --belt-buckle-glow: rgba(46, 204, 113, 0.4) !important;
}

/* Cosmetic Set: anneau-arcanique */
.charSprite[data-ring-left="anneau-arcanique"],
.charSprite[data-ring-right="anneau-arcanique"],
.charSprite[data-belt="ceinture-arcanique"] {
  --ring-metal-color: #a29bfe !important;
  --ring-glow-color: rgba(162, 155, 254, 0.4) !important;
  --ring-gem-color: #fd79a8 !important;
  --ring-gem-glow: rgba(253, 121, 168, 0.8) !important;
  --amulet-chain-color: #6c5ce7 !important;
  --amulet-gem-color: #6c5ce7 !important;
  --amulet-gem-glow: rgba(108, 92, 231, 0.8) !important;
  --belt-border-color: #a29bfe !important;
  --belt-bg: linear-gradient(180deg, #6c5ce7, #e84393) !important;
  --belt-buckle-color: #fd79a8 !important;
  --belt-buckle-border: #a29bfe !important;
  --belt-buckle-glow: rgba(162, 155, 254, 0.4) !important;
}

/* Cosmetic Set: anneau-cybernetique */
.charSprite[data-ring-left="anneau-cybernetique"],
.charSprite[data-ring-right="anneau-cybernetique"],
.charSprite[data-belt="ceinture-cybernetique"] {
  --ring-metal-color: #00f2fe !important;
  --ring-glow-color: rgba(0, 242, 254, 0.4) !important;
  --ring-gem-color: #4facfe !important;
  --ring-gem-glow: rgba(79, 172, 254, 0.8) !important;
  --amulet-chain-color: #00f2fe !important;
  --amulet-gem-color: #00f2fe !important;
  --amulet-gem-glow: rgba(0, 242, 254, 0.8) !important;
  --belt-border-color: #4facfe !important;
  --belt-bg: linear-gradient(180deg, #00f2fe, #000000) !important;
  --belt-buckle-color: #00f2fe !important;
  --belt-buckle-border: #4facfe !important;
  --belt-buckle-glow: rgba(0, 242, 254, 0.6) !important;
}

/* Cosmetic Set: anneau-du-faucheur */
.charSprite[data-ring-left="anneau-du-faucheur"],
.charSprite[data-ring-right="anneau-du-faucheur"],
.charSprite[data-belt="ceinture-du-faucheur"] {
  --ring-metal-color: #2ecc71 !important;
  --ring-glow-color: rgba(46, 204, 113, 0.4) !important;
  --ring-gem-color: #dcdde1 !important;
  --ring-gem-glow: rgba(220, 221, 225, 0.8) !important;
  --amulet-chain-color: #1e272e !important;
  --amulet-gem-color: #1e272e !important;
  --amulet-gem-glow: rgba(30, 39, 46, 0.8) !important;
  --belt-border-color: #27ae60 !important;
  --belt-bg: linear-gradient(180deg, #1e272e, #0f1418) !important;
  --belt-buckle-color: #2ecc71 !important;
  --belt-buckle-border: #27ae60 !important;
  --belt-buckle-glow: rgba(46, 204, 113, 0.4) !important;
}

/* --- PREMIUM RINGS DYNAMIC RENDERING --- */
/* Exclude cosmetic rings if they define completely custom shapes, or let them render using the new beautiful system */
body .charSprite[data-ring-left] .charRingLeft.equipped,
body .charSprite[data-ring-right] .charRingRight.equipped {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--ring-metal-color) !important;
  background: transparent !important;
  box-shadow: 0 0 3px var(--ring-glow-color), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  z-index: 6 !important;
  top: 51px !important;
}

body .charSprite[data-ring-left] .charRingLeft.equipped {
  left: 22% !important;
}

body .charSprite[data-ring-right] .charRingRight.equipped {
  left: 78% !important;
}

/* Ring Gem overlay */
body .charSprite[data-ring-left] .charRingLeft.equipped::after,
body .charSprite[data-ring-right] .charRingRight.equipped::after {
  content: "" !important;
  position: absolute !important;
  top: -2.5px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 3.5px !important;
  height: 3.5px !important;
  background: var(--ring-gem-color) !important;
  box-shadow: 0 0 3px var(--ring-gem-glow), 0 0.5px 0.5px rgba(0, 0, 0, 0.3) !important;
  border-radius: 0.5px !important;
  display: block !important;
  border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
  text-shadow: none !important;
  font-size: 0 !important;
}

/* --- PREMIUM AMULETS DYNAMIC RENDERING --- */
body .charSprite[data-amulet] .charAmulet.equipped {
  width: 9px !important;
  height: 9px !important;
  top: 42px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  border: 1.2px solid var(--amulet-chain-color) !important;
  background: transparent !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  z-index: 4 !important;
}

/* Amulet Teardrop Gem overlay */
body .charSprite[data-amulet] .charAmulet.equipped::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3.5px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(-45deg) !important;
  width: 4px !important;
  height: 4px !important;
  background: var(--amulet-gem-color) !important;
  border-radius: 50% 0 50% 50% !important;
  box-shadow: 0 0 4px var(--amulet-gem-glow), 0 0.5px 1px rgba(0, 0, 0, 0.3) !important;
  display: block !important;
  border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
  text-shadow: none !important;
  font-size: 0 !important;
}

/* --- PREMIUM BELTS DYNAMIC RENDERING --- */
body .charSprite[data-belt] .charBelt.equipped {
  width: 28px !important;
  height: 5px !important;
  top: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(0deg) !important;
  z-index: 3 !important;
  border: 1.5px solid var(--belt-border-color) !important;
  background: var(--belt-bg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  border-radius: 1px !important;
}

/* Belt Buckle overlay */
body .charSprite[data-belt] .charBelt.equipped::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 5px !important;
  height: 7px !important;
  background: var(--belt-buckle-color) !important;
  border: 1px solid var(--belt-buckle-border) !important;
  border-radius: 1px !important;
  box-shadow: 0 0 3px var(--belt-buckle-glow) !important;
  display: block !important;
}

/* --- ITEM CUSTOM ICONS (RINGS & AMULETS) FOR INVENTORY & ENCYCLOPEDIA --- */
.ring-amulet-icon-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  pointer-events: none !important;
}

.item-custom-icon {
  position: relative !important;
  box-sizing: border-box !important;
}

/* Ring Styling */
.item-custom-icon.ring {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 3.5px solid transparent !important;
  background: var(--metal-gradient) padding-box,
    var(--metal-gradient) border-box !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.item-custom-icon.ring::after {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #1a1a24 !important;
  /* matches slot background */
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.7) !important;
}

.item-custom-icon.ring .gem-stone {
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--gem-color) !important;
  border-radius: 1.5px !important;
  box-shadow: 0 0 5px var(--gem-shadow), 0 1px 1px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  z-index: 2 !important;
}

/* Amulet Styling */
.item-custom-icon.amulet {
  width: 20px !important;
  height: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.item-custom-icon.amulet::before {
  content: '' !important;
  width: 16px !important;
  height: 10px !important;
  border: 2px solid transparent !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  background: var(--metal-gradient) padding-box,
    var(--metal-gradient) border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.item-custom-icon.amulet::after {
  content: '' !important;
  width: 3.5px !important;
  height: 3.5px !important;
  background: var(--metal-gradient) !important;
  border-radius: 50% !important;
  margin-top: -2px !important;
  z-index: 1 !important;
}

.item-custom-icon.amulet .gem-stone {
  width: 8px !important;
  height: 8px !important;
  background: var(--gem-color) !important;
  border-radius: 50% 0 50% 50% !important;
  transform: rotate(-45deg) !important;
  box-shadow: 0 0 6px var(--gem-shadow), 0 1.5px 2px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  margin-top: -1px !important;
  z-index: 2 !important;
}

/* =======================================================
   BASE RENDER & CUSTOMIZATIONS FOR STAFFS AND BOWS
   ======================================================= */

/* --- Staff (Bâton) Base Style --- */
body .charSprite .charStaff.equipped {
  display: block !important;
  position: absolute;
  width: 6px;
  height: 46px;
  right: -4px;
  top: 28px;
  background: linear-gradient(90deg, #784212, #fad7a0 40%, #784212 80%);
  border: 1.5px solid #1c1511;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 90%;
  animation: weaponSway 3.6s ease-in-out infinite;
  z-index: 5;
}

body .charSprite .charStaff.equipped::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: -14px;
  left: -6px;
  border-radius: 50%;
  background: var(--staff-head-color, radial-gradient(circle at 35% 30%, #ffffff 0%, #a29bfe 40%, #6c5ce7 80%, #32107c 100%));
  box-shadow:
    0 0 14px rgba(108, 92, 231, 0.7),
    0 0 22px rgba(108, 92, 231, 0.4);
  animation: orbPulse 1.8s ease-in-out infinite;
}

/* --- Bow (Arc) Base Style --- */
body .charSprite .charBow.equipped {
  display: block !important;
  position: absolute;
  width: 18px;
  height: 38px;
  right: -8px;
  top: 36px;
  border: 4px solid var(--bow-limb-color, #e58e26);
  border-left: 0;
  border-radius: 0 40px 40px 0;
  background: linear-gradient(180deg, #d35400, #a04000 60%, #5e2700 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    inset 1px 0 rgba(255, 255, 255, 0.1);
  transform-origin: 20% 90%;
  animation: weaponSway 3.8s ease-in-out infinite;
  z-index: 5;
}

body .charSprite .charBow.equipped::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 28px;
  right: -6px;
  top: 5px;
  background: linear-gradient(180deg, #fff, #fad390, var(--bow-limb-color, #e58e26));
  transform: rotate(-10deg);
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------
   INDIVIDUAL STAFF SKINS
   ------------------------------------------------------- */

/* Bâton d'Apprenti (lvl 1) — Bâton de bois brut, nœud lumineux d'éveil */
.charSprite[data-staff="baton-dapprenti"] .charStaff.equipped {
  background: linear-gradient(90deg, #5d4037, #bcaaa4 45%, #5d4037 85%) !important;
  border-color: #3e2723 !important;
  box-shadow: 0 0 6px rgba(139, 195, 74, 0.4) !important;
}

.charSprite[data-staff="baton-dapprenti"] .charStaff.equipped::before {
  --staff-head-color: radial-gradient(circle at 40% 35%, #f9fbe7 0%, #aed581 40%, #558b2f 80%) !important;
  background: radial-gradient(circle at 40% 35%, #f9fbe7 0%, #aed581 40%, #558b2f 80%) !important;
  box-shadow: 0 0 8px rgba(139, 195, 74, 0.6), 0 0 16px rgba(139, 195, 74, 0.3) !important;
  animation: orbPulse 2.2s ease-in-out infinite !important;
}

/* Bâton d'Érable Poli (lvl 40) — Bois rare à la teinte rousse, orbe de nature */
.charSprite[data-staff="baton-derable-poli"] .charStaff.equipped {
  background: linear-gradient(90deg, #6d4c41, #ff8f00 45%, #6d4c41 85%) !important;
  border-color: #4e342e !important;
  box-shadow: 0 0 8px rgba(255, 143, 0, 0.35) !important;
}

.charSprite[data-staff="baton-derable-poli"] .charStaff.equipped::before {
  background: radial-gradient(circle at 38% 30%, #fff9c4 0%, #ffca28 40%, #f9a825 80%) !important;
  box-shadow: 0 0 12px rgba(249, 168, 37, 0.7), 0 0 24px rgba(249, 168, 37, 0.3) !important;
  animation: orbPulse 2s ease-in-out infinite !important;
}

/* Bâton de Lave Fusionné (lvl 120) — Magma et obsidienne, flammes ardentes */
.charSprite[data-staff="baton-de-lave-fusionne"] .charStaff.equipped {
  background: linear-gradient(90deg, #212121, #ff5722 40%, #b71c1c 75%, #212121 100%) !important;
  border-color: #b71c1c !important;
  box-shadow: 0 0 14px rgba(255, 87, 34, 0.8), 0 0 4px rgba(255, 87, 34, 0.4) !important;
}

.charSprite[data-staff="baton-de-lave-fusionne"] .charStaff.equipped::before {
  background: radial-gradient(circle at 35% 30%, #ffcc02 0%, #ff6f00 35%, #dd2c00 70%) !important;
  box-shadow: 0 0 16px rgba(255, 111, 0, 0.9), 0 0 30px rgba(221, 44, 0, 0.5) !important;
  animation: orbPulse 1.3s ease-in-out infinite !important;
}

/* Bâton Suprême de l'Arbre Ancestral (lvl 45, légendaire) — Racines vivantes, orbe sylvain légendaire */
.charSprite[data-staff="baton-supreme-de-larbre-ancestral"] .charStaff.equipped {
  background: linear-gradient(90deg, #33691e, #a5d6a7 40%, #33691e 80%) !important;
  border-color: #1b5e20 !important;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.6), 0 0 24px rgba(76, 175, 80, 0.25) !important;
}

.charSprite[data-staff="baton-supreme-de-larbre-ancestral"] .charStaff.equipped::before {
  width: 18px !important;
  height: 18px !important;
  top: -16px !important;
  left: -7px !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #69f0ae 30%, #00c853 60%, #1b5e20 90%) !important;
  box-shadow: 0 0 16px rgba(105, 240, 174, 0.8), 0 0 32px rgba(0, 200, 83, 0.5) !important;
  animation: orbPulse 1.5s ease-in-out infinite !important;
}

/* Sceptre Omnipotent de l'Archange (lvl 200, légendaire ultime) */
.charSprite[data-staff="sceptre-omnipotent-de-larchange"] .charStaff.equipped {
  background: linear-gradient(90deg, #f57f17, #fff176 40%, #f57f17 80%) !important;
  border-color: #e65100 !important;
  box-shadow: 0 0 18px rgba(255, 241, 118, 0.9), 0 0 36px rgba(255, 193, 7, 0.5) !important;
}

.charSprite[data-staff="sceptre-omnipotent-de-larchange"] .charStaff.equipped::before {
  width: 20px !important;
  height: 20px !important;
  top: -18px !important;
  left: -8px !important;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #fff9c4 20%, #ffd54f 50%, #e65100 90%) !important;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(255, 213, 79, 0.8),
    0 0 60px rgba(230, 81, 0, 0.4) !important;
  animation: orbPulse 1.1s ease-in-out infinite !important;
}

/* Sceptre Immortel du Sphinx (lvl 95, légendaire) — Sable doré, mystère du désert */
.charSprite[data-staff="sceptre-immortel-du-sphinx"] .charStaff.equipped {
  background: linear-gradient(90deg, #795548, #ffe082 45%, #795548 85%) !important;
  border-color: #4e342e !important;
  box-shadow: 0 0 10px rgba(255, 224, 130, 0.6) !important;
}

.charSprite[data-staff="sceptre-immortel-du-sphinx"] .charStaff.equipped::before {
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #ffe57f 35%, #ffab00 70%) !important;
  box-shadow: 0 0 14px rgba(255, 171, 0, 0.8), 0 0 28px rgba(255, 171, 0, 0.4) !important;
}

/* -------------------------------------------------------
   INDIVIDUAL BOW SKINS
   ------------------------------------------------------- */

/* Arc de Recrue (lvl 1) — Arc simple en bois brut, corde en lin */
.charSprite[data-bow="arc-de-recrue"] .charBow.equipped {
  border-color: #8d6e63 !important;
  background: linear-gradient(180deg, #6d4c41, #5d4037 60%, #4e342e 100%) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
}

.charSprite[data-bow="arc-de-recrue"] .charBow.equipped::after {
  background: linear-gradient(180deg, #fffde7, #f5f5f5, #8d6e63) !important;
}

/* Arc en Bambou Flexible (lvl 50) — Bambou vert clair souple et élancé */
.charSprite[data-bow="arc-en-bambou-flexible"] .charBow.equipped {
  border-color: #558b2f !important;
  background: linear-gradient(180deg, #689f38, #33691e 55%, #1b5e20 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 6px rgba(85, 139, 47, 0.4) !important;
}

.charSprite[data-bow="arc-en-bambou-flexible"] .charBow.equipped::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  left: 2px;
  top: 0;
  background: repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 4px,
      transparent 4px,
      transparent 8px);
  border-radius: 2px;
}

.charSprite[data-bow="arc-en-bambou-flexible"] .charBow.equipped::after {
  background: linear-gradient(180deg, #f9fbe7, #ccff90, #558b2f) !important;
  box-shadow: 0 0 4px rgba(139, 195, 74, 0.5) !important;
}

/* Arc Céleste Foudroyant (lvl 160) — Or et éclairs, aura divine */
.charSprite[data-bow="arc-celeste-foudroyant"] .charBow.equipped {
  border-color: #fdd835 !important;
  background: linear-gradient(180deg, #ffe082, #ffd54f 40%, #f9a825 75%, #e65100 100%) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(253, 216, 53, 0.7),
    0 0 30px rgba(253, 216, 53, 0.3) !important;
}

.charSprite[data-bow="arc-celeste-foudroyant"] .charBow.equipped::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  left: 1px;
  top: 0;
  background: repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.3) 0px,
      rgba(255, 255, 255, 0.3) 3px,
      transparent 3px,
      transparent 9px);
  border-radius: 2px;
}

.charSprite[data-bow="arc-celeste-foudroyant"] .charBow.equipped::after {
  background: linear-gradient(180deg, #ffffff, #fff9c4, #fdd835) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(253, 216, 53, 0.6) !important;
  width: 2.5px !important;
}

/* Faux Nécromantique du Maître (lvl 145, staff légendaire, Cimetière) — Lame spectrale violette */
.charSprite[data-staff="faux-necromantique-du-maitre"] .charStaff.equipped {
  background: linear-gradient(90deg, #1a1a2e, #7e57c2 40%, #4a148c 75%, #1a1a2e 100%) !important;
  border-color: #311b92 !important;
  box-shadow: 0 0 12px rgba(126, 87, 194, 0.7), 0 0 24px rgba(74, 20, 140, 0.4) !important;
}

.charSprite[data-staff="faux-necromantique-du-maitre"] .charStaff.equipped::before {
  width: 14px !important;
  height: 22px !important;
  top: -18px !important;
  left: -5px !important;
  border-radius: 2px 60% 2px 2px !important;
  background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 30%, #9c27b0 70%) !important;
  box-shadow: 0 0 14px rgba(156, 39, 176, 0.8), 0 0 28px rgba(156, 39, 176, 0.4) !important;
  animation: orbPulse 1.6s ease-in-out infinite !important;
}

/* Arc pour la Faux Nécromantique — variante arc si applicable */
.charSprite[data-bow="arc-de-foudre"] .charBow.equipped {
  border-color: #29b6f6 !important;
  background: linear-gradient(180deg, #e1f5fe, #0288d1 55%, #01579b 100%) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(41, 182, 246, 0.6) !important;
}

.charSprite[data-bow="arc-de-foudre"] .charBow.equipped::after {
  background: linear-gradient(180deg, #ffffff, #e1f5fe, #29b6f6) !important;
  box-shadow: 0 0 6px rgba(41, 182, 246, 0.8) !important;
}

/* Biome glow overrides for bows and staffs (matching existing biome system) */
/* Ice / Frost bows */
.charSprite[data-bow*="givre"] .charBow.equipped,
.charSprite[data-bow*="glace"] .charBow.equipped,
.charSprite[data-bow*="gel"] .charBow.equipped {
  border-color: #80deea !important;
  background: linear-gradient(180deg, #e0f7fa, #26c6da 55%, #0097a7 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 151, 167, 0.6) !important;
}

.charSprite[data-bow*="givre"] .charBow.equipped::after,
.charSprite[data-bow*="glace"] .charBow.equipped::after,
.charSprite[data-bow*="gel"] .charBow.equipped::after {
  background: linear-gradient(180deg, #fff, #e0f7fa, #80deea) !important;
}

/* Fire / Magma staffs */
.charSprite[data-staff*="lave"] .charStaff.equipped,
.charSprite[data-staff*="feu"] .charStaff.equipped,
.charSprite[data-staff*="magma"] .charStaff.equipped {
  background: linear-gradient(90deg, #212121, #ff5722 40%, #b71c1c 80%, #212121 100%) !important;
  box-shadow: 0 0 14px rgba(255, 87, 34, 0.8) !important;
}

.charSprite[data-staff*="lave"] .charStaff.equipped::before,
.charSprite[data-staff*="feu"] .charStaff.equipped::before,
.charSprite[data-staff*="magma"] .charStaff.equipped::before {
  background: radial-gradient(circle at 35% 30%, #ffcc02 0%, #ff6f00 35%, #dd2c00 70%) !important;
  box-shadow: 0 0 16px rgba(255, 111, 0, 0.9), 0 0 30px rgba(221, 44, 0, 0.5) !important;
}

/* Celestial / Gold staffs */
.charSprite[data-staff*="celeste"] .charStaff.equipped,
.charSprite[data-staff*="archange"] .charStaff.equipped,
.charSprite[data-staff*="divin"] .charStaff.equipped {
  background: linear-gradient(90deg, #f57f17, #fff176 40%, #f57f17 80%) !important;
  box-shadow: 0 0 16px rgba(255, 241, 118, 0.8), 0 0 30px rgba(255, 193, 7, 0.4) !important;
}

.charSprite[data-staff*="celeste"] .charStaff.equipped::before,
.charSprite[data-staff*="archange"] .charStaff.equipped::before,
.charSprite[data-staff*="divin"] .charStaff.equipped::before {
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #fff9c4 25%, #ffd54f 55%, #e65100 90%) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.8), 0 0 36px rgba(255, 213, 79, 0.6) !important;
}

/* Forest / Nature staffs */
.charSprite[data-staff*="ancestral"] .charStaff.equipped,
.charSprite[data-staff*="arbre"] .charStaff.equipped,
.charSprite[data-staff*="erable"] .charStaff.equipped {
  background: linear-gradient(90deg, #33691e, #a5d6a7 40%, #33691e 80%) !important;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
}

.charSprite[data-staff*="ancestral"] .charStaff.equipped::before,
.charSprite[data-staff*="arbre"] .charStaff.equipped::before,
.charSprite[data-staff*="erable"] .charStaff.equipped::before {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #a5d6a7 30%, #43a047 65%, #1b5e20 95%) !important;
  box-shadow: 0 0 14px rgba(67, 160, 71, 0.7), 0 0 28px rgba(27, 94, 32, 0.4) !important;
}

/* Dark / Necromancer staffs */
.charSprite[data-staff*="necro"] .charStaff.equipped,
.charSprite[data-staff*="spectre"] .charStaff.equipped,
.charSprite[data-staff*="mort"] .charStaff.equipped,
.charSprite[data-staff*="faux"] .charStaff.equipped {
  background: linear-gradient(90deg, #1a1a2e, #7e57c2 40%, #4a148c 75%, #1a1a2e 100%) !important;
  box-shadow: 0 0 12px rgba(126, 87, 194, 0.7) !important;
}

.charSprite[data-staff*="necro"] .charStaff.equipped::before,
.charSprite[data-staff*="spectre"] .charStaff.equipped::before,
.charSprite[data-staff*="mort"] .charStaff.equipped::before,
.charSprite[data-staff*="faux"] .charStaff.equipped::before {
  background: radial-gradient(circle at 35% 30%, #e1bee7 0%, #ab47bc 40%, #6a1b9a 80%) !important;
  box-shadow: 0 0 14px rgba(171, 71, 188, 0.8) !important;
}

/* Celestial / Gold bows */
.charSprite[data-bow*="celeste"] .charBow.equipped,
.charSprite[data-bow*="foudroyant"] .charBow.equipped,
.charSprite[data-bow*="divin"] .charBow.equipped {
  border-color: #fdd835 !important;
  background: linear-gradient(180deg, #ffe082, #ffd54f 40%, #f9a825 75%, #e65100 100%) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(253, 216, 53, 0.7) !important;
}

.charSprite[data-bow*="celeste"] .charBow.equipped::after,
.charSprite[data-bow*="foudroyant"] .charBow.equipped::after,
.charSprite[data-bow*="divin"] .charBow.equipped::after {
  background: linear-gradient(180deg, #ffffff, #fff9c4, #fdd835) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9) !important;
}

/* Nature / Forest bows */
.charSprite[data-bow*="bois"] .charBow.equipped,
.charSprite[data-bow*="bambou"] .charBow.equipped,
.charSprite[data-bow*="erable"] .charBow.equipped {
  border-color: #558b2f !important;
  background: linear-gradient(180deg, #689f38, #33691e 55%, #1b5e20 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 6px rgba(85, 139, 47, 0.4) !important;
}

.charSprite[data-bow*="bois"] .charBow.equipped::after,
.charSprite[data-bow*="bambou"] .charBow.equipped::after,
.charSprite[data-bow*="erable"] .charBow.equipped::after {
  background: linear-gradient(180deg, #f9fbe7, #ccff90, #558b2f) !important;
}

/* ==========================================
   PURE CSS RESOURCE ICON RENDERING SYSTEM
   ========================================== */

.resource-css-render-box,
.resource-icon-box {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.resource-large-box .resource-icon-box {
  transform: scale(1.8);
}

.resource-icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.resource-icon-box:hover .resource-icon {
  transform: scale(1.2) rotate(6deg);
}

/* 00A. REAL HORN (Vraie Corne avec Stries) */
.resource-icon.resource-horn {
  width: 22px;
  height: 28px;
  clip-path: polygon(0% 100%, 35% 60%, 75% 20%, 100% 0%, 90% 35%, 65% 85%, 25% 100%) !important;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 6px),
    linear-gradient(150deg, #fef08a 0%, #d97706 45%, #78350f 80%, #451a03 100%) !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)) !important;
}

/* 00B. REAL TOOTH & FANG (Vraie Dent / Crochet d'Ivoire) */
.resource-icon.resource-tooth {
  width: 18px;
  height: 26px;
  clip-path: polygon(40% 0%, 100% 40%, 75% 80%, 50% 100%, 0% 70%, 15% 35%) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 50%, #d97706 80%, #78350f 100%) !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)) !important;
}

.resource-icon.resource-tooth::after {
  content: "" !important;
  position: absolute !important;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 10px;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 2px !important;
}

/* 00C. REAL BONE SKULL (Vrai Crâne avec Orbites & Dents) */
.resource-icon.resource-skull {
  width: 24px;
  height: 24px;
  border-radius: 12px 12px 6px 6px !important;
  background:
    radial-gradient(circle at 7px 9px, #0f172a 2.5px, transparent 3px),
    radial-gradient(circle at 17px 9px, #0f172a 2.5px, transparent 3px),
    linear-gradient(180deg, transparent 13px, #0f172a 13px, #0f172a 16px, transparent 16px),
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 50%, #cbd5e1 80%, #94a3b8 100%) !important;
  border: 1.5px solid #475569 !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8), 0 3px 6px rgba(0, 0, 0, 0.5) !important;
}

.resource-icon.resource-skull::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 14px !important;
  height: 5px !important;
  background: repeating-linear-gradient(90deg, #ffffff 0px, #ffffff 2px, #0f172a 2px, #0f172a 3px) !important;
  border-radius: 0 0 3px 3px !important;
}

/* 00D. REAL 3-TALON flex-mmorpg CLAW (Patte à 3 Griffes / Serres) */
.resource-icon.resource-claw {
  width: 24px;
  height: 26px;
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #cbd5e1 30%, #334155 70%, #0f172a 100%) !important;
  clip-path: polygon(45% 0%, 75% 25%, 60% 65%, 85% 100%, 25% 100%, 35% 65%, 15% 25%) !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)) !important;
}

.resource-icon.resource-claw::before {
  content: "" !important;
  position: absolute !important;
  top: 4px;
  left: -4px;
  width: 14px;
  height: 20px;
  background: linear-gradient(150deg, #fef3c7 0%, #cbd5e1 40%, #1e293b 100%) !important;
  clip-path: polygon(30% 0%, 80% 30%, 50% 100%, 0% 100%, 15% 50%) !important;
}

.resource-icon.resource-claw::after {
  content: "" !important;
  position: absolute !important;
  top: 4px;
  right: -4px;
  width: 14px;
  height: 20px;
  background: linear-gradient(170deg, #fef3c7 0%, #cbd5e1 40%, #1e293b 100%) !important;
  clip-path: polygon(70% 0%, 85% 50%, 100% 100%, 50% 100%, 20% 30%) !important;
}

/* 00E. REAL RUBY HEART (Vrai Cœur Éclatant) */
.resource-icon.resource-heart {
  width: 24px;
  height: 22px;
  clip-path: polygon(50% 100%, 0% 35%, 15% 0%, 50% 25%, 85% 0%, 100% 35%) !important;
  background: linear-gradient(180deg, #f87171 0%, #ef4444 40%, #dc2626 70%, #7f1d1d 100%) !important;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)) !important;
}

/* 00F1. BONNET DE LUTIN (Rouge & Vert avec Grelot - Image User) */
.resource-icon.resource-bonnet,
.resource-icon.resource-bonnet-lutin {
  width: 24px;
  height: 26px;
  position: relative;
  background: linear-gradient(135deg, #f87171 0%, #ef4444 40%, #dc2626 70%, #991b1b 100%) !important;
  clip-path: polygon(20% 100%, 0% 50%, 15% 15%, 50% 0%, 85% 20%, 100% 50%, 80% 100%) !important;
  border-radius: 12px 14px 0 0 !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
}

.resource-icon.resource-bonnet::before,
.resource-icon.resource-bonnet-lutin::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 24px !important;
  height: 12px !important;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #15803d 100%) !important;
  clip-path: polygon(0% 100%, 15% 0%, 35% 80%, 50% 0%, 65% 80%, 85% 0%, 100% 100%) !important;
}

.resource-icon.resource-bonnet::after,
.resource-icon.resource-bonnet-lutin::after {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 3px !important;
  width: 5px !important;
  height: 5px !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #facc15 60%, #ca8a04 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 3px #facc15 !important;
}

/* 00F2. BONNET DE PÈRE NOËL (Rouge & Blanc avec Pompon) */
.resource-icon.resource-bonnet-noel {
  width: 24px;
  height: 26px;
  position: relative;
  background: linear-gradient(135deg, #f87171 0%, #ef4444 40%, #dc2626 70%, #991b1b 100%) !important;
  clip-path: polygon(15% 100%, 0% 60%, 10% 20%, 45% 0%, 85% 25%, 100% 65%, 85% 100%) !important;
  border-radius: 12px 14px 0 0 !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
}

.resource-icon.resource-bonnet-noel::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 24px !important;
  height: 8px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%) !important;
  border-radius: 4px !important;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
}

.resource-icon.resource-bonnet-noel::after {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 2px !important;
  width: 7px !important;
  height: 7px !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f1f5f9 70%, #94a3b8 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 3px #ffffff !important;
}

/* 00F3. BONNET VERT / FÉE (Vert & Or) */
.resource-icon.resource-bonnet-vert {
  width: 24px;
  height: 26px;
  position: relative;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 50%, #15803d 85%, #052e16 100%) !important;
  clip-path: polygon(20% 100%, 0% 50%, 15% 15%, 50% 0%, 85% 20%, 100% 50%, 80% 100%) !important;
  border-radius: 12px 14px 0 0 !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
}

.resource-icon.resource-bonnet-vert::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 24px !important;
  height: 8px !important;
  background: linear-gradient(180deg, #fef08a 0%, #facc15 60%, #ca8a04 100%) !important;
  border-radius: 3px !important;
}

.resource-icon.resource-bonnet-vert::after {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 3px !important;
  width: 5px !important;
  height: 5px !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #facc15 60%, #ca8a04 100%) !important;
  border-radius: 50% !important;
}

/* 00F. REAL flex-mmorpg ÉTOFFE / FABRIC CLOTH (Étoffe pliée avec bordure rouge) */
.resource-icon.resource-cloth {
  width: 26px;
  height: 26px;
  position: relative;
}

.resource-icon.resource-cloth::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  right: 0;
  width: 20px;
  height: 22px;
  background:
    linear-gradient(180deg, #dc2626 0%, #dc2626 6px, transparent 6px),
    linear-gradient(135deg, #ffffff 0%, #fef3c7 50%, #e2e8f0 80%, #cbd5e1 100%) !important;
  border-radius: 4px 6px 12px 4px !important;
  border: 1px solid #78350f !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
  transform: rotate(10deg) skewY(-5deg) !important;
}

.resource-icon.resource-cloth::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 18px;
  height: 20px;
  background:
    linear-gradient(180deg, #b91c1c 0%, #b91c1c 5px, transparent 5px),
    linear-gradient(135deg, #fef3c7 0%, #cbd5e1 70%, #94a3b8 100%) !important;
  border-radius: 4px 4px 10px 4px !important;
  border: 1px solid #451a03 !important;
  z-index: -1 !important;
  transform: rotate(-15deg) !important;
}

/* 0A. MULTI-GRAIN SEED CLUSTER (Plusieurs Graines de Blé Doré) */
.resource-icon.resource-grain {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(ellipse at 7px 6px, #fef08a 0%, #facc15 65%, #ca8a04 100%),
    radial-gradient(ellipse at 19px 7px, #fef08a 0%, #facc15 65%, #ca8a04 100%),
    radial-gradient(ellipse at 13px 13px, #ffffff 0%, #fef08a 40%, #eab308 100%),
    radial-gradient(ellipse at 6px 18px, #fef08a 0%, #facc15 65%, #ca8a04 100%),
    radial-gradient(ellipse at 20px 18px, #fef08a 0%, #facc15 65%, #ca8a04 100%) !important;
  filter: drop-shadow(0 3px 5px rgba(161, 98, 7, 0.7)) !important;
}

.resource-icon.resource-grain::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, transparent 4px, #78350f 5px, transparent 6px),
    linear-gradient(180deg, transparent 11px, #78350f 12px, transparent 13px),
    linear-gradient(180deg, transparent 16px, #78350f 17px, transparent 18px) !important;
  opacity: 0.6 !important;
}

/* 0A1. SEIGLE (Plusieurs Graines de Seigle Bronze) */
.resource-icon.resource-grain-seigle {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(ellipse at 7px 6px, #fde68a 0%, #d97706 65%, #78350f 100%),
    radial-gradient(ellipse at 19px 7px, #fde68a 0%, #d97706 65%, #78350f 100%),
    radial-gradient(ellipse at 13px 13px, #fffbeb 0%, #d97706 40%, #78350f 100%),
    radial-gradient(ellipse at 6px 18px, #fde68a 0%, #d97706 65%, #78350f 100%),
    radial-gradient(ellipse at 20px 18px, #fde68a 0%, #d97706 65%, #78350f 100%) !important;
  filter: drop-shadow(0 3px 5px rgba(120, 53, 15, 0.8)) !important;
}

.resource-icon.resource-grain-seigle::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, transparent 4px, #451a03 5px, transparent 6px),
    linear-gradient(180deg, transparent 11px, #451a03 12px, transparent 13px),
    linear-gradient(180deg, transparent 16px, #451a03 17px, transparent 18px) !important;
  opacity: 0.7 !important;
}

/* 0A2. AVOINE (Plusieurs Graines d'Avoine Allongées) */
.resource-icon.resource-grain-avoine {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(ellipse at 6px 5px, #fffbeb 0%, #facc15 65%, #ca8a04 100%),
    radial-gradient(ellipse at 18px 6px, #fffbeb 0%, #facc15 65%, #ca8a04 100%),
    radial-gradient(ellipse at 12px 13px, #ffffff 0%, #fef08a 40%, #ca8a04 100%),
    radial-gradient(ellipse at 5px 18px, #fffbeb 0%, #facc15 65%, #ca8a04 100%),
    radial-gradient(ellipse at 20px 18px, #fffbeb 0%, #facc15 65%, #ca8a04 100%) !important;
  filter: drop-shadow(0 3px 5px rgba(161, 98, 7, 0.7)) !important;
}

/* 0A3. MAÏS (Plusieurs Grains de Maïs Jaune Bombe) */
.resource-icon.resource-grain-mais {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(circle at 6px 6px, #ffffff 1px, #fef08a 3px, #eab308 6px, transparent 6.5px),
    radial-gradient(circle at 18px 6px, #ffffff 1px, #fef08a 3px, #eab308 6px, transparent 6.5px),
    radial-gradient(circle at 12px 13px, #ffffff 1.5px, #facc15 4px, #ca8a04 7px, transparent 7.5px),
    radial-gradient(circle at 6px 19px, #ffffff 1px, #fef08a 3px, #eab308 6px, transparent 6.5px),
    radial-gradient(circle at 19px 19px, #ffffff 1px, #fef08a 3px, #eab308 6px, transparent 6.5px) !important;
  filter: drop-shadow(0 3px 5px rgba(161, 98, 7, 0.8)) !important;
}

/* 0A4. RIZ (Plusieurs Grains de Riz Blanc Nacré) */
.resource-icon.resource-grain-riz {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(ellipse at 6px 6px, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%),
    radial-gradient(ellipse at 18px 7px, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%),
    radial-gradient(ellipse at 12px 13px, #ffffff 0%, #f8fafc 40%, #94a3b8 100%),
    radial-gradient(ellipse at 5px 18px, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%),
    radial-gradient(ellipse at 19px 18px, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%) !important;
  filter: drop-shadow(0 3px 5px rgba(148, 163, 184, 0.8)) !important;
}

/* 0A5. QUINOA (Plusieurs Perles de Quinoa Bordeaux) */
.resource-icon.resource-grain-quinoa {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(circle at 6px 6px, #fda4af 1px, #f43f5e 3px, #be185d 5px, transparent 5.5px),
    radial-gradient(circle at 18px 6px, #fda4af 1px, #fb7185 3px, #9f1239 5px, transparent 5.5px),
    radial-gradient(circle at 12px 12px, #ffffff 1px, #f43f5e 3.5px, #881337 6px, transparent 6.5px),
    radial-gradient(circle at 5px 18px, #fda4af 1px, #fb7185 3px, #be185d 5px, transparent 5.5px),
    radial-gradient(circle at 19px 18px, #fda4af 1px, #f43f5e 3px, #9f1239 5px, transparent 5.5px) !important;
  filter: drop-shadow(0 3px 5px rgba(159, 18, 57, 0.8)) !important;
}

/* 0A6. MILLET (Plusieurs Perles de Millet Dorées) */
.resource-icon.resource-grain-millet {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(circle at 6px 6px, #ffffff 1px, #fef08a 3px, #eab308 5px, transparent 5.5px),
    radial-gradient(circle at 18px 6px, #ffffff 1px, #fef08a 3px, #ca8a04 5px, transparent 5.5px),
    radial-gradient(circle at 12px 12px, #ffffff 1px, #facc15 3.5px, #a16207 6px, transparent 6.5px),
    radial-gradient(circle at 5px 18px, #ffffff 1px, #fef08a 3px, #eab308 5px, transparent 5.5px),
    radial-gradient(circle at 19px 18px, #ffffff 1px, #fef08a 3px, #ca8a04 5px, transparent 5.5px) !important;
  filter: drop-shadow(0 3px 5px rgba(161, 98, 7, 0.8)) !important;
}

/* 0A7. ORGE / SARRASIN / ÉPEAUTRE (Plusieurs Grains Ambrés) */
.resource-icon.resource-grain-orge {
  width: 26px;
  height: 24px;
  position: relative;
  background:
    radial-gradient(ellipse at 6px 6px, #fef08a 0%, #facc15 50%, #a16207 100%),
    radial-gradient(ellipse at 18px 7px, #fde68a 0%, #eab308 50%, #78350f 100%),
    radial-gradient(ellipse at 12px 13px, #ffffff 0%, #fef08a 40%, #a16207 100%),
    radial-gradient(ellipse at 5px 18px, #fef08a 0%, #facc15 50%, #a16207 100%),
    radial-gradient(ellipse at 19px 18px, #fde68a 0%, #eab308 50%, #78350f 100%) !important;
  filter: drop-shadow(0 3px 5px rgba(120, 53, 15, 0.8)) !important;
}

/* 0B. REAL FISH (Vrai Poisson avec Nageoires et Œil) */
.resource-icon.resource-fish {
  width: 26px;
  height: 16px;
  border-radius: 60% 80% 40% 50% !important;
  background:
    radial-gradient(circle at 5px 5px, #ffffff 0.8px, #0f172a 1.8px, transparent 2.4px),
    linear-gradient(180deg, #e0f2fe 0%, #38bdf8 40%, #0284c7 75%, #0f172a 100%) !important;
  border: 1.5px solid #0369a1 !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

.resource-icon.resource-fish::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%) !important;
  clip-path: polygon(0% 40%, 100% 0%, 60% 50%, 100% 100%, 0% 60%) !important;
}

.resource-icon.resource-fish::before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  left: 10px !important;
  width: 8px !important;
  height: 6px !important;
  background: linear-gradient(180deg, #7dd3fc, #0284c7) !important;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%) !important;
}

/* 0B1. POISSON PANÉ */
.resource-icon.resource-fish-pane {
  width: 28px;
  height: 16px;
  position: relative;
  background:
    repeating-linear-gradient(45deg, #d97706 0px, #b45309 3px, #facc15 5px),
    linear-gradient(180deg, #facc15 0%, #d97706 60%, #78350f 100%) !important;
  border-radius: 6px !important;
  border: 1.5px solid #78350f !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

.resource-icon.resource-fish-pane::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  right: -2px !important;
  width: 9px !important;
  height: 9px !important;
  background: linear-gradient(135deg, #fef08a, #eab308) !important;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%) !important;
  border: 1px solid #a16207 !important;
}

/* 0B2. POISSON DE FEU & MAGMATIQUE */
.resource-icon.resource-fish-feu {
  width: 26px;
  height: 16px;
  position: relative;
  border-radius: 60% 80% 40% 50% !important;
  background:
    radial-gradient(circle at 5px 5px, #fef08a 0.8px, #dc2626 1.8px, transparent 2.4px),
    repeating-linear-gradient(135deg, #18181b 0px, #18181b 3px, transparent 3px, transparent 6px),
    linear-gradient(180deg, #f97316 0%, #ef4444 50%, #7f1d1d 100%) !important;
  border: 1.5px solid #7f1d1d !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.9), inset 0 2px 3px rgba(254, 240, 138, 0.7) !important;
}

.resource-icon.resource-fish-feu::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #facc15 0%, #ea580c 60%, #b91c1c 100%) !important;
  clip-path: polygon(0% 40%, 100% 0%, 60% 50%, 100% 100%, 0% 60%) !important;
}

/* 0B3. POISSON DES GLACES */
.resource-icon.resource-fish-glace {
  width: 26px;
  height: 16px;
  position: relative;
  border-radius: 60% 80% 40% 50% !important;
  background:
    radial-gradient(circle at 5px 5px, #ffffff 1px, #0284c7 2px, transparent 2.5px),
    linear-gradient(180deg, #ffffff 0%, #e0f2fe 40%, #38bdf8 75%, #0369a1 100%) !important;
  border: 1.5px solid #0284c7 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.9) !important;
}

.resource-icon.resource-fish-glace::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #7dd3fc 60%, #0284c7 100%) !important;
  clip-path: polygon(0% 40%, 100% 0%, 60% 50%, 100% 100%, 0% 60%) !important;
}

/* 0B4. POISSON SPECTRAL */
.resource-icon.resource-fish-spectral {
  width: 26px;
  height: 16px;
  position: relative;
  border-radius: 60% 80% 40% 50% !important;
  background:
    radial-gradient(circle at 5px 5px, #ffffff 1px, #0d9488 2px, transparent 2.5px),
    linear-gradient(180deg, #ccfbf1 0%, #2dd4bf 50%, #0f766e 100%) !important;
  border: 1.5px solid #5eead4 !important;
  box-shadow: 0 0 12px #2dd4bf, 0 0 4px #a7f3d0 !important;
  opacity: 0.9 !important;
}

.resource-icon.resource-fish-spectral::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #a7f3d0 0%, #2dd4bf 60%, #115e59 100%) !important;
  clip-path: polygon(0% 40%, 100% 0%, 60% 50%, 100% 100%, 0% 60%) !important;
}

/* 0B5. POISSON SQUELETTE */
.resource-icon.resource-fish-squelette {
  width: 26px;
  height: 14px;
  position: relative;
  background:
    repeating-linear-gradient(90deg, #ffffff 0px, #ffffff 2px, #0f172a 2px, #0f172a 4px),
    linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%) !important;
  clip-path: polygon(0% 50%, 30% 0%, 100% 30%, 100% 70%, 30% 100%) !important;
  border: 1px solid #334155 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

/* 0B6. POISSON-GLOBE */
.resource-icon.resource-fish-globe {
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 6px 6px, #ffffff 1px, #0f172a 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, #fef08a 0%, #a3e635 60%, #4d7c0f 100%) !important;
  border: 1.5px solid #3f6212 !important;
  box-shadow: 0 0 6px rgba(132, 204, 22, 0.7) !important;
}

/* 0B7. POISSON NUAGE */
.resource-icon.resource-fish-nuage {
  width: 26px;
  height: 18px;
  position: relative;
  border-radius: 12px 14px 10px 12px !important;
  background:
    radial-gradient(circle at 5px 6px, #38bdf8 1px, transparent 1.8px),
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 60%, #bae6fd 100%) !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), inset 0 2px 3px #ffffff !important;
}

/* 0B8. POISSON STELLAIRE */
.resource-icon.resource-fish-stellaire {
  width: 26px;
  height: 16px;
  position: relative;
  border-radius: 60% 80% 40% 50% !important;
  background:
    radial-gradient(circle at 4px 5px, #ffffff 1.2px, transparent 1.6px),
    radial-gradient(circle at 12px 8px, #ffffff 1px, transparent 1.4px),
    radial-gradient(circle at 18px 4px, #ffffff 1px, transparent 1.4px),
    linear-gradient(180deg, #818cf8 0%, #312e81 60%, #1e1b4b 100%) !important;
  border: 1.5px solid #a5b4fc !important;
  box-shadow: 0 0 10px #818cf8, inset 0 2px 3px #c7d2fe !important;
}

.resource-icon.resource-fish-stellaire::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #c7d2fe 0%, #818cf8 60%, #312e81 100%) !important;
  clip-path: polygon(0% 40%, 100% 0%, 60% 50%, 100% 100%, 0% 60%) !important;
}

/* 0B9. POISSON SAUVAGE TRUITE D'EAU DOUCE */
.resource-icon.resource-fish-douce {
  width: 26px;
  height: 16px;
  position: relative;
  border-radius: 60% 80% 40% 50% !important;
  background:
    radial-gradient(circle at 5px 5px, #ffffff 0.8px, #0f172a 1.8px, transparent 2.4px),
    repeating-radial-gradient(circle at 12px 8px, #365314 0px, #365314 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #84cc16 0%, #65a30d 50%, #365314 100%) !important;
  border: 1.5px solid #365314 !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

.resource-icon.resource-fish-douce::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #84cc16 0%, #65a30d 60%, #365314 100%) !important;
  clip-path: polygon(0% 40%, 100% 0%, 60% 50%, 100% 100%, 0% 60%) !important;
}

/* 0C. REAL CARROT / VEGGIE (Vraie Carotte Orange avec Feuilles) */
.resource-icon.resource-veggie {
  width: 18px;
  height: 26px;
  clip-path: polygon(15% 0%, 85% 0%, 75% 40%, 55% 80%, 50% 100%, 45% 80%, 25% 40%) !important;
  background:
    repeating-linear-gradient(180deg, #ea580c 0px, #ea580c 4px, #c2410c 4px, #c2410c 6px),
    linear-gradient(135deg, #fb923c 0%, #f97316 50%, #c2410c 100%) !important;
  filter: drop-shadow(0 2px 4px rgba(194, 65, 12, 0.6)) !important;
}

.resource-icon.resource-veggie::before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 12px !important;
  height: 7px !important;
  background: linear-gradient(135deg, #4ade80, #15803d) !important;
  clip-path: polygon(0% 100%, 30% 0%, 50% 60%, 70% 0%, 100% 100%) !important;
}

/* 0D. REAL MUSHROOM (Vrai Champignon Rouge à Pois Blancs) */
.resource-icon.resource-mushroom {
  width: 22px;
  height: 22px;
  background:
    radial-gradient(circle at 6px 6px, #ffffff 1.2px, transparent 1.6px),
    radial-gradient(circle at 16px 6px, #ffffff 1.2px, transparent 1.6px),
    radial-gradient(circle at 11px 3px, #ffffff 1px, transparent 1.4px),
    linear-gradient(180deg, #f87171 0%, #ef4444 50%, #991b1b 100%) !important;
  border-radius: 12px 12px 4px 4px !important;
  border: 1.5px solid #7f1d1d !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

.resource-icon.resource-mushroom::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  background: linear-gradient(180deg, #fef3c7 0%, #d97706 100%) !important;
  border-radius: 2px 2px 4px 4px !important;
  border: 1px solid #78350f !important;
}

/* 0E. REAL RAW MEAT (Vraie Tranche de Viande Rouge Persillée) */
.resource-icon.resource-meat {
  width: 24px;
  height: 22px;
  border-radius: 10px 14px 6px 12px !important;
  background:
    linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.7) 42%, transparent 45%),
    linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  border: 1.5px solid #7f1d1d !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5) !important;
}

.resource-icon.resource-meat::before {
  content: "" !important;
  position: absolute !important;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: #fef3c7 !important;
  border-radius: 50% !important;
  border: 1px solid #78350f !important;
}

/* 1. REAL 3D WOODEN LOG (Rondin de bois 3D avec cernes et écorce) */
.resource-icon.resource-wood,
.resource-icon.resource-wood-peuplier,
.resource-icon.resource-wood-hetre,
.resource-icon.resource-wood-chene,
.resource-icon.resource-wood-pin,
.resource-icon.resource-wood-acacia,
.resource-icon.resource-wood-teck,
.resource-icon.resource-wood-noyer,
.resource-icon.resource-wood-bambou {
  width: 28px;
  height: 20px;
  position: relative;
  border-radius: 10px 4px 4px 10px !important;
  border: 1.5px solid #292524 !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset -3px 0 5px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.5) !important;
  transform: rotate(-10deg) !important;
}

.resource-icon.resource-wood {
  background:
    radial-gradient(circle at 8px 10px, #d97706 1.5px, #78350f 3.5px, #b45309 5.5px, #451a03 7.5px, transparent 8.5px),
    linear-gradient(180deg, #92400e 0%, #78350f 45%, #451a03 100%) !important;
}

.resource-icon.resource-wood-peuplier {
  background:
    radial-gradient(circle at 8px 10px, #fffbeb 1.5px, #fef08a 3.5px, #fde68a 5.5px, #d97706 7.5px, transparent 8.5px),
    linear-gradient(180deg, #d97706 0%, #a16207 45%, #713f12 100%) !important;
  border-color: #713f12 !important;
}

.resource-icon.resource-wood-hetre {
  background:
    radial-gradient(circle at 8px 10px, #fff7ed 1.5px, #fed7aa 3.5px, #fb923c 5.5px, #c2410c 7.5px, transparent 8.5px),
    linear-gradient(180deg, #c2410c 0%, #9a3412 45%, #7c2d12 100%) !important;
  border-color: #7c2d12 !important;
}

.resource-icon.resource-wood-chene {
  background:
    radial-gradient(circle at 8px 10px, #f8fafc 1.5px, #cbd5e1 3.5px, #94a3b8 5.5px, #475569 7.5px, transparent 8.5px),
    linear-gradient(180deg, #475569 0%, #334155 45%, #1e293b 100%) !important;
  border-color: #1e293b !important;
}

.resource-icon.resource-wood-pin {
  background:
    radial-gradient(circle at 8px 10px, #fef9c3 1.5px, #facc15 3.5px, #eab308 5.5px, #854d0e 7.5px, transparent 8.5px),
    linear-gradient(180deg, #ca8a04 0%, #854d0e 45%, #451a03 100%) !important;
  border-color: #451a03 !important;
}

.resource-icon.resource-wood-acacia {
  background:
    radial-gradient(circle at 8px 10px, #ffedd5 1.5px, #fb923c 3.5px, #c2410c 5.5px, #451a03 7.5px, transparent 8.5px),
    linear-gradient(180deg, #9a3412 0%, #78350f 45%, #292524 100%) !important;
  border-color: #292524 !important;
}

.resource-icon.resource-wood-teck {
  background:
    radial-gradient(circle at 8px 10px, #fee2e2 1.5px, #f87171 3.5px, #b91c1c 5.5px, #451a03 7.5px, transparent 8.5px),
    linear-gradient(180deg, #991b1b 0%, #7f1d1d 45%, #292524 100%) !important;
  border-color: #292524 !important;
}

.resource-icon.resource-wood-noyer {
  background:
    radial-gradient(circle at 8px 10px, #78350f 1.5px, #451a03 3.5px, #292524 5.5px, #0f172a 7.5px, transparent 8.5px),
    linear-gradient(180deg, #292524 0%, #1c1917 45%, #0f172a 100%) !important;
  border-color: #0f172a !important;
}

.resource-icon.resource-wood-bambou {
  background:
    radial-gradient(circle at 8px 10px, #f0fdf4 1.5px, #86efac 3.5px, #22c55e 5.5px, #052e16 7.5px, transparent 8.5px),
    linear-gradient(180deg, #4ade80 0%, #16a34a 45%, #052e16 100%) !important;
  border-color: #052e16 !important;
}

.resource-icon.resource-wood::before,
.resource-icon.resource-wood-peuplier::before,
.resource-icon.resource-wood-hetre::before,
.resource-icon.resource-wood-chene::before,
.resource-icon.resource-wood-pin::before,
.resource-icon.resource-wood-acacia::before,
.resource-icon.resource-wood-teck::before,
.resource-icon.resource-wood-noyer::before,
.resource-icon.resource-wood-bambou::before {
  content: "" !important;
  position: absolute !important;
  top: -4px !important;
  right: -2px !important;
  width: 9px !important;
  height: 9px !important;
  background: linear-gradient(135deg, #4ade80, #15803d) !important;
  border-radius: 0 85% 0 85% !important;
  border: 1px solid #14532d !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 2. ORE & CRYSTAL (Real Rocky Matrix Base with Protruding Gold Crystals) */
.resource-icon.resource-ore {
  width: 24px;
  height: 24px;
  background:
    radial-gradient(circle at 6px 6px, #ffffff 1px, transparent 2px),
    linear-gradient(135deg, #fef08a 0%, #eab308 30%, #475569 31%, #334155 70%, #1e293b 100%) !important;
  clip-path: polygon(25% 0%, 75% 0%, 100% 35%, 85% 100%, 15% 100%, 0% 40%) !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)) !important;
}

.resource-icon.resource-ore::after {
  content: "" !important;
  position: absolute !important;
  top: 1px;
  left: 6px;
  width: 7px;
  height: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #facc15 60%, #ca8a04 100%) !important;
  clip-path: polygon(50% 0%, 100% 80%, 70% 100%, 30% 100%, 0% 80%) !important;
  box-shadow: 0 0 4px #fef08a !important;
}

/* 3. FEATHER (Real Feather Quill with Central Shaft & Barb Vanes) */
.resource-icon.resource-feather {
  width: 20px;
  height: 28px;
  clip-path: polygon(50% 0%, 95% 25%, 80% 60%, 95% 75%, 50% 100%, 5% 75%, 20% 60%, 5% 25%) !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #38bdf8 45%, #0284c7 80%, #0369a1 100%) !important;
  filter: drop-shadow(0 2px 5px rgba(2, 132, 199, 0.7)) !important;
}

.resource-icon.resource-feather::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 80%, #94a3b8 100%) !important;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* 4. REAL flex-mmorpg LEATHER HIDE (Cuir de Bouc avec Fourrure) */
.resource-icon.resource-fur {
  width: 28px;
  height: 24px;
  position: relative;
  background:
    linear-gradient(135deg, transparent 20%, rgba(254, 240, 138, 0.6) 35%, rgba(217, 119, 6, 0.4) 45%, transparent 60%),
    linear-gradient(150deg, #92400e 0%, #78350f 50%, #451a03 100%) !important;
  border-radius: 6px 12px 6px 14px !important;
  border: 1.5px solid #292524 !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.5) !important;
  transform: rotate(-12deg) !important;
}

.resource-icon.resource-fur::before {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 2px !important;
  width: 24px !important;
  height: 10px !important;
  background:
    radial-gradient(circle at 4px 5px, #fef3c7 3px, #d97706 4px, transparent 4.5px),
    radial-gradient(circle at 11px 6px, #fef3c7 3.5px, #d97706 4.5px, transparent 5px),
    radial-gradient(circle at 18px 5px, #fef3c7 3px, #d97706 4.5px, transparent 4.5px) !important;
  z-index: -1 !important;
}

.resource-icon.resource-fur::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 24px !important;
  height: 8px !important;
  border-top: 1px dashed rgba(254, 240, 138, 0.5) !important;
}

/* 5. REAL CARTOON flex-mmorpg BONE (Os avec 2 têtes d'articulation doubles) */
.resource-icon.resource-bone {
  width: 24px;
  height: 8px;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fef3c7 40%, #e2e8f0 75%, #94a3b8 100%) !important;
  border-radius: 4px !important;
  border: 1.5px solid #1e293b !important;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.9), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
  transform: rotate(-45deg) !important;
}

.resource-icon.resource-bone::before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  right: -6px !important;
  width: 12px !important;
  height: 14px !important;
  background:
    radial-gradient(circle at 4px 4px, #ffffff 2px, #fef3c7 4px, #94a3b8 6px, transparent 6.5px),
    radial-gradient(circle at 8px 10px, #ffffff 2px, #fef3c7 4px, #94a3b8 6px, transparent 6.5px) !important;
  border-radius: 50% !important;
}

.resource-icon.resource-bone::after {
  content: "" !important;
  position: absolute !important;
  bottom: -5px !important;
  left: -6px !important;
  width: 12px !important;
  height: 14px !important;
  background:
    radial-gradient(circle at 4px 4px, #ffffff 2px, #fef3c7 4px, #94a3b8 6px, transparent 6.5px),
    radial-gradient(circle at 8px 10px, #ffffff 2px, #fef3c7 4px, #94a3b8 6px, transparent 6.5px) !important;
  border-radius: 50% !important;
}

/* 6. POTION BOTTLES (Real Glass Bottles with Cork & Distinct Liquid Colors) */

/* 6A. POTION GREEN (Alchimie / Forêt / Nature) */
.resource-icon.resource-fluid,
.resource-icon.resource-fluid-green {
  width: 20px;
  height: 26px;
  border-radius: 6px 6px 12px 12px !important;
  background:
    linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 38%, transparent 38%),
    radial-gradient(circle at 50% 75%, #4ade80 0%, #22c55e 50%, #15803d 85%, #052e16 100%) !important;
  border: 1.5px solid #dcfce7 !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* 6B. POTION RED (Soin / Vie / Santé / Vitalité) */
.resource-icon.resource-fluid-red {
  width: 20px;
  height: 26px;
  border-radius: 6px 6px 12px 12px !important;
  background:
    linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 38%, transparent 38%),
    radial-gradient(circle at 50% 75%, #f87171 0%, #ef4444 50%, #b91c1c 85%, #450a0a 100%) !important;
  border: 1.5px solid #fee2e2 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* 6C. POTION BLUE (Rappel / Téléportation / Cité / Foyer) */
.resource-icon.resource-fluid-blue {
  width: 20px;
  height: 26px;
  border-radius: 6px 6px 12px 12px !important;
  background:
    linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 38%, transparent 38%),
    radial-gradient(circle at 50% 75%, #38bdf8 0%, #0284c7 50%, #0369a1 85%, #082f49 100%) !important;
  border: 1.5px solid #e0f2fe !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* 6D. POTION PURPLE (Mana / Énergie / PA / Puissance) */
.resource-icon.resource-fluid-purple {
  width: 20px;
  height: 26px;
  border-radius: 6px 6px 12px 12px !important;
  background:
    linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 38%, transparent 38%),
    radial-gradient(circle at 50% 75%, #c084fc 0%, #a855f7 50%, #7e22ce 85%, #3b0764 100%) !important;
  border: 1.5px solid #f3e8ff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* 6E. POTION AMBER / GOLD (Métamorphose / Transformation / Poly) */
.resource-icon.resource-fluid-amber {
  width: 20px;
  height: 26px;
  border-radius: 6px 6px 12px 12px !important;
  background:
    linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 38%, transparent 38%),
    radial-gradient(circle at 50% 75%, #fbbf24 0%, #f59e0b 50%, #b45309 85%, #451a03 100%) !important;
  border: 1.5px solid #fef3c7 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* 6F. POTION POISON / TOXIC (Poison / Venin / Malédiction) */
.resource-icon.resource-fluid-poison {
  width: 20px;
  height: 26px;
  border-radius: 6px 6px 12px 12px !important;
  background:
    linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.4) 38%, transparent 38%),
    radial-gradient(circle at 50% 75%, #f472b6 0%, #db2777 50%, #831843 85%, #500724 100%) !important;
  border: 1.5px solid #fce7f3 !important;
  box-shadow: 0 0 12px rgba(219, 39, 119, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* Shared cork stopper & glass highlight */
.resource-icon.resource-fluid::before,
.resource-icon[class*="resource-fluid-"]::before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 9px !important;
  height: 5px !important;
  background: linear-gradient(180deg, #a16207, #78350f) !important;
  border-radius: 3px 3px 1px 1px !important;
  border: 1px solid #451a03 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.resource-icon.resource-fluid::after,
.resource-icon[class*="resource-fluid-"]::after {
  content: "" !important;
  position: absolute !important;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 16px;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 2px !important;
}

/* 7. BOTANICAL LEAF (Real Leaf with Stem Vein & Dew Drop) */
.resource-icon.resource-plant {
  width: 24px;
  height: 24px;
  border-radius: 0 85% 0 85% !important;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 50%, #15803d 85%, #052e16 100%) !important;
  border: 1.5px solid #14532d !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

.resource-icon.resource-plant::before {
  content: "" !important;
  position: absolute !important;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 0 0 60% 0 !important;
}

.resource-icon.resource-plant::after {
  content: "" !important;
  position: absolute !important;
  top: 6px;
  right: 6px;
  width: 4px;
  height: 4px;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 4px #ffffff !important;
}

/* 8. REAL flex-mmorpg MAGENTA DRAGON SCALE (Écaille de Dragon / Dragodinde Magenta) */
.resource-icon.resource-scale {
  width: 26px;
  height: 24px;
  position: relative;
  clip-path: polygon(50% 0%, 80% 20%, 100% 60%, 85% 100%, 50% 80%, 15% 100%, 0% 60%, 20% 20%) !important;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
    linear-gradient(135deg, #f472b6 0%, #db2777 40%, #be185d 75%, #831843 100%) !important;
  filter: drop-shadow(0 3px 6px rgba(131, 24, 67, 0.7)) !important;
}

.resource-icon.resource-scale::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(244, 114, 182, 0.3) 50%, rgba(131, 24, 67, 0.5) 100%) !important;
  clip-path: polygon(0% 0%, 100% 20%, 100% 60%, 70% 100%, 0% 80%) !important;
}

.resource-icon.resource-scale::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #831843 !important;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%) !important;
}

/* 9. MAGIC ORB (Real Ethereal Orb in 3-Claw Pedestal Base) */
.resource-icon.resource-magic {
  width: 24px;
  height: 24px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #f0abfc 25%, #c084fc 55%, #7e22ce 85%, #3b0764 100%) !important;
  border: 1.5px solid #f5d0fe !important;
  box-shadow: 0 0 16px #e879f9, 0 0 6px #c084fc !important;
  animation: magicPulse 1.8s ease-in-out infinite alternate !important;
}

@keyframes magicPulse {
  0% {
    box-shadow: 0 0 10px #c084fc, 0 0 4px #a855f7;
    transform: scale(1);
  }

  100% {
    box-shadow: 0 0 18px #f5d0fe, 0 0 8px #c084fc;
    transform: scale(1.08);
  }
}

/* 10. ANIMAL HAIR / FUR TUFT */
.resource-icon.resource-hair {
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 10% 50% !important;
  background: linear-gradient(135deg, #d35400 0%, #a04000 50%, #5e2700 85%, #2d1808 100%) !important;
  border: 1.5px solid #ffc864 !important;
  box-shadow: 0 0 8px rgba(211, 84, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  position: relative;
}
/* --- END sprites/player.css --- */

/* --- BEGIN sprites/monsters.css --- */
/* =========================
   MONSTER SPRITES (PREMIUM ILLUSTRATION BLENDING)
   ========================= */

@keyframes monsterBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.monsterEntity {
  position: absolute;
  width: 112px;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
  z-index: 45;
  transition: left 0.4s ease-out, top 0.4s ease-out;
}

.monsterEntity:hover {
  filter: drop-shadow(0 0 14px rgba(255, 210, 120, 0.45));
}

.monsterName {
  max-width: 112px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(18, 12, 9, 0.84);
  border: 1px solid rgba(255, 222, 159, 0.28);
  color: #ffe2aa;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monsterSprite {
  position: relative;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.75));
  animation: monsterBob 3.2s ease-in-out infinite;
}

.monsterShadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 44px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.01) 75%);
  z-index: -1;
}

/* Éléments de sprite en pur CSS */
.monsterBody,
.monsterHead,
.monsterFace,
.monsterAdornment,
.monsterLimbs,
.monsterTail {
  display: block;
  position: absolute;
  pointer-events: none;
  border: 1.5px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset -1px -1px 3px rgba(0, 0, 0, 0.4);
}

/* =======================================
   WOLF (Loup)
   ======================================= */
.monsterEntity[data-variant="wolf"] .monsterBody {
  width: 30px;
  height: 20px;
  left: 17px;
  top: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, #57606f, #2f3542);
}

.monsterEntity[data-variant="wolf"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 12px;
  border-radius: 50%;
  background: #2f3542;
}

.monsterEntity[data-variant="wolf"] .monsterLimbs {
  width: 5px;
  height: 14px;
  left: 19px;
  top: 42px;
  border-radius: 2px;
  background: #2f3542;
  box-shadow: 6px 0 #2f3542, 16px 0 #2f3542, 22px 0 #2f3542, inset 1px 1px 2px rgba(255, 255, 255, 0.25);
}

.monsterEntity[data-variant="wolf"] .monsterTail {
  width: 8px;
  height: 16px;
  left: 11px;
  top: 22px;
  border-radius: 4px;
  background: #57606f;
  transform: rotate(-35deg);
}

.monsterEntity[data-variant="wolf"] .monsterAdornment {
  width: 5px;
  height: 8px;
  left: 22px;
  top: 6px;
  border-radius: 3px 3px 0 0;
  background: #57606f;
  box-shadow: 10px 0 #57606f;
  border-bottom: 0;
}

.monsterEntity[data-variant="wolf"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 17px;
  border-radius: 50%;
  background: #ffdd59;
  box-shadow: 6px 0 #ffdd59;
  border: none;
}

/* =======================================
   ARACHNID (Araignée)
   ======================================= */
.monsterEntity[data-variant="arachnid"] .monsterBody {
  width: 34px;
  height: 28px;
  left: 15px;
  top: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a55eea, #4b1a7a);
}

.monsterEntity[data-variant="arachnid"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 34px;
  border-radius: 50%;
  background: #1e1e24;
}

.monsterEntity[data-variant="arachnid"] .monsterLimbs {
  width: 52px;
  height: 14px;
  left: 6px;
  top: 26px;
  border-radius: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: 3px solid #1e1e24;
  border-bottom: 3px solid #1e1e24;
}

.monsterEntity[data-variant="arachnid"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 39px;
  border-radius: 50%;
  background: #ff3f34;
  box-shadow: 3px 0 #ff3f34, 6px 0 #ff3f34;
  border: none;
}

.monsterEntity[data-variant="arachnid"] .monsterAdornment {
  width: 3px;
  height: 5px;
  left: 28px;
  top: 46px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: #ffffff;
  box-shadow: 5px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="arachnid"] .monsterTail {
  display: none;
}

/* =======================================
   CRAB (Crabe)
   ======================================= */
.monsterEntity[data-variant="crab"] .monsterBody {
  width: 32px;
  height: 20px;
  left: 16px;
  top: 28px;
  border-radius: 12px 12px 8px 8px;
  background: radial-gradient(circle at 35% 25%, #ff4757, #ff214f, #9b1c31);
}

.monsterEntity[data-variant="crab"] .monsterHead {
  width: 20px;
  height: 10px;
  left: 22px;
  top: 18px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="crab"] .monsterHead::before,
.monsterEntity[data-variant="crab"] .monsterHead::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 10px;
  background: #ff214f;
  border: 1.5px solid #1c1511;
  border-radius: 2px;
}

.monsterEntity[data-variant="crab"] .monsterHead::before {
  left: 2px;
}

.monsterEntity[data-variant="crab"] .monsterHead::after {
  right: 2px;
}

.monsterEntity[data-variant="crab"] .monsterFace {
  width: 20px;
  height: 10px;
  left: 22px;
  top: 12px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="crab"] .monsterFace::before,
.monsterEntity[data-variant="crab"] .monsterFace::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
}

.monsterEntity[data-variant="crab"] .monsterFace::before {
  left: 0px;
  background: radial-gradient(circle at 50% 50%, #000 1.5px, #fff 1.5px);
}

.monsterEntity[data-variant="crab"] .monsterFace::after {
  right: 0px;
  background: radial-gradient(circle at 50% 50%, #000 1.5px, #fff 1.5px);
}

.monsterEntity[data-variant="crab"] .monsterAdornment {
  width: 48px;
  height: 20px;
  left: 8px;
  top: 22px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="crab"] .monsterAdornment::before,
.monsterEntity[data-variant="crab"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="crab"] .monsterAdornment::before {
  left: 0;
  top: 0;
  border-radius: 12px 3px 12px 12px;
  background: radial-gradient(circle at 60% 40%, #ff6b81, #ff214f, #9b1c31);
  transform: rotate(-20deg);
}

.monsterEntity[data-variant="crab"] .monsterAdornment::after {
  right: 0;
  top: 0;
  border-radius: 3px 12px 12px 12px;
  background: radial-gradient(circle at 40% 40%, #ff6b81, #ff214f, #9b1c31);
  transform: rotate(20deg);
}

.monsterEntity[data-variant="crab"] .monsterLimbs {
  width: 50px;
  height: 16px;
  left: 7px;
  top: 34px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="crab"] .monsterLimbs::before,
.monsterEntity[data-variant="crab"] .monsterLimbs::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 6px;
  background: #ff214f;
  border: 1.5px solid #1c1511;
  border-radius: 3px;
}

.monsterEntity[data-variant="crab"] .monsterLimbs::before {
  left: 0;
  top: 2px;
  transform: rotate(20deg);
  box-shadow: 3px 5px 0 #ff214f, 3px 5px 0 1.5px #1c1511;
}

.monsterEntity[data-variant="crab"] .monsterLimbs::after {
  right: 0;
  top: 2px;
  transform: rotate(-20deg);
  box-shadow: -3px 5px 0 #ff214f, -3px 5px 0 1.5px #1c1511;
}

.monsterEntity[data-variant="crab"] .monsterTail {
  display: none;
}

/* =======================================
   HARE (Lièvre)
   ======================================= */
.monsterEntity[data-variant="hare"] .monsterBody {
  width: 28px;
  height: 26px;
  left: 18px;
  top: 28px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #e3f2fd, #90caf9);
}

.monsterEntity[data-variant="hare"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 12px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="hare"] .monsterHead::before,
.monsterEntity[data-variant="hare"] .monsterHead::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 18px;
  background: #ffffff;
  border: 1.5px solid #1c1511;
  border-radius: 4px;
}

.monsterEntity[data-variant="hare"] .monsterHead::before {
  left: 1px;
  transform: rotate(-8deg);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset 0 -6px 0 #ffb8b8;
}

.monsterEntity[data-variant="hare"] .monsterHead::after {
  right: 1px;
  transform: rotate(8deg);
  box-shadow: inset -1px 1px 0 rgba(255, 255, 255, 0.8), inset 0 -6px 0 #ffb8b8;
}

.monsterEntity[data-variant="hare"] .monsterFace {
  width: 14px;
  height: 10px;
  left: 25px;
  top: 32px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="hare"] .monsterFace::before,
.monsterEntity[data-variant="hare"] .monsterFace::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #2c3e50;
  border-radius: 50%;
}

.monsterEntity[data-variant="hare"] .monsterFace::before {
  left: 1px;
}

.monsterEntity[data-variant="hare"] .monsterFace::after {
  right: 1px;
}

.monsterEntity[data-variant="hare"] .monsterAdornment {
  width: 6px;
  height: 4px;
  left: 29px;
  top: 37px;
  border-radius: 50%;
  background: #ffb8b8;
  border: 1px solid #1c1511;
  box-shadow: none;
}

.monsterEntity[data-variant="hare"] .monsterLimbs {
  width: 34px;
  height: 8px;
  left: 15px;
  top: 50px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="hare"] .monsterLimbs::before,
.monsterEntity[data-variant="hare"] .monsterLimbs::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 8px;
  background: #e3f2fd;
  border: 1.5px solid #1c1511;
  border-radius: 4px;
}

.monsterEntity[data-variant="hare"] .monsterLimbs::before {
  left: 2px;
  transform: rotate(5deg);
}

.monsterEntity[data-variant="hare"] .monsterLimbs::after {
  right: 2px;
  transform: rotate(-5deg);
}

.monsterEntity[data-variant="hare"] .monsterTail {
  width: 10px;
  height: 10px;
  left: 12px;
  top: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #1c1511;
}

/* =======================================
   PIKE (Brochet mutant)
   ======================================= */
.monsterEntity[data-variant="pike"] .monsterBody {
  width: 42px;
  height: 20px;
  left: 11px;
  top: 22px;
  border-radius: 50% 80% 80% 50%;
  background: linear-gradient(135deg, #0f8a5f, #1e3f66, #0e1e38);
  transform: rotate(-10deg);
}

.monsterEntity[data-variant="pike"] .monsterTail {
  width: 14px;
  height: 22px;
  left: 2px;
  top: 23px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="pike"] .monsterTail::before,
.monsterEntity[data-variant="pike"] .monsterTail::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 12px;
  background: linear-gradient(to right, #0f8a5f, #3ae374);
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 50%;
}

.monsterEntity[data-variant="pike"] .monsterTail::before {
  left: 0;
  top: 0;
  transform: rotate(-30deg);
}

.monsterEntity[data-variant="pike"] .monsterTail::after {
  left: 0;
  top: 6px;
  transform: rotate(30deg) scaleY(-1);
}

.monsterEntity[data-variant="pike"] .monsterLimbs {
  width: 30px;
  height: 30px;
  left: 17px;
  top: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="pike"] .monsterLimbs::before,
.monsterEntity[data-variant="pike"] .monsterLimbs::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #3ae374;
  border: 1.5px solid #1c1511;
  border-radius: 10px 0 10px 10px;
}

.monsterEntity[data-variant="pike"] .monsterLimbs::before {
  left: 10px;
  top: 2px;
  transform: rotate(45deg) skewX(-20deg);
  background: linear-gradient(135deg, #3ae374, #0f8a5f);
}

.monsterEntity[data-variant="pike"] .monsterLimbs::after {
  left: 8px;
  bottom: -4px;
  transform: rotate(-135deg) skewX(-20deg);
  background: linear-gradient(135deg, #3ae374, #0f8a5f);
}

.monsterEntity[data-variant="pike"] .monsterHead {
  width: 18px;
  height: 16px;
  left: 40px;
  top: 18px;
  border-radius: 40% 80% 80% 40%;
  background: linear-gradient(135deg, #1e3f66, #0e1e38);
  transform: rotate(-10deg);
}

.monsterEntity[data-variant="pike"] .monsterFace {
  width: 10px;
  height: 10px;
  left: 45px;
  top: 19px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="pike"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #fffb00;
  border: 1px solid #000;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff007f;
}

.monsterEntity[data-variant="pike"] .monsterAdornment {
  width: 12px;
  height: 10px;
  left: 48px;
  top: 25px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="pike"] .monsterAdornment::before,
.monsterEntity[data-variant="pike"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid #ffffff;
}

.monsterEntity[data-variant="pike"] .monsterAdornment::before {
  left: 1px;
  transform: rotate(-20deg);
}

.monsterEntity[data-variant="pike"] .monsterAdornment::after {
  left: 5px;
  transform: rotate(-10deg);
}

/* =======================================
   GOLEM (Golem de pierre)
   ======================================= */
.monsterEntity[data-variant="golem"] .monsterBody {
  width: 38px;
  height: 32px;
  left: 13px;
  top: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7f8c8d, #2c3e50);
}

.monsterEntity[data-variant="golem"] .monsterHead {
  width: 16px;
  height: 14px;
  left: 24px;
  top: 8px;
  border-radius: 3px;
  background: #95a5a6;
}

.monsterEntity[data-variant="golem"] .monsterLimbs {
  width: 50px;
  height: 10px;
  left: 7px;
  top: 20px;
  border-radius: 4px;
  background: #57606f;
}

.monsterEntity[data-variant="golem"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 12px;
  border-radius: 50%;
  background: #00d2d3;
  box-shadow: 6px 0 #00d2d3;
  border: none;
}

.monsterEntity[data-variant="golem"] .monsterAdornment {
  width: 6px;
  height: 6px;
  left: 9px;
  top: 14px;
  transform: rotate(45deg);
  background: #54a0ff;
  box-shadow: 38px 0 #54a0ff;
  border: none;
}

.monsterEntity[data-variant="golem"] .monsterTail {
  width: 8px;
  height: 12px;
  left: 20px;
  top: 46px;
  border-radius: 2px;
  background: #2c3e50;
  box-shadow: 16px 0 #2c3e50;
}

/* =======================================
   SCORPION (Scorpion)
   ======================================= */
.monsterEntity[data-variant="scorpion"] .monsterBody {
  width: 24px;
  height: 16px;
  left: 20px;
  top: 28px;
  border-radius: 4px;
  background: #1e272e;
}

.monsterEntity[data-variant="scorpion"] .monsterLimbs {
  width: 42px;
  height: 8px;
  left: 11px;
  top: 34px;
  border-radius: 3px;
  background: transparent;
  border: 2px solid #1e272e;
  border-bottom: 0;
  box-shadow: none;
}

.monsterEntity[data-variant="scorpion"] .monsterTail {
  width: 8px;
  height: 22px;
  left: 28px;
  top: 8px;
  border-radius: 50% 50% 0 0;
  background: transparent;
  border: 3px solid #ff3f34;
  border-right: 0;
  border-bottom: 0;
  box-shadow: none;
}

.monsterEntity[data-variant="scorpion"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 31px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 4px 0 #2ecc71;
  border: none;
}

.monsterEntity[data-variant="scorpion"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="scorpion"] .monsterAdornment {
  display: none;
}

/* =======================================
   COBRA (Cobra)
   ======================================= */
.monsterEntity[data-variant="cobra"] .monsterBody {
  width: 22px;
  height: 30px;
  left: 21px;
  top: 12px;
  border-radius: 10px 10px 4px 4px;
  background: radial-gradient(circle at 50% 30%, #2ecc71 0%, #16a085 60%, #117a65 100%);
}

.monsterEntity[data-variant="cobra"] .monsterTail {
  width: 30px;
  height: 14px;
  left: 17px;
  top: 38px;
  border-radius: 8px;
  background: #27ae60;
}

.monsterEntity[data-variant="cobra"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 18px;
  border-radius: 50%;
  background: #ff3f34;
  box-shadow: 6px 0 #ff3f34;
  border: none;
}

.monsterEntity[data-variant="cobra"] .monsterAdornment {
  width: 2px;
  height: 6px;
  left: 31px;
  top: 25px;
  background: #ff3f34;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="cobra"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="cobra"] .monsterLimbs {
  display: none;
}

/* =======================================
   BOAR (Sanglier)
   ======================================= */
.monsterEntity[data-variant="boar"] .monsterBody {
  width: 36px;
  height: 24px;
  left: 14px;
  top: 22px;
  border-radius: 8px;
  background: linear-gradient(180deg, #784212, #4a2704);
}

.monsterEntity[data-variant="boar"] .monsterHead {
  width: 20px;
  height: 16px;
  left: 28px;
  top: 16px;
  border-radius: 6px 3px 3px 6px;
  background: #4a2704;
}

.monsterEntity[data-variant="boar"] .monsterAdornment {
  width: 3px;
  height: 8px;
  left: 40px;
  top: 10px;
  transform: rotate(15deg);
  background: #ffffff;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="boar"] .monsterLimbs {
  width: 4px;
  height: 10px;
  left: 17px;
  top: 44px;
  background: #4a2704;
  box-shadow: 8px 0 #4a2704, 18px 0 #4a2704, 26px 0 #4a2704;
}

.monsterEntity[data-variant="boar"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 34px;
  top: 20px;
  border-radius: 50%;
  background: #ff3f34;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="boar"] .monsterTail {
  display: none;
}

/* =======================================
   YETI (Yéti)
   ======================================= */
.monsterEntity[data-variant="yeti"] .monsterBody {
  width: 40px;
  height: 36px;
  left: 12px;
  top: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #dff9fb);
}

.monsterEntity[data-variant="yeti"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 10px;
  border-radius: 50%;
  background: #7ed6df;
}

.monsterEntity[data-variant="yeti"] .monsterLimbs {
  width: 48px;
  height: 12px;
  left: 8px;
  top: 20px;
  border-radius: 5px;
  background: #ffffff;
}

.monsterEntity[data-variant="yeti"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 6px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="yeti"] .monsterAdornment {
  width: 4px;
  height: 8px;
  left: 20px;
  top: 42px;
  background: #ffffff;
  box-shadow: 20px 0 #ffffff;
}

.monsterEntity[data-variant="yeti"] .monsterTail {
  display: none;
}

/* =======================================
   BANDIT (Bandit / Humanoïde)
   ======================================= */
.monsterEntity[data-variant="bandit"] .monsterBody {
  width: 22px;
  height: 30px;
  left: 21px;
  top: 22px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #2c3e50, #0f171e);
}

.monsterEntity[data-variant="bandit"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 6px;
  border-radius: 50%;
  background: #1e272e;
}

.monsterEntity[data-variant="bandit"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 13px;
  border-radius: 50%;
  background: #f1c40f;
  box-shadow: 5px 0 #f1c40f;
  border: none;
}

.monsterEntity[data-variant="bandit"] .monsterLimbs {
  width: 4px;
  height: 14px;
  left: 39px;
  top: 18px;
  transform: rotate(45deg);
  background: #bdc3c7;
}

.monsterEntity[data-variant="bandit"] .monsterTail {
  width: 5px;
  height: 8px;
  left: 24px;
  top: 48px;
  background: #0f171e;
  box-shadow: 11px 0 #0f171e;
}

.monsterEntity[data-variant="bandit"] .monsterAdornment {
  display: none;
}

/* =======================================
   HARPY (Harpie)
   ======================================= */
.monsterEntity[data-variant="harpy"] .monsterBody {
  width: 20px;
  height: 26px;
  left: 22px;
  top: 20px;
  border-radius: 5px;
  background: #8c7ae6;
}

.monsterEntity[data-variant="harpy"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 6px;
  border-radius: 50%;
  background: #f5cd79;
}

.monsterEntity[data-variant="harpy"] .monsterLimbs {
  width: 52px;
  height: 14px;
  left: 6px;
  top: 16px;
  border-radius: 6px;
  background: #6c5ce7;
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 80% 100%, 20% 100%);
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="harpy"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 11px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 5px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="harpy"] .monsterTail {
  width: 4px;
  height: 8px;
  left: 26px;
  top: 44px;
  background: #f5cd79;
  box-shadow: 7px 0 #f5cd79;
}

.monsterEntity[data-variant="harpy"] .monsterAdornment {
  display: none;
}

/* =======================================
   BEAST (Bête)
   ======================================= */
.monsterEntity[data-variant="beast"] .monsterBody {
  width: 30px;
  height: 24px;
  left: 17px;
  top: 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff7f50, #ff4757);
}

.monsterEntity[data-variant="beast"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 10px;
  border-radius: 50%;
  background: #ff4757;
}

.monsterEntity[data-variant="beast"] .monsterAdornment {
  width: 4px;
  height: 8px;
  left: 22px;
  top: 4px;
  border-radius: 50% 50% 0 0;
  background: #eccc68;
  box-shadow: 14px 0 #eccc68;
  border-bottom: 0;
}

.monsterEntity[data-variant="beast"] .monsterLimbs {
  width: 5px;
  height: 12px;
  left: 19px;
  top: 46px;
  background: #ff4757;
  box-shadow: 8px 0 #ff4757, 18px 0 #ff4757, 24px 0 #ff4757;
}

.monsterEntity[data-variant="beast"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 27px;
  top: 15px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 6px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="beast"] .monsterTail {
  display: none;
}

/* =======================================
   GOAT (Bouc)
   ======================================= */
.monsterEntity[data-variant="goat"] .monsterBody {
  width: 32px;
  height: 22px;
  left: 16px;
  top: 24px;
  border-radius: 8px;
  background: #d2dae2;
}

.monsterEntity[data-variant="goat"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 12px;
  border-radius: 40%;
  background: #bdc5c9;
}

.monsterEntity[data-variant="goat"] .monsterAdornment {
  width: 3px;
  height: 10px;
  left: 25px;
  top: 4px;
  border-radius: 3px 3px 0 0;
  background: #57606f;
  box-shadow: 11px 0 #57606f;
  border-bottom: 0;
}

.monsterEntity[data-variant="goat"] .monsterLimbs {
  width: 4px;
  height: 12px;
  left: 18px;
  top: 44px;
  background: #bdc5c9;
  box-shadow: 8px 0 #bdc5c9, 20px 0 #bdc5c9, 26px 0 #bdc5c9;
}

.monsterEntity[data-variant="goat"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 16px;
  border-radius: 50%;
  background: #2c3e50;
  box-shadow: 5px 0 #2c3e50;
  border: none;
}

.monsterEntity[data-variant="goat"] .monsterTail {
  display: none;
}

.monsterGroupBadge {
  margin-top: -2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(49, 34, 20, 0.92);
  border: 1px solid rgba(255, 207, 121, 0.4);
  color: #ffd98a;
  font-size: 10px;
  font-weight: bold;
}

.monsterJoinCombatBtn {
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 116, 0.58);
  background: linear-gradient(180deg, rgba(86, 58, 22, 0.95), rgba(48, 28, 12, 0.92));
  color: #ffe4a1;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 190, 92, 0.18);
}

.monsterStats {
  font-size: 10px;
  line-height: 1.2;
  color: #efe3c8;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.monsterHpBar {
  width: 60px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(26, 14, 12, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.monsterHpBar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7de06e, #d6f07a);
}

/* =========================
   BOSS VISUAL OVERRIDES & ANIMATIONS
   ========================= */

.monsterEntity.is-boss {
  z-index: 99 !important;
  /* Always render on top */
}

.monsterEntity.is-boss .monsterName {
  background: linear-gradient(135deg, #ffb300 0%, #ff8f00 50%, #e65100 100%) !important;
  color: #ffffff !important;
  border: 1px solid #ffd54f !important;
  box-shadow:
    0 0 16px rgba(255, 143, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.6) !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.monsterEntity.is-boss .monsterSprite {
  transform: scale(1.6);
  transform-origin: bottom center;
  animation: bossPulse 2s ease-in-out infinite, monsterBob 2.4s ease-in-out infinite !important;
}

@keyframes bossPulse {

  0%,
  100% {
    filter:
      drop-shadow(0 0 8px rgba(255, 143, 0, 0.75)) drop-shadow(-2px -1px 0 rgba(255, 0, 80, 0.4)) drop-shadow(2px 1px 0 rgba(0, 255, 200, 0.4)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.85));
  }

  50% {
    filter:
      drop-shadow(0 0 22px rgba(255, 215, 0, 0.95)) drop-shadow(-3px -2px 0 rgba(255, 0, 80, 0.5)) drop-shadow(3px 2px 0 rgba(0, 255, 200, 0.5)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.9));
  }
}

/* Combat Board Boss Overrides */
.combatActorSpriteContainer.is-boss {
  transform: scale(1.42) !important;
  transform-origin: bottom center !important;
  filter: drop-shadow(0 0 18px rgba(255, 143, 0, 0.95)) !important;
  z-index: 100 !important;
}

/* =======================================
   FIRE LIZARD (Lézard de feu)
   ======================================= */
.monsterEntity[data-variant="fire_lizard"] .monsterBody {
  width: 32px;
  height: 16px;
  left: 16px;
  top: 30px;
  border-radius: 8px 12px 12px 8px;
  background: linear-gradient(180deg, #ff4d00, #b33600);
}

.monsterEntity[data-variant="fire_lizard"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 34px;
  top: 22px;
  border-radius: 40%;
  background: #b33600;
}

.monsterEntity[data-variant="fire_lizard"] .monsterLimbs {
  width: 4px;
  height: 10px;
  left: 20px;
  top: 42px;
  background: #ff4d00;
  box-shadow: 8px 0 #ff4d00, 16px 0 #ff4d00, 24px 0 #ff4d00;
}

.monsterEntity[data-variant="fire_lizard"] .monsterTail {
  width: 16px;
  height: 6px;
  left: 6px;
  top: 32px;
  border-radius: 3px;
  background: #ff3300;
  transform: rotate(-15deg);
}

.monsterEntity[data-variant="fire_lizard"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 38px;
  top: 26px;
  border-radius: 50%;
  background: #ffff00;
  box-shadow: 3px 0 #ffff00;
  border: none;
}

.monsterEntity[data-variant="fire_lizard"] .monsterAdornment {
  display: none;
}

/* =======================================
   FIRE ELEMENTAL (Élémentaire / Effrit / Spawn)
   ======================================= */
.monsterEntity[data-variant="fire_elemental"] .monsterBody {
  width: 28px;
  height: 28px;
  left: 18px;
  top: 20px;
  border-radius: 50% 50% 10% 10%;
  background: radial-gradient(circle at 35% 35%, #7f8c8d, #2c3e50);
  animation: flameFloat 1.5s ease-in-out infinite alternate;
}

.monsterEntity[data-variant="fire_elemental"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 8px;
  border-radius: 50%;
  background: #e74c3c;
  box-shadow: 0 0 10px #ff3300;
}

.monsterEntity[data-variant="fire_elemental"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 14px;
  border-radius: 50%;
  background: #ffff00;
  box-shadow: 6px 0 #ffff00;
  border: none;
}

.monsterEntity[data-variant="fire_elemental"] .monsterAdornment {
  width: 32px;
  height: 12px;
  left: 16px;
  top: 36px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff3300, #ff9900);
  border: none;
}

.monsterEntity[data-variant="fire_elemental"] .monsterLimbs {
  display: none;
}

.monsterEntity[data-variant="fire_elemental"] .monsterTail {
  display: none;
}

@keyframes flameFloat {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-4px) scale(1.05);
  }
}

/* =======================================
   FIRE LORD (Seigneur des Flammes - Boss)
   ======================================= */
.monsterEntity[data-variant="fire_lord"] .monsterBody {
  width: 44px;
  height: 40px;
  left: 10px;
  top: 20px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, #ff3300 0%, #990000 70%, #1c0000 100%);
  box-shadow: 0 0 15px rgba(255, 51, 0, 0.6);
}

.monsterEntity[data-variant="fire_lord"] .monsterHead {
  width: 22px;
  height: 22px;
  left: 21px;
  top: 4px;
  border-radius: 4px;
  background: #2c0e0e;
  border: 2.5px solid #ff3300;
}

.monsterEntity[data-variant="fire_lord"] .monsterAdornment {
  width: 8px;
  height: 14px;
  left: 16px;
  top: -4px;
  border-radius: 4px 4px 0 0;
  background: #ff9900;
  box-shadow: 24px 0 #ff9900;
  transform: rotate(-10deg);
}

.monsterEntity[data-variant="fire_lord"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 8px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="fire_lord"] .monsterLimbs {
  width: 6px;
  height: 16px;
  left: 16px;
  top: 48px;
  background: #2c0e0e;
  box-shadow: 26px 0 #2c0e0e;
}

.monsterEntity[data-variant="fire_lord"] .monsterTail {
  width: 14px;
  height: 24px;
  left: 6px;
  top: 30px;
  border-radius: 4px;
  background: #ff3300;
  transform: rotate(-30deg);
}

/* =======================================
   WIND SPIRIT (Esprit du Vent / Gardien)
   ======================================= */
.monsterEntity[data-variant="wind_spirit"] .monsterBody {
  width: 24px;
  height: 32px;
  left: 20px;
  top: 18px;
  border-radius: 50% 50% 30% 30%;
  background: radial-gradient(circle at 35% 35%, rgba(224, 247, 250, 0.8), rgba(0, 229, 255, 0.5));
  border: 1px solid rgba(0, 229, 255, 0.8);
}

.monsterEntity[data-variant="wind_spirit"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 25px;
  top: 8px;
  border-radius: 50%;
  background: #e0f7fa;
  box-shadow: 0 0 12px #00e5ff;
}

.monsterEntity[data-variant="wind_spirit"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 13px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 4px 0 #00e5ff;
  border: none;
}

.monsterEntity[data-variant="wind_spirit"] .monsterAdornment {
  width: 28px;
  height: 8px;
  left: 18px;
  top: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  border: none;
}

.monsterEntity[data-variant="wind_spirit"] .monsterLimbs {
  display: none;
}

.monsterEntity[data-variant="wind_spirit"] .monsterTail {
  display: none;
}

/* =======================================
   THUNDER BIRD (Faucon / Phénix)
   ======================================= */
.monsterEntity[data-variant="thunder_bird"] .monsterBody {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f1c40f, #d35400);
}

.monsterEntity[data-variant="thunder_bird"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 25px;
  top: 12px;
  border-radius: 50%;
  background: #f1c40f;
}

.monsterEntity[data-variant="thunder_bird"] .monsterLimbs {
  width: 44px;
  height: 14px;
  left: 10px;
  top: 16px;
  border-radius: 5px;
  background: #9b59b6;
  opacity: 0.8;
  border: 1.5px solid #2c3e50;
}

.monsterEntity[data-variant="thunder_bird"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 28px;
  top: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 5px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="thunder_bird"] .monsterTail {
  width: 8px;
  height: 16px;
  left: 28px;
  top: 40px;
  border-radius: 4px;
  background: #e74c3c;
}

.monsterEntity[data-variant="thunder_bird"] .monsterAdornment {
  display: none;
}

/* =======================================
   FALLEN ARCHANGEL (Archange / Valkyrie / Chérubin)
   ======================================= */
.monsterEntity[data-variant="archangel"] .monsterBody {
  width: 24px;
  height: 30px;
  left: 20px;
  top: 22px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f1c40f);
}

.monsterEntity[data-variant="archangel"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 8px;
  border-radius: 50%;
  background: #f39c12;
}

.monsterEntity[data-variant="archangel"] .monsterAdornment {
  width: 20px;
  height: 20px;
  left: 22px;
  top: 2px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #f1c40f;
  box-shadow: 0 0 10px #f1c40f;
}

.monsterEntity[data-variant="archangel"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 6px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="archangel"] .monsterLimbs {
  width: 54px;
  height: 12px;
  left: 5px;
  top: 18px;
  border-radius: 6px;
  background: #2c3e50;
  border: 1.5px solid #1a252f;
}

.monsterEntity[data-variant="archangel"] .monsterTail {
  width: 6px;
  height: 12px;
  left: 23px;
  top: 48px;
  background: #f1c40f;
  box-shadow: 12px 0 #f1c40f;
}

/* =======================================
   DRAGON (Dragon)
   ======================================= */
.monsterEntity[data-variant="dragon"] .monsterBody {
  width: 48px;
  height: 44px;
  left: 8px;
  top: 12px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 30%, #ff6600, #ff3300);
  box-shadow: 0 0 12px rgba(255, 70, 0, 0.6);
}

.monsterEntity[data-variant="dragon"] .monsterHead {
  width: 28px;
  height: 28px;
  left: 22px;
  top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffcc00, #ff8800);
  box-shadow: 0 0 8px rgba(255, 200, 0, 0.5);
}

.monsterEntity[data-variant="dragon"] .monsterLimbs {
  width: 12px;
  height: 30px;
  left: 20px;
  top: 44px;
  border-radius: 6px;
  background: #ff6600;
}

.monsterEntity[data-variant="dragon"] .monsterTail {
  width: 14px;
  height: 30px;
  left: 32px;
  top: 36px;
  border-radius: 6px 6px 0 0;
  background: #ff3300;
  transform: rotate(30deg);
}

.monsterEntity[data-variant="dragon"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 34px;
  top: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #fff;
}

/* =======================================
   PHOENIX (Phoenix)
   ======================================= */
.monsterEntity[data-variant="phoenix"] .monsterBody {
  width: 44px;
  height: 36px;
  left: 12px;
  top: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff5e62, #ff9966);
  box-shadow: 0 0 10px rgba(255, 100, 80, 0.6);
}

.monsterEntity[data-variant="phoenix"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 24px;
  top: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffcc33, #ff6600);
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
}

.monsterEntity[data-variant="phoenix"] .monsterTail {
  width: 8px;
  height: 24px;
  left: 28px;
  top: 40px;
  border-radius: 4px 4px 0 0;
  background: #ff5e62;
  transform: rotate(45deg);
}

.monsterEntity[data-variant="phoenix"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 30px;
  top: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #fff;
}

/* =======================================
   GHOST (Fantôme)
   ======================================= */
.monsterEntity[data-variant="ghost"] .monsterBody {
  width: 36px;
  height: 48px;
  left: 14px;
  top: 10px;
  border-radius: 50% 50% 45% 45%;
  background: rgba(200, 200, 255, 0.2);
  border: 2px solid rgba(150, 150, 255, 0.5);
  box-shadow: 0 0 12px rgba(150, 150, 255, 0.4);
}

.monsterEntity[data-variant="ghost"] .monsterHead {
  width: 20px;
  height: 20px;
  left: 24px;
  top: -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.monsterEntity[data-variant="ghost"] .monsterLimbs {
  width: 8px;
  height: 30px;
  left: 22px;
  top: 48px;
  border-radius: 4px;
  background: rgba(200, 200, 255, 0.2);
}

.monsterEntity[data-variant="ghost"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 30px;
  top: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px #fff;
}

/* =========================
   MONSTER SPRITES SUPPLÉMENTAIRES
   ========================= */

/* =======================================
   RAT (Rat des champs / Rat sauvage)
   ======================================= */
.monsterEntity[data-variant="rat"] .monsterBody {
  width: 22px;
  height: 14px;
  left: 21px;
  top: 34px;
  border-radius: 6px 10px 6px 6px;
  background: linear-gradient(180deg, #a0856a, #6b5040);
}

.monsterEntity[data-variant="rat"] .monsterHead {
  width: 14px;
  height: 13px;
  left: 33px;
  top: 24px;
  border-radius: 50% 60% 50% 50%;
  background: #6b5040;
}

.monsterEntity[data-variant="rat"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 40px;
  top: 28px;
  border-radius: 50%;
  background: #ff3f34;
  box-shadow: 3px 0 #ff3f34;
  border: none;
}

.monsterEntity[data-variant="rat"] .monsterAdornment {
  width: 3px;
  height: 3px;
  left: 44px;
  top: 32px;
  border-radius: 50%;
  background: #f5c8a8;
  border: 1px solid #6b5040;
}

.monsterEntity[data-variant="rat"] .monsterLimbs {
  width: 3px;
  height: 8px;
  left: 23px;
  top: 44px;
  background: #6b5040;
  box-shadow: 6px 0 #6b5040, 14px 0 #6b5040, 18px 0 #6b5040;
}

.monsterEntity[data-variant="rat"] .monsterTail {
  width: 14px;
  height: 5px;
  left: 10px;
  top: 38px;
  border-radius: 0 0 0 8px;
  background: transparent;
  border: 2px solid #6b5040;
  border-right: 0;
  border-top: 0;
  box-shadow: none;
}

/* =======================================
   BEAR (Ours / Ours des glaces / Ours polaire)
   ======================================= */
.monsterEntity[data-variant="bear"] .monsterBody {
  width: 36px;
  height: 30px;
  left: 14px;
  top: 22px;
  border-radius: 8px;
  background: linear-gradient(180deg, #8d6e63, #5d4037);
}

.monsterEntity[data-variant="bear"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 6px;
  border-radius: 50%;
  background: #6d4c41;
}

.monsterEntity[data-variant="bear"] .monsterAdornment {
  width: 7px;
  height: 7px;
  left: 19px;
  top: 2px;
  border-radius: 50%;
  background: #5d4037;
  box-shadow: 18px 0 #5d4037;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="bear"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 25px;
  top: 12px;
  border-radius: 50%;
  background: #111;
  box-shadow: 7px 0 #111;
  border: none;
}

.monsterEntity[data-variant="bear"] .monsterLimbs {
  width: 6px;
  height: 12px;
  left: 16px;
  top: 48px;
  border-radius: 3px;
  background: #5d4037;
  box-shadow: 26px 0 #5d4037;
}

.monsterEntity[data-variant="bear"] .monsterTail {
  display: none;
}

/* =======================================
   ICE BEAR (Ours polaire corrompu / Ours des glaces)
   ======================================= */
.monsterEntity[data-variant="ice_bear"] .monsterBody {
  width: 38px;
  height: 32px;
  left: 13px;
  top: 20px;
  border-radius: 8px;
  background: linear-gradient(180deg, #e3f2fd, #90caf9);
}

.monsterEntity[data-variant="ice_bear"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 4px;
  border-radius: 50%;
  background: #bbdefb;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4);
}

.monsterEntity[data-variant="ice_bear"] .monsterAdornment {
  width: 8px;
  height: 8px;
  left: 17px;
  top: 0px;
  border-radius: 50%;
  background: #90caf9;
  box-shadow: 18px 0 #90caf9;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="ice_bear"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 10px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 7px 0 #00e5ff;
  border: none;
}

.monsterEntity[data-variant="ice_bear"] .monsterLimbs {
  width: 7px;
  height: 14px;
  left: 15px;
  top: 48px;
  border-radius: 3px;
  background: #90caf9;
  box-shadow: 24px 0 #90caf9;
}

.monsterEntity[data-variant="ice_bear"] .monsterTail {
  display: none;
}

/* =======================================
   SERPENT (Serpent des profondeurs / Vipère)
   ======================================= */
.monsterEntity[data-variant="serpent"] .monsterBody {
  width: 36px;
  height: 14px;
  left: 14px;
  top: 26px;
  border-radius: 8px;
  background: linear-gradient(90deg, #004d40, #00796b, #1de9b6);
}

.monsterEntity[data-variant="serpent"] .monsterHead {
  width: 16px;
  height: 12px;
  left: 36px;
  top: 22px;
  border-radius: 40% 60% 60% 40%;
  background: #004d40;
}

.monsterEntity[data-variant="serpent"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 45px;
  top: 25px;
  border-radius: 50%;
  background: #ffff00;
  box-shadow: 3px 0 #ffff00;
  border: none;
}

.monsterEntity[data-variant="serpent"] .monsterAdornment {
  width: 6px;
  height: 2px;
  left: 48px;
  top: 30px;
  background: #ff3f34;
  border: none;
  box-shadow: none;
  border-radius: 2px;
}

.monsterEntity[data-variant="serpent"] .monsterTail {
  width: 18px;
  height: 10px;
  left: 6px;
  top: 24px;
  border-radius: 0 0 10px 10px;
  background: transparent;
  border: 3px solid #00796b;
  border-top: 0;
  box-shadow: none;
}

.monsterEntity[data-variant="serpent"] .monsterLimbs {
  display: none;
}

/* =======================================
   KRAKEN (Kraken juvénile / Tentacule)
   ======================================= */
.monsterEntity[data-variant="kraken"] .monsterBody {
  width: 30px;
  height: 22px;
  left: 17px;
  top: 10px;
  border-radius: 50% 50% 30% 30%;
  background: radial-gradient(circle at 40% 35%, #4a148c, #1a0033);
  box-shadow: 0 0 8px rgba(120, 0, 200, 0.5);
}

.monsterEntity[data-variant="kraken"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 25px;
  top: 2px;
  border-radius: 50%;
  background: #6a1b9a;
}

.monsterEntity[data-variant="kraken"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 28px;
  top: 7px;
  border-radius: 50%;
  background: #ea80fc;
  box-shadow: 6px 0 #ea80fc;
  border: none;
}

.monsterEntity[data-variant="kraken"] .monsterLimbs {
  width: 56px;
  height: 22px;
  left: 4px;
  top: 26px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="kraken"] .monsterLimbs::before,
.monsterEntity[data-variant="kraken"] .monsterLimbs::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 18px;
  background: #4a148c;
  border: 1.5px solid #1c1511;
  border-radius: 3px;
}

.monsterEntity[data-variant="kraken"] .monsterLimbs::before {
  left: 4px;
  top: 0;
  transform: rotate(-15deg);
  box-shadow: 10px 2px 0 #4a148c, 10px 2px 0 1.5px #1c1511,
    20px -4px 0 #4a148c, 20px -4px 0 1.5px #1c1511;
}

.monsterEntity[data-variant="kraken"] .monsterLimbs::after {
  right: 4px;
  top: 0;
  transform: rotate(15deg);
  box-shadow: -10px 2px 0 #4a148c, -10px 2px 0 1.5px #1c1511,
    -20px -4px 0 #4a148c, -20px -4px 0 1.5px #1c1511;
}

.monsterEntity[data-variant="kraken"] .monsterAdornment {
  width: 4px;
  height: 10px;
  left: 30px;
  top: 28px;
  border-radius: 2px;
  background: #7b1fa2;
  box-shadow: 8px 0 #7b1fa2;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="kraken"] .monsterTail {
  display: none;
}

/* =======================================
   SPHINX (Le Sphinx du Désert)
   ======================================= */
.monsterEntity[data-variant="sphinx"] .monsterBody {
  width: 44px;
  height: 22px;
  left: 10px;
  top: 30px;
  border-radius: 10px 14px 6px 6px;
  background: linear-gradient(180deg, #f9a825, #e65100);
}

.monsterEntity[data-variant="sphinx"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 8px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #ffcc02, #e65100);
}

.monsterEntity[data-variant="sphinx"] .monsterAdornment {
  width: 28px;
  height: 12px;
  left: 18px;
  top: 14px;
  border-radius: 4px;
  background: #bf360c;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="sphinx"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 8px 0 #fff;
  border: none;
}

.monsterEntity[data-variant="sphinx"] .monsterLimbs {
  width: 46px;
  height: 10px;
  left: 9px;
  top: 50px;
  border-radius: 4px;
  background: #e65100;
}

.monsterEntity[data-variant="sphinx"] .monsterTail {
  width: 10px;
  height: 20px;
  left: 42px;
  top: 20px;
  border-radius: 4px;
  background: #f9a825;
  transform: rotate(30deg);
}

/* =======================================
   ICE DRAGON (Le Dragon de Givre)
   ======================================= */
.monsterEntity[data-variant="ice_dragon"] .monsterBody {
  width: 46px;
  height: 40px;
  left: 9px;
  top: 14px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 30%, #b3e5fc, #0288d1);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.5);
}

.monsterEntity[data-variant="ice_dragon"] .monsterHead {
  width: 26px;
  height: 26px;
  left: 19px;
  top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #e1f5fe, #29b6f6);
  box-shadow: 0 0 8px rgba(0, 220, 255, 0.6);
}

.monsterEntity[data-variant="ice_dragon"] .monsterAdornment {
  width: 6px;
  height: 12px;
  left: 22px;
  top: -8px;
  border-radius: 3px 3px 0 0;
  background: #81d4fa;
  box-shadow: 16px 0 #81d4fa;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="ice_dragon"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 28px;
  top: 6px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 8px 0 #00e5ff;
  border: none;
}

.monsterEntity[data-variant="ice_dragon"] .monsterLimbs {
  width: 12px;
  height: 28px;
  left: 18px;
  top: 44px;
  border-radius: 6px;
  background: #29b6f6;
}

.monsterEntity[data-variant="ice_dragon"] .monsterTail {
  width: 16px;
  height: 28px;
  left: 34px;
  top: 36px;
  border-radius: 6px 6px 0 0;
  background: #0288d1;
  transform: rotate(28deg);
}

/* =======================================
   SAND GOLEM (Golem de sable)
   ======================================= */
.monsterEntity[data-variant="sand_golem"] .monsterBody {
  width: 38px;
  height: 30px;
  left: 13px;
  top: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, #d7b15b, #a07c3c);
}

.monsterEntity[data-variant="sand_golem"] .monsterHead {
  width: 18px;
  height: 16px;
  left: 23px;
  top: 8px;
  border-radius: 4px;
  background: #c9a84c;
}

.monsterEntity[data-variant="sand_golem"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 12px;
  border-radius: 50%;
  background: #ff6f00;
  box-shadow: 7px 0 #ff6f00;
  border: none;
}

.monsterEntity[data-variant="sand_golem"] .monsterAdornment {
  width: 6px;
  height: 6px;
  left: 10px;
  top: 16px;
  transform: rotate(45deg);
  background: #e65100;
  box-shadow: 36px 0 #e65100;
  border: none;
}

.monsterEntity[data-variant="sand_golem"] .monsterLimbs {
  width: 48px;
  height: 10px;
  left: 8px;
  top: 22px;
  border-radius: 4px;
  background: #a07c3c;
}

.monsterEntity[data-variant="sand_golem"] .monsterTail {
  width: 8px;
  height: 12px;
  left: 20px;
  top: 46px;
  border-radius: 2px;
  background: #a07c3c;
  box-shadow: 16px 0 #a07c3c;
}

/* =======================================
   LAVA GOLEM (Golem de Lave)
   ======================================= */
.monsterEntity[data-variant="lava_golem"] .monsterBody {
  width: 40px;
  height: 34px;
  left: 12px;
  top: 18px;
  border-radius: 6px;
  background: radial-gradient(circle at 40% 30%, #ff6d00, #b71c1c, #1a0000);
  box-shadow: 0 0 10px rgba(255, 80, 0, 0.5);
}

.monsterEntity[data-variant="lava_golem"] .monsterHead {
  width: 20px;
  height: 18px;
  left: 22px;
  top: 4px;
  border-radius: 4px;
  background: #bf360c;
  border: 2px solid #ff3300;
}

.monsterEntity[data-variant="lava_golem"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 10px;
  border-radius: 50%;
  background: #ffff00;
  box-shadow: 7px 0 #ffff00;
  border: none;
}

.monsterEntity[data-variant="lava_golem"] .monsterAdornment {
  width: 7px;
  height: 7px;
  left: 12px;
  top: 14px;
  transform: rotate(45deg);
  background: #ff6d00;
  box-shadow: 30px 0 #ff6d00;
  border: none;
}

.monsterEntity[data-variant="lava_golem"] .monsterLimbs {
  width: 52px;
  height: 12px;
  left: 6px;
  top: 22px;
  border-radius: 5px;
  background: #bf360c;
}

.monsterEntity[data-variant="lava_golem"] .monsterTail {
  width: 9px;
  height: 14px;
  left: 20px;
  top: 48px;
  border-radius: 2px;
  background: #bf360c;
  box-shadow: 14px 0 #bf360c;
}

/* =======================================
   MAGMA SPIDER (Araignée de Magma)
   ======================================= */
.monsterEntity[data-variant="magma_spider"] .monsterBody {
  width: 30px;
  height: 24px;
  left: 17px;
  top: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6d00, #7f0000);
  box-shadow: 0 0 8px rgba(255, 80, 0, 0.4);
}

.monsterEntity[data-variant="magma_spider"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 25px;
  top: 32px;
  border-radius: 50%;
  background: #3e0000;
}

.monsterEntity[data-variant="magma_spider"] .monsterLimbs {
  width: 54px;
  height: 16px;
  left: 5px;
  top: 24px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: 3px solid #7f0000;
  border-bottom: 3px solid #7f0000;
}

.monsterEntity[data-variant="magma_spider"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 37px;
  border-radius: 50%;
  background: #ffff00;
  box-shadow: 3px 0 #ffff00, 6px 0 #ffff00;
  border: none;
}

.monsterEntity[data-variant="magma_spider"] .monsterAdornment {
  width: 3px;
  height: 5px;
  left: 30px;
  top: 44px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: #ff6d00;
  box-shadow: 5px 0 #ff6d00;
  border: none;
}

.monsterEntity[data-variant="magma_spider"] .monsterTail {
  display: none;
}

/* =======================================
   CHERUB (Chérubin Corrompu)
   ======================================= */
.monsterEntity[data-variant="cherub"] .monsterBody {
  width: 20px;
  height: 24px;
  left: 22px;
  top: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fce4ec, #c2185b);
}

.monsterEntity[data-variant="cherub"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 8px;
  border-radius: 50%;
  background: #f48fb1;
}

.monsterEntity[data-variant="cherub"] .monsterAdornment {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 2px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #ff4081;
  box-shadow: 0 0 8px rgba(255, 64, 129, 0.5);
}

.monsterEntity[data-variant="cherub"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 13px;
  border-radius: 50%;
  background: #ad1457;
  box-shadow: 5px 0 #ad1457;
  border: none;
}

.monsterEntity[data-variant="cherub"] .monsterLimbs {
  width: 48px;
  height: 10px;
  left: 8px;
  top: 18px;
  border-radius: 6px;
  background: #f06292;
  border: 1.5px solid #1a252f;
}

.monsterEntity[data-variant="cherub"] .monsterTail {
  width: 5px;
  height: 10px;
  left: 24px;
  top: 46px;
  background: #c2185b;
  box-shadow: 10px 0 #c2185b;
}

/* =======================================
   VALKYRIE (Valkyrie des Cieux)
   ======================================= */
.monsterEntity[data-variant="valkyrie"] .monsterBody {
  width: 22px;
  height: 28px;
  left: 21px;
  top: 22px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #e8eaf6, #5c6bc0);
}

.monsterEntity[data-variant="valkyrie"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 6px;
  border-radius: 50%;
  background: #ffe082;
}

.monsterEntity[data-variant="valkyrie"] .monsterAdornment {
  width: 24px;
  height: 6px;
  left: 20px;
  top: 2px;
  border-radius: 3px;
  background: #ffd54f;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="valkyrie"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 11px;
  border-radius: 50%;
  background: #1a237e;
  box-shadow: 5px 0 #1a237e;
  border: none;
}

.monsterEntity[data-variant="valkyrie"] .monsterLimbs {
  width: 52px;
  height: 10px;
  left: 6px;
  top: 16px;
  border-radius: 5px;
  background: #9fa8da;
  border: 1.5px solid #1a252f;
}

.monsterEntity[data-variant="valkyrie"] .monsterTail {
  width: 5px;
  height: 10px;
  left: 24px;
  top: 48px;
  background: #5c6bc0;
  box-shadow: 12px 0 #5c6bc0;
}

/* =======================================
   CELESTIAL DRAGON (Dragon Céleste)
   ======================================= */
.monsterEntity[data-variant="celestial_dragon"] .monsterBody {
  width: 46px;
  height: 40px;
  left: 9px;
  top: 14px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 45% 30%, #e0f7fa, #006064);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.6);
}

.monsterEntity[data-variant="celestial_dragon"] .monsterHead {
  width: 28px;
  height: 26px;
  left: 18px;
  top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #00acc1);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

.monsterEntity[data-variant="celestial_dragon"] .monsterAdornment {
  width: 7px;
  height: 14px;
  left: 20px;
  top: -8px;
  border-radius: 3px 3px 0 0;
  background: #e0f7fa;
  box-shadow: 18px 0 #e0f7fa;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="celestial_dragon"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 8px 0 #fff;
  border: none;
}

.monsterEntity[data-variant="celestial_dragon"] .monsterLimbs {
  width: 14px;
  height: 30px;
  left: 18px;
  top: 44px;
  border-radius: 6px;
  background: #006064;
}

.monsterEntity[data-variant="celestial_dragon"] .monsterTail {
  width: 16px;
  height: 30px;
  left: 34px;
  top: 36px;
  border-radius: 6px 6px 0 0;
  background: #004d40;
  transform: rotate(28deg);
}

/* =======================================
   LIGHTNING SPHINX (Sphinx de Foudre)
   ======================================= */
.monsterEntity[data-variant="lightning_sphinx"] .monsterBody {
  width: 44px;
  height: 22px;
  left: 10px;
  top: 30px;
  border-radius: 10px 14px 6px 6px;
  background: linear-gradient(180deg, #ffd600, #6a1b9a);
}

.monsterEntity[data-variant="lightning_sphinx"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 8px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #fff176, #f9a825);
  box-shadow: 0 0 10px rgba(255, 200, 0, 0.6);
}

.monsterEntity[data-variant="lightning_sphinx"] .monsterAdornment {
  width: 28px;
  height: 12px;
  left: 18px;
  top: 16px;
  border-radius: 4px;
  background: #4a148c;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="lightning_sphinx"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 12px;
  border-radius: 50%;
  background: #e040fb;
  box-shadow: 8px 0 #e040fb;
  border: none;
}

.monsterEntity[data-variant="lightning_sphinx"] .monsterLimbs {
  width: 46px;
  height: 10px;
  left: 9px;
  top: 50px;
  border-radius: 4px;
  background: #6a1b9a;
}

.monsterEntity[data-variant="lightning_sphinx"] .monsterTail {
  width: 10px;
  height: 20px;
  left: 42px;
  top: 20px;
  border-radius: 4px;
  background: #ffd600;
  transform: rotate(30deg);
}

/* =======================================
   FIRE SCARAB (Scarabée de Feu)
   ======================================= */
.monsterEntity[data-variant="fire_scarab"] .monsterBody,
.monsterEntity[data-variant="scarab"] .monsterBody {
  width: 30px;
  height: 22px;
  left: 17px;
  top: 22px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 30%, #ff6d00, #880e4f);
}

.monsterEntity[data-variant="scarab"] .monsterBody {
  background: radial-gradient(circle at 40% 30%, #ffd700, #b45309);
  border: 1.5px solid #78350f;
}

.monsterEntity[data-variant="fire_scarab"] .monsterHead,
.monsterEntity[data-variant="scarab"] .monsterHead {
  width: 12px;
  height: 12px;
  left: 26px;
  top: 34px;
  border-radius: 50%;
  background: #4a0020;
}

.monsterEntity[data-variant="scarab"] .monsterHead {
  background: #78350f;
}

.monsterEntity[data-variant="fire_scarab"] .monsterLimbs,
.monsterEntity[data-variant="scarab"] .monsterLimbs {
  width: 52px;
  height: 14px;
  left: 6px;
  top: 28px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: 3px solid #880e4f;
  border-bottom: 3px solid #880e4f;
}

.monsterEntity[data-variant="scarab"] .monsterLimbs {
  border-top: 3px solid #92400e;
  border-bottom: 3px solid #92400e;
}

.monsterEntity[data-variant="fire_scarab"] .monsterFace,
.monsterEntity[data-variant="scarab"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 38px;
  border-radius: 50%;
  background: #ffab40;
  box-shadow: 4px 0 #ffab40;
  border: none;
}

.monsterEntity[data-variant="fire_scarab"] .monsterAdornment,
.monsterEntity[data-variant="scarab"] .monsterAdornment {
  width: 14px;
  height: 5px;
  left: 25px;
  top: 15px;
  border-radius: 3px;
  background: #ff6d00;
  border: 1.5px solid #1c1511;
  box-shadow: none;
}

.monsterEntity[data-variant="scarab"] .monsterAdornment {
  background: #fbbf24;
}

.monsterEntity[data-variant="fire_scarab"] .monsterTail,
.monsterEntity[data-variant="scarab"] .monsterTail {
  display: none;
}

/* =======================================
   GARGOYLE (Gargouille de Pierre)
   ======================================= */
.monsterEntity[data-variant="gargoyle"] .monsterBody {
  width: 30px;
  height: 26px;
  left: 17px;
  top: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #78909c, #37474f);
}

.monsterEntity[data-variant="gargoyle"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 6px;
  border-radius: 40%;
  background: #546e7a;
}

.monsterEntity[data-variant="gargoyle"] .monsterAdornment {
  width: 5px;
  height: 9px;
  left: 21px;
  top: 0;
  border-radius: 50% 50% 0 0;
  background: #37474f;
  box-shadow: 16px 0 #37474f;
  border: 1.5px solid #1c1511;
  border-bottom: 0;
}

.monsterEntity[data-variant="gargoyle"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 11px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 6px 0 #e53935;
  border: none;
}

.monsterEntity[data-variant="gargoyle"] .monsterLimbs {
  width: 52px;
  height: 10px;
  left: 6px;
  top: 18px;
  border-radius: 5px;
  background: #607d8b;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="gargoyle"] .monsterTail {
  width: 8px;
  height: 14px;
  left: 22px;
  top: 46px;
  border-radius: 2px;
  background: #37474f;
  box-shadow: 16px 0 #37474f;
}

/* =======================================
   GHOST WOLF (Loup spectral)
   ======================================= */
.monsterEntity[data-variant="ghost_wolf"] .monsterBody {
  width: 30px;
  height: 20px;
  left: 17px;
  top: 26px;
  border-radius: 8px;
  background: rgba(100, 130, 255, 0.3);
  border: 1.5px solid rgba(130, 160, 255, 0.7);
  box-shadow: 0 0 10px rgba(100, 130, 255, 0.4);
}

.monsterEntity[data-variant="ghost_wolf"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 12px;
  border-radius: 50%;
  background: rgba(180, 200, 255, 0.3);
  border: 1.5px solid rgba(130, 160, 255, 0.7);
}

.monsterEntity[data-variant="ghost_wolf"] .monsterLimbs {
  width: 5px;
  height: 12px;
  left: 19px;
  top: 42px;
  border-radius: 2px;
  background: rgba(100, 130, 255, 0.4);
  box-shadow: 6px 0 rgba(100, 130, 255, 0.4), 16px 0 rgba(100, 130, 255, 0.4), 22px 0 rgba(100, 130, 255, 0.4);
  border: 1px solid rgba(130, 160, 255, 0.5);
}

.monsterEntity[data-variant="ghost_wolf"] .monsterTail {
  width: 8px;
  height: 16px;
  left: 11px;
  top: 22px;
  border-radius: 4px;
  background: rgba(100, 130, 255, 0.3);
  transform: rotate(-35deg);
  border: 1px solid rgba(130, 160, 255, 0.6);
}

.monsterEntity[data-variant="ghost_wolf"] .monsterAdornment {
  width: 5px;
  height: 8px;
  left: 22px;
  top: 6px;
  border-radius: 3px 3px 0 0;
  background: rgba(130, 160, 255, 0.4);
  border: 1px solid rgba(130, 160, 255, 0.6);
  border-bottom: 0;
  box-shadow: 10px 0 rgba(130, 160, 255, 0.4);
}

.monsterEntity[data-variant="ghost_wolf"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 17px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 6px 0 #00e5ff;
  border: none;
}

/* =======================================
   ICE HARE (Lièvre givre)
   ======================================= */
.monsterEntity[data-variant="ice_hare"] .monsterBody {
  width: 28px;
  height: 26px;
  left: 18px;
  top: 28px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 35%, #e3f2fd, #29b6f6);
}

.monsterEntity[data-variant="ice_hare"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 12px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="ice_hare"] .monsterHead::before,
.monsterEntity[data-variant="ice_hare"] .monsterHead::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 18px;
  background: #b3e5fc;
  border: 1.5px solid #1c1511;
  border-radius: 4px;
}

.monsterEntity[data-variant="ice_hare"] .monsterHead::before {
  left: 1px;
  transform: rotate(-8deg);
  box-shadow: inset 0 -6px 0 #00bcd4;
}

.monsterEntity[data-variant="ice_hare"] .monsterHead::after {
  right: 1px;
  transform: rotate(8deg);
  box-shadow: inset 0 -6px 0 #00bcd4;
}

.monsterEntity[data-variant="ice_hare"] .monsterFace {
  width: 14px;
  height: 10px;
  left: 25px;
  top: 32px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="ice_hare"] .monsterFace::before,
.monsterEntity[data-variant="ice_hare"] .monsterFace::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #01579b;
  border-radius: 50%;
}

.monsterEntity[data-variant="ice_hare"] .monsterFace::before {
  left: 1px;
}

.monsterEntity[data-variant="ice_hare"] .monsterFace::after {
  right: 1px;
}

.monsterEntity[data-variant="ice_hare"] .monsterAdornment {
  width: 6px;
  height: 4px;
  left: 29px;
  top: 37px;
  border-radius: 50%;
  background: #80deea;
  border: 1px solid #1c1511;
  box-shadow: none;
}

.monsterEntity[data-variant="ice_hare"] .monsterLimbs {
  width: 34px;
  height: 8px;
  left: 15px;
  top: 50px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="ice_hare"] .monsterLimbs::before,
.monsterEntity[data-variant="ice_hare"] .monsterLimbs::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 8px;
  background: #b3e5fc;
  border: 1.5px solid #1c1511;
  border-radius: 4px;
}

.monsterEntity[data-variant="ice_hare"] .monsterLimbs::before {
  left: 2px;
  transform: rotate(5deg);
}

.monsterEntity[data-variant="ice_hare"] .monsterLimbs::after {
  right: 2px;
  transform: rotate(-5deg);
}

.monsterEntity[data-variant="ice_hare"] .monsterTail {
  width: 10px;
  height: 10px;
  left: 12px;
  top: 40px;
  border-radius: 50%;
  background: #e1f5fe;
  border: 1.5px solid #1c1511;
}

/* =======================================
   MUMMY (Momie du désert)
   ======================================= */
.monsterEntity[data-variant="mummy"] .monsterBody {
  width: 22px;
  height: 30px;
  left: 21px;
  top: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e8d5b0, #a68b5b);
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.15), inset -3px 0 0 rgba(0, 0, 0, 0.15);
}

.monsterEntity[data-variant="mummy"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 6px;
  border-radius: 50%;
  background: #d4b896;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.monsterEntity[data-variant="mummy"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 13px;
  border-radius: 50%;
  background: #ff6f00;
  box-shadow: 6px 0 #ff6f00;
  border: none;
}

.monsterEntity[data-variant="mummy"] .monsterAdornment {
  width: 22px;
  height: 4px;
  left: 21px;
  top: 18px;
  border-radius: 2px;
  background: #a68b5b;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="mummy"] .monsterLimbs {
  width: 34px;
  height: 8px;
  left: 15px;
  top: 24px;
  border-radius: 4px;
  background: #c4a06e;
}

.monsterEntity[data-variant="mummy"] .monsterTail {
  width: 5px;
  height: 10px;
  left: 25px;
  top: 50px;
  background: #a68b5b;
  box-shadow: 10px 0 #a68b5b;
}

/* =======================================
   SIREN (Sirène hostile)
   ======================================= */
.monsterEntity[data-variant="siren"] .monsterBody {
  width: 16px;
  height: 22px;
  left: 24px;
  top: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f48fb1, #00796b);
}

.monsterEntity[data-variant="siren"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 8px;
  border-radius: 50%;
  background: #f8bbd0;
}

.monsterEntity[data-variant="siren"] .monsterTail {
  width: 28px;
  height: 16px;
  left: 18px;
  top: 40px;
  border-radius: 4px 4px 12px 12px;
  background: linear-gradient(180deg, #00796b, #00bcd4);
}

.monsterEntity[data-variant="siren"] .monsterAdornment {
  width: 28px;
  height: 8px;
  left: 18px;
  top: 14px;
  border-radius: 5px;
  background: #f06292;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="siren"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 12px;
  border-radius: 50%;
  background: #1a237e;
  box-shadow: 5px 0 #1a237e;
  border: none;
}

.monsterEntity[data-variant="siren"] .monsterLimbs {
  display: none;
}

/* =======================================
   TURTLE (Tortue d'eau)
   ======================================= */
.monsterEntity[data-variant="turtle"] .monsterBody {
  width: 36px;
  height: 22px;
  left: 14px;
  top: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #558b2f, #1b5e20);
}

.monsterEntity[data-variant="turtle"] .monsterHead {
  width: 14px;
  height: 12px;
  left: 34px;
  top: 22px;
  border-radius: 40% 60% 60% 40%;
  background: #2e7d32;
}

.monsterEntity[data-variant="turtle"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 41px;
  top: 25px;
  border-radius: 50%;
  background: #111;
  box-shadow: 3px 0 #111;
  border: none;
}

.monsterEntity[data-variant="turtle"] .monsterAdornment {
  width: 30px;
  height: 18px;
  left: 17px;
  top: 22px;
  border-radius: 50%;
  background: transparent;
  border: 2.5px solid #33691e;
  box-shadow: none;
}

.monsterEntity[data-variant="turtle"] .monsterLimbs {
  width: 4px;
  height: 8px;
  left: 16px;
  top: 46px;
  border-radius: 2px;
  background: #2e7d32;
  box-shadow: 8px 0 #2e7d32, 22px 0 #2e7d32, 30px 0 #2e7d32;
}

.monsterEntity[data-variant="turtle"] .monsterTail {
  width: 6px;
  height: 5px;
  left: 10px;
  top: 32px;
  border-radius: 3px;
  background: #2e7d32;
}

/* =======================================
   RAVEN (Corbeau des plaines / Corbeau enragé)
   ======================================= */
.monsterEntity[data-variant="raven"] .monsterBody {
  width: 22px;
  height: 18px;
  left: 21px;
  top: 28px;
  border-radius: 8px 12px 8px 8px;
  background: linear-gradient(180deg, #212121, #0a0a0a);
}

.monsterEntity[data-variant="raven"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 30px;
  top: 16px;
  border-radius: 50%;
  background: #1a1a1a;
}

.monsterEntity[data-variant="raven"] .monsterAdornment {
  width: 8px;
  height: 4px;
  left: 36px;
  top: 22px;
  border-radius: 0 2px 2px 0;
  background: #ffd600;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="raven"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 36px;
  top: 17px;
  border-radius: 50%;
  background: #e53935;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="raven"] .monsterLimbs {
  width: 26px;
  height: 10px;
  left: 19px;
  top: 38px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="raven"] .monsterLimbs::before,
.monsterEntity[data-variant="raven"] .monsterLimbs::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  border: 2px solid #1a1a1a;
  border-radius: 10px 10px 0 10px;
}

.monsterEntity[data-variant="raven"] .monsterLimbs::before {
  left: 0;
  top: 0;
  transform: rotate(-20deg);
  background: #212121;
}

.monsterEntity[data-variant="raven"] .monsterLimbs::after {
  right: 0;
  top: 0;
  transform: rotate(20deg) scaleX(-1);
  background: #212121;
}

.monsterEntity[data-variant="raven"] .monsterTail {
  width: 6px;
  height: 14px;
  left: 13px;
  top: 36px;
  border-radius: 3px;
  background: #1a1a1a;
  transform: rotate(-10deg);
}

/* =======================================
   CONDOR (Condor des cimes / Aigle des sommets)
   ======================================= */
.monsterEntity[data-variant="condor"] .monsterBody {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, #5d4037, #3e2723);
}

.monsterEntity[data-variant="condor"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 25px;
  top: 14px;
  border-radius: 50%;
  background: #ff7043;
}

.monsterEntity[data-variant="condor"] .monsterAdornment {
  width: 10px;
  height: 5px;
  left: 28px;
  top: 20px;
  border-radius: 0 2px 2px 0;
  background: #ffd600;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="condor"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 32px;
  top: 15px;
  border-radius: 50%;
  background: #111;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="condor"] .monsterLimbs {
  width: 52px;
  height: 14px;
  left: 6px;
  top: 18px;
  background: #4e342e;
  border: 1.5px solid #1c1511;
  border-radius: 5px;
}

.monsterEntity[data-variant="condor"] .monsterTail {
  width: 8px;
  height: 16px;
  left: 28px;
  top: 42px;
  border-radius: 3px;
  background: #3e2723;
}

/* =======================================
   SHADOW WOLF (Loup des ombres)
   ======================================= */
.monsterEntity[data-variant="shadow_wolf"] .monsterBody {
  width: 30px;
  height: 20px;
  left: 17px;
  top: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a1a2e, #0a0a0a);
  box-shadow: 0 0 8px rgba(120, 0, 255, 0.4);
}

.monsterEntity[data-variant="shadow_wolf"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 12px;
  border-radius: 50%;
  background: #16213e;
}

.monsterEntity[data-variant="shadow_wolf"] .monsterLimbs {
  width: 5px;
  height: 14px;
  left: 19px;
  top: 42px;
  border-radius: 2px;
  background: #0a0a0a;
  box-shadow: 6px 0 #0a0a0a, 16px 0 #0a0a0a, 22px 0 #0a0a0a;
}

.monsterEntity[data-variant="shadow_wolf"] .monsterTail {
  width: 8px;
  height: 16px;
  left: 11px;
  top: 22px;
  border-radius: 4px;
  background: #1a1a2e;
  transform: rotate(-35deg);
}

.monsterEntity[data-variant="shadow_wolf"] .monsterAdornment {
  width: 5px;
  height: 8px;
  left: 22px;
  top: 6px;
  border-radius: 3px 3px 0 0;
  background: #1a1a2e;
  border-bottom: 0;
  box-shadow: 10px 0 #1a1a2e;
}

.monsterEntity[data-variant="shadow_wolf"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 17px;
  border-radius: 50%;
  background: #9c27b0;
  box-shadow: 6px 0 #9c27b0;
  border: none;
}

/* =======================================
   FALLEN ANGEL (Goule gelée)
   ======================================= */
.monsterEntity[data-variant="frozen_ghoul"] .monsterBody {
  width: 22px;
  height: 30px;
  left: 21px;
  top: 22px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #b3e5fc, #455a64);
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.3);
}

.monsterEntity[data-variant="frozen_ghoul"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 6px;
  border-radius: 50%;
  background: #e1f5fe;
}

.monsterEntity[data-variant="frozen_ghoul"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 13px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 5px 0 #00e5ff;
  border: none;
}

.monsterEntity[data-variant="frozen_ghoul"] .monsterAdornment {
  width: 22px;
  height: 4px;
  left: 21px;
  top: 20px;
  border-radius: 2px;
  background: #80deea;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="frozen_ghoul"] .monsterLimbs {
  width: 4px;
  height: 14px;
  left: 39px;
  top: 18px;
  transform: rotate(45deg);
  background: #90a4ae;
}

.monsterEntity[data-variant="frozen_ghoul"] .monsterTail {
  width: 5px;
  height: 8px;
  left: 24px;
  top: 48px;
  background: #455a64;
  box-shadow: 11px 0 #455a64;
}

/* =======================================
   ENT (Ent jeune & Ent corrompu)
   ======================================= */
.monsterEntity[data-variant="ent"] .monsterBody {
  width: 24px;
  height: 32px;
  left: 20px;
  top: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5c4033, #3d2b1f);
}

.monsterEntity[data-variant="ent"] .monsterHead {
  width: 18px;
  height: 14px;
  left: 23px;
  top: 8px;
  border-radius: 3px;
  background: #3d2b1f;
}

.monsterEntity[data-variant="ent"] .monsterAdornment {
  width: 38px;
  height: 16px;
  left: 13px;
  top: -2px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  border: 1.5px solid #1c1511;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.25);
}

.monsterEntity[data-variant="ent"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 13px;
  border-radius: 50%;
  background: #ffb300;
  box-shadow: 6px 0 #ffb300, 0 0 4px #ffb300;
  border: none;
}

.monsterEntity[data-variant="ent"] .monsterLimbs {
  width: 6px;
  height: 16px;
  left: 15px;
  top: 24px;
  border-radius: 2px;
  background: #3d2b1f;
  transform: rotate(25deg);
  box-shadow: 24px 0 #3d2b1f;
}

.monsterEntity[data-variant="ent"] .monsterTail {
  width: 8px;
  height: 12px;
  left: 18px;
  top: 48px;
  border-radius: 2px;
  background: #271911;
  box-shadow: 18px 0 #271911;
}

/* =======================================
   ENT CORROMPU
   ======================================= */
.monsterEntity[data-variant="ent_corrupt"] .monsterBody {
  width: 26px;
  height: 34px;
  left: 19px;
  top: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3b0764, #1e0038);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.monsterEntity[data-variant="ent_corrupt"] .monsterHead {
  width: 18px;
  height: 14px;
  left: 23px;
  top: 8px;
  border-radius: 3px;
  background: #2e0854;
}

.monsterEntity[data-variant="ent_corrupt"] .monsterAdornment {
  width: 40px;
  height: 18px;
  left: 12px;
  top: -4px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(135deg, #7e22ce, #3b0764);
  border: 1.5px solid #1e0038;
  box-shadow: 0 0 12px #a855f7, inset 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.monsterEntity[data-variant="ent_corrupt"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 12px;
  border-radius: 50%;
  background: #e879f9;
  box-shadow: 7px 0 #e879f9, 0 0 6px #e879f9;
  border: none;
}

.monsterEntity[data-variant="ent_corrupt"] .monsterLimbs {
  width: 6px;
  height: 16px;
  left: 14px;
  top: 24px;
  border-radius: 2px;
  background: #2e0854;
  transform: rotate(25deg);
  box-shadow: 26px 0 #2e0854;
}

.monsterEntity[data-variant="ent_corrupt"] .monsterTail {
  width: 8px;
  height: 12px;
  left: 18px;
  top: 48px;
  border-radius: 2px;
  background: #1e0038;
  box-shadow: 18px 0 #1e0038;
}

/* =======================================
   ANCESTRAL TREE (L'Arbre Ancestral)
   ======================================= */
.monsterEntity[data-variant="ancestral_tree"] .monsterBody {
  width: 38px;
  height: 40px;
  left: 13px;
  top: 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, #422a1d, #271911);
}

.monsterEntity[data-variant="ancestral_tree"] .monsterHead {
  width: 24px;
  height: 18px;
  left: 20px;
  top: 4px;
  border-radius: 4px;
  background: #271911;
}

.monsterEntity[data-variant="ancestral_tree"] .monsterAdornment {
  width: 56px;
  height: 32px;
  left: 4px;
  top: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd54f 10%, #2e7d32 60%, #1b5e20 100%);
  border: 2px solid #1c1511;
  box-shadow: 0 0 15px rgba(255, 213, 79, 0.4), inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

.monsterEntity[data-variant="ancestral_tree"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 10px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 8px 0 #ffd700, 0 0 8px #ffd700;
  border: none;
}

.monsterEntity[data-variant="ancestral_tree"] .monsterLimbs {
  width: 8px;
  height: 22px;
  left: 7px;
  top: 20px;
  border-radius: 3px;
  background: #271911;
  transform: rotate(20deg);
  box-shadow: 38px 0 #271911;
}

.monsterEntity[data-variant="ancestral_tree"] .monsterTail {
  width: 10px;
  height: 14px;
  left: 12px;
  top: 50px;
  border-radius: 3px;
  background: #150e0a;
  box-shadow: 28px 0 #150e0a;
}

/* =======================================
   TREE SPROUT (Pousse d'arbre)
   ======================================= */
.monsterEntity[data-variant="tree_sprout"] .monsterBody {
  width: 16px;
  height: 20px;
  left: 24px;
  top: 30px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8d6e63, #5d4037);
}

.monsterEntity[data-variant="tree_sprout"] .monsterHead {
  width: 12px;
  height: 10px;
  left: 26px;
  top: 22px;
  border-radius: 2px;
  background: #5d4037;
}

.monsterEntity[data-variant="tree_sprout"] .monsterAdornment {
  width: 14px;
  height: 10px;
  left: 29px;
  top: 14px;
  border-radius: 0 85% 0 85%;
  background: #81c784;
  transform: rotate(-15deg);
  border: 1px solid #1c1511;
}

.monsterEntity[data-variant="tree_sprout"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 25px;
  border-radius: 50%;
  background: #a5d6a7;
  box-shadow: 4px 0 #a5d6a7;
  border: none;
}

.monsterEntity[data-variant="tree_sprout"] .monsterLimbs {
  width: 4px;
  height: 8px;
  left: 22px;
  top: 46px;
  border-radius: 1px;
  background: #5d4037;
  box-shadow: 12px 0 #5d4037;
}

.monsterEntity[data-variant="tree_sprout"] .monsterTail {
  display: none;
}

/* =======================================
   CRYSTAL GOLEM (Le Golem de Cristal)
   ======================================= */
.monsterEntity[data-variant="crystal_golem"] .monsterBody {
  width: 36px;
  height: 32px;
  left: 14px;
  top: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e0f7fa, #80deea, #00acc1);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.monsterEntity[data-variant="crystal_golem"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 4px;
  border-radius: 4px;
  background: #80deea;
}

.monsterEntity[data-variant="crystal_golem"] .monsterAdornment {
  width: 8px;
  height: 8px;
  left: 10px;
  top: 14px;
  transform: rotate(45deg);
  background: #e0f7fa;
  box-shadow: 36px 0 #e0f7fa, 0 0 8px rgba(0, 229, 255, 0.6);
  border: 1px solid #1c1511;
}

.monsterEntity[data-variant="crystal_golem"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 28px;
  top: 10px;
  border-radius: 50%;
  background: #e91e63;
  box-shadow: 5px 0 #e91e63, 0 0 5px #e91e63;
  border: none;
}

.monsterEntity[data-variant="crystal_golem"] .monsterLimbs {
  width: 8px;
  height: 20px;
  left: 8px;
  top: 22px;
  border-radius: 3px;
  background: #00acc1;
  box-shadow: 40px 0 #00acc1;
}

.monsterEntity[data-variant="crystal_golem"] .monsterTail {
  width: 8px;
  height: 10px;
  left: 20px;
  top: 46px;
  background: #00838f;
  box-shadow: 16px 0 #00838f;
}

/* =======================================
   CRYSTAL SHARD (Éclat de cristal)
   ======================================= */
.monsterEntity[data-variant="crystal_shard"] .monsterBody {
  width: 18px;
  height: 30px;
  left: 23px;
  top: 16px;
  background: linear-gradient(135deg, #ffffff, #80deea, #00acc1);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: none;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.85);
}

.monsterEntity[data-variant="crystal_shard"] .monsterHead,
.monsterEntity[data-variant="crystal_shard"] .monsterFace,
.monsterEntity[data-variant="crystal_shard"] .monsterAdornment,
.monsterEntity[data-variant="crystal_shard"] .monsterLimbs,
.monsterEntity[data-variant="crystal_shard"] .monsterTail {
  display: none;
}

/* =======================================
   LEVIATHAN (Le Léviathan)
   ======================================= */
.monsterEntity[data-variant="leviathan"] .monsterBody {
  width: 48px;
  height: 24px;
  left: 8px;
  top: 20px;
  border-radius: 50% 80% 80% 50%;
  background: linear-gradient(135deg, #0d47a1, #006064, #001020);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
}

.monsterEntity[data-variant="leviathan"] .monsterHead {
  width: 22px;
  height: 18px;
  left: 36px;
  top: 14px;
  border-radius: 40% 80% 80% 40%;
  background: #0d47a1;
}

.monsterEntity[data-variant="leviathan"] .monsterAdornment {
  width: 14px;
  height: 26px;
  left: 16px;
  top: 4px;
  border-radius: 10px 0 10px 10px;
  background: linear-gradient(185deg, #00e5ff, #0d47a1);
  transform: rotate(45deg);
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="leviathan"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 44px;
  top: 19px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 6px #ffd700;
  border: none;
}

.monsterEntity[data-variant="leviathan"] .monsterLimbs {
  width: 20px;
  height: 8px;
  left: 22px;
  top: 38px;
  background: #006064;
  border-radius: 50%;
}

.monsterEntity[data-variant="leviathan"] .monsterTail {
  width: 14px;
  height: 20px;
  left: -2px;
  top: 22px;
  background: linear-gradient(to right, #006064, #00e5ff);
  border-radius: 50% 0 0 50%;
  transform: rotate(-15deg);
}

/* =======================================
   TENTACLE (Tentacule)
   ======================================= */
.monsterEntity[data-variant="tentacle"] .monsterBody {
  width: 16px;
  height: 34px;
  left: 24px;
  top: 18px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #0288d1, #01579b);
  transform: skewX(-8deg);
}

.monsterEntity[data-variant="tentacle"] .monsterAdornment {
  width: 4px;
  height: 4px;
  left: 21px;
  top: 24px;
  border-radius: 50%;
  background: #81d4fa;
  box-shadow: 0 6px #81d4fa, 0 12px #81d4fa;
  border: none;
}

.monsterEntity[data-variant="tentacle"] .monsterHead,
.monsterEntity[data-variant="tentacle"] .monsterFace,
.monsterEntity[data-variant="tentacle"] .monsterLimbs,
.monsterEntity[data-variant="tentacle"] .monsterTail {
  display: none;
}

/* =======================================
   SKELETON (Squelette / Chafer)
   ======================================= */
.monsterEntity[data-variant="skeleton"] .monsterBody {
  width: 16px;
  height: 26px;
  left: 24px;
  top: 22px;
  background: #dfe4ea;
  border-radius: 4px;
}

.monsterEntity[data-variant="skeleton"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 6px;
  border-radius: 8px 8px 4px 4px;
  background: #f1f2f6;
}

.monsterEntity[data-variant="skeleton"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 12px;
  border-radius: 50%;
  background: #000000;
  box-shadow: 6px 0 #000000;
  border: none;
}

.monsterEntity[data-variant="skeleton"] .monsterAdornment {
  width: 4px;
  height: 18px;
  left: 30px;
  top: 24px;
  background: #dfe4ea;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="skeleton"] .monsterLimbs {
  width: 4px;
  height: 16px;
  left: 20px;
  top: 44px;
  background: #dfe4ea;
  box-shadow: 20px 0 #dfe4ea, inset 1px 1px 2px rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.monsterEntity[data-variant="skeleton"] .monsterTail {
  display: none;
}

/* =======================================
   SKELETON KING (Maître des squelettes - Boss)
   ======================================= */
.monsterEntity[data-variant="skeleton_king"] .monsterBody {
  width: 24px;
  height: 28px;
  left: 20px;
  top: 20px;
  background: linear-gradient(180deg, #747d8c, #2f3542);
  border-radius: 6px;
}

.monsterEntity[data-variant="skeleton_king"] .monsterHead {
  width: 20px;
  height: 20px;
  left: 22px;
  top: 2px;
  border-radius: 8px 8px 5px 5px;
  background: #f1f2f6;
}

.monsterEntity[data-variant="skeleton_king"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 8px;
  border-radius: 50%;
  background: #ff4757;
  box-shadow: 0 0 4px #ff4757, 6px 0 #ff4757, 6px 0 4px #ff4757;
  border: none;
}

.monsterEntity[data-variant="skeleton_king"] .monsterAdornment {
  width: 22px;
  height: 8px;
  left: 21px;
  top: -5px;
  background: #eccc68;
  clip-path: polygon(0% 100%, 0% 0%, 25% 60%, 50% 0%, 75% 60%, 100% 0%, 100% 100%);
  border: none;
  box-shadow: 0 0 6px #eccc68;
}

.monsterEntity[data-variant="skeleton_king"] .monsterLimbs {
  width: 6px;
  height: 18px;
  left: 16px;
  top: 44px;
  background: #f1f2f6;
  box-shadow: 26px 0 #f1f2f6;
  border-radius: 2px;
}

.monsterEntity[data-variant="skeleton_king"] .monsterTail {
  width: 32px;
  height: 32px;
  left: 16px;
  top: 24px;
  background: #57606f;
  border-radius: 4px;
  z-index: -1;
}

/* =======================================
   ZOMBIE (Fossoyeur / Zombi)
   ======================================= */
.monsterEntity[data-variant="zombie"] .monsterBody {
  width: 26px;
  height: 28px;
  left: 19px;
  top: 20px;
  background: linear-gradient(180deg, #2ed573, #2f3542);
  border-radius: 8px;
}

.monsterEntity[data-variant="zombie"] .monsterHead {
  width: 20px;
  height: 18px;
  left: 22px;
  top: 4px;
  border-radius: 50% 40% 40% 50%;
  background: #2ed573;
}

.monsterEntity[data-variant="zombie"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 25px;
  top: 9px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 3px #ffffff;
  border: none;
}

.monsterEntity[data-variant="zombie"] .monsterAdornment {
  width: 14px;
  height: 5px;
  left: 25px;
  top: 1px;
  background: #ff4757;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="zombie"] .monsterLimbs {
  width: 14px;
  height: 6px;
  left: 8px;
  top: 24px;
  background: #2ed573;
  box-shadow: 34px 0 #2ed573;
  border-radius: 3px;
}

.monsterEntity[data-variant="zombie"] .monsterTail {
  display: none;
}

/* =======================================
   LICH (Liche - Boss)
   ======================================= */
.monsterEntity[data-variant="lich"] .monsterBody {
  width: 28px;
  height: 38px;
  left: 18px;
  top: 16px;
  background: linear-gradient(180deg, #5f27cd, #222f3e);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 15px rgba(95, 39, 205, 0.6);
}

.monsterEntity[data-variant="lich"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 0px;
  border-radius: 50%;
  background: #000000;
  border: 1.5px solid #5f27cd;
}

.monsterEntity[data-variant="lich"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 6px;
  border-radius: 50%;
  background: #1dd1a1;
  box-shadow: 0 0 6px #1dd1a1, 6px 0 #1dd1a1, 6px 0 6px #1dd1a1;
  border: none;
}

.monsterEntity[data-variant="lich"] .monsterAdornment {
  width: 10px;
  height: 10px;
  left: 6px;
  top: 24px;
  background: radial-gradient(circle, #1dd1a1, #10ac84);
  border-radius: 50%;
  box-shadow: 0 0 10px #1dd1a1;
  border: none;
}

.monsterEntity[data-variant="lich"] .monsterLimbs {
  width: 6px;
  height: 12px;
  left: 29px;
  top: 52px;
  background: #5f27cd;
  border-radius: 0 0 50% 50%;
  filter: blur(1px);
}

.monsterEntity[data-variant="lich"] .monsterTail {
  display: none;
}

/* =======================================
   MONKEY (Marmouset)
   ======================================= */
.monsterEntity[data-variant="monkey"] .monsterBody {
  width: 26px;
  height: 24px;
  left: 19px;
  top: 24px;
  background: radial-gradient(circle at 30% 30%, #a0522d, #5c3a21);
  border-radius: 50%;
}

.monsterEntity[data-variant="monkey"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 10px;
  background: #a0522d;
  border-radius: 50%;
}

.monsterEntity[data-variant="monkey"] .monsterFace {
  width: 14px;
  height: 10px;
  left: 25px;
  top: 14px;
  background: #f5cd79;
  border-radius: 50%;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="monkey"] .monsterFace::before,
.monsterEntity[data-variant="monkey"] .monsterFace::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: #000000;
  border-radius: 50%;
  top: 3px;
}

.monsterEntity[data-variant="monkey"] .monsterFace::before {
  left: 3px;
}

.monsterEntity[data-variant="monkey"] .monsterFace::after {
  right: 3px;
}

.monsterEntity[data-variant="monkey"] .monsterAdornment {
  width: 6px;
  height: 6px;
  left: 19px;
  top: 12px;
  background: #a0522d;
  border-radius: 50%;
  box-shadow: 20px 0 #a0522d;
}

.monsterEntity[data-variant="monkey"] .monsterLimbs {
  width: 6px;
  height: 16px;
  left: 15px;
  top: 38px;
  background: #5c3a21;
  box-shadow: 28px 0 #5c3a21;
  border-radius: 3px;
}

.monsterEntity[data-variant="monkey"] .monsterTail {
  width: 20px;
  height: 10px;
  left: 5px;
  top: 30px;
  border-radius: 50%;
  border: 3px solid #5c3a21;
  border-top: none;
  border-left: none;
  transform: rotate(-20deg);
  box-shadow: none;
}

/* =======================================
   GORILLA (Gorille)
   ======================================= */
.monsterEntity[data-variant="gorilla"] .monsterBody {
  width: 36px;
  height: 32px;
  left: 14px;
  top: 22px;
  background: linear-gradient(135deg, #2f3542, #11141a);
  border-radius: 12px 12px 8px 8px;
}

.monsterEntity[data-variant="gorilla"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 8px;
  background: #2f3542;
  border-radius: 8px 8px 4px 4px;
}

.monsterEntity[data-variant="gorilla"] .monsterFace {
  width: 4px;
  height: 3px;
  left: 26px;
  top: 14px;
  background: #ff4757;
  box-shadow: 8px 0 #ff4757;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="gorilla"] .monsterAdornment {
  width: 44px;
  height: 16px;
  left: 10px;
  top: 18px;
  background: #2f3542;
  border-radius: 6px;
  z-index: -1;
}

.monsterEntity[data-variant="gorilla"] .monsterLimbs {
  width: 8px;
  height: 18px;
  left: 12px;
  top: 40px;
  background: #11141a;
  box-shadow: 32px 0 #11141a;
  border-radius: 4px;
}

.monsterEntity[data-variant="gorilla"] .monsterTail {
  display: none;
}

/* =======================================
   MONKEY KING (Roi Singe - Boss)
   ======================================= */
.monsterEntity[data-variant="monkey_king"] .monsterBody {
  width: 32px;
  height: 30px;
  left: 16px;
  top: 22px;
  background: linear-gradient(135deg, #d35400, #f1c40f);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(241, 196, 15, 0.4);
}

.monsterEntity[data-variant="monkey_king"] .monsterHead {
  width: 22px;
  height: 22px;
  left: 21px;
  top: 6px;
  background: #d35400;
  border-radius: 50%;
}

.monsterEntity[data-variant="monkey_king"] .monsterFace {
  width: 16px;
  height: 12px;
  left: 24px;
  top: 11px;
  background: #ffeaa7;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="monkey_king"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #2ecc71;
  box-shadow: 8px 0 #2ecc71;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}

.monsterEntity[data-variant="monkey_king"] .monsterAdornment {
  width: 24px;
  height: 6px;
  left: 20px;
  top: 2px;
  background: #e74c3c;
  border-radius: 3px;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="monkey_king"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 16px;
  background: #e74c3c;
  left: 4px;
  top: -14px;
  transform: rotate(-20deg);
}

.monsterEntity[data-variant="monkey_king"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 16px;
  background: #e74c3c;
  right: 4px;
  top: -14px;
  transform: rotate(20deg);
}

.monsterEntity[data-variant="monkey_king"] .monsterLimbs {
  width: 8px;
  height: 18px;
  left: 10px;
  top: 38px;
  background: #d35400;
  box-shadow: 36px 0 #d35400;
  border-radius: 3px;
}

.monsterEntity[data-variant="monkey_king"] .monsterTail {
  width: 22px;
  height: 12px;
  left: 4px;
  top: 26px;
  border: 3px solid #f1c40f;
  border-top: none;
  border-left: none;
  border-radius: 50%;
  transform: rotate(-10deg);
}

/* =======================================
   JAGUAR (Jaguar)
   ======================================= */
.monsterEntity[data-variant="jaguar"] .monsterBody {
  width: 32px;
  height: 22px;
  left: 16px;
  top: 26px;
  background: linear-gradient(135deg, #f39c12, #d35400);
  border-radius: 8px;
}

.monsterEntity[data-variant="jaguar"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 28px;
  top: 12px;
  background: #f39c12;
  border-radius: 50%;
}

.monsterEntity[data-variant="jaguar"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 34px;
  top: 16px;
  background: #2ecc71;
  box-shadow: 6px 0 #2ecc71;
  border: none;
}

.monsterEntity[data-variant="jaguar"] .monsterAdornment {
  width: 5px;
  height: 6px;
  left: 29px;
  top: 7px;
  background: #d35400;
  box-shadow: 10px 0 #d35400;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: none;
}

.monsterEntity[data-variant="jaguar"] .monsterLimbs {
  width: 6px;
  height: 14px;
  left: 19px;
  top: 44px;
  background: #f39c12;
  box-shadow: 10px 0 #f39c12, 18px 0 #f39c12;
  border-radius: 2px;
}

.monsterEntity[data-variant="jaguar"] .monsterTail {
  width: 16px;
  height: 16px;
  left: 6px;
  top: 18px;
  border: 3px solid #d35400;
  border-bottom: none;
  border-right: none;
  border-radius: 50%;
  transform: rotate(15deg);
  box-shadow: none;
}

/* =======================================
   TIKOK (Tikok)
   ======================================= */
.monsterEntity[data-variant="tikok"] .monsterBody {
  width: 24px;
  height: 36px;
  left: 20px;
  top: 16px;
  background: linear-gradient(180deg, #8e44ad, #2c3e50);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.monsterEntity[data-variant="tikok"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="tikok"] .monsterFace {
  width: 16px;
  height: 6px;
  left: 24px;
  top: 22px;
  background: #e74c3c;
  box-shadow: 0 10px #f1c40f;
  border-radius: 3px;
  border: none;
}

.monsterEntity[data-variant="tikok"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #000000;
  left: 2px;
  top: 1px;
  box-shadow: 8px 0 #000000;
  border-radius: 50%;
}

.monsterEntity[data-variant="tikok"] .monsterAdornment {
  width: 6px;
  height: 12px;
  left: 29px;
  top: 4px;
  background: #2ecc71;
  box-shadow: -8px 2px #e67e22, 8px 2px #f1c40f;
  border-radius: 50% 50% 0 0;
  border: none;
}

.monsterEntity[data-variant="tikok"] .monsterLimbs {
  width: 6px;
  height: 8px;
  left: 23px;
  top: 50px;
  background: #7f8c8d;
  box-shadow: 12px 0 #7f8c8d;
  border-radius: 3px;
}

.monsterEntity[data-variant="tikok"] .monsterTail {
  display: none;
}

/* =======================================
   MINOTAUR VARIANTS (Minotor / Labyrinthe)
   ======================================= */

/* 1. Minotaure des Plaines (Base Minotaur) */
.monsterEntity[data-variant="minotaur"] .monsterBody {
  width: 32px;
  height: 28px;
  left: 16px;
  top: 24px;
  background: linear-gradient(180deg, #5c3a21, #2f1b0c);
  border-radius: 8px;
}

.monsterEntity[data-variant="minotaur"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 8px;
  background: #5c3a21;
  border-radius: 6px 6px 10px 10px;
}

.monsterEntity[data-variant="minotaur"] .monsterFace {
  width: 6px;
  height: 6px;
  left: 29px;
  top: 22px;
  border: 1.5px solid #f1c40f;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="minotaur"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ff4757;
  left: -1px;
  top: -7px;
  box-shadow: 6px 0 #ff4757;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur"] .monsterAdornment {
  width: 36px;
  height: 10px;
  left: 14px;
  top: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="minotaur"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 6px;
  background: #f1f2f6;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-45deg);
}

.monsterEntity[data-variant="minotaur"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 6px;
  background: #f1f2f6;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(45deg);
}

.monsterEntity[data-variant="minotaur"] .monsterLimbs {
  width: 8px;
  height: 14px;
  left: 18px;
  top: 48px;
  background: #2f1b0c;
  box-shadow: 20px 0 #2f1b0c;
  border-radius: 2px 2px 0 0;
}

.monsterEntity[data-variant="minotaur"] .monsterTail {
  display: none;
}

/* 2. Minotaure Corrompu (Dark void purple & glowing eyes) */
.monsterEntity[data-variant="minotaur_corrupt"] .monsterBody {
  width: 32px;
  height: 28px;
  left: 16px;
  top: 24px;
  background: linear-gradient(180deg, #3b0764, #1e0038);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 8px;
  background: #2e0854;
  border-radius: 6px 6px 10px 10px;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterFace {
  width: 6px;
  height: 6px;
  left: 29px;
  top: 22px;
  border: 1.5px solid #c084fc;
  border-radius: 50%;
  background: transparent;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #e879f9;
  left: -1px;
  top: -7px;
  box-shadow: 6px 0 #e879f9;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterAdornment {
  width: 38px;
  height: 12px;
  left: 13px;
  top: 3px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  background: #7e22ce;
  border: 1.5px solid #1e0038;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-50deg);
  box-shadow: 0 0 6px #c084fc;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  background: #7e22ce;
  border: 1.5px solid #1e0038;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(50deg);
  box-shadow: 0 0 6px #c084fc;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterLimbs {
  width: 8px;
  height: 14px;
  left: 18px;
  top: 48px;
  background: #1e0038;
  box-shadow: 20px 0 #1e0038;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotaur_corrupt"] .monsterTail {
  display: none;
}

/* 3. Minotaure de Pierre (Granite stone golem minotaur) */
.monsterEntity[data-variant="minotaur_stone"] .monsterBody {
  width: 34px;
  height: 28px;
  left: 15px;
  top: 24px;
  background: linear-gradient(180deg, #64748b, #334155);
  border-radius: 4px;
  box-shadow: inset 0 0 4px #94a3b8;
}

.monsterEntity[data-variant="minotaur_stone"] .monsterHead {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 8px;
  background: #475569;
  border-radius: 4px;
}

.monsterEntity[data-variant="minotaur_stone"] .monsterFace {
  width: 8px;
  height: 4px;
  left: 28px;
  top: 23px;
  background: #1e293b;
  border: 1px solid #94a3b8;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotaur_stone"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #eab308;
  left: -2px;
  top: -8px;
  box-shadow: 8px 0 #eab308;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur_stone"] .monsterAdornment {
  width: 40px;
  height: 12px;
  left: 12px;
  top: 2px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotaur_stone"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 8px;
  background: #94a3b8;
  border: 1.5px solid #1e293b;
  left: 0;
  top: 0;
  transform: rotate(-35deg);
}

.monsterEntity[data-variant="minotaur_stone"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 8px;
  background: #94a3b8;
  border: 1.5px solid #1e293b;
  right: 0;
  top: 0;
  transform: rotate(35deg);
}

.monsterEntity[data-variant="minotaur_stone"] .monsterLimbs {
  width: 10px;
  height: 14px;
  left: 16px;
  top: 48px;
  background: #334155;
  box-shadow: 22px 0 #334155;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotaur_stone"] .monsterTail {
  display: none;
}

/* 4. Guerrier Sabot (Armored Minotaur warrior with helmet & steel horns) */
.monsterEntity[data-variant="minotaur_warrior"] .monsterBody {
  width: 34px;
  height: 30px;
  left: 15px;
  top: 23px;
  background: linear-gradient(180deg, #475569, #1e293b);
  border: 2px solid #d97706;
  border-radius: 8px 8px 4px 4px;
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterHead {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 7px;
  background: #334155;
  border: 1.5px solid #d97706;
  border-radius: 6px 6px 10px 10px;
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterFace {
  width: 8px;
  height: 6px;
  left: 28px;
  top: 22px;
  border: 1.5px solid #f59e0b;
  border-radius: 3px;
  background: #78350f;
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ef4444;
  left: 0px;
  top: -7px;
  box-shadow: 6px 0 #ef4444;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterAdornment {
  width: 40px;
  height: 12px;
  left: 12px;
  top: 2px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  background: #cbd5e1;
  border: 1.5px solid #d97706;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-45deg);
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  background: #cbd5e1;
  border: 1.5px solid #d97706;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(45deg);
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterLimbs {
  width: 9px;
  height: 15px;
  left: 17px;
  top: 49px;
  background: #1e293b;
  box-shadow: 21px 0 #1e293b;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotaur_warrior"] .monsterTail {
  display: none;
}

/* 5. Bélier Cornu (Ram-horned Minotaur with massive curved horns) */
.monsterEntity[data-variant="minotaur_ram"] .monsterBody {
  width: 34px;
  height: 28px;
  left: 15px;
  top: 24px;
  background: linear-gradient(180deg, #4a3728, #261910);
  border-radius: 10px;
}

.monsterEntity[data-variant="minotaur_ram"] .monsterHead {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 8px;
  background: #4a3728;
  border-radius: 8px 8px 12px 12px;
}

.monsterEntity[data-variant="minotaur_ram"] .monsterFace {
  width: 8px;
  height: 6px;
  left: 28px;
  top: 22px;
  border: 1.5px solid #d97706;
  border-radius: 4px;
  background: #261910;
}

.monsterEntity[data-variant="minotaur_ram"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #f59e0b;
  left: 0px;
  top: -7px;
  box-shadow: 6px 0 #f59e0b;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur_ram"] .monsterAdornment {
  width: 44px;
  height: 16px;
  left: 10px;
  top: 0px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotaur_ram"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 12px;
  background: transparent;
  border: 3px solid #d97706;
  border-right: none;
  border-bottom: none;
  border-radius: 50% 0 0 50%;
  left: 0;
  top: 2px;
  transform: rotate(-30deg);
}

.monsterEntity[data-variant="minotaur_ram"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 12px;
  background: transparent;
  border: 3px solid #d97706;
  border-left: none;
  border-bottom: none;
  border-radius: 0 50% 50% 0;
  right: 0;
  top: 2px;
  transform: rotate(30deg);
}

.monsterEntity[data-variant="minotaur_ram"] .monsterLimbs {
  width: 9px;
  height: 14px;
  left: 17px;
  top: 48px;
  background: #261910;
  box-shadow: 21px 0 #261910;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotaur_ram"] .monsterTail {
  display: none;
}

/* 6. Minotocure (Mystic shamanic healer minotaur) */
.monsterEntity[data-variant="minotocure"] .monsterBody {
  width: 32px;
  height: 30px;
  left: 16px;
  top: 23px;
  background: linear-gradient(180deg, #0f766e, #134e4a);
  border-radius: 8px;
  box-shadow: 0 0 12px #2dd4bf;
}

.monsterEntity[data-variant="minotocure"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 7px;
  background: #1e1b4b;
  border-radius: 6px 6px 10px 10px;
  border: 1px solid #2dd4bf;
}

.monsterEntity[data-variant="minotocure"] .monsterFace {
  width: 6px;
  height: 6px;
  left: 29px;
  top: 22px;
  border: 1.5px solid #2dd4bf;
  border-radius: 50%;
  background: transparent;
}

.monsterEntity[data-variant="minotocure"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #67e8f9;
  left: -1px;
  top: -7px;
  box-shadow: 6px 0 #67e8f9;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotocure"] .monsterAdornment {
  width: 36px;
  height: 12px;
  left: 14px;
  top: 2px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotocure"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 7px;
  background: #99f6e4;
  border: 1.5px solid #134e4a;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 8px #2dd4bf;
}

.monsterEntity[data-variant="minotocure"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 7px;
  background: #99f6e4;
  border: 1.5px solid #134e4a;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #2dd4bf;
}

.monsterEntity[data-variant="minotocure"] .monsterLimbs {
  width: 8px;
  height: 14px;
  left: 18px;
  top: 49px;
  background: #134e4a;
  box-shadow: 20px 0 #134e4a;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotocure"] .monsterTail {
  display: none;
}

/* 7. Minotaure Enragé (Enraged fiery berserker minotaur) */
.monsterEntity[data-variant="minotaur_enraged"] .monsterBody {
  width: 34px;
  height: 30px;
  left: 15px;
  top: 23px;
  background: linear-gradient(180deg, #b91c1c, #450a0a);
  border-radius: 8px;
  box-shadow: 0 0 16px #ef4444;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterHead {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 7px;
  background: #7f1d1d;
  border-radius: 6px 6px 12px 12px;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterFace {
  width: 8px;
  height: 8px;
  left: 28px;
  top: 21px;
  border: 2px solid #fef08a;
  border-radius: 50%;
  background: transparent;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #facc15;
  left: -1px;
  top: -6px;
  box-shadow: 8px 0 #facc15;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterAdornment {
  width: 40px;
  height: 14px;
  left: 12px;
  top: 1px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background: #991b1b;
  border: 1.5px solid #450a0a;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-55deg);
  box-shadow: 0 0 8px #ef4444;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background: #991b1b;
  border: 1.5px solid #450a0a;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(55deg);
  box-shadow: 0 0 8px #ef4444;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterLimbs {
  width: 9px;
  height: 14px;
  left: 17px;
  top: 49px;
  background: #450a0a;
  box-shadow: 21px 0 #450a0a;
  border-radius: 2px;
}

.monsterEntity[data-variant="minotaur_enraged"] .monsterTail {
  width: 6px;
  height: 18px;
  left: 10px;
  top: 34px;
  background: #ef4444;
  border-radius: 50%;
  transform: rotate(-25deg);
}

/* 8. MINOTOT (Garde Minotot & Le Minotot - Boss) */
.monsterEntity[data-variant="minotot"] .monsterBody {
  width: 36px;
  height: 32px;
  left: 14px;
  top: 22px;
  background: linear-gradient(180deg, #d35400, #7f0f00);
  border-radius: 8px;
  box-shadow: 0 0 15px #e67e22;
}

.monsterEntity[data-variant="minotot"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 6px;
  background: #7f0f00;
  border-radius: 6px 6px 12px 12px;
}

.monsterEntity[data-variant="minotot"] .monsterFace {
  width: 8px;
  height: 8px;
  left: 28px;
  top: 21px;
  border: 2px solid #ffd700;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.monsterEntity[data-variant="minotot"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #f1c40f;
  left: -1px;
  top: -6px;
  box-shadow: 8px 0 #f1c40f;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotot"] .monsterAdornment {
  width: 36px;
  height: 10px;
  left: 14px;
  top: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="minotot"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background: #ffd700;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  left: 8px;
  top: 0px;
  transform: rotate(-55deg);
  box-shadow: 0 0 8px #ffd700;
}

.monsterEntity[data-variant="minotot"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background: #ffd700;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  right: 8px;
  top: 0px;
  transform: rotate(55deg);
  box-shadow: 0 0 8px #ffd700;
}

.monsterEntity[data-variant="minotot"] .monsterLimbs {
  width: 10px;
  height: 14px;
  left: 16px;
  top: 50px;
  background: #ffd700;
  box-shadow: 22px 0 #ffd700;
  border-radius: 3px;
}

.monsterEntity[data-variant="minotot"] .monsterTail {
  width: 6px;
  height: 20px;
  left: 8px;
  top: 32px;
  background: #e67e22;
  border-radius: 50%;
  transform: rotate(-30deg);
  box-shadow: 0 0 10px #e67e22;
}

/* 9. Minos de Magma (Molten lava obsidian Minotaur) */
.monsterEntity[data-variant="minos_magma"] .monsterBody {
  width: 34px;
  height: 30px;
  left: 15px;
  top: 23px;
  background: linear-gradient(180deg, #dc2626, #18181b);
  border: 1.5px solid #f97316;
  border-radius: 8px;
  box-shadow: 0 0 18px #f97316;
}

.monsterEntity[data-variant="minos_magma"] .monsterHead {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 7px;
  background: #27272a;
  border: 1px solid #f97316;
  border-radius: 6px 6px 12px 12px;
}

.monsterEntity[data-variant="minos_magma"] .monsterFace {
  width: 8px;
  height: 8px;
  left: 28px;
  top: 21px;
  border: 2px solid #ffedd5;
  border-radius: 50%;
  background: transparent;
}

.monsterEntity[data-variant="minos_magma"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #f97316;
  left: -1px;
  top: -6px;
  box-shadow: 8px 0 #f97316;
  border-radius: 50%;
}

.monsterEntity[data-variant="minos_magma"] .monsterAdornment {
  width: 40px;
  height: 14px;
  left: 12px;
  top: 1px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minos_magma"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background: #f97316;
  border: 1.5px solid #7f1d1d;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-55deg);
  box-shadow: 0 0 10px #f97316;
}

.monsterEntity[data-variant="minos_magma"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background: #f97316;
  border: 1.5px solid #7f1d1d;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(55deg);
  box-shadow: 0 0 10px #f97316;
}

.monsterEntity[data-variant="minos_magma"] .monsterLimbs {
  width: 9px;
  height: 14px;
  left: 17px;
  top: 49px;
  background: #18181b;
  box-shadow: 21px 0 #18181b;
  border-radius: 2px;
}

.monsterEntity[data-variant="minos_magma"] .monsterTail {
  width: 6px;
  height: 18px;
  left: 10px;
  top: 34px;
  background: #ea580c;
  border-radius: 50%;
  transform: rotate(-25deg);
  box-shadow: 0 0 8px #ea580c;
}

/* 10. Le Minotaure Géant (Colossal Giant Boss Minotaur) */
.monsterEntity[data-variant="minotaur_giant"] .monsterBody {
  width: 40px;
  height: 34px;
  left: 12px;
  top: 20px;
  background: linear-gradient(180deg, #581c87, #1e1b4b);
  border: 2px solid #eab308;
  border-radius: 10px;
  box-shadow: 0 0 22px #eab308;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterHead {
  width: 28px;
  height: 24px;
  left: 18px;
  top: 2px;
  background: #2e1065;
  border: 1.5px solid #eab308;
  border-radius: 8px 8px 14px 14px;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterFace {
  width: 10px;
  height: 8px;
  left: 27px;
  top: 18px;
  border: 2px solid #fde047;
  border-radius: 50%;
  background: #1e1b4b;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ef4444;
  left: -1px;
  top: -8px;
  box-shadow: 10px 0 #ef4444;
  border-radius: 50%;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterAdornment {
  width: 48px;
  height: 16px;
  left: 8px;
  top: -6px;
  background: transparent;
  border: none;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  background: #f59e0b;
  border: 2px solid #1e1b4b;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-50deg);
  box-shadow: 0 0 12px #eab308;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  background: #f59e0b;
  border: 2px solid #1e1b4b;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(50deg);
  box-shadow: 0 0 12px #eab308;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterLimbs {
  width: 11px;
  height: 16px;
  left: 15px;
  top: 50px;
  background: #1e1b4b;
  box-shadow: 24px 0 #1e1b4b;
  border-radius: 3px;
}

.monsterEntity[data-variant="minotaur_giant"] .monsterTail {
  width: 7px;
  height: 22px;
  left: 6px;
  top: 30px;
  background: #eab308;
  border-radius: 50%;
  transform: rotate(-30deg);
  box-shadow: 0 0 12px #eab308;
}

/* =======================================
   RAM (Bélier)
   ======================================= */
.monsterEntity[data-variant="ram"] .monsterBody {
  width: 32px;
  height: 26px;
  left: 16px;
  top: 24px;
  background: radial-gradient(circle, #f1f2f6, #ced6e0);
  border-radius: 16px;
  box-shadow: inset 2px 2px 5px #ffffff;
}

.monsterEntity[data-variant="ram"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 12px;
  background: #ced6e0;
  border-radius: 50%;
}

.monsterEntity[data-variant="ram"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 27px;
  top: 18px;
  background: #000000;
  box-shadow: 6px 0 #000000;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="ram"] .monsterAdornment {
  width: 32px;
  height: 10px;
  left: 16px;
  top: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="ram"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #70a1ff;
  border-radius: 50%;
  border-top: none;
  border-right: none;
  left: 2px;
  transform: rotate(-45deg);
}

.monsterEntity[data-variant="ram"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #70a1ff;
  border-radius: 50%;
  border-top: none;
  border-left: none;
  right: 2px;
  transform: rotate(45deg);
}

.monsterEntity[data-variant="ram"] .monsterLimbs {
  width: 6px;
  height: 12px;
  left: 20px;
  top: 46px;
  background: #747d8c;
  box-shadow: 18px 0 #747d8c;
  border-radius: 2px;
}

.monsterEntity[data-variant="ram"] .monsterTail {
  width: 8px;
  height: 8px;
  left: 10px;
  top: 28px;
  background: #f1f2f6;
  border-radius: 50%;
}

/* =======================================
   T-REX (T-Rex - Boss)
   ======================================= */
.monsterEntity[data-variant="trex"] .monsterBody {
  width: 38px;
  height: 32px;
  left: 13px;
  top: 22px;
  background: linear-gradient(135deg, #27ae60, #1e824c, #1a5235);
  border-radius: 12px;
}

.monsterEntity[data-variant="trex"] .monsterHead {
  width: 26px;
  height: 20px;
  left: 24px;
  top: 6px;
  background: #27ae60;
  border-radius: 4px 12px 6px 4px;
}

.monsterEntity[data-variant="trex"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 38px;
  top: 10px;
  background: #f1c40f;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 5px #f1c40f;
}

.monsterEntity[data-variant="trex"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 3px;
  background: #ffffff;
  clip-path: polygon(0 0, 10% 100%, 20% 0, 30% 100%, 40% 0, 50% 100%, 60% 0, 70% 100%, 80% 0, 90% 100%, 100% 0);
  left: -10px;
  top: 8px;
}

.monsterEntity[data-variant="trex"] .monsterAdornment {
  width: 6px;
  height: 24px;
  left: 10px;
  top: 16px;
  background: #e67e22;
  border-radius: 3px;
  border: none;
  box-shadow: 0 6px #e67e22, 0 12px #e67e22;
}

.monsterEntity[data-variant="trex"] .monsterLimbs {
  width: 10px;
  height: 16px;
  left: 22px;
  top: 48px;
  background: #1e824c;
  border-radius: 4px;
  box-shadow: 12px -18px 0 -4px #27ae60;
}

.monsterEntity[data-variant="trex"] .monsterTail {
  width: 24px;
  height: 12px;
  left: -6px;
  top: 34px;
  background: #1e824c;
  border-radius: 50% 0 0 50%;
  transform: rotate(-20deg);
}

/* =======================================
   RAPTOR (Raptor)
   ======================================= */
.monsterEntity[data-variant="raptor"] .monsterBody {
  width: 30px;
  height: 18px;
  left: 17px;
  top: 26px;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border-radius: 6px;
}

.monsterEntity[data-variant="raptor"] .monsterHead {
  width: 20px;
  height: 12px;
  left: 27px;
  top: 16px;
  background: #2ecc71;
  border-radius: 3px 8px 4px 3px;
}

.monsterEntity[data-variant="raptor"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 39px;
  top: 19px;
  background: #f1c40f;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="raptor"] .monsterAdornment {
  width: 10px;
  height: 4px;
  left: 24px;
  top: 13px;
  background: #e74c3c;
  border-radius: 50% 50% 0 0;
  border: none;
}

.monsterEntity[data-variant="raptor"] .monsterLimbs {
  width: 6px;
  height: 16px;
  left: 22px;
  top: 40px;
  background: #27ae60;
  box-shadow: 10px 0 #27ae60;
  border-radius: 2px;
}

.monsterEntity[data-variant="raptor"] .monsterTail {
  width: 24px;
  height: 6px;
  left: -3px;
  top: 26px;
  background: #27ae60;
  border-radius: 3px;
  transform: rotate(-5deg);
}

/* =======================================
   PTERODACTYL (Ptérodactyle)
   ======================================= */
.monsterEntity[data-variant="pterodactyl"] .monsterBody {
  width: 20px;
  height: 22px;
  left: 22px;
  top: 22px;
  background: #9b59b6;
  border-radius: 4px;
}

.monsterEntity[data-variant="pterodactyl"] .monsterHead {
  width: 24px;
  height: 10px;
  left: 24px;
  top: 12px;
  background: #8e44ad;
  border-radius: 12px 2px 2px 12px;
  transform: rotate(-10deg);
}

.monsterEntity[data-variant="pterodactyl"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 15px;
  background: #ffffff;
  border: none;
}

.monsterEntity[data-variant="pterodactyl"] .monsterAdornment {
  width: 48px;
  height: 14px;
  left: 8px;
  top: 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="pterodactyl"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 12px;
  background: #9b59b6;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-25deg);
}

.monsterEntity[data-variant="pterodactyl"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 12px;
  background: #9b59b6;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(25deg);
}

.monsterEntity[data-variant="pterodactyl"] .monsterLimbs {
  width: 4px;
  height: 8px;
  left: 26px;
  top: 42px;
  background: #7d3c98;
  box-shadow: 8px 0 #7d3c98;
  border-radius: 1px;
}

.monsterEntity[data-variant="pterodactyl"] .monsterTail {
  width: 6px;
  height: 8px;
  left: 29px;
  top: 40px;
  background: #9b59b6;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: none;
}

/* =======================================
   TRICERATOPS (Tricératops)
   ======================================= */
.monsterEntity[data-variant="triceratops"] .monsterBody {
  width: 34px;
  height: 24px;
  left: 15px;
  top: 26px;
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  border-radius: 8px;
}

.monsterEntity[data-variant="triceratops"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 26px;
  top: 12px;
  background: #7f8c8d;
  border-radius: 50% 50% 4px 4px;
}

.monsterEntity[data-variant="triceratops"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 38px;
  top: 22px;
  background: #000000;
  box-shadow: -6px 0 #000000;
  border: none;
}

.monsterEntity[data-variant="triceratops"] .monsterAdornment {
  width: 20px;
  height: 6px;
  left: 28px;
  top: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="triceratops"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 4px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-30deg);
}

.monsterEntity[data-variant="triceratops"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 4px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(30deg);
}

.monsterEntity[data-variant="triceratops"] .monsterLimbs {
  width: 8px;
  height: 12px;
  left: 18px;
  top: 48px;
  background: #7f8c8d;
  box-shadow: 14px 0 #7f8c8d, 22px 0 #7f8c8d;
  border-radius: 2px;
}

.monsterEntity[data-variant="triceratops"] .monsterTail {
  width: 14px;
  height: 10px;
  left: 4px;
  top: 32px;
  background: #7f8c8d;
  border-radius: 50%;
  transform: rotate(15deg);
}

/* =======================================
   SAUROPOD (Diplodocus)
   ======================================= */
.monsterEntity[data-variant="sauropod"] .monsterBody {
  width: 36px;
  height: 26px;
  left: 14px;
  top: 26px;
  background: linear-gradient(135deg, #27ae60, #1e824c);
  border-radius: 12px;
}

.monsterEntity[data-variant="sauropod"] .monsterHead {
  width: 8px;
  height: 26px;
  left: 38px;
  top: 4px;
  background: #27ae60;
  border-radius: 4px 4px 0 0;
}

.monsterEntity[data-variant="sauropod"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 42px;
  top: 8px;
  background: #000000;
  border: none;
}

.monsterEntity[data-variant="sauropod"] .monsterAdornment {
  display: none;
}

.monsterEntity[data-variant="sauropod"] .monsterLimbs {
  width: 8px;
  height: 14px;
  left: 18px;
  top: 48px;
  background: #1e824c;
  box-shadow: 14px 0 #1e824c, 22px 0 #1e824c;
  border-radius: 2px;
}

.monsterEntity[data-variant="sauropod"] .monsterTail {
  width: 20px;
  height: 8px;
  left: -2px;
  top: 34px;
  background: #1e824c;
  border-radius: 50%;
  transform: rotate(25deg);
}

/* =======================================
   ANKYLOSAUR (Ankylosaure)
   ======================================= */
.monsterEntity[data-variant="ankylosaur"] .monsterBody {
  width: 34px;
  height: 22px;
  left: 15px;
  top: 26px;
  background: linear-gradient(135deg, #d35400, #a04000);
  border-radius: 16px 16px 8px 8px;
}

.monsterEntity[data-variant="ankylosaur"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 34px;
  top: 26px;
  background: #a04000;
  border-radius: 4px;
}

.monsterEntity[data-variant="ankylosaur"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 42px;
  top: 29px;
  background: #f1c40f;
  border: none;
}

.monsterEntity[data-variant="ankylosaur"] .monsterAdornment {
  width: 30px;
  height: 8px;
  left: 17px;
  top: 21px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="ankylosaur"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 6px;
  background: #f1f2f6;
  border: 1px solid #1c1511;
  border-radius: 50% 50% 0 0;
  left: 4px;
  box-shadow: 8px 0 #f1f2f6, 16px 0 #f1f2f6;
}

.monsterEntity[data-variant="ankylosaur"] .monsterLimbs {
  width: 8px;
  height: 10px;
  left: 18px;
  top: 46px;
  background: #a04000;
  box-shadow: 16px 0 #a04000;
  border-radius: 2px;
}

.monsterEntity[data-variant="ankylosaur"] .monsterTail {
  width: 18px;
  height: 10px;
  left: -1px;
  top: 30px;
  background: #a04000;
  border-radius: 50%;
  transform: rotate(10deg);
}

.monsterEntity[data-variant="ankylosaur"] .monsterTail::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #7f8c8d;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
  left: -3px;
  top: 1px;
}

/* =======================================
   CHRISTMAS YETI (Yéti de Noël - Boss)
   ======================================= */
.monsterEntity[data-variant="christmas_yeti"] .monsterBody {
  width: 36px;
  height: 32px;
  left: 14px;
  top: 22px;
  background: radial-gradient(circle, #ffffff, #dcdde1);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.monsterEntity[data-variant="christmas_yeti"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 8px;
  background: #ffffff;
  border-radius: 50%;
}

.monsterEntity[data-variant="christmas_yeti"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 14px;
  background: #00a8ff;
  box-shadow: 8px 0 #00a8ff, 0 0 4px #00a8ff;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="christmas_yeti"] .monsterAdornment {
  width: 18px;
  height: 10px;
  left: 23px;
  top: 1px;
  background: #e84118;
  border-radius: 50% 50% 0 0;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="christmas_yeti"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 50%;
  right: -2px;
  top: -2px;
}

.monsterEntity[data-variant="christmas_yeti"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 4px;
  background: #ffffff;
  border: 1px solid #1c1511;
  border-radius: 2px;
  left: -3px;
  bottom: -3px;
}

.monsterEntity[data-variant="christmas_yeti"] .monsterLimbs {
  width: 8px;
  height: 16px;
  left: 12px;
  top: 42px;
  background: #ffffff;
  box-shadow: 32px 0 #ffffff;
  border-radius: 3px;
}

.monsterEntity[data-variant="christmas_yeti"] .monsterTail {
  width: 6px;
  height: 22px;
  left: 6px;
  top: 24px;
  background: linear-gradient(180deg, #70a1ff, #1e90ff);
  border-radius: 3px;
  transform: rotate(-20deg);
  box-shadow: 0 0 8px #70a1ff;
}

/* =======================================
   ELF (Lutin)
   ======================================= */
.monsterEntity[data-variant="elf"] .monsterBody {
  width: 22px;
  height: 24px;
  left: 21px;
  top: 26px;
  background: #44bd32;
  border-radius: 6px;
}

.monsterEntity[data-variant="elf"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 12px;
  background: #ffdd59;
  border-radius: 50%;
}

.monsterEntity[data-variant="elf"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 18px;
  background: #000000;
  box-shadow: 6px 0 #000000;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="elf"] .monsterAdornment {
  width: 14px;
  height: 12px;
  left: 25px;
  top: 2px;
  background: #c23616;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: none;
}

.monsterEntity[data-variant="elf"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffdd59;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  top: -2px;
}

.monsterEntity[data-variant="elf"] .monsterLimbs {
  width: 4px;
  height: 12px;
  left: 24px;
  top: 48px;
  background: #c23616;
  box-shadow: 2px 0 #ffffff, 8px 0 #c23616, 10px 0 #ffffff;
  border: none;
}

.monsterEntity[data-variant="elf"] .monsterTail {
  display: none;
}

/* =======================================
   SNOWMAN (Bonhomme de neige)
   ======================================= */
.monsterEntity[data-variant="snowman"] .monsterBody {
  width: 30px;
  height: 26px;
  left: 17px;
  top: 28px;
  background: radial-gradient(circle at 35% 35%, #ffffff, #dcdde1);
  border-radius: 50%;
}

.monsterEntity[data-variant="snowman"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 12px;
  background: radial-gradient(circle at 35% 35%, #ffffff, #dcdde1);
  border-radius: 50%;
}

.monsterEntity[data-variant="snowman"] .monsterFace {
  width: 6px;
  height: 4px;
  left: 29px;
  top: 20px;
  background: #e67e22;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: rotate(180deg);
  border: none;
}

.monsterEntity[data-variant="snowman"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: #000000;
  left: 2px;
  top: -6px;
  box-shadow: 4px 0 #000000;
  border-radius: 50%;
}

.monsterEntity[data-variant="snowman"] .monsterAdornment {
  width: 18px;
  height: 12px;
  left: 23px;
  top: 2px;
  background: #2f3542;
  border-radius: 2px;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="snowman"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 3px;
  background: #2f3542;
  border: 1.5px solid #1c1511;
  left: -5px;
  bottom: -3px;
  border-radius: 2px;
}

.monsterEntity[data-variant="snowman"] .monsterLimbs {
  width: 16px;
  height: 3px;
  left: 5px;
  top: 22px;
  background: #8c7ae6;
  transform: rotate(15deg);
  box-shadow: 38px -4px #8c7ae6;
  border: none;
}

.monsterEntity[data-variant="snowman"] .monsterTail {
  width: 24px;
  height: 6px;
  left: 20px;
  top: 28px;
  background: #e84118;
  border-radius: 3px;
  border: 1.5px solid #1c1511;
}

/* =======================================
   REINDEER (Renne)
   ======================================= */
.monsterEntity[data-variant="reindeer"] .monsterBody {
  width: 32px;
  height: 22px;
  left: 16px;
  top: 26px;
  background: linear-gradient(135deg, #cd6133, #8c2e0b);
  border-radius: 8px;
}

.monsterEntity[data-variant="reindeer"] .monsterHead {
  width: 16px;
  height: 18px;
  left: 28px;
  top: 12px;
  background: #cd6133;
  border-radius: 50% 50% 4px 4px;
}

.monsterEntity[data-variant="reindeer"] .monsterFace {
  width: 5px;
  height: 5px;
  left: 36px;
  top: 20px;
  background: #ff4d4d;
  box-shadow: 0 0 5px #ff4d4d;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="reindeer"] .monsterAdornment {
  width: 24px;
  height: 10px;
  left: 24px;
  top: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="reindeer"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 10px;
  background: #8c2e0b;
  left: 4px;
  top: 0;
  transform: rotate(-30deg);
  box-shadow: 2px -4px #8c2e0b;
}

.monsterEntity[data-variant="reindeer"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 10px;
  background: #8c2e0b;
  right: 4px;
  top: 0;
  transform: rotate(30deg);
  box-shadow: -2px -4px #8c2e0b;
}

.monsterEntity[data-variant="reindeer"] .monsterLimbs {
  width: 4px;
  height: 14px;
  left: 18px;
  top: 46px;
  background: #cd6133;
  box-shadow: 8px 0 #cd6133, 16px 0 #cd6133, 24px 0 #cd6133;
  border-radius: 1px;
}

.monsterEntity[data-variant="reindeer"] .monsterTail {
  width: 6px;
  height: 10px;
  left: 11px;
  top: 22px;
  background: #cd6133;
  border-radius: 50%;
  transform: rotate(-30deg);
}

/* =======================================
   GLOUTON (Glouton)
   ======================================= */
.monsterEntity[data-variant="glouton"] .monsterBody {
  width: 36px;
  height: 36px;
  left: 14px;
  top: 20px;
  background: radial-gradient(circle at 35% 35%, #00a8ff, #0056b3);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 168, 255, 0.4);
}

.monsterEntity[data-variant="glouton"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="glouton"] .monsterFace {
  width: 24px;
  height: 14px;
  left: 20px;
  top: 32px;
  background: #000000;
  border-radius: 0 0 12px 12px;
  border: 1.5px solid #1c1511;
}

.monsterEntity[data-variant="glouton"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  background: #ffffff;
  clip-path: polygon(0 0, 10% 100%, 20% 0, 30% 100%, 40% 0, 50% 100%, 60% 0, 70% 100%, 80% 0, 90% 100%, 100% 0);
  left: 1px;
  top: 0px;
}

.monsterEntity[data-variant="glouton"] .monsterFace::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffdd59;
  left: 4px;
  top: -14px;
  box-shadow: 10px 0 #ffdd59;
  border-radius: 50%;
}

.monsterEntity[data-variant="glouton"] .monsterAdornment {
  width: 6px;
  height: 10px;
  left: 18px;
  top: 12px;
  background: #70a1ff;
  border-radius: 50% 50% 0 0;
  transform: rotate(-25deg);
  box-shadow: 18px 8px #70a1ff;
}

.monsterEntity[data-variant="glouton"] .monsterLimbs {
  width: 8px;
  height: 8px;
  left: 18px;
  top: 52px;
  background: #0056b3;
  box-shadow: 12px 0 #0056b3;
  border-radius: 50%;
}

.monsterEntity[data-variant="glouton"] .monsterTail {
  display: none;
}

/* =======================================
   CHRISTMAS GIFT (Cadeau de Noël)
   ======================================= */
.monsterEntity[data-variant="christmas_gift"] .monsterBody {
  width: 32px;
  height: 32px;
  left: 16px;
  top: 22px;
  background: linear-gradient(135deg, #e84118, #c23616);
  border-radius: 4px;
}

.monsterEntity[data-variant="christmas_gift"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="christmas_gift"] .monsterFace {
  width: 6px;
  height: 32px;
  left: 29px;
  top: 22px;
  background: #44bd32;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="christmas_gift"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 6px;
  background: #44bd32;
  left: -13px;
  top: 13px;
}

.monsterEntity[data-variant="christmas_gift"] .monsterAdornment {
  width: 14px;
  height: 10px;
  left: 25px;
  top: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="christmas_gift"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #44bd32;
  border-radius: 50%;
  left: 0;
  transform: rotate(-45deg);
}

.monsterEntity[data-variant="christmas_gift"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #44bd32;
  border-radius: 50%;
  right: 0;
  transform: rotate(45deg);
}

.monsterEntity[data-variant="christmas_gift"] .monsterLimbs {
  width: 6px;
  height: 10px;
  left: 20px;
  top: 52px;
  background: #ffdd59;
  box-shadow: 12px 0 #ffdd59;
  border-radius: 2px;
}

.monsterEntity[data-variant="christmas_gift"] .monsterTail {
  display: none;
}

/* =======================================
   FATHER WHIPPER (Père Fouettard - Boss)
   ======================================= */
.monsterEntity[data-variant="father_whipper"] .monsterBody {
  width: 26px;
  height: 36px;
  left: 19px;
  top: 20px;
  background: linear-gradient(180deg, #2f3542, #1e272e);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}

.monsterEntity[data-variant="father_whipper"] .monsterHead {
  width: 20px;
  height: 20px;
  left: 22px;
  top: 4px;
  background: #1e272e;
  border-radius: 50% 50% 2px 2px;
}

.monsterEntity[data-variant="father_whipper"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 11px;
  background: #ff4757;
  box-shadow: 6px 0 #ff4757, 0 0 4px #ff4757;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="father_whipper"] .monsterAdornment {
  width: 4px;
  height: 26px;
  left: 8px;
  top: 24px;
  background: #8c7ae6;
  border-radius: 2px;
  transform: rotate(15deg);
  box-shadow: 0 0 6px rgba(140, 122, 230, 0.6);
}

.monsterEntity[data-variant="father_whipper"] .monsterLimbs {
  width: 6px;
  height: 10px;
  left: 22px;
  top: 54px;
  background: #1e272e;
  box-shadow: 8px 0 #1e272e;
  border-radius: 2px;
}

.monsterEntity[data-variant="father_whipper"] .monsterTail {
  width: 14px;
  height: 14px;
  left: 4px;
  top: 38px;
  border: 2.5px solid #8c7ae6;
  border-top: none;
  border-left: none;
  border-radius: 50%;
  transform: rotate(30deg);
  box-shadow: none;
}

/* =======================================
   MUSHROOM (Champignon)
   ======================================= */
.monsterEntity[data-variant="mushroom"] .monsterBody {
  width: 14px;
  height: 24px;
  left: 25px;
  top: 28px;
  background: #f5f6fa;
  border-radius: 4px;
}

.monsterEntity[data-variant="mushroom"] .monsterHead {
  width: 34px;
  height: 18px;
  left: 15px;
  top: 12px;
  background: radial-gradient(circle at 50% 0%, #ff4757, #ff214f);
  border-radius: 18px 18px 4px 4px;
}

.monsterEntity[data-variant="mushroom"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 34px;
  background: #000000;
  box-shadow: 4px 0 #000000;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="mushroom"] .monsterAdornment {
  width: 4px;
  height: 4px;
  left: 22px;
  top: 16px;
  background: #ffffff;
  border-radius: 50%;
  border: none;
  box-shadow: 8px -2px #ffffff, 16px 2px #ffffff;
}

.monsterEntity[data-variant="mushroom"] .monsterLimbs {
  width: 6px;
  height: 6px;
  left: 24px;
  top: 50px;
  background: #ced6e0;
  box-shadow: 10px 0 #ced6e0;
  border-radius: 50%;
}

.monsterEntity[data-variant="mushroom"] .monsterTail {
  display: none;
}

/* =======================================
   DANDELION (Pissenlit)
   ======================================= */
.monsterEntity[data-variant="dandelion"] .monsterBody,
.monsterEntity[data-variant="pissenlit"] .monsterBody {
  width: 5px;
  height: 30px;
  left: 29.5px;
  top: 22px;
  background: linear-gradient(180deg, #2ed573 0%, #20bf6b 100%);
  border-radius: 3px;
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.35);
}

.monsterEntity[data-variant="dandelion"] .monsterHead,
.monsterEntity[data-variant="pissenlit"] .monsterHead {
  width: 28px;
  height: 28px;
  left: 18px;
  top: 3px;
  background: radial-gradient(circle at 45% 45%, #fff275 0%, #f1c40f 45%, #f39c12 85%, #d35400 100%);
  border-radius: 50%;
  border: 2px dashed #ffbe0f;
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.6), inset 0 0 4px rgba(255, 234, 167, 0.8);
}

.monsterEntity[data-variant="dandelion"] .monsterFace,
.monsterEntity[data-variant="pissenlit"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 13px;
  background: #2d3436;
  box-shadow: 7px 0 #2d3436;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="dandelion"] .monsterAdornment,
.monsterEntity[data-variant="pissenlit"] .monsterAdornment {
  width: 24px;
  height: 12px;
  left: 20px;
  top: 42px;
  background: linear-gradient(135deg, #2ed573 0%, #26af61 100%);
  clip-path: polygon(50% 0%, 100% 80%, 80% 100%, 50% 65%, 20% 100%, 0% 80%);
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="dandelion"] .monsterLimbs,
.monsterEntity[data-variant="pissenlit"] .monsterLimbs {
  width: 8px;
  height: 6px;
  left: 24px;
  top: 49px;
  background: #20bf6b;
  box-shadow: 8px 0 #20bf6b;
  border-radius: 50%;
}

.monsterEntity[data-variant="dandelion"] .monsterTail,
.monsterEntity[data-variant="pissenlit"] .monsterTail {
  display: none;
}

/* =======================================
   MILIMULOU (Milimulou)
   ======================================= */
.monsterEntity[data-variant="milimulou"] .monsterBody {
  width: 24px;
  height: 20px;
  left: 20px;
  top: 26px;
  background: linear-gradient(180deg, #747d8c, #57606f);
  border-radius: 6px;
}

.monsterEntity[data-variant="milimulou"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 24px;
  top: 12px;
  background: #57606f;
  border-radius: 50%;
}

.monsterEntity[data-variant="milimulou"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 28px;
  top: 17px;
  background: #ffbe0f;
  box-shadow: 4px 0 #ffbe0f;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="milimulou"] .monsterAdornment {
  width: 4px;
  height: 6px;
  left: 23px;
  top: 7px;
  background: #747d8c;
  box-shadow: 10px 0 #747d8c;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border: none;
}

.monsterEntity[data-variant="milimulou"] .monsterLimbs {
  width: 5px;
  height: 12px;
  left: 22px;
  top: 44px;
  background: #57606f;
  box-shadow: 10px 0 #57606f;
  border-radius: 2px;
}

.monsterEntity[data-variant="milimulou"] .monsterTail {
  width: 6px;
  height: 12px;
  left: 15px;
  top: 22px;
  background: #747d8c;
  border-radius: 3px;
  transform: rotate(-30deg);
}

/* =======================================
   CRAQUELEUR (Craqueleur)
   ======================================= */
.monsterEntity[data-variant="craqueleur"] .monsterBody {
  width: 32px;
  height: 26px;
  left: 16px;
  top: 22px;
  background: linear-gradient(135deg, #7f8c8d, #34495e);
  border-radius: 6px;
}

.monsterEntity[data-variant="craqueleur"] .monsterHead {
  width: 18px;
  height: 16px;
  left: 23px;
  top: 8px;
  background: #7f8c8d;
  border-radius: 4px;
}

.monsterEntity[data-variant="craqueleur"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 27px;
  top: 13px;
  background: #00d2d3;
  box-shadow: 6px 0 #00d2d3, 0 0 4px #00d2d3;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="craqueleur"] .monsterAdornment {
  width: 40px;
  height: 10px;
  left: 12px;
  top: 18px;
  background: #34495e;
  border-radius: 3px;
  z-index: -1;
}

.monsterEntity[data-variant="craqueleur"] .monsterLimbs {
  width: 8px;
  height: 16px;
  left: 18px;
  top: 46px;
  background: #34495e;
  box-shadow: 18px 0 #34495e;
  border-radius: 2px;
}

.monsterEntity[data-variant="craqueleur"] .monsterTail {
  display: none;
}

/* =======================================
   FISH (Pichon)
   ======================================= */
.monsterEntity[data-variant="fish"] .monsterBody {
  width: 32px;
  height: 16px;
  left: 16px;
  top: 24px;
  background: linear-gradient(to right, #ff7f50, #1e90ff);
  border-radius: 50%;
}

.monsterEntity[data-variant="fish"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="fish"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 38px;
  top: 28px;
  background: #ffffff;
  border-radius: 50%;
  border: 1px solid #000000;
  box-shadow: none;
}

.monsterEntity[data-variant="fish"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: #000000;
  left: 1px;
  top: 1px;
  border-radius: 50%;
}

.monsterEntity[data-variant="fish"] .monsterAdornment {
  width: 12px;
  height: 8px;
  left: 26px;
  top: 18px;
  background: #ff7f50;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="fish"] .monsterLimbs {
  width: 8px;
  height: 6px;
  left: 28px;
  top: 38px;
  background: #1e90ff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="fish"] .monsterTail {
  width: 10px;
  height: 18px;
  left: 8px;
  top: 23px;
  background: #ff7f50;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  border: none;
}

/* =======================================
   SQUID (Kralamour)
   ======================================= */
.monsterEntity[data-variant="squid"] .monsterBody {
  width: 22px;
  height: 26px;
  left: 21px;
  top: 16px;
  background: linear-gradient(180deg, #9c27b0, #673ab7);
  border-radius: 50% 50% 0 0;
}

.monsterEntity[data-variant="squid"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="squid"] .monsterFace {
  width: 10px;
  height: 10px;
  left: 27px;
  top: 26px;
  background: radial-gradient(circle, #000000 3px, #ffffff 3px);
  border-radius: 50%;
  border: 1.5px solid #1c1511;
  box-shadow: none;
}

.monsterEntity[data-variant="squid"] .monsterAdornment {
  width: 32px;
  height: 8px;
  left: 16px;
  top: 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="squid"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #9c27b0;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
  left: 0;
}

.monsterEntity[data-variant="squid"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #9c27b0;
  border: 1.5px solid #1c1511;
  border-radius: 50%;
  right: 0;
}

.monsterEntity[data-variant="squid"] .monsterLimbs {
  width: 4px;
  height: 20px;
  left: 20px;
  top: 40px;
  background: #673ab7;
  border-radius: 2px;
  box-shadow: 6px 2px 0 #673ab7, 12px 0 0 #673ab7, 18px 2px 0 #673ab7;
}

.monsterEntity[data-variant="squid"] .monsterTail {
  display: none;
}

/* =======================================
   SCARAFEUILLE (Scarafeuille)
   ======================================= */
.monsterEntity[data-variant="scarafeuille"] .monsterBody {
  width: 30px;
  height: 24px;
  left: 17px;
  top: 24px;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border-radius: 50%;
}

.monsterEntity[data-variant="scarafeuille"] .monsterBody::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 24px;
  background: #1a5235;
  left: 14px;
  top: 0;
}

.monsterEntity[data-variant="scarafeuille"] .monsterHead {
  width: 12px;
  height: 12px;
  left: 26px;
  top: 14px;
  background: #1e824c;
  border-radius: 50%;
}

.monsterEntity[data-variant="scarafeuille"] .monsterFace {
  width: 2px;
  height: 2px;
  left: 29px;
  top: 18px;
  background: #f1c40f;
  box-shadow: 4px 0 #f1c40f;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="scarafeuille"] .monsterAdornment {
  width: 14px;
  height: 6px;
  left: 25px;
  top: 9px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="scarafeuille"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background: #1e824c;
  left: 2px;
  transform: rotate(-30deg);
}

.monsterEntity[data-variant="scarafeuille"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background: #1e824c;
  right: 2px;
  transform: rotate(30deg);
}

.monsterEntity[data-variant="scarafeuille"] .monsterLimbs {
  width: 4px;
  height: 10px;
  left: 20px;
  top: 44px;
  background: #1a5235;
  box-shadow: 6px 0 #1a5235, 14px 0 #1a5235, 20px 0 #1a5235;
  border-radius: 1px;
}

.monsterEntity[data-variant="scarafeuille"] .monsterTail {
  display: none;
}

/* =======================================
   TOAD (Crapaud)
   ======================================= */
.monsterEntity[data-variant="toad"] .monsterBody {
  width: 32px;
  height: 20px;
  left: 16px;
  top: 30px;
  background: linear-gradient(180deg, #78e08f, #38ae53);
  border-radius: 12px 12px 8px 8px;
}

.monsterEntity[data-variant="toad"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="toad"] .monsterFace {
  width: 8px;
  height: 8px;
  left: 20px;
  top: 24px;
  background: #f1c40f;
  border-radius: 50%;
  border: 1.5px solid #1c1511;
  box-shadow: 12px 0 #f1c40f;
}

.monsterEntity[data-variant="toad"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #000000;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  box-shadow: 12px 0 #000000;
}

.monsterEntity[data-variant="toad"] .monsterAdornment {
  width: 4px;
  height: 4px;
  left: 24px;
  top: 34px;
  background: #e67e22;
  border-radius: 50%;
  border: none;
  box-shadow: 12px 2px #e67e22, 6px -2px #e67e22;
}

.monsterEntity[data-variant="toad"] .monsterLimbs {
  width: 6px;
  height: 12px;
  left: 12px;
  top: 38px;
  background: #38ae53;
  border-radius: 3px;
  transform: rotate(-30deg);
  box-shadow: 28px -16px 0 #38ae53;
}

.monsterEntity[data-variant="toad"] .monsterLimbs::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  background: #38ae53;
  left: 22px;
  top: -14px;
  transform: rotate(60deg);
}

.monsterEntity[data-variant="toad"] .monsterTail {
  display: none;
}

/* =======================================
   DRAGOEUF (Dragoeuf)
   ======================================= */
.monsterEntity[data-variant="dragoeuf"] .monsterBody {
  width: 24px;
  height: 26px;
  left: 20px;
  top: 24px;
  background: #f1c40f;
  border-radius: 6px;
}

.monsterEntity[data-variant="dragoeuf"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 10px;
  background: #f1c40f;
  border-radius: 8px 8px 4px 4px;
}

.monsterEntity[data-variant="dragoeuf"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 14px;
  background: #ffffff;
  border-radius: 50%;
  border: 1px solid #000000;
  box-shadow: 6px 0 #ffffff;
}

.monsterEntity[data-variant="dragoeuf"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: #000000;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  box-shadow: 6px 0 #000000;
}

.monsterEntity[data-variant="dragoeuf"] .monsterAdornment {
  width: 28px;
  height: 12px;
  left: 18px;
  top: 38px;
  background: #f5f6fa;
  border-radius: 0 0 6px 6px;
  border: 1.5px solid #1c1511;
  clip-path: polygon(0 0, 20% 50%, 40% 0, 60% 50%, 80% 0, 100% 50%, 100% 100%, 0 100%);
  box-shadow: none;
}

.monsterEntity[data-variant="dragoeuf"] .monsterLimbs {
  width: 6px;
  height: 8px;
  left: 22px;
  top: 48px;
  background: #f1c40f;
  box-shadow: 10px 0 #f1c40f;
  border-radius: 2px;
}

.monsterEntity[data-variant="dragoeuf"] .monsterTail {
  width: 12px;
  height: 8px;
  left: 12px;
  top: 34px;
  background: #d35400;
  border-radius: 50%;
  transform: rotate(-20deg);
}

/* =======================================
   SCORIA (Scoria)
   ======================================= */
.monsterEntity[data-variant="scoria"] .monsterBody {
  width: 28px;
  height: 28px;
  left: 18px;
  top: 22px;
  background: linear-gradient(135deg, #2f3542, #1e272e);
  border-radius: 4px;
  box-shadow: 0 0 10px #ff4757;
}

.monsterEntity[data-variant="scoria"] .monsterHead {
  display: none;
}

.monsterEntity[data-variant="scoria"] .monsterFace {
  width: 20px;
  height: 4px;
  left: 22px;
  top: 32px;
  background: #ff4757;
  box-shadow: 0 -8px #ff7f50, 0 8px #ff9f43;
  border-radius: 2px;
  border: none;
}

.monsterEntity[data-variant="scoria"] .monsterAdornment {
  width: 10px;
  height: 10px;
  left: 27px;
  top: 6px;
  background: radial-gradient(circle, #ff9f43, #ff4757);
  border-radius: 50% 50% 0 50%;
  transform: rotate(-45deg);
  box-shadow: 0 0 8px #ff9f43;
  border: none;
}

.monsterEntity[data-variant="scoria"] .monsterLimbs {
  width: 4px;
  height: 6px;
  left: 22px;
  top: 50px;
  background: #ff4757;
  box-shadow: 16px 0 #ff4757;
  border-radius: 50%;
  border: none;
}

.monsterEntity[data-variant="scoria"] .monsterTail {
  display: none;
}

/* =======================================
   PLUME OR (Plume d'or)
   ======================================= */
.monsterEntity[data-variant="plume_or"] .monsterBody {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 24px;
  background: linear-gradient(135deg, #ffd700, #ff9f43);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.monsterEntity[data-variant="plume_or"] .monsterHead {
  width: 14px;
  height: 14px;
  left: 28px;
  top: 14px;
  background: #ffd700;
  border-radius: 50%;
}

.monsterEntity[data-variant="plume_or"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 38px;
  top: 18px;
  background: #e67e22;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: rotate(180deg);
  border: none;
}

.monsterEntity[data-variant="plume_or"] .monsterFace::before {
  content: "";
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: #000000;
  left: 2px;
  top: -4px;
  border-radius: 50%;
}

.monsterEntity[data-variant="plume_or"] .monsterAdornment {
  width: 36px;
  height: 12px;
  left: 14px;
  top: 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.monsterEntity[data-variant="plume_or"] .monsterAdornment::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 10px;
  background: #ffd700;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  left: 0;
  transform: rotate(-30deg);
}

.monsterEntity[data-variant="plume_or"] .monsterAdornment::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 10px;
  background: #ffd700;
  border: 1.5px solid #1c1511;
  border-radius: 50% 50% 0 0;
  right: 0;
  transform: rotate(30deg);
}

.monsterEntity[data-variant="plume_or"] .monsterLimbs {
  width: 2px;
  height: 12px;
  left: 24px;
  top: 46px;
  background: #ff9f43;
  box-shadow: 8px 0 #ff9f43;
  border-radius: 1px;
  border: none;
}

.monsterEntity[data-variant="plume_or"] .monsterTail {
  width: 12px;
  height: 14px;
  left: 12px;
  top: 30px;
  background: #ff9f43;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  border: none;
}

/* =======================================
   CLOUD (Nuage)
   ======================================= */
.monsterEntity[data-variant="cloud"] .monsterBody {
  width: 38px;
  height: 22px;
  left: 13px;
  top: 24px;
  background: radial-gradient(circle, #ffffff, #e3f2fd);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.monsterEntity[data-variant="cloud"] .monsterBody::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  left: 4px;
  top: -10px;
  border-top: 1.5px solid #b0bec5;
  border-left: 1.5px solid #b0bec5;
}

.monsterEntity[data-variant="cloud"] .monsterBody::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  right: 4px;
  top: -12px;
  border-top: 1.5px solid #b0bec5;
  border-right: 1.5px solid #b0bec5;
}

.monsterEntity[data-variant="cloud"] .monsterHead,
.monsterEntity[data-variant="cloud"] .monsterFace,
.monsterEntity[data-variant="cloud"] .monsterAdornment,
.monsterEntity[data-variant="cloud"] .monsterLimbs,
.monsterEntity[data-variant="cloud"] .monsterTail {
  display: none;
}

/* =======================================
   EVEILAM SOULS / AMES SPECIALE VISUELS
   ======================================= */
@keyframes soulFloat {
  0% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 4px rgba(129, 236, 236, 0.7)) brightness(1.2);
  }
  50% {
    transform: translateY(-5px) scale(1.03);
    filter: drop-shadow(0 0 12px rgba(129, 236, 236, 0.95)) brightness(1.4);
  }
  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 4px rgba(129, 236, 236, 0.7)) brightness(1.2);
  }
}

.monsterEntity[data-biome*="eveilam"] {
  opacity: 0.85;
}

.monsterEntity[data-biome*="eveilam"] .monsterSprite {
  animation: soulFloat 3s ease-in-out infinite;
}

.monsterEntity[data-biome*="eveilam"] .monsterSprite div:not(.monsterShadow) {
  box-shadow: 0 0 8px rgba(129, 236, 236, 0.7) !important;
  background: rgba(129, 236, 236, 0.75) !important;
  border-color: #81ecec !important;
}

@keyframes bossSoulFloat {
  0% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 8px rgba(162, 155, 254, 0.8)) brightness(1.3);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 0 20px rgba(162, 155, 254, 1)) brightness(1.6);
  }
  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 8px rgba(162, 155, 254, 0.8)) brightness(1.3);
  }
}

.monsterEntity[data-biome*="eveilam"].is-boss {
  opacity: 0.95;
}

.monsterEntity[data-biome*="eveilam"].is-boss .monsterSprite {
  animation: bossSoulFloat 4s ease-in-out infinite;
}

.monsterEntity[data-biome*="eveilam"].is-boss .monsterSprite div:not(.monsterShadow) {
  background: rgba(162, 155, 254, 0.8) !important;
  border-color: #a29bfe !important;
  box-shadow: 0 0 12px rgba(162, 155, 254, 0.8) !important;
}
/* =============================================================================
   ARTICOST MONSTERS & BOSSES (DONJONS 114 À 121)
   ============================================================================= */

/* --- 114: MANSOTS & MANSOT ROYAL --- */
.monsterEntity[data-variant="mansot"] .monsterBody,
.monsterEntity[data-variant="mamansot"] .monsterBody,
.monsterEntity[data-variant="mansot_royal"] .monsterBody,
.monsterEntity[data-variant="mansotinet"] .monsterBody {
  width: 32px;
  height: 34px;
  left: 16px;
  top: 18px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 60%, #ffffff 35%, #1e3a8a 70%);
  border: 2px solid #0f172a;
}

.monsterEntity[data-variant="mansotinet"] .monsterBody {
  width: 24px;
  height: 26px;
  left: 20px;
  top: 24px;
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 50% 55%, #f8fafc 40%, #60a5fa 75%, #1e40af 100%);
  border: 1.5px solid #0f172a;
  box-shadow: 0 0 8px rgba(147, 197, 253, 0.4);
}

.monsterEntity[data-variant="mansot_royal"] .monsterBody {
  width: 36px;
  height: 38px;
  left: 14px;
  top: 14px;
  background: radial-gradient(circle at 50% 60%, #ffffff 38%, #172554 75%);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.monsterEntity[data-variant="mamansot"] .monsterBody {
  background: radial-gradient(circle at 50% 60%, #ffffff 35%, #4338ca 72%);
}

.monsterEntity[data-variant="mansot"] .monsterHead,
.monsterEntity[data-variant="mamansot"] .monsterHead,
.monsterEntity[data-variant="mansot_royal"] .monsterHead,
.monsterEntity[data-variant="mansotinet"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 6px;
  border-radius: 50%;
  background: #1e3a8a;
  border: 1.5px solid #0f172a;
}

.monsterEntity[data-variant="mansotinet"] .monsterHead {
  width: 18px;
  height: 17px;
  left: 23px;
  top: 12px;
  background: #3b82f6;
  border: 1.5px solid #0f172a;
}

.monsterEntity[data-variant="mansot_royal"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 2px;
  background: #172554;
}

.monsterEntity[data-variant="mamansot"] .monsterHead {
  background: #3730a3;
}

.monsterEntity[data-variant="mansot"] .monsterFace,
.monsterEntity[data-variant="mamansot"] .monsterFace,
.monsterEntity[data-variant="mansot_royal"] .monsterFace,
.monsterEntity[data-variant="mansotinet"] .monsterFace {
  width: 8px;
  height: 6px;
  left: 28px;
  top: 15px;
  background: #f97316;
  border-radius: 2px 2px 50% 50%;
  border: 1px solid #7c2d12;
  box-shadow: -4px -3px 0 -1px #fff, 8px -3px 0 -1px #fff, -4px -3px 0 0 #000, 8px -3px 0 0 #000;
}

.monsterEntity[data-variant="mansotinet"] .monsterFace {
  width: 6px;
  height: 5px;
  left: 29px;
  top: 20px;
  background: #fbbf24;
  border-radius: 50%;
  border: 1px solid #b45309;
  box-shadow: -3px -3px 0 0 #fff, 5px -3px 0 0 #fff, -3px -3px 0 1px #000, 5px -3px 0 1px #000;
}

.monsterEntity[data-variant="mansot_royal"] .monsterFace {
  left: 28px;
  top: 13px;
  background: #ea580c;
}

.monsterEntity[data-variant="mansot"] .monsterAdornment {
  width: 26px;
  height: 8px;
  left: 19px;
  top: 3px;
  border-radius: 6px;
  background: #38bdf8;
  border: 1px solid #0284c7;
}

.monsterEntity[data-variant="mansotinet"] .monsterAdornment {
  width: 14px;
  height: 6px;
  left: 25px;
  top: 8px;
  border-radius: 50%;
  background: #93c5fd;
  border: 1px solid #3b82f6;
}

.monsterEntity[data-variant="mamansot"] .monsterAdornment {
  width: 28px;
  height: 10px;
  left: 18px;
  top: 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ec4899, #a855f7);
  border: 1px solid #831843;
}

.monsterEntity[data-variant="mansot_royal"] .monsterAdornment {
  width: 22px;
  height: 14px;
  left: 21px;
  top: -8px;
  background: linear-gradient(135deg, #facc15, #eab308);
  clip-path: polygon(0% 100%, 20% 0%, 50% 40%, 80% 0%, 100% 100%);
  border: 1.5px solid #854d0e;
  box-shadow: 0 0 10px #facc15, inset 0 0 4px #fff;
}

.monsterEntity[data-variant="mansot"] .monsterLimbs,
.monsterEntity[data-variant="mamansot"] .monsterLimbs,
.monsterEntity[data-variant="mansot_royal"] .monsterLimbs,
.monsterEntity[data-variant="mansotinet"] .monsterLimbs {
  width: 10px;
  height: 6px;
  left: 20px;
  top: 48px;
  border-radius: 4px;
  background: #f97316;
  border: 1px solid #c2410c;
  box-shadow: 14px 0 #f97316;
}

.monsterEntity[data-variant="mansotinet"] .monsterLimbs {
  width: 7px;
  height: 5px;
  left: 23px;
  top: 48px;
  border-radius: 3px;
  background: #fbbf24;
  border: 1px solid #b45309;
  box-shadow: 11px 0 #fbbf24;
}

.monsterEntity[data-variant="mansot"] .monsterTail,
.monsterEntity[data-variant="mamansot"] .monsterTail,
.monsterEntity[data-variant="mansot_royal"] .monsterTail,
.monsterEntity[data-variant="mansotinet"] .monsterTail {
  width: 8px;
  height: 18px;
  left: 10px;
  top: 24px;
  border-radius: 50% 0 0 50%;
  background: #1e3a8a;
  border: 1.5px solid #0f172a;
  box-shadow: 36px 0 #1e3a8a;
}

.monsterEntity[data-variant="mansotinet"] .monsterTail {
  width: 6px;
  height: 12px;
  left: 15px;
  top: 28px;
  border-radius: 50% 0 0 50%;
  background: #3b82f6;
  border: 1px solid #0f172a;
  box-shadow: 28px 0 #3b82f6;
}

/* --- 115: FORBAN GLACÉ & CAPITAINE FRIGORN --- */
.monsterEntity[data-variant="pirate_frost"] .monsterBody,
.monsterEntity[data-variant="pirate_givre"] .monsterBody,
.monsterEntity[data-variant="matelot_givre"] .monsterBody,
.monsterEntity[data-variant="vigie_etheree"] .monsterBody,
.monsterEntity[data-variant="vigie_polaire"] .monsterBody,
.monsterEntity[data-variant="canonnier_articost"] .monsterBody,
.monsterEntity[data-variant="matelot_spectral"] .monsterBody,
.monsterEntity[data-variant="capitaine_frigorn"] .monsterBody {
  width: 28px;
  height: 32px;
  left: 18px;
  top: 20px;
  border-radius: 6px;
  background: linear-gradient(180deg, #0284c7, #0f172a);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.monsterEntity[data-variant="capitaine_frigorn"] .monsterBody {
  width: 34px;
  height: 36px;
  left: 15px;
  top: 18px;
  background: linear-gradient(180deg, #0e7490, #082f49);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.75);
}

.monsterEntity[data-variant="matelot_spectral"] .monsterBody,
.monsterEntity[data-variant="vigie_etheree"] .monsterBody {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.6), rgba(15, 23, 42, 0.4));
  border: 1.5px dashed #a5f3fc;
  box-shadow: 0 0 12px rgba(165, 243, 252, 0.7);
}

.monsterEntity[data-variant="canonnier_articost"] .monsterBody {
  width: 32px;
  height: 34px;
  left: 16px;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 2px solid #64748b;
}

.monsterEntity[data-variant="pirate_frost"] .monsterHead,
.monsterEntity[data-variant="pirate_givre"] .monsterHead,
.monsterEntity[data-variant="matelot_givre"] .monsterHead,
.monsterEntity[data-variant="vigie_etheree"] .monsterHead,
.monsterEntity[data-variant="vigie_polaire"] .monsterHead,
.monsterEntity[data-variant="canonnier_articost"] .monsterHead,
.monsterEntity[data-variant="matelot_spectral"] .monsterHead,
.monsterEntity[data-variant="capitaine_frigorn"] .monsterHead {
  width: 20px;
  height: 20px;
  left: 22px;
  top: 6px;
  border-radius: 50%;
  background: #a5f3fc;
  border: 1.5px solid #0891b2;
  box-shadow: 0 0 8px #38bdf8;
}

.monsterEntity[data-variant="capitaine_frigorn"] .monsterHead {
  width: 22px;
  height: 22px;
  left: 21px;
  top: 4px;
  background: #cffafe;
}

.monsterEntity[data-variant="pirate_frost"] .monsterFace,
.monsterEntity[data-variant="pirate_givre"] .monsterFace,
.monsterEntity[data-variant="matelot_givre"] .monsterFace,
.monsterEntity[data-variant="vigie_etheree"] .monsterFace,
.monsterEntity[data-variant="vigie_polaire"] .monsterFace,
.monsterEntity[data-variant="canonnier_articost"] .monsterFace,
.monsterEntity[data-variant="matelot_spectral"] .monsterFace,
.monsterEntity[data-variant="capitaine_frigorn"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 14px;
  background: #06b6d4;
  border-radius: 50%;
  box-shadow: 8px 0 #000;
  border: none;
}

.monsterEntity[data-variant="capitaine_frigorn"] .monsterFace {
  width: 5px;
  height: 5px;
  left: 25px;
  top: 13px;
  background: #38bdf8;
  box-shadow: 9px 0 #000, 0 0 6px #22d3ee;
}

.monsterEntity[data-variant="pirate_frost"] .monsterAdornment,
.monsterEntity[data-variant="pirate_givre"] .monsterAdornment,
.monsterEntity[data-variant="matelot_givre"] .monsterAdornment {
  width: 24px;
  height: 8px;
  left: 20px;
  top: 3px;
  border-radius: 4px;
  background: #0284c7;
  border: 1px solid #082f49;
}

.monsterEntity[data-variant="canonnier_articost"] .monsterAdornment {
  width: 14px;
  height: 18px;
  left: 36px;
  top: 16px;
  background: #334155;
  border: 2px solid #0f172a;
  border-radius: 3px;
  box-shadow: 0 0 6px #000;
}

.monsterEntity[data-variant="vigie_etheree"] .monsterAdornment,
.monsterEntity[data-variant="vigie_polaire"] .monsterAdornment {
  width: 16px;
  height: 12px;
  left: 24px;
  top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #38bdf8, transparent);
  border: 1px solid #67e8f9;
  filter: blur(1px);
}

.monsterEntity[data-variant="capitaine_frigorn"] .monsterAdornment {
  width: 32px;
  height: 14px;
  left: 16px;
  top: -4px;
  border-radius: 12px 12px 2px 2px;
  background: linear-gradient(180deg, #0c4a6e, #082f49);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8), inset 0 2px 0 #facc15;
}

.monsterEntity[data-variant="matelot_spectral"] .monsterAdornment {
  width: 14px;
  height: 14px;
  left: 25px;
  top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #67e8f9, transparent);
  border: none;
  filter: blur(2px);
}

.monsterEntity[data-variant="pirate_frost"] .monsterLimbs,
.monsterEntity[data-variant="pirate_givre"] .monsterLimbs,
.monsterEntity[data-variant="matelot_givre"] .monsterLimbs,
.monsterEntity[data-variant="vigie_etheree"] .monsterLimbs,
.monsterEntity[data-variant="vigie_polaire"] .monsterLimbs,
.monsterEntity[data-variant="canonnier_articost"] .monsterLimbs,
.monsterEntity[data-variant="matelot_spectral"] .monsterLimbs,
.monsterEntity[data-variant="capitaine_frigorn"] .monsterLimbs {
  width: 6px;
  height: 14px;
  left: 21px;
  top: 48px;
  border-radius: 2px;
  background: #0369a1;
  box-shadow: 16px 0 #78350f;
  border: 1px solid #082f49;
}

.monsterEntity[data-variant="capitaine_frigorn"] .monsterLimbs {
  width: 8px;
  height: 16px;
  left: 18px;
  top: 50px;
  box-shadow: 20px 0 #0284c7;
}

.monsterEntity[data-variant="pirate_frost"] .monsterTail,
.monsterEntity[data-variant="pirate_givre"] .monsterTail,
.monsterEntity[data-variant="matelot_givre"] .monsterTail,
.monsterEntity[data-variant="vigie_etheree"] .monsterTail,
.monsterEntity[data-variant="vigie_polaire"] .monsterTail,
.monsterEntity[data-variant="canonnier_articost"] .monsterTail,
.monsterEntity[data-variant="matelot_spectral"] .monsterTail,
.monsterEntity[data-variant="capitaine_frigorn"] .monsterTail {
  width: 18px;
  height: 10px;
  left: 23px;
  top: 54px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #38bdf8, transparent);
  border: none;
  filter: blur(3px);
}

/* --- 116: OBSIDIEN BRÛLEGIVRE & MONSTRES THERMIQUES --- */
.monsterEntity[data-variant="magmaroc_polaire"] .monsterBody,
.monsterEntity[data-variant="magmaroc_sauvage"] .monsterBody,
.monsterEntity[data-variant="craqueleur_lave"] .monsterBody,
.monsterEntity[data-variant="fumerolle_gelee"] .monsterBody,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterBody,
.monsterEntity[data-variant="cracglace_ardent"] .monsterBody,
.monsterEntity[data-variant="obsidien_brulegivre"] .monsterBody {
  width: 36px;
  height: 36px;
  left: 14px;
  top: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #09090b 40%, #dc2626 70%, #0284c7 95%);
  border: 2px solid #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), inset 0 0 8px #f97316;
}

.monsterEntity[data-variant="fumerolle_gelee"] .monsterBody,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterBody {
  width: 30px;
  height: 30px;
  left: 17px;
  top: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #e0f2fe 30%, #38bdf8 65%, rgba(249, 115, 22, 0.4) 95%);
  border: 1.5px dashed #67e8f9;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.7);
}

.monsterEntity[data-variant="obsidien_brulegivre"] .monsterBody {
  width: 42px;
  height: 42px;
  left: 11px;
  top: 14px;
  background: linear-gradient(135deg, #0f172a 35%, #b91c1c 65%, #06b6d4 90%);
  border: 2.5px solid #f97316;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.8), 0 0 8px rgba(6, 182, 212, 0.8);
}

.monsterEntity[data-variant="magmaroc_polaire"] .monsterHead,
.monsterEntity[data-variant="magmaroc_sauvage"] .monsterHead,
.monsterEntity[data-variant="craqueleur_lave"] .monsterHead,
.monsterEntity[data-variant="fumerolle_gelee"] .monsterHead,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterHead,
.monsterEntity[data-variant="cracglace_ardent"] .monsterHead,
.monsterEntity[data-variant="obsidien_brulegivre"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 2px;
  border-radius: 6px;
  background: #18181b;
  border: 2px solid #f97316;
}

.monsterEntity[data-variant="fumerolle_gelee"] .monsterHead,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 8px;
  border-radius: 50%;
  background: #bae6fd;
  border: 1.5px solid #38bdf8;
  filter: blur(1px);
}

.monsterEntity[data-variant="obsidien_brulegivre"] .monsterHead {
  width: 28px;
  height: 24px;
  left: 18px;
  top: -2px;
  background: #09090b;
  border: 2px solid #fb923c;
}

.monsterEntity[data-variant="magmaroc_polaire"] .monsterFace,
.monsterEntity[data-variant="magmaroc_sauvage"] .monsterFace,
.monsterEntity[data-variant="craqueleur_lave"] .monsterFace,
.monsterEntity[data-variant="fumerolle_gelee"] .monsterFace,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterFace,
.monsterEntity[data-variant="cracglace_ardent"] .monsterFace,
.monsterEntity[data-variant="obsidien_brulegivre"] .monsterFace {
  width: 5px;
  height: 4px;
  left: 24px;
  top: 10px;
  background: #fbbf24;
  box-shadow: 11px 0 #fbbf24, 0 0 6px #f97316;
  border-radius: 1px;
  border: none;
}

.monsterEntity[data-variant="obsidien_brulegivre"] .monsterFace {
  width: 6px;
  height: 4px;
  left: 23px;
  top: 7px;
  background: #ef4444;
  box-shadow: 14px 0 #38bdf8, 0 0 8px #f97316;
}

.monsterEntity[data-variant="magmaroc_polaire"] .monsterAdornment,
.monsterEntity[data-variant="magmaroc_sauvage"] .monsterAdornment,
.monsterEntity[data-variant="craqueleur_lave"] .monsterAdornment,
.monsterEntity[data-variant="cracglace_ardent"] .monsterAdornment {
  width: 14px;
  height: 10px;
  left: 25px;
  top: -6px;
  background: #38bdf8;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: 1px solid #0284c7;
  box-shadow: 0 0 6px #38bdf8;
}

.monsterEntity[data-variant="fumerolle_gelee"] .monsterAdornment,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterAdornment {
  width: 22px;
  height: 12px;
  left: 21px;
  top: -6px;
  background: radial-gradient(circle, #f97316, transparent);
  border-radius: 50%;
  filter: blur(2px);
}

.monsterEntity[data-variant="obsidien_brulegivre"] .monsterAdornment {
  width: 36px;
  height: 18px;
  left: 14px;
  top: -14px;
  background: linear-gradient(90deg, #dc2626, #0284c7);
  clip-path: polygon(0% 100%, 25% 0%, 45% 70%, 75% 0%, 100% 100%);
  border: 1.5px solid #f97316;
  box-shadow: 0 0 14px #ea580c;
}

.monsterEntity[data-variant="magmaroc_polaire"] .monsterLimbs,
.monsterEntity[data-variant="magmaroc_sauvage"] .monsterLimbs,
.monsterEntity[data-variant="craqueleur_lave"] .monsterLimbs,
.monsterEntity[data-variant="fumerolle_gelee"] .monsterLimbs,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterLimbs,
.monsterEntity[data-variant="cracglace_ardent"] .monsterLimbs,
.monsterEntity[data-variant="obsidien_brulegivre"] .monsterLimbs {
  width: 10px;
  height: 12px;
  left: 16px;
  top: 50px;
  border-radius: 4px;
  background: #27272a;
  border: 1.5px solid #ef4444;
  box-shadow: 22px 0 #27272a;
}

.monsterEntity[data-variant="magmaroc_polaire"] .monsterTail,
.monsterEntity[data-variant="magmaroc_sauvage"] .monsterTail,
.monsterEntity[data-variant="craqueleur_lave"] .monsterTail,
.monsterEntity[data-variant="fumerolle_gelee"] .monsterTail,
.monsterEntity[data-variant="fumerolle_sauvage"] .monsterTail,
.monsterEntity[data-variant="cracglace_ardent"] .monsterTail,
.monsterEntity[data-variant="obsidien_brulegivre"] .monsterTail {
  width: 12px;
  height: 8px;
  left: 26px;
  top: 52px;
  background: #ef4444;
  border-radius: 50%;
  filter: blur(4px);
}

/* --- 117: VILLAGE GIVRÉ & TENGU POLAIRE --- */
.monsterEntity[data-variant="renard_polaire"] .monsterBody,
.monsterEntity[data-variant="renard_sauvage"] .monsterBody,
.monsterEntity[data-variant="esprit_neiges"] .monsterBody,
.monsterEntity[data-variant="givrefoux_flaneur"] .monsterBody,
.monsterEntity[data-variant="yomi_frost"] .monsterBody,
.monsterEntity[data-variant="esprit_yokai"] .monsterBody,
.monsterEntity[data-variant="tengu_polaire"] .monsterBody {
  width: 30px;
  height: 32px;
  left: 17px;
  top: 20px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #f8fafc, #cbd5e1);
  border: 1.5px solid #64748b;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.6);
}

.monsterEntity[data-variant="esprit_neiges"] .monsterBody {
  background: radial-gradient(circle, #e0f2fe 30%, #38bdf8 80%);
  border: 1.5px dashed #a5f3fc;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
}

.monsterEntity[data-variant="tengu_polaire"] .monsterBody {
  width: 36px;
  height: 36px;
  left: 14px;
  top: 18px;
  background: linear-gradient(180deg, #1e1b4b, #312e81);
  border: 2px solid #818cf8;
  box-shadow: 0 0 14px rgba(129, 140, 248, 0.7);
}

.monsterEntity[data-variant="renard_polaire"] .monsterHead,
.monsterEntity[data-variant="renard_sauvage"] .monsterHead,
.monsterEntity[data-variant="esprit_neiges"] .monsterHead,
.monsterEntity[data-variant="givrefoux_flaneur"] .monsterHead,
.monsterEntity[data-variant="yomi_frost"] .monsterHead,
.monsterEntity[data-variant="esprit_yokai"] .monsterHead {
  width: 22px;
  height: 20px;
  left: 21px;
  top: 6px;
  border-radius: 50% 50% 40% 40%;
  background: #f8fafc;
  border: 1.5px solid #94a3b8;
}

.monsterEntity[data-variant="tengu_polaire"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 3px;
  border-radius: 50%;
  background: #e11d48;
  border: 2px solid #9f1239;
  box-shadow: 0 0 10px #f43f5e;
}

.monsterEntity[data-variant="renard_polaire"] .monsterFace,
.monsterEntity[data-variant="renard_sauvage"] .monsterFace,
.monsterEntity[data-variant="esprit_neiges"] .monsterFace,
.monsterEntity[data-variant="givrefoux_flaneur"] .monsterFace,
.monsterEntity[data-variant="yomi_frost"] .monsterFace,
.monsterEntity[data-variant="esprit_yokai"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 14px;
  background: #0284c7;
  border-radius: 50%;
  box-shadow: 10px 0 #0284c7;
  border: none;
}

.monsterEntity[data-variant="tengu_polaire"] .monsterFace {
  width: 8px;
  height: 12px;
  left: 28px;
  top: 11px;
  background: #f43f5e;
  border-radius: 2px 2px 8px 8px;
  border: 1px solid #881337;
  box-shadow: -5px -2px 0 -1px #fbbf24, 7px -2px 0 -1px #fbbf24;
}

.monsterEntity[data-variant="renard_polaire"] .monsterAdornment,
.monsterEntity[data-variant="renard_sauvage"] .monsterAdornment,
.monsterEntity[data-variant="esprit_neiges"] .monsterAdornment,
.monsterEntity[data-variant="givrefoux_flaneur"] .monsterAdornment,
.monsterEntity[data-variant="yomi_frost"] .monsterAdornment {
  width: 8px;
  height: 10px;
  left: 20px;
  top: 1px;
  background: #f1f5f9;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 16px 0 #f1f5f9;
  border: 1px solid #cbd5e1;
}

.monsterEntity[data-variant="tengu_polaire"] .monsterAdornment {
  width: 42px;
  height: 22px;
  left: 11px;
  top: 10px;
  background: linear-gradient(180deg, #f8fafc, #94a3b8);
  clip-path: polygon(0% 50%, 25% 0%, 50% 70%, 75% 0%, 100% 50%, 80% 100%, 20% 100%);
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.monsterEntity[data-variant="renard_polaire"] .monsterLimbs,
.monsterEntity[data-variant="renard_sauvage"] .monsterLimbs,
.monsterEntity[data-variant="esprit_neiges"] .monsterLimbs,
.monsterEntity[data-variant="givrefoux_flaneur"] .monsterLimbs,
.monsterEntity[data-variant="yomi_frost"] .monsterLimbs,
.monsterEntity[data-variant="esprit_yokai"] .monsterLimbs {
  width: 5px;
  height: 14px;
  left: 21px;
  top: 48px;
  background: #e2e8f0;
  border-radius: 3px;
  box-shadow: 17px 0 #e2e8f0;
  border: 1px solid #94a3b8;
}

.monsterEntity[data-variant="tengu_polaire"] .monsterLimbs {
  width: 6px;
  height: 16px;
  left: 20px;
  top: 50px;
  background: #334155;
  border-radius: 3px;
  box-shadow: 18px 0 #334155;
  border: 1.5px solid #475569;
}

.monsterEntity[data-variant="renard_polaire"] .monsterTail,
.monsterEntity[data-variant="renard_sauvage"] .monsterTail,
.monsterEntity[data-variant="esprit_neiges"] .monsterTail,
.monsterEntity[data-variant="givrefoux_flaneur"] .monsterTail,
.monsterEntity[data-variant="yomi_frost"] .monsterTail,
.monsterEntity[data-variant="esprit_yokai"] .monsterTail {
  width: 14px;
  height: 22px;
  left: 4px;
  top: 24px;
  border-radius: 50% 50% 10px 50%;
  background: linear-gradient(135deg, #f8fafc, #38bdf8);
  border: 1px solid #cbd5e1;
}

.monsterEntity[data-variant="tengu_polaire"] .monsterTail {
  width: 20px;
  height: 14px;
  left: 22px;
  top: 46px;
  border-radius: 4px;
  background: #e2e8f0;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* --- 118: FORÊT FANTASTIQUE LUMINESCENTE & THYMUS --- */
/* Boss: Thymus Fongoïde */
.monsterEntity[data-variant="korriandre_fongoide"] .monsterBody {
  width: 44px;
  height: 42px;
  left: 10px;
  top: 14px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle, #3b0764, #180f2d);
  border: 2.5px solid #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.75), inset 0 0 10px #f43f5e;
}

.monsterEntity[data-variant="korriandre_fongoide"] .monsterHead {
  width: 40px;
  height: 24px;
  left: 12px;
  top: -6px;
  border-radius: 20px 20px 6px 6px;
  background: linear-gradient(180deg, #7c3aed, #2e1065);
  border: 2px solid #22d3ee;
  box-shadow: 0 0 12px #22d3ee, inset 0 -4px 0 #06b6d4;
}

.monsterEntity[data-variant="korriandre_fongoide"] .monsterFace {
  width: 5px;
  height: 5px;
  left: 20px;
  top: 8px;
  background: #22d3ee;
  border-radius: 50%;
  box-shadow: 18px 0 #22d3ee, 5px 4px 0 -1px #10b981, 13px 4px 0 -1px #10b981, 9px -2px 0 -1px #f43f5e, 0 0 8px #22d3ee;
  border: none;
}

.monsterEntity[data-variant="korriandre_fongoide"] .monsterAdornment {
  width: 46px;
  height: 18px;
  left: 9px;
  top: -14px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #f43f5e, #7c3aed, #22d3ee, #10b981);
  border: 1.5px solid #22d3ee;
  box-shadow: 0 0 14px #22d3ee;
}

.monsterEntity[data-variant="korriandre_fongoide"] .monsterLimbs {
  width: 60px;
  height: 28px;
  left: 2px;
  top: 36px;
  background: transparent;
  border-top: 3px solid #3b0764;
  border-bottom: 3px solid #2e1065;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.monsterEntity[data-variant="korriandre_fongoide"] .monsterTail {
  width: 20px;
  height: 20px;
  left: 22px;
  top: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #22d3ee, transparent);
  border: none;
  filter: blur(6px);
}

/* Donjon: Fongus Polaire */
.monsterEntity[data-variant="fongus_polaire"] .monsterBody {
  width: 22px;
  height: 30px;
  left: 21px;
  top: 22px;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #1e1b4b, #0f172a);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.monsterEntity[data-variant="fongus_polaire"] .monsterHead {
  width: 38px;
  height: 18px;
  left: 13px;
  top: 6px;
  border-radius: 18px 18px 4px 4px;
  background: radial-gradient(circle at 50% 30%, #312e81, #0284c7);
  border: 2px solid #bae6fd;
  box-shadow: 0 0 10px #38bdf8;
}

.monsterEntity[data-variant="fongus_polaire"] .monsterFace {
  width: 6px;
  height: 3px;
  left: 29px;
  top: 28px;
  background: #22d3ee;
  border-radius: 2px;
  box-shadow: 0 0 6px #67e8f9;
}

.monsterEntity[data-variant="fongus_polaire"] .monsterAdornment {
  width: 14px;
  height: 10px;
  left: 25px;
  top: -2px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #e0f2fe;
}

.monsterEntity[data-variant="fongus_polaire"] .monsterLimbs {
  width: 18px;
  height: 12px;
  left: 23px;
  top: 50px;
  background: #1e1b4b;
  border-radius: 4px;
  border: 1px solid #38bdf8;
}

/* Zone: Fongus Sauvage */
.monsterEntity[data-variant="fongus_sauvage"] .monsterBody {
  width: 32px;
  height: 26px;
  left: 16px;
  top: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b0764, #581c87);
  border: 2px solid #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
}

.monsterEntity[data-variant="fongus_sauvage"] .monsterHead {
  width: 24px;
  height: 16px;
  left: 20px;
  top: 10px;
  border-radius: 12px 12px 4px 4px;
  background: #7c3aed;
  border: 2px solid #22d3ee;
}

.monsterEntity[data-variant="fongus_sauvage"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 26px;
  top: 16px;
  background: #18181b;
  border-radius: 50%;
  box-shadow: 8px 0 #18181b;
}

.monsterEntity[data-variant="fongus_sauvage"] .monsterAdornment {
  width: 14px;
  height: 12px;
  left: 10px;
  top: 14px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 30px 2px #10b981, 0 0 8px #f43f5e;
}

.monsterEntity[data-variant="fongus_sauvage"] .monsterLimbs {
  width: 8px;
  height: 10px;
  left: 20px;
  top: 48px;
  background: #3b0764;
  box-shadow: 16px 0 #3b0764;
}

/* Donjon: Chenille Glacée */
.monsterEntity[data-variant="chenille_glacee"] .monsterBody {
  width: 36px;
  height: 22px;
  left: 14px;
  top: 26px;
  border-radius: 14px;
  background: linear-gradient(90deg, #1e1b4b, #312e81, #0284c7);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.monsterEntity[data-variant="chenille_glacee"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 36px;
  top: 20px;
  border-radius: 50%;
  background: #1e1b4b;
  border: 2px solid #bae6fd;
}

.monsterEntity[data-variant="chenille_glacee"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 42px;
  top: 25px;
  background: #22d3ee;
  border-radius: 50%;
  box-shadow: 0 0 6px #67e8f9;
}

.monsterEntity[data-variant="chenille_glacee"] .monsterAdornment {
  width: 8px;
  height: 10px;
  left: 24px;
  top: 18px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #bae6fd;
  box-shadow: -10px 2px #bae6fd, 0 0 8px #38bdf8;
}

/* Zone: Chenille Rampante */
.monsterEntity[data-variant="chenille_rampante"] .monsterBody,
.monsterEntity[data-variant="frost_caterpillar"] .monsterBody {
  width: 36px;
  height: 22px;
  left: 14px;
  top: 26px;
  border-radius: 14px;
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #10b981);
  border: 2px solid #22d3ee;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

.monsterEntity[data-variant="chenille_rampante"] .monsterHead,
.monsterEntity[data-variant="frost_caterpillar"] .monsterHead {
  width: 16px;
  height: 16px;
  left: 36px;
  top: 20px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #22d3ee;
}

.monsterEntity[data-variant="chenille_rampante"] .monsterFace,
.monsterEntity[data-variant="frost_caterpillar"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 42px;
  top: 25px;
  background: #18181b;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff;
}

.monsterEntity[data-variant="chenille_rampante"] .monsterAdornment,
.monsterEntity[data-variant="frost_caterpillar"] .monsterAdornment {
  width: 6px;
  height: 8px;
  left: 40px;
  top: 14px;
  border-radius: 50%;
  background: #f472b6;
  box-shadow: 0 0 6px #22d3ee;
}

/* Donjon: Spore Givrée */
.monsterEntity[data-variant="spore_givree"] .monsterBody {
  width: 26px;
  height: 26px;
  left: 19px;
  top: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #e0f2fe, #0284c7);
  border: 2px solid #bae6fd;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8), inset 0 0 8px #fff;
}

.monsterEntity[data-variant="spore_givree"] .monsterHead {
  width: 36px;
  height: 36px;
  left: 14px;
  top: 15px;
  border-radius: 50%;
  border: 1.5px dashed #38bdf8;
  background: transparent;
  pointer-events: none;
}

.monsterEntity[data-variant="spore_givree"] .monsterFace {
  width: 6px;
  height: 6px;
  left: 28px;
  top: 28px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #38bdf8;
}

/* Zone: Spore Luminescente */
.monsterEntity[data-variant="spore_luminescente"] .monsterBody,
.monsterEntity[data-variant="frost_spore"] .monsterBody {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #67e8f9, #7c3aed);
  border: 2px solid #f472b6;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.85), inset 0 0 6px #fff;
}

.monsterEntity[data-variant="spore_luminescente"] .monsterHead,
.monsterEntity[data-variant="frost_spore"] .monsterHead {
  width: 32px;
  height: 14px;
  left: 16px;
  top: 16px;
  border-radius: 50%;
  background: rgba(103, 232, 249, 0.6);
  box-shadow: 0 0 8px #22d3ee;
}

.monsterEntity[data-variant="spore_luminescente"] .monsterFace,
.monsterEntity[data-variant="frost_spore"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 29px;
  top: 29px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #f43f5e;
}

/* --- 119: CAVERNES DU COLOSSE & COLOSSE DES GLACES --- */
.monsterEntity[data-variant="blours_polaire"] .monsterBody,
.monsterEntity[data-variant="blours_sauvage"] .monsterBody,
.monsterEntity[data-variant="roc_gele"] .monsterBody,
.monsterEntity[data-variant="roc_ebreche"] .monsterBody,
.monsterEntity[data-variant="bestiole_articost"] .monsterBody,
.monsterEntity[data-variant="bestiole_furtive"] .monsterBody,
.monsterEntity[data-variant="colosse_des_glaces"] .monsterBody {
  width: 38px;
  height: 38px;
  left: 13px;
  top: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e293b, #334155);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.monsterEntity[data-variant="roc_ebreche"] .monsterBody {
  border-radius: 4px;
  background: linear-gradient(135deg, #09090b, #27272a 60%, #0284c7 90%);
  border: 2px dashed #38bdf8;
}

.monsterEntity[data-variant="colosse_des_glaces"] .monsterBody {
  width: 44px;
  height: 44px;
  left: 10px;
  top: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: 2.5px solid #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.8), inset 0 0 10px #0284c7;
}

.monsterEntity[data-variant="blours_polaire"] .monsterHead,
.monsterEntity[data-variant="blours_sauvage"] .monsterHead,
.monsterEntity[data-variant="roc_gele"] .monsterHead,
.monsterEntity[data-variant="roc_ebreche"] .monsterHead,
.monsterEntity[data-variant="bestiole_articost"] .monsterHead,
.monsterEntity[data-variant="bestiole_furtive"] .monsterHead,
.monsterEntity[data-variant="colosse_des_glaces"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 2px;
  border-radius: 6px;
  background: #334155;
  border: 2px solid #67e8f9;
}

.monsterEntity[data-variant="colosse_des_glaces"] .monsterHead {
  width: 28px;
  height: 26px;
  left: 18px;
  top: -4px;
  background: #1e293b;
  border: 2px solid #38bdf8;
}

.monsterEntity[data-variant="blours_polaire"] .monsterFace,
.monsterEntity[data-variant="blours_sauvage"] .monsterFace,
.monsterEntity[data-variant="roc_gele"] .monsterFace,
.monsterEntity[data-variant="roc_ebreche"] .monsterFace,
.monsterEntity[data-variant="bestiole_articost"] .monsterFace,
.monsterEntity[data-variant="bestiole_furtive"] .monsterFace,
.monsterEntity[data-variant="colosse_des_glaces"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 9px;
  background: #38bdf8;
  box-shadow: 11px 0 #38bdf8, 0 0 6px #67e8f9;
  border: none;
}

.monsterEntity[data-variant="colosse_des_glaces"] .monsterFace {
  width: 6px;
  height: 4px;
  left: 23px;
  top: 6px;
  background: #67e8f9;
  box-shadow: 14px 0 #67e8f9, 0 0 8px #38bdf8;
}

.monsterEntity[data-variant="blours_polaire"] .monsterAdornment,
.monsterEntity[data-variant="blours_sauvage"] .monsterAdornment,
.monsterEntity[data-variant="roc_gele"] .monsterAdornment,
.monsterEntity[data-variant="roc_ebreche"] .monsterAdornment,
.monsterEntity[data-variant="bestiole_articost"] .monsterAdornment,
.monsterEntity[data-variant="bestiole_furtive"] .monsterAdornment {
  width: 10px;
  height: 12px;
  left: 18px;
  top: -6px;
  background: #67e8f9;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 18px 0 #67e8f9;
  border: 1px solid #0284c7;
}

.monsterEntity[data-variant="colosse_des_glaces"] .monsterAdornment {
  width: 42px;
  height: 20px;
  left: 11px;
  top: -16px;
  background: linear-gradient(180deg, #e0f2fe, #0284c7);
  clip-path: polygon(0% 100%, 15% 0%, 35% 80%, 50% 20%, 65% 80%, 85% 0%, 100% 100%);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.85);
}

.monsterEntity[data-variant="blours_polaire"] .monsterLimbs,
.monsterEntity[data-variant="blours_sauvage"] .monsterLimbs,
.monsterEntity[data-variant="roc_gele"] .monsterLimbs,
.monsterEntity[data-variant="roc_ebreche"] .monsterLimbs,
.monsterEntity[data-variant="bestiole_articost"] .monsterLimbs,
.monsterEntity[data-variant="bestiole_furtive"] .monsterLimbs,
.monsterEntity[data-variant="colosse_des_glaces"] .monsterLimbs {
  width: 12px;
  height: 16px;
  left: 14px;
  top: 48px;
  border-radius: 4px;
  background: #1e293b;
  border: 2px solid #38bdf8;
  box-shadow: 24px 0 #1e293b;
}

.monsterEntity[data-variant="blours_polaire"] .monsterTail,
.monsterEntity[data-variant="blours_sauvage"] .monsterTail,
.monsterEntity[data-variant="roc_gele"] .monsterTail,
.monsterEntity[data-variant="roc_ebreche"] .monsterTail,
.monsterEntity[data-variant="bestiole_articost"] .monsterTail,
.monsterEntity[data-variant="bestiole_furtive"] .monsterTail,
.monsterEntity[data-variant="colosse_des_glaces"] .monsterTail {
  width: 14px;
  height: 14px;
  left: 25px;
  top: 52px;
  border-radius: 50%;
  background: #0284c7;
  filter: blur(5px);
}

/* --- 120: RUCHE DE MIEL & GLOURS CÉLESTE --- */
/* Boss: Glours Céleste */
.monsterEntity[data-variant="glours_celeste"] .monsterBody {
  width: 44px;
  height: 44px;
  left: 10px;
  top: 14px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 35%, #fffbeb 25%, #f59e0b 65%, #b45309 95%);
  border: 2.5px solid #fbbf24;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.95), inset 0 0 10px #fff;
}

.monsterEntity[data-variant="glours_celeste"] .monsterHead {
  width: 30px;
  height: 28px;
  left: 17px;
  top: -4px;
  border-radius: 50%;
  background: #fbbf24;
  border: 2px solid #b45309;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

.monsterEntity[data-variant="glours_celeste"] .monsterFace {
  width: 5px;
  height: 5px;
  left: 23px;
  top: 6px;
  background: #0284c7;
  border-radius: 50%;
  box-shadow: 14px 0 #0284c7, 0 0 8px #67e8f9;
  border: none;
}

.monsterEntity[data-variant="glours_celeste"] .monsterAdornment {
  width: 42px;
  height: 42px;
  left: 11px;
  top: -16px;
  border-radius: 50%;
  border: 3px solid #fde047;
  box-shadow: 0 0 22px rgba(253, 224, 71, 0.95), inset 0 0 10px #f59e0b;
  background: transparent;
  pointer-events: none;
}

.monsterEntity[data-variant="glours_celeste"] .monsterLimbs {
  width: 12px;
  height: 18px;
  left: 14px;
  top: 50px;
  border-radius: 4px;
  background: #f59e0b;
  box-shadow: 26px 0 #f59e0b;
  border: 2px solid #b45309;
}

.monsterEntity[data-variant="glours_celeste"] .monsterTail {
  width: 12px;
  height: 12px;
  left: 26px;
  top: 48px;
  border-radius: 50%;
  background: #b45309;
}

/* Donjon: Garde Glours */
.monsterEntity[data-variant="garde_glours"] .monsterBody {
  width: 38px;
  height: 38px;
  left: 13px;
  top: 16px;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(135deg, #d97706, #78350f);
  border: 2px solid #fbbf24;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.6);
}

.monsterEntity[data-variant="garde_glours"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 0px;
  border-radius: 50%;
  background: #d97706;
  border: 2px solid #78350f;
}

.monsterEntity[data-variant="garde_glours"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 8px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 10px 0 #f59e0b, 0 0 6px #fbbf24;
}

.monsterEntity[data-variant="garde_glours"] .monsterAdornment {
  width: 16px;
  height: 24px;
  left: 4px;
  top: 14px;
  clip-path: polygon(0% 0%, 100% 15%, 100% 85%, 0% 100%);
  background: #f59e0b;
  border: 1.5px solid #78350f;
  box-shadow: 0 0 8px #fde047;
}

.monsterEntity[data-variant="garde_glours"] .monsterLimbs {
  width: 10px;
  height: 16px;
  left: 16px;
  top: 48px;
  border-radius: 4px;
  background: #d97706;
  box-shadow: 22px 0 #d97706;
  border: 1.5px solid #78350f;
}

/* Donjon: Mélours Apicole */
.monsterEntity[data-variant="melours_apicole"] .monsterBody {
  width: 36px;
  height: 36px;
  left: 14px;
  top: 18px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 40%, #fef08a, #d97706 70%);
  border: 2px solid #78350f;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.monsterEntity[data-variant="melours_apicole"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 2px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1.5px solid #78350f;
}

.monsterEntity[data-variant="melours_apicole"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 10px;
  background: #18181b;
  border-radius: 50%;
  box-shadow: 10px 0 #18181b;
}

.monsterEntity[data-variant="melours_apicole"] .monsterAdornment {
  width: 14px;
  height: 12px;
  left: 25px;
  top: 30px;
  border-radius: 4px;
  background: #d97706;
  border: 1.5px solid #78350f;
  box-shadow: inset 0 3px 0 #fef08a;
}

.monsterEntity[data-variant="melours_apicole"] .monsterLimbs {
  width: 9px;
  height: 14px;
  left: 17px;
  top: 48px;
  border-radius: 4px;
  background: #d97706;
  border: 1.5px solid #78350f;
  box-shadow: 20px 0 #d97706;
}

.monsterEntity[data-variant="melours_apicole"] .monsterTail {
  width: 10px;
  height: 10px;
  left: 27px;
  top: 46px;
  border-radius: 50%;
  background: #b45309;
}

/* Zone: Glours Glouton */
.monsterEntity[data-variant="glours_glouton"] .monsterBody {
  width: 40px;
  height: 40px;
  left: 12px;
  top: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fde047 30%, #f59e0b 70%, #b45309 95%);
  border: 2px solid #78350f;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
}

.monsterEntity[data-variant="glours_glouton"] .monsterHead {
  width: 26px;
  height: 24px;
  left: 19px;
  top: 0px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1.5px solid #78350f;
}

.monsterEntity[data-variant="glours_glouton"] .monsterFace {
  width: 8px;
  height: 5px;
  left: 28px;
  top: 12px;
  background: #78350f;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 0 #fef08a;
}

.monsterEntity[data-variant="glours_glouton"] .monsterAdornment {
  width: 16px;
  height: 12px;
  left: 24px;
  top: 18px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #fde047;
  border: 1px solid #b45309;
}

.monsterEntity[data-variant="glours_glouton"] .monsterLimbs {
  width: 10px;
  height: 14px;
  left: 15px;
  top: 48px;
  border-radius: 50%;
  background: #b45309;
  box-shadow: 24px 0 #b45309;
}

/* Zone: Mélours Sauvage */
.monsterEntity[data-variant="melours_sauvage"] .monsterBody,
.monsterEntity[data-variant="glours"] .monsterBody {
  width: 36px;
  height: 36px;
  left: 14px;
  top: 18px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 40%, #f59e0b, #92400e 85%);
  border: 2px solid #451a03;
  box-shadow: 0 0 10px rgba(180, 83, 9, 0.5);
}

.monsterEntity[data-variant="melours_sauvage"] .monsterHead,
.monsterEntity[data-variant="glours"] .monsterHead {
  width: 24px;
  height: 22px;
  left: 20px;
  top: 2px;
  border-radius: 50%;
  background: #d97706;
  border: 1.5px solid #451a03;
}

.monsterEntity[data-variant="melours_sauvage"] .monsterFace,
.monsterEntity[data-variant="glours"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 10px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 10px 0 #f59e0b;
}

.monsterEntity[data-variant="melours_sauvage"] .monsterLimbs,
.monsterEntity[data-variant="glours"] .monsterLimbs {
  width: 9px;
  height: 14px;
  left: 17px;
  top: 48px;
  border-radius: 4px;
  background: #92400e;
  border: 1.5px solid #451a03;
  box-shadow: 20px 0 #92400e;
}

/* Donjon: Abeille de Givre */
.monsterEntity[data-variant="abeille_givre"] .monsterBody {
  width: 30px;
  height: 34px;
  left: 17px;
  top: 18px;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, #f59e0b 0px, #f59e0b 5px, #0f172a 5px, #0f172a 10px);
  border: 1.5px solid #0f172a;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.monsterEntity[data-variant="abeille_givre"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 4px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1px solid #0f172a;
}

.monsterEntity[data-variant="abeille_givre"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 26px;
  top: 10px;
  background: #0284c7;
  border-radius: 50%;
  box-shadow: 8px 0 #0284c7, 0 0 6px #38bdf8;
}

.monsterEntity[data-variant="abeille_givre"] .monsterAdornment {
  width: 32px;
  height: 16px;
  left: 16px;
  top: 12px;
  border-radius: 50%;
  background: rgba(186, 230, 253, 0.85);
  box-shadow: 0 0 10px #38bdf8;
  border: 1.5px solid #38bdf8;
}

.monsterEntity[data-variant="abeille_givre"] .monsterTail {
  width: 6px;
  height: 10px;
  left: 29px;
  top: 50px;
  background: #38bdf8;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  box-shadow: 0 0 8px #38bdf8;
}

/* Zone: Abeille Butineuse */
.monsterEntity[data-variant="abeille_butineuse"] .monsterBody,
.monsterEntity[data-variant="bee"] .monsterBody {
  width: 32px;
  height: 32px;
  left: 16px;
  top: 20px;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, #facc15 0px, #facc15 6px, #271a13 6px, #271a13 12px);
  border: 1.5px solid #271a13;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
}

.monsterEntity[data-variant="abeille_butineuse"] .monsterHead,
.monsterEntity[data-variant="bee"] .monsterHead {
  width: 18px;
  height: 18px;
  left: 23px;
  top: 6px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1px solid #271a13;
}

.monsterEntity[data-variant="abeille_butineuse"] .monsterFace,
.monsterEntity[data-variant="bee"] .monsterFace {
  width: 3px;
  height: 3px;
  left: 27px;
  top: 12px;
  background: #18181b;
  border-radius: 50%;
  box-shadow: 8px 0 #18181b;
}

.monsterEntity[data-variant="abeille_butineuse"] .monsterAdornment,
.monsterEntity[data-variant="bee"] .monsterAdornment {
  width: 28px;
  height: 14px;
  left: 18px;
  top: 14px;
  border-radius: 50%;
  background: rgba(254, 240, 138, 0.85);
  box-shadow: 0 0 8px #facc15;
  border: 1px solid #f59e0b;
}

.monsterEntity[data-variant="abeille_butineuse"] .monsterLimbs,
.monsterEntity[data-variant="bee"] .monsterLimbs {
  width: 6px;
  height: 6px;
  left: 16px;
  top: 44px;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 26px 0 #fde047;
  border: 1px solid #d97706;
}

.monsterEntity[data-variant="abeille_butineuse"] .monsterTail,
.monsterEntity[data-variant="bee"] .monsterTail {
  width: 4px;
  height: 6px;
  left: 30px;
  top: 50px;
  background: #271a13;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

/* --- 121: CHÂTEAU D'ARTICOST & COMTE D'ARTICOST --- */
.monsterEntity[data-variant="mecanurgiste_givre"] .monsterBody,
.monsterEntity[data-variant="mecanurgiste_egare"] .monsterBody,
.monsterEntity[data-variant="pendule_temporelle"] .monsterBody,
.monsterEntity[data-variant="horloge_errante"] .monsterBody,
.monsterEntity[data-variant="automate_glaces"] .monsterBody,
.monsterEntity[data-variant="automate_rouille"] .monsterBody,
.monsterEntity[data-variant="comte_darticost"] .monsterBody,
.monsterEntity[data-variant="comte_heure"] .monsterBody {
  width: 32px;
  height: 34px;
  left: 16px;
  top: 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, #b45309, #475569);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.monsterEntity[data-variant="automate_rouille"] .monsterBody {
  background: linear-gradient(180deg, #78350f, #334155);
  border: 2px solid #b45309;
  box-shadow: 0 0 10px rgba(180, 83, 9, 0.6);
}

.monsterEntity[data-variant="horloge_errante"] .monsterBody {
  background: linear-gradient(180deg, #1c1917, #292524);
  border: 2px solid #eab308;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
}

.monsterEntity[data-variant="mecanurgiste_egare"] .monsterBody {
  background: linear-gradient(180deg, #451a03, #292524);
  border: 2px solid #d97706;
}

.monsterEntity[data-variant="comte_darticost"] .monsterBody,
.monsterEntity[data-variant="comte_heure"] .monsterBody {
  width: 36px;
  height: 38px;
  left: 14px;
  top: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1e1b4b, #0f172a);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.75), inset 0 0 8px #f59e0b;
}

.monsterEntity[data-variant="mecanurgiste_givre"] .monsterHead,
.monsterEntity[data-variant="mecanurgiste_egare"] .monsterHead,
.monsterEntity[data-variant="pendule_temporelle"] .monsterHead,
.monsterEntity[data-variant="horloge_errante"] .monsterHead,
.monsterEntity[data-variant="automate_glaces"] .monsterHead,
.monsterEntity[data-variant="automate_rouille"] .monsterHead,
.monsterEntity[data-variant="comte_darticost"] .monsterHead,
.monsterEntity[data-variant="comte_heure"] .monsterHead {
  width: 22px;
  height: 22px;
  left: 21px;
  top: 2px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #d97706;
}

.monsterEntity[data-variant="automate_rouille"] .monsterHead {
  background: #92400e;
  border: 2px solid #78350f;
}

.monsterEntity[data-variant="horloge_errante"] .monsterHead {
  background: #0c0a09;
  border: 2px solid #ca8a04;
}

.monsterEntity[data-variant="mecanurgiste_egare"] .monsterHead {
  background: #fed7aa;
  border: 2px solid #b45309;
}

.monsterEntity[data-variant="comte_darticost"] .monsterHead,
.monsterEntity[data-variant="comte_heure"] .monsterHead {
  width: 24px;
  height: 24px;
  left: 20px;
  top: 0px;
  background: #f1f5f9;
  border: 2px solid #38bdf8;
}

.monsterEntity[data-variant="mecanurgiste_givre"] .monsterFace,
.monsterEntity[data-variant="mecanurgiste_egare"] .monsterFace,
.monsterEntity[data-variant="pendule_temporelle"] .monsterFace,
.monsterEntity[data-variant="horloge_errante"] .monsterFace,
.monsterEntity[data-variant="automate_glaces"] .monsterFace,
.monsterEntity[data-variant="automate_rouille"] .monsterFace,
.monsterEntity[data-variant="comte_darticost"] .monsterFace,
.monsterEntity[data-variant="comte_heure"] .monsterFace {
  width: 4px;
  height: 4px;
  left: 25px;
  top: 10px;
  background: #0284c7;
  border-radius: 50%;
  box-shadow: 10px 0 #0284c7;
  border: none;
}

.monsterEntity[data-variant="automate_rouille"] .monsterFace {
  background: #f97316;
  box-shadow: 10px 0 #f97316, 0 0 6px #ea580c;
}

.monsterEntity[data-variant="horloge_errante"] .monsterFace {
  background: #fde047;
  box-shadow: 10px 0 #fde047;
}

.monsterEntity[data-variant="mecanurgiste_egare"] .monsterFace {
  background: #0284c7;
  box-shadow: 10px 0 #f59e0b;
}

.monsterEntity[data-variant="comte_darticost"] .monsterFace,
.monsterEntity[data-variant="comte_heure"] .monsterFace {
  width: 6px;
  height: 6px;
  left: 24px;
  top: 8px;
  background: #38bdf8;
  border-radius: 50%;
  border: 1px solid #f59e0b;
  box-shadow: 11px 0 #1e293b, 0 0 6px #38bdf8;
}

.monsterEntity[data-variant="mecanurgiste_givre"] .monsterAdornment,
.monsterEntity[data-variant="mecanurgiste_egare"] .monsterAdornment {
  width: 8px;
  height: 12px;
  left: 36px;
  top: 10px;
  background: #64748b;
  border: 1px solid #334155;
}

.monsterEntity[data-variant="pendule_temporelle"] .monsterAdornment,
.monsterEntity[data-variant="horloge_errante"] .monsterAdornment {
  width: 8px;
  height: 16px;
  left: 28px;
  top: 36px;
  background: #f59e0b;
  border-radius: 4px;
}

.monsterEntity[data-variant="automate_glaces"] .monsterAdornment {
  width: 14px;
  height: 14px;
  left: 25px;
  top: -4px;
  border-radius: 50%;
  border: 2px dashed #f59e0b;
}

.monsterEntity[data-variant="automate_rouille"] .monsterAdornment {
  width: 14px;
  height: 14px;
  left: 25px;
  top: -4px;
  border-radius: 50%;
  border: 2px dashed #f97316;
}

.monsterEntity[data-variant="comte_darticost"] .monsterAdornment,
.monsterEntity[data-variant="comte_heure"] .monsterAdornment {
  width: 26px;
  height: 16px;
  left: 19px;
  top: -12px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7), inset 0 -3px 0 #f59e0b;
}

.monsterEntity[data-variant="mecanurgiste_givre"] .monsterLimbs,
.monsterEntity[data-variant="mecanurgiste_egare"] .monsterLimbs,
.monsterEntity[data-variant="pendule_temporelle"] .monsterLimbs,
.monsterEntity[data-variant="horloge_errante"] .monsterLimbs,
.monsterEntity[data-variant="automate_glaces"] .monsterLimbs,
.monsterEntity[data-variant="automate_rouille"] .monsterLimbs,
.monsterEntity[data-variant="comte_darticost"] .monsterLimbs,
.monsterEntity[data-variant="comte_heure"] .monsterLimbs {
  width: 8px;
  height: 16px;
  left: 18px;
  top: 48px;
  border-radius: 2px;
  background: #64748b;
  border: 1.5px solid #d97706;
  box-shadow: 19px 0 #64748b;
}

.monsterEntity[data-variant="comte_darticost"] .monsterLimbs,
.monsterEntity[data-variant="comte_heure"] .monsterLimbs {
  width: 8px;
  height: 18px;
  left: 17px;
  top: 50px;
  background: #1e293b;
  border: 1.5px solid #38bdf8;
  box-shadow: 21px 0 #1e293b;
}

.monsterEntity[data-variant="comte_darticost"] .monsterTail,
.monsterEntity[data-variant="comte_heure"] .monsterTail {
  width: 44px;
  height: 44px;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
  background: transparent;
  pointer-events: none;
}

/* =============================================================================
   MONSTER FACING & PROFILE VIEWS OVERRIDES
   ============================================================================= */
.monsterSprite.facing-left {
  scale: -1 1 !important;
}

.monsterSprite.facing-side .monsterBody {
  transform: scaleX(0.7) !important;
}

.monsterSprite.facing-side .monsterHead {
  transform: scaleX(0.8) translateX(2px) !important;
}

.monsterSprite.facing-side .monsterFace {
  transform: translateX(4px) scaleX(0.8) !important;
}

/* =============================================================================
   COMBAT PREPARATION POPUP ON MAP
   ============================================================================= */
.monsterEntity.in-combat-prep {
  width: 320px !important;
  min-height: 120px;
  background: rgba(22, 17, 13, 0.95) !important;
  border: 2px solid var(--ui-gold, #d8b46a) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(216, 180, 106, 0.3) !important;
  padding: 8px 12px !important;
  transform: translate(-50%, -100%) !important;
  transform-origin: 50% 100% !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.monsterEntity.in-combat-prep:hover {
  filter: none !important;
}

.combat-prep-title {
  color: var(--ui-gold, #d8b46a);
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid rgba(216, 180, 106, 0.2);
  padding-bottom: 4px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
}

.combat-prep-sides {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.combat-prep-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.combat-prep-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 4px;
  border-radius: 4px;
}

.prep-sword-icon {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
}

.prep-side-label {
  font-size: 0.75rem;
  font-weight: bold;
  color: #efe6d2;
}

.combat-prep-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
  max-height: 80px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.prep-entity-name {
  font-size: 0.73rem;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.prep-entity-name svg {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

.prep-empty {
  font-size: 0.7rem;
  color: #777;
  font-style: italic;
  text-align: center;
  margin-top: 10px;
}

.combat-prep-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--ui-gold, #d8b46a);
  opacity: 0.6;
}

/* Button Customization for Prep */
.friendlyJoinBtn {
  background: linear-gradient(135deg, #2980b9, #3498db) !important;
  border: 1px solid #3498db !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  padding: 4px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.friendlyJoinBtn:hover {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  transform: scale(1.03) !important;
}

.enemyJoinBtn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #666 !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  padding: 4px 6px !important;
  border-radius: 4px !important;
  cursor: not-allowed !important;
  width: 100% !important;
}


/* --- END sprites/monsters.css --- */

/* --- BEGIN ui/inventory.css --- */
/* =========================
   INVENTORY & EQUIPMENT MODAL
   ========================= */

.inventoryCard {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.inventoryCard .overlayCardHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    padding: 14px 16px 10px;
}

.inventoryCard .overlayCardHeader > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.inventoryCard .overlayCardHeader h2 {
    font-size: clamp(0.98rem, 1.35vw, 1.32rem);
    line-height: 1.08;
}

.inventoryCard .overlayCardHeader p {
    font-size: clamp(0.7rem, 0.88vw, 0.84rem);
    line-height: 1.28;
    max-width: 40ch;
}

#closeInventoryPanelBtn {
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    align-self: start;
    justify-self: end;
}

.inventoryGrid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    height: 100%;
    margin-top: 6px;
    min-height: 0;
}

/* Equipment Panel */
.equipmentPanel {
    border: 1px solid rgba(216, 180, 106, 0.22);
    border-radius: 12px;
    background: rgba(15, 11, 8, 0.7);
    padding: 12px;
    min-height: 0;
}

.equipmentPanel h3 {
    margin: 0 0 10px 0;
    color: var(--ui-gold);
    font-size: clamp(0.84rem, 1vw, 0.98rem);
    text-align: center;
}

.equipmentSlots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.equipSlot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.equipSlot:hover {
    border-color: rgba(216, 180, 106, 0.3);
    background: rgba(216, 180, 106, 0.04);
}

.equipSlot.selected {
    border-color: #ffd700;
    background: rgba(216, 180, 106, 0.15);
    box-shadow: 0 0 8px rgba(216, 180, 106, 0.25);
}

@media (min-width: 769px) {
    .equipSlot.equipped {
        display: grid;
        grid-template-columns: 24px 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 10px;
        align-items: center;
    }

    .equipSlot.equipped .slotIcon {
        grid-column: 1;
        grid-row: 1;
    }

    .equipSlot.equipped .slotName {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.72rem;
        color: #a7977c;
        width: auto;
    }

    .equipSlot.equipped .equippedItemName {
        grid-column: 1 / 3;
        grid-row: 2;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .equipSlot.equipped .unequipBtn {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

.slotIcon {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.slotName {
    font-size: 0.76rem;
    font-weight: bold;
    color: #a7977c;
    width: 72px;
}

.equippedItemName {
    font-size: 0.78rem;
    color: #ffffff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.equippedItemLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equippedItemIcon {
    font-size: 1.1rem;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.unequipBtn {
    padding: 3px 8px;
    font-size: 0.75rem;
    min-height: auto;
    background: #5f1f1f;
    border-color: #7f2f2f;
    color: #ffcccc;
}

.unequipBtn:hover {
    background: #7f2f2f;
}

/* Bag / Inventory List */
.bagPanel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.bagTabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid rgba(216, 180, 106, 0.22);
    padding-bottom: 6px;
}

.bagTabBtn {
    background: transparent;
    border: none;
    color: #a7977c;
    font-size: 0.82rem;
    font-weight: bold;
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
    min-height: auto;
}

.bagTabBtn:hover {
    color: #fff1cd;
}

.bagTabBtn.active {
    color: var(--ui-gold);
    background: rgba(216, 180, 106, 0.15);
    border: 1px solid rgba(216, 180, 106, 0.22);
    border-bottom: none;
}

.bagContent {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    overflow-y: auto;
    max-height: 250px;
    min-height: 0;
    padding-right: 4px;
}

.invItem {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    min-height: 54px;
}

.invItem:hover {
    border-color: var(--ui-gold);
    background: rgba(216, 180, 106, 0.08);
}

.invItem.selected {
    border-color: #ffd700;
    background: rgba(216, 180, 106, 0.15);
    box-shadow: 0 0 8px rgba(216, 180, 106, 0.25);
}

/* Rarity border styles */
.invItem.rarity-uncommon, .equipSlot.rarity-uncommon {
    border-color: rgba(97, 120, 76, 0.45);
    background: rgba(97, 120, 76, 0.05);
}
.invItem.rarity-uncommon .invItemName, .equipSlot.rarity-uncommon .equippedItemLabel {
    color: #a3c285;
}

.invItem.rarity-rare, .equipSlot.rarity-rare {
    border-color: rgba(94, 200, 255, 0.45);
    background: rgba(94, 200, 255, 0.05);
}
.invItem.rarity-rare .invItemName, .equipSlot.rarity-rare .equippedItemLabel {
    color: #5ec8ff;
}

.invItem.rarity-epic, .equipSlot.rarity-epic {
    border-color: rgba(197, 141, 250, 0.45);
    background: rgba(197, 141, 250, 0.05);
}
.invItem.rarity-epic .invItemName, .equipSlot.rarity-epic .equippedItemLabel {
    color: #c58dfa;
}

.invItem.rarity-legendary, .equipSlot.rarity-legendary {
    border-color: rgba(216, 180, 106, 0.6);
    background: rgba(216, 180, 106, 0.08);
    box-shadow: 0 0 5px rgba(216, 180, 106, 0.15);
}
.invItem.rarity-legendary .invItemName, .equipSlot.rarity-legendary .equippedItemLabel {
    color: var(--ui-gold);
    font-weight: bold;
    text-shadow: 0 0 4px rgba(216, 180, 106, 0.2);
}

.invItem.rarity-volcanic, .equipSlot.rarity-volcanic {
    border-color: rgba(255, 69, 0, 0.75);
    background: radial-gradient(circle at center, rgba(255, 69, 0, 0.12) 0%, rgba(20, 10, 5, 0.8) 100%);
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.35);
    animation: volcanicPulse 2.5s infinite ease-in-out;
}
.invItem.rarity-volcanic .invItemName, .equipSlot.rarity-volcanic .equippedItemLabel {
    color: #ff6b6b;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.45);
}

.invItem.rarity-celestial, .equipSlot.rarity-celestial {
    border-color: rgba(0, 229, 255, 0.85);
    background: radial-gradient(circle at center, rgba(0, 229, 255, 0.15) 0%, rgba(10, 15, 20, 0.8) 100%);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
    animation: celestialPulse 3s infinite ease-in-out;
}
.invItem.rarity-celestial .invItemName, .equipSlot.rarity-celestial .equippedItemLabel {
    color: #00e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.65);
}

@keyframes volcanicPulse {
    0%, 100% { border-color: rgba(255, 69, 0, 0.7); box-shadow: 0 0 6px rgba(255, 69, 0, 0.3); }
    50% { border-color: rgba(255, 120, 0, 0.95); box-shadow: 0 0 14px rgba(255, 90, 0, 0.55); }
}

@keyframes celestialPulse {
    0%, 100% { border-color: rgba(0, 229, 255, 0.8); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
    50% { border-color: rgba(224, 247, 250, 0.95); box-shadow: 0 0 20px rgba(0, 229, 255, 0.8); }
}

.invItemQty {
    position: absolute;
    bottom: 4px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.invItemName {
    font-size: 0.76rem;
    line-height: 1.2;
    color: #ffffff;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.invItemNameWrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.invItemMain {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow: hidden;
}

.invItemIcon {
    font-size: 1.15rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.itemElementBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(216, 180, 106, 0.22);
    background: rgba(216, 180, 106, 0.08);
    color: #ffe6b0;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.equippedElementBadge {
    font-size: 0.58rem;
}

.invElementBadge {
    font-size: 0.58rem;
}

.itemDetailsPanel {
    border: 1px solid rgba(216, 180, 106, 0.22);
    border-radius: 10px;
    background: rgba(24, 18, 14, 0.95);
    padding: 12px;
    margin-top: 10px;
    color: var(--ui-text);
}

#detailLevel {
    color: #efe6d2;
    margin: 6px 0;
    font-size: 0.84rem;
}

#inventorySearchInput {
    padding: 7px 10px !important;
    font-size: clamp(0.72rem, 0.85vw, 0.8rem) !important;
}

.bagGoldDisplay span:first-child {
    font-size: 0.8rem !important;
}

#bagGoldValue {
    font-size: 0.82rem !important;
}

.itemDetailsPanel h4 {
    margin: 0 0 4px 0;
    color: #fff1cd;
}

.itemTypeLabel {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #a7977c;
    margin: 0 0 6px 0;
}

.detailStats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.equipActionRow {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.styledSelect {
    background: #1a1512;
    border: 1px solid rgba(216, 180, 106, 0.3);
    color: #e5dcc9;
    padding: 6px;
    border-radius: 6px;
    flex: 1;
}

/* =========================
   CRAFTING MODAL
   ========================= */

.craftCard {
    width: min(800px, calc(100vw - 24px)) !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.craftCard .overlayCardHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    padding: 14px 16px 10px;
}

.craftCard .overlayCardHeader > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.craftCard .overlayCardHeader h2 {
    font-size: clamp(1rem, 1.4vw, 1.45rem);
    line-height: 1.08;
}

.craftCard .overlayCardHeader p {
    font-size: clamp(0.72rem, 0.9vw, 0.88rem);
    line-height: 1.3;
    max-width: 42ch;
}

#closeCraftPanelBtn {
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    align-self: start;
    justify-self: end;
}

.craftGrid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
    margin-top: 6px;
    height: 480px;
}

.recipesPanel {
    border: 1px solid rgba(216, 180, 106, 0.22);
    border-radius: 12px;
    background: rgba(15, 11, 8, 0.7);
    color: var(--ui-text);
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.recipesPanel h3 {
    margin: 0 0 8px 0;
    color: var(--ui-gold);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
}

#recipesSearchInput {
    padding: 7px 10px !important;
    font-size: clamp(0.72rem, 0.85vw, 0.82rem) !important;
}

.recipesList {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 180, 106, 0.3) rgba(0, 0, 0, 0.2);
}

.recipesList::-webkit-scrollbar,
.recipeDetailsPanel::-webkit-scrollbar {
    width: 6px;
}

.recipesList::-webkit-scrollbar-track,
.recipeDetailsPanel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.recipesList::-webkit-scrollbar-thumb,
.recipeDetailsPanel::-webkit-scrollbar-thumb {
    background: rgba(216, 180, 106, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.recipesList::-webkit-scrollbar-thumb:hover,
.recipeDetailsPanel::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 180, 106, 0.5);
}

.recipeItem {
    width: 100%;
    color: #f4ead6 !important;
    transition: all 0.2s;
}

.recipeItem:hover {
    border-color: rgba(216, 180, 106, 0.3);
    background: rgba(216, 180, 106, 0.05);
}

.recipeItem.selected {
    border-color: var(--ui-gold);
    background: rgba(216, 180, 106, 0.12);
}

.recipeItemLvl {
    font-size: 0.75rem;
    color: #a7977c;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

.recipeDetailsPanel {
    border: 1px solid rgba(216, 180, 106, 0.22);
    border-radius: 12px;
    background: rgba(24, 18, 14, 0.95);
    color: #f4ead6;
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-size: 0.9rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 180, 106, 0.3) rgba(0, 0, 0, 0.2);
}

.recipeDetailsPanel h3 {
    margin: 0;
    font-size: clamp(0.96rem, 1.1vw, 1.2rem);
    line-height: 1.12;
}

.recipeDetailsPanel h3,
.recipeDetailsPanel h4,
.recipeDetailsPanel span,
.recipeDetailsPanel div,
.recipeDetailsPanel p {
    color: inherit;
}

.recipeIngredients {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    flex: none;
    height: auto;
    overflow-y: visible;
    padding-right: 4px;
}

.recipeStats {
    margin-bottom: 8px;
}

.ingredientRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #f4ead6;
    gap: 10px;
    font-size: clamp(0.76rem, 0.9vw, 0.84rem);
}

.ingredientRow.missing {
    border-color: rgba(255, 100, 100, 0.3);
    background: rgba(255, 100, 100, 0.04);
}

.ingredientRow.complete {
    border-color: rgba(100, 255, 100, 0.3);
    background: rgba(100, 255, 100, 0.04);
}

.ingredientQty {
    font-size: 0.82rem;
    font-weight: bold;
}

.ingredientName {
    color: #f4ead6 !important;
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.ingredientQty.complete {
    color: #55ff55;
}

.ingredientQty.missing {
    color: #ff5555;
}

.recipeItem.craftable {
    border-color: rgba(100, 255, 100, 0.25);
    background: linear-gradient(90deg, rgba(100, 255, 100, 0.04), rgba(255, 255, 255, 0.01));
}

.recipeItem.craftable:hover {
    border-color: rgba(100, 255, 100, 0.5);
    background: linear-gradient(90deg, rgba(100, 255, 100, 0.08), rgba(216, 180, 106, 0.05));
}

.craftableBadge {
    font-size: 0.65rem;
    font-weight: bold;
    color: #55ff55;
    background: rgba(100, 255, 100, 0.15);
    border: 1px solid rgba(100, 255, 100, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipeSetGroup {
    margin-bottom: 14px;
    background: rgba(20, 15, 10, 0.35);
    border: 1px solid rgba(216, 180, 106, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recipeSetHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(216, 180, 106, 0.12), rgba(0, 0, 0, 0));
    border-bottom: 1px solid rgba(216, 180, 106, 0.15);
    flex-shrink: 0;
}

.recipeSetTitle {
    flex: 1;
    min-width: 0;
    font-size: clamp(0.74rem, 0.9vw, 0.82rem);
    font-weight: 700;
    color: var(--ui-gold) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Outfit', sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
}

.recipeSetLvl {
    font-size: clamp(0.62rem, 0.7vw, 0.68rem);
    font-weight: 600;
    color: #ffd700;
    background: rgba(216, 180, 106, 0.2);
    border: 1px solid rgba(216, 180, 106, 0.4);
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

.recipeSetItems {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 6px;
    padding: 8px;
    overflow: visible;
}

/* Adjust recipeItem border when grouped */
.recipeSetItems .recipeItem {
    border-color: rgba(255, 255, 255, 0.02);
}

.recipeCompactButton {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    min-height: 46px;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--ui-text) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: clamp(0.72rem, 0.84vw, 0.79rem) !important;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    overflow: visible;
    touch-action: pan-y;
}

.recipeCompactButton:hover {
    transform: translateY(-1px) !important;
}

.recipeCompactButtonEmoji {
    font-size: clamp(0.92rem, 1vw, 1.05rem);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.recipeCompactButtonName {
    color: #f4ead6 !important;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

.recipeCompactButtonText {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.recipeElementBadge {
    font-size: 0.56rem;
}

.recipeCompactButtonBadge {
    margin-left: auto;
    flex-shrink: 0;
}

.craftableBadge {
    font-size: 0.58rem;
    padding: 1px 5px;
}

@media (max-width: 768px) {
    .inventoryCard {
        max-height: 90vh;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .inventoryCard .overlayCardHeader {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding: 12px 12px 8px;
    }
    .inventoryGrid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 10px;
        height: auto;
        align-content: start;
    }
    .equipmentPanel {
        order: 2;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-self: start;
        height: auto;
        min-height: max-content;
    }
    .bagPanel {
        order: 1;
        gap: 8px;
        height: auto;
        min-height: auto;
    }
    .equipmentSlots {
        flex: 0 0 auto;
        max-height: min(32vh, 280px);
        overflow-y: auto;
        padding-right: 4px;
    }
    .activeSetBonuses {
        flex: 0 0 auto;
    }
    .equipSlot {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 7px 8px;
    }
    .slotIcon {
        width: 20px;
        font-size: 1rem;
    }
    .slotName {
        width: auto;
        min-width: 58px;
        font-size: 0.72rem;
    }
    .equippedItemName {
        min-width: 0;
        font-size: 0.72rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        flex-wrap: wrap;
        row-gap: 4px;
    }
    .equippedItemLabel {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .unequipBtn {
        font-size: 0.65rem;
        padding: 3px 6px;
    }
    .bagTabs {
        gap: 4px;
        padding-bottom: 4px;
    }
    .bagTabBtn {
        flex: 1;
        padding: 6px 8px;
        font-size: 0.74rem;
    }
    .bagContent {
        grid-template-columns: 1fr;
        flex: none;
        max-height: none;
        min-height: auto;
        overflow: visible;
        gap: 6px;
        align-content: start;
    }
    .invItem {
        align-items: flex-start;
        min-height: 58px;
        height: auto;
        padding: 8px 34px 8px 8px;
    }
    .invItemMain {
        gap: 6px;
        align-items: flex-start;
    }
    .invItemNameWrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .invItemName {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.72rem;
    }
    .invItemQty {
        top: 6px;
        bottom: auto;
        right: 8px;
        font-size: 0.68rem;
    }
    .itemElementBadge,
    .invElementBadge,
    .equippedElementBadge {
        font-size: 0.54rem;
        padding: 2px 5px;
    }
    .bagGoldDisplay {
        margin-top: 4px !important;
        padding: 7px 10px !important;
    }
    .itemDetailsPanel {
        padding: 10px;
    }
    .itemDetailsPanel h4 {
        font-size: 0.86rem;
    }
    .itemTypeLabel,
    #detailLevel,
    .detailStats {
        font-size: 0.72rem;
    }

    .craftCard .overlayCardHeader {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding: 12px 12px 8px;
    }
    .craftGrid {
        grid-template-columns: 1fr;
        gap: 12px;
        height: auto;
        min-height: auto;
    }
    .recipesPanel, .recipeDetailsPanel {
        max-height: none;
        height: auto;
        min-height: auto;
    }
    .recipesList {
        max-height: 280px;
        min-height: 150px;
        overflow-y: auto;
    }
    .recipeSetGroup {
        max-height: none;
    }
    .recipeIngredients {
        min-height: auto;
        max-height: none;
        overflow-y: visible;
    }
}

/* =========================
   COSMETIC PARTICLES
   ========================= */
.cosmetic-particle {
    position: absolute;
    pointer-events: none;
    z-index: 105;
    animation: cosmeticFloat 1.2s ease-out forwards;
    opacity: 0;
}

.particle-celestial {
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.8);
}

.particle-magmatic {
    width: 5px;
    height: 5px;
    background: #ffaa00;
    border-radius: 50%;
    box-shadow: 0 0 6px #ff3c00, 0 0 12px rgba(255, 60, 0, 0.8);
}

.particle-frost {
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #a5f3fc, 0 0 10px rgba(165, 243, 252, 0.8);
}

.particle-fire {
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 6px #ff8c00, 0 0 10px rgba(255, 140, 0, 0.7);
}

.particle-shadow {
    width: 5px;
    height: 5px;
    background: #e9d5ff;
    border-radius: 50%;
    box-shadow: 0 0 8px #d946ef, 0 0 14px rgba(217, 70, 239, 0.8);
}

.particle-wind {
    width: 4px;
    height: 4px;
    background: #d1fae5;
    border-radius: 50%;
    box-shadow: 0 0 6px #34d399, 0 0 10px rgba(52, 211, 153, 0.7);
}

@keyframes cosmeticFloat {
    0% {
        transform: translate(-50%, 0) scale(0.4);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -10px) scale(1.1);
    }
    100% {
        transform: translate(calc(-50% + var(--cosm-drift-x)), var(--cosm-drift-y)) scale(var(--cosm-scale-end));
        opacity: 0;
    }
}


/* --- END ui/inventory.css --- */

/* --- BEGIN core/responsive.css --- */
/* =========================
   RESPONSIVE
========================= */

.mobile-only {
  display: none !important;
}

@media (min-width: 1025px) {
  body:not(.combat-mode) #bottomUI {
    height: 220px !important;
    max-height: 228px !important;
    grid-template-columns: minmax(320px, 2.2fr) minmax(230px, 270px) minmax(360px, 460px) minmax(140px, 175px) !important;
    grid-template-rows: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    align-items: stretch !important;
  }

  body:not(.combat-mode) #chatSection {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    gap: 4px !important;
  }

  body:not(.combat-mode) #chatBox {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    font-size: 0.82rem !important;
    overflow-y: auto !important;
    line-height: 1.35 !important;
  }

  body:not(.combat-mode) #chatControls {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
    height: 32px !important;
  }

  body:not(.combat-mode) #chatControls select {
    width: 95px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
  }

  body:not(.combat-mode) #chatControls input {
    flex: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  body:not(.combat-mode) #chatControls button {
    width: 76px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11px !important;
  }

  body:not(.combat-mode) #minimapContainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  body:not(.combat-mode) #minimapCoords {
    width: 100% !important;
    min-height: 36px !important;
    padding: 3px 6px !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body:not(.combat-mode) #minimap {
    width: 150px !important;
    height: 150px !important;
    border-radius: 6px !important;
  }

  body:not(.combat-mode) .minimapStage {
    width: 156px !important;
    height: 156px !important;
    min-height: 156px !important;
    padding: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.combat-mode) #openWorldMapBtn {
    display: none !important;
  }

  body:not(.combat-mode) #hudSection {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    align-content: stretch !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.combat-mode) #hudSection button {
    min-height: 0 !important;
    height: 100% !important;
    font-size: 0.78rem !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  body:not(.touch-landscape-ui) #hudSection .hud-menu-dock-btn {
    display: none !important;
  }

  body:not(.touch-landscape-ui) #hudSection .hud-btn-icon {
    display: none !important;
  }

  body:not(.touch-landscape-ui) #hudSection .hud-btn-label {
    display: inline !important;
  }

  body:not(.combat-mode) #optionsSection {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body:not(.combat-mode) #optionsSection button {
    flex: 1 !important;
    min-height: 0 !important;
    font-size: 0.76rem !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
}

/* Compact Laptop / Low-Height Screen Overrides (e.g. 1366x768 or 1440x900) */
@media (min-width: 1025px) and (max-width: 1280px), (min-width: 1025px) and (max-height: 760px) {
  body:not(.combat-mode) #bottomUI {
    height: 195px !important;
    max-height: 200px !important;
    grid-template-columns: minmax(280px, 2fr) minmax(205px, 235px) minmax(320px, 380px) minmax(125px, 150px) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body:not(.combat-mode) .minimapStage {
    width: 136px !important;
    height: 136px !important;
    min-height: 136px !important;
  }

  body:not(.combat-mode) #minimap {
    width: 130px !important;
    height: 130px !important;
  }

  body:not(.combat-mode) #hudSection button {
    font-size: 0.74rem !important;
  }

  body:not(.combat-mode) #optionsSection button {
    font-size: 0.72rem !important;
  }
}

/* Ultra-wide & 4K Monitors */
@media (min-width: 2000px) {
  body:not(.combat-mode) #bottomUI {
    height: 260px !important;
    max-height: 270px !important;
    grid-template-columns: minmax(460px, 2.4fr) minmax(280px, 320px) minmax(480px, 580px) minmax(180px, 220px) !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  body:not(.combat-mode) .minimapStage {
    width: 196px !important;
    height: 196px !important;
    min-height: 196px !important;
  }

  body:not(.combat-mode) #minimap {
    width: 190px !important;
    height: 190px !important;
  }

  body:not(.combat-mode) #hudSection button,
  body:not(.combat-mode) #optionsSection button {
    font-size: 0.86rem !important;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  body.in-game {
    --world-camera-scale: 0.88;
  }

  #bottomUI {
    grid-template-columns: 1fr 1fr minmax(240px, 280px);
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
  }

  #chatSection {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  #minimapContainer {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    justify-content: center;
  }
  #hudSection {
    grid-column: 1 / span 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 8px;
    padding: 10px;
    min-height: auto;
  }
  #hudSection button {
    min-height: 38px !important;
    font-size: 11px !important;
    margin: 0 !important;
  }
  #optionsSection {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    min-height: auto;
  }
  #optionsSection button {
    min-height: 38px !important;
    font-size: 11px !important;
    margin: 0 !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
  body.in-game {
    --world-camera-scale: 0.78;
  }

  body:not(.combat-mode) #bottomUI {
    height: 244px;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 300px);
    grid-template-rows: 1fr 1fr;
    gap: 8px;
  }

  body:not(.combat-mode) #chatSection {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body:not(.combat-mode) #minimapContainer {
    grid-column: 2;
    grid-row: 1;
  }

  body:not(.combat-mode) #hudSection {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body:not(.combat-mode) #optionsSection {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.in-game {
    --world-camera-scale: 0.8;
  }

  body.in-game {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body.in-game #gamePanel {
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  #mapContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px !important;
    border-bottom: 2px solid #5f4827 !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode) #bottomUI,
  #bottomUI {
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    height: clamp(190px, 30dvh, 250px) !important;
    max-height: 34dvh !important;
    min-height: 190px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    background: linear-gradient(180deg, #15110d, #0f0c09) !important;
    border-top: 2px solid #5f4827 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .map-spectator-pill {
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    left: 8px !important;
    top: auto !important;
    right: auto !important;
    z-index: 1050 !important;
  }

  body:not(.combat-mode) .mobile-only,
  .mobile-only {
    display: flex !important;
  }

  body:not(.combat-mode) #mobileTabBar,
  #mobileTabBar {
    width: 100% !important;
    height: 42px !important;
    background: rgba(30, 24, 20, 0.95) !important;
    border-bottom: 1px solid rgba(216, 180, 106, 0.25) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
  }

  .mobileTabBtn {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #a7977c !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-bottom-color 0.2s !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 6px 2px 4px !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .mobileTabBtn svg {
    display: block !important;
    flex-shrink: 0 !important;
  }

  .mobileTabBtn span {
    display: block !important;
    line-height: 1 !important;
  }

  .mobileTabBtn:active {
    transform: scale(0.98);
  }

  .mobileTabBtn.active {
    color: #ffd700 !important;
    background: rgba(216, 180, 106, 0.08) !important;
    border-bottom: 3px solid #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
  }

  .mobileTabBtn.active svg {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5)) !important;
  }

  body:not(.combat-mode) #chatSection,
  body:not(.combat-mode) #minimapContainer,
  body:not(.combat-mode) #hudSection,
  body:not(.combat-mode) #optionsSection,
  #chatSection,
  #minimapContainer,
  #hudSection,
  #optionsSection {
    display: none !important;
    width: 100% !important;
    height: calc(100% - 42px) !important;
    padding: 8px !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body:not(.combat-mode) #chatSection.mobile-visible,
  #chatSection.mobile-visible {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode) #minimapContainer.mobile-visible,
  body:not(.combat-mode) #hudSection.mobile-visible,
  body:not(.combat-mode) #optionsSection.mobile-visible,
  #minimapContainer.mobile-visible,
  #hudSection.mobile-visible,
  #optionsSection.mobile-visible {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }



.kick-player-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #ffffff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: transform 0.15s ease, background 0.15s ease;
}
.kick-player-btn:hover {
    background: #dc2626;
    transform: scale(1.15);
}

.grid-kick-btn {
    top: -14px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    z-index: 35 !important;
}
.grid-kick-btn:hover {
    transform: translateX(50%) scale(1.25) !important;
}

.combatHUD-lock-btn {
    padding: 6px 12px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(216, 180, 106, 0.4);
    border-radius: 8px;
    color: #ffd700;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.combatHUD-lock-btn:hover {
    background: rgba(51, 65, 85, 0.95);
    border-color: #ffd700;
    transform: translateY(-1px);
}


}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  body:not(.combat-mode) #bottomUI {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: clamp(190px, 32dvh, 250px) !important;
    max-height: 36dvh !important;
    min-height: 190px !important;
  }

  body:not(.combat-mode) #mobileTabBar,
  body:not(.combat-mode) .mobile-only {
    display: flex !important;
  }

  body:not(.combat-mode) #chatSection,
  body:not(.combat-mode) #minimapContainer,
  body:not(.combat-mode) #hudSection,
  body:not(.combat-mode) #optionsSection {
    display: none !important;
    width: 100% !important;
    height: calc(100% - 42px) !important;
  }

  body:not(.combat-mode) #chatSection.mobile-visible,
  body:not(.combat-mode) #minimapContainer.mobile-visible,
  body:not(.combat-mode) #hudSection.mobile-visible,
  body:not(.combat-mode) #optionsSection.mobile-visible {
    display: flex !important;
  }

  body:not(.combat-mode) #chatSection.mobile-visible {
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode) #minimapContainer.mobile-visible,
  body:not(.combat-mode) #hudSection.mobile-visible,
  body:not(.combat-mode) #optionsSection.mobile-visible {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
}


@media (max-width: 767px), (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --font-base: 12.5px;
    --ui-gap: 6px;
    --panel-padding: 8px;
  }
  body.in-game {
    --world-camera-scale: 0.68;
  }
  body.in-game {
    height: 100dvh !important;
    overflow: hidden !important;
  }
  body.in-game #gamePanel {
    height: 100dvh !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }
  #mapContainer {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 2px;
    border-bottom: 2px solid #5f4827;
    position: relative;
    overflow: hidden;
  }
  body:not(.combat-mode) #bottomUI,
  #bottomUI {
    flex: none;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    height: clamp(138px, 42dvh, 190px) !important;
    max-height: 46dvh !important;
    min-height: 138px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    background: linear-gradient(180deg,#15110d,#0f0c09);
    border-top: 2px solid #5f4827;
    overflow: visible !important;
    align-items: stretch;
  }
  body:not(.combat-mode) .mobile-only,
  .mobile-only {
    display: flex !important;
  }
  body:not(.combat-mode) #mobileTabBar,
  #mobileTabBar {
    width: 100%;
    height: 40px;
    background: rgba(30, 24, 20, 0.95);
    border-bottom: 1px solid rgba(216, 180, 106, 0.25);
    display: flex !important;
    justify-content: space-around;
    align-items: stretch;
    flex-shrink: 0;
  }
  .mobileTabBtn {
    flex: 1;
    background: transparent;
    border: none;
    color: #a7977c;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-bottom-color 0.2s;
    border-bottom: 3px solid transparent;
    padding: 6px 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .mobileTabBtn svg { display: block; flex-shrink: 0; }
  .mobileTabBtn span { display: block; line-height: 1; }
  .mobileTabBtn:active {
    transform: scale(0.95);
  }
  .mobileTabBtn.active {
    color: #ffd700;
    background: rgba(216, 180, 106, 0.08);
    border-bottom: 3px solid #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  }
  body:not(.combat-mode) #chatSection,
  body:not(.combat-mode) #minimapContainer,
  body:not(.combat-mode) #hudSection,
  body:not(.combat-mode) #optionsSection,
  #chatSection, #minimapContainer, #hudSection, #optionsSection {
    display: none !important;
    width: 100%;
    height: calc(100% - 40px) !important;
    padding: 6px;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }
  body:not(.combat-mode) #chatSection.mobile-visible,
  #chatSection.mobile-visible {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
  }
  body:not(.combat-mode) #minimapContainer.mobile-visible,
  body:not(.combat-mode) #hudSection.mobile-visible,
  body:not(.combat-mode) #optionsSection.mobile-visible,
  #minimapContainer.mobile-visible,
  #hudSection.mobile-visible,
  #optionsSection.mobile-visible {
    display: flex !important;
    flex-direction: column;
    overflow-y: auto !important;
  }
  #chatSection {
    justify-content: space-between;
    padding: 6px;
  }
  #chatSection h3 {
    display: none !important;
  }
  #chatBox {
    flex: 1;
    max-height: none;
    margin-bottom: 3px;
    height: auto;
    padding: 5px;
    font-size: 11px;
    line-height: 1.12;
  }
  #chatControls {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    align-items: stretch;
    margin-top: 0;
  }
  #chatChannel {
    flex: 0 0 108px;
    width: 108px;
    min-width: 108px;
    max-width: 36vw;
    height: 30px;
    min-height: 30px;
    font-size: 11px;
    line-height: 1.2;
    padding: 6px 28px 6px 10px;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, #d8b46a 50%),
      linear-gradient(135deg, #d8b46a 50%, transparent 50%),
      linear-gradient(180deg, #1d1813, #2a221a);
    background-position:
      calc(100% - 16px) calc(50% - 2px),
      calc(100% - 10px) calc(50% - 2px),
      0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #chatChannel option {
    font-size: 11px;
  }
  #chatPrivateTo {
    flex: 1 1 120px;
    height: 28px;
    font-size: 11px;
    padding: 5px 8px;
  }
  #chatInput {
    flex: 1 1 180px;
    height: 28px;
    font-size: 12px !important;
    padding: 5px 8px;
  }
  #chatSendBtn {
    display: none !important;
  }
  .chat-msg {
    margin-bottom: 4px;
    line-height: 1.12;
    font-size: 12px;
  }
  .chat-msg .tag {
    margin-right: 4px;
    font-size: 0.82em;
  }
  .chat-clickable {
    padding: 2px 4px;
  }
  #chatError {
    margin-top: 3px !important;
    font-size: 11px;
    line-height: 1.1;
  }
  body:not(.combat-mode) #minimapContainer.mobile-visible,
  #minimapContainer.mobile-visible {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px !important;
    overflow: hidden !important;
  }
  #minimap {
    width: clamp(84px, 13dvh, 118px) !important;
    height: clamp(84px, 13dvh, 118px) !important;
    border-width: 2.5px !important;
    margin: 0 !important;
  }
  #minimapCoords {
    font-size: 10px !important;
    font-weight: bold;
    color: var(--ui-gold) !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px #000;
  }
  #openWorldMapBtn {
    min-height: 24px !important;
    font-size: 10px !important;
    padding: 2px 10px !important;
    width: auto !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
  }
  body:not(.combat-mode) #hudSection.mobile-visible,
  #hudSection.mobile-visible {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    padding: 8px;
    align-content: center;
  }
  #hudSection button {
    width: 100%;
    min-height: 32px !important;
    font-size: 11px !important;
    margin: 0;
  }
  #hudShortcutHint,
  #optionsShortcutHint {
    display: none !important;
  }
  #optionsSection {
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 10px !important;
  }
  #optionsSection button {
    width: 90%;
    min-height: 30px !important;
    font-size: 11px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
  }
  button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.stat-plus-btn):not(.step-btn):not(.statsCloseBtn):not(.statsNavTab):not(.spellsCloseBtn):not(.elem-filter-chip):not(.clear-search-btn):not(.clear-search):not([class*="clear-search"]):not(.reset-filters-btn):not(.alloc-btn):not(.boost-action-btn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.closeCardBtn):not([class*="CloseBtn"]):not([class*="closeBtn"]):not([class*="NavTab"]):not([class*="navTab"]):not([class*="TabBtn"]):not([class*="tab-btn"]):not([class*="tabBtn"]):not(.teleport-dest-btn):not(.teleporterButton):not(.tracker-expand-btn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn):not(.bug-icon-btn):not(.worldMapZoomBtn):not(.worldMapZoomResetBtn):not(.worldMapCloseBtn):not(.worldMapMobileFilterToggle):not(.recenterBtn):not(.rot-btn):not(.destroyQtyControls button):not(.joinSpectatorBtn) {
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
  .worldMapModal {
    padding: 0 !important;
    inset: 0 !important;
  }
  .worldMapPanel {
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .worldMapViewport {
    padding: 0 !important;
  }
  .overlayPanel {
    justify-content: center;
    align-items: center;
    padding: 8px;
  }

  .audio-controls-floating {
    top: 6px;
    right: 6px;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 14px;
    transform: scale(0.8);
    transform-origin: top right;
  }

  .audio-controls-floating .slider-group {
    gap: 4px;
  }

  .audio-controls-floating .audio-slider-label {
    font-size: 9px;
  }

  #audioMuteBtn {
    width: 16px;
    height: 16px;
    font-size: 11px;
  }

  #audioMusicVolumeSlider,
  #audioSFXVolumeSlider {
    width: 34px;
    height: 3px;
  }

  .overlayCard:not(.statsModalWindow):not(.spellsModalWindow):not(.craftCard),
  .optionsCard,
  .optionsVueCard,
  .inventoryCard,
  .bankCard,
  .merchantCard,
  .socialCard,
  .questsCard,
  .encyclopediaCard,
  .ladderCard,
  [class*="Card"]:not(.statsCard):not(.statsModalWindow):not(.spellsCard):not(.spellsModalWindow):not(.craftCard):not(.stat-row-card):not(.res-card-chip):not(.spell-row-card-container):not(.mapCombatsCard) {
    width: min(540px, calc(100vw - 12px)) !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    padding: 12px !important;
  }
  .overlayCardHeader {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 36px 8px 12px !important;
    min-height: 40px !important;
    margin-bottom: 0 !important;
  }

  .overlayCardHeader h2,
  .overlayCardHeader .header-title,
  .window-title-text,
  .window-title,
  #spellsModal .overlayCardHeader h2 {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: var(--ui-gold, #d8b46a) !important;
  }

  #spellsModal .overlayCardHeader p {
    font-size: 0.7rem;
  }

  .statsCard,
  .spellsCard {
    max-height: calc(100dvh - 12px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .overlayStatsGrid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 0 12px 12px !important;
  }

  #hud > div,
  .statItem {
    font-size: 0.76rem !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
  }

  .statItem--allocatable {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
  }

  .statItem--allocatable .statAllocGroup {
    width: auto;
    justify-content: flex-start;
    margin-top: 0;
  }

  .statItem span {
    font-size: 0.76rem !important;
  }

  .xpBarContainer {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
  }

  #hud > .xpBarContainer {
    min-height: 68px;
    gap: 7px;
    padding: 10px 10px !important;
    align-items: stretch;
    justify-content: initial;
  }

  .xpBarHeader {
    gap: 6px;
    margin-bottom: 0;
  }

  .xpBarBadge {
    min-width: 30px;
    height: 18px;
    padding: 0 7px;
    font-size: 0.62rem;
  }

  .xpBarLabel {
    font-size: 0.74rem;
  }

  .xpBarOuter {
    height: 14px;
  }

  .xpBarValue {
    font-size: 0.6rem;
  }

  .statAllocInput {
    width: 30px !important;
    height: 22px !important;
    font-size: 0.72rem !important;
  }

  .statPlusBtn {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .statAllocGroup .statPlusBtn {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  /* Tab Bar for Mobile Combat */
  .combat-tab-bar {
    display: flex;
    justify-content: center;
    gap: 24px;
    background: rgba(20, 16, 13, 0.85);
    border-bottom: 1px solid rgba(216, 180, 106, 0.18);
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
  }
  .combatTabBtn {
    flex: none;
    background: transparent;
    border: none;
    padding: 10px 16px;
    color: #a7977c;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-bottom-color 0.2s;
    border-bottom: 3px solid transparent;
    font-family: 'Outfit', sans-serif;
  }
  .combatTabBtn.active {
    color: #ffd700;
    background: rgba(216, 180, 106, 0.06);
    border-bottom: 3px solid #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  }

  /* Combat Tab switching rules */
  .combatScene .combatSceneSidebar {
    display: none !important;
  }
  .combatScene #chatSection {
    display: none !important;
  }
  .combatScene.show-info #chatSection {
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(28, 21, 17, 0.94) 0%, rgba(18, 14, 11, 0.92) 100%) !important;
    border: 1px solid rgba(216, 180, 106, 0.22) !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }
  .combatScene.show-info #chatBox {
    flex: 1 !important;
    max-height: none !important;
  }
  .combatScene.show-info .combatSceneBoardPanel {
    display: none !important;
  }
}

/* ==========================================================================
   NOUVELLE INTERFACE HORS COMBAT POUR TÉLÉPHONES ET TABLETTES EN PAYSAGE
   (Strictement réservé aux mobiles/tablettes tactiles en orientation paysage, hors combat)
   ========================================================================== */
body.touch-landscape-ui:not(.combat-mode).in-game {
  --safe-left: max(8px, env(safe-area-inset-left));
  --safe-right: max(8px, env(safe-area-inset-right));
  --safe-top: max(6px, env(safe-area-inset-top));
  --safe-bottom: max(6px, env(safe-area-inset-bottom));
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  --world-camera-scale: 0.65;
}

body.touch-landscape-ui:not(.combat-mode).in-game #gamePanel {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 1. Map plein écran immersive */
body.touch-landscape-ui:not(.combat-mode).in-game #mapContainer {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100% !important;
  max-height: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* 2. Bottom UI -> HUD flottant transparent */
body.touch-landscape-ui:not(.combat-mode).in-game #bottomUI,
body.touch-landscape-ui:not(.combat-mode) #bottomUI {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100% !important;
  max-height: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  display: block !important;
  overflow: visible !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #bottomUI > * {
  pointer-events: auto !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #mobileTabBar,
body.touch-landscape-ui:not(.combat-mode) #mobileTabBar {
  display: none !important;
}

/* 3. Top-Left : Médaillon Minimap & Zone compact */
body.touch-landscape-ui:not(.combat-mode).in-game #minimapContainer {
  position: absolute !important;
  top: var(--safe-top, 6px) !important;
  left: var(--safe-left, 8px) !important;
  width: auto !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 5px 7px !important;
  background: linear-gradient(135deg, rgba(20, 15, 12, 0.88) 0%, rgba(10, 8, 7, 0.94) 100%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 1010 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #minimapCoords {
  width: 100% !important;
  min-height: auto !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapCoordsTop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 4px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapCoordsTitleBlock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapCoordsPos {
  color: #ffd700 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapCoordsZone {
  color: #efe6d2 !important;
  font-size: 10px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapCoordsTag,
body.touch-landscape-ui:not(.combat-mode).in-game .minimapCoordsLvl {
  font-size: 8.8px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapStage {
  width: 132px !important;
  height: 132px !important;
  min-height: 132px !important;
  max-width: 132px !important;
  max-height: 132px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(216, 180, 106, 0.35) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .minimapStage:active {
  transform: scale(0.96) !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #minimap {
  width: 126px !important;
  height: 126px !important;
  max-width: 126px !important;
  max-height: 126px !important;
  border-radius: 6px !important;
  border: none !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #openWorldMapBtn {
  width: 100% !important;
  min-height: 18px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  border-radius: 3px !important;
  background: rgba(216, 180, 106, 0.15) !important;
  border: 1px solid rgba(216, 180, 106, 0.3) !important;
  color: #ffd700 !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .map-spectator-pill {
  position: absolute !important;
  bottom: calc(var(--safe-bottom, 6px) + clamp(94px, 28dvh, 130px) + 8px) !important;
  left: var(--safe-left, 8px) !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 1050 !important;
}

/* 4. Bottom-Left : Chat flottant agrandi et confortable en mode paysage tactile */
body.touch-landscape-ui:not(.combat-mode).in-game #chatSection {
  position: absolute !important;
  bottom: var(--safe-bottom, 6px) !important;
  left: var(--safe-left, 8px) !important;
  width: clamp(320px, 38vw, 440px) !important;
  height: clamp(94px, 28dvh, 130px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 3px !important;
  padding: 4px 6px !important;
  background: linear-gradient(180deg, rgba(14, 11, 9, 0.82) 0%, rgba(9, 7, 6, 0.90) 100%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1010 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #chatBox {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border-radius: 6px !important;
  overflow-y: auto !important;
  color: #efe6d2 !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #chatControls {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  height: 25px !important;
  min-height: 25px !important;
  width: 100% !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #chatChannel {
  flex: 0 0 74px !important;
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 25px !important;
  min-height: 25px !important;
  font-size: 9.5px !important;
  padding: 1px 3px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(216, 180, 106, 0.28) !important;
  background: rgba(26, 20, 16, 0.95) !important;
  color: #ffd700 !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #chatPrivateTo {
  height: 25px !important;
  min-height: 25px !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
  width: 78px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(216, 180, 106, 0.28) !important;
  background: rgba(14, 11, 9, 0.9) !important;
  color: #efe6d2 !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #chatInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 25px !important;
  min-height: 25px !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(216, 180, 106, 0.28) !important;
  background: rgba(14, 11, 9, 0.9) !important;
  color: #efe6d2 !important;
}

/* Le bouton Envoyer est masqué en paysage tactile car la touche Entrée du clavier virtuel valide l'envoi */
body.touch-landscape-ui:not(.combat-mode).in-game #chatSendBtn {
  display: none !important;
}

/* 5. Right Flank : Le dock vertical tactile */
body.touch-landscape-ui:not(.combat-mode).in-game #hudSection {
  position: absolute !important;
  right: var(--safe-right, 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  max-height: calc(100dvh - 16px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, clamp(34px, 4.2vh, 40px)) !important;
  grid-auto-rows: clamp(34px, 4.2vh, 40px) !important;
  gap: 3px !important;
  padding: 4px !important;
  background: linear-gradient(135deg, rgba(22, 17, 13, 0.88) 0%, rgba(12, 9, 7, 0.94) 100%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1010 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #hudSection button {
  width: clamp(34px, 4.2vh, 40px) !important;
  height: clamp(34px, 4.2vh, 40px) !important;
  min-height: clamp(34px, 4.2vh, 40px) !important;
  max-height: clamp(34px, 4.2vh, 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(38, 28, 20, 0.92) 0%, rgba(18, 14, 10, 0.96) 100%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.35) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #hudSection button:active {
  transform: scale(0.92) !important;
  border-color: #ffd700 !important;
  background: rgba(216, 180, 106, 0.25) !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #hudSection .hud-btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #hudSection .hud-btn-icon svg {
  width: 16px !important;
  height: 16px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #hudSection .hud-btn-label {
  display: block !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  color: #efe6d2 !important;
  letter-spacing: -0.2px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  max-width: 36px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #hudSection .hud-menu-dock-btn {
  display: flex !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game #optionsSection {
  display: none !important;
}

/* Audio controls discret en haut à droite (à gauche du dock HUD) */
body.touch-landscape-ui:not(.combat-mode).in-game .audio-controls-floating {
  position: absolute !important;
  top: var(--safe-top, 6px) !important;
  right: max(96px, calc(var(--safe-right, 8px) + 88px)) !important;
  transform: scale(0.78) !important;
  transform-origin: top right !important;
  z-index: 999 !important;
}

/* 6. Tracker de Quête : positionné à gauche du dock HUD pour éviter toute superposition */
body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating {
  position: absolute !important;
  right: max(96px, calc(var(--safe-right, 8px) + 88px)) !important;
  top: max(34px, calc(var(--safe-top, 6px) + 28px)) !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: min(200px, 30vw) !important;
  max-height: calc(100dvh - 44px) !important;
  z-index: 995 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75) !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating.collapsed {
  max-width: min(150px, 22vw) !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating .tracker-header {
  padding: 3px 8px !important;
  min-height: 22px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating .tracker-title {
  font-size: 10px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating .tracker-body {
  padding: 4px 6px !important;
  gap: 3px !important;
  max-height: clamp(80px, 34dvh, 130px) !important;
  overflow-y: auto !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating .tracker-step {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating .tracker-npc-info {
  font-size: 8.5px !important;
  padding: 2px 4px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .quest-tracker-floating .untrack-btn {
  padding: 2px 6px !important;
  font-size: 8.5px !important;
  min-height: 18px !important;
  margin-top: 2px !important;
}

/* 7. Tracker Colisée & Party Panel : côté gauche sous la minimap pour zéro collision */
body.touch-landscape-ui:not(.combat-mode).in-game .colosseum-tracker-floating {
  position: fixed !important;
  top: max(195px, calc(var(--safe-top, 6px) + 185px)) !important;
  left: var(--safe-left, 8px) !important;
  right: auto !important;
  width: auto !important;
  max-width: min(180px, 26vw) !important;
  z-index: 995 !important;
  transition: top 0.25s ease !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game body:has(#minimapContainer.collapsed) .colosseum-tracker-floating,
body.touch-landscape-ui:not(.combat-mode).in-game #bottomUI:has(#minimapContainer.collapsed) ~ .colosseum-tracker-floating {
  top: max(75px, calc(var(--safe-top, 6px) + 65px)) !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .colosseum-tracker-floating.collapsed {
  min-width: 100px !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game .party-panel-floating {
  position: absolute !important;
  top: max(195px, calc(var(--safe-top, 6px) + 185px)) !important;
  left: var(--safe-left, 8px) !important;
  right: auto !important;
  width: 150px !important;
  max-width: min(160px, 24vw) !important;
  z-index: 995 !important;
  transition: top 0.25s ease !important;
}

body.touch-landscape-ui:not(.combat-mode).in-game body:has(#minimapContainer.collapsed) .party-panel-floating,
body.touch-landscape-ui:not(.combat-mode).in-game #bottomUI:has(#minimapContainer.collapsed) ~ .party-panel-floating {
  top: max(75px, calc(var(--safe-top, 6px) + 65px)) !important;
}

/* ==========================================================================
   COMPACTAGE UNIFIÉ DE TOUTES LES IHM EN MODE PAYSAGE TACTILE / HORIZONTAL
   Permet de réduire la taille des fenêtres et afficher beaucoup plus d'éléments
   (slots d'inventaire, stats, sorts, quêtes, recettes, membres, etc.)
   ========================================================================== */

/* 1. Cadre général de toutes les fenêtres & modales */
body.touch-landscape-ui .overlayCard:not(.craftCard),
body.touch-landscape-ui .inventoryCard,
body.touch-landscape-ui .statsCard,
body.touch-landscape-ui .spellsCard,
body.touch-landscape-ui .questsCard,
body.touch-landscape-ui .socialCard,
body.touch-landscape-ui .bankCard,
body.touch-landscape-ui .merchantCard,
body.touch-landscape-ui .hdvCard,
body.touch-landscape-ui .colosseumCard,
body.touch-landscape-ui .ladderCard,
body.touch-landscape-ui .encyclopediaCard,
body.touch-landscape-ui .optionsCard,
body.touch-landscape-ui .optionsVueCard,
body.touch-landscape-ui .systemMenuCard,
body.touch-landscape-ui .teleporterCard,
body.touch-landscape-ui .npcDialogueCard,
body.touch-landscape-ui .combatEndCard,
body.touch-landscape-ui .bugReportCard,
body.touch-landscape-ui [class*="ModalWindow"],
body.touch-landscape-ui :where(.overlayCard, .inventoryCard, .statsCard, .spellsCard, .questsCard, .socialCard, .bankCard, .merchantCard, .hdvCard, .systemMenuCard):not(.craftCard) {
  width: min(780px, calc(100vw - 20px)) !important;
  max-width: min(780px, calc(100vw - 20px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 10px) !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* 2. En-têtes compacts pour toutes les fenêtres */
body.touch-landscape-ui :where(
  .overlayCardHeader,
  .inventoryHeader,
  .statsHeader,
  .spellsHeader,
  .socialHeader,
  .questsHeader,
  .craftHeader,
  .shopHeader,
  .hdvHeader,
  .colosseumHeader,
  .ladderHeader,
  .encyclopediaHeader,
  .optionsHeader,
  .merchantHeader,
  .systemMenuHeader,
  .modal-header
) {
  padding: 2px 6px !important;
  min-height: 24px !important;
  margin-bottom: 3px !important;
  gap: 4px !important;
}

body.touch-landscape-ui :where(
  .inventoryHeaderTitle,
  .statsHeaderTitle,
  .spellsHeaderTitle,
  .socialHeaderTitle,
  .questsHeaderTitle,
  .craftHeaderTitle,
  .hdvHeaderTitle,
  .colosseumHeaderTitle,
  .ladderHeaderTitle,
  .encyclopediaHeaderTitle,
  .optionsHeaderTitle
) {
  font-size: 11px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

body.touch-landscape-ui :where(
  .closeCardBtn,
  .inventoryCloseBtn,
  .statsCloseBtn,
  .spellsCloseBtn,
  .questsCloseBtn,
  .socialCloseBtn,
  .craftCloseBtn,
  .shopCloseBtn,
  .hdvCloseBtn,
  .colosseumCloseBtn,
  .ladderCloseBtn,
  .encyclopediaCloseBtn,
  .optionsCloseBtn,
  .modalCloseBtn
) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  top: 3px !important;
  right: 5px !important;
  padding: 0 !important;
}

/* Onglets de navigation */
body.touch-landscape-ui :where(
  .inventoryNavTabs,
  .statsNavTabs,
  .socialNavTabs,
  .questsNavTabs,
  .craftNavTabs,
  .shopNavTabs,
  .nav-tabs,
  .tab-buttons
) {
  gap: 3px !important;
  margin-bottom: 3px !important;
}

body.touch-landscape-ui :where(
  .inventoryNavTab,
  .statsNavTab,
  .socialNavTab,
  .questsNavTab,
  .craftNavTab,
  .nav-tab-btn,
  .tabBtn
) {
  height: 22px !important;
  min-height: 22px !important;
  font-size: 8.5px !important;
  padding: 1px 6px !important;
  border-radius: 5px !important;
}

/* 3. INVENTAIRE : Visualiser un maximum de slots sans scroller */
body.touch-landscape-ui .inventory-columns {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  gap: 0 !important;
  height: calc(100% - 30px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 46px) !important;
  overflow: hidden !important;
}

body.touch-landscape-ui .equipped-slots-panel {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  flex: 0 0 216px !important;
  padding: 4px 6px !important;
  gap: 3px !important;
  border-right: 1px solid var(--window-border, rgba(245, 158, 11, 0.25)) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui .bag-panel {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui .inventory-name-banner {
  margin-bottom: 2px !important;
}

body.touch-landscape-ui .character-sheet-layout {
  gap: 2px !important;
}

body.touch-landscape-ui .sheet-slot,
body.touch-landscape-ui .equipSlot,
body.touch-landscape-ui .equipment-slot {
  width: clamp(28px, 4vh, 34px) !important;
  height: clamp(28px, 4vh, 34px) !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 1px !important;
}

body.touch-landscape-ui .bagContent,
body.touch-landscape-ui .inventory-bag-grid,
body.touch-landscape-ui .bag-slots-grid {
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
  gap: 3px !important;
  max-height: calc(100dvh - 80px) !important;
  overflow-y: auto !important;
}

body.touch-landscape-ui .invItem,
body.touch-landscape-ui .bag-slot,
body.touch-landscape-ui .item-slot {
  width: clamp(34px, 4.4vh, 40px) !important;
  height: clamp(34px, 4.4vh, 40px) !important;
  min-width: 34px !important;
  min-height: 34px !important;
  min-height: unset !important;
  padding: 2px !important;
}

body.touch-landscape-ui .invItem .item-icon-wrap svg,
body.touch-landscape-ui .bag-slot .item-icon-wrap svg,
body.touch-landscape-ui .invItem img,
body.touch-landscape-ui .bag-slot img {
  width: 24px !important;
  height: 24px !important;
}

body.touch-landscape-ui .invItemQuantity,
body.touch-landscape-ui .slot-quantity-badge {
  font-size: 7.5px !important;
  padding: 0 2px !important;
}

/* 4. CARACTÉRISTIQUES / STATS : Grille ultra visible & compacte */
body.touch-landscape-ui .character-summary-strip {
  padding: 2px 6px !important;
  gap: 2px !important;
  margin-bottom: 3px !important;
}

body.touch-landscape-ui .summary-identity {
  font-size: 9px !important;
}

body.touch-landscape-ui .stats-grid,
body.touch-landscape-ui .stats-category,
body.touch-landscape-ui .stats-list,
body.touch-landscape-ui .stats-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2px 5px !important;
  max-height: calc(100dvh - 76px) !important;
  overflow-y: auto !important;
}

body.touch-landscape-ui .stat-row,
body.touch-landscape-ui .stat-item,
body.touch-landscape-ui .stat-card {
  min-height: 20px !important;
  padding: 1px 5px !important;
  font-size: 8.5px !important;
}

body.touch-landscape-ui .stat-allocate-btn,
body.touch-landscape-ui .btn-plus {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  font-size: 10px !important;
}

/* 5. SORTS : Grille dense multi-colonnes */
body.touch-landscape-ui .spells-columns {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.8fr) !important;
  gap: 6px !important;
  max-height: calc(100dvh - 46px) !important;
  overflow: hidden !important;
}

body.touch-landscape-ui .spells-top-bar,
body.touch-landscape-ui .element-filters-bar {
  padding: 2px 4px !important;
  gap: 2px !important;
  margin-bottom: 2px !important;
}

body.touch-landscape-ui .spells-grid,
body.touch-landscape-ui .spells-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 3px !important;
  max-height: calc(100dvh - 84px) !important;
  overflow-y: auto !important;
}

body.touch-landscape-ui .spell-card,
body.touch-landscape-ui .spell-item-row {
  padding: 2px 4px !important;
  min-height: 30px !important;
  gap: 3px !important;
  font-size: 8.5px !important;
}

body.touch-landscape-ui .spell-icon,
body.touch-landscape-ui .spell-card-icon {
  width: 22px !important;
  height: 22px !important;
}

/* 6. QUÊTES & SUCCÈS */
body.touch-landscape-ui .quests-columns-wrap {
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 6px !important;
  max-height: calc(100dvh - 46px) !important;
}

body.touch-landscape-ui .quest-list-item {
  padding: 3px 5px !important;
  font-size: 8.5px !important;
  min-height: 22px !important;
}

/* 7. SOCIAL / GUILDE / AMIS */
body.touch-landscape-ui .social-member-row,
body.touch-landscape-ui .friend-row {
  padding: 2px 5px !important;
  font-size: 8.5px !important;
  min-height: 22px !important;
  gap: 3px !important;
}

/* 8. ARTISANAT / CRAFT / HDV / BANQUE */
body.touch-landscape-ui .craftCard {
  width: min(860px, calc(100vw - 16px)) !important;
  max-width: min(860px, calc(100vw - 16px)) !important;
  height: calc(100dvh - 8px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 8px) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui .craft-columns {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100% - 28px) !important;
  max-height: calc(100% - 28px) !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.touch-landscape-ui .recipes-panel {
  width: 260px !important;
  min-width: 260px !important;
  flex: 0 0 260px !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.touch-landscape-ui .recipes-scroll {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

body.touch-landscape-ui .craft-details-panel {
  padding: 6px 10px 14px 10px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(245, 158, 11, 0.5) rgba(0, 0, 0, 0.3) !important;
}

body.touch-landscape-ui .craft-details-panel::-webkit-scrollbar {
  width: 5px !important;
  display: block !important;
}
body.touch-landscape-ui .craft-details-panel::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.55) !important;
  border-radius: 4px !important;
}

body.touch-landscape-ui .craft-details-content {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: min-content !important;
  flex-shrink: 0 !important;
  gap: 6px !important;
  padding-bottom: 36px !important;
  overflow-y: visible !important;
  touch-action: pan-y !important;
}

body.touch-landscape-ui .craft-details-header,
body.touch-landscape-ui .craft-stats-box,
body.touch-landscape-ui .ingredients-section,
body.touch-landscape-ui .ingredients-list,
body.touch-landscape-ui .ingredient-row,
body.touch-landscape-ui .ing-info,
body.touch-landscape-ui .ing-name,
body.touch-landscape-ui .ing-quantity {
  touch-action: pan-y !important;
}

body.touch-landscape-ui .craft-action-btn {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body.touch-landscape-ui .craft-grid,
body.touch-landscape-ui .hdv-grid,
body.touch-landscape-ui .bank-grid {
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
  gap: 3px !important;
  max-height: calc(100dvh - 76px) !important;
}

body.touch-landscape-ui .recipe-card,
body.touch-landscape-ui .listing-row {
  padding: 2px 5px !important;
  font-size: 8.5px !important;
  min-height: 24px !important;
}

/* 9. MENU SYSTÈME */
body.touch-landscape-ui .systemMenuCard {
  max-width: 420px !important;
  padding: 6px 10px !important;
}

body.touch-landscape-ui .system-menu-grid,
body.touch-landscape-ui .systemMenuActions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 3px 5px !important;
}

body.touch-landscape-ui .system-menu-btn,
body.touch-landscape-ui .systemMenuBtn,
body.touch-landscape-ui .systemMenuActions button {
  height: 25px !important;
  min-height: 25px !important;
  font-size: 9px !important;
  padding: 2px 5px !important;
}

body.touch-landscape-ui .systemMenuVersion {
  grid-column: 1 / -1 !important;
  font-size: 8px !important;
  margin-top: 2px !important;
}

@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body.in-game {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body.in-game #gamePanel {
    height: 100dvh !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #mapContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 0 2px !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #bottomUI {
    display: flex !important;
    flex-direction: column !important;
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #mobileTabBar,
  body:not(.combat-mode).in-game .mobile-only {
    display: flex !important;
  }

  body:not(.combat-mode).in-game #chatSection,
  body:not(.combat-mode).in-game #minimapContainer,
  body:not(.combat-mode).in-game #hudSection,
  body:not(.combat-mode).in-game #optionsSection {
    display: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: calc(100% - 40px) !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #chatSection.mobile-visible,
  body:not(.combat-mode).in-game #minimapContainer.mobile-visible,
  body:not(.combat-mode).in-game #hudSection.mobile-visible,
  body:not(.combat-mode).in-game #optionsSection.mobile-visible {
    display: flex !important;
  }

  body:not(.combat-mode).in-game #hudSection.mobile-visible {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body:not(.combat-mode).in-game #chatSection {
    gap: 4px !important;
  }

  body:not(.combat-mode).in-game #chatBox {
    padding: 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  body:not(.combat-mode).in-game #chatControls {
    gap: 4px !important;
    margin-top: 0 !important;
  }

  body:not(.combat-mode).in-game #chatControls select,
  body:not(.combat-mode).in-game #chatControls input {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 9.5px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  body:not(.combat-mode).in-game #chatSendBtn {
    display: none !important;
  }

  body:not(.combat-mode).in-game #minimapContainer {
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body:not(.combat-mode).in-game #minimapCoords {
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  body:not(.combat-mode).in-game #minimap {
    width: clamp(100px, 22vh, 125px) !important;
    height: clamp(100px, 22vh, 125px) !important;
    border-width: 2px !important;
  }

  body:not(.combat-mode).in-game #openWorldMapBtn {
    width: 100% !important;
    min-height: 22px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
  }

  body:not(.combat-mode).in-game #hudSection button {
    min-height: 26px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    padding: 2px 4px !important;
    margin: 0 !important;
  }

  body:not(.combat-mode).in-game #optionsSection {
    gap: 4px !important;
    justify-content: stretch !important;
  }

  body:not(.combat-mode).in-game #optionsSection button {
    min-height: 26px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    padding: 2px 4px !important;
    margin: 0 !important;
  }

  body:not(.combat-mode).in-game .audio-controls-floating {
    top: 6px !important;
    right: 6px !important;
    gap: 4px !important;
    padding: 3px 6px !important;
    transform: scale(0.82) !important;
    transform-origin: top right !important;
  }
}

@media (max-width: 420px), (max-height: 760px) {
  body:not(.combat-mode) #bottomUI,
  #bottomUI {
    height: clamp(156px, 26dvh, 210px) !important;
    min-height: 156px !important;
    max-height: 30dvh !important;
  }

  body:not(.combat-mode) #chatSection,
  body:not(.combat-mode) #minimapContainer,
  body:not(.combat-mode) #hudSection,
  body:not(.combat-mode) #optionsSection,
  #chatSection,
  #minimapContainer,
  #hudSection,
  #optionsSection {
    padding: 4px !important;
  }

  body:not(.combat-mode) #mobileTabBar,
  #mobileTabBar {
    height: 38px !important;
  }

  .mobileTabBtn {
    font-size: 12px !important;
  }

  body:not(.combat-mode).in-game #minimapContainer.mobile-visible,
  body:not(.combat-mode) #minimapContainer.mobile-visible,
  #minimapContainer.mobile-visible {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #minimapCoords,
  body:not(.combat-mode) #minimapCoords,
  #minimapCoords {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    font-weight: 700 !important;
  }

  body:not(.combat-mode).in-game #minimap,
  body:not(.combat-mode) #minimap,
  #minimap {
    width: 126px !important;
    height: 126px !important;
    max-width: 126px !important;
    max-height: 126px !important;
    border-width: 2px !important;
  }

  body:not(.combat-mode).in-game #openWorldMapBtn,
  body:not(.combat-mode) #openWorldMapBtn,
  #openWorldMapBtn {
    width: min(160px, 100%) !important;
    min-height: 22px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px), (max-height: 680px) {
  body:not(.combat-mode) #bottomUI,
  #bottomUI {
    height: clamp(146px, 24dvh, 190px) !important;
    min-height: 146px !important;
    max-height: 28dvh !important;
  }

  body:not(.combat-mode) #mobileTabBar,
  #mobileTabBar {
    height: 34px !important;
  }

  .mobileTabBtn {
    font-size: 11px !important;
  }

  body:not(.combat-mode).in-game #minimapCoords,
  body:not(.combat-mode) #minimapCoords,
  #minimapCoords {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    padding: 3px 5px !important;
    font-weight: 700 !important;
  }

  body:not(.combat-mode).in-game #minimap,
  body:not(.combat-mode) #minimap,
  #minimap {
    width: 116px !important;
    height: 116px !important;
    max-width: 116px !important;
    max-height: 116px !important;
  }

  body:not(.combat-mode).in-game #openWorldMapBtn,
  body:not(.combat-mode) #openWorldMapBtn,
  #openWorldMapBtn {
    width: min(150px, 100%) !important;
    min-height: 20px !important;
    font-size: 8px !important;
    padding: 2px 5px !important;
  }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  body.in-game {
    --world-camera-scale: 0.72;
  }

  body:not(.combat-mode).in-game #mapContainer {
    padding: 0 !important;
  }

  body:not(.combat-mode) #bottomUI {
    height: clamp(170px, 34dvh, 250px) !important;
    min-height: 170px !important;
    max-height: 38dvh !important;
  }

  body:not(.combat-mode) #minimapContainer.mobile-visible,
  #minimapContainer.mobile-visible {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 6px !important;
    overflow-y: auto !important;
  }

  body:not(.combat-mode) #minimapCoords,
  #minimapCoords {
    font-size: clamp(9px, 2.7vw, 12px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body:not(.combat-mode) #minimap,
  #minimap {
    width: clamp(128px, 32vw, 188px) !important;
    height: clamp(128px, 32vw, 188px) !important;
    max-width: min(52vw, 188px) !important;
    max-height: min(52vw, 188px) !important;
    border-width: 2px !important;
  }

  body:not(.combat-mode) #openWorldMapBtn,
  #openWorldMapBtn {
    width: min(180px, 100%) !important;
    min-height: 24px !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
    margin-top: 2px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  body:not(.combat-mode).in-game #gamePanel {
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #mapContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px !important;
    border-bottom: 2px solid #5f4827 !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #bottomUI {
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    height: clamp(190px, 32dvh, 250px) !important;
    min-height: 190px !important;
    max-height: 36dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #15110d, #0f0c09) !important;
  }

  body:not(.combat-mode).in-game #mobileTabBar,
  body:not(.combat-mode).in-game .mobile-only {
    display: flex !important;
  }

  body:not(.combat-mode).in-game #chatSection,
  body:not(.combat-mode).in-game #minimapContainer,
  body:not(.combat-mode).in-game #hudSection,
  body:not(.combat-mode).in-game #optionsSection {
    display: none !important;
    width: 100% !important;
    height: calc(100% - 42px) !important;
    padding: 8px !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body:not(.combat-mode).in-game #chatSection.mobile-visible {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body:not(.combat-mode).in-game #minimapContainer.mobile-visible,
  body:not(.combat-mode).in-game #hudSection.mobile-visible,
  body:not(.combat-mode).in-game #optionsSection.mobile-visible {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET COMBAT MODE (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Hide standard map & bottom UI during combat */
  body.combat-mode #mapContainer,
  body.combat-mode #gameWorld,
  body.combat-mode #bottomUI,
  body.combat-mode .combatSceneSidebar {
    display: none !important;
  }

  /* Fullscreen combat scene */
  body.combat-mode .combatScene {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 6px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 3200 !important;
    background: var(--window-bg, radial-gradient(circle at 50% 30%, rgba(20, 24, 38, 0.98) 0%, rgba(10, 12, 20, 0.99) 100%)) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Top Mobile Combat Tab Bar (Plateau / Chat) */
  body.combat-mode .mobile-only,
  body.combat-mode #combatSceneTabBar,
  body.combat-mode .combat-tab-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: rgba(20, 16, 13, 0.92) !important;
    border-bottom: 1px solid rgba(216, 180, 106, 0.25) !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combatTabBtn {
    flex: 1 1 0 !important;
    max-width: 160px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 12px !important;
    color: #a7977c !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-bottom-color 0.2s !important;
    border-bottom: 3px solid transparent !important;
    font-family: 'Outfit', sans-serif !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combatTabBtn.active {
    color: #ffd700 !important;
    background: rgba(216, 180, 106, 0.08) !important;
    border-bottom: 3px solid #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
  }

  /* Board panel fills all vertical space */
  body.combat-mode .combatSceneBoardPanel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    order: 1 !important;
  }

  /* Header inside board panel */
  body.combat-mode .combatSceneHeader {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    background: linear-gradient(180deg, rgba(20, 24, 38, 0.95) 0%, rgba(11, 14, 23, 0.98) 100%) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  body.combat-mode .combatSceneHeader p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: #efe6d2 !important;
    line-height: 1.2 !important;
  }

  /* Board canvas container */
  body.combat-mode #combatPositionBoard {
    flex: 1 1 0 !important;
    min-height: 160px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Timeline */
  body.combat-mode #combatTimelineBar {
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  /* HUD */
  body.combat-mode #combatHUD,
  body.combat-mode .combatSceneBoardPanel > .combat-hud-panel {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sur mobile / tablette, bandeau de sort inline compact sans masquer la timeline */
  body.combat-mode #combatSpellDesc {
    display: none !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc.combat-spell-desc-visible {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    padding: 2px 6px !important;
    margin: 0 0 3px 0 !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combat-spell-zone {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.combat-mode .combat-spell-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 3px 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-items: center !important;
  }

  body.combat-mode #combatSpellPagePrevBtn,
  body.combat-mode #combatSpellPageNextBtn {
    width: 26px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode #combatSpellBar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 2px 2px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.combat-mode #combatSpellBar::-webkit-scrollbar {
    display: none !important;
  }

  body.combat-mode .spell-slot {
    width: 40px !important;
    height: 40px !important;
    border-width: 1.5px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode .combat-spell-pages {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
  }

  body.combat-mode .combat-spell-page-dot {
    width: 22px !important;
    height: 16px !important;
    min-height: 16px !important;
    font-size: 9px !important;
    padding: 0 !important;
    border-radius: 3px !important;
  }

  /* Chat Tab Visibility */
  body.combat-mode #chatSection {
    display: none !important;
  }

  body.combat-mode .combatScene.show-info .combatSceneBoardPanel {
    display: none !important;
  }

  body.combat-mode .combatScene.show-info #chatSection {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(28, 21, 17, 0.94) 0%, rgba(18, 14, 11, 0.92) 100%) !important;
    border: 1px solid rgba(216, 180, 106, 0.22) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin: 0 !important;
  }

  body.combat-mode .combatScene.show-info #chatBox {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET LANDSCAPE COMBAT MODE (height <= 560px or landscape phone)
   Adapts the combat interface for horizontal phones so that:
   - Spells, HP/AP/MP stats, Ready / End Turn button, and Timer are ALWAYS 100% visible
   - Top tab bar & header are merged compactly (30px)
   - Timeline bar is ultra-compact (38px)
   - Combat HUD sits cleanly at the bottom in a single horizontal row (52px)
   - Board canvas automatically resizes to fill all remaining height without overflow
   ========================================================================== */
@media (max-height: 560px), (max-width: 1024px) and (orientation: landscape) and (max-height: 620px) {
  /* Fullscreen combat scene in landscape */
  body.combat-mode .combatScene {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 2px 4px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 3200 !important;
    background: var(--window-bg, radial-gradient(circle at 50% 30%, rgba(20, 24, 38, 0.98) 0%, rgba(10, 12, 20, 0.99) 100%)) !important;
  }

  /* Board panel fills space and acts as reference for absolute flank panels */
  body.combat-mode .combatSceneBoardPanel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Compact Header at the top (leaves room for top-right tab bar) */
  body.combat-mode .combatSceneHeader {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 2px 145px 2px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    background: linear-gradient(180deg, rgba(20, 24, 38, 0.95) 0%, rgba(11, 14, 23, 0.98) 100%) !important;
    box-sizing: border-box !important;
    margin: 0 0 2px 0 !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode .combatSceneHeader p,
  body.combat-mode #combatStatusText {
    margin: 0 !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #efe6d2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
  }

  body.combat-mode #combatTimer {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: #ffd700 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-radius: 6px !important;
    padding: 1px 6px !important;
    line-height: 1.2 !important;
  }

  /* Float Tab Bar (Plateau / Chat) at top right inside header zone */
  body.combat-mode #combatSceneTabBar,
  body.combat-mode .combat-tab-bar {
    position: absolute !important;
    top: 4px !important;
    right: 8px !important;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    width: auto !important;
    background: rgba(14, 18, 28, 0.94) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-radius: 13px !important;
    padding: 1px 3px !important;
    gap: 3px !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  body.combat-mode .combatTabBtn {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 9px !important;
    border-radius: 11px !important;
    border: none !important;
    color: #a7977c !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: none !important;
  }

  body.combat-mode .combatTabBtn.active {
    color: #ffd700 !important;
    background: rgba(245, 158, 11, 0.25) !important;
    border-bottom: none !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4) !important;
  }

  /* Board canvas container: fills entire arena space! */
  body.combat-mode #combatPositionBoard {
    position: relative !important;
    flex: 1 1 0 !important;
    min-height: 180px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ==========================================================================
     UPPER-LEFT FLANK: Horizontal Timeline Bar sitting in the upper-left black space
     ========================================================================== */
  body.combat-mode #combatTimelineBar {
    position: absolute !important;
    left: 8px !important;
    top: 36px !important;
    z-index: 120 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: calc(50% - 130px) !important;
    padding: 2px 8px !important;
    gap: 6px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    background: linear-gradient(180deg, rgba(20, 24, 38, 0.94) 0%, rgba(11, 14, 23, 0.96) 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  body.combat-mode #combatTimelineBar.collapsed {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 1px 6px !important;
  }

  body.combat-mode .timeline-bar-header {
    gap: 5px !important;
    padding-right: 6px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  body.combat-mode .timeline-bar-collapse-btn {
    min-height: 18px !important;
    height: 18px !important;
    width: 18px !important;
    font-size: 8px !important;
    padding: 0 !important;
    border-radius: 4px !important;
  }

  body.combat-mode .timeline-bar-round {
    gap: 3px !important;
    font-size: 11px !important;
  }

  body.combat-mode .timeline-bar-track {
    gap: 5px !important;
    padding: 0 4px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.combat-mode .timeline-card {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 5px !important;
    overflow: visible !important;
  }

  body.combat-mode .timeline-card-avatar .charSprite {
    transform: translate(-50%, -50%) scale(0.22) !important;
  }

  body.combat-mode .timeline-card-avatar .monsterEntity .monsterSprite {
    transform: translate(-50%, -50%) scale(0.28) !important;
  }

  body.combat-mode .timeline-card-dmg-badge {
    display: none !important;
  }

  /* ==========================================================================
     UNIFIED BOTTOM DOCK (Dofus Touch style single horizontal bar, height 48px)
     Docked flush at the bottom of the screen.
     Leaves 100% of the isometric arena completely free and unobstructed!
     ========================================================================== */
  body.combat-mode #combatHUD,
  body.combat-mode .combatSceneBoardPanel > .combat-hud-panel {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(180deg, rgba(18, 22, 34, 0.97) 0%, rgba(9, 12, 19, 0.99) 100%) !important;
    border-top: 1px solid rgba(245, 158, 11, 0.45) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.75) !important;
    padding: 0 8px !important;
    margin: 0 !important;
    z-index: 150 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     LEFT FLANK: Vitals (HP Heart Orb + AP/MP Badges)
     ========================================================================== */
  body.combat-mode .combat-hud-panel .status-container {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    height: 46px !important;
    width: auto !important;
    min-width: 92px !important;
    flex: 0 0 auto !important;
    padding: 0 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.combat-mode .combat-hud-panel .heart-orb {
    width: 58px !important;
    height: 40px !important;
    min-width: 58px !important;
    min-height: 40px !important;
    border: 2px solid #5f4827 !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #180909 !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode .combat-hud-panel .heart-orb .heart-text,
  body.combat-mode #combatHUD .heart-orb .heart-text,
  body.combat-mode .heart-text,
  #combatHeartText {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 2px #000 !important;
    z-index: 10 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combat-hud-panel .badges,
  body.combat-mode #combatHUD .badges {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: 36px !important;
  }

  body.combat-mode .combat-hud-panel .badge,
  body.combat-mode #combatHUD .badge {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    width: 22px !important;
    height: 16px !important;
    min-width: 22px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    border-radius: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.combat-mode .combat-hud-panel .badge-ap,
  body.combat-mode #combatHUD .badge-ap {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    color: #ffffff !important;
    border: 1px solid #4ade80 !important;
  }

  body.combat-mode .combat-hud-panel .badge-mp,
  body.combat-mode #combatHUD .badge-mp {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    color: #ffffff !important;
    border: 1px solid #f87171 !important;
  }

  /* ==========================================================================
     CENTER DOCK: Spell Bar Zone (◀ 10 Spells ▶ dots)
     ========================================================================== */
  body.combat-mode .combat-hud-panel .combat-spell-zone {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.combat-mode .combat-hud-panel .combat-spell-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Full spell bar row: always starts at spell 1 on the left, non-scrollable directly fitting */
  body.combat-mode #combatSpellBar,
  body.combat-mode .combat-hud-panel #combatSpellBar,
  body.combat-mode .combat-hud-panel .spell-bar {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.combat-mode #combatSpellBar::-webkit-scrollbar,
  body.combat-mode .combat-hud-panel .spell-bar::-webkit-scrollbar {
    display: none !important;
  }

  body.combat-mode .combat-hud-panel .spell-slot {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combat-hud-panel .spell-slot .spell-graphic-icon {
    transform: translate(-50%, -50%) scale(0.44) !important;
  }

  body.combat-mode .combat-hud-panel .spell-slot .spell-hotkey {
    font-size: 7px !important;
    top: 1px !important;
    left: 1.5px !important;
  }

  body.combat-mode .combat-hud-panel .spell-slot .spell-ap-badge {
    font-size: 7.5px !important;
    width: 12px !important;
    height: 12px !important;
    bottom: 1px !important;
    right: 1px !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellPagePrevBtn,
  body.combat-mode .combat-hud-panel #combatSpellPageNextBtn {
    width: 18px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 9px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #efe6d2 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Spell Page Dots: Ultra compact indicators */
  body.combat-mode .combat-hud-panel .combat-spell-pages,
  body.combat-mode .combat-spell-pages {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 2px !important;
    padding: 0 !important;
    width: auto !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode .combat-hud-panel .combat-spell-page-dot,
  body.combat-mode .combat-spell-page-dot {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;
    font-size: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-block !important;
  }

  body.combat-mode .combat-hud-panel .combat-spell-page-dot.active,
  body.combat-mode .combat-spell-page-dot.active {
    background: #f59e0b !important;
    width: 14px !important;
    border-radius: 3px !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6) !important;
  }

  /* Spell Page Pill: Single compact cycle indicator on landscape mobile */
  body.combat-mode .combat-hud-panel .combat-spell-page-pill,
  body.combat-mode .combat-spell-page-pill {
    width: auto !important;
    min-width: 22px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #ffd700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 1px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }

  body.combat-mode .combat-hud-panel .combat-spell-pages.hidden,
  body.combat-mode .combat-spell-pages.hidden,
  body.combat-mode .combat-hud-panel .combat-spell-pages[style*="display: none"],
  body.combat-mode .combat-spell-pages[style*="display: none"],
  body.combat-mode .combat-hud-panel #combatSpellPagePrevBtn.hidden,
  body.combat-mode .combat-hud-panel #combatSpellPagePrevBtn[style*="display: none"],
  body.combat-mode .combat-hud-panel #combatSpellPageNextBtn.hidden,
  body.combat-mode .combat-hud-panel #combatSpellPageNextBtn[style*="display: none"] {
    display: none !important;
  }

  /* Floating Spell Detail Popover above Spell Bar: expands nicely and contains all info */
  body.combat-mode .combat-hud-panel #combatSpellDesc {
    display: none !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc.combat-spell-desc-visible {
    display: flex !important;
    position: absolute !important;
    bottom: 56px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 500 !important;
    width: max-content !important;
    max-width: min(94vw, 680px) !important;
    min-width: 0 !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: rgba(14, 18, 28, 0.96) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .combat-spell-desc-content-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-desc-header-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-desc-header-inline .spell-slot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    border-width: 1px !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-desc-header-inline .spell-slot .spell-graphic-icon {
    transform: translate(-50%, -50%) scale(0.30) !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-name-inline {
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #ffd700 !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-lvl-inline {
    font-size: 8.5px !important;
    color: #a7977c !important;
    white-space: nowrap !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-stats-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-stat-pill {
    font-size: 8.5px !important;
    padding: 1.5px 4px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    white-space: nowrap !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-damage-inline {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(162, 221, 124, 0.12) !important;
    border: 1px solid rgba(162, 221, 124, 0.25) !important;
    color: #a2dd7c !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .spell-text-inline {
    display: none !important;
  }

  body.combat-mode .combat-hud-panel #combatSpellDesc .close-spell-desc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: #ffd700 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    margin-left: 2px !important;
    flex-shrink: 0 !important;
  }

  /* ==========================================================================
     RIGHT FLANK: Single-row Action Bar (Timer, Lock, Surrender, Ready / End Turn)
     ========================================================================== */
  body.combat-mode .combat-hud-panel .action-bar {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    height: 44px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Timer Badge: compact square badge */
  body.combat-mode .combat-hud-panel #combatHUDTimerBadge {
    order: 1 !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #ffd700 !important;
  }

  /* Lock Combat Button: compact with reduced font size */
  body.combat-mode .combat-hud-panel .combatHUD-lock-btn {
    order: 2 !important;
    width: auto !important;
    min-width: 26px !important;
    max-width: 65px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 4px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin: 0 !important;
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #ffd700 !important;
  }

  body.combat-mode .combat-hud-panel .combatHUD-lock-btn .combatHUD-lock-text {
    font-size: 7.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body.combat-mode .combat-hud-panel .combatHUD-lock-btn svg {
    width: 12px !important;
    height: 12px !important;
    margin: 0 2px 0 0 !important;
    flex-shrink: 0 !important;
  }

  /* Surrender Button: reduced size */
  body.combat-mode .combat-hud-panel #combatHUDSurrenderBtn {
    order: 3 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    padding: 0 5px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background: rgba(185, 28, 28, 0.75) !important;
    border: 1px solid #ef4444 !important;
    color: #ffffff !important;
  }

  /* Ready / Pass Turn Button: reduced size and font */
  body.combat-mode .combat-hud-panel #combatHUDPassTurnBtn {
    order: 4 !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: 78px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 4px !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Compact Target Preview Popover in Landscape Mobile: Non-scrollable, centered, compact */
  .combat-cell-hover-preview--longpress,
  .combat-cell-hover-preview {
    position: fixed !important;
    top: 32px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 320px !important;
    width: auto !important;
    min-width: 200px !important;
    max-height: none !important;
    padding: 4px 8px !important;
    font-size: 8.5px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85) !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    z-index: 15000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .combat-cell-hover-preview .combatInspectCardHeader,
  .combat-cell-hover-preview--longpress .combatInspectCardHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
    width: 100% !important;
  }

  .combat-cell-hover-preview .combatInspectName,
  .combat-cell-hover-preview--longpress .combatInspectName {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .combat-cell-hover-preview .combatPreviewRow,
  .combat-cell-hover-preview--longpress .combatPreviewRow {
    padding: 2px 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .combat-cell-hover-preview .combatPreviewRowMain,
  .combat-cell-hover-preview--longpress .combatPreviewRowMain {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .combat-cell-hover-preview .combatPreviewDmgLine,
  .combat-cell-hover-preview--longpress .combatPreviewDmgLine {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  .combat-cell-hover-preview .combatPreviewHpLine,
  .combat-cell-hover-preview--longpress .combatPreviewHpLine {
    font-size: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .combat-cell-hover-preview .combatInspectResists,
  .combat-cell-hover-preview--longpress .combatInspectResists {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .combat-cell-hover-preview .combatInspectResist,
  .combat-cell-hover-preview--longpress .combatInspectResist {
    font-size: 8px !important;
    padding: 1px 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Preparation Phase: Not Ready (prominent amber pulse to encourage clicking) */
  body.combat-mode .combat-hud-panel #combatHUDPassTurnBtn:not(.is-ready):not(.is-active) {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
    border: 1.5px solid #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
  }

  /* Preparation Phase: Ready state (distinct green) */
  body.combat-mode .combat-hud-panel #combatHUDPassTurnBtn.is-ready {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
    border: 1.5px solid #4ade80 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.6) !important;
  }

  /* Active Turn: Player turn */
  body.combat-mode .combat-hud-panel #combatHUDPassTurnBtn.is-active {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1.5px solid #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.7) !important;
  }

  /* Chat Tab view in Landscape */
  body.combat-mode .combatScene.show-info #chatSection {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: calc(100% - 36px) !important;
    margin-top: 34px !important;
    box-sizing: border-box !important;
  }

  body.combat-mode .combatScene.show-info .combatSceneBoardPanel {
    display: none !important;
  }
}

/* ==========================================================================
   LAPTOPS & SCALED RESOLUTIONS (e.g. MacBook M1 1440x900 viewport)
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1730px) {
  /* Reduce sidebar height and padding to save vertical space on laptops */
  .combatSceneSidebar .combatMonsterList,
  .combatSceneSidebar .combatLog {
    max-height: 100px;
  }
  
  .combatSceneSidebar .combatSection {
    padding: 0 10px 8px;
  }

  .combatActorCard {
    padding: 10px;
    gap: 4px;
  }

  .combatSceneHeader {
    padding: 6px 12px;
    border-radius: 10px;
  }

  .combatSceneHeader p {
    margin-top: 1px;
    font-size: 0.88rem;
  }

  .combatSceneBoardPanel {
    gap: 6px !important;
  }

  .combatPositionBoard {
    padding: 10px;
    gap: 4px;
  }

  /* Compact Horizontal Timeline Bar */
  .combat-timeline-bar {
    height: 52px !important;
    padding: 2px 10px !important;
    gap: 8px !important;
  }

  .combat-timeline-bar .timeline-bar-header {
    gap: 6px !important;
    padding-right: 8px !important;
  }

  .combat-timeline-bar .timeline-bar-collapse-btn {
    min-height: 18px !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
  }

  .combat-timeline-bar .timeline-bar-round #combatTimelineRoundText {
    font-size: 13px !important;
  }

  .combat-timeline-bar .timeline-bar-round .round-icon {
    font-size: 10px !important;
  }

  .combat-timeline-bar .timeline-card {
    width: 36px !important;
    height: 36px !important;
    border-width: 1.5px !important;
  }

  .combat-timeline-bar .timeline-card-avatar .charSprite {
    transform: translate(-50%, -50%) scale(0.25) !important;
  }

  body.isometric-mode .combat-timeline-bar .timeline-card-avatar .monsterEntity,
  .combat-timeline-bar .timeline-card-avatar .monsterEntity {
    transform: none !important;
  }

  body.isometric-mode .combat-timeline-bar .timeline-card-avatar .monsterEntity .monsterSprite,
  .combat-timeline-bar .timeline-card-avatar .monsterEntity .monsterSprite {
    transform: translate(-50%, -50%) scale(0.38) !important;
  }

  body.isometric-mode .combat-timeline-bar .timeline-card-avatar .monsterEntity.is-boss .monsterSprite,
  .combat-timeline-bar .timeline-card-avatar .monsterEntity.is-boss .monsterSprite {
    transform: translate(-50%, -50%) scale(0.26) !important;
  }

  /* Compact HUD Panel */
  .combat-hud-panel {
    padding: 6px 10px !important;
    gap: 10px !important;
  }

  .combat-hud-panel .status-container {
    width: 90px !important;
    height: 60px !important;
  }

  .combat-hud-panel .heart-orb {
    width: 64px !important;
    height: 50px !important;
    border-radius: 25px !important;
    border-width: 2px !important;
  }

  .combat-hud-panel .heart-orb .heart-text {
    font-size: 8.5px !important;
    letter-spacing: -0.2px !important;
  }

  .combat-hud-panel .badges {
    right: -4px !important;
  }

  .combat-hud-panel .badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }

  .combat-hud-panel .combat-spell-zone {
    min-width: 300px !important;
    gap: 2px !important;
  }

  .combat-hud-panel .combat-spell-desc-inline {
    height: 32px !important;
    padding: 2px 8px !important;
  }

  .combat-hud-panel .spell-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    height: 48px !important;
    padding: 2px 4px 6px !important;
    width: 100% !important;
    scrollbar-width: thin !important;
  }

  .combat-hud-panel .spell-bar::-webkit-scrollbar {
    height: 4px !important;
  }

  .combat-hud-panel .spell-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px !important;
  }

  .combat-hud-panel .spell-bar::-webkit-scrollbar-thumb {
    background: rgba(216, 180, 106, 0.3) !important;
    border-radius: 2px !important;
  }

  .combat-hud-panel .spell-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 180, 106, 0.6) !important;
  }

  .combat-hud-panel .spell-slot {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  .combat-hud-panel .spell-slot[class*="vkey-"] .spell-graphic-icon {
    transform: translate(-50%, -50%) scale(0.5) !important;
  }

  .combat-hud-panel .hud-timer-badge {
    font-size: 14px !important;
    height: 28px !important;
    margin-bottom: 2px !important;
  }

  .combat-hud-panel .pass-turn-btn,
  .combat-hud-panel .surrender-btn {
    height: 28px !important;
    font-size: 11px !important;
  }

  /* Tab Bar for Laptop Combat */
  .combat-tab-bar {
    display: none !important;
  }

  /* Responsive Spell Pagination */
  .combat-spell-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    align-items: center !important;
  }
  #combatSpellPagePrevBtn {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #combatSpellBar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  #combatSpellPageNextBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .combat-spell-pages {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    gap: 6px !important;
  }
  .combat-spell-page-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .combat-spell-page-dot {
    width: 28px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
}

/* Masquage global du bouton Envoyer sur tout écran tactile (tablettes, smartphones) en mode paysage */
@media (hover: none) and (orientation: landscape) {
  #chatSendBtn {
    display: none !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #chatSendBtn {
    display: none !important;
  }
}





/* --- END core/responsive.css --- */

/* --- BEGIN ui/pwa-update.css --- */
/* ==========================================================================
   PWA AUTO-UPDATE SYSTEM UI
   Immersive Medieval / RPG Dark Theme
   ========================================================================== */

.pwa-update-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pwa-update-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.pwa-update-card {
  width: min(420px, calc(100vw - 24px));
  border: 1px solid var(--window-border, rgba(216, 180, 106, 0.25));
  background: linear-gradient(180deg, rgba(43, 36, 29, 0.98) 0%, rgba(21, 17, 13, 0.99) 100%);
  border-radius: 16px;
  box-shadow: var(--window-shadow, 0 18px 48px rgba(0, 0, 0, 0.7));
  padding: 28px 24px;
  text-align: center;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pwa-update-modal.show .pwa-update-card {
  transform: scale(1) translateY(0);
}

.pwa-update-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  animation: pwa-float-icon 3s ease-in-out infinite;
}

@keyframes pwa-float-icon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.pwa-update-title {
  color: var(--ui-gold, #d8b46a);
  font-size: 1.6rem;
  margin: 0 0 10px 0;
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(216, 180, 106, 0.3);
  font-weight: 800;
}

.pwa-update-desc {
  color: var(--ui-text, #efe6d2);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 20px 0;
  opacity: 0.9;
  font-family: 'Inter', sans-serif;
}

.pwa-version-badge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.pwa-version-badge {
  background: rgba(139, 107, 63, 0.12);
  border: 1px solid rgba(216, 180, 106, 0.25);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #efe6d2;
  font-family: 'Outfit', sans-serif;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pwa-version-badge.new {
  background: rgba(97, 120, 76, 0.16);
  border-color: rgba(97, 120, 76, 0.45);
  color: #a3c285;
  font-weight: bold;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(97, 120, 76, 0.2);
}

.pwa-update-arrow {
  color: var(--ui-gold, #d8b46a);
  font-weight: bold;
  font-size: 1.1rem;
}

.pwa-update-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-update-btn-install {
  width: 100%;
  min-height: 46px;
  background: linear-gradient(180deg, #d8b46a 0%, #a07a3c 100%) !important;
  border: 1px solid #ffe2aa !important;
  border-radius: 8px !important;
  color: #17110d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pwa-update-btn-install:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffe2aa 0%, #c59b56 100%) !important;
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.pwa-update-btn-install:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

.pwa-update-btn-later {
  width: 100%;
  min-height: 38px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #a7977c !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}

.pwa-update-btn-later:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--ui-text, #efe6d2) !important;
}

/* RPG-themed Progress Bar for PWA Update */
.pwa-progress-container {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(216, 180, 106, 0.3);
  border-radius: 8px;
  height: 20px;
  margin: 15px 0;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  display: none; /* hidden by default */
}

.pwa-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #a07a3c 0%, #d8b46a 50%, #ffe2aa 100%);
  width: 0%;
  transition: width 0.2s ease;
  box-shadow: 0 0 8px rgba(216, 180, 106, 0.5);
}

.pwa-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #efe6d2;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-family: 'Outfit', sans-serif;
}

/* --- END ui/pwa-update.css --- */

/* --- BEGIN ui/trade.css --- */
/* ==========================================================================
   REAL-TIME PLAYER TRADE SYSTEM UI
   ========================================================================== */

/* Context Menu */
.player-context-menu {
  position: absolute;
  background: linear-gradient(180deg, #2a221b 0%, #15110d 100%);
  border: 1px solid var(--ui-gold, #d8b46a);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
  min-width: 170px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.player-context-menu.hidden {
  display: none !important;
}

.context-menu-title {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--ui-gold, #d8b46a);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.2);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.context-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ui-text, #efe6d2) !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  text-align: left !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  border-radius: 4px !important;
  min-height: auto !important;
  box-shadow: none !important;
  display: flex;
  align-items: center !important;
  gap: 8px;
  cursor: pointer;
  width: 100%;
}

.context-btn[style*="display: none"],
.context-btn[style*="display:none"],
.context-btn.hidden {
  display: none !important;
}

.context-btn:hover {
  background: rgba(216, 180, 106, 0.15) !important;
  border-color: rgba(216, 180, 106, 0.3) !important;
  color: #fff !important;
}

.context-btn.secondary {
  color: #a7977c !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
}

/* Trade Modals */
.tradeCard {
  width: min(980px, calc(100vw - 24px)) !important;
  max-height: min(88vh, 820px) !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  pointer-events: auto !important;
  background: var(--window-surface, rgba(14, 18, 27, 0.85)) !important;
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09)) !important;
  border-radius: 14px !important;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative;
}

.tradeHeaderTitleBox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tradeHeaderIcon {
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(216, 180, 106, 0.6));
}

.tradeContent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

@media (max-width: 768px) {
  .tradeContent {
    grid-template-columns: 1fr;
    max-height: 480px;
    overflow-y: auto;
  }
}

.tradePane {
  background: linear-gradient(180deg, rgba(32, 26, 19, 0.92) 0%, rgba(18, 14, 10, 0.96) 100%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.35) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 320px !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.tradePaneHeader {
  color: var(--ui-gold, #ffd700);
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(216, 180, 106, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-shadow: 0 0 8px rgba(216, 180, 106, 0.4);
}

.paneHeaderIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.tradeGrid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  grid-auto-rows: 64px;
  gap: 8px;
  padding: 8px;
  background: rgba(8, 6, 4, 0.65) !important;
  border-radius: 10px !important;
  border: 1.5px dashed rgba(216, 180, 106, 0.25) !important;
  align-content: start;
  min-height: 180px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9) !important;
}

.tradeEmptyNotice {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a7977c;
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
  padding: 30px 10px;
}

.tradeEmptyNotice .emptyIcon {
  font-size: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

/* Trade items slot */
.tradeItem {
  position: relative;
  background: linear-gradient(135deg, rgba(48, 38, 26, 0.95) 0%, rgba(24, 18, 12, 0.95) 100%) !important;
  border: 1.5px solid rgba(216, 180, 106, 0.35) !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.tradeItem:hover {
  background: linear-gradient(135deg, rgba(80, 64, 42, 0.95) 0%, rgba(45, 34, 22, 0.95) 100%) !important;
  border-color: var(--ui-gold, #ffd700) !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

/* Rarity border styles for Trade Items */
.tradeItem.rarity-uncommon {
  border-color: #55efc4 !important;
  box-shadow: inset 0 0 8px rgba(85, 239, 196, 0.2) !important;
}
.tradeItem.rarity-rare {
  border-color: #74b9ff !important;
  box-shadow: inset 0 0 8px rgba(116, 185, 255, 0.2) !important;
}
.tradeItem.rarity-epic {
  border-color: #a29bfe !important;
  box-shadow: inset 0 0 8px rgba(162, 155, 254, 0.25) !important;
}
.tradeItem.rarity-legendary {
  border-color: #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

.tradeItemIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.tradeItemIcon .equipment-css-render,
.tradeItemIcon .resource-icon-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tradeItemQty {
  position: absolute;
  bottom: 3px;
  right: 4px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--ui-gold, #ffd700);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 6;
}

/* Gold Offer Inputs & Display */
.tradeGoldInputContainer,
.tradeGoldDisplayContainer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  border: 1.5px solid rgba(216, 180, 106, 0.35);
  min-height: 38px;
  transition: all 0.2s ease;
}

.tradeGoldInputContainer:focus-within {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.goldCoinIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.goldInput {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffd700;
  font-weight: bold;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  font-family: 'Outfit', sans-serif;
}

.partnerGoldVal {
  color: #ffd700;
  font-weight: bold;
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
}

/* Validation Status Badges */
.tradeValidationState {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Outfit', sans-serif;
  border: 1px solid rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.tradeValidationState.isOK,
.tradePane.validated .tradeValidationState {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: #22c55e !important;
  color: #4ade80 !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3) !important;
}

.tradePane.validated {
  border-color: #22c55e !important;
  box-shadow: inset 0 0 15px rgba(34, 197, 94, 0.2), 0 0 10px rgba(34, 197, 94, 0.2) !important;
}

/* Tabs for Inventory */
.tradeInventoryTabs {
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid rgba(216, 180, 106, 0.2);
  gap: 4px;
}

.tradeTabBtn {
  flex: 1;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer;
  min-height: auto !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
}

.tradeTabBtn.active {
  background: linear-gradient(180deg, rgba(216, 180, 106, 0.3) 0%, rgba(181, 141, 67, 0.2) 100%) !important;
  color: #ffd700 !important;
  border-color: rgba(216, 180, 106, 0.6) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.tradeMyGoldTotal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.88rem;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(216, 180, 106, 0.25);
  font-family: 'Outfit', sans-serif;
}

.tradeMyGoldTotal strong {
  color: #ffd700;
  font-size: 0.95rem;
}

/* Action Area */
.tradeActions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 12px;
  border-top: 1.5px solid rgba(216, 180, 106, 0.2);
}

.tradeActionBtn {
  min-width: 150px;
  padding: 10px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  letter-spacing: 0.03em !important;
  transition: all 0.2s ease !important;
}

.tradeActionBtn.successBtn {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
  border: 1.5px solid #4ade80 !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4) !important;
}

.tradeActionBtn.successBtn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6) !important;
}

.tradeActionBtn.dangerBtn {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid #f87171 !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}

.tradeActionBtn.dangerBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5) !important;
}

/* Item Detail Inspection Card Modal */
.itemDetailModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom Quantity Modal */
.tradeQuantityModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tradeQuantityCard {
  position: relative;
  width: 330px;
  max-width: 90vw;
  background: var(--window-surface, rgba(14, 18, 27, 0.90));
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 20px;
  color: var(--window-text, #f8fafc);
  font-family: 'Outfit', sans-serif;
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tradeQuantityHeader h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ui-gold, #d8b46a);
  text-align: center;
}

.tradeQuantitySub {
  margin: 0 0 10px 0;
  font-size: 0.82rem;
  color: #a7977c;
  text-align: center;
}

.tradeQuantityInputRow {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.tradeQuantityInput {
  width: 90px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 180, 106, 0.4);
  border-radius: 6px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 6px;
  outline: none;
  font-family: 'Outfit', sans-serif;
}

.qtyBtn {
  background: rgba(216, 180, 106, 0.15) !important;
  border: 1px solid rgba(216, 180, 106, 0.3) !important;
  color: var(--ui-gold, #d8b46a) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  cursor: pointer;
}

.qtyBtn:hover {
  background: rgba(216, 180, 106, 0.3) !important;
  color: #fff !important;
}

.tradeQuantityActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.tradeQuantityActions button {
  flex: 1;
}

.itemDetailCard {
  position: relative;
  width: 320px;
  max-width: 90vw;
  background: var(--window-surface, rgba(14, 18, 27, 0.90));
  border: 1px solid var(--window-border, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  box-shadow: var(--window-shadow, 0 10px 30px rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px;
  color: var(--window-text, #f8fafc);
  font-family: 'Outfit', sans-serif;
}

.itemDetailHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 180, 106, 0.2);
}

.itemDetailIcon {
  width: 48px;
  height: 48px;
  background: rgba(216, 180, 106, 0.1);
  border: 1px solid rgba(216, 180, 106, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itemDetailIcon svg, .itemDetailIcon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.itemDetailTitle h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ui-gold, #d8b46a);
  font-weight: 700;
}

.itemDetailLevel {
  font-size: 0.8rem;
  color: #a7977c;
}

.itemDetailClassBadge {
  display: block;
  font-size: 0.72rem;
  color: var(--window-accent, #f59e0b);
  margin-top: 2px;
  font-weight: 600;
}

.itemPreviewCharacterStage {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at 50% 60%, rgba(245, 158, 11, 0.22) 0%, rgba(15, 23, 42, 0.9) 70%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
  flex-shrink: 0;
}

.itemPreviewCharacterStage .charSprite {
  transform: scale(2.0);
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -32px;
}

.itemDetailDescription {
  font-size: 0.85rem;
  color: #ccc;
  font-style: italic;
  margin: 10px 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.itemDetailStatsHeader {
  font-size: 0.82rem;
  font-weight: bold;
  color: #d8b46a;
  margin: 10px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.itemDetailStatsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(216, 180, 106, 0.1);
}

.itemDetailStatRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #fff;
}

.itemDetailStatRow .statIcon {
  display: inline-flex;
  align-items: center;
  width: 18px;
  height: 18px;
}

.itemDetailStatRow .statIcon svg {
  width: 16px;
  height: 16px;
}

.itemDetailNoStats {
  font-size: 0.82rem;
  color: #8a7a65;
  font-style: italic;
  padding: 6px;
}

.itemDetailFooter {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(216, 180, 106, 0.2);
  font-size: 0.85rem;
  color: #a7977c;
  text-align: right;
}

/* --- END ui/trade.css --- */

/* --- BEGIN ui/party.css --- */
/* ==========================================================================
   PARTY / GROUPE SYSTEM FLOATING OVERLAY
   ========================================================================== */

.party-panel-floating {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 999;
  background: rgba(30, 24, 20, 0.95);
  border: 1.5px solid var(--ui-gold, #d8b46a);
  border-radius: 8px;
  width: 230px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.85), inset 0 1px 3px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #efe6d2;
  font-family: 'Outfit', 'Inter', sans-serif;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.party-panel-floating.hidden {
  display: none !important;
}

.party-header {
  background: linear-gradient(180deg, rgba(216, 180, 106, 0.25) 0%, rgba(216, 180, 106, 0.08) 100%);
  border-bottom: 1px solid rgba(216, 180, 106, 0.3);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ui-gold, #d8b46a);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#partyLeaveBtn {
  background: linear-gradient(180deg, rgba(211, 47, 47, 0.3) 0%, rgba(183, 28, 28, 0.4) 100%);
  border: 1px solid rgba(229, 115, 115, 0.5);
  color: #ffcdd2;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

#partyLeaveBtn:hover {
  background: linear-gradient(180deg, rgba(211, 47, 47, 0.5) 0%, rgba(183, 28, 28, 0.6) 100%);
  border-color: rgba(229, 115, 115, 0.8);
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4);
}

.party-members {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.party-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.party-member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-gold, #d8b46a);
  background: #0d0a07;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.party-member-avatar-inner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

.party-member-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.party-member-name {
  font-size: 0.85rem;
  font-weight: bold;
  color: #efe6d2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-member-meta {
  font-size: 0.74rem;
  color: #a7977c;
  margin-top: 1px;
}

.party-member-map-toggle {
  font-size: 0.72rem;
  color: var(--ui-gold, #d8b46a);
  font-weight: 500;
  margin-top: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  user-select: none;
}

.party-member-map-toggle:hover {
  filter: brightness(1.2);
  text-decoration: underline;
}

.party-member-map-toggle.active {
  color: #f1c40f !important;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(241, 196, 15, 0.4);
}

.party-member-actions {
  display: none;
  gap: 6px;
  margin-top: 4px;
}

.party-member-row.expanded .party-member-actions {
  display: flex !important;
}

.party-member-row.clickable-row {
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.party-member-row.clickable-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(216, 180, 106, 0.2);
}

.party-action-btn {
  background: rgba(216, 180, 106, 0.1);
  border: 1px solid rgba(216, 180, 106, 0.3);
  color: #efe6d2;
  border-radius: 4px;
  font-size: 0.65rem;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

.party-action-btn:hover {
  background: rgba(216, 180, 106, 0.25);
  border-color: var(--ui-gold, #d8b46a);
  color: #fff;
}

.party-action-btn.kick {
  background: rgba(211, 47, 47, 0.1);
  border-color: rgba(211, 47, 47, 0.3);
  color: #ffcdd2;
}

.party-action-btn.kick:hover {
  background: rgba(211, 47, 47, 0.3);
  border-color: #e57373;
  color: #fff;
}

/* Custom Context Menu in Chat */
#chatContextMenu {
  animation: contextFadeIn 0.15s ease-out;
}

@keyframes contextFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Collapsible toggle container and state */
.party-header-title-container {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  flex: 1;
}

.party-header-title-container:hover {
  filter: brightness(1.2);
}

#partyCollapseBtn {
  font-size: 0.75rem;
  color: var(--ui-gold, #d8b46a);
  transition: transform 0.2s ease;
}

.party-panel-floating.collapsed .party-members {
  display: none !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .party-panel-floating {
    width: 160px;
    top: 8px;
    left: 8px;
    border-width: 1px;
    border-radius: 6px;
  }

  .party-header {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .party-header-title-container {
    gap: 4px;
  }

  #partyCollapseBtn {
    font-size: 0.65rem;
  }

  #partyLeaveBtn {
    font-size: 0.65rem;
    padding: 1px 4px;
  }

  .party-members {
    padding: 4px;
    gap: 4px;
  }

  .party-member-row {
    padding: 4px 6px;
    gap: 6px;
    border-radius: 4px;
  }

  .party-member-avatar {
    width: 24px;
    height: 24px;
    border-width: 1px;
  }

  .party-member-avatar-inner {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
  }

  .party-member-name {
    font-size: 0.72rem;
  }

  .party-member-meta {
    font-size: 0.62rem;
    margin-top: 0;
  }

  .party-member-map-toggle {
    font-size: 0.6rem;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .party-member-actions {
    gap: 4px;
    margin-top: 2px;
  }

  .party-action-btn {
    font-size: 0.58rem;
    padding: 1px 3px;
    border-radius: 2px;
  }
}

/* --- END ui/party.css --- */