/* Direction visuelle inspirée de Bootswatch Sketchy (Bootstrap, licence MIT). */
@import url("https://fonts.googleapis.com/css2?family=Neucha&family=Open+Sans:wght@400;600;700&display=swap");

:root {
  --ink: #212529;
  --paper: #fff;
  --paper-warm: #fffdf7;
  --line: #212529;
  --primary: #333;
  --primary-hover: #000;
  --red: #b22222;
  --red-soft: #f8dddd;
  --green: #198754;
  --yellow: #ffc107;
  --blue: #0d6efd;
  --muted: #6c757d;
  --shadow: 3px 4px 0 var(--line);
  --soft-shadow: 2px 3px 0 rgba(33, 37, 41, 0.45);
}
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper-warm);
  background-image: radial-gradient(
    rgba(33, 37, 41, 0.11) 0.75px,
    transparent 0.75px
  );
  background-size: 12px 12px;
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.5;
}
a {
  color: var(--ink);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
button,
input,
select {
  font: inherit;
}
button {
  appearance: none;
}
.container {
  width: min(100% - 2rem, 980px);
  margin: 0 auto;
  padding: 2.25rem 0;
}
.card {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 3px 8px 4px 7px;
  box-shadow: var(--shadow);
}
.login-container {
  width: min(100% - 2rem, 440px);
  margin: clamp(2rem, 10vh, 6rem) auto;
}
h1,
h2 {
  margin: 0;
  font-family: Neucha, "Comic Sans MS", cursive;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
h1 {
  margin-bottom: 1.5rem;
  color: var(--red);
  font-size: clamp(2.25rem, 7vw, 4rem);
  text-align: center;
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 0 rgba(178, 34, 34, 0.18);
}
h1::after {
  display: block;
  width: 4.5rem;
  height: 0.22rem;
  margin: 0.55rem auto 0;
  background: var(--red);
  border-radius: 70% 30% 60% 40%;
  content: "";
  transform: rotate(-1deg);
}
h2 {
  margin: 2.25rem 0 1rem;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
}
h2::before {
  color: var(--red);
  content: "✦ ";
}
.muted {
  color: var(--muted);
}
.notice {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 2px solid var(--line);
  border-radius: 2px 6px 3px 5px;
  font-weight: 600;
}
.notice--error {
  background: #f8d7da;
}
.notice--success {
  background: #d1e7dd;
}
.stack {
  display: grid;
  gap: 1rem;
}
.actions,
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}
label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}
input,
select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 2px 5px 3px 6px;
  box-shadow: inset 1px 1px 0 rgba(33, 37, 41, 0.15);
}
input:focus,
select:focus {
  outline: 3px solid rgba(13, 110, 253, 0.4);
  outline-offset: 2px;
}
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.62rem 1rem;
  border: 2px solid var(--line);
  border-radius: 3px 7px 4px 6px;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--soft-shadow);
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background 0.12s;
}
.menu > .button:nth-child(odd) {
  background: var(--red);
}
.menu > .button:nth-child(odd):hover {
  background: #851818;
}
button:hover,
.button:hover {
  background: var(--primary-hover);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 0 1px 0 var(--line);
}
button:active,
.button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.button--secondary {
  color: var(--ink);
  background: #fff;
}
.button--secondary:hover {
  background: #e9ecef;
  color: var(--ink);
}
.button--danger {
  background: var(--red);
}
.score {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0.7rem;
  color: var(--red);
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.45rem;
}
.progress {
  height: 0.75rem;
  overflow: hidden;
  background: #e9ecef;
  border: 2px solid var(--line);
  border-radius: 3px 7px 4px 6px;
}
.progress > span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--red),
    var(--red) 8px,
    #d95050 8px,
    #d95050 16px
  );
}
#quiz {
  text-align: center;
}
#question {
  margin: 1.75rem 0;
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1;
}
#options {
  display: grid;
  gap: 0.8rem;
  max-width: 640px;
  margin: auto;
}
#options button {
  min-height: 3.2rem;
  color: var(--ink);
  background: #fff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}
#options button:hover {
  background: #fff3cd;
}
#feedback {
  min-height: 1.5rem;
  margin: 1.3rem 0;
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.5rem;
}
.feedback--correct {
  color: #0f5132;
}
.feedback--wrong {
  color: #842029;
}
.table-wrap {
  overflow: auto;
  border: 2px solid var(--line);
  border-radius: 3px 8px 4px 7px;
  box-shadow: var(--soft-shadow);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th,
td {
  padding: 0.78rem;
  text-align: left;
  border-bottom: 2px solid var(--line);
}
tr:last-child td {
  border-bottom: 0;
}
th {
  background: #e9ecef;
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.3rem;
  font-weight: 400;
}
.first td {
  background: #fff3cd;
}
.second td {
  background: #e9ecef;
}
.third td {
  background: #f8d7c3;
}
.player-name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.player-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  background: #fff;
}
.player-title-badge--rare {
  background: #eaf3ff;
  color: #0a5db3;
}
.player-title-badge--epic {
  background: #f3e8ff;
  color: #5b21b6;
}
.player-title-badge--legendary {
  background: #fff5d6;
  color: #8a5b00;
}
.player-row--rare td,
.player-title-badge--rare {
  background: #eaf3ff;
}
.player-row--epic td,
.player-title-badge--epic {
  background: #f3e8ff;
}
.player-row--legendary td,
.player-title-badge--legendary {
  background: #fff5d6;
}

/* ============================================================
   TITRES DU CLASSEMENT — COMPATIBLE HSK.PHP ACTUEL
   Aucun changement HTML/PHP nécessaire.
   Le titre se trouve dans td:nth-child(3)
   ============================================================ */


/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

#rankingBody td:nth-child(3) {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-width: 125px;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease,
        background .25s ease;

    background-clip: padding-box;
}

#rankingBody tr:hover td:nth-child(3) {
    transform: translateY(-1px);
}


/* ============================================================
   COMMUNS
   Sobres, aspect papier / manuscrit.
   ============================================================ */

.player-row--petit_mandarin td:nth-child(3) {
    color: #704214;
    background:
        repeating-linear-gradient(
            -3deg,
            #fffdf4 0,
            #fffdf4 6px,
            #f4ead4 7px
        );
    border: 1px dashed #9b7b52;
    font-weight: 600;
}

.player-row--apprenti td:nth-child(3) {
    color: #4b5563;
    background: #fafafa;
    border: 1px dashed #6b7280;
    transform: rotate(-.25deg);
}

.player-row--jeune_scribe td:nth-child(3) {
    color: #443b31;
    background:
        linear-gradient(
            177deg,
            #fffef9,
            #eee4cf
        );
    border: 1px solid #8b7355;
    font-style: italic;
}

.player-row--ami_des_caracteres td:nth-child(3) {
    color: #5d4936;
    background: #faf6ed;
    border-bottom: 2px dotted #9a8268;
}

.player-row--eleve_assidu td:nth-child(3) {
    color: #315642;
    background:
        linear-gradient(
            90deg,
            rgba(70, 120, 80, .10),
            transparent
        );
    border-bottom: 3px solid #4f765b;
}

.player-row--voyageur td:nth-child(3) {
    color: #604a32;
    background:
        linear-gradient(
            145deg,
            #faf7ed,
            #ede5d2
        );
    border: 1px dashed #8c7556;
    transform: rotate(.2deg);
}

.player-row--apprenti_calligraphe td:nth-child(3) {
    color: #222;
    background: #fdfcf8;
    border: 3px double #333;
    font-family: Georgia, serif;
}

.player-row--lecteur_curieux td:nth-child(3) {
    color: #55465e;
    background:
        linear-gradient(
            90deg,
            rgba(118, 85, 140, .10),
            transparent
        );
    border-left: 3px solid #76617e;
}

.player-row--disciple td:nth-child(3) {
    color: #604d34;
    background: #faf6ea;
    border: 1px solid #a58e6b;
}

.player-row--etudiant_du_pinceau td:nth-child(3) {
    color: #1f1f1f;
    background:
        linear-gradient(
            175deg,
            white,
            #f2efe7
        );
    border-bottom: 3px solid #222;
    font-family: Georgia, serif;
}


/* ============================================================
   RARES
   Couleur marquée + symbole déjà présent dans le texte.
   ============================================================ */

.player-row--sage_bambou td:nth-child(3) {
    color: #166534;
    background:
        linear-gradient(
            115deg,
            rgba(134, 239, 172, .35),
            rgba(255,255,255,.9)
        );
    border: 2px solid #4d8a5d;
    box-shadow: inset 3px 0 0 #86b879;
}

.player-row--gardien_lanterne td:nth-child(3) {
    color: #991b1b;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(251,146,60,.35),
            transparent 38%
        ),
        #fff8ee;
    border: 2px solid #dc2626;
    box-shadow: 0 0 8px rgba(249,115,22,.15);
}

.player-row--disciple_lotus td:nth-child(3) {
    color: #9d174d;
    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(244,114,182,.24),
            transparent 55%
        ),
        #fff;
    border: 2px solid #db6fa8;
}

.player-row--maitre_tons td:nth-child(3) {
    color: #4338ca;
    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.16),
            rgba(168,85,247,.12)
        );
    border: 2px solid #6366f1;
    letter-spacing: .02em;
}

.player-row--voyageur_encre td:nth-child(3) {
    color: #111827;
    background:
        radial-gradient(
            ellipse at 8% 50%,
            rgba(15,23,42,.27),
            transparent 47%
        ),
        #fafafa;
    border: 2px solid #374151;
}

.player-row--gardien_pagode td:nth-child(3) {
    color: #7c2d12;
    background:
        linear-gradient(
            135deg,
            rgba(194,65,12,.15),
            rgba(250,204,21,.10)
        );
    border: 2px solid #9a3412;
}

.player-row--scribe_bambou td:nth-child(3) {
    color: #28623c;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(74,130,77,.12) 0,
            rgba(74,130,77,.12) 3px,
            transparent 3px,
            transparent 13px
        ),
        white;
    border: 2px dashed #558b5e;
}

.player-row--ami_du_panda td:nth-child(3) {
    color: #111;
    background:
        linear-gradient(
            110deg,
            #fff 0 45%,
            #e5e7eb 46% 53%,
            #fff 54%
        );
    border: 2px solid #343434;
}

.player-row--enfant_lanterne td:nth-child(3) {
    color: #b91c1c;
    background:
        radial-gradient(
            circle,
            rgba(251,191,36,.22),
            transparent 60%
        ),
        #fff7ed;
    border: 2px solid #ef4444;
}

.player-row--marcheur_montagnes td:nth-child(3) {
    color: #334155;
    background:
        linear-gradient(
            155deg,
            rgba(71,85,105,.25) 0 28%,
            transparent 29%
        ),
        linear-gradient(
            205deg,
            rgba(148,163,184,.2) 0 32%,
            transparent 33%
        ),
        #fafafa;
    border: 2px solid #64748b;
}

.player-row--gardien_encre td:nth-child(3) {
    color: #171717;
    background:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(0,0,0,.2),
            transparent 42%
        ),
        white;
    border-width: 3px 1px 2px 3px;
    border-style: solid;
    border-color: #262626;
}

.player-row--scribe_lune td:nth-child(3) {
    color: #3730a3;
    background:
        radial-gradient(
            circle at 15% 28%,
            rgba(199,210,254,.9),
            transparent 23%
        ),
        linear-gradient(
            100deg,
            #eef2ff,
            white
        );
    border: 2px solid #6366f1;
}


/* ============================================================
   ÉPIQUES
   Effets animés légers.
   ============================================================ */

.player-row--lotus_dore td:nth-child(3) {
    color: #854d0e;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(250,204,21,.45),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #fff8cc,
            #fff,
            #fef3c7
        );
    border: 2px solid #ca8a04;
    box-shadow:
        0 0 6px rgba(250,204,21,.25);

    animation: lotusGold 3s ease-in-out infinite;
}

@keyframes lotusGold {
    50% {
        box-shadow:
            0 0 14px rgba(250,204,21,.50);
        filter: brightness(1.07);
    }
}


.player-row--sage_lotus td:nth-child(3) {
    color: #86198f;
    background:
        linear-gradient(
            110deg,
            rgba(236,72,153,.17),
            white,
            rgba(192,132,252,.18)
        );
    background-size: 200% 100%;
    border: 2px solid #c026d3;

    animation: lotusFlow 5s ease infinite;
}

@keyframes lotusFlow {
    50% {
        background-position: 100% center;
    }
}


.player-row--esprit_bambou td:nth-child(3) {
    color: #14532d;
    background:
        linear-gradient(
            90deg,
            rgba(132,204,22,.23),
            rgba(255,255,255,.9)
        );
    border: 2px solid #3f7b48;

    animation: bambooSway 4s ease-in-out infinite;
}

@keyframes bambooSway {
    50% {
        transform: translateY(-1px) rotate(.25deg);
    }
}


.player-row--maitre_lanterne td:nth-child(3) {
    color: #991b1b;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(251,191,36,.35),
            rgba(239,68,68,.12),
            white
        );
    border: 2px solid #dc2626;

    animation: lanternPulse 2.2s ease-in-out infinite;
}

@keyframes lanternPulse {
    50% {
        box-shadow:
            0 0 16px rgba(245,158,11,.48);
        filter: saturate(1.15);
    }
}


.player-row--scribe_celeste td:nth-child(3) {
    color: #1d4ed8;
    background:
        linear-gradient(
            120deg,
            #e0f2fe,
            #eef2ff,
            white,
            #dbeafe
        );
    background-size: 240%;
    border: 2px solid #60a5fa;

    animation: celestialShift 6s ease infinite;
}

@keyframes celestialShift {
    50% {
        background-position: 100%;
    }
}


.player-row--sage_montagnes td:nth-child(3) {
    color: #334155;

    background:
        linear-gradient(
            155deg,
            rgba(51,65,85,.30) 0 27%,
            transparent 28%
        ),
        linear-gradient(
            205deg,
            rgba(100,116,139,.20) 0 35%,
            transparent 36%
        ),
        linear-gradient(
            #f8fafc,
            #e2e8f0
        );

    border: 2px solid #64748b;
}


.player-row--maitre_calligraphe td:nth-child(3) {
    color: #111;

    background:
        radial-gradient(
            ellipse at 10% 60%,
            rgba(0,0,0,.22),
            transparent 40%
        ),
        #fafaf9;

    border-width: 4px 1px 2px 3px;
    border-style: solid;
    border-color: #222;

    font-family: Georgia, serif;

    animation: inkBreath 4s ease infinite;
}

@keyframes inkBreath {
    50% {
        box-shadow:
            4px 3px 0 rgba(0,0,0,.13);
    }
}


.player-row--esprit_lotus td:nth-child(3) {
    color: #be185d;

    background:
        radial-gradient(
            circle,
            rgba(244,114,182,.25),
            transparent 65%
        ),
        white;

    border: 2px solid #e879f9;

    animation: lotusFloat 3.4s ease-in-out infinite;
}

@keyframes lotusFloat {
    50% {
        transform: translateY(-2px);
    }
}


.player-row--sage_celeste td:nth-child(3) {
    color: #075985;

    background:
        linear-gradient(
            105deg,
            #e0f2fe,
            #fff,
            #eef2ff
        );

    background-size: 180%;
    border: 2px solid #38bdf8;

    animation: skyMove 5s ease-in-out infinite;
}

@keyframes skyMove {
    50% {
        background-position: 100%;
    }
}


.player-row--maitre_du_pinceau td:nth-child(3) {
    color: #292524;

    background:
        linear-gradient(
            165deg,
            transparent 0 16%,
            rgba(41,37,36,.12) 17% 23%,
            transparent 24%
        ),
        white;

    border: 3px double #57534e;
}


.player-row--gardien_du_temple td:nth-child(3) {
    color: #7f1d1d;

    background:
        linear-gradient(
            110deg,
            rgba(185,28,28,.15),
            rgba(202,138,4,.13),
            white
        );

    border: 3px solid #991b1b;

    box-shadow:
        inset 0 -3px rgba(202,138,4,.18);
}


.player-row--esprit_du_vent td:nth-child(3) {
    color: #0f766e;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(103,232,249,.35),
            transparent,
            rgba(45,212,191,.22),
            transparent
        );

    background-size: 250%;
    border: 2px solid #14b8a6;

    animation: windMove 3s linear infinite;
}

@keyframes windMove {
    to {
        background-position: 250% center;
    }
}


.player-row--sage_des_brumes td:nth-child(3) {
    color: #475569;

    background:
        linear-gradient(
            90deg,
            rgba(203,213,225,.45),
            white,
            rgba(148,163,184,.32),
            white
        );

    background-size: 230%;
    border: 2px solid #94a3b8;

    animation: mistDrift 7s ease-in-out infinite;
}

@keyframes mistDrift {
    50% {
        background-position: 100%;
    }
}


.player-row--sage_du_ciel td:nth-child(3) {
    color: #1e40af;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(186,230,253,.75),
            transparent 45%
        ),
        white;

    border: 2px solid #60a5fa;

    box-shadow:
        0 0 12px rgba(125,211,252,.30);
}


.player-row--maitre_des_mille_caracteres td:nth-child(3) {
    color: #701a75;

    background:
        linear-gradient(
            115deg,
            rgba(126,34,206,.18),
            white,
            rgba(219,39,119,.16),
            white
        );

    background-size: 240% 100%;

    border: 2px solid #9333ea;

    box-shadow:
        0 0 10px rgba(147,51,234,.15);

    animation: thousandFlow 6s ease-in-out infinite;
}

@keyframes thousandFlow {
    0%, 100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}



/* ============================================================
   LÉGENDAIRES
   Ici on lâche davantage les effets.
   ============================================================ */


/* 🐉 MAÎTRE DRAGON */

.player-row--maitre_dragon td:nth-child(3) {
    color: #7c2d12;

    font-weight: 800;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(249,115,22,.45),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            #fff7cc,
            #fff,
            #fde68a,
            #fff
        );

    background-size: 260%;

    border: 2px solid #d97706;

    text-shadow:
        0 0 5px rgba(250,204,21,.35);

    animation:
        dragonFire 5s ease-in-out infinite,
        legendaryShimmer 6s linear infinite;
}

@keyframes dragonFire {
    0%,100% {
        box-shadow:
            0 0 8px rgba(245,158,11,.35),
            0 0 18px rgba(234,88,12,.10);
    }

    50% {
        box-shadow:
            0 0 14px rgba(250,204,21,.65),
            0 0 28px rgba(234,88,12,.30);
    }
}


/* 🐉 DRAGON IMPÉRIAL */

.player-row--dragon_imperial td:nth-child(3) {
    color: white;

    font-weight: 800;

    background:
        linear-gradient(
            115deg,
            #3b0764,
            #701a75,
            #ca8a04,
            #fde047,
            #701a75,
            #3b0764
        );

    background-size: 350%;

    border: 2px solid #facc15;

    text-shadow:
        0 1px 2px #3b0764,
        0 0 6px rgba(255,255,255,.25);

    box-shadow:
        0 0 10px rgba(250,204,21,.35);

    animation:
        imperialFlow 6s linear infinite;
}

@keyframes imperialFlow {
    to {
        background-position: 350%;
    }
}


/* 🐲 DRAGON DE JADE */

.player-row--dragon_de_jade td:nth-child(3) {
    color: #064e3b;

    font-weight: 800;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(209,250,229,.9),
            transparent 18%
        ),
        linear-gradient(
            130deg,
            #ecfdf5,
            #6ee7b7,
            #d1fae5,
            #fff,
            #34d399
        );

    background-size: 300%;

    border: 2px solid #047857;

    animation:
        jadeMove 6s ease infinite,
        jadePulse 3s ease-in-out infinite;
}

@keyframes jadeMove {
    50% {
        background-position: 100%;
    }
}

@keyframes jadePulse {
    50% {
        box-shadow:
            0 0 20px rgba(52,211,153,.55);

        filter:
            brightness(1.08)
            saturate(1.17);
    }
}


/* 🐉 DRAGON ÉCARLATE */

.player-row--dragon_ecarlate td:nth-child(3) {
    color: #fff;

    font-weight: 800;

    background:
        linear-gradient(
            110deg,
            #450a0a,
            #991b1b,
            #ef4444,
            #f97316,
            #facc15,
            #991b1b,
            #450a0a
        );

    background-size: 400%;

    border: 2px solid #ef4444;

    text-shadow:
        0 1px 3px #450a0a;

    box-shadow:
        0 0 15px rgba(239,68,68,.35);

    animation:
        scarletFire 4s linear infinite,
        firePulse 2.5s ease-in-out infinite;
}

@keyframes scarletFire {
    to {
        background-position: 400%;
    }
}

@keyframes firePulse {
    50% {
        box-shadow:
            0 0 24px rgba(249,115,22,.6);
    }
}


/* ☯️ SAGE ÉTERNEL */

.player-row--sage_eternel td:nth-child(3) {
    color: #312e81;

    font-weight: 800;

    background:
        radial-gradient(
            circle,
            white,
            rgba(221,214,254,.8),
            rgba(196,181,253,.45)
        );

    border: 2px solid #7c3aed;

    box-shadow:
        0 0 15px rgba(124,58,237,.28);

    animation:
        eternalAura 6s ease-in-out infinite;
}

@keyframes eternalAura {
    0%,100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter:
            hue-rotate(28deg)
            brightness(1.08);
    }
}


/* 🐉 MAÎTRE DU DRAGON CÉLESTE */

.player-row--maitre_du_dragon_celeste td:nth-child(3) {
    color: white;

    font-weight: 800;

    background:
        linear-gradient(
            115deg,
            #082f49,
            #075985,
            #0284c7,
            #38bdf8,
            #e0f2fe,
            #0369a1
        );

    background-size: 400%;

    border: 2px solid #7dd3fc;

    text-shadow:
        0 1px 3px #082f49,
        0 0 5px rgba(255,255,255,.45);

    animation:
        celestialDragon 6s ease infinite;
}

@keyframes celestialDragon {
    50% {
        background-position: 100%;

        box-shadow:
            0 0 25px rgba(56,189,248,.60);
    }
}


/* 👑 LÉGENDE DU ROYAUME */

.player-row--legende_du_royaume td:nth-child(3) {
    color: white;

    font-weight: 900;

    background:
        linear-gradient(
            110deg,
            #713f12,
            #a16207,
            #eab308,
            #fef08a,
            #ca8a04,
            #713f12
        );

    background-size: 350%;

    border: 2px solid #fde047;

    text-shadow:
        0 1px 2px #713f12;

    animation:
        royalGold 5s linear infinite;
}

@keyframes royalGold {
    to {
        background-position: 350%;
    }
}


/* 🖌️ IMMORTEL DU PINCEAU */

.player-row--immortel_du_pinceau td:nth-child(3) {
    color: #111;

    font-weight: 800;

    font-family: Georgia, serif;

    background:
        radial-gradient(
            ellipse at 12% 50%,
            rgba(0,0,0,.38),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 75% 10%,
            rgba(0,0,0,.12),
            transparent 25%
        ),
        #fafaf9;

    border-width: 4px 1px 2px 4px;
    border-style: solid;
    border-color: #171717;

    animation:
        immortalInk 4s ease-in-out infinite;
}

@keyframes immortalInk {
    50% {
        box-shadow:
            5px 4px 0 rgba(0,0,0,.17),
            0 0 18px rgba(0,0,0,.15);

        filter: contrast(1.08);
    }
}


/* 🐉 DRAGON DES NEUF CIEUX */

.player-row--dragon_des_neuf_cieux td:nth-child(3) {
    color: white;

    font-weight: 900;

    background:
        linear-gradient(
            120deg,
            #172554,
            #1e40af,
            #0284c7,
            #22d3ee,
            #a855f7,
            #e879f9,
            #172554
        );

    background-size: 500%;

    border: 2px solid #7dd3fc;

    text-shadow:
        0 1px 3px #0f172a;

    box-shadow:
        0 0 18px rgba(56,189,248,.35);

    animation:
        nineHeavens 8s linear infinite;
}

@keyframes nineHeavens {
    to {
        background-position: 500%;
    }
}


/* 📜 SAGE DES DIX MILLE MOTS */

.player-row--sage_des_dix_mille_mots td:nth-child(3) {
    color: #78350f;

    font-weight: 800;

    font-family: Georgia, serif;

    background:
        repeating-linear-gradient(
            0deg,
            #fff9e8 0,
            #fff9e8 5px,
            #f4dfad 6px
        );

    border: 3px double #a16207;

    box-shadow:
        inset 7px 0 12px rgba(120,53,15,.10),
        0 0 14px rgba(161,98,7,.20);

    animation:
        ancientScroll 4s ease-in-out infinite;
}

@keyframes ancientScroll {
    50% {
        transform:
            translateY(-1px)
            rotate(.15deg);
    }
}


/* 🐉 LÉGENDE DU DRAGON
   Ultime : volontairement le plus spectaculaire.
   */

.player-row--legende_du_dragon td:nth-child(3) {
    color: white;

    font-weight: 900;

    background:
        linear-gradient(
            115deg,
            #450a0a,
            #7f1d1d,
            #dc2626,
            #f97316,
            #facc15,
            #fff7ae,
            #f97316,
            #dc2626,
            #450a0a
        );

    background-size: 600%;

    border: 2px solid #fde047;

    text-shadow:
        0 1px 2px #450a0a,
        0 0 6px rgba(255,255,255,.55);

    box-shadow:
        0 0 7px rgba(250,204,21,.7),
        0 0 18px rgba(249,115,22,.5),
        0 0 32px rgba(239,68,68,.25);

    animation:
        ultimateDragon 6s linear infinite,
        ultimateDragonPulse 2.4s ease-in-out infinite;
}

.player-row--legende_du_dragon td:nth-child(3)::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -60%;

    width: 35%;
    height: 260%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9),
            transparent
        );

    transform: rotate(20deg);

    pointer-events: none;

    animation:
        dragonShine 4.5s ease-in-out infinite;
}

@keyframes ultimateDragon {
    to {
        background-position: 600%;
    }
}

@keyframes ultimateDragonPulse {
    50% {
        box-shadow:
            0 0 11px rgba(254,240,138,.9),
            0 0 26px rgba(249,115,22,.75),
            0 0 45px rgba(239,68,68,.38);

        filter:
            brightness(1.10)
            saturate(1.12);
    }
}

@keyframes dragonShine {
    0%, 62% {
        left: -60%;
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    88% {
        left: 140%;
        opacity: 0;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}


/* ============================================================
   REFLET COMMUN AUX LÉGENDAIRES
   On doit les cibler une par une car ton HTML ne contient
   pas player-row--legendary.
   ============================================================ */

.player-row--maitre_dragon td:nth-child(3)::after,
.player-row--dragon_imperial td:nth-child(3)::after,
.player-row--dragon_de_jade td:nth-child(3)::after,
.player-row--dragon_ecarlate td:nth-child(3)::after,
.player-row--sage_eternel td:nth-child(3)::after,
.player-row--maitre_du_dragon_celeste td:nth-child(3)::after,
.player-row--legende_du_royaume td:nth-child(3)::after,
.player-row--immortel_du_pinceau td:nth-child(3)::after,
.player-row--dragon_des_neuf_cieux td:nth-child(3)::after,
.player-row--sage_des_dix_mille_mots td:nth-child(3)::after {
    content: "";

    position: absolute;

    top: -90%;
    left: -60%;

    width: 28%;
    height: 280%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.62),
            transparent
        );

    transform: rotate(20deg);

    pointer-events: none;

    animation:
        legendaryShine 6s ease-in-out infinite;
}

@keyframes legendaryShine {
    0%, 68% {
        left: -60%;
        opacity: 0;
    }

    73% {
        opacity: .75;
    }

    90% {
        left: 140%;
        opacity: 0;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}


/* ============================================================
   FACULTATIF : petite influence du titre sur le reste de la ligne
   Très légère pour conserver la lisibilité.
   ============================================================ */

.player-row--maitre_dragon td:not(:nth-child(3)),
.player-row--dragon_imperial td:not(:nth-child(3)),
.player-row--legende_du_royaume td:not(:nth-child(3)),
.player-row--legende_du_dragon td:not(:nth-child(3)) {
    background-image:
        linear-gradient(
            90deg,
            rgba(250,204,21,.035),
            transparent
        );
}

.player-row--dragon_de_jade td:not(:nth-child(3)) {
    background-image:
        linear-gradient(
            90deg,
            rgba(16,185,129,.04),
            transparent
        );
}

.player-row--dragon_ecarlate td:not(:nth-child(3)) {
    background-image:
        linear-gradient(
            90deg,
            rgba(239,68,68,.04),
            transparent
        );
}

.player-row--dragon_des_neuf_cieux td:not(:nth-child(3)),
.player-row--maitre_du_dragon_celeste td:not(:nth-child(3)) {
    background-image:
        linear-gradient(
            90deg,
            rgba(14,165,233,.04),
            transparent
        );
}


/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    #rankingBody td:nth-child(3),
    #rankingBody td:nth-child(3)::before,
    #rankingBody td:nth-child(3)::after {
        animation: none !important;
        transition: none !important;
    }
}
.dictionary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 1rem;
}
.word {
  padding: 1rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 3px 8px 4px 7px;
  box-shadow: var(--soft-shadow);
  text-align: center;
  transition: transform 0.12s;
}
.word:nth-child(5n + 1) {
  border-color: var(--red);
}
.word:hover {
  transform: rotate(-0.8deg) translateY(-2px);
}
.word strong {
  color: var(--red);
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 2.2rem;
  font-weight: 400;
}
.word small {
  color: var(--muted);
}
footer {
  padding: 1.5rem;
  color: var(--muted);
  text-align: center;
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.2rem;
}
footer::before {
  color: var(--red);
  content: "●  ";
}
.yoda-page {
  text-align: center;
}
.yoda-page img {
  width: min(100%, 300px);
  height: auto;
  filter: drop-shadow(4px 5px 0 rgba(33, 37, 41, 0.5));
}
@media (max-width: 600px) {
  .container {
    width: min(100% - 1.25rem, 980px);
    padding: 1.25rem 0;
  }
  .card {
    padding: 1.25rem;
  }
  .menu > .button {
    flex: 1 1 40%;
  }
  th,
  td {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  .dictionary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
.stats-grid,
.title-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.stats-grid > div,
.title-card,
.route-step {
  padding: 1rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 3px 8px 4px 7px;
  box-shadow: var(--soft-shadow);
}
.stats-grid strong,
.stats-grid span,
.title-card strong,
.title-card small {
  display: block;
  text-align: center;
}
.stats-grid strong,
.title-card strong {
  color: var(--red);
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.55rem;
  font-weight: 400;
}
.equipped-title {
  margin: -0.8rem 0 1.25rem;
  color: var(--red);
  text-align: center;
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.5rem;
}
.title-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.title-card small {
  color: var(--muted);
}
.title-card--rare {
  border-color: #0d6efd;
}
.title-card--epic {
  border-color: #6f42c1;
}
.title-card--legendary {
  border-color: #d97706;
  background: #fff8df;
}
.route {
  display: grid;
  gap: 1rem;
  max-width: 620px;
  margin: auto;
}
.route-step {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 1rem;
}
.route-step > strong {
  color: var(--red);
  font-family: Neucha, "Comic Sans MS", cursive;
  font-size: 1.5rem;
}
.route-step > em {
  color: var(--muted);
}
.route-step--available {
  border-color: var(--green);
  background: #effcf3;
}
.route-step--claimed {
  opacity: 0.68;
  background: #e9ecef;
}
.route-step--locked {
  opacity: 0.7;
}
@media (max-width: 600px) {
  .route-step {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .route-step button {
    width: 100%;
  }
}