/*============================
  Fupre Chess Club - Global Styles
==============================*/
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* as fallback */
}

*{
  box-sizing: border-box;
}

/* h1, h2, h3 {
  font-family: 'Merriweather', serif;
}
body, p, a, span {
  font-family: 'Poppins', sans-serif;
} */

/* h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}
body, p, a, span {
  font-family: 'Roboto', sans-serif;
} */


h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}
body, p, a, span {
  font-family: 'Poppins', serif;
}


:root {
  --bg: #ffffff;
  --text: #111111;
  --accent: #007bff;
  --glow: #00ffff;
  --bg-soft: #f9f9f9;
  --border: #ccc;
}

.dark {
  --bg: #1a1a1a;
  --text: #f0f0f0;
  --accent: #4fc3f7;
  --glow: #00ffe0;
  --bg-soft: #111111;
  --border: #444;
}

body {
  margin: 0;
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
}


/*=================
  Navbar
=================*/
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;            /* sits above page content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--bg);
  color: var(--text);
  border-bottom: 4px solid var(--border);
}

.logo-container { display: flex; align-items: center; }
.logo { height: 40px; margin-right: 10px; }

/* Logo */
.site-title {
  display: flex; flex-direction: column; line-height: 1.1;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem;
}
.logo-main { color: var(--text); }
.logo-glow { color: var(--accent); }
body.dark .logo-glow { text-shadow: 0 0 1px var(--glow), 0 0 1px var(--glow), 0 0 18px var(--glow); }

/* Base dropdown (desktop overrides below) */
.nav-links {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0; right: 0;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  padding: 1.5rem;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  width: 220px;
  gap: 1rem;
  text-align: left;
  transform: translateY(-20px) scale(0.98);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  z-index: 1200;
}
.nav-links.show { display: flex; transform: translateY(0) scale(1.05); opacity: 1; }
.nav-links.show { animation: settleBounce 0.3s ease-out 0.45s forwards; }
@keyframes settleBounce { from { transform: translateY(0) scale(1.05); } to { transform: translateY(0) scale(1); } }

.nav-links a {
  color: var(--text);
  font-weight: 500;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.3s ease, transform 0.2s ease, background 0.3s ease;
}
.nav-links a:last-child { border-bottom: none; }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.hamburger {
  font-size: 1.8rem; display: none; background: none; border: none;
  color: var(--accent); cursor: pointer; transition: transform 0.3s ease;
}
.hamburger:hover, .hamburger:focus, .hamburger:active { color: var(--glow); }


/* === Dark Mode Toggle (Animated Icon) === */
.dark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, color 0.3s ease;
}

.dark-toggle:hover {
  transform: rotate(180deg);
}

/* Smooth spin animation */
.dark-toggle.spin i {
  animation: spinToggle 0.6s ease;
}

@keyframes spinToggle {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}




/* =================
   MOBILE STYLE
   — smaller links + fixed, scrollable panel
================= */
@media (max-width: 768px) {
  .navbar { --navH: 56px; }  /* tweak if your header is taller */

  .nav-links {
    display: none;
    position: fixed;                /* ← keeps panel from pushing content */
    top: var(--navH, 56px);
    left: 8px;
    right: 8px;
    width: 12rem;
    max-height: calc(100vh - var(--navH, 56px) - 16px);  /* full viewport */
    overflow: auto;                 /* ← scroll INSIDE the panel if needed */
    overscroll-behavior: contain;
    padding: 0.75rem;               /* tighter padding */
    gap: 0.5rem;                    /* tighter spacing */
    border-radius: 12px;
    background-color: var(--bg-soft);
    transform-origin: top center;
    z-index: 1200;
  }
  .nav-links.show { display: flex; }

  .nav-links a {
    padding: 0.6rem 0.75rem;        /* smaller tap targets but still comfy */
    font-size: 0.95rem;             /* smaller text so more links fit */
    line-height: 1.1;
  }

  .hamburger { display: block; font-size: 1.6rem; }
  .nav-actions { gap: 0.35rem; }

  .nav-links a:hover,
  .nav-links a:focus { background: var(--accent); color: var(--bg); transform: translateX(5px); }

  /* Active (current page) */
  .nav-links a.active { background: var(--accent); color: var(--bg); }
}

/* =================
   DESKTOP STYLE
================= */
@media (min-width: 769px) {
  .nav-links {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
    box-shadow: none;
    width: auto;
    gap: 1.5rem;
    transform: none;
    opacity: 1;
  }
  .nav-links a { position: relative; padding: 0; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; bottom: -4px;
    width: 0%; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--glow);
    transition: width 0.3s ease;
  }
  .nav-links a:hover, .nav-links a:focus { color: var(--accent); }
  .nav-links a:hover::after, .nav-links a:focus::after { width: 100%; }
  .hamburger { display: none; }
  .nav-links a.active { color: var(--accent); }
  .nav-links a.active::after { width: 100%; }
}

/* =================
   Mobile Nav Slide-In Animation (Fixed + Staggered)
================= */
@media (max-width: 768px) {
  .nav-links a {
    opacity: 0;
    transform: translateX(25px);
    visibility: hidden;
    pointer-events: none;
  }

  .nav-links.show a {
    visibility: visible;
    pointer-events: auto;
    animation: slideFadeIn 0.4s ease forwards;
  }

  /* stagger effect */
  .nav-links.show a:nth-child(1) { animation-delay: 0.1s; }
  .nav-links.show a:nth-child(2) { animation-delay: 0.2s; }
  .nav-links.show a:nth-child(3) { animation-delay: 0.3s; }
  .nav-links.show a:nth-child(4) { animation-delay: 0.4s; }
  .nav-links.show a:nth-child(5) { animation-delay: 0.5s; }
  .nav-links.show a:nth-child(6) { animation-delay: 0.6s; }
  .nav-links.show a:nth-child(7) { animation-delay: 0.7s; }
  .nav-links.show a:nth-child(8) { animation-delay: 0.8s; }
  .nav-links.show a:nth-child(9) { animation-delay: 0.9s; }

  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translateX(25px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}


/* ================
   Hero Section
================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url('../imgs/fupreChesslogo.png') no-repeat center center;
  background-size: cover;
  color: var(--text);
}

/* Mobile (phones & small tablets) */
@media (max-width: 768px) {
  .hero {
    min-height: 70vh;
    padding: 1rem;
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
      url("../imgs/fupreChesslogo.png") no-repeat center center;
    background-size: contain;  /* prevent logo from cutting off */
    background-color: #c5c7c8; /* fallback */
  }

  .hero h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #f1f1f1;  /* softer white */
  }

  .hero p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    color: #e0e0e0; /* softer gray */
  }

  .hero h1 span {
    color: var(--accent); /* highlight important word */
  }
}

/* Desktop (large screens) */
@media (min-width: 1024px) {
  .hero {
    text-align: left;
    align-items: flex-start;
    padding-left: 10%;
  }

  .hero h1 {
    font-size: 2.5rem;
    color: var(--accent);
    text-shadow: none;
  }

  .hero p {
    max-width: 600px;
    font-size: 1.2rem;
    color: var(--text);
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  }
}

/* Dark overlay for readability */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Ensure text stays above overlay */
.hero * {
  position: relative;
  z-index: 2;
}



/*=================
  Main Content
=================*/
.main-content {
  text-align: center;
  padding: 2rem;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s ease;
  cursor: pointer;
  position: relative;
  opacity: 0;               /* hidden initially */
  animation: fadeIn 0.8s ease forwards;
}

/* Desktop hover */
.btn:hover {
  background: var(--glow);
  color: var(--text);
  transform: translateY(-2px); /* subtle lift */
}

/* Mobile tap (active state) */
.btn:active {
  transform: scale(0.97);      /* press-in effect */
  background: var(--glow);     /* matches hover look */
  color: var(--text);
}

/* Bouncy attention animation */

.bounce {
  animation: fadeIn 0.8s ease forwards, bounce 2s infinite;
   animation-delay: 1s;  /* wait 1 second before bouncing */
}

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0);
   }
  40% {
     transform: translateY(-6px);
     }
  60% {
     transform: translateY(-3px);
}
}

/* ================
   About Section
================ */
.about {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg-soft);
  color: var(--text);
}

.about h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--accent);
}

/* ================
   Events Section
================ */
.events {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg);
  color: var(--text);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--bg-soft);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px var(--border);
  color: var(--text);
}

.card h3 {
  margin-bottom: 0.5rem;
  color: var(--accent);
}

/* ================
   Footer
================ */
.site-footer {
  background: var(--bg-soft);
  color: var(--text);
  padding: 2rem 1rem;
  margin-top: 2rem;
}

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

.footer-content h3,
.footer-content h4 {
  margin-bottom: 0.75rem;
  color: var(--accent);
}

.footer-content p,
.footer-content a {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
  text-decoration: none;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.social-icons a img {
  width: 24px;
  margin-right: 0.5rem;
  filter: invert(90%);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--border);
}



/* ===========================
   Auto-Slider Gallery
=========================== */
.gallery {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--bg-soft);
  color: var(--text);
  position: relative;
}

.gallery h2 {
  margin-bottom: 2rem;
  color: var(--accent);
}

/* --- Slider Container --- */
.slider-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* --- Track (holds all slides) --- */
.slider-track {
  display: flex;
  transition: transform 0.7s ease-in-out;
  width: 100%;
}

/* --- Each Slide --- */
.slide {
  min-width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.slide:hover img {
  transform: scale(1.05);
}

/* --- Navigation Arrows --- */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.6rem;
  transition: background 0.3s;
  z-index: 2;
}

.slider-btn:hover {
  background: rgba(0,0,0,0.8);
}

.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }

/* --- Dots --- */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.slider-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.slider-dots button.active {
  background: var(--accent);
  transform: scale(1.2);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .slide {
    height: 250px;
  }

  .slider-btn {
    padding: 8px 12px;
    font-size: 1.2rem;
  }
}

/* ===========================
   Lightbox (unchanged)
=========================== */
.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.close-btn {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  user-select: none;
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }

.prev-btn:hover,
.next-btn:hover {
  background: rgba(0,0,0,0.6);
}


/*=================
  Quote Section
=================*/
.quote-section {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.quote-box {
  font-size: 1.2rem;
  font-style: italic;
  margin: 1rem auto;
  max-width: 600px;
  padding: 1rem;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background-color: var(--bg);
  color: var(--text);
  box-shadow: 0 0 10px var(--glow);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.quote-box.fade {
  animation: fadeIn 0.5s ease-in-out;
}

.quote-author {
  display: block;
  margin-top: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
  color: var(--accent);
}

.quote-btn {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.quote-btn:hover {
  background-color: var(--accent);
}

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

/*=================
  Countdown Timer
=================*/
.countdown-section {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--bg-soft);
  margin-top: 2rem;
  border-top: 2px dashed var(--border);
  color: var(--text);
}

.countdown-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Event name/title */

#event-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Local time subtitle */

#local-time {
  margin-top: 1rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--accent);
  opacity: 0.9;
}

.flip-box {
  background: var(--bg);
  color: var(--text);
  font-family: monospace;
  font-size: 2.5rem;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow);
  padding: 1rem;
  position: relative;
  min-width: 80px;
  animation: glow 2s infinite alternate;
}

.flip-box span {
  display: block;
  animation: flip 0.6s ease-in-out;
}

.flip-box label {
  font-size: 0.8rem;
  color: var(--text);
  margin-top: 0.3rem;
  display: block;
}

@keyframes glow {
  from { box-shadow: 0 0 5px var(--glow); }
  to { box-shadow: 0 0 20px var(--glow); }
}

@keyframes flip {
  0% { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}



/*=================
  Tables (Ratings & Matches)
=================*/
/* ⛔️ Key change: restrict these generic table styles to NON-pairings pages */

body:not(.pairings-page) table {
  width: 100%;
  margin: 2rem auto;
  border-collapse: collapse;
  background-color: var(--bg);
  color: var(--text);
}

body:not(.pairings-page) th,
body:not(.pairings-page) td {
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--border);
}

body:not(.pairings-page) th {
  background-color: var(--accent);
  color: white;
}


/* =================
   Ratings Tables
================= */
#ratings-table,
#rapid-leaderboard,
#blitz-leaderboard {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
}

/* This min-width should NOT apply in card view */
#ratings-table { min-width: 600px; }

#ratings-table th,
#rapid-leaderboard th,
#blitz-leaderboard th {
  background: var(--accent);
  color: var(--bg);
  padding: 0.75rem;
  text-align: center;
  border-bottom: 2px solid var(--border);
}

#ratings-table td,
#rapid-leaderboard td,
#blitz-leaderboard td {
  padding: 0.75rem;
  text-align: center;
  border-bottom: 2px solid var(--border);
}

/* Table container */
.table-container {
  width: 100%;
  overflow-x: auto;                 /* table view can scroll on mobile */
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  position: relative;
}

/* When in card mode, disable the horizontal scroll on container */
.table-container.card-mode {
  overflow-x: visible;
  padding: 0 0.5rem;                /* a little breathing room at edges */
}

@media (min-width:769px){
  .table-scroll-hint{
    opacity: 0;
  }
}

/*Swipe Hint overlay for mobile table */

@media(max-width:768px){

.table-scroll-hint {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.table-scroll-hint.show {
  opacity: 1;
  transform: translateX(0);
  animation: pulseHint 1.5s ease-in-out infinite;
}

/* Pulse animation */
@keyframes pulseHint {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  50%  { transform: translateX(0) scale(1.08); opacity: 0.9; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

}


/* =================
   Card View
================= */
#ratings-table.card-view {
  display: block;
  width: 100%;
  min-width: 0;                     /* override 600px when in card view */
  margin: 0 auto;
  border: none;
}
#ratings-table.card-view thead {
  display: none;
}
#ratings-table.card-view tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  width: 100%;
}
#ratings-table.card-view tr {
  display: block;
  width: 95%;
  max-width: 520px;                 /* keeps a nice readable line-length */
  margin: 0.75rem auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--bg-soft);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
#ratings-table.card-view td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: 0.45rem 0;
  border: none;
  text-align: left;
}

/* Labels (left) for every field */
#ratings-table.card-view td::before {
  content: attr(data-label);
  font-weight: 700;
  color: var(--accent);
}

/* Each card 
#ratings-table.card-view .rating-row {
  display: block;
  background: var(--bg-alt, #222);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}*/

/* Special: "PLAYER | " separator 
#ratings-table.card-view td[data-label="Player"]::before {
  content: "PLAYER | ";
}*/

/* Make cards truly full width on small screens */
@media (max-width: 768px) {
  #ratings-table.card-view tr { width: 100%; }
}

/* Table View (explicitly restore table layout when not in card view) */
#ratings-table.table-view { display: table; }
#ratings-table.table-view thead { display: table-header-group; }
#ratings-table.table-view tbody { display: table-row-group; }
#ratings-table.table-view tr    { display: table-row; }
#ratings-table.table-view td,
#ratings-table.table-view th    { display: table-cell; }

/* Player names */
#ratings-table td:first-child,
#rapid-leaderboard td:nth-child(2),
#blitz-leaderboard td:nth-child(2) {
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Rating numbers, dept and lv */
#ratings-table td:nth-child(2),
#ratings-table td:nth-child(3),
#ratings-table td:nth-child(4),
#ratings-table td:nth-child(5),
#rapid-leaderboard td:last-child,
#blitz-leaderboard td:last-child {
  font-weight: bold;
  color: var(--text);
  font-size: 1rem;
}

/* Achievements column */
#ratings-table td:last-child {
  font-style: italic;
  color: var(--text);
  text-align: left;
  line-height: 1.4;
}

/* Light mode top3 tints */
#rapid-leaderboard tbody tr:nth-child(1),
#blitz-leaderboard tbody tr:nth-child(1) { background: #ffd70033; }
#rapid-leaderboard tbody tr:nth-child(2),
#blitz-leaderboard tbody tr:nth-child(2) { background: #c0c0c033; }
#rapid-leaderboard tbody tr:nth-child(3),
#blitz-leaderboard tbody tr:nth-child(3) { background: #cd7f3233; }

/* Dark mode – subtler bases + polished glow on the numbers */
body.dark #rapid-leaderboard tbody tr:nth-child(1),
body.dark #blitz-leaderboard tbody tr:nth-child(1) {
  background: #332b00;             /* deep gold toned row */
}
body.dark #rapid-leaderboard tbody tr:nth-child(2),
body.dark #blitz-leaderboard tbody tr:nth-child(2) {
  background: #2e2e2e;             /* deep silver toned row */
}
body.dark #rapid-leaderboard tbody tr:nth-child(3),
body.dark #blitz-leaderboard tbody tr:nth-child(3) {
  background: #332015;             /* deep bronze toned row */
}
/* add subtle glow just to the last cell (numbers) so text remains readable */
body.dark #rapid-leaderboard tbody tr:nth-child(-n+3) td:last-child,
body.dark #blitz-leaderboard  tbody tr:nth-child(-n+3) td:last-child {
  text-shadow: 0 0 6px rgba(0,207,255,0.65);
}


/* Toggle View Button */
#toggle-view {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}
#toggle-view:hover {
  background: var(--glow);
  color: var(--text);
  transform: scale(1.05);
}
#toggle-view.table-mode { background: var(--accent); color: var(--bg); }
#toggle-view.card-mode  { background: var(--text); color: var(--bg); border: 2px solid var(--accent); }

/* Smooth collapse/expand animation */
.collapsible-row {
  display: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  transform: translateY(-6px);
}

.collapsible-row.show {
  display: table-row;
  transform: translateY(0);
  max-height: 200px;   /* adjust for row height */
  opacity: 1;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* When ratings table is in card view, show rows as blocks */
#ratings-table.card-view .collapsible-row.show {
  display: block;
}


/* Hidden rows */
#ratings-table tbody tr.hidden,
#rapid-leaderboard tbody tr.hidden,
#blitz-leaderboard tbody tr.hidden {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

/* Visible rows */
#ratings-table tbody tr.show,
#rapid-leaderboard tbody tr.show,
#blitz-leaderboard tbody tr.show {
  display: table-row;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease, background-color 1s ease;
}

/* Glow effect */
#ratings-table tbody tr.glow,
#rapid-leaderboard tbody tr.glow,
#blitz-leaderboard tbody tr.glow {
  background-color: var(--glow);
  animation: fadeGlow 1.5s ease forwards;
}

@keyframes fadeGlow {
  from { background-color:var(--glow); }
  to   { background-color: transparent; }
}



/* === Achievements Info Box === */
.achievements-info {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: 'Poppins', sans-serif;
  text-align: left;
  overflow: hidden;
}

.achievements-info h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--accent);
  text-align: center;
}

/* List layout */
.achievements-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.achievements-info li {
  margin: 0.8rem 0;
  padding-left: 1.5rem;
  font-size: 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text);

  /* animation initial state */
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

/* Add checkmark before text 
.achievements-info li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}*/

.achievements-info li strong {
  color: var(--accent);
}

.achievements-info .note {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  color: var(--text);

  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

/* Reveal animations */
.achievements-info.reveal li {
  animation: fadeSlideIn 0.6s ease forwards;
}

.achievements-info.reveal li:nth-child(1) { animation-delay: 0.1s; }
.achievements-info.reveal li:nth-child(2) { animation-delay: 0.2s; }
.achievements-info.reveal li:nth-child(3) { animation-delay: 0.3s; }
.achievements-info.reveal li:nth-child(4) { animation-delay: 0.4s; }
.achievements-info.reveal li:nth-child(5) { animation-delay: 0.5s; }
.achievements-info.reveal li:nth-child(6) { animation-delay: 0.6s; }
/* extend nth-child if you add more */

.achievements-info.reveal .note {
  animation: fadeSlideIn 0.6s ease forwards;
  animation-delay: 0.75s;
}

/* Keyframes */
@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.no-achievement {
  color: gray;
  font-style: italic;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 600px) {
  .achievements-info {
    padding: 1rem 1.2rem;
  }

  .achievements-info h2 {
    font-size: 1.2rem;
  }

  .achievements-info li {
    font-size: 0.9rem;
  }
}



mark {
  background: var(--accent);
  color: var(--bg);
  padding: 0 2px;
  border-radius: 3px;
}




/*=================
  Tournament Boxes
=================*/

.event-list{
  max-width: 600px;
  margin: 2rem auto;
  padding: 0;
  list-style: none;
}

.event-box {
  background-color: var(--bg);
  color: var(--text);
  padding: 1rem;
  margin: 1rem auto;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--glow);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.event-box:hover {
  background-color: var(--bg-soft);
}

.styled-table {
  margin: 2rem auto;
  width: 90%;
  max-width: 700px;
  border-collapse: collapse;
  background-color: var(--bg);
  color: var(--text);
  box-shadow: 0 0 10px var(--glow);
}

.styled-table th,
.styled-table td {
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--border);
}

.styled-table thead tr {
  background-color: #333;
  color: white;
}




/* Toggle Button */
.toggle-btn {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: 0.3s ease;
}
.toggle-btn:hover {
  background: var(--glow);
}
.toggle-btn.card-mode {
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--accent);
}



/* Tournament Overview Card */
.tournaments-info,
.proposal-box {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  background: var(--bg);
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  overflow: hidden;
}

.tournaments-info h2,
.proposal-box h2 {
  text-align: center;
  margin-bottom: 1.5rem 0 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

/* List layout + initial hidden state */
.tournaments-info ul,
.proposal-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.proposal-box li, 
.proposal-box .note {
  margin: 0.8rem 0;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.3px;
  word-spacing: 1px;
  color: var(--text);
}

.tournaments-info li,
.proposal-box li {
  margin: 0.8rem 0;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.3px;
  word-spacing: 1px;          
  display: flex;
  align-items: center;

  /* hidden until section is revealed */
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

/* The footer note under the list */
.tournaments-info .note, 
.proposal-box .note {
  text-align: center;
  font-size: 0.95rem;
  color: #555;
  margin-top: 1.5rem;
  line-height: 1.6;
  font-style: italic;

  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
}

/* Reveal animation only after section enters viewport */
.tournaments-info.reveal li,
.proposal-box.reveal li {
  animation: fadeSlideIn 0.6s ease forwards;
}

/* Stagger the <li> items */
.tournaments-info.reveal li:nth-child(1) { animation-delay: 0.10s; }
.tournaments-info.reveal li:nth-child(2) { animation-delay: 0.20s; }
.tournaments-info.reveal li:nth-child(3) { animation-delay: 0.30s; }
.tournaments-info.reveal li:nth-child(4) { animation-delay: 0.40s; }
.tournaments-info.reveal li:nth-child(5) { animation-delay: 0.50s; }



.proposal-box.reveal li:nth-child(1) { animation-delay: 0.10s; }
.proposal-box.reveal li:nth-child(2) { animation-delay: 0.20s; }
.proposal-box.reveal li:nth-child(3) { animation-delay: 0.30s; }
.proposal-box.reveal li:nth-child(4) { animation-delay: 0.40s; }
.proposal-box.reveal li:nth-child(5) { animation-delay: 0.50s; }
.proposal-box.reveal li:nth-child(6) { animation-delay: 0.60s; }


/* add more nth-child rules if you add more items */



.tournaments-info.reveal .note,
.proposal-box.reveal .note {
  animation: fadeSlideIn 0.6s ease forwards;
  animation-delay: 0.8s; /* appears after the list */
}

/* Keyframes */
@keyframes fadeSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
body.dark .tournaments-info {
  background: #1e1e1e;
  border-color: #333;
  color: #ddd;
}
body.dark .tournaments-info h2 { color: #66c2ff; }
body.dark .tournaments-info li strong { color: #fff; }
body.dark .tournaments-info li em { color: #bbb; }
body.dark .tournaments-info .note { color: #aaa; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tournaments-info li,
  .tournaments-info .note {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .tournaments-info, .proposal-box { padding: 1rem; }
  .tournaments-info h2, .proposal-box h2 { font-size: 1.3rem; }
}



/* === Mobile Readability Fixes === */
@media (max-width: 768px) {
  .achievements-info li,
  .tournaments-info li,
  .proposal-box li {
    display: block;          /* stack text instead of flex row */
    padding: 0.6rem 0.4rem; 
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: left;
  }

  /* indent the text so emoji + bold stands out */
  .achievements-info li strong,
  .tournaments-info li strong,
  .proposal-box li strong {
    display: inline-block;
    margin-bottom: 0.3rem;
  }

  .achievements-info .note,
  .tournaments-info .note,
  .proposal-box .note {
    padding: 1rem 0.5rem;
    line-height: 1.6;
    font-size: 0.9rem;
  }
}


/* =================
   Calendar Tables
================= */

.calendar-wrapper {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.5rem;
  position: relative;
}


.calendar-wrapper.table-mode {
  overflow-x: auto;         
}


.calendar-wrapper.card-mode {
  overflow-x: hidden;            /* disable scroll for card view */
  padding: 0 0.5rem;
  box-sizing: border-box;
}

#calendar-table{
  font-family: 'Poppins', sans-serif;
}

/* ----- Table View ----- */
#calendar-table.table-view {
  display: table;
  width: 100%;
  min-width: 600px;               /* forces scroll on mobile */
  border-collapse: collapse;
  background: var(--bg-soft);
}
#calendar-table.table-view thead { display: table-header-group; }
#calendar-table.table-view tbody { display: table-row-group; }
#calendar-table.table-view tr    { display: table-row; }
#calendar-table.table-view td,
#calendar-table.table-view th    { display: table-cell; padding: 1rem; border: 1px solid var(--border); }
#calendar-table.table-view th {
  background: var(--accent);
  color: var(--bg);
  text-align: center;
  font-weight: 600;
}

/* ----- Card View ----- */
#calendar-table.card-view {
  display: block;
  width: 95%;
  border: none;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
#calendar-table.card-view thead { display: none; }
#calendar-table.card-view tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem;
  box-sizing: border-box;
}
#calendar-table.card-view tr {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0rem auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--bg-soft);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: opacity 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
#calendar-table.card-view tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}
#calendar-table.card-view td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: 0.4rem 0;
  border: none;
  text-align: left;
}
#calendar-table.card-view td::before {
  content: attr(data-label);
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.5rem;
}

/* Glow highlight (fades away automatically) */
.calendar-row.glow {
  background-color: var(--glow);
  animation: fadeGlow 1.5s ease forwards;
}
@keyframes fadeGlow {
  from { background-color: var(--glow); }
  to   { background-color: var(--bg-soft); }
}

/* ----- Mobile Adjustments ----- */
@media (max-width: 768px) {
  #calendar-table.card-view tbody{
    grid-template-columns: 1fr;
  }
  #calendar-table.card-view tr { 
    width: 100%; 
    margin: 0.6rem auto;
  }
  #calendar-table.card-view td {
    font-size: 0.9rem;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.35rem 0;
  }
  #calendar-table.card-view td::before { margin-bottom: 0.2rem; }
}
@media (max-width: 480px) {
  #calendar-table.card-view td { font-size: 0.85rem; }
}

/* Swipe Hint (only for table-view) */
@media(max-width:768px){
  .table-scroll-hint {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 0.75rem;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .calendar-wrapper.table-mode .table-scroll-hint.show { 
    opacity: 1; 
  }


}

/* =================
   Calendar Notes & Boxes
================= */
.calendar-notes {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--bg-soft);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: 'Poppins', sans-serif;
  color: var(--text);
}
.calendar-notes h2 {
  text-align: center;
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.calendar-box {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.calendar-box h3,
.calendar-box h4 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.calendar-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.calendar-box li {
  margin: 0.4rem 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .calendar-notes { padding: 1rem; }
  .calendar-notes h2 { font-size: 1.3rem; }
  .calendar-box { padding: 0.8rem 1rem; }
  .calendar-box li { font-size: 0.9rem; text-align: center; }
}
@media (max-width: 480px) {
  .calendar-notes h2 { font-size: 1.1rem; }
  .calendar-box li { font-size: 0.85rem; }
}






/* ===== Tournament Live Banner ===== */
.tourney-banner {
  --glow: rgba(0, 200, 255, .45);
  --accent1: #38bdf8;     /* cyan */
  --accent2: #a78bfa;     /* purple */
  --bg: rgba(255,255,255,0.04); /* good for dark mode */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 20px auto 28px;
  max-width: 980px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg), transparent) border-box,
              linear-gradient(90deg, var(--accent1), var(--accent2)) padding-box;
  border: 1px solid transparent;
  box-shadow: 0 0 24px var(--glow);
  backdrop-filter: blur(8px);
  color: #e6f6ff;
  transform-origin: center;
}

/* gradient animated border "shine" */
.tourney-banner::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent1));
  -webkit-mask: 
     linear-gradient(#000 0 0) content-box, 
     linear-gradient(#000 0 0);
  mask: 
   linear-gradient(#000 0 0) content-box, 
   linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderShift 6s linear infinite;
  opacity: .65;
}

@keyframes borderShift {
  0% { background-position: 0% }
  100% { background-position: 200% }
}

.tourney-left { display:flex; align-items:center; gap:10px; }
.tourney-text { line-height: 1.2; }
.tourney-text strong { font-size: 1.05rem; display:block; }
.tourney-text small { opacity: .9; }

.icon { font-size: 1.4rem; filter: drop-shadow(0 0 6px var(--glow)); }

/* bursting confetti emoji */
.burst { font-size: 1.2rem; animation: popIn .6s ease-out both, wiggle 2.2s ease-in-out .6s infinite; }
@keyframes popIn { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes wiggle {
  0%,100% { transform: rotate(0deg) }
  25% { transform: rotate(8deg) }
  75% { transform: rotate(-8deg) }
}

/* pulsing live dot */
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  display:inline-block;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7) }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0) }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0) }
}

/* slide/fade in */
.is-hidden { display:none }
.tourney-banner.show {
  animation: slideIn .55s cubic-bezier(.2,.8,.2,1) both, glow 1.8s ease-in-out infinite alternate;
}
@keyframes slideIn { from { transform: translateY(-8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes glow { from { box-shadow: 0 0 22px var(--glow) } to { box-shadow: 0 0 34px var(--glow) } }

/* close (×) */
.tourney-close {
  position: absolute; right: 8px; top: 6px;
  border: 0; background: transparent; color: #cbd5e1;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.tourney-close:hover { color: #fff }

/* small screens */
@media (max-width: 520px) {
  .tourney-banner { grid-template-columns: 1fr auto; }
  .tourney-left { display:none; }
}




.confetti {
  position: absolute; top: 0;
  width: 8px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, #fde047, #f472b6, #60a5fa);
  transform: translate(-50%, -20px) rotate(0deg);
  animation: drop 1.4s ease-out forwards;
  opacity: .95;
}
@keyframes drop {
  0%   { transform: translate(-50%, -20px) rotate(0deg) scale(var(--tz,1)) }
  100% { transform: translate(calc(-50% + var(--tx, 0)), 120px) rotate(420deg) scale(var(--tz,1)) }
}



/* =========================
   MATCHES PAGE (Card Only)
========================= */

.matches-section {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.filters {
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.player-badge {
  display: inline-block;
  margin-left: .5rem;
  font-weight: 600;
  color: var(--accent, #00bcd4);
}

/* --- Matches Grid --- */
.matches-wrapper {
  margin-top: 1.5rem;
}

.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  width: 100%;
}

/* --- Card Style --- */
.match-card {
  background: var(--bg-soft, #f9f9f9);
  color: var(--text, #222);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.match-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.mc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: .4rem 0;
}

.mc-meta {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--text-light, #666);
  text-align: right;
  font-style: italic;
}

/* --- Player tones --- */
.player.win { color: var(--win, #24c277); font-weight: 700; }
.player.loss { color: var(--loss, #ff5a5a); font-weight: 600; }
.player.draw { color: var(--draw, #708090); font-weight: 600;}

/* --- Collapsible --- */
.match-card.hidden { display: none; opacity: 0; transform: translateY(10px); }
.match-card.show { 
  display: block; 
  opacity: 1; 
  transform: translateY(0); 
  transition: opacity .3s ease, transform .3s ease;
}

.match-card.glow { animation: rowGlow 1.2s ease forwards; }
@keyframes rowGlow {
  from { box-shadow: 0 0 0 rgba(0,0,0,0); }
  to { box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
}

/* --- Collapse button --- */
.collapse-btn {
  display: inline-block;
  margin: 1rem auto;
  padding: .6rem 1.2rem;
  background: var(--accent, #00bcd4);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .25s ease;
}
.collapse-btn:hover {
  background: #0097a7;
}

/* --- Modal --- */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: var(--bg-soft, #fff);
  padding: 1.5rem;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  color: var(--text, #222);
}
.close-btn {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
}
#headToHead {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg, #f0f0f0);
  border-radius: 6px;
}

/* --- Responsive --- */
@media(max-width: 480px){
  .mc-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .mc-meta { text-align: left; }
}

/* =================
   Matches Filters
================= */
.filters {
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
}

/* Group wrapper for icons */
.filter-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-group select,
.filter-group input[type="date"] {
  padding: 0.6rem 0.9rem 0.6rem 2.2rem; /* extra left space for icon */
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  background: var(--bg-soft, #222);
  color: var(--text, #fff);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  min-width: 160px;
}

/* Icons inside */
.filter-group::before {
  content: attr(data-icon);
  position: absolute;
  left: 0.7rem;
  font-size: 1rem;
  color: var(--accent, #00bcd4);
  pointer-events: none;
}

.filter-group select:focus,
.filter-group input[type="date"]:focus {
  outline: none;
  border-color: var(--accent, #00bcd4);
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.4);
}

/* Badge beside player dropdown */
.player-badge {
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--accent, #00bcd4);
  color: var(--bg, #fff);
  padding: 0.35rem 0.7rem;
  border-radius: 12px;
  margin-left: 0.6rem;
  white-space: nowrap;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
  }

  .filter-group select,
  .filter-group input[type="date"] {
    width: 100%;
    min-width: unset;
  }

  .player-badge {
    margin-left: 0;
    margin-top: 0.4rem;
    align-self: flex-start;
  }
}



/* Hint text under date inputs */
.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.filter-group input[type="date"],
.filter-group select {
  padding: 0.6rem 0.9rem 0.6rem 2.2rem;
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  background: var(--bg-soft, #222);
  color: var(--text, #fff);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border 0.25s ease, box-shadow 0.25s ease;
  min-width: 160px;
}

/* Small hint text */
.hint-text {
  font-size: 0.75rem;
  color: var(--accent, #00bcd4);
  margin-top: 0.3rem;
  opacity: 0.8;
}

/* Keep icons aligned properly */
.filter-group::before {
  content: attr(data-icon);
  position: absolute;
  top: 50%;
  left: 0.7rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--accent, #00bcd4);
  pointer-events: none;
}


.filter-group input:disabled {
  background: var(--bg-muted, #444);
  cursor: not-allowed;
  opacity: 0.6;
}


/* Responsive */
@media (max-width: 600px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group {
    width: 100%;
  }
  .filter-group input[type="date"],
  .filter-group select {
    width: 100%;
  }
}

/* MATCH LEADERBOARD */
.leaderboard-section {
  max-width: 600px;
  margin: 3rem auto;
  text-align: center;
}

.leaderboard-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.leaderboard-list li {
  background: var(--bg-soft, #222);
  margin: 0.5rem 0;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.leaderboard-list li:hover {
  transform: scale(1.03);
}

.leaderboard-list .player-name {
  font-weight: 600;
}

.leaderboard-list .wins {
  color: var(--win, #24c277);
  font-weight: bold;
}


/* RULEBOOK PAGE */
.rulebook {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center;
}
.rules-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 1.5rem;
}
.rule-card {
  border-radius: 10px;
  padding: 1rem;
  background: var(--bg-soft);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  text-align: left;
}
.rule-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  padding-bottom: .5rem;
}
.rule-items {
  margin-top: .5rem;
  display: none;
}
.rule-card.active .rule-items {
  display: block;
}
.rule-items li {
  margin: 0.4rem 0;
  line-height: 1.4;
}


/* CONTACT PAGE */
.contact-page {
  max-width: 1000px;
  margin: 2rem auto;
  text-align: center;
  background-size: cover;
  background-blend-mode: overlay;
  padding: 1rem;
  border-radius: 10px;
}

.club-quote {
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--accent);
}

/* Contact Info Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.contact-card {
  background: var(--bg-soft);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.contact-card:hover {
  transform: scale(1.05);
}

/* Contact Form */
.contact-form {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.contact-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
.contact-form button:hover {
  background: var(--glow);
}
.feedback {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--accent);
}

/* Map */
.map-container {
  margin: 2rem 0;
  border-radius: 10px;
  overflow: hidden;
}

/* Socials */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}
.social-icon,
.join-btn {
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  background: var(--bg-soft);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: 0.3s;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}
.social-icon:hover,
.join-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Captains */
.captains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.captain-card {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}
.captain-card img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

/* FAQ */
.faq {
  margin-top: 2rem;
  text-align: left;
}
.faq-item {
  margin-bottom: 1rem;
}
.faq-question {
  width: 100%;
  color: var(--text);
  background: var(--bg-soft);
  border: none;
  padding: 0.8rem;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}
.faq-answer {
  display: none;
  padding: 0.8rem;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  margin-top: 0.3rem;
  border-radius: 6px;
}
.faq-item.active .faq-answer {
  display: block;
}




#sendBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #007bff;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: .7rem 1.4rem;
  cursor: pointer;
  transition: background .3s;
}

#sendBtn:disabled {
  background: #555;
  cursor: not-allowed;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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





/* HIGHLIGHTS PAGE */


/* Layout */
.highlights-main{
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Featured hero */
.featured{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  margin-bottom: 1.25rem;
}
.featured .hero-media{
  width: 100%;
  max-height: 520px;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/9;
  background: #000;
}
.featured .hero-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color: #fff;
}
.featured .hero-title{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}
.featured .hero-date{
  font-size: .95rem;
  opacity: .9;
}

/* Toolbar */
.toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
}
.filters{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.filter-btn{
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  transition: transform .1s ease, box-shadow .25s ease, background .2s ease;
}
.filter-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.filter-btn.is-active{ background: var(--accent); color: #fff; border-color: transparent; }

.slideshow-btn{
  padding: .5rem 1rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.slideshow-btn:active{ transform: translateY(1px); }

/* Masonry/Grid (column masonry for broad support) */
.masonry{
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 520px){ .masonry{ column-count: 2; } }
@media (min-width: 900px){ .masonry{ column-count: 3; } }

.card{
  break-inside: avoid;
  display: inline-block; /* needed for column masonry */
  width: 100%;
  margin: 0 0 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }

.thumb-wrap{
  position: relative;
  background: #000;
}
.thumb{
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
  background: #000;
}
.play-badge{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 2rem;
  opacity: .9;
  pointer-events: none;
}
.hover-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: end;
  padding: .75rem .85rem;
  color: #fff;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
  opacity: 0;
  transition: opacity .25s ease;
}
.thumb-wrap:hover .hover-overlay{ opacity: 1; }

.caption{
  padding: .65rem .85rem .8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.caption .title{
  font-weight: 700;
  font-size: .98rem;
  color: var(--text);
}
.caption .date{
  font-size: .9rem;
  color: #888;
}

/* Lightbox2 */
.lightbox2[hidden]{ display: none; }
.lightbox2{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8);
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  grid-template-areas: "prev stage next";
  align-items: center;
  z-index: 9999;
}
.lb-stage{
  grid-area: stage;
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  outline: none;
}
.lb-media{
  max-width: 100%;
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0,0,0,.5);
  background: #000;
}
.lb-close{
  position: fixed;
  top: 10px; right: 12px;
  background: #0008;
  color: #fff;
  font-size: 1.6rem;
  border: none;
  border-radius: 999px;
  width: 40px; height: 40px;
  cursor: pointer;
}
.lb-nav{
  background: transparent;
  color: #fff;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  opacity: .9;
  transition: transform .1s ease;
}
.lb-prev{ grid-area: prev; }
.lb-next{ grid-area: next; }
.lb-nav:active{ transform: scale(.96); }

/* Lazy fade-in */
.lazy-fade{ opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, background-color 1.2s ease; }
.lazy-fade.loaded{ opacity: 1; transform: translateY(0); background-color: transparent; }

/* Focus styles */
.filter-btn:focus, .slideshow-btn:focus, .lb-nav:focus, .lb-close:focus{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* =========================
   Developer Credit Widget
========================= */
.dev-credit{
  position: fixed;
  right: 18px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1100;
  font-family: 'Poppins', sans-serif;
}

.dev-credit .chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  cursor: pointer;
  user-select: none;
  transform: translateZ(0);
  transition: transform .15s, box-shadow .25s, background .25s, border-color .25s;
}

.dev-credit .chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.dev-credit .chip strong{
  font-weight: 700;
  color: var(--accent);
}

.dev-credit .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: devPulse 1.8s infinite;
}

@keyframes devPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,188,212,.5) }
  70%  { box-shadow: 0 0 0 12px rgba(0,188,212,0) }
  100% { box-shadow: 0 0 0 0 rgba(0,188,212,0) }
}

.dev-credit .panel{
  position: absolute;
  right: 0;
  bottom: 46px;
  width: min(92vw, 340px);
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  transform-origin: bottom right;
  transform: translateY(6px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s, opacity .18s;
}

.dev-credit.open .panel{
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.dev-credit .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.dev-credit .actions{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
  justify-content: flex-end;
}

.dev-credit .btn{
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: .45rem .7rem;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s, transform .08s, color .2s, border-color .2s;
  text-decoration: none; /* so <a> looks like button */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.dev-credit .btn:hover{
  background: var(--accent);
  color: var(--bg);
}
.dev-credit .btn:active{ transform: translateY(1px); }

/* accent style for primary CTA (About me) */
.dev-credit .btn-accent{
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.dev-credit .btn-accent:hover{
  filter: saturate(1.05);
}

@media (max-width: 600px){
  .dev-credit{ right: 12px; }
  .dev-credit .chip{ font-size: .6rem; padding: .5rem .7rem; }
  .dev-credit .panel{ width: min(96vw, 320px); }
}




/* ============================
   FCC Pre-Footer Section
============================ */
.fcc-prefooter{
  --pf-surface: var(--bg-soft);
  --pf-text:    var(--text);
  --pf-accent:  var(--accent);
  --pf-border:  var(--border);

  margin: 28px auto 0;
  padding: 12px 0 4px;
  color: var(--pf-text);
  overflow-x: clip;      
}

.fcc-prefooter-grid{
  max-width: 1200px;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 16px 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

/* Card */
.fcc-card{
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 16px;
  max-width: 100%;             /* guard against accidental overflow */
  overflow: hidden;            /* shadows/inner content can't cause scroll */
}

.fcc-card-head{ margin-bottom: 10px; }
.fcc-card-title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);
  margin: 0 0 2px;
}
.fcc-muted{ opacity: .85; margin: 0; }

/* Partner hero (fixed aspect ratio so images can't break layout) */
.fcc-partner-hero{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--pf-border);
  background:
    radial-gradient(80% 80% at 10% 10%, color-mix(in srgb, var(--pf-accent) 14%, transparent), transparent 60%),
    radial-gradient(80% 80% at 90% 20%, color-mix(in srgb, var(--pf-accent) 10%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.06), transparent);
  aspect-ratio: 16 / 9;        /* ✅ locks the frame size */
  min-height: 140px;           /* graceful floor for very narrow screens */
  display: block;
  margin: 0 0 12px;
}

.fcc-partner-img{
  display: block;              /* no extra inline gap */
  width: 100%;
  height: 100%;
  object-fit: fill;           /* fill the frame without distortion */
  object-position: center;
  max-width: none;             /* override any global max-width rules */
  opacity: .95;
  pointer-events: none;        /* image won’t catch taps/long-press */
  -webkit-user-drag: none;
}

/* Designer */
.fcc-designer-head{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}

.fcc-avatar{
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; letter-spacing: .5px;
  color: var(--pf-accent);
  background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  border: 2px solid color-mix(in srgb, var(--pf-accent) 35%, transparent);
}

/* Chips */
.fcc-chiplist{
  list-style: none;
  padding: 0; margin: 6px 0 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fcc-chip{
  font-size: .82rem; font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--pf-accent);
  background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 35%, transparent);
}

/* Actions & contacts */
.fcc-actions,
.fcc-contact{
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
}

.fcc-link{
  color: var(--pf-accent);
  text-decoration: underline;
  word-break: break-word;
  overflow-wrap: anywhere;     /* long emails/urls won’t push width */
}

/* Buttons */
.fcc-btn{
  appearance: none;
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  color: var(--pf-text);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  max-width: 100%;
}
.fcc-btn:hover{ transform: translateY(-1px); border-color: var(--pf-accent); }

.fcc-btn-accent{
  background: var(--pf-accent);
  color: var(--bg);
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.fcc-btn-accent:hover{
  filter: saturate(1.05);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--pf-accent) 30%, transparent);
}

.fcc-btn-outline{
  background: transparent;
  color: var(--pf-accent);
  border-color: color-mix(in srgb, var(--pf-accent) 45%, var(--pf-border));
}

/* Responsive */
@media (max-width: 900px){
  .fcc-prefooter-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .fcc-card{ padding: 14px; border-radius: 14px; }
  .fcc-partner-hero{ aspect-ratio: 16 / 9; min-height: 120px; }
  .fcc-btn{ padding: 9px 12px; font-size: .95rem; }
  .fcc-chip{ font-size: .8rem; padding: 5px 9px; }
  .fcc-actions, .fcc-contact{ justify-content: center; }
  .fcc-contact .fcc-btn{ width: 100%; }      /* full-width buttons on phones */
}






/* ======================
   Match Counter Styles
====================== */
.match-counter{
  position: relative;
  display:flex; justify-content:center; align-items:center; gap:2rem;
  background: var(--card);
  padding:1.5rem 2.5rem; border-radius:1.5rem;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
  margin:1.5rem auto .75rem; text-align:center; flex-wrap:wrap; max-width:900px;
  opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease;
}

/* ethereal mist behind the counter */
.match-counter::before{
  content:""; position:absolute; inset:-8px;
  background: radial-gradient(70% 60% at 50% 0%,
              rgba(0,200,255,.12) 0%, rgba(130,0,255,.10) 40%, transparent 70%);
  filter: blur(16px); border-radius:inherit; pointer-events:none; z-index:-1;
  animation: mistPulse 6s ease-in-out infinite;
}
@keyframes mistPulse{ 0%,100%{opacity:.55} 50%{opacity:.85} }

.match-counter.in-view{ opacity:1; transform: translateY(0); }

.counter-item{ flex:1; min-width:150px; transition: transform .25s ease; }
.counter-item:hover{ transform: translateY(-2px) scale(1.02); }
.counter-item.active{ filter: saturate(1.2) brightness(1.06); }

/* Numbers */
.counter-item h2, .counter-item h3{
  font-size:2.4rem; margin:0; font-weight:800; line-height:1;
  letter-spacing:.5px; animation: popIn .8s ease;
}

/* Gradient numbers */
.count{
  background-size:300% 300%;
  -webkit-background-clip:text; -webkit-text-fill-color:currentColor;
  color:#fff; /* fallback if webkit-clip not supported */
  position:relative; animation: gradientShift 4s ease infinite, fadeUp .8s ease both;
}
@keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes fadeUp{ 0%{opacity:0; transform:translateY(10px) scale(.97)} 100%{opacity:1; transform:none} }
@keyframes popIn{ 0%{transform:scale(.7);opacity:0} 80%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }

/* Hue-balanced gradients (contrast with their label bars) */
.counter-item.total .count{  background: linear-gradient(90deg,#7fe9ff,#1ec6ff,#0b84ff); }
.counter-item.blitz .count{  background: linear-gradient(90deg,#ffc06a,#ff8850,#ff4a12); }
.counter-item.rapid .count{  background: linear-gradient(90deg,#caa7ff,#a26dff,#6b28ff); }

/* Underline pulse under numbers */
.count::after{
  content:""; position:absolute; bottom:-6px; left:25%; width:50%; height:3px; border-radius:3px;
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{opacity:.5; transform:scaleX(.7)} 50%{opacity:1; transform:scaleX(1)} }
.counter-item.total .count::after{  background: linear-gradient(90deg,#0fdcff,#0ba9ff); box-shadow:0 0 14px rgba(15,220,255,.8); }
.counter-item.blitz .count::after{  background: linear-gradient(90deg,#ff9900,#ff3f00); box-shadow:0 0 14px rgba(255,120,0,.8); }
.counter-item.rapid .count::after{  background: linear-gradient(90deg,#a855f7,#6a00ff); box-shadow:0 0 14px rgba(138,43,226,.8); }

/* Labels (solid glowing chips) + staggered slide */
.counter-item p{
  margin:.8rem 0 0; font-size:.9rem; font-weight:700; text-transform:uppercase; color:#fff;
  border-radius:8px; padding:.45rem 1rem; display:inline-block; box-shadow:0 0 10px rgba(0,0,0,.35);
  opacity:0; transform: translateY(18px);
}
@keyframes labelSlide{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
.counter-item.total p{ background: linear-gradient(90deg,#00d8ff,#0090ff); box-shadow:0 0 20px rgba(0,180,255,.8); animation: labelSlide .7s .15s forwards; }
.counter-item.blitz p{ background: linear-gradient(90deg,#ff8c00,#ff3d00); box-shadow:0 0 20px rgba(255,100,0,.8); animation: labelSlide .7s .3s forwards; }
.counter-item.rapid p{ background: linear-gradient(90deg,#a855f7,#6a00ff); box-shadow:0 0 20px rgba(138,43,226,.8); animation: labelSlide .7s .45s forwards; }

/* Percentage helper text */
.substat{ margin-top:.35rem; font-size:.8rem; color:#bfc9d1; }

/* Percent mini bars */
.mini-bar{
  width:80%; height:8px; margin:.6rem auto 0; border-radius:999px; background: rgba(255,255,255,.08);
  overflow:hidden; position:relative;
}
.mini-bar .fill{ height:100%; width:0; transition: width .9s ease; }

/* Bar colors per category */
.counter-item.total .mini-bar .fill{ background: linear-gradient(90deg,#00d8ff,#0090ff); }
.counter-item.blitz .mini-bar .fill{ background: linear-gradient(90deg,#ff9900,#ff3d00); }
.counter-item.rapid .mini-bar .fill{ background: linear-gradient(90deg,#a855f7,#6a00ff); }

/* Latest date line */
.latest-date{
  text-align:center; margin:0 auto 2rem; color:var(--muted); font-size:.95rem;
}

/* Hide utility for filtering cards */
.is-hidden{ display:none !important; }

/* Mobile friendly */
@media (max-width: 600px){
  .match-counter{ flex-direction:column; gap:1rem; }
}

.match-counter .counter-item {
  cursor: pointer;
  transition: transform .25s ease, filter .3s ease;
}

.match-counter .counter-item:hover {
  filter: brightness(1.5);
}

.match-counter .counter-item:active {
  transform: scale(0.97);
    filter: brightness(1.5);
}





/* ============================
   Chess GIF Gallery Styles
============================ */
.chess-gif-gallery {
  text-align: center;
  padding: 2.5rem 1rem 4rem;
  background: linear-gradient(to bottom right, rgba(15,15,25,0.8), rgba(5,5,15,0.9));
  border-radius: 1.5rem;
  margin: 3rem auto;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  max-width: 1000px;
  animation: fadeIn 1s ease both;
}

.gallery-title {
  font-size: 1.8rem;
  color: var(--accent-2, #00bfff);
  margin-bottom: 0.3rem;
}

.gallery-subtitle {
  font-size: 0.95rem;
  color: var(--muted, #a0a7b3);
  margin-bottom: 1.5rem;
}

/* Filter buttons */
.gif-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent-2, #00bfff);
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--accent-2, #00bfff);
  color: #fff;
  box-shadow: 0 0 15px rgba(0,191,255,0.4);
}

/* GIF Grid */
.gif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.8rem;
  justify-items: center;
}

.gif-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.05);
  border-radius: 1rem;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 240px;
}

.gif-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 0 20px rgba(0,200,255,0.4);
}

.gif-card img {
  width: 100%;
  aspect-ratio: 1 / 1; /* keeps square shape */
  object-fit: cover; /* keeps proportions without squishing */
  border-bottom: 2px solid rgba(255,255,255,0.1);
  display: block;
}

/* Info / caption */
.gif-info {
  padding: 0.6rem 0.5rem 0.8rem;
  text-align: center;
  line-height: 1.4;
}

.gif-info strong {
  color: var(--accent-2, #00bfff);
  display: block;
  font-size: 0.95rem;
}

.gif-info small {
  display: block;
  color: var(--muted, #a0a7b3);
  margin-top: 0.2rem;
}

.gif-caption-text {
  display: block;
  color: #9ca3af;
  font-style: italic;
  margin-top: 0.4rem;
  font-size: 0.75rem;
}

/* Lightbox */
.gif-lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.gif-lightbox.active {
  display: flex;
  animation: fadeIn 0.3s ease-in-out;
}

.lightbox-img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(0,200,255,0.4);
}

.lightbox-caption {
  color: var(--accent, #35c759);
  margin-top: 1rem;
  font-size: 1rem;
}

.close-lightbox {
  position: absolute;
  top: 25px;
  right: 40px;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.close-lightbox:hover {
  transform: scale(1.2);
}

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




/* ============================
   Filter Transition Animations
============================ */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInCard 0.4s ease forwards;
}

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

.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gif-grid {
  transition: opacity 0.2s ease;
}



.gif-credits {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    background: #111;
    color: #ccc;
    font-family: 'Poppins', sans-serif;
    border-radius: 10px;
  }
  .gif-credits h3 {
    color: #fff;
    margin-bottom: 3px;
    font-size: 0.8rem;
  }
  .gif-credits ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .gif-credits li {
    margin: 1px 0;
  }
  .gif-credits a {
    font-size: 0.6rem;
    color: #4da6ff;
    text-decoration: none;
    transition: color 0.2s;
  }
  .gif-credits a:hover {
    color: #66ccff;
    text-decoration: underline;
  }


.show-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem auto 2rem;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(0,191,255,0.15);
  box-shadow: 0 0 25px rgba(0,191,255,0.35);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.show-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 35px rgba(0,191,255,0.6);
}

.arrow-icon {
  transition: transform 0.35s ease;
}

.show-toggle.active .arrow-icon {
  transform: rotate(180deg);
}

.rt{
  display: flex;
  justify-content: right;
}


.social-icon {
  color:var(--text);
  font-size: 1.8rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.2);
}

/* Optional: give each icon its brand color */
.fa-whatsapp:hover { color: #25D366; }
.fa-youtube:hover { color: #FF0000; }


/* ==========================================================
   SPLASH SCREEN + INSTALL / UPDATE CTA
   ========================================================== */

/* Splash Loader */
#custom-splash {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #2da8ff, #35c759);
  background-size: 200% 200%;
  animation: gradientFlow 3.5s ease-in-out infinite;
  z-index: 9999;
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.splash-logo {
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 0 20px rgba(45,168,255,0.9))
          drop-shadow(0 0 40px rgba(53,199,89,0.6));
  animation: pulseLogo 2s ease-in-out infinite;
}
@keyframes pulseLogo {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.07); opacity: 0.9; }
}
.splash-progress {
  width: 180px;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.splash-progress::after {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35c759, #2da8ff);
  background-size: 200% 100%;
  animation: progressFlow 2s ease-in-out infinite;
}
@keyframes progressFlow {
  0% { left: -40%; width: 40%; opacity: 0.6; }
  50% { left: 30%; width: 50%; opacity: 1; }
  100% { left: 100%; width: 40%; opacity: 0.6; }
}
#custom-splash.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}

/* ==========================================================
   INSTALL BUTTON (Responsive, Smooth Width Adjustment)
   ========================================================== */

#install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: linear-gradient(135deg, #2da8ff, #35c759);
  color: #fff;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 1.5rem;
  box-shadow: 0 0 18px rgba(45,168,255,0.6);
  cursor: pointer;
  z-index: 9999;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    width 0.25s ease,
    padding 0.25s ease,
    box-shadow 0.3s ease;
}

#install-btn .label {
  display: inline-block;
  white-space: nowrap;
}

/* Hide / show states */
#install-btn.is-hidden { pointer-events: none; opacity: 0; }
#install-btn.show-slide { opacity: 1; transform: translateY(0); }

/* Hover (desktop only) */
@media (hover: hover) {
  #install-btn:hover { transform: scale(1.06); }
}

/* Pulse animation */
.pulse-loop {
  animation: pulseLoop 2.5s ease-in-out infinite;
}
@keyframes pulseLoop {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(45,168,255,0.6),
                0 0 25px rgba(53,199,89,0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(45,168,255,0.9),
                0 0 40px rgba(53,199,89,0.7);
  }
}

/* Busy state */
#install-btn.is-busy {
  cursor: wait;
  opacity: 0.95;
  min-width: 180px;
}

/* Prevent text clipping */
#install-btn.is-busy .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#install-btn.is-busy .label::after {
  content: "…";
  animation: dots 1.2s infinite steps(3,end);
}
@keyframes dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
}

/* =========================================
   🔹 MOBILE RESPONSIVENESS (320px–768px)
   ========================================= */
@media (max-width: 768px) {
  #install-btn {
    right: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%) translateY(30px);
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 2rem;
    box-shadow: 0 0 12px rgba(45,168,255,0.6);
    gap: 0.25rem;
    min-width: auto;
    max-width: 90vw;
    width: auto;
  }

  #install-btn.show-slide {
    transform: translateX(-50%) translateY(0);
  }

  #install-btn.is-busy {
    min-width: auto;
    width: auto;
    padding: 0.45rem 1rem;
    text-align: center;
  }

  #install-btn .label {
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
  }

  /* Mobile pulse (lighter intensity) */
  @keyframes pulseLoop {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(45,168,255,0.5),
                  0 0 20px rgba(53,199,89,0.3);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 0 18px rgba(45,168,255,0.8),
                  0 0 30px rgba(53,199,89,0.6);
    }
  }
}



/* ==========================================================
   Update Banner (Smart Toast)
   ========================================================== */
#update-banner {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
  padding: 0.9rem 1.5rem;
  z-index: 99999;
  transition: bottom 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
#update-banner.show {
  bottom: 1.5rem;
  opacity: 1;
}
.update-banner-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
}
#refresh-btn {
  background: linear-gradient(135deg, #2da8ff, #35c759);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#refresh-btn:hover {
  transform: scale(1.05);
}


/* =========================================
   FUPRE Chess Club — Icon Styling & Animations
   ========================================= */

/* ---------- General Font Awesome Icons ---------- */
i.fa-solid, i.fa-brands {
  color: var(--accent);
  margin-right: 6px;
  transition: color 0.3s ease;
}

/* Glow on hover for regular UI icons */
i.fa-solid:hover, i.fa-brands:hover {
  color: var(--glow);
  cursor: pointer;
}

/* Exclude social/contact icons from fancy animations */
.footer-contact i,
.fcc-contact i,
.fcc-social i,
.fa-phone,
.fa-envelope,
.fa-location-dot,
.fa-x-twitter,
.fa-whatsapp,
.fa-youtube,
.fa-tiktok {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: color 0.3s ease;
}

/* ---------- Player Icons (Leaderboard / Matches) ---------- */
.fa-crown {
  color: #facc15; /* gold */
}
.fa-handshake {
  color: #6b7280; /* neutral grey */
  opacity: 0.9;
}
.player i {
  margin-left: 4px;
  transition: transform 0.25s ease;
}
.player:hover i {
  transform: scale(1.15);
}

/* ---------- Honors Section Icons ---------- */
.fcc-honors {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.fcc-honors li {
  margin: 0.5em 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  line-height: 1.5;
  outline: none;
}

/* === Color-coding for each honor type (harmonized & glowing) === */
.fcc-honors li:nth-child(1) i {
  color: #fef08a; /* Bright sun-gold */
  filter: drop-shadow(0 0 6px rgba(254, 240, 138, 0.8)) 
          drop-shadow(0 0 12px rgba(253, 224, 71, 0.6)); /* Radiant glow */
} /* 🏆 Trophy (brightest, spotlight)  360 spin FCC Trophy*/


/* ====== 360 Spin for FCC Trophy ====== */
.fcc-honors li:nth-child(1) i.icon-visible {
animation:
  floatPulse 2.8s ease-in-out infinite alternate,
  softGlow 3.2s ease-in-out infinite alternate,
  trophySpin 6s linear infinite,
  trophyShimmer 4s ease-in-out infinite;

}

@keyframes trophySpin {
  0%   { transform: rotateY(0deg) translateY(0) scale(1); }
  50%  { transform: rotateY(180deg) translateY(-3px) scale(1.07); }
  100% { transform: rotateY(360deg) translateY(0) scale(1); }
}

.fcc-honors li:nth-child(1) i {
  transform-style: preserve-3d;
  backface-visibility: hidden;

}



/* ====== Trophy Hover / Tap Pause + Glow Boost ====== 
.fcc-honors li:nth-child(1) i.icon-visible:hover,
.fcc-honors li:nth-child(1):active i.icon-visible,
.fcc-honors li:nth-child(1):focus-within i.icon-visible {
  animation-play-state: paused; /* pause all animations (spin, float, glow) 
  transform: translateY(-3px) scale(1.2) rotateY(15deg); /* lift and tilt slightly 
  filter: drop-shadow(0 0 14px rgba(253,224,71,0.95))
          drop-shadow(0 0 26px rgba(253,224,71,0.75))
          brightness(1.15);
  transition: all 0.4s ease;
  cursor: pointer;
}

@keyframes trophyShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}*/






.fcc-honors li:nth-child(2) i {
  color: #facc15; /* True gold */
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.6)) 
          drop-shadow(0 0 10px rgba(234, 179, 8, 0.4)); /* Warm halo */
} /* 🏅 Medal */

.fcc-honors li:nth-child(3) i {
  color: #f59e0b; /* Amber-gold (deeper tone) */
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)) 
          drop-shadow(0 0 8px rgba(217, 119, 6, 0.35)); /* Subtle depth */
} /* 🥇 Award */

.fcc-honors li:nth-child(4) i {
  color: #0ea5e9; /* Cyan-blue stopwatch */
  filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.7)) 
          drop-shadow(0 0 10px rgba(125, 211, 252, 0.5));
} /* ⏱️ Stopwatch */

.fcc-honors li:nth-child(5) i {
  color: #f97316; /* Vibrant orange bolt */
  filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.6)) 
          drop-shadow(0 0 10px rgba(251, 146, 60, 0.4));
} /* ⚡ Bolt */

.fcc-honors li:nth-child(6) i {
  color: #22c55e; /* Emerald green star */
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.6)) 
          drop-shadow(0 0 10px rgba(74, 222, 128, 0.4));
} /* ⭐ Star */


/* ---------- Section Headings & Divider ---------- */
h2 i,
h4 i {
  margin-right: 0.4em;
  color: var(--accent);
}
.fcc-emoji i {
  font-size: 1.8rem;
  color: var(--accent);
  opacity: 0.9;
  filter: drop-shadow(0 0 3px var(--glow));
}

/* =========================================
   Scroll + Hover + Mobile Animations
   ========================================= */

/* Base state: hidden until scrolled into view */
.fcc-honors i,
h2 i,
h4 i,
.fcc-emoji i {
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease, color 0.6s ease;
  will-change: transform, opacity, filter, color;
}

/* When visible (scroll trigger adds .icon-visible) */
.fcc-honors i.icon-visible,
h2 i.icon-visible,
h4 i.icon-visible,
.fcc-emoji i.icon-visible {
  opacity: 1;
  transform: scale(1);
  animation:
    floatPulse 2.8s ease-in-out infinite alternate,
    softGlow   3.2s ease-in-out infinite alternate;
}

/* Float and Glow keyframes */
@keyframes floatPulse {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-3px) scale(1.07); }
}
@keyframes softGlow {
  0%   { filter: drop-shadow(0 0 2px currentColor); }
  100% { filter: drop-shadow(0 0 8px currentColor); }
}

/* Add randomness to floating motion */
.fcc-honors i.icon-visible:nth-child(odd),
h2 i.icon-visible:nth-child(odd),
h4 i.icon-visible:nth-child(odd),
.fcc-emoji i.icon-visible:nth-child(odd) {
  animation-delay: 0.8s, 0.4s; /* float, glow */
}
.fcc-honors i.icon-visible:nth-child(3n),
h2 i.icon-visible:nth-child(3n),
h4 i.icon-visible:nth-child(3n),
.fcc-emoji i.icon-visible:nth-child(3n) {
  animation-delay: 1.2s, 0.6s;
}

/* Hover (desktop): pause floating and glow, lift higher */
.fcc-honors i.icon-visible:hover,
h2 i.icon-visible:hover,
h4 i.icon-visible:hover,
.fcc-emoji i.icon-visible:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.15);
  filter: drop-shadow(0 0 10px currentColor);
  opacity: 1;
}

/* Mobile "active/focus" mimic hover */
.fcc-honors li:active i,
.fcc-honors li:focus-within i,
h2:active i, h2:focus-within i,
h4:active i, h4:focus-within i,
.fcc-emoji:active i, .fcc-emoji:focus-within i {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.15);
  filter: drop-shadow(0 0 10px currentColor);
  opacity: 1;
}

/* Subtle focus outline hint for accessibility */
.fcc-honors li:focus-within {
  filter: drop-shadow(0 0 2px var(--accent));
}

/* Ensure transitions are smooth */
.fcc-honors i,
h2 i,
h4 i,
.fcc-emoji i {
  transition: transform .4s ease, opacity .4s ease, filter .4s ease, color .4s ease;
  will-change: transform, filter, color, opacity;
}

/* Show icons immediately once fully loaded (avoid flash at top) */
body.loaded .fcc-honors i,
body.loaded h2 i,
body.loaded h4 i,
body.loaded .fcc-emoji i {
  opacity: 1;
  transform: scale(1);
}


/* Rulebook polished UI */
.rule-header .toggle {
  font-weight: 700;
  font-size: 1.3rem;
  user-select: none;
  transition: transform 0.25s ease;
}
.rule-card.active .rule-header .toggle {
  transform: rotate(180deg);
}

.rule-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.rule-card.active .rule-items {
  max-height: 800px; /* enough for tall sections */
}

.rule-items ol {
  margin: 0.8rem 0 0 1.2rem;
  padding: 0;
}
.rule-items li {
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.rule-card:nth-child(8) .rule-header i {
  filter: drop-shadow(0 0 8px rgba(13,71,161,0.8));
}




/* ===== Game Embeds ===== */
.game-panels{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-4, 1rem);
}
@media (max-width: 900px){
  .game-panels{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .game-panels{ grid-template-columns: 1fr; }
}
.game-card .game-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* square view; adjust to 16/9 if preferred */
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  background: var(--surface-2, #111);
  border: 1px solid var(--border, rgba(255,255,255,.08));
}
.game-card .game-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.game-card .game-actions { margin-top: .75rem; display:flex; justify-content:flex-end; }
.game-card h3 { margin-bottom:.5rem; }

/* HERO rotating heading (no glitch) */
.hero {
  position: relative;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-tagline {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: #e9f7ff;
  font-size: 1rem;
  max-width: 40rem;
}

/* Rotating hero title */
.hero-rotator-title {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;   /* tighter so it fits on one line */
  color: #4fc3f7;
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  /* no overflow: hidden needed anymore */
  line-height: 1.3;
}

/* Each sentence – SIMPLE VERSION */
.hero-rotator-set {
  display: none;                 /* hidden by default */
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.hero-rotator-set.active {
  display: inline;               /* only active one is in flow */
  opacity: 1;
  transform: translateY(0);
}

/* On very small screens allow wrapping so it doesn’t overflow */
@media (max-width: 600px) {
  .hero-rotator-title {
    letter-spacing: 0.04em;
  }
}

/* hero subtitle (sits nicely under the new title) */
.hero-subtitle {
  color: #ffffff;
  text-align: center;
  margin-bottom: 1.75rem;
}

/* particles background (your dot particles) */
.particles-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00ffe0;
  box-shadow:
    0 0 12px rgba(0, 255, 224, 0.9),
    0 0 28px rgba(0, 123, 255, 0.7);
  opacity: 0;
  animation-name: floatUp-fcc;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes floatUp-fcc {
  0% {
    transform: translateY(110vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20vh);
    opacity: 0;
  }
}


/* ===== Diagonal Light Streaks ===== */
.fx-streaks-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.streak {
  position: absolute;
  width: 45%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 255, 255, 0.7),
    rgba(79, 195, 247, 0.9),
    transparent
  );
  opacity: 0.35;
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
  animation: streakSlide 16s linear infinite;
}

/* different bands */
.fx-streaks-bg .streak:nth-child(1) {
  top: 10%;
  left: -50%;
  animation-duration: 18s;
}
.fx-streaks-bg .streak:nth-child(2) {
  top: 40%;
  left: -60%;
  animation-duration: 20s;
}
.fx-streaks-bg .streak:nth-child(3) {
  top: 70%;
  left: -55%;
  animation-duration: 22s;
}
.fx-streaks-bg .streak:nth-child(4) {
  top: 85%;
  left: -70%;
  opacity: 0.25;
  animation-duration: 26s;
}

@keyframes streakSlide {
  0% {
    transform: translateX(0) rotate(-18deg);
  }
  100% {
    transform: translateX(220%) rotate(-18deg);
  }
}

/* ===== Floating Chess Pieces (random, glowing, parallax-ready) ===== */
.fx-chess-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;

  /* mouse parallax (updated from JS) */
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform 0.25s ease-out;
}

.chess-piece {
  position: absolute;
  font-size: 3.2rem;
  color: #00ffe0;
  opacity: 0.10;
  filter: drop-shadow(0 0 10px rgba(0, 255, 224, 0.7));
  pointer-events: none;

  /* two animations: drift + soft glow */
  animation-name: chessDrift, glowPulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  animation-duration: var(--driftDur, 28s), 4s;
}

/* up-and-away drifting path */
@keyframes chessDrift {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-40vh) translateX(15px) rotate(12deg) scale(1.05);
  }
  100% {
    transform: translateY(-80vh) translateX(-10px) rotate(-2deg) scale(1);
  }
}

/* glowing / breathing effect */
@keyframes glowPulse {
  0% {
    opacity: 0.06;
    text-shadow:
      0 0 6px rgba(0, 255, 224, 0.4),
      0 0 16px rgba(0, 123, 255, 0.0);
  }
  100% {
    opacity: 0.16;
    text-shadow:
      0 0 10px rgba(0, 255, 224, 0.8),
      0 0 26px rgba(0, 123, 255, 0.6);
  }
}