/**
 * Brain Games styling.
 *
 * Everything here is driven by the global var(--ma-*) brand tokens emitted by
 * includes/mindaura-brand-colors.php, so a colour change in Settings -> Colors
 * flows through to the games with no edits here. The fallbacks in each var()
 * only matter when a game is embedded somewhere the token block hasn't loaded.
 *
 * Inter is the brand typeface (already loaded globally by xform-builder-style.css;
 * the games templates also link it directly with preconnect, which is faster than
 * that file's @import and means an embedded game renders correctly on any theme).
 *
 * Two namespaces:
 *   .mag-*   the game widget and article — safe to drop into any theme via shortcode
 *   .magp-*  the /games/ page shell (nav, hero, CTA) — only used by the templates
 *
 * Every rule is scoped under a .mag-* / .magp-* ancestor, because the shortcode
 * drops this markup into arbitrary themes and must not leak styles into them.
 */

.mag-game,
.mag-scope {
    --mag-radius: 18px;
    --mag-bg: var(--ma-card, #fff);
    --mag-fg: var(--ma-foreground, #1d2039);
    --mag-muted: var(--ma-muted-foreground, #646887);
    --mag-border: var(--ma-border, #e5e4f1);
    --mag-primary: var(--ma-primary, #4f46e5);
    --mag-cta: var(--ma-cta, #1a7a6e);
    --mag-cta-hover: var(--ma-cta-hover, #15655c);
    --mag-success: var(--ma-success, #0c8d62);
    --mag-danger: var(--ma-destructive, #ef4343);
    --mag-soft: var(--ma-muted, #f0f1fa);
    --mag-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-family: var(--mag-font);
    color: var(--mag-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mag-game *,
.mag-scope * {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   1. Game widget
   ══════════════════════════════════════════════════════════════════════ */

.mag-shell {
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    background: var(--mag-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mag-shell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mag-border);
}

.mag-shell__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mag-shell__measures {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mag-muted);
}

.mag-stage {
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 420px;
    justify-content: center;
}

.mag-board {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.mag-hud {
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mag-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Panels & buttons ──────────────────────────────────────────────── */

.mag-panel {
    text-align: center;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.mag-panel__title {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mag-fg);
}

.mag-panel__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mag-muted);
}

.mag-panel__foot {
    margin: 0;
    font-size: 12px;
    color: var(--mag-muted);
    opacity: 0.85;
}

.mag-noscript {
    padding: 32px;
    text-align: center;
    border: 1px dashed var(--mag-border);
    border-radius: var(--mag-radius);
}

/* Buttons follow the dashboard's scale: small, sleek, 8 to 10px radius,
   13px / weight 600, never the oversized hero-button look. */
.mag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s cubic-bezier(.4,0,.2,1),
                border-color .16s cubic-bezier(.4,0,.2,1),
                box-shadow .16s cubic-bezier(.4,0,.2,1),
                transform .12s cubic-bezier(.4,0,.2,1),
                opacity .16s;
}

.mag-btn:hover { transform: translateY(-1px); }
.mag-btn:active { transform: translateY(0); transition-duration: .06s; }
.mag-btn:focus-visible { outline: 2px solid var(--mag-primary); outline-offset: 2px; }
.mag-btn[disabled] { opacity: .45; pointer-events: none; }

/* Slightly larger only where the button is the single primary action. */
.mag-btn--lg { padding: 12px 26px; font-size: 14.5px; border-radius: 11px; }
.mag-btn--wide { flex: 1; min-width: 120px; padding: 13px 18px; font-size: 14px; }

.mag-ico {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    fill: currentColor;
    transition: transform .16s cubic-bezier(.4,0,.2,1);
}
.mag-btn:hover .mag-ico { transform: translateX(1px); }
.mag-btn--cta:hover .mag-ico { transform: translateX(2px); }

.mag-btn--primary { background: var(--mag-primary); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,.25); }
.mag-btn--primary:hover { background: var(--ma-primary-glow, #7b74ec); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.32); }

.mag-btn--ghost { background: transparent; border-color: var(--mag-border); color: var(--mag-fg); }
.mag-btn--ghost:hover { border-color: var(--mag-primary); color: var(--mag-primary); }

.mag-btn--cta { background: var(--mag-cta); color: #fff; box-shadow: 0 2px 8px rgba(26,122,110,.25); }
.mag-btn--cta:hover { background: var(--mag-cta-hover); color: #fff; box-shadow: 0 4px 14px rgba(26,122,110,.3); }
.mag-btn--ghost.is-done { border-color: var(--mag-success); color: var(--mag-success); }

.mag-btn--choice {
    padding: 12px 20px;
    font-size: 14px;
    background: var(--mag-bg);
    border-color: var(--mag-border);
    color: var(--mag-fg);
}
.mag-btn--choice:hover { border-color: var(--mag-primary); }

/* ── Result screen ─────────────────────────────────────────────────── */

.mag-panel--result { max-width: 560px; width: 100%; }

.mag-result__label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mag-muted);
}

.mag-result__score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.mag-result__value {
    font-size: clamp(3rem, 12vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--mag-fg);
    font-variant-numeric: tabular-nums;
}

.mag-result__unit { font-size: 1.1rem; font-weight: 700; color: var(--mag-muted); }

.mag-rank { width: 100%; max-width: 460px; }

.mag-rank__bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--mag-soft);
    overflow: hidden;
}

.mag-rank__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mag-primary), var(--ma-primary-glow, #7b74ec));
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mag-rank__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--mag-muted);
    font-variant-numeric: tabular-nums;
}

.mag-rank__text {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mag-muted);
}

.mag-rank__verdict {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ma-accent, #dcdafb);
    color: var(--ma-accent-foreground, #1d169c);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.mag-rank__sub { display: block; font-size: 12.5px; margin-top: 4px; }

.mag-rank__best {
    display: inline-block;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
}
.mag-rank__best--new { color: var(--mag-success); }

/* How this score compares to the population norm for the game. */
.mag-compare {
    width: 100%;
    max-width: 460px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--mag-soft);
    font-size: 13px;
}

.mag-compare div { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.mag-compare dt, .mag-compare span:first-child { color: var(--mag-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.mag-compare b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mag-result__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.mag-cta {
    width: 100%;
    max-width: 560px;
    margin-top: 4px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--mag-border);
    background: var(--ma-secondary, #f0effc);
    text-align: center;
}

.mag-cta__title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.mag-cta__body { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--mag-muted); }

/* ── Reaction Time ─────────────────────────────────────────────────── */

.mag-rt {
    width: 100%;
    min-height: 320px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    padding: 24px;
    transition: background-color 0.08s;
}

.mag-rt__big {
    font-size: clamp(1.5rem, 5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.mag-rt__small { font-size: 14px; opacity: 0.85; }

.mag-rt.is-wait   { background: #2563eb; color: #fff; }
.mag-rt.is-go     { background: #16a34a; color: #fff; }
.mag-rt.is-early  { background: var(--mag-danger); color: #fff; }
.mag-rt.is-result,
.mag-rt.is-done   { background: var(--ma-surface-dark, #161b3b); color: #fff; }

/* ── Number Memory ─────────────────────────────────────────────────── */

.mag-nm {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.mag-nm__digits {
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
    line-height: 1.2;
}

.mag-nm__timer {
    width: 100%;
    max-width: 320px;
    height: 5px;
    border-radius: 999px;
    background: var(--mag-soft);
    overflow: hidden;
}

.mag-nm__timer-fill { width: 100%; height: 100%; background: var(--mag-primary); }

.mag-nm__prompt { margin: 0; font-size: 1.1rem; font-weight: 700; }

.mag-nm__input {
    width: 100%;
    max-width: 320px;
    height: 56px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid var(--mag-border);
    background: var(--mag-bg);
    color: var(--mag-fg);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.1em;
    outline: none;
}
.mag-nm__input:focus { border-color: var(--mag-primary); }

.mag-nm__compare {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

.mag-nm__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--mag-soft);
    font-size: 14px;
}
.mag-nm__row em { font-style: normal; color: var(--mag-muted); }
.mag-nm__row b { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

/* ── Grid boards ───────────────────────────────────────────────────── */

.mag-grid-board { display: grid; gap: 8px; width: 100%; margin: 0 auto; }

.mag-tile {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: none;
    background: var(--mag-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mag-fg);
    transition: background-color 0.12s, transform 0.08s, color 0.12s;
    width: 100%;
}

.mag-tile:disabled { cursor: default; }
.mag-tile:not(:disabled):hover { background: var(--ma-accent, #dcdafb); }
.mag-tile.is-lit { background: var(--mag-primary); }
.mag-tile.is-correct { background: var(--mag-primary); }
.mag-tile.is-wrong { background: var(--mag-danger); color: #fff; }

.mag-grid-board--chimp { gap: 6px; max-width: 640px; }
.mag-slot { aspect-ratio: 1 / 1; }

.mag-tile--num {
    background: var(--mag-bg);
    border: 2px solid var(--mag-fg);
    color: var(--mag-fg);
    height: 100%;
}
.mag-tile--num.is-covered { background: var(--mag-fg); border-color: var(--mag-fg); color: transparent; }
.mag-tile--num.is-cleared { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.mag-tile--num.is-wrong { background: var(--mag-danger); border-color: var(--mag-danger); color: #fff; }

.mag-grid-board--seq { gap: 12px; }
.mag-tile--seq { border-radius: 14px; }

/* ── Stroop ────────────────────────────────────────────────────────── */

.mag-stroop {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.mag-stroop__hint { margin: 0; font-size: 13px; color: var(--mag-muted); }
.mag-stroop__hint em { font-style: normal; font-weight: 700; color: var(--mag-fg); }

.mag-stroop__word {
    font-size: clamp(2.4rem, 11vw, 4rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.1;
    padding: 24px 12px;
    border-radius: 16px;
    width: 100%;
    background: var(--mag-soft);
    transition: box-shadow 0.1s;
}
.mag-stroop__word.is-hit { box-shadow: inset 0 0 0 3px var(--mag-success); }
.mag-stroop__word.is-miss { box-shadow: inset 0 0 0 3px var(--mag-danger); }

.mag-stroop__buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ── Typing ────────────────────────────────────────────────────────── */

.mag-typing { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 16px; }

.mag-typing__text {
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: var(--mag-muted);
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--mag-soft);
}

.mag-typing__char.is-ok { color: var(--mag-fg); }
.mag-typing__char.is-bad { color: #fff; background: var(--mag-danger); border-radius: 2px; }
.mag-typing__char.is-next { background: var(--ma-accent, #dcdafb); border-radius: 2px; box-shadow: -1px 0 0 var(--mag-primary); }

.mag-typing__input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--mag-border);
    background: var(--mag-bg);
    color: var(--mag-fg);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    resize: none;
    outline: none;
}
.mag-typing__input:focus { border-color: var(--mag-primary); }
.mag-typing__input:disabled { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════
   2. Card grid
   ══════════════════════════════════════════════════════════════════════ */

.mag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.mag-grid[data-cols="1"] { grid-template-columns: 1fr; }
.mag-grid[data-cols="2"] { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mag-grid[data-cols="4"] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.mag-card {
    position: relative;
    display: block;
    padding: 24px;
    border-radius: var(--mag-radius);
    border: 1.5px solid var(--mag-border);
    background: var(--mag-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
}

.mag-card:hover {
    border-color: rgba(26, 29, 46, 0.25);
    box-shadow: 0 6px 28px rgba(26, 29, 46, 0.08);
    transform: translateY(-2px);
    color: inherit;
}

.mag-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.mag-card__arrow {
    position: absolute;
    top: 26px;
    right: 24px;
    color: var(--mag-primary);
    opacity: 0;
    transition: opacity 0.18s, transform 0.18s;
    transform: translateX(-4px);
}
.mag-card:hover .mag-card__arrow { opacity: 1; transform: translateX(0); }

.mag-card__name { margin: 0 0 8px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--mag-fg); }
.mag-card__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mag-muted); }

.mag-card__meta {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mag-muted);
    font-variant-numeric: tabular-nums;
}

/* Per-game icon tints. Literal because they are decorative accents that must
   stay distinguishable from each other after a brand colour change. */
.mag-accent-indigo .mag-card__icon { background: rgba(79, 70, 229, 0.12);  color: #4f46e5; }
.mag-accent-green  .mag-card__icon { background: rgba(5, 150, 105, 0.12);  color: #059669; }
.mag-accent-blue   .mag-card__icon { background: rgba(37, 99, 235, 0.12);  color: #2563eb; }
.mag-accent-amber  .mag-card__icon { background: rgba(217, 119, 6, 0.14);  color: #b45309; }
.mag-accent-rose   .mag-card__icon { background: rgba(225, 29, 72, 0.12);  color: #e11d48; }
.mag-accent-violet .mag-card__icon { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.mag-accent-teal   .mag-card__icon { background: rgba(13, 148, 136, 0.12); color: #0d9488; }

/* ══════════════════════════════════════════════════════════════════════
   3. Editorial article
   ══════════════════════════════════════════════════════════════════════ */

.mag-article {
    margin: 48px auto 0;
    max-width: 720px;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--mag-fg);
}

.mag-article--hub { max-width: 820px; }

.mag-article section { margin-bottom: 44px; }

.mag-article h2 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 16px;
    color: var(--mag-fg);
}

.mag-article h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.mag-article p { margin: 0 0 16px; }
.mag-article p:last-child { margin-bottom: 0; }
.mag-article strong { font-weight: 700; }
.mag-article a { color: var(--mag-primary); text-decoration: underline; text-underline-offset: 2px; }

/* The quick-answer block: first thing on the page after the game, and the
   passage answer-engines are most likely to lift. */
.mag-answer {
    padding: 24px 26px;
    border-radius: 16px;
    border: 1px solid var(--mag-border);
    border-left: 4px solid var(--mag-primary);
    background: var(--mag-bg);
}

.mag-answer h2 { font-size: 1.1rem; margin-bottom: 10px; }
.mag-answer p { font-size: 16px; }
.mag-answer__live { font-size: 14px; color: var(--mag-muted); margin-top: 12px; margin-bottom: 0; }

.mag-list, .mag-steps { margin: 0; padding-left: 1.35em; }
.mag-list li, .mag-steps li { margin-bottom: 10px; }
.mag-list li:last-child, .mag-steps li:last-child { margin-bottom: 0; }

.mag-list--check { list-style: none; padding-left: 0; }
.mag-list--check li { position: relative; padding-left: 1.9em; }
.mag-list--check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 5px;
    border-left: 2.5px solid var(--mag-cta);
    border-bottom: 2.5px solid var(--mag-cta);
    transform: rotate(-45deg);
}

/* ── Benchmark table ───────────────────────────────────────────────── */

.mag-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }

.mag-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 420px;
}

.mag-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mag-muted);
    padding: 0 14px 8px;
    border-bottom: 1.5px solid var(--mag-border);
}

.mag-table tbody th,
.mag-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mag-border);
    vertical-align: top;
    text-align: left;
}

.mag-table tbody th { font-weight: 700; white-space: nowrap; }
.mag-table tbody td { color: var(--mag-muted); }
.mag-table tbody tr:last-child th,
.mag-table tbody tr:last-child td { border-bottom: none; }

.mag-note { font-size: 13.5px; line-height: 1.65; color: var(--mag-muted); margin: 0; }
.mag-note--footer { max-width: 720px; margin: 0 auto 72px; text-align: center; }

/* ── Definition list (factors) ─────────────────────────────────────── */

.mag-dl { margin: 0; }
.mag-dl dt { font-weight: 700; margin-top: 18px; }
.mag-dl dt:first-child { margin-top: 0; }
.mag-dl dd { margin: 4px 0 0; color: var(--mag-muted); }

/* ── FAQ ───────────────────────────────────────────────────────────── */

.mag-faq {
    border: 1px solid var(--mag-border);
    border-radius: 12px;
    background: var(--mag-bg);
    margin-bottom: 10px;
    overflow: hidden;
}

.mag-faq > summary {
    cursor: pointer;
    padding: 15px 44px 15px 18px;
    position: relative;
    list-style: none;
    font-weight: 700;
}

.mag-faq > summary::-webkit-details-marker { display: none; }

.mag-faq > summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--mag-muted);
    border-bottom: 2px solid var(--mag-muted);
    transform: rotate(45deg);
    transition: transform 0.18s;
}

.mag-faq[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.mag-faq > summary:focus-visible { outline: 3px solid var(--mag-primary); outline-offset: -3px; }
.mag-faq > p { margin: 0; padding: 0 18px 18px; color: var(--mag-muted); font-size: 15.5px; }

/* ── Sources ───────────────────────────────────────────────────────── */

.mag-sources { margin: 0 0 14px; padding-left: 1.2em; font-size: 14px; color: var(--mag-muted); }
.mag-sources li { margin-bottom: 8px; }
.mag-sources em { font-style: italic; }

/* ── Breadcrumbs ───────────────────────────────────────────────────── */

.mag-crumbs { margin: 22px 0 20px; font-size: 13px; }
.mag-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mag-crumbs li { display: flex; align-items: center; gap: 6px; color: var(--mag-muted); }
.mag-crumbs li + li::before { content: "/"; color: var(--mag-border); }
.mag-crumbs a { color: var(--mag-muted); text-decoration: none; }
.mag-crumbs a:hover { color: var(--mag-fg); text-decoration: underline; }
.mag-crumbs [aria-current="page"] { color: var(--mag-fg); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   4. Page shell (/games/ templates only)
   ══════════════════════════════════════════════════════════════════════ */

.magp {
    min-height: 100vh;
    background: var(--ma-background, #f8f9fe);
    font-family: var(--mag-font);
    color: var(--ma-foreground, #1d2039);
}

.magp * { box-sizing: border-box; }

.magp-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.magp-wrap--wide { max-width: 1100px; }

/* ── Top bar ───────────────────────────────────────────────────────── */

.magp-nav { border-bottom: 1px solid var(--ma-border, #e5e4f1); background: var(--ma-card, #fff); }

.magp-nav__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.magp-nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ma-foreground, #1d2039);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
}
.magp-nav__logo img { max-height: 30px; width: auto; display: block; }

.magp-nav__links { display: flex; align-items: center; gap: 22px; }
.magp-nav__links a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ma-muted-foreground, #646887); }
.magp-nav__links a:hover { color: var(--ma-foreground, #1d2039); }
.magp-nav__cta { color: var(--ma-cta, #1a7a6e) !important; }

/* ── Hub hero ──────────────────────────────────────────────────────── */

.magp-hero { text-align: center; padding: 48px 0 40px; }

.magp-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ma-primary, #4f46e5);
    margin: 0 0 12px;
}

.magp-hero h1 {
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0 0 16px;
    color: var(--ma-foreground, #1d2039);
}

.magp-hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    line-height: 1.65;
    color: var(--ma-muted-foreground, #646887);
    margin: 0 auto;
    max-width: 620px;
}

/* ── Single-game header ────────────────────────────────────────────── */

.magp-head { margin-bottom: 26px; }

.magp-head h1 {
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.1;
    margin: 0 0 10px;
    color: var(--ma-foreground, #1d2039);
}

.magp-head__sub { font-size: clamp(1.05rem, 2.4vw, 1.2rem); font-weight: 600; color: var(--ma-foreground, #1d2039); margin: 0 0 10px; }
.magp-head__intro { font-size: 16px; line-height: 1.7; color: var(--ma-muted-foreground, #646887); margin: 0; }

.magp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.magp-facts li {
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--ma-muted, #f0f1fa);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ma-muted-foreground, #646887);
}

/* ── CTA band ──────────────────────────────────────────────────────── */

.magp-cta {
    margin: 20px auto 64px;
    max-width: 720px;
    padding: 44px 32px;
    border-radius: 24px;
    background: var(--ma-surface-dark, #161b3b);
    color: var(--ma-surface-dark-foreground, #fff);
    text-align: center;
}

.magp-cta h2 { font-size: clamp(1.35rem, 4vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.magp-cta p { font-size: 15px; line-height: 1.65; opacity: 0.8; margin: 0 auto 24px; max-width: 520px; }

.magp-cta a {
    display: inline-block;
    padding: 15px 34px;
    border-radius: 12px;
    background: var(--ma-cta, #1a7a6e);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s;
}
.magp-cta a:hover { background: var(--ma-cta-hover, #15655c); }

/* ── Related games ─────────────────────────────────────────────────── */

.magp-others { margin: 0 0 64px; }
.magp-others h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
    color: var(--ma-foreground, #1d2039);
}

/* ══════════════════════════════════════════════════════════════════════
   4b. Saved progress, new games, motion
   ══════════════════════════════════════════════════════════════════════ */

/* Personal best shown on the intro screen for a returning player. */
.mag-prev {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.mag-prev__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--mag-soft);
    min-width: 84px;
}

.mag-prev__item em {
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mag-muted);
}

.mag-prev__item b {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mag-fg);
}

.mag-result__prev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--mag-muted);
}
.mag-result__prev .mag-ico { color: var(--mag-success); }

/* ── Verbal Memory ─────────────────────────────────────────────────── */

.mag-verbal {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.mag-verbal__hint { margin: 0; font-size: 13px; color: var(--mag-muted); }

.mag-verbal__word {
    width: 100%;
    padding: 30px 16px;
    border-radius: 16px;
    background: var(--mag-soft);
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.15;
    word-break: break-word;
    transition: box-shadow .14s, background-color .14s;
}

.mag-verbal__word.is-in { animation: mag-word-in .22s cubic-bezier(.22,1,.36,1); }
.mag-verbal__word.is-hit  { box-shadow: inset 0 0 0 3px var(--mag-success); }
.mag-verbal__word.is-miss { box-shadow: inset 0 0 0 3px var(--mag-danger); }

@keyframes mag-word-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.mag-verbal__buttons { display: flex; gap: 10px; width: 100%; }

/* ── Aim Trainer ───────────────────────────────────────────────────── */

.mag-aim {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 16px;
    background: var(--mag-soft);
    overflow: hidden;
    cursor: crosshair;
    touch-action: manipulation;
}

.mag-aim__target {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background:
        radial-gradient(circle at 50% 50%,
            var(--mag-danger) 0 26%,
            #fff 26% 44%,
            var(--mag-danger) 44% 68%,
            #fff 68% 82%,
            var(--mag-danger) 82% 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,.16);
    transition: transform .07s;
}

.mag-aim__target:active { transform: scale(.9); }
.mag-aim__target.is-pop { animation: mag-pop .16s cubic-bezier(.22,1,.36,1); }

@keyframes mag-pop {
    from { transform: scale(.4); opacity: .4; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Screen transitions ────────────────────────────────────────────────
   Each screen fades up as it mounts. Short and eased rather than bouncy,
   because two of these games are timed and a slow animation would sit
   between the player and the clock. */

.mag-stage > * { animation: mag-fade-up .26s cubic-bezier(.22,1,.36,1) both; }
.mag-shell.is-result .mag-panel { animation-delay: .02s; }
.mag-shell.is-result .mag-cta   { animation-delay: .1s; }

@keyframes mag-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* The score counts in rather than snapping, which reads as a reveal. */
.mag-result__value { animation: mag-score-in .42s cubic-bezier(.22,1,.36,1) both; }

@keyframes mag-score-in {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: none; }
}

/* Cards stagger in on the hub so the grid does not appear all at once. */
.mag-grid .mag-card { animation: mag-fade-up .34s cubic-bezier(.22,1,.36,1) both; }
.mag-grid .mag-card:nth-child(1) { animation-delay: .02s; }
.mag-grid .mag-card:nth-child(2) { animation-delay: .06s; }
.mag-grid .mag-card:nth-child(3) { animation-delay: .1s; }
.mag-grid .mag-card:nth-child(4) { animation-delay: .14s; }
.mag-grid .mag-card:nth-child(5) { animation-delay: .18s; }
.mag-grid .mag-card:nth-child(6) { animation-delay: .22s; }
.mag-grid .mag-card:nth-child(7) { animation-delay: .26s; }
.mag-grid .mag-card:nth-child(8) { animation-delay: .3s; }
.mag-grid .mag-card:nth-child(9) { animation-delay: .34s; }

/* FAQ opens smoothly instead of snapping. */
.mag-faq[open] > p { animation: mag-fade-up .2s ease both; }

/* ══════════════════════════════════════════════════════════════════════
   5. Responsive
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet and below. */
@media (max-width: 900px) {
    .mag-grid-board--chimp { max-width: 100%; }
    .magp-wrap--wide { max-width: 100%; }
}

/* Phones. Every interactive element stays at or above the 44px touch target
   Apple and WCAG both recommend, which is why buttons grow here rather than
   shrink. */
@media (max-width: 640px) {
    .mag-stage { padding: 16px 12px 20px; min-height: 340px; gap: 14px; }
    .mag-shell__head { padding: 12px 16px; }
    .mag-shell__measures { display: none; }

    .mag-hud { font-size: 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }

    .mag-btn { padding: 12px 18px; min-height: 44px; }
    .mag-btn--lg { width: 100%; max-width: 280px; }
    .mag-result__actions { width: 100%; }
    .mag-result__actions .mag-btn { flex: 1 1 auto; min-width: 0; }

    .mag-panel { max-width: 100%; }
    .mag-prev__item { padding: 7px 12px; min-width: 72px; flex: 1; }

    /* Boards: keep squares tappable and the whole grid on screen. */
    .mag-grid-board { gap: 6px; }
    .mag-grid-board--chimp { gap: 3px; }
    .mag-grid-board--seq { gap: 9px; max-width: 300px; }
    .mag-tile { border-radius: 8px; }
    .mag-tile--num { font-size: 0.8rem; border-width: 1.5px; }
    .mag-tile--seq { border-radius: 11px; }

    .mag-rt { min-height: 260px; }
    .mag-nm__input { height: 52px; font-size: 1.3rem; }

    .mag-stroop__word { padding: 20px 10px; }
    .mag-stroop__buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; }
    .mag-btn--choice { padding: 12px 6px; font-size: 13px; }

    .mag-verbal { gap: 16px; }
    .mag-verbal__word { padding: 24px 12px; }
    .mag-verbal__buttons { gap: 8px; }

    .mag-aim { height: 320px; }
    .mag-aim__target { width: 62px; height: 62px; }

    .mag-typing__text { font-size: 15px; line-height: 1.8; padding: 14px 16px; }
    .mag-typing__input { font-size: 16px; }  /* 16px stops iOS zooming on focus */

    .mag-article { font-size: 16px; margin-top: 32px; }
    .mag-article section { margin-bottom: 32px; }
    .mag-article h2 { font-size: 1.2rem; }
    .mag-answer { padding: 18px 16px; }
    .mag-table { font-size: 13.5px; min-width: 340px; }
    .mag-table thead th, .mag-table tbody th, .mag-table tbody td { padding: 10px; }
    .mag-faq > summary { padding: 14px 40px 14px 15px; font-size: 14.5px; }
    .mag-faq > p { padding: 0 15px 15px; font-size: 15px; }
    .mag-crumbs { font-size: 12px; margin: 16px 0 14px; }

    .magp-wrap { padding: 0 16px; }
    .magp-nav__inner { padding: 11px 16px; }
    .magp-nav__links { gap: 13px; }
    .magp-nav__links a { font-size: 13px; }
    .magp-hero { padding: 30px 0 24px; }
    .magp-head__intro { font-size: 15px; }
    .magp-facts { gap: 6px; }
    .magp-facts li { font-size: 11.5px; padding: 4px 10px; }
    .magp-cta { padding: 30px 18px; border-radius: 18px; margin-bottom: 48px; }
    .magp-others { margin-bottom: 48px; }
}

/* Very narrow phones. */
@media (max-width: 380px) {
    .mag-stroop__buttons { grid-template-columns: repeat(2, 1fr); }
    .mag-verbal__buttons { flex-direction: column; }
    .mag-result__actions { flex-direction: column; }
    .mag-result__actions .mag-btn { width: 100%; }
    .magp-nav__links a:not(.magp-nav__cta) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mag-game *, .mag-scope *, .magp * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
    }
    .mag-btn:hover { transform: none; }
    .mag-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   6. Theme-proofing + visual design pass
   ══════════════════════════════════════════════════════════════════════ */

/* ── Theme-proofing ────────────────────────────────────────────────────
   This widget lands in whatever theme the site runs. Elementor kits and
   most themes style bare `button` elements with their own accent colour at
   a specificity that beats a single class, which is why the buttons were
   rendering as thin outlines instead of the intended solid fills. Anchoring
   to the scope class and forcing only the four properties that define a
   button's identity fixes it without a blanket !important on everything.
   Links were never affected, which is why the CTA always looked right. */

.mag-game .mag-btn,
.mag-scope .mag-btn,
.magp .mag-btn {
    background-image: none !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: -0.005em !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.mag-game .mag-btn.mag-btn--primary,
.mag-scope .mag-btn.mag-btn--primary,
.magp .mag-btn.mag-btn--primary {
    background: linear-gradient(135deg, var(--mag-primary), var(--ma-primary-glow, #7b74ec)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.mag-game .mag-btn.mag-btn--primary:hover,
.mag-scope .mag-btn.mag-btn--primary:hover,
.magp .mag-btn.mag-btn--primary:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 18px rgba(79, 70, 229, .34) !important;
}

.mag-game .mag-btn.mag-btn--cta,
.mag-scope .mag-btn.mag-btn--cta,
.magp .mag-btn.mag-btn--cta {
    background: linear-gradient(135deg, var(--mag-cta), var(--mag-cta-hover)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.mag-game .mag-btn.mag-btn--ghost,
.mag-scope .mag-btn.mag-btn--ghost,
.magp .mag-btn.mag-btn--ghost {
    background: var(--mag-bg) !important;
    border-color: var(--mag-border) !important;
    color: var(--mag-fg) !important;
}
.mag-game .mag-btn.mag-btn--ghost:hover,
.mag-scope .mag-btn.mag-btn--ghost:hover,
.magp .mag-btn.mag-btn--ghost:hover {
    border-color: var(--mag-primary) !important;
    color: var(--mag-primary) !important;
    background: var(--mag-bg) !important;
}
.mag-game .mag-btn.mag-btn--ghost.is-done,
.mag-scope .mag-btn.mag-btn--ghost.is-done { border-color: var(--mag-success) !important; color: var(--mag-success) !important; }

/* Answer buttons carry real weight in Verbal Memory and Stroop, so they get
   a filled surface rather than an outline. */
.mag-game .mag-btn.mag-btn--choice,
.mag-scope .mag-btn.mag-btn--choice,
.magp .mag-btn.mag-btn--choice {
    background: var(--mag-bg) !important;
    border: 1.5px solid var(--mag-border) !important;
    color: var(--mag-fg) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(26, 29, 46, .06);
}
.mag-game .mag-btn.mag-btn--choice:hover,
.mag-scope .mag-btn.mag-btn--choice:hover,
.magp .mag-btn.mag-btn--choice:hover {
    border-color: var(--mag-primary) !important;
    color: var(--mag-primary) !important;
    background: var(--ma-accent, #dcdafb) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .16);
}
.mag-game .mag-btn.mag-btn--choice:active,
.mag-scope .mag-btn.mag-btn--choice:active { transform: scale(.97); }

/* ── Depth on the play surface ─────────────────────────────────────────
   A flat white card reads as a form. A recessed, slightly tinted stage
   reads as a place where something happens, which is the whole difference
   between "test" and "game" visually. */

.mag-shell {
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(26, 29, 46, .04), 0 8px 30px rgba(26, 29, 46, .06);
}

.mag-stage {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(79, 70, 229, .05), transparent 60%),
        var(--mag-bg);
}

/* HUD becomes chips rather than loose text. */
.mag-hud > span {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--mag-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Tiles ─────────────────────────────────────────────────────────────
   Lit tiles get a gradient, a glow and a slight lift so the flash reads as
   an event rather than a colour swap. This is the single biggest thing
   separating these boards from a spreadsheet. */

.mag-tile {
    box-shadow: inset 0 -2px 0 rgba(26, 29, 46, .05);
    transition: background-color .12s, transform .1s cubic-bezier(.22,1,.36,1),
                box-shadow .14s, color .12s;
}

.mag-tile:not(:disabled):hover { transform: translateY(-1px); }
.mag-tile:not(:disabled):active { transform: scale(.95); }

.mag-tile.is-lit,
.mag-tile.is-correct {
    background: linear-gradient(145deg, var(--ma-primary-glow, #7b74ec), var(--mag-primary));
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .18), 0 6px 16px rgba(79, 70, 229, .3);
    transform: scale(1.04);
}

.mag-tile.is-wrong {
    background: linear-gradient(145deg, #f87171, var(--mag-danger));
    box-shadow: 0 0 0 3px rgba(239, 67, 67, .18), 0 6px 16px rgba(239, 67, 67, .28);
    animation: mag-shake .3s;
}

@keyframes mag-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.mag-tile--num {
    box-shadow: 0 2px 5px rgba(26, 29, 46, .1);
    font-weight: 800;
}
.mag-tile--num.is-covered {
    background: linear-gradient(145deg, #2b2f52, var(--mag-fg));
    box-shadow: 0 3px 10px rgba(26, 29, 46, .28);
}

.mag-tile--seq.is-lit { box-shadow: 0 0 0 4px rgba(79, 70, 229, .2), 0 8px 22px rgba(79, 70, 229, .34); }

/* ── Reaction Time ─────────────────────────────────────────────────────
   Full-bleed colour with a soft vignette. The waiting state pulses gently
   so the panel feels live rather than frozen. */

.mag-rt {
    border-radius: 18px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.mag-rt.is-wait  { background: linear-gradient(160deg, #3b82f6, #2563eb); animation: mag-breathe 2.4s ease-in-out infinite; }
.mag-rt.is-go    { background: linear-gradient(160deg, #22c55e, #16a34a); }
.mag-rt.is-early { background: linear-gradient(160deg, #f87171, var(--mag-danger)); }
.mag-rt.is-result,
.mag-rt.is-done  { background: linear-gradient(160deg, #262b52, var(--ma-surface-dark, #161b3b)); }

@keyframes mag-breathe {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.09); }
}

.mag-rt__big { font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: -0.03em; }

/* ── Number Memory ─────────────────────────────────────────────────────
   The digits are the entire game, so they get the full treatment. */

.mag-nm__digits {
    background: linear-gradient(135deg, var(--mag-fg), var(--mag-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

/* ── Verbal Memory ─────────────────────────────────────────────────────
   The word card was a grey box. Giving it a tinted gradient and a real
   shadow makes the word the subject of the screen. */

.mag-verbal__word {
    background: linear-gradient(150deg, var(--ma-accent, #dcdafb), var(--mag-soft));
    box-shadow: 0 2px 4px rgba(26, 29, 46, .05), 0 10px 30px rgba(79, 70, 229, .1);
    color: var(--mag-fg);
    letter-spacing: .02em;
}
.mag-verbal__word.is-hit  { box-shadow: inset 0 0 0 3px var(--mag-success), 0 10px 30px rgba(12, 141, 98, .18); }
.mag-verbal__word.is-miss { box-shadow: inset 0 0 0 3px var(--mag-danger),  0 10px 30px rgba(239, 67, 67, .18); }

/* ── Aim Trainer ───────────────────────────────────────────────────────
   Recessed arena, glowing target. */

.mag-aim {
    background:
        radial-gradient(100% 100% at 50% 0%, rgba(79, 70, 229, .07), transparent 70%),
        var(--mag-soft);
    box-shadow: inset 0 2px 10px rgba(26, 29, 46, .07);
}

.mag-aim__target {
    box-shadow: 0 0 0 4px rgba(239, 67, 67, .14), 0 4px 16px rgba(239, 67, 67, .32);
}
.mag-aim__target:hover { box-shadow: 0 0 0 6px rgba(239, 67, 67, .18), 0 6px 20px rgba(239, 67, 67, .4); }

/* ── Stroop ────────────────────────────────────────────────────────────
   The word needs to dominate. Larger, heavier, on a recessed panel so the
   ink colour is the only thing competing for attention. */

.mag-stroop__word {
    background:
        radial-gradient(90% 90% at 50% 50%, rgba(255, 255, 255, .9), transparent),
        var(--mag-soft);
    box-shadow: inset 0 2px 8px rgba(26, 29, 46, .06);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

/* ── Result screen ─────────────────────────────────────────────────────
   The score is the payoff, so it gets the gradient treatment too. */

.mag-result__value {
    background: linear-gradient(135deg, var(--mag-fg), var(--mag-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mag-rank__bar { box-shadow: inset 0 1px 3px rgba(26, 29, 46, .09); }
.mag-rank__fill { box-shadow: 0 0 12px rgba(79, 70, 229, .45); }

.mag-rank__verdict {
    background: linear-gradient(135deg, var(--ma-accent, #dcdafb), #eae8fd);
    box-shadow: 0 1px 3px rgba(79, 70, 229, .14);
}

.mag-compare { box-shadow: inset 0 1px 3px rgba(26, 29, 46, .05); }

/* Cards on the hub get a coloured top edge on hover so the grid feels
   interactive rather than static. */
.mag-card { overflow: hidden; }
.mag-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mag-primary), var(--ma-primary-glow, #7b74ec));
    opacity: 0;
    transition: opacity .18s;
}
.mag-card:hover::before { opacity: 1; }

/* =====================================================================
   FEATURE CARD GRID — [brain_games layout="feature"]

   Matches the site's assessment section: centred eyebrow + heading, then
   white cards with a tinted icon tile, a duration pill, a category chip and
   a footer pairing "what it measures" against the CTA.

   Separate from .mag-grid/.mag-card, which /games/ uses and which is
   untouched. The icon tile deliberately reuses .mag-card__icon so the
   existing .mag-accent-* rules colour it with no duplication.
   ===================================================================== */

.mag-feature {
    /* Inter to match the rest of the site; --mag-font already resolves to it. */
    font-family: var(--mag-font);
    /* 1100px content width, matching the site's other sections. */
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Centred section header ─────────────────────────────────────────── */
.mag-feature__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}
/* Inter 600 / 12px / 12px line-height, taken from the live section. */
.mag-feature__eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(79, 70, 229, .10);
    color: var(--mag-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* Inter 700 / 36px / 36px line-height / rgb(29,33,58), matching the site's
   other section headings exactly rather than approximating with a clamp. */
.mag-feature__title {
    margin: 0;
    font-size: 36px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d213a;
}
.mag-feature__sub {
    margin: 18px auto 0;
    max-width: 640px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--mag-muted);
}

/* ── Grid ───────────────────────────────────────────────────────────── */
/* Explicit column counts, NOT auto-fit. auto-fit reflows on available width,
   which is what dropped the fourth card onto its own row and left a gap. A
   fixed repeat(N, 1fr) keeps every card on one line at the requested count and
   makes them all equal width; align-items:stretch equalises the heights. */
.mag-fgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}
.mag-fgrid[data-cols="1"] { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.mag-fgrid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.mag-fgrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.mag-fgrid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* ── Card ───────────────────────────────────────────────────────────── */
.mag-fcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    border-radius: 20px;
    border: 1px solid rgba(29, 32, 57, .06);
    background: #fff;
    text-decoration: none;
    color: inherit;
    /* Two-layer shadow: a tight one for the edge, a wide soft one for lift.
       Matches the reference cards, which sit on a tinted page rather than white. */
    box-shadow: 0 1px 2px rgba(29, 32, 57, .04), 0 8px 24px rgba(29, 32, 57, .05);
    transition: box-shadow .2s, transform .16s, border-color .2s;
}
.mag-fcard:hover {
    transform: translateY(-4px);
    border-color: rgba(29, 32, 57, .10);
    box-shadow: 0 2px 4px rgba(29, 32, 57, .05), 0 16px 40px rgba(29, 32, 57, .10);
}
.mag-fcard:focus-visible {
    outline: 2px solid var(--mag-primary);
    outline-offset: 3px;
}

/* ── Top row: icon tile + duration pill ─────────────────────────────── */
.mag-fcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}
/* .mag-card__icon reused verbatim so .mag-accent-* keeps colouring it. */
.mag-fcard .mag-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
}
.mag-fcard__time {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mag-muted);
    background: var(--mag-soft);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
    line-height: 1;
}

/* ── Body ───────────────────────────────────────────────────────────── */
.mag-fcard__name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--mag-fg);
}
/* The differentiator, directly under the name and in the card's accent so the
   eye lands on it before the description. */
.mag-fcard__measures {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--mag-accent, var(--mag-primary));
}
.mag-fcard__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mag-muted);
}

.mag-fcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}
.mag-fcard__tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mag-accent, var(--mag-primary));
    background: var(--mag-accent-soft, rgba(79, 70, 229, .09));
    border-radius: 7px;
    padding: 6px 10px;
    line-height: 1;
}
/* The play count is data, not a label, so it stays neutral rather than
   competing with the category chip for the accent colour. */
.mag-fcard__tag--plain {
    color: var(--mag-muted);
    background: var(--mag-soft);
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 600;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.mag-fcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* auto pins the footer down so the CTA line is level across a row
       however long each tagline runs. */
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(29, 32, 57, .07);
    /* The border needs to clear the card padding to read as a full-width rule. */
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
}
.mag-fcard__foot { margin-bottom: 0; }
/* Holds the category now, which is 5-9 characters, so it always fits on one
   line beside the CTA at every supported card width. */
.mag-fcard__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mag-muted);
    background: var(--mag-soft);
    border-radius: 7px;
    padding: 6px 10px;
    line-height: 1.2;
    white-space: nowrap;
}
.mag-fcard__go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mag-fg);
    white-space: nowrap;
    flex-shrink: 0;
}
.mag-fcard__go svg { transition: transform .18s; }
.mag-fcard:hover .mag-fcard__go { color: var(--mag-accent, var(--mag-primary)); }
.mag-fcard:hover .mag-fcard__go svg { transform: translateX(4px); }

/* ── "See all games" under the grid ─────────────────────────────────── */
.mag-feature__more { text-align: center; margin-top: 36px; }
.mag-feature__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1.5px solid rgba(29, 32, 57, .12);
    background: #fff;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--mag-fg);
    text-decoration: none;
    transition: border-color .18s, color .18s, box-shadow .18s;
}
.mag-feature__all:hover {
    border-color: var(--mag-primary);
    color: var(--mag-primary);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .12);
}
.mag-feature__all svg { transition: transform .18s; }
.mag-feature__all:hover svg { transform: translateX(4px); }

/* ── Accent tokens ──────────────────────────────────────────────────────
   The stock .mag-accent-* rules set `color` on .mag-card__icon only, so
   currentColor on the card would resolve to inherited body colour. Each
   accent therefore also publishes --mag-accent (chip text, hover CTA) and
   --mag-accent-soft (chip background). Values match the icon colours. */
.mag-accent-indigo.mag-fcard { --mag-accent: #4f46e5; --mag-accent-soft: rgba(79, 70, 229, .10); }
.mag-accent-green.mag-fcard  { --mag-accent: #059669; --mag-accent-soft: rgba(5, 150, 105, .11); }
.mag-accent-blue.mag-fcard   { --mag-accent: #2563eb; --mag-accent-soft: rgba(37, 99, 235, .10); }
.mag-accent-amber.mag-fcard  { --mag-accent: #b45309; --mag-accent-soft: rgba(217, 119, 6, .13); }
.mag-accent-rose.mag-fcard   { --mag-accent: #e11d48; --mag-accent-soft: rgba(225, 29, 72, .10); }
.mag-accent-violet.mag-fcard { --mag-accent: #7c3aed; --mag-accent-soft: rgba(124, 58, 237, .10); }
.mag-accent-teal.mag-fcard   { --mag-accent: #0d9488; --mag-accent-soft: rgba(13, 148, 136, .11); }

/* Four across needs ~1000px to stay readable; below that it steps down rather
   than squeezing the cards, and the footer would otherwise be unusable. */
@media (max-width: 1040px) {
    .mag-fgrid[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
    .mag-feature { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 820px) {
    .mag-fgrid,
    .mag-fgrid[data-cols="3"],
    .mag-fgrid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
    .mag-feature { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
    .mag-fgrid,
    .mag-fgrid[data-cols="2"],
    .mag-fgrid[data-cols="3"],
    .mag-fgrid[data-cols="4"] { grid-template-columns: 1fr; gap: 14px; }

    /* The section supplies its own gutters: dropped into a full-bleed
       homepage row the cards would otherwise sit flush against the screen. */
    .mag-feature { padding-left: 16px; padding-right: 16px; }

    /* 25px on mobile, per the spec. line-height scales with it rather than
       staying pinned at the desktop 36px, which would look loose at this size. */
    .mag-feature__title { font-size: 25px; line-height: 1.15; }
    .mag-feature__sub   { font-size: 15.5px; margin-top: 14px; }
    .mag-feature__eyebrow { margin-bottom: 16px; }
    .mag-feature__head  { margin-bottom: 28px; }

    .mag-fcard { padding: 22px 20px 18px; }
    .mag-fcard__foot {
        margin-left: -20px; margin-right: -20px;
        padding-left: 20px; padding-right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mag-fcard, .mag-fcard__go svg, .mag-feature__all, .mag-feature__all svg { transition: none; }
    .mag-fcard:hover { transform: none; }
}