/* The hand (js/hand-fan.js): a fan tucked under the dock, raised into a grid,
   picks flying up into slots. One layer, every card moved by transform only.
   Used at the online table (play/host) and in the demo game. */
body.hf-tucked { padding-bottom: 164px; }
/* With the fan peeking above it, the dock is solid so its line never sits over the cards. */
body.hf-tucked .tbl-dock { background: var(--paper); box-shadow: 0 -2px 0 var(--tan); }
.hf { position: fixed; inset: 0; z-index: 125; pointer-events: none; --w: 110px; }
.hf[data-state="raised"], .hf[data-state="ceremony"] { z-index: 1000; }
.hf-scrim { position: absolute; inset: 0; background: rgba(30, 14, 6, .9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.hf[data-state="raised"] .hf-scrim, .hf[data-state="ceremony"] .hf-scrim { opacity: 1; pointer-events: auto; }
.hf[data-state="hidden"] .hf-card { opacity: 0; pointer-events: none; }

.hf-card {
    position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: 5 / 7;
    transform-origin: center; pointer-events: auto; cursor: pointer; perspective: 900px;
    transition: transform .45s cubic-bezier(.3, 1.25, .5, 1), opacity .3s, translate .2s;
}
.hf-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3, 1.3, .5, 1); }
.hf-card.down .hf-in { transform: rotateY(180deg); }
.hf-front, .hf-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hf-back { transform: rotateY(180deg); }
.hf-back .card-back { width: 100%; height: 100%; display: block; border-radius: var(--card-radius, 10px); }
.hf-front .card { width: 100%; box-shadow: 0 3px 10px rgba(30, 14, 6, .3); }
.hf[data-state="tucked"] .hf-card:hover { translate: 0 -10px; }
.hf-card.picked .card, .hf-card.staged .card { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 22px 6px var(--glow); }
.hf-card.is-new::after {
    content: 'new'; position: absolute; top: -8px; right: -8px; z-index: 2; padding: 1px 8px;
    background: var(--gold); color: #fff; font-size: 12px; font-weight: bold; border-radius: 999px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.hf[data-state="tucked"] .hf-card.is-new::after { font-size: 20px; padding: 2px 12px; }

.hf-deck, .hf-title, .hf-slots, .hf-foot, .hf-say { position: absolute; opacity: 0; pointer-events: none; transition: opacity .3s; }
.hf-deck { left: 50%; top: min(30vh, 230px); width: calc(var(--w) * .55); translate: -50% -50%; filter: drop-shadow(0 4px 0 #2a160c); }
.hf-deck .card-back { width: 100%; display: block; border-radius: 6px; }
.hf.dealing .hf-deck { opacity: 1; }
.hf-title { left: 0; right: 0; text-align: center; font-family: var(--font-pixel); color: var(--parch); font-size: 1.5rem; }
.hf-slots { display: flex; gap: 16px; }
.hf-slot { width: var(--sw, 150px); aspect-ratio: 5 / 7; border: 3px dashed rgba(246, 227, 189, .45); border-radius: 12px; }
.hf-say { left: 16px; right: 16px; top: 9vh; text-align: center; font-family: var(--font-pixel); color: var(--parch); font-size: 1.6rem; text-wrap: balance; }
.hf-say.on { opacity: 1; }
.hf-foot {
    left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center;
    padding: 10px 16px max(14px, env(safe-area-inset-bottom));
}
.hf-foot button { margin: 0; }
.hf-foot .hf-confirm { flex: 1; max-width: 300px; }
.hf-foot [hidden] { display: none; }
.hf[data-state="raised"] :is(.hf-title, .hf-slots, .hf-foot) { opacity: 1; }
.hf[data-state="raised"] .hf-foot { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hf-card, .hf-in { transition: none; } }