:root{--bg:#060606;--panel:#171719;--panel2:#25252a;--gold:#c8a23a;--gold2:#f0d27a;--text:#f5f5f5;--muted:#b8b8b8;--line:rgba(200,162,58,.28);--red:#9e3838;--green:#55c878}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 50% -10%,rgba(200,162,58,.18),transparent 32%),linear-gradient(135deg,#050505,#121212 55%,#080808)}
#splash{position:fixed;inset:0;background:#050505;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:splashOut .9s ease 1.8s forwards}
.splash-logo{width:min(360px,70vw);filter:drop-shadow(0 0 28px rgba(200,162,58,.25));animation:pulse 1.2s infinite}
.side-logo{width:54px;height:54px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 0 10px rgba(200,162,58,.2))}
.main-logo{width:min(330px,70vw);margin:10px auto 20px;display:block;filter:drop-shadow(0 0 22px rgba(200,162,58,.22))}
.splash-sub{color:var(--muted);letter-spacing:3px}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
@keyframes pulse{50%{transform:scale(1.06);filter:drop-shadow(0 0 18px rgba(200,162,58,.45))}}
.app{display:flex;min-height:100vh}
.sidebar{width:88px;background:rgba(10,10,10,.94);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 10px;position:sticky;top:0;height:100vh}
.navbtn{width:54px;height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#252529,#151515);color:var(--text);font-size:23px;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.32);transition:.25s}
.navbtn:hover{transform:translateY(-2px)}
.navbtn.active{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#111}
.main{flex:1;padding:28px;max-width:1280px;margin:auto;width:100%}
.screen{display:none;opacity:0;transform:translateY(8px)}
.screen.active{display:block;animation:screenIn .28s ease forwards}
@keyframes screenIn{to{opacity:1;transform:translateY(0)}}
.hero{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center}
.heroCard{width:min(780px,100%);padding:42px;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at top,rgba(240,210,122,.12),transparent 35%),linear-gradient(145deg,#252529,#111);box-shadow:0 30px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05)}
h1{font-size:48px;color:var(--gold);letter-spacing:4px;margin:0;text-transform:uppercase}.h1-small{font-size:32px}.subtitle{color:var(--muted);font-style:italic;margin:12px 0 30px}
.level{font-size:76px;color:var(--gold);font-weight:900;text-shadow:0 0 28px rgba(200,162,58,.28)}
.bar{height:20px;background:#0c0c0c;border:1px solid rgba(255,255,255,.08);border-radius:30px;overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.8);margin:14px 0}
.fill{height:100%;width:0;background:linear-gradient(90deg,#9f7b22,var(--gold),var(--gold2));box-shadow:0 0 20px rgba(200,162,58,.45);transition:width .75s cubic-bezier(.2,.8,.2,1)}
.primary,.secondary,.danger{border-radius:14px;padding:14px 22px;font-weight:800;cursor:pointer;margin:8px;font-size:16px;transition:.2s}
.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#111;border:0}.primary:hover,.secondary:hover{transform:translateY(-2px)}
.secondary{background:linear-gradient(180deg,#303033,#1c1c1f);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.danger{background:linear-gradient(180deg,#b24b4b,var(--red));color:white;border:0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.card,.missionCard{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 18px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04)}
.missionCard{position:relative;overflow:hidden;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,opacity .28s ease}
.missionCard:hover{transform:translateY(-3px)}
.missionCard.done{border-color:rgba(85,200,120,.7);box-shadow:0 0 28px rgba(85,200,120,.16);animation:missionDone .45s ease}
@keyframes missionDone{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
.missionCard.done:after{content:"ACCOMPLI";position:absolute;top:14px;right:-38px;transform:rotate(35deg);background:var(--green);color:#111;font-weight:900;padding:6px 45px;font-size:12px}
h2{margin:0 0 18px;color:var(--gold2);text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--line);padding-bottom:10px}
.stat{display:flex;justify-content:space-between;gap:10px;margin:10px 0;color:var(--muted)}.stat strong{color:var(--text)}
.rank{display:inline-block;border:1px solid var(--gold);padding:6px 12px;border-radius:999px;color:var(--gold2);font-weight:bold;margin-bottom:12px}
.reward{color:var(--gold2);font-weight:bold;margin-top:8px}
input,textarea,select{width:100%;background:#101010;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;outline:none}textarea{min-height:90px}
.item{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding:13px 0;gap:12px}.locked{opacity:.42}
.trackerWheel{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.dayDot{aspect-ratio:1/1;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#111;display:flex;align-items:center;justify-content:center;font-size:12px}.dayDot.done{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#111;font-weight:bold}
.mandala{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:380px;margin:auto}.petal{aspect-ratio:1/1;border-radius:50% 8px 50% 8px;border:1px solid rgba(255,255,255,.1);background:#111;transform:rotate(45deg)}.petal.done{background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 0 18px rgba(200,162,58,.32)}
.graphBar{height:17px;background:#111;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;margin:6px 0 13px}.graphBar div{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.floatReward{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);font-size:32px;font-weight:900;color:var(--gold2);text-shadow:0 0 22px rgba(200,162,58,.45);z-index:98;opacity:0;pointer-events:none}.floatReward.show{animation:floatUp 1s ease forwards}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.9)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(1.12)}}
.toast{position:fixed;top:22px;right:22px;background:linear-gradient(145deg,#252529,#111);border:1px solid var(--line);color:var(--gold2);padding:14px 18px;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.5);opacity:0;transform:translateY(-10px);transition:.25s;z-index:99}.toast.show{opacity:1;transform:translateY(0)}
.levelOverlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;visibility:hidden;transition:.25s}.levelOverlay.show{opacity:1;visibility:visible}.levelBox{text-align:center;border:1px solid var(--gold);border-radius:24px;padding:42px 70px;background:radial-gradient(circle at top,rgba(240,210,122,.16),#101010 60%);box-shadow:0 0 80px rgba(200,162,58,.25)}.levelLabel{font-size:34px;color:var(--gold2);letter-spacing:4px}.levelNumber{font-size:60px;color:var(--gold);font-weight:900}
.mobileNav{display:none}
@media(max-width:850px){.main-logo{width:min(280px,76vw)}.app{display:block}.sidebar{display:none}.main{padding:14px;padding-bottom:86px}.mobileNav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#101010;border-top:1px solid var(--line);z-index:10;justify-content:space-around;padding:8px}.mobileNav button{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#202024;color:var(--text);font-size:20px}.mobileNav button.active{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#111}.hero{min-height:calc(100vh - 110px)}.heroCard{padding:28px 18px;border-radius:22px}h1{font-size:29px}.subtitle{font-size:14px}.level{font-size:54px}.span-4,.span-6,.span-8{grid-column:span 12}.card,.missionCard{padding:17px;border-radius:18px}.toast{left:14px;right:14px;top:14px;text-align:center}}


/* V4.1.2 — Mission Complete water-fill overlay */
.missionCompleteOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  z-index:950;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}
.missionCompleteOverlay.show{
  opacity:1;
  visibility:visible;
}
.missionCompleteBox{
  position:relative;
  width:min(520px,86vw);
  height:330px;
  border:1px solid var(--gold);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg,#151515,#080808);
  box-shadow:0 0 90px rgba(200,162,58,.22), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.waterFill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  background:linear-gradient(180deg,rgba(240,210,122,.85),rgba(200,162,58,.55));
  box-shadow:0 0 40px rgba(200,162,58,.30);
  animation:waterRise 2.2s ease forwards;
}
.waterFill:before{
  content:"";
  position:absolute;
  top:-18px;
  left:-10%;
  width:120%;
  height:36px;
  background:radial-gradient(ellipse at center,rgba(240,210,122,.55),transparent 60%);
  animation:wave 1.4s ease-in-out infinite;
}
@keyframes waterRise{
  from{height:0%}
  to{height:100%}
}
@keyframes wave{
  0%,100%{transform:translateX(-3%)}
  50%{transform:translateX(3%)}
}
.missionCompleteContent{
  position:relative;
  z-index:3;
}
.missionCompleteTitle{
  color:#111;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
  display:inline-block;
  margin-bottom:18px;
}
.missionCompleteMain{
  color:var(--gold2);
  font-size:34px;
  font-weight:900;
  letter-spacing:3px;
  text-shadow:0 0 24px rgba(200,162,58,.35);
}
.missionCompleteReward{
  color:var(--text);
  margin-top:14px;
  font-size:20px;
  font-weight:800;
}
.particle{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold2);
  opacity:.85;
  animation:particleFloat 2.2s ease-out forwards;
}
@keyframes particleFloat{
  from{transform:translateY(80px) scale(.6);opacity:0}
  20%{opacity:1}
  to{transform:translateY(-170px) scale(1.1);opacity:0}
}


/* V4.1.3 — Protocoles par période */
.periodGroup{
  background:linear-gradient(145deg,rgba(37,37,42,.92),rgba(15,15,16,.96));
}
.periodGroup h2{
  font-size:20px;
}
.periodGroup .missionCard{
  min-height:210px;
}


/* V4.1.4 — Accès du Roi */
.kingAccessBtn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  background:linear-gradient(180deg,#303033,#151515);
  color:var(--gold2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.kingModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  z-index:970;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}
.kingModal.show{opacity:1;visibility:visible}
.kingBox{
  width:min(460px,90vw);
  background:linear-gradient(145deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(200,162,58,.12);
}
.kingBox h2{margin-top:0}
.kingActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kingPanel{display:none;margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.kingPanel.show{display:block}
.small{font-size:13px}
@media(max-width:850px){
  .kingAccessBtn{bottom:78px;right:12px;font-size:12px;padding:9px 12px}
}


/* V4.1.5 — Logo bigger + nav labels */
.splash-logo{width:min(470px,82vw)}
.main-logo{width:min(430px,78vw)}
.side-logo{width:74px;height:74px;margin-bottom:18px}
.sidebar{width:116px}
.navbtn{
  width:82px;
  min-height:64px;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:23px;
  padding:8px 4px;
}
.navbtn small{
  font-size:10px;
  line-height:1;
  color:inherit;
  opacity:.9;
}
.kingBox.wrong{
  animation:wrongCode .34s ease;
  border-color:rgba(158,56,56,.85);
  box-shadow:0 0 42px rgba(158,56,56,.25),0 30px 90px rgba(0,0,0,.55);
}
@keyframes wrongCode{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}
.kingError{
  color:#ff8e8e;
  font-weight:900;
  margin-top:10px;
  display:none;
}
.kingError.show{display:block}
@media(max-width:850px){
  .sidebar{width:88px}
  .main-logo{width:min(340px,86vw)}
  .splash-logo{width:min(390px,86vw)}
  .mobileNav button small{display:none}
}


/* V4.1.6 — Sound toggle */
.soundToggleBtn{
  position:fixed;
  right:18px;
  bottom:66px;
  z-index:80;
  background:linear-gradient(180deg,#303033,#151515);
  color:var(--gold2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
@media(max-width:850px){
  .soundToggleBtn{
    bottom:122px;
    right:12px;
    font-size:12px;
    padding:9px 12px;
  }
}


/* V5.0.0 — The Player */
.onboarding{position:fixed;inset:0;z-index:2000;background:radial-gradient(circle at top,rgba(200,162,58,.15),transparent 35%),#050505;color:var(--text);display:none;align-items:center;justify-content:center;padding:24px}
.onboarding.show{display:flex}
.onboardScreen{display:none;width:min(980px,100%);text-align:center;animation:screenIn .35s ease forwards}
.onboardScreen.active{display:block}
.onboardLogo{width:min(420px,82vw);filter:drop-shadow(0 0 32px rgba(200,162,58,.35));margin-bottom:20px}
.onboardScreen h1{color:var(--gold2);text-transform:uppercase;letter-spacing:2px}
.onboardScreen p{color:var(--muted);font-size:22px;line-height:1.5}
.creatorGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.creatorPanel{text-align:left;background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:22px}
.creatorPanel label{display:block;margin:12px 0 6px;color:var(--gold2);font-weight:bold}
.avatarPreview{background:linear-gradient(145deg,#25252a,#111);border:1px solid var(--line);border-radius:26px;padding:30px}
.avatar{position:relative;width:220px;height:300px;margin:0 auto 18px;animation:avatarBreathe 2.8s ease-in-out infinite}
@keyframes avatarBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)}}
.avatarHead{position:absolute;left:65px;top:25px;width:90px;height:105px;border-radius:44% 44% 48% 48%;background:#d9a36e;border:3px solid #111;overflow:hidden;z-index:2}
.skin-light .avatarHead{background:#d9a36e}.skin-medium .avatarHead{background:#b97a50}.skin-dark .avatarHead{background:#73452f}
.avatarHair{position:absolute;top:-8px;left:0;width:100%;height:38px;background:#151515;border-radius:0 0 50% 50%}
.hair-blond .avatarHair{background:#c9a44f}.hair-bald .avatarHair{display:none}
.avatarEyes:before,.avatarEyes:after{content:"";position:absolute;top:48px;width:10px;height:7px;background:#4b2b16;border-radius:50%}
.avatarEyes:before{left:25px}.avatarEyes:after{right:25px}.eyes-blue .avatarEyes:before,.eyes-blue .avatarEyes:after{background:#477bb8}.eyes-green .avatarEyes:before,.eyes-green .avatarEyes:after{background:#438f5a}
.avatarBeard{position:absolute;left:18px;bottom:0;width:54px;height:42px;background:#151515;border-radius:0 0 40px 40px}
.beard-short .avatarBeard{height:23px}.beard-none .avatarBeard{display:none}
.avatarBody{position:absolute;left:42px;top:125px;width:136px;height:155px;background:linear-gradient(180deg,#3b3b3f,#1d1d1f);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);border:3px solid #111}
.avatarTattoo{position:absolute;top:48px;width:8px;height:42px;background:rgba(20,20,20,.7)}.avatarTattoo.left{left:18px}.avatarTattoo.right{right:18px}.tattoos-no .avatarTattoo{display:none}
.avatarName{color:var(--gold2);font-size:24px;font-weight:900;margin:12px 0}
#qgAvatarMount .avatar{transform:scale(.72);margin-bottom:-28px}
@media(max-width:850px){.creatorGrid{grid-template-columns:1fr}.onboardScreen p{font-size:18px}.avatar{width:190px;height:270px}}


/* V5.0.1 — Navigation solution B + pixel avatar */
.sidebar{
  overflow:visible;
}
.moreMenu{
  position:fixed;
  left:126px;
  top:110px;
  z-index:850;
  display:none;
  width:230px;
  background:linear-gradient(145deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.52);
}
.moreMenu.show{display:block;animation:screenIn .18s ease forwards}
.moreMenu button{
  width:100%;
  display:block;
  text-align:left;
  margin:4px 0;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  font-weight:800;
}
.moreMenu button:hover{
  border-color:var(--line);
  color:var(--gold2);
}

/* Pixel Hero */
.pixelHero{
  position:relative;
  width:168px;
  height:280px;
  margin:0 auto 18px;
  image-rendering:pixelated;
  animation:avatarBreathe 2.8s ease-in-out infinite;
}
.pixelHero .px{
  position:absolute;
  box-shadow:none;
}
.pixelHero .head{
  left:42px;top:52px;width:84px;height:76px;background:#d98d4f;
}
.skin-light .head,.skin-light .ear,.skin-light .neck,.skin-light .arm{background:#d98d4f}
.skin-medium .head,.skin-medium .ear,.skin-medium .neck,.skin-medium .arm{background:#b87546}
.skin-dark .head,.skin-dark .ear,.skin-dark .neck,.skin-dark .arm{background:#75462e}
.pixelHero .ear.left{left:28px;top:84px;width:16px;height:38px}
.pixelHero .ear.right{right:28px;top:84px;width:16px;height:38px}
.pixelHero .hair{left:20px;top:12px;width:128px;height:78px;background:#3b2623;clip-path:polygon(14% 0,86% 0,86% 22%,100% 22%,100% 70%,86% 70%,86% 100%,72% 100%,72% 78%,28% 78%,28% 100%,14% 100%,14% 70%,0 70%,0 22%,14% 22%)}
.hair-dark .hair{background:#3b2623}.hair-blond .hair{background:#c59c3b}.hair-bald .hair{display:none}
.pixelHero .eye.left{left:58px;top:88px;width:12px;height:28px;background:#2b1f1a}
.pixelHero .eye.right{right:58px;top:88px;width:12px;height:28px;background:#2b1f1a}
.eyes-blue .eye{background:#2f6ca3}.eyes-green .eye{background:#2f7c50}
.pixelHero .beard{left:58px;top:116px;width:52px;height:36px;background:#3b2623}
.beard-short .beard{height:18px;top:128px}.beard-none .beard{display:none}
.pixelHero .neck{left:70px;top:128px;width:30px;height:32px;background:#d98d4f}
.pixelHero .torso{left:35px;top:152px;width:98px;height:92px;background:#9d422c}
.pixelHero .arm.left{left:20px;top:164px;width:28px;height:84px;background:#d98d4f}
.pixelHero .arm.right{right:20px;top:164px;width:28px;height:84px;background:#d98d4f}
.pixelHero .tattoo.left{left:25px;top:182px;width:7px;height:42px;background:#1b1b1b}
.pixelHero .tattoo.right{right:25px;top:182px;width:7px;height:42px;background:#1b1b1b}
.tattoos-no .tattoo{display:none}
.pixelHero .legs{left:50px;top:244px;width:68px;height:64px;background:#243746}
.pixelHero .legGap{left:78px;top:270px;width:14px;height:40px;background:transparent}
.pixelHero .boot.left{left:42px;top:306px;width:34px;height:28px;background:#563526}
.pixelHero .boot.right{right:42px;top:306px;width:34px;height:28px;background:#563526}
.avatarPreview .pixelHero{
  transform:scale(1.1);
  margin-bottom:42px;
}
#qgAvatarMount .pixelHero{
  transform:scale(.82);
  margin-bottom:12px;
}
@media(max-width:850px){
  .moreMenu{
    left:12px;
    right:12px;
    bottom:72px;
    top:auto;
    width:auto;
  }
  .mobileNav{
    gap:4px;
  }
  .mobileNav button{
    flex:1;
  }
}


/* V5.0.2 — Character creator fixes */
.createCharacterBtn{
  width:100%;
  margin-top:22px;
  font-size:18px;
  padding:16px 20px;
  position:sticky;
  bottom:0;
  z-index:5;
  box-shadow:0 0 24px rgba(200,162,58,.25),0 12px 26px rgba(0,0,0,.45);
}
.creatorPanel{
  max-height:78vh;
  overflow:auto;
  padding-bottom:28px;
}

/* Better eyes */
.pixelHero .eye.left,
.pixelHero .eye.right{
  top:88px;
  width:14px;
  height:18px;
  border-radius:0;
  background:#3a2115;
  box-shadow:inset 0 5px 0 rgba(255,255,255,.16);
}
.pixelHero .eye.left{left:56px}
.pixelHero .eye.right{right:56px}
.eyes-blue .eye.left,
.eyes-blue .eye.right{background:#2f73b8}
.eyes-green .eye.left,
.eyes-green .eye.right{background:#2f8f5a}
.eyes-brown .eye.left,
.eyes-brown .eye.right{background:#4b2b16}

/* Better beard */
.pixelHero .beard{
  left:50px;
  top:112px;
  width:68px;
  height:48px;
  background:#3b2623;
  clip-path:polygon(0 0,100% 0,100% 58%,82% 58%,82% 100%,18% 100%,18% 58%,0 58%);
  z-index:4;
}
.beard-short .beard{
  left:52px;
  top:124px;
  width:64px;
  height:24px;
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
  z-index:4;
}
.beard-none .beard{display:none}

/* Mouth / face separation */
.pixelHero .head:after{
  content:"";
  position:absolute;
  left:36px;
  bottom:16px;
  width:20px;
  height:5px;
  background:rgba(70,35,24,.45);
}
.beard-full .head:after,
.beard-short .head:after{
  display:none;
}

/* Better tattoos: pixel bands instead of ugly lines */
.pixelHero .tattoo{
  width:18px;
  height:46px;
  background:
    linear-gradient(180deg,
      transparent 0 10%,
      rgba(20,20,20,.75) 10% 18%,
      transparent 18% 34%,
      rgba(20,20,20,.75) 34% 42%,
      transparent 42% 58%,
      rgba(20,20,20,.75) 58% 66%,
      transparent 66% 100%);
  border-radius:0;
  opacity:.85;
}
.pixelHero .tattoo.left{left:23px;top:178px}
.pixelHero .tattoo.right{right:23px;top:178px}
.tattoos-no .tattoo{display:none}

/* Cleaner body proportions */
.pixelHero .torso{
  border:0;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.18);
}
.pixelHero .arm.left,
.pixelHero .arm.right{
  height:78px;
  top:168px;
}
.pixelHero .neck{
  z-index:1;
}
.avatarPreview .pixelHero{
  margin-top:10px;
}
@media(max-width:850px){
  .creatorPanel{
    max-height:none;
    overflow:visible;
  }
  .createCharacterBtn{
    position:relative;
  }
}


/* V5.0.3 — QG avatar layout fix */
#qgAvatarMount{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:6px auto 12px;
}
#qgAvatarMount .avatarName{
  margin-top:10px;
  position:relative;
  z-index:4;
}
#qgAvatarMount .pixelHero{
  margin-bottom:18px !important;
}

/* V5.0.3 — Better pixel tattoos */
.pixelHero .tattoo{
  width:22px;
  height:54px;
  background:transparent;
  opacity:.92;
}
.pixelHero .tattoo:before,
.pixelHero .tattoo:after{
  content:"";
  position:absolute;
  background:#111;
}
.pixelHero .tattoo.left:before{
  left:4px;top:2px;width:7px;height:7px;
  box-shadow:
    7px 7px 0 #111,
    0 14px 0 #111,
    10px 22px 0 #111,
    3px 31px 0 #111,
    12px 41px 0 #111;
}
.pixelHero .tattoo.left:after{
  left:13px;top:5px;width:4px;height:4px;
  box-shadow:
    -8px 10px 0 #111,
    0 18px 0 #111,
    -6px 29px 0 #111,
    2px 39px 0 #111;
}
.pixelHero .tattoo.right:before{
  right:4px;top:2px;width:7px;height:7px;
  box-shadow:
    -7px 7px 0 #111,
    0 14px 0 #111,
    -10px 22px 0 #111,
    -3px 31px 0 #111,
    -12px 41px 0 #111;
}
.pixelHero .tattoo.right:after{
  right:13px;top:5px;width:4px;height:4px;
  box-shadow:
    8px 10px 0 #111,
    0 18px 0 #111,
    6px 29px 0 #111,
    -2px 39px 0 #111;
}
.pixelHero .tattoo.left{left:21px;top:176px}
.pixelHero .tattoo.right{right:21px;top:176px}
.tattoos-no .tattoo,
.tattoos-no .tattoo:before,
.tattoos-no .tattoo:after{display:none}


/* V5.0.6 — Emergency rollback stable + safe visual fixes */

/* Color skin applies correctly to face / ears / neck / arms */
.skin-light .head,.skin-light .ear,.skin-light .neck,.skin-light .arm{background:#d98d4f !important}
.skin-medium .head,.skin-medium .ear,.skin-medium .neck,.skin-medium .arm{background:#b87546 !important}
.skin-dark .head,.skin-dark .ear,.skin-dark .neck,.skin-dark .arm{background:#75462e !important}

/* Better female visual WITHOUT touching JS */
.gender-female .hair{
  height:100px;
  top:10px;
  clip-path:polygon(10% 0,90% 0,90% 20%,100% 20%,100% 85%,84% 85%,84% 100%,68% 100%,68% 78%,32% 78%,32% 100%,16% 100%,16% 85%,0 85%,0 20%,10% 20%);
}
.gender-female .torso{
  left:42px;
  width:84px;
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
}
.gender-female .arm.left{left:25px}
.gender-female .arm.right{right:25px}
.gender-female .beard{display:none !important}


/* V5.0.7 — Homme/Femme + barbe stable */
.skin-light .head,.skin-light .ear,.skin-light .neck,.skin-light .arm{background:#d98d4f !important}
.skin-medium .head,.skin-medium .ear,.skin-medium .neck,.skin-medium .arm{background:#b87546 !important}
.skin-dark .head,.skin-dark .ear,.skin-dark .neck,.skin-dark .arm{background:#75462e !important}

.beard-dark .beard{background:#3b2623 !important}
.beard-blond .beard{background:#c59c3b !important}
.beard-red .beard{background:#8f3f27 !important}
.beard-grey .beard{background:#777 !important}

/* Femme : cheveux longs + barbe supprimée */
.gender-female .hair{
  display:block !important;
  height:112px !important;
  top:4px !important;
  left:16px !important;
  width:136px !important;
  clip-path:polygon(12% 0,88% 0,88% 18%,100% 18%,100% 92%,82% 92%,82% 100%,66% 100%,66% 80%,34% 80%,34% 100%,18% 100%,18% 92%,0 92%,0 18%,12% 18%) !important;
}
.gender-female .beard{display:none !important}
.gender-female .torso{
  left:42px !important;
  width:84px !important;
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%) !important;
}
.gender-female .arm.left{left:25px !important}
.gender-female .arm.right{right:25px !important}


/* V5.2.0 — Ordres du Jour + missions une par une */
.ordersGreeting{color:var(--gold2);font-size:26px;font-weight:900;margin:12px 0 8px;letter-spacing:1px}
.ordersBriefing{margin:22px 0;border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.orderLine{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--muted)}
.orderLine:last-child{border-bottom:0}
.orderLine strong{color:var(--gold2);text-align:right}
.currentMissionCard{background:radial-gradient(circle at top,rgba(240,210,122,.13),transparent 34%),linear-gradient(145deg,#2c2c31,#121214);border:1px solid rgba(200,162,58,.44);border-radius:28px;padding:30px;text-align:center;box-shadow:0 26px 70px rgba(0,0,0,.52),0 0 44px rgba(200,162,58,.10);animation:screenIn .28s ease forwards}
.currentMissionCard .missionPeriod{display:inline-block;border:1px solid var(--gold);color:var(--gold2);padding:7px 14px;border-radius:999px;font-weight:900;margin-bottom:16px}
.currentMissionCard h2{border:0;font-size:28px;margin-bottom:10px}
.currentMissionCard p{color:var(--muted);font-size:17px;line-height:1.45}
.currentMissionReward{color:var(--gold2);font-size:20px;font-weight:900;margin:18px 0}
.missionQueue .missionCard{opacity:.55}
.missionQueue .missionCard:first-child{opacity:.78}
@media(max-width:850px){.ordersGreeting{font-size:21px}.orderLine{font-size:14px}.currentMissionCard{padding:22px 16px}.currentMissionCard h2{font-size:23px}}


/* V5.3.0 — Le Compagnon */
.companionBubble{
  position:relative;
  max-width:520px;
  margin:10px auto 18px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(37,37,42,.95),rgba(15,15,16,.97));
  color:var(--gold2);
  font-weight:800;
  line-height:1.35;
  box-shadow:0 16px 42px rgba(0,0,0,.38),0 0 28px rgba(200,162,58,.08);
  opacity:0;
  transform:translateY(6px);
  animation:companionIn .45s ease forwards;
}
.companionBubble:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%) rotate(45deg);
  width:18px;
  height:18px;
  background:rgba(20,20,22,.98);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@keyframes companionIn{
  to{opacity:1;transform:translateY(0)}
}
.currentMissionCard .companionMini{
  margin:0 auto 18px;
  max-width:520px;
  color:var(--gold2);
  font-weight:800;
  opacity:.95;
}
.dialoguePulse{
  animation:dialoguePulse .45s ease;
}
@keyframes dialoguePulse{
  0%{transform:scale(.98);opacity:.45}
  100%{transform:scale(1);opacity:1}
}


/* V5.3.1 — Companion always visible */
.globalCompanion{
  position:fixed;
  top:18px;
  right:18px;
  z-index:820;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(430px,46vw);
  cursor:pointer;
}
.globalAvatarMini{
  width:74px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#25252a,#111);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 20px rgba(200,162,58,.08);
  overflow:hidden;
}
.globalAvatarMini .pixelHero{
  transform:scale(.28);
  margin:0;
  width:168px;
  height:280px;
}
.globalAvatarMini .avatarName{
  display:none;
}
.globalDialogue{
  position:relative;
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(37,37,42,.96),rgba(15,15,16,.98));
  color:var(--gold2);
  font-weight:900;
  line-height:1.25;
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 22px rgba(200,162,58,.08);
  opacity:.96;
  font-size:14px;
}
.globalDialogue:before{
  content:"";
  position:absolute;
  right:100%;
  top:26px;
  width:14px;
  height:14px;
  background:rgba(20,20,22,.98);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:translateX(7px) rotate(45deg);
}
.globalDialogue.speak{
  animation:dialoguePulse .38s ease;
}
@media(max-width:850px){
  .globalCompanion{
    top:10px;
    right:10px;
    max-width:74vw;
  }
  .globalAvatarMini{
    width:54px;
    height:64px;
    border-radius:14px;
  }
  .globalAvatarMini .pixelHero{
    transform:scale(.20);
  }
  .globalDialogue{
    font-size:12px;
    padding:9px 11px;
    max-width:230px;
  }
}


/* V5.3.2 — Companion correction */
.globalCompanion{
  position:fixed !important;
  top:92px !important;
  right:24px !important;
  z-index:820 !important;
  display:flex !important;
  flex-direction:row-reverse !important;
  align-items:flex-start !important;
  gap:14px !important;
  max-width:min(520px,52vw) !important;
  cursor:default !important;
  pointer-events:none !important;
}
body.qg-active .globalCompanion{
  display:none !important;
}
.globalAvatarMini{
  width:112px !important;
  height:220px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:block !important;
  transform-origin:bottom center;
  animation:companionIdle 3.8s ease-in-out infinite !important;
}
.globalAvatarMini .pixelHero{
  transform:scale(.62) !important;
  margin:0 !important;
  transform-origin:top center !important;
}
.globalAvatarMini .avatarName{
  display:none !important;
}
.globalDialogue{
  position:relative !important;
  max-width:380px !important;
  margin-top:18px !important;
  padding:14px 18px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,rgba(37,37,42,.98),rgba(15,15,16,.98)) !important;
  color:var(--gold2) !important;
  font-weight:900 !important;
  line-height:1.32 !important;
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 22px rgba(200,162,58,.08) !important;
  opacity:.97 !important;
  font-size:15px !important;
  pointer-events:none !important;
}
.globalDialogue:before{
  content:"" !important;
  position:absolute !important;
  left:100% !important;
  right:auto !important;
  top:26px !important;
  width:14px !important;
  height:14px !important;
  background:rgba(20,20,22,.98) !important;
  border-right:1px solid var(--line) !important;
  border-top:1px solid var(--line) !important;
  border-left:0 !important;
  border-bottom:0 !important;
  transform:translateX(-7px) rotate(45deg) !important;
}
@keyframes companionIdle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.qgHeroDialogue{
  position:relative;
  max-width:520px;
  margin:6px auto 18px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(37,37,42,.96),rgba(15,15,16,.98));
  color:var(--gold2);
  font-weight:900;
  line-height:1.35;
  box-shadow:0 16px 42px rgba(0,0,0,.38),0 0 28px rgba(200,162,58,.08);
  animation:companionIn .45s ease forwards;
}
.qgHeroDialogue:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%) rotate(45deg);
  width:18px;
  height:18px;
  background:rgba(20,20,22,.98);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.qgHeroDialogue.speak{
  animation:dialoguePulse .38s ease;
}

@media(max-width:850px){
  .globalCompanion{
    top:74px !important;
    right:10px !important;
    max-width:82vw !important;
    gap:8px !important;
  }
  .globalAvatarMini{
    width:66px !important;
    height:135px !important;
  }
  .globalAvatarMini .pixelHero{
    transform:scale(.38) !important;
  }
  .globalDialogue{
    max-width:230px !important;
    font-size:12px !important;
    padding:10px 12px !important;
  }
}

#qg .companionBubble{display:none !important}


/* V5.3.3 — Companion placement + music button */
.globalCompanion{
  top:10px !important;
  right:20px !important;
  align-items:flex-start !important;
  z-index:760 !important;
}
.globalAvatarMini{
  width:92px !important;
  height:190px !important;
}
.globalAvatarMini .pixelHero{
  transform:scale(.54) !important;
}
.globalDialogue{
  margin-top:18px !important;
  max-width:360px !important;
}
.musicToggleBtn{
  position:fixed;
  right:18px;
  bottom:114px;
  z-index:80;
  background:linear-gradient(180deg,#303033,#151515);
  color:var(--gold2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
@media(max-width:850px){
  .globalCompanion{
    top:8px !important;
    right:8px !important;
    max-width:88vw !important;
  }
  .globalAvatarMini{
    width:50px !important;
    height:112px !important;
  }
  .globalAvatarMini .pixelHero{
    transform:scale(.31) !important;
  }
  .globalDialogue{
    max-width:210px !important;
    font-size:11px !important;
    padding:8px 10px !important;
    margin-top:10px !important;
  }
  .musicToggleBtn{
    bottom:166px;
    right:12px;
    font-size:12px;
    padding:9px 12px;
  }
}


/* V5.3.4 — Companion spacing + mobile avatar fix */
.globalCompanion{
  gap:4px !important;
}
.globalAvatarMini{
  margin-left:-8px !important;
}
@media(max-width:850px){
  .globalCompanion{
    gap:2px !important;
    right:6px !important;
  }
  .globalAvatarMini{
    width:64px !important;
    height:128px !important;
    margin-left:-6px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .globalAvatarMini .pixelHero{
    transform:scale(.34) !important;
    transform-origin:top center !important;
    margin:0 !important;
  }
  .globalDialogue{
    max-width:220px !important;
  }
}


/* V5.3.5 — Companion placement final */
.globalCompanion{
  right:44px !important;
  gap:0 !important;
}
.globalAvatarMini{
  width:122px !important;
  height:210px !important;
  margin-left:-34px !important;
  position:relative !important;
  overflow:visible !important;
}
.globalAvatarMini .pixelHero{
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) scale(.54) !important;
  transform-origin:top center !important;
}
@media(max-width:850px){
  .globalCompanion{
    right:8px !important;
    top:8px !important;
    gap:0 !important;
    max-width:94vw !important;
  }
  .globalAvatarMini{
    display:block !important;
    width:74px !important;
    height:126px !important;
    margin-left:-20px !important;
    position:relative !important;
    overflow:visible !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  .globalAvatarMini .pixelHero{
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) scale(.32) !important;
    transform-origin:top center !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .globalDialogue{
    max-width:235px !important;
    margin-top:4px !important;
  }
}


/* V5.3.6 — Companion hard position fix */
.globalCompanion{
  top:10px !important;
  right:92px !important;
  gap:0 !important;
  max-width:520px !important;
  display:flex !important;
  flex-direction:row-reverse !important;
  align-items:flex-start !important;
}
.globalAvatarMini{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  width:96px !important;
  height:190px !important;
  min-width:96px !important;
  margin-left:-18px !important;
  position:relative !important;
}
.globalAvatarMini .pixelHero{
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) scale(.50) !important;
  transform-origin:top center !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
.globalAvatarMini .avatarName{display:none !important}

@media(max-width:850px){
  .globalCompanion{
    top:8px !important;
    right:38px !important;
    max-width:calc(100vw - 48px) !important;
    gap:0 !important;
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:flex-start !important;
  }
  .globalAvatarMini{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    width:46px !important;
    height:102px !important;
    min-width:46px !important;
    margin-left:-8px !important;
    position:relative !important;
  }
  .globalAvatarMini .pixelHero{
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) scale(.25) !important;
    transform-origin:top center !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .globalAvatarMini .avatarName{display:none !important}
  .globalDialogue{
    max-width:205px !important;
    margin-top:2px !important;
    font-size:11px !important;
    padding:8px 10px !important;
  }
}

/* Ultra small screens */
@media(max-width:430px){
  .globalCompanion{
    right:34px !important;
    max-width:calc(100vw - 42px) !important;
  }
  .globalAvatarMini{
    width:40px !important;
    min-width:40px !important;
    height:94px !important;
    margin-left:-6px !important;
  }
  .globalAvatarMini .pixelHero{
    transform:translateX(-50%) scale(.22) !important;
  }
  .globalDialogue{
    max-width:190px !important;
  }
}


/* V5.3.7 — HARD companion positioning, independent bubble/avatar */
.globalCompanion{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  width:0 !important;
  height:0 !important;
  max-width:none !important;
  display:block !important;
  z-index:900 !important;
  pointer-events:none !important;
}
.globalDialogue{
  position:fixed !important;
  top:18px !important;
  right:190px !important;
  width:360px !important;
  max-width:360px !important;
  margin:0 !important;
  z-index:902 !important;
}
.globalDialogue:before{
  left:100% !important;
  right:auto !important;
  top:28px !important;
  transform:translateX(-7px) rotate(45deg) !important;
}
.globalAvatarMini{
  position:fixed !important;
  top:18px !important;
  right:54px !important;
  width:112px !important;
  height:230px !important;
  min-width:112px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:901 !important;
}
.globalAvatarMini .pixelHero{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  transform:scale(.54) !important;
  transform-origin:top left !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
.globalAvatarMini .avatarName{display:none !important}

body.qg-active .globalCompanion,
body.qg-active .globalDialogue,
body.qg-active .globalAvatarMini{
  display:none !important;
}

@media(max-width:850px){
  .globalDialogue{
    position:fixed !important;
    top:10px !important;
    right:72px !important;
    width:220px !important;
    max-width:220px !important;
    font-size:11px !important;
    line-height:1.22 !important;
    padding:8px 10px !important;
    z-index:902 !important;
  }
  .globalDialogue:before{
    top:20px !important;
  }
  .globalAvatarMini{
    position:fixed !important;
    top:8px !important;
    right:8px !important;
    width:54px !important;
    height:116px !important;
    min-width:54px !important;
    display:block !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    z-index:901 !important;
  }
  .globalAvatarMini .pixelHero{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    transform:scale(.27) !important;
    transform-origin:top left !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media(max-width:430px){
  .globalDialogue{
    right:62px !important;
    width:205px !important;
    max-width:205px !important;
  }
  .globalAvatarMini{
    right:6px !important;
    width:48px !important;
    height:106px !important;
  }
  .globalAvatarMini .pixelHero{
    transform:scale(.24) !important;
  }
}


/* V5.4.0 — QG vivant */
.qgCard{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(240,210,122,.16),transparent 34%),
    radial-gradient(circle at 50% 85%,rgba(200,162,58,.08),transparent 40%),
    linear-gradient(145deg,#252529,#0d0d0f) !important;
}
.qgAtmosphere{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.qgCard > *:not(.qgAtmosphere){
  position:relative;
  z-index:2;
}
.qgLight{
  position:absolute;
  left:50%;
  top:-120px;
  width:420px;
  height:420px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(240,210,122,.20),rgba(200,162,58,.05) 38%,transparent 68%);
  animation:qgLightPulse 5.5s ease-in-out infinite;
}
@keyframes qgLightPulse{
  0%,100%{opacity:.45;transform:translateX(-50%) scale(.96)}
  50%{opacity:.85;transform:translateX(-50%) scale(1.05)}
}
.torch{
  position:absolute;
  top:96px;
  width:34px;
  height:72px;
  border-radius:8px;
  background:linear-gradient(180deg,#3a2a1d,#111);
  border:1px solid rgba(200,162,58,.22);
}
.torchLeft{left:36px}
.torchRight{right:36px}
.torch span{
  position:absolute;
  left:50%;
  top:-34px;
  width:34px;
  height:46px;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 65%,#fff2a4 0 12%,#f0d27a 13% 26%,#c86b2d 35%,transparent 67%);
  clip-path:polygon(50% 0,74% 30%,62% 52%,88% 100%,50% 82%,12% 100%,38% 52%,26% 30%);
  filter:drop-shadow(0 0 16px rgba(240,210,122,.65));
  animation:torchFlicker .24s infinite alternate;
}
@keyframes torchFlicker{
  from{transform:translateX(-50%) scale(.92) rotate(-2deg);opacity:.78}
  to{transform:translateX(-50%) scale(1.08) rotate(2deg);opacity:1}
}
.qgParticles i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--gold2);
  opacity:.0;
  animation:qgParticle 6s linear infinite;
}
.qgParticles i:nth-child(1){left:18%;bottom:16%;animation-delay:.2s}
.qgParticles i:nth-child(2){left:32%;bottom:12%;animation-delay:1.1s}
.qgParticles i:nth-child(3){left:48%;bottom:18%;animation-delay:2.1s}
.qgParticles i:nth-child(4){left:62%;bottom:13%;animation-delay:3.0s}
.qgParticles i:nth-child(5){left:78%;bottom:17%;animation-delay:4.2s}
.qgParticles i:nth-child(6){left:24%;bottom:8%;animation-delay:5.2s}
.qgParticles i:nth-child(7){left:54%;bottom:9%;animation-delay:1.8s}
.qgParticles i:nth-child(8){left:86%;bottom:10%;animation-delay:3.8s}
@keyframes qgParticle{
  0%{transform:translateY(0) scale(.6);opacity:0}
  15%{opacity:.8}
  70%{opacity:.45}
  100%{transform:translateY(-260px) scale(1.1);opacity:0}
}
#qgAvatarMount .pixelHero{
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(200,162,58,.10));
}
.qgHeroDialogue{
  box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 35px rgba(200,162,58,.13) !important;
}
@media(max-width:850px){
  .torchLeft{left:14px}
  .torchRight{right:14px}
  .torch{top:82px;transform:scale(.78)}
  .qgLight{width:320px;height:320px}
}


/* V5.5.0 — Boss automatiques */
#bossProgress[readonly]{
  opacity:.75;
  cursor:not-allowed;
}
.bossDefeatedOverlay{
  position:fixed;
  inset:0;
  z-index:960;
  background:rgba(0,0,0,.84);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}
.bossDefeatedOverlay.show{
  opacity:1;
  visibility:visible;
}
.bossDefeatedBox{
  width:min(560px,88vw);
  border:1px solid var(--gold);
  border-radius:28px;
  padding:42px 28px;
  text-align:center;
  background:radial-gradient(circle at top,rgba(240,210,122,.18),#101010 60%);
  box-shadow:0 0 90px rgba(200,162,58,.24),0 30px 90px rgba(0,0,0,.65);
  animation:bossDefeatIn .5s ease forwards;
}
@keyframes bossDefeatIn{
  from{transform:scale(.92);opacity:.3}
  to{transform:scale(1);opacity:1}
}
.bossDefeatedTitle{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:20px;
}
.bossDefeatedName{
  color:var(--gold2);
  font-size:30px;
  font-weight:900;
  margin-bottom:12px;
}
.bossDefeatedReward{
  color:var(--text);
  font-size:20px;
  font-weight:900;
}
.bossBar .fill.defeated{
  background:linear-gradient(90deg,#7d2222,#c83d3d,#f0d27a);
}


/* V5.6.0 — Évolution du Héros */
.avatarRank{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
  margin-top:-6px;
  text-transform:uppercase;
}
.heroRankQG{
  color:var(--gold2);
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:10px 0 4px;
}

/* Equipment layers hidden by default */
.pixelHero .cape,
.pixelHero .chestArmor,
.pixelHero .belt,
.pixelHero .shoulder,
.pixelHero .bracer,
.pixelHero .crown,
.pixelHero .aura{
  display:none;
}

/* Rank 5 — scout: belt + bracers */
.rank-scout .belt,
.rank-warrior .belt,
.rank-champion .belt,
.rank-commander .belt,
.rank-lord .belt,
.rank-legend .belt,
.rank-king .belt{
  display:block;
  left:43px;top:222px;width:82px;height:10px;background:#5b3522;z-index:6;
}
.rank-scout .bracer,
.rank-warrior .bracer,
.rank-champion .bracer,
.rank-commander .bracer,
.rank-lord .bracer,
.rank-legend .bracer,
.rank-king .bracer{
  display:block;
  top:205px;width:20px;height:14px;background:#5b3522;z-index:7;
}
.pixelHero .bracer.left{left:24px}
.pixelHero .bracer.right{right:24px}

/* Rank 10 — warrior: cape */
.rank-warrior .cape,
.rank-champion .cape,
.rank-commander .cape,
.rank-lord .cape,
.rank-legend .cape,
.rank-king .cape{
  display:block;
  left:30px;top:130px;width:108px;height:154px;background:#532420;z-index:-1;
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.35));
}

/* Rank 20 — champion: shoulders + armor */
.rank-champion .shoulder,
.rank-commander .shoulder,
.rank-lord .shoulder,
.rank-legend .shoulder,
.rank-king .shoulder{
  display:block;
  top:146px;width:34px;height:26px;background:#777;z-index:8;
}
.pixelHero .shoulder.left{left:28px}
.pixelHero .shoulder.right{right:28px}
.rank-champion .chestArmor,
.rank-commander .chestArmor,
.rank-lord .chestArmor,
.rank-legend .chestArmor,
.rank-king .chestArmor{
  display:block;
  left:46px;top:160px;width:76px;height:70px;background:linear-gradient(180deg,#666,#343434);z-index:5;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
}

/* Rank 30 — commander: black/gold */
.rank-commander .chestArmor,
.rank-lord .chestArmor,
.rank-legend .chestArmor,
.rank-king .chestArmor{
  background:linear-gradient(180deg,#1c1c1e,#080808) !important;
  border-top:5px solid #c8a23a;
}
.rank-commander .shoulder,
.rank-lord .shoulder,
.rank-legend .shoulder,
.rank-king .shoulder{
  background:#111 !important;
  border-bottom:5px solid #c8a23a;
}
.rank-commander .cape,
.rank-lord .cape,
.rank-legend .cape,
.rank-king .cape{
  background:#1c1414 !important;
}

/* Rank 50 — lord: gold accents */
.rank-lord .belt,
.rank-legend .belt,
.rank-king .belt{
  background:#c8a23a !important;
}
.rank-lord .bracer,
.rank-legend .bracer,
.rank-king .bracer{
  background:#c8a23a !important;
}
.rank-lord .chestArmor:after,
.rank-legend .chestArmor:after,
.rank-king .chestArmor:after{
  content:"";
  position:absolute;
  left:32px;top:8px;width:12px;height:44px;background:#c8a23a;
}

/* Rank 75 — legend: aura */
.rank-legend .aura,
.rank-king .aura{
  display:block;
  left:10px;top:20px;width:148px;height:278px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,210,122,.16),transparent 64%);
  z-index:-2;
  animation:qgLightPulse 4s ease-in-out infinite;
}

/* Rank 100 — king: crown */
.rank-king .crown{
  display:block;
  left:60px;top:-4px;width:48px;height:24px;background:#c8a23a;z-index:10;
  clip-path:polygon(0 100%,0 42%,18% 70%,35% 12%,50% 68%,65% 12%,82% 70%,100% 42%,100% 100%);
  filter:drop-shadow(0 0 10px rgba(240,210,122,.5));
}

/* Musculature/posture progression */
.rank-champion .torso,
.rank-commander .torso,
.rank-lord .torso,
.rank-legend .torso,
.rank-king .torso{
  left:31px !important;
  width:106px !important;
}
.rank-commander .arm.left,
.rank-lord .arm.left,
.rank-legend .arm.left,
.rank-king .arm.left{left:16px !important;width:32px !important}
.rank-commander .arm.right,
.rank-lord .arm.right,
.rank-legend .arm.right,
.rank-king .arm.right{right:16px !important;width:32px !important}

.heroEvolutionOverlay{
  position:fixed;
  inset:0;
  z-index:965;
  background:rgba(0,0,0,.84);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}
.heroEvolutionOverlay.show{
  opacity:1;
  visibility:visible;
}
.heroEvolutionBox{
  width:min(560px,88vw);
  border:1px solid var(--gold);
  border-radius:28px;
  padding:42px 28px;
  text-align:center;
  background:radial-gradient(circle at top,rgba(240,210,122,.18),#101010 60%);
  box-shadow:0 0 90px rgba(200,162,58,.24),0 30px 90px rgba(0,0,0,.65);
}
.heroEvolutionTitle{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:20px;
}
.heroEvolutionRank{
  color:var(--gold2);
  font-size:34px;
  font-weight:900;
  margin-bottom:12px;
}
.heroEvolutionDesc{
  color:var(--text);
  font-size:20px;
  font-weight:900;
}