.hand-picker { width:min(1280px,100vw); height:min(900px,100dvh); max-width:100vw; max-height:100dvh; box-sizing:border-box; padding:0; border:1px solid #52616c; border-radius:16px; background:#0b1726; color:#eaf4ff; overflow:hidden; overscroll-behavior:contain; }
.hand-picker[open] { display:flex; flex-direction:column; }
.hand-picker::backdrop { background:#000b; }
.hand-picker header, .hand-picker footer { display:flex; flex-shrink:0; align-items:center; gap:10px; padding:10px 12px; }
.hand-picker header { justify-content:space-between; }
.hand-picker h2 { margin:0; font-size:18px; }
.hand-picker [role="status"] { margin-left:auto; font-size:16px; white-space:nowrap; }
.hand-picker button:disabled { opacity:.45; cursor:default; }
.hand-picker button:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.picker-hand { position:relative; align-self:center; flex-shrink:0; overflow:visible; clip-path:inset(0 -24px); border-bottom:2px solid #ffcf3b; background:#102334; }
.picker-hand::before { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#ffcf3b; z-index:1; pointer-events:none; }
.picker-hand.is-empty::after { content:'+'; position:absolute; inset:0; display:grid; place-items:center; color:#9fb0c8; font-size:40px; pointer-events:none; }
.hand-picker .picker-card { position:absolute; display:block; margin:0; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:0 1px 4px #0008; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.picker-card img { display:block; width:100%; height:100%; border-radius:inherit; pointer-events:none; }
.picker-hand .picker-card { left:50%; transform-origin:50% 0; }
/* Crop enlarged artwork to the rank and suit in its upper-left corner. */
.picker-deck { display:flex; flex-direction:column; justify-content:center; gap:8px; flex:1; min-height:0; padding:12px; overflow:hidden; border:2px solid transparent; }
.picker-suit { display:grid; grid-template-columns:repeat(var(--suit-count),minmax(0,1fr)); gap:6px; width:100%; max-width:calc(var(--suit-count) * var(--corner-width,52px) + (var(--suit-count) - 1) * 6px); margin:0 auto; flex-shrink:0; }
.picker-suit .picker-card { position:relative; width:100%; aspect-ratio:10/21; max-height:110px; overflow:hidden; border-radius:6px; background:white; }
.picker-suit .picker-card img { position:absolute; width:990%; max-width:none; height:auto; left:-15%; top:0; transform:translateY(-6%); border-radius:0; }
.picker-suit .picker-card.in-hand { opacity:.18; box-shadow:none; }
.picker-card.is-dragging { opacity:.25; }
.hand-picker .drop-active { background:#34412c; border-color:#ffcf3b; }
.picker-drag-preview { position:fixed; width:var(--picker-card-width); height:var(--picker-card-height); transform:translate(-30%,-18%); z-index:10; border-radius:8px; box-shadow:0 8px 28px #0009; pointer-events:none; }
.hand-picker footer { flex-wrap:wrap; justify-content:flex-end; border-top:1px solid #52616c; }
.hand-picker footer [data-clear] { margin-right:auto; }
@media(max-width:520px) {
  .hand-picker { border:0; border-radius:0; }
  .hand-picker header { padding-top:max(8px,env(safe-area-inset-top)); }
  .hand-picker footer { padding-bottom:max(10px,env(safe-area-inset-bottom)); gap:6px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .hand-picker[open] { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr) auto; }
  .hand-picker header, .hand-picker footer { grid-column:1 / -1; }
  .hand-picker .picker-hand { height:100% !important; }
}