/*
 * Base layout & components. Reads tokens.css only — no raw colors here.
 *
 * Layout intent (brand doc §4): the math expression is the focal point with
 * massive block padding; answers are a vertical 1-column/4-row stack of large
 * tactile targets; the top bar stays minimal so it never competes with play.
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

body {
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-4);
    padding:         var(--space-4);

    background: var(--bg-canvas);
    color:      var(--text-primary);
    font-family: var(--font-ui);

    /* Theme + canvas paint changes are cheap; keep text crisp. */
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* The particle layer sits behind everything and never intercepts taps. */
#fx {
    position:       fixed;
    inset:         0;
    width:         100%;
    height:        100%;
    z-index:       0;
    pointer-events: none;
}

/* All real UI floats above the canvas. */
header,
main,
.controls,
#status {
    position: relative;
    z-index:  1;
}

/* --- Header: wordmark + stats + theme toggle --- */

header {
    width:          min(40rem, 100%);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-3);
}

/* The wordmark is centered on the page; the theme/mute actions float to the
   right without pulling the logo off-center. */
.topbar {
    position:        relative;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-3);
}

.topbar-actions {
    position:  absolute;
    right:     0;
    top:       50%;
    transform: translateY(-50%);
    display:   flex;
    gap:       var(--space-1);
}

.game-logo {
    margin:         0;
    display:        inline-flex;
    align-items:    baseline;
    gap:            0.3rem;
    font-family:    var(--font-display);
    font-size:      clamp(1.5rem, 5vw, 2.2rem);
    font-weight:    700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.logo-primary,
.logo-accent {
    color: var(--text-primary);
}

/* "DASH" is set in italic for a bit of forward motion in the wordmark. */
.logo-accent {
    font-style: italic;
}

/* The interactive operator carries the streak/brand color (states in animations.css).
   A STATIC chromatic-aberration "glitch" (theme-driven, no animation) rides along with
   the idle spin / flash / shatter transforms without affecting them. text-transform stays
   lowercase so the parent's uppercase wordmark doesn't turn the "x" into an "X". */
.logo-operator {
    display:        inline-block;
    color:          var(--text-streak);
    font-size:      0.8em;
    font-weight:    500;
    opacity:        0.9;
    text-transform: lowercase;
    text-shadow:    -3px 0 0 var(--color-error), 3px 0 0 var(--color-success);
    transform-origin: center;
}

/* Stats: tabular, quiet, grouped. */
.stats {
    display:              flex;
    gap:                  var(--space-4);
    flex-wrap:            wrap;
    justify-content:      center;
    font-variant-numeric: tabular-nums;
}

.stat {
    text-align: center;
}

.stat .label {
    display:        block;
    font-size:      0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

.stat .value {
    font-size:   1.4rem;
    font-weight: 700;
}

/* Records (Player Lv, bests) stay hidden during a run so the live bar is focused
   on the current attempt; they reveal on the game-over screen. */
body:not([data-status="ended"]) .stat--record {
    display: none;
}

/* --- Main: the focal expression + the answer stack --- */

main {
    width:          min(28rem, 100%);
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

#expression {
    /* Massive breathing room: this is the thing you look at. */
    padding:              var(--space-6) var(--space-4);
    font-size:            clamp(2.75rem, 11vw, 4.5rem);
    font-weight:          800;
    font-variant-numeric: tabular-nums;
    letter-spacing:       0.01em;
    line-height:          1;
    min-height:           1.2em;
    text-align:           center;
}

#answers {
    /* Vertical 1-column / 4-row stack of large tactile targets. */
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-2);
    width:                 100%;
}

.answer {
    font:                 inherit;
    font-size:            1.6rem;
    font-weight:          700;
    font-variant-numeric: tabular-nums;
    padding:              1.1rem 0.75rem;

    border:        2px solid var(--surface-border);
    border-radius: var(--radius-md);
    background:    var(--surface);
    color:         inherit;
    cursor:        pointer;

    transition: transform 0.08s ease,
                background-color 0.15s ease,
                border-color 0.15s ease;
}

.answer:hover:not(:disabled) {
    border-color: var(--text-streak);
}

/* Tactile press depth. */
.answer:active:not(:disabled) {
    transform: translateY(2px) scale(0.99);
}

.answer:focus-visible {
    outline:        3px solid var(--text-streak);
    outline-offset: 2px;
}

.answer:disabled {
    opacity: 0.4;
    cursor:  default;
}

/* --- Utility buttons (toggles, restart) --- */

.controls {
    display:         flex;
    gap:             var(--space-2);
    flex-wrap:       wrap;
    justify-content: center;
}

button.util {
    font:          inherit;
    font-size:     0.95rem;
    padding:       0.5rem 0.9rem;
    border:        1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background:    var(--surface);
    color:         inherit;
    cursor:        pointer;

    transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.util:hover {
    border-color: var(--text-streak);
}

button.util:focus-visible {
    outline:        3px solid var(--text-streak);
    outline-offset: 2px;
}

/* Icon-only theme/mute toggles in the top bar. */
.icon-toggle {
    min-width:   2.6rem;
    text-align:  center;
    line-height: 1;
}

/* The bottom controls are secondary utilities — quiet text links, not buttons
   that compete with the answer targets. */
.controls button.util {
    border:     none;
    background: transparent;
    color:      var(--text-muted);
    padding:    var(--space-1) var(--space-2);
}

.controls button.util:hover {
    color:           var(--text-primary);
    border-color:    transparent;
    text-decoration: underline;
}

/* --- Game-over screen --- */

/* On game over the play area + secondary controls drop away so a single centered
   panel owns the moment (no in-flow message shoving the layout around). */
body[data-status="ended"] main,
body[data-status="ended"] .controls {
    display: none;
}

#status[hidden] {
    display: none;
}

#status {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    align-items:    center;
    text-align:     center;
    padding:        var(--space-6) var(--space-3);
}

/* The fail headline is a major UI event: big, display type, error color. */
#status-headline {
    margin:         0;
    font-family:    var(--font-display);
    font-size:      clamp(2.5rem, 9vw, 4rem);
    font-weight:    700;
    letter-spacing: 0.01em;
    line-height:    1;
    color:          var(--color-error);
}

#status-msg {
    margin:    0;
    font-size: 1.15rem;
    color:     var(--text-muted);
}

/* One prominent call to action. */
#restart {
    font-size:     1.2rem;
    font-weight:   700;
    padding:       0.9rem 2.25rem;
    border:        none;
    background:    var(--text-streak);
    color:         var(--bg-canvas);
    border-radius: var(--radius-md);
}

#restart:hover {
    border-color: transparent;
    filter:       brightness(1.08);
}

/* "Jump to a level" picker — a wrapping grid of tappable level chips (2..Player Lv). */
#level-picker[hidden] {
    display: none;
}

#level-picker {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
    margin-top:     var(--space-2);
}

.level-picker-label {
    margin:         0;
    font-size:      0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

#level-chips {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--space-1);
    justify-content: center;
    max-width:       min(24rem, 90vw);
    max-height:      8rem;
    overflow-y:      auto;
}

.level-chip {
    font:                 inherit;
    font-size:            1rem;
    font-weight:          700;
    font-variant-numeric: tabular-nums;
    min-width:            2.6rem;
    padding:              0.45rem 0.5rem;

    border:        2px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background:    var(--surface);
    color:         inherit;
    cursor:        pointer;

    transition: transform 0.08s ease, border-color 0.15s ease;
}

.level-chip:hover {
    border-color: var(--text-streak);
}

.level-chip:active {
    transform: translateY(1px) scale(0.97);
}

.level-chip:focus-visible {
    outline:        3px solid var(--text-streak);
    outline-offset: 2px;
}