/* Obsidian — Discord widget (Wumpus stage) */

.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;
}

/* Online-count badge — hidden until JS confirms data is loaded */
.wumpus-online-badge {
    opacity: 0;
    transition: opacity 300ms ease;
}

.wumpus-online-badge[data-visible="true"] {
    opacity: 1;
}

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

/* Mobile (default): text-col is unwrapped via display:contents so its children
   participate directly in the 3-row grid (title full / text+stage / actions full). */
@media (max-width: 991.98px) {
    .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-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";
    }
}

/* Desktop (lg+): the text-col is a tight flex stack in a single grid cell.
   Stage occupies the other cell. */
@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; }
}