/* Moto Race with Math — see game.js for the game itself.
   The scene is entirely percentage-based: the road box is the only sized
   element, and the gate/bike/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;
}

.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: 88px 88px;
    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;
}

.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, #4aa3df, #bfe6ff 55%, #45a164 55%);
    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;
    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);
}

/* ---------- 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) {
    .mr-canvas {
        aspect-ratio: 5 / 4;
    }

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

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

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