:root {
    /* Minimalist brutalist: concrete + paper + ink, one alarm-red accent. No gradients/shadows blur. */
    --concrete: #e6e4dd;   /* page background behind the frame */
    --paper: #ffffff;      /* panels */
    --ink: #000000;        /* borders, text, fills */
    --red: #e5071e;        /* danger / enemy only */
    --dim: #6b6b6b;        /* secondary text */
    --shell: 520px;        /* app frame width — widens on large screens for a broadsheet feel */
}

/* On wide screens the "newspaper" goes broadsheet: wider frame + multi-column listings. */
@media (min-width: 760px) {
    :root { --shell: 760px; }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--ink);
    background: var(--concrete);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: underline; }

h1:focus { outline: none; }

::selection { background: var(--ink); color: var(--paper); }

/* Blazor default chrome, brutalized. */
#blazor-error-ui {
    background: var(--ink);
    color: var(--paper);
    border-top: 3px solid var(--red);
    bottom: 0; left: 0; width: 100%;
    display: none; position: fixed; z-index: 1000;
    padding: 0.6rem 1.25rem 0.7rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui a { color: var(--paper); }

.blazor-error-boundary { background: var(--red); padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "AN ERROR HAS OCCURRED."; text-transform: uppercase; }

.loading-progress {
    position: relative; display: block;
    width: 8rem; height: 8rem; margin: 30vh auto 1rem auto;
}
.loading-progress circle {
    fill: none; stroke: #d3d1ca; stroke-width: 0.5rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--ink);
    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: 700;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
    inset: calc(30vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "LOADING"); }

code { color: var(--ink); }