/* ===== Kitty Race Around — night race at the speedway ===== */
:root {
    --asphalt: #23252e;
    --asphalt-d: #17181f;
    --pit: #2c2f3a;
    --pit-edge: #3c404f;
    --cream: #fbf4e4;
    --ink: #2e323d;
    --paper-ink: #3b4152;
    --sun: #f2cd6b;
    --amber: #eeb45e;
    --red: #db5f58;
    --red-d: #b04a44;
    --green: #5cce92;
    --pink: #f0a0bb;
    --shadow: rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka', system-ui, sans-serif;
    color: #e6e9f0;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(242, 205, 107, 0.08) 0%, transparent 55%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 26px),
        linear-gradient(180deg, #343846 0%, #272b35 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
}

h1, h2, h3 { margin: 0; }
button { font-family: inherit; cursor: pointer; }
:focus { outline: none; }

::selection { background: var(--red); color: #fff; }

/* boot — flag + scrolling checker strip */
.boot {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem;
    background: linear-gradient(180deg, #343846, #23262f);
}
.boot-emoji { font-size: 4rem; animation: bootFlag 1.2s ease-in-out infinite; transform-origin: bottom left; }
@keyframes bootFlag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
.boot-text { font-weight: 600; font-size: 1.25rem; color: var(--sun); letter-spacing: 0.06em; text-transform: uppercase; }
.boot-text::after { content: ""; display: block; margin: 0.7rem auto 0; width: 130px; height: 10px;
    background: repeating-conic-gradient(#fff 0% 25%, #17181f 0% 50%) 0 0 / 10px 10px;
    border-radius: 3px; animation: bootStrip 0.8s linear infinite; }
@keyframes bootStrip { to { background-position: 20px 0; } }

#blazor-error-ui {
    background: #fff7e6;
    color: #8a5a2b;
    border-top: 3px solid var(--sun);
    bottom: 0; left: 0; width: 100%;
    box-sizing: border-box;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: #f6c453; padding: 1rem; color: #5e3d22; }
.blazor-error-boundary::after { content: "A kitty caused chaos. Reload?"; }