*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{color:#f8fafc;background:#0f172a;width:100vw;height:100vh;font-family:"M PLUS Rounded 1c",sans-serif;overflow:hidden}#game-container{background:linear-gradient(135deg,#1e293b,#0f172a);border-left:1px solid #ffffff0d;border-right:1px solid #ffffff0d;flex-direction:column;justify-content:space-between;width:100vw;max-width:450px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:0 0 32px #00000080}.hud-container{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0f172ad9;border-bottom:2px solid #ffffff0d;justify-content:space-between;align-items:center;height:75px;padding:0 8px;display:none}.hud-container.active{display:flex}.hud-center-group{flex-direction:column;align-items:center;gap:4px;display:flex}.progress-bar-container{align-items:center;gap:6px;display:flex}.progress-lbl{color:#64748b;font-size:10px;font-weight:900}.progress-track{background:#1e293b;border:1px solid #ffffff1a;border-radius:9999px;width:110px;height:8px;position:relative;overflow:visible}.progress-fill{background:linear-gradient(90deg,#38bdf8,#22c55e);border-radius:9999px;width:0%;height:100%}.progress-player-icon{color:#0000;background:#fff;border:2px solid #0284c7;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:12px;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #38bdf899}.hud-btn{color:#f1f5f9;cursor:pointer;background:#334155;border:none;border-radius:9999px;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:900;transition:all .1s;box-shadow:0 4px #1e293b}.hud-btn:active{box-shadow:none;transform:translateY(4px)}.hud-btn-icon{justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:16px;display:flex}.hud-stage-name{color:#38bdf8;text-shadow:0 2px 4px #00000080;font-size:14px;font-weight:900}#phaser-container{background:#38bdf8;flex:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}#phaser-container canvas{display:block}.controller-container{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0f172ae6;border-top:2px solid #ffffff0d;justify-content:space-between;align-items:center;height:160px;padding:0 24px;display:none}.controller-container.active{display:flex}.joystick-zone{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:140px;height:140px;display:flex;position:relative}.joystick-base{background:#ffffff14;border:4px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:118px;height:118px;display:flex;position:relative;box-shadow:inset 0 0 16px #0009}.joystick-stick{touch-action:none;border-radius:50%;width:64px;height:64px;position:absolute;box-shadow:0 4px 8px #0006,inset 0 2px 4px #fff6}#joystick-left .joystick-stick{background:radial-gradient(circle at 30% 30%,#38bdf8,#0284c7)}#joystick-right .joystick-stick{background:radial-gradient(circle at 30% 30%,#f87171,#dc2626)}@media (height<=820px){.controller-container{height:135px;padding:0 12px}.joystick-zone{width:120px;height:120px}.joystick-base{border-width:3px;width:118px;height:118px}.joystick-stick{width:64px;height:64px}}.btn{cursor:pointer;border:none;border-radius:9999px;font-family:inherit;font-weight:900;transition:all .1s}.btn-primary{color:#0f172a;background:linear-gradient(135deg,#facc15,#eab308);padding:14px 44px;font-size:22px;box-shadow:0 6px #ca8a04}.btn-primary:active{box-shadow:none;transform:translateY(6px)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.85}}.animate-pulse{animation:1.5s ease-in-out infinite pulse}.overlay-screen{z-index:100;background:linear-gradient(135deg,#0f172a,#1e1b4b);flex-direction:column;justify-content:center;align-items:center;padding:24px;display:none;position:absolute;inset:0}.overlay-screen.active{display:flex}.title-logo-container{text-align:center;margin-bottom:8px}.title-main{color:#38bdf8;text-shadow:0 0 16px #38bdf866,0 4px #0284c7;letter-spacing:-2px;font-size:48px;font-weight:900}.title-sub{color:#facc15;text-shadow:0 0 16px #facc1566,0 4px #ca8a04;margin-top:-8px;font-size:40px;font-weight:900}.title-desc{color:#cbd5e1;margin-bottom:32px;font-size:14px;font-weight:700}.stage-select-box{background:#ffffff0d;border:2px solid #ffffff1a;border-radius:24px;flex-direction:column;gap:12px;width:100%;max-width:320px;margin-bottom:32px;padding:16px;display:flex}.select-label{color:#94a3b8;text-align:center;font-size:13px;font-weight:900}.stage-buttons{flex-direction:column;gap:8px;display:flex}.btn-stage{color:#94a3b8;background:#334155;border:2px solid #0000;border-radius:16px;padding:12px;font-size:14px}.btn-stage.active{color:#38bdf8;background:#1e1b4b;border-color:#38bdf8;box-shadow:0 0 12px #38bdf84d}.btn-mute-title{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:8px 16px;font-size:14px;font-weight:900;position:absolute;bottom:24px}.clear-overlay-screen{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;opacity:0;pointer-events:none;background:#0f172ad9;justify-content:center;align-items:center;padding:24px;transition:opacity .3s;display:flex;position:absolute;inset:0}.clear-overlay-screen.active{opacity:1;pointer-events:auto}.clear-card{text-align:center;background:linear-gradient(135deg,#1e1b4b,#311042);border:4px solid #facc15;border-radius:32px;width:100%;max-width:320px;padding:32px 24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);transform:scale(.9);box-shadow:0 16px 32px #00000080}.clear-overlay-screen.active .clear-card{transform:scale(1)}.clear-title{color:#facc15;text-shadow:0 4px #ca8a04;margin-bottom:12px;font-size:32px;font-weight:900}.font-all-clear{color:#f43f5e;text-shadow:0 4px #be123c;font-size:36px}.clear-stars{letter-spacing:4px;margin-bottom:16px;font-size:40px;animation:1s ease-in-out infinite pulse}.clear-text{color:#e2e8f0;margin-bottom:24px;font-size:16px;font-weight:700;line-height:1.6}