/* Apply retro font to specific elements */
.font-retro {
    font-family: 'Press Start 2P', cursive;
}

/* Apply clean font for body */
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* Ensure white background */
    /* Tailwind handles text color, but you could set a default here if needed */
    /* color: #000000; */
}

/* Simple border style for retro feel */
.retro-border {
    border: 2px solid #000000;
}

/* Button hover effect for 'juice' */
.retro-button {
    transition: all 0.1s ease-in-out;
}

.retro-button:hover {
    transform: translate(2px, 2px);
    box-shadow: -2px -2px 0px 0px rgba(0,0,0,1);
}

.retro-button:active {
    transform: translate(0px, 0px);
    box-shadow: none;
}

 /* Style for placeholder images */
.placeholder-img {
    background-color: #e0e0e0; /* Light gray background */
    border: 1px dashed #a0a0a0; /* Dashed border */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 0.9rem;
    text-align: center;
    aspect-ratio: 16 / 9; /* Common screenshot aspect ratio */
    width: 100%;
    height: auto;
}

/* Add any other custom (non-Tailwind) styles below */