/**
 * LinkCentre Games - Fun & Colorful Design
 * Matching main site blue with playful elements
 * FUN FUN FUN! 🎮🎯🏆
 */

/* ============================================
   PAGE BACKGROUND - Subtle fun pattern
   ============================================ */
html.games-page,
body.games-page,
.games-page {
  background-color: #f0f7ff !important;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.6'%3E%3C!-- Puzzle piece --%3E%3Cpath d='M25 15c0-2.8 2.2-5 5-5s5 2.2 5 5c0 1.4-.6 2.7-1.5 3.6V25h-7v-6.4c-.9-.9-1.5-2.2-1.5-3.6z' /%3E%3C!-- Dice --%3E%3Crect x='140' y='10' width='20' height='20' rx='3' /%3E%3Ccircle cx='146' cy='16' r='2' fill='%23f0f7ff' /%3E%3Ccircle cx='154' cy='24' r='2' fill='%23f0f7ff' /%3E%3C!-- Star --%3E%3Cpolygon points='100,5 103,15 113,15 105,21 108,31 100,25 92,31 95,21 87,15 97,15' /%3E%3C!-- Game controller --%3E%3Cellipse cx='50' cy='100' rx='18' ry='12' /%3E%3Crect x='38' y='94' width='6' height='12' rx='1' /%3E%3Crect x='56' y='94' width='6' height='12' rx='1' /%3E%3C!-- Trophy --%3E%3Cpath d='M150 90v15h-10v-15c-5 0-8-4-8-8v-7h26v7c0 4-3 8-8 8zm-5 15v5h-5v3h15v-3h-5v-5h-5z' /%3E%3C!-- Target --%3E%3Ccircle cx='30' cy='160' r='12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.6' /%3E%3Ccircle cx='30' cy='160' r='6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.6' /%3E%3Ccircle cx='30' cy='160' r='2' /%3E%3C!-- Lightning bolt --%3E%3Cpolygon points='175,140 168,155 173,155 166,175 180,152 174,152' /%3E%3C!-- Heart --%3E%3Cpath d='M100 170c-1.5-1.5-10-9-10-15 0-4 3-7 7-7 2.5 0 4 1.5 5 3 1-1.5 2.5-3 5-3 4 0 7 3 7 7 0 6-8.5 13.5-10 15l-2 2-2-2z' /%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
  background-attachment: fixed !important;
}

/* ============================================
   HERO SECTION - Bright LinkCentre Blue!
   ============================================ */
.games-hero {
  background: linear-gradient(135deg, #00498f 0%, #0066cc 50%, #1a7fd4 100%) !important;
  color: #ffffff !important;
  padding: 50px 20px 70px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 0 24px 24px !important;
}

.games-hero::before {
  content: '🎮 🧩 🎯 🏆 ⭐ 🎲' !important;
  position: absolute !important;
  top: 15px !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 20px !important;
  letter-spacing: 30px !important;
  opacity: 0.2 !important;
  animation: floatEmoji 4s ease-in-out infinite !important;
}

.games-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -30px !important;
  left: -5% !important;
  right: -5% !important;
  height: 60px !important;
  background: #f0f7ff !important;
  border-radius: 50% 50% 0 0 !important;
}

@keyframes floatEmoji {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.games-hero-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.games-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,193,7,0.9) !important;
  color: #003366 !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 15px rgba(255,193,7,0.4) !important;
}

.games-hero-badge::before {
  content: '🎉' !important;
}

.games-hero h1 {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
  line-height: 1.1 !important;
  text-shadow: 0 3px 15px rgba(0,0,0,0.2) !important;
  color: #ffffff !important;
}

.games-hero h1 span {
  display: block !important;
  font-size: 0.4em !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  color: #ffc107 !important;
  margin-top: 10px !important;
  text-shadow: 0 2px 8px rgba(255,193,7,0.4) !important;
}

.games-hero-tagline {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.95) !important;
  margin: 0 0 28px !important;
  text-align: center !important;
  font-weight: 400 !important;
}

.games-hero-divider {
  display: none !important;
}

.games-hero-actions {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ============================================
   BUTTONS - Bright & Inviting
   ============================================ */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  border-radius: 50px !important;
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
}

.btn-primary {
  background: linear-gradient(135deg, #ffc107 0%, #ffda6a 100%) !important;
  color: #003366 !important;
  box-shadow: 0 4px 20px rgba(255,193,7,0.5) !important;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(255,193,7,0.6) !important;
}

.btn-outline {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(5px) !important;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.25) !important;
  border-color: #ffffff !important;
  transform: translateY(-3px) !important;
}

.btn-outline-dark {
  background: transparent !important;
  color: #00498f !important;
  border: 2px solid #00498f !important;
}

.btn-outline-dark:hover {
  background: #00498f !important;
  color: #ffffff !important;
}

/* ============================================
   PAGE BACKGROUND
   ============================================ */
.games-page {
  font-family: 'Raleway', Arial, sans-serif !important;
  background: #f0f7ff !important;
  min-height: 100vh !important;
}

/* ============================================
   SECTIONS
   ============================================ */
.games-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.games-section {
  padding: 50px 0 !important;
}

.games-section-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.games-section-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #00498f !important;
  margin: 0 0 10px !important;
}

.games-section-subtitle {
  font-size: 1rem !important;
  color: #666666 !important;
  margin: 0 !important;
}

.games-section-divider {
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #ffc107, #f97316) !important;
  border-radius: 50px !important;
  margin: 16px auto 0 !important;
}

/* ============================================
   DAILY CHALLENGES
   ============================================ */
.daily-challenges {
  background: #ffffff !important;
  margin-top: -30px !important;
  position: relative !important;
  z-index: 2 !important;
  padding-top: 50px !important;
}

.daily-challenges-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.daily-challenges-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: #00498f !important;
  background: #e0f2fe !important;
  padding: 10px 18px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
}

.daily-challenges-date::before {
  content: '📅' !important;
}

/* ============================================
   GAME CARDS - Colorful & Fun!
   ============================================ */
.games-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 24px !important;
}

.games-grid-featured {
  grid-template-columns: repeat(3, 1fr) !important;
}

.game-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0,73,143,0.12) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
}

.game-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 40px rgba(0,73,143,0.2) !important;
  border-color: #ffc107 !important;
}

/* Colorful card headers! */
.game-card:nth-child(1) .game-card-header {
  background: linear-gradient(135deg, #00498f 0%, #0077cc 100%) !important;
}
.game-card:nth-child(2) .game-card-header {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
}
.game-card:nth-child(3) .game-card-header {
  background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
}
.game-card:nth-child(4) .game-card-header {
  background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%) !important;
}
.game-card:nth-child(5) .game-card-header {
  background: linear-gradient(135deg, #db2777 0%, #f472b6 100%) !important;
}
.game-card:nth-child(6) .game-card-header {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%) !important;
}

.game-card-header {
  background: linear-gradient(135deg, #00498f 0%, #0077cc 100%) !important;
  color: #ffffff !important;
  padding: 24px 20px !important;
  position: relative !important;
}

.game-card-icon {
  font-size: 40px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.game-card-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  color: #ffffff !important;
}

.game-card-number {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.8) !important;
  background: rgba(0,0,0,0.2) !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  display: inline-block !important;
}

.game-card-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.game-card-description {
  color: #555555 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.game-card-stats {
  display: flex !important;
  gap: 20px !important;
  padding: 14px 0 !important;
  border-top: 2px dashed #e2e8f0 !important;
  border-bottom: 2px dashed #e2e8f0 !important;
}

.game-card-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.game-card-stat-value {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #00498f !important;
}

.game-card-stat-label {
  font-size: 11px !important;
  color: #888888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.game-card-cta {
  display: block !important;
  background: linear-gradient(135deg, #00498f 0%, #0066cc 100%) !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 14px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

.game-card-cta:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0,73,143,0.3) !important;
}

.game-card-cta::after {
  content: ' →' !important;
}

/* ============================================
   GAME PAGE HEADER
   ============================================ */
.game-page-header {
  background: linear-gradient(135deg, #00498f 0%, #0066cc 100%) !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  border-radius: 0 0 24px 24px !important;
}

.game-page-header-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.game-page-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  background: rgba(255,255,255,0.1) !important;
  transition: all 0.2s ease !important;
}

.game-page-back:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}

.game-page-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

.game-page-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 14px !important;
}

.game-page-number {
  font-family: 'JetBrains Mono', monospace !important;
  color: #ffc107 !important;
  background: rgba(255,193,7,0.2) !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
}

.game-page-date {
  color: rgba(255,255,255,0.8) !important;
}

.game-layout {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 28px !important;
  padding: 32px 0 !important;
}

.game-main {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0,73,143,0.1) !important;
  padding: 28px !important;
}

.game-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* ============================================
   TIMER - Fun Colors!
   ============================================ */
.game-timer-widget {
  background: linear-gradient(135deg, #00498f 0%, #0066cc 100%) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  text-align: center !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

.game-timer-widget::before {
  content: '⏱️' !important;
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  font-size: 20px !important;
  opacity: 0.3 !important;
}

.game-timer {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

.game-timer-label {
  font-size: 12px !important;
  color: rgba(255,255,255,0.8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 6px !important;
}

/* ============================================
   LEADERBOARD - Trophy Style!
   ============================================ */
.leaderboard {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(0,73,143,0.1) !important;
  overflow: hidden !important;
}

.leaderboard-header {
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #ffc107 0%, #ffda6a 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.leaderboard-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #003366 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.leaderboard-title::before {
  content: '🏆' !important;
}

.leaderboard-badge {
  font-size: 10px !important;
  color: #003366 !important;
  background: rgba(255,255,255,0.6) !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.leaderboard-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.leaderboard-empty {
  padding: 24px 20px !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 0.9rem !important;
}

.leaderboard-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px 20px !important;
  gap: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: all 0.2s ease !important;
}

.leaderboard-item:last-child {
  border-bottom: none !important;
}

.leaderboard-item:hover {
  background: #f8fafc !important;
}

.leaderboard-rank {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  width: 28px !important;
  text-align: center !important;
}

.leaderboard-rank.gold { color: #ffc107 !important; }
.leaderboard-rank.silver { color: #94a3b8 !important; }
.leaderboard-rank.bronze { color: #cd7f32 !important; }

.leaderboard-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #00498f 0%, #0066cc 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.leaderboard-name {
  flex-grow: 1 !important;
  font-weight: 600 !important;
  color: #333333 !important;
}

.leaderboard-score {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: #00498f !important;
  font-weight: 600 !important;
}

/* ============================================
   USER STATS
   ============================================ */
.user-stats {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(0,73,143,0.1) !important;
  overflow: hidden !important;
}

.user-stats-header {
  background: #f0f7ff !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.user-stats-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00498f !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.user-stats-title::before {
  content: '📊' !important;
}

.user-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.user-stats-item {
  padding: 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-right: 1px solid #f1f5f9 !important;
}

.user-stats-item:nth-child(2n) {
  border-right: none !important;
}

.user-stats-item:nth-last-child(-n+2) {
  border-bottom: none !important;
}

.user-stats-value {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #00498f !important;
}

.user-stats-label {
  font-size: 11px !important;
  color: #888888 !important;
  margin-top: 2px !important;
}

.user-stats-item.streak .user-stats-value {
  color: #ea580c !important;
}

.user-stats-item.streak .user-stats-value::after {
  content: ' 🔥' !important;
}

/* ============================================
   INFO BOX
   ============================================ */
.info-box {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%) !important;
  border-left: 4px solid #00498f !important;
  padding: 14px 18px !important;
  border-radius: 0 12px 12px 0 !important;
  font-size: 14px !important;
  color: #333333 !important;
  margin: 20px 0 !important;
}

.info-box strong {
  color: #00498f !important;
}

/* ============================================
   GAME CONTROLS
   ============================================ */
.game-controls {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
}

.game-control-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  color: #00498f !important;
  border: 2px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.game-control-btn:hover {
  border-color: #00498f !important;
  background: #f0f7ff !important;
  transform: translateY(-2px) !important;
}

.game-control-btn.primary {
  background: linear-gradient(135deg, #ffc107 0%, #ffda6a 100%) !important;
  color: #003366 !important;
  border-color: transparent !important;
}

.game-control-btn.primary:hover {
  box-shadow: 0 4px 15px rgba(255,193,7,0.4) !important;
}

/* ============================================
   CTA FOOTER
   ============================================ */
.games-cta-section {
  background: linear-gradient(135deg, #00498f 0%, #003366 100%) !important;
  color: #ffffff !important;
  padding: 60px 24px !important;
  border-radius: 24px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.games-cta-section::before {
  content: '🎮 🧩 🎯 🏆 ⭐' !important;
  position: absolute !important;
  bottom: 15px !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 24px !important;
  letter-spacing: 25px !important;
  opacity: 0.15 !important;
}

.games-cta-title {
  font-family: 'Raleway', Arial, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
  color: #ffffff !important;
}

.games-cta-text {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 28px !important;
  max-width: 450px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .game-layout {
    grid-template-columns: 1fr !important;
  }
  
  .games-grid-featured {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .games-hero {
    padding: 40px 16px 60px !important;
  }
  
  .games-hero h1 {
    font-size: 2.2rem !important;
  }
  
  .games-grid,
  .games-grid-featured {
    grid-template-columns: 1fr !important;
  }
  
  .games-section {
    padding: 36px 0 !important;
  }
  
  .daily-challenges-header {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .game-page-header-inner {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .game-main {
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  .games-hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 20px !important;
  }
  
  .btn {
    width: 100% !important;
  }
}