:root{
  --bg:#06040e;--s1:#0c0a10;--s2:#110e16;--s3:#16121e;
  --b1:#221a10;--b2:#3a2c14;--b3:#4e3c1c;
  --gold:#c8a020;--gold2:#f0cc50;--gd3:#6a5010;
  --red:#c02828;--red2:#e84848;
  --grn:#186838;--grn2:#28c060;
  --blu:#1a3888;--blu2:#3888e0;
  --pur:#621898;--pur2:#9848f0;
  --txt:#c8b88a;--txt2:#8a7048;--wht:#f0e8d8;
  --common:#8898a8;--rare:#3888e0;--epic:#9848f0;
  --legendary:#c8a020;--mythic:#e84848;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:100%;}
body{background:var(--bg);color:var(--txt);font-family:'Crimson Pro',Georgia,serif;font-size:19px;
  padding-top:env(safe-area-inset-top);
  padding-bottom:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(ellipse at 25% 10%,rgba(80,20,100,.18) 0%,transparent 55%),
    radial-gradient(ellipse at 75% 90%,rgba(10,5,60,.18) 0%,transparent 55%);}

/* ═══ SCREENS — chaque onglet est un écran indépendant ═══ */
.screen{display:none;min-height:100vh;flex-direction:column;max-width:480px;margin:0 auto;width:100%;overflow:visible;}
.screen.active{display:flex;}

/* ═══ GAME SCREEN ═══ */
#sc-game{padding-bottom:0;}
#sc-stats,#sc-inv,#sc-guild,#sc-lb{min-height:100vh;position:relative;z-index:2;background:var(--bg);overflow:visible;}
.g-hdr{background:transparent;border-bottom:2px solid rgba(200,160,32,.65);position:sticky;top:0;z-index:50;backdrop-filter:blur(6px);box-shadow:0 3px 20px rgba(0,0,0,.85),0 2px 8px rgba(200,160,32,.2);}
.g-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.g-name{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--gold);}
.g-cls{display:flex;align-items:center;gap:4px;font-family:'Cinzel',serif;font-size:.75rem;
  letter-spacing:2px;color:var(--txt2);background:var(--s2);border:1px solid var(--b1);padding:2px 8px;border-radius:18px;}
.stat-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.ss{background:var(--s2);border:1px solid var(--b1);border-radius:6px;padding:4px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.ss-l{font-size:.62rem;letter-spacing:2px;color:var(--txt2);font-family:'Cinzel',serif;text-transform:uppercase;}
.ss-v{font-family:'Cinzel',serif;font-size:1rem;color:var(--wht);font-weight:700;}
.hp-mini{width:100%;height:3px;background:var(--b1);border-radius:2px;margin-top:2px;}
.hp-mf{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--red2));transition:width .4s;}
.xp-bar{height:2px;background:rgba(255,255,255,.1);margin:3px 0 0;border-radius:1px;}
.xp-f{height:100%;border-radius:1px;background:linear-gradient(90deg,var(--blu),var(--blu2));transition:width .5s;}

/* Screens secondaires avec header de retour */
.sc-hdr{background:rgba(6,4,14,.90);border-bottom:1px solid rgba(212,160,23,.22);padding:12px 14px;
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;flex-shrink:0;backdrop-filter:blur(6px);}
.sc-hdr-title{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--gold);}
.sc-body{padding:12px 14px 12px;}
.sc-body::-webkit-scrollbar{width:5px;}
.sc-body::-webkit-scrollbar-thumb{background:var(--b3);border-radius:3px;}
.sc-body::-webkit-scrollbar-track{background:var(--s2);}
#tp-inv::-webkit-scrollbar{width:5px;}
#tp-inv::-webkit-scrollbar-thumb{background:var(--b3);border-radius:3px;}
#tp-inv::-webkit-scrollbar-track{background:var(--s2);}

/* BOTTOM NAV — fixed, comme realm-of-dice */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;background:var(--s1);border-top:1px solid rgba(212,160,23,.22);
  display:flex;z-index:9999;
  padding-bottom:0;}
.nb{flex:1;padding:10px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;color:var(--txt2);font-family:'Cinzel',serif;
  font-size:.55rem;letter-spacing:1px;text-transform:uppercase;transition:.15s;}
.nb .ni{font-size:1.3rem;}.nb.active{color:var(--gold);}.nb:hover{color:var(--txt);}
/* Notification dot on nav tabs */
.nb{position:relative;}
.nb-badge{
  position:absolute;top:6px;right:calc(50% - 14px);
  width:8px;height:8px;border-radius:50%;
  background:var(--red2);border:1.5px solid var(--s1);
  display:none;pointer-events:none;
}
.nb-badge.show{display:block;}

/* ══════════════════════════════════════
   TITRE SCREEN — layout
══════════════════════════════════════ */
#sc-title{
  align-items:center;justify-content:center;gap:0;
  padding:0 16px 24px;overflow:visible;text-align:center;
  position:relative;z-index:1;
  background-image:url('backgroundimage.png');
  background-size:cover;
  background-position:center;
}
#title-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;}
#sc-title > *:not(#title-video-bg):not(#title-music-wrap){position:relative;z-index:1;}
#sc-title::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,2,10,.5) 0%,rgba(6,3,14,.1) 35%,rgba(6,3,14,.1) 60%,rgba(4,2,10,.6) 100%);
}

@keyframes logoFloat{
  0%,100%{
    transform:translateY(0) scale(1);
    filter:drop-shadow(0 0 16px rgba(212,160,23,.7)) drop-shadow(0 0 40px rgba(212,160,23,.3));
  }
  50%{
    transform:translateY(-8px) scale(1.01);
    filter:drop-shadow(0 0 28px rgba(244,211,122,1)) drop-shadow(0 0 70px rgba(212,160,23,.6)) drop-shadow(0 0 120px rgba(212,160,23,.25));
  }
}
#title-logo-img{
  width:auto;
  max-width:100%;
  max-height:280px;
  object-fit:contain;
  object-position:center bottom;
  display:block;
  margin:0 auto;
  margin-bottom:-6px;
  animation:logoFloat 4s ease-in-out infinite;
  position:relative;
  z-index:1;
}

/* ══════════════════════════════════════
   TITRE — 2 lignes dramatiques (fallback texte)
══════════════════════════════════════ */
@keyframes titleGlow{
  0%  {text-shadow:0 0 30px rgba(212,160,23,.7),0 0 70px rgba(212,160,23,.3),0 5px 0 #000,0 2px 10px #000;}
  50% {text-shadow:0 0 60px rgba(244,211,122,1),0 0 130px rgba(212,160,23,.7),0 0 220px rgba(212,160,23,.2),0 5px 0 #000,0 2px 10px #000;}
  100%{text-shadow:0 0 30px rgba(212,160,23,.7),0 0 70px rgba(212,160,23,.3),0 5px 0 #000,0 2px 10px #000;}
}
.logo{
  display:flex;flex-direction:column;align-items:center;
  font-family:'Cinzel Decorative',serif;font-weight:900;color:#f4d37a;
  line-height:0.92;animation:titleGlow 4s ease-in-out infinite;gap:0;
}
.logo-line1{font-size:clamp(4rem,18vw,7.5rem);letter-spacing:0.08em;display:block;}
.logo-line2{font-size:clamp(3rem,14vw,6rem);letter-spacing:0.06em;display:block;}
.logo-sub{
  font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:7px;
  color:rgba(244,211,122,.95);text-transform:uppercase;
  text-shadow:
    0 0 6px rgba(0,0,0,1),
    0 0 12px rgba(0,0,0,1),
    0 0 20px rgba(0,0,0,1),
    5px 0 12px rgba(0,0,0,1),
    -5px 0 12px rgba(0,0,0,1),
    0 5px 12px rgba(0,0,0,1),
    0 -5px 12px rgba(0,0,0,1),
    4px 4px 10px rgba(0,0,0,1),
    -4px -4px 10px rgba(0,0,0,1),
    4px -4px 10px rgba(0,0,0,1),
    -4px 4px 10px rgba(0,0,0,1),
    6px 6px 8px rgba(0,0,0,1),
    -6px -6px 8px rgba(0,0,0,1),
    6px -6px 8px rgba(0,0,0,1),
    -6px 6px 8px rgba(0,0,0,1);
  margin-top:0;margin-bottom:0;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
}
.logo-sub::before,
.logo-sub::after{
  content:"";
  display:inline-block;
  width:40px;height:1px;margin:0 10px;
  background:linear-gradient(to right, transparent, #d4a017, transparent);
  flex-shrink:0;
}
.subtitle-wrapper{
  padding:0;
  background:none;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  margin-top:18px;
  margin-bottom:18px;
}

/* ══════════════════════════════════════
   DES — vraies faces avec points SVG
══════════════════════════════════════ */
.dice-deco{display:flex;gap:12px;justify-content:center;margin:0 0 20px 0;}
.dd{
  width:56px;height:56px;
  background:linear-gradient(145deg, rgba(6,4,14,.95) 0%, rgba(10,7,18,.98) 60%, rgba(4,3,10,1) 100%);
  border:2px solid #d4a017;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(212,160,23,.55),0 0 20px rgba(212,160,23,.2),inset 0 0 8px rgba(255,215,120,.12),inset 0 1px 0 rgba(255,215,120,.18),0 5px 18px rgba(0,0,0,.85);
  animation:flt 4s ease-in-out infinite;transition:all .25s ease;cursor:pointer;
}
.dd svg circle{filter:drop-shadow(0 0 3px rgba(244,211,122,.8));}
.dd:hover{
  border-color:#f4d37a;transform:translateY(-5px) scale(1.08);
  box-shadow:0 0 18px #d4a017,0 0 36px rgba(212,160,23,.5),inset 0 0 10px rgba(255,215,120,.2),0 8px 24px rgba(0,0,0,.8);
}
.dd:active{box-shadow:0 0 44px rgba(212,160,23,1),inset 0 0 18px rgba(212,160,23,.3);}
.dd:nth-child(2){animation-delay:.5s}.dd:nth-child(3){animation-delay:1s}.dd:nth-child(4){animation-delay:1.5s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ══════════════════════════════════════
   PANNEAU LEADERBOARD
══════════════════════════════════════ */
.title-lb{
  background:rgba(6,4,14,.75);border:1.5px solid rgba(212,160,23,.55);border-radius:10px;
  padding:18px 20px 16px;max-width:340px;width:calc(100% - 8px);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px rgba(212,160,23,.1),0 0 35px rgba(212,160,23,.18),0 14px 44px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,215,120,.08);
  position:relative;overflow:visible;
  margin-bottom:18px;
}
.title-lb::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,#d4a017 25%,#f4d37a 50%,#d4a017 75%,transparent 100%);
  border-radius:10px 10px 0 0;
}
.title-lb::after{
  content:'\25C6';position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-size:1.3rem;color:#d4a017;
  text-shadow:0 0 14px rgba(212,160,23,.95),0 0 28px rgba(212,160,23,.5);
  background:rgba(6,4,14,.95);padding:0 8px;line-height:1;
}
.tlb-h{
  font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:5px;
  color:#d4a017;text-transform:uppercase;margin-bottom:12px;margin-top:4px;
  text-shadow:0 0 14px rgba(212,160,23,.55);
}
.tlb-r{
  display:flex;gap:10px;align-items:center;padding:9px 6px;
  border-bottom:1px solid rgba(212,160,23,.13);border-radius:4px;transition:all .18s ease;
}
.tlb-r:last-child{border:none;}
.tlb-r:hover{background:rgba(212,160,23,.09);padding-left:10px;}
.tlb-k{width:24px;color:rgba(212,160,23,.55);font-family:'Cinzel',serif;font-size:.72rem;flex-shrink:0;}
.tlb-n{flex:1;color:#ede0f8;font-family:'Cinzel',serif;font-size:.86rem;font-weight:600;text-align:left;}
.tlb-s{color:#f4d37a;font-family:'Cinzel',serif;font-size:.8rem;font-weight:700;text-shadow:0 0 10px rgba(212,160,23,.5);}

/* ══════════════════════════════════════
   BOUTON PRINCIPAL
══════════════════════════════════════ */
#sc-title .btn-gold{
  background:linear-gradient(180deg,#c49010 0%,#e8b820 30%,#f4d37a 50%,#e8b820 70%,#a07808 100%);
  color:#0c0a18;font-family:'Cinzel',serif;font-size:.95rem;font-weight:900;
  letter-spacing:3px;padding:16px 20px;border-radius:6px;
  border-top:1px solid rgba(255,240,160,.6);border-bottom:1px solid rgba(80,50,0,.8);
  border-left:1px solid rgba(212,160,23,.5);border-right:1px solid rgba(212,160,23,.5);
  width:min(320px,90%);
  box-shadow:0 0 30px rgba(212,160,23,.55),0 0 12px rgba(212,160,23,.3),0 6px 24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.3);
  text-shadow:0 1px 3px rgba(0,0,0,.45);position:relative;overflow:hidden;transition:all .22s ease;
  margin-bottom:12px;
}
#sc-title .btn-gold::before{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .45s ease;pointer-events:none;
}
#sc-title .btn-gold:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 50px rgba(212,160,23,.85),0 0 20px rgba(212,160,23,.55),0 10px 32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.3);
}
#sc-title .btn-gold:hover::before{left:150%;}
#sc-title .btn-gold:active{transform:scale(.96);}

/* ══════════════════════════════════════
   BOUTON SECONDAIRE
══════════════════════════════════════ */
#sc-title .btn-out{
  background:rgba(6,4,14,.4);border:1px solid rgba(212,160,23,.38);
  color:rgba(244,211,122,.65);font-family:'Cinzel',serif;font-size:.7rem;
  letter-spacing:3px;padding:10px 28px;backdrop-filter:blur(10px);
  transition:all .2s ease;border-radius:6px;width:min(210px,65%);
}
#sc-title .btn-out:hover{
  background:rgba(27,20,51,.55);border-color:rgba(212,160,23,.65);
  color:#f4d37a;box-shadow:0 0 16px rgba(212,160,23,.2);
}

/* ═══ AUTH MODAL ═══ */
.btn-auth-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px 16px;
  background:#fff;color:#3c4043;
  font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;letter-spacing:1px;
  border:1px solid rgba(0,0,0,.15);border-radius:8px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:all .18s;
  margin-bottom:12px;
}
.btn-auth-google:hover{box-shadow:0 4px 16px rgba(0,0,0,.4);transform:translateY(-1px);}
.auth-separator{
  display:flex;align-items:center;gap:10px;
  margin:4px 0 12px;color:var(--txt2);font-size:.65rem;
}
.auth-separator::before,.auth-separator::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,160,23,.3),transparent);
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:13px 26px;font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;border:none;border-radius:9px;cursor:pointer;
  transition:all .15s;position:relative;overflow:hidden;}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.07);opacity:0;transition:.15s;}
.btn:hover::after{opacity:1}.btn:active{transform:scale(.95);}
.btn-gold{background:linear-gradient(135deg,#6a5008,var(--gold),var(--gold2),var(--gold));color:#0a0800;box-shadow:0 3px 16px rgba(200,160,32,.4);}
.btn-red{background:linear-gradient(135deg,#600a0a,var(--red));color:var(--wht);}
.btn-grn{background:linear-gradient(135deg,#0a3a1a,var(--grn));color:var(--wht);}
.btn-out{background:transparent;border:1px solid rgba(212,160,23,.25);color:var(--txt);}
.btn-pur{background:linear-gradient(135deg,#380a60,var(--pur));color:var(--wht);}
.btn-full{width:100%;}.btn-sm{padding:8px 16px;font-size:.78rem;letter-spacing:1px;}
.btn-xs{padding:5px 10px;font-size:.68rem;letter-spacing:.5px;}
.btn[disabled]{opacity:.3;pointer-events:none;}

/* ═══ ADVENTURE TAB ═══ */
#tp-adv{padding:5px 8px 12px;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;}

/* Zone progress bar */
.zone-prog{background:rgba(6,4,14,.82);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:9px 12px;backdrop-filter:blur(4px);}
.zp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.zp-name{font-family:'Cinzel',serif;font-size:.95rem;color:var(--wht);font-weight:700;}
.zp-boss{font-family:'Cinzel',serif;font-size:.72rem;color:var(--red2);letter-spacing:2px;text-transform:uppercase;}
.zp-bar-wrap{height:8px;background:var(--b1);border-radius:4px;overflow:hidden;}
.zp-bar-f{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pur),var(--pur2));transition:width .6s;}
.zp-bot{display:flex;justify-content:space-between;margin-top:5px;font-size:.78rem;color:var(--txt2);}

/* Adv log */
.adv-log{background:rgba(6,4,14,.82);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:8px 11px;
  max-height:72px;overflow-y:auto;font-size:.78rem;line-height:1.55;backdrop-filter:blur(4px);}
.adv-log::-webkit-scrollbar{width:3px;}
.adv-log::-webkit-scrollbar-thumb{background:var(--b2);}
.adv-log p{margin-bottom:1px;}

/* Die legend — exploration */
.die-legend{background:rgba(6,4,14,.82);border:1px solid rgba(212,160,23,.25);border-radius:9px;overflow:hidden;backdrop-filter:blur(4px);}
.dl-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;cursor:pointer;user-select:none;}
.dl-toggle:hover{background:rgba(255,255,255,.03);}
.dl-t{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:3px;color:var(--txt);text-transform:uppercase;}
.dl-chev{font-size:.65rem;color:var(--txt2);transition:transform .2s;}
.dl-chev.open{transform:rotate(180deg);}
.dl-body{padding:0 11px 9px;}
.dl-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.dl-f{display:flex;align-items:center;gap:7px;padding:6px 8px;background:var(--s2);border:1px solid var(--b1);border-radius:6px;}
.dl-di{font-size:1.4rem;flex-shrink:0;line-height:1;}
.dl-info .dl-n{font-size:.65rem;color:var(--txt2);font-family:'Cinzel',serif;line-height:1;}
.dl-info .dl-e{font-size:.82rem;font-weight:600;line-height:1.3;}

/* Collapsible die table in combat */
.cbt-die-tbl{background:var(--s2);border:1px solid var(--b1);border-radius:9px;overflow:hidden;}
.cbt-die-tbl-toggle{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;user-select:none;}
.cbt-die-tbl-toggle:hover{background:rgba(255,255,255,.03);}
.cdt-title{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:2px;color:var(--txt2);text-transform:uppercase;}
.cbt-die-tbl-body{padding:0 10px 8px;}
.cdt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;}
.cdt-f{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;
  background:var(--s1);border:1px solid var(--b1);border-radius:6px;transition:.2s;}
.cdt-f.active{border-color:var(--gold);background:rgba(200,160,32,.08);}
.cdt-di{font-size:1.15rem;line-height:1;}
.cdt-lbl{font-size:.6rem;font-family:'Cinzel',serif;text-align:center;line-height:1.1;font-weight:700;}
.cdt-note{display:none;font-size:.62rem;color:var(--txt2);line-height:1.3;margin-top:3px;grid-column:1/-1;}


/* Manual big die — carré avec numéro */
.die-zone{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0 12px;
  background:rgba(6,4,9,.72);border:1px solid var(--b1);border-radius:10px;backdrop-filter:blur(4px);}
body.cardbg-active .die-zone{background:linear-gradient(rgba(6,4,9,.78),rgba(6,4,9,.78)),url('fondcarte.png') center/100% 100%;}
.big-die{width:112px;height:112px;border-radius:20px;cursor:pointer;user-select:none;
  background:none;
  border:3px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.8), 4px 4px 0 rgba(0,0,0,.5);
  transition:all .2s;position:relative;overflow:visible;}
.big-die .die-shine{display:none;}
.big-die::after{content:'';position:absolute;inset:3px;border-radius:16px;border:1px solid rgba(255,255,255,.05);pointer-events:none;}
.big-die.ready{border-color:var(--gold);
  box-shadow:0 8px 28px rgba(0,0,0,.8), 4px 4px 0 rgba(0,0,0,.5), 0 0 20px rgba(200,160,32,.4), inset 0 1px 0 rgba(255,255,255,.06);}
.big-die:active{transform:scale(.93) translateY(2px);box-shadow:0 4px 14px rgba(0,0,0,.8),2px 2px 0 rgba(0,0,0,.5);}
.big-die.spinning{animation:dspin3d .7s ease;}
.big-die .die-shine{display:none;}
.big-die::after{content:'';position:absolute;inset:0;border-radius:18px;border:1px solid rgba(255,255,255,.05);pointer-events:none;}
.big-die.ready{border-color:rgba(232,98,42,.7);
  box-shadow:0 8px 28px rgba(0,0,0,.8), 4px 4px 0 rgba(0,0,0,.5), 0 0 14px rgba(232,98,42,.35);}
.big-die:active{transform:scale(.93) translateY(2px);box-shadow:0 4px 14px rgba(0,0,0,.8),2px 2px 0 rgba(0,0,0,.5);}
.big-die.spinning{animation:dspin3d .7s ease;}
@keyframes dspin3d{
  0%  {transform:scale(1) rotate(0deg)}
  25% {transform:scale(1.1) rotate(-15deg)}
  60% {transform:scale(.95) rotate(12deg)}
  85% {transform:scale(1.04) rotate(-5deg)}
  100%{transform:scale(1) rotate(0deg)}
}
/* ── Skins de dé — position réglable ici ──────────────────── */
.die-skin-img {
  position: absolute;
  object-fit: contain;
  top: 50%;
  left: 50%;
  /* ↓ Modifie translateY pour monter/descendre l'image du grand dé */
  transform: translate(-50%, -49%);
  pointer-events: none;
  z-index: 0;

  transform: translate(-50%, -50%) scale(1.1);
}
.cbt-die-skin-img {
  position: absolute;
  object-fit: contain;
  top: 50%;
  left: 50%;
  /* ↓ Modifie translateY pour monter/descendre l'image du dé de combat */
  transform: translate(-50%, -49%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%) scale(1.1);
}

.die-result-num{
  font-family:'Cinzel Decorative',serif;font-size:2.4rem;font-weight:900;
  color:#fff;z-index:2;line-height:1;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 0 14px rgba(0,0,0,.95);
}
.die-hint{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:3px;color:var(--txt);text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.8);}

/* Combat die — même style carré petit */
.cbt-die-zone{display:flex;flex-direction:column;align-items:center;gap:7px;}
.cbt-big-die{width:78px;height:78px;border-radius:14px;cursor:pointer;user-select:none;
  background:none;
  border:2px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 16px rgba(0,0,0,.7),3px 3px 0 rgba(0,0,0,.4);
  transition:all .18s;position:relative;overflow:visible;}
.cbt-big-die .die-shine{display:none;}
.cbt-big-die.ready{border-color:var(--gold);box-shadow:0 5px 16px rgba(0,0,0,.7),3px 3px 0 rgba(0,0,0,.4),0 0 12px rgba(200,160,32,.35);}
.cbt-big-die:active{transform:scale(.9) translateY(2px);}
.cbt-big-die.spinning{animation:dspin3d .65s ease;}
.cbt-die-num{font-family:'Cinzel Decorative',serif;font-size:clamp(1.3rem,5vw,1.8rem);font-weight:900;
  color:#fff;line-height:1;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 0 10px rgba(0,0,0,.95);
}
.roll-badge{display:inline-flex;align-items:center;gap:5px;font-family:'Cinzel',serif;
  font-size:.7rem;letter-spacing:2px;padding:5px 12px;border-radius:14px;border:1px solid;text-transform:uppercase;}


/* ═══ CHEST WHEEL CIRCULAIRE ═══ */
.wheel-circ-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0;}
.wheel-circ-outer{
  position:relative;width:270px;height:270px;
  filter:drop-shadow(0 0 18px rgba(212,160,23,.25)) drop-shadow(0 0 40px rgba(212,160,23,.1));
}
.wheel-svg{width:270px;height:270px;position:absolute;top:0;left:0;}
@keyframes ptrPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(212,160,23,1)) drop-shadow(0 0 18px rgba(212,160,23,.6));}
  50%{filter:drop-shadow(0 0 14px rgba(244,211,122,1)) drop-shadow(0 0 32px rgba(212,160,23,.9));}
}
.wheel-ptr{
  position:absolute;top:50%;right:-6px;transform:translateY(-50%);
  width:0;height:0;
  border-top:13px solid transparent;border-bottom:13px solid transparent;
  border-right:30px solid var(--gold);
  filter:drop-shadow(0 0 8px rgba(212,160,23,1)) drop-shadow(0 0 18px rgba(212,160,23,.6));
  animation:ptrPulse 2s ease-in-out infinite;
  z-index:5;
}
.wheel-ptr::before{
  content:'';position:absolute;top:-9px;right:2px;
  width:0;height:0;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-right:22px solid rgba(212,160,23,.3);
}
.wheel-center-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2a1540,#0a0618);
  border:2px solid var(--gold);
  border-image:linear-gradient(135deg,#f4d37a,#6a5010,#f4d37a) 1;
  z-index:4;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:.62rem;font-weight:700;letter-spacing:2px;
  color:var(--gold);text-align:center;line-height:1.3;
  box-shadow:0 0 0 3px rgba(106,80,16,.4),0 0 24px rgba(212,160,23,.5),inset 0 0 12px rgba(212,160,23,.08);
  transition:all .2s;
}
.wheel-center-btn:active{transform:translate(-50%,-50%) scale(.92);}
.wheel-result-txt{
  font-family:'Cinzel',serif;font-size:1.1rem;letter-spacing:3px;
  text-transform:uppercase;min-height:1.8em;text-align:center;
  text-shadow:0 0 12px currentColor;
}


.ev-card{background:rgba(6,4,14,.88);border:1px solid;border-radius:10px;padding:13px 14px;animation:cdin .3s ease;backdrop-filter:blur(6px);}
body.cardbg-active .ev-card{background:linear-gradient(rgba(6,4,14,.82),rgba(6,4,14,.82)),url('fondcarte.png') center/100% 100%;}
@keyframes cdin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ev-type{font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:5px;}
.ev-title{font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;color:var(--wht);margin-bottom:6px;}
.ev-desc{font-size:.95rem;color:var(--txt);line-height:1.55;margin-bottom:12px;}

/* ═══ COMBAT ═══ */
#tp-combat{padding:5px 8px;display:flex;flex-direction:column;gap:4px;}
.cbt-card{background:rgba(6,4,14,.85);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:4px 9px;backdrop-filter:blur(4px);}

/* ── Blood sprite animation ── */
#player-card{position:relative;overflow:hidden;container-type:inline-size;}
body.cardbg-active #player-card{background:linear-gradient(rgba(6,4,14,.52),rgba(6,4,14,.52)),url('fondcarte.png') 80% center/100% 100%;}
body.cardbg-active #player-card .cbt-row,
body.cardbg-active #player-card .hp-bar,
body.cardbg-active #player-card .cbt-tags{position:relative;z-index:2;}
.blood-sprite-wrap{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  z-index:1;
  transition:opacity .3s;
}
body.blood-active .blood-sprite-wrap{opacity:.40;}
body.blood-active #player-card .blood-sprite-wrap{opacity:0;}
.blood-sprite{
  position:absolute;
  top:0;left:0;
  width:466px;
  height:240px;
  background-image:url('blood.png');
  background-repeat:no-repeat;
  background-size:11184px 240px;
  /* ping-pong : forward puis reverse pour loop sans coupure */
  animation:bloodAnim 2.0s steps(1,end) infinite alternate;
  transform-origin:top left;
  transform:scale(calc(100cqw / 466px));
}

/* ── Blood sprite sur les cartes d'action ── */
.act-btn{overflow:hidden;}
#act-grid-wrap{isolation:isolate;}
#cbt-die-zone{z-index:25!important;}
.act-btn::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:466px;
  height:240px;
  background-image:url('blood.png');
  background-repeat:no-repeat;
  background-size:11184px 240px;
  animation:bloodAnim 2.4s steps(1,end) infinite alternate;
  transform-origin:top left;
  transform:scale(calc(100cqw / 466px));
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .3s;
}
body.blood-active .act-btn::before{opacity:.28;}
.act-btn.disabled::before,.act-btn[disabled]::before{opacity:.08!important;}
@keyframes bloodAnim{
  0%   {background-position:0 0}
  4.17%{background-position:-466px 0}
  8.33%{background-position:-932px 0}
  12.5%{background-position:-1398px 0}
  16.67%{background-position:-1864px 0}
  20.83%{background-position:-2330px 0}
  25%  {background-position:-2796px 0}
  29.17%{background-position:-3262px 0}
  33.33%{background-position:-3728px 0}
  37.5%{background-position:-4194px 0}
  41.67%{background-position:-4660px 0}
  45.83%{background-position:-5126px 0}
  50%  {background-position:-5592px 0}
  54.17%{background-position:-6058px 0}
  58.33%{background-position:-6524px 0}
  62.5%{background-position:-6990px 0}
  66.67%{background-position:-7456px 0}
  70.83%{background-position:-7922px 0}
  75%  {background-position:-8388px 0}
  79.17%{background-position:-8854px 0}
  83.33%{background-position:-9320px 0}
  87.5%{background-position:-9786px 0}
  91.67%{background-position:-10252px 0}
  95.83%{background-position:-10718px 0}
  100% {background-position:0 0}
}
.cbt-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.cbt-nm{font-family:'Cinzel',serif;font-size:.80rem;font-weight:700;color:var(--wht);}
.cbt-hp{font-family:'Cinzel',serif;font-size:.75rem;color:var(--txt2);}
.hp-bar{height:9px;background:var(--b1);border-radius:5px;overflow:hidden;}
.hp-f{height:100%;border-radius:4px;transition:width .5s;}
.hp-f.pl{background:linear-gradient(90deg,var(--grn),var(--grn2));}
.hp-f.en{background:linear-gradient(90deg,var(--red),var(--red2));}
.cbt-tags{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;}
.ctag{font-size:.6rem;padding:2px 7px;border-radius:10px;border:1px solid;font-family:'Cinzel',serif;line-height:1.2;}

/* Combat die table (contextual) */
.cbt-die-tbl{background:rgba(6,4,14,.88);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:8px 10px;backdrop-filter:blur(4px);}
.cdt-title{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:3px;color:var(--txt2);text-transform:uppercase;margin-bottom:8px;}
.cdt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;}
.cdt-f{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;
  background:var(--s1);border:1px solid var(--b1);border-radius:6px;transition:.2s;}
.cdt-f.active{border-color:var(--gold);background:rgba(200,160,32,.08);}
.cdt-di{font-size:1.15rem;line-height:1;}
.cdt-lbl{font-size:.6rem;font-family:'Cinzel',serif;text-align:center;line-height:1.1;font-weight:700;}
.cdt-note{display:none;font-size:.62rem;color:var(--txt2);line-height:1.3;margin-top:3px;grid-column:1/-1;}

/* Combat log */
.cbt-log{background:rgba(6,4,14,.85);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:8px 11px;
  max-height:80px;overflow-y:auto;font-size:.78rem;line-height:1.55;backdrop-filter:blur(4px);}
.cbt-log::-webkit-scrollbar{width:3px;}
.cbt-log::-webkit-scrollbar-thumb{background:var(--b2);}
.cbt-log p{margin-bottom:1px;}

/* Action choose */
.choose-label{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:3px;color:var(--txt);text-transform:uppercase;text-align:center;margin:2px 0;}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;overflow:visible;}

/* ═══ SPRITE BORDER — img JS left, 15×221px ═══ */
@keyframes borderGlow{
  0%,100%{ opacity:.88; }
  50%    { opacity:1.0; filter:brightness(1.5) saturate(1.3); }
}

.act-wrap{ position:relative; overflow:visible; }

/* ── Cadre de Foudre (activable en boutique) ── */
body.cardsang-active .act-wrap::after{
  content:'';
  position:absolute;
  inset:-50.5px -1px;
  background:url('testbordure.png') center/100% 100% no-repeat;
  pointer-events:none;
  z-index:20;
}
body.cardsang-active .cbt-card{position:relative;}
body.cardsang-active .cbt-card::after{
  content:'';
  position:absolute;
  inset:-50.5px -5px;
  background:url('testbordure.png') center/100% 100% no-repeat;
  pointer-events:none;
  z-index:20;
}

/* ── Fond Foudre (activable en boutique) ── */
body.thunderbg-active .ev-card{background:linear-gradient(rgba(6,4,14,.55),rgba(6,4,14,.55)),url('foudre.png') center/cover;}
body.thunderbg-active #player-card{background:linear-gradient(rgba(6,4,14,.45),rgba(6,4,14,.45)),url('foudre.png') center/cover;}
body.thunderbg-active #player-card .cbt-row,
body.thunderbg-active #player-card .hp-bar,
body.thunderbg-active #player-card .cbt-tags{position:relative;z-index:2;}
body.thunderbg-active .act-btn{background:linear-gradient(rgba(10,5,18,.6),rgba(10,5,18,.6)),url('foudre.png') center/cover!important;}
body.thunderbg-active .die-zone{background:linear-gradient(rgba(6,4,9,.5),rgba(6,4,9,.5)),url('foudre.png') center/cover;}

.act-border-sprite{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border-radius:11px;
  overflow:hidden;
  z-index:2;
  pointer-events:none;
  animation: borderGlow 2.5s ease-in-out infinite;
  opacity:.95;
}

.act-border-sprite img{
  display:block;
  transition:none !important;
  animation:none !important;
}


.act-wrap:hover .act-border-sprite{ opacity:1; }
.act-wrap:has(.act-btn.sel) .act-border-sprite{ opacity:.28; }
.act-wrap:has(.act-btn.disabled) .act-border-sprite,
.act-wrap:has(.act-btn[disabled]) .act-border-sprite{ opacity:.1; }

/* ═══ ACT-BTN ═══ */
.act-btn{
  background:rgba(10,5,18,1);
  border:1px solid rgba(180,50,10,.3);
  border-radius:9px;
  padding:8px 7px 6px;
  cursor:pointer;
  transition:border-color .18s, background .18s;
  text-align:center;
  display:flex;flex-direction:column;gap:2px;
  position:relative;
  z-index:1;
  container-type:inline-size;
}
.act-btn > *{ position:relative; z-index:11; }

.act-wrap:hover .act-btn{ border-color:rgba(200,50,10,.8); background:rgba(18,8,25,1); }
.act-btn.sel{ border-color:var(--gold2); background:rgba(30,20,8,1); border-width:2px; }
.act-btn.disabled,.act-btn[disabled]{ opacity:.35; pointer-events:none; }

.act-btn .ai{ font-size:1.5rem; line-height:1; }
.act-btn .an{ font-family:'Cinzel',serif; font-size:.85rem; font-weight:700; color:var(--wht); letter-spacing:1px; }
.act-btn .ad{ font-size:.72rem; color:var(--txt); line-height:1.3; }
.act-btn .acd{ font-size:.68rem; color:var(--grn2); margin-top:1px; }
.act-btn .acd-wait{ font-size:.68rem; color:var(--red2); margin-top:1px; }

/* ── Zone background fixe sur tout le jeu ── */
.zone-bg-layer{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:100dvh;z-index:0;pointer-events:none;overflow:hidden;}
.zone-bg-layer svg{width:100%;height:100%;object-fit:cover;}
.zone-bg-layer::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,4,9,.25) 0%,rgba(6,4,9,.50) 40%,rgba(6,4,9,.82) 75%,var(--bg) 100%);}
/* Image zones : plus lumineuses, couvrent tout */
#zone-fixed-bg{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:100dvh;z-index:0;pointer-events:none;background-size:120%;background-position:center 30%;background-repeat:no-repeat;filter:brightness(1.5) saturate(1.3);}
#zone-fixed-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,3,8,.08) 0%,rgba(4,3,8,.30) 45%,rgba(4,3,8,.72) 78%,#060409 100%);}
/* ═══ ZONE ILLUSTRATIONS (small banner, still used in non-adv contexts) ═══ */
.zone-illus{display:none;}/* hidden — bg takes over */
/* ═══ BUILD TAGS on items ═══ */
.build-tag{display:inline-flex;align-items:center;gap:3px;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.5px;padding:2px 8px;border-radius:5px;border:1.5px solid;font-weight:700;white-space:nowrap;}
.build-tag.active{opacity:1;box-shadow:0 0 6px currentColor;}
.build-tag.inactive{opacity:.3;}
/* Monster glow effects by type */
.mob-display{display:flex;flex-direction:column;align-items:center;gap:1px;padding:1px 0;position:relative;}
.mob-emoji{line-height:1;filter:drop-shadow(0 0 8px var(--mob-glow,#888));animation:mobFloat 2.5s ease-in-out infinite;position:relative;z-index:2;}
@keyframes mobFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
/* ── Peintre : splashes de peinture ── */
.paint-splashes{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;border-radius:7px;}
.paint-splash{position:absolute;opacity:0;transition:opacity 1.4s;animation:psplat .45s cubic-bezier(.22,1,.36,1) both;}
@keyframes psplat{0%{transform:scale(0) rotate(var(--pr));opacity:.9}70%{transform:scale(1.1) rotate(var(--pr));opacity:.75}100%{transform:scale(1) rotate(var(--pr));opacity:.6}}
.paint-splash.removing{opacity:0!important;transition:opacity .8s!important;}
/* ── Peintre : pastilles couches ── */
.paint-layers-row{display:flex;align-items:center;gap:5px;padding:5px 0 2px;border-top:1px solid rgba(212,160,23,.12);flex-wrap:wrap;min-height:30px;}
.paint-pip{position:relative;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-family:'Cinzel',serif;font-weight:700;border:2px solid;flex-shrink:0;animation:pip-pop .3s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes pip-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.paint-turns{position:absolute;top:-5px;right:-5px;width:11px;height:11px;border-radius:50%;font-size:7px;display:flex;align-items:center;justify-content:center;font-family:sans-serif;font-weight:700;border:1px solid rgba(0,0,0,.5);}
.pp-rouge{background:rgba(220,50,50,.3);border-color:#e84848;color:#ff8080;}.pt-rouge{background:#c02828;color:#fff;}
.pp-vert{background:rgba(40,160,60,.3);border-color:#28c060;color:#70e890;}.pt-vert{background:#186838;color:#fff;}
.pp-bleu{background:rgba(40,100,220,.3);border-color:#3888e0;color:#80c0ff;}.pt-bleu{background:#1a3888;color:#fff;}
.pp-eclipse{background:rgba(30,10,60,.5);border-color:#9848f0;color:#c084fc;}.pt-eclipse{background:#621898;color:#fff;}
.pp-lune{background:rgba(180,180,255,.15);border-color:#b0b8e0;color:#d8ddf8;}.pt-lune{background:#3a3870;color:#fff;}
.pp-lbl{font-size:.52rem;letter-spacing:1px;color:#6a5010;font-family:'Cinzel',serif;text-transform:uppercase;}
.pp-cap{font-size:.58rem;color:#6a5010;font-family:'Cinzel',serif;margin-left:auto;flex-shrink:0;}
.pp-cap.full{color:#e84848;}
.merch-wrap{padding:9px 11px;display:flex;flex-direction:column;gap:6px;}
.merch-hdr{background:rgba(6,4,14,.88);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:10px 13px;
  display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(4px);}
.merch-nm{font-family:'Cinzel',serif;font-size:.92rem;color:var(--gold);}
.merch-g{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold2);}

/* Item card */
.ic{background:rgba(6,4,14,.88);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;position:relative;backdrop-filter:blur(4px);}
.ic::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc,var(--common));border-radius:9px 0 0 9px;}
.ic-ico{font-size:1.35rem;flex-shrink:0;}
.ic-inf{flex:1;min-width:0;}
.ic-nm{font-family:'Cinzel',serif;font-size:.95rem;color:var(--rc,var(--common));font-weight:700;}
.ic-st{font-size:.82rem;color:var(--txt2);margin-top:2px;}
.ic-sp{font-size:.76rem;color:var(--gold);margin-top:1px;}
.r-pip{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;
  padding:3px 7px;border-radius:8px;border:1px solid var(--rc,var(--common));color:var(--rc,var(--common));white-space:nowrap;}

/* Item tooltip — global floating */
.ic-tip{position:fixed;z-index:9000;min-width:190px;max-width:240px;
  background:var(--s1);border:1px solid var(--rc,var(--b2));border-radius:9px;padding:9px 11px;
  font-size:.78rem;color:var(--txt);line-height:1.55;
  box-shadow:0 8px 24px rgba(0,0,0,.85);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;
  display:none;}
.ic-tip.visible{opacity:1;transform:translateY(0);display:block;}
.ic-tip-nm{font-family:'Cinzel',serif;font-size:.82rem;color:var(--rc,var(--common));font-weight:700;margin-bottom:5px;}
.ic-tip-row{display:flex;justify-content:space-between;gap:8px;padding:1px 0;color:var(--txt2);}
.ic-tip-row span:last-child{color:var(--wht);font-weight:600;}
.ic-tip-sp{font-size:.72rem;color:var(--gold);margin-top:4px;border-top:1px solid var(--b1);padding-top:4px;}


/* ═══ STATS TAB ═══ */
#tp-stats{padding:9px 11px;display:flex;flex-direction:column;gap:8px;}
.sb{background:var(--s1);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:11px 13px;}
body.cardbg-active .sb{background:linear-gradient(rgba(12,10,22,.88),rgba(12,10,22,.88)),url('fondcarte.png') center/100% 100%;}
.sb-t{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:4px;color:var(--gold);
  text-transform:uppercase;margin-bottom:9px;padding-bottom:5px;border-bottom:1px solid var(--b1);}
.sr{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.95rem;}
.stat-tip-row{cursor:pointer;border-radius:5px;transition:background .12s;padding:5px 4px;}
.stat-tip-row:hover{background:rgba(255,255,255,.05);}
.sr-l{color:var(--txt2);}
.sr-v{font-family:'Cinzel',serif;font-weight:700;color:var(--wht);font-size:.92rem;}
.sr-v.g{color:var(--gold)}.sr-v.r{color:var(--red2)}.sr-v.gr{color:var(--grn2)}.sr-v.b{color:var(--blu2)}.sr-v.p{color:var(--pur2)}
.sk-row{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--b1);}
.sk-row:last-child{border:none}
.sk-ico{font-size:1.25rem;flex-shrink:0;}
.sk-body{flex:1;}
.sk-nm{font-family:'Cinzel',serif;font-size:.8rem;color:var(--wht);font-weight:700;}
.sk-ds{font-size:.72rem;color:var(--txt2);margin-top:2px;line-height:1.4;}
.sk-die-hint{font-size:.66rem;color:var(--gold);margin-top:3px;line-height:1.4;}
.sk-cd{font-size:.62rem;color:var(--txt2);margin-top:2px;}
.art-row{background:rgba(200,160,32,.06);border:1px solid var(--gd3);border-radius:8px;padding:8px 10px;margin-bottom:5px;}
.art-row:last-child{margin:0}
.ar-nm{font-family:'Cinzel',serif;font-size:.75rem;color:var(--gold);font-weight:700;}
.ar-ef{font-size:.7rem;color:var(--txt2);margin-top:2px;line-height:1.4;}

/* ═══ INVENTORY TAB ═══ */
#tp-inv{padding:9px 11px 12px;}
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.eq-grid .eq-slot:last-child:nth-child(odd){grid-column:1/-1;} /* charm span full width when alone */
.eq-slot{background:var(--s2);border:1px dashed var(--b2);border-radius:8px;
  padding:9px 10px;min-height:58px;display:flex;flex-direction:column;gap:3px;}
.eq-slot.filled{border-style:solid;}
.eq-l{font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:2px;text-transform:uppercase;color:var(--txt2);}
.eq-n{font-family:'Cinzel',serif;font-size:.76rem;font-weight:700;}
.sec{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:3px;color:var(--txt2);
  text-transform:uppercase;margin:8px 0 6px;display:flex;align-items:center;gap:7px;}
.sec::before,.sec::after{content:'';flex:1;height:1px;background:var(--b1);}
.inv-list{display:flex;flex-direction:column;gap:6px;}

/* ═══ GUILD TAB ═══ */
#tp-guild{padding:9px 11px;display:flex;flex-direction:column;gap:8px;}
.gc{background:var(--s1);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:11px 13px;}
.gc-nm{font-family:'Cinzel',serif;font-size:1.02rem;color:var(--gold);font-weight:700;}
.gc-sub{font-size:.74rem;color:var(--txt2);margin-top:2px;}
.gc-lvbar{height:5px;background:var(--b1);border-radius:3px;margin:7px 0 3px;overflow:hidden;}
.gc-lvf{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gd3),var(--gold));}
.gc-bonus-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;}
.gc-bon{background:rgba(40,192,96,.08);border:1px solid var(--grn);border-radius:6px;
  padding:2px 8px;font-size:.65rem;font-family:'Cinzel',serif;color:var(--grn2);}
.mem-r{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b1);font-size:.8rem;}
.mem-r:last-child{border:none}.mem-n{color:var(--wht)}.mem-i{color:var(--txt2);font-size:.7rem;}
.gl-list{display:flex;flex-direction:column;gap:6px;}
.gli{background:var(--s2);border:1px solid var(--b1);border-radius:8px;padding:10px 12px;
  display:flex;align-items:center;gap:9px;cursor:pointer;transition:.15s;}
.gli:hover{border-color:var(--gold);}
.gli-i{flex:1;}.gli-nm{font-family:'Cinzel',serif;font-size:.84rem;color:var(--wht);}
.gli-m{font-size:.68rem;color:var(--txt2);margin-top:2px;}
.gli-tag{font-family:'Cinzel',serif;font-size:.62rem;color:var(--gold);padding:2px 7px;border:1px solid var(--gd3);border-radius:9px;}

/* ═══ LEADERBOARD TAB ═══ */
#tp-lb{padding:9px 11px;}
.lb-tabs{display:flex;gap:5px;margin-bottom:9px;overflow-x:auto;}
.lb-tabs::-webkit-scrollbar{display:none;}
.lt-btn{flex-shrink:0;padding:5px 11px;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:2px;
  text-transform:uppercase;background:var(--s2);border:1px solid var(--b1);border-radius:16px;cursor:pointer;color:var(--txt2);transition:.15s;}
.lt-btn.active{border-color:var(--gold);color:var(--gold);}
.lbe{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--s1);
  border:1px solid var(--b1);border-radius:8px;margin-bottom:5px;}
.lbe.me{border-color:var(--gold);background:rgba(200,160,32,.05);}
.lb-pos{width:22px;font-family:'Cinzel',serif;font-size:.76rem;color:var(--txt2);flex-shrink:0;}
.lb-pos.p1{color:#FFD700}.lb-pos.p2{color:#C0C0C0}.lb-pos.p3{color:#CD7F32}
.lb-pn{flex:1;font-family:'Cinzel',serif;font-size:.8rem;color:var(--wht);}
.lb-vl{font-family:'Cinzel',serif;font-size:.8rem;color:var(--gold);font-weight:700;}

/* ═══ DEATH ═══ */
#sc-death{align-items:center;justify-content:center;gap:10px;padding:24px 18px;text-align:center;overflow-y:auto;width:100%;}
.d-skull{font-size:4.2rem;animation:sk 3s ease-in-out infinite;}
@keyframes sk{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.d-ttl{font-family:'Cinzel Decorative',serif;font-size:1.9rem;color:var(--red2);}
.d-sub{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:5px;color:var(--txt2);text-transform:uppercase;}
.d-card{background:var(--s1);border:1px solid rgba(212,160,23,.25);border-radius:11px;padding:16px;max-width:280px;width:100%;}
.d-r{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--b1);font-size:.84rem;}
.d-r:last-child{border:none}.d-l{color:var(--txt2);font-family:'Cinzel',serif;font-size:.7rem;}
.d-v{color:var(--gold);font-family:'Cinzel',serif;font-weight:700;}

/* MODALS */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:600;align-items:center;justify-content:center;padding:8px;}
.ov.open{display:flex;}
.modal{background:var(--s1);border:1px solid rgba(212,160,23,.25);border-radius:13px;padding:16px;max-width:380px;width:100%;animation:mi .26s ease;max-height:90dvh;overflow-y:auto;}
@keyframes mi{from{opacity:0;transform:scale(.88)translateY(14px)}to{opacity:1;transform:scale(1)translateY(0)}}
.modal h2{font-family:'Cinzel',serif;color:var(--gold);margin-bottom:14px;font-size:1.1rem;}
.modal h3{font-family:'Cinzel',serif;color:var(--txt2);font-size:.65rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:9px;}
.fi{width:100%;background:var(--s2);border:1px solid rgba(212,160,23,.25);border-radius:7px;
  padding:9px 12px;color:var(--wht);font-family:'Crimson Pro',serif;font-size:.95rem;
  margin-bottom:10px;outline:none;transition:.15s;}
.fi:focus{border-color:var(--gold);}
.cls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:13px;}
.cls-c{background:var(--s2);border:1px solid var(--b1);border-radius:8px;padding:10px 6px;
  text-align:center;cursor:pointer;transition:.15s;}
.cls-c:hover{border-color:var(--gold);}.cls-c.sel{border-color:var(--gold);background:rgba(200,160,32,.1);}
.cls-c.cls-locked{opacity:.55;filter:grayscale(.6);cursor:not-allowed;border-color:rgba(255,255,255,.08);}
.cls-c.cls-locked:hover{border-color:rgba(255,100,100,.4);filter:grayscale(.3);}
.cls-c.cls-locked .ci{filter:grayscale(1);}
.cls-lock-badge{color:#ff6edf!important;font-style:italic;}
.cls-c.cls-unlocked{border-color:#ff6edf55;animation:secretUnlock .6s ease;}
@keyframes secretUnlock{0%{box-shadow:0 0 0 0 #ff6edf;}50%{box-shadow:0 0 18px 6px #ff6edf88;}100%{box-shadow:none;}}
.cls-c .ci{font-size:1.4rem;margin-bottom:3px;}
.cls-c .cn{font-family:'Cinzel',serif;font-size:.66rem;color:var(--wht);}
.cls-c .cs{font-size:.56rem;color:var(--txt2);margin-top:2px;line-height:1.35;}
.row-b{display:flex;gap:7px;}.row-b .btn{flex:1;}

/* NOTIF */
.notif{display:none;position:fixed;top:11px;left:50%;transform:translateX(-50%);z-index:700;
  background:var(--s1);border:1px solid rgba(212,160,23,.25);border-radius:10px;padding:10px 14px;
  max-width:350px;width:90%;box-shadow:0 4px 20px rgba(0,0,0,.8);animation:ni .28s ease;}
.notif.show{display:flex;gap:8px;align-items:flex-start;}
@keyframes ni{from{opacity:0;transform:translateX(-50%)translateY(-12px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}
.notif.n-rare{border-color:var(--legendary);}.notif.n-danger{border-color:var(--mythic);}.notif.n-info{border-color:var(--blu2);}
.n-ic{font-size:1.15rem;flex-shrink:0;}.n-t{font-family:'Cinzel',serif;font-size:.76rem;color:var(--wht);font-weight:700;}
.n-m{font-size:.72rem;color:var(--txt2);margin-top:1px;}

.lvup-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--b1);font-size:.9rem;}
.lvup-row:last-child{border:none}
.lvup-label{color:var(--txt2);font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:1px;}
.lvup-val{font-family:'Cinzel',serif;font-weight:700;font-size:1rem;}

/* ═══ STAT ALLOCATION ═══ */
.stat-alloc{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0;}
.sa-btn{background:var(--s2);border:1px solid rgba(212,160,23,.25);border-radius:9px;padding:9px 6px 7px;
  cursor:pointer;text-align:center;transition:.15s;display:flex;flex-direction:column;gap:3px;align-items:center;}
.sa-btn:hover{border-color:var(--gold);background:rgba(200,160,32,.08);}
.sa-btn.maxed{opacity:.4;pointer-events:none;}
.sa-icon{font-size:1.3rem;line-height:1;}
.sa-nm{font-family:'Cinzel',serif;font-size:.65rem;color:var(--wht);font-weight:700;}
.sa-val{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold);}
.pts-left{font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:2px;text-align:center;
  color:var(--pur2);padding:5px;border:1px solid rgba(212,160,23,.25);border-radius:7px;margin-bottom:8px;}

/* ═══ SKILL CARDS ═══ */
.skill-choice-grid{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.skill-card{background:var(--s2);border:1.5px solid var(--b2);border-radius:10px;padding:12px 13px;
  cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:12px;}
.skill-card:hover{border-color:var(--pur2);background:rgba(152,72,240,.1);transform:translateY(-1px);}
.sk-c-icon{font-size:1.6rem;flex-shrink:0;}
.sk-c-body{flex:1;}
.sk-c-nm{font-family:'Cinzel',serif;font-size:.88rem;color:var(--wht);font-weight:700;}
.sk-c-ds{font-size:.76rem;color:var(--txt2);margin-top:3px;line-height:1.4;}
.sk-c-badge{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:2px;padding:2px 8px;
  border-radius:8px;border:1px solid var(--pur2);color:var(--pur2);align-self:flex-start;flex-shrink:0;}

/* ═══ TARGET SELECTION ═══ */
.target-grid{display:flex;flex-direction:column;gap:5px;}
.target-card{background:var(--s2);border:1.5px solid var(--b1);border-radius:8px;
  padding:8px 10px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:9px;}
.target-card:hover{border-color:var(--gold);}
.target-card.active-target{border-color:var(--red2);background:rgba(232,72,72,.08);}
.tc-icon{font-size:1.1rem;flex-shrink:0;}
.tc-info{flex:1;min-width:0;}
.tc-nm{font-family:'Cinzel',serif;font-size:.8rem;color:var(--wht);font-weight:700;}
.tc-hpb{height:5px;background:var(--b1);border-radius:3px;margin-top:3px;overflow:hidden;}
.tc-hpf{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--red2));}
.tc-stats{font-size:.65rem;color:var(--txt2);}
.tc-badge{font-size:.6rem;padding:2px 6px;border-radius:6px;font-family:'Cinzel',serif;
  border:1px solid var(--red2);color:var(--red2);flex-shrink:0;}

/* ═══ PUSH YOUR LUCK ═══ */
.pyl-wrap{background:rgba(6,4,14,.88);border:1.5px solid var(--gd3);border-radius:10px;
  padding:11px 13px;margin-top:5px;animation:cdin .3s ease;backdrop-filter:blur(6px);}
.pyl-title{font-family:'Cinzel',serif;font-size:.76rem;letter-spacing:2px;color:var(--gold2);
  text-transform:uppercase;margin-bottom:5px;}
.pyl-desc{font-size:.82rem;color:var(--txt);margin-bottom:9px;line-height:1.4;}
.pyl-die-zone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;}

/* Passive skill badges in stats */
.passive-skills-grid{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.psb{background:rgba(152,72,240,.1);border:1px solid var(--pur);border-radius:8px;
  padding:5px 9px;font-size:.72rem;display:flex;align-items:center;gap:5px;}
.psb-icon{font-size:1rem;line-height:1;}
.psb-nm{font-family:'Cinzel',serif;font-size:.65rem;color:var(--pur2);}

/* UTIL */
.c-g{color:var(--gold)}.c-r{color:var(--red2)}.c-gr{color:var(--grn2)}.c-b{color:var(--blu2)}.c-p{color:var(--pur2)}
.c-co{color:var(--common)}.c-ra{color:var(--rare)}.c-ep{color:var(--epic)}.c-le{color:var(--legendary)}.c-my{color:var(--mythic)}
.mt8{margin-top:8px;}.mt6{margin-top:6px;}.center{text-align:center;}.divider{height:1px;background:var(--b1);margin:7px 0;}

/* ═══ DROP RATES PANEL ═══ */
.drop-panel{background:rgba(6,4,14,.82);border:1px solid rgba(212,160,23,.25);border-radius:9px;overflow:hidden;backdrop-filter:blur(4px);}
.dp-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;cursor:pointer;user-select:none;}
.dp-toggle:hover{background:rgba(255,255,255,.03);}
.dp-t{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:2px;color:var(--txt);text-transform:uppercase;}
.dp-body{padding:8px 11px 10px;}
.dp-section{margin-bottom:8px;}
.dp-section:last-child{margin:0;}
.dp-sh{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:2px;color:var(--gold);text-transform:uppercase;
  margin-bottom:5px;padding-bottom:3px;border-bottom:1px solid var(--b1);}
.dp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;}
.dp-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;
  background:var(--s2);border:1px solid var(--b1);border-radius:6px;}
.dp-rar{font-size:.52rem;font-family:'Cinzel',serif;font-weight:700;text-align:center;line-height:1;}
.dp-pct{font-size:.65rem;font-family:'Cinzel',serif;color:var(--wht);font-weight:700;}

/* ── Active skill combat buttons ── */
.active-skills-row{display:flex;gap:5px;flex-wrap:wrap;}
.ask-btn{flex:1;min-width:80px;background:var(--s2);border:1px solid rgba(212,160,23,.25);border-radius:8px;
  padding:6px 5px;cursor:pointer;text-align:center;transition:all .15s;position:relative;}
.ask-btn:hover{border-color:var(--pur2);background:rgba(152,72,240,.08);}
.ask-btn.on-cd{opacity:.38;pointer-events:none;}
.ask-btn-icon{font-size:1.1rem;}
.ask-btn-nm{font-family:'Cinzel',serif;font-size:.58rem;color:var(--txt1);margin-top:2px;line-height:1.2;}
.ask-btn-cd{font-size:.55rem;color:var(--red2);margin-top:1px;}
.ask-btn-rdy{font-size:.55rem;color:var(--grn2);margin-top:1px;}
.ask-row-label{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:2px;color:var(--pur2);
  text-transform:uppercase;margin-bottom:4px;}

/* ── Buff tooltip ── */
#buff-tooltip{position:fixed;left:50%;transform:translateX(-50%);
  z-index:850;background:var(--s1);border:1px solid rgba(212,160,23,.25);border-radius:10px;
  padding:10px 13px;min-width:240px;max-width:320px;max-height:70vh;overflow-y:auto;
  box-shadow:0 4px 20px rgba(0,0,0,.8);display:none;}
.bt-title{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:2px;color:var(--gold);
  margin-bottom:8px;border-bottom:1px solid var(--b1);padding-bottom:5px;}
.bt-row{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:.72rem;color:var(--txt1);}
.bt-icon{font-size:.9rem;width:18px;text-align:center;}
.bt-close{position:absolute;top:7px;right:10px;cursor:pointer;color:var(--txt2);font-size:.8rem;}
/* ═══ SLASH EFFECT ═══ */
#slash-overlay{
  position:fixed;inset:0;z-index:99998;pointer-events:none;overflow:hidden;
}
.slash-img{
  position:absolute;
  left:50%;
  top:28%;
  transform:translate(-50%,-50%) rotate(var(--slash-angle,0deg));
  width:min(55vw, 280px);
  image-rendering:auto;
  animation:slashImgAnim 0.4s ease-out forwards;
  mix-blend-mode:screen;
}
@keyframes slashImgAnim{
  0%  {opacity:0;transform:translate(-50%,-50%) rotate(var(--slash-angle,0deg)) scale(0.5);}
  18% {opacity:1;transform:translate(-50%,-50%) rotate(var(--slash-angle,0deg)) scale(1.0);}
  55% {opacity:0.8;}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--slash-angle,0deg)) scale(1.08);}
}

/* ═══ SHIELD EFFECT ═══ */
.shield-img{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%);
  width:min(60vw, 300px);
  image-rendering:auto;
  animation:shieldImgAnim 1.4s ease-out forwards;
  mix-blend-mode:screen;
  z-index:999999 !important;
  pointer-events:none;
}
@keyframes shieldImgAnim{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0.4);}
  15% {opacity:1;transform:translate(-50%,-50%) scale(1.08);}
  60% {opacity:1;transform:translate(-50%,-50%) scale(1.0);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(0.97);}
}

/* ═══ ENEMY/PLAYER CARD SHAKE ═══ */
@keyframes enemyShake{
  0%  {transform:translateX(0);}
  18% {transform:translateX(-5px);}
  36% {transform:translateX(5px);}
  54% {transform:translateX(-4px);}
  72% {transform:translateX(3px);}
  88% {transform:translateX(-2px);}
  100%{transform:translateX(0);}
}
.enemy-shake{
  animation:enemyShake 0.32s ease-out forwards;
}
/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width:480px){
  .screen{max-width:100%!important;}
  .bnav{max-width:100%!important;}
  .zone-bg-layer,#zone-fixed-bg{max-width:100%!important;}
  #sc-title{padding:0 12px 18px;}
  #title-logo-img{max-height:220px;}
  .subtitle-wrapper{margin-top:10px;margin-bottom:10px;}
  .dice-deco{margin:0 0 12px 0;}
  .title-lb{padding:14px 14px 12px;max-width:320px;margin-bottom:12px;}
  #title-btn-zone{gap:10px!important;}
  /* Bouton musique plus bas sur mobile */
  /* settings overlay handled via JS */
  /* Dé plus grand sur mobile */
  .cbt-big-die{width:50px!important;height:50px!important;}
  .cbt-die-num{font-size:1.4rem!important;}
  /* Combat compact sur mobile */
  .cbt-card{padding:5px 8px!important;}
  .cbt-card .enemy-icon{font-size:2rem!important;}
  .cbt-card .enemy-name{font-size:.8rem!important;}
  .cbt-card .enemy-hp-txt{font-size:.72rem!important;}
  .act-btn{padding:5px 5px 4px!important;min-height:0!important;}
  .act-btn .ai{font-size:1.1rem!important;}
  .act-btn .an{font-size:.72rem!important;}
  .act-btn .ad{font-size:.62rem!important;}
  .act-btn .acd{font-size:.58rem!important;}
  .ev-card{padding:8px 10px!important;}
  .choose-label{font-size:.55rem!important;padding:3px 0!important;}
}
@media (max-width:430px){
  body{font-size:16px;}
  .modal{padding:14px;}
  .btn{padding:11px 18px;font-size:.82rem;}
}
@media (max-height:750px),(max-width:400px){
  #sc-title{padding:0 10px 14px;}
  #title-logo-img{max-height:185px;}
  .subtitle-wrapper{margin-top:8px;margin-bottom:8px;}
  .dice-deco{margin:0 0 10px 0;}
  .dd{width:48px;height:48px;}
  .dd svg{width:28px;height:28px;}
  .title-lb{padding:12px 12px 10px;max-width:300px;margin-bottom:10px;}
  #ov-ng .modal{padding:12px 12px 14px;}
  #ov-ng h2{font-size:1rem;margin-bottom:6px;}
  #ov-ng h3{font-size:.7rem;margin-bottom:5px;}
  .cls-grid{gap:5px;margin-bottom:8px;}
  .cls-c{padding:6px 4px;}
  .cls-c .ci{font-size:1.1rem;margin-bottom:1px;}
  .cls-c .cn{font-size:.58rem;}
  .cls-c .cs{font-size:.5rem;margin-top:1px;}
  #ov-ng .btn{padding:9px 12px;font-size:.78rem;}
  #ov-ng .fi{padding:8px 10px;margin-bottom:8px;}
}

/* ═══════════════════════════════════════════
   AUTEL DES ÂMES — GACHA SYSTEM
═══════════════════════════════════════════ */
#sc-altar{min-height:100vh;position:relative;z-index:2;background:var(--bg);display:none;flex-direction:column;overflow:visible;}
#sc-altar.active{display:flex;}
.soul-chip{display:inline-flex;align-items:center;gap:6px;font-family:'Cinzel',serif;font-size:.8rem;font-weight:700;color:#c084fc;letter-spacing:1px;background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.35);border-radius:20px;padding:4px 12px;}
.altar-invoke-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:10px;cursor:pointer;font-family:'Cinzel',serif;transition:all .2s;border:1.5px solid rgba(192,132,252,.45);background:rgba(192,132,252,.08);color:#c084fc;}
.altar-invoke-btn:hover{background:rgba(192,132,252,.18);box-shadow:0 0 18px rgba(192,132,252,.3);transform:translateY(-2px);}
.altar-invoke-btn.disabled{opacity:.35;pointer-events:none;}
.altar-invoke-btn .aib-title{font-size:.85rem;font-weight:700;letter-spacing:2px;}
.altar-invoke-btn .aib-cost{font-size:.72rem;color:rgba(192,132,252,.75);}
.altar-invoke-btn .aib-guarantee{font-size:.58rem;color:var(--gold);margin-top:1px;}
.soul-pack{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid rgba(192,132,252,.2);cursor:pointer;transition:all .18s;margin-bottom:6px;}
.soul-pack:hover{background:rgba(192,132,252,.1);border-color:rgba(192,132,252,.5);}
.soul-pack .sp-souls{font-family:'Cinzel',serif;font-size:.92rem;color:#c084fc;font-weight:700;}
.soul-pack .sp-bonus{font-size:.62rem;color:var(--gold);margin-top:1px;}
.soul-pack .sp-price{font-family:'Cinzel',serif;font-size:.88rem;color:var(--wht);font-weight:700;}
.meta-relic-card{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--b1);margin-bottom:5px;}
.meta-relic-card .mr-ico{font-size:1.5rem;flex-shrink:0;}
.meta-relic-card .mr-name{font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;}
.meta-relic-card .mr-eff{font-size:.67rem;color:var(--txt2);margin-top:2px;line-height:1.4;}
.meta-relic-card .mr-stack{font-family:'Cinzel',serif;font-size:.6rem;padding:2px 6px;border-radius:8px;border:1px solid;margin-left:auto;flex-shrink:0;white-space:nowrap;}
#gacha-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(4,2,10,.97);flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 16px;overflow:hidden;}
#gacha-overlay.open{display:flex;}
@keyframes soulFloat{0%{transform:translateY(0) scale(1);opacity:1;}100%{transform:translateY(-130px) scale(0);opacity:0;}}
.soul-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#c084fc;pointer-events:none;animation:soulFloat 1.4s ease-out forwards;}
@keyframes orbPulse{0%,100%{box-shadow:0 0 30px 10px rgba(192,132,252,.5),0 0 80px 30px rgba(192,132,252,.2);}50%{box-shadow:0 0 60px 20px rgba(192,132,252,.9),0 0 140px 60px rgba(192,132,252,.4);}}
@keyframes orbSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes orbShatter{0%{transform:scale(1);opacity:1;}40%{transform:scale(1.4);opacity:.8;}100%{transform:scale(0);opacity:0;}}
#gacha-orb{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#e9d5ff,#a855f7 45%,#581c87);box-shadow:0 0 40px 14px rgba(192,132,252,.6);animation:orbPulse 2s ease-in-out infinite;cursor:pointer;position:relative;overflow:hidden;flex-shrink:0;transition:transform .15s;}
#gacha-orb:hover{transform:scale(1.06);}
#gacha-orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0deg,rgba(255,255,255,.15) 90deg,transparent 180deg);animation:orbSpin 3s linear infinite;}
@keyframes cardReveal{0%{transform:scale(.35) rotateY(90deg);opacity:0;}65%{transform:scale(1.08) rotateY(-6deg);opacity:1;}100%{transform:scale(1) rotateY(0deg);opacity:1;}}
@keyframes cardShine{0%{left:-120%;}100%{left:160%;}}
.gacha-card{width:min(270px,78vw);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden;animation:cardReveal .65s cubic-bezier(.34,1.56,.64,1) forwards;}
.gacha-card::before{content:'';position:absolute;top:0;left:-120%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:cardShine 1s ease .55s forwards;}
.gacha-card .gc-ico{font-size:3.4rem;line-height:1;}
.gacha-card .gc-rarity{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:5px;text-transform:uppercase;opacity:.85;}
.gacha-card .gc-name{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;text-align:center;}
.gacha-card .gc-effect{font-size:.78rem;color:var(--txt);text-align:center;line-height:1.55;max-width:220px;}
.gacha-card .gc-new{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:3px;padding:3px 10px;border-radius:10px;border:1px solid var(--gold);color:var(--gold);background:rgba(212,160,23,.1);}
#gacha-multi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:100%;max-width:380px;}
.gacha-mini{border-radius:8px;padding:8px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;overflow:hidden;opacity:1;}
.gacha-mini::before{content:'';position:absolute;top:0;left:-120%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:cardShine .7s ease forwards;}
.gacha-mini .gm-ico{font-size:1.5rem;line-height:1;}
.gacha-mini .gm-name{font-family:'Cinzel',serif;font-size:.48rem;text-align:center;line-height:1.2;}
.pity-wrap{width:100%;max-width:340px;padding:0 4px;}
.pity-bar{height:4px;background:var(--b1);border-radius:3px;overflow:hidden;margin-top:4px;}
.pity-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#7c3aed,#c084fc);transition:width .5s;}
.daily-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.03);border:1px solid var(--b1);border-radius:8px;margin-bottom:5px;}
.daily-row.done{opacity:.4;}
.dr-ico{font-size:1.15rem;flex-shrink:0;}
.dr-inf{flex:1;}
.dr-name{font-family:'Cinzel',serif;font-size:.74rem;color:var(--wht);}
.dr-desc{font-size:.64rem;color:var(--txt2);margin-top:1px;}
.dr-reward{font-family:'Cinzel',serif;font-size:.65rem;color:#c084fc;white-space:nowrap;}
.altar-tabs{display:flex;gap:4px;padding:8px 12px 0;flex-shrink:0;}
.altar-tab{flex:1;padding:7px 4px;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:2px;text-transform:uppercase;background:var(--s2);border:1px solid var(--b1);border-radius:8px 8px 0 0;cursor:pointer;color:var(--txt2);transition:.15s;text-align:center;}
.altar-tab.active{border-color:rgba(192,132,252,.5);color:#c084fc;background:rgba(192,132,252,.08);border-bottom-color:var(--bg);}
/* ═══ COMPAGNON DE COMBAT ═══ */
.summoned-card{
  background:rgba(6,4,14,.92);border:1.5px solid rgba(160,100,255,.5);
  border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:10px;
  backdrop-filter:blur(4px);position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.summoned-card::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(192,132,252,.06) 0%,transparent 60%);pointer-events:none;}
.summoned-card.acting{border-color:#c084fc;box-shadow:0 0 18px rgba(192,132,252,.5),inset 0 0 12px rgba(192,132,252,.08);animation:cmpPulse .6s ease-in-out;}
.summoned-card .sc-ico{font-size:2rem;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(192,132,252,.7));animation:cmpFloat 3s ease-in-out infinite;}
.summoned-card.acting .sc-ico{animation:cmpAttack .5s ease-out forwards;}
.summoned-card .sc-name{font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;color:#c084fc;}
.summoned-card .sc-hp{font-size:.64rem;color:var(--txt2);margin-top:1px;min-height:13px;}
.summoned-card .sc-hpbar{height:3px;background:var(--b1);border-radius:2px;margin-top:3px;}
.summoned-card .sc-hpf{height:100%;border-radius:2px;background:linear-gradient(90deg,#7c3aed,#c084fc);transition:width .4s;}
.summoned-card .sc-badge{font-family:'Cinzel',serif;font-size:.55rem;padding:2px 7px;border-radius:8px;border:1px solid rgba(192,132,252,.4);color:#c084fc;white-space:nowrap;flex-shrink:0;}
.companion-card{
  background:rgba(6,4,14,.92);border:1.5px solid rgba(192,132,252,.4);
  border-radius:9px;padding:7px 10px;
  display:flex;align-items:center;gap:10px;
  backdrop-filter:blur(4px);position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.companion-card.acting{
  border-color:#c084fc;
  box-shadow:0 0 18px rgba(192,132,252,.5),inset 0 0 12px rgba(192,132,252,.08);
  animation:cmpPulse .6s ease-in-out;
}
@keyframes cmpPulse{0%{transform:scale(1);}30%{transform:scale(1.03);}100%{transform:scale(1);}}
.companion-card::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(192,132,252,.06) 0%,transparent 60%);pointer-events:none;}
.cmp-ico{font-size:2rem;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(192,132,252,.7));animation:cmpFloat 3s ease-in-out infinite;}
@keyframes cmpFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.cmp-ico.acting{animation:cmpAttack .5s ease-out forwards;}
@keyframes cmpAttack{0%{transform:translateX(0) scale(1);}30%{transform:translateX(10px) scale(1.2);}65%{transform:translateX(-4px) scale(.92);}100%{transform:translateX(0) scale(1);}}
.cmp-info{flex:1;min-width:0;}
.cmp-name{font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;}
.cmp-action{font-size:.64rem;color:var(--txt2);margin-top:1px;min-height:13px;transition:color .2s;}
.cmp-action.hot{color:#c084fc;}
.cmp-badge{font-family:'Cinzel',serif;font-size:.55rem;padding:2px 7px;border-radius:8px;border:1px solid rgba(192,132,252,.4);color:rgba(192,132,252,.7);white-space:nowrap;flex-shrink:0;}
/* Sélecteur dans Collection */
.cmp-select-btn{font-family:'Cinzel',serif;font-size:.62rem;padding:5px 12px;border-radius:8px;border:1px solid rgba(192,132,252,.45);color:#c084fc;background:rgba(192,132,252,.1);cursor:pointer;transition:.15s;white-space:nowrap;}
.cmp-select-btn:hover{background:rgba(192,132,252,.22);}
.cmp-select-btn.active{background:rgba(192,132,252,.25);border-color:#c084fc;color:#e9d5ff;}

/* ═══ CARTE DE PROFIL ═══ */
#ov-profile .modal { scrollbar-width: thin; }
#profile-avatar-wrap:hover { filter: brightness(1.15); }

/* ═══ FUSION D'ITEMS ═══ */
#ov-fusion .modal { scrollbar-width: thin; }

/* ── Tutorial animations ── */
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@keyframes fadeIn {
  from { opacity:0; transform:scale(.97); }
  to   { opacity:1; transform:scale(1); }
}