/*
    Design tokens for the "Plum Terminal" look (UI_REFRESH_DESIGN.md §2-4).
    The MudBlazor palette is set in ThemeService; these cover what the palette has no slot for.
    css/theme.css (loaded after MudBlazor) applies them to MudBlazor and ApexCharts.
*/
:root {
    /* Surfaces. Plum values are the fallback while the app is still loading;
       MainLayout re-declares these four for whichever theme is active. */
    --mt-page: #19151E;
    --mt-card: #211B28;
    --mt-raised: #2B2333;
    --mt-page-rgb: 25, 21, 30;

    /* 1px lines do the job shadows used to do */
    --mt-line: rgba(255, 255, 255, 0.07);
    --mt-line-strong: rgba(255, 255, 255, 0.13);
    --mt-line-faint: rgba(255, 255, 255, 0.05);

    --mt-primary: #776BE7;
    --mt-primary-soft: rgba(119, 107, 231, 0.20);
    --mt-primary-outline: rgba(119, 107, 231, 0.60);
    --mt-primary-text: #B3AAF7;
    --mt-primary-text-hover: #D3CDFB;
    --mt-accent: #8E83F0;

    --mt-text: #ECE8F2;
    --mt-text-body2: #C9C2D3;
    --mt-text-dim: #A59DB0;
    --mt-text-faint: #8A8296;
    /* decorative only - fails text contrast, never use it for something that has to be read */
    --mt-glyph-faint: #6B6377;
    /* dark purple text for when the background is a light data color (e.g. a chart tooltip on a light slice) */
    --mt-ink: #1E1532;

    /* status colors are always paired with an icon or a word, never color alone */
    --mt-up: #5FD38D;
    --mt-down: #F07178;
    --mt-winner: #E5C07B;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;

    --mud-palette-background: #19151E;
    --mud-default-borderradius: 6px;
}

html, body {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
}

/* Mono is for things the system tells you: labels, metadata, paths, timestamps, numbers in tables. */
.mono {
    font-family: var(--font-mono) !important;
    letter-spacing: 0 !important;
}

.mt-label {
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--mt-text-dim);
}

/* the status line under a loading spinner ("please wait.", "loading games...") - same voice as the
   "loading..." on the pre-load screen in index.html */
.mt-loader-text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--mt-text-dim);
}

.mt-meta {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: 0;
    color: var(--mt-text-faint);
}

.mt-up {
    color: var(--mt-up) !important;
}

.mt-down {
    color: var(--mt-down) !important;
}

.mt-winner {
    color: var(--mt-winner) !important;
}

/* an inset block inside a card (notification item, list row): one step lighter than the card, no border */
.mt-inset {
    padding: 10px 12px;
    background-color: var(--mt-raised);
    border-radius: var(--mud-default-borderradius);
}

/* ---- CRT screen look over card art (CrtOverlay.razor) ----
   Scanlines + a soft vignette, so a card's art reads like it's on a monitor. Only over art crops, never over a
   full card image, and never on plain cards. The overlay sits at z-index -1 inside an isolated host: that paints
   it over the host's own background (the art) but under all of the host's content.
   Strength is three tokens, so a surface can tune it (the flashback dials it down - see .fb-root). */
.mt-crt-host {
    position: relative;
    isolation: isolate;
}

.mt-crt {
    --crt-light: rgba(255, 255, 255, .035);
    --crt-dark: rgba(0, 0, 0, .16);
    --crt-vignette: rgba(0, 0, 0, .32);
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        repeating-linear-gradient(0deg, var(--crt-light) 0 1px, var(--crt-dark) 1px 2px, transparent 2px 3px),
        radial-gradient(ellipse at 50% 45%, transparent 55%, var(--crt-vignette) 100%);
}

    /* hover: heavier lines and a faint lift of the art */
    .mt-crt::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background-color: rgba(255, 255, 255, .035);
        background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, .14) 1px 2px, transparent 2px 3px);
        transition: opacity .25s ease;
    }

.mt-crt-hover:hover > .mt-crt::before {
    opacity: 1;
}

/* 8px square in a player's color, shown next to their name */
.mt-player-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* the mono detail line under an item's main line, led by a small "continues from above" icon */
.mt-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--mt-text-dim);
}

    .mt-detail > .mud-icon-root {
        flex: 0 0 auto;
        font-size: .875rem;
        width: .875rem;
        height: .875rem;
        color: var(--mt-glyph-faint);
    }

/* ---- stat tile (SmallWidget) ---- */

.mt-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px 16px;
    color: var(--mt-text);
    text-decoration: none;
}

a.mt-stat-link {
    transition: border-color .15s ease, background-color .15s ease;
}

    a.mt-stat-link:hover,
    a.mt-stat-link:focus-visible {
        color: var(--mt-text);
        border-color: var(--mt-primary-outline);
        outline: none;
    }

.mt-stat-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-stat-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--mt-primary-text);
    border: 1px solid var(--mt-line-strong);
    border-radius: 4px;
}

    .mt-stat-icon > .mud-icon-root {
        font-size: .875rem;
        width: .875rem;
        height: .875rem;
    }

    .mt-stat-icon > .mud-icon-root.mud-icon-default {
        color: inherit;
    }

.mt-stat-value {
    min-height: 30px;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.mt-stat-sub {
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--mt-text-dim);
}

.mt-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .mt-trend > .mud-icon-root {
        font-size: .875rem;
        width: .875rem;
        height: .875rem;
    }

/* settings > theme picker: a card-colored bar with a raised chip, drawn on the theme's page color */
.mt-theme-preview {
    display: flex;
    align-items: center;
    height: 28px;
    margin-top: 12px;
    padding: 0 8px;
    border: 1px solid var(--mt-line);
    border-radius: 4px;
}

    .mt-theme-preview > span {
        width: 40%;
        height: 12px;
        border-radius: 2px;
    }

/* the supporter call-out button: outlined in the "down"/heart red rather than a theme color */
.mud-button-root.mt-heart-button {
    color: #F4A3A8;
    border-color: rgba(240, 113, 120, 0.55);
}

    .mud-button-root.mt-heart-button:hover {
        background-color: rgba(240, 113, 120, 0.08);
    }

.disable-dbl-tap-zoom {
    touch-action: manipulation;
}

.main-title {
    color: var(--mt-text);
    font-size: 1.1875rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
}

.header-logo {
    height: 36px;
    width: auto;
    padding-right: 10px;
}

/* ---- app bar ---- */

/* "~/stats/commanders": where you are, written like a shell path. Shown in the app bar on wide
   screens and above the page title (.mt-page-path) on narrow ones, never both. */
.mt-appbar-path {
    display: none;
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--mt-text-dim);
}

/* TerminalPath: the path text plus a small "copy link" button */
.mt-path {
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mt-path-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mt-path-copy {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    padding: 2px;
    font-size: 1.1em;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 4px;
    opacity: .7;
    transition: opacity .15s ease, color .15s ease;
}

    .mt-path-copy:hover,
    .mt-path-copy:focus-visible {
        color: var(--mt-accent);
        opacity: 1;
        outline: none;
    }

    .mt-path-copy.copied {
        color: var(--mud-palette-success);
        opacity: 1;
    }

.mt-prompt {
    color: var(--mt-accent);
}

.mt-search-prompt {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    min-height: 38px;
    margin-right: 8px;
    padding: 0 12px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--mt-text-dim);
    text-align: left;
    cursor: pointer;
    background: var(--mt-card);
    border: 1px solid var(--mt-line-strong);
    border-radius: var(--mud-default-borderradius);
    transition: border-color .15s ease, color .15s ease;
}

    .mt-search-prompt:hover,
    .mt-search-prompt:focus-visible {
        color: var(--mt-text);
        border-color: var(--mt-primary-outline);
        outline: none;
    }

@media (min-width: 960px) {
    .mt-appbar-path {
        display: inline-flex;
    }

    .mt-search-prompt {
        display: inline-flex;
    }

    .mt-search-icon,
    .mt-page-path {
        display: none !important;
    }
}

.mt-avatar-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.mt-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--mt-primary-text-hover);
    background: var(--mt-raised);
    border: 1px solid var(--mt-primary);
    border-radius: 50%;
    transition: background-color .15s ease;
}

.mt-avatar-button:hover .mt-avatar,
.mt-avatar-button:focus-visible .mt-avatar {
    background: var(--mt-primary-soft);
}

.mt-avatar-button:focus-visible {
    outline: 2px solid var(--mt-primary-outline);
    outline-offset: -4px;
}

/* ---- drawer ---- */

.mt-nav-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mt-nav-extra {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 400;
    color: var(--mt-up);
    white-space: nowrap;
}

.mt-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    vertical-align: 1px;
    background: var(--mt-up);
    border-radius: 50%;
}

/* ---- page header ---- */

.mt-page-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.mt-page-path {
    display: flex;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--mt-text-faint);
}

.mt-page-subline {
    max-width: 96ch;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--mt-text-dim);
}

/* ---- footer ---- */

.mt-footer {
    color: var(--mt-text-body2);
    border-top: 1px solid var(--mt-line);
}

.mt-footer-legal {
    font-size: .8125rem;
    color: var(--mt-text-dim);
}

.mt-statusbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 16px;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--mt-text-dim);
    background: var(--mt-card);
    border-top: 1px solid var(--mt-line);
}

    .mt-statusbar a {
        color: inherit;
        text-decoration: none;
    }

        .mt-statusbar a:hover {
            color: var(--mt-text);
        }

.app-bar-link {
    height: 100%;
    padding-inline: 16px !important;
    background-color: transparent !important;
    border-radius: 0px !important;
}

.app-bar-link:hover {
    background-color: rgb(255, 255, 255, .1) !important;
}

.inverted-button:hover {
    background-color: rgb(255, 255, 255, .1) !important;
}

.branded-text {
    font-family: var(--font-sans) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.branded-text-normal {
    font-family: var(--font-sans) !important;
}

/* The 5rem showcase numbers were sized for short values ("21"); a value like "52.94%" ran out of its card.
   Let them shrink with the viewport before that happens. */
.branded-text[style*="font-size: 5rem"] {
    font-size: clamp(2.75rem, 3.4vw, 5rem) !important;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.text-secondary {
    color: var(--mt-text-dim);
}

.only-screenshot {
    display: none;
}

.font-1 {
    font-size: 1rem !important;
}

.w-100{
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.mh-400 {
    min-height: 400px;
}

.h-75{
    height: 75vh !important;
}

.text-center {
    text-align: center;
}

.main-content {
    margin-inline: 16px;
    margin-top: 16px;
    min-height: 100vh;
}

.ad-bg {
    position: relative;
    height: 90px;
    width: 100%;
    background-color: var(--mud-palette-surface) !important;
    border-radius: var(--mud-default-borderradius);
}

.convoke-ad {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    height: 90px;
    width: 100%;
    padding-inline: 16px;
    gap: 16px;
    overflow: hidden;
    background-image: linear-gradient( to right, #5d90ff1f, #955be31f, #0068971f);
    border-radius: var(--mud-default-borderradius);
    /* Enables container queries */
    container-type: inline-size;
}

/* LOGO — now actually scales */
.convoke-logo {
    height: clamp(32px, 8cqw, 2vw);
    width: auto;
    flex-shrink: 0;
}

/* TEXT */
.convoke-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* TITLE */
.convoke-title {
    font-weight: 600;
    font-size: clamp(0.9rem, 4cqw, 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SUBTITLE */
.convoke-subtitle {
    font-size: clamp(0.75rem, 3cqw, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BUTTON */
.convoke-button {
    flex-shrink: 0;
}

.convoke-cta {
    white-space: nowrap;
    font-size: clamp(0.75rem, 3cqw, 1rem);
    padding-inline: clamp(12px, 3cqw, 24px);
}

.mt-plus{
    display: flex;
    padding-top: 8px;
    align-items: center;
}
/* Small container behavior */
@container (max-width: 700px) {

    .convoke-title {
        display: none;
    }

    .convoke-button {
        display: none;
    }

    .convoke-logo {
        height: clamp(18px, 10cqw, 24px);
    }

    .convoke-subtitle {
        font-size: clamp(0.8rem, 4cqw, 1rem);
        white-space: wrap;
        margin-top: 8px;
    }

    .mt-plus {
        display: none;
    }
}


#ad-background-text {
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    height: 56px;
    font-weight: bold;
}

.scroll-menu {
    top: 66px;
    right: 0px;
    position: fixed;
    cursor: pointer;
    z-index: 100;
}

.ad-main {
    height: 120px;
    position: relative;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hoverable{
    transition: 0.2s;
}

.hoverable :hover {
    cursor: pointer;
}

.big-hoverable {
    height: 333px;
    display: block !important;
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    transition: 0.2s !important;
}

.big-hoverable :hover {
    cursor: pointer !important;
    transform: scale(1.01) !important;
}

.filter-section {
    position: absolute !important;
}

.clear-filter-button {
    background-color: var(--mud-palette-action-default) !important;
}

.default-fab {
    background-color: var(--mt-raised) !important;
    border:1px solid var(--mud-palette-action-default) !important;
}

.bg-color {
    background-color: var(--mud-palette-background) !important
}

.disabled-td p {
    color: gray !important;
}

.mt-tabs {
    border-top-right-radius: var(--mud-default-borderradius);
    border-top-left-radius: var(--mud-default-borderradius);
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.bluesky-wrapper {
    height: 60px;
    width: 60px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.bluesky-wrapper:hover {
    background-color: rgb(from var(--mud-palette-info) r g b / 12%);
    cursor: pointer;
}

.flex {
    display: flex !important;
}

.justify-center{
    justify-content: center;
}

.align-center{
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-end {
    display: flex;
    align-items: end;
}

.flex-right {
    margin-left: auto !important;
}

.flex-left {
    margin-right: auto !important;
}

.filled-card-header {
    background-color: var(--mt-raised);
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
    margin: -16px;
    padding: 1rem;
    position: relative;
}

.filled-card-body{
    margin-top: 2rem;
    position: relative;
}

.profile-banner-premium {
    
}

.pb-foil {
    background-size: 1800% 1800% !important;
    background: linear-gradient(124deg, rgb(255, 36, 0, 0.3), rgb(232, 29, 29, 0.3), rgb(232, 183, 29, 0.3), rgb(227, 232, 29, 0.3), rgb(29, 232, 64, 0.3), rgb(29, 221, 232, 0.3), rgb(43, 29, 232, 0.3), rgb(221, 0, 243, 0.3), rgb(221, 0, 243, 0.3));
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}

.pb-mythic {
    background-size: 1800% 1800% !important;
    background: linear-gradient(124deg, rgb(255, 42, 0, 0.3), rgb(235, 32, 0, 0.3), rgb(255,168,0, 0.3), rgb(232, 183, 29, 0.3), rgb(232, 183, 29, 0.3), rgb(227, 232, 0, 0.3));
    -webkit-animation: rainbow 10s ease infinite;
    -z-animation: rainbow 10s ease infinite;
    -o-animation: rainbow 10s ease infinite;
    animation: rainbow 10s ease infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}

.profile-banner-emblem {
    font-size: 108px !important;
    position: absolute;
    right: 32px;
    top: 32px;
    opacity: .66;
}

.profile-stats-grid-custom {
    font-family: var(--font-sans);
}

.profile-stats-grid .stats-item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    margin-top: 2px;
    font-size: 14px;
    font-family: var(--font-sans);
}

.profile-stats-grid svg,
.profile-stats-grid .mud-icon-root {
    margin-right: 0.275rem;
}

.profile-stats-grid-custom svg,
.profile-stats-grid-custom .mud-icon-root {
    margin-right: 0.275rem;
}

.profile-stats-grid-stat {
    font-size: 1.275rem !important;
    margin-left: 4px;
}

.player-stat-section {
    border: 1px solid var(--mud-palette-divider);
    padding-left: 4px;
    padding-right: 4px;
    padding-block: 3px;
}

/* a headline number that sizes itself (e.g. a play time in a stat card) */
.mt-big-value {
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.widget-text {
    font-family: var(--font-sans) !important;
    font-size: 4.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.discord-brand-link {
    padding-left: 12px;
    padding-right: 12px;
    transition: all .2s ease;
    filter: grayscale(10%);
}

.discord-shoutout {
    padding-left: 5rem;
    padding-right: 5rem;
}

.discord-brand-link-wrapper:hover {
    cursor: pointer;
}

.discord-brand-link-wrapper:hover .discord-brand-link {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transform: scale(1.01);
}

    .discord-brand-link-wrapper:hover .hover-underline::before {
        transform: scaleX(1);
    }
    
    .discord-brand-link-wrapper:hover .hover-underline::after {
        transform: scaleX(1);
    }

.hover-underline {
    position: relative;
    display: inline-block;
}

    .hover-underline::after,
    .hover-underline::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary));
        bottom: -4px;
        left: 0;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease-out;
    }

.hover-underline::before {
    top: -4px;
    transform-origin: left;
}

.deck-card {
    position: relative;
    border-radius: var(--mud-default-borderradius);
    transition: all .1s ease-in-out;
    border: 1px solid var(--mt-line-strong);
}

.deck-card-body {
    padding: 12px;
}

.deck-card:hover {
    cursor: pointer;
    border: 1px solid var(--mt-primary-outline) !important;
}

.discord-card {
    height: 100%;
    background-color: var(--mt-card);
    border-radius: var(--mud-default-borderradius);
    min-height: 136px;
    border: 1px solid var(--mt-line-strong);
    transition: all .1s ease-in-out;
}

.discord-card:hover {
    cursor: pointer;
    background-color: var(--mt-raised);
    border: 1px solid var(--mt-primary-outline) !important;
}

.discord-card-body {
    padding: 0px 16px 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--mud-default-borderradius);
}

.discord-card-header {
    padding: 12px 16px 12px 16px;
}

.discord-card-footer {
    padding: 12px 16px 12px 16px;
    display: flex;
    flex-wrap: wrap;
}

.discord-ad-card {
    border-radius: var(--mud-default-borderradius);
    min-height: 164px;
    height: 100%;
    border: 1px solid var(--mt-line-strong);
    background-position: center;
    position: relative;
    background-image: linear-gradient(155deg, rgba(22, 14, 88, 0.9) 30%, rgba(61, 0, 20, 0.9) 80%), url(https://cards.scryfall.io/art_crop/front/8/a/8a28c1e8-1969-40bc-a6fb-5494b88eb9ac.jpg?1680464068);
    transition: all .1s ease-in-out !important;
}

    .discord-ad-card:hover {
        cursor: pointer;
        border: 1px solid var(--mud-palette-primary) !important;
    }

.online-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    background-color: #0fcc45;
    border-radius: 50%;
    position: relative;
}

.queue-indicator {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background-color: #f0c000;
    border-radius: 50%;
    position: relative;
}

.blink {
    display: block;
    width: 12px;
    height: 12px;
    background-color: #0fcc45;
    opacity: 0.7;
    border-radius: 50%;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    100% {
        transform: scale(2, 2);
        opacity: 0;
    }
}

.dice-select .mud-input-slot {
    display: flex !important;
}

.dice-select-item p {
    display: flex !important;
}

.no-long-tap {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.achievement {
    border-radius: var(--mud-default-borderradius);
    height: 44px;
    width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.achievement-icon-container {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    width: 36px;
    border-radius: 4px;
    border: 2px solid var(--mud-palette-surface);
}

    .achievement-icon-container svg {
        /*margin-top: 4px;*/
    }

.achievements-grid {
    margin: auto;
}

.achievement-see-all-link {
    border: 3px solid var(--mud-palette-text-primary);
    background-color: transparent;
    transition: 0.4s;
}

    .achievement-see-all-link:hover {
        cursor: pointer !important;
        border: 3px solid var(--mud-palette-text-primary);
        background-color: var(--mud-palette-text-primary);
        color: var(--mud-palette-surface);
    }

.locked-achievement {
    background-color: var(--mud-palette-grey-dark);
}

.common {
    background-color: var(--mud-palette-info);
}

.uncommon {
    background-color: var(--mud-palette-tertiary);
}

.rare {
    background-color: var(--mud-palette-warning);
}

.mythic {
    background: linear-gradient(-45deg, #f44336ff, rgb(255, 162, 31), #f44336ff, rgb(218, 112, 38), rgb(255, 162, 31), #f44336ff, rgb(218, 112, 38), #f44336ff, rgb(218, 112, 38));
    background-size: 200% 200%;
    animation: mythicAchievement 4s ease infinite;
}

@keyframes mythicAchievement {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media only screen and (min-width: 900px) and (max-width:1800px) {
    .widget-text {
        font-size: 3vw;
        text-align: center;
    }
}

/*LOADING SPINNER*/
.spinner {
    animation: rotator 1.4s linear infinite;
}

.login-image {
    background-size: 105%;
    border-top-right-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
}

.register-image {
    background-size: 115%;
    border-top-right-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
}

.foil {
    background-image: linear-gradient( -225deg, var(--mud-palette-text-primary) 0%, var(--mud-palette-text-primary) 45%, #fff 50%, var(--mud-palette-text-primary) 75%, var(--mud-palette-text-primary) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    font-weight: bold;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

.bold {
    font-weight: bold !important;
}

.italic {
    font-style: italic !important;
}

@keyframes colors {
    0% {
        stroke: rgba(119, 107, 231, 1);
    }

    25% {
        stroke: rgba(255, 64, 129, 1);
    }

    50% {
        stroke: rgba(119, 107, 231, 1);
    }

    75% {
        stroke: rgba(255, 64, 129, 1);
    }

    100% {
        stroke: rgba(119, 107, 231, 1);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}

@keyframes shakeX {
    from, to {
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shakeX {
    animation: .5s shakeX ease-in-out;
}

.fade-me-0_5s {
    animation: fadeIn 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeIn 0.5s;
}

.fade-me-0_3s {
    animation: fadeIn 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeIn 0.3s;
}

.fade-me-1s {
    animation: fadeIn 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeIn 1s;
}

.fade-me-3s {
    animation: fadeIn 1s;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-me-out-1s {
    animation: fadeout 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeout 1s;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.mud-charts-xaxis text{
    font-size: 30px;
}

.ms-2::before{
    content: unset !important;
}

.ms-small{
    font-size: 13px !important;
}
/*.mana.shr.large { width: 2em; }*/
.shadow {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=-1, OffY=1, Color='#000')";
    filter: url(#shadow);
    -webkit-filter: drop-shadow(-1px 1px 0px #000);
    filter: drop-shadow(-1px 1px 0px #000);
}

.inline-badge-default {
    border-radius: 4px;
    background-color: var(--mt-raised);
    padding-inline: 8px;
    padding-block: 4px;
    font-weight: bold;
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    font-family: var(--font-mono) !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.inline-badge {
    border-radius: 4px;
    background-color: var(--mud-palette-primary);
    padding-inline: 8px;
    padding-block: 4px;
    font-weight: bold;
    color: var(--mud-palette-white);
    font-size: 0.75rem;
    font-family: var(--font-mono) !important;
    white-space: nowrap;
}

.inline-badge-secondary {
    border-radius: 4px;
    background-color: var(--mud-palette-secondary);
    padding-inline: 8px;
    padding-block: 4px;
    font-weight: bold;
    color: var(--mud-palette-white);
    font-size: 0.75rem;
}

.inline-badge-inverted {
    border-radius: 4px;
    background-color: rgba(var(--mt-page-rgb), .5);
    border: 1px solid;
    padding-inline: 8px;
    padding-block: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    font-family: var(--font-mono) !important;
    white-space: nowrap;
}

.blur {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.blur-light {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tooltip-background {
    background: rgb(from var(--mt-raised) r g b / 88%) !important;
}

.dialog-background {
    background: rgb(from var(--mud-palette-surface) r g b / 75%) !important;
}

.dialog-background-title {
    background: var(--mud-palette-primary) !important;
    color: white !important;
    opacity: .85;
    height: 64px;
}

.dialog-background-surface {
    background: rgb(from var(--mud-palette-surface) r g b / 75%);
}

/*Mud overrid*/
.badge-dark > svg {
    fill: var(--mud-palette-surface) !important;
}

.badge-dark > .mud-icon-root {
    color: var(--mud-palette-surface) !important;
}

.mud-avatar > .mud-image {
    width: auto !important;
}

.mud-dialog-container {
    overflow: auto;
}



.mud-table-cell {
    padding: 8px !important;
}

.fence-pattern {
    --s: 42px; /* control the size*/
    --c1: #88abc222;
    --c2: #fad3b2ff;
    --g: #0000 45%,var(--c1) 46% 54%,#0000 55%;
    background: linear-gradient( 60deg,var(--g)), linear-gradient(-60deg,var(--g)) var(--c2);
    background-size: var(--s) calc(tan(60deg)*var(--s));
}

.graph-paper-pattern {
    --s: 72px; /* control the size*/
    --c1: #ffffff11;
    --c2: #ffffff00;
    --_g: #0000 90deg,var(--c1) 0;
    background: conic-gradient(from 90deg at 2px 2px,var(--_g)), conic-gradient(from 90deg at 1px 1px,var(--_g)), var(--c2);
    background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
    background-position: 36px;
}

.hearts-pattern {
    --s: 64px; /* control the size*/
    --c1: #e7525b33;
    --c2: #ffffff00;
    --_g: 80%,var(--c1) 25.4%,#0000 26%;
    background: radial-gradient(at 80% var(--_g)), radial-gradient(at 20% var(--_g)), conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) calc(var(--s)/2) 0;
    background-size: var(--s) var(--s);
}

.cubic-pattern {
    --s: 100px; /* control the size*/
    --c1: #1d1d1daa;
    --c2: #4e4e4e99;
    --c3: #3c3c3c;
    background: repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2), repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
    background-size: var(--s) calc(var(--s)*tan(30deg));
}

.rotate-3d-effect {
    animation: rotateAnimation 5s linear infinite;
}

.icon-glow {
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}

@keyframes rotateAnimation {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes rotateAnimation {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.overflow-hidden {
    overflow: hidden;
}

/*animated tiles*/
.ms-default-floater {
    background-color: rgb(255, 255, 255, 0.33);
    border-radius: 16px;
}

.floater-effect {
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 2;
}

    .floater-effect li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        animation: tile-spin 25s linear infinite;
        -webkit-animation: tile-spin 25s linear infinite;
        bottom: -150px;
    }

        .floater-effect li:nth-child(1) i {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            font-size: 70px;
        }


        .floater-effect li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            -webkit-animation-delay: 2s;
            animation-duration: 12s;
            -webkit-animation-duration: 12s;
            font-size: 30px;
        }

        .floater-effect li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
            -webkit-animation-delay: 4s;
            font-size: 20px;
        }

        .floater-effect li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            animation-duration: 18s;
            -webkit-animation-duration: 18s;
            font-size: 60px;
        }

        .floater-effect li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            font-size: 40px;
        }

        .floater-effect li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            font-size: 110px;
        }

        .floater-effect li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
            -webkit-animation-delay: 7s;
            font-size: 150px;
        }

        .floater-effect li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            -webkit-animation-delay: 15s;
            animation-duration: 45s;
            -webkit-animation-duration: 45s;
            font-size: 25px;
        }

        .floater-effect li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            -webkit-animation-delay: 2s;
            animation-duration: 35s;
            -webkit-animation-duration: 35s;
            font-size: 15px;
        }

        .floater-effect li:nth-child(10) {
            left: 85%;
            width: 100px;
            height: 100px;
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            animation-duration: 11s;
            -webkit-animation-duration: 11s;
            font-size: 100px;
        }

@keyframes tile-spin {

    0% {
        transform: translateY(0);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-80vh);
        opacity: 0;
        border-radius: 50%;
    }
}

@-webkit-keyframes tile-spin {

    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        -webkit-transform: translateY(-80vh);
        opacity: 0;
        border-radius: 50%;
    }
}


@media (prefers-reduced-motion: no-preference) {
    .scale-up-on-scroll {
        will-change: transform;
        animation: scale-a-lil linear both;
        -webkit-animation: scale-a-lil linear both;
        animation-timeline: view();
        -webkit-animation-timeline: view();
        animation-range: 20vh 60vh;
        -webkit-animation-range: 20vh 60vh;
    }
}

@keyframes scale-a-lil {
    from {
        scale: .8;
        opacity: .5;
    }
}

@-webkit-keyframes scale-a-lil {
    from {
        scale: .8;
        opacity: .5;
    }
}


@media (prefers-reduced-motion: no-preference) {
    .fade-in-on-scroll {
        will-change: transform;
        animation: fade-scroll linear both;
        -webkit-animation: fade-scroll linear both;
        animation-timeline: view();
        -webkit-animation-timeline: view();
        animation-range: 20vh 45vh;
        -webkit-animation-range: 20vh 45vh;
    }
}

@keyframes fade-scroll {
    from {
        opacity: 0.1;
    }
}

@-webkit-keyframes fade-scroll {
    from {
        opacity: 0.1;
    }
}


@media (prefers-reduced-motion: no-preference) {
    .slide-left-on-scroll {
        will-change: transform;
        animation: slide-from-right linear both;
        -webkit-animation: slide-from-right linear both;
        animation-timeline: view();
        -webkit-animation-timeline: view();
        animation-range: 10vh 40vh;
        -webkit-animation-range: 10vh 40vh;
    }
}

@keyframes slide-from-right {
    from {
        transform: translateX(48px);
        opacity: 0.1;
    }
}

@-webkit-keyframes slide-from-right {
    from {
        -webkit-transform: translateX(48px);
        opacity: 0.1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .slide-right-on-scroll {
        will-change: transform;
        animation: slide-from-left linear both;
        -webkit-animation: slide-from-left linear both;
        animation-timeline: view();
        -webkit-animation-timeline: view();
        animation-range: 10vh 40vh;
        -webkit-animation-range: 10vh 40vh;
    }
}

@keyframes slide-from-left {
    from {
        transform: translateX(-48px);
        opacity: 0.1;
    }
}

@-webkit-keyframes slide-from-left {
    from {
        -webkit-transform: translateX(-48px);
        opacity: 0.1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .slide-fade-up {
        will-change: transform;
        animation: slide-fade-up linear both;
        -webkit-animation: slide-fade-up linear both;
        animation-timeline: view();
        -webkit-animation-timeline: view();
        animation-range: 10vh 30vh;
        -webkit-animation-range: 10vh 30vh;
    }
}

@keyframes slide-fade-up {
    from {
        transform: translateY(48px);
        opacity: 0.33;
    }
}

@-webkit-keyframes slide-fade-up {
    from {
        -webkit-transform: translateY(48px);
        opacity: 0.33;
    }
}



.fastFadeDown {
    animation: fastFadeDown .33s;
    -webkit-animation: fastFadeDown .33s;
}

@keyframes fastFadeDown {
    from {
        opacity: 0;
        transform: translate3d(0, -3px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fastFadeDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -3px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}



.fadeInDown {
    animation: fadeInDown .5s;
    -webkit-animation: fadeInDown .5s;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation: fadeInUp 1s;
    -webkit-animation: fadeInUp 1s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@media only screen and (max-width: 764px) {
    .app-bar-link {
        display: none !important;
    }

    .main-title {
        font-size: 18px !important;
    }

    .hover-underline{
        font-size: 12px !important;
    }

    .discord-shoutout {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .no-min-w{
        min-width: unset !important;
    }

    .partner-image.split {
        height: 400px;
    }

    .wrapped-legend-button {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

        .wrapped-legend-button svg,
        .wrapped-legend-button .mud-icon-root {
            font-size: 1.25rem !important;
        }
}

@media only screen and (max-width: 400px) {
    .main-title {
        display: none !important;
    }

    .header-logo {
        height: 32px;
        width: auto;
        padding-right: 6px;
    }

    .lt-buttons-container {
        align-items: start !important;
        transform: translateY(-2vw);
    }
}

.dialog-root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: white;
    overflow: hidden;
    z-index: 1300; /* higher than app bar */
}

.lt-dialog-body {
    flex: 1;
    overflow: auto;
    margin-top: 48px;
    overflow: hidden;
}


/*life tracker*/
.four-player-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 0.25rem;
    box-sizing: border-box;
    grid-template-areas:
        "player0 player1"
        "player2 player3";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid-player {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.grid-player0 {
    grid-area: player0;
}

.grid-player1 {
    grid-area: player1;
}

.grid-player2 {
    grid-area: player2;
}

.grid-player3 {
    grid-area: player3;
}

.player-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgb(255,255,255,0.1);
    border-radius: var(--mud-default-borderradius);
}

.lt-wrapper {
    position: relative;
    z-index: 0;
    max-width: max-content;
    max-height: max-content;
}

.fs-stretch {
    width: 100dvmax;
    height: calc(100dvmin - 48px);
    overflow: hidden;
}

.lt-background {
    width: 100%;
    height: 100%;
    background-color: var(--mud-palette-surface);
}

.lt-buttons-container {
    align-items: center;
}

.player-rotate-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.frame-0, .frame-1, .cd-1 {
    transform: rotate(180deg);
}
.frame-2, .frame-3, .cd-2 {
    transform: rotate(0deg);
}

@media (orientation: portrait) {
    .rotate-portrait {
        transform: rotate(90deg);
    }

    .fs-stretch {
        width: calc(100dvmax - 48px) !important;
        height: 100dvmin !important;
        overflow: hidden;
    }

    .cd-1 {
        transform: rotate(270deg);
    }
    .cd-2 {
        transform: rotate(90deg);
    }
}


/* Split version for users with 2 images */
.partner-image.split {
    position: relative;
}

    .partner-image.split .partner-1 {
        position: absolute;
    }

    .partner-image.split .partner-2 {
        position: absolute;
        -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    }

        .partner-2:hover {
            position: absolute;
            -webkit-clip-path: none !important;
            clip-path: none !important;
        }

.partner-1:hover {
    z-index: 1;
}

.compare-less{
    color: var(--mud-palette-error) !important;
}

.compare-more {
    color: var(--mud-palette-success) !important;
}

.compare-card-highlight {
    background-color: rgba(var(--mud-palette-success-rgb), 0.1) !important;
    border: 2px rgba(var(--mud-palette-success-rgb), 1) solid !important;
}

/* apex injects ".apexcharts-tooltip * { font-family: inherit }" at runtime, which ties on
   specificity with the mana font's ".ms" rule and wins by load order - the pip keeps its
   background but the glyph falls back to a font with nothing at that codepoint (blank box).
   Same guard on the legend in case apex ever does the same there. */
.apexcharts-tooltip .ms,
.apexcharts-tooltip .ms::before,
.apexcharts-legend .ms,
.apexcharts-legend .ms::before {
    font-family: Mana !important;
}

/* ---- flashback (the year in review, HighlightReelModal) ----
   A full-screen deck of slides, staged like a poster rather than a page: each slide has its own mood (a fixed
   plum/wine backdrop lit by the slide's accent), one huge number, and an entrance when it comes on screen.
   The flashback deliberately does NOT follow the user's app theme - it's an event, and a shared slide should
   look the same for everyone - so .fb-root pins the surface tokens that the components inside it read.
   A slide is also what gets shared as an image, so each one paints its own background and names the year.
   --fb-accent is a slide's accent color, set by a .fb-tone-* class (or inline, for the color of the year). */
.dialog-root.fb-root {
    --fb-base: #120D18;
    --fb-base-rgb: 18, 13, 24;
    --mt-page: #120D18;
    --mt-card: #1E1726;
    --mt-raised: #2A2034;
    --mt-page-rgb: 18, 13, 24;
    --mud-palette-background: #120D18;
    --mud-palette-background-gray: #1E1726;
    --mud-palette-surface: #1E1726;
    background-color: var(--fb-base);
    border: 0;
}

/* frosted bar, so a slide that scrolls passes under it instead of through its text */
.dialog-root.fb-root > .mud-appbar {
    background-color: rgba(var(--fb-base-rgb), .55) !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.fb-path {
    margin-left: 12px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--mt-text-dim);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fb-tone-violet { --fb-accent: #8E83F0; }
.fb-tone-blue   { --fb-accent: #5AB4FF; }
.fb-tone-gold   { --fb-accent: #E5C07B; }
.fb-tone-green  { --fb-accent: #5FD38D; }
.fb-tone-orange { --fb-accent: #E8964A; }
.fb-tone-red    { --fb-accent: #F07178; }
.fb-tone-pink   { --fb-accent: #D471C1; }

/* the backdrop: the accent's glow in one corner, wine in the opposite one, over an indigo -> plum -> wine sweep */
.fb-slide {
    --fb-glow-at: 12% 6%;
    --fb-wine-at: 100% 100%;
    overflow: auto;
    color: var(--mt-text);
    background-color: var(--fb-base);
    background-image:
        radial-gradient(ellipse 95% 55% at var(--fb-glow-at), color-mix(in srgb, var(--fb-accent, #8E83F0) 32%, transparent), transparent 70%),
        radial-gradient(ellipse 85% 60% at var(--fb-wine-at), rgba(128, 32, 74, .42), transparent 70%),
        linear-gradient(176deg, #1E1836 0%, var(--fb-base) 55%, #2A1022 100%);
}

.fb-glow-flip {
    --fb-glow-at: 88% 6%;
    --fb-wine-at: 0% 100%;
}

/* card art across the top (--fb-art, set inline), fading into the backdrop */
.fb-slide.fb-slide-art {
    background-image:
        linear-gradient(180deg, rgba(var(--fb-base-rgb), .50) 0%, rgba(var(--fb-base-rgb), .84) 30%, var(--fb-base) 54%),
        radial-gradient(ellipse 85% 60% at 100% 100%, rgba(128, 32, 74, .42), transparent 70%),
        var(--fb-art, none),
        linear-gradient(176deg, #1E1836 0%, var(--fb-base) 55%, #2A1022 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto, auto, max(100%, 720px) auto, auto;
}

/* the color of the year: the whole slide washed in it */
.fb-slide.fb-slide-color {
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 34%, color-mix(in srgb, var(--fb-accent) 42%, transparent), transparent 72%),
        radial-gradient(ellipse 85% 60% at 100% 100%, rgba(128, 32, 74, .38), transparent 70%),
        linear-gradient(176deg, color-mix(in srgb, var(--fb-accent) 14%, #1E1836) 0%, var(--fb-base) 60%, #2A1022 100%);
}

/* the bookends keep the original flashback's plum -> wine sweep */
.fb-slide.fb-slide-intro,
.fb-slide.fb-slide-summary {
    background-image:
        radial-gradient(ellipse 90% 55% at 50% 0%, color-mix(in srgb, var(--fb-accent) 34%, transparent), transparent 70%),
        linear-gradient(176deg, #262345 15%, #451D31 100%);
}

.fb-slide-body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}

    /* the CRT overlay (CrtOverlay) at the flashback's strength: faint light lines only - the backdrops are
       already dark, and a shared slide has no hover */
    .fb-slide-body > .mt-crt {
        --crt-light: rgba(255, 255, 255, .018);
        --crt-dark: transparent;
        --crt-vignette: transparent;
    }

/* the slide number, huge and outlined, behind everything */
.fb-watermark {
    position: absolute;
    top: 40px;
    right: -0.06em;
    font-family: var(--font-mono);
    font-size: clamp(10rem, 4rem + 30vw, 24rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fb-accent) 24%, transparent);
    pointer-events: none;
    user-select: none;
}

.fb-glow-flip .fb-watermark {
    right: auto;
    left: -0.04em;
}

.fb-slide-content {
    position: relative;
    flex: 1 0 auto;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 88px 20px 0; /* the top clears the app bar, which floats over the slide */
    text-align: center;
}

/* the bottom margin keeps the brand mark clear of the carousel's dots */
.fb-slide-footer {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
    padding: 32px 0 4px;
}

.fb-eyebrow {
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
    text-transform: lowercase;
    color: var(--mt-text-dim);
}

.fb-eyebrow-mark {
    color: var(--fb-accent);
}

.fb-headline {
    margin: 0;
    font-size: clamp(1.9rem, 1.2rem + 3vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.fb-sub {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--mt-text-dim);
}

/* the slide's one big number */
.fb-hero {
    margin-top: 40px;
}

.fb-hero-value {
    font-size: clamp(5rem, 2.5rem + 15vw, 10rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
    color: var(--fb-accent);
    text-shadow: 0 0 56px color-mix(in srgb, var(--fb-accent) 45%, transparent);
}

/* a play time like "1d 4hr 12min" is too wide for the full size */
.fb-hero-value.fb-hero-value-long {
    font-size: clamp(2.75rem, 1.4rem + 7vw, 5.5rem);
    letter-spacing: -0.04em;
}

.fb-hero-label {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    line-height: 1.5;
    text-transform: lowercase;
    color: var(--mt-text-body2);
}

/* the supporting numbers, side by side under the big one */
.fb-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    margin-top: 36px;
}

.fb-fact {
    flex: 0 1 auto;
    padding: 0 24px;
}

    .fb-fact + .fb-fact {
        border-left: 1px solid var(--mt-line-strong);
    }

.fb-fact-value {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.fb-fact-label {
    max-width: 22ch;
    margin: 6px auto 0;
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
    text-transform: lowercase;
    color: var(--mt-text-dim);
}

/* a count-up number: the real value (Blazor's) and the ticking one (flashback.js) share one grid cell, so
   the real value holds the space while the count runs and is all that's left when it stops */
.fb-count {
    display: inline-grid;
    justify-items: center;
}

    .fb-count > span {
        grid-area: 1 / 1;
    }

.fb-count-out,
.fb-count[data-counting] .fb-count-src {
    visibility: hidden;
}

.fb-count[data-counting] .fb-count-out {
    visibility: visible;
}

/* ranked rows: "01  Atraxa ...... 12", with a bar showing the count against the top entry's */
.fb-rank {
    max-width: 460px;
    margin: 36px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.fb-rank-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--mt-line);
}

    .fb-rank-row::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: var(--w, 0%);
        height: 2px;
        background-color: var(--fb-accent);
        opacity: .75;
        transform-origin: left center;
    }

    .fb-rank-row .mud-typography {
        margin: 0;
    }

.fb-rank-n {
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--mt-text-faint);
}

.fb-rank-row:first-child .fb-rank-n,
.fb-rank-row:first-child .fb-rank-count {
    color: var(--fb-accent);
}

.fb-rank-name {
    min-width: 0;
}

.fb-rank-count {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mt-text);
}

/* intro */
.fb-intro {
    padding-top: 6vh;
}

    .fb-intro-name .flex-center {
        justify-content: center;
    }

.fb-intro-year {
    margin: 8px 0 4px;
    font-size: clamp(6rem, 2rem + 24vw, 14rem);
    font-weight: 700;
    line-height: .85;
    letter-spacing: -0.065em;
    color: transparent;
    background-image: linear-gradient(170deg, #ECE8F2 12%, #8E83F0 55%, #D471C1 96%);
    -webkit-background-clip: text;
    background-clip: text;
}

.fb-intro-label {
    margin-bottom: 36px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    text-transform: lowercase;
    letter-spacing: .04em;
    color: var(--mt-text-dim);
}

.fb-cursor {
    display: inline-block;
    width: .6em;
    height: 1.1em;
    margin-left: 4px;
    vertical-align: -0.2em;
    background-color: var(--fb-accent);
    animation: fb-blink 1.1s steps(1) infinite;
}

/* color of the year */
.fb-color-pip {
    margin: 40px 0 0;
    line-height: 1;
    filter: drop-shadow(0 0 48px color-mix(in srgb, var(--fb-accent) 60%, transparent));
}

    .fb-color-pip .ms {
        font-size: clamp(7rem, 4rem + 14vw, 10rem) !important;
    }

.fb-color-name {
    margin-top: 20px;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--fb-accent);
}

.fb-slide-color .fb-facts {
    margin-top: 20px;
}

.fb-achievements {
    max-width: 380px;
    margin: 32px auto 0;
}

.fb-summary {
    max-width: 440px;
    margin: 4px auto 0;
    text-align: left;
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 30px 90px -24px color-mix(in srgb, var(--fb-accent) 55%, transparent);
}

.fb-summary-label {
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: .75rem;
    text-transform: lowercase;
    letter-spacing: .04em;
    color: var(--mt-text-dim);
}

/* ---- the entrance: plays each time a slide comes on screen (HighlightReelSlide adds .fb-in).
   --i staggers the pieces. A slide being shared gets data-settled, which skips straight to the end. */
.fb-in .fb-anim {
    animation: fb-rise .7s cubic-bezier(.2, .75, .25, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms + 60ms);
}

.fb-in .fb-hero.fb-anim,
.fb-in .fb-color-pip.fb-anim,
.fb-in .fb-intro-year.fb-anim {
    animation-name: fb-pop;
    animation-duration: .9s;
}

.fb-in .fb-rank-row::after {
    animation: fb-grow 1s cubic-bezier(.2, .75, .25, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms + 320ms);
}

.fb-in .fb-watermark {
    animation: fb-drift 1.4s cubic-bezier(.2, .75, .25, 1) both;
}

[data-settled] .fb-anim,
[data-settled] .fb-rank-row::after,
[data-settled] .fb-watermark {
    animation: none !important;
}

@keyframes fb-rise {
    from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

@keyframes fb-pop {
    from { opacity: 0; transform: scale(.82); filter: blur(12px); }
    to   { opacity: 1; transform: none; filter: none; }
}

@keyframes fb-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes fb-drift {
    from { opacity: 0; transform: translateX(6%); }
    to   { opacity: 1; transform: none; }
}

@keyframes fb-blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fb-in .fb-anim,
    .fb-in .fb-rank-row::after,
    .fb-in .fb-watermark,
    .fb-cursor {
        animation: none !important;
    }
}

@media only screen and (max-width: 600px) {
    .fb-slide-content {
        padding-top: 76px;
    }

    .fb-fact {
        padding: 0 16px;
    }

    /* clear of the carousel's prev / next arrows */
    .fb-rank {
        padding: 0 22px;
    }
}