/* ================= TOKENS ================= */
:root{
  --void:#0A0C16; --abyss:#0C0F1C; --panel:#151A2C; --panel-2:#1C2238;
  --line:rgba(143,180,217,.14); --line-strong:rgba(143,180,217,.30);
  --ink:#EAF0FA; --muted:#96A2BE; --muted-2:#727E99;
  --silver:#8FB4D9; --silver-glow:#6FA8DC; --gold:#F0C24B;
  --r-white:#F3F5FA; --r-yellow:#E8C15A; --r-purple:#9B6BE6;
  --r-black:#3A3F5C; --r-red:#E2483D; --r-gold:#F0C24B;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--void);color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Shippori Mincho B1",serif;font-weight:800;line-height:1.15;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);font-weight:700;margin:0 0 10px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none}
.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(130px);opacity:.45}
.aura::before{width:620px;height:620px;top:-190px;left:-130px;background:radial-gradient(circle,rgba(111,168,220,.35),transparent 70%)}
.aura::after{width:520px;height:520px;top:100px;right:-150px;background:radial-gradient(circle,rgba(240,194,75,.15),transparent 70%)}

/* ================= HEADER ================= */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(10,12,22,.86);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:1.15rem;white-space:nowrap}
.brand .ring{width:22px;height:22px;border-radius:50%;flex:none;
  background:conic-gradient(var(--r-white),var(--r-yellow),var(--r-purple),var(--r-black),var(--r-red),var(--r-gold),var(--r-white));
  box-shadow:0 0 14px rgba(240,194,75,.5)}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{padding:9px 13px;border-radius:9px;color:var(--muted);font-weight:500;font-size:.92rem;transition:.18s}
.menu a:hover{color:var(--ink);background:var(--panel)}
.menu a.dc{color:var(--gold)}
.burger{display:none;margin-left:auto;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 12px;cursor:pointer}
/* --- Dropdown Donghua --- */
.menu .dropdown{position:relative}
.menu .ddtoggle{padding:9px 13px;border-radius:9px;color:var(--muted);font-weight:600;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.menu .ddtoggle:hover,.menu .dropdown:focus-within .ddtoggle{color:var(--gold);background:var(--panel)}
.menu .dropdown-menu{position:absolute;top:100%;margin-top:10px;right:0;min-width:250px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;padding:8px;display:none;flex-direction:column;gap:2px;box-shadow:0 24px 48px -14px rgba(0,0,0,.7);z-index:70}
/* pont invisible : couvre l'espace bouton↔panneau pour que le survol ne se coupe pas */
.menu .dropdown-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.menu .dropdown:hover .dropdown-menu,.menu .dropdown:focus-within .dropdown-menu{display:flex}
.menu .dropdown-menu a{padding:9px 12px;border-radius:8px;font-size:.88rem;color:var(--muted);white-space:nowrap;font-weight:500}
.menu .dropdown-menu a:hover{color:var(--ink);background:var(--panel-2)}
.menu .dropdown-menu a .h{color:var(--gold);font-weight:700}
.menu .dropdown-menu a .love{color:var(--r-red)}
/* --- Boîte SEO --- */
.seo-box summary{color:var(--muted)}
.seo-box p{font-size:.8rem;color:var(--muted-2);line-height:1.9;word-spacing:1px}

/* ================= HERO ================= */
.hero{padding:72px 0 46px}
.tag{display:inline-block;font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--gold);
  border:1px solid rgba(240,194,75,.35);border-radius:20px;padding:6px 14px;margin-bottom:20px}
.hero h1{font-size:clamp(2.2rem,5.6vw,4rem);letter-spacing:-.5px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--silver)}
.lead{color:var(--muted);font-size:1.1rem;max-width:60ch;margin:20px 0 28px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:700;font-size:.96rem;
  padding:13px 21px;border-radius:11px;border:1px solid transparent;transition:.2s;cursor:pointer}
.btn-gold{background:linear-gradient(135deg,var(--gold),#E0A82E);color:#1A1405;box-shadow:0 10px 30px -10px rgba(240,194,75,.55)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--panel);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--silver);color:var(--silver)}
.hero-stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.stat b{font-family:"Space Mono",monospace;font-size:1.65rem;display:block;line-height:1.1}
.stat span{font-size:.78rem;color:var(--muted)}

/* ================= SECTIONS ================= */
section{padding:60px 0;scroll-margin-top:80px}
.sec-head{margin-bottom:30px}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.15rem)}
.sec-head p{color:var(--muted);max-width:65ch;margin:10px 0 0;font-size:.96rem}
.divider{height:1px;background:var(--line)}

/* --- Anneaux (signature) --- */
.rings{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--abyss),transparent)}
.ring-track{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:8px}
.ring-item{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 10px;text-align:center;transition:.25s}
.ring-item:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 0 26px -6px var(--gc)}
.ring-dot{width:44px;height:44px;border-radius:50%;margin:0 auto 11px;position:relative;background:var(--gc)}
.ring-dot::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--void)}
.ring-item h3{font-size:.98rem;font-family:"Zen Kaku Gothic New";font-weight:700}
.ring-item span{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--muted)}
.warn{margin-top:24px;background:rgba(226,72,61,.08);border:1px solid rgba(226,72,61,.3);border-radius:12px;padding:16px 18px;font-size:.92rem;color:var(--ink)}
.warn b{color:var(--r-red)}
/* --- Alerte anti-spam (jaune brillant) --- */
.alert-spam{margin:2px 0 16px;background:linear-gradient(180deg,rgba(255,221,51,.16),rgba(255,221,51,.07));
  border:1px solid rgba(255,221,51,.6);border-radius:11px;padding:13px 18px;text-align:center;
  color:#FFDD33;font-weight:800;font-size:.94rem;letter-spacing:.2px;
  text-shadow:0 0 14px rgba(255,221,51,.55);box-shadow:0 0 26px -8px rgba(255,221,51,.5)}
.alert-spam b{color:#FFE879}
/* rangs */
.ranks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:26px}
.rank{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:.9rem}
.rank b{font-family:"Space Mono",monospace;color:var(--gold);font-size:.85rem;flex:none}

/* --- Épisodes --- */
.browser{background:var(--abyss);border:1px solid var(--line);border-radius:18px;padding:22px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.filters input,.filters select{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:.92rem;padding:11px 14px;border-radius:10px;outline:none}
.filters input{flex:1;min-width:220px}
.filters input:focus,.filters select:focus{border-color:var(--silver)}
.count{color:var(--muted);font-size:.84rem;font-family:"Space Mono",monospace;margin-left:auto}
.ep-list{display:flex;flex-direction:column;gap:6px;max-height:460px;overflow-y:auto;padding-right:6px}
.ep{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;transition:.15s}
.ep:hover{border-color:var(--silver);background:var(--panel-2)}
.ep.fin{border-color:rgba(240,194,75,.4)}
.ep .num{font-family:"Space Mono",monospace;font-weight:700;color:var(--silver);font-size:.88rem}
.ep .t{font-size:.92rem}
.ep .t small{display:block;color:var(--muted-2);font-size:.75rem;font-family:"Space Mono",monospace}
.ep .play{color:var(--gold);font-weight:700;font-size:.84rem;white-space:nowrap}
.ep-list::-webkit-scrollbar{width:8px}
.ep-list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.season-head{grid-column:1/-1;font-family:"Space Mono",monospace;font-size:.75rem;letter-spacing:.14em;
  color:var(--gold);text-transform:uppercase;padding:14px 2px 4px;border:0;background:none}

/* --- Note numérotation --- */
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--silver);
  border-radius:12px;padding:20px 22px;margin-top:20px}
.note h3{font-size:1.05rem;font-family:"Zen Kaku Gothic New";font-weight:700;margin-bottom:8px}
.note p,.note li{color:var(--muted);font-size:.92rem}
.note code{font-family:"Space Mono",monospace;color:var(--gold);background:var(--void);padding:2px 7px;border-radius:5px;font-size:.85rem}
.note ol{margin:8px 0 0;padding-left:20px}

/* --- Grilles séries / armes --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;transition:.22s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.card h3{font-size:1.02rem;font-family:"Zen Kaku Gothic New";font-weight:700;margin-bottom:5px}
.card p{color:var(--muted);font-size:.82rem;margin:0}
.card .badge{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.08em;color:var(--gold);display:block;margin-bottom:9px}
.card .badge.sil{color:var(--silver)}

.weapons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.weapon{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px;text-align:center;transition:.22s}
.weapon:hover{border-color:var(--gold);transform:translateY(-4px)}
.weapon img{height:74px;width:auto;margin:0 auto 12px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.weapon span{font-size:.84rem;font-weight:500;display:block}
.weapon small{color:var(--muted-2);font-size:.72rem;font-family:"Space Mono",monospace}

/* --- Personnages (onglets) --- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.tab{background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:inherit;
  font-size:.9rem;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;transition:.18s;
  border-left:3px solid var(--pc,var(--line))}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--panel-2);color:var(--ink);border-color:var(--line-strong);border-left-color:var(--pc)}
.perso{background:var(--abyss);border:1px solid var(--line);border-radius:18px;padding:26px;position:relative;overflow:hidden}
.perso::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--pc),transparent)}
.perso .p-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.perso h3{font-size:1.5rem}
.perso .spirit{font-family:"Space Mono",monospace;font-size:.8rem;color:var(--pc);border:1px solid var(--pc);
  border-radius:20px;padding:4px 12px;opacity:.9}
.perso .p-sub{color:var(--muted);font-size:.92rem;margin:0 0 22px}
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.skill{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:.88rem}
.skill i{font-family:"Space Mono",monospace;font-style:normal;font-size:.75rem;font-weight:700;
  color:var(--pc);text-align:center}
.skill em{font-style:normal;display:block;color:var(--muted-2);font-size:.72rem}
.subhead{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:24px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-size:.85rem;color:var(--muted)}
.chip.hi{border-color:var(--pc);color:var(--ink)}
.todo{background:rgba(240,194,75,.07);border:1px dashed rgba(240,194,75,.4);border-radius:11px;
  padding:16px 18px;font-size:.88rem;color:var(--muted)}
.todo b{color:var(--gold)}

/* --- Glossaire --- */
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
details.g{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0;transition:.2s}
details.g[open]{border-color:var(--line-strong)}
details.g summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.g summary::-webkit-details-marker{display:none}
details.g summary::after{content:"+";color:var(--silver);font-family:"Space Mono",monospace}
details.g[open] summary::after{content:"−"}
details.g p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:.88rem}

/* --- Journal --- */
.journal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  max-height:280px;overflow-y:auto}
.journal table{width:100%;border-collapse:collapse;font-size:.85rem}
.journal td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--muted)}
.journal td:first-child{font-family:"Space Mono",monospace;color:var(--silver);white-space:nowrap;width:1%}
.journal td:last-child{text-align:right;font-family:"Space Mono",monospace;color:var(--muted-2)}
.journal::-webkit-scrollbar{width:8px}
.journal::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}

/* --- Footer --- */
footer{border-top:1px solid var(--line);background:var(--abyss);padding:50px 0 30px;margin-top:24px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin:0 0 13px;font-family:"Zen Kaku Gothic New";font-weight:700}
.foot a{display:block;color:var(--muted);font-size:.88rem;padding:4px 0}
.foot a:hover{color:var(--ink)}
.foot p{color:var(--muted);font-size:.86rem;max-width:38ch}
.legal{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;color:var(--muted-2);font-size:.78rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .burger{display:block}
  /* menu mobile : panneau déroulant sous le header, ouvert par le burger */
  .menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;background:var(--abyss);border-bottom:1px solid var(--line-strong);
    padding:12px 22px 18px;margin-left:0;box-shadow:0 24px 40px -18px rgba(0,0,0,.8);max-height:calc(100vh - 64px);overflow-y:auto}
  .menu.open{display:flex}
  .menu a{padding:12px 12px;border-radius:9px}
  .menu .dc{color:var(--gold)}
  /* dropdown Donghua : déplié en ligne quand le menu mobile est ouvert */
  .menu .dropdown{position:static}
  .menu .ddtoggle{padding:12px 12px}
  .menu .dropdown-menu{position:static;display:flex;margin-top:2px;box-shadow:none;border:0;
    border-left:2px solid var(--line-strong);border-radius:0;padding:2px 0 6px 10px;min-width:0}
  .menu .dropdown-menu::before{display:none}
  .ring-track{grid-template-columns:repeat(3,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hero{padding:48px 0 36px}
  .ring-track{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr}
  .ep{grid-template-columns:56px 1fr;row-gap:6px}
  .ep .play{grid-column:2;justify-self:start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* --- Musiques & Lyrics --- */
.songs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.song{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.song-badge{display:inline-block;font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;color:var(--gold);border:1px solid rgba(240,194,75,.35);border-radius:20px;padding:5px 12px;margin-bottom:12px}
.song h3{font-size:1.25rem;margin-bottom:8px}
.song-sub{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.song-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.song-links a{font-size:.82rem;font-weight:600;color:var(--silver);border:1px solid var(--line-strong);border-radius:9px;padding:8px 12px;transition:.18s}
.song-links a:hover{border-color:var(--silver);color:var(--ink);background:var(--panel-2)}
.lyrics{max-height:300px;overflow-y:auto;background:var(--void);border:1px solid var(--line);border-radius:11px;padding:16px 18px;font-size:.9rem;color:var(--ink);line-height:1.9;font-style:italic}
.lyrics .lyr-sep{display:block;color:var(--muted-2);font-style:normal;text-align:center;margin:6px 0;letter-spacing:.3em}
.lyrics::-webkit-scrollbar{width:8px}
.lyrics::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
@media(max-width:760px){.songs{grid-template-columns:1fr}}

/* --- Prose (textes de sous-pages : recommandation / présentation) --- */
.prose{max-width:80ch;color:var(--muted);font-size:.99rem;line-height:1.8}
.prose p{margin:0}
.prose a{color:var(--silver);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--ink)}
.prose b{color:var(--ink)}

/* --- Lecteur vidéo (embed responsive 16:9) --- */
.player{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}