/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #FFFFFF;
    font-family: monospace;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* Modular grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(12, 1fr);
    width: 100vw;
    height: 100vh;
    gap: 0;
    position: relative;
}

/* Grid item (each cell) */
.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Frog container - centered in the grid */
.frog-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}

/* Frog body - pixelated style */
.frog-body {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    position: relative;
    /* Pixelated effect */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Frog eyes */
.frog-eye {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #000000;
    border-radius: 50%;
    top: 20px;
}

.frog-eye:first-child {
    left: 15px;
}

.frog-eye:last-child {
    right: 15px;
}

/* Frog mouth */
.frog-mouth {
    position: absolute;
    width: 40px;
    height: 10px;
    background-color: #000000;
    bottom: 20px;
    left: 30px;
    border-radius: 0 0 5px 5px;
}

/* Additional grid lines for visual reference (optional) */
.grid-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* Ensure grid items are perfectly square with 1.333 aspect ratio */
.grid-item {
    aspect-ratio: 4/3;
}

/* For the visual effect of the "sinking" yacht, we'll add a class for it later */
.yacht {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.yacht-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 20px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.yacht-sail {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 50px;
    background-color: #FFFFFF;
}

.yacht-sail::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 20px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

/* Accept Entropy button - a single pixel */
.accept-entropy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
    background-color: #FFFFFF;
    animation: pulse 1.618s infinite;
}

@keyframes pulse {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}