html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #4B4F1B;
}

.btn-primary {
    color: #FFFFFF;
    background-color: #4B4F1B;
    border-color: #4B4F1B;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #4B4F1B;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #3F6B3A;
}

.invalid {
    outline: 1px solid #8F2A20;
}

.validation-message {
    color: #8F2A20;
}

/* Blazor's unhandled-error bar. Moved here from MainLayout.razor.css: that file's
   scoped CSS compiled to `#blazor-error-ui[b-hash]`, so `display:none` only applied
   inside MainLayout and the bar rendered as visible plain text on the landing page
   and the game screen. Global rules fix that for all three layouts.

   Literal hex on purpose — NOT var(--mud-palette-*). Those variables are injected by
   MudThemeProvider, i.e. by the thing that just failed. Failure-mode UI must not depend
   on the app. #F2E3C2 is Background-family sand-amber; text 10.63:1, link 6.56:1. */
#blazor-error-ui {
    color-scheme: light only;
    background: #F2E3C2;
    color: #2D2F2D;
    border-top: 2px solid #8F2A20;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(45, 47, 45, 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 a.reload { color: #8F2A20; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    color: #2D2F2D;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}