/* ============ ACCUEIL ============ */
.home-scene{position:absolute;inset:0 0 auto;height:62%;z-index:0;
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 96%)}
.home-wrap{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;
  justify-content:flex-end;padding:0 var(--sp-4) var(--sp-4)}
.logo-lockup{text-align:center;margin-bottom:var(--sp-6)}
.logo-lockup .mark{width:62px;height:62px;margin:0 auto var(--sp-3)}
.logo-lockup .word{font-family:var(--display);font-weight:800;font-size:31px;letter-spacing:.16em;
  color:var(--silver-200)}
.logo-lockup .tag{font-size:11px;letter-spacing:.20em;color:var(--silver-500);margin-top:8px;
  text-transform:uppercase}
.logo-lockup .tag b{color:var(--gold-400);font-weight:800}

/* ============ PARCOURS ============ */
.path{position:relative;padding:var(--sp-4) 0 var(--sp-6);min-height:420px;
  background-size:cover;background-position:center top}
.path::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,11,26,.55),rgba(5,11,26,.15) 40%,rgba(5,11,26,.9))}
.path-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-5)}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  transform:translateX(var(--dx,0))}
.hex{width:64px;height:72px;display:grid;place-items:center;position:relative;
  font-family:var(--display);font-weight:800;font-size:22px}
.hex svg{position:absolute;inset:0;width:100%;height:100%}
.hex span{position:relative;z-index:2}
.node.locked .hex span{color:var(--ink-3)}
.node.current .hex{filter:drop-shadow(0 0 16px rgba(245,176,26,.55))}
.node .num{position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:700;color:var(--ink-3);z-index:3}
.node .label{font-size:11px;color:var(--ink-2);max-width:150px;text-align:center;line-height:1.3}
.world-head{text-align:center;padding:var(--sp-5) var(--sp-4) var(--sp-2)}
.world-head .n{font-size:10.5px;letter-spacing:.22em;color:var(--gold-400);text-transform:uppercase}
.world-head h2{font-size:22px;text-transform:uppercase;margin-top:6px}
.world-head p{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.world-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 var(--sp-4)}
.world-switch button{padding:9px 0;border-radius:var(--r-btn);border:1px solid var(--line);
  background:var(--glass);font-size:11.5px;font-weight:700;color:var(--ink-3)}
.world-switch button.on{border-color:rgba(245,176,26,.45);background:rgba(245,176,26,.12);
  color:var(--gold-300)}
.world-switch button[disabled]{opacity:.4}

/* ============ LISTE DES DEFIS ============ */
.dcard{display:flex;gap:var(--sp-3);padding:10px;align-items:center;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  margin-bottom:var(--sp-3);text-align:left;width:100%}
.dcard.current{border-color:rgba(57,196,110,.5);box-shadow:0 0 0 1px rgba(57,196,110,.18)}
.dcard.locked{opacity:.62}
.dcard .thumb{width:78px;height:78px;border-radius:12px;flex:none;background-size:cover;
  background-position:center;background-color:var(--navy-800);border:1px solid var(--line)}
.dcard .info{min-width:0;flex:1}
.dcard .t{font-family:var(--display);font-weight:800;font-size:14.5px;text-transform:uppercase;
  line-height:1.2}
.dcard .lv{font-size:11.5px;color:var(--gold-400);margin-top:5px}
.dcard .lv.locked{color:var(--ink-3)}

/* ============ ECRAN QUESTION ============ */
.q-scene{position:relative;height:250px;background-size:cover;background-position:center;
  background-color:var(--navy-850);flex:none}
.q-scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,11,26,.35) 0%,rgba(5,11,26,.15) 40%,var(--navy-950) 99%)}
.q-progress{position:absolute;left:var(--sp-4);right:var(--sp-4);
  top:calc(10px + env(safe-area-inset-top));z-index:4}
.q-progress .meta{display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;color:var(--ink-2)}
.hearts{display:inline-flex;gap:3px}
.hearts [data-icon]{width:14px;height:14px}
.q-body{position:relative;z-index:3;margin-top:-52px;padding:0 var(--sp-4)}
.q-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400);
  text-align:center}
.q-title{font-size:23px;line-height:1.15;text-transform:uppercase;text-align:center;
  margin-top:8px}
.q-context{font-size:13px;color:var(--ink-2);text-align:center;margin-top:10px;line-height:1.45}
.answers{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-5)}
.ans{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:var(--glass);text-align:left;font-size:14px;
  line-height:1.35;min-height:56px;transition:border-color .15s,background .15s}
.ans:active{background:var(--glass-2)}
.ans .dot{width:26px;height:26px;border-radius:var(--r-pill);flex:none;display:grid;
  place-items:center;border:1px solid var(--line-strong);font-size:12px;font-weight:800;
  color:var(--ink-3)}
.ans.good{border-color:rgba(57,196,110,.65);background:var(--success-bg)}
.ans.good .dot{border-color:var(--success);color:var(--success)}
.ans.bad{border-color:rgba(229,72,77,.6);background:var(--danger-bg)}
.ans.bad .dot{border-color:var(--danger);color:var(--danger)}
.ans.dim{opacity:.42}
.ans .best{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;
  color:var(--success);white-space:nowrap;text-transform:uppercase}

/* ============ FEEDBACK ============ */
.fb{margin-top:var(--sp-4);border-radius:var(--r-card);padding:14px;border:1px solid var(--line);
  background:var(--glass)}
.fb.good{border-color:rgba(57,196,110,.4);background:var(--success-bg)}
.fb.bad{border-color:rgba(229,72,77,.4);background:var(--danger-bg)}
.fb .h{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.fb.good .h{color:var(--success)} .fb.bad .h{color:var(--danger)}
.fb p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.fb .src{font-size:10.5px;color:var(--ink-3);margin-top:9px;letter-spacing:.03em}
.emergency{margin-top:10px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(245,176,26,.4);background:rgba(245,176,26,.10);
  font-size:12.5px;font-weight:700;color:var(--gold-300);text-align:center}

/* ============ FIN DE DEFI / DE MONDE ============ */
.end{text-align:center;padding:var(--sp-6) var(--sp-4) 0}
.end h1{font-size:31px;text-transform:uppercase;line-height:1.05}
.end .who{font-size:13px;color:var(--ink-3);margin-top:9px}
.end .stars{justify-content:center;margin:var(--sp-5) 0}
.reward{display:flex;align-items:center;gap:12px;padding:13px;margin-top:var(--sp-4);
  border-radius:var(--r-card);border:1px solid rgba(245,176,26,.32);
  background:rgba(245,176,26,.09);text-align:left}
.reward .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(245,176,26,.4);color:var(--gold-400)}
.reward .t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.reward .n{font-weight:800;font-size:14px;margin-top:3px}

/* ============ MEMO / BADGES ============ */
.memo{padding:14px;margin-bottom:var(--sp-3)}
.memo h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-300)}
.memo ol{margin:10px 0 0;padding-left:19px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.memo .key{margin-top:10px;font-size:12.5px;color:var(--ink);font-weight:700}
.memo.locked{opacity:.5}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bdg{padding:12px 6px;border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--glass);text-align:center}
.bdg .ic{width:44px;height:44px;margin:0 auto 8px;border-radius:var(--r-pill);display:grid;
  place-items:center;border:1px solid var(--line-strong);color:var(--ink-3)}
.bdg.on .ic{border-color:rgba(245,176,26,.55);background:rgba(245,176,26,.12);color:var(--gold-400)}
.bdg .n{font-size:10.5px;line-height:1.25;color:var(--ink-2)}
.bdg.on .n{color:var(--ink)}

/* ============ BOUTIQUE (desactivee) ============ */
.soon{text-align:center;padding:var(--sp-7) var(--sp-4)}
.soon .ic{width:70px;height:70px;margin:0 auto var(--sp-4);color:var(--silver-500)}
.soon h2{font-size:20px;text-transform:uppercase}
.soon p{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.55}

/* ============ LIGNES DE REGLAGES ============ */
.set{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--glass);margin-bottom:10px;width:100%;
  text-align:left;font-size:14px}
.set .val{margin-left:auto;color:var(--gold-400);font-weight:700;font-size:13px}

/* ============ ANIMATIONS ============ */
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
.pop.d1{animation-delay:.10s} .pop.d2{animation-delay:.22s} .pop.d3{animation-delay:.34s}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fadeup{animation:fadeup .32s ease both}