@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    margin: 0; padding: 0; background: #000; color: #fff;
    font-family: 'Press Start 2P', cursive;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden; touch-action: none;
}

#game-container { 
    display: flex; flex-direction: column; align-items: center; 
    width: 100%; max-width: 400px; position: relative;
}

#ui-layer { display: flex; justify-content: space-between; width: 95%; padding: 10px 0; font-size: 10px; color: #FFFF00; }

canvas { width: 95%; height: auto; background: #000; border: 3px solid #1a1aeb; image-rendering: pixelated; }

#mobile-controls {
    display: grid; grid-template-columns: 60px 60px 60px; grid-template-rows: 60px 60px 60px;
    gap: 10px; justify-content: center; align-items: center; margin-top: 20px; width: 100%;
}

#ctrl-up { grid-column: 2; grid-row: 1; }
#ctrl-left { grid-column: 1; grid-row: 2; }
#ctrl-right { grid-column: 3; grid-row: 2; }
#ctrl-down { grid-column: 2; grid-row: 3; }

.d-btn {
    width: 100%; height: 100%; background: #222; border: 2px solid #F4D03F;
    color: #F4D03F; font-size: 24px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; user-select: none;
    -webkit-tap-highlight-color: transparent; cursor: pointer;
}

.d-btn:active { background: #F4D03F; color: #000; }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 10;
}

#start-btn { 
    font-family: 'Press Start 2P', cursive; padding: 15px 30px; 
    background: #F4D03F; border: none; cursor: pointer; font-size: 14px;
}

@media (min-width: 769px) { #mobile-controls { display: none; } }