/* OBELIXPRO Font */
@font-face {
  font-family: 'OBELIXPRO';
  src: url('fonts/ObelixPro-cyr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OBELIXPRO';
  src: url('fonts/ObelixProB-cyr.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OBELIXPRO';
  src: url('fonts/ObelixProIt-cyr.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'OBELIXPRO';
  src: url('fonts/ObelixProBIt-cyr.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

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

html, body {
  height: 100vh;
  height: 100dvh; /* Use dynamic viewport height on mobile */
  overflow: hidden;
  position: fixed;
  width: 100%;
  width: 100vw; /* Explicit viewport width */
  max-width: 100vw;
  /* Safari PWA - ensure full coverage including safe areas */
  padding: 0;
  margin: 0;
  /* Global font size reduction - 30% smaller (70% of original) */
  font-size: 70%;
}

/* Desktop adjustments to ensure content visibility */
@media (min-width: 769px) {
  html, body {
    /* Allow for better content fitting while keeping overflow hidden */
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  body {
    /* Maintain background but allow better positioning */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Enable scrolling for containers on desktop while keeping body overflow hidden */
@media (min-width: 769px) {
  .menu-container, .difficulty-container, .queue-container, .room-container,
  .game-container, .reveal-container, .leaderboard-container, .topic-inner-wrapper, .practice-results-container {
    /* Remove fixed height constraints and overflow to allow natural sizing */
    max-height: none;
    overflow-y: hidden;
    /* Ensure container adapts to content */
    height: auto;
    /* Add padding adjustment for better fit */
    padding: 2rem;
  }

  /* Adjust main menu, difficulty selection, game, queue, room, topic inner wrapper, and practice results for better content fitting */
  .menu-container, .difficulty-container, .game-container, .queue-container, .room-container, .topic-inner-wrapper, .practice-results-container {
    padding: 2rem;
  }
  
  /* Ensure screen takes full available height but allows content to dictate size */
  .screen {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  
  /* Adjust game modes for better spacing */
  .game-modes {
    gap: 1.25rem;
    margin: 2rem 0;
  }
  
  .mode-button {
    padding: 2rem 1.75rem;
  }
}

* {
  font-family: 'OBELIXPRO', 'Comic Sans MS', cursive, sans-serif !important;
}

body {
  font-family: 'OBELIXPRO', 'Comic Sans MS', cursive, sans-serif;
  background: linear-gradient(135deg, #020510 0%, #04081a 40%, #060d25 80%, #08112a 100%);
  color: #e2e0ff;
  position: relative;
  /* Ensure background covers entire viewport including safe areas on iOS Safari PWA */
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  /* Safe area padding for iOS notch/status bar */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Screen Management */
.screen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Use dynamic viewport height on mobile */
  padding: 2rem;
  animation: fadeIn 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

/* Buttons */
.primary-button, .secondary-button, .ready-button {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.primary-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.secondary-button {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.ready-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: 1.3rem;
  padding: 1.25rem 3rem;
}

.ready-button:hover {
  transform: scale(1.05);
}

.ready-button.ready {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Main Menu Screen */
.menu-container {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
}

.menu-container > *:not(.stars-background) {
  position: relative;
  z-index: 2;
}

/* Space-themed subtle glow effect */
.menu-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 20px rgba(251, 191, 36, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  }
}


.game-logo {
  max-width: 400px;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  animation: pulsate 2s ease-in-out infinite;
}

@media (max-width: 768px) {
  .game-logo {
    max-width: 145px;
    width: 35%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* Keep old title styles for backward compatibility */
.game-title {
  font-size: 5rem;
  font-weight: 900;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.game-subtitle {
  font-size: 1.1rem;
  color: #c0b0d6;
  margin-bottom: 2.5rem;
}

.player-name-section {
  margin-bottom: 2rem;
}

#player-name-input {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.3s ease;
}

#player-name-input:focus {
  outline: none;
  border-color: #667eea;
}

.name-hint {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-top: 0.5rem;
}

#play-button {
  width: 100%;
  margin-bottom: 2rem;
}



/* Queue Screen */
.queue-container, .challenge-friend-container {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
}

.queue-container::before, .challenge-friend-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.queue-container > *, .challenge-friend-container > * {
  position: relative;
  z-index: 2;
}

.queue-title {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 2rem;
}

.queue-animation {
  margin: 2rem 0;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

.queue-timer {
  font-size: 2rem;
  font-weight: 700;
  color: #60a5fa;
  margin: 1.5rem 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

#queue-timer-display {
  font-family: 'Courier New', monospace;
  color: #60a5fa;
}

.queue-info {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.queue-info p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.5rem 0;
}

.queue-info span {
  font-weight: 700;
  color: #60a5fa;
}

/* Friends Screen */
.friends-container {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
}

.friends-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.friends-container > * {
  position: relative;
  z-index: 2;
}

/* Room Screen */
.room-container {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
}

.room-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.room-container > * {
  position: relative;
  z-index: 2;
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}

.room-title {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.room-theme {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Countdown Timer */
.countdown-timer {
  text-align: center;
  padding: 1rem 2rem;
  background: rgba(251, 191, 36, 0.5) !important;
  border-radius: 12px !important;
  border: 6px solid #000000 !important;
  box-shadow: 0 0 0 3px #000000, 0 0 20px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 9999 !important;
  outline: 3px solid #000000 !important;
  outline-offset: -9px !important;
}

.countdown-label {
  font-size: 0.85rem;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.countdown-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fbbf24;
  line-height: 1;
}

.countdown-timer.ending {
  animation: pulse 1s ease-in-out infinite;
}

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

/* Room Content - Two Column Layout */
.room-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.players-section {
  min-height: 300px;
}

.players-section h3 {
  font-size: 1.2rem;
  color: #374151;
  margin-bottom: 1rem;
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
}

.player-card {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.player-card.ready {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 2px solid #10b981;
}

.player-card.you {
  border: 2px solid #667eea;
}

.player-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.player-status {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Chat Section */
.chat-section {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.chat-section h3 {
  font-size: 1.2rem;
  color: #374151;
  margin-bottom: 1rem;
}

.chat-messages {
  flex: 1;
  background: #f9fafb;
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
  max-height: 250px;
  min-height: 250px;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-message {
  padding: 0.75rem;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  word-wrap: break-word;
}

.chat-message-sender {
  font-weight: 600;
  color: #667eea;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.chat-message-text {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.4;
}

.chat-message.system {
  background: #fef3c7;
  border-color: #fde68a;
  text-align: center;
  font-style: italic;
  color: #92400e;
}

.chat-input-container {
  display: flex;
  gap: 0.5rem;
}

#chat-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

#chat-input:focus {
  outline: none;
  border-color: #667eea;
}

.send-button {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.ready-section {
  text-align: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid #e5e7eb;
}

.ready-status {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #6b7280;
}

/* Game Screen - Pub Quiz Style */
.game-container {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  width: 100%;
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.game-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.game-container > * {
  position: relative;
  z-index: 2;
}

/* Practice Mode Styling */
.game-container.practice-mode {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
  color: white;
}

.game-container.practice-mode .question-text,
.game-container.practice-mode .game-footer p {
  color: white;
}

/* Hide live scoreboard in practice mode */
.game-container.practice-mode .live-scoreboard {
  display: none;
}

.leave-game-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  z-index: 10;
}

.leave-game-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Live Scoreboard */
.live-scoreboard {
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.scoreboard-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #667eea;
  text-align: center;
  margin-bottom: 0.75rem;
}

.scoreboard-entries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scoreboard-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: white;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.scoreboard-entry:hover {
  background: #f0f0f0;
  transform: translateX(3px);
}

.scoreboard-rank {
  font-size: 1.25rem;
  font-weight: 700;
  min-width: 30px;
}

.scoreboard-avatar {
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scoreboard-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-score {
  font-size: 1.1rem;
  font-weight: 700;
  color: #667eea;
  min-width: 40px;
  text-align: right;
}

/* Question Header - Pub Quiz Style */
.question-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.question-number-display {
  margin-bottom: 0.5rem;
}

.question-label {
  font-size: 1rem;
  color: #667eea;
  font-weight: 600;
}

.question-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin: 0;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.option {
  width: 100%;
  padding: 1.5rem;
  background: #f8f9fa;
  border: 3px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  color: #333;
}

.option::before {
  content: attr(data-letter);
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.1);
}

.option:active {
  transform: scale(0.98);
}

.option.selected {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.option.selected::before {
  color: rgba(255, 255, 255, 0.3);
}

.option.correct {
  background: #28a745;
  color: white;
  border-color: #28a745;
}

.option.correct::before {
  color: rgba(255, 255, 255, 0.3);
}

.option.wrong {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

.option.wrong::before {
  color: rgba(255, 255, 255, 0.3);
}

.option.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.game-footer {
  text-align: center;
  padding-top: 1rem;
  border-top: 2px solid #f0f0f0;
  margin-top: 1rem;
}

.player-name-small {
  font-size: 0.95rem;
  color: #666;
}

/* Reveal Screen */
.reveal-container {
  background: white;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
}

.reveal-title {
  font-size: 2rem;
  text-align: center;
  color: #1f2937;
  margin-bottom: 2rem;
}

.reveal-card {
  margin-bottom: 2rem;
}

.reveal-question {
  font-size: 1.3rem;
  color: #374151;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.reveal-options {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.reveal-option {
  padding: 1rem;
  border-radius: 12px;
  font-size: 1rem;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  color: #111827; /* Dark text for better contrast */
}

.reveal-option.correct {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #10b981;
  font-weight: 600;
}

.reveal-option.user-selected {
  border-color: #667eea;
  font-weight: 600;
}

.reveal-option.user-selected.wrong {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #ef4444;
}

.reveal-explanation {
  background: #f0f9ff;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border-left: 4px solid #3b82f6;
}

.reveal-explanation h3 {
  font-size: 1.1rem;
  color: #1e40af;
  margin-bottom: 0.5rem;
}

.reveal-explanation p {
  color: #374151;
  line-height: 1.6;
}

.reveal-user-answer {
  text-align: center;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 12px;
}

.reveal-user-answer p {
  font-size: 1rem;
  color: #4b5563;
  margin: 0.25rem 0;
}

.reveal-user-answer span {
  font-weight: 700;
}

.answer-result {
  font-size: 1.1rem;
  font-weight: 700;
}

.answer-result.correct {
  color: #10b981;
}

.answer-result.wrong {
  color: #ef4444;
}

#next-reveal-button {
  width: 100%;
}

/* Leaderboard Screen */
.leaderboard-container {
  background: white;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
}

.leaderboard-title {
  font-size: 2.5rem;
  text-align: center;
  color: #1f2937;
  margin-bottom: 2rem;
}

.winner-section {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  margin-bottom: 2rem;
  border: 3px solid #f59e0b;
}

.winner-title {
  font-size: 1.5rem;
  color: #92400e;
  margin-bottom: 0.5rem;
}

.winner-name {
  font-size: 2rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 0.5rem;
}

.winner-score {
  font-size: 1.3rem;
  color: #92400e;
}

.leaderboard-list {
  margin-bottom: 2rem;
}

.leaderboard-list h3 {
  font-size: 1.3rem;
  color: #374151;
  margin-bottom: 1rem;
  text-align: center;
}

.leaderboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.leaderboard-item:hover {
  background: #f3f4f6;
  transform: translateX(5px);
}

.leaderboard-item.rank-1 {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
}

.leaderboard-item.rank-2 {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.leaderboard-item.rank-3 {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

.leaderboard-rank {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
  min-width: 40px;
}

.leaderboard-name {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

.leaderboard-score {
  font-size: 1.2rem;
  font-weight: 700;
  color: #667eea;
}

#return-menu-button {
  width: 100%;
}

/* Mobile Chat Toggle Button */
.mobile-chat-toggle {
  display: none; /* Hidden on desktop */
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

.mobile-chat-toggle:active {
  transform: scale(0.95);
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid white;
}

/* Full-Screen Chat Overlay */
.chat-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 2000;
  flex-direction: column;
}

.chat-overlay.active {
  display: flex;
}

.chat-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chat-overlay-header h3 {
  font-size: 1.5rem;
  margin: 0;
}

.close-chat-button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.close-chat-button:active {
  background: rgba(255, 255, 255, 0.3);
}

.chat-overlay-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #f9fafb;
}

.chat-overlay-input {
  padding: 1rem;
  background: white;
  border-top: 2px solid #e5e7eb;
  display: flex;
  gap: 0.5rem;
}

#chat-overlay-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
}

#chat-overlay-input:focus {
  outline: none;
  border-color: #667eea;
}

/* Message Preview Cloud (Mobile) */
.message-preview-cloud {
  display: none; /* Hidden by default, shown on mobile */
  position: absolute;
  top: -8px;
  right: -8px;
  background: white;
  border: 2px solid #667eea;
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #667eea;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
}

.message-preview-cloud::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

.player-card {
  position: relative;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .screen {
    padding: 0;
    justify-content: center;
    overflow: hidden;
  }

  .menu-container, .difficulty-container, .queue-container, .room-container,
  .game-container, .reveal-container, .leaderboard-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    padding: 0.5rem;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Adaptive main menu layout */
  .menu-container, .difficulty-container, .game-container, .queue-container, .room-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    justify-content: flex-start;
  }

  .menu-container > *, .difficulty-container > *, .game-container > *, .queue-container > *, .room-container > *, .topic-inner-wrapper > *, .practice-results-container > *, .challenge-friend-container > * {
    flex-shrink: 1;
    min-height: 0;
  }

  /* Queue screen, difficulty screen, and challenge friend screen - center content vertically */
  .queue-container, .difficulty-container, .challenge-friend-container {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transform: scale(0.75);
    transform-origin: center;
  }

  /* Quick Play Button - appropriate size on mobile */
  .middle-icon-container {
    grid-column: 1 / -1; /* Make it span all columns */
    margin: 0;
    max-width: 480px; /* Twice the previous size (240px × 2) */
    position: relative;
    z-index: 10;
  }

  .quick-play-button {
    transform: scale(1.6); /* Twice the previous size (0.8 × 2) */
    width: 100%;
    margin: -2rem 0; /* Negative margin to prevent pushing content down */
  }

  .quick-play-button:hover {
    transform: scale(1.76);
  }

  .quick-play-button img {
    max-width: 100%;
    height: auto;
  }

  /* Hide the left and right empty containers on mobile */
  .icon-buttons-container {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .icon-buttons-container > :not(.middle-icon-container) {
    display: none;
  }

  .queue-title {
    font-size: 1.5rem;
    margin-bottom: 3rem;
  }

  .queue-animation {
    margin: 3rem 0;
  }

  .spinner {
    width: 80px;
    height: 80px;
    border-width: 5px;
  }

  .queue-info {
    margin: 3rem 0;
    padding: 1.25rem;
  }

  .queue-info p {
    font-size: 1rem;
    margin: 0.75rem 0;
  }

  #cancel-queue-button {
    margin-top: 2rem;
  }

  /* Game container - practice mode same dimensions as queue */
  .game-container {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transform: scale(0.75);
    transform-origin: center;
  }

  /* Friends container - same dimensions as queue */
  .friends-container {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
  }

  /* Room container - full screen like queue-mobile-container and friends-mobile-container */
  .room-container {
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  }

  /* Reveal container - same dimensions as queue */
  .reveal-container {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transform: scale(0.75);
    transform-origin: center;
  }

  /* Leaderboard container - same dimensions as queue */
  .leaderboard-container {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transform: scale(0.75);
    transform-origin: center;
  }

  /* Smaller fonts for leaderboard on mobile - reduced by 10% */
  .leaderboard-title {
    font-size: 1.35rem;
  }

  .winner-section {
    padding: 0.9rem;
  }

  .winner-title {
    font-size: 0.9rem;
  }

  .winner-name {
    font-size: 1.17rem;
  }

  .winner-score {
    font-size: 0.81rem;
  }

  .leaderboard-item {
    padding: 0.54rem 0.72rem;
    margin-bottom: 0.45rem;
  }

  .leaderboard-rank {
    font-size: 0.9rem;
    min-width: 27px;
  }

  .leaderboard-name {
    font-size: 0.77rem;
  }

  .leaderboard-score {
    font-size: 0.81rem;
  }

  .leaderboard-list h3 {
    font-size: 0.9rem;
  }

  .game-title {
    font-size: clamp(1.1rem, 4vh, 1.5rem);
    margin-bottom: 0.15rem;
    flex-shrink: 0;
  }

  .game-subtitle {
    font-size: clamp(0.65rem, 2vh, 0.8rem);
    margin-bottom: 0.3rem;
    flex-shrink: 0;
  }

  .stats-section {
    display: none;
  }

  /* Mobile carousel wrapper */
  .game-modes-carousel-wrapper {
    width: 100%;
    margin: 0.5rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  /* Mobile carousel for game modes */
  .game-modes {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 0.5rem 1rem;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .game-modes::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .mode-button {
    flex: 0 0 172px;
    scroll-snap-align: center;
    aspect-ratio: 1 / 1; /* Square shape */
    width: 172px;
    height: 172px;
    padding: 0.921rem;
    gap: 0.462rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Arcade button styling */
    border: 4px solid rgba(0, 0, 0, 0.3);
    box-shadow:
      0 6px 0 rgba(0, 0, 0, 0.2),
      0 8px 12px rgba(0, 0, 0, 0.3),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
    position: relative;
    transform: translateY(0);
    transition: all 0.1s ease;
  }

  .mode-icon {
    font-size: 2.15rem;
    flex-shrink: 0;
  }

  .mode-icon i {
    font-size: 2.15rem;
  }

  .mode-icon-img {
    width: 2.457rem;
    height: 2.457rem;
  }

  .mode-title {
    font-size: 0.768rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    flex-shrink: 0;
  }

  .mode-desc {
    font-size: 0.442rem;
    text-align: center;
    display: block;
    opacity: 0.9;
  }

  /* Hide carousel dots on mobile */
  .carousel-dots {
    display: none;
  }

  /* Category button colors */
  .category-solo {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(5, 150, 105, 0.5) !important;
  }

  .category-solo:active {
    box-shadow:
      0 2px 0 rgba(5, 150, 105, 0.4),
      0 4px 8px rgba(5, 150, 105, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .category-multiplayer {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
  }

  .category-multiplayer:active {
    box-shadow:
      0 2px 0 rgba(37, 99, 235, 0.4),
      0 4px 8px rgba(37, 99, 235, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .category-local {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
  }

  .category-local:active {
    box-shadow:
      0 2px 0 rgba(220, 38, 38, 0.4),
      0 4px 8px rgba(220, 38, 38, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  /* Back to categories button */
  .back-to-categories-btn {
    flex: 0 0 auto;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    scroll-snap-align: none;
  }

  .back-to-categories-btn:active {
    transform: scale(0.95);
  }

  /* Coming soon message */
  .coming-soon {
    flex: 0 0 172px;
    width: 172px;
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.921rem;
    font-weight: 600;
    color: #6b7280;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border: 4px solid rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    scroll-snap-align: center;
    box-shadow:
      0 6px 0 rgba(0, 0, 0, 0.15),
      0 8px 12px rgba(0, 0, 0, 0.2),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }

  .room-header {
    flex-direction: column;
    gap: 1rem;
  }

  .room-content {
    grid-template-columns: 1fr;
  }

  /* Hide desktop chat on mobile */
  .chat-section {
    display: none;
  }

  /* Show mobile chat toggle button */
  .mobile-chat-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Show message preview clouds on mobile */
  .message-preview-cloud {
    display: block;
  }

  .players-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-height: 250px;
    justify-content: center;
  }

  /* Mobile player cards as circles with initials - same style as answer options */
  .player-card {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border: 2px solid transparent;
    transition: all 0.3s ease;
  }

  .player-card.ready {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    border: 2px solid #667eea;
  }

  .player-card.you {
    border: 2px solid #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  }

  .player-card .player-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    text-transform: uppercase;
  }

  .player-card .player-status {
    display: none;
  }

  .question-text {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .option {
    font-size: 0.95rem;
    padding: 1rem;
  }

  .countdown-value {
    font-size: 2rem;
  }
}

/* Game Mode Selection - Desktop Only */
@media (min-width: 769px) {
  .game-modes-carousel-wrapper {
    width: 100%;
    margin: 2rem 0;
  }

  .game-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }

  /* Main categories on desktop - 3 columns */
  #main-categories {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Category button colors on desktop */
  .category-solo {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(5, 150, 105, 0.5) !important;
  }

  .category-solo:active {
    box-shadow:
      0 2px 0 rgba(5, 150, 105, 0.4),
      0 4px 8px rgba(5, 150, 105, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .category-multiplayer {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
  }

  .category-multiplayer:active {
    box-shadow:
      0 2px 0 rgba(37, 99, 235, 0.4),
      0 4px 8px rgba(37, 99, 235, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .category-local {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
  }

  .category-local:active {
    box-shadow:
      0 2px 0 rgba(220, 38, 38, 0.4),
      0 4px 8px rgba(220, 38, 38, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  /* Submenus on desktop - 2 columns */
  .submenu {
    grid-template-columns: 1fr 1fr;
  }

  .back-to-categories-btn {
    grid-column: 1 / -1;
    width: auto;
    max-width: 300px;
    justify-self: center;
  }

  .coming-soon {
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    padding: 3rem;
  }

  .carousel-dots {
    display: none; /* Hide on desktop */
  }
}

.mode-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.2),
    0 8px 12px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  transform: translateY(0);
}

.mode-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.2),
    0 10px 16px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.mode-button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Individual button colors */
#random-mode-button {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

#random-mode-button:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

#topic-mode-button {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

#topic-mode-button:hover {
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

#hunter-mode-button {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

#hunter-mode-button:hover {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

#player-quizzes-mode-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

#player-quizzes-mode-button:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

#free-for-all-mode-button {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

#free-for-all-mode-button:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

#practice-mode-button {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

#practice-mode-button:hover {
  box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
}

.mode-icon {
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mode-icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.mode-button:hover .mode-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.mode-icon i {
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.mode-button:hover .mode-icon i {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Pulsate Animation for Game Mode Cards */
@keyframes pulsate {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Category Card Images (full pre-designed cards) */
.category-button {
  padding: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: pulsate 2s ease-in-out infinite;
}

.category-button:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px) scale(1.05);
  animation: none;
}

.category-button:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(2px);
  animation: none;
}

.category-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Game Mode Card Images (full pre-designed cards for submenu items) */
.game-mode-card {
  padding: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: pulsate 2s ease-in-out infinite;
}

.game-mode-card:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px) scale(1.05);
  animation: none;
}

.game-mode-card:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(2px);
  animation: none;
}

.game-mode-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Back button as card - override default back button styles */
.back-to-categories-btn.game-mode-card {
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  flex: 0 0 172px !important;
}

.back-to-categories-btn.game-mode-card:hover {
  background: transparent !important;
}

.back-to-categories-btn.game-mode-card:active {
  transform: translateY(2px) !important;
}

.mode-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.mode-desc {
  font-size: 0.875rem;
  opacity: 0.9;
  line-height: 1.4;
}

/* Difficulty Selection Screen */
.difficulty-container {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.difficulty-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.difficulty-container > * {
  position: relative;
  z-index: 2;
}

.difficulty-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.difficulty-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  text-align: center;
}

.difficulty-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 500px;
}

.difficulty-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 0.75rem;
  min-height: 140px;
}

.difficulty-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.difficulty-button:active {
  transform: translateY(-2px);
}

.difficulty-icon {
  font-size: 3rem;
}

.difficulty-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.difficulty-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.easy-button:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
}

.medium-button:hover {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
}

.hard-button:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

/* Topic Selection Screen */
.topic-container {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 3rem 2rem 2rem 2rem;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.topic-inner-wrapper {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
  display: flex;
  flex-direction: column;
}

.topic-inner-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.topic-inner-wrapper > * {
  position: relative;
  z-index: 2;
}

.topic-carousel-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topic-list-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Make quizzes list behave like topic grid */
#browse-quizzes-list, #my-quizzes-list {
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap since we're using a table structure */
  margin-bottom: 2rem;
  max-height: 60vh; /* Limit height and enable scrolling */
  overflow-y: auto;
  padding-right: 0.5rem;
  width: 100%;
  border: none; /* Remove default border that conflicts with dark theme */
  border-radius: 8px;
  overflow: hidden; /* Contain the border radius */
  position: relative; /* Establish positioning context */
  z-index: 0; /* Base stacking context */
}

/* Style scrollbar for better UX */
#browse-quizzes-list::-webkit-scrollbar, 
#my-quizzes-list::-webkit-scrollbar {
  width: 8px;
}

#browse-quizzes-list::-webkit-scrollbar-track, 
#my-quizzes-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#browse-quizzes-list::-webkit-scrollbar-thumb, 
#my-quizzes-list::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 4px;
}

#browse-quizzes-list::-webkit-scrollbar-thumb:hover,
#my-quizzes-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.topic-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  width: 100%;
  border: none;
  border-radius: 8px;
  position: relative;
  z-index: 0;
}

/* Style scrollbar for better UX */
.topic-grid::-webkit-scrollbar {
  width: 8px;
}

.topic-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.topic-grid::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.5);
  border-radius: 4px;
}

.topic-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.7);
}

.topic-header {
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #d1d5db;
}

.topic-header-item {
  flex: 1;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem; /* 20% increase */
}

.topic-header-item:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.topic-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; /* Ensure proper stacking */
  z-index: 0; /* Stay behind header */
}

.topic-card:last-child {
  border-bottom: none;
}

.topic-card:hover {
  background: rgba(96, 165, 250, 0.1);
  box-shadow: 0 1px 3px rgba(96, 165, 250, 0.3);
}

.topic-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topic-grid .topic-card .topic-list-item .topic-title {
  flex: 1;
  font-size: 0.48rem; /* 20% increase */
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.topic-grid .topic-card .topic-list-item .topic-difficulty,
.topic-grid .topic-card .topic-list-item .topic-rating,
.topic-grid .topic-card .topic-list-item .topic-question-count {
  flex: 1;
  font-size: 0.48rem; /* 20% increase */
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left-align text but center vertically */
}

.topic-difficulty {
  text-transform: capitalize;
}

.topic-header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

/* Google Sign In Button */
.guest-signin-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: white;
  border: 1px solid #4285F4;
  color: #4285F4;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.guest-signin-button:hover {
  background: #4285F4;
  color: white;
  transform: translateY(-1px);
}

.quiz-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  min-width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-action-btn.play {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.quiz-action-btn.edit {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.quiz-action-btn.delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.quiz-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsive for Quizzes List */
@media (max-width: 768px) {
  #browse-quizzes-list, #my-quizzes-list {
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Quiz list gets white background with no border */
  #browse-quizzes-list, #my-quizzes-list {
    background: white;
    border-radius: 8px;
    padding: 0; /* Remove padding to avoid visual artifacts */
    margin: 1rem;
    border: none; /* Remove border completely to avoid visual artifacts */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: calc(100% - 2rem); /* Account for margins */
    max-width: 500px; /* Prevent becoming too wide on large mobile screens */
    align-self: center; /* Center within flex container */
  }
  
  .topic-header {
    display: flex;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #2c0b3a; /* Match body background color */
    align-items: center;
    position: relative;
    margin: 0; /* Remove margin to stay flush with topic-list */
    border-radius: 8px 8px 0 0; /* Rounded top corners to match topic-list */
    overflow: hidden; /* Contain all children */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    z-index: 1; /* Ensure proper stacking context */
  }

  .topic-header-item {
    flex: 1;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.42rem; /* 20% increase */
  }

  .topic-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; /* Ensure proper stacking */
    z-index: 0; /* Stay behind header */
  }

  .topic-card:last-child {
    border-bottom: none;
  }

  .topic-card:hover {
    background: rgba(96, 165, 250, 0.1);
  }

  .topic-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Smaller gap for mobile */
  }

  #browse-quizzes-list .topic-card .topic-list-item .topic-title,
  #my-quizzes-list .topic-card .topic-list-item .topic-title {
    flex: 2; /* Give more space to title on mobile */
    font-size: 0.36rem; /* 20% increase */
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  #browse-quizzes-list .topic-card .topic-list-item .topic-difficulty,
  #browse-quizzes-list .topic-card .topic-list-item .topic-rating,
  #browse-quizzes-list .topic-card .topic-list-item .topic-question-count,
  #browse-quizzes-list .topic-card .topic-list-item .topic-creator,
  #my-quizzes-list .topic-card .topic-list-item .topic-difficulty,
  #my-quizzes-list .topic-card .topic-list-item .topic-rating,
  #my-quizzes-list .topic-card .topic-list-item .topic-question-count,
  #my-quizzes-list .topic-card .topic-list-item .topic-creator {
    flex: 1;
    font-size: 0.36rem; /* 20% increase */
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left-align text but center vertically */
  }
  
  #browse-quizzes-list .topic-card .topic-list-item .quiz-actions,
  #my-quizzes-list .topic-card .topic-list-item .quiz-actions {
    flex: 1.5; /* More space for action buttons */
    justify-content: center;
  }
}

/* Make sure the header title isn't affected by list item styling */
.topic-nav-btn {
  display: none; /* Hide navigation buttons as requested */
}

/* Voting UI in Room */
.room-theme-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.change-topic-button {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.change-topic-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.change-topic-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.change-topic-button.voted {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.vote-icon {
  font-size: 1rem;
}

.vote-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.3);
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
}

.vote-status {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  /* Game modes carousel styled in main mobile section above - no override needed */

  .topic-container {
    padding: 1rem;
    height: 100vh;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile Topic Selection - Simple List */
  .topic-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Smaller gap for mobile too */
    margin-bottom: 1rem;
  }

  .topic-card {
    width: 100%;
    padding: 0.5rem 1rem; /* More compact padding for mobile */
    box-sizing: border-box;
  }

  .topic-header {
    display: flex;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #2c0b3a; /* Match body background color */
    align-items: center;
    position: relative;
    margin: 0; /* Remove margin to stay flush with topic-list */
    border-radius: 8px 8px 0 0; /* Rounded top corners to match topic-list */
    overflow: hidden; /* Contain all children */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    z-index: 1; /* Ensure proper stacking context */
  }

  .topic-header-item {
    flex: 1;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.42rem; /* 20% increase */
  }

  /* Close button in topic header */
  .topic-header-item:last-child {
    flex: 0 0 auto; /* Don't expand, keep natural width */
    justify-content: flex-end;
    cursor: default; /* Not sortable */
    display: flex;
    align-items: center;
    padding: 0; /* Remove padding that might cause overflow */
  }

  /* Add gap to topic header for proper alignment */
  .topic-header {
    gap: 0.5rem !important; /* Match list item gap */
    padding: 0.5rem 1rem !important; /* Match topic-card padding */
  }

  .topic-header-item {
    min-width: 0 !important; /* Allow flex items to shrink */
  }

  .topic-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; /* Ensure proper stacking */
    z-index: 0; /* Stay behind header */
    box-sizing: border-box;
  }

  .topic-card:last-child {
    border-bottom: none;
  }

  .topic-card:hover {
    background: rgba(96, 165, 250, 0.1);
  }

  .topic-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }

  .topic-grid .topic-card .topic-list-item .topic-title {
    flex: 1;
    font-size: 0.432rem; /* 44% increase from original */
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* Changed from flex to block for better alignment */
    min-width: 0;
  }

  .topic-grid .topic-card .topic-list-item .topic-difficulty,
  .topic-grid .topic-card .topic-list-item .topic-rating,
  .topic-grid .topic-card .topic-list-item .topic-question-count {
    flex: 1;
    font-size: 0.432rem; /* 44% increase from original */
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* Changed from flex to block for better alignment */
    min-width: 0;
  }

  .topic-difficulty {
    text-transform: capitalize;
  }

  .room-theme-section {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Center back buttons on topic screens */
  #practice-back-to-menu-button,
  #back-to-menu-button {
    display: block;
    margin: 1.5rem auto 0 auto;
    width: auto;
  }
  
  /* Mobile Topic Wrapper - Fill viewport and center content */
  .topic-container {
    position: fixed; /* Fill entire viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    margin: 0;
    overflow: hidden;
  }

  /* Mobile Topic Inner Wrapper - Dark background container */
  .topic-inner-wrapper {
    background: transparent;
    width: 100%;
    display: flex;
    flex-direction: column;
    transform: scale(0.825);
    transform-origin: center;
    max-height: 90vh;
    overflow: hidden;
  }

  /* Mobile Topic Carousel Wrapper - Center within topic container */
  .topic-carousel-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1; /* Take available space for vertical centering */
    overflow: hidden;
  }

  /* Topic list wrapper - white background container */
  .topic-list-wrapper {
    background: transparent;
    border-radius: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  /* Topic list - scrollable content with header */
  #topic-list.topic-grid,
  #challenge-topic-list.topic-grid {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    border-radius: 0;
  }

  /* Topic header - light blue background */
  .topic-header {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    border-radius: 12px 12px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* Back to menu button on mobile */
  #back-to-menu-button {
    margin: 1.5rem;
    margin-top: 1rem;
    width: calc(100% - 3rem);
  }
  
}

/* Player Answer Badges */
.player-badges {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.player-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: help;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: badgePop 0.3s ease;
}

.player-badge:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

/* Option styling update to accommodate badges */
.option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.option.disabled .player-badges {
  opacity: 1;
}

.option.selected .player-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Rejoin Session Screen */
.rejoin-container {
  background: white;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.rejoin-title {
  font-size: 2rem;
  color: #1f2937;
  margin-bottom: 2rem;
}

.rejoin-content {
  margin-bottom: 2rem;
}

.rejoin-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.rejoin-message {
  font-size: 1.1rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.rejoin-details {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: left;
}

.rejoin-details p {
  margin: 0.5rem 0;
  color: #374151;
  font-size: 0.95rem;
}

.rejoin-details strong {
  color: #1f2937;
}

.rejoin-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rejoin-buttons button {
  width: 100%;
}

/* Session Conflict Screen */
.conflict-container {
  background: white;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.conflict-title {
  font-size: 2rem;
  color: #ef4444;
  margin-bottom: 2rem;
}

.conflict-content {
  margin-bottom: 2rem;
}

.conflict-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.conflict-message {
  font-size: 1.2rem;
  color: #1f2937;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

.conflict-submessage {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.6;
}

#conflict-ok-button {
  width: 100%;
}

/* Mobile Responsive for Rejoin/Conflict Screens */
@media (max-width: 768px) {
  .rejoin-container, .conflict-container {
    padding: 1.5rem 1rem;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rejoin-title, .conflict-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .rejoin-icon, .conflict-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .rejoin-message, .conflict-message {
    font-size: 1rem;
  }

  .conflict-submessage {
    font-size: 0.95rem;
  }

  .rejoin-details {
    padding: 1rem;
  }
}

/* Player Quizzes Screen */
.player-quizzes-container {
  background: white;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 1000px;
}

.player-quizzes-title {
  font-size: 2rem;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-align: center;
}

.player-quizzes-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.quizzes-tab {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.quizzes-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.quizzes-tab:hover {
  color: #667eea;
}

.create-quiz-btn {
  margin-left: auto;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}

.quizzes-content {
  display: none;
}

.quizzes-content.active {
  display: block;
}

.quizzes-list {
  display: grid;
  gap: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
  padding: 0.5rem;
}

.quiz-card {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quiz-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.quiz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.quiz-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.quiz-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.quiz-card-description {
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.5;
}

.quiz-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid #d1d5db;
  font-size: 0.875rem;
  color: #6b7280;
}

.quiz-card-actions {
  display: flex;
  gap: 0.5rem;
}

.quiz-action-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.quiz-action-btn.play {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.quiz-action-btn.edit {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.quiz-action-btn.delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.quiz-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Compact Quiz Card Layout */
.quiz-card-compact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quiz-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  line-height: 1.6;
}

.quiz-title-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
}

.quiz-meta-separator {
  color: #9ca3af;
  font-weight: 600;
}

.quiz-meta-item {
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.quiz-card-actions-compact {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #d1d5db;
}

.difficulty-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.difficulty-select:focus {
  outline: none;
  border-color: #667eea;
}

/* Quiz Creation Modal */
.quiz-modal {
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: #374151;
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.questions-section {
  border-top: 2px solid #e5e7eb;
  padding-top: 1.5rem;
}

.questions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.questions-header h4 {
  font-size: 1.1rem;
  color: #1f2937;
}

.secondary-button.small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.questions-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
}

.question-item {
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
}

.question-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.question-number-label {
  font-weight: 700;
  color: #667eea;
  font-size: 0.95rem;
}

.remove-question-btn {
  background: #ef4444;
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.remove-question-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.question-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  transition: border-color 0.3s ease;
}

.question-input:focus {
  outline: none;
  border-color: #667eea;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.option-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.option-radio {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #10b981;
}

.option-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}

.option-input:focus {
  outline: none;
  border-color: #667eea;
}

.correct-answer-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  font-style: italic;
}

.form-actions {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #e5e7eb;
}

.form-actions button {
  flex: 1;
}

.form-error {
  color: #ef4444;
  font-size: 0.875rem;
  text-align: center;
  margin-top: 0.5rem;
  font-weight: 600;
}

.primary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary-button:disabled:hover {
  transform: none;
}

/* Mobile Responsive for Player Quizzes */
@media (max-width: 768px) {
  .player-quizzes-container {
    padding: 1.5rem;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    justify-content: center;
    align-items: center;
    transform: scale(0.75);
    transform-origin: center;
  }

  .player-quizzes-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .player-quizzes-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .quizzes-tab {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  .create-quiz-btn {
    margin-left: 0;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .quizzes-list {
    max-height: calc(100vh - 15rem);
    max-height: calc(100dvh - 15rem);
  }

  .quiz-card {
    padding: 1rem;
  }

  .quiz-card-title {
    font-size: 1.1rem;
  }

  .quiz-card-description {
    font-size: 0.9rem;
  }

  .quiz-card-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .quiz-card-footer {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .quiz-card-actions {
    width: 100%;
    flex-direction: column;
  }

  .quiz-action-btn {
    width: 100%;
    padding: 0.6rem 1rem;
  }

  .quiz-modal {
    padding: 1.5rem;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
  }

  .form-actions {
    flex-direction: column;
  }

  .questions-container {
    max-height: calc(100vh - 28rem);
    max-height: calc(100dvh - 28rem);
  }

  .question-item {
    padding: 1rem;
  }
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: white;
  border-radius: 24px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

.modal-content h3 {
  font-size: 1.5rem;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modal-buttons button {
  width: 100%;
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #ef4444;
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  line-height: 1;
}

.close-button:hover {
  background: #dc2626;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .modal {
    padding: 0.5rem;
  }

  .modal-content {
    padding: 1.5rem;
    max-width: 100%;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
}

/* Practice Mode Styles */
.finish-practice-button {
  display: block;
  margin: 1.5rem auto 0;
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.finish-practice-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.practice-results-container {
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
}

.practice-results-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.practice-results-container > * {
  position: relative;
  z-index: 2;
}

.practice-results-title {
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.practice-results-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.practice-stat-large {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}

.practice-stat-large .practice-stat-value {
  font-size: 4rem;
  font-weight: 700;
  color: #34d399;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.practice-stat-large .practice-stat-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.practice-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.practice-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.practice-stat .practice-stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.practice-stat .practice-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #60a5fa;
}

.practice-results-container .primary-button,
.practice-results-container .secondary-button {
  width: 100%;
  margin-bottom: 1rem;
}

.practice-results-container .primary-button:last-child,
.practice-results-container .secondary-button:last-child {
  margin-bottom: 0;
}

/* Practice Mode Answer Feedback */
.option.practice-correct {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 2px solid #10b981 !important;
  color: #34d399 !important;
}

.option.practice-wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 2px solid #ef4444 !important;
  color: #f87171 !important;
}

/* Mobile Responsive for Practice Mode */
@media (max-width: 768px) {
  .practice-results-container {
    padding: 1.5rem;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    justify-content: center;
    align-items: center;
    transform: scale(0.75);
    transform-origin: center;
  }

  .practice-results-title {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .practice-results-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .practice-stat-large .practice-stat-value {
    font-size: 3rem;
  }

  .practice-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .practice-stat {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
  }

  .finish-practice-button {
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
  }
}

/* ==================
   GLOBAL CHAT STYLES
   ================== */

#global-chat-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#global-chat-modal.active {
  display: flex;
}

.global-chat-container {
  background: linear-gradient(135deg, #0a1128 0%, #0d1a3d 100%);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(59, 130, 246, 0.3);
  width: 100%;
  max-width: 800px;
  height: 90vh;
  height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.global-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(to bottom, #60a5fa 0%, #3b82f6 100%);
  color: white;
  border-radius: 24px 24px 0 0;
}

.global-chat-title {
  font-size: 1.75rem;
  margin: 0;
  font-weight: 700;
}

.global-chat-header .close-button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  position: static;
  margin: 0;
}

.global-chat-header .close-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.global-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(8, 17, 42, 0.5);
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.5) rgba(8, 17, 42, 0.5);
}

.global-chat-messages::-webkit-scrollbar {
  width: 8px;
}

.global-chat-messages::-webkit-scrollbar-track {
  background: rgba(8, 17, 42, 0.5);
}

.global-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 4px;
}

.global-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.7);
}

.global-chat-message {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: messageSlideIn 0.3s ease;
  transition: all 0.2s ease;
}

.global-chat-message:active {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(0.98);
}

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

.global-chat-message.current-user {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  margin-left: 2rem;
}

.global-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.global-chat-message-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.global-chat-message-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.global-chat-username {
  font-weight: 700;
  color: #f3f4f6;
  font-size: 0.95rem;
}

.global-chat-message.current-user .global-chat-username {
  color: #93c5fd;
}

.global-chat-timestamp {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.global-chat-message-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.global-chat-message.current-user .global-chat-message-text {
  color: #d1e7ff;
}

.global-chat-input-container {
  padding: 1.25rem;
  background: rgba(10, 17, 40, 0.8);
  border-top: 2px solid rgba(59, 130, 246, 0.3);
  display: flex;
  gap: 0.75rem;
  border-radius: 0 0 24px 24px;
}

#global-chat-input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: inherit;
  background: white;
  color: #1f2937;
}

#global-chat-input::placeholder {
  color: #9ca3af;
}

#global-chat-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

#send-global-chat-button {
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

#send-global-chat-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6);
}

#send-global-chat-button:active {
  transform: translateY(0);
}

.global-chat-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: rgba(255, 255, 255, 0.6);
}

.global-chat-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.global-chat-empty-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.global-chat-empty-subtext {
  font-size: 0.95rem;
}

.global-chat-loading {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}

.global-chat-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem;
  text-align: center;
  font-weight: 600;
}

/* System messages */
.global-chat-message.system {
  background: #fef3c7;
  border-color: #fde68a;
  justify-content: center;
  padding: 0.75rem 1rem;
}

.global-chat-message.system .global-chat-message-text {
  color: #92400e;
  font-style: italic;
  text-align: center;
  font-size: 0.9rem;
}

/* Mobile Responsive for Global Chat */
@media (max-width: 768px) {
  .global-chat-container {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .global-chat-header {
    padding: 1rem 1.25rem;
    border-radius: 0;
  }

  .global-chat-title {
    font-size: 1.3rem;
  }

  .global-chat-messages {
    padding: 1rem;
    gap: 0.75rem;
  }

  .global-chat-message {
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .global-chat-message.current-user {
    margin-left: 1rem;
  }

  .global-chat-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .global-chat-username {
    font-size: 0.9rem;
  }

  .global-chat-timestamp {
    font-size: 0.7rem;
  }

  .global-chat-message-text {
    font-size: 0.9rem;
  }

  .global-chat-input-container {
    padding: 1rem;
    gap: 0.5rem;
  }

  #global-chat-input {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  #send-global-chat-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  .global-chat-empty {
    padding: 2rem 1rem;
  }

  .global-chat-empty-icon {
    font-size: 2.5rem;
  }

  .global-chat-empty-text {
    font-size: 1rem;
  }

  .global-chat-empty-subtext {
    font-size: 0.9rem;
  }
}



/* Desktop-specific adjustments for 769px and wider - ensure active screen content visible without scrolling */
@media (min-width: 769px) {
  /* Allow screens to display all content, with natural overflow at body level */
  .screen.active {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow content to show without internal scrolling */
  }
  

  
  /* Container adjustments for better content fitting on desktop */
  .menu-container, .difficulty-container, .queue-container, .room-container,
  .game-container, .reveal-container, .leaderboard-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    /* Remove fixed height constraints to allow natural sizing */
    height: auto;
    max-height: none;
    /* Allow content to be fully visible */
    overflow: visible;
    /* Adjust padding for better desktop spacing */
    padding: 2rem;
    margin: 1rem auto;
    max-width: 900px;
    width: 90%;
  }

  /* Menu container, difficulty container, game container, queue container, room container, topic inner wrapper, and practice results with 16:9 aspect ratio and 50% zoom out for desktop view */
  .menu-container, .difficulty-container, .game-container, .queue-container, .room-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem;
    width: 90%;
    aspect-ratio: 16 / 9; /* Force 16:9 aspect ratio */
    max-width: none;
    max-height: none;
    height: auto;
    transform: scale(0.5); /* Zoom out by 50% */
    transform-origin: center;
  }
  
  /* Topic container - full screen on desktop */
  .topic-container {
    width: 100%;
    height: 100vh;
    max-width: none;
    max-height: none;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Topic inner wrapper - centered on desktop */
  .topic-inner-wrapper {
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    display: flex;
    flex-direction: column;
  }

  /* Topic carousel wrapper - full height on desktop */
  .topic-carousel-wrapper {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Topic list wrapper - white background container on desktop */
  .topic-list-wrapper {
    background: transparent;
    border-radius: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  }

  /* Topic list - scrollable content on desktop */
  #topic-list.topic-grid,
  #challenge-topic-list.topic-grid {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }

  /* Topic header - light blue background on desktop */
  .topic-header {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    border-radius: 24px 24px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* Back to menu button on desktop */
  #back-to-menu-button {
    margin: 1.5rem;
    margin-top: 1rem;
    width: calc(100% - 3rem);
  }

  /* Sign in and Instagram buttons - 20% bigger on laptop */
  .guest-signin-button-below-logo {
    transform: scale(1.2);
    transform-origin: center;
  }

  .guest-signin-button-below-logo.instagram-icon-only {
    transform: scale(1.2);
    transform-origin: center;
  }

  /* For very large screens (full-screen laptop) */
  @media (min-width: 1440px) {
    .menu-container, .difficulty-container, .game-container, .queue-container, .room-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
      aspect-ratio: 16 / 9;
      transform: scale(0.5);
      transform-origin: center;
    }
  }
  
  /* Ensure main content elements use appropriate spacing */
  .game-title, .game-subtitle {
    align-self: center;
    width: 100%;
    text-align: center;
  }
  
  .user-header {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  /* Footer bar styling */
  .footer-bar {
    flex-shrink: 0; /* Prevent footer from shrinking */
    align-self: stretch; /* Make it full width */
    margin-top: 1.5rem;
  }
  

  

  
  .mode-button {
    padding: 1.75rem 1.25rem; /* Reduce padding to make buttons shorter */
    min-height: 100px; /* Set minimum height to ensure consistency */
  }
  

  
  /* Adjust mode button text for better fit */
  .mode-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .mode-desc {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  
  .mode-icon {
    font-size: 1.5rem;
  }
}

/* Portrait orientation handling for mobile devices - respect safe areas */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    padding-top: max(env(safe-area-inset-top), 20px) !important;
  }

  .screen {
    padding-top: max(env(safe-area-inset-top), 20px);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Mobile browser landscape mode - use laptop/desktop rules */
@media (max-height: 768px) and (orientation: landscape) and (display-mode: browser) {
  .screen.active {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .menu-container, .difficulty-container, .queue-container, .room-container,
  .game-container, .reveal-container, .leaderboard-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 2rem;
    margin: 1rem auto;
    max-width: 900px;
    width: 90%;
  }

  .menu-container, .difficulty-container, .game-container, .queue-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem;
    width: 90%;
    aspect-ratio: 16 / 9;
    max-width: none;
    max-height: none;
    height: auto;
    transform: scale(0.5);
    transform-origin: center;
  }

  /* Room container - full screen in landscape like queue-mobile-container */
  .room-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    transform: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* Menu container specific adjustments - shorter for landscape */
  .menu-container {
    width: 100% !important;
    transform: scale(0.5) scaleY(0.6) !important; /* 40% shorter in height */
  }
}

/* Fallback for browsers that don't support display-mode: browser */
@media (max-height: 768px) and (orientation: landscape) {
  html:not(.standalone) .screen.active {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  html:not(.standalone) .menu-container,
  html:not(.standalone) .difficulty-container,
  html:not(.standalone) .queue-container,
  html:not(.standalone) .room-container,
  html:not(.standalone) .game-container,
  html:not(.standalone) .reveal-container,
  html:not(.standalone) .leaderboard-container,
  html:not(.standalone) .topic-inner-wrapper,
  html:not(.standalone) .practice-results-container,
  html:not(.standalone) .challenge-friend-container {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 2rem;
    margin: 1rem auto;
    max-width: 900px;
    width: 90%;
  }

  html:not(.standalone) .menu-container,
  html:not(.standalone) .difficulty-container,
  html:not(.standalone) .game-container,
  html:not(.standalone) .queue-container,
  html:not(.standalone) .topic-inner-wrapper,
  html:not(.standalone) .practice-results-container,
  html:not(.standalone) .challenge-friend-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem;
    width: 90%;
    aspect-ratio: 16 / 9;
    max-width: none;
    max-height: none;
    height: auto;
    transform: scale(0.5);
    transform-origin: center;
  }

  /* Room container - full screen in landscape like queue-mobile-container */
  html:not(.standalone) .room-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    transform: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* Menu container specific adjustments - shorter for landscape */
  html:not(.standalone) .menu-container {
    width: 100% !important;
    transform: scale(0.5) scaleY(0.6) !important; /* 40% shorter in height */
  }
}

/* PWA Landscape orientation handling for mobile devices */
@media (max-height: 768px) and (orientation: landscape) and (display-mode: standalone) {
  html {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    /* Reduce padding in landscape since space is limited */
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .screen {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 0.5rem !important;
    padding-top: calc(env(safe-area-inset-top) + 0.5rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
    padding-left: calc(env(safe-area-inset-left) + 0.5rem);
    padding-right: calc(env(safe-area-inset-right) + 0.5rem);
    overflow-y: auto !important;
  }

  /* Only active screens should display in landscape */
  .screen.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .screen:not(.active) {
    display: none !important;
  }

  /* Menu container and similar containers - apply desktop-like scaling */
  .menu-container, .difficulty-container, .queue-container, .topic-inner-wrapper, .practice-results-container, .challenge-friend-container {
    width: 90% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    transform: scale(0.5) !important;
    transform-origin: center !important;
    padding: 2.5rem !important;
    margin: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Room container - full screen in landscape like queue-mobile-container */
  .room-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Zoom out content within menu-container by 40% */
  .menu-container > * {
    transform: scale(0.6) !important;
    transform-origin: center !important;
  }

  /* Ensure stars background doesn't get scaled */
  .menu-container > .stars-background {
    transform: none !important;
  }

  /* Game container specific handling for landscape - 20% larger than other containers */
  .game-container {
    width: 90% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    transform: scale(0.6) !important;
    transform-origin: center !important;
    padding: 2rem !important;
    margin: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Game modes grid adjustment for landscape */
  .game-modes {
    gap: 1.25rem !important;
    margin: 2rem 0 !important;
  }

  .mode-button {
    padding: 2rem 1.75rem !important;
  }

  /* Footer bar adjustment for landscape */
  .footer-bar {
    padding: 0.8rem !important;
    max-width: 95% !important;
  }

  /* Icon buttons adjustment for landscape */
  .icon-buttons-container {
    gap: 1.5rem !important;
  }

  /* Quick play button adjustment */
  .quick-play-button {
    transform: scale(1) !important;
    margin: 0 !important;
  }
}

/* Fallback for PWA landscape mode using .standalone class */
@media (max-height: 768px) and (orientation: landscape) {
  html.standalone {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.standalone body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.standalone .screen {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 0.5rem !important;
    padding-top: calc(env(safe-area-inset-top) + 0.5rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
    padding-left: calc(env(safe-area-inset-left) + 0.5rem);
    padding-right: calc(env(safe-area-inset-right) + 0.5rem);
    overflow-y: auto !important;
  }

  html.standalone .screen.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.standalone .screen:not(.active) {
    display: none !important;
  }

  html.standalone .menu-container,
  html.standalone .difficulty-container,
  html.standalone .queue-container,
  html.standalone .topic-inner-wrapper,
  html.standalone .practice-results-container,
  html.standalone .challenge-friend-container {
    width: 90% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    transform: scale(0.5) !important;
    transform-origin: center !important;
    padding: 2.5rem !important;
    margin: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Room container - full screen in standalone landscape like queue-mobile-container */
  html.standalone .room-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  html.standalone .menu-container > * {
    transform: scale(0.6) !important;
    transform-origin: center !important;
  }

  html.standalone .menu-container > .stars-background {
    transform: none !important;
  }

  html.standalone .game-container {
    width: 90% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    transform: scale(0.6) !important;
    transform-origin: center !important;
    padding: 2rem !important;
    margin: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  html.standalone .game-modes {
    gap: 1.25rem !important;
    margin: 2rem 0 !important;
  }

  html.standalone .mode-button {
    padding: 2rem 1.75rem !important;
  }

  html.standalone .footer-bar {
    padding: 0.8rem !important;
    max-width: 95% !important;
  }

  html.standalone .icon-buttons-container {
    gap: 1.5rem !important;
  }

  html.standalone .quick-play-button {
    transform: scale(1) !important;
    margin: 0 !important;
  }
}

/* Fullscreen Mode Styles - Ensure full screen coverage */
html:fullscreen,
html:-webkit-full-screen,
html:-moz-full-screen,
html:-ms-fullscreen {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

html:fullscreen body,
html:-webkit-full-screen body,
html:-moz-full-screen body,
html:-ms-fullscreen body {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100% !important;
}

/* Ensure screens take full space in fullscreen */
html:fullscreen .screen,
html:-webkit-full-screen .screen,
html:-moz-full-screen .screen,
html:-ms-fullscreen .screen {
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Fullscreen Button - Completely removed */
.fullscreen-button {
  display: none !important;
}

/* Fullscreen icon in footer bar - Completely removed */
.footer-fullscreen-icon {
  display: none !important;
}

/* Landscape Warning Overlay - Mobile Browser Only */
.landscape-warning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #020510 0%, #04081a 40%, #060d25 80%, #08112a 100%);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.landscape-warning-content {
  text-align: center;
  padding: 2rem;
  color: white;
}

.landscape-warning-content svg {
  color: #3b82f6;
  margin-bottom: 2rem;
  animation: rotateDevice 2s ease-in-out infinite;
}

.landscape-warning-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.landscape-warning-content p {
  font-size: 1.1rem;
  color: #e2e0ff;
  opacity: 0.9;
}

@keyframes rotateDevice {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

/* Show landscape warning on all mobile devices in landscape mode (browser and PWA) */
@media (max-height: 768px) and (orientation: landscape) {
  .landscape-warning {
    display: flex !important;
  }
}

/* PWA Footer - Red colored, shown only in PWA portrait mode */
.pwa-footer {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: white;
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(220, 38, 38, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pwa-footer p {
  margin: 0;
  font-weight: 500;
}

/* Show footer only in PWA (standalone mode) portrait orientation */
@media (display-mode: standalone) and (orientation: portrait) {
  .pwa-footer {
    display: block;
  }

  /* Add bottom padding to body to account for footer */
  body {
    padding-bottom: calc(env(safe-area-inset-bottom) + 3rem) !important;
  }
}

/* Fallback for iOS Safari PWA detection */
@media (max-width: 768px) and (orientation: portrait) {
  html.standalone .pwa-footer {
    display: block;
  }

  html.standalone body {
    padding-bottom: calc(env(safe-area-inset-bottom) + 3rem) !important;
  }
}

/* iOS Install Modal */
.ios-install-content {
  max-width: 400px;
  text-align: center;
}

.ios-install-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.ios-install-content ol {
  text-align: left;
  color: #4b5563;
}

.ios-install-content ol li {
  margin-bottom: 0.75rem;
}

.ios-install-content strong {
  color: #1f2937;
}

/* Floating Chat Icon for Laptop/Desktop View */
.floating-chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  font-size: 24px;
}

.floating-chat-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6);
}

.floating-chat-icon:active {
  transform: scale(0.95);
}

/* Notification Badge for Floating Chat */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid white;
  z-index: 1001;
}

/* Floating Chat Window */
.floating-chat-window {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 350px;
  height: 400px;
  background: linear-gradient(135deg, #0a1128 0%, #0d1a3d 100%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Floating Chat Header */
.floating-chat-header {
  background: linear-gradient(to bottom, #60a5fa 0%, #3b82f6 100%);
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px 16px 0 0;
}

.floating-chat-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-floating-chat {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.close-floating-chat:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Floating Chat Messages */
.floating-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(8, 17, 42, 0.5);
}

/* Floating Chat Input */
.floating-chat-input-container {
  display: flex;
  padding: 15px;
  background: rgba(10, 17, 40, 0.8);
  border-top: 1px solid rgba(59, 130, 246, 0.2);
}

#floating-chat-input {
  flex: 1;
  padding: 10px 15px;
  background: white;
  color: #1f2937;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

#floating-chat-input:focus {
  outline: none;
  border-color: #3b82f6;
}

#send-floating-chat-button {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  margin-left: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#send-floating-chat-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#send-floating-chat-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hide original global chat button on laptop/desktop */
@media (min-width: 769px) {
  #global-chat-button {
    display: none;
  }
  
  /* Show floating chat icon on laptop/desktop */
  .floating-chat-icon {
    display: flex;
  }
}

/* Footer Bar Styles */
.footer-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(to bottom, #3b82f6 0%, #1e40af 100%);
  border-radius: 16px;
  margin: 1.5rem auto 0; /* Center with auto margins */
  width: 100%;
  max-width: 600px; /* Match game modes width */
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.footer-icon {
  font-size: 1.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 12px;
  text-align: center;
  flex: 1;
  max-width: 60px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.footer-icon:hover {
  transform: scale(1.3) translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.footer-icon:active {
  transform: scale(1.1) translateY(-2px);
  background: rgba(255, 255, 255, 0.3);
}

.footer-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Make images white */
}

/* User Avatar Styling */
.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.user-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Mobile adjustments for footer bar */
@media (max-width: 768px) {
  .footer-bar {
    padding: 0.8rem;
    margin: 1rem auto 0; /* Center on mobile too */
    max-width: 95%;
  }

  .footer-icon {
    font-size: 1.6rem;
    max-width: 50px;
    height: 45px;
  }

  .footer-icon img {
    width: 28px;
    height: 28px;
  }

  /* Disable hover effects on mobile, use active instead */
  .footer-icon:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
  }

  .footer-icon:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Mobile Responsive for Floating Chat */
@media (max-width: 768px) {
  /* Hide floating chat on mobile since we have the existing mobile chat system */
  .floating-chat-icon,
  .floating-chat-window {
    display: none;
  }
}

/* ============================================
   LOCAL MODE STYLING
   ============================================ */

/* Local Quiz Container */
.local-quiz-container {
  background: white;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* Local Quiz Header */
.local-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

.local-exit-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.local-exit-btn:hover {
  transform: scale(1.1);
}

.local-progress {
  font-size: 1.2rem;
  font-weight: 600;
  color: #667eea;
}

/* Questions Carousel */
.local-questions-carousel {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.local-questions-carousel:active {
  cursor: grabbing;
}

.local-question-slide {
  min-width: 100%;
  padding: 1rem;
}

.local-question-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2rem;
  text-align: center;
  line-height: 1.6;
}

.local-options-container {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.local-option {
  padding: 1.25rem;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  color: #1f2937;
}

.local-option:hover {
  transform: translateY(-2px);
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.local-option.selected {
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  border-color: #667eea;
  font-weight: 600;
}

/* Navigation Buttons */
.local-nav-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.local-nav-btn {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.local-nav-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.local-nav-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  opacity: 0.5;
}

.local-finish-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.local-finish-btn:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Progress Dots */
.local-progress-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.local-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.local-progress-dot.active {
  background: #667eea;
  width: 14px;
  height: 14px;
}

.local-progress-dot.answered {
  background: #10b981;
}

.local-progress-dot.answered.active {
  background: #059669;
}

/* Local Reveal Container */
.local-reveal-container {
  background: white;
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  max-height: 90vh;
  overflow-y: auto;
}

.local-reveal-title {
  font-size: 2.5rem;
  text-align: center;
  color: #1f2937;
  margin-bottom: 2rem;
}

/* Score Summary */
.local-score-summary {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 16px;
}

.local-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.local-score-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #667eea;
}

.local-score-label {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
}

/* Answers List */
.local-answers-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.local-answer-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid #e5e7eb;
}

.local-answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.local-answer-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

.local-answer-result {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.local-answer-result.correct {
  background: #d1fae5;
  color: #065f46;
}

.local-answer-result.wrong {
  background: #fee2e2;
  color: #991b1b;
}

.local-answer-result.skipped {
  background: #f3f4f6;
  color: #6b7280;
}

.local-answer-question {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.local-answer-options {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.local-answer-option {
  padding: 1rem;
  border-radius: 8px;
  background: white;
  border: 2px solid #e5e7eb;
  color: #374151;
}

.local-answer-option.correct-answer {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #10b981;
  font-weight: 600;
  color: #065f46;
}

.local-answer-option.wrong-answer {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #ef4444;
  font-weight: 600;
  color: #991b1b;
}

.local-answer-option.user-answer:not(.correct-answer) {
  border-width: 3px;
}

.local-answer-explanation {
  background: #f0f9ff;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
  line-height: 1.6;
}

.local-answer-explanation strong {
  color: #1e3a8a;
}

/* Mobile Responsive for Local Mode */
@media (max-width: 768px) {
  .local-quiz-container {
    padding: 1.5rem;
    transform: scale(0.75);
    transform-origin: center;
  }

  .local-question-text {
    font-size: 1.2rem;
  }

  .local-option {
    padding: 1rem;
    font-size: 0.95rem;
  }

  .local-nav-buttons {
    flex-direction: column;
  }

  .local-nav-btn {
    width: 100%;
  }

  .local-reveal-container {
    padding: 1.5rem;
    transform: scale(0.75);
    transform-origin: center;
  }

  .local-reveal-title {
    font-size: 1.8rem;
  }

  .local-score-summary {
    flex-direction: column;
    gap: 1rem;
  }

  .local-answer-question {
    font-size: 1rem;
  }

  .local-answer-option {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
}

/* Team Quiz Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.friends-checklist {
  max-height: 300px;
  overflow-y: auto;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

.friend-checkbox {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.friend-checkbox:hover {
  background: #f0f0f0;
}

.friend-checkbox input[type="checkbox"] {
  margin-right: 1rem;
  width: 20px;
  height: 20px;
}

.friend-avatar {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.friend-name {
  flex: 1;
  font-weight: 600;
}

.online-indicator {
  color: #28a745;
  font-size: 0.75rem;
}

.modal-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.team-members-container {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
  margin: 1rem 0;
}

.team-member-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background: white;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.member-avatar {
  font-size: 1.5rem;
  margin-right: 0.75rem;
}

.member-name {
  flex: 1;
  font-weight: 600;
}

.leader-badge {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  margin: 0 0.5rem;
}

.member-level {
  color: #666;
  font-size: 0.875rem;
}

.team-lobby-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.leader-panel {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 2rem;
  color: white;
}

.leader-panel h4 {
  margin-bottom: 1rem;
}

.leader-instruction {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.95;
}

.team-vote-item {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.vote-option {
  font-weight: bold;
}

.team-quiz-option-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.team-quiz-option-btn {
  width: 100%;
  padding: 1.5rem;
  background: #f8f9fa;
  border: 3px solid #ddd;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.team-quiz-option-btn .option-letter {
  font-size: 1.25rem;
  font-weight: 700;
  min-width: 30px;
}

.team-quiz-option-btn .option-text {
  flex: 1;
}

.team-quiz-option-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.team-quiz-option-btn.selected {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.team-quiz-option-btn.leader-selected {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.team-quiz-option-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.team-vote-avatars {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0 1rem;
  min-height: 40px;
}

.vote-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: help;
  transition: transform 0.2s;
}

.vote-avatar-circle:hover {
  transform: scale(1.1);
}

/* Team Quiz Results Screen */
.your-team-answer {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  color: white;
}

.your-team-answer h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.team-answer-result {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 600;
}

.team-answer-result.correct {
  background: rgba(34, 197, 94, 0.3);
  border: 2px solid rgba(34, 197, 94, 0.5);
}

.team-answer-result.incorrect {
  background: rgba(239, 68, 68, 0.3);
  border: 2px solid rgba(239, 68, 68, 0.5);
}

.team-answer-result .answer-letter {
  font-size: 2rem;
  font-weight: 700;
  min-width: 50px;
  text-align: center;
}

.correct-answer-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.correct-answer-section p {
  margin: 0.5rem 0;
}

.other-teams-answers {
  margin-bottom: 1.5rem;
}

.other-teams-answers h3 {
  margin-bottom: 1rem;
}

.answer-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.answer-label {
  min-width: 50px;
}

.answer-letter-small {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
}

.team-answer-avatars {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.team-avatar-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: help;
  transition: transform 0.2s;
}

.team-avatar-circle:hover {
  transform: scale(1.1);
}

.team-leaderboard-item,
.final-team-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.team-rank,
.final-rank {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 1rem;
  min-width: 50px;
}

.team-name,
.final-team-name {
  flex: 1;
  font-weight: 600;
}

.team-score,
.final-team-score {
  font-size: 1.25rem;
  font-weight: bold;
  color: #667eea;
}

.top-three {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
}

.top-three .final-team-score {
  color: white;
}

.final-team-item.winner {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: 3px solid #fbbf24;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
  animation: pulse-winner 2s ease-in-out infinite;
}

.final-team-item.winner .final-team-score {
  color: white;
}

@keyframes pulse-winner {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 4px 24px rgba(34, 197, 94, 0.7);
  }
}

.notifications-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  max-width: 400px;
}

.team-invite-notification {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
}

.team-invite-notification button {
  margin: 0.5rem 0.5rem 0 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.team-invite-notification button:first-of-type {
  background: #28a745;
  color: white;
}

.team-invite-notification button:last-of-type {
  background: #dc3545;
  color: white;
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    padding: 1.5rem;
  }

  .team-lobby-actions {
    flex-direction: column;
  }

  .leader-panel {
    padding: 1rem;
  }

  .notifications-container {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* Gold Icon Styling */
.gold-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.gold-icon-small {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* Gyroscope Stars Background */
.stars-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(200, 230, 255, 0.5);
  will-change: transform;
  animation: snowfall linear infinite;
}

.star.twinkle {
  animation: snowfall linear infinite, twinkle 3s infinite;
}

@keyframes snowfall {
  0% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(15px, 300px, 0) rotate(90deg);
  }
  50% {
    transform: translate3d(-15px, 600px, 0) rotate(180deg);
  }
  75% {
    transform: translate3d(15px, 900px, 0) rotate(270deg);
  }
  100% {
    transform: translate3d(0, 1200px, 0) rotate(360deg);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.4;
  }
}

/* Santa Background Canvas (with chroma key) */
.santa-background {
  position: absolute;
  max-width: 25%;
  max-height: 25%;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  /* Transform is set dynamically in JavaScript for rotation and scale */
  transition: none; /* Remove transition since we're animating via JS */
  will-change: transform, left, top; /* Performance optimization */
}

/* Ensure stars/snowflakes appear above the video */
.stars-background .star {
  z-index: 2;
  position: relative;
}

/* Christmas Decorations - Snowmen, Candy Canes, Mistletoe */
.christmas-decoration {
  position: absolute;
  font-size: 2rem;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  animation: christmas-fall linear infinite;
}

.christmas-decoration.snowman {
  font-size: 2.5rem;
}

.christmas-decoration.candy-cane {
  font-size: 2.2rem;
}

.christmas-decoration.mistletoe {
  font-size: 1.8rem;
}

.christmas-decoration.gingerbread {
  font-size: 2.3rem;
}

.christmas-decoration.gift {
  font-size: 2rem;
}

.christmas-decoration.bell {
  font-size: 2rem;
}

.christmas-decoration.ornament {
  font-size: 1.9rem;
}

/* Christmas fall animation - slower and smoother than snowfall */
@keyframes christmas-fall {
  0% {
    transform: translate3d(0, -50px, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift-x, 0px), 1200px, 0) rotate(360deg);
    opacity: 0;
  }
}

/* User Header - Single Line Layout */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 8px;
}

.user-name-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.user-details {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: auto;
  flex-direction: row;
  margin-left: auto;
}

.user-name {
  margin: 0;
  white-space: nowrap;
  font-size: 1rem;
}

.stat-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.user-level-stat {
  font-size: 0.85rem;
}

/* Sign In Button Below Logo */
.guest-signin-button-below-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #394155 0%, #383d51 40%, #363948 80%, #353740 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1.5rem;
  transition: all 0.2s;
  width: auto;
  align-self: flex-start;
  max-width: fit-content;
}

.guest-signin-button-below-logo:hover {
  background: linear-gradient(135deg, #444a5f 0%, #43485c 40%, #414452 80%, #40424a 100%);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.guest-signin-button-below-logo svg {
  width: 12px;
  height: 12px;
}

.guest-signin-button-below-logo.instagram-icon-only {
  padding: 8px;
  min-width: auto;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #394155 0%, #383d51 40%, #363948 80%, #353740 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.guest-signin-button-below-logo.instagram-icon-only:hover {
  background: linear-gradient(135deg, #444a5f 0%, #43485c 40%, #414452 80%, #40424a 100%) !important;
}

.guest-signin-button-below-logo.instagram-icon-only svg {
  width: 16px;
  height: 16px;
}

/* Icon Buttons Container - three columns */
.icon-buttons-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-bottom: 1.5rem;
  align-self: flex-start;
}

/* Buttons inside container don't need their own margin */
.icon-buttons-container .guest-signin-button-below-logo {
  margin-bottom: 0;
}

/* Instagram button on the left */
#instagram-signin-button {
  justify-self: start;
}

/* Middle container for quick play button */
.middle-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quick Play Button - no background, transparent */
.quick-play-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  transform: scale(0.575);
}

.quick-play-button:hover {
  transform: scale(0.6325);
}

.quick-play-button img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==================
   PUB QUIZ STYLES
   ================== */

.pub-quiz-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.pub-quiz-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #fff;
}

/* PIN Display */
.pub-quiz-pin-display {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 15px;
  margin-bottom: 2rem;
}

.pin-label {
  font-size: 1.2rem;
  color: #ccc;
  margin-bottom: 0.5rem;
}

.pin-code {
  font-size: 3rem;
  font-weight: bold;
  color: #4CAF50;
  letter-spacing: 0.5rem;
  margin: 1rem 0;
}

/* Team Name Section */
.pub-quiz-team-name-section {
  margin-bottom: 2rem;
}

.pub-quiz-team-name-section label {
  display: block;
  margin-bottom: 0.5rem;
  color: #fff;
}

.pub-quiz-team-name-section input {
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.1rem;
}

/* Members List */
.pub-quiz-members-section h3 {
  color: #fff;
  margin-bottom: 1rem;
}

.pub-quiz-members-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.pub-quiz-member-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}

.member-avatar {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.member-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.member-avatar-emoji {
  font-size: 2rem;
}

.member-name {
  color: #fff;
  font-size: 0.9rem;
}

/* Timer */
.pub-quiz-timer,
.pub-quiz-prep-timer {
  font-size: 3rem;
  font-weight: bold;
  color: #4CAF50;
  text-align: center;
  margin: 2rem 0;
}

/* Instructions */
.pub-quiz-instructions {
  text-align: center;
  color: #ccc;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Voting Grid */
.pub-quiz-voting-grid,
.pub-quiz-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.pub-quiz-vote-card,
.pub-quiz-topic-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
}

.pub-quiz-vote-card:hover,
.pub-quiz-topic-card:hover {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
  transform: translateY(-5px);
}

.pub-quiz-topic-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pub-quiz-topic-card.disabled:hover {
  transform: none;
  border-color: transparent;
}

.vote-avatar {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.vote-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.vote-avatar-emoji {
  font-size: 3rem;
}

.vote-name,
.pub-quiz-topic-card h3 {
  color: #fff;
  font-size: 1.1rem;
}

.pub-quiz-topic-card p {
  color: #ccc;
  margin-top: 0.5rem;
}

/* Loading Spinner */
.pub-quiz-loading-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}

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

.pub-quiz-status {
  text-align: center;
  color: #ccc;
  font-size: 1.1rem;
}

/* Live Scoreboard */
.pub-quiz-live-scoreboard {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #ffd700;
  border-radius: 15px;
  padding: 1rem;
  min-width: 200px;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.scoreboard-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd700;
  text-align: center;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid #ffd700;
  padding-bottom: 0.5rem;
}

.scoreboard-entries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scoreboard-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 0.95rem;
}

.scoreboard-rank {
  font-weight: bold;
  color: #ffd700;
  margin-right: 0.5rem;
}

.scoreboard-team-name {
  flex: 1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scoreboard-score {
  font-weight: bold;
  color: #4CAF50;
  margin-left: 0.5rem;
}

/* Answer Highlight States */
.pub-quiz-option.selected-answer {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-color: #2980b9;
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(52, 152, 219, 0.4);
}

.pub-quiz-option.correct-answer {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-color: #45a049;
  animation: correctPulse 0.6s ease-out;
}

.pub-quiz-option.wrong-answer {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #c0392b;
  animation: wrongShake 0.5s ease-out;
}

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

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* Question Screen */
.pub-quiz-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.pub-quiz-question-number {
  font-size: 1.2rem;
  color: #fff;
}

.pub-quiz-question-text {
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
  margin: 2rem 0;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
}

.pub-quiz-options-grid {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.pub-quiz-option {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  border: 2px solid transparent;
}

.pub-quiz-option:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

.pub-quiz-option.selected {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
}

/* Leader Panel */
.pub-quiz-leader-panel {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 15px;
  margin-top: 2rem;
}

.pub-quiz-leader-panel h3 {
  color: #fff;
  margin-bottom: 1rem;
}

.team-vote-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.8rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  color: #fff;
}

/* Results */
.pub-quiz-correct-answer {
  text-align: center;
  font-size: 1.3rem;
  color: #4CAF50;
  margin: 2rem 0;
  padding: 1rem;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 10px;
}

.pub-quiz-leaderboard,
.pub-quiz-final-leaderboard {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
}

.pub-quiz-leaderboard-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  color: #fff;
}

/* Winner Display */
.pub-quiz-winner {
  text-align: center;
  margin: 2rem 0;
}

.pub-quiz-trophy {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.pub-quiz-winner h3 {
  color: #4CAF50;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.pub-quiz-winner p {
  color: #fff;
  font-size: 1.3rem;
}

/* Modal */
.pub-quiz-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.pub-quiz-modal-content {
  background: #1a1a2e;
  padding: 2rem;
  border-radius: 20px;
  max-width: 400px;
  width: 90%;
}

.pub-quiz-modal-content h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
}

.pub-quiz-modal-content input {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5rem;
}

.pub-quiz-modal-content button {
  width: 100%;
  margin-bottom: 0.8rem;
}

/* Room Buttons */
.pub-quiz-room-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.pub-quiz-room-buttons button {
  flex: 1;
}

.pub-quiz-status-message {
  text-align: center;
  color: #ccc;
  margin-top: 1rem;
}

.pub-quiz-topic-name {
  text-align: center;
  font-size: 1.8rem;
  color: #4CAF50;
  margin: 2rem 0;
}

/* Pub Quiz Chat Styles */
#pub-quiz-chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.pub-quiz-chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

.pub-quiz-chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.pub-quiz-chat-toggle:active {
  transform: scale(0.95);
}

.pub-quiz-chat-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  border: 2px solid #1a1a2e;
}

.pub-quiz-chat-window {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 320px;
  height: 450px;
  background: #1a1a2e;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pub-quiz-chat-window.open {
  display: flex;
  animation: chatSlideIn 0.3s ease;
}

@keyframes chatSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pub-quiz-chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pub-quiz-chat-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: white;
}

.pub-quiz-chat-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: background 0.2s;
}

.pub-quiz-chat-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pub-quiz-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pub-quiz-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.pub-quiz-chat-messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.pub-quiz-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.pub-quiz-chat-message {
  max-width: 80%;
  padding: 0.75rem;
  border-radius: 10px;
  word-wrap: break-word;
  animation: messageSlideIn 0.2s ease;
}

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

.pub-quiz-chat-message.own {
  align-self: flex-end;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.pub-quiz-chat-message.other {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.pub-quiz-chat-message.system {
  align-self: center;
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
  font-size: 0.85rem;
  font-style: italic;
  max-width: 90%;
  text-align: center;
}

.pub-quiz-chat-message-sender {
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

.pub-quiz-chat-message-text {
  font-size: 0.95rem;
  line-height: 1.4;
}

.pub-quiz-chat-input-container {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 0.5rem;
}

.pub-quiz-chat-input-container input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s;
}

.pub-quiz-chat-input-container input:focus {
  border-color: #667eea;
  background: rgba(255, 255, 255, 0.1);
}

.pub-quiz-chat-input-container input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.pub-quiz-chat-input-container button {
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.pub-quiz-chat-input-container button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.pub-quiz-chat-input-container button:active {
  transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
  #pub-quiz-chat-container {
    bottom: 10px;
    right: 10px;
  }

  .pub-quiz-chat-window {
    width: calc(100vw - 20px);
    max-width: 320px;
    height: 400px;
  }

  .pub-quiz-chat-toggle {
    width: 50px;
    height: 50px;
  }
}

/* ==================== */
/* SOLO MODE STYLES */
/* ==================== */

/* Solo Game Screen */
.solo-container {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(ellipse at center, #163ba2 0%, #1c4ab0 40%, #386bab 100%);
  display: grid;
  grid-template-areas:
    "top-left . top-right"
    ". center ."
    "bottom-left . bottom-right";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  gap: 10px;
  padding: 10px;
  padding-top: 60px;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
}

/* Game Header with Coins, Chat, and Emoji */
.solo-game-header {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 85%;
  z-index: 100;
}

.solo-header-icons-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  padding: 0.3rem 0.8rem;
  background: rgba(59, 130, 246, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.solo-header-coins {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #fff;
  cursor: default;
}

.solo-coin-icon {
  width: 15px;
  height: 15px;
}

.solo-header-chat-icon {
  font-size: 1.26rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
}

.solo-header-chat-icon:hover {
  transform: scale(1.2);
}

.solo-header-emoji-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.solo-emoji-picker-btn {
  font-size: 1.26rem;
  background: transparent;
  border: none;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.solo-emoji-picker-btn:hover {
  transform: scale(1.2);
}

.solo-emoji-picker-dropdown {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  background: rgba(8, 17, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.solo-emoji-picker-dropdown.active {
  opacity: 1;
  pointer-events: all;
  display: grid;
}

.solo-emoji-option {
  font-size: 1.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.solo-emoji-option:hover {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.6);
  transform: scale(1.1);
}

@keyframes patternFall {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 600px;
  }
}

.solo-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('paterns.png');
  background-size: 600px 600px;
  background-position: 0 0;
  background-repeat: repeat;
  animation: patternFall 20s linear infinite;
  mask-image:
    /* Creates scaling effect from center to edges */
    radial-gradient(circle at 50% 50%,
      black 0%,
      black 15%,
      rgba(0, 0, 0, 0.9) 25%,
      rgba(0, 0, 0, 0.7) 35%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.3) 60%,
      rgba(0, 0, 0, 0.15) 75%,
      transparent 90%);
  mask-size: 150% 150%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%,
      black 0%,
      black 15%,
      rgba(0, 0, 0, 0.9) 25%,
      rgba(0, 0, 0, 0.7) 35%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.3) 60%,
      rgba(0, 0, 0, 0.15) 75%,
      transparent 90%);
  -webkit-mask-size: 150% 150%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  transform: scale(1);
  transform-origin: center;
}

.solo-container > * {
  position: relative;
  z-index: 1;
}

/* Player Corner Cards */
.solo-player-corner {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  overflow: visible;
}

.solo-player-corner.current-player {
  background: rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.solo-player-corner.answered {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4caf50;
}

.solo-top-left {
  grid-area: top-left;
}

.solo-top-right {
  grid-area: top-right;
}

.solo-bottom-left {
  grid-area: bottom-left;
}

.solo-bottom-right {
  grid-area: bottom-right;
}

.solo-player-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 3px solid rgba(255, 255, 255, 0.5);
  background-size: cover;
  background-position: center;
}

.solo-player-name {
  font-size: 1rem;
  font-weight: bold;
  color: white;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}

.solo-player-score {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.solo-player-reaction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
  animation: reactionPop 0.5s ease;
}

.solo-player-reaction.show {
  opacity: 1;
}

@keyframes reactionPop {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Disconnected Player Overlay */
.solo-player.disconnected .solo-player-avatar {
  opacity: 0.5;
  filter: grayscale(100%);
}

.solo-player.disconnected .solo-player-name {
  opacity: 0.6;
}

.solo-player-disconnected-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  z-index: 5;
}

.solo-player-disconnected-text {
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Gift System Styles */
.solo-gift-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
  padding: 0;
}

.solo-gift-btn img {
  width: 30px;
  height: 30px;
  display: block;
}

.solo-gift-btn:hover {
  transform: scale(1.15);
}

.solo-gift-btn:active {
  transform: scale(0.95);
}

/* Lightning Bolt Button */
.solo-lightning-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
  padding: 0;
}

.solo-lightning-btn img {
  width: 30px;
  height: 30px;
  display: block;
}

.solo-lightning-btn:hover {
  transform: scale(1.15);
}

.solo-lightning-btn:active {
  transform: scale(0.95);
}

/* Flying Lightning Bolt Animation */
.solo-flying-lightning {
  position: fixed;
  font-size: 2rem;
  z-index: 10000;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
  animation: lightning-glow 0.3s infinite alternate;
}

@keyframes lightning-glow {
  from {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
  }
  to {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1));
  }
}

/* Shake Animation for Player Avatar */
@keyframes shake-avatar {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  10% { transform: translate(-3px, -3px) rotate(-2deg) scale(1.05); }
  20% { transform: translate(3px, 3px) rotate(2deg) scale(1.05); }
  30% { transform: translate(-3px, 3px) rotate(-2deg) scale(1.05); }
  40% { transform: translate(3px, -3px) rotate(2deg) scale(1.05); }
  50% { transform: translate(-3px, -3px) rotate(-2deg) scale(1.05); }
  60% { transform: translate(3px, 3px) rotate(2deg) scale(1.05); }
  70% { transform: translate(-3px, 3px) rotate(-2deg) scale(1.05); }
  80% { transform: translate(3px, -3px) rotate(2deg) scale(1.05); }
  90% { transform: translate(-3px, -3px) rotate(-2deg) scale(1.05); }
}

.solo-player-avatar.shaking {
  animation: shake-avatar 0.5s ease-in-out;
}

/* Hide lightning button on current player's own corner */
.current-player .solo-lightning-btn {
  display: none;
}

/* Gift dropdown emoji images */
.gift-emoji-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.gift-emoji {
  font-size: 2rem;
  display: block;
}

/* Flashing Lightning Icons Animation */
.solo-falling-lightning {
  position: absolute;
  font-size: 1.5rem;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 1));
  animation: lightning-flash 2s ease-in-out forwards;
}

@keyframes lightning-flash {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  5% {
    opacity: 1;
    transform: scale(1.2) rotate(15deg);
  }
  15% {
    opacity: 0.3;
    transform: scale(0.9) rotate(-10deg);
  }
  25% {
    opacity: 1;
    transform: scale(1.1) rotate(20deg);
  }
  35% {
    opacity: 0.4;
    transform: scale(0.95) rotate(-15deg);
  }
  45% {
    opacity: 1;
    transform: scale(1.15) rotate(10deg);
  }
  55% {
    opacity: 0.5;
    transform: scale(0.9) rotate(-20deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.1) rotate(15deg);
  }
  75% {
    opacity: 0.6;
    transform: scale(0.95) rotate(-10deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.05) rotate(5deg);
  }
  95% {
    opacity: 0.3;
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
}

.solo-player-corner {
  overflow: visible;
  position: relative;
}

/* Gift Dropdown Modal */
.solo-gift-dropdown {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 20px;
  padding: 20px;
  min-width: 350px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(10px);
}

.solo-gift-dropdown.show {
  display: block;
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.solo-gift-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.solo-gift-target-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.solo-gift-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: 50%;
}

.solo-gift-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Gift Grid */
.solo-gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  padding: 5px;
}

.solo-gift-option {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.8));
  border: 2px solid rgba(71, 85, 105, 0.6);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 80px;
  position: relative;
}

.solo-gift-option:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.9), rgba(71, 85, 105, 0.9));
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.solo-gift-option:active {
  transform: translateY(-1px);
}

.solo-gift-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

.solo-gift-option.disabled:hover {
  transform: none;
  border-color: rgba(71, 85, 105, 0.6);
  box-shadow: none;
}

.gift-emoji {
  font-size: 2rem;
  line-height: 1;
}

.gift-cost {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fbbf24;
}

.gift-coin-icon {
  width: 14px;
  height: 14px;
}

/* Flying Gift Animation */
.solo-flying-gift {
  position: fixed;
  font-size: 3rem;
  z-index: 2000;
  pointer-events: none;
  animation: giftFloat 1.5s ease-in-out;
}

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

/* Center Question Area */
.solo-question-area {
  grid-area: center;
  background: linear-gradient(135deg, #08112a 0%, #060d25 40%, #04081a 80%, #020510 100%);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(37, 99, 235, 0.3),
    0 0 60px rgba(29, 78, 216, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.solo-question-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.15) 0%, transparent 20%);
  pointer-events: none;
  z-index: 0;
}

.solo-question-area > * {
  position: relative;
  z-index: 1;
}

.solo-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}

.solo-timer {
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 50px;
  text-align: center;
}

.solo-timer.warning {
  color: #ff9800;
  animation: pulse 1s infinite;
}

.solo-timer.critical {
  color: #f44336;
  animation: pulse 0.5s infinite;
}

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

.solo-question-number {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.solo-question-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.solo-options-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.solo-option-button {
  padding: 15px;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  backdrop-filter: blur(10px);
}

.solo-option-button:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.8);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.solo-option-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.solo-option-button.selected {
  background: rgba(59, 130, 246, 0.4);
  color: white;
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.solo-option-button.correct {
  background: #4caf50;
  border-color: #4caf50;
  color: white;
}

.solo-option-button.incorrect {
  background: #f44336;
  border-color: #f44336;
  color: white;
}

/* Solo Results Screen */
.solo-results-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.solo-results-title {
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
  text-align: center;
  margin-bottom: 20px;
}

.solo-winner {
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.solo-trophy {
  font-size: 4rem;
  margin-bottom: 10px;
}

.solo-winner-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.solo-winner-score {
  font-size: 1.2rem;
  color: #666;
}

.solo-leaderboard {
  margin-bottom: 30px;
}

.solo-leaderboard h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.solo-leaderboard-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: white;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
}

.solo-leaderboard-item:hover {
  transform: translateX(5px);
  border-color: #667eea;
}

.solo-leaderboard-position {
  font-size: 1.5rem;
  font-weight: bold;
  color: #667eea;
  min-width: 40px;
  text-align: center;
}

.solo-leaderboard-position.first {
  color: #ffd700;
}

.solo-leaderboard-position.second {
  color: #c0c0c0;
}

.solo-leaderboard-position.third {
  color: #cd7f32;
}

.solo-leaderboard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #667eea;
}

.solo-leaderboard-info {
  flex: 1;
}

.solo-leaderboard-name {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.solo-leaderboard-bot {
  font-size: 0.8rem;
  color: #999;
}

.solo-leaderboard-score {
  font-size: 1.2rem;
  font-weight: bold;
  color: #667eea;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .solo-container {
    grid-template-columns: 0.8fr 2fr 0.8fr;
    grid-template-rows: 0.8fr 2.5fr 0.8fr;
    gap: 5px;
    padding: 5px;
  }

  .solo-player-corner {
    padding: 8px;
    gap: 5px;
  }

  .solo-player-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }

  .solo-player-name {
    font-size: 0.75rem;
  }

  .solo-player-score {
    font-size: 1rem;
  }

  .solo-question-area {
    padding: 12px;
    gap: 10px;
  }

  .solo-timer {
    font-size: 1.5rem;
  }

  .solo-question-number {
    font-size: 0.85rem;
  }

  .solo-question-text {
    font-size: 1rem;
    min-height: 50px;
  }

  .solo-options-container {
    gap: 8px;
  }

  .solo-option-button {
    padding: 10px;
    font-size: 0.85rem;
    min-height: 50px;
  }

  .solo-results-container {
    padding: 15px;
  }

  .solo-results-title {
    font-size: 1.5rem;
  }

  .solo-winner {
    padding: 20px;
  }

  .solo-trophy {
    font-size: 3rem;
  }

  .solo-winner-name {
    font-size: 1.2rem;
  }

  .solo-winner-score {
    font-size: 1rem;
  }

  .solo-leaderboard-item {
    padding: 10px;
    gap: 10px;
  }

  .solo-leaderboard-position {
    font-size: 1.2rem;
    min-width: 30px;
  }

  .solo-leaderboard-avatar {
    width: 35px;
    height: 35px;
  }

  .solo-leaderboard-name {
    font-size: 0.9rem;
  }

  .solo-leaderboard-score {
    font-size: 1rem;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .solo-question-text {
    font-size: 0.9rem;
  }

  .solo-option-button {
    font-size: 0.75rem;
    padding: 8px;
  }
}

/* Room Chat System */
.solo-room-chat-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 20px;
  width: 400px;
  max-width: 90vw;
  max-height: 600px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.solo-room-chat-modal.show {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.solo-room-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.solo-room-chat-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}

.solo-room-chat-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.solo-room-chat-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.solo-room-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  max-height: 400px;
}

.solo-room-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
}

.solo-room-chat-empty-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  opacity: 0.5;
}

.solo-room-chat-empty-text {
  font-size: 0.95rem;
}

.solo-room-chat-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: messageSlideIn 0.3s ease;
}

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

.solo-room-chat-message-sender {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(59, 130, 246, 0.9);
}

.solo-room-chat-message-text {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.95rem;
  word-wrap: break-word;
  max-width: 100%;
}

.solo-room-chat-input-container {
  display: flex;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid rgba(59, 130, 246, 0.3);
}

.solo-room-chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

.solo-room-chat-input:focus {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.solo-room-chat-send-btn {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8));
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.solo-room-chat-send-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(37, 99, 235, 1));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.solo-room-chat-send-btn:active {
  transform: translateY(0);
}

/* Chat Message Bubble Animation from Avatar */
.solo-player-chat-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #ffffff;
  color: #000;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  max-width: 200px;
  word-wrap: break-word;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid #333;
  z-index: 9999;
  display: block !important;
  opacity: 1;
  pointer-events: none;
  animation: chatBubbleAppear 3s ease forwards;
}

.solo-player-chat-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ffffff;
}

@keyframes chatBubbleAppear {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-15px) scale(0.9);
  }
}

/* Rejoin Game Modal */
.solo-rejoin-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.solo-rejoin-modal.active {
  display: flex;
}

.solo-rejoin-modal-content {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  animation: slideUp 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.solo-rejoin-modal-title {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.solo-rejoin-modal-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.solo-rejoin-modal-timer {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 30px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

#solo-rejoin-time-remaining {
  color: #fbbf24;
  font-size: 1.3rem;
  font-weight: bold;
  margin-left: 8px;
}

.solo-rejoin-modal-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.solo-rejoin-btn,
.solo-abandon-btn {
  padding: 15px 40px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.solo-rejoin-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.solo-rejoin-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.solo-abandon-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8));
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.solo-abandon-btn:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.9));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

.solo-rejoin-btn:active,
.solo-abandon-btn:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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