:root{
  --bg:#f1ebdf; --bg2:#e4d9c3; --surface:rgba(255,252,245,.9); --surface-solid:#fffcf5; --fg:#2b2418; --muted:#6f6352; --line:#d8c9aa; --line-soft:#e8dcc4;
  --gold:#9c6b12; --gold-soft:#c9a24a; --accent-fg:#fff8e8; --panel-dark:#1c1712;
  --shadow:0 10px 28px -18px rgba(43,36,24,.5);
  --sb-thumb:rgba(43,36,24,.28);
  --font-display:"Cinzel",Georgia,serif; --font-body:"Inter",system-ui,sans-serif;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0c10; --bg2:#15130f; --surface:rgba(24,22,19,.88); --surface-solid:#17150f; --fg:#efe6d2; --muted:#a69c88; --line:#332c20; --line-soft:#241f17;
  --gold:#f8b700; --gold-soft:#b8862a; --accent-fg:#1a1408; --shadow:0 14px 34px -18px rgba(0,0,0,.85); --sb-thumb:rgba(248,183,0,.28); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0c10; --bg2:#15130f; --surface:rgba(24,22,19,.88); --surface-solid:#17150f; --fg:#efe6d2; --muted:#a69c88; --line:#332c20; --line-soft:#241f17;
  --gold:#f8b700; --gold-soft:#b8862a; --accent-fg:#1a1408; --shadow:0 14px 34px -18px rgba(0,0,0,.85); --sb-thumb:rgba(248,183,0,.28); color-scheme:dark}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--font-body);overflow-x:hidden}
[hidden]{display:none!important}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--gold) 30%,transparent)}
.muted{color:var(--muted)}
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(50rem 26rem at 20% -8rem,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%),
  radial-gradient(40rem 30rem at 100% 40%,color-mix(in srgb,#2a5bd7 10%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg2),var(--bg) 34rem)}

.hero{padding:22px 16px 0}
.hero-in{max-width:1080px;margin:0 auto;padding-bottom:18px}
.hero-top{display:flex;justify-content:space-between;align-items:center}
.eyebrow{font:700 .72rem var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
h1{font:700 clamp(2rem,5vw,3.2rem)/1.1 var(--font-display);margin:14px 0 4px;letter-spacing:.03em;background:linear-gradient(180deg,var(--fg) 35%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0;color:var(--muted)}
.tabs{position:sticky;top:0;z-index:10;display:flex;gap:6px;padding:10px 16px;margin:0 -16px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--line-soft)}
.tabs::-webkit-scrollbar{display:none}
.tabs>.tab:first-child{margin-left:auto}.tabs>.tab:last-child{margin-right:auto}
.tab{flex:none;font:700 .9rem var(--font-body);background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 18px;border-radius:6px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.tab:hover{color:var(--fg);border-color:var(--line)}
.tab[aria-selected="true"]{color:var(--accent-fg);background:linear-gradient(180deg,var(--gold),var(--gold-soft));border-color:var(--gold)}
.theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.theme-toggle .i-moon{fill:currentColor;stroke:none}
.theme-toggle[data-mode="dark"] .i-moon,.theme-toggle:not([data-mode="dark"]) .i-sun{display:none}

.wrap{max-width:1080px;margin:0 auto;padding:var(--s5) 16px var(--s7)}
.sample{margin:0 0 var(--s5);padding:10px 14px;border:1px dashed var(--gold-soft);border-radius:10px;background:var(--surface);color:var(--muted);font-size:.9rem}
h2{font:700 1.15rem var(--font-display);margin:0;letter-spacing:.02em}
h3{font:700 .74rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s3)}
.panel,.raid{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.bar{display:block;height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-soft),var(--gold));animation:grow .9s var(--ease) both}

/* Personnages */
.roster{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 2px 10px;margin-bottom:var(--s3)}
.char-btn{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:230px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-left:3px solid var(--cls);border-radius:10px;background:var(--surface);color:var(--fg);cursor:pointer;text-align:left;font:inherit;transition:border-color .2s,transform .2s var(--ease),background .2s}
.char-btn:hover{transform:translateY(-1px)}
.char-btn[aria-pressed="true"]{border-color:var(--cls);background:color-mix(in srgb,var(--cls) 14%,var(--surface-solid))}
.char-mark{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font:700 .95rem var(--font-display);color:#111;background:var(--cls);flex:none}
.char-txt{display:flex;flex-direction:column;min-width:0}
.char-txt strong{color:var(--cls);filter:brightness(.85)}
:root[data-theme="dark"] .char-txt strong{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .char-txt strong{filter:none}}
.char-txt small{color:var(--muted);font-size:.78rem}
.char-ilvl{margin-left:auto;font:700 1rem var(--font-display);color:var(--gold)}
.armory-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1.1fr) minmax(0,1fr);gap:var(--s4);padding:var(--s4);border-radius:14px;border:1px solid var(--line);
  background:radial-gradient(28rem 22rem at 50% 30%,color-mix(in srgb,var(--cls) 22%,transparent),transparent 70%),var(--panel-dark);color:#efe6d2;box-shadow:var(--shadow);animation:rise .4s var(--ease) both}
.slots{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start}
.slots.weapons{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,280px));justify-content:center}
.slot{display:flex;align-items:center;gap:10px;min-width:0;padding:5px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);transition:border-color .2s,background .2s}
.slot:hover{border-color:var(--q,#555);background:rgba(0,0,0,.5)}
.slots.right .slot{flex-direction:row-reverse;text-align:right}
.slot-ico{flex:none;width:40px;height:40px;border-radius:6px;display:grid;place-items:center;font:700 .7rem var(--font-body);color:rgba(255,255,255,.55);background:linear-gradient(160deg,#2a241c,#120f0b);border:2px solid var(--q,#3a3329)}
.slot-txt{display:flex;flex-direction:column;min-width:0}
.slot-txt small{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#9c907a}
.slot-txt strong{font-size:.84rem;color:var(--q,#9c907a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-txt em{font-style:normal;font-size:.72rem;color:#f8d873}
.slot.empty strong{color:#6d6454;font-weight:400}
.portrait{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.portrait-art{width:100%;aspect-ratio:3/4;max-height:340px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--cls) 45%,#000),#0d0b08 72%);border:1px solid rgba(255,255,255,.08)}
.portrait-art span{font:700 4rem var(--font-display);color:var(--cls);opacity:.85;text-shadow:0 0 30px var(--cls)}
.identity h2{font-size:1.6rem;color:var(--cls)}
.identity p{margin:2px 0;font-size:.88rem}
.identity .muted{color:#a69c88}
.kpis{display:flex;gap:8px;margin:0;width:100%}
.kpis div{flex:1;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 8px}
.kpis dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#9c907a}
.kpis dd{margin:0;font:700 1.15rem var(--font-display);color:#f8d873}

/* Résumés */
.summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-bottom:var(--s4);padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.big{display:flex;flex-direction:column}
.big strong{font:700 2.2rem/1 var(--font-display);color:var(--gold)}
.big span{color:var(--muted);font-size:.86rem}
.progress{flex:1;min-width:220px;display:grid;gap:6px}
.progress small{color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3)}
.chip{font:700 .82rem var(--font-body);border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:99px;padding:5px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--accent-fg);border-color:var(--gold)}

/* Montures */
.mounts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3)}
.mount{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*25ms);transition:border-color .2s,transform .2s var(--ease)}
.mount:hover{border-color:var(--gold);transform:translateY(-2px)}
.mount-ico{grid-row:span 2;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;font:700 .8rem var(--font-display);color:var(--accent-fg);background:linear-gradient(160deg,var(--gold),var(--gold-soft))}
.mount strong{font-size:.88rem;line-height:1.25}
.mount small{color:var(--muted);font-size:.76rem}
.mount.missing{opacity:.55}
.mount.missing .mount-ico{background:var(--line);color:var(--muted)}
.mount em{position:absolute;top:6px;right:8px;font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* Donjons */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:.9rem}
th{font:700 .7rem var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.key{font:700 1rem var(--font-display);color:var(--gold)}
.timed{color:var(--gold);letter-spacing:.1em}
.score-bar{display:inline-block;width:80px;height:6px;border-radius:99px;background:var(--line-soft);margin-right:10px;vertical-align:middle;overflow:hidden}
.score-bar span{display:block;height:100%;background:var(--gold);animation:grow .9s var(--ease) both}

/* Raids */
#raids{display:grid;gap:var(--s4)}
.raid header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:var(--s3)}
.diffs{display:grid;gap:6px;margin-bottom:var(--s3)}
.diff{display:grid;grid-template-columns:110px 1fr 48px;gap:10px;align-items:center;font-size:.86rem}
.diff b{text-align:right;font-variant-numeric:tabular-nums}
.d-lfr .bar>span{background:#1eff00}.d-normal .bar>span{background:#0070dd}.d-heroic .bar>span{background:#a335ee}.d-mythic .bar>span{background:#ff8000}
.bosses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;counter-reset:b}
.bosses li{counter-increment:b;display:flex;justify-content:space-between;gap:8px;font-size:.84rem;padding:6px 10px;border-radius:8px;background:var(--surface-solid);border:1px solid var(--line-soft)}
.bosses li span::before{content:counter(b) ". ";color:var(--muted)}
.bosses b{font-size:.74rem;color:var(--muted)}
.bosses .k-lfr b{color:#1fa31f}.bosses .k-normal b{color:#0070dd}.bosses .k-heroic b{color:#a335ee}.bosses .k-mythic b{color:#ff8000}

/* Hauts faits */
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.cats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cats li{display:grid;grid-template-columns:150px 1fr 48px;gap:10px;align-items:center;font-size:.86rem}
.cats b{text-align:right}
.recent{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.recent li{display:flex;gap:12px;align-items:center}
.recent strong{display:block;font-size:.88rem}
.recent small{color:var(--muted)}
.shield{flex:none;width:38px;height:42px;display:grid;place-items:center;font:700 .85rem var(--font-display);color:var(--accent-fg);background:linear-gradient(180deg,var(--gold),var(--gold-soft));clip-path:polygon(50% 0,100% 15%,100% 60%,50% 100%,0 60%,0 15%)}

.foot{margin:var(--s7) 0 0;color:var(--muted);font-size:.8rem;text-align:center}

@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes grow{from{width:0}}
[role="tabpanel"]:not([hidden]){animation:rise .35s var(--ease) both}

@media (max-width:860px){
  .armory-in{grid-template-columns:1fr 1fr}
  .portrait{grid-column:1/-1;order:-1}
  .portrait-art{max-height:200px;aspect-ratio:auto;height:200px}
  .slots.weapons{grid-template-columns:1fr 1fr}
  .slots.right .slot{flex-direction:row;text-align:left}
  .ach-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .armory-in{grid-template-columns:1fr;padding:12px}
  .slots.weapons{grid-template-columns:1fr}
  .cats li{grid-template-columns:110px 1fr 40px}
  .diff{grid-template-columns:90px 1fr 40px}
  th:nth-child(3),td:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}