/* version: 1.1.0 */


body, button, select[multiple] option {
    font-family: "Open Sans", "Segoe UI", "Helvetica", sans-serif;
    color: #fff0f0;
    background-color: #080418;
}

::-webkit-scrollbar {
    width: 1.6em;
}

::-webkit-scrollbar-thumb {
    border: .4em solid transparent;
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #fff0f0;
}

div#config-panel {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-top: .16em;
    margin-bottom: .6em;
}

div#progress-spinner-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #202020e0;
}

div#progress-spinner {
    color: #e0e0e0e0;
    font-size: 20em;
    animation-name: spin;
    animation-duration: 1200ms;
    animation-iteration-count: infinite;
    animation-timing-function: steps(8, end);
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

div#summary-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: center;
    vertical-align: top;
    text-align: center;
}

div#progress-panel {
    display: flex;
}

div#rankings-panel {
    display: none;
}

div.stats-panel {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: space-between;
    justify-content: flex-start;
    vertical-align: top;
    text-align: center;
    margin: 0 .3em .3em .3em;
    padding: .3em .7em;
    padding-top: .5em;
    background-color: #fffff018;
    border: none;
    border-radius: 1.4em;
}

div.stats-panel-header {
    font-size: 2.4em;
    font-weight: 300;
    white-space: nowrap;
}

div.stats-panel div.stats-wrapper {
    display: block;
    margin-top: .5em;
    font-size: 1.8em;
    font-weight: 100;
}

div#rankings-panel th.rankings-column-header {
    font-weight: 500;
}

div#progress-panel progress {
    height: 40px;
    width: 360px;
    color: #80b090;
}

div#rankings-panel span.ranking-bullet {
    font-style: italic;
    font-weight: 200;
}

div#rankings-panel span.ranking-bullet::after {
    content: ".";
    margin-left: -.3em;
    padding-right: .3em;
}

div#rankings-panel td.rankings-column {
    vertical-align: top;
    padding: 0 1em;
}

div#rankings-panel td.rankings-column tr {
    line-height: 1.75em;
}

div#rankings-panel span.ranking-name-list {
    font-weight: 400;
}

div#rankings-panel span.ranking-name-list::after {
    content: "\2013";
    padding-left: .2em;
    padding-right: .2em;
}

div#rankings-panel span.ranking-name {
    display: inline-block;
    background-color: #00000010;
    border: 1px solid #00000040;
    border-radius: .5em;
    padding: .2em .4em;
    margin: .1em;
}

div#rankings-panel span.ranking-roll {
    font-weight: 600;
}

div#rankings-panel span.ranking-char {
    display: inline-block;
    font-weight: 300;
}

div#rankings-panel span.ranking-char::before {
    content: "(\a0";
    margin-right: -.25em;
}

div#rankings-panel span.ranking-char::after {
    content: "\a0)";
    margin-left: -.25em;
}

div#filter-panel,
div#search-panel {
    display: block;
    text-align: center;
    margin-bottom: .5em;
}

/* Update tab shared style elements */
div.update-tab {
    font-weight: 400;
    text-align: center;
    background-color: #b8c0b830;
    border: none;
    border-radius: 1em;
    margin: .15em .18em;
    padding: .2em;
    display: inline-block;
    cursor: pointer;
}

/* Update tab heading shared style elements */
span.update-tab-heading {
    font-variant: all-small-caps;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
}

/* Active update tab */
div.active-update-tab {
    font-weight: 900;
    color: #205000;
    background-color: #40904080;
}

/* Active update tab heading */
div.active-update-tab span.update-tab-heading {
    color: #00503080;
    font-weight: 900;
}

/* Inactive update tab */
div.disabled-update-tab {
    font-weight: 200;
    color: #a0b0a0;
    background-color: #f0fff0;
}

/* Inactive update tab heading */
div.inactive-update-tab span.update-tab-heading {
    color: #00503080;
    font-weight: 900;
}

/* Season button shared style elements */
button.season-toggle {
    font-family: "Alumni Sans", sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    text-align: center;
    color: #d0b0b0c0;
    background-color: #e0c0b830;
    display: inline-block;
    padding: 0.1em 0.35em;
    margin: .1em;
    margin-top: .3em;
    border: none;
    border-radius: 1em;
    cursor: pointer;
}

/* Inactive season button under inactive update tab */
div.inactive-update-tab button.season-toggle {
    font-weight: 100;
    color: #b0a0b0;
    background-color: #f8f0ff;
}

/* Inactive season button under active update tab */
div.active-update-tab button.season-toggle:not(.active-season) {
    color: #40404060;
    background-color: #ffffff48;
}

/* Active season button */
button.season-toggle.active-season {
    font-weight: 400;
    color: #e0f0e0;
    background-color: #306040;
}

/* Selection indicator highlights on update tabs */
div.update-tab:hover:not(:has(*:not(.update-tab-heading):hover)) {
    background-color: #b0f0f0d0;
    transition: 0.3s ease-in-out;
}

/* Selection indicator highlights on update tab headings */
div.update-tab:hover:not(:has(*:hover)) span.update-tab-heading,
div.update-tab:hover:not(:has(*:not(.update-tab-heading):hover)) span.update-tab-heading {
    color: #000000;
    font-weight: 700;
    transition: 0.3s ease-in-out;
}

/* Selection indicator highlights on season buttons */
div.update-tab button.season-toggle:not(.active-season):hover,
div.update-tab:hover:not(:has(*:not(.update-tab-heading):hover)) button.season-toggle:not(.active-season) {
    color: #000000;
    background-color: #b0f0f0d0;
    font-weight: 600;
    transition: 0.3s ease-in-out;
}

/* Deselection indicator highlights on update tabs */
div.update-tab:not(.inactive-update-tab):hover:not(:has(*:not(.update-tab-heading):hover)):not(:has(.season-toggle:not(.active-season))) {
    background-color: #903020;
    font-weight: 900;
    transition: 0.3s ease-in-out;
}

/* Deselection indicator highlights on update tab headings */
div.update-tab:not(.inactive-update-tab):hover:not(:has(*:not(.update-tab-heading):hover)):not(:has(.season-toggle:not(.active-season))) span.update-tab-heading {
    font-weight: 400;
    color: #f0e0e0;
    background-color: #903020;
    transition: 0.3s ease-in-out;
}

/* Deselection indicator highlights on season buttons */
div.update-tab:not(.inactive-update-tab) button.season-toggle.active-season:hover,
div.update-tab:not(.inactive-update-tab):hover:not(:has(*:not(.update-tab-heading):hover)):not(:has(.season-toggle:not(.active-season))) button.season-toggle {
    font-weight: 100;
    text-decoration: line-through;
    color: #f0e0e0;
    background-color: #903020;
    transition: 0.3s ease-in-out;
}

div.undiscovered-character {
    opacity: 0.3;
}

div.discovered-character div.card-frame,
div.rankings-cell div.card-frame {
    filter: contrast(100%) brightness(100%) saturate(100%) drop-shadow(0 0 0 #ffffff00);
    translate: 0 0;
    transition: filter .3s ease-in-out, translate .3s ease-in-out;
}

div.discovered-character div.card-frame:hover,
div.rankings-cell div.card-frame:hover {
    filter: contrast(110%) brightness(125%) saturate(105%) drop-shadow(.5em 1em .7em #ffe0a0d0);
    translate: -.3em -.7em;
    cursor: zoom-in;
}

#details-panel div.card-frame:hover {
    cursor: zoom-out;
}

div#details-panel-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #101010e0;
}

div#details-panel {
    background-color: #242228f0;
    color: #ffffff;
    border-radius: 1.6em;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .6em;
    box-shadow: 0 0 0 1px #242228, 0 0 1em 1em #242228f0
}

div#details-panel div.card-frame {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    transform: none;
    margin: 0;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
}

div.card-flavor-text {
    display: none;
    position: relative;
    font-weight: 100;
    font-style: italic;
    min-width: 100%;
    width: 0;
    margin-bottom: 1.2em;
}

div#details-panel div.card-flavor-text {
    display: block;
}

div.card-quote-icon {
    position: absolute;
    top: -.3em;
    left: -5%;
    font-family: "Garamond", "Times New Roman", serif;
    font-style: italic;
    font-size: 5em;
    font-weight: 700;
    filter: drop-shadow(0 0 8px #000000ff);
}

div.card-flavor-text-content {
    position: relative;
    left: 10%;
    min-width: 92%;
    width: 0;
    color: #e0ffffc0;
    line-height: 1.5em;
}

div.card-details {
    display: none;
}

div#details-panel div.card-render,
div#details-panel div.card-details {
    position: relative;
    display: block;
    margin: .3em;
}

div#details-panel div.card-render {
    width: var(--base-card-width);
    height: var(--base-card-height);
    margin-bottom: 1.2em;
}

div#details-panel div.detail-section {
    margin-bottom: .4em;
}

div#details-panel div.detail-heading {
    margin-bottom: .1em;
    font-weight: 700;
}

div#details-panel div.detail-content {
    font-weight: 200;
    color: #e0e0e080;
}

div#details-panel div.detail-content a:link {
    color: #d0ffff80;
}

div#details-panel div.detail-content a:visited {
    color: #d0d0ff80;
}