/* Direct manipulation: only cards and row space are interactive. */
.natural-hand #room[data-my-turn=true] .hand-dock{background:#0faa62}
.natural-hand #hand{--motion-card:88px;--motion-step:64px;--motion-gap:40px;--motion-height:124px;justify-content:safe center;min-height:162px;padding:0 36px 0 8px}
.natural-hand #hand .hand-row{display:flex;align-items:flex-start;flex:0 0 auto;width:max-content;max-width:none;min-height:162px;gap:0;padding:21px 0 17px;border:0;overflow:visible}
.natural-hand #hand .hand-card,.natural-hand #hand .hand-card:last-child,.natural-hand #hand .hand-card:has(+ .insertion-target:last-child){flex:0 0 var(--motion-step);width:var(--motion-step);max-width:none;margin:0;position:relative;pointer-events:auto;will-change:transform}
.natural-hand #hand .hand-card[data-private-gap=true],.natural-hand #hand .hand-placeholder[data-private-gap=true]{margin-left:var(--motion-gap)}
.natural-hand #hand .hand-card[data-private-gap=true]::before{content:'';position:absolute;left:calc(var(--motion-gap)*-.5);top:12px;height:calc(var(--motion-height) - 24px);border-left:1px dashed #e6d28688;pointer-events:none}
.natural-hand #hand button.card{width:var(--motion-card);height:var(--motion-height);border-radius:7px;touch-action:none;cursor:grab;transition:transform .12s;position:relative}
.natural-hand #hand button.card .card-art{pointer-events:none;user-select:none;-webkit-user-drag:none}
.natural-hand #hand button.card.selected{transform:translateY(-12px);outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 0 12px #f1c87390;z-index:auto}
.natural-hand #hand .hand-card:has(.card.selected){z-index:auto}
.natural-hand #hand[data-moving=true] .card.selected{transform:none;outline:0;box-shadow:0 2px 5px #0005}
.natural-hand #hand .hand-card.drag-origin{flex-basis:0!important;width:0!important;margin:0!important;pointer-events:none}
.natural-hand #hand .drag-origin .card,.natural-hand #hand .drag-origin::before{visibility:hidden}
.natural-hand #hand .hand-placeholder{position:relative;z-index:1;flex:0 0 var(--motion-step);width:var(--motion-step);height:var(--motion-height);border:2px dashed #f4d887aa;border-radius:7px;background:#f8ecba20;box-shadow:inset 0 0 16px #f8ecba18;pointer-events:none;align-self:flex-start}
.natural-hand #hand [data-rami-over]{outline:0!important;background:transparent!important}
.natural-hand .drag-ghost{width:88px!important;height:124px!important;max-width:none!important;transform:rotate(-3deg) scale(1.04);opacity:1!important;box-shadow:0 16px 30px #001619aa,0 0 0 2px #ffe6a6!important;pointer-events:none!important;font-size:0!important;padding:0!important;transition:none!important;border-radius:7px}
.natural-hand .drag-ghost .card-art{width:100%;height:100%;border-radius:7px}
.natural-hand #hand .hand-row:empty::after{content:'↔';display:grid;place-items:center;min-height:var(--motion-height);width:90px;color:#b5d7bd77;font-size:23px;pointer-events:none}
@media(max-width:768px),(max-width:1024px) and (max-height:600px){
 .natural-hand #hand{--motion-card:84px;--motion-step:60px;--motion-height:118px;--motion-gap:40px;flex-direction:column;overflow:visible;min-height:0;gap:7px;padding:0}
 .natural-hand #hand .hand-row{flex:0 0 auto;width:100%;max-width:100%;min-height:155px;overflow-x:auto;overflow-y:hidden;padding:20px 48px 15px 8px;border:1px solid #a3d8cd44;border-radius:11px;background:#062e2a19;touch-action:pan-x pan-y;scroll-padding-inline:12px;scrollbar-width:thin}
 .natural-hand .drag-ghost{width:84px!important;height:118px!important}
 .natural-hand .hand-help{font-size:10px;line-height:1.5;margin-top:5px}
}
@media(min-width:769px) and (min-height:601px),(min-width:1025px){.natural-hand #hand .hand-row:empty{display:none}}
@media(prefers-reduced-motion:reduce){.natural-hand #hand button.card{transition:none}.natural-hand .drag-ghost{transform:none}}

/* RAMI iPhone repair: touch on cards is managed by hand-drag.js. */
@media (pointer:coarse){
 .natural-hand #hand .hand-row{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
 .natural-hand #hand button.card{touch-action:none!important;}
 .natural-hand #hand button.card.selected{transform:none!important;}
 .natural-hand #hand button.card:focus-visible{transform:none!important;}
}