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

:root {
    --primary-yellow: #f8d800;
    --primary-orange: #f85800;
    --primary-red: #e80000;
    --primary-white: #ffffff;
    --primary-blue: #0078f8;
    --bg-color: #000;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--primary-white);
    font-family: 'Press Start 2P', cursive;
    background-color: var(--bg-color);
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000020; /* Dark deep ocean for letterboxing */
}

canvas {
    display: block;
    image-rendering: pixelated;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    touch-action: none;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through to canvas generally */
}

#score-board {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border: 2px solid var(--primary-white);
    border-radius: 4px;
}

.label {
    display: block;
    font-size: 10px;
    color: var(--primary-yellow);
    margin-bottom: 5px;
    text-shadow: 2px 2px 0 #000;
}

#distance-counter {
    font-size: 20px;
    color: var(--primary-white);
    text-shadow: 2px 2px 0 #000;
}

#hull-status {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 200px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border: 2px solid var(--primary-white);
    border-radius: 4px;
}

.bar-container {
    width: 100%;
    height: 20px;
    background-color: #444;
    border: 2px solid #fff;
}

#hull-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #00e000, #e0e000);
    transition: width 0.2s, background 0.2s;
}

#hull-bar.critical {
    background: linear-gradient(to right, #e00000, #ff8000);
    animation: flash 0.2s infinite;
}

@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Screens */
#start-screen, #game-over-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 100, 0.9);
    padding: 40px;
    border: 5px double var(--primary-yellow);
    border-radius: 10px;
    pointer-events: auto;
    width: 80%;
    max-width: 500px;
}

.hidden {
    display: none !important;
}

h1 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--primary-yellow);
    text-shadow: 4px 4px 0 var(--primary-orange);
    line-height: 1.5;
}

.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
}

button {
    background: var(--primary-red);
    color: var(--primary-white);
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    padding: 15px 30px;
    border: 4px solid var(--primary-white);
    cursor: pointer;
    box-shadow: 4px 4px 0 #800000;
    transition: transform 0.1s;
}

button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #000;
}

button:hover {
    background: #ff4040;
}

.controls-touch { display: none; }

@media (pointer: coarse) {
    .controls-desktop { display: none; }
    .controls-touch { display: block; }
}