/* English Car Race — see game.js for the game itself. The same stylesheet
   as english-moto-race (its setup screen with the car/topic pickers, and the
   result card's "Practice these again" list, are near the end).
   The scene is entirely percentage-based: the road box is the only sized
   element, and the gate/car/lane dashes inside it are all positioned as
   percentages of it by game.js, so the whole track scales with the
   container (and in fullscreen) without a single layout read per frame. */
#game-root {
    --mr-accent: #10B981;
    --mr-accent-dark: #0c8d64;
    --mr-accent-light: #e3f9ef;
    --mr-accent-border: #a7f3d0;
    --mr-glass-bg: rgba(255, 255, 255, .62);
    --mr-glass-border: rgba(255, 255, 255, .45);
    --mr-asphalt: #3c4250;
    --mr-asphalt-dark: #2b3040;
}

/* Every control here is held down rather than clicked, so mobile WebKit's
   grey tap flash would sit lit under the finger for the whole of a steer or
   a boost. `manipulation` also drops the double-tap-zoom wait, so a quick
   second press isn't swallowed. (.mr-canvas clears the same flash itself.) */
#game-root button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.kwg-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.mr-wrap {
    max-width: 520px;
    margin: 0 auto;
}

/* Wider than the picker: the pseudo-3D road reads far better with some
   horizontal room, and game.js widens the field of view to match rather
   than stretching the picture. */
.mr-wrap-race {
    max-width: 760px;
}

/* ---------- loading / error ---------- */

.mr-loading,
.mr-error {
    text-align: center;
    padding: 48px 16px;
}

.mr-loading-icon,
.mr-error-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.mr-loading-icon {
    animation: mr-pulse 1.2s ease-in-out infinite;
}

.mr-loading-text {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.mr-error-text {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #EF4444;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
}

/* ---------- level picker ---------- */

.mr-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mr-header-icon {
    display: flex;
    font-size: 30px;
    line-height: 1;
}

.mr-header-icon img {
    display: block;
    height: 38px;
    width: auto;
}

.mr-header-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.mr-levels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.mr-level-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mr-glass-border);
    border-radius: var(--kw-radius, 12px);
    background: var(--mr-glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mr-level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .14);
}

.mr-level-card:hover .mr-level-thumb {
    transform: scale(1.06);
}

.mr-level-card:active {
    transform: translateY(-1px);
}

.mr-level-thumb {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    font-size: 36px;
    background: linear-gradient(135deg, var(--mr-accent-light), var(--mr-accent-border));
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .2s ease;
}

.mr-level-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 16px;
}

.mr-level-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--kw-text, #2D2A32);
    text-align: center;
}

.mr-level-age {
    font-size: 14px;
    font-weight: 700;
    color: var(--mr-accent-dark);
    background: var(--mr-accent-light);
    padding: 2px 10px;
    border-radius: 999px;
}

/* ---------- in-race chrome ---------- */

.mr-level-row {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mr-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--mr-accent-light);
    color: var(--mr-accent-dark);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 12px;
}

.mr-level-pill-icon {
    display: inline-flex;
    line-height: 1;
}

.mr-level-pill-icon img {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: cover;
    border-radius: 50%;
}

.mr-change-level-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--mr-glass-border);
    background: var(--mr-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--mr-accent-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 12px 6px 10px;
    transition: transform .1s ease, background .15s ease;
}

.mr-change-level-btn svg {
    width: 12px;
    height: 12px;
}

.mr-change-level-btn:hover {
    background: rgba(255, 255, 255, .8);
    transform: translateY(-1px);
}

.mr-change-level-btn:active {
    transform: translateY(0);
}

/* Pause and Change Level share the pill styling and sit together at the
   right of the level row. */
.mr-level-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* takes the free space, so the level/racer/topic pills sit together on
       the left rather than being spread across the row */
    margin-left: auto;
}

.mr-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--mr-accent-light);
    overflow: hidden;
    margin-bottom: 12px;
}

.mr-progress-fill {
    height: 100%;
    width: 0;
    background: var(--mr-accent);
    border-radius: 999px;
    transition: width .3s ease;
}

.mr-stat-row {
    justify-content: center;
    margin-bottom: 14px;
}

.mr-stat {
    background: var(--mr-accent-light);
    color: var(--mr-accent-dark);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 14px;
}

/* ---------- the canvas stage ---------- */

/* The whole track, bike, gantries and scenery are drawn by game.js into
   this one <canvas> (a pseudo-3D road renderer — see the file header).
   Nothing here positions anything inside it: the canvas simply gets a
   box, and game.js sizes its backing store to that box times the device
   pixel ratio on every resize, projecting in CSS pixels. A wider box
   therefore shows more track to the sides rather than stretching it. */
.mr-stage {
    position: relative;
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    background: linear-gradient(180deg, #5ab8ff, #cdeaff 50%, #86d993 50%);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}

.mr-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    /* Steering by drag would otherwise fight the browser's own horizontal
       pan/zoom gesture on touch. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    /* Steering is a press-and-hold, so mobile WebKit's tap flash would blink
       over the track for the whole of every steer. */
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Browsers with aspect-ratio disabled fall back to a plain fixed height
   rather than collapsing the canvas to zero. */
@supports not (aspect-ratio: 4 / 3) {
    .mr-canvas {
        height: clamp(300px, 52vh, 520px);
    }
}

.mr-canvas[hidden] {
    display: none;
}

.mr-nowebgl {
    padding: 48px 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.mr-nowebgl[hidden] {
    display: none;
}

/* ---------- steering controls ---------- */

.mr-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.mr-steer-btn {
    flex: 0 0 auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    width: 100px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: var(--mr-accent);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--mr-accent-dark);
    transition: transform .1s ease;
}

.mr-steer-btn:hover {
    transform: translateY(-1px);
}

.mr-steer-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--mr-accent-dark);
}

/* Brake and Boost share the middle of the control row (where the hint text
   used to sit) so both stay big, obvious touch targets between the two steer
   buttons — the hint moved to its own line underneath. They're deliberately
   the same size and shape as each other, in opposite colours: red for the
   brake, amber for the boost. */
.mr-brake-btn,
.mr-boost-btn {
    flex: 1 1 auto;
    max-width: 260px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.mr-boost-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #4a2d02;
    box-shadow: 0 3px 0 #c2760a;
}

.mr-brake-btn {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
    box-shadow: 0 3px 0 #991b1b;
}

.mr-brake-btn svg,
.mr-boost-btn svg {
    width: 18px;
    height: 18px;
}

.mr-brake-btn:hover,
.mr-boost-btn:hover {
    transform: translateY(-1px);
}

.mr-boost-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #c2760a;
}

.mr-brake-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #991b1b;
}

/* Boost, spent: the tank is refilled by answering gates right, so once the
   gates are done the button is done too (see finalStretch() in game.js). Greyed
   rather than hidden, so the control the player was holding is still where they
   left it. */
.mr-btn-spent {
    filter: grayscale(1);
    opacity: .45;
    cursor: default;
    box-shadow: none;
}

.mr-btn-spent:hover,
.mr-btn-spent:active {
    transform: none;
    box-shadow: none;
}

.mr-hint {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.mr-hint b {
    font-weight: 800;
    background: rgba(255, 255, 255, .22);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---------- result ---------- */

.mr-done-card {
    text-align: center;
    /* Brighter and more opaque than the in-race panels: this is a celebration
       card a child looks at, not a HUD read at speed. */
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 26px 20px 24px;
    box-shadow: 0 4px 18px rgba(12, 141, 100, .16);
    animation: mr-pop .3s ease;
}

/* The medal is the one hero on the card — the placing said in the biggest
   possible way, in its own podium colour. Everything that used to be a
   separate centred sentence (tier emoji, rank pill, note, gates line, score
   line) now hangs off this or off the two tiles below, which is what took the
   card from eight stacked rows down to four. */
.mr-done-medal {
    width: 118px;
    height: 118px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    animation: mr-pop .35s ease;
}

.mr-done-medal-icon {
    display: block;
    line-height: 0;
    margin-bottom: 2px;
}

.mr-done-medal-icon svg {
    width: 26px;
    height: 26px;
}

.mr-done-medal-place {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.05;
}

.mr-done-medal-of {
    font-size: 12px;
    font-weight: 700;
    opacity: .8;
}

/* Podium colours, all bright — a kid's result screen has no business going
   grey or dark, so second place is sky blue and third is a warm orange
   rather than the usual dull silver and bronze. */
.mr-done-medal-1 {
    background: linear-gradient(160deg, #fef3c7, #fbbf24);
    color: #8a5a04;
}

.mr-done-medal-2 {
    background: linear-gradient(160deg, #e0f2fe, #38bdf8);
    color: #075985;
}

.mr-done-medal-3 {
    background: linear-gradient(160deg, #ffedd5, #fb923c);
    color: #9a3d0a;
}

.mr-done-medal-4 {
    background: linear-gradient(160deg, #d1fae5, #34d399);
    color: #06694c;
}

.mr-done-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--mr-accent-dark);
    margin-bottom: 14px;
}

.mr-done-tiles {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.mr-done-tile {
    flex: 1 1 0;
    max-width: 170px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    border-radius: 14px;
    background: var(--mr-accent-light);
    border: 1px solid var(--mr-accent-border);
}

.mr-done-tile-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--mr-accent-dark);
    line-height: 1.1;
}

.mr-done-tile-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4f8d76;
}

.mr-done-stars {
    font-size: 24px;
    letter-spacing: 4px;
}

.mr-done-share {
    justify-content: center;
    margin-top: 16px;
}

.mr-done-actions {
    justify-content: center;
    margin-top: 20px;
}

.mr-btn-primary,
.mr-btn-secondary {
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform .1s ease;
}

.mr-btn-primary {
    background: var(--mr-accent);
    color: #fff;
    box-shadow: 0 3px 0 var(--mr-accent-dark);
}

.mr-btn-primary:hover {
    transform: translateY(-1px);
}

.mr-btn-secondary {
    background: var(--mr-accent-light);
    color: var(--mr-accent-dark);
}

.mr-btn-secondary:hover {
    background: var(--mr-accent-border);
}

/* ---------- setup: racer and topic ---------- */

.mr-panel {
    background: var(--mr-glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--mr-glass-border);
    border-radius: var(--kw-radius, 12px);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}

.mr-panel-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--mr-accent-dark);
    margin-bottom: 10px;
}

.mr-racer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.mr-racer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px 10px;
    border: 3px solid transparent;
    border-radius: var(--kw-radius, 12px);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.mr-racer-card:hover {
    transform: translateY(-3px);
}

.mr-racer-card.mr-selected {
    border-color: var(--mr-racer);
    background: color-mix(in srgb, var(--mr-racer) 14%, #fff);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}

.mr-racer-canvas {
    display: block;
    width: 100%;
    max-width: 112px;
    aspect-ratio: 150 / 160;
    height: auto;
}

.mr-racer-name {
    font-size: 15px;
    font-weight: 900;
    color: var(--kw-text, #2D2A32);
}

.mr-topic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mr-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 2px solid var(--mr-accent-border);
    border-radius: 999px;
    background: #fff;
    color: var(--kw-text, #2D2A32);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .1s ease, background .12s ease;
}

.mr-topic:hover {
    transform: translateY(-1px);
}

.mr-topic.mr-selected {
    background: var(--mr-accent);
    border-color: var(--mr-accent-dark);
    color: #fff;
}

.mr-topic-emoji {
    font-size: 16px;
    line-height: 1;
}

.mr-btn-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px 24px;
    font-size: 19px;
    box-shadow: 0 4px 0 var(--mr-accent-dark);
}

.mr-pill-racer {
    background: color-mix(in srgb, var(--mr-racer) 22%, #fff);
    color: #1f2937;
    box-shadow: inset 0 0 0 2px var(--mr-racer);
}

/* ---------- result extras ---------- */

.mr-done-racer {
    display: block;
    width: 110px;
    height: auto;
    aspect-ratio: 150 / 160;
    margin: 6px auto 0;
}

.mr-practice {
    max-width: 380px;
    margin: 10px auto 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.mr-practice[hidden] {
    display: none;
}

.mr-practice-title {
    font-size: 14px;
    font-weight: 900;
    color: #dc2626;
    margin-bottom: 4px;
}

.mr-practice ul {
    margin: 0;
    padding-left: 20px;
}

.mr-practice li {
    font-size: 16px;
    font-weight: 800;
    color: var(--kw-text, #2D2A32);
    line-height: 1.5;
}

/* ---------- keyframes ---------- */

@keyframes mr-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: .7; }
}

@keyframes mr-pop {
    0% { transform: scale(.85); }
    100% { transform: scale(1); }
}



@media (max-width: 480px) {
    /* Square rather than math-moto-race's 5:4: the question plate can run
       to three lines of sentence, and the gliding gate's signs ride just
       below it (see rideCamZ() in game.js), so they need the height. */
    .mr-canvas {
        aspect-ratio: 1 / 1;
    }

    .mr-pill-racer,
    .mr-pill-topic {
        display: none;
    }

    .mr-racer-grid {
        gap: 6px;
    }

    .mr-racer-name {
        font-size: 13px;
    }

    .mr-steer-btn {
        width: 58px;
        height: 48px;
    }

    .mr-brake-btn,
    .mr-boost-btn {
        height: 48px;
        font-size: 14px;
    }

    .mr-hint {
        font-size: 11px;
    }
}