/* Abacus Kids: white, electric blue, tomato, sunshine yellow and mint. Lilita One for headings, Figtree for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --soft: #EEF1FF;
  --ink: #141B4D;
  --muted: #4A5285;
  --line: #DDE2F7;
  --line-strong: #C3CAEE;
  --brand: #2F4BFF;
  --brand-hover: #1E37E0;
  --brand-ink: #FFFFFF;
  --brand-text: #2440F0;
  --tom: #FF5A36;
  --sun: #FFD23F;
  --mint: #2EC4A0;
  --eyebrow: #E8401C;
  --announce-bg: #FFD23F;
  --announce-ink: #141B4D;
  --head: "Lilita One", system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --fs-body: 1.06rem;
  --radius: 16px;
  --radius-lg: 26px;
  --btn-radius: 999px;
  --wrap: 1180px;
  --gap: 22px;
}
h1, h2, h3 { font-weight: 400; letter-spacing: .005em; }
h3 { font-family: var(--body); font-weight: 800; }
h1 em { font-style: normal; color: var(--tom); }
.btn { font-weight: 800; }
.btn-primary { box-shadow: 0 5px 0 #1A2DB0; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #1A2DB0; }

/* header */
.header { background: #fff; border-bottom: 3px solid var(--sun); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 42px; height: 42px; }
.logo span { font: 400 1.6rem var(--head); color: var(--ink); }
.logo b { font-weight: 400; color: var(--tom); }
.nav a { font-weight: 700; }
.nav a[aria-current="page"] { background: var(--soft); color: var(--brand-text); }

/* hero */
.hero { padding-block: clamp(32px, 5vw, 72px); background: radial-gradient(circle at 12% 20%, #FFF4C7 0 120px, transparent 121px), radial-gradient(circle at 92% 88%, #FFE0D8 0 160px, transparent 161px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; margin: 14px 0 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.soroban { transform: rotate(-3deg); }
.soroban svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(20,27,77,.25)); }
.soroban-num { margin-top: 10px; text-align: center; font: 400 2rem var(--head); letter-spacing: .3em; color: var(--brand); }
.perks { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perks li { display: grid; gap: 6px; padding: 20px; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 18%, #fff); border: 2px solid var(--c); }
.perks b { font: 400 1.5rem var(--head); }
.perks span { color: var(--muted); }

/* flash game */
.fg { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
@media (max-width: 900px) { .fg { grid-template-columns: minmax(0, 1fr); } }
.fg-panel { display: grid; gap: 16px; padding: 22px; border-radius: var(--radius-lg); background: var(--soft); }
.fg-info { color: var(--muted); }
.fg-score { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-score span { padding: 8px 14px; border-radius: 999px; background: #fff; font-weight: 700; }
.fg-score b { color: var(--brand-text); }
.fg-stage { display: grid; justify-items: center; align-content: center; gap: 16px; min-height: 380px; padding: 28px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; text-align: center; }
.fg-flash { font: 400 clamp(4.5rem, 16vw, 9rem)/1 var(--head); color: var(--sun); min-height: 1em; font-variant-numeric: tabular-nums; }
.fg-flash.pop { animation: pop .25s ease-out; }
@keyframes pop { from { transform: scale(.7); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .fg-flash.pop { animation: none; } }
.fg-count { color: #A9B2EE; font-weight: 700; min-height: 1.4em; }
.fg-answer { display: flex; gap: 10px; width: min(360px, 100%); }
.fg-answer .input { font: 400 1.6rem var(--head); text-align: center; }
.fg-result { font-weight: 800; font-size: 1.15rem; min-height: 1.5em; }
.fg-result.ok { color: var(--mint); }
.fg-result.no { color: #FF8A70; }
.fg-stage .btn-primary { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 #C99D10; }

/* inner pages */
.page-head { margin-bottom: clamp(24px, 4vw, 40px); background: var(--soft); }
.page-head h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); }

/* CTA + footer */
.cta-band { padding-block: clamp(44px, 6vw, 80px); background: var(--tom); color: #fff; }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.cta-band p { margin-top: 6px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-band .btn-primary { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 #C99D10; }
.cta-band .btn-ghost { color: #fff; border-color: #fff; }
.footer { background: var(--ink); color: #B9C0EC; --footer-line: rgba(255,255,255,.14); }
.footer .logo span { color: #fff; }
.footer h2 { color: #fff; }
.f-about { margin-top: 12px; max-width: 34ch; }
.footer .credit a { color: #fff; }