:root{
  --bg:#0a0d13; --bg2:#0f141d; --panel:#131a26; --panel2:#182131; --line:#26334a; --line2:#34466a;
  --text:#e7e3d6; --dim:#9aa6b8; --faint:#6b7889; --accent:#9fd8ff; --accent2:#5fb4ea;
  --heart:#e9e4d4; --stamina:#7fd49a; --soul:#8fc8ff; --stash:#e0b25c; --essence:#c58bff;
  --good:#7fd49a; --bad:#ef7a7a; --warn:#e8c05c; --radius:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#18233a 0,var(--bg) 60%) fixed;color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,h4,h5{margin:0 0 .5rem;font-weight:600;letter-spacing:.01em}
h1{font-size:1.9rem} h1 small{display:block;font-size:.9rem;color:var(--dim);font-weight:400;letter-spacing:.2em;text-transform:uppercase;margin-top:.2rem}
h2{font-size:1.2rem} h3{font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:.12em} h4{font-size:.85rem;color:var(--dim);margin-top:.8rem} h5{font-size:.8rem;color:var(--accent);margin:.5rem 0 .2rem}
p{margin:.3rem 0}
[hidden]{display:none!important}
.hint{color:var(--dim);font-size:.82rem}
.warn-line{color:var(--warn);font-size:.85rem;min-height:0}
.warn-line:empty{display:none}
small{color:var(--dim)}
.grow{flex:1;min-width:0}
.row{display:flex;gap:.5rem;align-items:center}
.row.wrap{flex-wrap:wrap}.row.tight{gap:.25rem}
.tag{display:inline-block;padding:.05rem .45rem;border:1px solid var(--line2);border-radius:99px;font-size:.72rem;color:var(--dim);white-space:nowrap}
.tag.gm{border-color:var(--warn);color:var(--warn)}
.tag.r-uncommon{color:#9fd8ff}.tag.r-rare{color:#e0b25c}.tag.r-unique{color:#c58bff}

/* champs */
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=number],input[type=password],input[type=search],select,textarea{width:100%;background:#0c121b;border:1px solid var(--line);border-radius:7px;padding:.38rem .55rem;min-width:0}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
input[type=number]{-moz-appearance:textfield}
input.tiny{width:4.2rem;flex:none}input.mid{width:9rem;flex:none}input.attrnum{width:4rem;text-align:center;font-size:1.15rem;font-weight:600;flex:none}input.code{letter-spacing:.35em;text-transform:uppercase;text-align:center;font-size:1.3rem}
select.tiny{width:4.2rem}
textarea{resize:vertical;min-height:2.6rem}
.fld{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fld.big input{font-size:1.15rem;font-weight:600}
.lbl{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.chk{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;cursor:pointer}
.chk input{width:1rem;height:1rem;accent-color:var(--accent2)}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:.4rem .8rem;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent2);background:#1d2a40}
.btn.sm{padding:.18rem .55rem;font-size:.82rem;border-radius:6px}
.btn.primary{background:#1d4a73;border-color:var(--accent2)}.btn.primary:hover{background:#245a8c}
.btn.big{padding:.65rem 1.1rem;font-size:1rem;width:100%;margin-top:.5rem}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset:disabled input,fieldset:disabled textarea,fieldset:disabled select{opacity:.75}
fieldset:disabled .btn,fieldset:disabled .pip,fieldset:disabled .rankbtns button{pointer-events:none;opacity:.5}

/* écran de connexion */
#login{min-height:100%;display:grid;place-items:center;padding:1rem}
.logincard{width:min(760px,100%);background:linear-gradient(180deg,#152033,#0f1623);border:1px solid var(--line2);border-radius:16px;padding:1.6rem;box-shadow:0 20px 60px #000a}
.logincols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1rem 0}
.logincols>div{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border:1px solid var(--line);border-radius:12px;background:#0d1420}
@media(max-width:700px){.logincols{grid-template-columns:1fr}}

/* mise en page */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
#hdr{display:flex;align-items:center;gap:.8rem;padding:.5rem .9rem;border-bottom:1px solid var(--line);background:#0b1019cc;backdrop-filter:blur(6px);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem}.brand b{font-size:1.05rem}
.code-chip{background:#0c121b;border:1px dashed var(--line2);border-radius:6px;padding:.1rem .5rem;cursor:pointer;letter-spacing:.2em;font-weight:600}
.players{display:flex;gap:.3rem;flex:1;flex-wrap:wrap}
.pchip{font-size:.78rem;padding:.08rem .55rem;border-radius:99px;background:#17233a;border:1px solid var(--line)}.pchip.gm{border-color:var(--warn);color:var(--warn)}.pchip.me{border-color:var(--accent2)}
.status{font-size:.78rem}.status.ok{color:var(--good)}.status.off{color:var(--warn)}
.layout{flex:1;display:grid;grid-template-columns:230px minmax(0,1fr) 340px;min-height:0}
.pane{overflow:auto;padding:.8rem;min-height:0}
#chars{border-right:1px solid var(--line);background:#0a0f17}
#side{border-left:1px solid var(--line);background:#0a0f17;display:flex;flex-direction:column;gap:.8rem}
#nav{display:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem}
.logpanel{display:flex;flex-direction:column;min-height:260px;flex:1}
#logs{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem;overflow:auto;flex:1}
@media(max-width:1000px){
  .layout{grid-template-columns:1fr;grid-template-rows:1fr}
  #chars,#sheet,#side{display:none;border:0!important}
  body[data-pane=persos] #chars,body[data-pane=fiche] #sheet,body[data-pane=des] #side{display:flex;flex-direction:column}
  body[data-pane=fiche] #sheet{display:block}
  #nav{display:flex;border-top:1px solid var(--line);background:#0b1019}
  #nav button{flex:1;padding:.8rem;background:none;border:0;border-top:2px solid transparent;color:var(--dim)}
  #nav button.on{color:var(--accent);border-top-color:var(--accent2)}
}

/* liste de persos */
.cl{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;text-align:left;margin-top:.45rem;padding:.55rem .65rem;background:var(--panel);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.cl:hover{border-color:var(--line2)}.cl.on{border-color:var(--accent2);background:#162338}.cl.mine b::before{content:"★ ";color:var(--stash)}
.mini{display:flex;gap:.5rem;font-size:.75rem;font-style:normal;flex-wrap:wrap}.mini i{font-style:normal}.mh{color:var(--heart)}.ms{color:var(--stamina)}.mo{color:var(--soul)}.md{color:var(--bad)}

/* fiche */
.sheethead{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}.sheethead h2{margin:0;font-size:1.4rem}
.sync{font-size:.75rem;color:var(--faint)}.sync[data-state=dirty],.sync[data-state=saving]{color:var(--warn)}.sync[data-state=saved]{color:var(--good)}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:.8rem}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:.45rem .8rem;color:var(--dim);cursor:pointer}.tab.on{color:var(--accent);border-bottom-color:var(--accent2)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;align-items:start}
.cols>.wide{grid-column:1/-1}
@media(max-width:1400px){.cols{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;margin-bottom:.8rem}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:.6rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:.5rem}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;margin:.4rem 0}
@media(max-width:700px){.grid4{grid-template-columns:repeat(2,1fr)}.grid6{grid-template-columns:repeat(3,1fr)}}
.attrs{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.attr{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.6rem;background:#0e1521;border:1px solid var(--line);border-radius:9px}
.aname{font-weight:600}.aname em{color:var(--faint);font-style:normal;font-weight:400;margin-left:.4rem;font-size:.78rem}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:.5rem}
.stat{display:flex;flex-direction:column;background:#0e1521;border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem}.stat span{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}.stat b{font-size:1.1rem}
.pool{margin-bottom:.7rem}.pool-head{display:flex;align-items:center;gap:.4rem}.pname{width:4.5rem;font-weight:600}.bonus{margin-left:auto;font-size:.7rem;color:var(--faint);display:flex;align-items:center;gap:.3rem}
.pips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem;min-height:1.4rem}
.pip{width:1.35rem;height:1.35rem;border:2px solid currentColor;background:transparent;cursor:pointer;padding:0;opacity:.7}
.pip.on{background:currentColor;opacity:1}
.pips.heart{color:var(--heart)}.pips.heart .pip{border-radius:50% 50% 45% 45%}
.pips.stamina{color:var(--stamina)}.pips.stamina .pip{transform:rotate(45deg) scale(.8);border-radius:3px}
.pips.soul{color:var(--soul)}.pips.soul .pip{border-radius:50%}
.pips.stash{color:var(--stash)}.pips.stash .pip{border-radius:3px}
.pips.essence{color:var(--essence)}.pips.essence .pip{border-radius:50% 0 50% 50%}
.list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}
.item{background:#0e1521;border:1px solid var(--line);border-radius:9px;padding:.55rem;display:flex;flex-direction:column;gap:.4rem}.item.row{flex-direction:row}.item.dim{opacity:.6}.item.on{border-color:var(--accent2)}
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.6rem}
.path{background:#0e1521;border:1px solid var(--line);border-radius:9px;padding:.6rem;display:flex;flex-direction:column;gap:.35rem}.path.has.martial{border-color:#5a7d5f}.path.has.mystic{border-color:#5a6f9b}
.pn{font-size:1.05rem}.rankbtns{margin-left:auto;display:flex;gap:.2rem}
.abil{font-size:.82rem;color:var(--text)}.abil.dim{color:var(--dim)}.abil p{margin:.15rem 0}
details summary{cursor:pointer;color:var(--dim);font-size:.8rem}
.skills{display:flex;flex-direction:column;gap:.35rem}.skill{display:flex;align-items:center;gap:.35rem;padding:.3rem .5rem;background:#0e1521;border:1px solid var(--line);border-radius:8px}.skill span{flex:1}.skill b{color:var(--accent);width:2rem}
.notchbar{display:flex;gap:.35rem;flex-wrap:wrap}.notch{width:1.3rem;height:1.3rem;border-radius:50%;border:2px solid var(--line2)}.notch.on{background:var(--accent2);border-color:var(--accent2)}.notch.over{border-color:var(--bad)}.notch.on.over{background:var(--bad)}
.ctext{font-size:.85rem;color:var(--text);margin:.1rem 0}.req{color:var(--warn)}
.empty{text-align:center;padding:4rem 1rem;color:var(--dim)}

/* dés */
.who{margin-bottom:.4rem;color:var(--dim)}.dform{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0}
.preview{background:#0c121b;border:1px dashed var(--line2);border-radius:8px;padding:.5rem .65rem;font-size:.82rem}.pool-total{font-size:1.1rem;font-weight:700;color:var(--accent)}.pl{color:var(--dim)}.pl.cost{color:var(--warn)}
.log{background:#0e1521;border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;animation:pop .25s ease-out}
@keyframes pop{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.log{animation:none}}
.log .lh{display:flex;align-items:baseline;gap:.5rem}.lbl2{color:var(--dim);font-size:.82rem;flex:1}.lt{color:var(--faint);font-size:.72rem;margin-left:auto}
.log.chat{background:none;border:0;padding:.1rem .2rem;font-size:.88rem}.log.marker{text-align:center;color:var(--warn);border-style:dashed;display:flex;justify-content:space-between}
.log.hidden{border-color:var(--warn)}
.lbody{display:flex;align-items:center;gap:.6rem;margin-top:.35rem}.dice{display:flex;flex-wrap:wrap;gap:.25rem;flex:1}
.die{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:6px;background:#1a2438;border:1px solid var(--line2);font-weight:700;font-size:.9rem;color:var(--faint)}
.die.s{background:#1f5f8f;border-color:var(--accent);color:#fff}.die.x2{box-shadow:0 0 0 2px var(--stash);}.die.rr{outline:1px dashed var(--warn);outline-offset:1px}.die.auto{background:#4a3a92;border-color:var(--essence)}
.outcome{text-align:center;min-width:3.6rem}.outcome b{display:block;font-size:1.6rem;line-height:1}.outcome small{font-size:.7rem}.outcome.win b{color:var(--good)}.outcome.lose b{color:var(--bad)}
.ml{font-size:.8rem;color:var(--dim);margin-top:.25rem}
.initlist{margin:.3rem 0 0;padding-left:1.4rem}.initlist li{padding:.1rem 0}.initlist li span{float:right;font-weight:700;color:var(--accent)}
dialog.picker{background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:14px;width:min(640px,94vw);max-height:84vh;padding:1rem}
dialog.picker::backdrop{background:#000a}
.plist{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem;overflow:auto;max-height:60vh}
.pitem{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;background:#0e1521;border:1px solid var(--line);border-radius:8px;padding:.5rem .65rem;cursor:pointer}.pitem:hover{border-color:var(--accent2)}
#toasts{position:fixed;right:1rem;bottom:4.5rem;display:flex;flex-direction:column;gap:.4rem;z-index:50;max-width:min(360px,90vw)}
.toast{background:#17233a;border:1px solid var(--line2);border-left:4px solid var(--accent2);padding:.55rem .8rem;border-radius:8px;box-shadow:0 8px 24px #0008;transition:opacity .4s}.toast.warn{border-left-color:var(--warn)}.toast.error{border-left-color:var(--bad)}.toast.out{opacity:0}

.log.chat .lt{margin:0 .45rem 0 0}
.fld .row{flex-wrap:nowrap}