.interactive-map-container{width:100%;max-width:100%;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 4px 10px #0000001a;background:#cef}.interactive-map-container.map-small{max-width:85%}@media (min-width: 769px){.interactive-map-container.map-heel-nederland{max-width:55%}}.map-wrapper{position:relative;width:100%}.map-image{width:100%;display:block}.zoom-wrapper{width:100%!important;height:100%!important}.zoom-content{width:100%!important}.map-pin{position:absolute;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}.pin-marker{transition:all .2s ease;box-shadow:0 2px 4px #0003}.pin-marker.steden{width:20px;height:20px;background:#ff4757;border:2px solid white;border-radius:50%}.pin-marker.provincies{width:24px;height:24px;background:#ffa502;border:2px solid white;border-radius:4px;transform:rotate(45deg)}.pin-marker.wateren{width:22px;height:22px;background:#1e90ff;border:2px solid white;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.pin-marker.gebieden{width:24px;height:24px;background:#2ed573;border:2px solid white;border-radius:6px;opacity:.9}.map-pin:hover .pin-marker{transform:scale(1.3);z-index:20;border-color:#333}.map-pin:hover .pin-marker.wateren{transform:scale(1.3) rotate(-45deg)}.map-pin:hover .pin-marker.provincies{transform:scale(1.3) rotate(45deg)}.pin-label{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:14px;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:100}.map-pin:hover .pin-label{opacity:1}.map-legend{position:absolute;bottom:20px;right:20px;background:#fff;padding:12px;border-radius:12px;box-shadow:0 4px 10px #00000026;z-index:50;border:1px solid #eee}.map-legend h4{margin:0 0 8px;font-size:14px;color:#333}.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;color:#555}.legend-item:last-child{margin-bottom:0}.legend-icon{position:relative!important;transform:none!important}.legend-item .pin-marker.steden{transform:scale(.8)}.legend-item .pin-marker.provincies{transform:scale(.8) rotate(45deg)}.legend-item .pin-marker.wateren{transform:scale(.8) rotate(-45deg)}.legend-item .pin-marker.gebieden{transform:scale(.8)}@media (max-width: 768px){.map-legend{display:none}}.skippy-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.skippy-modal-content{display:flex;flex-direction:column;align-items:center;max-width:90%;width:400px}.skippy-avatar-large{font-size:4rem;background:#fff;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid var(--primary);box-shadow:0 4px 10px #0000001a;z-index:2;margin-bottom:-40px}.skippy-message-bubble{background:#fff;padding:50px 30px 30px;border-radius:24px;text-align:center;box-shadow:0 10px 25px #00000026;width:100%;position:relative;border:2px solid var(--border)}.skippy-message-bubble h2{color:var(--primary);margin-bottom:12px;font-size:1.5rem}.skippy-text{font-size:1.1rem;color:var(--text);margin-bottom:24px;line-height:1.5}.skippy-modal-btn{background:var(--primary);color:#fff;border:none;padding:12px 32px;border-radius:50px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s,background .2s;box-shadow:0 4px 0 var(--primary-dark)}.skippy-modal-btn:hover{transform:translateY(-2px);background:var(--primary-dark)}.skippy-modal-btn:active{transform:translateY(2px);box-shadow:none}.challenge-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.challenge-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;padding:30px;max-width:400px;width:90%;position:relative;box-shadow:0 10px 40px #00000080;border:2px solid #4a5568}.challenge-modal.incoming{border-color:#f6ad55;animation:pulse-border 1s ease-in-out infinite}.challenge-modal .close-btn{position:absolute;top:10px;right:15px;background:none;border:none;color:#a0aec0;font-size:28px;cursor:pointer;transition:color .2s}.challenge-modal .close-btn:hover{color:#fff}.challenge-modal h2{text-align:center;color:#fff;margin-bottom:10px;font-size:24px}.challenge-icon{text-align:center;font-size:48px;margin-bottom:15px}.challenge-topic-header{text-align:center;color:#a0aec0;margin-bottom:20px}.challenge-topic-header strong{color:#68d391}.challenger-name{text-align:center;font-size:28px;color:#f6ad55;font-weight:700;margin:10px 0 5px}.challenge-topic{text-align:center;color:#a0aec0;margin-bottom:25px}.challenge-topic strong{color:#68d391}.challenge-buttons{display:flex;gap:15px;justify-content:center}.accept-btn,.decline-btn{padding:12px 24px;border-radius:10px;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s}.accept-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff}.accept-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px #48bb7866}.decline-btn{background:linear-gradient(135deg,#fc8181,#e53e3e);color:#fff}.decline-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px #e53e3e66}.no-users{text-align:center;padding:30px 0}.no-users p{color:#a0aec0;font-size:18px;margin:10px 0}.no-users .hint{font-size:14px;color:#718096}.online-count{text-align:center;color:#68d391;margin-bottom:15px}.online-users-list{list-style:none;padding:0;margin:0}.online-user{display:flex;align-items:center;padding:12px 15px;background:#ffffff0d;border-radius:10px;margin-bottom:10px}.user-status{font-size:10px;margin-right:10px}.user-name{flex:1;color:#fff;font-weight:500}.challenge-btn{background:linear-gradient(135deg,#ed8936,#dd6b20);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:700;cursor:pointer;transition:transform .2s}.challenge-btn:hover{transform:scale(1.05)}.waiting-spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-top-color:#f6ad55;border-radius:50%;margin:0 auto 20px;animation:spin 1s linear infinite}.challenge-modal.waiting h2{margin-bottom:10px}.challenge-modal.waiting p{color:#a0aec0;text-align:center;margin-bottom:20px}.cancel-btn{display:block;margin:0 auto;padding:10px 20px;background:#ffffff1a;color:#a0aec0;border:none;border-radius:8px;cursor:pointer;transition:background .2s}.cancel-btn:hover{background:#fff3}.admin-page{display:flex;height:100vh;font-family:Inter,sans-serif}.admin-sidebar{width:350px;background:#f8f9fa;border-right:1px solid #ddd;padding:20px;overflow-y:auto;display:flex;flex-direction:column}.question-list{display:flex;flex-direction:column;gap:8px}.question-item{padding:10px;background:#fff;border:1px solid #eee;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;transition:all .2s}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.add-btn{background:#2196f3;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-weight:700;cursor:pointer}.cancel-btn{background:#ddd;color:#333;border:none;padding:6px 12px;border-radius:4px;font-weight:700;cursor:pointer}.add-btn:hover{background:#1976d2}.add-form{display:flex;flex-direction:column;gap:8px;background:#f0f9ff;padding:12px;border-radius:6px;margin-bottom:16px;border:1px solid #bae6fd}.form-header{font-weight:700;color:#0284c7;margin-bottom:4px;font-size:14px}.add-form input,.add-form select{padding:8px;border:1px solid #ddd;border-radius:4px}.add-form button.add-submit-btn{background:#4caf50;color:#fff;border:none;padding:8px;border-radius:4px;cursor:pointer;font-weight:700}.add-form button.save-btn{background:#ff9800;color:#fff;border:none;padding:8px;border-radius:4px;cursor:pointer;font-weight:700}.hint-text{font-size:13px;color:#666;margin-bottom:15px}.question-item{padding:10px;background:#fff;border:1px solid #eee;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;transition:all .2s;justify-content:space-between}.question-item:hover{background:#eef2ff}.question-item.selected{background:#2196f3;color:#fff;border-color:#1976d2}.question-info{flex:1;display:flex;flex-direction:column}.question-info small{opacity:.7;font-size:11px}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.actions{display:flex;gap:4px}.icon-btn{background:none;border:none;color:#999;font-size:16px;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#0000000d}.icon-btn.edit:hover{color:#2196f3;background:#2196f31a}.icon-btn.delete:hover{color:#f44336;background:#f443361a}.icon-btn.reset:hover{color:#ff9800}.question-item.selected .icon-btn{color:#ffffffb3}.question-item.selected .icon-btn:hover{color:#fff;background:#fff3}.admin-map-area{flex:1;background:#333;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}.map-wrapper-admin{position:relative;width:fit-content;height:fit-content;background:transparent;box-shadow:0 0 20px #00000080;display:block}.admin-map-image{max-width:100%;max-height:90vh;height:auto;object-fit:contain;display:block}.admin-pin{position:absolute;width:12px;height:12px;background:red;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.admin-pin.active{background:#ffeb3b;width:16px;height:16px;z-index:10}.password-row{margin-top:5px;font-size:.9rem;color:#444}.password-display{cursor:pointer;padding:2px 6px;border-radius:4px;transition:background .2s}.password-display:hover{background:#e3f2fd}.edit-hint{font-size:.7rem;color:#999;margin-left:5px}.pw-edit{display:flex;gap:5px}.pw-edit input{padding:4px 8px;border:1px solid #ccc;border-radius:4px;font-size:.9rem}.pw-edit button{padding:4px 8px;cursor:pointer;border:none;border-radius:4px;background:#f5f5f5}.pw-edit button:hover{background:#e0e0e0}.admin-accounts{max-width:900px;margin:0 auto}.accounts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}.accounts-header h2{margin:0;color:#1e293b}.search-input{padding:10px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;width:250px;transition:border-color .2s}.search-input:focus{outline:none;border-color:#6366f1}.accounts-stats{display:flex;gap:15px;margin-bottom:25px}.stat-box{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:15px 25px;border-radius:12px;text-align:center;flex:1}.stat-box .stat-number{display:block;font-size:1.8rem;font-weight:800}.stat-box .stat-text{font-size:.85rem;opacity:.9}.accounts-list{display:flex;flex-direction:column;gap:12px}.account-item{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:15px;transition:all .2s}.account-item:hover{border-color:#6366f1;box-shadow:0 4px 12px #6366f11a}.account-item.editing{flex-direction:column;align-items:stretch;background:#f8fafc}.account-main{display:flex;align-items:center;gap:15px}.account-info{display:flex;flex-direction:column;gap:4px}.account-name{font-size:1.1rem;color:#1e293b}.account-stats-row{display:flex;gap:12px;flex-wrap:wrap}.account-stat{font-size:.85rem;color:#64748b;background:#f1f5f9;padding:2px 8px;border-radius:6px}.account-stat.voice{background:#e0f2fe;color:#0369a1}.account-stat.groep{background:#f3e8ff;color:#7c3aed;font-weight:700}.groep-select{flex:1;padding:10px 14px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;background:#fff;cursor:pointer}.groep-select:focus{outline:none;border-color:#6366f1}.account-actions{display:flex;align-items:center;gap:10px}.account-actions .password-display{font-size:.9rem;color:#64748b;padding:6px 12px;background:#f1f5f9;border-radius:6px;min-width:100px}.edit-btn{padding:8px 16px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.edit-btn:hover{background:#4f46e5}.delete-btn-account{padding:8px 16px;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.delete-btn-account:hover{background:#fecaca}.account-edit-form{width:100%;margin-top:15px;padding-top:15px;border-top:1px solid #e2e8f0}.edit-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}.edit-row label{width:100px;font-weight:600;color:#475569;font-size:.9rem}.edit-row input{flex:1;padding:10px 14px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem}.edit-row input:focus{outline:none;border-color:#6366f1}.edit-actions{display:flex;gap:10px;margin-top:15px}.edit-actions .save-btn{padding:10px 24px;background:#22c55e;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}.edit-actions .save-btn:hover{background:#16a34a}.edit-actions .cancel-btn{padding:10px 24px;background:#e2e8f0;color:#475569;border:none;border-radius:8px;font-weight:600;cursor:pointer}.edit-actions .cancel-btn:hover{background:#cbd5e1}.no-results{text-align:center;padding:40px;color:#94a3b8;font-size:1.1rem}.admin-loading{text-align:center;padding:60px;font-size:1.2rem;color:#64748b}.account-avatar{flex-shrink:0}.avatar-thumbnail{width:50px;height:50px;border-radius:10px;object-fit:cover;border:2px solid #e2e8f0;background:#fff}.avatar-placeholder{width:50px;height:50px;border-radius:10px;background:#f1f5f9;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center}.avatar-placeholder span{font-size:1.5rem;opacity:.5}.account-stat.avatar-status{background:#dcfce7;color:#16a34a}@media (max-width: 600px){.accounts-header{flex-direction:column;align-items:stretch}.search-input{width:100%}.accounts-stats{flex-direction:column}.account-item{flex-direction:column;align-items:stretch}.account-actions{margin-top:10px;justify-content:flex-end}.edit-row{flex-direction:column;align-items:stretch}.edit-row label{width:auto;margin-bottom:4px}}.expand-arrow{font-size:.8rem;color:#94a3b8;margin-left:auto;padding:4px 8px}.account-expanded{border-top:1px solid #e2e8f0;padding-top:16px;margin-top:8px}.avatar-history-section{margin-bottom:16px}.avatar-history-section h4{font-size:.9rem;color:#475569;margin:0 0 12px}.avatar-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.avatar-history-item{position:relative;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:8px;text-align:center;transition:all .2s}.avatar-history-item.active{border-color:#6366f1;background:#eef2ff}.avatar-history-item img{width:80px;height:80px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .2s}.avatar-history-item img:hover{transform:scale(1.05)}.avatar-history-info{margin-top:6px}.avatar-history-name{display:block;font-size:.75rem;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-history-custom{display:block;font-size:.65rem;color:#94a3b8}.avatar-history-item .active-badge{position:absolute;top:4px;left:4px;font-size:.6rem;background:#6366f1;color:#fff;padding:2px 6px;border-radius:4px}.avatar-delete-btn{position:absolute;top:4px;right:4px;background:#ffffffe6;border:none;border-radius:50%;width:24px;height:24px;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.avatar-history-item:hover .avatar-delete-btn{opacity:1}.avatar-delete-btn:hover{background:#fee2e2}.admin-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;text-align:center}.lightbox-content img{max-width:500px;max-height:80vh;border-radius:16px;box-shadow:0 20px 60px #00000080}.lightbox-close{position:absolute;top:-12px;right:-12px;width:36px;height:36px;background:#fff;border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;box-shadow:0 2px 8px #0003;z-index:1}.lightbox-close:hover{background:#f1f5f9}.lightbox-label{color:#fff;font-size:1rem;margin-top:12px}@media (max-width: 600px){.avatar-history-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.avatar-history-item img{width:60px;height:60px}.lightbox-content img{max-width:95vw}}.avatar-creator-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000}.avatar-creator{background:#fff;padding:24px;border-radius:24px;width:95%;max-width:450px;text-align:center;box-shadow:0 10px 40px #0000004d;border:4px solid #fff;max-height:90vh;overflow-y:auto}.avatar-creator.embedded{box-shadow:none;padding:0;border:none;background:transparent}.avatar-preview-container{width:200px;height:200px;margin:0 auto 20px;position:relative;background:#f0f8ff;border-radius:16px;border:4px solid #fff;box-shadow:inset 0 0 20px #0000000d,0 5px 15px #0000001a;overflow:hidden}.avatar-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;transition:all .2s ease}.layer-body{z-index:10}.layer-face{z-index:20}.layer-hair{z-index:30}.layer-accessory{z-index:40}.layer-placeholder{display:flex;align-items:center;justify-content:center;border:2px dashed #ccc;color:#999;font-size:10px}.controls-scroll{display:flex;flex-direction:column;gap:16px}.control-group{text-align:left}.control-group label{display:block;font-weight:700;margin-bottom:8px;font-size:.9rem;color:#444}.controls-scroll.compact-mode{gap:12px}.control-row{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;padding:10px 15px;border-radius:12px;border:1px solid #eee}.control-row label{font-weight:700;color:#455a64;font-size:1rem;margin:0}.carousel-control{display:flex;align-items:center;gap:12px}.arrow-btn{width:36px;height:36px;border-radius:50%;border:none;background:#fff;box-shadow:0 2px 5px #0000001a;color:#37474f;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.arrow-btn:hover{background:#e3f2fd;color:#1976d2;transform:scale(1.1)}.current-label{min-width:80px;text-align:center;font-weight:600;color:#37474f;font-size:.95rem}.option-btn.color-btn{border-radius:50%}.save-btn{background:#4caf50;color:#fff;border:none;padding:14px 30px;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;margin-top:24px;width:100%;box-shadow:0 4px #388e3c;transition:transform .1s,box-shadow .1s}.save-btn:active{transform:translateY(4px);box-shadow:none}.close-btn-text{background:none;border:none;color:#888;margin-top:12px;cursor:pointer;font-size:.9rem;text-decoration:underline}.avatar-generator-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.avatar-generator{background:#fff;border-radius:20px;padding:30px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;text-align:center;box-shadow:0 10px 40px #0000004d}.avatar-generator.embedded{box-shadow:none;max-height:none}.avatar-generator h2{color:#6366f1;margin:0 0 10px;font-size:1.8rem}.avatar-generator .subtitle{color:#64748b;margin-bottom:25px;font-size:1rem}.choice-buttons{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.choice-btn{display:flex;flex-direction:column;align-items:center;padding:20px;border:3px solid #e2e8f0;border-radius:16px;background:#fff;cursor:pointer;transition:all .2s}.choice-btn:hover{border-color:#6366f1;transform:translateY(-2px);box-shadow:0 4px 12px #6366f133}.choice-icon{font-size:2.5rem;margin-bottom:10px}.choice-title{font-size:1.2rem;font-weight:700;color:#1e293b;margin-bottom:5px}.choice-desc{font-size:.9rem;color:#64748b}.photo-btn:hover{border-color:#22c55e}.photo-btn:hover .choice-icon{animation:bounce .5s ease}.description-btn:hover{border-color:#f59e0b}.photo-upload,.description-form{text-align:center}.upload-options{display:flex;flex-direction:column;gap:15px;margin:20px 0}.upload-btn,.camera-btn{padding:15px 25px;font-size:1.1rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .2s}.upload-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.upload-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #6366f166}.camera-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.camera-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #22c55e66}.or-divider{color:#94a3b8;font-size:.9rem}.camera-container{margin:20px 0}.camera-preview{width:100%;max-width:300px;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#1e293b}.camera-actions{display:flex;gap:10px;justify-content:center;margin-top:15px}.capture-btn{padding:12px 24px;font-size:1rem;font-weight:600;background:#22c55e;color:#fff;border:none;border-radius:10px;cursor:pointer}.cancel-camera-btn{padding:12px 24px;font-size:1rem;font-weight:600;background:#ef4444;color:#fff;border:none;border-radius:10px;cursor:pointer}.photo-preview{margin:20px 0}.photo-preview .preview-image{width:200px;height:200px;object-fit:cover;border-radius:16px;border:4px solid #e2e8f0}.photo-preview .preview-actions{display:flex;gap:10px;justify-content:center;margin-top:15px}.clear-btn{padding:10px 20px;font-size:.95rem;font-weight:600;background:#f1f5f9;color:#475569;border:none;border-radius:10px;cursor:pointer}.clear-btn:hover{background:#e2e8f0}.form-content{text-align:left;margin:20px 0}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:600;color:#1e293b;margin-bottom:10px;font-size:1rem}.option-buttons{display:flex;flex-wrap:wrap;gap:8px}.option-btn{padding:8px 16px;font-size:.9rem;font-weight:500;background:#f1f5f9;color:#475569;border:2px solid transparent;border-radius:20px;cursor:pointer;transition:all .2s}.option-btn:hover{background:#e2e8f0}.option-btn.selected{background:#6366f1;color:#fff;border-color:#4f46e5}.extras-input{width:100%;padding:12px 16px;font-size:1rem;border:2px solid #e2e8f0;border-radius:10px;outline:none;transition:border-color .2s}.extras-input:focus{border-color:#6366f1}.form-actions{display:flex;gap:10px;justify-content:center;margin-top:25px}.generating-spinner{padding:40px 20px}.spinner-animation{position:relative;width:100px;height:100px;margin:0 auto 30px}.spinner-circle{width:100%;height:100%;border:4px solid #e2e8f0;border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite}.spinner-pencil{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;animation:wiggle .5s ease-in-out infinite}.spinner-subtitle{color:#94a3b8;font-size:.9rem}.progress-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}.progress-dots .dot{width:10px;height:10px;background:#6366f1;border-radius:50%;animation:pulse 1.4s ease-in-out infinite}.progress-dots .dot:nth-child(2){animation-delay:.2s}.progress-dots .dot:nth-child(3){animation-delay:.4s}.preview-container{margin:20px 0}.preview-container .preview-image{width:250px;height:250px;object-fit:cover;border-radius:20px;border:4px solid #6366f1;box-shadow:0 8px 25px #6366f14d}.preview-actions{display:flex;gap:15px;justify-content:center;margin:20px 0}.regenerate-btn{padding:12px 24px;font-size:1rem;font-weight:600;background:#f1f5f9;color:#475569;border:none;border-radius:12px;cursor:pointer;transition:all .2s}.regenerate-btn:hover:not(:disabled){background:#e2e8f0}.regenerate-btn:disabled{opacity:.5;cursor:not-allowed}.confirm-btn{padding:12px 30px;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s}.confirm-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #22c55e66}.back-btn{padding:10px 20px;font-size:.95rem;font-weight:600;background:transparent;color:#64748b;border:none;cursor:pointer;margin-top:10px}.back-btn:hover{color:#1e293b}.submit-btn{padding:12px 24px;font-size:1rem;font-weight:600;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s}.submit-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #6366f166}.cancel-btn{padding:10px 20px;font-size:.95rem;font-weight:600;background:#f1f5f9;color:#64748b;border:none;border-radius:10px;cursor:pointer}.cancel-btn:hover{background:#e2e8f0}.error-message{color:#ef4444;background:#fef2f2;padding:10px 15px;border-radius:10px;margin:15px 0;font-size:.9rem}.privacy-note{font-size:.8rem;color:#94a3b8;margin-top:20px}@keyframes wiggle{0%,to{transform:translate(-50%,-50%) rotate(-5deg)}50%{transform:translate(-50%,-50%) rotate(5deg)}}@keyframes pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@media (max-width: 500px){.avatar-generator-overlay{padding:0;align-items:stretch}.avatar-generator{padding:20px;border-radius:0;max-height:100vh;min-height:100vh}.avatar-generator.embedded{border-radius:16px;min-height:auto}.avatar-generator h2{font-size:1.4rem;margin-bottom:8px}.avatar-generator .subtitle{font-size:.9rem;margin-bottom:20px}.choice-buttons{gap:12px}.choice-btn{padding:16px}.choice-icon{font-size:2rem;margin-bottom:8px}.choice-title{font-size:1.1rem}.choice-desc{font-size:.85rem}.upload-options{gap:12px;margin:15px 0}.upload-btn,.camera-btn{padding:14px 20px;font-size:1rem}.camera-preview{max-width:250px}.camera-actions{gap:8px}.capture-btn,.cancel-camera-btn{padding:10px 20px;font-size:.95rem}.photo-preview .preview-image{width:160px;height:160px}.preview-container{margin:15px 0}.preview-container .preview-image{width:180px;height:180px;border-radius:16px}.preview-actions{flex-direction:column;gap:10px}.regenerate-btn{padding:10px 20px;font-size:.95rem}.confirm-btn{padding:12px 24px;font-size:1rem}.form-content{margin:15px 0}.form-group{margin-bottom:16px}.form-group label{font-size:.95rem;margin-bottom:8px}.option-buttons{gap:6px}.option-btn{padding:6px 12px;font-size:.85rem}.extras-input{padding:10px 14px;font-size:.95rem}.form-actions{margin-top:20px;gap:8px;flex-direction:column}.submit-btn,.cancel-btn{width:100%;padding:12px 20px}.generating-spinner{padding:30px 15px}.spinner-animation{width:80px;height:80px;margin-bottom:20px}.spinner-pencil{font-size:1.6rem}.spinner-subtitle{font-size:.85rem}.progress-dots .dot{width:8px;height:8px}.back-btn{padding:8px 16px;font-size:.9rem}.error-message{padding:10px 12px;font-size:.85rem}.privacy-note{font-size:.75rem;margin-top:15px}}@media (max-width: 360px){.avatar-generator{padding:16px}.avatar-generator h2{font-size:1.2rem}.choice-btn{padding:12px}.choice-icon{font-size:1.8rem}.choice-title{font-size:1rem}.preview-container .preview-image{width:150px;height:150px}.photo-preview .preview-image{width:140px;height:140px}.camera-preview{max-width:200px}.option-btn{padding:5px 10px;font-size:.8rem}}.user-select-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#e0f7fa,#bbdefb);padding:20px;font-family:Inter,sans-serif}.user-select-container h1{color:#1565c0;margin-bottom:40px;font-size:2.8rem;text-align:center;text-shadow:0 4px 6px rgba(0,0,0,.1);font-weight:800}.profiles-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;max-width:1000px;perspective:1000px}.profile-card{background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;padding:24px;width:170px;display:flex;flex-direction:column;align-items:center;cursor:pointer;box-shadow:0 10px 30px #00000014;transition:all .3s cubic-bezier(.34,1.56,.64,1);border:2px solid rgba(255,255,255,.5)}.profile-card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 20px 40px #0000001f;border-color:#2196f3;background:#fffffff2}.profile-avatar-wrapper{transition:transform .3s}.profile-card:hover .profile-avatar-wrapper{transform:scale(1.1)}.profile-name{font-weight:700;font-size:1.2rem;color:#37474f;text-align:center;margin-top:12px}.profile-level{font-size:.85rem;color:#78909c;margin-top:6px;background:#eceff1;padding:4px 10px;border-radius:20px;font-weight:600}.profile-card.new{border:2px dashed #90CAF9;background:#ffffff80}.new-icon{width:80px;height:80px;border-radius:50%;background:#e3f2fd;color:#2196f3;font-size:3rem;font-weight:300;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.create-profile-wrapper,.login-modal{background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:48px;border-radius:32px;box-shadow:0 20px 60px #00000026;text-align:center;width:100%;max-width:480px;border:1px solid rgba(255,255,255,.8);animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.create-profile-wrapper h2,.login-modal h2{color:#1565c0;font-size:2rem;margin-bottom:24px}.form-group,.password-input-group{margin-bottom:20px;text-align:left}.form-group label,.password-input-group label{display:block;margin-bottom:8px;color:#546e7a;font-weight:600;margin-left:4px}.name-input,.password-input{width:100%;padding:16px;font-size:1.2rem;border:2px solid #CFD8DC;border-radius:16px;background:#f9fafb;transition:all .2s;box-sizing:border-box;color:#37474f}.name-input:focus,.password-input:focus{border-color:#2196f3;background:#fff;outline:none;box-shadow:0 0 0 4px #2196f31a}.error-msg{color:#d32f2f;background:#ffebee;padding:10px;border-radius:8px;margin-bottom:20px;font-size:.9rem}.login-actions{display:flex;gap:12px;margin-top:24px}.cancel-btn,.back-btn-small{padding:14px 24px;border:none;background:#eceff1;color:#546e7a;font-weight:600;border-radius:14px;cursor:pointer;font-size:1rem;transition:all .2s}.cancel-btn:hover,.back-btn-small:hover{background:#cfd8dc;color:#37474f}.login-btn-confirm,.save-btn{flex:1;padding:14px 24px;border:none;background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;font-weight:700;border-radius:14px;cursor:pointer;font-size:1.1rem;box-shadow:0 4px 12px #2196f34d;transition:all .2s}.login-btn-confirm:hover,.save-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #2196f366}.login-btn-confirm:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-card{background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:48px;border-radius:32px;box-shadow:0 20px 60px #00000026;text-align:center;width:100%;max-width:400px;border:1px solid rgba(255,255,255,.8);animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}.login-card h1{color:#1565c0;font-size:1.8rem;margin-bottom:8px}.login-subtitle{color:#78909c;margin-bottom:32px;font-size:1rem}.login-form{display:flex;flex-direction:column}.login-input{width:100%;padding:16px;font-size:1.1rem;border:2px solid #CFD8DC;border-radius:16px;background:#f9fafb;transition:all .2s;box-sizing:border-box;color:#37474f}.login-input:focus{border-color:#2196f3;background:#fff;outline:none;box-shadow:0 0 0 4px #2196f31a}.login-form .login-btn-confirm{margin-top:24px;width:100%;padding:16px}.register-prompt{margin-top:24px;padding-top:24px;border-top:1px solid #eee}.register-prompt p{color:#78909c;margin-bottom:12px;font-size:.95rem}.register-link{background:none;border:none;color:#2196f3;font-weight:600;cursor:pointer;font-size:1rem;text-decoration:underline;transition:color .2s}.register-link:hover{color:#1565c0}.groep-selector{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.groep-btn{padding:10px 16px;border:2px solid #CFD8DC;background:#f9fafb;border-radius:12px;font-size:.95rem;font-weight:600;color:#546e7a;cursor:pointer;transition:all .2s}.groep-btn:hover{border-color:#2196f3;background:#e3f2fd}.groep-btn.active{border-color:#2196f3;background:#2196f3;color:#fff}.proceed-btn{width:100%;padding:18px 24px;margin-top:24px;margin-bottom:16px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:700;border-radius:16px;cursor:pointer;font-size:1.1rem;box-shadow:0 4px 15px #6366f14d;transition:all .2s}.proceed-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #6366f166}.proceed-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 500px){.login-card{padding:32px 24px}.login-card h1{font-size:1.5rem}.create-profile-wrapper{padding:24px 16px}.groep-selector{gap:6px}.groep-btn{padding:8px 12px;font-size:.85rem}.proceed-btn{padding:16px 20px;font-size:1rem}}.skippy-avatar{position:relative;border-radius:50%;overflow:hidden;background:#f0f8ff;border:2px solid white;box-shadow:0 2px 4px #0000001a}.skippy-avatar .avatar-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.skippy-avatar .layer-body{z-index:1}.skippy-avatar .layer-face{z-index:2}.skippy-avatar .layer-hair{z-index:3}.skippy-avatar .layer-accessory{z-index:4}.skippy-avatar.ai-avatar{background:transparent}.skippy-avatar .ai-avatar-image{width:100%;height:100%;object-fit:cover;border-radius:50%}.skippy-avatar.fallback-legacy{background:linear-gradient(135deg,#e0f7fa,#b2ebf2)}.skippy-avatar.fallback-legacy:after{content:"👤";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem}.character-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.character-editor{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;padding:32px 40px;max-width:700px;width:100%;max-height:95vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #0000004d}.character-editor.shop-view,.character-editor.history-view{max-width:800px}.character-editor h1{color:#fff;text-align:center;margin:0 0 16px;font-size:1.8rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.character-editor .subtitle{color:#fffc;text-align:center;margin:0 0 20px}.character-editor .close-btn{position:absolute;top:16px;right:16px;background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all .2s ease}.character-editor .close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.coins-display{display:flex;align-items:center;justify-content:center;gap:8px;background:#ffd70033;border:2px solid rgba(255,215,0,.4);border-radius:20px;padding:8px 20px;margin:0 auto 20px;width:fit-content}.coins-display .coin-icon{font-size:1.5rem}.coins-display .coin-amount{font-size:1.4rem;font-weight:700;color:gold}.coins-display .coin-label{color:#fffc;font-size:.9rem}.character-display-container{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}.nav-arrow{background:#fff3;border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all .2s ease;flex-shrink:0}.nav-arrow:hover{background:#ffffff4d;transform:scale(1.1)}.character-display{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:280px;width:280px;flex-shrink:0}.character-image{max-width:100%;max-height:250px;border-radius:8px}.no-character{text-align:center;color:#666}.no-character-icon{font-size:4rem;display:block;margin-bottom:12px;opacity:.5}.no-character p{font-size:1rem;margin:0 0 16px}.no-character .create-btn{font-size:1.1rem;padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.no-character .create-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.character-editor.create-view{padding:0;overflow:auto}.history-dots{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.history-dot{width:10px;height:10px;border-radius:50%;background:#ffffff4d;border:none;cursor:pointer;transition:all .2s ease;padding:0}.history-dot:hover{background:#ffffff80}.history-dot.active{background:#fff;transform:scale(1.2)}.current-version-info{text-align:center;color:#fff;margin-bottom:16px}.version-name{font-weight:600;font-size:1.1rem}.version-custom{opacity:.8;margin-left:6px}.character-actions{display:flex;gap:12px;margin-bottom:20px}.shop-btn{background:gold;color:#333}.shop-btn:hover{background:#ffed4a;transform:translateY(-2px)}.history-btn{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.4)}.history-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.download-btn{background:#4caf50;color:#fff}.download-btn:hover{background:#66bb6a;transform:translateY(-2px)}.character-info{background:#ffffff26;border-radius:12px;padding:12px 16px}.info-item{display:flex;justify-content:space-between;align-items:center;color:#fff}.info-label{font-weight:500;opacity:.9}.info-value{font-weight:600}.shop-categories{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:8px}.category-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;background:#ffffff26;border:2px solid transparent;border-radius:12px;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0}.category-tab:hover{background:#ffffff40}.category-tab.active{background:#fff;color:#667eea;border-color:#fff}.category-icon{font-size:1.3rem}.category-name{font-size:.8rem;font-weight:600}.shop-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-bottom:16px;max-height:250px;overflow-y:auto;padding:4px}.shop-item{background:#ffffffe6;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .2s ease;border:3px solid transparent}.shop-item:hover:not(.owned){transform:translateY(-4px);box-shadow:0 8px 20px #0003}.shop-item.selected{border-color:gold;box-shadow:0 0 20px #ffd70080}.shop-item.owned{opacity:.6;cursor:default}.item-icon{font-size:2rem;margin-bottom:6px}.item-name{font-size:.85rem;font-weight:600;color:#333;margin-bottom:4px}.item-price{font-size:.8rem;color:#666;display:flex;align-items:center;justify-content:center;gap:4px}.coin-icon-small{font-size:.9rem}.owned-badge{color:#22c55e;font-weight:600;font-size:.75rem}.item-detail-panel{background:#fff;border-radius:16px;padding:20px;margin-top:16px}.item-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.detail-icon{font-size:2.5rem}.detail-name{font-size:1.3rem;font-weight:700;color:#333}.item-description{color:#666;margin:0 0 16px;line-height:1.5}.custom-input-section{margin-bottom:16px}.custom-input-section label{display:block;font-weight:600;color:#333;margin-bottom:8px}.custom-input-section input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;box-sizing:border-box}.custom-input-section input:focus{outline:none;border-color:#667eea}.purchase-section{display:flex;align-items:center;justify-content:space-between;gap:16px}.price-tag{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,gold,#ffb300);padding:10px 20px;border-radius:20px}.price-tag .coin-icon{font-size:1.3rem}.price-amount{font-size:1.3rem;font-weight:700;color:#333}.purchase-btn{flex:1;padding:14px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.purchase-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.purchase-btn:disabled{background:#ccc;cursor:not-allowed}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;max-height:400px;overflow-y:auto;padding:4px}.history-item{background:#fff;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .2s ease;border:3px solid transparent;position:relative}.history-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0003}.history-item.active{border-color:gold}.history-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;margin-bottom:8px}.history-item-name{font-size:.8rem;font-weight:600;color:#333}.active-badge{position:absolute;top:8px;right:8px;background:gold;color:#333;font-size:.65rem;font-weight:700;padding:4px 8px;border-radius:10px}.purchase-loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000}.purchase-loading-content{text-align:center;color:#fff;padding:20px}.purchase-spinner{width:80px;height:80px;border:5px solid rgba(255,255,255,.2);border-top-color:gold;border-radius:50%;margin:0 auto 24px;animation:spin 1s linear infinite}.purchase-loading-content p{margin:0;font-size:1.4rem;font-weight:600}.purchase-loading-content .purchase-loading-sub{margin-top:8px;font-size:1rem;font-weight:400;opacity:.8}.current-character-warning{background:#ffc10726;border:1px solid rgba(255,193,7,.4);border-radius:10px;padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#333;line-height:1.5}.current-character-warning .warning-icon{flex-shrink:0;font-size:1.1rem}.current-character-warning .link-btn{background:none;border:none;color:#667eea;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;font-size:inherit}.current-character-warning .link-btn:hover{color:#764ba2}.reference-upload-section{background:#667eea14;border:1px dashed rgba(102,126,234,.3);border-radius:12px;padding:16px;margin-bottom:16px}.reference-upload-section label{display:block;font-weight:600;color:#333;margin-bottom:4px}.reference-hint{color:#666;font-size:.85rem;margin:0 0 12px}.reference-upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:2px solid #667eea;border-radius:10px;padding:12px 20px;color:#667eea;font-weight:600;cursor:pointer;transition:all .2s ease}.reference-upload-btn:hover{background:#667eea;color:#fff}.reference-preview{position:relative;display:inline-block}.reference-preview img{max-width:150px;max-height:150px;border-radius:10px;border:2px solid #667eea}.remove-reference{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#ff6b6b;color:#fff;border:none;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.remove-reference:hover{background:#ee5a5a;transform:scale(1.1)}.current-character-warning.outfit-info{background:#8b5cf626;border:1px solid rgba(139,92,246,.4)}.current-character-warning.outfit-info .warning-icon{color:#8b5cf6}.style-options-section{margin-bottom:16px}.style-options-section>label{display:block;font-weight:600;color:#333;margin-bottom:10px}.style-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.style-option{padding:10px 12px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;font-size:.9rem;font-weight:500;color:#333;cursor:pointer;transition:all .2s ease;text-align:center}.style-option:hover{background:#f1f5f9;border-color:#667eea}.style-option.selected{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}@media (max-width: 768px){.character-editor-overlay{padding:10px}.character-editor{padding:24px 20px;max-height:98vh}.character-editor.shop-view,.character-editor.history-view{max-width:100%}.shop-items{max-height:200px}.history-grid{max-height:300px}}@media (max-width: 480px){.character-editor-overlay{padding:0;align-items:stretch}.character-editor{padding:16px;margin:0;border-radius:0;max-height:100vh;min-height:100vh;max-width:100%}.character-editor h1{font-size:1.3rem;margin-bottom:10px;padding-right:30px}.character-editor .subtitle{font-size:.85rem;margin-bottom:12px}.character-editor .close-btn{top:12px;right:12px;width:32px;height:32px;font-size:1rem}.coins-display{padding:6px 14px;margin-bottom:12px}.coins-display .coin-icon{font-size:1.2rem}.coins-display .coin-amount{font-size:1.1rem}.coins-display .coin-label{font-size:.8rem}.character-display-container{gap:6px;margin-bottom:10px}.character-display{min-height:180px;width:180px;padding:10px;border-radius:12px}.character-image{max-height:160px}.nav-arrow{width:32px;height:32px;font-size:1rem}.no-character-icon{font-size:3rem}.no-character p{font-size:.85rem}.history-dots{gap:6px;margin-bottom:10px}.history-dot{width:8px;height:8px}.current-version-info{margin-bottom:10px}.version-name{font-size:.95rem}.error-message,.success-message{padding:10px 12px;margin-bottom:12px;font-size:.9rem}.character-actions{gap:8px;margin-bottom:12px}.action-btn{padding:12px 14px;font-size:.9rem;border-radius:10px}.character-info{padding:10px 12px}.info-item{font-size:.9rem}.shop-categories{gap:6px;margin-bottom:12px;padding-bottom:6px;-webkit-overflow-scrolling:touch}.category-tab{padding:8px 10px;border-radius:10px;min-width:60px}.category-icon{font-size:1.1rem}.category-name{font-size:.65rem}.shop-items{grid-template-columns:repeat(3,1fr);gap:8px;max-height:280px;margin-bottom:12px}.shop-item{padding:8px;border-radius:10px;border-width:2px}.item-icon{font-size:1.5rem;margin-bottom:4px}.item-name{font-size:.7rem;margin-bottom:2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-price{font-size:.7rem}.coin-icon-small{font-size:.75rem}.owned-badge{font-size:.65rem}.item-detail-panel{padding:14px;margin-top:12px;border-radius:12px}.item-detail-header{gap:10px;margin-bottom:10px}.detail-icon{font-size:2rem}.detail-name{font-size:1.1rem}.item-description{font-size:.85rem;margin-bottom:12px}.current-character-warning{padding:10px 12px;margin-bottom:12px;font-size:.8rem;gap:8px;border-radius:8px}.current-character-warning .warning-icon{font-size:1rem}.style-options-section{margin-bottom:12px}.style-options-section>label{font-size:.9rem;margin-bottom:8px}.style-options-grid{grid-template-columns:1fr;gap:6px}.style-option{padding:10px;font-size:.85rem;border-radius:8px}.custom-input-section{margin-bottom:12px}.custom-input-section label{font-size:.9rem;margin-bottom:6px}.custom-input-section input{padding:10px 12px;font-size:.95rem}.reference-upload-section{padding:12px;margin-bottom:12px}.reference-upload-section label{font-size:.85rem}.reference-hint{font-size:.75rem;margin-bottom:10px}.reference-upload-btn{padding:10px 16px;font-size:.9rem}.reference-preview img{max-width:100px;max-height:100px}.purchase-section{flex-direction:column;gap:10px}.price-tag{width:100%;justify-content:center;padding:8px 16px}.price-tag .coin-icon,.price-amount{font-size:1.1rem}.purchase-btn{width:100%;padding:12px 20px;font-size:.95rem}.history-grid{grid-template-columns:repeat(3,1fr);gap:10px;max-height:calc(100vh - 200px)}.history-item{padding:8px;border-radius:10px;border-width:2px}.history-item img{border-radius:6px;margin-bottom:6px}.history-item-name{font-size:.7rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-badge{font-size:.55rem;padding:3px 6px;top:6px;right:6px}.purchase-loading-content p{font-size:1.2rem}.purchase-loading-content .purchase-loading-sub{font-size:.9rem}.purchase-spinner{width:60px;height:60px;border-width:4px;margin-bottom:20px}}@media (max-width: 360px){.character-editor{padding:12px}.character-editor h1{font-size:1.1rem}.character-display{min-height:150px;width:150px;padding:8px}.character-image{max-height:130px}.nav-arrow{width:28px;height:28px;font-size:.9rem}.shop-items{grid-template-columns:repeat(2,1fr);max-height:260px}.shop-item{padding:10px 6px}.item-icon{font-size:1.8rem}.category-tab{padding:6px 8px;min-width:50px}.category-icon{font-size:1rem}.category-name{font-size:.6rem}.history-grid{grid-template-columns:repeat(2,1fr)}.style-options-grid{gap:4px}.style-option{padding:8px;font-size:.8rem}}.friends-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.friends-panel{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;padding:32px 40px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #0000004d}.friends-panel h1{color:#fff;text-align:center;margin:0 0 8px;font-size:1.8rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.friends-panel .subtitle{color:#fffc;text-align:center;margin:0 0 20px}.friends-panel .close-btn{position:absolute;top:16px;right:16px;background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all .2s ease}.friends-panel .close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.loading-state{text-align:center;padding:40px;color:#fff}.loading-state .spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}.error-message{background:#ff6b6b;color:#fff;padding:12px 16px;border-radius:8px;margin-bottom:16px;text-align:center;font-weight:500}.success-message{background:#51cf66;color:#fff;padding:12px 16px;border-radius:8px;margin-bottom:16px;text-align:center;font-weight:500}.friends-actions{display:flex;gap:12px;margin-bottom:20px}.action-btn{flex:1;padding:14px 20px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.search-btn{background:gold;color:#333}.search-btn:hover{background:#ffed4a;transform:translateY(-2px)}.requests-btn{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.4);position:relative}.requests-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.requests-btn.has-requests{background:#ff6b6b;border-color:#ff6b6b}.request-badge{background:#fff;color:#ff6b6b;font-size:.75rem;font-weight:700;padding:2px 6px;border-radius:10px;margin-left:4px}.empty-state{text-align:center;padding:40px 20px;color:#fff}.empty-icon{font-size:4rem;display:block;margin-bottom:16px;opacity:.7}.empty-state p{font-size:1.1rem;margin:0 0 20px;opacity:.9}.add-first-btn{background:gold;color:#333;border:none;padding:12px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.add-first-btn:hover{background:#ffed4a;transform:translateY(-2px)}.friends-list{display:flex;flex-direction:column;gap:12px}.friend-card{background:#fffffff2;border-radius:12px;padding:14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s ease}.friend-card:hover{transform:translate(4px);box-shadow:0 4px 15px #00000026}.friend-avatar{width:50px;height:50px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#f0f0f0}.friend-avatar img{width:100%;height:100%;object-fit:cover}.avatar-placeholder-small{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#e0e0e0}.friend-info{flex:1;min-width:0}.friend-name{display:block;font-weight:600;color:#333;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-details{display:block;color:#666;font-size:.85rem;margin-top:2px}.friend-points{text-align:right;flex-shrink:0}.points-value{display:block;font-weight:700;color:#667eea;font-size:1.1rem}.points-label{display:block;color:#999;font-size:.75rem}.search-form{display:flex;gap:10px;margin-bottom:20px}.search-form input{flex:1;padding:14px 18px;border:none;border-radius:12px;font-size:1rem;background:#fff}.search-form input:focus{outline:none;box-shadow:0 0 0 3px #ffffff4d}.search-form button{padding:14px 20px;background:gold;border:none;border-radius:12px;font-size:1.2rem;cursor:pointer;transition:all .2s ease}.search-form button:hover:not(:disabled){background:#ffed4a;transform:scale(1.05)}.search-form button:disabled{opacity:.7;cursor:default}.search-results{display:flex;flex-direction:column;gap:10px}.user-card{background:#fffffff2;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px}.user-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#f0f0f0}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-info{flex:1;min-width:0}.user-name{display:block;font-weight:600;color:#333;font-size:.95rem}.user-details{display:block;color:#666;font-size:.8rem;margin-top:2px}.user-action{flex-shrink:0}.add-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.accept-btn{background:#51cf66;color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.accept-btn:hover{background:#40c057;transform:scale(1.05)}.status-badge{padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:600}.status-badge.friend{background:#d3f9d8;color:#2b8a3e}.status-badge.pending{background:#fff3bf;color:#e67700}.requests-list{display:flex;flex-direction:column;gap:10px}.request-card{background:#fffffff2;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px}.request-actions{display:flex;gap:8px;flex-shrink:0}.request-actions .accept-btn,.request-actions .reject-btn{width:36px;height:36px;border-radius:50%;border:none;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.request-actions .accept-btn{background:#51cf66;color:#fff}.request-actions .accept-btn:hover{background:#40c057;transform:scale(1.1)}.request-actions .reject-btn{background:#ff6b6b;color:#fff}.request-actions .reject-btn:hover{background:#fa5252;transform:scale(1.1)}.friend-profile{text-align:center}.profile-avatar-large{width:140px;height:140px;margin:0 auto 20px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 8px 24px #0003}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;background:#f0f0f0}.friend-profile h2{color:#fff;margin:0 0 6px;font-size:1.6rem}.friend-groep{display:inline-block;background:#fff3;color:#fff;padding:4px 12px;border-radius:12px;font-size:.9rem;margin-bottom:20px}.profile-stats{display:flex;justify-content:center;gap:40px;margin-bottom:16px}.stat{text-align:center}.stat-value{display:block;font-size:1.8rem;font-weight:700;color:gold}.stat-label{display:block;font-size:.85rem;color:#fffc}.last-active{color:#ffffffb3;font-size:.9rem;margin-bottom:24px}.avatar-gallery{background:#ffffff1a;border-radius:12px;padding:16px;margin-bottom:20px}.avatar-gallery h3{color:#fff;margin:0 0 12px;font-size:1rem}.gallery-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}.gallery-item{width:60px;height:60px;border-radius:10px;overflow:hidden;flex-shrink:0;border:2px solid transparent;transition:all .2s ease}.gallery-item.active{border-color:gold}.gallery-item img{width:100%;height:100%;object-fit:cover}.remove-friend-btn{background:#ff6b6b33;color:#ff6b6b;border:2px solid #ff6b6b;padding:12px 24px;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.remove-friend-btn:hover{background:#ff6b6b;color:#fff}@media (max-width: 480px){.friends-overlay{padding:0}.friends-panel{padding:20px 16px;border-radius:0;max-height:100vh;min-height:100vh}.friends-panel h1{font-size:1.4rem;padding-right:40px}.friends-actions{flex-direction:column;gap:10px}.action-btn{padding:12px 16px;font-size:.95rem}.friend-card{padding:12px}.friend-avatar{width:44px;height:44px}.friend-name{font-size:.95rem}.friend-details{font-size:.8rem}.search-form{flex-direction:column}.search-form input{padding:12px 14px}.search-form button{padding:12px}.profile-avatar-large{width:100px;height:100px}.friend-profile h2{font-size:1.3rem}.profile-stats{gap:30px}.stat-value{font-size:1.5rem}.gallery-item{width:50px;height:50px}}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.settings-panel{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;padding:32px 40px;max-width:450px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #0000004d}.settings-panel h1{color:#fff;text-align:center;margin:0 0 20px;font-size:1.8rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.settings-panel .close-btn{position:absolute;top:16px;right:16px;background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all .2s ease}.settings-panel .close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.success-message{background:#51cf66;color:#fff;padding:10px 16px;border-radius:8px;margin-bottom:16px;text-align:center;font-weight:500;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-section{background:#ffffff1a;border-radius:16px;padding:20px;margin-bottom:16px}.settings-section h2{color:#fff;margin:0 0 6px;font-size:1.1rem}.section-description{color:#ffffffb3;margin:0 0 16px;font-size:.9rem}.groep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.groep-option{background:#ffffff26;border:2px solid transparent;border-radius:12px;padding:14px 10px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:4px}.groep-option:hover:not(:disabled){background:#ffffff40;transform:translateY(-2px)}.groep-option.active{background:#fff;border-color:#fff}.groep-option .groep-number{font-size:1.5rem;font-weight:700;color:#fff}.groep-option.active .groep-number{color:#667eea}.groep-option .groep-label{font-size:.75rem;color:#fffc}.groep-option.active .groep-label{color:#764ba2}.groep-option:disabled{opacity:.7;cursor:default}.voice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.voice-option{background:#ffffff26;border:2px solid transparent;border-radius:12px;padding:20px 16px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:8px}.voice-option:hover:not(:disabled){background:#ffffff40;transform:translateY(-2px)}.voice-option.active{background:#fff;border-color:#fff}.voice-option .voice-icon{font-size:2.5rem}.voice-option .voice-name{font-size:1rem;font-weight:600;color:#fff}.voice-option.active .voice-name{color:#667eea}.voice-option:disabled{opacity:.7;cursor:default}.settings-info{text-align:center;margin-top:8px}.settings-info p{color:#fff9;font-size:.85rem;margin:0;font-style:italic}@media (max-width: 480px){.settings-overlay{padding:0}.settings-panel{padding:20px 16px;border-radius:0;max-height:100vh;min-height:100vh}.settings-panel h1{font-size:1.4rem;padding-right:40px}.settings-section{padding:16px}.settings-section h2{font-size:1rem}.groep-grid{grid-template-columns:repeat(3,1fr);gap:8px}.groep-option{padding:12px 8px}.groep-option .groep-number{font-size:1.3rem}.groep-option .groep-label{font-size:.7rem}.voice-option{padding:16px 12px}.voice-option .voice-icon{font-size:2rem}.voice-option .voice-name{font-size:.9rem}}.profile-menu-container{position:fixed;top:20px;right:20px;z-index:1000}.profile-trigger{display:flex;align-items:center;gap:12px;background:#fff;padding:6px 6px 6px 16px;border-radius:50px;box-shadow:0 4px 10px #0000001a;cursor:pointer;transition:transform .2s,box-shadow .2s;-webkit-user-select:none;user-select:none;border:2px solid transparent}.profile-trigger:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026;border-color:var(--primary)}.profile-trigger-name{font-weight:700;color:var(--text);font-size:1rem}.profile-mini-avatar{width:40px;height:40px;border-radius:50%;position:relative;border:2px solid white;box-shadow:0 2px 5px #0000001a;background-size:cover;overflow:hidden}.profile-mini-avatar .face{transform:scale(.5);top:10px;left:10px}.profile-mini-avatar .accessory{transform:scale(.5);top:5px;left:5px}.profile-dropdown{position:absolute;top:110%;right:0;width:200px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #00000026;padding:8px;display:flex;flex-direction:column;animation:popIn .2s ease-out}.dropdown-header{padding:12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-radius:8px;margin-bottom:8px}.dropdown-header strong{color:var(--text);font-size:1rem}.dropdown-header span{color:var(--text-light);font-size:.8rem}.profile-dropdown button{background:none;border:none;padding:10px 12px;text-align:left;font-size:.95rem;color:var(--text);cursor:pointer;border-radius:8px;transition:background .2s}.profile-dropdown button:hover{background:#f1f5f9;color:var(--primary)}.dropdown-divider{height:1px;background:#eee;margin:4px 0}.profile-dropdown button.logout-btn{color:#ef4444}.profile-dropdown button.logout-btn:hover{background:#fef2f2}.groep-preference{padding:8px 12px}.groep-label{display:block;font-size:.85rem;color:var(--text-light);margin-bottom:8px}.groep-options{display:flex;gap:4px}.groep-preference .groep-btn{flex:1;padding:6px 4px!important;text-align:center!important;font-size:.85rem!important;font-weight:600;border:2px solid #eee!important;background:#f8fafc!important;min-width:0}.groep-preference .groep-btn:hover{border-color:var(--primary)!important;background:#e3f2fd!important}.groep-preference .groep-btn.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}.voice-preference{padding:8px 12px}.voice-label{display:block;font-size:.85rem;color:var(--text-light);margin-bottom:8px}.voice-options{display:flex;gap:8px}.voice-btn{flex:1;padding:8px!important;text-align:center!important;font-size:.85rem!important;border:2px solid #eee!important;background:#f8fafc!important}.voice-btn:hover{border-color:var(--primary)!important}.voice-btn.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}.avatar-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#e0f7fa,#bbdefb);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}@media (max-width: 600px){.profile-menu-container{top:10px;right:auto;left:10px}.profile-trigger{padding:4px;gap:0}.profile-trigger-name{display:none}.profile-mini-wrapper{margin:0}.profile-mini-avatar{width:36px;height:36px}.profile-dropdown{left:0;right:auto;width:220px}.profile-dropdown button{padding:12px;font-size:.9rem}.dropdown-header{padding:10px}.dropdown-header strong{font-size:.95rem}.groep-options{gap:3px}.groep-preference .groep-btn{padding:8px 4px!important;font-size:.8rem!important}.voice-options{gap:6px}.voice-btn{padding:10px!important;font-size:.8rem!important}}@media (max-width: 360px){.profile-dropdown{width:200px}.groep-preference .groep-btn{padding:6px 2px!important;font-size:.75rem!important}}.challenge-notification-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}.challenge-notification{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;padding:40px;max-width:400px;width:90%;text-align:center;box-shadow:0 20px 60px #00000080;border:3px solid #f6ad55;animation:slideUp .3s ease,pulse-border 1.5s ease-in-out infinite}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-border{0%,to{border-color:#f6ad55}50%{border-color:#ed8936}}.challenge-notification .challenge-icon{font-size:64px;margin-bottom:15px;animation:bounce .6s ease infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.challenge-notification h2{color:#fff;font-size:24px;margin-bottom:15px}.challenge-notification .challenger-name{font-size:32px;color:#f6ad55;font-weight:700;margin:10px 0 5px}.challenge-notification .challenge-topic{color:#a0aec0;margin-bottom:30px;font-size:16px}.challenge-notification .challenge-topic strong{color:#68d391}.challenge-notification .challenge-buttons{display:flex;gap:15px;justify-content:center}.challenge-notification .accept-btn,.challenge-notification .decline-btn{padding:15px 30px;border-radius:12px;font-size:18px;font-weight:700;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s}.challenge-notification .accept-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff}.challenge-notification .accept-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #48bb7866}.challenge-notification .decline-btn{background:linear-gradient(135deg,#fc8181,#e53e3e);color:#fff}.challenge-notification .decline-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #e53e3e66}.battle-mode{background:var(--background)}.battle-header-bar{flex-direction:column;gap:0}.battle-players{display:flex;align-items:center;justify-content:space-between;width:100%;gap:15px;padding:10px 0}.battle-player{flex:1;display:flex;flex-direction:column;gap:4px}.battle-player.self .player-name{color:#4caf50;font-weight:700}.battle-player.opponent{text-align:right}.battle-player.opponent .player-name{color:#f59e0b;font-weight:700}.player-progress{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.player-progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#81c784);border-radius:4px;transition:width .3s ease}.opponent-progress .player-progress-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.battle-timer-inline{flex-shrink:0;padding:0 15px}.timer-value{font-size:1.5rem;font-weight:700;color:var(--text);background:#fff;padding:8px 16px;border-radius:20px;box-shadow:var(--shadow)}.timer-value.danger{color:#ef4444;animation:pulse-danger .5s ease-in-out infinite}@keyframes pulse-danger{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.finished-tag{font-size:.75rem;background:#4caf50;color:#fff;padding:2px 8px;border-radius:10px;margin-top:4px;display:inline-block}.feedback-message.submitted{background:#e3f2fd;color:#1976d2;border:2px solid #2196F3}.answer-input.submitted{border-color:#2196f3;background:#e3f2fd}@media (max-width: 500px){.battle-players{flex-direction:column;gap:10px}.battle-player{width:100%}.battle-player.opponent{text-align:left}.battle-timer-inline{order:-1;padding:0}}.battle-results-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--background);overflow-y:auto;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.battle-results{max-width:500px;width:100%;margin:0 auto;padding:0}.result-banner{text-align:center;padding:15px 10px;border-radius:var(--radius);margin-bottom:12px;background:var(--card);box-shadow:var(--shadow)}.result-banner.winner{background:linear-gradient(135deg,#48bb781a,#38a1691a);border:1px solid var(--success)}.result-banner.loser{background:linear-gradient(135deg,#a0aec01a,#7180961a);border:1px solid var(--text-light)}.result-banner.draw{background:linear-gradient(135deg,#f6ad551a,#ed89361a);border:1px solid var(--secondary)}.result-icon{font-size:32px;display:inline-block;margin-right:8px;vertical-align:middle;margin-bottom:0}.result-banner h1{display:inline-block;color:var(--text);font-size:1.25rem;margin:0;vertical-align:middle}.forfeit-note{display:block;color:var(--text-light);font-size:.875rem;margin-top:8px;font-style:italic}.results-topic{text-align:center;color:var(--text-light);margin-bottom:15px;font-size:.875rem}.results-topic strong{color:var(--primary)}.results-comparison{display:flex;align-items:center;gap:10px;margin-bottom:20px}.player-result{flex:1;background:var(--card);border-radius:var(--radius);padding:12px;text-align:center;border:1px solid var(--border);box-shadow:var(--shadow)}.player-result.winner{border-color:var(--success);background:#f0fdf4}.player-result h3{color:var(--text);margin:0 0 5px;font-size:1rem;font-weight:700}.score-big{font-size:2rem;font-weight:800;color:var(--primary);line-height:1}.score-label{color:var(--text-light);font-size:.75rem;margin-bottom:10px}.stats-grid{display:flex;justify-content:space-around;gap:5px;border-top:1px solid var(--border);padding-top:8px}.stat{display:flex;flex-direction:column}.stat-value{color:var(--text);font-weight:700;font-size:.875rem}.stat-label{color:var(--text-light);font-size:.65rem}.vs-divider{color:var(--text-light);font-weight:700;font-size:.875rem;padding-top:0}.answers-review{background:var(--card);border-radius:var(--radius);padding:15px;margin-bottom:15px;box-shadow:var(--shadow);max-height:300px;overflow-y:auto}.answers-review h3{color:var(--text);margin:0 0 10px;text-align:center;font-size:1rem}.answers-list{display:flex;flex-direction:column;gap:6px}.answer-row{background:var(--background);border-radius:var(--radius-sm);padding:8px 10px;border:1px solid var(--border);font-size:.875rem}.question-text{color:var(--text);font-weight:600;margin-bottom:4px;font-size:.875rem}.answer-comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.answer{padding:2px 6px;border-radius:4px;font-size:.75rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.answer.correct{background:#dcfce7;color:#166534}.answer.wrong{background:#fee2e2;color:#991b1b}.correct-answer{color:var(--success);font-weight:700;font-size:.75rem;text-align:center}.close-results-btn{display:block;width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s,background .2s}.close-results-btn:hover{background:var(--primary-dark);transform:translateY(-2px)}@media (max-width: 500px){.results-comparison{flex-direction:row}.stats-grid{flex-wrap:wrap}}.tafel-kiezer{min-height:100vh;background:var(--background);padding-bottom:40px}.tafel-header{display:flex;align-items:center;gap:20px;padding:20px;background:var(--card);border-bottom:1px solid var(--border)}.tafel-header h1{margin:0;font-size:1.5rem;color:var(--text)}.tafel-header .back-btn{background:none;border:none;color:var(--primary);font-size:1rem;cursor:pointer;padding:8px 12px;border-radius:var(--radius)}.tafel-header .back-btn:hover{background:var(--background)}.tafel-content{max-width:600px;margin:0 auto;padding:20px}.mode-section,.tafels-section,.start-section{margin-bottom:30px}.mode-section h2,.tafels-section h2{color:var(--text);font-size:1.1rem;margin-bottom:15px}.mode-buttons{display:flex;gap:15px}.mode-btn{flex:1;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;text-align:center;transition:all .2s}.mode-btn:hover{border-color:var(--primary)}.mode-btn.active{border-color:var(--primary);background:#4caf501a}.mode-icon{display:block;font-size:2rem;margin-bottom:10px}.mode-title{display:block;font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:5px}.mode-desc{display:block;font-size:.8rem;color:var(--text-light)}.quick-select{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap}.quick-select button{background:var(--card);border:1px solid var(--border);padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.9rem;color:var(--text);transition:all .2s}.quick-select button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.tafels-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.tafel-btn{aspect-ratio:1;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s}.tafel-btn:hover{border-color:var(--primary);transform:scale(1.05)}.tafel-btn.selected{background:var(--primary);border-color:var(--primary)}.tafel-btn .tafel-num{font-size:1.5rem;font-weight:700;color:var(--text)}.tafel-btn .tafel-points{font-size:.7rem;color:var(--text-light);margin-top:2px}.tafel-btn.selected .tafel-points{color:#fffc}.points-preview{text-align:center;color:var(--primary);font-weight:600;margin-bottom:15px}.start-quiz-btn{width:100%;padding:18px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s}.tafel-content-centered{max-width:600px;margin:40px auto;display:flex;flex-direction:column;gap:30px}.tafel-selection-mode h1{font-size:2rem;color:#333;margin-bottom:5px}.tafel-selection-mode .subtitle{color:#666;margin-bottom:30px}.quick-select{justify-content:center;margin-bottom:25px}.quick-select button{padding:10px 20px;border-radius:25px;background:#fff;border:2px solid #eee;font-weight:500}.quick-select button:hover{border-color:var(--primary);background:#fff;color:var(--primary)}.tafels-grid.large-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.tafel-btn{border-radius:20px;background:#fff;box-shadow:0 4px 6px #0000000d;border:2px solid transparent}.tafel-btn:hover{transform:translateY(-5px);box-shadow:0 10px 15px #0000001a}.tafel-btn.selected{border-color:var(--primary);background:#e3f2fd;background:var(--primary)}.tafel-btn.selected .tafel-num{color:#fff}.tafel-btn.selected .tafel-points{color:#ffffffe6}.start-section-centered{margin-top:20px}.start-quiz-btn{font-size:1.3rem;padding:20px 40px;border-radius:50px;box-shadow:0 10px 20px #2196f34d}.start-quiz-btn:hover:not(:disabled){box-shadow:0 15px 30px #2196f366}.groep-select-section{margin-bottom:20px}.groep-select{padding:12px 40px 12px 20px;font-size:1.2rem;border-radius:25px;border:2px solid #eee;background:#fff;cursor:pointer;min-width:250px;text-align:center;font-weight:700;color:#333;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}.groep-select:focus{outline:none;border-color:var(--primary)}.dictee-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:15px}.dictee-btn{aspect-ratio:auto;padding:20px 15px;min-height:130px}.dictee-icon{font-size:2.2rem;margin-bottom:8px;display:block}.dictee-name{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.2;display:block}.dictee-btn.selected .dictee-name{color:#fff}.dictee-description{font-size:.8rem;color:var(--text-light);opacity:.8;display:block}.dictee-btn.selected .dictee-description{color:#ffffffe6}@media (max-width: 600px){.mode-selection{padding:20px 15px}.mode-selection h1{font-size:1.5rem}.mode-cards{grid-template-columns:1fr;gap:20px;margin-top:25px}.mode-card{padding:25px 20px}.mode-card .icon{width:80px;height:80px;font-size:36px}.mode-card h2{font-size:20px}.tafel-content-centered{margin:20px auto;padding:0 15px;gap:20px}.tafel-selection-mode h1{font-size:1.5rem}.groep-select{min-width:100%;font-size:1rem;padding:10px 35px 10px 15px}.dictee-grid{grid-template-columns:repeat(2,1fr);gap:10px}.dictee-btn{min-height:110px;padding:15px 10px}.dictee-icon{font-size:1.8rem;margin-bottom:5px}.dictee-name{font-size:.85rem}.dictee-description{font-size:.7rem}.start-quiz-btn{font-size:1.1rem;padding:16px 30px}.tafels-grid.large-grid{grid-template-columns:repeat(3,1fr);gap:10px}.points-preview{font-size:.9rem}}.mode-selection{text-align:center;padding:40px 20px;max-width:800px;margin:0 auto}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:40px}.mode-card{background:#fff;border-radius:20px;padding:30px;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;border:3px solid transparent;box-shadow:0 10px 20px #0000000d;display:flex;flex-direction:column;align-items:center;text-align:center}.mode-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 15px 30px #0000001a}.mode-card.study{border-color:#2196f3}.mode-card.study .icon{background:#e3f2fd;color:#2196f3}.mode-card.quiz{border-color:#4caf50}.mode-card.quiz .icon{background:#e8f5e9;color:#4caf50}.mode-card.challenge{border-color:#ff9800;position:relative}.mode-card.challenge .icon{background:#fff3e0;color:#ff9800}.mode-card.speak{border-color:#9c27b0}.mode-card.speak .icon{background:#f3e5f5;color:#9c27b0}.mode-card .online-indicator{position:absolute;top:15px;right:15px;background:#4caf50;color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:12px;animation:pulse-online 2s infinite}@keyframes pulse-online{0%,to{opacity:1}50%{opacity:.7}}.mode-card .icon{font-size:48px;width:100px;height:100px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:20px;transition:transform .3s ease}.mode-card:hover .icon{transform:rotate(10deg)}.mode-card h2{font-size:24px;margin-bottom:10px;color:#333}.mode-card p{color:#666;line-height:1.5}.back-button{background:none;border:none;color:#666;font-weight:700;cursor:pointer;padding:8px 16px;border-radius:8px;transition:background .2s;display:flex;align-items:center}.back-button:hover{background:#0000000d;color:#333}.study-mode .quiz-header h1{margin:0;font-size:24px}.tafel-quiz{min-height:100vh;background:var(--background)}.tafel-quiz .quiz-header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:var(--card);border-bottom:1px solid var(--border)}.tafel-quiz .back-btn,.tafel-quiz .back-button{background:none;border:none;color:var(--primary);font-size:1rem;cursor:pointer;padding:8px 12px;border-radius:var(--radius);font-weight:600}.tafel-quiz .back-btn:hover,.tafel-quiz .back-button:hover{background:var(--background)}.tafel-quiz .quiz-stats{display:flex;gap:15px}.tafel-quiz .stat{font-weight:700;font-size:1.1rem}.tafel-quiz .stat.correct{color:var(--success)}.tafel-quiz .stat.incorrect{color:#e53935}.tafel-quiz .quiz-progress{font-weight:600;color:var(--text)}.tafel-quiz .quiz-score{font-weight:700;color:var(--primary);font-size:1.1rem}.tafel-quiz .quiz-content{max-width:500px;margin:0 auto;padding:30px 20px}.tafels-badge{text-align:center;color:var(--text-light);font-size:.9rem;margin-bottom:20px}.timer-bar{height:8px;background:var(--border);border-radius:4px;margin-bottom:30px;position:relative;overflow:hidden}.timer-fill{height:100%;background:var(--primary);border-radius:4px;transition:width .3s linear}.timer-bar.danger .timer-fill{background:#e53935}.timer-text{position:absolute;right:0;top:12px;font-size:.9rem;font-weight:600;color:var(--text-light)}.timer-bar.danger .timer-text{color:#e53935}.question-card{background:var(--card);border-radius:var(--radius);padding:40px 30px;text-align:center;box-shadow:var(--shadow);margin-bottom:30px;border:3px solid transparent;transition:border-color .3s}.question-card.correct{border-color:var(--success);background:#4caf500d}.question-card.incorrect{border-color:#e53935;background:#e539350d}.question-display{display:flex;align-items:center;justify-content:center;gap:15px}.question-display.large{flex-direction:column}.question-text{font-size:2.5rem;font-weight:700;color:var(--text)}.question-display.large .question-text{font-size:3rem}.answer-display{font-size:2.5rem;font-weight:700;padding:5px 20px;border-radius:var(--radius)}.answer-display.correct{background:var(--success);color:#fff}.answer-display.incorrect{background:#e53935;color:#fff}.answer-placeholder{font-size:2.5rem;color:var(--text-light)}.points-indicator{margin-top:15px;color:var(--primary);font-weight:600}.bonus-hint{color:var(--text-light);font-weight:400;font-size:.9em}.feedback-message{margin-top:20px;font-size:1.2rem;font-weight:600}.feedback-message.correct{color:var(--success)}.feedback-message.incorrect{color:#e53935}.answer-form{display:flex;gap:10px}.answer-form input{flex:1;padding:18px 20px;font-size:1.5rem;border:2px solid var(--border);border-radius:var(--radius);text-align:center;font-weight:600;outline:none;transition:border-color .2s}.answer-form input:focus{border-color:var(--primary)}.answer-form input:disabled{background:var(--background)}.answer-form button{padding:18px 30px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s}.answer-form button:hover:not(:disabled){background:var(--primary-dark)}.answer-form button:disabled{background:var(--text-light);cursor:not-allowed}.practice-tip{text-align:center;color:var(--text-light);font-size:.9rem;margin-top:30px}.tafel-quiz.results{display:flex;align-items:center;justify-content:center;padding:20px}.results-card{background:var(--card);border-radius:var(--radius);padding:30px;max-width:500px;width:100%;text-align:center;box-shadow:var(--shadow)}.results-card h1{margin:0 0 20px;font-size:2rem;color:var(--text)}.final-score{margin-bottom:25px}.final-score .score-number{display:block;font-size:4rem;font-weight:800;color:var(--primary);line-height:1}.final-score .score-label{color:var(--text-light);font-size:1rem}.results-summary{display:flex;justify-content:center;gap:40px;margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid var(--border)}.earned-rewards{display:flex;justify-content:center;gap:30px;margin-bottom:25px;padding:15px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius);animation:rewardPop .5s ease-out}@keyframes rewardPop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.reward-item{display:flex;flex-direction:column;align-items:center;gap:4px}.reward-item .reward-icon{font-size:1.8rem}.reward-item .reward-value{font-size:1.3rem;font-weight:800;color:#92400e}.reward-item .reward-label{font-size:.8rem;color:#b45309;font-weight:600}.summary-stat .stat-value{display:block;font-size:1.5rem;font-weight:700;color:var(--text)}.summary-stat .stat-label{color:var(--text-light);font-size:.9rem}.results-list{text-align:left;margin-bottom:25px;max-height:250px;overflow-y:auto}.results-list h3{margin:0 0 15px;color:var(--text);font-size:1rem}.result-row{display:flex;align-items:center;padding:10px 12px;background:var(--background);border-radius:var(--radius-sm);margin-bottom:8px;border-left:4px solid}.result-row.correct{border-color:var(--success)}.result-row.incorrect{border-color:#e53935}.result-emoji{font-size:1.4rem;margin-right:8px;width:28px;text-align:center;flex-shrink:0}.result-question{font-weight:600;color:var(--text);margin-right:10px}.result-answer{flex:1;color:var(--text)}.result-answer .correct-answer{color:var(--success);margin-left:8px;font-weight:600}.result-icon{font-weight:700;font-size:1.2rem}.result-row.correct .result-icon{color:var(--success)}.result-row.incorrect .result-icon{color:#e53935}.results-actions{display:flex;flex-direction:column;gap:10px}.primary-btn,.secondary-btn{padding:15px 20px;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.primary-btn{background:var(--primary);color:#fff;border:none}.primary-btn:hover{background:var(--primary-dark)}.secondary-btn{background:transparent;color:var(--primary);border:2px solid var(--primary)}.secondary-btn:hover{background:#4caf501a}.speaker-button{width:100px;height:100px;border-radius:50%;border:3px solid var(--primary);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);cursor:pointer;font-size:2.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto;transition:transform .2s}.speaker-button:hover:not(:disabled){transform:scale(1.05)}.speaker-button:disabled{opacity:.7;cursor:not-allowed}.speaker-section{margin-bottom:20px;text-align:center}.speaker-hint{color:var(--text-light);font-size:.9rem;margin-top:10px}.volume-control{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}.volume-icon{font-size:1.2rem}.volume-slider{width:120px;accent-color:var(--primary)}@media (max-width: 500px){.question-text{font-size:2rem}.question-display.large .question-text{font-size:2.5rem}.answer-form{flex-direction:column}.answer-form input{padding:15px;font-size:1.3rem}.answer-form button{padding:15px 20px;width:100%}.speaker-button{width:80px;height:80px;font-size:2rem}.tafel-quiz .quiz-header{padding:12px 15px}.tafel-quiz .quiz-content{padding:20px 15px}.question-card{padding:25px 20px}.results-card{padding:20px 15px}.results-card h1{font-size:1.5rem}.final-score .score-number{font-size:3rem}.results-summary{gap:25px}.practice-tip{font-size:.85rem;padding:0 10px}.answer-display{font-size:1.8rem}}.clock-display-container{display:flex;flex-direction:column;align-items:center;gap:15px}.clock-svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}.clock-svg.clock-small{width:120px;height:120px}.clock-svg.clock-medium{width:180px;height:180px}.clock-svg.clock-large{width:240px;height:240px}.clock-face{fill:#fff;stroke:#333;stroke-width:4}.hour-marker{stroke:#333;stroke-width:3;stroke-linecap:round}.minute-marker{stroke:#999;stroke-width:1.5;stroke-linecap:round}.hour-number{font-size:18px;font-weight:700;fill:#333;font-family:Nunito,-apple-system,BlinkMacSystemFont,sans-serif}.clock-small .hour-number{font-size:12px}.clock-medium .hour-number{font-size:15px}.hour-hand{stroke:#333;stroke-width:6;stroke-linecap:round}.minute-hand{stroke:#667eea;stroke-width:4;stroke-linecap:round}.center-dot{fill:#667eea}.digital-display{font-size:2rem;font-weight:700;font-family:Courier New,monospace;color:#333;background:#f5f5f5;padding:10px 20px;border-radius:12px;border:3px solid #ddd;letter-spacing:2px}@media (max-width: 480px){.clock-svg.clock-large{width:200px;height:200px}.clock-svg.clock-medium{width:150px;height:150px}.digital-display{font-size:1.5rem;padding:8px 16px}.hour-number{font-size:14px}}.clock-display-container.correct .clock-face{stroke:#4caf50;stroke-width:6;transition:stroke .3s ease}.clock-display-container.incorrect .clock-face{stroke:#f44336;stroke-width:6;transition:stroke .3s ease}.clock-svg.clock-mini{width:60px;height:60px}.clock-mini .hour-number{font-size:8px}.clock-mini .hour-marker{stroke-width:2}.clock-mini .minute-marker{stroke-width:1}.clock-mini .hour-hand{stroke-width:3}.clock-mini .minute-hand{stroke-width:2}.clock-mini .center-dot{r:3}.time-input{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:8px 16px;font-size:2rem;font-family:Courier New,monospace;transition:border-color .2s ease,box-shadow .2s ease}.time-input:focus-within{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.time-input.disabled{background:#f5f5f5;opacity:.7}.time-input-field{width:2.5ch;border:none;background:transparent;font-size:inherit;font-family:inherit;text-align:center;padding:4px 0;outline:none;color:#333}.time-input-field::placeholder{color:#ccc}.time-input-field:disabled{color:#999}.time-input-colon{font-size:inherit;font-weight:700;color:#667eea;padding:0 2px;-webkit-user-select:none;user-select:none}@media (max-width: 480px){.time-input{font-size:1.75rem;padding:6px 12px}}.answer-form .time-input{flex:1;max-width:200px}.time-input-field:focus{background:#667eea0d;border-radius:4px}.oefenen-progress-bar{width:100%;height:6px;background:#e0e0e0;border-radius:3px;margin-bottom:16px;overflow:hidden}.oefenen-progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:3px;transition:width .4s ease}.phase-label{text-align:center;font-size:14px;color:#888;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.flashcard-container{display:flex;flex-direction:column;align-items:center}.flashcard{background:#fff;border-radius:20px;padding:32px 24px;box-shadow:0 4px 20px #0000001a;text-align:center;width:100%;max-width:400px;transition:all .3s ease}.flashcard.revealed{border:2px solid #4CAF50}.flashcard-front{display:flex;flex-direction:column;align-items:center;gap:12px}.flashcard-emoji{font-size:72px;line-height:1}.flashcard-nl{font-size:28px;font-weight:700;color:#333}.flashcard-reveal-btn{margin-top:16px;padding:14px 28px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.flashcard-reveal-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.flashcard-back{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:2px dashed #e0e0e0;animation:fadeSlideIn .4s ease}.flashcard-en{font-size:32px;font-weight:700;color:#4caf50}.flashcard-back .speaker-button{font-size:32px;background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s}.flashcard-back .speaker-button:hover{background:#0000000d}.flashcard-next-btn{margin-top:8px;padding:14px 28px;background:linear-gradient(135deg,#4caf50,#8bc34a);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.flashcard-next-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.volume-control.compact{width:120px}.volume-control.compact .volume-slider{width:100%}.mc-quiz-container{display:flex;flex-direction:column;align-items:center}.mc-question{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:24px}.mc-emoji{font-size:64px;line-height:1}.mc-nl-word{font-size:28px;font-weight:700;color:#333}.mc-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:400px}.mc-choice-btn{padding:16px 12px;border:2px solid #e0e0e0;border-radius:14px;background:#fff;font-size:18px;font-weight:600;color:#333;cursor:pointer;transition:all .2s ease}.mc-choice-btn.selectable:hover{border-color:#667eea;background:#f0f2ff;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.mc-choice-btn.selectable:active{transform:translateY(0)}.mc-choice-btn.correct{border-color:#4caf50;background:#e8f5e9;color:#2e7d32;animation:correctPulse .5s ease}.mc-choice-btn.incorrect{border-color:#f44336;background:#ffebee;color:#c62828;animation:shake .4s ease}.mc-choice-btn:disabled{cursor:default;opacity:.7}.mc-choice-btn.correct:disabled,.mc-choice-btn.incorrect:disabled{opacity:1}.mc-feedback{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px;padding:16px;border-radius:12px;font-size:18px;font-weight:600;animation:fadeSlideIn .3s ease}.mc-feedback.correct{background:#e8f5e9;color:#2e7d32}.mc-feedback.incorrect{background:#ffebee;color:#c62828}.mc-next-btn{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s}.mc-next-btn:hover{transform:translateY(-2px)}.wrong-words-review{margin-top:20px;width:100%}.wrong-words-review h3{font-size:16px;color:#c62828;margin-bottom:12px}.wrong-words-list{display:flex;flex-direction:column;gap:8px}.wrong-word-item{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff5f5;border-radius:10px;border:1px solid #ffcdd2}.wrong-word-emoji{font-size:24px;width:32px;text-align:center}.wrong-word-nl{font-weight:600;color:#555}.wrong-word-arrow{color:#aaa}.wrong-word-en{font-weight:700;color:#c62828}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@media (max-width: 500px){.flashcard-emoji,.mc-emoji{font-size:56px}.flashcard-nl,.mc-nl-word{font-size:24px}.flashcard-en{font-size:28px}.mc-choices{grid-template-columns:1fr 1fr;gap:8px}.mc-choice-btn{padding:14px 10px;font-size:16px}}.audio-recorder{display:flex;flex-direction:column;align-items:center;gap:1rem}.record-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.record-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.record-button:active:not(:disabled){transform:translateY(0)}.record-button:disabled{opacity:.6;cursor:not-allowed}.record-button.recording{background:linear-gradient(135deg,#f5576c,#f093fb);animation:pulse-glow 1.5s infinite}@keyframes pulse-glow{0%,to{box-shadow:0 4px 15px #f5576c66}50%{box-shadow:0 4px 25px #f5576cb3}}.record-icon{font-size:1.3rem}.record-text{font-size:1rem}.recording-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f5576c1a;border-radius:20px}.recording-dot{width:12px;height:12px;background:#f5576c;border-radius:50%;animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.recording-time{font-family:Courier New,monospace;font-size:1rem;font-weight:600;color:#f5576c}.permission-error{color:#e53935;font-size:.9rem;text-align:center;padding:.5rem;background:#e539351a;border-radius:8px}.zeeslag-page{padding-bottom:40px}.zeeslag-page h1{color:#2563eb;margin-bottom:10px}.zeeslag-page .subtitle{color:#64748b;margin-bottom:30px}.print-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;padding:16px 40px;font-size:1.2rem;font-weight:700;border-radius:30px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #2563eb4d}.print-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2563eb66}.print-btn span{font-size:1.4rem}.zeeslag-printable{display:none}.print-title{text-align:center;font-size:28px;color:#2563eb;margin-bottom:15px}.zeeslag-info{display:flex;justify-content:space-between;background:#f0f9ff;border:2px solid #bfdbfe;border-radius:10px;padding:15px 20px;margin-bottom:20px}.zeeslag-sounds h4,.zeeslag-ships h4{color:#1e40af;margin-bottom:8px;font-size:14px}.zeeslag-sounds p{margin:4px 0;font-size:13px}.zeeslag-ships{text-align:right}.ship-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:4px 0;font-size:13px}.ship-blocks{display:flex;gap:2px}.ship-blocks .block{width:14px;height:14px;background:#3b82f6;border-radius:2px}.zeeslag-grids{display:flex;justify-content:space-between;gap:20px}.zeeslag-grid-section{flex:1}.zeeslag-grid-section h3{text-align:center;color:#1e40af;font-size:16px;margin-bottom:10px}.zeeslag-grid{width:100%;border-collapse:collapse}.zeeslag-grid th,.zeeslag-grid td{width:24px;height:24px;border:1px solid #93c5fd;text-align:center;font-size:11px;font-weight:700}.zeeslag-grid th{background:#dbeafe;color:#1e40af}.zeeslag-grid td{background:#fff}.zeeslag-grid .row-header{background:#dbeafe;color:#1e40af;font-weight:700}.zeeslag-name{margin-top:20px;text-align:center;font-size:14px;color:#64748b}.zeeslag-footer{margin-top:15px;text-align:center;font-size:11px;color:#94a3b8}@media print{.no-print,.quiz-header,header,.profile-menu-container,.challenge-notification-overlay,.home-header,.collapsible-section{display:none!important}.zeeslag-page{padding:0;max-width:none}.zeeslag-printable{display:block!important}@page{size:A4;margin:10mm}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.zeeslag-info{background:#f0f9ff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.zeeslag-grid th,.zeeslag-grid .row-header{background:#dbeafe!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.ship-blocks .block{background:#3b82f6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}@media screen{.zeeslag-printable{display:block;margin-top:40px;padding:20px;background:#fff;border-radius:15px;box-shadow:0 4px 20px #0000001a;max-width:700px;margin-left:auto;margin-right:auto;transform:scale(.9);transform-origin:top center}}.sudoku-page{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px;background-color:var(--bg-secondary)}.control-panel{background:#fff;padding:2rem;border-radius:20px;box-shadow:0 4px 6px -1px #0000001a;margin-bottom:2rem;width:100%;max-width:800px;text-align:center}.control-panel h1{color:var(--text-primary);margin-bottom:2rem;font-size:2.5rem}.controls{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.control-row{display:flex;gap:1rem;width:100%;justify-content:center;flex-wrap:wrap}.button-row{display:flex;gap:1rem;width:100%;justify-content:center;flex-wrap:wrap;margin-top:1rem}.control-group{display:flex;flex-direction:column;gap:.5rem;align-items:center;min-width:150px}.control-group label{font-weight:600;color:var(--text-secondary)}.control-select{padding:.75rem 1.5rem;border:2px solid var(--primary-color);background:#fff;color:var(--text-primary);border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;width:100%;outline:none;transition:border-color .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}.control-select:focus{border-color:var(--primary-color-dark)}.action-btn{padding:1rem 2rem;border-radius:12px;border:none;font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform .2s;flex:1;min-width:200px;max-width:300px}.action-btn:active{transform:scale(.98)}.generate-btn{background:#4ade80;color:#064e3b}.print-btn{background:#60a5fa;color:#1e3a8a}.toggle-btn{background:#f472b6;color:#831843}.sudoku-container{background:#fff;padding:2rem;border-radius:20px;box-shadow:0 4px 20px #0000000d;margin-bottom:2rem;width:100%;max-width:1200px}.sudoku-list{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center}.sudoku-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem}.puzzle-number{color:#666;font-size:1.2rem;margin:0}.sudoku-grid{display:grid;grid-template-columns:repeat(var(--grid-size),1fr);gap:0;border:4px solid #333;width:fit-content;margin:0 auto;background:#333}.sudoku-grid.size-4 .sudoku-cell{width:80px;height:80px;font-size:2rem}.sudoku-grid.size-6 .sudoku-cell{width:60px;height:60px;font-size:1.5rem}.sudoku-grid.size-9 .sudoku-cell{width:50px;height:50px;font-size:1.25rem}.sudoku-cell{background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;position:relative}.sudoku-cell.border-right{border-right:4px solid #333}.sudoku-cell.border-bottom{border-bottom:4px solid #333}.sudoku-cell.initial{background-color:#f0f9ff;font-weight:700;color:#000}.cell-input{width:100%;height:100%;border:none;text-align:center;font-size:inherit;background:transparent;color:#2563eb;font-weight:700}.cell-input:focus{outline:none;background-color:#e0f2fe}.cell-input::-webkit-outer-spin-button,.cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.print-only{display:none}@media print{.no-print,.profile-menu-container,.challenge-notification-overlay,.quiz-header,.home-header,.collapsible-section{display:none!important}.print-only{display:block!important}.sudoku-page{display:block!important;background:#fff;padding:0;min-height:auto}.sudoku-container{box-shadow:none;padding:0;margin:0;width:100%;max-width:none;visibility:visible!important}.sudoku-header{text-align:center;margin-bottom:.5rem}.sudoku-header h1{font-size:1.5rem;margin-bottom:.2rem;color:#000;margin-top:0}.sudoku-header p{font-size:.9rem;margin-top:0;margin-bottom:1rem}.sudoku-list{display:grid!important;width:100%;margin-bottom:1rem}.sudoku-list.count-1{grid-template-columns:1fr;justify-items:center}.sudoku-list:not(.count-1){grid-template-columns:1fr 1fr;column-gap:30px;row-gap:25px}.sudoku-wrapper{break-inside:avoid;page-break-inside:avoid;margin-bottom:10px}.puzzle-number{font-size:11pt;margin-bottom:5px;margin-top:0;font-weight:700}.sudoku-grid{border-color:#000;border-width:2px;background:#000}.sudoku-cell{border-color:#666;border-width:1px}.sudoku-cell.border-right,.sudoku-cell.border-bottom{border-color:#000;border-width:2px}.sudoku-cell.initial{background-color:#f0f0f0!important;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}.cell-input{display:none}.sudoku-list.count-1 .sudoku-grid.size-4 .sudoku-cell{width:100px;height:100px;font-size:2.5rem}.sudoku-list.count-1 .sudoku-grid.size-6 .sudoku-cell{width:80px;height:80px;font-size:2rem}.sudoku-list.count-1 .sudoku-grid.size-9 .sudoku-cell{width:50px;height:50px;font-size:1.5rem}.sudoku-list:not(.count-1) .sudoku-grid.size-4 .sudoku-cell{width:60px;height:60px;font-size:1.5rem}.sudoku-list:not(.count-1) .sudoku-grid.size-6 .sudoku-cell{width:45px;height:45px;font-size:1.25rem}.sudoku-list:not(.count-1) .sudoku-grid.size-9 .sudoku-cell{width:35px;height:35px;font-size:1rem}.sudoku-list.count-7,.sudoku-list.count-8,.sudoku-list.count-9,.sudoku-list.count-10{row-gap:10px}.sudoku-list.count-7 .sudoku-grid.size-4 .sudoku-cell,.sudoku-list.count-8 .sudoku-grid.size-4 .sudoku-cell,.sudoku-list.count-9 .sudoku-grid.size-4 .sudoku-cell,.sudoku-list.count-10 .sudoku-grid.size-4 .sudoku-cell{width:40px;height:40px;font-size:1rem}.sudoku-list.count-7 .sudoku-grid.size-6 .sudoku-cell,.sudoku-list.count-8 .sudoku-grid.size-6 .sudoku-cell,.sudoku-list.count-9 .sudoku-grid.size-6 .sudoku-cell,.sudoku-list.count-10 .sudoku-grid.size-6 .sudoku-cell{width:30px;height:30px;font-size:.9rem}.sudoku-list.count-7 .sudoku-grid.size-9 .sudoku-cell,.sudoku-list.count-8 .sudoku-grid.size-9 .sudoku-cell,.sudoku-list.count-9 .sudoku-grid.size-9 .sudoku-cell,.sudoku-list.count-10 .sudoku-grid.size-9 .sudoku-cell{width:22px;height:22px;font-size:.8rem}.sudoku-footer{margin-top:10px;color:#666;font-style:italic;text-align:center;grid-column:1 / -1;font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6366f1;--primary-dark: #4f46e5;--secondary: #f59e0b;--success: #22c55e;--error: #ef4444;--background: #f8fafc;--card: #ffffff;--text: #1e293b;--text-light: #64748b;--border: #e2e8f0;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--radius: 16px;--radius-sm: 8px}body{font-family:Nunito,sans-serif;background:var(--background);color:var(--text);min-height:100vh}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.home{max-width:800px;margin:0 auto;padding:24px}.home-header{text-align:center;margin-bottom:20px;position:relative}.avatar-btn{position:absolute;top:0;right:0;background:#fff;border:2px solid #ddd;padding:5px 10px;border-radius:15px;font-size:12px;cursor:pointer}.game-center-promo{text-align:center;margin-top:40px;padding:20px;background:#e8f5e9;border-radius:16px}.game-center-btn{background:#4caf50;color:#fff;font-size:20px;padding:15px 40px;border-radius:30px;border:none;cursor:pointer;font-weight:700;box-shadow:0 4px #2e7d32;transition:transform .1s}.game-center-btn:active{transform:translateY(4px);box-shadow:none}.home-header h1{font-size:2rem;font-weight:800;color:var(--primary);margin-bottom:4px}.home-header p{font-size:1.25rem;color:var(--text-light)}.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.scoreboard-item{background:var(--card);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}.scoreboard-icon{font-size:2rem}.scoreboard-info{display:flex;flex-direction:column}.scoreboard-value{font-size:1.25rem;font-weight:700}.scoreboard-label{font-size:.75rem;color:var(--text-light)}.level-progress{width:60px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:4px}.level-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;transition:width .3s ease}.subject-section{margin-bottom:24px}.subject-section h2{font-size:1.5rem;margin-bottom:16px;border-bottom:2px solid #eee;padding-bottom:8px;color:var(--text)}.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:16px}.module-card{background:var(--card);border-radius:var(--radius);padding:16px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;border:3px solid transparent;display:flex;flex-direction:column;height:100%;min-height:180px}.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-color, var(--primary))}.module-card.coming-soon{opacity:.6;pointer-events:none}.module-icon{font-size:3rem;display:block;margin-bottom:12px}.module-card h3{font-size:1.25rem;margin-bottom:4px}.module-card p{font-size:.875rem;color:var(--text-light);margin-bottom:12px;flex-grow:1}.play-button{display:inline-block;background:var(--primary);color:#fff;padding:8px 16px;border-radius:var(--radius-sm);font-weight:600;font-size:.875rem}.stats-link{display:block;text-align:center;color:var(--primary);font-weight:600;text-decoration:none;padding:12px}.stats-link:hover{text-decoration:underline}.quiz-page{max-width:1200px;margin:0 auto;padding:24px;min-height:100vh}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.back-button{background:none;border:none;font-size:1rem;font-weight:600;color:var(--text-light);cursor:pointer;font-family:inherit}.back-button:hover{color:var(--text)}.quiz-stats{display:flex;gap:16px}.quiz-stats span{font-size:1.25rem;font-weight:700}.streak{color:#f97316}.points{color:var(--secondary)}.progress-container{margin-bottom:32px}.progress-bar{width:100%;height:12px;background:var(--border);border-radius:6px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#8b5cf6);border-radius:6px;transition:width .3s ease}.progress-text{font-size:.875rem;color:var(--text-light);text-align:center;display:block}.question-card{background:var(--card);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg)}.question-content{margin-bottom:24px}.question-text{font-size:1.5rem;font-weight:700;line-height:1.4;margin-bottom:16px}.hint-button{background:#fef3c7;border:2px solid #fcd34d;color:#92400e;padding:10px 20px;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}.hint-button:hover:not(:disabled){background:#fde68a}.hint-button:disabled{opacity:.7;cursor:not-allowed}.hint-box{background:#fef3c7;border-left:4px solid #f59e0b;padding:12px 16px;border-radius:var(--radius-sm);font-size:1rem;color:#92400e}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.option-button{background:var(--background);border:3px solid var(--border);padding:20px;border-radius:var(--radius);font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;text-align:center}.option-button:hover:not(:disabled){border-color:var(--primary);background:#eef2ff}.option-button.correct{background:#dcfce7;border-color:var(--success);color:#166534}.option-button.incorrect{background:#fee2e2;border-color:var(--error);color:#991b1b}.option-button.disabled{opacity:.5;cursor:not-allowed}.result-box{display:flex;align-items:flex-start;gap:16px;padding:20px;border-radius:var(--radius);margin-bottom:24px}.result-box.correct{background:#dcfce7;border:2px solid var(--success)}.result-box.incorrect{background:#fee2e2;border:2px solid var(--error)}.result-icon{font-size:2rem}.result-content{flex:1}.result-text{font-size:1.125rem;font-weight:700}.explanation{margin-top:8px;font-size:1rem;opacity:.9}.next-button{width:100%;background:var(--primary);color:#fff;border:none;padding:16px;border-radius:var(--radius);font-size:1.125rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s}.next-button:hover{background:var(--primary-dark)}.quiz-result{max-width:600px;margin:0 auto;padding:24px;text-align:center}.result-header{background:var(--card);border-radius:var(--radius);padding:48px 32px;margin-bottom:32px;box-shadow:var(--shadow-lg)}.result-emoji{font-size:5rem;display:block;margin-bottom:16px}.result-header h1{font-size:2rem;margin-bottom:16px;color:var(--primary)}.result-score{font-size:1.5rem;color:var(--text);margin-bottom:8px}.result-points{font-size:1.25rem;color:var(--secondary);font-weight:700}.wrong-answers-section{background:var(--card);border-radius:var(--radius);padding:24px;margin-bottom:32px;text-align:left;box-shadow:var(--shadow)}.wrong-answers-section h2{font-size:1.25rem;margin-bottom:16px;color:var(--text-light)}.wrong-answers-list{list-style:none}.wrong-answer-item{padding:16px;border-bottom:1px solid var(--border)}.wrong-answer-item:last-child{border-bottom:none}.wrong-question{font-weight:600;margin-bottom:8px}.wrong-given span.incorrect{color:var(--error)}.wrong-correct span.correct{color:var(--success);font-weight:600}.result-actions{display:flex;gap:16px;justify-content:center}.btn-primary,.btn-secondary{padding:16px 32px;border-radius:var(--radius);font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;border:none;transition:transform .2s,box-shadow .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn-secondary{background:var(--background);color:var(--text);border:2px solid var(--border)}.btn-secondary:hover{border-color:var(--primary)}.achievement-popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.achievement-popup{background:var(--card);border-radius:var(--radius);padding:48px;text-align:center;box-shadow:var(--shadow-lg);animation:popIn .4s cubic-bezier(.175,.885,.32,1.275);max-width:90%;width:360px}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.achievement-popup-icon{font-size:5rem;display:block;margin-bottom:16px;animation:bounce .6s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.achievement-popup h2{color:var(--secondary);margin-bottom:8px}.achievement-popup h3{font-size:1.5rem;margin-bottom:8px}.achievement-popup p{color:var(--text-light);margin-bottom:24px}.achievement-popup button{background:var(--primary);color:#fff;border:none;padding:12px 32px;border-radius:var(--radius-sm);font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit}.stats-page{max-width:800px;margin:0 auto;padding:24px}.stats-header{margin-bottom:32px}.stats-header h1{font-size:2rem;margin-top:16px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}.stat-card{background:var(--card);border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow)}.stat-card.big{grid-column:span 3;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff}.stat-card.big .stat-label{color:#fffc}.stat-icon{font-size:2rem;display:block;margin-bottom:8px}.stat-value{font-size:2rem;font-weight:800;display:block}.stat-card.big .stat-value{font-size:3rem}.stat-label{font-size:.875rem;color:var(--text-light)}.achievements-section{margin-bottom:32px}.achievements-section h2{font-size:1.5rem;margin-bottom:16px}.no-achievements{color:var(--text-light);font-style:italic}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.achievement-card{background:var(--card);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}.achievement-icon{font-size:2.5rem}.achievement-info h3{font-size:1rem;margin-bottom:4px}.achievement-info p{font-size:.875rem;color:var(--text-light)}.progress-section h2{font-size:1.5rem;margin-bottom:16px}.category-progress-list{display:flex;flex-direction:column;gap:12px}.category-progress-item{background:var(--card);border-radius:var(--radius);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.category-info h3{font-size:1rem;text-transform:capitalize}.category-info p{font-size:.875rem;color:var(--text-light);text-transform:capitalize}.category-stats{font-weight:600;color:var(--primary)}.no-questions{text-align:center;padding:48px}.no-questions h2{font-size:2rem;margin-bottom:16px}.no-questions p{color:var(--text-light);margin-bottom:24px}@media (max-width: 640px){.home{padding:60px 16px 16px}.home-header{margin-bottom:16px}.home-header h1{font-size:1.5rem}.home-header p{font-size:1rem}.scoreboard{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}.scoreboard-item{padding:10px 12px;gap:8px}.scoreboard-icon{font-size:1.4rem}.scoreboard-value{font-size:1rem}.scoreboard-label{font-size:.65rem}.level-progress{width:50px}.subject-section{margin-bottom:16px}.subject-section h2{font-size:1.2rem;margin-bottom:10px;padding-bottom:6px}.modules-grid{grid-template-columns:1fr;gap:10px;margin-bottom:10px}.module-card{min-height:auto;padding:14px;flex-direction:row;align-items:center;gap:12px}.module-card .module-icon{font-size:2rem;margin-bottom:0}.module-card h3{font-size:1rem;margin-bottom:2px}.module-card p{font-size:.8rem;margin-bottom:0}.module-card .module-actions,.module-card .play-button{display:none}.options-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card.big{grid-column:span 2}.result-actions{flex-direction:column}.quiz-page{padding:12px}.quiz-input-area{flex-direction:column;gap:12px}.answer-btn{width:100%;padding:16px}.quiz-header{margin-bottom:16px}.question-text{font-size:1.25rem;margin-bottom:12px}}.quiz-input-area{margin-top:20px;display:flex;gap:12px;justify-content:center;width:100%;max-width:600px;margin-left:auto;margin-right:auto}.answer-input{flex:1;padding:16px;border:3px solid #ddd;border-radius:12px;font-size:1.2rem;font-family:inherit;outline:none;transition:all .2s}.answer-input:focus{border-color:#2196f3;box-shadow:0 0 0 4px #2196f333}.answer-input.correct{border-color:#4caf50;background:#e8f5e9;color:#2e7d32}.answer-input.incorrect{border-color:#f44336;background:#ffebee;color:#c62828}.answer-btn{background:#2196f3;color:#fff;border:none;padding:0 32px;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s}.answer-btn:hover:not(:disabled){background:#1976d2;transform:translateY(-2px)}.answer-btn:disabled{background:#ccc;cursor:not-allowed}.feedback-message{margin-top:20px;padding:20px;border-radius:12px;text-align:center;font-size:1.2rem;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}.feedback-message.correct{background:#e8f5e9;color:#2e7d32;border:2px solid #4CAF50}.feedback-message.incorrect{background:#ffebee;color:#c62828;border:2px solid #F44336}.feedback-message.almost-correct{background:#fff8e1;color:#f57f17;border:2px solid #FFC107}.module-card-wrapper{display:flex;flex-direction:column;gap:8px}.challenge-module-btn{background:linear-gradient(135deg,#ed8936,#dd6b20);color:#fff;border:none;padding:10px 16px;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:8px}.challenge-module-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ed893666}.challenge-module-btn .online-badge{background:#48bb78;color:#fff;font-size:.75rem;padding:2px 8px;border-radius:10px;font-weight:700}