/* Tronc commun à tous les guides.
   assets/styles/<boss>.css ne porte que ce qui change d'un boss à
   l'autre : image de fond, taille du titre, couleurs de l'arène et
   animations du diagramme. */

:root{
  --bone:#EDE8DA;--slate:#93A0B4;--line:rgba(200,215,225,.16);
  --ember:#FF7A33;--gold:#F2C14E;--violet:#B58BF5;--danger:#E8443C;
  --tank:#4C86E0;--heal:#2FC2C7;--dps:#E4DBC4;
  /* refonte sobre — habillage du panneau, thème sombre par défaut */
  --accent:#8FBDAE;--accent-soft:rgba(143,189,174,.20);
  --panel-bg:#101211;--panel-fg:#E7E4DA;--panel-dim:#9AA09B;
  --panel-hair:rgba(231,228,218,.14);--panel-strong:#FFFFFF;
}
:root[data-theme="light"]{
  --accent:#3E6B5E;--accent-soft:rgba(62,107,94,.16);
  --panel-bg:#F7F4EE;--panel-fg:#20232A;--panel-dim:#6C7178;
  --panel-hair:rgba(30,34,42,.14);--panel-strong:#20232A;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%;background:#05080D;overflow:hidden}
body{font-family:'Archivo',sans-serif}
#fit{position:fixed;inset:0;overflow:hidden}
#stage{width:1920px;height:1080px;position:absolute;left:0;top:0;color:var(--bone);
  display:grid;grid-template-columns:1320px 600px;grid-template-rows:1080px;isolation:isolate;overflow:hidden;
  transform-origin:0 0}
#bg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat}
#scrim{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(760px 760px at 800px 540px, rgba(5,10,16,0) 40%, rgba(5,10,16,.6) 80%),
  linear-gradient(90deg, rgba(5,10,16,.2) 0%, rgba(5,10,16,.38) 55%, rgba(5,10,16,.9) 66%, rgba(5,10,16,.95) 100%)}
:root[data-theme="light"] #scrim{background:
  radial-gradient(820px 820px at 780px 540px, rgba(8,10,9,0) 52%, rgba(8,10,9,.34) 88%),
  linear-gradient(90deg, rgba(8,10,9,.06) 0%, rgba(8,10,9,.12) 55%,
  rgba(8,10,9,.04) 64%, rgba(247,244,238,.5) 69%, #F7F4EE 74%)}

#arena{position:relative;display:flex;align-items:center;justify-content:flex-end;padding-right:20px}
svg#field{width:1000px;height:1000px;overflow:visible}

/* primitives partagées */
.mob{filter:drop-shadow(0 0 12px rgba(0,0,0,.8))}
.mob-base{fill:rgba(4,10,14,.75)}
.mob-ring{fill:none;stroke-width:2.5}
.mob-core{opacity:.9}
.lbl{font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:.11em;text-anchor:middle;
  paint-order:stroke;stroke:rgba(5,10,16,.92);stroke-width:5px}
.tag{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.05em;text-anchor:middle;
  fill:var(--slate);paint-order:stroke;stroke:rgba(5,10,16,.92);stroke-width:5px}
.pc image,.token{filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))}
.pc circle{fill:var(--dps);stroke:#05080D;stroke-width:3}
.marker{filter:drop-shadow(0 0 10px rgba(0,0,0,.95))}
/* mise en avant du rôle concerné par l'étape */
.pc{transition:opacity .5s ease, filter .5s ease}
#stage[data-focus]:not([data-focus=""]) .pc{opacity:.14;filter:grayscale(.7)}
#stage[data-focus~="tank"] .pc.tank,
#stage[data-focus~="healer"] .pc.healer,
#stage[data-focus~="mdps"] .pc.mdps,
#stage[data-focus~="rdps"] .pc.rdps{opacity:1;filter:drop-shadow(0 0 9px rgba(255,255,255,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.9))}
#stage[data-focus]:not([data-focus=""]) .tag,
#stage[data-focus]:not([data-focus=""]) .lbl{transition:opacity .5s}
.note{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;text-anchor:middle;
  paint-order:stroke;stroke:rgba(5,10,16,.92);stroke-width:5px}
.layer{opacity:0;transition:opacity .45s ease}
.dash{stroke-dasharray:9 9}
@keyframes dash{to{stroke-dashoffset:-36}}
@keyframes pulse{50%{opacity:.35}}

/* panneau — refonte sobre */
#panel{padding:64px 72px 0 48px;display:flex;flex-direction:column;
  border-left:1px solid var(--panel-hair);background:var(--panel-bg);color:var(--panel-fg)}
.feedback{align-self:flex-end;display:inline-flex;align-items:center;gap:9px;margin-bottom:28px;
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;
  color:#5865F2;text-decoration:none;transition:color .18s}
.feedback:hover{color:#7B87FF}
.feedback svg{width:20px;height:20px;flex:none}
.eyebrow{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:13px;letter-spacing:.2em;
  color:var(--panel-dim);text-transform:uppercase;margin-bottom:26px}
h1{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:var(--h1,60px);line-height:1.05;
  letter-spacing:-.015em;color:var(--panel-fg);margin-bottom:16px;text-shadow:none}
.subtitle{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:21px;line-height:1.4;
  color:var(--panel-dim);padding-bottom:30px;border-bottom:1px solid var(--panel-hair);max-width:34ch}
#stepno{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;
  color:var(--accent);font-variant-numeric:tabular-nums;margin:42px 0 12px}
#mech{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:33px;color:var(--panel-fg);
  margin:0 0 18px;line-height:1.14}
#narration{font-family:'Hanken Grotesk',sans-serif;font-size:22px;line-height:1.6;max-width:42ch;
  color:var(--panel-fg)}
#narration strong{color:var(--panel-strong);font-weight:600;box-shadow:inset 0 -8px 0 var(--accent-soft)}
#narration a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:600}
#narration a:hover{color:var(--panel-strong)}
#narration .aside{display:block;margin-top:14px;font-size:16px;color:var(--panel-dim)}
#stepno,#mech,#narration{animation:enter .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}
#rail{margin-top:auto;padding-bottom:60px;display:flex;gap:8px;transition:opacity .3s}
.tick{height:2px;flex:1;background:var(--panel-hair);border-radius:0;transition:background .35s}
.tick.done{background:var(--panel-dim)} .tick.now{background:var(--accent)}
#hint{position:absolute;left:60px;bottom:32px;font-family:'Hanken Grotesk',sans-serif;font-size:12px;
  color:var(--slate);letter-spacing:.12em;opacity:.55;transition:opacity .3s}
#stage.rec #hint,#stage.rec #rail,#stage.rec #themetoggle,#stage.rec #stepnav{opacity:0}
#themetoggle{position:fixed;right:24px;bottom:26px;z-index:98;font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--bone);background:rgba(8,13,20,.82);
  border:1px solid rgba(200,215,225,.22);padding:8px 14px;border-radius:999px;cursor:pointer;
  backdrop-filter:blur(8px);transition:border-color .2s,background .2s,opacity .3s}
#themetoggle:hover{border-color:#8FBDAE;background:rgba(20,24,22,.9)}
#stepnav{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:98;
  display:flex;gap:10px;transition:opacity .3s}
.stepnav-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Hanken Grotesk',sans-serif;font-size:20px;line-height:0;color:var(--bone);
  background:rgba(8,13,20,.82);border:1px solid rgba(200,215,225,.22);cursor:pointer;
  backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.stepnav-btn:hover{border-color:#8FBDAE;background:rgba(20,24,22,.9)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}


/* ================= ÉDITEUR ================= */
#ed{position:fixed;left:16px;bottom:16px;z-index:99;display:none;gap:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#EDE8DA;
  background:rgba(8,13,20,.94);border:1px solid rgba(200,215,225,.25);border-radius:10px;
  padding:14px 16px;min-width:330px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.6)}
body.editing #ed{display:block}
#ed h4{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.16em;color:#FF7A33;margin-bottom:10px}
#ed .row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:#93A0B4}
#ed .row b{color:#EDE8DA;font-weight:400}
#ed .keys{margin-top:10px;padding-top:10px;border-top:1px solid rgba(200,215,225,.18);
  color:#93A0B4;line-height:1.7;font-size:11px}
#ed .btns{display:flex;gap:8px;margin-top:12px}
#ed button{flex:1;background:rgba(255,122,51,.14);border:1px solid rgba(255,122,51,.5);color:#FF7A33;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;padding:8px;border-radius:6px;cursor:pointer}
#ed button:hover{background:rgba(255,122,51,.28)}
#ed .rb{flex:none;padding:3px 7px;font-size:10px;letter-spacing:.06em;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(200,215,225,.25);color:#93A0B4;cursor:pointer}
#ed .rb.on{background:rgba(255,122,51,.25);border-color:rgba(255,122,51,.7);color:#FF7A33}
#ed-focus{display:flex;gap:4px}
#ed input{background:rgba(255,255,255,.07);border:1px solid rgba(200,215,225,.25);color:#EDE8DA;
  font-family:'JetBrains Mono',monospace;font-size:12px;width:64px;padding:2px 6px;border-radius:4px;text-align:right}
body.editing #stage{cursor:crosshair}
body.editing .drag-sel{outline:none}
.sel-box{fill:none;stroke:#FF7A33;stroke-width:2;stroke-dasharray:5 5;pointer-events:none;
  animation:dash 1s linear infinite}
body.editing [contenteditable="true"]{outline:1px dashed rgba(255,122,51,.6);outline-offset:6px;border-radius:3px}
body.editing #hint{opacity:0}
body.no-anim #field *,body.dragging #field *{animation:none!important}
body.editing .layer{opacity:1!important}


/* ================= NAVIGATION ================= */
#leftnav{position:fixed;top:20px;left:20px;z-index:98;width:230px;
  font-family:'JetBrains Mono',monospace;font-size:12px;transition:opacity .3s}
#stage.rec #leftnav{opacity:0;pointer-events:none}

.navpair{display:flex;gap:6px;margin-bottom:10px}
.navbtn{flex:1;display:flex;flex-direction:column;background:rgba(8,13,20,.82);
  border:1px solid rgba(200,215,225,.22);color:var(--bone,#EDE8DA);text-decoration:none;
  padding:7px 10px;border-radius:8px;backdrop-filter:blur(8px);letter-spacing:.02em;
  transition:border-color .2s,background .2s;overflow:hidden}
.navbtn:hover{border-color:rgba(143,189,174,.55);background:rgba(16,20,19,.92)}
.navbtn.disabled{opacity:.3;pointer-events:none}
.navbtn .lbl{color:var(--slate,#8C9AB2);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.navbtn .ttl{color:inherit;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbtn .arrow{font-size:13px}

#bossmenu{background:rgba(8,12,19,.9);border:1px solid rgba(200,215,225,.18);border-radius:10px;
  padding:14px;backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-height:calc(100vh - 130px);overflow-y:auto}
#bossmenu .raid-h{font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.14em;
  color:#8FBDAE;text-transform:uppercase;margin:14px 0 8px;padding-top:10px;
  border-top:1px solid rgba(200,215,225,.12)}
#bossmenu .raid-h:first-child{margin-top:0;padding-top:0;border-top:none}
#bossmenu a{display:block;padding:7px 9px;border-radius:6px;color:var(--bone,#EDE8DA);
  text-decoration:none;font-family:'Archivo',sans-serif;font-size:13px;transition:background .15s}
#bossmenu a:hover{background:rgba(143,189,174,.12)}
#bossmenu a.current{color:#8FBDAE;font-weight:600;background:rgba(62,107,94,.32)}
#bossmenu a.home{color:var(--slate,#8C9AB2);font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
#bossmenu .phase-group{border-top:1px solid rgba(200,215,225,.12);margin-top:10px;padding-top:4px}
#bossmenu .phase-group summary{cursor:pointer;list-style:none;font-family:'Archivo Black',sans-serif;
  font-size:12px;letter-spacing:.18em;color:var(--bone,#EDE8DA);text-transform:uppercase;
  padding:8px 6px;border-radius:6px;transition:color .2s,background .2s}
#bossmenu .phase-group summary::-webkit-details-marker{display:none}
#bossmenu .phase-group summary::after{content:'＋';float:right;color:var(--slate,#8C9AB2)}
#bossmenu .phase-group[open] summary{color:#8FBDAE;background:rgba(143,189,174,.08)}
#bossmenu .phase-group[open] summary::after{content:'−'}
#bossmenu .phase-content{padding:0 0 4px}
#bossmenu .coming{padding:3px 9px 7px;color:var(--slate,#8C9AB2);font-family:'Archivo',sans-serif;
  font-size:11px;font-style:italic;opacity:.72}
@media(max-width:820px){#leftnav{top:10px;left:10px;width:200px}}


/* ================= LÉGENDE CLAVIER ================= */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;
  padding:0 6px;margin:0 2px;background:rgba(237,232,218,.08);border:1px solid rgba(237,232,218,.3);
  border-bottom-width:2px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--bone,#EDE8DA);vertical-align:middle;line-height:1}
#hint{display:flex;align-items:center;gap:4px;flex-wrap:wrap}