:root{--blue: #64a9ff;--green: #6ed2b7;--yellow: #ffd97a;--purple: #d1c0ff;--navy: #1f2a44;--ink: #24304f;--muted: #5f6a86;--card: #ffffff;--outline: #e4e8ff;--shadow: 0 24px 70px rgba(31, 48, 79, .25)}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;background:linear-gradient(135deg,#cfe8ff,#f6f0ff 45%,#fff6db 75%,#e6fff3);font-family:Be Vietnam Pro,Plus Jakarta Sans,system-ui,-apple-system,sans-serif;color:var(--ink);overflow:hidden}canvas{display:block;touch-action:none;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}#game-container{width:100vw;height:100vh}#login-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 10% 15%,rgba(145,247,142,.24),transparent 36%),radial-gradient(circle at 87% 16%,rgba(179,212,255,.35),transparent 32%),radial-gradient(circle at 75% 88%,rgba(255,152,0,.24),transparent 34%),linear-gradient(160deg,#f2f9ea,#edf5e3 48%,#e2ebda);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:1000;overflow-y:auto}.overlay-decor{position:absolute;inset:0;pointer-events:none}.blob{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(52px);opacity:.4;animation:floaty 12s ease-in-out infinite}.blob-1{background:#b3d4ff;top:-4%;left:-4%}.blob-2{background:#ffd18f;bottom:2%;right:0%;animation-delay:-4s}.blob-3{background:#bffab6;top:44%;right:38%;animation-delay:-2s}.auth-shell{position:relative;width:min(1240px,100%);margin:0 auto;z-index:1}.auth-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:20px;background:#ffffffb8;border:1px solid rgba(42,49,39,.08);box-shadow:0 10px 26px #2a312714;margin-bottom:18px}.auth-topbar .brand{font-family:Plus Jakarta Sans,Nunito,sans-serif;font-weight:800;letter-spacing:-.4px;color:#2a3127;font-size:24px}.auth-topbar .brand-icon{color:#006b1b;font-size:30px}.auth-card{background:transparent;border-radius:30px;display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,520px);gap:20px;overflow:hidden}.auth-illustration{position:relative;background:linear-gradient(145deg,#ebf4e2,#e2edda);border-radius:30px;border:1px solid rgba(42,49,39,.08);box-shadow:0 24px 48px #2a312714;padding:34px 28px;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:left}.auth-illustration .glow{position:absolute;width:320px;height:320px;top:12%;left:50%;transform:translate(-50%);border-radius:50%;background:radial-gradient(circle,#91f78e61,#91f78e00 70%);pointer-events:none}.mascot-image{position:relative;width:100%;max-width:420px;align-self:center;object-fit:contain;filter:drop-shadow(0 24px 34px rgba(42,49,39,.18))}.hero-title{margin:4px 0 0;font-family:Plus Jakarta Sans,sans-serif;font-size:clamp(30px,3.8vw,56px);font-weight:800;line-height:1.15;letter-spacing:-.7px;color:#2a3127}.illustration-copy{margin:0;font-size:18px;color:#575e52;font-weight:500}.auth-content{background:#fff;border-radius:30px;border:1px solid rgba(42,49,39,.08);box-shadow:0 30px 70px #2a31271f;padding:34px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}.auth-header{display:flex;align-items:center;justify-content:space-between;gap:14px}#login-overlay .eyebrow{margin:0 0 6px;text-transform:uppercase;letter-spacing:1.6px;font-size:12px;color:#005e9f;font-weight:800}#auth-title{margin:0;font-family:Plus Jakarta Sans,sans-serif;font-size:34px;letter-spacing:.2px;line-height:1.1;color:#2a3127}.subtitle{margin:4px 0 0;color:#575e52;font-size:15px}.badge{display:inline-flex;align-items:center;gap:4px;background:#d1ffc8;color:#00691a;padding:8px 14px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:0 6px 12px #006b1b26}.tab-row{display:inline-flex;gap:8px;background:#ebf3e3;padding:5px;border-radius:999px;width:fit-content}.tab{border:none;background:transparent;color:#575e52;padding:10px 22px;border-radius:999px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,transform .2s}.tab.active{background:#006b1b;color:#fff;box-shadow:0 8px 18px #006b1b3d;transform:translateY(-1px)}.auth-form{display:none;flex-direction:column;gap:12px;margin-top:4px}.auth-form.active{display:flex}.auth-field{display:flex;flex-direction:column;gap:8px}.auth-field label{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#575e52}.auth-field input{width:100%;padding:14px 16px;border:2px solid transparent;background:#e2ebda;border-radius:14px;font-size:15px;font-weight:600;color:#2a3127;outline:none;transition:border .2s ease,box-shadow .2s ease,transform .1s ease}.auth-field input:focus{border-color:#006b1b;box-shadow:0 0 0 4px #006b1b26;background:#fff}.auth-field__feedback{min-height:16px;font-size:12px;color:#b02500}.auth-field.has-error input{border-color:#f95630;background:#fff1ed}.auth-field.valid input{border-color:#006b1b;background:#f5fff1}.auth-field--stacked{gap:10px}.password-meter{height:8px;width:100%;background:#d6e0cd;border-radius:12px;overflow:hidden}.password-meter span{display:block;height:100%;width:8%;background:var(--blue);transition:width .3s ease,background .3s ease}.strength-label{font-size:13px;font-weight:700;color:#575e52}.requirements{display:grid;grid-template-columns:1fr;gap:6px 10px;padding:0;margin:4px 0 0;list-style:none}.requirements li{display:flex;align-items:center;gap:8px;font-size:13px;color:#575e52;padding:8px 10px;border-radius:12px;background:#f2f9ea;transition:color .2s ease,background .2s ease}.requirements li:before{content:"•";color:#a8afa2;font-size:20px;line-height:1}.requirements li.met{color:#00691a;background:#dff6d9;font-weight:700}.requirements li.met:before{content:"✓";color:#22c55e}.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0}.remember{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#575e52;cursor:pointer}.remember input{width:18px;height:18px;accent-color:#006b1b}.link{color:#005e9f;font-weight:700;text-decoration:none;font-size:14px}#login-overlay .primary-btn,#login-overlay .ghost-btn,#login-overlay .social-btn{border:none;border-radius:14px;padding:14px 16px;font-size:16px;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s}#login-overlay .primary-btn{background:#006b1b;color:#fff;box-shadow:0 14px 28px #006b1b4d}#login-overlay .primary-btn:hover{transform:translateY(-3px)}#login-overlay .primary-btn:active{transform:translateY(0);box-shadow:0 8px 20px #006b1b3d}#login-overlay .ghost-btn{background:#ff9800;color:#4a2800;border:1px solid rgba(118,68,0,.1);margin-top:8px}#login-overlay .ghost-btn:hover{transform:translateY(-3px)}.divider{text-align:center;color:#72796d;font-weight:700;margin:8px 0}.divider span{background:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 6px 14px #2a312714}.social-row{display:flex;gap:10px;flex-wrap:wrap}#login-overlay .social-btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;flex:1;min-width:170px}#login-overlay .social-btn .icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}#login-overlay .social-btn:hover{transform:translateY(-3px)}#login-overlay .social-btn:active{transform:translateY(0);box-shadow:0 8px 20px #2a312729}#login-overlay .social-btn.google{background:#fff;color:#3c4043;border:1px solid #dadce0;box-shadow:0 4px 14px #3c40431f}#login-overlay .social-btn.facebook{background:#1877f2;color:#fff;box-shadow:0 6px 16px #1877f24d}#login-message,#signup-message{margin:6px 4px 0;font-size:14px;min-height:18px;font-weight:700;color:#b02500}.auth-trust-row{margin-top:16px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;color:#575e52;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}.auth-trust-row span{display:inline-flex;align-items:center;gap:8px;background:#ffffff9e;border:1px solid rgba(42,49,39,.08);border-radius:999px;padding:8px 14px}.inline-message{color:#575e52}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1100}.modal.open{display:flex}.modal__backdrop{position:absolute;inset:0;background:#24304f4d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal__dialog{position:relative;background:#fff;border-radius:22px;padding:26px 28px 30px;width:min(420px,92vw);box-shadow:0 20px 60px #1f304f47;border:1px solid rgba(36,48,79,.08);z-index:1}.modal__dialog h3{margin:4px 0 6px;font-size:22px;color:#2a3127}.modal__close{position:absolute;top:12px;right:12px;border:none;background:#f2f4ff;width:32px;height:32px;border-radius:50%;font-size:16px;font-weight:800;color:#575e52;cursor:pointer}.modal__close:hover{background:#e4e7ff}.modal__close:active{background:#d9dcff}@media(max-width:960px){#login-overlay{padding:18px;align-items:flex-start}.auth-topbar{border-radius:16px}.auth-card{grid-template-columns:1fr;gap:14px}.auth-illustration{min-height:220px;order:-1;text-align:center}.hero-title{font-size:clamp(26px,8vw,38px)}}@media(max-height:860px){#login-overlay{align-items:flex-start}}@media(max-width:640px){body{overflow:auto}.auth-topbar{padding:12px 14px}.auth-topbar .brand{font-size:20px}.auth-content{padding:24px 20px 28px}.auth-card{border-radius:22px}.social-row{flex-direction:column}.auth-row{flex-direction:column;align-items:flex-start}.auth-illustration{padding:24px 20px}#auth-title{font-size:30px}.illustration-copy{font-size:16px}}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes twinkle{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.quiz-overlay{position:fixed;inset:0;z-index:1200;font-family:Outfit,Be Vietnam Pro,sans-serif;pointer-events:auto}.quiz-overlay__backdrop{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(0,170,255,.18),transparent 30%),radial-gradient(circle at 80% 30%,rgba(255,184,0,.16),transparent 30%),#000000b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:0;pointer-events:auto}.quiz-overlay__panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(1100px,90vw);max-height:92vh;background:#f7f8fb;border:1px solid #e5e7eb;border-radius:18px;padding:24px;box-shadow:0 16px 60px #0f172a2e;color:#0f172a;z-index:1;pointer-events:auto;display:flex;flex-direction:column;overflow:hidden}.quiz-overlay__panel.small{width:min(520px,90vw);pointer-events:auto;z-index:2}.quiz-overlay button,.quiz-overlay input,.quiz-overlay textarea,.quiz-overlay label{pointer-events:auto}.quiz-overlay__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0;padding-bottom:10px;border-bottom:1px solid #e2e8f0}.quiz-overlay__body{flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin}.quiz-overlay__body::-webkit-scrollbar{width:8px}.quiz-overlay__body::-webkit-scrollbar-track{background:#ffffff14}.quiz-overlay__body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#22c55e,#0ea5e9);border-radius:8px;border:1px solid rgba(0,0,0,.25)}.quiz-overlay__header h2{margin:4px 0;font-size:28px;letter-spacing:.5px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#0f766e}.ghost-btn{background:#f1f5f9;border:1px solid #cbd5e1;color:#0f172a;border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .2s,transform .2s}.ghost-btn:hover{background:#e2e8f0;transform:translateY(-1px)}.quiz-overlay__section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px;margin-bottom:14px;box-shadow:0 4px 14px #0f172a0d}.quiz-overlay__section.grid{display:grid;grid-template-columns:1fr;gap:12px;flex:1;min-height:0}.chip-row{display:flex;gap:10px;margin-bottom:10px}.chip{background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a;padding:10px 16px;border-radius:12px;cursor:pointer;transition:background .2s,transform .1s,box-shadow .2s}.chip.active{background:linear-gradient(135deg,#22c55e,#0ea5e9);border-color:transparent;color:#0b0f1a;font-weight:700;box-shadow:0 6px 18px #0ea5e940}.chip:hover{transform:translateY(-1px)}.toggle-row{margin-top:4px}.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{display:none}.toggle__slider{position:relative;width:46px;height:26px;background:#ffffff1a;border-radius:16px;border:1px solid rgba(255,255,255,.15);transition:background .2s}.toggle__slider:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#e8f0ff;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle__slider{background:linear-gradient(135deg,#22c55e,#0ea5e9)}.toggle input:checked+.toggle__slider:after{transform:translate(20px)}.field label{display:block;margin-bottom:6px;font-size:14px;color:#1f2937;letter-spacing:.3px}.field textarea{width:100%;background:#fff;color:#0f172a;border:1px solid #d0d7e2;border-radius:12px;padding:12px;box-sizing:border-box;resize:vertical}.actions-inline{display:flex;gap:10px;margin:10px 0;align-items:center;flex-wrap:wrap}button.primary{background:linear-gradient(135deg,#22c55e,#0ea5e9);border:none;color:#0b0f1a;padding:10px 18px;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px #0ea5e940;transition:transform .1s,box-shadow .2s}button.primary:hover{transform:translateY(-1px)}button.primary:active{transform:translateY(0);box-shadow:0 4px 10px #0ea5e933}button.secondary{background:#eef2f7;border:1px solid #d0d7e2;color:#0f172a;padding:10px 18px;border-radius:12px;cursor:pointer;transition:background .2s,transform .1s}button.secondary:hover{background:#e2e8f0;transform:translateY(-1px)}button.secondary:active{transform:translateY(0)}button.ghost{background:transparent;border:1px dashed #cbd5e1;color:#0f172a;padding:10px 18px;border-radius:12px;cursor:pointer;transition:border-color .2s,color .2s,transform .1s}button.ghost:hover{border-color:#0ea5e9;color:#0ea5e9;transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed}.file-label{position:relative;overflow:hidden;background:#e0f2fe;border:1px solid #38bdf8;color:#0f172a;padding:10px 18px;border-radius:12px;cursor:pointer;box-shadow:0 6px 16px #38bdf840;transition:transform .1s,box-shadow .2s,background .2s}.file-label:hover{transform:translateY(-1px);background:#bae6fd}.file-label:active{transform:translateY(0);box-shadow:0 4px 10px #38bdf833}.file-label input{position:absolute;inset:0;opacity:0;cursor:pointer}.error-box{min-height:24px;font-size:13px;line-height:1.4;margin-top:6px}.error-line{margin-bottom:4px}.error-line.danger{color:#f87171}.error-line.success{color:#4ade80}.status-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:1px;background:#e2e8f0;color:#334155}.status-pill.success{background:#22c55e2e;color:#4ade80}.status-pill.danger{background:#f8717133;color:#fca5a5}.status-pill.muted{color:#334155}.preview-box{background:#0a1220;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;min-height:180px;max-height:65vh;overflow-y:auto;scrollbar-width:thin}.preview-box::-webkit-scrollbar{width:8px}.preview-box::-webkit-scrollbar-track{background:#e2e8f0}.preview-box::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#22c55e,#0ea5e9);border-radius:8px;border:1px solid rgba(14,165,233,.35)}.quiz-preview-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:10px}.q-edit{width:100%;background:#fff;color:#0f172a;border:1px solid #d0d7e2;border-radius:10px;padding:8px;box-sizing:border-box;margin:6px 0 10px}.q-title{font-weight:700;margin-bottom:4px}.q-answers{font-size:14px;color:#cdd9f0}.answers-grid{display:grid;grid-template-columns:1fr;gap:6px}.answer-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;padding:6px 8px;border-radius:10px;box-shadow:0 1px 4px #0f172a0d}.badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:11px;margin-right:6px;text-transform:uppercase;letter-spacing:.5px}.badge.success{background:#22c55e2e;color:#4ade80}.badge.muted{background:#e2e8f0;color:#475569}.muted-text{color:#64748b;font-size:13px}.section-title{font-size:14px;color:#334155;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}.quiz-overlay__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}.hint{color:#475569;font-size:13px}.footer-actions{display:flex;gap:10px}.upload-hint{margin:6px 0 10px;padding:10px 12px;border-radius:10px;border:1px dashed #cbd5e1;background:#f8fafc;color:#334155;font-size:13px;line-height:1.5}.upload-hint strong{color:#0f172a}.upload-hint ul{margin:6px 0 0 18px;padding:0}.upload-hint li{margin:2px 0}.status-box{margin-top:8px;padding:10px 12px;border-radius:10px;border:1px solid #dbe3ef;background:#f8fafc;font-size:13px;line-height:1.4}.status-box.success{border-color:#22c55e4d;color:#4ade80}.status-box.danger{border-color:#f871714d;color:#fca5a5}.status-box.muted{color:#475569}.warning-box{margin:6px 0 10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,200,0,.4);background:#ffc80014;color:#f8d477;font-size:13px}.loading-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#cbd5e1;font-size:13px}.loading-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 1s infinite ease-in-out}@keyframes pulse{0%{transform:scale(1);opacity:.9}50%{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:.9}}.waiting-overlay{position:fixed;inset:0;z-index:1800;display:flex;align-items:center;justify-content:center;pointer-events:auto;font-family:Outfit,sans-serif}.waiting-overlay__backdrop{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(34,197,94,.12),transparent 35%),radial-gradient(circle at 80% 20%,rgba(14,165,233,.12),transparent 35%),#000000a6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.waiting-overlay__panel{position:relative;width:min(640px,90vw);max-height:90vh;background:#0f172a;color:#e5e7eb;border:1px solid #1f2937;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px #00000059}.waiting-overlay__header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.waiting-overlay__eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#38bdf8}.waiting-overlay__title{font-size:clamp(18px,2vw,22px);font-weight:700}.waiting-overlay__owner{background:#ffffff0f;padding:8px 12px;border-radius:10px;font-size:14px;color:#cbd5e1}.waiting-overlay__list{max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px}.waiting-overlay__list::-webkit-scrollbar{width:8px}.waiting-overlay__list::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:8px}.waiting-player{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:12px}.waiting-player__avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#22c55e,#0ea5e9);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#0b0f16}.waiting-player__meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.waiting-player__name{font-size:16px;font-weight:600;color:#f8fafc}.waiting-player__id{font-size:12px;color:#94a3b8;word-break:break-all}.waiting-player__owner-pill{font-size:12px;padding:4px 8px;border-radius:999px;background:#22c55e33;color:#4ade80}.waiting-player--empty{justify-content:center;color:#94a3b8;font-style:italic}.waiting-overlay__controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.waiting-overlay__spacer{flex:1}.waiting-btn{border:none;border-radius:10px;padding:12px 16px;font-weight:700;cursor:pointer;font-family:Outfit,sans-serif;transition:transform .12s ease,box-shadow .2s ease,opacity .2s}.waiting-btn:disabled{opacity:.6;cursor:not-allowed}.waiting-btn--primary{background:linear-gradient(135deg,#22c55e,#16a34a);color:#0b0f16;box-shadow:0 10px 30px #22c55e40}.waiting-btn--danger{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}.waiting-btn--ghost{background:#ffffff14;color:#e5e7eb;border:1px solid rgba(255,255,255,.16);padding:8px 12px}.waiting-btn:not(:disabled):hover{transform:translateY(-1px)}.waiting-btn--ghost:not(:disabled):hover{border-color:#ffffff40}@media(max-width:640px){.waiting-overlay__panel{padding:16px;gap:12px}.waiting-player{padding:8px 10px}}