:root{
  --bg:#14110f;--panel:#1e1a16;--panel2:#272119;--line:#3a3128;--ink:#efe6d4;--mute:#a89c85;
  --gold:#d8b45a;--ally:#3b6fd4;--horde:#c2402f;--good:#6bbf6b;--bad:#e0604f;--hp:#c9473b;--xp:#d8b45a;
  --serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
body{min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;max-width:560px;width:100%;margin:0 auto}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.3px}
.brand b{color:var(--gold)}
.lang{background:none;border:1px solid var(--line);color:var(--mute);padding:6px 12px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:0 16px 40px}
footer{max-width:560px;margin:0 auto;padding:20px 16px 32px;color:var(--mute);font-size:12px;text-align:center}
h1,h2,h3{font-family:var(--serif);font-weight:normal;margin:0}
.btn{display:block;width:100%;background:var(--gold);color:#241b08;border:0;border-radius:12px;padding:14px 18px;font:inherit;font-weight:600;font-size:16px;cursor:pointer;text-align:center}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:400}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:10px;margin-top:10px}
.row .btn{flex:1}
canvas.scene{width:100%;aspect-ratio:2/1;display:block;image-rendering:pixelated;border-radius:14px;border:1px solid var(--line);background:#000}

/* accueil */
.hero{text-align:center;padding:20px 0 8px}
.hero h1{font-size:42px;line-height:1.1;margin:18px 0 10px}
.hero h1 b{color:var(--gold);font-weight:normal}
.hero p{color:var(--mute);margin:0 auto 22px;max-width:420px}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--mute);margin-bottom:6px}

/* carte de naissance */
.card{border-radius:18px;padding:22px 18px;border:1px solid var(--line);background:var(--panel)}
.card.A{background:linear-gradient(160deg,#17264a,#1e1a16 70%);border-color:#2c4a8e}
.card.H{background:linear-gradient(160deg,#4a1a14,#1e1a16 70%);border-color:#8e2f24}
.card .kick{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}
.card h2{font-size:34px;margin:6px 0 4px}
.card .sub{color:var(--mute);margin:0 0 18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cell{background:rgba(0,0,0,.28);border-radius:10px;padding:10px 12px}
.cell small{display:block;color:var(--mute);font-size:11px;letter-spacing:.8px;text-transform:uppercase}
.cell span{font-size:15px}
.fA{color:#7fa5f0}.fH{color:#ef8070}

/* jeu */
.head{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 10px}
.head .nm{font-family:var(--serif);font-size:22px}
.head .lv{color:var(--gold);font-size:14px}
.bars{display:grid;gap:8px;margin:12px 0 6px}
.bar{height:10px;background:var(--panel2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;transition:width .4s}
.bar.hp i{background:var(--hp)}.bar.xp i{background:var(--xp)}
.barlab{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-bottom:3px}
.stats{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:12px;color:var(--mute)}
.chip.t-combat{border-color:#8e3a2f}.chip.t-defense{border-color:#2f5a8e}.chip.t-stealth{border-color:#5a4a8e}.chip.t-heal{border-color:#2f8e55}.chip.t-luck{border-color:#8e7a2f}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;margin-top:12px}
.panel h3{font-size:22px;margin-bottom:6px}
.panel p{margin:0 0 14px;color:#d9cfbc}
.opt{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:12px 14px;margin-top:8px;font:inherit;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--gold)}
.opt:disabled{opacity:.4;cursor:not-allowed}
.opt .hint{display:block;font-size:12px;margin-top:2px;color:var(--mute)}
.hint.safe{color:var(--good)!important}.hint.low{color:#b5c76b!important}.hint.mid{color:#e0a64f!important}.hint.high{color:var(--bad)!important}
.res .line{margin:0 0 8px}
.res .warm{font-style:italic;color:var(--mute)}
.res .bad{color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.chips .chip{color:var(--ink)}
.chips .up{border-color:var(--good);color:var(--good)}.chips .dn{border-color:var(--bad);color:var(--bad)}
.lvlup{color:var(--gold);font-family:var(--serif);font-size:22px;margin:4px 0 8px}

/* recrutement */
.cands{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.cand{background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:10px;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.cand.sel{border-color:var(--gold);background:#2d2619}
.cand b{font-family:var(--serif);font-size:17px;font-weight:normal;display:block}
.cand small{display:block;color:var(--mute);font-size:12px}
.cand em{display:block;font-size:12px;color:#d9cfbc;margin-top:6px;font-style:normal}
.role{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:6px;font-size:12px;font-weight:700;color:#111;margin-right:6px;vertical-align:middle}
.role.tank{background:#6f9bf0}.role.heal{background:#6bbf6b}.role.dps{background:#e0604f}
.comp{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;margin:6px 0 4px}
.comp span{padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute)}
.comp span.ok{border-color:var(--good);color:var(--good)}.comp span.no{border-color:var(--bad);color:var(--bad)}
.party{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.party .m{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.party .m.dead{opacity:.4;text-decoration:line-through}

/* compétences */
.skill{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px;color:var(--ink);font:inherit;cursor:pointer}
.skill:hover{border-color:var(--gold)}
.skill b{font-family:var(--serif);font-weight:normal;font-size:18px}
.skill small{display:block;color:var(--mute)}

/* journal */
details.journal{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
details.journal summary{cursor:pointer;color:var(--mute);font-size:14px}
.log{list-style:none;padding:0;margin:10px 0 0}
.log li{border-left:3px solid var(--line);padding:2px 0 2px 10px;margin:0 0 8px;font-size:14px;color:#d9cfbc}
.log li.big{border-color:var(--gold);color:var(--gold)}
.log li.bad{border-color:var(--bad)}.log li.loss,.log li.death{border-color:var(--bad);color:var(--bad)}
.log li.warm{border-color:#5a6a8e;font-style:italic;color:var(--mute)}.log li.loot{border-color:var(--good)}

/* mort */
.dead{text-align:center;padding-top:6px}
.tomb{width:150px;height:auto;margin:6px auto 0;display:block}
.dead h2{font-size:32px;margin:6px 0 2px}
.dead .sub{color:var(--mute);margin:0 0 14px}
.epi{font-family:var(--serif);font-size:20px;margin:14px 0;padding:0 8px}
.sum{list-style:none;padding:0;margin:14px 0;text-align:left}
.sum li{padding:6px 0 6px 12px;border-left:2px solid var(--line);color:#d9cfbc;font-size:15px}
.legend h2{color:var(--gold)}
@media (max-width:420px){.hero h1{font-size:36px}.card h2{font-size:30px}}

/* v2 : le temps défile */
.hud{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 2px 10px}
.lvbig{font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold)}
.lvbig span{font-size:15px;color:var(--mute);letter-spacing:1px;text-transform:uppercase;margin-right:4px}
.lvbig small{font-size:16px;color:var(--mute);margin-left:2px}
.who{font-size:13px;color:var(--mute);text-align:right}
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.ctl button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}
.ctl .pz{min-width:104px}
.spds{display:flex;gap:4px}
.spds .spd{padding:8px 9px}
.spds .spd.on{background:var(--gold);color:#241b08;border-color:var(--gold)}
.ctl .nx{margin-left:auto}
.auto{flex-basis:100%;font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:center}
.kick2{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.log li{display:flex;gap:10px}
.log li b{min-width:26px;color:var(--gold);font-weight:600;text-align:right}
.log li.warm b,.log li.loot b{color:var(--mute)}
.mini{font-size:13px;color:var(--mute);margin-top:14px}
.lvbig{white-space:nowrap;flex:none}
.who{min-width:0}

/* v3 : habillage WoW, fenêtre de décision */
:root{--gold2:#8a6d2a;--wood:#17120d}
h1 b,h2,.brand b{background:linear-gradient(#ffe9a0,#d8a830 60%,#a8781a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.card h2{-webkit-text-fill-color:currentColor;background:none}
.panel,.card,details.journal,.cell{border-color:var(--gold2);box-shadow:inset 0 0 0 1px #2a2010,0 2px 0 #0a0805}
canvas.scene{border:2px solid var(--gold2);box-shadow:inset 0 0 0 1px #2a2010}
.card canvas.scene{margin-bottom:14px}
.cell.wide{grid-column:1/3}
.btn{background:linear-gradient(#e6c35e,#b8872a);color:#2a1c06;border:1px solid #6b4a10;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gold2);text-shadow:none}
#panel.open,#bagw.open{position:fixed;inset:0;z-index:60;background:rgba(5,3,2,.78);display:flex;align-items:flex-end;justify-content:center;padding:12px;overflow:auto}
.dlg{width:100%;max-width:520px;background:linear-gradient(#2a2216,#17120d);border:2px solid var(--gold2);border-radius:14px;padding:16px;max-height:92vh;overflow:auto;box-shadow:0 0 0 1px #000,0 12px 40px rgba(0,0,0,.6)}
.dhead{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.dlg h3{font-size:24px;margin-bottom:8px}
.dlg p{margin:0 0 12px;color:#d9cfbc}
.dlg .opt{display:flex;gap:12px;align-items:flex-start;text-align:left}
.num{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold2);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.otx{display:block}
.otx small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
@media (min-width:700px){#panel.open,#bagw.open{align-items:center}}

/* sac */
#bagw.open{z-index:70}
.mute{color:var(--mute);font-weight:normal}
.islot,.irow{display:flex;gap:12px;align-items:center;position:relative}
.islot{background:rgba(0,0,0,.28);border:1px solid var(--gold2);border-radius:10px;padding:8px 12px;margin-top:8px}
.ibox{flex:none;width:36px;height:36px;border:2px solid var(--line);border-radius:6px;background:#0d0a07;box-shadow:inset 0 0 0 1px #000}
.itx{display:block;min-width:0}
.itx b{font-family:var(--serif);font-weight:normal;font-size:16px;display:block}
.itx small{display:block;font-size:12px;color:var(--mute)}
.nb{background:var(--gold);color:#241b08;border-radius:999px;font-size:11px;font-weight:700;padding:1px 8px;margin-left:4px}
.irow .nb{position:absolute;top:6px;right:10px}
.wear{margin-left:auto;color:var(--gold);font-size:13px;flex:none}
.ctl #bg{margin-left:0}

/* v4 : parchemin WoW, tirage au sort */
:root{--bg:#cdbb93;--panel:#f3e7c8;--panel2:#e8d8ae;--line:#c2a76a;--ink:#3a2a14;--mute:#7a6444;--gold:#8a5a10;--gold2:#a07a2c;--good:#2f7a35;--bad:#a8301f;--hp:#b8382b;--xp:#c99a2e;--ally:#2a5cc4;--horde:#a8301f}
html,body{background:var(--bg) radial-gradient(ellipse at 50% 0,#e4d5ae,#cdbb93 60%,#b9a577)}
body{background:radial-gradient(ellipse at 50% 0,#e4d5ae,#cdbb93 60%,#b9a577) fixed}
.top{max-width:none;background:linear-gradient(#3a2a18,#22170d);border-bottom:3px solid var(--gold2);box-shadow:0 3px 0 #1a1008;margin-bottom:14px;padding:12px max(16px,calc(50% - 264px))}
.brand{color:#f0e2bd}
.brand b{background:linear-gradient(#ffe9a0,#d8a830 60%,#a8781a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lang{color:#d8c79a;border-color:#7a5f2a}
h1 b,h2,.brand b{background:none;color:inherit}
.brand b{background:linear-gradient(#ffe9a0,#d8a830 60%,#a8781a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{color:#3a2a14}.hero h1 b{color:#8a1f12;background:none}
.lvbig,.lvlup,.legend h2,.dhead{color:var(--gold)}
.panel,.card,details.journal,.cell{border-color:var(--gold2);box-shadow:inset 0 0 0 1px #fff6dc,0 2px 0 rgba(90,60,20,.35)}
.card{background:linear-gradient(#f6ecd0,#eadbb0)}
.card.A{background:linear-gradient(160deg,#dbe4f2,#f3e7c8 65%);border-color:#4a6fb0}
.card.H{background:linear-gradient(160deg,#f0d3c8,#f3e7c8 65%);border-color:#a8452f}
.cell{background:rgba(120,85,30,.12)}
.panel p,.dlg p,.log li,.sum li{color:#4a3a22}
.fA{color:#2a5cc4}.fH{color:#a8301f}
.btn{background:linear-gradient(#b63a28,#7e1c10);color:#fbeed0;border:1px solid #4a0f08;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 #3a0c06}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gold2);box-shadow:none;text-shadow:none}
.opt,.skill,.cand{background:var(--panel2);color:var(--ink)}
.opt:hover:not(:disabled){border-color:#8a1f12;background:#efdfb4}
.cand.sel{background:#e6cf8f}
#panel.open,#bagw.open{background:rgba(35,22,8,.7)}
.dlg{background:linear-gradient(#f6ecd0,#e8d6a6);border:3px solid var(--gold2);color:var(--ink);box-shadow:inset 0 0 0 2px #fff3cf,0 0 0 1px #000,0 12px 40px rgba(0,0,0,.55)}
.dlg h3{color:#5a1a0e}
.num{border-color:var(--gold2);color:#7a4f0c;background:#f6ecd0}
.ctl button{background:linear-gradient(#f3e7c8,#e0cd9c);color:var(--ink);border-color:var(--gold2)}
.spds .spd.on{background:linear-gradient(#b63a28,#7e1c10);color:#fbeed0;border-color:#4a0f08}
.bar{background:#cdb88a;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.chip{background:#eadbb0;color:#5a4628}
.chips .chip{color:var(--ink)}
.log li.big{color:#8a5a10}.log li.bad,.log li.loss,.log li.death{color:var(--bad)}
.ibox{background:#e0cd9c}
.islot{background:rgba(120,85,30,.14)}
footer{color:#5e4a2a}
.nb{background:#8a1f12;color:#fbeed0}
.tomb{filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
canvas.scene{border-color:#4a3410;box-shadow:0 0 0 2px var(--gold2),0 3px 0 2px #1a1008}

/* tirage au sort du héros */
.card.rolling{border-color:var(--gold2);animation:glow 0.9s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 22px 2px rgba(200,150,40,.65)}}
.roll{color:#9b7b3a!important;animation:jit .16s steps(2) infinite;filter:blur(.6px);letter-spacing:1px}
@keyframes jit{50%{transform:translateY(-1px)}}
.card.pop .cell,.card.pop h2{animation:none}
.card.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
.card.rolling canvas.scene{filter:saturate(1.2) contrast(1.05);animation:flick .18s steps(2) infinite}
@keyframes flick{50%{filter:saturate(.8) brightness(1.15)}}
.card.rolling .kick{color:#8a5a10;font-weight:700}
/* noms de classe lisibles sur parchemin (contour sombre, comme en jeu) */
.card h2[style],.cell span[style],.it,.itx b,.otx b{-webkit-text-stroke:.6px rgba(20,10,0,.75);paint-order:stroke fill;text-shadow:0 1px 1px rgba(0,0,0,.45)}

/* héros en vie */
.brand{cursor:pointer}
.lives{text-align:left;margin:0 0 16px}
.lrow{display:flex;gap:8px;margin-top:8px}
.lres{flex:1;text-align:left;background:var(--panel);border:1px solid var(--gold2);border-radius:12px;padding:10px 14px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px #fff6dc}
.lres:hover{border-color:#8a1f12}
.lres b{font-family:var(--serif);font-weight:normal;font-size:19px;display:block;-webkit-text-stroke:.6px rgba(20,10,0,.75);paint-order:stroke fill}
.lres small{color:var(--mute);font-size:13px}
.lx{flex:none;width:42px;background:transparent;border:1px solid var(--line);border-radius:12px;color:var(--mute);cursor:pointer;font:inherit}
.lx:hover{color:var(--bad);border-color:var(--bad)}

/* mise en page : modules sur le côté */
.stats{display:none}
.gside{display:grid;gap:12px;margin-top:14px}
.mod{background:var(--panel);border:1px solid var(--gold2);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px #fff6dc,0 2px 0 rgba(90,60,20,.35)}
.mod h4{margin:0 0 8px;font-family:var(--serif);font-weight:normal;font-size:18px;color:#5a1a0e;display:flex;justify-content:space-between;align-items:baseline}
.mod h4 small{font-size:13px;color:var(--mute);font-family:var(--sans)}
.mod .btn.sm{margin-top:8px;padding:8px 12px;font-size:14px}
.mod .islot{margin-top:6px}
.gtag{margin:0 0 8px}.gtag small{display:block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.gtag .chip{display:inline-block;margin:0 4px 4px 0}.gtag .chip i{font-style:normal;color:var(--mute);font-size:11px;margin-left:3px}
.comp2{list-style:none;padding:0;margin:0;display:grid;gap:6px}.comp2 li{font-size:14px}.comp2 .dead{text-decoration:line-through;opacity:.5}
.lmap{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.lmap i{aspect-ratio:1;background:#d9c690;border:1px solid #b79a5e;border-radius:3px}
.lmap i.on{background:linear-gradient(#e6c35e,#b8872a);border-color:#8a5a10}
.lmap i.now{background:#b63a28;border-color:#4a0f08;animation:glow2 1s ease-in-out infinite}
.lmap i.ten{border-color:#5a1a0e}
@keyframes glow2{50%{box-shadow:0 0 8px 2px rgba(182,58,40,.8)}}
.chips .chip.up{color:var(--good)}.chips .chip.dn{color:var(--bad)}
@media (min-width:980px){
  main.wide{max-width:1120px}
  body:has(main.wide) .top{padding-left:max(16px,calc(50% - 560px));padding-right:max(16px,calc(50% - 560px))}
  .game{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
  .gside{margin-top:0;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
}

.it,.itx b{-webkit-text-stroke:.6px rgba(20,10,0,.8);paint-order:stroke fill;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.chips .it{-webkit-text-stroke:.6px rgba(20,10,0,.8)}

/* fiche du héros + transition de lieu */
.sbox{position:relative}
.sfx{position:absolute;inset:0;border-radius:14px;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;background:radial-gradient(ellipse at center,#1d1408,#050302)}
.sfx.go{animation:zt 1.4s ease-in-out forwards}
@keyframes zt{0%{opacity:0}34%{opacity:1}68%{opacity:1}100%{opacity:0}}
.sfx span{font-family:var(--serif);font-size:clamp(20px,5vw,34px);color:#f0d98a;text-shadow:0 2px 0 #000,0 0 18px rgba(216,168,48,.55);letter-spacing:1px;opacity:0;animation:zn 1.4s ease-in-out forwards}
.sfx:not(.go) span{animation:none}
@keyframes zn{0%,25%{opacity:0;transform:translateY(8px)}42%,62%{opacity:1;transform:none}80%,100%{opacity:0}}
.hero2 .h2n{font-family:var(--serif);font-size:24px;line-height:1.1;-webkit-text-stroke:.6px rgba(20,10,0,.75);paint-order:stroke fill}
.hero2 .h2s{font-size:13px;color:var(--mute);margin:2px 0 8px}
.hero2 .h2l{font-family:var(--serif);font-size:34px;color:var(--gold);line-height:1;margin-bottom:8px;display:flex;align-items:baseline;gap:6px}
.hero2 .h2l span{font-family:var(--sans);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.hero2 .h2l small{font-size:15px;color:var(--mute)}
.hero2 .h2l em{margin-left:auto;font-family:var(--sans);font-size:14px;font-style:normal;color:#5a4628}
@media (min-width:980px){.gmain .bars{display:none}}

/* colonne de droite : pas de barre de défilement interne */
@media (min-width:980px){.gside{position:static;max-height:none;overflow:visible}}
.opt .otx small{font-style:italic}
.sfx{flex-direction:column;text-align:center;padding:0 24px}
.sfx span small{display:block;font-family:var(--sans);font-size:clamp(11px,1.5vw,14px);font-style:italic;color:#d8c79a;text-shadow:0 1px 0 #000;letter-spacing:.3px;margin-top:8px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.35}

.cand em{color:var(--mute)!important;font-style:italic}
.cand small{color:var(--mute)}
.cand b{-webkit-text-stroke:.6px rgba(20,10,0,.8);paint-order:stroke fill;text-shadow:0 1px 1px rgba(0,0,0,.4)}

/* journal : un bloc par niveau */
.log{margin:10px 0 0}
.log li.lvg{display:block;border:1px solid var(--line);border-left:5px solid var(--gold2);border-radius:10px;padding:0;margin:0 0 12px;background:rgba(255,248,226,.55);overflow:hidden}
.log li.lvg.alt{background:rgba(214,190,130,.28);border-left-color:#8a1f12}
.lvh{display:flex;align-items:baseline;gap:10px;padding:6px 12px;background:linear-gradient(#3a2a18,#22170d);color:#f0e2bd}
.lvh b{font-family:var(--serif);font-size:18px;font-weight:normal;color:#e6c35e;min-width:0;text-align:left}
.lvh em{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:#bfae86;font-style:normal}
ul.lvl{list-style:none;margin:0;padding:6px 12px 8px}
ul.lvl li{display:flex;gap:10px;border-left:0;padding:4px 0;margin:0;font-size:14.5px;color:#3f2f18}
ul.lvl li i{flex:none;width:22px;text-align:center;font-style:normal}
ul.lvl li.lore{font-family:var(--serif);font-size:15px;line-height:1.5;color:#4a2f12;background:rgba(160,122,44,.14);border-radius:8px;padding:8px 10px;margin:4px -4px}
ul.lvl li.big{color:#7a4f0c;font-weight:600}
ul.lvl li.bad,ul.lvl li.loss,ul.lvl li.death{color:var(--bad)}
ul.lvl li.warm{font-style:italic;color:var(--mute)}
ul.lvl li.loot{color:#2f5a2a}
/* fenêtre de décision réduite */
#panel.min{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px;pointer-events:none;display:flex;justify-content:center}
.dmin{pointer-events:auto;width:100%;max-width:520px;display:flex;align-items:center;gap:12px;justify-content:space-between;background:linear-gradient(#f6ecd0,#e8d6a6);border:3px solid var(--gold2);border-radius:14px;padding:10px 14px;box-shadow:0 8px 28px rgba(0,0,0,.5);color:var(--ink);font-weight:600}
.dmin .btn{width:auto;padding:8px 16px;font-size:14px}
.dmb{background:transparent;border:1px solid var(--gold2);border-radius:8px;color:var(--ink);font:inherit;font-size:12px;letter-spacing:.4px;text-transform:none;padding:2px 8px;margin-left:8px;cursor:pointer}
.dmb:hover{border-color:#8a1f12}

/* la dernière scène du récit apparaît en douceur */
ul.lvl li.fresh{animation:beat .6s ease-out}
@keyframes beat{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* fenêtre de personnage */
.dlg.wide{max-width:780px}
.charwrap{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.doll{display:grid;grid-template-columns:46px 150px 46px;grid-template-areas:"l c r" "b b b";gap:8px 10px}
.doll .dl{grid-area:l}.doll .dc{grid-area:c;display:flex;align-items:flex-start;justify-content:center}.doll .dr{grid-area:r}.doll .db{grid-area:b;display:flex;gap:8px;justify-content:center}
.dl,.dr{display:grid;gap:6px;align-content:start}
.doll canvas{width:150px;height:75px;border:2px solid #4a3410;border-radius:6px;image-rendering:pixelated;margin-top:4px}
.sl{width:46px;height:46px;border:2px solid #8a7a52;border-radius:6px;background:linear-gradient(#2a2216,#17120d);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #000}
.sl i{font-style:normal;font-size:21px;opacity:.28;filter:grayscale(1)}
.sl.on i{opacity:1;filter:none}
.sl.sel{outline:2px solid #e6c35e;outline-offset:1px}
.doll.mini{grid-template-columns:36px 36px;grid-template-areas:"l r" "b b";gap:6px 8px;justify-content:center}
.doll.mini .sl{width:36px;height:36px}.doll.mini .sl i{font-size:17px}
.doll.mini .dl,.doll.mini .dr{gap:5px}
.cside{min-width:0}
.tt{background:linear-gradient(#1a1712,#0e0c09);border:1px solid #6b5a30;border-radius:6px;padding:8px 10px;color:#e8e0cc;font-size:13px;line-height:1.45;margin-top:2px}
.ttn{font-family:var(--serif);font-weight:normal;font-size:16px;display:block;-webkit-text-stroke:0;text-shadow:0 1px 0 #000}
.ttr{display:flex;justify-content:space-between;gap:10px}
.ttg{color:#1eff00}
.ttm{color:#bfae86;font-size:12px}
.tt .mute{color:#9a8c6c}
.sheet{margin-top:12px;background:rgba(120,85,30,.12);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.shr{display:flex;justify-content:space-between;font-size:14px;padding:1px 0}
.bagl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;max-height:260px;overflow:auto}
.irow{position:relative;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;color:var(--ink);cursor:pointer}
.irow.sel{border-color:#8a1f12;background:#efdfb4}
.irow .itx b{font-size:14px;-webkit-text-stroke:.5px rgba(20,10,0,.8);paint-order:stroke fill}
.irow .itx small{font-size:11px}
.irow .nb{position:absolute;top:5px;right:6px}
.tt + .btn,.row + .btn{margin-top:8px}
@media (max-width:700px){
  .charwrap{grid-template-columns:1fr}
  .doll{justify-content:center}
  .bagl{grid-template-columns:1fr}
}

.doll .db .sl{flex:none}
.doll.mini .db{gap:6px}

/* faction visible dans la fiche ; l'en-tête du haut disparaît sur grand écran (tout est dans la fiche) */
.hero2{position:relative}
.hero2.fA{border-color:#4a6fb0;background:linear-gradient(160deg,#dbe4f2,#f3e7c8 60%)}
.hero2.fH{border-color:#a8452f;background:linear-gradient(160deg,#f0d3c8,#f3e7c8 60%)}
.h2fac{position:absolute;top:10px;right:12px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:700}
.hero2.fA .h2fac{color:#2a4fa8}.hero2.fH .h2fac{color:#8a1f12}
.emb{width:34px;height:41px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.hero2 .h2n{padding-right:64px}
@media (min-width:980px){.gmain .hud{display:none}}

.opt .otx small.rew{color:#2f5a2a;font-style:normal;font-size:11.5px}

/* poupée avec portrait du héros (fenêtre et module latéral) */
.doll .dc canvas.pcv{width:150px;height:187px;border:2px solid #4a3410;border-radius:6px;image-rendering:pixelated;margin-top:0;box-shadow:inset 0 0 0 1px #000}
.doll.mini{grid-template-columns:38px 1fr 38px;grid-template-areas:"l c r" "b b b";gap:6px 10px;justify-content:stretch}
.doll.mini .sl{width:38px;height:38px}
.doll.mini .dc{justify-content:center}
.doll.mini .dc canvas.pcv{width:100%;max-width:150px;height:auto;aspect-ratio:64/80}
.doll.mini .db{justify-content:center}

/* talents */
#talw.open{position:fixed;inset:0;z-index:70;background:rgba(35,22,8,.7);display:flex;align-items:flex-end;justify-content:center;padding:12px;overflow:auto}
@media (min-width:700px){#talw.open{align-items:center}}
.tlhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.trees{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.th{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:16px;color:#5a1a0e;border-bottom:1px solid var(--gold2);padding-bottom:3px;margin-bottom:6px}
.th small{color:var(--mute);font-size:13px;font-family:var(--sans)}
.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tc{aspect-ratio:1;min-height:52px;border-radius:6px;border:2px solid #6b5a30;background:linear-gradient(#2a2216,#17120d);color:#cbbf9c;font:inherit;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:pointer;overflow:hidden}
.tc.empty{background:none;border:0;cursor:default}
.tc .tn{font-size:8.5px;line-height:1.1;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tc b{font-size:10px;color:#fff}
.tc.lock{opacity:.4}
.tc.can{border-color:#e6c35e;box-shadow:0 0 6px rgba(230,195,94,.7)}
.tc.part{border-color:#1eff00;box-shadow:0 0 6px rgba(30,255,0,.45)}
.tc.max{border-color:#ffd100;background:linear-gradient(#4a3a10,#2a2008)}
.tc.sel{outline:2px solid #8a1f12;outline-offset:1px}
.ttabs{display:none;gap:6px;margin-bottom:8px}
.ttab{flex:1;background:var(--panel2);border:1px solid var(--gold2);border-radius:8px;padding:6px;font:inherit;color:var(--ink);cursor:pointer}
.ttab.on{background:linear-gradient(#b63a28,#7e1c10);color:#fbeed0}
.tdetail{margin-top:12px;min-height:60px}
.ttnext{margin-top:6px;border-top:1px solid #3a3020;padding-top:6px}
.tsum{display:flex;justify-content:space-between;font-size:14px;padding:1px 0}
@media (max-width:759px){
  .trees{grid-template-columns:1fr}.tree:not(.cur){display:none}.ttabs{display:flex}
}

/* choix du mode à la naissance */
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.kind{text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;color:var(--ink);cursor:pointer}
.kind b{display:block;font-family:var(--serif);font-weight:normal;font-size:18px;color:#5a1a0e}
.kind small{display:block;font-size:12px;color:var(--mute);margin-top:3px;line-height:1.35}
.kind.sel{border-color:#8a1f12;background:#efdfb4;box-shadow:0 0 0 2px rgba(138,31,18,.25)}
@media (max-width:520px){.kinds{grid-template-columns:1fr}}
.card .row{margin-top:10px}
.mod.ro .sl{cursor:default}

.cg{color:#b8860b;font-weight:700}.cs{color:#7a7f87;font-weight:700}.cc{color:#a0522d;font-weight:700}
.chip .cg,.chip .cs,.chip .cc{font-weight:600}

.hero2 .h2l em span{text-transform:none;letter-spacing:0;font-size:inherit}
.barlab span .cg,.barlab span .cs,.barlab span .cc{text-transform:none}

.pf{margin-bottom:6px}.pf small{color:var(--mute);font-weight:400}

/* objets communs (blancs) lisibles sur le parchemin */
.it[style*="#ffffff"],.irow .itx b[style*="#ffffff"],.lres b[style*="#ffffff"]{color:#4a4a4a!important;-webkit-text-stroke:0!important;text-shadow:none!important}

/* les décisions dans le récit */
ul.lvl li.choice{display:flex;gap:10px;background:rgba(138,31,18,.07);border:1px solid #c9a46a;border-left:4px solid #8a1f12;border-radius:8px;padding:8px 10px;margin:6px -4px}
ul.lvl li.choice.fail{border-left-color:#a8301f;background:rgba(168,48,31,.09)}
ul.lvl li.choice > span{display:block;min-width:0}
.ch-t{display:block;font-family:var(--serif);font-weight:normal;font-size:16px;color:#5a1a0e}
.ch-c{display:block;font-size:12.5px;color:var(--mute);margin:1px 0 4px}
.ch-o{display:block;font-size:14.5px;color:#3f2f18;margin:2px 0}
.ch-o.bad{color:var(--bad)}
ul.lvl li.choice .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.ch-l{display:block;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.5;color:#5e4a2a;border-top:1px dashed #c9a46a;margin-top:6px;padding-top:6px}

ul.lvl li.choice b.ch-t{text-align:left;min-width:0;color:#5a1a0e}