/* ========================================
 CSS VARIABLES & ROOT STYLES
 ======================================== */
 :root {
  /* ==== SEMANTIC COLOR SYSTEM ==== */
  --color-base-dark: #1a1a2e;
  --color-base-light: #f5f3f0;
  --color-primary-dark: #252542;
  --color-primary-light: #fdfcfa;
  --color-accent-primary: #f00842;
  --color-accent-error: #ff6b6b;
  --color-accent-info: #00d9ff;
  --color-accent-success: #28a745;
  --color-accent-warning: #ffc947;
  
  --bg-color: var(--color-base-dark);
  --container-bg: #2a2a4e;
  --text-color-primary: #f0f0f7;
  --text-color-secondary: #b8b8d0;
  --border-color: #4a4a6e;
  --seat-bg: #353562;
  --seat-absent-bg: #3d3d5c;
  --seat-absent-border: #5a5a7a;
  --btn-primary-bg: var(--color-accent-primary);
  --btn-primary-hover: #00b8e6;
  --btn-cancel-bg: var(--color-accent-error);
  --btn-cancel-hover: #ff5252;
  --btn-action-bg: #007bff;
  --btn-action-hover: #0056b3;

  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-base: 1.125rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --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);
  --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;
  --container-bg: #fdfcfa;
  --text-color-primary: #3a3a4a;
  --text-color-secondary: #6a6a7e;
  --border-color: #e0d5d8;
  --seat-bg: #f5f0f2;
  --seat-absent-bg: #e8e8ed;
  --seat-absent-border: #c0c0c5;
  --btn-primary-bg: #f00842;
  --btn-primary-hover: #00b8e6;
  --btn-cancel-bg: #e74c3c;
  --btn-cancel-hover: #c0392b;
  --btn-action-bg: #007bff;
  --btn-action-hover: #0056b3;
  --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);
}

* { 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;
  padding: 0.5rem;
  margin: 0;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll { overflow: hidden; }

.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;
}

.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); }
}

.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;
}

.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; }
.selection-screen.active { display: block; opacity: 1; transform: translateY(0); }
#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; }
h1, h2, h3 { text-align: center; }
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); }

.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;
  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);
  transform: translateY(0);
  position: relative;
  overflow: hidden;
}

.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, #888888 0%, #666666 100%); cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.7; }
.btn-cancel { background: linear-gradient(135deg, var(--btn-cancel-bg) 0%, var(--btn-cancel-hover) 100%); }
.btn-action { background: linear-gradient(135deg, var(--btn-action-bg) 0%, var(--btn-action-hover) 100%); }


#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; z-index: 10; transition: all var(--transition-base); }
#darkModeToggle:hover { transform: scale(1.1) rotate(20deg); box-shadow: var(--shadow-lg); border-color: var(--color-accent-primary); }
#darkModeToggle .icon-moon { display: none; }
body.light-mode #darkModeToggle .icon-moon { display: block; }
body.light-mode #darkModeToggle .icon-sun { display: none; }

#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); }
#authBtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--color-accent-primary); }
#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; }

.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); 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; box-shadow: var(--shadow-sm); 
  overflow: hidden;
}

.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:not(.edit-mode):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.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 { color: var(--text-color-secondary); }
.student-name { font-size: var(--font-size-base); font-weight: 700; text-align: center; pointer-events: none; }
.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; transition: all var(--transition-base); }

.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; backdrop-filter: blur(5px); animation: modalFadeIn 0.3s ease-out; }
#confirmModal, #noticeModal, #autoNoticeModal { z-index: 1002; }

.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 modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideIn { from { transform: translateY(-50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-input { 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; }
.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); }

.admin-buttons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); justify-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; 
  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;
}

.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:disabled { opacity: 0.5; cursor: not-allowed; background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); }
.admin-btn:disabled:hover { transform: none; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 -2px 0 rgba(0,0,0,0.2); }
.admin-btn:not(:disabled):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; }
.admin-btn-text { font-size: var(--font-size-xs); line-height: 1.2; }
.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-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); }

.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); animation: wiggle 0.3s ease-in-out infinite; }
.seating-edit-mode .student-seat.edit-mode:hover { 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); animation: none; }
@keyframes wiggle { 0% { transform: rotate(-0.5deg); } 50% { transform: rotate(0.5deg); } 100% { transform: rotate(-0.5deg); } }
.seating-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); }
.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; }

.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; }
.connection-status.online { background-color: #4CAF50; color: white; }
.connection-status.offline { background-color: #f44336; color: white; }

@media (max-width: 768px) { .classroom-layout, .test-layout { grid-template-columns: 1fr; } .table-grid { grid-template-columns: repeat(2, 1fr); } .seating-edit-controls { width: 90%; } }
@media (max-width: 480px) { .admin-buttons-grid { grid-template-columns: 1fr; } }


/* ========================================
    SPELLING TEST STYLES (Ported)
 ======================================== */
.student-seat .student-name { transition: color var(--transition-base); }

/* Student is waiting for the test to start or for the next word (Orange) */
.student-seat.ready { 
    background: var(--color-accent-warning);
    border-color: var(--color-accent-warning); 
}

/* Student answered correctly (Green) */
.student-seat.correct { 
    background: var(--color-accent-success);
    border-color: var(--color-accent-success); 
}

/* Student answered incorrectly (Red) */
.student-seat.incorrect { 
    background: var(--color-accent-error);
    border-color: var(--color-accent-error);
}

/* Student is currently being shown a word (Grey) */
.student-seat.testing { 
    background: var(--seat-absent-bg); 
    border-color: var(--seat-absent-border); 
}

/* Make text readable on colored backgrounds */
.student-seat.ready .student-name, 
.student-seat.correct .student-name, 
.student-seat.incorrect .student-name { 
    color: white; 
}

.selection-screen .student-seat.correct, 
.selection-screen .student-seat.incorrect, 
.selection-screen .student-seat.ready, 
.selection-screen .student-seat.testing {
  background: linear-gradient(135deg, var(--seat-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: var(--border-color);
}
.selection-screen .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);
}
.selection-screen .student-seat .student-name { color: var(--text-color-primary) !important; }
.selection-screen .student-seat.absent .student-name { color: var(--text-color-secondary) !important; }

/* IMPORTANT: Hover effect for selection screen - must override state classes */
.selection-screen .student-seat:not(.edit-mode):hover,
.selection-screen .student-seat.correct:hover, 
.selection-screen .student-seat.incorrect:hover, 
.selection-screen .student-seat.ready:hover, 
.selection-screen .student-seat.testing:hover,
.selection-screen .student-seat.absent:hover {
  border-color: var(--color-accent-primary) !important;
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-lg);
}

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

#testControlScreen { padding: var(--space-md); }
.test-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-md); align-items: start; }
.test-column { display: flex; flex-direction: column; height: 100%; }
.test-column h2 { border-bottom: 2px solid var(--border-color); padding-bottom: var(--space-sm); }
.student-list-box { border: 1px solid var(--border-color); background-color: var(--seat-bg); border-radius: var(--space-md); padding: var(--space-md); min-height: 12rem; height: 30vh; overflow-y: auto; }
.student-list-box p { padding: var(--space-sm); background-color: var(--container-bg); border-radius: var(--space-sm); margin-bottom: var(--space-sm); font-weight: 500; color: var(--text-color-secondary); }
.word-input-container { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }
#wordInput { flex-grow: 1; padding: var(--space-md); font-size: var(--font-size-base); border-radius: 1rem; border: 3px solid var(--border-color); background: var(--seat-bg); color: var(--text-color-primary); }
#sendWordBtn { padding: var(--space-md) var(--space-lg); margin: 0; width: auto; max-width: none; }
.teacher-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-md); }
.teacher-actions-grid .btn { font-size: var(--font-size-sm); padding: var(--space-sm); position: relative; overflow: hidden; }
.timer-progress { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.2); transition: width 0.1s linear; }

#miniClassroomContainer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--space-md); flex-grow: 1; border: 1px solid var(--border-color); background: var(--bg-color); }
#miniClassroomContainer .table-group { padding: var(--space-sm); box-shadow: none; min-height: auto; margin-bottom: 0; background: transparent; }
#miniClassroomContainer .table-grid { gap: var(--space-xs); }
#miniClassroomContainer .student-seat, #miniClassroomContainer .empty-seat { height: 3.5rem; border-width: 2px; cursor: default; }
#miniClassroomContainer .student-name { font-size: var(--font-size-xs); }
#miniClassroomContainer .student-seat:hover { transform: none; box-shadow: none; border-color: initial; } /* Prevents hover effect */

.student-view-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 2000; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-md); }
#studentWaitingScreen {
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
#studentWaitingScreen * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
#studentWaitingScreen h1 { font-size: clamp(2rem, 8vw, 5rem); margin-bottom: var(--space-md); }
#studentWaitingScreen p { font-size: clamp(1rem, 4vw, 2rem); color: var(--text-color-secondary); }

#breathingCircleContainer { 
    position: relative; 
    width: 100%; 
    max-width: 300px; 
    margin: 2rem auto; 
    text-align: center;
    touch-action: none;
}

#breathingCircle { 
    width: 100%; 
    height: auto; 
    filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.3));
}

#breathingCircle circle {
  fill: var(--color-accent-info);
  stroke: none;
  opacity: 0.7;
  animation: breathe 5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes breathe {
  0% { 
      r: 20; 
      opacity: 0.3;
  }
  50% { 
      r: 70; 
      opacity: 0.8;
  }
  100% { 
      r: 20; 
      opacity: 0.3;
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-accent-info);
  pointer-events: none;
  animation: rippleEffect 1s ease-out forwards;
}

@keyframes rippleEffect {
  from {
      width: 20px;
      height: 20px;
      opacity: 0.8;
  }
  to {
      width: 150px;
      height: 150px;
      opacity: 0;
  }
}

#colorPicker { 
  margin-top: 2rem; 
  text-align: center;
}

#colorButtons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 400px;
  margin: 0 auto;
}

.color-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.color-btn.active {
  border-color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
}

#timerDisplay { position: absolute; top: var(--space-lg); right: var(--space-lg); background-color: var(--seat-bg); color: var(--text-color-primary); font-size: var(--font-size-xl); font-weight: bold; padding: var(--space-md); border-radius: 50%; width: 4rem; height: 4rem; display: none; place-items: center; z-index: 2010; border: 3px solid var(--border-color); }
.answer-container { display: flex; align-items: center; justify-content: center; width: 90%; max-width: 44rem; margin-bottom: var(--space-lg); margin-top: auto; position: relative; }
.answer-display { width: 15em; max-width: 90%; min-height: 5rem; padding: var(--space-sm); font-size: clamp(2rem, 8vw, 5rem); font-weight: bold; text-align: center; border-bottom: 4px solid var(--border-color); letter-spacing: 0.1em; color: var(--text-color-primary); display: flex; align-items: center; justify-content: center; }
.inline-backspace-btn { background: var(--seat-bg); border: 2px solid var(--border-color); border-radius: var(--space-md); width: 4rem; height: 4rem; font-size: var(--font-size-xl); color: var(--text-color-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; right: -4.5rem; top: 50%; transform: translateY(-50%); transition: all var(--transition-base); }
.inline-backspace-btn:hover { background-color: var(--border-color); }
#virtualEnterBtn { margin-top: var(--space-md); width: 90%; max-width: 25rem; height: 4rem; font-size: var(--font-size-lg); }

.keyboard { padding: var(--space-sm); border-radius: var(--space-md); display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 62.5rem; margin-top: auto; margin-bottom: var(--space-sm); }
.keyboard-row { display: flex; justify-content: center; }
.keyboard-row.row-2 { margin-left: 3.5vw; }
.keyboard-row-container { display: flex; justify-content: center; align-items: center; }
.key { width: 8vw; height: 8vw; max-width: 4.7rem; max-height: 4.7rem; margin: 0.4vw; border-radius: var(--space-md); background-color: var(--seat-bg); color: var(--text-color-primary); font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; border: 1px solid var(--border-color); box-shadow: 0 3px 0 rgba(0,0,0,0.2); transition: background-color 0.1s, transform 0.1s; }
.key:hover { background-color: var(--border-color); }
.key:active { background-color: #000; transform: translateY(2px); box-shadow: none; }
.key.active { background-color: var(--btn-action-bg); color: #fff; }
#capsLockBtn, #apostropheBtn { background-color: var(--container-bg); }
#capsLockBtn:hover, #apostropheBtn:hover { background-color: var(--border-color); }

@media (max-width: 768px) { .inline-backspace-btn { position: static; transform: none; margin-top: var(--space-sm); width: 80%; max-width: 200px; } .answer-container { flex-direction: column; } }

#miniClassroomContainer .student-seat.mini-ready {
  background: var(--color-accent-success);
  color: #fff;
}

#miniClassroomContainer .student-seat.correct-icon::after {
  content: "✅";
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 0.9em;
}

#miniClassroomContainer .student-seat.incorrect-icon::after {
  content: "❌";
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 0.9em;
}