/* Shared large-denomination chip selector. Artwork is supplied, not recreated. */
.shared-chip-selector {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.shared-chip-selector .shared-chip-tray {
    display: flex !important;
    grid-template-columns: none !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 8px 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 211, 77, .72) rgba(0, 24, 18, .55);
    -webkit-overflow-scrolling: touch;
}

.shared-chip-selector .shared-chip-tray.waiting-for-side {
    opacity: 1 !important;
    filter: none !important;
}

.shared-chip-tray > .chip-option,
.shared-chip-selector .shared-chip-tray > .chip-option {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    /* Chips scale with the screen: large and easy to hit on a desktop
       table, still compact enough for a phone. */
    flex: 0 0 clamp(66px, 6.4vw, 104px) !important;
    width: clamp(66px, 6.4vw, 104px) !important;
    min-width: clamp(66px, 6.4vw, 104px) !important;
    max-width: clamp(66px, 6.4vw, 104px) !important;
    height: clamp(66px, 6.4vw, 104px) !important;
    min-height: clamp(66px, 6.4vw, 104px) !important;
    max-height: clamp(66px, 6.4vw, 104px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    color: inherit !important;
    cursor: pointer;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: translateY(0) scale(1);
    transform-origin: center;
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
    touch-action: manipulation;
}

.shared-chip-tray > .chip-option img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none;
    user-select: none;
}

.shared-chip-tray > .chip-option.active,
.shared-chip-tray > .chip-option[aria-pressed="true"] {
    transform: translateY(-3px) scale(1.07) !important;
    box-shadow: 0 0 0 2px #ffd34d, 0 0 15px 4px rgba(255, 204, 47, .8) !important;
    filter: drop-shadow(0 0 8px rgba(255, 215, 80, .95)) !important;
}

.shared-chip-tray > .chip-option:focus-visible {
    outline: 3px solid #fff4a3 !important;
    outline-offset: 3px !important;
}

.shared-chip-tray > .chip-option:disabled {
    cursor: not-allowed !important;
    opacity: .72 !important;
    filter: saturate(.78) grayscale(.12) !important;
}

.shared-chip-tray > .chip-option:disabled img {
    opacity: 1 !important;
    filter: none !important;
}

.shared-chip-scroll {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 211, 77, .72);
    border-radius: 50%;
    background: rgba(0, 35, 25, .94);
    color: #ffe17b;
    font: 900 24px/1 system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}

.shared-chip-scroll:hover:not(:disabled),
.shared-chip-scroll:focus-visible {
    border-color: #ffe17b;
    box-shadow: 0 0 12px rgba(255, 211, 77, .55);
}

.shared-chip-scroll:focus-visible {
    outline: 3px solid #fff4a3;
    outline-offset: 2px;
}

.shared-chip-scroll:disabled {
    opacity: .45;
    cursor: default;
}

.shared-chip-scroll[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .shared-chip-selector {
        gap: 4px;
    }

    .shared-chip-selector .shared-chip-tray {
        gap: 7px !important;
        padding: 11px 7px 14px !important;
    }

    .shared-chip-tray > .chip-option,
    .shared-chip-selector .shared-chip-tray > .chip-option {
        flex-basis: 64px !important;
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shared-chip-selector .shared-chip-tray {
        scroll-behavior: auto;
    }

    .shared-chip-tray > .chip-option {
        transition: none;
    }
}