/* Scroll Hand — the "scroll" hand skin (misc/castleSkins.json → hands).

   Cards stand side by side at full size in one row that scrolls sideways
   (swipe on touch, wheel / trackpad / scrollbar on desktop) instead of
   squeezing or fanning to fit. Every card has a Discard button underneath
   (views/card.jsx), and the existing top-right select toggle is drawn as a
   tick box. Behaviour lives in main.js: isScrollHandCard() lets touches pan
   the row natively, discardFromButton() does the discard, and the coverflow
   leaves this hand alone.

   Linked after landscape-mobile.css so it wins the cascade; !important only
   where inline styles from main.js (touch highlighting, coverflow) or the
   responsive files' own !important would otherwise win. */

.hand.hand-scroll {
  --scroll-card-w: 100px;
  --scroll-card-h: 200px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  /* Room above for the pulse of playable cards and the tutorial "select" tag. */
  padding: 14px 8px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* Horizontal pans scroll the row; vertical swipes still reach main.js, where
     swipe-up selects a card and swipe-down deselects it. */
  touch-action: pan-x;
}

/* The containers above the row size to their content on phones (mobile.css
   gives .hand-container flex: 0 0 auto and .hand max-content), so the row
   would push the page wider instead of scrolling. Let them shrink to the
   screen; the row then scrolls inside it. */
.hands:has(.hand-scroll) {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hand-container:has(.hand-scroll) {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
[id$="-hand"]:has(> .hand-scroll) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Centred while it fits, scrollable from the first card when it does not —
   auto margins, because justify-content: center would push the first cards
   out of reach on the left. */
.hand.hand-scroll .card-container:first-child { margin-left: auto; }
.hand.hand-scroll .card-container:last-child { margin-right: auto; }

.hand.hand-scroll .card-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 var(--scroll-card-w) !important;
  width: var(--scroll-card-w) !important;
  /* No lifting or scaling: it would be clipped by the scrolling row. Hover and
     selection are shown on the card face instead. */
  transform: none !important;
  scroll-snap-align: start;
}

.hand.hand-scroll .card {
  width: var(--scroll-card-w);
  height: var(--scroll-card-h);
  transition: box-shadow 0.15s, outline-color 0.15s;
}

.hand.hand-scroll .card-container:hover .card,
.hand.hand-scroll .card-container:focus-visible .card {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.hand.hand-scroll .card-container.long-press .card {
  outline: 3px solid #c0392b;
  outline-offset: 1px;
}

/* ── The select toggle as a tick box ── */
.hand.hand-scroll .card-top-right {
  width: 22px;
  height: 22px;
  padding: 0;
  box-sizing: border-box;
  justify-content: center;
  border: 2px solid #f3e2b8;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 3;
}

.hand.hand-scroll .card-top-right > i { display: none; }

.hand.hand-scroll .card-container.long-press .card-top-right {
  background: #c0392b;
  border-color: #fff;
}

.hand.hand-scroll .card-container.long-press .card-top-right::before {
  content: "\2713";
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
}

/* ── Discard button ── */
.hand.hand-scroll .card-discard-btn {
  width: 100%;
  padding: 3px 2px;
  border: 1px solid #8a5a1c;
  border-radius: 6px;
  background: rgba(255, 250, 235, 0.92);
  color: #3a2410;
  font: 700 0.72rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}

.hand.hand-scroll .card-discard-btn:hover { background: #fff; }

.hand.hand-scroll .card-discard-many { display: none; }

/* With cards ticked, only the ticked ones keep a button, and it discards all. */
.hand.hand-scroll:has(.long-press) .card-discard-one { display: none; }
.hand.hand-scroll:has(.long-press) .card-discard-many { display: inline; }
.hand.hand-scroll:has(.long-press) .card-container:not(.long-press) .card-discard-btn {
  visibility: hidden;
}
.hand.hand-scroll .card-container.long-press .card-discard-btn {
  background: #c0392b;
  border-color: #7d1f15;
  color: #fff;
}

/* Only on your own turn. */
#game:not(.your-turn) .hand.hand-scroll .card-discard-btn {
  opacity: 0.4;
  pointer-events: none;
}

/* Landscape phones: the same 70px card the other hands use there, and no
   hover zoom (landscape-mobile.css scales a hovered card 1.8x). */
@media (orientation: landscape) and (max-height: 500px) {
  .hand.hand-scroll {
    --scroll-card-w: 70px;
    --scroll-card-h: 140px;
    gap: 5px;
    padding: 8px 4px 4px;
  }
  .hand.hand-scroll .card-discard-btn { font-size: 0.6rem; padding: 2px 1px; }
  .hand.hand-scroll .card-top-right { width: 18px; height: 18px; }
}

/* The card under the player's finger (main.js previewScrollHandCardAt): its
   preview is showing, so mark which card that is. */
.hand.hand-scroll .card-container.card-touch-preview .card {
  outline: 3px solid #f3c623;
  outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 16px rgba(243, 198, 35, 0.85);
}
.hand.hand-scroll .card-container.card-touch-preview.long-press .card {
  outline-color: #c0392b;
}