:root{
  /* Alhilal Blue Theme */
  --primary-700:#1e40af;
  --primary-800:#1e3a8a;
  --primary-600:#2563eb;
  --primary-500:#3b82f6;
  --primary-400:#60a5fa;
  --primary-300:#93c5fd;
  --primary-200:#bfdbfe;
  --primary-100:#dbeafe;
  --primary-50:#eff6ff;
  
  /* Gamification Colors */
  --gold:#fbbf24;
  --silver:#9ca3af;
  --bronze:#f59e0b;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  
  /* Background & Surface */
  --bg:#f8fafc;
  --surface:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --border:#e2e8f0;
  --ring:rgba(30,64,175,.35);
  
  /* Interactive Elements */
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 25px rgba(0,0,0,.1);
  --shadow-lg:0 20px 40px rgba(0,0,0,.15);
  
  /* Animation */
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tawuniya Fonts */
@font-face {
  font-family: 'Tawuniya';
  src: url('./Fonts/Tawuniya-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tawuniya';
  src: url('./Fonts/Tawuniya-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tawuniya';
  src: url('./Fonts/Tawuniya-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}

/* DEBUG: Uncomment to see what's overflowing on mobile */
/* * { outline: 1px solid rgba(255, 0, 0, 0.2) !important; } */

html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

/* Prevent any element from being wider than viewport */
* {
  max-width: 100%;
}

/* Ensure images/SVGs scale responsively */
img, svg {
  max-width: 100%;
  height: auto;
}

body{
  margin:0;
  padding:0;
  font-family: 'Tawuniya', sans-serif;
  color:var(--text);
  background:var(--bg);
}

.app-shell{
  min-height:100vh;
  width:100%;
  position:relative;
  margin:0;
  padding:0;
}

body:has(#modeSelector:not([style*="display: none"])) {
  overflow: hidden;
}

.container{max-width:980px;margin:0 auto;padding:20px}

.topbar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:12px;align-items:center}
.brand__mark{width:38px;height:38px;border-radius:12px;background:
  radial-gradient(110% 140% at 30% 30%, var(--primary-600) 0, var(--primary-700) 45%, #4f2bd8 100%)}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__ar{font-weight:500}
.brand__en{font:500 12px/1 'Tawuniya',sans-serif;color:var(--muted);text-transform:lowercase;letter-spacing:.3px}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.login-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  color:var(--primary-700);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 16px;
  font-family: 'Tawuniya', sans-serif;
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

.login-btn:hover{
  background:#f8f9ff;
  border-color:var(--primary-600);
  color:var(--primary-800);
  box-shadow:0 2px 6px rgba(111,63,245,0.15);
}

.login-icon{
  font-size:16px;
  margin-bottom: -5px;
  transform: scaleX(-1);
  display: inline-block;
  bottom: 5px;
}

.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 12px;color:var(--muted)}
.chip[disabled]{opacity:.5}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 22px;
  margin:18px 0;
}

.intro h1{margin:0 0 8px 0;font-size:22px}
.muted{color:var(--muted)}
.xs{font-size:12px}

.divider{height:1px;background:var(--border);margin:16px 0}

.form__actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  font-family: 'Tawuniya', sans-serif;
}

.btn{
  appearance:none;border:0;border-radius:12px;
  padding:12px 18px;font-weight:500;cursor:pointer;
  font-family: 'Tawuniya', sans-serif;
}
.btn-primary{background:var(--primary-700);color:#fff;transition:background 0.4s ease}

.btn-primary:hover{
  background:var(--primary-800)
}

.btn-primary.disabled{
  background:#9ca3af;
  color:#fff;
  cursor:not-allowed;
  opacity:0.7;
}

.btn-primary.disabled:hover{
  background:#9ca3af;
  transform:none;
}
.btn-primary:focus{outline:3px solid var(--ring);outline-offset:2px}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:#fafafe}

.field{margin:12px 0}
.field__label{display:block;margin-bottom:8px;font-weight:500}
.help{font-size:12px;color:var(--muted);margin-top:6px}

.input, select, textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);background:#fff;color:var(--text);
  font-family: 'Tawuniya', sans-serif;
  font-size:16px;
  transition:border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.input:hover, select:hover, textarea:hover{
  border-color:var(--primary-600);
  background-color:#fafbff;
}

.input:focus, select:focus, textarea:focus{
  border-color:var(--primary-700);outline:3px solid var(--ring)
}
textarea{min-height:120px;resize:vertical}

.choice-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-top:20px;
}

.choice{
  background:var(--primary-50);
  border:2px solid var(--primary-100);
  border-radius:var(--radius);
  padding:20px;
  cursor:pointer;
  transition:all 0.3s var(--bounce);
  position:relative;
  overflow:hidden;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:500;
  font-size:16px;
  color:var(--primary-700);
  box-shadow:0 4px 12px rgba(30,64,175,0.1);
}

.choice:nth-child(1){
  background:linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
  border-color:var(--primary-200);
}

.choice:nth-child(2){
  background:linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
  border-color:var(--primary-300);
}

.choice:nth-child(3){
  background:linear-gradient(135deg, var(--primary-200) 0%, var(--primary-300) 100%);
  border-color:var(--primary-400);
}

.choice:nth-child(4){
  background:linear-gradient(135deg, var(--primary-300) 0%, var(--primary-400) 100%);
  border-color:var(--primary-500);
}

.choice:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 8px 25px rgba(30,64,175,0.2);
  border-color:var(--primary-500);
}

.choice input[type="radio"],
.choice input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.choice:has(input:checked){
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  border-color:var(--primary-700);
  color:#fff;
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 30px rgba(30,64,175,0.3);
  animation:pulseChoice 0.6s ease-out;
}

@keyframes pulseChoice{
  0%{
    transform:translateY(0) scale(1);
  }
  30%{
    transform:translateY(-4px) scale(1.08);
  }
  100%{
    transform:translateY(-2px) scale(1.05);
  }
}

.choice:has(input:checked)::before{
  content:'✓';
  position:absolute;
  top:8px;
  right:8px;
  background:rgba(255,255,255,0.2);
  border-radius:50%;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:14px;
  animation:checkmarkPop 0.3s var(--bounce);
}

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

/* Correct/Wrong Answer Highlighting */
.choice.correct-answer{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color:#059669 !important;
  color:#fff !important;
  animation:correctPulse 0.6s ease-out !important;
}

.choice.wrong-answer{
  background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color:#dc2626 !important;
  color:#fff !important;
  animation:wrongShake 0.6s ease-out !important;
}

@keyframes correctPulse{
  0%, 100%{
    transform:translateY(-2px) scale(1.05);
  }
  50%{
    transform:translateY(-4px) scale(1.1);
  }
}

@keyframes wrongShake{
  0%, 100%{
    transform:translateX(0);
  }
  25%{
    transform:translateX(-10px);
  }
  75%{
    transform:translateX(10px);
  }
}

/* Instant Feedback Overlay */
.instant-feedback-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  opacity:0;
  transition:opacity 0.3s ease;
  border-radius:var(--radius);
}

.instant-feedback-overlay.show{
  opacity:1;
}

/* Make sure the survey container has relative positioning for absolute overlay */
.survey-container{
  position:relative;
}

.instant-feedback-message{
  text-align:center;
  padding:32px;
  animation:feedbackSlideUp 0.5s var(--bounce);
}

.instant-feedback-message .feedback-icon{
  font-size:72px;
  margin-bottom:16px;
  font-weight:bold;
  animation:feedbackIconPop 0.6s var(--bounce);
}

.instant-feedback-message.correct .feedback-icon{
  color:#10b981;
  text-shadow:0 4px 12px rgba(16, 185, 129, 0.3);
}

.instant-feedback-message.wrong .feedback-icon{
  color:#ef4444;
  text-shadow:0 4px 12px rgba(239, 68, 68, 0.3);
}

.instant-feedback-message h3{
  font-size:32px;
  font-weight:500;
  margin:16px 0;
  color:var(--text);
}

.instant-feedback-message.correct h3{
  color:#10b981;
}

.instant-feedback-message.wrong h3{
  color:#ef4444;
}

.instant-feedback-message .feedback-points{
  font-size:24px;
  font-weight:500;
  color:var(--gold);
  margin-top:12px;
  text-shadow:0 2px 8px rgba(251, 191, 36, 0.3);
}

.feedback-image-container{
  margin-top:20px;
  animation:feedbackImageSlide 0.6s var(--bounce) 0.3s both;
}

.feedback-image{
  width:100%;
  max-width:300px;
  height:auto;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
  border:3px solid var(--primary-200);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.feedback-image:hover{
  transform:scale(1.02);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
}

@keyframes feedbackImageSlide{
  0%{
    transform:translateY(30px) scale(0.9);
    opacity:0;
  }
  100%{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

@keyframes feedbackSlideUp{
  0%{
    transform:translateY(30px);
    opacity:0;
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}

@keyframes feedbackIconPop{
  0%{
    transform:scale(0) rotate(-180deg);
    opacity:0;
  }
  60%{
    transform:scale(1.2) rotate(10deg);
  }
  100%{
    transform:scale(1) rotate(0deg);
    opacity:1;
  }
}

.rating{display:flex;gap:8px}
.rating input{display:none}
.rating label{
  width:76px;height:38px;border-radius:10px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;
  font-family: 'Tawuniya', sans-serif;
  font-size:12px;font-weight:500;text-align:center;
  transition:background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.rating label:hover{
  background:var(--primary-100);
  border-color:var(--primary-700);
  color:var(--primary-700);
}

.rating input:checked + label{background:var(--primary-100);border-color:var(--primary-700);color:var(--primary-700);font-weight:500}

.toast{
  position:fixed;inset-inline:0;bottom:18px;margin:auto;
  width:fit-content;max-width:90vw;background:#101828;color:#fff;
  padding:10px 14px;border-radius:999px;font-size:14px;opacity:0;transform:translateY(6px);
  transition:.25s ease;box-shadow:0 8px 24px rgba(16,24,40,.24)
}
.toast.show{opacity:1;transform:translateY(0)}

.thankyou{text-align:center}
.thankyou h2{margin:0 0 8px 0}

.footer-divider{
  height:1px;
  background:#e5e5e5;
  margin:32px 0 24px 0;
  width:100%;
}

.Policy{
  margin-bottom:16px;
}

.Policy p{
  margin:4px 0;
  font-family: 'Tawuniya', sans-serif;
}

.footnote{padding:0 6px 24px}

/* Multi-step Survey Styles */
.survey-container{
  position:relative;
}

.progress-container{
  margin-bottom:32px;
  text-align:center;
}

.progress-bar{
  width:100%;
  height:6px;
  background:#e5e5e5;
  border-radius:3px;
  overflow:hidden;
  margin-bottom:16px;
}

.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--primary-700) 0%, var(--primary-600) 100%);
  width:0%;
  transition:width 0.4s ease;
  border-radius:3px;
}

.progress-steps{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
  position:relative;
}

.progress-step{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#e5e5e5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:500;
  color:#6b7280;
  transition:all 0.3s ease;
  position:relative;
}

.progress-step.active{
  background:var(--primary-700);
  color:#fff;
}

.progress-step.completed{
  background:var(--primary-600);
  color:#fff;
}

.progress-text{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
}

.category-header{
  margin-bottom:24px;
  text-align:center;
}

.category-header h2{
  margin:0 0 8px 0;
  font-size:20px;
  color:var(--text);
}

.nav-spacer{
  flex:1;
}

.form__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Step content animation */
.step-content{
  opacity:1;
  transform:translateX(0);
  transition:opacity 0.4s ease, transform 0.4s ease;
}

.step-content.slide-out-left{
  opacity:0;
  transform:translateX(-30px);
}

.step-content.slide-out-right{
  opacity:0;
  transform:translateX(30px);
}

.step-content.slide-in-left{
  opacity:0;
  transform:translateX(-30px);
}

.step-content.slide-in-right{
  opacity:0;
  transform:translateX(30px);
}

/* Category header animation */
.category-header{
  margin-bottom:24px;
  text-align:center;
  transition:opacity 0.3s ease, transform 0.3s ease;
}

.category-header.fade{
  opacity:0;
  transform:translateY(-10px);
}

/* Authentication Modal */
.auth-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.auth-modal.show{
  display:flex;
}

.auth-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  animation:fadeIn 0.3s ease;
}

.auth-modal-content{
  position:relative;
  background:#fff;
  border-radius:16px;
  width:100%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  animation:slideUp 0.3s ease;
}

.auth-close{
  position:absolute;
  top:16px;
  left:16px;
  background:none;
  border:none;
  font-size:24px;
  color:var(--muted);
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all 0.2s ease;
}

.auth-close:hover{
  background:var(--border);
  color:var(--text);
}

.auth-form{
  padding:32px;
  display:none;
}

.auth-form.active{
  display:block;
}

.auth-header{
  text-align:center;
  margin-bottom:32px;
}

.auth-header h2{
  margin:0 0 8px 0;
  font-size:24px;
  color:var(--text);
}

.auth-form-content{
  margin-bottom:24px;
}

.auth-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:16px 0 24px 0;
}

.forgot-link{
  color:var(--primary-700);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}

.forgot-link:hover{
  text-decoration:underline;
}

.auth-submit{
  width:100%;
  padding:14px;
  font-size:16px;
  font-weight:500;
}

.auth-switch{
  text-align:center;
  padding-top:24px;
  border-top:1px solid var(--border);
}

.switch-btn{
  background:none;
  border:none;
  color:var(--primary-700);
  font-weight:500;
  cursor:pointer;
  font-family: 'Tawuniya', sans-serif;
  margin-right:8px;
}

.switch-btn:hover{
  text-decoration:underline;
}

.link{
  color:var(--primary-700);
  text-decoration:none;
}

.link:hover{
  text-decoration:underline;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

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

/* Gamification Styles */
.challenge-header{
  text-align:center;
  margin-bottom:32px;
}

.challenge-badge{
  font-size:48px;
  margin-bottom:16px;
  animation:bounce 2s infinite;
}

.challenge-subtitle{
  font-size:18px;
  color:var(--muted);
  margin:8px 0 0 0;
  font-weight:500;
}

/* Question Media Styles (Images, Videos, Audio) */
.question-video{
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  border:2px solid var(--border);
  transition:all 0.3s var(--smooth);
}

.question-video video{
  width:100%;
  height:300px;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  background:#000;
}

.question-video:hover{
  border-color:var(--primary-500);
  box-shadow:var(--shadow);
}

.question-image{
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  border:2px solid var(--border);
  text-align:center;
}

.question-image img{
  max-width:100%;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}

.question-audio{
  background:linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  border:2px solid var(--primary-200);
}

.feedback-image{
  text-align:center;
  margin:24px 0;
  padding:20px;
  background:linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius:16px;
  border:2px solid var(--primary-200);
}

.feedback-image h3{
  color:var(--primary-700);
  margin-bottom:16px;
  font-size:20px;
  font-weight:500;
}

.gamification-stats{
  display:flex;
  gap:20px;
  justify-content:center;
  margin-top:24px;
}

.stat-card{
  background:linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
  border:2px solid var(--primary-200);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  min-width:120px;
  transition:all 0.3s var(--bounce);
  position:relative;
  overflow:hidden;
}

.stat-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--primary-600), var(--primary-500));
}

.stat-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow-lg);
  border-color:var(--primary-500);
}

.stat-icon{
  font-size:24px;
  margin-bottom:8px;
  animation:pulse 2s infinite;
}

.stat-value{
  font-size:32px;
  font-weight:500;
  color:var(--primary-700);
  margin-bottom:4px;
  transition:all 0.3s var(--bounce);
}

.stat-card:hover .stat-value{
  transform:scale(1.1);
  color:var(--primary-800);
}

.stat-label{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Gamified Progress Bar */
.progress-bar{
  background:linear-gradient(90deg, #e2e8f0, #cbd5e1);
  border-radius:12px;
  overflow:hidden;
  position:relative;
}

.progress-fill{
  background:linear-gradient(90deg, var(--primary-600) 0%, var(--primary-500) 50%, var(--primary-600) 100%);
  background-size:200% 100%;
  animation:shimmer 2s infinite;
  border-radius:12px;
  position:relative;
}

.progress-fill::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation:shine 1.5s infinite;
}

/* Gamified Buttons */
.btn-primary{
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:14px 24px;
  font-weight:500;
  font-size:16px;
  cursor:pointer;
  transition:all 0.3s var(--bounce);
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(30,64,175,0.3);
}

.btn-primary::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s;
}

.btn-primary:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 25px rgba(30,64,175,0.4);
}

.btn-primary:hover::before{
  left:100%;
}

.btn-primary:active{
  transform:translateY(0) scale(1.02);
}

/* Animations */
@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{transform:translateY(0)}
  40%{transform:translateY(-10px)}
  60%{transform:translateY(-5px)}
}

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

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

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

/* Question Types */
.question-video{
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  border:2px solid var(--border);
  transition:all 0.3s var(--smooth);
}

.question-video video{
  width:100%;
  height:300px;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  background:#000;
}

.question-image{
  text-align:center;
  margin-bottom:24px;
}

.question-image img{
  width:100%;
  max-width:400px;
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
  margin:0 auto;
  display:block;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.question-image img:hover{
  transform:scale(1.02);
  box-shadow:0 12px 35px rgba(0,0,0,0.2);
}

.feedback-image{
  text-align:center;
  margin:24px 0;
  padding:20px;
  background:linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius:16px;
  border:2px solid var(--primary-200);
}

.feedback-image h3{
  color:var(--primary-700);
  margin-bottom:16px;
  font-size:20px;
  font-weight:500;
}

.question-video:hover{
  border-color:var(--primary-500);
  box-shadow:var(--shadow);
}

.question-audio{
  background:linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  border:2px solid var(--primary-200);
}

.question-image{
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  border:2px solid var(--border);
  text-align:center;
}

.question-image img{
  max-width:100%;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}

/* Achievement Badges */
.achievement-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg, var(--gold), #f59e0b);
  color:#fff;
  padding:8px 16px;
  border-radius:20px;
  font-weight:500;
  font-size:14px;
  animation:bounce 0.6s var(--bounce);
}

/* Level Progress */
.level-progress{
  background:var(--border);
  border-radius:20px;
  height:8px;
  overflow:hidden;
  margin:8px 0;
}

.level-fill{
  background:linear-gradient(90deg, var(--primary-600), var(--primary-500));
  height:100%;
  border-radius:20px;
  transition:width 0.5s var(--smooth);
}

/* Results Page */
.results-container{
  text-align:center;
  padding:40px 20px;
}

.results-header{
  margin-bottom:40px;
}

.trophy{
  font-size:64px;
  margin-bottom:16px;
  animation:bounce 1s var(--bounce);
}

.results-header h2{
  font-size:28px;
  color:var(--primary-700);
  margin:0 0 8px 0;
}

.results-header p{
  font-size:18px;
  color:var(--muted);
  margin:0;
}

.results-stats{
  display:flex;
  gap:24px;
  justify-content:center;
  margin:32px 0;
  flex-wrap:wrap;
}

.result-card{
  background:linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border:2px solid var(--primary-200);
  border-radius:var(--radius);
  padding:24px;
  min-width:140px;
  transition:all 0.3s var(--bounce);
  position:relative;
  overflow:hidden;
}

.result-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--gold), var(--bronze));
}

.result-card:hover{
  transform:translateY(-6px) scale(1.05);
  box-shadow:var(--shadow-lg);
  border-color:var(--primary-500);
}

.result-icon{
  font-size:32px;
  margin-bottom:12px;
  animation:pulse 2s infinite;
}

.result-value{
  font-size:36px;
  font-weight:500;
  color:var(--primary-700);
  margin-bottom:8px;
  transition:all 0.3s var(--bounce);
}

.result-card:hover .result-value{
  transform:scale(1.15);
  color:var(--primary-800);
}

.result-label{
  font-size:16px;
  color:var(--muted);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1px;
}

.achievements{
  margin:40px 0;
}

.achievements h3{
  font-size:24px;
  color:var(--primary-700);
  margin-bottom:24px;
}

.achievements .achievement-badge{
  margin:8px;
  display:inline-block;
  animation:bounce 0.6s var(--bounce);
}

/* Points Badge */
.points-badge{
  background:linear-gradient(135deg, var(--gold), var(--bronze));
  color:#fff;
  padding:4px 8px;
  border-radius:12px;
  font-size:12px;
  font-weight:500;
  margin-right:8px;
  animation:pulse 2s infinite;
}

/* Share Button Styles */
.share-section {
  margin: 40px 0;
  text-align: center;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 500;
  font-family: 'Tawuniya', sans-serif;
  cursor: pointer;
  transition: all 0.3s var(--bounce);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.share-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.share-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.share-btn:hover::before {
  left: 100%;
}

.share-btn:active {
  transform: translateY(-1px) scale(1.02);
}

.share-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.share-btn:hover .share-icon {
  transform: scale(1.1);
}

/* Mobile responsive for share button */
@media (max-width: 768px) {
  .share-btn {
    padding: 14px 24px;
    font-size: 16px;
  }
  
  .share-icon {
    width: 20px;
    height: 20px;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .gamification-stats{
    flex-direction:column;
    align-items:center;
  }
  
  .stat-card{
    width:100%;
    max-width:200px;
  }
  
  .results-stats{
    flex-direction:column;
    align-items:center;
  }
  
  .result-card{
    width:100%;
    max-width:200px;
  }
}

/* Mobile Responsive for Choice Grid */
@media (max-width: 768px) {
  .choice-list{
    grid-template-columns:1fr;
    gap:12px;
  }
  
  .choice{
    min-height:70px;
    padding:16px;
    font-size:15px;
  }
}

/* Intro Animation Splash Screen */
.intro-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.intro-splash.hide {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.intro-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.intro-background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.intro-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(96, 165, 250, 0.06) 0%, transparent 50%);
  animation: particleFloat 8s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

.intro-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Top Logos */
.intro-top-logos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 60px;
  box-sizing: border-box;
}

.intro-logo-left,
.intro-logo-right {
  animation: logoFadeIn 0.8s ease-out 0.3s both;
}

.intro-brand-logo {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Al Hilal logo larger on intro screen (right side) */
.intro-logo-right .intro-brand-logo {
  height: 80px;
  max-width: 250px;
}

/* Player Container - REMOVED (now using intro_player_and_background.avif) */

@keyframes playerFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

/* Purple Text Box - Slides from right */
.intro-text-box {
  position: relative;
  flex: 0 0 auto;
  min-width: 50px;
  max-width: 35%;
  padding: 0;
  margin-left: auto;
  margin-right: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  animation: textBoxSlideIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
  z-index: 5;
  overflow: hidden;
  order: 1; /* Appears on right in RTL */
}

.intro-text-box-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Glow effect removed - using SVG instead */

/* Purple extension shape is now included in the SVG */

@keyframes textBoxGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.6;
  }
}

.intro-text-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-text-line1,
.intro-text-line2 {
  margin: 0;
  padding: 0;
  right: 3%;
  font-family: 'Tawuniya', sans-serif;
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.intro-text-line1 {
  font-size: 100px;
  animation: textFadeIn 0.8s ease-out 0.8s both;
}

.intro-text-line2 {
  font-size: 110px;
  animation: textFadeIn 0.8s ease-out 1s both;
}

/* Progress Bar - Bottom */
.intro-progress {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: progressFadeIn 0.8s ease-out 1.2s both;
}

.logo-container {
  position: relative;
  margin-bottom: 60px;
  animation: logoEntrance 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}

.intro-logo {
  height: 350px;
  width: auto;
  max-width: 550px;
  filter: drop-shadow(0 20px 40px rgba(30, 64, 175, 0.3));
  animation: logoPulse 1.5s ease-in-out infinite 1.2s;
}

.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes logoEntrance {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 20px 40px rgba(30, 64, 175, 0.3));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 25px 50px rgba(30, 64, 175, 0.4));
  }
}

@keyframes glowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.6;
  }
}

.intro-progress {
  animation: progressFadeIn 0.8s ease-out 0.8s both;
}

.progress-bar-intro {
  width: 300px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(4px);
}

.progress-fill-intro {
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.8) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  width: 0%;
  animation: progressShimmer 1s ease-in-out infinite, progressFill 0.7s ease-out 1.2s forwards;
}

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

@keyframes progressFill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* New Intro Animations */
@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes playerSlideIn {
 0% {
   opacity: 1;
   transform: translateX(-100px) scale(0.9); /* Slides from left (negative = left in RTL) */
 }
 100% {
   opacity: 1;
   transform: translateX(10%) scale(1);
 }
}

@keyframes textBoxSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100px) scale(0.9); /* Slides from right (positive = right in RTL) */
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes extensionSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Pre-game countdown overlay */
.countdown-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:
    url('./New_Desing_Images/Stadium_Background.webp');
  background-size:cover;
  background-position:center top;
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  z-index:11000;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 0.35s ease, transform 0.45s var(--smooth);
}

.countdown-overlay.active{
  opacity:1;
  transform:scale(1);
}

.countdown-card{
  position:relative;
  width:280px;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.9);
  animation:countdownCardIntro 0.4s var(--smooth) 0.1s forwards;
}

@keyframes countdownCardIntro{
  0%{
    opacity:0;
    transform:scale(0.9);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}

.countdown-diamond{
  width:190px;
  height:190px;
  border-radius:34px;
  background:linear-gradient(135deg, #7B5CFF 0%, #6B47F3 50%, #5A35D0 100%);
  border:6px solid rgba(255,255,255,0.9);
  box-shadow:0 25px 60px rgba(107, 71, 243, 0.5), 0 0 40px rgba(107, 71, 243, 0.35), inset 0 0 30px rgba(255,255,255,0.15);
  transform:rotate(45deg);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.countdown-diamond::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:26px;
  border:2px solid rgba(255,255,255,0.6);
  background:linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  pointer-events:none;
}

.countdown-number{
  position:relative;
  font-size:96px;
  font-weight:500;
  color:#ffffff;
  transform:rotate(-45deg) scale(0.6);
  opacity:0;
  font-family: 'Tawuniya', sans-serif;
  text-shadow:0 8px 20px rgba(0,0,0,0.5), 0 0 15px rgba(255,255,255,0.3);
  transition:color 0.2s ease;
}

.countdown-number.animate{
  animation:countdownPop 0.75s var(--bounce) forwards;
}

.countdown-diamond.animate{
  animation:countdownPulse 0.75s ease-out forwards;
}

.countdown-ring{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:42px;
  border:3px dashed rgba(107, 71, 243, 0.5);
  transform:rotate(45deg);
  animation:countdownRing 5s linear infinite;
  pointer-events:none;
}

.countdown-glow{
  position:absolute;
  width:4px;
  height:200px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.6));
  opacity:0.8;
  animation:countdownStreak 1.2s ease-out infinite;
}

.countdown-glow-one{transform:rotate(20deg);animation-delay:0s;}
.countdown-glow-two{transform:rotate(60deg);animation-delay:0.2s;}
.countdown-glow-three{transform:rotate(100deg);animation-delay:0.4s;}

@keyframes countdownPop{
  0%{opacity:0;transform:rotate(-45deg) scale(0.3);}
  60%{opacity:1;transform:rotate(-45deg) scale(1.15);}
  100%{opacity:1;transform:rotate(-45deg) scale(1);}
}

@keyframes countdownPulse{
  0%{transform:rotate(45deg) scale(0.9);box-shadow:0 25px 60px rgba(107, 71, 243, 0.4);}
  70%{transform:rotate(45deg) scale(1.03);box-shadow:0 25px 70px rgba(107, 71, 243, 0.6), 0 0 50px rgba(107, 71, 243, 0.4);}
  100%{transform:rotate(45deg) scale(1);}
}

@keyframes countdownRing{
  from{transform:rotate(45deg);}
  to{transform:rotate(405deg);}
}

@keyframes countdownStreak{
  0%{opacity:0;transform:scaleY(0.4);}
  20%{opacity:0.9;transform:scaleY(1);}
  80%{opacity:0.2;}
  100%{opacity:0;transform:scaleY(0.3);}
}

@keyframes progressFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes contentSlideUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide main content during intro */
body.intro-active .container {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.intro-complete .container {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile responsive for intro */
/* Responsive Intro Styles */
@media (max-width: 768px) {
  .intro-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 100px 20px 20px 20px;
    gap: 10px;
  }
  
  .intro-top-logos {
    padding: 20px;
  }
  
  .intro-brand-logo {
    height: 40px;
    max-width: 150px;
  }

  /* Al Hilal logo larger on intro screen mobile */
  .intro-logo-right .intro-brand-logo {
    height: 55px;
    max-width: 200px;
  }
  
  /* Player container removed - now using intro_player_and_background.avif */
  
  .intro-text-box {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    max-width: 90%;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    order: 2;
    margin-top: 40vh;
    margin-bottom: 80px;
    animation: textBoxSlideInMobile 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
    box-sizing: border-box;
    transform: scale(1.2);
    transform-origin: center;
  }
  
  .intro-text-box::after {
    display: none; /* Hide extension on mobile */
  }
  
  .intro-text-content {
    gap: 30px;
  }
  
  .intro-text-line1 {
    font-size: 72px;
  }
  
  .intro-text-line2 {
    font-size: 80px;
  }
  
  .intro-progress {
    bottom: 20px;
  }
  
  .progress-bar-intro {
    width: 250px;
  }
}

@media (max-width: 480px) {
  .intro-content {
    padding: 80px 15px 15px 15px;
  }
  
  .intro-text-box {
    margin-left: auto;
    margin-right: -47px;
    float: none;
    align-self: flex-end;
    padding: 0;
    max-width: calc(100% + 15px);
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    margin-top: 40vh;
    margin-bottom: 250px;
    box-sizing: border-box;
    transform: scale(1.15);
    transform-origin: center right;
  }
  
  .intro-text-box-img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  .intro-text-content {
    gap: 25px;
  }
  
  .intro-text-line1 {
    font-size: 68px;
  }
  
  .intro-text-line2 {
    font-size: 76px;
  }
  
  .intro-brand-logo {
    height: 35px;
    max-width: 120px;
  }

  /* Al Hilal logo larger on intro screen small mobile */
  .intro-logo-right .intro-brand-logo {
    height: 48px;
    max-width: 160px;
  }
  
  .intro-player {
    max-height: 40vh;
  }
}

@keyframes playerSlideInMobile {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes textBoxSlideInMobile {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .intro-logo {
    height: 280px;
    max-width: 420px;
  }
  
  .logo-glow {
    width: 400px;
    height: 400px;
  }
  
  .progress-bar-intro {
    width: 250px;
  }
}

/* Mobile responsive for header */
@media (max-width: 768px) {
  .topbar__inner {
    height: 50px;
    padding: 0 10px;
  }
  
  .brand img {
    width: 40px !important;
     height: auto;
  }
  
  .brand .brand__text span {
    font-size: 10px !important;
  }
  
  .center-logo img {
    height: 70px !important;
    width: auto;
  }
  
  .brand__text {
    gap: 6px !important;
  }
}

@media (max-width: 820px) and (orientation: portrait) {
  body.teams-mobile-rotate {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #6B47F3;
  }

  body.teams-mobile-rotate .app-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(90deg);
    overflow-x: hidden;
    overflow-y: auto;
    background: #6B47F3;
  }
  
  /* Team setup should display normally (no rotation styles applied when teams-mobile-rotate is not active) */
  
  /* Hide team setup when in rotated game mode */
  body.teams-mobile-rotate #teamSetup,
  body.teams-mobile-rotate .team-setup {
    display: none !important;
  }
  
  /* Ensure game board is visible when rotated */
  body.teams-mobile-rotate #multiplayerGame {
    display: flex !important;
  }
  
  /* CRITICAL: Override fixed positioning for rotated mode */
  body.teams-mobile-rotate .multiplayer-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background: #6B47F3 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }
  
  /* Hide mode selector when in teams mode */
  body.teams-mobile-rotate #modeSelector {
    display: none !important;
  }
  
  /* Ensure multiplayer mode fills rotated screen */
  body.teams-mobile-rotate #multiplayerMode {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    position: relative !important;
  }
  
  /* Fix multiplayer game container in rotated mode */
  body.teams-mobile-rotate .multiplayer-game {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 15px 20px 40px 20px !important;
    box-sizing: border-box !important;
    background: #6B47F3 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  
  /* Make sure scoreboard and all game elements are visible */
  body.teams-mobile-rotate .multiplayer-scoreboard {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  body.teams-mobile-rotate .board-progress {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  body.teams-mobile-rotate .category-board,
  body.teams-mobile-rotate .hard-questions-row {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  body.teams-mobile-rotate .mp-header-branding {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Optimize board layout for rotated landscape */
  body.teams-mobile-rotate .category-board {
    max-width: 100% !important;
    width: 100% !important;
    margin: 15px auto !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    padding: 0 !important;
  }
  
  body.teams-mobile-rotate .board-cell {
    font-size: 24px !important;
    padding: 15px 10px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  body.teams-mobile-rotate .hard-questions-row {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    margin-bottom: 20px !important;
  }
  
  body.teams-mobile-rotate .hard-questions-row .board-cell {
    font-size: 28px !important;
    padding: 15px 12px !important;
    min-height: 60px !important;
  }
  
  /* Optimize question screen for landscape */
  body.teams-mobile-rotate .question-panel-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  body.teams-mobile-rotate .question-content-fullscreen {
    height: 100% !important;
    justify-content: center !important;
    padding-top: 0 !important;
    gap: 20px !important;
  }
  
  body.teams-mobile-rotate .question-points-header {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  
  body.teams-mobile-rotate .question-points-svg {
    height: 35px !important;
    max-width: 160px !important;
  }
  
  body.teams-mobile-rotate .points-value {
    font-size: 20px !important;
  }
  
  body.teams-mobile-rotate .question-text-fullscreen {
    font-size: 36px !important;
    line-height: 1.5 !important;
    padding: 0 20px !important;
  }
  
  /* Better team score layout in landscape */
  body.teams-mobile-rotate .multiplayer-scoreboard {
    grid-template-columns: 1fr auto 1fr !important;
    padding: 15px 20px !important;
    gap: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
  }
  
  body.teams-mobile-rotate .team-score {
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    visibility: visible !important;
  }
  
  body.teams-mobile-rotate .team-points {
    font-size: 42px !important;
    display: block !important;
    visibility: visible !important;
  }
  
  body.teams-mobile-rotate .team-name {
    font-size: 20px !important;
    display: block !important;
    visibility: visible !important;
  }
  
  body.teams-mobile-rotate .team-label {
    font-size: 16px !important;
    display: block !important;
    visibility: visible !important;
  }
  
  body.teams-mobile-rotate .vs-bar-container {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  body.teams-mobile-rotate .vs-bar-image {
    height: 70px !important;
    max-width: 90px !important;
    display: block !important;
    visibility: visible !important;
  }
  
  body.teams-mobile-rotate .vs-divider {
    display: flex !important;
    visibility: visible !important;
  }
  
  body.teams-mobile-rotate .board-progress {
    font-size: 18px !important;
    margin: 15px 0 !important;
  }
  
  /* Header branding in landscape */
  body.teams-mobile-rotate .mp-header-branding {
    padding: 15px 20px !important;
  }
  
  body.teams-mobile-rotate .mp-brand-logo {
    height: 40px !important;
  }
  
  body.teams-mobile-rotate .question-panel-branding {
    padding: 15px 20px !important;
  }
  
  body.teams-mobile-rotate .question-panel-branding-left .question-panel-brand-logo {
    width: 30px !important;
    height: auto !important;
  }
  
  body.teams-mobile-rotate .question-panel-branding-right .question-panel-brand-logo {
    width: 90px !important;
    height: auto !important;
  }
  
  /* Optimize timers for landscape */
  body.teams-mobile-rotate .timer-circle {
    width: 80px !important;
    height: 80px !important;
  }
  
  body.teams-mobile-rotate .timer-circle-value {
    font-size: 28px !important;
  }
  
  body.teams-mobile-rotate .timer-circle-text {
    font-size: 11px !important;
    max-width: 120px !important;
  }
  
  body.teams-mobile-rotate .question-timers-fullscreen {
    flex-direction: row !important;
    gap: 30px !important;
    justify-content: center !important;
    padding: 0 20px !important;
  }
  
  body.teams-mobile-rotate .timer-text-line1 {
    font-size: 20px !important;
  }
  
  body.teams-mobile-rotate .timer-text-line2 {
    font-size: 18px !important;
  }
  
  /* Better button sizes in landscape */
  body.teams-mobile-rotate .btn-fullscreen {
    min-height: 60px !important;
    padding: 10px 20px !important;
  }
  
  body.teams-mobile-rotate .btn-svg-image {
    max-height: 55px !important;
  }
  
  body.teams-mobile-rotate .question-actions-fullscreen {
    padding: 0 20px !important;
    gap: 15px !important;
    margin-top: 10px !important;
  }
  
  /* Team setup screen in landscape */  
  body.teams-mobile-rotate .team-setup-title {
    font-size: 40px !important;
    margin-bottom: 20px !important;
  }
  
  body.teams-mobile-rotate .team-setup-instructions {
    font-size: 20px !important;
    margin-bottom: 30px !important;
  }
  
  body.teams-mobile-rotate .team-inputs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    max-width: 700px !important;
    width: 100% !important;
    margin-bottom: 30px !important;
  }
  
  body.teams-mobile-rotate .team-input-group {
    width: 100% !important;
  }
  
  body.teams-mobile-rotate .team-input {
    font-size: 20px !important;
    padding: 15px 20px !important;
    width: 100% !important;
  }
  
  body.teams-mobile-rotate .team-input-label {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  
  body.teams-mobile-rotate .team-start-button {
    max-width: 400px !important;
    font-size: 22px !important;
    padding: 15px 40px !important;
    margin-top: 10px !important;
  }
  
  /* Winner screen in landscape */
  body.teams-mobile-rotate .winner-panel-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  
  body.teams-mobile-rotate .winner-content-fullscreen {
    height: 100% !important;
    justify-content: center !important;
    padding: 20px !important;
    gap: 20px !important;
  }
  
  /* Award buttons in landscape */
  body.teams-mobile-rotate .award-buttons {
    flex-direction: row !important;
    gap: 20px !important;
  }
  
  body.teams-mobile-rotate .award-btn {
    flex: 1 !important;
    max-width: 200px !important;
  }
  
  body.teams-mobile-rotate .award-btn-svg {
    height: 60px !important;
  }
  
  /* Winner screen sizes */
  body.teams-mobile-rotate .winner-trophy-image {
    width: 130px !important;
    height: auto !important;
  }
  
  body.teams-mobile-rotate .winner-title-fullscreen {
    font-size: 42px !important;
    margin-bottom: 15px !important;
  }
  
  body.teams-mobile-rotate .winner-scores-fullscreen {
    gap: 25px !important;
    margin-bottom: 15px !important;
  }
  
  body.teams-mobile-rotate .winner-team-score-card {
    min-width: 180px !important;
    max-width: 240px !important;
    padding: 25px !important;
    gap: 12px !important;
  }
  
  body.teams-mobile-rotate .winner-team-name-fullscreen {
    font-size: 20px !important;
  }
  
  body.teams-mobile-rotate .winner-team-points-fullscreen span:first-child {
    font-size: 48px !important;
  }
  
  body.teams-mobile-rotate .winner-points-label {
    font-size: 18px !important;
  }
  
  body.teams-mobile-rotate .winner-actions-fullscreen {
    gap: 20px !important;
    margin-top: 15px !important;
  }
  
  body.teams-mobile-rotate .winner-btn {
    min-width: 180px !important;
    max-width: 240px !important;
    padding: 0 !important;
  }
  
  body.teams-mobile-rotate .winner-btn-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

/* Question Styles */
.question{
  margin-bottom:32px;
  padding:32px;
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  min-height:400px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.question-single{
  min-height:500px;
  padding:40px;
}

.question-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.question-header h3{
  font-size:24px;
  font-weight:500;
  color:var(--text);
  margin:0;
  flex:1;
}

.question-points{
  background:linear-gradient(135deg, var(--gold) 0%, var(--warning) 100%);
  color:#fff;
  padding:8px 16px;
  border-radius:var(--radius-sm);
  font-weight:500;
  font-size:14px;
  box-shadow:0 4px 12px rgba(251,191,36,0.3);
}

/* Answer Feedback Styles */
.answer-feedback{
  text-align:center;
  padding:32px;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  margin:20px 0;
}

.feedback-header{
  margin-bottom:32px;
}

.feedback-icon{
  font-size:64px;
  margin-bottom:16px;
  animation:bounce 1s ease-in-out;
}

.feedback-icon.correct{
  color:var(--success);
}

.feedback-icon.incorrect{
  color:var(--danger);
}

.feedback-header h2{
  font-size:28px;
  font-weight:500;
  margin:16px 0 8px 0;
  color:var(--text);
}

.feedback-header p{
  font-size:18px;
  color:var(--muted);
  margin:0;
}

.feedback-video{
  margin:32px 0;
  text-align:center;
}

.feedback-video h3{
  font-size:20px;
  font-weight:500;
  margin-bottom:16px;
  color:var(--text);
}

.feedback-video video{
  border-radius:var(--radius);
  box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

.feedback-answer{
  margin:32px 0;
  padding:24px;
  background:var(--primary-50);
  border-radius:var(--radius);
  border:2px solid var(--primary-200);
}

.feedback-answer h3{
  font-size:18px;
  font-weight:500;
  margin-bottom:12px;
  color:var(--text);
}

.correct-answer{
  font-size:24px;
  font-weight:500;
  color:var(--primary-700);
  background:var(--surface);
  padding:16px 24px;
  border-radius:var(--radius-sm);
  border:2px solid var(--primary-300);
  display:inline-block;
}

.feedback-stats{
  display:flex;
  justify-content:center;
  gap:32px;
  margin:32px 0;
  flex-wrap:wrap;
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.stat-label{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
}

.stat-value{
  font-size:24px;
  font-weight:500;
  color:var(--primary-700);
}

/* ============================================
   MULTIPLAYER MODE STYLES
   ============================================ */

/* Mode Selector - New Stadium Design */
.mode-selector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Tawuniya', sans-serif;
  overflow: hidden;
  border-radius: 0;
  z-index: 100;
  opacity: 0;
  animation: modeSelectorFadeIn 0.6s ease-out 0.2s forwards;
}

.mode-selector.leaving {
  animation: modeSelectorFadeOut 0.4s ease-out forwards;
}

@keyframes modeSelectorFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes modeSelectorFadeOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

/* Stadium Background - REMOVED (now using homepage_background_and_content image) */
/* Old stadium background styles removed - background is now part of homepage_background_and_content.avif/webp */

/* Player Sections Container - REMOVED (now using homepage-background-container) */

/* Homepage Background and Content Container */
.homepage-background-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* Homepage Content Image (AVIF/WebP) - Full Background */
.homepage-content-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 0;
}

.homepage-content-svg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Mobile Overlay Image (players - on top of background) */
.homepage-mobile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  z-index: 1;
  opacity: 1;
}

.homepage-mobile-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Player Container */
.player-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  height: 100%;
}

/* Player Branding - Top Corners */
.player-branding {
  position: absolute;
  top: 30px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.branding-left {
  left: 40px;
}

.branding-right {
  right: 40px;
}

.brand-logo {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Al Hilal logo larger on home page (left side) */
.branding-left .brand-logo {
  height: 80px;
  max-width: 250px;
}

.branding-right .brand-logo {
  height: 60px;
  width: auto;
  max-width: 200px;
}

.brand-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  font-family: 'Tawuniya', sans-serif;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.9);
}

.branding-left .brand-text {
  color: #1e293b;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.9);
}

.branding-right .brand-text {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Player Card */
.player-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius);
  padding: 20px;
  padding-top: 40px;
  padding-bottom: 150px;
  margin-top: 60px;
  margin-bottom: -100px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: visible;
  min-height: calc(100vh - 310px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.card-left {
  background: #f5f5f5;
  border: none;
}

.card-right {
  background: #6945F0;
  border: none;
}

/* Card Triangle Indicator - Extends from card to top of screen */
.card-triangle {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 100px;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  z-index: 1;
  pointer-events: none;
}

.triangle-left {
  background: #6945F0;
}

.triangle-right {
  background: #ffffff;
}

/* Player Image Container */
.player-image-container {
  width: 100%;
  position: absolute;
  bottom: -250px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  height: auto;
}

.player-image {
  width: auto;
  height: 85vh;
  min-height: 700px;
  max-width: 480px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
  transform-origin: bottom center;
  position: relative;
}

.player-left .player-image {
  height: 80vh;
  min-height: 650px;
  max-width: 450px;
}

.player-left .player-image-container {
  bottom: -220px;
}

/* Mode Selector Content */
.mode-selector-content {
  position: absolute;
  top: 22%;
  left: 49.2%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  padding: 20px;
  width: 100%;
  max-width: 600px;
}

.mode-title {
  font-size: 90px;
  font-weight: 350;
  color: #392765;
  margin-bottom: 15px;
  font-family: 'Tawuniya', sans-serif;
  line-height: 1.2;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;
}

.mode-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.mode-button-single {
  margin-left: -10px;
}

.mode-button-multiplayer {
  margin-right: -10px;
}

/* Mode Buttons */
.mode-button {
  border: none;
  padding: 18px 36px;
  cursor: pointer;
  transition: filter 0.3s var(--smooth);
  font-family: 'Tawuniya', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  position: relative;
  width: fit-content;
  min-width: 200px;
  min-height: 80px;
  height: auto;
  overflow: hidden;
}

.mode-button-single {
  background-image: url('./New_Desing_Images/Buttons/right_mode_button.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
}

.mode-button-single:hover {
  filter: brightness(1.1);
}

.mode-button-multiplayer {
  background-image: url('./New_Desing_Images/Buttons/left_mode_button.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
}

.mode-button-multiplayer:hover {
  filter: brightness(1.1);
}

.mode-icon-send {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.mode-button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 36px;
  position: relative;
  z-index: 1;
}

/* Optical centering for pill buttons with middle connector */
.mode-button-multiplayer .mode-button-text {
  transform: translateX(-6px); /* shift text slightly away from connector */
}

.mode-button-single .mode-button-text {
  transform: translateX(6px); /* shift text slightly away from connector */
}

.mode-button-title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
}

.mode-button-subtitle {
  font-size: 17px;
  font-weight: 400;
  opacity: 0.9;
  color: #ffffff;
  text-align: center;
}

/* Team Setup */
.team-setup {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 40px 40px 40px;
  font-family: 'Tawuniya', sans-serif;
  position: relative;
  z-index: 1;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
}

.team-setup-title {
  text-align: center;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 48px;
  font-weight: 200;
  font-family: 'Tawuniya', sans-serif;
}

.team-setup-instructions {
  text-align: center;
  margin-bottom: 40px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 200;
  font-family: 'Tawuniya', sans-serif;
  opacity: 0.95;
}

.team-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 7px 0;
  padding: 0 40px;
  position: relative;
  box-sizing: border-box;
}

.team-inputs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./New_Desing_Images/teams_fields.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 0;
  pointer-events: none;
}

.team-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.team-input-label {
  color: #ffffff;
  font-size: 24px;
  font-weight: 200;
  font-family: 'Tawuniya', sans-serif;
  text-align: center;
  position: relative;
  z-index: 1;
}

.team-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Tawuniya', sans-serif;
  background: transparent;
  border: none;
  border-radius: 32px;
  color: rgba(107, 71, 243, 0.7);
  text-align: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.team-input::placeholder {
  color: rgba(107, 71, 243, 0.5);
}

.team-input:focus {
  outline: none;
  box-shadow: none;
}

.team-start-button {
  width: 100%;
  max-width: 750px;
  padding: 10px 40px;
  font-size: 36px;
  font-weight: 200;
  font-family: 'Tawuniya', sans-serif;
  background: #392765;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.team-start-button:hover {
  background: #4a3280;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.team-input-group.full-width {
  grid-column: 1 / -1;
}

/* Multiplayer Game */
.multiplayer-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: url('./New_Desing_Images/Stadium_Background.svg');
  background-size: cover;
  background-position: center top;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
}

.multiplayer-container.showing {
  animation: fadeInMultiplayer 0.5s ease-in forwards;
}

.multiplayer-container.hiding {
  animation: fadeOutMultiplayer 0.5s ease-out forwards;
}

@keyframes fadeInMultiplayer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutMultiplayer {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Purple background for team setup screen */
.multiplayer-container:has(#teamSetup) {
  background: #6B47F3;
}

/* Multiplayer Header Branding */
.mp-header-branding {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px;
  z-index: 10;
  direction: ltr;
}

.mp-branding-left {
  position: relative;
  order: 1;
}

.mp-branding-right {
  position: relative;
  order: 2;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mp-branding-right:hover {
  opacity: 0.8;
}

.mp-brand-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.mp-branding-left .mp-brand-logo {
  width: 40px;
}

.mp-branding-right .mp-brand-logo {
  width: 150px;
}

.multiplayer-game {
  background: #6B47F3;
  min-height: 100vh;
  padding: 24px 32px 0px 0px;
  box-sizing: border-box;
}

.multiplayer-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  background: transparent;
  padding: 20px 0;
  margin-bottom: 0px;
  margin-top: 70px;
  font-family: 'Tawuniya', sans-serif;
}

.team-score {
  text-align: center;
  font-family: 'Tawuniya', sans-serif;
}

.team-name {
  font-size: 24px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 12px;
  font-family: 'Tawuniya', sans-serif;
}

.team-points {
  font-size: 64px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  margin: 8px 0;
  font-family: 'Tawuniya', sans-serif;
}

.team-label {
  font-size: 18px;
  color: #ffffff;
  font-weight: 300;
  font-family: 'Tawuniya', sans-serif;
}

.vs-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  font-family: 'Tawuniya', sans-serif;
  justify-content: center;
}

.vs-bar-container {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 350px;
}

.vs-bar-image {
  width: auto;
  height: 50px;
  max-width: 400px;
  display: block;
}

.current-turn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #6B47F3;
  font-weight: 400;
  font-family: 'Tawuniya', sans-serif;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.team-lifelines {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.lifeline-button {
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.25);
  transition: all 0.3s var(--smooth);
  font-family: 'Tawuniya', sans-serif;
}

.lifeline-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(30, 64, 175, 0.35);
}

.lifeline-button.used,
.lifeline-button.used:hover {
  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
  box-shadow: none;
  background: linear-gradient(135deg, var(--border) 0%, var(--muted) 100%);
  color: #fff;
}

.lifeline-button.active {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12);
}

.board-progress {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 30px;
  font-family: 'Tawuniya', sans-serif;
}

.category-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 8px;
  column-gap: 0;
  padding: 0;
  background: transparent;
  max-width: 800px;
  margin: 0 auto 33px auto;
  flex-wrap: wrap;
}

.board-cell {
  position: relative;
  border-radius: 0;
  border: 0;
  padding: 18px 12px;
  font-size: 28px;
  font-weight: 300;
  color: #6B47F3;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Tawuniya', sans-serif;
  background: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  width: calc(100% + 0.5px);
  margin: 0;
  z-index: 1;
  overflow: hidden;
}

.board-cell::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(107, 71, 243, 0.35);
  transition: top 0.3s ease;
  z-index: -1;
  pointer-events: none;
}

/* Left side board cells (100 and 400 points) */
.board-cell.cell-left:not(.cell-hard) {
  background-image: url('New_Desing_Images/Buttons/right_board_cell.svg');
}

/* Right side board cells (100 and 400 points) */
.board-cell.cell-right:not(.cell-hard) {
  background-image: url('New_Desing_Images/Buttons/left_board_cell.svg');
}

.board-cell:hover:not(:disabled)::before {
  top: 0;
}

.board-cell[data-difficulty="100"],
.board-cell.cell-easy {
  color: #6B47F3;
}

.board-cell[data-difficulty="400"],
.board-cell.cell-medium {
  color: #6B47F3;
}

.board-cell[data-difficulty="700"],
.board-cell.cell-hard {
  color: #ffffff;
}

/* Hard questions row SVG backgrounds */
.hard-questions-row .board-cell.cell-left {
  background-image: url('New_Desing_Images/Buttons/right_hard_board_cell.svg');
}

.hard-questions-row .board-cell.cell-right {
  background-image: url('New_Desing_Images/Buttons/left_hard_board_cell.svg');
}


.board-cell:disabled {
  cursor: not-allowed;
}

.board-cell:disabled:not(.used) {
  /* Keep full color for disabled but unused cells */
  opacity: 1;
  cursor: not-allowed;
}

.board-cell.used {
  cursor: not-allowed;
  opacity: 0.723;
  transform: none;
  box-shadow: none;
  color: rgba(107, 71, 243, 0.5);
}

.board-cell.cell-hard.used {
  color: rgba(255, 255, 255, 0.5);
}

/* Hard Questions Row (700 points buttons) */
.hard-questions-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 4px;
  column-gap: 0;
  max-width: 800px;
  margin: 0 auto 0px auto;
}

.hard-questions-row .board-cell {
  background: transparent;
  color: #ffffff;
  font-size: 32px;
  padding: 20px 16px;
  min-height: 70px;
  width: calc(100% + 0.5px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: filter 0.3s ease;
}

.hard-questions-row .board-cell::before {
  display: none;
}

.hard-questions-row .board-cell:hover:not(:disabled) {
  filter: brightness(1.4);
}

.hard-questions-row .board-cell.used {
  color: rgba(255, 255, 255, 0.5);
}

/* Next Button */
.mp-next-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #392765;
  color: #ffffff;
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Tawuniya', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  z-index: 50;
}

.mp-next-button:hover {
  background: #4a3280;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mp-next-button svg {
  width: 20px;
  height: 20px;
}

.board-cell.placeholder {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  visibility: hidden;
}

.board-cell-wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .multiplayer-game {
    padding: 16px 20px 100px 20px;
  }

  .multiplayer-scoreboard {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 15px 0;
    margin-top: 40px;
  }

  .team-name {
    font-size: 20px;
  }

  .team-points {
    font-size: 48px;
  }

  .team-label {
    font-size: 16px;
  }

  .vs-button {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .vs-bar-container {
    max-width: 250px;
  }

  .vs-bar-image {
    height: 26px;
    max-width: 280px;
  }

  .current-turn {
    font-size: 12px;
    padding: 8px 16px;
    right: 15px;
  }

  .board-progress {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .category-board {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 8px;
    column-gap: 0;
    max-width: 100%;
    margin: 0 auto 33px auto;
  }

  .board-cell {
    font-size: 18px;
    padding: 12px 8px;
    min-height: 50px;
  }

  .hard-questions-row {
    row-gap: 8px;
    column-gap: 0;
    margin-bottom: 33px;
  }

  .hard-questions-row .board-cell {
    font-size: 22px;
    padding: 14px 10px;
    min-height: 12px;
    width: 100%;
    filter: none;
  }

  .mp-next-button {
    bottom: 16px;
    left: 16px;
    padding: 10px 20px;
    font-size: 16px;
  }

  /* Question Panel Fullscreen Mobile */
  .question-content-fullscreen {
    gap: 12px;
    padding: 10px 6px;
  }

  .question-panel-branding {
    padding: 10px 12px;
  }

  .question-panel-branding-left .question-panel-brand-logo {
    width: 20px;
  }

  .question-panel-branding-right .question-panel-brand-logo {
    width: 65px;
  }

  .question-points-svg {
    height: 25px;
    max-width: 130px;
  }

  .points-value {
    right: 25px;
    font-size: 14px;
  }

  .question-text-fullscreen {
    font-size: 24px;
    padding: 0 12px;
    line-height: 1.5;
  }

  .question-timers-fullscreen {
    flex-direction: column;
    gap: 14px;
    padding: 0 8px;
  }

  .timer-circle-container.timer-left,
  .timer-circle-container.timer-right {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .timer-circle {
    width: 65px;
    height: 65px;
  }

  .timer-circle-value {
    font-size: 20px;
  }

  .timer-circle-text {
    font-size: 9px;
    max-width: 115px;
    line-height: 1.2;
  }

  .question-actions-fullscreen {
    flex-direction: row;
    gap: 0;
    padding: 0 16px;
    justify-content: center;
  }

  .btn-fullscreen {
    width: 50%;
    min-width: auto;
    min-height: 50px;
    padding: 0;
    margin: 0;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-fullscreen:first-child {
    margin-left: 0;
  }
  
  .btn-fullscreen:last-child {
    margin-right: 0;
  }
  
  .btn-fullscreen + .btn-fullscreen {
    margin-left: 0;
  }

  .btn-svg-image {
    max-height: 45px;
    width: auto;
    height: auto;
  }
}

.board-cell.in-play {
  outline: 3px solid rgba(234, 179, 8, 0.55);
  box-shadow: 0 0 0 6px rgba(234, 179, 8, 0.15);
}

.question-panel-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #6B47F3;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: questionPanelFadeIn 0.5s ease-out;
  font-family: 'Tawuniya', sans-serif;
  overflow: hidden;
}

/* Question Panel Branding */
.question-panel-branding {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px;
  z-index: 10;
  direction: ltr;
}

.question-panel-branding-left {
  position: relative;
  order: 1;
}

.question-panel-branding-right {
  position: relative;
  order: 2;
}

.question-panel-brand-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.question-panel-branding-left .question-panel-brand-logo {
  width: 40px;
}

.question-panel-branding-right .question-panel-brand-logo {
  width: 150px;
}

.question-content-fullscreen {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  animation: questionContentSlideIn 0.6s ease-out;
  padding: 20px;
  box-sizing: border-box;
}

@keyframes questionPanelFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Points Header - SVG with Points Value */
.question-points-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: 50px;
}

.question-points-svg-container {
  position: relative;
  display: inline-block;
}

.question-points-svg {
  width: auto;
  height: 60px;
  max-width: 300px;
  display: block;
}

.points-value {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 500;
  color: #6B47F3;
  font-family: 'Tawuniya', sans-serif;
}

/* Question Text */
.question-text-container-fullscreen {
  text-align: center;
  width: 100%;
  max-width: 1000px;
  padding: 0 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.question-text-fullscreen {
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  margin: 0;
  font-family: 'Tawuniya', sans-serif;
}

.question-category-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
  display: grid;
  place-items: center;
  font-size: 32px;
}

/* Removed old category styles - now using simpler question display */

.question-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
}

.question-meta .dot {
  font-size: 8px;
}

/* Removed question-options styles - questions now display without choices */

/* Circular Timers Layout */
.question-timers-fullscreen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  gap: 80px;
  padding: 0 40px;
  flex: 1;
  min-height: 0;
}

.timer-box {
  background: rgba(30, 64, 175, 0.06);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(30, 64, 175, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-panel-fullscreen .timer-box {
  padding: 24px;
}

.timer-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  font-family: 'Tawuniya', sans-serif;
}

.timer-value {
  font-size: 36px;
  font-weight: 500;
  color: var(--primary-700);
  font-family: 'Tawuniya', sans-serif;
}

.question-panel-fullscreen .timer-value {
  font-size: 48px;
}

.timer-value.warning {
  color: #f97316;
}

.timer-value.danger {
  color: #dc2626;
}

.timer-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.2);
  overflow: hidden;
}

.timer-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);
  transition: width 0.3s linear;
}

.timer-box.secondary .timer-bar span {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Circular Timer Styles */
.timer-circle-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.timer-circle-container.timer-left {
  justify-content: flex-end;
  flex-direction: row;
}

.timer-circle-container.timer-right {
  justify-content: flex-start;
  flex-direction: row;
}

.timer-circle {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-circle-bg {
  stroke: rgba(255, 255, 255, 0.2);
}

.timer-circle-progress {
  stroke: #ffffff;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 565.48;
  transition: stroke-dashoffset 0.1s linear;
}

/* Initialize circular progress */
#primaryTimerProgress,
#secondaryTimerProgress {
  stroke-dasharray: 565.48;
  stroke-dashoffset: 565.48;
}

.timer-circle-value {
  position: absolute;
  font-size: 54px;
  font-weight: 400;
  color: #ffffff;
  font-family: 'Tawuniya', sans-serif;
  z-index: 1;
}

.timer-circle-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Tawuniya', sans-serif;
}

.timer-text-line1 {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1.2;
}

.timer-text-line2 {
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1.2;
}

/* Fullscreen Action Buttons */
.question-actions-fullscreen {
  display: flex;
  gap: 0;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  padding: 0 40px;
  flex-shrink: 0;
}

.btn-fullscreen {
  flex: 0;
  padding: 0;
  border-radius: 0;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Tawuniya', sans-serif;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
  
/* First button - round left corners only */
.btn-fullscreen:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
  
/* Last button - round right corners only */
.btn-fullscreen:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
  
/* Middle buttons - no border radius */
.btn-fullscreen:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-svg-image {
  max-width: 100%;
  height: auto;
  max-height: 60px;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 0;
}

.btn-text {
  position: absolute;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Tawuniya', sans-serif;
  z-index: 2;
  pointer-events: none;
}

.btn-fullscreen::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(107, 71, 243, 0.15);
  transition: top 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.btn-fullscreen:hover:not(:disabled)::before {
  top: 0;
}

.btn-reveal:hover {
  transform: none;
  opacity: 1;
}

.btn-start-timer:hover {
  transform: none;
  opacity: 1;
}

.question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.question-actions .btn {
  min-width: 180px;
  font-size: 16px;
  padding: 14px 28px;
  font-weight: 500;
}

.answer-reveal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 0;
  border-top: none;
  font-family: 'Tawuniya', sans-serif;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 0;
  align-items: center;
  justify-content: center;
}

.answer-text {
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  padding: 32px 48px;
  background: #6B47F3;
  border-radius: 16px;
  font-family: 'Tawuniya', sans-serif;
  width: 100%;
  max-width: 900px;
}

.answer-text span {
  color: rgba(255, 255, 255, 1);
  font-size: 30px;
  display: block;
  margin-bottom: 12px;
  font-weight: 200;
}

.answer-text strong {
  color: #ffffff;
  font-size: 50px;
  display: block;
  font-weight: 300;
}

.award-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.award-question {
  font-size: 26px;
  font-weight: 300;
  color: #ffffff;
  margin: 0;
  text-align: center;
  font-family: 'Tawuniya', sans-serif;
}

.award-buttons {
  display: flex;
  gap: 0px;
  flex-wrap: wrap;
  justify-content: center;
}

.award-actions .award-btn {
  flex: 0 0 auto;
  min-width: auto;
  max-width: 200px;
  height: 60px;
  font-weight: 500;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: slideUp 0.5s ease-out;
  animation-fill-mode: both;
}

.award-actions .award-btn::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(107, 71, 243, 0.15);
  transition: top 0.3s ease;
  z-index: -1;
  pointer-events: none;
}

.award-actions .award-btn:hover:not(:disabled)::before {
  top: 0;
}

.award-actions .award-btn.team1 {
  animation-delay: 0.1s;
}

.award-actions .award-btn.team2 {
  animation-delay: 0.2s;
}

.award-actions .award-btn.none {
  animation-delay: 0.3s;
}

.award-btn-svg {
  width: auto;
  height: 60px;
  max-width: 200px;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.award-btn-text {
  position: absolute;
  top: 50%;
  left: 52.5%;
  transform: translate(-50%, -50%);
  color: rgba(107, 71, 243, 1);
  font-size: 20px;
  font-weight: 300;
  font-family: 'Tawuniya', sans-serif;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.award-actions .award-btn.team1 {
  background: transparent;
  color: transparent;
  border: none;
}

.award-actions .award-btn.team2 {
  background: transparent;
  color: transparent;
  border: none;
}

.award-actions .award-btn.none {
  background: transparent;
  color: transparent;
  border: none;
}

.question-placeholder small {
  font-size: 13px;
}

.multiplayer-question-card {
  padding: 40px;
  margin-bottom: 30px;
}

.multiplayer-question-card .question-label {
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.5;
}

.multiplayer-question-card .choice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.multiplayer-question-card .choice {
  padding: 24px;
  font-size: 18px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Winner Screen - Full Screen Design */
.winner-screen-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: #6B47F3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  overflow: hidden;
  font-family: 'Tawuniya', sans-serif;
  font-weight: 300;
}

.winner-branding {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px;
  z-index: 10;
  direction: ltr;
}

.winner-branding-left {
  position: relative;
  order: 1;
}

.winner-branding-right {
  position: relative;
  order: 2;
}

.winner-brand-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.winner-branding-left .winner-brand-logo {
  width: 40px;
}

.winner-branding-right .winner-brand-logo {
  width: 150px;
}

.winner-content-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  margin: 0 auto;
  font-weight: 300;
}

.winner-trophy-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.winner-trophy-image {
  width: 150px;
  height: auto;
  object-fit: contain;
  animation: trophyRotate 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes trophyRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-12deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.winner-title-fullscreen {
  font-size: 42px;
  font-weight: 300;
  color: #ffffff;
  margin: 0;
  text-align: center;
  font-family: 'Tawuniya', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

.winner-scores-fullscreen {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  max-width: 800px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.winner-team-score-card {
  flex: 1;
  min-width: 250px;
  max-width: 320px;
  position: relative;
  background: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
}

.winner-team-score-left {
  background-image: url('New_Desing_Images/Buttons/right_board_cell.svg');
}

.winner-team-score-right {
  background-image: url('New_Desing_Images/Buttons/left_board_cell.svg');
}

.winner-team-name-fullscreen {
  font-size: 24px;
  font-weight: 300;
  color: #6B47F3;
  font-family: 'Tawuniya', sans-serif;
  margin: 0;
}

.winner-team-points-fullscreen {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  font-family: 'Tawuniya', sans-serif;
  font-weight: 300;
}

.winner-team-points-fullscreen span:first-child {
  font-size: 48px;
  font-weight: 300;
  color: #6B47F3;
  line-height: 1;
}

.winner-points-label {
  font-size: 20px;
  font-weight: 300;
  color: #6B47F3;
}

.winner-actions-fullscreen {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  max-width: 800px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-shrink: 0;
}

.winner-btn {
  flex: 0;
  min-width: 250px;
  max-width: 320px;
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Tawuniya', sans-serif;
  font-weight: 300;
  z-index: 1;
}

.winner-btn::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(107, 71, 243, 0.35);
  transition: top 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.winner-btn:hover:not(:disabled)::before {
  top: 0;
}

.winner-btn-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Removed ::before hover effect - now using SVG buttons */

/* Multiplayer Feedback */
.multiplayer-feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  text-align: center;
  min-width: 300px;
  animation: feedbackSlideUp 0.5s var(--bounce);
}

.multiplayer-feedback.correct {
  border: 4px solid var(--success);
}

.multiplayer-feedback.wrong {
  border: 4px solid var(--danger);
}

.multiplayer-feedback-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: feedbackIconPop 0.6s var(--bounce);
}

.multiplayer-feedback-message {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 12px;
}

.multiplayer-feedback.correct .multiplayer-feedback-message {
  color: var(--success);
}

.multiplayer-feedback.wrong .multiplayer-feedback-message {
  color: var(--danger);
}

.multiplayer-feedback-points {
  font-size: 32px;
  font-weight: 500;
  color: var(--primary-700);
  margin-top: 16px;
}

/* Mobile Responsive for New Mode Selector */
@media (max-width: 768px) {
  .mode-selector {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .homepage-background-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }

  .homepage-content-svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  
  .homepage-content-svg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  
  /* Show mobile overlay on mobile devices */
  .homepage-mobile-overlay {
    display: block;
  }
  
  .homepage-mobile-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .player-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .player-card {
    max-width: 100%;
    margin-top: 0;
    min-height: auto;
    width: 100%;
    padding: 10px 8px 120px 8px !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .card-triangle {
    display: none !important;
  }

  .player-image-container {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .player-image,
  .player-left .player-image,
  .player-right .player-image {
    height: auto !important;
    max-height: 280px !important;
    min-height: 220px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .player-left .player-image {
    max-height: 260px !important;
    min-height: 200px !important;
  }

  .player-container .player-image,
  .player-card .player-image,
  .player-image-container .player-image,
  .player-sections .player-image,
  .mode-selector .player-image,
  img.player-image {
    height: auto !important;
    max-height: 280px !important;
    min-height: 220px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .player-image-container {
    min-height: 200px !important;
    height: auto !important;
  }

  .branding-left {
    left: 15px;
    top: 15px;
    z-index: 10;
  }

  .branding-right {
    right: 15px;
    top: 15px;
    z-index: 10;
  }

  .brand-logo {
    height: 40px;
    width: auto;
    max-width: 150px;
  }

  /* Al Hilal logo larger on home page mobile */
  .branding-left .brand-logo {
    height: 55px;
    max-width: 200px;
  }

  .branding-right .brand-logo {
    height: 40px;
    width: auto;
    max-width: 150px;
  }

  .mode-selector-content {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    padding: 20px 16px;
    width: calc(100% - 40px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    z-index: 10;
    box-sizing: border-box;
  }

  .mode-title {
    font-size: 32px;
    margin-bottom: 15px;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
    padding: 0 10px;
  }

  .mode-options {
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 0;
    padding: 0 10px;
    justify-content: center;
    overflow: hidden;
  }

  .mode-button {
    width: auto;
    max-width: 50%;
    min-width: auto;
    flex: 0 0 auto;
    background-size: 100% 100% !important;
  }

  .mode-button-text {
    padding: 18px 24px;
    width: 100%;
    box-sizing: border-box;
  }

  .mode-button-title {
    font-size: 20px;
  }

  .mode-button-subtitle {
    font-size: 16px;
  }

  .mode-button-text {
    align-items: center;
    text-align: center;
  }
  
  .mode-button-single .mode-button-text,
  .mode-button-multiplayer .mode-button-text {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  /* Player sections removed - using homepage-background-container instead */

  .homepage-background-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }

  .homepage-content-svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  
  .homepage-content-svg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  
  /* Show mobile overlay on mobile devices */
  .homepage-mobile-overlay {
    display: block;
  }
  
  .homepage-mobile-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  .player-container {
    max-width: 100%;
  }

  .player-card {
    padding: 8px 4px 0px 4px !important;
  }

  .card-triangle {
    display: none !important;
  }

  .player-image {
    max-height: 200px !important;
    min-height: 160px !important;
    height: auto !important;
  }

  .player-left .player-image,
  .player-right .player-image {
    max-height: 200px !important;
    min-height: 160px !important;
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }

  .player-left .player-image {
    max-height: 190px !important;
    min-height: 150px !important;
  }

  .mode-selector-content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    padding: 15px 12px;
    min-height: auto;
    justify-content: center;
    z-index: 10;
    width: calc(100% - 24px);
  }

  .mode-title {
    font-size: 36px;
    margin-bottom: 12px;
    padding: 0 8px;
  }

  .mode-options {
    max-width: 100%;
    width: 100%;
    gap: 0;
    padding: 0 8px;
    flex-direction: row;
    justify-content: center;
    margin-top: 0;
    overflow: hidden;
  }

  .mode-button {
    width: 200px;
    max-width: 50%;
    min-width: auto;
    flex: 0 0 auto;
    background-size: 100% 100% !important;
  }

  .mode-button-text {
    padding: 16px 20px;
  }

  .mode-button-title {
    font-size: 18px;
  }

  .mode-button-subtitle {
    font-size: 14px;
  }

  .brand-logo {
    height: 35px;
    width: auto;
    max-width: 120px;
  }

  /* Al Hilal logo larger on home page small mobile */
  .branding-left .brand-logo {
    height: 48px;
    max-width: 160px;
  }

  .branding-right .brand-logo {
    height: 35px;
    width: auto;
    max-width: 120px;
  }
}

/* Mobile Responsive for Multiplayer */
@media (max-width: 768px) {
  .award-btn-text{
    left: 54%;
  }
  body:not(.teams-mobile-rotate) .mode-options {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body:not(.teams-mobile-rotate) .mode-card {
    padding: 30px 20px;
  }

  body:not(.teams-mobile-rotate) .mode-icon {
    font-size: 48px;
  }

  body:not(.teams-mobile-rotate) .mode-card h3 {
    font-size: 20px;
  }

  body:not(.teams-mobile-rotate) .team-inputs {
    grid-template-columns: repeat(2, 1fr);
  }

  body:not(.teams-mobile-rotate) .multiplayer-scoreboard {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    padding: 20px 0;
    margin-top: 40px;
  }

  body:not(.teams-mobile-rotate) .vs-divider {
    order: 0;
    padding: 0;
    border: none;
    width: auto;
  }

  body:not(.teams-mobile-rotate) .team-points {
    font-size: 36px;
  }

  body:not(.teams-mobile-rotate) .team-lifelines {
    justify-content: center;
    gap: 8px;
  }

  body:not(.teams-mobile-rotate) .category-board {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0px;
    column-gap: 0;
    max-width: 100%;
    margin: 0 auto 0px auto;
    padding: 0;
  }

  body:not(.teams-mobile-rotate) .board-cell {
    font-size: 18px;
    padding: 12px 8px;
    min-height: 50px;
  }

  body:not(.teams-mobile-rotate) .hard-questions-row {
    row-gap: 8px;
    column-gap: 0;
    margin-bottom: 33px;
  }

  body:not(.teams-mobile-rotate) .hard-questions-row .board-cell {
    font-size: 22px;
    padding: 14px 10px;
    min-height: 12px;
    width: 100%;
    filter: none;
  }

  body:not(.teams-mobile-rotate) .question-panel-fullscreen {
    padding: 8px;
    max-width: 100vw;
    max-height: 100vh;
    height: fit-content;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body:not(.teams-mobile-rotate) .question-panel-branding {
    padding: 8px 10px;
    max-width: 100vw;
    box-sizing: border-box;
  }

  body:not(.teams-mobile-rotate) .question-panel-branding-left .question-panel-brand-logo {
    width: 20px;
    max-width: 100%;
    height: auto;
  }

  body:not(.teams-mobile-rotate) .question-panel-branding-right .question-panel-brand-logo {
    width: 65px;
    max-width: 100%;
    height: auto;
  }

  body:not(.teams-mobile-rotate) .question-content-fullscreen {
    gap: 12px;
    padding: 8px 5px;
    padding-top: 50px;
    max-width: 100vw;
    height: fit-content;
    min-height: 440px;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: visible;
  }

  body:not(.teams-mobile-rotate) .question-points-header {
    margin-top: 0;
    max-width: 100vw;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
  }

  body:not(.teams-mobile-rotate) .question-points-svg-container {
    max-width: 100%;
    box-sizing: border-box;
  }

  body:not(.teams-mobile-rotate) .question-points-svg {
    height: 25px;
    max-width: 130px;
    width: auto;
    box-sizing: border-box;
  }

  body:not(.teams-mobile-rotate) .points-value {
    right: 4px;
    font-size: 14px;
  }

  body:not(.teams-mobile-rotate) .question-text-fullscreen {
    font-size: 24px;
    padding: 0 12px;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    line-height: 1.5;
  }
  
  body:not(.teams-mobile-rotate) .question-text-container-fullscreen {
    max-width: 100vw;
    padding: 0 8px;
    box-sizing: border-box;
  }

  body:not(.teams-mobile-rotate) .question-timers-fullscreen {
    flex-direction: column;
    gap: 14px;
    padding: 20 8px;
    max-width: 100vw;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 440px;
  }

  body:not(.teams-mobile-rotate) .timer-circle {
    width: 65px;
    height: 65px;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  body:not(.teams-mobile-rotate) .timer-circle-container {
    max-width: 100%;
    box-sizing: border-box;
  }

  body:not(.teams-mobile-rotate) .timer-circle-value {
    font-size: 20px;
  }

  body:not(.teams-mobile-rotate) .timer-circle-text {
    font-size: 9px;
    max-width: 115px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.2;
  }

  body:not(.teams-mobile-rotate) .question-actions-fullscreen {
    flex-direction: row;
    gap: 0;
    padding: 0 16px;
    display: flex;
    max-width: 100vw;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }

  body:not(.teams-mobile-rotate) .btn-fullscreen {
    width: 50%;
    min-width: auto;
    min-height: 50px;
    padding: 0;
    margin: 0;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  body:not(.teams-mobile-rotate) .btn-fullscreen + .btn-fullscreen {
    margin-left: 0;
  }

  body:not(.teams-mobile-rotate) .btn-svg-image {
    max-height: 45px;
    width: auto;
    height: auto;
  }

  body:not(.teams-mobile-rotate) .timer-value {
    font-size: 22px;
  }

  body:not(.teams-mobile-rotate) .question-actions {
    flex-direction: column;
    gap: 12px;
  }

  body:not(.teams-mobile-rotate) .question-actions .btn {
    width: 100%;
    font-size: 16px;
    padding: 14px 24px;
  }

  body:not(.teams-mobile-rotate) .award-buttons {
    flex-direction: row;
    width: 100%;
    gap: 0;
  }

  body:not(.teams-mobile-rotate) .award-actions .award-btn {
    width: auto;
    flex: 0 0 auto;
    max-width: 150px;
  }

  body:not(.teams-mobile-rotate) .award-btn-svg {
    height: 50px;
    max-width: 115px;
  }

  body:not(.teams-mobile-rotate) .board-progress {
    font-size: 14px;
  }

  body:not(.teams-mobile-rotate) .winner-scores-fullscreen {
    max-width: 100%;
    gap: 0;
  }

  body:not(.teams-mobile-rotate) .winner-team-score-card {
    min-width: 150px;
    max-width: 200px;
    padding: 20px 15px;
    gap: 10px;
  }

  body:not(.teams-mobile-rotate) .winner-team-name-fullscreen {
    font-size: 18px;
  }

  body:not(.teams-mobile-rotate) .winner-team-points-fullscreen span:first-child {
    font-size: 32px;
  }

  body:not(.teams-mobile-rotate) .winner-points-label {
    font-size: 16px;
  }

  body:not(.teams-mobile-rotate) .winner-actions-fullscreen {
    max-width: 100%;
    gap: 0;
  }

  body:not(.teams-mobile-rotate) .winner-btn {
    min-width: 150px;
    max-width: 200px;
    padding: 0;
  }
  
  body:not(.teams-mobile-rotate) .winner-btn-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  body:not(.teams-mobile-rotate) .winner-trophy-image {
    width: 100px;
    height: auto;
  }

  body:not(.teams-mobile-rotate) .winner-title-fullscreen {
    font-size: 32px;
  }
}

/* Mobile Responsive for Multiplayer Question Screen - Small Mobile (480px) */
@media (max-width: 480px) {
  body:not(.teams-mobile-rotate) .question-panel-fullscreen {
    padding: 6px;
  }

  .timer-text-line1{
    font-size: 18px
  }

  .timer-text-line2{
    font-size: 20px
  }


  body:not(.teams-mobile-rotate) .question-panel-branding {
    padding: 6px 8px;
  }

  body:not(.teams-mobile-rotate) .question-panel-branding-left .question-panel-brand-logo {
    width: 18px;
  }

  body:not(.teams-mobile-rotate) .question-panel-branding-right .question-panel-brand-logo {
    width: 55px;
  }

  body:not(.teams-mobile-rotate) .question-content-fullscreen {
    gap: 10px;
    padding: 6px 4px;
    padding-top: 45px;
    margin-top: -150px;
  }

  body:not(.teams-mobile-rotate) .question-points-header {
    padding: 0 4px;
  }

  body:not(.teams-mobile-rotate) .question-points-svg {
    height: 40px;
    max-width: 140px;
  }

  body:not(.teams-mobile-rotate) .points-value {
    font-size: 14px;
  }

  body:not(.teams-mobile-rotate) .question-text-fullscreen {
    font-size: 22px;
    padding: 0 10px;
  }
  
  body:not(.teams-mobile-rotate) .question-text-container-fullscreen {
    padding: 0 6px;
  }

  body:not(.teams-mobile-rotate) .question-timers-fullscreen {
    gap: 12px;
    padding: 0 6px;
  }

  body:not(.teams-mobile-rotate) .timer-circle {
    width: 55px;
    height: 55px;
  }

  body:not(.teams-mobile-rotate) .timer-circle-value {
    font-size: 18px;
  }

  body:not(.teams-mobile-rotate) .timer-circle-text {
    font-size: 8px;
    max-width: 100px;
  }

  body:not(.teams-mobile-rotate) .question-actions-fullscreen {
    padding: 0 12px;
    gap: 0;
  }

  body:not(.teams-mobile-rotate) .btn-fullscreen {
    min-height: 45px;
    padding: 0;
    margin: 0;
  }
  
  body:not(.teams-mobile-rotate) .btn-fullscreen + .btn-fullscreen {
    margin-left: 0;
  }

  body:not(.teams-mobile-rotate) .btn-svg-image {
    max-height: 60px;
  }
}

/* ============================================
   SINGLE PLAYER MODE - NEW DESIGN
   ============================================ */

.single-player-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 100;
  overflow: hidden;
  font-family: 'Tawuniya', sans-serif;
  box-sizing: border-box;
  opacity: 0;
}

.single-player-page.showing {
  animation: fadeInSinglePlayer 0.5s ease-in forwards;
}

.single-player-page.hiding {
  animation: fadeOutSinglePlayer 0.5s ease-out forwards;
}

@keyframes fadeInSinglePlayer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutSinglePlayer {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.single-player-page:has(.sp-results-container) {
  background: #6B47F3;
}

/* Prevent body overflow on mobile */
@media (max-width: 768px) {
  body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  html {
    overflow: hidden;
    height: 100%;
  }
}

/* Header Branding */
.sp-header-branding {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 32px;
  z-index: 10;
  direction: ltr;
}

.sp-branding-left {
  position: relative;
  order: 1;
}

.sp-branding-right {
  position: relative;
  order: 2;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sp-branding-right:hover {
  opacity: 0.8;
}

.sp-brand-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.sp-branding-left .sp-brand-logo {
  width: 40px;
}

.sp-branding-right .sp-brand-logo {
  width: 180px;
}

/* Main Content */
.sp-main-content {
  padding: 80px 40px 20px;
  max-width: 1400px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

/* Title Section */
.sp-title-section {
  text-align: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.sp-main-title {
  font-size: 36px;
  font-weight: 500;
  color: #6B47F3;
  margin: 0 0 8px 0;
  text-shadow: none;
}

.sp-subtitle {
  font-size: 16px;
  color: rgba(107, 71, 243, 0.9);
  margin: 0;
}

/* Centered Content: Question, Timer, Options */
.sp-centered-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex: 1;
  min-height: 0;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Left Container: Question + Points - REMOVED */
/* Right Container: Timer + Options - REMOVED */

/* Timer Container */
.sp-timer-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  order: 2;
}

/* Options Container */
.sp-options-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  order: 3;
}

.sp-timer-label {
  font-size: 24px;
  color: rgba(107, 71, 243, 0.9);
  margin-bottom: 0;
}

.sp-timer-circle {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-timer-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sp-timer-ring-bg {
  fill: none;
  stroke: rgba(107, 71, 243, 0.2);
  stroke-width: 8;
}

.sp-timer-ring-progress {
  fill: none;
  stroke: #6B47F3;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s linear;
}

.sp-timer-number {
  font-size: 28px;
  font-weight: 500;
  color: #6B47F3;
  z-index: 1;
}

.sp-timer-total {
  font-size: 24px;
  color: rgba(107, 71, 243, 0.9);
  margin-top: 0;
  direction: ltr;
}

.sp-timer-total .timer-sec-text {
  font-size: 16px;
}

/* Question Placeholder */
.sp-question-placeholder {
  font-size: 48px;
  color: rgba(107, 71, 243, 0.9);
  text-align: center;
  min-height: 80px;
  line-height: 1.4;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  width: 100%;
  order: 1;
}

.sp-points-badge-wrapper {
  position: absolute;
  bottom: 20px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: row-reverse;
  z-index: 10;
}

.sp-points-svg-container {
  position: relative;
  display: inline-block;
}

.sp-points-svg {
  height: 60px;
  max-width: 220px;
  display: block;
  margin-top: -1px; /* Hide subtle grey line at the top edge of the SVG */
}

.sp-points-value {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  font-family: 'Tawuniya', sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: #ffffff;
}

.sp-form-root {
  width: 100%;
}

.sp-main-content {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.sp-main-content.sp-slide-out {
  opacity: 0;
  transform: translateX(-30px);
}

.sp-main-content.sp-slide-in {
  opacity: 0;
  transform: translateX(30px);
}

/* Answer Options - New Design */
.sp-choice-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 12px;
  column-gap: 0;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 440px;
}

.sp-choice {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: calc(100% + 0.5px);
  max-width: 220px;
}


.sp-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sp-choice-svg-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-choice-svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.sp-choice-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  word-wrap: break-word;
  max-width: 80%;
  z-index: 1;
  pointer-events: none;
}

/* Selected State */
.sp-choice input[type="radio"]:checked ~ .sp-choice-svg-container .sp-choice-svg {
  filter: brightness(1.1);
}

.sp-choice input[type="radio"]:checked ~ .sp-choice-svg-container .sp-choice-label {
  color: #ffffff;
  font-weight: 400;
}


/* Third option when there are exactly 3 options - make it slightly smaller and centered */
.sp-choice-list .sp-choice:nth-child(3):nth-last-child(1) {
  max-width: 200px;
  grid-column: 1 / -1;
  justify-self: center;
}

/* Navigation */
.sp-navigation {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
  flex-shrink: 0;
  z-index: 10;
  flex-direction: row;
  align-items: center;
}

.sp-back-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #6B47F3;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 0;
  font-size: 24px;
}

.sp-question-number {
  font-family: 'Tawuniya', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(107, 71, 243, 0.9);
  padding: 8px 12px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ============================================
   RESULTS PAGE - NEW DESIGN
   ============================================ */

.sp-results-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px 20px 40px 20px;
  text-align: center;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
  background: #6B47F3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* White logos on results page - handled via JavaScript */

.sp-results-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.sp-results-icon {
  margin-bottom: 20px;
}

.sp-rank-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.sp-rank-icon-small {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 8px;
}

.sp-rank-emoji-fallback {
  font-size: 80px;
  line-height: 1;
}

.sp-results-title {
  font-size: 36px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  word-wrap: break-word;
  max-width: 100%;
}

.sp-results-message {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.3;
}

.sp-results-score {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.sp-results-score strong {
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
}

.sp-results-score-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 10px 0;
}

.sp-results-score-container {
  position: relative;
  display: inline-block;
}

.sp-results-score-svg {
  height: 51px;
  width: auto;
  display: block;
  object-fit: contain;
}

.sp-results-score-value {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-family: 'Tawuniya', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: rgba(107, 71, 243, 1);
  pointer-events: none;
  white-space: nowrap;
}

.sp-score-label {
  width: auto;
  height: 51px;
  display: block;
  object-fit: contain;
}

.sp-score-connector {
  width: 4px;
  height: 2px;
  background: rgba(107, 71, 243, 1);
  margin: 0 2px;
}

.sp-score-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(107, 71, 243, 1);
  font-size: 20px;
  font-weight: 300;
  font-family: 'Tawuniya', sans-serif;
}

.sp-achievement-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 50px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  font-family: 'Tawuniya', sans-serif;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 10px;
  transition: all 0.3s ease;
}

.sp-achievement-button span {
  vertical-align: top;
  padding-left: 8px;
}

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

.sp-share-section {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
}

.sp-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 500px;
  padding: 16px 32px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 500;
  font-family: 'Tawuniya', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.sp-share-button:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.sp-share-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Responsive Design for Results Page */
@media (max-width: 768px) {
  .sp-results-container {
    padding: 20px 10px 30px 10px;
    height: calc(100vh - 80px);
    justify-content: center;
    overflow-y: auto;
  }
  
  .sp-results-content {
    gap: 8px;
    padding: 0 10px;
    max-width: 100%;
  }
  
  .sp-results-title {
    font-size: 24px;
    margin: 5px 0;
  }
  
  .sp-results-message {
    font-size: 16px;
    margin: 0;
  }
  
  .sp-results-score {
    font-size: 16px;
  }
  
  .sp-results-score strong {
    font-size: 20px;
  }
  
  .sp-rank-icon {
    width: 80px;
    height: 80px;
  }
  
  .sp-percentages-svg {
    max-width: 100%;
    margin: 10px 0;
    padding: 0 10px;
  }
  
  .sp-scale-indicator {
    margin: 10px auto;
    gap: 6px;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  
  .sp-scale-title {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 6px;
  }
  
  .sp-scale-line-wrapper {
    width: 90%;
    max-width: 90%;
    height: 4px;
    padding: 0 15px;
    box-sizing: border-box;
  }
  
  .sp-scale-arrow {
    max-width: 28px;
    max-height: 14px;
    top: -7px;
  }
  
  .sp-scale-arrow.arrow-left {
    left: calc(100% - 28px);
  }
  
  .sp-scale-arrow.arrow-right {
    left: 12px;
  }
  
  .sp-scale-indicator {
    align-items: center;
    padding: 0 5px;
  }
  
  .sp-scale-ranges {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .sp-scale-range {
    width: 104px !important;
    height: 65px !important;
    padding: 3px 4px !important;
    gap: 3px !important;
    flex: 0 0 104px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .sp-scale-range.active {
    height: 65px !important;
  }
  
  .sp-range-text {
    font-size: 16px !important;
    height: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: auto !important;
  }
  
  .sp-range-face {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  
  .sp-results-score-display {
    margin: 8px 0;
    gap: 4px;
  }
  
  .sp-score-number {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .sp-score-label {
    padding: 2px 40px;
    font-size: 18px;
    width: auto;
    height: 40px;
  }
  
  .sp-score-connector {
    width: 3px;
    height: 2px;
  }
  
  .sp-achievement-button {
    font-size: 18px;
    padding: 12px 20px;
    margin-top: 8px;
  }
  
  .sp-share-section {
    margin-top: 15px;
    width: 100%;
    max-width: 100%;
  }
  
  .sp-share-button {
    font-size: 14px;
    padding: 12px 20px;
    max-width: 100%;
    gap: 8px;
  }
  
  .sp-share-icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .sp-results-container {
    padding: 15px 8px 25px 8px;
    height: calc(100vh - 60px);
    justify-content: center;
  }
  
  .sp-results-content {
    gap: 6px;
    padding: 0 8px;
    margin-bottom: 50px;
  }
  
  .sp-results-title {
    font-size: 20px;
    margin: 4px 0;
  }
  
  .sp-results-message {
    font-size: 14px;
  }
  
  .sp-percentages-svg {
    max-width: 100%;
    margin: 8px 0;
    padding: 0 8px;
  }
  
  .sp-scale-indicator {
    margin: 8px auto;
    gap: 4px;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  
  .sp-scale-title {
    font-size: 24px;
    font-weight: 400;
  }
  
  .sp-scale-line-wrapper {
    max-width: 85%;
    width: 85%;
    height: 6px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  
  .sp-scale-arrow {
    max-width: 24px;
    max-height: 12px;
    top: -5px;
  }
  
  .sp-scale-arrow.arrow-left {
    left: calc(100% - 23px);
  }
  
  .sp-scale-arrow.arrow-right {
    left: 10px;
  }
  
  .sp-scale-indicator {
    align-items: center;
    padding: 0 5px;
  }
  
  .sp-scale-ranges {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .sp-scale-range {
    width: 104px !important;
    height: 65px !important;
    padding: 3px 4px !important;
    gap: 3px !important;
    flex: 0 0 104px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .sp-scale-range.active {
    height: 65px !important;
  }
  
  .sp-range-text {
    font-size: 16px !important;
    height: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: auto !important;
  }
  
  .sp-range-face {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  
  .sp-results-score-display {
    margin: 6px 0;
  }
  
  .sp-score-number {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .sp-score-label {
    padding: 2px 30px;
    font-size: 16px;
    height: 35px;
  }
  
  .sp-share-button {
    font-size: 13px;
    padding: 10px 16px;
    margin-bottom: 100px;
  }
}

/* Scale Indicator - Replaced with SVG */
.sp-percentages-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 15px 0;
  display: block;
  object-fit: contain;
}

/* Old Scale Indicator CSS - No longer used, kept for reference */
.sp-scale-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
}

.sp-scale-title {
  font-size: 80px;
  font-weight: 200;
  color: #ffffff;
  font-family: 'Tawuniya', sans-serif;
  margin-bottom: 8px;
  text-align: center;
}

.sp-scale-line-wrapper {
  position: relative;
  width: 700px;
  max-width: 100%;
  height: 15px;
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0.8;
  padding: 2px 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.sp-scale-line {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ffffff;
}

.sp-scale-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
  width: 2px;
  height: 10px;
  background: #ffffff;
}

.sp-scale-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0px;
  width: 2px;
  height: 10px;
  background: #ffffff;
}

.sp-scale-arrow {
  position: absolute;
  top: -10px;
  width: auto;
  height: auto;
  max-width: 48px;
  max-height: 24px;
  transform: translateX(-50%);
  object-fit: contain;
}

.sp-scale-arrow.arrow-left {
  left: calc(100% - 48px);
}

.sp-scale-arrow.arrow-center {
  left: 50%;
  transform: translateX(-50%);
}

.sp-scale-arrow.arrow-right {
  left: 22px;
}

.sp-scale-ranges {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
}

.sp-scale-range {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #ffffff;
  border: 3px solid rgba(255, 255, 255, 1);
  border-image: none;
  width: 161px;
  height: 80px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  color: rgba(107, 71, 243, 1);
}

.sp-scale-range.active {
  background: #392765;
  border: 3px solid rgba(57, 39, 101, 1);
  border-image: none;
  color: rgba(107, 71, 243, 1);
  height: 80px;
}


.sp-range-text {
  font-size: 24px;
  font-weight: 400;
  font-family: 'Tawuniya', sans-serif;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0.8;
  width: 100%;
  height: 15px;
  padding: 2px 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 32px;
  box-sizing: border-box;
}

.sp-scale-range.active .sp-range-text {
  color: #ffffff;
}

.sp-scale-range:not(.active) .sp-range-text {
  color: rgba(107, 71, 243, 1);
}

.sp-range-face {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sp-main-content {
    padding: 60px 12px 20px;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .sp-header-branding {
    padding: 12px 16px;
  }

  .sp-brand-logo {
    width: 50px;
  }
  
  .sp-branding-left .sp-brand-logo {
    width: 45px;
  }
  
  .sp-branding-right .sp-brand-logo {
    width: 100px;
  }

  .sp-main-title {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .sp-subtitle {
    font-size: 14px;
  }

  .sp-title-section {
    margin-bottom: 12px;
  }

  .sp-timer-points-section {
    grid-template-columns: 1fr;
    gap: 20px;
    direction: ltr;
  }

  .sp-main-containers {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sp-centered-content {
    gap: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  .sp-question-placeholder {
    order: 1;
    font-size: 18px;
    margin: 6px 0;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    line-height: 1.3;
  }

  .sp-timer-container {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
  }

  .sp-options-container {
    order: 3;
    width: 100%;
    margin-top: 0;
    flex: 0 0 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sp-points-badge-wrapper {
    bottom: 20px;
    right: 5px;
  }

  .sp-points-svg {
    height: 45px;
    max-width: 165px;
  }

  .sp-points-value {
    font-size: 18px;
    right: 7px;
  }

  .sp-navigation {
    bottom: 10px;
    left: 10px;
  }

  /* Make options smaller and fit viewport */
  .sp-choice-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
    column-gap: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .sp-choice {
    max-width: 100%;
    width: 100%;
  }

  .sp-choice-list .sp-choice:nth-child(3):nth-last-child(1) {
    max-width: 180px;
    transform: scale(0.95);
  }

  .sp-choice-label {
    font-size: 14px;
    height: 48px;
    line-height: 1.3;
    padding: 4px 8px;
    box-sizing: border-box;
  }

  .sp-choice-number {
    width: 36px;
    min-width: 36px;
    font-size: 20px;
    height: 48px;
    line-height: 1;
  }

  /* Make timer smaller */
  .sp-timer-circle {
    width: 70px;
    height: 70px;
  }

  .sp-timer-number {
    font-size: 20px;
  }

  .sp-timer-label {
    font-size: 16px;
  }

  .sp-timer-total {
    font-size: 16px;
  }

  .sp-timer-total .timer-sec-text {
    font-size: 12px;
  }

  .sp-timer-ring-bg,
  .sp-timer-ring-progress {
    stroke-width: 5;
  }

  /* Points button and badge on mobile */
  .sp-points-button {
    font-size: 20px;
    padding: 6px 14px;
  }

  .sp-points-badge {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .sp-navigation {
    gap: 12px;
    padding-top: 15px;
  }

  .sp-question-number {
    font-size: 16px;
    padding: 6px 10px;
  }

  /* Team Setup Mobile Styles */
  .mp-header-branding {
    padding: 16px 20px;
  }

  .mp-brand-logo {
    width: 120px;
  }

  .mp-branding-left .mp-brand-logo {
    width: 35px;
  }

  .mp-branding-right .mp-brand-logo {
    width: 120px;
  }

  .team-setup {
    padding: 100px 20px 30px 20px;
  }

  .team-setup-title {
    font-size: 36px;
    margin-bottom: 16px;
  }

  .team-setup-instructions {
    font-size: 16px;
    margin-bottom: 30px;
    padding: 0 10px;
  }

  .team-inputs {
    gap: 16px;
    margin-bottom: 30px;
  }

  .team-input-label {
    font-size: 16px;
  }

  .team-input {
    padding: 14px 16px;
    font-size: 18px;
  }

  .team-start-button {
    font-size: 20px;
    padding: 14px 30px;
  }
}

/* Team Setup Mobile Styles - 480px */
@media (max-width: 480px) {
  .mp-header-branding {
    padding: 12px 16px;
  }

  .mp-brand-logo {
    width: 100px;
  }

  .mp-branding-left .mp-brand-logo {
    width: 30px;
  }

  .mp-branding-right .mp-brand-logo {
    width: 100px;
  }

  .team-setup {
    padding: 90px 16px 24px 16px;
  }

  .team-setup-title {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .team-setup-instructions {
    font-size: 14px;
    margin-bottom: 24px;
    padding: 0 8px;
  }

  .team-inputs {
    gap: 12px;
    margin-bottom: 24px;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
  }

  .team-inputs::before {
    display: none;
  }

  .team-input-label {
    font-size: 14px;
  }

  .team-input {
    padding: 6px 14px;
    font-size: 16px;
  }

  .team-start-button {
    font-size: 18px;
    padding: 12px 24px;
  }

  .sp-back-button {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* Extra small screens - further reduce sizes */
@media (max-width: 480px) {
  .winner-content-fullscreen{
    margin-top: 100px;
  }
  .current-turn{
    right: -6px
  }
  .sp-scale-line-wrapper{
    width: 300px
  }

  .sp-scale-title{
    font-size: 60px;
  }

  .sp-main-content {
    padding: 50px 10px 15px;
    height: 77vh;
  }

  .sp-header-branding {
    padding: 10px 12px;
  }

  .sp-brand-logo {
    width: 45px;
  }
  
  .sp-branding-left .sp-brand-logo {
    width: 30px;
  }
  
  .sp-branding-right .sp-brand-logo {
    width: 120px;
  }

  .sp-main-title {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .sp-subtitle {
    font-size: 12px;
  }

  .sp-title-section {
    margin-bottom: 8px;
  }

  .sp-centered-content {
    gap: 15px;
    padding: 8px;
  }

  .sp-timer-container {
    margin-bottom: 4px;
  }

  .sp-timer-circle {
    width: 60px;
    height: 60px;
  }

  .sp-timer-number {
    font-size: 18px;
  }

  .sp-timer-label {
    font-size: 14px;
  }

  .sp-timer-total {
    font-size: 14px;
  }

  .sp-timer-total .timer-sec-text {
    font-size: 11px;
  }

  .sp-timer-ring-bg,
  .sp-timer-ring-progress {
    stroke-width: 4;
  }

  .sp-question-placeholder {
    font-size: 16px;
    margin: 4px 0;
    padding: 0 6px;
    line-height: 1.2;
  }

  .sp-points-badge-wrapper {
    bottom: 15px;
    right: 5px;
  }

  .sp-points-svg {
    height: 40px;
    max-width: 150px;
  }

  .sp-points-value {
    font-size: 16px;
    right: 3px;
    text-align: center;
  }

  .sp-navigation {
    bottom: 8px;
    right: 8px;
  }

  .sp-points-button {
    font-size: 18px;
    padding: 5px 12px;
  }

  .sp-points-badge {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }

  .sp-options-container {
    margin-top: 4px;
    padding: 0 2px;
  }

  .sp-choice-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    column-gap: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .sp-choice {
    max-width: 100%;
    width: 100%;
  }

  .sp-choice-list .sp-choice:nth-child(3):nth-last-child(1) {
    max-width: 170px;
    transform: scale(0.95);
  }

  .sp-choice-label {
    font-size: 14px;
    height: 24px;
    padding: 4px 6px;
  }

  .sp-choice-number {
    width: 32px;
    min-width: 32px;
    font-size: 18px;
    height: 44px;
  }

  .sp-navigation {
    bottom: 8px;
    left: 8px;
    gap: 10px;
  }

  .sp-question-number {
    font-size: 14px;
    padding: 5px 8px;
  }

  .sp-back-button {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}