*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{color:#fff;background-color:#0b091a;width:100%;height:100%;font-family:Fredoka,Outfit,system-ui,-apple-system,sans-serif;overflow:hidden}.game-container{flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex;position:relative}#webcam{object-fit:cover;opacity:.35;filter:saturate(1.3)contrast(1.1)brightness(.9);pointer-events:none;z-index:1;width:100%;height:100%;transition:left .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1);position:absolute;top:0;left:0;transform:scaleX(-1)}#canvas{z-index:2;cursor:grab;width:100%;height:100%;transition:left .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1);position:absolute;top:0;left:0}#canvas:active{cursor:grabbing}.kids-hud{pointer-events:none;z-index:5;text-align:center;flex-direction:column;align-items:center;width:100%;padding:0 20px;transition:left .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1);display:flex;position:absolute;top:25px;left:0}.settings-open #webcam,.settings-open #canvas,.settings-open .kids-hud{width:calc(100% - 370px);left:370px}.game-title{color:#fff;text-shadow:0 0 15px #ff6b6b99,0 0 30px #ff6b6b4d;letter-spacing:.5px;margin-bottom:8px;font-size:2.2rem;font-weight:700}.instructions-prompt{-webkit-backdrop-filter:blur(12px);color:#ffd859;text-shadow:0 2px 4px #0000004d;background:#ffffff14;border:1px solid #ffffff26;border-radius:50px;padding:8px 24px;font-size:1.1rem;font-weight:500;animation:4s ease-in-out infinite float;display:inline-block;box-shadow:0 8px 32px #1f268726}.loading-state{-webkit-backdrop-filter:blur(8px);background:#0b091ad9;border:1px solid #845ef74d;border-radius:30px;align-items:center;gap:12px;margin-top:15px;padding:8px 20px;font-size:.95rem;display:flex}.spinner{border:3px solid #ffffff1a;border-top-color:#845ef7;border-radius:50%;width:20px;height:20px;animation:1s ease-in-out infinite spin}.start-overlay{z-index:10;opacity:1;background:radial-gradient(circle,#18143a 0%,#080614 100%);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s ease-out;display:flex;position:absolute;top:0;left:0}.start-overlay.fade-out{opacity:0;pointer-events:none}.start-card{-webkit-backdrop-filter:blur(20px);text-align:center;background:#ffffff0d;border:2px solid #ffffff1f;border-radius:40px;width:90%;max-width:540px;padding:45px 35px;box-shadow:0 20px 80px #0009}.avatar-row{justify-content:center;gap:25px;margin-bottom:25px;display:flex}.avatar-bounce{font-size:4.5rem;animation:1.5s ease-in-out infinite animal-bounce;display:inline-block}.start-card h1{background:linear-gradient(135deg,#ffd859 0%,#ff6b6b 100%);-webkit-text-fill-color:transparent;text-shadow:0 10px 20px #0003;-webkit-background-clip:text;margin-bottom:15px;font-size:2.8rem;font-weight:800}.start-card p{color:#d1cfe2;margin-bottom:35px;font-size:1.15rem;font-weight:300;line-height:1.6}.btn-play{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4ef2a1 0%,#05a761 100%);border:none;border-radius:50px;padding:16px 45px;font-family:Fredoka,sans-serif;font-size:1.6rem;font-weight:700;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;animation:2s infinite pulse-button;box-shadow:0 8px 30px #4ef2a166,inset 0 2px 4px #ffffff4d}.btn-play:hover{transform:scale(1.08);box-shadow:0 12px 35px #4ef2a199,inset 0 2px 4px #fff6}.btn-play:active{transform:scale(.96)}.camera-notice{margin-top:25px;color:#8c8aa7!important;margin-bottom:0!important;font-size:.85rem!important}.admin-panel{z-index:8;flex-direction:column-reverse;align-items:flex-start;gap:15px;display:flex;position:absolute;bottom:25px;left:25px}.admin-toggle{-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:24px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),background .3s;display:flex;box-shadow:0 10px 30px #0000004d}.admin-toggle:hover{background:#ffffff26;transform:rotate(45deg)scale(1.1)}.admin-content{opacity:0;-webkit-backdrop-filter:blur(20px);pointer-events:none;background:#0f0c26d9;border:1px solid #ffffff1a;border-radius:24px;width:320px;max-height:0;padding:0 24px;transition:max-height .4s,opacity .3s,padding .4s;overflow:hidden;box-shadow:0 15px 45px #0006}.admin-panel.open .admin-content{opacity:1;pointer-events:all;max-height:80vh;padding:24px;overflow-y:auto}.admin-content h3{color:#ffd859;border-bottom:1px solid #ffffff1a;margin-bottom:18px;padding-bottom:10px;font-size:1.15rem;font-weight:600}.control-group{margin-bottom:16px}.control-group label{color:#a4a2bc;margin-bottom:8px;font-size:.88rem;font-weight:500;display:block}.slider-container{align-items:center;gap:12px;display:flex}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#ffffff26;border-radius:5px;outline:none;width:100%;height:8px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#ffd859;border-radius:50%;width:18px;height:18px;transition:transform .1s;box-shadow:0 0 10px #ffd85980}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.badge{text-align:center;background:#ffffff1a;border-radius:6px;min-width:48px;padding:4px 8px;font-family:monospace;font-size:.8rem}.checkbox-container{cursor:pointer;color:#d1cfe2;-webkit-user-select:none;user-select:none;align-items:center;padding-left:30px;font-size:.9rem;display:flex;position:relative}.checkbox-container input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkmark{background-color:#ffffff26;border:1px solid #ffffff1a;border-radius:6px;width:20px;height:20px;transition:background-color .2s,border-color .2s;position:absolute;top:0;left:0}.checkbox-container:hover input~.checkmark{background-color:#ffffff40}.checkbox-container input:checked~.checkmark{background-color:#845ef7;border-color:#845ef7}.checkmark:after{content:"";display:none;position:absolute}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{border:2.5px solid #fff;border-width:0 2.5px 2.5px 0;width:5px;height:10px;top:3px;left:7px;transform:rotate(45deg)}.zone-volumes-grid{grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin-top:5px;display:grid}.volume-sub{background:#ffffff0d;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:8px;padding:6px 10px;display:flex}.volume-sub span{font-size:1.2rem}.admin-select{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:12px;outline:none;width:100%;padding:8px 12px;font-family:inherit;font-size:.85rem;transition:background .2s,border-color .2s}.admin-select:hover{background:#ffffff24;border-color:#ffffff40}.admin-select option{color:#fff;background:#0f0c26}.admin-btn-reset{color:#ff88a8;cursor:pointer;background:#ff638433;border:1px solid #ff638466;border-radius:12px;width:100%;padding:10px 16px;font-family:inherit;font-size:.85rem;font-weight:600;transition:background .2s,border-color .2s,color .2s}.admin-btn-reset:hover{color:#fff;background:#ff638459;border-color:#ff638499}@keyframes spin{to{transform:rotate(360deg)}}@keyframes animal-bounce{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-15px)rotate(5deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-button{0%{box-shadow:0 0 #4ef2a166}70%{box-shadow:0 0 0 15px #4ef2a100}to{box-shadow:0 0 #4ef2a100}}.hud-actions{pointer-events:auto;gap:12px;margin-top:12px;display:flex}.hud-btn{color:#fff;cursor:pointer;border:none;border-radius:50px;padding:8px 18px;font-family:Fredoka,sans-serif;font-size:.95rem;font-weight:700;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;box-shadow:0 4px 15px #00000040}.hud-btn:hover{transform:scale(1.06)}.hud-btn:active{transform:scale(.95)}.add-btn{background:linear-gradient(135deg,#ffd859 0%,#ff9233 100%);box-shadow:0 6px 20px #ff92334d}.clear-btn{background:linear-gradient(135deg,#ff6b6b 0%,#e03131 100%);box-shadow:0 6px 20px #e031314d}.modal-overlay{-webkit-backdrop-filter:blur(10px);z-index:100;background:#080614a6;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:absolute;top:0;left:0}.modal-overlay.open{display:flex}.modal-card{-webkit-backdrop-filter:blur(25px);text-align:right;direction:rtl;background:#120e2bd9;border:2px solid #ffffff1f;border-radius:28px;width:90%;max-width:520px;padding:30px;position:relative;box-shadow:0 20px 60px #0000008c}.modal-card h2{color:#fff;text-align:center;background:linear-gradient(135deg,#ffd859 0%,#ff6b6b 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:20px;font-size:1.6rem;font-weight:700}.modal-close{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;font-weight:300;transition:background .2s,transform .2s;display:flex;position:absolute;top:20px;left:20px}.modal-close:hover{background:#ffffff2e;transform:rotate(90deg)}.modal-field{flex-direction:column;gap:8px;margin-bottom:18px;display:flex}.modal-field label{color:#ffd859;font-size:.95rem;font-weight:600}.modal-field input[type=text]{color:#fff;background:#ffffff0f;border:1px solid #ffffff26;border-radius:12px;outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:.95rem;transition:border-color .2s,background .2s}.modal-field input[type=text]:focus{background:#ffffff1a;border-color:#845ef7}.emoji-grid{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.emoji-opt{aspect-ratio:1;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;padding:4px;font-size:1.8rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.emoji-opt:hover{background:#ffffff1f;transform:scale(1.12)}.emoji-opt.active{background:#ffd85938;border-color:#ffd859;transform:scale(1.15);box-shadow:0 0 12px #ffd85959}.role-grid{flex-direction:column;gap:8px;display:flex}.role-opt{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;align-items:center;gap:15px;padding:10px 14px;transition:all .2s;display:flex}.role-opt:hover{background:#ffffff14;border-color:#ffffff2e}.role-opt.active{background:#845ef71f;border-color:#845ef7;box-shadow:0 0 12px #845ef733}.role-icon{background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;min-width:40px;height:40px;font-size:1.8rem;display:flex}.role-opt.active .role-icon{color:#a582ff;background:#845ef740}.role-info{flex-direction:column;gap:1px;display:flex}.role-title{color:#fff;font-size:.95rem;font-weight:600}.role-desc{color:#a4a2bc;font-size:.76rem;line-height:1.3}.modal-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4ef2a1 0%,#05a761 100%);border:none;border-radius:14px;width:100%;margin-top:10px;padding:12px;font-family:inherit;font-size:1.15rem;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 20px #05a76159}.modal-submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #05a76180}.modal-submit-btn:active{transform:translateY(1px)}.dynamic-creatures-list{flex-direction:column;gap:12px;width:100%;margin-top:10px;display:flex}.dynamic-creature-row{background:#ffffff08;border:1px solid #ffffff0f;border-radius:16px;flex-direction:column;gap:10px;padding:12px;transition:border-color .2s;display:flex}.dynamic-creature-row:hover{border-color:#ffffff1f}.dynamic-row-header{justify-content:space-between;align-items:center;width:100%;display:flex}.dynamic-row-info{flex-direction:column;gap:1px;display:flex}.dynamic-row-label{color:#fff;align-items:center;gap:6px;font-size:.95rem;font-weight:600;display:flex}.dynamic-row-sub{color:#a4a2bc;font-size:.72rem}.btn-delete-creature{cursor:pointer;color:#ff6b6b;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:1.15rem;transition:background .2s,transform .1s;display:flex}.btn-delete-creature:hover{background:#ff6b6b26;transform:scale(1.1)}.btn-delete-creature:active{transform:scale(.9)}.creature-control-row{align-items:center;gap:10px;width:100%;display:flex}.creature-volume-label{color:#8c8aa7;min-width:32px;font-size:.75rem}.creature-volume-val{color:#ffd859;text-align:right;min-width:28px;font-family:monospace;font-size:.75rem}@media (width<=768px){.settings-open #webcam,.settings-open #canvas,.settings-open .kids-hud{width:100%!important;left:0!important}.admin-panel{bottom:15px!important;left:15px!important}.admin-content{width:290px!important;padding:0 16px!important}.admin-panel.open .admin-content{padding:16px!important}}