@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url(../fonts/baloo-2-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format('woff2')}
:root{--or:#f6b73c;--or-clair:#ffe08a;--nuit:#0d0906;--texte:#f6eedf;--doux:rgba(246,238,223,.72);--carte:rgba(18,12,8,.78);--trait:rgba(246,183,60,.28)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit);scroll-behavior:smooth}
body{color:var(--texte);font:700 16px/1.55 Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--or-clair);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:'Baloo 2',sans-serif;font-weight:800;line-height:1.05}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Barre du haut ---------- */
.barre{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;background:linear-gradient(rgba(10,7,4,.92),rgba(10,7,4,.7) 70%,transparent)}
.retour{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(10,8,6,.6);text-decoration:none;font-size:13px}
.barre__logo{width:38px;height:38px;border-radius:10px}
.outil-actuel{margin-left:auto;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 6px;border-radius:12px;background:rgba(246,183,60,.12);box-shadow:inset 0 0 0 1px var(--trait);font-size:13px;white-space:nowrap}
.outil-actuel img{width:28px;height:28px;object-fit:contain}
.outil-actuel small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);line-height:1}
.outil-actuel b{display:block;line-height:1.1}
.passer,.son{height:38px;min-width:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(10,8,6,.6);color:var(--texte);font:700 13px Nunito,sans-serif;cursor:pointer}

/* ---------- Jauge de profondeur ---------- */
.jauge{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:15;height:min(56vh,460px);width:46px;display:flex;flex-direction:column;align-items:center}
.jauge__rail{position:relative;flex:1;width:6px;border-radius:6px;background:linear-gradient(#6b4a2a,#5a5f66 55%,#3c7fb0)}
.jauge__mineur{position:absolute;left:50%;top:0;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:#1b120a url(../img/miner-rush/outil-pioche-base.webp) center/70% no-repeat;box-shadow:0 0 0 2px var(--or),0 0 18px rgba(246,183,60,.5);transition:top .15s linear}
.jauge__val{margin-top:12px;font:800 15px/1 'Baloo 2',sans-serif;color:var(--or-clair);white-space:nowrap}
.jauge__val small{display:block;font:700 10px Nunito;color:var(--doux);letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* ---------- Surface ---------- */
.surface{position:relative;min-height:92svh;display:grid;place-items:center;text-align:center;padding:110px 20px 70px;overflow:hidden;
  background:linear-gradient(rgba(10,7,4,.25),rgba(13,9,6,.9) 92%),url(../img/commun/fond-rush.webp) center/cover}
.surface__logo{width:min(56vw,300px);margin:0 auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.surface h1{font-size:clamp(40px,8vw,72px);margin-top:14px;text-shadow:0 4px 20px #000}
.surface h1 span{color:var(--or)}
.surface p.accroche{max-width:560px;margin:10px auto 0;font-size:clamp(16px,2.2vw,20px);color:var(--texte);text-shadow:0 2px 10px #000}
.pastille{display:inline-flex;gap:8px;align-items:center;margin-top:18px;padding:7px 14px;border-radius:99px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:rgba(246,183,60,.16);box-shadow:inset 0 0 0 1px rgba(246,183,60,.6);color:var(--or-clair)}
.creuser{display:inline-flex;gap:10px;align-items:center;margin-top:22px;padding:13px 24px;border-radius:14px;text-decoration:none;font:800 18px/1 'Baloo 2',sans-serif;color:#1b1207;background:linear-gradient(180deg,var(--or-clair),var(--or));box-shadow:0 6px 0 #8a5a12,0 12px 30px rgba(0,0,0,.5)}
.creuser:active{transform:translateY(4px);box-shadow:0 2px 0 #8a5a12}
.herbe{position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(#5aa338,#3d7a25 60%,#5b3a1e)}

/* ---------- Strates ---------- */
.strate{position:relative;scroll-margin-top:58px;padding:34px 16px 48px;background:linear-gradient(rgba(12,8,5,var(--voile,.84)),rgba(12,8,5,var(--voile,.84))),var(--roche) 0 0/72px}
.strate__entete{max-width:1000px;margin:0 auto 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.profondeur{font:800 13px/1 'Baloo 2',sans-serif;letter-spacing:.1em;color:var(--or-clair);padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.45)}
.consigne{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--doux)}
.consigne img{width:26px;height:26px;object-fit:contain}
.strate.ouverte .consigne{opacity:.0;transition:opacity .4s}
.strate__corps{position:relative;max-width:1000px;margin:0 auto;border-radius:16px}
.contenu{padding:26px 22px;border-radius:16px;background:var(--carte);box-shadow:inset 0 0 0 1px var(--trait),0 20px 50px rgba(0,0,0,.4)}
.contenu h2{font-size:clamp(28px,4.4vw,42px);color:var(--or-clair)}
.contenu h2 small{display:block;font:700 12px/1 Nunito;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);margin-bottom:8px}
.contenu p{margin-top:12px;max-width:62ch;color:var(--texte)}
.contenu p.doux{color:var(--doux);font-size:14px}
.deux{display:grid;gap:24px;align-items:center}
@media(min-width:820px){.deux{grid-template-columns:1.2fr .8fr}.deux--inverse{grid-template-columns:.8fr 1.2fr}.deux--inverse .telephone{order:-1}}

canvas.mur{position:absolute;inset:0;width:100%;height:100%;border-radius:16px;touch-action:none;z-index:2}
.strate.ouverte canvas.mur{pointer-events:none}
.miner-btn{position:absolute;right:10px;bottom:10px;z-index:3;height:36px;padding:0 12px;border-radius:10px;border:0;background:rgba(0,0,0,.65);color:var(--texte);font:700 12px Nunito;cursor:pointer;opacity:0}
.miner-btn:focus-visible{opacity:1}
.strate.ouverte .miner-btn{display:none}
.progression{position:absolute;left:50%;top:12px;z-index:3;width:min(60%,280px);height:8px;transform:translateX(-50%);border-radius:9px;background:rgba(0,0,0,.6);box-shadow:0 0 0 1px rgba(255,255,255,.15);overflow:hidden;transition:opacity .4s}
.progression span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--or),var(--or-clair));transition:width .15s ease-out}
.strate.ouverte .progression{opacity:0}

/* Blocs de contenu */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.stat{padding:14px 10px;border-radius:12px;background:rgba(246,183,60,.08);box-shadow:inset 0 0 0 1px var(--trait);text-align:center}
.stat b{display:block;font:800 clamp(26px,5vw,38px)/1 'Baloo 2',sans-serif;color:var(--or)}
.stat span{font-size:12px;letter-spacing:.06em;color:var(--doux)}
.telephone{justify-self:center;width:min(70vw,260px);padding:8px;border-radius:30px;background:#0b0b0d;box-shadow:0 0 0 2px #2a2a2e,0 24px 50px rgba(0,0,0,.6)}
.telephone img{border-radius:22px;width:100%}
.commandes-jeu{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.commandes-jeu span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);font-size:14px}
.minerais{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:20px}
.minerai{display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.04);font-size:12px;text-align:center;color:var(--doux)}
.minerai img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.familles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:18px}
.famille{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 2px var(--c)}
.famille img{width:46px;height:46px;border-radius:10px}
.famille b{display:block;line-height:1.1}.famille span{font-size:12px;color:var(--doux)}
.outils{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:18px}
.outil{display:grid;justify-items:center;gap:6px;text-align:center;font-size:12px;color:var(--doux)}
.outil img{width:58px;height:58px;object-fit:contain;padding:6px;border-radius:50%;background:radial-gradient(circle,#ffd768,#c98a16);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.outil i{font-style:normal;font:800 11px 'Baloo 2';color:var(--or)}
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.atout{display:grid;gap:6px;padding:14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,120,40,.14),rgba(255,120,40,.04));box-shadow:inset 0 0 0 1px rgba(255,140,60,.4)}
.atout__icones{display:flex;gap:6px;align-items:center;height:60px}
.atout__icones img{height:56px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.atout b{font:800 18px/1.15 'Baloo 2';color:#ffb070}
.atout span{font-size:14px;color:var(--doux)}
.outils--legende .outil img{background:radial-gradient(circle,#c79bff,#5b23b0)}
.mur-message{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:10px;padding:20px;text-align:center;pointer-events:none;transition:opacity .6s}
.mur-message b{font:800 clamp(24px,3.6vw,44px)/1.1 'Baloo 2',sans-serif;color:#f1e2ff;text-shadow:0 0 18px rgba(170,90,255,.9),0 3px 0 #2a0a3a,0 0 40px rgba(120,40,220,.6);animation:mystere 3.5s ease-in-out infinite}
.mur-pourcent{padding:6px 14px;border-radius:99px;background:rgba(20,8,30,.75);box-shadow:inset 0 0 0 1px rgba(190,130,255,.6);font:800 16px/1 'Baloo 2';color:#e2c8ff}
.strate.ouverte .mur-message{opacity:0}
@keyframes mystere{50%{text-shadow:0 0 28px rgba(200,130,255,1),0 3px 0 #2a0a3a,0 0 60px rgba(150,60,255,.8)}}
.strate--legende .contenu{box-shadow:inset 0 0 0 1px rgba(190,130,255,.45),0 20px 50px rgba(0,0,0,.4),0 0 60px rgba(150,80,255,.18)}
.strate--legende .contenu h2{color:#e2c8ff}
.telephone--legende{box-shadow:0 0 0 2px #5b23b0,0 0 40px rgba(150,80,255,.35),0 24px 50px rgba(0,0,0,.6)}
.auto{display:grid;gap:8px;margin-top:16px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.auto__ligne{display:flex;align-items:center;gap:10px}
.auto__ligne img{width:34px;height:34px;border-radius:8px}
.auto__ligne span{flex:1;font-size:15px}
.interrupteur{position:relative;width:50px;height:28px;border-radius:99px;border:0;background:rgba(255,255,255,.15);cursor:pointer;transition:background .2s}
.interrupteur::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#e8dcc6;transition:transform .2s}
.interrupteur[aria-pressed="true"]{background:var(--c)}
.interrupteur[aria-pressed="true"]::after{transform:translateX(22px);background:#fff}
.auto__etat{margin:4px 0 0!important;font-size:13px;color:var(--doux)}
.auto__etat b{color:var(--or-clair)}
.langues{display:flex;gap:8px;margin-bottom:12px}
.langues button{display:inline-flex;align-items:center;gap:8px}
.drapeau{width:24px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.35);flex:0 0 auto}
.langues .drapeau{width:22px;height:14px}
.titre-en{display:flex;align-items:center;gap:14px}
.drapeau--grand{width:64px;height:32px;border-radius:5px;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 6px 16px rgba(0,0,0,.5)}
.langues button{padding:8px 14px;border-radius:99px;border:0;background:rgba(255,255,255,.08);color:var(--texte);font:700 14px Nunito;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.langues button[aria-selected="true"]{background:linear-gradient(180deg,var(--or-clair),var(--or));color:#1b1207;box-shadow:0 3px 0 #8a5a12}
.duo{display:flex;gap:14px;justify-content:center}
.duo .telephone{width:min(40vw,210px)}
.img-l{transition:opacity .25s}
.strate--en .contenu{box-shadow:inset 0 0 0 1px rgba(120,170,255,.45),0 20px 50px rgba(0,0,0,.4),0 0 60px rgba(80,140,255,.15)}
.legendaires{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.legendaires li{list-style:none;padding:6px 11px;border-radius:99px;font-size:13px;background:rgba(170,90,255,.14);box-shadow:inset 0 0 0 1px rgba(190,130,255,.55);color:#e7d4ff}
.paliers-zone{position:relative;display:flex;align-items:center;gap:8px;margin-top:14px}
.paliers{flex:1;display:flex;gap:14px;overflow-x:auto;padding:12px 4px 10px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.paliers::-webkit-scrollbar{display:none}
.palier{position:relative;flex:0 0 auto;width:92px;display:grid;justify-items:center;gap:6px;scroll-snap-align:start;text-align:center;font-size:12px;color:var(--doux)}
.palier:not(:last-child)::after{content:"";position:absolute;top:32px;left:calc(50% + 34px);width:calc(100% - 68px + 14px);height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--or) 0 7px,transparent 7px 12px);opacity:.7}
.fleche{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:3px solid #5b3a12;background:radial-gradient(circle at 40% 35%,#ffe9a6,#f6b73c 55%,#b8761a);box-shadow:0 4px 0 #3d2610,0 8px 16px rgba(0,0,0,.5);color:#3d2610;font:800 28px/1 'Baloo 2';cursor:pointer;display:grid;place-items:center;padding-bottom:4px;transition:transform .12s,opacity .2s}
.fleche:hover{transform:translateY(-2px)}
.fleche:active{transform:translateY(3px);box-shadow:0 1px 0 #3d2610}
.fleche:disabled{opacity:.3;cursor:default;transform:none}
.paliers-zone:not(.deborde) .fleche{display:none}
.rail{position:relative;height:26px;margin:8px 52px 0;cursor:pointer;touch-action:none}
.rail[hidden]{display:none}
.rail::before{content:"";position:absolute;left:0;right:0;top:9px;height:10px;background:repeating-linear-gradient(90deg,#6b4a2a 0 6px,transparent 6px 16px)}
.rail::after{content:"";position:absolute;left:0;right:0;top:10px;height:8px;border-top:3px solid #a9aeb8;border-bottom:3px solid #a9aeb8;opacity:.85}
.rail__chariot{position:absolute;top:-12px;left:0;width:46px;height:40px;z-index:1;background:url(../img/miner-rush/outil-brouette-futuriste.webp) center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));cursor:grab}
.rail.tire .rail__chariot{cursor:grabbing}
.palier img{width:64px;height:64px}
.palier b{font:800 18px/1 'Baloo 2';color:var(--or-clair)}
.fin{text-align:center}
.fin .surface__logo{width:min(46vw,220px)}
.fin__liens{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.lien2{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;text-decoration:none;font:800 16px/1 'Baloo 2';background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.lien2--vortex{background:linear-gradient(180deg,#b989ff,#6b2fd0);box-shadow:0 5px 0 #34116e}
footer{padding:26px 16px 40px;text-align:center;font-size:12px;color:var(--doux);background:#070504}

/* ---------- Effets ---------- */
.eclats{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.gain{position:fixed;z-index:31;pointer-events:none;font:800 20px/1 'Baloo 2',sans-serif;color:var(--or-clair);text-shadow:0 2px 0 #000;animation:gain .8s ease-out forwards}
.coup{position:fixed;z-index:31;width:52px;height:52px;pointer-events:none;background:var(--img) center/contain no-repeat;transform-origin:25% 85%;animation:coup .18s ease-out forwards}
.annonce{position:fixed;left:50%;width:max-content;min-width:min(320px,calc(100vw - 24px));bottom:max(18px,env(safe-area-inset-bottom));z-index:32;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:linear-gradient(180deg,#2b1d0d,#160f07);box-shadow:inset 0 0 0 1px var(--or),0 16px 40px rgba(0,0,0,.6);transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.22,.61,.36,1);max-width:calc(100vw - 24px)}
.annonce.visible{transform:translate(-50%,0)}
.annonce img{width:52px;height:52px;object-fit:contain;padding:6px;border-radius:50%;background:radial-gradient(circle,#ffd768,#c98a16)}
.annonce small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.annonce b{display:block;font:800 19px/1.1 'Baloo 2'}
.annonce span{font-size:13px;color:var(--doux)}
@keyframes gain{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-12px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-54px)}}
@keyframes coup{0%{transform:translate(-25%,-85%) rotate(-50deg)}100%{transform:translate(-25%,-85%) rotate(18deg);opacity:0}}

@media(max-width:819px){
  .jauge{display:none}
  .barre__logo{display:none}
  .outil-actuel small{display:none}
  .passer .txt{display:none}
  .contenu{padding:20px 16px}
}
@media(min-width:820px){.strate{padding-left:90px;padding-right:40px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
