@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; --violet:#a66bff; --violet-clair:#d9b8ff;
  --nuit:#0b0810; --texte:#f6eedf; --doux:rgba(246,238,223,.7);
  --bloc:clamp(130px,27vmin,280px);
  --logo:min(40vmin,380px);
  --pioche:url(../img/commun/curseur-40.png) 6 6, pointer;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--nuit);color:var(--texte);font-family:Nunito,system-ui,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
body{height:100dvh;user-select:none;-webkit-user-select:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--or-clair);outline-offset:4px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Les deux mines, séparées en diagonale ---------- */
.mine{position:fixed;inset:0;--cx:25%;--cy:52%}
.mine--rush{clip-path:polygon(0 0,56% 0,44% 100%,0 100%);--teinte:var(--or);--teinte-clair:var(--or-clair)}
.mine--vortex{clip-path:polygon(56% 0,100% 0,100% 100%,44% 100%);--cx:75%;--teinte:var(--violet);--teinte-clair:var(--violet-clair)}
.mine__fond{position:absolute;inset:-2%;background:center/cover no-repeat;filter:saturate(.9) brightness(.36);transform:scale(1.06);transition:filter 1.4s ease,transform 1.4s ease}
.mine--rush .mine__fond{background-image:url(../img/commun/fond-rush.webp)}
.mine--vortex .mine__fond{background-image:url(../img/commun/fond-vortex.webp);background-position:64% 40%}
.mine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--cx) var(--cy),color-mix(in srgb,var(--teinte) 22%,transparent) 0,transparent 30%),
             radial-gradient(ellipse at var(--cx) var(--cy),transparent 0 22%,rgba(8,6,12,.6) 60%,rgba(8,6,12,.94) 100%)}
.mine.est-ouverte .mine__fond{filter:saturate(1.15) brightness(.58);transform:scale(1)}

.couture{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.couture line{stroke-width:2;vector-effect:non-scaling-stroke}
.couture .halo{stroke-width:14;opacity:.28;filter:blur(6px)}
.couture--portrait{display:none}

/* ---------- Poste : le bloc, puis le logo au même endroit ---------- */
.poste{position:fixed;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%);display:grid;justify-items:center;z-index:3}
.poste--rush{--cx:25%;--cy:52%;--teinte:var(--or);--teinte-clair:var(--or-clair)}
.poste--vortex{--cx:75%;--cy:52%;--teinte:var(--violet);--teinte-clair:var(--violet-clair)}

.vie{width:calc(var(--bloc)*.7);height:7px;border-radius:9px;background:rgba(0,0,0,.55);box-shadow:0 0 0 1px rgba(255,255,255,.12);margin-bottom:18px;overflow:hidden;transition:opacity .3s}
.vie span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teinte),var(--teinte-clair));border-radius:inherit;transition:width .18s ease-out}

.bloc{position:relative;width:var(--bloc);aspect-ratio:1;border:0;background:none;cursor:var(--pioche);touch-action:manipulation;animation:respire 3.2s ease-in-out infinite}
.bloc::before{content:"";position:absolute;left:8%;right:8%;bottom:-16%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);z-index:-1}
.bloc__corps{position:absolute;inset:0;transition:transform .08s}
.bloc.touche .bloc__corps{animation:choc .16s ease-out}
.bloc.brise{animation:none;pointer-events:none}
.bloc.brise .bloc__corps{animation:eclate .22s ease-in forwards}
.bloc.brise::before{opacity:0;transition:opacity .3s}

/* Miner Rush : tuile de face, fractures traversantes comme en jeu (2.67.0) */
.bloc--rush .bloc__corps{border-radius:12px;background:url(../img/commun/tuile-ore-or.webp) center/100% 100%;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 7px 0 rgba(255,255,255,.14),inset 0 -9px 0 rgba(0,0,0,.32),0 0 70px color-mix(in srgb,var(--or) 35%,transparent)}
.fissures{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bloc--rush .bloc__corps{overflow:hidden;transition:filter .2s}
.fissures path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:trace .14s ease-out forwards}
.fissures .f-ombre{stroke:#120a04}
.fissures .f-lumiere{stroke:rgba(255,232,160,.4);transform:translate(.6px,.8px)}
.fissures .f-eclat{fill:#1a1008;stroke:rgba(255,232,160,.35);stroke-width:.5;opacity:0;animation:apparait .12s forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes apparait{to{opacity:.92}}

/* Vortex Miner : cube isométrique, 12 vues de fissures du jeu */
.bloc--vortex{width:calc(var(--bloc)*1.18)}
.bloc--vortex .bloc__corps{background:url(../img/commun/fissures-vortex.webp) 0 0/600% 200% no-repeat;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--violet) 45%,transparent))}

.aide{margin-top:26px;font:800 clamp(15px,1.9vmin,19px)/1 'Baloo 2',sans-serif;letter-spacing:.04em;text-align:center;text-shadow:0 2px 10px #000;transition:opacity .3s}
.aide b{color:var(--teinte-clair);font-weight:800}
.aide small{display:block;margin-top:6px;font:700 12px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}

/* Révélation */
.revelation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px;width:max-content;opacity:0;visibility:hidden;pointer-events:none}
.poste.ouvert .vie,.poste.ouvert .aide{opacity:0}
.poste.ouvert .revelation{opacity:1;visibility:visible;pointer-events:auto}
.logo{position:relative;display:block;width:var(--logo);aspect-ratio:1;border-radius:24px;transform:scale(.7);opacity:0;cursor:pointer}
.poste.ouvert .logo{animation:jaillit .9s cubic-bezier(.22,.61,.36,1) forwards}
.logo img{width:100%;height:100%;display:block;filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));transition:transform .25s,filter .25s}
.logo:hover img,.logo:focus-visible img{transform:scale(1.05);filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px color-mix(in srgb,var(--teinte) 70%,transparent)) brightness(1.06)}
.rayons{position:absolute;inset:-34%;z-index:-1;border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--teinte) 55%,transparent) 0 6deg,transparent 6deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 25%,transparent 100%);mask:radial-gradient(closest-side,#000 25%,transparent 100%)}
.poste.ouvert .rayons{animation:rayons-in 1.6s .35s ease-out forwards,tourne 60s linear infinite}
.statut,.cta{opacity:0;transform:translateY(10px)}
.poste.ouvert .statut{animation:monte .5s .45s ease-out forwards}
.poste.ouvert .cta{animation:monte .5s .6s ease-out forwards}
.statut{display:flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);text-shadow:0 2px 8px #000}
.pastille{padding:5px 10px;border-radius:99px;background:color-mix(in srgb,var(--teinte) 22%,rgba(0,0,0,.5));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teinte) 70%,transparent);color:var(--teinte-clair)}
.cta{display:inline-flex;gap:10px;align-items:center;padding:12px 22px;border-radius:14px;text-decoration:none;font:800 17px/1 'Baloo 2',sans-serif;letter-spacing:.03em;color:#1b1207;
  background:linear-gradient(180deg,var(--teinte-clair),var(--teinte));box-shadow:0 6px 0 color-mix(in srgb,var(--teinte) 45%,#000),0 12px 30px rgba(0,0,0,.5);transition:transform .15s,box-shadow .15s}
.poste--vortex .cta{color:#fff;background:linear-gradient(180deg,#b989ff,#6b2fd0);box-shadow:0 6px 0 #34116e,0 12px 30px rgba(0,0,0,.5)}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--teinte) 45%,#000)}

/* ---------- En-tête, commandes, pied ---------- */
.tete{position:fixed;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;text-align:center;pointer-events:none;width:min(92vw,560px)}
.marque{font:700 11px/1 Nunito,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--doux)}
h1{margin-top:8px;font:800 clamp(20px,3vmin,30px)/1.1 'Baloo 2',sans-serif;text-shadow:0 3px 14px #000}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--or-clair),var(--violet-clair));-webkit-background-clip:text;background-clip:text;color:transparent}

.commandes{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:5;display:flex;gap:8px}
.commandes button{height:38px;min-width:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(10,8,14,.6);backdrop-filter:blur(6px);color:var(--texte);font:700 13px Nunito,sans-serif;cursor:pointer}
.commandes button:hover{background:rgba(40,30,50,.8)}
#reformer[hidden]{display:none}

.pied{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:4;text-align:center;width:min(94vw,640px)}
.consigne{font:800 14px/1.2 'Baloo 2',sans-serif;letter-spacing:.06em;color:var(--texte);text-shadow:0 2px 8px #000}
.liens{margin-top:6px;font-size:11px;letter-spacing:.08em;color:var(--doux)}
.liens a{text-decoration:none}.liens a:hover{color:var(--texte);text-decoration:underline}

/* ---------- Effets ---------- */
.eclats{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.gain{position:fixed;z-index:7;pointer-events:none;font:800 22px/1 'Baloo 2',sans-serif;color:var(--c);text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.8);animation:gain .8s ease-out forwards}
.coup{position:fixed;z-index:7;width:46px;height:46px;pointer-events:none;background:url(../img/commun/curseur.webp) center/contain no-repeat;transform-origin:20% 80%;animation:coup .2s ease-out forwards}
.flash{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),var(--c) 0,transparent 45%);animation:flash .5s ease-out forwards}

@keyframes respire{50%{transform:translateY(-6px)}}
@keyframes choc{0%{transform:scale(1)}35%{transform:scale(.93,.9) translate(var(--dx,0),2px)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes eclate{to{transform:scale(1.25);opacity:0;filter:brightness(3)}}
@keyframes jaillit{0%{opacity:0;transform:scale(.7)}45%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes rayons-in{to{opacity:.7}}
@keyframes tourne{to{rotate:360deg}}
@keyframes monte{to{opacity:1;transform:none}}
@keyframes gain{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-14px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
@keyframes coup{0%{transform:translate(-30%,-80%) rotate(-55deg)}100%{transform:translate(-30%,-80%) rotate(15deg);opacity:0}}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* ---------- Portrait (téléphone) : séparation horizontale ---------- */
@media (max-aspect-ratio:4/5){
  :root{--bloc:clamp(110px,30vw,170px);--logo:min(27dvh,62vw)}
  .mine--rush{clip-path:polygon(0 0,100% 0,100% 44%,0 56%);--cx:50%;--cy:30%}
  .mine--vortex{clip-path:polygon(0 56%,100% 44%,100% 100%,0 100%);--cx:50%;--cy:74%}
  .poste--rush{--cx:50%;--cy:31%}
  .poste--vortex{--cx:50%;--cy:73%}
  .couture--paysage{display:none}.couture--portrait{display:block}
  .tete{top:max(12px,env(safe-area-inset-top));text-align:left;left:16px;transform:none;width:auto}
  h1{font-size:18px;max-width:58vw}
  .commandes{top:max(12px,env(safe-area-inset-top))}
  .commandes .txt{display:none}
  .pied .liens{display:none}
  .aide{margin-top:18px}
  .revelation{gap:8px}
  .statut{font-size:11px}
  .cta{padding:10px 18px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}