.brain-train-page { --brain-train-line: var(--color-base-300); --brain-train-soft: var(--color-base-200); --brain-train-ink: var(--color-base-content); }
body.brain-train-playing > nav[aria-label="Primary navigation"] { display: none; }
.brain-train-page.is-playing .brain-train__content { max-width: 100rem; padding-top: clamp(1rem, 2vw, 2rem); padding-bottom: clamp(2rem, 4vw, 4rem); }
.brain-train__hero-card { position: relative; overflow: hidden; min-height: 18rem; border-radius: var(--radius-box); padding: 2rem; background: radial-gradient(circle at 90% 8%, color-mix(in oklab, var(--color-secondary) 35%, transparent) 0 18%, transparent 19%), radial-gradient(circle at 10% 90%, color-mix(in oklab, var(--color-accent) 28%, transparent) 0 22%, transparent 23%), var(--color-neutral); box-shadow: 0 1rem 2.5rem color-mix(in oklab, var(--color-neutral) 20%, transparent); }
.brain-train__hero-tile, .brain-train__workout-card-mark, .brain-train__mode-mark, .brain-train__transition-mark { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; }
.brain-train__hero-tile { width: 3.6rem; height: 3.6rem; border-radius: .85rem; font-size: 1.75rem; box-shadow: 0 .55rem 1rem color-mix(in oklab, var(--color-neutral) 24%, transparent); }
.brain-train__hero-tile:nth-child(1) { transform: rotate(-7deg); } .brain-train__hero-tile:nth-child(2) { transform: translateY(-.35rem) rotate(5deg); } .brain-train__hero-tile:nth-child(3) { transform: rotate(-3deg); }
.brain-train__hero-tile--primary { background: var(--color-primary); color: var(--color-primary-content); } .brain-train__hero-tile--secondary { background: var(--color-secondary); color: var(--color-secondary-content); } .brain-train__hero-tile--accent { background: var(--color-accent); color: var(--color-accent-content); }
.brain-train__workout-card { display: block; min-height: 18rem; border: 1px solid color-mix(in oklab, var(--color-primary) 35%, var(--brain-train-line)); border-radius: var(--radius-box); padding: 1.75rem; background: linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 13%, var(--color-base-100)), var(--color-base-100)); color: var(--brain-train-ink); box-shadow: 0 .5rem 1.5rem color-mix(in oklab, var(--color-neutral) 8%, transparent); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.brain-train__workout-card:hover { border-color: var(--color-primary); box-shadow: 0 1rem 2rem color-mix(in oklab, var(--color-primary) 16%, transparent); transform: translateY(-.15rem); }
.brain-train__workout-card:focus-visible, .brain-train__mode-button:focus-visible, .brain-train__answer-button:focus-visible, .brain-train__memory-choice:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.brain-train__workout-card-mark { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--color-primary); color: var(--color-primary-content); font-size: 1.75rem; }
.brain-train__mode-button { display: flex; width: 100%; align-items: center; gap: .75rem; border: 1px solid var(--brain-train-line); border-radius: var(--radius-field); padding: .85rem; background: var(--color-base-100); color: var(--brain-train-ink); text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.brain-train__mode-button:hover { border-color: var(--color-neutral); background: var(--brain-train-soft); transform: translateX(.1rem); }
.brain-train__mode-mark { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border-radius: .75rem; font-size: 1.35rem; }
.brain-train__mode-mark--primary { background: color-mix(in oklab, var(--color-primary) 18%, transparent); color: color-mix(in oklab, var(--color-primary) 32%, var(--brain-train-ink)); } .brain-train__mode-mark--secondary { background: color-mix(in oklab, var(--color-secondary) 18%, transparent); color: color-mix(in oklab, var(--color-secondary) 32%, var(--brain-train-ink)); } .brain-train__mode-mark--accent { background: color-mix(in oklab, var(--color-accent) 30%, transparent); color: color-mix(in oklab, var(--color-accent) 45%, var(--brain-train-ink)); }
.brain-train__game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--brain-train-line); padding-bottom: 1rem; }
.brain-train__timer { min-width: 3.8rem; border: 1px solid var(--brain-train-line); border-radius: 999px; padding: .42rem .75rem; background: var(--color-base-100); font-size: .8rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; } .brain-train__timer.is-low { border-color: color-mix(in oklab, var(--color-error) 50%, var(--brain-train-line)); color: var(--color-error); }
.brain-train__progress { height: .35rem; margin-top: 1.25rem; overflow: hidden; border-radius: 999px; background: var(--brain-train-soft); } .brain-train__progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width 120ms linear; }
.brain-train__stage { position: relative; min-height: clamp(30rem, 62vh, 42rem); margin-top: 1.5rem; border: 1px solid var(--brain-train-line); border-radius: var(--radius-box); padding: clamp(1.5rem, 5vw, 4rem); background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)), var(--color-base-100) 12rem); color: var(--brain-train-ink); box-shadow: 0 1rem 2.5rem color-mix(in oklab, var(--color-neutral) 10%, transparent); }
.brain-train__stage:focus { outline: none; } .brain-train__stage:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.brain-train__prompt { max-width: 52rem; margin: 0 auto; text-align: center; } .brain-train__challenge-title { margin-top: .45rem; font-size: clamp(1.65rem, 4vw, 2.6rem); font-weight: 900; line-height: 1.15; }
.brain-train__memory-display, .brain-train__answer-slots, .brain-train__number-sequence { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(.5rem, 2vw, 1rem); }
.brain-train__memory-display { margin: clamp(2.5rem, 6vw, 4rem) auto 0; } .brain-train__memory-tile { display: flex; min-width: clamp(5.25rem, 9vw, 7rem); min-height: clamp(5.25rem, 9vw, 7rem); flex-direction: column; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--brain-train-line); border-radius: 1.25rem; background: var(--color-base-100); box-shadow: 0 .4rem 1rem color-mix(in oklab, var(--color-neutral) 9%, transparent); color: var(--color-primary); } .brain-train__memory-tile > span { font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1; } .brain-train__memory-tile small { color: var(--brain-train-ink); font-size: .8rem; font-weight: 700; text-transform: capitalize; }
.brain-train__memory-recall { max-width: 44rem; margin: 2.5rem auto 0; } .brain-train__answer-tray { border-radius: var(--radius-field); padding: 1rem; background: var(--brain-train-soft); text-align: center; } .brain-train__answer-slots { margin-top: .75rem; }
.brain-train__answer-slot { display: inline-flex; width: 4.5rem; height: 4.5rem; align-items: center; justify-content: center; border: 1px dashed color-mix(in oklab, var(--brain-train-ink) 30%, transparent); border-radius: 1rem; color: color-mix(in oklab, var(--brain-train-ink) 45%, transparent); font-weight: 800; } .brain-train__answer-slot.is-filled { border-style: solid; border-color: var(--color-primary); background: var(--color-base-100); color: var(--color-primary); font-size: 2.25rem; }
.brain-train__choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; max-width: 56rem; margin: 2rem auto 0; } .brain-train__answer-button, .brain-train__memory-choice { display: flex; min-height: 4.5rem; align-items: center; justify-content: center; gap: .65rem; border: 1px solid var(--brain-train-line); border-radius: var(--radius-field); padding: .9rem 1.1rem; background: var(--color-base-100); color: var(--brain-train-ink); font-size: 1.05rem; font-weight: 750; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; } .brain-train__answer-button:hover:not(:disabled), .brain-train__memory-choice:hover:not(:disabled) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 9%, var(--color-base-100)); transform: translateY(-.1rem); } .brain-train__answer-button:disabled, .brain-train__memory-choice:disabled { cursor: default; opacity: .55; } .brain-train__memory-choice > span:first-child { color: var(--color-primary); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; } .brain-train__choice-grid--pattern { max-width: 48rem; } .brain-train__answer-button--number { font-size: 1.6rem; }
.brain-train__pattern-board { display: grid; grid-template-columns: repeat(var(--grid-size), minmax(3.25rem, 6rem)); gap: .75rem; justify-content: center; margin: 3rem auto 0; } .brain-train__pattern-cell { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--brain-train-line); border-radius: .85rem; background: var(--color-base-100); } .brain-train__pattern-cell span { width: 48%; height: 48%; border-radius: .5rem; background: var(--color-secondary); opacity: 0; } .brain-train__pattern-cell.is-filled span { opacity: 1; }
.brain-train__number-sequence { margin: 4rem auto 0; font-size: clamp(2.2rem, 7vw, 4.25rem); font-weight: 900; font-variant-numeric: tabular-nums; } .brain-train__number-sequence span { min-width: 3rem; text-align: center; } .brain-train__number-sequence b { color: var(--color-accent); } .brain-train__number-sequence .is-answer { border-bottom: .25rem solid var(--color-accent); color: color-mix(in oklab, var(--color-accent) 45%, var(--brain-train-ink)); }
.brain-train__pause-notice { margin: 1rem auto 0; max-width: 28rem; border: 1px solid color-mix(in oklab, var(--color-accent) 50%, var(--brain-train-line)); border-radius: var(--radius-field); padding: .9rem 1rem; background: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)); text-align: center; } .brain-train__feedback { min-height: 1.75rem; margin: 1rem auto 0; text-align: center; font-size: .9rem; font-weight: 750; } .brain-train__feedback[data-state="correct"] { color: var(--color-success); } .brain-train__feedback[data-state="incorrect"] { color: var(--color-error); }
.brain-train__transition { display: flex; min-height: 22rem; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .brain-train__transition-mark { width: 4rem; height: 4rem; margin-bottom: 1.5rem; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-content); font-size: 2rem; }
.brain-train__results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; margin-right: auto; margin-left: auto; } .brain-train__result-card { display: flex; min-height: 9rem; flex-direction: column; justify-content: space-between; border: 1px solid var(--brain-train-line); border-radius: var(--radius-box); padding: 1.25rem; background: var(--color-base-100); box-shadow: 0 .4rem 1rem color-mix(in oklab, var(--color-neutral) 7%, transparent); } .brain-train__result-card strong { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; } .brain-train__result-card strong small { font-size: 1rem; font-weight: 700; } .brain-train__result-card > small { color: color-mix(in oklab, var(--brain-train-ink) 60%, transparent); font-size: .78rem; } .brain-train__result-card--featured { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); } .brain-train__result-card--featured strong { color: color-mix(in oklab, var(--color-primary) 35%, var(--brain-train-ink)); }
@media (max-width: 640px) { .brain-train__hero-card { min-height: 15rem; padding: 1.5rem; } .brain-train__stage { min-height: 27rem; padding: 1.25rem; } .brain-train__game-topbar { align-items: flex-start; } .brain-train__game-topbar > div:last-child { flex-wrap: wrap; justify-content: flex-end; } .brain-train__results-grid { grid-template-columns: 1fr; } .brain-train__result-card { min-height: 7rem; } .brain-train__memory-tile { min-width: 4.75rem; min-height: 4.75rem; } .brain-train__memory-tile > span { font-size: 2.5rem; } .brain-train__answer-slot { width: 3.75rem; height: 3.75rem; } .brain-train__pattern-board { grid-template-columns: repeat(var(--grid-size), minmax(2.75rem, 4rem)); gap: .5rem; margin-top: 2.5rem; } .brain-train__number-sequence { margin-top: 3rem; font-size: clamp(2rem, 12vw, 3.2rem); } }
@media (prefers-reduced-motion: reduce) { .brain-train__workout-card, .brain-train__mode-button, .brain-train__answer-button, .brain-train__memory-choice, .brain-train__progress span { transition: none; } }