.wumpus-section { overflow: hidden; }

.wumpus-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}

.wumpus-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
}

.wumpus-online-badge {
    opacity: 0;
    transition: opacity 300ms ease;
}
.wumpus-online-badge[data-visible="true"] { opacity: 1; }
.wumpus-online-badge .badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-pixel);
    font-weight: 500;
    font-size: .78rem;
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--bs-success, #22c55e), #fff 25%);
    background: rgba(var(--bs-success-rgb, 34, 197, 94), .1);
    border: 1px solid color-mix(in srgb, var(--bs-success, #22c55e), transparent 45%);
    border-radius: 999px;
}

.wumpus-grid-title,
.wumpus-grid-text { margin: 0; }

@media (max-width: 991.98px) {
    /* Mobile hides the pixel divider, so add vertical padding to keep content
       clear of the pixel section transitions (top & bottom). */
    .wumpus-section { padding-block: 2.5rem; }

    .wumpus-grid {
        display: grid;
        grid-template-columns: 7fr 5fr;
        grid-template-areas:
            "title    title"
            "text     stage"
            "actions  actions";
        gap: 0.75rem 0.5rem;
        align-items: center;
    }
    .wumpus-grid-text-col { display: contents; }
    .wumpus-grid .pixel-section-divider { display: none; }
    .wumpus-grid-title    { grid-area: title; text-align: center; }
    .wumpus-grid-text     { grid-area: text; }
    .wumpus-grid-stage    { grid-area: stage; }
    .wumpus-grid-actions  { grid-area: actions; margin-top: 0.5rem; justify-content: center; }

    [data-wumpus-side="left"] .wumpus-grid {
        grid-template-areas:
            "title    title"
            "stage    text"
            "actions  actions";
    }
}

@media (min-width: 992px) {
    .wumpus-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        max-width: 960px;
        margin: 0 auto;
    }
    .wumpus-grid-text-col {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .wumpus-grid-text-col .wumpus-grid-actions { margin-top: 0.5rem; }
    [data-wumpus-side="left"] .wumpus-grid-text-col { order: 2; }
    [data-wumpus-side="left"] .wumpus-grid-stage    { order: 1; }
}