/* Shared across every page. Page-specific rules live in home.css / game.css. */

:root {
    --rat-blue: #007bff;
    --rat-blue-dark: #0056b3;
    --rat-gold: #ffd700;
    --rat-green: #258f64;
    --rat-teal: #097a7f;
    --rat-ink: #343a40;
    --rat-muted: #6c757d;
    --rat-surface: #f8f9fa;
    --rat-border: #ddd;
}

body {
    background: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #333;
    text-align: center;
}

.btn {
    margin: 5px;
    background-color: var(--rat-blue);
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:hover {
    background-color: var(--rat-gold);
    color: #000;
}

/* The blanket .btn rule above must not repaint Bootstrap's link-style buttons
   or the modal close control as primary call-to-action pills. */
.btn.btn-link {
    background-color: transparent;
    color: var(--rat-blue);
    box-shadow: none;
    font-weight: 500;
}

.btn.btn-link:hover {
    background-color: transparent;
    color: var(--rat-blue-dark);
}

/* Keyboard users need to see where they are. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--rat-teal);
    outline-offset: 2px;
}

.modal-content {
    border-radius: 15px;
}

.modal-header {
    background-color: var(--rat-surface);
    color: #000;
    border-radius: 15px 15px 0 0;
}

.footer {
    position: fixed;
    bottom: -10px;
    width: 100%;
    background-color: var(--rat-surface);
    color: var(--rat-muted);
    text-align: center;
    padding: 5px 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--rat-border);
}

/* Transient status banner — replaces alert() for recoverable errors. */
.notification-container {
    position: fixed;
    top: 15%;
    left: 0;
    right: 0;
    background-color: #ff4d4f;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 1050;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.notification-container.show {
    opacity: 0.9;
}

.notification-container.is-info {
    background-color: var(--rat-teal);
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}