.poker-play-header h3 {
    margin: 0;
    text-align: center;
}

.poker-play-header p {
    margin: 0.15rem 0 0;
    color: var(--pico-muted-color);
    font-size: 0.9rem;
    text-align: center;
}

.poker-values {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(0.35rem, 0.7vw, 0.55rem);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    perspective: 900px;
}

.poker-values button {
    min-width: 0;
    width: 100%;
}

.poker-values form {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.poker-seat form {
    margin: 0;
}

.poker-card {
    --card-translate: translateY(10px);
    --card-tilt: rotate(-1deg);
    --card-flip: rotateY(0deg);
    --poker-card-ratio: 2 / 2.8;
    width: 100%;
    height: auto;
    aspect-ratio: var(--poker-card-ratio);
    padding: 0;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 85%, transparent);
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pico-muted-border-color) 35%, transparent);
    font-weight: 700;
    font-size: clamp(0.9rem, 2.2vh, 1.15rem);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    transform: var(--card-translate) var(--card-tilt) var(--card-flip);
    opacity: 0.6;
    color: var(--pico-color);
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
}

.poker-card__face {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    display: grid;
    place-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

.poker-card__face--front {
    background: var(--pico-card-background-color);
    transform: rotateY(0deg) translateZ(0.01px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pico-muted-border-color) 35%, transparent);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 2;
}

[data-theme="light"] .poker-card .poker-card__face--front {
    color: var(--rf-poker-light-button-text);
}

.poker-card__face--back {
    position: relative;
    background: var(--poker-card-back, var(--pico-card-background-color));
    transform: rotateY(180deg) translateZ(0.01px);
    box-shadow: inset 0 0 0 1px var(--poker-card-back-border, var(--pico-muted-border-color));
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.poker-card__face--back::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--poker-card-back-border, var(--pico-muted-border-color)) 70%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--poker-card-back-border, var(--pico-muted-border-color)) 35%, transparent);
    opacity: 0.9;
}


.poker-card__value {
    line-height: 1;
}

.poker-card.is-dealt {
    --card-translate: translateY(0);
    --card-tilt: rotate(0deg);
    opacity: 1;
    transition-delay: var(--deal-delay, 0ms);
}

.poker-card:hover:not(:disabled) {
    --card-translate: translateY(-4px);
}

.poker-card.is-face-down {
    --card-flip: rotateY(180deg);
    transition: transform 0.65s cubic-bezier(0.25, 0.7, 0.15, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--poker-card-back, var(--pico-card-background-color));
    border-color: var(--poker-card-back-border, var(--pico-muted-border-color));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--poker-card-back-border, var(--pico-muted-border-color)) 60%, transparent);
}

.poker-card.is-flip-transition {
    transition: transform 0.65s cubic-bezier(0.25, 0.7, 0.15, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.poker-card.is-no-flip-transition {
    transition: none !important;
}

.poker-card.is-face-down .poker-card__face--front {
    opacity: 0;
    z-index: 1;
}

.poker-card.is-face-down .poker-card__face--back {
    opacity: 1;
    z-index: 2;
}

.poker-card:disabled {
    cursor: not-allowed;
}

.poker-card.is-selected {
    border-color: var(--pico-primary);
    color: var(--pico-primary-inverse, var(--pico-color));
}

.poker-card.is-selected .poker-card__face--front {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse, var(--pico-color));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pico-primary) 35%, transparent);
}

.poker-card.is-selected:hover .poker-card__face--front,
.poker-card.is-selected:focus .poker-card__face--front {
    background: var(--pico-primary);
}

.poker-card--clear {
    border: 1px dashed var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    font-weight: 600;
}

.poker-card--clear .poker-card__face--front {
    background: transparent;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .poker-card {
        transition: none;
    }
}