* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;color: #0f172a;background-color: #f8fafc;-webkit-font-smoothing: antialiased;}.preload {position: fixed;inset: 0;width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;z-index: 99999;background: radial-gradient(circle at 10% 15%, rgba(56, 189, 248, 0.12) 0%, transparent 45%), radial-gradient(circle at 90% 85%, rgba(245, 158, 11, 0.12) 0%, transparent 45%), rgba(248, 250, 252, 0.96);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s ease;}.preload.fade-out {opacity: 0;visibility: hidden;pointer-events: none;}.game-preloader-card {position: relative;background: #ffffff;border-radius: 28px;border: 2px solid #eef2f6;box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.7);padding: 36px 32px 30px 32px;display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 360px;width: 88%;animation: preloader-card-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);}@keyframes preloader-card-enter {from {opacity: 0;transform: scale(0.92) translateY(12px);}to {opacity: 1;transform: scale(1) translateY(0);}}.game-preloader-emblem {position: relative;width: 84px;height: 84px;margin-bottom: 20px;display: flex;align-items: center;justify-content: center;}.game-preloader-ring {position: absolute;inset: -4px;border-radius: 26px;background: conic-gradient(from 0deg, var(--school-primary), #f59e0b, #10b981, var(--school-primary));animation: preloader-spin 3s linear infinite;filter: blur(1px);}@keyframes preloader-spin {to {transform: rotate(1turn);}}.game-preloader-icon {position: relative;z-index: 2;width: 74px;height: 74px;border-radius: 22px;background: #ffffff;display: flex;align-items: center;justify-content: center;box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);}.game-preloader-icon i {font-size: 2rem;color: var(--school-primary);animation: preloader-bounce 1.6s ease-in-out infinite;}@keyframes preloader-bounce {0%, 100% {transform: scale(1);}50% {transform: scale(1.15);}}.game-preloader-title {font-size: 1.15rem;font-weight: 800;color: #0f172a;margin-bottom: 4px;letter-spacing: -0.02em;line-height: 1.3;}.game-preloader-subtitle {font-size: 0.85rem;font-weight: 600;color: #64748b;margin-bottom: 22px;line-height: 1.4;}.game-preloader-track {width: 100%;height: 8px;background: #f1f5f9;border-radius: 9999px;overflow: hidden;position: relative;margin-bottom: 20px;}.game-preloader-fill {height: 100%;width: 45%;background: linear-gradient(90deg, var(--school-primary), #f59e0b);border-radius: 9999px;animation: preloader-fill-move 1.4s ease-in-out infinite;}@keyframes preloader-fill-move {0% {transform: translateX(-100%);width: 25%;}50% {width: 65%;}100% {transform: translateX(350%);width: 35%;}}.game-preloader-badge {display: inline-flex;align-items: center;gap: 6px;padding: 6px 14px;background: #f8fafc;border: 1.5px solid #e2e8f0;border-radius: 9999px;font-size: 0.74rem;font-weight: 700;color: #475569;}.game-preloader-badge i {color: #10b981;font-size: 0.85rem;}.preload .cload {width: 48px;height: 48px;border: 4px solid rgba(255, 255, 255, 0.25);border-top-color: #ffffff;border-radius: 50%;animation: preloader-spin 0.8s infinite linear;}:root {--game-bg-gradient: radial-gradient(circle at 10% 15%, rgba(56, 189, 248, 0.08) 0%, transparent 45%), radial-gradient(circle at 90% 85%, rgba(245, 158, 11, 0.08) 0%, transparent 45%), linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);--game-card-bg: #ffffff;--game-border: #f1f5f9;--game-text-main: #0f172a;--game-text-muted: #64748b;--game-gold: #f59e0b;--game-gold-bg: #fffbeb;--game-gold-border: #fde68a;--game-emerald: #10b981;--game-emerald-bg: #ecfdf5;--game-emerald-border: #a7f3d0;--game-blue: #0284c7;--game-blue-bg: #f0f9ff;--game-blue-border: #bae6fd;}.game-lobby-page {position: relative;min-height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;padding: 32px 20px;background: var(--game-bg-gradient);overflow-x: hidden;}.game-bg-shapes {position: absolute;inset: 0;pointer-events: none;overflow: hidden;z-index: 1;}.game-shape {position: absolute;border-radius: 50%;filter: blur(50px);opacity: 0.5;animation: game-shape-float 12s ease-in-out infinite alternate;}.game-shape-1 {width: 380px;height: 380px;background: rgba(56, 189, 248, 0.15);top: -80px;left: -80px;}.game-shape-2 {width: 420px;height: 420px;background: rgba(245, 158, 11, 0.12);bottom: -100px;right: -100px;animation-duration: 16s;animation-direction: alternate-reverse;}.game-shape-3 {width: 260px;height: 260px;background: rgba(16, 185, 129, 0.12);top: 40%;left: 60%;animation-duration: 14s;}@keyframes game-shape-float {0% {transform: translate(0, 0) scale(1);}50% {transform: translate(30px, -25px) scale(1.06);}100% {transform: translate(-20px, 20px) scale(0.96);}}.game-lobby-card {position: relative;z-index: 2;width: 100%;max-width: 1240px;min-height: min(88vh, 800px);background: var(--game-card-bg);border-radius: 32px;border: 2px solid #f1f5f9;box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.7);display: flex;overflow: hidden;}.game-form-panel {flex: 0 0 490px;width: 490px;padding: 40px 42px 32px 42px;display: flex;flex-direction: column;justify-content: space-between;background: #ffffff;border-right: 1px solid #f1f5f9;position: relative;z-index: 3;}.game-form-inner {display: flex;flex-direction: column;height: 100%;justify-content: space-between;}.game-form-top {display: flex;flex-direction: column;}.game-top-nav {margin-bottom: 22px;}.game-back-pill {display: inline-flex;align-items: center;gap: 8px;padding: 8px 16px;border-radius: 100px;background: #f8fafc;border: 1.5px solid #e2e8f0;color: #475569;font-size: 0.82rem;font-weight: 700;text-decoration: none;transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);}.game-back-pill:hover {background: #f1f5f9;color: #0f172a;transform: translateX(-4px);border-color: #cbd5e1;}.game-back-pill i {font-size: 0.78rem;transition: transform 0.2s ease;}.game-back-pill:hover i {transform: translateX(-2px);}.game-daily-pill {display: flex;align-items: center;gap: 12px;background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);border: 2px solid #fde68a;border-radius: 20px;padding: 10px 16px;margin-bottom: 20px;box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.15);position: relative;overflow: hidden;}.game-pill-fire {width: 38px;height: 38px;border-radius: 12px;background: #f59e0b;color: #ffffff;display: flex;align-items: center;justify-content: center;font-size: 1.15rem;box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);animation: game-flame-pulse 2s infinite ease-in-out;}@keyframes game-flame-pulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.08);}}.game-pill-text {flex: 1;display: flex;flex-direction: column;}.game-pill-title {font-size: 0.82rem;font-weight: 800;color: #92400e;text-transform: uppercase;letter-spacing: 0.04em;line-height: 1.2;}.game-pill-sub {font-size: 0.76rem;font-weight: 600;color: #b45309;line-height: 1.2;}.game-xp-badge {background: #f59e0b;color: #ffffff;font-size: 0.75rem;font-weight: 900;padding: 4px 10px;border-radius: 100px;box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);letter-spacing: 0.03em;}.game-heading {margin-bottom: 22px;}.game-heading h1 {font-size: 1.8rem;font-weight: 800;color: #0f172a;letter-spacing: -0.025em;line-height: 1.2;margin-bottom: 6px;}.game-heading p {font-size: 0.92rem;font-weight: 500;color: #64748b;line-height: 1.5;margin: 0;}.game-alert-box {display: none;border-radius: 14px;padding: 12px 16px;font-size: 0.88rem;font-weight: 600;margin-bottom: 18px;}.game-field-group {margin-bottom: 18px;text-align: left;}.game-label-row {display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;}.game-label {font-size: 0.85rem;font-weight: 700;color: #334155;margin: 0;}.game-forgot-link {font-size: 0.82rem;font-weight: 700;color: #0284c7;text-decoration: none;cursor: pointer;transition: color 0.15s ease;}.game-forgot-link:hover {color: #0369a1;text-decoration: underline;}.game-input-wrap {position: relative;width: 100%;}.game-input-icon {position: absolute;left: 16px;top: 50%;transform: translateY(-50%);color: #94a3b8;font-size: 1rem;pointer-events: none;transition: color 0.2s ease;}.game-input {width: 100%;height: 52px;background: #f8fafc;border: 2px solid #e2e8f0;border-radius: 16px;padding: 0 16px 0 48px;font-size: 0.95rem;font-weight: 600;color: #0f172a;outline: none;transition: all 0.2s ease;}.game-input::placeholder {color: #94a3b8;font-weight: 500;}.game-input:focus {background: #ffffff;border-color: var(--school-primary, #0284c7);box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);}.game-input:focus + .game-input-icon, .game-input-wrap:focus-within .game-input-icon {color: var(--school-primary, #0284c7);}.game-pwd-toggle {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);background: none;border: none;color: #94a3b8;font-size: 1.05rem;cursor: pointer;padding: 8px;border-radius: 8px;display: flex;align-items: center;justify-content: center;transition: color 0.2s ease, background-color 0.2s ease;}.game-pwd-toggle:hover {color: #334155;background: #f1f5f9;}.game-btn-3d {position: relative;width: 100%;height: 56px;margin-top: 10px;background: var(--btn-color, #10b981);color: var(--school-text, #ffffff);border: none;border-radius: 18px;font-family: inherit;font-size: 1rem;font-weight: 800;letter-spacing: 0.04em;text-transform: uppercase;display: flex !important;align-items: center !important;justify-content: center !important;gap: 10px !important;cursor: pointer;box-shadow: 0 6px 0 var(--btn-shadow, #059669), 0 12px 24px rgba(0, 0, 0, 0.08);transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;user-select: none;-webkit-user-select: none;line-height: 1 !important;}.game-btn-3d span {display: inline-block;line-height: 1;}.game-btn-3d .game-btn-bolt {display: inline-flex !important;align-items: center !important;justify-content: center !important;width: auto !important;height: auto !important;font-size: 1.05rem !important;line-height: 1 !important;margin: 0 !important;padding: 0 !important;vertical-align: middle !important;border-radius: 0 !important;position: static !important;transform: none !important;transition: transform 0.2s ease;}.game-btn-3d:hover {transform: translateY(-2px);box-shadow: 0 8px 0 var(--btn-shadow, #059669), 0 16px 28px rgba(0, 0, 0, 0.1);}.game-btn-3d:hover .game-btn-bolt {transform: scale(1.2) !important;}.game-btn-3d:active {transform: translateY(4px);box-shadow: 0 2px 0 var(--btn-shadow, #059669), 0 6px 12px rgba(0, 0, 0, 0.06);}#login:disabled, .game-btn-3d:disabled {background: #cbd5e1 !important;color: #64748b !important;box-shadow: 0 4px 0 #94a3b8 !important;cursor: not-allowed !important;transform: none !important;opacity: 0.85;}.game-footer-bar {position: relative !important;bottom: auto !important;left: auto !important;width: 100% !important;display: flex !important;align-items: center !important;justify-content: center !important;gap: 16px !important;margin-top: 28px !important;padding-top: 16px !important;padding-bottom: 4px !important;border-top: 1px solid #f1f5f9;font-size: 0.82rem !important;font-weight: 600 !important;color: #64748b !important;z-index: 5;}.game-footer-link {color: #64748b;text-decoration: none;cursor: pointer;transition: color 0.15s ease;}.game-footer-link:hover {color: #0284c7;}.game-footer-dot {color: #cbd5e1;}.game-showcase-panel {flex: 1;min-width: 0;background: linear-gradient(145deg, #f8fafc 0%, #edf4fc 100%);display: flex;align-items: center;justify-content: center;padding: 40px 24px;position: relative;overflow: hidden;}.game-showcase-dots {position: absolute;inset: 0;background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);background-size: 24px 24px;opacity: 0.55;pointer-events: none;}.game-banner-wrapper {position: relative;width: 100%;height: 100%;max-height: 680px;display: flex;align-items: center;justify-content: center;z-index: 2;padding: 28px 12px;}.game-banner-frame {position: relative;max-width: 100%;max-height: 100%;display: flex;align-items: center;justify-content: center;border-radius: 24px;overflow: hidden;box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);background: #ffffff;}.game-banner-img {max-width: 100%;max-height: 100%;width: auto;height: auto;object-fit: contain;display: block;border-radius: 24px;}.game-achievement-badge {position: absolute;display: flex;align-items: center;gap: 12px;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);padding: 10px 16px;border-radius: 16px;border: 2px solid #ffffff;box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);z-index: 10;pointer-events: auto;transition: transform 0.3s ease, box-shadow 0.3s ease;}.game-achievement-badge:hover {transform: scale(1.04);box-shadow: 0 20px 40px -4px rgba(15, 23, 42, 0.16);}.game-achievement-badge.badge-top {top: 16px;right: 20px;animation: game-float-1 4.5s ease-in-out infinite;}.game-achievement-badge.badge-bottom {bottom: 16px;left: 20px;animation: game-float-2 5s ease-in-out infinite;}@keyframes game-float-1 {0%, 100% {transform: translateY(0);}50% {transform: translateY(-6px);}}@keyframes game-float-2 {0%, 100% {transform: translateY(0);}50% {transform: translateY(6px);}}.game-badge-icon {width: 38px;height: 38px;border-radius: 12px;display: flex;align-items: center;justify-content: center;font-size: 1.05rem;flex-shrink: 0;}.game-badge-icon.badge-gold {background: #fef3c7;color: #d97706;border: 1.5px solid #fde68a;box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);}.game-badge-icon.badge-emerald {background: #d1fae5;color: #059669;border: 1.5px solid #a7f3d0;box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);}.game-badge-text {display: flex;flex-direction: column;gap: 2px;text-align: left;}.game-badge-text strong {font-size: 0.84rem;font-weight: 700;color: #0f172a;line-height: 1.25;}.game-badge-text span {font-size: 0.72rem;font-weight: 600;color: #64748b;line-height: 1.25;}.warning-error, .warning-success, .warning-think {width: 170px !important;max-width: 80% !important;height: auto !important;margin: 0 auto 14px auto !important;display: block !important;object-fit: contain !important;}.warning {background: #ef4444;border-radius: 12px;padding: 10px 16px;color: #ffffff;font-weight: 600;text-align: center;font-size: 0.9rem;margin-bottom: 12px;}.success {background: #10b981;border-radius: 12px;padding: 10px 16px;color: #ffffff;font-weight: 600;text-align: center;font-size: 0.9rem;margin-bottom: 12px;}.swal2-container {z-index: 100000 !important;}.swal2-popup {border-radius: 28px !important;padding: 28px 24px !important;background: #ffffff !important;box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.25) !important;border: 1.5px solid #e2e8f0 !important;font-family: inherit !important;max-width: 420px !important;width: 90% !important;}.swal2-html-container {overflow: hidden !important;font-size: 0.96rem !important;font-weight: 600 !important;color: #334155 !important;line-height: 1.5 !important;margin: 10px 0 20px 0 !important;}.swal2-html-container img {width: 170px !important;max-width: 80% !important;height: auto !important;margin: 0 auto 14px auto !important;display: block !important;object-fit: contain !important;}.swal2-actions {margin-top: 10px !important;}.swal2-confirm {border-radius: 14px !important;padding: 12px 32px !important;font-size: 0.95rem !important;font-weight: 800 !important;letter-spacing: 0.03em !important;box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18) !important;border: none !important;}.modal-content {border-radius: 24px !important;background-color: #ffffff !important;border: 1.5px solid #e2e8f0 !important;color: #1e293b !important;overflow: hidden;box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;}.modal-header {padding: 18px 24px !important;border-bottom: 1px solid #f1f5f9 !important;}.modal-body {padding: 28px !important;color: #334155 !important;line-height: 1.65;background-color: #ffffff !important;}.modal-footer {padding: 16px 24px !important;border-top: 1px solid #f1f5f9 !important;background-color: #f8fafc !important;}.modal-success {display: flex;align-items: center;justify-content: center;position: fixed;inset: 0;width: 100%;height: 100%;background: rgba(15, 23, 42, 0.45);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);z-index: 100000;}.modal-success .modal-content {background-color: #ffffff !important;border: 1.5px solid #e2e8f0 !important;padding: 36px 28px;border-radius: 24px;text-align: center;position: relative;max-width: 440px;width: 90%;box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);}.success-icon img {width: 64px;margin-bottom: 16px;}.modal-success h2 {font-size: 1.4rem;font-weight: 800;color: #0f172a;margin-bottom: 8px;}.modal-success p {font-size: 0.94rem;color: #64748b;margin: 0;}.close-success {position: absolute;top: 14px;right: 14px;font-size: 1.3rem;cursor: pointer;color: #64748b;display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 50%;background: #f1f5f9;border: 1px solid #e2e8f0;transition: all 0.2s ease;}.close-success:hover {background: #e2e8f0;color: #0f172a;}.login-container {display: flex;min-height: 100vh;}.login-left {flex: 0 0 auto;height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;}.login-left img {height: 100%;width: auto;display: block;object-fit: contain;}.login-right {flex: 1;min-width: 400px;background-color: #fdfdfd;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;padding: 20px;}.login-form-container {width: 100%;max-width: 400px;text-align: center;margin-bottom: 30px;}.form-group {margin-bottom: 15px;text-align: left;}.password-container {position: relative;}.toggle-password {position: absolute;top: 50%;right: 10px;transform: translateY(-50%);cursor: pointer;}.forgot-password {display: block;text-align: right;margin-top: 10px;font-size: 14px;color: #0284c7;}.login-container .login-footer {width: 100%;position: absolute;bottom: 10px;left: 0;display: flex;justify-content: space-between;padding: 0 20px;}.privacy-policy, .terms-conditions {font-size: 14px;color: #0284c7;text-decoration: none;}@media (max-width: 1200px) {.game-form-panel {flex: 0 0 440px;width: 440px;padding: 36px 30px;}.game-showcase-panel {padding: 36px 16px;}.game-banner-wrapper {padding: 24px 6px;}.game-achievement-badge.badge-top {top: 12px;right: 14px;}.game-achievement-badge.badge-bottom {bottom: 12px;left: 14px;}}@media (max-width: 991px) {.game-lobby-page {min-height: 100vh;min-height: 100dvh;padding: 24px 16px 36px 16px;display: flex;align-items: center;justify-content: center;}.game-lobby-card {flex-direction: column;width: 100%;max-width: 460px;min-height: auto;border-radius: 28px;margin: 0 auto;overflow: hidden;box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(226, 232, 240, 0.7);}.game-form-panel {flex: 1;width: 100%;padding: 28px 22px 24px 22px;border-right: none;display: flex;flex-direction: column;}.game-showcase-panel {display: none !important;}.game-top-nav {margin-bottom: 16px;}.game-back-pill {padding: 7px 14px;font-size: 0.8rem;}.game-daily-pill {margin-bottom: 18px;padding: 10px 14px;border-radius: 16px;}.game-pill-fire {width: 34px;height: 34px;font-size: 1rem;border-radius: 10px;}.game-pill-title {font-size: 0.78rem;}.game-pill-sub {font-size: 0.72rem;}.game-xp-badge {font-size: 0.72rem;padding: 3px 8px;}.game-heading {margin-bottom: 20px;}.game-heading h1 {font-size: 1.6rem;margin-bottom: 4px;}.game-heading p {font-size: 0.88rem;line-height: 1.45;}.game-field-group {margin-bottom: 16px;}.game-label {font-size: 0.84rem;}.game-forgot-link {font-size: 0.8rem;}.game-input {height: 50px;font-size: 0.92rem;border-radius: 14px;}.game-btn-3d {height: 52px;font-size: 0.95rem;margin-top: 6px;border-radius: 16px;}.game-footer-bar {margin-top: 22px !important;padding-top: 14px !important;padding-bottom: 4px !important;font-size: 0.8rem !important;gap: 8px 14px !important;}}@media (max-width: 480px) {.game-lobby-page {padding: 16px 12px 24px 12px;}.game-form-panel {padding: 24px 18px 20px 18px;}.game-heading h1 {font-size: 1.5rem;}.game-btn-3d {height: 50px;font-size: 0.9rem;letter-spacing: 0.03em;}.game-footer-bar {margin-top: 18px !important;padding-top: 12px !important;font-size: 0.78rem !important;}}