/*
 * ARKUSZ STYLÓW DLA STRONY "ARENA MISTRZÓW COSINUS"
 * WERSJA: 4.0 (FINAL PROFESSIONAL BUILD)
 * AUTOR: Jarosław Sawczenko (przy wsparciu AI)
 */

/* === 1. ZMIENNE GLOBALNE I RESETOWANIE STYLÓW === */
:root {
   --primary-color: #00f7ff;
   --secondary-color: #f800ff;
   --warning-color: #ffd900;
   --dark-bg: #0d0c1d;
   --glass-bg: rgba(22, 23, 49, 0.75);
   --text-color: #d1d1d1;
   --heading-color: #ffffff;
   --font-heading: 'Rajdhani', sans-serif;
   --font-body: 'Roboto', sans-serif;
   --border-radius: 12px;
}

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

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-body);
   background-color: var(--dark-bg);
   background-image: url('https://www.transparenttextures.com/patterns/subtle-prism.png');
   color: var(--text-color);
   line-height: 1.7;
   overflow-x: hidden;
}

/* === 2. GŁÓWNE KOMPONENTY I STYLE OGÓLNE === */
.container {
   max-width: 1100px;
   margin: 50px auto;
   padding: 3rem;
   background: var(--glass-bg);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--border-radius);
   backdrop-filter: blur(10px);
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
   text-align: center;
}

h2 {
   font-family: var(--font-heading);
   color: var(--heading-color);
   text-transform: uppercase;
   font-size: 3rem;
   margin-bottom: 2rem;
   display: inline-block;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid var(--primary-color);
   text-shadow: 0 0 5px var(--primary-color);
}

strong {
   color: var(--primary-color);
   font-weight: 700;
}

/* === 3. SEKCJA GŁÓWNA (HERO) === */
.hero {
   position: relative;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
   overflow: hidden;
   background: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=1000&auto=format&fit=crop') no-repeat center center/cover;
}

.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(13, 12, 29, 0.8), rgba(22, 23, 49, 0.9));
}

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

.hero-content h1 {
   font-family: var(--font-heading);
   font-size: 5rem;
   margin-bottom: 0.5rem;
   text-shadow: 0 0 10px var(--primary-color);
}

.hero-content p {
   font-size: 1.5rem;
   margin-bottom: 2.5rem;
   color: var(--text-color);
}

.btn {
   text-decoration: none;
   color: white;
   padding: 1rem 2.5rem;
   border-radius: 50px;
   font-weight: bold;
   font-family: var(--font-heading);
   text-transform: uppercase;
   transition: all 0.3s ease;
   border: 2px solid var(--primary-color);
   background: transparent;
   box-shadow: 0 0 15px var(--primary-color), inset 0 0 10px rgba(0, 247, 255, 0.3);
}

.btn:hover {
   background-color: var(--primary-color);
   color: var(--dark-bg);
   transform: translateY(-5px) scale(1.05);
   box-shadow: 0 10px 25px rgba(0, 247, 255, 0.4);
}

/* === 4. SEKCJA "GRY TURNIEJOWE" (NOWA) === */
.games-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.5rem;
   margin-top: 2rem;
}

.game-card {
   padding: 1.5rem;
   background: rgba(0, 0, 0, 0.3);
   border-radius: var(--border-radius);
   border: 1px solid rgba(255, 255, 255, 0.1);
   font-family: var(--font-heading);
   font-size: 1.3rem;
   color: var(--heading-color);
   transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
   transform: translateY(-5px);
   background-color: var(--primary-color);
   color: var(--dark-bg);
   box-shadow: 0 0 20px var(--primary-color);
}

.details-link {
   margin-top: 2rem;
   font-size: 1.1rem;
}

.details-link a {
   color: var(--primary-color);
   text-decoration: none;
   font-weight: 700;
   border-bottom: 1px solid transparent;
   transition: border-bottom-color 0.3s ease;
}

.details-link a:hover {
   border-bottom-color: var(--primary-color);
}

/* === 5. SEKCJA "ETAPY TURNIEJU" === */
.stages-container {
   display: flex;
   gap: 2rem;
   margin-top: 2rem;
   text-align: left;
}

.stage {
   flex: 1;
   padding: 2rem;
   background: rgba(0, 0, 0, 0.2);
   border-radius: var(--border-radius);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-left: 5px solid var(--secondary-color);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stage:hover {
   transform: translateY(-5px);
   box-shadow: 0 0 15px var(--secondary-color);
}

.stage h3 {
   font-family: var(--font-heading);
   color: var(--secondary-color);
   font-size: 1.8rem;
   margin-bottom: 1rem;
   text-shadow: 0 0 5px var(--secondary-color);
}

.important-notice {
   margin-top: 2.5rem;
   padding: 1.5rem;
   background: rgba(255, 217, 0, 0.1);
   border: 1px solid var(--warning-color);
   border-radius: var(--border-radius);
   color: var(--warning-color);
   font-size: 1.1rem;
   box-shadow: 0 0 20px rgba(255, 217, 0, 0.2);
}

.important-notice strong {
   color: #fff;
}

/* === 6. POZOSTAŁE SEKCJE === */
.qr-code-container {
   display: inline-block;
   padding: 1.5rem;
   background-color: #fff;
   border-radius: var(--border-radius);
   margin-top: 2rem;
   box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
}

.qr-code-container img {
   display: block;
   max-width: 220px;
}

.qr-caption {
   color: #333;
   font-weight: bold;
   margin-top: 1rem;
   font-family: var(--font-body);
}

.guide-container {
   text-align: left;
   margin-top: 2rem;
   padding: 2rem;
   background: rgba(0, 0, 0, 0.2);
   border-radius: var(--border-radius);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-step {
   padding: 1rem;
   margin-bottom: 1rem;
   border-left: 4px solid var(--secondary-color);
   background: rgba(0, 0, 0, 0.2);
   border-radius: 0 8px 8px 0;
}

.guide-step p {
   font-family: var(--font-heading);
   font-size: 1.2rem;
   color: var(--heading-color);
   margin-bottom: 0.25rem;
}

.guide-step span {
   color: var(--text-color);
   font-size: 1.1rem;
}

.quiz-intro {
   font-style: italic;
   margin: 1.5rem 0;
   text-align: center;
   color: var(--primary-color);
}

/* === 7. STOPKA === */
.footer {
   text-align: center;
   padding: 2rem;
   margin-top: 4rem;
   background-color: #080714;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* === 8. ANIMACJE NA SCROLL === */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

/* === 9. STYLE RESPONSIVE === */
@media (max-width: 900px) {
   .container {
      padding: 2rem;
   }

   h2 {
      font-size: 2.5rem;
   }
}

@media (max-width: 768px) {
   .stages-container {
      flex-direction: column;
   }
}

@media (max-width: 600px) {
   .hero-content h1 {
      font-size: 3.5rem;
   }

   .hero-content p {
      font-size: 1.2rem;
   }

   h2 {
      font-size: 2rem;
   }

   .games-grid {
      grid-template-columns: 1fr;
   }
}