body {
    margin: 0;
    /* kill default browser margin */
    background: #800;
    /* Christmas red */
    color: white;
    font-family: system-ui, sans-serif;

    margin: 0 auto;
    max-width: 375px;
}

header {
    text-align: center;
}

a {
    color: white;
    text-decoration: none;
}

.grid {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin: 2rem auto;
    max-width: 375px;
    padding: 0 8px;
}

.tile {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 10px;
    color: white;
    padding: 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    aspect-ratio: 3 / 4;
}

a.tile {
    text-decoration: none;
}

.tile:hover {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 1.0);
    border-radius: 10px;
}

.tile.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.tile.today {
    border-color: white;
}

/* Optional: extra tweaks for really small screens */
@media (max-width: 480px) {
    .grid {
        gap: 4px;
        padding: 0 4px;
    }

    .tile {
        padding: 0.4rem;
        font-size: 0.8rem;
    }
}