/* ===== mano — bottom player: horizontal line (POV hand tiles) ===== */
:root {
  --hand-half: 66px;
  --hand-pip: 12px;
}
/* Turn status text — its OWN layer above the rack (a sibling of .hand-area, never
   attached to it). White with a readable shadow over the table. The margin keeps it
   clear of the rack even at the top of the rise/breathe (~18px), so the rack animates
   independently and never covers or moves the text; z-index is a safety net. */
.turn-info {
  position: relative; z-index: 5;
  text-align: center; font-size: 14px; min-height: 18px; margin-bottom: 20px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.55);
  padding: 0 8px;
}
.turn-info .you { color: #fff; font-weight: 700; }
/* The bottom player's rack is the SAME wooden plate the opponents use
   (.seat-panel.portrait in seats.css): identical wood, border, radius and drop
   shadow — no separate/custom design. It hugs the tiles (fit-content, centered)
   instead of stretching across the screen, so its size follows the hand, and it
   floats up off the bottom edge. Only position/orientation/scale differ. */
/* The rack's vertical offset is the SUM of two independent parts so they never fight:
   --rack-rise is TRANSITIONED (smooth rise on your turn, smooth return after) and
   --rack-breathe is ANIMATED (subtle continuous drift). Because they're separate
   properties, the breathing animation can't suppress the rise/return transition.
   We move via `top` (position:relative), never transform, so the rack never becomes
   a containing block for the drag's position:fixed tile. */
@property --rack-rise    { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rack-breathe { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* Bottom row: the unified player card, centered. The whole card (name/points
   header + tile rack) rises/breathes together on your turn. */
.bottom-area {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 10px;
}
/* The wooden RACK. It wraps ONLY the hand (stats + tiles) as a column and hugs them
   (fit-content) — the identity is NOT a flow child (it's positioned to the left, out of
   flow, below), so it can never widen the rack or push the tiles. Original dimensions. */
.hand-area {
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  --rack-rise: 0px; --rack-breathe: 0px;
  top: calc(var(--rack-rise) + var(--rack-breathe));
  width: fit-content; max-width: 100%;
  background: linear-gradient(180deg, #2a1c12, #190f08);
  border: 1px solid var(--plate-line); border-radius: 10px;
  padding: 6px 8px; box-shadow: 0 6px 14px rgba(0,0,0,.4);
  transition: --rack-rise .5s cubic-bezier(.22, .61, .36, 1);
}
/* Self identity: its OWN reserved area to the LEFT of the rack, taken OUT of the rack's flow
   (position:absolute) so it can't change the rack's width or the hand's centred position —
   the rack stays fixed and the profile adapts around it. Vertically centred against the rack
   and pinned just left of its edge. Scoped to `.hand-area` so ONLY the in-game self seat is
   affected (lobby seat, opponents, and all card styling untouched). */
.hand-area .seat-panel.pos-self {
  position: absolute; width: max-content; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
}
.hand-area .seat-panel.pos-self.portrait .pc-idcol {
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-wrap: nowrap;
}
.hand-area .seat-panel.pos-self.portrait .op-head {
  flex-direction: column; align-items: center; gap: 3px;
}
.hand-area .seat-panel.pos-self.portrait .op-head .avatar { margin-right: 0; }
/* Right side of the plate: the stats row sits ABOVE the tiles (the identity/level stays in
   the left column). The stats node is relocated here by playerCard.js; re-apply the same
   self-HUD stat sizing it had inside the seat panel (that scoped rule no longer reaches it). */
.hand-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.self-stats-top .pcard { margin: 0; }                 /* the stats keep their original card look */
.self-stats-top .pc-stats { font-size: 16px; gap: 12px; }
.self-stats-top .pc-ico { font-size: 17px; }
.hand {
  position: relative; z-index: 1;
  display: flex; flex-wrap: nowrap; flex-direction: row;
  gap: 4px; justify-content: center; align-items: flex-end;
  min-height: 152px; overflow-x: auto; padding: 0 4px;
}
.hand-tile .half {
  width: var(--hand-half);
  height: var(--hand-half);
  padding: 5px;
}
.hand-tile .pip {
  width: var(--hand-pip);
  height: var(--hand-pip);
}
.hand-tile.reveal-wrap {
  box-shadow: none; background: transparent; padding: 0;
}
.hand-tile.reveal-wrap .reveal-tile .half {
  width: var(--hand-half);
  height: var(--hand-half);
  padding: 5px;
}
.hand-tile.reveal-wrap .reveal-tile .pip {
  width: var(--hand-pip);
  height: var(--hand-pip);
}
.hand-area.turn-wait { box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); }
/* Your turn: the rack is "presented" — it rises gently, then breathes so it feels
   alive. Two animations: a one-shot ease-out rise, then a slow subtle drift held
   after the rise (delay = rise duration). Only THIS rack (the local player's) is
   ever .turn-active, so opponent racks never move. Return to rest is handled by the
   base `transition: top` when .turn-active is removed. */
.hand-area.turn-active {
  box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 18px rgba(150,205,255,.55), 0 0 0 2px rgba(190,225,255,.5);
  --rack-rise: -14px;                              /* gentle rise (transitions in AND out) */
  animation: rackBreathe 5s ease-in-out infinite; /* subtle breathing, drifts to ~-18 and back */
}
@keyframes rackBreathe { 0%, 100% { --rack-breathe: 0px; } 50% { --rack-breathe: -4px; } }

/* Respect reduced-motion: keep a small static "presented" lift, no breathing. */
@media (prefers-reduced-motion: reduce) {
  .hand-area.turn-active { animation: none; --rack-rise: -10px; }
}
/* The outer .hand-tile is a 3D stage (perspective + lift/drag); the inner is the
   physical tile body — ivory face + pips move together, so a flip turns the whole
   piece. Resting flipped state stays a 2D 180° turn, so pips are pixel-identical
   to before (values 2 & 3 keep their exact diagonal); the flip animation only adds
   the 3D edge-on tilt + lift on the way there. */
.hand-tile { position: relative; flex-shrink: 0; transition: transform .12s; transform-origin: bottom center; perspective: 660px; }
.hand-tile.domino { background: none; box-shadow: none; padding: 0; }
.hand-tile.flipping { z-index: 8; }
.hand-tile-inner {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #fbf6ea, var(--ivory));
  border-radius: 2px; padding: 3px;
  /* FLAT 2D piece: one soft shadow for separation off the rack, plus a hairline edge
     for crispness — no glossy highlight, no raised bevel. */
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.12);
  transform-origin: center center;
  transition: transform .2s ease;
  will-change: transform;
}
.hand-tile-inner.flipped { transform: rotateZ(180deg); }
.hand-tile-inner.flip-in { animation: handFlipIn .46s cubic-bezier(.3,.7,.3,1); }
.hand-tile-inner.flip-out { animation: handFlipOut .46s cubic-bezier(.3,.7,.3,1); }
@keyframes handFlipIn {
  0%   { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
  50%  { transform: translateY(-16px) rotateX(88deg) rotateZ(90deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateZ(180deg); }
}
@keyframes handFlipOut {
  0%   { transform: translateY(0) rotateX(0deg) rotateZ(180deg); }
  50%  { transform: translateY(-16px) rotateX(88deg) rotateZ(90deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
}
.hand-tile.organize { cursor: grab; touch-action: none; -webkit-touch-callout: none; }
.hand-tile.organize, .hand-tile.organize * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hand-tile.organize:active { cursor: grabbing; }
/* dragged tile lifts out of flow and follows the cursor (position set in JS) */
.hand-tile.dragging { position: fixed; z-index: 60; margin: 0; pointer-events: none; transition: none; cursor: grabbing; }
.hand-tile.dragging .hand-tile-inner { transform: scale(1.06); box-shadow: 0 24px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(0,0,0,.1); }
.hand-drop-placeholder { flex-shrink: 0; align-self: stretch; }
.hand-tile.playable { cursor: pointer; }
/* Select feedback: a clean lift off the rack with a deeper shadow and the existing blue cue. */
.hand-tile.playable:hover { transform: translateY(-14px); box-shadow: 0 18px 26px rgba(0,0,0,.5), 0 0 12px rgba(150,205,255,.4); z-index: 5; }
/* Press: settle back down slightly for tactile "I'm placing this" feedback. */
.hand-tile.playable:active { transform: translateY(-7px) scale(.985); }
.hand-tile.unplayable { opacity: .5; }
.hand-tile.no-play { opacity: .92; }
.hand-tile.no-play::after {
  content: '\1F512'; position: absolute; top: 2px; right: 3px; font-size: 9px; line-height: 1;
  opacity: .55; pointer-events: none;
}
.hand-tile.playable::after { content: none; }
.hand-tile.choice .zone { cursor: pointer; position: relative; }

/* Two different numbers each fit a different end: highlight both playable pips
   (Cuban-blue ring, brighter on hover) so the player taps the number to play — it
   snaps to the matching side. No labels; hit areas rotate with the tile if flipped. */
.hand-tile.choice .zone.pip-play {
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(30,136,229,.55);
  transition: box-shadow .15s ease, background .15s ease;
}
.hand-tile.choice .zone.pip-play:hover {
  background: rgba(30,136,229,.28);
  box-shadow: inset 0 0 0 2px rgba(30,136,229,.95);
}

/* Both ends share the value (e.g. 6…6): the original Left/Right picker — tap the top
   half for the left end or the bottom half for the right end. A small, subtle ◀/▶ hint
   sits in the tile's own corner (upper-left = left end, lower-right = right end) — just
   enough to signal the direction without competing with the pips. It's a PLAIN blue
   glyph (no box/pill/border/shadow) drawn as an ABSOLUTE overlay inside the tile (no
   size/padding/margin in flow), so the hand keeps its natural width and never gains a
   scrollbar, and the halves stay the big click targets. */
.hand-tile.choice .zone[data-label]:first-child { border-bottom: 2px solid rgba(255,255,255,.25); }
.hand-tile.choice .zone[data-label]::after {
  content: attr(data-label); position: absolute; font-size: 20px; line-height: 1;
  color: var(--cuba-blue); opacity: .6; pointer-events: none; z-index: 6;
}
.hand-tile.choice .zone[data-label]::after { right: 2px; bottom: 2px; }                            /* right end → lower-right corner */
.hand-tile.choice .zone[data-label].label-left::after { right: auto; bottom: auto; left: 2px; top: 2px; } /* left end → upper-left corner */

/* Lobby-only tweaks for narrow screens. The in-game table scales as one unit via
   the viewport zoom (viewport-scale.js), so no per-element game overrides here. */
@media (max-width: 620px) {
  .seat-slot { width: 120px; } .difficulty { grid-template-columns: repeat(2, 1fr); }
}