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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: #000;
    font-family: 'Press Start 2P', monospace;
    cursor: none;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    height: 100dvh;
}

#game-wrapper {
    position: relative;
    width: min(100vw, 100vh);
    height: min(100vw, 100vh);
    overflow: hidden;
    flex-shrink: 0;
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
}

canvas:not(#radar) {
    display: block;
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Pixelated overlay */
#pixel-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 95;
    background:
        repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
}

/* HUD */
#hud {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* Crosshair */
#crosshair {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    image-rendering: pixelated;
    transition: filter 0.1s;
}

#crosshair svg {
    width: 48px; height: 48px;
    filter: drop-shadow(0 0 8px #0ff);
}

#crosshair.hit svg {
    filter: drop-shadow(0 0 12px #f00);
}

#crosshair.hit svg rect {
    fill: #f00;
}

/* Cockpit */
#cockpit {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none;
}

#cockpit > img {
    width: 100%; height: auto;
    display: block;
}

#cockpit-hud {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.cockpit-gauge {
    position: absolute;
    width: 15%; aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cockpit-gauge.left {
    left: 10%; bottom: 40%;
    transform: translateY(50%);
}

.cockpit-gauge.right {
    right: 10%; bottom: 40%;
    transform: translateY(50%);
}

#life-bar, #boost-bar {
    width: 100%; height: 100%;
    object-fit: contain;
}

.cockpit-gauge.center {
    width: 30%;
    aspect-ratio: 444 / 224;
    left: 50%; bottom: 40%;
    transform: translate(-50%, 50%);
}

#score-bar {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* Cockpit labels - all on same line */
.cockpit-label {
    position: absolute;
    bottom: 8%;
    font-size: clamp(8px, 1.5vw, 12px);
    color: #fff;
    letter-spacing: 3px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 0 #000;
    text-align: center;
}

#label-life {
    left: 10%;
    width: 15%;
}

#label-score {
    left: 50%;
    transform: translateX(-50%);
}

#label-stamina {
    right: 10%;
    width: 15%;
}

#score {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #000;
    text-shadow: none;
}

/* Enemy Counter */
#enemy-container {
    position: absolute;
    top: 20px; right: 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 4px solid #f0f;
    padding: 12px 16px;
}

#enemy-label {
    font-size: 8px;
    color: #f0f;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

#wave-number {
    color: #ff0;
}

#enemies {
    font-size: 16px;
    color: #fff;
    text-shadow: 4px 4px 0 #808;
}

/* Controls hint - desktop only */
#controls {
    position: absolute;
    top: calc(50% - 50px); left: 15px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 7px;
    color: #888;
    letter-spacing: 1px;
    z-index: 101;
    pointer-events: none;
    opacity: 0.6;
}

#controls .key {
    color: #0ff;
}

/* Warning */
#warning {
    position: absolute;
    top: 15%; left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #f00;
    opacity: 0;
    text-shadow: 2px 2px 0 #800;
    letter-spacing: 3px;
    white-space: nowrap;
}

#warning.active {
    animation: blink16 0.3s infinite;
}

/* Planet collision warning */
#planet-warning {
    position: absolute;
    top: 60%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #ff4400;
    opacity: 0;
    text-shadow: 2px 2px 0 #800, 0 0 15px #f00;
    pointer-events: none;
    z-index: 102;
    letter-spacing: 3px;
}

#planet-warning.active {
    animation: blink16 0.2s infinite;
}

@keyframes blink16 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* Cannon indicators */
.cannon-indicator {
    position: absolute;
    bottom: 25%;
    width: 10px; height: 40px;
    background: #0ff;
    opacity: 0.3;
    transition: opacity 0.1s, box-shadow 0.1s;
}

.cannon-indicator.left {
    left: 15%;
    transform: skewX(-15deg);
}

.cannon-indicator.right {
    right: 15%;
    transform: skewX(15deg);
}

.cannon-indicator.firing {
    opacity: 1;
    box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

/* ==================== RADAR ==================== */
#radar-container {
    position: absolute;
    top: 20px; left: 20px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

#radar {
    position: static;
    width: 120px; height: 120px;
    border-radius: 50%;
    clip-path: circle(50%);
    border: 2px solid #0f04;
    image-rendering: pixelated;
    transition: width 0.3s, height 0.3s;
}

#radar-container.fullscreen {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

#radar-container.fullscreen #radar {
    width: 500px; height: 500px;
    border: 3px solid #0f08;
}

/* ==================== HUD LABELS ==================== */
.hud-label {
    font-size: 7px;
    color: #0ff;
    letter-spacing: 2px;
    margin-top: 6px;
    text-shadow: 0 0 5px #0ff;
    text-align: center;
}

.hud-sublabel {
    font-size: 6px;
    color: #888;
    letter-spacing: 1px;
    margin-top: 4px;
    text-align: center;
}

/* Combo label */
#combo-container {
    position: absolute;
    top: 15%; right: 30px;
    z-index: 101;
    pointer-events: none;
    text-align: center;
}

#combo-container .combo-label {
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 6px;
    color: #ff0;
    text-shadow: 0 0 5px #ff0;
    margin-bottom: 4px;
}

#combo-container:has(#combo-display.active) .combo-label {
    opacity: 1;
}

/* ==================== WAVE DISPLAY ==================== */
#wave-display {
    position: absolute;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 36px;
    color: #0ff;
    text-shadow: 4px 4px 0 #008, 0 0 30px #0ff;
    opacity: 0;
    pointer-events: none;
    z-index: 102;
    transition: opacity 0.3s, transform 0.3s;
}

#wave-display.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: wavePulse 2.5s ease-out forwards;
}

@keyframes wavePulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    30% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ==================== COMBO DISPLAY ==================== */
#combo-display {
    font-size: 20px;
    color: #ff0;
    text-shadow: 3px 3px 0 #880, 0 0 15px #ff0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

#combo-display.active {
    opacity: 1;
    animation: comboPulse 0.3s ease-out;
}

@keyframes comboPulse {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* ==================== FLOATING SCORES ==================== */
#floating-scores {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 101;
    overflow: hidden;
}

.floating-score {
    position: absolute;
    font-size: 10px;
    color: #ff0;
    text-shadow: 2px 2px 0 #880;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-60px); }
}

/* ==================== POWER-UP INDICATORS ==================== */
#power-up-indicators {
    position: absolute;
    left: 50%; bottom: 35%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 101;
    pointer-events: none;
}

.pu-indicator {
    font-size: 8px;
    padding: 4px 8px;
    border: 2px solid;
    background: rgba(0, 0, 0, 0.7);
    animation: blink16 1s infinite;
}

.pu-indicator.damage {
    color: #f00;
    border-color: #f00;
}

.pu-indicator.rapid {
    color: #ff0;
    border-color: #ff0;
}

.pu-indicator.shield {
    color: #fff;
    border-color: #fff;
}

/* ==================== START SCREEN ==================== */
#start-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    cursor: pointer;
}

#start-screen h1 {
    font-size: 32px;
    color: #0ff;
    text-shadow: 4px 4px 0 #008, 8px 8px 0 #004;
    letter-spacing: 4px;
    margin-bottom: 20px;
    animation: pulse16 1s infinite;
}

#start-screen .subtitle {
    font-size: 12px;
    color: #f0f;
    text-shadow: 2px 2px 0 #808;
    margin-bottom: 30px;
}

#start-screen p {
    font-size: 10px;
    color: #fff;
    animation: blink16 1s infinite;
}

@keyframes pulse16 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==================== GAME OVER ==================== */
#game-over {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    cursor: pointer;
}

#game-over h1 {
    font-size: 32px;
    color: #f00;
    text-shadow: 4px 4px 0 #800;
    margin-bottom: 20px;
}

#game-over .final-score {
    font-size: 16px;
    color: #ff0;
    margin-bottom: 8px;
}

#game-over .final-wave {
    font-size: 12px;
    color: #0ff;
    margin-bottom: 20px;
}

#game-over p {
    font-size: 10px;
    color: #fff;
    animation: blink16 1s infinite;
}

/* ==================== PAUSE SCREEN ==================== */
#pause-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    cursor: pointer;
    pointer-events: auto;
}

#pause-screen h1 {
    font-size: 32px;
    color: #0ff;
    text-shadow: 4px 4px 0 #008;
    margin-bottom: 40px;
    animation: pulse16 1s infinite;
}

#pause-screen p {
    font-size: 10px;
    color: #fff;
    animation: blink16 1s infinite;
}

/* ==================== HIGH SCORES ==================== */
.high-scores {
    margin: 20px 0;
    text-align: center;
}

.hs-title {
    font-size: 10px;
    color: #f0f;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.hs-row {
    font-size: 8px;
    color: #888;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.hs-rank {
    color: #666;
    min-width: 20px;
}

.hs-score {
    color: #ff0;
    min-width: 60px;
}

.hs-wave {
    color: #0ff;
    min-width: 30px;
}

.hs-empty {
    font-size: 8px;
    color: #444;
}

/* ==================== HIT FLASH ==================== */
#hit-flash {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    z-index: 97;
    transition: opacity 0.1s;
}

#hit-flash.active {
    opacity: 1;
}

#hit-flash.planet-blink {
    animation: planetRedBlink 0.25s infinite;
}

@keyframes planetRedBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.35; }
}

/* ==================== CRACK OVERLAY ==================== */
#crack-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 98;
    overflow: hidden;
}

#crack-overlay img {
    position: absolute;
    image-rendering: pixelated;
    opacity: 0.7;
}

/* ==================== TOUCH CONTROLS ==================== */
#touch-controls {
    display: none;
    width: 100%;
    flex: 1;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    background: #111;
    border-top: 3px solid #333;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Joysticks */
#touch-left, #touch-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.joystick {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid #0ff4;
    position: relative;
    touch-action: none;
}

.joystick-knob {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0ff8;
    border: 2px solid #0ff;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: background 0.1s;
}

.joystick.active .joystick-knob {
    background: #0ffc;
    box-shadow: 0 0 15px #0ff;
}

.joystick-label {
    font-size: 6px;
    color: #0ff8;
    letter-spacing: 2px;
}

/* Center - Action buttons */
#touch-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Action buttons */
#touch-right {
    gap: 6px;
}

.action-btn {
    border-radius: 50%;
    font-family: 'Press Start 2P', monospace;
    cursor: pointer;
    touch-action: none;
    font-weight: bold;
}

.action-btn.fire {
    width: 80px;
    height: 80px;
    background: #300;
    border: 4px solid #f00;
    color: #f00;
    font-size: 10px;
    text-shadow: 0 0 8px #f00;
}

.action-btn.fire:active, .action-btn.fire.pressed {
    background: #f00;
    color: #fff;
    box-shadow: 0 0 25px #f00;
}

.action-btn.boost {
    width: 64px;
    height: 64px;
    background: #003;
    border: 4px solid #00f;
    color: #44f;
    font-size: 8px;
    text-shadow: 0 0 8px #00f;
}

.action-btn.boost:active, .action-btn.boost.pressed {
    background: #00f;
    color: #fff;
    box-shadow: 0 0 25px #00f;
}

/* Show touch controls on touch devices */
@media (hover: none) and (pointer: coarse) {
    #touch-controls {
        display: flex;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    #game-wrapper {
        width: min(100vw, calc(100dvh - 180px));
        height: min(100vw, calc(100dvh - 180px));
    }
    #crosshair {
        display: none;
    }
    #controls {
        display: none;
    }
    body {
        cursor: default;
        background: #3B3B3B;
    }
    #start-screen, #game-over, #pause-screen {
        cursor: default;
    }
    /* Adaptive joysticks */
    .joystick {
        width: min(120px, 28vw);
        height: min(120px, 28vw);
    }
    .joystick-knob {
        width: min(44px, 10vw);
        height: min(44px, 10vw);
    }
    .action-btn.fire {
        width: min(80px, 18vw);
        height: min(80px, 18vw);
        font-size: clamp(7px, 2.2vw, 10px);
    }
    .action-btn.boost {
        width: min(64px, 15vw);
        height: min(64px, 15vw);
        font-size: clamp(6px, 1.8vw, 8px);
    }
    /* Power-up indicators mobile */
    #power-up-indicators {
        bottom: 25%;
    }
    /* Floating scores relative */
    .floating-score {
        font-size: clamp(7px, 2.5vw, 10px);
    }
    /* Responsive text */
    .cockpit-label {
        font-size: 2vw;
        letter-spacing: 1px;
        bottom: 5%;
    }
    #score {
        font-size: 5vw;
    }
    #start-screen h1 {
        font-size: 6vw;
        letter-spacing: 2px;
        text-align: center;
    }
    #start-screen .subtitle {
        font-size: 2.5vw;
    }
    #start-screen p {
        font-size: 2.5vw;
    }
    #game-over h1 {
        font-size: 6vw;
    }
    #game-over .final-score {
        font-size: 3.5vw;
    }
    #game-over .final-wave {
        font-size: 3vw;
    }
    #game-over p {
        font-size: 2.5vw;
    }
    #pause-screen h1 {
        font-size: 6vw;
    }
    #pause-screen p {
        font-size: 2.5vw;
    }
    #enemy-container {
        padding: 6px 8px;
    }
    #enemies {
        font-size: 4vw;
    }
    #enemy-label {
        font-size: 1.8vw;
    }
    .hud-sublabel {
        font-size: 1.5vw;
    }
    .high-scores {
        transform: scale(0.8);
    }
    /* Radar smaller on mobile */
    #radar {
        width: 80px; height: 80px;
    }
    #radar-container {
        top: 10px; left: 10px;
    }
    .hud-label {
        font-size: 5px;
    }
    /* Warning responsive */
    #warning {
        font-size: 2vw;
    }
    /* Wave text single line centered */
    #wave-display {
        white-space: nowrap;
        text-align: center;
        font-size: clamp(16px, 6vw, 36px);
    }
}

/* Landscape mobile */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    body {
        flex-direction: row;
        justify-content: center;
    }
    #game-wrapper {
        width: 100dvh;
        height: 100dvh;
        order: 0;
    }
    #touch-controls {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100dvh;
        padding: 0;
        background: none;
        border: none;
        pointer-events: none;
        z-index: 200;
    }
    #touch-controls > * {
        pointer-events: auto;
    }
    /* Look joystick -> LEFT side */
    #touch-right {
        position: absolute;
        left: max(10px, env(safe-area-inset-left));
        bottom: 15px;
    }
    /* Move joystick -> RIGHT side */
    #touch-left {
        position: absolute;
        right: max(10px, env(safe-area-inset-right));
        bottom: 15px;
        left: auto;
    }
    /* Split buttons to each side */
    #touch-center {
        display: contents;
    }
    .action-btn.fire {
        position: fixed;
        left: max(15px, env(safe-area-inset-left));
        top: 15px;
        width: min(64px, 14vh);
        height: min(64px, 14vh);
    }
    .action-btn.boost {
        position: fixed;
        right: max(15px, env(safe-area-inset-right));
        top: 15px;
        width: min(52px, 12vh);
        height: min(52px, 12vh);
    }
    .joystick {
        width: min(100px, 20vh);
        height: min(100px, 20vh);
    }
    .joystick-knob {
        width: min(38px, 8vh);
        height: min(38px, 8vh);
    }
}

/* Tablet */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    .joystick {
        width: 140px;
        height: 140px;
    }
    .joystick-knob {
        width: 52px;
        height: 52px;
    }
    .action-btn.fire {
        width: 90px;
        height: 90px;
        font-size: 11px;
    }
    .action-btn.boost {
        width: 72px;
        height: 72px;
        font-size: 9px;
    }
    #radar {
        width: 100px; height: 100px;
    }
    .cockpit-label {
        font-size: 1.2vw;
    }
    #score {
        font-size: 3vw;
    }
}

/* CRT Effect */
#crt {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 96;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
}