/* ALMUNQIDH — couche de presentation.
   Structure heritee de la nouvelle version de Polyglotz : la photo occupe le
   cadre, le texte est pose dessus, le contenu remonte sur l'image.
   Couleurs : celles d'ALMUNQIDH (tokens.css) — bleu nuit, or, argent.
   Aucune couleur claire, aucun orange. */

:root{--app-max:440px}

/* ============ CADRE ============ */
body{font-size:16px;background:#02060E}
#app{width:100%;max-width:440px;box-shadow:0 0 90px rgba(0,0,0,.75)}
button{touch-action:manipulation}
.sub,.q-context,.fb p,.memo ol,.memo .key{font-size:15.5px;line-height:1.62}
.q-kicker,.q-progress .meta,.world-head .n,.fb .src,.src{font-size:12.5px;line-height:1.5}
.btn{min-height:54px;font-size:15px;border-radius:15px}
.btn.gold{box-shadow:0 12px 30px rgba(245,176,26,.28)}

/* ============ BARRE HAUTE ============ */
/* Posee sur la photo : fond transparent, pastilles en verre sombre. */
.topbar{padding:calc(14px + env(safe-area-inset-top)) 18px 10px;background:none;position:relative;z-index:6}
.topbar .brand .name{font-size:15.5px;letter-spacing:.13em}
.topbar .brand .tag{font-size:9px;letter-spacing:.10em}
.iconbtn{width:42px;height:42px;border-radius:14px;background:rgba(5,11,26,.55);
  border:1px solid rgba(201,212,226,.22);backdrop-filter:blur(10px)}
.scorepill{background:rgba(5,11,26,.55);border-color:rgba(245,176,26,.42);
  backdrop-filter:blur(10px)}

/* ============ ACCUEIL — HEROS PLEIN CADRE ============ */
/* La photo tient tout l'ecran, un degrade la fond dans le bleu nuit. */
.home-scene{position:absolute;inset:0;height:100%;flex:none;
  background-size:cover;background-position:center 32%;
  -webkit-mask-image:none;mask-image:none}
.home-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(5,11,26,.30) 0%,rgba(5,11,26,.10) 20%,rgba(5,11,26,.55) 46%,
  rgba(5,11,26,.90) 66%,#050B1A 84%)}
.home-wrap{position:relative;z-index:2;justify-content:flex-end;
  padding:0 20px calc(18px + env(safe-area-inset-bottom))}
.logo-lockup{text-align:left;margin-bottom:20px}
.logo-lockup .eyebrow{font-size:11px;letter-spacing:.20em;color:var(--gold-400);font-weight:800}
.home-title{font-family:var(--display);font-weight:900;
  font-size:clamp(38px,11vw,52px);line-height:.92;letter-spacing:-.035em;
  text-transform:uppercase;color:var(--ink);margin-top:12px;max-width:11ch}
.home-title em{display:block;font-style:normal;color:var(--gold-400)}
.home-lead{font-size:16px;line-height:1.55;color:var(--ink-2);margin-top:14px;max-width:34ch}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.home-stats>div{background:rgba(255,255,255,.07);border:1px solid rgba(201,212,226,.18);
  border-radius:16px;padding:15px 6px;text-align:center;backdrop-filter:blur(8px)}
.home-stats b{display:block;font-family:var(--display);font-weight:900;font-size:23px;
  letter-spacing:-.03em;color:var(--gold-400)}
.home-stats span{display:block;font-size:10.5px;margin-top:5px;color:var(--ink-3);line-height:1.3}
.home-resume{padding:18px;border-radius:18px;margin-bottom:16px;
  background:linear-gradient(140deg,rgba(23,64,95,.85),rgba(10,20,40,.85));
  border:1px solid rgba(201,212,226,.20);backdrop-filter:blur(8px);
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.home-resume .eyebrow{font-size:10px;letter-spacing:.20em;color:var(--gold-400)}
.home-resume h2{font-size:19px;margin:9px 0 14px;text-transform:uppercase;line-height:1.15}
.home-wrap .disclaimer{padding-top:16px}

/* ============ PARCOURS — CARTE PLEIN CADRE ============ */
.path{background-size:cover;background-position:center top;min-height:540px;
  padding:26px 0 100px}
.path::before{background:linear-gradient(180deg,rgba(5,11,26,.42) 0%,rgba(5,11,26,.22) 30%,
  rgba(5,11,26,.86) 82%,#050B1A 100%)}
.path-inner{gap:26px}
.node{max-width:230px}
.node .hex{width:70px;height:78px;font-size:24px}
.node .num{display:none}
.node .label{font-size:13px;max-width:200px;color:var(--ink);
  background:rgba(5,11,26,.72);border:1px solid rgba(201,212,226,.18);
  padding:8px 12px;border-radius:11px;backdrop-filter:blur(8px)}
.node.current .hex{filter:drop-shadow(0 0 20px rgba(245,176,26,.6))}
.node[aria-disabled=true]{cursor:not-allowed}
.world-head{padding-top:20px}
.world-head p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.h-screen{font-size:30px;font-weight:900;letter-spacing:-.02em}
.world-switch{margin-top:18px}
.world-switch button{font-size:12.5px;min-height:46px}

/* ============ LISTE DES DEFIS — VIGNETTES PHOTO ============ */
.dcard{padding:11px;gap:14px;background:rgba(255,255,255,.055);
  border-color:rgba(201,212,226,.16)}
.dcard .thumb{width:98px;height:80px;border-radius:14px;background-size:cover;
  background-position:center;background-color:var(--navy-850)}
.dcard .t{font-size:15.5px;line-height:1.3;text-transform:none;font-weight:800}
.dcard .lv{font-size:12.5px}

/* ============ DEFI ET QUESTION — PHOTO HAUTE ============ */
/* Meme principe que l'accueil : la photo occupe le haut, le contenu remonte
   dessus et le degrade la fond dans le bleu nuit. */
.q-scene{height:clamp(360px,54vh,540px);background-size:cover;
  background-position:center 30%;background-color:var(--navy-850)}
.q-scene::after{display:block;background:linear-gradient(180deg,
  rgba(5,11,26,.42) 0%,rgba(5,11,26,.10) 26%,rgba(5,11,26,.62) 62%,
  rgba(5,11,26,.94) 84%,#050B1A 100%)}
.q-progress{top:calc(14px + env(safe-area-inset-top));left:16px;right:16px;
  background:rgba(5,11,26,.62);border:1px solid rgba(201,212,226,.16);
  border-radius:14px;padding:11px 12px;backdrop-filter:blur(10px)}
.q-body{margin-top:-96px;padding:0 20px}
.q-kicker{text-align:left;font-size:11px;font-weight:800;letter-spacing:.20em}
.q-title{text-align:left;font-family:var(--display);font-weight:900;
  font-size:clamp(27px,7.5vw,34px);line-height:1.04;letter-spacing:-.03em;margin-top:9px}
.q-context{text-align:left;margin-top:12px;color:var(--ink-2)}
.q-body .q-kicker,.q-body .q-title{text-align:left}

/* ============ REPONSES ============ */
.ans{font-size:15.5px;line-height:1.5;padding:16px 15px;border-radius:15px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(201,212,226,.16);
  flex-wrap:wrap}
.ans .grow{min-width:0;flex:1}
.ans .dot{width:30px;height:30px;background:rgba(245,176,26,.12);
  border-color:rgba(245,176,26,.35);color:var(--gold-300)}
.ans.good .dot{background:var(--success);border-color:var(--success);color:#04140A}
.ans.bad .dot{background:var(--danger);border-color:var(--danger);color:#fff}
.ans .best{white-space:normal;font-size:11px;flex-basis:100%;margin-left:42px}
.ans.dim{opacity:.5}

/* ============ FEEDBACK ============ */
.fb{padding:18px;border-radius:18px}
.fb .h{font-size:13.5px}
.emergency{font-size:13.5px}

/* ============ FIN DE DEFI / DE MONDE ============ */
.end h1{font-size:30px;letter-spacing:-.02em}
.end .who{font-size:15px}
.reward .t{font-size:11px}
.reward .n{font-size:15.5px}
.stat .l{font-size:12px}

/* ============ MEMO ============ */
.memo h3{font-size:16px}
.disclaimer{font-size:12px;line-height:1.6}
.section{font-size:12.5px}

/* ============ FEUILLE ET NAVIGATION ============ */
.sheet{max-height:85dvh;overflow-y:auto}
.sheet:not(.up){visibility:hidden;pointer-events:none}
.sheet.up{visibility:visible;pointer-events:auto}
.nav{backdrop-filter:blur(16px)}
.answers{display:flex;flex-direction:column}
.home-wrap>.stack{display:flex;flex-direction:column}

/* ============ ADAPTATIONS D'ECRAN ============ */
@media(min-width:760px){
  .home-wrap{padding-inline:26px}
  .q-body{padding:0 26px}
}
@media(max-width:360px){
  .topbar{padding-inline:12px;gap:8px}
  .topbar .brand .name{font-size:13px}
  .home-wrap{padding-inline:16px}
  .q-body{padding-inline:16px}
  .home-stats span{font-size:9.5px}
  .ans{padding:13px}
  .node{transform:translateX(calc(var(--dx)*.7))}
}

/* ============ INSTALLATION ANDROID (inchange) ============ */
.install-guide h4{margin:18px 0 8px;font-size:16px}
.install-guide p{font-size:15px;line-height:1.65;color:var(--ink-2)}
.android-install{width:100%;min-height:78px;padding:24px 18px;border-radius:18px;
  background:linear-gradient(180deg,var(--gold-400),var(--amber-600));color:#241701;
  font-size:22px;font-weight:800;animation:install-pulse 2.4s ease-in-out infinite}
.android-install:disabled{animation:none}
.install-status{font-size:14px;line-height:1.5;color:var(--ink-3);text-align:center;margin-top:10px}
.no-android-install .android-install{display:none}
@keyframes install-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,176,26,.30)}
  50%{box-shadow:0 0 0 10px rgba(245,176,26,.03);filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.android-install{animation:none}}
.control-code{display:block;width:100%;padding:16px;font:inherit;margin:16px 0;
  border:1px solid rgba(201,212,226,.30);border-radius:12px;color:var(--ink);
  background:rgba(255,255,255,.06)}

/* ============ MARGES DECORATIVES (grand ecran) ============ */
@media(min-width:800px){
  body:before,body:after{content:"";position:fixed;top:0;bottom:0;
    width:calc((100vw - 440px)/2);
    background:url('../assets/visuals/embleme-relief.webp') center/140px auto no-repeat;
    opacity:.5;pointer-events:none}
  body:before{left:0}body:after{right:0}
}

/* ============ BARRE DE RELECTURE (code de controle) ============ */
.devbar{display:flex;gap:10px;margin-top:18px}
.devbar .btn{min-height:46px;font-size:13px;letter-spacing:.03em;flex:1}