:root{--primary-blue: #2196F3;--primary-blue-light: #64B5F6;--primary-blue-dark: #1976D2;--royal-blue: #0D47A1;--royal-blue-light: #1565C0;--accent-red: #F44336;--accent-green: #4CAF50;--text-light: #FFFFFF;--text-dark: #263238;--ui-border-radius: 10px;--panel-bg: rgba(13, 71, 161, .9);--panel-border: 4px solid var(--primary-blue);--primary-green: #4CAF50;--primary-green-light: #81C784;--primary-green-dark: #388E3C;--forest-green: #2E7D32;--forest-green-light: #43A047;--ui-green-bg: rgba(46, 125, 50, .9);--ui-green-border: 4px solid var(--primary-green)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;overflow:hidden;font-family:Rubik,sans-serif;background-color:var(--royal-blue);color:var(--text-light)}canvas{display:block}h1,h2,h3,h4{font-family:Rubik,sans-serif;font-weight:700;letter-spacing:.5px;color:var(--primary-blue-light);text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.clash-border{position:relative;border:var(--panel-border);border-radius:var(--ui-border-radius);background-color:var(--panel-bg);box-shadow:0 0 15px #2196f380,inset 0 0 10px #2196f34d;padding:3px}.clash-border:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid var(--primary-blue-dark);border-radius:var(--ui-border-radius);pointer-events:none}#ui.clash-border,#instructions.clash-border,#leaderboard.clash-border{background:transparent!important;border:none!important;box-shadow:none!important;padding:15px!important;margin:0!important;overflow:visible!important}#ui.clash-border:before,#instructions.clash-border:before,#leaderboard.clash-border:before{display:none!important}#ui{position:absolute!important;top:20px!important;left:20px!important;z-index:1000!important;display:flex!important;flex-direction:column!important;gap:10px!important;min-width:220px!important;width:auto!important;height:auto!important}.ui-game-background{position:absolute!important;top:-15px!important;left:-15px!important;right:-15px!important;bottom:-15px!important;background:#2e7d32!important;border-radius:var(--ui-border-radius)!important;box-shadow:0 6px #0000004d,0 0 20px #2e7d3299!important;z-index:-1!important;border:3px solid #81C784!important;overflow:hidden!important}.ui-game-background:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,#fff3,#fff0 20%),radial-gradient(circle at 70% 60%,#ffffff26,#fff0 25%),repeating-linear-gradient(45deg,#81c7841a,#81c7841a 10px,#81c78400 10px,#81c78400 20px);z-index:0;pointer-events:none}.ui-game-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,#ffffff26,#fff0 70%);z-index:-1;pointer-events:none}.ui-beetle-decoration{position:absolute!important;width:60px!important;height:60px!important;background-color:#4caf50!important;border-radius:50%!important;top:-25px!important;right:-20px!important;transform:rotate(15deg)!important;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.5))!important;z-index:5!important;border:3px solid #388E3C!important}.ui-dung-ball{position:absolute!important;width:40px!important;height:40px!important;background-color:#8d6e63!important;border-radius:50%!important;bottom:-15px!important;left:20px!important;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.5))!important;z-index:5!important;border:2px solid #6D4C41!important}.ui-grass-decoration{position:absolute!important;width:80px!important;height:30px!important;background-color:#7cb342!important;border-radius:0 0 50% 50%!important;bottom:-10px!important;right:10px!important;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.4))!important;z-index:2!important}.ui-stat{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:5px 0!important;border-bottom:2px solid rgba(76,175,80,.4)!important;position:relative!important;z-index:2!important}.ui-stat:last-child{border-bottom:none}.ui-stat-label{font-weight:700!important;color:#c8e6c9!important;text-transform:uppercase!important;font-size:.9em!important;letter-spacing:1px!important}.ui-stat-value{font-weight:700!important;color:#fff!important;font-size:1.1em!important;text-shadow:1px 1px 0 rgba(0,0,0,.5)!important}.ui-header{display:flex;justify-content:space-between;margin-bottom:5px}#level-info{color:#fff!important;font-weight:700!important;text-align:center!important;padding:5px 0!important;font-size:1.2em!important;text-transform:uppercase!important;letter-spacing:1px!important;margin-bottom:10px!important;border-bottom:3px solid #81C784!important;text-shadow:1px 1px 0 rgba(0,0,0,.6)!important;position:relative!important;z-index:2!important}#timer{position:relative!important;margin:10px 0!important;text-align:center!important;font-family:Rubik,sans-serif!important;font-size:1.5em!important;color:#fff!important;text-shadow:2px 2px 0 rgba(0,0,0,.5)!important;z-index:2!important}#timer:before{content:"⏱";margin-right:8px;color:#fdd835}#instructions{position:absolute!important;bottom:20px!important;left:20px!important;padding:15px!important;font-size:.9em!important;z-index:1000!important;width:auto!important;height:auto!important;background:transparent!important;border:none!important;box-shadow:none!important}.instructions-game-background{position:absolute!important;top:-8px!important;left:-8px!important;right:-8px!important;bottom:-8px!important;background:#2e7d32!important;border-radius:var(--ui-border-radius)!important;box-shadow:0 4px #0000004d,0 0 15px #2e7d3299!important;z-index:-1!important;border:3px solid #81C784!important;overflow:hidden!important}.instructions-game-background:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,#ffffff26,#fff0 20%),repeating-linear-gradient(-45deg,#81c7840d,#81c7840d 8px,#81c78400 8px,#81c78400 16px);z-index:0;pointer-events:none}#instructions:before{content:"HOW TO PLAY";display:block;font-family:Rubik,sans-serif;color:#a5d6a7;margin-bottom:5px;font-weight:700;text-transform:uppercase;font-size:.9em;letter-spacing:1px}#sound-toggle{position:absolute!important;top:20px!important;right:20px!important;background:var(--forest-green)!important;border:3px solid var(--primary-green-light)!important;border-radius:50%!important;width:40px!important;height:40px!important;display:flex!important;justify-content:center!important;align-items:center!important;cursor:pointer!important;font-size:1.2em!important;color:var(--primary-green-light)!important;transition:all .2s!important;z-index:1000!important;box-shadow:0 3px 0 var(--primary-green-dark),0 0 10px #4caf5080!important}#sound-toggle:hover{transform:scale(1.1)!important;box-shadow:0 4px 0 var(--primary-green-dark),0 0 15px #4caf50b3!important}#leaderboard{position:absolute;top:20px;right:20px;padding:15px;min-width:220px;display:none;z-index:10;background:transparent;border:none;box-shadow:none}#leaderboard h3{text-align:center;margin-bottom:10px;padding-bottom:5px;border-bottom:3px solid var(--primary-blue-dark)}#leaderboard-list{list-style-type:none}#leaderboard-list li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:2px solid rgba(33,150,243,.3)}.player-name{font-weight:700;color:var(--text-light)}.player-score{font-weight:700;color:var(--primary-blue-light)}.progress-container{margin:5px 0!important;height:18px!important;background-color:#0000004d!important;border-radius:10px!important;overflow:hidden!important;border:3px solid #2E7D32!important;position:relative!important;z-index:2!important}.progress-bar{height:100%!important;background:linear-gradient(to right,#2e7d32,#81c784)!important;border-radius:5px!important;transition:width .3s!important;position:absolute!important;top:0!important;left:0!important;right:auto!important;bottom:0!important}@keyframes collectPulse{0%{transform:scale(1)}50%{transform:scale(1.2);box-shadow:0 0 20px var(--primary-blue)}to{transform:scale(1)}}.collect-pulse{animation:collectPulse .5s}.game-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000}.game-overlay-content{background-color:var(--ui-green-bg);border:var(--ui-green-border);border-radius:var(--ui-border-radius);padding:30px;text-align:center;max-width:80%;box-shadow:0 10px #0000004d,0 0 30px #4caf5099;position:relative;overflow:hidden}.game-overlay-content:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(76,175,80,.2) 0%,transparent 50%,rgba(76,175,80,.2) 100%);pointer-events:none}.game-overlay-content h2{font-size:2.5em;margin-bottom:20px;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.3);text-transform:uppercase;letter-spacing:2px;font-family:Rubik,sans-serif}.game-overlay-content p{font-size:1.3em;margin:15px 0;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.game-overlay-content button{background-color:var(--forest-green);color:#fff;border:3px solid var(--primary-green);border-radius:8px;padding:12px 25px;margin:10px;font-size:1.2em;cursor:pointer;transition:all .3s;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 0 var(--primary-green-dark),0 0 10px #0000001a}.game-overlay-content button:hover{background-color:var(--primary-green);transform:translateY(-3px);box-shadow:0 7px 0 var(--primary-green-dark),0 0 15px #4caf5080}.game-overlay-content button:active{transform:translateY(0);box-shadow:0 4px 0 var(--primary-green-dark)}.game-overlay-content:after{content:"";position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;background-color:var(--primary-green-dark);border-radius:50%;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);transform:rotate(20deg);opacity:.5}@media (max-width: 768px){#ui,#instructions,#sound-toggle,#leaderboard{font-size:.9em}#start-screen h1{font-size:2.5em}.start-container{padding:20px}.ui-game-background{opacity:.85!important;top:-8px!important;left:-8px!important;right:-8px!important;bottom:-8px!important}#ui{top:10px!important;left:10px!important;min-width:180px!important;max-width:35%!important}.ui-beetle-decoration{width:40px!important;height:40px!important;top:-15px!important;right:-10px!important}.ui-dung-ball{width:30px!important;height:30px!important;bottom:-10px!important}.ui-grass-decoration{width:60px!important;height:20px!important}#level-info,#timer{font-size:1em!important;margin-bottom:5px!important}.ui-stat-label{font-size:.8em!important}.ui-stat-value{font-size:.9em!important}#instructions{bottom:10px!important;left:10px!important;max-width:90%!important;padding:10px!important}}@media (max-width: 480px){#ui{min-width:150px!important;max-width:40%!important}#level-info,#timer{font-size:.9em!important}.ui-stat{padding:3px 0!important}#instructions{display:none!important}}#ui,#instructions,#sound-toggle{display:none!important}.game-active #ui,.game-active #instructions,.game-active #sound-toggle{display:block!important}@media (max-width: 480px){.game-active #instructions{display:none!important}}#joystick-container{z-index:2000!important;opacity:.7;border-radius:50%;user-select:none;-webkit-user-select:none;touch-action:none}@media (max-width: 768px){#joystick-container{bottom:80px!important;left:80px!important}}@media (max-width: 480px){#joystick-container{bottom:60px!important;left:60px!important}}.game-complete-content{background-color:var(--ui-green-bg);border:5px solid #81C784;min-width:320px;position:relative;animation:pop-in .6s cubic-bezier(.175,.885,.32,1.275) forwards}.game-complete-content h2{color:#ffd54f;font-size:2.8em;margin-bottom:25px;text-shadow:3px 3px 0 #388E3C,5px 5px 10px rgba(0,0,0,.4);position:relative;z-index:10}.game-complete-content p{color:#fff;font-size:1.4em;margin-bottom:25px;text-shadow:2px 2px 0 rgba(0,0,0,.4)}.game-complete-content .stat-row{display:flex;justify-content:space-between;padding:12px 15px;background-color:#388e3c4d;border-radius:8px;margin:12px 0;position:relative;z-index:5;border:2px solid rgba(129,199,132,.6)}.game-complete-content .stat-label{font-weight:700;color:#c8e6c9;text-transform:uppercase;font-size:1.1em;letter-spacing:1px}.game-complete-content .stat-value{font-weight:700;color:#fff;font-size:1.3em;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.game-complete-content .overlay-btn{background-color:#ffb300;color:#fff;border:3px solid #FFD54F;border-radius:12px;padding:15px 30px;margin:20px 0 10px;font-size:1.3em;cursor:pointer;transition:all .3s;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 5px #f57f17,0 0 15px #0003;position:relative;z-index:5}.game-complete-content .overlay-btn:hover{background-color:#ffc107;transform:translateY(-3px);box-shadow:0 8px #f57f17,0 0 20px #ffc10766}.game-complete-content .overlay-btn:active{transform:translateY(0);box-shadow:0 4px #f57f17}.overlay-decoration{position:absolute;top:-15px;right:-15px;width:100px;height:100px;background:radial-gradient(circle at 30% 30%,#a5d6a7,#81c784 40%,#4caf50);border-radius:50%;transform:rotate(25deg);z-index:1;border:4px solid #388E3C;box-shadow:0 5px 15px #0000004d}.overlay-beetle{position:absolute;width:60px;height:60px;background-color:#4caf50;border-radius:50%;top:-25px;right:20px;transform:rotate(15deg);filter:drop-shadow(2px 4px 3px rgba(0,0,0,.5));z-index:5;border:3px solid #388E3C}.overlay-dung-ball{position:absolute;width:50px;height:50px;background-color:#8d6e63;border-radius:50%;bottom:-20px;left:25px;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.5));z-index:5;border:2px solid #6D4C41}@keyframes pop-in{0%{transform:scale(.5);opacity:0}80%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@media (max-width: 768px){.game-complete-content h2{font-size:2.2em}.game-complete-content p{font-size:1.2em}.overlay-decoration{width:80px;height:80px}.overlay-beetle{width:50px;height:50px}.overlay-dung-ball{width:40px;height:40px}}@media (max-width: 480px){.game-complete-content{min-width:280px;padding:25px 15px}.game-complete-content h2{font-size:1.8em}.game-complete-content .stat-label,.game-complete-content .stat-value{font-size:.9em}.game-complete-content .overlay-btn{padding:12px 20px;font-size:1.1em}}#start-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#388e3c,#2e7d32);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;overflow:hidden}.menu-background{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#4caf50,#2e7d32),url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,30 L55,40 L65,42 L58,50 L60,60 L50,55 L40,60 L42,50 L35,42 L45,40 Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");background-size:100% 100%,80px 80px;z-index:-2}.menu-particles{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(255,255,255,.1) 10%,transparent 70%),url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1.5' fill='rgba(255,255,255,0.05)'/%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.04)'/%3E%3Ccircle cx='20' cy='25' r='0.8' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");opacity:.6;z-index:-1;animation:particles-drift 120s linear infinite}.menu-sun{position:absolute;top:60px;right:80px;width:80px;height:80px;background:radial-gradient(circle at center,#fdd835,#f57f17);border-radius:50%;box-shadow:0 0 20px 5px #ffeb3b4d;z-index:-1;animation:sun-pulse 4s ease-in-out infinite}@keyframes sun-pulse{0%{box-shadow:0 0 #ffeb3b66}50%{box-shadow:0 0 30px 10px #ffeb3b33}to{box-shadow:0 0 #ffeb3b66}}.menu-cloud{position:absolute;background:#fff;border-radius:50%;z-index:-1;opacity:.8;filter:drop-shadow(0 5px 15px rgba(0,0,0,.1))}.menu-cloud:before,.menu-cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-1{top:100px;left:100px;width:100px;height:60px;animation:float-cloud 8s ease-in-out infinite}.cloud-1:before{width:60px;height:60px;top:-30px;left:15px}.cloud-1:after{width:80px;height:80px;top:-40px;right:15px}.cloud-2{top:180px;right:200px;width:120px;height:70px;animation:float-cloud 12s ease-in-out infinite reverse}.cloud-2:before{width:70px;height:70px;top:-35px;left:20px}.cloud-2:after{width:90px;height:90px;top:-45px;right:20px}.cloud-3{bottom:220px;left:250px;width:80px;height:50px;animation:float-cloud 10s ease-in-out infinite 1s}.cloud-3:before{width:50px;height:50px;top:-25px;left:10px}.cloud-3:after{width:65px;height:65px;top:-30px;right:10px}@keyframes float-cloud{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.menu-light-beam{position:absolute;top:-150px;left:50%;transform:translate(-50%) rotate(0);width:200px;height:1200px;background:linear-gradient(to bottom,#fff0,#64b5f633,#fff0);border-radius:100%;transform-origin:center;animation:beam-rotate 20s infinite linear;z-index:-1}.menu-beetles{position:absolute;width:100%;height:100%;background:linear-gradient(45deg,rgba(13,71,161,.05) 25%,transparent 25%,transparent 50%,rgba(13,71,161,.05) 50%,rgba(13,71,161,.05) 75%,transparent 75%,transparent);background-size:20px 20px;opacity:.15;z-index:-1;animation:beetles-pulse 10s ease-in-out infinite}.menu-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0d47a100 30%,#0d47a1cc);pointer-events:none;z-index:-1}@keyframes particles-drift{0%{background-position:0% 0%}to{background-position:100% 100%}}@keyframes beam-rotate{0%{transform:translate(-50%) rotate(0)}to{transform:translate(-50%) rotate(360deg)}}@keyframes beetles-pulse{0%{transform:scale(1);opacity:.15}50%{transform:scale(1.05);opacity:.2}to{transform:scale(1);opacity:.15}}#start-screen[style*="display: flex"]~#ui,#start-screen[style*="display: flex"]~#instructions,#start-screen[style*="display: flex"]~#sound-toggle{display:none!important}#start-screen:not([style*="display: none"])~#ui,#start-screen:not([style*="display: none"])~#instructions,#start-screen:not([style*="display: none"])~#sound-toggle{display:none!important}.start-container{background-color:var(--ui-green-bg);border:var(--ui-green-border);border-radius:var(--ui-border-radius);padding:30px;max-width:800px;width:90%;position:relative;box-shadow:0 10px #0000004d,0 0 30px #4caf5099;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#start-screen h1{font-size:3em;margin-bottom:20px;text-align:center;color:var(--primary-green-light);text-shadow:2px 2px 0 rgba(0,0,0,.7);position:relative}#start-screen h1:after{content:"";display:block;width:150px;height:4px;background-color:var(--primary-green);margin:10px auto;border-radius:2px;box-shadow:0 2px #0000004d}#start-screen p{font-size:1.1em;line-height:1.6;margin-bottom:25px;color:var(--text-light);text-align:center}.game-mode-selector{display:flex;margin-bottom:20px;width:100%;border:3px solid var(--primary-green-dark);border-radius:10px;overflow:hidden}.mode-btn{flex:1;background-color:var(--forest-green);color:var(--text-light);border:none;padding:10px 15px;cursor:pointer;font-size:1em;transition:all .3s;text-transform:uppercase;letter-spacing:1px;border-right:3px solid var(--primary-green-dark);font-weight:700}.mode-btn:last-child{border-right:none}.mode-btn.active{background-color:var(--primary-green);color:var(--text-light);text-shadow:1px 1px 0 rgba(0,0,0,.5)}.mode-btn.disabled{background-color:#5a7069;color:#ffffff80;cursor:not-allowed;position:relative;overflow:hidden}.mode-btn.disabled:after{content:"Coming Soon";position:absolute;top:0;right:0;background-color:#e74c3c;color:#fff;font-size:.6em;padding:2px 5px;transform:rotate(45deg) translateY(-50%);transform-origin:right bottom;box-shadow:-1px 1px 3px #0000004d}.level-select{display:flex;justify-content:center;gap:15px;margin-bottom:25px;flex-wrap:wrap}.level-btn{background:var(--forest-green);color:var(--text-light);border:3px solid var(--primary-green);width:50px;height:50px;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:1.4em;transition:all .3s;font-family:Rubik,sans-serif;font-weight:700;box-shadow:0 4px 0 var(--primary-green-dark);text-shadow:1px 1px 0 rgba(0,0,0,.5)}.level-btn:hover{border-color:var(--primary-green-light);transform:translateY(-2px);box-shadow:0 6px 0 var(--primary-green-dark),0 0 10px #4caf5080}.level-btn.active{background-color:var(--primary-green);color:var(--text-light);border-color:var(--primary-green-light);box-shadow:0 4px 0 var(--primary-green-dark),0 0 15px #4caf5099}#start-btn{background:var(--accent-green);color:var(--text-light);border:none;padding:15px 30px;border-radius:10px;cursor:pointer;font-size:1.3em;transition:all .3s;text-transform:uppercase;font-weight:700;letter-spacing:1px;margin:0 auto;display:block;font-family:Rubik,sans-serif;position:relative;box-shadow:0 6px #388e3c,0 0 20px #4caf5080;text-shadow:1px 1px 0 rgba(0,0,0,.5)}#start-btn:hover{transform:translateY(-2px);box-shadow:0 8px #388e3c,0 0 25px #4caf5099}#start-btn:active{transform:translateY(2px);box-shadow:0 4px #388e3c,0 0 15px #4caf5066}#multiplayer-options{display:none;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px;width:100%}#multiplayer-options.visible{display:flex}.mp-control{display:flex;gap:10px;width:100%}#room-code-input{flex:1;padding:10px 15px;border:3px solid var(--primary-blue);background-color:#ffffff1a;color:var(--text-light);font-size:1em;border-radius:8px}#show-multiplayer-create-btn,#show-multiplayer-join-btn{background:var(--primary-blue);color:var(--text-light);border:none;padding:10px 15px;border-radius:8px;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:.9em;transition:all .2s;box-shadow:0 4px 0 var(--primary-blue-dark);text-shadow:1px 1px 0 rgba(0,0,0,.5)}#show-multiplayer-create-btn:hover,#show-multiplayer-join-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--primary-blue-dark)}#room-info{font-weight:700;color:var(--accent-red);text-align:center}.character-selection{width:100%;margin:20px 0}.character-selection h2{font-size:20px;text-align:center;color:#fff;margin-bottom:15px;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.4)}.character-selector{display:flex;align-items:center;justify-content:center;background-color:#2e7d32e6;border-radius:8px;padding:15px;box-shadow:0 4px #0003;position:relative;margin:0 auto 15px;max-width:80%}.character-nav{background-color:#fff3;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;box-shadow:0 2px 4px #0000004d;transition:all .2s ease;z-index:1}.character-nav:hover{background-color:#ffffff4d;transform:scale(1.1)}.character-display{width:130px;height:130px;background-color:#c8e6c94d;border-radius:4px;margin:0 15px;display:flex;align-items:center;justify-content:center;overflow:hidden}#character-model-container{width:100%;height:100%;position:relative}.character-info{flex:1;padding:0 15px;color:#fff}#character-name{font-size:18px;margin:0 0 5px;font-weight:700;color:#ffd54f;text-shadow:1px 1px 2px rgba(0,0,0,.5)}#character-description{font-size:14px;margin:0 0 15px;line-height:1.4}.character-stats{margin-top:10px}.stat-row{display:flex;align-items:center;margin-bottom:8px}.stat-label{width:80px;font-size:14px;font-weight:500}.stat-bar-container{flex:1;height:10px;background-color:#0003;border-radius:5px;overflow:hidden}.stat-bar{height:100%;background:linear-gradient(to right,#4caf50,#8bc34a);border-radius:5px}.character-pagination{display:flex;justify-content:center;margin-top:10px}.page-indicator{width:25px;height:25px;background-color:#ffffff4d;border-radius:50%;margin:0 5px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}.page-indicator:after{content:attr(data-index);font-size:14px}.page-indicator.active{background-color:#fffc;color:#2e7d32;transform:scale(1.1)}.start-container:before{content:"";position:absolute;top:-40px;right:-25px;width:70px;height:70px;background:#4caf50;border-radius:50% 50% 50% 10%;transform:rotate(15deg);border:3px solid #388E3C;box-shadow:0 5px #0003;z-index:1}.start-container:after{content:"";position:absolute;bottom:-30px;left:-20px;width:60px;height:60px;background:linear-gradient(135deg,#8d6e63,#5d4037);border-radius:50%;border:3px solid #6D4C41;box-shadow:0 5px #0003;z-index:1}.menu-beetle{position:absolute;width:120px;height:100px;top:30%;left:20%;z-index:1;animation:beetle-fly 20s infinite ease-in-out}.beetle-body{position:absolute;width:60px;height:80px;background:#388e3c;border-radius:50%/60% 60% 40% 40%;top:10px;left:30px;overflow:hidden}.beetle-body:after{content:"";position:absolute;width:30px;height:50px;background:#4caf50;border-radius:50%;top:15px;left:15px}.beetle-head{position:absolute;width:40px;height:35px;background:#2e7d32;border-radius:50%/60% 60% 40% 40%;top:0;left:40px}.beetle-eye{position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;top:10px}.beetle-eye.left{left:5px}.beetle-eye.right{right:5px}.beetle-antenna{position:absolute;width:3px;height:20px;background:#2e7d32;top:-15px}.beetle-antenna.left{left:10px;transform:rotate(-20deg)}.beetle-antenna.right{right:10px;transform:rotate(20deg)}.beetle-leg{position:absolute;width:30px;height:5px;background:#2e7d32;border-radius:5px}.beetle-leg.front-left{top:15px;left:-10px;transform:rotate(30deg);animation:leg-move .5s infinite alternate}.beetle-leg.middle-left{top:35px;left:-15px;transform:rotate(10deg);animation:leg-move .5s infinite alternate .1s}.beetle-leg.back-left{top:55px;left:-10px;transform:rotate(-20deg);animation:leg-move .5s infinite alternate .2s}.beetle-leg.front-right{top:15px;right:-10px;transform:rotate(-30deg);animation:leg-move .5s infinite alternate .15s}.beetle-leg.middle-right{top:35px;right:-15px;transform:rotate(-10deg);animation:leg-move .5s infinite alternate .25s}.beetle-leg.back-right{top:55px;right:-10px;transform:rotate(20deg);animation:leg-move .5s infinite alternate .3s}.beetle-wing{position:absolute;width:40px;height:60px;background:#81c784;border-radius:50%/60% 60% 40% 40%;top:15px;transform-origin:center top;animation:wing-flap .2s infinite alternate}.beetle-wing.left{left:20px;transform:rotate(-5deg)}.beetle-wing.right{right:20px;transform:rotate(5deg)}@keyframes beetle-fly{0%{transform:translate(0) rotate(0)}25%{transform:translate(30vw,-50px) rotate(5deg)}50%{transform:translate(60vw,30px) rotate(-5deg)}75%{transform:translate(30vw,-20px) rotate(3deg)}to{transform:translate(0) rotate(0)}}@keyframes wing-flap{0%{transform:rotate(-5deg)}to{transform:rotate(-25deg)}}@keyframes leg-move{0%{transform:rotate(var(--start-rotate, 0deg))}to{transform:rotate(calc(var(--start-rotate, 0deg) - 15deg))}}#start-btn.loading{position:relative;cursor:not-allowed;opacity:.7;background-color:#999;box-shadow:0 4px #666}#start-btn.loading:hover{transform:none;box-shadow:0 4px #666}.loading-indicator{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;display:none}#start-btn.loading .loading-indicator{display:block}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}.loading-progress{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:12px;display:none}#start-btn.loading .loading-progress{display:block}.notification{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-100px);background-color:#282828e6;color:#fff;padding:12px 25px;border-radius:25px;box-shadow:0 4px 15px #0003;z-index:10000;font-size:.9em;font-weight:500;transition:transform .5s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1)}.notification.show{transform:translate(-50%) translateY(0)}.multiplayer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.multiplayer-panel{background:linear-gradient(to bottom,#388e3c,#2e7d32);border:5px solid #81C784;border-radius:15px;padding:25px;width:90%;max-width:550px;box-shadow:0 10px #0000004d,0 0 30px #4caf5099;color:#fff;font-family:Rubik,sans-serif;position:relative;overflow:hidden;animation:panel-pop .4s cubic-bezier(.175,.885,.32,1.275)}.multiplayer-panel:before{content:"";position:absolute;top:-30px;right:-30px;width:80px;height:80px;background:#4caf50;border-radius:50%;border:3px solid #81C784;opacity:.6;z-index:0}.multiplayer-panel:after{content:"";position:absolute;bottom:-25px;left:30px;width:60px;height:60px;background:#8d6e63;border-radius:50%;border:3px solid #6D4C41;opacity:.4;z-index:0}@keyframes panel-pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}#mode-selection{flex-direction:column;gap:20px}#mode-selection,#create-room-form,#join-room-form,#room-lobby{position:relative;z-index:1}#mode-selection h2,#create-room-form h2,#join-room-form h2,#room-lobby h2{color:#ffeb3b;text-shadow:2px 2px 0 rgba(0,0,0,.5);text-align:center;margin-bottom:20px;font-size:1.8em;position:relative}#mode-selection h2:after,#create-room-form h2:after,#join-room-form h2:after,#room-lobby h2:after{content:"";display:block;width:100px;height:4px;background-color:#ffeb3b;margin:10px auto;border-radius:2px;box-shadow:0 2px #0000004d}.form-group{display:flex;flex-direction:column;margin-bottom:15px}.form-group label{margin-bottom:5px;font-weight:700;color:#e0f2f1;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.form-group input,.form-group select{padding:12px;border-radius:8px;border:3px solid #81C784;background-color:#ffffff26;color:#fff;font-size:1.1em;transition:all .3s;box-shadow:inset 0 2px 5px #0003}.form-group input:focus,.form-group select:focus{outline:none;border-color:#ffeb3b;background-color:#ffffff40;box-shadow:0 0 15px #ffeb3b80,inset 0 2px 5px #0003}.actions{display:flex;justify-content:space-between;margin-top:25px}.multiplayer-btn{padding:12px 20px;border-radius:10px;border:none;cursor:pointer;font-weight:700;transition:all .3s;font-size:1em;font-family:Rubik,sans-serif;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.multiplayer-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s}.multiplayer-btn:hover:before{left:100%}.multiplayer-btn:hover{transform:translateY(-3px)}.multiplayer-btn:active{transform:translateY(1px)}.multiplayer-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.multiplayer-btn.ready{animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 8px #0000004d,0 0 20px #4caf50b3}to{transform:scale(1)}}.join-btn{background-color:#4caf50;color:#fff;box-shadow:0 5px #2e7d32,0 0 10px #4caf5080;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.join-btn:hover{background-color:#66bb6a;box-shadow:0 7px #2e7d32,0 0 15px #4caf50b3}.join-btn:active{box-shadow:0 3px #2e7d32}.cancel-btn{background-color:#e53935;color:#fff;box-shadow:0 5px #c62828,0 0 10px #e5393580;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.cancel-btn:hover{background-color:#ef5350;box-shadow:0 7px #c62828,0 0 15px #e53935b3}.cancel-btn:active{box-shadow:0 3px #c62828}.small-btn{padding:6px 10px;font-size:.8em;border-radius:6px}#room-lobby{display:none;color:#fff}.room-info{background-color:#0003;padding:15px;border-radius:10px;margin-bottom:20px;border:2px solid rgba(255,255,255,.1);text-align:center}.room-code-container{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0}#room-code{font-family:monospace;font-size:1.4em;padding:5px 10px;background-color:#0000004d;border-radius:5px;letter-spacing:2px;border:1px solid rgba(255,255,255,.2)}.player-count{font-size:1.1em;font-weight:700;color:#e0f2f1;margin-top:10px}.player-count span{color:#ffeb3b}.settings-container{text-align:center;margin:15px 0;padding:15px;background-color:#0003;border-radius:10px;border:2px solid rgba(255,255,255,.1)}.settings-container label{margin-right:10px;font-weight:700;color:#e0f2f1}#level-select{padding:8px 15px;border-radius:8px;border:2px solid #81C784;background-color:#0000004d;color:#fff;font-family:Rubik,sans-serif}#player-list{list-style:none;padding:0;margin:20px 0;max-height:200px;overflow-y:auto;background-color:#0003;border-radius:10px;border:2px solid rgba(255,255,255,.1)}.player-item{display:flex;justify-content:space-between;padding:12px 15px;background-color:#ffffff1a;margin:8px;border-radius:8px;position:relative;transition:all .3s}.player-item:hover{background-color:#ffffff26;transform:scale(1.02)}.player-name-container{display:flex;align-items:center}.player-name{font-weight:700;color:#e0f2f1;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.player-status{color:#ef5350;font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.player-status.ready{color:#66bb6a}.lobby-actions{display:flex;justify-content:space-around;margin-top:20px;gap:10px}.connection-status{position:absolute;top:15px;right:15px;padding:8px 12px;border-radius:20px;color:#fff;font-size:.8em;font-weight:700;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;z-index:5}.connection-status:before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.connection-status.connected{background-color:#4caf50b3}.connection-status.connected:before{background-color:#4caf50;box-shadow:0 0 10px #4caf50;animation:blink 2s infinite}.connection-status.disconnected{background-color:#e53935b3}.connection-status.disconnected:before{background-color:#e53935;box-shadow:0 0 10px #e53935;animation:blink 1s infinite}@keyframes blink{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.multiplayer-error{background-color:#e53935e6;color:#fff;padding:12px;border-radius:8px;margin-top:15px;text-align:center;font-weight:700;display:none;animation:shake .5s;border:2px solid #C62828;box-shadow:0 4px #c62828}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-left:10px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}#multiplayer-hud{position:fixed;top:20px;right:20px;background:linear-gradient(to bottom,#388e3c,#2e7d32);border:3px solid #81C784;border-radius:10px;padding:15px;color:#fff;min-width:220px;display:none;box-shadow:0 6px #0000004d,0 0 20px #2e7d3299;font-family:Rubik,sans-serif}.scoreboard h3{color:#ffeb3b;text-shadow:1px 1px 0 rgba(0,0,0,.5);text-align:center;margin-bottom:10px;font-size:1.3em;position:relative}.scoreboard h3:after{content:"";display:block;width:60px;height:3px;background-color:#ffeb3b;margin:5px auto;border-radius:2px}#player-scores{list-style:none;padding:0;margin:0}.player-score-item{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.2);transition:all .2s}.player-score-item:hover{background-color:#ffffff1a;border-radius:5px}.player-score-item:last-child{border-bottom:none}.score-player-name{font-weight:700;color:#e0f2f1;text-shadow:1px 1px 0 rgba(0,0,0,.5)}.score-value{font-weight:700;color:#ffeb3b;text-shadow:1px 1px 0 rgba(0,0,0,.5)}@media (max-width: 768px){.multiplayer-panel{width:95%;padding:20px}#mode-selection h2,#create-room-form h2,#join-room-form h2,#room-lobby h2{font-size:1.5em}.multiplayer-btn{padding:10px 15px;font-size:.9em}}#create-room-form,#join-room-form{flex-direction:column}@media screen and (max-width: 767px){#start-screen{padding:5px;overflow-y:auto}.start-container{width:95vw;max-width:none;height:auto;min-height:92vh;padding:15px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}#start-screen h1{font-size:2.5rem;margin-bottom:.5rem}#start-screen p{font-size:.8rem;margin-bottom:0rem;padding:0 5px}.game-mode-selector{margin-bottom:1rem}.mode-btn{padding:8px 15px;font-size:.9rem}.character-selection{width:100%;margin-bottom:0rem}.character-selection h2{font-size:1.2rem;margin-bottom:.5rem}.character-selector{flex-direction:column;align-items:center;padding:10px 0;position:relative}.character-pagination,.game-mode-selector,.menu-beetle,.menu-cloud,.start-container:after,.ui-grass-decoration,.ui-dung-ball{display:none!important}.character-display{width:80%;height:150px;margin-bottom:10px;display:flex;justify-content:center;align-items:center;position:relative}#character-model-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform:none}#character-model-container img{max-width:90%;max-height:90%;object-fit:contain}.character-info{width:100%;padding:0 10px;text-align:center}#character-name{font-size:1.3rem;color:#fdd835;text-shadow:0 2px 4px rgba(0,0,0,.3);margin-bottom:5px}#character-description{font-size:.9rem;line-height:1.3;margin-bottom:10px}.character-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;font-size:1rem;z-index:10;background:#009600b3;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid rgba(255,255,255,.5)}.prev-btn{left:0}.next-btn{right:0}.stat-row{margin-bottom:8px;display:flex;align-items:center}.stat-label{font-size:.9rem;min-width:80px;text-align:right;margin-right:10px}.stat-bar-container{height:12px;flex-grow:1;background:#0000004d;border-radius:6px;overflow:hidden}.stat-bar{height:100%;background:#8bc34a;border-radius:6px}.character-pagination{margin-top:10px;margin-bottom:15px;display:flex;justify-content:center}.page-indicator{width:10px;height:10px;margin:0 4px;border-radius:50%;background:#ffffff4d;cursor:pointer}.page-indicator.active{background:#fdd835}.level-select{margin-bottom:5px;width:100%}.level-btn{width:30px;height:30px;font-size:1rem;margin:0 5px;border-radius:10px}#start-btn{width:85%;height:55px;font-size:1.2rem;margin-top:15px;border-radius:10px;background:#4caf50;color:#fff;border:none;box-shadow:0 4px #2e7d32}.menu-cloud{transform:scale(.7)}.menu-sun{width:60px;height:60px;top:40px;right:40px}.menu-beetle{transform:scale(.7)}#ui,#leaderboard,#instructions{z-index:5}#sound-toggle{z-index:105;right:10px;top:10px}}@media screen and (max-width: 375px){#start-screen h1{font-size:2rem}.start-container{width:98vw;min-height:95vh;padding:10px}.character-display{height:130px}.level-btn{width:40px;height:40px;font-size:1.1rem}#start-btn{width:95%;height:50px;font-size:1.1rem}}