/* The app's palette, so the page and the phone agree on what the product is. */
:root {
    color-scheme: dark;
    --ink: #08080A;
    --carbon: #15151B;
    --graphite: #2A2A33;
    --smoke: #74747F;
    --chalk: #F2F0E9;
    --volt: #D8FF47;
    --flare: #FF4A1F;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ink);
    color: var(--chalk);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.sim {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 48px;
    display: grid;
    gap: 24px;
}

.masthead h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 6vw, 40px);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.masthead p {
    margin: 0;
    max-width: 46ch;
    color: var(--smoke);
}

.stage-wrap {
    border: 1px solid var(--graphite);
    border-radius: 18px;
    background: var(--ink);
    overflow: hidden;
}

#stage {
    display: block;
    width: 100%;
    height: min(62vh, 520px);
    touch-action: none;
    cursor: grab;
}

#stage:active { cursor: grabbing; }

.readout {
    display: grid;
    gap: 6px;
    min-height: 132px;
}

.trick {
    margin: 0;
    font-size: clamp(20px, 4.5vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.score {
    margin: 0;
    font-size: clamp(44px, 11vw, 68px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Tabular figures, so a climbing score does not jitter sideways. */
    font-variant-numeric: tabular-nums;
    color: var(--volt);
}

.stats, .seal, .hint {
    margin: 0;
    color: var(--smoke);
    font-size: 14px;
}

.seal {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--graphite);
}

.footnote {
    border-top: 1px solid var(--graphite);
    padding-top: 16px;
}

.footnote p {
    margin: 0;
    max-width: 52ch;
    color: var(--smoke);
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    #stage { cursor: pointer; }
}