:root{
  --ink:#1A1E27;
  --ink-2:#232935;
  --ink-3:#2E3542;
  --bone:#E9E4D7;
  --bone-dim:#A7A294;
  --guerrier:#C2453C;
  --rodeur:#4A7FB5;
  --sorcier:#5C9463;
  --alert:#D8A23C;
  --rule:#3A4150;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Spectral',Georgia,serif;
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px;margin:0 auto;padding:0 20px 90px}

/* ---- en-tête ---- */
header{padding:34px 0 22px;border-bottom:1px solid var(--rule)}
h1{font-size:29px;font-weight:700;line-height:1.15;margin:0 0 6px;letter-spacing:-0.01em;text-wrap:balance}
.sub{color:var(--bone-dim);font-style:italic;font-size:15px;margin:0}

/* ---- onglets ---- */
nav{
  display:flex;gap:2px;margin:0 -20px;padding:14px 20px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--ink);z-index:10;
}
nav button{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--bone-dim);font-family:inherit;font-size:16px;font-weight:500;
  padding:8px 12px 10px;cursor:pointer;white-space:nowrap;
}
nav button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--alert)}
nav button:focus-visible{outline:2px solid var(--alert);outline-offset:2px}

section{display:none;padding-top:26px}
section.on{display:block}
h2{font-size:21px;font-weight:700;margin:0 0 4px;text-wrap:balance}
h3{font-size:17px;font-weight:500;margin:26px 0 8px}
p{margin:0 0 14px;max-width:62ch}
.note{color:var(--bone-dim);font-style:italic;font-size:15px}
.num{font-variant-numeric:tabular-nums}

/* ---- pastille de confiance ---- */
.cf{
  display:inline-block;width:19px;height:19px;line-height:17px;
  text-align:center;font-size:12px;font-weight:700;font-style:normal;
  vertical-align:2px;flex:0 0 auto;
}
.cf-A{background:var(--bone);color:var(--ink);border:1px solid var(--bone)}
.cf-B{background:none;color:var(--bone);border:1px solid var(--bone)}
.cf-C{background:none;color:var(--bone-dim);border:1px dashed var(--bone-dim)}

/* ---- héros ---- */
.fac{border-left:3px solid var(--rule);padding-left:14px;margin:22px 0}
.fac.g{border-left-color:var(--guerrier)}
.fac.r{border-left-color:var(--rodeur)}
.fac.s{border-left-color:var(--sorcier)}
.fac h3{margin-top:0}
.hero{
  display:flex;align-items:baseline;gap:8px;
  padding:5px 0;border-bottom:1px solid var(--ink-3);
}
.hero:last-child{border-bottom:none}
.hero .nm{font-weight:500}
.hero .rl{color:var(--bone-dim);font-size:14px;flex:1}
.hero .mine{color:var(--alert);font-size:13px;font-style:italic}

/* ---- ligne de héros éditable ---- */
.hrow{border-bottom:1px solid var(--ink-3)}
.hrow:last-child{border-bottom:none}
.hhead{
  display:flex;align-items:baseline;gap:9px;width:100%;
  background:none;border:none;padding:9px 0;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:300;color:var(--bone);text-align:left;
}
.hhead:focus-visible{outline:2px solid var(--alert);outline-offset:-2px}
.hhead .nm{font-weight:500}
.hhead .rl{color:var(--bone-dim);font-size:14px;flex:1}
.hhead .tag{font-size:13px;font-style:italic;color:var(--alert);white-space:nowrap}
.hhead .tag.off{color:var(--bone-dim)}
.hhead .chev{color:var(--bone-dim);font-size:13px;width:12px}
.hbody{padding:12px 0 18px 14px;margin:0 0 6px;border-left:2px solid var(--alert);background:var(--ink-2)}
.hbody{padding-right:14px}
.hcap{font-size:13px;color:var(--bone-dim);font-style:italic;margin:0 0 8px}
.hbody[hidden]{display:none}

.flags{display:flex;flex-direction:column;gap:9px;margin:2px 0 4px}
.flag{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--bone-dim);cursor:pointer}
.flag input{width:auto;margin:0;accent-color:var(--alert)}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;margin-top:12px}
@media(min-width:520px){.grid4{grid-template-columns:repeat(4,1fr)}}
.fld label{margin:0 0 3px}
.fld input{padding:7px 9px}

/* ---- contre ---- */
.counter{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--ink-3);
}
.counter b{font-weight:500}
.counter .arw{color:var(--bone-dim);font-size:14px}
.g-t{color:var(--guerrier)} .r-t{color:var(--rodeur)} .s-t{color:var(--sorcier)}

/* ---- formulaire ---- */
label{display:block;font-size:14px;color:var(--bone-dim);margin:14px 0 4px}
select,input{
  width:100%;background:var(--ink-2);color:var(--bone);
  border:1px solid var(--rule);padding:9px 10px;
  font-family:inherit;font-size:16px;
}
input[type=number]{font-variant-numeric:tabular-nums}
select:focus,input:focus{outline:2px solid var(--alert);outline-offset:1px}
button.go{
  background:var(--alert);color:var(--ink);border:none;
  font-family:inherit;font-size:16px;font-weight:700;
  padding:11px 20px;margin-top:18px;cursor:pointer;width:100%;
}
button.go:focus-visible{outline:2px solid var(--bone);outline-offset:2px}

/* ---- résultat priorité ---- */
.slot{
  display:flex;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--ink-3);
}
.slot .rank{font-size:24px;font-weight:700;color:var(--alert);min-width:26px;line-height:1;font-variant-numeric:tabular-nums}
.slot .body{flex:1;min-width:0}
.slot .ttl{font-weight:500}
.slot .why{color:var(--bone-dim);font-size:14px;font-style:italic}
.slot .who{font-size:14px;color:var(--bone-dim)}
.dead{opacity:.45}
.dead .rank{color:var(--bone-dim)}
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px;margin-right:5px}
.fdot.g{background:var(--guerrier)} .fdot.r{background:var(--rodeur)} .fdot.s{background:var(--sorcier)}

/* ---- règles ---- */
.rule-card{border:1px solid var(--rule);padding:14px 16px;margin:0 0 14px}
.rule-card.trap{border-left:4px solid var(--alert)}
.rule-card h4{margin:0 0 6px;font-size:16px;font-weight:700}
.rule-card p{margin:0 0 6px;font-size:15px}
.src{font-size:13px;color:var(--bone-dim);font-style:italic}

/* ---- sources ---- */
.ok,.no{padding:3px 0;font-size:15px}
.no{color:var(--bone-dim);text-decoration:line-through}
.legend{border:1px solid var(--rule);padding:14px 16px;margin:18px 0}
.legend div{margin:6px 0;font-size:15px}

/* ---- barre d'état ---- */
.state{
  position:fixed;left:0;right:0;bottom:0;background:var(--ink-2);
  border-top:1px solid var(--rule);padding:7px 20px;
  font-size:13px;color:var(--bone-dim);font-style:italic;
  text-align:center;z-index:20;
}
.state b{color:var(--bone);font-weight:500;font-style:normal}


/* ---- identite ---- */
.moi{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;
}
.moi .qui{color:var(--bone-dim)}
.moi b{font-weight:500}
.moi button{
  background:none;border:1px solid var(--rule);color:var(--bone-dim);
  font-family:inherit;font-size:13px;padding:3px 9px;cursor:pointer;
}
.moi button:hover{color:var(--bone);border-color:var(--bone-dim)}
.moi button:focus-visible{outline:2px solid var(--alert);outline-offset:2px}
.moi input{width:auto;flex:1;min-width:150px;padding:6px 9px;font-size:15px}
.moi .go2{
  background:var(--alert);color:var(--ink);border:none;font-weight:700;
  padding:7px 14px;font-size:14px;
}

/* ---- bandeau ---- */
.banner{
  border:1px solid var(--alert);border-left-width:4px;
  padding:12px 14px;margin:0 0 18px;font-size:15px;
}
.banner b{font-weight:700}
.banner .acts{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.banner button{
  background:none;border:1px solid var(--rule);color:var(--bone);
  font-family:inherit;font-size:14px;padding:5px 12px;cursor:pointer;
}
.banner button:focus-visible{outline:2px solid var(--alert);outline-offset:2px}

/* ---- alliance ---- */
.pl{
  padding:12px 0;border-bottom:1px solid var(--ink-3);
}
.pl:last-child{border-bottom:none}
.pl .l1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pl .ps{font-weight:500;font-size:17px}
.pl .me{font-size:12px;font-style:normal;background:var(--alert);color:var(--ink);padding:1px 6px}
.pl .meta{color:var(--bone-dim);font-size:14px;flex:1}
.pl .maj{color:var(--bone-dim);font-size:13px;font-style:italic}
.pl .nx{font-size:15px;margin-top:3px}
.pl .nx span{color:var(--alert)}
.cov{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;
     padding:7px 0;border-bottom:1px solid var(--ink-3);font-size:15px}
.cov:last-child{border-bottom:none}
.cov .cnt{font-variant-numeric:tabular-nums;color:var(--bone-dim);font-size:14px}
.cov .cnt.none{color:var(--guerrier)}
.bars{display:flex;flex-direction:column;gap:9px;margin:10px 0 4px}
.bar{display:grid;grid-template-columns:78px 1fr auto;gap:10px;align-items:center;font-size:15px}
.bar .tr{height:9px;background:var(--ink-3)}
.bar .fl{height:9px;display:block}
.bar .fl.g{background:var(--guerrier)} .bar .fl.r{background:var(--rodeur)} .bar .fl.s{background:var(--sorcier)}
.bar .vv{font-variant-numeric:tabular-nums;color:var(--bone-dim);font-size:14px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---- écrans d'accès ---- */
.gate{max-width:400px;margin:0 auto;padding:44px 0 60px}
.gate h2{font-size:23px;margin:0 0 6px}
.gate .lead{color:var(--bone-dim);font-style:italic;font-size:15px;margin:0 0 22px}
.gate form{display:flex;flex-direction:column}
.gate .go{margin-top:22px}
.switch{
  display:flex;gap:2px;margin:0 0 6px;border-bottom:1px solid var(--rule);
}
.switch button{
  flex:1;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--bone-dim);font-family:inherit;font-size:16px;font-weight:500;
  padding:9px 6px 11px;cursor:pointer;
}
.switch button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--alert)}
.switch button:focus-visible{outline:2px solid var(--alert);outline-offset:2px}
.msg{
  border-left:3px solid var(--alert);padding:10px 13px;margin:18px 0 0;
  font-size:15px;background:var(--ink-2);
}
.msg.bad{border-left-color:var(--guerrier)}
.msg.ok{border-left-color:var(--sorcier)}
.msg[hidden]{display:none}
.gate .aide{color:var(--bone-dim);font-size:14px;font-style:italic;margin:20px 0 0}
.busy{opacity:.55;pointer-events:none}
#app[hidden],#gate[hidden]{display:none!important}
.moi .out{margin-left:auto}

/* ---- administration ---- */
.adm{padding:12px 0;border-bottom:1px solid var(--ink-3)}
.adm:last-child{border-bottom:none}
.adm .l1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.adm .ps{font-weight:500;font-size:17px}
.adm .st{font-size:13px;font-style:italic;color:var(--bone-dim);flex:1}
.adm .st.att{color:var(--alert);font-style:normal}
.adm .st.ref{color:var(--guerrier)}
.adm .badge{font-size:12px;background:var(--bone);color:var(--ink);padding:1px 6px}
.adm .acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.adm button{
  background:none;border:1px solid var(--rule);color:var(--bone);
  font-family:inherit;font-size:14px;padding:5px 12px;cursor:pointer;
}
.adm button.oui{border-color:var(--sorcier);color:var(--sorcier)}
.adm button.non{border-color:var(--guerrier);color:var(--guerrier)}
.adm button:focus-visible{outline:2px solid var(--alert);outline-offset:2px}
.adm button[disabled]{opacity:.45;cursor:default}
.moi .badge{font-size:12px;background:var(--alert);color:var(--ink);padding:1px 7px;font-style:normal}

/* ---- coût affiché sous une priorité ---- */
.slot .cout{font-size:14px;color:var(--bone-dim);margin-top:4px;line-height:1.45}
.slot .cout b{color:var(--bone);font-weight:500}
.slot .cout.vide{font-style:italic}
.slot .cout .cf{width:16px;height:16px;line-height:14px;font-size:10px;margin-right:3px}
button.lien{
  background:none;border:none;padding:0;font-family:inherit;font-size:14px;
  color:var(--alert);text-decoration:underline;cursor:pointer;font-style:normal;
}
button.lien:focus-visible{outline:2px solid var(--alert);outline-offset:2px}
.fld select{margin-top:0}