/* ========================================
 CSS VARIABLES & ROOT STYLES
 ======================================== */

 :root {
  /* ==== SEMANTIC COLOR SYSTEM ==== */
  /* Following 60-30-10 rule for visual balance */
  
  /* Base Colors (60% - Dominant backgrounds) */
  --color-base-dark: #1a1a2e;  /* Softer than pure black for eye comfort */
  --color-base-light: #f5f3f0; /* Warm off-white instead of stark white */
  
  /* Primary Colors (30% - Key UI areas) */
  --color-primary-dark: #252542;
  --color-primary-light: #fdfcfa;
  
  /* Accent Colors (10% - CTAs and highlights) */
  --color-accent-primary: #f00842;    /* Green for primary actions */
  --color-accent-success: #28a745;    /* Consistent green */
  --color-accent-warning: #ffc947;    /* Warm yellow */
  --color-accent-error: #ff6b6b;      /* Soft red, less aggressive */
  --color-accent-special: #a78bfa;    /* Purple for special achievements */
  --color-accent-info: #00d9ff;       /* Cyan for information */
  
  /* Semantic Color Mapping */
  --color-positive-feedback: #4ecb71;
  --color-negative-feedback: #ff6b6b;
  --color-neutral-action: #4ecb71;    /* Changed from cyan to green */
  --color-informational: #00d9ff;      /* Cyan for info */
  --color-achievement: #ffc947;
  
  /* Dark Mode (Default) */
  --bg-color: var(--color-base-dark);
  --container-bg: #2a2a4e;  /* Slightly purple tint for friendliness */
  --text-color-primary: #f0f0f7;
  --text-color-secondary: #b8b8d0;
  --border-color: #4a4a6e;
  --seat-bg: #353562;
  --seat-completed-bg: #2a5749;
  --seat-completed-border: var(--color-positive-feedback);
  --seat-absent-bg: #3d3d5c;
  --seat-absent-border: #5a5a7a;
  --keypad-bg: #3f3f6a;
  --keypad-hover-bg: #4f4f7a;
  --btn-primary-bg: var(--color-accent-primary);
  --btn-primary-hover: #00b8e6;
  --btn-cancel-bg: var(--color-accent-error);
  --btn-cancel-hover: #ff5252;
  --seat-active-text: var(--color-accent-warning);
  --leaderboard-gold: #ffd700;
  --leaderboard-silver: #c0c0c0;
  --leaderboard-bronze: #cd7f32;
  --leaderboard-blue: #60a5fa;
  --leaderboard-green: var(--color-positive-feedback);
  
  /* Typography Scale */
  --font-size-xs: 0.875rem;    /* 14px */
  --font-size-sm: 1rem;        /* 16px */
  --font-size-base: 1.125rem;  /* 18px - Optimized for children */
  --font-size-lg: 1.5rem;      /* 24px */
  --font-size-xl: 2rem;        /* 32px */
  --font-size-2xl: 2.5rem;     /* 40px */
  --font-size-3xl: 3rem;       /* 48px */
  
  /* Spacing Scale */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.25rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  
  /* Animation Timing */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 350ms ease-out;
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Shadows for depth */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3);
}

body.light-mode {
  --bg-color: #f5f3f0; /* Warm off-white instead of bright white */
  --container-bg: #fdfcfa; /* Slightly warmer white */
  --text-color-primary: #3a3a4a; /* Softer dark text */
  --text-color-secondary: #6a6a7e;
  --border-color: #e0d5d8; /* Softer borders with burgundy tint */
  --seat-bg: #f5f0f2; /* Light with burgundy undertone */
  --seat-completed-bg: #e8f5e9;
  --seat-completed-border: #43a047;
  --seat-absent-bg: #e8e8ed;
  --seat-absent-border: #c0c0c5;
  --keypad-bg: #ede5e8; /* Soft purple-pink */
  --keypad-hover-bg: #e3d5da;
  --btn-primary-bg: #f00842;
  --btn-primary-hover: #00b8e6;
  --btn-cancel-bg: #e74c3c;
  --btn-cancel-hover: #c0392b;
  --seat-active-text: #ff9800;
  --shadow-sm: 0 2px 4px rgba(240, 8, 66, 0.08);
  --shadow-md: 0 4px 8px rgba(240, 8, 66, 0.12);
  --shadow-lg: 0 8px 16px rgba(240, 8, 66, 0.15);
  --shadow-glow: 0 0 20px rgba(240, 8, 66, 0.25);
}

body.battle-mode-active,
body.light-mode.battle-mode-active {
  /* Battle mode with exciting golden theme */
  --bg-color: #fff8dc;
  --container-bg: #fffef5;
  --seat-bg: #fff9e6;
  --text-color-primary: #2d2d3a;
  --text-color-secondary: #5a5a6e;
  --border-color: #ffe4b5;
  --keypad-bg: #ffefd5;
  --keypad-hover-bg: #ffe4b5;
  --btn-primary-bg: #ffa500;
  --btn-primary-hover: #ff8c00;
  --shadow-glow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* ========================================
   GLOBAL RESET & BASE STYLES
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Andika', 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-base);
  line-height: 1.6;
  background-color: var(--bg-color);
  color: var(--text-color-primary);
  transition: all var(--transition-slow);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0.5rem;
  margin: 0;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
LAYOUT & CONTAINER STYLES
======================================== */

.container {
  background: var(--container-bg);
  border-radius: 2rem;
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  width: min(95vw, 75rem);
  max-width: 75rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.container::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;;
  opacity: 0.05;
  pointer-events: none;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.classroom-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: 0;
}

.layout-column {
display: flex;
flex-direction: column;
gap: 1.25rem; /* 20px */
}

.container::after,
.modal-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.01) 35px,
      rgba(255, 255, 255, 0.01) 70px
    );
  pointer-events: none;
  z-index: 1;
}

/* ========================================
SCREEN STATES & TRANSITIONS
======================================== */

.selection-screen,
.test-screen,
.finish-screen {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-slow);
}

.selection-screen.active,
.test-screen.active,
.finish-screen.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.test-screen.active,
.finish-screen.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
}

.finish-screen.active {
  justify-content: flex-start;
}

/* ========================================
TYPOGRAPHY
======================================== */

#mainHeader {
  font-size: clamp(var(--font-size-xl), 5vw + 1rem, var(--font-size-2xl));
  font-weight: 800;
  margin-bottom: var(--space-md);
  text-align: center;
  color: var(--text-color-primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: -0.02em;
}

h1, h2, h3 {
  text-align: center;
  color: var(--text-color-primary);
  line-height: 1.3;
}

h1 {
  font-weight: 700;
  margin-bottom: var(--space-xl);
}

h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

p {
  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
}

/* ========================================
BUTTON STYLES
======================================== */

.btn {
  background: linear-gradient(135deg, var(--btn-primary-bg) 0%, var(--btn-primary-hover) 100%);
  color: white;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  margin: var(--space-xs) var(--space-sm);
  transition: all var(--transition-base);
  width: 90%;
  max-width: 15.625rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform var(--transition-slow);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

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

.btn:disabled {
  background: linear-gradient(135deg, #cccccc 0%, #aaaaaa 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-cancel {
  background: linear-gradient(135deg, var(--btn-cancel-bg) 0%, var(--btn-cancel-hover) 100%);
}

.btn-save {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.btn-reset {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.btn:hover:not(:disabled) {
  background-color: var(--btn-primary-hover);
  /* On hover, the button lifts up slightly */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-cancel:hover:not(:disabled) {
  background-color: var(--btn-cancel-hover);
}

.btn-cancel:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #ab2328;
}

.btn-cancel:hover {
background-color: var(--btn-cancel-hover);
}

/* Dark mode toggle button */
#darkModeToggle {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--seat-bg);
  border: 3px solid var(--border-color);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

#darkModeToggle:hover {
  transform: scale(1.1) rotate(20deg);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-primary);
}

body.battle-mode-active #darkModeToggle { 
  display: none; 
}

#darkModeToggle .icon-moon { display: none; }
#darkModeToggle .icon-sun { display: block; }
body.light-mode #darkModeToggle .icon-moon { display: block; }
body.light-mode #darkModeToggle .icon-sun { display: none; }

/* Log in/out button */
#authBtn {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  background: var(--seat-bg);
  border: 3px solid var(--border-color);
  border-radius: 1.5rem;
  padding: var(--space-xs) var(--space-lg);
  height: 3rem;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

#authBtn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-primary);
}

/* Auth button icon states */
#authBtn .icon-login { display: none; }
#authBtn .icon-logout { display: block; }
body.logged-out #authBtn .icon-login { display: block; }
body.logged-out #authBtn .icon-logout { display: none; }

/* ========================================
STUDENT SEATS & TABLE GROUPS
======================================== */

.table-group {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: var(--space-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  transition: all var(--transition-base);
  min-height: 12.5rem;
  border: 1px solid var(--border-color);
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  height: 100%;
}

.student-seat {
  height: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border-color);
  border-radius: var(--space-md);
  cursor: pointer;
  transition: all var(--transition-base);
  background: linear-gradient(135deg, var(--seat-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
  position: relative;
  user-select: none;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.student-seat::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--color-accent-primary) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.student-seat:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-primary);
}

.student-seat:hover::before {
  opacity: 0.1;
}

.student-seat.completed {
  background: linear-gradient(135deg, var(--seat-completed-bg) 0%, rgba(78, 203, 113, 0.2) 100%);
  border-color: var(--seat-completed-border);
  border-width: 3px;
  cursor: pointer;
  animation: completedPulse 2s ease-in-out infinite;
}

.student-seat.completed::after {
  content: '✓';
  position: absolute;
  top: 0.3125rem; /* 5px */
  right: 0.3125rem; /* 5px */
  color: var(--seat-completed-border);
  font-size: 1.25rem; /* 20px */
  font-weight: bold;
  }

@keyframes completedPulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 20px rgba(78, 203, 113, 0.5); }
}

@keyframes checkBounce {
  0% { transform: scale(0) rotate(-180deg); }
  50% { transform: scale(1.3) rotate(20deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes activePulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 20px rgba(255, 201, 71, 0.6); } /* Pulses with the warning/active yellow color */
}

.student-seat.is-active,
.student-seat.is-active:hover {
  background: linear-gradient(135deg, rgba(255, 201, 71, 0.2) 0%, rgba(255, 201, 71, 0.05) 100%);
  transform: none;
  border-color: var(--color-accent-warning); /* Changed border to match the pulse */
  cursor: default;
  animation: activePulse 2s ease-in-out infinite; /* Added the new pulse animation */
}

.student-seat.is-active .test-level {
  flex-grow: 1;
}

.student-seat.absent {
  background: linear-gradient(135deg, var(--seat-absent-bg) 0%, rgba(150, 150, 150, 0.1) 100%);
  border-color: var(--seat-absent-border);
  opacity: 0.7;
}

.student-seat.absent .student-name,
.student-seat.absent .test-level {
color: var(--text-color-secondary);
text-decoration: line-through;
}

.student-seat[draggable="true"] {
  cursor: grab;
  opacity: 0.9;
  }

.student-seat.dragging {
  opacity: 0.7; /* Increased from 0.4 so it's more visible */
  transform: scale(0.95) rotate(5deg); /* Slightly less dramatic scale */
}

.drag-over {
border: 0.125rem dashed var(--btn-primary-bg); /* 2px */
transform: scale(1.05);
}

.student-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  text-align: center;
  color: var(--text-color-primary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.crown-indicator {
  font-size: 1.75rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: crownFloat 3s ease-in-out infinite;
}

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

.test-level {
font-size: 0.75rem; /* 12px */
font-weight: lighter;
color: var(--text-color-secondary);
margin-top: 0.3125rem; /* 5px */
pointer-events: none;
}

@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-0.3125rem); } /* 5px */
}

.student-seat.is-active .student-name { color: var(--seat-active-text); }
.student-seat.is-active .student-name span {
display: inline-block;
animation: wave 1.2s infinite;
}

.student-status-message {
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--seat-active-text);
  margin-top: var(--space-xs);
  font-weight: 600;
  animation: fadeInUp 0.5s var(--animation-bounce);
}

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

.empty-seat {
  height: 5.5rem;
  border: 3px dashed var(--border-color);
  border-radius: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.5;
}

/* ========================================
LEADERBOARD STYLES
======================================== */

#leaderboardAndControlsWrapper {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  justify-content: center;
}

#leaderboardContainer h3 {
  font-size: var(--font-size-lg);
  font-weight: 800;
  margin-bottom: var(--space-sm);
  color: var(--color-accent-primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.leaderboard-lists-wrapper {
  height: 10rem;
  overflow-y: auto;
  position: relative;
  padding-right: var(--space-xs);
}

#leaderboardContainer {
  padding-right: 0.625rem; /* 10px */
  }

/* Custom scrollbar */
.leaderboard-lists-wrapper::-webkit-scrollbar {
  width: 8px;
}

.leaderboard-lists-wrapper::-webkit-scrollbar-track {
  background: var(--seat-bg);
  border-radius: 4px;
}

.leaderboard-lists-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-accent-primary);
  border-radius: 4px;
}

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

.leaderboard-view li {
  display: flex;
  align-items: center;
  padding: 0.02rem var(--space-sm);
  margin-bottom: 0.25rem; /* 4px */
  border-radius: var(--space-sm);
  background: var(--seat-bg);
  border: 2px solid var(--border-color);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.leaderboard-view li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border-color);
  transition: width var(--transition-base);
}

.leaderboard-view li:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.leaderboard-view li:hover::before {
  width: 8px;
}

.leaderboard-view li.rank-1 {
  border-color: var(--leaderboard-gold);
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
}

.leaderboard-view li.rank-1::before {
  background: var(--leaderboard-gold);
}

.leaderboard-view li.rank-2 {
  border-color: var(--leaderboard-blue);
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, transparent 100%);
}

.leaderboard-view li.rank-2::before {
  background: var(--leaderboard-blue);
}

.leaderboard-view li.rank-3 {
  border-color: var(--leaderboard-bronze);
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 100%);
}

.leaderboard-view li.rank-3::before {
  background: var(--leaderboard-bronze);
}

.leaderboard-rank {
  font-weight: 900;
  font-size: var(--font-size-base);
  color: var(--seat-active-text);
  width: 2rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.leaderboard-name {
  flex-grow: 1;
  padding: 0 var(--space-md);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.leaderboard-score {
  font-weight: 800;
  font-size: var(--font-size-base);
  background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-informational) 100%);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 1rem;
  min-width: 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.rank-color-1 { color: var(--leaderboard-gold); }
.rank-color-2 { color: var(--leaderboard-blue); }
.rank-color-3 { color: var(--leaderboard-green); }
.rank-color-other { color: var(--text-color-secondary); }

/* ========================================
TEST INTERFACE STYLES
======================================== */
.test-content-wrapper,
.finish-content-wrapper {
  width: 100%;
  max-width: 60rem; /* Increased from 48rem to use more space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Changed from space-between to center */
  position: relative;
  padding: var(--space-xl) var(--space-lg); /* Added horizontal padding */
  padding-top: 6rem; /* Add extra top padding to account for absolute progress */
  min-height: 85vh; /* Ensure it takes most of the viewport height */
  gap: var(--space-xl); /* Add consistent spacing between elements */
}

.question-display {
  text-align: center;
  font-size: clamp(var(--font-size-xl), 8vw + 1rem, 6rem);
  font-weight: 800;
  color: var(--text-color-primary);
  min-height: 6rem;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-slow);
  position: relative;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--space-lg);
  backdrop-filter: blur(10px);
}

.question-display.blurred {
  filter: blur(20px);
  transform: scale(1.1);
  opacity: 0.5;
}

.answer-display {
  text-align: center;
  font-size: clamp(var(--font-size-xl), 4vw + 1rem, var(--font-size-3xl));
  font-weight: 700;
  height: 5rem;
  border: 3px solid var(--border-color);
  border-radius: 1.5rem;
  padding: var(--space-lg);
  background: var(--seat-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 28rem; /* Increased from 20rem */
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
}

.answer-display:focus-within {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(0, 217, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.answer-display.timer-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-success) 0%, var(--color-accent-warning) 50%, var(--color-accent-error) 100%);
  animation: countdown 3s linear forwards;
  z-index: 1;
  opacity: 0.8;
}

@keyframes countdown {
  from { 
    width: 100%;
    opacity: 0.8;
  }
  to { 
    width: 0%;
    opacity: 0.3;
  }
}

.keypad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg); /* Increased gap */
  width: 100%;
  max-width: 28rem; /* Increased from 20rem to match answer display */
  transition: all var(--transition-base);
}

.keypad.blurred {
  filter: blur(8px);
  pointer-events: none;
  opacity: 0.5;
}

.key {
  background: linear-gradient(135deg, var(--keypad-bg) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: var(--text-color-primary);
  border: 3px solid var(--border-color);
  border-radius: 1rem;
  font-size: var(--font-size-lg);
  font-weight: 700;
  padding: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  min-height: 4rem;
}

.key::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--transition-base);
}

.key:hover {
  background: linear-gradient(135deg, var(--keypad-hover-bg) 0%, rgba(255, 255, 255, 0.15) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.key:hover::before {
  transform: translate(-50%, -50%) scale(1.5);
}

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

.key.enter {
  background: linear-gradient(135deg, var(--btn-primary-bg) 0%, var(--btn-primary-hover) 100%);
  color: white;
  font-weight: 800;
}

.key.clear {
  background: linear-gradient(135deg, var(--btn-cancel-bg) 0%, var(--btn-cancel-hover) 100%);
  color: white;
  font-size: var(--font-size-xl);
}

#keypad .key {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#keypad-decimal {
  display: none;
  position: absolute;
  top: 25.72%;
  left: 105%;
  width: 4.5rem;
  height: 4.5rem;
  font-size: var(--font-size-lg);
}

.keypad.decimal-mode #keypad-decimal {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideIn 0.3s var(--animation-bounce);
}

.progress {
  position: absolute;
  top: var(--space-lg);
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  color: var(--text-color-secondary);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.progress::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-accent-primary);
  border-radius: 2px;
}

/* ========================================
   TEST BREAK SCREEN LAYOUT
   ======================================== */

/* Main wrapper during a break */
.test-screen.in-break .test-content-wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: center;
  justify-items: center;
  height: 100%;
  padding: 2rem;
  gap: 2rem;
  position: relative; /* For absolute positioning context */
}

/* Progress bar container - stays at top */
.test-screen.in-break .progress-container {
  grid-row: 1;
  width: 100%;
}

.test-screen.in-break {
  display: grid;
  justify-items: center; /* Center items horizontally */
}

.test-screen.in-break #nextQuestionBtn { 
  box-sizing: border-box;
  font-size: 1.8rem; 
  grid-row: 2; 
  height: 5rem; 
  margin-top: 5rem; 
  min-height: 6rem;
  min-width: 25rem; 
  padding: 1rem 4rem; 
  width: 90%;
}

.test-screen.in-break #breakMessage {
    grid-row: 4;
    width: 100%;
}

.test-screen.in-break #feedbackMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-size: 7rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    animation: bounceIn 0.5s var(--animation-bounce);
}

/* Style for CORRECT feedback */
.test-screen.in-break #feedbackMessage.correct {
  color: var(--color-positive-feedback); /* Green */
}

/* Styles for INCORRECT feedback and its child elements */
.test-screen.in-break #feedbackMessage.incorrect .feedback-title {
  color: var(--color-negative-feedback); /* Red */
}

.test-screen.in-break #feedbackMessage.incorrect .feedback-correction {
  color: var(--text-color-primary); /* Default text colour (black/white) */
  font-size: 4rem;
  margin-top: 1.5rem;
}

.test-screen.in-break #feedbackMessage.incorrect .feedback-correction .correct-answer {
  color: var(--color-positive-feedback); /* Green for the correct part */
  font-weight: 800;
}

/* Instruction text ("Click next to continue...") - at bottom */
.test-screen.in-break #breakMessage p {
  font-size: 1.5rem;
  color: var(--text-color-secondary);
  font-weight: 400;
  text-align: center;
}

/* === In-Break Screen Enhancements === */
.test-screen.in-break .break-message {
  text-align: center;
  animation: fadeIn 0.5s ease-out;
}

#testModeButtons,
#practiceModeButtons {
  text-align: center;
  margin-top: 1.25rem; /* 20px */
}

#practiceModeButtons .btn {
  padding: var(--space-xl) var(--space-2xl);
  font-size: var(--font-size-2xl);
  max-width: 22rem;
  border-radius: 3rem;
  height: auto;
}

/* ========================================
MODE SWITCHES & TEACHER CONTROLS
======================================== */
#teacherControlsContainer {
  display: flex;
  flex-direction: column;
  align-items: center; /* This centers all children horizontally */
  gap: 0.9375rem; /* Adds consistent spacing between all items */
}

.mode-switch {
  display: flex;
  align-items: center;
  background-color: #eee;
  padding: 0.3125rem;
  border-radius: 1.25rem;
  /* The parent container now handles all positioning and spacing */
}

.mode-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #555;
  padding: 0 var(--space-md);
  cursor: pointer;
  transition: color var(--transition-base);
}

.switch {
  position: relative;
  display: inline-block;
  width: 3.75rem;
  height: 2.125rem;
}

.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: var(--btn-primary-bg);
transition: .4s;
border-radius: 2.125rem; /* 34px */
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--color-accent-success) 0%, #3ea55f 100%);
  transition: all var(--transition-base);
  border-radius: 2.125rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.625rem;
  width: 1.625rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background: white;
  transition: all var(--transition-base);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

input:checked + .slider {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

input:checked + .slider:before {
  transform: translateX(1.625rem);
}

.mode-display {
  font-weight: 700;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-base);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  display: inline-block;
}

#teacherControlsContainer .btn {
  margin-bottom: var(--space-sm);
  display: none;
  width: 100%;
  max-width: 12rem;
}

.practice-mode-active #resetLeaderboardBtn { grid-area: download-area; }
.practice-mode-active #awardCrownsBtn { grid-area: reset-area; }

#awardCrownsBtn.countdown-active {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: #e53935;
  background: linear-gradient(135deg, var(--color-accent-warning) 0%, var(--color-accent-error) 200%);
  animation: pulse 1s ease-in-out infinite;
  padding: var(--space-sm);
  line-height: 1.2;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
}

#testModeButtons,
#practiceModeButtons {
text-align: center;
margin-top: 1.25rem; /* 20px */
}

.practice-mode-active #resetLeaderboardBtn,
.practice-mode-active #awardCrownsBtn { display: block; }

.test-mode-active #teacherControlsContainer,
.practice-mode-active #teacherControlsContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header-area header-area"
    "download-area reset-area";
  gap: 0.9375rem; /* 15px */
  align-items: center;
  justify-items: center;
}

.test-mode-active #controlsHeaderGroup,
.practice-mode-active #controlsHeaderGroup {
  grid-area: header-area;
  margin-bottom: 0;
}

.test-mode-active #teacherControlsContainer .btn,
.practice-mode-active #teacherControlsContainer .btn {
  width: 100%;
  margin: 0;
}

.test-mode-active #downloadBtn { grid-area: download-area; }
.test-mode-active #resetBtn { grid-area: reset-area; }

.practice-mode-active #resetLeaderboardBtn { grid-area: download-area; }
.practice-mode-active #awardCrownsBtn { grid-area: reset-area; }

.test-mode-active #editLevelsBtn { display: none !important; }

.test-mode-active #downloadBtn,
.test-mode-active #resetBtn { display: block; }

/* ========================================
MODAL STYLES
======================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Base z-index for all modals */
  backdrop-filter: blur(5px);
  animation: modalFadeIn 0.3s ease-out;
}

#noticeModal,
#confirmModal,
#autoNoticeModal,
#passwordModal,
#numberInputModal {
  z-index: 1001;
}

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

.modal-content {
  background: var(--container-bg);
  padding: var(--space-2xl);
  border-radius: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  max-width: 28rem;
  width: 90%;
  position: relative;
  border: 3px solid var(--border-color);
  animation: modalSlideIn 0.3s var(--animation-bounce);
  overflow: hidden;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--color-accent-primary) 0%, transparent 70%);
  opacity: 0.05;
  pointer-events: none;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.modal h2 {
  margin-bottom: var(--space-lg);
  color: var(--text-color-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.modal p {
  margin-bottom: var(--space-md);
  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.modal input,
.modal select {
  width: 80%;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-base);
  text-align: center;
  border: 3px solid var(--border-color);
  background: var(--seat-bg);
  color: var(--text-color-primary);
  border-radius: 1rem;
  transition: all var(--transition-base);
  font-family: inherit;
  font-weight: 600;
}

.close-modal-btn {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
  cursor: pointer;
  font-size: var(--font-size-xl);
  color: var(--text-color-secondary);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--seat-bg);
  transition: all var(--transition-base);
}

.close-modal-btn:hover {
  color: var(--text-color-primary);
  background: var(--border-color);
  transform: rotate(90deg);
}

.modal-absent-btn {
position: absolute;
top: 0.9375rem; /* 15px */
right: 0.9375rem; /* 15px */
width: 2.1875rem; /* 35px */
height: 2.1875rem; /* 35px */
background-color: #cccccc;
color: #333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.125rem; /* 18px */
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
}

.modal-absent-btn:hover {
  transform: scale(1.1);
  background-color: #bbbbbb;
  }

.close-modal-btn {
  position: absolute;
  top: 0.625rem; /* 10px */
  right: 0.9375rem; /* 15px */
  cursor: pointer;
  font-size: 1.5rem; /* 24px */
  color: var(--text-color-secondary);
  }

/* ========================================
CONNECTION STATUS
======================================== */

.connection-status {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: 2rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all var(--transition-base);
}

@keyframes connectionPulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.connection-status.online { background-color: #4CAF50; color: white; }
.connection-status.offline { background-color: #f44336; color: white; }

/* ========================================
AUTHENTICATION-BASED VISIBILITY
======================================== */

body.logged-out #resetLeaderboardBtn,
body.logged-out #awardCrownsBtn,
body.logged-out #editLevelsBtn,
body.logged-out #downloadBtn,
body.logged-out #resetBtn { display: none !important; }

body.logged-out.practice-mode #controlsHeaderGroup h2 { display: none !important; }
body.logged-out.test-mode-active #teacherControlsContainer > *:not(#controlsHeaderGroup) { display: none !important; }
body.logged-out.test-mode-active #controlsHeaderGroup h2 { display: none !important; }
body.logged-out.test-mode-active #controlsHeaderGroup { display: flex !important; justify-content: center; }
body.logged-out.test-mode-active .mode-switch { display: flex !important; }
body.logged-out.practice-mode #teacherControlsContainer {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 0.9375rem !important; /* 15px */
}
body.logged-out.practice-mode.battle-mode-active #teacherControlsContainer {
justify-content: flex-start !important;
padding-top: 15% !important;
}
body.logged-out.practice-mode #teacherControlsContainer .mode-switch,
body.logged-out.practice-mode #teacherControlsContainer #awardCrownsBtn { align-self: center !important; }

body.logged-out.battle-mode-active #awardCrownsBtn.countdown-active {
display: block !important;
background-color: #ffc107 !important;
color: #e53935 !important;
cursor: default !important;
pointer-events: none !important;
}
body.logged-out.practice-mode #leaderboardContainer { display: block !important; }
body.logged-out.test-mode-active #leaderboardContainer { display: none !important; }

/* Move mode switch to leaderboard wrapper when logged out and in test mode */
body.logged-out.test-mode-active #leaderboardAndControlsWrapper {
flex-direction: column !important;
align-items: center !important;
gap: 1rem !important;
}

/* Hide teacher controls container completely when logged out and in test mode */
body.logged-out.test-mode-active #teacherControlsContainer {
display: none !important;
}

/* ========================================
EDIT MODE & ADMIN STYLES
======================================== */

/* Admin Options Modal */
#adminOptionsModal .modal-content {
  max-width: 34rem;
  width: 90%;
  padding: var(--space-2xl);
}

.admin-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  justify-items: center;
  align-items: center;
}

.admin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: none;
  border-radius: var(--space-lg);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: white;
  width: 8rem;
  height: 6.5rem;
  transition: all var(--transition-base);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.admin-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform var(--transition-slow);
}

.admin-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.admin-btn:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

.admin-btn-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.admin-btn-text {
  font-size: var(--font-size-xs);
  line-height: 1.2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.admin-btn.add-student {
  background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

.admin-btn.remove-student {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.admin-btn.edit-seating {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.admin-btn.edit-levels {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  color: #212529;
}

.admin-cancel-btn {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  color: white;
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: 700;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition: all var(--transition-base);
  display: block;
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.admin-cancel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Seating Arrangement Edit Mode */
/* Seating Arrangement Edit Mode */
.seating-edit-mode .student-seat.edit-mode {
  cursor: grab;
  position: relative;
  border: 3px dashed var(--color-accent-primary);
  transform: scale(1.02);
  transition: transform var(--transition-base), box-shadow var(--transition-base);

  /* Replaces 'editPulse' with the new 'wiggle' animation */
  animation: wiggle 0.3s ease-in-out infinite;
}

.seating-edit-mode .student-seat.edit-mode:hover {
  /* The element continues wiggling while scaling up */
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.seating-edit-mode .drag-over {
  background: rgba(0, 217, 255, 0.2) !important;
  border-color: var(--color-accent-primary) !important;
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
  
  /* Pauses the animation when an item is dragged over this spot */
  animation: none;
}

@keyframes wiggle {
  0% { transform: rotate(-0.5deg); }
  50% { transform: rotate(0.5deg); }
  100% { transform: rotate(-0.5deg); }
}

.seating-edit-controls,
.bulk-edit-controls {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--container-bg);
  border: 3px solid var(--color-accent-primary);
  border-radius: var(--space-lg);
  padding: var(--space-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 14rem;
  animation: slideInRight 0.3s var(--animation-bounce);
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.edit-controls-content h3 {
  margin: 0 0 var(--space-xs) 0;
  color: var(--color-accent-primary);
  font-size: var(--font-size-base);
  text-align: center;
}

.edit-controls-content p {
  margin: 0 0 var(--space-md) 0;
  color: var(--text-color-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.edit-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.edit-buttons button {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: 1rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-informational) 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.seating-edit-mode .empty-seat {
  border: 2px dashed #ccc;
  background-color: rgba(255, 255, 255, 0.05);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #888;
  transition: all 0.2s ease;
}

.seating-edit-mode .empty-seat:after {
  content: "Drop here";
  opacity: 0.6;
}

.seating-edit-mode .empty-seat.drag-over {
  background-color: rgba(0, 123, 255, 0.1);
  border-color: var(--btn-primary-bg);
}

.seating-edit-mode .empty-seat.drag-over:after {
  content: "Release to place";
  color: var(--btn-primary-bg);
  font-weight: bold;
  opacity: 1;
}

/* Bulk Test-Level Edit Mode */
.bulk-edit-mode .student-seat {
  position: relative;
  transition: all var(--transition-base);
}

.bulk-edit-mode .student-seat::before {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: linear-gradient(45deg, var(--btn-primary-bg), var(--btn-primary-hover));
border-radius: inherit;
z-index: -1;
opacity: 0.3;
animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

.test-level-controls {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.test-level-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  font-size: var(--font-size-base);
  font-weight: 900;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
}

.test-level-btn:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.test-level-btn:active {
  transform: scale(1.1);
}

.test-level-btn.minus-btn {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
}

.test-level-btn.plus-btn {
  background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  color: white;
}

.test-level-highlight {
  animation: levelChange 0.4s ease-in-out;
}

@keyframes levelChange {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 20px var(--color-accent-primary);
  }
  100% {
    transform: scale(1);
  }
}


/* ========================================
RESPONSIVE STYLES
======================================== */

@media (max-width: 1366px) and (orientation: landscape) {
    :root {
        /* Smaller Typography Scale for Tablets */
        --font-size-xs: 0.75rem;      /* 12px */
        --font-size-sm: 0.875rem;    /* 14px */
        --font-size-base: 1rem;        /* 16px */
        --font-size-lg: 1.25rem;     /* 20px */
        --font-size-xl: 1.5rem;      /* 24px */
        --font-size-2xl: 1.875rem;   /* 30px */
        --font-size-3xl: 2.25rem;    /* 36px */
        
        /* Tighter Spacing Scale for Tablets */
        --space-xs: 0.375rem;  /* 6px */
        --space-sm: 0.625rem;  /* 10px */
        --space-md: 0.875rem;  /* 14px */
        --space-lg: 1.125rem;  /* 18px */
        --space-xl: 1.5rem;    /* 24px */
        --space-2xl: 2.25rem;  /* 36px */
    }

    body {
        padding: 0.25rem; /* Reduce outer padding */
    }

    .container {
        min-height: 96dvh; 
        padding: var(--space-lg);
        border-radius: 1.5rem;
    }

    .classroom-layout {
        gap: var(--space-md);
    }
    
    .layout-column {
        gap: var(--space-md);
    }

    .student-seat,
    .empty-seat {
        height: 4.5rem; 
        border-radius: var(--space-md);
    }
    
    .leaderboard-lists-wrapper {
        height: 7rem;
    }

    #authBtn, #darkModeToggle {
        width: 2.75rem;
        height: 2.75rem;
        top: var(--space-md);
    }

    #authBtn { left: var(--space-md); }
    #darkModeToggle { right: var(--space-md); }
    
/* Test Screen settings */
    .test-content-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      padding-top: 70px;
    }
    
    .question-display {
        min-height: 2rem;
        flex: 0 0 90px;
        font-size: 5rem;
        margin: var(--space-sm) 0;
    }

    .answer-display {
      min-height: 1rem;
      font-size: 5rem;
    }

    .keypad {
      flex: 1;
      gap: 10px;
    }

    .key {
      font-size: 1.8rem;
    }

    .progress {
      margin-bottom: 25px;
    }

    /* "Next Question" screen */
    
    #nextQuestionBtn {
        width: 18rem;
        padding: 0.8rem 0;
    }

  .leaderboard-lists-wrapper {
    height: 8.5rem; 
  }
}

/* Tablet Portrait Mode (768x1024) */
@media (max-width: 1024px) and (orientation: portrait) {
  :root {
      /* Typography Scale for Tablet Portrait */
      --font-size-xs: 0.8125rem;    /* 13px */
      --font-size-sm: 0.9375rem;    /* 15px */
      --font-size-base: 1.0625rem;  /* 17px */
      --font-size-lg: 1.375rem;     /* 22px */
      --font-size-xl: 1.75rem;      /* 28px */
      --font-size-2xl: 2.125rem;    /* 34px */
      --font-size-3xl: 2.5rem;      /* 40px */
      
      /* Spacing Scale for Tablet Portrait */
      --space-xs: 0.4375rem;  /* 7px */
      --space-sm: 0.6875rem;  /* 11px */
      --space-md: 0.9375rem;  /* 15px */
      --space-lg: 1.25rem;    /* 20px */
      --space-xl: 1.75rem;    /* 28px */
      --space-2xl: 2.5rem;    /* 40px */
  }

  .container {
      padding: var(--space-lg);
      width: 95vw;
      min-height: 95dvh;
  }

  /* Make selection screen fill container properly */
  .selection-screen.active {
      min-height: 85vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  /* Keep grid layout but make it stretch */
  .classroom-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;  /* Equal columns */
      gap: var(--space-lg);
      flex: 1;
      align-content: stretch;
  }

  .layout-column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-lg);
  }

  .table-group {
      padding: var(--space-md);
      flex: 1;
      display: flex;
      flex-direction: column;
  }

  .table-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-sm);  /* Reduced gap between seats */
      align-content: stretch;
      grid-auto-rows: 1fr;  /* Equal height rows */
  }

  .student-seat,
  .empty-seat {
      height: 100%;  /* Fill available space */
      min-height: 4rem;  /* Minimum height */
      max-height: 5.5rem;  /* Maximum height */
      overflow: hidden;
  }

  /* Scale down text and ensure it fits */
  .student-name {
      font-size: 0.875rem;
      padding: 0 0.25rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
  }

  .crown-indicator {
      font-size: 1.25rem;
      flex-shrink: 0;
  }

  .test-level {
      font-size: 0.625rem;
      margin-top: 0.125rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .student-seat.completed::after {
      font-size: 1rem;
      top: 0.25rem;
      right: 0.25rem;
  }

  #authBtn, #darkModeToggle {
      width: 2.5rem;
      height: 2.5rem;
  }

  #leaderboardAndControlsWrapper {
      width: 100%;
      gap: var(--space-xs);  /* Much smaller gap */
      align-items: stretch;
      display: flex;
      flex-direction: row;
      justify-content: center;  /* Center the content */
  }

  #teacherControlsContainer {
      transform: scale(0.85);
      transform-origin: center;
      flex-shrink: 0;
  }

  .mode-switch {
      padding: 0.25rem;
      border-radius: 1rem;
  }

  .switch {
      width: 3rem;
      height: 1.75rem;
  }

  .slider:before {
      height: 1.25rem;
      width: 1.25rem;
      left: 0.25rem;
      bottom: 0.25rem;
  }

  input:checked + .slider:before {
      transform: translateX(1.25rem);
  }

  .mode-label {
      font-size: 0.75rem;
      padding: 0 var(--space-sm);
  }

  /* Leaderboard - exactly 3 items visible with readable text */
  #leaderboardContainer {
      flex: 0 1 auto;  /* Allow shrinking but not growing */
      display: flex;
      flex-direction: column;
      padding: 0;
      height: 100%;
      margin-left: 1rem;
  }

  #leaderboardContainer h3 {
      font-size: var(--font-size-base);  /* Smaller title */
      margin-bottom: var(--space-xs);
      margin-left: 1rem;
      flex-shrink: 0;
  }

  .leaderboard-lists-wrapper {
      height: auto;
      flex: 1;
      min-width: 17vb;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 0.25rem;
      max-height: calc(3 * 2.75rem + 2 * 0.25rem); /* Smaller items */
  }

  .leaderboard-view {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
  }

  .leaderboard-view li {
      padding: var(--space-xs) var(--space-sm);  /* Less padding */
      margin-bottom: 0;
      height: 2.75rem;
      display: flex;
      align-items: center;
      flex-shrink: 0;
  }

  .leaderboard-rank {
      font-size: 0.875rem;  /* Smaller */
      width: 1rem;
      text-align: center;
      font-weight: 900;
  }

  .leaderboard-name, .liveLeaderboardTitle, .goldLeaderboardTitle, .silverLeaderboardTitle {
      font-size: 0.875rem;  /* Smaller */
      padding: 0 var(--space-sm);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .leaderboard-score {
      font-size: 0.875rem;  /* Smaller */
      padding: 0.125rem var(--space-sm);
      min-width: 2.5rem;
      font-weight: 800;
  }

  /* ENHANCED TEST SCREEN - Much Larger and Centered */
  .test-content-wrapper,
  .finish-content-wrapper {
      padding-top: 4rem;  /* Increased top padding to avoid progress overlap */
      min-height: 90vh;   /* Use more vertical space */
      display: flex;
      flex-direction: column;
      justify-content: center;  /* Center everything vertically */
      align-items: center;      /* Center everything horizontally */
      gap: var(--space-xl);     /* Space between elements */
  }

  /* Much larger question display */
  .question-display {
      font-size: clamp(3.5rem, 12vw, 6rem);  /* Much larger, responsive */
      min-height: 6rem;
      max-height: 8rem;
      width: 90vw;  /* Use most of screen width */
      max-width: 50rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.2;
      padding: var(--space-lg);
      box-sizing: border-box;
      margin-top: var(--space-lg);  /* Add some top margin for extra spacing */
  }

  /* Much larger answer display */
  .answer-display {
      font-size: clamp(2.5rem, 8vw, 4rem);  /* Much larger */
      height: 5rem;
      width: 80vw;  /* Use most of screen width */
      max-width: 40rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-lg);
      box-sizing: border-box;
  }

  /* Much larger keypad */
  .keypad {
      width: 85vw;        /* Use most of screen width */
      max-width: 45rem;   /* But cap the maximum size */
      gap: var(--space-lg);
      display: grid;
      grid-template-columns: repeat(3, 1fr);  /* Keep 3 equal columns */
      grid-template-rows: repeat(4, 1fr);     /* 4 equal rows */
      justify-items: stretch;
      align-items: stretch;
      padding: var(--space-md);
      box-sizing: border-box;
  }

  /* Much larger keys */
  .key {
      font-size: clamp(2rem, 6vw, 3rem);  /* Much larger text */
      padding: var(--space-xl);
      min-height: 5rem;  /* Much taller keys */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1rem;
      font-weight: 600;
      transition: all 0.2s ease;
  }

  /* Ensure clear/backspace key is properly sized */
  .key.clear,
  .key.backspace {
      font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Enhanced button states for better touch feedback */
  .key:active {
      transform: scale(0.95);
  }

  /* Progress indicator adjustments */
  .progress-container {
      width: 80vw;
      max-width: 40rem;
      margin: var(--space-md) auto;
  }

  /* Timer display adjustments */
  .timer-display {
      font-size: clamp(1.5rem, 4vw, 2rem);
      padding: var(--space-md);
  }


  /* Finish screen specific adjustments */
  .finish-content-wrapper .results-display {
      font-size: clamp(2rem, 5vw, 3rem);
      padding: var(--space-xl);
      text-align: center;
      width: 90vw;
      max-width: 50rem;
  }

  .finish-content-wrapper .final-score {
      font-size: clamp(3rem, 8vw, 5rem);
      margin: var(--space-xl) 0;
  }
}

/* Phone Portrait Mode */
@media (max-width: 428px) and (orientation: portrait) {
  :root {
      /* Typography Scale for Phone Portrait */
      --font-size-xs: 0.8125rem;    /* 13px */
      --font-size-sm: 0.9375rem;    /* 15px */
      --font-size-base: 1rem;       /* 16px */
      --font-size-lg: 1.25rem;      /* 20px */
      --font-size-xl: 1.625rem;     /* 26px */
      --font-size-2xl: 2rem;        /* 32px */
      --font-size-3xl: 2.5rem;      /* 40px */
      
      /* Spacing Scale for Phone Portrait */
      --space-xs: 0.375rem;  /* 6px */
      --space-sm: 0.625rem;  /* 10px */
      --space-md: 0.875rem;  /* 14px */
      --space-lg: 1.125rem;  /* 18px */
      --space-xl: 1.5rem;    /* 24px */
      --space-2xl: 2rem;     /* 32px */
  }

  body {
      padding: 0.5rem;
  }

  .container {
      padding: var(--space-md);
      width: 100%;
      max-width: 100%;
  }

  /* CRITICAL: Single column layout for phone portrait */
  .classroom-layout {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
  }

  .layout-column {
      width: 100%;
  }

  .table-group {
      padding: var(--space-md);
  }

  .table-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns on phone */
      gap: var(--space-sm);
  }

  .student-seat,
  .empty-seat {
      height: 4.5rem;
  }

  #authBtn, #darkModeToggle {
      width: 2.5rem;
      height: 2.5rem;
  }

  #mainHeader {
      font-size: var(--font-size-lg);
  }

  /* Test screen mobile optimizations */
  .test-content-wrapper {
      padding: var(--space-md);
      padding-top: 4rem;
  }

  .question-display {
      font-size: clamp(1.75rem, 8vw, 3rem);
      padding: var(--space-md);
      min-height: 4rem;
  }

  .answer-display {
      font-size: clamp(1.5rem, 6vw, 2.5rem);
      height: 3.5rem;
      max-width: 100%;
  }

  .keypad {
      max-width: 100%;
      gap: var(--space-sm);
  }

  .key {
      font-size: var(--font-size-base);
      padding: 1rem;
      min-height: 3rem;
  }

  /* Progress adjustment */
  .progress {
      font-size: var(--font-size-lg);
      top: var(--space-sm);
  }

  /* Leaderboard and controls stacked */
  #leaderboardAndControlsWrapper {
      flex-direction: column;
      gap: var(--space-lg);
  }

  #teacherControlsContainer {
      width: 100%;
  }

  .leaderboard-lists-wrapper {
      height: 8rem;
  }

  /* Modal full width */
  .modal-content {
      width: 95%;
      padding: var(--space-lg);
  }

  .admin-buttons-grid {
      grid-template-columns: 1fr;
      gap: var(--space-md);
  }

  .admin-btn {
      width: 100%;
      max-width: 12rem;
      margin: 0 auto;
  }

  /* Button adjustments */
  .btn {
      width: 100%;
      max-width: 100%;
      margin: var(--space-xs) 0;
  }

  /* Test break screen adjustments */
  .test-screen.in-break #nextQuestionBtn {
      min-width: 90%;
      font-size: var(--font-size-lg);
  }

  .test-screen.in-break #feedbackMessage {
      font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .test-screen.in-break #feedbackMessage.incorrect .feedback-correction {
      font-size: clamp(1.5rem, 8vw, 2.5rem);
  }
}

/* Very small phones */
@media (max-width: 375px) {
  :root {
      --font-size-base: 0.9375rem;  /* 15px */
      --font-size-lg: 1.125rem;     /* 18px */
  }

  .student-seat,
  .empty-seat {
      height: 4rem;
  }

  .key {
      font-size: var(--font-size-sm);
      padding: 0.875rem;
  }
}

/* ========================================
   ENHANCED ANIMATIONS & MICROINTERACTIONS
   ======================================== */

/* Success celebration animation */
@keyframes successCelebration {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* Confetti for achievements */
@keyframes confetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Loading animation */
@keyframes loadingDots {
  0%, 20% {
    color: rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
  40% {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
  }
  60%, 100% {
    color: rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus indicators for keyboard navigation */


/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --text-color-primary: #ffffff;
    --text-color-secondary: #e0e0e0;
    --bg-color: #000000;
    --container-bg: #1a1a1a;
    --border-color: #ffffff;
  }
  
  .btn,
  .key,
  .student-seat {
    border-width: 4px;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  body {
    background: white;
    color: black;
  }
  
  .container {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  #darkModeToggle,
  #authBtn,
  .connection-status,
  .btn,
  .keypad,
  .modal {
    display: none !important;
  }
  
  .student-seat {
    border: 2px solid #000;
    box-shadow: none;
  }
  
  .leaderboard-view li {
    border: 1px solid #000;
    box-shadow: none;
  }
}

/* ========================================
   BATTLE MODE SPECIAL EFFECTS
   ======================================== */

   body.battle-mode-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 50%, rgba(255, 165, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
    animation: battleGlow 4s ease-in-out infinite;
  }
  
  @keyframes battleGlow {
    0%, 100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }
  
  @keyframes battleRotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  /* === BATTLE MODE SPARKLES === */
  body.battle-mode-active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background-image: 
      /* Layer 1 - Small sparkles */
      radial-gradient(2px 2px at 12% 15%, rgba(255, 215, 0, 0.8) 50%, transparent 50%),
      radial-gradient(1px 1px at 89% 23%, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
      radial-gradient(1.5px 1.5px at 34% 78%, rgba(255, 215, 0, 0.7) 50%, transparent 50%),
      radial-gradient(2px 2px at 67% 34%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
      radial-gradient(1px 1px at 23% 89%, rgba(255, 215, 0, 0.9) 50%, transparent 50%),
      radial-gradient(1.5px 1.5px at 78% 67%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
      radial-gradient(2px 2px at 45% 12%, rgba(255, 215, 0, 0.8) 50%, transparent 50%),
      radial-gradient(1px 1px at 91% 78%, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
      radial-gradient(1.5px 1.5px at 17% 45%, rgba(255, 215, 0, 0.7) 50%, transparent 50%),
      radial-gradient(2px 2px at 56% 91%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
      
      /* Layer 2 - Medium sparkles */
      radial-gradient(3px 3px at 28% 67%, rgba(255, 215, 0, 0.6) 50%, transparent 50%),
      radial-gradient(2.5px 2.5px at 73% 12%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
      radial-gradient(3px 3px at 45% 89%, rgba(255, 215, 0, 0.8) 50%, transparent 50%),
      radial-gradient(2.5px 2.5px at 12% 34%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
      radial-gradient(3px 3px at 89% 56%, rgba(255, 215, 0, 0.7) 50%, transparent 50%),
      radial-gradient(2.5px 2.5px at 34% 23%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
      
      /* Layer 3 - Large sparkles */
      radial-gradient(4px 4px at 78% 45%, rgba(255, 215, 0, 0.5) 50%, transparent 50%),
      radial-gradient(3.5px 3.5px at 23% 78%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
      radial-gradient(4px 4px at 67% 23%, rgba(255, 215, 0, 0.7) 50%, transparent 50%),
      radial-gradient(3.5px 3.5px at 45% 67%, rgba(255, 255, 255, 0.5) 50%, transparent 50%);
      
    background-size: 
      /* Small sparkles - fast movement */
      100px 120px, 150px 80px, 120px 140px, 90px 110px, 130px 95px,
      110px 130px, 95px 115px, 140px 85px, 105px 125px, 125px 100px,
      
      /* Medium sparkles - medium movement */
      200px 180px, 170px 220px, 190px 160px, 160px 200px, 210px 170px, 180px 190px,
      
      /* Large sparkles - slow movement */
      300px 280px, 250px 320px, 280px 240px, 320px 290px;
      
    animation: 
      /* Small sparkles */
      sparkleMove1 8s linear infinite,
      sparkleMove2 12s linear infinite reverse,
      sparkleMove3 10s linear infinite,
      sparkleMove4 15s linear infinite reverse,
      sparkleMove5 9s linear infinite,
      sparkleMove6 11s linear infinite reverse,
      sparkleMove7 13s linear infinite,
      sparkleMove8 7s linear infinite reverse,
      sparkleMove9 14s linear infinite,
      sparkleMove10 8.5s linear infinite reverse,
      
      /* Medium sparkles */
      sparkleMove11 16s linear infinite,
      sparkleMove12 18s linear infinite reverse,
      sparkleMove13 14s linear infinite,
      sparkleMove14 20s linear infinite reverse,
      sparkleMove15 17s linear infinite,
      sparkleMove16 15s linear infinite reverse,
      
      /* Large sparkles */
      sparkleMove17 25s linear infinite,
      sparkleMove18 22s linear infinite reverse,
      sparkleMove19 28s linear infinite,
      sparkleMove20 24s linear infinite reverse;
  }
  
  /* Sparkle movement animations - completely random patterns */
  @keyframes sparkleMove1 {
    0% { background-position: 0% 0%; }
    100% { background-position: 150% 0%; } /* Pure horizontal right */
  }
  
  @keyframes sparkleMove2 {
    0% { background-position: 100% 0%; }
    100% { background-position: -50% 0%; } /* Pure horizontal left */
  }
  
  @keyframes sparkleMove3 {
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 150%; } /* Pure vertical down */
  }
  
  @keyframes sparkleMove4 {
    0% { background-position: 30% 100%; }
    100% { background-position: 30% -50%; } /* Pure vertical up */
  }
  
  @keyframes sparkleMove5 {
    0% { background-position: 0% 0%; }
    100% { background-position: 120% 120%; } /* Diagonal down-right */
  }
  
  @keyframes sparkleMove6 {
    0% { background-position: 100% 100%; }
    100% { background-position: -20% -20%; } /* Diagonal up-left */
  }
  
  @keyframes sparkleMove7 {
    0% { background-position: 0% 100%; }
    100% { background-position: 130% -30%; } /* Diagonal up-right */
  }
  
  @keyframes sparkleMove8 {
    0% { background-position: 100% 0%; }
    100% { background-position: -30% 130%; } /* Diagonal down-left */
  }
  
  @keyframes sparkleMove9 {
    0% { background-position: 20% 50%; }
    100% { background-position: 180% 50%; } /* Horizontal right from center */
  }
  
  @keyframes sparkleMove10 {
    0% { background-position: 80% 50%; }
    100% { background-position: -100% 50%; } /* Horizontal left from center */
  }
  
  @keyframes sparkleMove11 {
    0% { background-position: 50% 20%; }
    100% { background-position: 50% 180%; } /* Vertical down from top */
  }
  
  @keyframes sparkleMove12 {
    0% { background-position: 50% 80%; }
    100% { background-position: 50% -100%; } /* Vertical up from bottom */
  }
  
  @keyframes sparkleMove13 {
    0% { background-position: 10% 10%; }
    100% { background-position: 190% 190%; } /* Long diagonal down-right */
  }
  
  @keyframes sparkleMove14 {
    0% { background-position: 90% 90%; }
    100% { background-position: -100% -100%; } /* Long diagonal up-left */
  }
  
  @keyframes sparkleMove15 {
    0% { background-position: 10% 90%; }
    100% { background-position: 190% -100%; } /* Long diagonal up-right */
  }
  
  @keyframes sparkleMove16 {
    0% { background-position: 90% 10%; }
    100% { background-position: -100% 190%; } /* Long diagonal down-left */
  }
  
  @keyframes sparkleMove17 {
    0% { background-position: 0% 25%; }
    100% { background-position: 250% 25%; } /* Very long horizontal */
  }
  
  @keyframes sparkleMove18 {
    0% { background-position: 25% 0%; }
    100% { background-position: 25% 250%; } /* Very long vertical */
  }
  
  @keyframes sparkleMove19 {
    0% { background-position: 75% 100%; }
    100% { background-position: 75% -150%; } /* Long vertical up */
  }
  
  @keyframes sparkleMove20 {
    0% { background-position: 100% 75%; }
    100% { background-position: -150% 75%; } /* Long horizontal left */
  }
  
  /* === ENHANCED 1ST & 2ND PLACE EFFECTS - BATTLE MODE ONLY === */
  
  /* Golden champion effects for 1st place - BATTLE MODE ONLY */
  body.battle-mode-active .leaderboard-view li.rank-1,
  body.battle-mode-active .student-seat.champion-first {
    position: relative;
    overflow: visible;
    animation: championGlow 3s ease-in-out infinite;
  }
  
  body.battle-mode-active .leaderboard-view li.rank-1::before,
  body.battle-mode-active .student-seat.champion-first::before {
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700, #ffed4e);
    background-size: 400% 400%;
    animation: championShimmer 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
  
  body.battle-mode-active .leaderboard-view li.rank-1::after,
  body.battle-mode-active .student-seat.champion-first::after {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    animation: championFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    z-index: 10;
  }
  
  body.battle-mode-active .leaderboard-view li.rank-1 .leaderboard-name,
  body.battle-mode-active .student-seat.champion-first .student-name {
    animation: championPulse 2s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 16px rgba(255, 215, 0, 0.4);
  }
  
  /* Silver effects for 2nd place - BATTLE MODE ONLY */
  body.battle-mode-active .leaderboard-view li.rank-2,
  body.battle-mode-active .student-seat.champion-second {
    position: relative;
    overflow: visible;
    animation: silverGlow 3.5s ease-in-out infinite;
  }
  
  body.battle-mode-active .leaderboard-view li.rank-2::before,
  body.battle-mode-active .student-seat.champion-second::before {
    background: linear-gradient(45deg, #c0c0c0, #e8e8e8, #c0c0c0, #e8e8e8);
    background-size: 400% 400%;
    animation: silverShimmer 2.5s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.6);
  }
  
  body.battle-mode-active .leaderboard-view li.rank-2::after,
  body.battle-mode-active .student-seat.champion-second::after {
    content: '⭐';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.3rem;
    animation: silverFloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.8));
    z-index: 10;
  }
  
  body.battle-mode-active .leaderboard-view li.rank-2 .leaderboard-name,
  body.battle-mode-active .student-seat.champion-second .student-name {
    animation: silverPulse 2.5s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(192, 192, 192, 0.8), 0 0 12px rgba(192, 192, 192, 0.4);
  }
  
  /* Champion animation keyframes */
  @keyframes championGlow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.9);
      transform: scale(1.02);
    }
  }
  
  @keyframes championShimmer {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes championFloat {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-8px) rotate(15deg);
    }
  }
  
  @keyframes championPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.05);
      filter: brightness(1.2);
    }
  }
  
  @keyframes silverGlow {
    0%, 100% {
      box-shadow: 0 0 15px rgba(192, 192, 192, 0.6);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 25px rgba(192, 192, 192, 0.8);
      transform: scale(1.015);
    }
  }
  
  @keyframes silverShimmer {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes silverFloat {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-6px) rotate(-10deg);
    }
  }
  
  @keyframes silverPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.03);
      filter: brightness(1.15);
    }
  }

/* ========================================
   CUSTOM SCROLLBAR STYLES
   ======================================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--seat-bg);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent-primary);
  border-radius: 5px;
  transition: background var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-informational);
}

/* ========================================
   FINAL POLISH & DETAILS
   ======================================== */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Prevent text selection on interactive elements */
.btn,
.key,
.student-seat,
.admin-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Ensure crisp text rendering */
* {
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
}

/* Add subtle texture to backgrounds */


/* Ensure all interactive elements have proper cursor */
button,
.btn,
.key,
.student-seat:not(.is-active),
.admin-btn,
input[type="checkbox"],
select,
a {
  cursor: pointer;
}

/* Add loading state for async operations */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.5em;
  animation: loadingDots 1.4s infinite;
}