/* ===== Alnasia — thème « manga / parchemin doré » ===== */
:root{
  --gold:#f0c968; --gold2:#b98a30; --gold3:#7a561a;
  --wood1:#3b2a1e; --wood2:#1e140d; --wood3:#4d3826;
  --parch:#f3e6c4; --parch2:#dcc794; --parch3:#c2a86a;
  --ink:#2c1b10; --ink2:#5a3d24;
  --hp:#ee4a5c; --pa:#4aa8ff; --pm:#52d66a; --xp:#b07cff;
  --feu:#ff7a2a; --eau:#3aa8ff; --air:#58e0a0; --terre:#e0b040;
  --ui:'Trebuchet MS','Segoe UI',Verdana,sans-serif; --serif:Georgia,'Palatino Linotype',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#150f22;color:#f6ecd6;font:14px/1.35 var(--ui);user-select:none}
.hidden{display:none!important}
canvas#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block}
canvas#ov{position:fixed;inset:0;pointer-events:none}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(10,4,20,.55) 100%)}
img{-webkit-user-drag:none}
.sub{opacity:.7;font-weight:400;font-size:12px}
.err{color:#ff9a9a;min-height:18px;font-size:13px}

/* boutons */
.btn{font:700 14px var(--ui);color:#3a250f;background:linear-gradient(#f9e9b8,#d9b25a 55%,#b98a30);border:2px solid #5a3d14;border-radius:10px;padding:9px 18px;cursor:pointer;box-shadow:0 2px 0 #5a3d14,inset 0 1px 0 #fff8;text-shadow:0 1px 0 #fff6;transition:transform .08s,filter .12s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 #5a3d14}
.btn.gold{background:linear-gradient(#fff2c4,#f0c14a 50%,#c8901c)}
.btn.danger{background:linear-gradient(#ffd0c8,#e8705a 55%,#b03a28);color:#3a0e08;border-color:#5a1a10;box-shadow:0 2px 0 #5a1a10,inset 0 1px 0 #fff8}
.btn.big{font-size:20px;padding:14px 46px;letter-spacing:.06em}
.btn.link{background:none;border:none;box-shadow:none;color:#f0c968;text-shadow:none;padding:6px;text-decoration:underline}
.btn:disabled{filter:grayscale(.8) brightness(.8);cursor:not-allowed;transform:none}
.btn.sm{padding:4px 10px;font-size:12px;border-radius:8px}
input,select{font:14px var(--ui);padding:10px 12px;border-radius:9px;border:2px solid #6a4a22;background:#2a1c12;color:#f6ecd6;outline:none;width:100%}
input:focus{border-color:var(--gold)}
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}

/* écrans de menu */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.screen>*{pointer-events:auto}
.logo{margin-top:6vh;text-align:center;display:flex;flex-direction:column}
.logo .l1{font:900 78px/1 var(--serif);letter-spacing:.12em;color:#ffe7a0;text-shadow:0 3px 0 #a0681a,0 6px 0 #5a3410,0 0 40px #ffb84a88,0 8px 18px #000a;-webkit-text-stroke:2px #5a3410}
.logo .l2{font:italic 19px var(--serif);color:#f6e6c0;text-shadow:0 2px 6px #000;margin-top:6px;letter-spacing:.08em}
.logo.small{margin-top:2vh}.logo.small .l1{font-size:46px}
.card{background:linear-gradient(#3d2c1f ,#21160e);border:3px solid var(--gold2);border-radius:16px;box-shadow:0 0 0 2px #2a1a0a,0 14px 40px #000b,inset 0 0 0 2px #fff2;padding:20px 24px}
.authbox{width:350px;margin-top:5vh;display:flex;flex-direction:column;gap:12px}
#auth{justify-content:flex-start}
#chars .slotsbox{position:absolute;left:3vw;top:15vh;width:340px}
.slotsbox h2,.createbox h2{margin:0 0 12px;font:700 22px var(--serif);color:var(--gold)}
#slots{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.slot{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;border:2px solid #6a4a22;background:linear-gradient(#4a3524,#2a1c12);cursor:pointer;position:relative;transition:transform .1s,border-color .1s}
.slot:hover{border-color:var(--gold);transform:translateX(4px)}
.slot.sel{border-color:#fff2b0;box-shadow:0 0 18px #ffd66a88,inset 0 0 12px #ffd66a33}
.slot img.pt{width:62px;height:76px;object-fit:cover;object-position:50% 20%;border-radius:10px;background:radial-gradient(#5a4a8a,#2a2050);border:2px solid #8a6a32}
.slot b{font:700 17px var(--serif);color:#ffe9b0}
.slot .del{position:absolute;right:8px;top:8px;background:none;border:none;color:#e89a8a;cursor:pointer;font-size:12px;opacity:.6}
.slot .del:hover{opacity:1}
.slot.empty{justify-content:center;color:#d8c08a;border-style:dashed;min-height:96px;font:700 16px var(--serif)}
#charinfo{position:absolute;right:3vw;top:15vh;width:300px;text-align:left}
#charinfo h3{margin:0 0 6px;font:700 24px var(--serif);color:var(--gold)}
#charinfo .k{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #fff2}
#btnPlay{position:absolute;bottom:7vh}
.floaterr{position:absolute;bottom:3vh}

/* création */
.createbox{position:absolute;left:3vw;top:5vh;width:390px;max-height:90vh;overflow:auto}
.lab{font:700 12px var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin:12px 0 6px;opacity:.85}
#classes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cls{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:12px;border:2px solid #6a4a22;background:linear-gradient(#4a3524,#2a1c12);cursor:pointer;font:700 12px var(--ui);color:#ffe9b0}
.cls img{width:52px;height:52px}
.cls:hover{border-color:var(--gold)}
.cls.sel{border-color:#fff2b0;box-shadow:0 0 16px var(--c,#ffd66a),inset 0 0 12px #ffd66a44;transform:translateY(-3px)}
.desc{background:#0006;border-radius:10px;padding:10px 12px;font-size:13px;min-height:62px;color:#f0e0bc;margin-top:8px;border-left:4px solid var(--gold2)}
#sexes{display:flex;gap:10px}
.sexbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:12px;border:2px solid #6a4a22;background:linear-gradient(#4a3524,#2a1c12);color:#f0e0bc;font:700 14px var(--ui);cursor:pointer}
.sexbtn svg{width:22px;height:22px}
.sexbtn[data-s=m].sel{border-color:#7ac8ff;color:#7ac8ff;box-shadow:0 0 14px #7ac8ff88}
.sexbtn[data-s=f].sel{border-color:#ff9ac8;color:#ff9ac8;box-shadow:0 0 14px #ff9ac888}
.approw{display:flex;align-items:center;gap:10px;margin:6px 0}.approw>span{width:62px;font-size:13px;opacity:.85}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:28px;height:28px;border-radius:50%;border:3px solid #0006;cursor:pointer;box-shadow:inset 0 0 0 2px #fff4}
.sw.sel{border-color:#fff;box-shadow:0 0 10px #fff9}
.sw.tx{border-radius:8px;width:auto;padding:4px 9px;background:#3a2a1c;color:#f0e0bc;font:700 12px var(--ui);display:flex;align-items:center}
.sw.tx.sel{background:#7a5a22}
.hint2{position:absolute;bottom:4vh;font-size:13px;opacity:.75;text-shadow:0 1px 4px #000}
.createbox .row{margin-top:10px;position:sticky;bottom:-4px;padding:6px 0;background:linear-gradient(#0000,#2a1c12 30%)}
.createbox .lab{margin:8px 0 4px}
.createbox .approw{margin-bottom:2px}

/* ===== HUD ===== */
#game{position:fixed;inset:0;pointer-events:none}
#game>*{pointer-events:auto}
#game>#hudTL,#game>#hudTR,#game>#fightTop,#game>#banner,#game>#turnBanner,#game>#notices,#game>#hint{pointer-events:none}
.plate{background:linear-gradient(#3b2a1e,#1e140d);border:3px solid var(--gold2);border-radius:14px;box-shadow:0 6px 18px #000a,inset 0 0 0 2px #fff2}
#hudTL .who{flex:1;display:flex;flex-direction:column;gap:3px}
#hname{font:700 16px var(--serif);color:#ffe9b0}#hlv{font-size:12px;opacity:.8}
.bar{position:relative;height:13px;border-radius:7px;background:#0009;border:2px solid #000a;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(#d8b0ff,var(--xp));transition:width .25s}
.bar span{position:absolute;inset:0;text-align:center;font:700 10px/11px var(--ui);text-shadow:0 1px 2px #000}
.gold{display:flex;align-items:center;gap:6px}.gold img{width:20px;height:20px}.gold b{color:#ffe27a}
#hudTR{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#mini{border:3px solid var(--gold2);border-radius:12px;box-shadow:0 6px 18px #000a;background:#0d0b14}
.zinfo{display:flex;flex-direction:column;align-items:flex-end;text-shadow:0 1px 4px #000,0 0 8px #000}
.zinfo b{font:700 17px var(--serif);color:#ffe9b0}.zinfo span{font-size:12px;opacity:.85}

/* frise de combat */
#fightTop{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:flex-start}
#timeline{display:flex;gap:6px;padding:6px 10px;background:linear-gradient(#3b2a1e,#1e140d);border:3px solid var(--gold2);border-radius:14px;box-shadow:0 6px 18px #000a;max-width:60vw;overflow:hidden}
.tl{width:50px;position:relative;opacity:.9;transition:transform .2s,opacity .2s}
.tl img{width:50px;height:56px;object-fit:cover;object-position:50% 14%;border-radius:9px;border:3px solid #4a8aff;background:#2a2050;display:block}
.tl.m img{border-color:#e8503a;background:#3a1a20}
.tl.cur{transform:translateY(8px) scale(1.18);opacity:1;z-index:2}
.tl.cur img{box-shadow:0 0 16px #fff8;border-color:#fff2b0}
.tl.dead{filter:grayscale(1) brightness(.5)}
.tl .hb{height:5px;background:#000a;border-radius:3px;margin-top:2px;overflow:hidden}.tl .hb i{display:block;height:100%;background:#52d66a;width:100%}
.tl.m .hb i{background:#ee4a5c}
#turnBox{display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(#3b2a1e,#1e140d);border:3px solid var(--gold2);border-radius:14px;padding:6px 12px;box-shadow:0 6px 18px #000a}
#timer{position:relative;width:50px;height:50px}#timer svg{width:50px;height:50px}
#timer .trk{fill:#0008;stroke:#000a;stroke-width:5}#timer .arc{fill:none;stroke:var(--pm);stroke-width:5;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0}
#timer.low .arc{stroke:var(--hp)}
#timerTxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 17px var(--serif);color:#fff}
#roundTxt{font:700 12px var(--ui);color:var(--gold)}

.sp{position:relative;width:54px;height:54px;border-radius:12px;background:#120a06;border:2px solid #6a4a22;cursor:pointer;transition:transform .1s}
.sp img{width:100%;height:100%;border-radius:10px;display:block}
.sp:hover{transform:translateY(-4px);border-color:var(--gold)}
.sp.sel{border-color:#fff;box-shadow:0 0 14px #fff9;transform:translateY(-6px)}
.sp.off{filter:grayscale(.85) brightness(.55)}
.sp .k{position:absolute;left:3px;top:1px;font:700 10px var(--ui);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.sp .c{position:absolute;right:-5px;bottom:-5px;min-width:20px;height:20px;border-radius:10px;background:linear-gradient(#6ac0ff,#1c5ac8);border:2px solid #0a2a5a;font:900 11px/16px var(--ui);text-align:center;color:#fff}
.sp .cd{position:absolute;inset:0;border-radius:10px;background:#000b;color:#fff;font:900 20px/50px var(--serif);text-align:center}
.sp.lock::after{content:'';position:absolute;inset:0;border-radius:10px;background:#000a}
.sp .lv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 12px var(--ui);color:#ffd27a;z-index:2;text-shadow:0 1px 3px #000}
/* discussion */
#chatbox{position:absolute;left:12px;bottom:12px;width:var(--chatw,340px)}
#chatlog{max-height:150px;overflow:hidden;font-size:12.5px;display:flex;flex-direction:column;justify-content:flex-end;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none;padding:0 4px 4px}
#chatlog .sys{color:#ffd27a}#chatlog .z{color:#c58bff}#chatlog .gu{color:#5aa8ff}
#chatin{padding:6px 10px;font-size:12.5px;background:#1e140dcc}
#notices{position:absolute;left:50%;top:22%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.nt{background:#1e140dd8;border:2px solid var(--gold2);border-radius:10px;padding:5px 14px;font-size:13px;animation:nt .25s}
.nt.warn{border-color:#ee4a5c}.nt.lv{border-color:#fff2b0;color:#ffe9b0;font-weight:700}.nt.loot{border-color:#ffd27a}.nt.quest{border-color:#58e0a0}
@keyframes nt{from{opacity:0;transform:translateY(-8px)}}
#hint{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);background:#1e140dd8;border:2px solid var(--gold2);border-radius:10px;padding:6px 16px;font-weight:700}
#banner{position:absolute;left:50%;top:14%;transform:translateX(-50%);text-align:center;font:900 44px var(--serif);color:#ffe9b0;text-shadow:0 3px 0 #7a4a10,0 0 24px #ffb84a;animation:ban 3.5s forwards;pointer-events:none}
#banner small{display:block;font:italic 18px var(--serif);color:#f6e6c0}
@keyframes ban{0%{opacity:0;transform:translateX(-50%) scale(.8)}12%{opacity:1;transform:translateX(-50%) scale(1)}78%{opacity:1}100%{opacity:0}}
#turnBanner{position:absolute;left:50%;top:32%;transform:translateX(-50%);font:900 54px var(--serif);color:#fff;-webkit-text-stroke:2px #2a1a0a;text-shadow:0 4px 0 #2a1a0a,0 0 30px var(--c,#ffd66a);animation:ban 1.6s forwards;white-space:nowrap}

/* menus contextuels / résultat */
#ctx{position:absolute;background:linear-gradient(#3b2a1e,#1e140d);border:3px solid var(--gold2);border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px #000c;min-width:220px;z-index:30}
#ctx b{font:700 15px var(--serif);color:var(--gold);display:block;margin-bottom:4px}
#ctx .sub{display:block;margin-bottom:8px}
#result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:440px;z-index:40;text-align:center;padding:22px 26px;animation:pop .3s}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}}
#result h2{font:900 38px var(--serif);margin:0 0 10px}
#result.win h2{color:#ffe27a;text-shadow:0 3px 0 #7a4a10,0 0 24px #ffb84a}
#result.lose h2{color:#ff8a8a;text-shadow:0 3px 0 #4a0a10}
#result .rw{display:flex;justify-content:center;gap:18px;margin:10px 0;font:700 16px var(--ui)}
#result .rw span{display:flex;align-items:center;gap:6px}
#result .rw img{width:26px;height:26px}
#result .loot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0 14px}

/* fenêtres */
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;max-width:96vw;max-height:84vh;display:flex;flex-direction:column;z-index:20;background:linear-gradient(#f6ead0,#dcc794);color:var(--ink);border:4px solid var(--gold2);border-radius:16px;box-shadow:0 0 0 3px #2a1a0a,0 16px 50px #000c,inset 0 0 40px #8a5a1a33}
.panel .ph{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:move;background:linear-gradient(#5a3e26,#33231a);color:var(--gold);border-radius:10px 10px 0 0;border-bottom:3px solid var(--gold2)}
.panel .ph h3{margin:0;font:700 19px var(--serif);flex:1;display:flex;align-items:center;gap:8px}
.panel .ph h3 img{width:26px;height:26px}
.panel .ph .x{width:28px;height:28px;border-radius:50%;border:2px solid var(--gold2);background:#6a2a22;color:#fff;cursor:pointer;font-weight:900;padding:0}
.panel .pb{padding:14px 16px;overflow:auto;flex:1}
.panel h4{font:700 15px var(--serif);margin:12px 0 6px;color:#6a3a10;border-bottom:2px solid #b98a3066;padding-bottom:3px}
.panel .btn{border-color:#5a3d14}
.panel .sub{color:#5a3d24}
.panel input,.panel select{background:#fff8e4;border-color:#b98a30;color:var(--ink);padding:6px 9px;font-size:13px}
.panel.wide{width:860px}
.tabs{display:flex;gap:4px;margin-bottom:10px}
.tab{flex:1;text-align:center;padding:7px;border-radius:9px 9px 0 0;border:2px solid #b98a30;border-bottom:none;background:#e6d3a2;cursor:pointer;font-weight:700;font-size:13px;color:#5a3d24}
.tab.on{background:#fff5d8;color:var(--ink)}

/* statistiques */
.stline{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:#fff6dc;margin-bottom:4px;border:1px solid #c8a85a}
.stline .ic{width:26px;height:26px;flex:none}
.stline .nm{flex:1;font-weight:700}
.stline .vl{font:900 16px var(--serif);min-width:56px;text-align:right}
.plus{width:26px;height:26px;border-radius:50%;border:2px solid #3a7a24;background:linear-gradient(#a8f08a,#3a9a2a);color:#fff;font:900 17px/20px var(--ui);cursor:pointer;padding:0;text-shadow:0 1px 2px #0006}
.plus:disabled{filter:grayscale(1);opacity:.4;cursor:not-allowed}
.pts{background:linear-gradient(#fff2b8,#f0c14a);border:2px solid #b98a30;border-radius:10px;padding:8px 12px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:10px}
.elc{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:middle}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* sorts */
.spl{display:flex;gap:12px;align-items:center;padding:8px;border-radius:10px;background:#fff6dc;border:1px solid #c8a85a;margin-bottom:6px}
.spl img.si{width:52px;height:52px}
.spl .nfo{flex:1}.spl .nfo b{font:700 15px var(--serif)}
.spl .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.tg{font:700 11px var(--ui);padding:1px 7px;border-radius:9px;background:#e6d3a2;border:1px solid #b98a30}
.tg.pa{background:#cfe6ff;border-color:#4a8ad8}
.lvs{display:flex;gap:3px;margin-top:4px}.lvs i{width:16px;height:8px;border-radius:3px;background:#c8b484;border:1px solid #8a6a2a}.lvs i.on{background:linear-gradient(#ffd96a,#e09a1a)}
.spl.lk{opacity:.55}

/* inventaire */
.invwrap{display:flex;gap:14px}
.eqcol{width:190px;display:flex;flex-direction:column;gap:6px}
.eqs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cell{position:relative;width:54px;height:54px;border-radius:10px;border:2px solid #8a6a2a;background:radial-gradient(circle at 40% 30%,#6a5a82,#2a2240);cursor:pointer}
.cell img{width:100%;height:100%;padding:3px}
.cell.r1{border-color:#4aa3ff;box-shadow:0 0 8px #4aa3ff88}.cell.r2{border-color:#b46bff;box-shadow:0 0 10px #b46bffaa}.cell.r3{border-color:#ffa500;box-shadow:0 0 12px #ffa500cc}
.cell.sel{outline:3px solid #fff}
.cell em{position:absolute;right:2px;bottom:0;font:900 11px var(--ui);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;font-style:normal}
.cell.ghost{opacity:.5;background:#3a2c4a}.cell.ghost img{opacity:.35;filter:grayscale(.7)}
.grid{display:grid;grid-template-columns:repeat(6,54px);gap:6px}
.detail{margin-top:10px;background:#fff6dc;border:2px solid #b98a30;border-radius:10px;padding:10px;min-height:86px}
.detail .row{margin-top:8px}
.setbox{background:#fff6dc;border:2px solid #b98a30;border-radius:10px;padding:8px;font-size:12.5px}
.setrow{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;background:#fff6dc;border:1px solid #c8a85a;margin-bottom:5px}
.setrow .pieces{display:flex;gap:3px}.setrow .pieces img{width:34px;height:34px}.setrow .pieces img.off{filter:grayscale(1) brightness(.6);opacity:.55}
.setrow b{font:700 14px var(--serif)}
.shopline{margin-top:10px;padding:8px;border-radius:10px;background:#e8f4d0;border:2px solid #6a9a3a}

/* guilde / quêtes / politique */
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{text-align:left;padding:5px 8px;background:#5a3e26;color:var(--gold);font:700 12px var(--ui)}
table.tb td{padding:5px 8px;border-bottom:1px solid #c8a85a}
table.tb tr:nth-child(even) td{background:#fff3d4}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#888;margin-right:5px}.dot.on{background:#52d66a;box-shadow:0 0 6px #52d66a}
.q{padding:9px 11px;margin-bottom:7px;border-radius:10px;background:#fff6dc;border:2px solid #c8a85a}
.q.done{border-color:#52a63a;background:#ecf8d8}
.q.lk{opacity:.6}
.q b{font:700 15px var(--serif)}
.prog{height:9px;border-radius:5px;background:#c8b484;margin:5px 0;overflow:hidden;border:1px solid #8a6a2a}.prog i{display:block;height:100%;background:linear-gradient(#a8f08a,#3a9a2a)}
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.role{text-align:center;padding:8px 4px;border-radius:10px;background:#fff6dc;border:2px solid #b98a30;font-size:12px}
.role img{width:62px;height:72px;object-fit:cover;object-position:50% 16%;border-radius:8px;background:radial-gradient(#5a4a8a,#2a2050);border:2px solid #8a6a32;display:block;margin:0 auto 4px}
.role b{display:block;font:700 12px var(--serif);color:#7a4a10}.role .nm{font:700 14px var(--serif)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.key{background:#fff6dc;border:2px solid #b98a30;border-radius:10px;padding:6px 8px;text-align:center}.key b{display:block;font:900 20px var(--serif);color:#7a4a10}.key span{font-size:11px}
.ann{padding:8px 10px;border-radius:10px;background:#fff6dc;border-left:5px solid #b98a30;margin-bottom:6px}
.ann b{font:700 14px var(--serif)}.ann .meta{font-size:11px;color:#7a5a30}
.note{display:inline-block;min-width:24px;text-align:center;border-radius:6px;font:900 13px var(--serif);color:#fff;padding:1px 6px}
.nA{background:#2aa84a}.nB{background:#8ac82a}.nC{background:#e0b020}.nD{background:#e87a20}.nE{background:#d03030}
.ctr{text-align:center}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pack{text-align:center;padding:10px 6px;border-radius:14px;background:linear-gradient(#fff8e0,#ecd89c);border:3px solid #b98a30;position:relative}
.pack.best{border-color:#e07a1a;box-shadow:0 0 14px #ffa84a88}
.pack img{width:64px;height:64px}.pack b{display:block;font:900 22px var(--serif);color:#7a4a10}.pack .eur{font:900 20px var(--ui);margin:4px 0}
.pack .tag{position:absolute;top:-10px;right:-6px;background:#e0401a;color:#fff;font:700 11px var(--ui);padding:2px 8px;border-radius:8px;transform:rotate(6deg)}

#tip{position:absolute;z-index:60;pointer-events:none;background:#1e140df0;border:2px solid var(--gold2);border-radius:10px;padding:8px 12px;max-width:290px;font-size:12.5px;box-shadow:0 8px 20px #000a;color:#f6ecd6}
#tip b{font:700 14px var(--serif)}
#glfail{position:absolute;inset:30% 20%;background:#1e140d;border:3px solid #ee4a5c;border-radius:14px;padding:24px;text-align:center;z-index:99}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:#b98a30;border-radius:5px}::-webkit-scrollbar-track{background:#0002}
@media (max-width:1100px){#chars .slotsbox{left:1vw}.logo .l1{font-size:56px}#charinfo{display:none}}


/* ===================== HUD sombre « manga / ailes de dragon » ===================== */
:root{--hs:1;--bs:1;--chatw:340px;--crim:#b3122b;--dgold:#f2c14e}
#hudTL{position:absolute;left:8px;top:6px;width:380px;height:124px;transform:scale(var(--hs));transform-origin:0 0;filter:drop-shadow(0 6px 10px #000c)}
#hudTL .wingbg{position:absolute;inset:0;width:100%;height:100%}
#hudTL .port{position:absolute;left:14px;top:14px;width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 16%;background:radial-gradient(#4a2a5a,#150a22)}
#hudTL .who{position:absolute;left:122px;top:20px;width:196px;display:flex;flex-direction:column;gap:3px}
#hname{font:900 17px var(--serif);color:var(--dgold);letter-spacing:.5px;text-shadow:0 2px 0 #000,0 0 8px #b3122b88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hlv{font:700 11px var(--ui);color:#d9b9c4;text-transform:uppercase;letter-spacing:1px}
#hudTL .bar{height:11px;border-radius:2px;transform:skewX(-18deg);background:#05030a;border:1.5px solid #6a4a1c;margin:3px 4px 2px 0}
#hudTL .bar i{background:linear-gradient(#ff6a7a,#b3122b 60%,#6a0a1a)}
#hudTL .bar span{transform:skewX(18deg);font:700 9px/10px var(--ui);color:#ffe9ee}
#hudTL .gold{gap:7px;margin-top:2px}#hudTL .gold img{width:22px;height:22px;filter:drop-shadow(0 0 4px #f2c14e88)}
#hudTL .gold b{font:900 17px var(--serif);color:var(--dgold);text-shadow:0 2px 0 #000}

#hudTR{position:absolute;right:10px;top:8px}
#mini{border:2px solid #8a5a1c;border-radius:6px;box-shadow:0 0 0 2px #07040b,0 6px 14px #000c;background:#07040b}
.zinfo b{color:var(--dgold);text-shadow:0 2px 0 #000,0 0 8px #b3122b66}
#giftBtn{position:absolute;right:196px;top:12px;width:62px;height:62px;border-radius:50%;border:3px solid var(--dgold);background:radial-gradient(circle at 35% 30%,#7a1a2a,#14091a);cursor:pointer;padding:0;box-shadow:0 0 18px #f2c14ecc,0 6px 12px #000a;animation:giftp 1.3s ease-in-out infinite;z-index:8}
#giftBtn.hidden{display:none}
#giftBtn img{width:40px;height:40px;display:block;margin:auto}
#giftBtn i{position:absolute;right:-4px;top:-4px;min-width:22px;height:22px;border-radius:11px;background:#e0182f;border:2px solid #fff;font:900 12px/18px var(--ui);color:#fff;font-style:normal;text-align:center}
@keyframes giftp{50%{transform:scale(1.1) rotate(-5deg);box-shadow:0 0 28px #ffe27a,0 6px 12px #000a}}

/* barre du bas */
#bottom{position:absolute;left:50%;bottom:0;width:1300px;height:176px;margin-left:-650px;transform:scale(var(--bs));transform-origin:50% 100%;pointer-events:none}
#bottom>*{pointer-events:auto}
#bottom .bwing{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 -4px 12px #000b)}
#orbs{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:10px;align-items:flex-end}
.orb{position:relative;width:110px;height:100px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 8px #000a) drop-shadow(0 0 10px #b3122b66)}
.orb img{position:absolute;inset:0;width:100%;height:100%}
.orb b{position:relative;font:900 26px var(--serif);color:#fff;text-shadow:0 2px 0 #4a0a14,0 0 6px #000;-webkit-text-stroke:1px #3a0a10}
.orb small{position:absolute;bottom:13px;font:700 10px var(--ui);color:#ffd0d6;text-shadow:0 1px 2px #000}
.orb.pa,.orb.pm{width:70px;height:68px;margin-bottom:6px;filter:drop-shadow(0 4px 8px #000a)}
.orb.pa::before,.orb.pm::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px solid #8a5a1c;background:radial-gradient(#10081a,#07040b);box-shadow:inset 0 0 12px #000,0 0 14px #000a}
.orb.pa::before{box-shadow:inset 0 0 12px #000,0 0 12px #4aa8ff88}.orb.pm::before{box-shadow:inset 0 0 12px #000,0 0 12px #52d66a88}
.orb.pa img,.orb.pm img{inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);opacity:.55}
.orb.pa b{-webkit-text-stroke:1px #0a2a5a;text-shadow:0 2px 0 #0a2a5a,0 0 6px #000;font-size:24px}
.orb.pm b{-webkit-text-stroke:1px #0a4a1a;text-shadow:0 2px 0 #0a4a1a,0 0 6px #000;font-size:24px}
#bLeft{position:absolute;right:calc(50% + 190px);bottom:30px}
#fightBtns{display:flex;flex-direction:column;gap:6px;align-items:stretch}
#fightBtns .btn{min-width:118px;font-size:14px;padding:8px 14px;background:linear-gradient(#5a1424,#240810);border:2px solid #b98a30;color:#ffe9b0;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);border-radius:0;text-shadow:0 1px 2px #000;letter-spacing:.5px;box-shadow:none}
#fightBtns .btn.danger{background:linear-gradient(#2a2a3a,#0d0d16);color:#cfd6ee}
#fightBtns .btn.hidden{display:block!important;opacity:.35;pointer-events:none;filter:grayscale(.7)}
#bRight{position:absolute;left:calc(50% + 150px);bottom:26px;max-width:480px}
#spellbar{display:flex;gap:7px;padding:8px 24px;background:linear-gradient(#1c1026,#0a0610);border:2px solid #8a5a1c;box-shadow:0 6px 14px #000b,inset 0 0 18px #b3122b33;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,16px 100%);border-radius:0}
#spellbar:empty{display:none}
.sp{width:46px;height:46px;border-radius:8px;background:#07040b;border:2px solid #6a4a22}
.sp img{border-radius:6px}
.sp.sel{border-color:var(--dgold);box-shadow:0 0 14px #f2c14e}
.sp .k{font-size:9px}.sp .cd{font:900 17px/42px var(--serif)}
.sp .c{min-width:17px;height:17px;border-radius:9px;font-size:10px;line-height:13px}

/* boutons de menu (fixes, colonne de droite) */
#menuBtns{position:absolute;right:10px;top:206px;display:grid;grid-template-columns:repeat(2,46px);gap:8px;z-index:6}
.mb{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid #8a5a1c;background:radial-gradient(circle at 35% 30%,#3a2048,#0c0612);box-shadow:0 4px 10px #000c,inset 0 0 10px #b3122b44;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.mb img{width:28px;height:28px}.mb:hover{border-color:var(--dgold);transform:scale(1.08)}
.mb small{display:none}
.mb.on{border-color:var(--dgold);box-shadow:0 0 14px #f2c14e}
.mb .ping{position:absolute;right:-3px;top:-3px;min-width:18px;height:18px;border-radius:9px;background:#e0182f;border:2px solid #fff;font:900 11px/14px var(--ui);text-align:center}

#timeline,#turnBox{background:linear-gradient(#1c1026,#0a0610);border:2px solid #8a5a1c}
#roundTxt{color:var(--dgold)}
#chatin{background:#0a0610d8;border:2px solid #6a4a22;color:#f2e6d0}
#hint{bottom:190px;background:#0a0610e0;border-color:#8a5a1c}

/* croix directionnelle tactile */
#dpad{position:absolute;left:calc(var(--chatw) + 26px);bottom:14px;width:126px;height:126px;display:none;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;opacity:.55;touch-action:none;user-select:none;-webkit-user-select:none;z-index:7}
#dpad button{padding:0;border-radius:12px;border:2px solid #8a5a1c;background:radial-gradient(#2a1636,#0a0610);color:#e8d29a;font-size:17px;line-height:1;touch-action:none}
#dpad button.on{background:radial-gradient(#7a1a2a,#2a0a14);color:#fff;border-color:var(--dgold)}
#dpad [data-d=up]{grid-area:1/2}#dpad [data-d=left]{grid-area:2/1}#dpad [data-d=right]{grid-area:2/3}#dpad [data-d=down]{grid-area:3/2}
body.touch #dpad{display:grid}
body.infight #dpad{display:none}
#dpad.hidden{display:none!important}

@media (max-width:1000px){:root{--chatw:230px}}
@media (max-width:760px){:root{--chatw:170px}#chatlog{font-size:11px;max-height:90px}#dpad{width:108px;height:108px}#menuBtns{top:176px}#mini{width:110px;height:84px}#giftBtn{right:128px;width:50px;height:50px}#giftBtn img{width:32px;height:32px}}

/* boutique : panoplie Alnasienne mise en valeur */
.alnpack{position:relative;margin-bottom:16px;padding:14px 16px 12px;border-radius:16px;overflow:hidden;color:#f6e9c8;background:radial-gradient(ellipse at 20% 0,#5a1230 0,#1a0c24 55%,#07040b 100%);border:3px solid #f2c14e;box-shadow:0 0 0 2px #2a0a14,0 0 26px #b3122baa,inset 0 0 40px #b3122b55;animation:alnglow 2.4s ease-in-out infinite}
@keyframes alnglow{50%{box-shadow:0 0 0 2px #2a0a14,0 0 40px #f2c14ecc,inset 0 0 50px #b3122b88}}
.alnpack::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff00 0 14px,#ffffff08 14px 16px);pointer-events:none}
.alnpack .rb{position:absolute;right:-42px;top:14px;transform:rotate(38deg);background:linear-gradient(#ffd96a,#c8901e);color:#2a0a14;font:900 11px var(--ui);padding:3px 48px;letter-spacing:1.5px;box-shadow:0 2px 6px #000a}
.alnpack h3{margin:0;font:900 24px var(--serif);color:#f2c14e;text-shadow:0 2px 0 #000,0 0 14px #b3122b;letter-spacing:.5px}
.alnpack .pcs{display:flex;gap:8px;margin:10px 0;justify-content:center}
.alnpack .pcs img{width:62px;height:62px;filter:drop-shadow(0 0 8px #f2c14e88);background:radial-gradient(#3a1a3a,#0a0610);border:2px solid #f2c14e88;border-radius:12px;padding:3px}
.alnpack ul{margin:6px 0 8px 18px;padding:0;font-size:13px;line-height:1.5}
.alnpack .buy{display:flex;align-items:center;gap:14px;justify-content:space-between;margin-top:8px}
.alnpack .eur{font:900 30px var(--serif);color:#fff;text-shadow:0 2px 0 #b3122b}
.alnpack .btn{font-size:16px;padding:10px 22px}

/* fenêtre cadeau */
#giftModal{position:absolute;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50}
#giftModal.hidden{display:none}
#giftModal .gbox{width:460px;max-width:94vw;padding:20px 22px;border-radius:16px;text-align:center;color:#f6e9c8;background:radial-gradient(ellipse at 50% 0,#5a1230 0,#1a0c24 60%,#07040b);border:3px solid #f2c14e;box-shadow:0 0 40px #b3122bcc;animation:pop2 .3s}
@keyframes pop2{from{opacity:0;transform:scale(.9)}}
#giftModal h3{margin:0 0 6px;font:900 24px var(--serif);color:#f2c14e}
#giftModal .gift{margin:10px 0;padding:10px;border-radius:12px;background:#0006;border:1px solid #f2c14e66}
#giftModal .pcs{display:flex;gap:6px;justify-content:center;margin:6px 0}#giftModal .pcs img{width:48px;height:48px}
#giftModal input{background:#0a0610;border:2px solid #8a5a1c;color:#f6e9c8;padding:7px 10px;width:100%;margin-top:6px}
#giftModal .row{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.ctr img{width:20px;height:20px;vertical-align:middle}
#menuBtns{top:224px}
#fightBtns #btnStart.hidden{display:none!important}