@charset "UTF-8";
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
:root {
  --class-spec-icon-size: 2.375rem;
  --raid-dung-icon-size: 3.25rem;
  --expansion-logo-height: 90px;
  --expansion-logo-width: 220px;
  --expansion-logo-circular-height: 120px;
  --expansion-logo-circular-width: 192px;
}

@media (max-width: 768px) {
  :root {
    --class-spec-icon-size: 1.875rem;
    --raid-dung-icon-size: 2.5rem;
    --expansion-logo-height: 44px;
    --expansion-logo-width: 110px;
    --expansion-logo-circular-height: 70px;
    --expansion-logo-circular-width: 110px;
  }
}
.class-text-account {
  color: #000000;
}

.class-text-dk {
  color: #C41F3B;
}

.class-text-dh {
  color: #A330C9;
}

.class-text-druid {
  color: #FF7D0A;
}

.class-text-evoker {
  color: #33937F;
}

.class-text-hunter {
  color: #ABD473;
}

.class-text-mage {
  color: #69CCF0;
}

.class-text-monk {
  color: #00FF96;
}

.class-text-paladin {
  color: #F58CBA;
}

.class-text-priest {
  color: #FFFFFF;
}

.class-text-rogue {
  color: #FFF569;
}

.class-text-shaman {
  color: #0070DE;
}

.class-text-warlock {
  color: #9482C9;
}

.class-text-warrior {
  color: #C79C6E;
}

.class-icon, .spec-icon {
  height: var(--class-spec-icon-size);
  width: var(--class-spec-icon-size);
}
.character-content-inline .class-icon, .character-content-inline .spec-icon {
  height: 18px;
  width: 18px;
}

.empty-icon {
  height: var(--class-spec-icon-size);
  width: 0;
}
.character-content-inline .empty-icon {
  height: 18px;
  width: 0;
}

/*
  .class-dk, .class-dh, .class-hunter, .class-rogue,
  .class-druid, .class-evoker, .class-mage, .class-shaman,
  .class-monk, .class-paladin, .class-priest, .class-warlock,
  .class-warrior, .class-account
*/
.class-icon {
  background-image: url(/images/icons/class/sprite.jpg);
  background-size: calc(var(--class-spec-icon-size) * 4);
  background-position: 100% 100%;
}
.character-content-inline .class-icon {
  background-size: 72px;
}

.class-dk {
  background-position: 0 0;
}

.class-dh {
  background-position: 33.3333333333% 0;
}

.class-druid {
  background-position: 0 33.3333333333%;
}

.class-evoker {
  background-position: 33.3333333333% 33.3333333333%;
}

.class-hunter {
  background-position: 66.6666666667% 0;
}

.class-mage {
  background-position: 66.6666666667% 33.3333333333%;
}

.class-monk {
  background-position: 0 66.6666666667%;
}

.class-paladin {
  background-position: 33.3333333333% 66.6666666667%;
}

.class-priest {
  background-position: 66.6666666667% 66.6666666667%;
}

.class-rogue {
  background-position: 100% 0;
}

.class-shaman {
  background-position: 100% 33.3333333333%;
}

.class-warlock {
  background-position: 100% 66.6666666667%;
}

.class-warrior {
  background-position: 0 100%;
}

.class-account {
  background-position: 33.3333333333% 100%;
}

/*
.spec-dk-blood,
.spec-dk-frost,
.spec-dk-unholy,
.spec-dh-havoc,
.spec-dh-vengeance,
.spec-druid-balance,
.spec-druid-feral,
.spec-druid-guardian,
.spec-druid-restoration,
.spec-evoker-augmentation,
.spec-evoker-devastation,
.spec-evoker-preservation,
.spec-hunter-bm,
.spec-hunter-marksmanship,
.spec-hunter-survival,
.spec-mage-arcane,
.spec-mage-fire,
.spec-mage-frost,
.spec-monk-brewmaster,
.spec-monk-mistweaver,
.spec-monk-windwalker,
.spec-paladin-holy,
.spec-paladin-protection,
.spec-paladin-retribution,
.spec-priest-discipline,
.spec-priest-holy,
.spec-priest-shadow,
.spec-rogue-assassination,
.spec-rogue-combat,
.spec-rogue-outlaw,
.spec-rogue-subtlety,
.spec-shaman-elemental,
.spec-shaman-enhancement,
.spec-shaman-restoration,
.spec-warlock-affliction,
.spec-warlock-demonology,
.spec-warlock-destruction,
.spec-warrior-arms,
.spec-warrior-fury,
.spec-warrior-protection
*/
.spec-icon {
  background-image: url(/images/icons/spec/sprite.jpg);
  background-size: calc(var(--class-spec-icon-size) * 7);
  background-position: 100% 100%;
}
.character-content-inline > .spec-icon {
  background-size: 126px;
}

.spec-dk-blood {
  background-position: 0 0;
}

.spec-dk-frost {
  background-position: 16.6666666667% 0;
}

.spec-dk-unholy {
  background-position: 0 20%;
}

.spec-dh-havoc {
  background-position: 16.6666666667% 20%;
}

.spec-dh-vengeance {
  background-position: 33.3333333333% 0;
}

.spec-druid-balance {
  background-position: 33.3333333333% 20%;
}

.spec-druid-feral {
  background-position: 0 40%;
}

.spec-druid-guardian {
  background-position: 16.6666666667% 40%;
}

.spec-druid-restoration {
  background-position: 33.3333333333% 40%;
}

.spec-evoker-augmentation {
  background-position: 50% 0;
}

.spec-evoker-devastation {
  background-position: 50% 20%;
}

.spec-evoker-preservation {
  background-position: 50% 40%;
}

.spec-hunter-bm {
  background-position: 0 60%;
}

.spec-hunter-marksmanship {
  background-position: 16.6666666667% 60%;
}

.spec-hunter-survival {
  background-position: 33.3333333333% 60%;
}

.spec-mage-arcane {
  background-position: 50% 60%;
}

.spec-mage-fire {
  background-position: 66.6666666667% 0;
}

.spec-mage-frost {
  background-position: 66.6666666667% 20%;
}

.spec-monk-brewmaster {
  background-position: 66.6666666667% 40%;
}

.spec-monk-mistweaver {
  background-position: 66.6666666667% 60%;
}

.spec-monk-windwalker {
  background-position: 0 80%;
}

.spec-paladin-holy {
  background-position: 16.6666666667% 80%;
}

.spec-paladin-protection {
  background-position: 33.3333333333% 80%;
}

.spec-paladin-retribution {
  background-position: 50% 80%;
}

.spec-priest-discipline {
  background-position: 66.6666666667% 80%;
}

.spec-priest-holy {
  background-position: 83.3333333333% 0;
}

.spec-priest-shadow {
  background-position: 83.3333333333% 20%;
}

.spec-rogue-assassination {
  background-position: 83.3333333333% 40%;
}

.spec-rogue-combat {
  background-position: 83.3333333333% 60%;
}

.spec-rogue-outlaw {
  background-position: 83.3333333333% 80%;
}

.spec-rogue-subtlety {
  background-position: 0 100%;
}

.spec-shaman-elemental {
  background-position: 16.6666666667% 100%;
}

.spec-shaman-enhancement {
  background-position: 33.3333333333% 100%;
}

.spec-shaman-restoration {
  background-position: 50% 100%;
}

.spec-warlock-affliction {
  background-position: 66.6666666667% 100%;
}

.spec-warlock-demonology {
  background-position: 83.3333333333% 100%;
}

.spec-warlock-destruction {
  background-position: 100% 0;
}

.spec-warrior-arms {
  background-position: 100% 20%;
}

.spec-warrior-fury {
  background-position: 100% 40%;
}

.spec-warrior-protection {
  background-position: 100% 60%;
}

/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
/* ==========================================================================
   CSS Boilerplate
   ========================================================================== */
/* 1. Box sizing and basic resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px; /* Base font-size for rem calculations */
  scroll-behavior: smooth;
}

/* Remove default margin and set up sensible defaults for common elements */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements */
ul, ol {
  list-style: none;
}

/* Optimize media elements */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Set core defaults for body */
body {
  line-height: 1.6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  min-height: 100vh;
}

/* Anchor tag defaults */
a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */
/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.2;
}

/* Paragraphs */
p {
  margin-bottom: 1rem;
}
p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   3. Utility Classes
   ========================================================================== */
/* Centered text */
.text-center {
  text-align: center;
}

/* ==========================================================================
   4. Reduced Motion (for Accessibility)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
button, .button {
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 200;
  margin: 0.5rem;
  padding: 1rem 2rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
button em, .button em {
  font-weight: 400;
}
button:hover, .button:hover {
  text-decoration: none;
}
button.small, .button.small {
  font-size: 14px;
  padding: 0.75rem 1.5rem;
}
button.primary, .button.primary {
  background: #22c9ff;
  border: none;
  border-radius: 4px;
  color: #000;
  text-align: center;
}
button.primary:hover, .button.primary:hover {
  background: #FFFFFF;
}
button.secondary, .button.secondary {
  background: transparent;
  border: 1px solid #808080;
  color: #CCCCCC;
  line-height: 1.4;
}
button.secondary:hover, .button.secondary:hover {
  background: #2E2E2E;
  color: #FFFFFF;
  border-color: #22c9ff;
}
button:disabled, button.disabled, .button:disabled, .button.disabled {
  background: #2E2E2E;
  border-color: #808080;
  color: #888;
  cursor: not-allowed;
  opacity: 0.8;
}
button:disabled:hover, button.disabled:hover, .button:disabled:hover, .button.disabled:hover {
  background: #2E2E2E;
  color: #888;
}

@media (max-width: 768px) {
  button, .button {
    display: block;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    margin: 0.5rem auto;
  }
  button.region-option, .button.region-option {
    margin: 0.25rem 0;
  }
  button.small {
    flex: 1;
    min-width: 120px;
    padding: 12px 20px;
    font-size: 12px;
  }
}
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
nav {
  background-color: #1E1E1E;
  margin: 0 auto 1rem;
  position: relative;
  width: 100%;
}

.nav-links-wrapper {
  background-color: #2E2E2E;
}

.nav-links-list {
  display: flex;
  flex-direction: row;
}
.nav-links-list li {
  text-align: center;
  flex: 1;
}

.nav-link {
  color: #AAAAAA;
  display: inline-block;
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 3px;
  padding: 0 0.5rem;
}
.nav-link:visited {
  color: inherit;
}
.nav-link:hover {
  background-color: #22c9ff;
  border-radius: 4px;
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.nav-link:hover .tooltip {
  color: #AAAAAA;
}

.nav-link--tooltip {
  cursor: default;
}

.nav-tooltip {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  position: relative;
}

.nav-tooltip:focus-visible {
  outline: 2px solid #22c9ff;
  outline-offset: 2px;
}

.nav-tooltip-panel {
  min-width: 140px;
  text-align: center;
  white-space: nowrap;
}

.nav-tooltip-text {
  display: block;
  font-weight: 200;
  letter-spacing: 0.3px;
  line-height: 1.4;
  margin-bottom: 2px;
  text-align: center;
  white-space: normal;
}

.nav-tooltip-text:last-child {
  margin-bottom: 0;
}

.nav-tooltip-panel--support {
  display: flex;
  flex-direction: column;
  max-width: 320px;
  white-space: normal;
}
.nav-tooltip-panel--support .button {
  display: block;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.nav-tooltip-panel--support .button:last-of-type {
  margin-bottom: 0;
}

.nav-tooltip-panel--social {
  padding: 4px 8px;
  white-space: normal;
}

.site-logo:hover {
  text-decoration: none;
}

.site-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 64px;
  margin: 0;
  padding: 0 1rem;
  position: relative;
}

.site-logo-img-wrapper {
  margin-top: 65px;
}

.site-logo-img {
  display: inline-block;
  height: 128px;
  position: relative;
  width: auto;
  z-index: 1;
}

.site-version {
  bottom: 8px;
  color: rgb(0, 112, 221);
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 1;
  position: absolute;
  right: 8px;
}

.site-text {
  display: inline-block;
  flex: 1;
  font-size: 32px;
  text-transform: uppercase;
}
.site-text:first-of-type {
  font-weight: 600;
  letter-spacing: 1rem;
  margin-right: -1rem;
  text-align: end;
  text-shadow: 0 0 2px black;
}
.site-text:last-of-type {
  font-weight: 200;
  letter-spacing: 2.4rem;
  margin-right: -1rem;
}

@media (min-width: 1400px) {
  .nav-links, .site-logo {
    max-width: 1400px;
    margin: 0 auto;
  }
  .site-logo {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
  }
  .site-version {
    bottom: 18px;
    right: 297px;
  }
}
@media (max-width: 1400px) and (min-width: 769px) {
  .nav-links-list {
    padding: 0 8px;
  }
  .site-version {
    bottom: -15px;
  }
}
@media (max-width: 768px) {
  nav {
    margin: 0 auto 1rem;
  }
  nav .site-title {
    height: 42px;
  }
  nav .site-logo-img-wrapper {
    margin-top: 30px;
  }
  nav .site-logo-img {
    height: 63px;
    min-width: 63px;
  }
  .nav-links-wrapper {
    padding: 0 0.5rem;
  }
  .nav-link {
    font-size: 12px;
    margin: 0;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    width: auto;
    z-index: 2;
  }
  .site-text {
    font-size: 18px;
  }
  .site-text:first-of-type {
    letter-spacing: 0.3rem;
    margin-right: -0.3rem;
  }
  .site-text:last-of-type {
    letter-spacing: 1rem;
    margin-right: -0.3333333333rem;
  }
  .site-version {
    bottom: -14px;
    font-size: 12px;
    right: 0;
  }
}
@media (max-width: 600px) {
  .nav-link {
    z-index: 2;
  }
  .nav-links-list li:nth-child(-n+2) {
    text-align: left;
  }
  .nav-links-list li:nth-last-child(-n+2) {
    text-align: right;
  }
}
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
.tooltip {
  position: absolute;
  padding: 0.5rem;
  background: #1E1E1E;
  border: 1px solid #808080;
  border-radius: 4px;
  display: none;
  line-height: 1.6;
  max-width: min(330px, 90vw);
  pointer-events: none;
  white-space: nowrap;
  width: max-content;
  z-index: 2000;
}
.tooltip p {
  color: #AAAAAA;
  margin-bottom: 0.25rem;
  text-align: start;
}
.tooltip[data-show] {
  display: block;
  pointer-events: auto;
}

/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
.site-footer, .site-footer-minimal {
  background-color: #1E1E1E;
}

.site-footer {
  margin: 32px auto 0;
  width: 100%;
  padding: 16px 0 8px;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 1000px) {
  .footer-content {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}
.footer-section h3 {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 200;
}
.footer-section p {
  line-height: 1.6;
  font-size: 14px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  line-height: 1.2;
  margin-bottom: 8px;
}
.footer-links a {
  font-size: 14px;
}
.footer-links .social-link {
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer-links .social-link:hover {
  color: #AAAAAA;
}
.footer-links .social-link svg {
  flex-shrink: 0;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.social-links li {
  margin: 0;
}
.social-links .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0.5;
}
.social-links .social-link:hover, .social-links .social-link:focus {
  opacity: 1;
}
.social-links svg {
  height: 24px;
  width: 24px;
}

.footer-links.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.footer-links.legal-links li {
  margin: 0;
  display: flex;
  align-items: center;
}
.footer-links.legal-links li::before {
  content: "|";
  color: #888;
  margin-right: 4px;
}
.footer-links.legal-links li:first-child::before {
  content: none;
  margin-right: 0;
}

.footer-section p, .footer-links a {
  font-size: 12px;
}

.footer-section p {
  color: #888;
  font-weight: 200;
  line-height: 1.6;
}

.footer-region {
  margin-top: 4px;
  font-size: 14px;
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 1rem 0;
  text-align: center;
}
.footer-bottom p {
  margin: 0;
  font-size: 12px;
  font-weight: 200;
}

.site-footer-minimal {
  border-top-width: 1px;
  color: #AAAAAA;
  padding: 8px 0;
}
.site-footer-minimal .footer-bottom {
  max-width: none;
  margin: 0;
  padding: 0 1rem;
}

@media (min-width: 1400px) {
  .footer-content, .site-footer-bottom {
    max-width: 1400px;
    padding: 0;
  }
}
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-section h3 {
    font-size: 15px;
  }
  .footer-section p {
    font-size: 12px;
  }
  .footer-bottom {
    text-align: right;
  }
  .site-footer-minimal .footer-bottom {
    text-align: center;
  }
  .footer-links.social-links {
    justify-content: flex-start;
  }
  .footer-links a {
    font-size: 12px;
  }
}
/*
 * Region selection modal styles
 */
.region-modal[hidden] {
  display: none !important;
}

.region-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1300;
}

.region-modal__overlay {
  background: rgba(0, 0, 0, 0.65);
  inset: 0;
  position: absolute;
}

.region-modal__dialog {
  background: #3E3E3E;
  border-radius: 4px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
  color: #AAAAAA;
  margin: 0 1.5rem;
  max-width: 440px;
  padding: 16px 12px;
  position: relative;
  width: min(440px, 100%);
  z-index: 1;
}

.region-modal__title {
  color: #CCCCCC;
  font-size: 18px;
  margin: 0 0 12px;
}

.region-modal__message {
  font-size: 14px;
  font-weight: 200;
  margin: 0 0 0.25rem;
}

.region-modal__explanation {
  color: #CCCCCC;
  font-size: 14px;
  font-weight: 200;
  margin: 0 0 12px;
}

.region-modal__options {
  display: flex;
  flex-direction: column;
}

.region-option {
  align-items: baseline;
  background: #2E2E2E;
  border: 2px solid #808080;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  gap: 4px;
  justify-content: space-between;
  margin: 0.25rem 0;
  padding: 8px 12px;
  text-align: left;
}

.region-option__label {
  font-weight: 400;
}

.region-option:hover,
.region-option:focus-visible {
  border-color: #22c9ff;
}

.region-modal__actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.region-modal__close,
.region-modal__cancel {
  background: transparent;
  border: none;
  color: #CCCCCC;
  cursor: pointer;
  padding: 4px 8px;
}

.region-modal__close {
  font-size: 24px;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 0;
}

.region-modal__cancel {
  border: 1px solid #808080;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 0;
  margin-right: 0;
}

.region-modal__confirm {
  background: #22c9ff;
  border: none;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 12px;
}

body.region-modal-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .region-modal__dialog {
    border-radius: 0;
    height: 100%;
    margin: 0;
    max-width: none;
    width: 100%;
  }
}
body {
  background-color: #000;
  color: #AAAAAA;
  display: flex;
  flex-direction: column;
  letter-spacing: 0.03rem;
}

main {
  flex: 1;
}

h1 {
  color: #AAAAAA;
  font-size: 32px;
  font-weight: 400;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 14px;
}

p {
  font-size: 16px;
}

a {
  color: #22c9ff;
}
a:hover {
  text-decoration: underline;
}

.blizz-uncommon {
  color: rgb(30, 255, 0);
}

.blizz-rare {
  color: rgb(0, 112, 221);
}

.blizz-epic {
  color: rgb(163, 53, 238);
}

.blizz-legendary {
  color: rgb(255, 128, 0);
}

em {
  font-style: normal;
}

/* Container for layout */
main {
  max-width: 1400px;
  margin: 0 auto;
}

.container-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #3E3E3E;
  border-radius: 4px;
  padding: 0.5rem;
}
.container section {
  padding: calc(0.5rem - 2px) 0.5rem;
  background-color: #2E2E2E;
  border-radius: 4px;
}
.container .sub-section {
  background-color: #1E1E1E;
}

.sub-container {
  align-items: stretch;
  display: flex;
  flex: 1;
  gap: 0.25rem;
  justify-content: space-between;
}

.sub-section {
  flex: 1;
  min-width: 0;
}
.sub-section h5 {
  margin-bottom: 12px;
}
.sub-section h5.empty {
  margin-bottom: 0;
}
.sub-section ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 25.6px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 15px;
  }
  h4 {
    font-size: 13px;
  }
  p {
    font-size: 12px;
  }
  .container {
    border-radius: 0;
    gap: 0.25rem;
  }
  .container, .container section {
    padding: 5px 6px;
  }
  .container .sub-section ul {
    gap: 6px;
  }
}
@media (min-width: 1280px) {
  .sub-container {
    gap: 0.5rem;
  }
}
/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
.dung-icon, .raid-icon {
  background-size: calc(var(--raid-dung-icon-size) * 10);
  display: inline-block;
  height: var(--raid-dung-icon-size);
  width: var(--raid-dung-icon-size);
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -9);
}

.raid-icon {
  background-image: url(/images/icons/raid/sprite.jpg);
}

.raid-1-1, .raid-11-3 {
  background-position: 0 0;
}

.raid-1-2 {
  background-position: calc(var(--raid-dung-icon-size) * -1) 0;
}

.raid-2-1 {
  background-position: calc(var(--raid-dung-icon-size) * -2) 0;
}

.raid-2-2 {
  background-position: calc(var(--raid-dung-icon-size) * -3) 0;
}

.raid-3-1 {
  background-position: calc(var(--raid-dung-icon-size) * -4) 0;
}

.raid-3-2 {
  background-position: calc(var(--raid-dung-icon-size) * -5) 0;
}

.raid-4-1, .raid-10-1 {
  background-position: calc(var(--raid-dung-icon-size) * -6) 0;
}

.raid-5-1 {
  background-position: calc(var(--raid-dung-icon-size) * -7) 0;
}

.raid-5-2 {
  background-position: calc(var(--raid-dung-icon-size) * -8) 0;
}

.raid-5-3 {
  background-position: calc(var(--raid-dung-icon-size) * -9) 0;
}

.raid-6-1 {
  background-position: 0 calc(var(--raid-dung-icon-size) * -1);
}

.raid-7-1 {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -1);
}

.raid-8-1 {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -1);
}

.raid-8-2 {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -1);
}

.raid-9-1 {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -1);
}

.raid-9-2 {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -1);
}

.raid-10-2 {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -1);
}

.raid-10-3 {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -1);
}

.raid-11-1 {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -1);
}

.raid-11-2 {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -1);
}

.raid-12-1 {
  background-position: 0 calc(var(--raid-dung-icon-size) * -2);
}

.raid-12-2 {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -2);
}

.raid-13-1 {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -2);
}

.raid-13-2 {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -2);
}

.raid-14-1 {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -3);
}

.raid-14-2 {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -2);
}

.raid-15-1 {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -2);
}

.raid-16-1 {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -2);
}

.raid-17-1 {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -2);
}

.raid-17-2 {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -2);
}

.raid-17-3 {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -2);
}

.raid-18-1 {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -2);
}

.raid-19-1, .raid-19-2 {
  background-position: 0 calc(var(--raid-dung-icon-size) * -3);
}

.raid-20-1 {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -3);
}

.raid-21-1 {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -3);
}

.raid-22-1 {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -3);
}

.raid-23-1 {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -3);
}

.raid-23-2 {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -3);
}

.raid-24-1 {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -3);
}

.raid-25-1 {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -3);
}

.raid-26-1 {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -3);
}

.raid-27-1 {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -3);
}

.raid-28-1 {
  background-position: 0 calc(var(--raid-dung-icon-size) * -4);
}

.raid-28-2 {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -4);
}

.raid-29-1 {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -4);
}

.raid-30-1 {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -4);
}

.raid-31-1 {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -4);
}

.raid-32-1 {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -4);
}

.raid-33-1 {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -4);
}

.raid-35-1 {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -4);
}

.raid-36-1 {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -4);
}

.raid-37-1 {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -4);
}

.raid-39-1 {
  background-position: 0 calc(var(--raid-dung-icon-size) * -5);
}

.raid-40-1 {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -5);
}

.raid-41-1 {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -5);
}

.dung-icon {
  background-image: url(/images/icons/dung/sprite.jpg);
}

.dung-AA {
  background-position: 0 0;
}

.dung-AD {
  background-position: calc(var(--raid-dung-icon-size) * -1) 0;
}

.dung-ARAK {
  background-position: calc(var(--raid-dung-icon-size) * -2) 0;
}

.dung-AV {
  background-position: calc(var(--raid-dung-icon-size) * -3) 0;
}

.dung-BH {
  background-position: calc(var(--raid-dung-icon-size) * -4) 0;
}

.dung-BREW {
  background-position: calc(var(--raid-dung-icon-size) * -5) 0;
}

.dung-BRH {
  background-position: calc(var(--raid-dung-icon-size) * -6) 0;
}

.dung-COS {
  background-position: calc(var(--raid-dung-icon-size) * -7) 0;
}

.dung-COT {
  background-position: calc(var(--raid-dung-icon-size) * -8) 0;
}

.dung-DAWN {
  background-position: calc(var(--raid-dung-icon-size) * -9) 0;
}

.dung-DFC {
  background-position: 0 calc(var(--raid-dung-icon-size) * -1);
}

.dung-DHT {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -1);
}

.dung-DOS {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -1);
}

.dung-EB {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -1);
}

.dung-EDA {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -5);
}

.dung-FALL {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -1);
}

.dung-FH {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -1);
}

.dung-FLOOD {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -1);
}

.dung-GB {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -1);
}

.dung-GD {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -1);
}

.dung-GMBT {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -1);
}

.dung-HOA {
  background-position: 0 calc(var(--raid-dung-icon-size) * -2);
}

.dung-HOI {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -2);
}

.dung-HOV {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -2);
}

.dung-ID {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -2);
}

.dung-KR {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -2);
}

.dung-LOWR {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -2);
}

.dung-MISTS {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -2);
}

.dung-ML {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -2);
}

.dung-NELT {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -2);
}

.dung-NL {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -2);
}

.dung-NO {
  background-position: 0 calc(var(--raid-dung-icon-size) * -3);
}

.dung-NW {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -3);
}

.dung-PF {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -3);
}

.dung-PSF {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -3);
}

.dung-RISE {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -3);
}

.dung-RLP {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -3);
}

.dung-ROOK {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -3);
}

.dung-SBG {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -3);
}

.dung-SD {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -3);
}

.dung-SIEGE {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -3);
}

.dung-SOA {
  background-position: 0 calc(var(--raid-dung-icon-size) * -4);
}

.dung-SOTS {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -4);
}

.dung-STRT {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -4);
}

.dung-SV {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -4);
}

.dung-TD {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -4);
}

.dung-TJS {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -4);
}

.dung-TOP {
  background-position: calc(var(--raid-dung-icon-size) * -6) calc(var(--raid-dung-icon-size) * -4);
}

.dung-TOS {
  background-position: calc(var(--raid-dung-icon-size) * -7) calc(var(--raid-dung-icon-size) * -4);
}

.dung-TOTT {
  background-position: calc(var(--raid-dung-icon-size) * -8) calc(var(--raid-dung-icon-size) * -4);
}

.dung-ULD {
  background-position: calc(var(--raid-dung-icon-size) * -9) calc(var(--raid-dung-icon-size) * -4);
}

.dung-UNDR {
  background-position: 0 calc(var(--raid-dung-icon-size) * -5);
}

.dung-UPPR {
  background-position: calc(var(--raid-dung-icon-size) * -1) calc(var(--raid-dung-icon-size) * -5);
}

.dung-VP {
  background-position: calc(var(--raid-dung-icon-size) * -2) calc(var(--raid-dung-icon-size) * -5);
}

.dung-WM {
  background-position: calc(var(--raid-dung-icon-size) * -3) calc(var(--raid-dung-icon-size) * -5);
}

.dung-WORK {
  background-position: calc(var(--raid-dung-icon-size) * -4) calc(var(--raid-dung-icon-size) * -5);
}

.dung-YARD {
  background-position: calc(var(--raid-dung-icon-size) * -5) calc(var(--raid-dung-icon-size) * -5);
}

/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
.expansion-logo {
  background-image: url("/images/expansions/sprite.png");
  background-repeat: no-repeat;
  background-size: calc(var(--expansion-logo-width) * 10);
  height: var(--expansion-logo-height);
  width: var(--expansion-logo-width);
}

.expansion-1 {
  background-position: 0 0;
}

.expansion-2 {
  background-position: calc(var(--expansion-logo-width) * -1) 0;
}

.expansion-3 {
  background-position: calc(var(--expansion-logo-width) * -2) 0;
}

.expansion-4 {
  background-position: calc(var(--expansion-logo-width) * -3) 0;
}

.expansion-5 {
  background-position: calc(var(--expansion-logo-width) * -4) 0;
}

.expansion-6 {
  background-position: calc(var(--expansion-logo-width) * -5) 0;
}

.expansion-7 {
  background-position: calc(var(--expansion-logo-width) * -6) 0;
}

.expansion-8 {
  background-position: calc(var(--expansion-logo-width) * -7) 0;
}

.expansion-9 {
  background-position: calc(var(--expansion-logo-width) * -8) 0;
}

.expansion-10 {
  background-position: calc(var(--expansion-logo-width) * -9) 0;
}

.expansion-11 {
  background-image: url("/images/expansions/tww.png");
  background-size: calc(var(--expansion-logo-circular-width) * 1);
  height: var(--expansion-logo-circular-height);
  width: var(--expansion-logo-circular-width);
}

/*
 * Copyright © 2025 Warband Score
 * All rights reserved.
 */
.link-icon {
  display: inline-block;
  height: 21.3333333333px;
  width: 21.3333333333px;
  margin-right: 4px;
}

.link-icon {
  background-image: url(/images/icons/external-logos.png);
  background-size: 42.6666666667px;
}

.icon-wcl {
  background-position: 0 0;
}

.icon-rio {
  background-position: -21.3333333333px 0;
}

main {
  width: 100%;
}

.character-content {
  display: flex;
  flex-direction: column;
}
.raid .character-content {
  letter-spacing: 0;
}
.character-content.character-content-inline {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
}
.character-content .tooltip a {
  align-items: center;
  display: flex;
}

.has-unknown-progress .class-icon {
  position: relative;
}
.has-unknown-progress .class-icon::after {
  content: "*";
  position: absolute;
  bottom: -17px;
  right: -1px;
  color: white;
  font-size: 32px;
  font-weight: 200;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 1px black, -1px 0 1px black, 1px 0 1px black, 0 -1px 1px black, 0 1px 1px black;
}
.has-unknown-progress .tooltip {
  max-width: 330px;
}

.raid-accomplishments.accomplished-lfr {
  background-color: rgba(30, 255, 0, 0.4);
}
.raid-accomplishments.accomplished-nrml {
  background-color: rgba(0, 112, 221, 0.6);
}
.raid-accomplishments.accomplished-aotc {
  background-color: rgba(163, 53, 238, 0.5);
}
.raid-accomplishments.accomplished-ce {
  background-color: rgba(255, 128, 0, 0.5);
}

section.accomplishment-summary {
  background-color: #1E1E1E;
  display: flex;
  flex: 33.3%;
  flex-direction: column;
  gap: 0.5rem;
}
section.accomplishment-summary .card-subtext {
  align-items: start;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.raid-accomplishments section.accomplishment-summary {
  flex: 50%;
}
section.accomplishment-summary.accomplishment-tnk {
  flex: 33.7%;
}

.seasons-summary-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.seasons-summary-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 4px;
  gap: 0.5rem;
  line-height: initial;
  padding-left: 0.5rem;
}
.seasons-summary-item.current-row {
  background-color: #FFFFFF;
}
.seasons-summary-item.current-row .seasons-summary-label {
  color: #000;
}
.seasons-summary-item.previous-row {
  background-color: #808080;
}
.seasons-summary-item.previous-row .seasons-summary-label {
  color: #000;
}
.seasons-summary-item.older-row {
  background-color: #000000;
}
.seasons-summary-item.older-row .seasons-summary-label {
  color: #888;
}

.seasons-summary-label {
  flex-shrink: 0;
  font-weight: 600;
  min-width: 74px;
  text-wrap: nowrap;
}

.seasons-summary-content {
  align-items: center;
  background-color: #2E2E2E;
  border: 1px solid;
  border-radius: 4px;
  display: flex;
  flex: 1;
  flex-direction: row;
  height: 30px;
  justify-content: center;
  padding: calc(0.5rem - 2px) 0.5rem;
}
.seasons-summary-content .count-display, .seasons-summary-content .character-progress {
  font-weight: 600;
  text-shadow: 0 0 2px black;
}

.current-row {
  border-color: #FFFFFF;
}

.previous-row {
  border-color: #808080;
}

.older-row {
  border-color: #000000;
}

.overall-summary-container, .expansion-content {
  align-items: end;
  display: flex;
  flex-direction: row;
  padding: 2rem 0 0;
}

.expansion-name {
  flex: 1;
}

.without-summary .expansion-name, .raid-summary .expansion-name {
  flex: 3;
}

.summary-header-container {
  color: #AAAAAA;
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 1.5rem;
  justify-content: end;
  margin-bottom: 4px;
  text-align: end;
}

.summary-name, .expansion-name, .refresh-button {
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.3;
}

.summary-name {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  white-space: nowrap;
}

.refresh-control {
  align-items: center;
  display: inline-flex;
}

.overall-summary-title {
  align-items: center;
  display: flex;
  gap: 0.25rem;
}

.refresh-button {
  background: transparent;
  border: 0;
  color: #22c9ff;
  cursor: pointer;
  line-height: 1;
  margin: 0 0 0 0.5rem;
  padding: 0;
}
.refresh-button:focus-visible {
  outline: 1px solid #FFFFFF;
}

.refresh-button--disabled {
  color: #808080;
  cursor: not-allowed;
}

.refresh-button--auth:hover {
  color: #FFFFFF;
}

.refresh-disabled-copy {
  color: #CCCCCC;
  font-size: 12px;
  margin: 0;
}

.top-character__portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3rem;
  height: 100%;
}
.top-character__entry--primary .top-character__portrait {
  flex: 0 0 10.15rem;
}

.top-character__avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.top-character__avatar-wrapper--empty {
  height: 100%;
}

.top-character__avatar {
  background: #1E1E1E;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.top-character__image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.top-character__placeholder {
  align-items: center;
  aspect-ratio: 1;
  display: grid;
  justify-items: center;
  pointer-events: none;
  position: relative;
  width: 2rem;
  z-index: 1;
}
.top-character__entry--primary .top-character__placeholder {
  width: 4.25rem;
}
.top-character__placeholder::before, .top-character__placeholder::after {
  border-radius: 50%;
  content: "";
  inset: calc(-1 * 4px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease-in-out;
}
.top-character__placeholder::before {
  border: 4px solid #1E1E1E;
}
.top-character__placeholder::after {
  border: 4px solid transparent;
  border-right-color: rgb(30, 255, 0);
  border-top-color: rgb(30, 255, 0);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.top-character__placeholder-logo {
  border-radius: 4px;
  display: block;
  height: auto;
  opacity: 30%;
  width: 70%;
  z-index: 2;
}
.top-character__entry--primary .top-character__placeholder-logo {
  width: 100%;
}

.top-character__avatar-wrapper--square,
.top-character__avatar--square {
  width: 100%;
  height: 100%;
}

.top-character__fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.top-character__fallback .top-character__fallback-logo {
  border-radius: 4px;
  display: block;
  height: auto;
  opacity: 0.5;
  width: 70%;
}

.top-character--loaded .top-character__placeholder {
  display: none;
}

.top-character--loading .top-character__placeholder::before, .top-character--loading .top-character__placeholder::after {
  opacity: 0.3;
}
.top-character--loading .top-character__placeholder::after {
  animation: top-character-ring-spin 0.9s linear infinite;
}

.top-character--error .top-character__placeholder::after {
  animation: none;
  opacity: 0;
}
.top-character--error .top-character__placeholder {
  display: none;
}
.top-character--error .top-character__placeholder::before {
  opacity: 0;
}
.top-character--error .top-character__fallback {
  display: flex;
}

.top-character__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1;
  height: 100%;
}

.top-character__label {
  font-size: 14px;
  font-weight: 200;
  margin: 0;
}

.top-character__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

.top-character__column {
  display: grid;
}

.top-character__column--secondary {
  align-content: stretch;
  grid-auto-rows: 1fr;
  gap: 0.25rem;
}

.top-character__entry {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  height: 3rem;
  box-sizing: border-box;
  background-color: #1E1E1E;
  border: 2px solid #0F0F0F;
  border-radius: 4px;
}
.top-character__entry.top-character__entry--primary {
  height: 6.25rem;
  gap: 0.5rem;
}

.top-character__rank {
  align-items: center;
  color: #3E3E3E;
  display: flex;
  height: 100%;
  justify-content: center;
}

.top-character__rank-value {
  display: block;
  font-weight: 800;
  line-height: 1;
  padding-right: 0.25rem;
}
.top-character__entry--primary .top-character__rank-value {
  font-size: 64px;
}
.top-character__entry--secondary .top-character__rank-value, .top-character__entry--tertiary .top-character__rank-value {
  font-size: 40px;
}

.top-character__name {
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 0 2px black;
}
.top-character__entry--primary .top-character__name {
  font-size: 32px;
}
.top-character__entry--secondary .top-character__name, .top-character__entry--tertiary .top-character__name {
  font-size: 14px;
}

.top-character__empty-message {
  color: #888;
  font-size: 13px;
  font-weight: 200;
  margin: 0;
}

.top-character__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-character__metric-item {
  align-items: baseline;
  display: inline-flex;
  font-size: 14px;
  gap: 2px;
}

.top-character__metric-trigger.character-content-inline {
  align-items: baseline;
  gap: 2px;
}

.top-character__metric,
.top-character__metric-value {
  font-weight: 400;
}

.top-character__metric--aotc {
  color: rgb(163, 53, 238);
}

.top-character__metric--ce {
  color: rgb(255, 128, 0);
}

.top-character__metric--normal {
  color: rgb(0, 112, 221);
}

.top-character__metric--lfr {
  color: rgb(30, 255, 0);
}

@keyframes top-character-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
.tooltip .refresh-meta {
  align-items: baseline;
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 0;
}
.tooltip .refresh-meta:first-of-type, .tooltip .refresh-meta:last-of-type {
  margin-top: 8px;
}

.refresh-last__value, .refresh-countdown__value, .created__value {
  font-weight: 400;
}

.refresh-support-btn-wrapper {
  margin: 0 auto;
  text-align: center;
}
.refresh-support-btn-wrapper .refresh-supporter-cta {
  margin: 4px 0 0;
  padding: 0.5rem 1rem;
}

.refresh-disabled-copy--auth {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.refresh-disabled-copy--auth .button {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.tooltip.refresh-tooltip {
  max-width: min(420px, 90vw);
  white-space: normal;
}

.refresh-support-msg {
  padding: 8px 0 0;
}
.refresh-support-msg p {
  line-height: 1.5;
  font-size: 16px;
}

.refresh-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refresh-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.refresh-option {
  border: 2px solid #808080;
  border-radius: 4px;
  background: #1E1E1E;
}
.refresh-option:not(.refresh-option--disabled):hover {
  border-color: #22c9ff;
}

.refresh-option__body {
  color: #AAAAAA;
  display: flex;
  flex-direction: column;
  padding: 4px 12px 8px;
  text-decoration: none;
}
.refresh-option__body:hover, .refresh-option__body:focus-visible {
  text-decoration: none;
}

.refresh-option--disabled {
  border-style: dashed;
}
.refresh-option--disabled .refresh-option__body {
  cursor: not-allowed;
}

.refresh-option__top {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.refresh-option__label {
  font-size: 13px;
  font-weight: 400;
}

.refresh-option__scope {
  list-style: disc;
  margin: 0 0 0 12px;
  padding: 0;
  color: #AAAAAA;
  font-size: 12px;
}

.refresh-option__scope li {
  margin-bottom: -2px;
}

.refresh-option__badge {
  color: #22c9ff;
  font-size: 12px;
  font-weight: 400;
  margin-left: auto;
  white-space: nowrap;
}

.expansion-logo.circular-shape {
  margin: 0;
}

.summary-list {
  align-items: end;
  justify-content: end;
  display: flex;
  flex-direction: column;
}

.summary-row-container {
  line-height: 1.3;
}

.summary-row.empty-row, .seasons-summary-wrapper .empty-row {
  color: #888;
}

.summary-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.expansion-content.raid-summary + .container-list,
.expansion-content.without-summary + .container-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}
.expansion-content.raid-summary + .container-list .container,
.expansion-content.without-summary + .container-list .container {
  height: 100%;
}
.expansion-content.raid-summary + .container-list .patch-content .raid-header .card-header-title,
.expansion-content.without-summary + .container-list .patch-content .raid-header .card-header-title {
  overflow: hidden;
  white-space: nowrap;
}

.summary-label {
  flex: 1;
  text-align: end;
}

.summary-value {
  flex: 0;
}
.overall-summary-container .summary-raid .summary-value {
  min-width: 48px;
}
.expansion-content .summary-raid .summary-value {
  min-width: 29px;
}
.summary-mplus .summary-value {
  min-width: 66px;
}

.summary-placeholder {
  font-weight: 200;
  max-width: 150px;
}

.summary-empty-message {
  color: #888;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.top-link {
  color: #FFFFFF;
  font-size: 1rem;
  text-decoration: none;
}
.top-link:hover {
  text-decoration: underline;
}

.patch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 20px;
}
.patch:first-of-type {
  margin-top: 0;
}

.patch-content, .summary-content {
  display: flex;
  flex: 1;
}
.patch-content h4, .summary-content h4 {
  margin: 0;
}

.summary-content {
  flex-direction: row;
  gap: 0.5rem;
}

.patch-content {
  flex-direction: column;
  gap: 0.5rem;
}

.patch-content.multiple-raids {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.patch-content.multiple-raids > section {
  min-width: 0;
}
.patch-content.multiple-raids > section.raid {
  flex: 1 1 0;
  order: 1;
}
.patch-content.multiple-raids > section.mplus {
  flex: 1 0 100%;
  order: 2;
}
.patch-content.multiple-raids .raid .card-subtext {
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

section.raid, section.mplus {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.achievement:first-child {
  flex: 2;
}

.rating:first-child {
  flex: 4;
}
.rating:nth-child(2) {
  flex: 3;
}
.rating:nth-child(3) {
  flex: 2;
}

.card-subtext {
  align-items: center;
  display: flex;
  font-weight: 200;
  gap: 0.5rem;
  margin: 0;
}
.summary-content .card-subtext {
  font-weight: 400;
}
.mplus .card-subtext {
  gap: 0.2rem;
}

.raid-icon-tooltip {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.raid-tooltip {
  text-align: left;
  white-space: normal;
}

.raid-tooltip-line {
  display: block;
}

.raid-tooltip-line:first-child {
  font-weight: 400;
  padding-bottom: 4px;
}

.season-tag-tooltip,
.seasons-summary-label-tooltip {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.season-tag-tooltip-content {
  text-align: left;
  white-space: normal;
}

.season-tooltip-line {
  display: block;
  font-size: 14px;
  font-weight: 200;
}

.season-tooltip-line:first-child {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 4px;
}

.raid-special-boss-name {
  flex: 1;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mplus-role-list {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mplus-role-item--collapsed {
  display: none;
}

.mplus-role-toggle-item {
  display: flex;
}

.mplus-role-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
}
.mplus-role-toggle:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: 1px;
}

.mplus-role-toggle-icon {
  align-items: center;
  background: #0F0F0F;
  border-radius: 0.3rem;
  box-sizing: content-box;
  color: #22c9ff;
  display: flex;
  font-size: 18px;
  height: var(--class-spec-icon-size);
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: var(--class-spec-icon-size);
}
.mplus-role-toggle:hover .mplus-role-toggle-icon, .mplus-role-toggle:focus-visible .mplus-role-toggle-icon {
  background: #22c9ff;
  color: #000;
}

.dung-icon, .raid-icon, .class-icon, .spec-icon {
  border-radius: 0.3rem;
}

.tooltip-header.account h3:first-of-type {
  color: #000000;
}

.bars--distribution.class-account .bars-row--distribution .bars-fill {
  background-color: rgba(0, 0, 0, 0.7);
}

.tooltip-header.dk h3:first-of-type {
  color: #C41F3B;
}

.bars--distribution.class-dk .bars-row--distribution .bars-fill {
  background-color: rgba(196, 31, 59, 0.7);
}

.tooltip-header.dh h3:first-of-type {
  color: #A330C9;
}

.bars--distribution.class-dh .bars-row--distribution .bars-fill {
  background-color: rgba(163, 48, 201, 0.7);
}

.tooltip-header.druid h3:first-of-type {
  color: #FF7D0A;
}

.bars--distribution.class-druid .bars-row--distribution .bars-fill {
  background-color: rgba(255, 125, 10, 0.7);
}

.tooltip-header.evoker h3:first-of-type {
  color: #33937F;
}

.bars--distribution.class-evoker .bars-row--distribution .bars-fill {
  background-color: rgba(51, 147, 127, 0.7);
}

.tooltip-header.hunter h3:first-of-type {
  color: #ABD473;
}

.bars--distribution.class-hunter .bars-row--distribution .bars-fill {
  background-color: rgba(171, 212, 115, 0.7);
}

.tooltip-header.mage h3:first-of-type {
  color: #69CCF0;
}

.bars--distribution.class-mage .bars-row--distribution .bars-fill {
  background-color: rgba(105, 204, 240, 0.7);
}

.tooltip-header.monk h3:first-of-type {
  color: #00FF96;
}

.bars--distribution.class-monk .bars-row--distribution .bars-fill {
  background-color: rgba(0, 255, 150, 0.7);
}

.tooltip-header.paladin h3:first-of-type {
  color: #F58CBA;
}

.bars--distribution.class-paladin .bars-row--distribution .bars-fill {
  background-color: rgba(245, 140, 186, 0.7);
}

.tooltip-header.priest h3:first-of-type {
  color: #FFFFFF;
}

.bars--distribution.class-priest .bars-row--distribution .bars-fill {
  background-color: rgba(255, 255, 255, 0.7);
}

.tooltip-header.rogue h3:first-of-type {
  color: #FFF569;
}

.bars--distribution.class-rogue .bars-row--distribution .bars-fill {
  background-color: rgba(255, 245, 105, 0.7);
}

.tooltip-header.shaman h3:first-of-type {
  color: #0070DE;
}

.bars--distribution.class-shaman .bars-row--distribution .bars-fill {
  background-color: rgba(0, 112, 222, 0.7);
}

.tooltip-header.warlock h3:first-of-type {
  color: #9482C9;
}

.bars--distribution.class-warlock .bars-row--distribution .bars-fill {
  background-color: rgba(148, 130, 201, 0.7);
}

.tooltip-header.warrior h3:first-of-type {
  color: #C79C6E;
}

.bars--distribution.class-warrior .bars-row--distribution .bars-fill {
  background-color: rgba(199, 156, 110, 0.7);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header.top-character {
  align-items: stretch;
  display: block;
}

h4.card-header {
  margin-bottom: 0.5rem;
}
.accomplishment-summary h4.card-header, h4.card-header.empty {
  margin-bottom: 0;
}

h2.card-header {
  font-size: 20px;
}

.card-header-title {
  font-weight: 400;
  text-align: left;
}
.multiple-raids .raid-header .card-header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accomplishment-summary .card-header-title, .raid-header .card-header-title, .mplus-header .card-header-title {
  line-height: 1.3;
}

.achievement .card-header-title, .role .card-header-title {
  overflow: visible;
}

.card-header-type .season-tag {
  margin: 0;
  padding: 4px 8px;
}

.card-header-type {
  color: #AAAAAA;
  font-weight: 200;
  text-align: right;
}

.character-progress {
  color: #CCCCCC;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  padding-top: 2px;
  text-align: center;
}
.character-progress:first-of-type {
  padding-top: 3px;
}
.character-content-inline .character-progress {
  font-size: inherit;
  padding-top: 0;
}
.character-progress.mplus-role-toggle-text {
  color: #22c9ff;
}

.character-content.pending-retry .character-progress {
  color: #22c9ff;
}

.character-content.no-icon.character-content-inline {
  gap: 0;
}
.character-content.no-icon.character-content-inline .character-progress {
  margin: 0;
}

.tooltip-retry {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tooltip-retry .retry-button {
  background: #2E2E2E;
  border: 1px solid #22c9ff;
  border-radius: 4px;
  color: #22c9ff;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.tooltip-retry .retry-button:hover {
  background: #22c9ff;
  color: #000;
}
.tooltip-retry .retry-button:disabled {
  border-color: #808080;
  background: #1E1E1E;
  color: #888;
  cursor: default;
}

.has-tooltip .spec-icon, .has-tooltip .class-icon, .has-tooltip .character-progress, .has-tooltip .top-character__metric, .has-tooltip .top-character__metric-value {
  cursor: pointer;
}

.dung-icon {
  cursor: pointer;
  position: relative;
}
.dung-icon .tooltip {
  min-width: auto;
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
}

.tooltip p:last-of-type {
  margin-bottom: 0;
}
.tooltip p em {
  font-weight: 400;
}
.tooltip .tooltip-body-primary {
  font-weight: 400;
}
.tooltip .tooltip-link {
  margin-bottom: 2px;
}
.tooltip .tooltip-link a {
  font-size: 16px;
}
.tooltip .tooltip-link-row {
  align-items: center;
  display: flex;
  gap: 12px;
  width: 100%;
}
.tooltip .tooltip-link-row .season-tag {
  margin-left: auto;
}
.tooltip .tooltip-retry-message {
  font-size: 12px;
  max-width: 300px;
  white-space: normal;
}
.tooltip .tooltip-info-note {
  color: #888;
}
.tooltip .tooltip-info-icon {
  align-items: center;
  border: 1px solid #888;
  border-radius: 999px;
  color: #888;
  display: inline-flex;
  font-size: 12px;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  margin-right: 4px;
  min-width: 1rem;
  vertical-align: text-top;
}
.tooltip .tooltip-footnote {
  color: #888;
  font-style: italic;
  font-size: 12px;
  margin-bottom: 12px;
  text-wrap: auto;
}

.tooltip-header {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.tooltip-header h3 {
  flex: 1;
}
.tooltip-header h3:last-of-type {
  font-weight: 200;
  text-align: end;
}
.tooltip-header h3:first-of-type {
  font-weight: 600;
  text-align: start;
  text-shadow: 0 0 2px black;
}

.tooltip.raid-accomplishment-tooltip {
  max-width: 21.8rem;
}

.bars {
  --bars-track-width: 200px;
  --bars-track-height: 1.5rem;
  --bars-label-width: 23px;
  --bars-gap: 0;
  width: calc(var(--bars-track-width) + var(--bars-label-width) + var(--bars-gap));
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0.5rem 0;
  padding: 0;
}

.bars-row {
  align-items: center;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  gap: var(--bars-gap);
}
.bars-row .bars-label {
  align-items: center;
  display: flex;
  flex: 0 0 var(--bars-label-width);
  font-weight: 600;
  overflow: hidden;
  width: var(--bars-label-width);
}

.bars-track {
  background-color: #0F0F0F;
  border: 1px solid #2E2E2E;
  flex: 0 0 var(--bars-track-width);
  height: var(--bars-track-height);
  position: relative;
  width: var(--bars-track-width);
  overflow: visible;
}

.bars-fill {
  background-color: var(--bars-fill-color, rgba(255, 255, 255, 0.4));
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}

.bars-row--progress.difficulty-mythic .bars-label {
  color: rgba(255, 128, 0, 0.7);
}
.bars-row--progress.difficulty-mythic .bars-fill {
  background-color: rgba(255, 128, 0, 0.5);
}
.bars-row--progress.difficulty-heroic .bars-label {
  color: rgba(163, 53, 238, 0.8);
}
.bars-row--progress.difficulty-heroic .bars-fill {
  background-color: rgba(163, 53, 238, 0.5);
}
.bars-row--progress.difficulty-normal .bars-label {
  color: rgb(0, 112, 221);
}
.bars-row--progress.difficulty-normal .bars-fill {
  background-color: rgba(0, 112, 221, 0.6);
}
.bars-row--progress.difficulty-lfr .bars-label {
  color: rgba(30, 255, 0, 0.7);
}
.bars-row--progress.difficulty-lfr .bars-fill {
  background-color: rgba(30, 255, 0, 0.4);
}

.bars-count {
  font-weight: 600;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

.bars-count--asterisk {
  font-size: calc(2 * 14px);
  font-weight: 200;
  line-height: 1;
  transform: translateY(-31%) translateX(-3%);
}

.bars-row.is-unknown .bars-fill {
  width: 0 !important;
}

.bars-row:last-child {
  margin-bottom: 0;
}

.bars-total-line {
  color: #888;
  font-size: 12px;
  font-weight: 200;
  line-height: 1;
  text-align: right;
}

.bars--distribution .bars-label {
  justify-content: center;
}
.bars--distribution .bars-label .spec-icon {
  border: 0;
  flex: 0 0 auto;
  height: var(--bars-label-width);
  width: var(--bars-label-width);
  --class-spec-icon-size: var(--bars-label-width);
}

.tooltip-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

section.tooltip-section {
  background-color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
section.tooltip-section + .tooltip-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4px;
}

.tooltip-section-body {
  --raid-dung-icon-size: 3rem;
}
.tooltip-section-body .raid-icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tooltip-section-body .raid-icon-list-item {
  height: var(--raid-dung-icon-size);
  list-style: none;
}
.tooltip-section-body .raid-icon-link {
  display: block;
  height: var(--raid-dung-icon-size);
  text-decoration: none;
}
.tooltip-section-body .raid-icon-link:focus .raid-icon {
  filter: brightness(1.2);
  outline: 2px solid #22c9ff;
  outline-offset: 1px;
}

.season-tag {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 2px;
  padding: 0 4px;
}
.season-tag.current-season {
  background-color: #FFFFFF;
  color: #000;
}
.season-tag.recent-season {
  background-color: #808080;
  color: #000;
}
.season-tag.older-season {
  background-color: #000000;
  color: #888;
}

.raid.hide-bosses {
  border-color: #2E2E2E;
}
.raid.hide-bosses h3 {
  line-height: 1;
}

.sub-section.achievement {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mplus-accomplishments.container {
  border: none;
}

.score-increase-overlay {
  position: absolute;
  width: var(--class-spec-icon-size);
  height: var(--class-spec-icon-size);
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(30, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 4px;
}
.score-increase-overlay.active {
  opacity: 1;
  animation: fadeOutOverlay 10s ease-in-out forwards;
}

.score-increase-overlay__text {
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 0 2px #000;
}
.score-increase-overlay.active .score-increase-overlay__text {
  animation: scaleAndFade 10s ease-in-out forwards;
}

.summary--stale .summary__container {
  background: none;
}
.summary--stale .summary__header, .summary--stale .character-section {
  margin: auto;
  max-width: 600px;
  padding: 0.5rem 2rem;
  text-align: center;
}
.summary--stale .summary__title {
  margin: 0.5rem 0 1rem;
}
.summary--stale .summary__msg {
  font-weight: 200;
}
.summary--stale .summary_last-refresh {
  font-size: 14px;
  font-weight: 200;
}
.summary--stale .character-section ul {
  margin-top: 0.5rem;
}
.summary--stale .character-section li {
  display: inline-block;
}

@keyframes fadeOutOverlay {
  0%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleAndFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@media (min-width: 1290px) {
  .summary-container {
    flex-direction: row;
  }
  .summary-container .container {
    flex: 1;
  }
  .patch-content {
    flex-direction: row;
    flex-grow: 1;
  }
  .patch-content > section {
    flex: 1;
    overflow: hidden;
  }
  .patch-content .hide-bosses {
    border-color: #2E2E2E;
    flex: 0 0 3.25rem;
  }
  .patch-content .hide-bosses .card-header {
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 4px 0;
    writing-mode: sideways-lr;
  }
  .patch-content.multiple-raids {
    flex-wrap: wrap;
  }
  .patch-content.multiple-raids > section {
    flex: 1 1 50%;
    max-width: 50%;
  }
  .patch-content.multiple-raids > section.raid {
    order: 1;
  }
  .patch-content.multiple-raids > section.mplus {
    flex: 1 1 50%;
    max-width: 50%;
    order: 2;
  }
}
@media (max-width: 1289px) {
  .top-character__entry {
    height: 3.5rem;
  }
  .top-character__entry.top-character__entry--primary {
    height: 7.25rem;
  }
  .top-character__entry .top-character__name {
    font-size: 18px;
  }
  .top-character__entry--primary .top-character__name {
    font-size: 32px;
  }
  .top-character__rank {
    flex: 0 0 3rem;
  }
  .top-character__portrait {
    flex: 0 0 3.5rem;
  }
  .top-character__entry--primary .top-character__portrait {
    flex: 0 0 13.25rem;
  }
  .top-character__avatar .top-character__placeholder {
    width: 2.5rem;
  }
}
@media (max-width: 768px) {
  .refresh-option a {
    padding: 4px 8px;
  }
  .refresh-support-msg {
    padding: 0.5rem 0;
  }
  .refresh-support-msg p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
  }
  .overall-summary-container, .expansion-content {
    margin: 0 6px;
  }
  .summary-name, .expansion-name, .refresh-button {
    font-size: 2rem;
    line-height: 1.2;
  }
  .summary-name {
    white-space: nowrap;
    gap: 2px;
  }
  .refresh-button {
    margin-left: 0.25rem;
  }
  .seasons-summary-content {
    padding: 0.25rem 0.25rem;
  }
  .seasons-summary-content .count-display, .seasons-summary-content .character-progress {
    font-size: 14px;
  }
  .seasons-summary-content .empty-row h4 {
    line-height: inherit;
  }
  .seasons-summary-label {
    min-width: 54px;
  }
  .summary-item {
    font-size: 12px;
  }
  .overall-summary-container .summary-raid .summary-value {
    min-width: 38px;
  }
  .expansion-content .summary-raid .summary-value {
    min-width: 22px;
  }
  .summary-mplus .summary-value {
    min-width: 56px;
  }
  .summary-row-container {
    line-height: 1.6;
  }
  .patch-content {
    gap: 6px;
  }
  .expansion-content.raid-summary + .container-list,
  .expansion-content.without-summary + .container-list {
    display: flex;
    flex-direction: column-reverse;
  }
  .summary-content {
    gap: 0.25rem;
  }
  .summary-header-container {
    gap: 0.75rem;
  }
  .raid-summary .summary-header-container {
    flex: 3;
  }
  .summary-row {
    gap: 0.25rem;
  }
  .top-character__layout {
    gap: 0.25rem;
  }
  .top-character__entry {
    height: 3rem;
  }
  .top-character__entry.top-character__entry--primary {
    height: 6.25rem;
    gap: 0.25rem;
  }
  .top-character__portrait {
    flex: 0 0 3rem;
  }
  .top-character__entry--primary .top-character__portrait {
    flex: 0 0 32.5%;
  }
  .top-character__avatar .top-character__placeholder {
    width: 2rem;
  }
  .top-character__entry--primary .top-character__avatar .top-character__placeholder {
    width: 4.25rem;
  }
  .top-character__rank {
    flex: 0 0 1.5rem;
  }
  .top-character__entry .top-character__name {
    font-size: 15px;
  }
  .top-character__entry--primary .top-character__name {
    font-size: 32px;
    line-height: 1;
  }
  .skipped-event .card-header-type, .accomplishment-summary .card-header-type, .role .card-header-type {
    display: none;
  }
  .hide-bosses .card-header-type {
    display: inherit;
  }
  .class-icon, .spec-icon, .empty-icon {
    border-width: 1px;
  }
  .bars {
    --bars-track-height: 1.3rem;
  }
  .bars-row {
    font-size: 13px;
  }
  .score-increase-overlay__text {
    font-size: 10px;
    letter-spacing: 0;
  }
  .top-character__metric-item, .character-progress {
    font-size: 12px;
    letter-spacing: 0;
  }
  .seasons-summary-wrapper, section.raid, section.mplus {
    gap: 0.25rem;
  }
  .mplus-role-list, .accomplishment-summary .card-subtext {
    gap: 6px;
  }
  .mplus-role-toggle-icon {
    height: var(--class-spec-icon-size);
    width: var(--class-spec-icon-size);
  }
  .has-unknown-progress .tooltip {
    max-width: 80%;
  }
  .has-unknown-progress .class-icon::after {
    bottom: -14px;
    right: 0;
    font-size: 28px;
  }
  .tooltip.raid-accomplishment-tooltip {
    max-width: min(17.5rem, 90vw);
  }
  .tooltip-section-body {
    --raid-dung-icon-size: 2.5rem;
  }
  .tooltip-section-body .raid-icon-list {
    gap: 0.25rem;
  }
  .tooltip .tooltip-link a {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  .top-character__layout {
    display: block;
  }
  .top-character__column--secondary, .top-character__rank {
    display: none;
  }
  .top-character__entry.top-character__entry--primary {
    height: 5.5rem;
  }
  .tooltip {
    max-width: 90%;
  }
}

/*# sourceMappingURL=summary.css.map */