/* ============================================================
   BrainKong — Site-wide refresh (v2.1)
   Additive, cascade-last, applies the elevated design system
   across every page. Scoped to shared chrome (header, cards,
   buttons, menu tiles, choices) — never game-internal grids.
   The home page keeps its own stronger treatment via
   home-refresh.css (higher specificity), so this is the base.
   ============================================================ */

:root{
  --bk-brand-2:#2e7c5c;
  --bk-brand-dk:#1f513f;
  --bk-spark:#dc9a1f;
  --bk-ink:#11241b;
  --bk-shadow-card:0 2px 4px rgba(18,40,29,.045), 0 26px 54px -30px rgba(18,40,29,.30);
  --bk-shadow-sm:0 1px 2px rgba(18,40,29,.05);
}

/* ---- page atmosphere on every page ---- */
body{
  background:
    radial-gradient(1150px 620px at 50% -14%, #e2f1e8 0%, rgba(226,241,232,0) 60%),
    radial-gradient(760px 460px at 94% 3%, #f8efd8 0%, rgba(248,239,216,0) 52%),
    var(--bg);
  background-attachment:fixed;
}

/* ---- header: glass + sticky ---- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(247,248,246,.82);
  backdrop-filter:saturate(1.4) blur(13px);
  -webkit-backdrop-filter:saturate(1.4) blur(13px);
  border-bottom:1px solid rgba(38,102,79,.09);
}
.brand-mark{
  background:linear-gradient(150deg,var(--bk-brand-2),var(--bk-brand-dk));
  box-shadow:0 6px 14px -6px rgba(38,102,79,.5);
}

/* ---- cards ---- */
.card{
  border:1px solid #e3eae5;border-radius:20px;
  box-shadow:var(--bk-shadow-card);
}

/* ---- buttons ---- */
.btn-primary,.nav-cta{
  background:linear-gradient(160deg,var(--bk-brand-2),var(--bk-brand-dk));border:none;
  box-shadow:0 10px 22px -11px rgba(38,102,79,.6);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-primary:hover,.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 16px 28px -12px rgba(38,102,79,.6)}
.btn-primary:active,.nav-cta:active{transform:translateY(0)}
.btn-secondary,.btn-ghost{
  box-shadow:var(--bk-shadow-sm);
  transition:transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
}
.btn-secondary:hover,.btn-ghost:hover{transform:translateY(-1px);border-color:var(--brand);color:var(--brand)}

/* ---- menu / choice tiles: one consistent look ---- */
.family-game-card,.mode-btn,.special-mode-btn,.practice-action,.typing-choice{
  border:1.5px solid #d7e0db;border-radius:14px;background:#fff;
  box-shadow:var(--bk-shadow-sm);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.family-game-card:hover,.mode-btn:hover,.special-mode-btn:hover,.practice-action:hover,
.typing-choice:hover:not(:disabled),
.family-game-card:focus-visible,.mode-btn:focus-visible,.special-mode-btn:focus-visible,
.practice-action:focus-visible,.typing-choice:focus-visible:not(:disabled){
  transform:translateY(-2px);border-color:var(--brand);background:#f7fbf9;
  box-shadow:0 12px 22px -13px rgba(38,102,79,.36);
}
.family-game-card:active,.mode-btn:active,.special-mode-btn:active,.practice-action:active{transform:translateY(0)}
.mode-btn.active{border-color:var(--brand);background:#eef6f1;box-shadow:inset 0 0 0 1px rgba(38,102,79,.12)}

/* typing correction choices — match Write It Right answer tiles */
.typing-choice{min-height:56px;padding:13px 15px;font-weight:600}
.typing-choice.correct{border-color:#4f9877;background:#edf8f2;color:#164d38;box-shadow:0 8px 20px -12px rgba(38,114,85,.5)}
.typing-choice.wrong{border-color:#c97979;background:#fff3f3;color:#7f2929}

/* ---- accent rail for the primary family/hero cards only ---- */
.game-family,.result-panel{position:relative}

/* ---- collapsible special challenges (games catalog) ---- */
.special-collapse{margin-top:20px;border-top:1px solid var(--border,#dfe5df);padding-top:18px}
.special-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid #d7e0db;border-radius:14px;background:#fff;box-shadow:var(--bk-shadow-sm);transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease}
.special-summary::-webkit-details-marker{display:none}
.special-summary:hover,.special-collapse[open] .special-summary{border-color:var(--brand);box-shadow:0 10px 22px -14px rgba(38,102,79,.4)}
.special-summary-copy{display:flex;flex-direction:column;gap:3px}
.special-summary-copy .challenge-label{font-size:.72rem;letter-spacing:.12em;color:var(--brand)}
.special-summary-title{font-family:inherit;font-weight:800;font-size:1.12rem;letter-spacing:-.01em;color:var(--bk-ink);display:flex;align-items:center;gap:9px}
.special-count{font-size:.74rem;font-weight:700;color:var(--brand);background:rgba(38,102,79,.10);padding:3px 9px;border-radius:999px;letter-spacing:.02em}
.special-summary-cue{font-size:.85rem;font-weight:800;color:var(--brand);white-space:nowrap;display:flex;align-items:center;gap:6px}
.special-summary-cue::after{content:"⌄";font-size:1rem;transition:transform .2s ease;display:inline-block}
.special-collapse[open] .special-summary-cue::after{transform:rotate(180deg)}
.special-collapse .family-game-grid{margin-top:14px}

/* ---- floating install prompt (mobile / tablet, site-wide) ---- */
.install-floating{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(460px,calc(100% - 24px));z-index:60;animation:bkRiseUp .4s cubic-bezier(.2,.7,.2,1) both}
.install-floating .install-card{margin:0;box-shadow:0 20px 48px -18px rgba(18,40,29,.5)}
@keyframes bkRiseUp{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.install-floating{animation:none}}

/* ---- progress: skill-balance radar + bars ---- */
.mastery-layout{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:center}
.mastery-radar{padding:4px 0}
@media(max-width:720px){.mastery-layout{grid-template-columns:1fr;gap:10px}.mastery-radar{max-width:300px;margin:0 auto}}

/* ---- distinctive display typeface for headings ---- */
h1,h2,h3,
.mode-title,#modeTitle,.game-top h1,#resultTitle,.result-panel h2,
.brainkong-first-copy h1,.brainkong-first-tagline,
.family-head h2,.special-summary-title,
.section-title,.page-title{
  font-family:"Bricolage Grotesque","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.02em;
}
.brainkong-first-copy h1,.game-top h1,.family-head h2{letter-spacing:-.035em}

/* ---- global reduced-motion guard ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important;scroll-behavior:auto!important}
}