/* ==========================================================================
   GinRummy.now — game board & cards (self-contained; scoped to .gr-board so it
   never collides with the legacy .board rules kept in solitaire.css).
   The felt table theme (.game-shell.table-*) and card-back choice come from
   sn-settings.js; this file only styles the rummy table, hands, and melds.
   ========================================================================== */

/* CLS reservation: the board is injected by JS, so #board-wrap starts empty and
   would grow on the first uncached paint (shoving the rating/content down). These
   min-heights match each family's initial-deal board height at each breakpoint, so
   the page never reflows. #board-wrap is transparent over the felt shell, so any
   small over-reservation is an invisible felt gap, never a white box.
   NOTE: if the card size vars below change, re-measure and update these. */
/* Values track the measured initial-deal board height at each card-size
   breakpoint (default 72px cards / ≤560 46px / ≤380 44px). bw-gin = gin family,
   bw-meld = Rummy, bw-meld-lg = 500 Rum (13-card hand). */
.bw-gin     { min-height: 470px; }
.bw-meld    { min-height: 508px; }
.bw-meld-lg { min-height: 524px; }
@media (max-width: 560px) {
  .bw-gin     { min-height: 384px; }
  .bw-meld    { min-height: 420px; }
  .bw-meld-lg { min-height: 552px; }
}
@media (max-width: 380px) {
  .bw-gin     { min-height: 378px; }
  .bw-meld    { min-height: 414px; }
  .bw-meld-lg { min-height: 548px; }
}

.gr-board {
  --gr-card-w: 72px;
  --gr-card-h: 100px;
  --gr-gap: 6px;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 10px 8px 14px;
  color: #f8fafc;
  user-select: none;
  -webkit-user-select: none;
}

/* Rows: opponent / center piles / player */
.gr-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* Fan the opponent's face-down cards (overlap) so a 10-13 card hand never wraps
   to a second row. This keeps the board a stable height at every width — which
   makes the #board-wrap CLS reservation reliable — and compacts the board so
   more of it is visible above the fold on phones. `> .gr-card` targets the
   face-down cards dealt during play; the revealed .gr-hand at game-over (a
   nested child) keeps its own fan. */
.gr-row-opp { min-height: calc(var(--gr-card-h) + 8px); gap: 0; }
.gr-row-opp > .gr-card { margin-left: -18px; }
.gr-row-opp > .gr-card:first-child { margin-left: 0; }
.gr-row-player { min-height: calc(var(--gr-card-h) + 8px); }

.gr-zone-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.72); text-align: center; margin: 8px 0 4px;
}

.gr-center {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 10px 0; flex-wrap: wrap;
}
.gr-pile { position: relative; width: var(--gr-card-w); height: var(--gr-card-h); }
.gr-pile-label {
  position: absolute; top: calc(var(--gr-card-h) + 4px); left: 0; right: 0;
  text-align: center; font-size: .62rem; font-weight: 600; color: rgba(255,255,255,.7);
  white-space: nowrap;
}
.gr-pile .gr-count {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; color: rgba(255,255,255,.75);
}

/* Hands ------------------------------------------------------------------- */
.gr-hand { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 2px; min-height: var(--gr-card-h); }
.gr-hand.gr-fan .gr-card { margin-left: -14px; }
.gr-hand.gr-fan .gr-card:first-child { margin-left: 0; }
.gr-meld-gap { width: 14px; display: inline-block; }

/* Card -------------------------------------------------------------------- */
.gr-card {
  position: relative;
  width: var(--gr-card-w); height: var(--gr-card-h);
  border-radius: 7px;
  background: #fff; color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08);
  font-weight: 700; line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, margin-top .12s ease;
  cursor: default; flex: 0 0 auto;
}
.no-animations .gr-card { transition: none; }
.gr-card .gr-corner {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  font-size: calc(var(--gr-card-w) * .26); letter-spacing: -.5px;
}
.gr-card .gr-corner.tl { top: 5px; left: 6px; }
.gr-card .gr-corner.br { bottom: 5px; right: 6px; transform: rotate(180deg); }
.gr-card .gr-suit-big {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: calc(var(--gr-card-w) * .5);
}
.gr-card.red { color: #c0392b; }
.gr-card.black { color: #1a1a1a; }

/* Face-down back */
.gr-card.gr-back {
  background: repeating-linear-gradient(45deg, #15803d 0 8px, #166534 8px 16px);
  box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.35);
}
.gr-card.gr-back::after {
  content: ""; position: absolute; inset: 6px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.5);
}
.gr-board[data-back="blue"]  .gr-card.gr-back { background: repeating-linear-gradient(45deg,#1e5fbf 0 8px,#1746a0 8px 16px); }
.gr-board[data-back="red"]   .gr-card.gr-back { background: repeating-linear-gradient(45deg,#c0392b 0 8px,#a12b1f 8px 16px); }
.gr-board[data-back="charcoal"] .gr-card.gr-back { background: repeating-linear-gradient(45deg,#374151 0 8px,#262d38 8px 16px); }
.gr-board[data-back="lattice"] .gr-card.gr-back { background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 2px, transparent 2px 9px) #166534; }

/* Interactive states */
.gr-card.gr-selectable { cursor: pointer; }
/* Hover-lift preview only where a true hover pointer exists. On touch this
   state "sticks" after a tap (can't be moved off), so touch users instead get
   the gr-selected lift, which is applied on tap. */
@media (hover: hover) and (pointer: fine) {
  .gr-card.gr-selectable:hover { transform: translateY(-10px); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
}
.gr-card.gr-selected { transform: translateY(-14px); box-shadow: 0 0 0 3px #fbbf24, 0 8px 18px rgba(0,0,0,.45); }
.gr-card.gr-hintable { box-shadow: 0 0 0 3px #fbbf24, 0 4px 12px rgba(0,0,0,.4); animation: grPulse 1s ease-in-out 2; }
.gr-card.gr-meld-a { box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 2px #22c55e; }
.gr-card.gr-meld-b { box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 2px #3b82f6; }
.gr-card.gr-dead   { opacity: .96; }
.gr-card.gr-just-drawn { animation: grDrawn .35s ease; }
@keyframes grPulse { 0%,100% { box-shadow: 0 0 0 3px #fbbf24, 0 4px 12px rgba(0,0,0,.4);} 50% { box-shadow: 0 0 0 6px rgba(251,191,36,.5), 0 4px 12px rgba(0,0,0,.4);} }
@keyframes grDrawn { from { transform: translateY(-24px) scale(1.05); } to { transform: none; } }

.gr-pile .gr-card { position: absolute; inset: 0; }
.gr-pile.gr-drawable .gr-card, .gr-pile.gr-drawable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .gr-pile.gr-drawable:hover .gr-card { box-shadow: 0 0 0 3px #fbbf24, 0 6px 16px rgba(0,0,0,.4); }
}
/* On touch there is no hover, so keep a persistent gold ring on a pile you can
   draw from — it's the signpost for where to tap. */
@media (hover: none), (pointer: coarse) {
  .gr-pile.gr-drawable .gr-card,
  .gr-pile.gr-drawable .gr-pile-empty { box-shadow: 0 0 0 2px #fbbf24, 0 3px 10px rgba(0,0,0,.35); }
}
.gr-pile-empty {
  width: var(--gr-card-w); height: var(--gr-card-h); border-radius: 7px;
  border: 2px dashed rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: 1.4rem;
}

/* Melds on the table (Rummy family) */
.gr-melds { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0; min-height: 26px; }
.gr-meld-group { display: flex; }
.gr-meld-group .gr-card { margin-left: -30px; }
.gr-meld-group .gr-card:first-child { margin-left: 0; }
.gr-meld-group.gr-layoff-target { outline: 2px dashed #fbbf24; outline-offset: 3px; border-radius: 8px; cursor: pointer; }

/* Message + action bar */
.gr-message {
  text-align: center; font-size: .9rem; font-weight: 600; min-height: 1.4em;
  color: #fff; margin: 8px 0 4px; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.gr-deadwood {
  text-align: center; font-size: .78rem; color: rgba(255,255,255,.85); margin-bottom: 6px;
}
.gr-deadwood b { color: #fbbf24; }
.gr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.gr-actions .gr-btn {
  border: 0; border-radius: 8px; padding: .5rem .9rem; font-size: .82rem; font-weight: 700;
  cursor: pointer; color: #fff; background: rgba(255,255,255,.16); transition: background .12s, transform .12s;
}
.gr-actions .gr-btn:hover:not(:disabled) { background: rgba(255,255,255,.28); }
.gr-actions .gr-btn:active:not(:disabled) { transform: translateY(1px); }
.gr-actions .gr-btn:disabled { opacity: .4; cursor: not-allowed; }
.gr-actions .gr-btn-knock { background: #d97706; }
.gr-actions .gr-btn-knock:hover:not(:disabled) { background: #b45309; }
.gr-actions .gr-btn-gin { background: #16a34a; }
.gr-actions .gr-btn-gin:hover:not(:disabled) { background: #15803d; }
.gr-actions .gr-btn-primary { background: #2563eb; }
.gr-actions .gr-btn-primary:hover:not(:disabled) { background: #1d4ed8; }

/* small screens — card size is capped so a 10-card gin/rummy hand stays on ONE
   row across common phones (360-560px); a 2-row split is worse UX than slightly
   smaller cards. 500 Rum's 13-card hand still wraps (expected, reserved for). */
@media (max-width: 560px) {
  .gr-board { --gr-card-w: 46px; --gr-card-h: 64px; padding: 8px 4px 12px; }
  .gr-meld-group .gr-card { margin-left: -24px; }
  .gr-hand.gr-fan .gr-card { margin-left: -18px; }
  .gr-center { gap: 16px; }
  .gr-actions .gr-btn { min-height: 42px; padding: .55rem 1rem; }
}
@media (max-width: 380px) {
  .gr-board { --gr-card-w: 44px; --gr-card-h: 62px; }
  .gr-hand.gr-fan .gr-card { margin-left: -18px; }
  .gr-meld-group .gr-card { margin-left: -22px; }
}

/* Touch devices: enforce ~44px minimum tap height on the in-board action
   buttons (Discard / Knock / Gin / Meld / Skip / Go out), regardless of width. */
@media (pointer: coarse) {
  .gr-actions .gr-btn { min-height: 44px; padding: .55rem 1rem; font-size: .9rem; }
}

/* ==== Multiplayer room ==================================================== */
.mp-statusbar {
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .9rem; font-weight: 600; font-size: .9rem;
}
.mp-seat { padding: .2rem .6rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.mp-seat.on { background: var(--blue-light); color: var(--blue-dark); box-shadow: inset 0 0 0 1px var(--blue-border); }
.mp-vs { color: #94a3b8; font-size: .8rem; }
.mp-join-panel { text-align: center; color: #fff; padding: 1.5rem 1rem; }
.mp-join-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }
.mp-join-row input {
  padding: .55rem .8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.95); font-size: .95rem; min-width: 200px;
}
.mp-wait { text-align: center; color: #fff; padding: 2rem 1rem; line-height: 1.6; }
.mp-wait b { color: #fbbf24; font-size: 1.2em; letter-spacing: .05em; }
.mp-chat { margin-top: 1rem; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.mp-chat-log { height: 130px; overflow-y: auto; padding: .6rem .8rem; font-size: .85rem; display: flex; flex-direction: column; gap: .2rem; }
.mp-chat-line { color: #334155; }
.mp-chat-form { display: flex; gap: .5rem; padding: .5rem; border-top: 1px solid var(--border); }
.mp-chat-form input { flex: 1; padding: .45rem .7rem; border-radius: 8px; border: 1px solid var(--border); }