/*
 * Start menu: START / OPTION / RESET / EXIT over the dimmed board.
 *
 * Theme-neutral. Every surface here is drawn from tokens so a theme that cuts
 * no art of its own still gets a complete menu; the wood set swaps in its
 * panel, plank and cloud badge from css/themes/wood.css, and the futuristic
 * set chamfers these same boxes. Art belongs in the theme files, never here.
 */

#startMenu {
    position: absolute;
    inset: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    /* Set by StartMenu.setBackdrop once the world's background plate is known. */
    --start-backdrop: none;
}

#startMenu.is-hidden {
    display: none;
}

/*
 * The board sits behind the menu blurred and dimmed. It is a pseudo-element
 * rather than a background on #startMenu itself so the blur cannot reach the
 * panel and buttons stacked above it.
 */
#startMenu.has-backdrop::before {
    content: '';
    position: absolute;
    /* Overdrawn so the blur's soft edge never exposes the container behind. */
    inset: -40px;
    background-image: var(--start-backdrop);
    background-size: cover;
    background-position: center;
    filter: blur(7px) brightness(0.45) saturate(0.75);
}

.start-menu__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 40px 48px;
    min-width: 280px;
    border-radius: 16px;
    background: linear-gradient(var(--panel-top), var(--panel-bottom));
    border: 4px solid var(--edge);
    box-shadow: 0 12px 0 rgba(0, 0, 0, 0.25);
}

.start-menu__logo {
    text-align: center;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--logo-ink);
    text-shadow: 0 2px 0 #fff, 0 0 12px rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
}

.start-menu__button {
    padding: 14px 20px;
    border-radius: 8px;
    border: 3px solid var(--edge);
    background: linear-gradient(var(--surface-top), var(--surface-bottom));
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}

/* Restarting throws the save away, so it does not read as a peer of START. */
#startMenuResetButton {
    background: linear-gradient(var(--close-top), var(--close-bottom));
}

.start-menu__button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.start-menu__button:active {
    transform: translateY(1px);
    filter: brightness(0.96);
}

.start-menu__button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}