@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap";.doors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin:1.5rem 0;perspective:1000px}.door-wrapper{position:relative;height:240px;border-radius:20px;box-shadow:var(--shadow);transition:all .2s ease}.revealed-card{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-surface);border:2px solid var(--border-color);border-radius:20px;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;overflow:hidden}.revealed-card img{width:100px;height:100px;object-fit:cover;border-radius:50%;border:3px solid var(--accent-primary);box-shadow:var(--shadow)}.revealed-card h4{margin-top:.5rem;font-size:1.1rem;color:var(--text-main);font-weight:700}.revealed-card.correct-glow{border-color:var(--accent-success);animation:successPop .5s cubic-bezier(.175,.885,.32,1.275) forwards}.revealed-card.wrong-shake{animation:errorShake .4s ease-in-out;border-color:var(--accent-danger)}.door-card{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;transform-origin:left center;transition:transform .6s cubic-bezier(.34,1.56,.64,1);border-radius:20px;border:3px solid rgba(255,255,255,.4);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow)}.door-color-1{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.door-color-2{background:linear-gradient(135deg,#ec4899,#be185d)}.door-color-3{background:linear-gradient(135deg,#10b981,#047857)}.door-card:hover:not(.is-open){transform:translateY(-4px);box-shadow:var(--shadow-hover)}.door-card:active:not(.is-open){transform:translateY(2px);box-shadow:none}.door-card.is-open{transform:rotateY(-115deg);pointer-events:none;box-shadow:-10px 10px 20px #00000026}.door-card.is-knocking{animation:knockShake .5s ease-in-out infinite}.door-knob{font-size:2.2rem;margin-top:.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.door-number{font-size:1.2rem;letter-spacing:.5px;text-transform:uppercase}.sticker-reward-pop{position:absolute;top:8px;right:8px;background:#fef08a;color:#854d0e;padding:4px 10px;border-radius:12px;font-size:.85rem;font-weight:800;box-shadow:var(--shadow);animation:stickerElastic .6s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes knockShake{0%,to{transform:rotate(0)}20%{transform:rotate(-3deg) scale(1.02)}40%{transform:rotate(3deg) scale(1.02)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes successPop{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes errorShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes stickerElastic{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}.door-wrapper{position:relative;width:100%;height:260px;border-radius:20px;overflow:hidden;background:#fff;border:3px solid #fde047;box-shadow:0 4px 12px #00000014}.revealed-card{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background:#fff}.revealed-card img{width:85px;height:85px;border-radius:50%;object-fit:cover;border:3px solid #3b82f6;margin-bottom:.5rem}.revealed-card h4{font-size:1.1rem;font-weight:700;color:#1e293b;margin:0}.door-card-3d-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;cursor:pointer}.door-card-3d-wrapper.is-open{pointer-events:none}.door-number-overlay{position:absolute;top:10px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:3px 10px;border-radius:12px;font-size:.8rem;font-weight:700;z-index:3}.door-number-overlay-badge{position:absolute;top:10px;left:50%;transform:translate(-50%);background:#000000a6;color:#fff;padding:2px 10px;border-radius:10px;font-size:.75rem;font-weight:800;letter-spacing:.5px;z-index:6;border:1px solid rgba(255,255,255,.2)}.start-screen-container{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2rem;padding:1rem;max-width:800px;margin:0 auto;min-height:60vh}.bg-sticker{position:absolute;font-size:1.8rem;opacity:.35;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;animation:floatEmoji 4s ease-in-out infinite alternate}.bg-sticker-1{top:4%;left:4%;animation-delay:0s}.bg-sticker-2{top:8%;right:6%;animation-delay:.8s}.bg-sticker-3{bottom:12%;left:6%;animation-delay:1.5s}.bg-sticker-4{bottom:6%;right:8%;animation-delay:2.2s}.bg-sticker-5{top:48%;left:2%;animation-delay:1.1s}.bg-sticker-6{top:45%;right:3%;animation-delay:1.8s}@keyframes floatEmoji{0%{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-10px) rotate(10deg)}}.start-screen-controls{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;text-align:left;z-index:1}.start-screen-title{font-size:1.75rem;font-weight:800;color:var(--text-main, #1e293b);margin-bottom:.25rem;line-height:1.2}.start-screen-subtitle{color:var(--text-muted, #64748b);font-size:.9rem;margin-bottom:.5rem}.start-screen-btn-group{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:280px}.start-screen-door-wrapper{display:flex;justify-content:center;align-items:center;z-index:1}.ajar-door-frame{width:130px;height:190px;background:#090a0f;border-radius:16px;border:5px solid #334155;position:relative;overflow:hidden;box-shadow:0 8px 20px #0003;perspective:800px}.eyes-in-shadow{position:absolute;top:38%;left:65%;transform:translate(-50%,-50%);font-size:1.6rem;filter:drop-shadow(0 0 8px rgba(255,255,255,.9));animation:eyeBlink 4s infinite ease-in-out;z-index:1;-webkit-user-select:none;user-select:none}.ajar-door-panel{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:10px;transform-origin:left center;transform:rotateY(-38deg);box-shadow:-8px 0 16px #00000080;z-index:2;border-right:3px solid #60a5fa}.ajar-door-knob{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:1.3rem}@keyframes eyeBlink{0%,90%,to{opacity:1;transform:translate(-50%,-50%) scaleY(1)}95%{opacity:.1;transform:translate(-50%,-50%) scaleY(.1)}}@media (max-width: 640px){.start-screen-container{flex-direction:column;gap:.75rem;padding:.5rem .75rem;min-height:auto}.start-screen-controls{align-items:center;text-align:center;gap:.5rem}.start-screen-title{font-size:1.4rem;margin-bottom:.1rem}.start-screen-subtitle{font-size:.8rem;margin-bottom:.5rem}.start-screen-btn-group{max-width:100%;gap:.5rem}.ajar-door-frame{width:100px;height:140px;border-width:4px;border-radius:12px}.eyes-in-shadow{font-size:1.3rem;margin-left:25px}.ajar-door-knob{font-size:1.1rem;right:8px}.bg-sticker{font-size:1.3rem;opacity:.25}}.how-to-play-container{margin-top:.75rem;width:100%;max-width:480px;margin-left:auto;margin-right:auto}.how-to-play-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;padding:.4rem .85rem;font-size:.825rem;font-weight:600;color:#475569;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.how-to-play-toggle:hover{background:#f1f5f9;border-color:#94a3b8}.how-to-play-content{background:#fff;border:1px solid #e2e8f0;border-top:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:.75rem .85rem;text-align:left;box-shadow:0 4px 6px -1px #0000000d;animation:slideDown .2s ease-out}.how-to-play-content p{margin:0 0 .4rem;font-size:.8rem;color:#334155;line-height:1.35}.how-to-play-content p:last-child{margin-bottom:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.css-door-container{position:relative;width:100%;height:100%;perspective:900px;cursor:pointer;overflow:visible!important}.css-door-container.knocking{animation:doorShake .15s infinite alternate}@keyframes doorShake{0%{transform:rotate(0)}to{transform:rotate(1.5deg)}}.css-door-panel{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:var(--door-bg, linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%));border-radius:12px;border:3px solid var(--door-border, #1e40af);border-right:4px solid var(--door-highlight, #60a5fa);transform-origin:left center;transition:transform .75s cubic-bezier(.34,1.56,.64,1);box-shadow:2px 4px 10px #00000040;z-index:5;overflow:visible!important}.css-door-knob{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:radial-gradient(circle at 35% 35%,#fde047,#ca8a04);border-radius:50%;box-shadow:0 2px 5px #0006}.css-door-panel.open{transform:rotateY(-80deg)}.css-door-panel.ajar{transform:rotateY(-25deg)}@keyframes doorSlideInWiggle{0%{transform:translate(120vw) scaleX(1.4) scaleY(.7);opacity:0}60%{transform:translate(-15px) scaleX(.85) scaleY(1.15);opacity:1}75%{transform:translate(8px) scaleX(1.1) scaleY(.95)}90%{transform:translate(-3px) scaleX(.98) scaleY(1.02)}to{transform:translate(0) scale(1)}}.door-slide-enter{animation:doorSlideInWiggle .65s cubic-bezier(.25,1,.5,1) both;will-change:transform,opacity}.doors-list>div:nth-child(1){animation-delay:.15s}.doors-list>div:nth-child(2){animation-delay:.3s}.doors-list>div:nth-child(3){animation-delay:.45s}@keyframes doorSlideOutLeft{0%{transform:translate(0) scale(1);opacity:1}20%{transform:translate(15px) scaleX(.9) scaleY(1.05);opacity:1}to{transform:translate(-120vw) scaleX(1.4) scaleY(.7);opacity:0}}.door-slide-exit{animation:doorSlideOutLeft .35s cubic-bezier(.5,0,.75,0) forwards;will-change:transform}.doors-list>div.door-slide-exit:nth-child(1){animation-delay:0s}.doors-list>div.door-slide-exit:nth-child(2){animation-delay:.08s}.doors-list>div.door-slide-exit:nth-child(3){animation-delay:.16s}.door-window-arch{position:absolute;top:28px;left:50%;transform:translate(-50%);width:56px;height:30px;background:radial-gradient(circle at top,#1f2937,#020617 72%);border-radius:20px 20px 0 0;border:2px solid rgba(248,113,113,.5);box-shadow:0 0 14px #ef444459;overflow:hidden}.shadow-silhouette{font-size:1.35rem;opacity:.95;filter:grayscale(100%) contrast(180%) drop-shadow(0 0 8px rgba(255,0,0,.45));animation:silhouetteSway 1.8s infinite ease-in-out alternate}@keyframes silhouetteSway{0%{transform:translateY(2px) rotate(-8deg)}to{transform:translateY(-2px) rotate(8deg)}}.keyhole-eye-container{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:28px;height:28px;background:#020617;border-radius:50%;border:3px solid #fb7185;box-shadow:0 0 10px #f43f5ee6,inset 0 0 6px #ffffff40}.monster-pupil{width:10px;height:10px;background:#f43f5e;border-radius:50%;box-shadow:0 0 10px #fb7185;animation:monsterEyeLook .9s infinite alternate}@keyframes monsterEyeLook{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.bottom-monster-peek{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:1.6rem;text-shadow:0 0 12px rgba(248,113,113,.85);animation:peekUnderDoor .9s infinite alternate}.bottom-smoke-puff{position:absolute;bottom:8px;width:100%;text-align:center;font-size:1rem;opacity:.5;text-shadow:0 0 10px rgba(255,255,255,.5);animation:fogPuff 1.4s infinite alternate}@keyframes peekUnderDoor{0%,80%,to{transform:translate(-50%,8px);opacity:0}90%{transform:translate(-50%,-1px);opacity:1}}.monster-warning-sticker{position:absolute;top:38%;left:6px;background:#facc15;color:#111827;font-weight:900;font-size:.6rem;letter-spacing:1px;padding:3px 7px;transform:rotate(-8deg) scale(1.05);border:2px dashed #111827;box-shadow:0 0 12px #facc15b3}.bottom-smoke-puff{position:absolute;bottom:4px;width:100%;text-align:center;font-size:.8rem;opacity:.4;pointer-events:none;animation:fogPuff 2.5s infinite ease-in-out alternate}@keyframes silhouetteSway{0%{transform:translateY(2px) rotate(-5deg)}to{transform:translateY(-2px) rotate(5deg)}}@keyframes monsterEyeLook{0%{transform:scale(.8);opacity:.7}to{transform:scale(1.1);opacity:1}}@keyframes peekUnderDoor{0%{transform:translate(-50%) translateY(0)}to{transform:translate(-50%) translateY(-3px)}}@keyframes fogPuff{0%{transform:scale(.9);opacity:.4}to{transform:scale(1.1);opacity:.8}}.css-door-container,.css-door-panel{overflow:visible!important}.css-door-panel{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform-origin:left center;transition:transform .75s cubic-bezier(.34,1.56,.64,1);box-shadow:2px 4px 10px #00000040;z-index:5}.css-door-panel.open{transform:rotateY(-110deg);pointer-events:none}.door-window-arch,.keyhole-eye-container,.monster-warning-sticker,.bottom-monster-peek,.bottom-smoke-puff,.door-number-overlay-badge{z-index:10!important}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease-out}.modal-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:24px;padding:1.75rem;width:100%;max-width:480px;box-shadow:var(--shadow-hover);max-height:88vh;overflow-y:auto;color:var(--text-main)}.inspector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.inspector-header h2{font-size:1.3rem;font-weight:700;color:var(--text-main)}.btn-danger-sm{background:#ef44441a;color:var(--accent-danger);border:1px solid rgba(239,68,68,.25);border-bottom:3px solid rgba(239,68,68,.25);padding:.4rem .85rem;border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-danger-sm:hover{background:var(--accent-danger);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}.btn-danger-sm:active{transform:translateY(2px);box-shadow:none;border-bottom:1px solid rgba(239,68,68,.25)}.inspector-section{background:var(--bg-alt);border:1px solid var(--border-color);border-radius:18px;padding:1.15rem;margin-bottom:1.25rem;box-shadow:var(--shadow)}.inspector-section h3{font-size:1rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}.section-desc{font-size:.8rem;color:var(--text-muted);margin-bottom:1rem}.photo-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:.75rem;margin-bottom:1rem}.gallery-item{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid transparent;cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease;background:var(--bg-surface)}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.gallery-item:active{transform:translateY(2px)}.gallery-item.active{border-color:var(--accent-primary);box-shadow:0 0 0 3px #3b82f640}.active-badge{position:absolute;bottom:4px;right:4px;background:var(--accent-primary);color:#fff;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:8px}.input-field{width:100%;background:var(--bg-surface);border:1px solid var(--border-color);padding:.65rem 1rem;border-radius:20px;color:var(--text-main);font-size:.9rem;outline:none;transition:all .2s ease;box-shadow:var(--shadow)}.input-field:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #3b82f626}.btn-primary,.btn-secondary{border:none;border-radius:20px;padding:.75rem 1.25rem;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}.btn-primary{background:var(--accent-primary);color:#fff;box-shadow:var(--shadow);width:100%}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:none}.btn-secondary{background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border-color);box-shadow:var(--shadow)}.btn-secondary:active:not(:disabled){transform:translateY(2px);box-shadow:none}.btn-primary,.btn-secondary,.btn-danger-sm,.btn-secondary-sm,.clip-play-btn{transition:all .2s ease}.btn-primary:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 3px #00000005}.btn-secondary:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-secondary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 3px #00000005}.btn-danger-sm:hover:not(:disabled){background:var(--accent-danger);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-danger-sm:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 3px #00000005}.btn-secondary-sm:hover:not(:disabled){border-color:var(--accent-primary);transform:translateY(-1px);box-shadow:var(--shadow-hover)}.btn-secondary-sm:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 3px #00000005}.clip-play-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-hover)}.clip-play-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 3px #00000005}.audio-clips-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.audio-clip-row{display:flex;align-items:center;gap:.75rem;background:var(--bg-surface);border:1px solid var(--border-color);padding:.5rem .85rem;border-radius:16px;box-shadow:var(--shadow);transition:all .2s ease}.audio-clip-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}.audio-clip-row.active{border-color:var(--accent-primary);background:#f0f9ff}.clip-play-btn{background:var(--accent-primary);color:#fff;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;box-shadow:var(--shadow);transition:all .2s ease}.clip-play-btn:hover{transform:scale(1.05)}.clip-info{flex:1;display:flex;align-items:center;gap:.5rem}.clip-label{font-size:.85rem;font-weight:600;color:var(--text-main)}.active-pill{font-size:.65rem;background:var(--accent-success);color:#fff;padding:2px 6px;border-radius:10px;font-weight:700}.btn-secondary-sm{background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-main);padding:.25rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;border-bottom:3px solid var(--border-color)}.btn-secondary-sm:hover{border-color:var(--accent-primary);transform:translateY(-1px)}.btn-secondary-sm:active{transform:translateY(2px);border-bottom-width:1px;box-shadow:0 1px 3px #00000005}.btn-icon-danger{background:none;border:none;color:var(--accent-danger);font-size:.85rem;cursor:pointer;padding:.25rem;opacity:.7;transition:opacity .2s ease}.btn-icon-danger:hover{opacity:1}.recording-active{background:var(--accent-danger)!important;animation:pulse-red 1.5s infinite}@keyframes pulse-red{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.soundboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.75rem;padding:.5rem}.sound-card.admin-inspect-card{padding:.4rem;border-radius:14px;display:flex;flex-direction:column;align-items:center;min-height:auto}.card-photo-wrapper{width:100%;height:115px;border-radius:10px;overflow:hidden;margin-bottom:.35rem}.card-photo-wrapper img{width:100%;height:100%;object-fit:cover;display:block}.card-title{font-size:.85rem;font-weight:700;margin:.1rem 0;text-align:center;line-height:1.2}.card-relation{font-size:.7rem;color:var(--text-muted);text-align:center}.pin-input{box-sizing:border-box;width:100%;text-align:center;letter-spacing:.4em;padding-left:.4em;font-size:1.2rem}.restart-btn{border-bottom:6px solid #cb1212!important;font-size:.85rem;padding:.6rem 1rem;background-color:#fee2e2;color:#dc2626;border:2px solid #cb1212;border-radius:16px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 12px #00000026}.restart-btn:active{border-bottom:2px solid #cb1212!important;transition:all .2s ease;translate:translateY(+2)}:root{--bg-main: #f0f9ff;--bg-surface: #ffffff;--border-color: #3b82f6;--border-bottom-color: #1d4ed8;--text-main: #1e293b;--text-muted: #64748b;--accent-primary: #3b82f6;--accent-success: #10b981;--accent-danger: #ef4444;--accent-warning: #f59e0b;--font-sans: "Fredoka", "Comic Sans MS", sans-serif;--shadow-game: 0 10px 25px rgba(0, 0, 0, .15);--shadow-hover: 0 15px 30px rgba(0, 0, 0, .2)}*{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;height:100%;font-family:var(--font-sans);color:var(--text-main);overflow-x:hidden;-webkit-tap-highlight-color:transparent;margin:0;min-height:100vh;background:linear-gradient(-45deg,#ff9a9e,#fecfef,#a1c4fd,#c2e9fb);background-size:400% 400%;animation:gradientBG 12s ease infinite;position:relative}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}header{background:#ffffffd9!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;border-bottom:4px solid rgba(255,255,255,.6)!important;box-shadow:0 8px 20px #00000014!important}.menu-navigator{position:sticky;top:0;z-index:999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.25rem;background-color:#ffffffe6;border-bottom:3px solid var(--border-color);box-shadow:0 4px 12px #0000000d;transition:all .2s ease}.btn-primary,.enter-btn,.play-voice-btn{background:var(--accent-primary);color:#fff;border:3px solid #2563eb;border-bottom:6px solid #1e40af;padding:.75rem 1.5rem;font-family:var(--font-sans);font-weight:700;font-size:1.05rem;border-radius:18px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 6px 12px #00000026}.btn-primary:hover,.enter-btn:hover{transform:translateY(-2px);background:#2563eb}.btn-primary:active,.enter-btn:active,.play-voice-btn:active{transform:translateY(4px);border-bottom-width:2px;box-shadow:0 2px 4px #0000001a}.btn-secondary{background:#fff;color:#3b82f6;border:3px solid #cbd5e1;border-bottom:6px solid #94a3b8;font-weight:700;border-radius:18px;padding:.65rem 1.25rem;cursor:pointer;transition:all .1s ease}.btn-secondary:active{transform:translateY(4px);border-bottom-width:2px}.sound-card,.game-container{background:var(--bg-surface);border:4px solid var(--border-color);border-bottom:8px solid var(--border-bottom-color);border-radius:24px;padding:1.25rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow-game);transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .2s ease;-webkit-user-select:none;user-select:none}.sound-card:hover{transform:translateY(-6px) scale(1.02);border-color:#60a5fa}.sound-card:active{transform:translateY(4px) scale(.98);border-bottom-width:4px;box-shadow:0 4px 10px #0000001a}.card-photo-wrapper{width:95px;height:95px;border-radius:50%;overflow:hidden;margin-bottom:.75rem;border:4px solid #ffffff;box-shadow:0 6px 14px #00000026}.card-photo-wrapper img{width:100%;height:100%;object-fit:cover}.card-title{font-size:1.2rem;font-weight:700;color:var(--text-main)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0f172a99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-card{background:var(--bg-surface);border:4px solid #3b82f6;border-bottom:8px solid #1d4ed8;border-radius:28px;padding:1.75rem;width:100%;max-width:360px;text-align:center;box-shadow:var(--shadow-hover);animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}.game-score-bar{font-size:1.3rem;font-weight:700;background:#fef08a;border:3px solid #eab308;color:#854d0e;padding:.5rem 1.5rem;border-radius:9999px;box-shadow:0 4px 10px #eab30833}@keyframes popIn{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.sound-card.game-option.correct-glow{border-color:var(--accent-success)!important;border-bottom-color:#047857!important;box-shadow:0 0 25px #10b981cc;transform:scale(1.05)}.sound-card.game-option.wrong-shake{animation:shake .4s ease-in-out;border-color:var(--accent-danger)!important;border-bottom-color:#b91c1c!important}.feedback-banner{font-size:1.2rem;font-weight:700;padding:.75rem 1.75rem;border-radius:18px;animation:popIn .3s ease-out;border:3px solid transparent}.feedback-banner.success{background:#dcfce7;color:#15803d;border-color:#86efac}.feedback-banner.failure{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}