/* GeoQuizzes — "Trek" design system (per design handoff).
   Nunito, crisp white + green pop, chunky 3D press buttons. */

:root {
  --green-500:#2ec463; --green-600:#24a04e; --green-700:#2ea258;
  --green-50:#eefaf1; --green-100:#bfeccb; --green-track:#d4f0dc; --green-tint:#f4fcf6;
  --red-500:#ff4b4b; --red-600:#d63c3c; --red-text:#e04343; --red-50:#fff0f0; --red-100:#ffd6d6;
  --blue-500:#2aa8f0; --blue-50:#eaf6fe;
  --yellow-500:#ffc800; --yellow-text:#e6a800; --yellow-50:#fff4d6;
  --orange-500:#ff8a3d; --purple-text:#8b6fe0; --purple-50:#f3eefe;
  --ink:#3c3c3c; --gray-500:#9a9a9a; --gray-400:#afafaf; --gray-300:#c9c9c9;
  --border:#e5e5e5; --shadow:#efefef; --bg:#f7f7f7; --line:#f0f0f0; --white:#fff;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; overflow-x:hidden; max-width:100%; }
body {
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; }
button { font-family:inherit; }

/* ---------- shared components ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; text-decoration:none; font-weight:900; color:#fff;
  background:var(--green-500); border-radius:16px; padding:16px 40px; font-size:17px;
  box-shadow:0 4px 0 var(--green-600); transition:transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--green-600); }
.btn.block { width:100%; }
.btn.ghost { background:#fff; color:var(--gray-500); border:2px solid var(--border); box-shadow:0 4px 0 var(--shadow); padding:14px 32px; }
.btn.ghost:active { box-shadow:0 1px 0 var(--shadow); }
.btn.blue { background:var(--blue-500); box-shadow:0 4px 0 #2189c6; }
.btn.blue:active { box-shadow:0 1px 0 #2189c6; }
.btn.red { background:var(--red-500); box-shadow:0 4px 0 var(--red-600); }
.btn:disabled { background:var(--border); color:var(--gray-400); box-shadow:none; cursor:default; transform:none; }

.chip { display:inline-flex; align-items:center; gap:6px; background:var(--yellow-50);
  color:var(--yellow-text); border-radius:12px; padding:6px 12px; font-weight:900; font-size:15px; }

.brand { font-size:22px; font-weight:900; color:var(--green-500); white-space:nowrap; }
.brand .logo { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:linear-gradient(160deg,#35d16e,#24a04e); vertical-align:-6px; margin-right:6px; }

.lang { display:inline-flex; border:2px solid var(--border); border-radius:12px; overflow:hidden; font-weight:900; font-size:12px; }
.lang button { border:0; background:#fff; color:var(--gray-400); padding:6px 10px; cursor:pointer; }
.lang button.active { background:var(--green-50); color:var(--green-700); }

/* ============ LANDING ============ */
.lp { max-width:1180px; margin:0 auto; padding:0 24px; }
.lp-nav { display:flex; align-items:center; justify-content:space-between; padding:22px 0; gap:16px; }
.lp-nav .brand { font-size:24px; }
.lp-nav-links { display:flex; align-items:center; gap:28px; font-weight:900; font-size:15px; color:var(--gray-500); }
.lp-nav-links a { color:inherit; text-decoration:none; }

.hero { display:flex; align-items:center; gap:56px; padding:36px 0 72px; }
.hero-copy { flex:1; min-width:0; }
.overline { display:inline-block; background:var(--yellow-50); color:var(--yellow-text);
  border-radius:999px; padding:8px 18px; font-size:13px; font-weight:900; letter-spacing:.06em; }
.hero h1 { font-size:60px; font-weight:900; line-height:1.05; margin:20px 0 0; }
.hero h1 .g { color:var(--green-500); }
.hero p.lead { font-size:20px; font-weight:700; color:var(--gray-500); margin:18px 0 0; max-width:480px; }
.hero-cta { display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-note { display:flex; align-items:center; gap:8px; margin-top:24px; font-size:14px; font-weight:800; color:var(--gray-400); }

/* hero mock card */
.hero-mock { width:420px; max-width:100%; position:relative; flex:none; }
.qcard { background:#fff; border:2px solid var(--shadow); border-radius:28px; padding:26px;
  box-shadow:0 20px 44px rgba(0,0,0,.10); transform:rotate(1.5deg); }
.qcard .row { display:flex; align-items:center; gap:14px; }
.qcard .track { flex:1; height:12px; background:var(--shadow); border-radius:6px; overflow:hidden; }
.qcard .track > i { display:block; height:100%; width:40%; background:var(--green-500); }
.qcard .flagbox { background:var(--bg); border:2px solid var(--shadow); border-radius:20px;
  display:grid; place-items:center; padding:22px 0; margin-top:16px; }
.qcard .flagbox img { width:150px; border-radius:8px; border:1px solid var(--border); }
.qcard h3 { font-size:18px; font-weight:900; margin:16px 0 0; }
.qcard .opt { border:2px solid var(--border); border-radius:14px; padding:12px 16px; font-weight:900;
  font-size:15px; box-shadow:0 3px 0 var(--shadow); margin-top:10px; display:flex; justify-content:space-between; }
.qcard .opt.ok { border-color:var(--green-500); background:var(--green-50); color:var(--green-700); box-shadow:0 3px 0 var(--green-100); }
.float { position:absolute; border-radius:16px; padding:10px 18px; font-weight:900; font-size:16px; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.float.xp { top:-18px; right:-16px; background:var(--yellow-50); color:var(--yellow-text); transform:rotate(6deg); }
.float.streak { bottom:-16px; left:-20px; background:var(--blue-50); color:var(--blue-500); transform:rotate(-4deg); }

.section-title { text-align:center; font-size:40px; font-weight:900; }
.section-sub { text-align:center; font-size:18px; font-weight:700; color:var(--gray-500); margin-top:8px; }

.modes { background:var(--bg); padding:70px 0; margin-top:8px; }
.modes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.mode-card { background:#fff; border-radius:24px; padding:34px; text-align:center; box-shadow:0 4px 0 #e8e8e8; text-decoration:none; color:inherit; display:block; }
.mode-card .ic { width:84px; height:84px; border-radius:24px; display:grid; place-items:center; font-size:42px; margin:0 auto; }
.mode-card h3 { font-size:22px; font-weight:900; margin:18px 0 0; }
.mode-card p { font-size:15px; font-weight:700; color:var(--gray-500); margin:8px 0 0; }

.regions { display:flex; align-items:center; gap:64px; padding:80px 0; }
.regions .col { flex:1; }
.regions h2 { font-size:40px; font-weight:900; line-height:1.1; margin:0; }
.regions p { font-size:18px; font-weight:700; color:var(--gray-500); margin:16px 0 0; max-width:440px; }
.region-list { width:520px; max-width:100%; display:flex; flex-direction:column; gap:14px; }
.region-row { background:#fff; border:2px solid var(--border); border-radius:20px; padding:18px 22px; box-shadow:0 3px 0 var(--shadow); }
.region-row.active { border-color:var(--green-500); box-shadow:0 3px 0 #d7f2df; }
.region-row .rhead { display:flex; justify-content:space-between; font-size:17px; font-weight:900; }
.region-row .bar { height:12px; background:var(--shadow); border-radius:6px; margin-top:10px; overflow:hidden; }
.region-row .bar > i { display:block; height:100%; }

.final-cta { background:var(--green-500); padding:80px 24px; text-align:center; color:#fff; }
.final-cta h2 { font-size:44px; font-weight:900; line-height:1.1; margin:0; }
.final-cta p { font-size:18px; font-weight:700; opacity:.9; margin:14px 0 0; }
.final-cta .btn { background:#fff; color:var(--green-700); box-shadow:0 5px 0 var(--green-600); margin-top:28px; }

.lp-footer { display:flex; justify-content:space-between; align-items:center; padding:26px 0;
  font-size:14px; font-weight:800; color:var(--gray-400); flex-wrap:wrap; gap:14px; }
.lp-footer .links { display:flex; gap:24px; }

/* ============ GAME ============ */
.game { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; max-width:760px; margin:0 auto;
  padding-top:env(safe-area-inset-top); }
.game-top { display:flex; align-items:center; gap:16px; padding:18px 24px 0; }
.game-top .x { font-size:22px; font-weight:900; color:var(--gray-300); background:none; border:0; cursor:pointer; }
.game-top .track { flex:1; height:16px; background:var(--shadow); border-radius:8px; overflow:hidden; }
.game-top .track > i { display:block; height:100%; width:0; background:var(--green-500); border-radius:8px; transition:width .3s ease; }
.game-top .counter { font-size:16px; font-weight:900; color:var(--gray-400); font-variant-numeric:tabular-nums; }

.game-body { flex:1; display:flex; flex-direction:column; padding:24px; }

/* mode select */
.modesel h1 { font-size:28px; font-weight:900; margin:6px 0 2px; }
.modesel .sub { font-size:15px; font-weight:700; color:var(--gray-500); margin:0 0 22px; }
.modesel .list { display:flex; flex-direction:column; gap:14px; }
.msel { display:flex; align-items:center; gap:16px; border:2px solid var(--border); border-radius:20px;
  padding:18px; box-shadow:0 4px 0 var(--shadow); background:#fff; cursor:pointer; text-align:left; width:100%;
  transition:transform .08s, box-shadow .08s; }
.msel:active { transform:translateY(3px); box-shadow:0 1px 0 var(--shadow); }
.msel.hi { border-color:var(--green-500); background:var(--green-tint); box-shadow:0 4px 0 #d7f2df; }
.msel .ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:28px; flex:none; }
.msel .t { flex:1; }
.msel .t b { display:block; font-size:17px; font-weight:900; }
.msel .t span { font-size:13px; font-weight:700; color:var(--gray-500); }
.msel .chev { font-weight:900; color:var(--gray-300); font-size:20px; }
.msel.soon { opacity:.5; cursor:default; }

/* question */
.q-title { font-size:24px; font-weight:900; line-height:1.2; text-align:center; }
.stimulus { margin:22px auto 0; background:var(--bg); border:2px solid var(--shadow); border-radius:24px;
  display:grid; place-items:center; padding:28px 16px; max-width:420px; width:100%; }
.stimulus img.flag { width:100%; max-width:240px; border-radius:10px; border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.stimulus .country { font-size:32px; font-weight:900; text-align:center; }
.stimulus .country-row { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.stimulus .mini-flag { width:80px; border-radius:7px; border:1px solid var(--border); box-shadow:0 3px 10px rgba(0,0,0,.1); }
.options { display:flex; flex-direction:column; gap:12px; margin:24px auto 0; max-width:460px; width:100%; }
.opt { display:flex; align-items:center; gap:14px; border:2px solid var(--border); border-radius:16px;
  padding:15px 18px; font-weight:900; font-size:17px; box-shadow:0 4px 0 var(--shadow); background:#fff;
  cursor:pointer; text-align:left; width:100%; color:var(--ink); transition:transform .06s, box-shadow .06s; }
.opt:active { transform:translateY(2px); box-shadow:0 2px 0 var(--shadow); }
.opt .num { width:30px; height:30px; border:2px solid var(--border); border-radius:8px; display:grid;
  place-items:center; font-size:13px; color:var(--gray-400); flex:none; }
.opt .mark { margin-left:auto; }
.opt.selected { border-color:var(--blue-500); background:var(--blue-50); }
.opt.selected .num { border-color:var(--blue-500); color:var(--blue-500); }
.opt.correct { border-color:var(--green-500); background:var(--green-50); color:var(--green-700); box-shadow:0 4px 0 var(--green-100); }
.opt.correct .num { border-color:var(--green-500); color:var(--green-700); }
.opt.wrong { border-color:var(--red-500); background:var(--red-50); color:var(--red-text); box-shadow:0 4px 0 var(--red-100); }
.opt.wrong .num { border-color:var(--red-500); color:var(--red-text); }
.opt.faded { color:var(--gray-300); box-shadow:none; }
.opt.faded .num { color:var(--gray-300); }
.opt:disabled { cursor:default; }

.game-foot { padding:18px 24px calc(18px + env(safe-area-inset-bottom)); border-top:2px solid var(--line); }
.game-foot.correct { background:var(--green-50); border-top:0; }
.game-foot.wrong { background:var(--red-50); border-top:0; }
.foot-row { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:712px; margin:0 auto; }
.foot-msg b { font-size:19px; font-weight:900; }
.foot-msg.correct b { color:var(--green-700); }
.foot-msg.wrong b { color:var(--red-text); }
.foot-msg small { display:block; font-size:13px; font-weight:700; color:var(--gray-500); margin-top:2px; }
.hint { font-size:13px; font-weight:800; color:var(--gray-400); }

/* results */
.results { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; }
.results .trophy { font-size:60px; }
.results h1 { font-size:30px; font-weight:900; color:var(--green-700); margin:8px 0 2px; }
.results .ctx { font-size:15px; font-weight:700; color:var(--gray-500); }
.ring { width:190px; height:190px; border-radius:50%; display:grid; place-items:center; margin:26px 0; }
.ring .inner { width:150px; height:150px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.ring .score { font-size:42px; font-weight:900; }
.ring .lbl { font-size:12px; font-weight:900; color:var(--gray-400); letter-spacing:.04em; }
.stats { display:flex; gap:12px; width:100%; max-width:440px; }
.stat { flex:1; border-radius:18px; padding:16px 0; }
.stat b { font-size:24px; font-weight:900; display:block; }
.stat span { font-size:11px; font-weight:900; }
.stat.xp { background:var(--yellow-50); } .stat.xp b { color:var(--yellow-text); } .stat.xp span { color:#cfa64a; }
.stat.streak { background:var(--blue-50); } .stat.streak b { color:var(--blue-500); } .stat.streak span { color:#7aa8c4; }
.stat.acc { background:var(--purple-50); } .stat.acc b { color:var(--purple-text); } .stat.acc span { color:#a795d6; }
.results .actions { display:flex; gap:14px; width:100%; max-width:440px; margin-top:18px; }
.results .actions .btn { flex:1; padding:15px 0; }

/* download funnel CTA on results */
.dl-cta { width:100%; max-width:440px; margin:22px 0 0; background:var(--green-50);
  border:2px solid var(--green-100); border-radius:20px; padding:18px; }
.dl-title { font-weight:900; font-size:16px; }
.dl-btns { display:flex; gap:10px; margin-top:12px; }
.dl-btns .btn { flex:1; padding:13px 0; font-size:15px; }
.btn.dark { background:#1a1a1a; color:#fff; box-shadow:0 4px 0 #000; }
.btn.dark:active { box-shadow:0 1px 0 #000; }
.btn.dark:disabled { background:var(--gray-300); color:#fff; box-shadow:none; }
.dl-note { font-size:12px; font-weight:700; color:var(--gray-500); margin-top:10px; }

/* ============ GAME MODAL (opens over the landing) ============ */
.modal-backdrop { position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(15,18,20,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.modal-backdrop.open { display:flex; }
.modal-panel { position:relative; background:#fff; border-radius:24px; width:100%;
  max-width:820px; height:min(92vh,820px); display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.modal-panel .game { min-height:0; height:100%; flex:1; }
.modal-panel .game-body { overflow-y:auto; }
.modal-close { position:absolute; top:12px; right:14px; z-index:3; width:38px; height:38px;
  background:#fff; border:2px solid var(--border); border-radius:12px; font-size:17px; font-weight:900;
  color:var(--gray-400); cursor:pointer; box-shadow:0 3px 0 var(--shadow); }
.modal-close:active { box-shadow:0 1px 0 var(--shadow); transform:translateY(2px); }
@media (max-width:600px){
  .modal-backdrop { padding:0; }
  .modal-panel { max-width:100%; height:100%; border-radius:0; }
  /* keep the top nav within the viewport: brand + language switch only
     (the hero has its own START PLAYING CTA) */
  .lp-nav { gap:10px; }
  .lp-nav-links { gap:12px; }
  .lp-nav-links .btn { display:none; }
}

@media (max-width:900px){
  .hero { flex-direction:column; gap:40px; padding-bottom:48px; }
  .hero h1 { font-size:44px; }
  .modes-grid { grid-template-columns:1fr; }
  .regions { flex-direction:column; gap:36px; padding:56px 0; }
  .region-list { width:100%; }
  .section-title, .regions h2, .final-cta h2 { font-size:30px; }
  .lp-nav-links a:not(.btn) { display:none; }
}