/* ETHERION v3.19 — 내 핸드: 똑바로 한 줄, 겹치지 않게 (js/game.js handHTML의 --i · --n, 가이드 2.8 "핸드")
   v3.19.4 — 붙박이 자리: --i = 자리 번호, --n = 자리 수(보충 장수 6과 장수 중 큰 쪽). 낸 카드 자리는 빈 채로 남는다
   예전(v2.6 css/hand.css)은 부채꼴로 기울어 겹치고 아래쪽이 화면 밖으로 잘렸다. 이제
   - 카드는 기울지 않고(0°) 카드 한 장이 통째로 보인다(판타지 마스터즈식 카드라 오른쪽 아래 공 · 방 · 체까지).
   - 카드 사이는 늘 틈(--hgap)만큼 떨어져 있고, 장수가 많아 넘치면 카드 폭(--hcw)이 줄어든다. 겹치지 않는다.
   - 카드 키(폭 × 1.4)는 핸드 줄 높이(--hand-vis) 안에 들어가게 — 폰 화면에서도 아래가 잘리지 않는다.
   - 올리면 조금 떠오르고(겹치지 않을 만큼만), 고르면 조금 더 떠올라 금 테. 이웃은 밀려나지 않는다.
   - .hand-me는 크기 기준 상자(container)라 --hcw가 핸드 줄 폭(100cqw)에서 바로 px로 정해지고, 카드 안 글자도 그 폭을 따른다.
   맨 마지막에 읽는다 (style.css · flags.css · swap.css · mobile.css · hand.css의 핸드 자리 · 자세를 덮는다) */

@property --hcw { syntax: "<length>"; inherits: true; initial-value: 0px; }

.prow-bot .hand-me { container-type: inline-size; }
.screen-game { --hgap: max(6px, calc(var(--cw) * .07)); }

/* 자리: 자리 줄(--n = 자리 수 S, 보통 6)을 가운데 두고, i번째 자리 = 왼쪽 끝 + i × (폭 + 틈).
   v3.19.4: --i는 배열 순번이 아니라 자리 번호(js/game.js handSlots). 카드를 내도 --n이 그대로라 남은 카드가 가운데로 모이거나 커지지 않고, 낸 자리는 비어 있다 */
.screen-game .prow-bot .hand-me .hand-slot,
.screen-game .b-main.lay-swap .prow-bot .hand-me .hand-slot {
  --hcw: min(var(--hw), calc((100cqw - var(--hgap) * (var(--n, 1) - 1)) / var(--n, 1)), calc((var(--hand-vis) - 6px) / 1.4));
  --r: 0deg !important; --y: 0% !important; --sk: 0 !important; --pk: 0 !important;
  width: var(--hcw);
  left: calc(50% - (var(--hcw) * var(--n, 1) + var(--hgap) * (var(--n, 1) - 1)) / 2 + var(--i, 0) * (var(--hcw) + var(--hgap)));
  top: max(2px, calc((var(--hand-vis) - var(--hcw) * 1.4) * .45));
}
.screen-game .hand-me .hand-slot .card { --cw: var(--hcw); }
.screen-game .hand-me .hand-slot .hk-hand { font-size: calc(var(--hcw) * .11); }

/* 자세: 바닥 = 똑바로 · 올림 = 4% 떠오름 · 고름 = 7% 떠오르고 아주 조금 커짐 (틈 안에서) */
.screen-game .hand-me .hand-slot .hand-card { transform-origin: 50% 100%; transform: none; }
.screen-game .hand-me .hand-slot.hov .hand-card { transform: translateY(calc(var(--hcw) * -.06)); }
.screen-game .hand-me .hand-slot.selected .hand-card { transform: translateY(calc(var(--hcw) * -.09)) scale(1.03); }
.screen-game .hand-me .hand-slot.selected.hov .hand-card { transform: translateY(calc(var(--hcw) * -.1)) scale(1.03); }
.screen-game .hand-me .hand-slot:hover:not(.hov):not(.selected) .hand-card { transform: none; }
body.is-dragging .screen-game .hand-me .hand-slot .hand-card,
#board.hand-locked .hand-me .hand-slot .hand-card { transform: none !important; }
/* 반응 영역: 카드 자리 그대로 (예전에는 크게 떠오른 카드를 덮느라 옆 카드까지 넓혔다) */
.screen-game .hand-me .hand-slot.hov::after, .screen-game .hand-me .hand-slot:hover::after { left: 0; right: 0; top: calc(var(--hcw) * -.1); bottom: 0; }
.screen-game .hand-me .hand-slot.selected::after { left: 0; right: 0; top: calc(var(--hcw) * -.12); bottom: 0; }