*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{width:100vw;height:100vh;height:100dvh;overflow:hidden;font-family:Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;-webkit-user-select:none;user-select:none;position:fixed;top:0;left:0}#game-container{width:100%;height:100%;position:relative;overflow:hidden}#game-canvas{width:100%;height:100%;display:block;touch-action:none;position:absolute;top:0;left:0}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.game-menu-button{position:absolute;top:clamp(10px,2vh,20px);left:clamp(10px,2vw,20px);background:#ffffffe6;color:#333;font-size:clamp(24px,5vw,32px);padding:clamp(8px,1.5vh,12px) clamp(12px,2.5vw,18px);border-radius:clamp(8px,1.5vw,12px);box-shadow:0 4px 8px #0000004d;pointer-events:all;z-index:20;display:flex;align-items:center;justify-content:center;min-width:clamp(45px,8vw,60px);min-height:clamp(45px,8vw,60px)}.game-menu-button:hover{background:#fff;transform:scale(1.05)}.game-menu-button:active{transform:translateY(2px) scale(1.05);box-shadow:0 2px 4px #0000004d}.menu-icon{display:block;line-height:1}#score-container{position:absolute;top:clamp(10px,2vh,20px);left:clamp(75px,12vw,100px);right:clamp(120px,18vw,180px);display:flex;flex-direction:column;gap:clamp(5px,1vh,10px)}#score-bar{width:100%;height:clamp(30px,5vh,40px);background:#ffffffe6;border-radius:clamp(15px,2.5vh,20px);overflow:hidden;box-shadow:0 4px 10px #0003;border:clamp(3px,.5vh,4px) solid #fff}#score-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcf7f);transition:width .3s ease,background-position .3s ease;background-size:200% 100%;background-position:0% 0%}#score-text{font-size:clamp(20px,4vw,28px);font-weight:700;color:#fff;text-shadow:3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000;text-align:center}#timer-container{position:absolute;top:clamp(10px,2vh,20px);right:clamp(10px,2vw,20px)}#timer-text{font-size:clamp(32px,6vw,48px);font-weight:700;color:#fff;text-shadow:3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000;background:#6496ffcc;padding:clamp(8px,1.5vh,10px) clamp(15px,3vw,20px);border-radius:clamp(10px,2vw,15px);min-width:clamp(80px,12vw,100px);text-align:center}#timer-text.warning{background:#ff6464cc;animation:pulse .5s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.menu-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:100;pointer-events:all;touch-action:pan-y;overflow-y:auto}.menu-screen.active{display:flex}.menu-screen h1{font-size:clamp(30px,7vw,54px);color:#fff;text-shadow:4px 4px 0 rgba(0,0,0,.3);margin-bottom:clamp(15px,3vh,30px);text-align:center;padding:0 20px}.menu-content{display:flex;flex-direction:column;gap:clamp(12px,2.5vh,25px);align-items:center;width:90%;max-width:min(550px,90vw);padding:10px;touch-action:pan-y;-webkit-overflow-scrolling:touch}.button-group{width:100%;display:flex;flex-direction:column;gap:clamp(8px,1.5vh,12px)}.button-group h2{font-size:clamp(18px,3.5vw,28px);color:#fff;text-align:center;margin-bottom:8px}button{font-family:inherit;font-size:clamp(16px,3vw,24px);font-weight:700;padding:clamp(10px,2vh,18px) clamp(18px,4.5vw,35px);border:none;border-radius:clamp(10px,2vw,18px);cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 5px #0000004d;pointer-events:all}button:active{transform:translateY(4px);box-shadow:0 2px #0000004d}button:focus{outline:3px solid rgba(255,255,255,.5);outline-offset:2px}.mode-btn,.difficulty-btn,.audio-type-btn{background:#ffffffe6;color:#333;width:100%;display:flex;align-items:center;justify-content:center;gap:15px}.mode-btn.active,.difficulty-btn.active,.audio-type-btn.active{background:#6bcf7f;color:#fff}.btn-icon{font-size:clamp(20px,4.5vw,30px)}.start-btn{background:linear-gradient(135deg,#ffd93d,#ffb347);color:#333;font-size:clamp(20px,4.5vw,30px);padding:clamp(12px,2.5vh,22px) clamp(25px,5vw,45px);margin-top:clamp(8px,1.5vh,15px)}.start-btn:hover{transform:scale(1.05)}.secondary-btn{background:#ffffff4d;color:#fff;font-size:clamp(15px,2.5vw,20px)}#final-score-display{background:#fff3;padding:clamp(18px,4vh,35px);border-radius:clamp(12px,2.5vw,25px);text-align:center}#final-score-display p{font-size:clamp(20px,3.5vw,28px);color:#fff;margin-bottom:8px}#final-score{font-size:clamp(50px,10vw,82px);color:#ffd93d;text-shadow:4px 4px 0 rgba(0,0,0,.3);margin:clamp(8px,1.5vh,16px) 0}#encouragement-text{font-size:clamp(24px,4.5vw,34px);color:#6bcf7f;text-shadow:2px 2px 0 rgba(0,0,0,.3)}.loading-spinner{width:clamp(35px,7vw,50px);height:clamp(35px,7vw,50px);border:clamp(3px,.8vw,5px) solid rgba(255,255,255,.3);border-top:clamp(3px,.8vw,5px) solid white;border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:#fff;font-size:clamp(16px,2.5vw,20px);margin-top:clamp(12px,1.5vh,18px)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#score-fill{transition:width .3s ease,background-position .3s ease}@media (max-width: 768px){.menu-screen h1{font-size:48px}.button-group h2{font-size:24px}button{font-size:24px;padding:15px 30px}.start-btn{font-size:28px}#score-text{font-size:24px}#timer-text{font-size:36px}}@media (max-height: 600px){.menu-screen h1{font-size:40px;margin-bottom:20px}.menu-content{gap:15px}.button-group{gap:10px}#score-container{top:10px;left:75px;right:120px}#timer-container{top:10px;right:10px}}@media (max-width: 896px) and (orientation: landscape){.menu-screen h1{font-size:36px;margin-bottom:15px}.menu-content{gap:10px;max-height:80vh;overflow-y:auto}button{padding:10px 25px;font-size:20px}.start-btn{font-size:24px;padding:15px 35px}}