body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    flex-direction: column;               /* stack logo + question box */
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ===== Logo ===== */
#logo {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    transition: all 0.1s ease;
    filter: blur(25px) contrast(1.2);
    transform: scale(0.55);
}

@media screen and (min-width: 1025px) {
    #logo { cursor: pointer; }
}

@media screen and (max-width: 1024px) {
    #logo { transition: all 0.3s ease; }
}

/* ===== Question box ===== */
#question-box {
    position: absolute;
    bottom: 20px;                         /* default: centred below logo */
    left: 50%;
    transform: translateX(-50%);

    /* Two‑column grid layout so boxes align */
    display: inline-grid;
    grid-template-columns: auto auto;     /* question spans both */
    column-gap: 1rem;
    row-gap: 0.01rem;

    backdrop-filter: blur(4px);
}

/* Hide when .hidden class applied (managed via JS) */
#question-box.hidden { display: none; }

/* ===== Question frame ===== */
.question {
    grid-column: 1 / span 2;              /* span both columns */
    padding: 1rem 0.5rem;               /* tighter vertical padding */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

/* ===== Option buttons ===== */
.option {
    padding: 0.5rem 1.25rem;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-align: center;
}

/* Fallback hover for non‑fine pointers */
.option:hover { background: #ddd; }

/* Desktop‑only colour hovers */
@media (hover: hover) and (pointer: fine) {
    #y-option:hover {
        background: #4caf50; /* green */
        border-color: #4caf50;
        color: #fff;
    }
    #n-option:hover {
        background: #ff9800; /* orange */
        border-color: #ff9800;
        color: #fff;
    }
}

/* ===== Landscape mobile adjustment (Option 1: side panel) ===== */
@media (orientation: landscape) and (pointer: coarse) {
    /* Split screen: logo left half, question box right half */
    body {
        flex-direction: row;      /* side‑by‑side */
        justify-content: center;
        align-items: center;
    }

    #logo {
        width: 50vw;              /* occupy left half */
        height: 100vh;
        object-fit: contain;
    }

    #question-box {
        position: static;         /* participate in flex layout */
        transform: none;          /* reset translate adjustments */
        margin-left: 1rem;        /* gap between logo and box */
        align-self: center;       /* vertical centering */
    }
}

/* ===== Utility ===== */
.hidden { display: none; }