:root{
  --night:#070b1d; --night2:#0f1638; --panel:rgba(16,22,56,.88); --line:rgba(245,212,15,.25);
  --gold:#f5d40f; --gold2:#c99a06; --text:#eef1ff; --muted:#9aa3c7;
  --hp:#d6303a; --edv:#2f9be8; --good:#5fd38d; --bad:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night);color:var(--text);font-family:Lato,system-ui,sans-serif}
#stars{position:fixed;inset:0;z-index:-1;
  background:
   radial-gradient(1px 1px at 10% 20%,#fff8 50%,transparent),radial-gradient(1px 1px at 30% 80%,#fff6 50%,transparent),
   radial-gradient(1.5px 1.5px at 70% 30%,#fff9 50%,transparent),radial-gradient(1px 1px at 85% 75%,#fff7 50%,transparent),
   radial-gradient(1px 1px at 50% 50%,#fff5 50%,transparent),radial-gradient(1.5px 1.5px at 20% 60%,#fff6 50%,transparent),
   radial-gradient(1px 1px at 90% 10%,#fff8 50%,transparent),radial-gradient(1px 1px at 60% 90%,#fff5 50%,transparent),
   radial-gradient(ellipse at 50% 0%,#1c2a6b 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,#3a1950 0%,transparent 55%),var(--night);
  background-size:250px 250px,310px 310px,270px 270px,190px 190px,330px 330px,220px 220px,280px 280px,240px 240px,100% 100%,100% 100%,100% 100%}
h1,h2,h3,.combat-title,.vs{font-family:Cinzel,serif;letter-spacing:.04em}
h1{font-size:2.6rem;margin:0;text-align:center;color:var(--gold);text-shadow:0 0 18px #f5d40f66}
h1 span{display:block;font-size:1.3rem;color:var(--text)}
h2{color:var(--gold);margin:.2rem 0 .8rem;font-size:1.25rem}
h3{color:var(--gold);font-size:.95rem;margin:.6rem 0 .4rem}
.hidden{display:none!important}
.screen{min-height:100vh}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 10px 30px #0008}
.panel.tight{padding:10px 12px}
.sub{text-align:center;color:var(--muted);margin:.3rem 0 1.4rem;font-style:italic}
.hint{color:var(--muted);font-size:.85rem}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
input,select{width:100%;background:#0a1030;border:1px solid #34407a;color:var(--text);padding:9px 10px;border-radius:8px;font:inherit;margin-top:4px}
input[type=checkbox]{width:auto;margin:0 6px 0 0}
input[type=number]{width:70px}
button{background:#1d2a66;color:var(--text);border:1px solid #3d4c9a;padding:9px 14px;border-radius:8px;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
button:hover:not(:disabled){filter:brightness(1.25)}
button:disabled{opacity:.4;cursor:not-allowed}
button.gold{background:linear-gradient(180deg,#ffe45c,var(--gold2));color:#2a1d00;border-color:#ffe45c}
button.red{background:linear-gradient(180deg,#e2474f,#8e1d24);border-color:#ff7b82}
button.purple{background:linear-gradient(180deg,#8c55c9,#4f2584);border-color:#b48af0}
button.big{width:100%;padding:13px;font-size:1.05rem;margin-top:12px}
.row{display:flex;gap:8px;align-items:center}
.or{text-align:center;color:var(--muted);margin:14px 0}
.links{justify-content:center;margin-top:16px;font-size:.9rem}
a{color:var(--gold)}
.home-panel{max-width:420px;margin:12vh auto 0;width:calc(100% - 32px)}
.home-panel button.wide{width:100%;padding:12px}
.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:700;margin:0}
.code{font-family:monospace;background:#0a1030;padding:2px 10px;border-radius:6px;letter-spacing:.2em;color:var(--gold)}

/* Salon */
.lobby-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:16px;padding:16px;max-width:1300px;margin:0 auto}
@media(max-width:850px){.lobby-grid{grid-template-columns:1fr}}
#lobby-players{list-style:none;padding:0;margin:0}
#lobby-players li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff10}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 0 2px #0008}
.cfg-grid{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:.9rem;margin-top:6px}
.ext-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ext-list label{display:flex;align-items:center;margin:0;padding:5px 9px;border-radius:20px;background:#0a1030;border:1px solid #34407a;color:var(--text);cursor:pointer}
.char-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pick{position:relative;border-radius:10px;overflow:hidden;border:2px solid #34407a;cursor:pointer;background:#0a1030;transition:.15s}
.pick:hover{transform:translateY(-2px)}
.pick.mine{border-color:var(--gold);box-shadow:0 0 16px #f5d40f88}
.pick.taken{opacity:.45;cursor:not-allowed}
.pick .who{position:absolute;top:6px;right:6px;font-size:.7rem;padding:2px 6px;border-radius:10px;background:#000a}
.pick .pname{padding:6px 8px;font-size:.82rem;font-weight:700}
.pick .pstats{padding:0 8px 8px;font-size:.72rem;color:var(--muted)}
.pick .info{position:absolute;top:6px;left:6px;background:#000a;border:none;padding:2px 7px;font-size:.75rem;border-radius:10px}

/* Portrait / placeholder */
.portrait{width:100%;aspect-ratio:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover}
.ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,var(--fc) 0%,#000 75%);font-family:Cinzel,serif;color:#fff;text-shadow:0 2px 6px #000}
.ph b{font-size:2.2em;line-height:1}
.ph small{font-size:.55em;opacity:.85;margin-top:4px;text-transform:uppercase;letter-spacing:.1em}

/* Jeu */
.game-layout{display:grid;grid-template-columns:1fr 330px;gap:12px;padding:12px;height:100vh}
@media(max-width:1000px){.game-layout{grid-template-columns:1fr;height:auto}}
#board-wrap{display:flex;align-items:center;justify-content:center;min-height:0;container-type:size}
@media(max-width:1000px){#board-wrap{container-type:inline-size}#board{width:100%!important}.tile{font-size:7px}.center{font-size:.8rem}}
#board{display:grid;gap:4px;width:100%;max-height:100%;margin:auto}
.tile{position:relative;border-radius:7px;overflow:hidden;border:2px solid #2b3670;background:#0d1440;cursor:pointer;min-width:0;min-height:0;
  display:flex;flex-direction:column;font-size:clamp(7px,.9cqmin,11px)}
.tile.hidden-t{background:repeating-linear-gradient(45deg,#121a4d 0 6px,#0e1642 6px 12px);border-color:#38448a}
.tile.hidden-t::after{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f5d40f55;font-size:2.4em}
.tile.start{background:linear-gradient(135deg,#ffe45c,#b88600);color:#2a1d00;border-color:#ffe45c;align-items:center;justify-content:center;font-family:Cinzel,serif;font-weight:800;font-size:clamp(8px,1.1cqmin,14px)}
.tile.trap{background:linear-gradient(160deg,#5a1218,#24070b);border-color:#a83039}
.tile.bonus{background:linear-gradient(160deg,#124a33,#06221a);border-color:#2f9a6c}
.tile.roulette{background:conic-gradient(from 0deg,#5a1218,#124a33,#5a1218,#124a33,#5a1218);border-color:#c9a3ff}
.tile.repos{background:linear-gradient(160deg,#20306a,#0b1238)}
.tile .t-ico{flex:1;display:flex;align-items:center;justify-content:center;font-size:2.3em}
.tile .t-name{background:#000b;padding:2px 3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.tile.char{border-color:var(--fc)}
.tile.char .portrait{aspect-ratio:auto;flex:1}
.tile.char .ph b{font-size:2.2em}
.tile.owned::before{content:"";position:absolute;inset:0;border:3px solid var(--oc);border-radius:5px;z-index:2;pointer-events:none}
.tile .flag{position:absolute;top:2px;right:2px;z-index:3;font-size:1.1em}
.tile.current{box-shadow:0 0 0 2px #fff,0 0 14px #fff}
.tokens{position:absolute;bottom:16px;left:2px;right:2px;display:flex;flex-wrap:wrap;gap:2px;z-index:4;justify-content:center}
.token{width:clamp(12px,2.2cqmin,24px);height:clamp(12px,2.2cqmin,24px);border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:clamp(7px,1cqmin,11px);box-shadow:0 2px 6px #000;text-shadow:0 1px 2px #000}
.token.active{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

.center{grid-column:2/-2;grid-row:2/-2;background:#0a1030cc;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.center-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.turn-banner{font-family:Cinzel,serif;font-size:1.1rem;color:var(--gold)}
.weather{font-size:.85rem;color:var(--muted);max-width:340px}
.weather b{color:var(--text)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.log{flex:1 1 0;overflow:auto;font-size:.84rem;line-height:1.45;padding-right:4px;min-height:0}
.log div{padding:1px 0}
.log .good{color:var(--good)} .log .bad{color:var(--bad)} .log .big{color:var(--gold);font-weight:700}
.log .turn{color:#8fb3ff;margin-top:6px;font-weight:700} .log .weather{color:#9fd8ff} .log .roulette{color:#d6b4ff}
.log .combat{color:#ffb36b;font-weight:700} .log .miss{color:var(--muted)} .log .hit{color:#ffd0a0} .log .card{color:#c9a3ff}

#side{display:flex;flex-direction:column;gap:10px;min-height:0}
.pcard{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:7px;border-radius:9px;margin-bottom:6px;background:#0a1030;border:1px solid #26306a;cursor:pointer}
.pcard.turn{border-color:var(--gold);box-shadow:0 0 10px #f5d40f55}
.pcard .portrait{border-radius:6px;border:2px solid var(--pc)}
.pcard .ph b{font-size:1.1rem}
.pcard .pn{font-weight:700;font-size:.86rem;display:flex;justify-content:space-between;gap:4px}
.pcard .pn small{color:var(--muted);font-weight:400}
.bar{height:9px;background:#2a0a0e;border-radius:5px;overflow:hidden;margin-top:3px;position:relative}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#9b1a22,var(--hp));transition:width .4s}
.bar span{position:absolute;inset:0;font-size:8px;line-height:9px;text-align:center;font-weight:700}
.gauge{display:flex;gap:3px;margin-top:4px}
.gauge b{width:18px;height:8px;border-radius:3px;border:1px solid #2f9be888;background:#0b2440}
.gauge b.on{background:linear-gradient(180deg,#7ccaff,var(--edv));box-shadow:0 0 6px #2f9be8}
.meta{font-size:.72rem;color:var(--muted);margin-top:3px}
.off{opacity:.5}

.hand{display:flex;flex-wrap:wrap;gap:6px}
.card{width:calc(50% - 3px);background:linear-gradient(180deg,#2a1b52,#160d33);border:1px solid #6b4bb0;border-radius:8px;padding:6px 7px;font-size:.74rem;position:relative}
.card b{display:block;font-size:.8rem;color:#e7d6ff;padding-right:22px}
.card .cost{position:absolute;top:5px;right:6px;background:var(--edv);border-radius:9px;padding:0 6px;font-weight:800;font-size:.72rem}
.card .use{font-size:.65rem;color:var(--muted);font-style:italic}
.card button{margin-top:5px;padding:3px 8px;font-size:.72rem;width:100%}
.chat{flex:1;display:flex;flex-direction:column;min-height:140px}
#chat-log{flex:1;overflow:auto;font-size:.82rem;min-height:60px;max-height:220px}
#chat-form input{margin-top:6px}

/* Overlays */
.overlay{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.modal-box,.combat-box{background:var(--night2);border:1px solid var(--line);border-radius:14px;max-width:1100px;width:100%;max-height:94vh;overflow:auto;padding:18px;position:relative}
.close{position:absolute;top:10px;right:10px;padding:4px 10px;z-index:3}
.combat-title{text-align:center;color:var(--gold);font-size:1.4rem;margin-bottom:8px}
.combat-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
@media(max-width:900px){.combat-sides{grid-template-columns:1fr}.vs{display:none}}
.vs{font-size:2rem;color:var(--gold);text-shadow:0 0 12px var(--gold)}
.combat-side .bar{height:14px}
.combat-side .bar span{font-size:10px;line-height:14px}
.mods{font-size:.78rem;color:var(--good);min-height:1.1em;margin-top:4px}
.dice-row{display:flex;justify-content:center;gap:12px;min-height:64px;margin:10px 0;flex-wrap:wrap}
.die{min-width:56px;height:56px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;
  background:linear-gradient(160deg,#fff,#cfd6f3);color:#111;box-shadow:0 6px 16px #000a;position:relative}
.die small{font-size:.55rem;font-weight:700;color:#445}
.die.d20{background:linear-gradient(160deg,#ffe45c,#c99a06);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);min-width:62px;height:62px}
.die.d4{background:linear-gradient(160deg,#ff9aa0,#c3303a);color:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:18px;font-size:1.1rem}
.die.d6{background:linear-gradient(160deg,#9fd0ff,#2f6fb8);color:#fff}
.die.ok{outline:3px solid var(--good)} .die.ko{outline:3px solid var(--bad)}
.die.rolling{animation:shake .12s infinite}
@keyframes shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.die-label{font-size:.7rem;color:var(--muted);text-align:center;max-width:110px;margin-top:4px}
.die-wrap{display:flex;flex-direction:column;align-items:center}
#combat-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 10px}
#combat-actions .grp{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.combat-log{max-height:180px;overflow:auto;font-size:.84rem;background:#0008;border-radius:8px;padding:8px}

/* Fiche personnage (reprend la fiche papier) */
.fiche{background:#fff;color:#111;border:2px solid #111;font-family:Lato,sans-serif;width:100%;max-width:720px;margin:0 auto}
.fiche-head,.fiche-foot{display:flex;justify-content:space-between;padding:3px 8px;font-weight:700;background:var(--fc);border-bottom:2px solid #111}
.fiche-head{color:#e8000b;font-size:clamp(.9rem,2.3vw,1.45rem)}
.fiche-head.dark,.fiche-foot.dark{color:#fff}
.fiche-foot{border-top:2px solid #111;border-bottom:none;font-style:italic;color:#111;font-size:clamp(.7rem,1.6vw,1rem)}
.fiche-body{display:grid;grid-template-columns:42% 58%}
.fiche-body .portrait{aspect-ratio:auto;height:100%;min-height:200px}
.fiche-tab{display:flex;flex-direction:column;font-size:clamp(.72rem,1.7vw,1.05rem)}
.fiche-tab>div{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:3px 6px;border-bottom:1px solid #cfcfcf;min-height:1.9em}
.fiche-tab .h{font-weight:800;font-size:1.1em}
.fiche-tab .k{font-style:italic}
.fiche-tab .sec-off{color:#4a86d8;font-style:italic}
.fiche-tab .sec-ext{color:#a0433c;font-style:italic}
.fiche-tab .sec-pas{color:#7a3ec0;font-style:italic}
.fiche-tab .desc{display:block;font-size:.88em}
.fiche-tab .dbl{border-bottom:3px double #111}
.prov{font-size:.7rem;color:#c55;font-style:italic}
.fiche-mini{max-width:none}
.fiche-mini .fiche-body{grid-template-columns:38% 62%}
.fiche-mini .fiche-tab{font-size:.78rem}
.fiche-mini .fiche-head{font-size:.9rem}
.fiche-mini .fiche-foot{display:none}
.fiche-mini .fiche-body .portrait{min-height:150px}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px}
@media(max-width:500px){.gallery{grid-template-columns:1fr}}
.rules h1{font-size:1.6rem;text-align:left}
.rules h2{font-size:1.1rem;margin-top:1.2rem}
.rules li{margin:3px 0}
.rules{line-height:1.5;font-size:.95rem}
.rules table{border-collapse:collapse;margin:6px 0}
.rules td,.rules th{border:1px solid #34407a;padding:3px 8px;font-size:.85rem}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#8e1d24;color:#fff;padding:10px 18px;border-radius:10px;z-index:99;opacity:0;transition:.3s;pointer-events:none;max-width:90vw}
#toast.show{opacity:1}
.winner{font-family:Cinzel,serif;color:var(--gold);font-size:1.3rem;text-align:center}

.pick.nopick{cursor:default}.pick.nopick:hover{transform:none}
.pcard{grid-template-columns:52px 1fr}
.pport{display:flex;flex-direction:column;gap:3px}
.reserves{display:flex;gap:3px}
.reserve{width:24px;border-radius:4px;overflow:hidden;border:1px solid #ffffff55;opacity:.8}
.reserve .ph b{font-size:.6rem}.reserve .ph small{display:none}
.reserve.dead{filter:grayscale(1);opacity:.35}
.pcard.elim{opacity:.45;filter:grayscale(.8)}
.tile.held::before{border-style:double;border-width:4px}
.tile.fallen .portrait{filter:grayscale(1) brightness(.5)}
.side-head{font-weight:700;margin-bottom:6px;padding:4px 8px;border-radius:6px;background:#0008}
.side-head.on{background:#f5d40f33;color:var(--gold)}

.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabs button{flex:1;background:#0a1030}
.tabs button.on{background:#1d2a66;border-color:var(--gold);color:var(--gold)}
.err{color:var(--bad);min-height:1.2em;font-size:.88rem;margin:.6rem 0 0}
.whoami{text-align:center;font-size:.9rem;color:var(--muted);margin:-.6rem 0 1rem}
#my-rooms{margin-top:16px}
#my-rooms h3{margin-bottom:6px}
.room-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-bottom:6px;background:#0a1030}
.room-row .code{flex:none}
.room-row span{font-weight:400;font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{font-size:.85rem;text-decoration:none}
.side-top{display:flex;justify-content:space-between;align-items:center;padding:0 4px}

.okmsg{color:var(--good);min-height:0;font-size:.9rem;margin:.4rem 0 0}
#btn-admin{margin-bottom:12px}
.badge{background:var(--bad);color:#fff;border-radius:10px;padding:0 7px;font-size:.78rem;margin-left:6px}
.adm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.adm-table td{padding:6px 6px;border-bottom:1px solid #ffffff14;vertical-align:middle}
.adm-table td:last-child{text-align:right;white-space:nowrap}
.adm-table button{padding:4px 9px;font-size:.78rem;margin-left:4px}
.pill{font-size:.72rem;padding:1px 7px;border-radius:9px;background:#0a1030;border:1px solid #34407a;margin-left:6px}
.pill.pending{border-color:var(--gold);color:var(--gold)}
.switch{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.95rem;margin:4px 0 14px}
.inline-form{display:flex;gap:6px;margin-top:6px}
.inline-form input{margin:0}

.tile.has-back::after{display:none}
.tile img.back{width:100%;height:100%;object-fit:cover}
.tile.secret{opacity:.8}
.tile .secret-tag{position:absolute;top:2px;left:2px;z-index:3;font-size:.8em;background:#000a;padding:0 4px;border-radius:4px}
.tile.armor{box-shadow:0 0 0 2px var(--gold),0 0 18px var(--gold)}
.armor-ph b{font-size:2em}
.reserve.gold{border-color:var(--gold)}
.wake-box{display:flex;gap:12px;align-items:center;background:#0008;border:1px solid var(--gold);border-radius:10px;padding:10px;width:100%}
.wake-img{width:92px;flex:none;border-radius:8px;overflow:hidden}
.wake-title{font-family:Cinzel,serif;color:var(--gold);font-size:1.05rem}