/* =======================
   MOCIMBO — UI/UX UPGRADE
   ======================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Orbitron:wght@600&display=swap');

:root{
  --bg:#090e14;
  --panel:rgba(16,22,30,.9);
  --panel-soft:rgba(12,18,26,.78);
  --border:#1a2b3a;
  --grid:#1d2f3e;

  --accent:#58d8ff;
  --accent-2:#2fb9f0;
  --ok:#7ff3c8;
  --sync:#ffd18a;
  --ready:#cfe7ff;

  --cta:#ffc057;
  --cta-2:#cf8a24;

  --text:#eaf3fb;
  --muted:#9eb1bf;

  --r:16px;
  --shadow:0 18px 40px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  font:14px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 50% -14%, #0d1520 0%, transparent 60%),
    radial-gradient(1100px 520px at 50% 110%, #0a1117 0%, #070b10 65%);
  display:grid; place-items:center; overflow:hidden; min-height:100vh;
}

/* petit flash d’entrée après la session */
body.enter-flash::after{
  content:""; position:fixed; inset:0; background:white; opacity:0; pointer-events:none;
  animation:enterFlash .28s ease-out both;
}
@keyframes enterFlash{
  0%{opacity:.7} 100%{opacity:0}
}

.wrap{ width:min(1000px,94vw); margin:auto; display:grid; gap:22px }

/* Eye holder (eye.js s'occupe du dessin) */
.eye-hero{ width:260px; height:260px; margin:6px auto 2px }
.eye-hero canvas{ width:100%; height:100%; display:block }

/* Header */
.brand{ text-align:center }
.brand h1{
  margin:0; font-family:'Orbitron', system-ui; font-weight:600;
  font-size:44px; letter-spacing:.6px; color:#e4f7ff;
  text-shadow:0 0 18px rgba(88,216,255,.35), 0 0 32px rgba(88,216,255,.18)
}
.subtitle{ margin-top:6px; color:var(--muted) }

/* Card (pas de slide, cadre dense) */
.card{
  position:relative; padding:22px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel), var(--panel-soft));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(120%) blur(10px);
  -webkit-backdrop-filter:saturate(120%) blur(10px);
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.32;
  background:
    linear-gradient(transparent 60%, rgba(88,216,255,.08) 60%),
    repeating-linear-gradient(0deg, rgba(88,216,255,.06) 0 44px, transparent 44px 88px),
    repeating-linear-gradient(90deg, rgba(88,216,255,.05) 0 60px, transparent 60px 120px);
}
.hidden{ display:none }

/* Menu background ambient */
.menu-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  transform:perspective(900px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transform-style:preserve-3d;
}
.menu-bg canvas#menuStars{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  mix-blend-mode:screen; image-rendering:pixelated;
  background:transparent;
}
.bg-orb{
  position:absolute; width:38vmax; height:38vmax; border-radius:50%;
  filter:blur(50px); opacity:.22; transform:translateZ(-30px);
}
.bg-orb.orb1{ left:-14%; top:-26%; background:radial-gradient(closest-side, #2bd0ff, transparent 70%) }
.bg-orb.orb2{ right:-16%; bottom:-30%; background:radial-gradient(closest-side, #ff7b4e, transparent 70%) }
.bg-grid{
  position:absolute; inset:0; opacity:.22; transform:translateZ(-60px);
  background:
    repeating-linear-gradient(0deg, rgba(88,216,255,.12) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(88,216,255,.1) 0 1px, transparent 1px 60px);
  animation:bgPan 24s linear infinite;
}
@keyframes bgPan{
  0%{transform:translate(-20px,-10px) translateZ(-60px)} 100%{transform:translate(40px,30px) translateZ(-60px)}
}
.bg-scanlines{
  position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay; transform:translateZ(0);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 2px, transparent 2px 4px);
  animation:scan 3.8s ease-in-out infinite;
}
@keyframes scan{
  0%{transform:translateY(-30%)} 50%{transform:translateY(30%)} 100%{transform:translateY(-30%)}
}

/* Menu */
#screen-menu h2{
  margin:6px 0 16px; font:800 28px/1.2 "Inter"; color:#eaf3fb; letter-spacing:.3px;
  display:flex; align-items:center; gap:12px; position:relative; z-index:1;
}
#screen-menu h2::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg,transparent,var(--grid),transparent) }
#screen-menu h2.pop-in{ animation:titlePop .75s cubic-bezier(.2,.7,.15,1) both }
@keyframes titlePop{
  0%{opacity:0; transform:translateY(8px) scale(.98); filter:blur(2px)}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

.menu-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 }
.stats{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--muted) }

/* Buttons */
.btn{
  position:relative; overflow:hidden;
  font:600 14px/1 "Inter"; letter-spacing:.2px;
  border-radius:12px; padding:12px 16px; cursor:pointer;
  background:linear-gradient(180deg, rgba(23,32,42,.95), rgba(12,18,24,.9));
  border:1px solid #274457; color:#e9f4ff;
  box-shadow:inset 0 0 0 1px rgba(88,216,255,.12);
  transition:box-shadow .25s ease, transform .12s ease, background .25s ease
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(88,216,255,.18) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(88,216,255,.55), 0 0 0 6px rgba(88,216,255,.16) }
.btn.primary{
  color:#231200; border-color:#e7b466;
  background:linear-gradient(180deg,#ffe2b5,#ffc35f 45%,#f0a83a 46%,#cf8a24 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.45); box-shadow:0 0 14px rgba(255,195,90,.35)
}
.btn.ghost{ color:#cfe7f6; border-color:rgba(88,216,255,.28) }
.btn .btn-ripple{
  position:absolute; width:10px; height:10px; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.5); pointer-events:none; mix-blend-mode:overlay;
  animation:ripple .45s ease-out both
}
@keyframes ripple{ from{opacity:.5; transform:translate(-50%,-50%) scale(.25)} to{opacity:0; transform:translate(-50%,-50%) scale(18)} }

/* Prompt & input */
.prompt{ display:grid; gap:12px; margin:10px 0 }
.word{
  font:800 30px/1.2 "Inter"; text-align:center; color:#eef7ff; letter-spacing:.4px;
  padding:16px; border-radius:12px;
  background:linear-gradient(180deg,#0f1b25,#0b151d);
  border:1px solid #284657; box-shadow:inset 0 0 12px rgba(88,216,255,.08)
}
#answerForm{ display:flex; gap:12px }
#answerInput{
  flex:1; padding:12px 14px; border-radius:12px; font-size:15px;
  background:#0a141b; color:#e3f6ff; border:1px solid #274356;
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease
}
#answerInput:focus{ outline:none; border-color:#43c7ff; background:#0b1620; box-shadow:0 0 0 3px rgba(67,199,255,.16) }
.hud{ display:flex; flex-wrap:wrap; gap:14px; color:var(--muted) }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(10px);
  background:#0f1a23; color:#dff6ff; border:1px solid #2a4a5d; border-radius:999px; padding:9px 16px;
  opacity:0; transition:opacity .22s, transform .22s; box-shadow:0 12px 28px rgba(0,0,0,.45)
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Lists */
.list .item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, rgba(18,26,34,.66), rgba(14,22,30,.58));
  border:1px solid rgba(88,216,255,.18); border-radius:12px; padding:12px 14px; margin-bottom:10px; color:#e6f2fb
}
.actions-row{ display:flex; gap:12px; justify-content:flex-end }

/* ===================== INTRO LD&R-like ===================== */
.ldr-overlay{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  background:#020305; color:#dff2ff; overflow:hidden; transition:opacity .22s ease, transform .22s ease;
}
.ldr-overlay.hide{ opacity:0; transform:scale(1.01) }
.ldr-tiles{
  display:grid; grid-template-columns:repeat(3, 92px); gap:18px; align-items:center; justify-content:center;
  filter:contrast(1.1) saturate(1.2);
}
.ldr-tile{
  position:relative; width:92px; height:92px; border:2px solid rgba(120,200,255,.55);
  box-shadow:0 0 22px rgba(88,216,255,.2) inset, 0 0 30px rgba(88,216,255,.15);
  background: radial-gradient(closest-side, rgba(88,216,255,.18), transparent 70%);
  opacity:0; transform:scale(.82) translateY(12px);
}
.ldr-tile::after{
  content:attr(data-glyph); position:absolute; inset:0; display:grid; place-items:center;
  font:800 46px/1 "Inter"; color:#e8fbff; text-shadow:0 0 14px rgba(88,216,255,.45);
}
.ldr-tile.reveal{ animation:tileIn .32s cubic-bezier(.2,.8,.16,1) forwards }
@keyframes tileIn{
  to{opacity:1; transform:scale(1) translateY(0)}
}
.ldr-tile.glitch{ animation:glitch .16s steps(2) 3 }
@keyframes glitch{
  0%{transform:translate(0,0)} 50%{transform:translate(2px,-1px)} 100%{transform:translate(-1px,1px)}
}
.ldr-grain{
  position:fixed; inset:-20%; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.8s steps(4) infinite;
}
@keyframes grain{ to{transform:translate3d(-3%,2%,0)} }
.ldr-flash{
  position:fixed; inset:0; background:white; opacity:0; pointer-events:none;
}
.ldr-flash.on{ animation:flash .12s ease-out both }
@keyframes flash{ from{opacity:.9} to{opacity:0} }
.ldr-skip{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2;
  padding:6px 10px; font:600 12px/1 "Inter"; letter-spacing:.4px;
  background:transparent; border:1px solid rgba(130,190,255,.35); color:#d5ecff; border-radius:999px;
}
.ldr-skip:hover{ background:rgba(130,190,255,.06) }

/* ===================== INTRO OVERLAY (Session Link) ===================== */
.hud-overlay{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 50% -12%, rgba(15,22,32,.96), rgba(7,11,17,.97));
  color:var(--text); transition:opacity .24s ease, transform .24s ease
}
.hud-overlay.hud-hide{ opacity:0; transform:scale(1.01) }

.hud-panel.session{
  width:min(1120px,94vw); max-height:80vh; position:relative; overflow:hidden;
  padding:16px 18px 18px; border-radius:18px; background:linear-gradient(180deg,var(--panel), var(--panel-soft));
  border:1px solid var(--border); box-shadow:var(--shadow);
  backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:saturate(120%) blur(10px)
}
.hud-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.28;
  background:
    linear-gradient(transparent 60%, rgba(88,216,255,.08) 60%),
    repeating-linear-gradient(0deg, rgba(88,216,255,.06) 0 44px, transparent 44px 88px),
    repeating-linear-gradient(90deg, rgba(88,216,255,.05) 0 60px, transparent 60px 120px)
}
.hud-scan{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(88,216,255,.12), transparent);
  mix-blend-mode:screen; opacity:.0; transform:translateY(-60%);
  animation:scanMove 3.6s ease-in-out infinite
}
@keyframes scanMove{
  0%{opacity:0; transform:translateY(-60%)}
  35%{opacity:.25}
  70%{opacity:0; transform:translateY(60%)}
  100%{opacity:0; transform:translateY(60%)}
}

/* Header */
.hud-head{
  position:relative; z-index:2; display:flex; align-items:center; gap:10px; color:#cfe6f8; letter-spacing:.4px;
  font-weight:800; font-size:14px; margin-bottom:8px
}
.hud-head .led{ width:9px; height:9px; border-radius:999px; background:#37e0ff; box-shadow:0 0 10px #37e0ff }
.hud-head .sep{ opacity:.5 }
.hud-head .meta{ margin-left:auto; color:#9fc6dc; font-weight:600 }

/* Layout corps */
.session-body{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:16px }
.session-col .block{
  background:linear-gradient(180deg, rgba(18,26,34,.7), rgba(14,22,30,.58));
  border:1px solid rgba(88,216,255,.16); border-radius:12px; padding:12px
}
.b-title{ color:#bfe4fb; font-weight:800; margin-bottom:8px; letter-spacing:.4px }
.b-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px; border-radius:10px; margin-bottom:8px;
  background:linear-gradient(180deg, rgba(16,24,32,.6), rgba(14,22,30,.55));
  border:1px solid rgba(88,216,255,.12)
}
.row-label{ font-weight:700; color:#e6f4ff }
.row-detail{ color:#9fd4ff } .row-detail.muted{ color:#9eb1bf }

.chip{
  font:800 11px/1 "Inter"; padding:4px 8px; border-radius:999px; border:1px solid rgba(88,216,255,.22);
  color:#bfe9ff; background:rgba(88,216,255,.12); box-shadow:inset 0 0 12px rgba(88,216,255,.08)
}
.chip.ok{ color:#d7ffe9; background:rgba(127,243,200,.12); border-color:rgba(127,243,200,.28) }
.chip.synced{ color:#fff0d8; background:rgba(255,209,138,.12); border-color:rgba(255,209,138,.28) }
.chip.ready{ color:#e6f2ff; background:rgba(207,231,255,.12); border-color:rgba(207,231,255,.28) }
.chip.online{ animation:chipPulse 1.8s ease-in-out infinite }
@keyframes chipPulse{
  0%,100%{ box-shadow:inset 0 0 10px rgba(88,216,255,.12), 0 0 0 0 rgba(88,216,255,0) }
  50%{ box-shadow:inset 0 0 16px rgba(88,216,255,.25), 0 0 10px 2px rgba(88,216,255,.18) }
}

/* Contract / exposition */
.risk{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px; padding:10px 12px }
.risk-label{ color:#fbd0c7; font-weight:800 }
.risk-bar{ position:relative; height:10px; border-radius:999px; overflow:hidden; background:linear-gradient(180deg,#2c0f0f,#200c0c); border:1px solid #5a3030 }
.risk-fill{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg,#ff9f73,#ff5a4e);
  box-shadow:0 0 14px rgba(255,90,78,.35)
}
.risk-fill.hot{ animation:riskPulse 1.6s ease-in-out infinite }
@keyframes riskPulse{
  0%,100%{ box-shadow:0 0 14px rgba(255,90,78,.35) }
  50%{ box-shadow:0 0 24px rgba(255,90,78,.65) }
}
.risk-pct{ color:#ffd3c7; font-weight:900 }

/* Callout */
.hero-callout{
  background:linear-gradient(180deg, rgba(18,26,34,.7), rgba(14,22,30,.58));
  border:1px solid rgba(88,216,255,.16); border-radius:12px; padding:14px 12px; margin-bottom:12px
}
.hc-title{ font-weight:900; color:#e6f4ff; margin-bottom:6px; letter-spacing:.3px }
.hc-sub{ color:#a8c1d0; margin-bottom:10px }
.hc-bullets{ margin:0; padding-left:18px; color:#9eb8c9; line-height:1.5 }

/* big progress */
.big-progress{
  position:relative; height:14px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg, rgba(17,26,34,.86), rgba(12,18,24,.9)); border:1px solid #213748
}
.big-bar{
  position:absolute; inset:0; width:0%;
  background:
    linear-gradient(90deg, rgba(88,216,255,.95), rgba(141,242,255,.98)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 12px, rgba(255,255,255,0) 12px 24px);
  box-shadow:0 0 16px rgba(88,216,255,.35)
}
.big-pct{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-weight:900; color:#eaf6ff; letter-spacing:.5px; text-shadow:0 0 6px rgba(88,216,255,.25)
}

/* Skip button */
.hud-skip{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:transparent; border:1px solid rgba(88,216,255,.25);
  color:#cfe7fb; border-radius:999px; padding:8px 14px; cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)
}
.hud-skip:hover{ background:rgba(88,216,255,.06) }

/* Responsive */
@media (max-width: 820px){
  .session-body{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .wrap{ gap:18px }
  .brand h1{ font-size:34px }
  #screen-menu h2{ font-size:22px }
  .menu-grid{ grid-template-columns:1fr; gap:10px }
}

/* Respect du mode réduit */
@media (prefers-reduced-motion: reduce){
  .bg-grid, .bg-scanlines, .ldr-grain, .ldr-flash.on, .hud-scan { animation:none !important }
  .menu-bg{ transform:none !important }
  #screen-menu h2.pop-in{ animation:none !important }
}

/* --- 1) Autoriser le scroll sur petits écrans / petites hauteurs --- */
@media (max-width: 900px), (max-height: 740px) {
  html, body { height: auto; }         /* ne pas forcer 100% de hauteur */
  body { overflow: auto; }              /* au lieu de overflow:hidden */
  .wrap { padding: 16px 12px; }         /* un peu d’air pour que rien ne touche les bords */
}

/* --- 2) Menu plus compact en mobile : grille 1 colonne --- */
@media (max-width: 560px) {
  .menu-grid { grid-template-columns: 1fr; }
  #screen-menu .btn { padding: 12px 14px; } /* optionnel: boutons un poil plus compacts */
  #screen-menu .stats { font-size: 12px; gap: 10px; } /* stats lisibles sans prendre trop de place */
}

/* --- 3) Sécurité pour l'encoche iOS (facultatif mais utile) --- */
@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}