/* ===== Design tokens ===== */
:root {
    --white: #FAF6EC;
    --paper: #F2EAD2;
    --sora: #2D8FB8;
    --sora-2: #5BB6D9;
    --sora-ink: #134B66;
    --apricot: #FF7A2E;
    --apricot-2: #FFB770;
    --apricot-ink: #C2410C;
    --gold: #F4C430;
    --gold-2: #FFE066;
    --ink: #0E0E10;
    --ink-soft: #2B2B30;
    --red: #E11D2A;
    --display: "Reggae One", "RocknRoll One", "Yusei Magic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
    --body: "RocknRoll One", "Yusei Magic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
    --eng: "Bebas Neue", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --easing: cubic-bezier(.22,.8,.22,1);
}

/* ===== Global reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: #F2EAD2;
    color: #0E0E10;
    font-family: "RocknRoll One", "Yusei Magic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: #F4C430; color: #0E0E10; }

body::before {
    content: ""; position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(circle at 1px 1px, rgba(14,14,16,0.18) 1px, transparent 1.2px) 0 0/8px 8px,
        #F2EAD2;
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 0%, transparent 0%, rgba(14,14,16,0.10) 100%);
}

/* ===== Shared keyframes ===== */
@keyframes pn-march { to { transform: translateX(-50%); } }

/* ===== Blazor error UI ===== */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--sora, #2D8FB8);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}