/* MIDNIGHT GP — midnight grand prix / retro arcade */

:root {
    --asphalt: #0b0e11;
    --asphalt-2: #12161b;
    --plate: #14181d;
    --paint: #ffb300;
    --paint-dim: rgba(255, 179, 0, 0.55);
    --paint-faint: rgba(255, 179, 0, 0.16);
    --magenta: #ff2d78;
    --ghost: #8b95a3;
    --white: #e8edf2;
    --display: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    --body: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: var(--asphalt);
    color: var(--white);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
}

#game {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    /* ambient depth behind the road */
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 179, 0, 0.05), transparent 55%),
        linear-gradient(180deg, var(--asphalt) 0%, var(--asphalt-2) 55%, #0d1015 100%);
}

/* CRT scanlines + grain, above the canvas, below the UI */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.16) 0px,
            rgba(0, 0, 0, 0.16) 1px,
            transparent 1px,
            transparent 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

body::after {
    /* edge vignette */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(130% 130% at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
}

/* ---------- HUD ---------- */

#hud {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    font-family: var(--display);
    text-shadow: 0 0 12px rgba(255, 179, 0, 0.25);
}

.hud-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.hud-label {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ghost);
}

#score {
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 700;
    color: var(--paint);
    font-variant-numeric: tabular-nums;
}

#best {
    font-size: clamp(15px, 2.6vw, 22px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#speed {
    font-size: clamp(15px, 2.6vw, 22px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hud-unit {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ghost);
    align-self: flex-end;
}

.hud-score {
    top: max(14px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
}

.hud-best {
    top: max(14px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    text-align: right;
}

.hud-speed {
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
}

/* ---------- overlays ---------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 8, 10, 0.55);
    backdrop-filter: blur(3px);
    opacity: 1;
    transition: opacity 0.25s ease;
}

.overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* chamfered racing-plate panel */
.panel {
    position: relative;
    width: min(420px, 92vw);
    padding: 34px 30px 30px;
    background: linear-gradient(180deg, rgba(24, 28, 34, 0.96), rgba(16, 19, 24, 0.96));
    border: 2px solid var(--paint-dim);
    clip-path: polygon(
        14px 0, 100% 0, 100% calc(100% - 14px),
        calc(100% - 14px) 100%, 0 100%, 0 14px
    );
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.panel::before {
    /* amber pinstripe */
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--paint), transparent);
    opacity: 0.6;
}

.panel.slim {
    width: min(320px, 92vw);
}

.title {
    font-family: var(--display);
    font-size: clamp(34px, 9vw, 52px);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--white);
    text-shadow:
        0 0 18px rgba(255, 179, 0, 0.35),
        3px 3px 0 rgba(255, 45, 120, 0.35);
    animation: flicker-in 0.9s steps(12) both;
}

.title .accent {
    color: var(--paint);
    margin-left: 0.18em;
}

.title.small {
    font-size: clamp(24px, 6vw, 34px);
}

.title.wrecked {
    color: var(--magenta);
    text-shadow:
        0 0 22px rgba(255, 45, 120, 0.55),
        3px 3px 0 rgba(255, 179, 0, 0.3);
}

.tagline {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--ghost);
}

.hint {
    margin-top: 22px;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ghost);
}

.final {
    margin: 22px 0 6px;
    font-family: var(--display);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#final-score {
    font-size: clamp(30px, 8vw, 44px);
    font-weight: 800;
    color: var(--paint);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 16px rgba(255, 179, 0, 0.4);
}

.newbest {
    margin-top: 10px;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--magenta);
    animation: pulse 1s ease-in-out infinite alternate;
}

.btn {
    margin-top: 22px;
    width: 100%;
    padding: 13px 18px;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--asphalt);
    background: var(--paint);
    border: none;
    cursor: pointer;
    clip-path: polygon(
        10px 0, 100% 0, 100% calc(100% - 10px),
        calc(100% - 10px) 100%, 0 100%, 0 10px
    );
    box-shadow: 0 0 24px rgba(255, 179, 0, 0.35);
    transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn:hover {
    background: #ffc233;
    box-shadow: 0 0 34px rgba(255, 179, 0, 0.55);
}

.btn:active {
    transform: translateY(2px);
}

.btn:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 3px;
}

.coin {
    margin-top: 18px;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ghost);
    animation: blink 1.6s steps(2) infinite;
}

.hidden {
    display: none !important;
}

@keyframes flicker-in {
    0% { opacity: 0; }
    8% { opacity: 0.7; }
    14% { opacity: 0.2; }
    24% { opacity: 0.9; }
    32% { opacity: 0.4; }
    46% { opacity: 1; }
    54% { opacity: 0.75; }
    66%, 100% { opacity: 1; }
}

@keyframes pulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

@keyframes blink {
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .title,
    .coin,
    .newbest {
        animation: none;
    }
    .overlay,
    .btn {
        transition: none;
    }
}