/* GlobEd Challenge — page template styles */
.page-template-page-globed-quiz .site-content > .ast-container,
.page-template-templates-page-globed-quiz-php .site-content > .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.globed-quiz-page{
  --bg:#FFFFFF;
  --surface:#F5F8FD;
  --ink:#002852;
  --ink-mid:#4A6480;
  --ink-dim:#768899;
  --electric:#1547EB;
  --green:#05A86B;
  --positive:#0AA322;
  --positive-tint:rgba(10,163,34,.10);
  --negative:#B52424;
  --negative-tint:rgba(181,36,36,.09);
  --line:rgba(0,40,82,.13);
  --line-soft:rgba(0,40,82,.08);
  --pad:clamp(18px,5vw,44px);
}

.globed-quiz-page, .globed-quiz-page *{box-sizing:border-box}
.globed-quiz-page{-webkit-text-size-adjust:100%;


  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.globed-quiz-page .hidden{display:none !important;}
.globed-quiz-page button{font-family:inherit;}
.globed-quiz-page :focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  .globed-quiz-page *, .globed-quiz-page *::before, .globed-quiz-page *::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

.globed-quiz-page .screen{
  min-height:100vh;min-height:100svh;
  background:var(--bg);
  display:flex;flex-direction:column;
  padding:clamp(20px,4vw,32px) var(--pad) clamp(26px,5vw,40px);
  padding-top:max(clamp(20px,4vw,32px), env(safe-area-inset-top));
  overflow-x:hidden;
}
.globed-quiz-page .inner{width:100%;max-width:640px;margin:0 auto;flex:1;display:flex;flex-direction:column;}

/* ============================================================
   MASTHEAD — the same block leads every page.
   .full on the cover, .sm on question pages, .mini on results.
   ============================================================ */
.globed-quiz-page .masthead{text-align:center;flex-shrink:0;}

/* explicit viewBox keeps the wordmark tight — no phantom left indent */
.globed-quiz-page .logo{height:24px;width:auto;display:block;color:var(--ink);flex-shrink:0;}

/* play counter — social proof immediately before the CTA */
.globed-quiz-page .taken{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 auto clamp(10px,1.6vh,14px);
  flex-shrink:0;
  padding:9px 17px 9px 14px;
  border-radius:999px;
  background:rgba(5,168,107,.08);
  border:1px solid rgba(5,168,107,.30);
  font-size:12.5px;font-weight:600;
  line-height:1.35;
  color:var(--ink-mid);
  text-align:left;
  max-width:100%;
}
.globed-quiz-page .taken b{color:var(--ink);font-weight:800;font-size:14.5px;letter-spacing:-.01em;}
.globed-quiz-page .live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);flex-shrink:0;
  animation:livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{
  0%  {box-shadow:0 0 0 0 rgba(5,168,107,.45);}
  70% {box-shadow:0 0 0 8px rgba(5,168,107,0);}
  100%{box-shadow:0 0 0 0 rgba(5,168,107,0);}
}
@media (max-width:420px){
  .globed-quiz-page .taken{font-size:11.5px;padding:8px 14px 8px 12px;gap:8px;}
  .globed-quiz-page .taken b{font-size:13.5px;}
}

/* cadence note — deliberately NOT under the logo, so it can't read as a tagline */
.globed-quiz-page .cadence{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:clamp(10px,1.8vh,20px);
  font-size:12.5px;font-weight:600;
  color:var(--ink-dim);flex-shrink:0;
}
.globed-quiz-page .cadence svg{width:14px;height:14px;color:var(--green);flex-shrink:0;}
.globed-quiz-page .sc-divider{height:1px;background:rgba(0,40,82,.10);margin:24px 0 20px;}
.globed-quiz-page .sc-logo{height:32px;width:auto;display:block;}
.globed-quiz-page .sc-logo-dark{display:none;}
.globed-quiz-page .sc-share{display:flex;flex-direction:column;align-items:center;gap:12px;}
.globed-quiz-page .name-field{width:100%;}
.globed-quiz-page .sc-share .name-input{margin-top:0;}
.globed-quiz-page .sc-share .btn-block{max-width:220px;}

.globed-quiz-page .globed{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;}
.globed-quiz-page .globed-head{display:flex;align-items:center;gap:13px;margin-bottom:8px;}
.globed-quiz-page .level-icon{width:38px;height:38px;flex-shrink:0;color:var(--electric);}
.globed-quiz-page .globed-t{font-weight:800;font-size:16px;color:var(--ink);}
.globed-quiz-page .globed-s{font-size:13px;line-height:1.55;color:var(--ink-mid);margin-bottom:16px;}
.globed-quiz-page .paths{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.globed-quiz-page .path{
  display:flex;flex-direction:column;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 14px;
  text-decoration:none;color:var(--ink);
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.globed-quiz-page .path:hover{border-color:var(--electric);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,40,82,.1);}
.globed-quiz-page .path svg.pic{width:26px;height:26px;color:var(--electric);}
.globed-quiz-page .path-t{font-size:13.5px;font-weight:700;line-height:1.3;}
.globed-quiz-page .path-go{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-dim);}
@media (max-width:400px){.globed-quiz-page .paths{grid-template-columns:1fr;} }

.globed-quiz-page .follow-row{
  margin-top:28px;
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.globed-quiz-page .drop-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:rgba(5,168,107,.08);border:1px solid rgba(5,168,107,.25);
  font-size:12.5px;font-weight:600;color:var(--ink-mid);
}
.globed-quiz-page .drop-pill svg{width:15px;height:15px;color:var(--green);flex-shrink:0;}
.globed-quiz-page .follow-s{font-size:12px;color:var(--ink-mid);}
.globed-quiz-page .follow-links{display:flex;gap:24px;justify-content:center;}
.globed-quiz-page .follow-link{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:var(--ink-mid);
  text-decoration:none;
}
.globed-quiz-page .icon-circle{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--electric);
  transition:background .15s,border-color .15s,transform .15s;
}
.globed-quiz-page .icon-circle svg{width:19px;height:19px;flex-shrink:0;}
@media (hover:hover) and (pointer:fine){
  .globed-quiz-page .follow-link:hover{color:var(--electric);}
  .globed-quiz-page .follow-link:hover .icon-circle{background:rgba(21,71,235,.08);border-color:var(--electric);transform:translateY(-2px);}
}
/* stat pill — bridges the gap between the headline and the map */
.globed-quiz-page .cover-meta{
  display:inline-flex;align-items:center;gap:clamp(10px,3vw,16px);
  margin-top:clamp(10px,2vh,24px);
  padding:11px clamp(18px,4.5vw,24px);
  border:1.5px solid rgba(21,71,235,.26);
  border-radius:999px;
  background:linear-gradient(135deg,#EBF1FF 0%,#F8FBFF 70%);
  box-shadow:0 3px 12px rgba(21,71,235,.07);
  font-size:clamp(13px,3.4vw,14.5px);font-weight:700;
  letter-spacing:-.005em;
  color:var(--ink);
  white-space:nowrap;
}
.globed-quiz-page .cover-meta b{
  color:var(--electric);
  font-weight:900;
  font-size:clamp(16px,4.2vw,18px);
  margin-right:3px;
}
.globed-quiz-page .cover-meta .sep{
  width:1px;height:17px;
  background:rgba(0,40,82,.22);
  flex-shrink:0;
}

/* attribution — cover page only */
.globed-quiz-page .powered{
  /* block-level flex, so it always starts its own line under the pill —
     inline-flex would let it ride up alongside .cover-meta */
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:clamp(8px,1.6vh,16px);
  font-size:12.5px;font-weight:600;
  color:var(--ink-dim);
}
.globed-quiz-page .vested-logo{height:26px;width:auto;display:block;}
.globed-quiz-page .globed-logo{height:32px;width:auto;display:block;}
.globed-quiz-page .globed-logo-dark{display:none;}
.globed-quiz-page .v-tile{fill:#002852;}
.globed-quiz-page .v-mark{fill:#FFFFFF;}
.globed-quiz-page .v-word{fill:#002852;}
.globed-quiz-page .mh-name{
  font-family:'Sentient',Georgia,serif;
  font-weight:700;
  font-size:clamp(23px,5.6vw,34px);
  line-height:1.12;letter-spacing:-.02em;
  color:var(--ink);
  margin-top:2px;
}
.globed-quiz-page .mh-title{
  font-family:'Sentient',Georgia,serif;
  font-weight:700;
  line-height:1.0;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-top:22px;
}
.globed-quiz-page .mh-title .it{
  display:block;
  font-style:normal;
  font-weight:500;
  color:var(--electric);
  margin-top:.06em;
}
/* size variants — cover carries the name as a headline, inner pages as a pill */
.globed-quiz-page .masthead.full .mh-title{font-size:clamp(26px,min(8.8vw,6.2vh),54px);margin-top:2px;}
.globed-quiz-page .masthead.sm, .globed-quiz-page .masthead.mini{padding-bottom:18px;border-bottom:1px solid var(--line-soft);}
.globed-quiz-page .masthead.mini .mh-name{font-size:clamp(19px,4.6vw,26px);}

/* ============================================================
   PAGE 1 — COVER
   ============================================================ */
/* ---- the cover fills exactly one screen; the map absorbs the slack ----
   Everything else keeps its size and the map shrinks to whatever is left,
   so the Start button stays reachable without scrolling on small phones. */
.globed-quiz-page #splash{height:100svh;overflow-y:auto;}
.globed-quiz-page #splash .inner{min-height:0;}
.globed-quiz-page #splash .masthead{flex-shrink:0;}
.globed-quiz-page .cover-body{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start;
}

.globed-quiz-page .map-hero{
  position:relative;
  flex:1 1 0;
  min-height:62px;
  margin:clamp(12px,2.6vh,26px) calc(var(--pad) * -1);
  overflow:hidden;
  background:var(--surface);
}
.globed-quiz-page .map-hero::before, .globed-quiz-page .map-hero::after{
  content:'';position:absolute;left:0;right:0;height:34px;pointer-events:none;z-index:1;
}
.globed-quiz-page .map-hero::before{top:0;background:linear-gradient(to top,rgba(255,255,255,0),var(--bg));}
.globed-quiz-page .map-hero::after{bottom:0;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--bg));}
.globed-quiz-page .map-dots{
  position:absolute;top:50%;left:50%;
  width:132%;height:auto;
  transform:translate(-50%,-52%);
  color:rgba(0,40,82,.22);
  pointer-events:none;
}
.globed-quiz-page .map-badge{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:10px;letter-spacing:-.02em;
  border-radius:50%;
  box-shadow:0 5px 14px rgba(0,40,82,.18);
  z-index:2;
}
.globed-quiz-page .map-badge.v1{width:46px;height:46px;background:#1547EB;color:#fff;}
.globed-quiz-page .map-badge.v2{width:54px;height:54px;font-size:10.5px;background:#002852;color:#fff;}
.globed-quiz-page .map-badge.v3{width:40px;height:40px;font-size:8.5px;background:#05A86B;color:#fff;}
.globed-quiz-page .map-badge.v4{width:49px;height:49px;font-size:10px;background:#4E7BFF;color:#fff;}
.globed-quiz-page .map-badge.v5{width:44px;height:44px;font-size:9px;background:#3E86B8;color:#fff;}
@media (max-width:600px){
  .globed-quiz-page .map-badge.v1{width:38px;height:38px;font-size:8.5px;}
  .globed-quiz-page .map-badge.v2{width:44px;height:44px;font-size:9px;}
  .globed-quiz-page .map-badge.v3{width:33px;height:33px;font-size:7.5px;}
  .globed-quiz-page .map-badge.v4{width:40px;height:40px;font-size:8.5px;}
  .globed-quiz-page .map-badge.v5{width:36px;height:36px;font-size:7.5px;}
}

.globed-quiz-page .lede{
  font-size:15px;line-height:1.55;
  color:var(--ink-mid);
  text-align:center;
  max-width:440px;
  margin:0 auto clamp(12px,2vh,20px);
  flex-shrink:0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.globed-quiz-page .btn{
  background:var(--electric);color:#fff;
  border:none;border-radius:12px;
  padding:16px 28px;font-size:15px;font-weight:700;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(21,71,235,.22);
  transition:transform .12s, background .15s, box-shadow .15s;
}
.globed-quiz-page .btn:active{transform:scale(.985);}
.globed-quiz-page .btn-block{width:100%;max-width:300px;margin-left:auto;margin-right:auto;}
.globed-quiz-page .btn-ghost{background:#fff;border:1.5px solid var(--electric);color:var(--electric);box-shadow:none;}
/* hover-only devices (mouse/trackpad) get the hover state; touch devices
   don't, since a tap otherwise "sticks" the hover colour until the next tap,
   which is why the Next button looked like two different colours on
   laptop vs phone. */
@media (hover:hover) and (pointer:fine){
  .globed-quiz-page .btn:hover{background:#0F3ACB;box-shadow:0 6px 18px rgba(21,71,235,.3);}
  .globed-quiz-page .btn-ghost:hover{background:rgba(21,71,235,.06);box-shadow:none;}
}
.globed-quiz-page .btn-quiet{
  background:none;border:none;padding:0;
  color:var(--ink-mid);font-size:13.5px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
}
.globed-quiz-page .btn-quiet:hover:not(:disabled){color:var(--electric);}
.globed-quiz-page .btn-quiet:disabled{opacity:.35;cursor:not-allowed;}
.globed-quiz-page .btn-quiet .arw{transition:transform .15s;}
.globed-quiz-page .btn-quiet:hover:not(:disabled) .arw{transform:translateX(3px);}
.globed-quiz-page .btn-quiet.back:hover:not(:disabled) .arw{transform:translateX(-3px);}

/* ============================================================
   PAGE 2 — QUESTION
   ============================================================ */
.globed-quiz-page .quiz-body{flex:0 1 auto;display:flex;flex-direction:column;padding-top:clamp(20px,4vw,28px);}
.globed-quiz-page .qmeta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-weight:700;font-size:clamp(17px,4.4vw,20px);letter-spacing:-.015em;
  color:var(--ink);margin-bottom:13px;
}
.globed-quiz-page .qmeta .sc{color:var(--ink-mid);font-weight:600;font-size:clamp(14px,3.6vw,16px);}
.globed-quiz-page .track{height:4px;border-radius:2px;background:rgba(0,40,82,.09);margin-bottom:28px;}
.globed-quiz-page .fill{height:4px;border-radius:2px;background:var(--electric);width:0;transition:width .35s ease;}
.globed-quiz-page .qtext{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:500;font-size:clamp(16px,3.6vw,18.5px);
  line-height:1.42;color:var(--ink);margin-bottom:20px;
}
.globed-quiz-page .qtext strong{font-weight:700;}

.globed-quiz-page .qmedia{display:none;margin-bottom:20px;}
.globed-quiz-page .qmedia.on{display:block;}
.globed-quiz-page .qmedia img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);}
.globed-quiz-page .qmedia figcaption{font-size:11.5px;color:var(--ink-dim);margin-top:8px;text-align:center;}

.globed-quiz-page .opts{display:flex;flex-direction:column;}
.globed-quiz-page .opts.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.globed-quiz-page .opt{
  display:flex;align-items:center;gap:13px;
  width:100%;text-align:left;
  padding:15px 10px 15px 2px;
  background:none;border:none;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.4;
  color:var(--ink-mid);cursor:pointer;
  transition:color .12s, padding-left .12s, background .12s;
}
.globed-quiz-page .opts:not(.grid) .opt:first-child{border-top:1px solid var(--line-soft);}
.globed-quiz-page .opt:hover:not(:disabled){color:var(--ink);padding-left:8px;}
.globed-quiz-page .opt:disabled{cursor:default;}
.globed-quiz-page .okey{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--ink-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--ink-dim);flex-shrink:0;
  transition:background .15s, border-color .15s, color .15s;
}
.globed-quiz-page .opt.correct{color:var(--positive);font-weight:600;}
.globed-quiz-page .opt.correct .okey{background:var(--positive);border-color:var(--positive);color:#fff;}
.globed-quiz-page .opt.wrong{color:var(--negative);font-weight:600;}
.globed-quiz-page .opt.wrong .okey{background:var(--negative);border-color:var(--negative);color:#fff;}
.globed-quiz-page .opt.reveal{color:var(--positive);font-weight:600;}
.globed-quiz-page .opt.reveal .okey{background:var(--positive);border-color:var(--positive);color:#fff;}

.globed-quiz-page .opt.tile{
  flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px 12px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  text-align:center;font-size:13px;font-weight:600;color:var(--ink);
}
.globed-quiz-page .opt.tile:hover:not(:disabled){padding-left:12px;background:var(--surface);}
.globed-quiz-page .opt.tile img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 4px 12px rgba(0,40,82,.16);}
.globed-quiz-page .opt.tile .tick{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;
}
.globed-quiz-page .opt.tile.correct{border-color:var(--positive);background:var(--positive-tint);}
.globed-quiz-page .opt.tile.wrong{border-color:var(--negative);background:var(--negative-tint);}
.globed-quiz-page .opt.tile.reveal{border-color:var(--positive);background:var(--positive-tint);}
@media (max-width:400px){
  .globed-quiz-page .opt.tile{padding:15px 8px;font-size:12px;}
  .globed-quiz-page .opt.tile img, .globed-quiz-page .opt.tile .tick{width:42px;height:42px;}
}

.globed-quiz-page .fbox{display:none;margin-top:22px;padding-top:17px;animation:rise .28s ease;}
.globed-quiz-page .fbox.on{display:block;}
.globed-quiz-page .fverdict{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:8px;}
.globed-quiz-page .fbox.ok .fverdict{color:var(--positive);}
.globed-quiz-page .fbox.no .fverdict{color:var(--negative);}
.globed-quiz-page .fverdict svg{width:16px;height:16px;flex-shrink:0;}
.globed-quiz-page .ftxt{font-size:13.5px;line-height:1.65;color:var(--ink-mid);}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.globed-quiz-page .anim{animation:fade .3s ease;}

.globed-quiz-page .qfoot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);flex-shrink:0;
}
.globed-quiz-page .qfoot .sc{color:var(--ink-mid);font-weight:600;font-size:13.5px;}
.globed-quiz-page #btn-next{padding:9px 18px;border-radius:9px;font-size:13.5px;box-shadow:none;opacity:0;pointer-events:none;transition:opacity .2s;flex-shrink:0;}
.globed-quiz-page #btn-start{flex-shrink:0;}

/* short screens — tighten everything so one screen still holds */
@media (max-height:700px){
  .globed-quiz-page .lede{font-size:13.5px;}
  .globed-quiz-page .cover-meta{padding:9px 17px;}
  .globed-quiz-page .cover-meta b{font-size:15.5px;}
  .globed-quiz-page .vested-logo{height:23px;}
  .globed-quiz-page .globed-logo{height:28px;}
  .globed-quiz-page .btn{padding:14px 24px;}
}
@media (max-height:600px){
  .globed-quiz-page #splash{padding-bottom:16px;}
  .globed-quiz-page .lede{font-size:12.5px;line-height:1.45;}
  .globed-quiz-page .taken{font-size:11px;padding:7px 13px 7px 11px;}
  .globed-quiz-page .powered{font-size:11.5px;}
  .globed-quiz-page .vested-logo{height:20px;}
  .globed-quiz-page .globed-logo{height:24px;}
  .globed-quiz-page .cadence{font-size:11.5px;}
  .globed-quiz-page .btn{padding:13px 22px;font-size:14px;}
  .globed-quiz-page .map-hero{min-height:54px;}
}
.globed-quiz-page #btn-next.on{opacity:1;pointer-events:auto;}

/* ============================================================
   PAGE 3 — RESULTS
   ============================================================ */
.globed-quiz-page .done-head{
  display:flex;align-items:center;gap:10px;
  font-family:'Sentient',Georgia,serif;
  font-weight:700;font-size:clamp(21px,5.2vw,26px);
  color:var(--ink);margin:24px 0 14px;
}
.globed-quiz-page .scorecard{
  background:linear-gradient(150deg,#EDF3FF 0%,#FFFFFF 62%,#EAFBF2 100%);
  border:1.5px solid rgba(21,71,235,.22);
  border-radius:18px;
  padding:clamp(20px,4.5vw,26px);
  box-shadow:0 8px 26px rgba(0,40,82,.09);
}
.globed-quiz-page .sc-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid rgba(0,40,82,.10);
}
.globed-quiz-page .sc-top .logo{height:20px;}
.globed-quiz-page .sc-tag{
  font-size:13.5px;font-weight:700;
  letter-spacing:-.01em;line-height:1.25;
  color:var(--ink-mid);text-align:right;
}
@media (max-width:400px){.globed-quiz-page .sc-tag{font-size:12px;} }
.globed-quiz-page .sc-main{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.globed-quiz-page .sc-left{min-width:0;}
.globed-quiz-page .sc-said{font-size:13px;color:var(--ink-mid);margin-bottom:2px;}
.globed-quiz-page .sc-score{font-weight:900;font-size:clamp(48px,14vw,68px);line-height:1;letter-spacing:-.04em;color:var(--electric);}
.globed-quiz-page .sc-score .den{font-size:.42em;color:var(--ink-dim);font-weight:700;letter-spacing:0;}
.globed-quiz-page .sc-in{
  font-size:16px;font-weight:800;
  letter-spacing:-.015em;line-height:1.25;
  margin-top:10px;max-width:180px;
}
.globed-quiz-page .badge-wrap{flex-shrink:0;width:clamp(100px,27vw,128px);}
.globed-quiz-page .badge-wrap svg{width:100%;height:auto;display:block;}

.globed-quiz-page .name-input{
  width:100%;margin-top:12px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  font-family:inherit;font-size:13.5px;color:var(--ink);
}
.globed-quiz-page .name-input::placeholder{color:var(--ink-dim);}
.globed-quiz-page .name-input:focus{outline:none;border-color:var(--electric);background:#fff;}
.globed-quiz-page .name-input.is-invalid{border-color:var(--negative);background:var(--negative-tint);}
.globed-quiz-page .name-error{margin:6px 2px 0;color:var(--negative);font-size:12.5px;font-weight:600;text-align:left;}
.globed-quiz-page .name-error[hidden]{display:none;}

/* Share modal */
.globed-quiz-page .share-modal{
  position:fixed;inset:0;z-index:10050;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.globed-quiz-page .share-modal.hidden{display:none !important;}
.globed-quiz-page .share-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,20,40,.48);
  backdrop-filter:blur(3px);
}
.globed-quiz-page .share-modal-panel{
  position:relative;z-index:1;
  width:100%;max-width:360px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 20px 20px;
  box-shadow:0 18px 48px rgba(0,40,82,.22);
  animation:rise .28s ease;
}
.globed-quiz-page .share-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:6px;
}
.globed-quiz-page .share-modal-title{
  margin:0;font-family:'Sentient',Georgia,serif;
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;
}
.globed-quiz-page .share-modal-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;border-radius:8px;
  background:transparent;color:var(--ink-dim);cursor:pointer;
}
.globed-quiz-page .share-modal-close:hover{background:rgba(0,40,82,.06);color:var(--ink);}
.globed-quiz-page .share-modal-s{
  margin:0 0 18px;font-size:13px;line-height:1.5;color:var(--ink-mid);
}
.globed-quiz-page .share-modal-btns{display:flex;flex-direction:column;gap:10px;}
.globed-quiz-page .share-social{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:13px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);
  font-family:inherit;font-size:14.5px;font-weight:650;
  cursor:pointer;text-align:left;
  transition:border-color .15s, background .15s, transform .12s;
}
.globed-quiz-page .share-social:hover{
  border-color:var(--electric);background:rgba(21,71,235,.04);
  transform:translateY(-1px);
}
.globed-quiz-page .share-social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
}
.globed-quiz-page .share-social-icon.whatsapp{background:#25D366;color:#fff;}
.globed-quiz-page .share-social-icon.linkedin{background:#0A66C2;color:#fff;}
.globed-quiz-page .share-social-icon.x{background:#111;color:#fff;}
.globed-quiz-page .share-social-icon.instagram{
  background:radial-gradient(circle at 30% 110%,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
  color:#fff;
}
body.globed-share-open{overflow:hidden;}

.globed-quiz-page .end-links{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);
}
@media (max-width:400px){
  .globed-quiz-page .sc-main{gap:8px;}
  .globed-quiz-page .sc-in{max-width:132px;font-size:13.5px;}
}
/* ============================================================
   DARK MODE — follows the OS setting. Everything below is an
   override; light mode above stays the source of truth.
   ============================================================ */
@media (prefers-color-scheme: dark){
  .globed-quiz-page{
    --bg:#00121F;
    --surface:#052034;
    --ink:#E8F1FA;
    --ink-mid:#A2B8CC;
    --ink-dim:#7690A6;
    --electric:#5E8CFF;
    --green:#2ED89A;
    --line:rgba(255,255,255,.15);
    --line-soft:rgba(255,255,255,.09);
    --positive-tint:rgba(10,163,34,.22);
    --negative-tint:rgba(181,36,36,.24);
  }
  /* #0AA322 and #B52424 stay the fill colours, but they're too dark to
     read as text on a dark page — these are lightened tones of the same hues. */
  .globed-quiz-page .opt.correct, .globed-quiz-page .opt.reveal, .globed-quiz-page .fbox.ok .fverdict{color:#3FD95C;}
  .globed-quiz-page .opt.wrong, .globed-quiz-page .fbox.no .fverdict{color:#F07575;}

  .globed-quiz-page .cover-meta{
    background:linear-gradient(135deg,rgba(94,140,255,.17) 0%,rgba(94,140,255,.05) 70%);
    border-color:rgba(94,140,255,.36);
    box-shadow:none;
  }

  .globed-quiz-page .map-hero{background:#031A2C;}
  .globed-quiz-page .map-dots{color:rgba(255,255,255,.20);}
  .globed-quiz-page .map-badge{box-shadow:0 5px 14px rgba(0,0,0,.55);}
  .globed-quiz-page .map-badge.v1{background:#5E8CFF;color:#00121F;}
  .globed-quiz-page .map-badge.v2{background:#B5E4FE;color:#002852;}
  .globed-quiz-page .map-badge.v3{background:#2ED89A;color:#00291A;}
  .globed-quiz-page .map-badge.v5{background:#7EC0E8;color:#00202E;}

  .globed-quiz-page .btn{box-shadow:0 4px 14px rgba(0,0,0,.45);}
  .globed-quiz-page .btn:hover{background:#4C7CFF;box-shadow:0 6px 18px rgba(0,0,0,.55);}
  .globed-quiz-page .btn-ghost{background:transparent;}
  .globed-quiz-page .btn-ghost:hover{background:rgba(94,140,255,.13);}

  .globed-quiz-page .track{background:rgba(255,255,255,.11);}
  .globed-quiz-page .qmedia img{border-color:var(--line);}
  .globed-quiz-page .opt.tile{background:rgba(255,255,255,.04);}
  .globed-quiz-page .opt.tile:hover:not(:disabled){background:rgba(255,255,255,.08);}
  .globed-quiz-page .opt.tile img{box-shadow:0 4px 12px rgba(0,0,0,.5);}
  /* ticker circles can be dark navy — a hairline ring keeps them visible */
  .globed-quiz-page .opt.tile .tick{box-shadow:0 0 0 1.5px rgba(255,255,255,.24);}

  .globed-quiz-page .scorecard{
    background:linear-gradient(150deg,#0B3068 0%,#031B2F 60%,#04301F 100%);
    border-color:rgba(94,140,255,.36);
    box-shadow:0 10px 30px rgba(0,0,0,.55);
  }
  .globed-quiz-page .sc-top{border-bottom-color:rgba(255,255,255,.13);}
  .globed-quiz-page .sc-divider{background:rgba(255,255,255,.13);}

  .globed-quiz-page .globed{background:var(--surface);}
  .globed-quiz-page .path{background:rgba(255,255,255,.05);}
  .globed-quiz-page .path:hover{box-shadow:0 6px 16px rgba(0,0,0,.5);}

  .globed-quiz-page .name-input{background:rgba(255,255,255,.05);}
  .globed-quiz-page .name-input:focus{background:rgba(255,255,255,.09);}
  .globed-quiz-page .share-modal-panel{
    background:var(--surface);
    border-color:rgba(94,140,255,.34);
    box-shadow:0 18px 48px rgba(0,0,0,.55);
  }
  .globed-quiz-page .share-social{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.14);
  }
  .globed-quiz-page .share-social:hover{background:rgba(94,140,255,.13);}
  .globed-quiz-page .share-modal-close:hover{background:rgba(255,255,255,.08);}

  .globed-quiz-page .taken{background:rgba(46,216,154,.10);border-color:rgba(46,216,154,.34);}
  .globed-quiz-page .cover-meta .sep{background:rgba(255,255,255,.24);}
  /* flip the Vested tile so the white V stays legible on a dark page */
  .globed-quiz-page .v-tile{fill:#E8F1FA;}
  .globed-quiz-page .v-mark{fill:#002852;}
  .globed-quiz-page .v-word{fill:#E8F1FA;}

  /* the GlobEd logo is a flat image, so swap in the light-lettered
     variant here rather than relying on currentColor */
  .globed-quiz-page .globed-logo-light{display:none;}
  .globed-quiz-page .globed-logo-dark{display:block;}
  .globed-quiz-page .sc-logo-light{display:none;}
  .globed-quiz-page .sc-logo-dark{display:block;}
}

@media (max-width:400px){
  .globed-quiz-page .sc-tag{font-size:12px;}
  .globed-quiz-page .sc-logo{height:27px;}
}

/* Sit under GlobEd/Academy header rather than filling the whole viewport alone */
.globed-quiz-page #splash{
  height:auto;
  min-height:calc(100svh - 80px);
}