/* Claude Invaders - Pixel Perfect CSS */

@font-face {
    font-family: 'PressStart2P';
    src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
}

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

body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'PressStart2P', monospace;
    padding: 12px;
    overflow: auto;
}

#game-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(672px, calc(100vw - 24px));
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#score-panel {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
}

.score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.score-item .label {
    color: #fff;
    font-size: 14px;
}

.score-item .value {
    color: #0f0;
    font-size: 16px;
}

#game-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 8;
    border: 2px solid #0f0;
    background-color: #000;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#lives-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    color: #0f0;
    font-size: 14px;
}

#lives-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

#lives-icons {
    display: flex;
    gap: 5px;
}

.life-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#powerup-display {
    display: flex;
    gap: 15px;
    font-size: 10px;
    font-family: 'PressStart2P', monospace;
}

/* Overlays */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.overlay.hidden {
    display: none;
}

.menu {
    text-align: center;
    color: #fff;
}

.menu h1 {
    font-size: clamp(24px, 4vw, 32px);
    color: #0f0;
    margin-bottom: 40px;
    text-shadow: 0 0 10px #0f0;
}

.menu p {
    font-size: clamp(11px, 2vw, 14px);
    margin: 20px 0;
}

.score-table {
    margin: 30px 0;
    text-align: left;
    display: inline-block;
    min-height: 150px;
}

.score-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
    font-size: clamp(10px, 2vw, 14px);
}

.sprite-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.score-text {
    color: #fff;
    font-family: 'PressStart2P', monospace;
}

.instructions {
    margin: 25px 0;
    text-align: center;
}

.instruction-line {
    color: #0f0;
    font-size: clamp(8px, 1.8vw, 10px);
    margin: 8px 0;
    font-family: 'PressStart2P', monospace;
}

.mystery {
    color: #f00;
    font-size: 20px;
}

.invader {
    width: 24px;
    height: 16px;
    display: inline-block;
}

.invader.squid {
    background-color: #fff;
    clip-path: polygon(
        40% 0%, 60% 0%, 60% 20%, 80% 20%, 80% 40%,
        100% 40%, 100% 60%, 80% 60%, 80% 80%, 60% 80%,
        60% 100%, 40% 100%, 40% 80%, 20% 80%, 20% 60%,
        0% 60%, 0% 40%, 20% 40%, 20% 20%, 40% 20%
    );
}

.invader.crab {
    background-color: #fff;
    clip-path: polygon(
        20% 0%, 80% 0%, 80% 20%, 100% 20%, 100% 60%,
        80% 60%, 80% 80%, 60% 80%, 60% 100%, 40% 100%,
        40% 80%, 20% 80%, 20% 60%, 0% 60%, 0% 20%, 20% 20%
    );
}

.invader.octopus {
    background-color: #fff;
    clip-path: polygon(
        30% 0%, 70% 0%, 70% 30%, 100% 30%, 100% 70%,
        70% 70%, 70% 100%, 30% 100%, 30% 70%, 0% 70%,
        0% 30%, 30% 30%
    );
}

.blink {
    animation: blink 1s infinite;
}

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

/* Scanline effect for CRT feel */
#game-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
}

@media (max-width: 720px) {
    body {
        align-items: flex-start;
        min-height: 100dvh;
        padding: 8px;
    }

    #game-container {
        width: min(672px, calc(100vw - 16px));
    }

    #score-panel,
    #lives-panel {
        padding: 8px 10px;
    }

    #score-panel {
        font-size: 12px;
    }

    .score-item .label {
        font-size: 10px;
    }

    .score-item .value {
        font-size: 12px;
    }

    #lives-panel {
        font-size: 10px;
    }

    #powerup-display {
        gap: 8px;
        font-size: 8px;
    }

    .menu {
        width: min(94vw, 680px);
    }
}

@media (max-height: 880px) {
    body {
        align-items: flex-start;
        min-height: 100dvh;
    }
}