@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    background: #1a1b1f;
    color: #f4f4f4;
}

/*
  Reserve the scrollbar's space whether or not there is one to show. The document is the scroll
  container, so this belongs on html and nowhere else.

  Without it every navigation that goes from a short page to a tall one — or from a page's own
  "Loading…" to its content — changes the viewport width by the width of a scrollbar. The backdrop
  canvas is fixed to the viewport, so that resize invalidated the procedural world behind every
  screen and rebuilt it from scratch, on the main thread, at exactly the moment the new page was
  arriving. That was the animation hanging on every tab click.
*/
html {
    scrollbar-gutter: stable;
}

h1:focus {
    outline: none;
}

.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-overline,
.mud-typography-subtitle1,
.mud-typography-subtitle2 {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.01em;
}

.appbar-title {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.88rem !important;
}

.appbar-blur {
    border-bottom: 1px solid rgba(165, 43, 217, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hamburger-btn {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

    .hamburger-btn:hover {
        transform: scale(1.12);
    }

.page-enter {
    animation: pageEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.drawer-animate {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover {
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

    .card-hover:hover {
        border-color: var(--mud-palette-primary) !important;
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important;
    }

*,
*::before,
*::after {
    transition: background-color 0.28s ease, color 0.15s ease, border-color 0.28s ease;
}

.fantasy-card {
    border: 1px solid var(--mud-palette-primary) !important;
    position: relative;
    background: linear-gradient(145deg, #23242bd9, #1b1c22d9) !important;
}

    .fantasy-card::before,
    .fantasy-card::after {
        content: '◆';
        position: absolute;
        color: var(--mud-palette-primary);
        font-size: 10px;
        line-height: 1;
        background: var(--mud-palette-surface);
        padding: 0 5px;
        z-index: 1;
        opacity: 0.9;
    }

    .fantasy-card::before {
        top: -7px;
        left: 18px;
    }

    .fantasy-card::after {
        bottom: -7px;
        right: 18px;
    }

.pf-section-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

    .pf-section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 56px;
        height: 2px;
        background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary), transparent);
    }

.mud-nav-link .mud-nav-link-text {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
}

.mud-table-head .mud-table-cell {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

.mud-button-root .mud-button-label {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.02em !important;
    font-size: 0.76rem !important;
}

.mud-chip .mud-chip-content {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.01em !important;
}

#blazor-error-ui {
    color-scheme: dark;
    background: #2b1422;
    color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
}

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

#blazor-error-ui .reload {
    color: inherit;
    text-decoration: underline;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .mud-navmenu {
        padding-top: 8px;
    }

    .mud-nav-link {
        margin: 2px 6px;
        border: 1px solid transparent;
        border-radius: 8px;
    }

        .mud-nav-link:hover {
            background: rgba(165, 43, 217, 0.16) !important;
            border-color: rgba(165, 43, 217, 0.38);
        }

        .mud-nav-link.active {
            background: linear-gradient(90deg, rgba(121, 41, 198, 0.42), rgba(53, 39, 167, 0.36)) !important;
            border-color: rgba(255, 25, 90, 0.45);
        }
}