/* LernQuest — Los Santos key-art styling.
 * Sunset sky, palm silhouettes, flat cel-shaded panels with hard black
 * outlines, and the white-on-heavy-black-outline lettering of the box art.
 * Fan styling only: no game assets or logos, everything drawn in CSS/SVG.
 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Oswald:wght@500;600;700&display=swap');

:root{
  /* sunset over the strip */
  --sky-1:#8f68b8;
  --sky-2:#e2779f;
  --sky-3:#ff9d86;
  --sky-4:#ffc98f;
  --palm:#241534;

  /* panels: the black car against the sky */
  --bg:#17111f;
  --bg2:#1e1729;
  --card:#191322;
  --card2:#241b31;
  --line:#000;
  --edge:#54406b;
  --ink:#f7efe2;
  --ink-soft:#b9a9c6;

  /* vector accents */
  --accent:#ff8c42;
  --accent2:#f0c04a;
  --pink:#ff5f96;
  --accent-dark:#4a2740;
  --good:#5ed17c;
  --good-dim:#1b3a26;
  --bad:#ff4d5e;
  --bad-dim:#43171f;
  --warn:#f0c04a;
  --warn-dim:#3f3216;

  --radius:4px;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --logo:'Archivo Black','Anton',Impact,sans-serif;
  --hud:'Oswald',"Segoe UI",Roboto,sans-serif;
  --hard:5px 5px 0 rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    url('/palms.svg') bottom center / max(1250px,150%) auto no-repeat,
    /* the sun on the horizon */
    radial-gradient(circle 96px at 50% 78%, #fff2c4 0%, #ffdf95 55%, rgba(255,205,130,.35) 72%, rgba(255,190,120,0) 100%),
    radial-gradient(620px 340px at 50% 78%, rgba(255,232,170,.5) 0%, rgba(255,200,140,0) 72%),
    linear-gradient(180deg,
      var(--sky-1) 0%, #b672ad 16%, var(--sky-2) 34%,
      var(--sky-3) 54%, var(--sky-4) 70%, #d98a72 84%, var(--palm) 100%);
  background-attachment:fixed;
}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 140px}
h1,h2,h3{margin:0}

/* the box-art lettering: white fill, heavy black outline */
.inked{
  color:#fff;
  -webkit-text-stroke:4px #000;
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,.45);
}
h2,h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.015em;color:#fff;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius)}
button:disabled{opacity:.42;cursor:not-allowed}
.hidden{display:none !important}

/* ------------------------------------------------------------------ header */
.topbar{display:flex;align-items:center;gap:12px;padding:8px 2px 20px}
.logo{
  width:46px;height:46px;border-radius:var(--radius);flex:0 0 auto;
  background:linear-gradient(160deg,var(--accent2),var(--accent));
  border:3px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.5);
  display:grid;place-items:center;font-size:22px;
}
.topbar h1{
  font-family:var(--logo);font-size:31px;font-weight:400;line-height:1.02;
  text-transform:uppercase;letter-spacing:-.01em;color:#fff;
  -webkit-text-stroke:5px #000;paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,.5);
}
.topbar .sub{
  font-family:var(--hud);font-size:11.5px;color:#fff;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;margin-top:4px;
  text-shadow:0 0 4px rgba(0,0,0,.85),1px 1px 0 rgba(0,0,0,.9);
}
.spacer{margin-left:auto}
.chip{
  background:var(--card2);border:3px solid #000;border-radius:var(--radius);
  padding:5px 11px;font-family:var(--hud);font-size:13px;font-weight:700;
  color:var(--accent2);display:inline-flex;gap:6px;align-items:center;
  text-transform:uppercase;letter-spacing:.05em;box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.chip b{color:#fff}
.chip.done{color:var(--good);border-color:#000}
.linkbtn{
  background:none;color:#fff;font-family:var(--hud);font-size:12px;font-weight:600;
  padding:6px 8px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
  text-shadow:0 0 4px rgba(0,0,0,.9),1px 1px 0 rgba(0,0,0,.9);
}
.linkbtn:hover{color:var(--accent2)}

/* ------------------------------------------------------------------- cards */
.card{
  background:var(--card);border:3px solid #000;border-radius:var(--radius);
  padding:22px;margin-bottom:18px;box-shadow:6px 6px 0 rgba(0,0,0,.42);
  outline:1px solid rgba(255,255,255,.07);outline-offset:-4px;
}
.card.tight{padding:16px}
.card h2{font-size:23px;margin-bottom:8px}
.muted{color:var(--ink-soft)}
.small{font-size:13.5px}

/* ------------------------------------------------------------------- login */
.who{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px}
.who button{
  background:var(--card2);color:var(--ink);border:3px solid #000;
  padding:12px 20px;font-family:var(--hud);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.who button.on{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#2a1206}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:270px;margin:0 auto}
.pinpad button{
  background:var(--card2);color:var(--ink);padding:16px 0;font-family:var(--hud);
  font-size:22px;font-weight:700;border:3px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.pinpad button:active{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#2a1206}
.pindots{display:flex;gap:12px;justify-content:center;margin:18px 0}
.pindots i{width:16px;height:16px;background:#0c0812;border:3px solid #000;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pindots i.on{background:var(--accent2);box-shadow:none}
.err{color:var(--bad);font-family:var(--hud);font-size:14px;font-weight:600;text-align:center;min-height:20px;margin-top:10px;text-transform:uppercase;letter-spacing:.05em}

/* -------------------------------------------------------------------- home */
.hero{text-align:center;padding:8px 0 4px}
.hero .greet{
  font-family:var(--display);font-size:38px;font-weight:400;line-height:1.04;
  text-transform:uppercase;color:#fff;margin-bottom:6px;
  -webkit-text-stroke:4px #000;paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,0,0,.45);
}
.stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.stat{
  background:var(--card2);border:3px solid #000;border-radius:var(--radius);
  padding:12px 16px;min-width:106px;text-align:center;box-shadow:4px 4px 0 rgba(0,0,0,.45);
}
.stat .v{
  font-family:var(--display);font-size:29px;font-weight:400;line-height:1.1;color:#fff;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
}
.stat .k{
  font-family:var(--hud);font-size:10.5px;color:var(--ink-soft);font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;margin-top:4px;
}
.cta{
  display:block;width:100%;padding:17px;margin-top:16px;
  font-family:var(--display);font-size:23px;font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
  background:linear-gradient(180deg,var(--accent2) 0%,var(--accent) 52%,var(--pink) 100%);
  border:3px solid #000;box-shadow:5px 5px 0 rgba(0,0,0,.55);
}
.cta.secondary{
  background:var(--card2);font-family:var(--hud);font-size:15px;font-weight:700;
  letter-spacing:.07em;padding:14px;-webkit-text-stroke:0;text-shadow:1px 1px 0 rgba(0,0,0,.7);
}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.strip{display:flex;gap:5px;margin-top:16px;justify-content:center;flex-wrap:wrap}
.strip i{
  width:22px;height:22px;background:var(--card2);border:3px solid #000;
  display:inline-block;position:relative;border-radius:2px;
}
.strip i.pass{background:var(--good)}
.strip i.fail{background:var(--bad)}
.banner{
  border-radius:var(--radius);padding:13px 16px;font-size:14.5px;margin-top:14px;
  border:3px solid #000;border-left:8px solid var(--accent);background:var(--card2);
}
.banner.warn{border-left-color:var(--warn);background:var(--warn-dim)}
.banner.good{border-left-color:var(--good);background:var(--good-dim)}

/* ------------------------------------------------------------------- quest */
.qbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qbar .track{
  flex:1;height:16px;background:#0c0812;border:3px solid #000;border-radius:var(--radius);
  overflow:hidden;box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.qbar .track i{
  display:block;height:100%;width:0;transition:width .35s ease;
  background:linear-gradient(90deg,var(--accent2),var(--accent) 60%,var(--pink));
}
.qbar .count{
  font-family:var(--hud);font-size:15px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.05em;
  text-shadow:0 0 4px rgba(0,0,0,.9),1px 1px 0 rgba(0,0,0,.9);
}
.qtag{
  display:inline-block;font-family:var(--hud);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.11em;padding:5px 12px;border-radius:var(--radius);margin-bottom:14px;
  font-weight:700;border:3px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.qtag.maths{background:var(--pink);color:#fff}
.qtag.science{background:var(--accent2);color:#2a1206}
.prompt{font-size:20px;line-height:1.45;margin-bottom:4px}
.prompt .eq{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:23px;display:inline-block;margin-top:8px}
.dataline{
  display:inline-block;margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:19px;letter-spacing:.02em;background:#0c0812;border:3px solid #000;
  padding:8px 12px;border-radius:var(--radius);
}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 3px;line-height:1.1}
.frac i{font-style:normal;padding:0 5px}
.frac i:first-child{border-bottom:2px solid currentColor;padding-bottom:1px}
.frac i:last-child{padding-top:1px}
.fig{display:block;max-width:100%;height:auto;margin:16px 0;background:#f4ece0;border:3px solid #000;border-radius:var(--radius);padding:8px}
.opts{display:grid;gap:10px;margin-top:18px}
.opt{
  display:flex;gap:12px;align-items:center;background:var(--card2);
  border:3px solid #000;border-radius:var(--radius);
  padding:14px 16px;cursor:pointer;text-align:left;color:var(--ink);font-size:16px;
  transition:transform .08s ease,background .15s ease;width:100%;
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
}
.opt:hover{background:var(--accent-dark)}
.opt:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.opt.sel{background:linear-gradient(180deg,#5c2f52,#3d2038)}
.opt .k{
  flex:0 0 auto;width:28px;height:28px;border-radius:var(--radius);background:#0c0812;
  border:2px solid #000;display:grid;place-items:center;font-family:var(--hud);
  font-size:14px;font-weight:700;color:var(--ink-soft);
}
.opt.sel .k{background:var(--pink);color:#fff}
.opt.right{background:var(--good-dim);border-color:#000;outline:3px solid var(--good);outline-offset:-6px}
.opt.wrong{background:var(--bad-dim);border-color:#000;outline:3px solid var(--bad);outline-offset:-6px}
.numin{
  display:block;width:100%;max-width:290px;margin-top:18px;background:#0c0812;
  border:3px solid #000;border-radius:var(--radius);padding:15px 16px;color:var(--ink);
  font-size:22px;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.numin:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
.navrow{display:flex;gap:10px;margin-top:22px}
.navrow button{
  padding:14px 22px;font-family:var(--hud);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;border:3px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.45);
}
.navrow button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.btn-primary{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#2a1206;flex:1}
.btn-ghost{background:var(--card2);color:var(--ink)}

/* ------------------------------------------------------------------ result */
.ring{width:154px;height:154px;margin:0 auto 8px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .mid b{
  font-family:var(--display);font-size:42px;display:block;line-height:1;color:#fff;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
}
.ring .mid span{font-family:var(--hud);font-size:11px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.13em}
/* the box-art headline moment */
.verdict{
  text-align:center;font-family:var(--display);font-size:36px;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;margin-top:12px;line-height:1.05;
  color:#fff;-webkit-text-stroke:5px #000;paint-order:stroke fill;
  text-shadow:0 5px 0 rgba(0,0,0,.5);
}
.reward{
  text-align:center;background:linear-gradient(180deg,var(--good),#2f9a53);
  border:3px solid #000;color:#fff;border-radius:var(--radius);padding:16px;margin-top:18px;
  font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;
  -webkit-text-stroke:2.5px #000;paint-order:stroke fill;box-shadow:5px 5px 0 rgba(0,0,0,.45);
}
.review{margin-top:22px}
.rev{
  border-radius:var(--radius);padding:13px 15px;margin-bottom:10px;background:var(--card2);
  border:3px solid #000;border-left:8px solid var(--good);font-size:14.5px;
}
.rev.no{border-left-color:var(--bad)}
.rev .h{font-family:var(--hud);font-weight:700;margin-bottom:4px;display:flex;gap:8px;align-items:center;text-transform:uppercase;letter-spacing:.05em}
.rev .tag{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.rev .why{color:var(--ink-soft);margin-top:6px;line-height:1.5}

/* ---------------------------------------------------------------- coaching */
.coachnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.coachnav button{
  background:var(--card2);border:3px solid #000;color:var(--ink-soft);
  padding:8px 14px;font-family:var(--hud);font-size:12.5px;font-weight:600;
  border-radius:var(--radius);text-transform:uppercase;letter-spacing:.06em;
}
.coachnav button.on{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#2a1206;font-weight:700}
.coachnav button.done{color:var(--good)}
.bigidea{
  background:linear-gradient(160deg,#3a2145,#221730);border:3px solid #000;
  border-left:8px solid var(--pink);border-radius:var(--radius);
  padding:16px 18px;font-size:17px;line-height:1.5;margin:8px 0 18px;
}
.step{display:flex;gap:14px;margin-bottom:15px}
.step .n{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--accent2),var(--accent));border:3px solid #000;
  display:grid;place-items:center;font-family:var(--display);font-size:16px;color:#2a1206;
}
.step .t{font-family:var(--hud);font-weight:700;margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.step .b{color:var(--ink-soft);font-size:15px;line-height:1.55}
.hl{background:var(--pink);color:#fff;padding:1px 7px;border-radius:3px;font-weight:600}
.hook{
  background:var(--warn-dim);border:3px solid #000;border-left:8px solid var(--warn);
  border-radius:var(--radius);padding:13px 16px;margin-top:18px;font-size:14.5px;
}
.hook b{font-family:var(--hud);color:var(--warn);text-transform:uppercase;letter-spacing:.06em}

/* widgets stay a light panel — the 30 diagrams are drawn dark-on-light */
.widget{background:#f4ece0;color:#181020;border:3px solid #000;border-radius:var(--radius);padding:16px;margin:16px 0;box-shadow:5px 5px 0 rgba(0,0,0,.45)}
.widget h4{margin:0 0 10px;font-family:var(--hud);font-size:12px;color:#6b5a72;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.widget input[type=range]{width:100%;accent-color:#d0562f}
.widget .ctl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px;margin-top:10px}
.widget .muted{color:#6b5a72}
.widget button{
  background:#2b1d33;color:#f7efe2;padding:8px 14px;font-family:var(--hud);
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:3px solid #000;margin:3px 4px 0 0;
}
.widget button.on{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#2a1206}
.widget .out{font-size:16px;font-weight:600;margin-top:12px;color:#8c3a1e;line-height:1.5}
.drill{background:var(--card2);border:3px solid #000;border-radius:var(--radius);padding:16px;margin-top:18px}
.drill .prompt{font-size:17px}
.drillmsg{margin-top:10px;font-family:var(--hud);font-size:14.5px;font-weight:700}
.drillmsg.ok{color:var(--good)}
.drillmsg.no{color:var(--bad)}

/* ----------------------------------------------------------------- explore */
.exmod{position:relative}
.exhead{display:flex;gap:14px;align-items:center}
.exicon{
  font-size:27px;width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--pink),#a8305f);border:3px solid #000;
  border-radius:var(--radius);box-shadow:4px 4px 0 rgba(0,0,0,.45);
}
.exhead h2{font-size:25px;margin:0}
.exmeta{display:flex;gap:8px;flex-wrap:wrap}
.stepbody{font-size:16px;line-height:1.62;color:#e4d9ea;margin-top:6px}
.stepbody p{margin:12px 0 0}
.stepbody strong{color:#fff}

/* -------------------------------------------------------------- confetti */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

@media (max-width:520px){
  .prompt{font-size:18px}
  .stat{min-width:94px;padding:10px 12px}
  .wrap{padding:14px 12px 110px}
  .topbar h1{font-size:25px;-webkit-text-stroke-width:4px}
  .hero .greet{font-size:30px}
  .verdict{font-size:27px;-webkit-text-stroke-width:4px}
  .cta{font-size:20px}
}