*{margin:0;padding:0;box-sizing:border-box}html{font-size:clamp(12px,2.5vw,16px)}:root{--vh: 1vh}body{font-family:Arial,sans-serif;background-color:var(--theme-body-bg, #1a1a1a);color:var(--theme-primary-text, #ffffff);overflow:hidden;height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh}#app{width:100vw;height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh;display:flex;justify-content:center;align-items:center}.game-container{position:relative;width:100vw;height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh;overflow:hidden;box-shadow:0 0 clamp(10px,2vw,20px) var(--theme-game-container-shadow, rgba(0, 0, 0, .5))}#gameCanvas{display:block;width:100%;height:100%;background-color:var(--theme-canvas-bg, #222222);background-size:cover;background-position:center;background-repeat:no-repeat;cursor:crosshair;background-blend-mode:overlay}@media screen and (max-width:768px){.game-container{display:flex;justify-content:center;align-items:center;background:#1a1a1a}#gameCanvas{margin:0 auto;display:block;object-fit:contain;max-width:100vw;max-height:100vh}}.ui-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.ui-overlay>*{pointer-events:auto}.game-info{position:absolute;top:clamp(8px,2vw,20px);left:clamp(8px,2vw,20px);background:var(--theme-hud-bg, linear-gradient(135deg, #f4f1e8 0%, #e8dcc0 50%, #d4c4a8 100%));padding:clamp(8px,1.5vw,12px);border-radius:0;max-width:clamp(125px,22vw,225px);box-shadow:0 0 0 2px var(--theme-hud-border, #8b7355),0 4px 8px var(--theme-hud-shadow, rgba(0, 0, 0, .4)),inset 0 1px 0 var(--theme-hud-inset-shadow, rgba(255, 255, 255, .3));border:2px solid var(--theme-hud-border, #6b5b47);position:relative;transform:rotate(-1deg);filter:drop-shadow(2px 2px 4px var(--theme-hud-drop-shadow, rgba(0, 0, 0, .3)))}.game-info:before{content:"";position:absolute;inset:-3px;background:linear-gradient(135deg,#f4f1e8,#e8dcc0,#d4c4a8);border-radius:0;z-index:-1;clip-path:polygon(0% 0%,95% 0%,100% 5%,100% 15%,95% 20%,100% 25%,95% 30%,100% 35%,95% 40%,100% 45%,95% 50%,100% 55%,95% 60%,100% 65%,95% 70%,100% 75%,95% 80%,100% 85%,95% 90%,100% 95%,95% 100%,0% 100%,5% 95%,0% 90%,5% 85%,0% 80%,5% 75%,0% 70%,5% 65%,0% 60%,5% 55%,0% 50%,5% 45%,0% 40%,5% 35%,0% 30%,5% 25%,0% 20%,5% 15%,0% 10%,5% 5%)}.game-info:after{content:"";position:absolute;top:20%;right:10%;width:15px;height:20px;background:radial-gradient(ellipse,rgba(139,115,85,.3) 0%,transparent 70%);border-radius:50%;transform:rotate(15deg)}.game-info{background-image:radial-gradient(circle at 20% 30%,rgba(139,115,85,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(107,91,71,.15) 0%,transparent 40%),linear-gradient(135deg,#f4f1e8,#e8dcc0,#d4c4a8)}.game-info{border-image:linear-gradient(45deg,#8b7355,#6b5b47,#8b7355) 1;border-style:solid;border-width:2px}.hud-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(4px,1vw,8px);width:100%;min-height:0}.hud-item{display:flex;align-items:center;justify-content:center;padding:clamp(3px,.8vw,6px);border-radius:0;background:#f4f1e8e6;border:1px solid #8b7355;min-height:clamp(20px,4vw,30px);transition:all .3s ease;width:100%;min-width:0;box-shadow:inset 0 1px #ffffff4d}.hud-item:hover{background:#e8dcc0e6;border-color:#6b5b47;box-shadow:inset 0 1px #fff6,0 2px 4px #0003}.level-name{grid-column:1;grid-row:1}.level-name span{font-size:clamp(.5rem,1.1vw,.6rem);font-weight:700;color:#2c3e50;text-align:center;white-space:nowrap;font-family:Courier New,monospace;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;max-width:100%}.restart-button{grid-column:2;grid-row:1;background:#f4f1e8e6;border-color:#8b7355;padding:clamp(2px,.5vw,4px);width:100%}.restart-button:hover{background:#e8dcc0e6;border-color:#6b5b47}.restart-button .control-btn{width:100%;height:100%;min-height:clamp(18px,3.5vw,25px);font-size:clamp(.35rem,.9vw,.45rem);padding:clamp(3px,.6vw,5px) clamp(4px,1vw,8px);min-width:0;flex-shrink:1;background:linear-gradient(135deg,#8b4513,sienna,#8b4513);border:2px solid #654321;color:#f4f1e8;font-family:Courier New,monospace;font-weight:700;box-shadow:inset 0 1px #fff3,0 2px 4px #0000004d}.bullets-count{grid-column:1;grid-row:2;background:#f4f1e8e6;border-color:#8b7355}.bullets-count:hover{background:#e8dcc0e6;border-color:#6b5b47}.bullets-count span{font-size:clamp(.4rem,1vw,.5rem);font-weight:700;color:#8b0000;text-align:center;white-space:nowrap;font-family:Courier New,monospace;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;max-width:100%}.targets-count{grid-column:2;grid-row:2;background:#f4f1e8e6;border-color:#8b7355}.targets-count:hover{background:#e8dcc0e6;border-color:#6b5b47}.targets-count span{font-size:clamp(.4rem,1vw,.5rem);font-weight:700;color:#2d5016;text-align:center;white-space:nowrap;font-family:Courier New,monospace;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;max-width:100%}.bullet-info{position:absolute;top:clamp(10px,2.5vw,20px);right:clamp(10px,2.5vw,20px);background:#000000b3;padding:clamp(6px,1.5vw,10px) clamp(8px,2vw,15px);border-radius:clamp(4px,1vw,8px);backdrop-filter:blur(5px)}#bulletInfo{font-size:clamp(.75rem,2vw,.875rem);font-weight:700;color:#f39c12}.control-btn{padding:clamp(6px,1.2vw,10px) clamp(10px,2.5vw,20px);border:clamp(1px,.25vw,2px) solid #34495e;background:#2c3e50;color:#ecf0f1;border-radius:clamp(3px,.6vw,6px);cursor:pointer;font-size:clamp(.7rem,1.8vw,.875rem);font-weight:700;transition:all .3s ease;min-height:clamp(32px,7vw,44px);min-width:clamp(70px,18vw,120px);flex-shrink:0;box-shadow:0 2px clamp(2px,.5vw,4px) #0003}.control-btn:hover{background:#34495e;border-color:#3498db}.control-btn:disabled{background:#7f8c8d;border-color:#95a5a6;cursor:not-allowed;opacity:.6}.game-status{position:absolute;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100}.game-status.hidden{display:none}.status-message{background:#2c3e50;padding:clamp(20px,5vw,40px);border-radius:clamp(8px,2vw,12px);text-align:center;border:clamp(1px,.3vw,2px) solid #3498db;box-shadow:0 0 clamp(15px,4vw,30px) #3498db4d;max-width:clamp(280px,80vw,500px);margin:0 clamp(10px,3vw,20px)}#statusTitle{font-size:clamp(1.5rem,4vw,1.75rem);margin-bottom:clamp(8px,2vw,15px);color:#3498db}#statusMessage{font-size:clamp(.875rem,2.5vw,1rem);margin-bottom:clamp(12px,3vw,25px);color:#bdc3c7}@media screen and (orientation:portrait){body:before{content:"Please rotate your device to landscape mode to play";position:fixed;top:0;left:0;width:100vw;height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh;background:#1a1a1a;color:#fff;display:flex;justify-content:center;align-items:center;font-size:clamp(1rem,4vw,1.125rem);text-align:center;z-index:9999;padding:clamp(10px,3vw,20px)}#app{display:none}}@media screen and (max-width:768px){body,#app,.game-container{height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh;min-height:-webkit-fill-available}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.ui-overlay>*{pointer-events:auto}.control-btn{min-height:clamp(44px,10vw,48px);min-width:clamp(100px,25vw,120px);font-size:clamp(.875rem,2.5vw,1rem);padding:clamp(10px,2.5vw,12px) clamp(16px,4vw,20px)}.game-info{padding:clamp(3px,.8vw,5px);max-width:clamp(100px,20vw,200px)}.hud-grid{gap:clamp(3px,.8vw,6px)}.hud-item{min-height:clamp(18px,3.5vw,25px);padding:clamp(2px,.6vw,5px)}.level-name span,.bullets-count span,.targets-count span{font-size:clamp(.4rem,1.1vw,.5rem)}.restart-button .control-btn{font-size:clamp(.3rem,.8vw,.4rem);min-height:clamp(16px,3vw,22px)}.game-status{padding:clamp(15px,4vw,30px) clamp(10px,3vw,20px)}#statusTitle{font-size:clamp(1.25rem,4vw,1.5rem)}#statusMessage{font-size:clamp(1rem,3vw,1.125rem)}#gameCanvas{touch-action:none}}@media(hover:none)and (pointer:coarse){#gameCanvas{cursor:none}.control-btn{min-height:clamp(48px,12vw,50px);font-size:clamp(1rem,3vw,1.125rem)}}@media screen and (orientation:landscape)and (max-height:500px){.ui-overlay{padding:clamp(3px,1vw,5px)}.game-info{flex-direction:row;gap:clamp(6px,2vw,10px)}.level-info span,.bullets-info span{font-size:clamp(.75rem,2vw,.875rem);padding:clamp(4px,1.2vw,6px) clamp(6px,1.8vw,10px)}.control-btn{min-height:clamp(36px,8vw,40px);font-size:clamp(.75rem,2vw,.875rem);padding:clamp(6px,1.5vw,8px) clamp(12px,3vw,16px)}}@media screen and (max-width:480px){html{font-size:clamp(10px,2.2vw,14px)}.game-info{top:clamp(5px,1.5vw,10px);left:clamp(5px,1.5vw,10px);padding:clamp(6px,1.5vw,8px)}.bullet-info{top:clamp(5px,1.5vw,10px);right:clamp(5px,1.5vw,10px);padding:clamp(4px,1vw,6px) clamp(6px,1.5vw,8px)}.control-btn{min-height:clamp(40px,10vw,44px);min-width:clamp(70px,18vw,100px);font-size:clamp(.75rem,2.2vw,.875rem)}}@media screen and (max-width:360px){.game-info{padding:clamp(2px,.6vw,4px);max-width:clamp(90px,18vw,175px)}.hud-grid{gap:clamp(2px,.6vw,4px)}.hud-item{min-height:clamp(15px,3vw,22px);padding:clamp(1px,.5vw,4px)}.level-name span,.bullets-count span,.targets-count span{font-size:clamp(.35rem,.9vw,.45rem)}.restart-button .control-btn{font-size:clamp(.25rem,.7vw,.35rem);min-height:clamp(14px,2.8vw,20px);padding:clamp(1px,.4vw,3px) clamp(3px,.8vw,6px)}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.game-container{box-shadow:0 0 clamp(5px,1vw,10px) #00000080}}
