:root {
    /*
     Consolidated design tokens for the UI.
     Use these variables across components instead of hard-coded values.
     Naming: --color-*, --space-*, --radius-*, --shadow-*, --z-*, --size-*.
    */

    /* Colors */
    --theme-color-primary: #1b6ec2;
    --theme-color-primary-700: #1861ac;
    --theme-color-accent: #258cfb;
    --theme-color-danger: #b32121;
    --theme-color-text: #ffffff;
    --theme-color-text-muted: #e5e7eb;
    --theme-color-bg: #1f2937;        /* app background */
    --theme-color-surface: #111827;   /* surface/panels */
    --theme-color-border: rgba(255,255,255,0.06);
    --theme-color-border-bottom: rgba(255,255,255,0.08);
    --theme-color-border-top: rgba(255,255,255,0.08);
    --theme-card-background:  linear-gradient(180deg, var(--theme-color-bg) 0%, var(--theme-color-surface) 100%);

    /* Typography */
    --font-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

    /* Spacing scale */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Shadows */
    --theme-shadow-1: 0 2px 8px rgba(0,0,0,0.35);
    --theme-shadow-2: 0 10px 25px rgba(0,0,0,0.45);
    --theme-shadow-inset-1: inset 0 1px 0 rgba(255,255,255,0.05);
    
    /* Queing colors */
    --queuing-box-shadow-green: rgba(0,128,0,0.9);
    --queuing-box-shadow-red: rgba(128, 0, 0, 0.9);

    /* Component-specific (existing) vars */
    --match-height: 5.5vw;
    --alliance-font-size: 0.7vw;
    --alliance-padding: 0.55vw;
    --alliance-border: 1px;
    --alliance-gap: 0.25vw;
    --alliance-middle: calc(
            var(--alliance-font-size) + var(--alliance-padding) * 2 + var(--alliance-border) * 2 + var(--alliance-gap) * 0.5
    );
    --bracket-border: 0.12vw;
    --alliance-blue-background: darkblue;
    --alliance-red-background: darkred;
    
    /*--team-row-background:linear-gradient(180deg, #2c354e 0%, #111827 100%)*/
    --team-row-background:linear-gradient(180deg, #d4ddf5 0%, #577fd4 100%);

    --event-text-shadow:
            0 -1px 0 #fff,
            0 1px 0 #2e2e2e,
            0 2px 0 #2c2c2c,
            0 3px 0 #2a2a2a,
            0 4px 0 #282828,
            0 5px 0 #262626,
            0 6px 0 #242424,
            0 7px 0 #222,
            0 8px 0 #202020,
            0 9px 0 #1e1e1e,
            0 10px 0 #1c1c1c,
            0 11px 0 #1a1a1a,
            0 12px 0 #181818,
            0 13px 0 #161616,
            0 14px 0 #141414,
            0 15px 0 #121212,
            0 22px 30px rgba(0, 0, 0, 0.9);
}
    
    .up-next-card {
    /*width: 95%;*/

    background-color: #666666;
}
:root, html, body {
    color: var(--theme-color-text);
}
[data-theme="light"]{
    --theme-color-primary: #1b6ec2;
    --theme-color-primary-700: #1861ac;
    --theme-color-accent: #258cfb;
    --theme-color-danger: #b32121;
    --theme-color-text: #000000;
    --theme-color-text-muted: #3f3f42;
    --theme-color-bg: #f8fafc;        /* app background */
    --theme-color-surface: #f1f5f9;   /* surface/panels */
    --theme-color-border: rgba(0,0,0,0.1);
    --theme-color-border-bottom: rgba(0,0,0,0.08);
    --theme-color-border-top: rgba(0,0,0,0.08);
    --theme-card-background:  linear-gradient(180deg, var(--theme-color-bg) 0%, var(--theme-color-surface) 100%);

    /* Shadows */
    --theme-shadow-1: 0 2px 8px rgba(0,0,0,0.05);
    --theme-shadow-2: 0 10px 25px rgba(0,0,0,0.08);
    --theme-shadow-inset-1: inset 0 1px 0 rgba(0,0,0,0.03);
    
    /* Queuing colors */
    --queuing-box-shadow-green: rgba(0,128,0,0.9);
    --queuing-box-shadow-red: rgba(128, 0, 0, 0.9);

    --team-row-background:linear-gradient(180deg, #d4ddf5 0%, #577fd4 100%)

}
body{
    background-color: var(--theme-color-bg);
}
/*
 Utilities and shared layout patterns
 These replace duplicated rules found in component-scoped CSS.
*/
.text-primary { color: var(--theme-color-accent) !important; }
.text-muted { color: var(--theme-color-text-muted) !important; }
.bg-app { background: var(--theme-color-bg) !important; }
.bg-surface { background: var(--theme-color-surface) !important; }

/* Header stays at top */
.app-header {
    position: sticky; /* optional: keep visible on scroll */
    top: 0;
    z-index: 1000;
    /*background: #fff; !* adjust *!*/
    /*border-bottom: 1px solid #e5e5e5;*/
    margin-top: 10px;
    justify-content: center;
    justify-items: center;
}

.app-header ::deep a, .top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.app-header ::deep a:hover, .top-row ::deep .btn-link:hover {
    text-decoration: none;
}

.app-header ::deep a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* App shell lays out header, main, footer vertically */
.app-shell {
    /*min-height: 100%;*/
    display: flex;
    flex-direction: column;
    background: var(--theme-color-bg);
    min-height: 100vh;
}



/* Main grows to fill space, scrolls if needed */
.app-content {
    flex: 1 1 auto;
    /*padding: 1rem;        !* adjust *!*/
    padding-bottom: 1rem;
    padding-right:1rem;
    padding-top:1rem;
    padding-left:1.5rem;
    overflow: auto;       /* allows internal scrolling when needed */
}

/* Footer stays at bottom when content is short */
.app-footer {
    flex: 0 0 auto;
    /*border-top: 1px solid #e5e5e5;*/
    /*background: #fff;     !* adjust *!*/
    padding: 0.75rem 1rem;
}


.event-name {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    font-weight: 1000;
    padding: 5px 5px;
    margin-top:5px;
    margin-bottom:5px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    letter-spacing: 5px;
    text-shadow: 
        0 6px 8px #E91C23, 
        0 12px 12px #0066B3;
}
.first-logo{
    height: 45px;
}

.card-surface {
    background: var(--theme-card-background);
    color: var(--theme-color-text-muted);
    border-radius: var(--radius-lg);
    border: 1px solid var(--theme-color-border);
    box-shadow: var(--theme-shadow-2), var(--theme-shadow-1), var(--theme-shadow-inset-1);
    padding: var(--space-sm) var(--space-sm);
}
.pageHeader{
    width: 96% !important;
}


.team-card {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "avatar"
        "number"
        "name";
    align-items: start;
    justify-items: center;
    padding: .5rem;
    border-radius: 6px;
    background: #1e1e1e;
    width: 140px; /* adjust as needed */
}

.team-card .avatar {
    grid-area: avatar;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.team-card .team-number {
    grid-area: number;
    font-weight: 600;
    margin-top: .25rem;
    font-size: 1.5rem;
}

.team-card .team-name {
    color:#fff;
    grid-area: name;
    font-size: 1rem;
    text-align: center;
    line-height: 1.05;
}
/* 3-column header/footer layout used by HeaderBar and FooterBar */
.grid-3-cols-center {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    width: 100%;
}
.grid-3-cols-center > :nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.fields {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: "left middle right";
    align-items: center;
    width: 100%;
}
.fields-left { grid-area: left; }
.fields-middle {
    grid-area: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.fields-right { grid-area: right; text-align: right; }

.bracket {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
}

.bracket .stub {
    height: 0;
    border-left: none;
    border-right: none;
    border-bottom: 0.12vw solid transparent;
}

.bracket .end {
    width: 20%;
    height: 100%;
    border: none;
}

.bracket > span {
    border: var(--bracket-border) solid rgb(80, 80, 80);
    width: 30%;
}

@keyframes redBoxPulse {
    0%, 100% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 0 rgba(255,0,0,0);
    }
    50% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 18px rgba(255,0,0,0.9);
    }
}
@keyframes greenBoxPulse {
    0% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 0 rgba(0,128,0,0);
    }
    50% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 18px rgba(0, 128, 0, 0.9);
    }
    100% { /* end in green */
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 18px rgba(0, 128, 0, 0.9);
    }
}
@keyframes greenBoxInsetPulse {
    0% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 0 rgba(0,128,0,0);
    }
    50% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 18px rgba(0, 128, 0, 0.9);
    }
    100% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 0 rgba(0,128,0,0.9) !important;
    }
}
@keyframes redBoxInsetPulse {
    0% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 0 rgba(255,0,0,0);
    }
    50% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 18px rgba(255,0,0,0.9);
    }
    100% {
        box-shadow:
                0 10px 25px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.05),
                inset 0 0 0 rgba(255,0,0,0.9) !important;
    }
}
.loader-shell { position: fixed; inset: 0; display: grid; place-items: center; background:#0b0b0b; z-index:9999; }
#lottie-flames { width: 200px; height: 200px; }

.boot-shell {
    position: fixed;
    inset: 0;
    background: #000;            /* black background only while index.html boot shell is visible */
    display: grid;
    place-items: center;
    z-index: 9999;
}



.up-next-layout {
    width: 90vw; /* 90% of viewport width */
    /*max-width: 1600px; !* optional: cap very wide screens *!*/
    margin: 0 auto; /* center horizontally */
    display: grid;
    grid-template-columns: 25% 1fr; /* first col 25%, second takes rest */
    grid-auto-rows: 1fr; /* single row stretch */
    gap: 1rem; /* space between columns */
    align-items: start; /* align content at top */
  
}

.up-next-info {
    /*    background: #1f2937;*/
    /*    padding: 5px;*/
    border-radius: 6px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 15px;
}

.up-next-alliances {
    /*    background: #111827;*/
    padding: .2rem;
    border-radius: 6px;
}
.up-next-label{
    font-size: 1.5vw;
    opacity: 0.8;
    font-weight: 300;
}
.queuing-shadow {
    text-shadow: 0 0 0 rgba(255, 0, 0, 0.0);
    animation: redShadowPulse 1.5s ease-in-out infinite;
}

@keyframes redShadowPulse {
    0%, 100% {
        text-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
    50% {
        text-shadow: 0 0 12px rgba(255, 0, 0, 0.9);
    }
}

.match-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas:
        "upNext upNext"
        "team   twitch"
        "all    twitch"
        "all  twitch";
    gap: 1rem;
    width: 98%;
    margin: 0 auto;
    max-height:84vh;
}

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

.grid-team {
    grid-area: team;
    max-width: 730px;
    min-width: 685px;
    /*overflow: auto;*/
}
.grid-all {
    grid-area: all;
    max-width: 730px;
    min-width: 685px;
    /*overflow: auto;*/
}

.grid-twitch {
    grid-area: twitch;
    overflow: auto;
}

/*
 Qualification screen on a 1080p TV: the page fits the viewport (no scrolling),
 the match tables keep a fixed readable width, and the stream takes everything else
 at 16:9 (capped by the available height on very wide screens).
*/
@media (min-width: 901px) {
    .app-shell.fit-screen {
        height: 100vh;
        min-height: 0;
    }

    body:has(.fit-screen) {
        margin: 0;
        height: 100vh;
        overflow: hidden;
    }
}

.fit-screen .app-footer {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.fit-screen .app-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-right: 0.75rem;
}

.match-grid.qual-grid {
    grid-template-columns: minmax(624px, max-content) minmax(0, 1fr); /* left column is as wide as the widest match table needs */
    grid-template-rows: auto auto minmax(0, 1fr);
    width: calc(100% - 34px);
    margin-left: 34px; /* with the content's 24px padding, clears the Ranks tab on the left edge */
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}

.qual-grid .grid-team,
.qual-grid .grid-all {
    min-width: 0;
    max-width: none;
}

.qual-grid .grid-all {
    overflow: auto;
    /* fade the last visible row instead of cutting it in half */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}

.qual-grid .grid-twitch {
    container-type: size;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.qual-grid .grid-twitch .stream-card {
    width: min(100cqw, calc((100cqh - 1.8rem) * 16 / 9));
}

/* Optional: responsive collapse */
@media (max-width: 900px) {
    .match-grid.qual-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .match-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "upNext"
            "team"
            "all"
            "twitch";
    }
}


.rank-menu {
    background:var( --theme-card-background);
    color: var(--theme-color-text-muted);
    border-radius: 14px;
    border: 1px solid var(--theme-color-border);
    box-shadow: var(--theme-shadow-2), var(--theme-shadow-1), var(--theme-shadow-inset-1);
    /*box-shadow:*/
    /*        0 10px 25px rgba(0,0,0,0.45),*/
    /*        0 2px 8px rgba(0,0,0,0.35),*/
    /*        inset 0 1px 0 rgba(255,255,255,0.05);*/
    padding: .5rem .5rem;
    font-weight: 100;
    /*background: #efefef;*/
    width: 385px;
    height: 80vh;
    /*padding-left: 50px;*/
    position: fixed;
    top: 115px;
    left: -353px; /* off-screen to the right except 20px */
    z-index: 100;
    /*box-shadow: 3px 0 5px 0 rgba(0,0,0,0.2);*/
    /*color: #222;*/
    transition: transform 0.3s ease;
}

.rank-menu:hover,
.rank-menu:focus {
    transform: translateX(360px); /* slide into view from right */
}

.rank-menu .title {
    position: absolute;
    top: 50%;
    left: 318px;
    transform: translateY(-50%) rotate(90deg);
    font-weight: 1000;
    font-size: 18px;
    letter-spacing: 15px;
}

.rank-menu .nav {
    position: absolute;
    top: 0px;
    left: 70px;
    transform: translateY(50%);
    font-weight: 100;
    margin: 0;
    padding-left: 15px
}

.rank-menu .rank-row {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(50%);
    font-weight: 100;
    margin: 0;
    padding-left: 10px
}
.rank-menu .nav li {
    list-style: none;
    padding-bottom: 30px;
}

.rank-menu .nav li a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.rank-menu .nav li a:hover {
    color: #aaa;
}
.rank-menu .rank-list {
    display: grid;           /* stack rows naturally */
    grid-auto-rows: minmax(48px, auto); /* give each row height */
    row-gap: 8px;            /* spacing between rows */
    position: relative;      /* ensure container is positioned context */
    width: 95%;
    height: 98%;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;                /* auto | thin | none */
    scrollbar-color: rgba(255,255,255,.2) transparent;
    font-size: 18px;

}
.rank-list::-webkit-scrollbar {
    width: 8px;       /* or 0 for hidden, but still scrollable */
}
.rank-list::-webkit-scrollbar-track {
    background: transparent; /* blends with background */
}
.rank-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.rank-menu .rank-list .rank-row {
    display: grid;
    grid-template-columns: 45px 45px 45px 45px 35px 35px; /* rank, avatar, team, win-loss, score */
    align-items: center;
    column-gap: 12px;

    position: static !important;   /* prevent absolute overlay */
    float: none !important;        /* avoid float stacking issues */
    clear: both;
    width:90%
}
.rank-menu .rank-list .team-row{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: var(--team-row-background);
    font-weight: bold;
}


/* Frozen header: stays at the top of the scrolling list. The first row is fixed at 30px (the rest keep the 48px minimum). */
.rank-menu .rank-list {
    grid-template-rows: 30px;
}
.rank-menu .rank-list .rank-row {
    transform: none; /* undo the generic .rank-menu .rank-row translateY(50%), which pushed every row (and the header) down */
}
.rank-menu .rank-list .rank-head {
    position: sticky !important;
    top: 0;
    z-index: 2;
    background: var(--theme-color-bg);
    border-bottom: 1px solid var(--theme-color-border);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--theme-color-text-muted);
}
.rank-menu .rank-list .rank-head > div { font-weight: 600; white-space: nowrap; }

.rank-menu .rank-list .rank { text-align: center; font-weight: 700; }
.rank-menu .rank-list .avatar img {
    width: 35px;
    /*width: 1.1vw;*/
    border-radius: 0.1vw;
    object-fit: contain;
    /*width: 64px; height: 64px; object-fit: contain; display: block;*/
}
.rank-menu .rank-list .team-number { font-weight: 600; text-align: right; }
.rank-menu .rank-list .win-loss { text-align: right; }
.rank-menu .rank-list .rank-points { text-align: right; }
.rank-menu .rank-list .ranking-score { text-align: right; font-variant-numeric: tabular-nums; }

.rank-menu .no-rank {
    font-weight: 600;
    text-align: center;
}





.alliance-menu {
    background: var(--theme-card-background);
    color: white;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
            0 10px 25px rgba(0,0,0,0.45),
            0 2px 8px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.05);
    padding: .5rem .5rem;
    font-weight: 100;
    /*background: #efefef;*/
    width: 500px;
    height: 75vh;
    /*padding-left: 50px;*/
    position: fixed;
    /*top: 115px;*/
    /*left: 353px; !* off-screen to the right except 20px *!*/
    /*z-index: 100;*/
    /*box-shadow: 3px 0 5px 0 rgba(0,0,0,0.2);*/
    /*color: #222;*/
    /*transition: transform 0.3s ease;*/
}

/*.alliance-menu:hover,*/
/*.alliance-menu:focus {*/
/*    transform: translateX(360px); !* slide into view from right *!*/
/*}*/

.alliance-menu .title {
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 345px;*/
    /*transform: translateY(-50%) rotate(90deg);*/
    font-weight: 800;
    font-size: 15px;
}


.alliance-menu .alliance-row {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(50%);
    font-weight: 100;
    margin: 0;
    padding-left: 10px
}

.alliance-menu .alliance-list {
    display: grid;           /* stack rows naturally */
    grid-auto-rows: minmax(12px, 8vh); /* give each row height */
    row-gap: 8px;            /* spacing between rows */
    position: relative;      /* ensure container is positioned context */
    /*width: 95%;*/
    height: 98%;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;                /* auto | thin | none */
    scrollbar-color: rgba(255,255,255,.2) transparent;

}
.alliance-list::-webkit-scrollbar {
    width: 8px;       /* or 0 for hidden, but still scrollable */
}
.alliance-list::-webkit-scrollbar-track {
    background: transparent; /* blends with background */
}
.alliance-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.alliance-menu .alliance-list .alliance-row {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto; /* alliance, avatar, team, win-loss, score */
    width: 95%;
    align-items: center;
    column-gap: 12px;
padding-right:10px;
    position: static !important;   /* prevent absolute overlay */
    float: none !important;        /* avoid float stacking issues */
    clear: both;
}
.alliance-menu .alliance-list .alliance-row .number {
    /*font-size: 2.3vw;*/
    /*font-weight: 600;*/
    text-align: center;
    /*position: absolute;*/
    /*top: 50%;*/
    /*right: 50%;*/
    /*transform: translate(50%,-50%);*/
    text-transform: uppercase;
    /*font-family: verdana;*/
    /*font-size: 12em;*/
    /*font-weight: 700;*/
    /*color: #f5f5f5;*/
    /*text-shadow: 1px 1px 1px #919191,*/
    /*1px 2px 1px #919191,*/
    /*1px 3px 1px #919191,*/
    /*1px 4px 1px #919191,*/
    /*1px 5px 1px #919191,*/
    /*1px 6px 1px #919191,*/
    /*1px 7px 1px #919191,*/
    /*1px 8px 1px #919191,*/
    /*1px 9px 1px #919191,*/
    /*1px 10px 1px #919191,*/
    /*1px 18px 6px rgba(16,16,16,0.4),*/
    /*1px 22px 10px rgba(16,16,16,0.2),*/
    /*1px 25px 35px rgba(16,16,16,0.2),*/
    /*1px 30px 60px rgba(16,16,16,0.4);*/
    /*margin-bottom: .5em;*/
    font-family: Montserrat, sans-serif;
    font-size: 3.5rem;
    color: #e0354d;
    background-image: linear-gradient(135deg, #212121 0%, #ffffff 5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: -1px -1px 0 rgba(255,255,255,.5), 
    1px 1px 0 rgba(0,0,0,.25), 
    3px 3px 3px rgba(0,0,0,.25), 
    10px 10px 20px rgba(0,0,0,.5),
    20px 40px 40px rgba(0,0,0,.5);
}
.alliance-menu .alliance-list .a1{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #5A007A 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a2{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #8A2BE2 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a3{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #B57EDC 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a4{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #6F7D86 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a5{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #708F7A 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a6{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #6E9CB8 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a7{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #6ca9f6 0%, #11182747 115%);
    font-weight: bold;
}
.alliance-menu .alliance-list .a8{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    background: linear-gradient(to right, #277ef8 0%, #11182747 115%);
    font-weight: bold;
}

.alliance-menu .alliance-list .team-row{
    border-radius: 14px;
    /*border: 1px solid rgba(184, 184, 184, 0.06);*/
    /*background: linear-gradient(180deg, #2c354e 0%, #111827 100%);*/
    font-weight: bold;
}

.alliance-menu .alliance-list .alliance { text-align: center; font-weight: 700; }
.alliance-menu .alliance-list .avatar{
    text-align: center;
}
.alliance-menu .alliance-list .team-number{
    text-align: left;
}
.alliance-menu .alliance-list .avatar img {
    height: 1.8vw;
    width: 1.8vw;
    border-radius: 0.1vw;
    object-fit: contain;
    /*width: 64px; height: 64px; object-fit: contain; display: block;*/
}
.alliance-menu .alliance-list .team-number { 
    font-weight: 600;
    text-align: right;
    font-size: 1.2rem;
}
.alliance-menu .alliance-list .win-loss { text-align: right; }
.alliance-menu .alliance-list .alliance-points { text-align: right; }
.alliance-menu .alliance-list .ranking-score { text-align: right; font-variant-numeric: tabular-nums; }

.alliance-menu .no-alliance{
    font-weight: 600;
    text-align: center;
}
.queueingRow{
    /*background-color: green;*/
    /*border-radius: 50px;*/
    /*box-shadow: inset 0 0 20px rgba(0,0,0,0.25);*/
    border-radius: 14px;
    overflow: hidden;
    /*box-shadow:*/
    /*        0 10px 25px rgba(0,0,0,0.45),*/
    /*        0 2px 8px rgba(0,0,0,0.35),*/
    /*        inset 0 1px 0 rgba(255,255,255,0.05),*/
    /*        inset 0 0 0 rgba(0,128,0,0.9) !important;*/
    animation: greenBoxInsetPulse 1.6s ease-in-out 113 forwards;
}


.onDeckRow{
    border-radius: 14px;
    overflow: hidden;
    animation: redBoxInsetPulse 1.6s ease-in-out 113 forwards;
}
.onFieldRow{
    background: transparent;
    border-radius: 14px;
}

/* A match number that opens the match preview popup */
.match-link {
    background: none;
    border: 0;
    padding: 0.1rem 0.55rem;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}
.match-link:hover,
.match-link:focus-visible {
    color: var(--theme-color-accent);
    background: rgba(37, 140, 251, 0.15);
    text-decoration: underline;
    outline: none;
}
.match-link-lg { padding: 0 0.4rem; }