:root{--color-base-dark: #1a1a2e;--color-base-light: #f5f3f0;--color-primary-dark: #252542;--color-primary-light: #fdfcfa;--color-accent-primary: #f00842;--color-accent-success: #28a745;--color-accent-warning: #ffc947;--color-accent-error: #ff6b6b;--color-accent-special: #a78bfa;--color-accent-info: #00d9ff;--color-positive-feedback: #4ecb71;--color-negative-feedback: #ff6b6b;--color-neutral-action: #4ecb71;--color-informational: #00d9ff;--color-achievement: #ffc947;--bg-color: #0f0f1a;--bg-gradient: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0f0f1a 100%);--container-bg: rgba(42, 42, 78, .4);--glass-border: 1px solid rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-color-primary: #f0f0f7;--text-color-secondary: #b8b8d0;--border-color: rgba(74, 74, 110, .5);--seat-bg: rgba(53, 53, 98, .6);--seat-completed-bg: rgba(42, 87, 73, .8);--seat-completed-border: var(--color-positive-feedback);--seat-absent-bg: rgba(61, 61, 92, .6);--seat-absent-border: #5a5a7a;--keypad-bg: rgba(63, 63, 106, .7);--keypad-hover-bg: rgba(79, 79, 122, .8);--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);--font-size-xs: .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: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.25rem;--space-xl: 2rem;--space-2xl: 3rem;--transition-fast: .15s ease-out;--transition-base: .25s ease-out;--transition-slow: .35s ease-out;--animation-bounce: cubic-bezier(.68, -.55, .265, 1.55);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--shadow-glow: 0 0 20px rgba(0, 217, 255, .3);--scrollbar-width: 8px;--scrollbar-radius: 100px;--scrollbar-track: transparent;--scrollbar-thumb: rgba(255, 255, 255, .15);--scrollbar-thumb-hover: rgba(255, 255, 255, .3);--scrollbar-thumb-active: rgba(255, 255, 255, .4)}body.light-mode{--bg-color: #e2e8ed;--bg-gradient: radial-gradient(ellipse at top, #eff3f8 0%, #e9eef3 50%, #e2e8ed 100%);--container-bg: #eff3f8;--glass-border: 1px solid rgba(148, 163, 184, .2);--glass-shadow: 0 4px 24px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);--text-color-primary: #1e293b;--text-color-secondary: #475569;--border-color: rgba(148, 163, 184, .3);--seat-bg: #eff3f8;--seat-completed-bg: rgba(220, 252, 231, .95);--seat-completed-border: #22c55e;--seat-absent-bg: rgba(239, 243, 248, .95);--seat-absent-border: #94a3b8;--keypad-bg: rgba(239, 243, 248, .95);--keypad-hover-bg: rgba(226, 232, 240, .95);--btn-primary-bg: #f00842;--btn-primary-hover: #0ea5e9;--btn-cancel-bg: #ef4444;--btn-cancel-hover: #dc2626;--seat-active-text: #ea580c;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08);--shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);--shadow-glow: 0 0 24px rgba(14, 165, 233, .2);--scrollbar-track: transparent;--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .3);--scrollbar-thumb-active: rgba(0, 0, 0, .4)}body.battle-mode-active:not(.game-mode-suspended),body.light-mode.battle-mode-active:not(.game-mode-suspended){--bg-color: #fff8dc;--bg-gradient: radial-gradient(circle at 50% 50%, #fff8dc 0%, #ffe4b5 100%);--container-bg: rgba(255, 254, 245, .8);--seat-bg: rgba(255, 249, 230, .8);--text-color-primary: #2d2d3a;--text-color-secondary: #5a5a6e;--border-color: #ffe4b5;--keypad-bg: rgba(255, 239, 213, .8);--keypad-hover-bg: rgba(255, 228, 181, .9);--btn-primary-bg: #ffa500;--btn-primary-hover: #ff8c00;--shadow-glow: 0 0 30px rgba(255, 215, 0, .5);--seat-active-text: #6a1b9a}body.raid-boss-active:not(.game-mode-suspended),body.light-mode.raid-boss-active:not(.game-mode-suspended){--bg-color: #0d0d0d;--bg-gradient: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0d0d0d 100%);--container-bg: rgba(30, 30, 30, .95);--seat-bg: rgba(40, 40, 40, .9);--text-color-primary: #e8e8e8;--text-color-secondary: #a0a0a0;--border-color: #333;--keypad-bg: rgba(45, 45, 45, .95);--keypad-hover-bg: rgba(60, 60, 60, .95);--btn-primary-bg: #8b0000;--btn-primary-hover: #6b0000;--shadow-glow: 0 0 20px rgba(139, 0, 0, .3)}*{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);background-image:var(--bg-gradient);background-attachment:fixed;color:var(--text-color-primary);transition:background-color var(--transition-slow),background-image var(--transition-slow),color var(--transition-slow);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;min-height:100dvh;padding:1rem .5rem .5rem;padding-top:max(1rem,env(safe-area-inset-top));padding-left:max(.5rem,env(safe-area-inset-left));padding-right:max(.5rem,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom);margin:0;touch-action:manipulation;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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)}.test-screen.in-break .break-message{text-align:center;animation:fadeIn .5s ease-out}#testModeButtons,#practiceModeButtons{text-align:center;margin-top:1.25rem}#practiceModeButtons .btn{padding:var(--space-xl) var(--space-2xl);font-size:var(--font-size-2xl);max-width:22rem;border-radius:3rem;height:auto}@media(max-width:1366px){:root{--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 1.875rem;--font-size-3xl: 2.25rem;--space-xs: .375rem;--space-sm: .625rem;--space-md: .875rem;--space-lg: 1.125rem;--space-xl: 1.5rem;--space-2xl: 2.25rem}body{padding:.25rem}.container{min-height:96vh;min-height:96dvh;padding:var(--space-lg);border-radius:1.5rem}.classroom-layout,.layout-column{gap:var(--space-md)}.student-seat,.empty-seat{height:4.5rem;border-radius:var(--space-md)}.leaderboard-lists-wrapper{height:7rem}.mtc-header{padding:var(--space-xs) var(--space-md)}.mtc-logo{font-size:var(--font-size-xl)}.user-name{max-width:80px}.leaderboard-lists-wrapper{height:8.5rem}}@media(max-width:1024px){:root{--font-size-xs: .8125rem;--font-size-sm: .9375rem;--font-size-base: 1.0625rem;--font-size-lg: 1.375rem;--font-size-xl: 1.75rem;--font-size-2xl: 2.125rem;--font-size-3xl: 2.5rem;--space-xs: .4375rem;--space-sm: .6875rem;--space-md: .9375rem;--space-lg: 1.25rem;--space-xl: 1.75rem;--space-2xl: 2.5rem}.container{padding:var(--space-lg);width:95vw;min-height:95vh;min-height:95dvh}.selection-screen.active{min-height:85vh;display:flex;flex-direction:column;justify-content:space-between}.classroom-layout{display:grid;grid-template-columns:1fr 1fr;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);align-content:stretch;grid-auto-rows:1fr}.student-seat,.empty-seat{height:100%;min-height:4rem;max-height:5.5rem;overflow:hidden}.student-name{font-size:.875rem}.crown-indicator{font-size:1.25rem;flex-shrink:0}.test-level{font-size:.625rem;margin-top:.125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-seat.completed:after{font-size:1rem;top:.25rem;right:.25rem}#authBtn,#darkModeToggle{width:2.5rem;height:2.5rem}#leaderboardAndControlsWrapper{width:100%;gap:var(--space-xs);align-items:stretch;display:flex;flex-direction:row;justify-content:center}#teacherControlsContainer{transform:scale(.85);transform-origin:center;flex-shrink:0}.mode-switch{padding:.25rem;border-radius:1rem}.switch{width:3rem;height:1.75rem}.slider:before{height:1.25rem;width:1.25rem;left:.25rem;bottom:.25rem}input:checked+.slider:before{transform:translate(1.25rem)}.mode-label{font-size:.75rem;padding:0 var(--space-sm)}}@media(max-width:428px){:root{--font-size-xs: .8125rem;--font-size-sm: .9375rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.625rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--space-xs: .375rem;--space-sm: .625rem;--space-md: .875rem;--space-lg: 1.125rem;--space-xl: 1.5rem;--space-2xl: 2rem}body{padding:.5rem}.container{padding:var(--space-md);width:100%;max-width:100%}.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);gap:var(--space-sm)}.student-seat,.empty-seat{height:4.5rem}.mtc-header{padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-xs);flex-wrap:wrap;gap:var(--space-xs)}.mtc-logo{font-size:var(--font-size-lg);white-space:nowrap}.header-controls{flex-wrap:wrap;gap:var(--space-xs)}.end-game-btn,.add-mtc-practice-btn{font-size:.7rem;padding:.25rem .6rem}.header-mode-switch{padding:.125rem}.header-mode-switch .mode-segment{font-size:.65rem;padding:.3rem .5rem}.header-class-switch select{font-size:.65rem;padding:.3rem 1.4rem .3rem .5rem}.mode-badge{font-size:.75rem;padding:var(--space-xs) var(--space-sm)}.user-menu-btn{padding:var(--space-xs) var(--space-sm);font-size:.75rem}.user-name{display:none}#leaderboardAndControlsWrapper{flex-direction:column;gap:var(--space-lg)}#teacherControlsContainer{width:100%}.leaderboard-lists-wrapper{height:8rem}.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}.btn{width:100%;max-width:100%;margin:var(--space-xs) 0}}@media(max-width:375px){:root{--font-size-base: .9375rem;--font-size-lg: 1.125rem}.student-seat,.empty-seat{height:4rem}}html{scroll-behavior:smooth}.btn,.key,.student-seat,.admin-btn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*{text-rendering:optimizeLegibility;-webkit-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1}button,.btn,.key,.student-seat:not(.is-active),.admin-btn,input[type=checkbox],select,a{cursor:pointer}.loading{position:relative;pointer-events:none;opacity:.6}.loading:after{content:"...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;letter-spacing:.5em;animation:loadingDots 1.4s infinite}.connection-status{position:fixed;top:var(--space-md);right:var(--space-md);padding:var(--space-xs) var(--space-md);background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;font-size:var(--font-size-xs);color:var(--text-color-secondary);z-index:10003;display:flex;align-items:center;gap:var(--space-xs);opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}.connection-status.visible{opacity:1;transform:translateY(0)}.connection-status:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent-warning);animation:pulse 1.5s ease infinite}.connection-status.connected:before{background:var(--color-accent-success);animation:none}.connection-status.error:before{background:var(--color-accent-error)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}