@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Fredoka:wght@400;600;700&display=swap");:root{--pink:#ff69b4;--white:#fff;--purple-light:#c9a0dc;--purple-dark:#8b5cf6;--highlight:#39ff14;--bg-paper:#f5f3f0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Fredoka,sans-serif;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto;overflow-x:hidden;position:relative}body:has(.game-container.active),body:has(.ready-screen.active){overflow:hidden;height:100vh}body:has(.drummer-playing-screen){overflow:hidden;height:100vh}body:has(.f1-playing-screen){overflow:hidden;height:100vh}body:has(.create-scenario-form.active){overflow-y:auto;overflow-x:hidden}body.scrollable{overflow-y:auto;align-items:flex-start;padding:2rem 0}.paper-bg{position:fixed;background:radial-gradient(ellipse at 20% 30%,rgba(0,0,0,.03) 0,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(0,0,0,.04) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.02) 0,transparent 70%),linear-gradient(135deg,#f8f6f3,#e8e4df 50%,#f0ece7);z-index:-1}.paper-bg,.paper-bg:before{top:0;left:0;width:100%;height:100%}.paper-bg:before{content:"";position:absolute;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.08;pointer-events:none}.start-screen{text-align:center;z-index:100;padding-top:5rem;width:100%;max-width:600px}.start-screen h1{font-family:Bangers,cursive;font-size:4rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);margin-bottom:1rem;letter-spacing:3px;animation:titleSway 3s ease-in-out infinite;transform-origin:center center}.start-screen p{font-size:1.2rem;color:#666;margin-bottom:2rem;max-width:400px;margin-left:auto;margin-right:auto}.start-btn{font-family:Bangers,cursive;font-size:2rem;padding:1rem 3rem;background:linear-gradient(135deg,var(--pink) 0,#ff1493 100%);color:#fff;border:4px solid #333;border-radius:15px;cursor:pointer;box-shadow:6px 6px 0 #333;transition:all .1s ease;letter-spacing:2px;animation:buttonPulseSoft 2s ease-in-out infinite}.start-btn:hover{animation:none;transform:translate(2px,2px) scale(1);box-shadow:4px 4px 0 #333}.start-btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #333}.scenario-selector{margin-bottom:2rem;max-width:400px;margin-left:auto;margin-right:auto}.scenario-selector label{display:block;font-size:1.1rem;font-weight:600;color:#333;margin-bottom:.5rem}.scenario-select{width:100%;font-family:Fredoka,sans-serif;font-size:1.1rem;padding:.8rem 1rem;border:3px solid #333;border-radius:10px;background:#fff;color:#333;cursor:pointer;box-shadow:3px 3px 0 #333;transition:all .1s ease}.scenario-select:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.scenario-select:focus{outline:none;border-color:var(--pink)}.scenario-select option{font-family:Fredoka,sans-serif;font-size:1rem;padding:1rem;background:#fff;color:#333;font-weight:500}.scenario-select option:checked,.scenario-select option:hover{background:var(--pink);color:#fff;font-weight:600}.custom-select{position:relative;width:100%}.custom-select-trigger{width:100%;font-family:Fredoka,sans-serif;font-size:1.1rem;padding:.8rem 1rem;border:3px solid #333;border-radius:10px;background:#fff;color:#333;cursor:pointer;box-shadow:3px 3px 0 #333;transition:all .1s ease;display:flex;justify-content:space-between;align-items:center;text-align:left}.custom-select-trigger:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.custom-select-trigger:focus{outline:none;border-color:var(--pink)}.custom-select-arrow{font-size:.8rem;margin-left:.5rem;transition:transform .2s ease}.custom-select-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:#fff;border:3px solid #333;border-radius:10px;box-shadow:5px 5px 0 #333;z-index:1000;max-height:300px;overflow-y:auto;animation:dropdown-appear .2s ease}@keyframes dropdown-appear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.custom-select-option{font-family:Fredoka,sans-serif;font-size:1rem;padding:.9rem 1rem;cursor:pointer;transition:all .15s ease;color:#333;font-weight:500;display:flex;align-items:center}.custom-select-option:hover{background:var(--pink);color:#fff;font-weight:600}.custom-select-option.selected{background:rgba(255,105,180,.1);font-weight:600}.custom-select-option.selected:hover{background:var(--pink);color:#fff}.custom-select-option .check-mark{color:var(--pink);font-weight:700;margin-right:.3rem}.custom-select-option.selected:hover .check-mark{color:#fff}.scenario-description{margin-top:.5rem;font-size:.9rem;color:#666;font-style:italic}.create-scenario-section{margin-bottom:1.5rem;max-width:400px;margin-left:auto;margin-right:auto}.create-scenario-toggle{font-family:Bangers,cursive;font-size:1.2rem;padding:.6rem 1.5rem;background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff;border:3px solid #333;border-radius:10px;cursor:pointer;box-shadow:3px 3px 0 #333;transition:all .1s ease;letter-spacing:1px;width:100%}.create-scenario-toggle:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.create-scenario-form{display:none;margin-top:1.5rem;padding:1.5rem;background:hsla(0,0%,100%,.95);border:3px solid #333;border-radius:15px;max-width:500px;margin-left:auto;margin-right:auto;box-shadow:4px 4px 0 #333}.create-scenario-form.active{display:block}.form-group{margin-bottom:1rem;text-align:left}.form-group label{display:block;font-weight:600;color:#333;margin-bottom:.5rem;font-size:1rem}.form-group input{width:100%;padding:.7rem;font-family:Fredoka,sans-serif;font-size:1rem;border:3px solid #333;border-radius:8px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:var(--pink)}.words-input-container{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:.5rem;gap:.5rem}.word-input{width:100%}.form-actions{display:flex;gap:1rem;margin-top:1.5rem}.btn-secondary{font-family:Bangers,cursive;font-size:1.2rem;padding:.7rem 1.5rem;background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff;border:3px solid #333;border-radius:10px;cursor:pointer;box-shadow:3px 3px 0 #333;transition:all .1s ease;letter-spacing:1px;flex:1 1}.btn-secondary:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.btn-success{font-family:Bangers,cursive;font-size:1.2rem;padding:.7rem 1.5rem;background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;border:3px solid #333;border-radius:10px;cursor:pointer;box-shadow:3px 3px 0 #333;transition:all .1s ease;letter-spacing:1px;flex:1 1}.btn-success:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.word-count-info{font-size:.85rem;color:#666;margin-top:.3rem}.word-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:1.2rem;gap:1.2rem;margin-top:1.5rem}.quick-add-container{margin-bottom:2rem;position:relative;width:100%}.quick-add-input-wrapper{display:flex;gap:.5rem;background:#fff;padding:.5rem;border:4px solid #333;border-radius:15px;box-shadow:5px 5px 0 #333;transition:all .2s ease}.quick-add-input-wrapper:focus-within{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #333;border-color:var(--pink)}.quick-add-input{flex:1 1;border:none;padding:.8rem 1rem;font-family:Fredoka,sans-serif;font-size:1.2rem;font-weight:600;color:#333;outline:none;background:transparent}.quick-add-btn{background:var(--pink);color:#fff;border:3px solid #333;border-radius:10px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:all .1s ease}.quick-add-btn:hover{transform:scale(1.05)}.quick-add-btn:active{transform:scale(.95)}.suggestion-chips-container{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.6rem;min-height:40px}.ai-magical-loading{display:flex;gap:.6rem;align-items:center;width:100%}.ai-shimmer-chip{height:32px;width:80px;border-radius:20px;border:2px solid #eee}.ai-shimmer-chip,.image-shimmer-box{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:aiShimmer 1.5s linear infinite}.image-shimmer-box{flex:0 0 120px;aspect-ratio:1;border-radius:12px;border:3px solid #eee}@keyframes aiShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.upload-spinner{width:30px;height:30px;border:4px solid rgba(0,0,0,.1);border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}.ai-magic-pulse{font-size:1.2rem;animation:aiMagicPulse 2s infinite;filter:drop-shadow(0 0 5px rgba(139,92,246,.5))}@keyframes aiMagicPulse{0%,to{transform:scale(1) rotate(0deg);filter:brightness(1) drop-shadow(0 0 5px rgba(139,92,246,.5))}50%{transform:scale(1.2) rotate(15deg);filter:brightness(1.3) drop-shadow(0 0 15px rgba(139,92,246,.8))}}.suggestion-chip{padding:.5rem 1rem;background:#fff;border:2px solid #333;border-radius:20px;font-family:Fredoka,sans-serif;font-size:.9rem;font-weight:600;color:#666;cursor:pointer;transition:all .2s ease;box-shadow:2px 2px 0 #333;display:flex;align-items:center;gap:.4rem;animation:chipAppear .3s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes chipAppear{0%{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.suggestion-chip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #333;color:#333;background:#f0f0f0}.suggestion-chip.ai-magic{border-color:#8b5cf6;color:#8b5cf6}.suggestion-chip.ai-magic:hover{background:#f5f3ff}.rhythm-meter-container{margin:1.5rem 0;width:100%}.rhythm-meter-label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.rhythm-meter-bar-bg{height:12px;background:#e0e0e0;border:3px solid #333;border-radius:10px;overflow:hidden;position:relative}.rhythm-meter-bar-fill{height:100%;width:0;transition:width .5s cubic-bezier(.175,.885,.32,1.275)}.rhythm-meter-bar-fill.low{background:#e74c3c}.rhythm-meter-bar-fill.medium{background:#3498db}.rhythm-meter-bar-fill.high{background:#2ecc71;animation:barPulse 1s ease-in-out infinite}.rhythm-meter-marker{position:absolute;top:0;bottom:0;width:4px;background:#333;z-index:2;left:33.33%}.rhythm-meter-marker-label{position:absolute;top:-20px;left:33.33%;transform:translateX(-50%);font-size:.7rem;font-weight:800;color:#333}.image-method-grid{display:grid;grid-template-columns:1fr;grid-gap:1rem;gap:1rem;margin-top:1rem}.image-method-btn{display:flex;align-items:center;gap:1rem;padding:1.2rem;background:#fff;border:3px solid #333;border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;box-shadow:4px 4px 0 #333}.image-method-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #333;background:#f9f9f9}.image-method-btn .icon{font-size:1.8rem}.image-method-btn .details h4{margin:0;font-size:1rem;color:#333}.image-method-btn .details p{margin:0;font-size:.8rem;color:#777}.back-to-methods{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:#666;font-weight:600;cursor:pointer;margin-bottom:1.5rem;padding:0}.back-to-methods:hover{color:#333}@keyframes barPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.word-card{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:5px solid #333;border-radius:8px;font-size:clamp(.9rem,2.5vw,1.3rem);font-weight:700;color:#333;position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;box-shadow:3px 3px 0 #333;overflow:hidden}.word-card:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.word-card:hover .word-card-actions{opacity:1}.word-card-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}.word-card-empty{border:4px dashed #999;background:hsla(0,0%,100%,.5);box-shadow:none}.word-card-empty:hover{border-color:#666;background:hsla(0,0%,100%,.7);transform:scale(1.02);box-shadow:none}.word-card:hover .word-card-image{filter:brightness(.9)}.word-card-actions{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:flex-end;gap:.4rem;opacity:0;transition:opacity .2s ease;z-index:10}.word-card-remove{width:28px;height:28px;border-radius:50%;background:rgba(231,76,60,.95);color:#fff;border:2px solid #333;cursor:pointer;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 3px rgba(0,0,0,.4);transition:all .1s ease}.word-card-remove:hover{transform:scale(1.15);background:#e74c3c}.word-card-edit{width:28px;height:28px;border-radius:50%;background:rgba(52,152,219,.95);color:#fff;border:2px solid #333;cursor:pointer;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 3px rgba(0,0,0,.4);transition:all .1s ease}.word-card-edit:hover{transform:scale(1.15);background:#3498db}.word-edit-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;height:-webkit-fill-available;height:100dvh;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.word-edit-modal-overlay.drawer-overlay{justify-content:flex-end;background:rgba(0,0,0,.4)}.standard-modal{background:#fff;border:4px solid #333;border-radius:20px;box-shadow:8px 8px 0 #333;padding:2.5rem;width:90%;max-width:450px;position:relative;z-index:10001;animation:modalPop .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes modalPop{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.word-edit-modal{background:#fff;border-radius:20px 0 0 20px;padding:0;max-width:450px;width:90%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;position:fixed;right:0;top:0;border:none;border-left:6px solid #333;box-shadow:-10px 0 30px rgba(0,0,0,.2);z-index:10001;animation:drawerSlideIn .3s cubic-bezier(.165,.84,.44,1);display:flex;flex-direction:column;overflow:hidden}.drawer-preview-header{background:#f0f0f0;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:4px solid #333;flex-shrink:0;position:relative}.drawer-content-scrollable{flex:1 1;overflow-y:auto;padding:1.5rem 2rem}.drawer-footer{padding:1.5rem 2rem calc(1.5rem + env(safe-area-inset-bottom, 0px));background:#fff;border-top:3px solid #333;display:flex;gap:1rem;flex-shrink:0}.custom-horizontal-scrollbar::-webkit-scrollbar{height:6px}.custom-horizontal-scrollbar::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.custom-horizontal-scrollbar::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.custom-horizontal-scrollbar::-webkit-scrollbar-thumb:hover{background:#999}@keyframes drawerSlideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}.word-edit-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:3px solid #e0e0e0}.word-edit-tab{flex:1 1;padding:.8rem 1rem;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;background:transparent;color:#666;border:none;border-bottom:4px solid transparent;cursor:pointer;transition:all .2s ease;margin-bottom:-3px}.word-edit-tab:hover{color:#333;background:rgba(0,0,0,.05)}.word-edit-tab.active{color:#333;border-bottom-color:var(--pink)}.word-edit-tab-content{min-height:200px;padding:.5rem 0}.color-selector-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:.6rem;gap:.6rem;margin-top:.5rem}.color-option{aspect-ratio:1/1;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 #333;min-height:50px}.color-option:hover{transform:translate(1px,1px) scale(1.05);box-shadow:1px 1px 0 #333}.color-option.selected{box-shadow:3px 3px 0 #333;transform:scale(1.1);border-width:4px}.ready-screen{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:100;height:100vh;width:100%;position:fixed;top:0;left:0;box-sizing:border-box}.ready-screen.active{display:flex}.ready-screen h1{font-family:Bangers,cursive;font-size:5rem;color:#333;text-shadow:5px 5px 0 var(--pink),7px 7px 0 rgba(0,0,0,.1);letter-spacing:3px;animation:pulse-ready .5s ease-in-out infinite alternate}@keyframes pulse-ready{0%{transform:scale(1)}to{transform:scale(1.05)}}.game-container{display:none;flex-direction:column;align-items:center;justify-content:center;padding:1rem;position:relative;width:100%;max-width:1000px;height:100vh;box-sizing:border-box}.game-container.active{display:flex}.game-watermark{margin-top:.5rem;font-family:Fredoka,sans-serif;font-size:1.6rem;font-weight:600;color:#000;letter-spacing:1px;pointer-events:none}.game-header,.game-watermark{text-align:center;flex-shrink:0}.game-header{font-family:Bangers,cursive;margin-bottom:1rem}.level-title{font-size:6rem;color:#333;letter-spacing:3px;transition:transform .3s ease}.level-title.level-change-animation{animation:levelChangePulse .6s ease-out}@keyframes levelChangePulse{0%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.3) rotate(-10deg)}50%{transform:scale(1.2) rotate(10deg)}75%{transform:scale(1.15) rotate(-5deg)}to{transform:scale(1) rotate(0deg)}}.progress{font-size:2.5rem;color:#333}.deco{position:fixed;font-size:clamp(3rem,8vw,6rem);z-index:5;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.2));pointer-events:none;animation:decoFloat 3s ease-in-out infinite}.deco-megaphone{top:5vh;left:2vw;animation-delay:0s;animation-duration:2.8s}.deco-brain{top:5vh;right:2vw;animation-delay:.7s;animation-duration:3.2s}.deco-bulb{bottom:5vh;right:2vw;animation-delay:1.4s;animation-duration:2.5s}.deco-exclaim{bottom:5vh;left:2vw;animation-delay:2.1s;animation-duration:3s}@keyframes decoFloat{0%,to{transform:translate(0) rotate(0deg)}20%{transform:translate(20px,-25px) rotate(15deg)}40%{transform:translate(-15px,20px) rotate(-12deg)}60%{transform:translate(25px,15px) rotate(18deg)}80%{transform:translate(-20px,-15px) rotate(-10deg)}}.deco.beat-active{animation:decoFloat 3s ease-in-out infinite,beatPulse .35s ease-in-out infinite;filter:drop-shadow(0 0 15px var(--highlight)) drop-shadow(2px 2px 2px rgba(0,0,0,.2))}@keyframes beatPulse{0%,to{transform:scale(1) rotate(0deg)}25%{transform:scale(1.4) rotate(5deg)}50%{transform:scale(1.2) rotate(-5deg)}75%{transform:scale(1.35) rotate(3deg)}}.grid-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);grid-gap:1.5%;gap:1.5%;padding:1%;width:70vw;aspect-ratio:2/1;max-height:min(70vh,calc(70vw / 2));min-height:min(50vh,calc(60vw / 2));box-sizing:border-box;flex-shrink:0}.grid-box{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border:5px solid #333;border-radius:8px;font-size:clamp(1.5rem,4vw,3rem);font-weight:700;color:#333;position:relative;opacity:0;transform:scale(.5);transition:opacity .1s ease-out,transform .1s ease-out,border-color .05s ease,box-shadow .05s ease;box-sizing:border-box}.grid-box.visible{opacity:1;transform:scale(1)}.grid-box.highlighted{border-color:var(--highlight);border-width:8px;box-shadow:0 0 20px var(--highlight),0 0 40px rgba(57,255,20,.3)}.box-white{background:var(--white)}.box-pink{background:var(--pink)}.box-purple-light{background:var(--purple-light)}.box-purple-dark{background:var(--purple-dark);color:#fff}.box-blue{background:#3498db;color:#fff}.box-green{background:#2ecc71;color:#fff}.box-yellow{background:#f1c40f;color:#333}.box-orange{background:#e67e22;color:#fff}.box-red{background:#e74c3c;color:#fff}.box-teal{background:#1abc9c;color:#fff}.box-indigo{background:#6366f1;color:#fff}.box-gray{background:#95a5a6;color:#fff}.results-screen{display:none;flex-direction:column;align-items:center;text-align:center;z-index:100}.results-screen.active{display:flex}.results-screen h2{font-family:Bangers,cursive;font-size:3rem;color:#333;margin-bottom:1rem}.score{font-size:4rem;font-weight:700;color:var(--pink);margin-bottom:2rem}.restart-btn{position:fixed;top:10px;right:10px;font-family:Bangers,cursive;font-size:1rem;padding:.4rem .8rem;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;border:3px solid #333;border-radius:10px;cursor:pointer;box-shadow:3px 3px 0 #333;transition:all .1s ease;z-index:100}.restart-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.box-text-with-image{font-size:clamp(.4rem,2.5vw,1rem);padding:.15rem .3rem;bottom:.15rem;max-width:calc(100% - .4rem)}@media (max-width:768px){.game-container{padding:.5rem;height:100vh;overflow:hidden}.game-header{margin-bottom:.5rem}.level-title{font-size:3rem}.game-watermark{margin-top:.25rem;font-size:1.4rem}.grid-container{width:90vw;aspect-ratio:2/1;max-height:min(45vh,calc(90vw / 2));min-height:min(35vh,calc(80vw / 2));gap:1%;padding:.5%}@media (max-width:768px) and (orientation:landscape){.grid-container{width:70vw;max-height:min(60vh,calc(70vw / 2))}}.grid-box{font-size:clamp(1rem,3vw,1.5rem)}.progress{font-size:1.5rem}.deco{font-size:clamp(2.5rem,7vw,4rem)}.deco-megaphone{left:5vw}.deco-brain,.deco-bulb{right:5vw}.deco-exclaim{left:5vw}.restart-btn{top:5px;right:5px;font-size:.8rem;padding:.3rem .6rem}.start-screen{padding-top:4rem}.start-screen h1{font-size:2.5rem}.ready-screen h1{font-size:3rem}}.games-selection-container{position:relative;z-index:1;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem}.games-title{font-family:Bangers,cursive;font-size:5rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);margin-bottom:.5rem;letter-spacing:4px;animation:titleSway 3s ease-in-out infinite;transform-origin:center center}@keyframes titleSway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes cardPulse{0%,to{transform:scale(1);box-shadow:8px 8px 0 #333}50%{transform:scale(1.02);box-shadow:9px 9px 0 #333}}@keyframes buttonPulseSoft{0%,to{transform:scale(1);box-shadow:6px 6px 0 #333}50%{transform:scale(1.03);box-shadow:7px 7px 0 #333}}.games-subtitle{font-size:1.5rem;color:#666;margin-bottom:3rem;font-weight:600}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:2rem;gap:2rem;max-width:900px;width:100%}.game-card{text-decoration:none;color:inherit;display:block}.game-card-content{background:#fff;border:4px solid #333;border-radius:20px;padding:2.5rem;box-shadow:8px 8px 0 #333;transition:all .2s ease;position:relative;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;animation:cardPulse 2.5s ease-in-out infinite}.game-card:hover .game-card-content{animation:none;transform:translate(4px,4px) scale(1);box-shadow:4px 4px 0 #333}.game-card-content h2{font-family:Bangers,cursive;font-size:2.5rem;color:#333;text-shadow:3px 3px 0 var(--pink),4px 4px 0 rgba(0,0,0,.1);margin-bottom:1rem;letter-spacing:2px;line-height:1.2}.game-card-content p{font-size:1.1rem;color:#666;margin-bottom:1rem;flex-grow:1}.game-card-arrow{font-size:2rem;color:var(--pink);text-align:right;font-weight:700;transition:transform .2s ease}.game-card:hover .game-card-arrow{transform:translateX(5px)}.back-to-games-btn{position:absolute;top:2rem;left:2rem;z-index:100;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;padding:.8rem 1.5rem;background:#fff;color:#333;border:3px solid #333;border-radius:10px;cursor:pointer;box-shadow:4px 4px 0 #333;transition:all .1s ease;text-decoration:none;display:inline-block}.back-to-games-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #333}.back-to-games-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #333}.footer-links{margin-top:2rem;text-align:center}.footer-link{font-family:Fredoka,sans-serif;font-size:.85rem;color:#666;text-decoration:none;transition:color .2s ease}.footer-link:hover{color:#333;text-decoration:underline}.terms-container{max-width:800px;margin:0 auto;padding:2rem;position:relative;z-index:100}.terms-title{font-family:Bangers,cursive;font-size:3.5rem;color:#333;text-align:center;margin-bottom:2rem;letter-spacing:3px;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1)}.terms-content{background:#fff;padding:2.5rem;border:4px solid #333;border-radius:20px;box-shadow:8px 8px 0 #333;font-family:Fredoka,sans-serif;line-height:1.8}.terms-section{margin-bottom:2rem}.terms-section h2{font-family:Bangers,cursive;font-size:1.8rem;color:#333;margin-bottom:1rem;letter-spacing:2px}.terms-section p{font-size:1rem;color:#555;margin-bottom:1rem}.terms-section ul{margin-left:2rem;margin-bottom:1rem}.terms-section li{font-size:1rem;color:#555;margin-bottom:.5rem}.terms-section strong{color:#333;font-weight:600}.terms-highlight-box{background:#fff9e6;border:3px solid gold;border-radius:15px;padding:1.5rem;margin:1.5rem 0;box-shadow:4px 4px 0 rgba(255,215,0,.3)}.terms-highlight-box h3{font-family:Bangers,cursive;font-size:1.5rem;color:#333;margin-bottom:1rem;letter-spacing:1px}.terms-highlight-box ul{margin-left:1.5rem}.terms-highlight-box li{margin-bottom:.8rem}.terms-footer{margin-top:3rem;padding-top:2rem;border-top:2px solid #e0e0e0;text-align:center}.terms-last-updated{font-size:.9rem;color:#999;margin-bottom:.5rem}.terms-copyright{font-size:.9rem;color:#666;font-weight:600}@media (max-width:768px){.terms-container{padding:1rem}.terms-title{font-size:2.5rem}.terms-content{padding:1.5rem}.terms-section h2{font-size:1.5rem}.terms-section li,.terms-section p{font-size:.9rem}}.feedback-btn{position:fixed;top:0;right:0;width:120px;height:120px;background:linear-gradient(135deg,#4ecdc4,#44a08d);-webkit-clip-path:polygon(100% 0,0 0,100% 100%);clip-path:polygon(100% 0,0 0,100% 100%);cursor:pointer;z-index:1000;transition:transform .2s ease;text-decoration:none;box-shadow:-2px 2px 8px rgba(0,0,0,.2);overflow:visible}.feedback-btn-text{font-family:Fredoka,sans-serif;font-size:.8rem;font-weight:600;color:#fff;line-height:1.3;text-align:center;transform:rotate(45deg);transform-origin:center;text-shadow:1px 1px 2px rgba(0,0,0,.3);pointer-events:none;position:absolute;top:5px;right:0;white-space:normal;max-width:70px}.feedback-btn:hover{transform:scale(1.1);transform-origin:top right}.feedback-btn:hover .feedback-btn-text{transform:rotate(45deg) scale(1.05)}.game-placeholder{position:relative;z-index:1;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem}.placeholder-content{text-align:center;max-width:600px}.placeholder-content h1{font-family:Bangers,cursive;font-size:4rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);margin-bottom:1.5rem;letter-spacing:3px}.placeholder-content p{font-size:1.3rem;color:#666;margin-bottom:.5rem}@media (max-width:768px){.games-title{font-size:3.5rem}.games-grid{grid-template-columns:1fr;gap:1.5rem}.game-card-content{padding:2rem;min-height:200px}.game-card-content h2{font-size:2rem}.back-to-games-btn{margin:1rem;font-size:.9rem;padding:.6rem 1.2rem}.feedback-btn{width:110px;height:110px;overflow:visible}.feedback-btn-text{font-size:.7rem;max-width:65px;top:5px;right:0}.placeholder-content h1{font-size:3rem}}.drummer-game-container{position:relative;z-index:1;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;box-sizing:border-box}.drummer-game-container:has(.drummer-playing-screen){height:100vh;overflow:hidden;padding:1rem}.drummer-start-screen{text-align:center;max-width:600px;position:relative;z-index:1}.drummer-start-screen h1{font-family:Bangers,cursive;font-size:4rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);margin-bottom:1.5rem;letter-spacing:3px;line-height:1.2;animation:titleSway 3s ease-in-out infinite;transform-origin:center center}.drummer-start-screen p{font-size:1.2rem;color:#666;margin-bottom:1rem}.drummer-start-btn{font-family:Bangers,cursive;font-size:2rem;padding:1.2rem 3rem;background:linear-gradient(135deg,#f44,#c00);color:#fff;border:4px solid #333;border-radius:15px;cursor:pointer;box-shadow:6px 6px 0 #333;transition:all .1s ease;letter-spacing:2px;margin-top:2rem;animation:buttonPulseSoft 2s ease-in-out infinite}.drummer-start-btn:hover{animation:none;transform:translate(2px,2px) scale(1);box-shadow:4px 4px 0 #333}.drummer-start-btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #333}.drummer-playing-screen{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;height:100%;flex:1 1;box-sizing:border-box}.drummer-timer{text-align:center;background:#fff;padding:1.5rem 2.5rem;border:4px solid #333;border-radius:15px;box-shadow:4px 4px 0 #333}.drummer-timer-label{font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;color:#666;margin-bottom:.5rem}.drummer-timer-value{font-family:Bangers,cursive;font-size:3rem;color:#333;letter-spacing:2px}.drummer-target-time{font-family:Fredoka,sans-serif;font-size:.9rem;color:#999;margin-top:.5rem}.drummer-button-container{margin:2rem 0}.drummer-button-container,.drummer-hit-button{display:flex;justify-content:center;align-items:center}.drummer-hit-button{width:250px;height:250px;border-radius:50%;background:linear-gradient(135deg,#f44,#c00);border:6px solid #333;box-shadow:8px 8px 0 #333,inset 0 0 30px hsla(0,0%,100%,.3);cursor:pointer;transition:all .1s ease;position:relative;overflow:hidden;animation:buttonPulse 2s ease-in-out infinite}.drummer-hit-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:hsla(0,0%,100%,.4);transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}.drummer-hit-button:active:before{width:300px;height:300px}.drummer-button-text{font-family:Bangers,cursive;font-size:2.5rem;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.3);letter-spacing:3px;position:relative;z-index:1}.drummer-instruction{font-family:Fredoka,sans-serif;font-size:1.1rem;color:#666;text-align:center;font-weight:600}.drummer-result-screen{text-align:center;max-width:700px;background:#fff;padding:3rem;border:4px solid #333;border-radius:20px;box-shadow:8px 8px 0 #333}.drummer-result-title{font-family:Bangers,cursive;font-size:3.5rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);margin-bottom:2rem;letter-spacing:3px}.drummer-result-info{margin:2rem 0}.drummer-result-message{display:flex;flex-direction:column;gap:1rem}.drummer-result-big{font-family:Bangers,cursive;font-size:2.5rem;color:#333;margin:0;letter-spacing:2px}.drummer-result-detail{font-family:Fredoka,sans-serif;font-size:1.2rem;color:#666;margin:0}.drummer-result-success{font-family:Fredoka,sans-serif;font-size:1.3rem;color:#333;font-weight:700;margin-top:.5rem}.drummer-result-error,.drummer-result-warning{font-family:Fredoka,sans-serif;font-size:1.1rem;color:#666;font-weight:600;margin-top:.5rem}.drummer-restart-btn{font-family:Bangers,cursive;font-size:1.5rem;padding:1rem 2.5rem;background:linear-gradient(135deg,var(--pink) 0,#ff1493 100%);color:#fff;border:4px solid #333;border-radius:15px;cursor:pointer;box-shadow:6px 6px 0 #333;transition:all .1s ease;letter-spacing:2px;margin-top:2rem}.drummer-restart-btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 #333}.drummer-restart-btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #333}.leaderboard-container{margin:2rem auto;max-width:500px;background:#fff;border:3px solid #333;border-radius:15px;padding:1.5rem;box-shadow:4px 4px 0 #333}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.leaderboard-header h2{font-family:Bangers,cursive;font-size:1.8rem;color:#333;margin:0;letter-spacing:2px}.leaderboard-clear-btn{background:transparent;border:2px solid #333;border-radius:8px;padding:.4rem .8rem;cursor:pointer;font-size:1.2rem;transition:all .1s ease;box-shadow:2px 2px 0 #333}.leaderboard-clear-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #333}.leaderboard-empty{font-family:Fredoka,sans-serif;color:#999;text-align:center;padding:1rem;font-style:italic}.leaderboard-list{max-height:300px;overflow-y:auto;padding-right:.5rem}.leaderboard-list::-webkit-scrollbar{width:8px}.leaderboard-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.leaderboard-list::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.leaderboard-list::-webkit-scrollbar-thumb:hover{background:#555}.leaderboard-entry{display:flex;align-items:center;gap:1rem;padding:.8rem;margin-bottom:.5rem;background:#f9f9f9;border:2px solid #e0e0e0;border-radius:10px;font-family:Fredoka,sans-serif;transition:all .2s ease}.leaderboard-entry-loser{background:linear-gradient(135deg,#ffe0e0,#fcc);border-color:#f99}.leaderboard-medal{font-size:1.5rem;min-width:2rem;text-align:center}.leaderboard-info{flex:1 1;display:flex;justify-content:space-between;align-items:center;gap:1rem}.leaderboard-name{font-weight:600;color:#333;font-size:1rem}.leaderboard-time-container{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}.leaderboard-time{font-weight:700;color:#666;font-size:.9rem;line-height:1}.leaderboard-status{font-size:.75rem;color:#888;font-style:italic;line-height:1}.leaderboard-scroll-hint{text-align:center;font-size:.8rem;color:#999;font-style:italic;padding:.5rem;margin-top:.5rem}.name-input-container{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;align-items:center}.name-input{font-family:Fredoka,sans-serif;font-size:1.2rem;padding:1rem 1.5rem;border:3px solid #333;border-radius:10px;width:100%;max-width:300px;text-align:center;box-shadow:3px 3px 0 #333;transition:all .1s ease}.name-input:focus{outline:none;transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.name-input-buttons{display:flex;gap:1rem;width:100%;max-width:300px;justify-content:center}.name-input-btn{font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;padding:.8rem 2rem;border:3px solid #333;border-radius:10px;cursor:pointer;transition:all .1s ease;box-shadow:3px 3px 0 #333;flex:1 1}.name-input-btn.cancel-btn{background:#fff;color:#333}.name-input-btn.cancel-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.name-input-btn.submit-btn{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff}.name-input-btn.submit-btn:hover:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.name-input-btn.submit-btn:disabled{opacity:.5;cursor:not-allowed}.name-input-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #333}@media (max-width:768px){.drummer-start-screen h1{font-size:3rem}.drummer-hit-button{width:200px;height:200px}.drummer-button-text{font-size:2rem}.drummer-result-title,.drummer-timer-value{font-size:2.5rem}.drummer-result-big{font-size:2rem}.drummer-result-screen{padding:2rem}.leaderboard-container{margin:1.5rem auto;padding:1rem}.leaderboard-header h2{font-size:1.5rem}.leaderboard-list{max-height:250px}.leaderboard-entry{padding:.6rem;font-size:.9rem}.leaderboard-medal{font-size:1.2rem;min-width:1.5rem;margin-top:.1rem}.leaderboard-name{font-size:.9rem}.leaderboard-time{font-size:.85rem}.leaderboard-status{font-size:.75rem}.name-input{font-size:1rem;padding:.8rem 1.2rem}.name-input-btn{font-size:.9rem;padding:.7rem 1.5rem}}.confirm-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.confirm-modal{background:#fff;border:4px solid #333;border-radius:20px;padding:2.5rem;max-width:400px;width:90%;box-shadow:8px 8px 0 #333;text-align:center}.confirm-modal-title{font-family:Bangers,cursive;font-size:2rem;color:#333;margin-bottom:1rem;letter-spacing:2px}.confirm-modal-message{font-family:Fredoka,sans-serif;font-size:1.1rem;color:#666;margin-bottom:2rem;line-height:1.5}.confirm-modal-buttons{display:flex;gap:1rem;justify-content:center}.confirm-modal-btn{font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;padding:.8rem 2rem;border:3px solid #333;border-radius:10px;cursor:pointer;transition:all .1s ease;box-shadow:3px 3px 0 #333;flex:1 1}.confirm-modal-btn.cancel-btn{background:#fff;color:#333}.confirm-modal-btn.cancel-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.confirm-modal-btn.confirm-btn{background:linear-gradient(135deg,#f44,#c00);color:#fff}.confirm-modal-btn.confirm-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #333}.confirm-modal-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333}@media (max-width:768px){.confirm-modal{padding:2rem;max-width:90%}.confirm-modal-title{font-size:1.5rem}.confirm-modal-message{font-size:1rem}.confirm-modal-btn{font-size:.9rem;padding:.7rem 1.5rem}}.cuak-text{position:fixed;font-family:Bangers,cursive;font-size:7.5rem;color:#f44;text-shadow:4px 4px 0 #333,6px 6px 0 rgba(0,0,0,.3);z-index:1000;pointer-events:none;transform:translate(-50%,-50%);animation:cuakPop .8s ease-out;letter-spacing:3px}.early-cuak{animation:cuakPop 1s ease-out}.late-cuak{animation:cuakPop .8s ease-out}@keyframes cuakPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-10deg)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(5deg)}to{opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-5deg)}}@keyframes buttonPulse{0%,to{transform:scale(1);box-shadow:8px 8px 0 #333,inset 0 0 30px hsla(0,0%,100%,.3)}50%{transform:scale(1.05);box-shadow:10px 10px 0 #333,inset 0 0 40px hsla(0,0%,100%,.4)}}.drummer-hit-button:active{animation:none;transform:scale(.95);box-shadow:4px 4px 0 #333,inset 0 0 50px hsla(0,0%,100%,.5)}.clap-text{position:fixed;font-size:4rem;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);animation:clapPop 1.5s ease-out}@keyframes clapPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-15deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(10deg)}to{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-10deg)}}@media (max-width:768px){.cuak-text{font-size:5.25rem}.clap-text{font-size:3rem}}.f1-game-container{position:relative;z-index:1;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;box-sizing:border-box}.f1-game-container:has(.f1-playing-screen){height:100vh;overflow:hidden;padding:1rem}.f1-start-screen{text-align:center;max-width:600px;position:relative;z-index:1}.f1-start-screen h1{font-family:Bangers,cursive;font-size:4rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);margin-bottom:1.5rem;letter-spacing:3px;line-height:1.2;animation:titleSway 3s ease-in-out infinite;transform-origin:center center}.f1-start-screen p{font-size:1.2rem;color:#666;margin-bottom:1rem}.f1-start-btn{font-family:Bangers,cursive;font-size:2rem;padding:1.2rem 3rem;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:4px solid #333;border-radius:15px;cursor:pointer;box-shadow:6px 6px 0 #333;transition:all .1s ease;letter-spacing:2px;margin-top:2rem;animation:buttonPulseSoft 2s ease-in-out infinite}.f1-start-btn:hover{animation:none;transform:translate(2px,2px) scale(1);box-shadow:4px 4px 0 #333}.f1-start-btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #333}.f1-playing-screen{width:100%;max-width:800px;flex-direction:column;gap:3rem;height:100%;flex:1 1;box-sizing:border-box}.f1-playing-screen,.f1-traffic-lights-container{display:flex;align-items:center;justify-content:center}.f1-traffic-lights-container{flex-direction:row;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.f1-traffic-light{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:rgba(0,0,0,.1);border-radius:10px}.f1-light{width:50px;height:50px;border-radius:50%;background:#2a0000;border:3px solid #333;box-shadow:inset 0 0 15px rgba(0,0,0,.8),0 0 0 rgba(255,0,0,0);transition:all .2s ease;position:relative}.f1-light.active{background:red;box-shadow:inset 0 0 20px rgba(255,0,0,.9),0 0 30px rgba(255,0,0,.7),0 0 50px rgba(255,0,0,.5);animation:f1LightPulse .5s ease-in-out infinite}@keyframes f1LightPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.05)}}.f1-button-container{margin:2rem 0}.f1-button-container,.f1-hit-button{display:flex;justify-content:center;align-items:center}.f1-hit-button{width:250px;height:250px;border-radius:50%;background:linear-gradient(135deg,#e74c3c,#c0392b);border:6px solid #333;box-shadow:8px 8px 0 #333,inset 0 0 30px hsla(0,0%,100%,.3);cursor:pointer;transition:all .1s ease;position:relative;overflow:hidden}.f1-hit-button:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#95a5a6,#7f8c8d)}.f1-hit-button:not(:disabled){animation:buttonPulse 2s ease-in-out infinite}.f1-hit-button:not(:disabled):active{transform:scale(.95);box-shadow:4px 4px 0 #333,inset 0 0 50px hsla(0,0%,100%,.5)}.f1-button-text{font-family:Bangers,cursive;font-size:2rem;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.3);letter-spacing:3px;position:relative;z-index:1}.f1-result-screen{text-align:center;max-width:700px;background:#fff;padding:3rem;border:4px solid #333;border-radius:20px;box-shadow:8px 8px 0 #333}.f1-result-title{font-family:Bangers,cursive;font-size:3.5rem;color:#333;text-shadow:4px 4px 0 var(--pink),6px 6px 0 rgba(0,0,0,.1);letter-spacing:3px}.f1-result-info,.f1-result-title{margin-bottom:2rem}.f1-result-message{display:flex;flex-direction:column;gap:1rem}.f1-result-success{color:#27ae60}.f1-result-big,.f1-result-success{font-family:Bangers,cursive;font-size:2rem;text-shadow:2px 2px 0 rgba(0,0,0,.1);letter-spacing:2px}.f1-result-big{color:#333}.f1-result-detail{font-family:Fredoka,sans-serif;font-size:1.2rem;color:#666;margin-top:.5rem}.f1-result-warning{color:#f39c12}.f1-result-error,.f1-result-warning{font-family:Fredoka,sans-serif;font-size:1.1rem;font-weight:600}.f1-result-error{color:#e74c3c}@media (max-width:768px){.f1-start-screen h1{font-size:3rem}.f1-hit-button{width:200px;height:200px}.f1-button-text{font-size:1.5rem}.f1-traffic-lights-container{gap:.8rem}.f1-traffic-light{padding:.5rem;gap:.3rem}.f1-light{width:35px;height:35px}.f1-result-title{font-size:2.5rem}.f1-result-big,.f1-result-success{font-size:1.5rem}}.f1-mute-btn{position:fixed;z-index:1000;width:50px;height:50px;border-radius:50%;background:#fff;border:3px solid #333;box-shadow:4px 4px 0 #333;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.f1-mute-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #333}.f1-mute-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #333}@media (max-width:768px){.f1-mute-btn{width:45px;height:45px;font-size:1.3rem}}.level-editor-screen{display:flex;flex-direction:column;gap:1rem;padding:1rem;max-width:1200px!important;margin:0 auto;align-items:center}.editor-top-nav{width:100%;padding:1rem 0;border-bottom:2px solid rgba(0,0,0,.05);margin-bottom:1rem}.timeline-scroll{display:flex;gap:20px;overflow-x:auto;padding:25px 15px 45px;align-items:center;min-height:120px;justify-content:flex-start}.timeline-item-pro{flex:0 0 120px;aspect-ratio:2/1;background:#fff;border:3px solid #ddd;border-radius:12px;cursor:pointer;position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2px;gap:2px;padding:4px;transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.timeline-item-pro.active{border-color:var(--pink);transform:scale(1.1);box-shadow:0 10px 20px rgba(255,105,180,.2)}.timeline-item-pro .lvl-num{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#333;color:#fff;font-size:.75rem;padding:2px 10px;border-radius:12px;font-weight:900;z-index:5;box-shadow:0 2px 5px rgba(0,0,0,.2)}.main-editor-canvas{width:90vw;max-width:900px;aspect-ratio:2/1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);grid-gap:1.5%;gap:1.5%;margin:1rem 0}.visual-palette{display:flex;gap:1.2rem;padding:1rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center}.palette-swatch{width:60px;height:60px;border-radius:15px;border:4px solid #333;cursor:pointer;position:relative;transition:all .2s cubic-bezier(.175,.885,.32,1.275);overflow:hidden;box-shadow:4px 4px 0 #333}.palette-swatch.active{transform:scale(1.2) translateY(-8px);box-shadow:0 10px 20px rgba(0,0,0,.15);border-color:var(--pink)}.palette-swatch.active:after{content:"🖌️";position:absolute;top:-10px;right:-10px;font-size:1.2rem;filter:drop-shadow(2px 2px 0 #333);z-index:10}.palette-swatch img{width:100%;height:100%;object-fit:cover}.palette-swatch .swatch-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;font-size:.5rem;text-align:center;padding:1px 0;font-weight:900;text-transform:uppercase;white-space:nowrap;overflow:hidden;z-index:5}.swatch-color-bar{position:absolute;top:0;left:0;right:0;height:6px;border-bottom:2px solid #333;z-index:5}.play-preview-btn{background:#333;color:#fff;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease}.play-preview-btn.playing{background:#2ecc71;animation:pulse-green 1s infinite}@keyframes pulse-green{0%{box-shadow:0 0 0 0 rgba(46,204,113,.4)}70%{box-shadow:0 0 0 10px rgba(46,204,113,0)}to{box-shadow:0 0 0 0 rgba(46,204,113,0)}}