:root {
    --color-bg-primary: #0b0813;
    --color-bg-secondary: #140f28;
    --color-bg-tertiary: #1e173b;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-accent-purple: #a855f7;
    --color-accent-cyan: #06b6d4;
    --color-accent-gold: #fbbf24;
    --color-accent-red: #f43f5e;
    --font-primary: 'Outfit', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.text-muted {
    color: #94a3b8 !important;
}

.font-display {
    font-family: var(--font-display);
}

*:focus-visible {
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 2px;
}

/* ===== header ===== */
.wild-carousel-header {
    background-color: #140f28;
}

.wild-carousel-header .nav-link {
    position: relative;
}

.wild-carousel-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #a855f7 0%, #06b6d4 100%);
    transition: width 0.3s ease;
}

.wild-carousel-header .nav-link:hover::after {
    width: 100%;
}

/* ===== hero ===== */
.wild-carousel-hero {
    position: relative;
}

.wild-carousel-hero .ticker-track {
    display: flex;
    animation: heroTickerScroll 30s linear infinite;
}

@keyframes heroTickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.wild-carousel-hero .js-filter-btn.active {
    background-color: #a855f7;
    border-color: #a855f7;
    color: #f8fafc;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.wild-carousel-hero .js-hero-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== editors-choice ===== */
.editors-choice-section {
    background-color: #0b0813;
}

.editors-choice-section .js-choice-card {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.editors-choice-section .js-choice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
}

/* ===== difficulty-rating ===== */
.difficulty-rating-section {
    background-color: #0b0813;
    font-family: 'Outfit', sans-serif;
}

.difficulty-rating-section .section-title {
    font-family: 'Space Grotesk', sans-serif;
}

.difficulty-rating-section .filter-btn {
    background-color: #140f28;
    border: 1px solid #1e173b;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.difficulty-rating-section .filter-btn.active {
    background: linear-gradient(90deg, #a855f7 0%, #06b6d4 100%);
    color: #f8fafc;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.difficulty-rating-section .filter-btn:hover:not(.active) {
    border-color: #a855f7;
    color: #f8fafc;
}

.difficulty-rating-section .game-card-wrapper {
    transition: all 0.3s ease;
    border: 1px solid #1e173b;
}

.difficulty-rating-section .game-card-wrapper:hover {
    transform: translateY(-4px);
    border-color: #a855f7;
    box-shadow: 0 10px 30px -10px rgba(168, 85, 247, 0.3);
}

/* ===== game-grid ===== */
.wild-carousel-grid {
    font-family: 'Outfit', sans-serif;
}

.wild-carousel-grid h2 {
    font-family: 'Space Grotesk', sans-serif;
}

.wild-carousel-grid .js-filter-tab.active {
    background-size: 200% auto;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.wild-carousel-grid .js-game-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.wild-carousel-grid .js-game-card:hover {
    transform: translateY(-4px);
}

/* ===== support-faq ===== */
.wild-carousel-support .faq-item:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

.wild-carousel-support .contact-card:hover {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.15);
}

/* ===== no-money-notice ===== */
.wild-carousel-notice {
    background-color: #0b0813;
}

.wild-carousel-notice .js-details-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== footer ===== */
.wild-carousel-footer {
    font-family: 'Outfit', sans-serif;
}

.wild-carousel-footer h3 {
    font-family: 'Space Grotesk', sans-serif;
}

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

/* ===== PAGE: about ===== */
.about-content .js-tab-btn {
  transition: all 0.3s ease;
}
.about-content img {
  filter: brightness(0.9);
  transition: filter 0.3s ease;
}
.about-content img:hover {
  filter: brightness(1.1);
}

/* ===== PAGE: game-collection ===== */
.games-grid-main {
  background-color: #0b0813;
  font-family: 'Outfit', sans-serif;
}
.games-grid-main .arcade-card-border {
  position: relative;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.4) 0%, rgba(6, 182, 212, 0.1) 100%);
  padding: 1px;
  transition: all 0.3s ease;
}
.games-grid-main .arcade-card-border:hover {
  background: linear-gradient(180deg, #a855f7 0%, #06b6d4 100%);
}
.games-grid-main .arcade-card-content {
  background-color: #140f28;
  height: 100%;
}
.games-grid-main .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== PAGE: tournament-history ===== */
.tournament-history-section {
  background-image: radial-gradient(circle at top right, rgba(168, 85, 247, 0.08), transparent 45%);
}
.tournament-history-section .js-filter-btn {
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.tournament-history-section .js-filter-btn:hover {
  border-color: #06b6d4;
}

/* ===== PAGE: hall-of-fame ===== */
.fame-list-block .js-search-input::placeholder {
  color: #64748b;
  opacity: 1;
}
.fame-list-block .js-player-card {
  min-height: 250px;
}

/* ===== PAGE: update-news ===== */
.news-section {
  font-family: 'Outfit', 'Space Grotesk', sans-serif;
  background-color: #0b0813;
}
.news-section .js-search-input::placeholder {
  color: #64748b;
  opacity: 1;
}
.news-section .js-news-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.news-section .js-news-card:hover {
  transform: translateY(-4px);
}

/* ===== PAGE: contacts ===== */
m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
            </svg>
          </div>
          <div>
            <h2 class="text-[16px] md:text-[20px] font-semibold text-[#f8fafc] mb-1">อีเมลติดต่อ</h2>
            <p class="text-[14px] md:text-[15px] text-[#94a3b8] leading-relaxed">{{mail}}</p>
          </div>
        </div>

        <div class="bg-[#140f28] border border-[#a855f7]/30 rounded-[12px] p-6 flex items-start gap-4 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)] hover:border-[#06b6d4]/50 transition-all duration-300">
          <div class="p-3 bg-[#1e173b] rounded-[8px] text-[#06b6d4] shrink-0">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.084.29.125.597.125.904 0 2.203-1.666 4.06-3.82 4.202a4.853 4.853 0 01-7.777 0c-2.154-.141-3.82-1.999-3.82-4.202 0-.307.041-.614.125-.904M6.03 20.087A9.001 9.001 0 0112 18c2.32 0 4.445.875 6.03 2.307m0 0H6.03" />
            </svg>
          </div>
          <div>
            <h2 class="text-[16px] md:text-[20px] font-semibold text-[#f8fafc] mb-1">WhatsApp</h2>
            <p class="text-[14px] md:text-[15px] text-[#94a3b8] leading-relaxed">{{phone-wa}}</p>
          </div>
        </div>
      </div>

      <div class="flex flex-col h-full">
        <div class="bg-[#140f28] border border-[#a855f7]/30 rounded-[12px] overflow-hidden flex-1 min-h-[350px] md:min-h-full shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)] relative">
          <div class="w-full h-full min-h-[350px] flex items-center justify-center">
            {{maps}}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

/* ===== PAGE: chat ===== */
.chat-board {
  font-family: 'Outfit', 'Space Grotesk', sans-serif;
}
.chat-board .js-message-item {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.chat-board .js-message-item:hover {
  transform: translateY(-2px);
}
.chat-board .js-tab-btn {
  border: 1px solid transparent;
}
.chat-board .js-tab-btn.is-active {
  background-color: #a855f7 !important;
  color: #f8fafc !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}
.chat-board .is-read {
  opacity: 0.75;
}
.chat-board .is-read h3 {
  color: #94a3b8 !important;
}
.chat-board .is-read .js-status-text {
  color: #64748b !important;
}

/* ===== PAGE: privacy ===== */
.privacy-content {
  font-family: 'Outfit', sans-serif;
}
.privacy-content .tab-btn {
  background-color: #140f28;
  border-color: rgba(168, 85, 247, 0.3);
  color: #94a3b8;
  cursor: pointer;
}
.privacy-content .tab-btn:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}
.privacy-content .tab-btn.active {
  background-color: #1e173b;
  border-color: #06b6d4;
  color: #fbbf24;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}
.privacy-content .content-section {
  display: none;
}
.privacy-content .content-section.active {
  display: block;
  animation: privacyFadeIn 0.4s ease-in-out forwards;
}
@keyframes privacyFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== PAGE: terms ===== */
.terms-content .js-toc-link.active {
  color: #06b6d4;
  font-weight: 600;
  border-left: 2px solid #06b6d4;
  padding-left: 8px;
}
.terms-content input::placeholder {
  color: #64748b;
  opacity: 1;
}

/* ===== PAGE: disclaimer ===== */
.disclaimer-section .js-toc-link.is-active {
  color: #06b6d4;
  border-color: #06b6d4;
  background-color: rgba(6, 182, 212, 0.05);
}

.comment-card {
    position: relative;
    background: #140f28;
    border: 1px solid rgba(168, 85, 247, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.comment-card:hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), 0 10px 30px -10px rgba(0, 0, 0, 0.7);
}

.comment-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    user-select: none;
}

.comment-badge {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
}

.reply-comment {
    position: relative;
    background: #1e173b;
    border-left: 4px solid #06b6d4;
    border-top: 1px solid rgba(6, 182, 212, 0.1);
    border-right: 1px solid rgba(6, 182, 212, 0.1);
    border-bottom: 1px solid rgba(6, 182, 212, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reply-comment:hover {
    border-color: rgba(6, 182, 212, 0.3) rgba(6, 182, 212, 0.3) rgba(6, 182, 212, 0.3) #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.1), 0 5px 20px -5px rgba(0, 0, 0, 0.5);
}

.reply-comment .comment-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    user-select: none;
}

.reply-comment .comment-badge {
    font-size: 9px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
}


/* ===== PAGE TEMPLATE: games-list ===== */
.wild-carousel-header {
    background-color: #140f28;
}

.wild-carousel-header .nav-link {
    position: relative;
}

.wild-carousel-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #a855f7 0%, #06b6d4 100%);
    transition: width 0.3s ease;
}

.wild-carousel-header .nav-link:hover::after {
    width: 100%;
}

.wild-carousel-footer {
    font-family: 'Outfit', sans-serif;
}

.wild-carousel-footer h3 {
    font-family: 'Space Grotesk', sans-serif;
}

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

.wild-carousel-game-detail .comment-card {
    transition: border-color 0.3s, shadow 0.3s;
}

/* ===== PAGE TEMPLATE: news-list ===== */
.wild-carousel-header {
    background-color: #140f28;
}

.wild-carousel-header .nav-link {
    position: relative;
}

.wild-carousel-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #a855f7 0%, #06b6d4 100%);
    transition: width 0.3s ease;
}

.wild-carousel-header .nav-link:hover::after {
    width: 100%;
}

.wild-carousel-footer {
    font-family: 'Outfit', sans-serif;
}

.wild-carousel-footer h3 {
    font-family: 'Space Grotesk', sans-serif;
}

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

.wild-carousel-detail #js-game-wrapper:fullscreen {
    width: 100%;
    height: 100%;
    background-color: #0b0813;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 0;
    border-radius: 0;
}

.wild-carousel-detail #js-game-wrapper:fullscreen iframe {
    height: calc(100vh - 64px);
    width: 100%;
    border-radius: 0;
}

.wild-carousel-detail .content-body p {
    line-height: 1.7;
    font-size: 15px;
}

.comment-card {
    transition: all 0.3s ease;
}

/* ===== PAGE TEMPLATE: history-list ===== */
.wild-carousel-header {
    background-color: #140f28;
}

.wild-carousel-header .nav-link {
    position: relative;
}

.wild-carousel-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #a855f7 0%, #06b6d4 100%);
    transition: width 0.3s ease;
}

.wild-carousel-header .nav-link:hover::after {
    width: 100%;
}

.wild-carousel-footer {
    font-family: 'Outfit', sans-serif;
}

.wild-carousel-footer h3 {
    font-family: 'Space Grotesk', sans-serif;
}

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

.tournament-detail-page .detail-rich-content p {
    margin-bottom: 1rem;
}

.tournament-detail-page .comment-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}