:root {
    --primary: #E11D48;
    --primary-hover: #BE123C;
    --secondary: #F59E0B;
    --secondary-hover: #D97706;
    --accent: #06B6D4;
    --background-dark: #0F0E0E;
    --background-dark-elevated: #1A1615;
    --background-light: #FAFAFA;
    --background-light-elevated: #F4F4F5;
    --text-dark-primary: #F9FAFB;
    --text-dark-secondary: #D1D5DB;
    --text-dark-muted: #9CA3AF;
    --border-dark: #2E2421;
    --border-light: #E4E4E7;
    --glow-color: rgba(225, 29, 72, 0.15);
}

.text-muted {
    color: var(--text-dark-muted) !important;
}

.arcade-parlor-theme {
    background-color: var(--background-dark);
    color: var(--text-dark-primary);
}

/* ===== header ===== */
.crimson-header {
    font-family: 'Outfit', sans-serif;
}

.crimson-header .font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.crimson-header .js-dropdown-menu {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
}

/* ===== hero ===== */
.crimson-hero {
    background-color: #0F0E0E;
    font-family: 'Outfit', sans-serif;
}

.crimson-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
}

.crimson-hero .crimson-hero-wrapper {
    background-color: #1A1615;
    border: 2px solid #2E2421;
    border-radius: 60px 40px 80px 50px / 50px 70px 40px 60px;
}

@media (max-width: 767px) {
    .crimson-hero .crimson-hero-wrapper {
        border-radius: 30px 20px 40px 25px / 25px 35px 20px 30px;
    }
}

.crimson-hero .fluid-image-frame {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    overflow: visible;
}

.crimson-hero .hero-art-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.crimson-hero .hero-badge {
    z-index: 20;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .crimson-hero .hero-badge {
        max-width: calc(100% - 2rem);
        white-space: normal;
        line-height: 1.2;
    }
}

.crimson-hero .js-tab-btn {
    background-color: transparent;
    border-color: #2E2421;
    color: #D1D5DB;
    transition: none;
}

.crimson-hero .js-tab-btn:hover {
    border-color: #E11D48;
}

.crimson-hero .js-tab-btn.active {
    background-color: #E11D48;
    border-color: #E11D48;
    color: #F9FAFB;
}

/* ===== game-of-the-day ===== */
.game-of-the-day-section {
    font-family: 'Outfit', sans-serif;
}

.game-of-the-day-section .font-heading {
    font-family: 'Space Grotesk', sans-serif;
}

.game-of-the-day-section .js-game-wrapper:fullscreen {
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
}

.game-of-the-day-section .js-game-wrapper:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
}

/* ===== daily-challenge ===== */
#daily-challenge-section {
    font-family: 'Outfit', sans-serif;
}

#daily-challenge-section .font-heading {
    font-family: 'Space Grotesk', sans-serif;
}

#daily-challenge-section button {
    cursor: pointer;
}

/* ===== new-games ===== */
.crimson-new-games .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crimson-new-games .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-recommended-games .line-clamp-1,
.home-recommended-games .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-recommended-games .line-clamp-1 {
    -webkit-line-clamp: 1;
}

.home-recommended-games .line-clamp-2 {
    -webkit-line-clamp: 2;
}

/* ===== rules-controls ===== */
.rules-controls-section .key-active {
    background-color: #E11D48 !important;
    border-color: #E11D48 !important;
    color: #F9FAFB !important;
    box-shadow: 0 0 12px rgba(225, 29, 72, 0.4);
}

/* ===== game-grid ===== */
.game-grid-section {
    background-color: #0F0E0E;
}

.game-grid-section .game-card {
    background-color: #1A1615;
    border: 1px solid #2E2421;
    transition: border-color 0s, color 0s;
}

.game-grid-section .game-card:hover {
    border-color: #E11D48;
}

.game-grid-section .game-card:hover .game-title {
    color: #E11D48;
}

.game-grid-section .game-title {
    color: #F9FAFB;
    transition: color 0s;
}

.game-grid-section .search-input::placeholder {
    color: #9CA3AF;
    opacity: 0.8;
}

.game-grid-section .filter-btn {
    background-color: transparent;
    border: 1px solid #2E2421;
    color: #D1D5DB;
    transition: background-color 0s, border-color 0s, color 0s;
}

.game-grid-section .filter-btn.is-active {
    background-color: #E11D48;
    border-color: #E11D48;
    color: #F9FAFB;
}

/* ===== footer ===== */
.crimson-footer iframe {
    filter: grayscale(1) invert(0.9) contrast(1.2);
}

.crimson-footer a {
    transition: color 0.15s ease-in-out;
}

.crimson-footer .ph-bold {
    font-size: 16px;
}

.crimson-header {
    font-family: 'Outfit', sans-serif;
}

.crimson-header .font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.crimson-header .js-dropdown-menu {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
}

.crimson-footer iframe {
    filter: grayscale(1) invert(0.9) contrast(1.2);
}

.crimson-footer a {
    transition: color 0.15s ease-in-out;
}

.crimson-footer .ph-bold {
    font-size: 16px;
}

.game-detail-page {
    background-color: #0F0E0E;
}

.game-detail-page .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-detail-page .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ===== PAGE: about ===== */
.about-section {
  font-family: 'Outfit', sans-serif;
}
.about-section h1, .about-section h2, .about-section h3, .about-section h4 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ===== PAGE: achievements ===== */
.crimson-achievements .active-filter {
  background-color: #E11D48 !important;
  border-color: #E11D48 !important;
  color: #F9FAFB !important;
}

.crimson-achievements input::placeholder {
  color: #9CA3AF;
  opacity: 1;
}

/* ===== PAGE: tournaments ===== */
.tournaments-schedule-section {
  background-color: #0F0E0E;
}
.tournaments-schedule-section .js-tournament-card {
  border-color: #2E2421;
  transition: border-color 0s;
}
.tournaments-schedule-section .js-tournament-card:hover {
  border-color: #E11D48;
}

/* ===== PAGE: leaderboard ===== */
.crimson-leaderboard-section .js-time-filter.active {
  background-color: #E11D48;
  border-color: #E11D48;
  color: #F9FAFB;
}

.crimson-leaderboard-section select option {
  background-color: #0F0E0E;
  color: #F9FAFB;
}

.crimson-leaderboard-section .js-leaderboard-row {
  transition: background-color 0.15s ease-in-out;
}

/* ===== PAGE: daily-tasks ===== */
.daily-tasks-section .js-task-search::placeholder {
  color: #6B7280;
  opacity: 0.9;
}
.daily-tasks-section .font-heading {
  font-family: 'Space Grotesk', sans-serif;
}

/* ===== PAGE: hall-of-fame ===== */
.fame-grid {
  font-family: 'Outfit', sans-serif;
  background-color: #0F0E0E;
}
.fame-grid .heading-font {
  font-family: 'Space Grotesk', sans-serif;
}
.fame-grid .custom-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fame-grid .custom-card:hover {
  border-color: #E11D48;
}
.fame-grid .custom-input::placeholder {
  color: #9CA3AF;
  opacity: 0.8;
}

/* ===== PAGE: faq ===== */
.crimson-faq-section {
  background-color: #0F0E0E;
}
.crimson-faq-section .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, border-color 0.3s ease-out;
}
.crimson-faq-section .faq-item.is-active .faq-content {
  border-top-width: 1px;
  border-color: #2E2421;
}
.crimson-faq-section .js-faq-icon {
  transition: transform 0.2s ease-out;
}
.crimson-faq-section .faq-item.is-active .js-faq-icon {
  transform: rotate(180deg);
}

/* ===== PAGE: online-players ===== */
.players-status-section {
  font-family: 'Outfit', sans-serif;
}
.players-status-section h1,
.players-status-section h2,
.players-status-section h3 {
  font-family: 'Space Grotesk', sans-serif;
}
.players-status-section .filter-btn-active {
  background-color: #E11D48 !important;
  border-color: #E11D48 !important;
  color: #F9FAFB !important;
}

/* ===== PAGE: lobby ===== */
.lobby-rooms {
  font-family: 'Space Grotesk', 'Outfit', sans-serif;
}
.lobby-rooms input::placeholder {
  color: #9CA3AF;
  opacity: 1;
}
.lobby-rooms .js-filter-btn {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lobby-rooms .js-filter-btn.active {
  background-color: #E11D48;
  color: #F9FAFB;
}

/* ===== PAGE: contact ===== */
.crimson-contact {
  background-color: #0F0E0E;
}
.crimson-contact .crimson-card {
  transition: border-color 0.2s ease;
}
.crimson-contact iframe {
  filter: grayscale(0.9) contrast(1.2) invert(0.9);
}

/* ===== PAGE: privacy ===== */
.privacy-text {
  font-family: 'Outfit', sans-serif;
}
.privacy-text h1,
.privacy-text h2 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ===== PAGE: terms ===== */
.terms-container {
  font-family: 'Outfit', sans-serif;
}
.terms-container h2 {
  font-family: 'Space Grotesk', sans-serif;
}
.terms-container input::placeholder {
  color: #6B7280;
}
.terms-container .js-terms-item {
  scroll-margin-top: 100px;
}

/* ===== PAGE: disclaimer ===== */
.crimson-disclaimer {
  font-family: 'Outfit', sans-serif;
}
.crimson-disclaimer h1,
.crimson-disclaimer h2,
.crimson-disclaimer h3,
.crimson-disclaimer button {
  font-family: 'Space Grotesk', sans-serif;
}
.crimson-disclaimer .js-disclaimer-content {
  transition: all 0.2s ease-in-out;
}
.crimson-disclaimer .js-disclaimer-icon.is-active {
  transform: rotate(180deg);
}

.arcade-comment-card {
    background-color: #1A1615;
    border: 1px solid #2E2421;
    border-left: 4px solid #E11D48;
    padding: 1.5rem;
    border-radius: 8px;
    color: #F9FAFB;
}

.arcade-comment-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #E11D48;
    background-color: #0F0E0E;
}

.arcade-comment-author {
    color: #F9FAFB;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.arcade-comment-badge {
    background-color: #2E2421;
    color: #E11D48;
    border: 1px solid #E11D48;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.arcade-comment-text {
    color: #D1D5DB;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

.arcade-comment-btn {
    color: #9CA3AF;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

.arcade-comment-btn:hover {
    color: #E11D48;
}

.arcade-reply-card {
    background-color: #0F0E0E;
    border: 1px solid #2E2421;
    border-left: 4px solid #F59E0B;
    padding: 1.25rem;
    border-radius: 8px;
    color: #F9FAFB;
    margin-left: 1.5rem;
}

@media (min-width: 768px) {
    .arcade-reply-card {
        margin-left: 3.5rem;
    }
}

.arcade-reply-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #F59E0B;
    background-color: #1A1615;
}

.arcade-reply-author {
    color: #F9FAFB;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.arcade-reply-badge {
    background-color: #2E2421;
    color: #F59E0B;
    border: 1px solid #F59E0B;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.arcade-reply-text {
    color: #D1D5DB;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

.arcade-reply-btn {
    color: #9CA3AF;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

.arcade-reply-btn:hover {
    color: #F59E0B;
}


/* ===== PAGE TEMPLATE: games-list ===== */
.crimson-header {
    font-family: 'Outfit', sans-serif;
}

.crimson-header .font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.crimson-header .js-dropdown-menu {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
}

.crimson-footer iframe {
    filter: grayscale(1) invert(0.9) contrast(1.2);
}

.crimson-footer a {
    transition: color 0.15s ease-in-out;
}

.crimson-footer .ph-bold {
    font-size: 16px;
}

.crimson-game-detail {
    background-color: #0F0E0E;
}

.crimson-game-detail .crimson-fullscreen-active {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    max-width: none !important;
    background: #000 !important;
    display: block !important;
    overflow: hidden !important;
}

.crimson-game-detail .crimson-fullscreen-active > div:first-child {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

.crimson-game-detail .crimson-fullscreen-active iframe {
    height: 100% !important;
    width: 100% !important;
    border: 0 !important;
    display: block !important;
}