/* Original Theme only. The wrapper also contains the dialog and popover providers. */
.original-theme {
    --original-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    --original-shadow: 0 3px 14px rgb(16 33 50 / 5%);
    --original-overlay-shadow: 0 12px 40px rgb(16 33 50 / 18%);
}

.original-theme--light {
    color-scheme: light;
    --original-rarity-red: #bb3046;
    --original-rarity-green: #247346;
    --original-rarity-orange: #a1530b;
    --original-rarity-blue: #006d9f;
    --original-rarity-purple: #793ac1;
    --original-rarity-gold: #876400;
}

.original-theme--dark {
    color-scheme: dark;
    --original-shadow: 0 3px 14px rgb(0 0 0 / 10%);
    --original-overlay-shadow: 0 12px 40px rgb(0 0 0 / 30%);
    --original-rarity-red: #ff929d;
    --original-rarity-green: #72d2aa;
    --original-rarity-orange: #f3b478;
    --original-rarity-blue: #79cef5;
    --original-rarity-purple: #c4a0f5;
    --original-rarity-gold: #eed17f;
}

/* Application shell and navigation */
.original-theme .mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: var(--original-shadow);
}

.original-theme .search-max-width .mud-input.mud-input-outlined {
    border-radius: 8px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.original-theme .search-max-width .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

.original-theme .search-max-width .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

.original-theme .search-max-width .mud-input-adornment {
    color: var(--mud-palette-text-secondary);
}

.original-theme .mainlayout-flyffle-link {
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, var(--mud-palette-surface));
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
    box-shadow: none;
    letter-spacing: 0;
}

.original-theme .mainlayout-flyffle-link:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
    box-shadow: none;
    transform: none;
}

.original-theme .mud-drawer .drawer-mobile {
    background: var(--mud-palette-drawer-background);
    box-shadow: none;
}

.original-theme .mud-drawer .mud-navmenu {
    padding-inline: 12px;
}

.original-theme .mud-drawer .mud-nav-link {
    min-height: 42px;
    margin-block: 2px;
    border-radius: 8px;
}

.original-theme .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--original-accent-soft);
    box-shadow: inset 3px 0 var(--mud-palette-primary);
    font-weight: 700;
}

.original-theme .mobile-menu {
    color: var(--mud-palette-appbar-text);
    border-top: 1px solid var(--mud-palette-divider);
    box-shadow: none;
}

/* Shared controls, including those rendered in a popover or dialog. */
.original-theme :is(.mud-button-root, .mud-input-outlined, .mud-pagination-item) {
    border-radius: 8px;
}

.original-theme .mud-button-filled {
    box-shadow: none;
}

.original-theme .mud-input-outlined {
    background: var(--mud-palette-surface);
}

.original-theme :is(a, button, input, [role="button"]):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.original-theme :is(.mud-popover, .mud-dialog) {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: var(--original-overlay-shadow);
}

.original-theme .mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.original-theme .mud-dialog-actions {
    padding: 16px 24px;
    gap: 8px;
}

.original-theme .mud-list-item {
    transition: background-color 140ms ease;
}

.original-theme :is(.mud-tooltip, .flyff-tooltip) {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 12px;
    box-shadow: var(--original-overlay-shadow);
}

/* Data views retain their compact rows and existing responsive behavior. */
.original-theme :is(.mud-table, .mud-simple-table) {
    /* Clip painted rows at the outer radius without adding a scroll container. */
    overflow: clip;
}

.original-theme .mud-table {
    box-shadow: var(--original-shadow);
}

.original-theme .mud-table-toolbar {
    gap: 12px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.original-theme .mud-table .mud-table-head .mud-table-row .mud-table-cell {
    /* The toolbar owns the top corners; the header below it must join flush. */
    border-radius: 0;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.original-theme .mud-simple-table.mud-table-sticky-header th:is(:first-child, :last-child) {
    border-radius: 0;
}

.original-theme .mud-table-dense .mud-table-body .mud-table-cell {
    padding-block: 8px;
}

.original-theme .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

.original-theme .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-divider-light);
}

.original-theme .mud-breadcrumbs {
    font-size: 0.875rem;
}

.original-theme .filter-menu {
    padding: 20px !important;
    box-shadow: var(--original-shadow);
}

.original-theme .filter-menu > .mud-typography-h6 {
    margin-bottom: 12px;
}

.original-theme .filter-menu .mud-input-control {
    margin-top: 12px;
}

.original-theme .hover-effect:hover {
    background: var(--original-accent-soft);
    box-shadow: var(--original-shadow);
}

/* Carry the same surface hierarchy onto the landing page and detail panels. */
.original-theme .index-shell {
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.original-theme :is(.index-hero-panel, .index-section-panel, .index-guides-panel, .index-footer) {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: var(--original-shadow);
}

.original-theme .index-feature-card {
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 30%, var(--mud-palette-surface));
}

.original-theme :is(.index-card, .index-browse-card, .index-guides-icon, .index-browse-card-icon-slot) {
    border-radius: 12px;
}

.original-theme .index-guides-label {
    color: var(--original-rarity-purple);
}

.original-theme .index-section-heading {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.original-theme .index-browse-card-title {
    font-size: 1.125rem;
    line-height: 1.3;
}

.original-theme .index-browse-card::after {
    opacity: 0.45;
}

/* Preserve rarity identities with readable colors on each mode's surfaces. */
.original-theme :is(.rarity-Unique, .rarity-VeryRare) {
    --original-rarity: var(--original-rarity-red);
}

.original-theme .rarity-Rare {
    --original-rarity: var(--original-rarity-green);
}

.original-theme .rarity-Uncommon {
    --original-rarity: var(--original-rarity-orange);
}

.original-theme .rarity-Common {
    --original-rarity: var(--original-rarity-blue);
}

.original-theme .rarity-Ultimate {
    --original-rarity: var(--original-rarity-purple);
}

.original-theme .rarity-Unique-yellow {
    --original-rarity: var(--original-rarity-gold);
}

.original-theme :is(.rarity-Unique, .rarity-VeryRare, .rarity-Rare, .rarity-Uncommon, .rarity-Common, .rarity-Ultimate, .rarity-Unique-yellow):not(tr),
.original-theme :is(.rarity-Unique, .rarity-VeryRare, .rarity-Rare, .rarity-Uncommon, .rarity-Common, .rarity-Ultimate, .rarity-Unique-yellow) :is(a, input) {
    color: var(--original-rarity) !important;
}

@media (min-width: 960px) {
    .original-theme .search-max-width {
        max-width: min(40%, 560px);
    }
}

@media (min-width: 600px) {
    .original-theme .mud-table-cell.item-number {
        text-align: right;
    }
}

@media (max-width: 599px) {
    .original-theme .mud-table-toolbar {
        gap: 8px;
        padding-inline: 12px;
    }

    .original-theme .filter-menu.open {
        width: min(340px, calc(100vw - 32px));
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
        box-shadow: var(--original-overlay-shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .original-theme :is(.mud-list-item, .index-card, .index-browse-card, .index-guides-panel, .mainlayout-flyffle-link) {
        transition: none;
    }

    .original-theme :is(.index-browse-card-link, .index-guides-link):is(:hover, :focus-visible) :is(.index-browse-card, .index-guides-panel) {
        transform: none;
    }
}