:root{--primary-color: #f7d716;--accent-color: #00ffcc;--danger-color: #ff3333;--bg-color: #0b0c10;--panel-bg: rgba(11, 12, 16, .85);--font-main: "Outfit", sans-serif}body{margin:0;overflow:hidden;background-color:var(--bg-color);font-family:var(--font-main);color:#fff;touch-action:none}#game-container{position:relative;width:100vw;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#1f2833,#0b0c10)}canvas{display:block;box-shadow:0 0 20px #0fc3;border:1px solid #333}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#score-board{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:24px;font-weight:700;text-shadow:0 0 10px var(--accent-color);pointer-events:none}.score-item span{color:var(--primary-color)}#touch-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom) + 20px);width:100%;height:150px;display:flex;justify-content:space-between;padding:0 40px;box-sizing:border-box;opacity:0;transition:opacity .5s;pointer-events:none}@media(pointer:coarse){#touch-controls{opacity:1;pointer-events:auto}}#joystick-area{width:250px;height:60px;align-self:flex-end;margin-bottom:20px;border:2px solid rgba(0,255,204,.3);background:linear-gradient(90deg,#00000080,#00ffcc1a,#00000080);border-radius:30px;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 15px #00ffcc1a;position:relative;overflow:hidden}#joystick-area:before{content:"";position:absolute;width:40px;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,204,.4),transparent);animation:scan 2s infinite linear}@keyframes scan{0%{transform:translate(-150px)}to{transform:translate(150px)}}#fire-button{width:100px;height:100px;align-self:flex-end;margin-bottom:10px;border:2px solid var(--danger-color);background:radial-gradient(circle,#f333,#00000080 70%);border-radius:50%;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 20px #ff33334d;cursor:pointer;transition:transform .1s,box-shadow .1s;text-align:center}#fire-button:active{background:radial-gradient(circle,#ff333380,#00000080 70%);transform:scale(.95);box-shadow:0 0 30px #f339}.control-label{font-size:14px;color:#fffc;letter-spacing:2px;font-weight:700;text-shadow:0 0 5px rgba(0,0,0,.5);user-select:none;-webkit-user-select:none;z-index:1;width:100%;text-align:center}#message-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s}#message-overlay.hidden{opacity:0;pointer-events:none}#message-title{font-size:64px;color:var(--primary-color);margin:0;text-shadow:0 0 20px var(--primary-color);text-transform:uppercase}#message-subtitle{font-size:24px;color:#fff;margin-top:10px;animation:blink 1s infinite alternate}@keyframes blink{0%{opacity:1}to{opacity:.5}}#orientation-warning{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-color);z-index:1000;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff}.warning-icon{font-size:80px;margin-bottom:20px;color:var(--primary-color);animation:rotate-icon 2s infinite linear}@keyframes rotate-icon{0%{transform:rotate(0)}to{transform:rotate(-90deg)}}@media screen and (orientation:portrait){#orientation-warning{display:flex}#ui-layer>*:not(#orientation-warning){display:none}}