/* Crimson accents only — the original artwork, surfaces and white typography stay intact. */
:root {
  --ruby: #ffb7bc;
  --ruby-light: #ffd5d8;
  --ruby-line: #dc727b;
  --ruby-wash: rgba(255, 183, 188, .16);
}

/* Text accents. Body copy deliberately remains the original neutral white/grey. */
.nav__links li::after,
.nav__links li:hover a,
.nav__links li.active a,
.header__servers-name span,
.main-info__item-title-big span,
.text-box a:not(.btn) {
  color: var(--ruby);
}

.header__info-title { color: #ffe7e9; }

.header__info-title,
.timer__title span {
  text-shadow: 0 3px 12px rgba(255, 183, 188, .30), 0 6px 24px rgba(177, 47, 65, .18);
}

.nav__links li::after { background-color: var(--ruby); }

/* Buttons retain their original shape and dark transparent center, only blue becomes ruby. */
.btn,
.main-articles__item .button,
.main-clans .button,
.main-votes__item,
.main-clans__item {
  border-color: var(--ruby-line);
  color: #fff5f5;
}

.btn::before,
.btn::after,
.main-articles__item .button::before,
.main-articles__item .button::after,
.main-clans .button::before,
.main-clans .button::after {
  border-color: var(--ruby-line);
}

.btn span::after,
.main-articles__item .button span::after,
.main-clans .button span::after,
.main-votes__item::after {
  border-color: rgba(255, 183, 188, .58);
}

.btn:hover,
.btn.active,
.main-articles__item:hover .button,
.main-clans .button:hover {
  border-color: var(--ruby-light);
  color: #fff;
}

.btn:hover span::after,
.btn.active span::after,
.main-articles__item:hover .button span::after,
.main-clans .button:hover span::after,
.main-votes__item:hover::after {
  background-color: var(--ruby-wash);
}

.btn--red { border-color: var(--ruby-light); color: #fff5f5; }
.btn--red::before,
.btn--red::after { border-color: var(--ruby-light); }
.btn--red span::after { border-color: rgba(255, 213, 216, .55); }
.btn--red:hover span::after,
.btn--red.active span::after { background-color: rgba(255, 183, 188, .20); }

/* The main CTA needs a little more presence than the standard outline buttons. */
.btn-dropdown-wrapper .btn {
  background: rgba(20, 14, 17, .72);
  border-color: rgba(255, 183, 188, .56);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .10);
  color: #ffe7e9;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-dropdown-wrapper {
  isolation: isolate;
}

.btn-dropdown-wrapper::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 18px;
  left: 50%;
  width: 250px;
  height: 62px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 183, 188, .31) 0%, rgba(201, 63, 80, .14) 38%, transparent 74%);
  filter: blur(15px);
  opacity: .70;
  animation: start-playing-glow 4.8s ease-in-out infinite;
}

.btn-dropdown-wrapper .btn:hover,
.btn-dropdown-wrapper.active .btn {
  background: rgba(62, 32, 39, .74);
  border-color: #ffccd0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .14);
}

@keyframes start-playing-glow {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(.94); opacity: .48; }
  50% { transform: translateX(-48%) translateY(-2px) scale(1.08); opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-dropdown-wrapper::before { animation: none; }
}

/* Menus are intentionally almost black, with only a restrained wine tint. */
.nav__links .dropdown-menu,
.btn-dropdown-wrapper .dropdown-menu-btn {
  background: #160b0e;
  border-color: rgba(255, 183, 188, .26);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav__links .dropdown-menu li:not(:last-child) a,
.btn-dropdown-wrapper .dropdown-menu-btn li:not(:last-child) a {
  border-color: rgba(255, 183, 188, .14);
}

.nav__links .dropdown-menu li a,
.btn-dropdown-wrapper .dropdown-menu-btn li a {
  color: #ffe9eb;
}

.nav__links .dropdown-menu li a:hover,
.btn-dropdown-wrapper .dropdown-menu-btn li a:hover {
  background: rgba(255, 183, 188, .12);
  color: #fff;
}

.nav__socials li a,
.nav__socials li a::before,
.nav__socials li a::after,
.nav__socials li::after {
  border-color: var(--ruby-line) !important;
}

.nav__open-links::before,
.nav__open-links::after,
.nav__open-links-item { background-color: var(--ruby); }
.nav__open-links:hover::before,
.nav__open-links:hover::after { background-color: var(--ruby-light); }

/* Inner pages used a separate blue texture in the base stylesheet. */
.inner-page .content-area {
  background:
    linear-gradient(rgba(31, 27, 29, .82), rgba(20, 17, 19, .86)),
    url("../images/bg/inner_page_bg.png") top center / auto no-repeat;
  background-blend-mode: color, normal;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .20);
}

.inner-page__title,
.content-nav,
.stat-nav,
.stat-sub-nav {
  border-color: rgba(255, 183, 188, .16);
}

.content-nav,
.stat-nav,
.stat-sub-nav {
  background: rgba(18, 16, 18, .38);
}

.inner-page__title-small,
.text-box,
.text-box b,
.text-box strong,
.content-text {
  color: #dcc8ca;
}

/* Recolours the small title ornament instead of leaving a blue detail behind. */
.inner-page__title::after {
  filter: sepia(1) saturate(1.65) hue-rotate(298deg) brightness(1.16);
}

/* Download-page cards: replace their remaining blue title and metadata accents. */
.start-game__box-title span,
.start-game__box-link-size,
.start-game__box-link-size span {
  color: var(--ruby);
}

.start-game__box-link {
  border-color: rgba(255, 183, 188, .48);
}

.start-game__box-link::after {
  border-color: rgba(255, 183, 188, .18);
}

.start-game__box-link:hover::after {
  background-color: rgba(255, 183, 188, .10);
}

/* Decorative artwork variants for the crimson theme. */
.main-clans::after,
.discord-widget::after {
  background-image: url("../images/bg/main-clans_red.png");
}

.main-votes::after {
  background-image: url("../images/bg/main-votes_red.png");
}

/* Discord is a cross-origin iframe, so this is a visual tint rather than a true theme. */
.discord-widget iframe {
  filter: hue-rotate(112deg) saturate(.72) brightness(1.05);
}

.crimson-footer-smoke .footer {
  background-image: url("../images/bg/footer_smoke_bg_red.png");
}