/* 80 in 8 — standalone mental-math screen. Theme-variable driven (light/dark). */

.sm { max-width: 660px; margin: 0 auto; width: 100%; }

/* ---- start card ---- */
.sm__startcard {
  text-align: center;
  background: var(--bg-elevated, var(--bg-secondary, #fff));
  border: 1px solid var(--border-color, rgba(0,0,0,.08));
  border-radius: 18px;
  padding: 34px 26px 28px;
  box-shadow: 0 10px 34px rgba(15,23,42,.08);
}
.sm__eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-primary, #4c8bf5); }
.sm__title { font: 800 2.6rem/1 "JetBrains Mono", ui-monospace, monospace; margin: 8px 0 12px; color: var(--text-primary, #111); letter-spacing: -.01em; }
.sm__lede { font-size: 1rem; line-height: 1.6; color: var(--text-secondary, #555); max-width: 30em; margin: 0 auto 18px; }
.sm__lede kbd, .sm-foot kbd { font: 600 .82em/1 "JetBrains Mono", monospace; background: var(--bg-secondary, #f0f2f6); border: 1px solid var(--border-color, #d8dce4); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; color: var(--text-primary, #222); }
.sm__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 16px; }
.sm__facts span { display: flex; flex-direction: column; gap: 2px; background: var(--bg-secondary, #f4f6fa); border: 1px solid var(--border-color, rgba(0,0,0,.06)); border-radius: 11px; padding: 9px 14px; font-size: .72rem; color: var(--text-muted, #8a93a3); text-transform: uppercase; letter-spacing: .03em; }
.sm__facts span b { font: 800 1.05rem/1 "JetBrains Mono", monospace; color: var(--text-primary, #111); text-transform: none; letter-spacing: 0; }
.sm__best { font-size: .9rem; color: var(--text-secondary, #555); margin-bottom: 14px; }
.sm__best b { color: var(--accent-gold, #f5b731); font-family: "JetBrains Mono", monospace; }
.sm__go {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--accent-primary, #4c8bf5); color: #fff;
  font: 700 1.05rem/1 Inter, system-ui, sans-serif;
  padding: 15px 28px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(76,139,245,.32); transition: transform .12s, box-shadow .12s, filter .12s;
}
.sm__go:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 9px 24px rgba(76,139,245,.4); }
.sm__go:active { transform: translateY(0); }
.sm__fine { font-size: .8rem; color: var(--text-muted, #98a1b0); margin: 14px 0 0; line-height: 1.5; }
.sm__fine code, .sm__lede code { font: 600 .9em "JetBrains Mono", monospace; background: var(--bg-secondary, #eef1f6); padding: 1px 6px; border-radius: 5px; color: var(--accent-primary, #3b6fd4); }

/* ---- running shell ---- */
.sm--run { background: var(--bg-elevated, var(--bg-secondary, #fff)); border: 1px solid var(--border-color, rgba(0,0,0,.08)); border-radius: 18px; padding: 0 0 18px; overflow: hidden; box-shadow: 0 10px 34px rgba(15,23,42,.08); }
.sm-hud { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; gap: 12px; }
.sm-hud__score { font: 700 1rem/1 Inter, sans-serif; color: var(--text-secondary, #555); }
.sm-hud__score b { font-family: "JetBrains Mono", monospace; color: var(--accent-gold, #f5b731); font-size: 1.15rem; }
.sm-hud__clock { font: 700 1.05rem/1 Inter, sans-serif; color: var(--text-primary, #222); }
.sm-hud__clock b { font-family: "JetBrains Mono", monospace; }
.sm-hud__clock--low { color: var(--danger, #e5484d); animation: smPulse .9s ease-in-out infinite; }
@keyframes smPulse { 50% { opacity: .55; } }
.sm-hud__quit { border: 1px solid var(--border-color, #d8dce4); background: transparent; color: var(--text-muted, #98a1b0); font: 600 .8rem/1 Inter, sans-serif; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.sm-hud__quit:hover { color: var(--text-primary, #222); border-color: var(--text-muted, #98a1b0); }
.sm-timebar__track { height: 4px; background: var(--bg-secondary, #eef1f6); }
.sm-timebar { height: 100%; background: linear-gradient(90deg, var(--accent-primary, #4c8bf5), var(--accent-gold, #f5b731)); transition: width 1s linear; }

.sm-stage { padding: 30px 22px 18px; text-align: center; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sm-q__num { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted, #98a1b0); margin-bottom: 18px; }
.sm-q__prompt { font: 800 clamp(2.2rem, 7vw, 3.4rem)/1.1 "JetBrains Mono", ui-monospace, monospace; color: var(--text-primary, #111); margin-bottom: 26px; word-break: break-word; }
.sm-q__eq { opacity: .45; }
.sm-q__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 460px; }
.sm-opt {
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative;
  background: var(--bg-secondary, #f4f6fa); border: 1.5px solid var(--border-color, rgba(0,0,0,.10));
  border-radius: 13px; padding: 18px 14px; cursor: pointer;
  font: 700 1.5rem/1 "JetBrains Mono", monospace; color: var(--text-primary, #111);
  transition: transform .08s, border-color .12s, background .12s;
}
.sm-opt:hover { border-color: var(--accent-primary, #4c8bf5); background: var(--bg-elevated, #fff); }
.sm-opt:active { transform: scale(.97); }
.sm-opt__k { position: absolute; top: 7px; left: 9px; font: 700 .68rem/1 Inter, sans-serif; color: var(--text-muted, #98a1b0); }
.sm-opt--ok { background: rgba(34,197,94,.16) !important; border-color: #22c55e !important; color: #15803d !important; }
.sm-opt--no { background: rgba(229,72,77,.14) !important; border-color: #e5484d !important; color: #b91c1c !important; }
.sm-foot { text-align: center; font-size: .82rem; color: var(--text-muted, #98a1b0); padding: 6px 20px 0; }
.sm-foot b { color: var(--text-secondary, #555); }

/* ---- results ---- */
.sm-res { background: var(--bg-elevated, var(--bg-secondary, #fff)); border: 1px solid var(--border-color, rgba(0,0,0,.08)); border-radius: 18px; padding: 26px 24px; text-align: center; box-shadow: 0 10px 34px rgba(15,23,42,.08); position: relative; overflow: hidden; }
.sm-res__pb { display: inline-block; background: var(--accent-gold, #f5b731); color: #3a2c00; font: 800 .76rem/1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; margin-bottom: 12px; }
.sm-res__band { font: 800 .82rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sm-res--strong .sm-res__band { color: #16a34a; }
.sm-res--pass .sm-res__band { color: var(--accent-primary, #4c8bf5); }
.sm-res--low .sm-res__band { color: #e5784d; }
.sm-res__score { margin: 6px 0 4px; }
.sm-res__score b { font: 800 4rem/1 "JetBrains Mono", monospace; color: var(--text-primary, #111); }
.sm-res__score span { display: block; font-size: .9rem; color: var(--text-muted, #98a1b0); margin-top: 2px; }
.sm-res__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
.sm-res__stats span { display: flex; flex-direction: column; gap: 2px; min-width: 72px; background: var(--bg-secondary, #f4f6fa); border-radius: 10px; padding: 9px 12px; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #98a1b0); }
.sm-res__stats span b { font: 800 1.15rem/1 "JetBrains Mono", monospace; color: var(--text-primary, #111); text-transform: none; letter-spacing: 0; }
.sm-res__rec { text-align: left; background: var(--bg-secondary, #f4f6fa); border: 1px solid var(--border-color, rgba(0,0,0,.06)); border-radius: 13px; padding: 15px 17px; margin: 6px 0 18px; }
.sm-res__rec-h { font: 800 .76rem/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-primary, #4c8bf5); margin-bottom: 7px; }
.sm-res--strong .sm-res__rec-h { color: #16a34a; }
.sm-res__rec p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--text-secondary, #444); }
.sm-res__next-h { text-align: left; font: 700 .9rem/1.4 Inter, sans-serif; color: var(--text-primary, #222); margin-bottom: 11px; }
.sm-res__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sm-card { display: flex; flex-direction: column; gap: 3px; text-align: left; text-decoration: none; background: var(--bg-secondary, #f4f6fa); border: 1px solid var(--border-color, rgba(0,0,0,.08)); border-radius: 12px; padding: 13px 15px; transition: border-color .12s, transform .1s, background .12s; }
.sm-card:hover { border-color: var(--accent-primary, #4c8bf5); transform: translateY(-1px); background: var(--bg-elevated, #fff); }
.sm-card b { font-size: .92rem; color: var(--text-primary, #111); }
.sm-card span { font-size: .78rem; color: var(--text-muted, #98a1b0); line-height: 1.4; }
.sm-res__foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.sm-res__best { font-size: .85rem; color: var(--text-muted, #98a1b0); }
.sm-res__best b { color: var(--accent-gold, #f5b731); font-family: "JetBrains Mono", monospace; }

@media (max-width: 520px) {
  .sm-res__links { grid-template-columns: 1fr; }
  .sm__title { font-size: 2.2rem; }
  .sm-res__score b { font-size: 3.2rem; }
}

/* ---- page content sections (well-formatted SEO prose) ---- */
.sm-doc { max-width: 720px; margin: 0 auto; padding: 0 4px; }
.sm-doc + .sm-doc { margin-top: 40px; }
.sm-doc h2 { font: 800 1.45rem/1.25 Inter, system-ui, sans-serif; color: var(--text-primary, #111); margin: 0 0 14px; letter-spacing: -.01em; }
.sm-doc p { font-size: 1rem; line-height: 1.72; color: var(--text-secondary, #4a5160); margin: 0 0 14px; }
.sm-doc p:last-child { margin-bottom: 0; }
.sm-doc code { font: 600 .9em "JetBrains Mono", ui-monospace, monospace; background: var(--bg-secondary, #eef1f6); color: var(--accent-primary, #3b6fd4); padding: 1.5px 6px; border-radius: 5px; white-space: nowrap; }
.sm-doc a { color: var(--accent-primary, #3b6fd4); text-decoration: none; font-weight: 600; }
.sm-doc a:hover { text-decoration: underline; }

.sm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sm-fact { background: var(--bg-secondary, #f6f8fb); border: 1px solid var(--border-color, rgba(0,0,0,.07)); border-radius: 12px; padding: 14px 16px; }
.sm-fact__k { font: 800 .72rem/1 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-primary, #4c8bf5); margin-bottom: 7px; }
.sm-fact__v { font-size: .92rem; line-height: 1.55; color: var(--text-secondary, #4a5160); }
.sm-fact__v code { white-space: nowrap; }

.sm-tips { list-style: none; margin: 0 0 16px; padding: 0; }
.sm-tips li { position: relative; padding: 12px 16px 12px 44px; margin-bottom: 10px; background: var(--bg-secondary, #f6f8fb); border: 1px solid var(--border-color, rgba(0,0,0,.07)); border-left: 3px solid var(--accent-primary, #4c8bf5); border-radius: 10px; font-size: .96rem; line-height: 1.6; color: var(--text-secondary, #4a5160); }
.sm-tips li::before { content: "✓"; position: absolute; left: 15px; top: 12px; font-weight: 800; color: var(--accent-primary, #4c8bf5); }
.sm-tips li strong { color: var(--text-primary, #222); }

.sm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 520px) {
  .sm-facts { grid-template-columns: 1fr; }
}