/* Thème « bois et or » façon jeu mobile d'aventure : contours épais, boutons bombés, cadres dorés */
:root {
  --bg: #2a170b; --wood: #5b3a1e; --wood2: #7a4e27; --card: #4a2c17; --card2: #6b4526; --line: #d39a45; --dark: #2f1809;
  --txt: #fff3d6; --sub: #e6c993; --gold: #ffd34d; --red: #ff5a4d;
  --g1: #9be85a; --g2: #3fae2a; --o1: #ffd45e; --o2: #ff9a1c; --b1: #6ad4ff; --b2: #2a7be0; --p1: #ff8ad0; --p2: #e03a96;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #140a04; color: var(--txt); font-family: 'Fredoka', system-ui, sans-serif; overflow: hidden; user-select: none; }
#app { display: flex; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; background: var(--bg); }
b, .h, .btn, .cn { font-weight: 700; }

/* ---------- Barre du haut ---------- */
#hud { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; background: linear-gradient(#8a5a2b, #5b3a1e); border-bottom: 4px solid var(--dark); box-shadow: inset 0 -3px 0 var(--line), 0 3px 0 #0006; z-index: 3; }
.badge { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.lvl { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe98a, #ff9a1c); border: 3px solid var(--dark); display: grid; place-items: center; box-shadow: 0 2px 0 #0007, inset 0 2px 0 #fff8; flex: none; }
.lvl span { font-weight: 700; font-size: 18px; color: #fff; -webkit-text-stroke: 3px var(--dark); paint-order: stroke fill; }
.pn2 { font-size: 12px; min-width: 0; flex: 1; } .pn2 b { display: block; text-shadow: 0 2px 0 var(--dark); }
.xp { height: 8px; background: #0008; border: 2px solid var(--dark); border-radius: 6px; overflow: hidden; margin-top: 2px; max-width: 90px; } .xp i { display: block; height: 100%; width: 0; background: linear-gradient(#9be85a, #3fae2a); }
.res { display: flex; align-items: center; gap: 4px; background: linear-gradient(#2a170b, #3b2312); border: 3px solid var(--dark); border-radius: 20px; padding: 2px 10px 2px 4px; min-width: 84px; box-shadow: inset 0 2px 0 #0008, 0 2px 0 #0006; }
.ri { font-size: 20px; filter: drop-shadow(0 2px 0 #0008); } .res b { color: var(--gold); font-size: 17px; flex: 1; text-align: right; text-shadow: 0 2px 0 var(--dark); }

/* ---------- Scène ---------- */
#stage3d { position: relative; flex: 1 1 46%; min-height: 220px; overflow: hidden; border-bottom: 4px solid var(--dark); }
#stage3d canvas { display: block; width: 100%; height: 100%; }
#banner { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#stageLabel { background: linear-gradient(#ffb84d, #ff7a1c); border: 3px solid var(--dark); border-radius: 14px 14px 18px 18px; padding: 1px 16px 3px; font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 2px 0 var(--dark), 0 0 6px var(--dark); box-shadow: 0 3px 0 #0007, inset 0 2px 0 #fff7; white-space: nowrap; }
#stageLabel em { font-style: normal; font-size: 20px; margin-right: 6px; }
.diff { padding: 0 8px; border-radius: 10px; border: 2px solid var(--dark); color: #20123d; font-weight: 700; font-size: 11px; margin-left: 6px; text-shadow: none; }
#waveRow { background: #000a; border: 2px solid var(--dark); border-radius: 10px; padding: 0 10px; font-size: 12px; font-weight: 600; }
#ebar { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); width: 56%; max-width: 280px; height: 11px; background: #0009; border: 3px solid var(--dark); border-radius: 8px; overflow: hidden; z-index: 2; box-shadow: 0 2px 0 #0006; }
#ebar i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff8a7a, #e0321f); transition: width .15s; }
.side { position: absolute; right: 6px; top: 70px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.sbtn { width: 52px; padding: 3px 0 2px; border-radius: 14px; border: 3px solid var(--dark); background: linear-gradient(#8a5a2b, #5b3a1e); color: var(--txt); font: inherit; cursor: pointer; box-shadow: 0 3px 0 #0008, inset 0 2px 0 #fff4; display: flex; flex-direction: column; align-items: center; }
.sbtn span { font-size: 20px; line-height: 1.1; } .sbtn small { font-size: 10px; font-weight: 700; text-shadow: 0 1px 0 var(--dark); }
.sbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0008; }
.sbtn.on { background: linear-gradient(var(--g1), var(--g2)); }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 19px; -webkit-text-stroke: 3px var(--dark); paint-order: stroke fill; animation: rise .9s ease-out forwards; white-space: nowrap; }
.dmg.hit { color: #fff; } .dmg.crit { color: #ffe066; font-size: 30px; } .dmg.hurt { color: #ff7a8a; } .dmg.heal { color: #8dff9b; }
.dmg.gold { color: var(--gold); font-size: 15px; } .dmg.skill { color: #ffd6ff; font-size: 17px; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
#toasts { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 3; }
.toast { background: linear-gradient(#5b3a1e, #3b2312); border: 3px solid var(--line); padding: 4px 12px; border-radius: 14px; font-size: 14px; animation: pop .3s; max-width: 92%; text-align: center; transition: opacity .4s; box-shadow: 0 3px 0 #000a; }
.toast.out { opacity: 0; } @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Panneau ---------- */
#panel { flex: 1 1 40%; overflow-y: auto; padding: 8px 8px 10px; background: repeating-linear-gradient(90deg, #3b2312 0 38px, #36200f 38px 40px); -webkit-overflow-scrolling: touch; }
.card { background: linear-gradient(#5b3a1e, #4a2c17); border: 3px solid var(--dark); border-radius: 14px; padding: 10px; margin-bottom: 8px; box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 #0007; }
.card.big { background: linear-gradient(#6b4526, #4a2c17); } .card.center { text-align: center; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.h { font-size: 19px; text-shadow: 0 2px 0 var(--dark); } .h small { font-size: 13px; color: var(--gold); margin-left: 6px; }
.sub { color: var(--sub); font-size: 13px; margin: 3px 0; } .stats { font-size: 14px; margin: 6px 0; }
.gps { color: var(--gold); font-weight: 700; white-space: nowrap; text-shadow: 0 2px 0 var(--dark); } .prog { font-size: 11px; margin-top: 6px; line-height: 1.5; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btn { flex: 1; min-width: 80px; padding: 9px 8px; border-radius: 13px; border: 3px solid var(--dark); background: linear-gradient(var(--b1), var(--b2)); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-shadow: 0 2px 0 rgba(0,0,0,.4); box-shadow: 0 4px 0 var(--dark), inset 0 2px 0 #fff7; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dark), inset 0 2px 0 #fff7; }
.btn.pri { background: linear-gradient(var(--g1), var(--g2)); } .btn.gold { background: linear-gradient(var(--o1), var(--o2)); color: #fff; }
.btn.on { background: linear-gradient(var(--g1), var(--g2)); } .btn.small { padding: 4px 10px; font-size: 12px; min-width: 0; flex: none; border-width: 2px; box-shadow: 0 3px 0 var(--dark), inset 0 2px 0 #fff7; }
.btn.dis { filter: grayscale(.85) brightness(.75); } .btn.close { width: 100%; margin-top: 10px; background: linear-gradient(var(--p1), var(--p2)); }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; }
.tcard { background: linear-gradient(#6b4526, #3f2412); border: 3px solid var(--dark); border-radius: 12px; padding: 4px 4px 6px; text-align: center; box-shadow: inset 0 0 0 2px var(--c, var(--line)), 0 3px 0 #0007; position: relative; }
.tport { width: 44px; height: 44px; margin: 0 auto 2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9, var(--c, #888) 70%); border: 3px solid var(--dark); display: grid; place-items: center; font-size: 24px; }
.tl { position: absolute; top: 2px; left: 2px; background: var(--dark); color: var(--gold); font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; }
.tn { font-size: 12px; font-weight: 700; } .hpbar { height: 8px; background: #000a; border: 2px solid var(--dark); border-radius: 6px; overflow: hidden; margin-top: 3px; } .hpbar i { display: block; height: 100%; background: linear-gradient(#9be85a, #3fae2a); transition: width .2s; }
.bar, .barw { display: block; height: 10px; background: #000a; border: 2px solid var(--dark); border-radius: 6px; overflow: hidden; } .barw { margin: 8px 0; height: 14px; } .bar i, .barw i { display: block; height: 100%; background: linear-gradient(#9be85a, #3fae2a); }

.tabs2 { display: flex; gap: 6px; margin-bottom: 8px; }
.t2 { flex: 1; font-size: 26px; padding: 4px; border-radius: 12px; border: 3px solid var(--dark); background: linear-gradient(#6b4526, #4a2c17); color: var(--txt); cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; box-shadow: 0 3px 0 #0007; }
.t2 small { font-size: 11px; color: var(--sub); } .t2.on { background: linear-gradient(var(--o1), var(--o2)); box-shadow: 0 3px 0 #0007, 0 0 12px #ffcb3c88; } .t2.on small { color: #fff; } .t2.out { opacity: .6; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot { background: linear-gradient(#5b3a1e, #3f2412); border: 3px solid var(--dark); border-radius: 12px; padding: 8px; color: var(--txt); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 #0007; }
.si { font-size: 24px; } .sn { font-size: 13px; font-weight: 700; } .sv { font-size: 12px; color: var(--sub); }
.list { display: flex; flex-direction: column; gap: 6px; }
.irow { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(#5b3a1e, #4a2c17); border: 2px solid var(--dark); border-radius: 10px; padding: 6px 8px; }
.chip { border: 2px solid; border-radius: 10px; padding: 3px 8px; font-size: 13px; font-weight: 700; background: #0006; } .chip i { font-style: normal; color: #fff; opacity: .9; font-size: 12px; margin-left: 4px; }

.egg { font-size: 44px; display: inline-block; filter: drop-shadow(0 0 8px var(--c, #fff)); } .egg.big { font-size: 110px; } .egg.lock { filter: grayscale(1) brightness(.6); font-size: 70px; }
.egg.shake { animation: shake .5s infinite; } @keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.05); } 75% { transform: rotate(12deg) scale(1.05); } }
.incs { display: flex; gap: 6px; } .incub { flex: 1; background: #0005; border: 3px solid var(--c, var(--dark)); border-radius: 12px; padding: 6px 2px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.incub.empty { opacity: .5; border-style: dashed; } .incub.ready { box-shadow: 0 0 14px var(--c); } .incub small { font-size: 11px; color: var(--sub); } .incub .egg { font-size: 36px; }
.eggs { display: flex; flex-wrap: wrap; gap: 6px; } .egg-inv { background: #0005; border: 3px solid var(--c); border-radius: 12px; color: var(--txt); font: inherit; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .egg-inv small { font-size: 10px; } .egg-inv .egg { font-size: 30px; }
.petgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pet { background: linear-gradient(#6b4526, #4a2c17); border: 3px solid; border-radius: 12px; padding: 6px 2px; color: var(--txt); font: inherit; text-align: center; cursor: pointer; } .pet.unk { opacity: .5; } .pet.act { box-shadow: 0 0 14px var(--gold); background: linear-gradient(var(--o1), var(--o2)); }
.pe { font-size: 32px; } .pe.huge { font-size: 90px; animation: bounce 1s infinite; } .pn { font-size: 13px; font-weight: 700; } .pb { font-size: 10px; color: var(--sub); } .pet.act .pb { color: #fff; }
@keyframes bounce { 50% { transform: translateY(-10px) scale(1.05); } }

/* ---------- Coffres, forge, quêtes ---------- */
.chests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.chest { background: linear-gradient(#6b4526, #3f2412); border: 3px solid var(--dark); border-radius: 12px; padding: 6px 4px; text-align: center; box-shadow: inset 0 0 0 2px var(--c), 0 3px 0 #0007; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cico { font-size: 34px; filter: drop-shadow(0 0 6px var(--c)); } .cnm { font-size: 11px; font-weight: 700; } .ccount { font-size: 15px; color: var(--gold); font-weight: 700; }
.forge .btn { flex: none; } .forge b { text-shadow: 0 1px 0 var(--dark); }
.acts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .irow { flex-wrap: wrap; }
.plus { color: #8dff9b; } .center { text-align: center; }
.afk { font-size: 18px; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; } .afk b { color: var(--gold); }
.qrow { display: flex; align-items: center; gap: 8px; background: linear-gradient(#5b3a1e, #4a2c17); border: 2px solid var(--dark); border-radius: 12px; padding: 8px; } .qrow.cl { opacity: .6; }
.qmain { flex: 1; min-width: 0; } .qt { font-size: 14px; font-weight: 700; } .qr { font-size: 12px; color: var(--sub); } .barw.q { margin: 4px 0; height: 10px; }
.qact { flex: none; min-width: 70px; text-align: right; } .qok { color: #8dff9b; font-weight: 700; } .qp { color: var(--sub); font-weight: 700; font-size: 13px; }
.list { gap: 6px; } .reveal-row { animation: pop .4s backwards; }

/* ---------- Piles d'œufs ---------- */
.eggrow { display: flex; align-items: center; gap: 8px; background: linear-gradient(#5b3a1e, #4a2c17); border: 3px solid var(--dark); border-radius: 12px; padding: 6px 8px; margin-top: 6px; box-shadow: inset 0 0 0 2px var(--c); }
.eggrow .egg { font-size: 36px; flex: none; } .emain { flex: 1; min-width: 0; } .en { font-size: 14px; } .en b { color: var(--gold); }
.eb { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.srow { display: flex; align-items: center; gap: 6px; background: #0003; border-left: 6px solid var(--c); border-radius: 10px; padding: 4px 8px; } .sn2 { flex: 1; font-size: 13px; font-weight: 700; }
.prow { gap: 8px; flex-wrap: nowrap; border-width: 2px; } .pe.sm { font-size: 26px; } .pnm { flex: 1; display: flex; flex-direction: column; line-height: 1.1; } .pnm small { color: var(--sub); font-size: 11px; }
.pcnt { font-weight: 700; color: var(--gold); font-size: 16px; } .badge { color: #8dff9b; font-weight: 700; text-align: right; min-width: 70px; }

/* ---------- Navigation du bas ---------- */
#nav { display: flex; gap: 4px; padding: 5px 6px 7px; background: linear-gradient(#8a5a2b, #5b3a1e); border-top: 4px solid var(--dark); box-shadow: inset 0 3px 0 var(--line); }
#nav button { flex: 1; position: relative; padding: 2px 0 3px; background: linear-gradient(#6b4526, #4a2c17); border: 3px solid var(--dark); border-radius: 14px; color: var(--sub); font: inherit; display: flex; flex-direction: column; align-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--dark); }
#nav .ic { font-style: normal; font-size: 24px; line-height: 1.15; } #nav small { font-size: 11px; font-weight: 700; }
#nav button.on { background: linear-gradient(var(--o1), var(--o2)); color: #fff; transform: translateY(-4px); box-shadow: 0 5px 0 var(--dark), 0 0 14px #ffcb3caa; text-shadow: 0 1px 0 var(--dark); }
.dot { display: none; position: absolute; top: -4px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid var(--dark); } .dot.show { display: block; animation: bounce 1s infinite; }

/* ---------- Fenêtres ---------- */
#modal { position: fixed; inset: 0; background: #000b; display: none; align-items: center; justify-content: center; padding: 12px; z-index: 10; } #modal.open { display: flex; }
.mbox { background: linear-gradient(#6b4526, #3b2312); border: 4px solid var(--dark); border-radius: 18px; padding: 14px; width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; box-shadow: inset 0 0 0 3px var(--line), 0 6px 0 #000a; }
.hatch { min-height: 260px; display: flex; align-items: center; justify-content: center; text-align: center; } .reveal { animation: pop .5s; text-shadow: 0 0 20px var(--c); }
.dtabs { display: flex; gap: 4px; margin: 8px 0; } .dt { flex: 1; padding: 6px 2px; border-radius: 10px; border: 3px solid var(--dark); background: #0005; color: var(--txt); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .dt.on { background: var(--c); color: #20123d; } .dt:disabled { opacity: .35; }
.world { background: #0004; border-left: 6px solid var(--c); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; } .wn { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.fls { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.fl { padding: 6px 0; border-radius: 8px; border: 2px solid var(--dark); background: linear-gradient(#8a5a2b, #5b3a1e); color: var(--txt); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.fl.clr { background: linear-gradient(var(--g1), var(--g2)); } .fl.cur { outline: 3px solid var(--gold); } .fl.boss { border-color: var(--red); } .fl.lock { opacity: .3; cursor: default; }

#loading { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, #7a4e27, #1f1006); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 20; transition: opacity .6s; } #loading.gone { opacity: 0; pointer-events: none; }
.logo { font-size: 84px; font-weight: 700; background: linear-gradient(#fff6a8, #ff9f1c 60%, #ff4d4d); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #000a); letter-spacing: 4px; } .logo.small { font-size: 52px; }
#loadbar { width: 220px; height: 14px; background: #0008; border: 3px solid var(--dark); border-radius: 8px; overflow: hidden; } #loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffd75e, #ff7a1c); transition: width .2s; }
#choose { position: fixed; inset: 0; z-index: 15; display: none; align-items: center; justify-content: center; padding: 12px; background: radial-gradient(circle at 50% 30%, #7a4e27, #1f1006); overflow-y: auto; } #choose.open { display: flex; }
.cbox { width: 100%; max-width: 560px; text-align: center; } .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cc { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #4a2c17), #3b2312); border: 4px solid var(--dark); border-radius: 16px; padding: 12px 8px; color: var(--txt); font: inherit; cursor: pointer; text-align: center; box-shadow: inset 0 0 0 3px var(--c), 0 5px 0 #000a; } .cc:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--c); }
.ci { font-size: 46px; } .cn { font-size: 20px; } .cd2 { font-size: 12px; color: var(--sub); margin: 4px 0; min-height: 48px; } .cs { font-size: 12px; } .ck { font-size: 12px; color: var(--gold); margin-top: 4px; font-weight: 700; }
@media (min-width: 761px) { #app { border-left: 4px solid #000; border-right: 4px solid #000; } }

.lvsel{display:flex;align-items:center;gap:8px;margin:6px 0 2px}.lvsel .lvn{flex:1;text-align:center;font-weight:800}

.v3d{display:block;width:100%;height:46dvh;min-height:260px;border-radius:14px;background:radial-gradient(circle at 50% 35%,#7a4f9a,#2a1740 75%);touch-action:none;cursor:grab;margin:8px 0}.vtabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0}.vtabs .btn.on{outline:3px solid #ffd23c}.vname{text-align:center;font-size:18px;margin:2px 0}

.xpwrap{margin:6px 0}.xpwrap .barw i{background:linear-gradient(#9b7bff,#6a45e6)}

.subs{display:flex;flex-direction:column;gap:6px;margin:8px 0}.subrow{display:flex;align-items:center;gap:10px;background:#174a5a;border-radius:6px;padding:10px 12px;color:#9fb8c4;font-size:14px}.subrow b{color:#4de3ff;font-size:20px}.subrow span{flex:1}.subrow em{font-style:normal;font-weight:800;color:#4de3ff}.subrow.on{background:#1f6a7e;color:#fff}.subrow.on em{color:#9dffb0}.subn{color:#4de3ff}

/* fiche du héros : 3D à gauche, équipement et stats à droite (comme dans les jeux de collection) */
#modal.wide .mbox{max-width:1000px}
.hscreen{display:grid;grid-template-columns:1fr;gap:10px}
.hs-title{display:flex;justify-content:space-between;align-items:baseline;font-size:20px;margin:4px 2px}.hs-title small{color:#ffd9a0;font-size:13px;background:#0005;padding:2px 8px;border-radius:8px}
.hscreen .v3d{height:38dvh;min-height:240px;margin:4px 0}
.hs-xp{display:flex;align-items:center;gap:8px;font-size:13px}.hs-xp .barw{flex:1;height:14px}.hs-xp .barw i{background:linear-gradient(#9b7bff,#6a45e6)}.hs-xp b{color:#ffe066}
.hs-power{text-align:right;font-size:15px;background:#0004;border-radius:10px;padding:6px 12px}.hs-power b{color:#ffe066;font-size:20px}
.gridtitle{font-size:13px;color:#ffd9a0;margin:6px 2px 2px;letter-spacing:.5px}
.gtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gtile{position:relative;aspect-ratio:1;border:3px solid var(--c,#8a6a2a);border-radius:12px;background:linear-gradient(#4a3320,#2a1c10);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;font:inherit;cursor:pointer}
.gtile .gi{font-size:28px}.gtile small{font-size:10px;line-height:1.1;text-align:center}.gtile .gsub{color:#4de3ff;letter-spacing:1px}
.gtile.empty{border-style:dashed;opacity:.85}.gtile .gplus{position:absolute;right:4px;bottom:4px;background:#ffd23c;color:#3b2312;border-radius:50%;width:20px;height:20px;font-style:normal;font-weight:900;display:flex;align-items:center;justify-content:center}
.gtile .gpl{position:absolute;right:4px;top:3px;font-style:normal;font-weight:800;font-size:12px;color:#9dffb0}
.gtile.lock{opacity:.5;border-color:#555}
.etiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.etile{border:3px solid #8a6a2a;border-radius:12px;background:linear-gradient(#3a2a4a,#201530);color:#fff;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;cursor:pointer}
.etile .es{font-size:12px}.etile small{font-size:11px;color:#ffd9a0}.etile.own{border-color:#4ade80}.etile.can{border-color:#ffd23c;box-shadow:0 0 12px #ffd23c88}.etile.lock{opacity:.7}
.statbox{background:#0a1c2acc;border-radius:12px;padding:8px 12px;margin-top:8px}
.strow{display:flex;justify-content:space-between;padding:3px 0;font-size:15px;border-bottom:1px solid #ffffff12}.strow span{color:#c8d6e0}.strow b{font-weight:800}.up{color:#7dff9b;font-style:normal;font-weight:800;font-size:13px}
@media (min-width:760px){.hscreen{grid-template-columns:1.25fr 1fr}.hscreen .v3d{height:62dvh}}

.gtiles{grid-template-columns:repeat(3,1fr)}.gtile{aspect-ratio:1.15}@media (min-width:760px){.gtile .gi{font-size:34px}}

.rarlist summary{cursor:pointer}.rarrow{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid #ffffff14}.rarrow i{width:14px;height:14px;border-radius:50%;flex:none}.rarrow b{flex:1}.rarrow span{color:#d8c8a8}

/* onglet Objets : filtres + cartes */
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.chipb{display:flex;align-items:center;gap:4px;background:#2a1a0e;border:2px solid #8a6a2a;color:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer}
.chipb small{font-size:11px;color:#ffd9a0}.chipb.on{background:#a8641a;border-color:#ffd23c;box-shadow:0 0 8px #ffd23c66}
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
@media (min-width:760px){.igrid{grid-template-columns:repeat(3,1fr)}}
.icard{border:3px solid var(--c);border-radius:12px;background:linear-gradient(#4a3320,#2a1c10);padding:8px;display:flex;flex-direction:column;gap:5px;position:relative}
.icard.locked{box-shadow:inset 0 0 0 2px #ffd23c88}
.ic-head{display:flex;align-items:center;gap:6px;font-size:13px}.ic-head b{flex:1;line-height:1.1}.ic-head .gi{font-size:20px}
.lockb{background:none;border:none;font-size:16px;cursor:pointer;padding:0}
.ic-main{font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:4px}
.ic-subs{font-size:11px;color:#8fe8ff;display:flex;flex-direction:column;gap:1px;min-height:14px}.ic-subs small{color:#8b7a66}
.ic-btns{display:flex;flex-wrap:wrap;gap:4px}.ic-btns .btn{flex:1;min-width:0;padding:4px 6px;font-size:12px}
.cmp{font-size:12px;font-weight:800;border-radius:6px;padding:1px 6px;background:#0004}.cmp.up{color:#7dff9b}.cmp.dn{color:#ff8a8a}.cmp.new{color:#ffe066}

.ic-btns .btn{flex:1 1 42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ic-btns .btn:first-child{flex:0 0 38px}

.sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none}.sec>summary::-webkit-details-marker{display:none}.sec>summary::after{content:'▾';color:#ffd23c;font-size:18px;transition:transform .15s}.sec:not([open])>summary::after{transform:rotate(-90deg)}.sec[open]>summary{margin-bottom:8px}

/* compétences */
.skills{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:560px){.skills{grid-template-columns:1fr 1fr}}
.stile{border:2px solid #6a5030;border-radius:10px;background:#2a1c10;padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.stile.on{border-color:#ffd23c;box-shadow:0 0 10px #ffd23c55;background:linear-gradient(#4a3320,#2a1c10)}
.st-head{display:flex;align-items:center;gap:6px;font-size:13px}.st-head b{flex:1}.st-head .gi{font-size:20px}.st-head small{color:#ffd9a0}
.st-btns{display:flex;gap:6px}.st-btns .btn{flex:1;padding:3px 6px;font-size:12px}

.stile.lock{opacity:.55;border-style:dashed}

.pet{position:relative}.pinfo{position:absolute;right:4px;top:3px;font-style:normal;font-size:14px;background:#0006;border-radius:8px;padding:1px 5px;cursor:pointer}.etile.sel{outline:3px solid #ffd23c}

.foodrow{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid #ffffff12;font-size:14px}.foodrow small{color:#ffd9a0}.foodrow .btn{padding:3px 8px;font-size:12px;margin-left:3px}.foodstock{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0}

/* métiers */
.matgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.matc{background:#2a1a0e;border:2px solid #6a5030;border-radius:10px;padding:5px 8px;font-size:13px;display:flex;justify-content:space-between;gap:6px}.matc.zero{opacity:.55}
.buffrow{display:flex;flex-wrap:wrap;gap:6px}.buffc{background:#174a5a;border-radius:8px;padding:3px 9px;font-size:13px}
.jrun{margin:6px 0;font-size:15px}.jcd{color:#ffe066;font-weight:800}.ready{color:#7dff9b}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff12}.rrow.lock{opacity:.55}.rrow .rl{flex:1;font-size:14px}.rrow small{color:#ffd9a0}.cost{font-size:12px;margin-top:2px}.cost span{margin-right:6px}.miss{color:#ff8a8a}
.rrow .btn{margin-left:3px;padding:3px 8px;font-size:12px}
.chipb.dis{opacity:.45}
#nav small{font-size:10px}

/* arbre de talents */
.badge2{background:#ffd23c;color:#3b2312;border-radius:10px;padding:0 6px;margin-left:4px;font-size:12px}
.tree{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
@media (min-width:760px){.tree{grid-template-columns:repeat(4,1fr)}}
.tbranch{border:3px solid var(--c);border-radius:12px;background:#2a1c10;padding:6px}
.th{font-size:16px;text-align:center;color:var(--c);margin-bottom:4px}.th small{color:#ffd9a0}
.trow{margin:5px 0;position:relative}.tnodes{display:grid;grid-template-columns:1fr 1fr;gap:5px}.trow.cap .tnodes{grid-template-columns:1fr}
.trow.lock .tnodes{opacity:.4}.tlock{font-size:11px;text-align:center;color:#ffb0a0;margin-bottom:2px}
.tnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;background:#3a2818;border:2px solid #6a5030;border-radius:10px;padding:5px 3px;color:#fff;font:inherit;cursor:pointer;min-height:88px}
.tnode .gi{font-size:22px}.tnode b{font-size:12px;text-align:center;line-height:1.1}.tnode em{font-style:normal;font-size:10px;color:#c8d6e0;text-align:center;line-height:1.1}
.trk{color:#ffd9a0;font-weight:800;font-size:12px}
.tnode.on{border-color:var(--c, #ffd23c);background:#4a3320}.tnode.can{box-shadow:0 0 10px #7dff9b99;border-color:#7dff9b}.tnode.max .trk{color:#7dff9b}

.ilvl{background:#0005;border-radius:6px;padding:0 5px;font-size:11px;color:#ffd9a0;white-space:nowrap}.ilvl.bad{color:#ff8a8a}

/* =====================================================================
   Mises en page selon l'appareil
   - Téléphone (portrait)      : combat en haut, menus en bas
   - Tablette (portrait)       : même disposition, plus large et plus grande
   - PC / tablette / téléphone couché (paysage) : combat à gauche, menus à droite
   ===================================================================== */
#app { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }

/* Tablette en portrait */
@media (min-width: 600px) and (orientation: portrait) {
  #app { max-width: 920px; }
  #hud { padding: 8px 16px; }
  #nav { padding: 6px 10px 9px; gap: 6px; }
  #nav .ic { font-size: 32px; } #nav small { font-size: 13px; }
  #panel { padding: 12px 16px 14px; }
  #panel .sub { font-size: 15px; }
  #stageLabel { font-size: 18px; } #ebar { top: 70px; }
}

/* Paysage : PC, tablette, téléphone couché → combat à gauche, menus à droite */
@media (orientation: landscape) and (min-width: 700px) {
  #app { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 38vw, 600px); grid-template-rows: auto minmax(0, 1fr) auto; border: 0; }
  #hud { grid-column: 1 / -1; }
  #stage3d { grid-column: 1; grid-row: 2 / 4; flex: none; min-height: 0; border-bottom: 0; border-right: 4px solid var(--dark); }
  #panel { grid-column: 2; grid-row: 2; flex: none; min-height: 0; }
  #nav { grid-column: 2; grid-row: 3; }
  #hud { padding: 6px 14px; }
  .mbox { max-width: 560px; }
}
/* grands écrans : panneau de droite plus généreux */
@media (min-width: 1280px) and (orientation: landscape) {
  #app { grid-template-columns: minmax(0, 1fr) clamp(480px, 34vw, 680px); }
  #hud { padding: 8px 22px; }
  #nav .ic { font-size: 28px; } #nav small { font-size: 12px; }
  #panel { padding: 12px 16px; }
  #modal.wide .mbox { max-width: 1120px; }
  #stageLabel { font-size: 18px; } #ebar { top: 68px; max-width: 360px; }
}
/* téléphone couché (peu de hauteur) : tout est compacté */
@media (orientation: landscape) and (max-height: 520px) {
  #hud { padding: 2px 10px; gap: 4px; }
  #hud .badge .lvl { transform: scale(.8); } #hud .res { font-size: 14px; }
  #nav { padding: 3px 5px 5px; } #nav .ic { font-size: 20px; } #nav small { display: none; }
  #nav button.on { transform: translateY(-2px); }
  #panel { padding: 5px 7px; }
  #banner { transform: translateX(-50%) scale(.8); transform-origin: top center; } #ebar { top: 48px; height: 9px; }
  .side { transform: scale(.85); transform-origin: top right; }
  .mbox { max-height: 96dvh; padding: 10px; }
  .hscreen .v3d { height: 70dvh; min-height: 160px; }
}
/* souris : retour visuel au survol et curseur */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, #nav button:hover, .sbtn:hover, .chipb:hover, .tnode:hover, .pet:hover, .icard:hover { filter: brightness(1.12); }
  #nav button, .btn, .sbtn { cursor: pointer; }
}
/* écran tactile : zones de toucher plus généreuses */
@media (pointer: coarse) {
  .btn.small { min-height: 34px; } .chipb { min-height: 34px; }
}

/* missions évolutives */
.mlist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mrow{border:3px solid #6a5030;border-radius:12px;background:#2a1c10;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.mrow.ready{border-color:#7dff9b;box-shadow:0 0 12px #7dff9b66}.mrow.done{opacity:.75;border-color:#4ade80}
.mh{display:flex;align-items:center;gap:8px;font-size:15px}.mh .gi{font-size:22px}.mh b{flex:1}.mh small{color:#ffd9a0;font-weight:800}
.pips{display:flex;gap:4px}.pip{flex:1;height:8px;border-radius:4px;background:#0006;border:1px solid #ffffff22}.pip.on{background:linear-gradient(#ffe066,#ffa03c)}.pip.cur{border-color:#ffe066}
.mact{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}.mrw{color:#9dffb0;font-size:13px;font-weight:700}

/* ===== Inventaire en grille d'icônes + page personnage (équipement autour du héros) ===== */
.itile{position:relative;aspect-ratio:1;min-width:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#3a3226,#241d14);border:2px solid var(--c,#6a5a3a);border-radius:8px;padding:0;color:#fff;cursor:pointer;font:inherit;box-shadow:inset 0 0 10px #0008}
.itile .itx{font-size:min(7vw,30px);line-height:1;filter:drop-shadow(0 2px 2px #000a)}.itile .itx.ghost{opacity:.22;filter:grayscale(1)}
.itile.empty{border-style:dashed;border-color:#5a4c34;box-shadow:inset 0 0 8px #000a}
.itile.sel{outline:3px solid #ffe066;outline-offset:-1px;box-shadow:0 0 12px #ffe066aa,inset 0 0 10px #0008}
.itile .itc{position:absolute;left:3px;top:1px;font-style:normal;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.itile .itp{position:absolute;right:3px;top:1px;font-style:normal;font-size:10px;font-weight:800;color:#9dffb0;text-shadow:0 1px 2px #000}
.itile .itl{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:800;color:#ffd9a0;text-shadow:0 1px 2px #000}.itile .itl.bad{color:#ff7a7a}
.itile .itk{position:absolute;left:3px;bottom:1px;font-style:normal;font-size:10px}
.itile.rune{border-radius:50%}
.itabs{display:flex;gap:4px;justify-content:center;margin-bottom:6px;background:#1a140c;border-radius:10px;padding:4px;border:2px solid #0008}
.itab{flex:1;max-width:84px;background:linear-gradient(#4a4030,#2c241a);border:2px solid #0009;border-radius:8px;color:#d8c8a8;font:inherit;font-size:20px;padding:4px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.1}
.itab small{font-size:9px}.itab.on{background:linear-gradient(#9ad23c,#5a8f1c);color:#fff;border-color:#c8f070;box-shadow:0 0 8px #9ad23c88}
.invbar{display:flex;gap:6px;margin-bottom:5px}.invsel{flex:1;min-width:0;background:#2a2218;color:#f1e3c8;border:2px solid #5a4c34;border-radius:8px;padding:5px 6px;font:inherit;font-size:13px}
.invq{width:100%;box-sizing:border-box;background:#1a140c;color:#f1e3c8;border:2px solid #5a4c34;border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;margin-bottom:6px}
.invgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-height:44dvh;min-height:90px;overflow-y:auto;padding:4px;background:#17110a;border-radius:10px;border:2px solid #0009;align-content:start}
@media (max-width:420px){.invgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.hs-right .invgrid{grid-template-columns:repeat(6,1fr);max-height:52dvh}}
.invempty{grid-column:1/-1;text-align:center;padding:14px}
.invcap{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px}.invcap .barw{flex:1;height:10px}.invcap b{color:#ffe066}
.invdesc{background:#17110a;border:2px solid #0009;border-radius:10px;padding:8px 10px;margin-top:8px;min-height:64px;font-size:14px}
.invdesc .dh{font-size:16px;margin-bottom:2px}.invdesc .dh small{color:#c8b894;font-size:12px}.invdesc .dmain{font-size:14px;margin:3px 0}
.dsubs{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:4px 0}.dsub{font-size:12px;background:#0005;border-radius:6px;padding:2px 6px;color:#8b7a66}.dsub.on{color:#8fe8ff;background:#174a5a}
.dbtns{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.dbtns .btn{flex:1 1 auto}
.invtop{display:flex;align-items:center;justify-content:space-between;gap:6px}.invtop .chiprow{margin:0}
.eqrow{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:6px 0 8px;padding:5px;background:#17110a;border-radius:10px;border:2px solid #0009}
.eqrow .itile .itx{font-size:min(4.4vw,19px)}.eqrow .itile .tl,.eqrow .itile .itp{font-size:8px}
.invtools{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.invtools .btn{flex:1 1 auto}
/* page personnage : héros au centre, équipement autour */
.doll{display:grid;grid-template-columns:var(--tw,58px) minmax(0,1fr) var(--tw,58px);gap:6px;align-items:stretch;margin:4px 0}
.dcol{display:flex;flex-direction:column;justify-content:space-between;gap:6px}.dcol .itile{width:100%}
.dmid{min-height:calc(var(--tw,58px) * 3 + 12px);border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#7a4f9a,#2a1740 75%);border:2px solid #0009}
.doll .v3d{height:100%;min-height:calc(var(--tw,58px) * 3 + 12px);margin:0;border-radius:0;background:none}
.drow{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
@media (min-width:760px){.doll{--tw:66px}.doll .dmid,.doll .v3d{min-height:320px}}
.hs-right .itabs .itab{max-width:none}
.hscreen .hs-right{min-width:0}

.invauto{width:100%;margin-top:8px}

.invauto2{display:flex;gap:6px;margin-top:8px}.invauto2 .btn{flex:1}

#nav small{letter-spacing:-.2px}@media (max-width:430px){#nav small{font-size:9px}}

/* écran de lancement : illustration plein écran + barre de chargement en bas */
#loading { background: #0b1330 url('assets/ui/splash.jpg') center / cover no-repeat; justify-content: flex-end; padding-bottom: max(5vh, env(safe-area-inset-bottom)); }
#loading .lbottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 22px 12px; border-radius: 16px; background: linear-gradient(#0000, #000a); width: min(100%, 520px); }
#loading .ltxt { color: #fff; font-weight: 700; letter-spacing: 1px; text-shadow: 0 2px 4px #000; }
#loading #loadbar { width: min(78vw, 420px); }
/* portrait (téléphone) : l'image entière reste visible, le fond est le même visuel flouté */
#loading::before { content: ''; position: absolute; inset: -20px; background: url('assets/ui/splash.jpg') center / cover; filter: blur(18px) brightness(.7); z-index: -1; display: none; }
#loading::after { content: ''; position: absolute; inset: 0; background: url('assets/ui/splash.jpg') center 42% / 100% auto no-repeat; z-index: -1; display: none; }
@media (orientation: portrait) { #loading { background: #0b1330; isolation: isolate; } #loading::before, #loading::after { display: block; } }

/* caractéristiques */
.arow{border:2px solid var(--c);border-radius:12px;background:#2a1c10;padding:7px 9px;margin:7px 0}
.ah{display:flex;align-items:center;gap:8px}.ah .gi{font-size:24px}.an{flex:1;display:flex;flex-direction:column;line-height:1.15}.an small{color:#c8b894;font-size:11px}.av{font-size:22px;color:var(--c)}
.ab{display:flex;gap:5px;margin-top:6px}.ab .btn{flex:1;padding:4px 6px}

/* icônes de héros (illustrations) */
.hico{height:1.5em;width:auto;vertical-align:-.3em;border-radius:6px;pointer-events:none;image-rendering:auto}
.pe.huge .hico,.ci .hico{height:120px;border-radius:14px;filter:drop-shadow(0 4px 6px #000a)}
.t2 .hico{height:46px;display:block;margin:0 auto 2px}.t2.out .hico{filter:grayscale(.85) brightness(.7)}
.tport{width:auto;height:auto;background:none;border:0;border-radius:0;display:block}.tport .hico{height:56px;display:block;margin:0 auto;border:0;border-radius:0}
.vtabs .btn .hico{height:34px;display:block}.vtabs .btn.small{padding:3px 5px}
.chipb .hico{height:22px}
.irow .hico,.sub .hico{height:1.4em}
.h .hico{height:1.6em}

/* icônes illustrées d'équipement */
.eimg{height:1.5em;width:1.5em;object-fit:cover;border-radius:6px;vertical-align:-.35em;pointer-events:none}
.itile .itx .eimg{width:100%;height:100%;border-radius:6px;display:block}
.itile .itx{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.itile{overflow:hidden}.itile .itx.ghost{opacity:.55}.itile .itx.ghost .eimg{filter:grayscale(.6) brightness(.8)}
.itile{background:#17110a}
.dh .eimg{height:1.8em;width:1.8em}.h .eimg{height:1.7em;width:1.7em}

.itile.rune .itx .eimg,.rimg{object-fit:contain;background:#17110a}.itile.rune{border-radius:14px}

.timg{height:34px;width:34px;object-fit:contain;display:block;pointer-events:none}.itabs .itab:has(.timg){padding:2px}

#hstabs .itab .timg{height:30px;width:30px}#hstabs .itab:not(.on) .timg{filter:brightness(.78) saturate(.9)}#hstabs .itab.on .timg{filter:drop-shadow(0 0 6px #fff9)}

#nav .ic{display:flex;align-items:center;justify-content:center;height:40px}#nav .navimg{height:40px;width:40px;object-fit:contain;pointer-events:none;filter:brightness(.82) saturate(.9)}#nav button.on .navimg{filter:drop-shadow(0 0 7px #ffd23c) brightness(1.08)}@media (max-width:430px){#nav .ic,#nav .navimg{height:34px;width:34px}}

.tcard{cursor:pointer}.tcard.sel{outline:3px solid #ffe066;outline-offset:1px;filter:brightness(1.12)}.tcard:hover{filter:brightness(1.1)}

/* inventaire : icônes plus petites (plus d'objets visibles d'un coup) */
.invgrid, .hs-right .invgrid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important; gap: 3px; }
.invgrid .itile { border-radius: 7px; border-width: 2px; }
.invgrid .itile .itl { font-size: 9px; right: 2px; bottom: 0; }
.invgrid .itile .itc { font-size: 10px; left: 2px; top: 0; }
.invgrid .itile .itp { font-size: 9px; right: 2px; top: 0; }
@media (max-width: 430px) { .invgrid, .hs-right .invgrid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; } }

.dico{height:1.9em;width:1.9em;border-radius:10px;object-fit:cover;vertical-align:-.5em;pointer-events:none}.pe.huge .dico{height:120px;width:120px;border-radius:16px}#stageLabel em .dico{height:26px;width:26px;vertical-align:-8px}.card .h .dico{margin-right:4px}

.keyrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:6px 0}.keyrow span{display:flex;align-items:center;gap:4px;background:#17110a;border-radius:10px;padding:2px 8px}.dico.kimg{height:30px;width:30px;border-radius:0;object-fit:contain;vertical-align:middle}.itile .itx .dico.kimg{width:100%;height:100%}.btn .kimg{height:22px;width:22px}

/* ===== Boutons premium : bordures métalliques en relief, reflets, enfoncement au clic ===== */
.btn{--bt1:#2f6fd6;--bt2:#12306e;--bd1:#f4f8ff;--bd2:#8a9bb8;--bd3:#5a6a88;
  border:3px solid transparent;border-radius:14px;color:#fff;
  background:linear-gradient(180deg,#ffffff38 0,#ffffff0d 46%,#0000 50%) padding-box,linear-gradient(180deg,var(--bt1),var(--bt2)) padding-box,linear-gradient(160deg,var(--bd1),var(--bd2) 45%,var(--bd3) 55%,var(--bd1)) border-box;
  text-shadow:0 2px 2px rgba(0,0,0,.6);
  box-shadow:0 4px 0 #0a0f1c,0 6px 10px #0008,inset 0 0 0 1px #ffffff40,inset 0 -6px 10px #0006,inset 0 0 10px #4da3ff55;
  transition:filter .15s,transform .08s,box-shadow .15s}
.btn.pri,.btn.on,.btn.gold{--bt1:#ffd23c;--bt2:#c77a08;--bd1:#fff3b0;--bd2:#d9a21c;--bd3:#8a5a0a;color:#fff;
  box-shadow:0 4px 0 #3b2406,0 0 14px #ffb82e66,inset 0 0 0 1px #fff6,inset 0 -6px 10px #7a3d0066,inset 0 0 12px #fff3a055}
.btn[data-act="enh4"],.btn.close,.btn.bronze{--bt1:#b8662a;--bt2:#5e2c0e;--bd1:#ffd9a8;--bd2:#c98a4a;--bd3:#7a4a1f;
  box-shadow:0 4px 0 #2a1305,0 6px 10px #0008,inset 0 0 0 1px #ffffff40,inset 0 -6px 10px #0006,inset 0 0 10px #ff9a4a44}
.btn[data-act="info"],.btn.info{--bt1:#4fd0ff;--bt2:#1a64c0;--bd1:#e8fbff;--bd2:#7fb8e0;--bd3:#46739c}
.btn.small{border-width:2px;border-radius:11px;box-shadow:0 3px 0 #0a0f1c,0 4px 7px #0008,inset 0 0 0 1px #ffffff40,inset 0 -4px 8px #0006}
.btn.pri.small,.btn.gold.small{box-shadow:0 3px 0 #3b2406,0 0 10px #ffb82e55,inset 0 0 0 1px #fff6,inset 0 -4px 8px #7a3d0066}
.btn:hover{filter:brightness(1.18) saturate(1.1);box-shadow:0 4px 0 #0a0f1c,0 0 16px #8fd0ff99,inset 0 0 0 1px #fff8,inset 0 -6px 10px #0004,inset 0 0 14px #bfe6ff88}
.btn.pri:hover,.btn.on:hover,.btn.gold:hover{box-shadow:0 4px 0 #3b2406,0 0 20px #ffd23caa,inset 0 0 0 1px #fff9,inset 0 0 16px #fff6b0aa}
.btn:active{transform:translateY(3px);filter:brightness(.92);box-shadow:0 1px 0 #0a0f1c,inset 0 3px 8px #0009,inset 0 0 0 1px #fff3}
.btn.small:active{transform:translateY(2px)}
.btn.dis{filter:grayscale(.85) brightness(.7)}.btn.dis:hover{filter:grayscale(.85) brightness(.7);box-shadow:none}
.btn.dis:active{transform:none}
.badge2 .kimg,.sub .kimg{height:18px;width:18px}
.dmg img{height:1.1em;width:1.1em;object-fit:contain;vertical-align:-0.2em}
.jico{height:1.5em;width:1.5em;vertical-align:-0.35em;object-fit:contain}.btn .jico{height:1.3em;width:1.3em}.toast .jico{height:1.4em;width:1.4em}
summary .jico{height:2.3em;width:2.3em;vertical-align:-0.8em;margin-right:4px}.matc .eimg{height:1.7em;width:1.7em}

/* ===== En-tête du combat (nouvelle direction : titre du monde, boutons en relief, barre de progression) ===== */
.cmb{border:3px solid transparent;border-radius:16px;padding:8px 8px 7px;margin-bottom:8px;
  background:linear-gradient(180deg,#4a2c17,#26150a) padding-box,linear-gradient(160deg,#ffeaa6,#d49a30 42%,#7c5316 58%,#ffeaa6) border-box;
  box-shadow:0 3px 0 #1a0f06,0 6px 12px #0008,inset 0 0 18px #0007}
.cmb-head{display:flex;align-items:center;gap:10px;padding-bottom:7px;border-bottom:1px solid #ffffff18}
.cmb-wicon{flex:none;width:58px;height:58px;display:grid;place-items:center}.cmb-wicon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px #6cd0ff88)}
.cmb-wicon .we{font-size:38px;filter:drop-shadow(0 2px 3px #000a)}
.cmb-title{flex:1;min-width:0;padding-left:10px;border-left:1px solid #ffffff22}
.cmb-name{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(20px,3.4vw,30px);line-height:1.1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmb-name span{background:linear-gradient(180deg,#fff6d0,#f0c25a 55%,#b9852a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #000a)}
.cmb-name i{font-style:normal;color:#7fd8ff;font-size:.8em;text-shadow:0 0 8px #7fd8ff}
.cmb-sub{font-size:13px;color:#f3e3c3;margin-top:2px;text-shadow:0 1px 0 #000}
.cmb-gps{flex:none;display:flex;align-items:center;gap:6px;padding:4px 14px 4px 8px;border-radius:999px;border:2px solid #c8902c;background:linear-gradient(#2a1a0d,#160c05);box-shadow:inset 0 0 8px #000a,0 0 8px #ffb82e33}
.cmb-gps img{width:32px;height:32px;object-fit:contain}.cmb-gps b{font-size:19px;color:#fff3d0;text-shadow:0 2px 0 #000}
.cmb{container-type:inline-size}.cmb-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}@container (min-width:700px){.cmb-btns{grid-template-columns:1.15fr 1.25fr 1fr 1.1fr 1fr 1fr}}
.cbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-height:54px;padding:4px 6px;border:3px solid transparent;border-radius:13px;color:#fff;font:inherit;font-weight:700;font-size:13px;line-height:1.05;cursor:pointer;
  --t1:#2f6fd6;--t2:#0f2c6a;--b1:#ffe9a0;--b2:#d49a30;--b3:#7c5316;
  background:linear-gradient(180deg,#ffffff30 0,#ffffff08 46%,#0000 50%) padding-box,linear-gradient(180deg,var(--t1),var(--t2)) padding-box,linear-gradient(160deg,var(--b1),var(--b2) 45%,var(--b3) 56%,var(--b1)) border-box;
  box-shadow:0 3px 0 #0a0f1c,0 5px 8px #0008,inset 0 -6px 10px #0006,inset 0 0 12px #4da3ff55;text-shadow:0 2px 2px #000a;transition:filter .15s,transform .08s}
.cbtn img{height:34px;width:34px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 2px #0008)}.cbtn span{text-align:left;min-width:0}
.cbtn.gold{--t1:#f0a030;--t2:#a85a08;flex-direction:column;gap:0;box-shadow:0 3px 0 #3b2406,0 0 14px #ffb82e77,inset 0 -6px 10px #7a3d0066,inset 0 0 14px #fff3a066}
.cbtn.gold img.big{height:38px;width:auto;max-width:100%}.cbtn.gold span{text-align:center;font-size:14px}
.cbtn.green{--t1:#34b840;--t2:#0e6a22;box-shadow:0 3px 0 #06200c,0 5px 8px #0008,inset 0 -6px 10px #0006,inset 0 0 12px #6aff8a44}
.cbtn:hover{filter:brightness(1.18) saturate(1.1)}.cbtn:active{transform:translateY(3px);box-shadow:0 0 0 #000,inset 0 3px 8px #0009}
.cbtn .badge2{position:absolute;top:-6px;right:-4px}
.cmb-prog{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:5px 8px;border:1px solid #c8902c88;border-radius:10px;background:#00000040;box-shadow:inset 0 0 8px #000a}
.cmb-prog span{display:flex;align-items:center;gap:5px;font-size:13px;color:#fff;font-weight:600;white-space:nowrap}.cmb-prog span b{color:var(--c)}.cmb-prog img{width:26px;height:26px;object-fit:contain}
@media (max-width:640px){.cmb-head{flex-wrap:wrap}.cmb-gps{margin-left:auto}.cmb-prog{gap:4px 10px}.cmb-prog span{font-size:12px}}
.sec>summary{justify-content:flex-start}.sec>summary::after{margin-left:auto}.sec>summary small{color:#ffd23c;font-size:12px}summary .jico{vertical-align:0;margin-right:0}
.matc{justify-content:flex-start;align-items:center;text-align:left}.matc b{margin-left:auto}.matc .eimg{flex:none}
.sec .sec{margin:6px 0 0;background:#00000026}.sec[data-sec=jobs_gather]>summary,.sec[data-sec=jobs_craft]>summary{font-size:17px}
.pwrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0}.pwcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:6px 4px;border:2px solid #6a5030;border-radius:10px;background:#2a1a0e;font-size:12px;text-align:center;color:#fff;font:inherit}.pwcell .pe{font-size:26px}.pwcell b{font-size:12px}.pwcell.lock{opacity:.55}.pwcell.add{border-style:dashed;border-color:#ffd23c;color:#ffd23c;font-size:24px;cursor:pointer}.pwcell.add small{font-size:11px}.pwcell .btn.small{margin-top:2px}
.toast.jobup{display:flex;align-items:center;gap:10px;padding:8px 16px;border:3px solid transparent;border-radius:14px;font-size:15px;line-height:1.25;text-align:left;background:linear-gradient(#5a3a1c,#2d1a0b) padding-box,linear-gradient(160deg,#fff0b0,#d9a21c 45%,#8a5a0a 55%,#fff0b0) border-box;box-shadow:0 0 18px #ffb82e88,0 4px 0 #1a0f06;animation:jobup .5s ease-out}.toast.jobup .jup-i{display:flex}.toast.jobup .jico{height:2.6em;width:2.6em;filter:drop-shadow(0 0 6px #ffd23c)}.toast.jobup b{color:#ffd23c}@keyframes jobup{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ===== Arbre de talents : présentation RPG (branches reliées, maîtrise, paliers, presets) ===== */
#modal.wide .mbox:has(.tal-top){background:radial-gradient(ellipse at 50% 0,#1d2e5a 0,#120b24 45%,#0a0714 100%);border-color:#c8902c}
.tal-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.tal-title{display:flex;align-items:center;gap:10px;min-width:0}.tal-emblem{width:64px;height:64px;flex:none;filter:drop-shadow(0 0 10px #4da3ffaa)}
.tal-h{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(22px,3.4vw,32px);line-height:1.05;background:linear-gradient(180deg,#fff6d0,#f0c25a 55%,#b9852a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000a)}
.tal-sub{font-size:12px;color:#d8cfa8;max-width:340px}
.tal-pts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 12px;border:2px solid #c8902c;border-radius:14px;background:#00000066;font-size:14px}.tal-pts .tp{color:#ffe066;font-size:22px}
.tal-tabs{margin:8px 0}.tal-tabs .chipb.on{background:linear-gradient(#ffd23c,#c77a08);color:#2a1604}
.tal-mast{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:2px solid #c8902c77;border-radius:16px;background:#0005;padding:8px 12px;margin:6px 0}
.mbadge{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:700;color:#fff;background:radial-gradient(circle at 50% 35%,#a56bff,#3a1a7a);border:3px solid #ffd23c;box-shadow:0 0 14px #b866ffaa}
.mbar{flex:1;min-width:180px}.mbar b{display:block;color:#ffe9a0;font-size:14px}.mbar .barw{margin:3px 0}.mbar .barw i{background:linear-gradient(90deg,#7a3dff,#c084ff)}.mbar small{color:#cbb8ff;font-size:11px}
.mglob{flex:none;padding:6px 12px;border:2px solid #c8902c;border-radius:12px;background:#1a0f08;text-align:center}.mglob small{display:block;color:#d8cfa8;font-size:11px}.mglob b{color:#7dff9b;font-size:13px}
/* branches */
.tbranch{border:3px solid var(--c);border-radius:20px;padding:8px 6px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,#0c0814),#0c0814 70%);box-shadow:0 0 16px color-mix(in srgb,var(--c) 45%,transparent),inset 0 0 22px color-mix(in srgb,var(--c) 18%,transparent)}
.th{display:flex;align-items:center;justify-content:center;gap:8px;font-family:Georgia,serif;font-size:19px;color:#fff;text-shadow:0 2px 0 #000;margin-bottom:8px;flex-wrap:wrap}.th img{width:34px;height:34px;object-fit:contain}.th small{width:100%;text-align:center;color:var(--c);font-family:inherit;font-weight:700}
.trow{position:relative;margin:12px 0 0}
.trow::before{content:'';position:absolute;left:50%;top:-12px;width:3px;height:12px;margin-left:-1.5px;background:var(--c);box-shadow:0 0 6px var(--c);opacity:.85}
.trow:first-of-type::before{display:none}.trow.lock::before{opacity:.25;box-shadow:none}
.tnodes{position:relative}.tnodes::before{content:'';position:absolute;left:25%;right:25%;top:50%;height:3px;margin-top:-1.5px;background:var(--c);box-shadow:0 0 6px var(--c);opacity:.7;z-index:0}.trow.cap .tnodes::before{display:none}.trow.lock .tnodes::before{opacity:.2;box-shadow:none}
.tnode{position:relative;z-index:1;background:linear-gradient(#2a2038,#150f22);border:2px solid color-mix(in srgb,var(--c) 55%,#000);border-radius:14px}
.tnode.on{border-color:var(--c);background:linear-gradient(#34284a,#1a1230);box-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent)}
.tnode.can{border-color:#7dff9b;box-shadow:0 0 12px #7dff9baa;animation:tcan 1.4s ease-in-out infinite}@keyframes tcan{50%{box-shadow:0 0 4px #7dff9b66}}
.tnode .trk{color:#cbd6e0;font-weight:700}.tnode.max{border-color:#ffd23c}.tnode.max .trk{color:#ffd23c}
.trow.ult{margin-top:16px}.trow.ult::before{height:16px;top:-16px}
.tnode.ult{min-height:100px;border-radius:50% 50% 16px 16px / 36% 36% 16px 16px;border-width:3px;border-color:#ffd23c;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--c) 40%,#1a1028),#120c1e 75%);padding-top:10px}
.tnode.ult .gi{font-size:30px;filter:drop-shadow(0 0 8px var(--c))}.trow.ult.lock .tnode.ult{filter:grayscale(.6)}
/* paliers */
.tal-pal{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:2px solid #c8902c77;border-radius:16px;background:#0005;padding:8px 12px;margin-top:8px}
.pal-h{display:flex;flex-direction:column;min-width:120px}.pal-h b{color:#ffe9a0}.pal-h small{color:#d8cfa8}
.pal-track{flex:1;min-width:240px;display:flex;justify-content:space-between;gap:4px;position:relative}
.pal-track::before{content:'';position:absolute;left:12px;right:12px;top:16px;height:4px;background:#3a2a50;border-radius:2px}
.pal{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px}.pal i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;border:3px solid #6a5080;background:#1a1228}
.pal.done i{border-color:#4ade80;background:#14532d;color:#d1fae5}.pal.next i{border-color:#ffd23c;background:#78350f;box-shadow:0 0 12px #ffd23caa}.pal small{font-size:11px;color:#d8cfa8}
.pal-next{flex:none;padding:6px 12px;border:2px solid #c8902c;border-radius:12px;background:#1a0f08;text-align:center}.pal-next small{display:block;color:#d8cfa8;font-size:11px}.pal-next b{color:#7dff9b;font-size:13px}
.tal-bi{width:26px;height:26px;object-fit:contain;vertical-align:middle}
.tal-pre .btns{margin-top:4px}
@media (min-width:760px){.tree{gap:12px}}

.trow.ult .tnodes::before{display:none}.th small{font-family:'Fredoka',system-ui,sans-serif;font-variant-numeric:lining-nums}.th span{font-variant-numeric:lining-nums}

/* croix de fermeture en haut à droite des fenêtres */
.mbox .mx{position:sticky;top:0;float:right;z-index:20;width:36px;height:36px;margin:-4px -4px 0 6px;padding:0;border-radius:50%;border:3px solid #ffe9a0;background:linear-gradient(#e0483c,#8a1a14);color:#fff;font:inherit;font-weight:700;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 #3a0a06,0 0 10px #0009;text-shadow:0 2px 0 #0008}
.mbox .mx:hover{filter:brightness(1.2)}.mbox .mx:active{transform:translateY(2px);box-shadow:0 1px 0 #3a0a06}

/* ===== Grand Marché ===== */
.shopbtn{flex:none;width:44px;height:44px;padding:0;border:3px solid transparent;border-radius:12px;cursor:pointer;background:linear-gradient(#3a2414,#1f1209) padding-box,linear-gradient(160deg,#ffeaa6,#d49a30 45%,#7c5316 55%,#ffeaa6) border-box;box-shadow:0 3px 0 #1a0f06,0 0 10px #ffb82e55;display:grid;place-items:center;margin-left:6px}
.shopbtn img{width:34px;height:34px;object-fit:contain}.shopbtn:hover{filter:brightness(1.2)}.shopbtn:active{transform:translateY(2px)}
.shopc{height:1.25em;width:1.25em;object-fit:contain;vertical-align:-0.3em}
#modal.wide .mbox:has(.shop-top){background:radial-gradient(ellipse at 50% 0,#4a2c17 0,#26150a 60%,#150b05 100%);border-color:#c8902c}
.shop-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.shop-h{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(22px,3.4vw,30px);background:linear-gradient(180deg,#fff6d0,#f0c25a 55%,#b9852a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000a)}
.shop-wallet{display:flex;gap:10px;flex-wrap:wrap}.shop-wallet span{display:flex;align-items:center;gap:6px;padding:4px 14px 4px 8px;border:2px solid #c8902c;border-radius:999px;background:linear-gradient(#2a1a0d,#160c05);box-shadow:inset 0 0 8px #000a}.shop-wallet b{font-size:17px;color:#fff3d0}
.shoptabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0}
.shoptab{display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 2px 5px;border:3px solid transparent;border-radius:14px;color:#fff;font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-shadow:0 2px 0 #000;
  background:linear-gradient(#3b2414,#1e1209) padding-box,linear-gradient(160deg,#ffeaa6,#d49a30 45%,#7c5316 55%,#ffeaa6) border-box;box-shadow:0 3px 0 #1a0f06}
.shoptab img{width:clamp(44px,9vw,64px);height:clamp(44px,9vw,64px);object-fit:contain}.shoptab.on{background:linear-gradient(#a8610c,#5a2f05) padding-box,linear-gradient(160deg,#fff3b0,#ffd23c 45%,#a86a0a 55%,#fff3b0) border-box;box-shadow:0 3px 0 #3b2406,0 0 14px #ffb82e99}
.shoptab:hover{filter:brightness(1.15)}.shoptab:active{transform:translateY(2px)}
.shoplist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.shoprow{display:flex;align-items:center;gap:10px;padding:6px 10px;border:2px solid #6a5030;border-radius:12px;background:#2a1a0e}
.shoprow .si{flex:none;width:42px;height:42px;display:grid;place-items:center;font-size:30px}.shoprow .si img{width:100%;height:100%;object-fit:contain}
.shoprow .sd{flex:1;min-width:0;display:flex;flex-direction:column}.shoprow .sd b{font-size:14px}.shoprow .sd small{color:#d8c8a8;font-size:12px;line-height:1.2}.shoprow .sd .lim{color:#ffb86a}
.shoprow .sb{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.shoprow .sb .btn{white-space:nowrap}
@media (max-width:520px){.shoptabs{grid-template-columns:repeat(4,1fr)}.shoprow{flex-wrap:wrap}.shoprow .sb{width:100%;justify-content:flex-start}}


/* Grand Marché : offres, favoris, historique, quantité */
.shop-special{margin:4px 0}.shop-special .chipb{font-size:13px}.shop-special .chipb.on{background:linear-gradient(#ffd23c,#c77a08);color:#2a1604}
.qtyrow{align-items:center}.qtyrow span{font-size:13px;color:#d8c8a8}
.shoprow .fav{flex:none;width:30px;height:30px;border:0;background:transparent;color:#8a7a60;font-size:22px;line-height:1;cursor:pointer;padding:0}.shoprow .fav.on{color:#ffd23c;text-shadow:0 0 8px #ffd23c}.shoprow .fav:hover{color:#ffe066}
.tagoff{font-style:normal;font-size:11px;background:#e0483c;color:#fff;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.shoprow.out{opacity:.55}.shoprow .btn s{opacity:.6;font-weight:400;margin-right:2px}


/* ===== 15 niveaux de difficulté ===== */
.dif{height:100%;width:100%;object-fit:contain;vertical-align:middle}
.dh2{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:20px;text-align:center;margin:4px 0;background:linear-gradient(180deg,#fff6d0,#f0c25a 55%,#b9852a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000a)}
.dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0}
@media (min-width:640px){.dgrid{grid-template-columns:repeat(3,1fr)}}@media (min-width:900px){.dgrid{grid-template-columns:repeat(5,1fr)}}
.dcard{position:relative;display:flex;align-items:center;gap:6px;padding:6px 8px;border:3px solid transparent;border-radius:14px;color:#fff;font:inherit;text-align:left;cursor:pointer;min-height:76px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 55%,#000),color-mix(in srgb,var(--c) 18%,#0a0710)) padding-box,linear-gradient(160deg,#ffeaa6,color-mix(in srgb,var(--c) 70%,#fff) 45%,#7c5316 55%,#ffeaa6) border-box;
  box-shadow:0 3px 0 #0008,inset 0 0 14px color-mix(in srgb,var(--c) 30%,transparent)}
.dcard .di{flex:none;width:46px;height:46px;filter:drop-shadow(0 2px 3px #000a)}.dcard .dt2{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.dcard b{font-family:Georgia,serif;font-size:15px;text-shadow:0 2px 0 #000}.dcard small{font-size:11px;color:#f0e6d0;margin-top:2px}.dcard .stars{font-style:normal;color:#ffd23c;font-size:12px;letter-spacing:1px;margin-top:2px;text-shadow:0 0 4px #ffb82e}.dcard em{font-style:normal;font-size:11px;color:#fff;opacity:.85}
.dcard.on{outline:3px solid #ffe066;box-shadow:0 0 16px color-mix(in srgb,var(--c) 80%,transparent),0 3px 0 #0008}.dcard.lock{filter:grayscale(.8) brightness(.55);cursor:default}.dcard:not(.lock):hover{filter:brightness(1.15)}
.cmb-prog.dcur{justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;border-color:var(--c)}
.dcur-i{flex:none;width:34px;height:34px;display:flex}.dcur-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px}.dcur-t b{color:var(--c)}.dcur-t .stars{font-style:normal;color:#ffd23c;font-size:12px}.dcur-t small{color:#d8cfa8}
.dpips{display:flex;gap:3px;flex-wrap:wrap}.dpips i{width:12px;height:12px;border-radius:50%;border:2px solid #6a5030;background:#1a1208}.dpips i.open{border-color:var(--c)}.dpips i.done{background:var(--c);border-color:var(--c)}.dpips i.cur{background:var(--c);border-color:#fff;box-shadow:0 0 8px var(--c)}


/* ===== Prestige des héros (P1 à P10) ===== */
.pbadge{width:38px;height:38px;object-fit:contain;vertical-align:middle}.pbadge.big{width:64px;height:64px;filter:drop-shadow(0 0 8px #b866ffaa)}.pbadge.mini{width:20px;height:20px;vertical-align:-5px}
.tabx{font-size:26px;line-height:1.1;display:block;filter:drop-shadow(0 0 4px #ffd23c)}
.pbox{border:2px solid #c8902c77;border-radius:14px;background:#0004;padding:8px 10px;margin:6px 0}
.pfromto{display:flex;align-items:center;justify-content:center;gap:12px}.pfromto i{font-style:normal;font-size:30px;color:#ffd23c}.pcap{text-align:center;font-size:13px;margin:2px 0 4px}
.prow{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:8px;background:#0003;margin:3px 0;font-size:13px}.prow>span:first-child{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.prow>span:nth-child(2){flex:1}.prow i{font-style:normal;color:#ff6a5a;font-weight:700}.prow.ok i{color:#7dff9b}
.pult{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid #6a5030;border-radius:12px;background:#2a1a0e;margin:6px 0}.pult .gi{font-size:30px}.pult small{display:block;color:#d8c8a8;font-size:12px}.pult.on{border-color:#ffd23c;box-shadow:0 0 12px #ffd23c77}
.ptrack{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:4px}.ptr{display:flex;flex-direction:column;align-items:center;padding:3px 0;border:2px solid #3a2a50;border-radius:10px;background:#150f22}.ptr .pbadge{width:36px;height:36px;opacity:.55;filter:grayscale(.6)}.ptr small{font-size:11px;color:#d8cfa8}
.ptr.done .pbadge,.ptr.cur .pbadge{opacity:1;filter:none}.ptr.done{border-color:color-mix(in srgb,var(--c) 60%,#000)}.ptr.cur{border-color:var(--c);box-shadow:0 0 12px var(--c)}
.pmats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pmats span{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border:2px solid #6a5030;border-radius:10px;background:#2a1a0e;font-size:11px;color:#d8c8a8}.pmats .eimg{height:30px;width:30px}.pmats b{color:#fff;font-size:14px}
.stile.ult{border-color:#ffd23c;box-shadow:0 0 12px #ffd23c88;grid-column:1/-1}
.doll[data-p]:not([data-p='0']){border:3px solid var(--pc);border-radius:18px;box-shadow:0 0 18px color-mix(in srgb,var(--pc) 70%,transparent),inset 0 0 24px color-mix(in srgb,var(--pc) 28%,transparent)}


/* ===== Fenêtre Nouveautés ===== */
#modal.wide .mbox:has(.upd-h){max-width:760px}
.upd-h{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:28px;text-align:center;background:linear-gradient(180deg,#fff6d0,#f0c25a 55%,#b9852a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000a)}
.upd-sub{text-align:center;color:#d8c8a8;font-size:13px;margin:4px 0 8px}
.upd-entry{border:2px solid #6a5030;border-radius:14px;background:#2a1a0e;padding:8px 12px;margin:8px 0}.upd-entry.new{border-color:#ffd23c;box-shadow:0 0 14px #ffd23c55}
.upd-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}.upd-v{background:linear-gradient(#ffd23c,#c77a08);color:#2a1604;font-weight:700;border-radius:8px;padding:1px 8px;font-size:13px}.upd-top b{font-size:16px}.upd-top small{margin-left:auto;color:#d8c8a8}
.upd-entry ul{margin:4px 0 0;padding-left:18px}.upd-entry li{font-size:13px;line-height:1.35;margin:3px 0}

.pults{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px}.ptr .pc{display:flex;align-items:center;justify-content:center;gap:2px;color:#ffe9a0}.ptr .pc .eimg{height:14px;width:14px}.pults .pult{margin:0}

/* ===== Classement ===== */
#btnRank{font-size:24px;margin-left:6px}
.rank-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.rank-steps{margin:6px 0;padding-left:20px;font-size:13px;line-height:1.4}.rank-rules{background:#0008;border:1px solid #6a5030;border-radius:10px;padding:8px;font-size:11px;line-height:1.35;overflow:auto;max-height:240px;white-space:pre;color:#cfe8ff}
.rank-form{display:flex;gap:8px;margin:10px 0}.rank-form input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:3px solid #c8902c;background:#1a1208;color:#fff;font:inherit;font-size:16px}
.rank-me{padding:6px 12px;margin:6px 0;border:2px solid #ffd23c;border-radius:12px;background:#2a1a0e;text-align:center;font-size:14px}
.rank-list{display:flex;flex-direction:column;gap:4px;margin:6px 0}.rank-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border:2px solid #6a5030;border-radius:10px;background:#2a1a0e}
.rank-row .rk{width:42px;font-weight:700;color:#ffe9a0}.rank-row .rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.rank-row .rv{color:#d8c8a8;font-size:13px;white-space:nowrap}.rank-row .rv b{color:#fff}
.rank-row.me{border-color:#7dff9b;background:#1d3a24}.rank-row.top1{border-color:#ffd23c}.rank-row.top2{border-color:#c7d2e0}.rank-row.top3{border-color:#cd7f32}


/* ===== Page d'accueil de connexion ===== */
#login{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(6,4,14,.72);backdrop-filter:blur(3px)}
#login.open{display:flex}
.lgbox{width:min(100%,400px);padding:22px 20px 18px;border:3px solid transparent;border-radius:20px;text-align:center;color:#fff;
  background:linear-gradient(180deg,#4a2c17f2,#1f1209f2) padding-box,linear-gradient(160deg,#ffeaa6,#d49a30 45%,#7c5316 55%,#ffeaa6) border-box;box-shadow:0 0 30px #000b,0 0 18px #ffb82e44}
.lglogo{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:44px;line-height:1.05;background:linear-gradient(180deg,#fff6d0,#f0c25a 55%,#b9852a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000a)}
.lgsub{color:#d8c8a8;font-size:14px;margin:2px 0 14px;letter-spacing:1px}
.lgtabs{display:flex;gap:6px;margin-bottom:12px}.lgtabs button{flex:1;padding:8px 4px;border-radius:12px;border:2px solid #6a5030;background:#2a1a0e;color:#d8c8a8;font:inherit;font-weight:700;cursor:pointer}.lgtabs button.on{border-color:#ffd23c;background:linear-gradient(#ffd23c,#c77a08);color:#2a1604}
.lgbox label{display:block;text-align:left;font-size:13px;font-weight:700;color:#ffe9a0;margin:8px 0 0}
.lgbox input{width:100%;margin-top:3px;padding:11px 12px;border-radius:12px;border:3px solid #c8902c;background:#150d06;color:#fff;font:inherit;font-size:16px;box-sizing:border-box}.lgbox input:focus{outline:none;border-color:#ffe066;box-shadow:0 0 10px #ffd23c88}
.lgmsg{min-height:20px;margin:10px 0 4px;font-size:13px;line-height:1.3}.lgmsg.err{color:#ff9a8a}.lgmsg.info{color:#cbb8ff}
.lgbtn{width:100%;padding:12px;margin-top:4px;border-radius:14px;border:3px solid #ffe9a0;background:linear-gradient(#ffd23c,#c77a08);color:#2a1604;font:inherit;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 4px 0 #3b2406,0 0 14px #ffb82e66}.lgbtn:hover{filter:brightness(1.1)}.lgbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #3b2406}.lgbtn:disabled{filter:grayscale(.6) brightness(.8);cursor:default}
.lgfoot{margin-top:12px;color:#b8a888;font-size:12px;line-height:1.35}


/* barres de vie flottantes au-dessus des ennemis (biomes 3D) */
.eb3{position:absolute;width:58px;height:9px;transform:translate(-50%,-100%);border:2px solid #ffe9a0;border-radius:6px;background:#1a0a0a;box-shadow:0 2px 0 #000a,0 0 8px #000a;pointer-events:none;overflow:hidden}
.eb3 i{display:block;height:100%;background:linear-gradient(#ff6a5a,#c01f1f);transition:width .12s linear}
.eb3.boss{width:96px;height:12px;border-color:#ffd23c;box-shadow:0 2px 0 #000a,0 0 12px #ffb82e88}


/* ---- Formation d'équipe ---- */
.fgrid{display:flex;gap:10px;align-items:stretch;justify-content:center;margin-top:8px}
.fcol{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:84px}
.fcol>small,.fenemy small{text-align:center;opacity:.7;font-size:11px}
.fslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:62px;border-radius:12px;border:2px dashed rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;cursor:pointer;font-size:22px}
.fslot.has{border:2px solid #c9a24a;background:linear-gradient(#4b3a24,#2b2014)}
.fslot.sel{border-color:#6dffb0;box-shadow:0 0 10px #6dffb0}
.fslot small{font-size:11px;line-height:1}
.fenemy{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;opacity:.8}

/* ---- Arène PvP ---- */
.arow2 .rn small{display:block;font-size:14px;line-height:1.1;margin-top:2px}.arow2 .rn small img{height:18px;width:18px;vertical-align:middle}
.aboard{display:flex;gap:8px;align-items:center;justify-content:center;margin:8px 0}
.acol{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.acol>b{text-align:center;color:#e8c872;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avs{font-weight:900;font-size:20px;color:#ff9a4d;text-shadow:0 2px 0 #000}
.aunit{background:#0006;border:1px solid #c9a24a55;border-radius:10px;padding:4px 6px;font-size:12px}.aunit img{height:20px;width:20px;vertical-align:middle}
.abar{height:9px;border-radius:5px;background:#000a;margin-top:3px;overflow:hidden}.abar i{display:block;height:100%;width:100%;background:linear-gradient(#6dff7a,#1fa83a);transition:width .12s linear}
.acol:last-child .abar i{background:linear-gradient(#ff8a6d,#c02a1a)}
.alog{max-height:110px;overflow:auto;font-size:12px;opacity:.9;margin:6px 0;padding:6px;background:#0005;border-radius:8px}

/* ---- Popup prestige disponible ---- */
.presready{text-align:center}
.prcard{display:inline-block;margin:8px auto;padding:8px;border-radius:16px;border:3px solid var(--c,#ffd23c);background:radial-gradient(circle,#ffffff22,#0006);box-shadow:0 0 22px var(--c,#ffd23c)}
.prcard img{display:block;width:170px;max-width:60vw;border-radius:12px}
.prname{font-weight:800;font-size:18px;color:#ffe9a8;margin-top:6px}.prlv{font-size:12px;opacity:.85}

/* ---- Panoplies PvP ---- */
.pgrows{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.pgrow{display:flex;align-items:center;gap:8px;background:#0004;border-radius:10px;padding:6px 8px}.pgrow>b{min-width:110px;font-size:13px}
.pgopts{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.pgopt{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;border-radius:10px;border:2px solid var(--c);background:#0006;color:#fff;font-size:18px;cursor:pointer}
.pgopt small{font-size:10px;opacity:.85}.pgopt.on{background:var(--c);color:#111;box-shadow:0 0 10px var(--c)}.pgopt.dis{opacity:.35;border-style:dashed}
.pgsets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}.pgset{border:1px solid var(--c);border-radius:10px;padding:5px 8px;font-size:12px;display:flex;flex-direction:column}.pgset small{opacity:.8;font-size:11px}
.pgres{opacity:.8}

/* ---- Sets PvP (5 sets de 8 pièces) ---- */
.pvpic{width:40px;height:40px;object-fit:contain;border-radius:8px;vertical-align:middle}.pvpic.sm{width:22px;height:22px}
.pgrow>b{min-width:78px}
.pgopt{min-width:54px;padding:3px 2px;font-size:0}.pgopt small{font-size:9px;line-height:1.1;text-align:center}
.pgopt.on{background:#0009;box-shadow:0 0 10px var(--c),inset 0 0 8px var(--c);color:#fff}
.pgsets{grid-template-columns:1fr 1fr}.pgset small.ok{color:#7dff9b;opacity:1}
@media (max-width:520px){.pgrow{flex-direction:column;align-items:flex-start}.pgsets{grid-template-columns:1fr}}

.pticon{font-size:22px;line-height:1}

/* ---- barre des sets (écran d'inventaire) ---- */
.setsbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;margin:6px 0;padding:4px 6px;background:#0004;border-radius:10px}.setsbar>span{font-weight:700;margin:0 2px 0 4px}

/* ---- barre des sets : nouveaux boutons PvE / PvP ---- */
.setsbar{background:#06060a;border:2px solid #c9a24a;box-shadow:0 0 10px #c9a24a66;padding:4px 6px;gap:3px}
.sbtn{position:relative;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:0;flex:0 1 auto}
.sbtn img{height:30px;width:auto;display:block;max-width:100%}
.sbtn.lab{cursor:default}
button.sbtn:hover{filter:brightness(1.2)}button.sbtn:active{transform:translateY(2px)}
.sbtn.saved{filter:drop-shadow(0 0 5px #7dff9b)}
.sbtn.saved::after{content:'\2714';position:absolute;right:-2px;top:-5px;width:15px;height:15px;border-radius:50%;background:#22c55e;color:#fff;font-size:10px;line-height:15px;text-align:center;box-shadow:0 0 4px #000}
.itile .ittr{position:absolute;left:2px;top:1px;font-style:normal;font-size:9px;font-weight:800;color:#bfe6ff;background:#000a;border-radius:5px;padding:0 3px;line-height:13px}.itile .ittr.prim{color:#e0b3ff;background:#3a0f5acc;box-shadow:0 0 6px #b04dff}
.primico{width:64px;height:64px;vertical-align:middle;border-radius:10px;margin-right:6px;box-shadow:0 0 10px #b04dff88}
.shopbtn.sm{width:36px;height:36px;font-size:18px;margin-left:4px}.shopbtn.off{opacity:.6;filter:grayscale(.6)}
.musicpanel{position:fixed;z-index:60;background:linear-gradient(#5b3a1e,#3a2414);border:3px solid #d49a30;border-radius:14px;padding:10px 12px;box-shadow:0 6px 18px #000a;min-width:210px;color:#ffeaa6}.musicpanel .mp-row{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:4px 0}.musicpanel input[type=range]{flex:1;accent-color:#ffb82e;height:26px;min-width:0}.musicpanel .mp-val{font-size:15px}