: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:Nunito,Fredoka,Inter,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:24px;background:radial-gradient(circle at 20% 20%,rgba(111,207,255,.25),transparent 30%),radial-gradient(circle at 80% 15%,rgba(255,217,122,.28),transparent 28%),radial-gradient(circle at 30% 80%,rgba(110,210,183,.26),transparent 26%),linear-gradient(135deg,#fffc,#ffffffb3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;overflow-y:auto}.overlay-decor{position:absolute;inset:0;pointer-events:none}.blob{position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(40px);opacity:.65;animation:floaty 12s ease-in-out infinite}.blob-1{background:#bde0ff;top:6%;left:8%}.blob-2{background:#ffe8a3;bottom:12%;right:12%;animation-delay:-4s}.blob-3{background:#d9f7e8;top:50%;right:45%;animation-delay:-2s}.stars span{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffffffe6;animation:twinkle 3s ease-in-out infinite}.stars span:nth-child(1){top:14%;left:38%;animation-delay:.2s}.stars span:nth-child(2){top:26%;left:78%;animation-delay:.8s}.stars span:nth-child(3){top:64%;left:22%;animation-delay:1.2s}.stars span:nth-child(4){top:78%;left:70%;animation-delay:1.7s}.stars span:nth-child(5){top:44%;left:54%;animation-delay:2.1s}.auth-shell{position:relative;width:min(1200px,96vw);z-index:1}.auth-card{background:var(--card);border-radius:28px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid rgba(36,48,79,.06)}.auth-illustration{position:relative;background:linear-gradient(160deg,#e5f3ff,#f9f2ff 60%,#fff7e2);padding:42px 36px;display:flex;flex-direction:column;justify-content:center;gap:24px}.auth-illustration .bubble{position:absolute;border-radius:50%;opacity:.36;filter:blur(1px);animation:floaty 10s ease-in-out infinite}.bubble.planet{width:110px;height:110px;background:#8fd3ff;top:12%;right:18%;animation-delay:-1s}.bubble.comet{width:140px;height:140px;background:#ffe29a;bottom:14%;left:18%;animation-delay:-3s}.bubble.book{width:90px;height:90px;background:#d0b7ff;top:38%;left:12%;animation-delay:-2s}.floating-tags{display:flex;gap:10px;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:14px;font-weight:700;font-size:13px;letter-spacing:.2px;color:var(--navy);background:#ffffffb8;box-shadow:0 8px 20px #24304f1a}.tag-green{background:#e6fbf2;color:#10714b}.tag-yellow{background:#fff4d8;color:#a66a00}.tag-purple{background:#f1eaff;color:#5b3fa3}.hero-graphic{width:100%;max-width:360px;align-self:center;filter:drop-shadow(0 12px 30px rgba(31,48,79,.12))}.illustration-copy{margin:0;font-size:16px;color:var(--muted);font-weight:600}.auth-content{padding:40px 42px;display:flex;flex-direction:column;gap:18px}.auth-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.eyebrow{margin:0 0 6px;text-transform:uppercase;letter-spacing:1.4px;font-size:12px;color:#6b7aa6;font-weight:800}#auth-title{margin:0;font-size:28px;letter-spacing:.2px;color:var(--navy)}.subtitle{margin:4px 0 0;color:var(--muted);font-size:15px}.badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#d9f7e8,#cde7ff);color:#0f5132;padding:10px 14px;border-radius:999px;font-weight:800;font-size:12px;box-shadow:0 6px 16px #24304f26}.tab-row{display:inline-flex;gap:10px;background:#f5f7ff;padding:6px;border-radius:14px;width:fit-content}.tab{border:none;background:transparent;color:var(--muted);padding:10px 18px;border-radius:12px;font-weight:800;cursor:pointer;transition:background .2s,color .2s,transform .1s}.tab.active{background:#fff;color:var(--navy);box-shadow:0 8px 24px #1f304f24;transform:translateY(-1px)}.auth-form{display:none;flex-direction:column;gap:12px;margin-top:4px}.auth-form.active{display:flex}.auth-field{position:relative;display:flex;flex-direction:column;gap:6px}.auth-field input{width:100%;padding:16px 14px 14px;border:2px solid var(--outline);background:#f9fbff;border-radius:16px;font-size:15px;font-weight:600;color:var(--navy);outline:none;transition:border .2s ease,box-shadow .2s ease,transform .1s ease}.auth-field input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #64a9ff2e}.auth-field label{position:absolute;left:14px;top:16px;padding:0 4px;background:transparent;color:var(--muted);font-size:14px;transition:all .16s ease;pointer-events:none}.auth-field input:not(:placeholder-shown)+label,.auth-field input:focus+label{top:-6px;left:12px;font-size:12px;color:var(--blue);background:#fff}.auth-field__feedback{min-height:14px;font-size:12px;color:#e36464;padding-left:4px}.auth-field.has-error input{border-color:#f98d8d;background:#fff7f7}.auth-field.valid input{border-color:#6ed2b7;background:#f4fffb}.auth-field--stacked{gap:10px}.password-meter{height:10px;width:100%;background:#eef2ff;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:var(--muted)}.requirements{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,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:var(--muted);padding:6px 8px;border-radius:12px;background:#f6f7ff;transition:color .2s ease,background .2s ease}.requirements li:before{content:"•";color:#c0c5de;font-size:20px;line-height:1}.requirements li.met{color:#0f5132;background:#e8f9f1;font-weight:700}.requirements li.met:before{content:"✓";color:#22c55e}.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.remember{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--muted);cursor:pointer}.remember input{width:18px;height:18px;accent-color:var(--blue)}.link{color:var(--blue);font-weight:700;text-decoration:none;font-size:14px}.primary-btn,.ghost-btn,.social-btn{border:none;border-radius:16px;padding:16px;font-size:16px;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s}.primary-btn{background:linear-gradient(135deg,var(--blue),#7ce0c3);color:#0f172a;box-shadow:0 12px 30px #64a9ff59}.primary-btn:hover{transform:translateY(-3px)}.primary-btn:active{transform:translateY(0);box-shadow:0 8px 20px #64a9ff47}.ghost-btn{background:#f2f5ff;color:var(--navy);border:1px dashed #cbd5ff;margin-top:8px}.ghost-btn:hover{transform:translateY(-3px);color:#08beeb}.divider{text-align:center;color:var(--muted);font-weight:700;margin:8px 0}.divider span{background:#fff;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px #1f304f14}.social-row{display:flex;gap:10px;flex-wrap:wrap}.social-btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;flex:1;min-width:180px}.social-btn .icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.social-btn:hover{transform:translateY(-3px)}.social-btn:active{transform:translateY(0);box-shadow:0 8px 20px #64a9ff47}.social-btn.google{background:#fff;color:#3c4043;border:1px solid #dadce0;box-shadow:0 4px 14px #3c40431f}.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:#e36464}.inline-message{color:var(--muted)}.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:var(--navy)}.modal__close{position:absolute;top:12px;right:12px;border:none;background:#f2f4ff;width:32px;height:32px;border-radius:50%;font-size:18px;font-weight:800;color:var(--muted);cursor:pointer}.modal__close:hover{background:#e4e7ff}.modal__close:active{background:#d9dcff}@media(max-width:960px){#login-overlay{padding:18px}.auth-card{grid-template-columns:1fr}.auth-illustration{min-height:260px;order:-1}}@media(max-width:640px){body{overflow:auto}.auth-content{padding:28px 24px 32px}.auth-card{border-radius:22px}.social-row{flex-direction:column}.auth-row{flex-direction:column;align-items:flex-start}.auth-illustration{padding:28px 22px}}@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,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}.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:#7dd3fc}.ghost-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.15);color:#e8f0ff;border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .2s,transform .2s}.ghost-btn:hover{background:#ffffff1f;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:#ffffff14}.status-pill.success{background:#22c55e2e;color:#4ade80}.status-pill.danger{background:#f8717133;color:#fca5a5}.status-pill.muted{color:#9fb4cc}.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:#e8f0ff}.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 rgba(255,255,255,.08);background:#ffffff05;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:#cbd5e1}.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}}