:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html,body,#root{width:100%;height:100%}body{-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 40%,#3a4a5f 0%,#1e2630 60%,#141a22 100%);font-family:Arial,Helvetica Neue,sans-serif;overflow:hidden}.game-shell{background:#000;place-items:center;width:100vw;height:100vh;display:grid;position:relative;overflow:hidden}.game-canvas{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:block}.game-canvas.active{cursor:default}.score-display{color:#fff;text-shadow:-2px -2px #000,2px -2px #000,-2px 2px #000,2px 2px #000;pointer-events:none;z-index:10;font-size:clamp(28px,7vmin,52px);font-weight:700;position:absolute;top:4%;left:50%;transform:translate(-50%)}.lives-display{pointer-events:none;z-index:10;gap:3px;display:flex;position:absolute;top:4%;left:3%}.life-heart{width:clamp(18px,4.5vmin,32px);height:clamp(18px,4.5vmin,32px);display:block}.life-heart.life-empty{opacity:.25;filter:grayscale()}.overlay{text-align:center;z-index:20;background:#00000059;flex-direction:column;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.game-title{color:gold;letter-spacing:2px;text-shadow:-3px -3px #000,3px -3px #000,-3px 3px #000,3px 3px #000,0 4px 8px #0006;margin-bottom:8px;font-size:clamp(28px,8vmin,56px);font-weight:700}.subtitle{color:#fff;text-shadow:1px 1px 2px #000;margin-bottom:32px;font-size:clamp(14px,3.5vmin,20px)}.game-over-title{color:#f44;text-shadow:-3px -3px #000,3px -3px #000,-3px 3px #000,3px 3px #000;margin-bottom:12px;font-size:clamp(26px,7vmin,48px);font-weight:700}.medal{min-height:1em;margin-bottom:10px;font-size:clamp(32px,8vmin,52px)}.final-score,.best-score{color:#fff;text-shadow:1px 1px 2px #000;font-size:clamp(16px,4.5vmin,24px)}.final-score{margin-bottom:6px}.best-score{color:gold;margin-bottom:24px}.menu{flex-direction:column;gap:14px;width:min(340px,84vw);display:flex}.menu-btn{cursor:pointer;color:#fff;text-shadow:1px 1px 2px #0006;border:none;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:14px 20px;transition:transform .12s,filter .12s,box-shadow .12s;display:flex;box-shadow:0 4px #00000059,0 6px 14px #0000004d}.menu-btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 6px #00000059,0 8px 18px #0000004d}.menu-btn:active{transform:translateY(2px);box-shadow:0 2px #00000059}.menu-btn .menu-name{letter-spacing:2px;font-size:clamp(18px,4.5vmin,26px);font-weight:700}.menu-btn .menu-desc{opacity:.92;font-size:clamp(11px,2.6vmin,14px);font-weight:500}.menu-btn.easy{background:linear-gradient(#5cb850,#3d9d33)}.menu-btn.medium{background:linear-gradient(#f0a030,#d07f1c)}.menu-btn.hard{background:linear-gradient(#e05545,#b7322a)}.menu-hint{margin-top:22px}.menu-main{gap:18px;width:min(300px,84vw)}.menu-btn.play{background:linear-gradient(#4aa8f0,#2f7fd6)}.menu-btn.sounds{background:linear-gradient(#a05cce,#7a3fb0)}.menu-sounds{width:min(340px,84vw);margin-bottom:4px;position:static}.back-btn{color:#fff;letter-spacing:1px;cursor:pointer;background:#0000004d;border:2px solid #ffffff59;border-radius:8px;margin-top:18px;padding:8px 26px;font-family:monospace;font-size:14px;font-weight:700;transition:background .12s,transform .1s}.back-btn:hover{background:#0000008c;transform:translateY(-1px)}.back-btn:active{transform:translateY(1px)}.overlay-actions{gap:14px;margin-top:4px;display:flex}.btn-ghost{background:linear-gradient(#ffffff2e,#ffffff0f);box-shadow:0 4px #00000059}.btn-ghost:hover{filter:brightness(1.15)}.tap-hint{color:#ddd;text-shadow:1px 1px 2px #000;margin-top:16px;font-size:clamp(12px,3vmin,16px);animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.btn{cursor:pointer;color:#fff;text-shadow:1px 1px 2px #0000004d;letter-spacing:1px;background:linear-gradient(#56c43a,#3a9d23);border:none;border-radius:8px;padding:clamp(10px,2.5vmin,14px) clamp(32px,7vmin,52px);font-size:clamp(16px,4vmin,22px);font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:0 4px #2a7a17,0 6px 12px #0000004d}.btn:hover{transform:translateY(-2px);box-shadow:0 6px #2a7a17,0 8px 16px #0000004d}.btn:active{transform:translateY(2px);box-shadow:0 2px #2a7a17,0 3px 6px #0000004d}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.settings-toggle{z-index:30;cursor:pointer;background:#00000073;border:2px solid #ffffff59;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;line-height:1;transition:background .15s,transform .12s;display:flex;position:absolute;top:10px;right:10px}.settings-toggle:hover{background:#000000b3;transform:rotate(30deg)}.settings-panel{z-index:35;color:#fff;background:#0a0a14eb;border:2px solid #ffffff40;border-radius:12px;flex-direction:column;gap:10px;min-width:220px;padding:14px 16px;font-family:monospace;font-size:13px;animation:.18s ease-out settingsFadeIn;display:flex;position:absolute;top:58px;right:10px;box-shadow:0 8px 24px #0009}@keyframes settingsFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.settings-row{align-items:center;gap:8px;display:flex}.settings-label{flex-shrink:0;min-width:80px}.settings-slider{accent-color:#56c43a;cursor:pointer;flex:1;height:6px}.settings-val{text-align:right;opacity:.85;min-width:36px;font-size:12px}.settings-row-toggle{justify-content:space-between}.settings-toggle-btn{cursor:pointer;border:none;border-radius:6px;padding:5px 12px;font-family:monospace;font-size:12px;font-weight:700;transition:background .12s}.settings-toggle-btn.on{color:#fff;background:#3a9d23}.settings-toggle-btn.off{color:#fff;background:#888}.settings-toggle-btn:hover{filter:brightness(1.12)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#000;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none;-webkit-overflow-scrolling:auto}.app{width:100%;height:100%}@media screen and (orientation:portrait){body:after{content:"📱 Rotate your device to landscape for best experience!";text-align:center;color:#ffffffb3;z-index:9999;pointer-events:none;padding:8px 16px;font-family:system-ui,sans-serif;font-size:13px;position:fixed;bottom:16px;left:0;right:0}}
