/* RPS-specific styles. The shared shell (score, status line, connect bar,
   below-game controls, a11y primitives, their breakpoints) and the default
   design tokens (--ink --paper --line …) come from /lib/core.css, linked
   before this file — a game :root here may override any of them. */

.hands {
    display: flex;
    justify-content: center;
    gap: 4vw;
}

.hand {
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    font-size: 70px;
    cursor: pointer;
    transition: transform 0.12s ease;
    line-height: 1;
    padding: 8px;
}

/* Only on devices that truly hover — on touch screens :hover sticks after a
   tap, which kept the last pick enlarged after the round ended. */
@media (hover: hover) {
    .hand:hover:not(:disabled) {
        transform: scale(1.15) translateY(-6px);
    }
}

.hand:disabled {
    cursor: default;
    filter: grayscale(0.6);
    opacity: 0.6;
}

.hand.picked {
    transform: scale(1.15) translateY(-6px);
}

@media (min-width: 576px) {
    .hand { font-size: 90px; }
}

@media (min-width: 768px) {
    .hand { font-size: 100px; }
}

@media (min-width: 992px) {
    .hand { font-size: 130px; }
}

@media (min-width: 1200px) {
    .hand { font-size: 160px; }
}

/* WCAG 2.3.3: the picked/hover lift is a scale transform; drop the animation
   but keep the state legible. (core.css already kills transitions globally.) */
@media (prefers-reduced-motion: reduce) {
    .hand:hover:not(:disabled),
    .hand.picked {
        transform: none;
    }
    .hand.picked {
        outline: 3px solid var(--focus);
        outline-offset: 4px;
        border-radius: 12px;
    }
}