:root{--bg-color:#050510;--grid-sea:#0a0a20;--grid-land:#00ffcc;--grid-trail:#ff00ff;--text-color:#e0e0e0;--ui-bg:rgba(10, 10, 30, 0.85);--accent:#00ffcc;--danger:#ff0055}*{box-sizing:border-box}body{margin:0;overflow:hidden;background-color:var(--bg-color);font-family:Rajdhani,sans-serif;color:var(--text-color);display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh}#main-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}#game-container{position:relative;box-shadow:0 0 50px rgba(0,255,204,.1);border:1px solid rgba(0,255,204,.3);width:100%;max-width:min(1200px,calc((100vh - 180px) * 1.6));max-height:calc(100vh - 180px);aspect-ratio:40/25;margin:0 auto}canvas{display:block;background-color:var(--grid-sea);width:100%;height:100%}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#hud-bar{display:flex;gap:40px;background:var(--ui-bg);padding:10px 40px;border:1px solid var(--accent);border-radius:8px;box-shadow:0 0 15px rgba(0,255,204,.2);margin-bottom:20px}.hud-item{font-family:Orbitron,sans-serif;font-size:1.5rem;display:flex;gap:10px;align-items:center}.hud-item .label{color:#888;font-size:1rem}.hud-item .value{color:var(--accent);font-weight:700;text-shadow:0 0 10px var(--accent)}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);transition:opacity .3s ease;pointer-events:auto}.hidden{opacity:0;pointer-events:none}h1{font-family:Orbitron,sans-serif;font-size:4rem;margin-bottom:20px;background:linear-gradient(to bottom,#fff,#aaa);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px var(--accent)}button{background:0 0;border:2px solid var(--accent);color:var(--accent);padding:15px 40px;font-family:Orbitron,sans-serif;font-size:1.5rem;cursor:pointer;transition:all .2s;text-transform:uppercase;box-shadow:0 0 15px rgba(0,255,204,.2)}button:hover{background:var(--accent);color:#000;box-shadow:0 0 30px rgba(0,255,204,.6)}#footer{margin-top:20px;text-align:center;z-index:100;pointer-events:auto}#footer a{color:var(--accent);text-decoration:none;font-family:Rajdhani,sans-serif;font-size:1.2rem;text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 5px rgba(0,255,204,.5);transition:all .3s ease;border-bottom:1px solid transparent}#footer a:hover{color:#fff;text-shadow:0 0 15px var(--accent);letter-spacing:2px;border-bottom:1px solid var(--accent)}#version{position:fixed;bottom:10px;right:15px;font-family:Rajdhani,sans-serif;color:var(--text-color);opacity:.3;font-size:.8rem;pointer-events:none;z-index:50}#controls{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:20px;z-index:20}.dpad-row{display:flex;gap:10px}.dpad-btn{width:60px;height:60px;font-size:1.5rem;padding:0;display:flex;justify-content:center;align-items:center;background:rgba(0,255,204,.1);border:1px solid var(--accent);color:var(--accent);border-radius:50%;touch-action:manipulation}.dpad-btn:active{background:var(--accent);color:#000}@media (max-width:1000px),(pointer:coarse){#controls{display:flex}canvas{max-width:100%;height:auto}#game-container{width:100%;max-width:100vw}}@media (max-width:768px){h1{font-size:2.5rem;margin-bottom:15px}#hud-bar{padding:5px 15px;gap:15px;margin-bottom:10px;width:95%;justify-content:space-between}.hud-item{font-size:1rem;gap:5px;flex-direction:column;align-items:flex-start}.hud-item .label{font-size:.7rem}.overlay p{font-size:1rem;padding:0 20px;text-align:center}button{padding:12px 30px;font-size:1.2rem}#footer{display:none}}