.poker-controls .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.poker-controls .button-group .primary,
.poker-controls .button-group .secondary {
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.55rem 0.9rem;
    border-width: 1px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.poker-controls .button-group .poker-controls__button--icon {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.poker-controls__button-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

.poker-controls .button-group .primary {
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pico-card-background-color) 80%, var(--pico-primary) 20%) 0%,
        color-mix(in srgb, var(--pico-card-background-color) 68%, var(--pico-primary) 32%) 100%
    );
    border-color: color-mix(in srgb, var(--pico-primary) 45%, var(--pico-muted-border-color));
    color: var(--pico-color);
}

.poker-controls .button-group .secondary {
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pico-card-background-color) 86%, var(--pico-muted-border-color)) 0%,
        color-mix(in srgb, var(--pico-card-background-color) 74%, var(--pico-muted-border-color)) 100%
    );
    border-color: var(--pico-muted-border-color);
    color: var(--pico-color);
}

.poker-controls .button-group .poker-controls__danger {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--rf-poker-danger-a) 18%, var(--pico-card-background-color)) 0%,
        color-mix(in srgb, var(--rf-poker-danger-b) 20%, var(--pico-card-background-color)) 100%
    );
    border-color: color-mix(in srgb, var(--rf-poker-danger-border) 48%, var(--pico-muted-border-color));
    color: color-mix(in srgb, var(--rf-color-white) 92%, var(--pico-color));
}

.poker-controls .button-group .poker-controls__danger:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--rf-poker-danger-hover-a) 24%, var(--pico-card-background-color)) 0%,
        color-mix(in srgb, var(--rf-poker-danger-hover-b) 30%, var(--pico-card-background-color)) 100%
    );
    border-color: color-mix(in srgb, var(--rf-poker-danger-hover-border) 62%, var(--pico-muted-border-color));
}

.poker-controls .button-group .poker-controls__danger:active {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--rf-poker-danger-active-a) 26%, var(--pico-card-background-color)) 0%,
        color-mix(in srgb, var(--rf-poker-danger-active-b) 34%, var(--pico-card-background-color)) 100%
    );
}

[data-theme="light"] .poker-nav button.poker-nav__button,
[data-theme="light"] .poker-nav input.poker-nav__button,
[data-theme="light"] .poker-play-controls button.poker-nav__button,
[data-theme="light"] .poker-play-controls input.poker-nav__button,
[data-theme="light"] .poker-controls .button-group .primary,
[data-theme="light"] .poker-controls .button-group .secondary {
    color: var(--rf-poker-light-button-primary-text);
    background: var(--rf-poker-light-button-surface);
    border-color: var(--rf-poker-light-button-primary-border);
}

[data-theme="light"] .poker-nav button.poker-nav__button,
[data-theme="light"] .poker-nav input.poker-nav__button,
[data-theme="light"] .poker-play-controls button.poker-nav__button,
[data-theme="light"] .poker-play-controls input.poker-nav__button,
[data-theme="light"] .poker-controls .button-group .primary {
    color: var(--rf-poker-light-button-primary-text);
    background: var(--rf-poker-light-button-surface);
    border-color: var(--rf-poker-light-button-primary-border);
}

[data-theme="light"] .poker-nav button.poker-nav__button:hover,
[data-theme="light"] .poker-nav input.poker-nav__button:hover,
[data-theme="light"] .poker-play-controls button.poker-nav__button:hover,
[data-theme="light"] .poker-play-controls input.poker-nav__button:hover,
[data-theme="light"] .poker-controls .button-group .primary:hover {
    background: var(--rf-poker-light-button-primary-hover-surface);
    border-color: var(--rf-poker-light-button-primary-border);
}

[data-theme="light"] .poker-nav button.poker-nav__button:active,
[data-theme="light"] .poker-nav input.poker-nav__button:active,
[data-theme="light"] .poker-play-controls button.poker-nav__button:active,
[data-theme="light"] .poker-play-controls input.poker-nav__button:active,
[data-theme="light"] .poker-controls .button-group .primary:active {
    background: var(--rf-poker-light-button-primary-active-surface);
    border-color: var(--rf-poker-light-button-primary-border);
}

[data-theme="light"] .poker-controls .button-group .secondary {
    color: var(--rf-poker-light-button-secondary-text);
    background: var(--rf-poker-light-button-surface);
    border-color: var(--rf-poker-light-button-secondary-border);
}

[data-theme="light"] .poker-controls .button-group .secondary:hover {
    background: var(--rf-poker-light-button-secondary-hover-surface);
    border-color: var(--rf-poker-light-button-secondary-border);
}

[data-theme="light"] .poker-controls .button-group .secondary:active {
    background: var(--rf-poker-light-button-secondary-active-surface);
    border-color: var(--rf-poker-light-button-secondary-border);
}

[data-theme="light"] .poker-controls .button-group .poker-controls__danger {
    color: var(--rf-poker-light-button-danger-text);
    background: var(--rf-poker-light-button-surface);
    border-color: var(--rf-poker-light-button-danger-border);
}

[data-theme="light"] .poker-controls .button-group .poker-controls__danger:hover {
    background: var(--rf-poker-light-button-danger-hover-surface);
    border-color: var(--rf-poker-light-button-danger-border);
}

[data-theme="light"] .poker-controls .button-group .poker-controls__danger:active {
    background: var(--rf-poker-light-button-danger-active-surface);
    border-color: var(--rf-poker-light-button-danger-border);
}

[data-theme="light"] .poker-nav__button-icon,
[data-theme="light"] .poker-controls__button-icon {
    color: currentColor;
}

.poker-controls .button-group .primary:hover,
.poker-controls .button-group .secondary:hover {
    transform: translateY(-1px);
}

.poker-name-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.poker-name-row input {
    flex: 1;
}