/* ============================================================
   game-info-overflow.css — GameInfoOverflowMenu component stylesheet
   Token-driven, mirrors chat-bubble.css's overflow trigger/item treatment (design #10533
   decision 8's "same menu pattern"). Unlike ChatBubble's own menu, this one is NOT constrained to
   an overflow-y:auto scroller, so it is positioned absolutely under its trigger -- no in-flow /
   avatar-offset machinery is needed here. ADO #10567.
   ============================================================ */

.game-info-overflow {
    position: relative;
    flex: 0 0 auto;
}

/* Always-visible, low-emphasis trigger — not hover-only (design #10533 decision 8): a compliance
   control that only appears on hover is undiscoverable on touch and to low-vision users. */
.game-info-overflow-trigger {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--meb-text-muted, var(--meb-text-default));
    opacity: 0.62;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--meb-border-radius-sm);
    cursor: pointer;
}

.game-info-overflow-trigger:hover,
.game-info-overflow-trigger:focus-visible {
    opacity: 1;
    background: var(--meb-surface-input-filled);
}

.game-info-overflow-trigger:focus-visible {
    outline: var(--meb-focus-ring-width) solid var(--meb-accent-primary);
    outline-offset: var(--meb-focus-ring-offset);
}

/* Positioned under the trigger. The header this menu lives in is not clipped by an overflow:auto
   ancestor (unlike ChatBubble's chat scroller), so absolute positioning here carries none of the
   round-3/round-6 clipping history chat-bubble.css documents for the bubble menu. */
.game-info-overflow-menu {
    position: absolute;
    top: calc(100% + var(--meb-space-stack-xs));
    right: 0;
    /* Local stacking context only -- this menu never competes with a Modal/Dropdown's
       ModalStackService-managed z-index, only with the game board beneath the header. */
    z-index: 20;
    min-width: 12rem;
    width: max-content;
    padding: var(--meb-space-stack-xs);
    background: var(--meb-surface-card);
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    border-radius: var(--meb-border-radius-sm);
    box-shadow: var(--meb-shadow-dropdown, var(--meb-shadow-sm));
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-xs);
}

.game-info-overflow-item {
    appearance: none;
    border: none;
    background: transparent;
    text-align: left;
    width: 100%;
    min-height: 2.75rem;
    padding: var(--meb-space-stack-xs) var(--meb-space-inline-sm);
    border-radius: var(--meb-border-radius-sm);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-default);
    cursor: pointer;
}

.game-info-overflow-item:hover,
.game-info-overflow-item:focus-visible {
    background: var(--meb-surface-input-filled);
}

.game-info-overflow-item:focus-visible {
    outline: var(--meb-focus-ring-width) solid var(--meb-accent-primary);
    outline-offset: var(--meb-focus-ring-offset);
}

.game-info-overflow-item:disabled {
    opacity: 0.6;
    cursor: default;
}