/* ---------- personnages des lieux ---------- */
#screen.pad-l{padding-left:600px;padding-right:50px;box-sizing:border-box}
#screen.pad-r{padding-right:820px;padding-left:60px;box-sizing:border-box}
#screen.s-forge{padding-left:520px}
.npc{position:absolute;bottom:0;pointer-events:none;filter:drop-shadow(0 14px 24px rgb(0 0 0 / .6));z-index:-1}
.npc-l{left:30px}.npc-r{right:20px}
.npc-enutrof{width:620px;bottom:40px;animation:npcb 4s ease-in-out infinite;transform-origin:50% 100%}
.npc-tavernier{width:860px;bottom:10px}
.npc-artisan{height:760px;left:70px;animation:npcb 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes npcb{50%{transform:scale(1.008,1.018)}}
#screen.on{isolation:isolate}
.s-shop .wares{gap:30px}
.s-shop .ware .card{transform:none}
.s-shop .ware .card:hover{transform:scale(1.1) translateY(-6px)}
.s-shop .ware{gap:20px}
.s-forge .deckgrid{max-width:1300px}
.logo .big{font-size:1em;color:var(--parch);-webkit-text-stroke:4px var(--wood-3);text-shadow:0 10px 0 var(--wood-2),0 18px 40px rgb(0 0 0 / .8)}
.lead.small{font-size:20px;color:var(--muted)}
.cls .port img{width:100%;height:100%;object-fit:contain;display:block}
.cls.open .port{width:200px;height:190px}

/* ---------- carte du monde ---------- */
#screen.map{display:block;background:none}
.maptitle{position:absolute;left:0;right:0;top:118px;text-align:center;font-family:var(--display);font-size:64px;color:#4a2e17;text-shadow:0 2px 0 rgb(255 240 210 / .6)}
.maphint{position:absolute;left:0;right:0;top:196px;text-align:center;font-size:24px;font-weight:800;color:#6b4a2a}
.mapsvg{position:absolute;inset:0;width:1920px;height:1080px;pointer-events:none}
.mapsvg .e{stroke:#5b3a22;stroke-opacity:.45;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 14}
.mapsvg .e.done{stroke:#8a1f12;stroke-opacity:.85;stroke-width:7;stroke-dasharray:1 12}
.mapsvg .e.open{stroke:#b07a1e;stroke-opacity:1;stroke-width:7;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-30}}
.mnode{position:absolute;width:68px;height:68px;margin:-34px 0 0 -34px;border:0;border-radius:50%;padding:12px;box-sizing:border-box;
  background:radial-gradient(circle at 40% 35%,#f8ecd0,#e0c896);box-shadow:0 0 0 3px #5b3a22,0 6px 10px rgb(60 35 15 / .35);cursor:default;transition:transform .15s}
.mnode svg{width:100%;height:100%;display:block}
.mnode .lbl{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:17px;font-weight:900;color:#4a2e17;opacity:0;transition:opacity .15s;pointer-events:none}
.mnode.t-boss{width:130px;height:130px;margin:-65px 0 0 -65px;padding:20px;box-shadow:0 0 0 5px #5b3a22,0 0 0 9px #8a1f12,0 10px 18px rgb(60 35 15 / .45)}
.mnode.t-boss .lbl{opacity:1;font-family:var(--display);font-weight:400;font-size:28px;color:#8a1f12}
.mnode.past{filter:grayscale(.8) opacity(.55)}
.mnode.done{box-shadow:0 0 0 3px #5b3a22,0 0 0 7px #8a1f12;filter:saturate(.6)}
.mnode.cur{box-shadow:0 0 0 3px #5b3a22,0 0 0 7px #8a1f12,0 0 22px #8a1f12}
.mnode.avail{cursor:pointer;animation:avail 1.4s ease-in-out infinite;box-shadow:0 0 0 3px #5b3a22,0 0 0 7px var(--gold),0 0 26px rgb(226 176 90 / .9)}
.mnode.avail .lbl{opacity:1}
.mnode.avail:hover{transform:scale(1.18);animation:none}
.mnode:hover .lbl{opacity:1}
@keyframes avail{50%{transform:scale(1.12)}}
.legend{position:absolute;left:190px;bottom:96px;display:flex;gap:22px;padding:10px 18px;border-radius:12px;background:rgb(255 240 210 / .5);box-shadow:inset 0 0 0 2px rgb(91 58 34 / .4)}
.legend span{display:flex;align-items:center;gap:6px;font-weight:900;font-size:18px;color:#4a2e17}
.legend svg{width:30px;height:30px}

/* ---------- marchand et atelier ---------- */
.wares{display:flex;gap:40px;align-items:flex-end;margin-block:40px 10px}
.ware{display:flex;flex-direction:column;align-items:center;gap:56px}
.ware .card{transform:scale(1.18);transition:transform .2s}
.ware .card:hover{transform:scale(1.28) translateY(-6px)}
.ware.sold{width:220px;height:317px;justify-content:center}
.soldtag{font-family:var(--display);font-size:40px;color:var(--muted);transform:rotate(-12deg);border:4px solid var(--muted);padding:4px 20px;border-radius:10px}
.price{display:flex;align-items:center;gap:6px;font-weight:900;font-size:30px;color:var(--gold);text-shadow:0 2px 3px #000}
.price svg{width:36px;height:36px}
.price.poor{color:#ff8f80}
.shoprow{display:flex;gap:30px;align-items:center}
.opt.small{width:300px;padding:16px 22px}
.opt.small b{font-size:30px}
.opt.small span{display:flex;align-items:center;gap:6px}
.opt.small span svg{width:28px;height:28px}
.opt.poor{filter:grayscale(.6) brightness(.75)}
.opt.done{filter:grayscale(.8) brightness(.6)}
.deckgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;max-width:1600px;max-height:560px;overflow-y:auto;padding:20px}
.deckgrid .card:hover{transform:translateY(-8px)}
.compare{display:flex;align-items:center;gap:60px;margin-block:40px}
.compare .card{transform:scale(1.35)}
.arrowr{font-size:80px;color:var(--gold);text-shadow:0 3px 6px #000}
.card .plus{position:absolute;right:9%;top:6.5%;z-index:3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:28px;line-height:1;
  color:#3a2706;background:radial-gradient(circle at 38% 32%,#fff1c2,var(--gold) 60%,#9c6d2a);box-shadow:0 0 0 3px var(--wood-3)}
/* ===== V0.3 : bandeau, boutons, animations, lisibilité ===== */
:root{--ink2:#2b1d12;--trim:#b58b4c;--parA:#f6ead0;--parB:#d9c08b}
/* bandeau */
#hud{height:86px;gap:22px;padding:0 26px;background:linear-gradient(rgb(24 16 11 / .95),rgb(14 9 6 / .88));
  box-shadow:0 2px 0 var(--trim),0 5px 0 var(--ink2),0 12px 28px rgb(0 0 0 / .6)}
#hud .who b{font-size:38px;color:var(--parA)}
#hud .who small{color:var(--trim)}
.gem{display:flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 8px;border-radius:26px;background:linear-gradient(#2c2427,#141013);
  box-shadow:inset 0 0 0 2px var(--trim),0 0 0 2px var(--ink2),0 4px 8px rgb(0 0 0 / .5);font-weight:900;font-size:28px;font-variant-numeric:tabular-nums;text-shadow:0 2px 2px #000}
.gem svg{width:40px;height:40px;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .6))}
.gem.hp{color:#ffb4aa} .gem.k{color:#ffd77a}
.hud-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  filter:drop-shadow(2.5px 0 0 var(--ink2)) drop-shadow(-2.5px 0 0 var(--ink2)) drop-shadow(0 2.5px 0 var(--ink2)) drop-shadow(0 -2.5px 0 var(--ink2)) drop-shadow(0 6px 8px rgb(0 0 0 / .6))}
.rib{display:flex;flex-direction:column;align-items:center;line-height:1.05;padding:6px 64px 8px;background:linear-gradient(var(--parA),var(--parB));color:var(--ink2);
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 50%,100% 100%,0 100%,26px 50%)}
.rib small{font-size:14px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7a5a32}
.rib span{font-family:var(--display);font-size:28px;white-space:nowrap}
.medal{position:relative;width:62px;height:62px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 40% 32%,#51474c,#1a1518 70%);box-shadow:inset 0 0 0 3px var(--trim),0 0 0 2px var(--ink2),0 5px 10px rgb(0 0 0 / .6);transition:transform .15s,box-shadow .15s}
.medal svg{width:34px;height:34px}
.medal b{position:absolute;right:-6px;bottom:-6px;min-width:30px;height:30px;padding:0 5px;box-sizing:border-box;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(var(--parA),var(--parB));color:var(--ink2);font-size:16px;font-weight:900;box-shadow:0 0 0 2px var(--ink2)}
.medal:hover{transform:scale(1.08);box-shadow:inset 0 0 0 3px #ffd77a,0 0 0 2px var(--ink2),0 0 18px rgb(255 215 122 / .6)}
.hbtn{display:none}
/* boutons ruban */
.btn,#endturn{position:relative;isolation:isolate;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;
  font-family:var(--display);color:var(--ink2);--ol:var(--ink2);
  filter:drop-shadow(2.5px 0 0 var(--ol)) drop-shadow(-2.5px 0 0 var(--ol)) drop-shadow(0 2.5px 0 var(--ol)) drop-shadow(0 -2.5px 0 var(--ol)) drop-shadow(0 8px 10px rgb(0 0 0 / .55));
  transition:transform .12s}
.btn::before,#endturn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--parA),var(--parB) 62%,#c6a466);
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%,22px 50%)}
.btn::after,#endturn::after{content:"";position:absolute;inset:5px 26px;z-index:-1;border-top:2px solid rgb(255 255 255 / .55);border-bottom:2px solid rgb(120 85 40 / .35);pointer-events:none}
.btn{padding:14px 58px;font-size:34px}
.btn:hover,#endturn:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}
.btn.ghost{color:var(--parA);--ol:var(--trim);font-size:28px;padding:12px 50px}
.btn.ghost::before{background:linear-gradient(#3e3539,#1d181b)}
.btn.ghost::after{border-top-color:rgb(255 255 255 / .12);border-bottom-color:rgb(0 0 0 / .3)}
#endturn{position:absolute;right:150px;top:878px;width:270px;height:80px;font-size:36px}
#endturn:disabled{filter:grayscale(.9) brightness(.55) drop-shadow(2.5px 0 0 var(--ol)) drop-shadow(-2.5px 0 0 var(--ol)) drop-shadow(0 2.5px 0 var(--ol)) drop-shadow(0 -2.5px 0 var(--ol));cursor:default}
#endturn.glow{animation:etg 1.4s ease-in-out infinite}
@keyframes etg{50%{filter:drop-shadow(2.5px 0 0 var(--ol)) drop-shadow(-2.5px 0 0 var(--ol)) drop-shadow(0 2.5px 0 var(--ol)) drop-shadow(0 -2.5px 0 var(--ol)) drop-shadow(0 0 22px #ffd77a) drop-shadow(0 0 10px #ffd77a)}}
/* panneaux parchemin */
.opt,.cls,.evc{color:var(--ink2);background:linear-gradient(var(--parA),var(--parB));border-radius:14px;
  box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim),inset 0 0 26px rgb(150 105 45 / .3),0 14px 30px rgb(0 0 0 / .6)}
.opt b,.evc b{color:#7a2614}
.opt span,.evc span{color:#4a3420}
.opt:hover,.cls.open:hover,.evc:hover:not(.off){box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px #ffd77a,0 0 30px rgb(255 215 122 / .55),0 14px 30px rgb(0 0 0 / .6)}
.cls b{color:var(--ink2)} .cls small{color:#7a5a32}
.opt.small span svg{filter:none}
/* événements */
.evpanel{position:relative;width:1000px;max-width:100%;padding:74px 70px 50px;margin-top:40px;box-sizing:border-box;border-radius:20px;text-align:center;color:var(--parA);
  background:radial-gradient(ellipse at 50% 0%,rgb(255 215 122 / .10),transparent 60%),radial-gradient(circle at 40% 30%,#3d3337,#1a1518 75%);
  box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 3px var(--trim),inset 0 0 0 7px #241c1f,inset 0 0 0 9px rgb(181 139 76 / .45),inset 0 0 80px rgb(0 0 0 / .6),0 30px 70px rgb(0 0 0 / .75)}
.evcorner{position:absolute;width:30px;height:30px;border:3px solid var(--trim);background:radial-gradient(circle,#ffd77a 0 4px,transparent 5px)}
.evcorner.tl{left:14px;top:14px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.evcorner.tr{right:14px;top:14px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.evcorner.bl{left:14px;bottom:14px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.evcorner.br{right:14px;bottom:14px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.evmed{position:absolute;left:50%;top:-58px;transform:translateX(-50%);width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 32%,#51474c,#1a1518 70%);box-shadow:inset 0 0 0 4px var(--trim),0 0 0 3px var(--ink2),0 0 30px rgb(255 215 122 / .35),0 8px 16px rgb(0 0 0 / .6)}
.evmed img,.evmed svg{width:78%;height:78%;object-fit:contain}
.evrib{display:inline-flex;margin:0 auto 22px;padding:8px 80px 10px}
.evrib span{font-size:44px;white-space:normal}
.evpanel .evtxt{color:#eadbb8;text-shadow:0 2px 3px #000}
.evsep{height:2px;margin:0 auto 26px;max-width:620px;background:linear-gradient(90deg,transparent,var(--trim),transparent);position:relative}
.evsep i{position:absolute;left:50%;top:50%;width:12px;height:12px;background:#ffd77a;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 3px var(--ink2),0 0 12px rgb(255 215 122 / .7)}
.evpanel .evc{color:var(--parA);background:linear-gradient(#3a2f2a,#231b18);justify-content:flex-start;
  box-shadow:0 0 0 2px var(--ink2),inset 0 0 0 2px var(--trim),inset 0 0 22px rgb(0 0 0 / .5),0 10px 22px rgb(0 0 0 / .55)}
.evpanel .evc b{color:#ffe7ae;flex:0 0 auto}
.evpanel .evc span{color:#d4b98a;margin-left:auto}
.evpanel .evc:hover:not(.off){box-shadow:0 0 0 2px var(--ink2),inset 0 0 0 2px #ffd77a,0 0 26px rgb(255 215 122 / .45),0 10px 22px rgb(0 0 0 / .55)}
.evgem{flex:0 0 auto;width:14px;height:14px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe7ae,#b58b4c);box-shadow:0 0 0 2px var(--ink2)}
.evpanel .evres{color:#ffe7ae;text-shadow:0 2px 3px #000}
.eyebrow.dark{color:#7a5a32;text-shadow:none}
.evt{font-family:var(--display);font-weight:400;font-size:60px;margin:6px 0 14px;color:var(--ink2)}
.evtxt{font-size:25px;line-height:1.35;margin:0 auto 26px;max-width:60ch;font-style:italic;color:#3d2a18}
.evchoices{display:flex;flex-direction:column;align-items:center;gap:14px}
.evc{width:100%;max-width:720px;border:0;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;text-align:left;transition:transform .12s}
.evc b{font-family:var(--display);font-weight:400;font-size:30px}
.evc span{font-size:19px;font-weight:800;text-align:right}
.evc:hover:not(.off){transform:translateX(6px)}
.evc.off{filter:grayscale(1) opacity(.55);cursor:not-allowed}
.evres{font-size:26px;line-height:1.35;font-weight:700;margin:0 0 20px;color:var(--ink2)}
/* menu pause */
#overlay .menupanel{margin:auto;display:flex;flex-direction:column;align-items:stretch;gap:20px;width:520px;text-align:center}
#overlay .menupanel .h2{margin-bottom:10px}
/* animations des combattants */
.sprite{animation:idle 2.8s ease-in-out infinite}
@keyframes idle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-6px) scale(1.012,1.035)}}
.is-p .sprite{animation:idleP 2.3s ease-in-out infinite}
@keyframes idleP{0%,100%{transform:rotate(0) scale(1,1)}50%{transform:rotate(-1.2deg) scale(1.01,1.028)}}
.fighter.enter-l{animation:enterL .75s cubic-bezier(.2,.8,.3,1.15) both}
.fighter.enter-r{animation:enterR .75s cubic-bezier(.2,.8,.3,1.15) both}
@keyframes enterL{from{transform:translateX(-460px);opacity:0}}
@keyframes enterR{from{transform:translateX(460px) translateY(-40px);opacity:0}}
.fighter.lunge-r .sprite{animation:lunger .52s cubic-bezier(.3,.6,.3,1)}
.fighter.lunge-l .sprite{animation:lungel .52s cubic-bezier(.3,.6,.3,1)}
@keyframes lunger{22%{transform:translateX(-34px) rotate(-5deg) scale(.95,1.05)}46%{transform:translateX(130px) rotate(6deg) scale(1.08,.93)}70%{transform:translateX(36px)}100%{transform:none}}
@keyframes lungel{22%{transform:translateX(30px) scale(.94,1.06)}46%{transform:translate(-120px,-26px) rotate(-6deg) scale(1.08,.94)}70%{transform:translateX(-30px)}100%{transform:none}}
.fighter{--kb:26px;--kr:5deg}
.fighter.is-p{--kb:-26px;--kr:-5deg}
.fighter.hit .sprite{animation:hit2 .45s ease-out}
@keyframes hit2{0%{filter:brightness(5) saturate(0)}18%{filter:brightness(1.3) sepia(1) hue-rotate(-40deg) saturate(5);transform:translateX(var(--kb)) rotate(var(--kr)) scale(.94,1.04)}55%{transform:translateX(calc(var(--kb) * -.35))}100%{transform:none;filter:none}}
.fighter.g-shield .sprite{animation:gS .7s ease-out}
@keyframes gS{30%{filter:drop-shadow(0 0 16px #9fd0ff) drop-shadow(0 0 36px #4c8fe6) brightness(1.25);transform:scale(1.04)}100%{filter:none;transform:none}}
.fighter.g-absorb .sprite{animation:gA .45s ease-out}
@keyframes gA{20%{filter:drop-shadow(0 0 20px #9fd0ff) brightness(1.4);transform:translateX(calc(var(--kb) * .4))}100%{filter:none;transform:none}}
.fighter.g-buff .sprite{animation:gB .75s ease-out}
@keyframes gB{30%{transform:translateY(-24px) scale(1.05);filter:drop-shadow(0 0 22px #ffd06a) brightness(1.25)}60%{transform:translateY(0) scale(.98,1.02)}100%{transform:none;filter:none}}
.fighter.g-debuff .sprite{animation:gD .6s ease-out}
@keyframes gD{25%{transform:scale(.94,.97) translateX(-6px);filter:drop-shadow(0 0 18px #b77cff) saturate(.6)}50%{transform:translateX(6px)}100%{transform:none;filter:none}}
.fighter.dying{transition:none;animation:die .9s ease-in forwards}
@keyframes die{0%{filter:brightness(4)}25%{transform:translateY(-14px) rotate(-4deg);filter:brightness(2) saturate(0)}100%{transform:translateY(46px) rotate(10deg) scale(.55);opacity:0;filter:grayscale(1) brightness(.3)}}
/* chiffres */
.num{font-size:100px;-webkit-text-stroke:7px #2a0a04;paint-order:stroke fill;animation:pop2 1.4s cubic-bezier(.2,.9,.3,1) both;
  text-shadow:0 7px 0 rgb(0 0 0 / .45),0 0 26px rgb(255 120 60 / .55);display:flex;align-items:center;gap:6px}
@keyframes pop2{0%{opacity:0;transform:translate(-50%,-30%) scale(.3)}12%{opacity:1;transform:translate(-50%,-62%) scale(1.35)}24%{transform:translate(-50%,-70%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%) scale(.9)}}
.num.dmg{color:#fff3d6}
.num.dmg.big{font-size:136px;color:#ffd34d;text-shadow:0 9px 0 rgb(0 0 0 / .45),0 0 44px rgb(255 140 40 / .95)}
.num.shield,.num.absorb{font-size:78px;color:#dcefff;-webkit-text-stroke:6px #0d2340;text-shadow:0 6px 0 rgb(0 0 0 / .45),0 0 30px rgb(120 180 255 / .9)}
.num.absorb{font-size:64px;color:#9fd0ff}
.num.shield svg,.num.absorb svg{width:.85em;height:.85em;filter:drop-shadow(0 0 10px rgb(150 200 255 / .9))}
.num.buff,.num.debuff{font-size:54px;-webkit-text-stroke:5px #2a1404}
.num.buff{color:#ffd34d} .num.debuff{color:#e2b8ff;-webkit-text-stroke-color:#24103a}
/* barre de vie et bouclier */
.plate{gap:8px}
.fname{font-size:24px}
.hpbar{height:26px;border-radius:13px}
.hpbar b{font-size:19px;line-height:26px}
.hpbar.shielded{box-shadow:0 0 0 3px #0d2340,0 0 0 6px #8fc8ff,0 0 22px rgb(120 180 255 / .9),0 4px 10px rgb(0 0 0 / .6)}
.hpbar.shielded i{background:linear-gradient(#a9d6ff,#3d74c4)}
.hpbar.shielded b{color:#fff}
.hpbar{overflow:visible}
.hpbar i{border-radius:13px}
.block{left:-52px;top:-30px;width:78px;height:84px;font-size:36px;color:#fff;-webkit-text-stroke:5px #0d2340;paint-order:stroke fill;text-shadow:none;
  filter:drop-shadow(0 0 10px rgb(130 190 255 / .95)) drop-shadow(0 4px 4px rgb(0 0 0 / .6));z-index:3;font-variant-numeric:tabular-nums;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 54'%3E%3Cpath d='M25 2 46 9v18c0 13-9 21-21 25C13 48 4 40 4 27V9z' fill='%233f7fd6' stroke='%23e2b05a' stroke-width='3'/%3E%3Cpath d='M25 7 41 12v15c0 10-7 17-16 20' fill='none' stroke='%23a9d6ff' stroke-width='2' opacity='.7'/%3E%3C/svg%3E")}
.block.pop{animation:bpop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes bpop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
/* statuts */
.sts{gap:8px;min-height:34px}
.sts.pulse .st{animation:stpop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes stpop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.st{position:relative;display:flex;align-items:center;gap:5px;padding:3px 12px 3px 5px;border-radius:10px;font-size:20px;color:#fff;cursor:help;
  background:linear-gradient(#2e2016,#130c08);box-shadow:0 0 0 2px var(--c),0 0 14px color-mix(in srgb,var(--c) 55%,transparent),0 3px 6px rgb(0 0 0 / .6)}
.st svg{width:26px;height:26px;filter:drop-shadow(0 0 4px var(--c))}
.st b{font-weight:900;font-variant-numeric:tabular-nums}
.st em{font-style:normal;font-size:15px;font-weight:900;color:var(--c);letter-spacing:.02em}
.st.pow{--c:#ffc94d} .st.weak{--c:#c792ff} .st.frag{--c:#ff7a66}
.st[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;z-index:5;
  padding:7px 12px;border-radius:8px;font-size:17px;font-weight:800;color:var(--ink2);background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 2px var(--ink2),0 6px 12px rgb(0 0 0 / .5)}
.pile{cursor:pointer}
.pile:hover{transform:scale(1.07)}

/* correctifs V0.3.1 */
#hud{z-index:90}
.fighter:hover{z-index:30}
.card .fdesc{overflow:hidden}
.card .fdesc.sm{font-size:15.5px;line-height:1.16}
.card .fdesc.xs{font-size:14px;line-height:1.12}
.warn{z-index:300;top:auto;bottom:430px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:90%;padding:14px 48px;
  font-family:var(--display);font-size:44px;color:#fff3e6;-webkit-text-stroke:0;text-shadow:0 2px 4px rgb(0 0 0 / .7);
  background:linear-gradient(#b8321f,#7d1a0e);border-radius:14px;box-shadow:0 0 0 3px #2b1d12,inset 0 0 0 2px #f0a070,0 12px 30px rgb(0 0 0 / .7);
  animation:warn2 1.6s ease-out forwards}
@keyframes warn2{0%{opacity:0;transform:translateX(-50%) scale(.6)}10%{opacity:1;transform:translateX(-50%) scale(1.08)}18%{transform:translateX(-50%) scale(1)}22%,30%{transform:translateX(calc(-50% - 8px))}26%,34%{transform:translateX(calc(-50% + 8px))}38%,80%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%) translateY(-16px)}}
.card .plus{right:4%;top:47%;width:34px;height:34px;font-size:26px}

/* ===== V0.4 : potions, équipements, butin ===== */
.pots{position:relative;display:flex;gap:8px;margin-left:6px}
.pot{position:relative;width:50px;height:50px;border:0;border-radius:12px;padding:4px;cursor:pointer;background:linear-gradient(#2c2427,#141013);
  box-shadow:inset 0 0 0 2px var(--trim),0 0 0 2px var(--ink2)}
.pot svg,.pot img{width:100%;height:100%;display:block;object-fit:contain}
.pot.empty{cursor:default;opacity:.55;box-shadow:inset 0 0 0 2px rgb(181 139 76 / .35),0 0 0 2px var(--ink2)}
.pot:not(.empty):hover,.pot.open{box-shadow:inset 0 0 0 2px #ffd77a,0 0 0 2px var(--ink2),0 0 14px rgb(255 215 122 / .6)}
.tip{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);width:max-content;max-width:320px;padding:10px 14px;border-radius:10px;z-index:20;
  display:none;flex-direction:column;gap:4px;text-align:left;font-size:17px;font-weight:700;color:#3d2a18;line-height:1.25;
  background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 2px var(--ink2),0 8px 16px rgb(0 0 0 / .6);pointer-events:none}
.tip b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink2)}
.tip i{font-style:normal;font-size:15px;color:#7a5a32;border-top:1px solid rgb(120 85 40 / .35);padding-top:5px;margin-top:2px}
.tip i.on{color:#1f7a3a}
.pot:hover .tip,.relic:hover .tip{display:flex}
.potmenu{position:absolute;top:calc(100% + 12px);width:300px;padding:14px 16px;border-radius:12px;z-index:25;display:flex;flex-direction:column;gap:6px;color:#3d2a18;
  background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 2px var(--ink2),0 10px 20px rgb(0 0 0 / .6);font-size:17px;font-weight:700}
.potmenu b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink2)}
.potmenu .row{display:flex;gap:10px;margin-top:6px}
.btn.small{font-size:22px;padding:8px 30px}
.btn.ghost.small{font-size:20px}
.relics{position:absolute;left:24px;top:calc(100% + 12px);display:flex;gap:10px}
.relic{position:relative;width:54px;height:54px;border-radius:50%;padding:6px;box-sizing:border-box;background:radial-gradient(circle at 40% 35%,#51474c,#1a1518 72%);
  box-shadow:inset 0 0 0 2px var(--trim),0 0 0 2px var(--ink2),0 4px 8px rgb(0 0 0 / .55);cursor:help}
.relic svg,.relic img{width:100%;height:100%;display:block;object-fit:contain}
.relic.dofus{box-shadow:inset 0 0 0 2px #ffd77a,0 0 0 2px var(--ink2),0 0 14px rgb(255 215 122 / .55)}
.relic.setdone{box-shadow:inset 0 0 0 2px #7be38f,0 0 0 2px var(--ink2),0 0 12px rgb(123 227 143 / .6)}
.relic .tip{left:0;transform:none}
.relic.big{width:76px;height:76px;padding:9px;flex:0 0 auto}
.lootrow{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.loot{display:flex;align-items:center;gap:14px;padding:10px 22px 10px 12px;border:0;border-radius:14px;text-align:left;color:#3d2a18;font-size:18px;font-weight:700;max-width:520px;
  background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim),0 10px 22px rgb(0 0 0 / .55)}
.loot > svg,.loot > img{width:58px;height:58px;flex:0 0 auto}
.loot span{display:flex;flex-direction:column;gap:2px}
.loot b{font-family:var(--display);font-weight:400;font-size:28px;color:var(--ink2)}
.loot.take{cursor:pointer;animation:lootglow 1.4s ease-in-out infinite}
.loot.take:hover{transform:translateY(-3px)}
.loot.full{animation:none;filter:grayscale(.6)}
.loot.done{opacity:.7}
.lootttl{margin:4px 0 22px}
.rgem{position:absolute;left:50%;bottom:1.2%;width:9%;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);z-index:3;border-radius:3px;
  box-shadow:0 0 0 2px #1a1210,0 0 0 4px #d8c08a,0 3px 6px rgb(0 0 0 / .7)}
.rgem.g-c{background:linear-gradient(135deg,#f2f2f2,#8d8d8d)}
.rgem.g-u{background:linear-gradient(135deg,#bfe3ff,#1f6fd1)}
.rgem.g-e{background:linear-gradient(135deg,#efd2ff,#7b2fd0);box-shadow:0 0 0 2px #1a1210,0 0 0 4px #d8c08a,0 0 12px #b46cff}
.rgem.g-l{background:linear-gradient(135deg,#fff2c4,#ff8f00);box-shadow:0 0 0 2px #1a1210,0 0 0 4px #ffe08a,0 0 16px #ffa726;animation:gemPulse 1.6s ease-in-out infinite}
@keyframes gemPulse{50%{filter:brightness(1.35)}}
.card.r-e.full::after,.card.r-l.full::after{content:"";position:absolute;inset:3% 4%;border-radius:12px;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,transparent 35%,rgb(255 255 255 / .35) 48%,transparent 60%) no-repeat;background-size:300% 100%;animation:shine 3.6s ease-in-out infinite}
.card.r-l.full::after{background-image:linear-gradient(115deg,transparent 35%,rgb(255 230 150 / .5) 48%,transparent 60%);animation-duration:2.6s}
@keyframes shine{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}
.card.r-l.full{filter:drop-shadow(0 0 10px rgb(255 167 38 / .75))}
.card.r-e.full{filter:drop-shadow(0 0 6px rgb(180 108 255 / .6))}
.choices .card.r-e,.choices .card.r-l{animation:rarIn .9s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--rd,0s)}
@keyframes rarIn{0%{opacity:0;transform:scale(.6) rotate(-6deg)}60%{opacity:1;transform:scale(1.4)}100%{transform:scale(1.25)}}
.cx-rar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 22px}
.cx-rbtn{border:0;border-radius:999px;padding:8px 18px;font-family:var(--display);font-size:21px;cursor:pointer;color:var(--parA);background:linear-gradient(#3e3539,#1d181b);box-shadow:0 0 0 2px var(--rc);display:flex;align-items:center;gap:8px}
.cx-rbtn i{width:12px;height:12px;transform:rotate(45deg);background:var(--rc);box-shadow:0 0 6px var(--rc)}
.cx-rbtn small{font-family:inherit;font-size:16px;opacity:.75}
.cx-rbtn.on{color:var(--ink2);background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--rc)}
.cx-cardlock{position:relative;box-shadow:inset 0 0 0 2px var(--rc,rgb(181 139 76 / .4))!important}
.cx-cardlock .rgem{width:24px;height:24px;bottom:16px}
.cx-cardlock .cx-lock{width:80px}
.card .fdesc b.kind{color:#5fe07a;font-weight:900;text-shadow:0 1px 2px #000}
.card .kwd{display:none}
.kwtip{position:absolute;z-index:500;display:flex;flex-direction:column;gap:8px;width:300px;pointer-events:none}
.kwtip div{padding:10px 14px;border-radius:10px;background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 2px var(--ink2),inset 0 0 0 2px var(--trim),0 8px 18px rgb(0 0 0 / .6);display:flex;flex-direction:column;gap:3px}
.kwtip b{font-family:var(--display);font-weight:400;font-size:22px;color:#2f7a3c}
.kwtip span{font-size:16px;font-weight:700;color:#3d2a18;line-height:1.25}
#pickov{position:absolute;inset:0;z-index:450;display:grid;place-items:center;background:rgb(10 8 6 / .78);backdrop-filter:blur(3px)}
#pickov .pkbox{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:1700px}
#pickov .deckgrid{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:20px}
.st.pw{color:#ffe7ae}
.choices:has(.card){gap:100px}
.loot{position:relative;padding:14px 26px 14px 16px;min-height:96px;box-sizing:border-box}
.loot small{font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7a5a32}
.loot .lgot{position:absolute;top:-13px;right:12px;font-style:normal;font-size:14px;font-weight:900;padding:3px 10px;border-radius:999px;color:#e9ffe0;background:#3f7a2c;box-shadow:0 0 0 2px var(--ink2)}
.loot.isdofus{box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px #ffd77a,0 0 30px rgb(255 215 122 / .6),0 10px 22px rgb(0 0 0 / .55)}
.loot.take{padding-right:20px;transform:scale(1.06)}
.loot.take:hover{transform:scale(1.1)}
.loot .ltake{font-style:normal;font-family:var(--display);font-size:26px;padding:8px 22px;border-radius:10px;color:#3a2706;margin-left:8px;
  background:radial-gradient(circle at 40% 30%,#fff1c2,#ffd77a 55%,#c9963f);box-shadow:0 0 0 2px var(--ink2),0 4px 0 #6b4a1c}
.loot.full .ltake{filter:grayscale(1)}
@keyframes lootglow{50%{box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px #ffd77a,0 0 24px rgb(255 215 122 / .7)}}
.wares2{display:flex;gap:18px;justify-content:center;margin-block:6px 18px}
.ware2{display:flex;align-items:center;gap:12px;width:400px;padding:10px 14px;border:0;border-radius:14px;text-align:left;cursor:pointer;color:#3d2a18;font-size:16px;font-weight:700;
  background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim),0 10px 22px rgb(0 0 0 / .55);transition:transform .12s}
.ware2.small{width:300px}
.ware2:hover{transform:translateY(-4px)}
.ware2 > svg,.ware2 > img{width:52px;height:52px;flex:0 0 auto}
.ware2 span{display:flex;flex-direction:column;gap:2px;flex:1;line-height:1.2}
.ware2 b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink2)}
.ware2 em{display:flex;align-items:center;gap:4px;font-style:normal;font-weight:900;font-size:24px;color:#8a5a10}
.ware2 em svg{width:28px;height:28px}
.ware2 em.poor{color:#b3261e}
.ware2.sold{justify-content:center;cursor:default;font-family:var(--display);font-size:26px;color:#7a5a32;opacity:.7;min-height:76px}
.s-shop .wares{margin-block:20px 6px}
.warn.good{background:linear-gradient(#2f8a46,#1a5a2a);box-shadow:0 0 0 3px #2b1d12,inset 0 0 0 2px #a8f0b0,0 12px 30px rgb(0 0 0 / .7)}
#screen.on:not(.map){padding-top:150px;padding-bottom:30px;box-sizing:border-box}
#screen.s-shop{gap:18px}
.s-shop .eyebrow{display:none}
.s-shop .h2{font-size:60px}
.s-shop .lead{margin:0}
.deckgrid{max-height:470px}
/* ===== Dofus ===== */
.relic.dofus{padding:3px;background:radial-gradient(circle at 40% 35%,#3a3236,#120e10 72%)}
.relic .cnt{position:absolute;right:-6px;bottom:-6px;min-width:22px;height:22px;padding:0 4px;box-sizing:border-box;border-radius:11px;display:grid;place-items:center;
  font-style:normal;font-size:13px;font-weight:900;color:var(--ink2);background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 2px var(--ink2)}
.relic.huge{width:150px;height:150px;padding:10px}
.dofpick{display:flex;gap:34px;margin-top:20px}
.dofc{width:330px;padding:24px 20px;border:0;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;text-align:center;color:#3d2a18;
  background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim),0 16px 34px rgb(0 0 0 / .6);transition:transform .15s}
.dofc:hover{transform:translateY(-8px);box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px #ffd77a,0 0 34px rgb(255 215 122 / .6)}
.dofc b{font-family:var(--display);font-weight:400;font-size:32px;color:var(--ink2)}
.dofc span{font-size:18px;font-weight:700;line-height:1.3}
.st.poison{--c:#6fd36b}

/* ===== icônes de carte illustrées ===== */
.mnode.img{width:84px;height:84px;margin:-42px 0 0 -42px;padding:0;background:none;box-shadow:none;filter:drop-shadow(0 5px 6px rgb(60 35 15 / .45))}
.mnode.img img{width:100%;height:100%;display:block;pointer-events:none}
.mnode.img.t-boss{width:160px;height:160px;margin:-80px 0 0 -80px;padding:0;box-shadow:none;filter:drop-shadow(0 0 14px rgb(138 31 18 / .7)) drop-shadow(0 8px 10px rgb(60 35 15 / .5))}
.mnode.img.avail{box-shadow:none;filter:drop-shadow(0 0 4px #ffd77a) drop-shadow(0 0 14px rgb(226 176 90 / .95)) drop-shadow(0 5px 6px rgb(60 35 15 / .45))}
.mnode.img.done{box-shadow:0 0 0 4px #8a1f12;filter:saturate(.55) brightness(.92)}
.mnode.img.cur{box-shadow:0 0 0 5px #8a1f12,0 0 22px #8a1f12;filter:none}
.mnode.img.past{filter:grayscale(.85) opacity(.5)}
.mnode.img .lbl{top:calc(100% + 4px);text-shadow:0 1px 0 rgb(255 240 210 / .8)}
.legend img{width:34px;height:34px}

/* ===== nouvelles icônes ===== */
.mnode.img{width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%}
.mnode.img.t-boss{width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%}
.mnode.img.t-elite{width:100px;height:100px;margin:-50px 0 0 -50px}
.relic:not(.dofus){padding:4px}
.pot{padding:2px}
.uico{width:40px;height:40px;object-fit:contain;display:block}
.gem .uico{width:42px;height:42px;margin:-4px 0}

/* ===== icônes d'interface ===== */
.uimg{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.medal.pic{width:66px;height:66px;padding:0;background:none;box-shadow:none;filter:drop-shadow(0 4px 6px rgb(0 0 0 / .6))}
.medal.pic:hover{box-shadow:none;filter:drop-shadow(0 0 10px rgb(255 215 122 / .8)) drop-shadow(0 4px 6px rgb(0 0 0 / .6))}
.pile{width:110px;height:110px;top:950px;background:none;box-shadow:none;border-radius:50%;filter:drop-shadow(0 6px 10px rgb(0 0 0 / .6))}
.pile .uimg{width:110px;height:110px}
.pile.draw{left:26px} .pile.disc{right:26px}
.pile b{right:-4px;bottom:-4px}
.orb.pa{background:var(--orb-pa) center/contain no-repeat,radial-gradient(circle,var(--pa) 60%,transparent 62%);width:170px;height:170px;left:60px;top:760px}
.orb.pm{background:var(--orb-pm) center/contain no-repeat,radial-gradient(circle,var(--pm) 60%,transparent 62%);width:112px;height:112px;left:232px;top:850px}
.orb.pa::after,.orb.pm::after{display:none}
.orb{filter:drop-shadow(0 8px 14px rgb(0 0 0 / .6))}
.orb.empty{filter:saturate(.25) brightness(.7) drop-shadow(0 8px 14px rgb(0 0 0 / .6))}
.orb small{bottom:-30px}

/* ===== écran titre compact ===== */
#screen.s-title{padding-top:40px;padding-bottom:70px;gap:22px;justify-content:center}
.s-title .logo{font-size:128px;line-height:.92}
.s-title .lead{font-size:24px}
.s-title .classes{margin-top:6px}
.s-title .cls.open .port{width:170px;height:165px}
.s-title .lead.small{margin:0!important}
.s-title .btn{margin-top:4px}

#screen.s-title{padding-top:30px;padding-bottom:60px;gap:16px}
.s-title .logo{font-size:112px}
.titlerow{display:flex;align-items:center;gap:40px}
.titleside{display:flex;flex-direction:column;align-items:center;gap:12px}
.titleside .btn{font-size:40px;padding:16px 70px}
.titleside span{font-size:20px;font-weight:800;color:var(--parch);text-shadow:0 2px 3px #000}

/* ===== réglages du son ===== */
.vols{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:18px 22px;border-radius:14px;background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim)}
.vols label{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:14px;font-size:19px;font-weight:800;color:var(--ink2);text-align:left}
.vols b{text-align:right;font-variant-numeric:tabular-nums}
.vols input[type=range]{width:100%;accent-color:#8a1f12;height:22px;cursor:pointer}
/* ===== V0.6 : PM, amélioration, sorts, encyclopédie ===== */
.card .fcost.pm{color:#c8ffd8;-webkit-text-stroke-color:#0b3a1e}
.card .fdesc{line-height:1.18}
.forgeanim{animation:fga .9s ease-in-out}
.forgeanim .card{transform:scale(1.5)!important;animation:fgshake .9s ease-in-out;filter:drop-shadow(0 0 30px #ffd77a)}
.forgeanim.done .card{animation:fgpop .6s cubic-bezier(.2,.9,.3,1.4);filter:drop-shadow(0 0 40px #ffd77a) drop-shadow(0 0 80px #ffb84d)}
@keyframes fgshake{0%{filter:brightness(1)}20%,40%,60%,80%{transform:scale(1.5) rotate(-2deg);filter:brightness(1.6) drop-shadow(0 0 30px #ffd77a)}30%,50%,70%{transform:scale(1.5) rotate(2deg)}100%{filter:brightness(3)}}
@keyframes fgpop{0%{transform:scale(1.2);filter:brightness(4)}60%{transform:scale(1.7)}100%{transform:scale(1.5)}}
.fighter.jump .sprite{animation:hjump .7s cubic-bezier(.3,.6,.3,1)}
@keyframes hjump{25%{transform:translateY(12px) scale(1.06,.9)}55%{transform:translateY(-150px) rotate(-8deg)}80%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
.fighter.dash .sprite{animation:hdash .6s cubic-bezier(.5,0,.3,1)}
@keyframes hdash{20%{transform:translateX(-30px) scale(.95,1.05)}45%{transform:translateX(520px) skewX(-12deg);filter:blur(1px) brightness(1.3)}70%{transform:translateX(460px)}100%{transform:none}}
.fighter.cast .sprite{animation:hcast .7s ease-out}
@keyframes hcast{30%{transform:translateY(-10px) scale(1.04);filter:brightness(1.4) drop-shadow(0 0 24px #ffd77a)}100%{transform:none;filter:none}}
/* encyclopédie */
#overlay.codex{padding:30px 50px;background:rgb(10 6 3 / .94)}
.cx{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1700px;height:100%}
.cx-head{display:flex;align-items:baseline;gap:24px}
.cx-count{font-size:22px;font-weight:800;color:var(--muted)}
.cx-tabs{display:flex;gap:10px}
.cx-tab{border:0;border-radius:10px;padding:10px 26px;font-family:var(--display);font-size:26px;cursor:pointer;color:var(--parA);background:linear-gradient(#3e3539,#1d181b);box-shadow:0 0 0 2px var(--trim)}
.cx-tab.on{color:var(--ink2);background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim)}
.cx-body{flex:1;min-height:0;width:100%;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;padding:6px}
.cx-body.cxb-card{display:block}
.cx-cards{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.cx-cardlock{width:220px;height:317px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(#2c2427,#141013);box-shadow:inset 0 0 0 2px rgb(181 139 76 / .4)}
.cx-mon,.cx-item{display:flex;gap:18px;padding:16px;border-radius:14px;color:#3d2a18;background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim)}
.cx-mon.locked,.cx-item.locked{background:linear-gradient(#2c2427,#141013);color:var(--muted);box-shadow:inset 0 0 0 2px rgb(181 139 76 / .35);align-items:center}
.cx-pic{flex:0 0 180px;height:180px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 60%,#7a9a5a,#2e3a24)}
.cx-pic img{max-width:92%;max-height:92%;object-fit:contain;filter:drop-shadow(0 6px 6px rgb(0 0 0 / .5))}
.cx-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-info b,.cx-item b,.cx-mon.locked b{font-family:var(--display);font-weight:400;font-size:30px;color:var(--ink2)}
.cx-mon.locked b,.cx-item.locked b{color:var(--muted)}
.cx-rank{font-style:normal;font-family:var(--body);font-size:15px;font-weight:900;padding:2px 10px;border-radius:999px;background:#8a1f12;color:#fff;vertical-align:middle}
.cx-info small{font-size:16px;font-weight:800;color:#7a5a32}
.cx-info p{margin:0;font-size:17px;font-style:italic}
.cx-info ul{margin:4px 0 0;padding-left:18px;font-size:17px;font-weight:700;display:flex;flex-direction:column;gap:3px}
.cx-info em{font-style:normal;font-weight:900;color:#7a2614}
.cx-lock{flex:0 0 80px;height:80px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:46px;color:rgb(181 139 76 / .6);background:rgb(0 0 0 / .3);box-shadow:inset 0 0 0 2px rgb(181 139 76 / .35)}
.cx-mon.locked{min-height:120px}
.cx-item{align-items:center}
.cx-item span{display:flex;flex-direction:column;gap:4px;font-size:17px;font-weight:700}
.cx-item i{font-style:normal;font-size:15px;color:#1f6a35}
.cx-ico{flex:0 0 84px;height:84px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 40% 35%,#51474c,#1a1518 72%);box-shadow:inset 0 0 0 2px var(--trim)}
.cx-ico.dofus{box-shadow:inset 0 0 0 2px #ffd77a,0 0 14px rgb(255 215 122 / .5)}
.cx-ico svg,.cx-ico img{width:78%;height:78%;object-fit:contain}
.cx-body.cxb-relic,.cx-body.cxb-dofus,.cx-body.cxb-pot{grid-template-columns:repeat(3,minmax(0,1fr))}
.cxbtn{display:flex;align-items:center;gap:12px;font-size:26px;padding:8px 40px 8px 26px}
.cxbtn .uimg{width:48px;height:48px}
#screen.s-title{gap:14px}

.sflash{position:absolute;inset:0;z-index:35;pointer-events:none;animation:sflash .55s ease-out forwards;mix-blend-mode:screen}
@keyframes sflash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.fighter.cast .sprite{animation:hcast2 .8s ease-out}
@keyframes hcast2{25%{transform:translateY(-22px) scale(1.07);filter:brightness(1.7) drop-shadow(0 0 40px #ffd77a)}100%{transform:none;filter:none}}

/* ===== difficulté ===== */
#screen.s-diff{gap:24px}
.diffs{display:flex;gap:30px}
.diffc{width:440px;border:0;border-radius:18px;padding:26px 26px 22px;text-align:left;display:flex;flex-direction:column;gap:10px;cursor:pointer;color:#3d2a18;
  background:linear-gradient(var(--parA),var(--parB));box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px var(--trim),0 16px 34px rgb(0 0 0 / .6);transition:transform .15s}
.diffc:hover{transform:translateY(-8px);box-shadow:0 0 0 3px var(--ink2),inset 0 0 0 2px #ffd77a,0 0 34px rgb(255 215 122 / .6)}
.diffc b{font-family:var(--display);font-weight:400;font-size:46px;color:var(--ink2)}
.diffc.d-deb b{color:#2f7a3a} .diffc.d-avt b{color:#a86a10} .diffc.d-cnf b{color:#8a1f12}
.diffc .dd{font-size:19px;font-weight:800}
.diffc ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:17px;font-weight:700;line-height:1.25}
.diffc em{display:block;font-style:normal;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#7a5a32}
.cx-ph{width:120px;height:140px;border-radius:48% 48% 22% 22%/58% 58% 16% 16%;box-shadow:inset -12px -16px 30px rgb(0 0 0 / .35)}
.cx-act{font-style:normal;font-family:var(--body);font-size:14px;font-weight:900;padding:2px 9px;border-radius:999px;background:#5b3a22;color:#f4e6c6;vertical-align:middle}