:root {
   
    --red-bg: rgba(216, 30, 31, 1);
    --cherry-bg: rgba(144, 19, 21, 1);
    --strawberry-bg: rgba(95, 20, 21, 1);
    --darkred-bg: rgba(43, 16, 19, 1);
    

    --yellow-bg: rgba(254, 204, 68, 1);
    --cyan-bg: rgba(23, 223, 215, 1);
    --pink-bg: rgba(250, 95, 80, 1);
    --pinker-bg: rgba(248, 67, 58, 1);
    --text-light: #f8f9fa;
    --text-dark: #212529;
    
    
    --border-radius: clamp(4px, 1vw, 8px);
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --transition: all 0.3s ease;
    
    
    --text-xs: clamp(0.75rem, 2vw, 0.9rem);
    --text-sm: clamp(0.9rem, 2.5vw, 1rem);
    --text-md: clamp(1rem, 3vw, 1.2rem);
    --text-lg: clamp(1.25rem, 4vw, 1.5rem);
    --text-xl: clamp(1.5rem, 5vw, 2rem);
    --text-xxl: clamp(2rem, 7vw, 3rem);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--darkred-bg);
    font-size: var(--text-md);
}

header {
    background-color: var(--cherry-bg);
    padding: 0.75rem 0;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.logo {
    font-size: var(--text-xxl);
    font-weight: 700;
    color: var(--yellow-bg);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 0.75rem;
    font-size: var(--text-sm);
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    padding: 0.5rem 0.75rem;
}

.nav-links a:hover {
    color: var(--yellow-bg);
}

.nav-links .active {
    color: var(--yellow-bg);
    border-bottom: 2px solid var(--yellow-bg);
}

.login-btn {
    background-color: var(--red-bg);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem !important;
}


.algs-banner {
    width: 100%;
    height: 25vh;
    min-height: 150px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    position: relative;
}

.algs-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.algs-banner::after {
    position: absolute;
    color: white;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}


.moving-banner {
    background-color: var(--strawberry-bg);
    padding: 1rem 0;
    overflow: hidden;
    position: relative;
}

.banner-text {
    white-space: nowrap;
    animation: scroll 20s linear infinite;
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--yellow-bg);
    text-transform: uppercase;
}

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


.container {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.text-content {
    padding: 1.25rem;
    background-color: var(--strawberry-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.text-content h1 {
    color: var(--yellow-bg);
    margin-bottom: 1rem;
    font-size: var(--text-xl);
}

.text-content h2 {
    color: var(--cyan-bg);
    margin: 1.25rem 0 0.75rem;
    font-size: var(--text-lg);
}

.text-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
}


.myndasyning {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.myndir {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 200px;
}

.myndir input[type="radio"] {
    display: none;
}

.mynd {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.mynd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.val {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.val label {
    display: block;
    width: clamp(8px, 2vw, 12px);
    height: clamp(8px, 2vw, 12px);
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.val label:hover {
    opacity: 1;
}

@keyframes slideshow {
    0%, 10% { opacity: 1; z-index: 1; }
    12.5%, 100% { opacity: 0; z-index: 0; }
}

#s1 { animation: slideshow 24s infinite; animation-delay: 0s; }
#s2 { animation: slideshow 24s infinite; animation-delay: 3s; }
#s3 { animation: slideshow 24s infinite; animation-delay: 6s; }
#s4 { animation: slideshow 24s infinite; animation-delay: 9s; }
#s5 { animation: slideshow 24s infinite; animation-delay: 12s; }
#s6 { animation: slideshow 24s infinite; animation-delay: 15s; }
#s7 { animation: slideshow 24s infinite; animation-delay: 18s; }
#s8 { animation: slideshow 24s infinite; animation-delay: 21s; }

#mynd1:checked ~ .val label:nth-child(1),
#mynd2:checked ~ .val label:nth-child(2),
#mynd3:checked ~ .val label:nth-child(3),
#mynd4:checked ~ .val label:nth-child(4),
#mynd5:checked ~ .val label:nth-child(5),
#mynd6:checked ~ .val label:nth-child(6),
#mynd7:checked ~ .val label:nth-child(7),
#mynd8:checked ~ .val label:nth-child(8) {
    background-color: var(--yellow-bg);
    opacity: 1;
}


.chat-toggle {
    display: none;
}

.chat-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--red-bg);
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 80;
    box-shadow: var(--box-shadow);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-widget {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: clamp(250px, 90vw, 300px);
    background-color: var(--strawberry-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    z-index: 90;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.chat-toggle:checked ~ .chat-widget {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.chat-header {
    background-color: var(--cherry-bg);
    color: var(--text-light);
    padding: 0.75rem 1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.chat-messages {
    height: 200px;
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--darkred-bg);
}

.chat-input {
    display: flex;
    padding: 0.5rem;
    background-color: var(--cherry-bg);
}

.chat-input input {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 4px 0 0 4px;
}

.chat-input button {
    padding: 0.5rem 1rem;
    background-color: var(--red-bg);
    color: var(--text-light);
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* Footer */
footer {
    background-color: var(--cherry-bg);
    padding: 1.5rem 0 1rem;
    margin-top: 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
}

.footer-section h3 {
    color: var(--yellow-bg);
    margin-bottom: 1rem;
    font-size: var(--text-lg);
}

.moving-objects {
    height: 60px;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
    background-color: rgba(43, 16, 19, 0.3);
    border-radius: 8px;
}

.apex-logo {
    position: absolute;
    display: flex;
    animation: moveLogo 15s linear infinite, pulse 2s ease-in-out infinite;
}

.apex-logo span {
    font-family: 'Arial Black', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: var(--yellow-bg);
    text-shadow: 0 0 10px rgba(255, 79, 105, 0.7);
    margin: 0 2px;
    animation: colorShift 4s infinite alternate;
}

.apex-logo span:nth-child(1) { animation-delay: 0s; }
.apex-logo span:nth-child(2) { animation-delay: 0.2s; }
.apex-logo span:nth-child(3) { animation-delay: 0.4s; }
.apex-logo span:nth-child(4) { animation-delay: 0.6s; }

@keyframes moveLogo {
    0% { left: -100px; }
    100% { left: calc(100% + 100px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes colorShift {
    0% { color: var(--yellow-bg); }
    25% { color: var(--cyan-bg); }
    50% { color: var(--pink-bg); }
    75% { color: var(--pinker-bg); }
    100% { color: var(--text-dark); }
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-links a:hover img {
    transform: scale(1.2);
}

.merch-btn {
    background-color: var(--red-bg);
    color: var(--text-light);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 1rem;
}

.merch-btn:hover {
    background-color: var(--pink-bg);
    transform: translateY(-3px);
}

.credits {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--strawberry-bg);
    color: var(--text-light);
    opacity: 0.8;
    font-size: var(--text-xs);
}


@media (min-width: 768px) {
    header {
        padding: 1rem 0;
    }

    nav {
        padding: 0 2rem;
    }

    .nav-links {
        gap: 1.5rem;
        font-size: var(--text-md);
    }

    .algs-banner {
        height: 30vh;
        min-height: 250px;
    }

    .content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .myndir {
        height: 50vh;
        min-height: 300px;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .algs-banner {
        height: 40vh;
        min-height: 550px;
    }

    .myndir {
        height: 60vh;
        min-height: 400px;
    }

    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (min-width: 1440px) {
    .algs-banner {
        height: 50vh;
        min-height: 650px;
    }
}


@media (prefers-reduced-motion) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.tournament-signup {
    padding: 2rem;
    background-color: var(--cherry-bg);
    text-align: center;
  }
  
  .tournament-signup h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  
  .tournament-signup table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    max-width: 1000px;
  }
  
  .tournament-signup th,
  .tournament-signup td {
    padding: 0.75rem;
    border: 4px solid var(--darkred-bg);
    text-align: center;
  }
  
  .tournament-signup a {
    text-decoration: none;
    color: var(--red-bg);
    background-color: var(--strawberry-bg);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
  }
  
  .tournament-signup a:hover {
    background-color: var(--pink-bg);
  }
  
  #splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(225deg, var(--red-bg), var(--cherry-bg), var(--strawberry-bg), var(--darkred-bg));
    background-size: 800% 800%;
    animation:
      bgShift 6s ease-in-out infinite,
      splashFade 2s ease forwards 3.5s;
  }
  
  #splash h1 {
    font-size: 5rem;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 100, 100, 0.7);
    animation:
      zoomGlow 2s ease-in-out infinite,
      blurOut 1.5s ease forwards 3s;
  }
  
  @keyframes bgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  @keyframes zoomGlow {
    0%, 100% {
      transform: scale(1);
      text-shadow: 0 0 20px rgba(255, 100, 100, 0.7);
    }
    50% {
      transform: scale(1.15);
      text-shadow: 0 0 30px rgba(255, 150, 150, 1);
    }
  }
  
  @keyframes blurOut {
    to {
      filter: blur(10px);
      opacity: 0;
    }
  }
  
  @keyframes splashFade {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  .dropdown {
    display: none;
  }
  
  /* Mobile styles */
  @media (max-width: 768px) {
    .dropdown {
      display: block;
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 1000;
    }
  
    .dropdown input[type="checkbox"] {
      display: none;
    }
  
    .dropdown label {
      background: var(--cherry-bg);
      color: white;
      padding: 0.6rem 1rem;
      font-size: 1.2rem;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
  
    .dropdown ul {
      list-style: none;
      margin: 0.5rem 0 0 0;
      padding: 0;
      background: var(--strawberry-bg);
      border-radius: 6px;
      overflow: hidden;
      display: none;
      min-width: 150px;
    }
  
    .dropdown ul li {
      border-bottom: 1px solid var(--darkred-bg);
    }
  
    .dropdown ul li:last-child {
      border-bottom: none;
    }
  
    .dropdown ul li a {
      display: block;
      padding: 0.75rem 1rem;
      color: white;
      text-decoration: none;
    }
  
    .dropdown ul li a:hover {
      background: var(--red-bg);
    }
  
    .dropdown input:checked + label + ul {
      display: block;
    }
  }