/* SPM HomeRun — retro-computer personality, modern study app usability.
   Original design: chunky borders, hard shadows, terminal accents, two themes. */
:root, [data-theme="light"] {
  --bg:#f2eee3; --bg-grid:rgba(20,20,20,.055);
  --card:#fffdf6; --ink:#16130c; --muted:#6b6353;
  --brand:#e04e00; --brand-ink:#fff;
  --accent:#0e7c7b; --gold:#f5b301;
  --ok:#0e8a4d; --bad:#c23333;
  --line:#16130c; --shadow:5px 5px 0 var(--line);
  --radius:10px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="dark"] {
  --bg:#14110b; --bg-grid:rgba(255,255,255,.06);
  --card:#1e1a12; --ink:#f2ecdd; --muted:#a89e86;
  --brand:#ff7a1a; --brand-ink:#14110b;
  --accent:#2dd4bf; --gold:#f5b301;
  --line:#f2ecdd; --shadow:5px 5px 0 rgba(0,0,0,.65);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-color:var(--bg);
  background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
  background-size:22px 22px;
}
h1,h2,h3,.brand,.btn,.prompt { font-family:var(--mono); letter-spacing:-.5px; }
h1 { font-size:clamp(24px,5vw,34px); text-transform:lowercase; }
h1::before { content:">_ "; color:var(--brand); }
h2 { font-size:19px; text-transform:uppercase; border-bottom:3px solid var(--line); padding-bottom:6px; }
a { color:var(--brand); }
.topbar {
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; background:var(--card); border-bottom:3px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand { font-weight:800; font-size:20px; text-decoration:none; color:var(--ink); }
.brand span { color:var(--brand); }
nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav a { text-decoration:none; color:var(--ink); font-family:var(--mono); font-size:14px; padding:8px 10px; border:2px solid transparent; border-radius:8px; min-height:44px; display:inline-flex; align-items:center; }
nav a:hover { border-color:var(--line); background:var(--bg); }
.adminlink { color:var(--brand); font-weight:700; }
.themebtn { font-size:18px; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:8px; min-width:44px; min-height:44px; cursor:pointer; }
.wrap { max-width:860px; margin:0 auto; padding:20px 16px 70px; }
.card {
  background:var(--card); border:3px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:14px 0; box-shadow:var(--shadow);
}
.terminal { border-left:10px solid var(--brand); font-family:var(--mono); }
.prompt { font-weight:800; margin:0 0 8px; }
.blink { animation:blink 1.1s steps(1) infinite; color:var(--brand); }
@keyframes blink { 50% { opacity:0; } }
.crumbs { font-family:var(--mono); font-size:13px; }
.crumbs,.muted { color:var(--muted); }
.err { background:var(--card); border:3px solid var(--bad); color:var(--bad); padding:12px; border-radius:var(--radius); font-family:var(--mono); }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.big { font-size:32px; font-weight:800; margin:4px 0; font-family:var(--mono); }
.score { font-family:var(--mono); font-weight:800; font-size:18px; }
.btn {
  display:inline-block; background:var(--brand); color:var(--brand-ink);
  border:3px solid var(--line); border-radius:var(--radius);
  padding:12px 20px; font-size:16px; font-weight:800; cursor:pointer; text-decoration:none;
  box-shadow:4px 4px 0 var(--line); min-height:52px;
}
.btn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--line); }
.btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line); }
.btn.small { padding:8px 14px; font-size:14px; min-height:44px; }
.btn.big { font-size:18px; padding:14px 28px; }
.btn.ghost { background:var(--card); color:var(--ink); }
.btn.chunky { font-size:22px; padding:14px 22px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:4px 4px 0 var(--line); }
.linkbtn { background:none; border:0; color:var(--brand); cursor:pointer; font-size:14px; font-family:var(--mono); min-height:44px; }
.sizegrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:12px; margin:12px 0; }
.sizegrid form { margin:0; }
.sizegrid .btn { width:100%; }
.sizelist .sizerow { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.form label { display:block; margin:12px 0; font-weight:700; font-family:var(--mono); font-size:14px; }
.form input,.form select,.form textarea {
  display:block; width:100%; margin-top:6px; padding:14px;
  border:3px solid var(--line); border-radius:var(--radius); font-size:16px;
  background:var(--bg); color:var(--ink);
}
.form.inline { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.hero { text-align:center; padding:36px 10px; }
.hero h1 { font-size:clamp(34px,8vw,54px); }
.ctas { display:flex; gap:12px; justify-content:center; margin:20px 0; flex-wrap:wrap; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.tabs a { background:var(--card); border:3px solid var(--line); padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--ink); font-family:var(--mono); font-size:14px; min-height:44px; display:inline-flex; align-items:center; }
/* quiz */
.quiztop { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 0; font-family:var(--mono); }
.progress { height:16px; background:var(--card); border:3px solid var(--line); border-radius:99px; margin-top:8px; min-width:200px; overflow:hidden; }
.progress div { height:100%; background:repeating-linear-gradient(90deg,var(--brand) 0 10px,var(--gold) 10px 14px); width:0; transition:width .25s; }
.timer { font-weight:800; background:var(--card); border:3px solid var(--line); padding:8px 14px; border-radius:10px; box-shadow:3px 3px 0 var(--line); }
.qtext { font-size:19px; line-height:1.55; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.qimg { max-width:100%; border-radius:10px; border:3px solid var(--line); }
.opts { display:grid; gap:12px; margin-top:14px; }
.opt {
  text-align:left; font-size:18px; line-height:1.45; padding:18px; min-height:64px;
  border:3px solid var(--line); border-radius:var(--radius); background:var(--bg);
  color:var(--ink); cursor:pointer; box-shadow:4px 4px 0 var(--line);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.opt:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--line); }
.opt.sel { border-color:var(--line); background:var(--gold); color:#16130c; }
[data-theme="dark"] .opt.sel { color:#14110b; }
.opt:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible { outline:4px solid var(--accent); outline-offset:2px; }
.badge { display:inline-block; min-width:34px; text-align:center; background:var(--ink); color:var(--bg); font-weight:800; font-family:var(--mono); border-radius:8px; padding:4px 8px; margin-right:10px; }
.opt.sel .badge { background:#16130c; color:var(--gold); }
.qnav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; position:sticky; bottom:12px; }
.result { text-align:center; }
.ok { border-left:12px solid var(--ok); }
.bad { border-left:12px solid var(--bad); }
.foot { text-align:center; color:var(--muted); padding:24px; font-size:13px; font-family:var(--mono); }
.subject-card h3 { margin-top:0; }
@media (max-width:480px) {
  .opt { font-size:17px; }
  .qnav .btn { flex:1; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { .blink { animation:none; } .progress div { transition:none; } }