/* Horloquizz — Quiz horloger : charte « cartes teintées sur fond crème » */

:root{
  --cream:#FFF6EC;
  --ink:#2B2733;
  --muted:#8A8594;
  --card:#ffffff;
  --line:#EFE6D8;

  --a-bg:#EEEBFD; --a-badge:#7C6BF0; --a-text:#3B3357;
  --b-bg:#E7F8F3; --b-badge:#12A892; --b-text:#0C5A4E;
  --c-bg:#FFF1D6; --c-badge:#F2A91B; --c-text:#8A5A0B;
  --d-bg:#FFEAE6; --d-badge:#FF6B5E; --d-text:#B84034;

  --coral:#FF6B5E; --coral-dark:#B84034;
  --mint:#12A892; --mint-dark:#0C5A4E;
  --violet:#7C6BF0;
  --good:#1FBF7E; --good-bg:#DDF4E8; --good-text:#0B7A4D;
  --bad:#E2483D;  --bad-bg:#FFE3E0;  --bad-text:#B03127;

  --radius:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#E7DFCF;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

#app{
  max-width:440px;
  min-height:100vh;
  margin:0 auto;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  position:relative;
}

.screen{ padding:20px 18px 26px; flex:1; display:flex; flex-direction:column; }
/* contenu centré verticalement pour éviter les grands vides en bas de page */
.screen-main{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:13px; min-height:0; }
.screen-main.top{ justify-content:flex-start; }   /* listes : contenu aligné en haut */
.screen-foot{ padding-top:16px; }

/* ---------- Header / topbar ---------- */
.brand{ display:flex; align-items:center; gap:9px; }
.brand .logo{
  width:34px;height:34px;border-radius:11px;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.brand .name{ font-size:18px;font-weight:600;letter-spacing:.2px; }

.topbar{ display:flex;align-items:center;justify-content:space-between;margin-bottom:6px; }
.icon-btn{
  border:none;background:none;color:#C2BBA9;font-size:22px;cursor:pointer;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;
}
.icon-btn:hover{ background:#0000000a; }

.chip-streak{
  display:inline-flex;align-items:center;gap:6px;background:var(--d-bg);
  padding:7px 14px;border-radius:999px;color:var(--coral);font-weight:600;font-size:15px;
}
.chip-streak small{ color:var(--coral-dark);font-weight:500;font-size:12px; }
.chip-progress{
  display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;color:var(--muted);font-weight:500;font-size:13px;
}

/* ---------- Home ---------- */
.greeting{ font-size:23px;font-weight:600;margin:0 0 3px; }
.subtitle{ color:var(--muted);font-size:14px;margin:0; }

.level-chip{
  display:inline-flex;align-items:center;gap:5px;background:var(--c-bg);color:var(--c-text);
  font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;
}

.mode-card{
  border:none;width:100%;text-align:left;cursor:pointer;border-radius:18px;
  padding:18px;display:flex;align-items:center;gap:13px;margin-bottom:0;transition:transform .08s ease;
}
.mode-card:active{ transform:scale(.985); }
.mode-card .m-ico{
  width:46px;height:46px;flex:none;border-radius:14px;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.mode-card .m-body{ flex:1; }
.mode-card .m-title{ font-size:16px;font-weight:600;margin:0; }
.mode-card .m-desc{ font-size:12.5px;margin:3px 0 0;line-height:1.4; }
.mode-card .m-chev{ font-size:20px;opacity:.5; }

.mode-practice{ background:var(--b-bg); }
.mode-practice .m-ico{ background:var(--mint); }
.mode-practice .m-title{ color:var(--mint-dark); }
.mode-practice .m-desc{ color:#3B8775; }
.mode-practice .m-chev{ color:var(--mint); }

.mode-survival{ background:var(--d-bg); }
.mode-survival .m-ico{ background:var(--coral); }
.mode-survival .m-title{ color:var(--coral-dark); }
.mode-survival .m-desc{ color:#C26157; }
.record-badge{
  display:flex;flex-direction:column;align-items:center;background:#fff;padding:6px 11px;border-radius:11px;
}
.record-badge b{ font-size:16px;color:var(--coral);line-height:1; }
.record-badge span{ font-size:9px;color:var(--coral-dark);letter-spacing:.5px;margin-top:2px; }

.stats-row{ display:flex;gap:11px;margin-top:2px; }
.stat{ flex:1;border-radius:14px;padding:13px;text-align:center; }
.stat b{ display:block;font-size:20px;font-weight:600; }
.stat span{ font-size:11.5px; }
.stat.violet{ background:var(--a-bg); } .stat.violet b{ color:var(--violet); } .stat.violet span{ color:#5B4FC0; }
.stat.amber{ background:var(--c-bg); }  .stat.amber b{ color:#C77F0A; }     .stat.amber span{ color:var(--c-text); }

.link-row{ text-align:center; }
.text-link{ background:none;border:none;color:var(--violet);font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px; }
.foot-hint{ text-align:center;color:#B7AE9C;font-size:11.5px;margin-top:14px; }

/* ---------- Question ---------- */
.pill{
  display:inline-block;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;font-weight:600;background:var(--a-bg);color:#5B4FC0;
}
.q-image{ width:100%;max-height:170px;object-fit:cover;border-radius:14px;margin:14px 0 4px;border:1px solid var(--line); }
.question{ font-size:21px;font-weight:600;line-height:1.32;margin:14px 0 22px;text-align:center; }
.q-head{ text-align:center;margin:0 0 4px; }

.options{ display:flex;flex-direction:column;gap:12px; }
.option{
  display:flex;align-items:center;gap:12px;border:2px solid transparent;border-radius:var(--radius);
  padding:15px 14px;cursor:pointer;font-size:15px;font-weight:500;transition:transform .07s ease,opacity .2s ease;
  text-align:left;width:100%;
}
.option:active{ transform:scale(.99); }
.option .badge{
  width:29px;height:29px;flex:none;border-radius:9px;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}
.opt-a{ background:var(--a-bg);color:var(--a-text); } .opt-a .badge{ background:var(--a-badge); }
.opt-b{ background:var(--b-bg);color:var(--b-text); } .opt-b .badge{ background:var(--b-badge); }
.opt-c{ background:var(--c-bg);color:var(--c-text); } .opt-c .badge{ background:var(--c-badge); }
.opt-d{ background:var(--d-bg);color:var(--d-text); } .opt-d .badge{ background:var(--d-badge); }

.answered .option{ cursor:default; }
.option.dim{ opacity:.45; }
.option.correct{ background:var(--good-bg)!important;border-color:var(--good);color:var(--good-text)!important; }
.option.correct .badge{ background:var(--good)!important; }
.option.wrong{ background:var(--bad-bg)!important;border-color:var(--bad);color:var(--bad-text)!important; }
.option.wrong .badge{ background:var(--bad)!important; }

/* ---------- Feedback panel ---------- */
.feedback{ margin-top:0; }
.anecdote{ background:var(--c-bg);border-radius:14px;padding:14px;margin-bottom:14px; }
.anecdote .label{ font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#B07A12;font-weight:600;margin:0 0 6px; }
.anecdote p{ margin:0;font-size:13.5px;line-height:1.55;color:#6E4E0C; }
.verdict{ text-align:center;font-weight:600;font-size:15px;margin:0 0 12px; }
.verdict.ok{ color:var(--good-text); }
.verdict.ko{ color:var(--bad-text); }

/* ---------- Buttons ---------- */
.btn{
  width:100%;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .07s ease,filter .15s ease;
}
.btn:active{ transform:scale(.99); }
.btn-primary{ background:var(--coral);color:#fff; }
.btn-primary:hover{ filter:brightness(1.04); }
.btn-mint{ background:var(--mint);color:#fff; }
.btn-ghost{ background:#fff;color:var(--ink);border:1px solid var(--line); }
.btn + .btn{ margin-top:10px; }

/* ---------- Game over ---------- */
.center-screen{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.big-emoji{ font-size:46px;line-height:1; }
.go-title{ font-size:24px;font-weight:600;margin:14px 0 4px; }
.go-sub{ color:var(--muted);font-size:14px;margin:0 0 18px;line-height:1.5; }
.score-ring{
  width:120px;height:120px;border-radius:50%;border:6px solid var(--coral);
  display:flex;flex-direction:column;align-items:center;justify-content:center;margin:4px 0 18px;
}
.score-ring b{ font-size:40px;font-weight:700;color:var(--coral-dark);line-height:1; }
.score-ring span{ font-size:11px;color:var(--coral);letter-spacing:.5px;margin-top:3px; }
.new-record{ display:inline-flex;align-items:center;gap:6px;background:var(--c-bg);color:var(--c-text);
  font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;margin-bottom:16px; }

.pseudo-form{ width:100%;max-width:320px;margin:6px auto 0; }
.pseudo-form label{ display:block;text-align:left;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:500; }
.pseudo-form input{
  width:100%;border:1px solid var(--line);border-radius:13px;padding:14px;font-size:16px;
  background:#fff;color:var(--ink);outline:none;font-family:inherit;
}
.pseudo-form input:focus{ border-color:var(--coral); }
.pseudo-form .btn{ margin-top:11px; }

/* ---------- Leaderboard ---------- */
.lb-title{ font-size:22px;font-weight:600;text-align:center;margin:6px 0 2px; }
.lb-sub{ text-align:center;color:var(--muted);font-size:13px;margin:0 0 18px; }
.lb-list{ display:flex;flex-direction:column;gap:8px;width:100%; }
.lb-row{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;
}
.lb-row.me{ border-color:var(--coral);background:var(--d-bg); }
.lb-rank{
  width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;background:#F1ECE2;color:var(--muted);
}
.lb-row:nth-child(1) .lb-rank{ background:var(--c-bg);color:#B07A12; }
.lb-row:nth-child(2) .lb-rank{ background:#EDE9E0;color:#8A8276; }
.lb-row:nth-child(3) .lb-rank{ background:var(--d-bg);color:var(--coral-dark); }
.lb-pseudo{ flex:1;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lb-date{ font-size:11px;color:var(--muted);font-weight:400; }
.lb-score{ font-weight:700;font-size:17px;color:var(--coral); }
.lb-empty{ text-align:center;color:var(--muted);font-size:14px;padding:30px 0; }
.lb-actions{ padding-top:0; }
/* statut du classement en ligne (chargement / hors-ligne) */
.lb-status{ text-align:center;font-size:12px;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;justify-content:center;gap:6px; }
.lb-status.online{ color:var(--mint-dark); }
.lb-status.offline{ color:var(--c-text); }
.spin{ display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--coral);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.error-box{ background:var(--bad-bg);color:var(--bad-text);border-radius:14px;padding:18px;font-size:14px;line-height:1.5; }

/* ---------- À propos ---------- */
.about-link{ color:var(--muted); font-size:13px; }
.about-lead{ font-size:15px; line-height:1.6; color:var(--ink); margin:2px 0 4px; text-align:center; }
.about-card{ background:#fff; border:0.5px solid var(--line); border-radius:14px; padding:14px 16px; width:100%; }
.about-h{ font-size:14px; font-weight:600; margin:0 0 5px; color:var(--ink); }
.about-p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }
.about-p a{ color:var(--coral); text-decoration:none; }
.about-foot{ text-align:center; color:var(--muted); font-size:12px; margin:4px 0 0; }

/* ---------- Responsive : desktop ---------- */
.stage{ min-height:100vh; }
.hero{ display:none; }

/* À partir des tablettes : le jeu devient une carte centrée façon app */
@media (min-width:600px){
  .stage{
    display:flex; align-items:center; justify-content:center;
    gap:56px; padding:32px; min-height:100vh; box-sizing:border-box;
  }
  #app{
    flex:none;            /* largeur fixe, identique sur tous les écrans */
    width:420px;
    min-height:0;
    height:min(820px, 94vh);
    border-radius:30px;
    border:1px solid rgba(60,40,20,.10);
    box-shadow:0 24px 60px -22px rgba(60,40,20,.30);
    overflow-y:auto;
    overflow-x:hidden;
  }
  /* centrage par marges auto : défile sans rogner si le contenu dépasse */
  .screen-main{ flex:0 1 auto; margin-top:auto; margin-bottom:auto; }
  /* listes : collées en haut, boutons poussés en bas */
  .screen-main.top{ margin-top:0; }
}

/* Grands écrans : on affiche le panneau de présentation à gauche */
@media (min-width:1000px){
  .hero{ display:block; width:330px; flex:none; color:var(--ink); }
  .hero-brand{ display:flex; align-items:center; gap:11px; font-size:22px; font-weight:600; }
  .hero-brand .logo{
    width:42px; height:42px; border-radius:13px; background:var(--coral); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:22px;
  }
  .hero-title{ font-size:32px; line-height:1.2; font-weight:600; margin:26px 0 0; }
  .hero-sub{ font-size:15px; line-height:1.6; color:var(--muted); margin:14px 0 0; }
  .hero-points{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:13px; }
  .hero-points li{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:500; }
  .hero-points li span{
    width:34px; height:34px; flex:none; border-radius:10px; background:#fff;
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:17px;
  }
}